/*
	LESS Stylesheet: wide layout rules
	
	Definition of style rules for wide (big screen) presentation
	
	This is a less-stylesheet. If you are familiar with CSS then you will find it easy to work with less.
	Less is a CSS pre-processor. Less rules will be translated by a JavaScript into ordinary CSS rules.
	To learn more about less visit www.lesscss.org
	
	WLRC / © 2012 das.zeichen (www.daszeichen.ch)
	
	v0.1	12.07.11 Erste Version
	v0.2	13.07.11 Header eingebaut
	v0.3	15.07.11	Fat-Footer eingebaut
	v0.4	03.08.11	Megadropdown eingebaut
	v0.5	04.08.11 1-Col Layout (Landingpage eingebaut und Bugfixing)
	v0.6	05.08.11	frontpage Layout (Seitentyp Eingangsseite)
	v0.7	09.08.11	Button als Mixin realisiert
	v0.8	11.08.11	max-width für body eingeführt
	v0.9	23.08.11	Anpassungen gemäss Besprechung Urs
	v0.10	02.09.11 z-index für IE gesetzt, Anpassungen li sidebars
	v0.11	05.09.11 Anpassungen für Breite megadropdown
	v0.12 24.02.12 Anpassungen für bechterew
	v0.13 13.03.12 Adpation for WLRC


-------------------------------------------------------------------------------*/

/* Import all variables */
@import "vars";

/* Import all mixins */
@import "mixins";


/*********************** WRAPPER ****************************/
.wrapper {
	position:relative;
	margin:0;
	top:0px;
	z-index:10;
}

	
/*********************** HEADER OF PAGE *********************/
#header-wrapper {
	width:100%;
	height:301px;
	background-image: url(../images/horizontal_2bw2.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	position:relative;
	
	#header-stripe {
		position:absolute;
		top:253px;
		height:47px;
		width:100%;
		border-top:2px solid @black;
	}
}

#header-page {
	background-color: @white;
	position:relative;
	top:0px;
	left:2%;
	height:300px;
	max-width:@layout-width;
	font-size:@fontsize-base * 0.9;
	font-family: @font-sans;
	
	#header-image {
		width:@grid-content;
		height:300px;
		top:0px;
		margin-left:2*@grid-gutter + @grid-right-col;
		position:relative;
		overflow:hidden;
		
		img {
			height:300px;
			width:650px;
			max-width:none;
		}
		
		#header-image-transparent {
			position:absolute;
			top:253px;
			width:100%;
			height:47px;
			background-color: @white;
			.transparent;
		}
	}	
		
	
	/* Logo */
	#main-logo {
		width:216px;
		position:absolute;
		left:20px;
		top:27px;
	}	
	
}
/*********************** ENDE HEADER OF PAGE ******************/



/***************** MAIN NAVIGATION *******************/
	#mainnav {
		width:@grid-content;
		height:47px;
		position:absolute;
		margin-left:2*@grid-gutter + @grid-right-col;
		top:252px;
		
		/* Definition Links */
		a {
			&:link, &:visited {
				color:@content-color;
				text-decoration:none;
			}
	
			&:hover, &:active {
				text-decoration:none;
				background-color: @megadropdown-color;
				color:@white;
			}	
		}

	
		ul#menu-root {
			margin:0;
			position:relative;
			width:100%;
			
				
			li {
				padding:0;
				margin:0;
				float:left;
				width: @gutter-content-box + @grid-content-box;
				font-size:@fontsize-base * 1.1;
				
				
				a {
					width:auto;
					margin-top:1px;
					padding:8px 4px 8px 4px;
					height:31px;
					display:block;
					.base-fontnormal();
					font-size:@fontsize-base *1.1;
					line-height:@content-lineheight - 50%;
					
				}
				

					
				&.current, &.active {
					> a {
						background-color:@megadropdown-color;
						color:@white;
					}	
				}

				/**** START Submenu or Megadropdown ****/
				.sub { 
					position: absolute; /*--Important--*/
					margin-top:0px;
					margin-left:0px;
					background-color: @megadropdown-color;
					padding: 10px 10px 10px 10px;
					float: left;
					display: none; /*--Hidden for those with js turned off--*/				
					z-index:50;
					width:3*(@grid-content-box) !important;
					
					
					a {
						float: none;
						text-indent: 0; /*--Override text-indent from parent list item--*/
						height: auto; /*--Override height from parent list item--*/
						padding:0.3em 0em 0.5em 0px;
						display: block;
						border:none;
						text-decoration: none;
						color: @white;
						font-size:@fontsize-base * 1;
						.base-fontnormal;
	
							
						&:hover {
							color:@white;
							text-decoration: underline;
							background-color:@megadropdown-color;
						}
					}
					
					.current, .active {
						> a {
							text-decoration: underline;
						}	
					}
					
					
										
					ul.menu-level-1 {
					
						li {	
							margin: 0px 10px 0.5em 0px; 
							padding: 0;
							width: 150px;
							float: left;
							z-index:99999;
							height:auto;
							background-image: none;
							
							a {
						 		font-size:@fontsize-base * 0.9;
						 		.base-fontbold;
						 	}
							
							
							
							ul.menu-level-2 {
								li {
									margin:0em 0em 0.6em 0em;
									a {
										padding:0;
										background:none;
										.base-fontnormal;	
										font-size:@fontsize-base * 0.8;
									}
								
									ul.menu-level-3 {
										li {
											margin:0.3em 0em 0em 0.5em;
											a {
												padding:0;
												font-size:@fontsize-base * 0.7;	
											}
											
										}
									
										
									}
								}
								
							}									
						
						}	
					
					}
					
				}
				
				/**** ENDE MEGADROPDOWN **/		
			
			}
			
			/* Positioning corrections for the last two menus in the megadropdown */
			#mnu4, #mnu5 {
				.sub {
					margin-left:-2*(@grid-content-box) - @gutter-content-box !important;
				}
			}
			
		}
	}
/***************** END MAIN NAVIGATION *******************/	

/**************** MIDDLE WRAPPER ************************/
#middle-wrapper {
	margin-left:2%;
	max-width:950px;
}
/***************** END MIDDLE WRAPPER ******************/

/***************** SERVICENAVIGATION *******************/
#servicenav {
	text-align:right;
	font-size:@fontsize-base * 0.8;
	
	.nav-separator {
		margin:0px 5px 0px 5px;
	}
	
}


/***************** END SERVICENAVIGATION **************/


/***************** SUB NAVIGATION RIGHT COLUMN ************/
#nav-col {
	position:relative;
	float:left;
	width:@grid-reduced*2 + 4*@gutter-reduced;
	margin-left:@gutter-reduced*2;
	
	/* formatting of subnavigation tree */
	#subnavigation {
		padding-right:20px;
	
		/* Definition Links */
		a {
			&:link, &:visited {
				color:@content-color;
				text-decoration:none;
			}
	
			&:hover, &:active {
				text-decoration:underline;
				color: @active-color;
				background-position:0px -9px !important;
			}	
			
		}
		
		ul {
			margin-left:2%;
			line-height: @content-lineheight - 40%;
		
			li {
				font-size:@fontsize-base * 1.3;
				margin-top:0.5em;
				margin-bottom:0.8em;
			
				ul.menu-level-1 {
					margin:0;
					li {
						font-size:@fontsize-base * 0.7;
						
						ul.menu-level-2 {
							li {
								font-size:@fontsize-base * 0.8;
								
								a {
									.background-icon(0px, 2px);
									padding-left:10px;
									background-image: url(../images/bullet_menu.gif);
								}
								
								ul.menu-level-3 {
									li {	
										font-size:@fontsize-base * 1;
										margin:0px 0px 0px 5px;
									}

								}
							
							}
						}
					
					}
					
				}
			}
		}
		
	
	
		/* mark the current and active element in the tree */
		.current, .active {
			> a {
				color:@active-color;
				background-position:0px -9px !important;
			}	
		}
		
	}
}

/***************** END SUB NAVIGATION RIGHT COLUMN *********/


/********************** START CONTENT WRAPPER ********************/

#content-wrapper {
	float:left;
	width:@grid-content;
	
	
	/***************** START ARTICLE *************************/
	article {
		
		
	}
	
	/******************* ENDE ARTICLE **************************/
	
}


/*************** START PAGENAV *******************/
#content-pagenav {
	margin-top:3em;
	float:right;
	font-family: @font-sans;
	font-size:@fontsize-base * 0.8;
	
	a {
		.background-icon(0px, -2px);
		display:block;
		width:auto;
		margin-bottom:1em;
		line-height:@content-lineheight - 60%;
	}
}

/*************** ENDE PAGENAV ******************/


/*********************** END CONTENT WRAPPER ***********************/


/*********************** START INFOBOX *****************************/
#content-related-info {
	float:right;
	margin-top:0em;
	width:2 * (@grid-content-box + @gutter-content-box);
	margin-left:2 * @gutter-content-box;	
	font-size:@fontsize-base * 0.8;
	border-top:1px solid @black;
	border-bottom:1px solid @black;
	
	section {
		margin-bottom:3em;
		
		h3 {
			margin-top:0.5em;
			margin-bottom:0.5em;
			line-height:@content-lineheight - 50%;
		}
	
		p {
			line-height:@content-lineheight - 30%;	
			margin:0px 0px 0.5em 0;
		}
		
		.item {
			margin-bottom:2em;
		}
		
		ul {
			li {
				margin:0;
			}
		}
		
	}

	

}



/*********************** ENDE INFOBOX *****************************/

/********************** START FOOTER ******************************/
footer {

	width:100%;
	margin:2.5em 0px 2em 0px;
	border-top:2px solid @black;
	position:relative;
	
	/* start footer wrapper */
	#footer-wrapper {
		max-width:950px;
		margin-left:@grid-gutter;
		position:relative;
	
		#donor-logos {
			position:absolute;
			top:-300px;
			left:2*@gutter-reduced;
			
			img {
				display:block;
				margin:0px 0px 1em 0px;
			}
		}	
	
		#footer-address {
			margin:0.5em 0em 0em 3*@gutter-reduced;
			
		
			p {
				color:@text-outline;
				font-family:@font-sans;
				font-size:@fontsize-base * 0.8em;
				line-height: @content-lineheight - 40%;
			}
		
		}
	
		#nav-disclaimer {
			position:absolute;
			top:0;
			display:block;
			right:0em;
			font-family:@font-sans;
			font-size:@fontsize-base * 0.8em;
			line-height: @content-lineheight - 40%;
		
			span {
				color:@text-outline;
				margin-left:3px;
				margin-right:3px;
			}
		
		}
	
	}
	/* End footer wrapper */
}

/********************** ENDE FOOTER ********************************/

/**************** INTERMEDIA RESPONSIVE DESIGN ********************/
@media screen and (min-width:615px) and (max-width:850px) {
	#header-page {
		margin-left:0 !important;
	}
	#main-logo {
		margin-left:0 !important;
		
		img {
			max-width:80%;
			height:auto;
		}
	}

	#mainnav {
		#menu-root {
			font-size:@fontsize-base * 0.8 !important;

			li {
				margin:0 !important;
				background-position:0px 2px !important;
			
			& #mnu5 {
				margin-bottom:1em !important;
			}	
			}
			
		}
	}
	
	
	footer {	
		
		#nav-disclaimer {
			position:relative !important;
			bottom:0em;
		}
		
		#donor-logos {
			img {
				max-width:216px / 1.3;
				height:auto;
			}
		}
	}
	
	
}
/**************** INTERMEDIA RESPONSIVE DESIGN ********************/