html, body {
	margin: 0;
	padding: 0;
 /* background-image:url(greybg.png);*/
	  font-family: Arial, Helvetica, sans-serif;
	    }

#navContent{
margin:auto;	
width:1000px;
height:700px;
position:relative;
overflow:hidden;
}

#game1{
margin:auto;
width:1000px;
height:700px;
right:0px;
position:absolute;
}

#game2{
margin:auto;	
width:1000px;
height:700px;
right:-1000px;
position:absolute;
} 


input {
    border  : none;
	border-bottom: 3px solid black; 
    padding : 0 10px;
    margin  : 0;
    width   : 500px;  
    background: rgba(255,255,255,0.5);
    /*margin: 0 0 10px 0;*/
	font-size:25px;
	color:#00F;
}
 
.questionText{
font-size:27px;
color:#000;

}

.respText{
font-size:24px;
color:#F00;
margin-left:100px;
margin-right:150px;
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 10px;

}


.final{
font-size:20px;
color:#000;

}

.pix{
width:250px;
height:350px;
margin:15px;
float:left;

}


.option{
width:400px;
height:30px;
margin-left:50px;
margin-bottom:15px;

   border-top: 1px solid #96d1f8;
   background: #6fa8d4;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e619c), to(#6fa8d4));
   background: -webkit-linear-gradient(top, #3e619c, #6fa8d4);
   background: -moz-linear-gradient(top, #3e619c, #6fa8d4);
   background: -ms-linear-gradient(top, #3e619c, #6fa8d4);
   background: -o-linear-gradient(top, #3e619c, #6fa8d4);
   padding: 7.5px 15px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #e3d7e3;
   font-size: 22px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
}

.option:hover{
   border-top-color: #462878;
   background: #462878;
   color: #e8eb86;
}		

.option:active {
   border-top-color: #5c1b30;
   background: #5c1b30;
   }

img {
    max-width: 100%;
    max-height: 100%;
	border: 10px ridge #009;
}

.option1{
width:400px;
height:30px;
margin-left:200px;
margin-bottom:15px;

   border-top: 1px solid #96d1f8;
   background: #006;
   background: -webkit-gradient(linear, left top, left bottom, from(#03C), to(#006));
   background: -webkit-linear-gradient(top, #03C, #006);
   background: -moz-linear-gradient(top, #03C, #006);
   background: -ms-linear-gradient(top, #03C, #006);
   background: -o-linear-gradient(top, #03C, #006);
   padding: 7.5px 15px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #e3d7e3;
   font-size: 22px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
}

.option1:hover{
   border-top-color: #933;
   background: #933;
   color: #e8eb86;
}	
 

#topbar{
height:50px;
margin:auto;
margin-top:50px;
color:#F00;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
width:1000px;
border-bottom:solid black 1px;
text-shadow: 0px 1px 1px #999, 0px 3px 3px #777, 0px 5px 5px #555, 0px 7px 7px #333;
/*text-shadow: 0px 1px 1px #999, 0px 2px 2px #888, 0px 3px 3px #777, 0px 4px 4px #666, 0px 5px 5px #555, 0px 6px 6px #444, 0px 7px 7px #333, 0px 8px 8px #001135;*/
}
 
.spacer{
height:30px;
}

 




.feedback1{
width:500px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:200px;
margin-left:150px;
border:groove black 3px;
}

.feedback2{
width:500px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:absolute;
bottom:200px;
margin-left:150px;
border:groove black 3px;
}
 
 
/*@media screen and (max-width:800px) {
	#topbar{margin-left:1%;margin-right:1%;	width:98%;}
	#navContent{margin:1%;	width:98%;}
	#game1{margin:1%;	width:98%;}
	#game2{margin:1%;	width:98%;}


}
@media screen and (max-width:400px) {
	.pix{margin:1px;margin-top:10px;}


}*/

.edate {
  background-color:#CCC;
  color:#603;
  float:right;
  margin-left:10px;
  padding:45px 5px 0;
  position:relative;
}
.edate .eday {
  font-size:45px;
  left:5px;
  line-height:45px;
  position:absolute;
  top:0;
}
.edate .emonth {
  font-size:25px;
  text-transform:uppercase;
}
.edate .eyear {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  position:absolute;
  right:-5px;
  top:15px;
  font-size:10px;
}
.edate .ehour {
  display:block;
  position:relative;
  right:-10px;
  font-size:15px;
  color:#000;
  /*left:5px;
  line-height:45px;
  position:absolute;
  top:0;*/
}

.resultado{
	font-size:12px;
	color:#000;
	display:table-cell;
}
.resultado .mal{
	color:#F00;
	font-size:14px;
}
.resultado .bien{
	color:#0F0;
	font-size:14px;
}
.resultado .preg{
	font-size:12px;
	color:#00F;
}
.resultado .your{
	font-size:12px;
	color:#360;
}
.resultado .good{
	font-size:12px;
	color:#600;
}
.resultado .feed{
	color:#000;
	font-size:12px;
	background-color:#FF0;
}
.result{
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
	border:solid black 1px;
	padding:5px;
}

hr {
    border: 0;
    height: 5px;
    background: #63C;
    background-image: -webkit-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -moz-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -ms-linear-gradient(left, #C9F, #63C, #C9F);
    background-image: -o-linear-gradient(left, #C9F, #63C, #C9F);
}