/** general stuff **/

body
{
  margin-top: 250px;
  font-family: sans-serif;
  margin-left: 10em;
  max-width: 1100px;
}

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%;
}

p 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.fabric
{
text-align:center;
}

div.fabric img
{
  border: 2px solid black;
}



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:1290px;
  text-align:center;
  z-index:5;
}

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

ul#menu
{
  display:block;
  z-index:10;

  width: 9em;
  left: 0;
  top: 204px;
  text-align: right;
  vertical-align:top;
  margin:0;

  background-color: #38609b;
  padding-top:0;
  padding-top:2em;
  padding-left:0;

  border-right: 4px solid black;
  border-bottom: 4px solid black;
  height:100%;
  position: absolute;
  float:right;
  -moz-border-radius: 0 0 10px 0;
}
ul#menu a
{
  text-shadow: 1x 1px 1px rgba(0,0,0,0.5);
  font: bold 120% monospace;
  text-transform: uppercase;
  text-decoration:none;

  display:block;
  color: #333;
  color: #ff0;
  opacity:0.95;
  padding: 4px 8px 4px 8px;
  padding: 0.25em;
  padding-right:1em;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
}
ul#menu a.image>img
{
  opacity: 0.75;
  -moz-opacity: 0.75;
}
ul#menu li
{
  padding:0;
  margin:0;
  list-style: none;
/*  display:inline;*/
}

ul#menu a:hover
{
  color: #000;
  background-color: #ff0;
  text-decoration:underline;
  opacity:0.6;
  text-shadow: none;
}
ul#menu>li.active a
{
  text-shadow: none;
  background-color: white;
  color: #339;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  border-left: 4px solid black;
  border-right: 4px solid white;
  -moz-border-radius: 5px 0px 0px 5px;
  border-radius: 5px 0px 0px 5px;
  position:relative;
  left:4px;
}
ul#menu>li.active a:hover
{
  color: #000;
  background-color:yellow;
  opacity:1.0;
}
li.active a:hover
{
  background-color: white;
  color: black;
}



/** facebook, youtube social media etc */

a#youtube
{
  position: absolute;
  top:165px;
  left: 10px;
  display:block;
  width:88px;
  height:32px;
  padding:0px;
  margin:0;
  background-image: url("youtube-32.png");
  background-repeat: no-repeat;
  background-position: top;
  z-index:6;
  opacity:0.6;
}
a#youtube:hover
{
  background-position: bottom;
  -moz-box-shadow: 0px 0px 5px rgba(255,255,0,0.3), 0px 0px 5px rgba(255,255,0,0.3) inset;
  -webkit-box-shadow: 0px 0px 5px rgba(255,255,0,0.3), 0px 0px 5px rgba(255,255,0,0.3) inset;
  box-shadow: 0px 0px 5px rgba(255,255,0,0.3) inset, 0px 0px 5px rgba(255,255,0,0.3);
  opacity:1.0;
}
a#facebook
{
  position: absolute;
  top:165px;
  left:108px;
  z-index:6;
  display:block;
  width:32px;
  height:32px;
  padding:0;
  margin:0;
  background-image: url("facebook-32.png");
  background-position: top;
  z-index:6;
  opacity:0.6;
}
a#facebook:hover
{
  background-position: bottom;
  -moz-box-shadow: 0px 0px 15px #ff6;
  -webkit-box-shadow: 0px 0px 15px #ff6;
  box-shadow: 0px 0px 15px #ff6;
  opacity:1.0;
}
div#social
{
  width:120px;
  z-index:6;
}


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

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

  color: #222;
  text-shadow: 0px 2px 3px rgba(0,0,255,0.5);

  -moz-box-shadow: 1px 1px 25px #666;
  -webkit-box-shadow: 1px 1px 25px #666;
  box-shadow: 1px 1px 25px #666;
}

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


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

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;
  padding: 5px;
}

table.productthumb a:hover
{
  background-color:white;
}

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

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;
  padding-left: 2em;
  padding-bottom: 8px;
  border: 2px solid black;
  background-color: #eea;
  width: 90%;

  z-index: 10;

  text-shadow: rgba(0,0,128,0.5) 2px 2px 2px;
  -moz-border-radius: 10px 10px 10px 0px;
  border-radius: 10px 10px 10px 0px;
}

div.product div.price
{
  margin: 0px;
  padding: 4px;
  padding-left: 4em;
  background-color: #cc9;
  font-size: 70%;
  font-weight: bold;
  width: 20em;
  z-index: 5;

  text-shadow: rgba(255,255,255,0.9) 1px 1px 0px;
  -moz-border-radius: 0px 0px 10px 10px;
  border-radius: 0px 0px 10px 10px;

  border: 2px solid black;
  border-top: none;

  position:relative;
  top:-2px;
}

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: 250px;
  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;
}