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

Description: Stylesheet for sarahlayne.com
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: #080808 url("../images/bg.gif") repeat-x top left; font: 12px Arial, Helvetica Verdana, sans-serif;}
#wrap {width: 960px; margin: 0 auto;}
#header {position: relative; float: left;}
#tagline {margin: 30px 0 0 0; position: relative; float: left;}
#recent_thumbs {width: 100%; position: relative; float: left;}
#recent_thumbs a img.left {margin: 35px 23px 0 0; _margin: 35px 21px 0 0; border: medium #f0e9cb solid;}
#recent_thumbs a img.right {margin: 35px 0 0 0; border: medium #f0e9cb solid;}
#recent_thumbs a:active img, #recent_thumbs a:hover img, #recent_thumbs a:focus img {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}
#qTip {position: absolute; display: none; padding: 5px 5px; font: 14px "Myriad Pro", Helvetica, Arial, Verdana, sans-serif; color: #fff; z-index: 1000; background: url('../images/tooltip.png') repeat;}

#left_wrap {width: 580px; _width: 580px; margin: 40px 0 0 0; float: left; position: relative; color: #fff;}
#left_wrap p {line-height: 2.2em;}
#left_wrap p a {color: #f6e497; text-decoration: none;}
#left_wrap p a:hover {color: #fff; text-decoration: none;}
#portfolio_nav_wrap {width: 100%; margin-bottom: 10px; position: relative;}
#portfolio_nav {float: right; margin: 5px 0 0 0;}
#portfolio_nav ul {list-style: none outside;}
#portfolio_nav li {display: inline; margin-right: 10px;}
#portfolio_nav li a {color: #ab9f6a; font-size: 12px; text-decoration: none;}
#portfolio_nav li a:hover {color: #fff; font-size: 12px; text-decoration: none;}
#portfolio_nav li a.current {color: #fff; font-weight: bold;}
#portfolio_title {float: left;}
img.title, a img.title {_margin: 0 0 5px 0;}
#recentwork_title {width: 580px; height: 29px; background: url("../images/recentwork_title.gif") no-repeat top left;}
#viewport {float: right; margin: 8px 6px 0 0; _margin: 5px 6px 0 0;}
#viewport a {font: 14px Helvetica, Arial, Verdana, sans-serif; font-weight: normal; color: #f6e497; text-decoration: none;}
#viewport a:hover {color: #fff;}
#recentwork_content {width: 100%;}
#recent_headline {margin: 15px 0 0 0; font-size: 10px; color: #fff;}
span.piece_title {font: 16px Helvetica, Arial, Verdana, sans-serif; font-weight: bold; font-style: italic; color: #fff;}
#recent_description {font: 12px Helvetica, Arial, Verdana, sans-serif; margin: 15px 0 0 0; line-height: 2.2em; color: #fff;}
#recent_description img {padding: 0 15px 0 0;}

.headline {font: 16px/24px Helvetica, Arial, Verdana, sans-serif; font-weight: bold; color: #fff; background: url('../images/bluetexturebar.gif') no-repeat top left; padding: 1px 0 0 5px;}
ul#cv_list {list-style: outside; margin: 0 0 0 25px;}
ul#cv_list li {margin: 0 0 15px 0; line-height: 2.2em; }

#right_wrap {width: 320px; height: auto; margin: 40px 0 0 0; position: relative; float: right;}
#aboutme_title {width: 317px; height: 29px; background: url("../images/aboutme_title.gif") top left;}
#aboutme_content p {font: 12px Helvetica, Arial, Verdana, sans-serif; margin: 15px 0 0 0; line-height: 2.2em; color: #fff;}

div.hr {height: 2px; background: url("../images/hr.gif") repeat-x center; margin: 15px 0; position: relative;}
div.hr hr {display: none;}
#footer {width: 100%; height: auto; _margin-bottom: 0; color: #fff; font-size: 10px; float: left;}
#copyright {float: right;}
#copyright a {color: #f6e497; font-weight: bold; text-decoration: none;}
#copyright a:hover {color: #fff; font-weight: bold; text-decoration: none;}
#bottom_spacer {width: 100%; height: 30px;}
p.thanks {font: 16px/2.2em Helvetica, Arial, Verdana, sans-serif;}


/*------------------------------------------------------------
SLIMBOX styles
-------------------------------------------------------------*/

#lbOverlay {position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;cursor: pointer;}
#lbCenter, #lbBottomContainer {position: absolute;z-index: 9999;overflow: hidden;background-color: #fff;}
.lbLoading {background: #fff url(../images/loading.gif) no-repeat center;}
#lbImage {position: absolute;left: 0;top: 0;border: 8px solid #fff;background-repeat: no-repeat;}
#lbPrevLink, #lbNextLink {display: block;position: absolute;top: 0;width: 50%;outline: none;}
#lbPrevLink {left: 0;}
#lbPrevLink:hover {background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink {right: 0;}
#lbNextLink:hover {background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;}
#lbBottom {font-size: 1.2em;color: #221619;line-height: 1.4em;text-align: left;border: 10px solid #fff;border-top-style: none;}
#lbCloseLink {display: block;float: right;width: 78px;height: 18px;background: url(../images/closelabel.gif) no-repeat center;margin: 5px 0;outline: none;}
#lbCaption, #lbNumber {margin-right: 71px;}
#lbCaption {}
h3.section {margin-top: 1em;}
/* Fieldset  */
form {margin: 0;padding: 0;}
fieldset {margin: 0;padding: 0;border: none;float: left;font-size: 1.2em}
form .oneField {margin: 0;padding: 5px 7px 5px 0;display: block;float: left;}
form .twoField {margin: 0;padding: 5px 7px 5px 0;display: block;}
label.preField {padding: 0;margin: 0 4px 0 0;font-weight: normal;display: block;width: 45px;}
label.preField-r {padding: 0;margin: 0;font-weight: normal;display: block;}


/*------------------------------------------------------------
ACCORDIAN styles
-------------------------------------------------------------*/

#accordian {margin: 30px 0px;}
h3.toggler {cursor: pointer;font-family: Helvetica, Arial, Verdana, sans-serif;font-size: 16px;background: url("../images/accordian_titlebg.gif") no-repeat top left;color: #fff;height: 31px;margin: 0 0 10px 0;padding: 0;}
h3.toggler:active, h3.toggler:hover, h3.toggler:focus {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}
h3.toggler #accordian_title {font-size: 16px; float: left; margin: 9px 0 0 9px; _margin-left: 3px; color: #fff;}
h3.toggler #accordian_medium {font-size: 10px; margin: 5px 0 0 0; float: right; margin: 13px 8px 0 0; _margin-right: 5px; color: #fff;}
div.element p, div.element h4 {margin:0px;padding:10px;}
div.element p a img {padding-right: 10px;}


/*------------------------------------------------------------
QUICKTIME PLAYER styles
-------------------------------------------------------------*/

.playButton {background-color: rgb(20,20,20); cursor: pointer; font-weight: bold; font-size: 1.25em; opacity: .8; filter: alpha(opacity=80); -moz-border-radius: 1em; -webkit-border-radius: 1em; position: relative; top: 50%; zoom: 100%; padding: .5em 1em; color: white;}
.playBackground {background-color: rgb(0,0,0); opacity: 0.0; filter: alpha(opacity=0); position: absolute; top: 0px; left: 0px;}

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

#navigation {padding: 0; margin: 55px 0 0 0; float: right;}
#navigation a:link, a:visited, a:active {text-decoration: none; outline: none;}
#navigation ul {list-style: none outside; padding: 0; margin: 0;}
#navigation ul li {display: inline; padding: 0; margin: 0;}
#navigation ul li a:active img, #navigation ul li a:hover img, #navigation ul li a:focus img {opacity:0.50; filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=50);}

	
/*------------------------------------------------------------
TWITTERFEED styles
-------------------------------------------------------------*/

#latest_tweet {width: 100%; height: auto;}
#latest_tweet #twitterfeed {margin: 12px 0; font: 12px/1.6em Arial, Verdana, sans-serif; color: #fff; line-height: 2.2em;}
#latest_tweet #twitterfeed a {color: #ab9f6a; 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: #fff;}
#latest_tweet #twitterfeed ul#twitter_update_list li {margin-bottom: 20px;}


/*------------------------------------------------------------
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 {height: 16px; background: url("../images/envelope.gif") no-repeat; padding: 2px 0 0 25px;}
#contact_small li.resume {height: 16px; background: url("../images/asterisk.gif") no-repeat; padding: 2px 0 0 25px;}
#contact_small a {color: #ab9f6a; text-decoration: none;}
#contact_small a:hover {color: #fff; text-decoration: none;}


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

#contact {width: 580px; height: auto;}
#contact ul {float: left;}
#contact li.name_title {margin: 25px 0 0 0;}
#contact li.email_title {margin: 25px 0 0 0;}
#contact li.message_title {margin: 25px 0 0 0;}
#contact li.form_footer {margin-top: 20px; color: #fff;}
li.contact-name-input{width: 265px; height: 25px; }
input.contact-name {width: 245px; background: #fff; border: 0; padding: 7px 0 10px 0; font: bold 14px Arial, Verdana, sans-serif; color: #161616;}
li.contact-email-input{width: 296px; height: 25px;}
input.contact-email {width: 276px; background: #fff; border: 0; padding: 7px 0 10px 0; font: bold 14px Arial, Verdana, sans-serif; color: #161616;}
li.contact-message-textarea{width: 456px; height: 217px;}
textarea.contact-message{width: 456px; height: 200px; _height: 190px; background: #fff; border: 0; padding: 10px 0 0 0; font: bold 14px/2.2em Arial, Verdana, sans-serif; color: #161616; overflow: auto;}