@charset "utf-8";
/* CSS Document */

/* Structure CSS (Transparent, sans style) */

*{border:none}
a{color:#2f5ca7;text-decoration:none;}
a:hover{color:#e89800;text-decoration:none;}

.pusher{clear:both;}

body{
    margin:0;
    padding:0;
	text-align:center;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	background:#f4f4f4;}

.Wrapper{
	margin:auto;
	max-width:1200px;
	min-width:720px;
}

.hyperlien{color:#2f5ca7;cursor:pointer;}
.hyperlien:hover{color:#e89800;}

.RedButton{
	position:relative;
	width:100%;
	margin:0px auto;
	color:#fff;
	background:#c00;
	cursor:pointer;}
.RedButton:hover{background:#2f5ca7;}

.BlueButton{
	position:relative;
	width:100%;
	margin:0px auto;
	color:#fff;
	background:#2f5ca7;
	cursor:pointer;}
.BlueButton:hover{background:#f60;}

.DarkButton{
	position:relative;
	width:100%;
	margin:0px auto;
	color:#fff;
	background:#222;
	cursor:pointer;}
.DarkButton:hover{background:#444;}

.BlackButton{
	position:relative;
	width:100%;
	margin:0px auto;
	color:#fff;
	background:#444;
	cursor:pointer;}
.BlackButton:hover{background:#000;}

.WhiteButton{
	position:relative;
	width:100%;
	margin:0px auto;
	background:#fff;
	cursor:pointer;
	color:#000;}
.WhiteButton:hover{color:#fff;background:#2f5ca7;}

.YellowButton{
	position:relative;
	width:100%;
	margin:0px auto;
	background:#dbaa26;
	cursor:pointer;
	color:#000;}
.YellowButton:hover{color:#fff;background:#2f5ca7;}

.WhiteButtonRed{
	position:relative;
	width:100%;
	margin:0px auto;
	background:#fff;
	cursor:pointer;
	color:#000;}
	
.WhiteButtonRed a{color:#000;}
.WhiteButtonRed a:hover{color:#000;}

.WhiteButtonRed:hover{background:#c00;}

.WhiteButtonGreen{
	position:relative;
	width:100%;
	margin:0px auto;
	background:#fff;
	cursor:pointer;
	color:#000;}
	
.WhiteButtonGreen a{color:#000;}
.WhiteButtonGreen a:hover{color:#000;}

.WhiteButtonGreen:hover{background:#24a920;}

.WhiteButtonBlue{
	position:relative;
	width:100%;
	margin:0px auto;
	background:#fff;
	cursor:pointer;
	color:#000;}
	
.WhiteButtonBlue a{color:#000;}
.WhiteButtonBlue a:hover{color:#000;}

.WhiteButtonBlue:hover{background:#3b598c;}

/* - - Shadow Boxes - - */

.ShadowBox{
	position:relative;
	width:100%;
	margin:0px auto;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	background:#fff;
	text-align:left;}

.ShadowBoxHover{
	position:relative;
	margin:0px auto;
	width:100%;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	color:#000;
	background:#fff;}
.ShadowBoxHover:hover{background:#2f5ca7;color:#fff;}

.ShadowBoxHoverRed{
	position:relative;
	margin:0px auto;
	width:100%;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	color:#000;
	background:#fff;}
.ShadowBoxHoverRed:hover{background:#b5322c;color:#fff;}

.ShadowBoxHoverTeal{
	position:relative;
	margin:0px auto;
	width:100%;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	color:#000;
	background:#fff;}
.ShadowBoxHoverTeal:hover{background:#3ab9dc;color:#fff;}

.BoxHover{
	position:relative;
	margin:0px auto;
	width:100%;
	color:#000;
	background:#fff;}
.BoxHover:hover{background:#2f5ca7;color:#fff;}

.ShadowBoxAdmin{
	position:relative;
	width:100%;
	margin:0px auto;
	-moz-box-shadow: 0 0 5px #464545;
	-webkit-box-shadow: 0 0 5px#464545;
	box-shadow: 0 0 5px #464545;
	background:#3b598c;
	color:#fff;
	text-align:left;}

.ShadowBoxAdmin a{color:#89b0ea;}
.ShadowBoxAdmin a:hover{color:#fff;}

.ShadowBoxAccount{
	position:relative;
	width:100%;
	margin:0px auto;
	-moz-box-shadow: 0 0 5px #464545;
	-webkit-box-shadow: 0 0 5px#464545;
	box-shadow: 0 0 5px #464545;
	background:#dbaa26;
	color:#000;
	text-align:left;}

.ShadowBoxAccount a{color:#222;}
.ShadowBoxAccount a:hover{color:#fff;}

.BoxDanger{
	position:relative;
	width:100%;
	margin:0px auto;
	background:URL(../images/setting/danger.png)repeat;}

.BoxValid{
	position:relative;
	width:100%;
	margin:0px auto;
	background:URL(../images/setting/valid.png)repeat;}

.dragged{
	z-index:999;	
	position:absolute;
	width:100%;
	margin:0px auto;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	background:#444;
	color:#fff;
	text-align:left;
	cursor:move;}

.dropped{
	z-index:990;	
	position:absolute;
	width:100%;
	margin:0px auto;
	-moz-box-shadow: 0 0 5px #2e2e2e;
	-webkit-box-shadow: 0 0 5px#2e2e2e;
	box-shadow: 0 0 5px #2e2e2e;
	background:#fff;
	color:#000;
	text-align:left;
	overflow:hidden;
	cursor:pointer;}

.MenuButton2{position:relative;cursor:pointer;color:#fff;background:#5665ae;margin-bottom:2px;}
.MenuButton2:hover{color:#222;}

.MenuButton3{position:relative;cursor:pointer;color:#fff;background:#152871;margin-bottom:2px;}
.MenuButton3:hover{color:#222;}

.fontbox{
	position:relative;
	width:100%;
	margin:0px auto;}
	
.bigfontbox{
	position:relative;
	width:100%;
	margin:0px auto;}

.FootMenu{
	position:relative;
	width:100%;}

.FootMenu a{
	color:#fff;}

.FootMenu a:hover{
	color:#dbaa26;}

/* - - Responsive Design - - */

/* max-device-width <- Definitive */

/* Vertical SmallScreen (Small) */
@media only screen and (max-device-width:700px){
	.TopMenu{display:none;}
	.MainMenu{display:none;}
	.MiniMenu{
		position:relative;
		width:100%;
		font-size:2.5em;}
	.FootMenu{display:none;}
	
	.title{font-size:2em;}
	.secondtitle{font-size:1.5em;}
	.SecondMenu{display:none;}
	.MenuButton{position:relative;cursor:pointer;color:#fff;background:#324795;margin-bottom:2px;}
	.MenuButton:hover{color:#999;}
	.FooterSection{
		float:left;
		width:50%;
		margin:0px auto;}
	.ScaleBox{width:50%;}
	.ScaleBoxOdd{display:none;}
	.ScaleBoxDouble{width:100%;}
	.ScaleHalfBox{width:100%;}
	.h1{font-size:2em;}
	.bigfontbox{font-size:2em;}
	.fontbox{font-size:1.6em;}
	
	/* Always Shown */
	.LeftColumn{
		position:relative;
		width:100%;}	
	/* Show only when the screen is Large */
	.RightColumn{display:none;}	
	/* Show only when there is no Right Column */
	.CenterColumn{
		position:relative;
		width:100%;
	}
}

/* SmallScreen (Medium) */
@media only screen and (min-device-width:700px) and (max-width:900px){
	.TopMenu{display:none;}
	.MainMenu{
		position:relative;
		width:100%;}
	.MiniMenu{display:none;}
	.FootMenu{font-size:1em;}
	.LeftColumn{
		position:relative;
		width:100%;}
	.RightColumn{display:none;}
	.CenterColumn{position:relative;
		width:100%;}
	.title{	font-size:1.7em;}
	.secondtitle{font-size:1.2em;}
	.SecondMenu{
		position:relative;
		width:100%;
		font-size:1.2em;}
	.MenuButton{position:relative;cursor:pointer;width:140px;height:50px;color:#000;margin:0px auto;
				background:url(../images/setting/button.png) 0 0px no-repeat;}
	.MenuButton:hover{color:#2f5ca7;background-position:0px -50px;}
	.FooterSection{
		float:left;
		width:50%;
		margin:0px auto;}
	.ScaleBox{width:50%;}
	.ScaleBoxOdd{display:none;}
	.ScaleBoxDouble{width:100%;}
	.ScaleHalfBox{width:50%;}
	.h1{font-size:2em;}
	.bigfontbox{font-size:1.4em;}
	.fontbox{font-size:1em;}
}

/* LargeScreen (Large) */
@media only screen and (min-device-width:700px) and (min-width:900px) and (max-width:1100px){
	.TopMenu{display:none;}
	.MainMenu{
		position:relative;
		width:100%;}
	.MiniMenu{display:none;}
	.FootMenu{font-size:1em;}
	.LeftColumn{
		float:left;
		width:70%;}
	.RightColumn{
		float:right;
		width:29%;}
	.CenterColumn{display:none;}
	.title{	font-size:1.7em;}
	.secondtitle{font-size:1.2em;}
	.SecondMenu{
		position:relative;
		width:100%;
		font-size:1.2em;}
	.MenuButton{position:relative;cursor:pointer;width:140px;height:50px;color:#000;margin:0px auto;
				background:url(../images/setting/button.png) 0 0px no-repeat;}
	.MenuButton:hover{color:#2f5ca7;background-position:0px -50px;}
	.FooterSection{
		float:left;
		width:25%;
		margin:0px auto;}
	.ScaleBox{width:50%;}
	.ScaleBoxOdd{display:none;}
	.ScaleBoxDouble{width:100%;}
	.ScaleHalfBox{width:50%;}
	.h1{font-size:2em;}
	.bigfontbox{font-size:1.4em;}
	.fontbox{font-size:1em;}
}

/* MaximumScreen (Maximum) */
@media only screen and (min-device-width:700px) and (min-width:1100px){
	.TopMenu{
		position:relative;
		width:100%;}
	.MainMenu{display:none;}
	.MiniMenu{display:none;}
	.FootMenu{font-size:1em;}
	.LeftColumn{
		float:left;
		width:70%;}
	.RightColumn{
		float:right;
		width:29%;}
	.CenterColumn{display:none;}
	.title{	font-size:1.7em;}
	.secondtitle{font-size:1.2em;}
	.SecondMenu{
		position:relative;
		width:100%;
		font-size:1.2em;}
	.MenuButton{position:relative;cursor:pointer;width:140px;height:50px;color:#000;margin:0px auto;
				background:url(../images/setting/button.png) 0 0px no-repeat;}
	.MenuButton:hover{color:#2f5ca7;background-position:0px -50px;}
	.FooterSection{
		float:left;
		width:25%;
		margin:0px auto;}
	.ScaleBox{width:33.33%;}
	.ScaleBoxDouble{width:66.66%;}
	.ScaleBoxOdd{width:33.33%;}
	.ScaleHalfBox{width:50%;}
	.h1{font-size:2em;}
	.bigfontbox{font-size:1.4em;}
	.fontbox{font-size:1em;}
}

/* Automatic Youtube Sized */

.responsiveyoutube {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;}

.responsiveyoutube iframe, .responsiveyoutube object, .responsiveyoutube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}


/* Boites Transparentes Multi-Fonctions */

.ScaleBox{
	float:left;
	margin:0px auto;}

/* Double de la taille normale de ScaleBox */
.ScaleBoxDouble{
	float:left;
	margin:0px auto;}

/* IMAGE Crop */

.img-crop,
.img-crop img{
	width: 100%; /* gotta be responsive these days */
}
.img-crop{
	background-color: #444; /* some background color for short images */
	overflow: hidden;
	
	/* remove white-space for inline-block elements */
	letter-spacing: -0.31em; /* webkit */
	*letter-spacing: normal; /* reset IE < 8 */
	word-spacing: -0.43em; /* IE < 8 && gecko */
}
.img-crop:before,
.img-crop img{
	/* vertically center the image */
	display: inline-block;
	vertical-align: middle;
}
.img-crop:before{
	/* pseudo element to vertically align image to */
	content: "";
	
	/* Magic Number */
	/* Set this to your desired height(to width) ratio */
	padding-top: 75%; /* % of original image width */ 
}
.img-crop img{
	/* removes(sorta) image from the flow */
	/*padding-left: 100%;*/
	margin: -999em 0%;
}

/* ScaleBox qui disparait quand le site n'est pas déployé au maximum */
.ScaleBoxOdd{
	float:left;
	margin:0px auto;}

.ScaleHalfBox{
	float:left;
	margin:0px auto;}

.relativebox{
	position:relative;
	width:100%;
	margin:0px auto;}

.floatleftbox{
	float:left;
	width:100%;
	margin:0px auto;}

.floatrightbox{
	float:right;
	width:100%;
	margin:0px auto;}