body {
	background-image:url("../images/header_bg.gif");
	background-repeat:repeat-x;
	background:#4b4a4a;
	font: normal 80%/1.3em Helvetica, sans-serif;
	color:#dadada;
	margin: 0;
	padding: 0;
}

.container {
	background:url("../images/header_bg.gif");
	background-repeat:repeat-x;
}

.wrapper {
	margin:0 auto;
	width:940px;
	background:#303030;	
	padding: 0;
	overflow: hidden
}

.header {
	background:url("../images/header_bg.gif");
	height:100px;
}

.header img {
	border:none;
	
}
.header .logo {
	float:left;
	width:560px;
	padding:0;
	margin:0;
}
#navigation {
	width: 358px;
	background: url(../images/nav.gif) no-repeat left bottom;	
	float:left;
	height:100px;
	margin:0;
	padding:0;
}
#navigation .nav {
	list-style:none;
	width:100%;
	margin:0 auto;
}
#navigation .nav li a {
	display: none;
	text-indent: -99999px;  
}
#navigation .nav li, #navigation .nav li a {
	list-style:none;	
	float:left;
	display:block;
	/*width:106px;*/
	height:100px;	
	width:106px;
	margin:0px 20px 0 0;
}
#navigation .nav li.design {
	width:106px;
	margin-left:-40px;
	visibility:none;
}

#navigation .nav li.design:hover, #navigation .nav li.design:active, #navigation .nav li.design:focus, 
.current-design .design a:link, .current-design .design a:visited  {
	  height: 100px;
	  background: url(../images/nav.gif) no-repeat 0px top;
	  width: 106px;
}
	
#navigation .nav li.about:hover, #navigation .nav li.about:active,
#navigation .nav li.about:focus, .current-about .about a:link, .current-about .about a:visited  {
	  height: 100px;
	  background: url(../images/nav.gif) no-repeat -126px top;
	  width: 106px;
}
#navigation .nav li.contact:hover, #navigation .nav li.contact:active
#navigation .nav li.contact:focus, .current-contact .contact a:link, .current-contact .contact a:visited  {
	  height: 100px;
	  background: url(../images/nav.gif) no-repeat -252px top;
	  width: 106px;
}

.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0;
	height: 48px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 10;
}

#maincontentyellow {
	background:transparent url(../images/arrow_yellow.gif) no-repeat center top;
	width:inherit;
	padding:24px 0 0 0;
	margin:0;
}

#maincontentblue {
	background:transparent url(../images/arrow_blue.gif) no-repeat center top;
	width:inherit;
	padding:24px 0 0 0;
	margin:0;
}
#maincontentred {
	background:transparent url(../images/arrow_red.gif) no-repeat center top;
	width:inherit;
	padding:24px 0 0 0;
	margin:0;
}
#subnav {
	background: url(../images/design_heading.gif) no-repeat left top;
	width:390px;
	height:31px;
	margin:0 0 0 20px;
}
.sub-menu {
	float:right;
	margin:35px 0 0 17px;
	/*background: url(../images/subnav.gif) no-repeat 0 0;*/
	width:350px;
	height:42px;
}
.sub-nav {
	list-style:none;
	display:inline-block;
}

.sub-nav li, .sub-nav li a {
	list-style:none;	
	float:left;
	display:block;	
	width:100px;
	display:block;
	height:100px;	
	padding:0;
	margin:-2px 0px 0 0px;
        /*background: url(../images/subnav.gif) 0 0 no-repeat;	*/
}

.sub-nav a {
	text-indent: -99999px;
	position: relative;
        background: url(../images/subnav.gif) 0 0 no-repeat; 
	height:42px;	
}
.sub-nav li.branding, {
	width:102px;
	margin-left:-42px;
	visibility:none;

}
.sub-nav li.branding a {
	background-position: 0px 0px;
	height:42px;
	width:102px;
	margin-left:-42px;
}
.sub-nav li.branding a:hover {
	background-position: 0px -42px;
}
.sub-nav li.branding a:active {
	background-position: 0px -84px;
}
.sub-nav li.web, .sub-nav li.web a {
	height:42px;
	width:94px;
	margin-left:-21px;
	background-position: -100px 0;
	
}
.sub-nav li.web:hover, .sub-nav li.web a:hover {
	height:42px;
	width:94px;
	background-position: -100px -42px;
	
}
.sub-nav li.web:active, .sub-nav li.web a:active {
	height:42px;
	width:94px;
	background-position: -100px -84px;
}

.sub-nav li.games, .sub-nav li.games a {
	width:80px;
	height:42px;
	margin-left:-11px;
	background-position: -195px 0px;
}
.sub-nav li.games:hover, .sub-nav li.games a:hover {
	background-position: -195px -42px;
}
.sub-nav li.games:active, .sub-nav li.games a:active {
	background-position: -195px -84px;
}
.sub-nav li.media, .sub-nav li.media a {
	width:68px;
	height:42px;
	margin-left:-6px;
	background-position: -276px 0px;
}
.sub-nav li.media:hover, .sub-nav li.media a:hover {
	background-position: -276px -42px;
}
.sub-nav li.media:active, .sub-nav li.media a:active {	
	background-position: -276px -84px;
}

#bluetitle {
	background: url(../images/aboutme.gif) no-repeat left top;
	width:370px;
	height:31px;
	margin:0 0 20px 20px;
}
#redtitle {
	background: url(../images/contact.gif) no-repeat left top;
	width:370px;
	height:31px;
	margin:0 0 20px 20px;
}
#yellowtitle {
	background: url(../images/design_heading.gif) no-repeat left top;
	width:370px;
	height:31px;
	margin:0 0 20px 20px;
}
#megapodblue {
	background: url(../images/megapod_about.jpg) no-repeat left top;
	width:940px;
	height:300px;
	margin:0 0 0px 20px;
}
#megapodred {
	background: url(../images/megapod_contact.jpg) no-repeat left top;
	width:940px;
	height:300px;
	margin:0 0 0px 20px;
	
}
.details{
	margin-top:23px;
	width:200px;
	float:right;
}
.paragraph{
	margin-top:23px;
	width:600px;
	float:right;
}
#para{
	width:400px;
	margin-top:40px;
	margin-left:20px;
	width:600px;
}
.details_secondary{
	clear:left;
	margin:-10px 15px 0 0;
	width:200px;
	float:right;
}
.details_heart{
	clear:left;
	margin:-30px 15px 0 0;
	width:200px;
	float:right;
}
.details_blue{
	clear:left;
	margin:-10px 15px 0 0;
	width:260px;
	float:right;
}

.details_media{
	clear:left;
	margin:20px;
	width:200px;
}

h3{
	font: 180% Helvetica, sans-serif;
	color:#fdd706;
	margin-bottom:20px;
	margin-top:25px;
}

.about h3{
	color:#fdd706;
	border: none;
}
h4{
	margin-top:-20px;
	margin-bottom:20px;
	font: 130% Helvetica, sans-serif;
	color:#fdd706;
	margin-bottom:20px;
}
h5{
	margin-top:7px;
	margin-bottom:5px;
	font: 150% Helvetica, sans-serif;
	color:#0080ff;
}
h6{
	margin-top:7px;
	margin-bottom:5px;
	font: 150% Helvetica, sans-serif;
	color:#d10808;
}
 p{
	margin-top:-15px;
	margin-bottom:30px;
	font: 110% Helvetica, sans-serif;
	padding-right:20px;
}

h7{
	margin-top:-15px;
	font: 110% Helvetica, sans-serif;
	padding-right:20px;
}

h8{
	margin-top:50px;
	font: 70% Helvetica, sans-serif;
	margin-left:20px;
	margin-bottom:40px;
}

.substance{
	float:left;
	width:680px;
}
.brands{
	margin:20px;
	text-indent:-9000em;
	width:446px;
	height:193px;
	background: #fff url(../images/brands.gif) no-repeat;
}
a{
	color:#DADADA;
	text-decoration:none;
	font: 100% Helvetica, sans-serif;
	
}
a:hover { 
	color: #6e6e6e;
	text-decoration: none;
	}

.fix{
	clear: both;
	height: 1px;
	margin: 0 0 -1px;
	overflow: hidden;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
h1 a{
	background:url(../images/colin_lee.gif);
	display:block;
	float:left;
	width: 137px;
	height: 58px;
	text-indent:-9000em;
	margin-top:25px;
}

.right_coloum{
	margin-top:0px;
	width:200px;
	float:right;
}

.media{
	margin:20px 20px 20px 20px;
	}

.right_coloum ul{
	padding-bottom:20px;
	border-bottom: 1px solid #999;
}
#selector {

}
#footeryellow{
	background: url('../images/footer_yellow.gif') no-repeat scroll top left;
	width: 940px;
	height: 4px;
	Clear:both;
	margin:0 auto;
	padding:40px 0 0;
}

#footerblue{
	background: url('../images/footer_blue.gif') no-repeat scroll top left;
	width: 940px;
	height: 4px;
	Clear:both;
	margin:0 auto;
	padding:40px 0 0;
}

#footerred{
	background: url('../images/footer_red.gif') no-repeat scroll top left;
	width: 940px;
	height: 4px;
	Clear:both;
	margin:0 auto;
	padding:40px 0 0;
}


/* slideViewer 1.0 default styles 
.svw {width: 50px; height: 20px; background: #fff;}
.svw ul{position: relative; left: -999em;}*/

.stripViewer { /* this is the DIV container for your UL of images */
	position: relative;
	overflow: hidden; 
	/*border: 5px solid #ff0000;  this is the border. should have the same value for the links */
	margin: 20px 0 1px 20px;
}
.stripViewer ul { /* this is your UL of images */
	position: relative;
	left: 0;
	top: 0;
	width: 1%;
	list-style-type: none;
}
.stripViewer ul li { /* each image is arranged horizontally */
	float:left;
	margin-left:-20px;
}
.stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
	overflow: auto;
	width: 1%;
	margin-left:-100px;
}
.stripTransmitter ul { /* the auto-generated set of links */
	position: relative;
	list-style-type: none;
}
.stripTransmitter ul li{ /* in this list too, each LI is arranged horizontally */
	width: 20px;
	float:left;
	margin: 0 1px 1px 0;
}
.stripTransmitter a{ /* the links. */
	font: normal 120% helvetica; 
	text-align: center; 
	line-height: 22px; 
	 
	color: #dadada; 
	text-decoration: none; 
	display: block;	

}
.stripTransmitter a:hover { /* hover */
	background: #fdd706; 
	color: #000; 
}
.stripTransmitter a:hover, a.current{ 
	background: #fdd706; 
	color: #000; 
} 
/*tooltips formatting*/ 
#tooltip { 
	background: #fff; 
	color: #000; 
	opacity: 0.85; 
	border: 5px solid #dedede; 
} 
#tooltip h3 {  
	font: normal 10px Verdana;  
	margin: 0;  
	padding: 6px 2px;
}
/* end slideViewer default styles */

.svw {
	width:680px;
	height:300px;
	margin:20px 0 0 0;
	overflow:hidden;
	position:relative;
	clear:left;
}
.svw ul {
	left:0;
	position:relative;
}