/*
Oyster
Services - Style Author : Rob W
------------------------------------------------*/

/*
 = Header
------------------------------------------------*/
#frame #header {
	width:805px;
	height:88px;
	z-index:9;
}

/*
 = Content margin-top:-149px;
------------------------------------------------*/
#frame #content {
	width:833px;
	margin:0px auto;
	padding-top:65px;
	background:#fff;
	margin-top:149px;
	padding-top:1px;
	position:relative;
	z-index:10;
}

/* Sub Nav */

#frame #content #sub_nav_services ul{
	margin:0px ;
	display:block;
	top:-149px;
	position:absolute;
	clear:right;
	left:0px;
	padding:1px 0px 0px 120px;
	list-style:none;
	width:713px;
	height:148px;
	background:url(../images/layout/services-content-background.png) no-repeat;
	z-index:100;
}


#frame #content #sub_nav_services li{
	float:left;
	margin:110px 0px 0px 0px;
	padding:0px;
}

#frame #content #sub_nav_services li:first-child{
	padding-left:2px;
	background:url(../images/layout/services_a_background.png) top left no-repeat;
}

#frame #content #sub_nav_services li a{
	display:block;
	overflow:hidden;
	font-size:12px;
	padding:0px 10px;
	color:#FFF;
	background:url(../images/layout/services_a_background.png) top right no-repeat;
	text-transform:lowercase;
	font-family:"Century Gothic", Arial, sans-serif;	
	text-shadow: 1px 1px 2px #485259 ;
}

#frame #content #sub_nav_services li#current a {	color:#C5D0DA;}
#frame #content #sub_nav_services li a:hover{	color:#ADBDCB; }


/*Project Scroller */

#frame #content #project_scroller {
	width:220px;
	position:relative;
	float:right;
	margin:45px 10px 20px 0px;
	height:496px;
	overflow:hidden;
	display:inline;
}

#frame #content #project_scroller .project{
	position:absolute;
	top:0px;
	left:0px;
	width:220px;	
	height:440px;
}

#frame #content #project_scroller img{
	margin:10px 0px 10px 23px;
	display:block;
	border:4px solid #F8F8F8;
	background: url(../images/layout/projectscroller_background.png) no-repeat;
}

#frame #content #project_scroller h2  {
	font-weight:normal;
	font-size:1.4em;
	color:#999999;
	margin:20px 30px 10px 30px;
	padding:0px;
	text-align:right;
}

#frame #content #project_scroller h2 strong { color:#8ca3b7; }

#frame #content #project_scroller p{
	text-align:right;
	font-size:0.9em;
	margin:10px 30px 10px 30px;
	padding:0px;
}

#frame #content #project_scroller a{
	text-align:right;
	margin:10px 30px 10px 30px;
	display:block;
	color:#8ca3b7;
	font-size:1.3em;	
}

#frame #content #project_scroller a:hover{	color:#999999; }

#frame #content #project_scroller_navigation {
	list-style:none;
	width:145px;
	float:right;
	margin:0px 10px 0px ;
	padding:15px 0px 0px 40px;
	border-top:2px solid #EEEEEE;
}

#frame #content #project_scroller_navigation li {
	float:left;
	margin:0px 8px 0px 0px;
}

#frame #content #project_scroller_navigation a{
	display:block;
	width:12px;
	font-size:0.9em;
	line-height:15px;
	padding:2px 0px 0px 6px;
	height:15px;
	color:#666666;
	border:1px solid #DBDCDE;
}

#frame #content #project_scroller_navigation a:hover, #frame #content #project_scroller_navigation a.current{
	color:#FFF;
	background:#222428;
}
#frame #content #project_scroller_navigation a:hover {
	background:#595F68;
}

#frame #content #project_scroller_navigation a span{
	display:block;
	text-indent:-9000px;
	display:none;
	width:18px;
	height:17px;
	top:0px;
	left:0px;
}

#service_image {
	display:inline-block;
	float:right;
	margin:55px 25px 40px 0px;
}

/*
 = Main Content
------------------------------------------------*/

#frame #content #main_content  {
	width:525px;
	margin:40px 0px 20px 40px;
	float:left;
	display:inline;
	padding:15px 30px 0px 0px;
	border-right:1px solid #c6c6c6;
}


#frame #content .design, #frame #content .marketing, #frame #content .multimedia, #frame #content .consultancy, #frame #content .promo{	height:480px;}

#frame #content #main_content  h1{
	margin:0px 0px -5px;
	padding:0px;
	font-size:1.4em;
	border:none;
}

#frame #content #main_content h2 {
	font-size:1.3em;
	font-weight:normal;
	color: #8ca3b7;
	font-family:"Century Gothic", Arial, sans-serif;
	margin:30px 0px 5px;
}

#frame #content #main_content .service_image { 	float:right; clear:right; margin:-10px 0px 0px 20px;}

#frame #content #main_content  p{	margin:15px 0px;}

#frame #content #main_content ul {
	font-size:1.1em;
	list-style:none;
	margin:25px 0px;
	padding:0px;
	color:#666666;
	font-family: "Century Gothic", Arial, sans-serif
}

#frame #content #main_content ul li{
	padding-left:0px;
	margin-bottom:5px;
}

#frame #content #main_content ul ul {
	font-size:0.75em;
	color: #8B8B8B;
	margin:10px 0px 20px;
	font-family:  Arial, sans-serif;
}

#frame #content #main_content ul  ul li{
	background:none;
	margin:0px 5px 5px 0px;
	line-height:18px;
	padding:0px;
}

#frame #content #main_content  .info_box {
	width:272px;
	float:left;
	margin:20px 0px;
}

#frame #content #main_content  .info_box h3 {
	font-size:1.2em;
	border-bottom:1px solid #c6c6c0;
	margin:20px 0px 15px;
	padding:0px 0px 3px;
}

#frame #content #main_content  .info_box p {
	width:213px;
	font-size:1.1em;
	margin:0px;
	padding:0px;
}


/*Examples Box*/

#frame #content #examples {
	background:#FFF;
	clear:both;
	border:5px solid #899FB4;
	margin:30px 0px 30px -10px;
	position:relative;
	width:840px;
	_width:800px;
	_margin-left:10px;
	
}

#frame #content #examples h3{
	right:60px;
	top:30%;
	position:absolute;
	font-size:1.4em;
}

#frame #content #examples h3 a {
	text-transform:lowercase;	
	color:#666666;
	font-family: "Century Gothic", Arial, sans-serif;  
	display:block;
	padding:5px 30px 6px 0px;
	background:url(../images/layout/arrow_right.jpg) no-repeat right  7px ;
}


#frame #content #examples ul {
	list-style:none;
	margin:0px 30px 0px;
	width:575px;
	padding:18px 0px 10px;
}

/*Clear Fix */
#frame #content #examples ul:after  {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html>body #frame #content #examples ul{
	display: inline-block; 
	width: 100%;
	}

* html #frame #content #examples ul{
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	

#frame #content #examples ul li{
	margin:0px 4px 5px 0px;
	float:left;
	display:inline;
}
#examples ul li a{
	width:185px;
	color:#333333;
	font-size:0.95em;
	display:block;
}
#examples #logos {	width:580px;}
#examples #logos li a{
	width:45px;
	height:40px;
	text-indent:-9000px;
	outline:none;
	overflow:hidden;
	background:url(../images/logos.png) no-repeat;
}
#examples #logos li{	margin:0px 5px 10px 0px;}
#logo_example {
	display:block;
	position:absolute;
	right:10px;
	top:18px;
}
#frame #content #examples h3 a:hover, #frame #content #examples ul li a:hover { 	color:#82a9cb; }

#examples #logos li #buggybits{ }
#examples #logos li #sportsdrive{ background-position: -52px 0px; }
#examples #logos li #pressurecheck{  background-position: -105px 0px; }
#examples #logos li #aws{  background-position: -157px 0px; }
#examples #logos li #clearview{ background-position: -210px 0px; }
#examples #logos li #flexigate{  background-position: -263px 0px; }
#examples #logos li #swan{ background-position: -315px 0px; }
#examples #logos li #digistore{  background-position: -368px 0px; }
#examples #logos li #moisturecheck{  background-position: -420px 0px; }
#examples #logos li #webspring{  background-position: -475px 0px; }
#examples #logos li #gs{  background-position: -527px 0px; }
#examples #logos li #poshfrocks{ background-position: 0px -50px; }
#examples #logos li #boweld{ background-position: -52px -50px; }
#examples #logos li #eaps{  background-position: -105px -50px; }
#examples #logos li #bls{  background-position: -157px -50px; }
#examples #logos li #ypayxtra{ background-position: -210px -50px; }
#examples #logos li #springfields{  background-position: -263px -50px; }
#examples #logos li #gbp{ background-position: -315px -50px; }
#examples #logos li #agp{  background-position: -368px -50px; }
#examples #logos li #howlett{  background-position: -420px -50px; }
#examples #logos li #woodstreet{  background-position: -475px -50px; }
#examples #logos li #bigfish{  background-position: -527px -50px; }
#examples #logos li #abc { background-position: 0px -100px; }
#examples #logos li #pamperedhandles{ background-position: -52px -100px; }
#examples #logos li #gough{  background-position: -105px -100px; }
#examples #logos li #historage{  background-position: -157px -100px; }
#examples #logos li #carleston{ background-position: -210px -100px; }
#examples #logos li #cartwright{  background-position: -263px -100px; }
#examples #logos li #ukbearings{ background-position: -315px -100px; }
#examples #logos li #genx{  background-position: -368px -100px; }
#examples #logos li #ecoba{  background-position: -420px -100px; }
#examples #logos li #sharkscuba{  background-position: -475px -100px; }
#examples #logos li #wrecknreef{  background-position: -527px -100px; }

/*
 = Footer
------------------------------------------------*/
#frame #footer {
	width:833px;
	margin:0px auto 20px;
	position:relative;
	padding:20px 0px;
}

#frame #footer a{
	position:absolute;
	padding:10px 20px 10px 0px;
	border-top:2px solid #dbdcdd;
	border-bottom:2px solid #dbdcdd;
	background:#414242;
	color:#FFF;
	font-size:1.3em;
	top:19px;
	right:10px;
	width:200px;
	text-align:right;
}#frame #footer a:hover{	color:#999999;}
#frame #footer p{
	width:570px;
	border-top:2px solid #dbdcdd;
	font-family: "Century Gothic", Arial, sans-serif;  
	padding:10px 10px 10px 0px;
	border-bottom:2px solid #dbdcdd;
	color:#999999;
	font-size:0.9em;
	text-align:right;
	margin:0px 0px 0px 10px;
}