@media screen {
	body {
		font-size: 100.01%;
		margin: 0;
		padding: 0;
		position: relative;
		text-align: left;
	}
	select, input, textarea {
		font-size: 99%;
	}
	form {
		margin: 0;
		padding: 0;
	}
	img {
		border: 0 none;
	}
	#left {
		float: left;
	}
	#right {
		float: right;
	}
	#main {
		position: relative;
		width: auto;
	}
	.inside {
		position: relative;
		text-align: left;
	}
	.block {
		overflow: hidden;
	}
	.clear, #clear {
		clear: both;
		font-size: 0.1px;
		height: 0.1px;
		line-height: 0.1px;
	}
	.invisible {
		display: inline;
		height: 0;
		left: -1000px;
		overflow: hidden;
		position: absolute;
		top: -1000px;
		width: 0;
	}
	.custom {
		display: block;
		text-align: left;
	}
	.custom::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
	* + html #main {
		position: static;
	}
	header, footer, nav, section, aside, article, figure, figcaption {
		display: block;
	}
}

/* Reset */
figure {
    margin: 0;
}

html {
    font-family: arial,sans-serif;
    font-size: 1;
    background: #60a4d7;
    height: 100%;
    overflow-y: scroll;
}

body {
    height: 100%;
    min-width: 320px;
}

#wrapper {
    height: auto !important;
    min-height: 100%;
    position: relative;
}

#header .inside,
.container_inside,
#Footer2 .inside {
    max-width: 1000px;
    width: 100%; 
    margin: 0 auto;
}
.inside2 {
	margin: 0 10px;
}

#header {
    background: #000;
}

#container {
    background: #fff;
    padding-top: 60px;
}

#Footer2 .inside {
    margin-top: 20px;
    position: relative;
    min-height: 110px;
}

#footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    border-top: 1px solid #fff;
    background: #60a4d7;
}

#footer .inside {
    text-align: center;
    color: #fff;
    font-size: 0.75em;
    padding: 3px 0;
}

#footer .inside a {
    color: #fff;
}

/* Layout Home */
.home #container {
    background: none;
}

/* Layout Einspalter */
.einspalter #main {
    padding: 50px 0;
    min-height: 446px;
}

.referenzdetail #main {
    padding-top: 0;
    height: 515px;
}

/* Layout Zweispalter */
.zweispalter_1-4 #left {
    max-width: 180px;
    width: 100%;
}

.zweispalter_2-3 #left {
    max-width: 380px;
	width: 100%;
}

.zweispalter_1-4 #main {
    margin-left: 200px;
    width: 780px;
}
.zweispalter_2-3 #main {
    margin-left: 400px;
}

.zweispalter_1-4 #left,
.zweispalter_1-4 #main,
.zweispalter_2-3 #left,
.zweispalter_2-3 #main {
    padding: 50px 0;
    min-height: 396px;
}

.zweispalter_1-4 #left .inside,
.zweispalter_2-3 #left .inside {
    width: auto;
}


/* Schrift */

h1, h2 {
    font-size: 0.8125em;
    margin: 0;
    line-height: 1.5;
}

h3, 
.ce_referenzlink h2 {
    font-size: 0.8125em;
    margin: 1.6875em 0 0 0;
}

p,
.ce_referenzlink a,
.ce_text ul,
.ce_download,
.ce_downloads {
    font-size: 0.8125em;
    line-height: 1.5;
    margin: 0.5em 0;
}

.ce_text ul {
	padding-left: 0.5em
}

.ce_text li {
	margin-left: 1.2em;
}

a {
    color: #000;
}

a:hover {
    background: #60a4d7;
    text-decoration: none;
    color: #fff;
}

/* elemente */
#logo {
    position: absolute;
}

/* Übersicht (Bildernavi) seite Metallbau */
.einspalter #metallbau {
	width: auto;
}
.einspalter #metallbau .ce_text {
	float:left;
	margin-left: 20px;
	margin-bottom: 20px;
}
.einspalter #metallbau .ce_text:nth-child(5n+1) {
	margin-left: 0;
}

.zweispalter_2-3 #main .ce_text,
.zweispalter_2-3 #main .ce_image {
    float: left;
}

.image_container a {
    display: block;
    overflow: hidden;
}

.image_container a img {
    float: left;
}

.image_container a:hover {
    background: none;
}

/* Metamodels Referenzen */
.mod_metamodel_list ul {
    margin: 0;
    padding: 0;
}
.mod_metamodel_list li {
	float: left;
    list-style: none;
    padding: 0;
    margin: 0 0 0 20px;
}
.mod_metamodel_list li.first {
	margin:0;
}


/* Navigation main */
#nav_main ul {
    padding: 0;
    margin: 0;
    z-index: 10000;
    text-align: center;
}

#nav_main li {
    display: inline-block;
    list-style: none;
}

#nav_main a,
#nav_main span.active {
    display: inline-block;
    font-size: 0.8125em;
    padding: 0 15px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 22px;
    color: #fff;
}
#nav_main span.active,
#nav_main .trail {
    background: #60a4d7;
}

#nav_main ul.level_2 {
    margin: 0;
    padding: 0;
    position: absolute;
    left: -999em;
    background: #000;
}

#nav_main ul.level_2 li {
    display: block;
    float: none;
    text-align: left;
}

#nav_main li:hover ul.level_2 {
    left: auto;
}

#nav_main ul.level_2 a,
#nav_main ul.level_2 span {
    display: block;
}

#nav_main ul.level_2 a:hover {
    background: #60a4d7;
}

/* Navigation sub */
#content_nav_sub ul,
#content_nav_sub li {
	margin: 0;
	padding: 0;
}
#content_nav_sub ul li {
	display: block;
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	list-style: none;

}
#content_nav_sub ul li:nth-child(5n+1) {
	margin-left: 0;
}
#content_nav_sub ul li a,
#content_nav_sub ul li span {
	display: block;
	background: #d1e3f1;
	color: #000;
	font-size: 0.8125em;
	padding: 15px;
	width: 150px;
	height: 90px;
	text-decoration: none
}
#content_nav_sub ul li a:hover,
#content_nav_sub ul li span {
	background: #60a4d7;
	color: #fff;
}
/* Navigation  Footer*/
#nav_footer ul {
    padding: 0;
    text-align: center;
}

#nav_footer li {
    display: inline;
    list-style: none;
    font-size: 0.8125em;
    font-weight: bold;
}

#nav_footer span.active,
#nav_footer a {
    display: inline-block;
    padding: 0 10px;
}

#nav_footer a {
    text-decoration: none;
}

/* Slideshow Referenzen */
.slideshow-thumbnails {
    left: 580px;
    width: 400px;
    height: 85px;
    bottom:0
}

.slideshow-thumbnails ul {
    padding-left: 2px;
    width: 400px;
}

.slideshow-thumbnails li {
    width: auto !important;
}

.slideshow-thumbnails a {
    margin: 0 2px;
    padding: 0;
}

.slideshow {
    width: 980px;
    height: auto;
    padding-top:50px;
}

.slideshow #beschreibung {
    float: right;
    width: 366px;
    height: 313px;
    padding: 15px;
    overflow-y: scroll;
}

.slideshow .slideshow-images {
    width:580px;
    height:387px;
    background: #fff;
}
.slideshow-images img {
	right: 0 !important;
	left:auto;
	top: 0;
	border-left:350px solid #fff;
}	


#slideshow-control {
    padding: 3px 0;
    font-size: 0.8125em;
}

#slideshow-control ul {
    float: right;
    margin-right: 400px;
    margin-top: 15px;
}
#slideshow-control a {
	display: inline-block;
	margin-top: 15px;
}

#slideshow-control li {
    display: inline-block;
    padding: 0 4px;
}

#slideshow-control li.button {
    cursor: pointer;
}

.slideshow .slideshow-thumbnails {
    height:85px;
}

/* störer das Tor */
#stoerer-das-tor {
    position: absolute;
    right: 20px;
    top: 12px;
}

#stoerer-das-tor a {
	display: block;
	text-indent: -9999em;
	width: 84px;
	height: 84px;
	background: url("/tl_files/inhalt/metallbauer/das-tor-top.png") no-repeat center center;
}
/* Layout Home */
html, body, #wrapper {
    height: 100%;
    overflow: hidden;
}

body {
    min-height: 300px;
}

#header {
	display: none;
}
#container {
	padding: 0 !important;
}


#main {
    height: 69.8%;
    min-height: 100px;
}

#Footer2 {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    background: #60a4d7;
    z-index: 1000;
}

#Footer2 .inside {
	margin-top: 20px !important;
	min-height: 55px;
}


#nav_main span.active {
    background: #000;
}

#nav_footer .active {
    text-decoration: none;
}

body > img {
	width: 100% !important;
	height: auto !important;
}

html {
	background: #60a4d7 !important;
}

@media only screen and (max-width: 980px){
	body > img {
		width: 200% !important;
		height: auto !important;
	}
}

@media only screen and (max-width: 600px){
	body > img {
		width: 250% !important;
		height: auto !important;
	}
}

@media only screen and (max-width: 400px){
	body > img {
		width: 400% !important;
		height: auto !important;
	}
}

@media only screen and (max-width: 800px) {
	#Footer2 .inside img {
		margin-top: 30px !important;
	}
}
/* default */
#Footer2 {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: #60a4d7;
}

#Footer2 .inside {
	margin-top: 10px;
	min-height: 55px;
}

#container {
	padding-top: 95px;
}

#header {
	display: none;
}

@media only screen and (max-width: 598px) {
	.einspalter #metallbau {
		width: 400px;
		margin: 0 auto;
	}
}

@media only screen and (min-height: 0px) and (max-height: 639px) {
	html {
		background: #fff;
	}
}

@media only screen and (min-height: 700px) and (min-width: 1000px) {
	#Footer2 {
		position:static;
	}
	
	#Footer2 .inside {
    	margin-top: 20px;
    	min-height: 110px;
	}
	
	#container {
		padding-top: 50px;
	}
	
	#header {
		display: block;
	}
	
	#stoerer-das-tor {
		top: -62px;
		bottom: auto;
	}
	
	#stoerer-das-tor a {
		background: url("/tl_files/inhalt/metallbauer/das-tor.png") no-repeat center center;
	}
}

@media only screen and (max-width: 999px) {
	#left, #main {
		float: none;
		min-height: 0 !important;
	}
	
	#Footer2 .inside > div {
		margin-left: 10px;
		margin-right: 10px;
	}
	.center {
		margin: 0 auto;
		width: 100%;
		max-width: 580px;
	}
	#main {
		margin-left: 0 !important;
		padding-top: 0 !important;
		max-width: 100%;
	}
	.einspalter #main {
		padding-top: 50px !important;
	}
	.image_container img {
		width: 100%;
		height: auto;
	}
	
	/* slideshow */
	.slideshow {
		width: 100%;
		padding-top:0;
	}
	.slideshow #beschreibung {
		float: none;
		height: auto;
		width: 100%;
		padding-left:0;
		padding-right: 0;
	}
	.slideshow-thumbnails {
		display: none;
	}
	.slideshow-images {
		width: 100% !important;
	}
	.slideshow-images img {
		width: 100% !important;
		height: auto !important;
	}
	
	#slideshow-control ul {
		margin-right: 0;
		margin-bottom: 15px;
		padding-left: 0;
		text-align: right;
	}
	#slideshow-control li {
    	display: inline-block;
    	padding: 4px;
    	margin: 0 4px;
    	background: #60a4d7;
    	color: #fff;
	}
	
	/* Übersicht (Bildernavi) seite Metallbau */
	.einspalter #metallbau .ce_text:nth-of-type(n),
	#content_nav_sub ul li:nth-of-type(n) {
		margin-left: 20px;
	}
	.einspalter #metallbau .ce_text:nth-child(3n+1),
	#content_nav_sub ul li:nth-child(3n+1) {
		margin-left: 0;
	}
	
}

@media only screen and (max-width: 800px) {
	#Footer2 .inside {
		text-align: center;
	}
	#logo {
		position: static;
	}
	#stoerer-das-tor {
		bottom: -42px;
		top: auto;
	}
	#nav_footer {
		padding-top: 20px;
		padding-bottom: 42px;
	}
	#container {
    	padding-top: 206px;
	}
}

@media only screen and (max-width: 598px) {
	.einspalter #metallbau .ce_text:nth-of-type(n),
	#content_nav_sub ul li:nth-of-type(n) {
		margin-left: 10px;
	}
	.einspalter #metallbau .ce_text,
	#content_nav_sub ul li {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 399px) {
	.einspalter #metallbau,
	#content_nav_sub ul {
		width: 200px;
		margin: 0 auto;
	}
	.einspalter #metallbau .ce_text {
		float: none;
	}
}