/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0; 
}

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/* Removes Styles from lists */
ol, ul {
	list-style: none; 
}

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Removes border from fieldset and img */
fieldset, img {
	border: 0;
}

/* Left-aligns text in caption and th */
caption, th {
	text-align: left;
}

/* Removes quotation marks form q */
q:before, q:after {
content: '';
}

/* Removes outline from links in firefox */
a {
	outline: none;
}
/*-------------------------------*/

/* UNIVERSAL STYLING -----------------*/


html {background: #6d0019 url('images/bg-header.jpg') no-repeat top center;}
body { font: .925em "Palatino", serif; color: #dfb27b; line-height: 1.5em; text-align: left; background: url(images/bg-middle-content.jpg) repeat-x; background-position: 0 385px; -webkit-text-size-adjust: none;}

a:link, a:visited { color: #712919;}
a:hover { color: #b74131;}


p, h3, h4 { margin-bottom: 1em;}
h2 {margin-bottom: .5em; font: 2em normal;}

span.all-caps {text-transform: uppercase;}

/*-------------------------------*/

/* =GENERAL LAYOUT ----------------*/

div#content { position: relative; margin: 0 auto; width: 800px;}
div#header { position: relative; padding-top: 20px;}
div#branding { float: left; width: 226px; height: 122px; background: url(images/logo.png) no-repeat top center; text-indent: -9999px;}

div#top-content { clear: both; padding-top:20px; height: 223px;}
div#top-content p {font-size: 20px; font-weight: normal; line-height: 1.2em; margin-bottom: .8em;}
div#top-content a {color: #dfb27b;}
div#top-content a:visited {color: #dfb27b;}
div#top-content a:hover {color: #b48854;}

/* =NAVIGATION ----------------*/

div#navigation { float: right; width: 520px; height: 42px; background: url(images/bg-top-nav.png) no-repeat; margin-top: 51px}
ul#nav-buttons li { display: inline; float: left; padding: 10px 0 0 33px; text-indent: -9999px;}
ul#nav-buttons li:first-child { padding-left: 37px;}
ul#nav-buttons li a {display: block; height: 24px; background-repeat: no-repeat; background-position: 0 0;}

ul#nav-buttons li#home a { background-image: url(images/nav-buttons/home.gif); width: 57px;}
ul#nav-buttons li#about a { background-image: url(images/nav-buttons/about.gif); width: 59px;}
ul#nav-buttons li#services a { background-image: url(images/nav-buttons/services.gif); width: 82px;}
ul#nav-buttons li#portfolio a { background-image: url(images/nav-buttons/portfolio.gif); width: 82px;}
ul#nav-buttons li#blog a { background-image: url(images/nav-buttons/blog.gif); width: 43px;}
ul#nav-buttons li#contact a { background-image: url(images/nav-buttons/contact.gif); width: 75px;}

ul#nav-buttons li a:hover { background-position: 0 -25px; }
ul#nav-buttons li.selected a { background-position: 0 -25px; }

/* =MIDDLE CONTENT --------------*/

div#middle-content {height: 382px; color: #6d0019; line-height: 1.1em; font-size: 1.1em;}
div#middle-content h3 {margin-bottom: 5px; font-size: 1.5em; font-weight: normal; text-align: left; line-height: 1em;}
div#middle-content p.border {width: 226px; height: 226px; background-color: #e6dfd6; border: solid 1px #ac875f;}
div#middle-content img {border: 1px solid #ddb17e;}
div#middle-content a:link, div#middle-content a:visited {color: #6d0019;}
div#middle-content a:hover {color: #b74131;}

div#middle-content ul#skills li {height: 22px; margin-bottom: 0px; font-size: 1.1em; padding: 3px 0 0 25px;}
div#middle-content ul#skills li.xhtml {background: url('images/icons/xhtml.png') 0px 4px no-repeat;}
div#middle-content ul#skills li.css {background: url('images/icons/css.png') 0 0 no-repeat;}
div#middle-content ul#skills li.photoshop {background: url('images/icons/photoshop.png') 0 0 no-repeat;}
div#middle-content ul#skills li.illustrator {background: url('images/icons/illustrator.png') 0 0 no-repeat;}
div#middle-content ul#skills li.jquery {background: url('images/icons/jquery.png') 0 0 no-repeat;}
div#middle-content ul#skills li.wordpress {background: url('images/icons/wordpress.png') 0 0 no-repeat; height: 20px;padding-top: 6px;}

div#middle-content ul#webdesign {text-align: left;}
div#middle-content ul#webdesign li {padding: 0 0 5px 12px; font-size: 1.1em; background: url('images/bullet.png') no-repeat 0 3px;}
div#middle-content ul#blog-links {padding-top: 10px;}
div#middle-content ul#blog-links li {font-size: 1.1em; padding-bottom: .6em; padding-left: 22px; background: 0 0 no-repeat;}

div#middle-content ul#blog-links li.link-1 {background-image: url('images/favicons/cats-who-code.png');}
div#middle-content ul#blog-links li.link-2 {background-image: url('images/favicons/color-me-kate.png');}
div#middle-content ul#blog-links li.link-3 {background-image: url('images/favicons/design-shack.png');}
div#middle-content ul#blog-links li.link-4 {background-image: url('images/favicons/a-list-apart.png');}
div#middle-content ul#blog-links li.link-5 {background-image: url('images/favicons/smashing-magazine.png');}
div#middle-content ul#blog-links li.link-6 {background-image: url('images/favicons/spoongraphics.png');}
div#middle-content ul#blog-links li.link-7 {background-image: url('images/favicons/web-designer-wall.png');}

/* =one column middle content --------------*/
div#middle-content div#one-column {height: 300px; padding-top: 21px; background: url('images/w3c-bg.png') 50% 65px no-repeat;}

/* =two column middle content --------------*/
div#middle-content div#two-column {position: relative; padding-top: 21px;}
div#middle-content div#two-column div.two-col-1 {float: left; width: 183px; margin-top: -5px;}
div#middle-content div#two-column div.two-col-2 {float: right; width: 595px;}

/* =three column middle content ------------*/

div#middle-content div.three-col {float: left; margin-top: 15px;}
div#middle-content div#three-col-1, div#middle-content div#three-col-3 {width: 256px;}
div#middle-content div#three-col-1 {background: url(images/vertical-divider.png) right 60px no-repeat; padding-bottom: 39px;}
div#middle-content div#three-col-3 {background: url(images/vertical-divider.png) 0 60px no-repeat;}
div#middle-content div#three-col-2 { width: 286px;}
div#three-col-1 div{ width: 227px;}
div#three-col-2 div{ width: 227px; margin-left: auto; margin-right: auto; padding: 0 0;}
div#three-col-3 div {width: 227px; padding-left: 30px; height: 325px;}
div#middle-content div.three-col h3 {text-align: center; height: 40px; padding: 6px 0 3px; background: url(images/bg-titles.png) bottom center no-repeat; font-size: 1.4em; line-height: normal;}
div#three-col-1 div.recent img {text-align: center;}
div#middle-content div#three-col-1 div.web-design {background: url('images/webdesign-bg.png') no-repeat 70% 90px;}
div#middle-content div#three-col-3 div.skills { height: 255px; background: url('images/branding_bg.png') no-repeat 50% 90px;}
div#middle-content div#three-col-2 div.cms {background: url('images/cms_bg.png') no-repeat 70% 90px;}


/* =PORTFOLIO ------------------------*/

a.folio-image {float: left; width: 376px;}
div.folio-text {float: right; width: 345px; margin-top: -3px; font-size: .92em;}
div.folio-text p.skills {text-align: left;}
div#middle-content h3.link {margin-bottom: 10px;}

/*
    anythingSlider v1.2
    
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
*/


.anythingSlider                         { width: 740px; height: 382px; position: relative; margin: 0 auto 15px; }
.anythingSlider .wrapper                { width: 740px; overflow: auto; height: 360px; margin: 0 0; position: absolute; top: 0; left: 0; }
div.textSlide{ margin-top: 15px; width: 740px;}
                                       /* Width below is max for Opera */
.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: transparent; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; padding-top: 19px; height: 360px; width: 740px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 145px; width: 34px; background: url(images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 110px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -64px; }
.anythingSlider .back                   { background-position: -34px 0; left: -63px; }
.anythingSlider .forward:hover          { background-position: 0 -145px; }
.anythingSlider .back:hover             { background-position: -34px -145px; }


#thumbNav                               { position: relative; top: 350px; text-align: center; height: 1px;}
/*div#middle-content #thumbNav a                             { color: #6d0019; font: 13px/21px "Times Roman", Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #936541 url(images/cellshade.png) repeat-x 0 -2px; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;}
div#middle-content #thumbNav a:hover                       { background: url(images/cellshade.png) repeat-x 0 -2px;}
div#middle-content #thumbNav a.cur                         { background: #d5b474 url(images/cellshade.png) repeat-x 0 -2px;}*/

#start-stop                             { background: ; /*background-image: url(images/cellshade.png); background-repeat: repeat-x;*/ color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 0; top: 350px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: ; }
#start-stop:hover                       { background-image: none; }



/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }

/*--------------------------*/

/* =BLOG---------------------*/

ul#blog-links li {padding-bottom: 5px;}

/*--------------------------*/


/* =NOTFOUND 404-------------*/

div#middle-content img[alt="error icon"] {border: none;}
div#middle-content p.error-icon {text-align: center; padding-top: 60px;}

/* =CONTACT-------------------*/

form#contactform {padding-top: 40px;}
div#form-right {float: right; width: 390px;}
div#form-left {float: left; width: 380px;}
div.contact {margin-bottom: 15px;}
label, input[type="text"], textarea, select {display: block;}
input[type="text"] { width: 375px; background-color: #e2caab; border: none; height: 26px; font-family: geneva, sans-serif; color: #6d0019; font-size: .9em; padding: 4px 0 0 4px;}
label {font-size: 1.3em; margin-bottom: 4px; width: 360px;}
label[for="firstname"] {padding-top: 15px;}
textarea {width: 100%; height: 234px; overflow: auto; background-color: #e2caab; border: none; font-family: geneva, sans-serif; color: #6d0019; font-size: .9em; padding: 4px; margin-top: 3px;}
button.submit-button {float: right; background: transparent url(images/submit-button.png) no-repeat 0 0; color: #dfb27b; border: none; width: 76px; height:31px; text-indent: -9999px; cursor: pointer;}
button.submit-button:hover {background-position: 0 -31px;}
select {cursor: pointer;}
span.select {position: absolute; width: 351px; /* With the padding included, the width is 375 pixels: the actual width of the image. */ height: 28px; padding: 0px 16px 0px 8px; color: #6d0019; background-color: #b49679; font: 16px/26px arial,sans-serif; background: url(images/bg-select.png) no-repeat; overflow: hidden;}
p.error {margin-bottom: -30px; padding-top: 20px; font-size: 1.1em;}
div.thanks h2 {margin-bottom: -30px; padding-top: 10px;}

/* =FOOTER --------------------*/

div#footer { padding-top: 40px; font-size: .950em; line-height: 1.1em; background: url(images/bg-footer.jpg) top center no-repeat; overflow: hidden; clear:both;}
div#footer div.col {float: left; width: 25%; text-align: left;}
div#footer div#col-1 div { margin-right: 6px;}
div#footer div#col-2 div, div#footer div#col-3 div { margin-left: 6px; margin-right: 6px;}
div#footer div#col-4 div {margin-left: 6px;}
div#footer h4 {font-weight: normal; font-size: 1.3em; color: #b48854; margin-bottom: 10px;}
div#footer a:hover {color: #b48854;}
div#footer a {color: #dfb27b}

div#footer div#col-1 .tweet .tweet_list li .tweet_text {width: 194px; margin-right: 6px;}
div#footer div#col-1 .tweet .tweet_list li a,  div#footer div#col-1 .query .tweet_list li a {color: #b48854; }
ul#social li {display: inline; float: left; margin-bottom: 0;}
ul#social li a {display: block; text-indent: -9999px; height: 40px;}
ul#social li.facebook a {background: url('images/social/facebook.gif') no-repeat 0 0; width: 50px;}
ul#social li.twitter a {background: url('images/social/twitter.gif') no-repeat 0 0; width: 50px; margin-left: 10px;}
ul#social li a:hover {background-position: 0 -40px;}

div#site-info {clear: both; font-size: .7em; padding-top: 10px; font-family: verdana, sans-serif;}