/************************************************************************************************/
/* MAIN BODY SETTING */

body {
	background-color: black;
    text-align: center;
    color: white;
    font: 11px verdana, sans-serif;

}

/* THE MAIN MIDDLE SECTION - this is the red section that everything is enclosed in */
#wrapper {
    text-align: left;
    margin: 15px auto;
    width: 780px;
    position: relative;
    background: maroon url(images/bg.jpg) repeat-y;
    
}

h3 {
    font: underline bold 20px;
}


/************************************************************************************************/
/* NO UGLY BLUE LINKS */ 

/* -this keeps text hyperlinks a non-blue color */
a   {   color: #fff;    
}

/* -this keeps image hyperlinks a non-blue color */
img {	border: 0;
  
}



/************************************************************************************************/
/* GALLERY PICTURES - sizes for the gallery pictures are on the aspx page */

/* The Main Frame that encloses all the pictures*/
#gallery {
	border: 1px solid #9F0408;
	background: #750306;
	margin: 13px 10px 10px 6px;
	
	/*margin: 13px 10px 10px 6px;*/
	height: 281px;
    position: relative;
}

/* Little styling image above the gallery
#galdotdot {
  background: 120px 0.5em url(home/images/dot_dot_dash.jpg) no-repeat;
}*/

/* this pushes the pictures to the left hand side of the page */
#push-gal-left {
	float: left;
	width: 278px;
	padding-left: 28px;
	padding-top: 10px;
}

/* This is places the large picture at the top and the 3 little ones at the bottom*/
.gal {
	background: #9F0408;
	padding: 4px;
	position: absolute;
}

/* The Large Picture at the top*/
#gzero {
	top: 7px;
	left: 15px;
	width: 221px;
}

/*The small picture on the left*/
#gone {
	top: 210px;
	left: 15px;
	width: 57px;
}

/*The small picture in the middle*/
#gtwo {
	top: 210px;
	left: 98px;
	width: 57px;
}

/*The small picture on the right*/
#gthree {
	top: 210px;
	left: 179px;
	width: 57px;
}




/************************************************************************************************/
/* LOGOs and BACKINGs */

/* This is the main logo on the home page */
#head-1 {
	background: url(images/head_1.jpg) no-repeat;
	width: 409px;
	height: 386px;
	top: 0;
	left: 369px;
	position:absolute;
}

/* This is the main logo backing on the alternate pages (NOT the home page) */
#head-2 {
	/*background: url(images/head_2.jpg) no-repeat;*/
	background: url(images/head_4.jpg) no-repeat;
	width: 409px;
	height: 386px;
	top: 0;
	left: 369px;
	position:absolute;
}

/* This is the background image used behind the title */
#titleback {
    background: url(images/logo.jpg) no-repeat;
    height: 172px;
    top:0px;
    left:0px;
    position:static;
}




/************************************************************************************************/
/* Settings for the main title on every page*/
h1 {

    color: white;
    font-weight: normal;
}

/* this is the small gray letters sitting to the left of the main title, studio*/
h1 .hone { 
    color: Gray;
    font-size: 28px;
    top: 2.70em;
    left: 1.75em;
    position: absolute;
}

/* this is the center part of the title "studio" */
h1 .htwo {
    top: 1.15em;
    left: 2.0em;
    font: 50px Keaton, "Arial Narrow", "Tahoma", arial, sans-serif;
    position: absolute;
}

/* This is the small gray text UNDER 'studio'*/
h1 .hthree {
    color: Gray;
    font-size: 16px;
    top: 7.10em;
    left: 6.25em;
    position: absolute;
}




/************************************************************************************************/
/* This is the heading sub-title for each page (NOT the default pages. */
h2 {
    color: white;
    font-weight: normal;
}

/* this is the small gray letters sitting to the right of the main title, studio*/
h2 .hone { 
    color: Gray;
    font-size: 36px;
    top: 4.25em;
    left: 1.75em;
    position: absolute;
}

/* this is the center part of the title "studio" */
h2 .htwo {
    top: 2.5em;
    left: .5em;
    font: 72px Keaton, "Arial Narrow", "Tahoma", arial, sans-serif;
    position: absolute;
}

/* This is the small gray text UNDER */
h2 .hthree {
    color: Gray;
    font-size: 28px;
    top: 9.0em;
    left: 4.0em;
    position: absolute;
}

/* this is the small gray letters sitting to the right of the main title, studio. This is specifically for the Music Lab Page. */
h2 .music { 
    color: Gray;
    font-size: 36px;
    top: 3.0em;
    left: 3.0em;
    position: absolute;
}

/* this is the center part of the page title. This is specifically for the Music Lab Page. */
h2 .lab {
    top: 1.25em;
    left: 3.0em;
    font: 72px Keaton, "Arial Narrow", "Tahoma", arial, sans-serif;
    position: absolute;
}


/************************************************************************************************/
/* MENU 
    - also see .clear for alternate menu links
    - the colors for the main menu are changed on within the aspx page  
    - menu items are seperated with a horizontal line, which is an image, edited on the aspx page */

/* positioning the menu. Indented slightly, spaced at the bottom, 5px padding */
.menupos {
    padding: 0px 0px 25px 50px;
}

.IE8Fix {
	z-index: 100;
}



/************************************************************************************************/
/* DESCRIPTIONS */

/* the explanation paragraph that is on the right hand side of the page 
    - this will float to the right, and has cushion on the right side*/
#body-right {
	float: right;
	width: 388px;
	padding-top: 375px;
	padding-right: 22px;
}

/* the explanation paragraph that is just under the main body-right explanation.
    - this will center itself just under body right.*/
#body-under-right {
	width: 388px;
    padding: 5px 5px 25px 50px;
	font-size:16px;
}

/* this is decribed on the home page. This is intended to highlight the teachers that teach
   at the studio */
#meet-our-teachers {
	font-size:16px;
	color:gray;
}

/* the explanation paragraph that is on the left hand side of the page 
    - this will float to the left, and has cushion on the left side*/
#body-left {
	float: left;
	width: 388px;
    padding: 0px 0px 25px 50px;
}

/* not sure if this is used, CHECK */
#body-center {
    text-align: center;
	
}

/* this is to center the google calendar which is 740 pixels in width (red wrapper is 780) */
#calendarstyle {
    padding: 20px 20px 20px 20px;
}

/* Larger Font - Accenuates "the Studio" name within paragraphs */
.emphasis   {
    font-style:inherit;
    font-family:Arial Unicode MS;
    font-size:x-large;
}

/* This is a "break" that pushes the footer to the bottom of the page 
    -also puts a 5 pixels of padding on the top and bottom of the altermante menu links */
.clear {
    padding: 5px 0px 5px 0px;
    border-top: 1px solid #983234;
	clear: both;
}

 /*Footer - at the bottom of the page that 
            - Aligns Right
            - puts a horizontal border above the footer
            - Changes the font color into something less distracting
            - And puts spacing around the text */
#footer     {
	text-align: right;
	color: #CD3639;
	border-top: 1px solid #983234;
	padding: 6px 25px 20px 0;
}



/************************************************************************************************/
/* MAP -this is located on the Contact.aspx page. */

#maploc {
	width: 409px;
	height: 386px;
	top: 175px;
	left: 340px;
/*	border: solid 8px #983234;*/
	position: absolute;
}


/************************************************************************************************/
/* CONTACT PAGE - This is the writing for the address */
#nav1 {
	margin: 11px 25px 25px 70px;
	font-size: 12px;
}

/* CONTACT PAGE - This is the writing for the driving directions*/
#nav2 {
	margin: 0px 25px 25px 35px;
	font-size: 12px;
}

/************************************************************************************************/
/* PAGE FORMATTING - This is used for formatting texts throughout the website */

/* every paragraph will have a padding around it*/
p {
 margin: 10px 30px 15px 30px;  
}

/* This is the pictue that is located next to the "Who Am I" paragraphs in the Music and
    movement page and the piano lesson page*/
#whoamipic 
{

    padding: 10px 10px 10px 10px;
    float:left;
}

/* This styling is the button for downloading lorraine's schedule. It makes multiple lines of text line up on the right side */
#buttonfloating
{
    margin-left: 10px;
    float:left;
}

/* This is the table tha borders he calendar*/
#tableEvent 
{
    background-color: Maroon;
    text-align:center;
    font-family:Arial;
    /*background-image: url(images/00.jpg);*/
}

/* This is a table on the Music Links page, to organize each category */
#tableLinkPage
{
	padding:0px 25px 25px 25px;
	width: 75%
}

/* REMOVED 08/02/09
#tablePrice
{
	 margin: 10px 30px 15px 30px;	
}
*/

#musiclab-paragraph
{
	float: right;
	width: 388px;
	padding-right: 22px;
}