﻿
#outer_div {
	height:auto;
	background-color: #35586C; /* ; #3c4a61 */
	min-width:800px;
	/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c4a61', endColorstr='#35586C');  for IE */
	 /* background: -webkit-gradient(linear, left top, left bottom, from(#3c4a61), to(#35586C));  for webkit browsers */
	 /* background: -moz-linear-gradient(top,  #3c4a61, #35586C);  for firefox 3.6+ */ 
	background-image: url('images/backgrounds/new_background_2.jpg');
	/* background-repeat:no-repeat; */
	/* background-size:100% 100%; */

	padding-top:2%;
	
}

#right_gutter {
	float:right;
	width:auto;
	height:auto;
	padding:5px;
}

#left_gutter {
	float:left;
	width:auto;
	height:auto;
	padding:5px;
}

.stretch_r {
	width:20%;
	position:absolute;
	right:.8%;
	margin-top:40%;
	margin-right:2%;
}

.stretch_l {
	width:20%;
	position:absolute;
	left:.8%;
	margin-top:40%;
	margin-left:2%;

}

#whole_thing {
	min-width:800px;
	width:800px;
	height:auto;
	margin:auto;
	/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#4A4344');  for IE #C9C9C9*/
	/* background: -webkit-gradient(linear, left top, left bottom, from(#969696), to(#4A4344));  for webkit browsers */
	/* background: -moz-linear-gradient(top,  #969696,  #4A4344);  for firefox 3.6+ */ 
	background-image: url('images/backgrounds/Background-Blue-Green-700W.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	padding:15px;
	border:groove thick white;
	-moz-border-radius: 1em 0em;
	border-radius:1em 1em 1em 1em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	position:relative;

}

#whole_thing hr {
	background:#b3c6e3;
	color:#b3c6e3;

}


#header {
	background-image:url('images/1st_header.jpg');
	margin-right:auto;
	margin-left:auto;
	height:200px;
	width:700px;
	margin-top:15px;
	-moz-border-radius: 1em 0em;
	border-radius:1em 1em 1em 1em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:7px 7px 5px rgba(0,0,0,.3); 
	position:relative;
}

#nav_div
{
	margin-right:auto;
	margin-left:11%;
	margin-bottom:10%;
	margin-top:3%;
	width:83%;
	display:table;
}

.nav_bar {
	width:100%;
	padding:.2%;
	margin-top:2%;
	margin-left:auto;
	margin-right:auto;
}


.nav_bar_li, .nav_bar_li_sign_up {
	margin-top: 20px;
	margin-left:3%;
	padding:1%;
	display:inline;
	border:thin solid #b3c6e3;
	-moz-border-radius: .5em 0em;
	border-radius:.5em .5em .5em .5em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	/* background:#4A4344; */
	background-image:url('images/brushed_aluminum_6.jpg');
	cursor:pointer;
	width:100%;

}

.nav_bar_li_sign_up
{
	padding:8px;
	/* margin-left:12%; */
}

.nav_bar li:hover {
	background-image:url('images/brushed_aluminum_5.jpg');
	color:black;
	cursor:pointer;
}

.nav_bar li a {
	color:white;
	text-decoration:none;
	font-size:105%;
}

#news {
	float:left;
	height:50%;
	width:50%;
	margin-left:35px;
	margin-top:30px;
	border:medium solid #b3c6e3;
	-moz-border-radius: .5em 0em;
	border-radius:.5em .5em .5em .5em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	padding:2%

}

#news h1, #looking h1, #coming_soon h1, #not_looking h1  {
	text-align:center;
	font-size:150%;
	color:white;
	margin:1%;
}

#news hr, #looking hr, #coming_soon hr, #not_looking hr {
	background-color:#b3c6e3;;
	color:#b3c6e3;
	height:5px;
	border:none;
	width:107%;
	margin-left:-12px;

}


#news li {
	margin-left:2px;
}

#coming_soon  {
	float:right;
	height:50%;
	width:33%;
	margin-right:35px;
	margin-top:30px;
	border:medium solid #b3c6e3;
	-moz-border-radius: .5em 0em;
	border-radius:.5em .5em .5em .5em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	padding:2%


}

#news, #coming_soon, #not_looking h1 {
	text-align:center;
	font-size:125%;
	color:white;
	width:40%;
	height:315px;

}

#footer {
	height:100px;
	width:auto;
	margin-top:15%;
	clear:both;
}

#footer hr {
	color:#b3c6e3;
	background-color:#b3c6e3;
	height:3px;
	border:none;
	clear:both;
}

#play_now_block
{
	margin-top:-7%;
}

/* I should be good and put this into a different file, since this is for name-input */

#enter_name {
	height:50%;
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	border:medium solid #b3c6e3;
	-moz-border-radius: .5em 0em;
	border-radius:.5em .5em .5em .5em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	padding:5px;
	text-align:center;
	background-color:#333;
	color:white;

}

#content_block, .content_block_class  {
/* for pages w/ only 1 box */
	height:auto;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	border:7px outset honeydew;
	-moz-border-radius: .5em 0em;
	border-radius:.5em .5em .5em .5em;
	-webkit-box-shadow:- 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2); 
	padding:4%;
	color:white;
	background:#333;
	text-align: center;
	background-image:url('images/backgrounds/content_background.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:1;
	position:relative;
	opacity:.95;
	webkit-opacity:.95;
	moz-opacity:.95:

}


#how_play {
	text-align:center;
}

.img_container {
	width:auto;
}

.body_img {
	width:100%;
}

#nav-bar li {
	width:10%;
}

.invis {
	visibility: hidden;
}

a:visited
{
	color:#b0c0ff;
}

a:link
{
	color:green;
}

.sign_up
{

	margin-top:3%;
	width:17%;

}

.align_center
{
	text-align:center;
}

.createacard
{
	margin-left:38.5%;
}

#sign_up_div, #createacard_div
{
	width:100%;
	position:relative;
	display:table;
}

.button_style
{
	border:thin solid #b3c6e3;
	background-image:url('images/brushed_aluminum_6.jpg');
	cursor:pointer;
	border-radius:.5em .5em .5em .5em;
	moz-border-radius:.5em .5em;
	color:white;
	border:3px outset;
	padding:7px;
	font-weight:bold;
}

.button_style:hover{
	background-image:url('images/brushed_aluminum_5.jpg');
	color:black;
	border:medium outset black;

}
