@charset "utf-8";
/* ===================================
Stylesheet metasun.de
 
Stand: Umsetzung auf kleinere Bildschirmauflösung
Datei: metascreen.css 
Datum: 17.06.2008
Autor: Stefan Meisinger

Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles
		5. Farbzuordung nach Thema 
		6. Farbtabelle		

=================================== */

/* ==================================
   1. Kalibrierung
   =============================== */
   
* {
	padding: 0;
	margin: 0;
}

html, body { height: 100%; }

h1, h2, h3, h4, p, ul, ol { margin-bottom: .6em; } 

li { margin-left: 2em; }


/* ==================================
   2. Allgemeine Styles 
   =============================== */
   
body { 
	color: #004d6c;
	background: white url(../images_pres/bg_body_gruen_280.gif) repeat-y;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 72%;
	line-height: 1.5em;
}
h1 { font-size: 140%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4 { font-size: 110%; }

h1, h2, h3, h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	letter-spacing: 1px;
	color: #555;
	background-color: transparent;
	padding-top: 0.6em;
}

em {
	font-weight: bold;
	font-style: normal;
}
cite {
	font-weight: normal;
	color: #666;
	background: transparent;
}

ul.textlist {
	list-style-type: circle;
	list-style-position: outside;
	padding: 10px;
	border: 1px solid #e8e8ec;
}

ul.textlist li {
	margin-bottom: 0.4em;
}

/* ================
   Hyperlinks    */ 
   
a, a:visited {
	text-decoration: none;
	color: #666;
	background-color: transparent;
}
a:hover, a:focus { text-decoration: underline; }

a img { border: none; }
  
/* =====================
   Klassen und IDs    */
   
.offscreen { text-indent: -9999px; }
.floatleft { float: left; }
.clearfloat { clear: both; }
.imgrep { margin: 0.4em 0 1.8em 0; }
.topspace { margin-top: 7em; }

/*==================experimente (alt)...==============================*/

a.dummy {
	display: block;
/*	cursor: default; */
	text-decoration: none;
	outline: none;  verhindert die unschöne gepunktete Linie beim anklicken 
	/*padding: 0 0 20px 20px;*/
}

.showcase, .showtext  { display: none; }
 
a:hover {	/* für IE 5/6 sind beide Werte unter a:hover erforderlich */
	color:#000;
	background: transparent ;
}

a:hover span.showcase {
	position: absolute;
	display: block;
	top: 1px;
	left: -437px;
	width: 436px;
	height: 270px;
}

body.web a:hover .showcase { padding-left: 56px; }

a:hover .showtext {
	position: absolute;
	display: block;
	top: 204px;
	left: 0px;
	width: 497px;
	text-decoration: none;
	line-height: 2em;
	letter-spacing: 0.08em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	padding: 20px;
}

/*================== Web Thumbnails (neu)...==============================*/

ul.thumbs {
	position: relative;
	list-style-type: none;
	width: 196px;
	float: left;
/*	top: 200px;*/
	top: 160px;
	padding: 0;
	padding-left: 30px;
}

ul.thumbs li {
/*	display: block;*/
	float: left;
	padding: 0;
	margin: 0 20px 15px 0; 
}

ul.thumbs img.tn {
	width: 76px;
	height: 76px;
	border: 1px solid #ddd;
	border-bottom: 1px solid #888;
	border-right: 1px solid #888;
}

img.website {
	margin-left: 56px;
}

/*===============================================================*/

#textbereich_pri {
	position: relative;
	width: 398px;
	padding: 10px 20px;
/*	border-bottom: 1px solid #ddd;*/
}

#weblink {
	position: relative;
	width: 382px;
	top: -10px;
	left: -20px;
	text-align: right;
	background: /*#fff5d8*/ url(../images_pres/bg_showroom.jpg);
	color: #555;
	padding: 4px 56px 1px 0;
	margin-bottom: 15px;
}

#textbereich_sec {
	width: 160px;
/*	padding-top: 200px;*/
		padding-top: 160px;
	padding-left: 20px;
}

#textbereich_sec {
	font-size: 90%;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
}

#impressum #textbereich_sec p {
	background-color: transparent;
	color: #888;
}

#copyright {
	position: relative;
	left: 0;
	width: 398px;
	color: #666;
	font-size: 90%;
	background: transparent;
	padding: 10px 20px;
}

#copyright a {
	border-left: 1px solid #666;
	padding-left: 10px;
}

#copyright span {
	border-left: 1px solid #666;
	padding-left: 10px;
	display: none;
}

/* ==================================
   3. Styles für Layoutbereiche 
   =============================== */

#wrapper { 
	position: absolute;
	height: 100%;
	overflow: visible;
}

#nav_main {
	position: absolute;
	top: 0;
	left: 0;
/*	width: 160px;*/
	width: 140px;
}

#nav_sub {
	position: absolute;
	top: 0;
	left: 160px;
	left: 140px;
/*	width: 160px;*/
	width: 140px;
}

#zentralwrapper {
	position: absolute;
	top: 0;
/*	left: 320px;*/
	left: 280px;
	width: 438px;
	overflow: visible;
}

#schmuckbereich {
	position: absolute;
/*	left: 320px;*/
	left: 280px;
	width: 680px;
	height: 720px;
	background: url(../images_pres/#) 50% 226px no-repeat;
}

#kopfbereich {
	float: left;
	width: 438px;
/*	height: 200px;*/
	height: 160px;
	background-color: white;
}
#kopfbereich img { margin: 10px 0 0 20px; } /* Logo plazieren */

#showroom {
	float: left;
	width: 436px;
	height: 270px;
	background: #eee url(../images_pres/bg_showroom.jpg) no-repeat;
	border: 1px solid #ddd;
}

#textbereich { 
	float: left;
	width: 438px;

}
 
#sonderbereich {
	position: absolute;
/*	left: 758px;*/
	left: 718px;
}

#counter {
	margin-top: 240px;
	padding: 24px;
}


/* ==================================
   4. Sonstige Styles 
   =============================== */
   
/* ================
   Navigation    */

ul.nav {
	list-style-type: none;
	border-top: 1px solid #ddd;
/*	margin: 200px 10px 0 10px;*/
		margin: 160px 10px 0 10px;
}
ul.nav li {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
/*	border-bottom: 1px solid #ddd;*/
	border-bottom: 1px solid #ddd;
	margin: 0;
}

ul.nav li a { padding: 3px 15px; }
ul.nav li span { padding-left: 25px; }

/* ====================
	Kontaktformular  */

form {
	background-color: transparent;
	color: #0f4d6a;
	width: 320px;
	padding-top: 20px;
}
label {
	display: block;
	cursor: pointer;
}
input, textarea {
	background-color: transparent;
	color: #0f4d6a;
	width: 260px;
	border: 1px solid #ccc;
	padding: 3px;
	margin-bottom: 1em;
}

textarea { height: 8em }

input#abschicken {
	width: 10em;
	font-size: 110%;
	background-color: #e6dfbd;
	color: #0f4d6a;
	cursor: pointer;
	margin-top: 0.5em;
}

input:focus, textarea:focus {
	background-color: #f3f7e6;
	color: #0f4d6a;
}

/* ==================================
	Hintergrund für Sonderbereich  */

#print_start {
	float: right;
	margin-right: 5px;
	
}

/* ==================================
   5. Farbzuordnung nach Thema
   =============================== */

body#home, body#kontakt { background: url(../images_pres/bg_body_gruen_280.gif) repeat-y; }
body#kontakt #textbereich_pri { background: #e6efbd url(../images_pres/bg_formular.jpg) no-repeat; }

body.meta { background: url(../images_pres/bg_body_gruen_280.gif) repeat-y; }
body.meta #showroom { border-color: #e6efbd; }

body.web { background: url(../images_pres/bg_body_beige_280.gif) repeat-y; }
/*body.web #showroom { border-color: #ffecb8; }*/

body.print { background: url(../images_pres/bg_body_grau_print_280.gif) repeat-y; }
body.print #showroom { border-color: #dddbd2; }

body.present { background: url(../images_pres/bg_body_rot_280.gif) repeat-y; }
body.present #showroom { border-color: #fcd4d7; }

body.photo { background: url(../images_pres/bg_body_grau_photo_280.gif) repeat-y; }
body.photo #showroom { border-color: #d3d3d9; }

body.office { background: url(../images_pres/bg_body_braun_280.gif) repeat-y; }
body.office #showroom { border-color: #e7d3c7; }

body.audio #kopfbereich { background: #0f4d6a; }
body.audio { background: url(../images_pres/bg_body_blau_280.gif) repeat-y; }
body.audio #showroom { 
	/*border-color: #e6edf0;*/
	border-top: none;
}

/* ==================================
   6. Farbtabelle
   =============================== 

metasun-gruen:	#0f4d6a
Links:			#666

meta	grün: #e6efbd	
		Navi grün: #f3f7e6
			
web		beige: #ffecb8
		Navi beige: #fff5d8
				
print	grau: #dddbd2
		Navi grau: #ecebe6
		
present	rot: #fcd4d7
		Navi rot: #fdeced
		
photo	grau: #d3d3d9
		Navi grau: #e8e8ec
	
office	braun: #e7d3c7
		Navi braun: #f0e4dd
				
audio	blau: #e6edf0
		Navi blau: #f3f7f8

 ==================================
   ENDE DES STYLESHEETS 
   =============================== */