/* Theme Name: Camping Pyrénéen Luchon Description: Theme principal Pyrénéen Author: Inaxel Version: 0.1.0 */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ * { margin: 0; padding: 0; } html, button, input, select, textarea { font-family: 'Museo300Regular'; color: #7f9c38; } body { font-size: 0.93em; line-height: 1.4; background: url("img/bg_global.png"); } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* * List, Link and Text default style. */ a { font-size: 20px; outline: none; color: #7f9c38; text-decoration: none; transition-property: all; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; transition-duration: .4s; -moz-transition-duration: .4s; -webkit-transition-duration: .4s; -o-transition-duration: .4s; } a:hover { color: #b0d063; } li, p { font-size: 16px; line-height: 1.3em; color: #434343; list-style-type: none; } /* * Title default style (h1, h2, h3, h4). */ #title { margin: 0 0 25px 0; } h1 { font-size: 25px; color: #3387bd; font-family: 'Museo300Regular'; } h2 { font-size: 28px; color: #3387bd; } #sep { width: 100%; height: 2px; float: left; background-color: #1a6391; } /* * Classe "clearfix". */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* ============================================================================= Typography ========================================================================== */ .Museo300Regular { font-family: 'Museo300Regular'; font-weight: normal; font-style: normal; } .Museo500Regular { font-family: 'Museo500Regular'; font-weight: lighter; font-style: normal; } .Museo700Regular { font-family: 'Museo700Regular'; font-weight: normal; font-style: normal; } .BreuerCondensedRegular { font-family: 'BreuerCondensedRegular'; font-weight: normal; font-style: normal; } .SegoeScriptRegular { font-family: 'SegoeScriptRegular'; font-weight: normal; font-style: normal; } .SegoeScriptBold { font-family: 'SegoeScriptBold'; font-weight: normal; font-style: normal; } .exergue { color: #ec138d; } /* ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Style principal "camping Le Pyréneen" ========================================================================== */ #container { width: 100%; height: 100%; display: flex; flex-direction: column; } /* ========================================================================== Mise en forme générale des boutons ========================================================================== */ /* Bouton green et pink */ #btn_green, #btn_pink { width: 170px; height: 44px; margin: 0 60px; position: absolute; bottom: 20px; z-index: 2; } #btn_green_long_recherche { position: absolute; bottom: 140px; z-index: 2; } #btn_green_long_tarif { position: absolute; bottom: 70px; z-index: 2; } #btn_green_long_reservation { position: absolute; bottom: 20px; z-index: 2; } #btn_green_long_recherche #bg_btn, #btn_green_long_tarif #bg_btn, #btn_green_long_reservation #bg_btn, #btn_green #bg_btn, #btn_pink #bg_btn { position: absolute; top: 0; left: 0; z-index: -2; } #btn_green .btn_green_Over, #btn_green_long_recherche .btn_green_long_recherche_Over, #btn_green_long_tarif .btn_green_long_tarif_Over, #btn_green_long_reservation .btn_green_long_reservation_Over, #btn_pink .btn_pink_Over { position: absolute; top: 0; left: 0; z-index: -1; display: none; } #btn_green a { width: 100%; height: 23px; padding: 7px 0; font-size: 20px; text-align: center; display: block; color: #647637; /*text-shadow: 0 1px #526d00;*/ } #btn_green a:active { line-height: 1.5em; } #btn_pink a { width: 100%; height: 23px; padding: 7px 0; font-size: 20px; text-align: center; display: block; color: #154768; /*text-shadow: 0 1px #5a012e;*/ } #btn_pink a:active { line-height: 1.5em; } /* ========================================================================== Header ========================================================================== */ header { width: 100%; height: 345px; margin: 0 auto; position: relative; } #line_top { width: 100%; height: 5px; position: absolute; top:0; z-index: 5; background-color: #b0d063; } #logo { width: 686px; height: 257px; margin: -55px auto 0; background: url("img/logo.png") no-repeat; position: relative; } #rating { position:absolute; top:40px;} h1 #camping_qualite { width: 85px; height: 85px; display: block; position: absolute; right: 11px; top: 11px; z-index: 10; } h1 #camping_qualite img { width: 100%; height: 100%; } h1 #camping2be { position: absolute; left: 11px; top: 11px; } #decor_sapin_left { display: none; width: 266px; height: 343px; position: absolute; left: 0; top: 0; z-index: 2; background: url("img/decor_sapin_left.png") no-repeat; } #decor_sapin_right { display: none; width: 266px; height: 343px; position: absolute; right: 0; top: 0; z-index: 2; background: url("img/decor_sapin_right.png") no-repeat; } /* Téléphone */ #telephone { width: 158px; height: 32px; position: relative; top: 2px; float: left; background: url("img/bg_trad.png") no-repeat; padding-top:3px; text-align:center; font-size:14pt; color:#ffffff;} /* Réservation top */ #top_resa { width: 120px; height: 32px; position:absolute; right:95px; top: 2px; background: url("img/bg_resa.png") no-repeat; padding-top:3px; text-align:center; font-size:14pt; color:#ffffff;} #top_resa:hover {background: url("img/bg_resa_O.png") no-repeat;} /* Module traduction */ #social-trad { width: 1200px; height: 50px; margin: 0 auto; position: relative; z-index: 4; } #traduction { width: auto; height: 32px; position: relative; top: 2px; float: left; /*background: url("img/bg_trad.png") no-repeat; */} #traduction .transposh_flags { margin: 9px 16px; } #traduction input[type="checkbox"] { margin: 2px 5px 0 12px; } #traduction ul { position: absolute; top: 10px; left: -160px; } #traduction ul ul { left: 0; position: relative; } #traduction li a img { position: relative; top: -11px; left: 158px; } #traduction #tr_credit { display: none; } /* Icône facebook */ #facebook { width: 40px; height: 40px; margin:0 5px 0; position:absolute; right:0px; top: 2px; background: url("img/bg_facebook.png") no-repeat; } #facebook a { width: 100%; height: 80%; padding: 2px 0 0; display: block; text-align: center; } #facebook a img { width: 22px; height: 23px; } #facebook a img.facebook_Over { display: none; position: absolute; top: 6px; left: 9px; } /* Icône instagram */ #instagram { width: 40px; height: 40px; position:absolute; right:50px; top: 2px; background: url("img/bg_facebook.png") no-repeat; } #instagram a { width: 100%; height: 80%; padding: 2px 0 0; display: block; text-align: center; } #instagram a img { width: 22px; height: 23px; } #instagram a img.instagram_Over { display: none; position: absolute; top: 6px; left: 9px; } /* Menu de navigation */ #nav { width: 100%; height: 61px; margin: 10px 0 0 0; } #nav.accueil { background-color: rgba(255, 255, 255, 0.7); } #nav .nav { width: 1114px; height: 67px; margin: 0 auto; background: url("img/bg_menu.png") no-repeat; } #title_menu { display: none; } #nav li { width: 185px; height: 100%; float: left; } #nav li.current-menu-item a, #nav li.current_page_item a { color: #b0d063; } #nav li:hover a { color: #b0d063; } #nav li a { width: 100%; height: 21px; padding: 15px 0; float: left; text-align: center; font-size: 22px; line-height:1.5; } /* Sous-menu */ #nav .sub-menu { display: none; width: 200px; height: auto; padding: 8px 13px; position: absolute; top: 330px; z-index: 5; background-color: rgba(73, 96, 19, 0.7); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; box-shadow: 0 -1px rgba(255, 255, 255, 0.4); } #nav li.menu-item-20 .sub-menu:before, #nav li.menu-item-20 .sub-menu:after { left: 40%; } #nav li.menu-item-21 .sub-menu:before, #nav li.menu-item-21 .sub-menu:after { left: 41%; } #nav li.menu-item-22 .sub-menu:before, #nav li.menu-item-22 .sub-menu:after { left: 41%; } #nav .sub-menu:after, #nav .sub-menu:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #nav .sub-menu:after { top: -32px; border-color: rgba(73, 96, 19, 0); border-bottom-color: rgba(73, 96, 19, 0.8); border-width: 16px; margin-left: -15px; } #nav .sub-menu:before { top: -34px; border-color: rgba(255, 255, 255, 0); border-bottom-color: rgba(255, 255, 255, 0.5); border-width: 17px; margin-left: -16px; } #nav .sub-menu #box_over { width: 100%; height: 30px; position: absolute; top: -15px; left: 0; } #nav li:hover .sub-menu li { background: transparent; } #nav li:hover .sub-menu, #nav li:hover .sub-menu #box_over { display: block; } #nav .sub-menu li { width: 100%; height: 100%; float: none; } #nav .sub-menu li a { width: 100%; height: 100%; padding: 0; text-align: left; } #nav .sub-menu li.current-menu-item, #nav .sub-menu li.current_page_item { background-color: transparent; } #nav .sub-menu li.menu-item a { color: #c9e782; text-shadow: 0 1px #628410; } #nav .sub-menu li.menu-item:hover a { color: #fff; text-shadow: 0 1px #628410; transition-property: all; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; transition-duration: .4s; -moz-transition-duration: .4s; -webkit-transition-duration: .4s; -o-transition-duration: .4s; } #nav .sub-menu li.current-menu-item a { color: #fff; text-shadow: 0 1px #628410; } /* Slider */ #slidercontent { width: 100%; height: 785px; position: absolute; top: 0; left: 0; z-index: -2; overflow: hidden; } #sliderjcycle { width: 100%; height: 100%; } #bg_mask_slider { width: 100%; height: 140px; margin: 300px 0 0; background: url("img/bg_mask_slider.png") no-repeat; background-position:center; background-size: cover; } #sliderjcycle .img1 { width: 100%; height: 100%; background: url("slider/img1.jpg") no-repeat; background-position:center; background-size: cover; } #sliderjcycle .img2 { width: 100%; height: 100%; background: url("slider/img2.jpg") no-repeat; background-position:center; background-size: cover; } #sliderjcycle .img3 { width: 100%; height: 100%; background: url("slider/img3.jpg") no-repeat; background-position:center; background-size: cover; } #sliderjcycle .img4 { width: 100%; height: 100%; background: url("slider/img4.jpg") no-repeat; background-position:center; background-size: cover; } /* ========================================================================== Widget Réservation ========================================================================== */ /* Position du widget sur la page d'accueil */ #widget-area.accueil { float: left; } #widget-area.trad { color: #fff; font-weight: bold; text-shadow: 0 1px #000; } /* Fix place le calendrier au dessus de tout les éléments du site */ #ui-datepicker-div { z-index: 5 !important; } /* Widget Réservation */ #widget_resa { width: 276px; height: 506px; padding: 20px; position: relative; font-size: 20px; color: #7f9c38; background-color: #fff; border: 7px solid rgba(206, 206, 206, 0.7); box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } #widget_resa h3 { width: 100%; height: 50px; padding: 7px 0 0; font-size: 35px; text-align: center; text-transform: uppercase; border-top: 1px solid #7f9c38; border-bottom: 1px solid #7f9c38; } #widget_resa li { margin: 5px 0 0 0; font-size: 20px; } #widget_resa li.label { margin: 10px 0 0 0; } #widget_resa input[type="text"] { width: 97%; height: 40px; padding: 0 0 0 5px; color: #7f9c38; font-size: 20px; background-color: #cce395; border: 1px solid #7f9c38; } #widget_resa input[type="button"], #widget_resa #btn_green_long_tarif a, #widget_resa #btn_green_long_reservation a { width: 280px; height: 35px; display: block; line-height: 1.7em; background: transparent; border: none; color: #7f9c38; font-size: 20px; text-align: center; cursor: pointer; text-shadow: 0 1px #526d00; } #widget_resa #btn_green_long_tarif a:active, #widget_resa #btn_green_long_reservation a:active { line-height: 1.9em; } #widget_resa input[type="button"]:active { padding: 1px 0 0; } #widget_resa input[type="radio"] { margin: 0 0 0 10px; } /* ========================================================================== Modules page d'accueil ========================================================================== */ /* Page d'accueil */ #content.accueil { width: 1100px; margin: 30px auto 0; position: relative; z-index: 1; } #content.accueil #text #title { margin: 0; } /* Module Actualités */ .accueil #actus { width: 335px; height: 565px; float: left; margin: 0 50px 35px 0; color: #fff; } .accueil #actus #bloc_img { width: 330px; height: 225px; position: relative; z-index: 2; border: 3px solid #7f9c38; background-color: #fff; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } .accueil #actus #img_mask { width: 280px; height: 175px; margin: 25px; overflow:hidden; } .accueil #actus span.bloc_img_arrow { width: 39px; height: 24px; position: absolute; bottom: -21px; left: 150px; background: url("img/bloc_img_arrow_green.png") no-repeat; } .accueil #actus #text { width: 290px; height: 280px; margin: 10px 0 0; padding: 20px; position: relative; background-color: #7f9c38; border: 2px solid #668703; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } .accueil #actus h3#title.accueil { width: 100%; height: 45px; padding: 4px 0 0; font-size: 35px; text-align: center; text-transform: uppercase; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .accueil #actus h4 { font-size: 23px; color: #cce395; margin: 10px 0 0; } .accueil #actus time { font-size: 18px; color: #b0d063; } .accueil #actus p { color: #fff; font-size: 18px; } .accueil #actus #btn_suite { font-size: 20px; } .accueil #actus #btn_suite a { color: #cce395; margin: 0 0 0 20px; position: relative; } .accueil #actus #btn_suite a:hover { color: #fff; } .accueil #actus #btn_suite #arrow_suite_green { width: 10px; height: 11px; margin: 8px 0; position: absolute; display: block; background: url("img/arrow_suite_green.png") no-repeat; } /* Module Promotions */ .accueil #promos { width: 335px; height: 565px; float: left; margin: 0 50px 35px 0; color: #fff; } .accueil #promos #bloc_img { width: 330px; height: 225px; position: relative; z-index: 2; border: 3px solid #3387bd; background-color: #fff; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } .accueil #promos img.wp-post-image { width: 280px; height: 175px; margin: 25px; } .accueil #promos span.bloc_img_arrow { width: 39px; height: 24px; position: absolute; bottom: -21px; left: 150px; background: url("img/bloc_img_arrow_pink.png") no-repeat; } .accueil #promos #text { width: 290px; height: 280px; margin: 10px 0 0; padding: 20px; position: relative; background-color: #3387bd; border: 2px solid #1a6391; color: #fff; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } .accueil #promos h3#title.accueil { width: 100%; height: 45px; padding: 4px 0 0; font-size: 35px; text-align: center; text-transform: uppercase; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .accueil #promos h4 { font-size: 23px; color: #71b8e5; margin: 10px 0 0; } .accueil #promos time { font-size: 18px; color: #124768; } .accueil #promos p { color: #fff; font-size: 18px; } .accueil #promos #btn_suite { font-size: 20px; } .accueil #promos #btn_suite a { color: #71b8e5; margin: 0 0 0 20px; position: relative; } .accueil #promos #btn_suite a:hover { color: #fff; } .accueil #promos #btn_suite #arrow_suite_pink { width: 10px; height: 11px; margin: 8px 0; position: absolute; display: block; background: url("img/arrow_suite_pink.png") no-repeat; } /* ========================================================================== Content ========================================================================== */ /* page type - design basique pour toutes les pages */ #content { width: 1100px; margin: 25px auto 0; position: relative; z-index: 2; } #img_header { width: 100%; height: 375px; position: absolute; top: 0; overflow: hidden; z-index: -1; } #img_header img { width: 100%; height: auto; background-size: auto; } #bg_mask_img_header { width: 100%; height: 140px; margin: -100px 0 0; background: url("img/bg_mask_slider.png") no-repeat; background-position:center; background-size: cover; } #text { width: 730px; height: 100%; float: left; font-size: 20px; overflow: hidden; } #text #title { width: 100%; height: 35px; position: relative; margin: 0 0 35px; } #text #title h1 { font-size: 35px; float: left; padding: 0 15px 0 0; background: url("img/bg_global.png"); } #text #title #sep { position: absolute; bottom: 0; z-index: -1; } /* Styles génériques pour les pages catégories des articles */ #text.actualites h2, #text.Les h2, #text.actualites #sep, #text.Les #sep { background-color: #7f9c38; color: #7f9c38; } #text.promotions h2, #text.promotions h3, #text.promotions time, #text.promotions a, #text.Nos h2, #text.Nos h3, #text.Nos time, #text.Nos a { color: #883b8d; } #text.actualites ul, #text.promotions ul, #text.Les ul, #text.Nos ul { margin: 45px 0 0; } #text.actualites ul li, #text.promotions ul li { height: 210px; margin: 50px 0 0; font-size: 20px; } #text.actualites ul li p, #text.Les ul li p { width: 440px; float: left; border-left: 3px solid #cce395; padding: 0 0 0 15px; margin: 10px 0 0; } #text.promotions ul li p, #text.Nos ul li p { width: 440px; float: left; border-left: 3px solid #b58bb8; padding: 0 0 0 15px; margin: 10px 0 0; } #text.actualites ul li#single p, #text.Les ul li#single p, #text.promotions ul li#single p, #text.Nos ul li#single p { width: 710px; border: none; padding: 0; } #text.actualites ul li#single ul, #text.Les ul li#single ul, #text.promotions ul li#single ul, #text.Nos ul li#single ul { margin: 15px 0 0; } #text.actualites #content_text, #text.promotions #content_text { width: 440px; float: left; } #text.actualites ul li #img_mask_cat, #text.Les ul li #img_mask_cat { width: 265px; height: 180px; margin: 10px 0 0; float: right; overflow: hidden; border: 2px solid #7f9c38; } #text.promotions ul li #img_mask_cat, #text.Nos ul li #img_mask_cat { width: 265px; height: 180px; margin: 10px 0 0; float: right; overflow: hidden; border: 2px solid #883b8d; } #img_mask_cat img { width: 100%; height: 100%; } #text.actualites ul li #img_mask_single, #text.Les ul li #img_mask_single { width: 725px; height: 490px; margin: 25px 0 0; float: right; overflow: hidden; border: 2px solid #7f9c38; } #text.promotions ul li #img_mask_single, #text.Nos ul li #img_mask_single { width: 725px; height: 490px; margin: 25px 0 0; float: right; overflow: hidden; border: 2px solid #883b8d; } #img_mask_single img { width: 100%; height: 100%; } #text.actualites #btn_suite, #text.promotions #btn_suite, #text.Les #btn_suite, #text.Nos #btn_suite { margin: 10px 0 0; float: left; } #text.actualites #btn_suite a:hover, #text.Les #btn_suite a:hover { color: #b0d063; } #text.promotions #btn_suite a:hover, #text.Nos #btn_suite a:hover { color: #b58bb8; } #pagination { margin: 50px 0 0; font-size: 20px; text-align: center; } #text.promotions #pagination { color: #883b8d; } #text.actualites #pagination a, #text.promotions #pagination a { color: #434343; } #text.actualites #pagination a:hover { color: #7f9c38; } #text.promotions #pagination a:hover { color: #883b8d; } /* Styles génériques pour le contenu des pages */ .box_exergue { width: 280px; height: 100%; float: left; margin: 30px 20px 30px 0; padding: 15px; border: 5px solid #e2e2e2; } .box_exergue p { color: #fff; } .box_img { width: 500px; height: auto; float: right; margin: 30px 0; border: 5px solid #e2e2e2; overflow: hidden; } .box_img img { width: 100%; height: auto; } /* Styles spécifiques pour certains modules du plugin Visual Composer */ .wpb_text_column { margin: 0 0 10px !important; } .ui-widget-header { background: none; border: 2px solid #fff !important; } .ui-state-default { background: #b0d063 !important; width: 96.7%; border: 2px solid #fff !important; } .ui-state-default a { width: 100%; cursor: pointer !important; } .ui-widget-content { border: 1px solid #b0d063; } .wpb_single_image h2 { color: #7f9c38; font-size: 18px; text-align: center; } .wpb_single_image img { width: 100%; } .wpb_accordion h3 { padding: 5px 10px !important; } .wpb_accordion h3:hover, .wpb_accordion h3.ui-state-active { background: #cce395 !important; border: 2px solid #fff !important; } .wpb_accordion h3 span { width: 18px !important; height: 18px !important; top: 1.3em !important; left: auto !important; right: 2em !important; border: 1px solid #fff; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; background: url("img/toggle_open.png") no-repeat center #7f9c38 !important; } .wpb_accordion h3.ui-state-active span { background: url("img/toggle_close.png") no-repeat center #7f9c38 !important; } .wpb_row .wpb_text_column li:before { content:""; width: 6px; height: 6px; float: left; margin: 7px; display: block; border-radius: 30px; -webkit-border-radius: 30px; background-color: #7f9c38; } .wpb_separator { margin-bottom: 20px !important; } .ui-widget-content a { font-size: 17px; } .flexslider { overflow: hidden; border: 0 none !important; } .flexslider .slides img { height: auto; } .vc-carousel-slideline img { width: 100%; height: 100%; } .wpb_row { margin: 0 !important; } .vc_responsive .wpb_row .vc_span4 { width: 30.333% !important; margin: 20px 7px !important; } .content_region { width: 66% !important; } .content_region .bloc_violet { width: 94% !important; } /* Mise en forme "Viste guidée" */ .ui-tabs-panel { width: 66% !important; margin: 15px 0 0; } .wpb_tour_next_prev_nav { width: 440px; height: 30px; float: left; margin: 10px 0 0 230px; } .wpb_tour_next_prev_nav span { padding: 0 !important; } .wpb_content_element .wpb_tabs_nav li.ui-tabs-active, .wpb_content_element .wpb_tabs_nav li:hover { background-color: #cce395 !important; border: 2px solid #fff !important; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #7f9c38; } .wpb_tour img { width: 100%; } .wpb_tour .flexslider { margin: 0 0 20px !important; } .wpb_tour .flexslider .slides img { height: auto; } /* Mise en forme de bloc couleur personnalisé */ .bloc_vert { width: 29% !important; margin: 15px !important; background-color: #7f9c38; padding: 10px; border: 1px solid #668703; color: #fff; } .bloc_vert h3 { color: #fff; } .bloc_vert p { color: #fff; } .bloc_vert .wpb_single_image { border: 2px solid #fff; } .bloc_vert .wpb_single_image h2 { color: #fff; } .bloc_vert a { color: #cce395; } .bloc_vert a:hover { color: #fff; } .bloc_violet { width: 29% !important; margin: 15px !important; background-color: #883b8d; padding: 10px; border: 1px solid #57125c; color: #fff; } .bloc_violet .wpb_single_image { border: 2px solid #fff; } .bloc_violet .wpb_single_image h2 { color: #fff; } .bloc_violet p { color: #fff; } .bloc_violet a { color: #b58bb8; } .bloc_violet a:hover { color: #fff; } /* Réglage pour Tablepress */ .dataTables_wrapper { margin: 10px 0 0; } .tablepress th { width: 95px !important; background: #bc85c0 !important; color: #fff; text-shadow: none !important; } .tablepress th div { width: 100%; text-align: center; } /* Style pour les couleurs des en-tête des tableaux */ /*.page-id-390 .tablepress th.column-1, .page-id-390 .tablepress th.column-2, .page-id-390 .tablepress th.column-5, .page-id-394 .tablepress th.column-1, .page-id-394 .tablepress th.column-4, .page-id-394 .tablepress th.column-5, .page-id-394 .tablepress th.column-6, .page-id-396 .tablepress th.column-1, .page-id-396 .tablepress th.column-3 { background: #e1efb0 !important; color: #9ab251; } */ .page-id-394 .tablepress tbody tr td:first-child { width: 30%; } .page-id-390 .tablepress th.column-6, .page-id-394 .tablepress tbody tr:nth-child(4n-7) td, .page-id-394 .tablepress tbody tr.row-16 td, .page-id-394 .tablepress tbody tr.row-20 td { background: #e1efb0 !important; color: #9ab251; text-align: center; } .page-id-394 .tablepress tbody tr.row-18 td { background: #fff !important; color: #444; text-align: left; } .page-id-394 .tablepress tbody tr:last-child td { background: inherit !important; color: inherit; } /* Style pour la carte de France sur la page "Plan d'accès" */ .carteFrance { width: 60%; margin: 0 auto; display: block; } /* Colors for form validity */ input:invalid, textarea:invalid { background-color: #f0dddd; } /* Formulaire de contact */ iframe#contact { width: 100%; height: 900px; border: none; } /* ========================================================================== Sidebar ========================================================================== */ #widget-area { float: right; } /* Datepicker */ #ui-datepicker-div a { padding: 0; background: none !important; } #ui-datepicker-div .ui-datepicker-current-day a { color: #a744ad !important; } /* Module Actualités */ #widget-area #actus { width: 276px; height: 230px; margin: 25px 0 0; padding: 20px; position: relative; font-size: 16px; background-color: #fff; border: 1px solid #668703; color: #7f9c38; background-color: #fff; border: 7px solid rgba(206, 206, 206, 0.7); box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } #widget-area #actus #text { width: 100%; height: 100%; margin: 10px 0 0; } #widget-area #actus h3 { width: 100%; height: 50px; padding: 7px 0 0; font-size: 35px; text-align: center; text-transform: uppercase; border-top: 1px solid #7f9c38; border-bottom: 1px solid #7f9c38; } #widget-area #actus h4 { font-size: 22px; color: #a3c834; } #widget-area #actus time { font-size: 18px; color: #b0d063; } #widget-area #actus p { color: #668703; font-size: 16px; } #widget-area #actus #btn_suite { margin: 15px 0 0; font-size: 20px; } #widget-area #actus #btn_suite a { color: #444444; margin: 0 0 0 20px; position: relative; } #widget-area #actus #btn_suite a:hover { color: #8c8c8c; } #widget-area #actus #btn_suite #arrow_suite_grey { width: 10px; height: 11px; margin: 8px 0; position: absolute; display: block; background: url("img/arrow_suite_grey.png") no-repeat; } /* Module Promos */ #widget-area #promos { width: 276px; height: 230px; margin: 25px 0 0; padding: 20px; position: relative; font-size: 16px; background-color: #fff; border: 1px solid #668703; color: #883b8d; background-color: #fff; border: 7px solid rgba(206, 206, 206, 0.7); box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); } #widget-area #promos #text { width: 100%; height: 100%; margin: 10px 0 0; } #widget-area #promos h3 { width: 100%; height: 50px; padding: 7px 0 0; font-size: 35px; text-align: center; text-transform: uppercase; border-top: 1px solid #883b8d; border-bottom: 1px solid #883b8d; } #widget-area #promos h4 { font-size: 22px; color: #a744ad; } #widget-area #promos time { font-size: 18px; color: #b58bb8; } #widget-area #promos p { color: #883b8d; font-size: 16px; } #widget-area #promos #btn_suite { margin: 15px 0 0; font-size: 20px; } #widget-area #promos #btn_suite a { color: #444444; margin: 0 0 0 20px; position: relative; } #widget-area #promos #btn_suite a:hover { color: #8c8c8c; } #widget-area #promos #btn_suite #arrow_suite_grey { width: 10px; height: 11px; margin: 8px 0; position: absolute; display: block; background: url("img/arrow_suite_grey.png") no-repeat; } /* Logo partenaires */ #widget_partenaires { /*width: 660px; height: 75px;*/ display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid #7f9c38; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; overflow: hidden; } #widget_partenaires ul { margin: 15px 0 0; display: flex; align-items: center; justify-content: center; } #widget_partenaires .vc_wp_text.wpb_content_element { margin: 0 0 10px 0 !important; } #widget_partenaires li { width: auto; height: 65px; padding: 4px; float: left; } #widget_partenaires img { width: auto; height: 100%; } /* ========================================================================== Footer ========================================================================== */ footer { width: 100%; margin: 45px 0 0; position: relative; background-color: #cbcbcb; color: #073c56; box-shadow: inset 0 18px 22px rgba(0, 0, 0, 0.30); text-shadow: 0 1px rgba(255, 255, 255, 0.4); clear: both; } #decor_footer { width: 467px; height: 172px; position: absolute; top: -104px; left: 200px; background: url("img/decor_footer.jpg") no-repeat; } /* Copyright */ #bottom_footer { padding: 30px 0; height: auto; } #site-info { font-size: 14px; text-align: center; color: #454545; position: relative; } #site-info a, .copyrt a { font-size: 14px; color: #57125c; } #site-info a:hover, .copyrt a:hover { color: #ab3db2; } /* Logos partenaires (Camping2be & Camping Qualité) */ #logos-partenaire { width: 420px; margin: 15px auto 0; display: flex; justify-content: center; } #logos-partenaire a { width: auto; height: 130px; display: block; float: left; margin: 0 15px 0 0; } #logos-partenaire a img { height : 100%; margin: 0; } #logos-partenaire img { width: auto; height: 130px; float: left; margin: 0 15px 0 0; } /* Texte Ref */ #text-ref { width: 1100px; margin: 20px auto 0; padding-top: 15px; border-top: 1px solid #c6c6c6; text-align: center; color: #454545; } #text-ref p { font-size: 14px; } #text-ref a { font-size: 14px; color: #57125c; } #text-ref a:hover { color: #ab3db2; } /* ========================================================================== Style principal "camping de l'Arche" version responsive Smartphone (0-400) ========================================================================== */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } @media screen and (max-width : 800px) { * { text-shadow: none !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -o-box-shadow: none !important; } body { width: 100%; height: 100%; margin: 0 auto; padding: 0; font-size: 1.75em; } ::-webkit-selection { background: transparent; } ::-moz-selection { background: transparent; } ::selection { background: transparent; } /* Bouton green et pink */ #btn_green, #btn_pink { margin: 0 auto; position: relative; bottom: -20px; } #btn_green_long_recherche, #btn_green_long_tarif, #btn_green_long_reservation { width: 86%; } #btn_green_long_recherche #bg_btn, #btn_green_long_tarif #bg_btn, #btn_green_long_reservation #bg_btn, #btn_green #bg_btn, #btn_pink #bg_btn { width: 100%; } #btn_green .btn_green_Over, #btn_green_long_recherche .btn_green_long_recherche_Over, #btn_green_long_tarif .btn_green_long_tarif_Over, #btn_green_long_reservation .btn_green_long_reservation_Over, #btn_pink .btn_pink_Over { width: 100%; } /* Boutons pink sur le logo */ #btn_pink_logo { display: none; } /* Header "Logo" */ header { width: 100%; height: 100%; margin: 0; padding: 0; } #line_top { display: none; } #logo { width: 100%; height: 115px; margin: 0 auto; position: static; /*background: url("img/logo_smart.png") no-repeat center;*/ background-size: 250px 113px; background-position: center; } #decor_sapin_left, #decor_sapin_right { display: none; } h1 #camping_qualite { /*width: 70px; height: 70px;*/ right: 15px; top: 110px; } #rating { top: 100px;} #rating iframe { width:135px;height:135px;} /* Module traduction */ #btn_social-trad { width: 30px; height: 30px; position: absolute; right: 5px; top: 72px; z-index: 5; background: url("img/bg_btn_social-trad.png") no-repeat; background-size: 70%; background-position: center; background-color: #7f9c38; border: 4px solid #b0d063; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; } #social-trad { width: 100%; height: 35px; position: absolute; top: -35px; background-color: #7f9c38; border-bottom: 4px solid #b0d063; display: block !important; } #social-trad.open { top: 0px; } #traduction { width: auto; background: transparent; } #traduction a { margin: 0 2px; } /* Téléphone */ #telephone {background:none;width:auto;font-size:12pt;left:4px;top:4px;} /* Réservation Top */ #top_resa {width:auto;height:auto;border-radius:3px;background-image:none;background-color:#8c3096;padding:3px;right:75px;} /* Icône facebook */ #facebook { width: 40px; height: 354px; position: absolute; right: 0; top: 2px; background: transparent; } #facebook a { width: 100%; height: 30px; padding: 2px 0 0; display: block; text-align: center; } #facebook a img { width: 22px; height: 23px; } #facebook a img.facebook_Over { display: none; position: absolute; top: 6px; left: 9px; } /* Icône Instagram */ #instagram { width: 40px; height: 354px; position: absolute; right: 30px; top: 2px; background: transparent; } #instagram a { width: 100%; height: 30px; padding: 2px 0 0; display: block; text-align: center; } #instagram a img { width: 22px; height: 23px; } #instagram a img.facebook_Over { display: none; position: absolute; top: 6px; left: 9px; } /* Arrow down pour le bloc de navigation */ #nav:after, #nav:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #nav:after { top: 285px; margin: 0 -141px; border-color: rgba(127, 156, 56, 0); border-top-color: rgba(127, 156, 56, 0.8); border-width: 18px; } #nav:before { top: 285px; margin: 0 100px; border-color: rgba(255, 255, 255, 0); border-top-color: rgba(255, 255, 255, 0.5); border-width: 27px; } #nav #box_over { width: 100%; height: 30px; position: absolute; top: -15px; left: 0; } /* Menu de navigation */ #nav { width: 250px; height: 100%; margin: 125px auto 55px auto; position: static; background: none; overflow: hidden; } #nav .nav { background: none; } #nav ul.nav { width: 95%; height: 49px; position: relative; right: 0; top: 0; float: left; background-color: #fff; border: 6px solid rgba(255, 255, 255, 0.5); background-clip: padding-box; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; } #nav ul.nav_open { height: auto; z-index: 6; } #title_menu { width: 250px; height: 46px; padding: 18px 0; position: absolute; z-index: 2; text-align: center; display: block; } #nav_btn { width: 250px; height: 80px; position: absolute; z-index: 5; cursor: pointer; } #nav li { display: none; float: none; width: 100%; height: 69px; margin: 0; padding: 0; } #nav li:hover { background: transparent; } #nav li a { width: 100%; height: 23px; padding: 12px 0; float: left; font-size: 1.5em; text-align: center; line-height: 1.5; text-shadow: 0 1px #fff; } #nav li:hover a { color: #7f9c38; text-shadow: 0 1px #fff; } #nav li.current-menu-item, #nav li.current_page_item, #nav li.current_page_ancestor { display: list-item !important; height: 100% !important; position: relative; z-index: 2; overflow: hidden; background-color: #fff; } #nav li.current-menu-item a:hover, #nav li.current_page_item a:hover, #nav li.current_page_ancestor a:hover { color: #7f9c38; } #nav li.current_page_ancestor a { padding: 12px 0; color: #7f9c38; } /* Sous-menu pour le menu de navigation */ #nav .sub-menu { width: 100%; background-color: transparent; float: left; position: static; display: block; margin: -6px 0 0; padding: 0; } #nav .sub-menu li { width: 100%; float: left; } #nav .sub-menu li.menu-item a { width: 100%; font-size: 1.1em; text-align: center; color: #7f9c38; padding: 3px 0; text-shadow: 0 1px #fff; } #nav .sub-menu li.menu-item:hover a { color: #7f9c38 !important; text-shadow: 0 1px #fff; } #nav .sub-menu:before { display: none; } #nav .sub-menu:after { display: none; } #nav li:hover .sub-menu #box_over { display: none !important; } /* Slider */ #slidercontent { width: 100%; height: 320px; } #sliderjcycle { height: 320px; } #sliderjcycle .img1 { width: 100%; height: 100%; background: url("slider/img1_smart.jpg") no-repeat; background-position: center; background-size: cover; } #sliderjcycle .img2 { width: 100%; height: 100%; background: url("slider/img2_smart.jpg") no-repeat; background-position: center; background-size: cover; } #sliderjcycle .img3 { width: 100%; height: 100%; background: url("slider/img3_smart.jpg") no-repeat; background-position: center; background-size: cover; } #sliderjcycle .img4 { width: 100%; height: 100%; background: url("slider/img4_smart.jpg") no-repeat; background-position: center; background-size: cover; } /* Slider nav */ #bg_slidernav_content { display: none; } #bg_slidernav { background: transparent; border: none; } #slidernav { display: none; } #bg_mask_slider { width: 100%; height: 40px; position: absolute; margin: 0; left: 0; top: 280px; z-index: -1; background-size: 100% 100%; } /* Position du widget sur la page d'accueil */ #widget-area.accueil { float: none; clear: both; margin: 50px auto 0; } /* Widget Réservation */ #widget_resa { width: 78%; margin: 0 auto; } #widget_resa h3 { font-size: 30px; } #widget_resa input[type="button"], #widget_resa #btn_green_long_tarif a, #widget_resa #btn_green_long_reservation a { width: 100%; } /* Fix place le calendrier au dessus de tout les éléments du site */ #ui-datepicker-div { z-index: 5 !important; } /* Page d'accueil */ #content.accueil { width: 100%; height: 100%; margin: 225px auto 0; position: relative; } /* Page d'accueil - Module Actualités */ .accueil #actus { width: 100%; float: none; clear: both; margin: 0 auto; } .accueil #actus h4 { font-size: 22px; } .accueil #actus #text { width: 80%; margin: 10px auto 0; } .accueil #actus #bloc_img { width: 92%; height: 231px; margin: 0 auto; border: 4px solid #7f9c38; } .accueil #actus #bloc_img img { width: 100%; } .accueil #actus span.bloc_img_arrow { width: 100%; bottom: -21px; left: 0; background-position: center; } .accueil #actus #img_mask { width: 81%; margin: 28px; } /* Page d'accueil - Module Promotions */ .accueil #promos { width: 100%; float: none; clear: both; margin: 50px auto 0; } .accueil #promos h4 { font-size: 22px; } .accueil #promos #text { width: 80%; margin: 10px auto 0; } .accueil #promos #bloc_img { width: 92%; height: 231px; margin: 0 auto; border: 4px solid #3387bd; } .accueil #promos #bloc_img img { width: 81%; } .accueil #promos span.bloc_img_arrow { width: 100%; bottom: -21px; left: 0; background-position: center; } .accueil #promos img.wp-post-image { margin: 28px;} /* page type - design basique pour toutes les pages */ #content { width: 100%; margin: 165px auto 0; overflow: hidden; } #img_header { height: 360px; } #img_header img { width: auto; height: 100%; position: absolute; left: -100px; } #line_wave_bottom_header { top: 450px; } #text { width: 96%; padding: 0 5px; margin: 80px 0 0 0; font-size: 0.65em; float: none; clear: both; } #text #title { margin: 0 0 55px; } #text p { font-size: 1em; } #text.Nos time, #text.Les time { float: none; clear: both; margin-bottom: 0; } #text.actualites ul, #text.promotions ul, #text.Les ul, #text.Nos ul { height: 100%; } #text.actualites ul li, #text.promotions ul li { height: 100%; } #text.actualites #content_text, #text.promotions #content_text { height: 100%; } #text.actualites ul li p, #text.Les ul li p, #text.promotions ul li p, #text.Nos ul li p { width: 68%; margin: 15px 0 0; float: none; clear: both; } #text.actualites ul li #img_mask_cat, #text.Les ul li #img_mask_cat, #text.promotions ul li #img_mask_cat, #text.Nos ul li #img_mask_cat { width: 100%; float: none; clear: both; } #text.actualites ul li #img_mask_cat img, #text.Les ul li #img_mask_cat img, #text.promotions ul li #img_mask_cat img, #text.Nos ul li #img_mask_cat img { width: 100%; } #text.actualites ul li #img_mask_single, #text.Les ul li #img_mask_single, #text.promotions ul li #img_mask_single, #text.Nos ul li #img_mask_single { width: 100%; height: 100%; float: none; clear: both; } #text.actualites ul li#single p, #text.Les ul li#single p, #text.promotions ul li#single p, #text.Nos ul li#single p { width: 95%; height: 100%; float: none; clear: both; } #text.actualites #btn_suite, #text.promotions #btn_suite, #text.Les #btn_suite, #text.Nos #btn_suite { float: none; clear: both; margin: 15px 0; } #text #single { font-size: 1em !important; } #text #single h4 { margin: 15px 0 0; } #img_mask_single img { height: auto; } /* Position du widget sur les pages types */ #widget-area.main { position: static !important; float: none; clear: both; margin: 45px 0 0; } #widget-area.date { height: 100%; } #bg_mask_img_header { margin: 0; position: absolute; top: 225px; } /* Pages type - 3 blocs de couleurs */ .bloc_violet, .bloc_vert { width: auto !important; } /* Pages type - Module Actualités */ #widget-area #actus { display: none; } /* Pages type - Module Promos */ #widget-area #promos { display: none; } /* Pages type - Boutons pink sidebar */ #widget-area #nav_menu-2 h3 { font-size: 20px; } /* Classes pour le plugin Visual Composer */ .prestations_locations .wpb_separator { display: none; } .wpb_content_element.wpb_single_image img, .wpb_thumbnails .post-thumb img { width: 100%; } .wpb_accordion_section { width: 100%; height: auto; } .wpb_heading, .entry-content .wpb_heading { font-size: 22px; } .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header { width: 94%; } .wpb_accordion h3 span { right: 1em !important; } .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header a { width: 83%; } .wpb_content_element .wpb_tour_tabs_wrapper .wpb_tab, .wpb_content_element .wpb_accordion_wrapper .wpb_accordion_content { font-size: 17px; } .vc-carousel-indicators { display: none; } .vc_responsive div.vc_row-fluid div[class*="vc_span"] { margin: 15px 0; } .vc_responsive .wpb_tour .wpb_tour_tabs_wrapper .wpb_tabs_nav, .vc_responsive .wpb_tour .wpb_tab, .vc_responsive .wpb_tour_next_prev_nav { width: 100% !important; } .wpb_tour_next_prev_nav span.wpb_next_slide { width: 38%; padding: 0 35px 0 0 !important; } .wpb_tour_next_prev_nav span.wpb_prev_slide a, .wpb_tour_next_prev_nav span.wpb_next_slide a { font-size: 18px; } /* Styles génériques pour les tableaux du plugin Table Press */ .wpb_row thead div { font-size: 16px !important; } .wpb_row td { font-size: 1.1em; } .flexslider .slides img { height: auto; } /* Styles pour le module DatePicker */ #ui-datepicker-div { width: 240px; font-size: 0.65em; } /* Formulaire de contact c-Form 7 "Demande de documentation" */ .wpcf7 { height: 730px; } /* Footer */ footer { width: 100%; height: auto; float: left; border-top: 1px solid #9c9c9c; } /* Vidéo Street View */ #video_streetview { width: 100%; } /* Décor Footer et Logo Partenaires */ #widget_partenaires { width: 100%; height: auto; } #decor_partenaires { width: 100%; margin: 0 auto; position: relative; } #decor_footer { display: none; } #partenaires { width: 100%; top: -280px; left: 0; overflow: hidden; } #partenaires ul { width: 93%; height: 105px; margin: 10px auto 0; } #partenaires ul li { margin: 8px 5px; } #partenaires ul#bottom { height: 115px; } #partenaires ul#bottom li { margin: 20px 12px; } /* Texte de ref */ #text-ref { width: 100%; } /* Copyright */ #bottom_footer #site-info div { margin: 9px 0; padding: 0 7px; } .copyrt { padding: 0 30px !important; } } @media screen and (max-width : 480px) { #logos-partenaire { width: 100%; } #logos-partenaire a { height: 80px; } #logos-partenaire img { height: 80px; } }