@charset "utf-8";
/* CSS Document */

body 
{
font-family: Tahoma, Verdana, Arial, "sans serif";
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
background-image: url(../images/body-bg-x.png);
background-repeat: repeat-x;
font-size: small;
}

#sw
{
font-family: Tahoma, Geneva, sans-serif;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
background-image: url(../images/body-bg-x-sw.png);
background-repeat: repeat-x;
font-size: small;
}

a {color: #660000; outline: none;}
a img {border: none;}
.clear {clear: both;}
.clear-bt {border-top: 1px dotted #ccc; padding: 10px 0px 0px 0px;}
.bright {background-image:url(../images/seperator-vert.png); background-position: right; background-repeat: repeat-y;}
#ie6 {color: #ccc; background-color:#000; height: 60px; line-height: 60px; text-align: center; font-size: 30px; font-family: Georgia, "Times New Roman", Times, serif;}
	#ie6 h4 {padding: 0px; margin: 0px; font-size: 30px;}
	#ie6 p {padding: 0px; margin: 15px 0px 0px 0px;}
	#ie6 a {color: #fff;}

.container
{
width: 990px;
padding: 0px;
margin: auto;
position: relative;
}

/* TOP BAR */

#topbar {height: 45px; width: 950px; text-align: right; margin: 0px auto 0px auto; background-image: url(../images/topbar-bg.png); background-position: center; padding: 0px 20px 0px 20px; font-size: 17px;font-family:"Lucida Sans" Arial, Helvetica, sans-serif; z-index: 500;}
#topbar-nav { float: right; margin: 0px; padding: 0px; list-style: none; z-index: 500;}
#topbar-nav li {float: left; display: block; padding-right: 2px; text-align: center; position: relative; text-shadow: 1px 1px #333; z-index: 500;}
#topbar-nav li:hover {background-color: #fbe0e0; text-shadow: none; color: #000000; z-index: 500;}
	#topbar-nav li:hover a{color: #000000; z-index: 500;}
	#topbar-nav li:hover li a{color: #990000; z-index: 500;}
#topbar-nav li a {display: block; padding: 0px 10px 0px 10px; color: #eee; text-decoration: none; line-height: 45px;  outline: none; z-index: 500;}
#topbar-nav li a:hover {background-color: #fbe0e0; color: #000000; z-index: 500;}

	#topbar-nav li ul {position: absolute; z-index: 500; width: 250px; list-style: none; padding: 10px 0px 5px 0px; margin: 0px; background-image: url(../images/nav-drop-bg.png); border-bottom: 5px solid #fbe0e0; display: none;}
	#topbar-nav li ul li {display: block; clear: both; width: 240px; padding: 0px; margin: 0px 5px 0px 5px; text-shadow: none; font-size: 11px; z-index: 500;}
	#topbar-nav li ul li a{text-align: left; line-height: 35px; color: #990000; padding: 0px 5px 0px 5px; z-index: 500;}
	#topbar-nav li ul li a:hover{color: #000; background-color: #fff; z-index: 500;}
	
	

/* HEADER */
	
	#header
	{
	width: 100%;
	height: 265px;
	padding-bottom: 35px;
	background-image: url(../images/home-header-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	color: #FFFFFF;
	position: relative;
	}
	
	#sw #header
	{
	width: 100%;
	height: 176px;
	padding-bottom: 35px;
	background-image: url(../images/home-header-bg-sw.png);
	background-repeat: no-repeat;
	background-position: center top;
	color: #FFFFFF;
	position: relative;
	}
	
		#header h1, #header-sw h1 {margin: -35px 0px 0px 25px; padding: 0px; float: left; display: block;}
			
		/* SUB NAV */
		
		#subnav {padding: 0px; margin: 0px; position: absolute; top: -30px; left: 25px; font-weight: bold;}
		#subnav li {display: block; float: left; margin-right: 14px;} 
		#subnav li a {display: block; text-decoration: none; color: #fff; padding: 0px 3px 0px 15px; line-height: 26px; outline: none; text-shadow: 1px 1px #000; background-image: url(../images/subnav-arrow.png); background-position: 0px 0px; background-repeat: no-repeat;}
		#subnav li a:hover {color: #e3ab25; text-shadow: 1px 1px #000; background-position: 0px -26px;}
			#subnav a.current, #subnav a.current:hover, #subnav li.current a {
			color: #e3ab25; text-shadow: 1px 1px #000; background-position: 0px -26px;
			}
		
		/* TAB NAV */
		
		.left-arrow {position: absolute; left: 0px; top: 149px; z-index: 250;}
		.right-arrow {position: absolute; right: 0px; top: 149px; z-index: 250;}
		#tab-nav {position: absolute; left: 25px; top: -85px; padding: 0px; margin: 0px; list-style: none; z-index: 500;}
		#tab-nav li {display: block; float: left; margin-right: 10px;}
		#tab-nav li a {display: block; color: #E5D0D0; text-decoration: none; padding: 0px 6px 0px 30px; line-height: 35px; background-repeat: no-repeat; background-position: left; outline: none;}
		#tab-nav li a:hover {color: #fff;}
			.e-commerce {background-image: url(../images/nav-padlock.png);}
			.web-development {background-image: url(../images/nav-pointer.png);}
			.web-design {background-image: url(../images/nav-brush.png);}
			.seo {background-image: url(../images/nav-mag.png);}
		
		/* SlIDING BANNER */
		
		#banner-slide { width: 100%; height: 235px; clear: both; margin: 0px; position: absolute; top: 30px;}
		#banner-slide .slider { width: 100%; height: 195px; margin: 0px; overflow: hidden; padding: 40px 0px 0px 0px; z-index: 150;}
		#banner-slide .slider div { width: 950px; height: 195px; margin: auto; display: block; position: relative;}
		.show {display: block;}	
		.hide {display: none;}		
			.slide-image {position: absolute; bottom: 0px; right: 0px; z-index: 200;}
			#banner-slide .slider div h2 {margin: 0px 0px 0px -2px; padding: 0px;}
			#banner-slide .slider div p {margin: 0px 0px 15px 5px; padding: 0px;font-size:13px;}
			.buttons {}
			.buttons a {background-image: url(../images/header-button-bg.png); background-repeat: no-repeat; width: 162px; height: 32px; line-height: 32px; padding-bottom: 2px; text-align: center; color: #FFFFFF; text-decoration: none; display: block; float: left; margin-right: 10px; text-shadow: 1px 1px #6e3c3d; font-size: 14px; font-weight: normal;font-family: Georgia, "Times New Roman", Times, serif;}
			.buttons a:hover {background-image: url(../images/header-button-bg.png); background-position: -172px 0;}
			
		/* BANNER */
		#banner {width: 950px; clear: both; margin: 0px auto 0px auto; position: relative; z-index: 200;}
			#banner div {height: 136px; width: 950px; z-index: 200;}
		#banner div h2 {margin: 0px 0px 0px -2px; padding: 25px 0px 0px 0px; float: left; z-index: 200;}
		#banner div p {margin: 0px 0px 15px 5px; padding: 0px;font-size:12px; z-index: 200;}
			
/* DROP FORM */

	#content h2 a, #content p a, #content ul a {border-bottom: 1px dotted #666; text-decoration: none;}
	#content h2 a:hover, #content p a:hover, #content ul a:hover {color: #000; border-bottom: 1px dotted #666; text-decoration: none;}

/*#get-a-quote {position: absolute; top: 1px; right: 25px; color: #fff; display: block; text-decoration: none; font-weight: bold; padding: 0px; height: 43px; width: 173px; font-size: 18px; font-family: Georgia, "Times New Roman", Times, serif; text-align: center; outline: none; border: 0px; cursor: pointer;}*/

#get-a-quote {position: absolute; top: 20px; right: 27px; color: #fff; display: block; text-decoration: none; background-image: url(../images/header-button-bg.png); background-repeat: no-repeat; width: 162px; height: 32px; line-height: 32px; padding-bottom: 2px; text-align: center; color: #FFFFFF; text-decoration: none; display: block; float: left; margin-right: 10px; font-size: 16px; text-shadow: 1px 1px #6e3c3d; font-size: 14px; font-weight: normal;font-family: Georgia, "Times New Roman", Times, serif; z-index: 500;}
#get-a-quote:hover {background-image: url(../images/header-button-bg.png); background-position: -172px 0;}
			
#drop-form {width: 100%; position: relative; background-image: url(../images/drop-form-bg-x.png); display: none; top: 1px; color: #FFFFFF; border-bottom: 1px solid #fff;}
	#drop-form .container {width: 950px; height: 200px; padding: 10px 0px 10px 0px; overflow: hidden; background-image: url(../images/drop-form-bg.png);}
	#drop-form .container div {float: left; width: 295px; height: 200px; padding: 0px 10px 0px 10px;}
	#drop-form .container div h2 {margin: 0px; padding: 0px 0px 10px 0px; font-size: 15px; font-weight:normal; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; color: #FFFFFF;}
	#drop-form .container div p {margin: 3px 0px 3px 0px; padding: 0px; font-size: 13px; line-height: 150%;}
	#drop-form .container form div p label {float: left; width: 120px; text-align: left;}
	#drop-form .container form div p {clear: both; text-align: right; line-height: 35px;}
	#drop-form .container form div p .input {width: 150px; font-size: 12px; border: 1px solid #000; height: 2em; padding: 0px; margin: 0px;}
	#drop-form .container form div p .select {width: 150px; font-size: 12px; border: 1px solid #000; height: 2em; padding: 0px; margin: 0px;}
	#drop-form .container form div p textarea {width: 290px; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; margin-top: 10px;}
	#drop-form .container form div p a {border: none;}
	
	
	.form-button {background-image: url(../images/form-button.gif); background-position: 0 0; width: 115px; height: 24px; line-height: 24px; color: #fff; font-weight: bold; text-transform: uppercase; border: 0px; font-size: 11px; text-align: left; display: block; padding: 0px 0px 0px 5px; text-decoration: none; float: left; margin-top: 10px;}
	.form-button-close {border: 0px; font-size: 11px; text-align: left; display: block; float: left; position: absolute; right: 0px; bottom: 5px;}
			
/* CONTENT */

#content {width: 940px; padding: 25px; color: #333333; position: relative; margin: auto; background-color: #FFFFFF;}

#contact-tab {margin: 0px; padding: 10px 0px 0px 0px; text-align: center; position: absolute; top: -53px; right: 18px; font-weight: normal; font-size: 12px; width: 182px; height: 43px; background-image: url(../images/contact-tab-bg.png); z-index: 300; color: #FFFFFF; text-shadow: 1px 1px #333;}
#contact-tab strong {font-size: 16px;font-family:"Lucida Sans" Arial, Helvetica, sans-serif;}

#content h1 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight:normal; padding: 0px;  margin-top: 0px; clear: both; color:#660000;}
#content h2 {font-weight: normal; line-height: 150%; font-style: normal; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;font-size: 16px; color:#660000;}
#content h2.rightcolumn {clear: both; font-weight: normal; line-height: 150%; font-style: normal; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;font-size: 16px; color:#999999;}
#content h2.rightcolumn a {clear: both; font-weight: normal; line-height: 150%; font-style: normal; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;font-size: 16px; color:#999999;}
#content h3 {clear: both; font-size: 18px; font-family: Georgia, "Times New Roman", Times, serif;  padding: 0px 0px 0px 0px; color: #7D1214; font-weight: normal; line-height: 30px; margin-top:10px; margin-bottom:10px;}
#content h3 a {font-size: 12px; text-decoration:none; color:#6e3c3d;}
#content h5 {clear: both; padding: 0px; margin: 0px 0px 20px 0px; height: 32px; font-size: 11px;}
#content p {line-height: 160%;}
#content p.intro {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px;line-height: 150%;color:#333333;}
#content ul {line-height: 160%; list-style-image: url(../images/bullet.gif); margin-left: 0px; padding-left: 20px;}
	
		.port-page-image {float: left; margin: 0px 10px 10px 0px; border: 1px solid #efefef;}
		
		/* quote form -maincontent */
		
		#quoteform input,#quoteform select,#quoteform textarea,.select
{
border-color: #999999;
border-style: solid;
border-width: 1px;
color: #333333;
padding: 2px;
font-size: 12px;
float: right;
}

#quoteform input:focus,#quoteform select:focus,#quoteform textarea:focus,.select:focus
{
border-color: #990000;
color: #333333;
}

#leftform .select, #leftform input {width: 160px; float: right;}
#rightform .select, #rightform input {width: 180px;}

	#quoteform h2
	{
	background-color: #333333;
	color: #FFFFFF;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 30px;
	font-size: 13px;
	}
	
	#quoteform label
	{
	float: left;
	display: block;
	}
	
	#quoteform p
	{
	clear: both;
	margin: 0px 0px 15px 0px;
	padding: 0px 10px 15px 10px;
	}
	
		#quoteform #how_heard
		{
		position: absolute;
		bottom: 10px;
		left: 10px;
		height: 30px;
		width: 210px;
		font-size: 14px;
		}
	
		#quoteform #submit
		{
		color: #FFFFFF;
		background-color: #990000;
		border-color: #FFFFFF;
		border-style: solid;
		border-width: 2px;
		position: absolute;
		bottom: 10px;
		right: 10px;
		height: 30px;
		width: 210px;
		font-size: 14px;
		}
		
		#quoteform textarea {font-family: Arial, Helvetica, sans-serif; padding: 4px; width: 470px; height: 55px; font-size: 12px;}

		#leftform
		{
		position: relative;
		width: 420px;
		float: left;
		font-size: 12px;
		background-color: #DCDCDC;
		padding-bottom: 5px;
		height: 330px;
		}
		
			#leftform label
			{
			width: 160px;
			}
			
			#rightform label
			{
			width: 260px;
			}
		
		#rightform
		{
		position: relative;
		width: 500px;
		float: left;
		margin-left: 10px;
		font-size: 12px;
		background-color: #DCDCDC;
		padding-bottom: 5px;
		height: 330px;
		}
		
		/* end of quote form maincontent */
		
		#blocks div
		{
		float: left;
		display: block;
		width: 215px; 
		height: 180px;
		padding: 5px 5px 5px 10px;
		margin-right: 5px;
		margin-top:10px;
		background-color: #FFFFFF;
		background-image:url(../images/home-box.jpg);
		position: relative;
		}
		
			#blocks div h3
			{
			padding: 0px 6px 0px 30px; line-height: 35px; background-repeat: no-repeat; background-position: left;
			margin-top: 0px;
			}
			
			#blocks h3 a
			{
			font-size: 18px;
			color: #7D1214;
			}
			
				#blocks h3 a:hover {text-decoration: underline;}
			
			#blocks div p
			{
			margin: 0px 0px 10px 5px;
			font-size: 13px;
			line-height: 20px;
			
			}
			
			#blocks div p a {background-image: url(../images/header-button-bg.png); background-repeat: no-repeat; width: 162px; height: 32px; line-height: 32px; padding-bottom: 2px; text-align: center; color: #FFFFFF; text-decoration: none; display: block; position: absolute; bottom: 10px; right: 0px; text-shadow: 1px 1px #6e3c3d; font-size: 14px; font-weight: normal;font-family: Georgia, "Times New Roman", Times, serif; border: 0px;}
			#blocks div p a:hover {background-image: url(../images/header-button-bg.png); background-position: -172px 0; border: 0px; color: #FFFFFF;}
			.block-button {width: 85px; height: 20px; line-height: 20px; color: #7D1214; background-color:none;  display: block; text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif;font-size: 13px; padding: 5px 5px 5px 5px; position: absolute; bottom: 20px;right:125px; text-shadow: 1px 1px #ccc;}
			.block-button:hover {background-color:#7D1214; color: #FFFFFF; text-shadow: 1px 1px #666;}
			
			#blocks div ul {}
			
			#recentwork
			{
			background-color: #FFFFFF;
			background-image: url(../images/port-home-bg.jpg);
			background-repeat: no-repeat;
			width: 915px;
			height: 390px;
			color: #666666;
			float: left;
			clear: both;
			margin: 15px auto 15px auto;
			position: relative;
			padding-left: 5px;
			}
			
				#recentwork a
				{
				float: left;
				width: 150px;
				height: 150px;
				padding: 5px;
				display: block;
				margin: 10px 10px 0px 10px;
				background-image: url(../images/port-bg2.gif);
				background-repeat: no-repeat;
				text-decoration: none;
				color: #666666;
				position: relative;
				font-size: 11px;
				line-height:150%;
				border:1px solid #CCCCCC;
				overflow: hidden;
				}
				
				
				
				#recentwork h2 
				{
				font-family: Georgia, "Times New Roman", Times, serif;
				font-weight: bold;
				font-size: 12px;
				margin-top: 0px;
				padding-top: 0px;
				}
				
				#recentwork a img
				{
				position: absolute;
				z-index: 20;
				left: 1px; top: 1px;
				}
				
					#recentwork a span {z-index: 200; position: absolute; bottom: 0px; left: 1px; background-color: #efefef; width: 150px; padding: 5px 5px 5px 5px; line-height: 150%; color: #660000; opacity: 0.8;}
					
					#recentwork a ul {margin: 0px; padding: 0px; list-style: none;}
				
					#recentwork .next {position: absolute; right: 0px; bottom: 0px; line-height: 30px; background-color: #333333; color: #fff;}

		#news-block
		{
		font-size: 11px;
		width: 210px;
		height: 140px;
		padding: 10px; 
		margin-left: 2px;
		margin-top:15px;
		float: right;
		background-image: url(../images/newsbg.gif);
		border:solid 1px #CCCCCC;
		position: relative;
		}
		
		#news-block strong
		{
		font-size: 12px;
		}
		
			#news-block h2
			{
			margin-top: 0px;font-size: 18px; font-family: Georgia, "Times New Roman", Times, serif; float: left;  padding: 0px 0px 0px 0px; color: #7D1214; font-weight: normal; line-height: 30px; height: 30px; margin-bottom:10px;
			}
			
			#news-block p {clear: both; margin: 0px 0px 5px 0px; padding: 0px;}
			
			#news-block .bottom {position: absolute; bottom: 5px; right: 5px; color: #999; font-size: 11px; font-weight: bold; text-decoration: none;}
			#news-block .bottom:hover {color: #990000;}
			
		#testimonials {clear: both;}
		
		#testimonials div
		{ 
		padding-left: 40px;
		background-image: url(../images/quote-open.gif);
		background-repeat: no-repeat;
		background-position: left top;
		float: left; 
		display: block;
		width: 260px;
		margin-right: 13px;
		margin-top:15px;
		margin-bottom:15px;
		line-height: 150%;
		color: #666;
		}
		
			#testimonials div img
			{
			vertical-align: top;
			float: right;
			}
			
				#testimonials div a {border-bottom: 1px dotted #666; text-decoration: none;}
				#testimonials div a:hover {color: #000; border-bottom: 1px dotted #666; text-decoration: none;}
		
		#recruiting
		{position:absolute;left:30px; top:-23px;z-index:350;}
		
		
		/* Sitewide CONTENT */

		#main-column
		{
		float: left; 
		width: 740px;
		padding-right: 10px;
		}
		
			#main-column-contact
			{
			float: left; 
			width: 580px;
			padding-right: 10px;
			}
			
			#main-column-about
			{
			float: left; 
			width: 650px;
			padding-right: 10px;
			}
		
		#right-column
		{
		float: right;
		width: 160px;
		padding: 10px;
		background-color: #eeeeee;
		border-bottom: 2px solid #ccc;
		border-right: 2px solid #ccc;
		border-top: 1px solid #ddd;
		border-left: 1px solid #ddd;
		margin-top: 50px;
		margin-bottom: 10px;
		}
		
				#right-column-blank
				{
				float: right;
				width: 160px;
				padding: 10px;
				background-color: #FFFFFF;
				border-bottom: 0px solid #ccc;
				border-right: 0px solid #ccc;
				border-top: 0px solid #ddd;
				border-left: 0px solid #ddd;
				margin-top: 50px;
				}
		
		
				#right-column-contact
				{
				float: right;
				width: 320px;
				padding: 10px;
				background-color: #FFFFFF;
				border-bottom: 0px solid #ccc;
				border-right: 0px solid #ccc;
				border-top: 0px solid #ddd;
				border-left: 0px solid #ddd;
				margin-top: 50px;
				}	
				
				#right-column-about
				{
				float: right;
				width: 250px;
				padding: 10px;
				background-color: #FFFFFF;
				border-bottom: 0px solid #ccc;
				border-right: 0px solid #ccc;
				border-top: 0px solid #ddd;
				border-left: 0px solid #ddd;
				margin-top: 50px;
				}		
		
			#right-column h2
			{
			padding: 0px;
			margin-top: 0px;
			}
			
			#right-column a
			{
			display: block;
			margin-bottom: 10px;
			position: relative;
			text-decoration: none;
			border: 1px solid #ccc;
			width: 158px;
			height: 158px;
			}
			
				#right-column a span {z-index: 200; position: absolute; bottom: 0px; left: 0px; background-color: #fff; width: 148px;  padding: 5px 5px 5px 5px; line-height: 150%; color: #660000; opacity: 0.8;}
		
		/* FOOTER */
		#footer
		{
		background-image: url(../images/footer-bg.gif);
		background-repeat: repeat-x;
		width: 100%;
		height: 200px;
		clear: both;
		border-top: 1px solid #ccc;
		color: #666666;
		}
		
			#footer .container {width: 950px; padding-top: 10px;}
			#footer .container div {float: left; padding: 0px 10px 0px 10px; height: 190px; position: relative;}
			#footer .container div h2 {font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; color: #7D1214; margin-top: 0px; padding-top: 0px;font-weight:normal;}
			#footer .container div p {margin: 0px 0px 5px 0px; padding: 0px;}
			#footer ul {padding: 0px; margin: 0px; list-style: none;}
			#footer ul li {display: block;}
			#footer ul li a {display: block; padding: 0px 5px 0px 5px; border-bottom: 1px dotted #ccc; color: #666666; text-decoration: none; line-height: 25px; font-size: 11px;}
				#footer ul li a:hover {background-color: #ccc; color: #7D1214; font-weight: bold;}
				.smaller {font-size: 11px;}
				.smallest {font-size: 10px;}
				#footer a {color: #666666; text-decoration: none; font-size: 11px;}
				#footer .bright {width: 330px;}
				#footer-contact {width: 210px}
				#footer span.bottom {position: absolute; bottom: 0px;}
				#footer ul.bottom {position: absolute; bottom: 10px; width: 330px;}
				
				/* TEAM STYLES */
				
				.team-bio {clear: both; border-bottom: 1px dotted #ccc; height: 150px;}
				.team-bio img {float: left; margin: 0px 10px 5px 0px;}
			
	/* MAIN NAV STYLES */
	.page-index .page-index,
	.page-our-services .page-our-services,
		.page-seo .page-seo,
		.page-keyword-research .page-seo,
		.page-on-site-optimisation .page-seo,
		.page-off-site-link-building .page-seo,
		.page-social-media-networks .page-seo,
		
		.page-web-design .page-web-design,
		.page-design-process .page-web-design,
		.page-cms .page-web-design,
		.page-maintenance .page-web-design,
		
		.page-web-development .page-web-development,
		.page-capabilities-and-languages .page-web-development,
		.page-cloud-computing .page-web-development,
		
		.page-e-commerce .page-e-commerce,
		.page-e-commerce-features .page-e-commerce,
		.page-systems-integration .page-e-commerce,
		.page-usability .page-e-commerce,
		.page-marketing .page-e-commerce,
		
		.page-web-hosting .page-web-hosting,
		.page-options .page-web-hosting,
		.page-dedicated-servers .page-web-hosting,
		.page-email-domain .page-web-hosting,
		.page-hosting-e-commerce .page-web-hosting,
	.page-portfolio .page-portfolio,
	.page-about .page-about,
		.page-jobs .page-jobs,
		.page-news .page-news,
		.page-company-registration .page-company-registration
	{font-weight: bold; text-decoration: underline;}
	
	/* SUB NAV STYLES */
	.page-seo #subnav .page-seo,
	.page-keyword-research #subnav .page-keyword-research,
	.page-on-site-optimisation #subnav .page-on-site-optimisation,
	.page-off-site-link-building #subnav .page-off-site-link-building,
	.page-social-media-networks #subnav .page-social-media-networks,
	
	.page-web-design #subnav .page-web-design,
	.page-design-process #subnav .page-design-process,
	.page-cms #subnav .page-cms,
	.page-maintenance #subnav .page-maintenance,
	
	.page-web-development #subnav .page-web-development,
	.page-capabilities-and-languages #subnav .page-capabilities-and-languages,
	.page-cloud-computing #subnav .page-cloud-computing,
	
	.page-e-commerce #subnav .page-e-commerce,
	.page-e-commerce-features #subnav .page-e-commerce-features,
	.page-systems-integration #subnav .page-systems-integration,
	.page-usability #subnav .page-usability,
	.page-marketing #subnav .page-marketing,
	
	.page-web-hosting #subnav .page-web-hosting,
	.page-options #subnav .page-options,
	.page-dedicated-servers #subnav .page-dedicated-servers,
	.page-email-domain #subnav .page-email-domain,
	.page-hosting-e-commerce #subnav .page-hosting-e-commerce,
	
	.page-about #subnav .page-about,
	.page-jobs #subnav .page-jobs,
	.page-company-registration #subnav .page-company-registration
	{color: #e3ab25; text-shadow: 1px 1px #000; background-position: 0px -26px;}
	
	
	/* PORT TABS */
	
/* root element for tabs  */
ul.tabs { 
	float: left;
	width: 170px;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

/* single tab */
ul.tabs li { 	 
	list-style: none;
	padding: 0px;
	margin: 0px 0px 0px -22px;
	line-height: 40px;
	display: block;
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	line-height: 40px;
	display: block;
}

ul.tabs a:active {
			
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {	
	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	font-weight: bold; font-size: 11px;
}



/* initially all panes are hidden */ 
div.panes div{
	display:none;	
	padding-bottom: 20px;
	width: 736px;
	font-size:12px;
	float: right; 
	margin-top: -1px;
	z-index: 20;
	position: relative;
}



.panes h1 {font-size: 16px; line-height: 25px; margin: 0px; padding: 0px;}
.panes a p, .panes a ul, .panes a ol {line-height: 100%; font-size: 13px;margin-left:20px;}

.panes a 
{
width: 158px; 
height: 225px; 
float: left; 
display: block;
margin: 5px 5px 0px 0px;
background-color: #E2E2E2;
padding: 8px;
text-decoration: none;
border: none;
color: #333333;
position: relative;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 2px solid #ccc;
line-height: 150%;
font-size: 11px;
}
.panes a:hover {border-color: #aaa;}
.panes a img{width: 157px; margin-bottom: 5px;}
.panes a strong{color: #7D1214; line-height: 150%;}
.panes a span {width: 177px; background-color: #000000; color: #FFFFFF; position: absolute; top: 10px; left: 0px; opacity:0.8; filter:alpha(opacity=80); padding: 5px; display: none; font-size: 11px;}