@charset "utf-8";

/* ----- Color Pallet  --------------------- */
/*
Bagh Background Color Pallet:
	Green					#7c6522
	Purple					#281a37
	Pink					#ad1b3e
	White/Cream				#e8dccc
	Golden Background		#dd9b3d to #cb771b sides, #e5b24b center
Website Color Pallet:
	Dark Purple				#1f0341
		Menu Text - non-current/non-hover.
	Turquoise				#2d9d75
		Menu Text - current/hover
		Headings and subheadings in content.
	Very Dark Purple-Grey	#220e40
		Paragraph text.
		Table text.
		Most general text.
	Black					#000000
		Slogan Line Text.
		Blockquote text.
		Text in jQuery sliders.
	Bright Dark Pink/Purple	#a8006e
		Website header "Balinder Johal" text.
	Bright Pink				#f32563
		Photo borders.
		jQuery navigation current/hover buttons
		Various emphasized items in content.
		Link hover text in contents and footer.
	Golden Green			#c9b303
		Photo borders.
		Table borders.
		jQuery navigation non-current/non-hover buttons.
		Various emphasized items in content.
	Dark Golden Green		#7c6522
		URL link non-hover.
	Light Golden Green		#f8f6e7
		Table zebra striping.
*/
/* ----- End Color Pallet ------------------ */

/* Reset Snippet - zeros all emements ----------------------- */
/* fonts - I DON'T SEE THE POINT TO MOST OF THIS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

/* margins, padding, border, outline - TABLES AND LISTS DONE BELOW INSTEAD */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
{		/* dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td - all removed from here */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}

/*remember to define focus styles! */
:focus { 
	outline: 0; 
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* ----- end of reset snippet -------------- */


/* ----- General Styles -------------------- */
body {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	background: #ffffff url(images/baghback10.jpg) repeat center top;
	margin: 0; /* 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;
	color: #000000;
}


/* ----- Outer Container Styles -------------------- */
/* Outer Container Styles - simple box to created dropshadow and contain all contents */
#outerbox {
	position: relative;
	overflow: hidden;
	width: 960px;
	margin: 10px auto 20px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	padding: 0;
	text-align: center;
	background: transparent;
}
#outerboxtop {
	width: 960px;
	height: 30px; /* dropshadow plus space for shadow rounding (make header image with no top space) */
	background: transparent url(images/outercontainertop.png) no-repeat center top;
}
#outerboxcenter {
	position: relative;
	overflow: hidden;
	width: 960px;
	background: transparent url(images/outercontainercenter.png) repeat-y center;
}
#outerboxbottom {
	width: 960px;
	height: 30px; /* dropshadow plus space for shadow rounding */
	background: transparent url(images/outercontainerbottom.png) no-repeat center bottom;
}


/* ----- Main Container Styles -------------------- */
/* Container Section Styles - holds and centers all other containers */
#container {
	position: relative;
	overflow: hidden;
	width: 800px;
	background: #ffffff;
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

/* ----- Header Section Styles -------------------- */
#header {
	width: 800px;
	height: 125px;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: #ffffff url(images/headerbanner01.jpg) no-repeat center center;
}


/* Header Link Styles - full size of header, but with text hidden off-screen */
#header h1 a {
	display: block;
	width: 100%;
	height: 115px;
	background: transparent;
	font-size: 1px;
	color: #ffffff;
	text-indent: -9000em;	/* Hide text off-screen */
	margin: 0;
	margin-top: -15px;
	padding: 0;
}

/* ----- Main Menu and BOP Menu Section Styles -------------------- */
/* Menu Container */
#mainmenucontainer, #bopmenucontainer {
	position: relative;
	overflow: hidden;
	width: 800px;
	height: 48px;
	margin: 8px 0 7px 0;
}
/* ----- Main and BOP Menu Styles ---------------- */
		/* Created as per http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites */
/* Menu List */
ul.awesome-menu {
	width: 800px; 
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Menu List Items */
ul.awesome-menu li { display: inline; margin: 0; padding: 0; }

/* Menu Links */
ul.awesome-menu li a {
	display: block; 
	float: left; 
	height: 48px;
	background-image: url(images/main-menu-back-02.jpg); 
	text-indent: -9999px;
	margin: 0; padding: 0;
}
	/* Individual Specific Link Styles */
	ul.awesome-menu li a.menu-home { width: 80px; background-position: 0 0; }
	ul.awesome-menu li a.menu-biography { width: 67px; background-position: -80px 0; }
	ul.awesome-menu li a.menu-stage { width: 86px; background-position: -147px 0; }
	ul.awesome-menu li a.menu-screen { width: 94px; background-position: -233px 0; }
	ul.awesome-menu li a.menu-demo-reel { width: 90px; background-position: -327px 0; }
	ul.awesome-menu li a.menu-voice { width: 77px; background-position: -417px 0; }
	ul.awesome-menu li a.menu-consultant { width: 134px; background-position: -494px 0; }
	ul.awesome-menu li a.menu-press { width: 82px; background-position: -628px 0; }
	ul.awesome-menu li a.menu-contact { width: 90px; background-position: -710px 0; }
	/* Individual Link Hover and Focus Styles */
	ul.awesome-menu li a.menu-home:hover, ul.awesome-menu li a.menu-home:focus { background-position: 0 -48px; }
	ul.awesome-menu li a.menu-biography:hover, ul.awesome-menu li a.menu-biography:focus { background-position: -80px -48px; }
	ul.awesome-menu li a.menu-stage:hover, ul.awesome-menu li a.menu-stage:focus { background-position: -147px -48px; }
	ul.awesome-menu li a.menu-screen:hover, ul.awesome-menu li a.menu-screen:focus { background-position: -233px -48px; }
	ul.awesome-menu li a.menu-demo-reel:hover, ul.awesome-menu li a.menu-demo-reel:focus { background-position: -327px -48px; }
	ul.awesome-menu li a.menu-voice:hover, ul.awesome-menu li a.menu-voice:focus { background-position: -417px -48px; }
	ul.awesome-menu li a.menu-consultant:hover, ul.awesome-menu li a.menu-consultant:focus { background-position: -494px -48px; }
	ul.awesome-menu li a.menu-press:hover, ul.awesome-menu li a.menu-press:focus { background-position: -628px -48px; }
	ul.awesome-menu li a.menu-contact:hover, ul.awesome-menu li a.menu-contact:focus { background-position: -710px -48px; }
	/* Individual Link Current Page Link Styles */
	#home ul.awesome-menu li a.menu-home { background-position: 0 -48px; }
	#biography ul.awesome-menu li a.menu-biography { background-position: -80px -48px; }
	#stage ul.awesome-menu li a.menu-stage { background-position: -147px -48px;	}
	#screen ul.awesome-menu li a.menu-screen { background-position: -233px -48px; }
	#demo-reel ul.awesome-menu li a.menu-demo-reel { background-position: -327px -48px; }
	#voice ul.awesome-menu li a.menu-voice { background-position: -417px -48px; }
	#consultant ul.awesome-menu li a.menu-consultant { background-position: -494px -48px; }
	#press ul.awesome-menu li a.menu-press { background-position: -628px -48px; }
	#contact ul.awesome-menu li a.menu-contact { background-position: -710px -48px; }
/* Remove Link Outline - did this in the reset snippet, but here anyway just to make sure */
a { outline: none; }

/* ----- End Main Menu Styles --------------------------- */

/* ----- Contents Section Box Styles -------------------- */
/* Inner Box - Container for the dividing lines, content sections, and jQuery bits --------------- */
.innerbox {
	position: relative;
	overflow: hidden;
	width: 800px;
	margin: 0;
	padding: 0;
	/*background: #66CC00;  BRIGHT GREEN - JUST TO SEE */
}

/* ----- Content Section Styles - Container for text and photos - but not the dividing lines -------------------- */
.contentsection {
	position: relative;
	overflow: hidden;
	width: 720px; /* 800px - 40px margins = 720px */
	margin: 0 40px;
	padding: 0;
	/*background: #CC9999;  LIGHT BROWN - JUST TO SEE */
}
/* Inner Content Section Styles - text and photo "columns" */
.innercontent {
	position: relative;
	overflow: hidden;	
	margin: 0;
	padding: 0 0 20px 0;
}
.leftside {
	float: left;
	width: 450px;
	/*background: #9999FF;  LAVENDER - JUST TO SEE */
}
.rightside {
	float: right;
	width: 254px; /* 250px photo width with 2px borders = 254px */
	/*background: #FF0000;   RED - JUST TO SEE */
}
.centeredcontents {
	text-align: center;
}
/* Various Inner Content Section Widths - WON'T USE MOST OF THEM - SO REMOVE LATER */
		/* based on 720px full-width of contentsection -   minus 20px center space (removing 10px from each side) = 700px */
.fullwidthsection { width: 720px; }
.threequarterwidthsection { width: 525px; } /* not used */
.twothirdswidthsection { width: 466px; } /* not used */
.halfwidthsection { width: 350px; } /* not used */
.onethirdwidthsection { width: 233px; } /* not used */
.onequarterwidthsection { width: 175px; } /* not used */


/* ----- Dividing Line Section Styles - Creates deviding lines with background images only ------------------ */
.simpledivider {
	width: 800px;
	height: 25px;
	background: url(images/divider-full-width-no-scroll.gif) no-repeat center center;
	margin: 0;
}
.ornatedivider {
	width: 800px;
	height: 25px;
	background: transparent url(images/divider-full-width-scroll.gif) no-repeat center center;
	margin: 0;
}


/* ----- Miscellaneous Content Styles - Typographical and all ----- */
/* ----- General Typography Styles ----- */
h1, h2 { /* I don't use h1 anywhere but the hidden one in the header, but this is for completeness :-) */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 1.5;
	font-weight: normal;
	color: #2d9d75;
	text-transform: capitalize;
}
h3 {
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	font-weight: normal;
	text-transform: capitalize;
	color: #c9b303;
}
h4 {
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: normal;
	text-transform: none;
	margin: 15px 0 5px 0;
	color: #000000;
}
h5, h6 {
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	font-weight: normal;
	text-transform: none;
	margin: 15px 0 5px 0;
	color: #000000;
}
/*h2, h3 { background-color: #FFFF00;}  JUST TO SEE */

/* Specific Heading Styles - using image replacement technique to display script background images */
/* In General */
.h2subheading {
	display: block;
	width: 100%;
	Height: 60px;
	text-align: left;
	background: transparent;
	font-size: 1px;
	color: #ffffff;
	text-indent: -9000em;	/* Hide text off-screen */
	margin: 10px 0 10px 0;
	padding: 0;
}
/* Each Specific Heading */
/* Home Page */
#home-slide1 .h2subheading		{ background: transparent url(images/h2-home-balinder-johal.jpg) no-repeat left center; }
#home-slide2 .h2subheading		{ background: transparent url(images/h2-home-screen-actress.jpg) no-repeat left center; }
#home-slide3 .h2subheading		{ background: transparent url(images/h2-home-screen-actress.jpg) no-repeat left center; }
#home-slide4 .h2subheading		{ background: transparent url(images/h2-home-screen-actress.jpg) no-repeat left center; }
#home-slide5 .h2subheading		{ background: transparent url(images/h2-home-screen-actress.jpg) no-repeat left center; }
#home-slide6 .h2subheading		{ background: transparent url(images/h2-home-stage-actress.jpg) no-repeat left center; }
#home-slide7 .h2subheading		{ background: transparent url(images/h2-home-cultural-consultant.jpg) no-repeat left center; }
/* Biography Page */
#biography-biography 			{ background: transparent url(images/h2-biography-biography.jpg) no-repeat left center; }
#biography-awards 				{ background: transparent url(images/h2-biography-awards.jpg) no-repeat left center; }
#biography-training				{ background: transparent url(images/h2-biography-training.jpg) no-repeat left center; }
/* Stage Page */
#stage-stage	 				{ background: transparent url(images/h2-stage-stage.jpg) no-repeat left center; } /* not used */
#stage-slide1 .h2subheading 	{ background: transparent url(images/h2-stage-stage.jpg) no-repeat left center; }
#stage-slide2 .h2subheading 	{ background: transparent url(images/h2-stage-stage.jpg) no-repeat left center; }
#stage-slide3 .h2subheading 	{ background: transparent url(images/h2-stage-stage.jpg) no-repeat left center; }
#stage-slide4 .h2subheading 	{ background: transparent url(images/h2-stage-stage.jpg) no-repeat left center; }
#stage-credits					{ background: transparent url(images/h2-stage-credits.jpg) no-repeat left center; }
/* Screen Page */
#screen-screen	 				{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; } /* not used */
#screen-slide1 .h2subheading  	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide2 .h2subheading 	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide3 .h2subheading 	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide4 .h2subheading  	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide5 .h2subheading  	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide6 .h2subheading 	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-slide7 .h2subheading 	{ background: transparent url(images/h2-screen-screen.jpg) no-repeat left center; }
#screen-credits					{ background: transparent url(images/h2-screen-credits.jpg) no-repeat left center; }
/* Demo Reel Page */
#demo-reel-demo-reel			{ background: transparent url(images/h2-demo-reel-demo-reel.jpg) no-repeat left center; }
#demo-reel-additional			{ background: transparent url(images/h2-demo-reel-additional.jpg) no-repeat left center; }
/* Voice Page */
#voice-voice				 	{ background: transparent url(images/h2-voice-voice.jpg) no-repeat left center; }
#voice-demos				 	{ background: transparent url(images/h2-voice-demos.jpg) no-repeat left center; }
#voice-credits				 	{ background: transparent url(images/h2-voice-credits.jpg) no-repeat left center; }
/* Consultant Page */
#consultant-consultant 			{ background: transparent url(images/h2-consultant-consultant.jpg) no-repeat left center; }
#consultant-credits 			{ background: transparent url(images/h2-consultant-credits.jpg) no-repeat left center; }
/* Press Page */
#press-press	 				{ background: transparent url(images/h2-press-press.jpg) no-repeat left center; }
#press-awards					{ background: transparent url(images/h2-press-awards.jpg) no-repeat left center; }
/* Contact Page */
#contact-contact				{ background: transparent url(images/h2-contact-contact.jpg) no-repeat left center; }
#contact-balinder-johal			{ background: transparent url(images/h2-contact-balinder-johal.jpg) no-repeat left center; }
#contact-agent					{ background: transparent url(images/h2-contact-agent.jpg) no-repeat left center; }

/* Paragraph, List, Blockquote, Etc Styles */
p, dl, dt, dd, ol, ul, li, blockquote, td, th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: 14px;
	font-weight: normal;
	color: #220e40; /* dark purple-grey */
	text-align: justify;
	/*background: #00FFCC; 	 JUST TO SEE -- REMOVE THIS! */
}
p, dl, ol, ul {
	margin: 0 0 14px 0;
}

/* Contact Page List Styles, Demo List Styles, Interview List Styles */
ul.contactul, ul.interviewlist, ul.demolist, ul.traininglist  {
	list-style-position: outside;
	list-style-image: url(images/listdisc02.gif);
	margin-top: 14px;
}

/* Blockquote Styles (blockquotes in content, slideshows, and sidebars) */
/* General Blockquote Styles */
/* Blockquote Styles - see slideshow styles section for slideshow blockquotes */
.blockquote {
	float: left;
	padding: 0;
	margin: 14px 20px 14px 20px;
	text-align: justify;
}
.contentquote, .sidebarquote {
	color: #000000;
	text-align: justify;
	font: italic normal 14px/1.5 Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 14px 20px 14px 20px;
}
/* Slideshow Blockquote Styles */
.slideshowquote {
	color: #000000; 
	font: italic normal 14px/1.5 Verdana, Arial, Helvetica, sans-serif; 
	text-align: left;
	margin: 14px 0 14px 10px; 
	padding: 0; 
	
}
/* Press Page Blockqoute Styles - gives background image (bullet) */
.creativequote {
	margin-left: 0;
	padding-left: 20px;
	background: url(images/listdisc02.gif) no-repeat left 6px;	
}
/* Blockquote Source Styles */
.contentquotesource, .sidebarquotesource, .slideshowquotesource {
	text-align: right;
	font-weight: bold;
	font-style: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 10px;	
}

/* Miscellaneous Text Styles */
/* Inline Quotes (those not in blockquotes etc) */
.quote { font-style: italic; }
/* Names of plays, companies, films etc */
.name { font-style: italic; }
/* Script dialog */
.dialoguetext { font-style: italic; }
.bold {font-weight: bold; }


/* Contents Table Styles - Awards, Credits, and other resume-related information */
.contenttable {
	margin: 0;
	padding: 0;
	border: 2px solid #c9b303;
	outline: 0;
	vertical-align: baseline;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	margin-bottom: 20px;
}
.contenttable caption {
 	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	font-weight: normal;
	text-transform: none;
	color: #c9b303;
	margin-bottom: 10px;
}
.contenttable caption a {
 	color: #c9b303;
}
/* Table Headers */
.contenttable th {
	border: 1px solid #c9b303;
	font-weight: normal;
	font-size: 16px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}
/* Table Cells */
.contenttable td {
	border: 1px solid #c9b303;
	font-weight: normal;
	padding: 10px;
	vertical-align:text-top;
	text-align: left;
}
/* Individual Table Styles - Awards, Stage, Screen, etc */
/* Awards Table */
.awardstable { width: 450px; margin-top: 0px; }
.awardstable .col1 { }
.awardstable .col2 { }
/* Stage Page Credits Table */
.stagetable { width: 720px; margin-top: 0px; }
.stagetable .col1 { width: 250px; }
.stagetable .col2 { width: 150px; }
/* Screen Page Credits Table */
.screentable { width: 720px; margin-top: 0px; }
.screentable .col1 { width: 250px; }
.screentable .col2 { width: 150px; }
/* Consultant Page Credits Table */
.consultanttable { width: 720px; margin-top: 0px; }
.consultanttable .col1 { width: 200px; }
.consultanttable .col2 { width: 250px; }
/* Voice Page Credits Table */
.voicetable { width: 720px; margin-top: 0px; }
.voicetable .col1 { width: 250px; }
.voicetable .col2 { width: 130px; }


/* Links in Contents */
.contentsection a:link, .contentsection a:visited { color: #220e40; text-decoration: underline; }
.contentsection blockquote a:link, .contentsection blockquote a:visited { color: #000000; text-decoration: underline; }
.contentsection a:hover, .contentsection a:active, .contentsection a:focus { color: #f32563; text-decoration: underline; }
.contentsection blockquote a:hover, .contentsection blockquote a:active, .contentsection blockquote a:focus { color: #f32563; text-decoration: underline; }


/* Image Styles */
img.pinkborderedphoto { border: 2px solid #f32563; }
img.greenborderedphoto { border: 2px solid #c9b303; }
/* Styles for inline photos */
.leftphoto { 
	float: left; 
	margin-right: 20px;
	margin-left: 0;
	margin-top: 4px; /* The top margin is to match the text, which is 14px with linehight 1.5 */ 
}
.rightphoto { 
	float: right; 
	margin-left: 20px;
	margin-right: 0;
	margin-top: 4px;
}
/* Photo Caption Text Styles */
.photocaption {
	text-align: center;
	font: normal 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
	margin: 3px 0 20px 0;
}

/* URL Section Styles - just displays the URL on the page */
.url {
	text-align: center;
	background: transparent;
	font-size: 24px;
	line-height: 1.5;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 0 10px 0; 
	text-transform: lowercase;
	color: #575757;
}
.url a:link, .url a:visited { color: #7c6522; text-decoration: none; }		
.url a:hover, .url a:active, .url a:focus { color: #f32563; text-decoration: none; }

/* ----- jQuery Slider Styles ------------- */
.slideshow { 
	height: 365px; 
	width: 720px; 
	margin: auto; 
	border: 0; 
	/*background: #00FFFF;  LIGHT BLUE - JUST TO SEE */
}
/* Home Page Slider Slide Sections */
.homeslidediv, .stageslidediv, .screenslidediv { 
	position: relative;
	overflow: hidden;
	width: 720px; /* THE MAIN DIVS INSIDE THE SLIDESHOW MUST BE GIVEN WIDTHS IN ORDER TO TRANSITION CORRECTLY! */
	height: 365px;
	/*background: #FFFF00;  YELLOW - JUST TO SEE */
}
/* Slide Contents - images, headings, paragraph text, quote text */
.slideshow img { float: right; margin: 5px 10px 0px 20px; padding: 0; border: none; }
.slideshow h2 { margin: 10px 0 0 10px; }
.slideshow h3 { margin: 10px 0 0 10px; color: #c9b303; line-height: 1; font-size: 20px; }
.slideshow p { margin: 14px 0 14px 10px; padding: 0; color: #000000; font: normal 14px/1.5 Verdana, Arial, Helvetica, sans-serif; text-align: left; }

/* jQuery Slider Navigation Buttons */
#nav {
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
}
#nav a {
	display: inline-block;
	width: 21px;
	height: 21px;
	background:  url(images/slidernavback01.gif) no-repeat;
	background-position: 0 0;
	border: 0;
	text-decoration: none;
	margin: 8px 5px 0 5px;
	padding: 0;
	text-indent: -9000px;
	color: #c9b303;
}
#nav a.activeSlide { color: #f32563; background-position: 0 -21px; }
#nav a:hover { color: #f32563; background-position: 0 -21px; }
#nav a:focus { color: #f32563; outline: none; background-position: 0 -21px; }

/* jQuery Slider Previous, Next, and Toggle Buttons */
/* Containers */
.prevnav { 
	float: left; 
	text-align: right; 
	margin: -24px 0 10px 175px; 
}
.nextnav { 
	float: right; 
	text-align: left; 
	margin: -24px 175px 10px 0;
}
.togglenav { 
	width: 100px;
	position: absolute;
	top: 368px;
	right: 30px;
	cursor: pointer;
	text-align: center;
}
/* Links */
#prev2, #next2, #toggleButton {
	border: 0;
	color: #c9b303;
	margin: 0 5px 0 5px;
	padding: 2px 5px 2px 5px;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
}
#prev2:hover, #next2:hover, #toggleButton:hover { color: #f32563; }


/*
SLIDESHOW NOTES:
	Use Cycle (http://malsup.com/jquery/cycle/int2.html), which seems to have good customization and navigation (buttons, hover, 
	prev/next, etc etc). 
	See Options Reference Page (http://jquery.malsup.com/cycle/options.html) for all the options. 
	And Effects Browser(http://jquery.malsup.com/cycle/browser.html) to see transition possibilities. 
	Github has a good page about all it's updates and links at https://github.com/malsup/cycle.
*/

/* ----- End jQuery Slider Styles ----- */

/* See Credits Section Styles */
#seecredits {
	position: absolute;
	top: 280px; /* was 250px - but had to lower it because of text for Heaven On Earth in Screen */
	left: 70px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: 12px;
	font-weight: bold;
	color: #220e40; /* dark purple-grey */
	text-align: left;
	background: transparent url(images/listdisc02.gif) no-repeat left center;
	padding-left: 15px;
}

/* Demo Reel Section Styles */
.demoreelsection {
	text-align: center;
	margin-bottom: 20px;
}
/* Voice Demo Section Styles */
.voicedemosection {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}


/* ----- End Main Content Section Styles ----- */

/* ----- Footer Section Styles ------------------------- */
#footer {
	width: 800px;
	text-align: center;
	margin: 0;
	padding: 0;
}

/* ----- BOP Menu Section Styles - IDENTICAL TO MAIN MENU - see that section -------------------- */

/* ----- Copyright Section Styles ---------------- */
#copyright { 
	color: #a7ad9d;
	font-size: 10px;
	border: 0;
	margin: 0;
	padding: 0; 
}
#copyright a:link, #copyright a:visited { color: #a7ad9d; text-decoration: underline; }		
#copyright a:hover, #copyright a:active, #copyright a:focus { color: #f32563; text-decoration: underline;  }	

/* ----- Miscellaneous Styles -------------------- */
.clearboth { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }
.centeredtext { text-align: center; }
.lefttext { text-align: left; }
.righttext { text-align: right; }
.justifytext { text-align: justify; }
.floatleft { float: left; }
.floatright { float: right; }

/* ------- Superscript ------------------- */
.superscript { 
	vertical-align: super;
    font-size: smaller;
	top: -0.5em;
	color: #999
	}