
@import "compass";
@import "compass/css3";
@import "compass/css3/user-interface";
@import "_normalize";


$color1: #003e2d;

$speedFast: .2s;
$speedNormal: .5s;
$speedSlow: 1s;

$width: 900px;




html{
	height: 100%;
	background: 
		url(../img/bg-pic_links_350x825px_Q60.jpg) calc(100%/2 - 624px) top no-repeat, 
		url(../img/bg-pic_rechts_350x825px_Q60.jpg) calc(100%/2 + 624px) top no-repeat,
		$color1;
body{
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 100%;


	header{
		padding: 10px;
		background: white;
		height: 45px;
		
		.wrapper{
			position: relative;
			width: $width;
			margin: 0 auto;

			.navMeta{
				font-size: 11px;
				margin: 0;
				padding: 0;
				position: absolute;
				left: 10px;
				li{
					list-style: none;
					display: inline-block;
					a{
						text-decoration: none;
						color: grey;
					}
				}
			}

			.logo{
				position: absolute;
				top: 0px;
				right: 10px;
			}
		}

	}
	section{
		width: $width;
		margin: 0 auto;
		background: white;


		.item{
			position: relative;
			width: 270px;	
			background: white;
			padding: 5px;
			text-align: center;	
			float: left;
			margin: 10px;
			color: grey;
			cursor: pointer;
			text-decoration: none;

			&:hover{
				background: #999;
			}
			&:hover .nav{
				display: inline;
			}
			img{
				width: 100%;
				height: auto;
				margin-bottom: 5px;
			}
			span{
				font-size: 12px;
			}
		}
	}

}
}


