/* MT HAKUBA BACKPACKERS main */

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:underline; 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:#FFFFCD; margin-top:-24px; width:100%; }
    
#Main .Left     { background-color:transparent; position:absolute; width:150px; left:0; min-height:800px;background-color:#FFFFCD;}
#Main .Content  { background-color:#FFFFCD; margin:0 0 0 150px; padding:10px 10px 10px 20px; min-height:795px; }
#Main .Content2  { background-color:#FFFFCD; margin:0 0 0 0px; padding:20px 20px 20px 20px; min-height:795px; }
*html #Main .Left { height:800px; }
*html #Main .Content { height:795px; }



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

#Rightspecial          { background-color:#FFD068; float:right; width:200px; 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; }

#Vistabuttons

{ background-color:#FFFFCD;  }

.Vistabuttons tr, td
{ background:#FFFFCD;}



#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; }

.googlemap {float:right}

/* tables */
table.rates { width:70%; 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: #28477c;  
  margin-bottom : 10px; 
  border: 2px solid #000000;
  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: #0066FF;
  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;
	}
/**
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;
        float: left;
}
.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: 375px;
	height: 289px;
	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: 345px;
	height: 259px;
	left: 15px;
	top: 15px;
}		
.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: 15px;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 15px;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 345px;	/* 100% */
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}