/* 
==============================
Spring Rains 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
#000101 - Deep Forest Green
------------------------------

==============================
Layers (z-index)
==============================
100 - CMS Editing Bar
 10 - Main Navigation (#nav)
  9 - Swirls (#swirls)
  8 - Main Navigation UL (#nav ul)
  7 - Logo (#logo)
  6 - Slogan (#slogan)
------------------------------
*/


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

body {
	padding: 30px 0 0 0;
	color: #000101;
	font-size: 12px;
	line-height: 20px;
	font-family: "Lucida Sans Unicode","Lucida Sans", Verdana, Tahoma, Helvecita, Arial;
	background: url(../../images/page_bkg.jpg) top center no-repeat;
	}

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

h1 {
	font-size: 1.3em;
	margin: 0;
	padding: 0;
	}

h2 {
	font-size: 1em;
	}

h3 {
	font-size: 0.8em;
	}

h4 {
	font-size: 0.8em;
	font-weight: normal;
	}

p {
	margin: 5px 0 0 0;
	}

/* --- Links --- */

a {
	position: relative;
	padding-bottom: 2px;
	text-decoration: underline;
	color: #ff8202;
	}

a:hover {
	text-decoration: underline;
	}

/* --- Images --- */

.content_main img {
	margin: 5px;
	padding: 0;
	}

#pageid_team .content_main img {
	margin: 3px 6px 2px 0;
	padding: 0;
	}

/* --- Forms --- */

input {
	width: 125px;
	}
	
textarea {
	font-family: "Lucida Sans Unicode","Lucida Sans", Verdana, Tahoma, Helvecita, Arial;
	width: 200px;
	}



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

#container {
	width: 850px;
	min-height: 850px;
	height: auto !important;
	height: 850px;
	margin: 0 auto;
	}
#container[id] {
	background: url(../../images/main_bkg.png) top left no-repeat;
	}

#error {
	background: #FF0000;
	}

#header {
	position: relative;
	width: 660px;
	margin: 0 0 0 0px;
	padding: 15px 0 0 5px;
	}

#logo {
	position: relative;
	height: 190px;
	width: 685px;
	margin: 0 0 18px 65px;
	text-indent: -7777777px;
	z-index: 100;
	}

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

#nav {
	display: block;
	position: relative;
	height: 45px;
	margin: 50px 0 0 90px;
	padding: 0;
	list-style: none;
	z-index: 10;
	}

#nav[id] {
	margin: -9px 0 0 105px;
	}

#main {
	position: relative;
	clear: both;
	width: 660px;
	margin: 0 0 0 55px;
	padding: 15px 0 5px 25px;
	overflow: auto; 
	}

#column1 {
	float: left;
	width: 495px;
	padding-right: 5px;
	}

#column2 {
	float: left;
	width: 155px;
	padding-left: 5px;
	}
	
	
	#pageid_home #column1 {
		float: left;
		width: 400px;
		padding-right: 5px;
		}
	
	#pageid_home #column2 {
		float: left;
		width: 240px;
		padding-left: 5px;
		}

	#pageid_contact #column1 {
		float: left;
		width: 345px;
		padding-right: 5px;
		}
	
	#pageid_contact #column2 {
		float: left;
		width: 295px;
		padding-left: 5px;
		}

#column_both {
	width: 660px;
	}

#footer {
	clear: both;
	margin: 10px 0 0 60px;
	}

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


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

#nav a {
	color: #000101;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	}

#nav a:hover {
	text-decoration: none;
	}

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

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

#nav li {
	display: block;
	float: left;
	position: relative;
	padding: 4px 0 5px 15px;
	text-align: left;
	cursor: default;
	border-width: 1px 0;
	}

#nav li.divider {
	padding: 8px 10px 0 10px;
	margin: 0;
	color:#FF9933;
	}

/* --- 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;
	float: left;
	text-indent: -7777777px;
	height: 40px !important; 
	}

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

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

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

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

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

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

/* --- Page On --- */

#pageid_home #nav_home a, #pageid_news #nav_home a, #pageid_about #nav_about a, 
#pageid_team #nav_team a, #pageid_contact #nav_contact a, #pageid_payments #nav_payments a {
	background-position: 0 -45px;
	}



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

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

#main h1 {
	height: 50px;
	width: 325px;
	margin: 5px 0 5px 0;
	padding: 0;
	text-indent: -7777777px;
	}	
	
#title_home[id] {
	margin-left: -10px;
	background: url(../../images/title_home.png) top left no-repeat;
	}

#title_news[id] {
	width: 100px;
	background: url(../../images/title_news.png) top left no-repeat;
	}

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

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

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

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

input.text {
	background: none;
	font-size: 14px;
	width: 175px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid #CCCCCC;
	}

input:focus {
	border-bottom: 1px solid #666666;
	}

input.submit {
	width: 60px;
	}


input.captcha {
	font-size: 14px;
	width: 50px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid #CCCCCC;
	}

textarea {
	background: none;
	width: 255px;
	height: 140px;
	border: 1px solid #CCCCCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size: small;
	}

form {
	position: relative;
	margin: 0;
	padding-top: 5px;
	}


/* 
==============================
5.2 Content: Home
==============================
*/

/* --- Headline --- */

#headline {
	position: relative;
	height: 300px;	
	width: 400px;
	margin: 5px;
	overflow: hidden;
	border: none;
	}

/* 
==============================
5.2 Content: Footer
==============================
*/

#footer {
	color: #999999;
	font-size: 11px;
	}

#footer .divider {
	color: #CCCCCC;
	}

#footer a {
	color: #999999;
	text-decoration: none;
	border-bottom: 1px dashed #CCCCCC;
	padding-bottom: 1px;
	}

#footer a:hover {
	color: #666666;
	text-decoration: none;
	border-bottom: 1px dashed #CCFF00;
	padding-bottom: 1px;
	}




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