html, body {
}
body {
	margin:0;
	background:#EAEAEA;
	background:#F9F5F0;
}
body, textarea, select, input {
	font-family:'Open Sans',Arial,Sans-serif;
	font-size:9pt;
}
a {
	color: #235A81;
	text-decoration: none;
}
label {
	font-weight:bold;
}

/*---------------------------------------------------*/
/* mise en page */
/*---------------------------------------------------*/
#header {
	position:relative;
	width:100%;
}

#body {
	position:relative;
	width:100%;
}
#body-side {
	position:relative;
	float:left;
	width:20%;
}
#body-content {
	position:relative;
	float:left;
	width:80%;
}
#body::after {
	clear:both;
}

/*---------------------------------------------------*/
/* barre du haut */
/*---------------------------------------------------*/
#topbar {
	background:#8BC954;
	color:#EFEFEF;
	border-bottom:4px solid #71B238;
	text-align:center;
	font-size:1.1em;
}
#topbar  ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
#topbar  li {
	display:inline-block;
	margin:.4em;
}
#topbar li form {
	display:inline;
}
#topbar  li a {	
	display:inline-block;
	padding:.9em;
	color:#FFF;
	
	border-radius:.2em;
}
#topbar  li a:hover {
	background:#FFF;
	color:#242424;
}

/*---------------------------------------------------*/
/* barre latérale */
/*---------------------------------------------------*/
#sidebar ul {
	background:#FFF;
	list-style-type:none;
	padding:0;
	margin:0;
	border-left:1px solid #DDD;
	border-right:1px solid #DDD;
	border-top:1px solid #DDD;
	margin:1em;
	
	border-radius:.3em;
}
#sidebar li {
	border-bottom:1px solid #DDD;
}
#sidebar a {
	color:#555;
	text-decoration:none;
	display:block;
	padding:.7em;
}
#sidebar a:hover {
	background:#1CA6E5;
	color:#fff;
	text-decoration:none;
}

/*---------------------------------------------------*/
/* contenu */
/*---------------------------------------------------*/

#content {
	margin:1em;
}

/* bloc */
.panel {
	border:1px solid #D2D2D2;
	border-bottom-width:.3em;
	background:#FEFEFE;
	margin-bottom:1em;
	
	border-radius:.3em;
}
.panel .title {
	margin:1em;
	color:#555;
	border-bottom:1px solid #EEE;
}
.panel .title h2 {
	margin:0;
	padding:.1em .2em;
	font-weight:normal;
	letter-spacing:-1px;
	text-transform:uppercase;
}
.panel .content {
	margin:1em;
}

.panel .status {
	background:#FCFDFE;
	border-top:1px solid #EEE;
	padding:1em;
}

/* tableau */
table {
	width:100%;
	margin:1em 0;
	border-collapse:collapse;
}
td {
	color:#333;
}
tr.odd td {
	background:#FCFCFC;
}
tr.even td {
	background:#F4F8FB;
}
th, td {
	border-bottom:1px solid #EAEAEA;
	padding:.4em; 
}

/* éléments de formulaire */
.input {
	border:1px solid #D5D5D5;
	background:#F9F9F9;
	color:#666;
	padding: .3em;
	margin: .1em 0;
	
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.button {
	cursor: pointer;
	font-weight: bold;
	border: 1px solid #AAA;
	padding: 3px 7px;
	color: #111;
	text-decoration: none;
	/*margin: 1% 0;*/
	
	border-radius: 8px;
	text-shadow: 0px 1px 0px #FFF;
	background-image:linear-gradient(to bottom, #FFF, #CCC);
}
a.button {
	text-decoration:none;
}
span.input {
	display:inline-block;
}
span.input .inner {
	border:none;
	background:transparent;
	color:inherit;
}

/* !!! */
.tiny { width:100px; }
.full { width:98%; }
.half { width:50%; }
.quarter { width:25%; }
.x3quarters { width:75%; }

/* !!! */
.line-data { display:table; width:100%; }
.line-data  label { display:table-cell; width:18%; vertical-align:top; }

/*---------------------------------------------------*/
/* génériques */
/*---------------------------------------------------*/

.clearer {
	clear:both;
}

.translucent {
    opacity : 0.5;
    -moz-opacity : 0.5;
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    filter : alpha(opacity=50); /* IE < 8 */ 
}

/* bouton à tout faire*/
a.xtbtn {
	text-decoration:none;
	font-size:.8em;
	background:#2BA8E3; /* border #2286B6*/
	color:#FFF;
	padding:.2em .3em;
	border-right:1px solid #2286B6;
	border-bottom:3px solid #2286B6;
	
	border-radius:.2em;
}
a.xtbtn:hover {
	color:#2286B6;
}

/* bouton suppression */
a.rmbtn { border:1px solid #aaa; background:#eaeaea; color:#333; padding-left:.3em; text-decoration:none; }
a.rmbtn:hover { color:#000; }
a.rmbtn::after { content:'\d7'; color:#888; font-size:1.3em; font-weight:bold; vertical-align:middle; padding-left:.3em; padding-right:.2em; }
a.rmbtn:hover::after { color:#000; }

/*---------------------------------------------------*/
/* bloc de messages */
/* http://www.jankoatwarpspeed.com/css-message-boxes-for-different-message-types/ */
/*---------------------------------------------------*/

.info, .success, .warning, .error, .validation {
	border: 1px solid;
	margin: 1em 0;
	padding:1.2em 1em 1.2em 4.5em;
	background-repeat: no-repeat;
	background-position: 10px center;
	
	border-radius:.4em;
}
.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('info.png');
}
.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('success.png');
}
.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('warning.png');
}
.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('error.png');
}
.validation {
	color: #D63301;
	background-color: #FFCCBA;
	background-image: url('validation.png');
}

.info button.close, .success button.close, .warning button.close,
.error button.close, .validation button.close  {
	float:right;
	font-size:1.1em;
	border:0;
	background:transparent;
	cursor:pointer;
}
.info button.close { color:#00529B; }
.success button.close { color:#4F8A10; }
.warning button.close { color:#9F6000; }
.error button.close {color:#D8000C; }
.validation button.close { color:#D63301; }