/* CSS Document */

/* ------------------------------------------------------------------------------------------------------ */	
/* -- ARCHITECTURE PRINCIPALE DE LA PAGE ---------------------------------------------------------------- */
/* -- TETE ---------------------------------------------------------------------------------------------- */
/* -- MENU ---------------------------------------------------------------------------------------------- */
/* -- CONTENU ------------------------------------------------------------------------------------------- */
/* -- MARGE --------------------------------------------------------------------------------------------- */
/* -- COEUR --------------------------------------------------------------------------------------------- */
/* -- OU ETES VOUS -------------------------------------------------------------------------------------- */	
/* -- PIED ---------------------------------------------------------------------------------------------- */

/* -- CREATION COMPTE - MODIFICATION PROFIL ------------------------------------------------------------- */
/* -- QCM ----------------------------------------------------------------------------------------------- */
/* -- ITEMS --------------------------------------------------------------------------------------------- */
/* -- ELEMENTS DE FORMULAIRE ---------------------------------------------------------------------------- */
/* -- LIENS --------------------------------------------------------------------------------------------- */
/* -- ALERTES ------------------------------------------------------------------------------------------- */

/* -- MEDIA QUERY --------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */	



/* ------------------------------------------------------------------------------------------------------ */	
/* -- ARCHITECTURE PRINCIPALE DE LA PAGE ---------------------------------------------------------------- */

form, ul, li, div {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Helveticaneue, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	background: #FFFFFF;
	-webkit-background-size: cover;
	background-size: cover;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- TETE ---------------------------------------------------------------------------------------------- */

#id_div_tete {
	position: relative;
	padding: 0;	
	height: 100px;
	background: -webkit-linear-gradient(left, #888888, #EEEEEE);
	background: -moz-linear-gradient(left, #888888, #EEEEEE);
	background: -ms-linear-gradient(left, #888888, #EEEEEE);
	background: -o-linear-gradient(left, #888888, #EEEEEE);
	background: linear-gradient(left, #888888, #EEEEEE);
}

#id_div_logo {
	position: relative;
	width: 240px;
	height: 75px;	
	margin: 10 0 0 10;
	float: left;
	display: inline;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- MENU ---------------------------------------------------------------------------------------------- */

#id_div_menu {
	position: relative;
	height: 40px;
	padding: 0;
	text-align: center;
	font-size: 15px;
	background: -webkit-linear-gradient(left, #333333, #777777);
	background: -moz-linear-gradient(left, #333333, #777777);
	background: -ms-linear-gradient(left, #333333, #777777);
	background: -o-linear-gradient(left, #333333, #777777);
	background: linear-gradient(left, #333333, #777777);
}

#id_li_home {
	-webkit-filter: brightness(80%);
	-moz-filter: brightness(80%);
	-ms-filter: brightness(80%);
	-o-filter: brightness(80%);
	filter: brightness(80%);
}

#id_li_home:hover {
	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-ms-filter: brightness(100%);
	-o-filter: brightness(100%);
	filter: brightness(100%);
}

#id_div_menu > ul {
	margin: 0;
	padding: 0;
}

#id_div_menu > ul::after {
	content: "";
	display: block;
	clear: both;
}

#id_div_menu > ul > li {
	position: relative;
	float: left;
}

#id_div_menu li {
	text-shadow: 2px 2px 2px #000000;
	list-style: none;
}

#id_div_menu a {
	display: block;
	color: #E6E6E6;
	text-decoration: none;
	-webkit-transition: color .2s ease-in;
	-moz-transition: color .2s ease-in;
	-ms-transition: color .2s ease-in;
	-o-transition: color .2s ease-in;
	transition: color .2s ease-in;
}

#id_div_menu a:hover {
	color: #FFFFFF;
}

#id_div_menu > ul > li > a {
	margin: 0 0 0 0;
	padding: 12 20 10 20;
	text-transform: uppercase;
}

#id_div_menu .class_sous_menu {
	display: none;
}

#id_div_menu .class_sous_menu a {
	padding: 5 20 5 20;
}

.class_menu_mobile {
	height: 40px;
	display: none;
	text-align: right;
	background: -webkit-linear-gradient(left, #333333, #777777);
	background: -moz-linear-gradient(left, #333333, #777777);
	background: -ms-linear-gradient(left, #333333, #777777);
	background: -o-linear-gradient(left, #333333, #777777);
	background: linear-gradient(left, #333333, #777777);
}

#id_div_affichage_menu {
	padding: 10 10 5 0;
}

#id_div_menu input[type=checkbox] {
	display: none;
}

#id_div_menu input[type=checkbox]:checked ~ ul {
	display: block;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- CONTENU ------------------------------------------------------------------------------------------- */

#id_div_contenu {
	position: relative;
	clear: both;
	padding: 0;
	text-align: center;
	min-height: 100%;
	margin-bottom: -0px;
	background: #FFFFFF;
}

#id_div_contenu:after {
	content: "";
	display: block;
	height: 0px;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- MARGE --------------------------------------------------------------------------------------------- */

#id_div_marge {
	float: left;
	clear: both;
	margin: 0 0 0 0;
	height: 120%;
	background: #E9E9E9;
	background: -webkit-linear-gradient(top, #E9E9E9, #F9F9F9);
	background: -moz-linear-gradient(top, #E9E9E9, #F9F9F9);
	background: -ms-linear-gradient(top, #E9E9E9, #F9F9F9);
	background: -o-linear-gradient(top, #E9E9E9, #F9F9F9);
	background: linear-gradient(top, #E9E9E9, #F9F9F9);
}

#id_div_marge input {
	margin: 0 0 5 0;
}

#id_div_login {
	margin: 5 0 0 5;
	text-align: left;
}

#id_div_logged {
	margin: -5 0 0 5;
	text-align: left;
}

#id_div_programmes {
	margin: 30 0 0 5;
	text-align: left;
}

#id_div_programmes img {
	margin: -3 0 -3 -5;
	padding: 5 0 0 0;
	border: 0;
	width: 20px;
	height: 20px;
}

#id_div_types {
	margin: 30 0 0 5;
	text-align: left;
}

#id_div_types li {
	list-style: none;
	margin: 5 0 0 20;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- COEUR --------------------------------------------------------------------------------------------- */

#id_div_coeur {
	float: left;
	clear: both;
	margin: 0 0 0 0;
	min-height: 100%;
	background: #FFFFFF;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- OU ETES VOUS -------------------------------------------------------------------------------------- */	

#id_div_ou_etes_vous {
	position: relative;
	margin: 0 0 75 0;
	padding: 10 10 10 10;
	text-transform: uppercase;
	text-align: left;
	font-size: 15px;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px #000000;
	background: -webkit-linear-gradient(left, #999999, #EEEEEE);
	background: -moz-linear-gradient(left, #999999, #EEEEEE);
	background: -ms-linear-gradient(left, #999999, #EEEEEE);
	background: -o-linear-gradient(left, #999999, #EEEEEE);
	background: linear-gradient(left, #999999, #EEEEEE);
}

#id_div_ou_etes_vous a {
	color: #F3F3F3;
	text-decoration:none;
	-webkit-transition: color .2s ease-in;
	-moz-transition: color .2s ease-in;
	-ms-transition: color .2s ease-in;
	-o-transition: color .2s ease-in;
	transition: color .2s ease-in;
}

#id_div_ou_etes_vous a:hover {
	color: #FFFFFF;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- PIED ---------------------------------------------------------------------------------------------- */

#id_div_pied {
	position: relative;
	clear: both;
	padding: 0;
	color: #FFFFFF;
	height: 30px;
	text-align: left;
	background: -webkit-linear-gradient(left, #333333, #777777);
	background: -moz-linear-gradient(left, #333333, #777777);
	background: -ms-linear-gradient(left, #333333, #777777);
	background: -o-linear-gradient(left, #333333, #777777);
	background: linear-gradient(left, #333333, #777777);
}

#id_div_pied div {
	padding: 7 0 7 10;
}

#id_div_pied a {
	text-decoration:none;
	color: #E6E6E6;
	-webkit-transition: color .2s ease-in;
	-moz-transition: color .2s ease-in;
	-ms-transition: color .2s ease-in;
	-o-transition: color .2s ease-in;
	transition: color .2s ease-in;
}

#id_div_pied a:hover {
	color: #FFFFFF;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- CREATION COMPTE - MODIFICATION PROFIL ------------------------------------------------------------- */

#id_div_creation_compte, #id_div_modification_profil {
	position: relative;
	display: none;
	min-width: 352px;
	padding: 0;
	border-radius: 4px;
	box-shadow: 2px 2px 3px #555555;
}

#id_div_creation_compte table, #id_div_modification_profil table {
	margin: 0;
	padding: 15 10 15 10;
	width: 100%;
	font-size: 13px;
}

#id_div_creation_compte table td, #id_div_modification_profil table td {
	padding: 3 6 3 6;
}




/* ------------------------------------------------------------------------------------------------------ */	
/* -- QCM ----------------------------------------------------------------------------------------------- */

#id_div_qcm {
	position: relative;
	min-width: 352px;
	padding: 30 10 10 20;
	text-align: left;
	border-radius: 4px;
	box-shadow: 2px 2px 3px #555555;
}

#id_div_qcm .class_div_question {
	margin: 0 0 20 0;
}

#id_div_qcm .class_question {
	margin: 0 0 0 0;
	padding: 5 10 5 10;
	border: 2px solid #F90;
	background: #92E490;
	border-radius: 15px;
	box-shadow: 4px 4px 4px #222222;
}

#id_div_qcm .class_div_reponses {
	margin: 0 0 30 10;
}

#id_div_qcm input[type=radio] {
	display: none;
}

#id_div_qcm input[type=radio] + label:before {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 50%;
	margin-top: -3px;
	margin-right: 6px;
	display: inline-block;
	vertical-align: middle;
	content: '';
	width: 15px;
	height: 15px;
}

#id_div_qcm input[type=radio]:checked + label:before {
	background: #F90;
	border-color: #F90;
	box-shadow: inset 0px 0px 0px 2px #FFFFFF;
}

#id_div_qcm label {
	margin-right: 30px;
	cursor: pointer;
}

#id_div_qcm .class_img_reponses {
	margin: 0 0 -10 50;
	border: 0px;
	width: 40px;
	height: 40px;
}

#id_div_validation {
	position: relative;
	display: block;
	margin: 0 0 10 0;
	text-align: center;
}

#id_div_rechargement {
	position: relative;
	display: none;
	margin: 0 0 10 0;
	text-align: center;
}

#id_div_loader {
	position: absolute;
	display: block;
	bottom: 20px;
	right: 120px;
}

#id_div_resultat {
	position: absolute;
	display: block;
	bottom: 20px;
	right: 40px;
}

#id_font_resultat {
	font-weight: bold;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- ITEMS --------------------------------------------------------------------------------------------- */

#id_div_items {
	position: relative;
	min-width: 352px;
	padding: 5 10 10 35;
	text-align: left;
	border: 0px solid #F90;
	border-radius: 4px;
	box-shadow: 2px 2px 3px #555555;
}

#id_div_items li {
	margin: 10 0 0 0;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- ELEMENTS DE FORMULAIRE ---------------------------------------------------------------------------- */

.class_saisie {
	height: 24px;
	padding: 0 4 0 4;
	border: 1px solid #F90;
	font-size: 13px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

.class_saisie:focus {
	outline: none;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- LIENS --------------------------------------------------------------------------------------------- */

.class_a_normal {
	color: #00A651;
	font-weight: bold;
	text-decoration:none;
}

.class_a_normal:hover {
	color: #3CB878;
}

.class_bouton {
	padding: 4 8 4 8;
	font-size: 13px;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	font-variant: small-caps;
	cursor: pointer;
	border: 1px solid #999999;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
	background: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC);
	background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
	background: -ms-linear-gradient(top, #FFFFFF, #CCCCCC);
	background: -o-linear-gradient(top, #FFFFFF, #CCCCCC);
	background: linear-gradient(top, #FFFFFF, #CCCCCC);
}

.class_bouton:hover {
	background: -webkit-linear-gradient(top, #FFFFFF, #AAAAAA);
	background: -moz-linear-gradient(top, #FFFFFF, #AAAAAA);
	background: -ms-linear-gradient(top, #FFFFFF, #AAAAAA);
	background: -o-linear-gradient(top, #FFFFFF, #AAAAAA);
	background: linear-gradient(top, #FFFFFF, #AAAAAA);
	color: #000000;
}

.class_bouton:focus {
	outline: none;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- ALERTES ------------------------------------------------------------------------------------------- */

.font_alerte {
	color: #AE1920;
	font-weight: bold;
}


/* ------------------------------------------------------------------------------------------------------ */	
/* -- CURSEUR ------------------------------------------------------------------------------------------- */

.class_img_curseur {
	width: 352px;
	height: 30px;
	border-radius: 15px;
	box-shadow: 2px 2px 2px #222222;
}



/* ------------------------------------------------------------------------------------------------------ */	
/* -- MEDIA QUERY --------------------------------------------------------------------------------------- */

/* -------------------------------------------- */	
/* -- architecture principale ----------------- */

@media screen and (min-width: 1025px) {
	#id_div_tete, ##id_div_menu, #id_div_contenu, #id_div_pied {
		margin: 0 auto 0 auto;
	}
	#id_div_marge {
		width: 20%;
		clear: none;
	}
	#id_div_coeur {
		width: 80%;
		clear: none;
	}
	#id_div_programmes {
		display: block;
	}
	#id_div_types {
		display: block;
	}
}

@media screen and (max-width: 1024px) {
	#id_div_tete, #id_div_menu , #id_div_contenu, #id_div_pied {
		margin: 0 auto 0 auto;
	}
	#id_div_marge {
		width: 100%;
		clear: both;
		height: auto;
	}
	#id_div_coeur {
		width: 100%;
		clear: both;
	}
	#id_div_programmes {
		display: none;
	}
	#id_div_types {
		display: none;
	}
}

/* -------------------------------------------- */	
/* -- compte - qcm - items -------------------- */

@media screen and (min-width: 1201px) {
	#id_div_creation_compte, #id_div_modification_profil {
		margin: 0 27% 50 27%;
	}
	#id_div_qcm, #id_div_items {
		margin: 0 20% 50 20%;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#id_div_creation_compte, #id_div_modification_profil {
		margin: 0 17% 50 17%;
	}
	#id_div_qcm, #id_div_items {
		margin: 0 10% 50 10%;
	}
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
	#id_div_creation_compte, #id_div_modification_profil {
		margin: 0 12% 50 12%;
	}
	#id_div_qcm, #id_div_items {
		margin: 0 5% 50 5%;
	}
}

@media screen and (max-width: 800px) {
	#id_div_creation_compte, #id_div_modification_profil {
		margin: 0 1% 50 1%;
	}
	#id_div_qcm, #id_div_items {
		margin: 0 1% 50 1%;
	}
}

/* -------------------------------------------- */	
/* -- menu ------------------------------------ */

@media screen and (min-width: 641px) {
	#id_div_menu > ul > li {
		width: 100px;
		background: url(../images/fond_menu_triangle.png);
	}
	#id_div_menu #id_li_home {
		width: 50px;
		background: url(../images/fond_menu_transparent.png);
	}
	#id_div_menu li:hover .class_sous_menu {
		display: inline-block;
		position: absolute;
		top: 100%;
		left: 10;
		padding: 0;
		z-index: 100000;
	}
	.class_sous_menu li a {
		width: 300px;
		margin: 0 0 0 0;
		padding: 12 20 10 20;
		font-size: 13px;
		text-align: left;
		border-top : 1px solid #777777;
		background: url(../images/fond_sous_menu.png);
	}
}

@media screen and (max-width: 640px) {
	#id_div_menu {
		overflow: auto;
		height: auto;
		text-align: left;
	}
	#id_div_menu ul {
		display: none;
	}
	#id_div_menu li {
		float: left;
		width: 100%;
	}
	#id_div_menu a:hover  {
		background: url(../images/fond_sous_menu.png);
	}
	.class_menu_mobile {
		display: block;
	}
}

/* -------------------------------------------- */	
/* -- global ---------------------------------- */

@media screen and (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	table, td, blockquote, code, pre, textarea, input, object, embed, video {
		max-width: 100%;
	}
	img {
		height: auto;
	}
	textarea, table, td, th, code, pre, samp {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;
	}
	code, pre, samp {
		white-space: pre-wrap;
	}
	.hide_mobile {
		display: none !important;
	}
	body:before {
		content: "Version mobile de La Caboche";
		display: block;
		font-size: 13px;
		text-align: center;
		color: #000000;
	}
}