﻿/*
Created for Keytracker Limited 2008
Developed By Jason Marks
All Rights Reserved.
jasonm@keytracker.co.uk
*/

/* 
===============================
Main body styling 
===============================
*/
body {
font-family: Arial; 
height: 100%;
}
/*
===============================
IMAGES
===============================
*/
img{
border: 0px;
}
/*
===============================
CONTENT
===============================
*/
/*
MAIN PAGE DIV
*/
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	min-width: 700px; /* min width set to enable scroll bars when window width is less than page width  */
	width:100%; /* set to 100% to enable the blue image to stretch to end of page  */
	min-height:100%; /* min height set to enable scroll bars when window height is less than page height  */
	height: 100%; /* set to 100% to enable the image to stretch to end of window  */
	overflow: visable; /* hide page content, stop the flow of content onto scrollbars  */
}
/*
Main top bar with keytracker logo in top left
*/
#Key-Tracker-Site-Home-image-ready-sliced-01 {
	background: url(../images/Key-Tracker-Site-Home_image.gif);
	position:absolute;
	left:0px;
	top:0px;
	width:846px;
	height:124px;
}

/* Horizontal repeat image for browser resize */
#Key-Tracker-Site-Home-image-ready-sliced-02 {
	background: url(../images/Key-Tracker-Site-Home_im-02.gif);
	position:absolute;
	left:846px;
	top:0px;
	min-width: 50px;
	width:100%;
	height:84px;
	overflow: hidden;
}

/* Top navigation bar with online shop and home links, with flags */
#topnav{
position: absolute;
top: 13px;
left: 450px;
color: #ffffff;
font-size:0.78em;
text-align:right;
}

/* Top nav anchor attribute styling */
#topnav a{
text-decoration: none;
color: #ffffff;
}


#topnav span{
font-size:1.00em;
}

/*
=========================================
SEARCH
=========================================
*/
#search{
position: absolute;
top: 45px;
left: 565px;
width: 400px;
height: 600px;
color: #ffffff;
font-size: 0.9em;
z-index: 100001;
}

#input_wrapper {
	padding-left: 25px;
    width: 300px;
    height: 35px;
    background: url(../images/search.gif) no-repeat top left;
}

/* Input search classes */
input.search {
    width: 147px;
    height: 20px;
    background: transparent;
    border: 0;
    padding: 5px 10px;
    margin: 0;
} 

input.search2 {
    width: 147px;
    height: 25px;
    background: transparent;
    border: 0;
    padding: 5px 10px;
    margin: 0;
} 

.searchbutton{
background-image:url(../images/search_go.gif);
border: 0px;
width: 56px;
height: 30px;
}

.searchbutton2{
background-image:url(../images/search_go.gif);
border: 0px;
width: 56px;
height: 30px;
margin-left: 20px;
}



/* Search Results Page */
#searchresults{
position: absolute;
top: 120px;
left: 300px;
width: 500px;
}

/* 
===========================================
Left Column 
===========================================
*/
#Key-Tracker-Site-Home-image-ready-sliced-03 {
	background: url(../images/lbg2.gif) no-repeat;
	position:absolute;
	top:124px;
	width:259px;
	height:508px;
}
/* End Left Col */

#verticalrepeat{
position: absolute;
top: 620px;
background: url(../images/lbg222.gif) repeat-y;
width: 269px;
height: 100%;
overflow: hidden;
}

/*
==============================
Welcome To Keytracker
==============================
*/

#welcome {
	position:absolute;
	left:219px;
	top:124px;
	width:340px;
	height:94px;
	font-size: 1em;
	font-weight: bold;
	color: #003377;
}

.mtitle01 {
	position: relative;
	left:30px;
}
	
.mtitle02 {
	position: relative;
	left:30px;
}	

.mtitle03 {
	position: relative;
	top:10px;
	left:75px;
}

.mtitle04 {
	position: relative;
	top:20px;
	left:120px;
}

/* Right hand top cabinet picture */
#frontcabinet {
	position:absolute;
	left:630px;
	top:105px;
	width:264px;
	height:203px;
}


/*Blue box background left col */
#leftbluebox {
	background: url(../images/Key-Tracker-Site-Home_im-06.gif);
	position:absolute;
	left:285px;
	top:300px;
	width:290px;
	height:270px;
}

/*Blue box background left col */
#leftbox {
	position:absolute;
	left:285px;
	top:290px;
	width:4000px;
	height:300px;
}

/* Blue box content */
#content{
	position:absolute;
	left:10px;
	top:20px;
	width:260px;
	height:233px;
	font-size: 0.75em;
	color: #003377;
}

#content h2{
	font-size: 1.2em;
	font-weight: bold;
	color: #003377;
}

/* POTM image */
#POTM {
	background: url(../images/summersale.png);
	position:absolute;
	left:560px;
	top:300px;
	width:250px;
	height:270px;
}

/* POTM text */
#POTM2 {
	background: url();
	position:absolute;
	left: 260px;
	top:0px;
	width:250px;
	height:270px;
}

/* Latest News Box */
#newsbox {
	background: url();
	position:absolute;
	left:285px;
	top:580px;
	width:218px;
	height:270px;
}

#shoplink {
	
	position:absolute;
	left:600px;
	top:500px;
	width:220px;
	height:50px;
	font-size: 0.90em;
	color: #003377;
	}
	
.cart
{
position:absolute;
}

.cartlink
{
position:absolute;
left:70px;
}

#newscontent{
	position:absolute;
	left:17px;
	top:15px;
	width:268px;
	height:233px;
	font-size: 0.75em;
	color: #003377;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#newscontent a{
text-decoration: none;
color: #003377;
}

#newscontent h3{
padding: 0 0 0 0;
margin: 0 auto;
font-size: 1.2em
}

ul.news {
margin: 0;
padding: 0;
position: relative;
top: 10px;
left: -8px;
width: 200px;
list-style: none;
list-style-position: outside;

}

ul.news li{
padding-left: 12px;
background-image: url(../images/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
margin-left:0px;
list-style-position: outside;
padding-bottom: 5px;
}


/*Online shop link, bottom left */
#onlineshoplink {
	background: url(../images/smile.png) no-repeat;
	position:absolute;
	left:330px;
	top:565px;
	width:150px;
	height:118px;
	margin-top: 40px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.options{
color: #003377;
font-weight: bold;
position: absolute;
top: -25px;
}

.options a{
text-decoration: none;
color: #003377;
}

.optionstext{
position: absolute;
left: 90px;
font-size: 0.8em;
color: #003377;
width: 100px;
z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.optionstext a{
text-decoration: none;
color: #003377;
}

#promolink {
	background: url(../images/trailer2.png) no-repeat;
	position:absolute;
	left:145px;
	top:605px;
	width:140px;
	height:118px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.optionstextpromo{
position: absolute;
left: 90px;
font-size: 0.8em;
color: #003377;
width: 80px;
z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.optionstextpromo a{
text-decoration: none;
color: #003377;
}

/* Product Of The Month */
#potmlink {
	background: url(../images/trailer11.png) no-repeat;
	position:absolute;
	left:530px;
	top:605px;
	width:140px;
	height:118px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

/* Product Of The Month xmas*/
#potmlinkxmas {
	background: url(../images/xmas.png) no-repeat;
	position:absolute;
	left:520px;
	top:605px;
	width:150px;
	height:118px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#feedlink {
	background: url(../images/thanks.png) no-repeat;
	position:absolute;
	left:720px;
	top:605px;
	width:160px;
	height:118px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.optionstextfeed{
position: absolute;
left: 90px;
font-size: 0.8em;
color: #003377;
width: 100px;
z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.optionstextfeed a{
text-decoration: none;
color: #003377;
}

#ordernow {
	position:absolute;
	left:-400px;
	top:70px;
	width:600px;
	height:180px;
	z-index:0; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}
	
/*
===================================================
MAIN PRODUCT PAGE
===================================================
*/

#productstitle {
	position:absolute;
	left:269px;
	top:82px;
	width:470px;
	height:93px;
}

#productintro {
	position:absolute;
	left:269px;
	top:180px;
	width:545px;
	height:102px;
	color: #003377;
	font-size: 0.9em;
	padding-left: 11px;
	padding-top: 10px;
}

#productintroB {
	position:absolute;
	left:269px;
	top:130px;
	width:545px;
	height:102px;
	color: #003377;
	font-size: 0.9em;
	padding-left: 11px;
	padding-top: 10px;
}

#productintro3 {
	position:absolute;
	left:269px;
	top:220px;
	width:560px;
	height:102px;
	color: #003377;
	font-size: 0.9em;
	padding-left: 11px;
	padding-top: 10px;
}

/*
===================================
product box A
===================================
*/
#productboxa {
	position:absolute;
	background: url(../images/productbox.gif);
	left:277px;
	top:270px;
	width:241px;
	height:157px;
}


/*
==========================================
Product Box B
==========================================
*/
#productboxb {
	position:absolute;
	background: url(../images/productbox.gif);
	left:540px;
	top:270px;
	width:241px;
	height:157px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}


/*
==========================================
Product Box C
==========================================
*/

#productboxc {
	position:absolute;
	background: url(../images/productbox.gif);
	left:275px;
	top:440px;
	width:241px;
	height:157px;
}


/*
==========================================
Product Box D
==========================================
*/
#productboxd {
	position:absolute;
	background: url(../images/productbox.gif);
	left:542px;
	top:440px;
	width:241px;
	height:157px;
}

/*
============================================
Product Box Classes
============================================
*/

.titlebox{
position: relative;
top: 5px;
padding-left: 80px;
font-size: 0.8em;
color: #ffffff;
text-align: center;
}

img.product{
padding-left: 22px;
padding-top: 13px;
}


/*
=================================
Nav
=================================
*/

.menu {
position: absolute;
top: 150px;
z-index:100;
font-family: Arial;
font-size:0.78em;
height:235px;
width: 270px;
margin:15px 0px 0px 0px; /* this page only */
z-index:0;
}

li.menu1{
background: url(../images/list-off.gif);
padding-left:30px;
height:36px;
}

li.menu2top{
background: url(../images/menu2top.jpg);
height: 30px;
padding-top: 10px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

li.menu2mid{
background: url(../images/menu2.gif);
height: 33px;
padding-top: 7px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

li.menu2bot{
background: url(../images/menu2bot.jpg);
height: 33px;
padding-top: 7px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

/* 3rd level menu */
li.menu3top{
background: url(../images/menu3top.png);
height: 30px;
padding-top: 10px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

li.menu3bot{
background: url(../images/menu3bot.png);
height: 33px;
padding-top: 7px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

/* news level menu */
li.menunewstop{
background: url(../images/menu3top.png);
height: 30px;
padding-top: 10px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

li.menunewsbot{
background: url(../images/menu3bot.png);
height: 33px;
padding-top: 7px;
padding-left: 25px;
width: 134px; /* IE7 relies on the width to be specified */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:159px;
height:182px;
position:relative;
}

* html .menu li {margin-left:-16px; margin-left:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:1; font-size:1em; width:0; height:0;}

/* style the links */
.menu a.menu1,.menu a.menu1:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:134px;
color:#ffffff;
text-indent:5px;
}

.menu a.menu2,.menu a.menu2:visited{
color: #666666;
text-decoration:none;
}

/* style the link hover - first menu */
* html .menu a.menu1:hover {background: url(../images/list-active.gif); margin-left: -30px; padding-left: 30px; width: 138px; height: 35px;}

/* style the link hover - second menu */
* html .menu a.menu2:hover {color:#000000;  margin-left: -30px; padding-left: 30px; width: 136px; height: 35px;}

/*FF hover class on anchor/list elements */
.menu a.menu2:hover{
color: #000000;
}

/* menu level 1 hover class */
.menu .menu1:hover > a {
color:#ffffff; 
background: url(../images/list-active.gif);
margin-left: -30px;
padding-left: 30px;
width: 138px;
height: 35px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,.menu ul a:hover ul {
visibility:visible;
height:235px;
position: absolute;
top: -50px;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
position: relative; /* Absolute positioning to position this menu in align with the word mechanical */
top: -27px; /* 76 pixels from the top of the previous menu, aligns with the word mechanical */
left: 130px;

}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
  visibility:visible;
}

/*
================================================
Product Info Page
================================================
*/
#title_product {
	position:absolute;
	left:266px;
	top:83px;
	width:359px;
	height:130px;
}

#productintro2 {
	position:absolute;
	left:269px;
	top:210px;
	width:400px;
	height:102px;
	color: #003377;
	font-size: 0.9em;
	padding-left: 11px;
	padding-top: 10px;
}

#productintro2.comp{
margin-top: -20px;
}

#xmaspic {
	position:absolute;
	left:700px;
	top:120px;
	width:220px;
	height:145px;
	/*z-index: 99999;*/
}

#trailerpic1 {
	position:absolute;
	left:650px;
	top:100px;
}

#trailerpic11 {
	position:absolute;
	left:380px;
	top:-100px;
}

#trailerpic111 {
	position:absolute;
	left:400px;
	top:70px;
}

#trailerpic2 {
	position:absolute;
	left:625px;
	top:227px;
	width:220px;
	height:146px;
}

#animatedgif{
position: absolute;
top: 210px;
left:635px;
}

#features_heading {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:280px;
	width:359px;
	height:39px;
}
#features_headingB {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:200px;
	width:359px;
	height:39px;
}

#features_heading2 {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:410px;
	width:359px;
	height:39px;
}

#features_heading3 {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:520px;
	width:359px;
	height:39px;
}

/*heading classes*/
.features{
color: #ffffff;
font-size: 0.8em;
font-weight: bold;
position: relative;
top: 10px;
left: 30px;
height: 30px;
}

.benefits{
color: #ffffff;
font-size: 0.8em;
font-weight: bold;
position: relative;
top: 10px;
left: 30px;
}
/*End Heading Classes*/

#product_info {
	position:absolute;
	left:266px;
	top:300px;
	width:370px;
	height:94px;
	font-size: 0.8em;
	color: #003377; /* All text to Keytracker Blue */
}

#product_info.comp{
text-align: justify;
color: #003377;
margin-left: 15px;
margin-top: -10px;
color: #003377; /* All text to Keytracker Blue */
}

/* Used for IE6 to position ul correctly */
#product_info ul{
margin-top: 15px;
}

#buy_price {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-11.gif);
	left:625px;
	top:373px;
	width:190px;
	height:43px;
	color: #003377;
	font-size: 0.8em;
	font-weight: bold;
	padding-top: 17px;
	padding-left: 15px;
	text-align: center;
}

#rent_price {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-11.gif);
	left:625px;
	top:410px;
	width:160px;
	height:33px;
	color: #003377;
	font-size: 0.7em;
	font-weight: bold;
	padding-top: 16px;
	padding-left: 30px;
	text-align: center;
}

.terms{
position: relative;
top: 5px;
left: 30px;
font-family: Arial;
font-size: 0.8em;
color: #000000;
z-index: 100001;
}

.terms a{
text-decoration: none;
color: #000000;
}

#benefits_heading {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:460px;
	width:359px;
	height:38px;
}

#benefits_heading2 {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-09.gif);
	left:266px;
	top:490px;
	width:359px;
	height:38px;
}

#buy_button {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-14.gif);
	left:625px;
	top:469px;
	width:221px;
	height:36px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#buy_button a{
position: relative;
top: 7px;
left: 73px;
color: #ffffff;
text-decoration: none;
font-size: 0.8em; 
}

#product_info2{
	position:absolute;
	left:266px;
	top:490px;
	width:359px;
	height:91px;
	font-size: 0.8em;
	color: #003377; /* All text to Keytracker Blue */
}

#product_info3{
	position:absolute;
	left:266px;
	top:530px;
	width:359px;
	height:91px;
	font-size: 0.8em;
	color: #003377; /* All text to Keytracker Blue */
}

/* Used for IE6 to position ul correctly */
#product_info2 ul{
margin-top: 15px;
}

#order_form_download{
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-16.gif);
	left:625px;
	top:505px;
	width:221px;
	height:44px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#order_form_download a{
	position: absolute;
	top: 10px;
	left: 70px;
	width: 110px;
	line-height: 1.2em;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.8em;
}

#product_info_download {
	position:absolute;
	background: url(../images/Key-Tracker-Site-Product-17.gif);
	left:625px;
	top:549px;
	width:220px;
	height:55px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#product_info_download a{
	position: absolute;
	top: 12px;
	left: 70px;
	width: 110px;
	line-height: 1.2em;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.8em;
}

/*
==================================
COMPANY OVERVIEW
==================================
*/
#companyoverviewtext {
	position:absolute;
	left:285px;
	top:190px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
}

#testimonial {
	position:absolute;
	left:285px;
	top:300px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
}

#topfeed{
	position:absolute;
	left:270px;
	top:175px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 1em;
}

#portfolio li.quote{
	position:absolute;
	left:70px;
	top:0px;
	width:500px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 1em;
}

#bsISO9001 {
	position:absolute;
	left:885px;
	top:190px;
	font-size:10pt;
	text-align:center;
	font-weight:bold;
}
#InvestorInPeople {
	position:absolute;
	left:880px;
	top:340px;
}

.quote2{
	position:absolute;
	left:100px;
	width: 340px;
}

.quote3{
	position:absolute;
	left:160px;
	width: 300px;
}

#portfolio li.quote4{
	position:absolute;
	left:50px;
	top:0px;
	width:500px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 1em;
}

#portfolio2 li.quote4{
	position:absolute;
	left:70px;
	top:-220px;
	width:500px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 1em;
}

.quote4{
	position:absolute;
	left:0px;
	width: 320px;
}

#quote1 {
	background: url(../images/quote1.png) no-repeat;
	position:absolute;
	left:330px;
	top:175px;
	width:150px;
	height:118px;
	margin-top: 40px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

#quote2 {
	background: url(../images/quote2.png) no-repeat;
	position:absolute;
	left:820px;
	top:175px;
	width:150px;
	height:118px;
	margin-top: 40px;
	z-index:100001; /* Temporary fix for new FireFox 3.5, z-index has been added to enable the links to work */
}

.address{
font-size: 1em;
font-weight: bold;
background: url(../images/address.jpg) no-repeat;
padding-left: 20px;
}

.conumber{
font-size: 1em;
font-weight: bold;
background: url(../images/bullet.gif) no-repeat;
padding-left: 20px;

}

.vatnumber{
font-size: 1em;
font-weight: bold;
background: url(../images/bullet.gif) no-repeat;
padding-left: 20px;

}

.tel{
font-size: 1em;
font-weight: bold;
background: url(../images/con_tel.jpg) no-repeat;
padding-left: 20px;

}

.fax{
font-size: 1em;
font-weight: bold;
background: url(../images/con_fax.jpg) no-repeat;
padding-left: 20px;
}

.email{
font-size: 1em;
font-weight: bold;
background: url(../images/e-mail_icon.jpg) no-repeat;
padding-left: 20px;
}

/* Image align classes */
      .align-right { float:right; margin: 0 0 15px 15px; }
      .align-left { float:left; margin: 5px 15px 15px 0px; }

/*
===============================================
AJAX CONTACT FORM
===============================================
*/
#form_box {
	width: 520px;
	background: #f8f8f8;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	padding: 0.5em;
	margin-top: 0px;
	margin-bottom: 2px;
	top: 100;
}
 
#form_box div {
	padding: 0.2em 0.5em;
}
 
#form_box div.hr {
	border-bottom: 2px solid #e2e2e1;
	height: 0px;
	margin-top: 0pt;
	margin-bottom: 7px;
}
 
#form_box p {
	float: left;
	margin: 4px 0pt;
	width: 120px;
}

#log {
	width: 520px;
	margin-top: 12px;
	height:25px;
}

#log_res.ajax-loading {
	padding: 12px 0;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}

span.alert{
	color: #c00;
	border-top: 3px solid #fe7b7a;
	border-bottom: 3px solid #fe7b7a;
	background: #FFD6D6 url(../images/status-alert.png) 10px 50% no-repeat;
	padding-left: 45px;
}

span.info{
	color: #0055BB;
	border-top: 3px solid #629de3;
	border-bottom: 3px solid #629de3;
	background: #D8E5F8 url(../images/status-info.png) 10px 50% no-repeat;
	padding-left: 45px;
}

/* 
==========================================================
Live validation styling 
==========================================================
*/
.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
}
	
.LV_invalid {
    color:#CC0000;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}

/*
===============================================
Product Of The Month Page
===============================================
*/

#potmtext{
	position:absolute;
	left:282px;
	top:230px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
}

#potmtext2{
	position:absolute;
	left:282px;
	top:450px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
}

#potmtext3{
	position:absolute;
	left:282px;
	top:560px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
}

#potmtextsun{
	position:absolute;
	left:282px;
	top:320px;
	width:550px;
	height:378px;
	color: #003377;
	font-family: Arial;
	font-size: 0.8em;
	}

/*for the summer sale delete after september*/
#cabinet{
	position:relative;
	left:230px;
	top: 0px;
}	
	
#keybox {
	position:relative;
	left:230px;
	top: 0px;
}
	
#dropbox{
	position:relative;
	left:230px;
	top: 0px;
}	
	
/*
===================================
search keys box
===================================
*/
#searchkeys{
position: absolute;
top: 160px;
left: 380px;
}

/*
==================================
Customer Testimonials Page
==================================
*/
/* Testominal text styling information */
#testimonialtext{
width: 600px;
text-align: justify;
}

#testimonialtext2{
Position: absolute;
text-align: justify;
top: 130px;
Left: 335px;
Width: 270px;
}

/* Testimonial logo styling information */
#testimoniallogo{
position: absolute;
top: 0px;
left: 415px;
}

/*
================================
Download Page
================================
*/

#downloadfiles{
	position:absolute;
	left:266px;
	top:320px;
	width:400px;
	height:39px;
}

/* Download files image class for alignment */
.download{
padding-right: 10px;
}

/* download link class */
.downloadlink{
position: relative;
top: -5px;
font-size: 0.8em;
color: #003377;
text-decoration: none;
}

#iconlegend{
position: absolute;
top: 0px;
left: 370px;
width: 200px;
padding: 10px 10px 10px 10px;
font-size: 1em;
}

/*
=============================
Enter Details Software
=============================
*/
#enterdetails{
	position:absolute;
	left:280px;
	top:340px;
	width:400px;
	height:39px;
}

.inputform{
border: 1px dashed;
height: 15px;
color: #333333;
padding: 5px 5px 5px 5px;
}

.inputform1{
position: relative;
left: 70px;
}

form.details{
position: absolute;
left: 130px;
}

/*
=============================
Industry Sector Page
=============================
*/

 #industry{
	position:absolute;
	left:285px;
	top:190px;
	width:320px;
	height:378px;
	color: #003377;
	text-align: justify;
	font-size: 0.8em;
 }
 
 /*
 =======================
 KeyFinder
 =======================
 */
 
 #keyfinder{
 position: absolute;
 top: 280px;
 left: 285px;
 color: #003377;
 width: 500px;
 }
 
 .active{
 color: green;
 font-weight: bold;
 }
 
 .keyfinderresult{
 font-size: 0.9em;
 }
 
 .notfound{
 color: red;
 font-weight: bold;
 }
 
 .found{
 color: green;
 font-weight: bold;
 }
 
 #adminlogin{
 position: absolute;
 top: 140px;
 left: 280px;
 color: #003377;
 width:500px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 }
 
 #admincontent{
 position: absolute;
 top: 250px;
 left: 285px;
 color: #003377;
 }
 
 /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 height:250px; 
 
 width: 450px;

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}


/*
===========================
Sitemap
===========================
*/
#sitemap{
position: absolute;
top: 615px;
left: 40px;
color: #ffffff;
font-size: 0.8em;
font-weight: bold;
color:black;
}

#sitemap a{
color: #ffffff;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;
color:black;

}

#sitemap li{
color: #ffffff;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;
color:black;

}

#sitemap ul{
color: #ffffff;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;
color:black;

}







#container {
margin:0 auto;
width:760px;
position:relative;
}
/* Change the top and left to position the content */
#lightbox_content {
position:absolute;
width:514px;
height:250px;
background: #ffffff;
border:5px solid #000;
top:132px;
left:237px;
z-index: 999;
}
/* This is a clear div over the content, make sure the width is the same as your container */
#lightbox_container {
width:760px;
margin:0 auto;
position:relative;
z-index:100;
}
/* Close form button, can be link or image */
a#close_form {
color:#000000;
position:relative;
z-index:999;
top:-45px;
left:400px;
width:75px;
height:25px;
}
/* Adjust overlay opacity below */
#overlay {
position:absolute;
top:0;
left:0;
z-index:99;
width:100%;
height:100%;
background:#000;
}

.callme1{
position: relative;
top: 20px;
left: 160px;
font-weight: bold;
font-size: 1.4em;
}

form.callme{
position: absolute;
top: 70px;
left: 50px;
}

form.callme label{
	float:left;
	width:10em;
	text-align:right;
	margin-right:1em;
	font-weight: bold;
	margin-top: 5px;
	font-size: 0.9em;
	color: #000000;
}

form.callme input{
margin: 3px 3px 3px 3px;
}

form.callme input.callmesub{
position: relative;
top: -5px;
left: 190px;
}


.about{
position: relative;
top: 0px;
left: 160px;
font-size: 0.6em;
}



#slideshow{
position: absolute;
top: 220px;
left: 300px;
width: 600px;
height: 600px;
}

#introslideshow{
position: absolute;
top: 150px;
left: 300px;
}

/*ADMIN LOGIN */
#adminlogin{
position: absolute;
top:170px;
left: 280px;
}

#adminlogin1{
position: absolute;
top:170px;
left: 280px;
}

label.admin{
	float:left;
	width:10em;
	text-align:right;
	margin-right:1em;
	font-weight: bold;
	margin-top: 8px;
	font-size: 0.9em;
	color: #000000;
}

input.admin{
	padding:0.15em;
	width:20em;
	padding-top: 5px;
	padding-left: 5px;
	height: 1.2em;
	margin-top: 5px;
	margin-bottom: 5px;
	border:1px solid #ddd;
	background:#fafafa;
	font: 0.8em arial;
}

textarea.admin{
	padding:0.15em;
	width:20em;
	padding-top: 5px;
	padding-left: 5px;
	height: 8em;
	margin-top: 5px;
	margin-bottom: 5px;
	border:1px solid #ddd;
	background:#fafafa;
	font: 0.8em arial;
}

.date{
position: relative;
top: 7px;
left: 0px;
}

input.admin1{
position: relative;
top: 0px;
left: 375px;
}

#adverts{
position: absolute;
top: 280px;
left: 280px;
}



.map{
position: absolute;
top: 80px;
left: 230px;
}

/*=================================
			Survey Css
==================================*/

.survey {
position:relative;
top:80px;
left:20px;

}


.style1 {
	margin-left: 17px;
	margin-bottom: 6px;
}
.style2 {
	font-size: x-small;
}
.style3 {
	text-align: center;
}
.style4 {
	margin-left: 0px;
	margin-right: 5px;
}


/*===================
Clock
===================*/

#time{
position: relative;
top: 6px;
left: 0px;
}

#socials{
position: absolute;
top: 500px;
left: 0px;
}

.tel1{
font-weight: bold;
position: relative;
top: 8px;

}

/*================================
Search area
==================================*/

#search_area{
position: relative;
width: 500px;
padding-left: 280px;
padding-top: 80px;
}

#search_form{
position: relative;
width: 500px;
padding-left: 200px;
padding-top: 35px;
z-index:10001;
}
