/* CSS Document */ .roboto-200 { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; font-variation-settings: "wdth" 100; } * {outline:none;margin:0;padding:0;} img {border:none;} ul {list-style-type:none;} body {font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#FFF;padding-left:1px;} /* STRUCTURE */ #wrapper {width:943px;margin:0 auto;} header {height:120px;} header img {display:block; margin:0 auto; padding-top:15px;} #main_nav {border-bottom:1px solid #FFF;height:45px;background:url(../webimages/bg_nav.png) repeat-x;font-family:'Roboto',Arial, Helvetica, sans-serif; font-size:14px;text-transform:uppercase;} #main_nav li {float:left;} #main_nav a {display:block; color:#526372;float:left; background:url(../webimages/bg_nav.png) repeat-x; padding:14px 20px 11px 20px;line-height:20px;} #main_nav a:hover, #main_nav .menu_actif { background-position:0 -45px;} #top {background:#242f3b url(../webimages/top.png) no-repeat center bottom; height:25px;} #middle {background:#242f3b url(../webimages/middle.png) repeat-y; padding:15px 0; float:left; width:943px;} #bottom {background:#242f3b url(../webimages/bottom.png) no-repeat; height:25px;float:left; width:943px; clear:both;} #middle section {width:520px;float:left;margin-left:30px;} #middle aside {width:315px;float:left;margin-left:45px;} aside {} footer {clear:both;background:#1c1e22;height:280px;} footer p {margin:0;} footer div {width:943px;margin:0 auto;} footer#mini {background:#21272d;text-align:right; padding:10px 20px 10px 0;font-size:10px; height:15px;} footer table { padding:25px 0 0 25px; width:890px;line-height:20px;} footer table td { vertical-align:top;} footer table h2 {font-family:'Roboto', Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; margin-bottom:5px;} footer table a { display:block; color:#d9e8ee;} /* STYLES */ a {color:#fff;text-decoration:none;} a:hover {color:#CCC;} h1 {font-size:16px;color:#b4c1c9;text-transform:uppercase; margin-bottom:15px;} h2 {font-size:14px;color:#b4c1c9;} p {margin:15px 0;} #accroches {margin-top:15px;} #accroches td {vertical-align:top;} #accroches img {margin-bottom:20px;} #accroches h2 {margin-top:8px; margin-left:10px; font-weight:normal;} /*BOXES SOUS NAVIGATION*/ #sous-nav li, #box_home li {float:left;font-family:'Roboto',Arial, Helvetica, sans-serif; font-size:20px;text-transform:uppercase; border-bottom:1px solid #FFF;} #sous-nav li.nav_1, #sous-nav li.nav_4 {width:316px;} #sous-nav li.nav_2, #sous-nav li.nav_5 {width:311px;border-left:1px solid #FFF;border-right:1px solid #FFF;} #sous-nav li.nav_3, #sous-nav li.nav_6 {width:314px;} #sous-nav .image {display:block;height:161px;background-position:0 -161px;} #box_home .image {display:block;height:161px;background-position:0 322px;} #sous-nav li.menu_actif .image {background-position:0 322px;} #sous-nav .texte, #box_home .texte {display:block;height:78px; background:url(../webimages/bg_sousnav.png) repeat-x;text-align:center; padding:25px 0 0;} #sous-nav .texte p,#box_home .texte p {font-size:12px; margin:5px 0 0; color:#7d8b91;} #box_home li.nav_1{ width:471px;border-right:1px solid #FFF; position:relative;} #box_home li.nav_2{ width:471px;position:relative;} #box_home .image ul { margin-left:265px; list-style-type:disc; padding-top:18px;position:absolute; line-height:16px;} #box_home .image li { font-size:12px; float:none; text-decoration:none; border:none; padding:2px 0; display:none; width:200px; line-height:16px;} /*SC-ELECTRONICS*/ #middle section article { border-bottom:1px solid #FFF; padding-bottom:15px; margin-bottom:15px;} figure#page a.boxes { display:block; width:150px; height:100px; float:left; margin-right:5px;} figure#page {width:520px;} #news article {border-bottom:1px solid #FFF;} #news article h2 {margin-top:15px;} #news article h2 span {display:block;color:#FFF;} /*SLIDER*/ #slider {width:943px;height:264px;position:relative;background:#fff url(../webimages/icon/loading.gif) no-repeat center;border-bottom:1px solid #FFF;} #slider a {display:block; position:absolute;z-index:1000;width:100%;height:100%;} #slider img {position:absolute;top:0px;left:0px; display:none;} .nivo-slice {display:block;position:absolute;z-index:5;height:100%;} .nivo-box {display:block;position:absolute;z-index:5;} /*MAP*/ #mymap {width:320px;height:450px;} /* FORMULAIRES */ #formulaire {font-size:10px;line-height:12px;} #formulaire td {vertical-align:top;} #formulaire p {margin:0 0 5px;} #formulaire input {font-size:12px;border:1px solid #000;padding:2px;width:200px;} #formulaire textarea {font-size:12px;border:1px solid #000;padding:2px;width:300px;height:150px;} #formulaire .failed {color:#900;} #formulaire .valid {color:#090;} #formulaire .sends {color:#000;background-color:#ccc;border:1px solid #000;width:70px;margin:5px auto;padding:2px;text-align:center;cursor:pointer;display:block;} #formulaire .sends:hover {color:#fff;} #formulaire input[type=checkbox] { width:inherit; margin-right:5px; padding-bottom:15px;} #special {display:none;} /* CAPTCHA */ #champ_confirm {width:50px;margin-top:5px;margin-left:5px;} #captcha {float:left;} /* COPYRIGHT */ #copyright {background:url(../webimages/icon/copyright_lelixir_blanc.png);margin:35px 25px 0px 0px;display:block;width:73px;height:13px; float:right;} #copyright:hover {background-position:0 -13px;} /*VERSION IMPRIMABLE*/ @media print{ *{background:none!important;background-color:white!important;} #slider,#box_home,#sous-nav,#main_nav{ display:none;} } #special {display:none;} #photoUp { cursor: pointer; color: #fff; } .file { } .file input[type=file] { } input, textarea, .btn { display: block; width:100%; padding:3px; font-size:80%; font-family:$font; color:#000; border:1px solid #fff; outline:none; appearance:none; line-height: 1; } textarea { height:250px; resize:none; } input:focus, textarea:focus { background:#ccc; transition:color 0.8s ease, background 0.8s ease; } input.error, textarea.error { background:#900; color: #fff; } label { display: flex; align-items: flex-end; width: 100%; clear: both; font-size:80%; margin: 0 0 5px; } .error-box { margin-left: auto; float: right; } .error-box label { display: inline; color: #900; margin: 0; } .input-valid { text-align: center; } .input-valid input { color: #000; background-color: #ccc; border: 1px solid #000; width: 70px; margin: 5px auto; padding: 2px; text-align: center; cursor: pointer; display: block; } .input-valid input:hover { color:#fff; background:$blue; } #slider img { display: none; } #slider img.show { display: block; } /** Showcase * ------------- */ #awOnePageButton .view-slide { display: none } /* ===[ This class is removed after the showcase is loaded ]=== */ /* ===[ Assign the correct showcase height to prevent loading jumps in IE ]=== */ .showcase-load { height: 200px; /* Same as showcase javascript option */ overflow: hidden; } /* ===[ Container when content is shown as one page ]=== */ .showcase-onepage { /**/: } /* ===[ Container when content is shown in slider ]=== */ .showcase { position: relative; margin: auto; } .showcase-content-container { } /* ===[ Navigation arrows ]=== */ .showcase-arrow-previous, .showcase-arrow-next { position: absolute; background: url('../webimages/arrows1.png'); width: 33px; height: 33px; top: 195px; cursor: pointer; } .showcase-arrow-previous { left: 0px; position:absolute; z-index:100000000; } .showcase-arrow-previous:hover { background-position: 0px -34px } .showcase-arrow-next { right: 235px; background-position: -34px 0; position:absolute; z-index:1000; } .showcase-arrow-next:hover { background-position: -34px -34px } /* ===[ Content ]=== */ .showcase-content { } .showcase-content-wrapper { text-align: center; height: 470px; width: 700px; display: table-cell; vertical-align: middle; } /* ===[ Styling the tooltips ]=== */ .showcase-plus-anchor { background-image: url('../images/plus.png'); background-repeat: no-repeat; } .showcase-plus-anchor:hover { background-position: -32px 0 } div.showcase-tooltip { background-color: #fff; color: #000; text-align: left; padding: 5px 8px; background-image: url(../images/white-opacity-80.png); } /* ===[ Styling the caption ]=== */ .showcase-caption { width: 200px; text-align: left; position: absolute; top: 0px; right: 10px; display: none; } .showcase-onepage .showcase-content { margin-bottom: 10px } /* ===[ Button Wrapper ]=== */ .showcase-button-wrapper { clear: both; margin-top: 5px; text-align: center; width:280px; } .showcase-button-wrapper span { margin-right: 3px; padding: 2px 5px 0px 5px; cursor: pointer; font-size: 12px; color: #444444; } .showcase-button-wrapper span.active { color: #fff } /* ===[ Thumbnails ]=== */ .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */ { background-color: #000 } .showcase-thumbnail-wrapper { overflow: hidden } .showcase-thumbnail { width: 120px; height: 90px; cursor: pointer; border: solid 1px #333; position: relative; } .showcase-thumbnail-caption { position: absolute; bottom: 2px; padding-left: 10px; padding-bottom: 5px; } .showcase-thumbnail-content { padding: 10px; text-align: center; padding-top: 25px; } .showcase-thumbnail-cover { background-image: url(../images/black-opacity-40.png); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .showcase-thumbnail:hover { border: solid 1px #999 } .showcase-thumbnail:hover .showcase-thumbnail-cover { display: none } .showcase-thumbnail.active { border: solid 1px #999 } .showcase-thumbnail.active .showcase-thumbnail-cover { display: none } .showcase-thumbnail-wrapper-horizontal { padding: 10px } .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail { margin-right: 10px; width: 116px; } .showcase-thumbnail-wrapper-vertical { padding: 10px } .showcase-thumbnail-wrapper-vertical .showcase-thumbnail { margin-bottom: 10px } .showcase-thumbnail-button-backward, .showcase-thumbnail-button-forward { padding: 7px; cursor: pointer; } .showcase-thumbnail-button-backward { padding-bottom: 0px; padding-right: 0px; } .showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-image: url(../images/arrows-small.png); background-repeat: no-repeat; display: block; width: 17px; height: 17px; } .showcase-thumbnail-button-backward .showcase-thumbnail-vertical { background-position: 0 -51px; margin-left: 55px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical { background-position: -17px -51px } .showcase-thumbnail-button-forward .showcase-thumbnail-vertical { background-position: 0 -34px; margin-left: 55px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical { background-position: -17px -34px } .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-position: 0 -17px; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal { background-position: -17px -17px } .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal { background-position: 0 0; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal { background-position: -17px 0 } /* ===[ Hide button text ]=== */ .showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span { display: none } /** Clear (used for horizontal thumbnails) * ------------------------------------------- */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; float: none; }