/*
Title:		Powerglass
Date:		2007-08
Author:	mindscreen.de
*/

/* ##########################################################	
** Vorbereitende Massnahmen | Reset
** ##########################################################
*/
/* IE Mac/Netscape 4.5 auschliesen */
@media all
{

	body { 
		/* Beseitigung des Rundungsfehlers bei Schriftgroeßeen im Opera sowie Standardformatierungen */
		font-size: 100.01%; 	
		/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser Fensters geändert wird. */
		position: relative;
		
		background: #1f2224 url(img/bodybgd.gif) repeat-x left top;
/*		opacity: 0.99999;*/
	}
		
	* { margin:0; padding: 0; } 

	/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
	option { padding-left: 0.4em }

	/* force Netscape & Firefox to display vertical scrollbars */
	html {
		min-height: 100%; margin-bottom: 1px;
	}
		
	/* Standardrahmen zurücksetzen */
	fieldset, img { border:0; }

	/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */ 
	select, input, textarea { font-size: 99% }


	/* ##########################################################	
	** Seitenstruktur
	** ##########################################################
	*/

	#globalBox {
		position: relative;
		margin: 0px auto;
		padding-top: 35px;
		width: 910px;
		text-align: left;
	}
	
	#headerBox {
		height: 110px;
	}
	
	#bodyBox {
		position: relative;
	}
	
	#navBox {
		position: absolute;
		top: 0px;
		right: 0px;
		text-align: right;
		z-index: 100;
	}
	
	#contentBox {
		position: relative;
		width: 738px;
	}
	.projektansicht #contentBox {
		width: 753px;
	}
	
	#projectBox {
		min-height: 225px;
		height:auto !important;
		height:225px;
	}
	#projectBoxBig {
		min-height: 266px;
		height:auto !important;
		height:266px;
	}
	
	.greycolumn #contentBox {
		min-height: 555px;
		height:auto !important;
		height:555px;
		padding-left: 42px;
		left: -42px;
		background: url(img/greycolumn.png) repeat-y;
	}
	.greycolumn #col1-l {
		width: 230px;
		padding-left: 42px;
		padding-right: 21px;
		margin-left: -42px;
		background: url(img/greycolumn-topbgd.gif) no-repeat;
	}
	#col1-l {
		position: relative;
		width: 260px;
		overflow: hidden;
		float: left;
	}
	#col1-r {
		position: relative;
		margin-left: 285px;
	}
	#col3 {
		position: relative;
		float: right;
	}
	
	.index #flashBox {
		margin-bottom: 3em;
	}

	/* ##########################################################	
	** Schriftformatierung
	** ##########################################################
	*/
	
	sup {
		line-height: 1em;
	}
	
	#globalBox {
		font-size: 12px;
		font-family: Arial, Helvetica, sans-serif;
		/* font-family: "Lucida Grande", Arial, Helvetica, sans-serif; */
		color: #b1b1b1;
	}
	a {
		color: #969696;
		text-decoration: none;
	}
	#globalBox a:hover, #globalBox a:focus {
		color: #ffffff;
		text-decoration: underline;
		outline: none;
	}
	p {
		line-height: 20px;
		margin-bottom: 1em;
	}
	#contentBox a {
		text-decoration: underline;
	}
	#contentBox a sup {
		text-decoration: none;
	}

	a.pdfdownload {
		padding: 0 10px 0 30px;
		background: url(img/pdf.gif) no-repeat left 0px;
	}
	.small {
		font-size: 10px;
	}
	
	h2 {
		margin-bottom: 17px;
		font-size: 16px;
		color: #fff;
	}
	h2.space {
		margin-top: 110px;
	}
	h3 {
		font-size: 100%;
		color: #fff;
		line-height: 20px;
	}
	h3.space {
		margin-top: 110px;
	}
	h3.bottomspace {
		margin-bottom: 1em;
	}
	
	.topspace {
		margin-top: 2em;
	}
	.topspace2 {
		margin-top: 4em;
	}
	.rechts {
		text-align: right;
	}
	
	/* ##########################################################	
	** Tabellen und Listen
	** ##########################################################
	*/
	
	#contentBox ul {
		line-height: 20px;
		list-style: none;
		margin-bottom: 1em;
	}
	#contentBox li {
		padding-left: 22px;
		background: url(img/list.gif) no-repeat left 8px;
	}
	
	/* Möglichkeiten Farben */
	#contentBox ul.farben {
		margin-left: 2em;
	}
	#contentBox li.weiss {
		background: url(img/list-weiss.gif) no-repeat left 6px;
	}
	#contentBox li.blau {
		background: url(img/list-blau.gif) no-repeat left 6px;
	}
	#contentBox li.rot {
		background: url(img/list-rot.gif) no-repeat left 6px;
	}
	#contentBox li.gruen {
		background: url(img/list-gruen.gif) no-repeat left 6px;
	}
	
	
	/* Preisanfrage */
	.preisanfrage td, .bestellung td {
		border-bottom: none;
	}
	
	.bestellung td b {
		font-size: 12px;
	}
	
	.preisanfrage td.big {
		vertical-align: bottom;
		font-size: 16px;
		font-weight: bold;
		text-align: right;
		width: 220px;
	}
	.preisanfrage table {
		margin-bottom: 1em;
	}
	.bestellung table {
		position: relative;
		left: -167px;
		width: 637px;
	}
	.bestellung td {
		color: #fff;
	}

	/* Technische Daten */
	table {
		border-collapse: collapse;	
	}
	td {
		vertical-align: top;
		border-bottom: 1px solid #b1b1b1;
		line-height: 20px;
	}
	td.col1 {
		color: #ffffff;
		padding-right: 10px;
	}
	
	/* Projektansicht */
	table.projectTable {
		margin: 1.4em 0 1.4em 0;
	}
	.projectTable td {
		border-bottom: none;
	}
	.projectTable td.col1 {
		font-weight: bold;
	}

	
	
	/* reftable Pseudo-Tabelle */

	#reftable .row a {
		text-decoration: none;
		display: block;
		width: 100%;
		color: #969696;
	}
	#reftable .row a:hover {
		text-decoration: underline;
		color: #ffffff;
		cursor:pointer;
	}
	#reftable .row {
		width: 100%;
		border-top: 1px solid #b1b1b1;
		line-height: 20px;
		clear: left;
	}
	#reftable div.header {
		font-size: 11px;
		text-align: right;
		padding-top: 50px;
		border-top: none;
	}
	#reftable div.first {
		padding-top: 0px;
	}
	#reftable .col1 {
		width: 213px;	
		float: left;
		vertical-align: top;
	}
	#reftable .col2 {
		margin-left: 213px;	
		display: block;	
	}



	/* AGB Pseudo Tabelle */
	.listcol1 {
		float: left;
		line-height: 17px;
		display: block;
	}
	.listcol2 {
		margin-left: 35px;
		line-height: 17px;
		margin-bottom: 1em;
	}
	.listcol2inner {
		margin-left: 40px;
		line-height: 17px;
		display: block;
		margin-bottom: 0;
	}
	.head1 {
		font-weight: bold;
		padding-top: 1.5em;
	}
	.head2 {
		font-weight: bold;
	}


	
	/* ##########################################################	
	** News
	** ##########################################################
	*/

	
	/* News Overview */
	.newsElement {
		border-bottom: 1px solid #656768;
		padding: 0px 0 2px 0;
		margin: 0 0 8px 0;
	}
	#newsList {
		margin-left: -167px;
	}
	.newsElement .datum {
		float: right;
		padding-left: 20px;
		font-size: 11px;
		color: #ffffff;
	}
	.newsElement h3 {
		margin-left: 167px;
	}
	.newsElement .text {
		margin: 0px 0px 1em 167px;
		clear: right;		
	}
	.newsElement p {
		line-height: 18px;	
	}
	.newsElement .clearfloat {
		clear: both;
		height: 1px;
		line-height: 1px;
		overflow: hidden;
	}
	.newsElement .shadowXSmall {
		margin-bottom: 0px;
	}

	.news .shadowXSmall img {
		bottom: 10px;
		right: 8px;
	}
	
	/* News Einzelansicht */
	.news #col1-l {
		padding-top: 35px;
	}
	.news #newsBack {
		position: absolute;
		top: 0px;
		left: 225px;
		width: 220px;
		text-align: right;
	}
	.news .datumSingle {
		color: #ffffff;
		font-size: 11px;
	}
	
	
	/* playButton videos */
	.playButton {
		position: absolute;
		top: 3px;
		left: 3px;
		width: 116px;
		height: 112px;
		background: url(img/playbutton.png) no-repeat center center;
	}
	
	
	/* News Startseite */
	.newsTeaser {
		padding-bottom: 1em;
		margin-bottom: 12px;
		background: url(img/home-newshr.gif) no-repeat 0 bottom;
	}
	.homeLeft p {
		line-height: 18px;
		margin-bottom: 0;
		color: #969696;
	}
	.homeLeft h3 {
		line-height: 18px;
	}
	.homeLeft .indent {
		padding-left: 145px;
		color: #fff;
	}
	#contentBox .homeLeft a {
		font-size: 11px;
		text-decoration: none;
	}
	#contentBox .homeLeft a:hover {
		text-decoration: underline;
	}
	

	/* ##########################################################	
	** Menu
	** ##########################################################
	*/
	#headerBox img {
		float: left;
		margin-top: 5px;
	}
	#headerBox ul {
		float: right;
		font-size: 10px;
		margin-right: 5px;
	}
	#headerBox ul li {
		display: inline;
		list-style: none;
		margin-left: 11px;
	}
	#headerBox ul li a.act {
		color: #FFFFFF;
	}
	
	#glasplatz {
		position: relative;
		top: -5px;
		margin-left: 10px;
		float: right;
		height: 53px;
		width: 45px;
		overflow: hidden;
	}
	
	#glasplatz a {
		display: block;
		overflow: hidden;
		height: 0px !important; 
		height /**/:53px; /* for IE5/Win only */
		padding: 53px 0 0 0;
		width: 45px;
		background: url(img/glasplatz.gif) top left no-repeat;
	}
	#glasplatz a:hover, #glasplatz a:focus  {
		background-position: 0 -53px;
	}

	#home a:hover, #home.act a, .index #home a {
		color: #FFFFFF;
	}
	#technologie a:hover, #technologie.act a, .index #technologie a {
		color: #8599F5;
	}
	#moeglichkeiten a:hover, #moeglichkeiten.act a, .index #moeglichkeiten a {
		color: #BF86FF;
	}
	#highlights a:hover, #highlights.act a, .index #highlights a {
		color: #FFCC00;
	}
	#anwendungen a:hover, #anwendungen.act a, .index #anwendungen a {
		color: #ABFF06;
	}
	#news a:hover, #news.act a, .index #news a {
		color: #20ECF9;
	}
	#referenzen a:hover, #referenzen.act a, .index #referenzen a {
		color: #E4000B;
	}
	#kontakt a:hover, #kontakt.act a, .index #kontakt a {
		color: #5A5AFF;
	}
	#navBox ul li.act {
		font-weight: bold;
	}
	#navBox ul li.act ul, #navBox ul li.act ul li.act {
		font-weight: normal;
	}

	#navBox ul li {
		padding-bottom: 7px;
		list-style: none;
	}
	#navBox ul ul {
		margin: 7px 0 14px 0;
	}
	#navBox ul li a {
		padding: 0 5px 1px 0px;
	}
	#navBox ul ul li a {
		padding-right: 18px;
	}
	#navBox ul li a:hover, #navBox ul li a.cur {
		border-bottom: 1px solid;
		text-decoration: none;
	}
	#home.cur , #home li.cur {
		background: url(img/act-home.gif) no-repeat right 16px;
	}
	#technologie.cur , #technologie li.cur {
		background: url(img/act-technologie.gif) no-repeat right 16px;
	}
	#moeglichkeiten.cur, #moeglichkeiten li.cur {
		background: url(img/act-moeglichkeiten.gif) no-repeat right 16px;
	}
	#highlights.cur, #highlights li.cur {
		background: url(img/act-highlights.gif) no-repeat right 16px;
	}
	#anwendungen.cur, #anwendungen li.cur {
		background: url(img/act-anwendungen.gif) no-repeat right 16px;
	}
	#news.cur, #news li.cur {
		background: url(img/act-news.gif) no-repeat right 16px;
	}
	#referenzen.cur, #referenzen li.cur {
		background: url(img/act-referenzen.gif) no-repeat right 16px;
	}
	#kontakt.cur, #kontakt li.cur {
		background: url(img/act-kontakt.gif) no-repeat right 16px;
	}
	

	/* ##########################################################	
	** Bilder und Schatten
	** ##########################################################
	*/
	#googleMap {
		width: 369px;
		height: 360px; 
		position: absolute;
		bottom: 10px;
		right: 8px;		
	}
	
	.shadowLarge {
		width: 381px;
		height: 369px;
	    background: url(img/shadow-l.png) no-repeat;
		margin: 0 16px 10px 0;
		position: relative;
		top: 1px;
		left: 0px;
		float: left;
	}
	.shadowMedium {
		float: left;
		width: 181px;
		height: 175px;
	    background: url(img/shadow-m.png) no-repeat;
		margin: 0 16px 10px 0;
		position: relative;
		top: 12px;
		left: 8px;
	}
	.shadowSmall {
		float: left;
		width: 146px;
		height: 139px;
	    background: url(img/shadow-s.png) no-repeat;
		margin: 0 16px 10px 0;
		position: relative;
		top: 3px;
		left: 8px;
	}
	.shadowXSmall {
		float: left;
		width: 126px;
		height: 125px;
	    background: url(img/shadow-xs.png) no-repeat;
		margin: 0 16px 10px 0;
		position: relative;
	}
	.shadowLarge img {
		position: absolute;
		bottom: 10px;
		right: 8px;
	}
	.shadowLarge .imgText {
		position: absolute;
		bottom: 15px;
		right: 15px;
		z-index: 100;
		font-size: 10px;
	}
	.shadowLarge #googleMap img {
		position: relative;
		bottom: 0px;
		right: 0px;
	}
	.shadowMedium img, .shadowSmall img {
		position: absolute;
		bottom: 12px;
		right: 8px;
	}
	.shadowXSmall img {
		position: absolute;
		width: 116px;
		height: 112px;
		bottom: 12px;
		right: 9px;
	}
	
	
	.double1 {
		float: right;
		margin: 0 16px 0px 0;
	}
	.double2 {
		float: right;
		margin: 0 16px 0px 0;
		top: -7px;
	}
	.double3 {
		float: right;
		margin: 0 16px 0px 0;
		top: -17px;
	}
	
	
	/* Anwendungen Bildnavigation */
	.shadowMedium a {
		position: absolute;
		bottom: 12px;
		right: 8px;
		display:block;
		width: 172px;
		height: 166px;
	}
	.shadowMedium a:hover {
		border: 1px solid #ffffff;
		bottom: 11px;
		right: 7px;
	}
	#anw-architektur {
		background: url(../img/anwendungen/architektur.jpg) no-repeat;
	}
	#anw-interieur {
		background: url(../img/anwendungen/interieur.jpg) no-repeat;
	}
	#anw-kommunikation {
		background: url(../img/anwendungen/kommunikation.jpg) no-repeat;
	}
	#anw-shopsysteme {
		background: url(../img/anwendungen/shopsysteme.jpg) no-repeat;
	}
	#anw-architektur:hover {
		background: url(../img/anwendungen/architektur-hl.jpg) no-repeat;
	}
	#anw-interieur:hover {
		background: url(../img/anwendungen/interieur-hl.jpg) no-repeat;
	}
	#anw-kommunikation:hover {
		background: url(../img/anwendungen/kommunikation-hl.jpg) no-repeat;
	}
	#anw-shopsysteme:hover {
		background: url(../img/anwendungen/shopsysteme-hl.jpg) no-repeat;
	}
	
	/* Anwendungen Overview */
	#katSelectBox {
		position: absolute;
		left: 0px;
		top: -70px;
		width: 700px;
		text-align: right;
		font-size: 11px;
		color: #fff;
	}


	.overviewElement {
		position: relative;
		float: left;
		width: 155px;
		height: 200px;
		overflow: hidden;
		margin: 0px 0 17px 15px;
		font-size: 11px;
	}
	#contentBox .overviewElement a {
		line-height: 20px;
		text-decoration: none;
		display: block;
		height: 190px;
		width: 140px;
		position: relative;
	}
	#contentBox .overviewElement a:hover { /* workaround for IE pointer-bug */
		cursor:pointer;
	}	
	.imgHighlight {
		position: absolute;
		top: 0px;
		left: 0px;
	    background: url(img/highlight.png) no-repeat 0px 0px;
		border: 1px solid #ffffff;
		width: 116px;
		height: 112px;
		z-index: 10;
		visibility: hidden;
	}
	#browserBox {
		position: absolute;
		text-align: center;
		top: 430px;
		right: 50px;
		width: 600px;
	}
	
	#browserBox a {
		display: inline;
		padding: 3px 4px 5px 4px;
		text-decoration: none;
	}
	#browserBox a.act {
		color: #ffffff;
		font-weight: bold;
		background: url(img/glow.png) no-repeat;
	}
	
	
	
	a#backToOverview {
		position: absolute;
		right:-1px;
		top:433px;
		display: block;
		width: 28px;
		height: 52px;
		background: url(img/back-off.gif) no-repeat 0px 0px;
	}
	a#backToOverview:hover {
		background: url(img/back-on.gif) no-repeat 0px 0px;
	}



	
	/* Allgemeine floating-Klassen */
	.float-r {
		float: right;
	}
	
	.float-l {
		float: left;
		margin-right: 10px;
	}




/* ##########################################################	
** Anfrage
** ##########################################################
*/

form {
	padding: 1em 0 1em 0;
}

label {
	clear: left;
	display: block;
	float: left;
	cursor: pointer;
	line-height: 18px;
}

input, textarea {
	padding: 0;
}
textarea {
	width: 345px;
	font-family: Arial, Helvetica;
}

.mailtext {
	width: 345px;
	height: 17px;
}
.mailtextsmall {
	width: 80px;
	height: 17px;
	vertical-align: center;
}
.mailtextmini {
	width: 20px;
	height: 13px;
	vertical-align: center;
	float: left;
}


.mailfields {
	height: 34px;
}
.mailfields2 {
	height: 27px;
}
.abstand {
	margin-top: 1.5em;
}

.eingerueckt {
	display: block;
	margin-left: 95px;
}

.eingerueckt2 {
	float: left;
}
label.eingerueckt2 {
	clear:none;
	display: inline;
	margin-left: 10px;
	margin-right: 20px;
}
.eingerueckt2b {
	margin-left: 90px;
}
.eingerueckt3 {
	border: none;
	display: block;
	margin-top: 15px;
	margin-left: 355px;
	overflow: hidden;
	height: 31px;
	width: 88px;
	text-align: center;
	background: url(img/btn-off.gif) no-repeat left bottom;
	color: #ffffff;
}
input.eingerueckt3:hover {
	background: url(img/btn-on.gif) no-repeat left bottom;
/*	color: #DF0073;*/
}


label.error, span.error {
	font-weight: bold;
	color: #5A5AFF
}
input.error {
	border: 2px solid #5A5AFF;
}


} /* end of @media */

/* ##########################################################	
** Skiplink-Navigation
** ##########################################################
*/
@media screen {
.skip {
	position: absolute;
	left: -1000em; 
	width: 20em;
}
}

@media print {
.skipprint, #headerBox, #navBox {
	display: none;
}
h1 {
	margin-bottom: 2em;
}
}