body {
	font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
	margin:0px;
	padding:0px;
	background-color:#fff;
}
p, table {margin:5px;}

div.content {padding:0px;margin:0px;font-size:0.8em;background-color:#fff;}
div.content p {padding-bottom: 10px;}
div.content h2 {margin:5px !important;}

/* ==================================================================================
   headers
================================================================================== */
h1, h2, h3, h4 {margin:5px; color: #063; font-family: verdana, arial, sans-serif;}
h1 {font-size:1.5em;} h2  {font-size: 1.2em;} h3 {font-size:1.1em;} h4 {font-size:1em;}

/* a textcue is a block heading that will appear in a text browser in place of an image header */
h1.textcue, h2.textcue {display: none;}

h2.navcue span {
	display: inline;
	color: #fff;
	font-size: 0.65em;
}

h1.subtitle, h2.subtitle {color: #093;}

/* ==================================================================================
   links
================================================================================== */
a {color: #039;text-decoration:none;}
a:visited {color: #03c;} a:hover, a:focus, a:active {color: #03f;}

/* links that dont remember if they've been clicked */
a.nomemory:visited {color: #039;}
a.nomemory:hover, a.nomemory:focus, a.nomemory:active {color: #03f;}
a.container {border:none !important;}
a img {border:none;}


a[rel=external]:after {content: " " url(icn_externallink.png)}


/* ==================================================================================
   tables
================================================================================== */
table {border-collapse: collapse;}
th {color: #fff; background: #063;}
th a {color: #FFF;}
td, th {padding: 3px;}

/* table with the css equivalent of cellpadding=0  */
table.nopadding th, table.nopadding td {padding: 0px;}

/* table with the css equivalent of border=1 */
table.bordered th, table.bordered td {border: 1px solid #666;}

/* style to highlight a single row in a table */
tr.highlight {color: #000;	background: #FFC;}

/* ==================================================================================
   containers for inset images or text boxes
================================================================================== */
/* text boxes */
div.insetbox {
	border: 1px solid #666;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	padding: 10px;
	background: #cdd5e4 url(bg_insetbox.gif) repeat-x;
}
div.insetbox h3 {
	text-align: center;
	color: #fff;
	margin: 0px;
}

/* images */
div.insetimage {
	padding: 5px;
	text-align: center;
	font-weight: bold;
}
div.insetimage h3 {margin: 0px;}
div.insetimage span {display: block;}

/* image with a callout (a border) */
div.insetimage img.callout {
	border: 1px solid #666;
	border-right: 3px solid #000;
	border-bottom: 4px solid #000;
}

/* styles to position the inset box */
.box-left {margin-right: 15px; float: left;}
.box-right {margin-left: 15px; float: right;}
.box-middle {margin: auto;}

.image_dir_thumb {float:left;padding:10px;}
.image_dir_thumb a {padding:5px;}
.image_dir_caption {display:block;text-align:center;}

/* ==================================================================================
   additional markups
================================================================================== */
.underline {text-decoration: underline;}
.strikethrough {text-decoration: line-through;}
.info {color: #093;}
.highlight {color: #FFF; background: #039;}
.warning {color: #900; font-weight: bold;}
em.legal {color: #999; font-size: x-small; font-style: italic;}
.subtitle {color: #063;font-weight:bold;}
.caption {color: #666;font-size:x-small;}

a.rssfeed {display:block;width:17px;height:17px;background-image: url(icn_rss.gif);}
a.rssfeed span {display: none;}

a.podcast {display:block;width:17px;height:17px;background-image: url(icn_itunes.gif);}
a.podcast span {display: none;}

a.audiofile {display:block;width:17px;height:17px;background-image: url(icn_audio.gif);}
a.audiofile span {display: none;}

/* ==================================================================================
   text boxes for code or quotes
================================================================================== */
code {
	display: block;
	overflow: auto;
	width:90%;
	margin:auto;
	border: 1px solid #039;
	background: #eee;
	font: 0.9em "Courier New", Courier, monospace;
}

blockquote {padding: 17px 5px 25px 5px; color:#009;}
blockquote p.citation {float: right; font-style: italic;}
blockquote p, blockquote.callout p {font-family: "Century Schoolbook", Garamond, serif;}

/* a blockquote with an attractive background and a quote icon */
blockquote.callout {background: #eee url(bg_blockquote.gif) right top no-repeat;}


/* ==================================================================================
   icons for toggle groups (boxes that toggle open/closed
================================================================================== */
.togglegrp_cntrl {
	text-decoration:none;
	color:#000;
	cursor:pointer;
	padding-left:16px;
	background-repeat:no-repeat;
	background-position:0px 3px;	
}
.togglegrp_opened {
	background-image: url(common/icon/twistie/plus/icn_twisty_opened.gif);
}
.togglegrp_closed {
	background-image: url(common/icon/twistie/plus/icn_twisty_closed.gif);
}
.togglegrp_allopened {
	background-image: url(common/icon/twistie/plus/icn_twistyall_opened.gif);
}
.togglegrp_allclosed {
	background-image: url(common/icon/twistie/plus/icn_twistyall_closed.gif);
}

/* ==================================================================================
   box to display a "loading" prompt an an animated icon in the middle of a page.
   <div class="loadingprompt"><span>Loading...</span></div>
================================================================================== */
div.loadingprompt {
	background: url("common/icon/icn_loading.gif");
	background-repeat: no-repeat;
	background-position: 50px 10px;
	border:1px solid #666;
	background-color: #fc0;
	width: 100px;
	padding:30px 10px 10px 10px;
	margin: auto;
	position: absolute;
	top: 40%;
	right: 40%;
	left: 40%;
	text-align:center;
}