@charset 'utf-8';

@import url('reset.css');

body {
	font: normal normal normal 62.5%/1.5em 'Helvetica Neue', Arial, Tahoma, 'Vera Sans', Verdana, sans-serif; /* reset size to 10px */
}

html > body {
	font-size: 10px !important;
}

/* BASIC DEFINITIONS
------------------------------------------------------*/

p {
	margin: 1.5em 0;
}

ul {
	list-style: disc inside;
	margin: 1.5em 0;
}

a {
	color: #a70b16;
}

a:hover {
	text-decoration: none;
}

a:active {
	position: relative;
	top: 1px;
}

/* SITE
------------------------------------------------------*/

#site {
	margin: 40px auto;
	width: 990px;
	background: transparent url("../img/bg-site.png") no-repeat center 144px;
}

/* HEADER
------------------------------------------------------*/

#header {
	float: left;
	width: 940px;
	margin: 0 25px;
	padding: 0 0 36px 0;
	clear: both;
}

/* LOGO
------------------------------------------------------*/

#logo {
	float: left;
}

#claim {
	float: left;
	font-size: 1.8em; /* 18px */
	line-height: 1.33333em; /* 24px */
	font-weight: normal;
	margin: 0 0 0 3em; /* 54px */
	color: #555;
}

#claim h2 {

}

/* META-MENU
------------------------------------------------------*/

#metamenu {
	float: right;
	width: 480px;
	list-style: none;
	margin: 0;
	padding: 0;
}

	#metamenu li {
		display: inline;
	}
	
		#metamenu li a {
			float: left;
			display: block;
			width: 120px;
			text-decoration: none;
			color: #a70b16;
			font-size: 1.2em;
			line-height: 20px;
			text-align: center;
		}
		
		#metamenu li a img {
			margin: 0 1.2em 0 0;
			display: inline;
			position: relative;
			top: 0.4em;
		}


/* MAINMENU
------------------------------------------------------*/

ul#mainmenu {
	float: left;
	clear: both;
	list-style: none;
	margin: 0 1.5em;
	width: 960px;
	background: #f3dfb1 url('../img/bg-navigation.jpg') center top no-repeat;
}

	ul#mainmenu li {
		display: inline;
	}
	
		ul#mainmenu li a {
			float: left;
			display: block;
			height: 3.38888em; /* 61px */
			width: 159px; /* 159px */
			text-align: center;
			font-size: 1.8em;
			line-height: 3.11111em; /* 56px */
			margin: 0;
			text-decoration: none;
			color: #a70b16;
			border-right: 1px solid #fff;
		}
		
		ul#mainmenu li.last a 
		{
			margin: 0;
			border: none;
		}
		
		ul#mainmenu li a:hover, 
		ul#mainmenu li a.active 
		{
			background: #a70b16 url('../img/bg-navTab.jpg') no-repeat center top;
			color: #fff;
		}
		
/* SUBMENU
------------------------------------------------------*/

#submenu {
	clear: both;
	float: left;
	margin: 0 1.5em;
	padding: 0 2em;
	background: url('../img/bg-submenu.jpg') repeat-x;
	width: 92em;
	height: 3.7em;
}

	#submenu li {
		display: inline;
	}
	
		#submenu li a {
			float: left;
			display: block;
			font-size: 16px;
			padding: 0 0 0 5px;
			color: #a70b16;
			height: 21px;
			margin: 7px 5px 0 0;
			background: url('../img/bg-submenuTab-left.jpg') no-repeat left top;
			text-decoration: none;
			text-shadow: 0 1px 0 #ffd4d7;
			line-height: 19px;
		}
		
			#submenu li a span
			{
				background: url('../img/bg-submenuTab-right.jpg') no-repeat right top;
				padding: 0 5px 0 0;
				display: block;
				float: left;
				height: 21px;
			}
		
		#submenu li a:hover,
		#submenu li a.active
		{
			color: #fff;
			background-position: left -21px;
			text-shadow: none;	
		}
		
			#submenu li a:hover span,
			#submenu li a.active span
			{
				background-position: right -21px;
			}
		
	#submenu li.no-submenu p {
		text-indent: -1000em;
		margin: 0;
		padding: 0;
		height: 3.7em;
	}


ul#thirdNavigation
{
	width: 900px;
	margin: 0 15px;
	padding: 0 30px;
	list-style: none;
	background: url('../img/bg-thirdNavigation.jpg') repeat-x;
	clear: both;
	height: 24px;
}

	ul#thirdNavigation li
	{
		display: inline;
	}
	
		ul#thirdNavigation li a
		{
			color: #fff;
			line-height: 23px;
			font-size: 11px;
			text-transform: uppercase;
			margin: 0 15px 0 0;	
		}



/* TEASER
------------------------------------------------------*/

#teaser {
	margin: 0 1.5em;
	clear: both;
	width: 96em;
	min-height: 19.6em;
	height: 19.6em;
	height: auto !important;
	background: #f3dfb1 url("../img/bg-teaser-box-default.jpg") no-repeat top center;
}

#teaser.dachfenster {
	background: #f3dfb1 url("../img/bg-teaser-box-dachfenster.jpg") no-repeat top center;
}

#teaser.dachgauben {
	background: #f3dfb1 url("../img/bg-teaser-box-dachgauben.jpg") no-repeat top center;
}

#teaser.hausbau {
	background: #f3dfb1 url("../img/bg-teaser-box-hausbau.jpg") no-repeat top center;
}

#teaser.solar {
	background: #f3dfb1 url("../img/bg-teaser-box-solar.jpg") no-repeat top center;
}

#teaser.altbausanierung {
	background: #f3dfb1 url("../img/bg-teaser-box-altbausanierung.jpg") no-repeat top center;
}

	#teaser-box {
		background: transparent url("../img/bg-shadow-teaser.png") repeat-x;
		width: 96em;
		height: 19.6em;
	}

	#teaser-content {
		background: transparent url("../img/bg-teaser-content.png") no-repeat top left;
		width: 490px; /* 570px */
		height: 18.85em; /* 196px */
		padding: 0.75em 3.125em 0 1.875em;
		color: #5d242a;
		font: normal normal normal 14px/20px 'Helvetica Neue', Arial, Tahoma, 'Vera Sans', sans-serif;
		margin: 0;
	}
	
		#teaser-content p
		{
			margin: 0 0 10px 0;
		}
	
	
/* HEADLINE
------------------------------------------------------*/

#headline {
	clear: both;
	height: 6.1em;
	color: #fff;
	background: gray;
	margin: 0 1.5em;
	padding: 0 0 0 3em;
}

#headline h1 {
	font-size: 2em;
	line-height: 3em;
	float: left;
}

#smartbar {
	background: #ebebeb;
	float: right;
	width: 34em;
	height: 4.9em;
	margin: 1.2em 3em 0 0;
	padding: 0 2em;
}

	#smartbar p {
		margin: 10px 0 0 0;
		padding: 0;
		font-size: 1.6em;
		line-height: 18px;
		font-weight: bold;
		color: #8a7577;
		width: 310px;
	}

		#smartbar p span.number {
			margin: 0 0 0 1.25em;
			color: #588fde;
			float: right;
		}
	

/* CONTENT
------------------------------------------------------*/

#content {
	clear: both;
	margin: -1.5em 1.5em 0 1.5em;
	background: white url("../img/bg-content.gif") repeat-x;
	min-height: 200px;
	padding: 3.7em 1.9em 40px 3em;
	color: #555;
}

	#content-text {
		float: left;
		width: 48.9em; /* 489px */
	}

	#content-text p {
		margin: 1.5em 0;
		font-size: 1.6em;
		line-height: 1.5em;
	}
	
	#content-text h2 {
		font-style: italic;
		font-weight: bold;
		font-size: 1.6em;
	}
	
	#content ul
	{
		font-size: 16px;
		line-height: 24px;
	}
	
	#content-subcontent {
		float: right;
		border: 1px solid #fff;
		width: 38.2em;
		background: #fbf5e7;
		padding: 1em;
	}

/* GALERIE */
	
	#content-galerie {
		float: right;
		border: 1px solid #fff;
		width: 38.2em;
		background: #fbf5e7;
		padding: 1em;
	}
	
		#content-galerie p {
			margin: 0;
			padding: 0;
		}
	
		/*
		#big-image img {
			width: 37.8em;
			height: auto !important;
			border: 1px solid #fff;
		}
		*/
		
		ul#thumbnails {
			margin: 0;
			padding: 0;
			list-style: none;
			width: 400px;
		}
		
		ul#thumbnails li {
			float: left;
			display: block;
			width: 58px;
			margin: 10px;
			position: relative;
			text-align: center;
			left: -8px;
		}
		
			#content-galerie li img {
				border: 1px solid #fff;
				cursor: pointer;
			}
			
			#content-galerie li img.active
			{
				border: 1px solid #333;
			}
			
			
		/* NEW GALLERY
		------------------------------------------------------*/
		
		#image_wrap
		{
			width: 380px;
			text-align: center;
		}
		
		#image_wrap img		
		{
			width: auto !important;
			width: 378px;
			height: 233px !important;
			border: 1px solid #fff;
		}
			

/* KONTAKT */

fieldset#kontaktformular {
	
}

	fieldset#kontaktformular legend {
		display: none;
	}
	
		fieldset#kontaktformular p label 
		{
			display: block;
			float: left;
			width: 10em;
			text-align: right;
			margin: 0 1.5em 0 0;
		}
	
			fieldset#kontaktformular p label span.kontaktSubLabel
			{
				font: normal normal normal 10px/13px 'Helvetica Neue', Arial, Tahoma, 'Vera Sans', Verdana, sans-serif !important;
				display: block;
			}
	
	fieldset#kontaktformular input {
		font: normal normal normal 1em/1.5em "Helvetica Neue", Arial, Tahoma, "Vera Sans", Verdana, sans-serif;
		padding: 0 0.5em;
		display: block;
		width: 17em;
		margin: 0;
	}
	
	fieldset#kontaktformular textarea {
		width: 17em;
		height: 9em;
		padding: 0 0.5em;
		margin: 0;
		font: normal normal normal 1em/1.5em "Helvetica Neue", Arial, Tahoma, "Vera Sans", Verdana, sans-serif;
		overflow: auto;
	}
	
	fieldset#kontaktformular input#senden {
		margin: 0 11.5em;
		width: 6em;
	}

p.vcard {
	font-size: 1.4em;
	line-height: 1.5em;
}

	p.vcard span.org {
		font-weight: bold;
	}
	
	
/* SUBCONTENT - SIDEBAR
------------------------------------------------------*/
#subcontent {
	float: right;
	width: 40.2em;
}

.subcontent-sidebar {
	padding: 0 1em;	
}

	.subcontent-sidebar h2 {
		font-size: 1.6em;
		padding: 0;
		margin: 0 0 -1.5em 0;
		height: 2em;
		font-style: italic;
	}
	
	.subcontent-sidebar p {
		font-size: 1.2em;
		line-height: 1.5em;
	}
	
	.subcontent-sidebar p img {
		float: right;
		margin: 0 0 0 1.5em;
	}


/* SITEMAP
------------------------------------------------------*/
#sitemap
{
	clear: both;
	margin: 40px 15px 20px;
	float: left;
	list-style: none;
	width: 960px;
}


#sitemap a
{
	text-decoration: none;
}

#sitemap ul
{
	list-style: none;
}

#sitemap .level0 
{
	font-size: 16px;
	margin: 0;
}

	#sitemap .level0 > a
	{
		display: none;
	}
	
#sitemap .level1
{
	float: left;
	display: block;
	width: 129px;
	padding: 0 0 0 30px;
	border-right: 1px solid #fff;
	font-size: 14px;
	line-height: 16px;
	margin: 0;
}

#sitemap .level1 > a
{
	background: #ccc;
	width: 129px;
	line-height: 36px;
	display: block;
	float: left;
	position: relative;
	left: -30px;
	padding: 0 0 0 30px;
}

#sitemap .level2
{
	font-size: 11px;
	float: none;
	display: block;
	clear: both;
	line-height: 12px !important;
	padding: 5px 0 0 0;
	height: 15px;
}


/* FOOTER
------------------------------------------------------*/
#footer {
	width: 90em;
	margin: 0 1.5em;
	padding: 0 3em;
	color: #555;
	clear: both;
}

	#footer .imprint-janorth {
		background: url("http://www.janorth.de/img/logo_icon_janorth_small_black.png") no-repeat;
		padding: 0 0 0 14px;
	}

#copyright-info {
	float: left;
}

#footer-menu {
	float: right;
}