/*
THEME NAME: Ruttiger
THEME URI: http://www.ruttigen.ch
DESCRIPTION: Das Wordpress Theme von ruttigen.ch
VERSION: 1.0
AUTHOR: <a href="http://www.anison.ch">Webdesign-Macher.ch</a>
AUTHOR URI: http://www.anison.ch
*/


@charset "utf-8";

body {
margin:0px auto;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h1 {
color:#22ABDF;
font-size:28px;
font-weight:1500;
}

h2 {
color:#22ABDF;
font-size:25px;
font-weight:1500;
margin-top:0px;
margin-bottom:10px;
max-width:80%;
}

h3 {
color:#22ABDF;
font-size:22px;
font-weight:1500;
}

h4 {
color:#22ABDF;
font-size:18px;
font-weight:1500;
text-transform:uppercase;
margin-bottom:10px;
margin-top:40px;
}

p {
margin-top:0px;
margin-bottom:30px;
}

a  {
color:#52B038;
font-weight:bold;
}

#wrapper {
margin:auto;
width:1378px;
height:auto;
}

#logobox {
float:left;
width:1378px;
height:232px;
text-align:center;
background-image:url(img/logo-bg.png);
background-position:center;
background-repeat:no-repeat;
}

	.logo {
	margin-top:45px;
	}

#videobox {
float:left;
width:1378px;
height:402px;
border-top:5px solid #1FADDD;
}

	.thevideo {
	width:1378px;
	height:402px;
	}
	
	#mobile-slideshow {
	display:none;
	}

#navibox {
float:left;
width:1376px;
height:56px;
background-color:#fff;
border:1px solid #bcbcbc;
margin-bottom:50px;
text-transform:uppercase;
font-size:16.5px;
color:#3E515F;
text-align:center;
cursor:context-menu;
}

	#navibox a {
	text-decoration:none;
	color:#000;
	font-weight:normal;
	cursor:pointer;
	}

	#mobilenav {
	display:none;
	}

	#navi-entry-1{
	float:left;	height:41px;	width:104px;
	padding-top:15px;	border-right:1px solid #bcbcbc;	
	}
		
	#navi-entry-2{
	float:left;	height:41px;	width:128px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	}
		
	#navi-entry-3{
	float:left;	height:41px;	width:129px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	}
	
	#navi-entry-4{
	float:left;	height:41px;	width:125px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	}
	
	#navi-entry-5{
	float:left;	height:41px;	width:242px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	}
	
	#navi-entry-6{
	float:left;	height:41px;	width:212px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	cursor:pointer;
	}
	
	#navi-entry-7{
	float:left;	height:41px;	width:180px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	}
	
	#navi-entry-8{
	float:left;	height:41px;	width:94px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	cursor:pointer;
	}
		
	#navi-entry-9{
	float:left;	height:41px;	width:86px;
	padding-top:15px;	border-right:1px solid #bcbcbc;
	cursor:pointer;
	}
	
	#navi-entry-10{
	float:left;	height:41px; width:67px;	padding-top:15px;
	cursor:pointer;
	}
	
		#navi-entry-1:hover, #navi-entry-2:hover, #navi-entry-3:hover , 
		#navi-entry-4:hover , #navi-entry-5:hover , #navi-entry-6:hover , 
		#navi-entry-7:hover , #navi-entry-8:hover , #navi-entry-9:hover , 
		#navi-entry-10:hover  {
		background-color:#50AF31; color:#fff; 
		}
					
		.nactive{
		background-color:#1FADDD;
		color:#fff;
		}
		
			.nactive a{
			color:#fff;
			}
	
		#dropdown {
		display:none;
		position:absolute;
		margin-top:16px;
		margin-left:-1px;
		text-align:left;
		background-color:#fff;
		border:1px solid #ccc;
		z-index:100;
		color:#3E515F;	
			-webkit-box-shadow: 3px 3px 9px 0px rgba(50, 50, 50, 0.47);
			-moz-box-shadow:    3px 3px 9px 0px rgba(50, 50, 50, 0.47);
			box-shadow:         3px 3px 9px 0px rgba(50, 50, 50, 0.47);
		}
		
			#dropdown ul {
			margin:0px;
			padding:0px;			
			}
			
			#dropdown li {
			padding:15px;
			margin:0px;
			list-style-type: none;	
			border-bottom:1px solid #ccc;			
			}
			
			#dropdown li:last-child{
			border:0px;
			}
			
			#dropdown li:hover {
			background-color:#50AF31;
			color:#fff;			
			}
			
	

	
#content{
float:left;
width:880px;
min-height:300px;
font-size:18px;
margin-right:45px;
}

	#content strong {color:#22ABDF !important}

	.date {
	width:100%;
	display:block;
	float:left;
	margin-bottom:10px;
	}
	
	#listbox {
	float:left;
	width:100%;
	margin-bottom:20px;
	}
	
		#listbox p {
		margin-bottom:20px;
		}
		
		#listbox img {
		
		}
		
	#content img {
	-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	border:1px solid #ccc;
	}
	
	#person {
	float:left;
	width:290px;
	height:400px;
	margin-right:0px;
	margin-bottom:15px;
	max-width:95%;
	}
	
		.name {
		font-weight:bold;
		}
		
		.telefon {
		font-size:16px;
		}

		.email {
		font-size:16px;
		}
		
		.position {
		font-size:16px;
		}

	
	#button {
	color:#fff;
	background-color:#52B038;
	padding:10px;
	font-weight:normal;
	width:200px;
	text-align:center;
	margin-top:10px;
	float:left;
	margin-right:20px;
	}
	
	.img-float-right {
	float:right;
	margin-left:20px;
	margin-bottom:10px;
	-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	border:1px solid #ccc;
	width:300px;
	height:auto;
	}
	
		.img-float-right-2 {
		float:right;
		margin-left:20px;
		margin-bottom:10px;
		margin-top:10px;
		-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		border:1px solid #ccc;		
		}
		
	.img-float-left {
	float:left;
	margin-right:20px;
	margin-bottom:10px;
	-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	border:1px solid #ccc;
	}
	
		.img-float-left-2 {
		float:left;
		margin-right:20px;
		margin-bottom:10px;
		margin-top:10px;
		-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
		border:1px solid #ccc;
		}
	
	.img-full {
	float:left;
	width:98%;
	height:auto;
	-webkit-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 7px 30px -10px rgba(0,0,0,0.75);
	margin-bottom:25px;
	border:1px solid #ccc;
	}
	


	
#sidebarcontainer{
float:left;
width:401px;
}
	
#sidebar{
float:left;
width:401px;
padding:25px;
min-height:100px;
background-color:#F4F4F4;
border:1px solid #BCBCBC;
font-size:18px;
margin-bottom:30px;
}

	.aktuell {
	background-image:url(img/aktuell.png);
	background-position:top right;
	background-repeat:no-repeat;
	}
	
	#news1 {
	max-height:700px;
	overflow-y:auto;
	}
		
	#news2 {
	display:none;
	max-height:700px;
	overflow-y:auto;
	}
	
	#news3 {
	display:none;
	max-height:700px;
	overflow-y:auto;
	}
	
	#sidebar p {
	margin-bottom:10px;
	}
	
	#circles {
	margin-top:20px;
	}
	
	.circle-on {
	float:left;
	width:33px;
	height:33px;
	background-image:url(img/circle-on.png);
	margin-right:20px;
	cursor:pointer;
	}
	
	.circle-off {
	float:left;
	width:33px;
	height:33px;
	background-image:url(img/circle-off.png);
	margin-right:20px;
	cursor:pointer;
	}

#footer{
float:left;
margin-top:90px;
width:100%;
height:auto;
background-color:#f4f4f4;
border-top:1px solid #bbb;
font-size:18px;
padding-bottom:50px;
}

	#footer a {
	font-weight:normal;
	}

	#f-container {
	margin:auto;
	width:1378px;
	height:auto;
	background-color:#000;
	}
	
		#f-entry {
		float:left;
		width:25%;
		height:auto;
		text-align:left;		
		}

#subfooter{
clear:both;
float:left;
width:100%;
height:auto;
background-color:#50AF31;
color:#fff;
text-align:center;
font-size:18px;
padding-top:30px;
padding-bottom:30px;
}


@media only screen and (min-width: 0px) and (max-width: 1395px) {


#wrapper {
width:95%;
}

#logobox {
width:100%;
}

#videobox {
width:100%;
height:auto;
}

	.thevideo {	
	width:100%;
	height:auto;
	}

#navibox {
width:100%;
height:auto;
border:0px;
margin-top:-6px;
margin-left:-3px;
z-index:1000;
}
	
	#navi-entry-1, #navi-entry-2, #navi-entry-3, #navi-entry-4, #navi-entry-5, 
	#navi-entry-6, #navi-entry-7, #navi-entry-8, #navi-entry-9, #navi-entry-10	{	
	border:1px solid #ccc; margin:3px;
	}
	
#content {
width:95%;
margin-bottom:40px;
}

#sidebarcontainer{
width:90%;
}

#sidebar {
width:100%;
margin-bottom:40px;
box-sizing: border-box;
}

#f-container {
width:100%;
}

	#f-entry {
	width:45%;
	height:200px;
	margin-left:30px;
	}
	
}



@media only screen and (min-width: 0px) and (max-width: 830px) {

#navibox {
position:fixed;
left:0px;
top:0px;
overflow-y:scroll;
overflow-x:hidden;
margin:0px;
height:100%;
width:70%;
padding:0px;
text-align:left;
border-right:3px solid #ccc;
display:none;
}

	#mobilenav {
	display:block;
	position:fixed;
	margin-left:-20px;
	border:1px solid #666;
	height:45px;
	width:80px;
	z-index:900;
	}


	#navi-entry-1, #navi-entry-2, #navi-entry-3, #navi-entry-4, #navi-entry-5, 
	#navi-entry-6, #navi-entry-7, #navi-entry-8, #navi-entry-9, #navi-entry-10	{	
	width:100%; margin:0px; border-bottom:1px; padding-left:20px; min-height:41px; height:auto;
	}
	
	

}



@media only screen and (min-width: 0px) and (max-width: 600px) {



h1 {
font-size:23px;
}


#videobox {
margin-bottom:20px;
}

#logobox {
height:auto;
padding-bottom:30px;
}


.logo {
width:60%;
height:auto;
}

.img-float-right, .img-float-right-2, .img-float-left, .img-float-left-2, .img-full    {
width:98%;
margin-left:0px;
margin-right:0px;
float:left;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 0px 00px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 0px 00px rgba(0,0,0,0.75);
}


	#content img {
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	}


#button {
width:98%;
}

.thevideo {
display:none;
}

	#mobile-slideshow { 
	display:block;
	width:100%;
	height:auto;	
	}

	.videoplaceholder {
	width:100%;
	height:auto;
	}
	
}



@media only screen and (min-width: 0px) and (max-width: 390px) {

.logo {
width:80%;
height:auto;
}

	#f-entry { 
	height:auto;
	}

}