/**
* CSS
* 
* @version 1.0
* @author Vaska 
* @author Gregory Cadar
* @author Edited by Ed Nacional (www.ednacional.com)
* @author Edited by David Beermann (www.bildschirmsport.de)
*/

@font-face {
	font-family: 'Vegur';
	src: url('fonts/Vegur-R_0500.eot');
	src: local('Vegur Regular'),
		 local('Vegur-Regular'),
		 url('fonts/Vegur-R_0500.woff') format('woff'),
		 url('fonts/Vegur-R_0500.otf') format('opentype'),
		 url('fonts/Vegur-R_0500.svg#Vegur-Regular') format('svg');
}

@font-face {
	font-family: 'Vegur';
	src: url('fonts/Vegur-B_0500.eot');
	src: local('Vegur Bold'),
		 local('Vegur-Bold'),
		 url('fonts/Vegur-B_0500.woff') format('woff'),
		 url('fonts/Vegur-B_0500.otf') format('opentype'),
		 url('fonts/Vegur-B_0500.svg#Vegur-Bold') format('svg');
	font-weight: bold;
}

@font-face {
	font-family: 'Quicksand';
	src: url('fonts/Quicksand_Light.eot');
	src: local('Quicksand Light'),
		 local('QuicksandLight-Regular'),
		 url('fonts/Quicksand_Light.woff') format('woff'),
		 url('fonts/Quicksand_Light.otf') format('opentype'),
		 url('fonts/Quicksand_Light.svg#QuicksandLight-Regular') format('svg');
	font-weight: lighter;
}

@font-face {
	font-family: 'Quicksand';
	src: url('fonts/Quicksand_Book.eot');
	src: local('Quicksand Book'),
		 local('QuicksandBook-Regular'),
		 url('fonts/Quicksand_Book.woff') format('woff'),
		 url('fonts/Quicksand_Book.otf') format('opentype'),
		 url('fonts/Quicksand_Book.svg#QuicksandBook-Regular') format('svg');
}

@font-face {
	font-family: 'Quicksand';
	src: url('fonts/Quicksand_Bold.eot');
	src: local('Quicksand Bold'),
		 local('QuicksandBold-Regular'),
		 url('fonts/Quicksand_Bold.woff') format('woff'),
		 url('fonts/Quicksand_Bold.otf') format('opentype'),
		 url('fonts/Quicksand_Bold.svg#QuicksandBold-Regular') format('svg');
	font-weight: bold;
}


* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 14px;
	line-height: 22px;
	font-family: Vegur, Helvetica, Arial, sans-serif; /* choose overall font - go to www.typetester.org to test sizes and see the list of safe fonts - If the user doesnt have the first one, it try the second, and goes along the list until it finds a font that the computer has installed */
	color: #333333; /* sets the color of all type in the website except for links and other sections overwritten */
	background-color: #f2f2f2; /* sets the overall background color */
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

/* LINKS */
	
	
/* colors for all links */
a:link, a:active, a:visited { 
	text-decoration: none; /* none = no underline, other options include line-through or overline */
	color: #808080; /* sets hex color of every link - www.colorpicker.com or photoshop to find hex values */
}
	
/* sets the properties for links when mouse rolls over */
a:hover {
	color: #2e8099;
}

/* any img that is a link */
a img { 
	border: none; 
}

/* Pre-Nav Text - Can be accessed in the Exhibit Settings */
	
	
.top-section {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	/*
	font-size: 24px;
	line-height: 24px;
	color: #666666;
	font-style: italic;
	font-family: Georgia, serif;
	*/
}
	
.top-section h1 {
	font-family: "Quicksand", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: lighter;
	color: #96bfcc;
	margin-top: 30px;
	margin-bottom: 30px;
}

.bottom-section {
	padding-left: 10px;
	font-size: 11px;
	line-height: 11px;
	color: #8da4ab;
	position: absolute;
	left: 0;
	bottom: 55px;
}

.bottom-section a:link, .bottom-section a:active, .bottom-section a:visited { 
	text-decoration: none; /* none = no underline, other options include line-through or overline */
	color: #1a4957; /* sets hex color of every link - www.colorpicker.com or photoshop to find hex values */
}

.bottom-section  a:hover {
	color: #8da4ab;
}


/* MENU */

#menu {
	width: 200px; /* sets the width of your left hand bar - if you change this also change the LEFT margin in #content to match */
	overflow: visible;
	top: 0;
	bottom: 0;
	left: 40px;
	position: fixed; /* this make the menu stay in place while the content section scrolls*/
	height: 100%;
	background-color: #ffffff;
	padding-top: 21px; /* change to match the padding-top in #content if you want them to align */
	padding-bottom: 25px;
	height: 100%;
}

/* This section controls each section made */ 
#menu ul {
	list-style: none;
	margin-left: -5px;
	width: 216px;	
}

#menu ul li {
	padding-right: 21px;
	padding-left: 15px;
	position: relative;
	height: 27px;
	margin-top: -5px;
}

/* The following sets the style for the section heading */
#menu ul li.section-title {
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-top: 22px;
	color: #000000;
}

#menu ul li.active {
	background-color: #2e8099;
	background: url(img/li_active_background_depth.png) left top no-repeat;
}
#menu ul li.active a:link, #menu ul li.active a:visited, #menu ul li.active a:active {
	color: #fff;
}

/* CONTENT AREA */

#content {
	height: 100%;
	margin-top: 44px;
	margin-right: 0px;
	margin-bottom: 22px;
	margin-left: 320px; /* sets the space so the content starts right when the menu ends - if you change this also change the width of #menu to match */
    top: 0;
    width: 560px;
}
	
#content h1 {
	font-family: "Quicksand", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 28px;
	margin-bottom: 4px;
	display: inline;
}

#content h2 {
	font-family: "Quicksand", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: lighter;
	line-height: 20px;
	display: inline;
}

#content h2 small {
	font-family: "Quicksand", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: lighter;
}

.container {
	margin-bottom: 22px;
}

#content p { /* sets the properties for all paragraphs in the content area */
	font-size: 14px;
	width: 560px;
	margin-top: 22px; /* sets the space between paragraphs */
	clear: left;
}

#content em {
	color: #aaaaaa;
}

#content a:link, #content a:visited, #content a:active {
	color: #2e8099;
}

#content a:hover {
	text-decoration: line-through;
}

#content #intro {
	background-color: #fff;
	display: block;
	left: -22px;
	padding: 11px 22px;
	position: relative;
	right: -22px;
	top: 0;
	//width: 604px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}



/* Bildschirmsport Slidebox */

#slidewrapper {
	height: 420px;
	width: 560px;
	position: relative;
	margin-bottom: 22px;
}

#slidebox {
	height: 420px;
	width: 560px;
	overflow: hidden;
}

#slidewrapper a.prev, #slidewrapper a.next {
	position: absolute;
	top: 50px;
	background-color: #f2f2f2;
	padding: 8px 11px;
	display: block;
	color: #333333;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	outline: none; /* gets rid of firefox outline */
}

#slidewrapper a.prev:hover, #slidewrapper a.next:hover {
	color: #2e8099;
} 

#slidewrapper a.prev {
	left: 0;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

#slidewrapper a.next {
	right: 0;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
}


/* 
 *
 *	Bildschirmsport Videoplayer
 *
 */

#flashcontent {
	width: 560px;
	position: relative;
	
}

#flashcontent p {
	
	position: relative;
	background-color: #fff;
	padding: 11px 20px;
	width: 520px;
	margin-top: 0;
}


/* 
 *
 *	Contact Form
 *
 */

#formwrapper {
	background-color: #fff;
	padding: 11px 20px;
	margin-left: -20px;
	width: 560px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	float: left;
	clear: both;
	position: relative;
	margin-bottom: 22px;
}

#contactform {
	float: left;
}

#contactform label {
	clear: left;
	float: left;
	width: 120px;
	height: 23px;
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: middle;
}

#contactform input[type=text], #contactform textarea {
	display: block;
	float: left;
	width: 280px;
	background-color: #f2f2f2;
	border: 1px #f2f2f2 solid;
	margin-bottom: 11px; /* distance between form fields */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#contactform input {
	height: 21px;
	line-height: 0;
	padding: 5px 20px;
}

#contactform textarea {
	height: 110px;
	padding: 10px 20px;
	line-height: 22px;
	resize: none; /* removes safari resize handle */
}

#contactform button {
	float: left;
	margin-left: 120px;
	background-color: #96bfcc;
	width: 160px;
	height: 33px;
	padding: 5px 20px;
	border: 1px #96bfcc solid;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-align: left;
}

#contactform input[type=text]:hover, #contactform textarea:hover {
	border: 1px #2e8099 solid;
}

#contactform input:focus, #contactform textarea:focus {
	background-color: #96bfcc;
	border: 1px #96bfcc solid;
	outline: none; /* gets rid of actiuvity glow */
}

#contactform button:hover {
	border: 1px #2e8099 solid;
	cursor: pointer;
}

#contactform button:active, #contactform button:focus {
	border: 1px #2e8099 solid;
	background-color: #2e8099;
	color: #fff;
}

#links {
	list-style: none;
	line-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 11px;
	right: 20px;
}

#links li {
	margin-bottom: 11px;
}

/* Inline form validation styles - added by jQuery validation plugin */

#contactform input.invalid, #contactform textarea.invalid {
	background-color: #f97d82;
	border: 1px #f97d82 solid;
}

#contactform input.valid, #contactform textarea.valid {
	border: 1px #87ff82 solid;
	background-color: #87ff82;
}