/* CSS Document */
body {
	background: #900 url(/images/bg_bar.gif) top left repeat-x;
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0 auto;
	margin-top: 10px;
	text-align: center;
}
a {
	color: #f90;
}
a:visited {
	color: #fff;
	text-decoration: underline;
}
a:hover {
	background: #f90;
	color:#fff;
	text-decoration: none;
}
h1, h2, h3 ,h4, h5 {
	font-family: "Century Gothic","Avant Garde Gothic","Avant Garde","URW Gothic L",helvetica,sans-serif
}
.banner {
	margin: 2em 0;
}
.banner h1 {
	color: #f90;
	font-size: 250%;
	font-weight: bold;
	margin-bottom: 10px;
}
.banner a {
	text-decoration: none;
}
.banner a:hover h1 {
	color: #FFF;
}
h1 a {
	color: #f90;
	text-transform: uppercase;
}
h1 a:hover {
	background: none;
}
h1 a:visited {
	color: #f90;
}
img, a img{
	border: 0;
}
#container {
	margin: 0 auto;
	padding: 0;
	width: 800px;
}
#home {
	padding: 0;
}
#essay {
	margin: 0 auto;
}
#essay .horiz, #essay .vert {
	border: 0px solid #ccc;
	margin: 10px 0 25px;
	padding: 10px;
}
#essay .horiz {
	margin-left:23px;
	margin-right:23px;
}
#essay .vert {
	margin-left: 196px;
	margin-right: 196px;
}
#essay .vert img {
	width: 375px;
}
#essay .pano {
	margin: 10px 0 25px;
	padding: 10px 0;
}
#essay .pano img {
	margin: 0;
}
#essay .vert p, #essay .horiz p {
	padding: 0 15px;
}

#essay p {
	font-size: 110%;
}
/* New Image Layout */
.hidpi .photo_wrap {
	height: auto;
	margin: 0 auto 25px;
	width: 800px;
}
.hidpi img {
	border: 6px solid #CDF;
	height: auto;
	max-width: 100%;
}
.hidpi p {
	font-size: 110%;
	margin: 10px 20px 25px;
}

#about p, #books .title {
	text-align: left;
}
#home, #essay, #about, #contact, #training, #books, #archives {
	margin-top: 25px;
}
#about h3 {
	clear: both;
	text-align: right;
}

h1 {
	font-size: 200%;
	font-weight: normal;
}
h3 {
	font-size: 150%;
}

#tri, #run, #log {
	width: 33%;
	float: left;
	color: #fff;
}
#tri {
	width: 34%;
}
#tri, #log {
	width: 400px;
}
#tri p, #run p, #log p {
	padding: 10px 3px;
}
#run {
}
#books .title {
	position: relative;
	margin: 10px 0 5px 0;
	border-bottom: 1px solid #f90;
}
#books .last {
	border: 0;
}
#books .title img {
	margin-left: 10px;
	margin-bottom: 10px;
}
#books .title a img {
	margin: 0;
	border: 0;
}
#about img {
	margin-top: -1px;
}
#archives {
	margin: 0 22px;
}
#archives ul li {
	float: left;
	width: 225px;
	height: 225px;
	list-style-type: none;
}
#archives ul li span {
	color: #fff;
	font-size: 120%;
	font-weight: bold;
}
#archives ul li a {
	text-decoration: none;
}
#archives ul li a:hover {
	background: #900;
}
#archives ul li a:hover span {
	color: #f90;
}
#archives ul li a:hover img {
	border-color: #f90;
}
#archives ul li a:visited {
	color: #fff;
	text-decoration: none;
}
#archives ul li a img {
	border: 1px solid #fff;
}
#archives ul li.double {
	margin-left: 112.5px;
}
#archives ul li.single {
	margin-left: 225px;
}
#footer {
	clear: both;
	text-align: center;
	margin-top: 10px;
	padding-top: 5px;
	border-top: 2px solid #f90;
}
img.border {
	border: 1px solid #7A0000;
	background: #CDF;
	margin: 10px;
	padding: 6px;
	margin-bottom: 5px;
}
img.left, a img.left {
	margin-left: 0;
	margin-right: 1.5em;
	float: left;
}
img.right, a img.right {
	margin-left: 1.5em;
	margin-right: 0;
	float: right;
}

.clear {
	clear: both;
}

/**** MENU NAVIGATION ****/
#divNav {
	background: #b74c4c url(/images/bk-nav3.jpg) no-repeat top left;
	margin: 0;
	padding: 0;
	height: 150px;
	width: 800px;
}
#nav {
	position: relative;
	top: 125px;
	width: 800px;
}
#nav li ul, #nav li ul {
	margin: 0;
	padding: 0;
}
#nav a {
	text-decoration: none;
}
#nav li { /*float the main list items*/
	margin: 0;
	float: left;
	display: block;
	padding-right: 15px;
}
#nav li ul {
	display: none;
}
#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	position: absolute;
	top: 25px;
	left: 0;
	padding-top: 3px;
	background: #f90;
	height: 18px;
	width: 740px;
	padding-left: 60px;
}
#nav li.on ul {
	background: #f90;
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
	background: #f90;
}
#nav li a {
	color: #fff;
	display: block;
	font-weight: bold;
	overflow: hidden;
	padding: 0;
	width: 93px;
}
#nav li.on a {
	color: #f90;
}
#nav li.on ul a, #nav li.off ul a {
	border: 0;
	float: left; /*ie doesn't inherit the float*/
	color: #fff;
	width: auto;
	margin-right: 15px;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
	background: #f90;
}
#nav li.on ul {
	display: block;
}
#nav li.off:hover ul, #nav li.over ul {
	display: block;
	z-index: 6000;
}
#nav li.off a:hover, #nav li.on a:hover {
	color: #900;
}
/*do the image replacement*/
#nav li span {
	position: absolute;
	left: -9384px;
}
#liHome a, #liBooks a, #liPhotography a, #liTraining a, #liAbout a, #liContact a, #liArchives a {
	display: block;
	position: relative;
	height: 26px;
	background: url(/images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}
/*first, put the initial states in place*/
#liHome a {
	background-position: -510px -72px;
}
#liBooks a {
	background-position: 0 -72px;
}
#liPhotography a {
	background-position: -102px -72px;
}
#liTraining a {
	background-position: -204px -72px;
}
#liAbout a {
	background-position: -407px -72px;
}
#liContact a {
	background-position: -305px -72px;
}
#liArchives a {
	background-position: -611px -72px;
}
/*active area - for this demo - the code could be based on a body class, and probably work better.*/
#liHome.on a, body#idhome #liHome a {
 	background-position: -510px -0px;
}
#liBooks.on a, body#idbooks #liBooks a {
 	background-position: -0px -0px;
}
#liPhotography.on a, body#idphotography #liPhotography a {
 	background-position: -102px -0px;
}
#liTraining.on a, body#idtraining #liTraining a {
 	background-position: -204px -0px;
}
#liAbout.on a, body#idabout #liAbout a {
 	background-position: -407px -0px;
}
#liContact.on a, body#idcontact #liContact a {
 	background-position: -305px -0px;
}
#liArchives.on a, body#idarchives #liArchives a {
 	background-position: -611px -0px;
}
/*add selectors for the other li's and background-positions*/
/*hover states*/
#liHome a:hover, #liHome:hover a, #liHome.over a {
	background-position: -510px -36px;
}
#liBooks a:hover, #liBooks:hover a, #liBooks.over a {
	background-position: 0 -36px;
}
#liPhotography a:hover, #liPhotography:hover a, #liPhotography.over a {
	background-position: -102px -36px;
}
#liTraining a:hover, #liTraining:hover a, #liTraining.over a {
	background-position: -204px -36px;
}
#liAbout a:hover, #liAbout:hover a, #liAbout.over a {
	background-position: -407px -36px;
}
#liContact a:hover, #liContact:hover a, #liContact.over a {
	background-position: -305px -36px;
}
#liArchives a:hover, #liArchives:hover a, #liArchives.over a {
	background-position: -611px -36px;
}
/*subnav formatting*/
#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #f90;
	color: #fff;
	font-family: arial, verdana, sans-serif;
	font-size: small;
	height: 15px;
}
#nav li.on ul a {
	background: #f90;
}

/*----- Contact Form Display Elements --------*/

#formblock {
	padding:0px 5px 0px 20px;
	text-align: left;
}
form table, form {
	font-size:11px;
	padding:0;
	border-width:0;
}
form table td {
  width:100%;
  }
form table td, form table th {
  padding:3px 3px 3px 0px;
  font-weight:normal;
  }
form table td.label {
	width: 40px;
	}
form label {
  cursor:pointer;
  }
form input, form textarea, form select {
  margin:1px 0;
  font:110%;
  }
form input.text {
  background:#ddd;
  border:1px solid #ccc;
  border-color:#999 #ccc #ccc #999;
  color:#333;
  }
form textarea {
  background:#ddd;
  display:block;
  clear:left;
  width:90%;
  border:1px solid #ccc;
  border-color:#999 #ccc #ccc #999;
  color:#333;
  voice-family: "\"}\""; voice-family:inherit;
  width:95%;
  } html>body form textarea {width:95%;}
form input.text:focus, form textarea:focus {
  border-color:#666 #999 #999 #666;
  }
form input.button {
	padding:2px;
	border:1px solid #000;
	border-color:#999 #666 #666 #999;
	background:#ccc;
	color:#000;
	font:100% Verdana,Sans-serif;
}
form input.button:hover {
	background:#eee;
	cursor:pointer;
}
form input.button:active {
	background:#ccc;
	color:#000;
}

/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 Ð 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }

  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }

  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }

  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt;
    padding: 0pt;
    overflow: auto;
    letter-spacing: 0px;
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }

  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}

/**** SIFR CSS STYLINGS ****/
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced...
the negative-letter spacing in this case is used to make the browser text metrics
match up with the sIFR text metrics since the sIFR text in this example is so much
narrower... your own settings may vary... any weird sizing issues you may run into
are usually fixed by tweaking these decoy styles */

@media screen {
	.sIFR-hasFlash h1 {
		visibility: hidden;
		letter-spacing: 7px;
		font-size: 10px;
		height: 32px;
	}
	.sIFR-hasFlash h3 {
		visibility: hidden;
		letter-spacing: 7px;
		font-size: 10px;
		height: 22px;
	}
}