/* Appel des fontes pour les icônes du formulaire de login */
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('/css/fontes/websymbols/websymbols-regular-webfont.eot');
    src: url('/css/fontes/websymbols/websymbols-regular-webfont.eot?.iefix') format('embedded-opentype'),
         url('/css/fontes/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('/css/fontes/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('/css/fontes/websymbols/websymbols-regular-webfont.svg.WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*************************************************************************
****                                                                  ****
****    CREATEUR ET DESIGNER ------------ Hector Sudan                ****
****    POUR LE CLIENT --------------- DEVBOARD                       ****
****    DATE DE CREATION ----------------  26.11.2013                 ****
****    DATE DE LA DERNIERE MODIFICATION - 10.12.2014 /Par Keiro      ****
****                                                                  ****
*************************************************************************/

/************************************************************************/
/************************************************************************/
/************************ INITIALISATION DU CSS *************************/
/************************************************************************/
/************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, h5, h6, p, blockquote, pre, a,
del, dfn, em, font, img, ins, kbd, q, s, samp,
abbr, acronym, address, big, cite, code, small,
strike, strong, sub, sup, tt, var, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend,
caption, tfoot, thead {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family: Verdana, sans-serif, arial, verdana;	
	vertical-align:baseline;
}

:focus {
	outline:0;
}

body {
	line-height:1;
	color:black;
	background:white;
}

ol, ul {
	list-style:none;
}

table {
	border-collapse:separate;
	border-spacing:2px;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/************************************************************************/
/************************************************************************/
/************************ FORMATAGE DE BASE *****************************/
/************************************************************************/
/************************************************************************/

/* Classe appliquée pour la mise en gras de texte */
.bold-text{
	font-weight:bold;
}

/************************************************************************/
/************************************************************************/
/************************ CLASSES GLOBALES ******************************/
/************************************************************************/
/************************************************************************/

/* Formatage de base pour tout le site */
body {
	background:url('/img/bg.jpg') repeat;
	color:#333;
}

/* Style des liens */
a {
	text-decoration:none;
}

/* Formatage de la fonte d'icône */
.ca-icon{
	position:absolute;

	color:#b8b8b8;

    font-family: 'WebSymbolsRegular', cursive;
    font-size: 25px;
	margin:8px 0 0 15px;
	z-index:555;
}

/* Formatage des titres */
h2, h3, h4{
	text-align:center;

	-webkit-text-shadow: 1px 1px 0px #ffffff;
	   -moz-text-shadow: 1px 1px 0px #ffffff;
	    -ms-text-shadow: 1px 1px 0px #ffffff;
	     -o-text-shadow: 1px 1px 0px #ffffff;
	        text-shadow: 1px 1px 0px #ffffff;
	
}

/* Titre H2 */
.header-container header h2{
	font-size:40px;		
}

/************************************************************************/
/************************************************************************/
/****************************** SITE ************************************/
/************************************************************************/
/************************************************************************/

/* Bannière de titre principal, page d'accueil */
.title-main{
	position: absolute;  

	top: 50%;
	
	height:70px;
	width:100%;
	
	background-color: rgba(0, 0, 0, 0.3);
}

/* Titre H1 de la bannière */
.title-main h1{
	color:#fff;
	text-shadow:-2px -3px #444;
	font-size:60px;
	text-align:center;	
	padding:3px 0 0 0;
}

/***********************************************/
/***************** MENU
/***********************************************/

/* Container du menu de navigation */
.nav-container{
	position: absolute;
	
	width:140px;
	height:140px;
	
	left:50%;
	top:50%;

	z-index:2;
	
	list-style: none;
}

/* Lien de menu */
ul.nav-main li a {
	background-color:#efefef;
	color: #174867;
	padding: 9px 20px 9px 15px;
	width: 100px;
	display: block;
	text-decoration: none;
	font-size:15px;
	cursor:pointer;/* Keiro */

	-webkit-border-radius: 0 10px 10px 0;
	   -moz-border-radius: 0 10px 10px 0;
	    -ms-border-radius: 0 10px 10px 0;
	     -o-border-radius: 0 10px 10px 0;
	        border-radius: 0 10px 10px 0;
	
	-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	    -ms-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	     -o-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	        box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	
	
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

/* Lien au survol */
ul.nav-main li a:hover  {
	color: #67a5cd;
	padding: 9px 20px 9px 40px;
}

/***********************************************/
/***************** CONTENT
/***********************************************/

/* Container des 2 blocs */
.main-container, .background-main{
	position:absolute;
	
	background:#efefef;

	left:50%;
	top:50%;

	-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	    -ms-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	     -o-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
	        box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);
			
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
	    -ms-border-radius:5px;
	     -o-border-radius:5px;
	        border-radius:5px;

	z-index:2;
}

/* Bloc de fond, container des 2 blocs */
.background-main{
	z-index:1;
}

/***************************/
/****** Footer du formulaire de login
/***************************/
.footer-container, .footer-background{
	background: none repeat scroll 0% 0% rgb(229, 228, 228);
	text-align:center;
	border-top:1px solid #999;
	
	-webkit-border-bottom-left-radius:5px;
	   -moz-border-bottom-left-radius:5px;
	    -ms-border-bottom-left-radius:5px;
	     -o-border-bottom-left-radius:5px;
	        border-bottom-left-radius:5px;
			
	-webkit-border-bottom-right-radius:5px;
	   -moz-border-bottom-right-radius:5px;
	    -ms-border-bottom-right-radius:5px;
	     -o-border-bottom-right-radius:5px;
	        border-bottom-right-radius:5px;
}