/*********************** SKIN STYLES ***********************

This CSS file contains definitions for the skin of the 
interface. Almost anything can be changed here, except for 
the colour of certain interface elements which depend on
images. For these, Ascentis would have to help to change 
the colour of those elements.

Another way is for us to provide you with the working files 
of the interface, which is in Macromedia Fireworks 8's .png 
format.


++ STYLE SHEET LAYOUT ++

This style sheet is separated into a few distinct sections, 
and they are breifly described below:

- General/Shared Styles:
	These are styles that are used throughout the site, 
	so changing them would mean a site-wide change. 
	Certain style sections below are also site-wide 
	styles, just that they are further categorized to give 
	more details on what they control.

- Main Layout Table:
	The interface is actually a gigantic table, with multiple 
	tables nested below it for layout. The borders of this
	table are actually the white shadowed regions of the 
	interface.

- Inner Layout Table:
	This table sits within the Main Layout table and it 
	provides for further interface elements layout. It also
	contains the Cathay logo and main banner.

- Navigation Layout Table
	This table contains the pink navigation bar.

- Content Table
	This table provides the layout format for the main 
	body of each page as well as the footer.

- Individual Page Skins
	This section contains multiple sections, with each 
	section providing styles for specific pages.


++ THINGS TO TAKE NOTE OF WHEN MODIFYING STYLES ++

- You'll notice that most styles do not include font
definitions. This is because the styles table their font
definition from the more recent parent style with a font
definition. Therefore, to overwrite them, simply put in
a font definition at the style you wish to modify. Do
note that this would affect all styles that are nested
under this style as well (i.e. the cascading effect).

************************************************************/




/********** GENERAL/SHARED STYLES **********/

/* Force the width and height of the HTML page to be 100% of the window. */
html {
	width: 100%;
	height: 100%;
}
/* Remove paddings so that the borders can be controlled.  */
body {
	padding: 0px;
	margin: 0px;
	background-color: #000000;
	width: 100%;
	height: 100%;
}
/* generic font. */
body, p, div, span, td, input, select, textarea, label {
	font-size: 11px;
	font-family: Sari, Arial, Arial Narrow, Verdana, Tahoma;
}
/* the dashed horizontal rule (<hr />) used throughout the site. */
hr.dashedRule {
	border-bottom: #000066 1px dashed;
	border-top: transparent 1px solid;
	width: 100%;
}
/* the uppercase LEGEND word */
div.legend {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	height: 26px;
}
/* the copyright information */
div.copyright {
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
}
/* for header text like "Your Booking Summary", "Payment Details" etc... */
div.detailsHeader1
{
	background-image: url(../images/cinemaNameHeaderBG1.jpg);
	background-repeat: no-repeat;
	font-size: 18px;
	text-transform: uppercase;
	padding-left: 10px;
	vertical-align: middle;
	text-align: left;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 17px;
	border-bottom: #4A6B7E 1px solid;
	height: 24px;
}
/* for header text like "Your Booking Summary", "Payment Details" etc... */
div.detailsHeader 
{
	font-size: 18px;
	text-transform: uppercase;
	padding-left: 10px;
	vertical-align: middle;
	text-align: left;
	color: #000000;
	font-weight: bold;
	font-size: 17px;
	border-bottom: #4A6B7E 1px solid;
	height: 24px;
}
/* the details table is the table that displays the booking summary. 
the bottom is padded to space it out more */
table.details1 {
	border: none;
	padding-bottom: 3px;
	background-color:#003154;
}
/* for booking details label  - e.g Cineplex, Movie Title */
table.details1 th {
	font-size: 14px;
	color: #ffffff;
	font-weight: bold;
	background-color:#003154;
	text-align: left;
}
/* for Booking details value */
table.details1 td {
	font-size: 14px;
	color: #ffffff;
	background-color:#003154;
	font-weight: bold;
}
/* the grand total cell, which is slightly larger than regular text. */
table.details1 td.grandTotal {
	font-size: 18px;
}
/* the details table is the table that displays the booking summary. 
the bottom is padded to space it out more */
table.details {
	border: none;
	padding-bottom: 3px;
}
/* for booking details label  - e.g Cineplex, Movie Title */
table.details th {
	font-size: 14px;
	color: #333333;
	font-weight: bold;
	text-align: left;
}
/* for Booking details value */
table.details td {
	font-size: 14px;
	color: #CC3300;
	font-weight: bold;
}
/* the grand total cell, which is slightly larger than regular text. */
table.details td.grandTotal {
	font-size: 18px;
}
/* makes all images in an anchor tag borderless. */
a img {
	border: none;
}
/* the inportant notes, e.g. those in the payment page. */
div.important {
	font-size: 15px;
	color: #CC3300;
	font-weight: bold;
	text-decoration: underline;
	text-transform: uppercase;
}
/* the important points under the important notes. */
ul.importantPoints {
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	top: -12px;
	left: -20px;
	position: relative;
}
/* error message table. this table shows the error messages from 
validation or generic error messages */
table.errorMessage {
	border: none;
	height: 50px;
}
/* the header cell of the error message table that contains the 
exclamantion mark */
table.errorMessage th {
	background-image: url(../images/exclamationMark.jpg);
	background-repeat: no-repeat;
	border-right: #cccccc 1px dashed;
	width: 45px;
}
/* error message cell text style and alignments */
table.errorMessage td {
	font-size: 15px;
	color: #FF0066;
	font-weight: bold;
	vertical-align: top;
	padding-left: 8px;
}
/* this style is not in use. */
.lbl_errorMessage {
	font-size: 15px;
	color: #FF0066;
	font-weight: bold;
}
/* the label that says "Complete your booking in...". */
span.completeBookingInLabel {
	font-size: 13px;
	font-weight: bold;
	color: #000000;
}
span.completeBookingInLabel1 {
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}
/* the label that holds the clock counting down. */
span.completeBookingTime {
	font-size: 19px;
	font-weight: bold;
	color: #000000;
}
span.completeBookingTime1 {
	font-size: 19px;
	font-weight: bold;
	color: #ffffff;
}

span.loadingMessage {
	font-size: 12px;
	font-weight: bold;
}




/********** MAIN LAYOUT TABLE **********/
/* defines a specific width for the layout table. */
table#mainLayoutTable {
	width: 794px;
	height: 100%;
	border: none;
}
/* the left drop shadow. */
table#tbl_mainLayoutTable .borderLeft {
	background-image: url(../images/border_left.jpg);
	background-repeat: repeat-y;
	width: 54px;
}
/* the right drop shadow. */
table#tbl_mainLayoutTable .borderRight {
	background-image: url(../images/border_right.jpg);
	background-repeat: repeat-y;
	width: 56px;
}
/* the central column of the layout table which holds inner layout tables. */
table#tbl_mainLayoutTable .centralColumn {
	background-color: #FFFFFF;
	width: 776px;
}





/********** INNER LAYOUT TABLE **********/
/* expand it to the full width available. since the width is already properly 
defined in the parent table, we don't have to define it here again; just need
to make sure it uses 100% of that width. */
table#tbl_innerLayoutTable {
	width: 100%;
	height: 100%;
	border: none;
}
/* a row with a predefined height of 10px for spacing. */
table#tbl_innerLayoutTable .spacerRow {
	height: 10px;
}
/* The Cathay logo and banner. */
table#tbl_innerLayoutTable .cathayBanner {
	background-image: url(../images/headerBanner.jpg);
	background-repeat: no-repeat;
	margin-left:20px;
	width: 776px;
	height: 121px;
}
/* this style is not in use. */
table#tbl_innerLayoutTable .mainContentHolder {
	text-align: center;
}





/********** NAVIGATION LAYOUT TABLE **********/
/* the table to hold the pink navigation bar. because it is slightly shorter
than the full width available, the width is specified here. Control gap between navigation bar and STEP 1,2,3 */
table#tbl_mainNavigation {
	height: 34px;
	width: 745px;
}
/* the navigvation's left rounded edge. */
table#tbl_mainNavigation td.left {
	background-image: url(../images/mainNav_left.jpg);
	background-repeat: no-repeat;
	width: 5px;
	background-position-x: 1px;
}
/* the navigation's right rounded edge. */
table#tbl_mainNavigation td.right {
	background-image: url(../images/mainNav_right.jpg);
	background-repeat: no-repeat;
	width: 5px;
}
/* the main body of the pink navigation. this also contains text styles to
format the text used in the links. e.g Now Showing, Comming Soon, Promos... */
table#tbl_mainNavigation td.main {
	background-image: url(../images/mainNav_bg.jpg);
	background-repeat: repeat-x;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 5px;
	font-weight: ;
	color: #FFFFFF;
	vertical-align: top;
	text-transform: ;
	text-align: center;
	padding-top: 5px;
	letter-spacing: ;
}
/* the anchor styles definition for the navigation links. right now, all the various
states use the same style, i.e. they won't change on hover etc. if different styles
are needed during the various states, you would need to split the style selectors into
multiple style definitions. */
table#tbl_mainNavigation td.main a:link, table#tbl_mainNavigation td.main a:hover, table#tbl_mainNavigation td.main a:visited {
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}








/********** CONTENT TABLE **********/
/* the dimensions of the main content table. the width is defined here as it
is not exactly the same size as the containing element. */
table#tbl_content {
	width: 745px;
	height: 100%;
	border: none;
}
/* the cell that contains the step 1, 2, 3 etc. images. this cell contains
a dashed bottom. Control gap between STEP 1,2,3 and dashed line*/
table#tbl_content .stepIndicatorCell {
	vertical-align: top;
	border-bottom: #999999 1px dashed;
	height: 31px;
	text-align: left;
}









/******************** INDIVIDUAL PAGE SKINS ********************/
/*
	this section onwards lists styles that are for use with
	the individual pages.
*/

/********** SESSION LISTING PAGE **********/
/* the drop down list and radiobuttons form. */
table#tbl_movieFilterForm {
	vertical-align: middle;
	border: none;
}
/* bold all text in the form. */
table#tbl_movieFilterForm td {
	font-family: Tahoma;
	font-weight: bold;
	font-size: ;
}
/* space the fields out by 35px. */
table#tbl_movieFilterForm td.sectionDividerCell {
	width: 35px;
}
/* space the field label and the field by 8px. */
table#tbl_movieFilterForm td.labelAndFieldDividerCell {
	width: 8px;
}
/* modify the label element generated by asp.net so that it's top is
relatively offset by -2px. this is because normally, the text displayed
by the browser next to a radiobutton is displayed slightly off center,
so this is used to force it to appear centralized. */
table#tbl_movieFilterForm label {
	position: relative;
	top: -2px;
}
/* the session listing table. */
table#tbl_cinemaMovieSessionListing {
	width: 740px;
}
/* the style to control the cinema name section at the top of each 
batch of sessions. */
table#tbl_cinemaMovieSessionListing td.cinemaNameHeader {
	text-transform: uppercase;
	background-image: url(../images/cinemaNameHeaderBG.jpg);
	background-repeat: no-repeat;
	padding-left: 10px;
	vertical-align: middle;
	text-align: left;
	height: 25px;
	color: #FFFFFF;
	font-family: ;
	font-weight: bold;
	font-size: 17px;
	border-bottom: #4A6B7E 1px solid;
	/*text-decoration: blink;*/
}
/* the movie title for each batch of session. only 3 borders are defined
because if any more were defined, it would create double borders for
certain edged and that would result in thicker borders. */
table#tbl_cinemaMovieSessionListing td.movieTitle {
	font-family: Arial;
	font-weight: bold;
	font-size: 17px;
	color: #ffffff;
	padding-left: 10px;
	vertical-align: middle;
	height: 30px;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	border-bottom: #4A6B7E 1px dashed;
	background-color:#003154;
}
/* the movie title for each batch of session. only 3 borders are defined
because if any more were defined, it would create double borders for
certain edged and that would result in thicker borders. */
table#tbl_cinemaMovieSessionListing td.movieTitlePlatinum {
	font-family: Arial;
	font-weight: bold;
	font-size: 17px;
	color: #ffffff;
	padding-left: 10px;
	vertical-align: middle;
	height: 50px;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	border-bottom: #4A6B7E 1px dashed;
	background-color:#000000;
}

/* these cells are the generic styles for the cells that hold the
actual session information (i.e. the time link). */
table#tbl_cinemaMovieSessionListing td.genericDaySessionCell {
	padding-left: 10px;
	vertical-align: middle;
	height: 18px;
	border-right: #4A6B7E 1px solid;
	border-bottom: #4A6B7E 1px dashed;
	line-height: 12pt;
}
/* this style is combined with the cells above to create composite
styles. this is because the cells that use this style also uses
the style on top, so to prevent duplication, composite styles are
used. this style is for holding the date information for each batch
of sessions. */
table#tbl_cinemaMovieSessionListing td.dayCell {
	width: 140px;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	font-family: ;
	font-size: 14px;
	
}
/*this session is used to control the width of the session time listing.*/
table#tbl_cinemaMovieSessionListing td.timeCell {
    width: 600px;
	font-size: 14px;
    }
/* this styles is used to change the style of the dayCell when the
mouse hovers over the row. */
table#tbl_cinemaMovieSessionListing td.dayCellHover {
	width: 140px;
	border-left: #DB0964 1px solid;
	border-right: #DB0964 1px solid;
	color: #000000;
	font-weight: bold;
	font-size: 16px;
}
/* pad the links on the right for spacing. */
table#tbl_cinemaMovieSessionListing a {
	padding-right: 8px;
}
/* this defines what happen when the session has not been clicked or have been clicked before. */
table#tbl_cinemaMovieSessionListing a:link, table#tbl_cinemaMovieSessionListing a:visited {
	color: #000000;
	text-decoration: none;
}
/* this defined what happens when the mouse hovers over the session or when the mouse hovers
over a clicked session. */
table#tbl_cinemaMovieSessionListing a:hover, table#tbl_cinemaMovieSessionListing a:visited:hover {
	color: #c6036e;
	text-decoration: underline;
	font-weight: bold;
	font-size: 18px;
}
/* this style defines the appearence of a normal row of sessions. */
table#tbl_cinemaMovieSessionListing tr.rowNormal {
	background-color: transparent;
}

table#tbl_cinemaMovieSessionListing tr.rowwhite {
	background-color: transparent;
}

table#tbl_cinemaMovieSessionListing tr.rowgrey {
	background-color: #e2dfdf;
}

/* this style defines the appearence of a row that has the mouse hovered over it. the switching
of styles is achieved using javascript and not css (although it is possible to do it using css)
is because the hover pseudo css class is not fully supported by certain browsers.  #F7C9DD*/
table#tbl_cinemaMovieSessionListing tr.rowHover {
	background-color: #DB0964;
}
/* this cells holds the "Back to top" link. */
table#tbl_cinemaMovieSessionListing td.backToTopCell {
	text-transform: uppercase;
	vertical-align: middle;
	margin-right: 8px;
	text-align: right;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	height: 26px;
}
/* this style defines the link appearence for the "back to top" link */
table#tbl_cinemaMovieSessionListing td.backToTopCell a {
	text-decoration: none;
	color: #DB0964;
	font-size: 8px;
	font-weight: bold;
}
/* this style defines the footer cell that "closes" the entire session listing table
right at the bottom. the top border is not defined so that double borders will not appear. */
table#tbl_cinemaMovieSessionListing td.bottomCell {
	height: 20px;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	border-bottom: #4A6B7E 1px solid;
}
/* this style defines the legend table. */
table.sessionLegend {
	width: 100%;
	height: 34px;
	border: none;
}
/* the left rounded border of the legend table. */
table.sessionLegend td.leftBorder {
	background-image: url(../images/subtitlesBox_leftBorder.jpg);
	background-repeat: no-repeat;
	width: 3px;
}
/* the right rounded border of the legend table. */
table.sessionLegend td.rightBorder {
	background-image: url(../images/subtitlesBox_rightBorder.jpg);
	background-repeat: no-repeat;
	width: 3px;
}
/* this style defines the main body portion of the legend table, including the font definition. */
table.sessionLegend td.main {
	background-color: #990033;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding-left: 10px;
}

.seatSelection
{
	font-family: Arial;
	font-weight: bold;
	font-size: 17px;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
	height: 50px;
	border-left: #4A6B7E 1px solid;
	border-right: #4A6B7E 1px solid;
	border-bottom: #4A6B7E 1px dashed;
	background-color:#003154;
}


/********** SEAT SELECTION PAGE **********/
/* the table that displays the black background. */
table#seatSelectionBG {
	border: none;
	width: 100%;
}
/* this defines the corner cells of the table which are 9 by 9 pixels. these
corners contain images with the rounded corners. this style is combined with
the four styles below to create composite styles. */
table#seatSelectionBG td.dim9by9 {
	width: 9px;
	height: 9px;
}
/* styles for 4 corners that define the 4 rounded edges. */
table#seatSelectionBG td.topLeft {
	background-image: url(../images/blackBG_topLeft.jpg);
	background-repeat: no-repeat;
}
table#seatSelectionBG td.topRight {
	background-image: url(../images/blackBG_topRight.jpg);
	background-repeat: no-repeat;
}
table#seatSelectionBG td.bottomLeft {
	background-image: url(../images/blackBG_bottomLeft.jpg);
	background-repeat: no-repeat;
}
table#seatSelectionBG td.bottomRight {
	background-image: url(../images/blackBG_bottomRight.jpg);
	background-repeat: no-repeat;
}
/* the background colour. the colour is not actually black but a very dark grey. */
table#seatSelectionBG td.edge {
	background-color: #000000;
}
/* the table that holds the seat selection legend and the 2 buttons (below the seat
selection section). */
table#tbl_seatSelectionLegend {
	width: 100%;
	height: 80px;
	border: none;
}
/* this defines the style of the cell that holds the formatting table for
the legend itself, i.e. the images and their meanings. */
table#tbl_seatSelectionLegend td.legendSide {
	width: 275px;
	border-right: #CCCCCC 1px solid;
	vertical-align: top;
}
/* this defines the style of the cell that holds the seat selection counter. */
table#tbl_seatSelectionLegend td.buttonSide div.seatSelectionCounter {
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	color: #003399;
	text-align:left;
	vertical-align: top;
	padding-left: 5px;
}
/* the cell definition of the legend table. */
table#tbl_seatSelectionLegend td.legendSide table#tbl_legendTable td {
	vertical-align: middle;
	width: 30px;
	height: 20px;
	text-align: left;
}
/* the header cell definition. the header cells hold the labels. */
table#tbl_seatSelectionLegend td.legendSide table#tbl_legendTable th {
	vertical-align: middle;
	text-align: left;
	width: 140px;
	font-size: 12px;
	font-weight: bold;
}
/* this defines the style of the cell that holds the 2 buttons. */
table#tbl_seatSelectionLegend td.buttonSide {
	text-align:right;
	vertical-align: top;
}
/* this defines the style of the cell that holds the seat selection counter. */
table#tbl_seatSelectionLegend td.buttonSide div.seatSelectionCounter {
	text-align:left;
	vertical-align: top;
	padding-left: 5px;
}
/* the note after the legend. */
div.pleaseNote {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
}
/* this style is not in use. */
table#tbl_seatSelection {
}
/* the height and v align of the seat cell. */
table#tbl_seatSelection td.h {
	height: 19px;
	vertical-align: middle;
}
/* the width and h align of the seat cell. */
table#tbl_seatSelection td.w {
	width: 19px;
	text-align: center;
}
/* the cells that hold the row letterings. */
table#tbl_seatSelection td.rowNumberer {
	height: 19px;
	width: 19px;
	vertical-align: middle;
	text-align: center;
	background-position: 2px 2px;
	background-image: url(../images/rowLetteringBG.jpg);
	background-repeat: no-repeat;
	font-size: 10px;
	/*color: #FFFFFF;*/
	color: #000000;
	font-weight: bold;
	font-family: Verdana;
	text-transform: uppercase;
}
/* the empty column between the row letterings and the edge of actual seats. */
table#tbl_seatSelection td.rowNumbererSpacer {
	width: 30px;
}
/* the rounded rectangle that represents the screen. */
table#tbl_seatSelection table#tbl_screen {
	border: none;
	width: 100%;
	height: 35px;
}
/* the left rounded corner of the screen. */
table#tbl_seatSelection table#tbl_screen td.leftBorder {
	background-image: url(../images/movieScreen_leftBorder.jpg);
	background-repeat: no-repeat;
	width: 6px;
}
/* the right rounded corner of the screen. */
table#tbl_seatSelection table#tbl_screen td.rightBorder {
	background-image: url(../images/movieScreen_rightBorder.jpg);
	background-repeat: no-repeat;
	width: 6px;
}
/* the main body section of the screen. this includes the font definitions too. */
/*table#tbl_seatSelection table#tbl_screen td.mainScreen {
	background-image: url(../images/movieScreen_center.jpg);
	background-repeat: no-repeat;
	/* background-color: #990033; 
	width: 6px;
	vertical-align: middle;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF; */
	
	table#tbl_seatSelection table#tbl_screen td.mainScreen {
	background-image: url(../images/movieScreen_center.jpg);
	background-repeat: repeat-x;
	vertical-align: middle;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	
}
/* the word "Main". */
table#tbl_seatSelection td.main {
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	display: none;
	visibility: hidden;
}
/* the word "Entrance" between the seat selection block and the dotted line below it. */
span.entranceWord {
	padding: 4px 10px 4px 10px;
	margin-top: 5px;
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
	color: #DB0964;
	vertical-align: middle;
	text-align: center;
	border: solid 1px #000000;
}

/* the number of seats selected. */
table#tbl_seatSelection div.seatsSelectedIndicator {
	background-image: url(../images/seatsSelectedIndicatorBG.jpg);
	background-repeat: no-repeat;
	width: 36px;
	height: 35px;
	font-size: 22px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	vertical-align: middle;
	padding-top: 4px;
}



/********** PAYMENT PAGE **********/
/* the div that holds the terms and conditions.  DB0964*/
div#termsAndConditionsNotice {
	font-size: 13px;
	font-weight: bold;
	color: #0000FF
}
/* the links in the terms and conditions. */
div#termsAndConditionsNotice a {
	text-decoration: underline;
	color: #000000;
}
/* the message that appears after either the "confirm" button is clicked. */
span.processingPleaseWait {
	font-size: 18px;
	color: #FF0066;
	font-weight: bold;
	
}