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

/*TCi WEB CSS*/

body{
margin:0;
padding:0;
background:url(tci-web-bg.jpg) repeat-x top fixed;
background-color:#FF6600;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}

.ie body{
margin:0;
padding:0;
background:url(tci-web-bg.jpg) repeat-x top fixed;
background-color:#FF6600;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
opacity:0.999;
}

#container{
width:900px;
margin: 0px auto;
padding:0px;
text-align:left;
color:#FFF;
position:relative;
}


/*HEADER STYLING*/
#header{
width:900px;
height:105px;
border-bottom:1px solid white;
margin-bottom:15px;
}

#logo {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100px;
	height: 90px;
	float:right;
	
}
#logo span {
	display: none;
	position: absolute;
}
#logo a {
	display: block;
	text-indent: -1800%;
	position: absolute;
	outline: none;
}
#logo a:hover {
	background-position: left bottom;
}
#logo a:hover span{
	display: block;
}
#logo .home {
	width:100px;
	height:90px;
	background: url(tci-web-logo.jpg) no-repeat;
}


#main{
width:900px;
}

#blackbox{
width:900px;
height:530px;
padding-bottom:20px;
border-bottom:1px solid #D3D8D8;
}

#blackboxs{
width:900px;
}


#topcont{
width:900px;
height:480px;
border-top:1px solid #D3D8D8;
padding-top:20px;
padding-bottom:10px;
}

#topcontleft{
width:80px;
float:left;
margin-right:20px;
}

.ie #topcontleft{
width:80px;
float:left;
margin-right:10px;
}

#topcontright{
width:800px;
height:480px;
float:right;
position:relative;

}


/*HOME PAGE*/



#btm{
width:900px;
height:230px;
float:left;
margin:0px 0px 10px 0px;
}

#btmtitle{
width:80px;
margin-right:20px;
float:left;
margin-top:10px;
}

#btmleft{
width:255px;
float:left;
margin-top:10px;
}

#btmmid{
width:255px;
float:left;
padding-left:20px;
margin-top:10px;
}

#btmright{
width:225px;
float:left;
padding-left:20px;
margin-top:10px;
}



/*SERVICES*/
#services{
width:900px;	
height:200px;
}

#services a:hover{
color:#666666;
}

#services ul{
list-style-type: disc;
list-style-image: url(bullet.gif);
}

#sleft{
float:left;
width:280px;
height:180px;
margin:10px 0px 0px 6px;
padding:0px 0px 0px 10px;
}


#smid{
float:left;
width:270px;
height:180px;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 15px;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
}

#sright{
float:left;
width:270px;
height:180px; 
margin:10px 0px 0px 0px;
padding:0px 0px 0px 15px;
}

#send{
float:left;
width:270px;
height:90px;
margin:10px 0px 0px 0px;
padding:80px 0px 0px 15px;
font-size:18px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-transform:uppercase;
}

#stxtl{
float:left;
width:440px;
padding: 0px 0px 0px 5px;
margin-bottom:10px;
}

#stxtr{
float:left;
width:430px;
padding:0px 5px 0px 12px;
}

#stxtr a{
border-bottom:1px solid #666;
}

#stxtr a:hover{
color:#ff00cc;}

#servicel{
float:left;
width:440px;
margin:10px 0px 20px 0px;
}


#servicer{
float:right;
width:440px;
height:320px;
background-color:#FF6600;
margin:10px 0px 20px 0px;
}

.web{
background:url(web-services/website-design-development.jpg);
}

.ecom{
background:url(web-services/ecommerce-website-design.jpg);
}

.cms{
background:url(web-services/cms-blog-design.jpg);
}

.em{
background:url(web-services/email-marketing-newsletters.jpg);
}

.mn{
background:url(web-services/web-site-management.jpg);
}

.ph{
background:url(web-services/photography-northampton.jpg);
}

.hs{
background:url(web-services/web-hosting.jpg);
}

.im{
background:url(web-services/design-imaging-print.jpg);
}

.source{
font-size:10px;
}

.servtxt{
width:250px;
}

#servicel li{
list-style-type: disc;
list-style-image: url(bullet.gif);
margin-top:2px;
}

#servicenav{
width:130px;
height:320px;
float:right;
}


#servicenav ul{
margin-top:0px;
margin-left:-40px;
}

#servicenav li{
list-style:none;
margin-top:4px;
width:130px;
background-color:#FF6600;
text-transform:uppercase;
float:left;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:10px;
border-bottom:1px solid #999;

}

#servicenav a:hover{
color:#333333;
}



/*Pay Monthly*/

#paym{
width:900px;
min-height:550px;
}

#paytop{
width:900px;
height:200px;
}

#paytopl{
width:300px;
height:160px;
margin-top:16px;
float:left;
}

#paytopr{
width:580px;
height:180px;
float:right;
padding-top:5px;	
}


#table{
width:900px;
height:200px;
padding-top:10px;


}

#tablel{
width:560px;
float:left;
margin-top:5px;
border-right:1px dashed #fff;
padding-right:10px;
}

#tabler{
width:300px;
float:right;
text-align:left;
padding-left:20px;
margin-top:5px;

}



#smallprint{
width:900px;
height:230px;
border-top:1px solid #D3D8D8;
margin-top:30px;
}


#spl{
width:300px;
height:160px;
margin-top:16px;
float:left;
}

#spr{
width:550px;
height:190px;
float:left;
margin-top:10px;
margin-left:20px;
}



.ie #smallprint{
width:900px;
height:210px;
border-top:1px solid #D3D8D8;
margin-top:30px;
clear:both;
}


.ie #spl{
width:300px;
height:160px;
margin-top:16px;
float:left;
}

.ie #spr{
width:550px;
height:190px;
float:right;
margin-top:10px;
margin-left:10px;
}




#tabcap{
text-align:left;
margin-left:5px;
}

#pages{
width:120px;
height:20px;
padding:5px;
background:url(pay-monthly-websites/website-pay-monthly-bg.jpg);
text-align:center;
}

#hosting{
width:120px;
height:20px;
padding:5px;
background:url(pay-monthly-websites/website-pay-monthly-bg.jpg);
text-align:center;
}

#email{
width:180px;
height:20px;
padding:5px;
background:url(pay-monthly-websites/website-pay-monthly-bg.jpg);
text-align:center;
}

#cost{
width:120px;
height:20px;
padding:5px;
background:url(pay-monthly-websites/website-pay-monthly-bg.jpg);
text-align:center;
}

/*End Pay Monthly*/



/*Location Pages*/

#locservicenav{
width:130px;
height:300px;
float:right;
}


#locservicenav ul{
margin-top:0px;
margin-left:-40px;
}

#locservicenav li{
list-style:none;
margin-top:4px;
width:130px;
background-color:#FF6600;
text-transform:uppercase;
float:left;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:11px;
border-bottom:1px solid #999;

}

#locservicenav a:hover{
color:#333333;
}

#locbtm{
width:900px;
height:190px;
float:left;
margin:0px 0px 10px 0px;
}

#locbtm a{
color:#FFF;
}

#locbtm a:hover{
text-decoration:underline;
}


#locbtmleft{
width:285px;
float:left;
margin-top:10px;
}

#locbtmmid{
width:285px;
float:left;
padding-left:25px;
margin-top:10px;
}

#locbtmright{
width:275px;
float:left;
padding-left:25px;
margin-top:10px;
}



/*PORTFOLIO*/

#portcont{
width:900px;
height:180px;
margin-bottom:5px;
margin-top:20px;
}	

#portcont ul{
list-style:none;
padding:0px;
margin:0px;
}

#pleft{
float:left;
width:285px;
height:180px;
margin:0px 5px 0px 0px;
padding:0px 0px 0px 5px;
background-color:#222;
}

#pleft a:hover{
color:#FF00CC;
}

#pmid{
float:left;
width:285px;
height:180px;
margin:0px 5px 0px 0px;
padding:0px 0px 0px 5px;
background-color:#222;
}


.ie #pmid{
float:left;
width:288px;
height:180px;
margin:0px 5px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#222;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
 
#pmid a:hover{
color:#FF00CC;
}

#pright{
float:left;
width:285px;
height:180px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
background-color:#222;
}

#pright a:hover{
color:#FF00CC;
}

/*OPACITY PORTFOLIO NAV*/

div.OFF{
float:left;
width:295px;
height:180px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

}

div.ON{
float:left;
width:295px;
height:180px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
opacity:.50;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}

/*END OF PNAV*/


#pweb{
width:900px;
height:310px;
border-top:1px solid #FFFFFF;
}

#pwtxt{
float:left;
width:260px;
height:290px;
padding:10px 0px 10px 0px;
}

#pwimg{
float:left;
width:620px;
height:290px;
padding:10px 0px 10px 20px;
}

#pphoto{
width:900px;
height:200px;
border-top:1px solid #FFFFFF;
}

#pptxt{
float:left;
width:260px;
height:190px;
padding:10px 0px 0px 0px;
}

#pptxt a{
color:#FFFFFF;
}

#pptxt a:hover{
color:#666666;
}

#ppimg{
float:left;
width:620px;
height:190px;
padding:10px 0px 0px 20px;
}

#ppimgl{
float:left;
width:200px;
height:180px;
margin:0px 5px 10px 0px;
}

#ppimgm{
float:left;
width:200px;
height:180px;
margin:0px 5px 10px 0px;
}

#ppimgr{
float:left;
width:200px;
height:180px;
margin:0px 5px 10px 0px;
}

#ppgtitle{
width:900px;
border-top:1px solid #FFFFFF;
}

#ppgallery{
width:900px;
height:500px;
margin-bottom:10px;
}

p.top{
font-size:10px;
padding:5px 0px 0px 2px;
text-transform:uppercase;
}

p.top a:hover{
color:#FF00CC;
}

p.link{
font-size:12px;
padding:0px 0px 0px 2px;
}

p.link a:hover{
color:#FF00CC;
}


/*CONTACT PAGE STUFF*/
#contactl{
float:left;
width:245px;
margin:20px 40px 40px 0px;
}

#contactl a:hover{
color:#FF00FF;
}

#contactr{
float:left;
width:580px;
border:2px solid #121212;
margin:20px 0px 40px 5px;}

#tact{
width:900px;
height:360px;
float:left;
margin:10px 0px 0px 0px;
border-bottom:2px dashed #666;
}

#tactl{
width:270px;
height:320px;
float:left;
margin-top:0px;
padding-right:15px;
padding-left:18px;
}

#tactm{
width:270px;
height:320px;
float:left;
padding-left:15px;
padding-right:15px;
margin-top:0px;
border-left:2px dashed #666;
border-right:2px dashed #666;
}

#tactr{
width:270px;
height:320px;
float:left;
padding-left:15px;
margin-top:0px;
}

.tacttitle{
font-size:14px;
}

#tact li{
list-style:none;
font-size:14px;
}


/*END OF CONTACT PAGE*/



/*FOOTER STUFF*/
#footer{
width:900px;
height:80px;
border-top:1px solid white;
clear:both;
color:#FFFFFF;
}

#footer a{
color:#000000;
}

#footer a:hover{
color:#666666;}

.copy{
margin-top:0px;
text-transform:uppercase;
float:left;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:9px;
clear:both;
width:100px;
}

#footerl{
float:left;
width:210px;
background-image:url('map-northamptonshire.png');
background-repeat:no-repeat;
background-position:right top;
}

.ie #footerl{
float:left;
width:210px;
background-image:url('');
}

#footernav{
width:340px;
float:right;
}

.ie #footernav{
width:360px;
float:right;
}

ul#fnav{
list-style:none;
padding: 0px;
font-size:10px;
text-transform:uppercase;
float:left;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin-left:20px;
}


.ie ul#fnav{
list-style:none;
padding: 0px;
font-size:10px;
text-transform:uppercase;
float:left;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin-left:20px;
}



ul#fnav a{
text-decoration:none;
padding:0 0 3px;
color:#FFF;
}

ul#fnav a#current{
border-color:#F60;
color:#06F;
}

ul#fnav a:hover{
border-color:#F60;
color:#666
}

ul#flnav{
list-style:none;
padding: 0px;
font-size:9px;
text-transform:uppercase;
float:left;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin-left:0px;
}

.ie ul#flnav{
list-style:none;
padding: 2px 0px;
font-size:8px;
text-transform:uppercase;
float:left;
font-family:'Lucida Grande', sans-serif;
margin-left:0px;
}




ul#flnav a{
text-decoration: none;
padding: 0 0 3px;
color: #FFF
;
}


.ftitle{
font-size:14px;
margin-bottom:5px;
}

.ie .ftitle{
font-size:14px;
margin-bottom:2px;
}

.on{
text-decoration:underline;
}

/*MAINNAV*/
ul#nav{
list-style:none;
padding:0px;
text-align:left;
font-size:16px;
word-spacing:72px;
text-transform:uppercase;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
float:left;
margin-top:60px;
}

.ie ul#nav{
list-style: none;
padding: 0px;
text-align:left;
font-size:18px;
word-spacing:72px;
text-transform:uppercase;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
float:left;
margin-top:60px;
margin-left:0px;
}


ul#nav li{
display:inline;
margin:0px 0px;
}

ul#nav a{
text-decoration:none;
padding:0 0 3px; 
color:#FFF;
}

ul#nav a#current{
border-color:#F60;
color:#06F;
}

ul#nav a:hover{
color:#666;
}

a:link, a:hover, a:active{
color:#FFFFFF;
}

a:visited{
color:#FFFFFF;
}


h1{
font-size:18px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

h2{
font-size:16px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-transform:uppercase;
font-weight:400;
margin-bottom:-10px;
}

h3{
font-size:14px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-transform:uppercase;
font-weight:400;
margin-bottom:5px;
}

.ie h2{
font-size:16px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-transform:uppercase;
}

.ie h3{
font-size:14px;
font-family:'Gill Sans','Lucida Sans Unicode','Lucida Grande', sans-serif;
text-transform:uppercase;
margin-bottom:5px;
}


h4{
padding-left:12px;
font-size:14px;
color:#FFFF00;
letter-spacing:5px;
text-transform:uppercase;
margin-left:-2px;
}

name{
font-size:14px;
font-family:'Gill Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-transform:uppercase;
}

a{
color:#990000;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}	




/*SLIDER*/
	pre{
		display:block;
		font:12px 'Courier New', Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:800px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
	#scontainer{	
		margin:0px auto;
		position:relative;
		text-align:left;
		width:800px;		
		margin-bottom:2em;
		padding-top:10px;
		}
		
				
		#loccontainer{	
		float:left;
		margin-left:15px;
		position:relative;
		text-align:left;
		width:700px;		
		margin-bottom:2em;
		padding-top:10px;
		}	
		
		#slideright{
		float:right;
		width:170px;
		position:relative;
		margin-top:10px;
		margin-right:12px;
		}
		
		.ie #slideright{
		float:right;
		width:170px;
		position:relative;
		margin-top:10px;
		margin-right:0px;
		}
		
			
		#content{
		position:relative;
		}			

/*Slider*/

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:800px;/*696px;*/
		height:300px;/*241px;*/
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#FF6600;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}