@charset "utf-8";
/*
###################################
### NOSTALE GAMEGUIDE
### CSS -- Sebastian Jagoschütz
###
### colors: #691e1a (text)
###			#FEF6AA (menu/headline)
###			#A10800 (links)
###################################
*/

/*### STUFF ###*/


html, body {
	background:#7edbf1 url(../img/clouds.jpg) no-repeat scroll 50% 0;
	height:100%;
	color:#691e1a;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
}

html {overflow-y:scroll;}

a:link,
a:visited {color:#A10800; text-decoration:none;}
a:hover,
a:active {text-decoration:underline;}
a:focus {outline:none;}

h1 {
	background:url(../img/logo.jpg) no-repeat;
	height:89px;
	width:170px;
}
h1 a {
	height:89px;
	display:block;
	text-indent:-9999px;
	width:150px;
}

h2 {
	color:#FEF6AA;
	font-size:17px;
	font-weight:bold;
	height:27px;
	line-height:27px;
	margin:0 0 10px;
	text-align:center;
}

h3 {
	color:#7B1300;
	font-size:13px;
	font-weight:bold;
	line-height:15px;
}

h4 {color:#000; margin:5px 0;}


.innerbox-head h3 {margin:15px 0;}

img {
	display:block;
	margin:15px auto;
	text-align:center;
}

img.left {float:left; margin:0 15px 15px 0; display:inline;}
img.right {float:right; margin:0 0 15px 15px; display:inline;}

p {margin:10px 0;}

p .none{}

ol {list-style:decimal; margin:0 0 0 15px;}
ol li {margin:15px 0 0 0;}

.clearfloat {clear:both; height:0;}

/*### WRAPPER ###*/

#page {
	height:100%;
	margin:0 auto;
	min-width:850px;
}

.page-foot {height:100%;}

#nav-wrapper { 
	float:left;
	left:0;
	width:180px;
	top:0;
	position:absolute;
	z-index:1;
}

#content-wrapper {
	margin:0 0 0 143px;
}

.col-wrapper {position:relative;}

/*### NAVIGATION ###*/
.nav-bg { background:url(../img/nav-bg.jpg) repeat-y; width:170px;}

.nav-foot {
	background:transparent url(../img/nav-foot.png) no-repeat scroll 0 0;
	height:162px;
	width:185px;
}

/*### CONTENT-BOX ###*/
.breadcrumb {padding:0 0 0 15px; font-style:italic;}
.breadcrumb a {margin:0 2px;}
.breadcrumb a.active-bread {font-weight:bold; font-style:normal;}

.content-bg {background:url(../img/content-expand.png) repeat-y; min-height:380px; width:708px;}
.content-head {background:url(../img/content-head.jpg) no-repeat; padding:15px 90px 0 80px; width:538px;}
.content-foot {background:url(../img/content-foot.png) no-repeat; height:104px;}

.innerbox-bg-tabs,
.innerbox-bg {background:url(../img/innerbox-bg.jpg) repeat-y; width:526px;}
.innerbox-bg {margin:20px 0 0 0;}
.innerbox-head {background:url(../img/innerbox-head.jpg) no-repeat; width:496px; padding:15px;}
.innerbox-bg-tabs {position:relative; margin:50px 0 0 0;}
.innerbox-foot {background:url(../img/innerbox-foot.jpg) no-repeat; font-size:0; height:11px; width:526px;}

.paragraph {margin:15px 0;}

ul.list li {
	background:url(../img/bullet.gif) no-repeat;
	margin-bottom:5px;
	min-height:20px;
	padding:2px 0 0 28px;	
}

table {width:100%; margin:15px 0; border-collapse:separate;}
*html table {border-collapse:collapse;}
*+html table {border-collapse:collapse;}
table thead th {
	background: url(../img/th-bg.jpg) repeat-x;
	height:30px;
}

table th {line-height:30px; border-right:1px solid #852600; padding:0 ;}

table th.first span {
	background: url(../img/th-first.jpg) no-repeat;
	display:block;
	float:left;
	height:30px;
	width:9px;
}
table th.last {border-right:0;}
table th.last span {
	background:url(../img/th-last.jpg) no-repeat center right;
	display:block;
	float:right;
	height:30px;
	width:9px;
}
table tbody tr {background-color:#F2E8A0;}
table tbody tr.stripe {background-color:#EFE495;}
table td {border-right:1px solid #852600; border-top:1px solid #FFF7CC; border-bottom:1px solid #D9D081; padding: 5px;}
table td.first {border-left:1px solid #852600;}
table tbody .table-foot td {background: url(../img/td-foot-bg.jpg) repeat-x; border:0; padding:0; height:30px;}
*html table tbody .table-foot td { height:20px;}
table tbody .table-foot td.first span {
	background: url(../img/td-foot-first.jpg) no-repeat; 
	display:block;
	height:30px; 
	width:9px;
}
table tbody .table-foot td.last span {
	background: url(../img/td-foot-last.jpg) no-repeat center right;
	display:block;
	float:right;
	height:30px; 
	width:9px;
}

.teaser {border:0;}

/*### FOOTER ###*/

.col-wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -127px; /* the bottom margin is the negative value of the footer's height */
	width:850px;
}
#footer {
	background:transparent url(../img/background-bottom.jpg) no-repeat scroll 50% bottom;
	height:332px;
	margin:-332px auto 0;
	overflow:hidden;	
}

.push {
	height:60px;
	 /* .push must be the same height as .footer */
}

#footer p {
	height:20px;
	margin:293px auto 0;
	padding:0 0 0 163px;
	width:500px;
}

#footer p {position:relative;}
#footer p a {position:relative; z-index:1;}


* always last parameter */
.clearfix:after {
   clear:both;
   content:".";
   display:block;
   height:0;
   visibility:hidden;
}
.clearfix { display:inline-block; }
/* hide from IE Mac \*/
* html .clearfix { height:1%; }

#newContent {
	
	z-index:10000;
	height: 1%;
	width:720px;
	top: -50px;
	left: -150px;	
	min-height:500px;
	border:1px solid #666;
	position:absolute;
	padding: 0px;
	margin: 0px;
	overflow:auto;
	overflow-x:hidden;
	
	/* CSS3 styling for latest browsers */
  -moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
 .close {
  z-index:10001;
	background:url(../img/icons.gif) no-repeat 0 -60px;
	position:absolute;
	right:-75px;
	top:-73px;	
	cursor:pointer;
	height:35px;
	width:35px;
}

/* STYLE FOR HTML-TUTORIAL */
.tutorial_body {
	min-height: 		500px;
	width:				490px;
	overflow-x: 		hidden;
}

.tutorial_body p{
 	min-height:25px;

}

.main_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	min-height : 40px;
	padding: 5px;
}

.explain_img {
	text-align : center;
	width: 210px;
	max-height : 400px;
	
}
.explain_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	margin-left: 5px;
	line-height: 140%;
	text-align : left;
	min-height: 30px;
	
}

p .explain_text {
	max-width:210px;
}

.main_table {
  padding: 5px;
  position: 	relative;
  top:			0px;
  left:			0px;
  margin: 		0px;
  width: 	 	482px;            
}

.sub_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	min-height:15px;
	max-height: 15px;
	padding: 5px;
	width : 210px;
}


.photo_desc {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-decoration: none;
}

body .tutorial{
	scrollbar-face-color: 		#555555;
	scrollbar-arrow-color: 		#000000;
	scrollbar-track-color: 		#000000;
	scrollbar-highlight-color: 	#000000;
	scrollbar-3dlight-color: 	#000000;
	scrollbar-shadow-color: 	#000000;
	scrollbar-darkshadow-color: #000000;
	background-image: 			url(../images/bg.jpg);
	background-repeat: 			repeat-y;
	position: 					absolute;
	top:						0px;
	left:						0px;
}



#Layer1 {
	position:	absolute;
	left:		30px;
	top:		867px;
	width:		107px;
	height:		32px;
	z-index:	1;
	background-color: #000000;
	padding:	3px;
	float: 		right;
}

#Layer2 {
	position:	absolute;
	left:		83px;
	top:		746px;
	width:		67px;
	height:		32px;
	z-index:	2;
	background-color: #000000;
	padding:	3px;
	float:		none;
}

#Layer3 {
	position:	absolute;
	left:		20px;
	top:		793px;
	width:		68px;
	height:		32px;
	z-index:	3;
	background-color: #000000;
	padding:	3px;
	float:		none;
}

#Layer4 {
	position:	absolute;
	left:		78px;
	top:		843px;
	width:		76px;
	height:		32px;
	z-index:	4;
	background-color: #000000;
	padding:	3px;
	float:		none;
	display:	none;
}

#Layer5 {
	position:	absolute;
	left:		285px;
	top:		682px;
	width:		74px;
	height:		60px;
	z-index:	1;
  	color:		#000000;
}
#Layer6 {
	color:		#FFFFFF;
	font-weight:bold;
	position:	absolute;
	left:		222px;
	top:		639px;
	width:		70px;
	height:		26px;
	z-index:	1;
}
#Layer7 {
	color:		#FFFFFF;
	font-weight:bold;
	position:	absolute;
	left:		168px;
	top:		1216px;
	width:		167px;
	height:		72px;
	z-index:	1;
}
#Layer8 {
	color:		#FFFFFF;
	font-weight:bold;
	position:	absolute;
	left:		412px;
	top:		636px;
	width:		79px;
	height:		28px;
	z-index:	2;
}
#Layer9 {
	position:	absolute;
	left:		27px;
	top:		542px;
	width:		180px;
	height:		61px;
	z-index:	2;
	color: 		#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:	10px;
	padding:	5px;
}
.style1 {color: #333333}

/* New divs */