/* CSS Document */

* { margin: 0; padding: 0;}
html, body { font-family: "Georgia", "Times New Roman", serif; }
body { background: #000 url(/v2/images/bg.gif) repeat-y; font-size: 62.5%; /* Resets 1em to 10px */ }

h1 { margin-bottom: 2px;}
li { margin-left: 2em;}
p { margin-top: .3em; margin-bottom: .6em; font-size: 1.1em;}

a:link    { color: #660000;  }
a:visited { color: #666;}
a:hover   { color: #000;}
a:active  { color: #000;}

div#menu { width: 189px; height: 248px; background: url(/v2/images/menu_bg.png) no-repeat !important; /* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */ background: url(/v2/images/menu_bg.gif) no-repeat; position: absolute; left: 260px; top: 0; z-index: 100; }
#menu h1 { display: none; }
#menu a.homelink { 	text-indent: -999px; display: block; width: 90px; height: 163px; 	margin-left: 77px; margin-top: 20px; text-decoration: none; }
#menu ul { 	width: 99px; margin-left: 77px; margin-top: 0px; 	list-style: none; }
#menu li { margin: 0; padding: 0;}
a.menu { text-indent: -999px; width: 99px; height: 15px; display: block; text-decoration: none; z-index: 999;}
#menu .projects { background: url(/v2/images/menu.projects.gif) no-repeat;}
#menu .about { background: url(/v2/images/menu.about.gif) no-repeat; }
#menu .contact { background: url(/v2/images/menu.contact.gif) no-repeat;}
#menu .projects:hover { background-position: -99px;}
#menu .about:hover { background-position: -99px;}
#menu .contact:hover { background-position: -99px;}

a.next, a.prev { display: block; text-decoration: none; text-indent: -999px; position: absolute; left: 38px; top: 614px; width: 40px; height: 40px; z-index: 50;}
a.next {left: 875px;}

a.next:hover { background: url(/v2/images/arrow.next.gif) no-repeat 5px;}
a.prev:hover { background: url(/v2/images/arrow.prev.gif) no-repeat 5px;}

div#paper { width: 90px; height: 16px; background: url(/v2/images/paper_bg.jpg) no-repeat; position: absolute; left: 338px; top: 26px; padding-top: 40px; padding-left: 420px; }

#paper a:link { color: #333; font-weight: bold;}
#paper a:visited { color: #505050;}
#paper a:hover { color: #000;}
#paper a:active { color: #000;}

div.book { width: 930px; height: 591px; background: url(/v2/images/book_bg.jpg) no-repeat; overflow: hidden; position: absolute; left: 25px; top: 82px; z-index: 5; font-size: 1.2em;}
.smallcopyright {font-size:80%;}
#outernews { position:relative;  height:500px;}
#outernews object {float:left; width:263px;}
#outernews img{float:left; margin:160px 0px 0px 0px;}
#thumbs { position:relative; margin:150px 0px 0px 60px; }
#viewwindow {width:400px; margin:0px auto; }
#viewwindow img{margin:0px auto; }
#slideshownav {width:390px; margin:75px auto 0px auto; text-align:center;  }
#slideshownav img{margin:10px 0px;   }

div.pages { width: 886px; height: 567px; background: url(/v2/images/page_bg.gif) repeat-y; 	overflow: hidden; 	position: relative; top: 8px; 	padding: 1px; }
.pages a { text-decoration: none; background: url(/v2/images/underlined.jpg) no-repeat; background-position: 0px 2px;}
.pages a:hover { background: url(/v2/images/underlined_go.jpg) no-repeat;  background-position: 0px 2px;}
.pos-zero    { left: 12px;}
.pos-one     { left: 14px;}
.pos-two     { left: 16px;}
.pos-three   { left: 18px;}
.pos-four    { left: 20px;}
.pos-five    { left: 22px;}
.pos-six     { left: 24px;}
.pos-seven   { left: 26px;}
.pos-ultimo  { left: 28px;}

div.one, div.two {width: 390px; height: 525px; overflow: hidden; border: 1px solid #000; margin: 8px;  padding: 10px; float: left; 	}
div.twoimg {  width: 410px; height: 545px; overflow: hidden; border: 1px solid #000; margin: 8px;  padding: 0px; float: left; 	}
div.two {float: right; 	}
div.twoimg {float: right; 	}
h1.copyright { font-size: 1.2em; margin-bottom: 0px;}
.one dl { width: 70%; margin-top: 2em;}
.one dt { font-weight: bold; clear: left;}
.one dd { margin-left: 1em;}
.one p {margin:0px;}
div.divider { margin: 0 auto; background: url(/v2/images/decor.jpg) center center no-repeat; width: 100%; height: 40px; margin-top: 60px; margin-bottom: 60px;}

div#LibraryData { border: 1px solid #333; background: #CECCB8; padding: 5px; margin-top: 10px; margin-bottom: 10px; }
#LibraryData p { margin-top: 1em; margin-bottom: .2em;  font-family: "Georgia", "Times New Roman", serif; font-size: .9em; }
#LibraryData p + p {text-indent: 2em; margin: 0;}
#LibraryData strong { background: url(/v2/images/highlighted.jpg) no-repeat; font-weight: normal;}
#LibraryData h4 { font-size: 10px;}


#ToC { margin-top: 100px;}
#ToC ol { margin-left: 4em;}
#ToC li { margin-bottom: .5em; font-size: 1.2em;}
#ToC #PreContent { list-style: none;}
#ToC #MainContents { list-style: none; list-style: upper-roman; margin-left: 3.5em;}
#ToC #MainContents li { font-size: 1.4em;}
#ToC #PostContent { list-style: none;}

#footer { width: 320px; position: absolute; left: 570px; top: 680px; color: #666; text-align: right;}
#footer p { font-family: "Georgia", "Times New Roman", serif;}	

.subcontents {margin: 0 auto; padding-top: 90px; text-align: center; width: 300px;}
.subcontents ol { text-align: left;border-top: 1px solid #000; margin-top: 20px; padding-top: 10px;font-size: 1.2em;}
.subcontents li { margin-top: .3em;}


/* specific to Home page */

.home div.two {	background: url(/v2/images/bunny_woodcarving.gif) top right no-repeat;}

div#makeitbigger {width: 194px; height: 192px; 	background: url(/v2/images/make_it_bigger.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/make_it_bigger.gif) no-repeat; 		position: absolute; left: 700px; top: 460px; 		z-index: 90; 		text-indent: -3000px; 	}

div#magicvials-tease { 	width: 240px; height: 231px; 	background: url(/v2/images/MagicVialsPostit.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/MagicVialsPostit.gif) no-repeat; 		position: absolute; left: 700px; top: 450px; 		z-index: 102; 	}

#magicvials-tease a.reellink { 
text-indent: -999px; 		display: block; width: 240px; height: 231px; 			text-decoration: none; 		}

div#wehaveablog { 	width: 284px; height: 294px; 	background: url(/v2/images/WeHaveABlog.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/WeHaveABlog.gif) no-repeat; 		position: absolute; left: 898px; top: 473px; 		z-index: 101; 	}

#wehaveablog a.bloglink { 
text-indent: -2999px; 		display: block; width: 284px; height: 294px; 			text-decoration: none; 		}

/* specific to Reel page */

.reel { width: 360px; height: 290px; margin: 0 auto;}
.reels { width: 100%; margin: 0 auto; margin-left: 25px;}
.reels a:link { background: none; }
.reels a:visited { background: none; }
.reels a:hover {background: none; }
.reels a:active {background: none; }

/* specific to Projects pages */

div#magicvials { 	width: 421px; height: 295px; 	background: url(/v2/images/MagicVialsPostcard.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/MagicVialsPostcard.gif) no-repeat; 		position: absolute; left: 40px; top: 400px; 		z-index: 101; 	}

#magicvials a.reellink { 
text-indent: -999px; 		display: block; width: 421px; height: 295px; 			text-decoration: none; 		}

div#reeltape { 		width: 229px; height: 304px; 	background: url(/v2/images/reel.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/reel.gif) no-repeat; 		position: absolute; left: 65px; top: 400px; 		z-index: 101; 	}

#reeltape a.reellink { 
text-indent: -999px; 		display: block; width: 229px; height: 304px; 			text-decoration: none; 		}

.projects #howconvenient { margin-top: 180px; float: right;}
.projects h2 { text-align: center; font-size: 1.1em; margin-bottom: 10px;}
.projects .furthermore { border-top: 1px solid #000; padding-top: 10px; margin-top: 14px;}
.furthermore ul { margin-top: 8px;}
.projects .furthermore ol {text-align: left; margin-top: 10px; padding-top: 10px; font-size: 1.2em;	}

/* deprecated video div positioning 
.video { margin-top: 10px; margin-bottom: 15px; padding: 1px; padding-bottom: 0; background: #333; position: relative; left: -3px; width: 320px;}
*/

.video { margin-top: 10px; margin-bottom: 15px; padding: 1px; padding-bottom: 0; background: #333; margin: 0 auto; text-align: center; width: 320px; color: #efefef;}

/* specific to Contact page */

.contact .building { 
width: 221px; height: 362px; 		background: url(/v2/images/springtower.png) no-repeat !important; 		/* this overrides the previous declaration in IE - modern browsers get PNGs, IE gets GIFs */
background: url(/v2/images/springtower.gif) no-repeat; 		position: absolute; left: 30px; top: 160px; 		z-index: 101; 		text-indent: -999px; 	}

.contact div.two { padding-top: 20px; height: 470px;}


.contact p { font-size: 1.2em;}

.contact dl { margin-bottom: 20px;}

.contact dt { font-weight: bold;}
.contact dd { margin-left: 3em; margin-bottom: 5px;}

.contact form { padding: 20px; background: #cab58f; margin: 0 auto; text-align: center;  width: 80%;}
.contact form td { padding: 4px;}
/*.contact form input { display: inline; float: left;}*/

/* specific to About pages */

.about h2 { text-align: center; margin-bottom: 15px;}
.about p { font-size: 1.1em;}
.about ul  { margin-top: 10px; margin-bottom: 15px;}
.about .illo  { margin-top: 40px;}

/* object stuff here - object nesting validation technique:  http://realdev1.realise.com/rossa/rendertest/quicktime.html */

/* hides the second object from all versions of IE */
* html object.mov { 		display: none; 	}

/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mov/**/ { 		display: inline; 	}


/* hides the second object from all versions of IE >= 5.5 */
* html object.mov { 		display/**/: none; 	}	

a img {border: none; background-image: none; !important}