/*Colors:
Outbreak Undead Colors
SPEW Assessment Inventory

#897976/rgb(137, 121, 118) brown //not used
#858662/rgb(133, 134, 98) yellow-brown //not used
#E1CE8A/rgb(225, 206, 138) golden //not used
#b7b7b7/ med grey // used on h1
#2c2c2c/rgb(44,44,44) dark grey //not used
#e1e1e1/rgb(225,225,225)light grey //used on li background and footer text color
#e9e9e9/rgb(233,233,233) lightest grey //
#566798/rgb(86,103,152) blue //used on footer background
#4879C0 blue //used on li:hover and active
*/

/*
==============================================
Global Styles (Mobile First)
==============================================
*/

/* apply a natural box layout model to all elements by Paul Irish*/
*, *:before, *:after {
  	-moz-box-sizing: border-box; 
  	-webkit-box-sizing: border-box; 
  	box-sizing: border-box;
 	}

/*micro-clearfix by Nicolas Gallagher*/
/* For modern browsers */
.cf:before, .cf:after {
	content:"";
	display:table;
 	}
 		
.cf:after {
	clear:both;
}

.cf {
	zoom:1;
}

body{
	font-size: 100%;
	font-family:Verdana;
	text-align: center;
	min-width: 300px;
	margin: 0 auto;
}

.js main{
	min-height: 500px;
}

.no-js main{
	min-height: 100px;

}
main,footer{
		max-width: 600px;
		margin: 0 auto;
}


h1{
	color: #b7b7b7;
	width: 90%;
	margin: 1em auto;
}

hr{
	width: 90%;
}

h3{
	color:#4879c0;
	width: 75%;
	margin: 0 auto 1em;
}

a.link,
a.link:visited{
	color: #000;
	text-decoration: none;
}

li{
	line-height: 1.5em;
	border: #4879C0 1px solid;
	min-height: 80px;
	padding: 1em;
	text-align: left;
	cursor: pointer;
	background: #e1e1e1; 
	border-radius: 10px;
	margin-bottom: 3px;
}

li:active,
li:hover{
	background-color: #4879C0;
	color: white;
}

ul{
list-style: none;
padding: 1px;
margin-bottom: 10px;
background-color: #fff;
width: 95%;
margin: 0 auto;
}




#ql{
	font-weight: bold;
	margin-top: 1em;
}

footer{
	font-size: 0.8em;
	font-style: italic;
	color: #e1e1e1;
	background-color:#566798;
	border-radius:10px;
	width: 90%;
	padding: 0;
	margin: 1em auto;
	text-align: left;
}

footer section{
/*	display: inline-block;*/
	vertical-align: middle;
	margin: 0 auto;
	padding: 1em;
}

footer section h4{
	text-align: center;
	color: white;
}
section#disclaimer{
	width: 90%;
}

section#copyright{
	width: 90%;
	text-align: center;
	border-top: #A1AFCE solid 1px;
}

section#copyright p{
	margin: 0;
	padding: 0;
}

section#copyright a{
	color: white;
	text-decoration: none;
}

section#copyright a:visited{
	color: white;
}
section#copyright a:hover{
	color: #A1AFCE;
	text-decoration: underline;
}

#results ul li{
	text-align: center;
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0.0;		
	}
	100% {
		opacity: 1;			
	}		
}

@keyframes fadeIn {
	0% {
		opacity: 0.0;		
	}
	100% {
		opacity: 1;	
	}	
		
}


/*
==============================================
slideIn CSS3 Animation
==============================================
*/
.slideIn{
	animation-name: slideIn;
	-webkit-animation-name: slideIn;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes slideIn {
	0% {
		-webkit-transform: translateX(100%);
	}
	95%{
		-webkit-transform: translateX(4%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}	
}

@keyframes slideIn {
	0% {
		transform: translateX(100%);
	}
	95%{
		transform: translateX(4%);
	}
	100% {
		transform: translateX(0%);
	}	
}

/*
==============================================
Media Queries
==============================================
*/
@media only screen and (min-width: 500px){
hr{
	width: 80%;
}

footer{
	padding: 1em;
}

footer section{
	display: inline-block;
	vertical-align: bottom;
	margin: 0 auto;
	/*padding:1em;*/
}

footer section h4{
	text-align: left;
}

section#copyright{
	width: 50%;
	text-align: right;
	border-top: none;
	padding-right: 1em;
}

section#disclaimer{
	width: 50%;
	padding: 0 1em;
	border-right: #A1AFCE solid 1px;
	}
}