/* CSS by Nathan Swartz, Pittsburgh Web Designer for Hire */

body {
	background:white; 
	font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans;
	color:#535353;
	font-size:1em;
	line-height:1.25em;
	}

body, p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6, form, textarea, input, button, fieldset {margin:0px; padding:0px;}

img {border:none;}

.podPress_content {float:right; border:5px double #bdb68c !important;; margin:20px 18px 10px 10px !important; padding:5px !important;}

.et {position:absolute; top:-58px; background:transparent url(/img/nav/bloghome.jpg) no-repeat; padding:7px 0 7px 0; }
.et a {display:block; padding:0 37px 0 39px;}

#sidies {position:relative;}

.fdpoweredby {display:none !important;}

/* positioning and layout */

.contents, #features, #footer, #portfolio ul, #metablog ul {position:relative; width:954px; margin:0px auto; text-align:left;}

#header {background:url(/img/bg/paisley_header.jpg) repeat-x center bottom; text-align:center; height:97px; padding-top:20px;}
#b #header {background:url(/img/bg/grit_d.jpg) repeat-x center bottom;}

h1 {display:inline; float:left;}

h1 a {background:url(/img/bg/clicknathan.jpg) no-repeat; display:block; width:415px; height:83px; text-indent:-999em;}
#b h1 a {background:url(/img/bg/handmadewebsites.jpg) no-repeat;}

#header ul {width:440px; list-style:none; float:left; margin-left:55px;}

#header li {float:left; text-indent:-999em;}
#portfolio li a {text-indent:-999em; position:relative;}

#header li a, #b #header li a {display:block; height:30px; background-position:0px -30px;}

#header li a:hover {background-position:0px 0px !important;}

.navstart a {background:url(/img/nav/start.jpg) no-repeat; width:55px;}
#b .navstart a {background:url(/img/nav/start_h.jpg) no-repeat;}
.navportfolio a {background:url(/img/nav/mywork.jpg) no-repeat; width:96px;}
#b .navportfolio a {background:url(/img/nav/mywork_h.jpg) no-repeat;}
.navabout a {background:url(/img/nav/aboutwebdesign.jpg) no-repeat; width:186px;}
#b .navabout a {background:url(/img/nav/aboutwebdesign_h.jpg) no-repeat;}
.navcontact a {background:url(/img/nav/contact.jpg) no-repeat; width:88px;}
#b .navcontact a {background:url(/img/nav/contact_h.jpg) no-repeat;}

#search, #searchform {width:362px; float:left; margin-left:43px; margin-top:5px; position:relative;}
#search label {display:none;}

#search input    {background:url(/img/nav/searchnathan.jpg) no-repeat; width:291px; padding:15px 15px 10px 15px; border:none !important;}
#b #search input {background:url(/img/nav/searchnathan_h.jpg) no-repeat;}

#s:focus    {background:url(/img/nav/searchnathan.jpg) no-repeat 0px -41px; border:none !important;}
#b #s:focus {background:url(/img/nav/searchnathan_h.jpg) no-repeat 0px -41px; border:none !important;}

#search button {text-indent:-999em; width:41px; height:41px; background:url(/img/nav/searchbutton.jpg) no-repeat; border:none; position:absolute; top:0px; right:0px;}
#b #search button {background:url(/img/nav/searchbutton_h.jpg) no-repeat;}

* html #search {margin-left:15px !important;}
* html #search button {top:1px;}

#portfolio {position:relative; clear:left; height:293px; background:url(/img/bg/paisley_footer.jpg) repeat-x center; z-index:3;}
#b #portfolio {height:301px; background:url(/img/bg/paisley_home.jpg) repeat-x center; }

#b #portfolio li {float:left !important;}

#portfolio ul, #features ul {list-style:none; }
#portfolio ul {position:relative; margin:0px auto !important;}

.portlink {position:absolute; width:150px; top:274px; right:13px; font-size:12px; color:white;}
.portlink a {color:white; font-weight:bold; text-decoration:none; background-image:none !important;}

.uno {background:url(/img/bg/h_tl.jpg) no-repeat; width:251px; height:273px; margin:23px 0px 0px -11px;}
.dos {background:url(/img/bg/h_tm.jpg) no-repeat; width:296px; height:289px; margin:12px 0px 0px 41px;}
.tre {background:url(/img/bg/h_tr.jpg) no-repeat; width:283px; height:285px; margin:13px 0px 0px 27px;}

.uno a {background:url(/img/portfolios/update/l-thumb-bike.gif) no-repeat; display:block; height:233px; margin:7px 0px 0px 6px;}
.dos a {background:url(/img/portfolios/update/m-thumb-friendship.jpg) no-repeat; display:block; height:226px; margin:19px 0px 0px 24px;}
.tre a {background:url(/img/portfolios/update/r-thumb-pigpen.gif) no-repeat; display:block; height:231px; margin:7px 0px 0px 14px;}

.one {background:url(/img/bg/p_l.jpg) no-repeat; width:266px; height:266px; position:absolute; top:5px; left:4px;}
.two {background:url(/img/bg/p_m.jpg) no-repeat; width:296px; height:289px; position:absolute; top:8px; left:312px;}
.tri {background:url(/img/bg/p_r.jpg) no-repeat; width:283px; height:285px; position:absolute; top:10px; left:639px;}

.one a {background:url(/img/portfolios/p_left.gif) no-repeat; display:block; height:173px; margin:18px 0 0 28px;}
.two a {background:url(/img/portfolios/p_middle.gif) no-repeat; display:block; height:191px; margin:18px 0 0 35px;}
.tri a {background:url(/img/portfolios/p_right.gif) no-repeat; display:block; height:173px; margin:18px 0 0 26px;} 

#content {background:url(/img/bg/feature_bg.jpg) repeat-x top center; padding:1px 0 0 0;}
#b #content {background:url(/img/bg/grit_t.jpg) repeat-x top center; padding:1em 0;}
#p #content, #w #content {background:url(/img/bg/port_bg.jpg) repeat-x top center; padding:1em 0;}

#column1, #column2, .blog, .sidebar, .makecomments, .comments {float:left;}
#column1 {width:55%; padding-right:5%;}
#column2 {width:36%;}

.sidebar {position:relative;}
.iphone_ad {position:absolute; top:45px; left:-12px;}

* html #column1 {padding-right:20px;}

#features {clear:left; padding-top:1em;}

#features li {float:left;}

#features li a {text-indent:-999em;}

.page {min-height:417px; position:relative;}
.page p, .page ul, .page blockquote, .page ol, .page h2, .page h3, .page h4 {width:50%;}
.page blockquote p, .page p ul, .page p ol {width:100%;}
#p .page {position:relative; float:left;}

.spage {padding:0 30px 0 0; width:58%; float:left; min-height:417px;}
.sublinks {float:left; margin-top:20px !important; }
.sublinks ul {margin:0 0 0 10px !important;}
.sublinks li {margin:5px !important;}

#footer {clear:left; text-align:center;}
* html #footer {padding-top:0;}
* html #p #footer {display:none;}
#b #footer, #p #footer {padding-top:0;}
#bloomfield {position:relative; float:left; width:100%;}

.une {background:url(/img/bg/h_bl.jpg) no-repeat; width:266px; height:266px;}
.deux {background:url(/img/bg/h_bm.jpg) no-repeat center; width:311px; height:316px;}
.trois {background:url(/img/bg/h_br.jpg) no-repeat; width:283px; height:266px;}

.une a {background:url(/img/portfolios/p_left.gif) no-repeat; display:block; height:181px; margin:51px 16px 0 28px;}
.deux a {background:url(/img/portfolios/p_middle.gif) no-repeat center; display:block; height:181px; margin:73px 0 0 53px;}
.trois a {background:url(/img/portfolios/p_right.gif) no-repeat; display:block; height:181px; margin:56px 0 0 57px;}

.browsehappy a {background:url(/img/bg/browsehappy.gif) no-repeat; width:120px; height:60px; display:block; text-indent:-999em; margin:0px auto;}

.porter {width:60%; margin-right:5%; float:left; position:relative;}
.feat {margin-top:75px !important; margin-bottom:50px !important;}
.new {clear:left;}
#p .contents a img {margin:20px; }

.blog, .comments {width:60%; margin-right:30px;}
.sidebar, .makecomments, .sublinks {width:24%; margin-top:40px; background:url(/img/bg/sidebar.jpg) no-repeat; padding:10px 26px 10px 23px;}
.makecomments {margin-top:0px !important;}

.metapost {width:566px; height:118px; background:url(/img/bg/postmeta.gif) no-repeat; margin-bottom:13px;}
.metapost p {width:255px; margin:0px !important; line-height:1.5em; padding:14px 14px 0px 14px; float:left; position:relative;}

.postmeta2 {width:566px; padding:14px 0 0 14px; height:47px; background:url(/img/bg/postmeta2.jpg) no-repeat; margin-bottom:13px;}

#metablog {clear:left; background:url(/img/bg/paisley_comments.jpg) repeat-x center; height:71px;}

#metablog ul {list-style:none; margin:0px auto !important; position:relative;}

#metablog li {display:inline; height:65px; position:absolute; top:-14px;}
.metashare a, .metacomments a, .metarss a {text-indent:-999em; height:65px; display:block;}

.metashare {width:164px;}
.metashare a {width:164px; background:url(/img/bg/meta_sharethis.jpg) no-repeat !important; float:left;}
.metacomments {width:221px; left:222px;}
.metacomments a {width:43px; background:url(/img/bg/meta_comments.jpg) no-repeat; text-indent:0 !important; font-size:2.2em; color:white !important; text-decoration:none; font-weight:bold !important; position:absolute; padding:22px 174px 0px 11px; text-align:center; line-height:.75em;}
.metacomments em {display:none !important;}
.metarss {width:182px;  left:505px;}
.metarss a {width:182px; background:url(/img/bg/meta_rss.jpg) no-repeat;}


.metapost {width:608px; clear:left; position:relative; float:left;}
.metapost p {margin:0px !important; padding:12px 15px 0px 15px !important;}
.category, .related {float:left;}
.category {width:270px;}

.comments ul {margin:0px !important;}
.comments li {padding:0px 0px 24px 0px !important; list-style:none; display:block; clear:left; width:100%;}
.comments .avatar {width:65px; height:65px; background:url(/img/bg/border95.jpg) no-repeat; padding:9px 20px 21px 14px; float:left;}
.comments blockquote {padding:0px 0px 0px 111px; margin:0px;}

.searchentries {padding:5px 0;}
.searchentries p {margin:0 !important;}
.searchentries p a {color:#b6b6b6 !important; text-decoration:none;}

/* forms */

.makecomments textarea {width:229px; height:139px; background:url(/img/bg/commentstxtarea.jpg) no-repeat; padding:6px 3px; border:1px solid #4e5901;}
.makecomments input {border:1px solid #4e5901; width:100px;}
.makecomments button {background:url(/img/bg/buttons.jpg) repeat-x; padding:5px; margin:5px 0px; float:right; border:1px solid #4e5901; font-weight:bold;}
fieldset {border:none;}

#author, #email, #url {width:150px; padding:5px; background:#f3f3f3;}
#author:focus, #email:focus, #url:focus {background:url(/img/bg/commentstxtarea.jpg) no-repeat;}

.sidebar select {border:1px solid #b6b6b6; padding:2px; margin-top:10px;}

/* images with borders */

.imgbd {border:3px solid #bdb68c; float:left; margin:4px 9px 4px 0;}
.imgbd65 {background:url(/img/bg/border95.jpg) no-repeat; padding:9px 20px 21px 14px; float:right; margin:0 0 20px 20px; width:65px; height:65px; clear:right;}
.imgbd100 {background:url(/img/bg/border133.jpg) no-repeat; padding:18px 9px 14px 22px; float:right; margin:0 0 20px 20px; width:100px; height:100px; clear:right;}
.imgbd125 {background:url(/img/bg/border161.jpg) no-repeat; padding:18px; float:right; margin:0 0 20px 20px; width:125px; height:125px; clear:right;}
.imgbd380 {background:url(/img/bg/border380.jpg) no-repeat; padding:38px 34px 43px 66px; margin:20px auto; width:380px; height:214px; display:block;}

.imgright {float:right; margin:0 0 10px 20px;}

/* banners */

.feedme, .yummy, .ref_istock, .ref_mediat, .ref_thread, .ref_zipcar {width:234px; height:79px; background:url(/img/bg/rss_feedme.jpg) no-repeat;}
.yummy {background:url(/img/content/yummybanner.jpg) no-repeat; height:84px;}
.feedme a, .yummy a, .ref_mediat a, .ref_istock a, .ref_thread a, .ref_zipcar a {display:block; text-indent:-999em; height:79px;}
.yummy a, .ref_istock, .ref_mediat, .ref_thread {height:84px;}
.ref_istock {background:url(/img/content/istockreferral.gif) no-repeat; height:84px;}
.ref_mediat {background:url(/img/content/mtreferral.gif) no-repeat; height:84px;}
.ref_thread {background:url(/img/content/threadlessreferral.gif) no-repeat; height:84px;}
.ref_zipcar {background:url(/img/content/zipcar.gif) no-repeat; height:84px;}

.poditunes {width:234px; background:url(/img/bg/itunes.png) no-repeat;}
.poditunes a {height:39px; display:block; text-indent:-999em;}

p.poditunes {margin:-12px 0 0 0 !important;}

/* what I do popups */

.lastfm_logo {}
.twitter_logo {background:url(http://clicknathan.com/wp-content/uploads/2008/04/50lastfm.gif) no-repeat; padding-left:60px;}

#popup, #popup2 {display:none; border:5px double #bdb68c; background:#f8f8f3; padding:10px;}

.popdown {background:#bdb68c; padding:0 5px 2px 5px; margin:-10px 0 5px -10px; position:absolute; width:208px; text-align:right;}
.popdown a {color:#fff !important; font-weight:bold !important;}

.iphone_portfolio {position:absolute; top:-30px; left:480px; z-index:50;}
.hiphone {display:none;}

.moseyhome {background:url(/img/moseyhome_banner.jpg) no-repeat; margin:0 0 15px 0;}
.moseyhome a {display:block; text-indent:-999em; height:57px;}

/* typography */

.doublevay {border:5px double #bdb68c; padding:10px; font-family:Georgia;}

code {border:1px dashed #b6b6b6; background:#ebebeb; padding:1px 3px; color:black; font-family:"Courier New", Courier;}

#content h2 {font:1.5em Georgia,serif; margin:.5em 0 0 0; color:#4e5901;}
.blog h2 {font-size:2.2em !important; font-weight:normal;}
#content h3 {font:1.3em Georgia,serif; margin:.5em 0 0 0; color:#4e5901;}
#content h4 {font:1.1em Georgia,serif; margin:.5em 0 0 0; color:#4e5901;}
#content h5 {font:1em Georgia,serif; margin:.5em 0 0 0; color:#4e5901;}
#content h6 {font:.85em Georgia,serif; margin:.5em 0 0 0; color:#4e5901;}
#content p, #content li, #footer p {font-size:.85em; color:#535353; margin:1.25em 0;}
#footer p {color:#b6b6b6;}
#content p.subtitle {color:#b6b6b6; margin:0;}
#content #column2 h2 {font-size:1.5em; padding-top:.25em; color:#9d5004;}
#content a {color:#f4800e; font-weight:normal;}
#content a:hover {text-decoration:none;}
#footer a {font-weight:bold; text-decoration:none; color:#b6b6b6}

.makecomments p {font-size:.65em !important;}

#content h2 a {text-decoration:none !important; color:#4e5901;}
#content h2 a:hover {text-decoration:underline !important;}

.sidebar h2 {color:#9d5004 !important;}
.sidebar ul, .sidebar ol {margin-left:21px !important;}
.sidebar li {line-height:1.3em; margin:4px 0 !important;}

.sidebar small {color:lgray}

#content ul, #content ol {margin:.5em 0 .5em 2.5em; padding:0;}
#content ol {margin-left:2.95em;}
blockquote {font:italic 1.2em/1.8em Georgia,serif; color:#b6b6b6; padding-left:60px; background:url(/img/bg/bq-open.gif) no-repeat; margin:20px 0px 20px 28px;}
blockquote p {padding-right:58px; background:url(/img/bg/bq-close.gif) no-repeat bottom right;}

#comments blockquote {background-image:none !important; font-style:normal; font-size:1.2em; line-height:1.3em; font-family:"Lucida Grande", Verdana, sans;}
#comments blockquote p {background-image:none !important; padding-right:0;}

#column2 ul {margin:-1em 0 0 0 !important;}
#column2 li {background:url(/img/bg/border60.gif) no-repeat; width:160px; height:55px; float:left; list-style:none;}
#column2 li.pittsburgh {margin-top:-10px;}

#column2 li a {display:block; height:45px; padding-left:60px; margin:5px 0 0 5px;}
.freelance a {background:url(/img/content/freelanceswitch.gif) no-repeat;}
.pittsburgh a {background:url(/img/content/pghdesigners.gif) no-repeat;}
.webmonkey a {background:url(/img/content/webmonkey.jpg) no-repeat;}

.right {text-align:right; padding-right:100px;}

cite {float:right; font-style:normal;}

/* Tables */

table {padding:5px; border:1px solid #535353;}
th {font-weight:normal; background:#535353; color:white;}
th, td {padding:8px;}
.table_alt {background:#b6b6b6;}

/* Lightbox JS */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/img/lightbox/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font-size:.8em;;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}