body {background: #fff url(../img/bodybg.jpg) top left repeat-x; font:normal 81.25%/1.3 arial, helvetica, verdana, sans-serif; padding:0px; margin:10px 10px;}
* {padding:0; margin:0;}/*first zero everything so we're on a level browser playing field*/
#bgimage{background: transparent url(../img/bg-topbanner.gif) top right no-repeat; min-width:840px;}

a {color: #3B78C4;}
a:hover {color: #000;}
a img{border:none;}
p {color:#666; margin-bottom:5px;}
h1 {font-size: 1.5em; color:#2191E4; }
h2 {font-size:1.2em; color:#566F9C;}
h3 {font-size:1.15em; color:#2191E4;}
h4 {font-size:1.1em; color:#2191E4; margin-bottom:.6em;}

/*---------------Changing colours---------------*/
.colour-changes { margin:0 auto; margin-bottom:-1em; margin-left:10px; }

/*-------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----------*/
div#menu{float:left; background: #BBD9EE; width:100%; margin:0px; padding:0px;}

/* *****  CHANGE THESE TWO WIDTHS AS YOU ADD AND REMOVE TABS FROM EACH ROW *****/
ul.nav{display:block; width:48em; margin:0 auto; text-align:center;}
ul.nav2{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: 7.2em; padding: 5px 0; background: #E7F1F8; text-decoration:none; color: #006; font-weight:bold;}
ul.nav .larger a{float:left; width: 9.2em; padding: 5px 0; background: #E7F1F8; text-decoration:none; color: #006; font-weight:bold;}
ul.nav a:hover, ul.nav2 a:hover{background: #B0C0DA; color: #006;}
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: #666;}

/* ----------banner-------------- */
#banner {background: #fff url(../img/logo.jpg) top left no-repeat; margin:0; border-bottom:1px solid #6F88C4;border-right:1px solid #2191E4; padding:5px;}
#banner h1{color:#B0C0DA; text-align:right; margin:10px;}
#banner h1.top {color:#424191; font-size: 2.5em; text-align:right; margin:20px 10px 0 0;}
#banner h2.top{ text-align:right; overflow:hidden; margin:0 10px 50px 0;}
#banner h2.top a {color:#424191; font-size:1em; text-decoration:none;}
 
/* ---------input form stuff ------ */
 /*SEARCH*/
 .searchbar{line-height:30px;  background-color:#B0C0DA; }
 form.search label{color:#006 !important; font-weight:bold !important; padding:4px;}
 input.s{color:#666; height:16px; padding:3px; border: 1px solid #6F88C4;}
 input.img{vertical-align:middle; margin-bottom:3px;}
 .searchbar .r img{padding:2px; vertical-align:middle; }
 .searchbar p.small{font-size:.7em;}
 
 textarea {color:#666; margin:3px; height:200px; padding: 0 8px; border: 1px solid #ccc; 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 #999;}
.feature img{float:left;}
.feature h3{ color:#666;}
.feature ul{ margin-left:30px; color:#666;}
.feature ol{ margin-left:30px; color:#666;}
 input.contact1 {font-size:.9em ; color:#666 ; height:12px; padding: 2px 8px; width:142px; border: 1px solid #ccc;background: #fafafa;}

 table.contact{border-collapse:collapse; width:500px;}
 table.contact td{padding:4px 2px;}
 input.normfield {border: 1px solid #566F9C; background:#E9E2E7;}
 textarea.contact{width:330px;border: 1px solid #566F9C; background: #E9E2E7;}
 
/* ----------------maincontent ------------------- */ 
.maincontent{padding:15px; border-bottom:1px solid #2191E4; border-right:1px solid #2191E4; border-left:1px solid #2191E4; border-top:10px solid #2191E4; }
p.strong, span.strong{font-weight:bold;} /* ******/
.maincontent h1{background-color:#2191E4; color:#fff; line-height:40px; }
.maincontent h1 img{vertical-align:middle;padding-right:15px; }
.maincontent li { color:#666; margin-left:10px; }

.onethird{ width:31%; float:left; border-right: 1px dotted #ccc; border-bottom:1px #efefef solid; margin-bottom: 20px; padding:5px; height:270px;}
.onethird h2{ color:#2191e4 !important; padding:3px; margin-bottom:5px; margin-left:30px; font-size:18px !important; text-decoration:none; text-align:left; }
.onethird h2 a { color:#2191e4 !important; padding:3px; margin-bottom:5px; text-align:center; margin:0 10px; font-size:16px !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:30px;}
.onethird ul{list-style-type:none; font-size: .9em; padding:0; margin-left:30px; margin-top:7px; }
 .onethird ul li{padding:0 0 4px 10px; background:url(../img/arrow.jpg) no-repeat left; }
 .onethird ul li a{color:#1f8cdd ; font-weight:bold; text-decoration:none; font-weight:bold;}
 .onethird ul li a:hover{ text-decoration:underline ;}
 
.onethird_cat{ width:31%; float:left; border-right: 1px dotted #ccc; border-bottom:1px #efefef solid; margin-bottom: 20px; padding:5px; height:160px;}
.onethird_cat h2{ color:#2191e4 !important; padding:3px; margin-bottom:5px; margin-left:30px; font-size:18px !important; text-decoration:none; text-align:left; }
.onethird_cat p { margin-left:30px; }
.onethird_cat h2 a { color:#2191e4 !important; padding:3px; margin-bottom:5px; text-align:center; font-size:16px !important; text-decoration:none; }
.onethird_cat img{display:block; margin-left:30px;}

 
 .spot, .spot2{border: 1px solid #B0C0DA; 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;}
 .spot h2 a, .spot2 h2 a{color:#006;}
 .spot h2 a:hover, .spot2 h2 a:hover{color:#3B78C4}
 .spot p, .spot2 p{margin-left: 120px;}
 .spot p.price, .spot2 p.price{font-weight:bold; color:#006;}
 .spot p.addtobasket, .spot2 p.addtobasket{ font-size:1em; text-align:right; font-weight:bold; float:right; padding:5px; }
 
  .spot2{ font-size:.9em;}
  
  a.buy{padding:4px 0px 4px 6px; border:1px solid #666; margin:6px; line-height:21px; text-decoration:none; font-weight:bold; color:#006;}
  a.buy img{padding-left:10px; padding-right:10px; margin:0px; vertical-align:middle; float:none; border:0px;}
  a.buy:hover {color:#333; background: #B0C0DA;}
 
 /*--------catagories page-------*/
 .catagories h2{ color:#B0C0DA;}
 .catagories .feature{margin:10px; padding:10px; border:1px dashed #999;}
 .catagories .feature img{float:left;}
 .catagories .feature h3{ color:#666; margin-left: 210px;}
 .catagories .feature p {margin-left:210px;}
 
 .catagories .onethird img {float:left;}
 .catagories .onethird p {margin-left:70px;}
 .catagories .onethird a{color:#666; text-decoration:none; font-weight:bold;}
 .catagories .onethird a:hover p{color:#000; text-decoration:underline;}
 
 /*--------item display---------*/
 
 .itemdisplay{border: 1px dashed #ccc; margin:5px; padding:5px;}
 .itemdisplay .desc {margin-left: 200px; border-left: 1px dashed #ccc; padding:10px; color:#666;}
 .itemdisplay .plus{color:#333; font-weight:bold; font-size:3em;}
 .itemdisplay a{text-decoration:none;}
 .itemdisplay a:hover {text-decoration:underline;}
 .itemdisplay .l h2 a{color:#9EC749;}
 .itemdisplay .desc li {margin-left: 20px; color:#666}
 
 .itemdisplay .info{border: 1px dashed #ccc; padding:5px;}
 .info p{color:#9EC749; font-size:1.1em; font-weight:bold;}
 .info h2{color:#9EC749;}

 /* ----------------sidebar ------------------- */ 
 
 .sidebox{background:#fff; border:1px solid #2191E4;}
 .sidebox h2 {color:#fff; background-color:#2191E4; margin:0 0 10px 0; padding-left:5px; line-height:30px;}
 .products-title {color:#fff; background-color:#2191E4; margin:2px 0 10px 0; padding-left:5px; line-height:30px; border-top:10px #B0C0DA solid; }
 
 ul.sidemenu{margin-left:20px; list-style-type:none; text-align:left; }
 ul.sidemenu li{margin-bottom:4px; display:block;}
 ul.sidemenu li a{color:#219AF1; text-decoration:none; font-weight:bold;}
 ul.sidemenu li a:hover{color:#B0C0DA;}
   ul.sidemenu li ul{list-style-type:none; font-size:.85em; margin-left:4px; }
   ul.sidemenu li ul li{ margin:2px 3px; width:auto; }
   ul.sidemenu li ul li a{color:#333; text-decoration:none; font-weight:normal;}
   ul.sidemenu li ul li a:hover{color:#008; text-decoration:underline;}
 
 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 a{color:#219AF1; font-weight:bold; text-decoration:none;}
 ul.pdf li a:hover{color:#B0C0DA; text-decoration:underline;}
 
 
 /*------shopping basket-------*/
 .shoppingbasket{padding-bottom:5px;}
 .shoppingitems{border: 1px solid #dedede; width:85%; margin:0 auto; height:92px; max-height:100px; overflow:none; background: url(../img/basket.gif) right top no-repeat; }
 table.basket{ font-size:.9em; color:#333; }
 table.basket td{padding:4px; vertical-align:top; }
 p.price {font-size:1em; font-weight:bold; color:#006; }
 p.price a{color:#006;font-weight:bold; text-decoration:none; }
 
 p.price-link {font-size:1em; font-weight:bold; color:#006; margin-bottom:5px; }
 p.price-link a{color:#006;font-weight:bold; text-decoration:none; }
 p.price-link a:hover {color:#333; }
 
 p.price img{vertical-align:middle;}
 p.price a:hover{color:#333; background: #B0C0DA;}


.centered { text-align:left; margin-left:1.5em !important; clear:both; }
 
/* -----------footer--------------------------- */
#footer { background-color:#B2DAF8; border:1px solid #fff; padding: 5px;}
 #footer p {color:#006; font-size:.9em; margin-bottom:1px;}
 #footer p strong{font-weight:bold; font-size:1.1em;}