/* 
 * style_screen.css
 * ©2010 steckmann.com  |  last modification: XX.XX.2010
 * The main stylesheet - contains the style for the entire layout. 
 * This stylesheet is divided into sections:
 * 1)	RESET
 * 2) 	GENERIC
 * 3)	POSITIONING
 * 4)	TYPOGRAPHY
 * 5)	LAYOUT STYLES
 * 6)	FORMS
 * 7)	LINK BEHAVIOR
*/

/* =RESET
-------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;		
	margin: 0;	
	outline: 0;
	padding: 0;
}

a:link img, 
a:visited img, 
a:hover img, 
a:active img {
    border: 0;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

caption, 
th, 
td {
	font-weight: normal;
	text-align: left;
}

:focus {    /* remember to define focus styles! */
	outline: 0;
}

table {     /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

/* =GENERIC
-------------------------------------------------*/
.alert {
	width: 500px;
	height: 80px;
	background-color: #ffffcc;
	color: #666666;  
	text-align: center;
	border: 1px solid #666666;
	position:absolute;
	left:150px; 
	top:30px;
	z-index: 2;
	}	
	
body {		
    background-color: #666;
	color: #666;
	font-family: verdana,helvetica,sans-serif;
	font-size: 14px;
	height: 100%;
	margin: 0;
	padding: 0;  	     
}

.clearfix {
	clear: both;
}

dl {
	padding: 0 0 20px 0;
}

dt {
	color: #666;
	float: left;
	font-family: 'myriad pro',helvetica,sans-serif;
	font-weight: bold;
	font-size: 18px;
	margin: 0 0 20px 0;	
	width: 260px;
}

dt p {
	color: #666;
	font-family: verdana,helvetica,sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 22px;	
	margin: 20px 20px 0 0;		
}

dt img {
	border: 1px solid #ededed;
}

dd {
	float: left;	
	line-height: 22px;	
	width: 500px;	
	
		color: #666;
	float: left;
	font-family: 'myriad pro',helvetica,sans-serif;
	font-weight: bold;
	font-size: 18px;
	margin: 0 0 20px 0;	
}

dd p {
	color: #666;
	font-family: verdana,helvetica,sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 22px;	
	margin: 20px 20px 0 0;		
}

.footerleft {
	float: left;	
	margin: 0 0 20px 0;		
	width: 260px;	
}

.footerleft ul {
	padding: 20px 0 0 0;
}

.footerright ul {
	padding: 0 0 10px 0;
}

.footerleft li {
	float: left;
	list-style: none;	
	padding: 0 20px  0 0;
}

.footerright {
	float: left;	
	margin: 0 0 20px 0;		
	width: 500px;
}

.footerright li {
	float: left;
	list-style: none;	
	padding: 0 10px  0 0;
}

/* =POSITIONING
-------------------------------------------------*/
.h_001 {
	clear: both;
	height: 1px;
}

.h_010 {
	clear: both;
	height: 10px;
}

.h_020 {
	clear: both;
	height: 20px;
}

/* =TYPOGRAPHY
-------------------------------------------------*/
h1,
h2,
h3 {
	color: #666;
	font-family: 'myriad pro',helvetica,sans-serif;
	font-weight: bold;
}

h1 {
	font-size: 36px;
margin: 0 0 20px 0;
}

h2 {
	font-size: 24px;
	margin: 0 0 10px 0;	
}

h3 {
	font-size: 18px;
	margin: 0 0 10px 0;		
}

/* =LAYOUT STYLES
-------------------------------------------------*/
#article {
	background: #fff;
	padding: 20px 20px 0 20px;
	min-height: 500px;
}

#footer {
	border-top: 1px solid #ccc;	
	clear: both;	
	padding: 20px 0 0 0;
	
}

#header {
	color: #fff;
	font-family: 'myriad pro',helvetica,sans-serif;
	font-size: 60px;
	font-weight: bold;
	line-height: 40px;
	margin: 0px;
	padding: 100px 0 0 0;
	text-align: right;
}

#nav {
	display: inline;
	float: left;
	margin: 0 20px 0 0;
	padding: 160px 0 0 0;
	position: fixed;
	text-align: right;
	width: 80px;
}

#nav li {
	list-style: none;
}

#pagecontent {
	float: right;
	width: 800px;
}

#spacer {
	height: 100px;
}

#wrapper {
	margin-left: auto; 
	margin-right: auto;
	padding: 0;
	text-align: left;
	width: 900px;
}

/* =FORMS
-------------------------------------------------*/

/* =LINK BEHAVIOR
-------------------------------------------------*/
 .footerleft li a:hover img,
 .footerright li a:hover img {
 	 opacity: 0.5;
	 filter:alpha(opacity=50); /* IE */
	-moz-opacity: 0.50; /* Mozilla */
	opacity: 0.50; /* Opera */
 }
 
#nav a {
	font-family: 'trebuchet ms',helvetica,sans-serif;
	font-size: 16px;
	color: #ccc;
	line-height: 24px;
	text-decoration: none;
}

#nav a:hover {
	font-family: 'trebuchet ms',helvetica,sans-serif;
	font-size: 16px;
	color: #333;
	line-height: 24px;
	padding: 0 10px 0 0;
}

#nav a.current {
	color: #333;
}


/* =IMAGE CHANGE
-------------------------------------------------*/
li a.work_01,
li a.work_02,
li a.work_03,
li a.work_04,
li a.work_05,
li a.work_06,
li a.work_07,
li a.work_08 { 
	float: left;
    position: relative; 
    text-decoration: none
	width: 115px;
	margin: 0;	
	padding: 0;	
}


li a.work_01:hover,
li a.work_02:hover,
li a.work_03:hover,
li a.work_04:hover,
li a.work_05:hover,
li a.work_06:hover,
li a.work_07:hover,
li a.work_08:hover {
	z-index: 100;
	width: 115px;
	margin: 0;	
	padding: 0;	
} 

li a.work_01 span,
li a.work_02 span,
li a.work_03 span,
li a.work_04 span,
li a.work_05 span,
li a.work_06 span,
li a.work_07 span,
li a.work_08 span {
	display: none;
	width: 115px;
	margin: 0;	
	padding: 0;	
} 

li a.work_01:hover span,
li a.work_02:hover span,
li a.work_03:hover span,
li a.work_04:hover span,
li a.work_05:hover span,
li a.work_06:hover span,
li a.work_07:hover span,
li a.work_08:hover span { 
	background-repeat: no-repeat;
    display: block;
	height: 370px;	
	left: -200px;
	margin: 0;	
	padding: 0;	
    position: absolute; 
    top: -360px; 
	width: 500px; 
	z-index: 500;
}

li a.work_01:hover span { background: #fff url('../images/work_weather_big.jpg');}
li a.work_02:hover span { background: #fff url('../images/work_wwolf_big.jpg');}
li a.work_03:hover span { background: #fff url('../images/work_airrave_big.jpg');}
li a.work_04:hover span { background: #fff url('../images/work_federleicht_big.jpg');}
li a.work_05:hover span { background: #fff url('../images/work_jgv_big.jpg');}
li a.work_06:hover span { background: #fff url('../images/work_palm_big.jpg');}
li a.work_07:hover span { background: #fff url('../images/work_finanzpark_big.jpg');}
li a.work_08:hover span { background: #fff url('../images/work_naturex_big.jpg');}