@charset "UTF-8";
/* CSS Document */

@import url("reset.css");

/*//////////////////////Allgemeine Angaben////////////////////////////*/

body{
	position:relative;

	color:#000;
	background-color:#FFF;
	
	font-family: 'Ubuntu', Helvetica, Verdana, sans-serif;
	font-weight: 400;
	font-size:13px;
	line-height:20px;
}

p{
	padding-bottom:10px;
	width:80%;
}

/*Zentrierung des Inhalts*/

#content{
	position:relative;
	width:960px;
	height:100%;
	margin:40px auto;
	margin-bottom:0px;
}

/*Links*/

a, a:link, a:visited{
	text-decoration:none;
	color:#037096;
}

a:hover, a:active{
	text-decoration:underline;
	
}

/*//////////////////////Seitenleiste////////////////////////////*/

aside{
	position:fixed;
	top:160px;
	width:180px;
	height:450px;
	padding-top:20px;
	padding-bottom:20px;
	
	background-color:#EDEDED;
	border-bottom-left-radius:40px;
	border-top-left-radius:40px;
	
	box-shadow:inset rgba(0,0,0,0.1) -3px 0px 5px;
	-moz-box-shadow:inset rgba(0,0,0,0.1) -3px 0px 5px;
	-webkit-box-shadow:inset rgba(0,0,0,0.1) -3px 0px 5px;
	-o-box-shadow:inset rgba(0,0,0,0.1) -3px 0px 5px;
}

aside img, aside p{
	display:block;
	margin:0 auto;
}

/*Absätze*/

aside p{
	width:75px;
	padding:15px;
	border-top:1px solid #CCCCCC;
	margin-top:20px;
	
	text-align:center;
	font-size:11px;
	line-height:14px;	
}

aside a:hover{
	text-decoration:none;
}

aside a p{
	width:85px;
	margin-top:0;
	padding:0;
	color:#000;
	border:none;
	
	font-size:11px;
	line-height:14px;
}

/*Bilder*/

aside img{
	margin-top:20px;
}

aside img.logo{
	margin-top:0px;
	margin-bottom:30px;
	padding:15px;
	padding-top:5px;
	padding-bottom:20px;
	border-bottom:solid 1px #CCCCCC;
}

aside img.feature{
	margin-top:20px;
	margin-bottom:5px;
	
	border-radius:7px;
	
	box-shadow:rgba(0,0,0,0.7) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
}


/*//////////////////////Kopfbereich+Fußbereich////////////////////////////*/

header, footer{
	position:relative;
	height:80px;
	width:100%;
	background-color:#67A61D;
	background-image:url(../images/gradient.png);
	background-position:center top;
	background-repeat:no-repeat;
}

footer{
	height:30px;
}

header h1{
	display:none;
}

header img{
	display:block;
	margin:0 auto;
}

/*//////////////////////Artikelbereiche////////////////////////////*/

#main{
	position:relative;
	width:680px;
	min-height:900px;
	margin-left:153px;
	padding-left:90px;
	padding-top:20px;
	padding-bottom:40px;
	
	background-image:url(../images/slice.png);
	background-position:top left;
	background-repeat:no-repeat;
	
	z-index:100;
}

article{
	padding-top:20px;
	padding-bottom:20px;
}

/*Überschriften*/

#main h1{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:26px;
	line-height:30px;
	font-weight:bold;
	color:#284D0C;
	padding-bottom:20px;
}

#main article h1{
	width:560px;
	margin-bottom:10px;
	padding-bottom:5px;
	
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	
	color:#12333F;
	border-bottom:1px solid #9FCD35;
	
}

#main a:hover h1{
	text-decoration:none;
}

#main article.en h1{
	color:#999999;
	border-bottom:1px solid #CCCCCC;
}

#main h3{
	width:80%;
	padding-top:30px;
	padding-bottom:5px;
	font-weight:bold;
	font-size:12px;
}

/*Absätze*/

#main article.en p{
	color:#999999;
}

article.clean p{
	padding-bottom:50px;
}

/*Texteinzug*/
article .indent{
	padding-left:150px;
}



/*Bilder*/
article img{
	margin-top:20px;
	margin-right:40px;
	margin-left:10px;
	
	border-radius:30px;
	
	box-shadow:rgba(0,0,0,0.7) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
}

article.tutorial img{
	margin-top:0px;
	margin-right:40px;
	margin-left:10px;
	margin-bottom:40px;
	
	border-radius:0px;
	
	box-shadow:rgba(0,0,0,0.7) 0px 0px 5px;
	-moz-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
	-o-box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;
}

article.clean img{
	
	padding-right:20px;
	padding-bottom:10px;
	padding-top:10px;
	
	border-radius:0px;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	-o-box-shadow:none;
	
	float:left;
}

article ol{
	list-style-type:decimal;
	list-style-position:outside;
	margin-left:20px;
}

article ul{
	margin-bottom:10px;
}

.clear{
	clear:both;
}

/*//////////////////////Maskottchen////////////////////////////*/


#stick img{
	position:fixed;
	bottom:0;
	padding-left:30px;
	z-index:500;
}

@keyframes mark {
	from {
		left:100px;
		width:788px;
	}
	to {
		left:598px;
		width:210px;
	}
}
@-moz-keyframes mark {
	from {
		left:100px;
		width:788px;
	}
	to {
		left:598px;
		width:210px;
	}
}
@-webkit-keyframes mark {
	from {
		left:100px;
		width:788px;
	}
	to {
		left:598px;
		width:210px;
	}
}
@-ms-keyframes mark {
	from {
		left:100px;
		width:788px;
	}
	to {
		left:598px;
		width:210px;
	}
}
@-o-keyframes mark {
	from {
		left:100px;
		width:788px;
	}
	to {
		left:598px;
		width:210px;
	}
}

#mark{
	position:absolute;
	top:-14px;
	left:598px;
	width:210px;
	overflow:hidden;
	z-index:500;
	
	animation-name: mark;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	
	-moz-animation-name: mark;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-out;
	
	-webkit-animation-name: mark;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	
	-ms-animation-name: mark;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function: ease-out;
	
	-o-animation-name: mark;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	-o-animation-timing-function: ease-out;
}

/* @media only screen and (min-width : 320px) and (max-width : 767px) {

	.hide {
		display: none;	
	}


	body {
		font-size: 14px;
        line-height: 22px;
	}

	#main {
		margin-left:10px;
		padding-left:10px;
		background-image:none;
		max-width: 300px;
	}

	article {
		max-width: 300px;
	}

	#main article h1 {
		width: 315px;
	}
} */