﻿/*<!--*/
body  {
    font: 62.5% Verdana, Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    color: #000000;
}
.thrColLiqHdr #container {
    width: 100%;  /* this will create a container 100% of the browser width - change if you want but looks best at 100% */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
}


.thrColLiqHdr #sidebar1 {
    float: left;
    width: 190px;
}
.thrColLiqHdr #sidebar2 {
    float: right;
    width: 180px;
    background: #fff;
    padding: 10px 0;
}
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
    margin-left: 10px;
    margin-right: 10px;
}


/* to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images). */


.thrColLiqHdr #mainContent {
    margin: 10px 10px 0 10px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
}

.thrColLiqHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    border-top:#99cc33 1px solid;
    margin-top: 20px;
}
.thrColLiqHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*-->*/

/*end of essential*/
   
    /*=======================Just for looks===========================*/
        body {
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
        }
   
        .accessibility {
        position: absolute;
        width: 600px;
        left: -5000px;
        }
		.center {
			margin: 0 auto;
			display: block;
		}
        /* Breadcrumbs ========================================================= */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
   
        ul li {
            list-style-type: none;
        }
   
        .thrColLiqHdr #bcumbs {
            font-size: 1.3em;
            margin: 5px 10px;
        }
        #bcumbs ul {
            padding: 6px 10px;
            float: left;
        }
       
        #bcumbs ul li {
            display: inline;
        }
        #bcumbs ul li a {
            text-transform: capitalize;
            color: #fff;
        }
        #bcumbs p#unilink {
        /*
            float: right; ========================================================= */
            color: #fff;
            padding: 6px 10px;
            text-align: right;
        }
        #bcumbs p#unilink a:link, #bcumbs p#unilink a {
            text-decoration: underline;
            color: #775a5c;
        }
        #bcumbs p#unilink a:hover {
            text-decoration: none;
            color: #fff;
        }
        /*header ========================================================= */
        #header {
            background: #333 url(images/head_bg.gif) right bottom no-repeat;
            padding: 0 0 0 10px;
            border-bottom: #99cc33 5px solid;
             
        }
        #header #fac h1 a {
            background-image: url(images/logo.gif);
            background-repeat: no-repeat;
            height: 84px;
            width: 205px;
            float: left;
            margin: 24px 0 0 0;
			display: block;
        }
 	#header #fac h1 a span {
            width: 100px;
            position: absolute;
            left: -9999px;
            }
        #header #log h2, p#byline {
            position: absolute;
            left: -9999px;
            width: 500px;
        }
        #header #spacer {
            height: 50px;
    }
	#mainContent dl {
	margin: 10px 0 0 10px;
	font-size: 1.2em;
}
#mainContent dt {
	font-weight: bold;
}
#mainContent dd {
	margin: 0 0 5px 15px;
	border-bottom: 1px solid #999;
	font-weight: lighter;
}

ul#nav,ul#nav li{list-style-type:none; font-size: 1.2em; text-align: center;}
ul#nav{margin: 10px auto 0 auto; float: left;}
ul#nav li{float:left;margin-left: 1px;text-align: center;}
ul#nav a{float:left;padding: 5px 8px;background: #666; text-decoration:none;color: #dcdcdc}
ul#nav a:hover{background: #99cc33;color: #333;}
ul#nav li.activelink a,ul#nav li.activelink a:hover {background: #99cc33;color: #333}
ul#nav li.first a:hover {background: #99cc33 url(images/top_left_corner.gif) no-repeat left top; color: #333}
ul#nav li.last a:hover {background: #99cc33 url(images/top_right_corner.gif) no-repeat right top; color: #333}
ul#nav a span {display: block; text-align: center;}
ul#nav li.last a {background: #666 url(images/top_right_corner.gif) no-repeat right top;}
ul#nav li.first a {background: #666 url(images/top_left_corner.gif) no-repeat left top;}
ul#nav li.activelink a {
background-color: #99cc33 !important; }
     
       
        ul#topop, div#search {
            float: right;
            font-size: 1.2em;
            padding: 4px 20px 4px 0;
            background: #99cc33 url(images/topop_bg.gif) no-repeat left bottom;
        }
        ul#topop li {
            float: left;
            margin: 0 0 0 20px;
        }
        ul#topop li a, .submenu ul li a {
            color: #333;
            text-decoration: none;
        }
        ul#topop li a:visited, .submenu ul li a:visited {
            color: #333;
            text-decoration: none;
        }
        ul#topop li a:hover, .submenu ul li a:hover {
            text-decoration: underline;
        }
        ul#topop li a:active, .submenu ul li a:active {
            color: #fff;
			background-color: #333;
        }
        div.submenu {
    background: #99cc33;
   padding: 3px 0 3px 0;
    }
  
        
      #submenuList, #submenuList ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#submenuList a {
	display: block;
	
	background: #99cc33;
	padding-left: 11px;
	
	}

#submenuList li { /* all list items */
	float: left;
	/*width: 8em; /* width needed or else Opera goes nuts */
  
    text-transform: capitalize;
}
#submenuList ul li {
width: 12em;
}

#submenuList .topRow {
font-size: 1.3em;
}

#submenuList li ul { /* second-level lists */
	position: absolute;
	background: #99cc33;
	width: 12em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#submenuList li:hover ul, #submenuList li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	text-align: left;
	padding-top: 2px;
}

#submenuList li.sfhover ul li a, #submenuList li:hover ul li a {
padding-top: 3px;
border-top: 1px solid #C4ED73;
padding-bottom: 3px;

}

       
        div#search {
            background: #666 url(images/search_bg.gif) no-repeat right bottom;
            padding-right: 50px;
        }
       
        /* Left Column ========================================================= */
        .thrColLiqHdr #sidebar1 {
            background: #fff;
            padding: 0 10px 20px 0;
            margin-bottom: 20px;
        }
        .thrColLiqHdr #sidebar1 img, .thrColLiqHdr #sidebar2 img  {
            margin: 10px 0 5px 10px;
        }
        .main_nav li, ul#quicklinks li {
            list-style-type: none;
            border-bottom: 1px solid #99cc33;
            padding: 1px 0 4px 10px;
            font-size: 1.2em;
            margin-bottom: 5px;
            display: block;
            text-transform: capitalize;
        }
        .main_nav li a, ul#quicklinks li a {
        display: block;
        text-decoration: none;
        color: #333;
        }
        .main_nav li a:hover, ul#quicklinks li a:hover {
            text-decoration: underline;
        }
        .main_nav li a em {
            text-decoration: underline;
            font-style: normal;
        }
        .sub_menu2 {
            margin: 0 0 0 14px;
            padding: 0 0 0 14px;
            font-size: 1.1em !important;
            background: url(images/dot.gif) no-repeat left center;
        }
		.sub_menu3 {
            margin: 0 0 0 20px;
            padding: 0 0 0 20px;
            font-weight: lighter;
            font-size: 1.0em !important;
            background: url(images/dot.gif) no-repeat left center;
        }
        ul.main_nav, ul#quicklinks {
            margin: 10px 0 20px 0;
        }
        ul#quicklinks {
            margin-top: 10px;
        }
        input#search {
            width: 140px;
            margin: 0 5px 0 10px;
            padding: 2px;
            color: #333;
        }
        .tbSearch {
            width: 140px;
            margin: 0 5px 0 10px;
            padding: 2px;
            color: #333;
        }
		input {
			 border: 1px solid #666;
		}
		#searchbox 
		{
			width: 250px;
			float: right;
		}
        #searchbox label {
            display: none;
        }
        input#gobtn {
            border: none;
            background-color: #99cc33;
            color: #333;
            padding: 1px;
        }
        .btnGo {
            border: none;
            background-color: #99cc33;
            color: #333;
            padding: 1px;
        }
        #quickbtn a {
            width: 180px;
            height: 19px;
            background: url(file:///Macintosh%20HD/Users/tomcavill/Documents/Web%20Sites/ics/img/quicklinks.gif) no-repeat;
            margin-top: 16px;
            display: block;
        }
       
        #quickbtn p {
            display: none;
        }
        #quickbtn a:hover {
            background: url(file:///Macintosh%20HD/Users/tomcavill/Documents/Web%20Sites/ics/img/quicklinks.gif) no-repeat 0 -19px;
            width: 180px;
            height: 19px;
            display: block;
        }
        /* Right Column ========================================================= */
        .thrColLiqHdr #sidebar2 {
            background: #f0f0f0;
            margin: 10px;
            padding: 10px;
        }
       
        .thrColLiqHdr #sidebar2 h4, .thrColLiqHdr #sidebar1 h4 {
            font-size: 1.3em;
            border-bottom: 1px solid #999;
            margin: 15px 0 5px 0;
        }
        .thrColLiqHdr #sidebar1 h4 {
            margin-left: 10px;
        }
        .thrColLiqHdr #sidebar2 h4#top {
            margin-top: 0;
        }
       
        .thrColLiqHdr #sidebar2 p.featuredp {
            float: left;
            width: 60px;
            margin: 0;
            font-size: 1.2em;
            }
        .thrColLiqHdr #sidebar2 p.featuredp strong {
            font-size: 1.4em;
            }
        .thrColLiqHdr #sidebar2 img.featuredp {
            float: left;
            margin: 10px 5px 5px 0;
            }
        ul.r_men li, ul.feedback li {
            list-style-type: none;
            font-size: 1.2em;
            text-align: left;
            padding: 8px 0;
            border-bottom: 1px dotted #99cc33;
            display: block;
        }
        ul.feedback li { 
            background: url(images/pos.gif) no-repeat left 8px;
            padding: 8px 0 8px 16px;
        }
        ul.r_men {
        margin: 0 0 15px 0;
        text-transform: capitalize;
        }
        #mainContent a, #mainContent a:link, ul.r_men li a, ul.r_men li a:link, #footer a, #footer a:link, .thrColLiqHdr #sidebar2 p.featuredp a, a:link {
            color: #333;
            text-decoration: underline;
        }
        #mainContent a:visited, ul.r_men li a:visited, #footer a:visited, .thrColLiqHdr #sidebar2 p.featuredp a:visited, a:visited {
            text-decoration: underline;
            color: #333;
        }
       
        #mainContent a:hover, ul.r_men li a:hover, #footer a:hover, .thrColLiqHdr #sidebar2 p.featuredp a:hover, a:hover {
            text-decoration: underline;
        }
        #mainContent a:active, ul.r_men li a:active, #footer a:active, .thrColLiqHdr #sidebar2 p.featuredp a:active, a:active {
            text-decoration: none;
            background-color: #333;
            color: #fff;
        }
        
        .featured2 a, .featured2 a:visited, .featured2 a:hover, .featured2 a:active, .home_featured a, .home_featured a:visited, .home_featured a:hover, .home_featured a:active
        {
            text-decoration: none;
        }
        /* Centre Column ========================================================= */
        ul#courses  li {
            text-transform: uppercase;
            color: #666;
            list-style-type: none;
            font-size: 2.3em;
            display: inline;
            text-align: justify;
        }
        ul#courses  li span {
            color: #333;
        }
        ul#courses {
            margin: 0 0 15px 0;
        }
        #mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent h5, #mainContent h6, #mainContent p, #footer p {
        margin-bottom: 5px;
        font-weight: lighter;
        }
       
        #mainContent p {
            font-size: 1.2em;
            line-height: 1.6em;
            margin-bottom: 1.0em;
        }
        #mainContent h1 {
            font-size: 2.5em;
        }
        #mainContent h2 {
            font-size: 2.0em;
        }
        #mainContent h3 {
            font-size: 1.8em;
        }
        #mainContent h4 {
            font-size: 1.6em;
        }
        .pSpecialOffers
        {
        	height: 75px;
        }
        .h3SpecialOffers 
        {
			font-size: 1.8em;
            height: 55px;
		}
        .pLowerFeature
        {
        	height: 100px;
        }
        .h4LowerFeature 
        {
			font-size: 1.6em;
            height: 75px;
		}
        .floatimgleft {
            float:left;
            margin-top:10px;
            margin-right:10px;
            margin-bottom:10px;
        }
       
        .floatimgright {
            float:right;
            margin-top:10px;
            margin-left:10px;
            margin-bottom:10px;
        }
        .banner {
            width: 100%;
            height: 140px;
            background: #99cc33 url(images/table_bg.gif) no-repeat left center;
            margin: 0 0 15px 0;
        }
        .banner #ggf h2 {
            width: 200px;
            position: absolute;
            left: -9999px;
        }
        .banner #ggf {
        float: right;
        width: 183px;
        height: 125px;
        margin: 0 15px 0 0;
        background: url(images/GGF.gif) no-repeat left bottom;
        }
        #mainContent .fours a, #mainContent .twos a {
        background: #99cc33 url(images/buy_bg.gif) no-repeat right bottom;
        padding: 10px 5px 2px 5px;
        margin: 0 5px 10px 5px;
        width: 140px;
        text-align:center;
        display: block;
        text-decoration: none;
        float: left;
        }
       
        #mainContent .twos a {
        width: 280px;
        text-align:left;
        }
        #mainContent .twos p {
        font-weight: lighter;
        }
        #mainContent .twos p strong {
        display: block;
        }
   

       
       
        /* search ========================================================= */
        ol.searchres {
            list-style-position: inside;
        }
        ol.searchres li h3 {
        display: inline;
        }
       
        /* ads ========================================================= */
       
        .home_ads_container {
        width: 27%;
        float: right;
        }
        div#mainContent .home_ads_container .home_ads a {
            padding: 12px 1px 3px 7px;
            float: right;
            width: 100%;
            background: #fbf5e9 url(file:///Macintosh%20HD/Users/tomcavill/Documents/Web%20Sites/ics/img/view.gif) no-repeat 95% -1px;
            clear: right;
            color: #d90134;
            margin: 0 0 0 30px;
            display: inline;
            margin: 8px 0 0 0;
            text-decoration: none;
            border-top: 2px solid #666;
        }
        div#mainContent .home_ads_container .home_ads a:hover .home_ads a:visited {
            color: #fbf5e9;
            border-top: 2px solid #333;
            text-decoration: none;
            display: block;
            background: #d90134 url(file:///Macintosh%20HD/Users/tomcavill/Documents/Web%20Sites/ics/img/view2.gif) no-repeat 95% -1px;
           
        }
        /*div#mainContent .home_ads_container .home_ads a:visited {
            color: #666;
        }*/
        div#mainContent .home_ads_container .home_ads p {
        line-height: 1.4em;
        margin-bottom: 3px;
        }
       
     /* Four and two columns on homepage */
  .ProductImages {
  clear: both;
  height: 150px;
  display: block;
  padding-top: 5px;
  }
  

  
  .productTitles a {
  font-size: 1.1em !important;
  }
  
.featured1, .featured2 {
    width: 24%;  
    float: left;
    text-align: center;
    }
    
    .featured1 img, .featured2 img {
        /*margin: 0 auto;
        display: block;*/
        padding: 2px;
        border: 1px solid #999;
    }
.featured2 {
    width: 48%;
   float: left;
    }
div.cols_container {
	border-bottom: 1px solid #999;
	margin: 0 0 10px 0;
}

div#mainContent div.featured1 p, div#mainContent div.featured2 p {
    margin-bottom: 4px;
    }
   
    .featured1 h4.moreinfo, .featured2 h4.moreinfo, .featured1 h4.addtocart, .featured2 h4.addtocart, .featured1 h4.addtocartunavailable, .featured2 h4.addtocartunavailable {
        margin: 0 auto;
        width: 100px;
    }

.home_featured {
    background: #ebebeb url(images/featured_bg.gif) right bottom no-repeat;
    border: 2px solid #ccc;
    color: #333;
    padding: 5px;
    margin: 0 0 10px 0;
}
.home_featured span, .cat_list span {
    float: right;
    margin: 0 15px 0 0;
    text-align: right;
}
.cat_list {
    border-bottom: 1px solid #ebebeb;
    margin: 0 10px 10px 0;
    padding: 10px 0;
    min-height: 100px;
    clear: both;
}
.home_featured img, div#gallery img {
    padding: 2px;
    border: 1px solid #999;
}

/* =================ROLLOVER BUTTONS=====================*/
    h4.moreinfo a {
        background: url(images/moreinfo.gif) no-repeat;
        width: 100px;
        height: 34px;
        display: block;
        }
        h4.moreinfo a:hover {
        background: url(images/moreinfo.gif) no-repeat left -34px;
        }
        h4.moreinfo span {
        width: 100px;
        position: absolute;
        left: -9999px;
        }

    .thrColLiqHdr #sidebar2 h4.moreinfosmall, .thrColLiqHdr #sidebar1 h4.moreinfosmall
    {
    	border: 0px;
    }
    h4.moreinfosmall a {
        background: url(images/moreinfosmall.gif) no-repeat;
        width: 65px;
        height: 22px;
        display: block;
        float: left;
        }
        h4.moreinfosmall a:hover {
        background: url(images/moreinfosmall.gif) no-repeat left -22px;
        }
        h4.moreinfosmall span {
        width: 65px;
        position: absolute;
        left: -9999px;
        }
        
    .thrColLiqHdr #sidebar1 .price, .thrColLiqHdr #sidebar2 .price
    {
    	float: right;
    	font-weight: bold;
    }
		
				   h4.addtocart a {
				background: url(images/addtocart.gif) no-repeat;
				width: 100px;
				height: 34px;
				display: block;
				}
				h4.addtocart a:hover {
				background: url(images/addtocart.gif) no-repeat left -34px;
				}
				h4.addtocart span {
				width: 100px;
				position: absolute;
				left: -9999px;
				}
   
				h4.addtocartunavailable a {
				background: url(images/addtocartunavailable.gif) no-repeat;
				width: 100px;
				height: 34px;
				display: block;
				}
				h4.addtocartunavailable a:hover {
				background: url(images/addtocartunavailable.gif) no-repeat left -34px;
				}
				h4.addtocart span {
				width: 100px;
				position: absolute;
				left: -9999px;
				}
   
            h4.addto a {
            background: url(images/addtobasket.gif) no-repeat;
            width: 140px;
            height: 34px;
            display: block;
            }
            h4.addto a:hover {
            background: url(images/addtobasket.gif) no-repeat left -34px;
            }
            h4.addto span {
            width: 100px;
            position: absolute;
            left: -9999px;
            }
			
					 h4.conf a {
					background: url(images/confirm.gif) no-repeat;
					width: 140px;
					height: 34px;
					display: block;
					margin: 0 auto;
					}
					h4.conf a:hover {
					background: url(images/confirm.gif) no-repeat left -34px;
					}
					h4.conf span {
					width: 100px;
					position: absolute;
					left: -9999px;
            		}
   
   
    div#mainContent h2.prod_head {
    border-bottom: 1px solid #99cc33;
    margin: 0 0 15px 0;
    font-weight: bold;
    }
   
    /* Shopping Basket */
.basket ul, .basket li {
    list-style-type: none;
    font-weight: normal;
}
.basket li ul, .basket p#tot {
    border-bottom: 1px solid #999;
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
}
div#sidebar1 .basket img {
    margin: 0;
    display: inline;
    padding: 0;
}
.basket p#tot {
    color: #333;
    font-size: 1.1em;
    font-weight: normal;
    }
   
.basket {
  background-color: #ebebeb;
  margin: 15px 0 10px 10px;
  padding:10px;
  border: 1px solid #99cc33;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}
.basket {
    margin-top: 5px;
}


   
    div#im_gal {
    margin: 10px 0 0 0;
    }
    div#im_gal img {
    float: left;
    margin: 5px 15px 5px 0;
    }
    /*tech specs*/
    ul#tech {
    margin: 0 0 0.9em 0;
    }
    ul#tech li {
        background: url(images/bullet.gif) no-repeat 3px 0.5em;
        padding: 0.3em 0 0.3em 25px;
        margin: 0 0 0.4em 20px;
        border-bottom: 1px #ebebeb solid;
        display: block;
        font-size: 1.2em;
        font-weight: lighter;
    }
    ul#tech li:hover {
        background: #ebebeb url(images/bullet2.gif) no-repeat 3px 0.5em;
    }
   
    div.featuredInfo 
    {
    	margin-left: 224px;
    }
    
    img.featuredImg {
        float: left;
        margin-right: 10px;
    }
   
    div.featuredMoreInfo {
        float: right;
        width: 100px;
        text-align: right;
       
        _float: none;
        _width: auto;
    }
   
    div.clearme {
        clear: both;
    }
    
    .lv_bullets li 
    {
    	font-size: 1.3em;
    	font-weight: normal;
    	line-height: 19px;
    	
    }
	
	.sortby p {
		background:#99CC33 none repeat scroll 0%;
		padding:4px;
		text-align:right;
	}
	.sortby select {
		border: 1px solid #333;
		vertical-align: middle;
		width: 250px;
	}
	
	.pager 
	{
		float: left;
        font-size: 1.2em;
        line-height: 1.6em;
		padding: 0px;
		text-align: left;
	}
	.pager pPager
	{
		margin: 0px 0px 3px 0px;
	}
	.pager span 
	{
		font-weight: bold;
		color: #D90134;
	}
	
	div.col_cat {
		float: left;
		width: 49%;
		
	}
	div.col_cat#leftcol {
		margin: 0 10px 0 0;
		border-right: solid 1px #ebebeb;
	}

div.btn_bg {
	background:transparent url(images/btn_bg.gif) no-repeat scroll center top;
	padding:5px 0pt;
}
	
#gallery {
  border: #666 1px solid;
  background: #ebebeb;
  padding: 10px;
  margin: 0 0 10px 0;
 }
#productImage {
  border: #666 0px solid;
  padding: 10px;
  margin: 0 0 10px 0;
 }
 div#mainContent #gallery .bigimg, #productImage .bigimg {
  text-align: center;
  margin: 0 auto 10px auto;
  display: block;
 }
div#mainContent #gallery li {
	  float: left;
	  margin: 0 10px 0 0;
 }
 div#mainContent #gallery ul {
  display: block;
 }
 
 .home_featured img, div#gallery img {
border:1px solid #999999;
padding:2px;
}

/* Email Friend */
#divEmailFriend 
{
	margin: 10px 10px 10px 10px;
}

#divEmailFriend h2
{
	color: #010066;
}
