/* CSS Document */

/* Normalisation */
/* ------------------------------------------------------------------------ */

/* Normalises margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
{ margin : 0; padding : 0; }

/* Normalises font-size for headers */
h1, h2, h3, h4, h5, h6 
{ font-size : 100%; }

/* Remove list styles from lists */
ol, ul
{ list-style : none; }

/* Normalises font style and font weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Remove borders and spacing from tables */
table
{ border-collapse : collapse ; border-spacing : 0; }

/* Remove borders from field set and img */
fieldset, img
{ border :0; }

/* Left aligns text in caption and table headers */
caption, th
{ text-align : left; }

/* Remove quotation marks from quote */
q:before, q-after
{ content : ''; }

/* Firefox Dotted Outline Fix */
	a:active { 
		outline: none; 
	}
	
	/* Firefox Dotted Outline Fix */
	a:focus { 
		-moz-outline-style: none; 
	}


/* ------------------------------------------------------------------------ */
body {
	background:#000030;
	color: white;
	margin: 0;
	padding: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 85%;
}
p {
	margin: 5px 0;
}
h1 {font-size:1.8em; }
h2 {font-size:1.5em; }
h3 {font-size:1.4em; }
h4 {font-size:1.3em; }
h1,h2,h3 {font-weight:normal; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }

/* BRANDING */
#branding{
	width: 100%;
	margin: 0;
	height: 65px;
	border-bottom: 2px solid white;
	color:white;
	background:#000030 url(images/bg_gradient.jpg) repeat-y 100% 0;
	min-width: 1200px;
}
#branding h1 {
	background: transparent url(images/atholl.png) no-repeat 0 0;
	height: 110px;
	width: 796px;
	text-indent: -1000px;
	position:absolute;
	top: 0px;
	left: 0px;
	z-index: 10000;
}
#clickme {
	position:absolute;
	z-index: 10100;
	top: 0px;
	left: 0px;
	height: 100px;
	width: 320px;
	cursor:pointer;
	display:block;
}
#clickme #logo { display: none;}

/* NAVIGATION */
#navigation {
	position:relative;
	float:left;
	margin: 0 5px 50px 0px;
	text-transform: uppercase;
	font-size: 1.2em;
	width: 300px;
	overflow:hidden;
	letter-spacing: 1px;
	line-height: 1.5;
	z-index: 500;
	color: #333;
	padding-top: 50px;
	background: transparent url(images/bg_nav.png) no-repeat 0 0;
}
#navigation li {
	margin: 5px 0;
}
#navigation li a {
	display:block; 
	padding-left: 15px;
	color:inherit;
	text-decoration:none;
	border-bottom: 1px dotted silver;
}
#navigation li.first_el {
	position:relative;
}
#navigation li.first_el span {
	background: url(images/blue.gif) repeat;
	position:absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 25px;
	z-index: 1;
	width: 0;
}
#navigation li.first_el a.first_lin{
	border-bottom-style: solid;
	background: transparent url(images/alpha_white65.png) repeat;
	height: 25px;
	z-index: 1000;
	position:relative;
}
#navigation li.first_el:hover a.first_lin{
	color:white;
	background:none;/*#000030;*/
}

#navigation li ul {
	background: transparent url(images/alpha_white40.png) repeat;
	padding: 0;
	border: 1px solid #000030;
	border-width: 1px 0;
	display:none;
}
#navigation li ul li ul {
	border-color: #ccc;
}
#navigation li ul li{
	margin: 0;
}
#navigation li ul li a{
	padding: 2px 0px 2px 30px;
	font-size: 90%;
	color: #555;
	background: transparent url(images/alpha_white65.png) repeat;
}
#navigation li ul li ul li a{
	padding-left: 50px;
	font-size: 80%;
}
#navigation li ul li a:hover {
	background: none;
	color:#000030;
}

/* CONTENT */
#content {
	width: 100%;
	height: 450px;
	position:relative;
	padding-bottom: 150px;
	background:#000030 url(images/bg_gradient.jpg) repeat-y 100% 0;
	min-width: 1200px;
}
#picture {
	background: url(images/atholl_big.jpg) no-repeat 0 0;
	width: 700px;
	height: 450px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
	padding:0px;
}
#picture img{
	position:absolute;
	display:none;
	z-index:2;
	left: 0px;
	top: 0px;
}
#picture #loading {
	background: url(images/ajax-loader.gif) no-repeat 50% 50%;
	width: 550px; height: 100px;
	padding-top: 250px;
	display:block;
	position:absolute; top: 0px; left: 0px;
	z-index:4;
	color: #000030;
	text-align:center;
} 
#image_description {
	position:absolute;
	left: 0px; bottom: 0px; padding: 15px;
	background: url(images/transparent.png) repeat-y 100% 0;
	width: 100%;
	z-index:3;
	color: #333;
	height: 25px;
	text-transform: uppercase;
	display:none;
}
#content-main {
	position: absolute;
	right: 0;
	left:555px;
	height: 450px;
	padding: 0px;
	z-index: 950;
	background: transparent url(images/alpha_white40.png) repeat;
	color: #000030;
	border-left: 1px solid white;
	display: none;	
}
/* My sections */
#content #features{
	height: 410px;
	padding: 30px 20px 10px 10px;
	position:absolute;
	right: 0px;
	left: 700px;
	min-width:250px;
	z-index: 948;
	background: transparent url(images/alpha_white40.png) repeat;
	color: #e6e6e6;
	border-left: 1px solid white;
}
#content #features ul {
	margin: 10px 0;
	margin-left: 15px;
}
#content #features ul li {
	font-size: 1.2em;
	display: list-item;
	list-style-type:disc;
	list-style-position: outside;
	padding: 3px 0;
}
#content-main .standard{
	display:none;
	position: absolute;
	left: 0px;
	top: 0px;
	overflow:auto;
}

#content-main div.standard {
	width: 500px;
	height: 410px;
	padding: 30px 20px 10px 10px;
	z-index: 1000;
	background: transparent url(images/bg_gradient_t.png) repeat-y 0 0;
	border-right: 1px solid #fff;
	overflow:hidden;
}

/* end of sections */
#content-main div p, #overlay p{
	margin: 8px 0;
}
#content #features p {
	width: 400px;
}
.photoscroll {
	position:absolute;
	left: 1086px;
	width: 100px;
	height: 440px;
	border-right: 1px solid white; border-left: 1px solid white;
	background:url(images/alpha_white40.png) repeat;
	z-index: 999;
	overflow:hidden;
	display:none;
}
.photoscroll .thumbs {
	position:absolute; 
 
    /* this time we have very large space for the height */ 
    height:20000em; 
}
.photoscroll .thumbs img{
	width: 100px; height:59px; opacity: 0.5; margin: 2px 0 0 0; cursor:pointer;
}
.photoscroll .thumbs img:hover, .photoscroll .thumbs img.shown { opacity:1;}
.photoscroll .thumbs img.shown { outline: 1px solid white; cursor:default;}

/* Rooms = special section! */
#content-main ul#room_nav {
	position:absolute;
	right: 0px;
	top: 0;
	bottom: 0;
	width: 145px;
	text-align:center;
	height: 450px; overflow:hidden;
	border-left: 1px solid white;	
}
#content-main ul#room_nav li {
	display: block;
	margin: 2px 0;
	background:url(images/alpha_white40.png) repeat;
	height: 34px;
	padding-top: 25px;
}
#content-main ul#room_nav li:hover {
	background-color: #000030; cursor:pointer;
}
#content-main ul#room_nav li.active {
	background-color: #000030;
	opacity: 0.4;
}
#content-main ul#room_nav li.active:hover{ cursor:default;}
#content-main ul#room_nav li.defunct:hover {
	cursor:default;
	background-color:transparent;
}
#content-main .roomarea{
	position: absolute;
	width: 360px;
	padding-top: 30px;
	height: 420px;
	top: 0px; left: 10px;
	display:none;
}
#content-main .activate{
	display:block;
}
h3.accessible {
	display:block; background: transparent url(images/symbol-mobility-small.gif) no-repeat 100% 100%; padding-top: 20px; margin-top: -20px;
}
/* CONTENT-EXTRA */
#content-extra {
	width: 100%;
	min-width: 1200px;
	margin: 0;
	padding: 0;
	height: auto;
	position: absolute;
	bottom: 0px;
	background:#000030 url(images/bg_gradient.jpg) repeat-y 100% 0;
	border-top: 2px solid white;
	border-bottom: 1px solid white;
	z-index: 1100;
}
/* language chooser */
ul#language {
	position:absolute; left: 555px; 
	height: 28px;
	width: 144px;
	top: 498px;
	overflow:hidden;
	border-right: 1px solid white; border-left: 1px solid white;
	z-index: 25000;
	font-size: 80%; text-transform: uppercase;
	background-color:#000030;
}
ul#language:hover { height:auto; border-right: 1px solid white;}
ul#language li { height: 28px; display:block;border-bottom: 1px solid white; padding-left:43px; }
ul#language li.mylanguage {}
ul#language li#en {
	background: url(images/flag-british.gif) no-repeat 2px 1px;
}
ul#language li#fr {
	background: url(images/flag-french.gif) no-repeat 2px 1px;
}
ul#language li#it {
	background: url(images/flag-italian.gif) no-repeat 2px 1px;
}
ul#language li a{
	display:block; line-height:28px; height:28px; color:inherit;
	padding-left:3px;
}
ul#language li a:hover { background: #6699CC; cursor:pointer;}
ul#language li.mylanguage a {
	background: url(images/down-arrow.gif) no-repeat 99% 0%; margin-top: 1px;
}
ul#language li.mylanguage a:hover { text-decoration:none;}

/* navigation for the panes / tabs */
#nav {
	height:30px;	
	width:745px;
}

#nav ul {	
	width:600px;
	margin:0 25px;	
}

#nav li {
	background:#000030;
	border-right:1px solid #ddd;
	float:left;
	padding-left:1px;
	width:175px;
	list-style-type:none;
	text-align:center;
}

#nav a {
	color:#ccc;
	text-transform: uppercase;
	display:block;
	padding:10px;
	position:relative;
	word-spacing:-2px;
	height:122px;
	text-decoration:none;
}	

#nav a.current {
	background: url(images/bg_gradient_t2.png) repeat-y 80% 0;
	color:#000030;
	font-size: 120%;
}
#nav a:hover {
	background: url(images/bg_gradient_t2.png) repeat-y 30% 0;
}

#nav strong {
	display:block;		
	font-size:13px;
}
.mini-arrow{
	padding-left: 17px;
	background: url(images/15sq-arrow.gif) no-repeat 0 50%;
}
.mini-arrow:hover {
	background-image: url(images/15sq-arrow-over.gif);
}
.external{
	color:black; font-weight: bold;
}
/* panes */
#panes {
	/*background:#fff url(http://static.flowplayer.org/img/global/gradient/h300_reverse.png) repeat scroll 0 0;*/
	background: url(images/bg_gradient_t2.png) repeat-y 0 0;
	width:950px;	
	height:120px;
	margin-top:-2px;
	padding-top:20px;
	
	/* must be relative so the individual panes can be absolutely positioned */
	position:relative;
}

/* crossfading effect needs absolute positioning from the elements */
#panes div {
	display:none;	
	position:absolute;
	top:20px;
	left:20px;
	font-size:14px;
	color:#444;	
	width:900px; 
}

#panes img {
	float:left;
	margin-right:20px;
	margin-left: 5px;
	outline: 1px solid #000030;
	padding: 2px;
	background-color: white;		
}

#panes p, #panes ul, #panes a{
	color:#fff;
	font-size: 95%;
}
#panes p.more  {
	color:silver;
	font-size: 100%;
}

#panes h3 {
	margin:0 0 -5px 0;
	font-weight:normal;
	color:white;
}
/* overlay */
#overlay, #overlay_acocks, .overlaybox {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 430px;
	overflow:hidden;
	min-width:1200px;
	border: 1px solid #000030;
	border-width: 2px 0;
	border-bottom-color:silver;
	margin: -6px 0 0 0; padding: 0;
	background: #000030 url(images/alpha_white65.png) repeat;
	z-index: 1050;
	display:none;
}
#overlay div.close, .overlaybox div.close, #overlay_acocks div.close { 
    background:#000030 url(images/close.jpg) no-repeat 0 0; 
    position:absolute; bottom:0px; left:0px; right: 0px; 
    cursor:pointer; 
    height:30px;
    border-top: 1px solid #fff; border-bottom: 1px solid #666;
    z-index: 10500;
}
#overlay div.close:hover, .overlaybox div.close:hover, #overlay_acocks div.close:hover{
	background-image: url(images/close-over.jpg)
}
#overlay #directions, .overlaybox .sub, #overlay_acocks .sub{
	width: 500px;
	height: 410px;
	padding: 20px 20px 10px 10px;
	background: transparent url(images/bg_gradient_t.png) repeat-y 0 0;
	border-right: 1px solid #fff;
	float:left;
	color:#000030;
}
#overlay img.big .overlaybox img.big, #overlay_acocks img.big {
	margin: 0px;
	width: 555px;
	border-left: 1px solid white;
	float: left;
}
#overlay #map_canvas{ 
	height: 430px; 
	width: 555px; 
	float:left;
	margin:0;
	border-left: 1px solid white;
}
#about_scroll {
/* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 531px; 
    height:425px;
}
#about_scroll div.scroll_items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:transparent url(images/next.png) no-repeat 0 0;
	display:block;
	overflow:hidden;
	width:35px;
	padding: 0px;
	height:427px;
	position: absolute;
	top: 0;
	z-index: 10000;
	margin:0;
	cursor:pointer;
	text-indent: -10000px;
}

/* right */
a.right 				{ left: 1086px; border-right: 1px solid white; width: 60px;}
a.right:hover 		{ background-color:#000030;; }
a.right:active 	{ } 


/* left */
a.left				{ background:transparent url(images/prev.png) no-repeat 0 0; left: 519px; border-left: 1px solid white; border-right: 1px solid white; } 
a.left:hover  		{  background-color:#000030; }
a.left:active  	{ }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* Contact Form Accordion */
#contactform {
	position: relative; height: 85px; overflow:hidden; margin: 8px 0 0 0; padding:0; width: 510px; border: 1px solid silver; background:transparent url(images/alpha_white40.png) repeat;
}

#contactform fieldset{
	width: 354px; height: 85px; position:relative; float:left;
}

#contactform img {
	margin: 0; padding: 0;
}
#contactform .buttonimage img {
	opacity: 0.5;
}
#contactform .active img, #contactform .linkableclick:hover img {
	opacity: 1;
}
#contactform .buttonimage {
	height: 85px; border: 1px solid white; border-width: 0 1px; position:relative; float: left; background: silver;
}
#contactform .active {
	background: #000030;
}
#contactform .error{
	color: #b31e01;
	border-color: red;
}
#contactform .linkableclick {
	cursor: pointer;
}
#contactform .linkableclick:hover{
	background:#000030;
}
#contactform .reset:hover {
	background-color: #003b00;
}
#contactform .errored {
	background: #76060d;
	color: white;
}
#contactform fieldset label {
	font-size: 85%; width: 110px; float: left; clear: left; text-align:right; margin: 2px 0; margin-right: 10px; padding-left: 5px; 
}
#contactform fieldset input {
	width: 120px; float: left; margin: 2px 0;
}
/* LEGAL */
#legal {
	padding: 10px 20px;
	font-size: 90%;
}
#legal-nav {
	border-color: #61769d;
	margin-bottom: 20px; color: #61769d; border-bottom: 1px solid; border-right: 1px solid;
}
#legal-nav li{
	padding: 0 5px;
	border-left: 1px solid #61769d;
	display: inline;
}
#legal a{ color: #61769d;}

/* ----------- MAPS ----------- */
/* ------------------------------------------------------------------------ */
/* Google maps styling */
#map_canvas {
	position : relative;
	left : 0;
	text-align : center;
	height : 500px;
	width : 500px;
	background-color : #FFFFFF;
	border : 1px solid gray;
	top : 3px;
	float: left;
	color:#333;
}
#map2_canvas {
	position : relative;
	top : 5px;
	left : 0;
	text-align : center;
	height : 200px;
	width : 500px;
	background-color : #FFFFFF;
	border : 1px solid #000030;
	margin-bottom : 10px;
	float: left;
	clear: left;
	color:#333;
}
#sideBarMap {
	position : relative;
	float:left;
	margin: 0;
	margin-left: 10px;
	width : 600px;
	padding: 15px;
	color: #333;
}
#sideBarMap p { margin: 10px 0;}
#directions {
	width : auto;
	margin : 0 auto;
	height : auto;
	padding-left : 5px;
	padding-right : 5px;
	background-color: #FFFFFF;
	border : 1px dotted gray;
	padding : 1em;
	margin-bottom : 0.5em;
}
#directions p{ font-size : 75%; display : inline; }
ul#directionsForm li{ display : inline; padding : 2px; }
ul#directionsForm li#clearDir, ul#directionsForm li#from{ display : block; }
ul#directionsForm li#clearDir{
	text-align : right;
	border-top : 1px solid gray;
	border-bottom : 1px solid gray;
	margin-top : 2px;
	margin-bottom : 2px;
}
form ul#directionsForm li input{
	border : 1px solid gray;
	padding : 2px;
	margin-top : 3px;
	margin-bottom : 3px;
	font-size : 90%;
}
#directions table{ font-size : 100%;	}
ul#markers li{
	border-top : 1px dotted gray;
	padding-top : 3px;
	padding-bottom : 2px;
	height : 38px;
	position : relative;
}
ul#markers li a{ text-decoration : none; }
ul#markers li#atholl{ border-top : 0; padding-top : 5px; font-size : 1.5em;}
ul#markers li a img{ display : inline;	}
ul#markers li a p{ display : inline; padding-left : 5px; top : 10px; position : absolute;}
ul#markers{ padding-bottom : 1em; }

/* Policy Page */
#pols {
	width: 100%;
	height: auto;
	background: white;
	color:#333; 
	padding:25px 0;
}
#pols li {
	padding: 5px 5px 10px 50px;
	background: url(images/symbol-payment.gif) no-repeat 15px 0;
	margin-bottom: 5px;
}
#pols li strong {
	padding-left: 25px;
}
#pols li.header{
background:none; border:1px solid #666; border-width: 1px 0; background-color:#eee; padding-top: 20px; margin: 25px 0 20px 0;
}

/* Search bar at top of page Plus EVIIVO styles*/
#search { 
	position:absolute; 
	top: 0px; left: 555px; right:0px; 
	background: #90AED0 url(images/gradient-blue.jpg) 0 0 repeat-y; 
	z-index: 50000;
	border-bottom: 1px solid white; border-left: 1px solid #fff;
	height: 65px;
	display:none;
}
.eviivo_sbox { background: none !important; padding-top:15px !important; } 
.eviivo_title { display:inline !important; position:absolute !important; left: -235px !important; width: 160px !important; top: 29px !important; color:white !important; } 
.eviivo_title span { display:inline !important;}
.eviivo_label { color:white !important;} 
.eviivo_button { text-align:center; margin-top:5px !important; position: absolute !important; float: none !important; top: 15px !important; left: 470px !important; } 
.calendar .ajax__calendar_container{ z-index: 55000 !important;}
.calendar .ajax__calendar_container { border:2px solid #90AED0 !important;color:#333 !important; margin-top: 5px !important;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title, .ajax__calendar .ajax__calendar_title { color:#90AED0 !important;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today { color:#000030 !important;}
.calendar .ajax__calendar_footer {border-top:1px solid #90AED0 !important;}
.calendar .ajax__calendar_header {border-bottom:1px solid #90AED0 !important; padding-bottom: 3px !important; margin-bottom: 3px !important;}

/* No script div */
.noscript{ display: block; border-bottom: 1px solid #030; border-top: 1px solid #030; color:#000030; z-index: 200000; text-align:left; position:absolute; top: 530px; margin: 0; padding: 0; width: 100%;}
.noscript-inner { padding: 20px 15px 10px 70px; background:white url(images/exclam.gif) no-repeat 0% 50%; }
.noscript-contact { border-bottom: 1px solid #000030; margin-top: 5px; padding: 10px 15px 5px 70px; color:white;}
.noscript strong { font-weight:bold; }
.noscript a { color:inherit; }