/* GLOBALS */
html,body { height:100%; text-align: center; background: #444e58; }
* { padding: 0; margin: 0; font-family: Verdana, Helvetica, Arial, sans-serif; color: #333; line-height: .4em; }
img { border: 0; }
.left { float: left; }
.right { float: right; }
body.popup { background: #fff; } 

.mainPic{
	border:0;
	padding:0;
	margin:0;

}  

/* TYPOGRAPHY */
p, li, label { font-size: 13px; }
p { margin: 10px 5px; line-height: 20px; }
td { line-height: 1.2em; }
.c { margin: 20px 15px; line-height: 20px; }
.s { margin: 0px 5px; line-height: 20px; }
.text { text-align: left; }
.bold { font-weight: bold; }

h1 { margin-top: 20px; font-family:  Helvetica; font-size: 16px; font-weight: bold; line-height: 15px; }
h2 { font-size: 13px; /*color: #E24B2D; */font-weight:normal; line-height:20px }
h3 { margin-top: 20px; margin-left: 5px; font-size: 13px; font-weight: bold; line-height:20px }
h4 { margin-top: 35px; margin-bottom: 20px; font-family: Helvetica; font-size: 20px; font-weight: bold; color: #522405; text-align: center; }

a { color: #E24B2D ; text-decoration:none; line-height: 20px; }
a:hover { color: #E24B2D ; text-decoration:underline; }  
a:active { color: #46A2B2; }

.b { color: #000000 ; text-decoration:none; line-height: 20px; }
.b:hover { color: #E24B2D ; text-decoration:underline; }  
.b:active { color: #000000; }

/* COLORS: red E24B2D dalared E43015 yellow ead400 yellowlight ffffcc green c2d6a3 blue 46A2B2 background 444e58 */

/* CONTAINER */
#container { width: 779px; background: #ffffcc ; height:100%; margin-left: auto; margin-right: auto; }


/* TOP */
#topleft { width: 148px; height: 130px; float:left; border-right: 1px solid; border-bottom: 1px solid; background: #ffffcc; }
#topright { width: 630px; height: 100px; float:left; background: #C2D6A3; border-bottom: 1px solid; }
#toprightname { width: 630px; height: 29px; float:left; background: url(images/stripe2.gif); border-bottom: 1px solid; }

/*MIDDLE*/
#mid { width: 779px; height: 233px; float:left; background: #c2d6a3; border-bottom: 1px solid; }
	#midindex { width: 779px; height: 258px; float:left; background: #ffffcc ; }
#midleftmenu { width: 148px; height: 233px; float:left; border-right: 1px solid; }
	#midleftmenu ul { list-style-type:none; text-align: center; }
	#midleftmenu ul li { line-height: 5px; margin-top: 5px; margin-bottom: 5px; }  /* line-height: 20px; margin-top: 10px; margin-bottom: 10px; */
		body.recordings #midleftmenu ul li { font-style: italic; }
#midcenterphoto { width: 465px; height: 233px; float: left; border-right: 1px solid; }
	#midcenterphotolong { width: 630px; height: 233px; float: left; }
	#midcenterphotomainpage { width: 779px; height: 258px; float:left; background: url(images/large banner/Nisswa parade2.gif); }
#midright { width: 164px; height: 233px; float: left; background: #46A2B2 ; }
#midrightcaption { width: 164px; height: 192px; float: left; text-align: left; }
#midrightphotocredit { width: 164px; height: 12px; text-align: left; }
	#midrightphotocredit p { font-size: 10px; line-height: 10px; margin: 10px 15px; }

/* BOTTOM */
#bottom { width: 779px; float:left; background: #ffffcc ; text-align: left; }
	#bottom ul { list-style-type:none; text-align:left; }
	#bottom ul li { line-height: 20px; }
	#bottomtext { width: 735px; padding: 22px 22px; text-align:left; }
	#bottomtextindent { padding: 0px 50px; text-align:left; }
#bottomindex { width: 779px; height: 516px; background: #444e58; float:left; }

#bottomleft { width: 370px;  float:left; padding: 0px 20px 20px 35px; }
	#bottomleft ol li { line-height: 20px; }
#bottomleftyfs { width: 300px; height: 196px; float:left; padding: 10px 10px;   }
#bottomleftcontact { width: 320px; float:left; padding: 10px 10px; }
	#bottomleftcontact ul { list-style-type:none; text-align:left; }
	#bottomleftcontact ul li { line-height: 20px; }

#bottomright { width: 276px; float:right; padding: 0px 10px 20px 20px; }
	body.recordings #bottomright p { text-align:right; }
#bottomrightyfs { width: 300px; height: 200px; float:left; padding: 10px 10px;  }
#bottomrightcontact { width: 320px; float:left; padding: 10px 10px; }
	#bottomrightcontact ul { list-style-type:none; text-align:left; }
	#bottomrightcontact ul li { line-height: 20px; }



/* NAVBAR  */
#navbar { float: left; width: 629px; 0 0 repeat-x; }
#navbar ul { float: left; }
#navbar ul li { float: left; list-style: none; }
#navbar ul li a { display: block; float: left; text-decoration: none; }
#navbar ul li.line { width: 1px; height: 100px;  background: url(images/line.gif) 50% 50% no-repeat; }
#navbar ul li.about a { width: 104px; height: 100px;  background: url(images/newnavbar/about.gif) 50% 50% no-repeat; border-right: 1px solid; }
#navbar ul li.music a { width: 104px; height: 100px;  background: url(images/newnavbar/music.gif) 50% 50% no-repeat; border-right: 1px solid; }
#navbar ul li.schedule a { width: 104px; height: 100px;  background: url(images/newnavbar/schedule.gif) 50% 50% no-repeat; border-right: 1px solid; }
#navbar ul li.booking a { width: 104px; height: 100px;  background: url(images/newnavbar/booking.gif) 50% 50% no-repeat; border-right: 1px solid; }
#navbar ul li.recordings a { width: 104px; height: 100px;  background: url(images/newnavbar/recordings.gif) 50% 50% no-repeat; border-right: 1px solid; }
#navbar ul li.contact a { width: 104px; height: 100px;  background: url(images/newnavbar/contact.gif) 50% 50% no-repeat; }

/* NAVBAR - when hovering */
#navbar ul li.about a:hover
	{ background: url(images/newnavbar/aboutup.gif) 50% 50% no-repeat; }

#navbar ul li.music a:hover
	{ background: url(images/newnavbar/musicup.gif) 50% 50% no-repeat; }

#navbar ul li.schedule a:hover
	{ background: url(images/newnavbar/scheduleup.gif) 50% 50% no-repeat; }

#navbar ul li.booking a:hover
	{ background: url(images/newnavbar/bookingup.gif) 50% 50% no-repeat; }

#navbar ul li.recordings a:hover
	{ background: url(images/newnavbar/recordingsup.gif) 50% 50% no-repeat; }

#navbar ul li.contact a:hover
	{ background: url(images/newnavbar/contactup.gif) 50% 50% no-repeat; }

/* NAVBAR - when selected */
body.about #navbar ul li.about a, 
body.about #navbar ul li.about a:hover
	{ background: url(images/newnavbar/aboutupred.gif) 50% 50% no-repeat; }

body.music #navbar ul li.music a, 
body.music #navbar ul li.music a:hover
	{ background: url(images/newnavbar/musicupred.gif) 50% 50% no-repeat; }

body.schedule #navbar ul li.schedule a, 
body.schedule #navbar ul li.schedule a:hover
	{ background: url(images/newnavbar/scheduleupred.gif) 50% 50% no-repeat; }

body.booking #navbar ul li.booking a, 
body.booking #navbar ul li.booking a:hover
	{ background: url(images/newnavbar/bookingupred.gif) 50% 50% no-repeat; }

body.recordings #navbar ul li.recordings a, 
body.recordings #navbar ul li.recordings a:hover
	{ background: url(images/newnavbar/recordingsupred.gif) 50% 50% no-repeat; }

body.contact #navbar ul li.contact a, 
body.contact #navbar ul li.contact a:hover
	{ background: url(images/newnavbar/contactupred.gif) 50% 50% no-repeat; }