/*
All CSS Written and Maintained By Neal Grosskopf
Last Updated: 8/5/2010 8:15pm

I. Table Of Contents
	I. Table Of Contents
	II. CSS Variables
	III. CSS Image Preload
	1. Reset
	2. Tables
	3. Headings
	4. Anchors
	5. Form Elements
	6. General Classes
	7. Template & Layout
	8. Print
	9. Handheld
	10. CSS Diagnostics
	
Sizing in EMs
[If] Body = Parent .75em [Then] Number/12px = 0.0EMs
	11px      .9em
	12px     1.0em
	13px     1.1em
	14px     1.2em
	15px     1.25em
	16px     1.3em
	19px     1.6em
	
CSS References
	http://www.w3.org/TR/css3-selectors/#selectors
	http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
	http://developer.mozilla.org/en/docs/Writing_Efficient_CSS
	http://www.dustindiaz.com/css-shorthand/
	http://www.tanfa.co.uk/css/examples/
	http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Browser Hacks
	http://www.nealgrosskopf.com/tech/thread.asp?pid=20

IE Bugs
	http://css-class.com/articles/explorer/guillotine/
	http://www.satzansatz.de/cssd/onhavinglayout.html
	http://csscreator.com/node/472
	http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html
*/



/****************************************************************
 II. CSS Variables - Spec: http://disruptive-innovations.com/zoo/cssvariables/
****************************************************************/
/*
@variables {
Text: #555;

DarkGreen: #669933; = #5c8f29

DarkLimeGreen: #7e935a; = #748950
MediumLimeGreen: #949f74; = #8a956a
LimeGreen: #adb986; = #a3af7c
LightLimeGreen: #ccdb9f; = #c2d195

DarkBrown: #a7917b; = #9d8771
LightBrown: #b69f86; = #ac957c
}
*/



/****************************************************************
 III. CSS Image Preload - http://www.nealgrosskopf.com/tech/thread.asp?pid=24
****************************************************************/
#nav { background: url(/files/images/template/menu_bg-trans.png) no-repeat -9999px -9999px; }
#header { background: url(/files/images/template/helper_sub_bg-trans.png) no-repeat -9999px -9999px; }
#container { background:  url(/files/images/icons/actions/actions_sprite.png) no-repeat -9999px -9999px; }



/****************************************************************
 1. Reset  -  http://tantek.com/log/2004/undohtml.css  -  http://meyerweb.com/eric/tools/css/reset/
****************************************************************/
html, body, h1, h2, h3, h4, h5, h6, img, blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form, input, textarea, fieldset, pre
{ margin: 0px; padding: 0px; }

address { font-style: normal; }
acronym, abbr
{
border-bottom: 1px #ccc dashed;
cursor: help;
}

a img, img { border-width: 0px; }
a { text-decoration: none; }
img
{
display: block; /* http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps */
-ms-interpolation-mode: bicubic; /* http://css-tricks.com/ie-fix-bicubic-scaling-for-images/ */
}

ul, ol, p
{
margin-top: 1em;
margin-bottom: 1em;
}



/****************************************************************
 2. Tables
****************************************************************/
table, td, th
{
border-width: 0px;
vertical-align: top;
}

table 
{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
}

td, th
{
empty-cells: show;
margin: 0px;
padding: .3em;
}

th { text-align: center; }

table .def td { background: #fff; }
table .alt td { background: #f5f5f5; }
.data tr:nth-child(even) td { background: #fff; }
.data tr:nth-child(odd) td { background: #f5f5f5; }

caption, .caption
{
background: #d4e1ae -moz-linear-gradient(top, #ccdb9f 3px, #d5e2b0 4px, #dfe9c3 5px, #d4e1ae 13px) repeat-x; /* If IE */
background: #d4e1ae -webkit-gradient(linear, 0 0, 0 37, color-stop(0.08, #ccdb9f), color-stop(0.10, #d5e2b0), color-stop(0.13, #dfe9c3), color-stop(0.35, #d4e1ae)) repeat-x;
color: #666;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
}

.data { width: auto; }

.data, .data caption, .data th, .data td
{
border: 1px solid #ccc;
padding: 6px;
}

.data caption { border-bottom-width: 0px; }

.data th { background: #f5f8ec; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; }



/****************************************************************
 3. Headings
****************************************************************/
h1 { display: none; }

#header h2 /* If IE 6,7 */
{
color: #fff;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 45px;
position: absolute;
bottom: -22px;
right: 10px;
text-align: right;
z-index: 1;
}

#header h2 span /* If IE 6,7 */
{
background: url(/files/images/template/aside_bg.png) repeat-y right bottom;
display: block;
height: 21px;
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
}

#toolbar h2, #nav h2, #subnav h2, #footer h2 { display: none; }

#content h2, #content h3, #aside h3, #footer h3 { font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; }

#content h2
{
color: #9d8771;
font-size: 1.8em;
margin-bottom: 1em;
}

#aside h3, #footer h3 { font-size: 1.6em; }
#aside h3 { color: #8a956a; margin: 1.5em 0em 1em 0em; }
#footer h3 { color: #748950; margin: 1em 0em; }

#content h3, #content h4, #content h5 { margin: 1em 0em; }

#content h3
{
color: #5c8f29;
font-size: 1.5em;
}

#content h4 { font-size: 1.2em; }

#content h5 { font-size: 1em; }



/****************************************************************
 4. Anchors - Link - Visited - Hover - Focus - Active
****************************************************************/
#content a { padding-bottom: 1px; }
#content a:link { color: #748950; border-bottom: 1px solid #ccc; }
#content a:visited { color: #888; border-bottom: 1px solid #ccc; }
#content a:hover { color: #748950; border-bottom: 1px solid #ac957c; }
#content a:focus { outline-width: 0px; }
#content a:active { color: #748950; border-bottom: 1px solid #555; }

.unstyled { color: #555; border-width: 0px !important; /* IE needs !important */ }

#aside a, #font span { border-bottom: 1px solid #ac957c; color: #ac957c; }
#aside a:hover, #font span:hover { border-bottom-color: #988470; color: #988470; }

*[accesskey]:focus { outline: 1px solid #aaa; }

#content a[href^="mailto:"]
{
background: url(/files/images/icons/email.png) no-repeat center right;
padding-right: 20px;
}

#content a[href$=".pdf"]
{
background: url(/files/images/icons/page_white_acrobat.png) no-repeat center right;
padding-right: 18px;
}

#content a[href$=".css"]
{
background: url(/files/images/icons/css.png) no-repeat center right;
padding-right: 20px;
}

#htmltoolbar span
{
cursor: pointer;
padding: 4px 5px;
}

#htmltoolbar span, 
#content a.square, 
#content a.sqactive
{
background: #ccc -moz-linear-gradient(top, #fff 1px, #ccc 24px) repeat-x; /* If IE */
background: #ccc -webkit-gradient(linear, 0 1, 0 24, color-stop(0.0, #fff), color-stop(1.0, #ccc)) repeat-x;	
border: 1px solid #bbb;
font-family: Arial, Helvetica, sans-serif;
color: #777;
}

#htmltoolbar span:hover,
#content a.square:hover,
#content a.sqactive
{ border-color: #999; color: #000; }

#content a.square,
#content a.sqactive
{ padding: 6px 10px; font-weight: bold; margin-right: 2px; }

#pagination
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}

	#pagination li { float: left; margin-right: 4px; }

	#content #pagination li a
	{
	background: #ccc -moz-linear-gradient(top, #fff 1px, #ccc 25px) repeat-x; /* If IE */
	background: #ccc -webkit-gradient(linear, 0 1, 0 25, color-stop(0.0, #fff), color-stop(1.0, #ccc)) repeat-x;	
	min-height: 31px;
	border: 1px solid #bbb;
	border-radius: 2px;
	-o-border-radius: 2px;
	-icab-border-radius: 2px;
	-khtml-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	color: #777;
	display: block;
	font-family: Arial, Helvetica, sans-serif;	
	font-weight: bold;
	line-height: 2.60em;	
	padding: 0px 10px;	
	}

	#content #pagination li:hover a,
	#content #pagination li.sqactive a
	{ border-color: #999; color: #000; }



/****************************************************************
 5. Form Elements - http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
****************************************************************/
fieldset { border: 1px solid #f1f1f1; }

legend
{
color: #5c8f29;
font-weight: bold;
padding: 0px 10px;
}

#content input + label { font-weight: normal; }
#content label
{
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
}

#content label.selected { color: #9d8771; }

select, textarea, input, button
{
color: #666;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 1em;
outline-width: 0px; /* Removes mac outline */
}

button
{
background: #b09981 url(/files/images/template/button_bg.gif) repeat-x top left;
cursor: pointer;
border-radius: 2px;
-o-border-radius: 2px;
-icab-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
padding: 5px 8px; /* If IE 7 */
}

button:hover,
button:focus
{ border-color: #555; color: #333; }

button,
button:active
{ border: 1px solid #999; color: #666; }

textarea
{
background: #fff url(/files/images/template/textarea_bg.png) repeat-x left bottom;
border: 1px solid #ccc; /* For IE 6 */
overflow-y: auto;
resize: both;
width: 350px;
}
/* IF IE 7 */
#content input[type="text"],
#content input[type="password"]
{ min-width: 150px; }

#content input[type="text"] { background: #fff url(/files/images/template/input_focus_bg.png) no-repeat -9999px -9999px; }
#content input[type="text"]:focus { background-position: right 9px; }

textarea,
input[type="password"],
#content input[type="text"]
{ border: 1px solid #ccc; padding: 5px; }

textarea:focus,
input[type="password"]:focus,
#content input[type="text"]:focus
{ border: 1px solid #aaa; }

textarea, #preview_pane,
input[type="password"],
#content input[type="text"]
{
border-radius: 4px;
-o-border-radius: 4px;
-icab-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#content #honeypot
{
background: none;
border-width: 0px;
display: inline;
min-width: 30px;
vertical-align: top;
width: 30px;
}


/****************************************************************
 6. General Classes
****************************************************************/
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.middle { vertical-align: middle; }
.sub { vertical-align: sub; }
.sup { vertical-align: super; font-size: .8em; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.distribute { text-justify: distribute; }

.smallcaps { font-variant: small-caps; }
.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.o { text-decoration: overline; }
.s { text-decoration: line-through; }
.su { text-decoration: line-through underline; }

.ucase { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }

.slant { font-style: oblique; } /* http://usabletype.com/css/font/styles/ */
.indent { text-indent: 1em; }
.pre { white-space: pre; }
.clear { clear: both; }

.block { display: block; }
.inline { display: inline; }
.none { display: none; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.collapse { visibility: collapse; }

.circle { list-style-type: circle; }
.disc { list-style-type: disc; }

.dropcap:first-letter { font-size: 1.3em; font-weight: bold; }

.semitransparent { opacity: 0.75; }

ul.collapse
{
display: inline;
list-style-type: none;
list-style-position: inside;
margin: 0em;
padding: 0em;
}
ul.collapse li { display: inline; }

.hr
{
border-bottom: 1px solid #ccc;
clear: both;
height: 1px;
margin: 3em 0em;
text-align: center;
width: 100%;
}
hr { display: none; }

.url
{
color: #5c8f29;
font-family: "Consolas", "Courier New", Courier, mono;
}

.url em
{
background: #fafafa;
color: #333;
font-style: normal;
}

samp
{
background: #f5f5f5;
font-family: "Consolas", "Courier New", Courier, mono;
font-size: 1.1em;
}

.code
{
background: url(/files/images/template/code_bg.png) repeat left top;
border: 1px solid #ccc;
font-size: 12px;
list-style-type: none;
margin: 22px 0px;
padding: 0px;
overflow: auto;
width: 90%;
max-width: 550px;
box-shadow: 3px 3px 15px #ddd;
	-o-box-shadow: 3px 3px 15px #ddd;
	-icab-box-shadow: 3px 3px 15px #ddd;
	-khtml-box-shadow: 3px 3px 15px #ddd;
	-moz-box-shadow: 3px 3px 15px #ddd;
	-webkit-box-shadow: 3px 3px 15px #ddd;
}

ol .code { max-width: 500px; }

.code li
{
color: #5c8f29;
font-family: "Consolas", "Courier New", Courier, mono;
line-height: 0px; /* To remove white border issue */
white-space: pre;
}

.code { counter-reset: li; }
.code li:before
{
counter-increment: li;
content: counter(li) ". ";
background: #ececec;
border-right: 1px solid #ccc;
color: #555;
font-family: Arial, Helvetica, sans-serif;
margin-right: 20px;
/* EDIT: padding: 0px .5em 0px 3em; | 5px .5em 4px 3em | 0px .5em 0px 3em; */
padding-right: 5px;
text-align: right;
width: 50px;
display: inline-block;
line-height: 30px; /* Minumum line height = 24, smaller causes white border issue */
}

.code .alt { background: #f5f5f5; }
/*
.code li:nth-child(even) { background: #f5f5f5; }
.code li:empty { display: none; }
*/

::-moz-selection
{
background: #748950;
color: #fff;
}

::selection
{
background: #748950;
color: #fff;
}

blockquote blockquote
{
float: none;
width: auto;
}

blockquote blockquote p { padding-left: 40px; }

blockquote blockquote p:before
{
color: #ccc;
content: '\201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0em;
margin-left: -40px;
margin-right: 5px;
vertical-align: bottom;
}

.highlight, .error { color: #990000; font-weight: bold; }
.notice { background: #ffffcc; border: 1px solid #a2a282; padding: 0px 5px; }

.frame
{
background-color: #fff;
border: 1px solid #ccc;
opacity: 1.0; /* IF IE 7 */
padding: 10px;
box-shadow: 3px 3px 15px #ddd;
	-o-box-shadow: 3px 3px 15px #ddd;
	-icab-box-shadow: 3px 3px 15px #ddd;
	-khtml-box-shadow: 3px 3px 15px #ddd;
	-moz-box-shadow: 3px 3px 15px #ddd;
	-webkit-box-shadow: 3px 3px 15px #ddd;
}

.frame:hover
{
border-color: #c2d195;
opacity: 0.95; /* IF IE 7 */
}

#content img.loading { background: inherit url(/files/images/icons/loading.gif) no-repeat center center; }

.image-caption
{
background: #fcfcfc;
border: 1px solid #ddd;
border-bottom: 1px solid #888;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 15px;
}

.image-caption img { border: 4px double #ddd; }

	#content .image-caption h3
	{
	color: #666;
	font-size: 1.3em;
	margin: .3em 0em;
	}
	
	#content .image-caption h3 + p { margin-top: 0px; }

.bar
{
background: url(/files/images/template_medium/poll_bar.png) repeat-x top left;
height: 20px;
}

/* Calendar Style Month/Date */
#content .calendar /* If IE7 */
{
font-size: 1.3em;
float: left;
width: 45px;
}

	.month, .day
	{
	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	letter-spacing: -1px;
	text-align: center;
	}

	.month
	{
	font-size: 1em;
	text-transform: uppercase;
	}

	.day
	{
	font-size: 1.8em;
	font-style: italic;
	margin-top: -9px;
	}

/* Actions Dropdown Menu */
.actions
{
/* EDIT margin: -20px 0px .5em 0px; - cancelled out by property below */
height: 31px;
width: 100%;
}

.actions, .actions ul, .actions li
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

	.actions li
	{
	float: right; /* IF IE 6 */
	position: static; /* IE7 Bug Fix */
	width: 90px; /* IF IE 6 */	
	}

	.actions li:hover { position: relative; /* IE7 Bug Fix */ }	

	.actions ul li, .actions ul li:hover { position: static; width: 100%; }

	.actions li b
	{
	background: url(/files/images/template/actions_bg.png) no-repeat right top; /* IF IE 6 */
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-color: #fff;
	border-radius: 5px 5px 0px 0px;
		-o-border-radius: 5px 5px 0px 0px;
		-icab-border-radius: 5px 5px 0px 0px;
		-khtml-border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-webkit-border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-webkit-border-top-left-radius: 5px; /* Shorthand bug in Safari */
		-webkit-border-top-right-radius: 5px; /* Shorthand bug in Safari */
	color: #5c8f29;
	cursor: pointer;
	display: block;
	float: right;
	line-height: 20px;
	padding: 5px 10px;
	height: 19px;
	width: 70px !important;
	}

	.actions li:hover b
	{
	background: #fafafa url(/files/images/template/actions_bg.png) no-repeat right bottom;
	border-color: #eee;
	}
		.actions ul { display: none; }

		.actions li:hover ul
		{
		background: #fafafa;
		border-width: 1px;
		border-style: solid;
		border-color: #eee #eee #ddd #ddd;		
		border-radius: 3px 0px 3px 3px;
			-o-border-radius: 3px 0px 3px 3px;
			-icab-border-radius: 3px 0px 3px 3px;
			-khtml-border-radius: 3px 0px 3px 3px;
			-moz-border-radius: 3px 0px 3px 3px;
			-webkit-border-radius: 3px 0px 3px 3px;
			-moz-border-radius: 3px 0px 3px 3px;
			-webkit-border-top-left-radius: 3px; /* Shorthand bug in Safari */
			-webkit-border-bottom-right-radius: 3px; /* Shorthand bug in Safari */
			-webkit-border-bottom-left-radius: 3px; /* Shorthand bug in Safari */
		display: block;
		position: absolute;
		top: 29px;
		right: 0px; /* IF IE 6,7 */
		width: 175px;
		z-index: 2;
		}

		.actions a
		{
		border-bottom-width: 0px !important;
		display: block;
		padding: 4px 10px 7px 10px;
		}

		.actions a:hover { background-color: #f2f2f2; }

		/* Seperated, in case non-icon actions list is ever needed */
		.actions a
		{
		background-repeat: no-repeat;
		background-image:  url(/files/images/icons/actions/actions_sprite.png);
		padding-left: 30px;
		}

		/* Credit: http://www.famfamfam.com/lab/icons/silk/ */
		.rss { background-position: 5px -127px; }
		.add { background-position: 5px -30px; }
		.view { background-position: 5px -191px; }
		.stats { background-position: 5px -94px; }
		.thread { background-position: 5px -159px; }
		.search { background-position: 5px -62px; }
		.generic { background-position: 5px -3px; }

/* Readmore */
	#content a.readmore
	{
	background: #f5f5f5;
	border-bottom: 1px solid #ddd;
	border-radius: 0px 0px 5px 5px;
		-o-border-radius: 0px 0px 5px 5px;
		-icab-border-radius: 0px 0px 5px 5px;
		-khtml-border-radius: 0px 0px 5px 5px;
		-moz-border-radius: 0px 0px 5px 5px;
		-webkit-border-radius: 0px 0px 5px 5px;
		-webkit-border-bottom-left-radius: 3px; /* Shorthand bug in Safari */
		-webkit-border-bottom-right-radius: 3px; /* Shorthand bug in Safari */
	clear: both;
	color: #555;
	display: block;
	text-align: center;
	}

	#content a.readmore:hover
	{
	background: #f1f1f1;
	border-bottom-color: #ccc;
	color: #000;
	}

/* Thread comment styling: used in Forum and Gallery */
#thread
{
background: #f6f6f6;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
width: 100%;
}

	#thread th, #thread td
	{
	border-top: 1px solid #bbb; 
	border-left: 1px solid #bbb;
	}

	#thread th
	{
	border-left-width: 0px;
	padding: 5px;
	text-align: left;
	}

	#thread td { padding: 10px; }

	#thread .caption a
	{
	border-bottom-width: 0px;
	color: #fff;
	}

	#thread .caption .first-child
	{
	border-left: 1px solid #bbb;
	overflow: auto;
	width: 125px; 
	}

	#thread :target .left_col { background: #f2f6e6; }
	#thread :target .right_col { background: #fafcf6; }

	#thread .left_col { background: #f6f6f6; }

		.left_col img
		{
		display: block;
		margin: 5px auto;
		width: 100px;
		}

	#thread .right_col { background: #fff; }

		.subject_date { border-bottom: 1px solid #bbb; overflow: auto; /* IF IE 6 */ }

#thread_reply
{
background-color: #f6f6f6;
border: 1px solid #bbb;
width: 585px;
}

	#thread_reply .caption
	{
	border-bottom: 1px solid #bbb;
	padding: 6px;
	}

	#thread_reply th { padding: 5px; }
	#thread_reply td { padding: 10px; }

/* Comment styling: used in Blog, Tech, Openlinks, Openvideos, Reviews and Poll */
#content .comment
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

	#content .comment li
	{
	clear: both;
	margin-bottom: 2em;
	overflow: auto;
	}

	#content .comment code li {	margin-bottom: 0px;	}

	#content .comment .user
	{
	float: left;
	margin-right: 20px;
	text-align: center;
	width: 100px;
	}

	#content .comment .post
	{
	float: left;
	width: 77%;
	}

	#content .comment .info { overflow: auto; }

		#content .comment .counter
		{
		float: left;
		width: 20%;
		}

		#content .comment .counter a
		{
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: bold;		
		}		

		#content .comment h3
		{
		color: #a3af7c;
		float: right;
		font-size: 1em;
		font-weight: normal;
		margin: 0px;
		text-align: right;		
		width: 70%;
		}		

	#content .ng li
	{
	background: #fafcf6;
	border-right: 2px solid #e3ebcb;
	}

	#content .comment:target
	{
	background: #fafafa;
	border-right: 2px solid #ececec;
	}
	
/* Boxless Reply Form:: used in Blog, Tech, Openvideos, Reviews and Poll */
#reply {}
#replies { background:  url(/files/images/icons/actions/actions_sprite.png) no-repeat 0px -131px; text-indent: 22px; }
#content #replies a { border-bottom: 0px; }

/* Boxed in Reply Form: Used in Forum, Gallery & Open Links */
#reply_boxed { }



/****************************************************************
 7. Template & Layout - http://www.tutorialtastic.co.uk/page/create_a_tableless_layout
****************************************************************/
html, body { min-width: 980px; } /* Fixes 800x600 problem */

html
{
background: #fff url(/files/images/template_medium/html_bg.png) repeat-y center top;
font-size: 100%; /* http://www.alistapart.com/articles/howtosizetextincss */
overflow-y: scroll; /* http://webdevel.blogspot.com/2007/05/controlling-browser-scrollbars.html */
}

/* Displays stars to browsers supporting multiple backgrounds on screens wider than 1200px - http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/ */
@media screen and (min-width: 1200px)
{
html
{
background: url(/files/images/template/html_bg-trans.png), url(/files/images/template/star-bg.png), url(/files/images/template/star-bg.png);
background-repeat: repeat-y, no-repeat, no-repeat;
background-position: center top, -7% 1200px, 107% 2600px;
}
}

body
{
background: url(/files/images/template_medium/body_bg.png) repeat-x center 193px;
color: #555;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Garuda, Arial, Helvetica;
font-size: .75em; /* http://clagnut.com/blog/348/#c790 */
text-align: center; /* center things in <= IE6 */
vertical-align: baseline;
}

 /* Divits */
#wallpaper_bg { background: url(/files/images/template_medium/wallpaper_bg.jpg) no-repeat center top; }
#footer_bg { background: url(/files/images/template_medium/footer_bg.png) repeat-x center bottom; }
#sub_footer_bg { background: url(/files/images/template_medium/sub_footer_bg.png) no-repeat center bottom; padding-bottom: 50px; }

#container /* IF IE 7 */
{
margin: 0px auto;
text-align: left;
width: 900px;
}

#header
{
height: 221px;
position: relative;
}

	#toolbar
	{
	background: url(/files/images/template/toolbar_bg-trans.png) no-repeat center top; /* IF IE 6 */	
	height: 60px;
	width: 900px;
	position: absolute;
	top: -37px;
	left: 0px;
	-moz-transition: margin-top .5s linear;
	-webkit-transition: margin-top .5s linear;	
	}
	#toolbar:hover { margin-top: 0px; }

	/* First Level */
	#helper
	{
	float: left;
	margin: 5px 0px 0px 5px;
	padding: 0px;
	}

	#helper a
	{
	color: #666;
	text-decoration: none;
	}

	#helper li
	{
	background: url(/files/images/template/helper_a_bg-trans.png) no-repeat right top; /* IF IE 6 */
	display: block;
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 5px 25px 5px 7px;
	position: relative;
	}

	#helper li:hover { background-position: right bottom; }

	/* Second Level */
	#helper ul
	{
	background: url(/files/images/template/helper_sub_bg-trans.png) no-repeat left top; /* IF IE 6 */
	display: none;
	margin: 0px;
	padding: 0px;
	}

	#helper li:hover ul
	{
	display: block;
	position: absolute;
	top: 26px;
	left: 0px;	
	}

	#helper ul li,
	#helper ul li:hover
	{
	background-image: none;
	float: none;
	padding: 0px;
	}

	#helper ul li a
	{
	display: block;
	padding: 7px;
	width: 140px;
	}
	#helper ul li a:hover { color: #000; }

	#search
	{
	float: right;
	margin: 4px 0px 0px 0px;
	}

	#txtsearch
	{
	background: #fff url(/files/images/template/search_bg.png) no-repeat left top;
	border: 1px solid #999;
	color: #bbb;
	padding: 4px 4px 4px 32px;
	width: 120px;
	}
	
	#txtsearch:focus
	{
	background-position: left bottom;
	border-color: #666;
	outline-width: 0px;
	}

	#search button
	{
	background: none;
	border-width: 0px;
	color: #555;
	font-size: 12px;
	font-weight: bold;
	}

	#banner
	{
	border-width: 0px;
	height: 89px;
	width: 215px;
	position: absolute;
	top: 129px;
	left: 73px;
	}

#nav
{
position: absolute;
top: 152px;
left: 360px;
}

	#nav ul
	{
	display: block;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}

	#nav li
	{
	background: url(/files/images/template/nav_a-trans.png) no-repeat left top; /* IF IE 6 */	
	cursor: pointer;
	float: left;
	display: block;
	font-weight: bold;
	line-height: 33px; /* If IE 6 */
	margin-left: 5px;
	position: relative;
	height: 29px;
	width: 102px;
	}
	#nav li.selected, #nav li:hover { background-position: right top; }

		#nav li a {	border-bottom-width: 0px; color: #5c8f29; }
		#nav li:hover a { color: #5c8f29; }

		#nav #home { padding-left: 22px; }
		#nav #interact { padding-left: 15px; }
		#nav #designs { padding-left: 16px; }
		#nav #files { padding-left: 26px; }
		#nav #extras { padding-left: 20px; }

	#nav .first-child
	{
	background: url(/files/images/template/nav_a_sm-trans.png) no-repeat left top; /* IF IE 6 */
	width: 82px;
	}
	#nav .first-child:hover	{ background-position: right top; }	

		#nav div
		{
		background: url(/files/images/template/menu_bg-trans.png) no-repeat 1px bottom; /* IF IE 6 */
		border-color: transparent;
		border-style: solid;
		border-width: 0px 50px 50px 50px; /* IF IE 6 */
		cursor: default;
		display: none;
		font-size: .9em;
		min-width: 287px; /* IF IE 6 */
		/* http://www.dustindiaz.com/min-height-fast-hack/ */
		min-height: 165px;
		height: auto !important;
		height: 165px;
		position: absolute;
		top: 29px;
		left: -223px; /* IF IE 6 */
		z-index: 2;
		}

			#nav div ul
			{
			float: left;
			margin: 20px 15px 0px 15px;
			width: 105px;
			}

			#nav div .nav-left { border-right: 1px dotted #ccc; }

			#nav div li
			{
			background-image: none !important;
			color: #5c8f29;
			cursor: default;
			display: block;
			float: none;
			font-weight: normal;
			line-height: 1.35em;
			margin: auto auto 1em 0em;
			height: auto;
			width: auto;
			}

			#nav li:hover div { display: block; }

			#nav div a
			{
			border-bottom: 1px solid #f1f1f1;
			line-height: 16px;			
			}

			#nav div a:hover { border-bottom-color: #b79f87; }

#aside_bg /* DIVIT */
{
background: url(/files/images/template/aside_bg.png) repeat-y right top;
width: 900px; /* IF Firefox */
/* Edit: overflow: auto; */
}

/* @-moz-document url-prefix() { #aside_bg { width: 899px; } #aside { width: 214px; } }*/

.hide_aside #content { width: 850px; }
.hide_aside #aside { display: none; }
.hide_aside #aside_bg { background-image: none; }
.hide_aside #header h2 span { display: none; }

#content
{
line-height: 2.25em;
float: left;
padding: 29px 25px 35px 25px; /* IF IE 6 */
text-align: justify;
width: 585px; /* Full Width: 850 */
/* http://www.dustindiaz.com/min-height-fast-hack/ */
min-height: 486px;
height: auto !important;
height: 486px;
}

#footer { background: -moz-linear-gradient(top, #ccc 2px, #f4f4f4 2px, #fff 50px) repeat-x left top; }

.hide_aside #aside_bg { background: -moz-linear-gradient(bottom, #eee 0px, #f5f5f5 10px, #fff 50px, transparent 50px) repeat-x left top; }
.hide_aside #footer { background: -moz-linear-gradient(top, #ccc 2px, #eee 2px, #f1f1f1 5px, #fff 50px) repeat-x left top; } /* Offset - background: -webkit-gradient(linear, 0 0, 0 50, color-stop(0.0, #ccc), color-stop(1.0, #fff)) repeat-x left 2px; */

#aside + .clear { height: 0px; overflow: hidden; background: #ccc; }

#aside
{
float: right;
padding: 0px 25px;
width: 215px; /* IF Firefox */
}

	#font, #places
	{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}

	#font {	overflow: auto; margin-top: -10px; }

	#font li
	{
	display: inline;
	padding-right: 5px;
	}

		#font span { cursor: pointer; }

		#small_font { font-size: .75em; }
		#medium_font { font-size: 1.1em; }
		#large_font { font-size: 1.5em; }
		#extra_large_font { font-size: 1.8em; line-height: 1.8em; }

	#aside_search
	{
	background: #c2d195;
	height: 30px;
	width: 182px;
	overflow: hidden;
	position: relative;	
	}

		#aside_search label { display: none; }

		#aside_search_input
		{
		border: 1px solid #c2d195;
		color: #bbb;
		height: 21px;
		width: 143px;
		padding: 7px 0px 0px 7px;
		position: absolute;
		top: 0px;
		left: 0px;
		}

		#aside_search_button
		{
		height: 29px;
		width: 30px;
		position: absolute;
		top: 0px;
		right: 0px;
		}

	#places li { margin: 0px 0px 2.5em 10px; }

#footer
{
clear: both;
height: 225px;
}

	#col-site, #col-interact { float: left; margin-left: 30px; }

	#col-site {	width: 120px; }
	#col-interact {	width: 250px; }
		#col-interact ul { float: left; }
	#col-random
	{
	float: right;
	margin-right: 30px;
	width: 200px;
	}

		#footer ul
		{
		margin: 0px 0px 0px 15px;
		padding: 0px 0px 0px 20px;
		}

		#footer li { padding-bottom: 1em; }
		
		#footer li:hover { list-style-type: circle; }

		#footer a
		{
		border-bottom: 1px solid #9d8771;
		color: #9d8771;
		}

		#footer li:hover a
		{
		border-bottom-color: #8a956a;
		color: #8a956a;
		}

		#footer p
		{
		clear: both;
		color: #aaa;
		font-size: .8em;
		margin: 0px;
		text-align: center;
		}



/****************************************************************
 8. Print - http://www.alistapart.com/stories/goingtoprint/
****************************************************************/
@media print {

#header, #nav, #footer { display: none; }
#content { border-width: 0px; color: #000; float: none; padding: 0px; width: 6.7in; }
#content a { border-bottom-width: 0px; text-align: left; text-decoration: underline;  }
#content a:after { content: "...( " attr(href) " ) "; }
#content a[href^="/"]:after { content: " ( http://www.nealgrosskopf.com" attr(href) " ) "; }

}



/****************************************************************
 9. Handheld
****************************************************************/
@media handheld {

* { float: none !important; max-width: 100% !important; }

html, body { min-width: 100%; }

html, body, #wallpaper_bg, #footer_bg, #sub_footer_bg, #aside_bg { background-image: none; }

#header { height: auto; }

	#toolbar, h2#section, #nav h2 { display: none !important; }

	h1
	{
	background: url(/files/ico/favicon.ico) no-repeat 2px center;
	text-indent: 40px;
	display: block;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 2.4em;
	margin: 1em 0em 0em 0em;
	}
		h1 a { color: #5c8f29; }
		h1:hover a { color: #9d8771; }
			h1 em { display: block; font-size: .8em; }

	#nav { position: static; margin: 2em 0em; }

		#nav li
		{
		background-image: none;
		line-height: 1em;
		margin: 0px;
		position: static;
		height: auto;
		width: auto;
		}
			#nav li a
			{
			background: #ccc -moz-linear-gradient(top, #fff 1px, #ccc 24px) repeat-x;
			background: #ccc -webkit-gradient(linear, 0 1, 0 24, color-stop(0.0, #fff), color-stop(1.0, #ccc)) repeat-x;	
			border-top: 1px solid #ccc;
			display: block;
			line-height: 1em;
			padding: 10px 0px;
			text-indent: 10px;
			}

			#nav li a:hover { background-color: #ccc; background-position: left 0px; color: #333; }

			#nav #home, #nav #interact, #nav #designs, #nav #files, #nav #extras { padding-left: 0px; }

			#nav .first-child { background-image: none; width: auto; }

				#nav li div { display: none !important; }

#content, #aside { padding: 0px; }

	table { max-width: 50% !important; }
	
	td { display: block; }

	textarea { max-width: 225px !important; }

#col-site, #col-interact { margin-left: 0px; }

}



/****************************************************************
 10. CSS Diagnostics - http://www.nealgrosskopf.com/tech/thread.asp?pid=17
****************************************************************/
/* Empty Attributes */
img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""]
{ border: 5px dotted yellow !important; }

/* Proposed Deprecation Due To CSS */
body[background], table[background], td[background], th[background],
input[border], table[border],
table[cellpadding],
table[cellspacing],
object[codebase],
img[height], object[height], table[height],
a[name], form[name], img[name], object[name],
a[target], area[target],
td[valign], th[valign],
img[width], object[width], table[width]
{ border: 5px dotted orange !important; }

/* W3C HTML 4 Strict Deprecated Attributes - http://www.w3.org/TR/html401/index/attributes.html */
applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align],
body[alink],
applet[alt],
applet[archive],
body[background],
body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor],
img[border], object[border],
br[clear],
applet[code],
applet[codebase],
basefont[color], font[color],
dir[compact], dl[compact], menu[compact], ol[compact], ul[compact],
basefont[face], font[face],
applet[height], td[height], th[height],
applet[hspace], img[hspace], object[hspace],
script[language],
body[link],
applet[name],
hr[noshade],
td[nowrap], th[nowrap],
applet[object],
isindex[prompt],
hr[size], font[size], basefont[size],
ol[start],
body[text],
li[type], ol[type], ul[type],
html[version],
body[vlink],
li[value],
applet[vspace], img[vspace], object[vspace], 
hr[width], td[width], th[width], applet[width], pre[width]
{ border: 5px dotted red !important; }

/* Non W3C Proprietary HTML Attributes - http://en.wikipedia.org/wiki/Non-standard_HTML_tags#Proprietary_HTML_attributes */
body[bgproperties],
*[bordercolor], *[bordercolordark], *[bordercolorlight],
body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin],
table[frame]
{ border: 5px dotted magenta !important; }


/* Empty Elements */
/*span:empty, div:empty, li:empty, p:empty,*/ td:empty, th:empty 
{ border: 5px solid yellow !important; }

/* Proposed Deprecated Elements */
input[type="button"], input[type="reset"], input[type="submit"], tt, embed, big, small
{ border: 5px solid orange !important; }

/* W3C HTML 4 Strict Deprecated Elements - http://www.w3.org/TR/html401/index/elements.html */
applet, basefont, center, dir, font, isindex, menu, s, strike, u,
listing, plaintext, xmp
{ border: 5px solid red !important; }

/* Non W3C Proprietary HTML Elements - http://en.wikipedia.org/wiki/Non-standard_HTML_tags */
audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow
{ border: 5px solid magenta !important }


/* Deprecated Classes From V2 */
.toolbg, .ulnone, span.b, ul.list, .eleven,
.lines, .wide, .select, table.form, form td.b, table .top,
.gallerypic, .iegallery, .pic, .image, .transparent,
.wht, .blk, .blue, .dkgray, .ltgray, .brown, .quote, .greyhover
{ border: 5px groove red !important; }