/*
Theme Name: sean23uk - black
Theme URI: http://seanjohnson.net/
Description: A bespoke theme designed and build by me using HTML5!
Version: 1.0
Author: Sean Johnson
Author URI: http://seanjohnson.net/
*/

/* --------------------------------------------------------------
	Screen Stylesheet
	Version 1.0
	Author: Sean Johnson (www.seanjohnson.net)
-------------------------------------------------------------- */

/*		body
-------------------------------------------------------------- */
body { margin: 10px; }

#container { margin: auto; width: 940px; }

h1 a, h1 a:visited,
h2 a, h2 a:visited,
h3 a, h3 a:visited,
h4 a, h4 a:visited
 { color: #000 !important; }

/*		header
-------------------------------------------------------------- */  
header[role="banner"] { margin-bottom: 10px; }
header[role="banner"] h1 { position: relative; margin: 0; width: 940px; height: 260px; overflow: hidden; }
header[role="banner"] h1 span { position: absolute; width: 100%; height: 100%; background: url(images/header.gif) 0 0 no-repeat;  }
header[role="banner"] h2 { display: none; }
/*		nav
-------------------------------------------------------------- */
nav#primary { width: 940px; height: 50px; }
nav#primary ul { list-style: none; margin: 0; }
nav#primary li { float: left; margin: 0; }
nav#primary li#menu1 a { position: relative; display: block; width: 90px; height: 50px; overflow: hidden; }
nav#primary li#menu1 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) 0 0 no-repeat; }
nav#primary li#menu1 a:hover span { background: url(images/menu_sprite.gif) 0 -50px no-repeat; }
nav#primary li#menu2 a { position: relative; display: block; width: 97px; height: 50px; overflow: hidden; }
nav#primary li#menu2 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) -90px 0 no-repeat; }
nav#primary li#menu2 a:hover span { background: url(images/menu_sprite.gif) -90px -50px no-repeat; }
nav#primary li#menu3 a { position: relative; display: block; width: 148px; height: 50px; overflow: hidden; }
nav#primary li#menu3 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) -187px 0 no-repeat; }
nav#primary li#menu3 a:hover span { background: url(images/menu_sprite.gif) -187px -50px no-repeat; }
nav#primary li#menu4 a { position: relative; display: block; width: 98px; height: 50px; overflow: hidden; }
nav#primary li#menu4 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) -335px 0 no-repeat; }
nav#primary li#menu4 a:hover span { background: url(images/menu_sprite.gif) -335px -50px no-repeat; }
nav#primary li#menu5 a { position: relative; display: block; width: 111px; height: 50px; overflow: hidden; }
nav#primary li#menu5 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) -433px 0 no-repeat; }
nav#primary li#menu5 a:hover span { background: url(images/menu_sprite.gif) -433px -50px no-repeat; }
nav#primary li#menu6 a { position: relative; display: block; width: 126px; height: 50px; overflow: hidden; }
nav#primary li#menu6 a span { position: absolute; width: 100%; height: 100%; background: url(images/menu_sprite.gif) -544px 0 no-repeat; }
nav#primary li#menu6 a:hover span { background: url(images/menu_sprite.gif) -544px -50px no-repeat; }

nav.secondary { margin-bottom: 20px; }
nav.secondary ul { list-style: none; margin: 5px 0 20px 0;  font-size: 14px; }
nav.secondary li { margin-bottom: 10px; padding-left: 30px; background: url(images/icon_star.gif) 0 0 no-repeat; }
nav.secondary a { text-decoration: none; }
nav.secondary a:hover { text-decoration: underline; }
nav.secondary ul#portfolio li { padding: 0; background: none; }
nav.secondary li#portfolio_menu1 a { position: relative; display: block; width: 200px; height: 30px; overflow: hidden; }
nav.secondary li#portfolio_menu1 a span { position: absolute; width: 100%; height: 100%; background: url(images/butt_port_web.gif) 0 0 no-repeat; }
nav.secondary li#portfolio_menu2 a { position: relative; display: block; width: 200px; height: 30px; overflow: hidden; }
nav.secondary li#portfolio_menu2 a span { position: absolute; width: 100%; height: 100%; background: url(images/butt_port_graphics.gif) 0 0 no-repeat; }
nav.secondary li#portfolio_menu3 a { position: relative; display: block; width: 200px; height: 30px; overflow: hidden; }
nav.secondary li#portfolio_menu3 a span { position: absolute; width: 100%; height: 100%; background: url(images/butt_port_illy.gif) 0 0 no-repeat; }
nav.secondary li#portfolio_menu4 a { position: relative; display: block; width: 200px; height: 30px; overflow: hidden; }
nav.secondary li#portfolio_menu4 a span { position: absolute; width: 100%; height: 100%; background: url(images/butt_port_art.gif) 0 0 no-repeat; }
nav.secondary li#portfolio_menu5 a { position: relative; display: block; width: 200px; height: 30px; overflow: hidden; }
nav.secondary li#portfolio_menu5 a span { position: absolute; width: 100%; height: 100%; background: url(images/butt_port_fonts.gif) 0 0 no-repeat; }

/*		content
-------------------------------------------------------------- */
#content { float: left; margin: 10px 0 0 20px; width: 700px;  }
#content.home { margin-right: 20px; width: 460px; }

#searchForm { float: right; margin: 5px 15px 0 0; width: 220px; }
#searchForm #s { float: left; margin: 0; padding: 10px; width: 152px; height: 19px; background: #dfeaff url(images/form_search.gif) scroll no-repeat; border: none; overflow: hidden; color: #000; }
#searchForm #searchSubmit { float: right; }

/*		articles
-------------------------------------------------------------- */
article { height: 100%; }
#content.home article,
#content.blog article { padding-bottom: 10px; background: url(images/hr_long.gif) bottom no-repeat; }
#content.blog article { margin-bottom: 10px; }
#content.home article img { max-width: 440px; height: auto; }

article { padding: 0 10px; }
article article,
aside article { padding: 0; }
article header { clear: both; float: left; margin-bottom: 10px; width: 680px; font-size: 11px; color: #999; }
#content.home article header { width: 440px; }
article header h1,
article header h2 { float: left; margin: 5px 0 0 0; width: 390px; font-weight: normal; }
article header p { clear: left; margin-bottom: 0; } 
article header a,
article header a:visited { margin-right: 12px; text-decoration: none; color: #999; }
article header.list p { margin: 0; }
article header time { float: right; margin-top: 5px; width: 50px; height: 50px; background: #000 url(images/date_bkg.gif) no-repeat; text-align: center; color: #fff; }
article header time .month { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 2px; font-weight: bold; }
article header time .day { display: block; font-size: 20px; letter-spacing: 2px;  }
article footer { font-size: 11px; }
article nav { margin-bottom: 20px; font-size: 14px; }
article.page { margin-top: 10px; }
article.portfolio { position: relative; float: left; margin: 10px 10px 0 0; width: 200px; height: 210px; color: #999; }
article.portfolio p { margin: 0; font-size: 11px; }
article.portfolio a { display: inline; text-decoration: none; color: #999; }
article.portfolio a p,
article.portfolio a p a { color: #333; }
aside.sidebar article.portfolio { height: auto; }


/*		comments
---------------------------------------------------------------*/
a[rel="comments"] { padding: 2px 0 3px 33px; background: url(images/icon_comments.gif) 0 0 no-repeat; } 

#comments { clear: both; }

article.comment { width: 440px; padding-bottom: 0; font-size: 11px; }
input#subscribe { float: left; margin-right: 10px; }
label[for="subscribe"] { font-weight: normal; }
img.avatar { float: left; margin: 0 10px 0 0; }
article.comment p.meta cite { margin-top: 3px; font-size: 14px; }

#commentForm input[type="text"],
#commentForm input[type="email"],
#commentForm input[type="url"]  { padding: 10px 10px 0 8px; width: 303px; height: 28px; border: none; background: #dfeaff url(images/form_inputtext.gif) scroll no-repeat; overflow: hidden; color: #000; }
#commentForm textarea { padding: 12px 10px 10px 6px; width: 448px; height: 200px; border: none; background: #dfeaff url(images/form_textarea.gif) scroll no-repeat; font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, Helvetica, sans-serif; color: #000; }

/*		extras
-------------------------------------------------------------- */
aside.sidebar { margin: 10px 0; width: 220px; font-size: 11px; }
aside.sidebar.left { clear: both; }
aside.sidebar p,
aside.sidebar ul,
aside article,
#extras aside p { padding: 5px 10px 0 10px; }
aside.sidebar article p { padding: 0; }

aside#twitter { clear: both; margin-bottom: 10px; width: 940px; height: 52px; background: url(images/bkg_twitter.gif) right no-repeat; }
aside#twitter h3  { float: left; margin: 0; }
aside#twitter h3 a { position: relative; display: block;  width: 126px; height: 52px; overflow: hidden; color: #000; }
aside#twitter h3 a span { position: absolute; width: 100%; height: 100%; background: url(images/header_twitter.gif) no-repeat; }
aside#twitter p { float: left; margin: 16px 10px 0 20px; width: 780px; height: 20px; background: #000; color: #fff; font-size: 12px; overflow: hidden; }
aside#twitter a { color: #fff; text-decoration: none; font-weight: bold; }

#extras { clear: both; margin: 0 0 10px -10px; width: 960px; height: 280px; background: #000 url(images/footer_bkg.gif) no-repeat; font-size: 11px; color: #fff;}
#extras aside { float: left; margin: 10px; width: 300px; }
#extras h2 {  background: #000; color: #fff; }
#extras a {  background: #000; color: #fff; }
#extras p { background: #000; margin-bottom: 0.7em; }
#extras ul { background: #000; margin-bottom: 0; }

aside#flickr ul { list-style: none; margin: 0 0 0 10px; }
aside#flickr ul li { float: left; margin: 0; padding: 10px; width: 76px; height: 76px; background: url(images/bkg_flickr_thumb.gif) top left no-repeat; }
aside#flickr img { width: 70px; height: 70px; } 

aside#elsewhere ul { list-style: none; margin-left: 25px; font-size: 14px; }
aside#elsewhere ul li { margin-bottom: 5px; }
aside#elsewhere a { text-decoration: none; color: #fff;}
aside#elsewhere a[rel="linkFlickr"] { padding-left: 30px; background: url(images/icon_flickr.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkTwitter"] { padding-left: 30px; background: url(images/icon_twitter.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkBehance"] { padding-left: 30px; background: url(images/icon_behance.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkFacebook"] { padding-left: 30px; background: url(images/icon_facebook.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkLinkedin"] { padding-left: 30px; background: url(images/icon_linkedin.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkLastFM"] { padding-left: 30px; background: url(images/icon_lastfm.ico) 0 0 no-repeat; }
aside#elsewhere a[rel="linkDelicious"] { padding-left: 30px; background: url(images/icon_delicious.ico) 0 0 no-repeat; }

article header a[rel="linkTwitter"] { padding-left: 20px; background: url(images/icon_twitter.ico) 0 0 no-repeat; }

aside#subscribe ul { list-style: none; margin-left: 25px; font-size: 14px; }
aside#subscribe ul li { margin-bottom: 5px; }
aside#subscribe a { padding-left: 30px; background: url(images/feed.png) 0 0 no-repeat; color: #fff; text-decoration: none; }

/*		footer
-------------------------------------------------------------- */
footer[role="contentinfo"] { clear: both; font-size: 11px; text-align: center;  }

#JSwarning { display: none; }

/*		headers - image replacement
-------------------------------------------------------------- */
.header_search { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_search span { position: absolute; width: 100%; height: 100%; background: url(images/header_search.gif) no-repeat; }
.header_404 { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_404 span { position: absolute; width: 100%; height: 100%; background: url(images/header_404.gif) no-repeat; }
.header_about { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_about span { position: absolute; width: 100%; height: 100%; background: url(images/header_about.gif) no-repeat; }
.header_fonts { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_fonts span { position: absolute; width: 100%; height: 100%; background: url(images/header_fonts.gif) no-repeat; }
.header_shop { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_shop span { position: absolute; width: 100%; height: 100%; background: url(images/header_shop.gif) no-repeat; }
.header_portfolio_long { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_portfolio_long span { position: absolute; width: 100%; height: 100%; background: url(images/header_portfolio_long.gif) no-repeat; }
.header_portfolio { position: relative; margin: 0; width: 220px; height: 50px; overflow: hidden; }
.header_portfolio span { position: absolute; width: 100%; height: 100%; background: url(images/header_portfolio.gif) no-repeat; }
.header_blog { position: relative; margin: 0; width: 460px; height: 50px; overflow: hidden; }
.header_blog span { position: absolute; width: 100%; height: 100%; background: url(images/header_blog_small.gif) no-repeat; }
.header_blog_long { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_blog_long span { position: absolute; width: 100%; height: 100%; background: url(images/header_blog.gif) no-repeat; }
.header_categories { position: relative; margin: 0; width: 220px; height: 50px; overflow: hidden; }
.header_categories span { position: absolute; width: 100%; height: 100%; background: url(images/header_categories.gif) no-repeat; }
.header_recentwork { position: relative; margin: 0; width: 220px; height: 50px; overflow: hidden; }
.header_recentwork span { position: absolute; width: 100%; height: 100%; background: url(images/header_recentwork.gif) no-repeat; }
.header_welcome { position: relative; margin: 0 0 0 -10px; width: 220px; height: 50px; overflow: hidden; }
.header_welcome span { position: absolute; width: 100%; height: 100%; background: url(images/header_welcome.gif) no-repeat; }
.header_recentposts { position: relative; margin: 0; width: 220px; height: 50px; overflow: hidden; }
.header_recentposts span { position: absolute; width: 100%; height: 100%; background: url(images/header_recentposts.gif) no-repeat; }
.header_tagcloud { position: relative; margin: 0; width: 220px; height: 50px; overflow: hidden; }
.header_tagcloud span { position: absolute; width: 100%; height: 100%; background: url(images/header_tagcloud.gif) no-repeat; }
.header_elsewhere { position: relative; margin: 0; width: 300px; height: 50px; overflow: hidden; }
.header_elsewhere span { position: absolute; width: 100%; height: 100%; background: url(images/header_elsewhere.gif) no-repeat; }
.header_flickr { position: relative; margin: 0; width: 300px; height: 50px; overflow: hidden; }
.header_flickr span { position: absolute; width: 100%; height: 100%; background: url(images/header_flickr.gif) no-repeat; }
.header_subscribe { position: relative; margin: 0; width: 300px; height: 50px; overflow: hidden; }
.header_subscribe span { position: absolute; width: 100%; height: 100%; background: url(images/header_subscribe.gif) no-repeat; }
.header_art { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_art span { position: absolute; width: 100%; height: 100%; background: url(images/header_art.gif) no-repeat; }
.header_web { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_web span { position: absolute; width: 100%; height: 100%; background: url(images/header_web.gif) no-repeat; }
.header_illustration { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_illustration span { position: absolute; width: 100%; height: 100%; background: url(images/header_illustration.gif) no-repeat; }
.header_graphics { position: relative; margin: 0; width: 700px; height: 50px; overflow: hidden; }
.header_graphics span { position: absolute; width: 100%; height: 100%; background: url(images/header_graphics.gif) no-repeat; }