/* ------------------------------- */ /* RESET /* ------------------------------- */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; /*vertical-align: baseline;*/ background: transparent;} body {} ol,ul{list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} :focus {outline: 0;}/* remember to define focus styles! */ ins {text-decoration: none;}/* remember to highlight inserts somehow! */ del {text-decoration: line-through;}/* remember to highlight inserts somehow! */ table { border-collapse: collapse; border-spacing: 0;}/* tables still need 'cellspacing="0"' in the markup */ a:link {} a:visited {} a:hover {} a:active {}/* Pseudo class order A tag*/ a{text-decoration:none;} a {color:#000} a:hover{color:#000; } /* -------------------------------------- */ /* COMMON CLASSES /* ------------------------------------- */ /* positionnement flottant */ .floatL {float:left;} .floatR {float:right;} .clear{ clear:both; } .debug {background-color:#DDD;} .none { display:none; } .display { display:block; } img, div , li, span { behavior: url(iepngfix.htc) } /* ---------------------------------------- */ /* GRILLE /* ---------------------------------------- */ body { background: #EFEFEF; font-family:"Courier New", courier, serif; font-size:10px; color:#8a8a8a; } #main { background: #FFF; position:relative; width:1240px; height:800px; } /* ---------- Home ------------------------------ */ #home { position: relative; left:0px; top:0px; } #home #slideshow { position:relative; left:0px; top:0px; width:1240px; height:800px; } #home #slideshow img{ width:1240px; height:800px; } #home #pictures ul { position: relative; left: 0px; top: 0px; } #home #pictures ul li { position:absolute; top:0px; left:0px; z-index:1008; } #home #pictures ul li.active { z-index:1010; } #home #pictures ul li.last-active { z-index:1009; } #home #infos { width:100%; position:absolute; left:0px; top:0px; z-index:9997; } #home #infos .lien { position:absolute; left:0px; top:0px; width:100%; display:block; cursor:pointer; background-color:#FFF; opacity:0; filter:alpha(opacity=0); } #home #infos .detail { display:block; width:1030px; float: right; min-height:533px; color:#FFF; line-height:1.25em; font-size:10px; } #home #infos .lesvauriensdelimage { height:176px; width:100%; } #home #infos .lesvauriensdelimage img.logo { display:block; clear:both; } #home #infos .lesvauriensdelimage img.top { margin-left:1px; } /* ---------- Gallery ------------------------------ */ #gallery { width:1240px; height:800px; min-height:800px; position:relative; left:0px; top:0px; } #gallery #slideshow { float:left; width:800px; height:800px; position:absolute; left:440px; top:0px; } #gallery #slideshow span.image-wrapper { float:right; } #gallery ul.albums { display:block; float:left; width:398px; margin:3px 0 0 3px; } ul.albums li.album a.title { display:block; width:372px; height:15px; font-size:12px; color:#999999; background-color:#FFF; word-spacing: 0.15em; letter-spacing: 0.04em; } ul.albums li.album a.title:hover { color:#cc33cc; background-color:#e5e5e5; } ul.albums li.album .title { display:block; float:left; width:344px; height:15px; font-size:12px; color:#cc33cc; background-color:#e5e5e5; padding-left:3px; } ul.albums li.album .title span.inner { word-spacing: 0.1em; letter-spacing: 0.07em; } ul.albums li.album .title .nouveau { color:#cc0033; word-spacing: 0.1em; letter-spacing: 0.07em; } ul.albums li.album .title .nouveau .high { display:inline; padding:0 0 0 10px; color:#FFF; background-color:#cc0033; } ul.albums li.album .controls { float:left; width:50px; height:15px; cursor:pointer; margin:0; } ul.albums li.album .controls a { cursor:pointer; float:left; width:25px; height:15px; margin:0; } div#thumbs { padding: 5px 0 0 3px; } ul.thumbs { margin:0; padding:0px; display:block; } ul.thumbs li.image { float:left; margin:0; } ul.thumbs li.image a.thumb { display:block;margin:0; width:15px; height:15px; line-height:15px; font-size:9px; text-indent:2px; color:#999999; font-weight:bold; background-color:#FFF; } ul.thumbs li.image a.thumb:hover { color:#ff0000; background-color:#FFF; } ul.thumbs li.selected a.thumb { color:#ff0000; } ul.thumbs li.image span.label { display:none; } ul.thumbs li.image span.author { display:none; } ul.thumbs li.image span.id { display:none; } div.embox { width:369px; margin:13px 0 43px 4px; line-height:16px; } div.embox .caption .label { display:block; word-spacing: 0.05em; letter-spacing: 0.07em; width:244px; font-size:9px; color:#ff3333; font-weight:normal; } div.embox .caption .author { display:block; word-spacing: 0.05em; letter-spacing: 0.07em; width:244px; font-size:9px; color:#666666; font-weight:normal; } /* ---------- Mainmenu ------------------------------ */ #mainlogo { width:1240px; height:176px; position:absolute; left:0px; top:533px; } #mainlogo .lesvauriensdelimage { position:relative; left:0px; top:0px; height:176px; } #mainlogo .lesvauriensdelimage img.logo { display:block; clear:both; } #mainlogo .lesvauriensdelimage img#dog { display:block; position:absolute; top:130px; left:0px; width:25px; height:39px; } #mainlogo .lesvauriensdelimage img#icone { display:block; position:absolute; top:147px; left:0px; width:33px; height:42px; } #mainmenu { width:1240px; height:60px; position:absolute; top:700px; } #mainmenu ul.mainmenu { margin:3px 0 0 0;} #mainmenu ul.mainmenu li.menu { float:left; margin:4px 8px 0 0; } #mainmenu ul.mainmenu li.menu div { font-size:12px; color:#999999; cursor:pointer; letter-spacing: 0.02em; } #mainmenu ul.mainmenu li.menu div:hover { color:#ff3333; } #mainmenu ul.mainmenu li.menu a { font-size:12px; color:#999999; cursor:pointer; letter-spacing: 0.02em; } #mainmenu ul.mainmenu li.menu a .inner2 { color:#cc33cc; } #mainmenu ul.mainmenu li.menu a:hover { color:#ff3333; } #mainmenu ul.mainmenu li.menu a .inner2 { color:#cc33cc; } #mainmenu ul.mainmenu li.menu a:hover .inner2 { color:#ff3333; } #mainmenu ul.mainmenu li.line { clear:both; } /* ---------- Qui sommes-nous ------------------------------ */ #pagelesvauriensdelimage { width:1240px; height:800px; } #pagelesvauriensdelimage div.infos { width:303px; min-height:542px; float:left; margin:154px 0 0 3px; } #pagelesvauriensdelimage div.infos span { display:block; width:271px; font-size:12px; font-weight:normal; color:#666666; text-align:justify; } #pagelesvauriensdelimage div.infos .title { color:#ff0000; } #pagelesvauriensdelimage div.infos .text { margin:4px 0 0 0; } ul.members { float:left; width:848px; min-height:542px; position:absolute; right:0px; top:0px; } ul.members li.member { float:left; margin:0px; width:212px; } ul.members li.member span { display:block; margin:0px; width:177px; text-align:justify; font-size:12px; font-weight:normal; color:#666666; } ul.members li.member img { display:block; margin:0px; width:212px; height:142px; } ul.members li.member .title { color:#cccccc; margin-top:12px; } ul.members li.member .text { color:#cccccc; margin:4px 0 15px 0; } ul.members li.member .email a { color:#cccccc; margin-top:4px; } ul.members li.member .phone { color:#cccccc; margin-top:4px; } ul.members li.over .title { color:#ff0000; } ul.members li.over .text { color:#666666; } ul.members li.over .email { color:#3300cc; } ul.members li.over .email a { color:#3300cc; text-decoration:none; } ul.members li.over .email a:hover { color:#3300cc; text-decoration:underline; } ul.members li.over .phone { color:#cc33cc; } /* ---------- tarifs ------------------------------ */ #pagetarifs { } #pagetarifs .infos { position:relative; z-index:5; } #pagetarifs .infos .top { padding:5px 0 0 6px; background-color:#ebf5d6; width:709px; overflow:hidden; } #pagetarifs .infos .top .text { display:block; color:#000; font-size:12px; letter-spacing: 0.035em; line-height:16px; font-weight:normal; text-transform:uppercase; } #pagetarifs .infos .top .prix { display:block; height:21px; color:#ff0033; font-size:16px; word-spacing: 0.1em; letter-spacing: 0.1em; line-height:16px; font-weight:bold; text-transform:uppercase; background:url("img/tarifs-bg-top.gif") -5px 0 no-repeat; } #pagetarifs .infos ul.middle { display:block; } #pagetarifs .infos ul.middle li { display:block; height:21px; } #pagetarifs .infos ul.middle li .content { position:relative; margin:0; } #pagetarifs .infos ul.middle li .bg { position:absolute; top:0px; height:21px; background-color:#0f0f10; filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; } #pagetarifs .infos ul.middle li .text { position:absolute; display:block; top:4px; font-size:1.2em; font-weight:normal; word-spacing: 0.3em; letter-spacing: 0.04em; text-transform:uppercase; color:#fff; } #pagetarifs .infos .bottom { position:absolute; top:655px; left:709px; width:523px; } #pagetarifs .infos .bottom .text { color:#99ff66; font-size:12px; font-weight:bold; text-transform:uppercase; line-height:14px; } #pagetarifs .infos .media { position:absolute; right:0px; top:0px; } /* ---------- Comment je fais ------------------------------ */ #how { position:relative; left:229px; top:-515px; } #how .close { position:absolute; left:17px; top:14px; } #how .close div.background { float:left; width:21px; height:23px; background:url(img/btn-close.png) left top no-repeat; cursor:pointer; } #how .close div.over { background:url(img/btn-close-over-2.png) left top no-repeat; } #how .close span{ float:left; display:block; font-size:13px; line-height:18px; padding:3px 0 0 5px; color:#FFF; text-align:left; font-weight:bold; font-family: "lucida", Arial, Helvetica, sans-serif; } #pagecommentjefais { position:absolute; z-index:10; width:783px; height:484px; background:url(img/commentjefais-background.png) left top no-repeat; } #pagecommentjefais .container { position:relative; overflow: hidden; width:714px; height:350px; left:34px; top:90px; } #pagecommentjefais ul.infos { width:533px; float:left; position: relative; top:0px; } #pagecommentjefais ul.infos li { display:block; width:533px; font-size:13px; line-height:18px; text-align:left; font-family: "lucida", Arial, Helvetica, sans-serif; } #pagecommentjefais ul.infos li.title { color:#cc33cc; font-weight:bold; margin-top:20px; } #pagecommentjefais ul.infos li.text { color:#333333; font-weight:normal; } #pagecommentjefais ul.infos li.first { margin:0px; } #pagecommentjefais .scroll { float:left; margin:0 0 0 100px; } #pagecommentjefais .sliderTop { width: 19px; height:36px; background:url(img/commentjefais-scroll-background.gif) left top repeat-y; position: relative; top:0px; left:0px; } #pagecommentjefais .slider { width: 19px; height:315px; background:url(img/commentjefais-scroll-background.gif) left top repeat-y; position: relative; top:0px; left:0px; } #pagecommentjefais .ui-slider-handle { position: absolute; bottom:95%; display:block; cursor:move; height: 36px; width: 50px; background:url(img/commentjefais-scroll-handler.gif) 22px top no-repeat; } /* ---------- Contact ------------------------------ */ #contact { position:absolute; z-index:10; left:229px; top:-362px; } #contact .close { position:absolute; left:21px; top:19px; } #contact .close div.background { width:23px; height:23px; background:url(img/btn-close.png) left top no-repeat; cursor:pointer; } #contact .close div.over { background:url(img/btn-close-over-1.png) left top no-repeat; } #pagecontact { position:absolute; width:911px; height:205px; background:url(img/contact-background.png) left top no-repeat; } #pagecontact .container { position:relative; width:795px; height:170px; left:101px; top:17px; } #pagecontact .container table td label { font-size:12px; font-weight:normal; color:#666666; padding:2px 11px 0 8px; } #pagecontact .container table td label.error { color:#ff3333; width:200px; } #pagecontact .container table td.first { height:43px; width:405px; vertical-align:center; } #pagecontact .container table td.first input.text { font-size:12px; font-weight:normal; color:#cc33cc; border:none; text-transform:uppercase; } #pagecontact .container table td.first input.text1 { width:328px; } #pagecontact .container table td.first input.text2 { width:300px; } #pagecontact .container table td.first input.text3 { width:285px; } #pagecontact .container table td.first input.text4 { width:305px; } #pagecontact .container table td.last { height:166px; width:390px; } #pagecontact .container table td.last label { padding:9px 11px 0 8px; display:block;} #pagecontact .container table td.last textarea { font-size:12px; padding:2px 11px 0 8px; line-height:15px; font-weight:normal; color:#cc33cc; border:none; text-transform:uppercase; width:360px; height:130px; } #pagecontact div.msgerror { position:absolute; left:2px; top:182px; font-size:12px; font-weight:normal; color:#ff3333; padding:4px 11px 0 8px; width:500px; } #pagecontact div.msgerror a { color:#ff3333; text-decoration: underline; } #pagecontact div.msgerror a:hover { color:#ff3333; text-decoration:none; } #pagecontact .button { position:absolute; left:714px; top:182px; } #pagecontact .button input { width:92px; height:32px; } #pagecontact .button input :hover{ background:url(img/contact-button-over.png) left top no-repeat; } /* ---------- Mentions ------------------------------ */ #pagementions .title { width:400px; color:#cc33cc; font-weight:bold; padding:10px 0 0 10px; text-transform:uppercase; } #pagementions .text { width:400px; padding:10px 0 0 10px; } #pagementions .text a { color:#999999; } #pagementions .text a:hover { color:#ff3333; } /* ---------- Footer ------------------------------ */ #footer { width:1240px; } #footer .text { display:block; float:right; margin:3px 5px 20px 8px; font-size:11px; color:#999999; } #footer .text a { font-size:11px; color:#999999; } #footer .text a:hover { color:#ff3333; }