#body {
	padding-top: 30px;
}
#col1 p {
	font-size: 0.9em;
	line-height: 1.8em;
}
#col1 {
	position: absolute; 
	top: 430px;
	margin: 0 20px 0 10px;
	width: 558px;
}
/*
Want to set min-height to 700px - except IE doesn't support this. So:
- set min-height
- set box height
- over-ride box height by using attribute as in "div[id] #col2"
See <http://wellstyled.com/css-minheight-hack.html> for more details
*/
#col2  {
	font-size: 0.8em;
	top: 30px;
	left: 600px;
	margin: 0;
	width: 300px;
	height: 1100px;
	min-height: 1100px;
}
div[id] #col2 {
	height: auto;
}
#col1 h1, #hotelHead h1  { color: #003300; font-size: 1.3em; margin: 0 0 10px 0;text-transform: uppercase; }
#col1 h2, #hotelHead h2  { color: #660000; font-size: 1.2em; margin: 0 0 5px 0; }
#col1 h3 {
	color: #333;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	font-style: italic;
	margin-bottom: 5px;
}
#col1 h4 {
	color: #660000;
	margin-bottom: 0;
}
#col1 strong {
	font-weight: bold;
}

/*
ul {
	list-style: disc outside url("../images/dot.gif");
}
*/
ul {
	display: block;
	list-style-type: none;
	margin-bottom: 20px;
	padding-left: 20px;
}
li.hotel { 
	background-image: url("../images/hotel/dot.gif"); 
	background-repeat: no-repeat;
	background-position: 0 0;
	padding: 7px 0 0 30px;
	margin-bottom: 10px;
}
p.meetingHead {
	width: 50%;
	margin: 0;
	padding: 0 0 3px 5px;
	font-size: 1.2em;
	font-weight: 700;
	font-style: italic;
	color: #333;
	background-color: #eae4d0;
	border-top: 1px solid #bbbbbb;
	border-left: 1px solid #bbbbbb;
	border-right: 1px solid #bbbbbb;
	border-bottom:0px none;
}
td {
	font-size: 1.0em;
}
.meetingsTable {
	width: 550px;
	border: 1px solid #bbbbbb;
	margin-bottom: 20px;
}
.meetingsTable tr {
	background-color: #ffffe0;
}
.meetingsTable td {
	width: 80px;
	padding: 2px 0 2px 5px;
}
#hotelpageNav {
	width: 100%;
	height: 56px;
	padding-top: 4px;
	background-color: #003300;
	border-top: 1px solid #006600;
}
.hotelintro {
	font-size: 0.9em;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-top: 0 none;
	border-left: 0 none;
	border-right: 0 none;
}
#restel, #leftpanel {
	margin: 0;
	padding: 0;
}
#restel li {
	padding: 0 0 0 20px;
	margin: 0;
}
#imageBox {
	margin: 0 0 20px 29px;
	width: 122px;
}
#imageBox img {
	border: 1px solid #cc9;
}
#imageGallery {
	clear: both;
	margin-top: 30px;
	width: 580px;
}
#imageGallery img {
	margin: 0 10px 10px 0;
	border: 1px solid #cc9;
}
#hotelHead {
	width: 900px;
	height: 100%;
	background-image: url("/images/hotel/hotel-info-bg.gif"); 
	background-repeat: repeat-y;
	background-position: center 0 1;
}
#panelNav, #hotelInfo {
	float: left;
}
#hotelImage {
	width: 440px;
	height: 255px;
	overflow: hidden;
}
#hotelInfo {
	width: 440px;
	height: 100%;
}
#hotelStyle {
	clear: both;
	width: 440px;
	height: 28px;
	background-color: #cc9;
}
.callNow {
	font-size: 1.8em;
	font-weight: 700;
	color: #003300;
	line-height: 2.0em;
}
#foot {
	top: 900px;
	left: 7px;
	width: 895px;
}
#foot2   {
	top: 930px;
}

/*Hotel navigation bar*/

#panelNav {
	width: 139px;
	margin: 5px 9px 2px 10px;
	position: relative;
	height: 361px;
	min-height: 361px;
}
div[id] #panelNav {
	height: auto;
}
#panelNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}
#panelNav ul a {
	display: block;
	width: 130px;
	height: 21px;
	padding-top: 3px;
	margin-bottom: 3px;
	text-indent: 8px;
	text-decoration: none;
	letter-spacing: 0.1em;
	font-size: 0.8em;
	font-weight: 700;
	text-align: left;
	color: #eae4d0;
	background: url(/images/hotel/buttons/bn-nav-green.png) left top;
}
#panelNav ul a:hover, #panelNav ul a:active {
	background: url(/images/hotel/buttons/bn-nav-green.png) right top;
	color: #fff;
}

/*Book online button*/

#panelNav li.bnHighlight a {
	background: url(/images/hotel/buttons/bn-nav-red.png) left top;
}
#panelNav li.bnHighlight a:hover, #panelNav ul a:active {
	background: url(/images/hotel/buttons/bn-nav-red.png) right top;
}

/*Booking panel header - main booking panel css contained within include file*/

#bookingItems {
	float: left;
	width: 260px;
	margin: 15px 0 0 20px;
	padding: 5px 0 0 0;
}
.panelHeading {
	margin: 12px 0 3px 0;
	width: 260px;
	color: #595026;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 700;
	text-align: center;
}
.rating {
	position: absolute;
	left: 590px;
	margin-top: 10px;
}
.calendarMini {
	float: left;
	margin-left: 20px;
}
a.openingTimes {
    position:relative; /*this is the key*/
    z-index:24;
    color:#660000;
	font-size: 0.9em;
	text-decoration: none;
}
a.openingTimes:hover {z-index:25; color:#990000; }

a.openingTimes span {display: none}

a.openingTimes:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:22em;
    border:1px solid #595026;
    background-color:#ffffe0; color:#003300;
    text-align: left;
}
a.openingTimes ul {
	padding: 0;
	margin: 1em;
}

/*CSS to customise offer panel*/
#offerCollapse {
	width: 280px;
	margin: 10px 0 10px 10px;
}
#offerCollapse a {
	color: #003300;
}
.offerPanelPrice {
	padding: 0;
	margin: 0 0 10px 0;
	color: #990000;
	font-size: 1.4em;
	font-weight: 700;
}
p.date {
	padding: 0; 
	margin: 0 0 10px 0;
	font-style: italic;
	font-weight: 700;
	color: #790000;
}
/*CSS to customise At-a-glance info*/

.glanceInfo, .offerInfo {
  	background-color : #fff;
  	width : 298px;
	border: 1px solid #003300;
	margin-bottom: 20px;
}
.glanceInfo {
	border-top: 0 none;
}
.offerInfo {
	border: 0 none;
  	background-color : #feffef;
}
.offerInfo a {
	font-weight: 700;
	color: #333;
}

.glanceHead, .offerHead {
	width: 300px;
	background-color: #003300;
	text-align: center;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
}
.glanceHead {
	background: url(/images/hotel/glance-strip.gif) #003300 no-repeat;
	height: 26px;
	margin-left: -1px;
}
.offerHead {
	background: url(/images/hotel/offer-strip.gif) #660000 no-repeat;
	height: 26px;
}
div.offerHead a, div.glanceHead {
	line-height: 2.2em;
	color: #fff;
	text-decoration: none;
}
.offerItem {
	float: left;
	width: 173px;
}	
.offerPrice {
	float: left;
	width: 100px;
	margin-left: 5px;
	font-weight: 700;
	font-size: 1.4em;
	color: #990000;
	text-align: right;
}
#hotelFacilities {
	float: left;
	width: 170px;
}
#hotelFacilities ul {
	margin: 7px 0 3px 10px;
	padding-left: 0;
	line-height: 2.6em;
}
#hotelFacilities li {
	font-size: 0.9em;
	font-weight: 700;
	padding: 0 0 10px 30px;
	text-transform: uppercase;
	color: #000;
	background-repeat: no-repeat;
}
li.bedrooms {
	background: url(/images/hotel/facilities/bedrooms.gif) no-repeat;
}
li.parkingFree {
	background: url(/images/hotel/facilities/parking-free.gif) no-repeat;
}
li.parkingLimited {
	background: url(/images/hotel/facilities/parking-limited.gif) no-repeat;
}
li.parkingCharge {
	background: url(/images/hotel/facilities/parking-charged.gif) no-repeat;
}
li.parkingValet {
	background: url(/images/hotel/facilities/parking-valet.gif) no-repeat;
}
li.wheelchairAccess {
	background: url(/images/hotel/facilities/wheelchair-access.gif) no-repeat;
}
li.wifiFree {
	background: url(/images/hotel/facilities/wifi-free.gif) no-repeat;
}
li.wifiCharge {
	background: url(/images/hotel/facilities/wifi-charged.gif) no-repeat;
}
li.broadbandFree {
	background: url(/images/hotel/facilities/broadband-free.gif) no-repeat;
}
li.broadbandCharge {
	background: url(/images/hotel/facilities/broadband-charged.gif) no-repeat;
}
li.nonSmoking {
	background: url(/images/hotel/facilities/non-smoking.gif) no-repeat;
}
li.spa {
	background: url(/images/hotel/facilities/spa-experience.gif) no-repeat;
}
li.golfCourse {
	background: url(/images/hotel/facilities/golf-course.gif) no-repeat;
}
li.healthClub {
	background: url(/images/hotel/facilities/leisure-club.gif) no-repeat;
}
li.restaurants {
	background: url(/images/hotel/facilities/restaurants.gif) no-repeat;
}
li.meetings {
	background: url(/images/hotel/facilities/meeting-rooms.gif) no-repeat;
}
li.banqueting {
	background: url(/images/hotel/facilities/banqueting.gif) no-repeat;
}
li.theatre {
	background: url(/images/hotel/facilities/theatre.gif) no-repeat;
}
div.motorway, div.aRoad {
	float: right;
	width: 100px;
	height: 20px;
	color: #fff;
	background-color: #000099;
	background-image: url(/images/hotel/facilities/motorway.png);
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1.6em;
	text-transform: uppercase;
	text-align: center;
	margin: 0px 10px 5px 0px;
}
div.aRoad {
	background-image: url(/images/hotel/facilities/a-road.png);
}
.extraFac {
	float: right;
	margin: 5px 10px 0 0;
}
.actionBtn {
float: left;
background-image: url(/images/hotel/availability-sm.gif);
background-repeat: no-repeat;
width: 120px;
height: 28px;
padding-left: 6px;
padding-top: 5px;
margin-bottom: 5px;
}
.actionBtn a{
margin:0.25em 0.8em 0.5em 0;
color:#fff;
font-weight:bold;
font-size: 0.8em;
text-align: left;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
}

/*CSS for ad panels - bottom col2*/


/*CSS to customise contact info*/

#contactDetails {
	clear: both;
	border-top: 2px dotted #cccc99;
	border-bottom: 2px dotted #cccc99;
	padding: 0 0 10px 10px;
}
#contactDetails p {
	font-size: 1.4em;
	font-weight: 700;
	color: #003300;
}
#contactDetails ul {
	margin: 0;
	padding-left: 0;
	line-height: 2.6em;
}
#contactDetails li {
	font-size: 2.0em;
	font-weight: 700;
	padding: 3px 0 10px 50px;
	background-repeat: no-repeat;
}
#contactDetails li.openInfo {
	font-size: 1.1em;
	line-height: 1.1em;
}
li.resNumber {
	color: #006600;
	background: url(/images/hotel/hotel-reservations.gif) no-repeat;
}
li.confNumber {
	color: #660000;
	background: url(/images/hotel/hotel-conferences.gif) no-repeat;
}

/*map and directions page*/

#map_canvas {
	margin-top: 20px;
	width: 550px;
	height: 450px;
}
.hotelDetails {
	margin: 0;
	font-size: 1.0em;
	color: #003300;
}

/*offer popup*/

#offerPop {
	position: absolute;
	top: 120px;
	left: 200px;
	width: 600px;
	height: auto;
	/*display: none;*/
}
.offerBox, .offerDetBox {
	clear: both;
	background-color: #660000;
	border: 2px solid #790000;
	width: auto;
	padding: 5px;
	text-align: left;
}
.offerBox {
	height: 90px;
}
.offerDetBox {
	background-color: #ffffe0;
	color: #333;
	min-height: 300px;
}
.offerName {
	margin: 3px 0 8px 0;
	font-size: 1.4em;
	font-weight: 700;
	color: #fff;
}
.offerDesc {
	font-weight: 700;
}
.offerSaving {
	font-size: 1.8em;
	font-weight: 700;
	color: #ffcc00;
	margin: 0 0 10px 0;
}
.terms {
	padding: 5px;
	border: 1px solid #cccc99;
	width: 100%;
	height: 100%;
}
ul.button {
	clear: both;
	float: right;
	width: 180px;		
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}	
ul.button li.check {
	height: 32px;
	background: url(/images/hotel/buttons/bn-check-offer.png) no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	text-align: left;
	line-height: 2.4em;
	text-indent: 20px;
	background-color: transparent;
	margin-bottom: 10px;
}
li.check a {
	text-decoration: none;
	color: #ffffff;
}
li.check a:hover {
	color: #ffcc00;
}
/* START Offer Overlay */
/* use a semi-transparent image for the overlay */
#overlay {
	background-image:url(/images/transparent.png);
	color:#efefef;
	height:450px;
}

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
	height:441px;
	overflow-y:auto;
}/* the overlayed element */

.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(/images/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(/images/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
/* END Offer Overlay */