*{
	/* A universal page reset */
	margin:0;
	padding:0;
}

/*body{
	font-size:14px;
	color:#fcfcfc;
	background-color:#0d4362;
	font-family:Arial, Helvetica, sans-serif;
}
*/
/* The bouncing box */
#box{
	background:url('images/box_bg.jpg') repeat-x center top #fcfcfc;
	height:115px;
	padding:10px 20px 20px;
	margin-top:-10px;
/*	padding-top:30px; */
	width:400px;
/*	border:1px solid #fcfcfc;*/
	border: 1px solid #5aa8d7;
	color:#494848;
	text-shadow:1px 1px 0 white;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	
	top: 0px; margin-left: -221px; position: fixed; left: 50%;
}

.commentbox, #commentbox
{	
	background:url('images/box_bg.jpg') repeat-x center top #fcfcfc;
border: 3px solid #073753;
color: #aaa;
border-bottom-right-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;

width: 70%;
 text-align: center;
  float:right; 
margin-top:-30px;
 
	/*	display: none; */
		
}

#box p{
	font-size:18px;
	background:url('images/warning.png') no-repeat 10px center;
	padding-left:90px;
	padding-top: 15px;
}

#box p b{
	font-size:30px;
	display:block;
	margin-bottom:10px;
}

#box p i{
	font-size:12px;
}

#box,
#main-note,
a.button-note,
a.button-note-mini{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* Styling the big button */

a.button-note{
	color:white;
	letter-spacing:-2px;
/*	padding:20px;*/
	padding: 60px 36px 44px;
	display:block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:80px;
	font-weight:bold;
	text-align:center;
	max-width:350px;
	border:1px solid #60b4e5;
	
	margin:30px auto;
	
	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/
	
	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button-note:hover, a.button-note-mini:hover{
	text-decoration:none;
	background-color: #5eb2e2;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}


/* Styling the MINI big button */

a.button-note-mini{
	color:white;
	letter-spacing:-1px;
	/*	padding:20px;*/
	padding: 20px 20px 20px;
	display:inline-block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	max-width:175px;
	border:1px solid #60b4e5;

	margin:30px;

	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/

	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}



/* Styling the big button

copie du a.button-note
utilisé resultat.html
*/

p.button-note{
	color:white;
	letter-spacing:-2px;
	padding: 60px 36px 44px;
	display:block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	text-align:center;
	border:1px solid #60b4e5;
	margin:30px auto;
	
	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/
	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

p.button-note-nomark{
	font-size: 24px !important;
	color: white !important;
	font-weight: bolder;
	letter-spacing: 0px;
	padding: 60px 36px 44px;
	display:block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	text-align:center;
	border:1px solid #60b4e5;
	margin:30px auto;

	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/
	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}


p.button-note:hover{
	text-decoration:none;
	background-color: #5eb2e2;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}







/* Only needed for the demonstration page */

#main-note{
	background-color:#073753;
	/*height:410px;*/
	min-height:410px;
	margin:40px auto 50px;
	padding:30px 30px 0;
	position:relative;
	max-width:640px;
		font-family:Arial, Helvetica, sans-serif;
}

#main-note p{
	color:#ccc;
	font-size:19px;
	line-height:1.4;
	margin-bottom:20px;
	text-align:center;
}

a.main-note,a.main-note:visited 
{
color: #0196e3;
}

a.main-note:hover{
		text-decoration:none;
		outline:none;
		color: #005580;
}
	
#main-note p strong{
	color:white;
}

h1{
	padding:30px 0;
	text-align:center;
	text-shadow:0 1px 1px grey;
	margin-bottom:30px;
	font-size:24px;
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited {
	/*color:#0196e3;*/
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}



#comment {
padding: 4px;
font: 100% Verdana;
border: 1px solid #AAA;
display: block;
color: #777;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
margin-bottom: 6px;
width: 98%;
color: #073753;
font-style: italic;
font-variant: normal;
font-weight: normal;
font-size: 90%;
line-height: normal;
font-family: Verdana;
overflow: hidden;
height: 26px;
}





/* ecrans aux max 640px, donc petits */
@media (max-width: 481px) {


/* The bouncing box */
#box{
  padding: 1px 2px 2px;
   
}
#box p {
  padding-left: 65px;
    background: inherit;
      padding-top: 30px;
}

a.button-note{

	letter-spacing: 0px;
	padding: 50px 14px 42px;
	font-size:60px;
	
	 margin: 15px auto;
}

#main-note p {
  color: #ccc;
  font-size: 14px;
  line-height: 1.0;
  margin-bottom: 2px;
  text-align: center;
}

a.main-note {
  font-size: 14px;
}
#comment {
  width: 92%;
}
#main-note {
    height: 317px;
  }
  .commentbox, #commentbox {
  width: 98%;
  }
  
}


p.score_row  {

	padding: 18px 0px 12px;
	display:block;

	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:80px;


}

p.score  {
	color: white !important;
	letter-spacing: 1px;
	text-shadow:1px 1px 0 #145982;
	font-weight:bold;
	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

p.score_failed  {
	background-color: #ca004f !important;
	background-image: -moz-linear-gradient(#e2005e, #ca004f) !important;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2005e), to(#ca004f)) !important;
}