/** Import CSS **/

@import url("reset.css"); /** Browser Resets **/
@import url("button.css"); /** CSS3 Button Styling **/
@import url("percentagebar.css"); /** CSS3 Percentage Bar Styling **/

/** Google Fonts **/

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,900italic,400italic,600,600italic,700,700italic");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:800,800italic");
@import url("http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic");

/** Global Styles **/

html
{
	height: 100%;
	overflow: auto;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
	font-family: "Source Sans Pro", Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	color: #fff;
	background: #DDD url("../images/bg.png") repeat;
}

::selection { background: #9C0; color: #FFF; }
::-moz-selection { background: #9C0; color: #FFF; }

a
{
	color: #99CC00;
	text-decoration: none;
	
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	a:hover
	{
		color: #222;
	}

/** Top Header Styles **/

.topcontainer
{
	width: 100%;
	min-width: 280px;
	background: #111 url("../images/bg-headercont.png") repeat;
	border-bottom: 5px solid #99CC00;
}

	#headercont
	{
		margin: 0 auto;
		width: 80%;
		max-width: 980px;
		padding: 34px 0;
	}
	
		#headercont #headerleft
		{
			float: left;
			width: 50%;
		}
		
			#headercont #headerleft h1 a
			{
				font-weight: 900;
				font-size: 46px;
				text-transform: uppercase;
				letter-spacing: -1px;
				color: #FFF;
			}
			
				#headercont #headerleft h1 a:hover
				{
					color: #9C0;
				}
				
			#headercont #headerleft p
			{
				color: #999;
				font-size: 15px;
				font-style: italic;
				font-weight: 600;
			}
			
		#headercont #headerright
		{
			float: left;
			width: 50%;
		}
		
			#headercont #headerright ul
			{
				float: right;
				margin: 10px 0 0 0;
			}
		
			#headercont #headerright ul li
			{
				display: inline-block;
				width: 33px;
				height: 32px;
				padding: 0 3px;
				color: #CCC;
				list-style-type: none;
			}
			
				#headercont #headerright ul li a img
				{
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
				}
			
					#headercont #headerright ul li a
					{
						opacity: 0.7;
					}
					
						#headercont #headerright ul li a:hover
						{
							opacity: 1.0;
						}

/** Main Body Styles **/

.container
{
	width: 100%;
	min-width: 280px;
	text-align: center;
}

	#maincont
	{
		margin: 0 auto;
		width: 80%;
		max-width: 980px;
		padding: 40px 0 0 0;
		line-height: 22px;
	}

		#maincont p
		{
			margin: 0 0 20px 0;
		}
		
		#maincont ul, #maincont ol
		{
			margin: 0 0 20px 0;
		}
		
			#maincont ul li, #maincont ol li
			{
				margin: 0 0 0 30px;
			}
			
				#maincont ul li
				{
					list-style-type: circle;
				}
				
				#maincont ol li
				{
					list-style-type: decimal;
				}
	
		#maincont h1, #maincont h2, #maincont h3
		{
			font-weight: 900;
			font-size: 60px;
			line-height: 54px;
			text-transform: uppercase;
			color: #fff;
			letter-spacing: -2px;
			margin: 0 0 40px 0;
			text-shadow: 1px 1px 1px #FFF;
		}
		
			#maincont h1 span
			{
				color: #99CC00;
			}
			
			#maincont h2
			{
				font-size: 40px;
				line-height: 34px;
				margin: 0 0 20px 0;
			}
			
			#maincont h3
			{
				font-size: 30px;
				line-height: 24px;
				margin: 0 0 20px 0;
				letter-spacing: -1px;
			}
		
		#maincont hr
		{
			clear: both;
			border: 0;
			height: 0;
			margin: 0 0 20px 0;
			border-top: 1px solid #CCC;
			border-bottom: 1px solid #FFF;
		}
		
		/** Countdown Timer **/

		#maincont #countdowncont
		{
			width: 100%;
			background: #111 url("../images/bg-headercont.png") repeat;
			margin: 0 0 20px 0;
			
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			
			-moz-box-shadow: inset 0 0 10px #000;
			-webkit-box-shadow: inset 0 0 10px #000;
			box-shadow: inset 0 0 10px #000;
		}

			#maincont #countdowncont ul#countdown li
			{
				float: left;
				width: 25%;
				padding: 40px 0 35px 0;
				margin: 0;
				text-shadow: 1px 1px 1px #000;
				list-style-type: none;
			}

				#maincont #countdowncont ul#countdown li span
				{
					font-size: 60px;
					font-weight: 800;
					color: #FFF;
					line-height: 50px;
					font-family: "Open Sans";
				}

			#maincont #countdowncont ul#countdown li p
			{
				color: #99CC00;
				font-weight: 600;
				text-transform: uppercase;
				font-size: 12px;
				margin: 0;
			}
			
		/** Signup Box **/
			
		#maincont .form-wrapper
		{
			background: #FFF;
			padding: 10px;
			width: 60%;
			margin: 0 auto 20px auto;
			overflow: hidden;
			
			-moz-box-shadow: 0 0 3px #AAA;
			-webkit-box-shadow: 0 0 3px #AAA;
			box-shadow: 0px 0px 3px #AAA;

			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
		}

			#maincont .form-wrapper input[type="email"]
			{
				border: none;
				float: left;
				font-weight: 400;
				font-size: 13px;
				padding: 10px 0;
				text-indent: 10px;
				outline: none;
				width: 75%;
				background: #DEDEDE;
				color: #555;
				text-shadow: 1px 1px 1px #FFF;
				
			   -moz-box-shadow: 0 1px 1px #FFF, 0 1px 0 #CCC inset;
			   -webkit-box-shadow: 0 1px 1px #FFF, 0 1px 0 #CCC inset;
			   box-shadow: 0 1px 1px #FFF, 0 1px 0 #CCC inset;

				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
			}
			
				#maincont .form-wrapper .button
				{
					width: 20%;
				}
			
		/** Latest Tweet **/
			
		#maincont #twittertweet
		{
			width: 90%;
			background: #111 url("../images/bg-headercont.png") repeat;
			margin: 0 0 20px 0;
			padding: 15px 5%;
			font-family: "Droid Serif";
			font-style: italic;
			color: #CCC;
			font-size: 13px;
			line-height: 18px;
			
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			
			-moz-box-shadow: inset 0 0 10px #000;
			-webkit-box-shadow: inset 0 0 10px #000;
			box-shadow: inset 0 0 10px #000;
		}
		
			#maincont #twittertweet ul
			{
				margin: 0;
			}
		
			#maincont #twittertweet ul.tweet_list li
			{
				padding: 4px 0;
				margin: 0;
				list-style-type: none;
			}
		
			#maincont #twittertweet a
			{
				color: #99CC00;
			}
			
				#maincont #twittertweet a:hover
				{
					color: #FFF;
				}

/** Footer Styles **/

.bottomcontainer
{
	width: 100%;
	min-width: 280px;
}

	#footercont
	{
		margin: 0 auto;
		width: 80%;
		max-width: 980px;
		padding: 0 0 30px 0;
		text-align: center;
		text-transform: uppercase;
		font-size: 13px;
		color: #888;
		text-shadow: 1px 1px 1px #FFF;
	}
	
		#footercont p
		{
			margin: 0 0 10px 0;
		}
	

/** Responsive Styles **/

@media screen and (max-width: 768px)
{

	.topcontainer
	{
		text-align: center;
	}

		#headercont #headerleft
		{
			float: none;
			width: 100%;
		}
			
		#headercont #headerright
		{
			float: none;
			width: 100%;
		}
		
			#headercont #headerright ul
			{
				float: none;
			}
		
			#maincont ul li, #maincont ul ul, #maincont ol li, #maincont ol ol
			{
				margin: 0;
			}
			
				#maincont ul li, #maincont ol li
				{
					list-style-type: none;
				}
			
		#maincont h1
		{
			font-size: 50px;
			line-height: 40px;
		}
		
		#maincont h2
		{
			font-size: 34px;
			line-height: 30px;
		}
		
		#maincont h3
		{
			font-size: 26px;
			line-height: 22px;
		}

	#maincont #countdowncont ul#countdown li
	{
		width: 50%;
	}
	
	#maincont .form-wrapper
	{
		width: 80%;
	}
	
}

@media screen and (max-width: 480px)
{

	#maincont h1
	{
		font-size: 40px;
		line-height: 36px;
	}

	#maincont #countdowncont ul#countdown li
	{
		width: 100%;
		padding: 20px 0 15px 0;
	}
	
		#maincont #countdowncont ul#countdown li span
		{
			font-size: 40px;
			line-height: 36px;
		}
		
	#maincont .form-wrapper input[type="email"]
	{
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
		text-align: center;
	}
	
	#maincont .form-wrapper
	{
		width: 90%;
	}
	
		#maincont .form-wrapper .button
		{
			width: 60%;
		}
	
}