ul,ol { list-style:none }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 }

a img,:link img,:visited img { border:none }

select { display: inline; }

/*
^General
-------------------------------------------*/
html, body, h1, h2, h3, h4, div, ul, li, input /*clear browser defaults*/  {
  	border: 0;
  	padding: 0;
    margin: 0;
  	list-style: none;
  	text-decoration: none;
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    color: #333;
}
html {
  height:100%;
  max-height:100%;
}
body {
  height:100%;
  max-height:100%;
  margin: 0 auto;
  padding: 0;
  /*background: #ececec url('../img/background.gif');*/
  background: #ececec;
  width: 100%;
}

p, .normalList, .nobulletList {
  list-style: square;
  padding: 0.5em 1em 0.5em 1em;
  text-align: left;
  border:0;
}
.normalList, .nobulletList {
  margin-left: 2em;
}
.normalList li, .nobulletList .normalList li {
  list-style: square;
  border: 0;
}
.nobulletList li {
  list-style: none;
}
ol.normalList li {
  list-style: decimal
}

a:link { color: #2c2cc6; text-decoration: underline; }
a:visited { color: #aa55aa; text-decoration: underline;}
a:hover { color: #333; background-color: yellow; }
a:active { color: yellow; }

img.inline {
  float:none;
  display:inline;
  border:0;
  margin:0;
  padding:0;
}

/*
^Headings
---------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  padding: 0 0 0 10px;
  font-weight: bold;
}
h1 {
  margin: 0 0 0.5em 0;
}
h2 {
  margin: 1em 0;
}
h3  {
  position:relative;
  padding: 0.5em 10px;
  margin: 0.5em 0;
  background: url('../img/galleryhover_grad.gif');
  clear: both;
}
h4  {
  padding: 0.25em 10px;
}
h5 {
  padding: 0.25em 10px;
}
h6 {
}

/*
^ Font-sizing
Font-size is cumulative - the element takes the font-size of the parent and calculates it's own based on that and anything specified
for it specifically.  Thus it is important to apply one global font-size to body and then avoid if possible any other except on very 
specific elements.
62.5% is used because the browser default is usually 16px and 62.5% gives default 10px making the maths easier
headings and paragraphs are given font-sizes for obvious reasons

When specifying a new font-size for an element, remember to set line-height: 1em which ensures that the actual height of the element
is the same as the height of the characters inside the element.  Otherwise the actual height will be determined based on the body
font-size - ie 1em x 10px as set below.

NB LINE-HEIGHT NOTES
---------------------------------------------*/
body { font-size: 62.5%; } /*set 1em = 10px = 100% metric*/
p, li, td { font-size: 1.2em; }
li li, td td { font-size: 1em; } /*cancel multiplier effect*/
h1 { font-size: 260%; }
#header h1 { font-size: 300%; }
h2 { font-size: 220%; }
h3 { font-size: 180%; }
h4 { font-size: 160%; }
h5 { font-size: 140%; }
h6 { font-size: 120%; }
#header input, #header a, #header strong, #bottom input, #bottom a { font-size: 0.8333em; } /*restore to 10px for header/footer*/
#textads a { font-size: 1.2em; }

/*
^ Line-heights
If an element does NOT have font-size applied, then the line-height in EM is proportional to the BODY (global) font-size.  In other words
a span with line-height: 1.3em should have a line-height of 13 pixels, given that body font-size is 62.5% and default font-size is 16px AND
it does not have it's own font-size.

If an element DOES have font-size applied, then the line-height is now proportional to that font-size.

ACTUALFONTSIZE = defaultFontSize x bodyFontSize x (parentsFontSizes...) x elementFontSize
if (isset(elementLineHeight)) {
  LINEHEIGHT= elementLineHeight x ACTUALFONTSIZE
}
else {
  LINEHEIGHT= fontSizeOfParentElementWhereLineHeightISSET x elementLineHeight
}
----------------------------------------------*/
body { line-height: 1em; } /* set to 1em which is 10px */
p, .normalList li, .nobulletList li { line-height: 1.5em; }
li,td { line-height: 1em; }
h1,h2,h3,h4,h5,h6 { line-height: 1em; }
#header .submit { line-height: 1em; }
#textads a, #textads .desc { line-height: 1.5em; }

/*
^Z-Indexing
---------------------------------------------*/

#login, #logout { z-index: 1000; }
.rcorner { z-index:20; }
#content {z-index: 20;}
#menu { z-index:100; }
.logo { z-index:15; }
#menu ul li ul, #page_menu ul li ul { z-index:200; }
.orderby { z-index: 10; }
#bottom { z-index:10; }
#alert { z-index: 1000; }
#wrappermain { z-index:5; }
.window { z-index:1; }
.mb { z-index:0; }
#header { z-index: 100; }
#categories { z-index: 200; }
#header h1 { z-index: -1; }
#header div { z-index: 12; }

/*
^ Block Elements Positioning
--------------------------------------------*/
#container {
  min-width: 950px;
}
#wrappermain, #content, #bottom {
  position: relative;
  min-width: 700px;
  top: 4em;
  background-color: white;
  padding: 10px;
  text-align: center;
  border: 0.5em solid #313131;
}

#wrappermain, #bottom {
  background-color: transparent;
  text-align: left;
  border: 0;
  padding: 0;
  width: 710px;
  margin: 0 auto;
  top: 11em;
}
#content {
  top: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  text-align: left;
  border-width: 5px;
}
#content {
  min-height: 400px;
}

/*
Header
----------------------------------*/
#header {
  position: absolute;
  min-width:950px;
  top: 0;
  border-bottom: 0.5em solid #313131;
  background: url('../img/header_grad.gif') repeat-x #92bc67 0 1.8em;
  padding: 0.2em 0.5%;
  width: 99%;
  height: 4.8em;
  overflow: hidden;
}
#header .text {
  padding: 0.3em;
  margin: 0.1em;
}
#header .button {
  padding: 0.2em;
}
#header .title {
  float: left;
  width: 100%;
  text-align: center;
}
#header h1 {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #ececec;
  padding: 0;
  width: 100%;
  line-height: 1.5em;
  margin: 0;
  overflow: visible;
}
#logo {
  position: absolute;
  left:-103px;
  top: 30px;
}
.logo {
  position: absolute;
  top: 0;
  left: -120px;
  margin: 0;
  margin-top: 10px;
}

/*
^Bottom
------------------------------------------*/
#bottom {
  margin-top: 2em;
  padding: 0;
  width: 100%;
  text-align: center;
  background: url('../img/bottom_grad.gif') bottom left repeat-x #92bc67;
  border-top: 0.5em solid #333;
}
#bottom #guide {
  float: left;
  width: 25%
}
#bottom #textads {
  float: left;
  width: 49%;
  border: 5px solid #333;
  border-top: none;
  margin-top: -0.5em;
  background-color: #ececec;
}
#bottom #maincats {
  float: left;
  width: 25%;
}
#bottom ul {
  float: left;
	padding: 0;
	text-align: left;
}
#bottom ul li {
  margin: 0.5em;
}
#bottom ul a {
  color: #333;
}
#bottom .copyright {
  text-align: center;
  padding: 0.25em;
  clear:both;
}
#bottom #maincats ul { 
  text-align: right; 
}
#bottom #textads ul {
  width:100%;
}
#bottom #textads li {
  float: left;
  width: 24%;
  margin: 0.5%;
}
#bottom #textads li .title {
  font-weight: bold;
  display: block;
}
/*
^Content
-------------------------------------------*/

img {
  display: block;
  padding: 2px;
  margin: 10px auto;
  background-color: transparent; }

p img, h3 img, h4 img {
  float: right; }

input.text {
  font-family: inherit;
  padding: 2px;
  border: 1px solid #333;
  color: black;
  text-align: left;
  width: 20em; 
}
input.text:hover {
  border-color: #ff6a6a; }
  
input.number {
  width: 1.5em;
}

table img {
  border: 0.1em solid transparent; 
}
.formcontrols { /*eg comparison page*/
  margin: 0 auto;
  padding: 10px 0 0;
  text-align: center;
  width: 100%;
}
.formcontrols li {
  display: inline;
  margin-right: 0.5em;
}
#content .form {
  text-align: right;
  margin: 0 auto; }
  
p textarea, .textarea {
  font-family: inherit;
   overflow: auto;
   width: 80%;
   height: 300px;
   margin: 5px 10% 0 10%;
   padding: 10px;
   border: 1px solid #999; 
}

p textarea:hover, .textarea:hover {
  border-color: #ff6a6a;
}

.button {
  font-family: inherit;
  padding: 0.2em 1em;
  background-color: #f6f6f6;
  border: 1px solid #333;
  color: #2c2cc6;
  text-align: center;
  text-decoration: none; 
  cursor: pointer; 
}
  .button:hover {
    background-color: #333;
    color: #f6f6f6;
  }
.tip, #content strong.tip  {
  cursor: help;
  color: #ff0000;
  border-width: 0;
}
.bgbutton {
    border: 0;
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    vertical-align: middle;
}
.horizantal li {
  display: inline;
  margin-right: 3px;
  padding: 2px;
  border: 0.1em solid #999;
}
select {
  border: 1px solid #313131;
  padding: 0.2em;
}
.rcorner {
  position: absolute;
  top: -6px;
  right: -6px;
  background: url('../img/rcorner.gif') center center;
  width: 101px;
  height: 101px;
}

/*
Page Structure
---------------------------*/

.main {
  background-color: transparent;
}
.main h3 {
  margin:0;
}
.right {
  position: relative;
  float: right;
  overflow:hidden;
  width: 160px;
  margin-left: 5px;
  padding:0;
  border-right: 0;
}
.right h4 {
  border-width: 0;
  background-color: #b7d39a;
  line-height: 1.5em;
  padding: 0.5em;
}
.right .window {
  padding-bottom:10px;
  margin:0;
}
.right p {
  padding: 0 5px; /* space saver */
}
.right li a {
  /* margin-left: 10px; this creates a margin on all links in the right area! - don't want! */
}
.left {
  position: relative;
  float:left;
  width: 535px;
}
.left h3, .left h1 {
  clear: both;
}
img.left {
  width:auto;
}
img.right {
  width: auto;
}
img.left, img.right {
  margin: 0.5em;
  border: 0;
}

/*
Alert Message
---------------------------------*/
#alert {
  position: fixed;
  top:11.5em;
  right:0;
  height: auto;
  max-height: 250px;
  overflow: auto;
  width: 135px;
  border: 5px solid #ffff8c;
  background-color: #fff;
  z-index: 1000;
}
#alert.error {
  position: relative;
  width: auto;
  top: 0;
  margin-bottom: 1em; 
}
#alert .head {
  position: relative;
  background: url('../img/alert-bg.gif');
  padding: 0.3em 0.2em;
  margin: 0;
  font-weight: bold;
}
#alert ul li {
  padding: 0.2em 0.1em;
  margin: 0;
  list-style: none;
}

/*
Search
----------------------------------*/
.search form, .search p {
  padding: 0;
}
.search .text {
  width: 10em;
  padding: 0.3em;
  margin: 0;
  margin-right:0.2em;
  /*border is 1px all-round*/
}
.search input.button {
  padding: 0.2em;
}
.search ul {
  margin-top: 0.3em;
}
.search ul li {
  display: inline;
  padding-right: 0.4em;
  margin-right: 0.4em;
}
.search li a, #bottomSearch li a, #topSearch li a {
  color: #f6f6f6;
}
.search li a:hover, #bottomSearch li a:hover, #topSearch li a:hover {
  color: #333;
}

.inline {
  margin: 0.5em 1em;
}
.inline .text {
  width: 25em;
}
.inline .text, .inline input.button {
  margin: 0.5em;
}
.inline ul {
  margin:0.5em;
}
.inline ul li a {
  color: #333}

#topSearch {
  float: right;
}
#bottomSearch {
  margin: 0.5em;
}
#bottomSearch .text {
  width: 57%;
}
#bottomSearch ul {
  width: 100%;
  margin: 0.25em 0 1em 0;
}
#bottomSearch ul li {
  margin:0;
}

/* Menu */

.menu {
  position: absolute;
  top: 20em;
  left: 0;
  width: 120px;
  height: auto;
  text-align:left;
  margin: 0 0 5px -120px;
  background-color: transparent;
}

/* head */

.menu ul {
  margin:0 0 0 5px;
  background-color: #333;
  top: 15px;
  padding:0;
}
  .menu ul li {
    position: relative;
    display: block;
    margin: 5px 0;
    list-style: none;
  }
  .menu ul li:hover, .menu ul li a:hover, .menu ul li:hover a {
    background-color: #ececec !IMPORTANT;
    color: #333 !IMPORTANT;
  }
    .menu ul li a {
      display: block;
      padding: 10px 10px;
      padding: 10px 10px 10px 2.9em;
      background: no-repeat 0.5em 0.3em;
      color: #ececec;
    }
    .menu ul li.favourites a { background-image: url("../img/fav.gif"); }
    .menu ul li.comparison a { background-image: url("../img/comp.gif"); }
    .menu ul li.home a { background-image: url("../img/home.gif"); }
    .menu ul li.help a { background-image: url("../img/help.gif"); }
    .menu ul li.links a { background-image: url("../img/links.gif"); }
    .menu ul li.loginbutton a { background-image: url("../img/login.gif"); }

/* lvl1 */
.menu ul ul {
  position:absolute;
  width:200px;
  top:0;
  left:-10000px;
  margin:0;
  padding:0;
  border: 0.5em solid #333;
  background-color: #ececec;
} 
.menu ul li:hover ul { left:100%; }

.menu ul ul li {
  display: block;
  width: auto;
  padding:0;
  margin:0;
  background: #ececec;
}

.menu ul ul li a {
  display: block;
  padding: 0.5em;
  margin: 0;
  background: #ececec;
  background-image: none !IMPORTANT;
  color: #333;
}
.menu ul ul li a:hover { background-color: yellow !IMPORTANT; }

/*General*/
.hide {
  display: none;
}
#trail li {
  display: inline;
  border-width:0;
  margin:0;
  padding:0;
}
.list {
  background: url('../img/comp.gif') left center no-repeat;
  display: block;
  padding: 0.5em 0 0.5em 26px;
  vertical-align: middle;
  cursor: pointer;
}
.fav { background-image: url('../img/fav.gif'); }
.comp { background-image: url('../img/comp.gif'); }

.close {
  background: url('../img/close.gif') no-repeat center center;
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  right: 0;
  top: 0;
}

.editpage {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  padding: 5px 0 5px 0;
  border: 0.1em solid black;
  border-width: 0 0 0.1em 0;
}
.editpage ul, .editpage li {
  list-style: none;
  display: inline;
  text-align: center;
}
.editpage li {
  margin: 0 3px 0 3px;
}
.clear {
  width: 100% !IMPORTANT;
  height: 0px !IMPORTANT;
  display: block !IMPORTANT;
  clear: both !IMPORTANT;
  padding: 0 !IMPORTANT;
  margin: 0 !IMPORTANT;
  border-width: 0 !IMPORTANT;
  min-width: 1px !IMPORTANT;
  float: none !IMPORTANT;
  position: static !IMPORTANT;
}

/*
Login / Logout System
--------------------------*/
#login, #logout {
    position: absolute;
    background: white url('../img/loginwindow.gif') no-repeat center 2em;
    top: 25%;
    left: -10000px;
    width: 300px;
    padding: 7em 2em 2em 2em;
    border: 0.5em solid #ff9933;
}
#login .text { width: 10em; }
#login li { 
  text-align: right; 
  margin: 0.5em;
}
#login .submit li {
  float: right;
}
#header .login {
  width: 30em;
  float: left;
  position: relative;
}
#header .login ul {
  width: 17em;
}
#header .login .submit {
  position: absolute;
  left: 18em;
  top:0;
  padding: 0;
  margin: 0;
  width: 12em;
}
#header .logout .submit {
  left: 0;
}
#header .login .submit li {
  display: block;
  text-align: left;
}
#header .login .submit .button {
  width: auto;
}
#header .login .submit li a, #header .login .submit a {
  color: #f6f6f6;
  margin: 0.2em 0; /* as others + 0.1em for the missing border */
  padding: 0.3em 0;
  float: left;
}
#header .login .submit li a:hover {
  color: #333;
}
#header .login li {
  text-align: right;
  margin: 0;
}
#header .login input {
  width: 8em;
}
.search a:hover, #header .login a:hover {
  color: #333;
}

/*this gives the right colour to the IE container for minwidth functionality*/
#minwidth { border-left: solid #ececec; }


/*
^ Categories
-------------------------------*/

#categories {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  top:5.2em;
  background-color: transparent;
}
#categories h4 {
}
#categories div {
  height: auto;
  position: relative;
  padding: 0;
  margin: 0 auto;
  width:80%;
  min-width:700px;
  border: 0.5em solid #333;
  border-top: none;;
  background-color: #ececec;
  z-index: 100;
}
#categories div div {
  border: 0;
  width: auto;
  background-color: inherit;
}
#categories ul {
  width: auto;
  padding: 0;
  position: relative;
  float: left;
  top: 0;
  height: auto;
}
#categories .items {
  position: relative;
  margin: 0 auto;
  width:100%;
  min-width:700px;
  background-color: #92bc67;
}
#categories .items li {
  float:left;
  width: 170px
  clear:both;
  margin: 0;
  padding:0;
}
#categories .items li a {
  float: left;
  display: block;
  padding: 1em 5px;
  font-weight: bold;
  color: #333;
}
#categories .items li .sub {
  position: absolute;
  left: -10000px;
  top:2.6em;
  padding: 0;
  font-size: 0.833333em;
  padding-top: 0.9em;
  z-index:10;
  width:100%;
  background-color: transparent;
  border:solid #333;
  border-width: 0 0.5em 0.5em 0.5em;
}
#categories .items li .sub div {
  position: relative;
  top:0;
  height:31.1em;
  overflow:auto;
  margin: 0;
}
#categories .items li a:hover, #categories .items li:hover, #categories .items li .sub div { background-color: #f6f6f6 }
#categories .items li .sub li a:hover { background-color: yellow; }
#categories .items li:hover .sub { left:-0.5em; }

#categories .subsub li a, #categories .images li a, #categories .subsub p a {
  padding: 0;
  display: inline;
  float: none;
}

#categories .subsub {
  height: auto;
  margin-left: 260px;
  min-width: 1px;
  padding: 0 2%;
}
#categories .subsub p {
  padding: 0.5em 0;
}
#categories .subsub ul .title {
  font-size: 1.4em;
  line-height: 1em;
  font-weight: bold;
  margin: 0.5em 0;
}
#categories .subsub ul {
  width: 30%;
  margin: 0;
  list-style: square;
}
#categories .subsub li {
  float: none;
  list-style: square;
  display: block;
  background: inherit;
  line-height: 1.5em;
}

#categories .items li .sub .images {
  width: 209px;
  min-width: 1px;
  height: auto;
  margin: 0;
  overflow: hidden;
  float: left;
  padding: 2px;
}
#categories .items li .sub .images ul {
}
#categories .items li .sub .images li {
  float: left;
  margin: 0;
}
#categories .items li .sub .images img {
  float: none;
  border: 1px solid #333;
  display: block;
  padding: 0;
  margin: -1px -1px 0 0;
}
#categories .items li .sub .images li.main {
  margin: 2px 2px 2px 1px;
}