@charset "utf-8";
body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff url(images/vssitebackground01.gif) repeat;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 20px 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #outercontainer selector */
	color: #000000;
}

#outercontainer {
	width: 900px; 
	background: #ffffff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
/* ------------- End of body and outer container styles ------------------------------------- */


/* Header Section Styles - Contains Banner Section and Main Menu Section */
#headersection {
	background: #ffffff; 
	margin: 0px;
	padding: 0px;
}

/* Banner Section Styles - Contains logo and home link, page title images, hidden page titles, and teaser text with link to Bio. */
#banner {
	position: relative;
	width: 900px;
	height: 115px;
	background: #ffffff;
	color: #000000;
	margin: 0;
	padding: 0;
}

/* Logo and Banner Home Link Styles */
#bannerhomelink {
	position: absolute;
	top: 5px;
	left: 30px;
}
#bannerhomelink img { border: none; }

/* Logo and Banner Home Link Styles */
#bannerpagetitleimage {
	position: absolute;
	top: 30px;
	right: 45px;
}
#homebannertextsection {
	/*	this will be a text div with a paragraph and a link to bio.html */
	position: absolute;
	top: 30px;
	right: 70px;
	width: 375px;
	background: #ffffff;
	margin: 0;
	padding: 0;
}
#homebannertextsection p {
	margin: 0;
	padding: 0;
	background: transparent;
	color: #44334a;
	font: normal 14px Verdana, Arial, Helvetica, sans-serif;
}
#homebannertextsection p a { color: #44334a; text-decoration: underline; font-size: 10px; }
#homebannertextsection p a:hover { color: #9c2222; }

/* Banner Page Header Styles - hidden */
#banner h1 { 
	font-size: 1px;				/* Take up only 1px of vertical space */
	margin: 0px;							
	padding: 0px;
	position: absolute;
	left:-2000px; }				/* hidden off side of page */

/* Main Menu Section Styles - Contains Main Menu */ 
#mainmenucontainer {
	width: 100%;
	text-align: center;
	background: #ffffff;
}
.mainmenubar {
	width: 800px;
	background: #ffffff;
	border: 1px #000000 solid; 
	padding: 0px;
	margin: 0 auto;
	margin-bottom: 7px;
}
ul.mainnav {
	padding: 0;
	margin: 0 0 0 18px;
	color: #000000;
	/*float: left; */
}
ul.mainnav li { display: inline; }
ul.mainnav li a {
	padding: 5px 12px 5px 12px;
	text-decoration: none;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

/* Styles for Main Menu link background colors and fonts - normal and hover versions */
#mainhomelink { color: #9c2222; }
#mainhomelink:hover, #mainhomecurrent { background-color: #9c2222; color: #ffffff; }
#mainbiolink { color: #ba4545; }
#mainbiolink:hover, #mainbiocurrent { background-color: #ba4545; color: #ffffff; }
#maintvlink { color: #e06f12; }
#maintvlink:hover, #maintvcurrent { background-color: #e06f12; color: #ffffff; }
#maincomedylink { color: #e09c12; }
#maincomedylink:hover, #maincomedycurrent { background-color: #e09c12; color: #ffffff; }
#mainhostinglink { color: #ffc902; }
#mainhostinglink:hover, #mainhostingcurrent { background-color: #ffc902; color: #ffffff; }
#mainclasseslink { color: #e06f12; }
#mainclasseslink:hover, #mainclassescurrent { background-color: #e06f12; color: #ffffff; }
#maingallerylink { color: #ba4545; }
#maingallerylink:hover, #maingallerycurrent { background-color: #ba4545; color: #ffffff; }
#maincontactlink { color: #9c2222; }
#maincontactlink:hover, #maincontactcurrent { background-color: #9c2222; color: #ffffff; }

/* ------------- End of Header Container styles --------------------------------------------- */


/* Main Contents Section Container Styles - Contains #nnermaincontent and creates its border and margins etc */
#maincontentsection {
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

/* Inner Main Content Section Styles - Contains two columns, except on Gallery page, which is totally different */
#innermaincontent { 
	width: 800px;
	background: #ffffff;
	margin: 0 auto;
	border: 1px solid #d9d8d8;
	text-align: left;
	padding: 0px;
} 

/* Right Content Section Styles - Generic */
#rightcontent {
	width: 400px;	/* since this element is floated, a width must be given */
	float: right; 
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px;
	margin: 0px;
}
/* Right Content Section Styles - Specific */
#rightcontent.homeright { width: 400px; height: 370px; background: url(images/homepagerightbackground01.jpg); }		
#rightcontent.contactright { width: 400px; height: 470px; background: #ffffff url(images/gatebackgroundcontactright.jpg) right top no-repeat; }
#rightcontent.bioright { width: 265px; }
#rightcontent.classesright { width: 265px; }
#rightcontent.hostingright { width: 265px; }
#rightcontent.comedyimprovright { width: 265px; }
#rightcontent.tvfilmright { width: 265px; }

/* Left Content Section Styles - Generic */
#leftcontent { 
	background: #ffffff; 
	margin: 0 400px 0 0; 
	padding: 0px;
} 
/* Left Content Section Styles - Specific Pages */
#leftcontent.homeleft { margin: 0 400px 0 0; padding-bottom: 0px;}	/* the right margin on this div element creates the column down the right side of the page - no matter how much content the rightcontent div contains, the column space will remain. */
#leftcontent.contactleft { height: 470px; margin: 0 400px 0 0; padding-bottom: 0px; background: #ffffff url(images/gatebackgroundcontactleft.jpg) left top no-repeat; }
#leftcontent.bioleft { margin: 0 265px 0 0; padding-bottom: 40px; background: #ffffff url(images/gatebackground535.jpg) left top no-repeat; }
#leftcontent.classesleft { margin: 0 265px 0 0; padding-bottom: 40px; background: #ffffff url(images/gatebackground535.jpg) left top no-repeat; }
#leftcontent.hostingleft { margin: 0 265px 0 0; padding-bottom: 40px; background: #ffffff url(images/gatebackground535.jpg) left top no-repeat; }
#leftcontent.comedyimprovleft { margin: 0 265px 0 0; padding-bottom: 40px; background: #ffffff url(images/gatebackground535.jpg) left top no-repeat; }
#leftcontent.tvfilmleft { margin: 0 265px 0 0; padding-bottom: 40px; background: #ffffff url(images/gatebackground535.jpg) left top no-repeat; }
#leftcontent.galleryleft { margin: 0 0 0 0; padding-bottom: 0px; }

/* Inner Content Section Styles - These are the divs INSIDE the leftcontent and rightcontent sections */
#lefttextsection, #contactrighttextsection, #gallerytextsection {	/* These have margins and padding and are for regular text */
	background: transparent;
	margin: 0px 50px 0px 50px;
	padding: 50px 0px 0px 0px;
}
#righttextsection, #homelefttextsection, #homerighttextsection, #gallerylefttextsection {	/* These have no margins or padding and are for photos etc */
	background: transparent;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* Text Section Heading Styles - Generic */	
/* Text Section Heading Section Styles */
.pageheading {
	background: transparent;
	text-align: center;
}
.pageheading img {
	text-align: center;
	margin: 20px 0px 20px 0px;
}

/* Page Heading */		
h2 { 	/* I have photo-replaced these in the pageheading section and set them off-screen for SEO and accessability purposes - see below */
	text-align: center;
	font: bold 20px Verdana, Arial, Helvetica, sans-serif;	
	margin: 0px;											
	padding: 20px 0px 20px 0px; 
}
.pageheading h2 { 
	font-size: 1px;				/* Take up only 1px of vertical space */
	margin: 0px;							
	padding: 0px;
	position: absolute;
	left:-2000px; }				/* hidden off side of page */					
/* Section Headings */
h3 { 							
	text-align: center;
	font: bold 16px Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 20px 0px 10px 0px; 
}		
/* Subheadings */
h4 {						
	text-align: left;
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 20px 0px 5px 0px; 
}
	
/* Text Section Heading Text Styles - Specific Pages (different colors) */	
.bioheading { color: #ba4545; }
.tvfilmheading { color: #e06f12; }
.comedyimprovheading { color: #e09c12; }
.hostingheading { color: #ffc902; }
.classesheading { color: #e06f12; }
.galleryheading { color: #ba4545; }
.contactheading { color: #9c2222; }
	
/* Text Section Paragraph Styles */									
.introtext { 								/* Text paragraphs with extra emphasis for introduction */
	text-align: left;	
	color: #000000;	
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px;
	padding: 0px 0px 10px 0px; 
}					
.regulartext { 								/* Regular text paragraphs */
	text-align: left;
	color: #000000;	
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px;
	padding: 0px 0px 10px 0px; 
}
/* Styles for quotes in the text section */
.quote {
	font-style: italic;
}
/* Styles for names of plays, companies, films etc in text */
.name {
	font-style: italic;
}
/* Introductory Quote Styles */
.introquote {
	color: #761919;
	text-align: left;
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;	
	line-height: 18px;
	margin: 0px;
	padding: 10px 15px 15px 15px;
}
/* Introductory Quote Source Styles */
.introquotesource {
	font-weight: bold;
	font-style: normal;
}
/* Text Section List Styles */
.regularlist { 					/* Regular list in the contents of pages */
	list-style-type: circle;
	list-style-position: outside;
	text-align: left;
	color: #000000;	
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px;
	padding: 0px 10px 10px 40px; 
}
.regularlist li { padding-bottom: 10px; }	/* List items for regular lists in the contents of pages */
	
/* Text Section Link Styles */
.regulartext a:link { color: #000000; text-decoration: underline }		/* regular text section link */
.regulartext a:visited{ color: #000000; text-decoration: underline }	/* regular text section visited link */
.regulartext a:hover { color: #9c2222; text-decoration: underline }		/* regular text section mouseover link */
.introtext a:link { color: #000000; text-decoration: underline }		/* text section introduction link */
.introtext a:visited{ color: #000000; text-decoration: underline }		/* text section introduction visited link */
.introtext a:hover { color: #9c2222; text-decoration: underline }		/* text section introduction mouseover link */
.regularlist a:link { color: #000000; text-decoration: underline }		/* text section list link */
.regularlist a:visited{ color: #000000; text-decoration: underline }	/* text section list visited link */
.regularlist a:hover { color: #9c2222; text-decoration: underline }		/* text section list mouseover link */

/* General Home Page Link Styles */
.homepagelinks { height: 44px; }
.homepagelinks a { padding-left: 65px; 
	color: #000000; 
	font: normal 24px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	line-height: 40px; }
/* Home Page Link Backgrounds and Positions */
#homebiographylink { margin-top: 48px; margin-left: 100px; background: transparent url(images/homebiographyback01.gif) top left no-repeat; }
#hometvfilmlink { margin-left: 155px; background: transparent url(images/hometvfilmback01.gif) top left no-repeat; }
#homecomedyimprovlink { margin-left: 57px; background: transparent url(images/homecomedyimprovback01.gif) top left no-repeat; }
#homehostinglink { margin-left: 165px; background: transparent url(images/homehostingback01.gif) top left no-repeat; }
#homeclasseslink { margin-left: 85px; background: transparent url(images/homeclassesback01.gif) top left no-repeat; }
#homegallerylink { margin-left: 185px; background: transparent url(images/homegalleryback01.gif) top left no-repeat; }
#homecontactlink { margin-left: 60px; background: transparent url(images/homecontactback01.gif) top left no-repeat; }
/* Home Page Link Hover Colors */
#homebiographylink a:hover { color: #ba4545; }
#hometvfilmlink a:hover { color: #e06f12; }
#homecomedyimprovlink a:hover { color: #e09c12; }
#homehostinglink a:hover { color: #ffc902; }
#homeclasseslink a:hover { color: #e06f12; }
#homegallerylink a:hover { color: #ba4545; }
#homecontactlink a:hover { color: #9c2222; }

/* Homepage Photo Styles */
#homepagephoto {
	display: block; /* removes added space below photo - a bug in IE */
}

/* TV and Film Table Styles */
.tvfilmtable, .hostingtable { width: 100%; }
.tvfilmtable td, .hostingtable td { font-size: 10px; text-align: left; vertical-align: top; padding: 0 5px 5px 0; border-bottom: 1px dotted #CCCCCC; }


/* Rightside Photo Table Section Styles */
.rightphotostable {
	width: 265px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#biographytable { background-color: #ba4545; }
#tvfilmtable { background-color: #e06f12; }
#comedyimprovtable { background-color: #e09c12; }
#hostingtable { background-color: #ffc902; }
#classestable { background-color: #e06f12; }


.rightphotostable td {
	text-align: center;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
.photocaption { 
	color: #ffffff; 
	font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
}

/* Gallery Table Styles */
#gallerytable {  
	width: 792px;
	margin: 4px;
	padding: 0px;
	background-color: #ffffff;
}
/* Generic Gallery Table Photo Cell Styles */
.galleryphotocell {  
	width: 88px;
	height: 88px;
	text-align: left;
	vertical-align: top;
} 
/* Gallery Table Main Cell Styles */
#gallerymaincell {  
	text-align: left;
	vertical-align: top;
}
/* Gallery Photo Styles */
#gallerytable img {
	cursor: pointer;
} 

/* Video Clip Section Styles */
.veenamovie { margin-bottom: 15px; 
}

/* ------------- End of Main Contents Container styles ----------------------------------- */


/* Footer Section Styles - Contains BOP Section and Copyright Section */
#footersection {
	background:#ffffff;
}
#footersection p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* BOP Section Styles - Contains BOP Menu */

/* BOP Menu Section Styles - Contains BOP Menu */ 
#bopmenucontainer {
	width: 800px;
	text-align: center;
	margin: 0 auto;
}
.bopmenu {
	border: 0px; 
	margin: 15px 0px 10px 40px;
	padding: 0px;
}
ul.bopnav {
	padding: 0;
	margin: 0;
	color: #00858a;
	float: left;
}
ul.bopnav li { display: inline; }
ul.bopnav li a {
	padding: 0px 15px 0px 10px;
	color: #00858a;
	text-decoration: none;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
}
/* Styles for BOP Menu link background images and text colors - normal and hover versions */
#bophomelink { background: url(images/bophomelinkback.gif) left no-repeat; }
#bophomelink:hover, #bophomecurrent { background: url(images/bophomelinkhover.gif) left no-repeat; color: #9c2222; }
#bopbiolink { background: url(images/bopbiolinkback.gif) left no-repeat; }
#bopbiolink:hover, #bopbiocurrent { background: url(images/bopbiolinkhover.gif) left no-repeat; color: #ba4545; }
#boptvlink { background: url(images/boptvlinkback.gif) left no-repeat; }
#boptvlink:hover, #boptvcurrent { background: url(images/boptvlinkhover.gif) left no-repeat; color: #e06f12; }
#bopcomedylink { background: url(images/bopcomedylinkback.gif) left no-repeat; }
#bopcomedylink:hover, #bopcomedycurrent { background: url(images/bopcomedylinkhover.gif) left no-repeat; color: #e09c12; }
#bophostinglink { background: url(images/bophostinglinkback.gif) left no-repeat; }
#bophostinglink:hover, #bophostingcurrent { background: url(images/bophostinglinkhover.gif) left no-repeat; color: #ffc902; }
#bopclasseslink { background: url(images/bopclasseslinkback.gif) left no-repeat; }
#bopclasseslink:hover, #bopclassescurrent { background: url(images/bopclasseslinkhover.gif) left no-repeat; color: #e06f12; }
#bopgallerylink { background: url(images/bopgallerylinkback.gif) left no-repeat; }
#bopgallerylink:hover, #bopgallerycurrent { background: url(images/bopgallerylinkhover.gif) left no-repeat; color: #ba4545; }
#bopcontactlink { background: url(images/bopcontactlinkback.gif) left no-repeat; }
#bopcontactlink:hover, #bopcontactcurrent { background: url(images/bopcontactlinkhover.gif) left no-repeat; color: #9c2222; }

/* Copyright Section Styles - Contains Copyright Info */
/* Copyright Section Container Styles */
#copyright { 
	text-align: center;
	background: transparent;
	color: #000000;
	font: normal 10px verdana, arial, helvetica, sans-serif;
	border: 0px;
	margin: 0px;
	padding: 20px 0px 20px 0px;
}
/* Copyright Section Contents Styles */	
#copyright a { text-decoration: underline; }
#copyright a:link { color: #000000; }		/* copyright unvisited links */
#copyright a:visited { color: #000000; }	/* copyright visited links */
#copyright a:hover { color: #9c2222; }		/* copyright mouseover links */

/* ------------- End of Footer Container styles ----------------------------------- */


/* General Use Styles - not necessarily used */
.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;
}