html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}

body {
background: #a0a0a0;
color: #111;
font-family: OpenDyslexic, Georgia, "Times New Roman", Times, serif;
padding: 0 20px 20px;
}

h1 {
font-size: 28px;
margin-bottom: 20px;
}

article#bul, article#kwa {
background-color: #cacaca;
border-color: #666;
border-style: solid;
border-width: 2px;
border-radius: 5px;
margin: auto;
width: 560px;
}

article#bul, article#bul p, article#bul ol, article#kwa, article#kwa p, article#kwa ol {
padding: 10px 20px;
}

img {
float: right;
margin: 0;
padding: 1px;
border: 1px #d1d1d1 solid;
background-color:#000;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin-top:20px;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(/images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

form#bulletin {
background: #9cbc2c;
border-radius: 5px;
border:1px solid #8bab1b;
counter-reset: fieldsets;
padding: 20px;
width: 560px;
margin: auto;
}

form#bulletin fieldset {
border: none;
margin-bottom: 10px;
}

form#bulletin fieldset:last-of-type {
margin-bottom: 0;
}

form#bulletin legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}

form#bulletin > fieldset > legend:before {
content: "Étape " counter(fieldsets) "\202F: ";
counter-increment: fieldsets;
}

form#bulletin fieldset fieldset legend {
color: #111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}

form#bulletin ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}

form#bulletin ol ol li {
background: none;
border: none;
float: left;
}

form#bulletin label {
float: left;
font-size: 13px;
width: 145px;
}

form#bulletin fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}

form#bulletin fieldset fieldset label:hover {
cursor: pointer;
}

form#bulletin input:not([type=radio]) {
background: #fff;
border: none;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 330px;
}

form#bulletin input:not([type=submit]):focus {
background: #eaeaea;
}

form#bulletin input[type=radio] {
float: left;
margin-right: -20px;
}

form#bulletin button {
background: #384313;
border: none;
border-radius: 20px;
color: #fff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000;
text-transform: uppercase;
}

form#bulletin button:hover {
background: #1e2506;
cursor: pointer;
}

article#date {
border-color: #666;
border-style: solid;
border-width: 2px;
border-radius: 5px;
display: none;
margin: 10px 0;
padding: 0 10px;
}

article#date, dl, span#prix span {
display: none;
}

#traitement, form#con {
margin: 10px 0;
padding: 10px 20px;
border-color: #666;
border-style: solid;
border-width: 2px;
border-radius: 5px;
background-color: #cacaca;
margin: auto;
width: 1080px;
}

form#con {
width: 400px;
}
form#con fieldset {
padding: 10px 20px;
}
form#con p {
text-align: center;
}
form#con input {
margin: auto;
width: auto;
}

#traitement table {
border-collapse: collapse;
margin: 0 auto 1rem;
background-color:#fff;
}

td, th{
border: 1px solid #666;
text-align: center;
padding:0 2px;
}

thead, tfoot{background-color:#eaeaea;}
tr.e1 td, span.e1{background-color:Orange;}
tr.e2 td, span.e2{background-color:LightBlue;}
tr.e3 td, span.e3{background-color:LightGreen;}
tr.e4 td, span.e4{background-color:CornflowerBlue;}
tr.e5 td, span.e5{background-color:Red;}

#traitement input {
margin:0 auto;
width: 4rem;
}

#traitement h1 {
text-align: center;
}

#traitement ol {
margin: 16px 0;
padding: 0 0 0 40px;
}

details summary {
font-size: 24px;
font-weight: bold;
}

details dl, details dt, details dd {
display: block !important;
}

table.tablesorter thead th:hover, table.tablesorter thead th:focus{
background-color: #999;
color: #eee !important;
cursor: pointer;
}

th.sans {
background-color: #cacaca !important;
cursor: initial !important;
border-color: #cacaca !important;
}

th.sans1 {
cursor: initial !important;
}

th.sans:hover, th.sans:focus {
background-color: #cacaca !important;
cursor: initial !important;
}

th.sans1:hover, th.sans1:focus {
color: #111 !important;
background-color: #eaeaea !important;
cursor: initial !important;
}

th.sans:hover input {
cursor: pointer !important;
}

input[type=number]:hover, input[type=number]:focus {
background-color: #ff0;
}

span.hid {
display: none !important;
}

details {
font-size: 80%;
color:navy;
}

summary {
font-size: 90% !important;
}

summary:hover, td label:hover {
cursor: pointer;
}

#interne {
font-size: 100%;
}

@media screen and (max-width:1080px) {
html, body, #traitement, #traitement table, #traitement form, form#con {
margin: 0;
padding: 0;
border: none;
width: inherit;
}
#traitement, #traitement table {
margin: 0 auto;
}
form#con label, form#con input, form#con p {
font-size:200%;
}
}