/**
 * @CSS DOCUMENT
 * @ 16.05.2018 - Alex Vlad
*/
/** ====================================================
   FONTS
====================================================== */
@font-face {
    font-family: 'source_sans';
    src: url('fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'source_sans';
    src: url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-semibold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/**----------------- 
 * GLOBAL RESET 
-----------------**/
*, html, body, iframe, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, table, th, td, audio, video { 
    margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display:block; }
table { border-collapse:collapse; border-spacing:0; }
table td { vertical-align: top; }
iframe, fieldset, img, a img { border:0 none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } 
caption, th { text-align:left; }
h1, h2, h3, h5, h5, h6 { font-size:100%; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}

strong, b { font-weight: bold; }
em, i { font-style: italic; }
nav ul { list-style:none }
ol, ul, li { list-style:none; }

html>body * a { position:relative; }  /* Gets links displaying over a PNG background, html>body n'est pas compris par IE6 */
a { outline:none; } /* Gets rid of Firefox's dotted borders */

p { margin:1em 0; }

hr { display:block; height:1px; border:0; border-top:1px solid #000000; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
img { width: 100%; }


/**------------------------------
 * GENERAL CLASSES and SETTINGS
--------------------------------**/
body { background-color: #eee;color: #2f2f2f; font: 1.0em/1.5em "source_sans",arial,helvetica,sans-serif; 
background-attachment: fixed;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
-webkit-background-size: 6px 6px;
-moz-background-size: 6px 6px;
background-size: 6px 6px;
}

h1 { margin:0.6em 0; font:normal 2.0em/1em "source_sans",arial,helvetica,sans-serif; color: #bbb; text-transform:uppercase; }
h2 { margin:1em 0 0.3em; font:bold 1.6em/1.2em "source_sans",arial,helvetica,sans-serif; color:#047875; }
h3 { margin:1em 0 0.3em; font:bold 1.2em/1.2em "source_sans",arial,helvetica,sans-serif; }
h4 { margin:1.5em 0 0.3em; font:bold 1em/1.2em "source_sans",arial,helvetica,sans-serif; }

a { color:#047875; text-decoration:underline }
a:hover, a:focus { color:#047875; text-decoration:underline }

/** ICONS **/
.icon { color: #616365; font-size: 1.2em; display: inline-block; line-height: 1.1em; margin-right: 4px; }
.icon-ok-circled { color: #119E12; }
.icon-cancel-circled { color: #D81010; }
.icon-disabled { color: #bababa; }
.icon-published { color: #119E12; }
.btn-icon .icon-handshake { color: #C60C30; }

.status .btn { background-color: transparent; display: inline-block; margin: 0 4px; padding: 0; height: 18px; line-height: 18px; width: 18px; text-decoration: none; }
.btn { background: #F0F0F0; border: 1px solid #E4E4E4; color: #616365; font-weight: bold; }
.btn { cursor: pointer; display: inline-block; font-size: 14px; line-height: 1.3em; margin-bottom: 0; padding: 4px 12px; text-align: center; vertical-align: top; }
a.btn { text-decoration: none; }	
.btn-search-plus { background-color: #f0f0f0; border: 1px solid #e4e4e4; line-height: 1.5em; }
.btn-info-family .icon { color: #0080c8 }

.clear-float { clear: both; }
.clear-fix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear-fix { zoom: 1; } /** IE 5.5/6/7 */ 


/**--------------
 * HEADER 
--------------**/
#global { margin: 0 auto; }
.login #global { margin: 5% auto; }
.site #global { background-color: #fff; max-width:1230px; }
#header { margin-bottom: 3em; position: relative; z-index: 10; }
.blk-top { display: flex; background-color:#047875; align-items: stretch; align-content: center; justify-content: space-between; }
.blk-title { display: block; padding:3em 5% 1em; width: 100%; align-self: flex-end; font-size: 1.0em; line-height: 1.0em; font-weight: bold; color: #fff; }
.blk-logo { display: block; margin-bottom: 0.5em; width:150px; }
.ctn-client { color: #fff; padding: 0; position: absolute; right: 4%; top: 1em; }
.ctn-client a { color: #fff; padding: 0 0.5em; text-decoration: none; text-transform: lowercase; }
.ctn-client .lang { border-left: 1px solid #cecece; border-right: 1px solid #cecece; margin-left: 0.5em; }
.ctn-client .client-name { font-size: 1.1em; float: left; padding: 0 0.5em; }
.ctn-client .icon { color: #fff; font-size: 0.9em; }

/** MENU **/
#menu { background-color: #3E79BC; line-height: 1.4em; margin: 102px 0 0 24%; }
#menu li { border-right: 1px solid #fff; float: left; }
#menu li .link-menu { 
	display: block; padding: 0.4em 1em; color: #fff; background-color: #3E79BC; text-decoration: none; text-align: center; text-transform: uppercase;
}
#menu li:hover .link-menu, #menu li:focus .link-menu, #menu li.active .link-menu {
    color: #2f2f2f; background-color: #ffc874; text-decoration: none; 
}
.toggle-menu { 
	position: absolute; top: 102px; right: 4%;
	background-color: #3E79BC; display: none; padding: 0.4em 12px; width: 17px; 
}
.toggle-menu .icon { color: #fff; }
#menu .smenu { display: none; position: absolute; margin-top: 2px; left: 0; }
#menu li.active .smenu { display: block; }
#menu li .smenu li { background-color: #fff; border:0; }
#menu li .smenu a { display: block; font-size: 0.9em; padding: 5px 16px; }
/** FOLDER NAV**/
.nav { padding: 5px 0; }
.nav li { padding: 3px 0 3px 18px; position: relative; }
.nav li a { color: #fff; display: block; line-height: 1.1em; text-decoration: none; }
.nav li .sub-nav { padding: 3px 0 0 13px; display: none; }
.nav li .sub-nav li { padding-left: 0; }
.nav li ul.active { display: block; }
.nav li .icon { color: #fff; font-size: 1em; position: absolute; left: 0; top: 2px; } 
/** BREADCRUMBS **/
.breadcrumbs { border-bottom: 1px dotted #CECECE; margin-bottom: 10px; padding-bottom: 12px; }
.breadcrumbs li { display: inline-block; margin-right: -3px; }
.breadcrumbs li .icon { font-size: 1.1em; margin-left: 0; }


/**---------------
 * MAIN CONTENT
----------------**/
/** LOGIN **/
#ctn-login { background-color: #fff; margin: 0 auto; padding: 10px 20px 30px; max-width: 1000px; width: auto; }
.login #ctn-login { max-width: 340px; }
#ctn-login #logo { background-color: #047875; display: block; margin: -10px -20px 30px; padding: 30px 20px 20px; }
#ctn-login #logo img { width: 100%; max-width: 200px; height: auto; }

/** MESSAGES**/
.ctn-msg { margin: 10px 0; }
.ctn-msg .error { background-color: #FFD6D3; border: 1px solid #C60C30; color: #C60C30; margin: 1px 0; }
.ctn-msg .success { background-color: #DFF9D4; border: 1px solid #59AF5C; color: #59AF5C; margin: 1px 0; }
.ctn-msg .info { background-color: #F3F6F8; border: 1px solid #BBD4E1; color: #337AD9; margin: 1px 0; padding: 5px; }
.ctn-msg p { padding: 2px 5px; }

/** CONTENT **/
#main { min-height: 200px; margin: 2em 5%; position: relative; }
#content { padding: 15px 0 20px; position: relative; }
#main .content-large { width: 100%; }
#main .content-short { clear: right; float: right; width: 78%; }
#content h1 { margin: 0 0 10px 0; padding-bottom: 5px; }
.author-photo { float: right; max-width: 150px; height: auto; border: 5px solid #eee; }

/** FOOTER **/
#footer { background-color: #ddd; font-size: 0.8em; padding: 1.5em 5%; }

/** FORM **/
form { margin:1em 0; max-width: 600px; }
form fieldset { margin:1em auto; }
form legend { font-weight: bold; }
form div.line { clear:both; margin:0.5em 0; padding: 0; }
form label { display:block; padding:0.1em 0; width:170px; cursor:pointer; }
form div.long-field label { width:100%; }
form input[type="text"], form input[type="password"], form input[type="email"], form textarea, form select { 
    font:1.0em/1.2em "source_sans",arial,helvetica,sans-serif; color:#222; background-color:#fff; border:1px solid #eee; padding:0.3em 0.5em; max-width: 350px; width:100%; }
form select { margin-bottom: 0.1em; padding: 0.1em 0.5em; }
form input[type="text"]:focus, form input[type="password"]:focus, form input[type="email"]:focus, form textarea:focus { border-color:#047875; }
form textarea { height:10em; }
form input[type="submit"], form input[type="button"], button[type="submit"] { 
    display: inline-block; margin:1em 2em; padding:0.5em 1em; font-family: "source_sans",arial,helvetica,sans-serif; font-size:1.0em; font-weight:bold; color:#fff; text-decoration:none; border:1px solid #047875; border-radius: 0.5em; background-color:#047875; box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.5); cursor:pointer;
}
form#form-login input[type="submit"] { margin: 1em 0; }
form input[type="submit"]:hover, form input[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:focus { background-color:#fff; color:#047875; box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.5); }
form div.code-image { clear:both; margin:2em 0; }
form div.code-image label { display:block; float:none; margin:0 0 0.5em 0; padding:0; width:100%; text-align:left; }
form div.code-image img { border:medium none; float:left; margin:0 0.5em 0 0; width:150px; border-radius:inherit; }
form div.code-image input[type="text"] { height:50px; width:120px; text-align:center; letter-spacing:0.3em; text-transform:uppercase; }
.success { font-size: 1.3em; font-weight: bold; font-style: italic; color: #047875; }
.error-msg { font-size: 1.3em; font-weight: bold; font-style: italic; color: #ff0000; }

#form-search { position: absolute; top:-2em; right: 0; margin: 0; z-index: 11; }
#form-search input { font-size: 1em; margin-bottom: 4px; vertical-align: top; width: auto; }
#form-search button { background-color: #F0F0F0; border: 1px solid #E4E4E4; border-radius: 0 6px 6px 0; height: 32px; margin:0 0 0 -7px; padding: 5px 7px; vertical-align: top; box-shadow: none; }
#form-search .btn-reset { border-radius: 6px; margin-left: 2px; }
#form-search .ctn-filters { display: inline-block; position: relative; }
#form-search .ctn-search-plus { 
	background-color: #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); border: 1px solid #fff; border-radius: 5px; display: none; position: absolute; top: 110%; right: 0; padding: 4px 8px; width: 267px; z-index: 11;
}
#form-search .ctn-search-plus label { color: #616365; padding: 4px 0; width: 100%; }
#form-search .ctn-search-plus p { clear: both; }
#form-search .ctn-search-plus button { border-radius: 6px; margin-left: 0; }
#form-search .field-date { float: left; width: 100px; }
#form-search .ctn-checkbox label { float: right; width: 90%; }
#form-search .ctn-checkbox input { float: left; margin-top: 7px; }

#form-login p { margin-bottom: 10px; }
#form-login label { display: none; }
#form-login input[type="text"], #form-login input[type="password"] { width: 92%; }
#form-login .btn { background-color: #047875; border: 1px solid #047875; border-radius: 0.5em; color: #fff; }
#form-login .btn:hover { color: #047875; background-color: #fff; box-shadow: 1px 1px 2px 1px #ccc; }


/**=====================================================
   ECRANS smartphones paysage
====================================================== */
@media (min-width:640px) {
    form label, p.containCheckbox span { float:left; padding:0.1em 1em 0.1em 0; }
    form p.containCheckbox label { float: none; }
    form p.longlabel label { float: none; }
    .code-image, form input[type="submit"], form input[type="button"] { margin:1em; }
}
/**=====================================================
   ECRANS taille moyenne : tablettes, petits notebooks
====================================================== */
@media (min-width:960px) {
	#global { width: 90%; }
	.blk-title { font-size: 1.3em; line-height: 1.1em; }
	.blk-logo { width:250px; }
	#content { padding:3em 0; }
	h1 { font-size: 2.6em; }
}

@media (min-width:1100px) {
	.blk-title { font-size: 1.6em; line-height: 1.2em; }
}