/*************************************************************************************
**************************************************************************************
	
	CSS-Definitionen der Public-Pages
	
	Farbpalette:
	- Weiss						:	white
	- Schwarz					:	black
	
	Inhaltsverzeichnis:
	- Layout Domänen via HTML-TAGs
	- Layout Domänen via CLASS
	- header Definitionen
	- body_content Definitionen
		- index Definitionen
		- project Definitionen
	
	Kompatibilität:
	- HTML 			nach W3C-Validator ist alles konform
	- CSS			Safari, Firefox, IE >= 5.5
	
*************************************************************************************
*************************************************************************************/



/*************************************************************************************
	Layout Domänen via HTML-TAGs 
*************************************************************************************/
body {
	background: white;
	margin: 20px;
	width: 1005px;

	font-family: Monaco, Courier, monospace;
	font-size: 10px;
	letter-spacing: 1px;
}

a:link {
	color: black;
	text-decoration: none;
}

a:visited {
	color: black;
	text-decoration: none;
}

a:hover {
	color: black;
	text-decoration: underline;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

/*************************************************************************************
	Layout Domänen via CLASS und ID
*************************************************************************************/

.hide {
	display: none;
}

.active_link {
	text-decoration: underline;
}

.post_it_link {
	background: transparent;
	margin-top: 3px;
	cursor: pointer;
	margin-left: 18px;
}

.post_it_link:hover {
	text-decoration: underline;
}


/*************************************************************************************
	header Definitionen
*************************************************************************************/

#head_spacer {			
	height: 150px;   	
	width: 985px;
	background: transparent;
	
}

#pre_header {			
	background: white;	
	position: absolute;
	top: 0px;
	height: 20px;
	width: 985px;
	z-index: 2;
}

#header {
	position: absolute;
	height: 149px;
	width: 985px;
	background: white;
	z-index: 2;
}

#header #top_border {
	height: 0px;
	width: 985px;
	background: white;
	font-size: 0px;

	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: black;

}

#header #title {
	position: absolute;
	top: 17px;
	left: 2px;
}

#header #title a {
	display: block; 
	width: 121px; 
	height: 25px;  
	text-indent: -9000px;
	background-position: 0 0;
}

#header #title a:hover {
   background-position: 0 -27px;
}

#header #logo {
	position: absolute;
	top: 25px;
	left: 843px;
}

#header #navigation {
	position: absolute;
	top: 98px;
	left: 0px;
}

#header #navigation .nav_link {
	margin: 0px 25px 0px 0px;
}

#header #navigation .active_nav_link {
	margin: 0px 25px 0px 0px;
	text-decoration: underline;
}

#header #login_field {
	background: transparent;
	position: relative;
	top: 128px;
	left: 975px;
	width: 10px;
	height: 10px;
}

#header #left_border {
	position: absolute;
	top: 139px;
	left: 0px;
	width: 235px;
	height: 0px;
	font-size: 0px;			 /* CSS Hack [B]
								IE =< 6 Hack: Damit die "border-divs" nicht überlappen */
	
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: black;
}

#header #right_border {
	position: absolute;
	top: 139px;
	left: 250px;
	width: 735px;
	height: 0px;
	font-size: 0px;			 /* CSS Hack [B]
								IE =< 6 Hack: Damit die "border-divs" nicht überlappen */
	
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: black;
}

/*+++++++++++ Bis hier perfekt ausser Schrift ++++++++++++++++++*/

/*************************************************************************************
	body_content Definitionen
*************************************************************************************/

#body_content {
	width: 985px;
}

/*****************************
    index Definitionen
*****************************/

#body_content .projects_year .year_label {
	float: left;
}

#body_content .projects_year .project_element {
	height: 77px;
	margin-bottom: 15px;
	cursor: pointer;
/*	margin-left: 250px;		 /* CSS Hack [A]
								Hack für IE <= 6 : Der Abstand müsste eigentlich 250px sein.
								Der Links-Abstand wird aber von IE <= 6 verschieden ausgeführt, 
								je nach dem, ob sich links vom .project_element
								noch ein "float-left"-Element befindet oder nicht.
								Deshalb wird der Abstand um 5px verkürzt und weiter unten 
								korrigiert. (siehe .project_pictures) */	
}

#body_content .projects_year .project_element .project_title {
	background: white;
	position: absolute;
	left: 0px;
	width: 235px;
	height: 77px;
	
	text-decoration: underline;
	visibility: hidden;
}

#body_content .projects_year .project_element .project_pictures {

	position: absolute;		 /* Weiterführung CSS Hack [A] */
	left: 250px;			 /* Der um 5px zu kurze Abstand vom ersten Teil von [A] wird hier via 
								"position:" und einem "left" (in diesem Fall: Abstand zum Fenster)
								korrigiert. (d.h. im Normalfall würde hier kein "position: absolute;"
											 und auch kein "left: 270px" stehen)
								Um den Hack sichtbar zu machen muss der erste und zweite (dieser)
								Selektor vom CSS Hack [A] mit "background: red;" und "background: lime;"
								versehen werden und anschliessend in IE <= 6 betrachtet werden. */
								
	width: 744px;			 /* Annotation: Wenn im Index zu wenige Bilder angezeigt werden, muss
								dieser Wert "width" nach oben korrigiert werden.*/
	height: 77px;
	overflow: hidden;
}

#body_content .projects_year .project_element .project_pictures .picture {
	margin-right: 9px;
}


/*****************************
    project Definitionen
*****************************/

#body_content #projects_list {
	width: 235px;
}

#body_content #projects_list .project_elements {
	background: transparent;
	margin-bottom: 3px;
}

#body_content #project_pic_container {
	position: absolute;
	top: 150px;
	left: 250px;
}

#body_content #project_pic_container #pic_nav {
	padding-top: 11px;
	margin-bottom: 20px;
	margin-left: -3px;
}

#body_content #project_pic_container #pic_nav .pic_control_inactive {
	position: relative;
	top: -1px;
	padding: 2px 6px 6px 4px;
}

#body_content #project_pic_container #pic_nav .pic_control_active {
	position: relative;
	top: -1px;
	padding: 2px 6px 6px 4px;
}


#body_content #project_pic_container #pic_nav .pic_control_active:hover {
	text-decoration: underline;
	cursor: pointer;
}

#body_content #project_pic_container #pic_nav #pic_counter {
	margin-right: 15px;
}

#body_content .wrap_post_it_concept {
	background: transparent;
	position: absolute;
	top: 150px;
	left: 250px;
	width: auto;
	height: auto;
	padding-bottom: 20px;
	z-index: 2;
}

#body_content .content_post_it_concept {
	background: transparent;
	width: 695px;
	height: auto;
	padding: 13px 20px 20px 20px;
}

#body_content .content_post_it_concept .close_button {
	float: right;
	position: relative;
	top: -5px;
	right: -12px;
	background-image: url(close_button.gif); 
	height: 15px;
	width: 15px;
	margin-bottom: 8px;
	cursor: pointer;
}


#body_content .wrap_post_it_plan {
	background: transparent;
	position: absolute;
	top: 150px;
	left: 250px;
	width: auto;
	height: auto;
	padding-bottom: 20px;
	z-index: 3;
}

#body_content .content_post_it_plan {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0 0 1px 0;
}

#body_content .content_post_it_plan .close_button {
	position: absolute;
	top: 8px;
	right: 8px;
	background-image: url(close_button.gif); 
	height: 15px;
	width: 15px;
	margin-bottom: 8px;
	cursor: pointer;
}

#body_content .content_post_it_plan #plan_pic_nav {
	padding-top: 11px;
	padding-left: 13px;
	padding-bottom: 9px;
}

.plan_pic_control_inactive {
	float: left;
	position: relative;
	top: -3px;
	padding: 2px 6px 4px 4px;
}

.plan_pic_control_inactive:hover {
	cursor: default;
}

.plan_pic_control_active {
	float: left;
	position: relative;
	top: -3px;
	padding: 2px 6px 4px 4px;
}

.plan_pic_control_active:hover {
	text-decoration: underline;
	cursor: pointer;
}

#plan_pic_dragme_icon {
	background-image: url(dragme_icon.gif);
	position: absolute;
	right: 10px;
	bottom: 31px;
	height: 14px;
	width: 14px;
}

#plan_pic_dragme_icon_hider {
	width: 14px;
	height: 14px;
}



/**********************************
    start_post_its Definitionen
***********************************/

#start_post_its_container {
	position: absolute;
	top: 0;
	left: 0;
	padding: 195px 0 0 134px;
	background: transparent;
	z-index: 2;
}

.start_post_its {
	position: relative;
	top: auto; 
	padding: 13px 30px 20px 20px;
	margin-bottom: 20px; 
	width: 425px; 
	min-height: 140px; 
	visibility: visible; 
	z-index: 3;
}

.start_post_its .close_button {
	float: right;
	position: relative;
	top: -5px;
	right: -20px;
	background-image: url(close_button.gif); 
	height: 15px;
	width: 15px;
	margin-bottom: 8px;
	cursor: pointer;
}

#start_post_its_background {
	background: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}