/**
 * Stylesheet for <The Unit>
 *
 * @media	screen, projection
 * @copyright	Netlash <http://www.netlash.com>
 * @author	name <johan@netlash.com>
 */

/**
 * Fork onsite reset
 */

body, form, fieldset, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style:none; }
img, fieldset { border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table {  border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/**
 * Better defaults
 */

abbr, acronym { cursor: help; }

/**
 * Typography and text styles 
 */ 

body {
	font-size: 13px;
	line-height: 1.5;
	font-family: Arial, sans-serif;
	color: #484e51;
}

	#home { background: #E3E3E3 url(../images/bodybg.png) repeat-x; }
	#index { background: #E3E3E3 url(../images/bodybg2.png) repeat-x; }
	#index #container { background: url(../images/headerbg_index.png) no-repeat scroll top center; }

.colorInverse {
	color: #F4F4F4;
}

p {
	padding: 0 0 12px;
}

	#content ul {
		list-style: disc;
		padding: 0 0 12px;
	}
	
		#content ul ul,
		#content ol ul,
		#content ul ol,
		#content ol ol {
			padding: 0 0 0 20px;
		}
		
	#content ol {
		list-style-type: decimal;
		margin: 0 0 12px;
	}
	
	dl dt {
		font-weight: 700;
	}
	
	dl dd {
		padding: 0 0 6px;
	}

	table th {
		background: #FFF;
	}
	
	table td,
	table th {
		border: 1px solid #9b9b9b;
		padding: 3px 6px;
		font-size: 13px;
	}
	
	#secondaryContent td,
	#secondaryContent th {
		font-size: 11px;
	}
	
	fieldset.visiblefieldset {
		padding: 10px;
		border: 1px solid #9B9B9B;
		margin: 10px 0;
	}
		fieldset.visiblefieldset legend {
			font-size: 11px;
			border: 1px solid #9B9B9B;
			padding: 1px 13px;
			font-weight: 700;
			background: #EEE;
			margin: 0;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
	
	table caption {
		font-size: 11px;
		text-align: left;
		font-style: italic;
		font-family: Georgia, serif;
		padding: 0 0 3px;
		color: #808080;
	}
	
	input, select, textarea { font-family: Arial, sans-serif; font-size: 13px; }
	span.form-error { color: red; display: block; }
	span.form-success { font-weight: 700; }

	label { 
		font-weight: 700; 
		color: #272E32;
	}
		
	pre code, code {
		font-family: "Consolas", Monaco, "Courier New", Courier, fixedsys, monospace;
	}
	
	blockquote {
		background: url(../images/bquote.gif) no-repeat 0 1px;
		padding: 0 0 0 14px;
		position: relative;
		left: -12px;
		margin: 0 0 12px;
	}
	
		blockquote cite {
			text-transform: uppercase;
			font-style: normal;
			font-size: 11px;
			text-align: right;
			display: block;
			padding-top: 6px;
			color: #808080;
		}
		
		blockquote.pullquote {
			float: right;
			margin-left: 18px;
			width: 198px;
		}
	
	blockquote p {
		padding: 0;
		margin: 0 0 9px;
	}
	blockquote, q { font-style: italic; font-family: Georgia, serif; }
	
	small {
		font-size: 11px;
		font-family: "Lucida Grande", "Lucida Sans Unicode",  Verdana, sans-serif;
	}
	
h1, h2, h3, h4 { color: #272E32; }
.colorInverse h1, .colorInverse h2, .colorInverse h3, .colorInverse h4 { color: #FFF; }

h1, h2 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	h1 { font-size: 17px; border-bottom: 1px solid #CCC; padding: 0 0 3px; margin: 0 0 12px; }
	h2 { font-size: 15px; padding: 0 0 6px; }

h3, h4 {
	font-size: 13px;
	padding: 0 0 6px;
}
	.article h3 {
		line-height: 28px;
		padding: 0;
	}

h2 em, h3 em, p.readmore a {
	font-family: Georgia, serif;
	font-weight: 300;
}

p.readmore {
	text-align: right;
}

p.readmore a {
	font-style: italic;
}

#summary h2 {
	line-height: 28px;
}

h2 span {
	background: #666;
	color: white;
	width: 28px;
	height: 28px;
	display: inline-block;
	margin-right: 4px;
	text-align: center;
	line-height: 28px;
	font-size: 19px;
	/*-webkit-border-radius: 14px;*/
	/*-moz-border-radius: 14px;*/
	background: url(../images/cutout.png) no-repeat 0 0;
	_background: url(../images/cutout2.gif) no-repeat 0 0;
	font-family: "Times New Roman", Times, Georgia, serif;
}

	.catGreen h2 a, .catGreen p.readmore a { color: #9d9d00; border-color: #d9d9a5; }
	.catOrange h2 a, .catOrange p.readmore a { color: #e88a00; border-color: #eacb9e; }
	.catBlue h2 a, .catBlue p.readmore a { color: #3466c2; border-color: #afc5ed; }
	.catGreen h2 span { background-color: #9d9d00; }
	.catOrange h2 span { background-color: #e88a00; }
	.catBlue h2 span { background-color: #3466c2; }

	h2 span i {
		display: none;
	}

/* <hr> is used to divide content in a proper way for when CSS is off */
hr {
	display: none;
}

/* Links */
a:link { text-decoration: none; color: #272E32; border-bottom: 1px solid #B0B3B4; }
a:visited { text-decoration: none; color: #737677; border-bottom: 1px solid #d1d2d2; /* 33% of original visited color */ }
a:hover, a:active { color: #000; border-bottom: 1px solid #ABABAB; }

/* Links when color inversed */
.colorInverse a:link { color: #FFF; border-bottom: 1px solid #EEE; }
.colorInverse a:visited { color: #F0F0F0; border-bottom: 1px solid #DDD; }
.colorInverse a:hover, .colorInverse a:active { color: #FFF; border-bottom: 1px solid #ABABAB; }
#footer a:link, #footer a:visited { color: #899599; border-bottom: 1px solid #637277; }

/* Image replacement for the logo */
#header h1 {
	font-size: 36px;
	font-weight: 700;
	padding: 0; margin: 0;
	border: none;
	background: url(../images/logo.png) no-repeat;
	width: 99px;
	height: 41px;
	text-indent: -9000px;
}

#header h1 a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
}

/*
	Global structural
*/
#container {
	width: 901px;
	margin: 0 auto;
	background: url('../images/headerbg.jpg') no-repeat scroll top center;
}
#header { padding: 18px 0 0 18px; }
#index #header { height: 87px; }
#header #navigation { width: 720px; }
#header #logo, #header #navigation { float: left; padding-bottom: 18px; }
#home #content { width: 648px; float: left; }
#home #secondaryContent { width: 198px; float: left; margin-left: 18px;}
#index #secondaryContent { padding-top: 45px; }
#home #main { padding: 10px 0 18px 18px; }
#index #main { padding: 18px 0 18px; }

/* This is the copy in the header on the homepage*/
#intro {
	padding: 36px 0;
	clear: both;
}

#intro p {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-size: 16.4px;
	color: #DEE6EA;
	float: left;
	padding: 0;
	margin: 0;
}

#intro p strong {
	color: #E88A00;
}

#intro .last img {
	position: absolute;
	top: -98px;
	left: 92px;
}

#intro p.first {
	text-align: right;
	background: url(../images/leftbracket_intro.gif) no-repeat 0 5px;
	padding: 0 18px;
}

#intro p.first span {
	display: block;
	padding-left: 18px;
	padding-right: 0;
	position: static;
}

	#intro p span {
		display: block;
		padding-right: 36px;
		padding-left: 0;
	}

	#intro .last {
		position: relative;
		right: 18px;
	}

/* This is the 1-2-3 on the homepage */
#summary {
	background: #F4F4F4 url('../images/summarybg.png') repeat-x;
}
	
	#summary p {
		padding-left: 36px;
	}
	
	#summary .col {
		background: url('../images/summary_border.png') no-repeat top right;
		padding: 18px;
	}

	#summary .col-2 {
		width: 180px;
	}

/*
	Portfolio item on homepage
*/

#portfolio {
	background: #A8A871;
	min-height: 400px;
	height: auto !important;
	height: 400px;
}

#portfolio .bottom {
	background: #BBBB97;
	padding: 9px 0 9px 23px;
	border-top: 1px solid #e1e1cf;
}
	
	#portfolio .bottom .middleButton {
		margin: 0 5px;
	}
	
	#portfolio .bottom p {
		float: left;
	}
	
	#portfolio .bottom .buttonNext b,
	#portfolio .bottom .buttonPrevious b,
	#portfolio .bottom .buttonNext b span,
	#portfolio .bottom .buttonPrevious b span {
		padding: 0;
	}

	#portfolio .bottom .buttonPrevious span {
		height: 20px;
		width: 23px;
		padding: 0;
		text-indent: -9000px;
		background: url(../images/controls.gif) no-repeat top right;
	}

		#portfolio .bottom .buttonPrevious span:hover {
			background: url(../images/controls.gif) no-repeat right -20px;
		}

	.buttonNext,
	.buttonPrevious {
		padding: 0;
		display: inline-block;
		float: left;
		width: 23px;
	}
		
	#portfolio .bottom .buttonNext span {
		height: 20px;
		width: 23px;
		padding: 0;
		text-indent: -9000px;
		background: url(../images/controls.gif) no-repeat 0 0;
	}
		#portfolio .bottom .buttonNext span:hover {
			background: url(../images/controls.gif) no-repeat 0 -20px;
		}
		
#portfolio img {
	position: relative;
	bottom: 4px;
	background: #7D7D12;
	display: block;
}

#portfolio .pad {
	border-bottom: 1px solid #969665;
	height: 196px;
}

/*
	Main navigation
*/

#navigation ul {
	padding: 21px 0 0 36px;
}

#navigation li {
	float: left;
	padding-right: 18px;
}

/* Default state */
#navigation ul li a:link,
#navigation ul li a:visited {
	font-weight: 700;
	background: url(../images/navbg.png) no-repeat 0 -23px;
	border: none;
	color: #FFF;
	line-height: 23px;
	text-decoration: none;
	display: block;
	float: left;
	padding: 0 0 0 18px;
}

#navigation ul li a:link b,
#navigation ul li a:visited b {
	background: url(../images/navbg.png) no-repeat right -23px;
	display: block;
	padding: 0 18px 0 0;
}

/* Hover state */
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li a:focus {
	background: url(../images/navbg.png) no-repeat 0 -46px;
}

#navigation ul li a:hover b,
#navigation ul li a:active b,
#navigation ul li a:focus b {
	background: url(../images/navbg.png) no-repeat right -46px;
}

/* Selected state */
#header #navigation ul li.selected a { background: url(../images/navbg.png) no-repeat 0 0; }
#header #navigation ul li.selected a b { background: url(../images/navbg.png) no-repeat right 0; }
	/* Extra ID to take precedence in specifity */

/*
	Subnavigation
*/

/* Default state */

#subnavigation { 
	background: #CDCDB1;
	min-height: 24px;
	height: auto !important;
	height: 24px;
}

/* Subnavigation level 1 */

	/* Regular */

	#subnavigation ul li a:link,
	#subnavigation ul li a:visited {
		font-weight: 700;
		color: #FFF;
		line-height: 1.3;
		border-bottom: 1px solid #dadabe;
		text-decoration: none;
		display: block;
		padding: 4px 18px;
	}

	/* Hover */
	#subnavigation ul li a:hover,
	#subnavigation ul li a:active {
		background: #93907a;
	}

	/* Selected state */

	#subnavigation ul li.selected a:link,
	#subnavigation ul li.selected a:visited,
	#subnavigation ul li.selected a:hover,
	#subnavigation ul li.selected a:active { background: #565444; }
	
/* Subnavigation level 2 */

	/* Regular */
	#subnavigation ul li.selected li a:link,
	#subnavigation ul li.selected li a:visited {
		background: #CDCDB1;
		padding-left: 36px;
	}
	
	/* Hover */
	#subnavigation ul li.selected li a:hover,
	#subnavigation ul li.selected li a:active {
		background: #93907A;
	}

	/* Selected */
	#subnavigation ul li.selected li.selected a {
		background: #736F5C;
		padding-left: 36px;
	}

/* Subnavigation level 3 */

	/* Regular */
	#subnavigation ul li.selected li.selected li a:link,
	#subnavigation ul li.selected li.selected li a:visited {
		background: #CDCDB1;
		padding-left: 54px;
	}
	
	/* Hover */
	#subnavigation ul li.selected li.selected li a:hover,
	#subnavigation ul li.selected li.selected li a:active {
		background: #A29E86;
	}

	/* Selected */
	#subnavigation ul li.selected li.selected li.selected a {
		background: #A29E86;
		padding-left: 54px;
	}

/* Subnavigation newsArchive */

	/* don't show months */
	#subnavigation ul li ul li ul.subnavMonths {
		display: none;
	}
	
	#subnavigation ul li.selected ul li.selected ul.subnavMonths {
		display: block;
	}



/*
	Footer
*/

/* Sticky footer implementation */
html, body { height: 100%; }
#stickyfooterpush { height: 55px; }
#container { position: relative; margin: 0 auto -55px; min-height: 100%; height: auto !important; height: 100%; /* Min height fast hack */ }
#footer { height: 55px; position: relative;  }

#footer {
	clear: both;
	background: #46595e url(../images/footerbg.png) no-repeat bottom center;
	font-size: 11px;
}

	#footer .inner {
		width: 901px;
		border-top: 4px solid #3c464b;
		margin: 0 auto;
	}
	
	#footer ul {
		float: right;
	}
	
	#footer li {
		float: left;
		color: #CDCDCD;
		padding: 9px 18px 9px 0;
	}

/* Fork image classes */
.alignleft, img.alignleft {
	padding: 0 9px 0 0;
	float: left;
	clear: left;
}

.alignright, img.alignright {
	padding: 0 0 0 9px;
	float: left;
	clear: left;
}

.article img.alignleft {
	position: relative;
	top: 20px;
	padding-bottom: 20px;
}

#content .outset {
	margin-left: -234px;
	float: left;
	position: relative;
	_display: inline;
}
.outset-right {
	margin-right: -234px;
	float: right;
	position: relative;
	display: block;
}

/* News module */
	
#home #news {
	background: #F4F4F4;
	margin-top: 14px;
}

/* Date formatting */
.date { float: left; position: relative; right: 5px; top: 7px;}
.date * { display: block; text-align: center; width: 30px; color: #323739; }
.date .day { font-size: 19px; font-family: "Times New Roman", Times, Georgia, serif; line-height: 1; padding: 0 0 3px;}
.date .month { font-size: 11px; text-transform: uppercase; font-family: Georgia, serif; line-height: 1; color: #51626b; }

	#home .article {
		padding: 9px 0 18px 18px;
	}
	
	#news .last .article {
		position: relative;
		right: 18px;
	}
	
	.article {
		clear: both;
	}
	
	#news.browse .article {
		padding-bottom: 24px;
		border-bottom: 1px solid #CDCDCD;
		margin-bottom: 24px;
	}
	
	.bottom {
		padding: 9px 18px;
		background: #EAEADD;
		border-top: 1px solid #D3D3BA;
	}
	
/*
	Buttons
	Default button markup:
	<p class="button"><a href="#"><span>Button text</span></a></p>
*/

p.button {
	padding: 0;
	margin: 0;
}

p.button a:link,
p.button a:visited,
p.button b {
	background: url('../images/button_orange.png') no-repeat;
	height: 20px;
	display: block;
	line-height: 20px;
	font-size: 11px;
	color: #FFF;
	padding: 0 0 0 10px;
	float: right;
	font-weight: 700;
	border: none;
	text-align: center;
}

/* Substract padding */
.middleButton a {
	width: 85px;
}

.middleButton {
	width: 95px;
}

p.button a:link span,
p.button a:visited span,
p.button b span {
	background: url('../images/button_orange.png') no-repeat top right;
	display: block;
	padding: 0 10px 0 0;
}

p.button a:hover,
p.button a:active,
p.button b:hover {
	background: url('../images/button_orange.png') no-repeat 0 -20px;
}

p.button a:hover span,
p.button a:active span,
p.button b:hover span {
	background: url('../images/button_orange.png') no-repeat right -20px;
}

#portfolio p.button a:link,
#portfolio p.button a:visited,
#portfolio p.button b {
	background: url('../images/button_green.png') no-repeat;
}

#portfolio p.button a:link span,
#portfolio p.button a:visited span,
#portfolio p.button b span {
	background: #bbbb97 url('../images/button_green.png') no-repeat top right;
}

#portfolio p.button a:hover,
#portfolio p.button a:active,
#portfolio p.button b:hover {
	background: url('../images/button_green.png') no-repeat 0 -20px;
}

#portfolio p.button a:hover span,
#portfolio p.button a:active span,
#portfolio p.button b:hover span {
	background: #bbbb97 url('../images/button_green.png') no-repeat right -20px;
}

/* 
	Recipe for a delicious U-shape
		* A bit of non-semantic markup
		* Clever use of classes
	
	Use this markup:
	<div class="ushape">
		<div class="left">&nbsp;</div>
		<div class="right">&nbsp;</div>
	</div>
	
	* to flip the sides around, add a class flipped to the base div
	* to change colors, add a class us[Colorname], for available colors check CSS
*/

.ushape {
	width: 100%;
	background: url('../images/ushape_silver.gif') repeat-x 0 -8px;
	height: 8px;
	font-size: 8px;
	line-height: 1;
	position: relative;
}

.ushape * {
	width: 4px;
	position: relative;
	right: 4px;
	float: block;
	float: left;
	height: 8px;
} /* Since left and right are the only elements in div.ushape, we can safely use the star selector */

.ushape .left { background: url('../images/ushape_silver.gif') no-repeat 0 0; }
.ushape .right { background: url('../images/ushape_silver.gif') no-repeat right 0; float: right; left: 4px;}

/* ushape.flipped */
.flipped .left { bottom: 4px; }
.flipped .right { bottom: 4px; }

/* ushape.green */
.usGreen,
.usGreen .left,
.usGreen .right {
	background-image: url('../images/ushape_green.gif');
}

/**
 * Column system
 */
.col { width: 90px; padding-right: 18px; float: left; }
.col-2 { width: 198px; }
.col-3 { width: 315px; }
.col-4 { width: 414px; }
#content.col-4 { width: 378; padding-left: 18px; padding-right: 36px; }
.col-5 { width: 522px; }

.last { padding-right: 0; }
.first { padding-left: 18px; }
.pad { padding: 18px; }
.shift { position: relative; bottom: 4px; }

/**
 * Clearfix
 */
.clearfix:after, .cols:after, .button:after, .ushape:after, .article:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

p.backlink {
	text-align: right;
}

p.credit {
	font-size: 11px;
	padding-top: 5px;
	border-top: 1px solid #CDCDCD;
}

#newsdetail h3 {
	font-size: 16px;
	line-height: 34px;
	padding-bottom: 20px;
}

/**
 * Slideshow
 */
/* hide all slides */
.slideshowSlide {
	display: none;
}

/* show first slide */
.slideActive {
	display: block;
}

#slideshowPrev {
	cursor: pointer;
	float: left;
}

#slideshowNext {
	cursor: pointer;
	float: right;
}

.slideImg {
	height: 133px;
	width: 198px;
}

b, i {
	font-weight: normal;
	font-style: normal;
}

#login fieldset {
	border: 1px solid #CDCDCD;
	padding: 20px 20px 7px;
	background: #F0F0F0;
}

#login .form-error {
	display: block;
	padding-left: 170px;
	font-size: 11px;
}

#login label {
	width: 150px;
	float: left;
	text-align: right;
	padding-right: 20px;
	
}
#login input.input-submit {
	margin-left: 170px;
}

div.error-report {
	border: 1px solid #CDCDCD;
	padding: 10px 10px 0;
	background: #FFF;
	color: red;
	font-size: 11px;
	margin: 0 0 12px;
}