/* @import url(http://fonts.googleapis.com/css?family=Satisfy|Pathway+Gothic+One);  */
/* Defaults */
html, body, #quizzie {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

img { max-width: 100%; }

body {
  background : #F8F8FF;
  color: #fff;
}

h1 {
  font-family: 'Lucida', 'Verdana';
  font-size: 1.2em;
}

h2, p {
  font-family: 'Lucida', 'Verdana';
  font-size: 1.2em;
}

h1, h2, p {
  text-align: left;
  display: block;
  width: auto;
  margin: 1%;
}

#quizzie {
  padding: 5% 0;
  /* Individual Steps/Sections */
  /* Content */
}
#quizzie ul {
  list-style: none;
  display: block;
  width: auto;
  margin: 2% 2%;
  padding: 2%;
  overflow: auto;
  display: none;
  /* Step Questions and Answer Options */
}
#quizzie ul.current {
  display: block;
}
  /* aligement des reponses */

/*#quizzie ul li {
  display: inline-block;
  float: left;
  width: 49%;
  margin-right: 2%;
  overflow: auto;
  text-align: center;
}*/


#quizzie ul li.quiz-answer {
  cursor: pointer;
}
#quizzie ul li.question, #quizzie ul li.results-inner {
  display: block;
  float: none;
  width: 100%;
  text-align: left;
  margin: 0;
  margin-bottom: 2%;
}
#quizzie ul li.results-inner {
  padding: 5% 2%;
}

/*
#quizzie ul li.results-inner img {
  width: 250px;
}*/


#quizzie ul li:last-child {
  margin-right: 0;
}
#quizzie .question-wrap, #quizzie .answer-wrap {
  display: block;
  padding: 1%;
  margin: 1em 0%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#quizzie .answer-wrap {
  background: Turquoise;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

/*
#quizzie .answer-wrap:hover {
  background: DarkTurquoise;
}*/






a {
text-decoration: none;
}
a:link, a:visited {
	color: #CF5C3F;
}
a:hover, a:active {
	
	color:#FFF;
}
.body {
margin: 0 auto;
width: 80%;
clear: both;
}
.mainHeader img {
width: 100%;
height:auto;
margin: 2% 0;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color:#FFF;
display:inline-block;
padding: 10px 25px;
height:20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow:none;
}

.mainHeader nav ul li a {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width:70%;
float: left
}

.topcontent {
background-color:#677c8a;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top:2%;
}

.bottomcontent {
	background-color:#FFF;
	border-radius: 4px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top:2%;
}
.post-info{
	font-style: italic;
	color:#999;
	font-size: 90%;

}

.top-sidebar {
	width: 25%;
	float:left;
	background-color:#FFF;
	border-radius: 4px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	margin:2% 0 2% 3%;
	padding: 2% 3%;
}

.middle-sidebar {
width: 25%;
float:left;
background-color:#677c8a;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
margin-left:3%;
margin-bottom:2%;
padding: 2% 3%;
}

.bottom-sidebar {
width: 25%;
float:right;
background-color:#677c8a;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
margin-left:3%;
margin-bottom:2%;
padding: 2% 3%;
}

.mainFooter {
	width: 100%;
	float:left;
	background-color:#BBACAC;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	border-radius: 4px;
	margin-top:2%;
	margin-bottom:2%;
}

.mainFooter p{
	width: 94%;
	margin:10px auto;
	color:#FFF;
}


.facebookcontent {
	background-color:#FFF;
	border-radius: 4px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top:2%;
}

.post-info{
	font-style: italic;
	color:#999;
	font-size: 90%;

}

button{

     font-size: 25px;
	 padding-top: 1px;
	 font-family:Arial, Helvetica, sans-serif;
     width: 200px;
     height: 43px;
     text-align: center;
     color: #FFFFFF;
     background: #444;
     background: linear-gradient( #555, #2C2C2C);
	 border-radius: 8px;
	 text-shadow: 0px 1px 0px white;
	 text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	 box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
                 0 -1px 0 rgba( 255, 255, 255, 0.4);
	}
	
	button:hover{
     color: #222;
     background: #555;
     background: linear-gradient( #777, #333);
}

	button:active{
     color: #000;
     background: #444;
     background: linear-gradient( #555, #2C2C2C);
     box-shadow: 1px 1px 10px black inset, 
                 0 1px 0 rgba( 255, 255, 255, 0.4);
}


@media only screen and (min-width: 150px) and (max-width:800px)
{
.body {
	width: 90%;
	font-size: 95%;
}
	.mainHeader img{
	width: 100%;
}

	.mainHeader nav {
	height: 160px;
}
	.mainHeader nav ul{
	padding-left:0
}
	.mainHeader nav ul li {
	width: 100%;
	text-align: center;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 10px 25px;
height:20px;
display:block;
}

.content {
width:100%;
float: left;
margin-top:2%;
}

.post-info {
	display:none;
}

.topcontent {
	
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top:2%;
	margin-bottom:4%;
}

.bottomcontent {
margin-top:4%;
}

.top-sidebar, .middle-sidebar, .bottom-sidebar{
	width: 100%;
	margin:2% 0 2% 0;
	padding: 2% 3%;
}

.mainFooter {
margin-top:4%;
width: 100%;
	margin:2% 0 2% 0;
	padding: 2% 3%;

}

}