/********************   css/global.defaults.css   ********************/

/* ---------------- OVERRIDE BROWSER DEFAULT TYPOGRAPHY ---------------- */
 
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
}
div#holder {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 76%;
}
h2, h3, h4, h5, h6 {
	font-family: "Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, sans-serif;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.8em;
	font-weight: normal;
	margin: 0 0 0;
}
h2 {
	font-size: 1.4em;
	margin: 0 0 1.2em;
	font-weight: normal;
}
h3 {
	font-size: 1.2em;
	margin: 1.2em 0 0;
	font-weight: normal;
}
h4 {
	font-size: 1em;
	margin: 1.2em 0 0;
	font-weight: bold;
}
h5 {
	font-size: 0.9em;
	margin: 1.2em 0 1.2em;
	font-weight: normal;
}
h6 {
	font-size: 0.8em;
	margin: 1.2em 0 1.2em;
	font-weight: bold;
}
p,
li {
	line-height: 1.3;
}
p {
	font-size: 1em;
	margin: 0.9em 0em 1.2em;
}
li {
	font-size: 1em;	
}
li > p {
	margin-top: 0.2em;
}
ol, ul {
	margin-top: 0.2em;
	margin-bottom: 0.1em;
	margin-left: 0;
	padding-left: 1.8em; /* 1.8em is flush left in IE6; 1.55em in Firefox2 */
	list-style-type: square;
}
img {
	border: 0 none;
}
th {
	font-weight: normal;
	text-align: right;
	padding-right: 0.5em;
}
td {
	text-align: center;
}
form,
button,
input,
select,
textarea {
	margin: 0;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
sup {
	font-size: 0.74em;
	/* avoid increased line-box height */
	vertical-align: top;
	position: relative;
	top: -0.1em;
}
sup.ordinal {
	text-transform: lowercase;
}
.temperature {
	white-space: nowrap; /* prevent IE from word-breaking after degreee symbol */
}
/********************   css/global.layout.css   ********************/

body {
	background: #670004 url(http://www.claridge.ch/templates/main/img/main-bkg.jpg) top left repeat-x fixed;
	color: #fff;
}


#content{
	width: 960px;
	margin: 0 auto;
	background-color: #5e0000;
	position: relative;
}

#header {
	height: 150px;
	width: 960px;
	border-top: 3px solid #fff;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 50%;
	margin-left: -480px;
	z-index: 1000;
	background-color: #5e0000;
}

#header  #brandimg{
	position: absolute;
	top: 22px;
	left: 35px;
	display: block;
	width: 230px;
	height: 126px;
}
#header h1{
	top:10px;
	position:absolute;
	right:20px;
}
#headerSubTitle{
	position: absolute;
	top: 105px;
	right: 20px;
}
#main-content{
	margin: 528px 0 0 210px;
	padding: 20px;
	background: #5c0001 url(http://www.claridge.ch/templates/main/img/content-bkg.jpg) top left repeat-x;
}

#main-content ul.unIndentedList li {
	float:left;
	width:50%;
}


#extra-content{
	margin: 20px 0;
}
.home-box{
	display: inline;
	float: left;
	margin-right: 17px;
	height: 200px;
	width: 210px;
	position: relative;
}

.home-box a{
	position: absolute;
	bottom: 0;
	right: 8px;
}


.clearFloat{
	clear: both;
}





#main-visual{
	width: 750px;
	height: 350px;
	position: absolute;
	top: 180px;
	right: 0;
}
#main-visual img{
	width: 750px;
	height: 350px;
}

#main-visual.jsHide img{
	visibility: hidden;	
}
#main-visual.jsHide .slideshow-images img{
	visibility: visible;	
}


#main-navigation {
	position: absolute;
	top: 170px;
	left: 50%;
	width: 150px;
	margin-left: -450px;
}
#main-navigation ul{
	margin: 0;
	padding: 0;
}
#main-navigation ul  li{
	height: 22px;
	width: 150px;
	list-style: none;
}
#main-navigation ul li a{
	display: block;
	height: 22px;
	width: 150px;
}


#widget-box{
	position: absolute;
	top: 415px;
	left: 50%;
	width: 195px;
	margin-left: -466px;
}

#widget-special-offer{
	position: relative;
	width: 188px;
	height:116px;
}
#widget-special-offer h4{
	margin: 0;
	padding: 0 7px;
	height: 30px;
	line-height: 30px;
	background-color: #880203;
}
#widget-special-offer span{
	position: absolute;
	right: 5px;
	bottom: 0;
	height: 30px;
}

#availability-checker {
	margin: 14px 0 0 0;
}
#availability-checker h4, #widget-newsletter h4{
	height: 38px;
	background-color: #880203;
	line-height: 38px;
	position: relative;
	text-indent: 7px;
	margin: 0 0 2px 0;
}
#availability-checker h4 a, #widget-newsletter h4 a{
	display: block;
}
#availability-checker h4 span{
	position: absolute;
	right: 10px;
	top: 5px;
}
#availability-checker form {
	height:150px;
}
#availability-checker div{
	height: 30px;
	clear: both;
}
#availability-checker label{
	float: left;
}
#availability-checker input, #availability-checker select, #availability-checker img, #availability-checker button{
	float: right;
}

img#use-calendar{
	display: inline;
	margin: 3px 0 0 2px;
}
input#date-in{
	width: 70px;
}


#language-bar{
	position: absolute;
	right:15px;
	top:75px;
	margin: 0;
	padding: 0;
}
#language-bar li{
	display: inline;
	list-style: none;
	padding: 0 9px;
	background: transparent url(http://www.claridge.ch/templates/main/img/language-divider.gif) right center no-repeat;
}
#language-bar li.last-li{
	background: none;
}
#language-bar li a:hover{
	text-decoration: underline;
}

/*
#footer{
	background-color: #000;
	height: 110px;
}
#footer ul, #footer p{
	width: 950px;
	margin: 0 auto;
}
#footer p#last-update{
	padding-top: 15px;
}
#footer ul{
	padding: 0;
	margin:15px auto 5px;
}
*/
#footer {
	background-color: #000;
	height: 110px;
}
#footer .content {
	margin: 0 auto;
	width: 950px;
}
#footer .content .text {
	float: left; _display: inline;
	width: 485px;
}
#footer .content .logos {
	float: right; _display: inline;
	padding: 13px 0;
}
#footer ul {
	padding: 0;
}
#footer ul li{
	display: inline;
	list-style: none;
	margin: 0;
	padding:0 8px 0 0;
}


#mod_pukkaRooms .moduleBody{
	position: relative;
}
#mod_pukkaRooms .itemBackLink{
	position: absolute; 
	top: 0;
	right: 0;
}
#mod_pukkaRooms img {
	margin:-20px 0 5px 5px;
}
.content-image {
	display: inline;
}
.content-image img, #diningInnerBox img , #meetingInnerBox img, #mod_pukkaPackages .itemMainImage{
	width: 200px;
	height: 180px;
	border: 8px solid #5e0000;
	float: right;
	margin: 0 0 5px 5px;
}

img.itemPreviewImage{
	width: 152px;
	height: 126px;
	border: 8px solid #5e0000;
	float: right;
}

#mod_pukkaRooms img.itemPreviewImage{
	border: 4px solid #000;
}

.emptyDiv {
	height: 0;
	width: 0;
}

#mod_pukkaRooms .bookingLink{
	display: none;
}

#diningMenu, #meetingMenu {
	display: block;
	text-align: center;
	margin-bottom: 1em;
}
#diningMenu li, #meetingMenu li {
	display: inline;
	list-style: none;
	margin: 5px;
	color: #F8C055;
	cursor: pointer;
}
#diningMenu li.active, #meetingMenu li.active {
	color: #fff;
	text-decoration:underline;
}
#diningMenu li a, #meetingMenu li a {
	color: #F8C055;
}

#diningFrame, #meetingFrame {
	width: 700px;
	margin: 10px auto;
	
}
#diningInnerBox, #meetingInnerBox {
	width: 700px;
}


.minHeight{
	width: 1px;
	height: 500px;
	float: left;
	
}

iframe {
	float: right;
	border: none;
	margin-top: 20px;
}
#mbImage iframe {
	margin-top: 0;
}

#reservationTable td, .voucherTable td{
	text-align: left;
}

#mb_inline {
	display: none;
}



.videoLinks a{
	display: block;
}




#mod_pukkaPackages .moduleBody{
	width: 700px;
}
#mod_pukkaPackages.viewItem {
	width: 700px;
}
#mod_pukkaPackages .itemPreview {
	border-bottom:1px dashed #FFFFFF;
	margin:0 0 1.8em;
	min-height:126px;
	padding-bottom:25px;
}
#mod_pukkaPackages .itemPreview .itemPreviewPrice {
	font-size: 0.8em;
	margin: 0 0 10px 0;
	text-align: left;
}

#mod_pukkaPackages a.itemPreviewTitleLink {
	color:#F8C055;
	font-size:0.8em;
	font-weight:normal;
	margin:0 0 10px;
	text-transform:uppercase;
}
#mod_pukkaPackages h2 {
	font-size: 1em;
}

#mod_pukkaPackages img.itemPreviewImage {
	border:4px solid #000000;
}





.basicFormFieldBlock:after{
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


#mod_flexForms .flexForm_div_ .date {
	left:300px;
	position:absolute;
	top:-28px;
}

/********************   css/global.text.css   ********************/

body, h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica;
}

a{
	outline: none;
	color: #FFD37F;
	text-decoration: none;
}



h1{
	color: #a77474;
	font-size:0.7em;
}

#headerSubTitle{
	color: #fff;
	font-size: 0.7em;
	text-align: right;
	text-transform: uppercase;
}
#main-content p{
	font-size: 0.9em;
}

h2 {
	color: #f8c055;
	text-transform: uppercase;
	font-size:1.1em;
}



.home-box h3{
	margin: 0 0 10px 0;
	color: #f8c055;
	text-transform: uppercase;
	font-size:1em;
	font-weight: bold;
}

.home-box h3#comments-sub-header{
	white-space: nowrap;
}
.home-box a{
	color:#fff;
	font-size:0.7em;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
}
.home-box a:hover{
	text-decoration:underline;
}
#main-content .home-box p{
	color: #FFF;
	font-size: 0.7em;
}

#main-navigation a{
	display: block;
	height: 23px;
	width: 120px;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.7em;
}
#main-navigation a:hover{
	color: #ffd37f;
}

#widget-special-offer h4{
	font-size: 0.9em;
}
#widget-special-offer span{
	font-size: 0.6em;
	line-height: 28px;
}
#widget-special-offer span em{
	font-size: 2em;
	font-style: normal;
}


#availability-checker h4{
	font-weight: normal;
	font-size:1.1em;
}
#availability-checker h4 span{
	font-size:0.6em;
	font-weight:normal;
	line-height:11px;
	position:absolute;
	right:10px;
	top:9px;
	text-indent: 0;
}

#availability-checker form {
	font-size:0.8em;
	padding: 7px;
}

#address-sidebar{
	font-size:0.7em;
	margin: 15px 0 0 30px;
}


#language-bar li{
	text-transform: uppercase;
	font-size: 0.7em;
}



#footer{
	text-transform: uppercase;
}
#last-update{
	font-size: 0.8em;
	font-weight: bold;
}
#footer ul, #footer-address{
	font-size: 0.7em;
	font-weight:normal;
}
#footer a:hover{
	text-decoration: underline;
}





#mod_pukkaRooms h3 a{
	margin: 0 0 10px 0;
	color: #f8c055;
	text-transform: uppercase;
	font-size:1em;
	font-weight: normal;
}


#mod_pukkaRooms .itemPreviewIntro{
	color: #fff;
	font-weight: normal;
}
.rooms-box ul {
	margin: 10px 0 0 0;
	padding:0 0 0 15px;
}
.rooms-box ul li {
	list-style: disc;
}





.rooms-box h3{
	text-indent: -10000px;
}
/********************   css/global.module.css   ********************/
.moduleOutput {
	display: table; zoom: 1; /* Force block formatting context; in IE<=7, use hasLayout to achieve a non-'width soft shrink-wrapped' but otherwise similar effect to display:table */

}

.moduleTaskTitle {
	display: none;
}

.itemPreview {
	position: relative; zoom: 1;
}

/* START EASY CLEARING */
.itemPreview:after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* END EASY CLEARING */

.itemPreview .itemPreviewEditLink {
	position: absolute;
	top: 0;
	right: -3px;
}

.itemPreview .itemPreviewEditLink img {
	float: none !important;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
}
.itemPreviewViewLink {
	position: absolute;
	bottom: 7px;
	left: 0;
	font-weight: bold;
}

#mod_pukkaNews .itemPreviewViewLink {
	position: absolute;
	bottom: -5px;
	left: 0;
	font-weight: bold;
}

/* ================ FLEXFORMS =============== */

.basicForm {
	display: table; zoom: 1; /* Force block formatting context; in IE<=7, use hasLayout to achieve a non--'width soft shrink-wrapped' but otherwise similar effect to display:table */
/* control font-size in ems from outside this stylesheet; aim for 11px */
}

.basicForm,
.basicFormFieldBlock {
	width: 600px; /* narrow enough to force CAPTCHA-image to wrap down */
}

.basicFormFieldBlock {
	position: relative; zoom: 1;
	margin-bottom: 6px;
	clear: both;
}

.basicForm .basicFormFieldBlock:after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.requiredFieldMark {
	color: #ff0000;
}

.requiredFieldEmphasis {
	color: #ff0000;
}

.basicForm label,
.basicForm .noteLabel {
	margin-right: 8px;
}

.basicForm label.blockLabel,
.basicForm .date label,
.basicForm .noteLabel {
	display: block;
	float: left; _display: inline;
	width: 120px;
	text-align: right;
}

.basicForm label.textareaLabel {
	float: left; _display: inline;
	width: 120px;
	margin-top: 6px;
	text-align: right;
}       

.basicForm .stdLabel {
	float: left; _display: inline;
	margin-top: 6px;
	text-align: left;
}

.basicForm .stdFormBlock {
}

.basicForm .checkboxlistItem {
	float: left; _display: inline;
	width: 33%;
	margin-top: 0px !important;
}

.basicForm .checkboxlistItem input {
	float: left; _display: inline;
}

.basicForm .checkboxlistItem span { /* the label text */
	display: inline;
	font-size: 0.9em;
	line-height: 100%;
	font-family: "Arial Narrow", Arial, Verdana;
	text-transform: uppercase;
}

.basicForm .radiobuttonListItem {
	position: relative;
	float: left; _display: inline;
	width: 50px;
	text-align: center;
	margin: 5px 0;	
}


.basicForm .smallTextarea {
	overflow: auto;
	width: 251px;
	height: 36px;
	font-size: 0.95em;
}

.basicForm .textarea {
	float: left; _display: inline;
	overflow: auto; /* Suppress IE's scrollbars */
	margin: 0;
	border: 1px solid gray;
	padding: 1px 0px 0px 2px;
	width: 251px;
	height: 50px;
	font-size: 0.95em;
	font-family: Arial;
}

.basicForm .checkbox {
	float: left; _display: inline;
	margin-top: 2px;
}

.basicForm .input,
.basicForm .select,
.basicForm .date input#date-in {
	float: left; _display: inline;
	margin: 0px;
	border: 1px solid gray;
	padding: 0;
	width: 160px;
	font-size: 0.95em;
}
.basicForm .input,
.basicForm .date input#date-in {
	padding-left: 2px;
	height: 1.3em; /* Cross-browser height is 1.23em, but (only) Fx3b5 needs 1.3em */
	padding-bottom: 2px;
}
.basicForm .date input#date-in {
	width: 100px;
}
.basicForm .select {
	padding-left: 1px;
	width: 164px; /* strange cross-browser width discrepancy except in IE8 beta 1 */
	padding-bottom: 1px;
	/* height on <select> /includes/ padding in a strange, cross-browser way */
	height: 1.67em;  /* Cross-browser height is 1.58em, but (only) Fx3b5 needs 1.67em */
} *:first-child+html .basicForm .select { /* A Bad Hack targeting current browser IE7 */
	height: 1.7em;
}
/* START hack for Opera 8 */
@media all and (min-width: 0px) {
	/* ADD styles for Opera 8 */
	.basicForm .input {
		height: 1.65em;
	}
	.basicForm .select {
		width: 158px;
	}
	/* UNDO styles for other browsers (including Op9) supporting both the
	   CSS3 'and' syntax and the CSS3 [attribute^="value"] syntax; IE7
	   supports the latter so presumably future IEs will support both */
	.basicForm .input[class^='input'] {
		height: 1.3em;
	}
	.basicForm .select[class^='select'] {
		width: 164px;
	}
} /* END Opera hack */

.basicForm .captcha-container,
.basicForm .note {
	display: block;
	float: left; _display: inline;
	width: 164px;
}

.basicForm .captcha-container {
	text-align: left;
}

.basicForm .captcha-image {
	display: inline;
	_margin-left: -3px; /* IE<=6 3-pixel jog bug */
}

.basicForm .captcha-container a {
	display: block;
	width: 160px;
}

#captcha-followup {
	clear: left;
}

.basicForm .basicFormSubmit {
	overflow: visible; /* Kill IE<=7 magic padding */
	float: left; _display: inline;
	margin-left: 128px;
	margin-top: 25px;
	padding: 0 6px;
	font-size: 0.95em;
	cursor: pointer;
}  

.basicForm .noteLabel {
	font-weight: bold;
}




.basicForm .flexForm_div_valueVoucherCheck label.stdLabel,
.basicForm .flexForm_div_additionalMessage label.stdLabel,
.basicForm .flexForm_div_additionalFruit label.stdLabel,
.basicForm .flexForm_div_additionalPerriet label.stdLabel,
.basicForm .flexForm_div_additionalBreakfast label.stdLabel,
.basicForm .flexForm_div_additionalGlassCruchon label.stdLabel,
.basicForm .flexForm_div_additionalGlassPerriet label.stdLabel {
	float: right;
	width: 440px;
}
.basicForm input.checkbox{
	float: right;
	margin: 10px;
}

.basicForm .stdFormBlock .radiobuttonListItem{
	width: 470px;
	float: right;
	text-align: left;
}
.basicForm .stdFormBlock  .radiobuttonListItem span {
	position: relative;
	width: 450px;
	display: inline;
	text-align: left;
	margin-left: 10px;
	
}

.basicForm .flexForm_div_hotelStayRoomType label.blockLabel{
	padding-top: 30px;
}
.basicForm .flexForm_div_packages label.blockLabel{
	padding-top: 53px;
}
.flexForm_div_captcha-code {
	margin-top: 50px;
}

.basicForm .flexForm_div_Orsons-Restaurant, .basicForm .flexForm_div_ACE-Restaurant {
	width: 200px;
	float: left;
}
.basicForm .flexForm_div_OrsonHours,
.basicForm .flexForm_div_ACEHours {
	width: 370px;
	float: right;
	clear: none;
}
.basicForm .orderingHours {
	float:left;
	width:130px;
}

.basicForm .orderingHoursList {
	float:right;
	width:235px;
}
/* ================ GALLERIES =============== */


#mod_galleries h3.moduleCategoryTitle {
	clear: left;
}

#mod_galleries .itemPreview {
	float: left;
	margin: 0 15px 15px 0; _display: inline; /* IE<=6 doubled float margin bug */
	width: 220px;
	position: relative;
}

#mod_galleries .itemPreview img {
	display: block;
	width: 220px;
	height: 160px;
}

#mod_galleries .itemPreview span {
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #999;
}


#mod_galleries .caption {
	margin: 0.8em 0 0;
}

#mod_galleries .image-request {
	margin: 0.2em 0 0;
}







/* ================ PUKKAROOMS =============== */


#mod_pukkaRooms {
	width: 600px;
	margin: 20px auto;
}

#mod_pukkaRooms.viewList .itemPreview {
	margin: 0 0 1.8em 0;
	min-height: 126px; _height: 126px;
	border-bottom: 1px dashed #fff;
	padding-bottom:25px;
}

#mod_pukkaRooms.viewList .itemPreview.last {
	margin-bottom: 0.9em;
}

#mod_pukkaRooms.viewList .itemPreviewTitle {
	margin: 0 0 10px 0;
}

#mod_pukkaRooms .itemPreview .itemPreviewEditLink {
	z-index: 1;
	left: -170px;
	right: auto;
	top: 5px;
	background-color: white;
	color: black;
}

#mod_pukkaRooms.viewList .itemPreviewImageSection {
	position: absolute;
	top: 0;
	left: -170px;
}

#mod_pukkaRooms.viewList a.zoomer img {
	_behavior: url(/png_behavior.htc);
	position: absolute;
	right: 0;
	bottom: 0;
	color: black;
	font-weight: bold;
	text-decoration: underline;
}

#mod_pukkaRooms.viewList .itemPreviewBookingLink {
	margin-bottom: 0;
}






/* ================ PUKKANEWS =============== */

#mod_pukkaNews.viewList .itemPreview {
	margin: 0 0 1.8em 170px;
	min-height: 126px;
}

#mod_pukkaNews.viewList .itemPreview.last {
	margin-bottom: 0.9em;
}

#mod_pukkaNews.viewList .itemPreviewTitle {
	margin-top: 0;
}

#mod_pukkaNews .itemPreview .itemPreviewEditLink {
	z-index: 1;
	left: -170px;
	right: auto;
	top: 2px;
	background-color: white;
	color: black;
}

#mod_pukkaNews.viewList img.itemPreviewImage {
	position: absolute;
	left: -170px;
	top: 0;
	width: 152px;
	height: 126px;
}

/********************   css/gmapsoverlay.css   ********************/

/* G-Maps CSS */
	
	#gmOverlay {
		position: absolute;
		left: 0;
		width: 100%;
		background-color: #333;
		cursor: pointer;
		z-index: 8000;
	}
	
	#gmCenter, #gmBottomContainer {
		position: absolute;
		left: 50%;
		overflow: hidden;
		background-color: #fff;
		z-index: 9000;
		margin-top: 100px;
		color:#000000;
	}
	
	.gmLoading {
		background: #fff url(http://www.claridge.ch/templates/main/img/loading.gif) no-repeat center;
	}
	
	#gmMap {
		width: 600px;
		height: 400px;
		border: 10px solid #fff;
	}
	
	#gmBottom {
		font-family: Verdana, Helvetica, sans-serif;
		font-size: 10px;
		color: #666;
		line-height: 1.4em;
		text-align: left;
		border: 10px solid #fff;
		border-top-style: none;
	}
	
	#gmCloseLink {
		display: block;
		float: right;
		width: 80px;
		height: 22px;
		background: transparent url(http://www.claridge.ch/templates/main/img/closelabel.gif) no-repeat center;
		margin: 5px 0;
	}
	
	#gmCaption {
		margin-right: 71px;
	}
/********************   css/slideshow.css   ********************/

/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="images" />
		<div class="captions" />
		<div class="controller" />
		<div class="thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 400px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 300px;
	margin: 0 auto;
	width: 400px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/
.slideshow-controller {
	display: none;
}
/*
.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}
*/


/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}/* The main calendar widget.  DIV containing a table. */

/********************   css/calendar.css   ********************/


div.calendar {
	position: relative;
	font-family: Verdana, sans-serif;
	font-size: 0.8em;
	border: 1px solid #000;
	z-index: 10;
	font-weight: bold;
}

.calendar table {
	color: white;
	background-color: #5e0000;
	border: 9px solid black;
	cursor: default;
}

/* All cells */
.calendar table td {
	text-align: center;

}

/* ====== HEADER -- contains operational and navigation buttons, and day names ====== */

/*  "?", "X" buttons (also affects "<<", "<", ">", ">>" buttons)  */
button {

	color: #fff;
	background-color: black;
}

/* Current "month, year"; pressing it will take you to the current date */
.calendar thead .title {

	color: #fff;
	background-color: black;
	padding: 2px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size:0.9em;
}

/*  Navigation row: "<<", "<", "Today", ">", ">>"  */
.calendar thead .headrow .button {
	color: white;
	padding-bottom: 2px;
}

/*  Navigation buttons: "<<", "<", ">", ">>"  */
.calendar .nav {

	background-color: black;
}

/*  Hover effect for the "?", "X", "<<", "<", ">", ">>" buttons  */
.calendar thead .hilite {
	background-color: #1f1f1f;
}

/*  onclick effect for the "?", "X", "<<", "<", ">", ">>" buttons  */
.calendar thead .active {
	background-color: black;
}

/* Row <TR> containing the day names */
.calendar thead .daynames {
	border: 0 solid #999;
}

/* Cells <TD> containing the day names */
.calendar thead .name {
	color: #d6d4bd;
	border-bottom: 0px solid black;
	padding: 5px;
	text-align: center;
	font-weight: bold;
}

/* Weekend day name */
.calendar thead .weekend {
	color: black;
}

/*  Hover effect for the cells <TD> containing the day names  */
.calendar thead .daynames .hilite {
	background-color: transparent;
}

/*  onclick effect for the cells <TD> containing the day names  */
.calendar thead .daynames .active {
	background-color: transparent;
}


/* ====== BODY -- contains the dates of the month ====== */

/* Cells <TD> containing dates */
.calendar tbody .day {
	text-align: center;
	border-top: 1px none #fff;
	border-right: 1px none #8a8a8a;
	border-bottom: 1px none #8a8a8a;
	border-left-width: 1px;
	border-left-color: #fff;
}

.calendar tbody .day.othermonth {
	color: #85884c;
	font-size: 70%;
}

.calendar tbody .day.othermonth.oweekend {
	color: #fbb;
	background-color: #c1cd23;
}

.calendar table .wn {
	visibility: hidden;
	color: #r;
	background: transparent none;

}

.calendar table .wn {
	visibility: hidden;
	color: #fcae1d;
	background: transparent none;
}

.calendar tbody td {
	margin: 0;
	padding: 0;
	width: 2em;
	height: 1.5em;
}

.calendar tbody .rowhilite td {
}

.calendar tbody .rowhilite td.wn {
	background-color: #efe;
}

/* Hovered cells <TD> */
.calendar tbody td.hilite {
	background-color: #850109;
	color: white;
}

/* Active (pressed) cells <TD> */
.calendar tbody td.active {
	background-color: #ddc;
	border-width: 1px;
}

/* Cell showing chosen date */
.calendar tbody td.selected {
	color: #fff;
	background-color: black;
	font-weight: bold;

}

/* Cells showing weekend dates */
.calendar tbody td.weekend {
	color: #fff;
	background-color: #850109;
	border-color: #1b5175;
}

/* Hovered cells showing weekend dates */
.calendar tbody td.weekend:hover {
	color: gray;
	background-color: white;
	font-weight: bold;
}

/* Cell showing today's date */
.calendar tbody td.today {
	font-weight: bold;
}

.calendar tbody .disabled {
	color: #999;
}

/* Empty cells (the best is to hide them) */
.calendar tbody .emptycell {
	visibility: hidden;
}

/* Empty row (some months need less than 6 rows) */
.calendar tbody .emptyrow {
	display: none;
}


/* ====== FOOTER -- status bar ====== */

/* The <TR> in footer (only one right now) */
.calendar tfoot .footrow {
}

/* Tooltip (status bar) cell <TD> */
.calendar tfoot .ttip {
	color: white;
	/* Zero the text: */
	line-height: 0;
	text-indent: -999em;
	font-size: 0px;
}
/* IE<=7 fails to zero the text completely, making this TD too big */
* html .calendar tfoot .ttip {
}
*:first-child+html .calendar tfoot .ttip {
}


.calendar tfoot .hilite {
}

.calendar tfoot .active {
}


/* ====== COMBO BOXES -- menus that display months/years for direct selection ====== */

.calendar .combo {
	display: none;
	color: black;
	background-color: white;
	position: absolute;
	top: 0px;
	left: 0px;
	border: 1px solid #000;
	width: 4em;
	cursor: default;
	font-size: 90%;

}

.calendar .combo .label,
.calendar .combo .label-IEfix {
	padding: 1px;
	text-align: center;
}

.calendar .combo .label-IEfix {
	width: 4em;


}

.calendar .combo .hilite {
background-color: #830109;
	color: white;
}

.calendar .combo .active {
	background-color: #737373;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-weight: bold;
	color: #fff;

}

.calendar td.time {
	background-color: #fed;
	border-top: 1px solid white;
	padding: 1px 0px;
	text-align: center;

}

.calendar td.time .hour,

.calendar td.time .minute,
.calendar td.time .ampm {
	background-color: white;
	border: 1px solid #988;
	padding: 0px 3px 0px 4px;
	font-weight: bold;
}

.calendar td.time .ampm {
	text-align: center;
}

.calendar td.time .colon {
	padding: 0px 2px 0px 3px;
	font-weight: bold;
}

.calendar td.time span.hilite {
	color: white;
	background-color: #866;
	border-color: black;
}

.calendar td.time span.active {
	background-color: black;
	border-color: #f00;

}
/********************   css/mediabox.css   ********************/


/* mediaboxAdvanced - black theme */

#mbOverlay {
	position: absolute;
	z-index: 9998;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#mbOverlay.mbOverlayFF {
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/80.png) repeat;
}

#mbOverlay.mbOverlayIE {
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/50.gif) repeat;
}

#mbCenter, #mbBottomContainer {
	position: absolute;
	z-index: 9999;
	left: 50%;
	overflow: hidden;
	background-color: #000;
}

.mbLoading {
	background: #000 url(http://www.claridge.ch/templates/main/img/mediabox/BlackLoading.gif) no-repeat center;
}

#mbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #000;
	background-repeat: no-repeat;
/*	Sets the style for inline content, if no style is given	*/
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #000;
	background-color: #fff;
	text-align: left;
}
#mbImage div {
	margin: 10px;
}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a, #mbImage a:link, #mbImage a:visited {
	color: #ddd;
}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a:hover, #mbImage a:active {
	color: #fff;
}

#mbBottom {
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #999;
	text-align: left;
	border: 10px solid #000;
	border-top-style: none;
}

#mbTitle {
	display: inline;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	font-size: 12px;
}

#mbNumber {
	display: inline;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbCaption {
	display: block;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	width: 46px;
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/BlackClose.gif) no-repeat center;
	margin: 0;
	outline: none;
}

#mbPrevLink {
	width: 69px;
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/BlackPrevious.gif) no-repeat center;
}

#mbNextLink {
	width: 41px;
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/BlackNext.gif) no-repeat center;
}

#mbCloseLink {
	width: 46px;
	background: transparent url(http://www.claridge.ch/templates/main/img/mediabox/BlackClose.gif) no-repeat center;
}

#mbError {
	position: relative;
	top: 30%;
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border: 10px solid #700;
	padding: 20px 10px 30px;
	margin: auto;
}
/********************   css/sifr.css   ********************/
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}