v
/*================== HEYDON'S RESET 
*/

html, body, h1, h2, h3, h4, ul, li, form, fieldset {
font-weight:normal;
font-family:'trebuchet ms', trebuchet, arial, sans-serif;
margin:0;
padding:0;
}

ul {
list-style:none;
}

h1 {
position:absolute;
top:-2000px;
}

a {
outline:none;
color:#000;
}

a:hover {
color:#a24720;
text-decoration:none;
border-bottom:1px dotted;
}

a img {
border:0;
}

/*================== BASIC SETTINGS / FONTS 
*/

html {
background:#000;
}

body {
background:#fff url(../images/bodyback.gif) repeat-x top left;
font-size:100%;
font-family:'trebuchet ms', trebuchet, arial, sans-serif;
color:#000;
}

h2 {
color:#803700;
font-size:1.8em;
border-bottom:1px dashed #000;
line-height:1.3em;
margin:0 0 15px 0;
}

h3 {
color:#000;
font-size:1.3em;
margin:0 0 10px 0;
}

h4 {
font-size:1.3em;
margin:0 0 10px 0;

color:#fff;
font-style:italic;
border-bottom:1px dashed;
}

p:first-line {
font-size:1.2em;
}

p {
text-align:justify;
font-size:0.9em;
letter-spacing:1px;
line-height:1.4em;
margin:0 0 20px 0;
}

span {
font-size:0.9em;
}

pre {
background:#ccc;
padding:5px;
}


/*================== BASIC LAYOUT
*/

div.wrapper {
width:770px;
padding:0 20px;
margin:0 auto;
}

div.header {
height:195px;
position:relative;
background:url(../images/headerback.gif) no-repeat top left;
}

div.left {
width:560px;
float:left;
padding:0 0 20px 0;
}

div.right {
float:right;
width:170px;
padding:10px 0 0 0px;
height:350px;
background:url(../images/rightnavback.jpg) no-repeat top left;
}

div.footer {
clear:both;
color:#eee;
font-size:0.8em;
letter-spacing:0.1em;
padding:0 0 30px 0;
background:#000;
}

div.footer a {
color:#fff;
}

/*================== FOOTER STYLES
*/

div.footercontent {
width:770px;
margin:0 auto;
padding:20px 0 200px 0;
background:url(../images/footercontentback.gif) no-repeat top right;
}

div.footerleft {
float:left;
width:340px;
}

div.bookmarks {
}

div.bookmarks a {
display:block;
width:28px;
height:28px;
float:left;
margin:0 10px 15px 0;
border:1px solid #000;
}

#delicious {
background:url(../images/b_delicious.gif);
}

#newsvine {
background:url(../images/b_newsvine.gif);
}

#technorati {
background:url(../images/b_technorati.gif);
}

#reddit {
background:url(../images/b_reddit.gif);
}

#furl {
background:url(../images/b_furl.gif);
}

#stumbleupon {
background:url(../images/b_stumbleupon.gif);
}

#blinklist {
background:url(../images/b_blinklist.gif);
}

#blogmarks {
background:url(../images/b_blogmarks.gif);
}

div.rss {
width:130px;
float:right;
padding:0 0 30px 0;
}

div.rss a:hover, div.links a:hover {
border:0;
}

div.links {
width:240px;
float:right;
margin:0 30px 0 0;
}

div.twatter {
width:170px;
float:right;
padding:60px 0 0 0;
margin:0 30px 0 0;
background:url(../images/twatter.jpg) no-repeat top left;
}

div.rss ul li a, div.links ul li a {
text-decoration:none;
display:block;
height:32px;
line-height:32px;
text-align:right;
font-size:1.1em;
font-style:italic;
color:#fff;
background:url(../images/rssicon.gif) no-repeat top left;
}

.footercontent a:hover {
color:#C56F4B;
}

div.links ul li a {
background:url(../images/resources.jpg) no-repeat top left;
}

/*================== TOP NAVIGATION
*/

div.header ul {
position:absolute;
top:0;
right:0;
}

div.header ul li {
margin:0;
padding:0;
float:left;
}

div.header ul li a {
display:block;
position:relative;
float:left;
margin:0 0 0 10px;
width:100px;
height:55px;
background:#A24720 url(../images/toplink.jpg) no-repeat top left;
color:#fff;
text-align:center;
font-style:italic;
font-size:1.1em;
text-decoration:none;
padding:124px 0 0 0;
}

div.header ul li a:hover {
border:0;
}

div.header ul li a span {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:55px;
padding:124px 0 0 0;
background:#000 url(../images/toplinkhov.jpg) no-repeat top left;
cursor:pointer;
font-size:1em;
}

#currentpage {
background:#A24720 url(../images/toplinkactive.jpg) no-repeat top left;
}

/*================== RIGHT NAVIGATION
*/

div.right ul {
padding:23px 0 0 0;
background:transparent url(../images/rightultop.gif) no-repeat top center;
}

div.right ul li {
}

div.right ul li a {
background:transparent;
display:block;
text-decoration:none;
text-align:center;
font-size:0.9em;
font-style:italic;
height:1.5em;
line-height:1.5em;
} 

div.right ul li a:hover {
color:#A24720;
border:0;
}

#currentcat {
background:url(../images/rightactive.gif) no-repeat center center;
}

/*================== HOMEPAGE STYLES
*/

a.quicklink {
float:left;
width:173px;
height:158px;
margin:0 10px 0 0;
border:0;
text-decoration:none;
border:2px solid #000;
color:#D98A69;
}

a.quicklink:hover {
color:#fff;
}

a.quicklink span {
display:block;
text-decoration:none;
font-size:1.2em;
padding:70px 0 0 7px;
}

a.quicklink span span {
font-size:0.7em;
line-height:1em;
padding:0;
}

#quickdesign {
background:url(../images/quickdesign.jpg) repeat 0 0;
}

#quickcoding {
background:url(../images/quickcoding.jpg) repeat 0 0;
}

#quickcrabs {
background:url(../images/quickcrab.jpg) repeat 0 0;
}

#familytree {
clear:both;
height:125px;
background:#fff url(../images/familytree.gif) no-repeat top left;
}

/*================== ARTICLE STYLES
*/

h2 span {
font-size:0.6em;
color:#000;
}

h2 span a {
text-decoration:none;
padding:0 12px 0 0;
background:url(../images/nextarrow.gif) no-repeat center right;
}

h2 span a:hover {
text-decoration:underline;
border:0;
}

p img {
float:left;
border: 1px solid #000;
padding:3px;
margin:0 10px 15px 0;
}

.left ul {
font-size:0.9em;
margin:0 0 20px 10px;
list-style:circle;
font-style:italic;
}

.left ul li {
padding:8px 0;
border-bottom:1px dotted #000;
}

span.pullquote, span.pullquotetop {
border-top:2px solid #000;
border-bottom:2px solid #000;
float:right;
width:270px;
margin:10px -15px 5px 10px;
padding:3px;
}

span.pullquotetop {
margin:3px -15px 5px 10px;
}

span.pullquote span, span.pullquotetop span {
font-variant:small-caps;
color:#000;
display:block;
font-size:1.8em;
line-height:1.1em;
padding:10px 5px 30px 5px;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
font-size:1.5em;
background:url(../images/pullquotedesign.gif) no-repeat center bottom;
}

span.date {
font-size:17px;
float:right;
display:block;
width:200px;
text-align:right;
line-height:2.6em;
background:url(../images/watch.jpg) no-repeat top left;
clear:both;
}

span.uniquelink {
display:block;
clear:both;
height:2em;
line-height:2em;
margin:0 0 1.2em 0;
border-bottom:1px solid #803700;
border-top:1px solid #803700;
text-align:right;
}

span.code {
display:block;
font-family: 'courier new', courier, monospace;
background:#eee;
padding:5px;
margin:10px 0;
}

/*================== FORM STYLES
*/

#contact, form {
font-size:1.1em;
background: #fff url(../images/fieldsetback.jpg) repeat top left;
padding:12px;
}

#pen {
position:absolute;
right:-44px;
top:-24px;
}

fieldset {
position:relative;
font-family:'trebuchet ms', trebuchet, arial, sans-serif;
border:0;
}

legend {
display:none;
}

label {
display:block;
padding:2px 0 3px 0;
width:76%;
}

input, textarea, select {
font-style:italic;
border:0;
border:1px dashed #000;
width:75%;
padding:3px;
background:#fff;
font-family:'trebuchet ms', trebuchet, arial, sans-serif;
font-size:1em;
}

select {
border:1px solid #000;
margin-bottom:0.5em;
}

option {
color:#fff;
background:#000;
}

option:hover {
background:#666;
}

textarea {
margin:0 0 10px 0;
}

input:focus, textarea:focus {
border:2px solid #000;
}

#submit {
display:inline;
cursor:pointer;
width:auto;
font-size:1.3em;
margin:10px 0 0 0;
padding:0;
font-variant:small-caps;
color:#000;
background:transparent;
border:0;
}

#submit:focus {
color:#B7410E;
outline:none;
}

#userfile {
margin:0 0 0.5em 0;
}

form a:hover {
border:0;
}

/*================== FORM RESPONSES AND HINTS
*/

ul.errors {
padding:10px 35px 10px 10px;
color:#803700;
border:2px solid #000;
margin:0 0 14px 0;
background:url(../images/error.gif) no-repeat top right;
}

ul.errors li {
border:0;
list-style:none;
padding:0;
font-size:1.1em;
}


div.sent {
height:271px;
background:url(../images/sentback.jpg) no-repeat top left;
}

/*================== JQUERY CAROUSEL
*/

#slider {
width: 100%;
clear:both;
margin:45px 0 0 0;
position: relative;
padding:0;
border:2px solid #000;
background:url(../images/sliderback.jpg) no-repeat bottom right;
}

.scroll {
height: 335px;
width: 540px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
}

.scrollContainer div.panel {
padding: 20px;
height: 284px;
overflow:hidden;
width: 520px;

}

div.panel h2 {
text-indent:34px;
background:url(../images/cogsmall.gif) no-repeat center left;
font-size:1.8em;
margin:0 0 13px 0;
font-weight:normal;
font-variant:small-caps;
color:#000;
border-bottom: 1px solid;
}

div.panel a {
color:#000;
}

span.feature {
font-size:1.5em;
font-variant:small-caps;
padding:10px 62px 10px 3px;
background:url(../images/featuretick.gif) no-repeat center right;
}

.scrollButtons {
display:none;
position: absolute;
top: -43px;
cursor: pointer;
display:block;
width:32px;
height:22px;
}

.scrollButtons.back {
right:55px;
background:url(../images/scroll_left_open.gif) no-repeat top left;
}

.back:hover {
background:url(../images/scroll_left.gif) no-repeat top left;
}

.scrollButtons.forward {
right: 0px;
background:url(../images/scroll_right_open.gif) no-repeat top left;
}

.forward:hover {
background:url(../images/scroll_right.gif) no-repeat top left;
}

.hide {
display: none;
}

div.nav {
z-index:1;
position:absolute;
top:-27px;
font-variant:small-caps;
font-size:1em;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.navigation li {
display: inline;
padding:0;
}

ul.navigation a {
display:block;
margin-right: 5px;
float:left;
text-align:center;
width:130px;
height:25px;
line-height:25px;
color: #fff;
text-decoration: none;
background:#735439 url(../images/unselected.gif) repeat-x bottom left;
}

ul.navigation a:hover {
color:#fff;
border:0;
}

ul.navigation a.selected {
color:#fff;
background:#000;
}

ul.navigation a:focus {
outline: none;
}

/*================== COMMENTS STYLES
*/

div.comments {
margin:0 0 10px 0;
padding:10px 10px 10px 50px;
background:url(../images/commentquote.gif) no-repeat top left;
border:1px solid;
}

div.comments h5 {
font-size:1.1em;
margin:0 0 5px 0;
}

h5 a {
color:#803700;
text-decoration:none;
font-variant:small-caps;
font-size:1.2em;
}

div.comments span {
display:block;
text-align:right;
padding:10px 0 0 0;
margin:10px 0 0 0;
border-top:1px dashed #000;
}

/*================== MANAGEMENT STYLES
*/

a.replace, a.imagereplace {
float:right;
margin:0 0 0 10px;
}

.togglefiles {
margin:0 0 0.2em 0;
width:76%;
}

.togglefiles a {
float:right;
}

#togglelist {
display:none;
clear:both;
background:#000;
width:75%;
color:#fff;
padding:5px;
}