/*	==================================================
	SpiderFelt Style Sheet
	November 2008
	jeremycarlson.com
	--------------------------------------------------	*/

body { margin: 0;
text-align: center;
}


/*	==================================================
	NOTE:
	IE 6 & 5.x will need assistance re:
	PNGs			|	See Redstone site
	min-height...
	--------------------------------------------------	*/


body.fff { background: #fc0 }

#content {
	position: relative;
	width: 660px;
	min-height: 404px;
	background: #494949 url(woolly-blur.jpg) no-repeat 0 0;
	border: 1px solid #5c5c5c;
	margin: 80px auto 0;
	padding: 0;
	}

h1 {
	width: 214px;
	height: 50px;
	text-indent: -5000px;
	position: absolute;
	top: -39px;
	left: -3px;
	}

#footer {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 2px 0;
	}

#view-menu, #contact #intro {
	position: relative;
	z-index: 1;
	float: left;
	width: 250px;
	padding: 48px 0 30px;
	}

#contact #intro {
	width: 156px;
	padding: 48px 47px 30px;
	}

#contact #intro, #contact #intro * {
	text-align: right;
	}

#view-menu li {
	display: block;
	padding: 0 48px 0 0;
	text-align: right;
	}

#central, #form-div {
	position: relative;
	top: 0;
	margin: 4px 0 4px 257px;
	}

#contact {
	min-height: 396px;
	background: url(divider.png);
	margin: 0 4px;
	}

#central li {
	margin: 0 0 1.5em;
	}

.hidden { display: none }

.box em { display: block }

#topnav {
	position: absolute;
	top: -1.5em;
	right: 0;
	font-size: 1.5em;
	}

/*	==================================================
	JavaScript-dependent magic
	--------------------------------------------------	*/

.js #central {
	width: 100%;
	margin-left: 0;
	}

/* Make the images absolute */
.js #central .box {
	position: absolute;
	top: 0;
	right: 4px;
	}

.js #central li {
	clear: left;
	margin: 0;
	padding: 0 420px 6px 15px;
	}

.js #central .desc {
	background: url(arrow.gif) no-repeat right .4em;
	padding: 0 39px 0 20px;
	text-align: right;
	}

.js .box .caption {
	position: absolute;
	top: 1px;
	right: 1px;
	display: block;
	width: 379px;
	padding: 5px 8px;
	color: #555;
	text-align: right;
	}


.js .box .caption * { display: inline }

.js .caption em { color: #222; font-style: normal }

.js .caption:hover em { color: #000 }

#read .caption {
	font: 2.5em/2 Georgia;
	height: 395px;
	width: 395px;
	padding: 0;
	text-align: left;
	overflow: hidden;
	display: absolute;
	baseline: 3;
	}

.js #topnav em { display: none }
.js #topnav a:hover em { display: inline }

/*	===================================================
	Transparent backgrounds
	. . . . . . . . . . . . . . . . . . . . . . . . . . */

h1 {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
    //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='inc/spiderfelt.png');
	}

.js .box .caption {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
    //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='inc/white-35.png');
}

.js .box .caption:hover {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
    //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='inc/white-45.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
div#content[id] h1 { background: url(spiderfelt.png) no-repeat 0 0; }

.js .caption[class] { background: url(white-35-45-400tall.png) repeat-x 0 0; }
.js .caption[class]:hover { background-position: 0 -400px; }

/*	End of transparent backgrounds
	--------------------------------------------------	*/

/*	==================================================
	Typography
	--------------------------------------------------	*/

a { text-decoration: none }

strong { font-weight: bold; text-decoration: underline }

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%;
	color: #999;
	background: #3e2828 url(bg-gradient.png) repeat-x 0 0;
	}

#content {
	font-size: 1.2em;
	line-height: 1.5;
	}

#footer {
	font-size: 1.1em;
	text-align: right;
	}

body * { line-height: 1.5 }

#topnav a {
	font-size: 1em;
	color: #67a;
	}

a, #topnav em, #contact { color: #ccc }

a:hover { color: #eee }

a:hover strong { color: #fff }

.error {
	font-weight: bold;
	color: #ffc;
	}

#view-menu a, #intro h2 {
	font: 42px/36px Arial, Helvetica, Verdana, sans-serif;
	color: #67a;
	}

#view-menu a:hover { color: #78b }
#view-menu a.focus, #view-menu a.focus:hover, #view-menu a:active { color: #ccc }

#topnav em {
	font-size: 80%;
	font-weight: normal;
	}

input, textarea {
	color: #ddd;
	background: none;
	border: 1px solid #777;
	width: 270px;
	}

.autofill { color: #ddd !important; background-color: #333 !important } /* For Google Autofill */
.autofill.focus { color: #fff !important }

#googleblurb {
	width: 160px;
	position: absolute;
	bottom: 0;
	left: -225px;
	padding: 8px;
	font: 84.5%/1.2 Verdana, sans-serif;
	}

input { border-width: 0 0 1px }

input, select, textarea {
	font-size: 1.1em;
	padding: 1px;
	margin-bottom: .8em;
	}

input:focus, input.focus, textarea:focus, textarea.focus, label.focus {
	border-color: #aaa;
	color: #fff;
	}

form strong { text-decoration: none }

.main-set {
	padding-right: 20px;
	}

.req-set {
	padding: .8em 0;
	border-color: #569;
	border-width: 0 0 1px;
	border-top-color: #444; /* IE (7!) can't handle no top border?!? */
	}

.main-label, #results {
	float: none;
	position: absolute;
	left: -230px;
	top: 150px;
	width: 180px;
	}

.main-label, #results, #results .error { margin-top: 0; text-align: right }

textarea {
	height: 100px;
	min-width: 250px;
	max-width: 400px;
	background: url(woolly-blur.jpg) left bottom;
	font: inherit;
	}

#antispam {
	width: 5em;
	float: left;
	}

label.explain {
	text-align: left;
	clear: none;
	margin-left: 1em;
	width: 120px;
	}

label span { display: none }

input.checkbox, input.button {
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border-width: 0;
	width: auto;
	}

input.button {
	font-size: .9em;
	border-style: outset;
	padding: 3px 6px;
	background: #67a;
	color: #fff;
	margin-left: 1em;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}

fieldset fieldset label {
	display: block;
	float: left;
	clear: left;
	width: 6.6em;
	line-height: 1.4;
	text-align: right;
	padding: .4em 1em 0 0;
	}

label.check { margin-left: 6.6em }

#topnav em, #intro h2 { text-transform: lowercase }

#contact p { margin: 1em 0 }

#central img { border: 1px solid #3c3c3c }

#central a:hover img { border-color: #666 }

#footer a {
	display: block;
	width: 11em;
	padding-right: 60px;
	background: url(eyes.gif) no-repeat right 2px;
	text-indent: -5000px;
	}

#footer a:hover {
	text-indent: 0;
	background-position: right -74px;
	}

#footer a:focus { -moz-outline-style: none; /* fix for Firefox outlining link */ }



/*	=======================================================
	Easy Clearing - 'Clearfix'
	
	NOTE: The '.clearfix' class (or renamed equivalent)
	should be applied to the box CONTAINING the float.
	
	Documentation on the following '.clearfix' solution 
	to clearing floats at the end of boxes is found at
	http://www.positioniseverything.net/easyclearing.html
	
	To add more classes, 
	use this GREP Search/Replace Pattern (bbEdit):
	find: 			^(\* html )?(\.clearfix)(:after)?
	replace with:	\1\2\3, \1.newclass\3
	-------------------------------------------------------	*/

.clearfix:after, #content:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix, #content {display: inline-block;}

/* Backslash hack - hide code from IE-mac until next comment\*/
.clearfix, #content {display: block;}
* html .clearfix, * html #content {height: 1%;}

/*	End hide from IE-mac. The * makes this rule apply only to IE.
	The "Tan Hack" is documented at 
	http://www.positioniseverything.net/articles/box-model.html
	End of Clearfix
	--------------------------------------------------	*/