@charset "utf-8";
/* ########################################################
** #### Standard CSS-Layout (c) by Dennis Osterkamp #######
** ########################################################
**
** File: 		 	layout.css
** Description: 	Main Layout Stylesheet for Quartier24.at
** Author:		 	Dennis Osterkamp 
** Version:			1.01
** Last changes: 	14.03.2008
**

/*
	1. Generel XHTML Elements

	2. Standard Classes - (Same for all projects)

	3. Typography

	4. Content wrapper
	
	5. Header 
		
		5.1 Navi
	
	6. Sidebar
		
		6.1 Navigation

		6.2 Roomdetails
	
	7. Content
	
	8. Footer
	
	9. Combined Classes
*/
/* #######################################
 	###### 1. GENERAL XHTML ELEMENTS ######
	#######################################
*/
	* { margin:0; padding: 0; list-style: none; text-decoration: none; }

	html { min-height: 100.01% }
	body { text-align: center; background: transparent url(gfx/Backgrounds/bgBody.png) top left repeat; }
	
/* #################################
	###### 2. STANDARD CLASSES ######
/* #################################
*/ 	
	.align-right 	{ text-align: right; }
	.align-left 	{ text-align: left; }	
	.center			{ text-align: center; }
	.mid				{ vertical-align: middle; height: 100%; }
	
	.float-left  { float: left; }
	.float-right { float: right; }	

	.float-left img 	{ margin-right: 1em; }
	.float-right img 	{ margin-left: 1em; }

	.marg_auto { margin-left: auto; margin-right: auto; }

	.notype { list-style-type: none !important; list-style: none !important; }

	strong 	{ font-weight: bold; }
	em, i  	{ font-style: italic; }
	.normal 	{ font-weight: normal; }

	big 	 { font-size: 1.25em; }
	small	 { font-size: .95em; }
	.xsmall { font-size: 11px; }

	p 	{ padding-bottom: 1em; }
	
	.lhs { line-height: 1.3; }
	.lhm { line-height: 1.5; }
	.lhl { line-height: 1.7; }
	
	.black 	{ color: #333; }
	.red		{ color: #990000; }
	.grey, .grey a	{ color: #888; }
	.xgrey	{ color: #aaa; }
	.orange 	{ color: #cc7722; }
	.yellow 	{ color: #ffdd11; }
	.blue		{ color: #336699; }
	.green	{ color: #669933; }
	
	.hidden { display: none; }
	
	a img { border: 0 none; }
	
	.odd  { background: #F0F0F6; }
	.even { background: #FFF; }

	.squared li { list-style-type: square; margin-left: 1.5em; }

	/*** Clearing ***/	
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		font-size: 0.1em;
		visibility: hidden;
	}	

	/* Workaround: Clearfix-Anpassung für diverse IE-Versionen */
	/* 
	** IE5.x/Mac - x
	** IE7       - x
	*/	
	.clearfix { display: inline-block; }  /* ... Clearing für IE5/Mac und IE7 */

	/*
	** IE5.x/Win - x
	** IE6       - x
	*/	
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%; }   /* ... für IE5 + IE6/Win | IE-Clearing aktivieren */
	.clearfix { display: block; }      /* ... für IE5,IE6,IE7 | Mac-Einstellungen für IE/Win zurücksetzen */
	/* End hide from IE-mac */

	.marg_auto  { margin: auto; }

	.w_perc_90 { width: 88%; }
	.w_perc_85 { width: 83%; }
	.w_perc_80 { width: 78%; }
	.w_perc_75 { width: 74%; }
	.w_perc_70 { width: 68%; }
	.w_perc_65 { width: 64%; }
	.w_perc_60 { width: 58%; }
	.w_perc_55 { width: 53%; }
	.w_perc_50 { width: 48%; }
	.w_perc_45 { width: 44%; }
	.w_perc_40 { width: 38%; }
	.w_perc_35 { width: 33%; }
	.w_perc_30 { width: 28%; }
	.w_perc_25 { width: 24%; }
	.w_perc_20 { width: 18%; }
	.w_perc_15 { width: 13%; }
	.w_perc_10 { width:  8%; }		
		
/* ############################
	###### 3. TYPOGRAPHY  ######
	############################
*/		
	body { 
		font: 82.25%/160% Arial, Verdana, sans-serif; 
	}
	
	a { }
	a:link, a:visited { text-decoration: underline; }
	a:hover, a:active { text-decoration: none; }

	h1, h2, h3, h4, h5, h6 {
		font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
		font-weight: bold;
		padding: 1em 0 .25em;
	}
	h2 { font-size: 1.7em; }
	h3 { color: #993e29; font-size: 1.4em; }
	

/* ################################
	###### 4. CONTENT WRAPPER ######
	################################
*/
	#pageWrapper 	 { width: 800px; text-align: left; clear: both; margin: 0 auto; }
	
	#contentWrapper { clear: both; }
	#sidebar			 { float: left; width: 238px; margin: 0 21px 0 68px; }
	* html #sidebar { display: inline; }
	#content 		 { float: right; width: 473px; }
	#footer 			 { clear: both; margin-left: 68px; }

/* ################################
	###### 5. HEADER ###############
	################################
*/	
	#header { position: relative; }

	/**** Page Flags ***/
	#flags 	   { position: absolute; top: 36px; right: 0; }
	#flags a	  	{ float: left; display: block; width: 32px; height: 32px; background-repeat: no-repeat; background-image: url(gfx/flags.png); }
	#flags a span { display: none; }
	#flags a.de { background-position: 0px 0px; } 
	#flags a.en { background-position: -32px 0px; }

	/**** Page Logo ****/
	h1 {  
		padding: 0;
	}
	
	h1 a {
		display: block;
		width: 312px; 
		height: 122px; 
		text-indent: -9999px;
		background: transparent url(gfx/Backgrounds/bgLogo.png) top left no-repeat;		
	}

	/*** Hiding skiplinks for CSS-View ***/
	#quickskip li { position: absolute;	visibility: hidden;	}	

	#pageTeaser { 
		float: left;
		height: 35px;
		width: 555px;
		margin-left: 68px;
		margin-top: 29px;
		padding: 0;
		display: inline;
		text-indent: -9999px;
		background-image: url(gfx/Backgrounds/bgTeaser.png);
		background-repeat: no-repeat;
		background-color: transparent;
	}

	.deTeaser { background-position: 0px 0px; }
	.enTeaser { background-position: 0px -35px; }

	#teaserBed {
		float: right;
		height: 74px;
		width: 164px;
		background: url(gfx/Backgrounds/bgTeaser_Right.png) left bottom no-repeat;
		text-indent: -9999px;	
	}

	/**** 5.1 Navi ****/
	#navi 	{
		position: absolute;
		top: 0;
		right: 0;
		background: transparent url(gfx/Backgrounds/bgNavi_Left.png) bottom left no-repeat; 
	}
	
	* html #navi { width: 340px; }
	
	#navi ul { 
		background: transparent url(gfx/Backgrounds/bgNavi_Right.png) bottom right no-repeat;
		padding: 0 .7em;
		height: 2.5em;
	}	
	#navi li { float: left; color: white; }
	#navi a 	{ 
		color: white; 
		font-size: .85em; 
		padding: 0 .5em;
	}
	
/* #########################
	###### 6. SIDEBAR  ######
	#########################
*/		

	/**** 6.1 Navi ****/	
	#navigation 	{ background: transparent url(gfx/Backgrounds/bgNavigation_Top.png) left top no-repeat; }
	#navigation .bottomBackground {
		padding: .8em 10px;
		background: transparent url(gfx/Backgrounds/bgNavigation_Bottom.png) left bottom no-repeat; 
	}	

	html>body #navigation li { background: transparent url(gfx/Navigation/trenner.png) center bottom no-repeat; }

	#navigation li a { 
		display: block; 
		text-decoration: none; 
		font-size: 19px;
		letter-spacing: -0.5px;
		width: 197px;
		line-height: 40px;
		padding: 0 10px;
	}
	
	* html #navigation li a { border-bottom: 1px solid #978e00; border-top: 1px solid #c8bd19; }

	#navigation li a:link, #navigation li a:visited { color: white; }
	#navigation li a:hover, #navigation li a:active { background-color: #993e29; }
	
	#navigation li.booking a:link, #navigation li.booking a:visited { color: #993e29; }
	#navigation li.booking a:hover, #navigation li.booking a:active { color: white; }
	
	/**** 6.2 Roomdetails ****/
	#roomDetails { color: white; }
	#roomDetails h4 { padding-top: 143px; font-size: 19px; letter-spacing: -0.5px; }
	#roomDetails { background: transparent url(gfx/Backgrounds/bgRoomdetails_Top.png) left top no-repeat; }
	#roomDetails .bottomBackground {
		padding: 1em 20px 1.5em;
		background: transparent url(gfx/Backgrounds/bgRoomdetails_Bottom.png) left bottom no-repeat; 
	}	
	
	#roomDetails li { list-style-type: square; margin-left: 1.5em; }
	
/* #########################
	###### 7. CONTENT  ######
	#########################
*/
	#content 		{ background: transparent url(gfx/Backgrounds/bgContent_Top.png) top center no-repeat; padding-top: 10px; line-height: 10px; }
	#contentArea 	{ background: transparent url(gfx/Backgrounds/bgContent_Mid.png) top center repeat-y; padding: 0 10px; line-height: 1.7em; }
	#contentBottom	{ background: transparent url(gfx/Backgrounds/bgContent_Bottom.png) bottom center no-repeat; height: 14px; font-size: .1em; line-height: 14px; }	
	#contentArea .contentText { padding: 0 20px; }

	#bottomBox { 
		clear: both; 
		margin: .5em 0 1em 68px;
		background: transparent url(gfx/Backgrounds/bgBottomBoxTop.png) top left no-repeat;
		color: white;
		line-height: 1.4em;
	}
	#bottomBox .cont { 
		padding: 0 18px 24px 185px;
		background: transparent url(gfx/Backgrounds/bgBottomBoxBot.png) bottom left no-repeat;
	}
	
	#bottomBox .innercont {
		background: transparent url(gfx/Backgrounds/bgBottomBoxBot.png) bottom left no-repeat;
	 }

	/*** City Guide Linklisten ***/
	.linkList	 { clear: both; font-size: .85em; white-space: nowrap; margin: 0 0 1em; }
	.linkList li { float: left; }

	ol		{ margin: 0 1em 1em 2em; }
	ol li { list-style: decimal; margin: 0 1em; padding: .25em 0; font-weight: bold; }

/* ########################
	###### 8. FOOTER  ######
	########################
*/	
	#footer { 
		width: 736px;
		color: white;
		background: transparent url(gfx/Backgrounds/bgFooter_Top.png) top center no-repeat; 
		font-size: 0.85em;
	}
	
	#footer .bottomBackground { 
		background: transparent url(gfx/Backgrounds/bgFooter_Bottom.png) bottom center no-repeat; 
		padding: 1.5em;
	}
	
	#footer li { float: left; }
	#footer li a { color: white; padding: 0 .5em; }
	#footer li.copy { float: right; width: 100%; text-align: right; }
	
	#footNote { text-align: right; font-size: 0.85em; margin-bottom: 1em; }
	#footNote, #footNote a { color: #c2b600; }


/* #################################
	###### 9. COMBINED CLASSES ######
	#################################
*/		
	#navigation, #roomDetails { margin-bottom: .75em; }
	
/* #########################
	###### 10. IMAGES  ######
	#########################
*/		
	.imgDetail 	{ overflow: hidden; margin: .5em auto; }
	.framed	  	{ padding: 3px; background-color: white; border: 1px solid #ccc; }
	
	a img { border: none 0; text-decoration: none; }
	
/* ########################
	###### 11. ROUTE  ######
	########################
*/		
	.route li { 
		line-height: 40px; 
		padding-left: 50px;
		background-repeat: no-repeat; 
		background-position: 10px 5px; 
		background-color: white; 
		margin: 0 0 1px;
	}
	
	.route .right 	 { background-image: url(gfx/Route/right.gif); }
	.route .left 	 { background-image: url(gfx/Route/left.gif); }
	.route .street	 { background-image: url(gfx/Route/goon.gif); }
	.route .fwleave { background-image: url(gfx/Route/highway_leave.gif); }

/* ###############################
	###### 12. STEPCAROUSEL  ######
	###############################
*/	
	/*** DESC: Container für den grafischen Banner der einzelnen Produkte ***/
	#prodImage {
		clear: left;
		width: 453px;
		height: 453px;
	}

	#prodImage .btnForward, #prodImage .btnBackward {
		position: absolute;
		display: block;
		width: 29px; height: 29px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: transparent;
		margin-top: -226px;
	}
	
	#prodImage .btnForward span, #prodImage .btnBackward span { display: none; }
	
	#prodImage .btnForward  { background-image: url(gfx/Backgrounds/bgPicForward.png); margin-left: 453px; }
	#prodImage .btnBackward { background-image: url(gfx/Backgrounds/bgPicBackward.png); margin-left: -32px; }	
	
	#myProducts { height: 453px; margin: 0 10px 10px 10px; }
	
	.stepcarousel{
		position: relative; /*leave this value alone*/
		overflow: scroll; /*leave this value alone*/
	}
	
	.stepcarousel .belt{
		position: absolute; /*leave this value alone*/
		width: 453px;
		left: 0;
		top: 0;
		margin-top: 10px;
	}
	
	.stepcarousel .panel{
		float: left; /*leave this value alone*/
		overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
		width: 453px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	}
	

/* ##########################
	###### 13. PAGEADS  ######
	##########################
*/	
	#ads { clear: left; margin-top: .5em; }

	#ads a {
		display: block; 
		float: left;
		background-repeat: no-repeat;
		background-color: transparent;
		height: 196px;
		width: 153px;
		margin-right: 7px; 
	}
	
	#ads a { background-image: url(gfx/Backgrounds/bgAds.png); }
	
	#ads .de_cityGuide { background-position: 0 0; }
	#ads .de_checkIn	 { background-position: -153px 0 ; }
	#ads .de_location	 { background-position: -306px 0 ; margin-right: 0px; }
	#ads .en_cityGuide { background-position: 0 -196px; }
	#ads .en_checkIn	 { background-position: -153px -196px; }
	#ads .en_location	 { background-position: -306px -196px; margin-right: 0px; }		
	
	#ads span {	display: none;	}