/* Styles généraux -----------------------------------------------------------------*/ body { margin: auto; color: #222; background-color: #4A8748; font-size: 16px; font-family: Arial, sans-serif; } iframe { border: none; } img { border: none; } input, textarea { background-color: #fff; border: 1px solid #bbb; } input.noborder { border: 0; } h1 { display: none; margin: 0; padding: 0; color: #000; } h2 { font-size: 21px; font-weight: normal; color: #000; } #IE7 h2 { margin-top: 10px; } #IE6 h2 { margin-top: 10px; } h3 { font-size: 18px; font-weight: normal; color:#00632F; } #IE7 h3 { margin-top: 10px; } #IE6 h3 { margin-top: 10px; } h4 { color: #000; } .reset { margin: 0; padding: 0; clear: both; } hr.spacer { margin: 0; padding: 0; width: 0; height: 0; visibility: hidden; clear: both; } a { text-decoration: none; color: blue; } a:hover { color: #FF0000; } .bold { font-weight: bold; color:#00632F; } a.bold { color:#00632F; text-decoration: none; } a.bold:hover { color:#800; } .quiet { color: #555; font-size: smaller; } /* Page index -----------------------------------------------------------------*/ #index_contain { width:100%; padding-top: 60px; text-align:center; margin:0; border:0; } #index_titre { background-image:url(/images/index/index_new4_02.jpg); font-size:14px; color:#FFFFFF; text-transform: uppercase; } #index_anim1 { background-image:url(/images/index/index_new4_05.jpg); } #index_moteur { background-image:url(/images/index/index_new4_07.jpg); font-size:14px; color:#000000; text-align:center; vertical-align:bottom; text-transform: uppercase; } #index_anim2 { background-image:url(/images/index/index_new4_08.jpg); } #index_credit { background-image:url(/images/index/index_new4_10.jpg); font-size:11px; color:#FFFFFF; vertical-align:top; } #index_credit a { font-size:11px; color:#FFFFFF; text-decoration:none; } #index_credit a:hover { color:#990000; text-decoration:none; } #index_credit a:visited { font-size:11px; color:#FFFFFF; text-decoration:none; } /* Design interface -----------------------------------------------------------------*/ #wrapper { width: 1000px; margin: auto; } #header { width: 980px; height: 120px; padding: 10px 10px 0px 10px; background: url(/images/design/header.jpg) no-repeat; } #IE6 #header { padding: 0px 10px 0px 10px; } #header a.logo { display: block; cursor: pointer; float: left; width: 184px; height: 120px; background: url(/images/design/bandeau_logo.jpg) no-repeat; } #IE6 #header .logo { margin-top: 10px; } #header .anim_bandeau { float: left; width: 688px; height: 120px; background-color: #000000; } #IE6 #header .anim_bandeau { margin-top: 10px; } #header .anim_bandeau img { height: 120px; width: 170px; margin: 0 1px 0 1px; } #header .anim_bandeau #img_1 img { margin-left: 2px; height: 120px; width: 169px; } #header .anim_bandeau #img_4 img { height: 120px; width: 169px; } #header .qualibat { float: right; width: 108px; height: 120px; } #IE6 #header .qualibat { margin-top: 10px; } #page { width: 1000px; float: left; background: url(/images/design/page.jpg) repeat-y; } #page_content { width: 970px; margin-left: 10px; padding: 0 5px 20px 5px; float: left; } #IE6 #page_content { margin-left: 5px; } #page_content .col_left { width: 765px; float: left; } #page_content .col_right { width: 200px; float: right; margin-top: 10px; } #footer { float: left; width: 1000px; height: 55px; color: #000; background: url(/images/design/footer.jpg) repeat-y; } #footer .adresse a { color:#000; } #footer .adresse a:hover { color:#FF0000; } #footer span { text-transform: uppercase; } #footer .adresse { width: 980px; font-size: 12px; text-align: center; } #footer .copyright { float: left; font-size: 10px; margin:10px 0 0 15px; } #IE7 #footer .copyright { float: left; font-size: 10px; margin:8px 0 0 15px; } #footer .credit { float: right; font-size: 10px; margin: 10px 15px 0 0; } #footer .credit a { text-decoration: none; color: #000; } #footer .credit a:hover { color: #ff0000; } #IE7 #footer .credit { float: right; font-size: 10px; margin: 8px 15px 0 0; } #img_1, #img_2, #img_3, #img_4 { width: 172px; height: 120px; float: left; border: none; } #img_1 img, #img_2 img, #img_3 img, #img_4 img { position: absolute; display: none; } #img_1 img.visible, #img_2 img.visible, #img_3 img.visible, #img_4 img.visible { display: inline; } /* Styles des Boxs -----------------------------------------------------------------*/ .box_top { background: url(/images/boxs/box_top.jpg) no-repeat top; width:200px; height: 34px; text-transform: uppercase; background-color: #A1C666; font-weight:bold; font-size:14px; text-align:center; color:#FFFFFF; } #IE7 .box_top { background: url(/images/boxs/box_top.jpg) no-repeat top; width:200px; height: 32px; text-transform: uppercase; background-color: #A1C666; font-weight:bold; font-size:14px; text-align:center; color:#FFFFFF; } .box_top2 { background: url(/images/boxs/box_top.jpg) no-repeat top; width:200px; height: 18px; text-transform: uppercase; background-color: #A1C666; font-weight:bold; font-size:14px; text-align:center; color:#FFFFFF; } .box_mid { padding-top:10px; background-image:url(/images/boxs/box_mid.jpg); width:200px; min-height:35px; text-align:center; color:#000000; font-size:12px; } .box_mid ul { list-style: none; margin: 0; padding: 0; } .box_bas { background-image:url(/images/boxs/box_bas.jpg); width:200px; height:15px; text-align:center; font-size: 12px; margin-bottom: 15px; } .box_bas a { font-size: 12px; color:#000000; text-decoration:none; vertical-align:top; font-weight:normal; } .box_bas a:visited { font-size: 12px; color:#000000; text-decoration:none; vertical-align:top; font-weight:normal; } .box_bas a:hover { color:#FF0000; font-weight:normal; } #dates_cle { margin-left: 20px; float:left; } #dates_cle .box3_mid .logo { float:left; margin: 12px 10px 0 5px; width:170px; height:130px; padding-top:20px; } .box3_top { background: url(/images/boxs/box3_top.jpg) no-repeat; width:680px; height:18px; padding-left: 20px; font-weight:bold; font-size:14px; text-align:left; color:#FFFFFF; } .box3_mid { background-image:url(/images/boxs/box3_mid.jpg); width:700px; font-size: 14px; } .box3_mid ul { margin: 0 0 0 20px; } .box3_mid ul li { height: 13px; padding-top: 7px; } .box3_bas { background-image:url(/images/boxs/box3_bas.jpg); background-repeat:no-repeat; width:700px; height:15px; } .box4_top { margin-top: 10px; background: url(/images/projet/box2_top.jpg) no-repeat top; width:440px; height:18px; padding-left: 20px; font-weight:bold; font-size:14px; text-align:left; color:#FFFFFF; } .box4_mid { background-image:url(/images/projet/box2_mid.jpg); width:460px; font-size: 14px; } .box4_mid ul { margin: 0 0 0 10px; padding: 0; } .box4_mid ul li { height: 13px; padding-top: 7px;list-style: none; } .box4_bas { background-image:url(/images/projet/box2_bas.jpg); background-repeat:no-repeat; width:460px; height:14px; } /* Styles du menu -----------------------------------------------------------------*/ #menu { z-index: 10; position: relative; width: 980px; margin: 0 0 0 10px; padding: 0; } #menu dl, #menu dt, #menu dd, #menu ul, #menu li { margin: 0; padding: 0; list-style-type: none; } #menu dl { float: left; height: 18px; margin: 0; text-transform: uppercase; } #IE6 #menu dl { width: 50px; margin:0; } #menu dt { height: 18px; cursor: pointer; background:#A1CB64; line-height: 18px; border: 0px solid black; } #menu dt a, #menu dt a:visited { text-align: center; text-decoration: none; font-weight: bold; font-size: 11px; color: black; display: block; } #menu dt a:hover { color: white; text-decoration: none; display: block; font-size:11px; background: #4A8748; } #menu dd, #menu dd a, #menu dd a:visited { position: absolute; width: 180px; background: #4A8748; border: 0; padding-top: 2px; color: white; font-size: 11px; font-weight: bold; text-decoration: none; display: block; } #menu dd a:hover { color: black; background: #A1CB64; } #menu li, #menu li a, #menu li a:hover { height: 18px; vertical-align:middle; } #dt1_fr { width: 75px; } #dt2_fr { width: 185px; } #dt3_fr { width: 180px; } #dt4_fr { width: 120px; } #dt5_fr { width: 115px; } #dt6_fr { width: 130px; } #dt7_fr { width: 125px; } #dt_dp { width:50px; padding-top:1px; } #dt_dp a:hover { background-color:none; } #dt1_en { width: 90px; } #dt2_en { width: 200px; } #dt3_en { width: 200px; } #dt4_en { width: 120px; } #dt5_en { width: 100px; } #dt6_en { width: 120px; } #dt7_en { width: 100px; } #dt_dp { width:50px; padding-top:1px; } #dt_dp a:hover { background-color:none; } /* Mise en page des Tabs Jquery -----------------------------------------------------------------*/ @media projection, screen { #tab_entreprise .ui-tabs-hide { display: none; }} @media projection, screen { #tab_emploi .ui-tabs-hide { display: none; }} @media projection, screen { #tab_moyens .ui-tabs-hide { display: none; }} @media projection, screen { #tab_etapes_projet .ui-tabs-hide { display: none; }} @media projection, screen { #tab_etapes_fabrication .ui-tabs-hide { display: none; }} @media projection, screen { #tab_concept .ui-tabs-hide { display: none; }} @media projection, screen { #tab_bois_construction .ui-tabs-hide { display: none; }} @media projection, screen { #tab_realisations .ui-tabs-hide { position: absolute; left: -10000px; }} @media print {.ui-tabs-nav { display: none; }} .ui-tabs-nav, .ui-tabs-panel { z-index: 0; font-family: Arial, "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; } .ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 3px;font-size: 12px; color: #fff; text-transform: uppercase; } .ui-tabs-nav:after { display: block; clear: both; content: " "; } .ui-tabs-nav li { float: left; margin: 0 0 -5px 2px; font-weight: bold; } .ui-tabs-nav a, .ui-tabs-nav a span { float: left; padding: 0 10px 0px 12px; background: url(/images/projet/tabs.png) no-repeat; } .ui-tabs-nav a { margin: 5px 0 5px; padding-left: 0; background-position: 100% 0; text-decoration: none; white-space: nowrap; outline: 0; } #IE7 .ui-tabs-nav a { margin: 0px 0 5px; padding-left: 0; background-position: 100% 0; text-decoration: none; white-space: nowrap; outline: 0; } #IE6 .ui-tabs-nav a { margin: 0px 0 5px; padding-left: 0; background-position: 100% 0; text-decoration: none; white-space: nowrap; outline: 0; } .ui-tabs-nav a:link, .ui-tabs-nav a:visited { color: #fff; } .ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; background-position: 100% -23px; } #IE7 .ui-tabs-nav .ui-tabs-selected a { position: relative; top: -4px; z-index: 2; margin-top: 0; background-position: 100% -23px; } #IE6 .ui-tabs-nav .ui-tabs-selected a { position: relative; top: -4px; z-index: 2; margin-top: 0; background-position: 100% -23px; } .ui-tabs-nav a span { padding-top: 1px; padding-right: 0; height: 20px; background-position: 0 0; line-height: 20px; } .ui-tabs-nav .ui-tabs-selected a span { padding-top: 0; height: 27px; background-position: 0 -23px; line-height: 27px; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {cursor: text; } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { cursor: pointer; } .ui-tabs-disabled { opacity: .4; filter: alpha(opacity=40); } .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { color: #000; } .ui-tabs-panel {width:750px; border-top: 1px solid #A1CB64; padding: 0px 10px 10px 0; background: #fff; } #tab_etapes_fabrication .ui-tabs-panel {width:950px; border-top: 1px solid #A1CB64; padding: 0px 10px 10px 0; background: #fff; } #tab_entreprise .ui-tabs-panel {width:970px; border-top: 1px solid #A1CB64; padding: 0px 0px 10px 0; background: #fff; } * html .ui-tabs-nav { display: inline-block; } *:first-child+html .ui-tabs-nav { display: inline-block; } /* Styles des textes -----------------------------------------------------------------*/ body.accueil h3 { text-align: center; } #accueil h4 { /* color: #FF3300; */ text-transform: uppercase; color:#00632F; } .block_accueil { width:141px; height:93px; display:block; } #block_fabrication { background: url(/images/accueil/block_fabrication3.jpg) no-repeat; } #block_entreprise { background: url(/images/accueil/block_entreprise.jpg) no-repeat; } #block_projet { background: url(/images/accueil/block_projet3.jpg) no-repeat; } #block_contact { background: url(/images/accueil/block_contact.jpg) no-repeat; } #block_bois { background: url(/images/accueil/block_bois2.jpg) no-repeat; } #block_realisations { background: url(/images/accueil/block_realisation2.jpg) no-repeat; } ul#qualibat { padding-left: 10px; margin-bottom: 30px; } ul#qualibat li { margin-bottom: 10px; list-style: none; border-bottom: 1px solid #ccc; width: 97%; } ul#qualibat li a { color: #000; text-decoration: none; cursor: pointer; } ul#qualibat li p { text-align: justify; font-size: 14px; margin-top: 0; color:#00632F; margin-top: 10px; margin-bottom: 5px; } /* Economies energie */ #eco_energie p { text-align: justify; } #eco_energie span.bold { font-weight: bold; color:#00632F; } .dephasage { float: left; text-align: center; width: 100%; margin-bottom: 30px; font-size: 12px; } .dephasage_small { font-size: 12px; color: #666666; } /* Projet maison bois */ #presentation, #rencontrez-nous, #bureau-d-etude, #realisation, #reception { float: left; font-size: 16px; } a.etap_suiv { display: block; height: 17px; width: 100px; cursor: pointer; padding-top: 3px; background: url(/images/projet/etapes_suiv.jpg) no-repeat right; text-align: left; } /* Concepts bois */ #ecoiso, #ecobase, #optimum, #standard { float: left; } .concept_schema { float: left; width: 230px; height: 367px; } .concept_description { float: left; width: 500px; font-size: 16px; } .concept_legende { color: #444; } .concept_legende span { color: #ff0000; } /* Bois & ecologie */ #tab_bois_construction .ui-tabs-panel { width:970px; border-top: 1px solid #A1CB64; padding: 0px 0 10px 0; background: #fff; } #tab_bois_construction { text-align: justify; } #tab_bois_construction span.legende { text-align: center; font-size: 14px; display: block; color: #333; } #tab_bois_construction span.legende a { color: #333; text-decoration: none; } #tab_bois_construction span.legende a:hover { color: #800; } #quizz_bois { font-size: 14px; margin-left: 25px; } #quizz_bois input { border: none; } #quizz_bois .question { width: 90px; } #quizz_bois .enonce { width: 530px; } #quizz_bois .answer { width: 70px; } #quizz_bois .check_answer { width: 140px; } #quizz_bois .check_answer input { width: 130px; margin-left: 5px; border: none; font-size: 14px; } #quizz_bois .verif_button { border: 1px solid #888; } #resultat_quizz { width: 220px; font-size: 16px; border: none; } #consigne { width: 900px; font-size: 16px; color: #333; border: none; overflow: hidden; } /* Historique */ .italique { width:930px; margin-left: 20px; margin-top: 10px; font-size:14px; font-style:italic; text-align:justify; } #dates_cle ul li { list-style: none; } /* Partenaires */ #partenaires h3 { width: 870px; margin-left: 35px; margin-bottom: 20px; margin-top: 40px; clear: both; border-bottom: 1px solid #00632F; } #partenaires .block-partner { margin-bottom:30px; width: 870px; height: 128px; margin-left: 35px; float:left; /* border-bottom: 1px solid #888; */ } #partenaires .logo-partner { float:left; width:128px; max-height:128px; } #partenaires .description-partner { float:left; width:700px; margin-left: 20px; text-align: justify; } #partenaires .link-partner { float:right; width:620px; padding-right: 20px; margin-top: 10px; height:20px; text-align: right; } /* Realisations */ #tab_realisations .ui-tabs-panel { width:970px; border-top: 1px solid #A1CB64; padding: 0px 0 10px 0; background: #fff; } #tab_realisations .left { float: left; width: 755px; } #tab_realisations .right { float: right; width: 200px; } #tab_realisations p { text-align: justify; } #tab_realisations .left ul li { text-align: justify; margin-bottom: 10px; } #lamelle_colle, #charpentes_traditionnelles, #maisons_ossature_bois, #couvertures_zinguerie { float: left; font-size: 16px; } #realisations p.legende { padding-left: 20px; margin-bottom: 0; font-size:16px; color:#555; } #realisations ul.illustrations_1 { margin-top: 5px; padding-left: 20px; } #IE7 #realisations ul.illustrations_1 { margin-top: 5px; padding-left: 0px; margin-left: 20px; } #IE6 #realisations ul.illustrations_1 { margin-top: 5px; padding-left: 0px; margin-left: 20px; } #realisations ul.illustrations_1 li { display:inline-table; margin-right:55px; } #IE7 #realisations ul.illustrations_1 li { list-style: none; display: inline; float: left; margin-right:55px; } #IE6 #realisations ul.illustrations_1 li { list-style: none; display: inline; float: left; margin-right:55px; } #realisations ul.illustrations_1 li a { display:block; width:200px; text-decoration: none; color:#333; } #realisations ul.illustrations_1 li a span { color:#333; text-align: left; display: block; font-size: 14px; } #realisations a.link { text-decoration: none; text-align: center; } #realisations a.link span { color: #333; display: block; font-size: 14px; } #realisations a.discover { clear: both; margin-left: 20px; text-transform: uppercase; text-align: center; display: block; text-decoration: none; font-weight: bold; color:#00632F; } #realisations a.discover:hover { color: #800; } /* offre emploi */ #offres h3 { margin-bottom: 5px; width: 870px; margin-left: 35px; margin-top: 40px; border-bottom: 1px solid #00632F; } #offres h4 { margin-bottom: 5px; font-weight: normal; font-size: 16px; width: 870px; margin-left: 35px; } #offres p { text-align: justify; font-size: 14px; width: 870px; margin-left: 35px; } #offres table.info_offre { text-align: left; margin-left: 35px; font-size: 14px; } #offres .nb_offre { font-size: 18px; margin-top: 10px; margin-left: 0; width: 100%; } #formulaire_emploi { font-size: 14px; margin-left: 35px; } #formulaire_emploi h3 { border-bottom: 1px solid #333; width: 870px; clear: both; } .star { color: #800; } #formulaire_emploi .submit { background-color: #fff; border: 1px solid #555; } #emploi_candidature { margin-left: 10px; } #emploi_candidature input { border: none; } #emploi_coordonnees label { width: 110px; float: left; font-size: 14px; padding-top: 3px; } /* Contact */ #formulairedecontact { font-size: 14px; } #formulairedecontact h3 { border-bottom: 1px solid #333; width: 870px; clear: both; } #vos_coordonnees label { width: 110px; float: left; font-size: 14px; padding-top: 3px; } #emploi_coordonnees { margin-left:10px; } #emploi_coordonnees .star { color: #800; } #emploi_profil { margin-left: 10px; } #contact_projet label { margin-right: 40px; margin-left: 5px; font-size: 14px; vertical-align: text-bottom; } #formulairedecontact .submit { background-color: #fff; border: 1px solid #555; } #message_confirm { text-align: center; height: 320px; padding-top: 50px; } /* Carousel rélisations */ .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 212px; } .jcarousel-next { z-index: 3; display: none; } .jcarousel-prev { z-index: 3; display: none; } .jcarousel-skin-actu .jcarousel-container { } .jcarousel-skin-actu .jcarousel-container-vertical { width: 180px; height: 535px; margin-left: 10px; } #IE7 .jcarousel-skin-actu .jcarousel-container-vertical { width: 180px; height: 535px; margin-left: 5px; } #IE6 .jcarousel-skin-actu .jcarousel-container-vertical { width: 180px; height: 535px; margin-left: 5px; } .jcarousel-skin-actu .jcarousel-clip-vertical { width: 180px; height: 470px; margin-top: 10px; } #IE7 .jcarousel-skin-actu .jcarousel-clip-vertical { width: 180px; height: 470px; margin-top: 20px; } #IE6 .jcarousel-skin-actu .jcarousel-clip-vertical { width: 180px; height: 470px; margin-top: 20px; } .jcarousel-skin-actu .jcarousel-item { width: 175px; } .jcarousel-skin-actu .jcarousel-item-vertical { margin-bottom: 10px; } #IE6 .jcarousel-skin-actu .jcarousel-item-vertical { margin-bottom: 3px; } .jcarousel-skin-actu .jcarousel-item-placeholder { color: #FFFFFF; } .jcarousel-skin-actu .jcarousel-next-vertical { position: absolute; bottom: 2px; left: 25px; width: 130px; height: 21px; cursor: pointer; background: transparent url(/images/realisations/carousel-button.jpg) 0 -24px; } .jcarousel-skin-actu .jcarousel-next-vertical:hover { background-position: 0 -24px; cursor: pointer; } .jcarousel-skin-actu .jcarousel-next-vertical:active { background-position: 0 -21px; } .jcarousel-skin-actu .jcarousel-next-disabled-vertical, .jcarousel-skin-actu .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-actu .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .jcarousel-skin-actu .jcarousel-prev-vertical { width: 130px; height: 21px; margin-left: 25px; cursor: pointer; background: transparent url(/images/realisations/carousel-button.jpg) 0 0; } #IE7 .jcarousel-skin-actu .jcarousel-prev-vertical { margin-left: 0px; margin-bottom: 10px; } #IE6 .jcarousel-skin-actu .jcarousel-prev-vertical { margin-left: 0px; margin-bottom: 10px; } .jcarousel-skin-actu .jcarousel-prev-vertical:hover { background-position: 0 0; } .jcarousel-skin-actu .jcarousel-prev-vertical:active { background-position: 0 -3px; } .jcarousel-skin-actu .jcarousel-prev-disabled-vertical, .jcarousel-skin-actu .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-actu .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .li_carousel { width:180px; height:110px; }