/*
Title: Miss Sophies - screen
Author:   Sean Gaffney, hello@seangaffney.cc
Version:  2009.09
*/

/* 
GENERAL STYLES ---------------------------- */

html {
	background: #5f5950 url('../images/bg-body.gif') repeat-x scroll top left;
}

body {
	color: #CECCC9;
/*	background: #565046 url('../images/bg-body.gif') repeat-x scroll top left;*/
}

hr {
	display: none;
}

p {
	line-height: 120%;
}	

a {
	color: #e5e19b;
	text-decoration: none;
}	

a:hover {
	color: #cbc798;
	text-decoration: none;
}

a img {
	border: none;
}

em {
	font-family: georgia, "Times New Roman", serif;
	font-style: italic;
}

.button, #contact_form input.button {
	display: block;
	margin: 15px 0 0;
	padding: 0 0 0 20px;
	background: url('../images/bg-button-arr.png') no-repeat scroll top left;
	width: 243px;
	height: 53px;
	color: #a5a39f;
	line-height: 53px;
	font-family: georgia, "Times New Roman", serif;
	font-size: 18px;
	font-style: italic;
	text-shadow: 0 1px 0 #34312c;
}

.button:hover, #contact_form input.button:hover {
	color: #fff;
}

.button:active, #contact_form input.button:active {
	position: relative;
	top: 1px;
}

button.button {
	margin: 0;
	padding: 0;
	background: none;
	width: auto;
	height: auto;
	color: #fff;
	line-height: auto;
	font-family: "helvetica neue", helvetica, arial, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	text-shadow: none;
	border: 0;
}

#contact_form input.button {
	padding: 0;
	background: url('../images/bg-button.png') no-repeat scroll top left;
	width: 98px;
}

input#max {
	background: url('../images/form-book.png') repeat scroll top left;
	width: 98px;
	height: 32px;
	text-indent: -9999px;
	border: 0;
	cursor: pointer;
}

.clear {
	clear: both;
}

/* 
WRAPPERS ---------------------------- */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#wrap {
	margin: 0 auto;
	width: 960px;
}

#bd {padding-bottom: 355px;}  /* must be same height as the footer */

#ft {
	position: relative;
	margin-top: -375px; /* negative value of footer height */
	background: #262626 url('../images/bg-ft.gif') repeat-x scroll top left;
	height: 375px;
	clear:both;
}

/*
HEADER ---------------------------- */

h1 {
	position: absolute;
	top: 79px;
	left: 4px;
	background: url('../images/logo.png') no-repeat scroll top left;
	width: 312px;
	height: 82px;
	text-indent: -9999px
}

h1 a {
	display: block;
	width: 312px;
	height: 82px;
}

#hd {
	padding: 0 10px;
	position: relative;
	height: 165px;
	z-index: 399;
}

#hd .menu {
	position: absolute;
	top: 39px;
	right: 10px;
	z-index: 499;
}

#hd .nav {
	float: left;
	width: 100%;
	border-left: 1px solid #5d5851;
}

#hd .nav > li {
	display: inline;
	float: left;
	position: relative;
	font-family: "Lucida Grande";
	text-transform: uppercase;
}

#hd .nav a {
	display: block;
	padding: 0 15px;
/*	height: 27px;*/
	color: #252525;
	line-height: 27px;
	border-right: 1px solid #5d5851;
}

#hd .nav a:hover {
	color: #fff;
	text-shadow: 0 1px 0 #605d59;
}

#hd .nav .selected a {
	background: transparent url('../images/bg-nav-selected.gif') repeat-x scroll top left;
	color: #fff;
	text-shadow: 0 1px 0 #605d59;
}

#hd .nav ul {
	padding-top: 1px;
	position: absolute;
	top: -9999em;
	left: -1px;
	background: #8d8a84;
	width: 14em;
	text-transform: none;
	border-right: 1px solid #2a2722;
	border-left: 1px solid #2a2722;
	border-bottom: 1px solid #2a2722;
}

#hd .nav ul a {
	color: #e6e6e6;
	line-height: 23px;
	border-right: 0;
}

#hd .nav li:hover {
	color: #e6e6e6;
	background: #8d8a84;
}

#hd .nav li:hover a {
	background: none;
	color: #e6e6e6;
}

#hd .nav li:hover a:hover {
	color: #fff;
}

#hd .nav li:hover ul {
	top: 27px;
}

#hd .nav ul li {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	z-index: 549;
}

#hd .nav ul li:hover {
	border-top: 1px solid #403e3c;
	border-bottom: 1px solid #999691;
	background: transparent url('../images/bg-nav-sub.png') repeat-x scroll top left;
}

#hd .nav ul li:hover a, #hd .nav .selected ul a {
	background: transparent;
	color: #fff;
}

#hd .map {
	position: absolute;
	top: 0;
	right: 10px;
	background: url('../images/map.png') no-repeat scroll top left;
	width: 140px;
	height: 39px;
	text-indent: -9999px;
	cursor: pointer;
}

#hd .flags {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0 0 5px;
/*	background: url('../images/sp-flags1.png') no-repeat scroll top left;*/
	width: 800px;
	height: 36px;
}

#hd .flags li {
	float: left;
}

#hd .flags a {
	display: block;
	padding: 0 6px;
	width: 22px;
	height: 36px;
	text-indent: -9999px;
}

#hd .flags li a.en {
	background: url('../images/sp-flags1.png') no-repeat scroll -5px 0px;	
}

#hd .flags li a.de {
	background: url('../images/sp-flags1.png') no-repeat scroll -39px 0px;	
}

#hd .flags li a.fr {
	background: url('../images/sp-flags1.png') no-repeat scroll -73px 0px;	
}

#hd .flags li a.es {
	background: url('../images/sp-flags1.png') no-repeat scroll -106px 0px;	
}

#hd .flags li a.pt {
	background: url('../images/sp-flags1.png') no-repeat scroll -140px 0px;	
}

#hd .flags li a.pl {
	background: url('../images/sp-flags1.png') no-repeat scroll -174px 0px;	
}

#hd .flags li a.ru {
	background: url('../images/sp-flags1.png') no-repeat scroll -208px 0px;	
}

#hd .flags li a.jp {
	background: url('../images/sp-flags1.png') no-repeat scroll -242px 0px;	
}

#hd .flags li a.cn {
	background: url('../images/sp-flags1.png') no-repeat scroll -276px 0px;	
}

#hd .flags .selected a.en, #hd .flags li:hover a.en {
	background: url('../images/sp-flags1.png') no-repeat scroll -5px -36px;	
}

#hd .flags .selected a.de, #hd .flags li:hover a.de {
	background: url('../images/sp-flags1.png') no-repeat scroll -39px -36px;	
}

#hd .flags .selected a.fr, #hd .flags li:hover a.fr {
	background: url('../images/sp-flags1.png') no-repeat scroll -73px -36px;	
}

#hd .flags .selected a.es, #hd .flags li:hover a.es {
	background: url('../images/sp-flags1.png') no-repeat scroll -106px -36px;	
}

#hd .flags .selected a.pt, #hd .flags li:hover a.pt {
	background: url('../images/sp-flags1.png') no-repeat scroll -140px -36px;	
}

#hd .flags .selected a.pl, #hd .flags li:hover a.pl {
	background: url('../images/sp-flags1.png') no-repeat scroll -174px -36px;	
}

#hd .flags .selected a.ru, #hd .flags li:hover a.ru {
	background: url('../images/sp-flags1.png') no-repeat scroll -208px -36px;	
}

#hd .flags .selected a.jp, #hd .flags li:hover a.jp {
	background: url('../images/sp-flags1.png') no-repeat scroll -242px -36px;	
}

#hd .flags .selected a.cn, #hd .flags li:hover a.cn {
	background: url('../images/sp-flags1.png') no-repeat scroll -276px -36px;	
}

#hd .weather {
	position: absolute;
	top: 5px;
	right: 150px;
	width: 162px;
	height: 34px;
	text-transform: uppercase;
}

#hd .weather p, #hd .weather img, #hd .weather span {
	float: left;
}

#hd .weather p {
	margin: 0 8px 0 0;
	color: #eee;
	font-size: 108%;
	line-height: 0.9em;
}

#hd .weather span {
	margin: 0 0 0 8px;
	color: #848484;
	font-size: 138.5%;
}

/*
BODY ---------------------------- */

#bd {
	position: relative;
	padding-right: 10px;
	padding-left: 10px;
}

body.rooms #sidebar p, body.rooms #sub-content p,
body.rooms #sidebar li, body.rooms #sub-content li,
body.page #sidebar p, body.page #sub-content p,
body.page #sidebar li, body.page #sub-content li {
	color: #cfcecb;
	font-size: 108%;
	line-height: 1.2857em;
}

#content {
	background: url('../images/bg-page-vertline.gif') repeat-y scroll 300px 0;
	width: 940px;
}

#sub-content {
	float: right;
	padding: 20px 20px 50px 0;
	width: 595px;
}

body.home #content {
	background-image: none;
}

body.home #sub-content {
	float: none;
	padding: 0;
	background: url('../images/bg-lines.gif') repeat-y scroll 390px 0;
	border: 0;
	width: 940px;
}

body.rooms #sub-content {
	border-top: 1px solid #676158;
}

.home .news, .home .testimonials, .home .connect {
	float: left;
	width: 391px;
}

.home .testimonials {
	width: 320px;
}

.home .connect {
	width: 229px;
}

.news h3, .testimonials h3, .connect h3 {
	padding: 0 0 0 14px;
	color: #d9d8d6 !important;
	background: url('../images/sp-threecol.png') no-repeat scroll top left;
	font-family: georgia, "Times New Roman", serif;
	font-size: 20px !important;
	font-style: italic;
	line-height: 48px !important;
}

.testimonials h3 {
	background-position: -391px 0;
}

.connect h3 {
	background-position: -711px 0;
}

.news ul, .testimonials ul {
	margin: 0 1px 0 0;
}

.testimonials ul {
	padding: 12px 0 0;
}

.news h4, .testimonials h4, .connect h4 {
	color: #ccc89a;
	font-family: georgia, "Times New Roman", serif;
	font-size: 14px;
	font-style: italic;
}

.home .new li {
	background: url('../images/bg-darkcorner.jpg') no-repeat scroll bottom right;
}

.news li {
	padding: 30px 42px 20px 15px;
	border-bottom: 1px solid #4c463e;
}

.news h4 {
	margin: 0 0 5px;
}

.news p {
	font-size: 93%;
	line-height: 1.4166667em;
/*	color: #fff;*/
}

.news .more {
	background: none;
}

.testimonials li {
	padding: 15px 20px 20px 15px;
	border-bottom: 1px solid #4f4b42;
}

.testimonials p {
	margin: 0 0 12px;
	color: #ceccc9;
	font-size: 108%;
	line-height: 1.2857em;
}

.testimonials h3 {
	position: relative;
}

.testimonials span.arrow {
	display: block;
	position: absolute;
	top: 48px;
	left: 15px;
	height: 0px; 
	width: 0px;
	border-left: 14px solid #454038; 
	border-bottom: 18px solid #5b564c;
}

.testimonials em {
	display: block;
	color: #868363;
	font-family: "helvetica neue",helvetica,arial,clean,sans-serif;
	font-size: 93%;
	font-style: normal;
}

.news .more, .testimonials .more, .connect .more {
	border: 0;
}

.news .more p {
	margin: -15px 0 0;
}

.more p {
	font-family: georgia, "Times New Roman", serif;
	font-size: 14px;
	font-style: italic;
}

.more a {
	color: #908b85;
}

.connect .social {
	margin: 30px 0 0 16px;
	display: inline;
}

#overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	height: 100%;
	width: 100%;
/*	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);*/
	z-index: 589;
}

#map {
	display: none;
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -30px;
	padding: 5px;
	background: url('../images/drop.png') no-repeat scroll top left;
	width: 500px;
	height: 249px;
	z-index: 599;
}

#map a {
	padding: 10px 0 5px;
	color: #323232;
	font-weight: bold;
}

#map a:hover {
	color: #7d7d7d;
}

#map .pdf {
	float: left;
	padding-left: 44px;
	background: url('../images/bg-pdf.gif') no-repeat scroll 10px 3px;
}

#map .arrow {
	float: right;
	margin-right: 10px;
}

#map .arrow span {
	float: right;
	margin: 1px 0 0 6px;
	height: 0;
	width: 0;
	border: 7px solid transparent;
	border-left: 7px solid #323232;
/*	border-bottom: 5px solid #323232;*/
}

#map .arrow:hover span {
	border-left: 7px solid #7d7d7d;
}

#sub-content p {
	margin-bottom: 1em;
	line-height: 1.5em;
}

#sub-content.gallery {
	padding-right: 0;
	width: 615px;
}

.gallery a {
	float: left;
	margin: 0 15px 12px 0;
}

.gallery a.last {
	margin-right: 0;
}

.gallery a img {
	border: 1px solid #555047;
}

.gallery p a {
	float: none;
	margin: 0;
}

/*
SIDEBAR ---------------------------- */

#sidebar {
	float: left;
	margin: 57px 0 0;
	padding: 0 0 100px;
	width: 300px;
}

#sidebar .wrap {
	padding: 0 14px;
}

.page-menu {
	padding: 24px 0;
	background: url('../images/bg-pagemenu.jpg') repeat-y scroll top left;
	width: 300px;
}

.page-menu li {
	padding: 0 0 0 14px;
	width: 262px;
	height: 34px;
	line-height: 34px !important;
	text-transform: uppercase;
}

.page-menu li.selected {
	background: url('../images/bg-pagemenu-selected.png') no-repeat scroll top left;
}

.page-menu a {
	color: #CECCC9;
}

.page-menu a:hover {
	color: #fff;
}

.page-menu .selected, .page-menu .selected a {
	color: #323232;
	text-shadow: 0 1px 0 #fff;
}

.hr-fade {
	padding: 0 0 20px;
	background: url('../images/bg-hrfade.jpg') no-repeat scroll top left;
	width: 300px;
	height: 2px;
}

.hr {
	background: url('../images/bg-hr.gif') repeat-x scroll 0 25px;
	height: 47px;
}

#sub-content .hr {
	background-position: 0 12px;
	height: 32px;
}

#sidebar h3, #sub-content h2, #sub-content h3 {
	color: #d5d1a7;
	font-family: georgia, "Times New Roman", serif;
	font-size: 16px;
	font-style: italic;
	line-height: 2.1875em;
}

#sub-content h2 {
	font-size: 22px;
	line-height: 1.5em;
}

/*
FOOTER ---------------------------- */

#ft {
	position: relative;
}

#ft h4 a, #ft h4 {
	color: #a8a8a8;
}

#ft h4 a:hover {
	color: #fff;
}

#ft a {
	color: #59544d;
}

#ft a:hover {
	color: #988e7d;
}

#ft .bg {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url('../images/bg-ft2.png') no-repeat scroll 50% 0;
	width: 100%;
	height: 245px;
}

#ft .wrap {
	position: relative;
	top: 18px;
	margin: 0 auto;
	padding: 0 0 0 15px;
	width: 925px;
}

#ft ul.nav {
	float: left;
	width: 118px;
	font-size: 93%;
	line-height: 1.41666667;
}

.social {
	float: left;
	margin: 0 0 0 7px;
	font-family: georgia, "Times New Roman", serif;
	font-size: 16px;
	font-style: italic;
	color: #cbc798;
}

.social .skype a {
	display: block;
	margin: 0 0 42px;
	padding: 0 0 0 43px;
	background: transparent url('../images/bg-skype.png') no-repeat scroll top left;
	width: 165px;
	height: 42px;
	color: #5d574c !important;
	line-height: 42px;
	font-size: 18px;
	text-shadow: 0 1px 0 #adab95;
}

.social .skype a:hover {
	background-position: bottom left;
}

.social h4 {
	margin: 0 0 15px;
}

.social .twitter, .social .facebook, .social .tadvisor, .social .letsgo, .social .flickr {
	float: left;
}

.social .flickr {
	clear: both;
	margin: 12px 0 0;
}

.social .twitter a, .social .facebook a {
	display: block;
	background: url('../images/sp-social.png') no-repeat scroll top left;
	width: 82px;
	height: 20px;
	text-indent: -9999px;
}

.social .facebook a, .social .letsgo a {
	margin: 0 0 0 27px;
	background-position: top right;
	width: 95px;
}

.social .tadvisor a, .social .letsgo a {
	display: block;
	background: url('../images/bg-travel.png') no-repeat scroll top left;
	width: 94px;
	height: 25px;
	text-indent: -9999px;
}

.social .letsgo a {
	margin: 0 0 0 27px;
	background-position: top right;
	width: 85px;
}

.social .flickr a {
	display: block;
	background: url('../images/sp-flickr.png') no-repeat scroll top left;
	width: 82px;
	height: 23px;
	text-indent: -9999px;
}

.social .twitter a:hover, .social .tadvisor a:hover, .social .flickr a:hover {
	background-position: bottom left;
}

.social .facebook a:hover, .social .letsgo a:hover {
	background-position: bottom right;
} 

.social .title2 {
	clear: both;
	padding: 25px 0 0;
}

ul#share {
	clear: both;
	margin: 50px 0 0 -24px;
	padding: 10px 0 0 262px;
	background: url('../images/bg-share.jpg') no-repeat scroll top left;
	width: 403px;
	height: 36px;
}

ul#share li {
	float: left;
	display: inline;
	
}

ul#share li a {
	display: block;
	height: 20px;
	text-indent: -9999px;
}

ul#share li.print a {
	margin-right: 18px;
	width: 19px;
}

ul#share li.email a {
	margin-right: 20px;
	width: 21px;
}

ul#share li.twitter a, ul#share li.facebook a {
	margin-right: 19px;
	width: 20px;
}

/*
BORDERS AND SHADOWS ---------------------------- */

#feature {
	height: 321px;
}

#feature .item {
	position: absolute;
	width: 940px;
}

#rooms {
	height: 451px;
}

#rooms .item {
	position: absolute;
	width: 640px;
}

.sh {
	position: relative;
	width: 940px;
}

#rooms.sh {
	float: right;
	width: 640px;
	border-bottom: 1px solid #4C483F;
}

.sh img {
	position: relative;
	margin: 0 0 20px;
}

.sh .bd940 {
	position: absolute;
	top: 0;
	left: 0;
	border: #000 solid 7px;
	width: 926px;
	height: 284px;
	opacity: 0.21;
	-moz-opacity: 0.21;
	filter:alpha(opacity=21);
}

.sh .bd640 {
	position: absolute;
	top: 0;
	left: 0;
	border: #000 solid 7px;
	width: 626px;
	height: 414px;
	opacity: 0.21;
	-moz-opacity: 0.21;
	filter:alpha(opacity=21);
}

.sh940 {
	position: absolute;
	top: -18px;
	left: -20px;
	background: url('../images/sh-940x298.png') no-repeat scroll top left;
	width: 980px;
	height: 338px;
}

.sh640 {
	position: absolute;
	top: -8px;
	left: -8px;
	background: url('../images/sh-640x428.png') no-repeat scroll top left;
	width: 656px;
	height: 444px;
}

.sh .wordbox {
	position: absolute;
	top: -1px;
	left: 30px;
	padding: 20px;
	width: 230px;
	height: 260px;
	background: #000;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
}

.sh .wordbox h3 {
	margin: 0 0 15px;
	color: #cfcba0;
	font-family: georgia, "Times New Roman", serif;
	font-size: 30px;
	font-style: italic;
}

.sh .wordbox p {
	font-size: 93%;
	line-height: 1.5833333em;
}

.sh .wordbox a.more {
	display: block;
	margin: 15px 0 0;
	color: #cfcba0;
	font-family: georgia, "Times New Roman", serif;
	font-size: 93%;
	font-style: italic;
}

#thumbs {
	position: absolute;
	top: 299px;
	right: 0;
	width: 100%;
	height: 22px;
}

#rooms #thumbs {
	top: 429px;
}

#thumbs img {
	left: -582px;
	position:absolute;
	top: -299px;
}

#thumbs ul {
	position: absolute;
	right: 124px;
	padding: 6px 0 0;
}

#rooms #thumbs ul {
	right: 20px;
}

#thumbs li {
	float: left;
	margin: 0 7px 0 0;
	border-bottom: 1px solid #666156;
}

#thumbs a.thumb {
	display: block;
	width: 17px;
	height: 8px;
	background: transparent;
	border: 1px solid #403b34;
}

#thumbs li.selected {
	border-bottom: 1px solid transparent;
}

#thumbs li.selected a.thumb {
	border: 1px solid #9d986c;
}

.view-rooms {
	display: block;
	position: absolute;
	top: 2px;
	right: 0;
	color: #23211d;
	font-family: georgia, "Times New Roman", serif;
	font-style: italic;
	text-shadow: 0 1px 0 #7a756c;
}

#controls {
	position: absolute;
	top: 0;
	right: 103px;
}

#controls .play, #controls .pause {
	display: block;
	height: 22px;
	width: 21px;
	background: url('../images/sp-playpause.png') no-repeat scroll top left;
	text-indent: -9999px;
}

#controls .play {
	background-position: top right;
}

#rooms #controls {
	right: 0px;
}

#rooms .view-rooms {
	left: 10px;
	right: auto;
}

/* 
P.I.E. FLOAT CLEARING ----------------------------
See http://www.positioniseverything.net/easyclearing.html
and http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
*/

.clear {
	clear: both;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*
FORMS ---------------------------- */

#book {
	position: absolute;
	top: 100px;
	right: 10px;
	z-index: 99;
}

#book form {
	height: 31px;
}

#book form span {
	float: left;
	display: block;
	background: url('../images/form-left.png') repeat scroll top left;
	width: 3px;
	height: 31px;
}

#book form label {
	padding: 0 7px;
	color: #443f38;
	height: 31px;
	font-family: georgia, "Times New Roman", serif;
	font-size: 14px;
	font-style: italic;
	line-height: 31px;
}

form .arrival, form .nights, form .guests {
	float: left;
	padding: 0 7px 0 0;
	background: url('../images/form-bg.png') repeat-x scroll top left;
	height: 31px;
}

form .arrival {
	border-right: 1px solid #979694;
}

form .nights {
	border-right: 1px solid #979694;
	border-left: 1px solid #d1d0ce;
}

form .guests {
	border-left: 1px solid #d1d0ce;
}

#book form button {
	float: left;
	background: url('../images/form-book.png') repeat scroll top left;
	width: 98px;
	height: 32px;
	text-indent: -9999px;
}

#contact_form label, #contact_form br {
	display: none;
}

#contact_form .input {
	padding: 0 0 4px;
	width: 621px;
	background: url('../images/bg-input-b.png') repeat scroll bottom left;
}

#contact_form input, #contact_form textarea {
	padding: 10px 10px 6px 10px;
	width: 601px;
	border: 0;
	background: url('../images/bg-input.png') repeat scroll top left;
	font-size: 108%;
	color: #59544D;
}

#contact_form textarea {
	line-height: 1.4em;
}

#contact_form input.button {
	float: right;
}

/*
MISCELLANY ---------------------------- */

p.fourohfour {
	color: #494744;
	font-family: georgia, "Times New Roman", serif;
	font-size: 138px;
	font-style: italic;
}

#sub-content.fourohfour {
	border: 0;
}

#sub-content.fourohfour p {
	font-family: georgia, "Times New Roman", serif;
	font-size: 18px;
	font-style: italic;
	line-height: 20px;
}

.close {
	position: absolute;
	top: 2px;
	right: 12px;
	color: #7e7e7e;
	font-size: 20px;
}

/*
SHADOWBOX ---------------------------- */;

/*_____________________________________________  container, overlay, & wrapper  */
#sb-container, #sb-wrapper {
  text-align: left; /* reset left alignment */
}
#sb-container, #sb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
#sb-container {
  height: 100%;
  display: none;
  visibility: hidden;
  z-index: 899;
}
body > #sb-container {
  /* use position:fixed in modern browsers */
  position: fixed;
}
#sb-overlay {
  /* needed in IE6 where sb-container uses position:absolute */
  height: expression(document.documentElement.clientHeight + 'px');
}
#sb-container > #sb-overlay {
  /* use for sb-container position:fixed */
  height: 100%;
}

/*_________________________________________________________________  wrapper  */
#sb-wrapper {
  position: relative;
}
#sb-wrapper img {
  border: none;
}

/*____________________________________________________________________  body  */
#sb-body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 5px solid #585147;
}
#sb-body-inner {
  position: relative;
  height: 100%;
}
#sb-content.html {
  height: 100%;
  overflow: auto; /* make html content scrollable */
}

/*_________________________________________________________________  loading  */
#sb-loading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 10px;
}
#sb-body, #sb-loading {
  background-color: #5f5950; /* should match loading image background color */
}

/*____________________________________________________________  title & info  */
#sb-title, #sb-info {
  position: relative;
  margin: 0; /* these must have no vertical margin or padding */
  padding: 0;
  overflow: hidden;
}
#sb-title-inner, #sb-info-inner {
  position: relative;
  font-family: 'Lucida Grande', Tahoma, sans-serif;
  line-height: 16px;
}
#sb-title, #sb-title-inner {
  height: 26px;
}
#sb-title-inner {
  font-size: 16px;
  padding: 5px 0;
  color: #fff;
}
#sb-info, #sb-info-inner {
  height: 20px;
}
#sb-info-inner {
  font-size: 12px;
  color: #fff;
}

/*_____________________________________________________________________  nav  */
#sb-nav {
  float: right;
  height: 16px;
  padding: 2px 0;
  width: 45%;
}
#sb-nav a {
  display: block;
  float: right;
  height: 16px;
  width: 16px;
  margin-left: 3px;
  cursor: pointer;
}
#sb-nav-close {
  background-image: url('../images/resources/close.png');
  background-repeat: no-repeat;
}
#sb-nav-next {
  background-image: url('../images/resources/next.png');
  background-repeat: no-repeat;
}
#sb-nav-previous {
  background-image: url('../images/resources/previous.png');
  background-repeat: no-repeat;
}
#sb-nav-play {
  background-image: url('../images/resources/play.png');
  background-repeat: no-repeat;
}
#sb-nav-pause {
  background-image: url('../images/resources/pause.png');
  background-repeat: no-repeat;
}

/*_________________________________________________________________  counter  */
#sb-counter {
  float: left;
  padding: 2px 0;
  width: 45%;
}
#sb-counter a {
  padding: 0 4px 0 0;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}
#sb-counter a.sb-counter-current {
  text-decoration: underline;
}

/*________________________________________________________________  messages  */
div.sb-message {
  font-family: 'Lucida Grande', Tahoma, sans-serif;
  font-size: 12px;
  padding: 10px;
  text-align: center;
}
div.sb-message a:link, div.sb-message a:visited {
  color: #fff;
  text-decoration: underline;
}