/* ----------------------------- */ /* ==Base (basic styles) */ /* ----------------------------- */ /* switching to border-box model for all elements */ html { box-sizing: border-box; } * { box-sizing: inherit; } html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: calc(1em * 0.625); } body { font-size: 1.5rem; background-color: #fff; color: #000; font-family: sans-serif; line-height: 1.5; margin: 0; padding: 0; background-color: #adff2f; } a { color: #4d5c34; text-decoration: none; } a:hover, a:focus, a:active { color: #ff7f50; } ul, ol { padding-left: 2em; } img { vertical-align: middle; } blockquote,figure { margin-left: 0; margin-right: 0; } /* font-sizing for content */ p,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details,figure { margin-top: 0.75em; margin-bottom: 0; line-height: 1.5; } h1 { font-size: 3.2rem; font-family: sans-serif; } h2 { font-size: 2.8rem; font-family: sans-serif; } h3 { font-size: 2.4rem; } h4 { font-size: 2rem; color: #2e8b57; } h5 { font-size: 1.8rem; } h6 { font-size: 1.6rem; } code, pre, samp, kbd { /* IE fix */ white-space: pre-line; white-space: pre-wrap; font-family: consolas, courier, monospace; line-height: normal; } em, address, cite, i, var { font-style: italic; } /* avoid top margins on first content element */ p:first-child, ul:first-child, ol:first-child, dl:first-child, blockquote:first-child, pre:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } /* avoid margins on nested elements */ li p, li ul, li ol { margin-top: 0; margin-bottom: 0; } /* max values */ img, table, td, blockquote, code, pre, textarea, input, video, svg { max-width: 100%; } img { height: auto; } /* ----------------------------- */ /*#layout /* ----------------------------- */ #layout { /*max-width: 2036px; margin: auto;*/ max-width: inherit; } #layout_head { background-color: #adff2f; } #layout_head_content { max-width: 1000px; margin: auto; height: 194px; } #layout_body { background-color: #2e8b57; } #layout_body_center { background-color: #fff; padding: 6rem 8rem; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.28); z-index: 1; border-color: #fff; } @media (min-width: 1001px) { #layout_body { display: grid; grid-template-columns: 1fr 1000px 1fr; min-height: calc(100vh - 194px); } #layout_body_left { height: 548px; background-color: #adff2f; background-image: url("images/fond.png"); background-position: right top; background-repeat: repeat-x; } #layout_body_right { height: 548px; background-color: #adff2f; background-image: url("images/fond.png"); background-position: left top; background-repeat: repeat-x; } } /* ----------------------------- */ /* .evenement- /* ----------------------------- */ .evenement-Summary:hover { cursor: pointer; } .evenement-Table td { vertical-align: top; } /* ----------------------------- */ /* .header- /* ----------------------------- */ .header-Active a { text-decoration: underline; } .header-Banner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .header-Logo { width: 210px; text-align: center; } .header-Logo a { width: 100px; display: inline-block; height: 105px; background-image: url("images/logo.png"); background-repeat: no-repeat; background-position: } .header-Menu { text-align: center; margin: 0; padding: 0; } .header-Menu li { display: inline-block; padding-right: 8px; padding-left: 8px; font-weight: bold; } .header-Menu a { color: #2f4f4f; } .header-Nav { border-top-width: 1px; border-top-style: solid; border-top-color: #2f4f4f; padding-top: 10px; } .header-Phone { display: none; } .header-Slogan { color: #2f4f4f; font-weight: bold; font-size: 0.8em; text-align: right; width: 210px; padding-right: 10px; } .header-Slogan p { display: inline-block; text-align: left; } .header-Titre { width: 380px; display: block; height: 100px; background-image: url("images/titre.png"); background-repeat: no-repeat; } @media (max-width: 299px) { .header-Slogan { display: none; } } @media (max-width: 639px) { #layout_head_content { height: auto; position: relative; } #layout_body_center { padding: 1.5rem 2rem!important; } .header-Banner { display: flex; align-items: center; justify-content: space-between; padding-top: 0; padding-bottom: 0; justify-content: start; } .header-Burger { width: 40px; display: block; position: absolute; top: 35px; right: 20px; box-sizing: border-box; border-color: #fff; padding-left: 4px; padding-top: 1px; list-style: none; } .header-Burger::-webkit-details-marker { display: none; } .header-Burger span { display: block; margin-top: 6px; width: 40px; height: 4px; background-color: #2f4f4f; } .header-Burger:hover { cursor: pointer; } .header-Logo { width: 110px; } .header-Menu { display: none; } .header-Phone { display: block; margin-top: 0; } .header-PhoneMenu { margin: 0; padding: 0; } .header-PhoneMenu li { text-align: center; padding-top: 5px; padding-bottom: 5px; padding-right: 0; padding-left: 0; margin: 0; list-style: none; } .header-PhoneMenu li:last-child { padding-bottom: 15px; } .header-Titre { display: none; } .header-Slogan { width: 130px; } .header-Nav { padding-top: 0; } } @media ((min-width: 640px) and (max-width: 800px)) { .header-Slogan, .header-Logo { width: 130px; } #layout_body_center { padding: 3rem 4rem!important; } } /* ----------------------------- */ /* .main- /* ----------------------------- */ .main-Title { color: #2f4f4f; padding-top: 25px; font-size: 4.0rem; } /* ----------------------------- */ /* Surcharge spip /* ----------------------------- */ h3.spip { padding-bottom: 1px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #e0f5c1; font-size: 2.5rem; font-weight: bold; color: darkslategray; }