﻿body{font-family:Arial,Helvetica,sans-serif;background-color: #fff;margin:0;padding:0;}
body,p,td{font-size:1em;font-family:Arial,Helvetica,sans-serif;}


table{border:0;padding:0;margin:0;border-collapse:collapse;font-size:100%;}
sup{line-height:0;vertical-align:text-top;}
a img {border:0;}
a{color:#3C3E75;text-decoration:none;}
a:hover{color:#CC3333;text-decoration:underline;}
h1,h2,h3,h4,h5,h6{padding:0;margin:0 0 0.5em 0;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none;}
h1{color:#c51015;font-size:140%;margin-bottom:0.6em;font-weight:normal;font-weight:bold;}
h2{color:#c51015;font-size:140%;margin:0.2em 0 0.9em 0;font-weight:normal;}
h3{color:#600;font-size:90%;margin-bottom:0.9em;font-weight:bold;}
h4{color:#600;font-size:120%;margin-bottom:0.9em;}
h5{color:#645644;font-size:100%;margin-bottom:0.9em;}
h6{color:#333;font-size:80%;margin-bottom:0.2em;font-weight:normal;}



blockquote{margin:10px 30px;}

#wrapper{width:90%;margin:0 auto;}
#header{margin:15px 0 0 0;padding:0;}
#header h1#logo span{display: none; margin:0;padding:0;}
#header h1#logo{
    width:314px;height: 36px; /* width and height of the replacement image */
    background: transparent url("../img/layout/computerstore-logo.gif") no-repeat;
    margin:0 0 0 10px;padding:0;
}

.message 
{
	background-color:#FFF8CF;
	border:1px solid #648DA2;
	line-height:16px;
	margin:10px 30px 10px 0pt;
	max-width:440px;
	padding:8px 10px;
}

img.silk { float:left; height:16px; margin:0pt 5px 0pt 0pt; padding:0pt; position:relative; width:16px; }

/* Top Menu CSS Images */
#topmenu{float:left;margin-top:8px;}
#topmenu ul{list-style-type:none;padding:0;margin:10px 0 0 0;}
#topmenu ul li{float:left;font-size:12px;font-weight:bold;background-color:#3c3e75;padding:4px 8px;margin:0 1px 0 0;}
#topmenu ul li a{color:#FFFFFF;font-family:Verdana,Arial,Helvetica,sans-serif;text-decoration:none;}
#topmenu ul li a:hover{color:#FFFFFF;font-family:Verdana,Arial,Helvetica,sans-serif;text-decoration:underline;}  
#topbar 
{
	clear:both;
	background-color:#fff;
	height:31px;
	border:solid 1px #9A9A9A;
	border-top:solid 1px #000;
	padding:0;margin:0;
}
#topbarinner 
{
	clear:both;
	background: transparent url("../img/layout/topbar-bgd.gif") repeat-x top left;
	height:29px;
	border:solid 1px #fff;
	padding:4px 2px 2px 2px;
	margin:0;
}
#topbarinner a 
{
	color:#666666;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:10px;
	text-decoration:none;
}
#topbarinner a:hover{color:#CC3333;text-decoration:underline;}

#registerlogin {float:right;margin:2px 4px 4px 4px;padding:0;}

input.searchbox
{
	border-bottom-color:#9C9A9C;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-left-color:#9C9A9C;
	border-left-style:solid;
	border-left-width:1px;
	border-right-color:#9C9A9C;
	border-right-style:solid;
	border-right-width:1px;
	border-top-color:#9C9A9C;
	border-top-style:solid;
	border-top-width:1px;
	color:#666666;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	height:14px;
	padding-left:4px;
}



#basketitems {float:right;margin-top:15px;}
#basketitems span img {vertical-align:bottom;}
#basketitems span a
{
color:#3C3E75;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
#basketitems span a:hover{color:#CC3333;text-decoration:underline;}
#quantity {margin-right: 10px;}
#prodimg {float:right;}

/* content */

#content p{padding:0 16px 0 16px;}
#content{
	background: #C4C5C9 url("../img/layout/main_bg.jpg") repeat-x top left;
	margin:10px 0 0 0;padding:0;
	clear:both;
	}

/* inside pages */
#leftpanel{width:152px;padding:0;margin:0 0 10px 0;float:left;border:solid 1px #9A9A9A;background-color:#fff;}
.cattop {clear:left;padding:3px;margin:0;background: #C4C5C9 url("../img/layout/sidebar-bgd.gif") repeat-x top left;border:solid 1px #fff;height:16px;color:#000000;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;}
.cattop img {padding:0 5px 0 1px;}

#leftpanel #categories 
{
	width: 150px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	padding:0;
	font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;
	background-color: #fff0c1;
	color: #333;
}
#leftpanel #categories ul {list-style:none;margin:0;padding:0;border: none;}
#leftpanel #categories ul li {border-bottom: 1px dotted #AA9D7A;margin: 0;}
#leftpanel #categories ul li a {display: block;
		padding: 2px 2px 2px 15px;
		background: #fff0c1 url(../img/layout/arw_nv_left.gif) no-repeat 3px 6px;
		color:#3C3E75;
		text-decoration: none;
		width: 100%;
		}
#leftpanel #categories ul li a img {padding:3px 5px 7px 0;margin:0;vertical-align:baseline;float:left;}
html>body #leftpanel #categories ul li a {
		width: auto;color:#3C3E75;
		}
#leftpanel #categories ul li a:hover 
{
	background-color: #FFF9E6;
	color:#CC3333;
}
#rightpanel{width:152px;padding:0;margin:0;float:right;}

#thebasket{width:152px;padding:0;margin:0;border:solid 1px #9A9A9A;background-color:#fff;}
#thebasket #basket {background-color: #fff0c1;color:#CC3333;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;padding:4px 4px 4px 5px;}
#thebasket #baskettotal {color:#000;}
#thebasket #basketno {color:#000;}
#thebasket #gstinfo {background-color: #fff0c1;border-top: 1px solid rgb(204, 51, 51); border-bottom: 1px solid rgb(204, 51, 51); padding: 5px; color: rgb(102, 102, 102); font-weight: bold;font-size:11px;}
#thebasket #accountinfo {padding: 5px; color: rgb(102, 102, 102); font-weight: bold;font-size:11px;}
#thebasket .registerlogin {font-weight: normal;font-size:11px;padding-bottom:4px;}

#customerservice{width:152px;padding:0;margin:10px 0 0 0;border:solid 1px #9A9A9A;background-color:#fff;}

#rightpanel #thepages 
{
	width: 150px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	padding:0;
	font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;
	background-color: #fff;
	color: #333;
}
#rightpanel #thepages  ul {list-style:none;margin:0;padding:0;border: none;}
#rightpanel #thepages  ul li {border-bottom: 1px dotted #AA9D7A;margin: 0;}
#rightpanel #thepages  ul li a {display: block;
		padding: 2px 2px 2px 0.4em;
		background-color: #fff;
		color:#3C3E75;
		text-decoration: none;
		width: 100%;
		}
#rightpanel #thepages  ul li a img {padding:3px 5px 7px 0;margin:0;vertical-align:baseline;float:left;}
html>body #rightpanel #thepages  ul li a {
		width: auto;color:#3C3E75;
		}
#rightpanel #thepages  ul li a:hover 
{
	background-color: #FFF9E6;
	color:#CC3333;
}

#filters{width:152px;padding:0;margin:10px 0 0 0;border:solid 1px #9A9A9A;background-color:#fff;}

#rightpanel #thefilters 
{
	width: 150px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	padding:0;
	font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;
	background-color: #fff;
	color: #333;
}
#rightpanel #thefilters  ul {list-style:none;margin:0;padding:0 0 0 5px;border: none;}
#rightpanel #thefilters  ul li {border-bottom: 1px dotted #AA9D7A;margin: 0;padding:4px 0;}
#rightpanel #thefilters  ul li input {margin-left:-1px;}








#hotspecials{width:152px;padding:0;margin:10px 0 0 0;border:solid 1px #9A9A9A;background-color:#fff;}
#hotspecials #thespecials{font-family:Arial,Helvetica,sans-serif;font-size:11px;padding:5px;}
#hotspecials #thespecials .special{border-bottom: 1px dotted #AA9D7A;padding:0 0 7px 1px;margin-bottom:5px;}
#hotspecials #thespecials .special .sptitle{font-weight:bold;width:145px;}
.spdesc{color:#000;}
#hotspecials #thespecials .special .spimg{float:right;padding:0 5px;}
#hotspecials #thespecials .special .spmanu{color:#666666;font-size:10px;width:145px;}
#hotspecials #thespecials .special .sponline{width:100px;font-size:13px;font-weight:bold;white-space:nowrap;padding-right:3px;}
#hotspecials #thespecials .special .spprice{width:50px;font-size:13px;font-weight:bold;color:#CC0000;}
#hotspecials #thespecials .special .spview{width:145px;}
#hotspecials #thespecials .special .spview img{padding-top:5px;}
#hotspecials #thespecials .special .gstincl {color:#666;}
#hotspecials #thespecials .special .gstexcl {color:#666;display:none;}
#hotspecials #listspecials img {padding-right:3px;}
#hotspecials .cattop {color:#CC3333;}

#advertising {text-align:center;padding:10px;}


#maincontent {margin:0 165px 0 165px;}


.homeclear {clear:both;}
#homebanner {
	background: #fff url("../img/layout/background.jpg") no-repeat top right;
	height:100px;
	padding:8px;
}

#featuredproducts h2 
{
	margin-top:30px;
	color:#CC3333;
	font-family:Arial,Helvetica,sans-serif;
	font-size:15px;
	font-weight:bold;
	border-bottom: 1px dotted #AA9D7A;	
}


#featuredproducts {font-family:Arial,Helvetica,sans-serif;font-size:11px;padding:5px;}
#featuredproducts .featuredl {padding:0 5px 7px 1px;margin-bottom:5px;float:left;width:48%;}
#featuredproducts .featuredr {padding:0 0 7px 11px;margin-bottom:5px;float:left;width:46%;border-left: 1px dotted #AA9D7A;}
#featuredproducts .featuredl .sptitle, #featuredproducts .featuredr .sptitle {font-weight:bold;}
#featuredproducts .featuredl .spimg, #featuredproducts .featuredr .spimg {float:right;padding:5px 5px 0 5px;}
#featuredproducts .featuredl .spmanu, #featuredproducts .featuredr .spmanu {color:#666666;font-size:10px;}
#featuredproducts .featuredl .sponline, #featuredproducts .featuredr .sponline {font-size:13px;font-weight:bold;white-space:nowrap;padding-right:3px;color:#990000;}
#featuredproducts .featuredl .spprice, #featuredproducts .featuredr .spprice {font-size:13px;font-weight:bold;color:#CC0000;}
#featuredproducts .featuredl .spview img, #featuredproducts .featuredr .spview img{padding-top:5px;}
#featuredproducts .featuredl .gstincl, #featuredproducts .featuredr .gstincl {color:#666;}
#featuredproducts .featuredl .gstexcl, #featuredproducts .featuredr .gstexcl {color:#666;display:none;}
#featuredproducts .dividerh {border-bottom: 1px dotted #AA9D7A;float:left;width:99%;margin:0 0 10px 0;padding:0;height:2px;}
#featuredproducts .featuredbrand { padding:0 5px 7px 1px;margin-bottom:5px; float:left; width: 23%; height:60px; text-align: center;}
#featuredproducts .featuredbrand a { height:60px;display:block;}

#credit{text-align:center;padding-bottom:5px;}
#credit, #credit a{font-size:11px;color:#bbb;text-decoration:none;font-family:"Trebuchet MS"}
/* footer */
#footer{text-align:center;padding:10px 10px 0 10px;color:#fff;font-size:11px;font-weight:bold;clear:both;margin:0 0 0 0;background: url(../img/layout/footer-line.gif) repeat-x top;}

#breadcrumb {font-size:10px;color:#aaa;float:right;margin-right:30px;}
#breadcrumb a {color:#aaa;text-decoration:none;}
#breadcrumb a:hover {color:#444;text-decoration:underline;}

td { vertical-align:top; }
th { vertical-align:top; }
.form td { padding: 2px 4px; margin: 0;margin-bottom: 15px;}
.grid td.key, .form td.key { font-weight: bold;}
.form textarea { width: 400px; height: 100px; }
.use-option {display: block;white-space: nowrap;white-space: normal;font-size: .9em;}
.use-option label { white-space: nowrap;}

/* -----[ productDetails ]--------------------------------------------------------------------- */


.priceBig{
	font-size:22px;
	color:#e80000;
	font-family: Verdana, sans-serif;
}
.productDetails {
	width: 98%;
	margin-bottom: 5px;
}

.productDetails td.info  {
	width:150px;
	padding-right: 10px;
}

img.productImage{
	margin-bottom:15px;
}

input.quantity, .productDetails td.info input.quantity {
	width: 22px;
	font-size: 12px;
	text-align: right;
}

.productDetails td.info td  {
	width:auto;
	vertical-align: top;
}

.productDetails td.description, .productDetails td.info  
{
	vertical-align: top;
}

.productDetails td.description
{
	padding: 5px;
}

.productDetails td.description div.brand
{
	float: right;
	margin-left: 8px;
}

/* 
/// HACK: Due to poorly formed input HTML this hack has been requested. Now all list items (ordered as well) get a bullet :( */
.productDetails td.description li
{
	list-style: url(../img/icons/bullet.gif) outside square;
	margin-left: 20px;
	padding-bottom: 5px;
	line-height: 14px;
}

.productDetails a.magnify
{
	color: #666;
	display: block;
	line-height: 17px;
	text-decoration: none;
	text-transform: lowercase;
}
.productDetails a.magnify:hover
{
	color: #000;
}
.productDetails a.magnify img
{
	opacity: .7;
}
.productDetails a.magnify:hover img
{
	opacity: .99;
}


/* -----[ grid ]--------------------------------------------------------------------- */

.grid {
	width: 98%;
	margin-bottom: 5px;
	margin-top: 10px;
}
.grid a {
	text-decoration:none;
}
.grid th {
	padding: 5px 3px;
	color: #083a7d;
}
.grid td {
	padding: 4px 3px;
	vertical-align: top;
	border-top: 1px solid #b0bee1;
}
.grid td.end{
	border:0;
}

/* -----[ form ]--------------------------------------------------------------------- */
.form .text { width: 200px; }

/* -----[ category ]----------------------------------------------------------------- */
.category { width: 100% }

.category .even {background-color: #F3F3F3;}
.category .price { width: 50px; text-align:right;}
.category .btn { width: 70px; }
.categoryGrid { width: 100%; }

/* -----[ basket ]----------------------------------------------------------------- */
.basket { width: 95%; }
.basket th { color:#fff; background-color: #3C3E75; font-weight: bold; }
.basket .even {background-color: #F3F3F3;}
.basket .price { width: 70px; }
.basket .btn { width: 70px; }

/* -----[ address ]----------------------------------------------------------------- */
.address { width: 100%; margin-bottom: 10px; }
.address td {margin-right: 10px; padding: 10px; border:1px solid #000; }
.sbox {margin-top:1px;}
#registerlogin .adv-search {margin-top:4px;}