body {background: #fff url(../img/bodybg-black.jpg) top left repeat-x; font:normal 100%/1.5 arial, helvetica, verdana, sans-serif; padding:0px; margin:10px 20px;}
* {padding:0; margin:0;}/*first zero everything so we're on a level browser playing field*/
#bgimage{ min-width:840px;}
a {color: #000;}
a:hover {color: #000;}
a img{border:none;}
p {color:#000; margin-bottom:5px;}
h1 {font-size: 1.4em; color:#333; }
h2 {font-size:1.2em; color:#566F9C;}
h3 {font-size:1.15em; color:#000;}
h4 {font-size:1.1em; color:#333; margin-bottom:.6em;}

/*-------useful classes---------- */
.shhh{display:none;}
.small{font-size: .8em !important;}
.big {font-size: 1.4em !important;}
.clear, br.clear{clear:both; font-size:1px; border:none; background:transparent; overflow:hidden; margin:0px;}
.l{float:left;}
.centerit{display:block; margin:0 auto; text-align:center;}
.r{float:right;}
.pad{padding:5px 15px;}
.it {font-style:italic;}
strong{font-size:1.4em;}

/* ----------Some main structure -------------- */
.wrapper { margin: 3px 5px; padding: 0;}
.main { width: 100%; margin: 0; padding: 0;}
.content {float:right; width:75%; background:#fff; margin-right:15px; padding-bottom:5px; margin-top:14px;}
.sidebar {padding:15px;margin-right:76%;}
.sidebar h2, .sidebar h3, .sidebar p{margin:10px;}

/*------------top nav----------*/
.topnav{ border:1px solid #333; background: url(../img/bg-nav-black.jpg) left top repeat-x; height:23px; margin:0; padding:5px;}
.topnav ul{margin:0; padding:0; list-style-type:none; }
.topnav ul li{float:left;}
.topnav a{font-size: 1.3em;  color:#fff; text-decoration:underline; display:block; float:left; height:23px; width: auto; padding:0 15px; }
.topnav a:hover, .topnav a.current{color: #fff; text-decoration:underline;}




div#menu{float:left; background: #ffffff; width:100%; margin:0px; padding:0px;}

/* *****  CHANGE THESE TWO WIDTHS AS YOU ADD AND REMOVE TABS FROM EACH ROW *****/
ul.nav{display:block; width:45em; margin:0 auto; text-align:center;}
/* change stuff above when you add and remove stuff from the nav */

ul.nav, ul.nav li, ul.nav2, ul.nav2 li{list-style-type:none; padding:0;}
ul.nav li, ul.nav2 li{float:left; margin:0 2px 1px 1px; text-align: center;}
ul.nav a, ul.nav2 a{float:left; width: 110px; padding: 5px 0; background: #000; text-decoration:none; color: #fff; font-weight:bold; font-size:12px;}
ul.nav a:hover, ul.nav2 a:hover{background: #fff; color: #000;}
ul.nav li.activelink a,ul.nav li.activelink a:hover, ul.nav2 li.activelink a, ul.nav2 li.activelink a:hover{background: #FFF;color: #000;}



/* ----------banner-------------- */
#banner {background: #fff url(../img/logo-blackwhite.jpg) top left no-repeat; margin:0; padding:5px;}
#banner h1{color:#000; text-align:right; margin:10px;}
#banner h1.top { font-size: 2.5em;}
#banner h2.top { text-align:right; overflow:hidden; margin:0 10px 10px 0;  font-size:1em;}
 

/* ---------input form stuff ------ */
 /*SEARCH*/
 .searchbar{line-height:30px;  background-color:#000; border:1px solid #fff; }
 form.search label{color:#fff !important; font-weight:bold !important; padding:4px; font-size:13px;}
 input.s{color:#000; height:16px; padding:3px; border: 1px solid #fff;}
 input.img{vertical-align:bottom; margin-bottom:3px;}
 .searchbar .r img{padding:1px; vertical-align:middle; border:1px solid #fff;}
 .searchbar .r p{color:#fff; }
 .searchbar p.small{font-size:.7em; color:#fff;}
 
 textarea {color:#000; margin:3px; height:200px; padding: 0 8px; border: 1px solid #000; background: #fafafa;}
 input.button{color:#566F9C; height:1.8em; font-size:1em; border: 1px solid #566F9C; background-color:#EBF7F9; text-decoration:none; text-align:center; margin:0 auto; }

/* -------------contact form-----------*/
.feature{margin:10px; padding:10px; border:1px dashed #000;}
.feature img{float:left;}
.feature h3{ color:#000;}
.feature ul{ margin-left:10px;}
 input.contact1 {font-size:.9em ; color:#000 ; height:12px; padding: 2px 8px; width:142px; border: 1px solid #000;background: #fff;}

 table.contact{border-collapse:collapse; width:500px;}
 table.contact td{padding:4px 2px;}
 input.normfield {border: 1px solid #000; background:#fff;}
 textarea.contact{width:330px;border: 1px solid #000; background: #fff;}
 
/* ----------------maincontent ------------------- */ 
.maincontent{padding:15px; border:1px solid #333;}
p.strong, span.strong{font-weight:bold;} 
.maincontent h1{background-color:#000; color:#fff; line-height:40px; }
.maincontent h1 img{vertical-align:middle;padding-right:15px; }

.onethird{width:31%; float:left; border-right: 1px dotted #000;  border-bottom:1px #000 solid; margin-bottom: 20px; padding:5px; height:310px;}
.onethird h2{color:#000; padding:3px; margin-bottom:5px; margin-left:30px; font-size:18px !important; text-decoration:none; text-align:left; }
.onethird h2 a{color:#000; padding:3px; margin-bottom:5px; margin:0 10px;  margin:0 auto; font-size:18px !important; text-decoration:none;}

  .onethird h2.key{background: url(../img/icon-keyboard.gif) left center no-repeat;}
  .onethird h2.mice{background: url(../img/icon-mouse.gif) left center no-repeat;}
  .onethird h2.furn{background: url(../img/icon-chair.gif) left center no-repeat;}
  .onethird h2.gad{background: url(../img/icon-gadget.gif) left center no-repeat;}
  .onethird h2.access{background: url(../img/icon-accessories.gif) left center no-repeat;}
  .onethird h2.soft{background: url(../img/icon-software.gif) left center no-repeat;}
  .onethird img{display:block; margin-left:40px;}

.onethird ul{ list-style:none; font-size: .9em; padding:0; margin-left:10%; margin-top:7px;}
 .onethird ul li{ padding:0 0 4px 10px; background:url(../img/arrow.jpg) no-repeat left;}
 .onethird ul li a{color:#000 ; font-weight:bold; text-decoration:none;}
 .onethird ul li a:hover{ text-decoration:underline ;}
 
 .spot, .spot2{border: 1px solid #000; padding:5px; margin:1px;min-height:130px; _height:130px; clear:both;}
 .spot img, .spot2 img{float:left; margin-right: 20px;}
 .spot h2, .spot2 h2 {margin-left: 120px; color:#000;}
 .spot p, .spot2 p{margin-left: 120px; font-size:.9em;}
 .spot p.price, .spot2 p.price{font-size:.9em; font-weight:bold; color:#006;}
 .spot p.addtobasket, .spot2 p.addtobasket{ font-size:.9em; text-align:right; font-weight:bold; float:right;padding:5px;}
 
   .spot2{ font-size:.9em;}
   
  a.buy{padding:4px 0px 4px 6px; border:1px solid #000; margin:6px; line-height:21px; text-decoration:none; font-weight:bold; color:#000;}
  a.buy img{padding-left:10px; padding-right:10px; margin:0px; vertical-align:middle; float:none; border:0px;}
  a.buy:hover {color:#fff; background: #000;}
 
 
   /*--------catagories page-------*/
 .catagories h2{color:#000;}
 .catagories .feature{margin:10px; padding:10px; border:1px dashed #000;}
 .catagories .feature img{float:left;}
 .catagories .feature h3{ color:#000; margin-left: 210px;}
 .catagories .feature p {margin-left:210px;}
 
 .catagories .onethird img {float:left;}
 .catagories .onethird p {margin-left:70px;}
 .catagories .onethird a{color:#000; text-decoration:underline; font-weight:bold;}
 .catagories .onethird a p{text-decoration:underline;}
 .catagories .onethird a:hover p{color:#000; text-decoration:none;}
 
  
   /*--------item display---------*/
 
 .itemdisplay{border: 1px dashed #000; margin:5px; padding:5px;}
 .itemdisplay .desc {margin-left: 240px; border-left: 1px dashed #000; padding:10px;}
 .itemdisplay .plus{color:#000; font-weight:bold; font-size:3em;}
 .itemdisplay a{text-decoration:none;}
 .itemdisplay a:hover {text-decoration:underline;}
 .itemdisplay .l h2 a{color:#000;}
 
 .itemdisplay .info{border: 1px dashed #000; padding:5px;}
 .info p{color:#000; font-size:1.1em; font-weight:bold;}
 .info h2{color:#000;}

 /* ----------------sidebar ------------------- */ 
 
 .sidebar h1.top {color:#fff; font-size: 1.6em; text-align:center; margin:20px 0 0 0;}
 .sidebar h2.top{ text-align:center; overflow:hidden; line-height:.9em; margin:0 0 60px 0;}
 .sidebar h2.top a {color:#fff; font-size:.9em; text-decoration:underline;}
 .sidebar h2.top a:hover{color: #00a;}
 .sidebox{background:#fff; border:1px solid #000; }
 .sidebox h2{color:#fff; background-color:#000; margin:0 0 10px 0; line-height:30px;}
 ul.sidemenu{margin-left:20px; list-style-type:none; text-align:left;}
 ul.sidemenu li{margin-bottom:4px; display:block; width:100%;}
 ul.sidemenu li a{color:#000; text-decoration:underline; font-weight:bold;}
 ul.sidemenu li a:hover{color:#333;}
   ul.sidemenu li ul{list-style-type:none; font-size:.85em; margin-left:15px; }
   ul.sidemenu li ul li{ margin:2px 3px; text-wrap:normal; width:auto;}
   ul.sidemenu li ul li a{color:#000; text-decoration:underline; font-weight:normal;}
   ul.sidemenu li ul li a:hover{color:#333; text-decoration:none;}
 
 ul.pdf{margin:10px; list-style-type:none;}
 ul.pdf li{padding-left:20px; background: url(../img/pdf.gif) left center no-repeat;margin:5px 10px;}
 ul.pdf li.word{padding-left:20px; background: url(../img/word.gif) left center no-repeat;margin:5px 10px;}
 ul.pdf li a{color:#000; font-weight:bold; text-decoration:underline;}
 ul.pdf li a:hover{color:#333; text-decoration:none;}
 
 
 /*------shopping basket-------*/
 .shoppingbasket{background: url(../img/basket.gif) right top no-repeat; padding-bottom:5px;}
 .shoppingitems{border: 1px solid #000; width:85%; margin:0 auto; max-height:100px; overflow:scroll;}
 table.basket{ font-size:.9em; color:#000;}
 table.basket td{padding:4px; vertical-align:top; }
 p.price {font-size:1em; font-weight:bold; color:#000; }
 p.price a{color:#000;font-weight:bold; text-decoration:underline; }
 p.price img{vertical-align:middle;}
 p.price a:hover{color:#000; background: #fff; text-decoration:none;}
 
/* -----------footer--------------------------- */
#footer { background-color:#fff; border:1px solid #000; padding: 5px;}
 #footer p {color:#000; font-size:.9em; margin-bottom:1px;}
 #footer p strong{font-weight:bold; font-size:1.1em;}