/* Start of CMSMS style sheet 'Rainbow_Horn_France : accueil layout' */ /* browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on */ * { margin: 0; padding: 0; } /*Set initial font styles*/ body { text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 75%; line-height: 1em; } /*set font size for all divs, this overrides some body rules*/ div { font-size: 1em; } /*if img is inside "a" it would have borders, we don't want that*/ img { border: 0; } /*default link styles*/ /* set all links to have underline and bluish color */ a { text-decoration: underline; color: #186297; } /* remove underline on hover and change color */ a:hover { text-decoration: none; } /*****************basic layout *****************/ body { margin: 0; padding: 0; /* default text color for entire site*/ color: #333; /* you can set your own image and background color here */ background: #fff url(images/bg_page-accueil.png) no-repeat top center; } div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the */ width: 980px; /* now that width is set this centers wrapper */ margin: 0 auto; padding-bottom: 50px; position: relative } /* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */ div#header { height:32px; margin: 0; padding: 0; padding-top: 14px; } div#header h1 { margin: 0; padding: 0; line-height: 0; font-size: 0; width: 145px; height: 86px; top: 14px; padding: 0 0 0 42px; position: absolute; float:left; z-index: 20; } div#header h1 a { display: block; height: 86px; width:145px; text-indent: -999em; text-decoration: none; background: url(images/logo-horn.png) no-repeat; } div#header h2 { /* this is where the site name is */ float: right; line-height: 1.2em; /* this keeps IE6 from not showing the whole text */ font-size: 1.5em; /* keeps the size uniform */ margin: 35px 65px 0px 0px; /* adjust according your text size */ color: #f4f4f4; } div#content { padding: 2px 0 0; min-height: 562px; height: auto!important; height: 562px; clear:left; } div#slides { width: 980px; height: 311px; } .edge-holders{ width:980px; height:109px; background: url(images/top-slide.png) no-repeat; position:relative; z-index:10; top:-311px; } div.SlideContainer { padding: 43px 0 0 634px; color: #1B2952; } div#content div.SlideContainer h2 { color: #1B2952; font-family: Arial, Helvetica, sans-serif; margin: 0 0 15px; } div.SlideContainer p { margin: 0 20px 12px 0 } div.SlideContainer ul li { list-style: none; background: url(images/puce-slide.png) no-repeat left 1px; padding-left: 20px; margin: 0 0 8px; line-height: 120%; } div#slides #Tab1 { background: url(images/bg-slide1.jpg) no-repeat; } div#slides #Tab1 .SlideContainer { } div#slides #Tab2 { background: url(images/bg-slide2.jpg) no-repeat; } div#slides #Tab3 { background: url(images/bg-slide3.jpg) no-repeat; } div#slides #Tab4 { background: url(images/bg-slide4.jpg) no-repeat; } div#slides #Tab5 { background: url(images/bg-slide5.jpg) no-repeat; } /* SLIDE NAVIGATION */ #nav-slide { float: right; list-style: none; overflow: hidden; position: relative; top: -42px; } #nav-slide li { float: left; list-style: none; height: 31px; } #nav-slide li a { display: block; height:31px; width: 31px; background-image: url(images/nav-slide-sprite.png); background-repeat: no-repeat; text-indent: -9000em; } #navslide1 a{ background-position: 0 -34px; } #navslide1 a:hover, #navslide1 .tabSelected { background-position: 0 0; } #navslide2 a{ background-position: -31px -34px; } #navslide2 a:hover, #navslide2 .tabSelected { background-position: -31px 0; } #navslide3 a{ background-position: -62px -34px; } #navslide3 a:hover, #navslide3 .tabSelected { background-position: -62px 0; } #navslide4 a{ background-position: -93px -34px; } #navslide4 a:hover, #navslide4 .tabSelected { background-position: -93px 0; } #navslide5 a{ background-position: -124px -34px; } #navslide5 a:hover, #navslide5 .tabSelected { background-position: -124px 0; } /* this gets all the outside calls that were used on the div#main before */ div.back1 { /* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */ /*padding-left: 20px;*/ /* and some air on the right */ margin-right: 0; background: url(images/reflet-rainbow.jpg) no-repeat center top; } div#main { /* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */ padding: 50px 20px 0; clear: both; height:1% } div.encart-accueil { float: left; background: #EEF1F7 url(images/bg-encart-accueil.png) repeat-x top; border: 1px solid #fff; font-size: 0.917em; } div.encart-accueil p{ line-height: 120%; margin: 0 0 11px } div#content div.encart-accueil h3 { color: #D90033; font-family: Arial, Helvetica, sans-serif; text-indent: -9000em; margin: 0 0 2px } div.encart-accueil a { background: url(images/puce-encart-accueil.png) no-repeat left 4px; padding-left: 7px; color: #007683; text-decoration: underline; } div.encart-accueil a:hover { text-decoration: none; } div#distributeur { padding: 0; width: 282px; position: relative; } div#distributeur div { background: url(images/bg-distributeur.jpg) no-repeat bottom; padding: 10px; padding-bottom: 190px; } div#content div#distributeur h3 { background: url(images/titre-distributeur.png) no-repeat; width: 226px; height: 22px; } div#distributeur #devis { display: block; height: 50px; width:140px; text-indent: -9000em; position: absolute; bottom: 0; right: 10px; background: url(images/none.gif); } div#ccentre { float: left; width: 344px; padding-left: 23px; } div#temoignage { float: none; padding: 0; width: 318px; margin-bottom: 10px; } div#temoignage div { padding: 10px 85px 15px 13px; background: url(images/bg-temoignages.jpg) no-repeat right bottom; } div#temoignage h3 { background: url(images/titre-temoignage.png) no-repeat top left; width: 171px; height:22px; } div#Service-clients{ float: none; padding: 0; } div#Service-clients div { padding: 10px 85px 20px 13px; background: url(images/bg-sav.jpg) no-repeat right top; } div#Service-clients h3 { background: url(images/titre-sav.png) no-repeat top left; width: 171px; height:22px; } div#cright { width: 287px; float:left; } div#encart-qualite { width: 287px; position:relative; float: none; height: 123px; } div#encart-qualite div { padding: 10px 37px 5px 13px; } div#encart-qualite h3{ background: url(images/titre-qualite.png) no-repeat; position: relative; z-index:11; } div#encart-qualite #trophee { position: absolute; right: -38px; top: -48px; z-index: 10; } div#encart-qualite p { padding-right: 130px; line-height: 125%; } div#encart-qualite a { } /* as we hid all hr for accessibility we create new hr with div class="hr" element */ div.hr { height: 1px; padding: 1em; border-bottom: 1px dotted black; margin: 1em; } /* relational links under content */ div.left49 { /* combined percentages of left+right equaling 100% might lead to rounding error on some browser */ width: 70%; } div.right49 { float: right; width: 29%; /* set right to keep text on right */ text-align: right; } /********************CONTENT STYLING*********************/ /* HEADINGS */ div#content h1 { /* font size for h1 */ font-size: 2em; line-height: 1em; margin: 0; } div#content h2 { color: #D90032; /* font size for h2 the higher the h number the smaller the font size, most times */ font-size: 2.167em; text-align: left; /* a larder than h1 line height */ line-height: 1em; font-weight: normal; } div#content h3 { color: #186297; font-size: 1.6em; line-height: 1.3em; margin: 0 0 0.5em 0; font-weight: normal; } div#content h4 { color: #186297; font-size: 1.4em; line-height: 1.3em; margin: 0 0 0.25em 0; font-weight: normal; } div#content h5 { color: #186297; font-size: 1.2em; line-height: 1.3em; margin: 0 0 0.25em 0; } h6 { color: #333; font-size: 1em; line-height: 1.3em; margin: 0 0 0.25em 0; } /* END HEADINGS */ /* TEXT */ p { /* default p font size, this is set different in some other divs */ font-size: 1em; /* some air around p elements */ margin: 0 0 1.5em 0; line-height: 1.4em; padding: 0; } blockquote { border-left: 10px solid #ddd; margin-left: 10px; } strong, b { /* explicit setting for these */ font-weight: bold; } em, i { /* explicit setting for these */ font-style: italic; } /* Wrapping text in tags. Makes CSS not validate */ code, pre { /* css-3 */ white-space: pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */ word-wrap: break-word; font-family: "Courier New", Courier, monospace; font-size: 1em; } pre { /* black border for pre blocks */ border: 1px solid #000; /* set different from surroundings to stand out */ background-color: #ddd; margin: 0 1em 1em 1em; padding: 0.5em; line-height: 1.5em; font-size: 90%; } /* Separating the divs on the template explanation page */ div.templatecode { margin: 0 0 2.5em; } /* END TEXT */ /* LISTS */ /* lists in content need some margins to look nice */ div#main ul, div#main ol, div#main dl { font-size: 1.0em; line-height: 1.4em; margin: 0 0 1.5em 0; } div#main ul li, div#main ol li { margin: 0 0 0.25em 3em; } /* definition lists topics on bold */ div#main dl { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #c0c0c0; } div#main dl dt { font-weight: bold; margin: 0 0 0 1em; } div#main dl dd { margin: 0 0 1em 1em; } /* END LISTS */ #pageflip { position: relative; } #pageflip img { width: 58px; height: 59px; z-index: 99; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 58px; height: 59px; position: absolute; z-index: 50; left: 0; top: 0; background: url(images/coin_fetes.png) no-repeat left top; text-indent: -9999px; } /* End of 'Rainbow_Horn_France : accueil layout' */