/* CSS Document */

html {overflow: hidden;}

body {
	margin: 0; padding: 0;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 13px;
	line-height: 160%;
	text-transform: lowercase;
	
	}

p, h1, h2, h3, h4, h5 { font-family:Arial, Helvetica, sans-serif;}

/*p { font-family: Verdana, Arial, Helvetica, sans-serif;}*/

p.subheadline {
	display: block; width: 100%; margin: 0; padding: 0; height: 1px; background-color: none;
	background-image: url(img/2px.gif); background-repeat: repeat-x; }

p { margin: 0; padding: 5px 3px 15px 3px; font-size: 13px; line-height: 18px; }

h3 { margin: 0; padding: 5px 3px 5px 3px; font-size: 14px; font-weight: 300;}

a { text-decoration: none; color: #000; background-image: url(img/1px.gif); background-repeat: repeat-x; background-position: bottom;}
a:hover {text-decoration: none; background-image: none; }

.spacer {
	float: left;
	width: 100%;
	height: 10px;
	}

h4 { padding: 25px 0 0 2px; margin: 0 0 0 0; }



/******************** container stuff *******************/

.content_center {
	width: 900px;
	margin: 5% auto; 
	font-size: 12px; line-height: 18px;}



*+html .content_center .left img {
	margin-top: 20%;
	}

.content_center .left {
	width: 400px;
	height: 600px;
	float: left;
	overflow: hidden;
	}


.content_center .right {
	width: 500px;
	height: 600px;
	float: left;
	text-align: center;
	}



#content_home, #content_about, #content_sneaker, #content_kontakt  {
	float: left;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	width: 100%; height: 1000px;
	overflow: hidden;
	}


#content_about_1, #content_about_2, #content_kontakt_1, #content_kontakt_2, #content_kontakt_3 {width:400px; position: absolute; }


/******************** home *******************/


#content_home img {width: 100%; float: left;}

/*#content_home p {font-size: 12px; line-height: 18px; padding: 5px 3px 5px 3px; margin: 0; }*/

#zitat_1 {
	position: absolute;
	top: 10%; left: 10%;
	width: 400px;}

#zitat_1 {float: left;}

#zitat_1 p {margin-bottom: 0px; padding-bottom: 0px;}

#zitat_1 img, p {float: left;}

#zitat_1 img {margin: 0 0 15px 0;}


/******************** about *******************/
		



/******************** kontakt *******************/
	


label {width: 160px; float: left;}
input { width: 210px; float: left; height: 62px;  border: 0; padding: 10px; margin: 2px 0;  line-height: 80px; background: none;}
textarea { width: 210px; float: left; height: 153px;  border: 0;  padding: 10px 20px 10px 10px; margin: 2px 0; background: none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;}
.form_btn {background-image: url(img/form_btn_bg.gif); background-repeat: no-repeat; background-position: right; text-align: right; color:#000000; font-size: 12px; text-transform: lowercase; float: left; margin: 0; padding: 0; width: 250px; text-decoration: underline; height: 20px;}

#formresult {margin: 10px 0;}

#formresult p {margin: 0 0 0 2px; padding: 0; overflow:hidden; background-image: url(img/form_input_bg.gif); background-repeat: no-repeat; background-position: right; float: left; width: 396px; height: 62px;}

#formresult p.text {margin: 0; padding: 0; overflow:hidden; background-image: url(img/form_textarea_bg.gif); background-repeat: no-repeat; background-position: right; float: left; width: 100%; height: 153px;}






/******************** sneaker *******************/



#content_sneaker_container {
	float: left;
	width: 100%;
	height: 100%;
	text-align: center;
}

#content_sneaker img {margin: 150px 0;}

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position: relative;
	margin: 0 auto;
	overflow:hidden;	 	
	width: 100%;
	height: 800px;
	margin: 0 0 20% 0;
	text-align:center;
	
	
	/* custom decorations */
	padding:0;	
			
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:1000%;	
	position:absolute;
		
	
	/* decoration */
	/*margin-left:10px;*/
}

/* single scrollable item */
div.scrollable div.items div.item {
	float:left;
	/* custom decoration */
	text-align:center;
	width:10%;
	height: 800px;
	padding: 0px;
	font-size:30px;
	margin: 0;	
	
}

/* active item */
div.scrollable div.items div.active {
	
}



/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:100px;
	margin:0;
	cursor:pointer;
	font-size:1px;
}

a.next {
	position: fixed;
	right: 0; top: 40%;
	width: 20%;
	height: 20%;
	background-image: url(img/next_arrow.png);
	background-position: left;
	background-repeat: no-repeat;
	}

a.prev {
	position: fixed;
	left: 0; top: 40%;
	width: 20%;
	height: 20%;
	background-image: url(img/prev_arrow.png);
	background-position: right;
	background-repeat: no-repeat;
	}

a.next:hover {
	background-image: url(img/next_arrow_hover.png);
	}

a.prev:hover {
	background-image: url(img/prev_arrow_hover.png);
	}


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}




#text_sneaker {
	width: 900px; height: 650px;
	margin: 0% auto;
	background-image: url(img/sneaker_1.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	font-size: 12px; line-height: 18px;
	}
	

#text_sneaker .left {width: 400px; height: 600px; float: left; text-align: left;}
#text_sneaker .right {width: 500px; height: 600px; float: left; text-align: center;}

#content_sneaker_1, #content_sneaker_2 {position: absolute; width:400px; top: 70px;}


/******************** Nav *******************/

#logo_top {
	position: fixed; width: 95px; 
	right: 40px; top: 40px;
	text-align: right;
	}

#logo_top a{
	background-image: none;
	}

#logo_top img {
	border: none;
	}

#logo_top ul {
	margin: 0; padding: 0 0 0 2px;
	list-style-type: none;
	text-align: left;
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color:#000;
	font-size: 10px;
	line-height: 22px;
	}

#logo_top ul li {
	margin: 0; padding: 0;
	float: left;
	color:#000;
	text-decoration: none;
	background-image: url(img/2px.gif); background-repeat: repeat-x; background-position: bottom;
	width: 100%;
	font-size: 10px;
	}


#logo_top ul li a {
	float: left;
	display: block;
	font-weight: bold;
	width: 100%;
	color:#000;
	text-decoration: none;
	font-size: 13px;
	
	}

#logo_top ul li a:hover { background-image: url(img/1px.gif); background-repeat: repeat-x; background-position: bottom; }


#logo_bottom {
	position: fixed; 
	width: 98px;
	height: 32x; 
	right: 38px; bottom: 29px;
	text-align: right;
	}



.active1, .active2, .active3 {background-image: url(img/active.gif); background-repeat: no-repeat; display: block; width: 10px; height: 20px; float: left; }