/* 
==============================
ThePianoStudio.com Basic Style Sheet
==============================
This CSS cucumber was pickled by:
>> Kyle Dutka at See Design
>> www.seedesign.ca | kyle [at] seedesign.ca
------------------------------
CSSed in Canada inside an igloo with 
dial-up internet powered by beaver
fur and pemmican that was purchased
with coloured money from the Queen.
------------------------------

==============================
Notes
==============================
- Play Dodgeball with Nice Browsers (PDwNB) 
  refers to using [id], [class], etc. to hide that 
  element from IE6 in order to apply the AlphaImageLoader
  or another "hack" in ie6.css and force proper display in IE6
- Make IE Sit in the Corner (MIEsitC) refers to using the
  * hack to display only to IE6 and IE7.
- We do indeed actually play Dodgeball with the
  Nice Browsers (Firefox, Safari, etc.)
- IE 7 may be considered a Nice Browser due to it's 
  native transparent PNG support, but then again it's 
  Microsoft - so we're still deciding.
------------------------------

==============================
Table of Contents
==============================
1.1 General Styles
2.1 Structure
3.1 Header
4.1 Navigation: Main
5.1 Content: Titles
5.2 Content: Home
------------------------------

==============================
Colour Palette
==============================
#000000 - Black
#FFFFFF - White
#FFC601 - Piano Studio Yellow
#004A39 - Piano Studio Green
#00251A - Deep Forest Green
------------------------------

==============================
Layers (z-index)
==============================
100 - CMS Editing Bar
 10 - Main Navigation (#nav)

  8 - Main Navigation UL (#nav ul)
  7 - Logo (#logo)
  6 - Slogan (#slogan)
------------------------------
*/


/* 
==============================
1.1 General Styles
============================== 
*/

body {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 12px;
	line-height: 20px;
	font-family: "Lucida Sans Unicode","Lucida Sans", Verdana, Tahoma, Helvecita, Arial;
	background: url(../../images/page_bkg.png) top left repeat-x #00251A;
	}

.clear_both {
	clear: both;
	}

.hide {
	text-indent: -7777777px;
	}

/* --- Header and Paragraph --- */

h1 {
	padding: 0;
	margin: 5px 0 0 0;
	font-size: 18px;
	font-weight: normal;
	}

h2 {
	padding: 0;
	margin: 5px 0 0 0;
	font-size: 16px;
	font-weight: normal;
	}

h3 {
	font-size: 14px;
	}

h4 {
	font-size: 12px;
	font-weight: normal;
	}

p {
	position: relative;
	margin: 0;
	padding: 5px 0 5px 0;
	}

.content ol, .content ul {
	margin: 0;
	padding: 3px 0 3px 40px;
	}

/* --- Links --- */

a {
	position: relative;
	padding-bottom: 2px;
	color: #999999;
	text-decoration: underline;
	z-index: 999999999;
	}

a:hover {
	text-decoration: none;
	}

/* --- Images --- */

img {
	border: none;
	}
	
.content img {
	padding: 5px;
	}

/* --- Images --- */

.divider {
	color: #999999;
	vertical-align: middle;
	}

/* 
==============================
2.1 Site Structure
==============================
*/

#container {
	position: relative;
	width: 950px;
	margin: 0 auto;
	}

#error {
	background: #FF0000;
	}

#header {
	position: relative;
	height: 200px;
	margin: 0 25px 0 25px;
	padding: 0;
	}

#nav {
	padding: 0 0 0 25px;
	}


/* PDwNB */
#nav[id] {
	position: relative;
	height: 65px;
	margin: 0 25px -20px 25px;
	background: url(../../images/nav_bkg.png) top left repeat-x;
	}

#main {
	margin: 0;
	padding: 0;
	}

/* PDwNB */
#main[id] {
	background: url(../../images/main_bkg.png) top left repeat-y;
	}

#main_content {
	min-height: 400px;
	/* MIEsitC - Min-Height Fast Hack */
	height: auto !important;
	height: 400px;
	/* End MIEsitC */
	margin: 0 25px 0 25px;
	padding: 0 10px 0 10px;
	background: url(../../images/main_content_bkg.png) top left no-repeat;
	}

/* --- General Columns --- */

#column1 {
	float: left;
	min-height: 400px;
	/* MIEsitC - Min-Height Fast Hack */
	height: auto !important;
	height: 400px;
	/* End MIEsitC */
	width: 680px;
	margin: 0;
	padding: 0;
	}

/* PDwNB */
#column1[id] {
	background: url(../../images/column1_bkg.png) bottom left no-repeat;
	}

#column2 {
	float: left;
	height: 300px;
	width: 165px;
	margin: 10px 0 0 0;
	padding-left: 5px;
	}

#column_both {
	float: left;
	min-height: 400px;
	/* MIEsitC - Min-Height Fast Hack */
	height: auto !important;
	height: 400px;
	/* End MIEsitC */
	width: 850px;
	padding: 0;
	}

#column_both[id] {
	margin: 0 0 0 15px;
	background: url(../../images/column_both_bkg.png) bottom left no-repeat;
	}

#column1 .content {
	margin: 15px 30px 40px 30px;
	}

#column2 .content {

	}

#column_both .content {
	position: relative;
	margin: 15px 35px 40px 35px;
	}

/* --- Homepage Columns --- */

#pageid_home #column1 {
	float: right;
	min-height: 400px;
	/* MIEsitC - Min-Height Fast Hack */
	height: auto !important;
	height: 400px;
	/* End MIEsitC */
	width: 600px;
	margin: 0;
	padding: 0;
	}

#pageid_home #column1[id] {
	background: url(../../images/column1_bkg_home.png) bottom left no-repeat;
	}

#pageid_home #column2 {
	float: left;
	height: 300px;
	width: 290px;
	margin: 0;
	padding: 0;
	}

#pageid_home #column2 .content {
	margin: 10px 30px 40px 0px;
	}

/* --------------------- */

#footer {
	clear: both;
	height: 60px;
	margin: 0;
	padding: 7px 25px 0 25px;
	text-align: center;
	}

#footer[id] {
	background: url(../../images/footer_bkg.png) top left no-repeat;
	}

/*
==============================
3.1 Header
==============================
*/

/* --- Header Images --- */

#pageid_home #header, #pageid_contact #header, #pageid_privacy #header, #pageid_login #header, #pageid_careers #header {
	background: url(../../images/header_home.jpg) top left no-repeat;
	}

#pageid_pianos #header, #pageid_used #header {
	background: url(../../images/header_pianos.jpg) top left no-repeat;
	}

#pageid_books #header {
	background: url(../../images/header_books.jpg) top left no-repeat;
	}

#pageid_about #header, #pageid_rental #header {
	background: url(../../images/header_about.jpg) top left no-repeat;
	}

#pageid_school #header, #pageid_school_locations #header, #pageid_school_guitar #header, #pageid_school_voice #header, #pageid_school_theory #header  {
	background: url(../../images/header_school.jpg) top left no-repeat;
	}

#pageid_school_piano #header {
	background: url(../../images/header_school_piano.jpg) top left no-repeat;
	}

#pageid_school_violin #header {
	background: url(../../images/header_school_violin.jpg) top left no-repeat;
	}

/* 
==============================
4.1 Navigation: Main
============================== 
*/

#nav ul {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0 0 0 30px;
	z-index: 12;
	}

#nav li {
	display: block;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
	cursor: default;
	border-width: 0;
	}

#nav li.divider {
	height: 55px;
	width: 10px;
	padding: 0 3px 0 1px;
	margin: 0;
	background: url(../../images/nav_divider.png) top left no-repeat;
	}

#nav li li a {
	display: block;
	font-weight: normal;
	}

#nav li li a:hover {
	padding-left: 5px;
	border-bottom: none;
	font-weight: bold;
	}

/* --- Drop Down Set-up --- */

#nav li ul {
	display: none;
	width: 140px;
	position: absolute;
	top: 100%;
	left: 0;
	margin: auto;	
	font-weight: normal;
	}

/* PDwNB */
#nav[id] li ul {
	padding: 10px 0 0 0;
	}

#nav li>ul {
	top: auto;
	left: auto;
	}

#nav li li {
	display: block;
	background-color: transparent;
	border: 0;
	text-align: center;
	}

/* MIEsitC */
#nav li li {
	*float: left;
	}

/* PDwNB */
#nav[id] li li {
	float: none;
	clear: left;
	margin-left: 20px;
	}

#nav li:hover ul, #nav li.over ul {
	display: block;
	left: -40px;
	}

/* --- Image Replacement --- */

#nav a {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	text-indent: -7777777px;
	height: 54px;
	}

#nav a:hover {
	background-position: 0 -55px;
	}
	
#nav_about a {
	width: 70px;
	background: url(../../images/nav_about.png) top left no-repeat;
	}

#nav_school a {
	width: 120px;
	background: url(../../images/nav_school.png) top left no-repeat;
	}

#nav_pianos a {
	width: 65px;
	background: url(../../images/nav_pianos.png) top left no-repeat;
	}

#nav_rental a {
	width: 70px;
	background: url(../../images/nav_rental.png) top left no-repeat;
	}

#nav_books a {
	width: 175px;
	background: url(../../images/nav_books.png) top left no-repeat;
	}

#nav_contact a {
	width: 75px;
	background: url(../../images/nav_contact.png) top left no-repeat;
	}

#nav_home a {
	width: 60px;
	background: url(../../images/nav_home.png) top left no-repeat;
	}

#nav_logout a {
	width: 65px;
	background: url(../../images/nav_logout.png) top left no-repeat;
	}
	
#nav_careers a{
	width: 74px;
	background: url(../../images/nav_careers.png) top left no-repeat;
	}

/* --- Nav on Pages --- */

#pageid_about #nav_about a, 
#pageid_school #nav_school a, #pageid_school_locations #nav_school a,
#pageid_school_piano #nav_school a, #pageid_school_violin #nav_school a, 
#pageid_school_guitar #nav_school a, #pageid_school_voice #nav_school a, 
#pageid_school_theory #nav_school a, 
#pageid_pianos #nav_pianos a, #pageid_pianos_kawai #nav_pianos a, 
#pageid_pianos_roland #nav_pianos a, #pageid_pianos_suzuki #nav_pianosi a, 
#pageid_pianos_used #nav_pianos a,  #pageid_rental #nav_rental a, 
#pageid_books #nav_books a, #pageid_contact #nav_contact a, #pageid_home #nav_home a,
#pageid_careers #nav_careers a, {
	background-position: 0 -55px;
	}

/* 
==============================
4.2 Navigation: Sub
============================== 
*/

#nav_sub {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0 0 0 25px;
	z-index: 12;
	}

#nav_sub li {
	display: block;
	float: left;
	position: relative;
	margin: 0;
	padding: 0 0 0 7px;
	height: 40px;
	text-align: left;
	cursor: default;
	border-width: 0;
	}

#nav_sub a {
	position: relative;
	text-indent: -777777px;
	float: left;
	height: 40px;
	width: 75px;
	border-bottom: 1px solid #FFFFFF;
	}

#nav_sub a:hover {
	border-bottom: 1px solid #CCCCCC;
	}

/* --- Image Replacement --- */

#nav_pianos_kawai a {
	width: 130px;
	background: url(../../images/nav_pianos_kawai.png) top left no-repeat;
	}

#nav_pianos_roland a {
	width: 155px;
	background: url(../../images/nav_pianos_roland.png) top left no-repeat;
	}

#nav_pianos_suzuki a {
	width: 140px;
	background: url(../../images/nav_pianos_suzuki.png) top left no-repeat;
	}

#nav_pianos_used a {
	width: 125px;
	background: url(../../images/nav_pianos_used.png) top left no-repeat;
	}

#nav_school_piano a {
	width: 66px;
	background: url(../../images/nav_school_piano.png) top left no-repeat;
	}

#nav_school_violin a {
	width: 65px;
	background: url(../../images/nav_school_violin.png) top left no-repeat;
	}

#nav_school_guitar a {
	width: 70px;
	background: url(../../images/nav_school_guitar.png) top left no-repeat;
	}

#nav_school_voice a {
	width: 65px;
	background: url(../../images/nav_school_voice.png) top left no-repeat;
	}

#nav_school_theory a {
	width: 80px;
	background: url(../../images/nav_school_theory.png) top left no-repeat;
	}
	
#nav_school_drums a {
	width: 80px;
	background: url(../../images/nav_school_drums.png) top left no-repeat;
	}

#nav_school_locations a {
	width: 75px;
	background: url(../../images/nav_school_locations.png) top left no-repeat;
	}

/* 
==============================
5.1 Content: Titles
==============================
*/

/* --- Set-up --- */

.title {
	text-indent: -7777777px;
	}

h1.title {
	height: 50px;
	width: 550px;
	margin: 0 0 8px 0;
	padding: 0;
	}	

/* --- Titles --- */

#title_news {
	background:  url(../../images/title_news.png) top left no-repeat;
	}

#title_about {
	background:  url(../../images/title_about.png) top left no-repeat;
	}

#title_school_piano {
	background:  url(../../images/title_school_piano.png) top left no-repeat;
	}

#title_school_violin {
	background:  url(../../images/title_school_violin.png) top left no-repeat;
	}

#title_school_guitar {
	background:  url(../../images/title_school_guitar.png) top left no-repeat;
	}

#title_school_voice {
	background:  url(../../images/title_school_voice.png) top left no-repeat;
	}

#title_school_theory {
	background:  url(../../images/title_school_theory.png) top left no-repeat;
	}
	
#title_school_drums {
	background:  url(../../images/title_school_drums.png) top left no-repeat;
	}

#title_school_locations {
	background:  url(../../images/title_school_locations.png) top left no-repeat;
	}

#title_pianos_pianos_main {
	background:  url(../../images/title_pianos.png) top left no-repeat;
	}

#title_pianos_kawai {
	background:  url(../../images/title_pianos_kawai.png) top left no-repeat;
	}

#title_pianos_roland {
	background:  url(../../images/title_pianos_roland.png) top left no-repeat;
	}

#title_pianos_suzuki {
	background:  url(../../images/title_pianos_suzuki.png) top left no-repeat;
	}

#title_pianos_used {
	background:  url(../../images/title_pianos_used.png) top left no-repeat;
	}

#title_rental {
	background:  url(../../images/title_rental.png) top left no-repeat;
	}

#title_books {
	background:  url(../../images/title_books.png) top left no-repeat;
	}

#title_contact {
	background:  url(../../images/title_contact.png) top left no-repeat;
	}

#title_careers {
	background:  url(../../images/title_careers.png) top left no-repeat;
	}
/* 
==============================
5.2 Content: Home
==============================
*/

/* --- Promos --- */

#pageid_home #column2 {
	position: absolute;
	}

#promo1 a {
	position: relative;
	margin: 0 0 0 -10px;
	padding: 0;
	float: left;
	text-indent: -7777777px;
	height: 170px;
	width: 295px;
	cursor: pointer;
	}

#promo1[id] a {
	background: url(../../images/home_promo_school.png) top left no-repeat;
	}

#promo2 a {
	position: relative;
	margin: 0 0 0 -10px;
	padding: 0;
	float: left;
	text-indent: -7777777px;
	height: 170px;
	width: 295px;
	cursor: pointer;
	}

#promo2[id] a {
	background: url(../../images/home_promo_pianos.png) top left no-repeat;
	}

#promo1 a:hover, #promo2 a:hover {
	background-position: 0 -200px;
	}

/* --- Contact Info --- */

#contact {
	margin: 20px 0 0 0;
	}

#contact h1 {
	margin: 20px 0 0 0;
	padding: 0;
	color: #004A39;
	font-size: 14px;
	font-weight: bold;
	}

#contact h2 {
	margin: 0;
	padding: 0;
	color: #004A39;
	font-size: 14px;
	font-weight: normal;
	}

#contact p {
	margin: 0;
	padding: 0;
	color: #666666;
	font-size: 12px;
	font-weight: normal;
	}

/* 
==============================
5.2 Forms
==============================
*/

/* --- Rental and Contact Forms --- */

#column2 input {
	width: 180px;
	}

#column2 input.captcha {
	width: 50px;
	margin-right: 5px;
	border: none;
	border-bottom: 1px solid #666666;
	font-weight: bold;
	background: transparent;
	}

#column2 input.submit {
	width: 75px;
	margin-top: 5px;
	}

#column2 textarea {
	width: 180px;
	height: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 10px 0 10px 0;
	}

#column2 p {
	margin: 3px 0 0 0;
	padding: 0;
	}




/*
==============================
6.1 Footer
==============================
*/

#footer p {
	margin: 0;
	padding: 0;
	font-size: 10px;
	color: #999999;
	}

#footer a {
	color: #999999;
	text-decoration: underline;
	}

#footer a:hover {
	color: #666666;
	text-decoration: none;
	}


/*
------------------------------------------------------------------------------------------
Your {CREATIVITY} is RESTRICTED [when you think] your creativity is BOUND by your {ABILITY}.
םֹולָׁש 
------------------------------------------------------------------------------------------
*/