/* Font ========================================================================================*/ body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; font-family:Arial, Helvetica, sans-serif; color:#937c7c; font-size:13px; line-height:20px; } h1, h2, h3, h4, h5, h6 { font-family: 'Courgette', cursive, Arial, Helvetica, sans-serif; } nav { font-family: 'Lora', serif, Arial, Helvetica, sans-serif; font-weight:bold; } /* End Font ========================================================================================*/ /* Branding ========================================================================================*/ body { background:#fff; margin:0;} /* .pageWidth { width:940px; margin:0 auto; } */ .pageWidth { width:1280px; margin:0 auto; } #logo { display:block; color:#ffffff; font-size:60px; margin-bottom:24px; line-height:70px; text-shadow:0 1px 0 rgba(103,93,32,0.75); } /* Couleur et fond de l entete */ /* #header { background:#e22c0f url(../img/header-bg.png) repeat 0 0; padding:24px 0 0 0; } */ #header { background:#0071c1 url(../img/header-bg.png) repeat 0 0; padding:24px 0 0 0; } header, nav, section, footer { display:block;} /* END Branding ========================================================================================*/ /* HEADING ========================================================================================*/ h1, h2, h3, h4, h5 { color:#e22c0f; } h6 { color:#ffffff; } h1 { font-size:60px; line-height:68px; } h2 { font-size:45px; line-height:52px; margin-bottom:10px;} h3 { font-size:28px; line-height:34px; margin-bottom:5px;} h4 { font-size:22px; line-height:38px; margin-bottom:5px;} h5 { font-size:18px; line-height:24px; margin-bottom:5px;} h6 { font-size:18px; line-height:24px; margin-bottom:5px;} /* END HEADING ========================================================================================*/ /* Links AND Button ========================================================================================*/ a:focus{ outline:none;} a { text-decoration:none; color:#E2EFF8;} a:hover { color:#393939; } /* Links AND Button ========================================================================================*/ /* Main Navigation ========================================================================================*/ nav { background:url(../img/nav-bg.png) repeat-x left top; font-size:17px; padding:2px 0 8px 0; position:relative; z-index:1; } nav li { float:left; position:relative; } nav li a { background:url(../img/nav-devider.png) no-repeat right 6px; color:#ffffff; display:inline-block; text-align:center; padding:8px 40px 0 40px; line-height:34px; } nav li a:hover, nav li.active a { color:rgba(255,255,255,0.40);} nav li:first-child { background:url(../img/nav-devider.png) no-repeat left center; margin-left:0 } #menu { display:none; color:#ffffff; font-size:16px; background:url(../img/menu-img.png) no-repeat 97% 12px; padding:12px 0 10px 3%; text-align:left; } /* End Navigation ========================================================================================*/ #banner { margin-bottom:-70px;} #banner img { width:100%; } #banner-journal { margin-bottom:-70px; background-color:#666666; vertical-align:central;} #banner-journal img { width:75%; } /*#banner-journal img { width:100%; } */ article ul li { padding-left:15px;} article ul li:before{ content:'B'; text-indent:-5px; font-weight:bold; font-size:60px; height:5px; line-height:5px; width:5px; border-radius:10px; vertical-align:middle; float:left; margin-left:-15px; overflow:hidden; margin-top:8px; } article ol { margin-left:15px; } article ol li { list-style:decimal; } #container { background:#ffffff; position:relative; z-index:1; padding:20px; border-radius:20px 20px 0 0; font-size:20px;} #container.pageWidth { width:900px; font-size:20px;} .pageControl { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px);} .activepage .pageControl{transform: translate(-1000px, 0px); -webkit-transform: translate(-1000px, 0px); -moz-transform: translate(-1000px, 0px); -o-transform: translate(-1000px, 0px); -ms-transform: translate(-1000px, 0px); } .ancre_haut { color:#e22c0f; } .lien_bleu{text-decoration: none; font-style:italic; color: #6494b0;} .lien_bleu:hover {background-color:rgb(0,153,255); color: white;} /* Quand le visiteur clique sur le lien */ .lien_bleu:active {background-color: #FFCC66;} .lien_turquoise{text-decoration: none; font-style:italic; color: #c0ffff;} .lien_turquoise:hover {background-color:rgb(0,153,255); color: white;} /* Quand le visiteur clique sur le lien */ .lien_turquoise:active {background-color: #FFCC66;} /*========================================================================================*/ /* BOITE - boite bleu Utilise : Index */ .titre_boite{ border-radius: 10px 10px 10px 10px; background-color:transparent; font-size:20px; width:225px; height:200px; padding:20px; margin:1px; float:left; vertical-align:top; vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(217,9,11); font-size:13px;} .titre_boite:before{content: ''; width: 225px; height: 200px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite:after{ content: ''; width: 225px; height: 200px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite img { margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:225px; height:150px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite img { margin-top: 15px;} /* BOITE PLUS - boite bleu Utilise : Index */ .boite_plus{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:225px; height:350px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_plus:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus img {width: 100%; margin-top: 15px;} /* BOITE PLUS - boite bleu Utilise : Index */ .boite_plus_plus{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:225px; height:550px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_plus_plus:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus_plus:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus_plus img {width: 100%; margin-top: 15px;} /* BOITE PLUS - boite bleu Utilise : Index */ .boite_plus_peche{border-radius: 10px 10px 10px 10px; background-color:rgb(246,112,105); width:225px; height:350px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_plus_peche:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus_peche:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_plus_peche img {width: 100%; margin-top: 15px;} /* BOITE peche - boite bleu Utilise : Index */ .boite_peche{border-radius: 10px 10px 10px 10px; background-color:rgb(246,112,105); width:225px; height:150px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_peche:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_peche:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_peche img {width: 100%; margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite_journal{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:225px; height:250px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_journal:before{content: ''; width: 225px; height: 250px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_journal:after{ content: ''; width: 225px; height: 250px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_journal img {width: 100%; } /* BOITE - boite bleu Utilise : Index */ .boite_journal_triple{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:760px; height:250px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_journal_triple:before{content: ''; width: 760px; height: 250px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_journal_triple:after{ content: ''; width: 760px; height: 250px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_journal_triple img {width: 100%; } .boite_sondage{border-radius: 10px 10px 10px 10px; background-color:rgb(49,115,176); width:325px; height:450px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_sondage:before{content: ''; width: 325px; height: 450px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_sondage:after{ content: ''; width: 325px; height: 450px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_sondage img {width: 100%; } /* ================================================================================== */ /* BOITE - boite bleu Utilise : Index */ .titre_boite_transparent{ border-radius: 10px 10px 10px 10px; background-color:transparent; font-size:20px; width:225px; height:200px; padding:20px; margin:1px; float:left; vertical-align:top; vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(217,9,11); font-size:13px;} .titre_boite_transparent:before{content: ''; width: 225px; height: 200px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent:after{ content: ''; width: 225px; height: 200px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent img { margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite_transparent{border-radius: 10px 10px 10px 10px; background-color:transparent; width:225px; height:150px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_transparent:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent img { margin-top: 15px; width: 100%; height: 100%} /* ================================================================================== */ /* BOITE - boite bleu Utilise : Index */ .titre_boite_transparent_2{ border-radius: 10px 10px 10px 10px; background-color:transparent; font-size:20px; width:225px; height:200px; padding:20px; margin:1px; float:left; vertical-align:top; vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(217,9,11); font-size:13px;} .titre_boite_transparent_2:before{content: ''; width: 225px; height: 200px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_2:after{ content: ''; width: 225px; height: 200px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_2 img { margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite_transparent_2{border-radius: 10px 10px 10px 10px; background-color:transparent; width:225px; height:150px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_transparent_2:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_2:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_2 img { margin-top: 15px; width: 75%; height: 75%} /* ================================================================================== */ /* BOITE - boite bleu Utilise : Index */ .titre_boite_transparent_or{ border-radius: 10px 10px 10px 10px; background-color:transparent; font-size:20px; width:325px; height:300px; padding:20px; margin:1px; float:left; vertical-align:top; vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(217,9,11); font-size:13px;} .titre_boite_transparent_or:before{content: ''; width: 325px; height: 300px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_or:after{ content: ''; width: 325px; height: 300px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_or img { margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite_transparent_or{border-radius: 10px 10px 10px 10px; background-color:transparent; width:325px; height:250px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_transparent_or:before{content: ''; width: 325px; height: 250px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_or:after{ content: ''; width: 325px; height: 250px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_or img { margin-top: 15px; width: 100%; height: 100%} /* ================================================================================== */ /* ================================================================================== */ /* BOITE - boite bleu Utilise : Index */ .titre_boite_transparent_argent{ border-radius: 10px 10px 10px 10px; background-color:transparent; font-size:20px; width:225px; height:200px; padding:20px; margin:1px; float:left; vertical-align:top; vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(217,9,11); font-size:13px;} .titre_boite_transparent_argent:before{content: ''; width: 225px; height: 200px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_argent:after{ content: ''; width: 225px; height: 200px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .titre_boite_transparent_argent img { margin-top: 15px;} /* BOITE - boite bleu Utilise : Index */ .boite_transparent_argent{border-radius: 10px 10px 10px 10px; background-color:transparent; width:225px; height:150px; padding:20px; margin:1px; float:left; vertical-align:top;vertical-align:middle; text-align:justify; display: inline-block; font-family:'Roboto Condensed', cursive, Arial, Helvetica, sans-serif; color:rgb(255,255,255);font-size:12px;} .boite_transparent_argent:before{content: ''; width: 125px; height: 150px; position:absolute; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_argent:after{ content: ''; width: 125px; height: 150px; display: inline-block; vertical-align:top; vertical-align:middle; z-index:-1;} .boite_transparent_argent img { margin-top: 15px; width: 75%; height: 75%} /* ================================================================================== */ .retour{ clear:both;} .texte_bleu { font-family: 'Courgette', cursive, Arial, Helvetica, sans-serif; color:rgb(3,110,188); font-size:large;} .carte {width:600px; height:450px; } /* FORM ========================================================================================*/ fieldset {} form#paiement /* {background: #0864A2; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; counter-reset: fieldsets; padding: 20px; width: 400px;}*/ {background: #0864A2; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; counter-reset: fieldsets; padding: 20px; width: 40%;} form#paiement fieldset {border: none; margin-bottom: 10px;} form#paiement fieldset:last-of-type {margin-bottom: 0;} /* #384313 - vert form#paiement legend { color: #04416a; font-size: 16px; font-weight: bold; padding-bottom: 10px; text-shadow: 0 1px 1px #c0d576;} */ /* #384313 - vert */ form#paiement legend { color: #000000; font-size: 16px; font-weight: bold; padding-bottom: 10px; } /* form#paiement > fieldset > legend:before {content: "Step " counter(fieldsets) ": "; counter-increment: fieldsets;} */ form#paiement > fieldset > legend:before {content: "Étape " counter(fieldsets) ": "; counter-increment: fieldsets;} /* #111111 - vert/Noir form#paiement fieldset fieldset legend {color: #111111; font-size: 13px; font-weight: normal; padding-bottom: 0;} */ /* #111111 - vert/Noir */ form#paiement fieldset fieldset legend {color: #00000; font-size: 13px; font-weight: normal; padding-bottom: 0;} /* #b9cf6a - vert */ form#paiement ol li {background: #cee0ec; background: rgba(255,255,255,.3); border-color: #e3ebc3; border-color: rgba(255,255,255,.6); border-style: solid; border-width: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; line-height: 30px; list-style: none; padding: 5px 10px; margin-bottom: 2px;} form#paiement ol ol li {background: none; border: none; float: left;} form#paiement label {float: left; font-size: 13px; width: 110px;} form#paiement fieldset fieldset label { background:none no-repeat left 50%; line-height: 20px; padding: 0 0 0 30px; width: auto;} form#paiement label[for=visa] {background-image: url(visa.gif);} form#paiement label[for=amex] {background-image: url(amex.gif);} form#paiement label[for=mastercard] {background-image: url(mastercard.gif); } form#paiement fieldset fieldset label:hover {cursor: pointer;} /* background: #ffffff; */ /* background: #808080; */ /* background: #c0c0c0; */ form#paiement input:not([type=radio]){background: #c0c0c0; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; font: italic 13px Georgia, "Times New Roman", Times, serif, ; outline: none; padding: 5px; width: 200px; color:rgb(102,102,102);} form#paiement textarea {background: #ffffff; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;font: italic 13px Georgia, "Times New Roman", Times, serif, ; color:rgb(102,102,102); outline: none; padding: 5px; width: 200px;/* height:150px; */ height:300px; color:rgb(102,102,102);} form#paiement input:not([type=submit]):focus, form#paiement textarea:focus {background: #eaeaea; color: color:rgb(102,102,102);} form#paiement input[type=radio] {float: left; margin-right: 5px;} /* #384313 - vert */ form#paiement button {background: #04416a; border: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; color: #ffffff; display: block; font: 18px Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; margin: auto; padding: 7px 25px; text-shadow: 0 1px 1px #000000; text-transform: uppercase;} form#paiement button:hover {background: #1e2506; cursor: pointer;} #bouton_menu {position:relative; background: #E2EFF8; width:200px; height:30px; border: 1px solid black; font-family:calibri,arial; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow:5px 5px 5px black; -moz-box-shadow:5px 5px 5px black; box-shadow:5px 5px 5px black;} /* Footer ===============================================*/ #footer { background:#ffffff; padding:20px 0; border-top:solid 1px #edeae7; } .copyRight { color:rgba(0,0,0,0.50); margin-left:20px; } /* transition ===============================================*/ #wrapper, #widecolumn, aside, nav li{transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} #sondage{ color:#fff; width:275px; height:385px; margin:15px 0 0 10px; padding:15px 0 0 25px; /* background:transparent url(../images/bg-sondage.png) no-repeat */ /* background-color: rgb(102,102,255) */ /* Comme les PSOT-IT */ /* background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#8080ff), to(#c0c0ff), color-stop(.1,#88c52f3)); border: 1px solid #ccc; -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset; -webkit-border-bottom-right-radius: 6px 50px; */ /* background: #8080ff; */ background:grey ; border: 1px solid #ccc; font-family:calibri,arial; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow:5px 5px 5px black; -moz-box-shadow:5px 5px 5px black; box-shadow:5px 5px 5px black; } .bouton_grand { position:relative; background: #adcef3; width:150px; height:30px; border: 1px solid black; font-family:calibri,arial; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow:5px 5px 5px black; -moz-box-shadow:5px 5px 5px black; box-shadow:5px 5px 5px black; } .submit{ /* background:url(../images/voter.png) no-repeat; */ background-color:rgb(102,102,153); width:150px; height:26px; border:none; cursor:pointer } .submit:hover { /* background:url(../images/voter-on.png) no-repeat; */ background-color:rgb(102,125,135); } strong { font-weight:900; color:#444 }