/** general stuff **/

body
{
  margin-top: 250px;
  font-family: sans-serif;
  margin-right:10em;
}

p,ul,ol
{
  font-family: "times new roman", serif;
  line-height: 1.4em;
}

h1
{
  color: blue;
  margin-left: 1.5em;
}
h2
{
  margin-left: 2em;
  border-bottom: 1px solid #999;
  width: 75%;
}
h3
{
  margin-left: 3em;
  border-bottom: 1px solid #999;
  width: 75%;
}

p,ul,dl,ol
{
  margin-left: 4em;
  margin-right: 7em;
  line-height: 130%;
}

ul,dl,ol
{
  margin-left: 4em;
}

li
{
  margin-bottom: 0.5em;
}

dt
{
  font-weight: bold;
  margin-top: 10px;
}

dd
{
  font-size: 90%;
}

a:hover
{
  background-color: #ddf;
}

blockquote
{
  font: 120% serif;
  background-color: #eee;
  margin-left: 10%;
  margin-right: 15%;
  padding: 1%;
  border: 2px solid #ddd;
  -moz-border-radius: 20px;
}

span.attrib
{
  display: block;
  margin-top: 0.5em;
  text-align: right;
  font: italic 75% sans-serif;
  color: #666;
  font-style: italic;
}


div.custom
{
  width: 320px;
  height: 350px;
  float: left;
  margin: 5px;
  border: 2px solid black;
}

div.custom img
{
}

div.custom p
{
  padding: 5px;
  margin: 0px;
  font: 90% sans-serif;
  background-color: #eee;
}


div.big_picture
{ 
  border: 1px solid black;
  background-color: #eee;
  padding: 25px;
  text-align: center;
}

div.big_picture img
{
  border: none;
}

div.picture
{
  border: 1px solid black;
  background-color: #eee;
  padding: 5px;
  float: left;
  margin-left: 1em;
}

div.picture img
{
  border: none;
}

div.picture div.caption
{
  font-size: 75%;
  text-align: center;
}

div.picture a:hover
{
  background: none;
}


div.poppicture
{
  display: none;
  padding: 2px;
  background-color: #000;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 9;
}

div.poppicture img
{
  padding: 0;
  margin: 0;
  border: none;
}



div#footer
{
  padding: 0px;
  background-color: #eee;
  clear: both;
  float: right;
}
div#footer img
{
  border: none;
}


div#banner
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 204px;
  width:100%;
  text-align:center;
  z-index:5;
}

div#banner h1
{
  border: 2px solid black;
  border-top:none;
  height: 204px;
  width: 1200px;
  background: #38609b url("title-peyto.jpeg") no-repeat right;  
  color: yellow;
  font:  bold 250% sans-serif;
  font-variant: small-caps;
  letter-spacing: 1px;
  padding: 0px;
  margin: 0px;
  margin-left: 2em;
}

ul#menu
{
  display:block;
  color: white;
  font: bold 80% sans-serif;
  z-index:10;

  position: absolute;
  width: 80%;
  left: 4em;
  top: 210px;
  text-align:center;
  vertical-align:top;
  margin:0;
  padding:8px;
  background-color:#fff;
  border-top:none;
  padding-top:0;
}
ul#menu a
{
  color: #333;
  background-color:#eee;
  padding: 4px 8px 4px 8px;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  -moz-border-radius: 0px 0px 4px 4px;
}
ul#menu a:hover
{
  color: #fff;
  background-color: #6666aa;
}
ul#menu>li.active a
{
  background-color: black;
  color: #ddd;
}
li.active a:hover
{
  background-color: white;
  color: black;
}

ul#menu li
{
  padding:0;
  margin:0;
  list-style: none;
  display:inline;
}



/** products **/
/** product-stuff **/

div.testimonial
{ 
  float:right;
  background-color:#ffc;
  width:20%;
  font-size:80%;
  padding:7px;
  border:2px solid #aa3;
  margin-right:1em;
  -moz-border-radius:5px;
}

div.testimonial p
{
  font-style:italic;
  margin: 0;
  padding: 0;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eea;
}


table.productthumb
{
  text-align:center;
  width: 100%;
}

table.productthumb td
{
  width: 200px;
}

table.productthumb img
{
  border: none;
}

table.productthumb div.caption
{
  font-size: 75%;
  max-width:300px;
  text-align:center;
}

table.productthumb img
{
  border: 2px solid white;
}

table.productthumb a:hover>img
{
  border: 2px dashed #aaa;
}

div.product
{
  margin-top: 1em;
  margin-left: 5em;
  border-bottom: 2px solid black;
  z-index: 1;
}

div.product ul
{
  font-size: 80%;
  padding-bottom: 0px;
  padding-top: 0px;
  z-index: 1;
}
div.product li
{
  line-height: 125%;
  margin: 1px;
}
div.product span.capacity
{
  font-size: 80%;
}

div.product h2
{
  margin: 0px;
  padding: 4px;
  border-top: 2px solid black;
  background-color: #eea;
  width: 80%;
}

div.product div.price
{
  margin: 0px;
  padding: 4px;
  background-color: #cc9;
  font-size: 70%;
  font-weight: bold;
  text-indent: 3em;
  border-bottom: 2px solid black;
  width: 80%;
}

ul.features
{
  font-size: 80%;
  padding: 0px;
  z-index: 1;
}

ul.features li
{
  padding: 0px;
  margin: 0px;
  margin-right: 2em;
  z-index: 1;
}



/** FORMS **/

fieldset
{
  border: 1px solid #ddd;
  border: 1px solid #88c;
  margin-top: 5px;
  font-family: sans-serif;
  background-color: #fff;
}

fieldset:hover legend
{
  color: black;
  background-color: #ee0;
}

p.tip
{
  font-size: 80%;
  border-left: 10px solid yellow;
  background-color: #dfd;
  padding-left: 10px;
}

label
{
  font-family: sans-serif;
  padding-right: 1em;
}

legend
{
  font: 80% sans-serif;
  color: #666;
  border: 1px solid #ddd;
  border: 1px solid #88c;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #fff;
}

input:focus
{
  background-color: #fff;
  background-color: #ee0;
  border: 1px solid black;
  padding: 2px;
  padding-right: 1px;
  padding-left: 1px;
}

textarea:focus
{
  background-color: #fff;
  border: 1px solid black;
  padding: 2px;
  padding-right: 1px;
  padding-left: 1px;
}

input,select,textarea
{
  background-color: #ffe;
  margin: 2px;
}

input.inlinebutton
{
  font-family: sans-serif;
  background-color: #ddd;
  border: 2px solid #333;
  border-style: outset;
  padding: 2px;
}

input.button
{
  font: 130% sans-serif;
  background-color: #ddd;
  border: 2px solid #333;
  border-style: outset;
  padding: 0.2em;
}

input.button:hover
{
  background-color: #eee;
  color: #000;
}

input.button:focus
{
  border: 2px solid #aaa;
  padding: 0.2em;
}

input.text
{
  width: 100%;
}

form
{
  background-color: #ddf;
  border: 2px solid #88c;
  padding: 10px;
  z-index: 10;
}


/*** calendar ***/

table.calendar
{
  width: 10em;
  height: 10em;
  font: 60% sans-serif;
}

div.calendar
{
  float: right;
  border: 1px solid black;
  background-color: #eee;
}

div.calendar h4
{
  margin: 0px 0px 3px 0px;
  padding: 0px;
  font: 110% sans-serif;
  text-align: center;
  border-bottom: 1px solid #aaa;
}

table.calendar tr
{
}

table.calendar td
{
  margin: 0px;
  border-collapse: collapse;
  width: 14.2%;
  height: 10%;
  border: 1px solid #666;
  vertical-align: top;
  padding: 2px;
}

table.calendar td.busy
{
  border: 2px solid #c66;
  padding: 1px;
  background-color: #f99;
}

table.calendar td.null
{
  border: none;
}

div.calendar p
{
  padding: 2px;
  padding-bottom: 5px;
  margin: 0px;
  font-size: 60%;
  text-align: center;
  border-top: 1px solid #aaa;
}


/** repair stuff **/

table.repair
{
  width: 90%;
  margin-left: 4%;
  border: 1px solid black;
  border-collapse: collapse;
}

table.repair th
{
  border-bottom: 1px solid black;
  background-color: #ccc;
  text-align: left;
  padding-left: 10px;
}

table.repair td
{
  font-size: 80%;
  padding-left: 10px;
}

table.repair tr.odd
{
  background-color:#eee;
}


/** colours **/

div.colour
{
  width: 200px;
  height: 50px;
  border: 1px solid black;
  font-size: 80%;
  color: #aaa;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

table.colours
{
  margin-left: 10%;
}

table.colours td
{
  vertical-align: top;
  text-align: center;
}