/*
-----------------------------------------------
/**
 * LOGICIEL LUDOTHEQUE SAINT MARTIN D'URIAGE
 * @package: logicielBourseLudo
 * @author : Gaelle Giacomazzi
 * @email : gaelle.giacomazzi@gmail.com
 * @version $Revision: 1 $
 *
 */



/***------ Affichage Principal des blocs principaux la page : body et blogPage ------***/

body {
	background-color: #575757;/*#E9EEF5;#F1F1F1;*/
    color: #666666;
    /*font-family: "ProximaNova",sans-serif;*/
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
	height:auto;

}

body {

	background-color: #FFFFFF;
}

.spanRed {
	color : #E81611 !important;
	font-weight : bold !important;
}

#header {
			background-color: #FFFFFF;
			height: 60px;
			color: #A5A5A5;
}


#subHeader {
		background-color : #454545;
		height: 60px;
	
}

#view {
	width:100%;
	background-color: #FFFFFF;
	padding-top : 13px;
	padding-bottom : 13px;

}

#footer {
		background-color : #454545;
		height: 25px;
		width : 100%;
		font-size:small;
		font-style:italic;
		color: #FFFFFF;
}

#footer p {
	margin : 3px;
}
#footer .element1{
	float: left;
}
#footer .element2{
	float: right;
}


.wrap {
	width: 1100px;
	margin: 0 auto;

}


.circleLogo {
	background : #F1F1F1;
	border-radius: 80px;
	height : 10px;
	width : 10px;
	position : absolute;
	top : 0px;
	left: -20px;
	text-align: center;
}



.logo {
    display: block;
    margin-top: 7px;
    left: 0;
	vertical-align: baseline;
	float:left;
	width:40%;
	
	
}
#header img {
	position:absolute;
	top:10px;
	left:10px;
}
#header p{
	color: #FF7800;
	float:left;
	margin-top:15px;
	margin-left:100px;
	font-size:x-large;
}
#header nav {
	/*right:40px;*/
	/*border-left: 1px solid rgba(0, 0, 0, 0.4);*/
    text-align: center;
    display: block;
	margin-top : 5px;
	float:right;
	width:50%;

}
#header nav a {
	/*border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.4);*/
    color: #FFFFFF;
	background-color : #454545;
    display: inline-block;
    float: left;
    font-size: medium;
    font-weight: bold;
    height: 52px;
    line-height: 52px;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: 0 -1px 0 #000000;
    transition-duration: 0.3s;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);

}
 #header nav a.actif{
	background-color: #b3d53c;
    color: #FFFFFF;
	width:40%;
	/*background: #ACCA40 url("../images/sous-menu-li-actif.png") top center repeat-x;*/
}
#header nav a:hover {
    color: red;
}


.clear {
	clear:both;
}	 

.hidden {
	display : none !important;
	overflow:hidden !important;

}
.visible {
	display : visible !important;
}






/*****************************************************
DIV NOTIFICATION : Fond bleu avec image info.png
*****************************************************/
#notification {
	background : url("../images/info.png") no-repeat 1% top #DEF0FA;
    border-color: #B8E1FD;
    box-shadow: 0 1px 0 #E2E2E2, 0 1px 0 #F0F9FF inset;
	width : 800px;
	margin:2px auto;
}

#notification p {
	padding-left : 25px;
	border-radius : 3px;
    border-style : solid;
    border-width : 1px 1px 2px;
	font-size : 16px;
}

#notification strong {
    color: #0068A2;
}

/******************************************
Div avec crayon (affiche par exemple les IDDepot - Code Depot...)
******************************************/
div.infoDB {
	background : url("../images/picto-edit.png") no-repeat 2% top;
	background-color: rgba(255, 255, 255);
    border-color: #B8E1FD;
    box-shadow: 0 1px 0 #E2E2E2, 0 1px 0 #F0F9FF inset;
	padding-left : 20px;
	border-radius : 3px;
    border-style : solid;
    border-width : 3px 3px 4px;
	width:160px;
	height : 80px;
}

div .opacity {
	/*opacity : 0.5;*/
}

div .infoDB p {
		font-size : 16px;
		font-weight:black;
		line-height:0px;
		color: black;
		padding-left:5px;
}

.infoBDstrong {
    color: #0068A2;
}

.wrapSteps h1 {
	font-size : medium;
	font-style:underline;
}



/***************************************************
Afffichage des div sur chaque View : Par exemple la div Formulaire ou la div Nb articles enregistrées
****************************************************/

/*DIV*/
div.classDiv, form.classDiv {
	background:#F1F1F1;
	padding : 5px;
	margin-top : 5px;
}

/*Titre */
div.titleDiv  {
	color: #000000;
    background-color: #ACCA40;
    display: block;
    font-family: "Open Sans",serif;
    height: 25px;
    line-height: 25px;
    margin: 0px;
	padding : 10px;
	font-size : 18px;
	border-radius : 8px 8px 0px 0px;
}
/*Span */
div.titleDiv span {
   background-color: #ACCA40;
    display: block;
    float: left;
    font-weight: bold;
	font-size : 95%;
    height: 25px;
    padding-right: 10px;
	color: #FFFFFF;
}

/************************************************
AFFICHAGE DES BOUTONS
*************************************************/
 button {
  border: none;
  border-radius: 20px;
  color: #ffffff;
  font: small;
  letter-spacing: 1px;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #000000;
  font-weight:bold;
  cursor: pointer;
}

button : hover {
  cursor: pointer;
 }

 
 
 
 
 /************************************************************************************************************************************************************
 SUBHEADER : BREADCRUMB (pas systématique)*/
 /*************************************************************************************************************************************************************/

/*ESPACE n'est plus affiché */
#espace {
	float: left;
	clear:both;
}


#espace h1 {
    color: #FFFFFF;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	margin : 0px;
	font-size : x-large;
	/*text-align : center;*/
	padding-top : 2px;
	padding-right:10px;
	padding-left:0px;
	font-size: xx-large;
	
}
 
 /*Largeur du div englobant*/

#breadcrumb{
	/*width:500px;*/
	margin-top:-18px;
	padding-top:0px;
	float:left;
}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}	

/*Style de la liste*/	
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}	

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url("../images/breadcrumb/first-left.png") 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url("../images/breadcrumb/general-left.png") 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}	

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url("../images/breadcrumb/bg-gradient.jpg") 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:small;
text-transform:uppercase;
letter-spacing:0.02em;
}	

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url("../images/breadcrumb/general-right.png") 0 0 no-repeat;
width:15px;
height:33px;
}							

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url("../images/breadcrumb/general-left.png") 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}



/********************************************************/
/*AFFICHAGE FORMULAIRE									*/
/*******************************************************/

/*Affichage des legends du formulaire */
div.title2 {
    color: #28BA5C;
 	background: url("../images/dashed.png") repeat-x scroll right 80% rgba(0, 0, 0, 0);
    display: block;
    font-family: "Open Sans",serif;
    height: 25px;
    line-height: 25px;
    margin: 3px 0 3px;
	font-weight : bold;
}

div.title2 span {
    color: #FF7800;
	background : #F1F1F1;
    display: block;
    float: left;
    font-weight: bold;
    height: 25px;
    padding-right: 10px;
} 
 
label {
	color : #2878BA;
	width: 120px;
	display: block; /* La balise devient de type block sinon elle est de type inline et on ne peut donc pas modifer sa largeur */
	float : left;
	font-weight : bold;
    line-height: 25px;
	vertical-align : bottom;
	margin-top : 10px;
}

input, output, select,textarea {
	margin-left : 4px;
	transition-duration: 0.5s;
	padding : 8px;
	width : 200px;
	box-shadow: 1px 1px 12px #aaa;
	-moz-box-shadow: 1px 1px 12px #aaa;
	-webkit-box-shadow: 1px 1px 12px #aaa;
	background : linear-gradient(top, #FFF , #aaa);
	float : left;
	margin-bottom : 5px;
}

output {
	background-color : #FFFFFF;
}

textarea {
	transition-duration: 0.5s;
	width : 400px;
	height : 40px;
	border : #aaa;
	box-shadow: 1px 1px 12px #aaa;
	-moz-box-shadow: 1px 1px 12px #aaa;
	-webkit-box-shadow: 1px 1px 12px #aaa;
	float : left;
	padding-bottom : 5px;
}

.notationFormulaire {
    color: #2EADA3;
	font-style: italic;
	padding-left : 5px;
	font-size : small;
	margin-top : 8px;
	display : inline-block;
   
}


.circle {
	background : #F1F1F1;
	border-radius: 80px;
	height : 60px;
	width : 60px;
	position : absolute;
	top : -35px;
	left: 0px;
	text-align: center;
}

.circle p {
	padding-top : 0px;
	font-size : 20px;
	color : #000000;
}
 
input:required {
	background : url("../images/red_asterisk.png") no-repeat 98% center #FFFFFF;
}
/*Si un champ est invalide, on l'entoure de rouge mais uniquement quand il est selectionne (focus) */
input:focus:invalid {
	border-color : #FF0000;
	background-image : none ; /* on ne veut pas afficher l'asterix */
	box-shadow : (#d45252,0,0,5px);
}

input:focus:invalid + p {
	color : #FF0000;

}

/*
input:focus:valid {
	border-color : #56c93f;
	background-image : none ; 
	box-shadow : (#56c93f,0,0,5px);
	-moz-box-shadow : (#56c93f,0,0,5px);
	-webkit-box-shadow : (#56c93f,0,0,5px);
}
input:valid {
	background : url("../images/valid.png") no-repeat 98% center #FFFFFF;

}
*/


.error-message {
	background: url("../images/error.png") 10px no-repeat;
	padding : 0 0 0 30px; /*Laisser un padding de 30px à gauche pour que le texte ne soit pas sur l'image de la croix (backgound) */
	display : block !important;
	color : #FF0000;
	display : none;
	margin-top: 10px;
	margin-left: 330px;
	font-size: 14px;
	font-weight: bold;
}






input[type="radio"] {
width: 20px;
height: 20px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
padding:5px;
}
.labelReglement {
	margin: 0;
	padding: 5px;
	width:90px;
}





/********************************************************/
/* DIALOG BOX(JQUERY)						*/
/*******************************************************/

.ui-dialog, .ui-dialog-content {
	border:10px solid;
	border-radius: 10px 10px 0px 0px;}

.ui-dialog-title {
		color: #ffffff;

}

.ui-widget-header {
		background:#ACCA40 !important;

}

.ui-button {
	color: #FF7800 !important;

}