@charset "UTF-8";

/*
 * www.KNACSS.com V2.5b @author: Raphael Goetter, Alsacreations
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
 */

/* implémentation avec: <link rel="stylesheet" href="knacss.css" media="all"> */

/* ----------------------------- */
/* summary */
/* ----------------------------- */
/*
1- reset
2- layout and modules
2b- radius
3- header
4- sidebar
5- footer
6- forms
7- main
8- iefix
9- color codes
10- print
11- desktop medias
12- mobile
*/

/* ----------------------------- */
/* ==reset */
/* ----------------------------- */

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
	font-size: 62.5%;
}

body {
	background-color: #fff;
	color: #000;
	font-family: "Century Gothic", helvetica, arial, sans-serif;
	font-size: 1.4em; /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
	min-height: 400px;
}

/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details,figure,hgroup
	{
	font-size: 1em; /* equiv 14px */
	line-height: 1.5;
	margin: 1.5em 0 0;
}

h1,.h1-like {
	font-size: 1.8571em; /* equiv 26px */
	font-weight: normal;
	line-height: 1.6154em;
	margin: .8077em 0 0 0;
}

h2,.h2-like {
	font-size: 1.7143em; /* equiv 24px */
	font-weight: normal;
	line-height: 1.75em;
	margin: .875em 0 0 0;
}

h3,.h3-like {
	font-size: 1.5714em; /* equiv 22px */
	font-weight: normal;
	line-height: 1.909em;
	margin: .9545em 0 0 0;
}

h4,.h4-like {
	font-size: 1.4286em; /* equiv 20px */
	font-weight: normal;
	line-height: 1.05em;
	margin: 1.05em 0 0 0;
}

h5,.h5-like {
	font-size: 1.2857em; /* equiv 18px */
	font-weight: normal;
	line-height: 1.1667em;
	margin: 1.1667em 0 0 0;
}

h6,.h6-like {
	font-size: 1.1429em; /* equiv 16px */
	font-weight: normal;
	line-height: 1.3125em;
	margin: 1.3125em 0 0 0;
}

/* alternate font-sizing */
.smaller {
	font-size: .7143em; /* equiv 10px */
	line-height: 2.1em;
}

.small {
	font-size: .8571em; /* equiv 12px */
	line-height: 1.75em;
}

.big {
	font-size: 1.1429em; /* equiv 16px */
	line-height: 1.3125em;
}

.bigger {
	font-size: 1.2857em; /* equiv 18px */
	line-height: 1.1667em;
}

.biggest {
	font-size: 1.4286em; /* equiv 20px */
	line-height: 1.05em;
}

/* soft reset */
html,body,textarea,figure,label {
	margin: 0;
	padding: 0;
}

ul,ol {
	padding-left: 2em;
}

code,pre,samp {
	white-space: pre-wrap;
	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}

code {
	line-height: 1em;
}

table {
	margin-bottom: 1.5em;
}

/* avoid top margins on first content element */
p:first-child,ul:first-child,ol:first-child,dl:first-child,blockquote:first-child,pre:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child
	{
	margin-top: 0;
}

/* avoid margins on nested elements */
li p,li ul,li ol {
	margin-top: 0;
	margin-bottom: 0;
}

/* HTML5 tags */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section
	{
	display: block;
}

/* max values */
img,table,td,blockquote,code,pre,textarea,input,video {
	max-width: 100%;
}

/* you shall not pass */
div,textarea,table,td,th,code,pre,samp {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

/* pictures */
img {
	width: auto;
	height: auto;
	vertical-align: middle;
}

a img {
	border: 0;
}

/* scripts */
body>script {
	display: none !important;
}

/* skip-links */
.skip-links {
	position: absolute;
}

.skip-links a {
	position: absolute;
	left: -9999px;
	padding: 0.5em;
	background: #000;
	color: #fff;
	text-decoration: none;
}

.skip-links a:focus {
	position: static;
}

#firstcontainer {
	min-height: 400px;
}

#noscript {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #333;
}

#noscript p {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: 10px;
	text-align: center;
	color: #fff;
	font-size: 16px;
}

#browser:before,#noscript p:before {
	content: "✘ ";
	color: #FB1C01;
	font-size: 18px;
}
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */

/* switching box model for all elements */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* float layout */
/* ----------- */

/* tutorial : http://knacss.com/demos/tutoriel.html */

/* module, contains floats (.item is the same) */
.mod,.item {
	overflow: hidden;
}

/* table layout */
/* ------------------ */
.row {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.row>*,.col {
	display: table-cell;
	vertical-align: top;
}

/* blocks that needs to be placed under floats */
.clear,.line,.row {
	clear: both;
}

/* blocks that must contain floats */
.clearfix:after,.line:after,.mod:after {
	content: "";
	display: table;
	clear: both;
}

/* alignments (blocks and inline) */
/* ------------------------------ */

/* left elements */
.left {
	float: left;
}

img.left {
	margin-right: 1em;
}

/* right elements */
.right {
	float: right;
}

img.right {
	margin-left: 1em;
}

img.left,img.right {
	margin-bottom: 5px;
}

.center {
	margin: auto;
}

.txtleft {
	text-align: left;
}

.txtright {
	text-align: right;
}

.txtcenter {
	text-align: center;
}

/* just inline-block */
.inbl {
	display: inline-block;
	vertical-align: top;
	margin-right: -.25em;
}
.block{
	display: block;
}

/* grids    					*/
/* ---------------------------- */
/* equal grids with 2% gutter 	*/
/*	En conflit avec jqGrid		[class*=grid] > * {float: left; } */
/* direct childrens are floating */
/*	En conflit avec jqGrid		[class*=grid] > * + * { margin-left: 2%; }*/
	/* here's the gutter */
.grid2>* {
	width: 49%;
}

.grid3>* {
	width: 32%;
}

.grid4>* {
	width: 23.5%;
}

.grid5>* {
	width: 18.4%;
}

.grid6>* {
	width: 15%;
}

/* unequal grids (1-2, 2-1, 1-3 and 3-1) */
.grid2-1>*:first-child,.grid1-2>*+* {
	width: 66%;
}

.grid1-2>*:first-child,.grid2-1>*+* {
	width: 32%;
}

.grid1-3>*:first-child,.grid3-1>*+* {
	width: 23.5%;
}

.grid3-1>*:first-child,.grid1-3>*+* {
	width: 74.5%;
}

/* blocks widths (percentage and pixels) */
.w10 {
	width: 10%;
}

.w20 {
	width: 20%;
}

.w25 {
	width: 25%;
}

.w30 {
	width: 30%;
}

.w33 {
	width: 33.333%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w66 {
	width: 66.666%;
}

.w70 {
	width: 70%;
}

.w75 {
	width: 75%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.w100 {
	width: 100%;
}

.w50p {
	width: 50px;
}

.w100p {
	width: 100px;
}

.w150p {
	width: 150px;
}

.w200p {
	width: 200px;
}

.w300p {
	width: 300px;
}

.w400p {
	width: 400px;
}

.w500p {
	width: 500px;
}

.w600p {
	width: 600px;
}

.w700p {
	width: 700px;
}

.w800p {
	width: 800px;
}

.w960p {
	width: 960px;
}

.mw960p {
	max-width: 960px;
}

/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
*/
.m-reset,.ma0 {
	margin: 0;
}

.p-reset,.pa0 {
	padding: 0;
}

.ma1,.mas {
	margin: 10px;
}

.ma2,.mam {
	margin: 20px;
}

.ma3,.mal {
	margin: 30px;
}

.pa1,.pas {
	padding: 10px;
}

.pa2,.pam {
	padding: 20px;
}

.pa3,.pal {
	padding: 30px;
}

.mt0,.mtn {
	margin-top: 0;
}

.mt1,.mts {
	margin-top: 10px;
}

.mt2,.mtm {
	margin-top: 20px;
}

.mt3,.mtl {
	margin-top: 30px;
}

.mr0,.mrn {
	margin-right: 0;
}

.mr1,.mrs {
	margin-right: 10px;
}

.mr2,.mrm {
	margin-right: 20px;
}

.mr3,.mrl {
	margin-right: 30px;
}

.mb0,.mbn {
	margin-bottom: 0;
}

.mb1,.mbs {
	margin-bottom: 10px;
}

.mb2,.mbm {
	margin-bottom: 20px;
}

.mb3,.mbl {
	margin-bottom: 30px;
}

.ml0,.mln {
	margin-left: 0;
}

.ml1,.mls {
	margin-left: 10px;
}

.ml2,.mlm {
	margin-left: 20px;
}

.ml3,.mll {
	margin-left: 30px;
}

.pt0,.ptn {
	padding-top: 0;
}

.pt1,.pts {
	padding-top: 10px;
}

.pt2,.ptm {
	padding-top: 20px;
}

.pt3,.ptl {
	padding-top: 30px;
}

.pr0,.prn {
	padding-right: 0;
}

.pr1,.prs {
	padding-right: 10px;
}

.pr2,.prm {
	padding-right: 20px;
}

.pr3,.prl {
	padding-right: 30px;
}

.pb0,.pbn {
	padding-bottom: 0;
}

.pb1,.pbs {
	padding-bottom: 10px;
}

.pb2,.pbm {
	padding-bottom: 20px;
}

.pb3,.pbl {
	padding-bottom: 30px;
}

.pl0,.pln {
	padding-left: 0;
}

.pl1,.pls {
	padding-left: 10px;
}

.pl2,.plm {
	padding-left: 20px;
}

.pl3,.pll {
	padding-left: 30px;
}

/* hiding content */
.visually-hidden {
	position: absolute;
	left: -7000px;
	overflow: hidden;
}

[dir=rtl] .visually-hidden {
	left: auto;
	right: -7000px;
}

/*------------------------------ */
/* ==radius (arondis)	*/
/*------------------------------ */
.radtop,header {
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	-o-border-radius: 8px 8px 0 0;
	-ms-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

.radbot,footer {
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 0 0 8px 8px;
	-o-border-radius: 0 0 8px 8px;
	-ms-border-radius: 0 8px 0 8px;
	border-radius: 0 0 8px 8px;
}

.rad4 {
	-webkit-border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	-o-border-radius: 8px 8px 8px 8px;
	-ms-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
}

.desktop-hidden {
	display: none;
} /* hidden on desktop */
.mobile-hidden {
	
} /* hidden on mobile */
.tablet-hidden {
	
} /* hidden on tablets */
.phone-hidden {
	
} /* hidden on smartphones */

/* ----------------------------- */
/* ==header */
/* ----------------------------- */
#header {
	padding-top: 10px;
	border: 1px solid #c4c6ca;
	height: auto;
	color: #777;
	font: 13px Helvetica, Arial, sans-serif;
}

#header img {
	margin-left: 10px;
	width: 333px;
	height: 50px;
}

#header span {
	padding-right: 10px;
}

#header span a {
	color: grey;
}

#header span a:hover {
	color: red;
}
/*------------------------------*/
/*	==nav	 					*/
/*------------------------------*/
nav.mainNav { /*border: 1px solid grey;*/
	min-height: 23px;
}

nav.mainNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav.mainNav ul li {
	float: left;
	width: 120px;
	margin-right: 1px;
	border: 1px solid silver;
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	-o-border-radius: 8px 8px 0 0;
	-ms-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}
nav.mainNav ul li {
	background: rgb(239, 197, 202); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(239, 197, 202, 1) 0%,
		rgba(210, 75, 90, 1) 50%, rgba(186, 39, 55, 1) 51%,
		rgba(241, 142, 153, 1) 100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(239,
		197, 202, 1) ), color-stop(50%, rgba(210, 75, 90, 1) ),
		color-stop(51%, rgba(186, 39, 55, 1) ),
		color-stop(100%, rgba(241, 142, 153, 1) ) ); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(239, 197, 202, 1) 0%,
		rgba(210, 75, 90, 1) 50%, rgba(186, 39, 55, 1) 51%,
		rgba(241, 142, 153, 1) 100% ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(239, 197, 202, 1) 0%,
		rgba(210, 75, 90, 1) 50%, rgba(186, 39, 55, 1) 51%,
		rgba(241, 142, 153, 1) 100% ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(239, 197, 202, 1) 0%,
		rgba(210, 75, 90, 1) 50%, rgba(186, 39, 55, 1) 51%,
		rgba(241, 142, 153, 1) 100% ); /* IE10+ */
	background: linear-gradient(to bottom, rgba(239, 197, 202, 1) 0%,
		rgba(210, 75, 90, 1) 50%, rgba(186, 39, 55, 1) 51%,
		rgba(241, 142, 153, 1) 100% ); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#efc5ca',
		endColorstr='#f18e99', GradientType=0 ); /* IE6-9 */
}

nav.mainNav ul li a {
	text-decoration: none;
	display: block;
	color: #fff;
	font: 1em "Trebuchet MS", Arial, sans-serif;
	line-height: 1em;
	padding: 4px 0;
	text-align: center;
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	-o-border-radius: 8px 8px 0 0;
	-ms-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

nav.mainNav ul li a:hover, nav.mainNav ul li:focus, nav.mainNav ul li a:active {
	/*background: #900;
	opacity: 0.75;*/
	color: silver;
}

/* ---nav, partie admin --- */
nav.menuNav ul, nav.menuNav  li, nav.menuNav  h2 {
		list-style-type: none;
		margin: 0; padding: 0;
}
	#menuNavUl {
	font:.9em;
    background:#e3e3e3;
    background:-moz-linear-gradient(#f5f5f5, #e3e3e3);
    background:-webkit-gradient(
    linear,
    0 0,
    0 100%,
    color-stop(0, #f5f5f5),
    color-stop(0.98, #e3e3e3),
    color-stop(1, #fff));
    border-bottom: 1px solid #ccc;
	}
	#menuNavUl > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #eee;  
    
    /* for IE6/7 */
    *display: inline;
    zoom:1; 
	}
	#menuNavUl a {
    display: block;
    padding: 0 5px;
		color: #000;
		text-decoration: none;
	}
	#menuNavUl a:hover, #menuNavUl a:focus {
		background: #eee;
	}
	#menuNavUl h2{font-size: 1em;}
	#menuNavUl h2 a { 
    display: block;
    padding: 2px 5px;
    border-right: 1px solid #ccc;
    background: none;
    text-decoration: none;
	}
	#menuNavUl h2 a:hover, #menuNavUl h2 a:focus {
	   text-decoration: underline;
	}
	.submenu {
    position: absolute;
    left: -2px; 
    z-index: 0;
    opacity: 0;
    filter:alpha(opacity=0);
		white-space: nowrap;
		background: #fff;
		-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 0 0 5px 5px; 
    -webkit-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px;         
    -webkit-border-bottom-left-radius: 5px; /* for Chrome */ 
    -webkit-border-bottom-right-radius: 5px; /* for Chrome */  
    border: 2px solid #eee;
    border-top: 1px solid #ccc;
	}
	 .submenu li {
	  height: 0;
    line-height: 25px;
    background:#fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	}
  #menuNavUl > li:hover .submenu, #menuNavUl > li.focus .submenu {
    z-index: 10;
    opacity: 1;
    filter:alpha(opacity=100);
  }
	#menuNavUl > li:hover .submenu li, #menuNavUl > li.focus .submenu li {
    height: 25px;
  }




/* ----------------------------- */
/* ==sidebar */
/* ----------------------------- */

/* ----------------------------- */
/* ==footer */
/* ----------------------------- */
body footer {
	padding: 10px;
	/*border: 1px solid #c4c6ca;*/
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.65) 100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0
		, 0, 0) ), color-stop(100%, rgba(0, 0, 0, 0.65) ) );
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.65) 100% ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.65) 100% ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.65) 100% ); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.65) 100% ); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#00000000',
		endColorstr='#a6000000', GradientType=0 ); /* IE6-9 */
}

/* ----------------------------- */
/* ==forms */
/* ----------------------------- */
form,fieldset {
	border: none;
}

input,button,select,label {
	vertical-align: middle; /* @bugfix alignment */
}

textarea {
	resize: vertical;
	font-family: inherit;
}

.error {
	border: solid thin red;
	background-color: #F79999;
}

/* ----------------------------- */
/* ==main						 */
/* ----------------------------- */
#wrapper {
	width: 70%;
	margin: auto;
}

#container {
	min-height: 400px;
}

div.detPersonne {
	display: table;
}

div.detPersonne div {
	display: table-cell;
	width: 300px;
	padding: 10px;
}

div.detPersonne div p {
	margin: 0;
}

div.detPersonne div span.libelle {
	font-style: italic;
	color: #008dde;
	min-width: 80px;
	text-align: right;
	display: inline-block;
}

div.detPersonne div span.content {
	padding-left: 6px;
	color: black;
}
/* ----------------------------- */
/* ==iefix 						 */
/* ----------------------------- */

/* haslayout for IE6/IE7 */
.ie67 .clearfix,.ie67 .line,.ie67 .mod,.ie67 .row,.ie67 .col {
	zoom: 1;
}

/* inline-block and table-cell for IE6/IE7 */
/* warning: .col needs width on IE6/IE7 */
.ie67 .btn,.ie67 .col,.ie67 .inbl {
	display: inline;
	zoom: 1;
}

.ie8 img {
	width: auto; /* @bugfix for IE8 */
}

/* Active box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */
/*
.ie67 * {
	behavior: url(/js/boxsizing.htc);
}
*/
/*------------------------------*/
/*	==color codes				*/
/*------------------------------*/
/*
black (text): #000
Dark grey (links, h1):	#008dde
Mid gray (visited links): #0066a1
vert #669517
orangé #cc6600
*/

/* ----------------------------- */
/* ==print */
/* ----------------------------- */

/* quick print reset */
@media print {
	p,blockquote {
		orphans: 2;
		widows: 2;
	}
	blockquote,ul,ol {
		page-break-inside: avoid;
	}
	h1,h2,h3,caption {
		page-break-after: avoid;
	}
	nav{
		display: none;
	}
}

/* ----------------------------- */
/* ==desktop medias */
/* ----------------------------- */
@media ( min-width : 641px) {
	/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
}

/* ----------------------------- */
/* ==mobile */
/* ----------------------------- */

/* quick tablet reset */
@media ( max-width : 768px) {
	.tablet-hidden {
		display: none;
	}
	.w60,.w66,.w70,.w75,.w80,.w90,.w100,.w600p,.w700p,.w800p,.w960p,.mw960p
		{
		width: auto;
	}
	/* responsive widths for medium (m) screens, like tablets */
	.m25 {
		width: 25%;
	}
	.m33 {
		width: 33.3333%;
	}
	.m50 {
		width: 50%;
	}
	.m66 {
		width: 66.6666%;
	}
	.m75 {
		width: 75%;
	}
	.m100 {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
}

/* quick smartphone reset */
@media ( max-width : 640px) {
	.phone-hidden {
		display: none;
	}
	.mod,.item,.col,label,fieldset {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
	.w30,.w33,.w40,.w50,.w300p,.w400p,.w500p {
		width: auto;
	}
	.row {
		display: block !important;
		width: 100% !important;
	}
	/* responsive widths for tiny (t) screens, like smartphones */
	.t25 {
		width: 25%;
	}
	.t33 {
		width: 33.3333%;
	}
	.t50 {
		width: 50%;
	}
	.t66 {
		width: 66.6666%;
	}
	.t75 {
		width: 75%;
	}
	.t100 {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
	th,td {
		display: block !important;
		width: auto !important;
		text-align: left !important;
	}
	thead {
		display: none;
	}
}

@media ( -webkit-min-device-pixel-ratio : 2) , ( min-resolution : 192dpi) , (
		min-resolution : 2dppx) { /* Style adjustments for retina devices */
}

/* orientation iOS font-size fix */
@media ( orientation : landscape) and (max-device-width: 768px) {
	html,body {
		-webkit-text-size-adjust: 100%;
	}
}