/* stageplay.ca css file ------------------------------------------------------------------------------------------------------- */
/* RULES: */
/* - try and keep it all sorted and definitions in alphabetical order */
/* - pack this before uploading via ftp at http://www.lotterypost.com/css-compress.aspx */
/* - use three digit hex colors */

/* debig code

* *:hover { border:2px solid #89A81E }                   /* Solid Green 
* * *:hover { border:2px solid #F34607 }                 /* Solid Orange 
* * * *:hover { border:2px solid #5984C3 }               /* Solid Blue 
* * * * *:hover { border:2px solid #CD1821 }             /* Solid Red 
* * * * * *:hover { border:2px dotted #89A81E }          /* Dotted Green 
* * * * * * *:hover { border:2px dotted #F34607 }        /* Dotted Orange 
* * * * * * * *:hover { border:2px dotted #5984C3 }      /* Dotted Blue 
* * * * * * * * *:hover { border:2px dotted #CD1821 }    /* Dotted Red 

*/


/* setup ----------------------------------------------------------------------------------------------------------------------------- */

body,html {
	background: #000;
	color: #fff;
	font-style: normal;
	font-family: georgia, sans-serif;
	font-size: 12px;
	line-height: 90%;
}

/* layout ---------------------------------------------------------------------------------------------------------------------------- */

div#main {
	height: 700px;
	margin: 0px auto;
	padding: 10px;
	position: relative; 
	text-align: left;
    top: 0px;
	width: 960px;
}


div#leftcolumn {
	height: 450px;
	left: 20px;
	position: absolute;
	top: 20px;
	width: 450px;	
	}

div#rightcolumn {
	height: 450px;
	left: 489px;
	position: absolute;
	top: 15px;
	width: 450px;
}

div#content {
	height: 600px;
	left: 0px;
	position: relative;
	top: 0px;
	width: 100%;
}

div#error {
	height: 300px;
	left: 0px;
	position: relative;
	top: 0px;
	width: 100%;
}


div#search {
	height: 200px;
	left: 0px;
	position: relative;
	top: 0px;
	background-color: #f00;
	width: 100%;
}

	
/* header */

div#header {
	height: 80px;
	left: 20px;
	position: relative;
	top: 0px;
	width: 920px;
}

div#logobar {
	height: 65px;
	position: relative;
	width: 500px;
}

div#buttons {
	height: 50px;
	left: 470px;
	position: absolute;
	top: 35px;
	width: 500px;
}

div#barrest {
	height: 50px;
	left: 861px;
	position: absolute;
	top: 35px;
	width: 50px;
}

div#accountstatus {
	background:#000000;
	height: 20px;
	position: absolute;
	right: 24px;
	text-align: right;
	top: 10px;
	width: 320px;
}

/* footer */

div#footer {
    background: #333;
	bottom: 0px;
	height: 30px;
	position: absolute;
	width: 960px;
}

div#contactbar {
	height: 30px;
	line-height: 200%;
	position: absolute;
	width: 100%;
}

div#contactalign {
	line-height: 200%;
	position: absolute;
	right: 20px;
	text-align: right;
}


/* default.aspx layout */

div#prod1 {
	height: 373px;
	left: 20px;
	position: absolute;
	top: 0px;
	width: 157px;
}
 
div#prod2 {
	position: absolute;
	height: 373px;
	left: 177px;
	top: 0px;
	width: 157px;
}

div#prod3 {
	height: 373px;
	left: 334px;
	position: absolute;
	top: 0px;
	width: 157px;
}

div#showinfo1 {
	height: 350px;
	position: relative;
	top: 0px;
	width: 157px;
}

div#showinfo2 {
	height: 350px;
	position: relative;
	top: 0px;
	width: 157px;
}

div#showinfo3 {
	height: 350px;
	position: relative;
	width: 157px;
	top: 0px;
}

div#dropdown1 {
	bottom: 0px;
	height: 70px;
	left: 3px;
	position: absolute;
	width: 156px;
}

div#dropdown2 {
	bottom: 30px;
	height: 70px;
	position: relative;
	width: 157px;
}

div#dropdown3 {
	height: 70px;
	position: relative;
	top: 0px;
	width: 157px;
}

div#ticketdropdown {
	bottom: 24px;
	left: 0px;
	position: absolute;
}

div#buybutton {
	bottom: -12px;
	left: 60px;
	position: relative;
}

div#synopsis {
	height: 150px;
	left: 20px;
	position: absolute;
	top: 373px;
	width: 451px;
}
	
div#tabledescription {
	height: 150px;
	left: 0px;
	position: absolute;
	top: 44px;
	width: 451px;
}

div#howitworks {
	height: 150px;
	left: 489px;
	position: absolute;
	top: 15px;
	width: 460px;
}

div#updates {
	height: 150px;
	left: 489px;
	position: absolute;
	top: 373px;
	width: 450px;
}

div#programsponsors {
	bottom: 15px;
	height: 56px;
	left: 20px;
	position: absolute;
	width: 940px;
}

div#photocredit {
	bottom: 20px;
	height: 28px;
	left: 640px;
	position: absolute;
	text-align: right;
	width: 300px;
}

/* season layout */

div#play1 {
	height: 200px;
	left: 20px;
	position: absolute;
	top: 20px;
	width: 120px;
}

div#play2 {
	height: 255px;
	left: 175px;
	position: absolute;
	top: 20px;
	width: 155px;
}

div#play3 {
	height: 255px;
	left: 330px;
	position: absolute;
	top: 20px;
	width: 155px;
}

div#play4 {
	height: 255px;
	left: 485px;
	position: absolute;
	top: 20px;
	width: 155px;
}

div#play5 {
	height: 255px;
	left: 640px;
	position: absolute;
	top: 20px;
	width: 155px;
}

div#play6 {
	height: 255px;
	left: 795px;
	position: absolute;
	top: 20px;
	width: 155px;
}

div#play7 {
	height: 155px;
	left: 20px;
	position: absolute;
	top: 300px;
	width: 155px;
}

div#play8 {
	height: 155px;
	left: 175px;
	position: absolute;
	top: 300px;
	width: 155px;
}

div#play9 {
	height: 155px;
	left: 330px;
	position: absolute;
	top: 300px;
	width: 155px;
}

div#play10 {
	height: 155px;
	left: 485px;
	position: absolute;
	top: 300px;
	width: 155px;
}

div#play11 {
	height: 155px;
	left: 640px;
	position: absolute;
	top: 300px;
	width: 155px;
}

/* about layout */

div#aboutsponsors {
	height: 128px;
	left: 20px;
	position: absolute;
	top: 456px;	
	width: 923px;
}

div#aboutphotocredit{
	height: 15px;
	left: 20px;
	position: absolute;
	text-align: left;
	top: 379px;
	width: 400px;
}

div#normalphotocredit{
	height: 15px;
	left: 0px;
	position: absolute;
	text-align: left;
	top: 500px;
	width: 400px;
}

/* lightbox */
div#lightbox {
    background: #ffffff;
	height: 200px;
	left: 500px;
	position: absolute;
	top: 300px;
	width: 400px;
}

div#lightboxstageplaylogo {
	left: 20px;
	position: absolute;
	top: 20px;
}

div#lightboxyoungcentrelogo {
	left: 20px;
	position: absolute;
	top: 140px;
}

div#lightboxtransferring {
	left: 20px;
	position: absolute;
	top: 70px;
}

div#lightboxcartcontents {
	left: 20px;
	position: absolute;
	top: 120px;
}

div#lightboxcontinue {
	left: 290px;
	position: relative;
	top: 142px;
}

div#lightboxreturn {
	left: 264px;
	position: absolute;
	text-align: right;
	top: 180px;
}

/* look and feel --------------------------------------------------------------------------------------------------------------------- */

/* this adds stylized icons to links to indicate what they are */
a[href^="mailto:"] {
    background:transparent url(../images/icons/Icon_External_Link_E-Mail.png) center left no-repeat;
    display:inline-block;
    line-height:15px;
    padding-left:20px;
}

a[href^="pdf"] {
    background:transparent url(../images/icons/pdficon_small.gif) center left no-repeat;
    display:inline-block;
    line-height:15px;
    padding-left:20px;
}

a[href^="http://"] {
    background:transparent url(../images/icons/Icon_External_Link.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}

a[href^="https://"] {
    background:transparent url(../images/icons/Icon_External_Link_HTTPS.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}

/* border:  0px; solid #666  great for troubleshooting, add a border! */
img {
    border: 0px;
	margin: 0px;
	padding: 0px;     
}

/* links and ish */

a {
	font-size: 12px;
	text-decoration: none;
}

a:active {
	text-decoration: underline;
}

a:hover {
	font-size: 12px;
	color: #fff;
	text-decoration: underline;
}


a:link {
	color: #fff;
}

a:visited {
	color: #ccc;
}

a.footer {
	color: #fff;
	font-size: 9px;
	text-transform: none;
}

a.footer:hover {
	color: #fff;
	font-size: 9px;
	text-decoration: underline;
	text-transform: none;
}

a.microlink {         /* merge footer and microfont classes */
	color: #fff;
	font-size: 9px;
	text-transform: none;
}

a.microlink:hover {
	color: #fff;
	font-size: 9px;
	text-decoration: underline;
	text-transform: none;
}

a.invertedmicrolink {         /* merge footer and microfont classes */
	background: #fff;
	color: #000;
	font-size: 9px;
    text-transform: none;
}

a.invertedmicrolink:hover {
	background: #fff;
	color: #000;
	font-size: 9px;
	text-transform: none;
	text-decoration: underline;
}

a.normallink {
	color: #fff;
	font-size: 12px;
	text-transform: none;
}

a.normallink:hover {
	color: #fff;
	font-size: 12px;
	text-transform: none;
	text-decoration: underline;
}

/* lists and bullets */

ul {
	font-size: 12px;
	list-style-type: disc;
	margin: 0;
	padding-left: 15px;
}

li {
	margin:0px;
	padding-left:0px;
}

/* header */
.username { 
	font-size: 13px;
	font-style:italic; 
	color: #fff;
}

.accountstatus { 
	color: #fff;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 100%;
	line-height: 130%;
}

/* default.aspx */

.synopsis { 
	color: #ffffff;
	font-style: normal;
	letter-spacing: 100%;
	line-height: 130%;
	margin: 8px;
}

.productionname { 
	color: #ff0000;
	font-size: 12px;
	font-style: italic;
	line-height: 130%;
}

.text {
	color: #fff;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 100%;
	line-height: 130%;
}

.invertedtext {
	background: #fff;
	color: #000;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 100%;
	line-height: 130%;
}

.blurb {
	font-style: italic; 
	font-size: 18px;
	line-height: 130%;
}

.pointform {
	font-size: 10px;
	letter-spacing: 0px;
	line-height: 170%;
}

.sectionheading { 
	color: #ff0000;
	font-size: 14px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.microfont {
	font-size: 9px;
	margin-right: 21px;
}

.errormicrofont {
	font-size: 9px;
	color: #999;
}

.errors {
	background: #000;
	color: #ff0000;
	font-size: 10px;
	line-height: 100%;
	position: relative;
	margin: 15px;
}

.credits {
	color: #fff;
	font-size: 9px;
}

.invertedmicrofont {
	color: #000;
	background: #fff;
	font-size: 9px;
}

/* footer */

.contact {
	color: #fff;
	font-size: 9px;
	margin-right: 21px;
	text-align: right;
	vertical-align: middle;
}

/* forms ----------------------------------------------------------------------------------------------------------------------------- */

.textfield {
	background: #000;
	border: 1px solid #666;
	color: #fff;	
	font-size: 12px;
	margin: 0 0 0 0;
	padding: 2px;
}

.searchfield {
	background: #000;
	border: 1px solid #666;
	color: #fff;
	height: 24px;
	font-size: 19px;
	padding: 2px;
}
	
.password {
	background: #000;
	border: 1px solid #666;
	font-size: 12px;
	margin: 0 0 0 0;
	padding: 2px;
}

/* used with javascript to make input box highlighted on select */
.focusField{									
    background: #000;
    border: solid 1px #ccc;
	color: #fff;
	margin: 0px;
}

.idleField{
    background: #000;
    border: solid 1px #666;
	color: #cccccc;
	margin: 0px;
}     

/* navbar ---------------------------------------------------------------------------------------------------------------------------- */

/*
top to:								left to:							width:	
	normal: 0							home: 0					        	home: 47
	rollover: 38						about: 49					    	about: 138
	selected: 76						season: 187					        season: 63
										map: 250			    			map: 43
										blog: 292		    				blog: 50
										video: 342				    		video: 49
*/

ul#nav											{ background:url(../images/navbar/navbar.gif) }
ul#nav li										{ float: left; list-style-type: none }
ul#nav li a										{ height: 38px; display: block; position: absolute; top: 0; text-indent:-9999px; outline: 0 }

li#navhome a, li#navabout a, 
li#navseason a, li#navmap a, 
li#navblog a, li#navvideo a 
												{ background:url(../images/navbar/navbar.gif) }

li#navhome a 	    							{ background-position: 0 0; width: 49px; left: 0 }
li#navhome a:hover			    				{ background-position: 0 -38px }
body#ct100_pagehome li#navhome a		        { background-position: 0 -76px }

li#navabout a 				    				{ background-position: -49px 0; width: 138px; left: 49px }
li#navabout a:hover			    				{ background-position: -49px -38px }
body#ct100_pageabout 	                        { background-position: -49px -76px }

li#navseason a 	    							{ background-position: -187px 0; width: 63px; left: 187px }
li#navseason a:hover	    					{ background-position: -187px -38px }
body#ct100_pageseason li#navseason a        	{ background-position: -187px -76px }

li#navmap a 									{ background-position: -250px 0; width: 43px; left: 250px }
li#navmap a:hover	    						{ background-position: -250px -38px }
body#ct100_pagemap li#navmap a	        		{ background-position: -250px -76px }

li#navblog a 									{ background-position: -292px 0; width: 50px; left: 292px }
li#navblog a:hover						    	{ background-position: -292px -38px }
body#ct100_pageblog li#navblog a    			{ background-position: -292px -76px }

li#navvideo a 									{ background-position: -342px 0; width: 49px; left: 342px }
li#navvideo a:hover 							{ background-position: -342px -38px }
body#ct100_pagevideo li#navvideo a		    	{ background-position: -342px -76px }