/* STRUCTURE --------------------------------------------------------------------------------------------------------------------*/ body { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#home { background: #b8b8b8 url(/MARIAGE/images/interface/body-photos-av.jpg) no-repeat top center; } body#accueil { background: #b8b8b8 url(/MARIAGE/images/interface/body-accueil.jpg) no-repeat top center; } body#merci { background: #b8b8b8 url(/MARIAGE/images/interface/body-merci.jpg) no-repeat top center; } body#nous { background: #b8b8b8 url(/MARIAGE/images/interface/body-nous.jpg) no-repeat top center; } body#grand-saut { background: #000; } body#film-by-lolkikoo { background: #000; } body#film-mariage { background: #000; } body#charlotte { background: #b8b8b8 url(/MARIAGE/images/interface/body-charlotte.jpg) no-repeat top center; } body#loic { background: #b8b8b8 url(/MARIAGE/images/interface/body-loic.jpg) no-repeat top center; } body#le-11 { background: #b8b8b8 url(/MARIAGE/images/interface/body-le-11.jpg) no-repeat top center; } body#mariage { background: #b8b8b8 url(/MARIAGE/images/interface/body-mariage.jpg) no-repeat top center; } body#reception { background: #b8b8b8 url(/MARIAGE/images/interface/body-reception.jpg) no-repeat top center; } body#videos { background: #b8b8b8 url(/MARIAGE/images/interface/body-videos.jpg) no-repeat top center; } body#infos { background: #b8b8b8 url(/MARIAGE/images/interface/body-infos.jpg) no-repeat top center; } body#curiosites { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#hotels { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#photos-av { background: #b8b8b8 url(/MARIAGE/images/interface/body-photos-av.jpg) no-repeat top center; } body#photos { background: #b8b8b8 url(/MARIAGE/images/interface/body-photos.jpg) no-repeat top center; } body#lune-de-confiture { background: #b8b8b8 url(/MARIAGE/images/interface/body-lune-de-confiture.jpg) no-repeat top center; } body#lune-de-miel-av { background: #b8b8b8 url(/MARIAGE/images/interface/body-lune-de-miel-av.jpg) no-repeat top center; } body#lune-de-miel { background: #b8b8b8 url(/MARIAGE/images/interface/body-lune-de-miel.jpg) no-repeat top center; } body#contacts { background: #b8b8b8 url(/MARIAGE/images/interface/body-contacts.jpg) no-repeat top center; } body#result { background: #b8b8b8 url(/MARIAGE/images/interface/body-photos-av.jpg) no-repeat top center; } body#mentions { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#commande { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#organisation { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#prestataires { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#retro-planning { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#programme { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } body#chambres { background: #b8b8b8 url(/MARIAGE/images/interface/body-0.jpg) no-repeat top center; } #global { position: relative; min-height: 100%; height: auto !important; height: 100%; width: 100%; } #home #header { position: relative; z-index: 100; width: 1000px; height: 170px; margin: auto; } #header { position: relative; z-index: 100; width: 1000px; height: 220px; margin: auto; } #logo { position: absolute; z-index: 100; width: 235px; height: 215px; top:58px; left:-49px;} #nav { width: 1000px; height: 30px; position: absolute; right:0px; top: 150px; z-index:1; padding-left: 0; } #center { width: 1000px; margin: auto; } #footer { width: 100%; height:auto !important; min-height: 20px; height: 20px; position: relative; margin: auto; clear: both; padding-bottom: 10px;} /**/ /* Espace organisation*/ #barre{ position: absolute; width:100%; height:50px; top: 0px; margin:auto; background:url(/MARIAGE/images/interface/barre-espace.png) no-repeat top center; } #barre-elements { position:relative; width: 1000px; height:35px; margin: auto; z-index:1000; } #compte-a-rebours{ position: absolute; width: auto; top:9px; left:15px; text-align:left; } #espace{ position: absolute; width: auto; top:7px; right:35px; text-align:right; } #btn-ok { position: absolute; top: 7px; right: 0px; } /* Les différents éléments de #center */ #content { position:relative; width: 1000px; height:auto !important; min-height: 440px; height: 440px; margin: auto; padding-bottom: 90px; text-align:center; } #home #content { position:relative; width: 1000px; height:auto !important; min-height: 440px; height: 440px; margin: auto; padding-bottom: 140px; text-align:center; } #accueil #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 0px; } #accueil #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 224px; } #accueil #content #bulle3 { position:absolute; width: 300px; height: 300px; top: 0px; left: 533px; } #accueil #content #bulle4 { position:absolute; width: 240px; height: 240px; top: 165px; left: 760px; } #accueil #content #bulle5 { position:absolute; width: 88px; height: 88px; top: 332px; left: 505px; } #merci #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 98px; } #merci #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 323px; } #merci #content #bulle3 { position:absolute; width: 240px; height: 240px; top: 95px; left: 665px; } #merci #content #bulle4 { position:absolute; width: 88px; height: 88px; top: 332px; left: 604px; } #nous #content #bulle1 { position:absolute; width: 240px; height: 240px; top: 145px; left: 2px; } #nous #content #bulle2 { position:absolute; width: 280px; height: 280px; top: 40px; left: 171px; } #nous #content #bulle3 { position:absolute; width: 360px; height: 360px; top: 75px; left: 396px; } #nous #content #bulle4 { position:absolute; width: 280px; height: 280px; top: 40px; left: 700px; } #nous #content #bulle5 { position:absolute; width: 165px; height: 165px; top: 250px; left: 836px; } #nous #content #bulle6 { position:absolute; width: 88px; height: 88px; top: 346px; left: 375px; } #photos #content #bulle1 { position:absolute; width: 340px; height: 360px; top: 68px; left: 10px; } #photos #content #bulle2 { position:absolute; width: 230px; height: 280px; top: 58px; left: 310px; } #photos #content #bulle3 { position:absolute; width: 220px; height: 200px; top: 155px; left: 515px; } #photos #content #bulle4 { position:absolute; width: 260px; height: 240px; top: 38px; left: 690px; } #photos #content #bulle5 { position:absolute; width: 180px; height: 180px; top: 255px; left: 820px; } #photos #content #bulle6 { position:absolute; width: 88px; height: 88px; top: 346px; left: 495px; } #charlotte #content #bulle1, #loic #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 0px; } #charlotte #content #bulle2, #loic #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 224px; } #charlotte #content #bulle3, #loic #content #bulle3 { position:absolute; width: 300px; height: 300px; top: 0px; left: 533px; } #charlotte #content #bulle4, #loic #content #bulle4 { position:absolute; width: 240px; height: 240px; top: 165px; left: 760px; } #charlotte #content #bulle5, #loic #content #bulle5 { position:absolute; width: 88px; height: 88px; top: 332px; left: 505px; } #mariage #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 22px; } #mariage #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 277px; } #mariage #content #bulle3 { position:absolute; width: 280px; height: 280px; top: 39px; left: 610px; } #mariage #content #bulle4 { position:absolute; width: 165px; height: 165px; top: 250px; left: 810px; } #mariage #content #bulle5 { position:absolute; width: 88px; height: 88px; top: 327px; left: 245px; } #reception #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 98px; } #reception #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 323px; } #reception #content #bulle3 { position:absolute; width: 240px; height: 240px; top: 95px; left: 665px; } #reception #content #bulle4 { position:absolute; width: 88px; height: 88px; top: 332px; left: 604px; } #videos #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 98px; } #videos #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 323px; } #videos #content #bulle3 { position:absolute; width: 240px; height: 240px; top: 95px; left: 665px; } #infos #content #bulle1 { position:absolute; width: 165px; height: 165px; top: 230px; left: 1px; } #infos #content #bulle2 { position:absolute; width: 280px; height: 280px; top: 53px; left: 102px; } #infos #content #bulle3 { position:absolute; width: 360px; height: 360px; top: 75px; left: 357px; } #infos #content #bulle4 { position:absolute; width: 165px; height: 165px; top: 0px; left: 628px; } #infos #content #bulle5 { position:absolute; width: 295px; height: 295px; top: 102px; left: 705px; } #lune-de-confiture #content #bulle1, #lune-de-miel #content #bulle1 { position:absolute; width: 240px; height: 240px; top: 95px; left: 100px; } #lune-de-confiture #content #bulle2, #lune-de-miel #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 308px; } #lune-de-confiture #content #bulle3, #lune-de-miel #content #bulle3 { position:absolute; width: 280px; height: 280px; top: 39px; left: 624px; } #lune-de-confiture #content #bulle4, #lune-de-miel #content #bulle4 { position:absolute; width: 88px; height: 88px; top: 332px; left: 589px; } #contacts #content #bulle1 { position:absolute; width: 300px; height: 300px; top: 30px; left: 0px; } #contacts #content #bulle1 #col_left { position: absolute; width: 230px; height: 186px; top: 95px; left: 18px; } #contacts #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 244px; } #contacts #content #bulle2 #col_right { position: absolute; width: 250px; height: 250px; top: 61px; left:55px; } #contacts #content #bulle3 { position:absolute; width: 280px; height: 280px; top: 8px; left: 554px; } #contacts #content #bulle4 { position:absolute; width: 240px; height: 240px; top: 165px; left: 760px; } #le-11 #content #bulle1 { position:absolute; width: 300px; height: 300px; top: 30px; left: 0px; } #le-11 #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 244px; } #le-11 #content #bulle3 { position:absolute; width: 280px; height: 280px; top: 8px; left: 554px; } #le-11 #content #bulle4 { position:absolute; width: 240px; height: 240px; top: 165px; left: 760px; } #mentions #content #col_left { float: left; width: 300px; padding-right:20px; padding-top: 443px; margin: 0; } #organisation #content #col_left { float: left; width: 300px; padding-right:20px; border-right:#A8A8A8 solid 1px; margin: 0 0 0 20px; } #organisation #content #col_center-right { float: left; width: 620px; margin:0 0 0 20px; } #organisation #content #col_center, #mentions #content #col_center { float: left; width: 300px; padding-right:20px; border-right:#A8A8A8 solid 1px; margin: 0 0 0 20px; } #organisation #content #col_right, #mentions #content #col_right { float: left; width: 300px; margin:0 0 0 20px; } #organisation #content #col_center-right #bloc-1 { float: right; width: 250px; height: 350px; position: absolute; right: 0; top: 108px; padding:5px 30px 0 30px; background-color: #666;} #organisation #content #col_center-right #bloc-2 { float: right; width: 250px; height: 60px; position: absolute; right: 0; top: 483px; padding:5px 30px 0 30px; background-color: #333;} #organisation #content #col_center-right #bloc-3 { float: right; width: 250px; height: 630px; position: absolute; right: 0; top: 568px; padding:5px 30px 0 30px; background-color: #999;} #organisation #content #col_center-right #bloc-4 { float: right; width: 250px; height: 250px; position: absolute; right: 0; top: 1223px; padding:20px 30px 0 30px; background-color: #CCC;} #organisation #content #col_center-right #bloc-5 { float: right; width: 250px; height: 105px; position: absolute; right: 0; top: 1518px; padding:20px 30px 0 30px; background-color: #FFF;} .bloc-photo-commande { border:1px solid #666; width:230px; height:238px; margin:9px; float:left;} .photo-commande { border:1px solid #000; margin:15px 0 11px;} /* # #content #bulle1 { position:absolute; width: 280px; height: 280px; top: 39px; left: 0px; border:1px solid #FF0000; } # #content #bulle2 { position:absolute; width: 360px; height: 360px; top: 75px; left: 224px; border:1px solid #00FF00; } # #content #bulle3 { position:absolute; width: 300px; height: 300px; top: 0px; left: 533px; border:1px solid #0000FF; } # #content #bulle4 { position:absolute; width: 240px; height: 240px; top: 165px; left: 760px; border:1px solid #00FFFF; } # #content #bulle5 { position:absolute; width: 88px; height: 88px; top: 332px; left: 505px; border:1px solid #FF00FF; } */ /**/ /* H1 ---------------------------------------------------------------------------------------------------------------------------- #header #headerElements #logoH1 { position: absolute; top: 0; left: 0; width: 960px; height: 335px; } #header #headerElements h1 a { text-indent: -9999px; overflow: hidden; display: block; width: 960px; height: 335px; background: url(/images/h1.jpg) no-repeat top left;} #header #headerElements h1 { width: 960px; height: 335px; } */ /**/ /* NAVIGATION --------------------------------------------------------------------------------------------------------------------*/ /* GENERAL ------------------------------------------------------------------------------------*/ #nav ul { position: absolute; right: 0px; } #nav li { position: relative; display:inline; list-style:none; padding: 0 10px; } #nav a { font-size:1.5em; padding-bottom: 24px; text-align: center; color: #000; font-variant:small-caps; text-decoration: none; font-weight: normal; } #nav a:hover { color: #E00000;} #nav ul li:hover > .sousmenu{display:block;} .sousmenu { display:none; position:absolute; } #nav ul li.nous ul { width: 94px; left: -23px;} #nav ul li.voyages ul { width: 110px; left: -12px;} #nav ul li ul { padding-top: 8px; margin: auto; } #nav ul li ul li { text-align: center; position: relative; display:block; list-style:none; padding-bottom: 2px;} #nav ul li ul li a{ color: #666; line-height: 0.9em; } #nav ul li ul li a:hover { color: #E00000;} /* Boutons actifs -------------------------------------------------------------------------------------------------------------*/ #accueil #nav li.accueil a, #merci #nav li.merci a, #nous #nav .nousactif, #charlotte #nav li.charlotte a, #loic #nav li.loic a, #le-11 #nav li.le-11 a, #mariage #nav li.mariage a, #reception #nav li.reception a, #infos #nav li.infos a, #photos-av #nav li.photos a, #photos #nav li.photos a, #videos #nav li.videos a, #lune-de-confiture #nav li.lune-de-confiture a, #lune-de-miel-av #nav li.lune-de-miel a, #lune-de-miel #nav li.lune-de-miel a, #contacts #nav li.contacts a {color: #E00000; } /* FOOTER ----------------------------------------------------------------------------------------------------------------*/ #footer #footerElements { text-align: right; width: 900px; margin: auto; padding-top: 30px; } .copyright { font-size:1.1em; color:#999999; margin-right:-25px; } .copyright a{ color:#999999; } .copyright a:hover{ color:#666666; } /* */ /* Autres elements */ /* Alignement des images (ne pas supprimer) */ .left { float:left; margin-right: 15px; margin-bottom: 5px; } .right { float:right; margin-left: 15px; margin-bottom: 5px; } .clear { cleat: both; } hr { width:295px; float:left; margin-top:-15px; border:1px solid #A8A8A8; } #masque-fiancailles{ z-index: 1000; position:absolute; width: 360px; height: 180px; bottom: 0px; left:0px; } #marquee { width: 360px; height: 260px; } /* */