/* grandv3.css */

body {
	margin:0;
	border:0;
	padding:0;
	font-size:1em;
	font-family:'Times New Roman', Times, serif;
}

div {
	margin:0;
	padding:0;
}

img {
	border-width:0;
}

.center {
	text-align:center;
}

small {
	font-size:0.75em;
}


a {color:#fefefe; text-decoration:underline;}
a.darklink {color:#000000;}
a.stronglink {color:#ffcccc;}
a.goldlink {color:#ffcc00;}


/*	container for curtain-backed pages
*/

#curtainer {
	background:#660000 url(/img/curtain1.gif) repeat;
	color:#fefefe;
}

.bgGreen	{background:#7FE971;color:#000000;opacity:0.65;filter:Alpha(opacity=65);}
.bgGold		{background:#FCE341;color:#000000;opacity:0.65;filter:Alpha(opacity=65);}
.bgViolet	{background:#CCB1FF;color:#000000;opacity:0.65;filter:Alpha(opacity=65);}
.bgAlert	{background:#EE3F3F;color:#FFFFFF;opacity:0.65;filter:Alpha(opacity=65);}

#corniceLeaf {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:279px;
	background:url(/img/ceilingcornice4.jpg) repeat;
	text-align:center;
	font-size:1.25em;
}

#corniceLeaf ul {
	margin:0;
	padding:0;
	text-align:center;
}

#corniceLeaf li {
	display:inline;
	margin:0;
	padding:0;
}

#corniceLogo {
	margin-top:77px;
	width:328px;
	height:126px;
}

#curtainContent {
	display:block;
	position:absolute;
	top:279px;
	left:0;
	width:100%;
}

.eventBlock {
	margin:auto 25%;
	font-size:1.25em;
	clear:both;
}

.noteBlock {
	margin:1.25em 0;
/*	padding:25px;*/
	padding:0.75em;
	font-size:1.25em;
}

.noteBlock span {
	opacity:1 !important;
	filter:Alpha(opacity=100) !important;
}

/* changing so only the caption will clear allows us to wrap paragraphs intentionally in small event blocks */
/*.eventBlock > p {*/
.eventCaption {
	clear:both;
}


/*	NOTE there is no need to declare additional classes for larger/smaller image sizes.
	this is based on the relatively uniform size produced by IMDb.  If an image is greatly
	distorted by this container size, the image itself should be adjusted.

	Usage: <div class="posterBox"><img class="posterImage" src="image.jpg" alt="Movie poster"></div>
*/
.posterBox {
	float:left;
	margin:0 10px 10px 15%;
	width:214px;
	height:317px;
	overflow:hidden;
}

.posterBoxHalfHeight {
	float:left;
	margin:0 10px 10px 0;
	width:214px;
	height:159px;
	overflow:hidden;
}

.posterImage {
	width:100%;	/* use width only, height will adjust proportionally. no additional declaration necessary in media query */
}


.eventSpecs {
	overflow:hidden;
}

.eventSpecs > p {
	margin-top:0;
}

.eventSpecs > ul {
	margin-left:10px;
	padding-left:10px;
}

li.od {				/* only day */
	list-style-type:disc;
	color:#fefefe;
}

li.md {				/* multi day */
	list-style-type:square;
	color:#ffcc00;
}

hr {
	color:#fefefe;
	background:#fefefe;
	width:90%;
	height:1px;
	border:0;
}

h1 {
	font-size:1.66em;
	font-weight:normal;
	text-align:center;
	color:#ffcccc;
}

h2 {
	margin-top:0;
	font-size:1.33em;
	font-weight:bold;
}

big {
	font-size:1.33em;
}

ul.showList {
	margin:0 auto 45px auto;
	padding:0;
	text-align:center;
	font-size:1.25em;
}

ul.showList li {
	list-style-type:none;
	margin-bottom:20px;
}

.legend {
	max-width:25em;
	margin:0 auto;
	font-size:1.25em;
	text-align:center;
	color:#ffcccc;
}

.legend ul {
	margin:0;
	text-align:left;
}


/*	body style for pages such as "Letter from the President" that have
	corniceLogo at top
*/
.letter_body {
	padding:0 3.25em 2em 3.25em;
	background:#ffffff;
	color:#000000;
}

/* standard container for diamond-backed (most info) pages */
#container {
	background:#ffcc99 url(/img/paneldiamond1L20.jpg) repeat;
	padding: 3% 8%;
	color:#fefefe;
	font-size:1.25em;
}

ul.largeGap li {list-style-type: disc; margin-bottom:15px;}



/* ================== smaller screen ==================== */
@media (max-width:1210px), (max-height:600px) {

.eventBlock {
	margin:auto 20%;
}
.posterBox {
	margin:0 10px 10px 10%;
}
}

@media (max-width:960px), (max-height:600px) {

.eventBlock {
	margin:auto 7%;
}
.posterBox {
	margin:0 10px 10px 0;
}
}



/* ================== smaller screen ==================== */
@media (max-width:600px), (max-height:600px) {

#corniceLeaf {
	height:139px;
	background:url(/img/ceilingcornice4small.jpg) repeat;
	font-size:1em;
}

#corniceLogo {
	margin-top:26px;
	width:164px;
	height:63px;
}

#curtainContent {
	top:139px;
}

.eventBlock {
	margin:auto 10px;
	font-size:1em;
}

.noteBlock {
	margin:1em 0;
/*	padding:10px;*/
	padding:0.5em;
	font-size:1em;
}

/* DEPRECATED */ .moviePoster {			/* size is 66% of original */
	width:142px;
	height:211px;
}

.posterBox {
	margin:0 10px 10px 0;
	width:142px;
	height:210px;
}

.posterBoxHalfHeight {
	width:142px;
	height:105px;
}

h1 {
	font-size:1.33em;

}

h2 {
	font-size:1.15em;
}

big {
	font-size:1.15em;
}

ul.showList {
	margin:0 auto 40px auto;
	font-size:1em;
}

ul.showList li {
	list-style-type:none;
	margin-bottom:15px;
}

#container {
	padding: 3% 8%;
	font-size:1em;
}

.legend {
	font-size:1em;
}

} /* end smaller screen */
