/*

Screen Stylesheet for jQuery Realistic Hover Effect
Created by Adrian Pelletier
http://www.adrianpelletier.com

*/


/* =Imports
============================================================================== */

	@import url("resets.css");


/* =Base Structure
============================================================================== */
	
body {
			font: 12px/1.5 Georgia, Palatino, "Palatino Linotype", serif;
	  background: #fff;
	  	   color: #555;
	   	   width: 1024px;
		 padding:0px 0px; 
		  margin:0px auto;

/* background-color: rgb(249, 250, 251); */
background-color: white;

}

body a {
			 color: rgb(58, 136, 222);
		   display: inline;
			 clear: both;
	   font-family: "Lucida Grande","Lucida Sans Unicode","Tahoma",sans-serif;
		 font-size: 12px;
	letter-spacing: normal;
	
}

body a:hover {
	
	color: rgb(0, 169, 255);
}


body a.lang-de {
	background: url(../images/Locale/deSprite.png) 0 0 no-repeat;
	width: 22px;
	height: 22px;
	top: 0px;
	left: 0px;
	position: fixed;
	display: inline;
	float: left;
}
body a.lang-de:hover {
	background-position: -22px 0px;

}

body #social {
	top: 5px;
	right: 5px;
	position: fixed;
	float: right;	
}
body #social ul li.twitter {
	list-style-image: url(../images/social/twitter_16.png);
}

body #social ul li.facebook {
	list-style-image: url(../images/social/facebook_16.png);
}

#content {
		float: none;
		width: 1024px;
   margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}
		
h1 {
	font-size: 20px;
	color: #7f2d2d;
	text-align: center;
}
	
p {
	text-align: center;
}


#creditsContent {
		float: none;
		width: 800px;
   		margin: 30px auto 30px auto;
}
		
#creditsContent	h1 {
		font-size: 20px;
		color: #7f2d2d;
		text-align: center;
}

#creditsContent h2 {
	margin-top: 0px;

}
	
#creditsContent p {
		text-align: center;
		margin-bottom: 30px;
		text-shadow: none;
}
#creditsContent table {
	margin: auto auto auto auto;
}

#creditsContent table tr,
#creditsContent table td {
	vertical-align: top;

}



/* ============== */
/* ! Navigation   */
/* ============== */



	/* =Reflection Nav
	-------------------------------------------------------------------------- */
		
		#nav-reflection {
			margin: 0 auto 50px auto;
			padding: 50px 0 0 172px;
			width: 452px;
			min-height: 130px;
			background: url(../imagesMenu/page-shadow.jpg) top center no-repeat;
			list-style: none;
			}
			
		#nav-reflection li {
			margin-right: 15px;
			width: 59px;
			float: left;
			}
			
		#nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover {
			width: 59px;
			height: 59px;
			text-indent: -9999px;
			overflow: hidden;
			background: url(../imagesMenu/icons.png) no-repeat;
			display: block;
			}
			
		#nav-reflection span {
			margin-top: 1px;
			width: 59px;
			height: 34px;
			text-align: center;
			background: url(../imagesMenu/icons-reflections.jpg) no-repeat;
			display: block;
			}
			
		/* Button Colors */
		
		#nav-reflection li.button-color-1 a {
			background-position: -3px -3px;
			}
			
		#nav-reflection li.button-color-2 a {
			background-position: -92px -3px;
			}
			
		#nav-reflection li.button-color-3 a {
			background-position: -181px -3px;
			}
			
		#nav-reflection li.button-color-4 a {
			background-position: -270px -3px;
			}
			
		/* Button Reflection Color */
		
		#nav-reflection li.button-color-1 span {
			background-position: 0 0;
			}
			
		#nav-reflection li.button-color-2 span {
			background-position: -89px 0;
			}
			
		#nav-reflection li.button-color-3 span {
			background-position: -178px 0;
			}
			
		#nav-reflection li.button-color-4 span {
			background-position: -267px 0;
			}
			
			
	/* =Shadow Nav
	-------------------------------------------------------------------------- */
		
		#nav-shadow {
		 font-family: "Helvetica Neue", Gorgia, Serif;
		 font-style: normal;
		 letter-spacing: 0.01em;
			position: relative;
			margin: 0 auto 0px auto;
			padding: 60px 0px 0px 137px; /* padding: 60px 0px 0px 127px; */
			width: 497px;
			min-height: 100px;
			text-align: center;
			background: url(../imagesMenu/logo.png) top center no-repeat;
			list-style: none;
			
			}
			
			
		#nav-shadow li {
			margin-right: 15px;
				   width: 81px;
				  height: 72px;
			    position: relative;
			       float: left;
			 text-shadow: 1px 1px 2px white;
			}
		
			
		#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
				margin: 0 auto;
				 width: 66px;
				height: 59px;
		   text-indent: -9999px;
			  overflow: hidden;
			background: url(../imagesMenu/icons.png) no-repeat;
			   display: block;
			  position: relative;
			   z-index: 2;
		  
			}
				
		/* Button Colors */
		
		#nav-shadow li.button-color-1 a {
			background-position: -1px -3px;
		
			
			}
			
		#nav-shadow li.button-color-2 a {
			background-position: -88px -3px;
			}
			
		#nav-shadow li.button-color-3 a {
			background-position: -179px -3px;
			}
			
		#nav-shadow li.button-color-4 a {
			background-position: -266px -3px;
			}
			
		/* Button Shadow */
		
		#nav-shadow li img.shadow {
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			
		
		}
		
		#nav-shadow li description {
			padding: 6px 0px 0px 0px;
			margin-top: 10px;
			position: relative;
			z-index: 3;

		}
		
#mainContent {
	overflow: hidden;
	/*background: url(../images/Features/Languages.png) bottom center no-repeat;*/

}

h10 {
	font-family:"Helvetica Neue";
		font-size: 30px;
		color: rgb(90, 55, 20);
		text-align: center;
		text-shadow: 0px 0px 2px #CC9999;
}

#mainContent .productName {
		font-family:"Helvetica Neue";
		font-size: 30px;
		color: rgb(90, 55, 20);
		text-align: center;
		text-shadow: 0px 0px 2px #CC9999;
	background: url(../images/WarrantyHeroLogo.png) 0 0 no-repeat;
		width: 297px;
		bottom: 0px;
		right: 0px;
		text-indent: -3000px;
}

#mainContent #productTitel {
	overflow: hidden;
	position:absolute;
	float: left;

	padding-left: 330px;
	padding-right:inherit;
	padding-top: 100px;
	z-index: 5;
	
	
}

#mainContent #info {
	overflow: hidden;
	position:absolute;
	float: left;
	padding-left: 460px;
	padding-right:inherit;
	padding-top: 150px;
	z-index: 4;
	width: 300px;
	min-width: 100px;
	white-space:pre-line;

	font-family: Georgia, Arial, sans-serif;
		font-size: 11.5px;
		color:rgb(102, 102, 102);
		text-align: left;
}

#mainContent #localizations { text-align: center; width: 250px; margin: 0px auto 30px auto;}
#mainContent #localizations h3 { font-size: 14px; }
#mainContent #localizations ul li { display: inline;}
		
#teaser {
	display: block;
	height: 439px;
	width: 475px;
	background: url(../images/WHteaser.png) top left no-repeat;
	position:relative;
/* 	background-image: url(images/WHteaser.jpg) top left no-repeat; */
	float:left;
}




/* ######## Sidebar ######## */

#sidebar {
	
	 width:200px;
	height: 300px;
	 float:right;
  position:absolute;
   z-index: 7;
    margin: 130px 25px auto 820px;	
font-family: "Georgia", "Helvetica Neue", "Serif";
	color: rgb(138, 151, 178);
}


#sidebar, a {
			font-family: "Casual", "Helvetica Neue", "Serif";
			font-size: 14px;
		 text-align: center;
	text-decoration: none;
			  color: rgb(106, 116, 134);
			  text-shadow: none;
			  letter-spacing: 2px;
			  display: block;
			  /* text-shadow: 1px 1px 1px rgb(106, 116, 134); */
			 
				
}

/* Download button */
#sidebar a.downloadButton  {
	text-indent: -10000px;
		display: block;
		clear: both;
		width: 75px;
		height: 27px;
		background: url(../images/Buttons/button_Download_orange_slice.png) 0 0 no-repeat;
		margin: -0px auto auto auto;

}
#sidebar a:hover.downloadButton {
	background-position: -77px 0px;
}
#sidebar a:active.downloadButton {
	background-position: -154px 0px;
}
#sidebar a:visited.downloadButton {
	background-position: -231px 0px;
}

/* Buy button */
#sidebar a.buyButton  {
		text-indent: -10000px;
		display: block;
		clear: both;
		width: 75px;
		height: 27px;
		background: url(../images/Buttons/button_Buy_petrol_slice_website.png) 0 0 no-repeat;
		margin: 3px auto auto auto;

}
#sidebar a:hover.buyButton {
	background-position: -76px 0px;
}
#sidebar a:active.buyButton {
	background-position: -152px 0px;
}
/*
#sidebar a:visited.buyButton {
	background-position-x: 0px;
}
*/





#sidebar, p {
	font-family: "Helvetica Neue", "Serif";
	 font-style: normal;
	padding-top: 8px;
		  color: rgb(102, 102, 102);
	text-shadow: 0px 0px 1px rgba(102, 102, 102, 1);
}

#sidebar #box {
				 width: 200px;
		   	    height: 20px;
		   padding-top: 5px;
	    padding-bottom: 20px;
		   	    margin: 20px auto auto auto;
	-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
	  /*
 -moz-box-shadow:	0px 2px 3px #ccc;
	-webkit-box-shadow:	0px 2px 3px #ccc;

	   background-image: url(../images/yellowPattern.png); */
	       font-family: "Handwriting - Dakota";
	         font-size: 11px;
	}



/* ######## Screenshots ######## */

#screenshots {
				width: 800px;
   			   height: 200px;
	 background-image: url(../images/Screenshots/ScreenshotsHolder.png);
  background-position: top center;
	background-repeat: no-repeat;
	 			clear: both;
			   margin: 0px auto 0px auto;
			   position: relative;

}

#screenshots img {
				margin: 20px 30px auto 30px;
 -webkit-border-radius: 4px;
 	-moz-border-radius: 4px;

			overflow: hidden;
		  background-color:transparent;
				   outline: none;

			 outline-style: solid;
			 outline-width: 0px;
			  border-width: 0px;
}

#screenshots img:hover {
	-webkit-box-shadow: 0px 0px 6px rgb(75, 137, 208);
	   -moz-box-shadow: 0px 0px 6px rgb(75, 137, 208);
			
}

#screenshots #shots {
	width: 800px;
	margin: auto auto auto 40px;
}
#screenshots #reflections {
	width: 800px;
	margin: auto auto auto 40px;
}

#screenshots #reflections img,
#screenshots #reflections img:hover {
	outline: none; 
	margin-top: 0px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	text-align: center;
}



/* feature styles */

#features {
		float:none;
		width: 750px;
	   margin: 5px auto 80px auto;
  text-shadow: 0px 0px 2px #CC9999;
  		clear: both;
  	 position: relative;
  	 
  	 font-family: Georgia, Arial, sans-serif;
		font-size: 11.5px;
		color:rgb(102, 102, 102);
}

#features p { 
	font-family: Georgia, Arial, sans-serif;
	font-size: 13px;
	color:rgb(102, 102, 102);
	text-shadow: none;
}

#features a {

	   background-image: url(../images/arrow%20copy.png);
	  background-repeat: no-repeat;
		  padding-right: 18px;
	background-position: center right;
				  color: white;
	   background-color: rgb(171, 173, 173);
				padding: 1px 17px 1px 8px;
				white-space:nowrap;
				
  			
  			 
  -webkit-border-radius: 14px;
	 -moz-border-radius: 14px;

}

#features a:hover {
		
		background-color: rgb(117, 118, 118);
	}

.feature-left {text-align: left; padding-left: 140px; height: 128px; }
.feature-left h1 { margin: 30px auto 0px 0px; text-align: left; }		
.feature-left p { margin: 0px auto 5px 0px; text-align: left; }
.feature-left img { float: left; z-index: 0; margin: -70px auto auto -140px;}


.feature-right 		{text-align: right; padding-right: 140px; height: 128px;}
.feature-right h1 	{ margin: 30px auto 0px 0px; text-align: right; }
.feature-right p 	{ margin: 0px auto 5px 0px;  text-align: right; }	

.fastfast 			{ background: url(../images/Features/64-Bit.png) right no-repeat;  }
.receiptHunting { background: url(../images/Features/receiptHunting.jpg) left no-repeat;  }
.fastEntering 	{ background: url(../images/Features/fastEntering.jpg) left no-repeat; }
.quicklook 		{ background: url(../images/Features/quicklook.png) right no-repeat; }
.isight 		{ background: url(../images/Features/iSight.jpg) right no-repeat; }




#footer {
		clear: both;
		margin: 30px auto 30px auto;
		height: 30px;
		 width: auto;
}

#footer, p{
		margin: 10px auto 10px auto;
		height: 30px;
		 width: auto;
		text-align: center;
}

#footer, h5 {
	margin: 10px 30px 5px 30px;
	text-align: center;
	font-size: 9px;
	color: rgb(201, 201, 201);
}

#underConstruction {
	width: 320px;
	height: 258px;
	background: url(../images/underConstruction.png) 0 0 no-repeat;
	position: absolute;
	top:0px;
	right: 0px;
	z-index: 30;
}