/* CSS Document */ html { height: 100%; margin: 0px; } body { font-family: 'Roboto', sans-serif; font-weight: 400; color:#000000; font-size: 13px; height: 100%; margin:0px; background:#0f4c8f } /******* REDEFINITION STYLES DE BASE ***************/ textarea { font-family: 'Roboto', sans-serif; font-weight: 400;font-size: 13px;} h1 {padding:0; margin: 0;font-weight: bold;font-size: 19px; margin-bottom: 20px; line-height: 26px; color: #333333;} .wrapper { margin: 0 auto; padding: 0; width: 960px; /*min-height: 100%;*/ /*background: #ffffff;*/ position: relative; /*background:url(../images/bg-contenu.png) repeat-y; padding-left: 16px; padding-right: 16px;*/ /* L'utilisation de position: relative; sur #site d�finit les fronti�res de l'�l�ment #site comme point de rep�re pour le positionnement de ses enfants. La position "top: 0px, left: 0px" est maintenant le coin sup�rieur gauche de #site, au lieu de celui de body. */ } /****** HEADER *********/ #headerMobile {display: none;} /******* r�so 1920px et + : 6 boutons de 205px soit 1230 px quand on est � 1920 de r�so ************/ header {width: 100%; overflow:auto; height: 204px; background-color:#eaeaea;} header #headerGauche {float: left; width: 690px; height: 100%; background:url(../images/header/1920/fond2.jpg) top left no-repeat;} header #headerGauche a {display: block; height: 100%; width: 250px;/* background:url(../images/header/1920/logo.jpg);*/ } header #headerCentre {float: left; width: calc((100% - 1920px) / 7); height: 100%;} header #headerGaucheFond{float: left; display: none;} header #headerDroite {float: left; width: calc(1230px + ((100% - 1920px) / 7) * 6);} header #headerDroite #topBar {height: 50px; background: #eaeaea; font-family:'Roboto Slab','Roboto', sans-serif;} header #headerDroite #topBar li {float:left; list-style:none; height: 28px; margin-top: 10px;} header #headerDroite #topBar li a {display: block; height: 100%; text-decoration:none; text-transform:uppercase; color:#58585a; font-size: 13px; font-weight: 700; line-height: 14px;} header #headerDroite #topBar li a:hover, header #headerDroite #topBar li a.allume {color:#07498d;} header #headerDroite #topBar li.drapFr {margin-left:10px; } header #headerDroite #topBar li.drapFr a {background:url(../images/header/1920/pre-header/drap-fr.jpg) no-repeat left; width: 33px;} header #headerDroite #topBar li.drapFr a:hover, header #headerDroite #topBar li.drapFr a.allume {background:url(../images/header/1920/pre-header/drap-fr-on.jpg) no-repeat left;} header #headerDroite #topBar li.drapEn {margin-left:10px; } header #headerDroite #topBar li.drapEn a {background:url(../images/header/1920/pre-header/drap-en.jpg) no-repeat left; width: 33px;} header #headerDroite #topBar li.drapEn a:hover,header #headerDroite #topBar li.drapEn a.allume {background:url(../images/header/1920/pre-header/drap-en-on.jpg) no-repeat left; } header #headerDroite #topBar li.accueil {margin-left:46px; } header #headerDroite #topBar li.accueil a {background:url(../images/header/1920/pre-header/accueil.jpg) no-repeat left; width: 98px; padding-left: 35px; } header #headerDroite #topBar li.accueil a:hover, header #headerDroite #topBar li.accueil a.allume {background:url(../images/header/1920/pre-header/accueil-on.jpg) no-repeat left; } header #headerDroite #topBar li.accueil div {padding-top:15px;} header #headerDroite #topBar li.recherche a {background:url(../images/header/1920/pre-header/recherche.jpg) no-repeat left; width: 140px; padding-left: 35px; } header #headerDroite #topBar li.recherche a:hover, header #headerDroite #topBar li.recherche a.allume {background:url(../images/header/1920/pre-header/recherche-on.jpg) no-repeat left;} header #headerDroite #topBar li.recherche div {padding-top:1px;} header #headerDroite #topBar li.actus a {background:url(../images/header/1920/pre-header/actus.jpg) no-repeat left; width: 127px; padding-left: 40px; } header #headerDroite #topBar li.actus a:hover, header #headerDroite #topBar li.actus a.allume {background:url(../images/header/1920/pre-header/actus-on.jpg) no-repeat left;} header #headerDroite #topBar li.actus div {padding-top:15px;} header #headerDroite #topBar li.contact a {background:url(../images/header/1920/pre-header/contact.jpg) no-repeat left; width: 87px; padding-left: 37px; } header #headerDroite #topBar li.contact a:hover, header #headerDroite #topBar li.contact a.allume {background:url(../images/header/1920/pre-header/contact-on.jpg) no-repeat left;} header #headerDroite #topBar li.contact div {padding-top:15px;} header #headerDroite #topBar li.tel { background:url(../images/header/1920/pre-header/telephone.png) top left no-repeat; margin-left: 10px;} header #headerDroite #topBar li.tel div { padding-top: 13px; padding-left: 25px; color:#23498c; font-weight:bold; font-size: 13px; } header #headerDroite #nav ul {width: 100%;} header #headerDroite #nav li {float: left; list-style:none; width: calc(100% / 6); height: 134px;} header #headerDroite #nav li a {display:block; height: 100%; color:#ffffff; text-decoration:none; font-weight: 700; font-size: 16px; line-height: 17px; text-transform:uppercase; text-shadow: 2px 2px 2px black;} header #headerDroite li.bt1 a {background:url(../images/header/1920/bt1.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt1 a:hover,header #headerDroite li.bt1 a.allume {background:url(../images/header/1920/bt1-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /**/ header #headerDroite li.bt2 a {background:url(../images/header/1920/bt2.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt2 a:hover,header #headerDroite li.bt2 a.allume {background:url(../images/header/1920/bt2-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /**/ header #headerDroite li.bt3 a {background:url(../images/header/1920/bt3.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt3 a:hover,header #headerDroite li.bt3 a.allume {background:url(../images/header/1920/bt3-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /**/ header #headerDroite li.bt4 a {background:url(../images/header/1920/bt4.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt4 a:hover,header #headerDroite li.bt4 a.allume {background:url(../images/header/1920/bt4-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /**/ header #headerDroite li.bt5 a {background:url(../images/header/1920/bt5.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt5 a:hover,header #headerDroite li.bt5 a.allume {background:url(../images/header/1920/bt5-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /**/ header #headerDroite li.bt6 a {background:url(../images/header/1920/bt6.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li.bt6 a:hover,header #headerDroite li.bt6 a.allume {background:url(../images/header/1920/bt6-on.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } header #headerDroite li .txt {padding: 12px; vertical-align:middle; padding-top: 40px; padding-bottom:0; padding-right: 0;} .langue-en header #headerDroite li.bt3 .txt {padding-top:48px;} header #headerDroite li.bt4 .txt {padding-top:48px;} header #headerDroite li.bt5 .txt {/*padding-top:32px;*/padding-top:40px;} header #headerDroite li .txt span {display: block;} /*header .droite {float: left; background-color:#DB5F61; width: calc(100% - 690px);} header .droite ul {width: 100%;} header .droite li {float: left; list-style:none; width: calc(225px + ((100% - 1230px) / 7)); } header .droite li.vide {width: inherit;}*/ /******* 1200 < r�so < 1920px : 6 boutons de 124px soit 744 px quand on est � r�so de 1200 ************/ @media only screen and (max-width: 1940px) { header {height: 148px; /*background-color:#7999c0;*/} header #headerGauche {width: 426px; background:url(../images/header/1240/fond2.jpg) top left no-repeat;} header #headerGauche a {width: 164px; /*background:url(../images/header/1240/logo.jpg); */} header #headerGaucheFond {float: left; width: 30px; display:block; height: 148px;} header #headerCentre {width: calc((100% - 1200px) / 7); background:url(../images/header/1240/fond-ligne.jpg) repeat-x; } header #headerDroite {width: calc(744px + ((100% - 1200px) / 7) * 6);} header #headerDroite #topBar {height: 40px;} header #headerDroite #topBar li {float:left; list-style:none; height: 28px; margin-top: 5px;} header #headerDroite #topBar li a {font-size: 11px;} header #headerDroite #topBar li.drapFr {margin-left: 0;} header #headerDroite #topBar li.drapFr a {background:url(../images/header/1240/pre-header/drap-fr-on.jpg) no-repeat left; width: 31px;} header #headerDroite #topBar li.drapFr a:hover, header #headerDroite #topBar li.drapFr a.allume {background:url(../images/header/1240/pre-header/drap-fr-on.jpg) no-repeat left;} header #headerDroite #topBar li.drapEn {margin-left:7px; } header #headerDroite #topBar li.drapEn a {background:url(../images/header/1240/pre-header/drap-en-on.jpg) no-repeat left; width: 31px;} header #headerDroite #topBar li.drapEn a:hover,header #headerDroite #topBar li.drapEn a.allume {background:url(../images/header/1240/pre-header/drap-en-on.jpg) no-repeat left; } header #headerDroite #topBar li.accueil {margin-left:36px;} header #headerDroite #topBar li.accueil a {background:url(../images/header/1240/pre-header/accueil.png) no-repeat left; width: 80px; padding-left: 23px; } header #headerDroite #topBar li.accueil a:hover, header #headerDroite #topBar li.accueil a.allume {background:url(../images/header/1240/pre-header/accueil-on.png) no-repeat left; } header #headerDroite #topBar li.accueil div {padding-top:13px;} header #headerDroite #topBar li.recherche a {background:url(../images/header/1240/pre-header/recherche.png) no-repeat left; width: 125px; padding-left: 25px; } header #headerDroite #topBar li.recherche a:hover, header #headerDroite #topBar li.recherche a.allume {background:url(../images/header/1240/pre-header/recherche-on.png) no-repeat left;} header #headerDroite #topBar li.recherche div {padding-top:-1px;} header #headerDroite #topBar li.actus a {background:url(../images/header/1240/pre-header/actus.png) no-repeat left; width: 112px; padding-left: 28px; } header #headerDroite #topBar li.actus a:hover, header #headerDroite #topBar li.actus a.allume {background:url(../images/header/1240/pre-header/actus-on.png) no-repeat left;} header #headerDroite #topBar li.actus div {padding-top:13px;} header #headerDroite #topBar li.contact a {background:url(../images/header/1240/pre-header/contact.png) no-repeat left; width: 72px; padding-left: 26px; } header #headerDroite #topBar li.contact a:hover, header #headerDroite #topBar li.contact a.allume {background:url(../images/header/1240/pre-header/contact-on.png) no-repeat left;} header #headerDroite #topBar li.contact div {padding-top:13px;} header #headerDroite #topBar li.tel { background:url(../images/header/1240/pre-header/telephone2.png) top left no-repeat; margin-left: 0px;} header #headerDroite #topBar li.tel div { font-size: 11px; padding-top: 11px;} header #headerDroite #nav li {height: 93px;} header #headerDroite #nav li a {font-size: 14px; line-height: 15px; } header #headerDroite li .txt {padding: 9px; padding-top: 23px; font-weight: 500; text-shadow: 1px 1px 1px black;} header #headerDroite li.bt2 .txt .esp {letter-spacing:-0.5px;} .langue-en header #headerDroite li.bt3 .txt {padding-top:30px;} header #headerDroite li.bt4 .txt {padding-top:30px;} header #headerDroite li.bt5 .txt {/*padding-top:16px;*/padding-top:23px;} } /******* 1024 < r�so < 1200px : 6 boutons de 106px soit 636 px quand on est � r�so de 1024 ************/ /** modif faite ici **/ @media only screen and (max-width: 1220px) { header {height: 126px; /*background-color:#85a3c5;*/} header #headerGauche {width: 328px; background:url(../images/header/1024/fond2.jpg) top left no-repeat;} header #headerGauche a {width: 140px; /*background:url(../images/header/1024/logo.jpg);*/ } header #headerGaucheFond {display:none;} header #headerCentre {width: calc((100% - 1024px) / 7); background: none;} header #headerDroite {float: right; width: calc(690px + ((100% - 1024px) / 7) * 6);} header #headerDroite #topBar {height: 34px;} header #headerDroite #topBar li {height: 22px; margin-top: 5px;} header #headerDroite #topBar li a {font-size: 10px; font-weight: 700; line-height: 12px;} header #headerDroite #topBar li.drapFr {margin-left:0px; } header #headerDroite #topBar li.drapFr a {background:url(../images/header/1024/pre-header/drap-fr-on.jpg) no-repeat left; width: 31px;} header #headerDroite #topBar li.drapFr a:hover, header #headerDroite #topBar li.drapFr a.allume {background:url(../images/header/1024/pre-header/drap-fr-on.jpg) no-repeat left;} header #headerDroite #topBar li.drapEn {margin-left:0px; } header #headerDroite #topBar li.drapEn a {background:url(../images/header/1024/pre-header/drap-en-on.jpg) no-repeat left; width: 31px;} header #headerDroite #topBar li.drapEn a:hover, header #headerDroite #topBar li.drapEn a.allume {background:url(../images/header/1024/pre-header/drap-en-on.jpg) no-repeat left;} header #headerDroite #topBar li.accueil {margin-left:26px; } header #headerDroite #topBar li.accueil a {background:url(../images/header/1024/pre-header/accueil.png) no-repeat left; width: 71px; padding-left: 20px; } header #headerDroite #topBar li.accueil a:hover, header #headerDroite #topBar li.accueil a.allume {background:url(../images/header/1024/pre-header/accueil-on.png) no-repeat left; } header #headerDroite #topBar li.accueil div {padding-top:11px;} header #headerDroite #topBar li.recherche a {background:url(../images/header/1024/pre-header/recherche.png) no-repeat left; width: 107px; padding-left: 23px; } header #headerDroite #topBar li.recherche a:hover,header #headerDroite #topBar li.recherche a.allume {background:url(../images/header/1024/pre-header/recherche-on.png) no-repeat left; } header #headerDroite #topBar li.recherche div {padding-top:0px;} header #headerDroite #topBar li.actus a {background:url(../images/header/1024/pre-header/actus.png) no-repeat left; width: 88px; padding-left: 24px; } header #headerDroite #topBar li.actus a:hover,header #headerDroite #topBar li.actus a.allume {background:url(../images/header/1024/pre-header/actus-on.png) no-repeat left; } header #headerDroite #topBar li.actus div {padding-top:11px;} header #headerDroite #topBar li.contact a {background:url(../images/header/1024/pre-header/contact.png) no-repeat left; width: 62px; padding-left: 25px; } header #headerDroite #topBar li.contact a:hover,header #headerDroite #topBar li.contact a.allume {background:url(../images/header/1024/pre-header/contact-on.png) no-repeat left; } header #headerDroite #topBar li.contact div {padding-top:11px;} header #headerDroite #topBar li.tel { background:url(../images/header/1024/pre-header/telephone2.png) top left no-repeat; margin-left: 0px;} header #headerDroite #topBar li.tel div { font-size: 11px; padding-top: 10px; padding-left: 17px;} header #headerDroite #nav li {height: 81px;} header #headerDroite #nav li a {font-size: 12px; line-height: 14px; } header #headerDroite li .txt {padding: 5px; padding-top: 19px;} header #headerDroite li.bt2 .txt .esp {letter-spacing: inherit;} .langue-en header #headerDroite li.bt3 .txt {padding-top:26px;} header #headerDroite li.bt4 .txt {padding-top:26px;} header #headerDroite li.bt5 .txt {padding-top:12px;} } /******* 800 < r�so < 1024px : 6 boutons de 106px soit 636 px quand on est � r�so de 800 ************/ @media only screen and (max-width:1023px) { header {height: 122px;} header #headerGauche {width: 150px; background:url(../images/header/800/fond2.jpg) top left no-repeat;} header #headerGauche a {width: 150px; /*background:url(../images/header/800/logo.jpg);*/ } header #headerCentre {display: none;} header #headerDroite {width: calc(100% - 150px);} header #headerDroite #topBar {height: 34px;} header #headerDroite #nav li {height: 83px;} header #headerDroite #nav li a {font-size: 12px; line-height: 14px; } header #headerDroite #topBar li.tel {margin-left: 10px; font-size: 12px; text-align:center; font-weight:700; color:#58585a; display:block; line-height: 12px; } header #headerDroite li .txt {padding: 7px; padding-top: 20px;} .langue-en header #headerDroite li.bt3 .txt {padding-top:27px;} header #headerDroite li.bt4 .txt {padding-top:27px;} header #headerDroite li.bt5 .txt {padding-top:13px;} } /******* r�so < 800px ************/ @media only screen and (max-width: 800px) { header {display: none;} #headerMobile {display: block; background: url(../images/header/mobile/fond-ligne.jpg) top left repeat-x #ebebeb; height: auto;} #headerMobile #mobLogo {width:424px; height: 170px; /*margin: auto;*/} #headerMobile #mobLogo img {width: 100%;} #headerMobile #mobBar {height: 78px; background: #ffffff; width: 100%; overflow:auto;} } @media only screen and (max-width: 440px) { #headerMobile {background: none;} #headerMobile #mobLogo {width: 100%; height:auto;} } /****** SOUS MENU ***********/ #sousMenu {width: calc(1230px + ((100% - 1920px) / 7) * 6 - 24px); height: auto; position:absolute; right:0; z-index: 5; opacity: 0.9; background: #d2e5fb; color: #13406e; font-size: 13px;line-height: 18px; padding: 12px; display:none; margin-top: -20px;} #sousMenu .entreeMobile {display:none;} #sousMenu .ul1 {display: none;} #sousMenu .ul1 .li1 {margin-left: 54px; float: left; } #sousMenu .ul1.sousmenu6 .li1 {margin-right: 54px; float: right; } #sousMenu .ul1 .li1 .titre {font-weight:bold; padding-bottom: 1 px; border-bottom: solid 1px #13406e; margin-bottom :11px;} #sousMenu .ul1 .li1 .ul2 .li2 {margin-top: 4px; cursor: pointer;} #sousMenu a {color: #13406e; text-decoration:none;/*background:url(../images/header/puce.png) top left no-repeat; padding-left: 25px;*/ display: block;} #sousMenu a:hover {color: #13406e; text-decoration:underline;} #sousMenu .ul1 .li1 .titre.lien {/*background:url(../images/header/puce.png) top left no-repeat; padding-left: 25px; cursor: pointer;*/} @media only screen and (max-width: 1940px) { #sousMenu {width: calc(744px + ((100% - 1200px) / 7) * 6 - 24px); margin-top: -15px;} #sousMenu .ul1 .li1 {margin-left: 34px; } } @media only screen and (max-width: 1220px) { #sousMenu {width: calc(690px + ((100% - 1024px) / 7) * 6 - 24px); margin-top: -11px;} #sousMenu .ul1 .li1 {margin-left: 24px; } } @media only screen and (max-width:1023px) { #sousMenu {width: calc(100% - 150px - 24px); margin-top: -5px;} #sousMenu .ul1 .li1 {margin-left: 18px; } } @media only screen and (max-width: 800px) { #headerMobile #mobBar ul.un {padding-top: 12px;} #headerMobile #mobBar li {float: left;} #headerMobile #mobBar li.drap {margin-left: 29px; width: 33px; margin-right: 82px;} /*#headerMobile #mobBar li.drap img {margin-bottom: 6px;}*/ #headerMobile #mobBar li.drap a {display: block; width: 33px; height: 28px;} #headerMobile #mobBar li.drap a.un {background:url(../images/header/mobile/pre-header/drap-fr.png) top center no-repeat;} #headerMobile #mobBar li.drap a.un.allume,#headerMobile #mobBar li.drap a.un:hover {background:url(../images/header/mobile/pre-header/drap-fr-on.png) top center no-repeat;} #headerMobile #mobBar li.drap a.deux {background:url(../images/header/mobile/pre-header/drap-en.png) top center no-repeat;} #headerMobile #mobBar li.drap a.deux.allume,#headerMobile #mobBar li.drap a.deux:hover {background:url(../images/header/mobile/pre-header/drap-en-on.png) top center no-repeat;} #headerMobile #mobBar li.icone {width: calc((100% - 29px - 33px - 82px) / 5); text-align:center; text-transform:uppercase; color:#58585a; font-weight:500; font-size: 13px;} #headerMobile #mobBar li a {color:#58585a; text-decoration:none;} #headerMobile #mobBar li.icone a {padding-top: 41px;display: block;} #headerMobile #mobBar li a:hover, #headerMobile #mobBar li a.allume {color:#004691; text-decoration:none;} #headerMobile #mobBar li.menu a {background:url(../images/header/mobile/pre-header/menu.png) top center no-repeat; } #headerMobile #mobBar li.accueil a {background:url(../images/header/mobile/pre-header/accueil.png) top center no-repeat; } #headerMobile #mobBar li.accueil a:hover, #headerMobile #mobBar li.accueil a.allume {background:url(../images/header/mobile/pre-header/accueil-on.png) top center no-repeat; } #headerMobile #mobBar li.recherche a {background:url(../images/header/mobile/pre-header/recherche.png) top center no-repeat; } #headerMobile #mobBar li.recherche a:hover, #headerMobile #mobBar li.recherche a.allume {background:url(../images/header/mobile/pre-header/recherche-on.png) top center no-repeat; } #headerMobile #mobBar li.actus a {background:url(../images/header/mobile/pre-header/actus.png) top center no-repeat; } #headerMobile #mobBar li.actus a:hover, #headerMobile #mobBar li.actus a.allume {background:url(../images/header/mobile/pre-header/actus-on.png) top center no-repeat; } #headerMobile #mobBar li.contact a {background:url(../images/header/mobile/pre-header/contact.png) top center no-repeat; } #headerMobile #mobBar li.contact a:hover, #headerMobile #mobBar li.contact a.allume {background:url(../images/header/mobile/pre-header/contact-on.png) top center no-repeat; } #sousMenu {clear:both; width: 100%; height: auto; position:relative; right:inherit; opacity: 1; background: #0f4c8f; color: #13406e; font-size: 13px;line-height: 18px; overflow:auto; padding: 0;} #sousMenu .ul1 {padding-top: 10px; color: #ffffff; width: 100%; overflow:auto; background: #31659f;} #sousMenu .ul1 .li1 {margin-left: 10px; margin-right: 10px; margin-bottom: 12px;} #sousMenu .ul1.sousmenu6 .li1 {margin-right: 0; float: left; } #sousMenu .ul1 .li1 .titre {border-bottom: solid 1px #ededed; } #sousMenu a {color: #ffffff; text-decoration:none;} #sousMenu a:hover {color: #ffffff; text-decoration:underline;} #sousMenu .entreeMobile {clear: both; display:block; border-top: solid 1px #ffffff;} #sousMenu .entreeMobile a {display:block; font-weight: 500; text-align:center; text-decoration:none; padding: 5px; text-transform: uppercase; color:#ffffff; font-size: 14px; background:none;} } @media only screen and (max-width: 540px) { /*#headerMobile #mobBar li.drap {margin-left: 14px; width: 33px; margin-right: 15px;}*/ #headerMobile #mobBar {height: 108px;} #headerMobile #mobBar li.drap {margin:0 auto; float:inherit; width: 76px;} #headerMobile #mobBar li.drap a {display: inline-table;} #headerMobile #mobBar li.drap a.un {margin-right: 10px;} #headerMobile #mobBar li.icone {width: 20%;} #headerMobile #mobBar li.icone {font-size: 11px;} } /****** CONTENU ***********/ #contenu {height: 100%;} #content {background: #ffffff;height: calc(100% - 204px - 30px); width: 100%; overflow:auto;} @media only screen and (max-width: 3940px) { #content {height: calc(100% - 148px - 45px);} } @media only screen and (max-width: 1220px) { #content {height: calc(100% - 126px - 45px);} } @media only screen and (max-width:1023px) { #content {height: calc(100% - 122px - 45px);} } @media only screen and (max-width: 800px) { #content {height: auto; } #content.backstretch {overflow:hidden;} } /****** HOMEPAGE ***********/ #calqueHomeAvant {margin-left: 0px; width: 10%; height: 40%;} #calqueFerme {margin-left: 0px; width: 425px; height: 20px; text-align:right; z-index: 51;} #calqueFerme a {display: block; padding: 3px; height: 14px; background: #d9d9d9; color:#000000; text-decoration:none; font-weight:bold; text-align:center; margin-left: calc(100% - 20px);border-top-left-radius: 5px;border-top-right-radius: 5px;z-index: 51;} #calqueHome {margin-left: 0px; width: 425px; height: calc(60% - 20px); opacity: 0.9; background: #d2e5fb; color: #3e3e3e; font-size: 13px;line-height: 18px; } #calqueHome .contour {padding: 20px; padding-left: 60px; height: calc(100% - 40px);} #calqueHome h1 {text-align: center; font-size: 17px; font-family:'Roboto Slab','Roboto', sans-serif; font-weight:700; height: 20px;} #calqueHome .txt {border-top: solid 1px #8c8c8c; padding-top: 20px; height: calc(100% - 60px); overflow:auto;} #calqueHome .suite {text-align: center; text-transform:uppercase; color: #999999; display: block; width: 110px; margin: 0 auto; padding: 3px; border: solid 1px #999999; text-decoration:none; margin-top: 14px;} #calqueHome .suite:hover {color:#666666;} .rotate { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } @media only screen and (max-width: 1920px) { #calqueHomeAvant {height: 20%;} #calqueHome {height: calc(80% - 20px);} } @media only screen and (max-width: 1220px) { #calqueFerme {width:320px;} #calqueHome {width: 320px;font-size: 13px;line-height: 17px; } #calqueHome .contour {padding-left: 35px; } } @media only screen and (max-width: 1024px) { #calqueFerme {width: 270px; } #calqueHome {width: 270px;font-size: 12px;line-height: 16px; } } @media only screen and (max-width: 800px) { #calqueFerme {display: none;} #calqueHomeAvant {margin-left: 0px; width: 100%; height: 450px;} #calqueHome {margin-left: 0px; width: 100%; height: auto; opacity: 1; background: #ffffff; color: #3e3e3e; font-size: 13px;line-height: 19px; } } /****** REFERENCES ***********/ body.references #zoneLegende {width: 100%; height: 50px; background:#666666; position:absolute; top: 204px; opacity: 0.8; color:#ffffff;} body.references #zoneLegende.fermee {height: 35px;} body.references #zoneLegende ul {padding: 5px; padding-top: 8px;} body.references #zoneLegende li {float: left; padding-left: 35px; padding-top: 10px; padding-bottom: 10px; margin-right: 20px;} body.references #zoneLegende.fermee li {padding-top: 0px; } body.references #zoneLegende li.groupe0 {background:url(../images/markers/legende/marker.png) top left no-repeat; padding-left: 28px;} body.references #zoneLegende li.groupe1 {background:url(../images/markers/legende/m1.png) top left no-repeat; margin-right: 30px;} body.references #zoneLegende li.groupe2 {background:url(../images/markers/legende/m2.png) top left no-repeat;} body.references #zoneLegende li.groupe3 {background:url(../images/markers/legende/m3.png) top left no-repeat; } body.references #zoneLegende li.fermer {float:right;} body.references #zoneLegende li.ouvrir {display: none; padding-left:5px; } body.references #zoneLegende li a {color:#ffffff;} body.references #map {width: 100%; /*height: calc(100% - 50px);*/ height: 100%;} @media only screen and (max-width: 1920px) { body.references #zoneLegende {top: 148px;} } @media only screen and (max-width: 1220px) { body.references #zoneLegende {top: 126px;} } @media only screen and (max-width: 1024px) { body.references #zoneLegende {top: 120px; height: 90px;} } @media only screen and (max-width: 800px) { body.references #map {width: 100%; height: 420px;} body.references #zoneLegende {top: 248px;} } @media only screen and (max-width: 620px) { body.references #zoneLegende {height: 120px;} } @media only screen and (max-width: 540px) { body.references #zoneLegende {top: 276px;} } /****** INTERIEUR (COMMUN) ***********/ #interieur {width: 80%; margin: 0 auto; padding-top: 55px;} @media only screen and (max-width:1023px) { #interieur {width: calc(100% - 60px); margin: 0 auto; padding-top: 35px;} } #interieur .categorie {color:#0f4c8f; font-size: 19px; margin-bottom: 7px; font-family:'Roboto Slab','Roboto', sans-serif; font-weight: 700;} #interieur .titre {width: 100%; overflow: auto; border-bottom: solid 1px #3e3e3d; padding-bottom: 4px; margin-bottom: 30px;} #interieur .titre li {float:left;} #interieur .titre li.affiner, #interieur .titre li.liste, #interieur .titre li.retour {float:right; margin-left: 6px;} #interieur .titre h1 {color:#3e3e3d; text-transform: uppercase; float: left; margin-bottom: inherit; font-family:'Roboto Slab','Roboto'; font-size: 25px;} #interieur .titre li.affiner a {display: block; color:#ffffff; background: url(../images/images/icone-affiner.png) top right no-repeat #58585a; padding: 12px; padding-left: 23px; padding-right: 32px; text-decoration:none; font-size: 12px; border-radius: 4px; background-position: right 3px; } #interieur .titre li.retour a {display: block; color:#ffffff; background: #58585a; padding: 8px; padding-bottom: 9px; /*padding-left: 23px; padding-right: 32px; */text-decoration:none; font-size: 12px; border-radius: 4px; padding-left: 22px; padding-right: 22px; } #interieur .titre li.liste select {color:#ffffff; background:#58585a; padding: 12px; padding-bottom: 10px; font-size: 12px; width: 160px; border:none; border-radius: 4px;} #interieur .cms {width: 100%; overflow:auto;} #interieur .cms .photo.gauche {float: left; width: 25%; margin-right: 5%;} #interieur .cms .photo.gauche img {width: 100%;} #interieur .cms .photo.gauche .legende { margin-top: 6px; font-size: 12px; font-style: italic; text-align:center;} #interieur .cms .zone.droite {float: left; width: 70%;} #interieur .cms .zone.droite.pleine {float:none; width: 100%;} #interieur .cms .zone.droite .texte {margin-left: 20px; margin-right: 20px; font-size: 14px;line-height: 22px;} #interieur .cms .zone.droite .texte p {margin-bottom: 21px; } #interieur .cms .zone.droite .texte li {list-style:disc; margin-bottom: 7px; margin-left: 20px;} #interieur .cms .zone.droite .texte ul {margin-bottom: 17px;} #interieur .cms .zone.droite .texte .listeArtistes {width: 100%; overflow:auto;} #interieur .cms .zone.droite .texte .listeArtistes > li {float: left; /*width: 23%;*/ width: 31%; list-style:none; margin:0; padding:0; margin-right: 2%; } #interieur .cms .zone.droite .texte .listeArtistes > li.ligne5 {/*clear: both;*/} #interieur .cms .zone.droite .texte .listeArtistes > li .lettrine {display: block; width: 25px; padding: 6px; background:#0f4c8f; color: #ffffff; text-align:center; font-size: 16px;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste {margin-top: 10px; margin-bottom: 22px;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste li {list-style:none; margin-bottom:3px;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste li .prenom {display:inline-block; width: calc(50% - 5px); margin-right: 5px; text-align: right;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste li .nom {display:inline-block; width: calc(50% - 5px); margin-left: 5px; font-weight: bold;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste a {text-decoration:none; color:#0f4c8f;} #interieur .cms .zone.droite .texte .listeArtistes ul.liste a:hover {text-decoration:underline; color:#0f4c8f;} #interieur .cms #zoneContact {margin-top: 30px; float: left; width: 45%; margin-right: 5%;margin-bottom: 30px;} #interieur .cms #zoneContact label {color:#0f4c8f; font-weight:bold;} #interieur .cms #zoneContact .ch {margin-bottom: 16px;} #interieur .cms #zoneContact input.champ {padding:4px; width: 90%;} #interieur .cms #zoneContact textarea.champ {padding:4px; width: 90%;} #interieur .cms #zoneMap {margin-top: 30px; float: left; width: 50%; margin-bottom: 30px;} .actualites #interieur .liste {margin-top: 40px;} .actualites #interieur .liste .item { float: left; width: 45%; line-height: 18px; margin-bottom: 30px; overflow:auto; min-height: 260px;} .actualites #interieur .liste .item.deux {margin-left: 10%; } .actualites #interieur .liste .item .pho {float: left; width: 30%; margin-right:20px;} .actualites #interieur .liste .item .texte.reduit {float: left; width: calc(70% - 20px);} .actualites #interieur .liste .item .texte {float: none; width: 100%;} .actualites #interieur .liste .item h2 {font-size: 15px;} .actualites #interieur .liste .item h2 a {color:#0f468f; text-decoration:none;font-size: 15px;} .actualites #interieur .liste .item h2 a:hover {color:#0f468f; text-decoration:underline;} .actualites #interieur .liste a.suite {display: block; margin-top: 11px; width: 88px; padding: 3px; color:#ffffff; text-decoration:none; font-size: 12px; border-radius: 4px; background:#58585a; text-align:center;} .actualites #interieur .liste .item a.lire {color:#0f468f; } .recherche #interieur form {margin-bottom: 25px;} .recherche #interieur .ligne {width: 100%; overflow: auto; margin-top: 18px;} .recherche #interieur .ligne .intit {float: left; width: 150px; padding-top: 4px;} .recherche #interieur .ligne .zoneChoix {float: left; width: calc(100% - 150px);} .recherche #interieur .ligne select {color:#ffffff; background:#58585a; padding: 5px; font-size: 12px; width: 240px; border:none; border-radius: 4px;} .recherche #interieur .ligne input[type=text] {color:#ffffff; background:#58585a; padding: 5px; font-size: 12px; width: 230px; border:none; border-radius: 4px;} .recherche #interieur .ligne .kw li {float: left; width: 33.33%;} .recherche #interieur .ligne input[type=submit],.recherche #interieur .ligne input[type=button] {color:#ffffff; background:#58585a; padding: 5px; font-size: 16px; width: 140px; border:none; border-radius: 4px;} .recherche #interieur #patience {text-align:center; margin-top: 100px; font-size: 17px; display:none;} @media only screen and (max-width: 1920px) { #interieur .categorie {font-size: 14px;} #interieur .titre h1 {font-size: 19px;} #interieur .titre li.affiner a {background: url(../images/images/icone-affiner.png) top right no-repeat #58585a; padding: 10px; padding-left: 15px; padding-right: 31px; font-size: 11px; } #interieur .titre li.liste select {padding: 10px; padding-bottom: 9px; font-size: 11px; width: 130px; } } @media only screen and (max-width: 1220px) { .recherche #interieur .ligne select {width: 210px; } .recherche #interieur .ligne input[type=text] {width: 200px; } } @media only screen and (max-width: 1024px) { #interieur .cms .photo.gauche {display:none;} #interieur .cms .zone.droite {float:none; width: 100%;} #interieur .cms .zone.droite .texte {margin:0;} #interieur .cms .zone.droite .texte .listeArtistes > li {/*width: 31%;*/width: 31%; } #interieur .cms .zone.droite .texte .listeArtistes > li.ligne5 {/*clear: none;*/} #interieur .cms .zone.droite .texte .listeArtistes > li.ligne4 {/*clear: both;*/} .recherche #interieur .ligne select {width: 200px; } .recherche #interieur .ligne input[type=text] {width: 190px; } } @media only screen and (max-width: 800px) { #interieur li.liTitre {width: 100%;} #interieur .titre {border: none;} #interieur .titre h1 {float:none; margin-bottom: 10px; border-bottom: solid 1px #3e3e3d; padding-bottom: 4px;} #interieur .titre li.affiner, #interieur .titre li.liste {float:left; margin-left: 0px; margin-right:6px;} .actualites #interieur .liste .item { float: none; width: 100%; lmargin-bottom: 30px;} .actualites #interieur .liste .item.deux {margin-left: 0%; } #interieur .cms .zone.droite .texte .listeArtistes > li {float: left; width: 31%; list-style:none; } #interieur .cms .zone.droite .texte .listeArtistes > li.ligne4 {/*clear: none;*/} #interieur .cms .zone.droite .texte .listeArtistes > li.ligne3 {/*clear: both;*/} #interieur .cms #zoneContact {float: none; width: 100%; margin-right: 0%;} #interieur .cms #zoneMap {margin-top: 20px; float: none; width: 100%; margin-bottom: 30px;} .recherche #interieur .ligne select {width: calc(100% - 10px); display: block; margin-bottom: 7px; } .recherche #interieur .ligne input[type=text] {width: calc(100% - 20px); display: block; margin-bottom: 7px; } } @media only screen and (max-width: 600px) { #interieur .cms .zone.droite .texte .listeArtistes > li {float: none; width: 98%; list-style:none; } } /****** PROJET ***********/ #interieur.projet {padding-top: 0px; height:100%; width: 100%;} .detailProjet {width: 100%;height:100%;} .detailProjet .colG {width: 300px; /*height: 100%;*/ background:#c8d5e5; float: left; margin-right: 80px; font-size: 12px; } .detailProjet .colD {width: calc(100% - 380px); float: left; /*height: 100%;*/ overflow:auto; } .detailProjet .colG #map {width: 100%; height: 200px;} .detailProjet .colG #infosCommunes {margin-top: 10px; margin-left: 35px; padding: 12px; height: calc(100% - 200px - 34px); overflow:auto;} .detailProjet .colG p {margin-bottom: 3px;} .detailProjet .colG .artiste {margin-top: 15px;} .detailProjet .colG .elements {margin-top: 15px;} .detailProjet .colG a {color:#000000; text-decoration:underline;} .detailProjet .colG a:hover {color:#000000; text-decoration:underline;} .detailProjet .colG .description {margin-top: 15px;} .detailProjet .colG .titreCriteres {font-weight:bold; color:#0f4c8f; } .detailProjet .colG h1.titreCriteres {font-size: 16px; line-height: 15px; margin-bottom: 7px;} .detailProjet .colG h1.titreCriteres a, .detailProjet .colG h1.titreCriteres a:hover {color:#0f4c8f; text-decoration: underline;} .detailProjet .blocToutVoir {clear: both; text-align: center;} .detailProjet a.toutVoir {display:inline-block; padding: 7px; padding-left: 45px; margin: 0 auto; padding-right: 45px; text-decoration:none; margin-bottom:25px; font-size: 15px; background-color:#0f4c8f; color:#ffffff; border-radius: 11px; text-align:center; line-height: 18px; margin-right: 25px;} .detailProjet a.toutVoir:hover {background-color:#0b3e76;} .detailProjet .listeVignettes {width: 100%; overflow: auto; margin-top: 40px;} .detailProjet .listeVignettes .detailArtiste {width: 100%; overflow: auto; margin-bottom: 50px; color:#0f4c8f;} .detailProjet .listeVignettes .titreProjet {width: 100%; overflow: auto; margin-bottom: 20px; font-weight: bold; color:#0f4c8f; font-size: 15px;} .detailProjet .listeVignettes .detailArtiste .qui {font-size:15px;} .detailProjet .listeVignettes .detailArtiste .quoi {font-size:13px;} .detailProjet .listeVignettes .detailArtiste .url {font-size:12px;} .detailProjet .listeVignettes .detailArtiste .url a {font-style: italic; color:#0f4c8f; } .detailProjet .listeVignettes .choixAffichage {margin-bottom: 31px; font-size: 13px; width:calc(100% - 10px - 12px); overflow:auto; background: #f2f2f2; padding: 5px;} .detailProjet .listeVignettes .choixAffichage li {float: left; margin-right: 45px;} .detailProjet .listeVignettes .choixAffichage li.retour {width: 90px;} .detailProjet .listeVignettes .choixAffichage li.retour a { background: url(../images/media/bt-retour.png) top left no-repeat; padding-left: 28px; } .detailProjet .listeVignettes .choixAffichage a {color: #666666; text-decoration:none; display: block;padding-top:2px;} .detailProjet .listeVignettes .choixAffichage a:hover, .detailProjet .listeVignettes .choixAffichage a.allume {color: #0f4c8f; text-decoration:none; font-weight:bold;} .detailProjet .listeVignettes .affichage.invisible {display:none;} .detailProjet .listeVignettes .infosPagination {clear: both; padding:4px; background:#f2f2f2; width: calc(100% - 20px);margin-bottom: 20px; font-size: 12px; height: 20px;} .detailProjet .listeVignettes .infosPagination li {float: left;color:#3e3e3e; } .detailProjet .listeVignettes .infosPagination li a {color:#3e3e3e; text-decoration: none; font-size: 13px; height: 18px; display: block;} .detailProjet .listeVignettes .infosPagination li.chiffres1 {width: 145px; padding-left: 5px; padding-top:4px;} .detailProjet .listeVignettes .infosPagination li.prec {width: calc(100% - 150px - 90px - 30px); text-align:right; } .detailProjet .listeVignettes .infosPagination li.prec a { background: url(../images/media/bt-prec.png) top right no-repeat; /*padding-left: 28px;*/ padding-top:2px;} .detailProjet .listeVignettes .infosPagination li.prec a.no {background: url(../images/media/bt-prec-no.png) top right no-repeat;} .detailProjet .listeVignettes .infosPagination li.chiffres2 {width: 90px; text-align:center; font-size: 12px; padding-top: 3px;} .detailProjet .listeVignettes .infosPagination li.suiv {width: 30px; } .detailProjet .listeVignettes .infosPagination li.suiv a { background: url(../images/media/bt-suiv.png) top left no-repeat; /*padding-left: 28px;*/ padding-top:2px;} .detailProjet .listeVignettes .infosPagination li.suiv a.no {background: url(../images/media/bt-suiv-no.png) top left no-repeat;} /*** issu de http://www.mademyday.de/css-height-equals-width-with-pure-css.html **/ .detailProjet .listeVignettes .box { background:#e0e0e0; margin-right: 12px; margin-bottom: 62px; width: calc((100%/6) - 12px); float: left; display: inline-block;position: relative;} .detailProjet .listeVignettes .box:before {content: "";display: block; padding-top: 100%; /* initial ratio of 1:1*/} .detailProjet .listeVignettes .box .content{ /* Positioning */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; vertical-align: middle; text-align:center; display: table-cell; } .detailProjet .listeVignettes .box .content img.centrale {max-height: 100%; /*position: relative;*/position: absolute; top: 50%; /* pouss� de la moiti� de hauteur du r�f�rent */ left: 50%; transform: translateY(-50%) translateX(-50%); /* tir� de la moiti� de sa propre hauteur */} .detailProjet .listeVignettes #affichage2 .box .content img.centrale {max-height: calc(100% - 96px); top: calc(50% - 29px); } .detailProjet .listeVignettes #affichage2 .box .content a {color: #0f4c8f; text-decoration:none; font-weight:bold; display:block; /*margin-top: 5px; margin-bottom: 3px;*/} .detailProjet .listeVignettes #affichage2 .box .content .legende {width:100%; background:#ffffff; height: 58px; vertical-align: middle; position: absolute; bottom: 0px;} .detailProjet .listeVignettes #affichage2 .box .content .legende a {padding-top: 5px; padding-bottom: 3px;} .detailProjet .listeVignettes .typeRea {clear: both;} .detailProjet .listeVignettes .typeRea.invisible {display: none;} .detailProjet .listeVignettes .titreTypeRea {display: block; font-weight: bold; color:#0f4c8f; margin-top:50px; margin-bottom: 10px; text-transform: uppercase; font-size: 15px; padding-bottom: 3px; border-bottom: solid 1px #0f4c8f;} .detailProjet .listeVignettes .titreTypeRea:first {margin-top:0;} .detailProjet .listeVignettes .box .content .block { filter: alpha(opacity=30); /* IE */ -moz-opacity: 0.3; /* Mozilla */ opacity: 0.3; /* CSS3 */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .detailProjet .listeVignettes .box .content:hover .block { filter: alpha(opacity=60); /* IE */ -moz-opacity: 0.6; /* Mozilla */ opacity: 0.6; } .detailProjet .listeVignettes .box .content .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-width: 801px) { .detailProjet .colG,.detailProjet .colD {height: 100%;} } @media only screen and (max-width: 1920px) { .detailProjet .listeVignettes .box {width: calc((100%/5) - 12px);} } @media only screen and (max-width: 1700px) { .detailProjet .listeVignettes .box {width: calc((100%/4) - 12px);} } @media only screen and (max-width: 1450px) { .detailProjet .colG {width: 260px; margin-right: 50px;} .detailProjet .colD {width: calc(100% - 310px);} .detailProjet .listeVignettes .box {width: calc((100%/3) - 12px);} } @media only screen and (max-width: 1220px) { .detailProjet .colG {width: 240px; margin-right: 50px;} .detailProjet .colD {width: calc(100% - 290px);} .detailProjet .listeVignettes .box {width: calc((100%/3) - 12px);} } @media only screen and (max-width: 1024px) { .detailProjet .colG {width: 220px; margin-right: 40px;} .detailProjet .colD {width: calc(100% - 260px);} .detailProjet .colG #infosCommunes {margin-left: 25px; } .detailProjet .listeVignettes .box {width: calc((100%/2) - 12px);} } @media only screen and (max-width: 800px) { .detailProjet .colG {width: 100%; float: none; margin-right: 0px; } .detailProjet .colD {width: 100%; float: none; margin-top: 25px; } } @media only screen and (max-width: 450px) { .detailProjet .listeVignettes .box {width: 100%; margin-right: 0;} } /****** MEDIA ***********/ .detailProjet .media1 {margin-top: 35px; margin-bottom: 25px; height: calc(100% - 60px); width: 100%; position: relative; overflow:hidden;} .detailProjet #visionneur {width: 85% ; height: 100%; /*background:#82C78A;*/} .detailProjet #visionneur #commandes {height: 30px;} .detailProjet #visionneur #commandes li {float: left; } .detailProjet #visionneur #commandes li a {color:#3e3e3e; text-decoration: none; font-size: 13px; height: 18px; display: block;} .detailProjet #visionneur #commandes li.retour {width: 90px;} .detailProjet #visionneur #commandes li.retour a { background: url(../images/media/bt-retour.png) top left no-repeat; padding-left: 28px; padding-top:2px;} .detailProjet #visionneur #commandes li.prec {width: calc(50% - 90px - 30px); text-align:right; } .detailProjet #visionneur #commandes li.prec a { background: url(../images/media/bt-prec.png) top right no-repeat; /*padding-left: 28px;*/ padding-top:2px;} .detailProjet #visionneur #commandes li.prec a.no {background: url(../images/media/bt-prec-no.png) top right no-repeat;} .detailProjet #visionneur #commandes li.compteur {width: 60px; text-align:center; font-size: 12px; padding-top: 3px;} .detailProjet #visionneur #commandes li.suiv {width: calc(50% - 110px - 30px); } .detailProjet #visionneur #commandes li.suiv a { background: url(../images/media/bt-suiv.png) top left no-repeat; /*padding-left: 28px;*/ padding-top:2px;} .detailProjet #visionneur #commandes li.suiv a.no {background: url(../images/media/bt-suiv-no.png) top left no-repeat;} .detailProjet #visionneur #commandes li.fullscreen {width: 110px; text-align:right;} .detailProjet #visionneur #commandes li.fullscreen a { background: url(../images/media/bt-full.png) top right no-repeat; padding-right: 26px; padding-top:2px;} .detailProjet #visionneur #modifSearch {padding: 4px; text-align: center; padding-bottom: 10px;} .detailProjet #visionneur #modifSearch a {color:#3e3e3e; text-decoration: none; font-size: 13px; height: 18px; display: block;} .detailProjet #visionneur #modifSearch a:hover {text-decoration: underline;} .detailProjet #visionneur #photo {height: calc(100% - 30px);} .detailProjet #visionneur #photo img {max-height: 100%; display: block; margin: 0 auto;} .detailProjet #calque1 {width: 450px; position: absolute; z-index:5; top: 0; height: 100%; right:0; margin-right:-480px;} .detailProjet #calque1 .etiquette {width:30px; float: left;height: 100%; } .detailProjet #calque1 .etiquette .c0 {height: calc(50% - 70px);} .detailProjet #calque1 .etiquette .c .avant {height: 90px;} /*.detailProjet #calque1.en .etiquette .c .avant {height: 5px;}*/ .detailProjet #calque1 .etiquette .c {height: 140px; width:100%; background:#031a33; border-top-left-radius: 10px;border-bottom-left-radius: 10px; opacity:0.9;} /*.detailProjet #calque1.en .etiquette .c {height: 80px;}*/ .detailProjet #calque1 .etiquette a {display: block; text-align: center; padding: 5px; color:#ffffff; text-decoration:none;} .detailProjet #calque1 .suite {width: calc(100% - 30px); float: left; background:#031a33;opacity: 0.9;height: 100%; color:#ffffff;font-family:'Roboto Slab','Roboto', sans-serif;} .detailProjet #calque1 .suite .infos {padding:50px; padding-right: 25px; padding-bottom: 25px;} .detailProjet #calque1 .suite .infos a {color:#ffffff;} .detailProjet #calque1 .suite .infos .titreP {font-weight:bold;} .detailProjet #calque1 .suite .infos .pays {font-style: italic;} .detailProjet #calque1 .suite .infos .artiste {margin-top: 24px; font-weight:bold;} .detailProjet #calque1 .suite .infos .description {margin-top: 24px;} @media only screen and (max-width: 1220px) { .detailProjet #calque1 {width: 350px;} } @media only screen and (max-width: 800px) { .detailProjet .media1 {height: 480px; } } /****** CARROUSSEL ***********/ #thumbnail-slider { margin:0; /*center-aligned*/ width: calc(100% - 80px) ;/*width:400px;*/ max-width: inherit; padding:20px; background-color: transparent; box-shadow: none; box-sizing: inherit; } #thumbnail-slider ul li,#thumbnail-slider ul li.active {border:none;} #thumbnail-slider ul li.premiere {display:none;} @media only screen and (max-width: 1024px) { #thumbnail-slider { margin:0 auto; /*center-aligned*/ width: calc(100% - 80px) ;/*width:400px;*/ } #thumbnail-slider-prev {left:-20px;} #thumbnail-slider-next {right:-20px;} #thumbnail-slider ul li.premiere {display:block;} } /****** FOOTER ******/ footer { background:#23498c; color: #bfcddc; font-size: 12px; text-align: center; padding: 5px; height: 20px; padding-bottom: 20px;} footer .liens {padding-top: 5px; /*padding-bottom: 5px;*/} footer a { color: #bfcddc; text-decoration: none;} footer a.maj {text-transform:uppercase;} footer a:hover {color:#ffffff;} @media only screen and (max-width: 800px) { footer { height: auto;} }