/* GLOBALS */
html,body { height:100%; text-align: center; background: #333333 }
* { 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: 12px; }
p { margin: 15px 0; line-height: 20px; }
td { line-height: 1.2em; }
.text { text-align: left}
.center { text-align: center}
.bold { font-weight: bold; }
.l { margin: 10px 0 15px 0; line-height: 20px; }


h1 { margin-top: 35px; font-family:  Helvetica; font-size: 16px; font-weight: bold; color: #5D6E20; }
h2 { font-size: 12px; color: #A8578D; font-weight:normal; line-height:20px}
h3 { margin-top: 7px; font-size: 13px; font-family: Times; color: #82754C; }
h4 { margin-top: 35px;  font-family:  Helvetica; font-size: 16px; font-weight: bold; color: #522405; }

a { color: #A8578D; text-decoration:none; line-height: 20px; }
a:hover { color: #522405; text-decoration:underline; }  
a:active { color: #522405; }  

.b { color: #A8578D; text-decoration:none; line-height: 20px; font-weight: bold }
.b:hover { color: #522405; text-decoration:underline; font-weight: bold }  
.b:active { color: #522405; } 

c { color: #ff0000; }


/* CONTAINER */
#container { width: 781px; background: #FFFFEA; height:100%; margin: auto; }

/* LEFT COLUMN */
#topleft {width: 150px; height: 75px; float:left; background: #D1DDA7; border-right: 1px solid; border-bottom: 1px solid; image-align: left;}

#midleft {width: 150px; height: 250px; float:left; background: #F4FFCC; border-right: 1px solid; border-bottom: 1px solid;}
#midleft ul { list-style-type:none; text-align: left; margin: 0 0 0 15px; }
#midleft ul li { line-height: 20px; }
body.home #midleft {width: 140px; float:left; height: 428px; background: #F4FFCC; padding:0 5px;}

#midleft a { color: #A8578D; text-decoration:none; line-height: 20px; }
#midleft a:hover { color: #522405; text-decoration:underline; }  
#midleft h2 { color: #522405; }  



#columnstrip {width: 781px; height: 100px; background: #A8578D; border-bottom: 1px solid;}
#columnspan {width: 781px; height: 250px; background: #CCCCCC; border-bottom: 1px solid;}




/* RIGHT COLUMN */
#topright {width: 630px; height: 75px; float:right; background: #FFFED6; border-bottom: 1px solid;}

#midright {width: 630px; height: 250px; float:right; background: no-repeat; border-bottom: 1px solid; }

body.home #midright {width: 630px; height: 428px; float:right; background: #FFFFEA; /*border-bottom: 1px solid;*/ }
body.meetdancers #midright {width: 630px; height: 250px; float:right; background: url(images/aboutdetailspic.gif) no-repeat; border-bottom: 1px solid; }

/* BOTTOM */

#bottom {width: 781px; float:left; background: #FFFFEA; }
#bottom ul {list-style-type:none; text-align:left; }
#bottom ul li { line-height: 20px; }
body.home #bottom {width: 781px; float:left; background: #FFFFEA; }
#bottomtext {width: 741px; padding: 20px 20px; text-align:left; }
#bottomtextindent {padding: 0px 50px; text-align:left; }


#bottomleft {width: 350px;  float:left; padding: 20px 20px; }
#bottomright {width: 350px;  float:right; padding: 20px 20px; }
#dancers {width: 350px; height:330px}
	#dancersjimp {width: 350px; height:440px}
#musicians {width: 350px; height:370px}

#selecthistory ul {margin: 20px 15px 15px 25px; text-indent: -25px; } 
body.selecthistory #bottomtext {width: 741px; padding: 5px 20px; text-align:left; }
body.selecthistory #bottomleft {width: 350px;  float:left; padding: 0px 20px; }
body.selecthistory #bottomright {width: 350px;  float:left; padding: 0px 20px; }
body.selecthistory #worldleft {width: 220px; float:left; padding: 0px 20px; }
body.selecthistory #worldmiddle {width: 220px; float:left; padding: 0px 20px; }
body.selecthistory #worldright {width: 220px; float:left; padding: 0px 20px; }

#alumni ul {margin: 20px 0px; }
#alumni ul li {line-height: 25px;}
body.alumni #left {width: 210px; float:left; padding: 0px 20px; }
body.alumni #middle {width: 210px; float:left; padding: 0px 20px; }
body.alumni #right {width: 210px; float:right; }

/* PHOTO THUMBNAILS */
#thumb {width: 250px; height:220px; float:left; font-size: 12px; font-weight:normal; line-height:15px;}
#thumb img{border: 1px solid #ffffff;}
#thumb a:hover img {border: 1px solid #522405;}


/* NAVBAR  */
#navbar { float: left;  width: 630px;  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.spacer {width: 37px; height: 70px; background: url(images/spacer.gif) 50% 50% no-repeat; }
#navbar ul li.line {width: 3px; height: 70px; background: url(images/line.gif) 50% 50% no-repeat; }
#navbar ul li.about a {width: 90px; height: 70px; background: url(images/labout.gif) 50% 50% no-repeat; }
#navbar ul li.schedule a {width: 90px; height: 70px; background: url(images/lsched.gif) 50% 50% no-repeat; background-color: #eeeddb; }
#navbar ul li.booking a {width: 90px; height: 70px; background: url(images/lbooking.gif) 50% 50% no-repeat;}
#navbar ul li.moosejaw a {width: 90px; height: 70px; background: url(images/lmoose.gif) 50% 50% no-repeat; }
#navbar ul li.local a {width: 90px; height: 70px; background: url(images/llocal.gif) 50% 50% no-repeat; }
#navbar ul li.contact a {width: 90px; height: 70px; background: url(images/lcontact.gif) 50% 50% no-repeat; }


/* NAVBAR - when hovering */
#navbar ul li.about a:hover
	{ background: url(images/laboutr.gif) 50% 50% no-repeat; }

#navbar ul li.schedule a:hover
	{ background: url(images/lschedr.gif) 50% 50% no-repeat; }

#navbar ul li.booking a:hover
	{ background: url(images/lbookingr.gif) 50% 50% no-repeat; }

#navbar ul li.moosejaw a:hover
	{ background: url(images/lmooser.gif) 50% 50% no-repeat; }

#navbar ul li.local a:hover
	{ background: url(images/llocalr.gif) 50% 50% no-repeat; }

#navbar ul li.contact a:hover
	{ background: url(images/lcontactr.gif) 50% 50% no-repeat; }


/* NAVBAR - when selected */
body.about #navbar ul li.about a, body.alumni #navbar ul li.about a, body.meetdancers #navbar ul li.about a, body.meetmusicians #navbar ul li.about a,  
body.about #navbar ul li.about a:hover, body.alumni #navbar ul li.about a:hover, body.meetdancers #navbar ul li.about a:hover, body.meetmusicians #navbar ul li.about a:hover 
	{ background: url(images/laboutp.gif) 50% 50% no-repeat; }

body.schedule #navbar ul li.schedule a, body.steppinout #navbar ul li.schedule a, body.recentpast #navbar ul li.schedule a, body.selecthistory #navbar ul li.schedule a, 
body.schedule #navbar ul li.schedule a:hover, body.steppinout #navbar ul li.schedule a:hover, body.recentpast #navbar ul li.schedule a:hover, body.selecthistory #navbar ul li.schedule a:hover
	{ background: url(images/lschedp.gif) 50% 50% no-repeat; }

body.booking #navbar ul li.booking a, body.bookingpublicity #navbar ul li.booking a, body.bookingtechnical #navbar ul li.booking a, 
body.booking #navbar ul li.booking a:hover, body.bookingpublicity #navbar ul li.booking a:hover, body.bookingtechnical #navbar ul li.booking a:hover 
	{ background: url(images/lbookingp.gif) 50% 50% no-repeat; }

body.moosejaw #navbar ul li.moosejaw a, body.moosejaw2008staff #navbar ul li.moosejaw a, body.moosejawfestival #navbar ul li.moosejaw a, body.moosejawstaff #navbar ul li.moosejaw a,
body.moosejaw #navbar ul li.moosejaw a:hover, body.moosejaw2008staff #navbar ul li.moosejaw a:hover, body.moosejawfestival #navbar ul li.moosejaw a:hover, body.moosejawstaff #navbar ul li.moosejaw a:hover
	{ background: url(images/lmoosep.gif) 50% 50% no-repeat; }

body.local #navbar ul li.local a, body.localmusic #navbar ul li.local a, body.localextracurriculars #navbar ul li.local a,
body.local #navbar ul li.local a:hover, body.localmusic #navbar ul li.local a:hover, body.localextracurriculars #navbar ul li.local a:hover
	{ background: url(images/llocalp.gif) 50% 50% no-repeat; }

body.contact #navbar ul li.contact a,
body.contact #navbar ul li.contact a:hover
	{ background: url(images/lcontactp.gif) 50% 50% no-repeat; }



