/* ------------------------------------------------------------------------ */
/* Tour CSS for huddle.net
/* (c)Huddle
/* ------------------------------------------------------------------------ */
#tour {
width: 900px;
margin: 20px auto;
position: relative;}

#tour h1,
#tour h2 {
color: #444;
font-weight: normal;
line-height: 2.15;}

#tour h2 {
font-size: 1.6em;
margin-bottom: 10px;}

.js #tour h1 {
text-align: center;}

#tour ul {
line-height: 1.5;}

#tour .slides-buttons {
position: absolute;
top: 0;
width: 900px;
z-index: 100;}

/* --------------------------------------------- */
/* TOUR > SLIDESHOW
/* --------------------------------------------- */
#tour .slides {
width: 900px;
overflow: hidden;}

#tour .slides ul {
width: 9999em;
overflow: hidden;
z-index: 10;
background-color: #fff;}

#tour .slides ul:after {
content: ".";
clear: both;
display: block;
font-size: 0;
height: 0;
visibility: hidden;}

#tour .slides ul ul {
width: auto;
overflow: auto;
background-color: transparent;}

#tour .slides li {
float: left;
width: 900px;}

.js #tour .slides li.slide {
height: auto !important;}

#tour .slides li li {
float: none;
width: auto;
background-color: transparent;}

/* --------------------------------------------- */
/* TOUR > SLIDESHOW > NAVIGATION
/* --------------------------------------------- */
#tour .slides-nav {
z-index: 100 !important;
position: absolute !important;
top: 273px;
left: 0;
width: 900px;
height: 110px;}

.js #tour .slides-nav div {
width: 830px;
overflow: hidden;
background: url(/images/tour/gallery-bg.png);
margin: 0 35px;
position: relative;}

#tour .slides-nav ul {
background: url(/images/tour/gallery-bg.png);
height: 110px;
overflow: auto;
position: relative;}

.js #tour .slides-nav ul {
background: none;
margin: 0;
overflow: hidden;}

#tour .slides-nav ul:after {
content: ".";
clear: both;
display: block;
font-size: 0;
height: 0;
visibility: hidden;}

#tour .slides-nav li {
float: left;
width: 99px;
text-align: center;
position: relative;
left: 0;}

#tour .slides-nav a {
padding: 23px 3px 13px;
color: #fff;
font-weight: bold;
display: block;
font-size: 0.9em;}

#tour .slides-nav a .overlay {
background-color: #000;
position: absolute;
top: 25px;
left: 20px;
width: 59px;
height: 45px;}

#tour .slides-nav a:hover .overlay {
display: none;}

#tour .slides-nav a .loading,
#tour .slides-nav a:hover .loading {
display: block;
background: #fff url(/images/spinner-small.gif) no-repeat center;}

#tour .slides-nav img {
vertical-align: bottom;
background-color: #fff;
padding: 2px;
margin-bottom: 5px;
-ms-interpolation-mode: bicubic;}

#tour .slides-nav .on a {
padding: 10px 0 0;}

#tour .slides-nav .on img {
width: 86px;
height: 66px;
border: 1px solid #666;
border-width: 0 1px 1px 0;}

#tour .slides-nav .on .overlay {
display: none;}

#tour .slides-nav .btn-left,
#tour .slides-nav .btn-right {
background: url(/images/sprite-buttons.png) no-repeat 0 -120px;
height: 110px;
width: 35px;
position: absolute;
top: 0;
cursor: pointer;
z-index: 10;}

#tour .slides-nav .btn-left {
left: 0;}

#tour .slides-nav .btn-left:hover {
background-position: -45px -120px;}

#tour .slides-nav .left-disabled,
#tour .slides-nav .left-disabled:hover {
background-position: -90px -120px;
cursor: default;}

#tour .slides-nav .btn-right {
right: 0;
background-position: -135px -120px;}

#tour .slides-nav .btn-right:hover {
background-position: -180px -120px;}

#tour .slides-nav .right-disabled,
#tour .slides-nav .right-disabled:hover {
background-position: -225px -120px;
cursor: default;}

/* --------------------------------------------- */
/* TOUR > SLIDESHOW > SCREENSHOT
/* --------------------------------------------- */
#tour img.screenshot  {
vertical-align: bottom;
padding: 1px;
border: 1px solid #e7e7e7;
margin-bottom: 75px;}

/* --------------------------------------------- */
/* TOUR > SLIDESHOW > KEY
/* --------------------------------------------- */
#tour .slides .key {
margin-bottom: 30px;
margin-top: -10px;
list-style-type: none;}

#tour .slides .key li {
margin-top: 20px;
padding: 0 0 20px 40px;
position: relative;
min-height: 35px;
height: auto !important;
height: 35px;
border-bottom: 1px solid #e4e4e4;}

#tour .slides .key .bullet {
background: url(/images/tour/ol-bullet.png) no-repeat;
display: block;
position: absolute;
left: 0;
top: 0;
width: 31px;
line-height: 31px;
color: #fff;
font-size: 1.2em;
text-align: center;}

/* --------------------------------------------- */
/* TOUR > SLIDESHOW > VIDEO TOUR
/* --------------------------------------------- */
#tour .slides .video-tour {
float: right;
border-left: 50px solid #fff;
border-bottom: 40px solid #fff;
position: relative;
z-index: 2;}

#tour .slides .frame {
background: #eee url(/images/tour/loading-vimeo.png) no-repeat center;
border: 1px solid #ddd;
padding: 10px;
width: 400px;
height: 300px;}