/*
Colors:
	text: #bfc3cf
	text-background: #111111
	text-background-lighter: #202228
	border: #444855
	
	
TODO:
	- box-shadow for IE
	- background: linear-gradient
	- fonts for IE
	- text outline for IE?
*/

/* Custom Scrollbars
---------------------------------------------------------------*/
.mumbleFrame::-webkit-scrollbar {
      width: 5px;
} /* this targets the default scrollbar (compulsory) */
.mumbleFrame::-webkit-scrollbar-track {
      background-color: #111111;
} /* the new scrollbar will have a flat appearance with the set background color */
 
.mumbleFrame::-webkit-scrollbar-thumb {
      background-color: rgba(191, 195, 207, 0.2);
} /* this will style the thumb, ignoring the track */
 
.mumbleFrame::-webkit-scrollbar-button {
      background-color: #111111;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 



/* Custom fonts 
-------------------------------------------------------------- */

@font-face {
	font-family: TF2Build;
	src:url('fonts/tf2build.eot?#iefix') format('embedded-opentype'),
		url('fonts/tf2build.ttf') format('truetype');		
}

@font-face {
	font-family: TF2Professor;
	src:url('fonts/tf2professor.eot?#iefix') format('embedded-opentype'),
		url('fonts/tf2professor.ttf') format('truetype');
}

* {
    margin: 0;
	padding: 0;
}

html, body {
    height: 100%;
	margin:0 auto;
	color:#bfc3cf;
	text-align:center;
	background-image: url("img/background2.png");
	background-repeat: repeat;
	font-family:Arial;
	font-size:14px;
}

p{
	padding: 0 5px;
	line-height:21px;
}

h1{
	font-family: TF2Build;
	border-bottom: 1px solid #444855;
	padding: 0px 5px 5px 5px;
}

h3{
	font-family: TF2Build;
	color:#FA7000;
	padding: 0 5px;
}

a{
	outline:0;
	text-decoration:none;
	color:#FA7000;
}

form {
	margin: 20px auto;
	width: 400px;
	padding: 20px 20px 10px 20px;
	text-align:left;
	font-size: 14px;
}

form div + div {
    margin-top: 12px;
}

label{
	display:inline-block;
	width: 90px;
	text-align:right;
	font-family:TF2Build;
}

textarea{
	vertical-align:text-top;
}

input:focus, textarea:focus {
	border-color: #fa7000;
}

ul {
	margin: 0;
	padding-left: 30px;
	line-height:21px;
}

.formButton{
	font-family:TF2Build;
	text-decoration:none;
	border: 1px solid #111;
	font-size:18px;
	text-align:center; 
}

.mailSent{
	text-align:center;
	font-family:TF2Build;
	color:#bfc3cf;
	padding-bottom:24px;
}

.error{
	color:red;
}

.spacer{
	padding: 12px 0 12px 0;
}

.wrap {
    min-height: 100%;
}

.picFullCenter{
	width:620px;
}

.header{
	width:996px;
	background-color: #111111;
	height:60px;
	border: 2px solid #444855;
	border-radius: 20px;
	margin: 0 auto;
	box-shadow: #444855 0px 2px 3px;
}

.links{
	float:right;
	padding: 15px 12px;
}

.logo{
	padding: 15px 12px;
	float:left;
	font-family:TF2Build;
	font-size:32px;
	color:#FA7000;
}

.banner{
	background-image:url(img/banner.jpg);
	width:996px;
	height:200px;
	border: 2px solid #444855;
	border-radius: 20px;
	margin: 0 auto;
	box-shadow: #444855 0px 2px 3px;
}

.title{
	font-family:TF2Build;
	font-size:110px;
	font-weight:900;
    color: #FA7000;
    text-shadow:
    -7px -7px 0 #000,
    7px -7px 0 #000,
    -7px 7px 0 #000,
    7px 7px 0 #000;
	line-height:110px;
}

.subtitle{
	font-family:TF2Build;
	font-size:30px;
	font-weight:900;
	color:#FA7000;
    text-shadow:
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000,
    3px 3px 0 #000;
	line-height:90px;
}

.navigation{
	line-height:39px;
	border: 2px solid #444855;
	border-radius: 20px;
	box-shadow: #444855 0px 2px 3px;
	background-color:#111111;
	height:40px;
	padding: 10px 0;
	width: 996px;
	margin: 0 auto;
}

.nav{
    margin: 0;
    padding: 0 2px;
	float:left;
	display: inline-block;
    width: 120px;
    color: #FFFFFF;
	font-family:Impact;
	font-size:20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

#clicked.nav{
	pointer-events:none;
	cursor:default;
	color:#FA7000;
	border-radius:20px;
}

a.nav:hover{ 
    color: #FA7000;
}

.main{
	overflow:auto;
	padding-bottom:34px;
	width:1000px;
	margin: 0 auto;
	text-align:left;
}

.content{
	width:632px;
	float:left;
	display:inline;
	height:100%;

}

.indent{
	padding: 0 10px;
}

.article{
	width:632px;
	padding: 10px 10px;
	background-color:#111111;
	border: 2px solid #444855;
	border-radius: 20px;
	position:relative;
	box-shadow: #444855 0px 2px 3px;
}

.center{
	text-align:center;
}

.aside{
	float:right;
	width:320px;
	height:100%;
}

.mumbleFrame{
	width:306px;
	background-color:#111111;
	border: 2px solid #444855;
	border-radius: 20px;
	padding: 10px 5px;
	box-shadow: #444855 0px 2px 3px;
}



.footer{
	position:relative;
	margin: -34px auto 0 auto;
	height:30px;
	clear:both;
	background-color: #111111;
	border: 2px solid #444855;
	border-radius: 20px;
	width:996px;
	box-shadow: #444855 0px 2px 3px;
}

.copyright{
	line-height:30px;
	font-family:Impact;
	font-size:12px;
	color: #FFFFFF;
}