/* $Id: salon.css,v 1.3 2009/03/20 11:45:53 damien Exp $ */

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

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

/* 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: #000;
  color: #8f8f8e;
}

#doc {
  border-left: 1px solid #8f8f8e;
  border-right: 1px solid #8f8f8e;
  border-bottom: 1px solid #8f8f8e;
  font-size: 116%;
}
/* Header */
/* Use a different background photo for each page. */
.index #hd {
  background-image: url(../images/passion-9936-spray.jpg);
}
.services #hd {
  background-image: url(../images/passion-9948-torn.jpg);
}
.products #hd {
  background-image: url(../images/passion-9953-pillow.jpg);
}
.contact-us #hd {
  background-image: url(../images/passion-9945-watercolor.jpg);
}
#hd {
  padding: 20px;
  height: 250px;  /* Height of temp logo image and space for menu. */
/*  background-image: url(../images/passion-9936-spray.jpg);*/
  background-position: 98% center;
  background-repeat: no-repeat;
  font-family: Veranda;
}
/* #hd h1 contains text of the logo. */
#hd h1 {
  /*margin-top: 0pt;*/
  padding: 0pt;
  font-size: 197%;
  background: url(../images/passion-logo.jpg) center center no-repeat;
  height: 161px;
  width: 500px;
  text-indent: -9999px;
}
#hd h2 {
  font-size: 161.6%;
}
#hd .emphasise {
  color: #fff;
  font-style: italic;
}

/* Navigation */
#nav {
/*	clear: both;	*/
	margin: 0 auto;
	padding: 0;		
}
#nav ul {
/*	float: left;*/
	list-style: none;
	text-transform: uppercase;
	margin: 0;	padding: 0;	
	height: 4em; /* Was 56px */
}
#nav ul li {
    list-style: none;
	float: left;
	margin: 0; padding: 0;
	height: 4em; /* Was 56px */
}
#nav ul li a {
	display: block;
	/*float: left;*/
	width: auto;
	/*margin: 0;*/
	padding: 0 20px;
	color: #a5a5a5;
	font: bold 16px/54px "Trebuchet MS", Helvetica, Arial, sans-serif;
	text-decoration: none;	
	letter-spacing: 1px;	
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #fff;
}
#nav ul li#current a {	
	color: #FF8B04;
	background-color: #8f8f8e;
}


/* Main body */
#content {
  line-height: 1.5;
  padding: 1em;
}

#loyalty {
  background-color: #E6E6E6;
  border: 3px solid #CECFD0;
  margin: 0 30px;
  text-align: center;
  color: #000000;
}
#loyalty a {
  color: #FF8B04;
  text-decoration: underline;
}
/* Prices tables */
/* Inspired by http://icant.co.uk/csstablegallery/index.php?css=95 */
.prices table {
  border-collapse: collapse;
  border: none;
}
.prices caption {
  text-align: center;  
  border: 2px outset #999;
  font-weight: bold;
  font-size: 131%; 
  margin-bottom: 0px;
  background-color: #8f8f8e;
  color: #000;
}
.prices tr {
  color: #8f8f8e;
  border: 1px dashed #999;
}
.prices td {
  border: 1px dashed #999;
  width: 15em;
}
.prices tr.odd {
  background-color: #333333;
  color: #fff;
}
.prices tr:hover, .prices tr.odd:hover {
  background-color: #707070;
  color: #000;
}

/* Sidebar */
#sidebar p {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
}
p.new-product {
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
p.sticker {
  text-align: center;
}

#sidebar ul.sidelist {
	margin: 0 0 20px 10px;
	/*padding: .1em 0 1em 0;		*/
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;		
	border-top: 1px solid #211E20;
}
#sidebar ul.sidelist li {
	padding: 0; 
	background: url(../images/bullet.jpg) no-repeat .5em .6em;		
	border-bottom: 1px solid #211E20; 
	list-style: none;
}

* html body #sidebar ul.sidelist li { height: 1%; }

#sidebar ul.sidelist li {
	display: block;
	font-weight: bold;
	color: #d3d0cc;
	text-decoration: none;
	padding: .2em 0 .2em 30px;
	line-height: 1.5em;
	font-size: 108%;
}
#sidebar ul.sidelist li a:hover {
	color: #FF8B04;				
}
#sidebar ul.sidelist ul { margin: 0 0 0 15px; }
#sidebar ul.sidelist ul li { border: none; }

/* Opening hours table. */
.hours td {
  border: 1px solid #666;
}

/* Footer. */
#ft {
  padding-top: 1em;
  font-size: 85%;
  margin-bottom: 0em;
  margin-left: 1em;
  height: 2em;
}
/* Left align the copyright information. */
#ft .copyright {
  float: left;
}
/* Right align the designer link. */
#ft .designer-link {
  float: right;
  margin-right: 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;
}