/*
--------------------------------------------------------
project sabinemoll.com
author: Judith Hettlage
last updated: 2010.03.16
----------------------------------------------------- */
/* CSS Document 
black: #0D0D0D
beige: #f0f0f0
*/

#debug, .debug {  visibility: hidden;  }

* { margin: 0; padding: 0;} 

html, body { height: 100.1%; }

html { font-size: 100%; /*Jon Tan*/ }

body { font-size: 1.1em; /*Jon Tan*/
				
	font-family: 'Trebuchet MS', Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
		
	color: #111;

	background-color: #F2F2EB;
	/*background-color: #f2f2e6; */
		
	border: 0px solid fuchsia;
	
	font-weight: normal;
			 				
	}
		
ul { list-style-type: none; }

a {border: none; outline: none;}

IMG[alt] { color: #888;	font-size: 0.6em; border: 0; outline: none;	} 

h4, .navigation a { font-size: 11px; line-height: 14px; border: 0px dotted fuchsia; }

h1, h2, h3, h4 {  

	letter-spacing: 0.085em; 

	font-weight: normal;

	text-transform: uppercase;

	}
	
p, #content{ line-height: 13pt; letter-spacing: 0.02em;  }

li, .note, .debug { letter-spacing: 0.06em; word-spacing: -0.1em;  }
		
.note { display: block; margin-top: 1em; }
		
a, a img { outline: none; text-decoration: none; border: 0px; }

.breaker { clear: both; }

/* - - - - - - - Wrapper - - - - - - - - -*/

#main { width: 100%; height: 100%; 

	border: 0px solid aqua; 
	
	} 
	
#container { position: absolute;

	top: 12em;
		
	height: 100%; 

	background-color: transparent;

	border: 0px dotted blue;
                
	}
	
/* - - - - - - - Header - - - - - - - - -*/

#header { position: fixed; top: 0;

	border-bottom: 4px solid #000; 
	
	padding-bottom: 2px;
	
	height: 140px; 
	
	z-index: 10;	  
	
	}

#header, #container { width: 900px; padding-left: 10%;} /* Elastic Layout */

#logo { float: right;
	
	padding: 35px 130px 3px 17px;
	
	margin: -145px 0px 0 0;

	border: 0px dotted gray;

	}
	
#header, #logo { background-color: #F2F2EB; }

#header .navigation { margin: 110px 0 0 -1em; border: 0px dotted fuchsia;}
	
/* - - - - - - - Navigation - - - - - - - - -*/

.navigation { 

	text-transform: uppercase;

	letter-spacing: 0.065em;
	
	border: 0px dotted fuchsia !important; 	

	}

.navigation td { height: 1.5em; 

	vertical-align: bottom;

	border: 0px dotted aqua; 
	
	}

.navigation a { color: #111; 
	
	padding: 0 0.5em; 
	
	/* margin-right: 2em;  */
		
	border: 0px dotted green; 
	
	}


.navigation a:hover, .selected { color: #111;  }

.selected { font-weight: bold;}

.navigation a:before { content:"/ "; color: transparent; }

.navigation a:hover:before, 
.navigation .selected a:before { 

	content:"/ "; color: #111; 
	
	}

#Work { width: 96px; }

#competence { width: 140px; }

#Vita { width: 88px; }

#Contact { width: 123px; }

/* - - - - - - - Home - - - - - - - - -*/

#home {	text-align: center; 
	
	margin: -15px 0 10em -15px; 	
	
	border: 0px dotted blue; 
	
	width: 795px !important;
	
	}

#home img { /* width: 100%; min-height: 50px; */ }

#home tr { border: 1px dotted green; }

#home tr td { background-color: #F2F2EB;

	overflow: hidden; }	

#home td img { overflow: scroll; }

/* - - - - - - - Content - - - - - - - - -*/


#sidebar, ul.pagecount { 

	position: fixed;
	
	margin-left: 652px;
	
	}	


#imagecontainer { float: left; 
	
	width: 570px; 

	margin: 0 83px 0 0;
	
	padding-bottom: 10em;

	border: 0px dotted green; 
	
	}

#imagecontainer img { width: 100%; }

.showcase { margin-bottom: 15px;  
	
	border: 0px dotted fuchsia !important;	}
	

#content { float: left;
	
	background-color: #fff;
	
	min-height: 350px;

	width: 310px;
	
	padding: 23px 20px 50px 240px;

	border: 0px dotted aqua; }

#content span {  /* font-family: Arial; */  font-size: 24px; } 

#arrow { border: 0px dotted white; margin-top: 55px; }

#sidebar, #content { font-size: 12px; }
	
#sidebar h4, #content h4 { 
	
	width: 117px;
 
	border-bottom: 4px solid black; 
	
	padding-bottom: 5px;
	
	margin-bottom: 23px; }
	
#content h4 { margin-top: 27px; margin-bottom: 4px;} 
	
#sidebar a, #content a { color: #000;}

#sidebar a:hover, #content a:hover { font-weight: bold; }

#sidebar p, #content p { border: 0px dotted #333; }

/* - - - - - - - right column - - - - - - - - -*/

#sidebar {	/* float: left; */

	width: 20em;
	
	min-height: 250px;
	
	margin-top: 50px;
	
	border: 0px dotted fuchsia;

	}

.pagecount { float: left; 

	top: 470px;

	border: 0px dotted fuchsia;

	z-index: 50; 
	
	}

.pagecount li { font-size: 11px; 

	letter-spacing: -0.009em;
	
	background-color: #fff; 
	
	margin-bottom: 2px; 
	
	width: 110px; height: 14px;
	
	padding: 3px 5px;
	
	}

.pagecount li a { color: #666;}

.pagecount li a:hover { color: #111;}



/* p, .copy { margin-bottom: 0.8em;} */

/* - - - - - - - debug - - - - - - - - -*/

#debug { position: fixed; 

	top: 1em; left: 1em; 
	
	font-size: 0.7em; color: #ccc;
	
	}

.debug { position: absolute; 

	text-align: left; 

	color: #bbb; 

	width: 15em;

	right: 0em; top: 1em; 

	border: 0px solid #ccc;
	
	}