@import "reset.css";
@import "/thickbox/thickbox.css";

/* General Settings and Body
----------------------------------------------- */

body, html { width: 100%; height: 100%; }

body {
	margin: 0 auto;
	background: #2e2f32	url(img/background_main.png) repeat-x;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 14px;
	color: #424242;
	min-width: 1008px; max-width: 1160px;
}

.topPad { margin: 12px 0; }

/* Site Container
----------------------------------------------- */

#contentBox { width: 100%; height: 100%; }
#contentBox #leftArea {	width: 40px; background: url(img/content_backLeft.png) repeat-y top right; }
#contentBox #middleArea { background: #3c464f; padding: 0 24px; }
#contentBox #rightArea { width: 40px; background: url(img/content_backRight.png) repeat-y top left; }

/* Header
----------------------------------------------- */

#header { height: 170px; margin-bottom: 24px; background: url(img/header_middle.png); }
#headerLeft, #headerRight { width: 6px; height: 170px; background: no-repeat; }
#headerLeft { float: left; background: url(img/header_left.png); }
#headerRight { float: right; background: url(img/header_right.png); }
#logoArea { 
	height: 103px; 
	margin: 0 6px; padding: 32px 24px 0 0;
	text-align: right;
}

/* Site Navigation
----------------------------------------------- */

#navigation { float: left; height: 35px; background: url(img/navigation_background.png) repeat-x; }
#navigation .link { float: left; height: 35px; background: url(img/navigation_links.png) bottom right; }
#navigation .link a {
	display: block;
	float: left; 
	height: 27px;
	padding: 6px 12px 0;
	background: url(img/navigation_links.png) top right;
	font-weight: bold; color: #9fb5bf;
}
#navigation .link a:hover { background: none; color: #b4cbd5; }
#navigation #end { float: left; width: 8px; height: 35px; background: url(img/navigation_end.png) top left no-repeat; }

/* Sidebar
----------------------------------------------- */

#sidebar { width: 212px; float: left; }
#sidebar .header {
	width: 202px; height: 29px;
	background: url(img/sidebar_header.png) no-repeat;
	margin: 0 0 12px 0; padding: 7px 0 0 10px;
	font-weight: bold; color: #47522f;
}

#sidebar .imageBorder {
	width: 195px; height: 147px;
	margin: 0 auto 12px;
	padding: 3px 0 0 3px;
	background: url(img/sidebar_screenshotBorder.png);
}

#sidebar .linkTop, #sidebar .link { width: 208px; height: 32px; background: url(img/sidebar_link.png) 0 -38px; margin: 0 0 2px 0; }
#sidebar .linkTop { background-position: 0 -42px; }
#sidebar .link { padding-top: 4px; }
#sidebar .link a, .linkTop a {
	display: block;
	width: 184px; height: 26px;
	padding: 6px 0 0 24px;
	background: url(img/sidebar_link.png) 0 -4px;
	color: #94a0ac;
}
#sidebar .link a:hover, .linkTop a:hover { color: #c8de97; background: none; }

/* Content
----------------------------------------------- */

#content { margin-left: 236px; }

/* Content - Box Heading
----------------------------------------------- */

#content .heading { height: 32px; background: url(img/content_headMiddle.png) repeat-x; color: #color: #96acc1; }
#content .headLeft, #content .headRight { width: 7px; height: 32px; }
#content .headLeft { float: left; background: url(img/content_headLeft.png) top left no-repeat; }
#content .headRight { float: right; background: url(img/content_headRight.png) top right no-repeat; }

#content .heading h1, #content .footing h1 {
	display: table-cell;
	padding: 8px 0 0 6px;
	color: #afc6db;
	font-size: 16px; font-weight: bold;
}

#content .heading h2 {
	display: table-cell;
	padding: 0 0 0 8px;
	font-size: 12px; color: #96acc1;
}

#content .heading a { color: #96acc1; }
#content .heading a:hover { color: #a7bdd2; }

/* Content - Main Box
----------------------------------------------- */

#content .box { background: #dbdbdb; }

#content .boxTop, .boxTopGreen, .boxBottom { height: 6px; }
#content .boxTopLeft, .boxTopLeftGreen, .boxTopRight, .boxTopRightGreen, .boxBottomLeft, .boxBottomRight { width: 14px; height: 6px; }
#content .boxTopLeft, .boxTopLeftGreen, .boxBottomLeft { float: left; } #content .boxTopRight, .boxTopRightGreen, .boxBottomRight { float: right; }

#content .boxTop { background: url(img/content_boxTopMiddle.png); }
#content .boxTopGreen { background: url(img/content_boxTopMiddleGreen.png); }
#content .boxTopLeft { background: url(img/content_boxTopLeft.png); }
#content .boxTopLeftGreen { background: url(img/content_boxTopLeftGreen.png); }
#content .boxTopRight { background: url(img/content_boxTopRight.png); }
#content .boxTopRightGreen { background-image: url(img/content_boxTopRightGreen.png); }
#content .boxBottomLeft { background: url(img/content_boxBottomLeft.png); }
#content .boxBottomRight { background: url(img/content_boxBottomRight.png); }
#content .boxBottom { background: url(img/content_boxBottomMiddle.png); }

#content .boxMiddle { background: url(img/content_boxMiddleLeft.png) repeat-y top left; }
#content .boxMiddleGreen { background: url(img/content_boxMiddleLeftGreen.png) repeat-y top left; }
#content .boxMiddleRight { width: 100%; background: url(img/content_boxMiddleRight.png) repeat-y top right; }
#content .boxMiddleRightGreen { width: 100%; background: url(img/content_boxMiddleRightGreen.png) repeat-y top right; }

#content .boxWrap { padding: 8px 24px; }
#content .boxWrapGreen { margin: 0 11px; background: #a9b79a; border-bottom: 1px solid #70835d; }
#content .boxWrapGreen img { margin-left: 2px; }

#content .footing { background: #4c5966; margin: 0 0 24px; }
#content .footing p { font-size: 12px; color: #8294a4; }
#content .footTop { background: url(img/content_footTopLeft.png) repeat-y top left; }
#content .footRight { width: 100%; background: url(img/content_footTopRight.png) repeat-y top right; }
#content .footBottom { height: 6px; background: url(img/content_footBottomMiddle.png) repeat-x; }
#content .footBottomLeft, .footBottomRight { width: 14px; height: 6px; }
#content .footBottomLeft { float: left; background: url(img/content_footBottomLeft.png); }
#content .footBottomRight { float: right; background: url(img/content_footBottomRight.png); }
#content .footWrap { padding: 8px; }

/* Content - Featured Projects Area
----------------------------------------------- */

#content .middleFeature { overflow: auto; padding: 8px; }
#content .leftSide { float: left; width: 49%; }
#content .rightSide { float: right; width: 49%; }

#content .middleFeature h1 {
	margin: 0 0 8px 0; padding: 0 0 2px 0;
	font-weight: bold; color: #596052;
	border-bottom: 1px dotted #798c66;
}
#content .middleFeature h2 { font-size: 12px; font-weight: bold; color: #70835d; }
#content .middleFeature p { color: #596052; }
#content .middleFeature p > a { color: #507427; border-bottom: 1px dotted #6a7261; }
#content .middleFeature p > a:hover { color: #7d8774; }
#content .middleFeature img { margin: 4px 0 0 4px; }

/* Content - Headers and other Typography
----------------------------------------------- */

#content p { margin: 0 8px 12px; }
#content p > a, li > a, td > a { color: #1e7fca; }
#content p > a:hover, li > a:hover, td > a:hover { color: #55a5e3; }
#content ul { margin: 0 8px 0 40px; list-style: url(img/bullet_arrow.png) disc; }
#content li { margin: 0 0 12px; }
#content h3 { font-size: 12px; font-style: italic; color: #676767; text-align: right; margin: 0 0 8px; }
#content h4 { font-size: 18px; color: #626a54; margin: 0 8px 12px; }
#content form { margin: 8px; }
#content .left { float: left; }
#content .right { float: right; }
#content .center { text-align: center; }
#content img { margin: 6px 8px; }

/* Big Header (For news posts mostly)
----------------------------------------------- */
#content .bigHeader { height: 66px; background: url(img/content_bigHeadMiddle.png); margin: 0 0 12px; }
#content .bhLeft, #content .bhRight { width: 3px; height: 66px; }
#content .bhLeft { float: left; background: url(img/content_bigHeadLeft.png); }
#content .bhRight { float: right; background: url(img/content_bigHeadRight.png); }
#content .bigHeader h1 {
	font-size: 24px; font-weight: normal; color: #576971;
	margin: 0 0 2px; padding: 12px 0 0 8px;
	letter-spacing: -1px;
}
#content .bigHeader h2 { color: #696969; padding: 0 0 0 8px; }
#content .bigHeader a { color: #1e7fca; }
#content .bigHeader a:hover { color: #55a5e3; }

/* Small Header (For page section division, etc.)
----------------------------------------------- */

#content .smallHeader, .smallHeaderGreen, .smallHeaderRed { height: 34px; background: url(img/content_smallHeadMiddle.png); margin-bottom: 12px; }
#content .shLeft, .shRight, .shGreenLeft, .shGreenRight, .shRedLeft, .shRedRight { width: 3px; height: 34px; }
#content .shLeft, .shGreenLeft, .shRedLeft { float: left; background: url(img/content_smallHeadLeft.png); }
#content .shRight, .shGreenRight, .shRedRight { float: right; background: url(img/content_smallHeadRight.png); }

#content .smallHeaderGreen { background: url(img/content_smallHeadGreenMiddle.png); }
#content .shGreenLeft { background: url(img/content_smallHeadGreenLeft.png); }
#content .shGreenRight { background: url(img/content_smallHeadGreenRIght.png); }

#content .smallHeaderRed { background: url(img/content_smallHeadRedMiddle.png); }
#content .shRedLeft { background: url(img/content_smallHeadRedLeft.png); }
#content .shRedRight { background: url(img/content_smallHeadRedRight.png); }

#content .smallHeader h1, #content .smallHeaderGreen h1, #content .smallHeaderRed h1 {
	font-size: 14px; font-weight: bold; color: #576971;
	padding: 6px 0 0 8px;
}
#content .smallHeaderGreen h1 { color: #535f45; }
#content .smallHeaderRed h1 { color: #865a5a; }

#content .spacer { height: 2px; background: url(img/content_spacerMiddle.gif) top center repeat-x; margin: 12px 0; }
#content .spacerLeft { float: left; width: 32px; height: 2px; background: url(img/content_spacerLeft.gif) top left no-repeat; }
#content .spacerRight { float: right; width: 32px; height: 2px; background: url(img/content_spacerRight.gif) top right no-repeat; }

/* Content - Comment/Download Box
----------------------------------------------- */

#content .commentArea { height: 26px; margin: 0 0 16px; }
#content .commentBox, .downloadButton { 
	width: 130px; height: 26px;
	float: right;
	background: url(img/content_commentBox.png) 0 26px;
}
#content .commentBox a, .downloadButton a {
	display: block; width: 130px; height: 21px;
	font-size: 12px; font-weight: bold; text-align: center; color: #51642c;
	padding: 2px 0 0;
}
#content .commentBox a:hover { background: none; color: #6c843c; }

#content .downloadButton { background: url(img/content_downloadButton.png) 0 26px; }
#content .downloadButton a { background: url(img/content_downloadButton.png); }
#content .downloadButton a:hover { background: none; }

/* Content - Table (for Project listing)
----------------------------------------------- */

#content table { width: 99%; background: #a9b79a; border: 1px solid #a9b79a; border-bottom: none; border-left: none; }
#content th, td { padding: 4px; }
#content th { color: #596052; }
#content td { background: #e7e7e7; border: 1px solid #a9b79a; border-top: none; border-right: none; }
#content td.alt { background: #dfdfdf; color: #808080; }

/* Content - Comment Form
----------------------------------------------- */

#comment, #author, #email, #url {
	background: #728597; border: 1px solid #353f48;
	padding: 4px;
	color: #353f48;
}

/* Footer
----------------------------------------------- */

#footer { margin: 0 0 12px 0; }
#footerGarbage { border-bottom: 1px dotted #5b6a78; }

#footer h1, #footer h2, #footer h3 { margin: 0 0 12px 0; font-size: 12px; font-weight: bold; color: #5b6a78; text-align: left; }
#footer h2 { text-align: right; }
#footer h3 { text-align: center; margin: 0; }
#footer p { font-size: 12px; font-style: italic; color: #7c8b98; line-height: 18px; }
#footer img { margin: 0px; }

#footer .leftSide { padding: 0 8px; }
#footer .rightSide { float: right; width: 64px; padding: 12px 8px 0; }
#footer .rightSide a { border: 0; }
#footer .clearSides { clear: both; }

#footer a { font-size: 12px; font-style: italic; color: #7c8b98; text-decoration: none; border-bottom: 1px dotted #7c8b98; }
#footer a:hover { color: #91a2b2; }