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

Description: Stylesheet for abutler.net
Version: 2.0
Author: Adam C. Butler
Author URL: http://www.abutler.net

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

@import url('reset.css');/* global reset */

/*------------------------------------------------------------
GLOBAL styles
-------------------------------------------------------------*/

body {margin: 0px; background: #111111 url("../images/bg_floraltop.jpg") repeat-x top left; font: 12px Georgia, Arial, Verdana, sans-serif;}
#wrap {width: 960px; text-align: left; margin: 91px auto 0 auto;}
#header {width: 960px; height: 63px; position: relative;}
#rightcolumn_wrapper {width: 260px; height: auto; position: relative; float: right;}
#left_wrap {width: 650px; _width: 670px; float: left; position: relative; color: #fff;}
div.hr {height: 2px; background: url("../images/hr.gif") repeat-x center; margin: 15px 0; position: relative;}
div.hr hr {display: none;}
div.hr_top {height: 2px; background: url("../images/hr.gif") center repeat-x; margin-bottom: 15px; position: relative;}
div.hr_top hr {display: none;}
#footer {width: 100%; height: auto; _margin-bottom: 0; color: #ccc; font-size: 12px; float: left; margin: 15px 0;}
#copyright {float: left;}
#availability {float: right;}
#availability a {color: #55CDFF; font-weight: bold; text-decoration: none;}
#availability a:hover {color: #fffbb6; text-decoration: underline;}
#bottom_spacer {width: 100%; height: 20px;}
a.flash-gallery-hidden {display: none;}
p.thanks_headline {font: 20px/2em Arial, Verdana, sans-serif;}
p.thanks {font: 16px/2em Arial, Verdana, sans-serif;}

/*------------------------------------------------------------
MAIN NAVIGATION styles
-------------------------------------------------------------*/

#navigation {width: 960px; height: 45px; margin: 0 auto;}
#navigation a:link, a:visited, a:active {text-decoration: none; outline: none;}
#navigation ul {list-style: none outside; padding: 0; margin: 0;}
#navigation #globalnav li {display: inline;}
#navigation #globalnav li a {height: 0; background: url("../images/globalnav.jpg") no-repeat; overflow: hidden; padding-top: 45px; float: left;}

/* Top Nav - Normal Button State */
#navigation #globalnav li#recentwork a {background-position: 0 0; width: 118px;}
#navigation #globalnav li#about a {background-position: -112px 0; width: 72px;}
#navigation #globalnav li#port a {background-position: -184px 0; width: 103px;}
#navigation #globalnav li#blog a {background-position: -287px 0; width: 66px;}
#navigation #globalnav li#contact a {background-position: -353px 0; width: 81px;}

/* Top Nav - Hover Button State */
#navigation #globalnav li#recentwork a:hover {background-position: 0 -42px;}
#navigation #globalnav li#about a:hover {background-position: -112px -42px;}
#navigation #globalnav li#port a:hover {background-position: -184px -42px;}
#navigation #globalnav li#blog a:hover {background-position: -287px -42px;}
#navigation #globalnav li#contact a:hover {background-position: -353px -42px;}

/* Top Nav - Current Button State */
#navigation #globalnav li#recentwork.selected a {background-position: 0 -42px;}
#navigation #globalnav li#about.selected a {background-position: -112px -42px;}
#navigation #globalnav li#port.selected a {background-position: -184px -42px;}
#navigation #globalnav li#blog.selected a {background-position: -287px -42px;}
#navigation #globalnav li#contact.selected a {background-position: -353px -42px;}

/*------------------------------------------------------------
GLIDER styles
-------------------------------------------------------------*/

.glider_nav {position: absolute; z-index: 10; left: 0px; width: 650px; margin-top: 10px; float: none;}
.glider_nav .previous {text-align: left; float: left;}
.glider_nav .next {text-align: right; float: right;}
.glider_nav a {width: 292px; height: 310px; display: block;	background: transparent url("../images/slider_nav_ie_hack.gif") no-repeat center center;}
.glider_nav a:hover.previous {background: transparent url("../images/slider_nav_left.png") no-repeat left center; _background: transparent url("../images/slider_nav_left.gif") left center no-repeat; color: #fff; padding: 0; margin: 0;}
.glider_nav a:hover.next {background: transparent url("../images/slider_nav_right.png") no-repeat right center; _background: transparent url("../images/slider_nav_right.gif") no-repeat right center; color: #fff; padding: 0; margin: 0;}
.glider_nav a span, .glider_nav a:hover span {display: none;}

div.scroller {width: 650px; height: 360px; overflow: hidden; padding: 0; margin: 0; float: left;}
div.scroller div.section {width: 650px; height: 360px; overflow: hidden; padding: 0; margin: 0; float: left;}
div.scroller div.content {width: 10000px;}

/*------------------------------------------------------------
RECENT WORK styles
-------------------------------------------------------------*/

#inspired {width: 650px; height: 75px; position: relative; background: url("../images/inspired.jpg") no-repeat top left; margin: 20px 0 0 0; float: left;}
#inspired a:link, a:visited, a:active {text-decoration: none; outline: none;}
#viewport_wrap {width: 175px; height: 42px; float: right;}
#inspired ul {list-style: none outside; padding: 0; margin: 0;}
#inspired #viewport li {display: inline;}
#inspired #viewport li a {height: 0; background: url("../images/viewport2.jpg") no-repeat; overflow: hidden; padding-top: 42px; float: left;}
#inspired #viewport li#viewbutton a {width: 175px; background-position: 0 0;}
#inspired #viewport li#viewbutton a:hover {background-position: 0 -42px;}
	
/*------------------------------------------------------------
TWITTERFEED styles
-------------------------------------------------------------*/

#latest_tweet {width: 100%; height: auto;}
#latest_tweet #twitterfeed {margin: 10px 0; font: 14px/1.5em Georgia, Arial, Verdana, sans-serif; color: #fff;}
#latest_tweet #twitterfeed a {color: #666; text-decoration: underline; margin-left: 3px;}
#latest_tweet #twitterfeed ul#twitter_update_list a {text-decoration: none;}
#latest_tweet #twitterfeed ul#twitter_update_list a:hover {color: #999;}

/*------------------------------------------------------------
FLICKR FEED styles
-------------------------------------------------------------*/

.gallery ul {margin-top: -10px; list-style: none;}
.gallery ul li {display: inline;}
.gallery ul li a img {padding: 5px;}
.gallery ul li a:active img, .gallery ul li a:hover img, .gallery ul li a:focus img {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}
#flickr_photos {width: 100%; height: auto;}

/*------------------------------------------------------------
CONTACT MINI styles
-------------------------------------------------------------*/

#contact_small {width: 100%; height: auto;}
#contact_small ul {list-style-position: outside;}
#contact_small li {margin-top: 5px;}
#contact_small li.email {font-size: 14px; height: 16px; background: url("../images/envelope.jpg") 0 3px no-repeat; padding: 2px 0 0 25px;}
#contact_small li.resume {font-size: 14px; height: 16px; background: url("../images/lightbulb.jpg") 0 5px no-repeat; padding: 5px 0 0 25px;}
#contact_small a {color: #55CDFF; text-decoration: none;}
#contact_small a:hover {color: #fffbb6; text-decoration: underline;}

/*------------------------------------------------------------
ABOUT styles
-------------------------------------------------------------*/

#about_title {width: 100%; height: 50px; position: relative; background: url("../images/aboutme_title.jpg") no-repeat; margin: 20px 0 10px 0;}
p.about {font: 16px/1.5em Georgia, Times, Times New Roman, serif; color:#fff; text-align:left; margin-top: 0; text-shadow: 0 1px 0 #000; padding-top: 5px; padding-bottom: 10px;}
p.about em {font-style: italic; font-weight: bold;}
p.about a.large_yellow {font: bold 16px/1.5em Helvetica, Arial, Verdana, sans-serif; color:#ffff66; text-decoration: none;}
h2 {font-family: Helvetica, Arial, sans-serif; text-shadow: 0 1px 0 #000; font-size: 20px; color: #ff9920; padding-top: 20px;}
h2 .ampersand {font-family: Baskerville, Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal;}
p.about span.comicsans {font-family: Comic Sans MS;}
p.about a:hover.large_yellow {color: #66ccff; text-decoration: underline;}
img.about_hello {margin-top: 20px;}
img.about_resume {float: right;}
#about_title a:active img.about_resume, #about_title a:hover img.about_resume, #about_title a:focus img.about_resume {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}
#about_where {width: 100%; height: 50px; position: relative; background: url("../images/about_where.jpg") no-repeat; margin-top: 10px;}
div.social_icons {width: 100%;}
div.social_icons ul {list-style: none outside; margin-top: 15px; float: left;}
div.social_icons ul li.icon {display: inline; margin-right: 10px;}
div.social_icons ul li.icon a:active img, div.social_icons ul li.icon a:hover img, div.social_icons ul li.icon a:focus img {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}

/*------------------------------------------------------------
PORTFOLIO styles
-------------------------------------------------------------*/

#portfolio_nav {width: 100%; height: auto; color: #fff;}
#portfolio_nav ul {list-style: none outside; float: right;}
#portfolio_nav li {display: inline; margin-right: 10px; color: #333;}
#portfolio_nav li a {color: #fefbb8; font-size: 12px; text-decoration: none;}
#portfolio_nav li a:hover {color: #f6f6f6; font-size: 12px; text-decoration: underline;}
#portfolio_nav li a.current {color: #f6f6f6; font-weight: bold; text-decoration: underline;}
#portfolio_content {width: 100%; position: relative; margin-top: 10px; float: left;}
ul#portfolio_grid li {display: inline;}
ul#portfolio_grid li a img {margin: 0 7px 7px 0; _margin: 0 13px 13px 0; border: medium #ccc solid; opacity: 0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}
ul#portfolio_grid li a:active img, ul#portfolio_grid li a:hover img, ul#portfolio_grid li a:focus img {opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=100);}

/*------------------------------------------------------------
CONTACT styles
-------------------------------------------------------------*/

#contact {width: 650px; height: 525px; background: url("../images/contact_bg.jpg") no-repeat top left;}
#contact ul {float:left;}
#contact li.name_title {font: 14px/1.5em Georgia, Times, Times New Roman, serif; margin: 60px 0 0 3px;}
#contact li.email_title {font: 14px/1.5em Georgia, Times, Times New Roman, serif;margin: 25px 0 0 3px;}
#contact li.message_title {font: 14px/1.5em Georgia, Times, Times New Roman, serif;margin: 25px 0 0 3px;}
#contact li span.form_footer {margin-top: 10px; color: #666; float: right; font: 12px Georgia, Times, Times New Roman, serif;}
li.contact-name-input{width: 475px; height: 35px; background-color:#fff; border: thin solid #000;}
input.contact-name {width: 475px; background: none; border: 0; padding: 7px 0 10px 10px; font: 16px Arial, Verdana, sans-serif; color: #111111;}
li.contact-email-input{width: 475px; height: 35px; background-color:#fff; border: thin solid #000;}
input.contact-email {width: 475px; background: none; border: 0; padding: 7px 0 10px 10px; font: 16px Arial, Verdana, sans-serif; color: #111111;}
li.contact-message-textarea{width: 475px; height: 200px; background-color:#fff; border: thin solid #000;}
textarea.contact-message{width: 475px; height: 180px; _height: 170px; background: none; border: 0; padding: 10px 0 0 10px; font: 16px/24px Arial, Verdana, sans-serif; color: #111; overflow: auto;}


#blog_wrap {width: 650px; _width: 670px; float: left; position: relative;}
h1 {color: #fff; margin: 0px 0px 10px 0px; font-weight: bold; font-size: 45px; letter-spacing: -3px; line-height: 0.9em;}
h1 a {color: #fff; text-decoration: none;}
#description {color: #ccc; font-size: 11px; line-height: 18px; padding-right: 70px; margin-bottom: 30px;}
#searchresultcount {margin: 15px 0; text-align: center;}
.date {margin: 30px 0px 10px 0px; color: #ccc; font-size: 24px; text-align: right; letter-spacing: -1px; text-transform: uppercase; border-bottom: solid 1px #555;}
.tumblr_title {font-size: 20px; font-weight: bold; letter-spacing: -1px; color: #fff; margin: 0px 0px 5px 0px;}
.tumblr_body, .tumblr_body p {background-color: #0a0a0a; font: Normal 11px 'Lucida Grande', Verdana, Arial, sans-serif; line-height: 18px; color: #ccc;}
.tumblr_body a, .tumblr_body p a {color:#0066FF; font-weight: bold;}