@charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; font-size: 13px; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: 'great_vibesregular'; src: url('greatvibes-regular-webfont.eot'); src: url('greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'), url('greatvibes-regular-webfont.woff') format('woff'), url('greatvibes-regular-webfont.svg#great_vibesregular') format('svg'), url('greatvibes-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'source_sans_proregular'; src: url('sourcesanspro-regular-webfont.eot'); src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('sourcesanspro-regular-webfont.woff') format('woff'), url('sourcesanspro-regular-webfont.ttf') format('truetype'), url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'source_sans_prolight'; src: url('sourcesanspro-light-webfont.eot'); src: url('sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'), url('sourcesanspro-light-webfont.woff') format('woff'), url('sourcesanspro-light-webfont.ttf') format('truetype'), url('sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg'); font-weight: normal; font-style: normal; } /* =========================== END RESET =========================== */ /* ======================= TAGS AND CLASSES ======================== */ body { background: #000000 url(../fichiers/fichiers/configuration/backgroud.jpg) top center no-repeat; color: #000; font-family: Arial, sans-serif; padding-bottom: 10px; font-size: 13px; line-height: 19px; } h1 /*titre pages*/ { font: bold 22px Arial, sans-serif; margin-bottom: 6px; } h2 { font: bold 18px Arial, sans-serif; margin-bottom: 6px; } h3 { font: bold 16px Arial, sans-serif; margin-bottom: 6px; } h4 { font: bold 14px Arial, sans-serif; margin-bottom: 6px; } h5 { font: bold 12px Arial, sans-serif; margin-bottom: 6px; } h6 { font: bold 12px Arial, sans-serif; text-align: center; margin-bottom: 6px; } a { color: #333; text-decoration: underline; } a:hover { color: #666; } ul, ol { padding: 0 0 0 8px; margin-bottom: 15px; } li { margin: 0 0 5px 0; } div { position: relative; } p { margin-bottom: 15px; line-height: 19px; } embed, object, video { max-width: 100%; } input:focus, textarea:focus { background-color: #F3F3F3; } /* ==================== CLASSES ==================== */ .clear { clear: both; margin: 0; padding: 0; } .ligne { background-color: #000000; height: 1px; margin: 30px 0 25px 0; width: 100%; clear: both; } .lien_invisible { font: 0/0 a; text-shadow: none; color: transparent; } .separateur { height: 30px; } /* ======================= END TAGS & CLASSES ======================= */ /* ============================= BOXES ============================== */ #wrapper { width: 999px; max-width: 999px; margin: 0 auto; } /* Bannière -------------------------------------------------------- */ #banner { width: 999px; overflow: hidden: z-index: 290; } #banner2, #address { display: none; } .logo { width: 25%; position: absolute; left: 3%; top: 12%; } /* Menus -------------------------------------------------------- */ #menu_wrapper { width: 999px; min-height: 40px; height: auto !important; height: 40px; padding: 0; margin-bottom: 10px; background-color: #45263F; z-index: 291; font-size: 17px; } #menus li { position: relative; float: left; display: inline-block; margin: 0; height: 40px; } #menus, #menus ul { margin-bottom:0 !important; } #menus li:hover { cursor: pointer; background-color: #45263F; } #menus li a { color: #FFFFFF; height: 28px; padding: 6px 16px; text-decoration: none; white-space: nowrap; line-height: 42px; font-size: 16px; font-weight:bold; } #menus li:hover a, #menus li a:hover { color: #FFFFFF; text-decoration: none; } #menus li:hover ul.submenus { display: block; background-color: #45263F; } /* Sub-menus ------------------------------------------------------- */ #menus li ul.submenus { display: none; width: 220px; position: absolute; left: 0px; top: 40px; margin: 0; padding: 0; } #menus li ul.submenus li { float: none; display: block; height: auto; width: 220px; margin: 0; padding: 0; } #menus li ul.submenus li a { float: none; display: block; width: 214px; height: auto; text-decoration: none; white-space: normal; font-size: 14px; line-height: 17px; padding: 6px 9px 6px 15px; margin: 0; color: #FFFFFF; background-color: #45263F; } #menus li ul.submenus li a:hover { color: #FFFFFF; background-color: #45263F; } #btn_mobile { display: none; } /* Gauche ------------------------------------------------------- */ #contenu { width: 999px; padding: 0 0 2% 0; background-color: #ffffff; z-index: 220; line-height: 16px; } #contenu_padding { padding: 2% 3% 2% 3%; } #contenu_padding.accueil{ width: 56% !important; float: left !important; } #contenu iframe { border: solid #000000 1px; } #contenu_gauche { float: left; width: 56%; padding: 2% 3% 0 3%; z-index: 221; } #contenu_gauche img { max-width: 100%; max-height: 100%; } .contact_add { float: left; width: 38%; } .contact_map { float: right; width: 60%; } .width64, .width49, .width32, .width25, .width20 { float: left; } .width64 { width: 64%; } .width49 { width: 49%; } .width32 { width: 32%; } .width25 { width: 23%; } .width20 { width: 18%; } .width50td { width: 50%; } .width64 img, .width49 img, .width32 img, .width25 img, .width20 img, .width50td img { max-width: 100%; height: auto !important; } /* Galery elements -------------------------------------------------------- */ .galery-wrapper, .photo-wrapper { width: 100%; padding: 10px 0; } .photo-wrapper.accueil { width: 100% !important; } .galery-wrapper .galery { width: 188px; height: 150px; margin:0 7px 22px 0; text-align: center; line-height: 15px; display: block; float: left; } .galery-wrapper .galery img { margin-bottom: 3px; border: solid #000000 1px; width: auto !important; height: 134px; } .photo-wrapper a { width: auto; margin:0 26px 22px 0; display:block; float:left; } .photo-wrapper a img { width: auto !important; height: 134px !important; border: solid #000000 1px; } /* Droit -------------------------------------------------------- */ #contenu2 { float: right; width: 32.6%; margin-right: 1%; padding: 2% 2%; z-index: 221; background-color: #e9e9e9; line-height: 1.1em; } .dates { font-weight: bold; color: #444444; line-height: 0.9em; margin: 0 8px 0 0; } .news_title { font-size: 1.1em; font-weight: bold; color: #000000; line-height: 1em; } /* Footer ------------------------------------------------------- */ #footer_wrapper { width: 979px; height: auto !important; padding: 0.5% 10px; background-color: #45263F; margin-top: 8px; clear: both; overflow: hidden; } #footer_wrapper a { text-decoration: none; color: #FFFFFF; } #footer_wrapper p { color: #FFFFFF; margin: 0; line-height: 23px; font-size: 11px; } #footer_wrapper p#footer_left { margin-top: 2px; float: left; } #footer_wrapper p#footer_right { float: right; } #footer_wrapper p#footer_right span#suivez2 { display: none; } #footer_wrapper p#footer_right span#suivez1 { float: right; margin-right: 6px; margin-top: 2px; } .socials { display: block; float: right; margin: 0 6px 0 0; padding: 0; width: 26px; height: 26px; } #facebook { background: url(../images/socials_small.png) 0 -26px no-repeat; } #facebook:hover { background: url(../images/socials_small.png) 0 0 no-repeat; } #twitter { background: url(../images/socials_small.png) -26px -26px no-repeat; } #twitter:hover { background: url(../images/socials_small.png) -26px 0 no-repeat; } #linked_in { background: url(../images/socials_small.png) -52px -26px no-repeat; } #linked_in:hover { background: url(../images/socials_small.png) -52px 0 no-repeat; } #rss { background: url(../images/socials_small.png) -130px -26px no-repeat; } #rss:hover { background: url(../images/socials_small.png) -130px 0 no-repeat; } /* Footer sur 2 lignes =============================================================== */ @media screen and (max-width: 750px) { #footer_wrapper { padding-bottom: 1%; } #footer_wrapper p#footer_left { clear: both; margin-bottom: 5px; } #footer_wrapper p#footer_right { float: left; clear: both; width: 100%; } #footer_wrapper p#footer_right span#suivez1 { display: none; } #footer_wrapper p#footer_right span#suivez2, #footer_wrapper p#footer_right a.socials { display: inline-block; margin-right: 6px; float: left; } } /* iPhone =============================================================== */ @media screen and (max-width: 488px) { body { background-image: none !important; } #wrapper { width: 92%; } /* Bannière ------------------------------------------------------ */ h1 { font-size: 1.4em; } h3 { font-size: 1.1em; } p { font-size: 12px; line-height: 15px; } #banner { display: none; } #banner2 { width: 94%; padding: 1% 3%; display: block; clear: both; } #banner2 img { width: 100%; } #address { display: block; padding: 10px; font-size: 14px; line-height: 20px; color: #eee; margin-bottom: 10px; text-align: center; } .logo { width: 100%; position: relative; left: 0; top: 0; } /* Menus --------------------------------------------------------- */ #menu_wrapper { width: 100%; display: block; clear: both; padding: 0; padding: 2% 0; float: none; } #menus { margin: 0; padding: 0; } #menus li { float: none; text-align: center; display: block; margin: 0; height: auto; line-height: 20px; } #menus li a { height: auto; width: 100%; font-size: 14px; display: inline-block; padding: 5px 0; white-space: normal; line-height: 22px; } #btn_mobile { display: inline; } /* Sub-menus ------------------------------------------------------- */ #menus li ul.submenus { top: 32px; width: 84%; margin-left: 8%; } #menus li ul.submenus li { width: 100%; padding-left: 0px; } #menus li ul.submenus li a { width: 98%; padding-left: 0px; } /* WRAPPERS -------------------------------------------------------- */ .width64, .width49, .width32, .width25, .width20 { width: 100% !important; clear: both !important; float: none !important; padding: none !important; } .width64 img, .width49 img, .width32 img, .width25 img, .width20 img, .width50td img { max-width: 100% !important; height: auto !important; } #contenu_padding img, #contenu_gauche img { max-width: 100% !important; height: auto !important; } /* Galery elements -------------------------------------------------------- */ .galery-wrapper, .photo-wrapper { width: 100%; padding: 2% 0; text-align: center; } .photo-wrapper.accueil { text-align: center; margin: 5px auto; } .galery-wrapper .galery { width: 188px; height: 150px; margin: 5px auto; text-align: center; line-height: 15px; display: block; float: none; } .photo-wrapper a { float: none; width: auto !important; margin: 5px; display: inline-block; } .photo-wrapper a img { width: auto !important; height: 134px !important; border: solid #000000 1px; } /* Gauche ------------------------------------------------------- */ #contenu { width: 100%; padding: 0 0 1% 0; float: none; display: block; clear: both; } #contenu_padding.accueil{ width: 100% !important; text-align: center; } #contenu_gauche { width: 96%; padding: 1% 2%; clear: both; float: none; overflow: hidden; } .contact_add { float: none; width: 99%; } .contact_map { float: none; width: 99%; } /* Droit -------------------------------------------------------- */ #contenu2 { width: 96%; float: none; display: block; clear: both; margin-top: 5px; } /* Footer ------------------------------------------------------- */ #footer_wrapper { width: 94.3%; padding: 1% 3% 2% 3%; } #footer_wrapper p { font-size: 0.75em; } }