/*
- Concept, design and implementation by
- Geberit Verwaltungs AG
- Schachenstrasse 77
- 8645 Jona
- Switzerland
- http://www.geberit.com
-
- Creater: Rolf Züger
- Date: 16.5.2009
-
- Title: CSS for the Geberit Print2Flash application  
*/

html {
	height: 100%;
}

body {
    height: 100%;
	margin: 0px;
	background-color: #ffffff;
	text-align: center;	/* for ie only */
	position:relative; /* for ie7 */
}

form {
    height: 100%;
}

a {
	font-family:Helvetica,Arial,sans-serif;
	font-size:11px;
	color:#0081C4;
	text-decoration : none
}

a:visited {
	color:#0081C4;
	text-decoration : none
}

a:hover {
	color:#FF3300;
	text-decoration : none
}

a:active {
	color:#FF3300;
	text-decoration : none
}

#page {
	position: relative;
	margin: 0 auto;
	
	width:1022px;
	min-height: 100%;
	
	text-align:left;	/* overwrite ie attribute from above */
	
	background-color: #ffffff; /* set here content background */	
	
	border-width: 0px 1px 0px 1px;
	border-style: solid;
 	border-color: #d0d0d0;
	
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: normal;
	font-size: 11px;
	
	background-image:url(../../../files/sys-gra-bg_page.gif/$file/bg_page.gif);
	background-repeat:repeat-y;	
	
}

/*bis und mit IE 6 Hack*/
*html #page{	
	height: 100%;
}
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */

	#header {
		height: 76px;	/* inklusive line at bottom */
		background-color: #ffffff;
		width:100%;
	}
		
		#header #boxLeft {
			float:left;
			width:180px;
			height:75px;
			
			text-align:center;
			
			border-right:1px solid #d0d0d0;
		}
			
		#header #boxLeft a img {
			margin-top:30px;
			border:0px;
			width:110px; 
			height:15px;				
		}
			
		/* ///////////////////////////////////////////////////////////// */
		
		#header #metanavigation {
			float:left;
			width:841px;
			height:75px;
		}
		
		#header	#wrapper #metanavigation ul {
			margin: 0px;
			padding: 0px;
			padding-right:9px;
			padding-left:5px;
			padding-top:30px;
			white-space: nowrap;
		}
		
		#header	#wrapper #metanavigation ul#utilitiesLeft {
			float:left;
		}
		
		#header	#wrapper #metanavigation ul#utilitiesRight {
			float:right;
		}
		
		#header	#wrapper #metanavigation ul li {
			display:inline;
			list-style-type: none;
		}
		#header	#wrapper #metanavigation ul li.leftlined {
			border-left:1px solid #919191;
		}
		
		#header	#wrapper #metanavigation ul li a {
			color:#919191;
			text-decoration:none;
			margin-left:10px;
			margin-right:6px;
		}
		
		#header	#wrapper #metanavigation ul li a:hover {
			color:#ff3300;
		}
		
		#header	#wrapper #metanavigation ul li a:active {
			color:#ff3300;
		}		
		
		#header	#wrapper #metanavigation ul#utilitiesRight li a {
			margin-left:6px;
			margin-right:5px;
		}
		
		#header	#wrapper #metanavigation ul#utilitiesRight li.leftlined {
			padding-left:9px;
		}		
		
		
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */

		#printheader {
			display:none;
		}
	
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
				
	#headvisual {
		height: 75px;
		background-color: #efefef;
		border-bottom: 1px solid #d0d0d0;
	}
	
		#headvisual #Left {
			float:left;
			width:180px;
			
			text-align:center;
			
			font-size:20px;
			color:#919191;		
		}
		
		#headvisual #Left span.wwwCatalogLogo {
			position:relative;
			top:25px;
		}  

		#headvisual #Right {
			float:right;
		}
		
		#headvisual #Right img {
			border:0px;
			width:841px; 
			height:75px;
		}	
		
		#headvisual #lineWrapper {
			position:relative;
		}
		
		#headvisual #lineWrapper #lines {
			position:absolute;
			left:180px;
			width:841px;
			height:75px;
			border-left:1px solid #d0d0d0;
		}
		

	
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */

	#sidebar {
		position: absolute;
		width:180px;
		height:auto;
		left: 0px;
		border-right:1px solid #d0d0d0;
		background-color:#efefef;
	}	
	
	/* ******************************************************* */
	/* navigation */	
	#sidebar #navigation {
		background:#666;
		background-color:#efefef;
	}
	
	/* ******************************************************* */
	/* level 1 */
	#sidebar #navigation ul {
		margin:0px;
		padding:0px;
	}
	
	#sidebar #navigation ul#level1 {
/* 		border-top:1px solid #efefef; */
	}
	
	#sidebar #navigation ul#level1 li {
		border-top:1px solid #ffffff;
		background-color:#efefef;
		list-style:none;
	}
		
	#sidebar #navigation ul#level1 li a {
		display:block;
		height:auto !important;
        height:16px;/*MAQ for ie		 */
		min-height:16px;
		
		padding-left:15px;
		padding-top:2px;
		
		color:#000000;
		background-color:#efefef;
		border-bottom:1px solid #d0d0d0;
	}
	
	#sidebar #navigation ul#level1 li a:hover {
		color:#000000;
		background-color:#d7d7d7;
	}
	
	#sidebar #navigation ul#level1 li a.active, #sidebar #navigation ul#level1 li a.active:hover {
		color:#ffffff;
		font-weight:bold;
		background-color:#0081C4;
	}
	
	/* ******************************************************* */
	/* level 2 */
	#sidebar #navigation ul#level2 {
		border:none;
	}
	
	#sidebar #navigation ul#level2 li {
		background-color:#ffffff;
	}
	
	#sidebar #navigation ul#level2 li a {
		color:#626262;
		background-color:#ffffff;
		border-bottom:1px solid #ffffff;
	}
	
	/* BEGIN last item on level 2 trick */
	#sidebar #navigation ul#level1 li.last2 {
		margin:0px;
		padding:0px;
		border:none;
		height:1px;
		font-size:0px;
		line-height:0px;
		background-color:#efefef;
		margin-top:-1px;
	}

	#sidebar #navigation ul#level1 li.last1 {
		background-color:#efefef;
		border-bottom:none;
	}
	
	/* END last item on level 2 trick */
	
	#sidebar #navigation ul#level2 li a:hover {
		color:#ff3300;
		background-color:#ffffff;
	}
	
	#sidebar #navigation ul#level2 li a.active, #sidebar #navigation ul#level2 li a.active:hover {
		color:#0081c4;
		font-weight:normal;
		background-color:#d9ecf6;
	}

	/* ******************************************************* */
	/* level 3 */
	
	#sidebar #navigation ul#level3 {
		border:none;
	}
	
	#sidebar #navigation ul#level3 li a {
		padding-left:30px;
		color:#626262;
	}
	
	#sidebar #navigation ul#level3 li a:hover {
		color:#ff3300;
	}
	
	#sidebar #navigation ul#level3 li a.active, #sidebar #navigation ul#level3 li a.active:hover {
		background-color:#ffffff;
		color:#0081c4;	
	}
	
	/* **************************** */
	
	/* ******************************************************* */
	/* search */	
	#sidebar #top {
		background-color:#efefef;
		margin-top:50px;		
		border-bottom: 1px solid #d0d0d0;
	}	


/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
	h1, h2, h3, h4, h5, h6 {
		padding:0px;
		margin:0px;
		font-weight:normal;
	}
	
	#content {
		margin-left:182px;
		padding-left:20px;
		padding-right:20px;
		padding-top:20px;
		width:800px;
		height:auto;
		color:#000000;
	}
	
		#content h1 {
			position:relative;
			left:-2px;	/*big font position corr */
			font-size:20px;
			color:#0081C4;
			margin-bottom:20px;
		}
			#content h1 span.subTitle {
				display:block;
				font-size:20px;
				color:#919191;
			}
			
		#content h2 {
			position:relative;
			left:-2px;	/*big font position corr */
			font-size:20px;
			color:#919191;
			margin-bottom:20px;
		}
				
		#content h3 {
			display:block;
			margin-bottom:20px;
				
			font-size:11px;
			font-weight: bold;
			color: #626262;
		}
			
		#content h4 {
			color:#000000;
			font-size:11px;
			font-weight:bold;
		}
			
		#content hr {
			display:block;
				
			height: 1px;
			border:none;
			border-bottom: 1px solid #d0d0d0;
				
			margin:0px !important;	/* ie hr hack part I */
			margin: -7px 0px;		/* ie hr hack part II */
		}
		
		#content a.linklist {
			display:block;
			position:relative;	/* move 1 down ...*/
			float:left;
			top:1px;
			margin-top:-1px;	/* and back again 1 up -> no double border lines */
				
			border-top:1px solid #d0d0d0;
			border-bottom:1px solid #d0d0d0;
			padding-top:1px;
			padding-bottom:2px;
		}

		#content #morePages a.linklist {
			margin-top:7px;	
			}

		#content a.linklistshort {
			display:block;
			position:relative;	/* move 1 down ...*/
			float:left;
			top:1px;
			margin-top:-1px;	/* and back again 1 up -> no double border lines */
			width:auto;
				
			border-top:1px solid #d0d0d0;
			border-bottom:1px solid #d0d0d0;
			padding-top:1px;
			padding-bottom:2px;
		}		

		#content a.linklistShortRight {
			display:block;
			position:relative;	/* move 1 down ...*/
			float:right;
			top:1px;
			margin-top:-1px;	/* and back again 1 up -> no double border lines */
			width:auto;
				
			border-top:1px solid #d0d0d0;
			border-bottom:1px solid #d0d0d0;
			padding-top:1px;
			padding-bottom:2px;
		}	
				
		#content #titleBox {
			background-color:#ffffff;
			padding-top:2px;
			margin-bottom:10px;
		}
		
		#content #titleBox .title {
			font-size:16px;
			font-weight:bold;
			color:#0081C4;
			margin-bottom:13px;	
		}
				
		#content #titleBox .description {
			font-size:11px;
			font-weight: normal;
			color: #000000;
			margin-bottom:7px;				
		}
		
		#content #titleBox .download {
			font-size:11px;
			font-weight: normal;
			color: #000000;
		}


/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */	
	
	#morePages {	
		float:left;
		text-align:center;
		margin-left:196px;
		display:inline;
		color:#ffffff;
	}
		
	#morePages .startEndPage{
		float:left;	
		width:20px;				
	}	
		
	#morePages .nextPage{
		float:left;	
		width:20px;	
		margin-left:20px;
		margin-right:20px;
	}	
	
	#morePages .page{
		float:left;	
		width:auto;	
		padding-left:4px;
		padding-top:10px;	
	}	
	
	#morePages .pageActive{
		float:left;	
		width:10px;		
		padding-left:4px;
		padding-top:10px;		
		font-weight:bold;
	}		
	
	
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */
	
	#footer {
		border-top: 1px solid #d0d0d0;
		border-bottom: 1px solid #d0d0d0;
		padding-top:1px;
		height:16px;

	}
	#footer div.left {
		float:left;
	}

	#footer div.left a {
		color:#919191;
		text-decoration:none;
	}
		
	#footer div.left a:hover {
		color:#ff3300;
	}
		
	#footer div.left a:active {
		color:#ff3300;
	}	
	
	#footer div.right {
		float:right;
	}
	
	#footer a.print {
		padding-left:17px;
		margin-left:15px;
		color:#919191;
		text-decoration:none;
	}
	
	#footer a.print:hover {
		color:#ff3300;
	}
		
	#footer a.print:active {
		color:#ff3300;
	}	
	
	#copyright {
		margin-top:2px;
		color:#919191;
	}
	
	#copyright a {
		color:#919191;
		text-decoration:none;
	}
	
	#copyright a:visited {
		color:#919191;
		text-decoration:none;
	}
	
	#copyright a:active {
		color:#919191;
		text-decoration:none;
	}	

	#copyright a:hover {
		color:#ff3300;
	}

	
/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */

div.spacer5 {
	clear:both !important;
	height: 5px;
}

div.spacer10 {
	clear:both !important;
	height: 10px;
}

div.spacer20 {
	clear:both !important;
	height: 20px;
}

div.spacer30 {
	clear:both !important;
	height: 30px;
}

div.spacer40 {
	clear:both !important;
	height: 40px;
}

div.spacer46 {
	clear:both !important;
	height: 46px;
}


/* ///////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////// */

#line75, #line151  {
	position:absolute;
	left:0px;
	width:100%;
	height:1px;
	border-top: 1px solid #d0d0d0;
	z-index:1;
}

#line75 {
	top:75px;
}

#line151 {
	top:151px;
}