ba/* 	The master Layout style CSS sheet for tecniche

	Main Coding: 	Stuart Dunn
	Copyright:		tecniche.co.uk 2006
 
 	Internet Explorer Box Model Hack written by:
	Tantek Celik. www.tantek.com
 
  	Written: 	Feb 06
	Language:	CSS1
*/

/*
@import url( enhancedlayout.css ); 
*/

body {
	background: #fff;
	 margin: 0; padding: 0;
}

#cls {clear: all;}
.top { text-align: right; }
.red {font-weight: bold; color: red;}
hr.divide {display: none; clear: all;}

.pink {color: #ce248c;  font-weight: bold; }
.lead_in {margin-top: 60px;}


/* *************************** */
/* SECTION SPECIFIC HEADERS */
/* *************************** */
#header-blank {display: none;}

#header {
	position: absolute;
	top: 30px; left:0px;
	background: #fff url(img/header-img.jpg) no-repeat 0 0;
	margin: 0; padding: 0;
	height: 276px; 	
	width: 100%;
	}
#header h1 {display: none;}


#header-title {
	position: absolute;
	top: 61px; left: 178px;
	background: #fff url(img/home-header.gif) no-repeat 0 0;
	margin: 0; padding: 0;
	height: 122px; 	
	width: 461px;
	}
#header-title h2 {display: none;}

#header-title h2 {display: none;}



#contact #header {
	background: #fff url(img/header-contact.jpg) no-repeat 0 0;
}



/* *************************** */
/* SECTION SPECIFIC LOGOS */
/* *************************** */
#logo img {border: 0;}

#contact #logo {	
	position: absolute;
	top: 70px; left: 750px;	
	background: transparent url(img/search-engine-optimisation.gif) no-repeat 0 0;
	margin: 0; padding: 0;
	height: 160px; 	width: 160px;
}


#home #logo {	
	position: absolute;
	top: 70px; left: 750px;	
	background: transparent url(img/badge.gif) no-repeat 0 0;
	margin: 0; padding: 0;
	height: 180px; 	width: 220px;
}


/* *************************** */
/* NAVIGATION */
/* *************************** */

/* MENU */

#topnav { 
	position: absolute;
	top: 0; left: 0;
	height: 30px;  width: 100%;

	
	background: transparent url(img/menu-bg.jpg) repeat-x top left; 
	font: bold 13px Georgia, Palatino, Palatino Linotype, serif;
	text-transform: uppercase;
	text-align: right;   
	display : inline;
	
	/* NEW for IE5 */
	padding:  0;
	width: 100%;
	voice-family: "\"}\""; 
	voice-family:inherit;
	padding: 8px 0 0 0;
	width: 100%;
}

html>body #topnav {  padding: 8px 0 0 0; width: 100%; } 

#topnav ul{
   padding : 0; margin : 0;
   list-style: none;
   display : inline;
   margin-right: 45px;
}

#topnav li {
   display : inline; 
   padding: 0; margin: 0; 
}


#topnav  a{
	margin-left: auto; margin-right: auto; 
	padding: 8px 16px 6px 16px; 
	display : inline;
	height: 30px; 
	text-decoration: none;
	border-bottom: none;
	border-right: 1px solid #ccc;
	color: #fff;
}


#topnav  a.first{border-left: 1px solid #ccc; display : inline;}
#topnav  a.last{border-right: none; display : inline;}


#topnav  a:link {text-decoration:none; color:#fff; display : inline; }
#topnav a:visited {text-decoration:none; color:#fff;display : inline;}
#topnav  a:hover { 
	height: 30px; 
background-color: #ce248e;
/*	background: transparent url(img/menu-hover.jpg) repeat-x top left; */
	color: #fff;
	display : inline;
	}
#topnav  a:active{  display : inline; }


/* *************************** */
/* Page specific styles - change layout depending on page selected!...  */
/* *************************** */

/* HOME PAGE */
#home a#t-home{background: transparent url(img/menu-selected.jpg) repeat-x top left;}

	
/* CONTACT US PAGE */
#contact a#t-contact{	background: #AF1E28 url(img/menu-selected.jpg) repeat-x top left;}


/* *************************** */
/* MAIN CONTENT LAYOUT */
/* *************************** */

#content {
	margin: 0px 25px; 
	text-align: left; height: 100%;
	margin-top: 200px;
	margin-left: 15px;
	margin-right: 15px;
	z-index: 1000;
}


#maintext {
	float: left; 
	width: 70%; /*610px;*/
}

#maintextcontent {
	padding: 30px 45px 30px 40px;
	
}

#maintextcontent a:link { color: #ce248c;  font-weight: bold; text-decoration: underline;}
#maintextcontent a:visited {color: #ce248c; font-size: 100%; font-weight: bold; text-decoration: none;}
#maintextcontent a:hover {color: #525252; text-decoration: underline;}
#maintextcontent a:active{text-decoration: none;}


#maintextcontent ul  {list-style: none; margin: 15px; }

#maintextcontent ul li {
	text-decoration: none; 
	color:#000;  
	margin: 0px 0px 0.5em 0px; 
	}
	
#maintextcontent #defn  ul {	list-style: none; margin: 0px 0px 0px 16px; padding: 0 0 10px 0; 	font-style: italic; }
#maintextcontent #defn li {margin: 0px; padding: 0; background: none;}

 
#maintext .cls {clear: both; margin-bottom: 8px;}


/* FEATURED PROJECT */
.featured-project .project {padding-left: 145px;}
.featured-project .screenshot img {float: left; border: none; padding: 10px 20px; 15px 20px;}






/* *************************** */
/* PORTFOLIO PAGES SPECIFIC STYLES */
/* *************************** */

.box {
	height: 180px;
	float: right; 
	text-align: center; 
}

.box-inner {
	background: #DC5FB5 url(img/box-bg.gif) repeat-y 0px 0px; 
	width: 165px; height: 125px;
	margin: 0; padding: 0; border: 0; 
	margin-left: 10px;
	margin-top: 25px;
	}

.box-shad {
	background: #fff url(img/box-shadow.gif) no-repeat top left; 
	width: 165px; height: 10px;
	margin-left: 10px; 

	}

.box-inner img { margin: 10px 0 0 0; text-align: center; }

.box-inner .cls {
	clear: both; 
	font-size: 10px; 
}


/* *************************** */
/* SIDE PANEL TEXT */
/* *************************** */

#sidetext {
	background-color: transparent; height: 100%;
	float: left; font-size: 10px; line-height: 150%; padding-bottom: 10px; width: 247px;
	padding: 100px 5px 30px 5px;	
}

#sidetext div {
	padding-bottom: 5px; padding-left: 12px; padding-right: 12px; padding-top: 9px;	
	clear: both;
}

#sidetext ul {
	list-style: disc; margin: 0px 0px 0px 16px; padding: 0px;
}
#sidetext li {
	background-image: none; background-position: 0px 0.6em; background-repeat: no-repeat; margin: 0px; padding-left: 0px;
}

#sidetext a:link {color: #000; text-decoration: none;}
#sidetext a:visited {color: #555; text-decoration: none;}
#sidetext a:hover {	text-decoration: underline;}
#sidetext a:active{	color: #000; text-decoration: none}

#sidetext H4 {font-size: 10px; font-weight: bold; margin: 0px; padding: 0px;}
.t-img { text-align: left; margin: 0; padding: 0;}

#firefox-bug {clear: both; background-color: #fff; height: 1px;}

/* *************************** */
/* SIDE MENU */
/* *************************** */

#sideMenu {
	font-style: normal;
	font-size: 10px; 
	color: #000;
	width: 227px;
	background: #FFF49E url(img/sbar_bg.gif) top right no-repeat;
	color: #827B2B;
	padding: 0 10px;
}

* html  #sideMenu {margin-left: -227px;}

#submenu-shad {
	background: #fff url(img/sbar_bot.gif) top right no-repeat;
	width: 227px;
	padding-bottom: 120px !important;
	margin-bottom: -120px !important;
	
}

#sideMenu ul { list-style: none;}
#sideMenu li { padding: 4px 0 4px 0; color: #000; line-height: 20px;}
#sideMenu li a { display: block; padding-left: 20px;}
	
	
#sideMenu li a {
	background: url(img/subMenu.gif) no-repeat 0px 0px;  
	margin: 0px; padding: 0px;
	text-decoration: none; 
	height: 20px;	
	padding-left: 25px;
	}
#sideMenu li a:hover { background-position:   0px -20px; }
#sideMenu li a:active {	background-position: 0px -40px; text-decoration: underline;}

#subService li a {
	background: url(img/s-subMenu.gif) no-repeat 0px 0px;  
	margin: 0px; padding: 0px;
	text-decoration: none; 
	width: 100%; height: 20px;	
	padding-left: 25px;
	}
#subService li a:hover { background-position:   0px -20px; }
#subService li a:active {	background-position: 0px -40px; text-decoration: underline; }

#subSeo li a {
	background: url(img/s-subMenu.gif) no-repeat 0px 0px;  
	margin: 0px; padding: 0px;
	text-decoration: none; 
	width: 100%; height: 20px;	
	padding-left: 25px;
	}
#subSeo li a:hover { background-position:   0px -20px; }
#subSeo li a:active {	background-position: 0px -40px; text-decoration: underline; }


#sidebar {
	float: right;
	width: 187px;
}







/* *************************** */
/* FOOTER */
/* *************************** */

#footer {
	clear: both;
	font: normal 10px Georgia, Palatino, Palatino linotype, serif;
	line-height: 20px; 
	color: #000; 
	margin:0; padding: 0;
	height: 150px; 	
	background: #fff url(img/footer-img.jpg) no-repeat 100% 0;
	width: 95%;
}

#footer #b-menu {float: left; text-align: left; margin-left: 20px; margin-top: 20px;   }
#footer #b-menu a:link {color: #000; text-decoration: none; padding: 0 5px; }
#footer #b-menu a:visited {	color: #000; text-decoration: none; padding: 0 5px;}
#footer #b-menu a:hover {	text-decoration: underline; padding: 0 5px;}
#footer #b-menu a:active{color: #000; text-decoration: none; padding: 0 5px;}
#footer #clear {clear: both;}

#footer #standardstext {clear: both; float: left; text-align: left; width: 370px; margin-left: 20px; margin-top: 30px;}
#footer #copyrighttext {float: right; text-align: right; width: 300px; margin-right: 20px; margin-top: 70px;}

 #footer #standardstext a:link {color: #AF1E28; text-decoration: none;}
 #footer #standardstext a:visited {color: #AF1E28; text-decoration: none;}
 #footer #standardstext a:hover {	text-decoration: underline;}
 #footer #standardstext a:active{color: #AF1E28; text-decoration: none;}

/* *************************** */
/* Side Panel Quotations */
/* *************************** */


#quote-inner {
	font-style: normal;
	font-size: 10px; 
	color: #000;
	width: 250px;
/*	background: #FFF49E url(img/sbar_bg.gif) top right no-repeat;*/
	color: #827B2B;
	padding: 0 10px;
	
	}

#quote-shad {
	background: #fff url(img/quote-shadow.gif) no-repeat top left; 
	width: 185px; height: 10px;
	margin-left: 10px;
	}


#quote-inner blockquote {
	background: transparent url(img/quote-open.gif) no-repeat 0px 0px; 
	font-style: normal;
	font-size: 10px; 
	
	padding: 8px 10px 9px 12px;  
	width: 207px;
}



#quote-inner strong {color: #000000;}

#quote {
	color: #3E3E3E;
	text-align: justify;
	line-height: 1.4em;
	margin: 16px 5px 8px 8px;
}

#author {
	color: #3E3E3E;
	font-size: 10px; 
	margin-top: 4px;
	margin-right: 4px;
	text-align: right;
	}

#quote .leader {padding-left: 24px;}
#quote .tail {	background: url(img/quote-close.jpg) no-repeat right bottom; }



/* *************************** */
/* Main Content Quotations */
/* *************************** */
	

#mquote-inner blockquote , #mquote-inner2 blockquote {
	background: transparent url(img/mquote-open.jpg) no-repeat 0px 0px; 
	font-style: normal;
	font-size: 10px; 
	margin: 2px auto 0px auto;
	padding: 8px 12px 9px 12px;  
}

#mquote-inner strong , #mquote-inner2 strong {color: #CE248C;}

#mquote , #mquote2 {
	color: #000;
	font-size: 11px; 
	margin: 5px;
	padding: 4px 6px 8px 6px;
	}

#mauthor, #mauthor2  {
	color: #000;
	font-size: 10px; 
	margin-top: 4px;
	margin-right: 4px;
	text-align: right;
	}
	
a#mauthor, a#mauthor2  {color: #fff;}
#mauthor a:link, #mauthor2 a:link {border-bottom: none; color: #fff; font-weight: normal; text-decoration: none;}
#mauthor a:visited, #mauthor2 a:visited {border-bottom: none; color: #fff; font-weight: normal; text-decoration: none;}
#mauthor a:hover, #mauthor2 a:hover {text-decoration: underline;}
#mauthor a:active, #mauthor2 a:active{border-bottom: none;}

	
.pullquote {
	float: right; 
	font-family: Georgia, Times, serif; 
	font-size: 16px; 
	font-variant: small-caps; 
	font-weight: normal; 
	letter-spacing: 1px; 
	line-height: 22px; 
	padding-bottom: 5px; padding-left: 5px; padding-right: 0px; padding-top: 5px; 
	width: 175px;
}



#mquote .left {margin-left: 10px;}
#mquote .right {clear: both; margin-left: 70px;}








/* *************************** */
/* Clever stuff - image replacement of h2 tags */
/* *************************** */

/* Based on a modified FiR method as outlined on: http://levin.grundeis.net */
.replace{ 
	position:relative; 
	margin:0px; padding:0px; 
	/* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ 
	} 

.replace span{ 
	display:block; 
	position:absolute; 
	top:0px; left:0px; 
	z-index:1; /*for Opera 5 and 6*/ 
	} 

/* The replacement method - replaces h2 tags and is CSS on/Images off safe */

/* Home - index */

#h1-home, #h1-home span {margin-left: 0px; background: url(img/h1-home.gif) no-repeat; height: 122px; width: 461px;}
#h2-welcome, #h2-welcome span {	margin-left: 0px; background: url(img/h2-welcome.gif) no-repeat; height: 60px; width: 460px;}
#h2-featured, #h2-featured span {margin-left: 0px; background: url(img/h2-featured.gif) no-repeat; height: 60px; width: 400px;}


/* About - index */
#h2-who, #h2-who span {
	margin-left: 0px; 
	background: url(img/h2-who.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-what, #h2-what span {
	margin-left: 0px; 
	background: url(img/h2-what.gif) no-repeat;
	height: 60px; width: 300px;
}


/* Services - index */
#h2-service, #h2-service span {
	margin-left: 0px; 
	background: url(img/h2-services.gif) no-repeat;
	height: 60px; width: 350px;
	}

#h2-pudding, #h2-pudding span  {
	margin-left: 0px; 
	background: url(img/h2-pudding.gif) no-repeat;
	height: 60px; width: 350px;
}
	
/* Services - copy writing */
#h2-copy, #h2-copy span {
	margin-left: 0px; 
	background: url(img/h2-copy.gif) no-repeat;
	height: 60px; width: 300px;
}


/* Services - Site design */
#h2-process, #h2-process span {
	margin-left: 0px; 
	background: url(img/h2-process.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-assistance, #h2-assistance span {
	margin-left: 0px; 
	background: url(img/h2-assistance.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - design - review  */

#h2-review, #h2-review span {
	margin-left: 0px; 
	background: url(img/h2-review.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-involved, #h2-involved span {
	margin-left: 0px; 
	background: url(img/h2-involved.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-pleasenote, #h2-pleasenote span {
	margin-left: 0px; 
	background: url(img/h2-pleasenote.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - design - refresh  */

#h2-refresh, #h2-refresh span {
	margin-left: 0px; 
	background: url(img/h2-refresh.gif) no-repeat;
	height: 60px; width: 350px; /*NOTE - slightly wider*/
}

/* Services - design - redesign */

#h2-redesign, #h2-redesign span {
	margin-left: 0px; 
	background: url(img/h2-redesign.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - design - costs */

#h2-costs, #h2-costs span {
	margin-left: 0px; 
	background: url(img/h2-costs.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - optimisation - seosem */

#h2-seosem, #h2-seosem span {
	margin-left: 0px; 
	background: url(img/h2-seosem.gif) no-repeat;
	height: 60px; width: 350px; /*NOTE - slightly wider*/
}

#h2-gaining, #h2-gaining span {
	margin-left: 0px; 
	background: url(img/h2-gaining.gif) no-repeat;
	height: 60px; width: 350px; /*NOTE - slightly wider*/
}

#h2-onehit, #h2-onehit span {
	margin-left: 0px; 
	background: url(img/h2-onehit.gif) no-repeat;
	height: 60px; width: 300px; 
} 

/* Services - optimisation - ethical */

#h2-ethical, #h2-ethical span {
	margin-left: 0px; 
	background: url(img/h2-ethical.gif) no-repeat;
	height: 60px; width: 350px; /*NOTE - slightly wider*/
}

#h2-nonethical, #h2-nonethical span {
	margin-left: 0px; 
	background: url(img/h2-nonethical.gif) no-repeat;
	height: 60px; width: 350px; /*NOTE - slightly wider*/
}

/* Services - optimisation - ethical */

#h2-warning, #h2-warning span {
	margin-left: 0px; 
	background: url(img/h2-warning.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - optimisation - experiment */

#h2-donttry, #h2-donttry span {
	margin-left: 0px; 
	background: url(img/h2-donttry.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-dontmarket, #h2-dontmarket span {
	margin-left: 0px; 
	background: url(img/h2-dontmarket.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-results, #h2-results span {
	margin-left: 0px; 
	background: url(img/h2-results.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Services - accessibility */

#h2-accessibility, #h2-accessibility span {
	margin-left: 0px; 
	background: url(img/h2-accessibility.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-blind, #h2-blind span {
	margin-left: 0px; 
	background: url(img/h2-blind.gif) no-repeat;
	height: 60px; width: 300px; 
}

#h2-timetest, #h2-timetest span {
	margin-left: 0px; 
	background: url(img/h2-timetest.gif) no-repeat;
	height: 60px; width: 300px; 
}


/* Portfolio - All Pages*/
#h2-current, #h2-current span {
	margin-left: 0px; 
	background: url(img/h2-current.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-seom, #h2-seom span {
	margin-left: 0px; 
	background: url(img/h2-seom.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-company, #h2-company span {
	margin-left: 0px; 
	background: url(img/h2-company.gif) no-repeat;
	height: 60px; width: 300px;
}


#h2-charity, #h2-charity span {
	margin-left: 0px; 
	background: url(img/h2-charity.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-fun, #h2-fun span {
	margin-left: 0px; 
	background: url(img/h2-fun.gif) no-repeat;
	height: 60px; width: 300px;
}

/* Web sites */
#h2-rose, #h2-rose span {
	margin-left: 0px; 
	background: url(img/h2-rose.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-tcp, #h2-tcp span {
	margin-left: 0px; 
	background: url(img/h2-tcp.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-psp2, #h2-psp2 span {
	margin-left: 0px; 
	background: url(img/h2-psp2.gif) no-repeat;
	height: 60px; width: 350px;
}


#h2-hhippo, #h2-hhippo span {
	margin-left: 0px; 
	background: url(img/h2-hhippo.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-ipam, #h2-ipam span {
	margin-left: 0px; 
	background: url(img/h2-ipam.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-hsw, #h2-hsw span {
	margin-left: 0px; 
	background: url(img/h2-hsw.gif) no-repeat;
	height: 60px; width: 370px; /*NOTE - slightly wider*/
}

#h2-pbarn, #h2-pbarn span {
	margin-left: 0px; 
	background: url(img/h2-pbarn.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-curltek, #h2-curltek span {
	margin-left: 0px; 
	background: url(img/h2-curltek.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-ph, #h2-ph span {
	margin-left: 0px; 
	background: url(img/h2-ph.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-tigerdog, #h2-tigerdog span {
	margin-left: 0px; 
	background: url(img/h2-tigerdog.gif) no-repeat;
	height: 60px; width: 350px;
}

#h2-rudecat, #h2-rudecat span {
	margin-left: 0px; 
	background: url(img/h2-rudecat.gif) no-repeat;
	height: 60px; width: 350px;
}

/* Sub menus */
#h2-submenu, #h2-submenu span {
	margin-left: 0px; 
	background: url(img/h2-submenu.gif) no-repeat;
	height: 35px; width: 155px;
}


/* Main level pages */

#h2-contact, #h2-contact span {
	margin-left: 0px; 
	background: url(img/h2-contact.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-oops, #h2-oops span {
	margin-left: 0px; 
	background: url(img/h2-oops.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-sitemap, #h2-sitemap span {
	margin-left: 0px; 
	background: url(img/h2-sitemap.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-copyright, #h2-copyright span {
	margin-left: 0px; 
	background: url(img/h2-copyright.gif) no-repeat;
	height: 60px; width: 400px; /*NOTE - much wider*/
}

#h2-sitedetail, #h2-sitedetail span {
	margin-left: 0px; 
	background: url(img/h2-sitedetail.gif) no-repeat;
	height: 60px; width: 300px;
}

#h2-interesting, #h2-interesting span {
	margin-left: 0px; 
	background: url(img/h2-interesting.gif) no-repeat;
	height: 60px; width: 300px;
}