@charset "UTF-8";

/*
8th Wonder Productions
by MTAIT
http://mtait.com/

COLOR KEY:
		 	
25% Gray: #cccccc;
Orange: #ff9933;
*/

/* RESET AND BASICS */

*
{ margin:0px; padding:0px; }	

li
{ list-style-type:square; margin-left:20px;}

ul
{ margin: 5px 0; line-height: 1.5em;}							


.hr
{ height:0; width: 100%; border-bottom: 1px solid #cccccc; margin: 4px 0; }

hr.events
{ width: 300px; }
	
body#home
{ height:100%; font-family:Helvetica, Verdana, sans-serif; font-size: 11pt; background: black; line-height: 1.3em; }
								
::selection
{ background: #ff9933; color:#000000; }
								
::-moz-selection
{ background: #ff9933; color:#000000; }								 

a, a:visited
{ text-decoration:none; outline:none; color:#ff9933; }
	
a:hover
{ color:#000000; }
			
a img
{ border:none; text-decoration: none; }
					
img
{ vertical-align:middle; }
					
.clear
{ clear:both; }

.alignright
{ text-align:right; }

.floatleft
{ float:left; }

.floatright
{ float:right; }
		
.more-link
{ float: right; }	

.border
{ border:1px solid #cccccc; padding: 5px; }	

.position
{ position: absolute; left: -120px;}


/* MAIN STRUCTURE */

#header-bg
{ height: 100px; width: 1080px; margin: 0 auto; background-image: url(/images/bg_header.jpg); background-repeat: no-repeat; padding-left: 120px; }

#diag-sep
{ height: 10px; margin:0 auto; background-image: url(/images/bg_diag_pattern.jpg); }

#content-bg
{ width:910px; background: #ffffff; border-left: 10px solid #ff9933;  margin: 0 auto; overflow: auto; padding: 20px;}

#content-bg-interior
{ width: 910px; background: #ffffff; border-left: 10px solid #ff9933; margin: 0 auto; padding: 20px 20px 100px 20px; overflow: auto; }

#footer-bg
{ height: 100px; width: 1070px; margin: 0 auto; background-image: url(/images/bg_footer.jpg); background-repeat: no-repeat; padding-right: 130px;}

#left-container
{ min-height:740px; width: 510px; margin-right: 20px; }

#right-container
{ min-height:740px; width: 380px; }

.interior-img
{ width: 358; border: 1px solid #cccccc; padding: 10px; margin-bottom: 10px; }

#promo-container
{ height: 208px; width: 888px; border:1px solid #cccccc; margin-bottom: 20px; padding: 10px; }

#events-header
{height: 20px; width: 510px; background-image: url(/images/img_title_events.jpg); padding-top: 20px; }

#news-header
{ height: 20px; width: 380px; background-image:url(/images/img_title_news.jpg); padding-top: 20px; }

#events-container
{ min-height:679px; width: 468px; border-left:1px solid #cccccc; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding: 20px 20px 0 20px; }

#news-container
{ min-height: 549px; width: 338px; border-left:1px solid #cccccc; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding: 20px; margin-bottom: 20px; }

#mail-container
{ height: 139px; width: 338px; border-left:1px solid #cccccc; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding: 20px; margin-bottom: 20px; }

#logo
{ height: 100px; width: 100px; background-image:url(/images/logo.jpg); background-repeat: no-repeat; }

.events-post
{ height: 150px; width: 470px; margin-bottom: 20px; }

.events-img
{ height:148px; width: 148px; border: 1px solid #cccccc; margin-right: 20px; }

.events-text
{ height: 120px; width: 300px ; }

.events-info
{ margin-right: 10px; }

.news-post
{ width: 340px; margin-bottom: 20px; }


/* NAVIGATION */

#global-nav
{ height: 30px; width: 720px; }

a.about
{ height: 30px; width: 70px; background-image: url(/images/nav/about.jpg); }

a.about:hover
{ background-position: 70px 0; }

a.workshops
{ height: 30px; width: 80px; background-image: url(/images/nav/workshops.jpg); }

a.workshops:hover
{ background-position: 80px 0; }

a.auditions
{ height: 30px; width: 70px; background-image: url(/images/nav/auditions.jpg); }

a.auditions:hover
{ background-position: 70px 0; }

a.theatre
{ height: 30px; width: 60px; background-image: url(/images/nav/theatre.jpg); }

a.theatre:hover
{ background-position: 60px 0; }

a.music
{ height: 30px; width: 45px; background-image: url(/images/nav/music.jpg); }

a.music:hover
{ background-position: 45px 0; }

a.dance
{ height: 30px; width: 45px; background-image: url(/images/nav/dance.jpg); }

a.dance:hover
{ background-position: 45px 0; }

a.staff
{ height: 30px; width: 45px; background-image: url(/images/nav/staff.jpg); }

a.staff:hover
{ background-position: 45px 0; }

a.faqs
{ height: 30px; width: 35px; background-image: url(/images/nav/faqs.jpg); }

a.faqs:hover
{ background-position: 35px 0; }

a.contact
{ height: 30px; width: 80px; background-image: url(/images/nav/contact.jpg); }

a.contact:hover
{ background-position: 80px 0; }

a.downloads
{ height: 30px; width: 100px; background-image: url(/images/nav/downloads.jpg); }

a.downloads:hover
{ background-position: 100px 0; }

a.myspace
{ height:40px; width: 380px; background-image: url(/images/btn_myspace.jpg); margin-bottom: 10px; }

a.myspace:hover
{ background-position: 380px 0; }

a.facebook
{ height:40px; width: 380px; background-image: url(/images/btn_facebook.jpg); margin-bottom: 10px; }

a.facebook:hover
{ background-position: 380px 0; }

a.twitter
{ height:40px; width: 380px; background-image: url(/images/btn_twitter.jpg); }

a.twitter:hover
{ background-position: 380px 0; }

a.info
{ height:30px; width: 110px; background-image: url(/images/btn_info.jpg); margin-right: 10px; }

a.info:hover
{ background-position: 110px 0; }

a.order
{ height:30px; width: 180px; background-image: url(/images/btn_order.jpg); }

a.order:hover
{ background-position: 180px 0; }

a.view
{ height: 20px; width: 60px; background-image: url(/images/btn_view.jpg); }

a.view:hover
{ background-position: 60px 0; }


/* TYPOGRAPHY */

h1
{ font-family: Helvetica, Arial, sans-serif; font-size: 16px; background-color: #cccccc; padding: 5px;  margin: 10px 0; font-weight: normal; font-weight: bold; }

.paragraph
{ font-family: Georgia, Times, serif; line-height: 1.5em; }

.serif
{ font-family: Georgia, Times, serif; }

.footer-text
{ font-family:Helvetica, Verdana, sans-serif; color: #FFFFFF; font-size: 10px; letter-spacing: .05em; }

.footer-text a:hover
{ color: #FFFFFF; }

.date {background-color: aqua;}