body  { /* sets brick background for entire site and font family */
	font: 100% Futura, Verdana, Arial, Helvetica, sans-serif;
	background-image: url(images/brick4.jpg);
	margin: 10px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
 
 body a:visited, a:focus, a:active, a:hover, a:link { /* sets default link styles for page*/
 color: #5714B7;
 text-decoration: none;
 }
 
 
 #star {
	font-size: 65%;
	background-color: #FFFFFF;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border: 1px solid #E31936;
 }
 
 #container { /*holds content including all three columns */
	border: 15px solid #000;
	width: 840px;
	padding: 10px 20px 20px 20px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(images/bulletinPurple.png);
	background-color: #FFFFFF;
} 
 #header { /* sets container for the header */
	padding: 0;  /* no padding because an image is the header */
	
} 


/* STARTS CENTER COLUMN _ MAIN CONTENT AREA */

#mainContentContainer {
	margin: 0 190px 10px 190px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	
	padding-top: 50px;

}


#mainContent {
	background-color: #E066A5;
	color: #000000;
	padding: 0px 10px 10px 10px;
	font-size: 90%;
	border-bottom: thin solid #000

} 

.mainTopWhite { /* using matching tops and bottoms */
	background-image: url(images/mainTopWhite.png);
	background-repeat: no-repeat;
	background-position: left top;
}


.mainTopYellow {
	background-image: url(images/mainTopYellow.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.mainTopOrange {
	background-image: url(images/mainTopOrange.png);
	background-repeat: no-repeat;
	background-position: left top;
}


.mainTopPurple {
	background-image: url(images/mainTopPurple.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.mainTopBlue {
	background-image: url(images/mainTopBlue.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.mainTopGreen {
	background-image: url(images/mainTopGreen.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.mainTopPink {
	background-image: url(images/mainTopPink.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.mainWhite {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainWhite.png);
	background-repeat: repeat-y;
}

.mainYellow {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainYellow.png);
	background-repeat: repeat-y;
}

.mainOrange {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainOrange.png);
	background-repeat: repeat-y;
}

.mainGreen {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainGreen.png);
	background-repeat: repeat-y;
}

.mainBlue {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainBlue.png);
	background-repeat: repeat-y;
}

.mainPurple {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainPurple.png);
	background-repeat: repeat-y;
}

.mainPink {
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/mainPink.png);
	background-repeat: repeat-y;
}

.staffBios {
	color:  #593F99;
	font-size: 90%;
	line-height: 110%;
}

#mainContent H1 { /* top most headlines in the center column */
font-size:115%;
color: #000;
padding:2px;
border-bottom:solid #DE006F medium;
margin-bottom: 8px;
text-align: center;
}

#mainContent H2 { /*sub headings */
background-color: #DE006F;
color: #fff;
padding: 3px;
font-size:120%;
letter-spacing: 130%;
}

#mainContent object, embed { /*videos */
float: left;
width: 242px;
height: 198px;
margin: 0;
padding: 0 20px 0 0;
}

#mainContent ul { /*bulleted lists */
	margin: 0 30px 10px 30px;
	border: thin solid #5714B7;
	
	line-spacing: 120%;
	padding: 10px 20px 10px 30px;
	font-size: 80%;
	list-style-position: outside;
	list-style-image: url(images/bulletStar.png);
}

.image {
float: right;
width: 240px;
margin: 0 0 20px 20px;
padding: 0;
border: thin solid #5714B7;

}

/* END OF MAIN CONTENT AREA */








/* THIS IS THE LEFT COLUMN */

 #sidebar1 { /* this is the left column */
	float: left; /* since this element is floated, a width must be given */
	width: 170px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 0 15px 0; /* keeps content from touching top and bottom edges */
	text-align:left;
}







#rotateImage { /* this is the container for the randomly selected photo in the left column */
	padding: 12px 0 0 0;
	background-image: url(images/photoTop.png); /* pins holding photo up */
	background-repeat: no-repeat; /* sets only one row of pins */
	background-position: center top;
	margin: 10px 0 10px 0;
	border-bottom: thin solid #000
	

}

#rotateImage img { /* this is the style for the photo that rotates on the left column including the borders to make it look like a poloroid */
	text-align: center;
	width: 154px;
	border-right-width: 8px;
	border-bottom-width: 30px;
	border-left-width: 8px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #F5F9F5;
	border-bottom-color: #F5F9F5;
	border-left-color: #F5F9F5;

}






#quoteContainer { /*sets container for quote on left including top with music note and doodle */
	background-image: url(images/quoteTop1.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 50px;
	padding-bottom: 10px;
}

#quote { /*sets text for quote and repeating black paper background image */
	color:#fff;
	font-size:85%;
	line-height:120%;
	font-style:italic;
	padding:0px 18px 5px 18px;
	margin: 0;
	font-family: "Times New Roman", Times, serif;
	background-repeat: repeat-y;
	background-position: center top;
	background-image: url(images/side1bkgrnd.png);
}









#navContainer { /*this sets the top edge of the scrap paper that the navigation is on */
	background-image: url(images/navTopDoodles.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 30px;
	
}

#navContainer h3 { /* this is the specific font style for the word navigation */
	font-weight: bold;
	font-size: 22px;
	text-align: center;
	padding: 0;
	margin: 0;
}

#navigation { /* this is the container for the menu list */
	margin:0;
	padding: 0px 10px 10px 20px;
	font-style:normal;
	line-height: 140%;
	background-image: url(images/notebookYellowSm.png); /* background repeats for illusion of notebook paper */
	background-repeat: repeat-y;
	background-position: left top;
	border-bottom: thin solid #000;

}


#navigation ul { 
	display: block;
	margin: 0;
	padding: 0;
	font-size: 90%;
	list-style-type: none;
}


#navigation li { /* this sets the color of any menu category that isn't also a link */
display: block;
padding: 0;
margin: 0;
color: #DE006F;

}

#navigation ul li ul{ /* sets left indent of links in sub menu */
display: block;/* if display is none, hides navigation submenu on start; can click each item using javascript to view rest of items*/
padding: 0 0 0 10px;
} 

#navigation a { /* sets link style in the menu */
text-decoration:none;
margin-left: 0px;
padding-left: 15px;
}

#navigation a:link, #navigation a:visited { /*sets link color in menu */
color: #DE006F;
}

#navigation a:hover, #navigation a:focus, #navigation a:active { /* sets rollover link color and graphic in menu */
	color: #5714B7;
	background-image:url(images/listStar.gif);
	background-repeat: no-repeat;	
}


/* THIS IS THE END OF THE LEFT COLUMN */








/* THIS IS THE START OF THE RIGHT COLUMN */

 #sidebar2 { /* container for the right column */
	float: right; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}

#sidebar2 img { /* style for any graphic images that aren't on "paper" */
	border: none;
	padding: 0;
	text-align: center;
}






#ticketCalendar { /* sets purple ticket background and white text */
	background-image: url(images/ticket.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
	text-align: center;
	padding: 30px 5px 5px 20px;
	font-size: 11px;
	line-height: 12px;
	margin-bottom:10px;
}

#ticketCalendarOrange { /* sets alternative orange ticket background and white text */
	background-image: url(images/ticketOrange.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
	text-align: center;
	padding: 30px 5px 5px 15px;
	font-size: 11px;
	line-height: 12px;
	margin-bottom:10px;
}

#ticketCalendarOrange a:link, #ticketCalendarOrange a:visited, #ticketCalendarOrange a:hover {

color:#CC6600;
}

#ticketCalendar a:link, #ticketCalendar a:visited, #ticketCalendar a:hover {
color: #DE006F;
}

.showPresent{ /*sets vibe presents style for each ticket type */
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	margin: 0 0 0 50px;
	padding-bottom:6px;
	font-size: 17px;
	

}

.showName{ /*style for purple show name on ticket */
	color: #DE006F;
}

.showNameOrange{ /*style for orange show name on ticket */
	color:#CC6600;

}







#doodleContainer { /*sets tape graphic for random doodle on right column */
	background-image: url(images/doodleTopper.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding: 30px 0 0 0;
	margin: 0px;
}

#doodlePaper { /*sets brown paper background for doodle -- repeat allows for variable height of graphic doodles*/
	background-image: url(images/constructionPaper.png);
	background-repeat: repeat-y;
	background-position: left top;	
	padding: 0 0 3px 0;
	margin: 0 0 0px 0;
	}
	
#doodleBottom{ /*sets bottom ripped edge of the doodle paper */
	background-image: url(images/doodleBottom.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-top:20px;
}








#side2NoteContainer { /* sets graph paper background for the whole box */
	background-image: url(images/side2note.png);
	background-position: left top;
	padding-top: 3px;
	border-right: thin solid #000000;
	border-bottom: thin solid #000000;
	margin: 10px 0 
}

#side2Note { /* sets font and staple at the top */
	margin: 0;
	padding: 3px 5px 5px 5px;
	font-size: 80%;
	line-height: 110%;
	background-image: url(images/staple.png);
	background-repeat: no-repeat;
	background-position: center top;
}


/* END OF RIGHT COLUMN */





/* FOOTER */

#questions { /* envelop container -- sets background image and size */
	margin: 0 190px 0 190px;
	padding: 20px 10px 0 30px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-image: url(images/envelope.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 185px;
} 


 #questions p { /* sets text in envelop */
	margin: 0; 
	padding: 10px 0; /* sets padding on top and bottom to avoid text from jumping the edge of the shape */
	text-align:left;
	font-size: 12px;
 
}


#footer { /* empty, used to clear everything and end the page */
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */

} 




/* END OF FOOTEER */




/* GENERAL STYLES */



.mainContentMiniArea{
	width: 440px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;	
}

.mainContentMiniAreaVideo{
	width: 440px;
	height: 250px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #000000;	
}

.date {
	font-weight: bold;
	padding: 1px 4px 0px 2px;
	color: #FFF;
	background-color: #5714B7;
	vertical-align: middle;
	border-style: solid;
	border-color: #DE006F;
	border-width: 2px;
}

.noBorder {
border: none;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.clearRightFloat {
clear: right;
}

.clearLeftFloat {
clear: left;
}

.doodle {
width: 140px;
border: none;
}

.specialNumber {
	font-family: Futura, "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-size: 140%;
	color: #DE006F;
	font-weight: bolder;
}
.indent {
	padding-right: 50px;
	padding-left: 100px;
	color: #593F99;
}

.largeWithUnderline {
	font-size: 18px;
	color: #FFFFFF;
	margin-left: 100px;
	padding-top: 15px;
	font-weight: bold;
}

.showDetails {
color:#ffffff;
font-size: 13px;
line-height: 15px;
padding-left: 20px;
}

.backgroundWhite {
background-color: #ffffff;
padding: 0 1px 1px 1px;
}
.facebook {
	color: #3B5B99;
	background-color: #CCCCCC;
	font-size: 12px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: thin solid #666666;
}

.mySpace {
	color: #3B5B99;
	background-color: #FFFFFF;
	font-size: 12px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: thin solid #CCCCCC;
}
.socialNetworkBadge {
	margin-right: 5px;
	margin-left: 5px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}