/*
Theme Name: Spa Terminus
Author: Ransome Design
*/

/* Reset CSS */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {	border: 0;	font-family: inherit;	font-size: 100%;	font-style: inherit;	font-weight: inherit;	margin: 0;	outline: 0;	padding: 0;	vertical-align: baseline;}:focus {/* remember to define focus styles! */	outline: 0;}body {	background: #fff;	line-height: 1;}ol, ul {	list-style: none;}table {/* tables still need 'cellspacing="0"' in the markup */	border-collapse: separate;	border-spacing: 0;}caption, th, td {	font-weight: normal;	text-align: left;}blockquote:before, blockquote:after,q:before, q:after {	content: "";}blockquote, q {	quotes: "" "";}a img {	border: 0;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {	display: block;}

body { font-family:Arial, Helvetica, sans-serif; color:#4396f8;font-size:90%;  }
.clear { margin:0; padding:0; line-height:0; font-size:0; height:0; clear:both; }

a { color:#4396f8;  }
a:hover { text-decoration:none; cursor:pointer; }
p { margin: 0 0 1em 0 ; }

strong { font-weight:bold;}

#header, #map_container { width:1000px; margin:0 auto; padding:50px 0 0 0; }
#map_container { padding:0; }

h1#spa_terminus_logo a { background:url(/slices/logo.gif) top center no-repeat; width:285px; height:30px; overflow:hidden; text-indent:-999px; margin:0 auto; display:block; }

#primary_nav { padding:15px 0 60px 0; }
#header #primary_nav ul { list-style:none; text-align:center; }
#header #primary_nav ul li { display:inline; }
#header #primary_nav ul li a {display:inline-block;padding:8px 15px;  color:#000; text-decoration:none; }
#header #primary_nav ul li a:hover, #header #primary_nav ul li.current_page_item a { color:#4396f8; text-decoration:none; }

#arch_pattern { width:100%; background:url(/slices/arch_pattern.gif) top center repeat-x; height:211px; min-width:1000px; }

#page_content { width:440px; margin:0 auto; line-height:130%; padding:70px 280px 0 280px; }

/* Map */
#map_container { padding:0 0 30px 0; position:relative; }
.map_column_left { width:190px; padding:0 19px 0 0; margin:0; float:left; }
.map { float:left; width:580px; position:relative; z-index:10; }
.map img {border:1px solid #000; line-height:0; }
.map .map_link_open, .map .map_link_close { text-align:center; padding:15px 0 0 0; }
.map .map_link_close { display:none; }
.map_column_right { float:right; width:190px; }



.map_address_block { padding:0 0 7px 0; font-size:75%; color:#000; text-align:right; position:relative; z-index:10; margin:0 0 5px 0; }
.map_address_block .address { border-bottom:1px solid #4396f8; margin:0 0 3px 0; padding:0 0 3px 0;}
.map_address_block a { display: block; font-weight:bold; color:#000; text-decoration:none; padding:3px 0; }
.map_address_block a:hover { text-decoration:underline; }
.map_number { position:absolute; top:5px; left:0; z-index:20; background:#4396f8; width:20px; height:15px; border-radius:10px; text-align:center; color:#FFF; padding:5px 0 0 0; }

/* map links */

span.maltby, span.spa { width:50%; height:80%; position:absolute; top:0; left:0; z-index:200; background:url(/slices/trans.gif) repeat
; }
span.spa { top:0; left:50%; width:50%;  }
span.maltby:hover, span.spa:hover { cursor:pointer; }
.map_link_close p { text-decoration:underline; } .map_link_close p:hover { cursor:pointer; }

/* Scroller CSS */
#slider_outside { display:none; }
#producers { width:100%; /*display:none;*/ min-width:1000px; }

a.producer_link { background:url(/slices/arches.gif) -325px 0 no-repeat; padding:230px 20px 20px 20px; display:block; font-weight:normal; text-decoration:none; color:#000; }
a.producer_link_open { color:#4396f8; font-weight:bold; }
a.producer_link::-moz-selection{
    background-color:Transparent;
   
    }

a.producer_link::selection {
    background-color:Transparent;
 
    }
a.producer_link:hover { background:url(/slices/arches.gif) -58px 0 no-repeat;  }
.single_producer { width:160px;position: relative;float: left;margin: 0;  text-align:center; line-height:120%;  }
.hidden_details { padding:0 10px; line-height:110%; }
/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 104px;
	width: 104px;
	height: 98px;
	
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background:url(/slices/left_arrow.png) top left no-repeat;
	position:absolute;
	z-index: 900;
	left: 0;
	top:80%;
	
}

/* Visible left hotspot */

div.scrollingHotSpotLeftVisible
{
	zoom: 1;
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 104px;
	width: 104px;
	height: 89px;
	background:url(/slices/right_arrow.png) top left no-repeat;
	position: absolute;
	z-index: 910;
	right: 0;
	top:80%;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
@media(max-width:999px){
body { font-size:100%; }
#header, #map_container { width:90%; margin:0 auto; padding:3.125em 0 0 0; }	
#arch_pattern { min-width:100%; }	
#page_content { width:50%; margin:0 auto; line-height:130%; padding:3.125em 0 0 0; }
.map { position:absolute; top:100%; width:100%; }
.map img { width:99.8%; height:auto; }
.map_column_left { float:left; width:45%; }
.map_column_right { float:right; width:45%; }
a.producer_link:hover { background:url(/slices/arches.gif) -325px 0 no-repeat;}
#producers { width:100%; /*display:none;*/ min-width:100%; }
div.scrollingHotSpotRight, div.scrollingHotSpotLeft { display:none !important; }
}
@media(max-width:500px){	
#arch_pattern { background-size:auto 100%; height:6.5em; padding:0; }
#page_content { width:70%; margin:0 auto; line-height:130%; padding:3.125em 0 0 0; }
.map { position:absolute; top:0; width:100%;}
.map img { width:99.8%; height:auto; }
.map_column_left { float:left; width:90%; padding:0 5%; }
.map_column_right { float:left; width:90%; padding:0 5%; }
a.producer_link:hover { background:#FFF;}
#producers { width:100%; /*display:none;*/ min-width:100%; }
div.scrollingHotSpotRight, div.scrollingHotSpotLeft { display:none !important; }
a.producer_link { background:#fff; border-top:1px solid #ccc; padding:2% 0; display:block; font-weight:normal; text-decoration:none; color:#000; }
a.producer_link_open { }
.single_producer { width:auto;position: relative;float: none;margin: 0;  text-align:center;  }
.hidden_details { padding:5% 25% 0 25%; line-height:130%; width:50%; }
#header #primary_nav ul li a {display:block; float:left;padding:8px 0; color:#000; text-decoration:none; width:25%; text-align:center; }
}