/* 
    Document   : style.css
    Created on : 02 fev. 2014, 20:22:45
    Update on  : 03 oct. 2014, 00:48:50
    Author     : @AtomGrafiks
    Description:
*/
@import '../fonts/font-HelveticaNeue/font-HelveticaNeue.css';
@import '../fonts/font-Roboto/font-Roboto.css';
@import '../atomstrap/css/atomstrap.css';
@import 'font-awesome.min.css';
@import url(https://fonts.googleapis.com/css?family=Economica:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import 'reset.min.css';
@import url(style-smart.css) (max-width: 630px);
@import url(style-tab.css) (max-width: 932px);
@media (max-width: 1140px){
	div#logoDiv{display: none;}
	div#logoDivResponsive{display: block;}
	header button i.fa{display: block; font-size: 1.3em;}
}

html, body{height: 100%;}
body{background-color: #151515; font-family: 'Open Sans'; color: rgb(241,241,241);}
body.bg001{background-image: url(../images/bg-inscript-3.jpg); background-repeat: no-repeat; background-size: 100% 100%;}
doby.bg001:before{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);}
#patternbg2{background: url(../images/bg_pattern2.png);}
a{color: #44a5e9;}
p{color: #f4f4f4!important}
nav a{color: inherit!important;}
.cb{clear: both;}
.marginMid{margin: 0 auto}
.topNeg100{position: relative; top: -100px}
.topAlignRuban{position: relative; top: -123px;}
.textAlignCenter{text-align: center}
.spacer{width: 100%; height: 1px}
.spacer15{width: 100%; height: 50px}
.pointer{cursor: pointer;}
::selection{background: rgba(48,48,48, 0.7); color: rgb(241,241,241)}
::-moz-selection{background: rgba(48,48,48, 0.7); color: rgb(241,241,241)}

/* BUTTON DECLARATION */
.button{border: none; padding: 8px 18px; text-transform: uppercase; cursor: pointer; font-size: 14px;font-family: 'helvetica_neue_lt_com67MdCn'; outline: none; border-radius: 2px; transition-property: background, color;transition-duration: 200ms;transition-timing-function: ease-in-out;-webkit-transition-property: background, color;-webkit-transition-duration: 200ms;-moz-transition-property: background, color;-moz-transition-duration: 200ms;}
.bluebutton{color: rgb(241, 241, 241); background: #1b80c6; border-bottom: 4px solid; border-color: #156398;}.bluebutton:hover{background: #156398;}
.blueskybutton{color: rgb(241, 241, 241); background: #407396; border-bottom: 3px solid; border-color: #315974;}.blueskybutton:hover{background: #315974;}
.redbutton{color: rgb(241, 241, 241); background: #f16565; border-bottom: 4px solid; border-color: #ba4e4e;}.redbutton:hover{background: #ba4e4e;}
.darkbutton{color: rgb(241, 241, 241); background: rgb(48, 48, 48); border-bottom: 4px solid; border-color: rgb(34,34,34);}.darkbutton:hover{background: rgb(34,34,34);}
.greenbutton{color: rgb(241, 241, 241); background: #4eba73; border-bottom: 4px solid; border-color: #369657;}.greenbutton:hover{background: #369657;}

.buttonbgcolortrans{transition-property: background-color, color;transition-duration: 200ms;transition-timing-function: ease-in-out;-webkit-transition-property: background-color, color;-webkit-transition-duration: 200ms;-moz-transition-property: background-color, color;-moz-transition-duration: 200ms;}
.twitterbutton{color: rgb(241, 241, 241); background-color: #1DAEE3;border-bottom: 3px solid #005580; padding: 8px 28px}.twitterbutton:hover{background-color: #005580;}
.wotbutton{color: rgb(241, 241, 241); background-color: #1bc678; border-bottom: 3px solid #15985c; padding: 8px 38px}.wotbutton:hover{background-color: #15985c;}


/* HEADER */
header{width: 100%; height: 83px; background: #253f51; border-bottom: 5px solid #1b80c6}
#actionsTab{float: right; margin-right: 15px; margin-top: 5px; position: relative; z-index: 1;}
#logoDiv, #logoDivResponsive{float: left; margin-left: 15px; margin-top: 5px; position: relative; z-index: 1;}
div.alert{width: 100%; text-align: center; position: absolute; z-index: 0;}
p.alert{margin: 4px 250px 0 150px;border-radius: 3px; padding: 10px}
p.primaryalert{background: #383838 ; border: 1px solid #272727}
p.successalert{background: #336831 ; border: 1px solid #275125}
p.warningalert{background: #c39a2c; border: 1px solid #84681d}
p.erroralert{background: #ca3d3d ; border: 1px solid #c32c2c}


nav{margin: 0 auto; width: 633px; display: block; z-index: 100}
header i.fa.fa-bars{display: none;}
nav>ul{list-style: none;}
nav>ul li{float: left; padding: 10px; border-right: 1px solid #1b80c6; text-transform: uppercase; font-family: 'helvetica_neue_lt_com67MdCn'; font-size: 14px; background-color: rgba(255, 255, 255, 0.0); transition-property: background-color, color;transition-duration: 200ms;transition-timing-function: ease-in-out;-webkit-transition-property: background-color, color;-webkit-transition-duration: 200ms;-moz-transition-property: background-color, color;-moz-transition-duration: 200ms;}
nav>ul li:hover{background-color: rgba(255, 255, 255, 0.2);}

.formulaire{width:400px; height: 380px; text-align: center; margin: auto; background: #364347; border-radius: 6px; padding: 35px 25px 40px 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0}
.formulaire h1{font-size: 3em; padding: 10px 0 20px; font-family: 'Open Sans'; color: #fff}
.formulaire label{color: #fff; padding-left: 5px}
.formulaire button{margin-top: 21px}
#registForm div.input-group{margin: 10px 0}
.register{display: none}
@media (max-width: 450px){
	.formulaire{width: 96%; padding: 10px 2%; top: 50px}
    .formulaire input{width: 35px 95% 40px}
}
.formulaire div.alert{padding: 15px!important; margin-top: 20px; border: 1px solid transparent; border-radius: 4px; text-align: left; z-index: auto; display: block; background: inherit; position: relative; left: -17px; display: none}
.formulaire div.alert-warning {background-color: rgba(250, 212, 107, 0.2); color: #f3bc65;}

/* */
.contener{width: 900px; margin: 0 auto}
.section1 img{ float: left; padding: 50px 50px 50px 0;}
.section1 .inf{text-align: center;padding-top: 50px;}
    .inf h1{color: #44a5e9; font-size: 26px; padding-bottom: 15px}
    .inf p{font-size: 16px; line-height: 1.3em}

.section2{margin-top: 70px;background: url(../images/bg_pattern2.png); border-top: 5px solid #1b80c6; border-bottom: 5px solid #1b80c6}
.section2{text-align: center; padding-bottom: 25px}
.section2 h1{color: #44a5e9; font-size: 26px; padding: 15px 0}
section h1 {color: #44a5e9; font-size: 26px; padding: 15px; text-align: center}
section p {font-family: 'helvetica_neue_lt_com35_thin'; text-align: center}
.section2 table{width: 100%; font-family: 'helvetica_neue_lt_com35_thin'; text-transform: uppercase;}
.section2 table tr{ height: 20px; border-bottom: 1px dashed rgba(255,255,255,0.2)}
.section2 table tr>th{padding: 5px;}
.section2 table tr>th:last-of-type{color: #44a5e9}

.section3{margin: 50px 0; text-align: center}
.section3 h1{font-family: 'helvetica_neue_lt_com47LtCn'; font-size: 36px; text-transform: uppercase;}
.section3 button{margin-top: 25px; font-size: 36px; border-bottom-width: 5px; padding-top: 10px}

/* STATUS */
ul.status{ margin: 50px auto 0 auto; width: 704px;}
ul.status li{float: left; margin: 10px; text-align: center}
.spinner{border-radius: 100px; width: 150px; height: 150px; border: 3px solid #00AFED;color: #00AFED}
.spinner#offline{border: 3px solid #FF0015; color: #FF0015}
.spinner#online{border: 3px solid #91FF00; color: #91FF00}
.name{color: #fff; margin-top: 20px; font-size: 1.5em;}
.stat{margin-top: 20px; font-size: 2em; font-family: 'helvetica_neue_lt_com47LtCn';}

.globaluptime{width: 100%; height: 10px; border: 1px solid #a5a5a5; border-top: none}
.time{margin-top: 10px; color: #a5a5a5; font-family: 'helvetica_neue_lt_com47LtCn'; font-size: 2em; text-align: center;}
.time span{color: #00AFED}

label{margin-bottom: 6px}
input, textarea{font-family: 'helvetica_neue_lt_com35_thin';background: #484848; outline: none; border: 1px solid #262626; padding: 5px; color: #fff; margin-bottom: 10px; width: 400px}
input:focus, textarea:focus{border-color: #407396}
textarea{resize: none; height: 300px}

/* FOOTER */
footer{width: 100%; background: #253f51; border-top: 5px solid #1b80c6; text-align: center; padding-top: 10px; font-size: 0.7em;}
footer button{margin: 10px}
footer p:last-of-type{color: #42759d!important;padding-top: 25px;}
footer p:last-of-type a{color: #5392c4}
footer #formLang input[type="submit"]{width: auto;}
footer #formLang select{padding: 5px; border: none; border-radius: 3px;}

.actionFoot button{margin-bottom: 25px}
ul#lang{width: 100%; display: none}
ul#lang li{width: 100%; padding: 7px 0; border: 1px solid #1B80C6;border-bottom: none; border-width: 1px 0;cursor: pointer; width: 150px; margin: 0 auto;}
ul#lang li a{color: #f3f4f5}
ul#lang li:last-of-type{border-bottom: 1px solid #1B80C6; margin-bottom: 5px}
#langLoader{background: url(../images/loader.gif) no-repeat; padding-left: 20px; padding-top: -2px; display: none}
#langActive{cursor: pointer;}
#langActive i{cursor: pointer; font-size: 1.2em; position: relative; top: -3px}
#closeLang i{padding-left: 4px; position: relative; top: 4px; cursor: pointer; font-size: 1.2em;}



/* MAJ 0.3.51 */

header{height: 60px}
nav{position: relative; top: -45px}
#logoDivResponsive{display: none; position: relative; top: -2px;}
div#logoDiv img{position: relative; top: -2px; width: 200px}
div#actionsTab{margin-top: 10px}
div.alert{background: #1B80C6; padding-bottom: 5px}
p.alert{margin: 0; border-radius: 0}
p.primaryalert{background: #476C9C ; border: 1px solid #5188AD}
p.successalert{background: #4A9C47 ; border: 1px solid #55AD51}
p.warningalert{background: #C59339; border: 1px solid #BB9146}
p.erroralert{background: #C53939 ; border: 1px solid #BB4646}


/* MAJ ConnexionPage 0.4.2 */
.connexion{width: 900px; margin: 0 auto; margin-top: 100px; padding-bottom: 200px;}
@media (max-width: 900px){
	.connexion{width: 600px}
	.connexion ul li.first{width: 300px!important}
}
@media (max-width: 600px){
	.connexion{width: 100%}
	.connexion ul li, .connexion ul li.first{width: 100%!important}
}

.connexion ul{list-style: none;}
.connexion ul li.first{width: 450px}
.connexion ul li{float: left; width: 300px; height: 300px; text-align: center}
.connexion ul li i{font-size: 10em; margin-bottom: 10px}
.connexion ul li p{font-size: 2em; font-weight: bold; text-transform: uppercase;}
.connexion ul li p span{font-size: 0.5em; font-weight: normal; text-transform: none}

.connexion ul a{color: rgb(241,241,241);transition-property: color; transition-duration: 200ms; transition-timing-function: ease-in-out; -webkit-transition-property: color; -webkit-transition-duration: 200ms; -moz-transition-property: color; -moz-transition-duration: 200ms;}
.connexion ul a:hover, .connexion ul a:active{color: #44a5e9;}

/* OTHERS DECLARATIONS */
.codeError{line-height: 12rem; text-align: center; color: #fff; font: 10em "robotoregular"; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}
.descError{font: 2em "Economica"; margin-bottom: 20px;}
.topError{font: 2em "Economica"; margin-top: 20px;}
.descError i{font-style: italic; font-size: 0.75em;}

/* MAJ Language Menu 0.5.6 */
#language{margin-top: 4px; font-size: 1.0em;}
#lg{display: none}
.lang{text-align: center; background: rgb(48,48,48); border: 1px solid rgb(34,34,34); z-index: 1; }
.lang ul{display: inline-block; }
.lang ul li{float: left; padding: 15px 8px; cursor: pointer; transition-property: background; transition-duration: 200ms; transition-timing-function: ease-in-out; -webkit-transition-property: background; -webkit-transition-duration: 200ms; -moz-transition-property: background; -moz-transition-duration: 200ms;}
.lang ul li:hover{background: rgba(255, 255, 255, 0.1);}
.lang ul li a{color: #f4f4f4}

/* MAJ Login Page selection */
.alert#connexion{display: none;}
.nobrbot{border-bottom: none;}
.marg001{margin: 10px}
.buttonCircle{border: 4px solid; border-color: rgb(48,48,48);; padding: 5px 20px; font-family: "Roboto"; text-transform: uppercase; font-weight: lighter; border-radius: 50px; cursor: pointer; transition-property: box-shadow; transition-duration: 200ms; transition-timing-function: ease-in-out; -webkit-transition-property: box-shadow; -webkit-transition-duration: 200ms; -moz-transition-property: box-shadow; -moz-transition-duration: 200ms; box-shadow: 0 0 0 #000}
.bluebuttonC{color: rgb(241, 241, 241); background: #1b80c6}.bluebuttonC:hover{background: #1b80c6; box-shadow: 0 0 0 3px #1b80c6;}
.blueskybuttonC{color: rgb(241, 241, 241); background: #407396}.blueskybuttonC:hover{background: #407396; box-shadow: 0 0 0 3px #407396;}
.redbuttonC{color: rgb(241, 241, 241); background: #f16565}.redbuttonC:hover{background: #f16565; box-shadow: 0 0 0 3px #f16565;}
.darkbuttonC{color: rgb(241, 241, 241); background: #303030}.darkbuttonC:hover{background: #303030; box-shadow: 0 0 0 3px #303030;}
.greenbuttonC{color: rgb(241, 241, 241); background: #4eba73}.greenbuttonC:hover{background: #4eba73; box-shadow: 0 0 0 3px #4eba73;}




/* MAJ DOCU PAGE 0.5.8 */
#docu a:hover{color: #B0C7DB}
footer#footer{position: fixed; bottom: 0}
footer#footer p:last-of-type{padding-top: 0}
.contener-docu{font-family: maven_proregular; width: 100%; max-width: 960px; margin: 0 auto; margin-top: 80px; color: #585858}
.contener-docu .ariane{padding: 5px; margin: 10px 0; border-bottom: 1px solid #393939;}
.contener-docu .ariane a{padding: 5px; color: #6d8ba5}
.contener-docu sidebar{float: left; width: 200px}
.contener-docu sidebar h6{font-weight: bold; color: #1b80c6; padding: 10px 0}
.contener-docu sidebar ul{padding-left: 20px; color: #4D5A63}
.contener-docu sidebar ul li:before{content: '- ';}
.contener-docu sidebar a{padding: 5px; color: #6d8ba5}
.contener-docu .contenu-docu{padding-left: 200px; margin-bottom: 100px}
.contener-docu .contenu-docu .summary{width: 250px; float: right; height: auto; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece; margin: 0 0 10px 10px; padding-bottom: 15px;}
.contener-docu .contenu-docu .summary ul:before{content: 'Sommaire';font-weight: bold;font-size: 1.6em;}
.contener-docu .contenu-docu .summary ul{text-align: center}
.contener-docu .contenu-docu .summary ul li:first-of-type{margin-top: 10px}
.contener-docu .contenu-docu article{background: #fff; border: 1px solid #2a2a2a; padding: 10px; border-radius: 3px}
.contener-docu .contenu-docu article h1{font-size:  2em; font-weight: bold; padding: 20px 0}
.contener-docu .contenu-docu article p{font-size:  0.9em; padding: 0 10px; text-align: justify}
.contener-docu .contenu-docu article hr{width: 98%; height: 1px; border: none; background: #CECECE; margin: 15px 0}
.contener-docu .contenu-docu article div.pourc50{float: left; width: 50%; display: block}
.contener-docu .contenu-docu article img.right{float: right; width: 45%}
.contener-docu .contenu-docu article p.right{float: right; width: 50%}
.contener-docu .contenu-docu article img.left{float: left; width: 45%}
.contener-docu .contenu-docu article p.left{float: left; width: 50%}
.contener-docu .contenu-docu .code{padding: 5px; background: #272822; border: 1px solid #36434a; color: #66747e; font-family: Consolas, Monaco, 'Andale Mono', monospace; border-top-width: 28px; text-shadow: 0 1px rgba(0, 0, 0, 0.3);}
.contener-docu .contenu-docu .code .title{position: relative; top: -27px; font-family: 'maven_proregular'; color: #9f9f9f; padding-left: 30px}
.contener-docu .contenu-docu .code #copy{position: relative; top: -48px; right: 5px; background: #36434a; padding: 5px 5px 6px 5px; color: #fff; cursor: pointer}
.contener-docu .contenu-docu .code #copy:hover{background: #2a363c;transition-property: background; transition-duration: 200ms; transition-timing-function: ease-in-out; -webkit-transition-property: background; -webkit-transition-duration: 200ms; -moz-transition-property: background; -moz-transition-duration: 200ms;}
.contener-docu .contenu-docu .code p{padding: 10px; top: -25px; position: relative;}
.contener-docu sidebar i{color: #6d8ba5;  padding-left: 10px; display: block; margin: 0 auto; cursor: pointer; display: none}
.contener-docu sidebar i span{font-family: 'maven_proregular'; padding-left: 10px}
@media (max-width: 800px){
    .contener-docu sidebar{float: none; width: 100%}
    .contener-docu .contenu-docu article div.pourc50{width: 100%; float: none;}
    .contener-docu sidebar{float: none; width: 100%; text-align: center}
    .contener-docu .contenu-docu{padding-left: 0; margin-top: 10px}
    .contener-docu sidebar ul li:before{content: '';}
    .contener-docu sidebar div{display: none}
    .contener-docu sidebar i{display: block}
    .contener-docu .contenu-docu .summary{width: 100%; float: none; border-left: none; margin: 0 0 10px 0; padding-bottom: 15px;}
    .contener-docu .contenu-docu article img.right{float: none; width: 80%; display: block; margin: 10px auto}
    .contener-docu .contenu-docu article p.right{float: none; width: auto}
    .contener-docu .contenu-docu article img.left{float: none; width: 80%; display: block; margin: 10px auto}
    .contener-docu .contenu-docu article p.left{float: none; width: auto}
}
.progress{width: 100%; height: 40px; border-radius: 4px}
.progress .back{width: 100%; height: 100%; background: #151515; border-radius: 4px;}
.progress .over{height: 100%; background: #1DAEE3; position: relative; top: -40px; border-radius: 4px 0 0 4px;}
.progress .over{height: 100%; background: #1DAEE3; position: relative; top: -40px; border-radius: 4px 0 0 4px;}
.progress .pourcentage{position: relative; top: -67px;}
.lang ul li a img{width: 16px; height: 11px}
.robot{display:none;}
#instantclick {display: none;}