*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:border-box; } body{ margin:0; padding:0; font-family: sans-serif; color:#1a0583; } header{ margin:0 auto; width:100%; } header img{ margin-left:120px; } #wrap{ padding-top:20px; width:1100px; margin:0 auto; } a{ text-decoration:none; } h1{ margin: 0; padding:0; padding-top:15px; padding-left:15px; font-size:1.9em; display:inline-block; } h2{ margin: 15px 15px; font-size:1.3em; display:inline-block; } h3{ margin:15px; display:inline-block; } p{ margin:0 15px; text-decoration:none; text-align: justify; } /*1ERE COLONNE*/ #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{ height: 300px; margin-bottom:15px; background-color: #2bc7cd; } #ateliers p{ margin: 15px 15px; font-size:1em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } /*2EME COLONNE*/ #news{ margin:0 10px 10px 10px; overflow: hidden; } #news img{ height:350px; } .article{ background-color:#ffaa7f; } .suite{ text-align:right; padding-bottom: 20px; } /*3EME COLONNE*/ .map{ background-color:#6059d2; height: 300px; margin:0 0 15px 10px; } .agenda{ background-color: #3ee88d; height:500px; margin:0 0 0px 10px; padding-right: 10px; } .agenda p{ line-height: 120%; } .agenda ul{ list-style-type:none; padding:0; margin:0; padding-top:15px; } .date{ float:left; font-size: 1.7em; } /*RESPONSIVE*/ .col-2, .col-4, .col-6, .col-8, .col-10, .col-12{ float:left; position:relative; } .row:before, .row:after{ content: ""; display:table; } .row:after{ clear:both; } .row{ margin: 0 -10px; zoom: 1; } .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.66666%; } .col-9{ width:75%; } .col-10{ width:83.33333%; } .col-11{ width:91.66667%; } .col-12{ width:100%; } @media only screen and (min-width:640px) { .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.66666%; } .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:1024px) { .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.66666%; } .col-l-9{ width:75%; } .col-l-10{ width:83.33333%; } .col-l-11{ width:91.66667%; } .col-l-12{ width:100%; } } /*FOOTER*/ footer{ clear:both; height:200px; width:100%; background-color: #ffaa7f; } footer ul { padding:0; margin:0; list-style-type:none; padding-top:70px; margin-left:100px; } footer li { margin-left:2px; float:left; /*pour IE*/ } footer ul li a { display:block; float:left; text-decoration:none; } footer ul li a:hover { border-bottom: solid #1d0b78; }