*{
    margin :0;
    padding:0;
    overflow:hidden;
}

body 
{
    position:absolute;
    width:100%;
    height:100%;
    background-color:black;
    color:white;
	top:0;
	left:0;
	font:menu;
}

#scoreBar
{
   padding:2px 0 2px 0;
   border-bottom:2px solid #2a2a2a;  
   width:100%;
}
 
#scoreBar>span
{
    display:block;
    padding-top:2px;
    height:100%;
    margin-left:2%; 
    float:left;
} 
 
div[id$="Page"]
{
   position:absolute;
   top:10%;
   height:86%;
   text-align:justify;
   overflow:hidden;
}  

#questionairePage,#scorePage
{
    display:none;
    width:100%;
}

h1
{
    color:#ffbf12;
    text-align:center;
}

h2
{
    position:absolute;
    top:0%;
    width:100%;
    height:15%;
    color:white;
    text-align:center;
}

#startbutton,#tryagain
{
    position:absolute;
    top:80%;
    left:16.5%;
    width:70%;
    border:none;
    color:#ffbf12;
    font-weight:bold;
    background: url(../images/but_start.png) 0 0 no-repeat;
}
	 
#alternatives li 
{
    font-size: 2em;
    background: url(../images/but_option_bg.png) 0 0 no-repeat;
    width:460px;
    height:62px;
    list-style-type:none;
}

#alternatives li>span
{
    width:100%;
	text-align:center;
	display:block;
}

#alternatives li>p[id^='altIndex']
{
	 float:left;
	 width:13.5%;
	 height:95%;
	 margin: -9.5% 0 0 2%;
	 background:transparent;
}

#alternatives>li>p[id = 'altIndex1']
{
    background: url(../images/1small.png) 0 0 no-repeat;
	-o-background-size: 100% 100%; 
} 

#alternatives>li>p[id = 'altIndex2']
{
    background: url(../images/2small.png) 0 0 no-repeat;
	-o-background-size: 100% 100%;
} 

#alternatives>li>p[id = 'altIndex3']
{
    background: url(../images/3small.png) 0 0 no-repeat;
	-o-background-size: 100% 100%;
} 

#alternatives>li>p[id = 'altIndex4']
{
    background: url(../images/4small.png) 0 0 no-repeat;
	-o-background-size: 100% 100%;
} 

#alternatives li[selected='true']
{
    background-position: 0 98%;
}

#alternatives li[rightalternative='true']
{
   background: url(../images/but_green.png) 0 0 no-repeat;
}

#alternatives li[wrong='true']
{
   background: url(../images/but_red.png) 0 0 no-repeat;
}

#alternatives li:hover
{
    background: url(../images/but_option_bg.png) 0 98% no-repeat;
}

#alternatives li[wrong='true']:hover
{
    background: url(../images/but_red.png) 0 0 no-repeat;
}

#alternatives li[rightalternative='true']:hover
{
    background: url(../images/but_green.png) 0 0 no-repeat;
}

#timeLine
{
    position:absolute;
    top:95%;
}

#scorePage>p
{
    position:absolute;
    top: 4%;
    text-align:center;
}   

#scoreBoard
{
    position:absolute;
    top:33%;
    width:95%;
    height:50%;  
}

#scoreBoard li
{
    margin:1% 0  0 5%;
    width:98%;
    list-style-type:none;
	display:block;
	border-bottom: 1px solid #111;
}

#newPlayer
{
	color:#ffbf12;
}

#scoreBoard li>span
{
   float:left;
   width:5%;
   height:100%;
}

#scoreBoard li>p
{
   background-color:transparent;
   margin:0 0 0 1%;
   padding:0; 
   float:left;
   display:inline;
   height:100%;
}

#scoreBoard li>p:last-child
{
   overflow:hidden;
   white-space:nowrap;
   -o-text-overflow : ellipsis;
   width:55%;
   height:100%;
}
  
  
#scoreBoard li>p:first-child
{
    background-color:transparent;
    float:right;
    text-align:right; 
    padding:0;
    margin-right:5%; 
	height:100%;
}

#playerName
{
    outline: white solid 1px;
	float:left;
	font-size:1.2em;
	font-weight:bold;
	background:black;
	color:#ffbf12;
	width:55%;
	height:90%;
	margin:-0.7% 0 0 1%;
	padding: 0 0 -1% 0;
}

#lives {
    margin-right: 1%;  
}
#lives li {
    margin-right: 1%;
    display: inline-block;
    width: 24px;
    height: 24px;
    list-style: none;
    background: transparent url('../images/life.png') no-repeat;
    float: right;
}
.life_active {
    background: transparent url('../images/life_active.png') no-repeat !important;
}
.life_grey {
    background: transparent url('../images/life_grey.png') no-repeat !important;
}