/**
 *
 *	§1	DEFAULTS
 *	§1.1	reset
 *	§1.2	typography
 *	§1.3	forms
 *	§1.4	tools
 *	§2	STRUCTURE
 *	§2.1	header
 *	§2.2	canvas
 *	§2.3	page
 *	§2.4	intro
 *	§2.5	nav
 *	§2.6	content
 *	§2.7	footer
 *	§3	OVERWRITES
 *	§3.1	checkin
 *	§3.2	ticket
 *	§3.3	coupon
 *	§3.4	clients
 *	§3.5	testimonials
 *	§3.6	question
 *	§3.7	answers
 */


/*	@group §1 DEFAULTS 
 ********************************************************* /

/**
 *	@group §1.1	reset
 *
 *	basierend auf dem CSS reset von Eric Meyer, 
 *	angepasst für htmlexpress.de
 *
 *	@see http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */
html,
body {
	cursor: 			default;
	overflow-x:			hidden;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 			0;
	padding: 			0;
	border: 			0;
	outline: 			0;
	font-weight: 		normal;
	font-style: 		normal;
	font-size: 			100%;
	font-family: 		inherit;
	vertical-align: 	baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 			0;
}
ol, ul {
	list-style: 		none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: 	collapse;
	border-spacing: 	0;
}
caption, th, td {
	text-align: 		left;
	font-weight: 		normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/** @end reset **/


/*
**	@group §1.2 typography
*/
body {
	font:				13px/20px "Lucida Grande","Lucida Sans Unicode", Calibri, Helvetica, Arial;
}
strong {
	font-weight:		bold;
}
h2,
h3 {
	color:				#2493C6;
	font-family:		Cambria, Georgia;
	font-weight:		bold;
}
h2 {
	background:			url(img/sep.gif) 0 100% repeat-x;
	font-size:			24px;
	line-height:		40px;
	margin:				0 0 10px;
	padding:			0 0 10px;
}
h3 {
	background:			url(img/sep_small.gif) 0 100% repeat-x;
	font-size:			16px;
	line-height:		30px;
}
h2 .info,
h3 .info {
	font-weight:		normal;
}
h2 .info {
	font-size:			12px;
	line-height:		12px;
}
h3 .info {
	font-size:			10px;
	line-height:		10px;
}

p.infomsg {
	background:			#EDF3F5 url(img/icon_info.gif) 8px 7px no-repeat;
	border:				1px solid #C8D3E0;
	border-width:		1px 0;
	font-size:			11px;
	margin:				10px 0 0;
	padding:			3px 3px 3px 30px;
}


a:link,
a:visited {
	color:				#F00505;
}
a:hover,
a:focus {
	text-decoration:	none;
}
a:active {
	position:			relative;
	top:				1px;
}

#content p {
	margin-bottom:		10px;
}
/** @end typography **/

/*
**	@group §1.3 forms
*/
input {
	font:				14px/20px Calibri, Helvetica, Arial;
}
input.txt,
textarea.txt {
	border-color:		#DBDADB #DBDADB #DBDADB #B4B3B6;
	border-style: 		solid;
	border-width:		1px 1px 1px 3px;
	padding:			2px 3px;
}
label {
	display:			block;
}
label span {
	display:			block;
}
/** @end forms **/

/*
**	@group §1.4	Tools
*/
.hide {
	position: 			absolute !important; 
	left:				-9999px !important; 
}
/* clearfix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Clearen per Overflow */
.floatbox { overflow:hidden; }

/* .floatbox-Anpassung fuer IE6 */
* html .floatbox {width:100%;}
/** @end Tools **/

/** @end DEFAULTS *****************************************/
/** @group §2 STRUCTURE ***********************************/

/*
**	@group §2.1	header
*/
#header {
	background:			url(img/header_bg.png) repeat-x;
	position: 			absolute;
	height:				37px;
	left:				0;
	overflow: 			hidden;
	top:				0;
	width:				100%;
	z-index: 			111;
}
#header h1 {
	color:				#FFF;
	font-weight:		bold;
	line-height:		30px;
	text-align: 		center;
}
#header h1 a {	
	color:				#FFF;
}
#header h1 span {	
	color:				#A6A6A9;
	font-size:			10px;
	font-weight:		normal;
}
/** @end footer **/

/*
**	@group §2.2 canvas
*/
#canvas-container {
	background:			url(img/canvas_bg.gif);
	height:				400px;
	position:			relative; 
}
#canvas {
	background:			url(img/canvas_loader.gif) 50% 50% no-repeat;
	height:				400px;
	overflow:			hidden; 
	position:			absolute; 
	top:				0;
	left:				0;
	width:				100%;
}
.narrow #canvas-container,
.narrow #canvas {
	height:				300px;
}
.narrow #canvas {
	height:				300px;
}
#canvas div {
	position: 			absolute;
	top:				0;
}

/* canvas layers */
#canvas-foreground {
	position: 			absolute;
	left:				0;
	bottom:				0;
	height:				400px;
	width:				100%;
	
	background: 		url(img/canvas/layer1.png) 50% 102% no-repeat;
}
* html #canvas-foreground {
	position:			relative; 
	width:				100%;
	height:				100%;
	
	background:			transparent;
}
* html #canvas-foreground-left {
	position: 			absolute;
	width:				960px;
	height:				257px;
	bottom:				0;
	right:				50%;
	
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/layer1_left.png', sizingMethod='scale');
}
* html #canvas-foreground-right {
	position: 			absolute;
	width:				960px;
	height:				257px;
	bottom:				0;
	left:				50%;
	
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/layer1_right.png', sizingMethod='scale');
}
#layer2 {
	width:				115%;
	height:				101%;
	
	background: 		url(img/canvas/layer2.png) 50% -10% no-repeat;
}
* html #layer2 {
	background:			transparent;
}
* html #layer2 div {
	position:			relative;
	width:				1274px;
	height:				296px;
	margin:				0 auto;
	
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/layer2.png', sizingMethod='scale')
}
#layer3 {
	width:				133%;
	height:				105%;
	
	background:			url(img/canvas/world.jpg) 50% 0 no-repeat;
}

/** @end canvas **/

/*
**	@group §2.3	page
*/
#page-container {
	background:			url(img/bg.png) 50% 0 repeat-y;
	height:				100%;
}
.narrow #page-container {
	background:			url(img/bg_1010.png) 50% 0 repeat-y;
}
#page {
	margin:				0 auto;
	padding:			0 0 200px;
	position:			relative;
	width:				1200px;
}
.narrow #page {
	width:				1000px;
}

/* train pictures */
#html-express,
#nacht-express {
	height:				248px;
	position: 			absolute;
	width:				322px;
	top:				-160px;
	z-index: 			10;
}
#html-express {
	background: 		url(img/canvas/html-express.png) no-repeat;
	left:				-140px;
}
#nacht-express {
	background: 		url(img/canvas/nacht_express.png) no-repeat;
	right:				-140px;
	overflow: 			visible;
}
#nacht-express-lights {
	background:			url(img/canvas/lights.png);
	height:				93px;
	left:				-9999px;
	position: 			absolute;
	top:				20px;
	width:				423px;
}
#nacht-express.active #nacht-express-lights {
	left:				-248px;
}
* html #nacht-express.active #nacht-express-lights {
	display:			none;
}
.narrow #html-express,
.narrow #nacht-express {
	top:				-20px;
}
.narrow #html-express {
	left:				-80px;
}
.narrow #nacht-express {
	right:				-80px;
}
#html-express.active,
#nacht-express.active {
	cursor: 			default;
}

* html #html-express {
	background: 		transparent;
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/html-express.png', sizingMethod='scale')
}
* html #nacht-express {
	background: 		transparent;
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/nacht_express.png', sizingMethod='scale')
}
* html #nacht-express-lights {
	background: 		transparent;
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/canvas/lights.png', sizingMethod='scale')
}
/** @end page **/

/*
**	@group §2.4	intro
*/
#intro {	
	display: 			inline;
	float:				left;
	margin:				60px 10px 10px;
	width:				180px;
}
.narrow #intro {
	background:			#F9F9F9;
	display:			block;
	float:				none;
	width:				610px;
	
	margin:				0 200px;
	border-top:			10px solid #FFF;
}

/* welcome */
#welcome {
	background:			#F9F9F9;
	padding:			10px;
}
.narrow #welcome {
	float:				left;
	width:				385px;
	border-right:		10px solid #FFF;
}
.narrow #welcome h2 {
	background:			none;
	padding-bottom:		0;
	font-size:			32px;
	font-weight:		normal;
	line-height:		30px;
}
.narrow #welcome p {
	float:				left;
	font-size:			18px;
	line-height:		30px;
	position:			relative;
	width:				380px;
}
#welcome p.who {
	color:				#444;
	font-size:			12px;
	font-style:			italic;
	text-align: 		right;
}
.narrow #welcome p.who {
}

/* about */
#about {
	background:			#F9F9F9;
	margin-top:			10px;
	padding:			10px;
}
.narrow #about {
	margin:				0 0 0 415px;
}
#about p {
	font-size:			11px;
	padding-top:		10px;
}
/** @end intro **/

/*
**	@group §2.5	nav
*/
#nav {
	border-bottom:		4px solid #2493C6;
	margin:				0 0 1px 200px;
	padding-top:		15px;
	width:				980px;
}
.narrow #nav {
	clear:				left;
	margin:				0 5px 1px;
	width:				auto;
}
* html .narrow #nav {
	margin:				0 0 1px 10px ;
}
#nav li,
#nav a {
	float:				left;
	white-space: 		nowrap;
}
#nav li {
	padding-bottom:		2px;
	margin:				0 3px 0 0;
}
#nav a {
	background:			#F9F9F9 url(img/diagline_bg.gif);
	color:				#2493C6;
	display:			block;
	font-size:			16px;
	line-height:		28px;
	height:				28px;
	padding:			5px 10px;
}
#nav .current {
	border-bottom:		2px solid #2493C6;
	padding:			0;
}
#nav .current a {
	background:			#2493C6;
	color:				#FFF;
	cursor:				default;
	font-weight:		bold;
	text-decoration:	none;
}
#nav .current a:active {
	top:				0;
}
/** @end nav **/

/*
**	@group §2.6	content
*/
#content {	
	margin:				0 0 0 200px;
	position:			relative;
}
.narrow #content {
	margin:				0 5px;
}
* html .narrow #content {
	margin:				0 0 0 10px;
}

/* primary */
#primary {
	background:			#F9F9F9;
	float:				left;
	padding:			10px;
	position:			relative;
	width:				580px;
}
.narrow #primary {
}

/* secondary */
#secondary {
	width:				380px;
	margin:				0 0 0 610px;
	position:			relative;
}
* html #secondary {
	margin:				0 0 0 607px;
}

/* sidebar boxes */
div.box {
	background:			#F9F9F9;
	padding:			10px;
	margin:				0 0 10px;
	position:			relative;
}
/** @end content **/

/*
**	@group §2.7	footer
*/
#footer {
	background:			url(img/sep_dot.gif) 0 30px repeat-x;
	clear:				left;
	font-size:			12px;
	padding:			35px 0;
	margin:				0 10px;
}
/** @end footer **/


/** @end STRUCTURE ****************************************/
/** @group §3 OVERWRITES **********************************/


/*
**	@group §3.1 checkin
*/
#checkin.html-express  p.nacht-express,
#checkin.nacht-express p.html-express,
#checkin.html-express  span.nacht-express,
#checkin.nacht-express span.html-express {
	display:			none;
}
#form_servicetype {
	background:			url(img/btn-servicetype.png) 0 0 no-repeat;
	height:				85px;
	margin:				10px -5px 0;
	position:			relative;
}
#checkin.html-express #form_servicetype {
	background-position: 0 0;
}
#checkin.nacht-express #form_servicetype {
	background-position: -290px 0;
}
#form_servicetype label {
	position: 			absolute;
	top:				0;
	width:				295px;
	height:				85px;
	
	cursor: 			pointer;
	z-index: 			10;
}
#form_servicetype label.html-express {
	left:				5px;
}
#form_servicetype label.nacht-express {
	right:				5px;
}
#form_servicetype label.active {
	cursor: 			default;
}
#form_servicetype label * {
	position: 			absolute;
	top:				-9999px;
}
#form_servicetype div.slider-frame {
	position: 			absolute;
	width:				590px;
	height:				85px;
	
	background:			url(img/slider_frame.png);
	z-index: 			1;
}
* html #form_servicetype div.slider-frame {
	background: 		transparent;
	filter:				progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_/style/img/slider_frame.png', sizingMethod='scale')
}
#checkin p.nacht-express {
	background:			#5A6B7D url(img/icon_info_nacht.gif) 8px 7px no-repeat;
	color:				#FFF;
	border-color:		#0E1114;
}

#form_clientinfo h3 {
	margin-top:			20px;
}
#form_clientinfo label {
	background: 		url(img/sep_dot.gif) 0 100% repeat-x;
	clear:				left;
	padding:			10px 0 10px;
}
#form_clientinfo label span {
	float:				left;
	font-weight:		bold;
	line-height:		24px; 
	width:				200px;
}
#form_clientinfo span.info {
	float: 				none;
	font-weight:		normal;
	font-size:			11px;
	width:				auto;
}
#form_clientinfo .txt {
	width:				370px;
}
* html #form_clientinfo .txt {
	width:				367px;
}
#form_clientinfo .notes textarea {
	height:				100px;
}
#form_clientinfo span.error {
	background:			#F8F1CF url(img/icon_error.png) 8px 9px no-repeat;;
	border:				1px solid #CC3300;
	border-width:		1px 0;
	color:				#CC0000;
	display:			block;
	float:				none;
	font-size:			12px;
	font-weight:		bold;
	margin:				10px 0 0 200px;
	padding:			5px 10px 5px 30px;
	width:				auto;
}

#form_buttons {
	padding:			10px 0 0 200px;
}
#form_buttons button {	
	font-size:			18px;
	padding:			6px 20px;
}

/* step 2 */
#content p.notes {
	font-size:			12px;
}
#content p.email {
	font-size:			12px;
}
#content textarea.address {
	width:				275px;
	height:				64px;
}
#howtopay {
	padding:				20px 0;
}
/** @end check-in **/

/*
**	@group §3.2 ticket
*/
#ticket {
	background:			#F9F9F9;
	padding:			10px;
	margin:				0 0 10px;
	position:			relative;
}
#ticket.html-express .nacht-express,
#ticket.nacht-express .html-express {
	display:			none;
}

#ticket dl {
	background:			url(img/tickets.jpg) no-repeat;
	color:				#FFF;
	
	font-size:			10px;
	height:				240px;
	line-height:		11px;
	margin:				0 0 10px;
	position:			relative;
	width:				360px;
}
#ticket.nacht-express dl {
	background-position:0 -240px;
}

#ticket dt,
#ticket dd {
	padding: 			1px; 
	position: 			absolute;
}
#ticket .shadow {
	padding:			2px 0 0 2px;
	color:				#4FA4EF;
}
#ticket.nacht-express .shadow {
	color:				#000;
}
#ticket dd {
	font-size:			13px;
	line-height:		15px;
	font-weight:		bold;
}

#ticket dt.name,
#ticket dt.project,
#ticket dt.pages {
	top:				50px;
}
#ticket dd.name,
#ticket dd.project,
#ticket dd.pages {
	top:				60px;
}

#ticket .name,
#ticket .departure {
	left:				20px;
}

#ticket dd.name,
#ticket dd.project{
	width:				120px;
	height:				46px;
	overflow: 			hidden;
}

#ticket .project{
	left:				160px;
}
#ticket .pages,
#ticket .arrival,
#ticket .price{
	right:				20px;
}
#ticket dt.departure,
#ticket dt.arrival {
	top:				110px;
}
#ticket dd.departure, 
#ticket dd.arrival {
	top:				120px;
}
#ticket .ticketnr {
	right:				145px;
}
#ticket dt.ticketnr {
	top:				200px;
}
#ticket dd.ticketnr{
	top:				210px;
}

#ticket dd.price{
	font-size:			32px;
	line-height:		32px;
	bottom:				26px;
}
#ticket dd.price.info{
	font-size:			11px;
	line-height:		11px;
	bottom:				16px;
}

#ticket.nacht-express .price {
	left:				20px;
	right:				auto;
}
/** @end ticket **/


/*
**	@group §3.3 coupon
*/
#coupon {
	background:			#F9F9F9;
	margin:				0 0 10px;
	padding:			10px;
	position:			relative;
}
#coupon .txt {
	width:				350px;
	margin:				10px 0;
}
/** @end coupon **/


/*
**	@group §3.4	clients
*/
#clients-intro {
	padding-bottom:		10px;
}
.client {
	border-top:			10px solid #FFF;
	padding:			0 10px;
	margin:				0 -10px;
}
.client h3 {
	background:			transparent;
}
.client dl {
	position:			relative; 
}
.client dt {
	width:				580px;
	height:				360px;
	overflow: 			hidden;
	position:			relative;
	padding:			0;
	margin:				0;
	
}
.client dt img {
	position:			absolute; 
	top:				0;
	left:				0;
}
.client dt img.hidden {
	display:			none;
}
.client dd {
	font-size:			12px;
}
.client dd.imgnav {
	background:			url(img/client_frame.png) no-repeat;
	color:				#CCC;
	margin-top:			-360px;
	padding:			335px 0 10px;
	text-align: 		center;
	position:			relative;
}
.client dd.imgnav a {
	background:			#212431;
	color:				#FFF;
	padding:			3px 5px;
	text-decoration:	none;
	
	border-radius: 		7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
.client dd.imgnav a:hover,
.client dd.imgnav a:focus {
	background:			#50525C;
}
.client dd.imgnav a.current {
	background:			#B7B7B9;
	color:				#212431;
	cursor: 			default;
	font-weight:		bold;
}
.client dd.imgnav a.current:active {
	top:				0;
}
.client dd.description{
}
/** @end clients **/


/*
**	@group §3.5	testimonials
*/
#testimonials {
	background:			#F9F9F9;
	padding:			10px;
}
#testimonials blockquote {
	padding:			0 0 30px;
}
#testimonials p {
	margin:				0;
}
#testimonials blockquote p.quote {
	background:			#2493C6;
	color:				#FFF;
	font-size:			14px;
	text-align: 		center;
	padding:			15px;
	
	border-radius: 		10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#testimonials blockquote p.who {
	background:			url(img/balloon.gif) 13px 0 no-repeat;
	font-size:			12px;
	padding:			0 0 0 35px;
}
#testimonials blockquote.diff p.who {
	background:			url(img/balloon_diff.gif) 327px 0 no-repeat;
	text-align: 		right;
	padding:			0 35px 0 0;
}
/** @end testimonials **/

/*
**	@group §3.6	question
*/
#question {
	background:			#EEE;
	border:				1px solid #FFF;
	border-color:		#FFF #DDD #DDD #FFF;
	padding:			9px;
	font-size:			18px;
}
#question input {
	font-size:			24px;
	line-height:		40px;
	width:				548px;
}
/** @end question **/

/*
**	@group §3.7	answers
*/
.answer {
	border-top:			10px solid #FFF;
	padding:			0 10px;
	margin:				10px -10px 0;
}
/** @end answers **/

/** @end OVERWRITES ***************************************/

/*
** chaos
*/