/* @override http://localhost:9000/css/main.css */

/*
------------------------------------------------------------------------ 
This is the main stylesheet for the 2006 fuzzycoconut.com design, "plaid".

The graphics and design are Copyright © 2006 Fuzzy Coconut and 
fuzzycoconut.com. Original site design and code authoring by Joel Schou. 
Reproducing the design in whole or part is strictly prohibited. However, 
creative inspiration is wonderful and inevitable.

Feel free to learn from the CSS. Copying all or part is not only shallow,
but completely useless if you want to actually learn CSS. Please respect
our hard work and only use my code for reference. We will gladly answer
your questions. Email us at info@fuzzycoconut.com.

The original 'nut logo was created by Shawn Parker and tweaked by John
Pennypacker. Tell us how coconuts migrate and we'll tell you where the
name came from.
-----------------------------------------------------------------------
*/

* { margin: 0; padding: 0; }

a {
	color: #537B80;
	text-decoration: none;
	border-bottom: 1px dotted #aaa;
	overflow: hidden;
}
a:visited {
	color: #999;
	border-color: #777;
}
a:hover {
	color: #386166;
	border-color: #444;
}
a:active {
	color: #386166;
	background: #ddd;
	border-bottom-style: solid;
}

a img {
	border: none !important;
	margin-bottom: -6px;
}

html {
	padding: 0 /*4px*/;
	height: 100%;
	background: #fff /*url(../img/html.gif) 0 50% repeat-x fixed*/;
}

body {
	height: 100%;
	background: #fff;
}

#wrapper {
	position: relative;
	margin: 0 /*-4px*/;
	padding-top: 0px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background: url(../img/wrapper.png) repeat-x 50% 0;
	text-align: center;
}

#header {
	position: relative;
	top: 50px;
	height: 70px;
	border-top: 6px solid #000;
	z-index: 1;
}

h1 {
	position: relative;
	margin: -45px auto 0 auto;
	width: 234px;
	height: 110px;
	background: url(../img/h1.png) no-repeat;
	text-indent: -9999px;
	z-index: 2;
}
p.slogan {
	position: absolute;
	text-indent: -9999px;
}
#header .nav {
	position: relative;
	top: -92px;
	margin: 0 auto -47px auto;
	padding: 0;
	width: 810px;
	height: 47px;
	list-style: none;
	background: url(../img/nav.png) 48px -18px no-repeat;
	z-index: 3;
}
#header .nav li {
	position: absolute;
	height: 21px;
	top: 27px;
}
#header .nav .skipnav {
	top: -50px;
	left: 0;
}
#header .nav .home {
	left: 288px;
	top: -18px;
	width: 234px;
	height: 110px;
}
#header .nav .widget {
	left: 48px;
	width: 113px;
}
#header .nav .about {
	left: 565px;
	width: 57px;
}
#header .nav .services {
	left: 632px;
	width: 71px;
}
#header .nav .contact {
	left: 713px;
	width: 67px;
}
#header .nav a {
	text-indent: -9999px;
	display: block;
	height: 21px;
	background: url(../img/nav.png) no-repeat;
	border: none;
}
#header .home a { height: 110px; background-position: -240px 0; }
#header .widget a { background-position: 0 -45px; }
#header .about a { background-position: -517px -45px; }
#header .services a { background-position: -584px -45px; }
#header .contact a { background-position: -665px -45px; }

#header .nav a:hover { outline: none; }
#header .home a:hover { background-position: -240px -110px; }
#header .widget a:hover { background-position: 0 -155px; }
#header .about a:hover { background-position: -517px -155px; }
#header .services a:hover { background-position: -584px -155px; }
#header .contact a:hover { background-position: -665px -155px; }

#header .home a:active,
	.home #header .home a,
	.home #header .home a:hover { background-position: -240px -220px; cursor: default; }
#header .widget a:active,
	.widget #header .widget a,
	.widget #header .widget a:hover { background-position: 0 -265px; cursor: default; }
#header .about a:active,
	.about #header .about a,
	.about #header .about a:hover { background-position: -517px -265px; cursor: default; }
#header .services a:active,
	.services #header .services a,
	.services #header .services a:hover { background-position: -584px -265px; cursor: default; }
#header .contact a:active,
	.contact #header .contact a,
	.contact #header .contact a:hover { background-position: -665px -265px; cursor: default; }
	
#main {
	margin: 0 auto;
	padding: 79px 5px 157px 5px;
	width: 800px;
	font-family: /*Cardo, 'Hoefler Text',*/ Georgia, Times, 'Times New Roman', serif;
	text-align: left;
}
#feature {
	position: relative;
	margin: 0 -5px 9px -5px;
	width: 810px;
	height: 310px;
	background: url(../img/feature.png) no-repeat;
}

#feature h2 {
	display: inline;
	margin: 4px 0 0 22px;
	padding: 0;
	width: 40px;
	height: 300px;
	float: left;
	text-indent: -9999px;
}
#feature.widget h2 { background-image: url(../img/home/feature/widget/h2.png); }

#feature h3 {
	margin: 4px 0 0 0;
	padding: 0;
	width: 743px;
	height: 40px;
	float: left;
	text-indent: -9999px;
	border: none;
}
#feature.widget h3 { background-image: url(../img/home/feature/widget/h3.png); }

#feature.widget p {
	padding: 0;
	width: 377px;
	height: 216px;
	float: left;
	text-indent: -9999px;
	background-image: url(../img/home/feature/widget/p.png);
}
#feature.widget ol {
	margin: 0 5px 0 0;
	padding: 0;
	width: 366px;
	height: 260px;
	list-style: none;
	float: right;
	text-indent: -9999px;
	background-image: url(../img/home/feature/widget/ol.png);
}
#feature.widget p.download {
	height: 44px;
	background-image: url(../img/home/feature/widget/p-download.png);
}

#feature a { background: transparent; }
#feature.widget p a {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 800px;
	height: 300px;
	border: none;
}
#feature.widget p.download a {
	left: 151px;
	top: 262px;
	width: 200px;
	height: 32px;
}
#feature.widget ol a {
	position: absolute;
	left: 574px;
	top: 279px;
	width: 56px;
	height: 12px;
	border: none;
}

.shorts {
	margin: 0 -5px 9px -5px;
	padding: 0;
	height: 150px;
	list-style: none;
}
ul.inline {
	display: inline;
	margin: 0 5px 10px -5px;
	float: left;
}
.shorts li {
	position: relative;
	width: 270px;
	height: 150px;
	background: url(../img/shorts.png) no-repeat;
	float: left;
}

.short1 { background-position: 0 0; }
.short2 { background-position: 50% 0 !important; }
.short3 { background-position: 100% 0 !important; }

.shorts h2 {
	display: inline;
	margin-top: 4px;
	padding: 0;
	width: 28px;
	height: 140px;
	float: left;
	text-indent: -9999px;
}
.short1 h2 { margin-left: 22px; }
.short2 h2 { margin-left: 25px; }
.short3 h2 { margin-left: 28px; }

.shorts .portfolio h2 { background-image: url(../img/home/shorts/portfolio/h2.png); }
.shorts .about h2 { background-image: url(../img/home/shorts/about/h2.png); }
.shorts .goodies h2 { background-image: url(../img/home/shorts/goodies/h2.png); }

.shorts p {
	margin-top: 4px;
	padding: 0 !important;
	width: 209px;
	height: 140px;
	float: left;
	text-indent: -9999px;
}

.shorts .portfolio p { background-image: url(../img/home/shorts/portfolio/p.jpg); }
.shorts .about p { background-image: url(../img/home/shorts/about/p.png); }
.shorts .goodies p {
	position: relative;
	top: -8px;
	height: 152px;
	background-image: url(../img/home/shorts/goodies/p.jpg);
	z-index: 4;
}

.shorts a {
	position: absolute;
	top: 4px;
	right: 0;
	display: block;
	height: 140px;
	width: 270px;
	border: none;
	background: transparent;
}

.shorts .goodies a {
	top: 8px;
	right: -8px;
}

h2, h3, h4, h5, h6 {
	color: #A6834B;
	font-weight: normal;
}
h3, h4, h5, h6 {
	padding-top: 1.5em;
	padding-bottom: 0;
	margin-bottom: .5em;
	border-bottom: 1px solid #806539;
}
h3 { clear: both; }
.home h3 { clear: none; }

span.role {
	font-size: .75em;
	color: #333;
	font-style: italic;
}
span.role:before {
	content: ":: "
}

#main p {
	padding: 4px 0 8px 0;
	font-size: 14px;
	line-height: 18px;
}
p.noteworthy {
	margin-top: 10px;
	border-top: 1px solid #000;
	background: url(../img/noteworthy.gif) 0 0 no-repeat;
	clear: both;
}

blockquote {
	margin: 4px 0 8px 0;
	padding: 8px 16px;
	color: #666;
	border-top: 1px dashed #A6834B;
	border-bottom: 1px dashed #A6834B;
	background: url(../img/blockquote.png) 50% 0;
}


ul, ol, dl {
	margin: 0 0 0 20px;
	padding: 4px 0 8px 20px;
	font-size: 14px;
	line-height: 18px;
}

.subnav {
	margin: 5px -5px 20px -5px;
	padding: 4px 5px 6px 22px;
	height: 30px;
	background: url(../img/subnav.png) no-repeat;
	list-style: none;
	text-align: center;
}
.subnav li {
	display: block;
	float: left;
	margin: 0;
	height: 30px;
	font: 14px/30px 'News Gothic MT', Helvetica, Arial, sans-serif;
	border-right: 1px solid #ddd;
}
.subnav li a, .subnav li a:visited {
	display: block;
	padding: 0 12px;
	color: #537B80;
	border: none;
}
.subnav li a:hover {
	color: #000;
	background: url(../img/subnav-over.gif);
	outline: none;
}

.calloutbox {
	margin: 5px -5px;
	padding: 0 !important;
	line-height: 0px;
	width: 413px;
	background: url(../img/calloutbox.png);
}
.calloutbox img {
	padding: 11px 13px 0 30px;
	background: url(../img/calloutbox-img.png) 0 0 no-repeat;
}
.calloutbox span {
	display: block;
	margin-top: -2px;
	padding: 4px 13px 12px 30px;
	font: 10px/14px 'News Gothic MT', Helvetica, Arial, sans-serif;
	color: #666;
	text-align: center;
	background: url(../img/calloutbox-span.png) 0 100% no-repeat;
}

.aboutbox {
	display: inline;
	margin: 0 15px 10px 0;
	padding: 4px 5px 6px 0;
	line-height: 0;
	height: 100px;
	float: left;
	background: url(../img/aboutbox.png) 100% 0 no-repeat;
}
.aboutbox .mugshot {
	display: block;
	margin: -4px 5px -6px -5px;
	padding: 4px 0 6px 27px;
	height: 100px;
	float: left;
	background: url(../img/aboutbox-mugshot.png) 0 0 no-repeat;
}
.aboutbox a {
	display: inline;
	margin: 0 10px 0 0;
	width: 130px;
	border: none;
	float: left;
}

ol.goodies,
ol.portfolio {
	margin: 0 -5px;
	padding: 0 0;
	width: 815px;
	list-style: none;
	overflow: auto;
}
ol.goodies li,
ol.portfolio li {
	display: inline;
	margin: 0 5px;
	padding: 0 0 10px 0;
	width: 260px;
	height: 160px;
	float: left;
}
ol.goodies li.half,
ol.portfolio li.half {
	width: 395px;
	height: auto;
}
ol.goodies li .nutbox,
ol.portfolio li .nutbox {
	display: inline;
	margin: 0 10px 0 -5px;
	padding: 0 0 0 22px;
	line-height: 0;
	height: 110px;
	float: left;
	background: url(../img/aboutbox-mugshot.png) 0 0 no-repeat;
}
ol.portfolio li .nutbox { position: relative; }

ol.goodies li .nutbox a,
ol.portfolio li .nutbox a {
	display: block;
	margin: 0;
	border: none;
}
ol.portfolio li .nutbox a {
	float: left;
}
ol.goodies li .nutbox img,
ol.portfolio li .nutbox img {
	display: block;
	margin:  0;
	padding: 4px 15px 6px 5px;
	background: url(../img/aboutbox.png) 100% 0 no-repeat;
}
ol.portfolio li .nutbox img {
	padding-left: 45px;
}
ol.goodies #fn1984 .nutbox img { padding-right: 8px; }
ol.goodies #fnchrome .nutbox img { padding-top: 0; }

ol.portfolio dl.credits {
	position: relative;
	margin: 1px -15px 0 10px;
	padding: 0;
	float: left;
	width: 180px;
}

ol.portfolio dl.credits dt {
	position: absolute;
	left: -190px;
	width: 32px;
	height: 30px;
	text-indent: -999px;
	overflow: hidden;
}
ol.portfolio dt.design { top: 6px; background: url(../img/services/portfolio/icon-design.png); }
ol.portfolio dt.frame { top: 36px; background: url(../img/services/portfolio/icon-frame.png); }
ol.portfolio dt.server { top: 66px; background: url(../img/services/portfolio/icon-server.png); }

ol.portfolio .design dt.design { background: url(../img/services/portfolio/icon-design-fc.png); }
ol.portfolio .frame dt.frame { background: url(../img/services/portfolio/icon-frame-fc.png); }
ol.portfolio .server dt.server { background: url(../img/services/portfolio/icon-server-fc.png); }

ol.portfolio dl.credits dt a {
	display: block;
	width: 32px;
	height: 30px;
	float: none;
}

ol.portfolio dl.credits dd {
	position: absolute;
}

ol.portfolio dd.show { display: block; }
ol.portfolio dd.hide { display: none; }
ol.portfolio dd.design { background: url(../img/services/portfolio/icon-design.png) -2px 0 no-repeat; }
ol.portfolio dd.frame { background: url(../img/services/portfolio/icon-frame.png) -2px 0 no-repeat; }
ol.portfolio dd.server { background: url(../img/services/portfolio/icon-server.png) -2px 0 no-repeat; }

ol.portfolio .design dd.design { background: url(../img/services/portfolio/icon-design-fc.png) -2px 0 no-repeat; }
ol.portfolio .frame dd.frame { background: url(../img/services/portfolio/icon-frame-fc.png) -2px 0 no-repeat; }
ol.portfolio .server dd.server { background: url(../img/services/portfolio/icon-server-fc.png) -2px 0 no-repeat; }

ol.portfolio dl.credits dd h5 {
	margin: 0;
	padding: 1px 0 0 0;
	width: 180px;
	font-size: 12px;
	line-height: 16px;
	text-indent: 36px;
	border: none;
}

ol.portfolio dl.credits dd p {
	padding: 0 !important;
	width: 180px;
	font-size: 12px !important;
	line-height: 16px;
	text-indent: 36px;
}

ol.portfolio dl.credits dd p a {
	float: none;
	display: inline;
	border-bottom: 1px dotted #aaa;
}


ol.goodies li p {
	margin: 0;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 16px;
}

.services p.download {
	padding-top: 6px !important;
}

.services ol.download {
	margin: 0;
	padding: 1px 0;
	font-size: 12px;
}
.services ol.download li {
	margin: 0;
	padding: 0 0 2px 0;
	width: 195px;
	height: auto;
	float: right;
	clear: right;
	white-space: nowrap;
}
.services ol.download li a {
	display: inline;
	margin-right: 6px;
	float: left;
	width: 54%;
}
.services ol.download li img {
	margin-right: 2px;
	margin-bottom: -2px;
}

#contactform {
	margin: 5px -5px 20px -5px;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	background: url(../img/contactform.png) 0 4px;
}
#contactform form {
	background: url(../img/contactform-form.png) 0 100% no-repeat;
}
#contactform fieldset, #contactform p {
	padding: 14px 15px 16px 32px;
	overflow: auto;
	background: url(../img/contactform-fieldset.png) 0 0 no-repeat;
}
#contactform p {
	padding: 14px 15px 4px 32px !important;
}
#contactform p.choices {
	padding: 4px 14px 16px 32px !important;
	background: none;
}

#contactform label {
	display: block;
	float: left;
	clear: both;
	width: 250px;
	padding: 2px 0 6px 0;
}
#contactform .alert {
	display: block;
	color: #f00;
}
#contactform input, #contactform textarea {
	display: inline;
	float: left;
	margin: 4px 0;
	width: 265px;
	border: 1px solid #A6834B;
	background: #fff;
}
#contactform textarea {
	width: 510px;
	height: 120px;
}
input#cc { border: none; background: none; width: auto; }
input#abscond { display: none; }
input#submit {
	clear: both;
	margin-left: 250px !important;
	width: auto;
}

fieldset {
	border: none;
}

#footer {
	position: relative;
	margin-top: -137px;
	padding: 18px 0 25px 0;
	height: 94px;
	text-align: center;
	background: url(../img/wrapper.png) 50% 100% repeat-x;
	clear: both;
}
#footer .nav {
	margin: 0 auto;
	padding: 0;
	width: 92px;
	text-align: center;
	list-style: none;
}
#footer .totop {
	height: 38px;
	background: url(../img/totop.png);
}
#footer .home,
	#footer .widget,
	#footer .about,
	#footer .services,
	#footer .contact { display: none; }

#footer .totop a {
	display: block;
	height: 38px;
	text-indent: -9999px;
	background: url(../img/totop.png);
	border: none;
}
#footer .totop a:hover { background-position: 0 -38px; }

#footer p {
	padding: 14px 0 12px 0;
	font-size: 10px;
	font-family: 'News Gothic MT', Helvetica, Arial, sans-serif;
	color: #999;
	background: #fff;
	border-bottom: 6px solid #000;
}