/******* Wrapper = Width ******/
#wrapper{
	margin: auto;
	width: 1028px;
	height: 100%;
	position: relative;
}

/*****************************************************/
/* Viewport: contains images, slider, menu, headlines*/
/*****************************************************/
#viewport{
	position: relative;
	width: 1028px;
	height: 525px;
	margin-top: 0px; text-align: left;
	z-index: 1px;
}
	body.shades #viewport{margin-top: 28px;}
	body.index #viewport{margin-top: 1px;}
	body.browns #viewport{background: url("../images/browns/brown-mainbg.jpg");  z-index: 1px;margin-top: 28px;}
	body.blonds #viewport{background: url("../images/blonds/blond-mainbg.jpg");  z-index: 1px;margin-top: 28px;}	
	body.reds #viewport{background: url("../images/reds/red-mainbg.jpg");  z-index: 1px;margin-top: 28px;}
	body.blacks #viewport{background: url("../images/blacks/black-mainbg.jpg");  z-index: 1px;margin-top: 28px;}
	body.startbg #viewport{background: url("../images/mainstartbg.jpg");  z-index: 1px:}
	body.standard #viewport{	height: 211px; background: url("../images/standard-header.jpg"); z-index: 1px;}

	/*** Slider Images***/
	#mainstartbg{width: 1028px;	height: 525px;}
	#viewport .slider-start{	background: url("../images/mainstartbg.jpg"); width: 1028px; height: 525px; overflow:hidden;}
	#viewport .slider-blonds{background: url("../images/blonds/blond-mainbg.jpg"); width: 1028px; height: 525px; overflow:hidden; position: relative;}
	#viewport .slider-reds{background: url("../images/reds/red-mainbg.jpg");  width: 1028px; height: 525px; overflow:hidden; position: relative;}
	#viewport .slider-blacks{background: url("../images/blacks/black-mainbg.jpg");  width: 1028px; height: 525px; overflow:hidden; position: relative;}
	#viewport .slider-browns{background: url("../images/browns/brown-mainbg.jpg"); width: 1028px; height: 525px; overflow:hidden; position: relative;}

	/**** Navigation ****/
	ul.maxmoorelinks{
		position: absolute; top: 9px; right: 15px; font-size: 13px; text-align: right;
	}
		ul.maxmoorelinks a{color: #696969; }
		ul.maxmoorelinks li{padding: 3px;}
		
	
	nav{text-align: left; height: 30px;
	width: 1028px; position: relative; 
		background: url("../images/navbg.jpg") no-repeat;}
		
		nav li{float:left; }
		nav li a{font-family: 'CandaraRegular', Verdana, Arial, sans-serif; color: #b0b0b0;
			font-size: 15px;height: 18px;display: block;padding: 4px 7px; padding-top: 7px;}
		nav li a:hover, nav li a.active{color: black;  background: white; }

		nav li.navteiler{width: 1px; height: 21px; display: block;	margin: 0 1px;}
		nav li.languages a{color: #959595;width: 44px; height: 19px; display: block; background: url("../images/worldmap.jpg") no-repeat right; padding-right: 50px; margin-left:15px;}
		#mainmenu li.languages a:hover{ background: url("../images/worldmap.jpg") no-repeat right;color: white; }
		#mainmenu li.languages:hover a{ background: url("../images/worldmap.jpg") no-repeat right;color: white; }
		#mainmenu li.web a:hover{background: url("../images/interneticon.png") no-repeat right;color: white; }
		#mainmenu li.web:hover a{background: url("../images/interneticon.png") no-repeat right;color: white; }
		nav li.web a{height: 19px; display: block; background: url("../images/interneticon.png") no-repeat right;
			margin-left:10px; padding-right: 23px;font-size: 14px;color: #959595;}
		#mainmenu li.spacer{width: 186px; display: block;cursor: auto;}
		#mainmenu li.spacer a:hover{ background: none; cursor: auto;}
		#mainmenu li.spacer:hover a{ background:none;cursor: auto; }
			
			ul.submenu.shades{
			width: 1028px; height: 31px; display: block;
			position: absolute; top: 29px; left: 0; display: block;	
			left:-9999px; z-index: 100;
			background: black; border-top: 1px solid white;

		}
		
		body.shades #mainmenu li ul, body.blonds #mainmenu li ul, body.reds #mainmenu li ul,
		body.browns #mainmenu li ul, body.blacks #mainmenu li ul{left: 0px} /* always show on 28 shades pages */
		ul.submenu.shades li a{ margin: 0; width: 60px;text-align: center;}
		ul.submenu li{float: left; margin-right: 2px;margin-top: 2px;}
		#mainmenu li:hover ul{ /* Display the dropdown on hover */
			left:0px; /* Bring back on-screen when needed */
		}
		#mainmenu li  ul li:hover{ /* Display the dropdown on hover */
			left:0; /* Bring back on-screen when needed */
		}
		#mainmenu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
			color: black; background: white;
		}
		#mainmenu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
			text-decoration:none; color:#bdbdbd; text-shadow: none; background: black; 
		}
		#mainmenu li:hover ul li a:hover,#mainmenu li:hover ul li a.active{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
			color: black;  background: white;	
		}
		
	
	/**** Headlines ****/
	body.reds #viewport h1, #viewport h1.reds{
		background: url("../images/reds/reds-h1.jpg") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width: 380px;
	}

	body.reds #viewport h2, #viewport h2.reds{
		background: url("../images/reds/reds-h2.gif") no-repeat;display: block; height: 195px;
		position: absolute; left: 73px; top: 241px; width: 405px; 
	}
	body.blonds #viewport h1, #viewport h1.blonds{
		background: url("../images/blonds/blonds-h1.jpg") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width: 380px;
	}

	body.blonds #viewport h2, #viewport h2.blonds{
		background: url("../images/blonds/blonds-h2.gif") no-repeat;display: block; height: 195px;
		position: absolute; left: 73px; top: 241px; width: 405px; 
	}
	body.browns #viewport h1, #viewport h1.browns{
		background: url("../images/browns/browns-h1.jpg") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width: 380px;
	}

	body.browns #viewport h2, #viewport h2.browns{
		background: url("../images/browns/browns-h2.gif") no-repeat;display: block; height: 195px;
		position: absolute; left: 73px; top: 241px; width: 405px; 
	}
	body.blacks #viewport h1, #viewport h1.blacks{
		background: url("../images/blacks/blacks-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width: 380px;
	}

	body.blacks #viewport h2, #viewport h2.blacks{
		background: url("../images/blacks/blacks-h2.gif") no-repeat;display: block; height: 195px;
		position: absolute; left: 73px; top: 241px; width: 430px; 
	}
	body.standard #viewport h1.howtouse{
	background: url("../images/howtouse-h1.gif") no-repeat;display: block; height: 76px;
	position: absolute; left: -6px; top: 100px; width: 441px;
	}
	body.standard #viewport h1.tipstricks{
		background: url("../images/tipstricks-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width: 441px;
	}
	body.standard #viewport h1.maxtonkit{
		background: url("../images/maxtonkit-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width:552px;
	}
	body.standard #viewport h1.aboutmaxton{
		background: url("../images/aboutmaxton-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width:673px;
	}
	body.standard #viewport h1.contactmaxton{
		background: url("../images/contact-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width:673px;
	}
	body.standard #viewport h1.impressum{
		background: url("../images/impressum-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width:673px;
	}
	body.standard #viewport h1.merchandising{
		background: url("../images/merchandising-h1.gif") no-repeat;display: block; height: 76px;
		position: absolute; left: -6px; top: 100px; width:673px;
	}

#content h1, #howtousewrapper h1{
	color: #cd143d;
	font-size: 40px;
	font-family: 'CandaraBoldItalic', Verdana, Arial, sans-serif; line-height: 1.1em;
	margin-bottom: 25px;
}
.widecolum{
	width: 530px; float: left;
}

.narrowcolumn{
	width: 343px; float: left;
}
.widewidget{
	width: 573px;overflow:hidden;  height:206px; text-align: left; padding: 30px;  position: relative;
	background: url("../images/widgettallbg.png");
}

.narrowwidget{
	width: 331px; overflow:hidden; height: 206px; text-align: left; padding: 30px; position: relative; background: url("../images/widgettallbg.png");
}
.widewidget  p{
	font-size: 14px; color:#9d9d9d; width: 60%;
	font-family: Verdana, Arial, sans-serif; margin-top:18px; line-height: 1.2em; 
}
.narrowwidget p{
	font-size: 14px; color:#9d9d9d; width: 50%;
	font-family: Verdana, Arial, sans-serif;margin-top:10px; line-height: 1.2em; 
}
.addedvalues{
	float: left; width: 300px; text-align: left; position: relative; margin-right: 44px; padding: 5px;
}



#howtousewrapper{
	width: 1028px; background: white; position: relative;
	padding: 150px 60px 0 60px;
	width: 908px;
	background: white;
	font-family: Verdana, Arial, sans-serif;
	text-align: justify;
	font-size: 15px;
	line-height: 1.3em;
	margin-bottom: 5px; color: #222222;
}



body.browns #shadebrowser{
	height: 121px; position: relative;
	background: url("../images/browns/shadebrowser-bg.png") repeat-y;
}
body.blonds #shadebrowser{
	height: 121px;  position: relative;
	background: url("../images/blonds/shadebrowser-bg.png") repeat-y;
}

body.blacks #shadebrowser{
	height: 121px;  position: relative;
	background: url("../images/blacks/shadebrowser-bg.png") repeat-y;
}

body.reds #shadebrowser{
	height: 121px;  position: relative;
	background: url("../images/reds/shadebrowser-bg.png") repeat-y;
}
body.reds #shadebrowser li a{background: url("../images/reds/browsing-shades.jpg");}
#shadebrowser li a{width: 165px; height: 108px; float: left;background: white; display: block; margin-left: 5px;}

	
#carousel-container{padding:6px 0 0 1px;}
img.shademodel{float: right;}

#viewport .shadetitle{
	height: 50px; background: white; padding: 10px 20px;
	font-family: 'CandaraRegular', Verdana, Arial, sans-serif;  font-size: 45px;color: #b14212;
	position: absolute; top: 105px; left: 0; padding-left: 55px;
}
#viewport img.colorpreview{position: absolute; top: 237px; left: 65px;}
	.originalhaircolor{display: block; position: absolute; top: 251px; left: 441px;
		font-family: 'CandaraBoldItalic', Verdana, Arial, sans-serif; color: white}
		
	.colorresult{display: block; position: absolute; top: 346px; left: 441px;
		font-family: 'CandaraBoldItalic', Verdana, Arial, sans-serif; color: white}
		
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; position: absolute; top: -99px; right: 0px;}