@charset "utf-8";
body	{	
			font-family:Arial,Helvetica,sans-serif;
			font-size: 1.1vw;
			background-color: #e5eef3;
			background: #e5eef3 url(/Images/GrandSketchTransparent.png) no-repeat center top fixed;
			background-size: 30%;
			margin: 0;
			padding: 0 10% 0 10%;
			/* color:#858585;*/
		}
h1 	{	
		text-align: center;
	}
		
#main 	{	
			width: 80%;
			margin: 0 auto;
			background-color: #f3f3f3;
			opacity: 0.90;
			display: inline-block;
			position: absolute;
			box-shadow: 2px 2px 5px #000000;
			text-align: center;
			min-height: 100%;
		}
img.logo 	{ 
				max-width:50%;
				height: auto;
				opacity: 1;
			}
div.movieListWrapper	{	
							margin: 10px auto 0px auto;
							width: inherit;
							display: inline-block;
							min-width: 0%;
						}
table.movieDetailsWrapper 	{	
								width: 100%;
								margin: auto 5px auto 5px;
							}
div.moviePoster {	
					width: 25%;
					margin: 0px;
					float: left;
					min-width: 0%;
					
				}
img.moviePoster {	
					max-width:100%;
					height:auto;
				}
div.movieDetails 	{	
						width:75%;
						margin: auto;
						float: right;
						min-width: 0%;
						padding-top: 5%;
					}
.movieTitle	{	
				text-align:left;
				font-size:26px;
				font-size:2.6vw;
				font-weight:700;
				vertical-align: top;
			}
.movieLength	{	
					text-align: left;
					font-size: 11px;
					font-size: 1.1vw;
				}
div.rating 	{	
				border-radius:5px;
				border: 2px solid #2B2B2B;
				background-color: #2B2B2B;
				color: #FFF;
				font-size: 11px;
				font-size: 1.1vw;
				width: auto;
				display: table;
				padding: 2px;
				margin: 0px;
				vertical-align: middle;
			}
div.genreWrapper 	{	
						display: inline-block;
						text-align: center;
					}
div.genre 	{	
				border-radius:5px;
				border: 2px solid #2B2B2B;
				background-color: #2B2B2B;
				color: #FFF;
				font-size: 11px;
				font-size: 1.1vw;
				width: auto;
				margin: 5px;
				display: inline-block;
				padding: 2px;
				vertical-align: middle;
			}
div.showtimeWrapper {	
						display: inline-block;
						text-align: left;
					}
div.showtimeMatinee {	
						border-radius:5px;
						border: 2px solid #c1472d;
						background-color: #c1472d;
						color: #FFF;
						font-size: 15px;
						font-size: 1.5vw;
						width: auto;
						margin: 5px;
						display: inline-block;
						padding: 2px;
					}
div.showtimeStandard 	{	
							border-radius:5px;
							border: 2px solid #2d8bc1;
							background-color: #2d8bc1;
							color: #FFF;
							font-size: 15px;
							font-size: 1.5vw;
							width: auto;
							margin: 5px;
							display: inline-block;
							padding: 2px;
						}
table.movieMoreInfoWrapper 	{ 	
								vertical-align: top;
								width: inherit;
								display: inline-block;
								text-align: center;
							}
div.synopsis 	{	
					font-size: 15px;
					font-size: 1.5vw;
					text-align: left;
				}
table.movieTogglerWrapper 	{	 
								border-radius:10px;
								margin: 0px auto 10px auto;
								width: inherit;
								display: inline-block;
								text-align: center;
							}
a.movieLinks	{
					font-size: 14px;
					font-size: 1.4vw;
				}	
a 	{
		text-decoration: none;
		color: #6A9A1F;
	}

a:hover {
			text-decoration: none;
			color: #6A9A1F;
			font-weight:bold;
		}
.slider	{
			display:none;
			margin: 5px auto 0px auto;
			width: inherit;
		}
.collapseSlider	{
					display:none;
				}
.collapseSlider:hover	{
							font-weight:bold;
							color: #6A9A1F;
							cursor:pointer;
						}

.sliderExpanded .collapseSlider	{
									display:block;
									text-align: center;
								}
.sliderExpanded .expandSlider	{
									display:none;
									text-align: center;
								}
.expandSlider:hover	{
						font-weight:bold;
						color: #6A9A1F;
						cursor:pointer;
					}
.toggler 	{	
				text-align: center;
				margin: 0px auto;
				font-size: 11px;
				font-size: 1.1vw;
			}
hr 	{	
		box-shadow: 2px 2px 5px #000000;
	}
.dateSelectWrapper 	{
						display: inline-block;
						margin: 5px 1px;
						vertical-align: middle;
						width: 100%;
						overflow: hidden;
					}
.dateSelectForm { 
					float:left;
					width: 50%;
					margin: auto;
				}
.dateSelectForm label 	{
							display: inline-block;
							font-weight: 400;
							margin-right: 10px;
							text-transform: uppercase;
							vertical-align: middle;
						}
.dateSelectBorder 	{
						border: 1px solid #9b9b9b;
						width: 200px;
						display: inline-block;
						background: url("/Images/SelectArrow.png") no-repeat right center,#fff;
						background-size: auto 100%;
						z-index: 1000;
					}
.dateSelectForm .dateSelectBorder select 	{
												width: 110%;
												padding: 5px 30px 5px 2px;
												border: 0px;
												background: transparent;
												-webkit-appearance: none;
												-moz-appearance: none;
												text-align: left;
											}
.dateSelectForm .dateSelectBorder select::-ms-expand 	{
															display: none;
														}
.dateMatineeDesc 	{ 
						width: 50%;
						text-align: left;
						float:right;
					}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 	{ 

	body 	{	
				font-family:Arial,Helvetica,sans-serif;
				background-color: #e5eef3;
				background: #e5eef3 url(/Images/GrandSketchTransparent.png) no-repeat center middle fixed;		
				margin: 0px;
				padding: 0px;
			}
	#main 	{	
				width: 100%;
				margin: 0 auto;
				background-color: #f3f3f3;
				display: inline-block;
				position: absolute;
				box-shadow: 2px 2px 5px #000000;
				text-align: center;
				padding: 0px 5px;
				opacity: 0.90;
			}		
	.dateSelectWrapper 	{
							display: block;
							margin: 5px 1px;
							width: 100%;
						}
	.dateSelectForm label 	{ 
								display: none;
							}
	.dateSelectForm { 
						text-align: center;
						width: 100%;
					}
	.dateMatineeDesc 	{ 
							text-align: center;
							width: 100%;
						}
	.movieTitle {
					font-size: 5.1vw;
				}
	.movieLength 	{
						font-size: 1.9vw;
					}
	div.rating 	{
					font-size: 2.1vw;
				}
	div.genre 	{
					font-size: 2.1vw;
				}
	div.showtimeMatinee 	{
								font-size: 2.9vw;
							}	
	div.showtimeStandard 	{
								font-size: 2.9vw;
							}
	div.synopsis 	{	
						font-size: 2.7vw;
					}	
	div.dateMatineeDesc 	{
								font-size: 2.4vw;
							}
	a.movieLinks	{
						font-size: 2.4vw;
					}	
	.toggler 	{
					font-size: 2.3vw;
				}
	} 