/* ---------------------------------------------------------------------------- * Filename: style.css * Description: Cogito * Version: 1.0 (2010-10-14) ------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1. Layouts ----------------------------------------------------------------------------- */ /* 1 General (B1) ----------------------------------------------------------------------------- */ html { -moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; } html *, html *:before, html *:after { -moz-box-sizing: inherit;-webkit-box-sizing: inherit;box-sizing: inherit } .container { width: 960px; margin: 0 auto; position: relative; padding: 0 10px; } a:link, a:visited { color: #303030; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; } a:hover, a:active { color: #056982; text-decoration: none; } /* 404 */ .page-404 { text-align: center; padding: 50px;font-weight: 700; } .page-404 a { text-decoration: underline; } /* Merci */ .merci .emptyPage { text-align: center; min-height: 300px; font-weight: 700; padding: 50px; } .merci .emptyPage a { color: #303030; text-decoration: underline; } .merci .emptyPage a:hover { color: #056982; } /* Plan du site */ .list { float: left; margin: 10px 0 30px 0 ; width: 100%; } .list li { padding: 0 0 0 40px; border-bottom: 1px dashed #5dc0df; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; } .list li:hover { background: #ededed; } .list li:before { /* For a round bullet */ font-family: FontAwesome; content: "\f054"; /* For a square bullet */ /*content:'\25A0';*/ display: block; font-size: 12px; left: -25px; max-height: 0; max-width: 0; position: relative; top: 17px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .list li:hover:before { left:-20px; color: #5dc0df; } .list li a { display: block;width:100%; height: 100%; padding: 15px 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .list li a:hover { text-decoration: none; color: #5dc0df;} input, textarea { -webkit-appearance: none; -webkit-border-radius: 0; } /* ---------------------------------------------------------------------------- 2. Header elements ----------------------------------------------------------------------------- */ /*.languages-holder {float:left; } .languages-holder .languages li {display:inline; cursor:pointer;} .languages-holder .languages li {opacity:0.5;} .languages-holder .languages li.active {opacity:1;}*/ .header-top { min-height: 160px; } .header-top > .container { background: url(../images/layout/header-bg.png) no-repeat top right; } .logo, .slogan { display: inline-block; vertical-align: top; } .logo { position: relative; width: 183px; } .round-holder { float: right; } .index .round1, .index .round2, .index .round3 { display: block; width: 35px; height: 35px; background: #006881; border-radius: 50px; position:absolute;left:-200px; opacity: 0; display: inline-block; margin: 7px 3px 0 3px; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; } .round1, .round2, .round3 { display: block; width: 36px; height: 35px; background: #006881; border-radius: 50px; opacity: 1; display: inline-block; margin: 7px 3px 0 3px; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; } .logo img { -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; } .logo:hover img:hover { opacity: 0.7; } .logo a:hover ~ .round-holder .round1, .logo a:hover ~ .round-holder .round2, .logo a:hover ~ .round-holder .round3 { background: #90d3e7; } .slogan { border-left: 3px solid #60bfdc; font-size: 19px; line-height: 24px; padding: 14px 0 14px 20px; margin:19px 0 23px 45px; color: #056982; } .header-bottom { text-align: center; } .header-menu-holder { background:#dfdfdf; } .header-menu { display:table; width: 100%; border-left: 1px solid #a1a1a1; border-right: 1px solid #f5f5f5;} .header-menu li { display:table-cell; position:relative; min-width: 95px;} .header-menu li a { display: block; height:100%; color:#056982; font-size:14px; font-weight: 700; line-height: 42px; background: #dfdfdf; border-left: 1px solid #f5f5f5; border-right: 1px solid #bababa; } .header-menu li.active a, .header-menu li a:hover { color:#ffffff; background:#60bfdc; border-left: 1px solid #f5f5f5; border-right: 1px solid #bababa;} .header-menu li ul.sous { width:290px; position: absolute; top:42px; left: 0px; z-index: 9999;} .header-menu li ul.sous li { display: block; text-align: left;} .header-menu li ul.sous li a { padding-left: 12px; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #bababa; background: #dfdfdf; color: #056982; } .header-menu li ul.sous li.active a, .header-menu li ul.sous li a:hover { background:#60BFDC !important; color: #ffffff; } /* ---------------------------------------------------------------------------- 3. Content elements ----------------------------------------------------------------------------- */ /* H1 */ #wrap-h1 { background-color: #056982; background-image: url(../images/layout/wrap-h1-bg.png); background-repeat: repeat-x; background-position: top left; } .index #wrap-h1 > .container { background: url(../images/layout/accueil-h1-container.png) no-repeat top right; } #wrap-h1 h1 { color: #ffffff; font-size: 30px; line-height: 36px; font-weight: 700; padding: 35px 0; } .index .h1-text { max-width:480px; } .h1-text p { color: #ffffff; } .h1-image { max-width:445px; padding-top: 60px; } .h1-image img { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .h1-image img:hover { transform: scale(0.96,0.96) } /*#nav { clear: both; background: #DDDDDD; } #nav-inner { padding: 5px; } #info { clear: both; background: #CCCCCC; } #info-inner { }*/ /* Paragraph - General */ /*.index */#content/*, .contact #content */ { background-image: url(../acces_web/skin/images/content-bg.jpg); background-position: top left; background-repeat: repeat; } .content-management { text-align: justify; min-height: 300px; } .merci .content-management, .pds .content-management { text-align: justify; min-height: 0; } .content-management .paragraph { padding: 20px 0 20px 0; } .content-management .paragraph-title { } .paragraph h2 { color: #303030; display: block; font-size: 30px; text-align: left; margin-bottom: 20px; line-height: 30px; } .content-management .paragraph-text { } .content-management .paragraph-images { } .paragraph.images .paragraph-images a, .paragraph.images-right a, .paragraph.images-left a { width: 300px; height: 225px; display: inline-block; } /* Paragraph Images */ .paragraph.images a { margin: 10px 20px 10px 0; box-shadow: 3px 3px 1px #DFDFDF; -webkit-box-shadow: 1px 1px 5px #999; -moz-box-shadow: 1px 1px 5px #999; } .paragraph-images a.third { margin-right: 0; } /* Image left / Image Right */ .paragraph.images-left .paragraph-images { float: left; margin: 0 20px 5px 0; } .paragraph.images-left .paragraph-images img, .paragraph.images-right .paragraph-images img { /*max-height: 300px;*/ } .paragraph.images-left .paragraph-images a, .paragraph.images-right .paragraph-images a { box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; -moz-box-shadow: 1px 1px 5px #999; } .paragraph.images-right .paragraph-images { float: right; margin: 0 0 5px 20px; } /* Galerie Image */ .paragraph.galerie-right .paragraph-images { float: right; margin: 0 0 5px 30px; max-width: 480px; } .paragraph.galerie-right .paragraph-images .gallery-image-holder { float: left; width: 230px; height: 173px; margin-right: 20px; margin-bottom: 20px;/* border-radius: 5px;*/ /*padding-bottom: 30px;*/ box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; -moz-box-shadow: 1px 1px 5px #999; } /* 3px 3px 1px #DFDFDF */ .paragraph.galerie-right .paragraph-images .gallery-image-holder.second { margin-right: 0; } .paragraph.galerie-right .paragraph-images .gallery-image-holder a { height: 173px; } /* List */ .paragraph ul { /*display: inline-block;*/ margin-left: 20px; } .paragraph li { padding: 0 0 0 20px; } .paragraph li:before { color: #056982; font-family: FontAwesome; content: "\f105"; display: block; font-size: 18px; left: -15px; max-height: 0; max-width: 0; position: relative; top: 0; } /* Paragraph Image Top */ .content-management .images-top-wrap { padding-bottom: 32px; } .paragraph .image-top { width: 33.33%; float: left; text-align: center; border-right: 3px solid #ffffff; background-image: url(../images/layout/image-paragraph-shaddow-bg.png); background-position: center top 212px; background-repeat: no-repeat; } .paragraph .image-top.last { border-right:0; } .paragraph.images-top-wrap .paragraph-title h2 { text-align: center; font-size: 30px; line-height: 60px; padding: 5px 0 12px 0; color: #303030; } .image-holder { background-image: url(../images/layout/image-holder-bg.jpg); background-repeat: repeat-x ; width: 236px; height:213px; /*border: 10px solid #b7e2ef; */ border-radius:5px; margin: 0 auto; display: table; margin: 0 auto;/* -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out ; */background-color: #DFDFDF; } .image-holder-inner { display: table-cell; width: 100%; height: 100%; vertical-align: middle; overflow: hidden; } .image-holder-inner img { max-width: 132px; max-height: 120px; } .title-holder { margin-top: 36px;} .image-title { font-size: 30px; display: block; color: #056982; padding: 0 21%;} .image-title span { font-size: 14px; line-height: 18px; display: block; margin-top: 10px; font-weight: 700; color: #303030;} .text-holder { padding: 0 21%; } .image-text i { display: block; margin: 7px 0; font-size: 20px; color: #818282; position: relative; top: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .image-top.item-1:hover .image-holder { /*background: #B7E2EF; border-color: #006881; */ } .image-top.item-1:hover .text-holder i { top: 5px; color: #056982; } .image-top.item-2:hover .image-holder {/* background: #B7E2EF; border-color: #006881;*/ } .image-top.item-2:hover .text-holder i { top: 5px; color: #056982 } .image-top.item-3:hover .image-holder { /*background: #B7E2EF; border-color: #006881; */ } .image-top.item-3:hover .text-holder i { top: 5px; color: #056982; } /* Thumb */ a.thumb { float:left; width:100%; position:relative; background:#fff; overflow:hidden; } a.thumb img { width:100%;height:100%;-webkit-transition:all .40s;-moz-transition:all .40s;-o-transition:all .40s;transition:all .40s; } a.thumb:hover img { opacity:0.3; filter: alpha(opacity=30); } a.thumb i { color: #006881; display:block; position:absolute; top: -50%; left:50%; /*border:3px solid #fff; border-radius:100%;*/ width:40px; height:40px; text-align:center; font-size:40px;line-height:40px; margin:-20px 0 0 -20px; opacity:0; filter: alpha(opacity=0); -webkit-backface-visibility:hidden; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } a.thumb:hover i {opacity:1; top: 50%; filter: alpha(opacity=100);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } /* ---------------------------------------------------------------------------- 4. Footer elements ----------------------------------------------------------------------------- */ #wrap-footer { background-color: #006881; color: #ffffff;} #wrap-footer a { color: #ffffff;} #footer-top { background: #60bfdc; font-size:13px; } #footer-top a { font-size: 13px; } .footer-logo, .footer-address, .footer-phone, .footer-email { display: inline-block; line-height: 40px; vertical-align: top; } .footer-logo { margin-right: 60px; } .footer-address { margin-right: 40px; } .footer-email { float: right; font-weight: 700 } #footer-top a:hover { color: #006881; } #wrap-footer i { margin-right: 8px;} #footer-bottom { background: #006881; line-height: 42px; } #footer-bottom a { font-size: 12px; } #wrap-footer .menu { float: left; } #wrap-footer .menu li { display: inline-block; } #wrap-footer .menu li span { padding: 0 5px; } #wrap-footer .menu li a:hover, #wrap-footer .menu li a:active, #wrap-footer .menu li.active a { color: #5dc0df; } #made-by { font-size: 12px; text-align: right; } #made-by-logo { display: inline-block; } #made-by a:hover, #made-by a:active { color: #5dc0df; } /* ---------------------------------------------------------------------------- 5. Contact ----------------------------------------------------------------------------- */ .contact .content-management { min-height: 0; } #gmaps { height: 418px; width: 100%; } #gmaps a { color: #111111; } #gmaps a:hover { text-decoration: none;color:#CC0605 } .gm-style-iw + div { top: 5px !important; right: 5px !important; } .wrap-map-infos { position: relative; } .data-holder { } .data-holder div { margin: 5px 0; font-weight: 700; } .data-holder div a { color: #60bfdc; } .data-holder div a i { -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out;} .data-holder div a:hover, .data-holder div a:hover i { color: #006881; } .data-holder div i:hover { color: #60BFDC; } .data-holder span { display: inline-block; width: 25px; color: #60bfdc; } .data-holder span:hover { color: #006881; } /*---------------------------------------------------------------------------- 7. Reference ----------------------------------------------------------------------------- */ /* filters */ .gallerylist { min-height: 490px; } .gallerylist > .container { padding: 0; width: 100%; } .filters { padding:20px 0px; text-align:center; } .filters .filter { display:inline-block; } .filters label, .filters .filter-holder { display:inline-block; } .filters label { font-size: 15px; height: 35px; line-height: 35px; position: relative; vertical-align: top; font-weight: 700; } .filters .filter-holder ul { display:none; position:absolute; min-width:100%; border:1px solid #fff; left:0; top:100%; z-index:1000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-height:207px; overflow:auto; } .filters .filter-holder ul li, .filters .filter-holder ul li a { text-align:left; display:block; } .filters .filter-holder ul li a { background:#000; color:#fff; padding:11px 15px; line-height:18px; font-size:14px; border-bottom:1px solid #fff;} .filters .filter-holder ul li:last-child a { border-bottom:none;} .filters .filter-holder ul li a:hover { background:#006881 !important; text-decoration: none; } .filters .filter-holder ul li.odd a { background:#303030; } .filters .filter-holder ul li.invisible { display:none; } .filters .filter-holder { cursor:pointer; position:relative; margin: 0 0 0 10px; } .filters .filter-holder .filter-current { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; width:250px; text-align:left; border:1px solid #fff; background:#006881; color:#ffffff; padding:0 30px 0 15px; line-height:35px; font-size:14px;} .filters .filter-holder .filter-current:before { content:'\f107'; font-family:"FontAwesome"; font-size:20px; position:absolute; right:10px; } .filters .filter-loading { vertical-align:top; color:#006881; display:inline-block; line-height:35px; font-size:20px; margin:0 10px; opacity:0; filter: alpha(opacity=0); transition:0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;} .slide { display: block; float: left; height: 110px; width: 220px; border-radius: 1px; background: #ffffff; margin-right: 20px; margin-bottom: 20px; box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; -moz-box-shadow: 1px 1px 5px #999; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -o-transition: all 20s ease-in-out; transition: all 0.20s ease-in-out; /*-webkit-appearance: none; border-radius: 1px; */ overflow: hidden;} .slide.last { margin-right: 0; } .opacity-on a { cursor: pointer !important; } .opacity-on:hover { opacity: 0.7; } .slide a { width: 100%; height: 100%; cursor: default; } .slide .table-cell-holder.thumb { float: none; width:100%; height: 100%; } .table-cell-holder.thumb img { height: auto; width: auto; } .table-holder { display: table; height: 100%; width: 100%; background: #ffffff; } .table-cell-holder { display: table-cell; height: 100%; text-align: center; vertical-align: middle; width: 100%; background: #ffffff; /*cursor: default;*/ } .gallerylist .align-center.no-photo { padding-top: 100px; font-weight: 700; font-size: 18px; }