body {
  margin: 0 0;
  font-family: "Verdana", serif;
  font-size: 100%;
}

/* Browser fixes */
a img { border: none; }
/* IE Fix */
form { margin: 0; }

p, h1, h2, h3 {
  margin: 0 0 0.6em 0;
}
h1 {
  color: #00a0c6;
  font-size: 1.5em;
}
h2 {
  color: #00a0c6;
  font-size: 1.2em;
}
h3 {
  color: #00a0c6;
}
a:link, a:visited {
  font-weight: normal;
  color: #00a0c6;
  text-decoration: none;
}

.hidden {
}
#hidden {
  position: absolute; top: -100px; left: -100px;
  visibility: hidden;
}

#header {
  padding-top: 5px;
}
#header .background {
  position: absolute; top: 0px; left: 0px;
  width: 100%; height: 110px;
  background: url(../img/headerfade.gif) repeat-x;
}
#header .image {
}
#header input.button {
  background-color: #00a0c6;
  color: white;
  border: blue 1px solid;
  font-size: 0.9em;
}
#header .logo {
  position: absolute;
  top: 0px; left: 0px;
}
#header .search {
  position: absolute; top: 65px; right: 10px;
  height: 26px; width: 310px;
  color: white;
  font-size: 0.9em;
  text-align: right;
}
#header .search .searchButton {
  background: url(../img/searchfade.gif) repeat-x center;
  border: #00a0c6 1px solid;
}
#header .telephone {
  position: absolute; top: 20px; right: 10px;
  color: #00a0c6;
}
#header .fax {
  position: absolute; top: 40px; right: 10px;
  color: #5ac1da;
}
#ooooooooooooooomenu {
  position: absolute; top: 90px; left: 20px;
  height: 20px;
  background: #00b6b4;
}
#flags {
  background: url(../img/flagsbox.gif) no-repeat center;
  position: absolute; top: 112px; right: 10px;
  width: 135px; height: 18px;
  z-index: 1;
}
#flags .flags {
  margin-left: 40px;
  width: 90px; height: 18px;
}

#page {
  margin: 130px 10px 30px 5px;
}
#page .slogan {
  font-size: 1.0em;
  font-style: italic;
  color: red;
  padding: 2px 10px 2px 20px;
}
#page .whatsnew {
  width: 730px;
  font-size: 0.8em;
  font-style: italic;
  padding: 4px 210px 0 20px;
}
#page .whatsnew .title { font-weight: bold; }
#page .justify { text-align: justify; }

.boxes {
  margin: 0px 8px;
}
.boxes .contents {
  padding: 5px 5px 3px 17px;
}
.boxes .contents .title {
  margin: 3px 0;
}
.boxes .contents .description {
  font-size: 0.8em;
}
.boxes .br {
  background: url(../img/homebox03.gif) no-repeat center;
  float: right;
}
.boxes .thin1 {
  background: url(../img/homebox03.gif) no-repeat center;
  width: 340px; height: 160px;
  margin-top: 10px;
}
.boxes .thin2 {
  background: url(../img/homebox04.gif) no-repeat center;
  width: 340px; height: 160px;
  margin-top: 10px;
}
.boxes .shade1 {
  background: url(../img/homebox01.gif) no-repeat center;
  width: 340px; height: 160px;
  margin-top: 10px;
}
.boxes .shade2 {
  background: url(../img/homebox02.gif) no-repeat center;
  width: 340px; height: 160px;
  margin-top: 10px;
}
.boxes .plain {
  width: 340px; height: 160px;
  margin-top: 10px;
}
.boxes .pic {
  float: right;
  padding: 5px;
  margin-top: 35px;
}
/*
  Search box is taller than normal ones, so we have a special class
  for a box that sits beside it.
*/
.boxes .thin180 {
  background: url(../img/homebox03.gif) no-repeat center;
  width: 340px; height: 180px;
  margin-top: 10px;
}
.boxes .thin180 .contents {
  padding: 15px 5px;
}
.boxes .thin180 .contents img {
}
.boxes .empty180 {
  width: 340px; height: 180px;
  margin: 0; padding: 0;
}
.boxes .search {
  background: url(../img/searchbox.gif) no-repeat center;
  width: 340px; height: 180px;
  margin: 0; padding: 0;
  font-size: 0.7em;
}
.boxes .search .contents {
  padding: 40px 4px 10px 4px;
}
.boxes .search .title {
  font-weight: normal;
}

/* Two columns on index page */
#boxesLeft {
  float: left;
  width: 340px;
  margin: 0;
}
#boxesRight {
  margin: 0 20px 0 325px;
  padding: 0px 32px 24px 24px;
}

#rightboxes {
  position: absolute; top: 150px; right: 10px; width: 205px;
  background: url(../img/specialoffer_top.gif) no-repeat top center;
}
#rightboxes .contents {
  border-left: 1px red solid;
  border-right: 1px red solid;
  font-size: 0.8em;
  margin-top: 30px;
  padding: 0px 5px 5px 5px;
}
#rightboxes .title {
  font-weight: bold;
  font-size: 1em;
  margin-top: 10px;
}
#rightboxes .bottom {
  /*width: 205px; This forces IE to misalign field; IE is rubbish */
  height: 28px;
  background: url(../img/specialoffer_bot.gif) no-repeat bottom;
}
#rightboxes .pic {
  padding: 0 5px 0 5px;
  text-align: right;
}

/* Two coloumns */
#boxLeft {
  float: left;
  width: 45%;
}
#boxRight {
  margin: 0 20px 0 47%;
  padding: 0px 32px 24px 24px;
}

/* Make forms look pretty */
#searchForm .row { margin-top: 5px; }
#searchForm input, #quoteForm input, #contactMe input, #entryForm input {
  margin: 0;
  padding: 1px 0;
  border-style: solid;
  border-width: 1px;
  background-image: url(../img/input1.gif);
  border-color: rgb(180, 180, 180);
  width: 150px;
}
#searchForm input.halfsize, #quoteForm input.halfsize, #contactMe input.halfsize {
  width: 75px
}
#searchForm input.button, #quoteForm input.button, #contactMe input.button {
  margin-left: 50px;
  width: 100px;
  background-image: url(../img/input.gif);
  border-width: 1px;
}
#searchForm input.checkbox, #quoteForm input.checkbox, #entryForm input.checkbox {
  width: 15px; height: 15px;
  vertical-align: middle;
}
#entryForm input.image {
  border: none; background: none;
  width: auto; height: auto;
}
#entryForm textarea {
  margin: 0;
  padding: 1px 0;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(180, 180, 180);
  width: 150px;
}
#entryForm textarea.double {
  width: 300px;
}
#entryForm textarea.additionalRequirements {
  width: 350px;
}
/* Move button to the middle of the form */
#searchForm img.gobutton {
  width: 34px; height: 34px;
  margin: 10px 15px 0 0;
  float: right;
}
/* Front page only, IE only */
#searchForm .search img.gobutton {
  float: right;
  margin: 20px 18px 0 0;
}
/* Front page only, non-IE browsers */
html>body #searchForm .search img.gobutton {
  margin: 30px 18px 0 0;
}

#contactMe {
  font-size: 0.8em;
  border: #00a0c6 1px solid;
  margin: 2px 0;
  padding: 5px;
}

/* Product page */

#product {
  background: url(../img/prodbackfade.gif) repeat-x bottom;
}
#productBox .back { margin-top: 5px; }
#productBox {
  position: absolute; top: 150px; left: 30px;
  width: 714px;
  background: url(../img/prodboxtop01.gif) no-repeat top center;
}
#productBox .contents {
  height: 400px;
  border-left: 1px #00aeee solid;
  border-right: 1px #00aeee solid;
  font-size: 0.8em;
  margin-top: 30px;
  padding: 10px;
}
#productBox .left { width: 480px; }
#productBox .title {
  color: #00a0c6;
  font-size: 1.5em;
}
#productBox .heading {
  color: #00a0c6;
  font-weight: normal;
  font-size: 1.2em;
  margin-top: 15px;
  margin-bottom: 10px;
}
#productBox .promo {
  color: red;
}
#productBox .pic {
  position: absolute; top: 30px; right: 5px;
  width: 229px; height: 232px;
  background: url(../img/prodpicbox.gif) no-repeat center;
  padding: 10px;
}
/*
  Assumes image is a particular size. We need to move this via a margin
  as the .pic div has a background image with a huge left border (the arrow).
*/
#productBox .pic img {
  margin: 50px 0px 0px 60px;
}
#productBox .pdf {
  position: absolute; top: 280px; right: 5px;
  width: 186px; height: 87px;
  background: url(../img/prodpdfbox.gif) no-repeat center;
  padding: 10px;
}
#productBox .pdf .text {
  position: absolute; bottom: 20px; left: 0px;
  width: 186px; 
  text-align: center;
  font-size: 0.8em;
}
#productBox .pdf img {
  position: absolute; top: 20px; left: 65px;
}
#productBox .price {
  position: absolute; top: 380px; right: 5px;
  width: 186px; height: 30px;
  padding: 10px;
  text-align: center;
}
#productBox .price .main {
  color: red;
  font-size: 1.1em;
}
#productBox .price .footer {
  margin-top: 10px;
  color: black;
  font-size: 0.8em;
}
#productBox .bottom {
  width: 714px; height: 67px;
  background: url(../img/prodboxbot01.gif) no-repeat bottom;
}

#productList .row {
  font-size: 0.8em;
}
#productList div.category {
  padding-top: 10px;
  font-weight: normal;
}
#productList div.summary {
  border-bottom: #00a0c6 1px solid;
  padding: 5px;
  font-weight: normal;
}
#productList td.details {
  padding-left: 15px;
  width: 600px;
}
#productList td.tubes {
  padding-left: 15px;
  width: 100px;
}
#productList .title {
  vertical-align: top;
  width: 200px;
}
#productList .backtotop {
  padding-top: 20px;
  font-weight: bold;
  font-size: 0.8em;
}
#productList div.type {
  margin: 10px 0;
  font-size: 1.1em;
}

/* Page backgrounds */

#splash {
  position: absolute; top: 110px; left: 0px;
  width: 100%; height: 650px;
}
#splash .serviceInfo {
  height: 100%;
  background: url(/img/serviceinfobg.jpeg) no-repeat top right;
}
#splash .breakdown {
  height: 100%;
  background: url(/img/breakdownbg.jpeg) no-repeat top right;
}
#splash .serviceQuote {
  height: 100%;
  background: url(/img/serviceinfobg.jpeg) no-repeat top right;
}
#splash .search {
  height: 100%;
  background: url(/img/searchbg.gif) no-repeat top right;
}
#splash .aboutus {
  height: 100%;
  background: url(/img/aboutusbg.jpeg) no-repeat top right;
}
#splash .contactus {
  height: 100%;
  background: url(/img/contactusbg.jpeg) no-repeat top right;
}
#splash .quickquote {
  height: 100%;
  background: url(/img/quickquotebg.jpeg) no-repeat top right;
}
#splash .rcfrpm {
  height: 100%;
  background: url(/img/rcfrpmbg.jpeg) no-repeat top right;
}

/* Standard template */

#standardBox {
  margin: 30px 50px 0 20px;
  width: 686px;
}
#standardBox .back { margin-top: 5px; }
#standardBox .box {
  background: url(../img/sinfotop.gif) no-repeat top center;
  width: 686px; height: 41px;
}
#standardBox .contents {
  border-left: 1px #1050a4 solid;
  border-right: 1px #1050a4 solid;
  font-size: 0.8em;
  padding: 0 10px; margin: 0;
  /*
    Fix gap at bottom of box where vertical lines do not go all the
    way down the box. Horrible.
  */
  border-bottom: 1px white solid;
}
#standardBox .title {
  color: #1050a4;
  font-size: 1.2em;
  padding: 5px 5px;
}
#standardBox .break { margin-top: 10px; }
#standardBox .subheading {
  padding: 10px 0 5px 0;
  font-size: 1.2em;
}
#standardBox .subheadingb {
  padding: 5px 0;
  color: #0a50a1;
  font-size: 1.2em;
}
#standardBox .subheadingc {
  padding: 5px 0;
  color: #00a0c6;
  font-size: 1.2em;
}
#standardBox .subheading img {
  vertical-align: middle;
}
#standardBox .bottom {
  width: 686px; height: 41px;
  background: url(../img/sinfobottom.gif) no-repeat bottom;
  margin: 0; padding: 0;
}
#standardBox .submit {
  text-align: right;
  margin-right: 10px;
}
#standardBox .float {
  float: right;
}
#standardBox .padding {
  margin-top: 150px;
}

/* RCF/RPM Calc form */
#calcRCF, #calcRPM { width: 10em; }
#result {
  color: red;
  font-weight: normal;
  font-size: 1.2em;
  padding: 10px 5px 10px 5px;
}

/* Some table classes */
#adminForm { width: 100%; clear: right; }
#adminForm table { width: 100%; }
#adminForm td { vertical-align: top; }
td.label { width: 25%; }
td.small { width: 80px; }
td.right { text-align: right; }
td.small input, td.small select, td.small textarea { width: 100%; }
td.field input, td.field select, td.field textarea { width: 100%; }
td.submit input { width: 25%; }
#f-description { width: 100%; }
#adminForm input.small { width: 30px; }
#adminForm h3 {
  color: #00a0c6;
  margin: 15px 0;
}

#page .admin .category {
  font-size: 1.2em;
  margin: 5px 0;
}

/* Admin section */
#nav {
  background: #dddddd;
}
#nav .entry {
  background: yellow;
  color: red;
}

/* Admin products */
.admin .products        { border-spacing: 5px; }
.admin .products .title { width: 500px; }

/* Text markup table */
.textmarkup table {
  border-width: 0px 0px 50px 0px;
}
.textmarkup .key {
  font-weight: bold;
  width: 150px;
  font-size: 0.9em;
}
.textmarkup .meaning {
  border-left: 10px;
  width: 300px;
  font-size: 0.9em;
}

.success {
  color: red;
  font-size: 1.1em;
}

.error {
  color: #00a0c6;
  font-weight: bold;
  margin: 5px 0;
}

#sidemenu {
  border: #00a0c6 1px solid;
  font-size: 0.9em;
  width: 200px;
}
#sidemenu a {
  color: #00a0c6;
}
#sidemenu .level1 {
  margin-bottom: 2px;
  background: #00a0c6;
  color: white;
  font-weight: bold;
  text-align: center;
}
#sidemenu .level1 a {
  color: white;
  font-weight: bold;
}
#sidemenu .level2 {
  padding-left: 2px;
  color: #00a0c6;
}
#sidemenu .level3 {
  padding-left: 5px;
  color: #00a0c6;
}
#sidemenu .level4 {
  padding-left: 8px;
  color: #00a0c6;
}