/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

Project: The Barbers Online
Article: Presentation Layer Rules

Comment: Expects YUI reset|fonts|base
Assured: Moz,IE(6/7),Safari
Pending: Opera (footer nav leading)

Version: 2008.03.08
Revisor: Peter Sylwester
Revised: Created

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	PRIMARY REGIONS
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

html,body 
	{
	background-color: #E3E3A6;
	font-family: "Lucida Grande","Trebuchet MS",Lucida,sans-serif;
	color: #016B85;
	}

#wrap
	{
	margin: 0;
	width: 100%;
	}

#content
	{
	padding-bottom: 100px;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	LIQUID
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.liquid
	{
/*	the class for any element of liquid width */
	max-width: 960px;
	min-width: 768px;
	margin: 0 auto;
	}


* html .liquid
	{
/*	This hack graduates primary layout areas to 960,864,768 widths.
	Alternative solution, http: //www.cssplay.co.uk/boxes/width3.html
	This expression will not validate, but that is acceptible. */
	width: expression(
	(document.body.clientWidth>960)?"960px":
	(document.body.clientWidth>864)?"864px":
	"768px");
	}


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	NAVIGATION BASICS
	Properties which are universal to all navs.
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.nav
	{
	cursor: pointer;
	background-color: transparent;
	height: auto;
	}

ul.nav
	{
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	white-space: nowrap;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	NAV HACKS
	Force entire region to be clickable in IE/Win.
	Apply these rules AFTER all other applicable.
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

* html ul.nav a { width: 1%; }
* html ul.nav li { float: left; height: 1%; }


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	PSEUDOS
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

ul.nav a:hover
	{
/*	!important for Safari's benefit */
	text-decoration: underline !important;
/*	counteract individual selectors with: none !important */
	}


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	MENU
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

#menu
	{
/*	margin inherited from liquid class */
	padding: 0;
	font-size: 90%;
	background-color: transparent;
	white-space: nowrap;
	}

menu ul
	{
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	width: 100%;
	overflow: hidden; /* IE */
	}

menu ul li
	{
	clear: left;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden; /* IE */
	text-indent: 0;
	line-height: 1.5;
	}

#menu ul a
	{
	display: block;
	text-decoration: none;
	overflow: hidden; /* IE */
	font-weight: normal;
	border: none;
	padding: 8px 4px 0 2px;
	margin-right: 12px;
	color: #525252;
	}

#menu .hot a
	{
	font-weight: bold;
	background-color: #fff;
	color: #000;
	}

#menu .not a
	{
	font-weight: normal;
	color: #666;
	}

#menu ul a:hover
	{
	background-color: #f4f3f2;
	color: #000;
	}

#menu ul a:active
	{
	color: white;
	background-color: #353229;
	font-weight: bold;
	}

* html #menu a
	{
/*	IE fill width */
	width: 100%;
	}


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	Headlines for graduated semantic markup
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

h1	{ font-size: 300%; }
h2	{ font-size: 250%; }
h3	{ font-size: 200%; }
h4	{ font-size: 160%; }
h5	{ font-size: 130%; }
h6	{ font-size: 110%; }


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	SPECIAL ELEMENTS
	These will be used for semantic markup
	but styled as required per selector.
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

pre,code,tt
	{
	font-family: "Andale Mono",Courier,monospace;
	font-size: 100%;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	}

q, ins, del
	{
	font-size: 100%;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: none;
	}

table,thead,tbody,tfoot,tr,td
	{
	margin: 0;
	padding: 0;
/*	quirky because of Opera */
	border: 0 solid;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	ANCHORS
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

a	{
	cursor: pointer;
	background-color: transparent;
/*	!important for Safari's benefit */
	text-decoration: none !important;
	color: #06F;
	}

a:link
	{
	background-color: transparent;
	text-decoration: none;
	}

a:visited
	{
	background-color: transparent;
	text-decoration: none;
	color: #009;
	}

a:hover
	{
	background-color: transparent;
	text-decoration: underline;
	color: #C00;
	}

a:active
	{
	background-color: transparent;
	text-decoration: underline;
	}

a img
	{
	border: none;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	COSMETICS
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

body
	{
/*	stops jumpiness in Mozilla
	by maintaining scroll area */
	overflow: -moz-scrollbars-vertical;
	}

a:focus
	{
/*	eliminates selection marquee
	around Mozilla links */
	-moz-outline-style: none;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	CLEARFIX
	Wherever a float is nested within a container box
	with a visible border or background, the container
	does not automatically resize with the float.
	This is a fix which is described in depth here: 
	http: //www.positioniseverything.net/easyclearing.html
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.clearfix:after
	{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}

.clearfix
	{
	display: inline-table;
	}

/*	Hides from IE-mac \*/
*	html .clearfix { height: 1%; }
	.clearfix {display: block;}
/*	End hide from IE-mac */


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	FORMAT SHORTCUTS
	Can be used for an exclusive deviation,
	e.g. <h6 class="someClass right">Hello World</h6>
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

.left
	{
	text-align: left;
	}

.right
	{
	text-align: right;
	}

.center
	{
	text-align: center;
	}

.justify
	{
	text-align: justify;
	}

.sans
	{
	font-family: "Lucida Grande","Trebuchet MS",Lucida,sans-serif;
	}

.serif
	{
	font-family: "Georgia",Charter,Times,sans-serif;
/*	font-family: Palatino,"Palatino Linotype","Book Antiqua",serif; */
	}

.ignore
	{
	display: none;
	}

.error
	{
	color: #900 !important;
	font-weight: bold;
	line-height: 1.3;
	}

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

ul.bulleted li,
ol.bulleted li
	{
	list-style-type: disc;
	margin-left: 1.1em;
	}

ul.numbered li,
ol.numbered li
	{
	list-style-type: decimal;
	margin-left: 1.6em;
	}


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	BUTTON FIX
	Eliminates excess padding on buttons in IE6.
	Usage: <input type="button" class="button"/>
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

input.button
	{
	padding: 0 1em;
	width: 0;
	overflow: visible;
	cursor: pointer;
	}

input.button[class]
	{
/*	IE ignores [class] */
	width: auto;
	}
	
/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	FORMS
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

input,select,textarea
	{
/*	especially to counteract Mozilla form font */
	font-family: "Lucida Grande","Trebuchet MS",Lucida,sans-serif;
	font-size: 100%;
	}

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
	PAGE STYLES
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

#header
	{
	}

#header h1,
#header h3
	{
	line-height: 1;
	margin: 0;
	padding: 0;
	display: none;
	}

#logo
	{
	position: relative;
	text-align: center;
	}

#hours
	{
	position: relative;
	width: 50%;
	height: 120px;
	}

#hours ul
	{
	margin: 0;
	padding: 30px 0;
	text-align: right;
	}

#hours ul li
	{
	list-style: none;
	font-size: 100%;
	height: 20px;
	}

#locations 
	{
	width: 50%;
	position: relative;
	left: 50%;
	overflow: visible;
	}

#locations h5
	{
	line-height: 1.5;
	padding: 20px 0 0 0;
	cursor: default;
	}

#locations dl
	{
	margin: 7px 0;
	cursor: pointer;
	width: 19em;
	position: relative;
	}

#locations dl dt
	{
	margin: 0;
	background: url(assets/expand.gif) no-repeat left center;
	padding-left: 20px;
	}

#locations dl dd
	{
	margin: 0;
	padding: 0 0 0 1em;
	}

#locations dl dt
	{
	font-weight: bold;
	}

#locations dt:hover
	{
	color: #9A0167;
	text-decoration: underline;
	}

#locations dl dd
	{
	color: black;
	display: none;
	line-height: 1.5;
	}

#locations dl.opened
	{
	margin-left: -10px;
	background-color: #E6E6B0;
	padding: 10px;
	border: 1px solid white;
	}

#locations dl.opened dt
	{
	background: url(assets/contract.gif) no-repeat left center;
	padding-left: 20px;
	margin-bottom: 5px;
	}

#locations dl.opened dd
	{
	display: block;
	}

#locations a
	{
	color: #9A0167;
	text-decoration: underline !important;
	line-height: 2;
	}