/* Theme Name: OPALS Theme URI: http://devlart.fr Description: Thème développé par Louis Frayard Version: 1.0 Author: Devlart */ @font-face {font-family: 'Futura Condensed'; src: url('fonts/futura/futura_2-webfont.eot'); src: url('fonts/futura/futura_2-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/futura/futura_2-webfont.woff') format('woff'),url('fonts/futura/futura_2-webfont.ttf') format('truetype'),url('fonts/futura/futura_2-webfont.svg#FuturaCondensedMedium') format('svg'); font-weight: normal;font-style: normal;} @font-face { font-family: 'futurabold'; src: url('fonts/futuraExtraBold/FuturaCondensedExtraBoldNormal.eot'); src: url('fonts/futuraExtraBold/FuturaCondensedExtraBoldNormal.eot?#iefix') format('embedded-opentype'), url('fonts/futuraExtraBold/FuturaCondensedExtraBoldNormal.woff') format('woff'), url('fonts/futuraExtraBold/FuturaCondensedExtraBoldNormal.ttf') format('truetype'), url('fonts/futuraExtraBold/FuturaCondensedExtraBoldNormal.svg#futurabold') format('svg'); font-weight: normal; font-style: normal; } * {margin:0;padding:0;text-align:left;} html, body {height:100%; } body {font-family:'Georgia',arial; color:#181818; background: #FFF; font-size:9.5pt; min-width: 1014px; } /* Header */ #header{min-width: 1078px; width:100%; max-width: 1412px; width:100%; height: 614px; margin: 0 auto; position: relative; z-index: 99; overflow: hidden; padding-bottom: 46px; background: url(img/header/ombre.png) no-repeat center bottom } /* Slide */ #header .slide{position: absolute; width: 1412px; height: 614px; top:0; left:0; overflow-x: hidden;} #header .slide .element .infos{width: 928px; height: 73px; background: #FFF; padding: 16px; position: absolute; bottom:28px; left: 50%; margin-left: -480px;} #header .slide .element .infos h1{font-family: 'futurabold'; font-size: 29px; color:#1a485e; } #header .slide .element .infos p{width: 625px; font-family: verdana, arial, sans-serif; font-size: 12px; line-height:16px;margin-top: 5px} #header .slide .element .infos a{display: block; font-family: 'Futura Condensed'; text-transform: uppercase; font-size: 29px; color:#FFF; background: #216484; width: 160px; text-align: center; padding: 14px 0; border-radius: 4px; border: 1px solid #1a485e; box-shadow: inset 0px 1px 0px #8eb0c0; position: absolute; top:50%; margin-top: -29px; right:30px;} #header .slide .element .infos a:hover{background: #2d89b4} /* Headersingle */ #headersingle{min-width: 1078px; width:100%; max-width: 1412px; width:100%; height: 314px; margin: 0 auto; position: relative; z-index: 99; overflow: hidden; padding-bottom: 46px; background: url(img/header/ombre.png) no-repeat center bottom } /* Slidesingle */ #headersingle .slidesingle{position: absolute; width: 1412px; height: 314px; top:0; left:0; overflow-x: hidden;} #headersingle .slidesingle .element .infos{width: 928px; height: 73px; background: #FFF; padding: 16px; position: absolute; bottom:28px; left: 50%; margin-left: -480px;} #headersingle .slidesingle .element .infos h1{font-family: 'futurabold'; font-size: 29px; color:#1a485e; } #headersingle .slidesingle .element .infos p{width: 625px; font-family: 'Futura Condensed'; font-size: 16px; margin-top: 5px} #headersingle .slidesingle .element .infos a{display: block; font-family: 'Futura Condensed'; text-transform: uppercase; font-size: 29px; color:#FFF; background: #216484; width: 160px; text-align: center; padding: 14px 0; border-radius: 4px; border: 1px solid #1a485e; box-shadow: inset 0px 1px 0px #8eb0c0; position: absolute; top:50%; margin-top: -29px; right:30px;} #headersingle .slidesingle .element .infos a:hover{background: #2d89b4} /* Content */ #header .content{width: 1014px; height: 491px; position: absolute; top:0; left:50%; margin-left: -507px; z-index: 99;} #header .content .arrow{display: block; width: 40px; height: 40px; background:url(img/header/arrow.png) top right; position: absolute; top:389px; z-index: 999; } #header .content .arrow.right{right:-22px;} #header .content .arrow.left{left:-22px; background-position: bottom left} /* Content headersingle */ #headersingle .content{width: 1014px; height: 491px; position: absolute; top:0; left:50%; margin-left: -507px; z-index: 99;} #headersingle .content .arrow{display: block; width: 40px; height: 40px; background:url(img/header/arrow.png) top right; position: absolute; top:389px; z-index: 999; } #headersingle .content .arrow.right{right:-22px;} #headersingle .content .arrow.left{left:-22px; background-position: bottom left} /* Social */ #header .content .social{position: absolute; top:30px; font-family: 'futurabold'; color:#66CCFF; font-size: 24px; text-transform: uppercase; left: 14px; } #header .content .social a{display: block; width: 24px; height: 24px; background: url(img/header/social.png); float: right; margin-left: 9px; margin-top: -3px} #header .content .social a.fb{background-position: top left;} #header .content .social a.fb:hover{background-position:bottom left;} #header .content .social a.twitter{background-position: center top;} #header .content .social a.twitter:hover{background-position:center bottom;} #header .content .social a.mail{background-position: right top;} #header .content .social a.mail:hover{background-position:right bottom;} /* Socialsingle */ #headersingle .content .social{position: absolute; top:30px; font-family: 'futurabold'; color:#66CCFF; font-size: 24px; text-transform: uppercase; left: 14px;} #headersingle .content .social a{display: block; width: 24px; height: 24px; background: url(img/header/social.png); float: right; margin-left: 9px; margin-top: -3px} #headersingle .content .social a.fb{background-position: top left;} #headersingle .content .social a.fb:hover{background-position:bottom left;} #headersingle .content .social a.twitter{background-position: center top;} #headersingle .content .social a.twitter:hover{background-position:center bottom;} #headersingle .content .social a.mail{background-position: right top;} #headersingle .content .social a.mail:hover{background-position:right bottom;} /* Donate */ #header .donate{background: #ffb51a; color:#2a2a29; text-transform: uppercase; font-family: 'futurabold'; font-size: 21px; padding: 10px 13px 7px; border-radius: 4px; position: absolute; top:18px; right:14px;} /* Donatesingle */ #headersingle .donate{background: #ffb51a; color:#2a2a29; text-transform: uppercase; font-family: 'futurabold'; font-size: 21px; padding: 10px 13px 7px; border-radius: 4px; position: absolute; top:18px; right:14px;} #footer .donate{background: #ffb51a; color:#2a2a29 !important; text-transform: uppercase; font-family: 'futurabold' !important; font-size: 21px !important; padding: 10px 13px 7px; border-radius: 4px;} /* Bandeau */ #header .bandeau{width: 100%; height: 122px; background: center #216383; position: absolute; top:70px} #header .bandeau .logo {margin-left:30px} #header .bandeau .navigation{list-style: none; position: absolute; left:400px; top:55px; } #header .bandeau .navigation li{float: left; margin-right: 21px; position: relative; padding: 0 0 10px; } #header .bandeau .navigation li a{font-family: 'Futura Condensed'; font-size: 17px; text-transform: uppercase; color: #fff} #header .bandeau .navigation li:hover a{color:#999} #header .bandeau .navigation li:hover .sub-menu{display: block} #header .bandeau .navigation li .sub-menu{width: 160px; padding:10px 14px; position:absolute; top:25px; background: #FFF; list-style: none; border-radius: 4px; display: none;} #header .bandeau .navigation li .sub-menu li{display: block; float: none; padding: 2px 0;} #header .bandeau .navigation li .sub-menu li a{font-size: 17px; color:#0c3143} #header .bandeau .navigation li .sub-menu li a:hover{color:#ffb51a} /* Bandeausingle */ #headersingle .bandeau{width: 100%; height: 122px; background: center #216383; position: absolute; top:70px} #headersingle .bandeau .logo {margin-left:30px} #headersingle .bandeau .navigation{list-style: none; position: absolute; left:400px; top:55px; } #headersingle .bandeau .navigation li{float: left; margin-right: 21px; position: relative; padding: 0 0 10px; } #headersingle .bandeau .navigation li a{font-family: 'Futura Condensed'; font-size: 17px; text-transform: uppercase; color: #fff} #headersingle .bandeau .navigation li:hover a{color:#999} #headersingle .bandeau .navigation li:hover .sub-menu{display: block} #headersingle .bandeau .navigation li .sub-menu{width: 160px; padding:10px 14px; position:absolute; top:25px; background: #FFF; list-style: none; border-radius: 4px; display: none;} #headersingle .bandeau .navigation li .sub-menu li{display: block; float: none; padding: 2px 0;} #headersingle .bandeau .navigation li .sub-menu li a{font-size: 17px; color:#0c3143} #headersingle .bandeau .navigation li .sub-menu li a:hover{color:#ffb51a} /* Main */ #main{background: #ededed; width: 1078px; position: relative; background: #ededed; margin: -50px auto 0; padding-top: 24px; } /* Home */ #home{} #home .sidebare{width: 328px; float: left; margin-left: 30px;} #home .content{width: 670px; float: right; margin-right: 30px; } /* Little Article */ #home .littlearticle{width: 305px; padding: 11px; background: #FFF; border-radius: 6px; box-shadow: 0px 0px 3px #b4b4b4; margin-bottom: 15px} #home .littlearticle h1{font-family: 'Futura Condensed'; font-size: 21px; text-transform: uppercase; color:#d00404; margin-top: 8px} #home .littlearticle p{font-family: verdana, arial, sans-serif; font-size: 12px; line-height:16px; margin-top: 8px} /* SideBare */ #home .sidebare .facebook{background: #20607e; padding: 22px 0; text-align: center; font-family: 'Futura condensed'; color:#FFF; font-size: 19px; border-radius: 6px; margin-bottom: 15px} #home .sidebare .facebook iframe{display: block; margin: 8px auto 0} /* Newsletter */ #home .content .newsletter{background: url(img/home/bgnewsletter.png) #216484; width: 100%; height: 82px; border-radius: 6px; box-shadow: 0px 0px 3px #b4b4b4; position: relative} #home .content .newsletter h1{font-family: 'futurabold'; font-size: 33px; color:#FFF; text-transform: uppercase; position: absolute; top:18px; left:18px} #home .content .newsletter p{font-family: verdana, arial, sans-serif; font-size: 12px; color:#FFF; position: absolute; left: 18px; top:51px} #home .content .newsletter input[type=text]{background: #FFF; border: 3px solid #1f4b60; font-family: 'Georgia'; font-size: 14px; font-style: italic; color:#2b2b2b; width: 230px; padding: 15px 15px; position: absolute; border-radius: 9px; top:15px; right:87px;} #home .content .newsletter input[type=submit]{background: #ffb51a; color:#2a2a29; font-size: 24px; font-family: 'futurabold'; padding: 10px 10px 4px; border: 2px solid #2a2a29; border-radius: 5px; box-shadow: inset 0px 1px 0px #ffb51a; position: absolute; top:17px; right: 25px; cursor: pointer; -webkit-appearance:none} /* Top Article */ #home .toparticle{width: auto; padding: 11px; background: #20607e; border-radius: 6px; box-shadow: 0px 0px 3px #b4b4b4; margin: 16px 0} #home .toparticle h1{font-family: 'Futura Condensed'; font-size: 21px; text-transform: uppercase; color:#FFF; margin-top: 8px} #home .toparticle p{font-family: verdana, arial, sans-serif; font-size: 12px; line-height:16px;margin-top: 8px; color: #FFF} /* Two Articles */ #home .twoarticles{} #home .twoarticles .littlearticle{float: left; } #home .twoarticles .littlearticle.last{float: right} /* Article */ #article{margin-top: 15px} #article .sidebare{width: 300px; padding:25px 18px 35px; background: #FFF; float: right; margin-right: 20px; border-radius: 4px} #article .content{width: 600px; float: left; margin-left: 20px; padding-bottom: 40px } /* Content */ #article .content h1{text-transform: uppercase; font-family: 'Futurabold'; color:#1a485e; font-size: 29px; padding-bottom: 10px} #article .content h2{text-transform: uppercase; font-family: 'Futurabold'; color:#1a485e; font-size: 18px; padding-bottom: 10px} #article .content h3{font-family: 'Futurabold'; color:#ffb51a; font-size: 18px; padding-bottom: 10px;margin-left: 30px;} #article .content h4{font-family: 'Futurabold'; color:#1a485e; font-size: 16px; padding-bottom: 10px} #article .content p{font-family: verdana, arial, sans-serif; font-size: 12px;margin-left: 30px; line-height:18px;} #article .content li{font-family: verdana, arial, sans-serif; font-size: 12px; line-height:18px; list-style-type:disc;margin-left: 50px;} /* Sidebare */ #article .sidebare h1{text-transform: uppercase; font-family: 'Futurabold'; color:#1a485e; font-size: 24px; padding-bottom: 10px} #article .sidebare ul{list-style: disc; color:#1a485e; margin-left: 18px; margin-top: 10px} #article .sidebare ul li{margin: 15px 0} #article .sidebare ul a{color:#1a485e; font-size: 16px; font-family: 'arial'; margin-top: 10px} #article .sidebare ul a:hover{text-decoration: underline} #article .sidebare h2{text-transform: uppercase; font-family: 'Futurabold'; color:#1a485e; font-size: 18px; padding-bottom: 10px} #article .sidebare h3{font-family: 'Futurabold'; color:#ffb51a; font-size: 18px; padding-bottom: 10px;margin-left: 10px;} #article .sidebare h4{font-family: 'Futurabold'; color:#1a485e; font-size: 16px; padding-bottom: 10px} #article .sidebare p{font-family: verdana, arial, sans-serif; font-size: 12px;margin-left: 10px; line-height:18px;} #article .sidebare li{font-family: verdana, arial, sans-serif;; font-size: 12px; line-height:18px; list-style-type:disc;margin-left: 10px;} .wp-caption{margin:20px 0 !important;} .wp-caption-text{text-align:center; !important;} .gallery-item, .gallery-icon{text-align:center;} /* footer */ #footer{height: 114px; background: #216383; clear: both; border-top: 10px solid #cfcfcf; position: relative; min-width: 1078px;} #footer .content{width: 1014px; height: 114px; position: relative; margin: 0 auto} #footer p{position: absolute; top:39px; left:0; color:#FFF; font-size: 12px; font-family: verdana, arial, sans-serif; line-height: 17px} #footer .links {position: absolute; top:44px; right: 0} #footer .links li{float: left; margin-right: 21px; position: relative; padding: 0 0 10px; font-family:'Futura Condensed'; text-transform: uppercase; color:#FFF; font-size: 20px; margin-left: 23px} #footer .links a{color:#FFF} #footer .links a:hover{color:#0c3143} /* Global */ a{text-decoration: none; color:#1a485e;} .clear{clear: both}