/*
	CSS reset from YUI
	http://developer.yahoo.com/yui/reset/
	Copyright (c) 2009, Yahoo! Inc.
	License: http://developer.yahoo.com/yui/license.html
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}


/*
	rugwind.de
	Presentation for screen media
	Design by Henriette Gruber 9/2009
	Code by Niels Heidenreich (nh@ngin.de) 10/2009
	20091004,-05, -07


	+----outer_container----------------------------------------+
	|    headings                                               |
	|                                                           |
	| +--inner_container--------------------------------------+ |
	| |          | +-----wrapper_project_outer--------------+ | |
	| |main_     | |     projects_navigation                | | |
	| |navigation| +----------------------------------------+ | |
	| |          | | +---wrapper_project_images -+--------+ | | |
	| |          | | |                           |        | | | |
	| |          | | |   project_image           |image_  | | | |
	| |          | | |                           |switcher| | | |
	| |          | | +---------------------------+--------+ | | |
	| |          | +----------------------------------------+ | |
	| |          | |     copy                               | | |
	| |          | +----------------------------------------+ | |
	| +----------+--------------------------------------------+ |
	| +------+                                                  |
	| |labels|                                                  |
	| +------+                                                  |
	+-----------------------------------------------------------+
*/

body {
	background: url(../img/strom.gif);
	color: #666;
	font: 10px/14px Verdana,sans-serif;
}

.hidden, h3, h4 {
	display: none;
}

em, strong {
	font-weight: bold;
}



/*
	#outer_container
		#headings
		#inner_container
*/

#outer_container {
	width: 850px;
	margin: 0 auto;
}

#headings { 
        background: url(../img/esf.gif) 
        5px right no-repeat; } 


#headings a {
	background: url(../img/rugwindlogo.gif);
	display: block;
	width: 155px;
	height: 59px;
}
#headings h1 span, #headings h2 {
	display: none;
}



/*
	#inner_container
		left:				right:
		#main_navigation	#wrapper_project_outer
		[relative positioning:]
		#labels
*/

#inner_container {
	overflow: auto;
}

#main_navigation {
	float: left;
	font-size: 13px;
	padding-top: 125px;
}
#main_navigation li {
	margin-bottom: 15px;
}
#main_navigation em {
	font-weight: normal;
	font-style: italic;
	color: #669900;
}
#main_navigation a {
	color: #666;
	text-decoration: none;
	padding-bottom: 1px;
}
#main_navigation a:hover {
	color: #000;
	border-bottom: 1px solid #000;
}


/*
	#wrapper_project_outer
		#projects_navigation
		#wrapper_project_images
		#copy
*/

#wrapper_project_outer {
	float: right;
	width: 750px;
}

#wrapper_standard_outer {
	float: right;
	margin-top: 105px;
	width: 750px;
}

/*
	This will contain the jcarousel.
	Although width, height and overflow are not strictly needed here,
	without them, there may be a very nasty browser re-draw flash
	while the navigation is loaded and displayed as a normal list,
	before jcarousel has had the chance to run and change the display.
	-- nh 20091111
*/
#projects_navigation {
	width: 600px;
	height: 105px;
	overflow: hidden;
}
#projects_navigation li {
}
#projects_navigation a {
	color: #666;
	text-decoration: none;
	display: block;
	background-position: center 20px;
	background-repeat: no-repeat;
	width: 80px;
	height: 89px;
	float: left;
	text-align: center;
	padding:0 10px;
}
#projects_navigation span {
	display: block;
	padding-top: 85px;
}
#projects_navigation a:hover {
	color: #000;
	background-position: center top;
	width: 100px;
	padding-left: 0;
}

#projects_navigation_ecodome {background-image:url(../img/projekt-icons/ecodome.gif);}
a#projects_navigation_ecodome:hover {background-image:url(../img/projekt-icons-hilited/ecodome.gif);}

#projects_navigation_guerillastick {background-image:url(../img/projekt-icons/guerillastick.gif);}
a#projects_navigation_guerillastick:hover {background-image:url(../img/projekt-icons-hilited/guerillastick.gif);}

#projects_navigation_handseeder {background-image:url(../img/projekt-icons/handseeder.gif);}
a#projects_navigation_handseeder:hover {background-image:url(../img/projekt-icons-hilited/handseeder.gif);}

#projects_navigation_jenalicht {background-image:url(../img/projekt-icons/jenalicht.gif);}
a#projects_navigation_jenalicht:hover {background-image:url(../img/projekt-icons-hilited/jenalicht.gif);}

#projects_navigation_klima2050 {background-image:url(../img/projekt-icons/klima2050.gif);}
a#projects_navigation_klima2050:hover {background-image:url(../img/projekt-icons-hilited/klima2050.gif);}

#projects_navigation_kontaktglas {background-image:url(../img/projekt-icons/kontaktglas.gif);}
a#projects_navigation_kontaktglas:hover {background-image:url(../img/projekt-icons-hilited/kontaktglas.gif);}

#projects_navigation_lichtregen {background-image:url(../img/projekt-icons/lichtregen.gif);}
a#projects_navigation_lichtregen:hover {background-image:url(../img/projekt-icons-hilited/lichtregen.gif);}

#projects_navigation_moebile {background-image:url(../img/projekt-icons/moebile.gif);}
a#projects_navigation_moebile:hover {background-image:url(../img/projekt-icons-hilited/moebile.gif);}

#projects_navigation_officina {background-image:url(../img/projekt-icons/officina.gif);}
a#projects_navigation_officina:hover {background-image:url(../img/projekt-icons-hilited/officina.gif);}

#projects_navigation_polyhistor {background-image:url(../img/projekt-icons/polyhistor.gif);}
a#projects_navigation_polyhistor:hover {background-image:url(../img/projekt-icons-hilited/polyhistor.gif);}

#projects_navigation_stadtmoebel {background-image:url(../img/projekt-icons/stadtmoebel.gif);}
a#projects_navigation_stadtmoebel:hover {background-image:url(../img/projekt-icons-hilited/stadtmoebel.gif);}



/*
	#wrapper_project_images
		left:			right:
		#project_image	#image_switcher
*/

#wrapper_project_images, #wrapper_standard_content {
	overflow: auto;
}

#project_image {
	background: url(../img/bildrahmen.gif) 0 0 no-repeat;
	width: 678px;
	height: 420px;
	float: left;
}

#standard_content {
	background: url(../img/hintergrund_texte.gif) 0 0 no-repeat;
	width: 660px;
	height: 410px;
	float: left;
}
#text_in_frame {
	overflow: auto;
	padding: 40px;
}
#text_in_frame h4 {
	display: block;
	font-weight: bold;
}
#text_in_frame h4.with_bottom_margin {
	margin-bottom: 14px;
}
#text_in_frame p, #text_in_frame ul {
	margin-bottom: 14px;
}
#text_in_frame ul {
	color: #669900;
	list-style: square;
}
#text_in_frame a {
	color: #666;
}
#text_in_frame a:hover {
	color: #000;
}

.column {
	margin: 0 10px;
	width: 45%;
	float: left;
}

#project_image img {
	border: 1px solid rgb(128,128,128);
	width: 625px;
	height: 375px;
	margin: 18px 0 0 23px;
}

#image_switcher {
	float: right;
	margin-top: 21px;
}
#image_switcher div {
	background-color: #eee;
	background-position: 0 0;
	background-repeat: no-repeat;
	border: 1px solid rgb(128,128,128);
	width: 65px;
	height: 65px;
	margin-bottom: 10px;
	cursor: pointer;
}



/*
	#copy
*/

#copy {
	margin: 5px 0 0 21px;
	width: 500px;
	float: left;
}
#copy p {
	margin-bottom: 5px;
}
#copy a {
	color: #666;
}
#copy a:hover {
	color: #000;
}
.copy_switchable {
	display: none;
}



/*
	#labels
	Relatively positioned,
	so they stick out of the left of the #project_image frame
*/

#labels {
	position: relative;
	top: 350px;
	left: -19px;
	width: 128px;
}
#labels a {
	display: block;
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 128px;
	height: 36px;
	margin-bottom: 10px;
}
#label_awarded {background-image: url(../img/labels/awarded.gif)}
#label_social {background-image: url(../img/labels/social.gif)}
#label_sustainable {background-image: url(../img/labels/sustainable.gif)}

#labels span {
	display: none;
}


/*
	Markierungen, um das Layout zu verdeutlichen
*/
/*

#testframe {
	position: fixed;
	top: 0;
	left: 0;
	width: 1024px;
	height: 768px;
	border: 1px dashed red;
}

#outer_container {
	border: 1px solid #000;
}
#inner_container {
	border: 1px dashed #000;
}
#headings {
	background: lime;
}
#main_navigation {
	background: yellow;
}
#wrapper_project_outer {
	border: 1px dashed red;
}
#projects_navigation {
	background: blue;
}
#wrapper_project_images {
	border: 1px dashed lime;
}

*/