@charset "UTF-8";
/* CSS Document */
/*Last Updated: 4/12/2010 By: Peggy*/


#body  
{
	text-align: center; /* This is a fix for earlier versions of Internet Explorer */
	background-color: #d6dcea; /* You can change the background color here for the areas to the left and right of the main page area */
	
} 


#main_wrapper 
{
	width: 840px;    /*This controls the overall width of the page.  Do not change as it will break many of the layouts */
	text-align: left; /* Resets the IE fix from above */
	margin: auto; /*This centers the web page in the brower */
	font-family: Verdana, Geneva, sans-serif; /* This controls the font for the entire site. */
	font-size: .75em; /*This determines the default font-size across the entire site. */
	color: #FFF; /*This sets the default font-color across the entire site */
	line-height: 150%   /*This controls the line spacing on all pages of the website*/
}


#banner_wrapper 

{
	background-image: url(pmtaBanner.jpg);  /*This is the background image for the banner.. the area that includes the navigation bar and the PMTA logo. */
	height: 117px /* a height is defined that is the height of pmtaBanner.jpg or else the background image would only be partially visible */
}

#teach_wrapper 
{
	background-image: url(pianoGirl.jpg);  /*This is the image of the girl playing the piano */
	height: 296px; /* A height is defined as the height of the background image in order to ensure that the entire image is displayed */
}

#teach 
{
	padding-top: 50px; /* This positions the "Find a teacher near you" and additional text 50px below in the teach_wrapper container */
	padding-left: 40px /* This positions the content 40 px into the layout from the left edge */
}


#content_wrapper /*This is the main container that holds the "welcome to PMTA section as well as comparable sections across the entire website */
{
	background-color: #556387
} 

#content2_wrapper /*This is the main container for the sections with the darker blue background directly above the footer section */
{
	background-color: #3d4969
}    


#footer_wrapper  /*This is the main container for the footer section */
{
clear: left;
background-color: #2a334c;
padding: 20px 40px	
}

#welcome /* This is the area on the home page that says "welcome to PMTA" as well as comparable sections across the entire website */
{
	font-size: 24px;  /* Defines the font size for this section across all pages of the web site */
	padding-top: 20px; /* Brings the content 20px below the top of this container */
	padding-left: 40px; /*This sets this section 40 pixels in from the left of the main page content */
	padding-bottom: 10px; /*This pushes the content of this section down 10px from the top of this container */
}

#contactabout
{
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 20px
}



#leftun1 /* These styles apply to the content in the large map section of the Find a Teacher page */
{
	float: left;
	padding-left: 40px;
	padding-top: 20px;
	width: 65%;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #6d7fa7
}


#additional 
{
	padding-left: 40px;
	padding-top: 20px
}

#additional2
{
	float: left;
	width: 45%;
	padding-left: 40px;
	padding-right: 20px	
}


#leftun 
{
	float: left;
	padding-left: 40px;
	padding-top: 20px;
	width: 70%;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #6d7fa7
}

/* The following styles format sections on the members or events pages, usually in the topmost content section.  The 2nd and 3rd style in this set are just variations of the first one, with slighly different padding settings */

#gathercontents 
{
	padding-left: 45px;
	padding-right: 25px;
	padding-top: 15px;
	float: left;
	width: 45%
}

#gathercontents2 
{
	padding-left: 45px;
	padding-right: 25px;
	padding-top: 10px;
	float: left;
	width: 45%
}

#gathercontents3 
{
	padding-left: 45px;
	padding-right: 15px;
	padding-top: 15px;
	float: left;
	width: 45%
}

/* The following stules control background colors for their sections and do nothing more */

#gmeetings_wrapper {background-color: #3d4969}
#events_wrapper {background-color: #3d4969}
#splus_wrapper {background-color: #3d4969}
#pplus_wrapper {background-color: #3d4969}

#cbottom /*This container holds The image and about PMTA info on the home page as well as any other comparable sections across the website */
{
	padding-left: 40px;
	padding-right: 30px;
	padding-top: 20px
}

#picleft  /*This postions the image of the two children under the "welcome to PMTA on the home page */
{
	float: left;
	width: 30%;	
}

#aboutpmta /*This positions and formats the welcome to pmta paragraph on the main page */
{
	float: left;    /* Do not change this or the following settings or else the layout can be broken */
	width: 60%;
	padding-left: 40px;   /* This creates a 40px separation from the sponsorts column */	
	padding-top: 23px     /* This creates 23px of separation from the line underneath the text Welcome to PMTA */
}


#sponsors2   /*This style formats sponsors section on find a teacher page */
{
	width: 25%;
	float: left;
	padding-top: 20px;
	line-height: normal
}


#about    /* These styles format the section on home page for About PMTA */
{
	float: left;
	padding-left: 40px;
	padding-top: 20px;
	width: 60%;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #6d7fa7
}



/* The following three styles work with the members gathering page */

#events {padding-top: 20px}
#splus {padding-top: 30px}
#pplus {padding-top: 30px}



td.menu{border-style: solid; border-width: 1px; border-color: #6d7fa7; background-color: #556387}
table.menu {font-size: 80%; position: absolute; visibility: hidden; padding-top: 5px}

.navBar /* These are styles for the main navigation bar */
{
	float: right;
	color: #ccc;
	height: 30px;
	font-size: 13px} 



.nav /* These are the styles within the main navigation bar which aid to create the lines between the links.  Do not change any of this code  */
{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	border-right-style: solid;
	border-right-color: #CCC;
	border-right-width: 1px;
	float: left
}

.navcurrent /* This style distinguishes the current page in the navigation bar. */
{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	border-right-style: solid;
	border-right-color: #CCC;
	border-right-width: 1px;
	float: left;
	color: #6a7ea7
}

.header 
{
	font-size: 30px  /*This makes the "Find a Teacher near you!" text a larger size */
}

.orange 
{
	color: #d87c05 /* This style is used to make any text it affects the orange color seen throughout the web site */
}


.instruct 
{
	width: 50% /* This limits the width of the paragraph "Music instruction available for most instruments..." so that it doesn't extend all the way across 					               the layout */
}

.sponsors_wrapper 

{
	width: 32%; /*This controls the width of the Sponsors section.  If you adjust this, it can break the layout */
	float: left;
	border-right-style: solid;   /* The final border styles create the line that separates the sponsors section from the content to the right of it */
	border-right-width: 1px;
	border-right-color: #6d7fa7;
	line-height: normal  /*This resets the line height for the sponsors section only to the default setting*/
	
}




.sponsors_wrapperb /* These styles are similar in function to the sponsors_wrapper styles above */

{
	width: 32%; 
	float: left;
	padding-top: 5px;
	line-height: normal
}


.sponsors {width: 80%; padding-left: 30px; padding-top: 10px; text-align: center}
.colleft_wrapper {float: left; width: 50%; font-size: 14px}
.colleft_wrapper2 {float: left; width: 30%; font-size: 14px}
.colright_wrapper {float: left; width: 50%; font-size: 14px}
.colright_wrapper2 {float: left; width: 66%}

.formwrap  /*formatting for the additional search option boxes on find a teacher pages */
{	
	float: left;
	width: 45%;
	padding-top: 20px	
}


.colleft {padding-left: 40px}
.colright {padding-left: 60px}
.colright2 {padding-left: 20px}
.orangehead {font-size: 22px; color: #d87c05}


/* The following 3 styles format information in the sponsors columns on home page and find a teacher page.  You need to look in the html code to determine which style is applied where.  The first is used most often, but the second two are used in cases where no bottom border is needed as well as in places where different bottom padding is needed.  */

.sponsorinfo 
{
	font-size: 10px;
	padding-bottom: 10px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #6d7fa7
}
	
	
.sponsorinfo2 
{
	font-size: 10px;
	padding-bottom: 5px
}

.sponsorinfo3 
{
	font-size: 10px;
	padding-bottom: 40px
}



.about {padding-top: 5px}



.twentypad {padding-bottom: 20px}  



.thirtypadup {padding-top: 30px}
.fiftypadleft {padding-left: 50px}

/*The following imgfloat styles are used to position the photos on the memebers and events pages.  Because the image sizes are all different, the positioning has to vary too, which is why so many different styles here.  You are going to need to check the html code on the page you want to edit to find out which style goes with the page.  Then you can change the values here to move the photo around */


.imgfloat {float: left; padding-left: 50px; padding-top: 10px; padding-bottom: 20px}
.imgfloatc {float: left; padding-left: 20px; padding-top: 10px; padding-bottom: 20px}
.imgfloatj {float: left; padding-left: 20px; padding-top: 10px; padding-bottom: 20px}
.imgfloatk {float: left; padding-left: 15px; padding-top: 10px; padding-bottom: 20px}
.imgfloat2 {float: left; padding-top: 10px; padding-bottom: 20px}
.imgfloat3 {float: left; padding-left: 75px; padding-top: 10px; padding-bottom: 20px}
.imgfloat4 {float: left; padding-left: 150px; padding-top: 15px; padding-bottom: 20px}
.imgfloat4 {float: left; padding-left: 120px; padding-top: 15px; padding-bottom: 20px}
.imgfloat5 {float: left; padding-left: 80px; padding-top: 15px; padding-bottom: 20px}
.imgfloatx {float: left; padding-left: 100px; padding-top: 15px; padding-bottom: 20px}
.imgfloatpiano {float: left; padding-top: 10px; padding-bottom: 20px}
.imgfloat3a {float: left; padding-left: 100px; padding-top: 10px; padding-bottom: 20px}
.imgfloat3b {float: left; padding-left: 20px; padding-top: 10px; padding-bottom: 20px}


.gathersect /* This is a style used across many pages, such as events and members pages.  This style creates different areas of division and any changes to the padding will be reflected across multiple pages.  Be careful when adjusting this one and be sure to check all events and members pages to see if desired effect was acheived.  */
{
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 40px;
	margin: 0px
}



.gathersect2 
{
   padding-left: 40px;
   padding-top: 5px; 
   padding-bottom: 20px; 
   padding-right: 40px; 
   width: 25%}
   
.fontten {font-size: 10px}

.gathersect3 {
   padding-left: 40px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-right: 40px;
   margin: 0px
   }


.lipad   /* This adds space between the unordered list bullets in the About PMTA section on home page    */ 
{
	padding-top: 20px
}

.caption /*This formats the text in the caption below mguida.jpg on the scholarship.html page */
{
	font-size: 10px;
	width: 250px;
	padding-top: 5px;
	line-height: 100%
}
.gatherhead /*This style is used to override default font and replace with this larger size*/
{
	font-size: 16px
}

.gatherhead2   /* a variation of gatherhead style, this provides a slightly larger font */
{
	font-size: 22px
}


.title {text-decoration: underline}
.dropfont {font-size: 16px}


.bnavBar /* This style works with the navigation bar in the footer section */
{
	width: 80%;
	margin: auto;
	text-align:center;
}

.bnav /* This style works with the navigation bar in the footer section */

{
	padding-left: 30px;
	float: left
}

.clearleft {clear: left}

/* The following styles control the color of the main navigation bar link states */

a:link {color: #ccc; text-decoration: none; outline: none} 
a:visited {color: #ccc; text-decoration: none; outline: none} 
a:hover {color: #3F3; text-decoration: none; outline: none}  
a:active {color: #ccc; text-decoration: none; outline: none}



/* The following styles control the color of link states for links other than the main navigation bar */

a.speciallink:link {color: #d87c05}
a.speciallink:visited {color: #d87c05}
a.speciallink:hover {color: #669900}
a.speciallink:active {color: #d87c05}

a.speciallink2:link {color: #d87c05; font-size: 14px}
a.speciallink2:visited {color: #d87c05; font-size: 14px}
a.speciallink2:hover {color: #3F3; font-size: 14px}

/* The following styles are used to prevent elements using the anchor tag from displaying the other link styles */
a.ank:link {color: #d87c05}
a.ank:hover {color: #d87c05; text-decoration: none}

hr  /* defines the style of all hr tags across the entire website */
{
	width: 760px;
	height: 1px;
	color: #6d7fa7;
	margin: auto;
	background-color: #6d7fa7;
	text-align: center /*This centers the hr in some browsers like IE */
}