body,table,input,select,textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; background-color:#CD6803; }
body { margin:20px 0; padding:0; color:#000; }
 
input,select,textarea { background-color:#FFF; font-size:1em;}
small { font-size:0.85em;}
img { border:0;}
form { margin:0; padding:0;}
ul {  margin:0.5em 0 1em 2em; padding:0;}
li {margin: .2em 0 0.2em 0 }
p,dl { margin:1em 0 1em 0; }
dl.col { line-height:1.5em;}
dl.col dt { float:left; width:6em;}
dl.col dd { margin-left:7em;}

a { text-decoration:none; color:#3333CC; }
a:hover { color:#643264;}
h1,h2,h3,h4,h5 { font-size:1em; color:#28477c; font-family : Arial, Helvetica, sans-serif;}
h1 { margin:0 0 0.5em 0; font-family:Arial, Helvetica, sans-serif; font-size:1.6em; font-weight:bold;}
h2 { margin:1em 0 1em 0;  font-size:1.4em; font-weight:bold; }
h3{ font-size : 1.2em;}



.imgL { float:left; margin:0 5px 10px 0; padding:3px; border:#000 solid 1px; }
.imgR { float:right; margin:0 0 10px 5px; padding:3px; border:#000 solid 1px; }
img.right{float:right; margin-left:5px; padding:3px;}
img.bordered-image { margin:0 0 10px 5px; padding:3px; border:#000 solid 1px; }


.clear:after { content:"."; height:1px; display:block; clear:both; visibility:hidden;}
.clr { clear:both;}

.nav,.nav ul { margin:0; padding:0; list-style:none;}

/*End Standard CSS*/

#Header         { background-color:#28477c; height:117px; }
#Header .flags  { float:right; position:absolute; top:20px; right:20px; width:35px; }

#NavTop         { background-color:#643264; position:relative; top:-11px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; }
#NavTop a       { color:#fff; text-decoration:none; }
#NavTop a:hover { color:#999; }
#NavTop ul      { padding-top:5px; padding-bottom:5px; }
#NavTop li      { display:inline; margin-right:35px;}

#Main           { background-color:#fff; margin-top:-24px; width:100%; }
    
#Main .Left     { background-color:transparent; position:absolute; width:200px; left:0; min-height:800px; }
#Main .Content  { background-color:#FFFFCD; margin:0 0 0 200px; padding:10px 10px 10px 30px; min-height:795px; }
*html #Main .Left { height:800px; }
*html #Main .Content { height:795px; }



#Right          { background-color:#FFD068; float:right; width:130px; margin:0 0 10px 10px; padding:5px; border:#B0B0B0 solid 2px; font-size:80%; color:#F00; }
#Right h1,
#Right h2       { text-align:center; color:#F00; }

#Footer         { background-color:#28477c; padding:10px; color:#FFF; }
#Footer img     { float:right; }
#Footer a       { color:#FFF; }    
#Footer p       { text-align: center;}

/* images */
.noBorder       { border:0; }
.inline img     { float:left; margin:10px 10px 10px 0; padding:3px; border:solid 1px #000; }

/* tables */
table.rates { width:80%; background: #302571; }
table.rates tr.heading td { color: #FFFFFF; background: #302571; }
table.rates td { background: #F0F4F3; color: #302571; }
table.rates td.note { text-align: right; background: #F0F4F3; }
table.rates textarea { background-color:#FFF; width:98%;}
table.rates input { background-color:#FFF; width:90%; }
table.rates input.submit { width:auto; }

/*tours*/

.tours
{
  background-color: #643264;  
  margin-bottom : 10px; 
  border: 2px solid #CD6803;
  padding : 15px;
  color : #fff;
  width : 650px;
  display : block;
}

.tours h2
{
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin : 0.1em 0 0 0;
    font-size: 13pt;
    color : #FFF;
    font-weight: bold;
}

.photo
{
  width : 260px;  
  float: left;  
}

.photo img
{
  float; left;
  border : 1px solid #fff;
}

.details{
  width : 350px;
  float: left;
  
}

dl.tour {
  line-height:2.0em;
  border : 0px solid #fff;
  padding : 5px;
  /*
  background-color: #CDA7CD;*/
  color #fff;
  
}

dl.tour dt {
  float:left;
  width: 15em;
  font-weight:normal;
  line-height: 17px;
 
}

dl.tour dd {
  margin-left:7em;
}

.tour a{
  text-decoration: none;
  color : #fff;
}

.tour a:hover{
  text-decoration : underline;
}

a.booknow{
  background-color: #CD6803;
  padding : 0.2em 0.4em 0.2em 0.4em;
  color : #fff;
  border: 1px solid #fff;
}

.action{
  width : 272px;
  height: 100px;
  float: left;
  
}

.highlight {
  width: 250px;
  float: left;
  background-color: #ffd068;
  border: 2px solid #F7941F;
  padding: 10px;
  margin: 0 10px 20px 10px;
}

.highlight ul {
  margin: 0;
  padding: 0;
}

.highlight li {
  list-style: none;
  background: #ffd068 url('../images/g-arrow.gif') no-repeat 0 2px;
  margin: 4px 6px;
  padding: 0 0 0 14px;
  line-height: 18px;
}

.highlight a {
  font-weight: bold;
  color: #28477c;
  text-decoration: none;
  padding: 2px;
}

.highlight a:hover {
  background-color: #FAAD38;
  color: #000;
}

.highlight img {
  border: #28477c solid 1px;
}

.highlight h2 {
  margin: 0 0 10px 0;
}

.highlight-wide {
  width: 320px;
}

.highlight-full {
  float: none;
  width: auto;
}

.highlight-full img {
  float: left;
}

.highlight-full ul {
  margin-left: 270px;
}

/* Shuttle Bus Timetable */

table.timetable th {
  text-align: left;
  vertical-align: top;
  border-bottom: #E1A468 solid 1px;
  padding: 4px;
}

table.timetable td {
  background-color: #D78635;
  padding: 8px;
  border-bottom: #CD6803 solid 1px;
}

/* Booking page */
dl.bookingpage dt {
	width:400px;
	float:left;
	line-height:30px;
}
dl.bookingpage dd {
	height:30px;
	}
.bookings {
	padding: 0 15px;
	}
.padlock {
	width:500px;
	text-align:right;
	margin: 0 auto;
	}
.padlock img {
	margin-right: -105px;
	}
.booking-table {
	margin-top: -100px;
	}
	
/* skibooking page */

table.skibooking-table
{
  margin: 1em 0;
  width: 70%;
  background-color: #302571;
  border-collapse: collapse;
  border-right: 2px solid #13138B;
  border-bottom: 1px solid #13138B;
}

table.skibooking-table th, table.skibooking-table td
{
  padding: 2px;
  border-top: 1px solid #13138B;
  border-left: 2px solid #13138B;
}

table.skibooking-table table th, table.skibooking-table table td
{
  border: none;
}

table.skibooking-table thead th
{ color: #FFFFFF;
  font-weight: bold;
  text-align: left;
}

table.skibooking-table tbody th
{
  text-align:  left;
  font-weight: normal;
  background: #F0F4F3; color: #302571
  width: 20em;
  padding-right: 8px;
}

table.skibooking-table tbody td
{
  background-color: #F0F4F3;
  padding-left: 8px;
}

table.skibooking-table tbody td.txt
{
  padding: 0.2em 0.4em;
  background-color: #F0F4F3;
}

table.skibooking-table input.text, table.skibooking-table textarea.textarea
{
  width: 15em;
}

table.skibooking-table input.large
{
  width: 22em;
}

table.skibooking-table input.num
{
  width: 4em;
}

p.skibooking-submit-row
{
  width: 50em;
  text-align: center;
}

label#airport_shuttle_bus_field_label
{
  font-size: 0.9em; /* this is a really long label, so it needs a slightly smaller font to fit */
}


/**
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="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-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;
}

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

.slideshow {
	width: 406px;
	height: 311px;
	margin: 0 auto;
	background: url("../images/back.png") no-repeat scroll 0 0 transparent; 
}
.slideshow a img {
	border: 0;
}
/**
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 {
	width: 382px;
	height: 287px;
	left: 12px;
	top: 12px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
	position: static;
}
/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 12px;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 382px;	/* 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 {
	background: url(../images/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(../images/controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(../images/controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(../images/controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(../images/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(../images/controller-prev.gif);
	left: 65px;
	width: 28px;
}