html {
	background-color: #000000;
        width: auto;
        height: auto;
}

body {
        background: url('images/background_01.png')top repeat-y scroll;
        margin: auto;
        padding: auto;
        font-family: 'Exo', Tahoma, Verdana, Arial;
        font-size: 19px;
        line-height: 26px;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#wrapper {
    height: 246px;
    width: 1400px;
    margin: auto;
}

#logo {
    background: url('images/logo.png') center transparent no-repeat;
    width: 800px;
    height: 246px;
    margin: auto;
}

#bg1 {
    background: url('images/bg1.png') center no-repeat scroll;
    width: auto;
    height: 842px;
    margin: auto;
    margin-top: -70px;
}

#bg2 {
    background: url('images/bg2.png') center no-repeat scroll;
    width: auto;
    height: 751px;
    margin: auto;
}

#bg3 {
    background: url('images/bg3.png') center no-repeat scroll;
    width: auto;
    height: 752px;
    margin: auto;
}

#bg4 {
    background: url('images/bg4.png') center no-repeat scroll;
    width: auto;
    height: 729px;
    margin: auto;
}

#bg5 {
    background: url('images/bg5.png') center no-repeat scroll;
    width: auto;
    height: 1000px;
    margin: auto;
}

#content {
    width: 1000px;
    height: auto;
    color: #f2fbff;
    margin: auto;
}

.aboutOL {
    background: url('images/aboutOL.png') top no-repeat scroll;
    width: 468px;
    height: 430px;
    margin-top: 350px;
    clear: both;
}

.classes {
    background: url('images/classes.png') top no-repeat scroll;
    width: 468px;
    height: 606px;
    margin-top: 70px;
}

.gear {
    background: url('images/gear.png') top no-repeat scroll;
    width: 1000px;
    height: 290px;
    margin-top: 422px;
    clear: both;
}

.banner {
    background: url('images/template_banner.png') top no-repeat scroll;
    width: 0px;
    height: 0px;
    margin-top: 250px;
}

.banner2 {
    background: url('images/template_banner2.png') center no-repeat scroll;
    width: 513px;
    height: 260px;
    margin: auto;
    margin-top: 450px;
}

.textContainer {
    width: 434px;
    height: 495px;
    margin: auto;
    margin-top: 70px;
}

.textContainer2 {
    vertical-align: text-top;    
    display: inline-block;
    height: auto;  
    margin: 70px 0 70px 0;
    clear: both;
}

#footer {
    font-size: 12px;
    margin: auto;
    padding-top: 35px;
    text-align: center;
    width: auto;
    height: 40px;
    color: #677276;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }

.slides,
.flex-control-nav,
.flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flexslider a img { outline: none; border: none; }

.flexslider {
	margin: 0;
	padding: 0;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
}

.flexslider .slides img {
	width: 100%;
	display: block;

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

/* Clearfix for the .slides element */
.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }



/* Theme Styles */
.flexslider {
	position: relative;
	zoom: 1;
	padding: 10px;
	background: #000;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
	box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

/* Edit it if you want */
.flex-container {
	min-width: 150px;
	max-width: 960px;
}

.flexslider .slides { zoom: 1; }



/* Direction Nav */
.flex-direction-nav a {
	display: block;
	position: absolute;
	margin: -17px 0 0 0;
	width: 35px;
	height: 35px;
	top: 50%;
	cursor: pointer;
	text-indent: -9999px;
	z-index: 9999;

	background-color: #82d344;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
	background-image: -webkit-linear-gradient(top, #82d344, #51af34);
	background-image: -moz-linear-gradient(top, #82d344, #51af34);
	background-image: -o-linear-gradient(top, #82d344, #51af34);
	background-image: linear-gradient(to bottom, #00baff, #06a6e1);
}

.flex-direction-nav a:before {
	display: block;
	position: absolute;
	content: '';
	width: 9px;
	height: 13px;
	top: 11px;
	left: 11px;
	background: url(img/arrows.png) no-repeat;
}

.flex-direction-nav a:after {
	display: block;
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	top: 35px;
}

.flex-direction-nav .flex-next {
	right: -5px;

	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}

.flex-direction-nav .flex-prev {
	left: -5px;

	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }

.flex-direction-nav .flex-next:after {
	right: 0;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #31611e;
}

.flex-direction-nav .flex-prev:after {
	left: 0;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #31611e;
}



/* Control Nav */
.flexslider .flex-control-nav {
	position: absolute;
	width: 100%;
	bottom: -40px;
	text-align: center;
	margin: 0 0 0 -10px;
}

.flex-control-nav li {
	display: inline-block;
	zoom: 1;
}

.flex-control-paging li a {
	display: block;
	cursor: pointer;
	text-indent: -9999px;
	width: 12px;
	height: 12px;
	margin: 0 3px;
	background-color: #b6b6b6 \9;

	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

	-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
	-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
	box-shadow: inset 0 0 0 2px #b6b6b6;
}

.flex-control-paging li a.flex-active {
	background-color: #82d344;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
	background-image: -webkit-linear-gradient(top, #82d344, #51af34);
	background-image: -moz-linear-gradient(top, #82d344, #51af34);
	background-image: -o-linear-gradient(top, #82d344, #51af34);
	background-image: linear-gradient(to bottom, #00baff, #06a6e1);

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* Captions */
.flexslider .slides p {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 5px;
	margin: 0;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 20px;
	color: white;

	background-color: #222222;
	background: rgba(0,0,0, .9);

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

.socialButtons {
    position: fixed;
    top: 30%;
    left: 0%;
    width: 31px;
    height: 214px;
}

.facebookButton {
    background: url('images/facebook.png') center transparent no-repeat scroll;
    width: 31px;
    height: 107px;
}

.steamButton {
    background: url('images/steam.png') center transparent no-repeat scroll;
    width: 31px;
    height: 180px;
}


.forumButton {
    background: url('images/forum.png') center transparent no-repeat scroll;
    width: 31px;
    height: 107px;
}

.registerButton {
    background: url('images/register.png') center transparent no-repeat scroll;
    width: 31px;
    height: 107px;
}

.registerMainButton {
    background: url('images/earlyAccesButton.png') top scroll transparent;
    width: 300px;
    height: 75px;
    float: right;
    margin-top: -246px; 
}

a .registerMainButton:hover {
    background-position: 0 75px;
}

.nowSteamButton {
    background: url('images/nowSteamButton.png') top scroll transparent;
    width: 250px;
    height: 75px;
    float: right;
    margin-top: -246px; 
}

a .nowSteamButton:hover {
    background-position: 0 75px;
}

.newsButton {
    background: url('images/newsButton.png') top scroll transparent; 
    width: 230px;
    height: 75px;
    float: left;
}

a .newsButton:hover {
    background-position: 0 75px;
}