/* $Id: maxwell-supplies.css,v 1.9 2011/04/11 11:18:02 damien Exp $ */

/* 
Colours from advert pdf:

  #8b4a96 = Logo purple
  #fecae1 = Logo pink
  #fbebf5 = Advert light purple
  #c74899 = Advert purple
  #2f2114 = Advert black/brown

*/

/* Anchor styles. */
a, a:link {
  color: #333;
  text-decoration: underline;
}
a:visited {
  color: #808080;
  text-decoration: underline;
}
/* Place :hover/:focus/:active after :visited so that hover style works for visited links. */
a:hover, a:focus, a:active {
  color: #686868;
  text-decoration: none;
}

/* Generic classes. */
.no-top-margin {
  margin-top: 0px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clear-left {
  clear: left;
}
.clear-right {
  clear: right;
}
.clear-both {
  clear: both;
}

.product-thumb {
  margin-bottom: 4px;
}
.colour-brand {
  margin-top: 10px;
}
/* Development only - used to highlight TODO notes. */
.todo {
  border: 2px solid #aa0000;
  font-size: 108%;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  background-color: #222;
  padding: 1em;
  display: inline-block;
}

html, body {
  background-color: #fbebf5;
  color: #2f2114;
}

#doc4 {
/*  border-left: 1px solid #8b4a96;
  border-right: 1px solid #8b4a96;
  border-bottom: 1px solid #8b4a96;*/
  padding: 1em;
}

/* Header */
#hd {
  padding: 10px;
  /*height: 211px;*/  /* Height of temp logo images. */
  /*background: url(../images/maxwell-supplies-logo.jpg) top center no-repeat;*/
  font-family: Veranda;
  background-color: #fff;
}
/* #hd h1 contains text of the logo. */
#hd h1 {
  margin: 0pt;
  padding: 0pt;
  font-size: 197%;
  background: url(../images/maxwell-supplies-logo.jpg) top center no-repeat;
  height: 164px; /* Height of background image. */
  width: 100%;
  text-indent: -9999px;
}
#hd h2 {
  margin: 0pt;
  font-size: 161.6%;
  background: url(../images/maxwell-supplies-tagline.jpg) top center no-repeat;
  height: 57px; /* Height of background image. */
  width: 100%;
  text-indent: -9999px;
}
#hd .emphasise {
  color: #fff;
  font-style: italic;
}
#vat-free-monday {
  /*float: left;*/
  position: absolute;
  top: 80px;
  left: 0px;
}
#vat-free-monday h4 a{
  display: block;
  text-indent: -9999px;
  width: 250px;
  height: 179px;
  background: transparent url(../images/vat-free-monday-250x179-money.png) !important;
  background: transparent url(../images/vat-free-monday-250x179-money.gif);
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/* http://www.dynamicdrive.com/style/csslibrary/item/underline-horizontal-menu/ */
#underlinemenu{
/*margin: 0;
padding: 0;*/
   text-align: right;
   font-size: 1.5em;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
/*float: left;*/
/*font-weight: bold;*/
/*width: 100%;*/
/*border: 1px solid #DFDFDF;
border-width: 1px 0;*/
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
#underlinemenu ul li a{
/*float: left;*/
color: gray;
/*font-weight: bold;*/
padding: 2px 6px 4px 6px;
text-decoration: none;
/*background: white url(../images/menudivide.gif) top right repeat-y;*/
}
#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}
/*#underlinemenu ul li#current {*/
#underlinemenu ul li#current a {
  border-bottom: 4px solid #000;
  color: #000;  /* This is not working!! */
  background-color: #fecae1;
}

/* Main body */
.content {
  line-height: 1.5;
  font-size: 108%;
  /*padding: 1em;*/
}

/* Common styles */
.yui-gb {
  margin-bottom: 1em; /* A little bit of space below the wrapper grid. */
}

/* Specify a minumum height for some .yui-u boxes. */
.height-min {
  min-height: 300px;
}
.yui-u  h1, .yui-u h2, .yui-u h3, .yui-u p, .yui-u img {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Left column settings. */
.left-col {
  /*background-color: #8b4a96;*/
  background: #8b4a96 url(../images/left-col-corner.png) no-repeat top left;
  color: #fff;
}
.left-col h1 {
  color: #fff;
}
.left-col a, .left-col a:link {
  color: #fff;
  text-decoration: underline;
}
.left-col a:visited {
  color: #eee;
  text-decoration: underline;
}
.left-col a:hover, .left-col a:focus, .left-col a:active {
  color: #ccc;
  text-decoration: none;
}

/* Middle column settings. */
.middle-col {
  /*background-color: #fecae1;*/
  background: #fecae1 url(../images/middle-col-corner.png) no-repeat top left;
  color: #2f2114;
}
.middle-col a, .middle-col a:link {
  color: #333;
  text-decoration: underline;
}
.middle-col a:visited {
  color: #555;
  text-decoration: underline;
}
.middle-col a:hover, .middle-col a:focus, .middle-col a:active {
  color: #888;
  text-decoration: none;
}

/* Right column settings. */
.right-col {
  /*background-color: #2f2114;*/
  background: #2f2114 url(../images/right-col-corner.png) no-repeat top left;
  color: #fff;
}
.right-col h1 {
  color: #fff;
}
.right-col a, .right-col a:link {
  color: #fff;
  text-decoration: underline;
}
.right-col a:visited {
  color: #eee;
  text-decoration: underline;
}
.right-col a:hover, .right-col a:focus, .right-col a:active {
  color: #ccc;
  text-decoration: none;
}

.strikethrough { text-decoration: line-through; }

.special-offer {
  margin: 0.5em 4em 0.5em 4em;
  padding: 0.5em;
  border: 2px inset blue;
  /*background: #ffdd00 url(../images/babyliss-conical-wand.jpg) 80% center no-repeat;*/
  background: #ffdd00 url(../images/special-offers-gradient.png) center repeat-x;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.special-offer h2 {
  margin-bottom: 0em;  /* The .special-offer padding makes the space and centres the paragraphs vertically. */
margin: 0;
  height: 100px;
  line-height: 100px;
  /*background: url(../images/ist2_10816045.jpg) center right no-repeat;*/
  background: url(../images/vat-free-bg.png) center right no-repeat;
}
.special-offer img {
  vertical-align: middle;
}

/* Special offers list. */
ul.special-offers li {
	background: url(../images/star.png) no-repeat 0.4em 0.3em;
	list-style: none;
	padding: .2em 0 .2em 30px;
}

* html body ul.special-offers li { height: 1%; }

/* Products table. */
.products  caption {
  font-size: 108%;
  letter-spacing: 3px;
  font-weight: bold;
  border: 2px solid #8b4a96;
  background-color: #8b4a96;
  color: #fff;
  margin-bottom: 0em;
  text-transform: uppercase;
}
.products td {
  border: 1px solid #8b4a96;
  text-align: center;
  vertical-align: top;
}
.products img {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #fff;
}
/* Opening hours table. */
.opening-hours {
  margin-left: 1em;
}

/* Contact form. */
/* Credits: Dynamic Drive CSS Library */
/* URL: http://www.dynamicdrive.com/style/ */
/* http://www.dynamicdrive.com/style/csslibrary/item/corporate_css_tableless_form/ */
.feedbackform {
  padding: 5px;
}
.feedbackform .note {
  font-size: 85%;
}
div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
  width: 550px; /*width of form rows*/
  overflow: hidden;
  padding: 5px 0;
 }

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
  float: left;
  width: 150px; /*width of label (left column)*/
  border-bottom: 1px solid #d4ddc3;
  margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
  float: left;
  margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* Style for INPUT type="text" fields. Has no effect in IE7 or below! */
  width: 250px;
  border: 1px solid #000;
}

div.fieldwrapper div.thefield textarea{
  width: 300px;
  height: 150px;
  border: 1px solid #000;
}

div.buttonsdiv{
  margin-top: 5px;
  margin-left: 165px; /* width + margin-right of label.styled above. */
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
  width: 6em;
  /*background-color: #d4ddc3;*/
  border: outset 1px #fff;
  color: #6b6d66;
  font-weight: bold;
  padding: 1px 2px;
}
div.thefield input:hover, div.thefield input:focus,
div.thefield textarea:hover, div.thefield textarea:focus,
div.thefield select:hover, div.thefield select:focus,
div.buttonsdiv input:hover {
	background-color: #f9f9f9;
	/*border: 1px dotted #888;  optional thought */
	border: 1px solid #8f8f8e;
}

/* Footer. */
#ft {
  padding-top: 1em;
  font-size: 85%;
  margin-bottom: 0em;
  /*margin-left: 10px;*/ /* #doc2 already has 1em padding. */
  height: 2em;
}
/* Left align the copyright information. */
#ft .copyright {
  float: left;
  margin-right: 1em;
  /*margin-left: 0em;*/ /* #doc2 already has 1em padding. */
}
/* Right align the designer link. */
#ft .designer-link {
  float: right;
  /*margin-right: 0em;*/ /* #doc2 already has 1em padding. */
}