@base:970px; @width:@base+10px; @indent:-1000000px; a { text-decoration:none; } body { font: normal normal normal 12px/1.2em Arial, sans-serif; select { width:130px; height:18px; display:inline-block; opacity:0; cursor:pointer; position:absolute; top:0; left:0; } .slt { padding:2px 4px; position:relative; display:inline-block; width:122px; height:14px; b { color:#EA7483; font-size:11px; text-transform:lowercase; font-weight:normal; } } .guide-pro { .slt { margin-bottom:5px; } } h1 { .slt { position:absolute; top:-3px; margin-top:-4px; padding:2px 4px; position:relative; display:inline-block; width:122px; height:14px; b { display:block; overflow:hidden; width:102px; white-space:nowrap; font-size:11px; line-height:1em; text-transform:lowercase; font-weight:normal; } } } .bm-bg { display:block; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; } .bm-window { display:block; position:absolute; z-index:2; top:50%; left:50%; width:400px; height:330px; margin-top:-150px; margin-left:-200px; .bm-content { position:relative; h2 { padding:15px; font-weight:bold; text-align:justify; text-transform:uppercase; font-weight:bold; font-size:12px; line-height:1.3em; color:#FFF; } .bm-masque { position:absolute; top:80px; left:0; height:230px; width:400px; overflow:hidden; ul { position:absolute; top:0; left:0; width:800px; padding-bottom:30px; li { position:relative; float:left; width:340px; height:220px; padding:0 30px 30px; label, input { display:block; } label { font-size:12px; line-height:1em; font-weight:bold; padding:10px 0 5px 0; color:#FFF; } span { display:block; color:#FFD747; } input { border:none; padding:5px; margin: 0; font-size:12px; line-height:1em; width:330px; } .validation { margin-top:30px; float:right; padding:5px 14px; font-size:15px; line-height:1em; width:auto; position:absolute; right:30px; bottom:30px; } small { color:#FFF; display:inline-block; padding-top:5px; } .bt { width:auto; display:block; color:#FFF; background-color:transparent; border:none; padding:10px 0 0; margin:0; font-size:12px; line-height:1em; font-family:arial, sans-serif; text-decoration:underline; cursor:pointer; } .btretour { margin-top:30px; float:left; padding:5px 14px; font-size:15px; line-height:1em; width:auto; position:absolute; left:30px; bottom:30px; } } } } } } .page { position:relative; z-index:0; width:@width; margin:0 auto; padding:140px 0 0 0; .header { -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position:absolute; top:0; left:0; z-index: 1000; width:@width; height:145px; .tf { position:absolute; right:15px; top:15px; .facebook { display:inline-block; height:16px; width:66px; margin-left:5px; text-indent:@indent; } .twitter { height:16px; width:59px; margin-left:5px; display:inline-block; text-indent:@indent; } } .acces { position:absolute; bottom:60px; right:180px; h2 { padding-bottom:10px; } a { display:inline-block; padding:5px 5px 4px 13px; margin:0 5px; text-transform:uppercase; text-align:center; line-height:1em; } input.text { border:none; display:inline-block; background-color:#FFF; height:14px; padding:2px 4px; color:#ea7483; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input.envoyer { display:inline-block; border:none; background-color:#ea7483; height:18px; padding:2px 4px; color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:pointer; } } .navbar { -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position:absolute; bottom:0; left:0; width:@width; height:30px; ul { width:@width; li { float:left; position:relative; a { display:block; height:21px; padding:9px 10px 0 10px; font-size:10px; line-height:1em; font-family:Arial, sans-serif; text-transform:uppercase; text-align:center; cursor:pointer; } ul { display:none; position:absolute; z-index:1; top:30px; left:0; width:auto; height:auto; li { padding:0; margin:0; width:auto; min-width:150px; float:none; a { border:none; font-size:10px; width:auto; padding:9px 9px 0 9px; text-align:left; white-space:nowrap; } ul { display:none; position:absolute; z-index:1; top:0; left:100%; width:auto; height:auto; li { padding:0; margin:0; width:auto; float:none; a { border:none; font-size:10px; width:auto; padding:9px 9px 0 9px; text-align:left; white-space:nowrap; } } } } } } .noborder > a { border: none; padding:9px 11px 0 12px; } } } } .container { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius: 10px; margin-top:10px; width:@width; padding:15px 0; overflow:hidden; height:1%; .metions { padding:20px 40px 20px 40px; text-align:justify; h5 { padding-bottom:10px; font-weight:bold; } strong { font-weight:bold; } } .carte { overflow:hidden; padding:20px 40px 20px 40px; .colleft { float:left; width:410px; padding:20px; } .colright { float:left; width:410px; padding:20px; } .colleft, .colright { p { text-align:justify; padding-bottom:10px; strong { font-weight:bold; } } h4 { font-size:16px; } h4, h5 { padding-bottom:10px; font-weight:bold; } img { display:block; margin-top:20px; } .pdf { display:inline-block; padding:20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } } } .guide { overflow:hidden; padding:20px 40px 20px 40px; .colleft { float:left; width:355px; height:375px; padding:20px; background-color:#e7e0de; p { padding-bottom:10px; text-align:justify; strong { font-weight:bold; } a { color:#ec7380; } } h4 { font-weight:bold; color:#ec7380; padding-bottom:10px ; } } .colright { padding-left:39px; margin-left:35px; float:left; } } .focus { position:relative; overflow:hidden; margin:0 15px; height:390px; padding-bottom:28px; .selecteur { position:absolute; bottom:2px; left:0; a { display:block; float:left; width:23px; height:18px; margin-right:5px; text-align:center; padding-top:5px; font-size:18px; } } ul { z-index:0; position:absolute; top:0; left:0; height:390px; li { position:relative; height:390px; float:left; width:946px; .pub { display:block; position:absolute; z-index:1; width:298px; height:114px; text-indent:@indent; } .pub_1 { right:5px; top:5px; embed { position:absolute; top:0; left:0; width:298px; height:114px; } } .pub_2 { right:5px; top:133px; embed { position:absolute; top:0; left:0; width:298px; height:114px; } } .pub_3 { right:5px; bottom:5px; embed { position:absolute; top:0; left:0; width:298px; height:114px; } } img { display:block; position:absolute; top:0; left:0; z-index:0; } } } } .section-promotion { margin:15px 15px 0 15px; padding-top:15px; clear:both; &.alt { margin:0 15px 0 15px; padding:0; } h2 { padding:0 0 5px 0; font-size:18px; font-weight:bold; text-transform:uppercase; } .promotion { position:relative; overflow:hidden; margin:0; height:200px; .prev, .next { position:absolute; height:200px; width:20px; display:block; text-indent:@indent; z-index:1; } .prev { top:0; left:0; } .next { top:0; right:0; } ul { position:absolute; top:0; left:20px; height:200px; z-index:0; li { position:relative; float:left; width:222px; height:200px; margin:0 2px; a { border:none; img { position:absolute; top:0; left:0; z-index:0; } span { position:absolute; bottom:2px; left:2px; z-index:1; width:198px; padding:10px; text-align:center; text-transform:uppercase; font-weight:bold; line-height:1em; } } } } } } .lists-header { position:relative; height:140px; .nombre { padding-top:25px; position:absolute; top:17px; left:10%; width:86px; height:61px; font-weight:bold; font-size:29px; text-align:center; small { padding-top:3px; display:block; font-size:18px; } } h1 { position:absolute; top:30px; left:25%; width:130px; font-size:18px; font-weight:bold; text-align:left; line-height:1.1em; } ul { padding-left:15px; position:absolute; top:13px; left:45%; li { font-size:14px; font-weight:bold; padding:5px 0; span { display:inline-block; width:130px; } } } } .lists { display: block; margin: 15px 0 0 0; span { display: inline-block; padding: 2px 4px; background: #675156; color: #FFF; } a { display: inline-block; padding: 2px 4px; background:#ea7484; color: #fff; &:hover { background: #000; color: #FFF; } } } .lists { padding:0 15px; .list { position:relative; width:inherit; height:114px; margin-bottom:2px; overflow:hidden; height::1%; img { position:absolute; top:0; left:0; display:block; height:114px; width:165px; } .pictos { margin:10px; position:absolute; top:0; right:95px; } .pictos { .picto-hebergement, .picto-mariage, .picto-seminaire, .picto-ouverture, .picto-wifi, .picto-parking, .picto-climatisation, .picto-piscine, .picto-vestiaire, .picto-mobilier, .picto-handicape, .picto-multimedia { width:32px; height:34px; margin-right:3px; float:left; } } .content { position:absolute; top:0; left:165px; height:114px; width:785px; h2 { position:absolute; top:10px; left:10px; text-transform:uppercase; font-weight:bold; font-size:14px; line-height:1.2em; small { display:block; font-size:9px; font-weight:normal; } } table { position:absolute; left:10px; bottom:10px; tr td { text-transform:uppercase; font-weight:bold; padding:3px 10px 0 0; } } .description { position:absolute; bottom:10px; width:520px; left:150px; font-size:11px; } .liens { position:absolute; top:0; right:0; width:100px; a { display:block; width:inherit; text-align:center; text-transform:uppercase; font-weight:bold; font-size:12px; line-height:1em; } } } } } .detail { position:relative; margin:0 15px; overflow:hidden; height:1%; &.alt { margin:0; padding-top:10px; } h1 { position:relative; padding:10px 0 11px 10px; text-transform:uppercase; font-weight:bold; font-size:16px; line-height:1em; a { position:absolute; right:7px; top:7px; display:inline-block; padding:5px 5px 5px 13px; text-transform:uppercase; text-align:center; line-height:1em; font-size:11px; font-weight:normal; } select { display:inline-block; margin:-3px 0 0 20px; } } .infos { width:425px; h2 { font-weight:bold; font-size:20px; } p { padding-top:10px; line-height:1.3em; text-align:justify; } } .contact { float:left; padding:50px 0 50px 50px; h2 { padding-top:10px; font-weight:bold; font-size:18px; line-height:1em; } p { padding-top:10px; font-weight:bold; line-height:1.3em; } } .description { float:left; padding:10px 0 10px 10px; img { display:block; margin:0 10px 30px 0; } .coordonnees { position:absolute; top:65px; left:202px; width:200px; p { font-weight:bold; padding-bottom:10px; a { display:block; } } } .pictos, .loisirs { margin:10px; width:402px; h2 { padding-bottom:10px; text-transform:uppercase; line-height:1em; font-size:14px; font-weight:bold; } p { clear:both; display:block; font-weight: bold; } } .pictos { .picto-hebergement, .picto-mariage, .picto-seminaire, .picto-ouverture, .picto-wifi, .picto-parking, .picto-climatisation, .picto-piscine, .picto-vestiaire, .picto-mobilier, .picto-handicape, .picto-multimedia { width:32px; height:34px; margin-right:3px; float:left; } } .loisirs { clear:both; padding-top:30px; table tr td { padding-left:10px; line-height:1.3em; b { font-weight:bold; width:90px; display:inline-block; } } } } .onglets { float:right; right:10px; width:490px; padding:10px 10px 10px 0; .barOnglets { overflow:hidden; height:1%; a { display:block; width:auto; float:left; span { display:inline-block; text-align:center; text-transform:uppercase; font-weight:normal; font-size:12px; line-height:1em; padding:5px 15px 3px 15px; } } } .onglet1 { p { padding:5px; } table { margin-top:5px; width:490px; margin-bottom:5px; tr th, tr td { font-size:11px; line-height:1em; font-weight:bold; padding:5px; text-align:center; } } small { display:block; font-size:9px; line-height:1.3em; } } .onglet1, .onglet2, .onglet3, .onglet4, .onglet5 { display:none; } .onglet2 { position:relative; width:490px; height:345px; overflow:hidden; .prev, .next { position:absolute; z-index:1; top:0; width:22px; height:345px; text-indent:@indent; } .prev { left:0; } .next { right:0; } ul { position:absolute; z-index:0; height:inherit; top:0; left:0; li { float:left; display:block; width:490px; height:inherit; img { display:block; width:inherit; height:inherit; } } } } .onglet4 div { padding:10px; clear:both; overflow:hidden; height:1%; h3 { font-weight:bold; text-transform:uppercase; font-size:12px; line-height:1.3em; } p { padding-top:5px; a { display:inline-block; padding-right:20px; } b { font-weight:bold; } } } } .onglets_2 { float:right; right:10px; width:950px; padding:0 0 0 0; .barOnglets { overflow:hidden; height:1%; a { display:block; width:auto; float:left; span { display:inline-block; text-align:center; text-transform:uppercase; font-weight:normal; font-size:12px; line-height:1em; padding:5px 15px 3px 15px; } } } .onglet1 { overflow:hidden; .colleft { text-align:justify; float:left; width:389px; padding:80px 20px 20px 20px; h3 { font-weight:bold; font-size:1.3em; padding-bottom:20px; } } .collright { float:left; padding:20px; width:481px; img { display:block; width:481px; } } } .onglet2, .onglet3 { overflow:hidden; .colleft { float:left; width:435px; padding:20px; } .colright { float:left; padding:20px; width:435px; } } .onglet3 { .colright { img { display:block; padding-top:20px; } } } .onglet1, .onglet2, .onglet3, .onglet4, .onglet5, .onglet6 { strong { padding-top:10px; font-weight:bold; display:inline-block; } ul { padding-left:30px; li { list-style:disc; list-style-position:outside; } } display:none; } .onglet4, .onglet6 { #MainContent_Panel_Guide_Particulier, #MainContent_Panel_Guide_Pro { padding:0; margin:0; width:950px; h1 { margin:0; border:none; padding:20px 20px 0 20px; } } .guide-particulier, .guide-pro { margin:0; padding:0 0 20px 0; width:950px; input, textarea { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } ul { li { list-style:none; } } } .formulaire-pied-de-page { margin:0; } } .onglet5 { height:345px; padding:20px; position:relative; overflow:hidden; .diapoOnglet { position:absolute; top:20px; left:50%; margin-left:-320px; width:640px; height:345px; overflow:hidden; .prev, .next { position:absolute; z-index:1; top:0; width:22px; height:345px; text-indent:@indent; } .prev { left:0; } .next { right:0; } ul { position:absolute; z-index:0; height:inherit; top:0; left:0; padding:0; li { float:left; display:block; width:640px; height:inherit; img { display:block; width:inherit; height:inherit; } } } } } .onglet4 div { padding:10px; clear:both; overflow:hidden; height:1%; h3 { font-weight:bold; text-transform:uppercase; font-size:12px; line-height:1.3em; } p { padding-top:5px; a { display:inline-block; padding-right:20px; } b { font-weight:bold; } } } } .liens { position:relative; clear:both; padding:5px 150px 5px 10px; text-align:right; a { display:inline-block; padding:0 5px; line-height:1em; font-size:11px; } .facebook { position:absolute; top:5px; right:69px; display:inline-block; height:16px; width:66px; margin-left:5px; text-indent:@indent; padding:0; } .twitter { position:absolute; top:5px; right:5px; height:16px; width:59px; margin-left:5px; display:inline-block; text-indent:@indent; padding:0; } } } .multicriteres, .mots-clefs, .geographique { margin:0 15px; h1 { position:relative; padding:10px 0 12px 25px; font-size:18px; line-height:1em; } } .multicriteres { position:relative; padding-bottom:30px; label { padding:30px 0 0 50px; display:block; font-size:16px; line-height:1em; font-weight:bold; padding-bottom:10px; } input { border:none; padding:5px; margin: 0 0 0 50px; font-size:12px; line-height:1em; width:660px; } .validation { position:absolute; top:107px; right:50px; display:block; text-align:center; font-weight:bold; line-height:1em; width:86px; height:63px; padding-top:23px; } } .mots-clefs { overflow:hidden; height:1%; ul li { padding:30px 50px; float:left; ul li { padding:5px 0 0 0; float:none; h2 { font-size:16px; line-height:1em; font-weight:bold; padding-bottom:10px; small { display:block; font-size:11px; line-height:1em; font-weight:normal; } } select { width:150px; option { font-size:12px; line-height:1em; } } .validation { margin-top:20px; display:block; text-align:center; font-weight:bold; line-height:1em; width:86px; height:63px; padding-top:23px; } } } } .geographique {} .formulaire-h1 { position:relative; padding:10px 0 8px 10px; text-transform:uppercase; font-weight:bold; font-size:12px; line-height:1.2em; margin:0 15px; } .guide-pro, .guide-particulier, .newsletter { position:relative; margin:0 15px; padding-bottom:50px; overflow:hidden; height:1%; h5 { padding-top:20px; text-align: center; font-weight: bold; font-size: 16px; color: #675156; } ul { margin:30px 0; padding:0 30px; float:left; li { h2 { font-weight:bold; } label { display:inline-block; width:90px; font-weight:bold; } input { border:none; padding:5px; margin: 0 0 5px 0; font-size:12px; line-height:1em; width:305px; display:inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } textarea { border:none; padding:5px; margin: 0 0 5px 93px; font-size:12px; line-height:1em; width:305px; resize: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } select { margin: 0 0 5px 0; } .padd80 { margin-left:93px; } } .txta { position:relative; label { position:absolute; top:5px; } textarea { color:#675156; } } } small { position:absolute; bottom:15px; left:15px; } .validation { padding:5px 14px; font-size:15px; line-height:1em; position:absolute; bottom:15px; right:15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } } .guide-particulier .total { margin:0 0 30px 0; } .guide-particulier .total li { padding-right:100px; float:left; } .guide-particulier .total li h2 { padding-bottom: 5px; } .guide-particulier .total li textarea { margin:0; width:300px; height:50px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .guide-particulier .left .padd { padding-top:10px; padding-bottom:5px; } .guide-particulier .center .padd { padding-top:5px; } .guide-particulier .center, .guide-particulier .right { margin-top:44px; } .guide-particulier ul li input { width:180px; font-weight:normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .guide-particulier ul li span.radio input { border:auto; padding:auto; margin:0 5px 0 0; width:auto; display:auto; } .guide-particulier .right li { font-weight:bold; } .guide-particulier .right .padd { padding-top:10px; padding-bottom:5px; } .guide-particulier ul li span.radio label { display:auto; margin:0 10px 0 0; width:auto; font-weight:bold; } .guide-particulier ul li textarea { width:180px; font-weight:normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .formulaire-pied-de-page { position:relative; padding:10px; text-transform:uppercase; font-weight:bold; font-size:9px; line-height:1.2em; margin:0 15px; } .prestataires-h1 { position:relative; padding:10px 0 8px 10px; text-transform:uppercase; font-weight:bold; font-size:18px; line-height:1em; margin:0 15px; } .prestataires { overflow:hidden; height:1%; margin:0 0 0 15px; .prestataire { position:relative; overflow:hidden; float:left; width:178px; height:216px; margin-top:15px; margin-right:15px; img { display:block; width:174px; position:absolute; top:2px; left:2px; z-index:0; } p { width:158px; z-index:1; position:absolute; bottom:0; left:0; padding:10px; a { text-align:right; display:block; padding-top:10px; } } } } } .footer { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius: 10px; position:relative; margin-top:5px; width:@width; height:40px; padding-top:15px; p { text-align:center; a { display:inline-block; padding:0 5px; } } .copyright-mentions { position:absolute; bottom:0; right:0; padding: 0 15px 5px 0; font-size:10px; a { display:inline; padding:0; } } } } .colLeft { float:left; width:560px; padding:15px; h2 { font-size:16px; font-weight:bold; padding-bottom:1.2em; } h3 { font-size:14px; font-weight:bold; padding-bottom:1.2em; } h4 { font-size:12px; font-weight:bold; padding-bottom:1.2em; } p { text-align:justify; line-height:1.6em; padding-bottom:1.3em; strong { font-weight:bold; } } ul { padding-left:40px; li { padding-bottom:1.3em; text-align:justify; list-style-type:disc; line-height:1.6em; strong { font-weight:bold; } } } } .colRight { float:right; width:340px; padding:15px 15px 15px 0; } }