body {
	background-color: #000;
	margin: 0px;
	padding: 0px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #D7C6AF;
}

a {
	color: #ccc;
	text-decoration:underline;
}

a:hover { text-decoration:none; }

ul {list-style-type:none; margin:0px 0px 20px 10px; padding:0px;}
ul li {list-style-image: url('/img/bullett.gif');}


#page {
	background-image: url('/img/header.jpg');
	background-position: top center;
	background-repeat:no-repeat;
	width: 700px;
	margin:0 auto;
	padding: 0px;
	text-align:left;	
}

#page h1 {
	display: block;
	width: 223px;
	height: 34px;
	background-image: url('/img/johnottman.gif');
	background-position: center;
	background-repeat:no-repeat;
	margin: 0px;
	padding: 0px;
	position:relative;
	top: 10px;
	left: 20px;
}

#page h1 span {
	display: none;
}

div#nav {
	margin: 5px 0px 0px 30px;
	padding: 0px;
	width: 405px;
	height: 30px;
	position:relative;
}

div#nav ul {
	margin: 0px; 
	padding: 0px;
}

div#nav span {
	display: none;
}

div#nav ul li {
	list-style-type: none;
	display: inline;
	padding: 0px;
	margin: 0px;
}


div#nav ul li a:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
}

div#nav ul li.news a {
	float: left;
	display: block;	
	margin: 0px;
	padding: 0px;
	width: 87px;	height: 26px;
	background: transparent url("/img/nav/news.gif") top left no-repeat;
}


div#nav ul li.biography a {
	float: left;
	display: block;	
	margin: 0px;
	padding: 0px;
	width: 124px;	height: 26px;
	background: transparent url('/img/nav/biography.gif') top no-repeat;
}

div#nav ul li.projects a {
	float: left;
	display: block;	
	margin: 0px;
	padding: 0px;
	width: 107px;	height: 26px;
	background: transparent url('/img/nav/projects.gif') top no-repeat;
}

div#nav ul li.contact a {
	float: left;
	display: block;	
	margin: 0px;
	padding: 0px;
	width: 70px;	height: 26px;
	background: transparent url('/img/nav/contact.gif') top no-repeat;
}

div#column {
	float: left;
	width: 49%;
	padding:0px;
	margin:15px 0px;
}

#leftcol, #rightcol {
	float: left;
	width: 49%;
	margin:15px 0px;
}

#leftcol {
	margin-right: 5px;
}	


div#content {
	margin: -40px 0px 0px 0px;
	padding: 20px 10px 10px 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-image: url('/img/page.jpg');
	background-position: top left;
	background-repeat:no-repeat;	
}


div#content h2 {
	font-size: 30px;
	margin:20px 0px 5px -10px;
	height: 50px;
	padding:0px;	
	display: block;
}

/****** HEADERS *****/
h2.projects {
	background-image:url('/img/headers/projects.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.oldprojects {
	background-image:url('/img/headers/oldprojects.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.news {
	background-image:url('/img/headers/news.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.biography {
	background-image:url('/img/headers/biography.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.collaborators {
	background-image:url('/img/headers/collaborators.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.contact {
	background-image:url('/img/headers/contact.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}

h2.editorjohn {
	background-image:url('/img/headers/editorjohn.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
}



h3.filmcomposer {
	background-image:url('/img/projects/filmcomposer.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.filmeditor {
	background-image:url('/img/projects/filmeditor.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.filmdirector {
	background-image:url('/img/projects/filmdirector.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.televisioncomposer {
	background-image:url('/img/projects/televisioncomposer.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.compositions {
	background-image:url('/img/projects/compositions.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.shortfilms {
	background-image:url('/img/projects/shortfilms.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}

h3.miscprojects {
	background-image:url('/img/projects/miscprojects.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;
	height: 35px;
}



/**************************************************************************/

div#content h3 {
	font-size: 20px;
	margin:0px;
	padding:0px;
}

div#content h3.sub { font-size:15px; }

div#content p {
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

div#content ul.newsitems, div#content ul.articles {
	margin: 0px 0px 20px 0px;
	padding-left: 20px;
	list-style-type: none;
}

div#content ul.newsitems li {
	margin-bottom: 10px;
	color: #ccc;
}

div#content ul.articles li {
	margin-bottom: 3px;
	color: #ccc;
}

#collaborator  {
	padding: 0px;
	margin: 0px;
}

#collaborator h3 {
	text-align:center;
	margin:0px 0px 4px 0px;
	padding:0px;
}

#collaborator h4 {
	text-align:center;
	margin:0px 0px 4px 0px;
	padding:0px;
	font-style:italic;
	color: #eee;
}

p.header {
	font-size: 15px;
	font-weight:bold;
	color: #CC9900;
	margin:0px;
	padding:0px;
}

#publicity h2 {
	font-size: 30px;
	color: #fff;
	margin:20px 0px 5px 0px;
	padding:0px;	
}

div#project h2 {
	text-align: center;
	font-size: 30px;
	font-family:"Times New Roman", Times, serif;
	color: #EBCFB0;
	margin:20px 0px 25px 0px;
	padding:0px;
	display: block;
}

div#project h2 span.title {
	display:none;
}

div#project h2 span.year {
	font-size: 20px;
	color: #ccc;
	margin:0px;
	padding:0px;	
}

#project h3 {
	height: 30px;
	margin: 10px 0px 5px -5px;
}

#project h3.thoughts {
	color: #fc0;
	background-image:url('/img/projects/thoughts.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;	
}

#project h3.reviews {
	color: #fc0;
	background-image:url('/img/projects/reviews.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;		
}

#project h3.links {
	color: #fc0;
	background-image:url('/img/projects/links.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;		
}

#project h3.scoreinfo {
	color: #fc0;
	background-image:url('/img/projects/score-info.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;		
}

#project h3.quote {
	color: #fc0;	
	background-image:url('/img/projects/quote.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;		
}

#project h3.audio {
	color: #fc0;
	background-image:url('/img/projects/audio.gif');
	background-repeat: no-repeat;
	text-indent:-9999px;		
}



.return, .small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#valktext p {
	text-align:justify;
}


table#valk {
}

#valky {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
	font-style:italic;
	text-align:center;
}

table#valk tr td {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
	font-style:italic;
}



.topleft { float:left; margin:0px 10px 10px 0px;}
.topright { float:right; margin:0px 0px 10px 10px;}
.midleft { float:left; margin:10px 10px 10px 0px;}
.midright { float:right; margin:10px 0px 10px 10px;}
.bottomleft { float:left; margin:10px 10px 0px 0px;}
.bottomright { float:right; margin:10px 0px 0px 10px;}




div#footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #ccc;	
	text-align:center;
	margin:20px 0px;
}

div#footerimg {
	background-image: url('/img/footer.jpg');
	background-position: bottom center;
	background-repeat:no-repeat;
	width: 700px;
	height: 95px;
	margin:0 auto;
	margin-top: -60px;	
}