/* global whitespace reset (leftjustified.net)  */
* { padding: 0; margin: 0; }
img { border: 0; }
/*h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, fieldset, address { margin: 1em 0; }
li, dd { margin-left: 2em; }
fieldset { padding: .5em; }*/
/* end whitespace reset */

body {
	background-color: #000;
	font-size: 9pt;
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
	}

#page {
	padding: 0 0 30px 0;
	width: 800px;
	margin: 0 auto;
	text-align: left;
	}


/* Site header */

#site-header {
	height: 48px;
	position: relative;
	text-align: right;
	margin-bottom: 2px;
	}

#site-header #logo {
	position: absolute;
	left: 0;
	top: 0;
	}

#site-header #navigation {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 4px;
	font-size: 12px;
	}

#site-header #navigation a { text-decoration: none; color: #999; margin-right: 10px }
#site-header #navigation a:hover { color: #fff }

.blue #site-header #navigation a.hilited { color: #86D9F7 }
.orange #site-header #navigation a.hilited { color: #ED5611 }
.yellow #site-header #navigation a.hilited { color: #E9B02F }
.green #site-header #navigation a.hilited { color: #CCFF00 }


/* Site footer */

#site-footer {
	font-size: 11px;
	margin: 6px auto;
	}

#site-footer a { text-decoration: none; color: #999 }
#site-footer a:hover { text-decoration: none; color: #fff }

#site-footer .left { float: left }
#site-footer .right { float: right } /* currently used in the forum */

#site-footer .left a { margin-left: 10px }
#site-footer .right { margin-right: 10px }


/* Page header */

#page-header {
	height: 100px;
	width: 100%;
	position: relative;
	margin-bottom: 2px;
	background: url("/images/page-header-bg.gif") repeat-x #333;
	}
#page-header.no-subnav { height: 72px }

#page-header .title {
	position: absolute;
	left: 30px;
	bottom: 36px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-size: 18px;
	letter-spacing: 0.1em; /* looks better with Helvetica Neue */
	color: #fff;
	}
#page-header.no-subnav .title { bottom: 8px }

#page-header .title big {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: normal;
	margin-right: 1em
	}

#page-header #subnavigation {
	position: absolute;
	left: 30px;
	bottom: 10px;
	font-size: 12px;
	}

#page-header #subnavigation a { text-decoration: none; color: #999; margin-right: 10px; }
#page-header #subnavigation a:hover { color: #fff }

.blue #page-header #subnavigation a.hilited { color: #86D9F7 }
.orange #page-header #subnavigation a.hilited { color: #ED5611 }
.yellow #page-header #subnavigation a.hilited { color: #E9B02F }
.green #page-header #subnavigation a.hilited { color: #CCFF00 }

#page-header-image { margin-bottom: 2px }


/* Page content -- common styles */

#content {
	background-image: url( "/images/content-shadow.gif" );
	background-repeat: repeat-x;
	background-position: top;
	background-color: #fff;
	}


/* Site-wide text + link styles */

body { color: #000 } /* default text color */
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }

.black, .black a { color: #000 }
.black a:hover { text-decoration: underline }

.gray, .gray a { color: #76797C }
.gray a:hover { text-decoration: underline }

.dark-bg, .dark-bg a { color: #fff }
.dark-bg .gray, .dark-bg .gray a { color: #999 }
.dark-bg .gray a:hover { text-decoration: none; color: #fff }

.small { font-weight: normal; font-size: 11px; line-height: 14px }
.middle { font-weight: normal; font-size: 12px; line-height: 16px }
.large { font-weight: normal; font-size: 13px; line-height: 18px }

.small p { margin: 4px 0 }
.middle p { margin: 6px 0 }
.large p { margin: 8px 0 }


/* Site-wide headings */

h1, h2, h3 { line-height: 1.2; text-align: left; }
h1 { font-size: 30px; font-weight: normal; margin-bottom: 4px }
h2 { font-size: 20px; font-weight: normal; margin-bottom: 6px }
h3 { font-size: 14px; font-weight: bold; margin-bottom: 4px }

.cyan h1, .cyan h2, .cyan h3 { color: #00AEEF }
.blue h1, .blue h2, .blue h3 { color: #0088F0 }
.orange h1, .orange h2, .orange h3 { color: #ED5611 }
.yellow h1, .yellow h2, .yellow h3 { color: #E9B02F }
.green h1, .green h2, .green h3 { color: #53CC1F }

h4, h5, h6 { font-weight: normal; line-height: 1.3; color: #000 }
h5 { font-size: 14px; margin-bottom: 20px; }

.blue .dark-bg h1, .blue .dark-bg h2, .blue .dark-bg h3 { color: #86D9F7; font-weight: normal }
.orange .dark-bg h1, .orange .dark-bg h2, .orange .dark-bg h3 { font-weight: normal }
.yellow .dark-bg h1, .yellow .dark-bg h2, .yellow .dark-bg h3 { font-weight: normal }
.green .dark-bg h1, .green .dark-bg h2, .green .dark-bg h3 { color: #CCFF00; font-weight: normal }


/* Colored arrows */

.arrow-5-left { 
	padding-left: 10px;
	background-position: 0 3px;
	background-repeat: no-repeat;
	}

.arrow-7-left {
	padding-left: 12px;
	background-position: 0 3px;
	background-repeat: no-repeat;
	}

.cyan .arrow-5-left { background-image: url("/images/arrow-5-cyan.gif" ) }
.cyan .arrow-7-left { background-image: url("/images/arrow-7-cyan.gif" ) }

.blue .arrow-5-left { background-image: url("/images/arrow-5-blue.gif") }
.blue .arrow-7-left { background-image: url("/images/arrow-7-blue.gif") }

.blue .dark-bg .arrow-5-left { background-image: url("/images/arrow-5-lblue.gif") }
.blue .dark-bg .arrow-7-left { background-image: url("/images/arrow-7-lblue.gif") }

.orange .arrow-5-left { background-image: url("/images/arrow-5-orange.gif") }
.orange .arrow-7-left { background-image: url("/images/arrow-7-orange.gif") }

.yellow .arrow-5-left { background-image: url("/images/arrow-5-yellow.gif") }
.yellow .arrow-7-left { background-image: url("/images/arrow-7-yellow.gif") }

.green .arrow-5-left { background-image: url("/images/arrow-5-green.gif") }
.green .arrow-7-left { background-image: url("/images/arrow-7-green.gif") }

.green .dark-bg .arrow-5-left { background-image: url("/images/arrow-5-lgreen.gif") }
.green .dark-bg .arrow-7-left { background-image: url("/images/arrow-7-lgreen.gif") }

.gray .dark-bg .arrow-5-left { background-image: url("/images/arrow-5-gray.gif") }


/* Sidebar -- common styles */

#content .sidebar { width: 260px }

.blue #content .sidebar { background: url("/images/sidebar-shadow.gif") repeat-x #E6EAEC }

#content .sidebar-box { margin-top: 20px }

#content .sidebar .sidebar-margins { margin-left: 10px; margin-right: 10px; }

#content .dl-item-container { }

#content .dl-item {
	position: relative;
	width: 240px;
	height: 64px;
	margin-bottom: 4px;
	}

#content .dl-item a { text-decoration: none }
#content .dl-text { padding: 9px 10px 0 52px; }
#content .filename { font-weight: bold; font-size: 14px; color: #000; padding-bottom: 2px; }
#content .fileinfo { font-size: 11px; line-height: 14px; color: #76797C; }
#content .dark-bg .filename { color: #fff }
#content .dark-bg .fileinfo { color: #999 }
#content .dl-reflection { margin-top: -3px }


/* Other common styles */

.intro-text {
	font-size: 14px;
	line-height: 20px;
	color: #76797C;
	margin-bottom: 20px;
	}

.cyan .intro-text .hilite { color: #00AEEF }
.blue .intro-text .hilite { color: #0088F0 }
.orange .intro-text .hilite { color: #ED5611 }
.yellow .intro-text .hilite { color: #E9B02F }

hr { height: 1px; border: 0; border-top: 1px solid #ccc; background-color: transparent; }
.dark-bg hr { border-top: 1px solid #666 }

ul.arrow-list { padding-left: 14px; }
.cyan ul.arrow-list { list-style: disc outside url("/images/arrow-7-cyan.gif"); }
.blue ul.arrow-list { list-style: disc outside url("/images/arrow-7-blue.gif"); }
.orange ul.arrow-list { list-style: disc outside url("/images/arrow-7-orange.gif"); }
.yellow ul.arrow-list { list-style: disc outside url("/images/arrow-7-yellow.gif"); }

ul.arrow-list li { margin-bottom: 4px }

.infobox td { vertical-align: top }
.infobox .left { padding-right: 10px; vertical-align: top; text-align: right; width: 28px }
.infobox .right { padding-left: 10px; vertical-align: top; border-left: 1px solid #ccc }
.dark-bg .infobox .right { border-left: 1px solid #666 }