/* Fenton VIllage Players CSS file for 2009 design */

/* body and wrapper - set bkgd to gray, align site to center of window, set width at 780px*/

body {
	margin: 0px;
	padding: 0px;
	background-color: #CCCCCC;
	text-align: center;
}

#wrapper {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	border-left: 2px solid #003399;
	border-right: 2px solid #003399;
	border-bottom: 2px solid #003399;
/*	text-align: left; */
}

/* Masthead wrapper for both navs, logo, and photos */

#masthead {
	width: 780px;
}

/* top nav bar; gray gradient background, white cap text */

#nav1 {
	background-color: #CCCCCC;
	float: left;
	height: 40px;
	padding: 0px 0px 0px 0px;
	background-image: url(http://fentonvillageplayers.org/design/nav1_bkg.gif);
}

#nav1 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}
	
#nav1 ul li {
	padding: 10px 0px 10px 0px;
	float: left;
	list-style-type: none;
	width: 128px;
	text-align: center;
	border-right-color: #FFFFFF;
	border-right-width: 2px;
	border-right-style: groove;
	margin: 0px;
}
#nav1 ul li a {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
/*	font-size: 10pt; */
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: normal;
	list-style-position: inside;
	border-bottom-style: none;	
}

#auditions #nav1 .auditions a,
#tickets #nav1 .tickets a,
#membership #nav1 .membership a,
#support #nav1 .support a,
#contact #nav1 .contact a {
	color: #FFFF99;
	cursor: default;
}

#nav1 ul li a:hover {
	color: #003399;
}

#nav1 ul li a:active {
	color: #FFFF99;
}

/* Header contains the logo, rotating quote, and address */

#header {
	background-color:#FFFFFF;
	height: 80px;
}

/* header1 is logo  and address */

#header1 {
	background-color:#FFFFFF;
	height: 80px;
	float: left;
}

#header1 #logo {
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#logoimg {
	height: 80px;
	width: 388px;
	float: left;
	position: relative;
	background-image: url(http://fentonvillageplayers.org/design/FVPlogostrip.jpg);
	background-repeat: no-repeat;
}

#logoimg ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}


#logoimg ul li {
	list-style-type: none;
}

#logoimg a {
	position: absolute;
	width: 89px;
	height: 80px;
	text-indent: -9000em;
	border-bottom-style: none;	
}
	
#logoimg .address {
	/*background-color: #FFFFFF;*/
	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	font-size: 10px;
	color: #003399;
	text-align: center;	
	margin-top: 55px;
	position: relative;
}

#logoimg .address p {
	position: absolute;
	width: 360px;
	left: 14px;
	bottom: 5px;
}

/* header2 is rotating quote */

#header2 {
	background-color:#FFFFFF;
	height: 78px;
	width: 392px;
	float: left;
}

#quote {
	background-color: #FFFFFF;
	height: 80px;
/*	top: 41px; */
}



/* banner contains theater photo and rotating images */

#banner {
	height: 145px;
	background-color: #000000;
	width: 780px;
	float: left;
}

#banner img {
	float: left;
}

/* nav2 has blue background, white buttons, and search field */

#nav2 {
	background-color: #003399;
	float: left;
	width: 780px;
	height: 40px;
	left: 0px;
	padding: 0px 0px 0px 0px;
}

#nav2 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}
	
#nav2 ul li {
	padding: 0px 15px 0px 10px;
	float: left;
	list-style-type: inherit;
	text-align: center;
	border-right-color: #FFFFFF;
	border-right-width: 2px;
	border-right-style: groove;
	margin: 0px;
	margin-top: 10px;
	/*width: 130px;*/
}
#nav2 ul li a {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: normal;
	list-style-position: inside;
	border-bottom-style: none;	
}

#news #nav2 .news a,
#directions #nav2 .directions a,
#photos #nav2 .photos a,
#calendar #nav2 .calendar a,
#history #nav2 .history a {
	color: #FFFF99;
	cursor: default;
}

#nav2 ul li a:hover {
	color: #99CCFF;
}

#nav2 ul li a:active {
	color: #FFFF99;
}

/*container is for content - full width */

#container {
	width: 780px;
	background-color: #FFFFFF;
	float: left;
}

/* content is main story */

#content {
	float: left;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 0px;
	padding: 0px 0px 3px 0px;
	font-size: 10px;
	width: 500px;
}

#content2 {
	float: left;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 0px;
	padding: 0px 0px 3px 0px;
	font-size: 10px;
	width: 600px;
	border-right-color: #999999;
	border-right-style: solid;
	border-right-width: thin;
}

#content #content2 #content_full h1 {
	font-style : normal;
	text-align : left;
	margin-left: 3px;
	margin-top: 5px;
	border-bottom-style: dashed;
	border-bottom-width: thin;
	border-bottom-color: #003399;
}


#sidenav {
	position: relative;
	float: right;
	width: 160px;
	margin: 0px;
	padding: 0px 10px 0px 0px;
	margin-top: 3px;
}

#sidenav ul {
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
}

#sidenav li {
/*	padding: 2px 0px 2px 0px; */
	list-style-type: none;
	text-align: center;
	width: 100%;
	font-size: 13px;
}
	
#sidenav li a {
	display: block;
	text-transform: uppercase;	
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	list-style-position: inside;
	text-align: center;
	border-color: #333333;
	border-width: 0px 0px 2px 0px;
	border-style: dotted;
	padding: 2px 0px 2px 0px;
}

#content_full {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 0px;
	padding: 0px 0px 3px 0px;
	font-size: 10px;
	width: 750px;
}

#sidenav a:hover{
	background-color: #666666;
}

/************** feature styles *****************/

.feature {
	padding: 0px 0px 10px 10px;
	min-height: 200px;
	height: 200px;
	float: none;
}
html>body .feature {height: auto;}

.feature h3{
	font: bold 18px Times, serif;
	color: #000000;
	padding: 30px 0px 5px 0px;
}

.feature img{
	padding: 0px 10px 0px 0px;
}

.feature img.laramie {
	float: left;
	padding: 0px 0px 0px 0px;
}

.feature img.map {
	float: none;
	padding: 2px 2px 2px 2px;
}
/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 13px;
}

.story h3{
	font: bold 18px Times, serif;
	color: #000000;
	border-top-color: #666666;
	border-top-style: groove;
	border-top-width: thin; 
}

.story p {
	padding: 0px 0px 10px 0px;
	
}

.story a.capsule{
	font: bold 13px Times, serif;
	color: #003399;
	display:block;
	padding-bottom: 5px;
	text-align: left
}

.story a.capsule:hover{
	text-decoration: underline;
}
/********short lead styles ********/

.short_left {
	width: 240px;
	padding: 2px 2px 2px 2px;
	float: left;
	border-right: solid 2px gray;
}


.short_left a.capsule{
	font: bold 13px Times, serif;
	color: #003399;
	display:block;
	text-align: left;
	padding-bottom: 5px;
}

.short_left a.capsule:hover{
	text-decoration: underline;
}

.short_right {
	width: 240px;
	padding: 2px 2px 2px 2px;
	float: right;
	border-left-color: #999999;
	border-left-width: thin;
}

.short_right a.capsule{
	font: bold 13px Times, serif;
	color: #003399;
	display:block;
	text-align: left;
	padding-bottom: 5px;
}

.short_right a.capsule:hover{
	text-decoration: underline;
}


td.storyLeft{
	padding-right: 12px;
}

.morelink a {
	font-style: italic;
	font-size: smaller;
}

/* leftcol and rightcol are containers that have a border on the inside */

#leftcol {
	width: 510px;
	border-right: #999999 thin solid;
	float: left;
} 

#rightcol {
	width: 260px;
	border-left: #999999 thin solid;
	float: right;
} 
/* sidebar floats right, has different color background */
#sidebar {
	float: right;
	width: 248px;

	margin-top: 10px;
	margin-right: 3px;
	border-color: #333366;
	border-width: 2px;
	border-style: solid;
	background-color: #E6E699;
}

#sidebar h2 {
/*	font-size: 130%;
	font-weight: bold; */
	font-size: 18px;
	color: #003399;
	text-align: center;
	padding-top: 3px;

}

#sidebar p {
	text-align: justify;
	padding: 0px 3px 3px 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#sidebar ul li {
	list-style-type: square;
	font-size: 12px;
}

/* sidebar floats right, has different color background */
#sidebar2 {
	float: right;
	width: 248px;

	margin-top: 10px;
	margin-right: 3px;
	border-color: #333366;
	border-width: 2px;

}
#advert {
	float: right;
	padding: 3px 3px 3px 3px;
	margin: 5px 5px 5px 5px;
	width: 155px;
	border: 0;
}
	
/* footer has some links, mail address, copyright with gray ribbon */

#footer {

	padding: 0px 0px 0px 0px;
	clear: both;
	background-color: #FFFFFF;
	height: 35px;
	width: 780px;
	background-image: url(http://fentonvillageplayers.org/design/ribbon.gif);
	background-repeat: no-repeat;
	list-style-type: square;
}

#footer ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;

}
	
#footer ul li {
	padding: 5px 0px 5px 10px;
	float: left;
	list-style-type: none;
	text-align: center;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
}

#footer ul li a {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: normal;
	list-style-position: inside;
	border-bottom-style: none;
}

#footer ul li a:hover {
	color: #003399;
}

#footer ul li a:active {
	color: #FFFF99;
}
.copyright {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	font-style: italic;
	color: #003399;
	padding: 5px 5px 5px 0px;
}

/* table styles for the seating chart */
.table_seats {
	border: 0;
	padding: 0 0 0 0;
}

.noseat {
	width: 19px; 
	border: 0;
	padding: 0 0 0 0;
	background-image: none;
	height: 17px;
}

.seat {
	width: 20px; 
	border: 0;
	padding: 0 0 0 0;
	background-image: url(../images/blue_seat.gif);
/*	height: 36px; */
	background-repeat: no-repeat;
	background-position: center top;

}

.seatstyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	/*	line-height: 200%; */
	text-align: center;
	padding-top: 18px;
	font-size: 8px;
}
	
.row {
	width: 21px;
	border: 0;
	padding: 0 0 0 0;
	text-align: center;
}	

.rowstyle {
	font-weight: bold;
	font-size: small;
}

/* clears for all browsers */

.clear:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.clear {
	min-height: 1px;
}
* html .clear {
	height: 1px;
}
/* #scroller {width:490px; height:360px; position:relative;padding:5px 0; background:#fff;}
#scroller span {display:block; width:360px; height:365px; position:absolute; top:0; left:0; border:1px solid #ddd;}
#scroller b#thumbs {display:block; width:110px; height:325px; overflow:auto; float:right;margin-top:0px; border:1px solid #ccc; border-width:1px 0 1px 1px; padding:5px;}
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:75px; height:75px; border:1px solid #000;}
#scroller b#thumbs a img {width:75px; height:75px; border:0;}
#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}
#scroller b#thumbs a:hover img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:240px; left:15px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt, #scroller b#thumbs a:focus img.vt {width:240px; height:320px; left:60px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:240px; left:15px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:240px; height:320px; left:60px; top:7px; border:1px solid #333;}
*/
#scroller {width:580px; height:460px; position:relative;padding:5px 0; background:#fff ;}
#scroller span {display:block; width:440px; height:365px; position:absolute; top:0; left:0; border:1px solid #ddd ;}
#scroller b#thumbs {display:block; width:110px; height:325px; overflow:auto; float:right;margin-top:0px; border:1px solid #ccc; border-width:1px 0 1px 1px; padding:5px;}
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:75px; height:75px; border:1px solid #000;}
#scroller b#thumbs a img {width:75px; height:75px; border:0;}
#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(/images/FVbackground.jpg);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}
#scroller b#thumbs a:hover img.hr, #scroller b#thumbs a:focus img.hr {width:408px; height:306px; left:15px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt, #scroller b#thumbs a:focus img.vt {width:306px; height:408px; left:60px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:408px; height:306px; left:15px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:306px; height:408px; left:60px; top:7px; border:1px solid #333;}