@import url('fonts/webfonts.css');

* {
	margin:0;
	padding:0;
	}

html {
	height: 99.8%;
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-family: 'Arial', Helvetica, Verdana, sans-serif;
	line-height: normal;
	}

body {
	height: 100%;
	}

body,li,p,#imageDataContainer {
	font-size: 9px;
	color: #666;
	text-transform: uppercase;
	}
	
a, a:link, a:active, a:hover, a:visited {
	color: #666;
}

a:visited {
	color: red;
}

#wrapper {
	width: 900px;
	min-height: 100%;
	height: auto !important;
	height: 99.7%;
	margin: 0 auto -65px; /* the bottom margin is the negative value of the footer's height */
}

#header {
	height: 100px;
	margin: 0;
	padding: 40px 0 0 0;
}

#header #logo div {
	color: #666;
	width: 550px;
	padding-top: 23px;
	line-height: 1.5em;
	font-family: 'MuseoSans500', 'Arial', Helvetica, sans-serif;
	font-size: 10px;
	text-shadow: 0px 1px 1px #ebebec; /* 8% black */
}

#logo {
	width: 111px;
	height: 67px;
	margin: 0 0 0 115px;
	padding: 0 0 0 140px;
	background: url('../images/hot-logo.png') no-repeat left;
}

#header a#logo_link, #header a#logo_link:link {
	border: 0;
	text-decoration: none;
}

.push {
	margin: 0;
	padding: 0;
	height: 65px; /* .push must be the same height as .footer */
}

#footer {
	margin: 0 auto;
	width: 780px;
	padding: 10px 0 0 120px;
	height: 55px; /* .push must be the same height as .push */
}

#footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: none;
	line-height: 1.0em;
}

#footer p#address {
	margin-bottom: 10px;
	/*color: #df1d40;*/
}

#footer .telephone-icon, #footer .fax-icon {
	padding: 0 2px 0 8px;
	height: 14px;
	width: 14px;
}

.small-inline-icon {
	vertical-align: middle;
	padding: 0 2px 0 0;
	height: 14px;
	width: 14px;
}

p.error {
	color: #fff;
	font-weight: bold;
}

#footer p a img {
	border: 0;
}

#footer p img {
	vertical-align: middle;
	padding-bottom: 3px;
}

img#vcard {
	vertical-align: middle;
	border: 0;
	padding-top: 4px;
}

#vcard-link {
	text-decoration: none;
}

#vcard-link .highlight {
	font-weight: normal;
	color: red;
}

#vcard-link span:hover.highlight {
	text-decoration: underline;
}

#top-image {
	margin: 0;
	padding: 0;
}

/*--------------- navigation ---------------*/

#navigation {
	width: 100px;
	float: left;
	padding: 10px 0 0 0;
}

ul#nav {
	list-style-type: none;
	padding: 0 0 0 0;
	margin: 0;
}

ul#nav li {
	text-transform: uppercase;
	margin: 0 0 8px 0;
	display: block;
	height: 11px;
}

ul#nav li a {
	font-size: 10px;
	color: #999;
	text-decoration: none;
	padding: 0 0 0 12px;
}

ul#nav li a#selected {
	font-weight: bold;
	color: black;
	padding: 0 0 0 12px;
	background: url('../images/square-bullet.gif') no-repeat center left;
}

ul#nav li a:hover {
	font-weight: bold;
	color: black;
}

/*--------------- content, thumbs ---------------*/

#content {
	padding: 0;
	margin: 0;
}

#content .page {
	display: none;
}

#thumbs {
	position:relative;
	width: 780px;
	margin: 0 0 0 115px;
	padding: 0;
	overflow: hidden;
}

#thumbs .thumbnails {
	list-style-type: none;
	margin: 0 0 0 0;
	width: 780px;
	height: auto;
	display: block;
}
/*
#thumbs .thumbnails li {
	display: block;
	float: left;
	padding: 15px 0 0 15px;
	margin: 0;
	background: url('../images/thumbnail-box.gif') no-repeat top left;
	width: 180px;
	height: 135px;
}

.thumbnails li:hover {
	background: url('../images/thumbnail-box-rollover.gif') no-repeat top left;
}

#thumbs .thumbnails li a {
	padding: 0;
	margin: 0;
	text-decoration: none;
}

#thumbs .thumbnails li a img {
	border: 0px;
	width: 160px;
	height: 115px;
	z-index: 1000;
}*/

#thumbs .thumbnails {
	width: 780px;
}
#thumbs .thumbnails .item {
	display: block;
	float: left;
	padding: 15px 0 0 15px;
	margin: 0;
	background: url('../images/thumbnail-box.gif') no-repeat top left;
	width: 180px;
	height: 135px;
}
#thumbs .thumbnails item a {
	border: 0;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
#thumbs .thumbnails item a img {
	border: 0px;
	width: 160px;
	height: 115px;
	z-index: 1000;
}
#thumbs .thumb-img {
	border: 0px;
}
#controls {
	margin: 0 15px 0 0;
	width: 764px;
	height: 30px;
}


/*--------------- crumblinks ---------------*/

#crumb-and-controls-wrapper {
	padding: 8px 0 0 0;
	margin: 0 0 0 6px;
	color: black;
}

ul#crumblinks, ul#controls {
	list-style-type: none;
	padding: 0 0 0 0;
	margin: 0;
}

ul#controls {
	padding-right: 10px;
}

ul#crumblinks li, ul#controls li {
	display: block;
	float: left;
}

ul#crumblinks li a {
	text-decoration: none;
	color: black;
	padding-right: 10px;
	margin-right: 3px;
	background: url('../images/arrow-right.gif') no-repeat center right;
}

ul#crumblinks li a:hover, ul#controls li a:hover {
	text-decoration: underline;
}

ul#crumblinks li a#selected {
	font-weight: bold;
	background: none;
}

ul#crumblinks li a:hover#selected {
	text-decoration: none;
}


/*--------------- Pagination ---------------*/

ul#controls {
	float: right;
}

ul#controls li a {
	text-decoration: none;
	color: black;
	padding-right: 5px;
	margin-right: 0px;
}

ul#controls li a#selected {
	text-decoration: underline;
}

ul#controls li a#previous, ul#controls li a#next, ul#controls li a#previous-unselected, ul#controls li a#next-unselected {
	font-weight: bold;
}

ul#controls li a#previous:hover, ul#controls li a#next:hover {
	/*text-decoration: none;*/
}

ul#controls li a#next, ul#controls li a#next-unselected {
	padding-right: 8px;
	background: url('../images/arrow-right.gif') no-repeat center right;
}

ul#controls li a#previous, ul#controls li a#previous-unselected {
	padding-left: 8px;
	padding-right: 5px;
	background: url('../images/arrow-left.gif') no-repeat center left;
}

ul#controls li a#previous-unselected {
	color: #cfd1d2;
	background: url('../images/arrow-left-disabled.gif') no-repeat center left;
}

ul#controls li a#next-unselected {
	color: #cfd1d2;
	background: url('../images/arrow-right-disabled.gif') no-repeat center right;
}

ul#controls li a#next-unselected:hover, ul#controls li a#previous-unselected:hover {
	text-decoration: none;
}


/*--------------- typefaces ---------------*/
h1 {
	font-family: 'MuseoSans500', 'Arial', Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px #c7c8ca; /* 25% black */
	padding: 0;
	margin: 0;
}

h2, h3 {
	font-family: 'MuseoSans500', 'Arial', Helvetica, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
}

h3 {
	text-transform: none;
}

h2.description {
	font-size: 14px;
	padding: 0 0 0 0;
	margin: 35px 0 8px 0;
}

h2.title {
	padding: 0 0 0 0;
	margin: 0 0 8px 0;
}

h2.list-top {
	margin: 0 0 0 -3px;
	padding-bottom: 10px;
	padding-left: 22px;
	color: #666;
	background: url('../images/play-arrow.png') no-repeat left top;
}

h2.list-top a, h2.list-top a:link {
	color: #666;
	text-decoration: none;
}

h2.list-top a:hover {
	color: #999;
}

h1#page-title {
	margin: 0 0 8px 0;
	padding: 25px 0 0 0;
}

h1.pageheading {
	display: none;
}

h1.reverseout {
	font-family: 'MuseoSans300', 'Arial', Helvetica, sans-serif;
	text-shadow: 0px 1px 1px #000;
	color: #fff;
	margin-top: 45px;
	font-size: 20px;
}

p.reverseout {
	text-shadow: 0px 1px 1px #000;
	color:white;
	margin-top:5px;
	text-transform: none;
	line-height: 1.4em;
	font-size: 12px;
}

p.reverseout a {
	color: #CCC;
	text-decoration: none;
}

p.reverseout a:hover {
	text-decoration: underline;
}

h2.title {
	margin: 15px 0 5px 0;
}

#header #logo div h1 {
	font-size: 10px;
	display: inline;
	font-weight: normal;
	text-shadow: 0px 1px 1px #ebebec; /* 8% black */
}

p.description, p.main, p.map, p.url {
	font-family: 'MuseoSans300', 'Arial', Helvetica, sans-serif;
	font-size: 10px;
	text-transform: none;
	line-height: 15px;
	width: 350px;
	color: black;
}

p.map {
	width: 260px;
	margin-bottom: 8px;
	font-size: 11px;
	line-height: 17px;
}

p.findus {
	width: auto;
}

#vcard {
	clear: both;
	margin-bottom: 7px;
}

p.main {
	width: 635px;
	font-size: 13px;
	line-height: 1.5em;
	color: #929395;
	/*color: black;*/
}

p.main a, p.main a:link {
	color: #666;
}

p.instructions {
	padding: 10px 0 0 0;
}

p.instructions a {
	color: #666;
	text-decoration: none;
}

p.instructions a:hover {
	text-decoration: underline;
}

p.url {
	margin-top: 10px;
	padding: 0;
	/*display: block;
	width: 78px;
	height: 15px;
	background: url('../images/launch_site_icon.gif') no-repeat top right;*/
}

p.url a {
	text-decoration: none;
	color: red;
	text-transform: uppercase;
}

p.url a:hover {
	text-decoration: underline;
}

.capitalise {
	text-transform: uppercase;
}

.highlight {
	font-weight: bold;
}

p#backbutton {
	padding-top: 10px;
}

p#backbutton a {
	font-family: 'MuseoSans500', 'Arial', sans-serif;
	text-decoration: none;
	color: #666;
	background: url('../images/previous.gif') no-repeat center left;
	padding-left: 7px;
}

p#backbutton a:hover {
	font-family: 'MuseoSans500', 'Arial', sans-serif;
	color: #999;
	background: url('../images/previous-roll.gif') no-repeat center left;
}

small-break {
	margin-top: 2px;
}

/*--------------- lists and columns ---------------*/

#column-wrapper {
	width: 100%;
	margin: 15px 0 30px 0;
}

.column-1, .column-2, .column-3, .column-4 {
	width: auto;
	margin-right:45px;
	margin-bottom: 20px;
	float:left;
}

ul.bullet-list {
	list-style-image: url('../images/square-bullet-grey.gif');
	list-style-position: outside;
	list-style-type: none;
	padding: 0 0 0 0;
	margin: 0 0 0 11px;
}

ul.bullet-list li {
	font-family: 'MuseoSans500', 'Arial', Helvetica, sans-serif;
	padding: 0 0 5px 0;
	margin: 0 0 0 0;
	font-size: 10px;
}

ul.bullet-list li a, ul.bullet-list li a:link {
	color: #666;
	text-decoration: none;
}

ul.bullet-list li a:hover {
	color: #999;
}


/*--------------- Carousel ---------------*/

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	position:relative;
	overflow:hidden;
	width: 780px;
	height:450px;
}
/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items .thumbnails {
	float:left;
	width:680px;
}


/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable 
.scrollable {
	float:left;	
}
*/

/* position and dimensions of the navigator */
.navi {
	float: right;
	width:auto;
	height:20px;
}

/* items inside navigator */
.navi a {
	width:10px;
	height:10px;
	float:left;
	margin:3px 2px;
	background:url(../images/navigator.jpg) 0 -40px no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover { background-position:0 -50px; }

/* active state (current page state) */
.navi a.active { background-position:0 -60px; }



/*--------------- Google Maps ---------------*/

#map, #map_canvas, #findusmap {
	width: 100%;
	height: 450px;
	margin: 0 0 0 0;
	background: #999;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #999;
}

/*--------------- forms ---------------*/

form#enquiry-form label {
	font-family: 'MuseoSans500', 'Arial', Helvetica, sans-serif;
	display: block;
	width: auto;
	line-height: 1.8;
	vertical-align: top;
	font-size: 10px;
}

form#enquiry-form label.error {
	color: yellow;
	line-height: 0.9em;
	margin: 0 0 3px 0;
	padding: 0;
	clear: both;
	width: 235px;
}

form#enquiry-form input[type=text],
form#enquiry-form input[type=email],
form#enquiry-form textarea, img#verify-box {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #999;
}

form#enquiry-form input[type=text],
form#enquiry-form input[type=email] {
	width: 225px;
	padding: 3px;
	margin-bottom: 8px;
	background: url('../images/form-bg.gif') no-repeat top left;
}

form#enquiry-form textarea {
	width: 221px;
	height: 65px;
	padding: 5px;
	margin-bottom: 5px;
	background: url('../images/textarea-bg.gif') no-repeat top left;
}

form#enquiry-form input#verify {
	width: 40px;
	float: left;
	margin-right: 5px;
	padding: 7px 6px;
	font-weight: bold;
	text-align: center;
}

img#verify-box {
	height: 28px;
	width: 50px;
	border: 1px solid #333;
	display: inline;
}

p.verify-label {
	clear: both;
}

form#enquiry-form select#subject {
	margin-bottom: 8px;
	width: 150px;
	text-transform: none;
}

form#enquiry-form select#subject option {
	text-transform: none;
	padding-left:2px;
	line-height: 14px;
}

form#enquiry-form input, form#enquiry-form textarea {
	font-size: 11px;
	color: #333333;
	font-family: Arial, Verdana, sans-serif;
	font-weight: normal;
}

form#enquiry-form button#submit-btn {
	background: url('../images/submit-button-bg.gif') no-repeat top left;
	border: 0px;
	width: 100px;
	height: 21px;
	font-size: 9px;
	padding: 0;
}

form#enquiry-form button#submit-btn:hover {
	background: url('../images/submit-button-bg-roll.gif') no-repeat top left;
}


/*--------------- Fancybox ---------------*/


div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 30;
}

div#fancy_loading {
	position: absolute;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	overflow: hidden;
	background: transparent;
	z-index: 100;
}

div#fancy_loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background: transparent url('../images/fancybox/fancy_progress.png') no-repeat;
}

div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
}

div#fancy_inner {
	position: relative;
	width:100%;
	height:100%;
	background: #FFF;
}

div#fancy_content {
	margin: 0;
	z-index: 100;
	position: absolute;
}

div#fancy_div {
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	z-index: 100;
}

img#fancy_img {
	position: absolute;
	top: 0;
	left: 0;
	border:0; 
	padding: 0; 
	margin: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

div#fancy_close {
	position: absolute;
	top: -12px;
	right: -15px;
	height: 30px;
	width: 30px;
	background: url('../images/fancybox/fancy_closebox.png') top left no-repeat;
	cursor: pointer;
	z-index: 181;
	display: none;
}

#fancy_frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

#fancy_ajax {
	width: 100%;
	height: 100%;
	overflow: auto;
}

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 111; 
	display: none;
	background-image: url("data:image/gif;base64,AAAA");
	outline: none;
	overflow: hidden;
}

a#fancy_left {
	left: 0px; 
}

a#fancy_right {
	right: 0px; 
}

span.fancy_ico {
	position: absolute; 
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 112; 
	cursor: pointer;
	display: block;
}

span#fancy_left_ico {
	left: -9999px;
	background: transparent url('../images/fancybox/fancy_left.png') no-repeat;
}

span#fancy_right_ico {
	right: -9999px;
	background: transparent url('../images/fancybox/fancy_right.png') no-repeat;
}

a#fancy_left:hover, a#fancy_right:hover {
	visibility: visible;
	background-color: transparent;
}

a#fancy_left:hover span {
	left: 20px; 
}

a#fancy_right:hover span {
	right: 20px; 
}

#fancy_bigIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

div#fancy_bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}
	
div.fancy_bg {
	position: absolute;
	display: block;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}

div#fancy_bg_n {
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_n.png') repeat-x;
}

div#fancy_bg_ne {
	top: -20px;
	right: -20px;
	width: 20px;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_ne.png') no-repeat;
}

div#fancy_bg_e {
	right: -20px;
	height: 100%;
	width: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_e.png') repeat-y;
}

div#fancy_bg_se {
	bottom: -20px;
	right: -20px;
	width: 20px;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_se.png') no-repeat;
}

div#fancy_bg_s {
	bottom: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_s.png') repeat-x;
}

div#fancy_bg_sw {
	bottom: -20px;
	left: -20px;
	width: 20px;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_sw.png') no-repeat;
}

div#fancy_bg_w {
	left: -20px;
	height: 100%;
	width: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_w.png') repeat-y;
}

div#fancy_bg_nw {
	top: -20px;
	left: -20px;
	width: 20px;
	height: 20px;
	background: transparent url('../images/fancybox/fancy_shadow_nw.png') no-repeat;
}

div#fancy_title {
	position: absolute;
	z-index: 100;
	display: none;
}

div#fancy_title div {
	color: #FFF;
	font: bold 12px Arial;
	padding-bottom: 3px;
	white-space: nowrap;
}

div#fancy_title table {
	margin: 0 auto;
}

div#fancy_title table td {
	padding: 0;
	vertical-align: middle;
}

td#fancy_title_left {
	height: 32px;
	width: 15px;
	background: transparent url('../fancybox/images/fancy_title_left.png') repeat-x;
}

td#fancy_title_main {
	height: 32px;
	background: transparent url('../fancybox/images/fancy_title_main.png') repeat-x;
}

td#fancy_title_right {
	height: 32px;
	width: 15px;
	background: transparent url('../fancybox/images/fancy_title_right.png') repeat-x;
}

video {
	border: 1px solid #999;
	margin: 6px;
}

button#play, button#pause, button#duration {
	margin: 10px 5px 15px 0;
	padding: 4px 6px;
	text-transform: uppercase;
}

button#play {
	margin-left: 3px;
}