X-Git-Url: http://git.cyclocoop.org/?a=blobdiff_plain;f=css%2Fhabillage.css;h=0b01eb8c6d5fd807a22489a7e2f347c8318f1bd5;hb=5a319094ddfd1f300fcb4e3a0e85768973181c86;hp=605652c824e6b64114dd6f0da70fd75ec281c11d;hpb=4557b455fb9a2093667f40fe5b5f8ddbaab01387;p=lhc%2Fweb%2Fclavettes.git diff --git a/css/habillage.css b/css/habillage.css index 605652c..0b01eb8 100644 --- a/css/habillage.css +++ b/css/habillage.css @@ -1,174 +1,500 @@ -body{ - margin-top:0; - height: 1500px; - font-family: 'Open Sans', Arial, sans-serif; -} - -header{ - margin:0 auto; - width:1200px; -} +@charset "UTF-8"; +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, td, +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: inherit; + font-size: 100%; + vertical-align: baseline; + font-family: sans-serif; + color: #0c0fb7; + text-align: left; } + +html, body, span, applet, object, iframe, +blockquote, pre, section, +abbr, acronym, address, big, cite, code, +del, dfn, em, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, hgroup, +menu, nav, output, ruby, summary, mark, audio, video { + background-color: #ffffff; + background: none; } + +html { + line-height: 1.1; } + +ol, ul { + list-style: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +q, blockquote { + quotes: none; } + +q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; } + +a img { + border: none; } + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { + display: block; } + +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +body { + margin: 0; + padding: 0; + font-size: 0.9em; } + +header { + margin: 15px auto 0 auto; + width: 1200px; } + +header .spip_logos { + margin-left: 10px; + position: absolute; } #wrap { - background-color: #2b1b1b; - padding-top:100px; - width: 1200px; - margin: 0 auto; -} - -a{ - text-decoration:none; -} - -h1{ - margin: 15px -15px 5px 15px; - padding:0; - font-size:2.2em; - color:#1d0b78; - display:inline-block; - width:100%; - word-wrap: break-word; -} - -h2{ - margin: 15px 15px; - font-size:1.5em; - color:#1d0b78; - display:inline-block; - width:100%; - -} - -h3{ - margin:15px; - display:inline-block; - color:#1d0b78; -} - -p{ - margin:0 15px; - color:#1d0b78; - text-decoration:none; -} + padding-top: 130px; + width: 100%; + margin: 0 auto; } + +a { + color: #0fe4ab; + text-decoration: none; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; } + +a:focus, a:hover, a:active { + background: none; + color: #0c0fb7; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; } + +a:hover > i { + color: #0c0fb7 !important; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; } + +h1 { + margin: 0; + padding: 0; + margin-top: 15px; + margin-left: 15px; + font-size: 1.8em; + display: inline-block; + font-weight: bold; } + +h1:hover { + text-decoration: underline; } + +h2 { + margin: 15px 15px; + font-size: 1.2em; + display: inline-block; } + +h3 { + margin: 15px; + display: inline-block; } + +p { + margin: 0 15px; + padding-bottom: 15px; + text-decoration: none; + text-align: justify; } /*1ERE COLONNE*/ +.titre { + background-color: #05ffbc; + height: 47px; + width: 100%; + color: #fff; + margin: 0 0 15px 0; + padding: 10px 15px; + text-transform: uppercase; + font-family: "Trebuchet MS", Helvetica, arial, sans-serif; + font-size: 1.7em; } + +#ateliers { + margin: 0 10px; } + +#ateliers:after { + content: ""; + /* Important, sinon l'élément n'est pas généré. */ + display: table; + clear: both; } + +#ateliers ul { + padding: 0; + margin: 0; + list-style-type: none; } + +#ateliers ul li { + margin-bottom: 15px; } + +.descriptif { + margin-left: 15px; } + +#ateliers p { + margin: 15px 15px 0 0; + font-size: 1.0em; + text-align: left; } + +#ateliers address { + margin: 0 0 0 15px; + line-height: 0.6; } + +.horairesouvertures { + margin: 0 0 0 15px; } + +#ateliers nav { + padding-top: 15px; + padding-bottom: 15px; + clear: both; } + +.fa { + color: #0fe4ab; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; } + +.fa:hover { + color: #0c0fb7; } + +#atelierdescription nav { + margin-bottom: 15px; } + +.voirenligne { + padding: 15px; + text-align: right; } +/*2EME COLONNE*/ +#news { + margin: 0 10px; } -#ateliers{ - /*background-color: #76d55c;*/ - width:300px; - height:600px; - float:left; -} - -.atelier1{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier2{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier3{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier4{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier5{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier6{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} - -.atelier7{ - width:300px; - height:300px; - margin-bottom:15px; - background-color: #2bc7cd; -} +.article { + background-color: #e8e3e1; + margin: 0 0 15px 0; + line-height: 1.3; } +.article h1 { + font-size: 1.4em; + width: 100%; } -/*2EME COLONNE*/ +.article .fa { + width: 20px; + height: 20px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; } + +.article .fa a { + display: none; } + +.article img { + width: 100%; + height: auto; + margin: 0; } + +.article ul { + margin: 0 15px; } + +.article li { + margin: 0 15px; } + +.article div { + margin: 0 15px; } + +.articlefull { + background-color: #e8e3e1; + margin: 0 0 15px 0; + line-height: 1.3; } + +.articlefull h1 { + font-size: 1.4em; + width: 100%; } + +.articlefull .fa { + width: 20px; + height: 20px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; } + +.articlefull .fa a { + display: none; } + +.articlefull img { + width: auto; + margin: 0; } + +.articlefull ul { + margin: 0 15px; } + +.articlefull li { + margin: 0 15px; } + +.articlefull div { + margin: 0 15px; } + +address { + padding-bottom: 10px; } +address p { + margin: 0; + padding: 0; } -#news{ - /*background-color:#a51616;*/ - width:500px; - height:1000px; - margin-left:20px; - float:left; - clear:right; -} - -.article1{ - background-color:#ffaa7f; - width:500px; - height:700px; - margin-bottom:15px; -} - -.article2{ - background-color:#ffaa7f; - width:500px; - height:440px; - margin-bottom:15px; -} - -.article3{ - background-color:#ffaa7f; - width:500px; - height:440px; - margin-bottom:15px; -} - -.article4{ - background-color:#ffaa7f; - width:500px; - height:440px; - margin-bottom:15px; -} +.historique { + background-color: #ffd2a1; + margin: 0 15px 15px 15px; } +.historique h1 { + width: 100%; } +#atelierdescription { + margin: 0 10px; } + +#atelierdescription #news { + margin: 0; } + +.spip_logos { + width: auto !important; } + +.urlsites { + padding: 15px 0; } /*3EME COLONNE*/ +.map { + height: 300px; + margin: 0 10px 15px 10px; + overflow: hidden; } + +.agenda { + background-color: #05ffbc; + margin: 0 10px 15px 10px; + padding-right: 10px; + padding-bottom: 15px; } + +.agenda h1:hover { + text-decoration: none; } + +.agenda p { + padding: 0; } + +.agenda ul { + list-style-type: none; + padding: 0; + margin: 0; + padding-top: 15px; } + +.date { + float: left; + font-size: 1.7em; + clear: both; } + +.event { + display: block; + margin-bottom: 45px; + padding-top: 5px; } + +.horaire { + font-size: 0.8em; + margin-bottom: 20px; + display: block; } + +/*RESPONSIVE*/ +.col-1, .col-m-1, .col-l-1, .col-2, .col-m-2, .col-l-2, .col-3, .col-m-3, .col-l-3, .col-4, .col-m-4, .col-l-4, .col-5, .col-m-5, .col-l-5, .col-6, .col-m-6, .col-l-6, .col-7, .col-m-7, .col-l-7, .col-8, .col-m-8, .col-l-8, .col-9, .col-m-9, .col-l-9, .col-10, .col-m-10, .col-l-10, .col-11, .col-m-11, .col-l-11, .col-12, .col-m-12, .col-l-12 { + float: left; + position: relative; } + +.col-1 { + width: 8.33333%; } + +.col-2 { + width: 16.66667%; } + +.col-3 { + width: 25%; } + +.col-4 { + width: 33.33333%; } + +.col-5 { + width: 41.66667%; } + +.col-6 { + width: 50%; } + +.col-7 { + width: 58.33333%; } + +.col-8 { + width: 66.66667%; } + +.col-9 { + width: 75%; } + +.col-10 { + width: 83.33333%; } + +.col-11 { + width: 91.66667%; } + +.col-12 { + width: 100%; } + +@media only screen and (min-width: 650px) { + .col-m-1 { + width: 8.33333%; } + + .col-m-2 { + width: 16.66667%; } + + .col-m-3 { + width: 25%; } + + .col-m-4 { + width: 33.33333%; } + + .col-m-5 { + width: 41.66667%; } + + .col-m-6 { + width: 50%; } + + .col-m-7 { + width: 58.33333%; } + + .col-m-8 { + width: 66.66667%; } + + .col-m-9 { + width: 75%; } + + .col-m-10 { + width: 83.33333%; } + + .col-m-11 { + width: 91.66667%; } + + .col-m-12 { + width: 100%; } } +@media only screen and (min-width: 1200px) { + .col-l-1 { + width: 8.33333%; } + + .col-l-2 { + width: 16.66667%; } + + .col-l-3 { + width: 25%; } + + .col-l-4 { + width: 33.33333%; } + + .col-l-5 { + width: 41.66667%; } + + .col-l-6 { + width: 50%; } + + .col-l-7 { + width: 58.33333%; } + + .col-l-8 { + width: 66.66667%; } + + .col-l-9 { + width: 75%; } + + .col-l-10 { + width: 83.33333%; } + + .col-l-11 { + width: 91.66667%; } + + .col-l-12 { + width: 100%; } + + #wrap { + width: 1200px; } + + .wrap { + width: auto; } } +.row:before, .row:after { + content: ""; + display: table; } + +.row:after { + clear: both; } + +.row { + margin: 0 -10px; + zoom: 1; } + +/*FOOTER*/ +footer { + clear: both; + height: 100px; + background-color: #05ffbc; } +footer ul { + width: 500px; + margin: 0 auto; + padding: 0; + list-style-type: none; + padding-top: 30px; } +footer li { + float: left; + /*pour IE*/ + text-align: center; } -.map{ - background-color:#6059d2; - width:400px; - margin-left:840px; - height:400px; - margin-bottom:20px; -} +footer ul li a { + display: block; + text-decoration: none; + color: #0c0fb7; } -.agenda{ - background-color: #ca52ae; - width:400px; - height:400px; - margin-left:840px; -} +footer ul li a:hover { + border-bottom: solid #0c0fb7; } +/*# sourceMappingURL=habillage.css.map */