/* CSS Document 
Spike Multimedia Ltd
Author: Colin Murdoch
Version: 1.0
*/

body {
background: #f58400 url(images/page_bck.jpg) repeat-x;
color: #311503;
height:100%;
margin: 0;
padding: 0;
}


a:link {
color: #9F5600;
}

a:hover {
	color: #000000;
}

a:visited {
	color: #000000;
}



/* ------------------------------------------ */
/* PAGE STRUCTURE */
/* ------------------------------------------ */

#page-wrap {
    background:#f69421 url(images/page_wrap_bck.jpg) repeat-x;
	width: 960px;
	margin: 0 auto;
	/* padding-bottom: 20px;*/
	position: relative;
	height:100%;
	/* margin-bottom: -20px; */
}

#logo {
	float:left;
	width:178px;
	margin-top:20px;
	margin-left: 32px;
	}
	

#nav {
	height:30px;
	padding: 70px 20px 0 0 ;
	text-align: right;
	}
	
#flashHolder {
	height: 360px;
	width: 940px;
	margin-top: 20px;
	margin-left:20px;
	/*margin-right:20px;*/
	}
	
	
	
.left-content-outer {
	display: inline;
	float: left;
	margin-left: 20px;
	margin-right: 10px;
	}
	
.right-content-outer {
	display: inline;
	float: left;
	margin-left: 18px;
	margin-right: 20px;
	}
	


.right-content-outer {
	width: 280px;
}

.left-content-outer {
	width: 612px;
	
	}

.footer {
	background: url('images/div-top-grad-right-long.png') repeat-x; 
	clear: both;
	text-align: center;
	font-size: 80%;
	color: #9F5600;	
	}


.right-content-top {
	background: url('images/div-top-grad-right-long.png') repeat-x;
	padding: 22px 20px 0px 20px;
}

.right-content-inner {
	background: url('images/div_bck-right.png');
	padding-left: 20px;
	padding-right: 20px;
	height: 1%;
}

.right-content-inner-thumbs {
	background: url('images/div_bck-right.png');
	padding-left: 10px;
	padding-right: 10px;
	height: 1%;
}

.right-content-bot {
	background: url('images/div-bot-grad-right.png') repeat-x;
	height: 60px;
}

.left-content-top {
	padding: 21px 20px 0px 20px;
	background: url('images/div-top-grad-long.png') repeat-x;
}

.left-content-inner {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	background: url('images/div_bck.png');
	height: 1%;
	}

.left-content-bot {
	background: url('images/div-bot-grad.png') repeat-x;
	height: 60px;
}

.left-content-top h1 {
color: #f2a43f;
font-size: 120%;
}

.left-content-top h2 {
color: #7d531a;
font-size: 120%;
}

.left-content-inner h2 {
color: #d48f36;
font-size: 120%;
}

.left-content-inner h3 {
color: #a97127;
font-size: 120%;
}


.left-content-inner ul {
margin: 0;
padding: 10px 0 0 0;
font-size: 95%;
}

.left-content-inner ul li{
margin: 0;
padding: 10px 0 0 0;
}

.right-content-top h3 {
color: #cc832d;
font-size: 110%;
}

.h3nav {
padding-top: 15px;
padding-bottom: 8px;
color: #cc832d;
font-size: 110%;
}


.h3img {
padding-top: 15px;
padding-bottom: 8px;
}

/* ------------------------------------------ */
/* TOP NAVIGATION STYLES */
/* ------------------------------------------ */


.pipewrap {
   float: right;
   text-align: center;
   width: 320px; /* one link */
   /* width: 350px; -- normal size */
   /* background:#CCCCCC;  */
   }

.pipelist {
   margin: 0 auto ;
   overflow: hidden;
    width: 320px;
	/*  background:#666666; */
   }

.pipelist ul {
   list-style: none;
   margin: 0;
   /* padding: 0 0 0 30px; */
   }

.pipelist li {
   border-right: 1px solid #cdcdcd;
   float: right;
   line-height: 1.2em;
   margin: 0 .5em 0 -.5em;
   padding: 0 .5em 0 .5em;
   white-space: nowrap;
   } 


.pipelist li.last {
border-right: 1px solid #ffffff;
}

   
.pipelist li a:link {
color:#d4754b;
}

.pipelist li a:visited {
color:#999999;
}

.pipelist li a:hover {
color:#666666;
}




/* ------------------------------------------ */
/* RIGHT NAVIGATION STYLES */
/* ------------------------------------------ */
  
  #navcontainer {  margin: 0; padding:5px 0 15px 0;}

#navcontainer ul
{
margin-left: 2px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer li
{
text-indent: 30px;
}

#navcontainer a
{
display: block;
padding: 3px;
/* width: 80%;*/
/* border-bottom: 1px solid #eee; */
}

#navcontainer a:link, #navcontainer a:visited
{
color: #643f26;
text-decoration: none;
font-weight: normal;
}

#navcontainer a:hover
{
background-color: #efad5f;
color: #000000;
}

#navcontainer a:active
{
color: #643f26;
background-color: #f6b262;
}



/* ------------------------------------------ */
/* TEXT STYLES */
/* ------------------------------------------ */


.bold {
font-weight: bold;
}

.boldo {
font-weight: bold;
color: #7e5217;
}

.boldlo {
color: #cc832d;
font-weight: bold;
font-size: 120%;
}




/* ------------------------------------------ */
/* THUMBSTYLES */
/* ------------------------------------------ */

.thumbs {
padding-top: 7px;
}


.firstThumb{
float: left;
display:block;
width: 82px;
height: 84px;
margin: 0 0 7px 0;
clear: left;
}

.firstThumb a {
text-decoration: none;
color: #FF6600;
}

.firstThumb a:hover {
text-decoration: none;
color: #000000;
}

.firstThumb a:active {
text-decoration: none;
color: #000000;
}

.popupLink a {
text-decoration: none;
color: #FF6600;
}

.popupLink a:hover {
text-decoration: none;
color: #000000;
}

.popupLink a:active {
text-decoration: none;
color: #000000;
}

.hidden {
display: none;
}

.thumbFloat {
float: left;
display:block;
width: 82px;
height: 84px;
margin: 0 0 7px 7px;
}

.thumbFloat a {
text-decoration: none;
color: #FF6600;
}

.thumbFloat a:hover {
text-decoration: none;
color: #000000;
}

.thumbFloat a:active {
text-decoration: none;
color: #000000;
}

.thumbs span {
    padding: 84px 0 0 0;
    overflow: hidden;
    height: 0px !important; /* for most browsers */
    height /**/:84px; /* for IE5.5's bad box model */
	font-size: 0;
	text-indent: -9999px;
}

.thumbs a {
display:block;
width: 82px;
height: 84px;
background: url(images/thumb-overlay.png) 0 0 no-repeat;
}

.thumbs a:hover { 
background-position: 0 -84px;
}

.thumbs a:active {
background-position: 0 -168px;
}

/* ------------------- thumb buttons --------- */

/* fade buttons -------------------------------------------*/


.lcd {
background: url(images/websites/s-but-lcdtvparts2.jpg) no-repeat;
}

.selkie {
background: url(images/websites/s-but-selkie.jpg) no-repeat;
}

.sdf-train {
background: url(images/websites/s-but-sdft.jpg) 0 0 no-repeat;
}

.sdf{
background: url(images/websites/s-but-sdf.jpg) 0 0 no-repeat;
}

.rcoc{
background: url(images/websites/s-but-rcoc.jpg) 0 0 no-repeat;
}

.tcs{
background: url(images/websites/s-but-tcs.jpg) 0 0 no-repeat;
}

.supplies{
background: url(images/websites/s-but-supplies.jpg) 0 0 no-repeat;
}


.surface{
background: url(images/websites/s-but-surface.jpg) 0 0 no-repeat;
}

.abrown{
background: url(images/websites/s-but-brown.jpg) 0 0 no-repeat;
}

.jdlawson{
background: url(images/websites/s-but-lawson.jpg) 0 0 no-repeat;
}


/*
.selkie {
background: url(images/selkie-board-thumb.gif) no-repeat;
}

.sdf-train {
background: url(images/websites/s-but-sdft.gif) 0 0 no-repeat;
}

.sdf{
background: url(images/websites/s-but-sdf.gif) 0 0 no-repeat;
}

.rcoc{
background: url(images/websites/s-but-rcoc.gif) 0 0 no-repeat;
}

.tcs{
background: url(images/websites/s-but-tcs.gif) 0 0 no-repeat;
}

.supplies{
background: url(images/websites/s-but-supplies.gif) 0 0 no-repeat;
}


.surface{
background: url(images/websites/s-but-surface.gif) 0 0 no-repeat;
}

.abrown{
background: url(images/websites/s-but-brown.gif) 0 0 no-repeat;
}

.llegends{
background: url(images/websites/s-but-local.gif) 0 0 no-repeat;
}
*/

/* --------------------------------------------------------*/
/* -------------------- TESTIMONIALS PAGE ------------------*/
/* ---------------------------------------------------------*/

#test ul {
list-style-image:url(images/quote.gif); 
padding:0; 
margin:5px 30px 0px 30px; 
font-size:14px;
}

#test ul li {
padding:20px 0 1px 0px;
border-bottom: 1px solid #CC6600;
}

#test ul li.top {
border-top: 1px solid #CC6600;
}

.custName {
color: #964f22;
}

.liPad {
padding-left:5px;
}







/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

html body div.clear,
html body span.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}


.hidden{display:none;}