﻿/* Desktop Site Styles */
body
{
	background-color:Black;
	font-family: Arial;
}

#container
{
	width:100%;
	text-align:center;
}

#layout
{
	display:inline-block;
	background-position:right;
	background-repeat:repeat-y;
	background-color:#444;
	border:solid 1px gray;
	border-radius:20px 0px 0px 0px;
	margin:0px auto 0px auto;
	max-width:1200px;
	width:90%;
}

.hlLogo
{
    width: 100px;
}

#logo
{
	float:left;
	clear:none;
	display:block;
	background-color:#444;
	width:250px;	
}

img
{
	width:auto;
	height:auto;
}


#layout div
{
	float:left;
	clear:none;
}

#top
{
	border-radius:20px 0px 0px 0px;
	margin-right:10px;
	clear:both;
	background-color:Gray;
	width:calc(100% - 10px);
}

#logo-prompt
{
	clear:both;
	border-top:solid 8px #444;
	margin-left:20px;
	background-color:White;
	width:calc(100% - 20px);
}

#prompt
{
	background-color:White;
	display:block;
	padding-left:30px;
	text-align:center;	
	width:calc(100% - 290px);
	float:left;
	clear:none;
}

#prompt h1
{
	margin:10px 0px 10px 0px;
	float:left;
	clear:both;
	width:100%;
}

#subPrompt
{
	clear:both;
	text-align:center;
}

#content
{
	clear:both;
	padding:15px;
	margin:0px 10px 0px 20px;
	width:calc(100% - 60px);
	background-color:White;
	min-height:400px;
}

.spacer
{
	width:100%;
	height:10px;
	display:block;
}

.branded
{
	color:White;
	background-color:#444;
	font-weight:bold;
	padding:3px;
}

.errorMessage
{
	margin-top:10px;
	color:Red;
	padding:5px;
	text-align:center;
	background-color:LightYellow;
	border:solid 1px Red;
}

/* HOME page*/
.vForm
{
	background-color:LightYellow;
	margin:0px auto 0px auto;	
	border:solid 1px black;
	width:560px;
}

.vForm td
{
	vertical-align:middle;
}

.vForm .vFormCaption
{
	width:200px;
	margin-right:5px;
}

.vForm .vFormField
{
	padding-left:5px;
	text-align:center;
}

.vForm .vProceed
{
	padding-right:10px;
}

.vForm .singleCode
{
	width:140px;
}	

.vForm .shortCode
{
	width:45px;
}

.vForm .pinCode
{
	width:95px;
}

.vForm .bgVoucher {width:70px;}
.vForm .bgPin {width:60px;margin-left:3px;}

.rlVoucher, .rlPin1, .rlPin2, .rlAlt
{
    border:solid 1px gray;
}

.vForm .rlVoucher
{
	width:40px;
}

.vForm .rlPin1
{
	width:55px;
}

.vForm .rlPin2
{
	width:25px;
}

.vForm .proceedLink
{
	display:block;
	border:solid 1px black;
	color:White;
	background-color:Gray;
	text-decoration:none;
	text-transform:uppercase;
	padding:4px;
	font-weight:bold;
}

.vSpacer
{
	width:15px;
	text-align:center;
	display:inline-block;
}



table.scheduler td:hover {
    background-color: #eee;
}
.toprow td{
    background-color: #d5bb42;
	border:0px solid #ccc !important;
	border-top:1px solid #ccc;
	color:#28235d;
	font-weight:bold;
}
.toprow:first-child {
	border-left:1px solid #ccc;
} 
.toprow:last-child {
	border-right:1px solid #ccc;
}
.schNumDayOtherMonth {
    text-align: right;
    color: #C0C0C0;
    font-weight: normal;
}
.schNumWorkDay {
    text-align: right;
    color: #000;
}
.free a{
    text-align: center;
    font-weight: bold;
    color: #000;
}

td.schNumDayOff {
    color: #C00;
}



/* Gift Voucher Details */
#gvDetails
{
	width:100%;
	float:left;
	clear:both;
	margin-bottom:10px;
	display:block;
}

.gvImage
{
	width:33%;
	max-width:300px;
	float:left;
	clear:none;
}

.gvFields
{
	padding-left:0px 3% 0px 3%;
	width: 730px;
	position:absolute;
}

/* Product Content */
.cbHeader
{
	background-color:#444;
	color:White;
	font-weight:bold;
	float:left;
	clear:both;
	width:100%;
	padding:5px 0px 5px 2%;
	margin:0px;
	text-align:left;
}

.cbContent
{
	border-left:solid 1px #444;
	border-radius: 10px;
	padding: 50px;
	text-align:justify;
	background-color: #fff; 
}

#prodImages
{
	float:left;
	clear:none;
}

.bookingLink, .bookingLink:hover
{
	display:block;
	text-decoration:none;
	color:Black;
}

.bookingLink b
{
	color:Black;
}
.dayOff, .dayOff a
{
	color:Red;
}
.greyDate
{
	color: #C0C0C0;
}
#prodDetails
{
	float:left;
	clear:none;
	width:auto;
	padding:5px;
}
#calendarContainer
{
	float:right !important;
	clear:none;
	text-align:right;
	width:50%;
	min-width:370px;
	margin-left:10px;
	color: #333;
}

#mobileDates
{
	width:100%;
}

.mobileDDLCaption
{
	padding-left:5px;
	text-align:left;
	vertical-align:middle;
	font-size:1.8em;
}

.mobileDDL
{
	font-size:1.8em;
	width:100%;
}

.mainImage
{
	width:300px;
}
.mainProductImage
{
	width:500px;
}
.subImage
{
	width:96px;
	margin:2px;
	cursor:pointer;
}
#siPrompt
{
	width:100%;
	text-align:center;
	padding:2px 0px 2px 0px;
	font-size:smaller;
	color: #333;
}

#bookingConfirmation
{
	width:100%;
}

#bookingConfirmation td
{
	padding-bottom:8px;
}

#bookingConfirmation .caption
{
	width:48%;
	padding-right:2%;
	text-align:right;
	vertical-align:middle;
}

#bookingConfirmation .field
{
	width:48%;
	padding-left:2%;
	text-align:left;
	vertical-align:middle;
}

#bookingConfirmation .field input, #bookingConfirmation .field textarea
{
	width:60%;
	min-width:200px;
}

.pkgHead, .pkgBody
{
	width:100%;
	text-align:center;	
}

.dtItem, .dtItem>div
{
    margin-top:20px;
	width:100%;
	text-align:center;
}

.dtOption
{
	width:100%;
}

.dtCaption
{
	width:48%;
	padding-right:2%;
	text-align:right;
}

.dtField
{
	width:48%;
	padding-left:2%;
	text-align:left;
}

.submitContainer
{
	width:35%;
	min-width:150px;
}

.submitLink
{
	display:block;
	border:solid 1px black;
	color:White;
	background-color:Gray;
	text-decoration:none;
	text-transform:uppercase;
	padding:4px;
	font-weight:bold;
	width:100%;
	text-align:center;
    cursor:pointer;
}

/* Product List Page */
.prodPad
{
	width:32%;
	float:left;
	clear:none;
	min-width:300px;
	margin-right:15px;
	margin-bottom:10px;
	background-color:#fff;
	border-radius:10px;
	padding: 5px 20px;
}

.prodPad div
{
	float:left;
	clear:both;
}

.prodCaption
{
	font-weight:bold;
	margin:10px 0px 10px 0px;
	padding-left:5px;
	height:40px;
	color:Black;
}
.prodImage
{
	width:100%;
	height:auto;
	overflow:hidden;
}

.prodImage img
{
    width: 100%;
    height: 203px;
}

.prodDescription
{
	padding:5px;
	height:70px;
	overflow:hidden;
	text-align:justify;
}

.prodLink, .prodLink:hover
{
	color:Black;
	text-decoration:none;
}