@charset 'utf-8';
@import url("reset.css");

@media screen {

body {
	width:100%;
	background-color:#999999;
	background-image: url(../img/noise.gif);
	font-family:katarine-web-1, katarine light ce, arial narrow, arial, sans-serif;
	color:white;
	letter-spacing:2px;
	text-rendering:optimizeLegibility;
	font-weight:100;
	line-height:24px;
	font-size:18px;
	
}
	
h1 {
	font-size:30px;
	line-height:40px;
	padding-top:20px;
	padding-bottom:20px;
	max-width:760px;
}

h2{
	text-transform:uppercase;
	font-size:18px;
	clear:both;
	padding-top:10px;
	padding-bottom:10px;

}

h3{
	text-transform:uppercase;
	font-size:18px;
	clear:both;
	padding-top:10px;
	padding-bottom:10px;

}


a {
	text-decoration:none;
	color:white;
}

hr {
	clear:both;
	border-color:white;
	border-style:solid;
	border-top-width:2px;
	border-left-width:0px;
	border-right-width:0px;
	border-bottom-width:0px;
	opacity: 0.10; /* Webkit und Opera  */
	-moz-opacity: 0.10; /* Mozilla Browser */
	filter:alpha(opacity=10); /* Internet Explorer */
}

#container{
	background-image: url(../img/top-grafik.gif);
	background-repeat: no-repeat; 
	background-position:-20% 0px;
	
}

#container2{
	background-image: url(../img/top-grafik.gif);
	background-repeat: no-repeat; 
	background-position:top right;
	
}

#header{
	clear:both;
	width:840px;
	padding-right:30px;
	padding-left:70px;
	margin-left:auto;
	margin-right:auto;	
	line-height:35px;
}
	
#header ul{
	position:relative;
	left:-15px;
}
	
#header ul li{
	float:left;
	text-transform:uppercase;
	font-size:18px;
	margin-left:15px;
	margin-right:15px;
	margin-top:40px;
	margin-bottom:40px;
}


#header a{
	font-size:18px;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;

}

#header a:hover{
	color:#7a7a7a;
	
	-webkit-transition-property: color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
}

#header a #home{
	padding-right:0px;
	padding-top:5px;
	padding-left:75px;
	overflow:hidden;
	background:url(../img/mr-logo-2.png) 0px -44px no-repeat;
}

/* Windows Font Metrics Correction */
.win #header a{ 
	padding-top:0px;
}
.win #header a #home{
	padding-top:0px;
}
/************************************/

#header a:hover #home{
	background:url(../img/mr-logo-2.png) 0px 0px no-repeat;
}

#header .active a{
	color:#7a7a7a;
	background-color:white;
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
}

#header .active a #home{
	background:url(../img/mr-logo-2.png) 0px 0px no-repeat;
}

#header .active a:hover #home{
	background:url(../img/mr-logo-2.png) 0px -44px no-repeat;
}

#header .active a:hover{
	color:white;
	background-color:#7a7a7a;
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
	
	-webkit-transition-property: color, background-color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color, background-color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color, background-color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
}
	
#content{
	clear:both;
	width:840px;
	padding-right:30px;
	padding-left:70px;
	margin-left:auto;
	margin-right:auto;	
	padding-top:10px;
	padding-bottom:0px;
	
}
	
#content h1 a{
	text-transform:uppercase;
	font-size:16px;
	color:#7a7a7a;
	background-color:white;
	padding-left:5px;
	padding-right:5px;
	padding-top:4px;
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
	
	-webkit-transition-property: color, background-color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color, background-color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color, background-color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
    
   	position:relative;
	top:-2px;
}

/* Windows Font Metrics Correction */
.win #content h1 a{ 
	padding-top:0px;
}
/************************************/


#content h1 a:hover{
	color:white;
	background-color:#7a7a7a;
}

#content h2{
	padding-top:20px;
	padding-bottom:20px;
}


#content ul{
	line-height:24px;
	margin-top:20px;
	margin-bottom:20px;
}

#content h1 .back a,
#content a{
	text-transform:uppercase;
	font-size:14px;
	color:#7a7a7a;
	background-color:white;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
	
	-webkit-transition-property: color, background-color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color, background-color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color, background-color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
}

/* Windows Font Metrics Correction */
.win #content h1 .back a,
.win #content a{ 
	padding-top:0px;
}
/************************************/

#content h1 .back a:hover,
#content a:hover{
	color:white;
	background-color:#7a7a7a;
}

#content p{
	max-width:520px;
	clear:both;
	margin-bottom:20px;
	margin-top:20px;
}


#content ol{
	list-style:decimal outside;
}

#content ol li{
	margin-bottom:30px;
	vertical-align:top;
	padding-top:20px;
	padding-left:15Px;
	position:relative;
	left:-15Px;
}

#content ol li .slide-round{
	display:inline-block;
	border-style:solid;
	border-color:#7a7a7a;
	border-color:rgba(120,120,120,0.8);
	border-width:1px;
	-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	-moz-border-radius-topleft:4px; 
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px; 
	-webkit-border-top-left-radius:4px;
	overflow:hidden;
	margin-top:0px;
	vertical-align:top;
}

#content ol li .slide{
	display:inline-block;
	border-style:solid;
	border-color:#7a7a7a;
	border-color:rgba(120,120,120,0.8);
	border-width:1px;
	overflow:hidden;
	margin-top:0px;
	vertical-align:top;
	-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
}

#content img,
#content object{
	border-style:solid;
	border-color:#7a7a7a;
	border-color:rgba(120,120,120,0.8);
	border-width:1px;
	-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	margin-top:0px;
	vertical-align:top;
	margin-top:0px;
}

#content .imgflowright{
	width:200px; 
	float:right; 
	margin:0px 30px 30px 30px;
	margin-right:-250px;
	overflow:hidden;
}


#footer{
	clear:both;
	width:840px;
	padding-left:70px;
	padding-right:20px;
	margin-left:auto;
	margin-right:auto;	
	padding-top:20px;
	margin-bottom:20px;
	line-height:24px;
	text-transform:uppercase;
	font-size:16px;
}

#footer ul{
	padding-top:15px;
	padding-bottom:15px;	
}

#footer img{
	width:156px;
	border-style:solid;
	border-color:#7a7a7a;
	border-color:rgba(120,120,120,0.8);
	border-width:1px;
	-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
}

#footer #teaser a:hover img{
	width:156px;
	border-color:#999999;
	border-color:rgba(120,120,120,0.8);
	-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

#footer #teaser a{
	width:156px;
	height:156px;
	padding:26px;
	position:relative;
	left:-26px;
	top:0px;
	float:left;
	-webkit-transition-property: color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: border, color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: border, color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
}

#footer #teaser a:hover{
	background-color:#999999;
	background-color:rgba(122,122,122,0.2);
	padding:26px;
	color:white;
	-moz-border-radius:3px; 
	-webkit-border-radius:3px;
	
}

#footer #teaser .active a{
	background-color:#888888;
	background-color:rgba(122,122,122,0.5);
	padding:26px;
	left:-26px;
	float:left;
	color:white;
	-moz-border-radius:3px; 
	-webkit-border-radius:3px;
}

#footer #teaser a .text{
	position:absolute;
	font-size:14px;
	right:31px;
	bottom:26px;
	text-align:right;

}

#footer #list-complete a,
#footer #meta a {
	padding-top:5px;
	padding-bottom:5px;
	
	-webkit-transition-property: color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
	
}

#footer #list-complete a:hover,
#footer #meta a:hover{
	color:#7a7a7a;
	position:relative;
	left:-15px;
	padding-left:15px;
	background: url(../img/circle-grey.png) 0 center no-repeat;
	
}

#footer #list-complete .active a,
#footer #meta .active a{
	color:white;
	position:relative;
	left:-15px;
	padding-left:15px;
	background: url(../img/circle-white.png) 0 center no-repeat;
	
}


#footer #list-toggle{
	text-transform:uppercase;
	line-height:60px;
	font-size:14px;
	color:#7a7a7a;
	background-color:white;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
	
	-webkit-transition-property: color, background-color; /* Chrome + Safari - properties to animate */
    -webkit-transition-duration: .1s; /* Chrome + Safari - animation duration */
    -webkit-transition-timing-function: linear; /* Chrome + Safari - animation easing */
    -moz-transition-property: color, background-color; /* future-proofing for Firefox 3.7 */
    -moz-transition-duration: .1s;
    -moz-transition-timing-function: linear;
    -o-transition-property: color, background-color; /* for Opera 10.5 */
    -o-transition-duration: .1s;
    -o-transition-timing-function: linear;
	
}

/* Windows Font Metrics Correction */
.win #footer #list-toggle{ 
	padding-top:0px;
}
/************************************/

.clear{
	clear:both;
}

#footer #list-toggle:hover{
	color:white;
	background-color: #7a7a7a;
	
}


#footer #list-complete h2 {
	padding-top:20px;
}

#footer #list-complete h3 {
	margin-bottom:-48px;
	margin-left:-45px;
	overflow:hidden;
	
}

#footer #meta{
	line-height:40px;
	margin-top:0px;
	clear:both;
}

#footer #meta a {
	
	color:#8a8a8a;
}

#footer .hrsmall{
	margin:0 0 20px 0;
	padding:0;
	width:30px;
	height:6px;
	clear:both;
	border-color:white;
	border-style:solid;
	border-top-width:1px;
	border-left-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	background-color:white;
	opacity: 1; /* Webkit und Opera  */
	-moz-opacity: 1; /* Mozilla Browser */
	filter:alpha(opacity=100); /* Internet Explorer */
	
	-moz-border-radius:2px; 
	-webkit-border-radius:2px;
	
}
} /* END screen */


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



@media screen and (max-width:800px),
	   (min-device-width:481px) and (orientation:portrait) {

#header,
#content,
#footer{
	width:640px;
}

#content img,
#content object{
	width:572px;
}

#content .imgflowright{
	margin-right:-100px;
	overflow:hidden;
}

} /* END Tablet portrait */


@media screen and (max-width:767px),
	   screen and (max-device-width:480px),
       (max-device-width:480px) and (orientation:landscape) {
       	
#header,
#content,
#footer{
	width:420px;
}

#content img,
#content object{
	width:364px;
}

#content .imgflowright{
	margin-right:0px;
	overflow:hidden;
}

} /* END Smartphone landscape */


@media (max-device-width:480px) and (orientation:portrait) {

} /* END Smartphone portrait */