body
	{
		/*
			Fallback for browsers that don't support pseudo elements.
		*/

		background: url(../images/bg.jpg);
	}

		body:before
		{
			content: '';
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;

			/*
				Default background is a weird gradient so I've set it to stretch to
				100% in both directions. If you replace it with a photo or something,
				set background-size to "cover".
			*/

			background: url(../images/bg.jpg);
			background-size: 100% 100%;
		}

		/*
			The pseudo element below applies a noise pattern to the background image. It's
			meant to help mask blurriness, but you can remove it if you don't like it.
		*/

		body:after
		{
			content: '';
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(../images/overlay.png);
			z-index: -1;
		}


body
{
	padding: 0;
	margin: 0;
	color: #191919;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 130%;
}

img
{
	border: 0;
}

a
{
	text-decoration: none;
	color: #FF80A8;
}

a:hover
{
	text-decoration: none;
	color: red;
}




#centrecontainer
{
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
}

#outercontainer
{
	margin-left: -400px;
	position: absolute;
	top: -236px;
	left: 50%;
}

.logo {
    cursor: pointer;
    display: block;
    height: 200px;
	 width: 400px;
    margin: -170px 0 0 400px;
    position: relative;
	 z-index: 100;

}

#header
{
	width: 800px;
	height: 30px;
	margin: -30px 0 0;
	position: absolute;
	z-index: 200;
}

#container    
{
	border: 0px Black;
	width: 800px;
	height: 400px;
	background-color: #f6f6f6;
	float: left;
	-webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.55);
	box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.55);
margin-bottom: 10px;
}

#containerleft
{
	float: right;
	width: 270px;
	height: 380px;
	background: no-repeat;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#containerleft a
{
	text-decoration: none;
	color: Green;
}

#containerleft a:hover
{
	text-decoration: none;
	color: #FF80A8;
}

#containerleft h2
{
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: 19px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	text-align: right;

}

#containerright
{
	float: left;
	width: 480px;
	height: 380px;
	overflow: auto;
	padding-left: 15px;
	color: #191919;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#containerleft h1
{
	padding-top: 10px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 22px;
	margin-top: 10px;
}

#containerright h1
{
	margin: 0;
	padding-top: 10px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 22px;
	margin-top: 10px;

}

#containerright h2
{
	margin: 0;
	padding-top: 10px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 18px;
	margin-top: 10px;


}

#footer
{
	width: 780px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	color: Black;
	margin-top: 20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
}

#footer a
{
	text-decoration: none;
	color: #191919;
}

#footer a:hover
{
	text-decoration: none;
	color: #353535;
}

#cycler{position:auto;}
#cycler img{
position:absolute;
z-index:1
}
#cycler img.active{z-index:3}