/*
+ DonB.co.uk
+ Global Styles
+ Author: Don Brown
*/

/* ########## Body ########## */
* {margin: 0;padding: 0;border: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

ol, ul {list-style: none;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* Mac Safari/Firefox Hack for text rendering */
/* You need to be careful with this fix, as it will break any Flash element that it touches in Firefox. 
.fix, .fix * {opacity: .999;-moz-opacity: 0.99;} */
/* Safari3 Hack for rendering light type on dark background - Change colour to background colour */
/* .type { text-shadow: #000 0 0 0; } */

/* Start of Specific Styles */

html {background:#323232 url(../images/bg_penguin.gif) no-repeat 850px 65px;}

body {
	margin:0 auto;
	line-height: 1.5em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666363;
}
/* ########## Containers ########## */
#wrapper {
	width:100%;
}
#main {
	margin:0 auto;
	position:relative;
	width:990px;
	color:#666363;
}

/* ########## General ########## */
img, input, select, option {vertical-align:middle;}

p {line-height:1.2em;padding-bottom:12px;line-height:14px;}

/* ########## Links ########## */
a {	
	color:#666363;
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
/* ########## Useful ########## */
.left {float:left;}
.right {float:right;}
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clear {display: inline-table; clear:both;}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

/* ########## Header ########## */

#main #logo {float:left; width:116px; margin-right:18px; display:inline;}
#main #body {float:left; width:794px;}

#header {}

#header h1 {margin-top:26px;}
#header h2 {position:relative; bottom:3px; right:2px;}

#header h1 a {font-family:Verdana, serif; font-size:23px; color:#8938a1; letter-spacing:-0.2px;}
#header h2 a {font-family:Verdana, serif; font-size:19px; color:#5b256b; letter-spacing:-0.2px;}

/* ########## Navigation ########## */

#nav {clear:both; margin-top:16px;}
#nav li {float:left; margin-right:12px;}
#nav li a {font-family:Verdana, serif; font-size:17px; color:#5b256b; text-decoration:none; letter-spacing:-0.2px;}
#nav li a:hover {color:#8938a1; text-decoration:none;}
#nav li a.selected {color:#8938a1;}

#content {clear:both; padding-top:25px;}

.intro {width:310px;}
.intro a {font-weight:bold; color:#777;}
.intro a:hover {text-decoration:none; color:#d4d4d4;}
.intro span {color:#d4d4d4; width:264px; font-family:serif;}

h3 {font-family:Verdana, serif; color:#8938a1; letter-spacing:-0.2px;}
h3.featWork {margin:15px 0 13px 0;}

/* ########## Footer ########## */

#footer {clear:both; color:#666; padding-top:15px; font-family:"Myriad Pro", Verdana; font-size:13px; letter-spacing:0.6px; width:702px;}
#footer ul {}
#footer li {float:left; margin-right:5px;}
#footer a {color:#666; text-decoration:none;}
#footer a:hover {color:#d4d4d4;}
#footer a.selected {color:#d4d4d4;}

#footer p {position:absolute; margin:5px 0 0 592px;}

/* ###### Page Specific Content ##### */

.work-home {width:231px; height:320px; margin-right:5px; float:left; position:relative; display:inline;}
.work-home img {position:absolute; z-index:2;}

.work-home .client, .work-home .project {font-family:"Myriad Pro", Verdana; color:#666; font-size:14px; background:#323232; padding:2px 15px 2px 2px; font-weight:normal;}
.work-home .client a:hover, .work-home .project a:hover {text-decoration:none; color:#d4d4d4;}


.work-home .client {position:absolute; z-index:3; top:259px;}
.work-home .project {position:absolute; z-index:3; top:277px;}

.work-home .white {display:block; background: #fff; width:231px; height:320px; position:absolute; z-index:1;}

h3.wd {font-size:14px; color:#666; font-weight:normal;}
h3.wd span {color:#808080;}

.work-shift {font-size:14px; color:#666; font-weight:bold;}
.work-shift:hover {color:#d4d4d4;}

p.wd {font-size:11px; color:#666; line-height:13px;}
p.wd a {text-decoration:none; font-weight:bold; color:#777;}
p.wd a:hover {color:#d4d4d4;}

#work-paginator {position:relative; height:25px;}
#work-paginator h3 {position:absolute; right: 93px;}
#work-paginator h3.title {left:0px;}
#work-paginator .work-shift {position:absolute; right: 93px;}

#work-title {position:relative; height:35px;}
#work-client {position:absolute;}
#work-project {position:absolute; left:260px;}
#work-url {position:absolute; left:518px;}

#work-url a {font-weight:bold;}
#work-url a:hover {color:#d4d4d4;}

#work-desc {margin:25px 10px 0 0; width:260px; float:left; display:inline;}
#work-tech {margin:25px 0 0 0; width:260px; float:left;}

#work-desc h3, #work-tech h3 {margin-bottom:10px;}

#work-nav {position:absolute; right:57px; margin-top:12px;}

#work-nav li {float: left;}
#work-nav li a {margin-right:5px; display:block; text-indent:5000px; overflow:hidden; height:18px;}
#work-nav li a.prev-image, #work-nav li a.next-image {width:18px;}
#work-nav li a.work-image {width:5px; background:url(/images/block.gif) no-repeat;}
#work-nav li a.work-image:hover {background-position:0 -18px;}
#work-nav li a.prev-image {background:url(/images/left-arrow.gif) no-repeat;}
#work-nav li a.prev-image:hover {background-position:0 -18px;}
#work-nav li a.next-image {background:url(/images/right-arrow.gif) no-repeat;}
#work-nav li a.next-image:hover {background-position:0 -18px;}

#work-nav li a.selected {background-position:0 -18px;}
#work-nav li a.disabled {background-position:0 -36px; cursor:default;}
#work-nav li a.disabled:hover {background-position:0 -36px;}

#images {width:794px; height:424px; overflow:hidden; position:relative;}
#images img {position:absolute;}
#images img.show {z-index:3;}
#images img.behind {z-index:2}
#images img.hide {z-index:1; display:none;}

.work {width:231px; height:181px; margin:0 5px 11px 0; float:left; position:relative; display:inline;}
.work img {position:absolute; z-index:2;}

.work .client, .work .project {font-family:"Myriad Pro", Verdana; color:#666; font-size:14px; background:#323232; padding:2px 15px 2px 2px; font-weight:normal;}
.work .client a, .work .project a {text-decoration:none;}
.work .client a:hover, .work .project a:hover {color:#d4d4d4;}
.work .client {position:absolute; z-index:3; top:117px;}
.work .project {position:absolute; z-index:3; top:135px;}

.work .white {display:block; background: #fff; width:231px; height:181px; position:absolute; z-index:1;}

.work-shift {text-decoration:none;}

.work-ajax {position:relative; width:708px; overflow:hidden; clear:both;}
#work-row1, #work-row2 {position:relative; height:192px; overflow:hidden;}

.loading {font-size:14px; color:#666; font-weight:normal; position:absolute; margin:-1px 0 0 626px; display:none;}