body{
	font-family:'Lato';
	font-size:15px;	
	line-height:32px;
	color:#505050;	
	
}

#global{
	position:absolute;
	top:75px;left:0;right:0;bottom:0;
}

#principal{
	position:absolute;
	top:0;left:0; bottom:0;
	width:55%;
}

#main{
	position:absolute;
	top:0;left:0;right:0;bottom:55px;
	overflow:auto;
}

#topmenu{
	position:fixed;
	top:0; left:0; right:0;	
	background:#222;		
	overflow:visible;	
	padding:8px;
}

#topmenu h1{
	float:left;
	font-size:20px;
	font-weight:bold;
	text-transform:uppercase;
}

#topmenu i{
	color:#999;
	font-size:22px;
	margin:5px;
	cursor:pointer;
}

#topmenu i:hover{
	color:#51959d;
}

#topmenu .onglet{
	float:right;
}

#topmenu .onglet li{
	float:left;
	width:30px;
	height:30px;
	border-radius:100px;
	background:#555;
	text-align:center;
	margin:5px 10px 5px 10px;
	padding:5px;
	cursor:pointer;
}


#topmenu .onglet li i{
	color:#aaa;
	font-size:18px;
}

#topmenu .onglet li.active{
	background:#51959d;
}

#topmenu .onglet li.active i{
	color:#fff;
}

#topmenu .onglet li.logout{
	background:none;
	margin-left:10px;	
}

#topmenu .onglet li.config{
	background:none;
	margin-left:50px;	
}

#topmenu .onglet li.logout i{
	color:#ccc;
}

#topmenu .onglet li:hover{
	opacity:0.8;	
}

#topmenu .onglet li.logout:hover{
	background:#a23a3a;
	opacity:1;
	border:none;
}

#topmenu .logo{
	float:left;
	background:#fff;
	border:2px solid #999;
	width:40px;
	height:40px;
	border-radius:100px;
	margin:5px;
	overflow:hidden;
}

#topmenu .logo img{
	width:30px;
	padding:5px;	
}

#topmenu .user{
	float:left;	
	padding:10px;
	color:#777;	
	font-weight:600;
}

#topmenu .user i{	
	color:#777;	
	margin-right:10px;
	font-size:13px;
}

/***************************/

#right{
	position:absolute;
	top:0;right:0;bottom:0;
	overflow:auto;
	width:45%;
	border-left:2px solid #ddd;
}

#right .contenu{
	padding:20px;
}

#bar{
	border-top:1px solid #ddd;	
	padding:10px 10px 10px 20px;
	position:absolute;
	bottom:0;left:0;right:0;
	background:#f0f0f0;
}

#bar .radio{
	float:right;
}



/********************/
a{
	color:#51949d;
	text-decoration:none;	
}

a:hover{
	text-decoration:underline;	
}

.interligne{
	clear:both;
	height:20px;	
}


input[type=text], input[type=password], textarea, select{
	font-family:'Lato';
	line-height:32px;
	color:#505050;	
	padding:4px;
	border:1px solid #ddd;
}

textarea, div.edit{
	padding:20px;
	font-size:14px;	
	line-height:26px;
	border:1px solid #ddd;
	overflow:auto;
}

h2{
	font-size:20px;
	font-weight:bold;
	padding-bottom:15px;
	border-bottom:1px solid #eee;
	margin-bottom:15px;	
}

h3{
	font-size:18px;
	font-weight:600;
}

h4{
	font-size:16px;
	font-weight:600;
}

h5{
	font-size:14px;
	font-weight:600;
}

.bouton{
	background:#51959d;
	color:#fff;
	font-weight:bold;
	padding:10px 20px 10px 20px;
	border:none;
	font-size:16px;
	font-family:'Lato';
	cursor:pointer;
	border-radius:3px;
	margin:5px;
}
.bouton.nok{
	background:#888;
	color:#eee;
	font-weight:normal;
}

.bouton i{
	margin-right:8px;
	color:#fff;
}

.bouton.petit{
	font-size:14px;
	padding:10px;
}

.bouton.petit i{	
	font-size:14px;	
}

.bouton.petit.ico{
	text-align:center;
}

.bouton.petit.ico i{
	margin:auto;
}

.portrait{
	position:absolute;
	width:100%;
	height:auto;
	top:-25%;
}

.paysage{
	position:absolute;
	height:100%;
	width:auto;
	left:-25%;
}

.centre{
	text-align:center;	
}

.gauche{
	text-align:left;	
}

.droite{
	text-align:right;	
}

i.checked.ok{
	font-size:16px;
	color:#51949d;
}

i.checked.nok{
	font-size:16px;
	color:#ccc;
}

i.rouge{
	color:#d13d43;	
}

.radio li{
	float:left;
	font-size:14px;
	color:#888;
	cursor:default;
	margin-right:20px;
}

.radio li i{
	font-size:13px;
	color:#888;
	cursor:pointer;
	margin-right:5px;
}

.radio li.active,.radio li.active i{
	color:#51949d;
}

/*******************/

table td{
	border-collapse:collapse;
	vertical-align:middle;
}

table td img{
	vertical-align:middle;
}

/*********************/

ul.etiquette li{
	display:block;
	float:left;
	margin:5px;
	font-size:13px;	
	cursor:pointer;
	overflow:hidden;
}

ul.etiquette li:hover{
	text-decoration:underline;
}

ul.etiquette li i{
	color:#e14d5c;
	margin-right:5px;
}

/********************/

table.liste{
	width:100%;	
}

.liste td{
	cursor:pointer;
	padding:5px 15px 5px 15px;
	border-bottom:1px dotted #e6e6e6;
	font-size:14px;	
	vertical-align:middle;
}

.liste tr.active td{
	background:#f3f7f6;
	color:#426062;
}

.liste tr.active td i{
	display:block;
}

.liste tr td:first-child{
	font-weight:400;
	color:#999;
}

.liste tr.titre td{
	font-size:13px;
	color:#aaa;	
}

.liste .pastille{
	font-size:14px;
}

.liste input[type=text]{
	border:none;
	background:none;
	width:100%;	
	cursor:pointer;	
	padding:0;
}

.liste input[type=text]:focus{
	font-weight:bold;
	cursor:text;
}

.liste select{
	cursor:pointer;
	border:1px solid #ddd;	
	border-radius:5px;
	width:300px;	
}

.liste .libelle{
	font-weight:bold;
	font-size:13px;
}

.liste .commentaire{
	color:#888;
}

.liste .gros{
	font-size:18px;
	font-weight:bold;	
}

.liste .gras{
	font-weight:bold;	
}

#nouveau select, #nouveau input[type=text]{
	width:90%;	
	padding:8px;
	margin:5px;
}


/******************/
.box{
	padding:10px 10px 0 10px;
}

.box h2{
	text-transform:uppercase;
	font-weight:600;
	font-size:17px;
	padding-bottom:5px;
	margin-bottom:10px;
	color:#51949d;
}

.box h2 i{
	margin-right:8px;	
}

.box-bouton{
	text-align:center;
	padding-top:10px;
	margin-top:20px;
	border-top:1px dotted #ddd;	
}

/***************/

.erreur{
	background:#ddbcbe;
	font-weight:bold;
}

/**********************/
.avatar{
	position:relative;
	display:block;
	overflow:hidden;
	border:1px solid #eee;
	border-radius:100px;
}

.vignette{	
	text-align:center;
}

.vignette li{
	position:relative;
	float:left;
	margin:5px;		
	width:80px;
	height:80px;
}

.vignette li:hover{
	opacity:0.85;
}

.vignette li .action{
	display:none;
	position:absolute;
	top:28px;left:20px;
	background:#bc1313;
	padding:7px;
	color:#fff;
	cursor:pointer;
	border-radius:100px;
	font-size:10px;
}

.vignette li .rotation{
	display:none;
	position:absolute;
	top:28px;left:45px;
	background:#bc1313;
	padding:7px;
	color:#fff;
	cursor:pointer;
	border-radius:100px;
	font-size:10px;
}

.vignette li:hover .action, .vignette li:hover .rotation{
	display:block;
}

.vignette li.nouveau{
	cursor:pointer;
	background:#f0f0f0;
	color:#999;
	line-height:18px;
	border:1px solid #ddd;
}

.vignette li.nouveau i{
	margin-top:15px;
	font-size:20px;
}

.vignette li.nouveau:hover .action{
	display:none;
}

/******************/
#login{
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background:#111;
	text-align:center;	
	color:#ddd;
}

#login .contenu{
	position:relative;
	width:400px;
	padding:40px;
	margin:auto;
	background:#191919;
	border-radius:8px;
	
	/* centrer verticalement */	
	margin-top: 50vh;
  	transform: translateY(-50%);
}

#login h1{
	font-size:26px;
	font-weight:500;
}

#login p{
	color:#666;
	margin-bottom:15px;
}

#login .oubli{
	font-size:13px;
	margin:15px;
}

#login .oubli i{
	margin-right:10px;
}

#login .logo{
	position:relative;
	background:#fff;
	margin:25px auto;
	width:70px;
	height:70px;
	border-radius:100px;
	text-align:center;
	border:3px solid #999;
}

#login .logo img{	
	margin:10px;
}

#login input[type=password]{
	text-align:center;	
	width:200px;
	border-radius:5px;
	margin:0;
}

#login select{
	text-align:center;	
	width:200px;
	border-radius:5px;
	margin:0;
}

#login button{
	padding:10px;
	border-radius:5px;
	margin:0;
}

#login .user{
	color:#ddd;
	font-size:16px;
	border-top:1px dotted #333;
	margin-top:15px;
	padding-top:15px;	
}

#login .user i{
	margin-right:10px;	
}

/********* COLORBOX PERSO ************/

#cboxOverlay.admin {
	background:#000;	
}

.admin #cboxLoadingOverlay, .admin #cboxContent{
	background:none;
	box-shadow:none;
}