/* style.css */

/* 
  Use SSI include rather than @import to reduce the number of HTTP requests.
  @import must appear before any styles.
*/
/* general.css */

/* color.css */

/* #FFFFFF is white, #000000 is black */






/* make text brighter when background is made darker */








/* Body */
body {
	background-color: white;
	color: #202020;

	/* 5% left/right margins */
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* Links */
/* 
 *  Must be listed in 'link', 'visited', 'focus', 'hover', 'active' (LVFHA)
 *  order because a link can be in multiple states at the same time.
 */
a:link, a:visited {
	color: #660000;
}

a:hover, .has-para a:hover, .has-para a.minor:hover {
	color: #660000;
	/* clear dotted underline border */
	border-bottom-style: none;
	text-decoration: underline;
}

/* useful for places you want a 'id' 'a' link but not an href */
a.no-href:hover {
	/* do nothing */
	border-bottom-style: none;
	text-decoration: none;
}

a.txt2html:hover {
	/* must override inline styles output for RSS feed */
	text-decoration: underline !important;
}

a:active {
	color: #660000;
}

/* do not underline most links */
/* We don't use this in blog because we can't export the
 * style sheet via RSS */
a, a.minor {
	text-decoration: none;
}

a.no-href {
	/* do nothing */
	color: #202020;
}

p a, p a.minor, .has-para a, .has-para a.minor {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	border-bottom-color: #660000;
	padding-bottom: 0;
}

a.major, table.has-para a.major {
	text-decoration: underline;
	border-bottom-style: none;
}

h1, h2, h3, h4, h5, h6, b.contact-heading {
	color: #280028;
}

/* No link color for links in headings */
h1 a:link, 
h2 a:link, 
h3 a:link, 
h4 a:link, 
h5 a:link, 
h6 a:link,
h1 a:visited, 
h2 a:visited, 
h3 a:visited, 
h4 a:visited, 
h5 a:visited, 
h6 a:visited {
	color: #280028;
}

hr {
	height: 1px;	/* very thin */
	border: 0;	/* special property of hr */
	background-color: #280028; /* for FF */
	color: #280028; /* for IE */
}

ul {
	line-height: 150%;
}

.border {
	border-style: solid;
	border-width: 1px;
	border-color: #909090;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto; 
}

div#image-only {
	/* overridden later by Javascript */
	width: 85%;
}


span.toggle_video {
	/* move video line up close to the description */
	position: relative;
	top: -0.75em;
}

span.toggle_video img {
	height: 1.1em;
	vertical-align: text-top;
	text-decoration: none;
}

span.toggle_video a:hover {
	font-weight: bold;
	/* clear dotted underline border */
	text-decoration: none;
}

ul.location span.video img {
	height: 1em;
	vertical-align: middle;
}

span.duration {
	font-style: italic;
	color: #606060;
}




/* main.css */

div#main {
	width: 80%;
	margin-right: auto;
	float: left;
}

div#main-image-div {
	width: 70%;
	/* relative needed so inner divs anchors to this div */
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

div#main-top-div {
	display: none;
	/*
	 *  'absolute' reserves no space in the flow;
	 *  this allows "top" and "bottom" to overlap
	 */
	position: absolute;
	/* z-index is only honored by position: absolute, relative, fixed */
	z-index: 1;	/* on top */
}

div#main-bottom-div {
	/* positioned relative to outer div */
	position: relative;
	z-index: 0;
}

img#main-bottom-image {
	cursor: pointer;
}

div#main-action-div {
	text-align: center;
	font-style: normal;
	font-size: smaller;
}

div#main-bottom-location, div#main-top-location {
	float: left;
}

div#main-bottom-photographer, div#main-top-photographer {
	float: right;
}

.full-width {
	/* 
	 *  Percentages do not default down to lower elements
	 *  http://css-discuss.incutio.com/?page=UsingPercent
	 */
	/* width:  auto? */
	width: 100%;
}

div#title {
	font-family: sans-serif;
	margin-left: auto;
	margin-right: auto;
}

div#title img.icon {
	height: 64px; /* while the height isn't necessary, it speeds rendering */
	vertical-align: middle;
	border: none;
}

div#title img.title {
	height: 68px;
	vertical-align: middle;
	border-style: none;
}

/* Footer */
div#validator {
	float: right;
}

div#validator img {
	border-style: none;
	width: 35%;
	height: 35%;
}

div#footer {
	margin: 2em 0 2em;
	text-align: center;
	font-style: italic;
	font-size: smaller;
}

/* menu.css */

/* color.css */

/* #FFFFFF is white, #000000 is black */






/* make text brighter when background is made darker */








div.menu ul {
	list-style-type: none;
	/* override inconsistent browser defaults */
	padding: 0;
	margin: 0;
}

div.menu li {
	font-family: sans-serif;
}

div.menu li a, div.menu label {
	text-decoration: none;
	border-width: thin;
	border-style: ridge;
	/* do padding in 'a' so we highlight the entire display block */
	/* only paddding has background color, not margin */
	border-color: transparent;
}

div.menu li a {
	display: block;  /* allows entire area to be highlighted, clicked */
	padding: 0.25em 1em; /* top/bottom, right/left */
}

div.menu label {
	padding: 0.25em 0; /* top/bottom, right/left */
}

/* Add padding to 'a' element so highlighting on left is full width */
div.menu ul.submenu li a {
	/* indent submenus; necessary because we zeroed padding/margin above */
	padding-left: 2.2em;
}

/* Add padding to 'a' element so highlighting on left is full width */
div.menu ul.sub-submenu li a {
	/* indent submenus; necessary because we zeroed padding/margin above */
	padding-left: 4.4em;
}

/*
 *  All menus get hover border, active one in bold, inactive ones get grey background
 */

div.menu li a:hover, div.menu label:hover {
	border-color: #909090;
}

div.menu li a.active {
	font-weight: bold;
}

div.menu li a.inactive:hover {
	color: #860000;
	background-color: #ECECEC;
}

div.menu label:hover {
	background-color: #ECECEC;
}

/* 
 * Additions for horizontal menus
 */

div.menu-horizontal li {
	float: left;
}

div.menu-horizontal li a {
	padding: 0.25em 0.75em; /* top/bottom, right/left */
}

/* sidebar.css */
/* also contains CSS for years.html because the same hover is used */

/* color.css */

/* #FFFFFF is white, #000000 is black */






/* make text brighter when background is made darker */








div#sidebar {
	float: left;
	width: 15%;
	margin-top: 2%;
	margin-right: 4%;
	font-size: smaller; /* use smaller to avoid scaling font in IE */
}

div#div-random-image {
	overflow: hidden;
	height: 80px; /* 64 + 16 */
	margin-bottom: 16px;
}

div#div-random-image img.image-no-border {
	height: 64px;
	border: none;
}

div#div-random-image img.image-border {
	height: 64px;
	border-style: solid;
	border-width: 1px;
	border-color: #909090;
}


/* text.css */

.bold {
	font-weight: bold;
}

.italic, .em {
	font-style: italic;
}

.pre {
	font-family: monospace;
	white-space: pre;
}

.right {
	text-align: right;
}

/* pre-wrap and pre-line not supported by all modern browers */

.center {
	vertical-align: middle;
	text-align: center;
}

.smaller {
	font-size: smaller;
}

.smallcaps, .acronym {
	font-variant: small-caps;
}

.nowrap {
	white-space: nowrap;
}

.super {
	vertical-align: super;
}

.sub {
	vertical-align: sub;
}

.strike, .cancel {
	text-decoration: line-through;
}



/* table.css */

/* color.css */

/* #FFFFFF is white, #000000 is black */






/* make text brighter when background is made darker */








table.center, div.blog-detail table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* date, use first-child or [id] someday when better supported */
td.date {
	color: #280028;
	white-space: nowrap;
}

/* this is used in a <table> to top align all <td> elements */
table.td-valign-top td {
	vertical-align: top;
}

table.td-valign-middle td {
	vertical-align: middle;
}

table.td-padding td {
	padding: 0.5em;
}

/* map.css */

div.menu form.map_selection label {
	/* add extra top/bottom padding so there is space 
	   between the image and border */
	padding: 6px 0.1em 6px 0;
}

div.menu form.map_selection input {
	padding-right: 5px;
}

div.menu form.map_selection img.heading {
	padding: 0 5px;
}

div.mapsize {
/* Height is best in px, rather than % so the page can be rendered faster */
	height: 550px;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

div.infoBox {
    text-align: center;
    white-space: nowrap;
    margin: 0;
    padding: 2px 4px;
    border: 1px solid #555;
    font-weight: bold;
    /* colors from http://www.december.com/html/spec/colorsafecodes.html */
    color: black;
    background: #ffff99;
}

/* blog.css */

img.blog-category {
	border-width: 0px;
	padding-right: 4px;
}

div.blog td, div.blog-detail table {
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}



/* misc.css */

h1.gallery, h2.gallery, h3.gallery, h4.gallery, h5.gallery, h6.gallery {
	/* 
	 *  There is nothing above the heading, but prev, etc. pushed us down.
	 *  This is important for portait-oriented images.
	 */
	margin-top: -1em;
}

.no-spacing {
	border-spacing: 0px;
}

tr.add-padding td {
	padding: 1px 4px;
}

.cgi-bin-date {
	color: #BB0000;
}

.cgi-bin-dow {
	color: #0000AA;
}

.cgi-bin-time {
	color: #146000;
}

.cgi-cal-padding {
	padding: 0em 1em;
}

.bg-shadow {
	background-color: #DDDDDD;
}

.active-hash {
	background-color: #FCFF95;
	border-width: thin;
	border-style: ridge;
	border-color: #C8C8C8;
}

div.page-option {
	font-style: italic;
/*	float: right;*/
	text-align: center;
	margin-right: 2em;
}

.ajax {
	background-color: #F9DFDF;
	padding: 0 5px 0;
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0;

}

h4 img, img.heading {
	/* 1.5 * power of 2 (16) */
	max-height: 24px;
	padding: 0 20px;
	vertical-align: middle;
	border: none;
}


/* disqus.css */

div#comment-box {
	position: relative;
}

div#white-box {
	z-index: 1;
	position: absolute;
	/* 0.90 so underline shows in links */
	top: -0.90em;
	padding: 0;
	margin: 0;
	width: 66%;
	background-color: white;
}

div#white-box p {
	color: white;
}


/* at bottom to override styles above */
@media print {
	/* style-print.css */
	
	body {
		font-size: 90%;
	}
	
	div#sidebar {
		display: none;
	}
	
	div#footer {
		display: none;	/* no RSS item */
	}
	
	/* make text full black? */
	
	div#main {
		width: 95%; /* span full page width */
	}
}

/* style-handheld.css */

.handheld-only-display {
	display: none;
}

/* was max-device-width, not consistent, required reload */
/* http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html */
@media only screen and (max-width: 599px) {
	/* adjust for small screen */
	body {
		width: 94%;
	}

	div#main {
		width: 100%;
	}

	/* sidebar only displays on home page, so make it wide */
	div#sidebar {
		width: 85%;
	}

	div#sidebar {
		font-size: x-large;
	}

	/* reverse settings above */

	.handheld-no-display {
		display: none;
	}

	/* override value from above */
	.handheld-only-display {
		display: inline;
	}
}