/* GENERAL */
html{background:#C7C7C7;}
body{background:white;color:#222;padding:0;font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;width:970px;margin:auto;position:relative;overflow-x:hidden;}
h1, h2, h3, h4, h5, h6{font-weight:normal;text-rendering:optimizeLegibility;}
a{color:#2A80B9;text-decoration:none;}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea{-webkit-appearance:none;background-color:white!important;border:1px solid #2a80b9;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);padding:9px;margin-bottom:17px;box-sizing:border-box;vertical-align:top;color:rgba(0, 0, 0, 0.75);border-radius:0;font-size:13px;}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus{border-color:#999999;outline:none;box-shadow:0 0 5px #999999;background-color:#fafafa!important;}
select{-webkit-appearance: none !important;background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==");background-repeat: no-repeat;background-position: 97% center;border: 1px solid #cccccc;padding:8px;font-size:14px;border-radius:0;background-color:white;outline:0;}
select:hover {background-color: #f3f3f3;border-color: #999999;}
.err{border-color:red!important;}
button, .button{border:0;cursor:pointer;font-weight:normal;text-decoration:none;display:inline-block;padding:0;outline:none!important;background-color:#2A80B9;color:white;font-size:16px;margin-bottom:10px;vertical-align:top;}
.btn_text{padding:10px 16px;}
img{vertical-align:bottom;max-width:100%;}
ul{line-height:1.6;}
.title{color:#3d9ddd;font-size:24px;display:block;margin-bottom:20px;}
.info{color: #3d9ddd;font-style: italic;font-size: 14px;display:block;margin-bottom:3px;}
.info-big{color: #2B82B8;font-weight: bold;font-size: 22px;display:block;margin-bottom:3px;}
#nonconnecte{text-align: center;margin-top:70px;}

/* HEADER */
#nav-button{position:absolute;left:200px;top:13px;z-index:3;}
#menu {position: absolute;left: -5000px;top: 0;transition:all .9s ease;-webkit-transition:all .9s ease;background-color: #ECF0F1;width: 260px;height: 100%;}
#menu:target{left:0;box-shadow:0px 0px 15px #555;z-index:2;}
#menu nav h2{color:#828282;padding-left:25px;font-size:37px;margin-top:3px;margin-bottom:9px;line-height:1.4;}
#menu nav div{background-color:white;text-align:center;font-family:'Roboto', sans serif;font-size:18px;color:#7f8c8d;padding:23px;background-position:left center;background-repeat:no-repeat;}
#menu #inscription{border-top:1px solid #9cabac;border-bottom:1px solid #9cabac;background-image:url(../img/inscription.png);}
#menu #form-connexion{height:70px;}
#formulaire-connexion input{width:100%;}
#menu #connexion{border-bottom:1px solid #9cabac;background-image:url(../img/connexion.png);}
#menu #deconnexion{border-top:1px solid #9cabac;border-bottom:1px solid #9cabac;background-image:url(../img/deconnexion.png);margin-top:15px;}

#logo h1{text-align: center;color: #2A80B9;font-size: 30px;margin:3px 0 0;padding-top:3px;}
#logo h3{text-align: center;color: #3d9ddd;font-size: 14px;font-family:'Roboto', sans-serif;margin-top:12px;}

#logo_img{position: absolute;top:7px;right: 205px;z-index:1;}
#user {position: absolute;right: 35px;top: 21px;color: #3d9ddd;font-size: 20px;line-height:1;}
#user img{width:25px;}
#pseudo-user {margin-left: 40px;margin-top: -18px;}


/* CONTENT */
#content{min-height:550px;padding-top:50px;padding-bottom:50px;}
.row{position:relative;}
.row:after {content: '';clear: both;display: table;}
.columns{padding:0 15px;float:left;box-sizing:border-box;min-height:1px;}
.small-1 {width: 8.33333%;}
.small-2 {width: 16.66667%;}
.small-3 {width: 25%;}
.small-4 {width: 33.33333%;}
.small-5 {width: 41.66667%;}
.small-6 {width: 50%;}
.small-7 {width: 58.33333%;}
.small-8 {width: 66.66667%;}
.small-9 {width: 75%;}
.small-10 {width: 83.33333%;}
.small-11 {width: 91.66667%;}
.small-12 {width: 100%;}

/* FOOTER */
footer{font-size:16px;color:#787878;text-align:center;margin-bottom:20px;padding-bottom:1px;padding-bottom:15px;}
footer a{color:#3d9ddd;}
#footer ul{margin:0;padding:0;}
#footer ul li{display:inline;}

/* HOME */
#home-form{text-align:center;margin-top:110px;}
#terme{font-size:24px;width:337px;height:63px;margin-bottom:40px;}
#rechercher{padding:0;margin:0;}
.merci{width: 50%;margin: auto;text-align: center;background-color: #C7E9FF;padding: 20px;border-radius: 5px;color: #2980B9;}

/* INSCRIPTION */
#bienvenue-text-in{margin-left:-20px;}
#inscription-input input,#inscription-input button{width:100%;}

/* TRADUIRE */
#table-traduire,#table-attente{height:225px;padding-left:0;margin-bottom:15px;}
#table-traduire li,#table-attente li{list-style:none;padding:15px;}
#table-traduire.clickable li{cursor:pointer;}
#table-traduire li.actif,#table-attente li.actif{background-color:#2A80BB;color:white;cursor:initial;}
.panel{border:solid 1px #dddddd;box-sizing:border-box;width:95%;overflow:auto;margin:0;font-family:inherit;}
.panel > :first-child{margin-top:0;}
.panel > :last-child{margin-bottom:0;}
.panel .bullet-item{border-bottom:dotted 1px #dddddd;font-size:14px;line-height:1;}
span.cate-tb{font-style:italic;}
.scrollable{position:relative;}
#trad-scrollUp,#trad-scrollDown{position:absolute;right:-7px;width:30px;}
#trad-scrollUp{top:0;}
#trad-scrollDown{bottom:0;}
img.exp{margin-top:-5px;vertical-align:top;width:14px;}
#langue-source-traduire,#langue-source-neo-right{margin-top:3px;padding:7px;overflow:auto;height:110px;}
#traduire-right-bis{text-align:right;}

/* TRADUIRE NEOLOGISME */
#table-traduire li.actif a, #table-traduire li.actif a span,#table-traduire li.actif .mot-tb,#table-attente li.actif a,#table-attente li.actif .mot-tb{color:white;}
.mot-tb{font-weight:700;font-size:18px;color:#2A80B9;}
.auteur-tb{font-size:14px;}
#opinion{margin-top:-29px;display:block;}
#form-commentaire{margin-top:10px;text-align:right;}
#form-commentaire textarea{width:100%;height:60px;padding:7px;margin-bottom:5px;}
#commentaires{overflow:auto;height:200px;}
#commentaires .panel{width:100%;padding:7px;line-height:1.5;min-height:60px;margin-top: 5px;margin-bottom: 15px;font-size:13px;}
#traduire-right-tri{position: absolute;bottom: 0;right: 15px;}
#traduire-right-tri a,#traduire-right-tri button{margin-bottom:0;}

/* NOUVELLE TRADUCTION */
#new-tr-terme-bis{height: 45px;font-size: 24px;width: 375px;display:inline-block;}
textarea.panel{height:95px;margin-top:2px;font-size:14px;display:block;}
#traduire-right{margin-top:25px;}
.col6{display:inline-block;width:48%;}
.col6:first-child{margin-right:2%;}
.col6:last-child{margin-left:2%;}
.full-width{width:100%;}
label .info{display:block;margin-bottom:4px;}
textarea.traduction{height:60px;}
textarea.commentaire{height:120px;}

/* ATTENTE TRADUCTION */
#az{text-align:right;margin-top:0;margin-bottom:30px;padding-left:0;}
#az li{display:inline;margin-right:5px;}
#az li a{color:black;}
#table-attente{height: 300px;width:97%;}
#scrollUp,#scrollDown{position:absolute;right:-7px;width:30px;}
#scrollUp{top:0;}
#scrollDown{bottom:0;}
#cons-trad-attente{float:right;}

/* AUTOCOMPLETE */
.autocomplete{margin:0;padding:0;border:1px solid lightgrey;background-color:Window;overflow:hidden;z-index:999;position:absolute!important;overflow-y:scroll;box-sizing:border-box;box-shadow:0 0 20px 2px rgba(0, 0, 0, 0.25);text-align:left;}
.autocomplete ul{width:100%;list-style-position:outside;list-style:none;padding:0;margin:0;max-height:200px!important;}
.autocomplete ul li{margin:0px;padding:2px 5px;cursor:pointer;display:block;width:100%;font-size:14px;overflow:hidden;}
.autocomplete ul li:nth-child(2n){background-color:#fcfcfc;}
.autocomplete ul li:nth-child(2n+1){background-color:#f5f5f5;}
.autocomplete ul li.active{background-color:#2980B9;color:#fff;}

@media (min-width: 1400px){
    body{width:1200px;}
    #terme{width:466px;}
}
@media (min-width: 680px) and (max-width: 975px){
    body{width:680px;}
    #nav-button{left:10px;}
    #menu nav h2{padding-left:80px;}
    #logo_img{right:7px;top:7px;}
    #user{display:none;}
    #terme{width:170px;}
    #home-form #terme{width:277px;}
    .scrollable .panel{width:93%;}
    #traduire-right-tri{width:50%;text-align:right;}
    #traduire-right-tri a:first-child,#traduire-right-tri button:first-child{margin-bottom:2px;}
    #traduire-right{margin-top:38px;}
    #commentaires{height:150px;}
    #new-tr-terme-bis{width:326px;}
    #table-attente{width:95%;}
}
@media (max-width: 679px){
    body{width:100%;}
    #nav-button{left:10px;}
    #logo_img{right:7px;top:7px;}
    #menu nav h2{padding-left:80px;}
    #logo h3{margin-top:0;}
    #user{display:none;}
    .columns{padding:0 10px;}
    .small-1 {width: 100%;}
    .small-2 {width: 100%;}
    .small-3 {width: 100%;}
    .small-4 {width: 100%;}
    .small-5 {width: 100%;}
    .small-6 {width: 100%;}
    .small-7 {width: 100%;}
    .small-8 {width: 100%;}
    .small-9 {width: 100%;}
    .small-10 {width: 100%;}
    .small-11 {width: 100%;}
    .small-12 {width: 100%;}
    footer{font-size:13px;padding-left:10px;padding-right:10px;margin-bottom:0;}
    #home-form{margin-top:80px;}
    #terme{width:241px;margin-bottom:30px;}
    #new-tr-terme-bis{width:100%;}
    .panel{margin-bottom:10px;width:100%;}
    .scrollable .panel{width:93%;}
    #opinion{margin-top:15px;}
    #traduire-right-tri{position:relative;bottom:auto;right:auto;text-align:right;}
    #traduire-right-tri a:first-child,#traduire-right-tri button:first-child{margin-bottom:2px;}
    #az{text-align:center;}
    #table-attente{width:94%;}
}
@media (max-width: 449px){
    body{width:100%;}
    #logo h1,#logo h3{display:none;}
    #content{padding-top:70px;}
    .merci{box-sizing:border-box;width:95%;}
    #terme{width:100%;margin-bottom:5px;}
    #rechercher{width:100%;margin-bottom:20px;}
    .scrollable .panel{width:91%;}
    #table-attente{width:90%;}
}