/* 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, 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-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* #Basic Styles
================================================== */

html{ min-height: 100%; }
body {font: .8em/1.5em "Helvetica Neue", Arial, sans-serif;font-weight: light;}

/* #Typography
================================================== */

h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;font-weight: 100;line-height: 1.2em; }
h1 {font-size: 2.5em;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
p {margin-bottom: 1em;clear: both;}
em {font-style: italic;}
strong {font-weight: bold;}
small {font-size: 80%;}

.orange {color: #ed9e3f;}
.rouge {color: #f00;}
.vert {color: #0a0;}
.bleu {color: #07abee;}
.gris {color: #777;}
.blanc {color: #FFF;}
.right {float: right;}
.left {float:left;}
.clear {clear:both;}

.mt1 {/*margin-top: 1em;*/}
.ml5 {margin-left: 5em;}

/* #Links
================================================== */

a{color: #07ABEE; text-decoration: none;}
a:hover{cursor: pointer;}
a.grise:hover{cursor: wait;}

/* LAYOUT
================================================== */

header {position: fixed;right:1em;top:1.1em;z-index: 802;}
.container {position: relative; margin: 0 auto; background: #fff;padding: 3.9em 0;}
.div_placeholder {position:relative;}
.placeholder { position:absolute; left:5px; top: 3px; font-size: 1.1em; font-weight: 300; color: #CBC8C8;}
section {padding: 2em;}
.col2 {width: 47%;margin-right: 3%;overflow: auto;}
.col3 {width: 30%;margin-right: 3%;}
.col4 {width: 22%;margin-right: 3%;}
.toolbar {text-align: right;width: 100%;display: inline-block;}
.toolbar h1 {float: left;}

.etiquette {width: 31%;padding: 3mm 1%;float: left;max-height: 19.5mm;font-size: 0.8em;line-height: 1.2em;}

#edit_result form table {margin-top: 2em;clear: both;}
.tabright {display: block; text-align: right;float: right;}

/* #Buttons
================================================== */
input[type="button"], .btn {padding: .8em;display: inline-block;cursor: pointer;margin-right:1em;text-align: center;font-size: 1.2em;border:none;font-family: inherit;background: #ddd;}

input[type="button"].btnorange, .btnorange {background: #ed9e3f;color: #fff;}
input[type="button"].btnbleu, .btnbleu {background: #00a9d3;color: #fff;}
input[type="button"].btnrouge, .btnrouge {background: #c00;color: #fff;}
input[type="button"].btnvert, .btnvert {background: #0a0;color: #fff;}
	
input[type="button"]:hover, .btn:hover {background: #ccc;}
input[type="button"].btnorange:hover, .btnorange:hover {background: #f70; }
input[type="button"].btnbleu:hover, .btnbleu:hover {background: #09cdff; }
input[type="button"].btnrouge:hover, .btnrouge:hover {background: #f00; }
input[type="button"].btnvert:hover, .btnvert:hover {background: #0c0; }
.grise {position: absolute; left: 26px; color:#666; display:none;}

.fa {font-size: 1.3em;}

#copyEmail {display:none;}

/* #Forms
================================================== */

/*	form {padding-bottom: 25px; }*/
fieldset {margin-bottom: 1em; }
input[type="text"],	input[type="password"],	textarea, select {
	padding: .4em;
	outline: none;
	width: 95%;
	max-width: 100%;}
select {width: auto;}

input[type="text"]:focus,input[type="password"]:focus,textarea:focus, select:focus {
	color: #444;}
input[type="checkbox"] {display: inline;margin-right: .5em;}
label,legend {display: block; margin-top: 10px;}
label span,legend span {font-weight: normal;font-size: 13px;color: #444;}

#popup-edit textarea {height: 96%;}
.checkbox .col2 {width:50%; display: block; float:left;}
.checkbox label {margin-top: 0; cursor:pointer; display:inline;}

/* #Tables
================================================== */

table {width:100%;}
td {cursor: pointer;}
th, td {padding: .5em 1em; border-bottom: 1px solid #EEE; border-right: 1px solid #EEE; text-align: left;}
tr th:last-child, tr td:last-child {border-right: 0px;}
thead th, thead td {font-weight: bold;text-align: center;background: #999; color: #FFF;}
tbody tr:nth-child(2n) {background: #F6F6F6;}
tbody tr:hover {background: #ffefcf;}
tbody tr:hover td {border-color: #fff;}
tbody i{margin-right:5px;}
table caption {text-align: left;font-size: 1.5em;margin-bottom: 1em;font-weight: 100;line-height: 1.2em;}
table thead tr .header {background-image: url(../images/bg.gif);background-repeat: no-repeat;background-position: right 3px;cursor: pointer;}
table thead tr .headerSortUp {background-image: url(../images/asc.gif);}
table thead tr .headerSortDown {background-image: url(../images/desc.gif);}

/* CONNEXION
================================================== */

#connexion {position: absolute;top:50px;left:50%;background: white;box-shadow: rgba(0,0,0,0.5) 0px 0px 5px;padding: 2em;width: 320px;max-width: 100%;margin: 0 0 0 -200px;border-radius: 10px;}
#connexion img {margin: 0 auto 2em;display: block;}
#connexion input {width: 95%;font-size: 1.5em;border: none;background: #fff9e0;font-family: inherit;font-weight: lighter;max-width: 95%;}

/* HEADER
================================================== */
header a {color:#fff;}
header a:hover {color: #fc7;}

/* NAV
================================================== */
nav {position: fixed;top:0;left:0;width:100%;background:#ed9e3f;z-index: 800; }
nav a {display:block;color:#fff;font-size:1.3em;padding: .8em 1.5em;background:#ed9e3f;float: left;}
nav a:hover {background:#dc8d2e;}
nav a:nth-child(4) {margin-left: 5em;}

/* BANNER
================================================== */

.banner {position: relative; overflow: hidden;}
.banner img {width: 100%;}

/* BODY
================================================== */
.js_result{height: 35px;width: 160px;margin-left:5px;float: right;}
.good{display:none; font-size: 0.85em; background: #0a0; color: #FFF;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;line-height: 32px;height:32px;border: 3px solid #CCCCCC;text-align:center;}
.excel {cursor: pointer;float:right; height: 32px;width: 32px;}
.compteur {line-height: 38px;}

/* ASIDE
================================================== */


/* FOOTER
================================================== */

footer {clear: both;}


/* POPUP
================================================== */
#popup-background{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;display: none; background: rgba(0,0,0,0.65);}
#popup-info{background-color: #EBEBEB;width:50%;position:fixed;left:50%;top: 25%;margin:0 0 0 -25%;padding: 2em;z-index: 200;display: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#popup-edit{background-color: white;width:90%;position:fixed;left:10%;top: 10%;margin:0 0 0 -5%;padding: 2em;z-index: 150;display: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;overflow-x: auto;height:80%;}

.popup-close{cursor: pointer;float: right;height: 22px;margin: 5px;width: 22px;margin-top:-5px;margin-right: -10px;}

#loading {position:absolute; height: 50px; width: 50px; top:calc(50% - 25px);left:calc(50% - 25px);z-index:1000;display: none; text-align: center; color:rgba(0,0,0,0.5);font-size: 1.8em;}

/* MEDIA QUERIES
================================================== */

@media only screen and (max-width: 1001px) {

}

@media only screen and (max-width: 770px) {

 }

@media only screen and (min-width:569px) and (max-width: 770px) {

}


@media only screen and (max-width: 568px) {

}

/* MEDIA QUERIES PRINT
================================================== */
