/* Global */

* {
	margin:0;
	padding:0;
	border:0;
}



/* Lists */

ul.skillslist{
	float:left;
	width:48%;
	margin:5px 1% 20px 1%;
	border-bottom:#d4e4e9 3px solid;
}
ul.skillslist li{
	border-top:1px dotted;
	padding:5px 0 5px 6px;
	font-weight:bold;
}
ul.skillslist li img{
	display:inline;
	padding:1px;
	float:left;
	clear:both;
	margin:-2px 6px 0 0;
}
#sidebar ul{
	margin:0 0 20px 0;
}
#sidebar ul img{
	margin:1px 4px -1px 0;
}
#sidebar ul li a, #sidebar ul li a:visited{
	display:block;
	padding:8px 4px;
	font-size:14px;
	line-height:17px;
	font-weight:normal;
	text-decoration:	none;
	border-bottom:#21343c 1px dotted;
}
#sidebar ul li a:hover{
	background:#0c171f;
}
.entry ul.body-list{
	padding:22px 15px 8px 15px;
	margin:10px 0 10px 0;
	border:#bad6da 1px solid;
	background:#e9f5f7 url('images/b07V12_blockquote_bk.jpg') no-repeat top left;
	line-height:27px;
	letter-spacing:-.05em
}
.entry ul.body-list li h4{
	padding-top:8px;
}
.entry ul.body-list li ul li{
	display:block;
	padding:3px 0 4px 18px;
	background:url('images/b07V12_footer_link_bk.gif') no-repeat left 12px;
}
/* Lists eof */
	
	

/* Feature and Slider */
	
#feature_title{
	display:block;
	width:115px;
	height:115px;
	position:absolute;
	text-indent:-9999px;
	z-index:1000;
	top:0;
	left:36px;
	background-image: url(images/spotlight.png);
	background-repeat: no-repeat;
	background-position: left top;
}
* html #feature_title{
	background: url('images/b07V12_showcase_ttl.gif') no-repeat top left;
}
#feature_wrap{
	display:block;
	float:left;
	height:297px;
	width:616px;
	padding:26px 0 0 0;
	position:relative;
	background: url('images/b07V12_feature_bk.jpg') no-repeat 36px top;
}
ul#feature_buttons{
	margin:0 0 0 416px;
	padding:3px 0 0 0;
	width:150px;
	height:27px;
}
ul#feature_buttons li{
	display: block;
	float:left;
	text-align: center;
	color:#accfd6;
	padding:0 0 5px 0;
	font-size:15px;
	font-weight:bold;
	cursor: pointer;
	margin:0 4px 0 0;
	width:20px;
	height:17px;
	overflow:hidden;
	background:white url("images/b07V12_feature_butt.jpg") no-repeat left 0; 
}
ul#feature_buttons li:hover {
	background-position:left -22px; 
	color:#83b2ba;	
}
ul#feature_buttons li.active {
	background-position:left -44px;
	color:#fefefe;
}
a#previous, a#next { 
	cursor: pointer; 
	display:block;
	width:48px;
	height:48px;
	text-indent:-9999px;
	z-index:999;
	position:absolute;
	border:none;
	overflow:hidden;
}
a#previous, a#previous:visited{
	float: left; 
	margin:110px 0 0 45px;
	background:transparent url("images/b07V12_left_slide.png") no-repeat top left;
}
a#next, a#next:visited { 
	float: right; 
	margin:110px 0 0 558px;
	background:transparent url("images/b07V12_right_slide.png") no-repeat top left;
}
a#previous:hover, a#next:hover{
	background-position: top right;
	border:none;
}
#slider_wrap {
	border: #accfd6 1px solid;
	background:#0f1a21;
	width: 517px;
	margin: 0 0 0 66px;
	display:block;
	z-index:-1200;
	height:266px;
	max-height:266px;
	overflow:hidden; 
}
#slider_wrap div div { 
	overflow: hidden;
	height:266px;
	z-index:-1200; 
}
#slider_wrap div div a{
	border:none;
}
.tool-tip {
	color: #efefef;
	width: 180px;
	z-index: 13000;
	margin:-125px 0 0 -103px;
}
.tool-title {
	font-weight: bold;
	font-size: 10px;
	margin: 0;
	color: #1b4b53;
	padding: 12px 8px 2px 8px;
	text-align:left;
	line-height:11px;
	font-style:italic;
	background: url("images/b07V12-bubble-top.png") no-repeat top right;
}
.tool-text {
	color:#fefefe;
	font-size: 13px;
	padding: 6px 8px 30px 8px;
	line-height:14px;
	background: url("images/b07V12-bubble-bottom.png") bottom left;
}


body { background: #000; margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; }
p, ul { margin: 0 0 1.4em 0; }
p, ul li, ol li, table td, table th {
	line-height: 1.4em;
	color: #535759;
	font-size: 0.8em;
	text-align: left;
}
p a { color: #666; }
p a:hover { color: #000; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em 0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; }
h1 { color: #666; font-weight: normal; font-size: 1.05em; line-height: 1.35em; margin: 0 0 1.6em 0; }
h2, h3 { color: #000; font-size: 0.8em; margin: 0 0 0.2em 0; }
h2 a { text-decoration: none; }
h2 a:hover { text-decoration: underline; }
ul li p, ul li h2 { font-size: 1.0em; }
ul li a { color: #666; }
a img { border: none; }
hr { display: none; }

#wrap-outer { width: 100%; float: left; background: url(../images/wrap-outer-bg.png) repeat-y center 0 #EEF8FA; }
#wrap { width: 100%; float: left; background: url(../images/wrap-bg.png) repeat-x 0 bottom; }
#main-outer { width: 100%; float: left; background: url(../images/main-outer-bg.jpg) no-repeat center 0; }
#main, #subfooter, #footer {
	width: 960px;
	margin: 0 auto;
	padding: 0 15px;
	color: #000;
}
#header {
	width: 100%;
	float: left;
	height: 101px;
	
}
#content { width: 100%; float: left; padding: 30px 0; }
#plane-path { width: 100%; background: url(../images/path.gif) no-repeat center 0; float: left; }

#header #logo { float: left;  background: url(../images/logo2.png) no-repeat 0 0; margin: 5px 0 0 0; }
#header #logo a { width: 139px; height: 90px; float: left; }
#header #logo a span { display: none; }
#printlogo { display: none; }
#nav { margin: 57px 0 0 0; padding: 0; float: right; }
#nav li { float: left; list-style-type: none; padding: 0 0 0 15px; font-size: 0.7em; line-height: 1.0em; text-align: center; }
#nav li a { color: #9e9f98; text-decoration: none; padding: 2px 0; float: left; }
#nav li a:hover { border-bottom: solid 1px #bdbfb5; color: #666; }

#pHome #nav #n01 a,
#pAbout #nav #n02 a,
#pServices #nav #n03 a,
#pWork #nav #n04 a,
#pGraphic #nav #n05 a,
#pInteractive #nav #n06 a,
#pContact #nav #n07 a
{ font-weight: bold; color: #666; }

#home {
	width: 290px;
	float: left;
	padding: 123px 0 15px 0;
	background-image: url(../images/h1-hi.png);
	background-repeat: no-repeat;
	background-position: 1px 24px;
}
#home h1 { margin: 0; }
#home p {
	color: #FFF;
	font-weight: normal;
	font-size: 1.0em;
}
#home h1, #pStandards h1 {
	color: #535759;
	font-size: 0.9em;
}
#home h1 a, #home p a {
	color: #535759;
}
#home h1 a:hover, #home p a:hover {
	color: #535759;
}


/* ---------------------------------------------------------------------------------
   FOLIO
--------------------------------------------------------------------------------- */

#intro {
	float: right;
	width: 600px;
	padding: 34px 0 59px 0;
	margin: 0;
}
#content .imgReplace { float: left; height: 100px; }
#content .imgReplace span { display: none; }

#h1-web {
	width: 340px;
	background-image: url(../images/webdesign.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 22px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#h1-graphic {
	width: 340px;
	background-image: url(../images/graphicdesign.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 22px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#h1-animation {
	width: 340px;
	height: 100px;
	background-image: url(../images/animation.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 22px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#h1-services { width: 100%; background: url(../images/h1-services.gif) no-repeat 0 0; margin: 24px 0 23px 0; }
#h3-more {
	width: 250px;
	background-image: url(../images/olderprojects.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 24px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

#featured { float: left; width: 960px; background: url(../images/header-div.jpg) no-repeat 0 0; padding: 30px 0; margin: 0; }
#featured h2 a { color: #000; }
#featured li { list-style-type: none; float: left; width: 300px; padding: 0 30px 0 0; }
#featured li img { margin: 0 0 20px 0; }
#featured li p { width: 290px; }
#featured .noPadd { padding: 0; }

#more { float: left; width: 960px; background: url(../images/header-div.jpg) no-repeat 0 0; padding: 0; }
#more ul { float: right; width: 645px; padding: 20px 0 0 0; margin: 0 0 16px 0; }
#more ul li { float: left; width: 210px; list-style-type: none; padding: 0; }
#more ul li a { text-decoration: none; float: left; width: 180px; padding: 10px 15px; }
#more ul li a span { color: #000; width: 180px; float: left; }
#more ul li a:hover { background: #fff; }
#more ul li a:hover, #more ul li a:hover span { background: #fff; }

#details {
	width: 330px;
	float: left;
	padding: 96px 0 15px 0;
	background-image: url(../images/webdesign.png);
	background-repeat: no-repeat;
	background-position: 0 22px;
}
#details-print {
	width: 330px;
	float: left;
	padding: 96px 0 15px 0;
	background-image: url(../images/graphicdesign.png);
	background-repeat: no-repeat;
	background-position: 0 22px;
}
#details-animation {
	width: 330px;
	float: left;
	padding: 96px 0 95px 0;
	background-image: url(../images/animation.png);
	margin-bottom:15px;
	background-repeat: no-repeat;
	background-position: 0 22px;
}
#details h1 { margin: 0 0 0.3em 0; }
#details p { width: 290px; margin: 0 0 1.0em 0; }
#details p a { text-decoration: none; }
#details ul { padding: 0; margin: 0 0 30px 0; }
#details ul li, #details .sm { list-style-type: none; font-size: 0.7em; }
#details h2 { padding-top: 10px; }
#details .view { background: url(../images/details-view-bg.gif) repeat-y 0 0 #dadbcf; width: 290px; float: left; border-top: solid 1px #c7c9b9; border-bottom: solid 1px #c7c9b9; padding: 17px 20px 8px 20px; }
#details .view h3 { margin: 0; }
#details .view p a, #details .back a { text-decoration: underline; }
#gallery { width: 630px; float: right; margin: 0 0 30px 0; position: relative; background: url(../images/loading.gif) no-repeat center 133px; }
#gshadow { width: 630px; height: 271px; background: url(../images/gallery-shadow.png) no-repeat 0 -12px; position: absolute; top: 0; left: 0; z-index: 500; }


/* ---------------------------------------------------------------------------------
   CODA STYLES
--------------------------------------------------------------------------------- */

#screens, #screens2 {
	width: 630px;
	overflow: hidden;
	float: left;
}
#screens2 { height: 460px; }
.panel {
	float: left;
	width: 630px;
}

.stripViewer { /* This is the viewing window */
    position: relative;
    overflow: hidden;
    margin: auto;
    width: 630px; /* Also specified in  .stripViewer .panelContainer .panel  below */
    height: 542px;
    clear: both;
    z-index: 100;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;
    z-index: 100;
    /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
.stripNav { display: none; }

.stripNavL a, .stripNavR a { width: 41px; height: 47px; text-indent: -5000px; display: block; position: absolute; top: 135px; z-index: 600; outline: none; }
.stripNavL a { background: url(../images/gallery-arrow-left.png) no-repeat 0 0; float: left; left: -19px; }
.stripNavR a { background: url(../images/gallery-arrow-right.png) no-repeat 0 0; float: right; left: 608px; }
.stripNavL a:hover, .stripNavR a:hover { background-position: 0 -47px; cursor: pointer; outline: none; }

#pHome #screens { height: 318px; }
#pHome #screens .panel img { border-bottom: solid 5px #000; float: left; }
#pHome #screens .panel p { width: 630px; margin: 0; border-bottom: solid 5px #000; margin-top: 278px; font-size: 0.7em; float: left; }
#pHome #screens .panel p a { color: #545252; width: 300px; float: left; padding: 12px 15px 7px 15px; float: left; text-decoration: none; background: #000; }
#pHome #screens .panel p a span { font-weight: bold; color: #868686; }
#pHome #screens .panel p a:hover { background: url(../images/featured-arrow.gif) no-repeat 306px 15px #000; color: #ccc; }
#pHome #screens .panel p a:hover span { color: #fff; }
#pHome #gallery { margin: 0; }


#gallery blockquote { margin: 0; float: left; width: 510px; padding: 20px 60px 0 60px; font-size: 0.7em; text-align: center; color: #848484; line-height: 1.4em; background: url(../images/blockquote.gif) no-repeat 0 25px; }
#gallery blockquote span { color: #666; font-weight: bold; }


/* ---------------------------------------------------------------------------------
   SERVICES
--------------------------------------------------------------------------------- */

.sbox, .accounting { width: 300px; padding: 0 30px 15px 0; float: left; }
.nopadd { padding-right: 0; }
.accounting { width: 580px; background: url(../images/accounting-bg.gif) repeat-y 0 0; padding: 20px 25px 10px 25px; margin: 3px 30px 0 0; border-top: solid 1px #cdcec2; border-bottom: solid 1px #cdcec2; }
.accounting h2 { padding-top: 3px; }
.accounting img { float: right; margin: -2px 0 0 40px; }

/* ---------------------------------------------------------------------------------
   STANDARDS
--------------------------------------------------------------------------------- */

#pStandards #content { background: url(../images/h1-standards.gif) no-repeat 0 52px; padding-top: 126px; }
#pAbout #content { background: url(../images/h1-about.gif) no-repeat 0 52px; padding-top: 126px; padding-bottom: 20px; }
#pContact #content { background: url(../images/h1-getintouch.gif) no-repeat 0 53px; padding: 126px 0 0 0; height: 350px; }
#pContact.questionaire #content { height: auto; }
#pHosting #content { background: url(../images/h1-hosting.gif) no-repeat 0 53px; padding-top: 126px; }
#pAbout .logos { padding-top: 6px; }
#pAbout h1 { float: left; width: 100%; }
.wide { width: 600px; padding-right: 0; }

/* ---------------------------------------------------------------------------------
   HOSTING
--------------------------------------------------------------------------------- */

#hosting { width: 100%; margin: -20px 0 30px 0; border-collapse: collapse; }
#hosting th { background: url(../images/hosting-th.gif) repeat-x 0 0 #8bc401; padding: 12px 0; color: #fff; }
#hosting td { text-align: center; padding: 12px 0; border-bottom: solid 1px #c1c2b9; border-right: solid 1px #c1c2b9; background: #dee0c8; }
#hosting .noBG { background: none; }
#hosting .left { width: 285px; text-align: left; background: #fff; padding-left: 15px; border: solid 1px #c1c2b9; }
#hosting td.h2 { background: #c9cbb1; border-bottom: solid 1px #b0b298; }
#hosting th.h2 { background: url(../images/hosting-th-2.gif) repeat-x 0 0 #6fb100; }

/* ---------------------------------------------------------------------------------
   SUBFOOTER
--------------------------------------------------------------------------------- */

#subfooter-wrap {
	float: left;
	width: 100%;
	height: 15px;
	background-color: #1464F4;
	background-image: url(../images/subfooter-wrap-bg.jpg);
	background-repeat: repeat-y;
	background-position: center 0;
}
#subfooter { height: 15px; }

/* -- SubFooter - homepage styles -- */

#pHome #content {
	padding-bottom: 0px;
}
.homebox { float: left; padding: 41px 30px 20px 0; width: 300px; }
.homebox h2 { width: 100%; height: 29px; text-indent: -5000px; }

#homebox1 h2 {
	background: url(../images/richardkeene.png) no-repeat 0 0;
}
#homebox2 h2 {
	background: url(../images/designservices.png) no-repeat 0 0;
}
#homebox3 h2 {
	background: url(../images/hire.png) no-repeat 0 0;
}
#homebox1 { background: url(../images/header-div.jpg) no-repeat 0 0; }
#homebox3 { width: 240px; padding: 41px 30px 37px 30px; background: url(../images/homebox3-bg.jpg) no-repeat 0 0; }

#project { padding: 2px 0 15px 0; margin: 0; }
#project a { width: 240px; height: 18px; background: url(../images/project-q.gif) no-repeat 0 1px; display: block; }
#project a:hover { background-position: 0 bottom; }
#project a span { display: none; }

#subHome { float: left; width: 100%; margin-top: -1px; }

/* ---------------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------------- */

#footer-wrap { float: left; width: 100%; }
#ftop { float: left; width: 100%; border-bottom: solid 1px #121212; padding: 20px 0 22px 0; }
#fbot { float: left; width: 100%; padding: 21px 0 60px 0; }
#footer p { color: #333333; margin: 0; }
#footer p a { color: #333333; text-decoration: none; }
#footer p a:hover { color: #dee0c8; text-decoration: underline; }

#footer #twitter { float: right; margin: 17px 0 0 0; }
#twitter a { width: 77px; height: 15px; background: url(../images/twitter.gif) no-repeat 0 0; float: left; }
#twitter a span { display: none; }
#twitter a:hover { background-position: 0 bottom; }

#footer #phone, #footer #email {
	width: 150px;
	float: left;
	color: #1464F4;
}
#footer #copyright {
	width: 300px;
	float: left;
	padding-left: 30px;
	color: #FFF;
}
#footer #phone span, #footer #email span, #footer #copyright span {
	font-weight: bold;
	color: #FFF;
	width: 100%;
	float: left;
}
#footer #copyright span { width: 300px; }

#fbot ul {
	margin: 0;
	padding: 0;
	color: #FFF;
}
#fbot ul li {
	list-style-type: none;
	float: left;
	font-size: 0.7em;
	padding: 0 7px;
	border-left: solid 1px #121212;
	line-height: 1.0em;
	color: #FFF;
}
#fbot ul li a {
	color: #FFF;
	text-decoration: none;
}
#fbot #noDiv { padding-left: 0; border: none; }
#fbot ul li a:hover {
	text-decoration: underline;
	color: #FFF;
}

#fbot #fNav { float: left; }
#fbot #valid { float: right; }
#fbot #valid li { border: none; padding-right: 0; }
#fbot #valid li a { padding-left: 16px; background: url(../images/tick.gif) no-repeat 0 2px; }
#fbot #valid li a:hover { background: url(../images/tick.gif) no-repeat 0 -13px; }