/**
 * 	feuille de style CSS pour le calendrier scolaire
 */

/* Style du calendrier */
.ctn-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 318px;
	background: #FFFFFF;
	color: rgb(54, 43,54);
	
	text-align: center;
}

.ctn-nav-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 25px;
	margin-top: 2px;
	background-color: #FFFFFF;
	color: #222222;
	font-weight: bold;
	line-height: 25px;
	
	-webkit-border-top-left-radius: 6px;
	-moz-border-top-left-radius: 6px;
	-o-border-top-left-radius: 6px;
	-ms-border-top-left-radius: 6px;
	-khtml-border-top-left-radius: 6px;
	border-top-left-radius: 6px;
	
	-webkit-border-top-right-radius: 6px;
	-moz-border-top-right-radius: 6px;
	-o-border-top-right-radius: 6px;
	-ms-border-top-right-radius: 6px;
	-khtml-border-top-right-radius: 6px;
	border-top-right-radius: 6px;
}

.ctn-control-calendrier-left
{
	display: block;
	float: left;
	
	width: 14px;
	height: 22px;
	margin-left: 2px;
	
	background-image: url( ../image/pictogramme/sprite-btn-pager.png );
	background-position: -18px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ctn-control-calendrier-left:hover
{
	display: block;
	float: left;
	
	width: 14px;
	height: 22px;
	margin-left: 2px;
	
	background-image: url( ../image/pictogramme/sprite-btn-pager.png );
	background-position: -18px -22px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ctn-control-calendrier-right
{
	display: block;
	float: left;
	
	width: 14px;
	height: 22px;
	margin-right: 2px;
	
	background-image: url( ../image/pictogramme/sprite-btn-pager.png );
	background-position: -32px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ctn-control-calendrier-right:hover
{
	display: block;
	float: left;
	
	width: 14px;
	height: 22px;
	margin-right: 2px;
	
	background-image: url( ../image/pictogramme/sprite-btn-pager.png );
	background-position: -32px -22px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ctn-titre-calendrier
{
	display: block;
	float: left;
	
	width: 276px;
	text-align: center;
}

.ctn-nom-jour-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 18px;
	line-height: 18px;
	
	vertical-align: middle;
	
	background-color: rgb( 165, 22, 89 );
}

.ctn-grille-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 75%;
}

.nom-jour-calendrier
{
	display: block;
	float: left;
		
	width: 13%;
	height: 100%;
	margin-right: 1.125%;
	
	font-weight: bold;
	color: #FFFFFF;
	
	font-family: Arial, Helvetica, sans-serif;
}

.ctn-ligne-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 50px;
	padding: 2px 0% 2px 0%;
}

.ctn-jour-calendrier
{
	display: block;
	float: left;
	
	width: 13%;
	height: 100%;
	
	background: rgb(215, 235, 249) url(cupertino/images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
	
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	
	-o-box-shadow: 0 0 0 1px #aed0ea;
	-webkit-box-shadow: 0 0 0 1px #aed0ea;
	-moz-box-shadow: 0 0 0 1px #aed0ea;
	-ms-box-shadow: 0 0 0 1px #aed0ea;
	-khtml-box-shadow: 0 0 0 1px #aed0ea;
	box-shadow: 0 0 0 1px #aed0ea;

	font-weight: bold;
	color: rgb(39, 121, 170);
}

.ctn-jour-calendrier.today
{
	-o-box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
	-webkit-box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
	-moz-box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
	-ms-box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
	-khtml-box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
	box-shadow: 0 0 0 1px rgb( 165, 22, 89 );
}

.interstice
{
	margin-right: 1.125%;
}

.element-premiere-colone-calendrier
{
	margin-left: 1.125%;
}

.cache
{
	visibility: hidden;
}

.numero-jour-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	height: 12px;
	top: -3px;
	
	font-size: 0.8em;
	font-weight: bolder;
	font-family: Arial, Helvetica, sans-serif;
}

.jour-ferie-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	height: 15px;
	margin-top: 1px;
	margin-bottom: 2px;
	
	font-size: 0.55em;
	line-height: 1em;
	font-weight: normal;
	
	color: rgb( 216, 130, 171 );
	font-family: Arial, Helvetica, sans-serif;
}

.vacance-zone-a-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 4px;
	margin-top: 1px;
	background-color: rgb(162, 179, 231);
}

.vacance-zone-b-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 4px;
	margin-top: 1px;
	background-color: rgb(255, 157, 157);
}

.vacance-zone-c-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 4px;
	margin-top: 1px;
	background-color: rgb(165, 204, 167);
}

.ctn-legende-calendrier
{
	display: block;
	float: none;
	clear: both;
	
	width: 100%;
	height: 5%;
	
	text-align: left;
}

.ctn-legende-vacance-zone-calendrier
{
	display: block;
	float: left;
	
	width: 33%;
	height: 100%;
}

.legende-vacance-zone-a-calendrier
{
	display: inline;
	float: none;
	
	height: 100%;
	margin-left: 5px;
	padding-left: 22px;
	
	background: url("../image/zone-a.png") no-repeat;
	background-size:20px 12px;
	background-position-y: 3px;
	
	text-align: left;
	vertical-align: middle;
	font-size: 10px;
	color: rgb(130, 130, 130);
}

.legende-vacance-zone-b-calendrier
{
	display: inline;
	float: none;
	
	height: 100%;
	margin-left: 3px;
	padding-left: 22px;
	
	background: url("../image/zone-b.png") no-repeat;
	background-size:20px 8px;
	background-position-y: 3px;
	
	text-align: left;
	vertical-align: middle;
	font-size: 10px;
	color: rgb(130, 130, 130);
}

.legende-vacance-zone-c-calendrier
{
	display: inline;
	float: none;
	
	height: 100%;
	margin-left: 3px;
	padding-left: 22px;
	
	background: url("../image/zone-c.png") no-repeat;
	background-size:20px 12px;
	background-position-y: 3px;
	
	text-align: left;
	vertical-align: middle;
	font-size: 10px;
	color: rgb(130, 130, 130);
}
/* Fin style du calendrier */