﻿/*---------------------------------------
TheTin Limited
Ground Floor
24 - 28 Hatton Wall
London EC1N 8JH

Telephone:+44 (0)20 7430 7935
Fax:+44 (0)20 7430 7936
Email. info@thetin.net
website:http://www.thetin.net

All work copyright
2006 TheTin Limited
unless otherwise stated

Description: TheTin Ltd: London based Digital design consultancy
Version: June 2007
Design & Development: TheTin Ltd

------------------------------------------*/

/*GLOBAL SETTINGS*/

* html{
margin:0px;
padding:0px;
}
body{
background-color:#fff;
color:#535D64;
margin:0px;
padding:0px;
text-align:center;
/*font:75%/140% 'Lucida grande', Arial, Helvetica, Tahoma, Verdana, sans-serif;*/
font:75%/140% Georgia, Arial, Helvetica, Tahoma, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, ul, li, img, p, fieldset, a ,legend, table, td, td, pre, blockquote, ul, ol, dl, address, form, iframe{
margin:0px;
padding:0px;
border:0px;
outline: none;
}

h2
{
	font-size:1.3em;
	color:#FF9933;
	margin:0px 0px 5px 0px;
	padding:0px;
	}
	
h3
{	
	color:#999;
	font-size:100%;
	font-weight:normal;
	line-height:150%;
	}
h4
{	
	color:#999;
	font-size:100%;
	font-weight:bold;
	line-height:150%;
	margin:10px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	}
h5
{
	color:#FF9933;
	font-size:100%;
	font-weight:normal;
	line-height:150%;}		

ul,li {
	list-style:none;
	}
a
{
	color:#FF6600;
	text-decoration:none;
	}	
/*Somehow IE as per usual doesn't render 
my background image for horizontal rule otherwise HR 
so had to find a way around this, for the sake of all medias*/
	
.hr {background: #fff url('../img/divider.gif') repeat-x; 
	 height:1px;
	 margin:0px;
	 padding:0px;
	 clear:both;
	 }
.hr hr 
{
	display: none;
	margin:0px;
	padding:0px;}	 

		
.clearFix {
	clear:both;
	margin:0px;
	padding:0px;
	height:0px;
	}
.centered, p.centered {
	text-align:center;
	}
.right {
	text-align:right;
	}		
img {
	border:0;
	}	
	



/*------------------
LAYOUT
-------------------*/
#wrap{
width:725px;
height:auto;
margin:0px auto;
padding:0px;
position:relative;
text-align:left;
}

#topBand{
width:725px;
height:54px;
margin-top:46px;
padding:0px;
float:left;
position:relative;

}
/*-header-----------------------------*/
#header{
background:#fff url('../img/logo.gif') no-repeat;
height:40px;
width:109px;
position:relative;
float:right;
margin:0px;
padding:0px;
}
	#header h1{
	text-indent:-9999px;
	display:block;}

/*-top navigation menu---------------------
CSS Sprites: Image Slicing’s Kiss of Death
------------------------------------------*/	
ul#nav{
background:#fff url('../img/navGeorgia1.gif') no-repeat;
width:604px;
height:19px;
display:inline;
margin-top:22px;
padding:0px;
float:left;
position:relative;

}
	#nav li{
		margin: 0; padding: 0; list-style: none; position: absolute; top: 0;
		text-indent:-9999px;
	 }
	
	#nav a {
		height: 19px; display: block;
		}
	
	li#home {top:0px; left: 0px; width:51px; height:19px;}
	li#work {top:0px; left: 51px; width:74px; height:19px;}
	li#wawedo {top:0px; left: 125px; width:88px; height:19px;}
	li#blog {top:0px; left: 213px; width:75px; height:19px;}
	li#team {top:0px; left: 288px; width:75px; height:19px;}
	/*li#partners {top:0px; left: 353px; width:94px; height:19px;}*/
	li#tinads {top:0px; left: 363px; width:57px; height:19px;}
	li#tinnovation {top:0px; left: 420px; width:94px; height:19px;}
	li#contact {top:0px; left: 514px; width:94px; height:19px;}
	
	li#home a:hover {background: transparent url('../img/navGeorgia1.gif') 0 -19px no-repeat;}
	li#work a:hover {background: transparent url('../img/navGeorgia1.gif') -51px -19px no-repeat;}
	li#wawedo a:hover {background: transparent url('../img/navGeorgia1.gif') -125px -19px no-repeat;}
	li#blog a:hover {background: transparent url('../img/navGeorgia1.gif') -213px -19px no-repeat;}
	li#team a:hover {background: transparent url('../img/navGeorgia1.gif') -288px -19px no-repeat;}
	/*li#partners a:hover {background: transparent url('../img/navGeorgia.gif') -353px -19px no-repeat;}*/
	li#tinads a:hover {background: transparent url('../img/navGeorgia1.gif') -363px -19px no-repeat;}
	li#tinnovation a:hover {background: transparent url('../img/navGeorgia1.gif') -420px -19px no-repeat;}
	li#contact a:hover {background: transparent url('../img/navGeorgia1.gif') -514px -19px no-repeat;}
	
	li#home .active {background: transparent url('../img/navGeorgia1.gif') 0 -19px no-repeat;}
	li#work .active {background: transparent url('../img/navGeorgia1.gif') -51px -19px no-repeat;}
	li#wawedo .active {background: transparent url('../img/navGeorgia1.gif') -125px -19px no-repeat;}
	li#blog .active {background: transparent url('../img/navGeorgia1.gif') -213px -19px no-repeat;}
	li#team .active {background: transparent url('../img/navGeorgia1.gif') -288px -19px no-repeat;}
	/*li#partners .active {background: transparent url('../img/navGeorgia.gif') -353px -19px no-repeat;}*/
	li#tinads .active {background: transparent url('../img/navGeorgia1.gif') -363px -19px no-repeat;}
	li#tinnovation .active {background: transparent url('../img/navGeorgia1.gif') -420px -19px no-repeat;}
	li#contact .active {background: transparent url('../img/navGeorgia1.gif') -514px -19px no-repeat;}

/*newNavTest ---------------------------*/
ul#newNav{
   
    width:580px;
    height:19px;
    display:inline;
    margin-top:22px;
    padding:0px;
    float:left;
    position:relative;
}
#newNav li{
		margin: 0; 
		padding: 0px 0px 0px 0px;
		list-style: none;
		float:left;
		font-family:Arial;
		font-weight:bolder;
		color:#666;
		font-size:1.14em;
		letter-spacing:-0.01em;
}
#newNav a.selected 
{
        padding: 2px 6px 0px 6px;
        background-color:#ff6600;
        color:#fff;
}
#newNav a 
{
        padding: 2px 6px 0px 6px;
		height: 19px; display: block;
		color:#999;
}
#newNav a:hover
{
    padding: 2px 6px 0px 6px;
    background-color:#ff6600;
    color:#fff;
}
/*banner--------------------------------*/
#banner
{
	width:724px;
	height:250px;
	position:relative;
	float:left;
	margin:0px;
	padding:0px;
	border:none;
	}
	
	#waterMarker
	{
		background:#fff url('../img/floatMarker.gif') no-repeat;
		top:0px;
		left:0px;
		margin:0px;
		padding:0px;
		width:16px;
		height:78px;
		position:absolute;
		z-index:1;
	}
#flashHolder
{
    top:210px;
	left:580px;
	margin:0px;
	padding:0px;
	width:190px;
	height:190px;
    position:absolute;
	z-index:2;
}
	 
	
#container
{
	width:470px;
	position:relative;
	float:right;
	min-height:466px;
	height:auto !important;
    height:466px;
	margin:0;
	padding:15px 0 0 24px;
	
	}
	
	#container h2
	{
	color:#FF9933;
	margin:0px 0px 5px 0px;
	padding:0px;
	}
	
	
#sidebar
{
	background-color:#fff;
	color:#535D64;
	width:207px;
	/*position:absolute;
	top:266px;
	left:12px;*/
	position:relative;
	float:left;
	margin-top:-84px;
	margin-left:12px;
	padding:0;
	}	
	
#descrCol
{
	background-color:#EDEEEF;
	width:172px;
	margin:0px 0px 0px 0px;
	padding:13px 20px 10px 15px;
	}
	#descrCol h4
		{
		font-size:100%;
		color:#000000;
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
		#descrCol p
		{
		padding:0 0 10px 0px;
		margin:0px 0 10px 0px;
		font-size:0.99em;
		line-height:140%;
		}
		#descrCol ul
		{
		margin:0 0 10px 0;
		padding:0px;
		/*color:#FF6600;*/
		color:#535D64;
		list-style-type:square;
		font-size:95%;
		}	
		#descrCol ul li
		{
		
		margin:0px 0px 0px 15px;
		padding:0px;
		list-style-type:square;
		}	
	
#custQuote
{
	width:172px;
	background-color:#fff;
	margin:20px 0px 25px 12px;
	padding:0px 20px 0px 0px;}	
	
	#custQuote h4

		{

		color:#FF9933;
		font-weight:bold;
		margin:0px 0 10px 0px;
		}

		#custQuote p
		{
		color:#666666;
		padding:0 0 10px 0px;
		font-size:100%;
		}
	
	
#desCol

{	

	clear:left;
	/*position:absolute;
	clear:left;
	top:266px;
	left:25px;*/
	float:left;
	margin:-84px 0px 20px 12px;
	padding:13px 20px 10px 15px;
	background:#EDEEEF;
	width:172px;
	/*height:385px;*/
	text-align:left;
	position: relative;
	z-index: 10;
	}

*html #csQuote

{

	width:172px;
	background-color:white;
	margin:0px 0px 20px 12px;
	padding:0px 20px 10px 15px;
	position:relative;
	clear:left;

	}

#csQuote

{	

	width:172px;
	background-color:#fff;
	margin:0px 0px 25px 12px;
	padding:0px 20px 0px 15px;
	position:absolute;
	float:left;
	clear:left;
	text-align:left;
	bottom:0;
	left:0;
	

	/*position:absolute;
	clear:left;
	top:266px;
	left:25px;
	margin:0px 0px 20px 12px;
	padding:0px 20px 10px 15px;
	background-color:red;
	height:385px;
	text-align:left;
	position: relative;
	float:left;
	clear:left;
	z-index: 10;*/
	}

#csQuote h4

		{

		color:#FF9933;
		font-weight:bold;
		margin:0px 0 10px 0px;
		}

		#csQuote p
		{
		color:#666666;
		padding:0 0 10px 0px;
		font-size:100%;
		}


		.noBg
		{
		background-color:#EDEEEF;
		background-image:none;
		width:172px;
		/*height:385px;*/
		top:266px;
		left:25px;
		margin:0px 0px 0px 0px;
		padding:13px 20px 10px 15px;
		position:absolute;
		text-align:left;
		}
		
		#desCol h4
		{
		font-size:100%;
		color:#000000;
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
		#desCol p
		{
		padding:0 0 10px 0px;
		margin:0px 0 10px 0px;
		font-size:0.99em;
		line-height:140%;
		}
		#desCol ul
		{
		margin:0 0 30px 0;
		padding:0px;
		/*color:#FF6600;*/
		color:#535D64;
		list-style-type:square;
		font-size:95%;
		}	
		#desCol ul li
		{
		
		margin:0px 0px 0px 15px;
		padding:0px;
		list-style-type:square;
		}
		#desCol form{}
		#desCol input
		{
		border:1px solid #D4D0C8;
		background:#fff;
		padding:0px;
		margin:6px 0px;
		}		
#leftCol
{
	width:227px;
	margin:0px;
	padding:0px;
	float:left;
	position:relative;
	}
#rightCol
{	
	width:227px;
	margin:0px;
	padding:0px;
	float:right;
	position:relative;}
		
		#rightCol h2
		{
		margin-bottom:5px;}
	
		#rightCol h3
		{
		/*color:#999;
		font-size:100%;
		font-weight:normal;
		line-height:150%;
		margin-top:22px;*/
		}
		#rightCol img
		{
		padding:0px;
		margin:10px 0px 0px 0px;
		border:none;
		}    
	
	
#footer
{
	background:url('../img/footerBg.gif') no-repeat top left;
	position:relative;
	width:735px;
	font-size:x-small;
	margin:0px 0px 20px 0px;
	padding:17px 0 0 0px;
	clear:right;
	}
		#footer p
		{
		float:left;
		padding:0px;
		margin:0px;
		}
		ul#footNav
		{
		float:right;
		padding:0px;
		margin:0px;	
		}
			ul#footNav li
			{
			display:none;
			padding:0px;
			margin:0px 0 0 0px;}

/*blogging--------------------------*/
.entry
{
	width:227px;
	margin:16px 0px 0px 0px;
	padding:0px 0px 16px 0px;
	position:relative;
	float:left;
	text-align:left;
	}
.entryDate
{
	color:#999;
	}
.entryTitle{}
.entryBody{}
/*team profiles-------------------------*/
.caseProfile
{
	width:470px;
	float:right;
	position:relative;
	text-align:left;
	padding:10px 0 0px 0px;
	margin:0 0 20px 0px;
	color:#999;
	font-size:99%;
	line-height:140%;

	}
.caseProfile IMG
{
	float:right;
}
.profile
{
	width:470px;
	
	float:right;
	position:relative;
	text-align:left;
	padding:10px 0px 0px 0px;
	margin:0 0 0px 0px;
	color:#999;
	font-size:99%;
	line-height:140%;
	
	
	}	
	.profile P
{	
	margin:10px 0px 0px 0px;
	color:#999;
}
.profButton
{
	width:30px;
	float:left;
}
.profButton IMG
{
	float:left;
	margin:0px 0px 0px 0px;
	cursor:pointer;
	cursor:hand;
}
.profButton a, .profButton a:hover, .profButton a:link, .profButton a:visited
{	
	width:15px;
	height:15px;
	cursor:hand;
	
}
	/*.profileImg
	{
		float:right;
		position:relative;
		padding:0px;
		margin:0px;
		}*/
	.profDet
	{
		width:440px;
		margin:0px;
		padding:0px;
		float:right;
		
		/*width:450px;
		margin:0px 0px 0px 10px;*/
		/*width:218px;*/
		}
	/*.profDet IMG
	{
		width:50px;
		float:left;
		margin-left:10px;
	}*/
	.profImages
	{
		float:right;
		width:213px;
		
	}
	.profImages IMG
	{
		width:62px;
		float:left;
		margin-left:9px;
	}
	.profDet p
	{
		padding:0px;
		}	

	.profDetails 
	{
		
		width:200px;
		float:left;
	}	
	.nameProfile,
	.jobTitle
	{	
		float:left;
		width:190px;
		color:#FF9933;
		
		margin:0px 0px;
		padding:0px;
		}
	.profile + .hr 
	{
		margin:20px 0 0 0px;
		padding:0px 0 0 0px;
		border:1px solid red;}	
	.caseProfile P 
	{
		width:225px;
	}	
	/*.profile IMG 
	{
		float:left;	
	}*/
	/*.profileThumb
	{
		width:225px;
		height:60px;
		background-color:Blue;
		margin:0px 0px 0px 0px;
		float:right;
	}
	.profileDet IMG
	{
		margin:0px 0px 0px 10px;
		float:right;
	}*/
	.profileInfo
	{
		
		width:440px;
		float:right;
		
		margin:0px 0px 0px 0px;
		
	}
	
.caseCopy h3
{
	font-weight:bold;
	font-size:140%;
	margin-top:10px;
	}
.caseCopy ul
{
	width:inherit;
	padding:0;
	margin:0 0 10px 0;
	position:relative;
	float:left;
	
	}
	.caseCopy ul li
	{
		padding:0;
		list-style-type:square;
		margin:0 0 0 15px;
		}
.caseStudy IMG
{
	margin:10px 0px 10px 0px;
}
/*contact us-------------------------*/	
	
#contactDet
{
	width:219px;
	float:left;
	position:relative;
	margin:0px;
	padding:0 23px 0 0px;
	}
	#contactDet h3
	{
		margin:20px 0 0px 0;
		padding:0px;
		}
#explorer
{
	width:224px;
	float:right;
	position:relative;
	margin:0px;
	padding:0px;
	}
	#explorer h2
	{
		margin-bottom:18px;
		}
	#explorer img
	{
		float:right;
		position:relative;
		margin-top:50px;
		padding:0px;
		}
#history
{
	margin:30px 0px;
	padding:0px 0px;
	}
	
	#history .hr
	{
		margin:30px 0px;
		padding:0px;}	
		
	#history h3
	{
		padding:0px;
		margin:20px 0 0 0px;}
	select
	{
		width:175px;
		height:20px;
		padding:0px;
		margin:14px 0 0 0px;
		color:#666;
		}	
		
/*case study detailed-------------------------*/		
#caseStudyDet h5
{
	margin:20px 0 5px 0px;
	padding:0px;
	}	
#caseStudyDet .hr
{
	margin:20px 0 0 0px;
	padding:0px;
	}	
	
.whatDesc H3
{
	
	color:#666;
	font-size:100%;
	font-weight:bold;
	line-height:150%;
	margin-top:20px;
}
.whatDesc H4
{
	
	color:#666;
	font-size:100%;
	font-weight:normal;
	line-height:150%;
	margin-top:10px;
}
.whatDesc P
{
	color:#666;
	margin-bottom:10px;
	
}
.caseDet
{
	float:left;
	width:230px;
	
}

.caseDet IMG
{
	float:left;
	padding:0px 0px 10px 0px;
	
	/*width:440px;*/

}
.caseDet A
{
	width:230px;
	float:left;
	clear:both;
	margin:0px 0px 0px 0px;
}
.caseDet P
{
	color:#666;
}

.caseStudy P
{
	color:#666;
	margin-bottom:10px;
}
#testimonials
{
	margin:30px 0px;
	padding:30px 0px;
	}
		
	#quoting
	{
		width:200px;
		margin:0 0 0 15px;
		padding:0 0 0 15px;
		float:left;
		position:relative;
		}
		#quoting blockquote
		{
		font-size:1.3em;
		font-weight:bold;
		color:#FF9933;
		margin:0px 0px 5px 0px;
		padding:0px;
		}
		#quoting p
		{
		font-size:0.95em;
		line-height:140%;	
		padding:0 0 10px 0px;
		margin:0px 0 10px 0px;
		
		}
/*CONTACT FORM PAGE================================*/

#contactDet form
		 {
		 	width:220px;
		 	position:relative;
		 	float:left;
		 	padding:0px 0px 25px 0px;
		 	margin:0px;
		 	text-align:left;
		 	/*border:1px solid #ccc;*/
		 	}
		 #contactDet form legend
		 {
		 	visibility:hidden;
		 	display:none}	
		 	
		 #contactDet form ol li
		 {
		 	display:block;
		 	width:220px;
		 	position:relative;
		 	float:left;
		 	margin:5px 0;
		 	padding:0px;
		 	clear:both;
		 	
		 	}
		 #contactDet form label
		 {
		 	    width:50px;
	        	position:relative;
	        	float:left;}
	     #contactDet form input,
	     #contactDet form textarea 
	        {
	        	width:160px;
	        	border:1px solid #ccc;
	        	position:relative;
	        	float:right;
	        	}
	       #contactDet form fieldset
	       {
	       	width:220px;
		 	position:relative;
		 	float:left;
	       	margin:15px 0 15px 0;
	       	padding:0px;
	       	
	       	} 	

			#contactDet form #submitBtn 
	        {
	        	width:82px;
                height:20px;
                background:#fff url(../img/submitBtn.gif) no-repeat top left;
               border:medium none;
               text-indent:-9999em;
               font-size:0em;
               position:absolute;
               bottom:0px;
               right:0px;
               outline:none;
               cursor:pointer;
	        } 




/*MISCELLENOUS*/

.hidden
{
	display: none;
	clear:both;
	margin:10px 0px 0px 0px;
	padding:10px 0px 0px 0px;
}


form.tinForm
		 {
		 	width:280px;
		 	position:relative;
		 	float:left;
		 	padding:25px 15px 25px 15px;
		 	margin:0px;
		 	text-align:left;
		 	/*border:1px solid #ccc;*/
		 	}
		 form.tinForm legend
		 {
		 	visibility:hidden;
		 	display:none}	
		 form.tinForm h2
		 {
		 	margin-bottom:15px;
		 	color:#FF9933;
            font-size:1.3em;
            margin:0px 0px 5px;
            padding:0px;}	
		 form.tinForm ol li
		 {
		 	display:block;
		 	width:280px;
		 	position:relative;
		 	float:left;
		 	margin:5px 0;
		 	padding:0px;
		 	clear:both;
		 	
		 	}
		 form.tinForm label
		 {
		 	    width:100px;
	        	position:relative;
	        	float:left;}
	     form.tinForm input 
	        {
	        	width:170px;
	        	border:1px solid #ccc;
	        	position:relative;
	        	float:right;
	        	}
	       form.tinForm fieldset
	       {
	       	margin:15px 0 15px 0;
	       	padding:0px;
	       	} 	
	        #getBadge 
	        {
	        	width:82px;
                height:20px;
                background:#fff url(../img/getBagde.gif) no-repeat top left;
               border:medium none;
               text-indent:-9999em;
               font-size:0em;
               position:absolute;
               bottom:10px;
               right:15px;
               outline:none;
               cursor:pointer;
	        }  		
		   #closeLink
		    {
		    	width:20px;
		    	height:20px;
		    	background:#fff url(../img/closeForm.gif) no-repeat top left;
		    	border:medium none;
               text-indent:-9999em;
               font-size:0em;
               position:absolute;
               top:15px;
               right:15px;
		    	}
		    	
		    