body{
	width : 1280px;
	margin:auto;
	background : #f4f5f9;
	position : relative;
	font-family : arial;
	padding-bottom : 20px;
}

#main{
	box-shadow: 0px 0px 20px 4px #000000;	
}

#error_display_box{
	width : 310px;
	margin : auto;
	text-align : center;
	font-size : 12px;
}



@font-face {
	font-family: "coolvetica";
	src: url('../fonts/coolvetica rg.ttf');
}

@font-face {
	font-family: "Arial Bold";
	src: url('../fonts/Arial Bold.ttf');
}

.vert{
	color : #88be45;
}

.coolvetica{
	font-family: "coolvetica";
}

.strong{
	font-weight : bold;
}

.center{
	text-align :center;
}

.italic{
	font-style: italic;
}

#header{
	width : 100%;
	height : 177px;
}

#header .logo{
	background : url('../images/logo.png') no-repeat;
	height : 91px;
	width : 368px;
	margin: auto;
}

#header .navbar{
	background : url('../images/bandeau_menu.png') no-repeat right;
	height : 61px;
	width : 100%
}

#header .navbar_full{
	background : #273e6c;
	height : 45px;
	width : 100%;
	text-align:right;	
	font-size : 12pt;
	margin-top : 10px
}

#header .navbar_full a{
	color : #FFFFFF;
	display : block;
	margin-top : 13px;
	margin-right : 50px;
}

#header   .active_page{
	color : #09a5c3;
}



label, .lbl_form, .champs_obligatoires{
	color : #CCCCCC ;
}
.bloc_info{
	border-radius : 25px;	
	border : 4px solid #77aa47;
	background : #FFFFFF;	
	color : #000000;	
}

.bloc_affichage{
	width : 734px;
	margin : auto;
	border : 1px solid #000000;
	border-radius : 10px;
	box-shadow: 2px 2px 20px 3px #000000;	
	margin-top : 65px;
	background : #0b2558 bottom;
	color : #FFFFFF
}

.champs_obligatoires{
	font-size : 12px
}
.navbar .navbar_gauche{
	display:inline-block;
	width : 975px;
}

.navbar .navbar_droite{
	display:inline-block;
	vertical-align : top;
	padding-top : 10px;
}

.navbar .navbar_droite a{
	display:block;
	margin-left : 80px;
	color : #FFFFFF;
	font-size : 12pt;
	text-decoration : underline;
}

ul.topbar{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14pt;
}



.topbar > li:first-child{
	margin-left: 315px;
}

.topbar > li:nth-child(2){
	margin-left: 22px;
}

.topbar > li:nth-child(3){
	margin-left: 22px;
}

.topbar > li{
	display : inline-block;
}

.topbar > li > a{
	display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.topbar > li > a:hover{
	color : #09a5c3;
}

#content{
	width : 100%;
	padding : 50px 0;
	margin:auto;
	background : url('../images/background.png') no-repeat #0b2558 bottom;
}


#footer{
	background : #75a743;
	height : 43px;
	width : 100%;
	color : #FFFFFF;
	text-align : center;
}

#footer a{
	color : #FFFFFF;
	padding-top : 10px;
	display : block;
}

/*
Pages 
*/


/*
Accueil
*/

.page_accueil{   
   background : url('../images/bg_accueil.png') no-repeat #0b2558 bottom !important;	   
   height : 734px;   
   width : 100%   
}    

.page_accueil #btn_je_minscris{
	position : absolute;
	left : 930px;
	top : 765px;
	display : block;
	background : url('../images/btn_je_minscris.png') no-repeat;
	width : 268px;
	height : 68px;
}

.page_accueil #illustration_maillot{
	position : absolute;
	left : -34px;
	bottom : 19px;
	display : block;
	background :  url('../images/illustration_maillot.png');
	width : 575px;
	height : 473px;
}

.page_accueil .bloc_accueil{	
	display : none;
	width : 552px;
	border : 3px solid #FFFFFF;
	height : 349px;
	margin-left : 363px;
	border-radius : 48px 0 48px 48px;
	margin-top : -26px;
	color : #FFFFFF;
	
}

.page_accueil .bloc_accueil p{	
	margin-left : 10px;
	margin-top : 15px;
	font-size : 40pt;
	text-align:center;
	line-height : 57px;
	font-style : regular
}

  

/*Detail*/

.page_detail{
	height : 734px;
	width : 100%;
}



.page_detail .bloc_affichage{
	position : relative;
	height : 425px;
	background : url('../images/bg_bloc_detail.png') no-repeat #0b2558 bottom;
}


.page_detail .bloc_affichage .bloc_info{
	width : 370px;
	height : 200px;	
	margin:auto;
	margin-top : 25px;
	margin-left : 47px;

}


.page_detail .bloc_affichage .bloc_info p{
		padding-top : 15px;
		font-size : 13px;
		text-align : center;
		line-height :15px;
}

.page_detail .bloc_affichage .bloc_info #logo_parions_sport{
		width : 157px;
		height : 39px;
		margin : auto;
		display : block;
		margin-top : 16px;
		margin-bottom : 3px;
}

.page_detail .bloc_affichage #fleche_bleue{
	position : absolute;
	left : 265px;
	top : 210px;
}

.page_detail .bloc_affichage #je_personalise{
	position : absolute;
	left : 345px;
	top : 285px;
}

/* Inscription */
.page_inscription .infoInscription{
	color : #c89e5a;
	text-align:center;
	margin-top : 35px;
}

.page_inscription .formulaire{
	text-align : center;

}

.page_inscription .formulaire input[type="text"], .page_inscription .formulaire input[type="email"]{
	text-align : center;
	margin : 10px auto;
	width : 310px;
}

.page_inscription .formulaire input[type="file"]{
	background : #FFFFFF;
	border : 1px solid #000000;
	border-radius : 50px;
	padding-right : 30px;
	margin : 10px auto;
	width : 310px;	
}

.page_inscription #bloc_cgu{
	width : 370px;
	height : 300px;
	overflow : auto;
	background : #FFFFFF;
	border : 1px solid #000000;
	margin:auto;
	padding : 20px;
}

.page_inscription .valider{
	width : 215px;
	height : 68px;
	background : url('../images/btn-jevalide-2.png') no-repeat ;	
}

.page_inscription .lbl_form {
	display : inline-block;
}

.page_inscription .lbl_illustration {
	display : inline-block;
	vertical-align : middle;
}

/* page confirmation inscription */
.page_confirmation_inscription .bloc_info{
	width : 385px;
	margin:0px auto 150px auto;
	padding : 30px 10px;	
}

.page_confirmation_inscription .bloc_info button{
	background : url('../images/btn-ouicestparti-2-pc.png') no-repeat;
	width : 147px;
	height : 40px;
	display : block;
	margin: 10px auto 25px auto;
}



/* Page félicitations */
.page_felicitations {
	text-align : center;	
}

.page_felicitations .bloc_affichage{
	padding : 20px 0;
}

.page_felicitations a {
	color : #FFFFFF;	
}

.page_felicitations .italic{
	color : #CCCCCC;
}

hr{
	width : 200px;
	color : #c89e5a;
	border : 1px solid #c89e5a;
}

/* Page personnalisation */
.page_personnalisation .bloc_affichage{
	width : 645px;
	display : inline-block;
	padding : 10px;
	margin-left : 75px;
}

.page_personnalisation h2{
		color : #FFFFFF;
		text-align:center;
		font-size : 39pt;
		padding : 0;
		margin : 0;
		
}

.page_personnalisation h2 span.vert{
		font-size : 54pt
}


.page_personnalisation .bloc_affichage .bloc_configurateur{
	width : 375px;
	border : 1px solid #77aa47;
	border-radius : 25px;
	overflow : hidden;
	background : #dfe3e9;
	display : inline-block;
	text-align:center;
	padding-bottom : 15px;
}

.page_personnalisation .bloc_affichage .bloc_configurateur p{
	color : #8a8a8a;
	margin-top : 10px;
	font-size : 12px;
}

.page_personnalisation .bloc_affichage .bloc_configurateur h3{
	color : #FFFFFF;
	background : #77aa47;
	margin : 0;
	padding : 10px 0 10px 0 ;
	text-align : center;
	margin-bottom : 20px;
}
												 
.page_personnalisation .bloc_affichage .bloc_configurateur h3.titretaille{
	margin-top : 20px;
}

.page_personnalisation .bloc_affichage .bloc_configurateur .radio{
	display : inline-block;
	margin-right : 50px;
	
}

.page_personnalisation .bloc_affichage .bloc_configurateur .radio label {
	color : #0b2558;	
	font-weight : bold;
}

.page_personnalisation .bloc_affichage .bloc_configurateur input[type="text"] {
	width : 95%;
	margin : auto;
}

.page_personnalisation .bloc_affichage .bloc_btnvisualiser {
	display : inline-block;
	vertical-align : bottom;
	margin : 0 0 20px 50px;
	background : url('../images/btn-previsualiser.png') no-repeat;
	width : 147px;
	height : 40px
	}

.page_personnalisation .bloc_affichage .champs_obligatoires {
	margin-left : 140px;
	font-size : 10px;
}

.page_personnalisation .bloc_visualisation {
	width : 540px;
	display : inline-block;
	vertical-align : top;
	height : 485px;
	background : url('../images/maillot-previsu.png') no-repeat 50px -10px;
	position : relative;
}

.page_personnalisation .bloc_visualisation .btn_reinitialiser{
margin-top : 350px;
margin-left : 410px;
background : url('../images/btn-reinitialiser.png') no-repeat;
width : 121px;
height : 30px;
}

.page_personnalisation .bloc_visualisation .prenom_apercu{
	color : #FFFFFF;
	position : absolute;
	top : 75px;
	left : 165px;
	width : 230px;
	text-align:center;
	font-size : 18px;
}

.page_personnalisation .bloc_visualisation .non_contractuel{
	color : #FFFFFF;
	font-size : 10px;
	font-style: italic;
	display : block;
	width : 100%;
	text-align  : center;
	position : absolute;
	bottom : 0;
}

.page_personnalisation .btn_valider{
	width : 219px;
	height : 73px;
	margin : auto;	
}

.page_personnalisation .btn_valider button[type="submit"]{
	width : 219px;
	height : 73px;
	margin : auto;	
	background : url('../images/btn-valider.png');
	border : 0px;
}

/* page récapitualitf */

.page_recapitulatif h2{
	color : #FFFFFF;
	text-align : center;
}

.page_recapitulatif .bloc_affichage{
	padding-bottom : 20px;
	margin-bottom : 20px;
}

.page_recapitulatif .bloc_info{
		height : 310px;
		background : url('../images/maillot_bg_recap.png') #FFFFFF no-repeat;
		width : 80%;
		margin : auto;
		position : relative;
}

.page_recapitulatif .bloc_prenom{
	position : absolute;
	top : 50px;
	left : 66px;
	width : 120px;
	color : #FFFFFF;
	text-align : center;
}

.page_recapitulatif .bloc_recap{
	margin-top : 192px;
	margin-left : 250px;
	color : #0b2558;
}

.page_recapitulatif #je_personalise{
	width : 215px;
	height : 71px;
	display : block;
	margin:auto;
}

/*page commande*/

.page_commande .info_form{
	margin : auto;	
	color : #c89e5a;
	width : 375px;
	text-align:center;
	padding-bottom : 20px;
}

.page_commande .bloc_affichage{
	width : 375px;
	margin:auto;
	padding : 30px 10px;
	border-radius : 30px;
}

.page_commande .bloc_affichage input{
	width : 95%;
	margin : 10px auto;
	text-align:center;
}

.page_commande  button[type="submit"]{
	width : 215px;
	height : 68px;
	display : block;
	background : url('../images/btn-jevalide-2.png') no-repeat ;	
	border : 0px;
	margin : 20px auto;
}

/*page confirmation commande*/
.page_livraison_confirmation .bloc_info{
	width : 385px;
	margin:auto;
	padding : 30px 10px;
	color : #0b2558;
}

.page_livraison_confirmation .bloc_info button{
	background : url('../images/btn-ouicestparti-2-pc.png') no-repeat;
	width : 147px;
	height : 40px;
	display : block;
	margin:auto;
}

/*Mentions*/
.page_mentions .bloc_info{
	width : 585px;
	padding : 10px;	
	margin : auto;
	color : #0b2558;
}

.page_mentions .bloc_info .mentions{
	overflow : auto;
	text-align : center;
	height : 370px;	
}

.page_mentions .bloc_info h2{
	color : #616161;
	font-family : coolvetica;
	text-align:center;
}






/** 1024 **/


/*1024 landscape*/

@media (max-width: 1024px) {
	body{
		width : 1024px;
	}
	
	#header{
		height : 140px;
	}	
	
	#header .logo{
		background : url('../images/1024/logo.png') no-repeat;
		height : 73px;
		width : 294px;		
	}

	#header .navbar{
		background : url('../images/1024/bandeau_menu.png') no-repeat right;
		height : 54px;
	}

	#header .navbar_full{
		background : #273e6c;
		height : 45px;
		font-size : 12pt;
		margin-top : 10px
	}

	#header .navbar_full a{
		margin-top : 13px;
		margin-right : 50px;
	}	
	
	.navbar .navbar_gauche{
		display:inline-block;
		width : 736px;
	}

	.navbar .navbar_droite{
		padding-top : 7px;
	}

	.navbar .navbar_droite a{
		margin-left : 101px;
		font-size : 12pt;
	}

	ul.topbar{
		font-size: 12pt;
	}

	.topbar > li:first-child{
		margin-left: 235px;
	}	
		
	.page_accueil{   
	   background : url('../images/1024/bg_accueil.png') no-repeat #0b2558 bottom !important;	   
	   height : 585px;
	} 
	
	.page_accueil #illustration_maillot{
		background :  url('../images/1024/illustration_maillot.png');
		width : 432px;
		height : 359px;
	}
	
	.page_accueil #btn_je_minscris{
		left : 743px;
		top : 608px;
		background : url('../images/1024/btn_je_minscris.png') no-repeat;
		width : 222px;
		height : 64px;
	}	
	
	/* Page personnalisation */
	.page_personnalisation .bloc_affichage{
		width : 532px;
		display : inline-block;
		padding : 10px;
		margin-left : 45px;
		margin-right : 20px;
	}	
	
	.page_personnalisation .bloc_affichage .bloc_btnvisualiser {
		width : 117px;
		height : 32px;
		background : url('../images/1024/btn-previsualiser.png') no-repeat;		
		margin-left : 20px
	}
	
	.page_personnalisation .bloc_affichage .champs_obligatoires {
		margin-left : 0;
		font-size : 10px;
		width : 100%;
		text-align:center;
	}	
	
	.page_personnalisation .bloc_visualisation {
		width : 377px;
		height : 409px;
		background : url('../images/1024/maillot-previsu.png') no-repeat ;
		background-size : 352px;
		margin-top : 15px;
	}
	
	.page_personnalisation .bloc_affichage .bloc_configurateur{
		width : 300px;
	}
												 
	.page_personnalisation .bloc_affichage .bloc_configurateur .radio{
		margin-right : 25px;		
	}

	.page_personnalisation .bloc_visualisation .btn_reinitialiser{
	margin-top : 272px;
	margin-left : 270px;
	background : url('../images/1024/btn-reinitialiser.png') no-repeat;
	width : 97px;
	height : 24px;
	}	
	
	.page_personnalisation .bloc_visualisation .prenom_apercu{
		top : 60px;
		left : 80px;
		width : 195px;
	}

	
}

/*768*/

@media (max-width: 768px) {
	
	body{
		width : 768px;
	}
	
	#header{
		height : 140px;
	}	
	

	#header .logo{
		background : url('../images/768/logo.png') no-repeat;
		height : 73px;
		width : 294px;		
	}

	#header .navbar{
		background : url('../images/768/bandeau_menu.png') no-repeat right;
		height : 55px;
	}

	#header .navbar_full{
		background : #273e6c;
		height : 45px;
		font-size : 10pt;
		margin-top : 10px
	}

	#header .navbar_full a{
		margin-top : 13px;
		margin-right : 50px;
	}	
	
	.navbar .navbar_gauche{
		display:inline-block;
		width : 595px;
	}

	.navbar .navbar_droite{
		padding-top : 7px;
	}

	.navbar .navbar_droite a{
		margin-left : 54px;
		font-size : 10pt;
	}

	ul.topbar{
		font-size: 10pt;
	}

	.topbar > li:first-child{
		margin-left: 134px;
	}	
	
	.page_accueil{   
	   background : url('../images/768/bg_accueil.png') no-repeat #0b2558 bottom !important;	   
	   height : 585px;
	} 
	
	.page_accueil #illustration_maillot{
		background :  url('../images/768/illustration_maillot.png');
		width : 360px;
		height : 325px;
	}
	
	.page_accueil #btn_je_minscris{
		left : 535px;
		top : 626px;
		background : url('../images/768/btn_je_minscris.png') no-repeat;
		width : 222px;
		height : 64px;
	}	
	

	
	/* Page personnalisation */
	.page_personnalisation .bloc_affichage{
		width : 355px;
		display : inline-block;
		padding : 10px;
		margin-left : 25px;
		margin-right : 0px;
		margin-top : 37px;
		
	}	
	
	.page_personnalisation .bloc_affichage .bloc_btnvisualiser {
		width : 117px;
		height : 32px;
		display : block;
		vertical-align : bottom;
		margin : 10px auto;		
		background : url('../images/768/btn-previsualiser.png') no-repeat;	
	}
	
	.page_personnalisation .bloc_affichage .bloc_configurateur{
		width : 95%;
		margin : auto;
		display : block;
	}
	
	.page_personnalisation .bloc_affichage .bloc_configurateur .radio{
		margin-right : 20px;
		
	}

	.page_personnalisation .bloc_affichage .bloc_configurateur input[type="text"] {
		width : 95%;
		margin : auto;
	}	

	
	.page_personnalisation .bloc_visualisation {
		width : 368px;
		height : 403px;
		background : url('../images/768/maillot-previsu.png') no-repeat;
	}
	
	.page_personnalisation .bloc_visualisation .btn_reinitialiser{
		margin-top : 272px;
		margin-left : 290px;
		background : url('../images/768/btn-reinitialiser.png') no-repeat;
		width : 97px;
		height : 24px;
	}	
	
	.page_personnalisation .bloc_visualisation .prenom_apercu{
		top : 60px;
		left : 90px;
		width : 195px;
	}	
	
	.page_inscription .lbl_illustration {
		width : 130px;
	}	
	
}

/*480*/

@media (max-width: 480px) {
	
	body{
		width : 480px;
	}
	
	.bloc_affichage{
		width : 95%;
	}
	
	#header{
		height : 170px;
	}

	#footer {
		text-align : right;
	}
	
	#footer a{
		margin-right : 25px;
	}	
	
	#header .logo{
		background : url('../images/768/logo.png') no-repeat;
		height : 73px;
		width : 294px;		
	}

	#header .navbar{
		background : none;
		margin-top : 0px;
	}

	#header .navbar_full{
		background : #273e6c;
		height : 45px;
		font-size : 10pt;
		margin-top : 10px
	}

	#header .navbar_full a{
		margin-top : 13px;
		margin-right : 50px;
	}	
	
	.navbar .navbar_gauche{
		width : 100%;
		margin-top : 30px;
		background : #0b2558;
	}

	.navbar .navbar_droite{
		position : absolute;
		top : 0;
		right : 15px;
	}

	.navbar .navbar_droite a{
		margin-left : 54px;
		font-size : 8pt;
		color :#000000;
	}

	ul.topbar{
		font-size: 10pt;
		text-align : center;
	}



	.topbar > li:first-child{
		margin-left: 10px;
	}	
	
	.page_accueil{   
	   background : url('../images/480/bg_accueil.png') no-repeat #0b2558 bottom !important;	   
	   height : 585px;
	} 
	
	.page_accueil #illustration_maillot{
		background :  url('../images/480/illustration_maillot.png');
		width : 355px;
		height : 317px;
		left : 0px;
	}
	
	.page_accueil #btn_je_minscris{
		left : 271px;
		top : 688px;
		background : url('../images/480/btn_je_minscris.png') no-repeat;
		width : 200px;
		height : 59px;
	}	
	
/*page detail*/

.page_detail .bloc_affichage{
	width : 98%;
	height : 350px;
	background : url('../images/bg_bloc_detail.png') no-repeat #0b2558 33px 90px;
	background-size: 452px;	
	margin-top : 0;
	padding-bottom : 20px;
}



.page_detail .bloc_affichage .bloc_info{
	width : 294px;
	margin:auto;
	margin-top : 25px;
	margin-left : 47px;

}


.page_detail .bloc_affichage .bloc_info p{
		padding-top : 15px;
		font-size : 10px;
		text-align : center;
		line-height :15px;
}

.page_detail .bloc_affichage .bloc_info #logo_parions_sport{
		width : 157px;
		height : 39px;
		margin : auto;
		display : block;
		margin-top : 16px;
		margin-bottom : 3px;
}

.page_detail .bloc_affichage #fleche_bleue{
	position : absolute;
	left : 174px;
	top : 210px;
	width : 70px;
}

.page_detail .bloc_affichage #je_personalise{
	position : absolute;
	left : 240px;
	top : 260px;
	width : 220px
}


/*Felicitations*/


	
	/* Page personnalisation */
	.page_personnalisation .bloc_affichage{
		width : 355px;
		display : block;
		padding : 10px;
		margin : 10px auto;
	}	
	
	.page_personnalisation .bloc_affichage .bloc_btnvisualiser {
		width : 117px;
		height : 32px;
		display : block;
		vertical-align : bottom;
		margin : 10px auto;		
		background : url('../images/768/btn-previsualiser.png') no-repeat;	
	}
	
	.page_personnalisation .bloc_affichage .bloc_configurateur{
		width : 95%;
		margin : auto;
		display : block;
	}
	
	.page_personnalisation .bloc_affichage .bloc_configurateur .radio{
		margin-right : 20px;
		
	}

	.page_personnalisation .bloc_affichage .bloc_configurateur input[type="text"] {
		width : 95%;
		margin : auto;
	}	

	
	.page_personnalisation .bloc_visualisation {
		width : 368px;
		margin : auto;
		display : block;
		background : url('../images/480/maillot-previsu.png') no-repeat;
	}
	
	.page_personnalisation .bloc_visualisation .non_contractuel{
		color : #FFFFFF;
		font-size : 10px;
		font-style: italic;
		margin-top : 50px;
		display : block;
		width : 100%;
		text-align  : center;
	}
	
	
	.page_personnalisation .bloc_visualisation .btn_reinitialiser{
		margin-top : 50px;
		position : absolute;
		bottom : 20px;
	}	
	
	.page_personnalisation .bloc_visualisation .prenom_apercu{
		top : 60px;
		left : 90px;
		width : 195px;
	}	
	
	
	.page_recapitulatif .bloc_info{
		height : 210px;
		background-size : 180px;
		width : 90%;
		margin : auto;
	}

	.page_recapitulatif .bloc_recap{
		margin-top : 100px;
		margin-left : 210px;
		color : #0b2558;
	}
	
	.page_recapitulatif .bloc_prenom{
		top : 36px;
		left : 36px;
	}	
	
	/*Mentions*/
	.page_mentions .bloc_info{
		width : 95%;
		padding : 10px;	
		margin : auto;
	}	
	
}

