/* 
	Tested with:
	
		Chrome 8 (Windows XP, OS X)
		Firefox 3.6 (Windows XP, OS X)
		Internet Explorer 6, 7, 8
		Opera 10 (Windows XP, OS X)
		Safari (Windows XP, OS X)

		Also usable with Opera Mini (S60)
		
	TODO:
 	- all pages should be at least as tall as the browser window
*/

html  {
	height: 100%;
}

body {
	background: #333 url('background.jpg');
	font-family: georgia, serif;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* wrapper: gathers all page elements together */ 

#wrap {
	background: white;
	border: 3px solid gray;
	border-top: none;
	/* 
		most pages fill at least one full screen,
		1px border softens the tail of a shorter page
	*/
	border-bottom: 1px solid gray;
	margin: auto;
	width: 760px;
}

/* header: gathers together logo, navigation etc. */

#header {
	background: white url('bug.png');
	background-repeat: no-repeat;
	background-position: 102% 65%;
}

#logo-container {
	padding: 0 0 0.2em 1em;
}

#logo-container  img {
	padding: 0;
}

#logo-container  h1 {
	font-size: 1.5em;
	font-style: italic;
	font-weight: bold;
	margin: 0;
}

/* header: navigation */

#navigation  {
	background: #c0c0c0;
	border: 1px solid gray;
	border-left: none;
	border-right: none;
	float: right;
	width: 100%;
}

#navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation ul li {
	background: #c0c0c0;
	display: inline-block;
	float: right;
}

#navigation ul li:hover {
	background: #e06000;
}

#navigation ul li a {
	color: black;
	display: block;
	font-weight: bold;
	line-height: 2em;
	padding: 0 1em 0 1em; 
	text-decoration: none;
}

#navigation ul li a:hover {
	color: black;
}

body#ind li#index-tab a,
body#inf li#info-tab a,
body#aut li#authors-tab a,
body#pub li#publications-tab a,
body#pro li#projects-tab a,
body#gui li#guide-tab a,
body#lin li#links-tab a
 {
	/* 
		This implements the "selected" tab on the navibar.
		Update the list above when you are changin navilinks.
	*/
	background: #e0e0e0;
	color: black;
}

/* content */

#content {
	min-height: 600px;
	padding: 1em;
}

#content a {
	color: #e06000;
	text-decoration: none;
}

#content a:hover {
	color: red;
	text-decoration: underline;
}

#content p {
	letter-spacing: 0.02em;
	line-height: 1.4em;
	margin-top: 0.8em;
}

#content p.important {
	background: #f0f0f0;
	border: 2px solid #d0d0d0;
	padding: 1em;
	margin: 1.5em;
}

#content h2 {
	font-size: 1.75em;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
}

#content h3 {
	font-family: serif;
	font-size: 1.5em;
	margin-top: 1.0em;
	margin-bottom: 0.5em;
}

#content ul, #content ol {
	margin-left: 1.5em;
	margin-top: 1em;
}

#content ol {
	list-style-type: decimal;
}

#content ul li {
	list-style: square;
	margin-bottom: 0.75em;
	padding-top: 0.25em;
}

#content ul li p {
	margin-top: 0.25em;
}

/* content, news */

#news h3 {
	margin-bottom: 1em;
}

#news h4 {
	margin-bottom: 0.75em;
}

#news ul {
	padding-left: 0;
	margin-left: 0;
}

#news ul li {
	border-bottom: 1px #c0c0c0 dashed;
	list-style: none;
	padding-bottom: 1em;
}

/* image + description elements for publications, authors etc. */

hr {
	background: #e0e0e0;
	border: none;
	height: 5px;
	margin: 1.5em 0 1em 0;
}

div.publication , div.author {
	clear: both;
	padding-top: 2em;
}

div.img-container {
	display: inline-block;
	float: left;
	text-align: center;
	width: 10em;
}

div.img-container img {
	border: 2px solid gray;
	width: 120px;
}

div.author {
	margin-bottom: 2em;
}

#content div.author  div.desc-container h3 {
	margin-top: 0;
}

div.desc-container {
	display: inline-block;
	margin-left: 1em;
	width: 33em;
}

p.file-info, p.author-info {
	font-family: tahoma;
	font-size: 10pt;
	margin-bottom: 2em;
}

div.desc-container p {
	margin-bottom: 1em;
	vertical-align: top;
}


/* footer */

#footer {
	background: #c0c0c0 url('bug_small_gray.gif');
	background-position: center;
	background-repeat: no-repeat;
	border-top: 1px solid gray;
	color: #999;
	clear: both;
	font-family: tahoma;
	font-size: 8pt;
	height: 10em;
	margin: 3em 0 0;
	padding: 1em 1.5em 0.75em 1em;
}

#contact-info, #about-design {
	display: inline-block;
	width: 40%;
	vertical-align: top;
}

#contact-info {
	float: left;
	text-align: left;
}

#about-design {
	float: right;
	text-align: right;
}

#footer p {
	line-height: 1.25em;
	margin-bottom: 0.5em;
}

#footer a {
	color: #999;
	text-decoration: none;
}

#footer span {
	font-weight: bold;
}

#footer a:hover {
	color: #666;
}

/* general */

.italics {
	font-style: italic;
}