/*
	LESS Stylesheet: Vars
	
	Definition of all content elements
	
	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	01.07.11 Firs version
	v0.2	05.07.11 all content elements
	v0.3	06.07.11	Farben und Inhaltselemente definiert
	v0.4	07.07.11	FontSquirrel eingebaut, Weitere Inhaltselemente eingesetzt
	v0.5	12.07.11	@import für Variabeln
	v0.6	05.08.11 Anpassung Formular-Abstände
	v0.7	23.08.11	Boxen-Abstände gesetzt (.infobox) und neue Box eingeführt: links
	v0.8	06.09.11	Anpassungen der Icon-paddings (Fehler in padding-right)
	v0.9  24.02.12	Anpassungen an bechterew
	v0.10	13.03.12 Adaption for WLRC
-------------------------------------------------------------------------------*/

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

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



/* Definition Links */
a {
	&:link, &:visited {
		color:@link-active;
		text-decoration:none;
	}
	
	&:hover, &:active {
		color:@link-hover;
		text-decoration:underline;
	}	
}



/**************************** Content Elements *****************************************/


/* Alles Inhaltsformatierungen */
article {

	.base-textformat();

		
	h1 {
		.base-fontnormal();
		font-size:@fontsize-base*1.4;
		margin:0.8em 0em 1em 0em;
		color:@header1-color;
		line-height: @content-lineheight - 50%;

	}
	
	h2 {
		.base-fontnormal();
		font-size:@fontsize-base*1.2;
		margin:@header-topmargin*2 0em @header-bottommargin*1 0em;
		color:@header2-color;
	
		&.front {
			margin:3em 0em 1em 0em;
			font-size:@fontsize-base*1.8;
		}
	
	}
	
	h3 {
		.base-fontbold();
		line-height:@content-lineheight - 40%;
		font-size:@fontsize-base*1.2;
		margin:0 0em @header-bottommargin*2 0em;
		color:@header3-color;
	}
	
	p {
		.base-textformat();
		margin:@header-topmargin*0 0em @header-bottommargin*2 0em;
	
		&.content-intro {
			margin-bottom:2em;
			font-weight:normal;
			font-size:@fontsize-base*1.1;
			line-height: @content-lineheight - 30%;
		}
	}
	
	/* Error messages / hints */
	.message {	
		.box-border(@boxdefault-color);	
		
		/* error */
		&.error {
			.box-border(@boxerror-color);
		}
		
		/* hint */
		&.hint {
			.box-border(@boxhint-color);
		}
		
		/* success */
		&.okay {
			.box-border(@boxokay-color);
		}
	}
	
}

/************** FORMULARE *******************/
/* Default forms (474px -> content-normal */
form 	{
	font-size:@fontsize-base;

	.message {
		&.error {
			margin-left:0 * @grid-content-normal;
			width:auto;
		}
	}


	.row {
		margin:1em 0em 1em 0em;
		max-width:100%;
		
		
		label {
			float:left;
			width:1 * @grid-content-normal + @grid-unit-content-normal;
			text-align: right;
			margin-right:@grid-gutter-content-normal;
			line-height:@content-lineheight - 20%;
			
			&.checkbox {
				width:auto;
				margin-right:10px;
				float:left;
			}
		}
		
		&.no-label {
			margin-left:2 * @grid-content-normal;
		}
		
		textarea, select {
			.input-border;
			
			&.full {
				width:5 * @grid-content-normal;
				height:5em;
			}
		}
		select.full {
			height:auto;
		}
		
		input {
			.input-border;
			
			&.text {
				
			}
			
			&.large {
				width:5 * @grid-content-normal;
			}
			
			&.small {
				width:2 * @grid-content-normal;
			}
			
			&.checkbox {
				display: inline-block;
    			float:left;
    			margin-right:5px;
    			margin-top:2px;
			}
			
			&.submit {
				color:@white;
				border:none;
				background-color: @active-color;
				padding:0.2em;
				margin-left:2* @grid-content-normal;
			}
			
			&:focus {
				.input-focus;
			}
			
		}
		
		div.checkbox {
			width:auto;
			
			label {
				text-align:left;
			}
			
			div {
				clear:both;
				float:none;
			}
		}

		
		.tipp {
			display:block;
			font-size:@fontsize-base * 0.8;
			color:lighten(@content-color, 10%);
			margin-left:2 * @grid-content-normal;
		}
		
		.requiredtext {
			color:@error-color;
			margin-left:2 * @grid-content-normal;
			margin-top:1em;
			margin-bottom:0.2em;
			line-height:1;
		}
		
		.required {
			border:1px solid @error-color;
		}
			
		.rows {
			display: inline-block;
    		float: left;
    		margin-top: -1px;
    		width: 36.70%;
		}
	}
			
}

/**************** END FORMULARE ***************/

/****************** IMAGES ***********************/
.image {
	margin:1em @gutter-article 2em 0em;
	float: left;
	width: 4 * (@grid-article + @gutter-article) + @grid-article;
	border:1px solid @box-border-color;
	.box-shadow();
	.rounded-corners(10px);
	background-color: @megadropdown-color;
	padding:0.6%;	
	
	
	&.caption {
		margin-bottom:2em;
		
		.imgcaption {
			.background-icon(3px, 0px);
			background-image: url(../images/icons/helper_image.png);
			
			p {
				font-family:@font-sans;
				font-size:@fontsize-base * 0.6;
				line-height:@content-lineheight - 30%;
				padding:0;
				margin-left:32px;
			}
			
		}

		
		
	}
	img {
			max-width:100%;
			height:auto;
			margin-bottom:0.5em;
			.rounded-corners(10px);
	}
	

}


/***************** END IMAGES *******************/

/***************** LISTS ***********************/
article {
	ul, ol {
		list-style-image:url(../images/bullet_content.gif);
		margin:1em 0em 1em 2em;
		
		
		&.nobullet {
			list-style-image: none;
		}
		
		li {
			margin:0em @grid-content-normal 0.8em 0.5em;	
			line-height: @content-lineheight - 30%;
		}
	}
	ol {
		list-style-image: none;
	}
}

/***************** END LISTEN *******************/

/***************** START SEARCHRESULTS ***********/
#search-results {
	font-size:@fontsize-base;

	.result-title {
		margin-top:2em;
	}
	
	.result-text {
		line-height:@content-lineheight - 30%;
	}
	
	.search-pagination {
		margin-top:2em;
	}
}

/***************** END SEARCHRESULTS *************/



/***************** START TABLES *******************/
article {
	table {
		width:100%;
		tr {
			th, td {
				padding:0.4em 0.4em 0.4em 0.4em;
				text-align: left;
				border-bottom:2px solid lighten(@content-color,0%);
				line-height:@content-lineheight - 30%;
			}
			
			th {
				padding-bottom:0em;
				img {
					
				}
			}
			td {
				border-bottom:1px solid lighten(@content-color,40%);
			}
		
		}
		
		
	}
}


/**************** END TABELLEN ***************/

/**************** ICONS **********************/
.icon {
	.background-icon(0px, 0px);
   height: 16px;
   padding: 0 0px 0 0px;
	width:16px;
   
	&.markrequired:before {
		content: url(../images/icons/icon_required.gif);
		
	}
	
	&.markrequired {
		font-size:0px;
	}
	
	&.top {
		background-image: url(../images/icon_top.gif);
		padding-left:16px;
		width:13px;
	}
	
	&.home {
		background-image: url(../images/icon_back.gif);
		padding-left:16px;
	}
	
	
	&.download {
		background-image: url(../images/icon_document.gif);
		padding-left:16px;
	}
	
	&.more {
		background-image:url(../images/bullet_content.gif);
		padding-left:16px;
	}
	
}


/**************** END ICONS **********************/



/**************** INFOBOXEN IM CONTENT **********************/
article {
	.infobox {
	
	}
}


/**************** END INFOBOXEN IM CONTENT **********************/

/***************** START YOUTUBE VIDEO **********************/
.player-border {
	border:1px solid @box-border-color;
	background-color: @megadropdown-color;
	width:auto;	
	padding:2%;	
	
	.youtube-player {
		width:100%;
	}
}

/***************** END YOUTUBE VIDEO ***********************/

/*************** START SITEMAP **************************/
article {
	#xmap {
		ul {
			list-style-image: none;
			margin:0em 0em 1em 0em;
		
			li {
				margin:0;
				a {
					background-image:none;
				}
			}
		
						
									
			&.level_0 {
				li {
					.base-fontnormal();
					font-size:@fontsize-base * 1;
					
					
					.level_1 {					
						margin-top:1em;
						li {
							margin:0;
							font-size:@fontsize-base * 1.2;
							background-image:url(../images/separation_horiz.gif);
							background-position: top;
							background-repeat: repeat-x;
							li {
								background-image: none;
								font-size:@fontsize-base * 0.75;
								
								li {
									font-size:@fontsize-base * 0.8;
									margin:0em 0em 0em 1em;
									li {
										font-size:@fontsize-base * 1;	
									}
								}

							}
						}
					}
				
				}
			}
		
		}
	}
}



/*************** END SITEMAP *********************/