/* GENERAL */ * { margin: 0; padding: 0; outline: none; } .clear { clear: both; } body { background: #4699cf url(../images/bg.jpg) top repeat-x; color: #585858; font-family: Arial, Verdana, sans-serif; font-size: 12px; overflow: scroll-y;} .fleft { float: left; margin: 5px 10px 5px 0;} .fright { float: right; margin: 5px 0px 5px 10px;} a {color: #0c62b1;} img { border: none; } html, body { height: 100%; } /* STRUCTURE DE BASE*/ #wrapper {width: 966px; margin: 0 auto; background: #ffffff url(../images/bg_wrapper.gif) repeat-y; border-bottom: 3px solid #60a2d1;} #header { height: 172px; background: url(../images/header.jpg) 0 -1px no-repeat; position: relative; } #nav{ height: 42px; overflow: hidden; position: absolute; bottom: 0; left: 3px; background: url(../images/bg_nav.gif) no-repeat; width: 793px;} #nav li{ list-style: none; display: block; float: left; height: 42px;} #nav a{ color: #ffffff; font-size: 11px; display: block; height: 12px; padding: 15px 16px; letter-spacing: 1.5px; text-decoration: none; background: url(../images/nav_sep.gif) right top no-repeat;} #nav a.last{ background: none;} #nav a:hover{ color: #60a2d1;} #container { background: url(../images/bg_container.gif) top no-repeat; position: relative;} #content { padding: 30px 30px 20px 30px; position: relative; overflow: hidden;} #footer { background: url(../images/footer.jpg) no-repeat; height: 105px; position: relative;} #footer a#creomax{ display: block; position: absolute; right: 10px; bottom: 10px; width: 250px; height: 25px;} /* SUB NAV */ #subnav {} #subnav ul{ margin: 30px 0 20px 3px; list-style: none; width: 200px; float: left;} #subnav ul li{ display: block; margin-bottom: 4px; background: url(../images/bg_sub_small.gif) no-repeat;} #subnav ul li.big{ display: block; margin-bottom: 4px; background: url(../images/bg_sub_big.gif) no-repeat; } #subnav ul li:hover{ background: url(../images/bg_sub_small_o.gif) no-repeat; } #subnav ul li.big:hover{ background: url(../images/bg_sub_big_o.gif) no-repeat; } #subnav ul li a{ display: block; padding: 9px; color: white; text-decoration: none; font-weight: bold; font-size: 12px;} /* TEXT STYLING */ h1 { color: #085dac; font-size: 20px; background: url(../images/h1.jpg) bottom left no-repeat; padding-bottom: 15px; margin-bottom: 20px; clear: both; height: 25px;} h2 { margin-bottom: 0.5em; margin-top: 1.5em; font-size: 18px;} h3 { margin-bottom: 1em; margin-top: 1.5em; font-size: 14px;} p { margin-bottom: 1em; line-height: 1.3em;} ul.ls_bullet{ margin-bottom: 1em; margin-left: 15px;} ul.ls_bullet li{ list-style-position: outside; line-height: 2em;} ul.ls_arrow li{ list-style-position: inside; list-style-type: none; background: url(../images/bullet_arrow.gif) left 5px no-repeat; padding-left: 15px;} .imp { background: #5b5b5b; border: 1px solid #282b25; color: #ffffff; padding: 15px; margin-top: 30px; text-align: center;} .imp a{ color: #ffffff;} /* PAGE AVEC CONTENU CENTRAL SEULEMENT*/ #a-propos #content, #aide #content, #contact #content{ width: 735px; } /* PAGE CONTACT */ #contact .coords{ width: 300px; float: left; } #contact .map{ float: right; } /* PAGE A PROPOS */ #a-propos #content { width: 650px;} /* INDEX */ body#index { background: url(../images/bg_index.jpg) repeat-x} body#index #wrapper{ width: 800px; height: 491px; margin- 0 auto; margin-top: 50px; background: url(../images/player_home.gif); border: none; position: relative;} body#index #wrapper #skip{ display: block; position: absolute; bottom: 0; left: 320px; height: 40px; width: 160px;} body#index #wrapper #video{ display: block; position: absolute; top: 20px; right: 20px; height: 423px; width: 760px; background: grey;} body#index2 { background: url(../images/bg_index.jpg) repeat-x} /* ACCUEIL */ #accueil #content{ padding: 0; width: 794px; margin-left: 3px; background: url(../images/bg_accueil.jpg) top no-repeat; overflow: hidden;} #accueil #content #intro{ color: #ffffff; font-weight: bold; float: left; width: 500px; margin-top: 110px; height: 290px;} #accueil #content #intro h1{ background: none; color: #ffffff; padding-left: 15px; line-height: 1em; margin-bottom: 0;} #accueil #content #intro ul{ margin: 10px 15px 10px 20px;} #accueil #content #intro ul a{ color: #ffffff;} #accueil #content #intro ul a:hover{ border-bottom: 1px solid #ffffff;} #accueil #content #avantages{ color: #4f5447; font-size: 14px; font-weight: bold; margin-top: 110px; float: left; width: 294px;} #accueil #content #avantages h1{ background: none; margin: 10px 0 10px 20px; } #accueil #content #avantages ul{ margin: 10px 20px 20px; } #accueil #content #avantages ul li{ line-height: auto; margin-bottom: 1em;} #accueil #content #avantages ul li a{ color: #4f5447;} #accueil #content #avantages ul li a:hover{ border-bottom: 1px solid #4f5447;} #accueil #content #vignettes ul{ clear: both; height: 66px; background: background: url(../images/home_vignettes.jpg) top no-repeat;} #accueil #content #vignettes ul li{ display: block; float: left; height: 66px; background: url(../images/home_vignettes.jpg) no-repeat;} #accueil #content #vignettes ul li a{ display: block; text-indent: -9999px; height: 66px; width: 88px;} #accueil #content #vignettes ul li.corpo{ background-position: 0 0; width: 90px;} #accueil #content #vignettes ul li.cuvelage{ background-position: -90px 0; width: 88px;} #accueil #content #vignettes ul li.nettoyage_drain{ background-position: -178px 0; width: 89px;} #accueil #content #vignettes ul li.fissure_ext{ background-position: -267px 0; width: 88px; } #accueil #content #vignettes ul li.fissure_int{ background-position: -355px 0; width: 88px;} #accueil #content #vignettes ul li.rep_fondation{ background-position: -443px 0; width: 88px;} #accueil #content #vignettes ul li.goudron_pression{ background-position: -531px 0; width: 88px;} #accueil #content #vignettes ul li.membrane_delta{ background-position: -619px 0; width: 88px;} #accueil #content #vignettes ul li.hydrofuge{ background-position: -707px 0; width: 87px;} #accueil #content #vignettes ul li.corpo:hover{ background-position: 0 -66px; width: 90px;} #accueil #content #vignettes ul li.cuvelage:hover{ background-position: -90px -66px; width: 88px;} #accueil #content #vignettes ul li.nettoyage_drain:hover{ background-position: -178px -66px; width: 89px;} #accueil #content #vignettes ul li.fissure_ext:hover{ background-position: -267px -66px; width: 88px; } #accueil #content #vignettes ul li.fissure_int:hover{ background-position: -355px -66px; width: 88px;} #accueil #content #vignettes ul li.rep_fondation:hover{ background-position: -443px -66px; width: 88px;} #accueil #content #vignettes ul li.goudron_pression:hover{ background-position: -531px -66px; width: 88px;} #accueil #content #vignettes ul li.membrane_delta:hover{ background-position: -619px -66px; width: 88px;} #accueil #content #vignettes ul li.hydrofuge:hover{ background-position: -707px -66px; width: 87px;} #accueil #content #vignettes ul li.corpo a{ width: 90px;} #accueil #content #vignettes ul li.nettoyage_drain a{ width: 89px;} #accueil #content #vignettes ul li.hydrofuge a{ width: 87px;} /* PAGE SERVICES ET PROBLEMES*/ #services #wrapper, #problemes #wrapper { background: url(../images/bg_wrapper_wsub.gif) repeat-y; } #services #container, #problemes #container{ background: url(../images/bg_container_wsub.gif) top no-repeat; } #services #footer, #problemes #footer { background: url(../images/footer_wsub.jpg) no-repeat;} #services #content, #problemes #content { width: 520px;} h2.solution_goudron { display: block; background: url(../images/solution_goudron.gif) left top no-repeat; padding-left: 110px; padding-top: 5px; padding-bottom: 25px; margin-left: -25px;} /* Video Player */ #player.single_player { position: absolute; right: 3px; top: 30px; width: 241px; height: 294px; background: url(../images/single_player.png) no-repeat; *background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/single_player.png');} #player.single_player #main_video{ position: absolute; left: 23px; top: 20px; width: 204px; height: 153px;} #player.multiple_player { position: absolute; right: 3px; top: 30px; background: #ffffff; width: 241px; height: 348px; background: url(../images/multiple_player.png) no-repeat; *background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/multiple_player.png');} #player.multiple_player #main_video{ position: absolute; left: 23px; top: 21px; width: 204px; height: 153px;} #player.multiple_player #list_video{ display: block; position: absolute; left: 23px; top: 185px;} #player.multiple_player #list_video li{ float: left; display: block; height: 47px; width: 62px; padding: 2px; background: url(../images/bg_thumbs_video.png) no-repeat; margin-right: 4px;} #player.multiple_player #list_video li a{ cursor: pointer;} /* Images */ .images{ margin-left: 15px;float: right;} /* PNG FIX */ div#player { behavior: url(iepngfix.htc) } .bottomlinks_wrapper_div{ text-align: center; color: #000000; font-size: 11px; margin-left: auto; margin-right: auto; } .bottomlinks_div{ color: #000000; font-size: 10px; font-family: verdana; padding: 15px 15px 5px 15px; } .bottomlinks_div a{ color: #000000; font-family: verdana; } .bottomlinks_div a:hover{ color: #ffffff; font-family: verdana; } .creo_intro_div{ margin-top: 20px; margin-bottom: 15px; width: 620px; text-align: justify; color: white; margin-left: auto; margin-right: auto; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 13px; } .splash { text-align: center; color: #ffffff; font-size: 14px; margin-left: 0 px; margin-right: 0 px; margin-top: 0 px; font-weight:bold; }