/*---------------------------------------------------------- ----------------------------------------------------------*/ /* ======================================================================== * Reset CSS * ========================================================================*/ @import "reset.css"; /* ======================================================================== * Balises par défaut * ========================================================================*/ html {} body {min-width:960px; background:#e2e6e9 url(../images/bgd_body.png) repeat-x left top; font-size:12px; font-family:"Trebuchet MS", "Lucida Sans", Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif;} h1 {} h2 { } h3 { } h4 { } h5 { } h6 { } p { } img { } sup { } abbr, acronym { } blockquote, q { } blockquote { } cite { } ul { } ol { } dl { } form { } fieldset { } input { } label { } a { } a:link { } a:visited { } a:hover { } a:focus { } a img { } code, pre { } pre { } hr { } /* ======================================================================== * Disposition * ========================================================================*/ /* ----------------------------------------- * Début de projet (A supprimer ensuite) * ------------------------------------------*/ #test-png {background:url(../images/A_supprimer_bgd_test.gif); width:5%; border:1px solid #888888; padding:20px; position:absolute; top:2px; left:2px; z-index:100000;} #arbo {padding:0 10px;} #arbo a {color:#3898DB;} #arbo li {padding:0 0 5px; font-weight:bold; font-size:14px;} #arbo li li {font-weight:bold; font-size:12px;} #arbo li li li {font-weight:normal; font-size:11px; border-bottom:1px dotted #CCCCCC;} #arbo li li li.last {border-bottom:none;} #arbo ul {padding:5px 15px 0; margin:5px 0 0 10px; border-left:1px dotted #EA7906; background:#E2E6E9; border-top:2px solid #EA7906;} #arbo ul ul {padding:5px 15px 0; border-left:1px dotted #F7F9FA; border-top:2px solid #F89C00; background:#F7F9FA;} /* ----------------------------------------- * Mise en page générale * ------------------------------------------*/ #nav-wrap {background:url(../images/bgd_nav_wrap.png) repeat-x left top; min-height:61px; min-width:960px; position:absolute; left:0; top:0; width:100%; z-index:2;} #share {width:960px; margin:0 auto; overflow:hidden;} #share p {color:#adadad; font-family:Arial, Helvetica, sans-serif; font-size:10px; display:inline-block; float:left; line-height:24px; padding:0 0 0 15px;} #share #recruit {background:url(../images/btn_recrutement.png) no-repeat left top; height:26px; display:inline-block; padding:0 0 0 28px; color:#2b2b2b; text-transform:uppercase; font-size:12px; font-weight:bold; text-decoration:none; float:right;} #share #recruit span { display:inline-block; padding: 5px 4px 0 0; height:21px; cursor:pointer;} #share #options {width:66px; overflow:hidden; float:right; padding: 4px 7px 0;} #share #options li {background:url(../images/ico_share.png); width:18px; height:21px; overflow:hidden; float:left; display:inline; margin:0 3px;} #share #options li a {text-indent:-9999em; display:block;} #share #options .fb {background-position:left top; margin-left:0;} #share #options .twitter {background-position:-23px top;} #share #options .rss {background-position:-46px top; margin-right:0;} #nav {background:url(../images/bgd_nav.png) no-repeat right top; padding:0 45px 12px 0; width:915px; margin:-2px auto 0; } #nav ul {width:687px; float:right; position:relative;} #nav li {float:left;} #nav .back {background:url(../images/bgd_bottom_nav.png) no-repeat right bottom; position:absolute; top:0; height:45px;} #nav .back .left {background:url(../images/bgd_bottom_nav.png) no-repeat left bottom; display:block; height:100%; margin-right:44px;} #nav li a {color:#ebebeb; font-weight:bold; font-size:13px; line-height:18px; text-transform:uppercase; text-decoration:none; padding:15px 23px 12px; display:block; position:relative; z-index:3; outline:none;} #nav li a:hover, #nav .current a, #nav .hover a {color:#FFFFFF; background:url(../images/bgd_hover_nav.png) no-repeat center 21px;} #nav .drop { z-index:6000; position:absolute; top:45px; left:auto; /*padding:15px;*/ padding:0; width:100%; /*width:650px;*/ overflow:hidden; background:#353535 url(../images/bgd_drop.png) repeat-x left top; border:1px solid #7F7F7F; border-top:none; display:none; color:#ebebeb;} #nav .drop div {width:25%; float:left; z-index:6000; } #nav h3 {color:#ebebeb; font-weight:bold; font-size:13px; text-transform:uppercase;} #nav .second-level {width:auto; float:none;} #nav .second-level li {display:block; width:100%; float:left; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444;} #nav .second-level a, #nav .second-level a:hover {padding:5px 10px; position:static; background:none; font-weight:normal; text-transform:none; margin:0; display:block;} #nav .second-level a:hover {color:#EBEBEB; background:#222;} #extranet-panel{position:fixed!important; position:absolute; right:0; top:100px; display:block; font-size:18px; color:#ffffff; font-weight:bold; text-decoration:none; z-index:15; background:url(../images/bgd_extranet.png) no-repeat left top; padding:22px 0 22px 15px; height:142px; overflow:hidden;} #btn-extranet {display:inline-block; float:left; padding:5px 12px 0 31px; outline:none;} #form-extranet {padding:6px 15px 0 17px; width:182px; float:left; overflow:hidden; margin:0 -214px 0 0;} #form-extranet a {font-size:10px; line-height:18px; text-decoration:none; color:#FFFFFF; font-weight:normal; padding:0 7px 0 15px; background:url(../images/ico_retrieve.png) no-repeat left 3px; position:absolute; right:0;} #form-extranet p {width:100%; overflow:hidden; position:relative;} #form-extranet fieldset {margin:0 0 3px;} #form-extranet fieldset p {margin:0 0 3px;} #form-extranet label {color:#ffffff; font-weight:bold; font-size:12px; line-height:18px; display:block; width:100%;} #form-extranet .field {background:url(../images/bgd_inputExtranet.png) no-repeat left top; display:inline-block; padding:2px; width:173px; height:25px; overflow:hidden; float:left;} #form-extranet .field input {width:173px; height:25px; font-size:14px; line-height:25px; color:#1F4350; font-family:"Trebuchet MS", "Lucida Sans", Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif; border:none; background:none; float:left;} #form-extranet #submit-extranet {background:url(../images/btn_formExtranet.png) no-repeat left top; color:#FFFFFF; font-size:14px; line-height:14px; font-weight:bold; border:none; font-family:"Trebuchet MS", "Lucida Sans", Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif; padding:0 0 4px; width:117px; height:25px; display:inline-block; cursor:pointer;} #wrap { background:url(../images/bgd_glow.jpg) no-repeat left top;} #header { background:url(../images/bgd_h1.png) no-repeat -21px 31px; padding: 76px 0 10px; overflow:hidden; width:960px; height:149px; margin:0 auto; position:relative;} #header h1 {display:inline-block; float:left; width:245px } #header h1 span {background:url(../images/logo_shadow.png) no-repeat center -107px; height:27px; display:block; width:100% } #header .devis {position:absolute; left:290px; top:107px; width:190px; text-align:center } #header .devis a {background:url(../images/bgd_devis.png) no-repeat; color:#fefaed; font-weight:bold; font-size:20px; line-height:25px; text-decoration:none; display:inline-block; padding:21px 15px 21px 61px; width:104px; text-align:left; margin:0 auto;} #header .devis a:hover {background-position:left -75px; color:#FFFFFF } #header .devis span {background:url(../images/logo_shadow.png) no-repeat center top; height:27px; display:block; margin:26px 0 0; width:100% } #header .devis strong {text-transform:uppercase } #header #intro {float:right; color:#FFFFFF; width:49%; padding:16px 0 0;} #header #intro h2 {font-size:22px; line-height:22px; margin:0 0 10px;} #header #intro p {font-size:11px; line-height:17px;} #main {width:960px; margin:0 auto; padding:0 0 0;} #aside {width:188px; float:left;} #aside #agencies {padding:0 0 10px;} #aside #agencies li {padding:10px 0 0;} #aside #agencies h4 {background:url(../images/bgd_accordion.png) no-repeat left -135px; font-weight:bold; color:#546169; font-size:14px; text-transform:uppercase; cursor:pointer; padding:8px 35px 6px 18px; height:18px;} #aside #agencies .ui-state-default {background-position:left -135px;} #aside #agencies .ui-state-hover {background-position:left -168px;} #aside #agencies .ui-state-active {background-position:left -102px; color:#FFFFFF;} #aside #agencies div {background:url(../images/bgd_contAccordion.png) no-repeat left bottom; padding:9px; color:#908f90; font-size:12px; font-weight:bold; display:block; overflow:auto;} #aside #agencies a {color:#de6323; text-decoration:none;} #aside #agencies .right a {font-size:10px; color:#93a5b0; background:url(../images/ico.png) no-repeat right 6px; text-decoration:none; padding:0 9px 0 0;} #content {width:760px; float:right; padding:0;} #breadcrumb {color:#3b4349; background:url(../images/bgd_breadcrumb.png) no-repeat right bottom; padding:0 0 10px 10px;} #breadcrumb span, #breadcrumb .last {color:#908f90;} #breadcrumb a {color:#3b4349; text-decoration:none;} #cont-wrap {background:url(../images/bgd_cont.png) no-repeat right top; padding:0 8px 0 0;} #cont {padding:10px; background:#FFFFFF; width:732px; color:#3b4349; position:relative; overflow: hidden; } #footer-wrap {background:#2C363C url(../images/bgd_footer.png) repeat-x left top; padding:0 0 15px;} #skills-wrap {width:100%; border-bottom:1px solid #667179;} #skills {width:960px; margin:0 auto; overflow:hidden; display: none; } #skills dl {padding:30px 16px 0; width:208px; height:173px; float:left; display:block; background:url(../images/bgd_competences.png) no-repeat left top;} #skills dt {color:#fffefe; font-size:20px; font-style:italic; margin:0 0 25px; display:block; overflow:hidden; width:100%;} #skills dt img {float:left;} #skills dd {color:#bebebe; font-size:12px; background:url(../images/ico_competences.png) no-repeat right top; padding:0 85px 17px 0;} #skills dd a {color:#bebebe; text-decoration:none;} #skills .design dd {background-position:137px top; padding:0 85px 40px 0;} #skills .dev dd {background-position:-163px top; padding:0 85px 35px 0;} #skills .webmarketing dd {background-position:-472px top;} #skills .hosting dd {background-position:-792px top;} #footer {width:960px; margin:0 auto; overflow:hidden; padding:20px 0;} #footer .footer-nav {padding:0 9px; width:222px; float:left;} #footer h5 {color:#de6323; font-weight:bold; font-size:12px; margin:0 0 7px;} #footer li, #footer p {color:#ffffff; font-size:11px;} #footer a {color:#ffffff; font-size:11px; text-decoration:none;} #footer a:hover {color:#bebebe;} #copyright {background:#1d2225; text-align:center; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:28px; height:29px;} #extranet {position:fixed!important; position:absolute; right:0; top:100px; display:block; font-size:18px; color:#ffffff; font-weight:bold; text-decoration:none; z-index:15;} /* ----------------------------------------- * Eléments récurrents * ------------------------------------------*/ .form {background:#FFFFFF url(../images/bgd_form.png) no-repeat left top; padding:25px 20px; margin:0 auto; width:655px; /* width: 668px; */ position:relative; overflow: hidden; } .form .num {position:absolute; top:9px; left:50%; background:url(../images/bgd_highlight_number.png) no-repeat left top; padding:5px 0 0; margin:0 0 0 -35px; width:71px; height:32px; display:inline-block; color:#FFFFFF; font-size:18px; text-align:center;} .form legend {color:#de6323; font-size:20px; text-align:center; width:100%; padding:25px 0 15px;} .form .col-left {width:40%; float:left;} .form .col-left p span i{ font: italic normal 11px sans-serif } .form .col-right {width:57%; float:right;} .form .col-right p{ font: normal 12px arial} .form label {color:#6b7c87; font-size:13px; line-height:15px; margin:0 0 3px; display:block;} .form input {border:1px solid #cdd1d4; padding:0 2px; width:115px; height:18px; font-size:12px; line-height:18px; color:#6b7c87; font-family:"Trebuchet MS", "Lucida Sans", Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif;} .form #file {height:auto;} .form .radio {border:none; padding:0; width:auto;} .form .radio li {background:none; padding:0;} .form .checkbox {border:none; padding:0; width:auto;} .form textarea {border:1px solid #cdd1d4; padding:0 2px; font-size:12px; color:#6b7c87; font-family:"Trebuchet MS", "Lucida Sans", Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif;} .form #file {width:auto;} .form .error {background:url(../images/ico_alert.png) no-repeat 94% top;} .form .msg-form.error {background-position:98% top;} .form .error input, .form .error textarea {border-color:#F89C00;} .form .errors {width:100%; overflow:hidden; margin:0 0 20px; /*width:260px; background:#FFFFFF; position:absolute; bottom:260px; right:0; padding:0 5px; border:1px solid #EFF1F2;*/} .form .errors li {border-bottom:1px dotted #F89C00; background:url(../images/ico_alert.png) no-repeat 3px 4px; padding:3px 3px 3px 23px; color:#6B7C87; line-height:17px;} .form .errors li.last {border-bottom:none;} .paginator {font-size:15px; line-height:21px; color:#abbbc5;} .paginator a {color:#abbbc5; text-decoration:none; height:21px; width:21px; overflow:hidden; display:inline-block; text-align:center;} .paginator span {color:#484e53; font-weight:bold; height:21px; width:21px; overflow:hidden; display:inline-block; text-align:center;} .paginator .sep {color:#abbbc5; font-weight:normal; width:auto; overflow:hidden; display:inline-block; text-align:center;} .paginator .next-page, .paginator .previous-page {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:inline-block; overflow:hidden; padding:0;} .paginator .next-page {background-position:right bottom;} .paginator a:hover.previous-page {background-position:left bottom;} .paginator a:hover.next-page {background-position:right top;} /* ----------------------------------------- * Les pages internes * ------------------------------------------*/ /* home.php */ /* Slideshow */ #slider-shadow{background: url(../images/bgd_slideshow_shadow.png) no-repeat left bottom; padding:0 0 19px; width:760px; height:345px;} #slide-prez {position:relative; overflow:hidden; padding:3px; width:753px; height:339px; background:url(../images/bgd_slideshow.png) no-repeat left top;} #slide-prez .preload {height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF} #slide-prez .preload div {height:100%; width:100%; background:transparent url(../images/ico_loader.gif) no-repeat scroll 50% 50%;} #slide-prez .cont-slide {position:relative; height:339px; width:753px; overflow:hidden;} #slide-prez #wrapper-slide {overflow:hidden; position:absolute;} #slide-prez #wrapper-slide li {overflow:hidden; float:left; position:relative;} /* Navigation du Slideshow */ #slide-prez .nav-wrapper-slide {position:absolute; bottom:0; left:50%; margin:0 0 0 -59px; background:url(../images/bgd_slideshow_nav.png) no-repeat left top; padding:5px 0 0; width:119px; height:19px;} #slide-prez .nav-slide-outer {position:relative; z-index:10; height:19px; width:119px; overflow:hidden; color:#FFF; margin:0 auto 0; display:block;} #slide-prez #nav-slide {position:absolute; top:0; width:100%;} #slide-prez #nav-slide li {background:url(../images/ico_slideshow_nav.png) no-repeat center -27px; text-indent:-9999em; width:20px; height:13px; cursor:pointer; overflow:hidden; float:left; display:block; text-align:center;} #slide-prez #nav-slide li.active, #slide-prez #nav-slide li:hover {background-position:center top; color:#000; display:block;} #slide-prez .link {background:url(../images/bgd_all_real.png) no-repeat right top; position:absolute; right:3px; bottom:9px; padding:6px 5px 0 0; height:31px; width:160px; text-align:right;} #slide-prez .link a {font-size:11px; line-height:12px; color:#657078; text-decoration:none; background:url(../images/ico_arrow.png) no-repeat right 6px; display:block; padding:0 12px 0 0;} #slide-prez .link a:hover {background-position: right -39px; color:#E36423;} /* Mise en avant */ #highlights {width:100%; overflow:hidden;} /* Slide clients */ #slide-clients {position:relative; overflow:hidden; width:265px; height:210px; float:left; padding:18px 0 0;} #slide-clients .cont-slide {position:relative; height:165px; width:265px; overflow:hidden;} #slide-clients .wrapper-slide {overflow:hidden; position:absolute;} #slide-clients .wrapper-slide li {overflow:hidden; float:left; position:relative; width:265px;} #slide-clients .wrapper-slide li img {float:left; margin:0 9px 5px 0;} #slide-clients h3 {font-size:18px; color:#de6323; margin:0 0 15px;} #slide-clients .slide-nav {position:absolute; right:15px; top:20px;} #slide-clients .slide-nav li {float:left; margin:0 0 0 3px;} #slide-clients .ico-prev, #slide-clients .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden;} #slide-clients .ico-next {background-position:right bottom;} #slide-clients a:hover.ico-prev {background-position:left bottom;} #slide-clients a:hover.ico-next {background-position:right top;} /* Système d'onglets */ #tabs {background:url(../images/bgd_content_tabs.png) no-repeat left 51px; padding:0 13px 15px; width:480px; float:left;} .ui-tabs-nav, #tabs ul {overflow:hidden; width:100%;} #tabs .ui-tabs-nav li {font-size:18px; float:left; margin:0 4px 0 0; padding:23px 0 6px; height:24px; text-align:center;} #tabs .ui-tabs-nav li.ui-tabs-selected, #tabs li.ui-tabs-selected {padding:18px 0 6px; height:29px;} #tabs .ui-tabs-nav li.news, #tabs li.news {background:url(../images/bgd_tabs.png) no-repeat left top; width:118px;} #tabs .ui-tabs-nav li.news.ui-tabs-selected {background-position:left -106px;} /*.ui-tabs-nav li.news.ui-state-hover {background-position:left -53px;}*/ #tabs .ui-tabs-nav li.crew, #tabs li.crew {background:url(../images/bgd_tabs.png) no-repeat -122px top; width:110px;} #tabs .ui-tabs-nav li.crew.ui-tabs-selected {background-position:-122px -106px;} /*.ui-tabs-nav li.crew.ui-state-hover {background-position:-122px -53px;}*/ #tabs .ui-tabs-nav li.vision, #tabs li.vision {background:url(../images/bgd_tabs.png) no-repeat -236px top; width:136px;} #tabs .ui-tabs-nav li.vision.ui-tabs-selected {background-position:-236px -106px;} /*.ui-tabs-nav li.vision.ui-state-hover {background-position:-261px -53px;}*/ #tabs .ui-tabs-nav li a {text-decoration:none; color:#7e8f9c;} #tabs .ui-tabs-nav li.ui-tabs-selected a {color:#de6323;} #tabs .ui-tabs .tab-content, #tabs .tab-content {padding:30px 17px 0;} .ui-tabs .ui-tabs-hide {display: none;} /* Slider dans les onglets */ .slide-tab {position:relative; overflow:hidden; width:449px; margin:0 auto;} .slide-tab .cont-slide {position:relative; height:130px; width:407px; overflow:hidden; margin:0 auto;} .slide-tab .wrapper-slide {overflow:hidden; position:absolute;} .slide-tab .wrapper-slide li {overflow:hidden; float:left; position:relative; width:177px; padding:0 11px;} .slide-tab .ico-prev, .slide-tab .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden; position:absolute; top:45px;} .slide-tab .ico-prev {left:0;} .slide-tab .ico-next {background-position:right bottom; right:0;} .slide-tab a:hover.ico-prev {background-position:left bottom;} .slide-tab a:hover.ico-next {background-position:right top;} .slide-tab .link {background:url(../images/bgd_all_real.png) no-repeat right bottom; padding:9px 5px 0 0; height:20px; width:160px; text-align:right; float:right;} .slide-tab .link a {font-size:11px; line-height:12px; color:#657078; text-decoration:none; background:url(../images/ico_arrow.png) no-repeat right 2px; display:block; padding:0 12px 0 0;} .slide-tab .link a:hover {color:#e36423; background-position:right -43px;} .slide-tab h4 {font-size:14px; line-height:14px; font-weight:bold; color:#3898db; margin:0 0 8px;} .slide-tab p {font-weight:bold; color:#908f90; line-height:14px;} .slide-tab p a {color:#3898db; font-weight:bold;} #slide-solutions .cont-slide {height:170px;} #slide-solutions .wrapper-slide li {overflow:hidden; float:left; position:relative; width:385px; padding:0 11px;} #slide-solutions p { margin:0 0 5px;} #slide-ecommerce .cont-slide {height:140px;} #slide-ecommerce .wrapper-slide li {overflow:hidden; float:left; position:relative; width:385px; padding:0 11px;} #slide-ecommerce p { margin:0 0 5px;} /* Success Stories */ #stories {float:right; padding:18px 0 0;} #stories h3 {font-size:18px; color:#de6323; text-align:center; margin:0 0 3px;} .bubble {background:url(../images/test.png) no-repeat center top; padding:0 9px; width:168px;} .bubble dl {background:url(../images/bgd_bubble.png) no-repeat left top; padding:2px; width:157px; margin:0 auto;} .bubble dt {background:url(../images/bgd_ttl_bubble.png) no-repeat left top; color:#FFFFFF; font-weight:bold; font-size:26px; text-align:center;} .bubble dd {color:#FFFFFF; font-size:12px; font-weight:bold; padding:6px;} .bubble .logo {background:url(../images/bgd_bubble.png) no-repeat left -160px; padding:30px 2px 20px; width:157px; margin:0 auto; text-align:center;} .video dt {font-size:20px; line-height:30px;} .video dd {padding:1px; position:relative; overflow:hidden; width:155px; height:109px;} .video dd img {float:left;} .video dd span {background:url(../images/ico_success.png) no-repeat center center; display:block; width:100%; height:100%; position:absolute; top:0; left:0; cursor:pointer;} .video .logo {padding:25px 2px 20px;} /* Liste projets */ #list-projects {width:100%; overflow:hidden;} .project {padding:5px; float:left; background:#FFFFFF; border:1px solid #CCCCCC; width:346px; position:relative; overflow:hidden; margin:0 0 16px;} .project-hover {height:154px; width:346px; position: absolute; left: 5px; top: 5px; z-index: 2;} .project-hover.offscreen {left: -9999em; overflow: hidden;} .project-hover-bgd {background:#000000; height:154px; width:346px; position:absolute; top:0; left:0;} .project-hover.offscreen .project-hover-bgd {background:none;} .project-hover-content {padding:10px; width:326px; height:134px; position:absolute; left:0; top:0; z-index:1;} .project-hover-content a.desc {text-decoration:none; color:#FFF; font-weight:bold; text-transform:uppercase;} .project-hover-content ul {width:326px; overflow:hidden; position:absolute; bottom:10px; left:10px;} .project-hover-content li {width:49%; float:left;} .project-hover-content li a {font-weight:bold; color:#FFF;} .project img {float:left;} .project-info {background:#DFDFDF; position:absolute; bottom:5px; left:5px; padding:5px 10px; width:326px; height:36px; text-align:right;} .project-info h3 {font-weight:bold; font-size:14px; text-transform:uppercase;} .project-info a {color:#3898DB;} #cont-intro .paginator {position:absolute; top:29px; right:14px; width:190px; text-align:right;} #cont-intro .paginator a {color:#abbbc5; font-weight:normal;} #cont-footer .paginator {text-align:right; border-top: 2px solid #EFF1F2; padding: 10px 0 0; width:100%; display:block;} /* Liste tags */ #list-tags {width:100%; overflow:hidden;} #list-tags .tag {width:100%; background:#eff1f2; margin:0 0 16px; float:left; overflow:hidden; position:relative;} #list-tags .project {margin:0;} #list-tags .tag-desc {width:335px; float:right; padding:20px 20px 0 0;} #list-tags .tag-desc h3 {font-size:24px; line-height:18px; color:#6b7c87; margin:0 0 15px;} #list-tags .tag-desc p {font-size:13px; line-height:18px; color:#6b7c87;} #list-tags .btn-contact {text-align:center; width:140px; color:#FFFFFF; position:absolute; bottom:-3px; right:20px;} #list-tags .btn-contact span {background: url(../images/logo_shadow.png) no-repeat center -238px; display: block; height: 27px; width: 100%;} #list-tags .btn-hl {background:url(../images/btn_highlight.png) no-repeat left bottom; padding:0 0 0 12px; height:30px; color:#FFFFFF; font-weight:bold; font-size:14px;display:inline-block; text-decoration:none;} #list-tags .btn-hl span {background:url(../images/btn_highlight.png) no-repeat right bottom; padding:5px 11px 5px 0; width:auto; height:20px; display:inline-block;} #list-tags .btn-hl span span {background:url(../images/ico_btn_hl.png) no-repeat left 3px; padding:0 0 0 14px;width:auto; height:auto; display:inline-block; text-align:center; cursor:pointer;} /* Projets */ #cont-intro { margin:0 0 20px; padding:0 10px; } #cont-intro h3 {color:#33383b; font-size:38px; line-height:45px; } #cont-intro h4 {color:#444e56; font-size:20px; line-height:26px; margin:0 0 15px;} #cont-intro p {line-height:18px; margin:0 0 10px;} #cont-intro .site a {color:#de6323; font-size:13px; font-weight:bold; text-decoration:none;} #cont-intro .page-nav { width:42px; overflow:hidden; position:absolute; top:27px; right:210px; margin:0; padding:0;} #cont-intro .page-nav li {float:left; background:none; padding:0;} #cont-intro .ico-prev, #cont-intro .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden;} #cont-intro .ico-next {background-position:right bottom;} #cont-intro a:hover.ico-prev {background-position:left bottom;} #cont-intro a:hover.ico-next {background-position:right top;} #social {position:absolute; right:0; top:0; color:#6b7c87; font-weight:bold; background:url(../images/bgd_social.png) no-repeat left bottom; padding:11px 10px 13px 18px; width:171px;} #social li {background:url(../images/ico_social.png) no-repeat; padding:0 0 0 28px; line-height:26px;} #social .like {background-position:left 3px;} #social .fb {background-position:left -38px;} #social .twitter {background-position:left -81px;} #social .friend {background-position:left -125px;} #social a {color:#6b7c87; font-weight:bold; text-decoration:none;} #slide-project {position:relative; overflow:hidden; border-top:1px solid #e3e4e5; border-bottom:1px solid #e3e4e5; padding:1px 0; width:728px; height:487px; margin:0 0 13px;} #slide-project .preload {height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF} #slide-project .preload div {height:100%; width:100%; background:transparent url(../images/ico_loader.gif) no-repeat scroll 50% 50%;} #slide-project .cont-slide {position:relative; height:487px; width:596px; overflow:hidden; float:left;} #slide-project #wrapper-slide {position:absolute;} #slide-project #wrapper-slide li {overflow:hidden; position:absolute;} .lof-opacity li {position:absolute; top:0; left:0; float:inherit;} /* Navigation du Slideshow */ #slide-project .nav-wrapper-slide {float:right; padding:11px 0 0; width:120px; height:357px;} #slide-project .nav-slide-outer {position:relative; z-index:10; height:360px; width:120px; overflow:hidden; color:#FFF;} #slide-project #nav-slide {position:absolute; top:0; width:100%;} #slide-project #nav-slide li img {cursor:pointer;} #slide-project .ico-prev, #slide-project .ico-next {background:url(../images/ico_big_arrows.png) no-repeat center top; width:129px; height:56px; text-indent:-9999em; display:block; overflow:hidden; outline:none;} #slide-project .ico-next {background-position:center bottom;} #details {background:#eff1f2; padding:32px; font-size:13px; line-height:16px; color:#6b7c87; width:668px; position:relative; min-height:65px; height:auto!important; height:65px;} #details .content {width:464px;} #details p {margin:0 0 20px;} #details p.last {margin:0;} #details p a {color:#6b7c87;} #details .content ul {margin:0 0 15px; line-height:15px; padding:0 0 0 10px;} #details .content ul li {background:url(../images/ico_list.png) no-repeat left 6px; padding:0 0 3px 8px;} #tags-wrap {position:absolute; top:15px; right:15px; background:#FFFFFF url(../images/bgd_tagsWrap.png) no-repeat left bottom; width:207px; padding:0 0 10px;} #tags {background:#FFFFFF url(../images/bgd_tagsWrap.png) no-repeat left top; padding:27px 27px 0 10px;} #tags h4 {color:#389be0; font-size:20px; background:url(../images/bgd_tagsWrap.png) no-repeat -215px top; padding:0 0 0 27px; margin:0 0 15px;} #tags ul {width:100%; overflow:hidden;} #tags li {float:left; margin:0 3px 7px 0;} #tags a {color:#6b7c87; font-weight:bold; text-decoration:none; background:url(../images/bgd_tag.png) no-repeat left top; padding:0 0 0 2px; display:inline-block;} #tags a span{color:#6b7c87; font-weight:bold; line-height:18px; cursor:pointer; background:url(../images/bgd_tag.png) no-repeat right top; padding:0 5px 0 3px; display:inline-block; white-space:nowrap;} /* Interne */ #cont-intro.large {width:712px;} #cont-intro.large h3 {width:auto;} #cont-intro.tag h3 {width:auto;} #cont-intro big {font-size:16px; color:#788691; line-height:19px;} #cont-intro a {color:#3898db; font-weight:bold;} #cont-intro ul {margin:0 0 15px; line-height:15px; padding:0 0 0 10px;} #cont-intro ul li {background:url(../images/ico_list.png) no-repeat left 6px; padding:0 0 3px 8px;} /* Pour deux colonnes dans la partie intro (IE6) */ .cols {width:auto!important;} .cols h4 {width:515px;} .cols .fix-illus {margin:30px 0 0 18px!important;} .cols.mobile h4 {width:auto;} #inner-nav {position:absolute; right:0; top:1px; color:#6b7c87; font-weight:bold; background:url(../images/bgd_social.png) no-repeat left bottom; padding:11px 10px 13px 18px; width:171px;} #inner-nav p {color:#6b7c87; font-size:13px; line-height:16px; font-weight:bold; text-align:center; margin:0 0 5px;} #inner-nav ol {width:168px; margin:0 auto;} #inner-nav li {width:100%; float:left;} #inner-nav a {text-decoration:none; font-size:13px; color:#6b7c87; padding:2px 0; display:block;} #inner-nav a span {background:url(../images/ico_innerNav.png) no-repeat left -44px; font-size:12px; font-weight:bold; color:#FFFFFF; display:inline-block; width:21px; height:20px; line-height:20px; text-align:center;} #inner-nav a:hover, #inner-nav .active a {color:#de6323;} #inner-nav a:hover span, #inner-nav .active a span {background-position:left -1px;} .pic {padding:6px; background:#d8dde0; display:inline-block; width:auto;} .pic img {border:1px solid #eaedee; float:left;} .pic-blank {padding:6px; display:inline-block;} .pic.flright, .pic-blank.flright {margin:0 0 0 18px;} .pic.flleft, .pic-blank.flleft {margin:0 18px 0 0;} .pic.large {margin:0 auto 15px;} .pic.large img {margin:0 auto; float:none;} /* Gestion de la colonne de droite sur les pages de contenu (largeur spécifique) */ .two-columns-r {float:right; width:335px;} .fake-margin {margin:15px 0 0;} /* Marge pour les visuels des pages avec nav interne */ .fix-illus {margin:40px 0 0 18px!important;} .cont-main {color:#6b7c87; padding:0 10px 10px;} .cont-main h4 {font-size:16px; color:#de6323; margin:15px 0 10px; font-weight:bold;} .cont-main h5 {font-size:13px; text-decoration:none; margin:0 0 5px;} .cont-main p {margin:0 0 15px; line-height:17px;} .cont-main p.enlight {font-size:14px; font-weight:bold; color:#3898db;} .cont-main p.thinner {width:535px;} .cont-main ul, .cont-main ol {margin:0 0 15px; line-height:15px; padding:0 0 0 10px;} .cont-main ul li {background:url(../images/ico_list.png) no-repeat left 6px; padding:0 0 3px 8px; zoom:1;} .cont-main .big-list li {padding:0 0 8px 8px; zoom:1;} .cont-main .two-columns ul li, .cont-main .two-columns-r ul li {width:auto;} .cont-main ol li {padding:0 0 3px 8px; zoom:1;} .cont-main .clearPic {clear:both;} .cont-main .clearList {margin:0 18px 15px 0;} .cont-main a {font-weight:bold; color:#3898db;} .cont-main ul#mskill {margin-bottom:2px;} #cont .highlights {background:#eff1f2; padding:10px; margin:0 0 10px;} #cont .highlights .legend {color:#6b7c87; font-size:16px; line-height:25px; margin:0; text-align:center;} #cont .highlights ol {width:690px; margin:0 auto; overflow:hidden;} #cont .highlights ol li {background:url(../images/bgd_highlight.png) no-repeat left top; padding:55px 28px 18px; margin:0 0 5px; width:289px; position:relative; float:left;} #cont .highlights ol li .num {position:absolute; top:7px; left:50%; background:url(../images/bgd_highlight_number.png) no-repeat left top; padding:5px 0 0; margin:0 0 0 -35px; width:71px; height:32px; display:inline-block; color:#FFFFFF; font-size:18px; text-align:center;} #cont .highlights ol li h3, #cont .highlights ol li h3 a {font-size:20px; color:#de6323; text-align:center; line-height:21px; margin:0 0 10px; text-decoration:none;} #cont .highlights ol li p {margin:0; text-align:justify; color:#6b7c87; line-height:15px;} #cont .highlights ol li a {font-weight:bold; color:#3898db;} #cont .highlights ol li.large {background:url(../images/bgd_highlight.png) no-repeat left -456px; padding:55px 28px 18px; margin:0 0 5px; width:632px; position:relative; float:left;} #cont .highlights ol li.large .num {top:11px; left:85px; margin:0;} #cont .highlights ol li.large h3 {float:left; width:185px;} #cont .highlights ol li.large p {float:right; width:430px; margin:-25px 0 0;} #cont .highlights .btn-hl {background:url(../images/btn_highlight.png) no-repeat left top; padding:0 0 0 5px; height:45px; color:#FFFFFF; font-weight:bold; font-size:14px;display:inline-block; text-decoration:none;} #cont .highlights .btn-hl span {background:url(../images/btn_highlight.png) no-repeat right top; padding:5px 11px 5px 0; height:35px; display:inline-block;} #cont .highlights .btn-hl span span {background:url(../images/ico_btn_hl.png) no-repeat left 3px; padding:0 0 0 11px; height:auto; display:inline-block; text-align:center; cursor:pointer;} #cont .highlights .absolute-btn {position:absolute; right:28px; bottom:8px;} #cont #contextual {padding:20px;} #cont #contextual h4 {font-size:20px; color:#3898db;} #cont #list-contextual {float:right; overflow:hidden;} #cont #list-contextual li {background:url(../images/bgd_list_contextual.png) no-repeat left top; padding:6px 6px 30px; width:66px; float:left; margin:0 0 0 5px; display:inline-block; } .cont-main #skills-list {margin:0 0 0 10px; display:inline-block;} .cont-main #skills-list ul {margin:0 0 20px;} .cont-main .context {background:#eff1f2; padding:15px 6px 6px; margin:0 0 20px;} .cont-main .context h4 {padding:0 10px;} .cont-main .context p {padding:0 10px;} .cont-main .context ul {padding:0; margin:0;} .cont-main .context li {background:#FFFFFF; font-weight:bold; padding:10px; margin:0 0 3px;} /* Offres serveurs dédiés */ .prez-offers {width:365px; float:left;} #cont-intro .prez-offers p {margin:10px 0 15px;} .details-offers {width:338px; padding:10px 0 0; background:url(../images/bgd_details_offers.png) no-repeat left top; float:right;} .details-offers div {padding:0 15px 10px; width:308px; background:url(../images/bgd_details_offers.png) no-repeat left bottom;} .details-offers h5 {font-size:21px; text-align:center; margin:0 0 10px;} .details-offers h5 span {background:url(../images/ico_ttl_offers.png) no-repeat left 4px; padding:0 0 0 30px;} .details-offers h5 strong {color:#df7802;} #cont-intro .details-offers ul {width:45%; margin:0;} .details-offers li {color:#6b7c87; font-size:13px; line-height:22px; background:url(../images/ico_list_offers.png) no-repeat left 7px; padding:0 0 0 9px;} #cont-intro .details-offers p {margin:0; padding:5px 0 0; clear:both;} /* Tableau des offres */ #table-offers {width:728px; margin:0 0 5px;} #table-offers thead th, #table-offers thead td {color:#eff1f2; font-size:15px; line-height:22px; vertical-align:middle; border-left:1px solid #82888d; text-align:center; background:url(../images/bgd_table_offer.png) no-repeat left top; height:37px;} #table-offers thead td {width:123px; border:none;} #table-offers thead #start {width:120px; background-position:-124px top;} #table-offers thead #basic {width:120px; background-position:-245px top; border-color:#888f94;} #table-offers thead #bronze {width:120px; background-position:-366px top; border-color:#8e969b;} #table-offers thead #silver {width:120px; background-position:-487px top; border-color:#949da3;} #table-offers thead #gold {width:120px; background-position:-608px top; border-color:#99a4aa;} #table-offers tbody th, #table-offers tbody td {border-top:1px solid #bbcbd6; font-size:13px; line-height:26px;} #table-offers tbody th {color:#6b7c87; padding:0 0 0 10px;} #table-offers tbody th a {color:#6b7c87; text-decoration:none;} #table-offers tbody .table-header {color:#33383b; font-weight:bold; background:#bbcbd6; border-top:5px solid #FFFFFF;} #table-offers tbody .table-header a {color:#33383b; text-decoration:none;} #table-offers tbody td {text-align:center; color:#33383b;} #table-offers tbody td a {color:#33383b;} #table-offers tbody td.even {background:#eff1f2;} #table-offers tbody .price td {color:#d77100; font-size:20px; border:none; padding:10px 0;} #table-offers tbody .price th {border:none;} /* Identité visuelle & Webdesign */ .visual-wrap {background:url(../images/bgd_visual_id.png) no-repeat left top; padding:8px 0 0;} .visual {background:url(../images/bgd_visual_id.png) no-repeat left bottom; padding:0 8px 8px; width:716px;} .visual-display {background:#364a55 url(../images/bgd_visual_display.jpg) no-repeat left top; padding:25px; width:666px; position:relative;} .visual-display h4 {color:#FFFFFF; font-size:33px; position:absolute; width:185px; text-align:center; left:0; top:18px;} .visual-display h4 span {background: url(../images/logo_shadow.png) no-repeat center top; display: block; height: 27px; width: 100%;} .visual-display .visual-intro {float:right; width:505px;} .visual-display p {color:#a7aaab; line-height:17px; margin:0 0 15px;} .visual-display p strong {color:#FFFFFF;} /* Identité visuelle */ #visual .first-col {width:309px;} #visual .second-col {width:321px;} #visual .panel p span {font-weight:bold; background:#32414b; color:#FFFFFF; padding:0 4px;} #roundabout-visual {} #roundabout-visual #round-description {display:inline-block; float:left; padding:50px 0 0 10px; width:150px;} #roundabout-visual #round-description dt {font-size:16px; color:#FFFFFF; margin:0 0 10px;} #roundabout-visual #round-description a {color:#b5baba; text-decoration:none; background:url(../images/ico_link_roundabout.png) no-repeat left 2px; padding:0 0 0 12px;} #roundabout-visual #round-wrap {width:505px; float:right;} #round-logos {width: 315px; height: 213px; margin:0 auto;} #round-logos .roundabout-moveable-item {height: 15em; width: 15em; cursor: pointer; text-align:center;} #round-logos .roundabout-moveable-item img {width: 100%; height:100%;} #round-logos .roundabout-moveable-item span {width:100%; height:100%;} #round-logos .roundabout-moveable-item a {outline:none;} #round-logos .roundabout-in-focus {cursor: auto;} #visual-accordion {padding:30px 0 10px; width:728px;} #visual-accordion h3 {font-size:24px; color:#33383b; margin:0 0 10px;} #visual-accordion h4 {background:url(../images/bgd_accordion.png) no-repeat left -33px; font-weight:bold; color:#546169; font-size:14px; text-transform:uppercase; cursor:pointer; padding:8px 35px 6px 18px; height:18px; margin:10px 0 0; outline:none;} #visual-accordion .ui-state-default {background-position:left -33px;} #visual-accordion .ui-state-hover {background-position:left -66px;} #visual-accordion .ui-state-active {background-position:left top; color:#FFFFFF;} #visual-accordion div {background:#eff1f2 url(../images/bgd_packaging.png) repeat-x left bottom; margin:0 0 6px; padding:9px; color:#6b7c87; font-size:12px; display:block; overflow:auto;} #visual-accordion div big {font-size:15px; line-height:18px;} #visual-accordion div p {line-height:14px;} #visual-accordion .cards {} #visual-accordion .cards p {margin:0 0 15px;} #visual-accordion .cards img {float:left; margin:0 15px 0 0;} #visual-accordion .packaging {padding:9px 9px 0; width:710px;} #visual-accordion .packaging .slideshow {float:right; padding:0;} #visual-accordion .packaging .packaging-illus-footer {position:relative; bottom:-9px; left:-9px;} #visual-accordion .packaging p {margin:0 0 15px;} #visual-accordion .commercial {padding:9px 0;} #visual-accordion .commercial p {padding:0 9px 15px; border-bottom:1px solid #FFF;} #visual-accordion .commercial .slideshow {background:#F1F2F4 url(../images/bgd_slideNL.png) repeat-y center top; border-bottom: 1px solid #D6D9DA; border-top: 1px solid #EDF0F1; text-align:center; padding:0; margin:0;} /* Webdesign - Navigation par onglets */ #tabs-webdesign {width:100%; position:relative; padding:34px 0 0;} #tabs-nav {width:635px; overflow:hidden; height:34px; position:absolute; top:4px; left:45px;} #tabs-nav li {float:left;} #tabs-nav a {height:34px; padding:0 0 0 6px; display:inline-block; background:url(../images/bgd_webdesign_tabs.png) no-repeat left bottom; font-weight:bold; font-size:13px; line-height:18px; color:#546169; text-transform:uppercase; text-decoration:none;} #tabs-nav span {padding:10px 20px 0 14px; height:24px; background:url(../images/bgd_webdesign_tabs.png) no-repeat right bottom; display:inline-block; cursor:pointer;} #tabs-nav .ui-state-active a {background-position:left top; color:#FFFFFF;} #tabs-nav .ui-state-active span {background-position:right top;} /* Webdesign - Affichage du paneau + D'infos */ .panel-wrap {padding:3px 3px 0; width:710px; background:#4d5459 url(../images/bgd_slide_panel.png) repeat-x left top; position:relative; display:block;} .panel {background:#5f656a url(../images/bgd_panel.png) repeat-x left top; border-top:1px solid #656b6d; padding:0 30px 35px; width:650px; display:none; position:relative;} .panel .first-col {float:left;} .panel .second-col {float:right;} .panel h4 {text-align:center; font-size:16px; line-height:24px; color:#FFFFFF; width:100%; position:relative; top:-1px; margin:0 0 30px;} .panel h4 span {background:#32414b; border-bottom:1px solid #242f37; display:inline-block; padding:0 9px;} .panel p {color:#b7babc; margin:0 0 10px; line-height:14px;} .panel p strong {color:#FFFFFF;} .panel ul {padding:0 0 0 8px; margin:0 0 10px; line-height:14px;} .panel li {color:#b7babc; background:url(../images/ico_list.png) no-repeat left 6px; padding:0 0 0 8px;} .fire-panel {position:absolute; bottom:0; text-align:center; margin:0; width:100%; display:block;} .fire-panel a {background:url(../images/bgd_fire_panel.png) no-repeat left top; display:inline-block; font-weight:bold; text-decoration:none; text-align:center; text-transform:uppercase; font-size:13px; line-height:18px; color:#546169; padding:4px 0 0; height:18px; width:112px; outline:none;} .fire-panel span {background:url(../images/ico_panel.png) no-repeat left -36px; padding:0 0 0 14px; display:inline-block; cursor:pointer;} .fire-panel .active span {background:url(../images/ico_panel.png) no-repeat left 6px; padding:0 0 0 18px;} /* Webdesign - Lignes graphiques */ #graphic-line .visual-display {background:#364a55 url(../images/bgd_visual_display_big.jpg) no-repeat left top;} #graphic-line .visual-display h4 {width:204px;} #graphic-line .visual-intro {width:480px;} #graphic-line .first-col {width:245px;} #graphic-line .second-col {width:375px;} #roundabout-graphic-line {} #roundabout-graphic-line #round-description {display:inline-block; float:left; padding:35px 0 15px; height:50px; width:100%; text-align:center;} #roundabout-graphic-line #round-description dt {font-size:16px; color:#FFFFFF; margin:0 0 10px;} #roundabout-graphic-line #round-description a {color:#b5baba; text-decoration:none; background:url(../images/ico_link_roundabout.png) no-repeat left 2px; padding:0 0 0 12px;} #roundabout-graphic-line #round-wrap {width:666px;} #round-graphic-line {width: 350px; height: 354px; margin:0 auto;} #round-graphic-line li {position:absolute;} /*#round-graphic-line .roundabout-moveable-item {width:23.25em; height:22.25em; padding:1.16em 0.25em 3em; cursor: pointer; background:url(../images/gn.png) no-repeat center top;}*/ #round-graphic-line .roundabout-moveable-item {height: 26.8em; width: 27.3em; cursor: pointer; text-align:center;} #round-graphic-line .roundabout-moveable-item .shadow {width: 100%; height:13%; position:absolute; bottom:0; left:0;} #round-graphic-line .roundabout-moveable-item span {width:100%; height:13%; position:absolute; left:0; bottom:0; z-index:3;} #round-graphic-line .roundabout-moveable-item a {outline:none;} #round-graphic-line .roundabout-moveable-item .roundable {width:87%; height:89%; position:relative; top:0; z-index:25;} #round-graphic-line .roundabout-in-focus {cursor: auto;} /* Webdesign - Flash */ #flash-animation .visual-display h4 {width:345px;} #flash-animation .visual-intro {width:325px;} #flash-animation .first-col {width:49%;} #flash-animation .second-col {width:49%;} #flash-animation .explain {width:214px; float:right; color:#abacae; margin:20px 0 0;} #roundabout-flash {width:437px; float:left;} #roundabout-flash #round-description {display:inline-block; margin:0 auto; display:block; clear:both; padding:20px 0 0; height:50px; width:150px; text-align:center;} #roundabout-flash #round-description dt {font-size:16px; color:#FFFFFF; margin:0 0 10px; } #roundabout-flash #round-description a {color:#b5baba; text-decoration:none; background:url(../images/ico_link_roundabout.png) no-repeat left 2px; padding:0 0 0 12px;} #roundabout-flash #round-wrap {width:437px; float:left;} #round-flash {width: 250px; height: 199px; margin:0 auto;} #round-flash .roundabout-moveable-item {height: 16.58em; width: 17.25em; cursor: pointer; text-align:center;} #round-flash .roundabout-moveable-item img {width: 100%; height:100%;} #round-flash .roundabout-moveable-item span {width:100%; height:100%;} #round-flash .roundabout-moveable-item a {outline:none;} #round-flash .roundabout-in-focus {cursor: auto;} /* Webdesign - Newsletter */ .web-display {background:#eef1f2; padding:24px; width:668px; position:relative; border-bottom:1px solid #FFF;} .web-display h4 {color:#546169; font-size:33px; margin:0 0 10px;} .web-display h5 {color:#6b7c87; font-size:15px; margin:0 0 10px;} .web-display p {color:#6b7c87; line-height:18px; margin:0 0 15px;} .web-display p.last {margin:0;} .web-display-footer {background:#e5e8eb url(../images/bgd_nl_footer.png) no-repeat left top; padding:25px; width:666px; overflow:hidden;} .web-display-footer .col-left {float:left; width:392px;} .web-display-footer .col-right {float:right; width:260px;} .slide-nl {position:relative; overflow:hidden; padding:5px 0; width:716px; margin:0 auto; background:url(../images/bgd_slideNL.png) repeat-y left top; border-bottom:1px solid #d6d9da; border-top:1px solid #edf0f1;} .slide-nl .cont-slide {position:relative; height:532px; width:716px; overflow:hidden; margin:0 auto;} .slide-nl .wrapper-slide {overflow:hidden; position:absolute;} .slide-nl .wrapper-slide li {overflow:hidden; float:left; position:relative; width:716px; text-align:center;} .slide-nl .ico-prev, .slide-nl .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden; position:absolute; top:48%; z-index:5;} .slide-nl .ico-prev {left:50px;} .slide-nl .ico-next {background-position:right bottom; right:50px;} .slide-nl a:hover.ico-prev {background-position:left bottom;} .slide-nl a:hover.ico-next {background-position:right top;} /* Webdesign - Mini-Site */ .slide-mini {position:relative; overflow:hidden; padding:5px 0; width:716px; margin:0 auto; background:url(../images/bgd_slideNL.png) repeat-y left top; border-bottom:1px solid #d6d9da; border-top:1px solid #edf0f1;} .slide-mini .cont-slide {position:relative; height:468px; width:716px; overflow:hidden; margin:0 auto;} .slide-mini .wrapper-slide {overflow:hidden; position:absolute;} .slide-mini .wrapper-slide li {overflow:hidden; float:left; position:relative; width:716px; text-align:center;} .slide-mini .ico-prev, .slide-mini .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden; position:absolute; top:48%; z-index:5;} .slide-mini .ico-prev {left:50px;} .slide-mini .ico-next {background-position:right bottom; right:50px;} .slide-mini a:hover.ico-prev {background-position:left bottom;} .slide-mini a:hover.ico-next {background-position:right top;} .pp_overlay {background: #64737D; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; } .pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .ppt { color: #788691; display: none; font-size: 0; line-height:0; margin: 0 0 5px 15px; z-index: 9999; } .pp_pic_holder a:focus { outline: none } .pp_content_container { position: relative; text-align: left; width: 100%; background:#EFF1F2 url(../images/bgd_packaging.png) repeat-x left bottom; border:1px solid #FFFFFF;} .pp_fade { display: none } .pp_content_container .pp_details {float: left; width:100%; background:#FFF; overflow:hidden; margin:0; line-height:0;} .pp_content_container .pp_description {display:none; position:absolute; margin:0; font-size:0;} .pp_close { display: block; float:right; height:36px; width:32px; text-indent: -9999em; background:url(../images/ico_close.png) no-repeat left center; } .pp_loaderIcon { display: block; height: 40px; left: 50%; margin: -20px 0 0 -20px; position: absolute; top: 50%; width: 40px; background:#FFF url(../images/ico_loader.gif) no-repeat center; } .pp_bottom, .pp_top {display:none;} .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_expand {display:none;} #pp_full_res { line-height: 1 !important;} /* Nos Clients */ #clients .visual-display {background:#364a55 url(../images/bgd_visual_display_big.jpg) no-repeat left top; padding:25px 0; width:716px; } #clients .visual-display h4 {width:420px; padding:33px 0 0 6px;} #clients .visual-display .clients-intro {float:right; width:320px; padding:10px 0 0;} #clients .visual-display .clients-intro li {color:#adb5ba; background:url(../images/ico_list.png) no-repeat left 8px; padding:0 0 0 12px;} #our-clients {position:relative; overflow:hidden; width:716px; margin:0 auto; padding:51px 0 0;} #our-clients .cont-slide {position:relative; height:330px; width:716px; overflow:hidden; margin:0 auto;} #our-clients .wrapper-slide {overflow:hidden; position:absolute;} #our-clients .wrapper-slide li {overflow:hidden; float:left; position:relative; width:716px; text-align:center; background:url(../images/bgd_clients_shadow.png) no-repeat center bottom; padding:0 0 45px;} #our-clients .wrapper-slide li div {width:545px; margin:0 auto;} #our-clients .wrapper-slide li img {margin:0 15px 15px; float:left;} #our-clients .ico-prev, #our-clients .ico-next {background:url(../images/ico_nav.png) no-repeat left top; width:21px; height:21px; text-indent:-9999em; display:block; overflow:hidden; position:absolute; top:48%; z-index:5;} #our-clients .ico-prev {left:15px;} #our-clients .ico-next {background-position:right bottom; right:15px;} #our-clients a:hover.ico-prev {background-position:left bottom;} #our-clients a:hover.ico-next {background-position:right top;} /* Etapes projet */ #steps-accordion {padding:0 0 10px; width:728px;} #steps-accordion h4 {background:url(../images/bgd_accordion.png) no-repeat left -33px; font-weight:bold; color:#546169; font-size:14px; text-transform:uppercase; cursor:pointer; padding:8px 35px 6px 18px; height:18px; margin:10px 0 0; outline:none;} #steps-accordion .ui-state-default {background-position:left -33px;} #steps-accordion .ui-state-hover {background-position:left -66px;} #steps-accordion .ui-state-active {background-position:left top; color:#FFFFFF;} #steps-accordion div {background:#eff1f2 url(../images/bgd_packaging.png) repeat-x left bottom; margin:0 0 6px; padding:9px; color:#6b7c87; font-size:12px; display:block; overflow:auto;} #steps-accordion p.last {margin:0;} /* Actualités */ #list-news {width:100%; overflow:hidden;} #list-news .news {padding:20px; width:692px; background:#eff1f2; margin:0 0 16px; float:left; overflow:hidden; position:relative;} #list-news h4 {font-size:24px; line-height:18px; color:#6b7c87; margin:0 0 15px;} #list-news h4 a {color:#6b7c87; text-decoration:none;} #list-news .extract {padding:0 150px 0 0;} #list-news p {font-size:13px; line-height:18px; color:#6b7c87;} #list-news p a {color:#389BE0; font-weight:bold;} #list-news .btn-contact {text-align:center; width:130px; color:#FFFFFF; position:absolute; bottom:-3px; right:20px;} #list-news .btn-contact span {background: url(../images/logo_shadow.png) no-repeat center -238px; display: block; height: 27px; width: 100%;} #list-news .btn-hl {background:url(../images/btn_highlight.png) no-repeat left bottom; padding:0 0 0 12px; height:30px; color:#FFFFFF; font-weight:bold; font-size:14px;display:inline-block; text-decoration:none;} #list-news .btn-hl span {background:url(../images/btn_highlight.png) no-repeat right bottom; padding:5px 11px 5px 0; width:auto; height:20px; display:inline-block;} #list-news .btn-hl span span {background:url(../images/ico_btn_hl.png) no-repeat left 3px; padding:0 0 0 14px;width:auto; height:auto; display:inline-block; text-align:center; cursor:pointer;} .news {width:668px; overflow:hidden; margin:0 0 15px;} .news .news-img {float:right; padding:0 0 0 15px;} /* Success Stories */ .stories {padding:0 10px; width:712px; font-size:13px; line-height:16px; color:#6b7c87; position:relative; overflow:hidden; margin:0 0 20px;} .stories div {background:#eff1f2; padding:15px;} .stories h4 {font-weight:bold; margin:0 0 10px;} .stories p {margin:0 0 20px;} .stories p.last {margin:0;} .stories p a {color:#6b7c87;} .stories .source {background:url(../images/bgd_stories.png) no-repeat left top; padding:5px 10px 5px 40px; float:right;} .stories .source a {color:#3898DB; font-weight:bold;} .stories .img-source {line-height:36px;} .stories .img-source img {float:left; margin:0 5px 0 0;} /* Mentions */ .mentions {margin:0 0 15px;} #mentions-card {margin:0 0 10px;} #mentions-card dt {font-weight:bold;} .mentions p {margin:0;} /* Formulaire de contact */ #cont .form-contact {margin:40px 0 10px;} #cont .form-contact ul li input.ckeckbox{ border: none; } .form-contact .form {padding: 31px 20px 25px } .form .sign {background:url(../images/bgd_contact_sign.png) no-repeat left top; font-size:22px; color:#FFFFFF; padding:15px; width:282px; height:76px; text-align:center; position:absolute; top:-25px; left:180px;} .form .sign span {background: url(../images/logo_shadow.png) no-repeat center -280px; display: block; height: 27px; width: 100%; position:absolute; bottom:0; left:0;} .form .notice {font-size:15px; font-weight:bold; color:#6f7d86; background:#eeeeee; text-align:center; padding:5px; margin:0 0 10px;} .form .col-left h4, .form .col-right h4 { font: bold 14px arial; color: #ef8024; margin: 0 0 7px 0; } .form .email-form {margin:0 0 10px; position:relative;} .form .email-form input {width:247px;} .form .id-form {width:100%; margin:0 0 10px; position:relative; overflow: hidden; } .form .id-form div {float:left; padding:0 10px 0 0 } .form .coord-form {width:100%; margin:0 0 10px; position:relative } .form .coord-form div {float:left; padding:0 10px 0 0;} .form .coord-form #company {width:129px;} .form .coord-form #phone {width:100px;} .form .city-form {width:100%; margin:0 0 10px; position:relative } .form .city-form div {float:left; padding:0 10px 0 0 } .form .city-form #postalcode {width:67px;} .form .city-form #city {width:162px;} .form .msg-form {margin:0 0 10px } .form .msg-form textarea {width:370px; height:110px } .form .file-form {margin:0 0 10px } .form .file-form p {position:absolute } .form .btn {display:inline-block; width:140px; text-align:center; position:absolute; right:22px; bottom:7px;} .form .btn input {background:transparent url(../images/btn_send.png) no-repeat; color:#fefaed; font-weight:bold; font-size:16px; line-height:24px; text-decoration:none; display:inline-block; padding:5px 15px 5px 24px; width:110px; height:34px; text-align:left; margin:0 auto; border:none; cursor:pointer; overflow:visible; } .form .btn span {background:url(../images/logo_shadow.png) no-repeat center -237px; height:27px; display:block; margin:0 0 0; width:100%; position:static;} /* //////////////////////////////////////////////// Partie Jobs */ .underline { background: url(../images/bgd_underline.png) left bottom repeat-x } ul.radio li input{ width: auto; height: auto; } ul.radio li label{ display: inline; } .cont-main { position: relative; } .colonneGaucheInside { float: left; width: 306px ; padding: 16px 0 0 0; } #h3Wa h3{ width: 284px; } #h3Wa h4{ width: 284px; } #h3Wa #cont-intro{ width: 284px; } h3#w524 { width: 530px; } .colonneDroiteInside { float: left; width: 413px; padding: 16px 0 0 0; } .colonneDroiteInside2 { float: left; width: 401px; padding: 16px 0 0 15px; } .colonneDroiteInside .pseudoTableau { width: 380px; margin: 0 auto; } .colonneDroiteInside .pseudoTableau h4 strong { font: bold 12px verdana; color: #ed9009 } .colonneDroiteInside .line-bot { width: 376px; margin: 0 0 1px 0; background: url(../images/bgd_td-bot.png) left bottom no-repeat; overflow: hidden; clear: both; } .colonneDroiteInside .line { padding: 6px 0 6px 10px; width: 376px; min-height: 26px; background: url(../images/bgd_td.png) left top no-repeat; } .colonneDroiteInside .line-bot2 { width: 376px; margin: 0 0 1px 0; background: url(../images/bgd_td-bot2.png) left bottom no-repeat; overflow: hidden; clear: both; } .colonneDroiteInside .line a{ display: block; font: bold 12px arial; color: #78838b; text-decoration: none; background-color: transparent; cursor: pointer } .colonneDroiteInside .line a:hover{ } .colonneDroiteInside .annonceA { display: block; float: left; width: 290px; } .colonneDroiteInside .dateA { display: block; float: left; width: 48px; font: normal 10px sans-serif; color: gray ; padding: 0 } .colonneDroiteInside .annonce { display: block; float: left; width: 280px; padding: 0 0 7px 20px ; font: bold 12px arial; color: #ee930A } .colonneDroiteInside .date { display: block; float: left; width: 38px; padding: 0 0 7px 20px ; font: bold 12px arial; color: #ee930A } a.candidatureSpontanee { margin:15px auto 0 auto; width: 201px; height: 28px; background: url(../images/btn_candidature.png) left top no-repeat; text-indent: -5000px; display: block; overflow: hidden; } a.candidatureSpontanee:hover { width: 201px; height: 28px; background: url(../images/btn_candidature.png) left -29px no-repeat; text-indent: -5000px; display: block; } a.deposer { margin: 15px auto 0 auto; width: 168px; height: 28px; background: url(../images/btn_deposer.png) left top no-repeat; text-indent: -5000px; display: block; overflow: hidden; } a.deposer:hover { background: url(../images/btn_deposer.png) left -29px no-repeat; text-indent: -5000px; display: block; } a.postulez { margin: 15px auto 0 auto; width: 104px; height: 28px; background: url(../images/btn_postulez.png) left top no-repeat; text-indent: -5000px; display: block; overflow: hidden; } a.postulez:hover { background: url(../images/btn_postulez.png) left -29px no-repeat; text-indent: -5000px; display: block; } td.date { font: normal 10px sans-serif; color: gray; padding: 0 4px } .format { padding: 0 35px } .format ul { margin: 0 0 10px 0; } .format p { margin: 0 0 10px 0; } p.retour { position: absolute; right: 10px; top: 23px; } #bgd_decoration { color: #3B4349; height: 149px; background: url(../images/bgd_decoration.png) center bottom no-repeat; position: relative; width: 752px; overflow: hidden; } input#cv { font: normal 11px arial; height: auto; } p.centerbut { margin: 17px 0 0px 0; } .form .btn2 { display:inline-block; width:140px; text-align:center; float: right; position: static } .form .btn2 input { background:transparent url(../images/btn_send.png) no-repeat; color:#fefaed; font-weight:bold; font-size:16px; line-height:24px; text-decoration:none; display:inline-block; padding:5px 15px 5px 24px; width:110px; height:34px; text-align:left; margin:0 auto; border:none; cursor:pointer; overflow:visible; } .form .btn2 span { background:url(../images/logo_shadow.png) no-repeat center -237px; height:27px; display:block; margin:0 0 0; width:100%; position:static;} .colGaucheInside {float: left; width: 315px; padding: 0 20px; display: inline-block } .colDroiteInside { float: left; width: 315px ; padding: 0 20px ; display: inline-block } #cont-intro p.visu { margin: 33px 0 0 15px; padding: 0 0 0 0; float: right; } .bloc-1 { float: left; width: 357px; } .centerbut { padding: 15px 0 0 0; clear: both; } /* CV */ .id-form2 { background-color: #eff1f2; border: 1px solid #c2c2c2; padding: 10px ; clear: both; padding-bottom:46px; overflow: hidden; } .id-form2 span{ display: block; float: left; margin: 0 27px 0 0; } .id-form2 span input{ border: 1px solid #c0c6c9 ; background-color: #f0ad30; font: bold 12px arial; color: #fff; position: relative; top:19px; left:0; } .form #mskill div{ float: left; width: 109px; } .form #mskill div.second{ float: left; width: 260px; } .form #mskill li{ clear: both; overflow: hidden; } .form #mskill strong{ margin: 0 0 7px 0; display: block; } .form #mskill label{ display: inline } /*.form #mskill label{ display: block } .form #mskill label.type{ width: 110px; } .form #mskill label.level{ width: 40px; } */ #mskill input{ width:20px; border: 1px solid #CDD1D4; } /* Témoignages */ .colonneGaucheInside-tem { float: left; padding: 16px 0 0; width: 324px } .colonneDroiteInside-tem { float: left; padding: 16px 0 0 25px; width: 294px } .colonneGaucheInside-tem p, .colonneDroiteInside-tem p { font: italic normal 12px arial } /* Contact */ .frightVisu { float: right; } #cont.display-offers {background:#FFFFFF url(../images/bgd_decoration.png) no-repeat center bottom; padding:10px 10px 159px;} #intro-offers {width:264px; float:left; padding:0 0 0 15px;} #intro-offers #cont-intro {padding:0;} #intro-offers .cont-main {padding:0;} #offers {width:376px; float:right; padding:0 17px 0 0;} #offers h4 strong {color:#ed9009;} .list-offers {margin:0 0 15px; width:376px;} .list-offers li {margin:0 0 1px; width:100%; position:relative;} .list-offers a {background:url(../images/bgd_offers.png) no-repeat left top; display:block; font-weight:bold; color:#78838b; text-decoration:none; padding:3px 0 0;} .list-offers span {background:url(../images/bgd_offers.png) no-repeat left bottom; display:block; padding:0 20px 3px;} .list-offers-details span {padding:0 85px 3px 20px;} .list-offers .date {background:none; display:inline; padding:0; position:absolute; right:20px; top:3px; font-weight:normal; font-size:11px;} .list-offers a:hover {background-position:right top;} .list-offers a:hover span {background-position:right bottom;} /* Demande de devis */ .estimate-project-steps {} .estimate-project-steps h4 {border-bottom:2px solid #eff1f2; font-size:14px; line-height:15px; color:#6b7c87; font-weight:bold;} .estimate-project-steps h4 span {background:#eff1f2; padding:3px 15px; display:inline-block;} .estimate-project-steps ul {padding:10px 0 10px 15px;} .estimate-project-steps li {padding:0 0 5px; position:relative; width:100%;} .estimate-project-steps ul ul {padding:0;} .estimate-project-steps label {padding:0 0 0 18px;} .estimate-project-steps .radio {position:absolute; left:0; top:0; height:13px; width:13px;} .estimate-project-steps .sub-label {border-left:1px dotted #6B7C87; padding:0 0 0 5px;} .estimate-project-steps .sub-label label {display:inline-block; padding:0;} .estimate-project-steps .sub-label input {width:160px;} .step-1 {width:293px; float:left;} .step-2 {width:363px; float:right;} .step-2 .left-fields {width:205px; float:left; padding:10px 0 10px 15px;} .step-2 .right-fields {float:right; width:130px; padding:10px 0 10px 0;} .step-2 .right-fields .sub-label input {width:124px;} .step-3 {overflow:hidden;} .step-3 p {padding:10px 0 0 15px;} .step-3 .left-fields {width:320px; float:left; padding:10px 0 10px 15px;} .step-3 .right-fields {width:320px; float:right; padding:10px 0 10px 0;} .step-4 .left-fields {width:230px; float:left; padding:10px 0 10px 15px;} .step-4 .right-fields {width:400px; float:right; padding:10px 0 10px 0;} .step-3 label, .step-4 label {padding:0;} .step-5 {width: 62%; float:left;} .step-5 .company-form {margin:0 0 10px; position:relative;} .step-5 .company-form input {width: 300px;} .step-5 input {width: 142px;} .step-5 .city-form #city {width:217px!important;} .step-5 .coord-form #email {width:184px;} .form .msg-form-confirm {float:left; margin:0 0 25px;} .form .file-form-confirm {float:right; width:40%;} .form .btn-step1 {display:inline-block; width:184px; text-align:center; float:right;} .form .btn-step1 input {background:url(../images/btn_send.png) no-repeat left -58px; color:#fefaed; font-weight:bold; font-size:20px; line-height:24px; text-decoration:none; display:inline-block; padding:5px 15px 9px 16px; width:150px; height:42px; text-align:left; margin:0 auto; border:none; cursor:pointer; overflow:visible; } .form .btn-step1 span {background:url(../images/logo_shadow.png) no-repeat center 7px; height:27px; display:block; margin:0 0 0; width:100%; position:static;} .form .btn-step2 {display:inline-block; width:184px; text-align:center; float:left;} .form .btn-step2 input {background:url(../images/btn_send.png) no-repeat left -122px; color:#fbfbfb; font-weight:bold; font-size:20px; line-height:24px; text-decoration:none; display:inline-block; padding:5px 15px 9px 25px; width:105px; height:42px; text-align:left; margin:0 auto; border:none; cursor:pointer; overflow:visible; } .form .btn-step2 span {background:url(../images/logo_shadow.png) no-repeat center 7px; height:27px; display:block; margin:0 0 0; width:100%; position:static;} .form .btn-step5 {display:inline-block; width:285px; text-align:center; position:absolute; right:40px; bottom:132px;} .form .btn-step5 input {background:url(../images/btn_send.png) no-repeat left bottom; color:#fefaed; font-weight:bold; font-size:20px; line-height:24px; text-decoration:none; display:inline-block; padding:5px 15px 9px 12px; width:268px; height:66px; text-align:left; margin:0 auto; border:none; cursor:pointer; overflow:visible; } .form .btn-step5 span {background:url(../images/logo_shadow.png) no-repeat center -280px; height:27px; display:block; margin:0 0 0; width:100%; position:static;} /* Contact agence */ .agency {} .prez-agency {padding:0 0 35px 10px; background:url(../images/bgd_prez_agency.png) repeat-x left bottom; font-size:13px;} .agency .prez {float:left; width:320px;} .agency .contextual {width:380px; float:right;} .agency .contextual #map {margin:0 0 15px;} .agency-clients {text-align:center;} .agency-clients img {margin:0 15px 15px;} .agency .btn-contact {position:absolute; top:25px; right:40px; text-align:center; width:175px; color:#FFFFFF;} .agency .btn-contact span {background: url(../images/logo_shadow.png) no-repeat center top; display: block; height: 27px; width: 100%;} .agency #cont-intro .btn-hl {background:url(../images/btn_highlight.png) no-repeat left top; padding:0 0 0 5px; height:45px; color:#FFFFFF; font-weight:bold; font-size:14px;display:inline-block; text-decoration:none;} .agency .btn-hl span {background:url(../images/btn_highlight.png) no-repeat right top; padding:5px 11px 5px 0; width:auto; height:35px; display:inline-block;} .agency .btn-hl span span {background:url(../images/ico_btn_hl.png) no-repeat left 3px; padding:0 0 0 11px;width:auto; height:auto; display:inline-block; text-align:center; cursor:pointer;} .cont-main .territory li {width:auto; background:none;} /* ======================================================================== * Classes générales * ========================================================================*/ .denied {background:url(../images/ico_warning_01.gif) no-repeat 8px 11px; padding:5px 35px 5px 35px; margin:5px 0; border-top:3px solid red;} .denied li {border-bottom:1px dotted red; padding:3px 0;} .clear { clear:both; line-height:0; height:0; font-size:0; } .checkbox {width:auto !important; height:auto !important; padding:0 !important; border:none !important;} .nodisplay { display:none; } .center { text-align:center; width:100%; } .right { text-align:right !important; } .flright { float:right; } .flleft { float:left; } .two-columns { width:49% !important;} .cb { clear: both; }