Expolibre-3-www/css/expolibre-tangram.css

/* feuille de style réalisé par Antoine Bardelli sous licence Artlibre 3.0.
-----------------------------*/

/* fonts-----------------------------*/
@font-face {
    font-family: 'League Spartan';
    src: url('../webfonts/leaguespartan-bold.eot');
    src: url('../webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/leaguespartan-bold.woff2') format('woff2'),
         url('../webfonts/leaguespartan-bold.woff') format('woff'),
         url('../webfonts/leaguespartan-bold.ttf') format('truetype'),
         url('../webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
/* generiques----------------------------*/
.top-bar, .top-bar-section li:not(.has-form) a:not(.button) {
  background-color: #332B2B; 
}
h1, h2, h3, h3, h5, h6 {
  color: #332B2B;
  font-family:League Spartan, arial, sans-serif;
}
h2{
  font-size: 2rem;
}
.accueil h2 {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
h3{
  font-size: 1.3em;
  padding-top: 2rem;
}
.theme {
  font-family: League Spartan, arial, sans-serif;
}
p{
   font-family:Cambria, georgia, serif;
   line-height: 1.8em;
}
p span{
    font-weight: bold;
    padding-bottom: 2em;
}
p a{
   font-size: 0.9em;
    font-style: italic;
}
ul{
     margin-bottom: 2rem;
}
li{
   font-family:Cambria, georgia, serif;
}
.inline-list {
  font-size: 0.7em;
}
.columns li {
    list-style: outside none square;
    line-height: 1.8em;
}
a {
  color: #332B2B;
}
a:hover{
  color: #ff4d00;
}
a:visited {
  color: #332B2B;
}
a.button{
  color: #fff;
  font-weight:bold;
}
button, .button {
    background: #332B2B url("../img/bouton-or.png") no-repeat scroll 0 0em;
    color: #fff;
}
button:hover, .button:hover, button:focus, .button:focus{
  color:#fff;
  background-color: #ff4d00;
  background-position: -2em -25em; 
}
button:visited, .button:visited{
}
a.button:visited{
}
.column, .columns {
    padding: 2rem 0.9375rem 0rem;
}
.scroll-container {
    padding-top: 3em;
}
.lien-texte, ul.fichier li a{
    background: rgba(0, 0, 0, 0) url("../img/rayures.png") no-repeat scroll 0 0.2em;
    font-size: 0.9em;
    font-style: italic;
    padding: 0 0 0 3em;
}
a span{
  font-size: 0.8em;
}

/* menu import----------------------*/
.top-bar-section ul li > a {
    background: #332B2B none !important ; }
    .top-bar-section ul li > a:hover {
    background: #ff4d00 none !important ; }
/* menu-----------------------------*/
.top-bar .toggle-topbar a {
   font-family: Arial, verdana, sans-serif;
}
/* footer---------------------------*/
.footer{
  padding-top: 0rem;
}
.footer ul li{
   font-family: Arial, verdana, sans-serif;
}
.footer ul li a{
      padding: 0 0.7em;
}
.footer ul li a:hover {
    background: #ff4d00 none repeat scroll 0 0;
    color: #fff;
}
.footer .row {
    padding-bottom: 3em;
}
img[src="img/april_logo.svg"] {
    display: block;
    float: right;
    margin: 0.2em 1em 0;
    padding: 0;
    width: 5em;
}

/* page d'accueil--------------------------*/
.accueil .panel {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    text-align: center;
    min-height: 15em;
}
.panel > p {
    font-size: 0.9em;
    font-style: italic;
}
/* pages generiques-----------------------------*/
.exposer .row, .telecharger .row, .credits .row, .a-propos .row, .exposition .row .accueil.row .exposition .row {
    padding-bottom: 3rem;
}
.adresse > li {
    list-style: outside none none;
}
ul.adresse {
    margin-left: 0rem;
}
.fichier > li {
    list-style: outside none none;
}
.icon-bar > a:hover {
    background: #ff4d00 none repeat scroll 0 0;
}

/* fond pages generiques-----------------------------*/
.scroll-container {
    background:url("../img/fond-blanc.png") repeat scroll 0 0  rgba(0, 0, 0, 0) ;
}
.telecharger{
  background-color: #E7D08B;
  background-position: -6em 3em;
}
.exposer{
  background-color: #C1DCBE;
  background-position: -2em -4em;
}
.credit{
  background-color: #EBC2DB;
  background-position: -2em -8em;
}
.contact{
  background-color: #FBE3DF;
  background-position: 1em 7em;
}
.exposition{
  background-color: #C6EAFA;
  background-position: 3em -5em; 
}
.a-propos{
  background-color: #FFEBA7;
  background-position: -8em -5em; 
}
.scroll-container.accueil{
  background:
/* 
url("../img/arbre.png") no-repeat -13em top / 70%,
*/
  url("../img/city.png") no-repeat -0.3em bottom / 101%,
  url("../img/fond-blanc-50.png") no-repeat scroll 0 0
  ;
  background-color: #E1A3C9;
}

.accueil .large-8 {
  background: url("../img/fond-crenele.svg") repeat-y scroll center top / 100%  transparent ;
  padding: 5em;
}

.accueil p.intro {
    font-size: 1.1em;
}

/* pages panneaux x 8-----------------------------*/
.collection p{
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
}
/* fin pages generique-----------------------------*/
/* pages panneaux-----------------------------*/
.panneau-1 {
  background: url("../img/fond-001.jpg") no-repeat scroll center top / 100%  #c7e9fb ;
}
.panneau-1 .large-8{
  padding-top: 0;
}
.theme span{
  font-size: 1.4em;
  display: inline-block;
}
.panneau-1 .theme span{
  color:#9C4D00;
  font-size: 1.7em;
}
.panneau-2 {
  background: url("../img/fond-002.jpg") no-repeat scroll center top / 100%  #ffebeb ;
}
.panneau-2 .theme span {
    color: #800000;
    display: block;
    font-size: 2em;
}
.panneau-3 {
  background: url("../img/fond-003.jpg") no-repeat scroll center top / 100%  #441650 ;
}
.panneau-3 .theme span {
    color: #4e1452;
    font-size: 2em;
    display: block;
}
.panneau-4 {
  background: url("../img/fond-004.jpg") no-repeat scroll center top / 100%  #f6ecbe ;
}
.panneau-4 .theme span {
    color: #aa4400;
    font-size: 2em;
    display: block;
}
.panneau-5 {
  background: url("../img/fond-005.jpg") no-repeat scroll center top / 100%  #c9eef7 ;
}
.panneau-5 .theme span {
    color: #0044aa;
    font-size: 1.8em;
    display: block;
}
.panneau-6 {
  background: url("../img/fond-006.jpg") no-repeat scroll center top / 100%  #feeae4 ;
}
.panneau-6 .theme span {
    color: #e25050;
    font-size: 2em;
    display: block;
}
.panneau-7 {
  background: url("../img/fond-007.jpg") no-repeat scroll center top / 100%  #c9efc5 ;
}
.panneau-7 .theme span {
    color: #008080;
    font-size: 2em;
    line-height: 1.2em;
    display: block;
}
.panneau-8 {
  background: url("../img/fond-008.jpg") no-repeat scroll center top / 100% #fbffff ;
}
.panneau-8 .theme span {
    color: #005184;
    font-size: 2em;
    line-height: 1.2em;
    display: block;
}
.contenu-texte {
  background-color: rgba(255,255,255,0.5);
  background: url("../img/fond-crenele.svg") repeat-y scroll center top / 100%  transparent ;
  padding: 5em;
}

.icon-bar {
    background-color: transparent;
}

.icon-bar a{
}
a.right {
    background-position :3em top ;
}
.navigation a{
  font-size: 0.7em;
  padding: 0.7rem 1.4rem 0.5rem;
}
.aller {
  float: right;
}
/* pages a propos-----------------------------*/

.accueil img[src="img/april_logo.svg"] {
    display: block;
    margin: 3em 0 7em;
    width: 6em;
}

/* Screen */
@media screen and (max-width: 1140px){

.contenu-texte {
    padding: 5em;
}
}
@media screen and (max-width: 1020px){
.accueil .panel {
    min-height: inherit;
    }
.accueil .large-2.columns, .panneau-1 .large-2.columns, .panneau-2 .large-2.columns, .panneau-3 .large-2.columns, .panneau-4 .large-2.columns, .panneau-5 .large-2.columns, .panneau-6 .large-2.columns, .panneau-7 .large-2.columns, .panneau-8 .large-2.columns {
    display: none;
    }
}
.panel {
    margin-bottom: -1rem;
    }
}
@media screen and (max-width: 970px){

}
@media screen and (max-width: 630px){
.contenu-texte {
    padding: 4em;
}
h2 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
.small-block-grid-2.collection {
    margin-top: 2em;
}
.small-block-grid-2 > li {
    width: 100%;
}
}
@media screen and (max-width: 580px){
.theme span{
  font-size: 1em;
}
.panneau-1 .theme span, .panneau-2 .theme span, .panneau-3 .theme span, .panneau-4 .theme span, .panneau-5 .theme span, .panneau-6 .theme span, .panneau-7 .theme span, .panneau-8 .theme span {
    font-size: 1em;
}
.accueil .large-8 {
    padding: 3em 2em 2em;
}
.contenu-texte {
    padding: 3em 2em;
}
h2 {
    font-size: 1.8rem;
    line-height: 1em;
    margin-bottom: 0;
}
h3 {
    font-size: 1.2em;
    line-height: 1em;
    padding-top: 1rem;
}
}