/********************************************************************

    ____                       ____   ____  _      __              
   / __ \__  _______________  / / /  / __ )(_)____/ /_  ____  ____ 
  / /_/ / / / / ___/ ___/ _ \/ / /  / __  / / ___/ __ \/ __ \/ __ \
 / _, _/ /_/ (__  |__  )  __/ / /  / /_/ / (__  ) / / / /_/ / /_/ /
/_/ |_|\__,_/____/____/\___/_/_/  /_____/_/____/_/ /_/\____/ .___/ 
                                                          /_/      


Author: Russell Bishop
Author URL: http://www.russbishop.co.uk/
Description: Portfolio Stylesheet
Created: 01/02/09

********************************************************************/

@import "reset.css";

body { font-family: "Lucida Grande", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 12px; height: 100%; background: url('images/all-background.jpg') repeat; }

h1 { display: none; }

/* top *************************************************************/
#top { width: 100%; height: 50px; background: url('images/top-background.jpg') repeat-x; }
#top .container { width: 508px; height: 18px; margin: 0px auto; padding-top: 26px; }

#top .container ul { width: 508px; height: 24px; position: absolute; background: url(images/top.gif) no-repeat 0px 0px; list-style: none; }
#top .container ul li { display: inline; text-align: center; padding-top: 8px; }
#top .container ul li a:link, #top .container ul li a:visited { position: absolute; top: 0px; padding-top: 6px; height: 18px; overflow: hidden; text-align: center; font-size: 12px; color: #fff; width: 68px; }
#top .container ul li a:hover { padding-top: 5px; height: 19px; } 

#top .container ul li.home a:link, #top .container ul li.home a:visited { left: 0px; }
#top .container ul li.home a:hover { background: url(images/top.gif) no-repeat 0px -24px; }
#top .container ul.current-home li.home a:link, #top .container ul.current-home li.home a:visited, #top .container ul.current-home li.home a:hover { background: url(images/top.gif) no-repeat -352px -48px; color: #000; padding-top: 5px; height: 19px; }

#top .container ul li.services a:link, #top .container ul li.services a:visited { left: 88px; }
#top .container ul li.services a:hover { background: url(images/top.gif) no-repeat -88px -24px; }
#top .container ul.current-services li.services a:link, #top .container ul.current-services li.services a:visited, #top .container ul.current-services li.services a:hover { background: url(images/top.gif) no-repeat -88px -48px; color: #000; padding-top: 5px; height: 19px; }

#top .container ul li.templates a:link, #top .container ul li.templates a:visited { left: 176px; }
#top .container ul li.templates a:hover { background: url(images/top.gif) no-repeat -176px -24px; }
#top .container ul.current-templates li.templates a:link, #top .container ul.current-templates li.templates a:visited, #top .container ul.current-templates li.templates a:hover { background: url(images/top.gif) no-repeat -352px -48px; color: #000; padding-top: 5px; height: 19px; }

#top .container ul li.blog a:link, #top .container ul li.blog a:visited { left: 264px; }
#top .container ul li.blog a:hover { background: url(images/top.gif) no-repeat -264px -24px; }
#top .container ul.current-blog li.blog a:link, #top .container ul.current-blog li.blog a:visited, #top .container ul.current-blog li.blog a:hover { background: url(images/top.gif) no-repeat -264px -48px; color: #000; padding-top: 5px; height: 19px; }

#top .container ul li.testimonials a:link, #top .container ul li.testimonials a:visited { left: 352px; }
#top .container ul li.testimonials a:hover { background: url(images/top.gif) no-repeat -352px -24px; }
#top .container ul.current-testimonials li.testimonials a:link, #top .container ul.current-testimonials li.testimonials a:visited, #top .container ul.current-testimonials li.testimonials a:hover { background: url(images/top.gif) no-repeat -352px -48px; color: #000; padding-top: 5px; height: 19px; }

#top .container ul li.contact a:link, #top .container ul li.contact a:visited { left: 440px; }
#top .container ul li.contact a:hover { background: url(images/top.gif) no-repeat -440px -24px; }
#top .container ul.current-contact li.contact a:link, #top .container ul.current-contact li.contact a:visited, #top .container ul.current-contact li.contact a:hover { background: url(images/layout/top.gif) no-repeat -440px -48px; color: #000; padding-top: 5px; height: 19px; }
/* /top ************************************************************/

/* backgrounds *****************************************************/
#all { width: 100%; background: url('images/all-background.jpg') repeat; }
#light { width: 100%; height: 600px; background: url('images/base-background.jpg') repeat-x; }

#base { position: absolute; top: 50px; left: 0px; width: 100%; height: 501px; background: url('images/detail-background.jpg') 50% 0px no-repeat ; }
#base .container { width: 980px; height: 100%; margin: 0px auto; }
/* /backgrounds ****************************************************/

/* content *********************************************************/
#content { position: relative; top: 131px; width: 980px; background: url('images/content-background.jpg') no-repeat #fff; }

#header { height: 80px; }
#header #topright { text-align: right; float: right; width: 600px; margin: 5px 0 0 0; }

#header #topright ul { list-style: none; padding: 0; margin: 0; }
#header #topright li { display: inline; }
#header #topright li a { color: #000; font-size: 9pt; padding: 0 0 0 25px; text-transform: lowercase; }
#header #topright li a:hover { color: #000; text-decoration: none; }

#header #logo { float: left; width: 350px; margin: 25px 0 0 0; padding: 0; }
#header h1 { padding: 0; margin: 0; }
#header h1 a { color: #000; font-size: 17pt; text-decoration: none; }
#header h1 a:hover { color: #eee; text-decoration: none; }
#header span { padding: 0; color: #111; font-size: 11pt; }
/* /content ********************************************************/

/* Menu */

#catnav { /* div outside the categories */ position: relative; top: 131px; padding-left: 424px; }

ul#nav { position: relative; width: 528px; height: 36px; background: url('images/navigation-blog.gif') no-repeat; list-style: none;  }
ul#nav li { width: 123px; position: absolute; font-weight: bold; line-height: 40px; }
ul#nav li a:link, ul#nav li a:visited { position: absolute; top: 0; height: 36px; overflow: hidden; z-index: 70; text-align: center; width: 123px; outline: none; text-align: center; color: #fff; }
ul#nav li a:hover { background: url('images/navigation-blog.gif') 0px -36px no-repeat; }
ul#nav li a.current { color: #0f2997; background: url('images/navigation-blog.gif') 0px -72px no-repeat; }

ul#nav li.tab1 { left: 0px; }
ul#nav li.tab2 { left: 135px; }
.cat-item-3 { left: 135px; }
ul#nav li.tab3 { left: 270px; }
.cat-item-4 { left: 270px; }
ul#nav li.tab4 { left: 405px; }

ul#nav li.current-cat a, ul#nav li.current-cat a:hover { color: #0f2997; background: url('images/navigation-blog.gif') 0px -72px no-repeat; }
ul#nav li.current-cat a:link, ul#nav li.current-cat a:visited { color: #0f2997; }

ul#nav li a.current-cat { color: #0f2997; background: url('images/navigation-blog.gif') 0px -72px no-repeat; }

ul#nav li.tab1 { color: #0f2997; background: url('images/navigation-blog.gif') 0px -72px no-repeat; }

ul#nav li.tab4 a { color: #091722; }
ul#nav li.tab4 a:hover { background: url('images/navigation-blog.gif') -405px -36px no-repeat; }

/* Top Content */

#main { margin: 0px; clear: both; padding: 39px 39px 0px 39px; }
#contentwrapper { float:left; width: 560px; margin: 0 0 15px 0; padding: 0; }
#contentwrapper2 { float:left; width: 900px;  margin: 0 0 15px 0; padding: 0; }
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle { font-size: 14pt; color: #0B1723; margin-bottom: 15px; font-size: 24px; font-weight: bold; }
.topPost { font-size: 9pt; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 3px solid #B2DAFE; }
.topPost h2.topTitle a { margin-bottom: 10px; font-size: 24px; font-weight: bold; color: #2DA5FD; }
.topPost h2.topTitle a:hover { border-bottom: 2px solid #2DA5FD; }

.topPost p.topMeta { margin: 15px 0px 35px 0px; font-weight: bold; font-size: 12px; color: #014684;  }
.topPost p.topMeta a { border-bottom: 2px dotted #014684; color: #014684; }
.topPost p.topMeta a:hover { border-bottom: 2px dotted #000000; color: #000; }
.topPost div.topContent { font-size: 9pt; color: #014684; margin: 10px 0; }
.topPost div.topContent h3.terminology { font-size: 16px; margin: 0 0 5px 0; padding: 0px; }
.topPost div.topContent h4 { margin: 20px 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; }
.topPost div.topContent a { color: #ff9933; font-weight: bold; text-decoration: none; font-size: 14px; }
.topPost div.topContent a:hover {  }
.topPost div.topContent { line-height: 21px; }
.topPost div.topContent p { margin-top: 20px; }
.topPost div.topContent blockquote { margin-left: 10px; padding: 0px 10px 10px 10px; background: #fff; border: 1px dotted #99CCFF; }
.topPost div.topContent img.in-post { margin-bottom: 20px; }
.topPost div.topContent code { color: #000; font-weight: bold; }
.topPost div.topContent hr { color: #B2DAFE; background-color: #B2DAFE; height: 3px; border: none; margin: 12px 0 20px 0; }
.topPost div.topContent p.no-margin { margin: 0px; }

.topPost div.topContent ul, .topPost div.topContent ol { margin: 20px 0; }
.topPost div.topContent ul li, .topPost div.topContent ol li { margin-left: 10px; font-weight: bold; }
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags { width: 120px; height: 26px; }
.topPost span.linkpages { font-size: 9pt; font-style: italic; color: #000; margin-bottom: 10px; display:block; }
.topPost span.linkpages a:hover { color: #ddd; }
.topPost span.topComments:hover, .topPost span.topMore:hover, .topPost span.topTags:hover {  }
.topPost span.topComments a { color: #000; background: url('images/leave-a-comment.gif') no-repeat; vertical-align: middle; width: 120px; height: 26px; }
.topPost span.topMore a { color: #000; background: url(images/read.gif) left no-repeat; vertical-align: middle; width: 120px; height: 26px; }
.topPost span.topTags em { background: url(images/tags.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; color: #0a0a0a; }
.topPost span.topTags a { color: #000; line-height: 27pt; vertical-align: middle; }
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover { color: #000; text-decoration: underline; }

#nextprevious { margin: 10px 0 5px 0; display: none; }
#nextprevious a { color: #83adc8; text-transform: lowercase; text-decoration: underline; display: none; }
#nextprevious a:hover { color: #000; display: none; }

/* Comments */

#comment { margin-bottom: 10px; margin-top: 15px; background: #B2DAFE; width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */ border: 1px dotted #547D99; padding: 0px 15px 10px 15px; color: #000; }
#comment h3 { font-size: 10pt; font-weight: normal; color: #000; margin: 15px 0; }
#comment p a { color: #0A76B7; }
#comment p a:hover { color: #000; }
#comment p { padding:0; margin: 7px 0; }
ul.commentlist, ul.trackback  { list-style-type: none; margin: 10px 0; font-size: 9pt; }
.commentlist li, .trackback li { margin: 10px 0 15px 0; padding: 10px; background: #fff; border: 1px dotted #547D99; list-style-type: none; }
.commentlist li.cleared { background: transparent; border: none; }
.commentlist a:hover { color: #eee; }
.commentlist a.gravatar { float: left; margin: 0 15px 10px 0; width: 60px; }
.commentlist .commentbody p a { text-decoration: underline; }
.commentlist cite a { font-size: 17px; font-weight: bold; color: #0B1723; }
.commentlist cite a:hover { color: #000; border-bottom: 1px dotted #000; }
.commentlist small.commentmetadata a { color: #666; line-height: 26px; margin: 5px 0px; }
.commentlist p { color: #014684; line-height: 18px; }
#respond { clear: both; margin-top: 15px; }
textarea#comment { width: 450px; background: #fff; color: #111; padding: 10px; }

/* Welcome section */

#main #welcome { width: 252px; height: 200px; margin: 0 0 20px 0; padding: 65x 20px 0 20px; background: url(images/welcome.jpg) no-repeat; }
#main #welcome h2 { font-size: 14pt; font-weight: normal; color: #000; letter-spacing: -2px; margin: 0 10px; padding: 10px 0 3px 0; }
#main #welcome p { font-size: 14px; font-weight: normal; color: #fff; line-height: 24px; margin: 0px 15px; padding-top: 55px; width: 221px; }
#main #welcome a { border-bottom: 2px dotted #ff9933; color: #ff9933; }
#main #welcome a:hover { border-bottom: 2px dotted #fff; }
#main #welcome form { margin: -5px 0 0 0; background: transparent; /* required for IE */ }
#main #welcome #feedbox { border: 1px solid #ccc; padding: 2px 1px; width: 180px; }
.submitbutton { width: 66px; height: 26px; background: url('images/submit-button.jpg') no-repeat; color: #000; font-weight: bold; font-size: 12px; vertical-align: middle; border: none; }
.submitbutton:hover { cursor: pointer; }

.submitbuttonComment { width: 120px; height: 26px; background: url('images/submit-button2.gif') no-repeat; color: #000; font-weight: bold; font-size: 12px; vertical-align: middle; border: none; text-indent: -10000px; }


/* Sidebars */
#sidebars { float: right; width: 252px; color: #eee; }

#sidebar_left { width: 252px; height: 200px; margin: 0 0 20px 0; padding: 65x 20px 0 20px; background: url(images/categories.gif) no-repeat; }

#sidebar_right { width: 252px; height: 200px; margin: 0 0 20px 0; padding: 65x 20px 0 20px; background: url(images/user.gif) no-repeat; }

#sidebars h2 { margin: 0; padding: 0 0 8px 0; font-weight: normal; font-size: 11pt; color: #000; letter-spacing: -1px; }

#sidebars table { width: 130px; }

#sidebars ul { margin: 0; padding: 0 0 5px 0; }
#sidebars li { margin-bottom: 20px; list-style: none; font-size: 9pt; }
#sidebars li ul { padding: 52px 0px 0px 30px; }
#sidebars ul ul li { font-size: 14px; margin: 0; padding: 18px 2px 2px 16px; color: #eee; background: url(images/bullet.gif) left 24px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */  }

#sidebars a { display: inline; color: #eee; }
#sidebars a:hover { color: #6598b8; }

#sidebars p { padding: 2px 0; font-size: 9pt; color: #eee; }
#tag_cloud a { display: inline; }

#sidebars ul.children li { border-bottom: none; }
#sidebars ul.children { margin-bottom: 0; }

#polls { width: 252px; height: 314px; margin: 0 0 0px 0; padding: 55px 0 0 0; background: url(images/polls.gif) no-repeat #0A1723; }
#main #sidebars #polls ul, #main #sidebars #polls li, #main #sidebars #polls li ul, #main #sidebars #polls ul li, { margin: 0; padding: 0; list-style: none; }
#main #sidebars #polls li ul { margin: 0; padding: 0px; list-style: none; }

/* Before footer */

#morefoot { position: relative; top: 131px; background: #080D11 url(images/gradient.jpg) top left repeat-x; border: 1px solid #070707; padding: 15px; color: #dfdfdf; margin: 0 0 10px 0; }
#morefoot p { margin: 5px 0; padding: 5px 0; line-height: 17px; }
#morefoot ul { list-style-type: none; margin-top: 5px; }
#morefoot ul li, #morefoot p { font-size: 9pt; }
#morefoot a { color: #5197BB; }
#morefoot a:hover { color: #ffffff; }
#morefoot span.foot-head { font-size: 12pt; font-weight: normal; color: #dfdfdf; letter-spacing: -1px; border-bottom: 1px dotted #444; margin: 0 0 15px 0; padding: 0 0 2px 0; display: block; }
#morefoot #searchbox { width: 187px; height: 22px; background: url('images/input.jpg') no-repeat; padding: 4px 0 0 6px; border: none; color: #fff; font-weight :bold; }
#morefoot #searchbox .input, #morefoot #searchbox .text, { background: url('images/input.jpg') 0px -26px no-repeat; }
#morefoot .col1 { float: left; width: 340px; }
#morefoot .col2 { margin: 0 25px; }
#morefoot .col2, #morefoot .col3 { float: left; width: 260px; }
#morefoot li { padding-left: 20px; margin-bottom: 5px; background: url(images/more.gif) left 2px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ }

/* footer*/
#footer { position: relative; top: 121px; background: url('images/tab.jpg') no-repeat;  text-align: center; padding: 10px 0px 30px 0px; }
#footer p {  }
#footer a { font-size: 13px; color: #fff; }
#footer a:hover { color: #000; }

/* Misc */

.highlight { color: #222; font-weight: bold; }

.cleared { margin: 0; padding: 0; clear: both; }

.alignleft { float: left; margin: 5px 10px 5px 0; }
.alignright { float: right; margin: 5px 0 5px 10px; }
.aligncenter, div.aligncenter { margin: 10px auto; text-align: center; display: block; }

img.alignleft { float: left; margin: 5px 10px 5px 0; }
img.alignright { float: right; margin: 5px 0 5px 10px; }
img.aligncenter { margin: 10px auto; text-align: center; display: block; }

.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #111; }

div.catDescription { margin: 15px 0px 35px 0px; font-weight: bold; font-size: 12px; color: #014684; }
div.catDescription p { margin-bottom: 40px; padding-bottom: 25px; border-bottom: 3px dotted #68a4da; }

ul.extras { margin: 30px 0px 0px 0px; list-style: none; }
ul.extras li { width: 120px; height: 26px; display: inline; margin-right: 20px; text-align: -10000px; }
ul.extras li.comment a { width: 120px; height: 26px; }
ul.extras li.more a { width: 120px; height: 26px; }

.dropcontainer { width: 350px; padding-top: 15px; border-top: 3px solid #B2DAFE; }
.more { text-indent: -10000px; }

.sidebarbox ul li a.current-cat, .sidebarbox ul li.current-cat a.current-cat { color: #6598B8 !important; border-bottom: 2px solid #6598B8; }

div.social_bookmark { margin-top: 40px; }
a.social_img { margin: 0 3px; }