@charset "utf-8";
/* CSS Document */

body,html{
	margin:0px;padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	width:100%;
	height:100%;
	
}
h1{
	font-size:22px;
	margin:0px;
	padding:0px;
	margin-top:10px;
	color:#212185;
	width:100%;
	text-align:center;
	position:absolute;
	z-index:2;
	top:0px;
	text-shadow: #999999 1px 1px 1px;
}


.fortune-container{
	height: 100%; 
	width: 100%; 
	position: relative;
	position:relative;
}
.fortune-container #fortune{
    position: absolute;
    text-align: center;
	top: 40px;
	bottom: 50px;
	left:0;
	right:0;
	display: table-cell;
    vertical-align: middle;
}
	
.fortune-container #fortune img{
	max-width:100%;
	max-height:100%;
	position:relative;
	top:0;
	bottom:0;	
}

.prompt{
	font-weight:bold;
	font-size:20px;
	margin-top:80px;	
}
.prompt-float{
	opacity:0;
	bottom: 12%;
    left: 5%;
    position: absolute;
    z-index: 6;
	pointer-events:none;
}
#clickyButton{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;left:0px;
}
.bottomRight{
	position:fixed;
	bottom:0;
	padding:5px;
	max-width:50%;
	right:0;	
	text-align:right;
}

.a2a_kit{
	float:right;
	font-size:11px;
	color:#999999;
}
.contribute{
	display: block; 
	padding: 12px; 
	color: #ffffff; 
	border-bottom: 1px solid #999;
	border-top: 1px solid #3E3E3E;
	line-height:20px;
}
.filter{
	display: block; 
	padding: 12px; 
	color: #ffffff; 
	border-bottom: 1px solid  #999;
	line-height:35px;
}
.filter label{
	font-weight:bold;
	display:block;	
	margin-bottom:5px;
}




body{overflow-x:hidden;}
.container { max-width: 100%;height:100%;margin: 0px auto;  width: 100%; }


.menu_container { width: 100%; z-index:3;position:relative; }
.anchor-link { 
	padding: 0.5em; 
	background-color: #666; 
	color: #fff; 
	float: left; 
	position:absolute;
	background-image:url(../images/menu-toggle.png);
	background-repeat:no-repeat;
	background-position:center center;
	width:40px;
	height:30px;
	overflow:hidden;
	text-indent:-200%;
}
.anchor-link:hover { background-color: #48c9b0; color: #fff; }

.nav { 
	height:100%;
	float: left;  
	border: none;
	padding: 0;  
	display: block;
	position: absolute;
	background-color:#666;
	z-index:4;
}
.nav ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center;text-align: left; font-weight: normal;}
.nav ul li { display: block;  text-align: left; }
.nav ul li a { display: block; padding: 12px; color: #ffffff; border-bottom: 1px solid #3E3E3E;  text-decoration: none;  }
.nav ul li a:hover {  background-color:#5C5C5C; }

.main_content { width: 100%;height: 100%; }

.menu_container, .anchor-link { display: block; }
  
body.active .main_content:before { content: ""; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%;	background-color: #4e4e4e; }
body.active .nav { margin-left: 0; }


/* styles dealing with the width of the side nav */
.nav { width: 200px; margin-left: -200px;}
body.active .main_content { margin-left: 200px; }
body.active .anchor-link { margin-left:200px; }


/* TRANSITIONS */
.nav,
.main_content,
.anchor-link { 
	transition: .2s margin ease;
}





@media (max-width: 590px) {
	h1{
		font-size:18px;
	}
}
@media (max-width: 515px) {
	h1{
		text-align:right;
		right:15px;
	}
}


@media (max-width: 460px) {
 	 .fortune-container #fortune{
		top: 70px;
  	}
	h1{
		font-size:20px;
		max-width:300px;
		text-align:center;
		right:0;
		left:0;
		margin-right:auto;
		margin-left:auto;
	}
}