/*
Summary: 	Map Interface - Core Styles
Website:	www.interactiveresorts.co.uk
Author: 	Matt Branthwaite (matthewbranthwaite.co.uk)
Created: 	2008-07-30
Updated:	2008-04-29
*/

/* = IMPORTED STYLES */
@import url("ir-reset.css");
@import url("ir-header.css");
@import url("ir-forms.css");


/* Overrides */
h3 { font-size: 16px; }



/* = Map Structure
------------------------------------------------*/

html, body { width: 100%; height: 100%; overflow: hidden; }
body { background-color: #fff; }
div#header { position: absolute; top: 0px; left: 0px; width: 100%; height: 72px; z-index: 102; } /* Note: has to be higher z-index than the map drop shadow */
div#sub-header { position: absolute; top: 72px; left: 0px; width: 100%; height: 36px; z-index: 3; }
div#map { position: absolute; top: 108px; left: 400px; right: 0; bottom: 20px; overflow: hidden; z-index: 1; }
div#sidebar { position: absolute; top: 108px; left: 0; width: 400px; z-index: 2; }
div#footer { padding: 0; margin: 0; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 19px; border-top: 1px solid #ccc; background: #0089d5; color: #fff; overflow: hidden; z-index: 5; }

div#sb-resizer, div#enquiry-resizer { clear: both; position: relative; overflow: auto; }
div#sb-resizer { width: 400px; } /* this was width auto - however IE needs a fixed width in order to position absolutely against the right edge - otherwise it fails to consider the vertical scroll bar */

div#enquiry-panel { position: absolute; top: 108px; left: 400px; bottom: 20px; background-color: #fff; overflow: hidden; z-index: 1; }
div#enquiry-panel div#enquire { padding: 0 20px 10px; }
body.pg-enquire div#enquiry-panel { left: 14px; right: 0; }
body.pg-enquire div#enquiry-panel form { width: 772px; }


/* Testing Structure
div#header { background: red; }
div#sub-header { background: blue; }
div#sidebar { background-color: #ddd; }
div#map {background-color: yellow; }
*/

div#main-map { z-index: 4;}
.o1 { filter:alpha(opacity=10); -moz-opacity: 0.10; opacity: 0.10; }
.o2 { filter:alpha(opacity=08); -moz-opacity: 0.08; opacity: 0.08; }
.o3 { filter:alpha(opacity=06); -moz-opacity: 0.06; opacity: 0.06; }
.o4 { filter:alpha(opacity=04); -moz-opacity: 0.04; opacity: 0.04; }
.o5 { filter:alpha(opacity=02); -moz-opacity: 0.02; opacity: 0.02; }

.v1 { width: 1px; }
.v2 { width: 2px; }
.v3 { width: 3px; }
.v4 { width: 4px; }
.v5 { width: 5px; }

.h1 { height: 1px; }
.h2 { height: 2px; }
.h3 { height: 3px; }
.h4 { height: 4px; }
.h5 { height: 5px; }

.ds { background-color: #000; overflow: hidden; z-index: 100; position: absolute; top: 108px; left: 400px; }

#ds-h div { right: 0; }
#ds-v div { }




/* = Sub Nav and Toggle Map
------------------------------------------------*/

/* Measurements
	Close Off State = 0
	Close Hover State = 38px
	Open Off State = 76px
	Open Hover State = 114px
*/
a.tog-sidebar { position: absolute; left: 400px; top: 0; height: 36px; width: 20px; color: #fff; border: none; outline: none; z-index: 100; text-indent: -9999px; background: url(images/tog-sidebar-button.gif) 0 -1px no-repeat; }
a.tog-sidebar:hover { background-position: 0 -39px; }
a.tog-sidebar-open { background-position: 0 -77px; }
a.tog-sidebar-open:hover { background-position: 0 -115px; }

/* dont display on... */
body.pg-shortlist a.tog-sidebar,
body.pg-enquire a.tog-sidebar { display: none; }

ul.page-tools { display: none; }


div#sub-header { background-color: #0089d5; }
ul.subnav { float: left; margin: 0; padding-left: 10px; padding-top: 5px; height: 31px; }
ul.subnav li { list-style: none; margin: 0; padding: 0; float: left; }
ul.subnav li a,
ul.subnav li a span { background: transparent url(images/subnav-tabs.gif) 0 0 no-repeat; cursor: pointer; }
ul.subnav li a { float: left; padding-left: 9px; font-weight: bold; display: inline; }
ul.subnav li a span { float: left; display: block; padding: 7px 14px 6px 5px; line-height: 18px; background-position: right 0; cursor: pointer; }
ul.subnav li a:hover,
ul.subnav li.ui-tabs-selected a:hover,
ul.subnav li.selected a:hover { text-decoration: none; }

ul.subnav li a:hover { background-position: 0 -31px; }
ul.subnav li a:hover span { background-position: right -31px; }

ul.subnav li.ui-tabs-selected a,
ul.subnav li.selected a,
ul.subnav li.ui-tabs-selected a:hover,
ul.subnav li.selected a:hover {  background-position: 0 -62px; color: #181818; }

ul.subnav li.ui-tabs-selected a span,
ul.subnav li.selected a span,
ul.subnav li.ui-tabs-selected a:hover span,
ul.subnav li.selected a:hover span {  background-position: right -62px; }






/* = Sidebar and Listings
------------------------------------------------*/

body { background: #c2c4c5 url(images/sb-resizer-bg-c2c4c5.gif) 0 108px repeat-x; }
body.pg-enquire { background: none; background-color: #fff; }

div#search, div#recommended, div#results, div#chalets { margin-left: 10px; }

div.section-header { /*background-color: #fff;*/ margin-left: -10px; padding-left: 10px; color: #f1f1f1; }
div.section-header h2, div#enquiry-panel h2 { margin: 0; padding: 8px 0; color: #0089d5; font-weight: bold; font-size: 16px; line-height: 18px; letter-spacing: normal; }
div.section-header h2 em { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, Helvetica, sans-serif; font-size: 10px; font-style: normal; letter-spacing: normal; color: #181818; color: #f1f1f1; }
div.section-header p { margin-bottom: 0; padding-bottom: 8px; }






/* Sidebar = 399px wide
minus the right scroll bar, 379px */
ul.accom-list, ul.resort-list, ul.offer-list { /*background-color: #d8d8d8;*/ margin: 0 0 0 -10px; padding: 5px 4px 5px 5px; }
li.accom-listing, li.resort-listing, li.offer-listing { clear: both; list-style: none; border: none; margin: 0; padding: 6px 6px 6px 35px; border-top: 1px solid #b8b8b8; border-left: 1px solid #b8b8b8; border-right: 2px solid #a1a1a1; border-bottom: 2px solid #a1a1a1; background-color: #fff; margin-bottom: 4px; }
/*li.accom-listing { clear: both; list-style: none; margin: 0 -5px; padding: 14px 5px 14px 35px; background-color: #fff; border-bottom: 1px solid #b8c6ce; }*/
li.accom-listing div.accom-listing-wrapper { position: relative; }

li.accom-listing img.marker { position: absolute; margin: 0 0 0 -30px; }
li.accom-listing img { vertical-align: middle; margin-top: -2px; }
li.accom-listing h3 { font-size: 12px; line-height: 18px; margin: 0 100px 5px 0; }
/*li.accom-listing p.location-link { float: right; height: 18px; margin: -23px 0 -23px 0; }*/
li.accom-listing p.location-link { position: absolute; right: 0; top: 0; }
li.accom-listing p.location-link a { padding: 2px 5px; font-size: 9px; line-height: 15px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; background-color: #333; color: #fff;  }
li.accom-listing p.location-link a:hover { background-color: #0089d5; text-decoration: none; }
div.accom-thumb { float:left; margin-right: 14px; margin-bottom: 5px; }
div.accom-thumb a { float: left; width:100px; height:75px; }

div.accom-details, div.avail-details { float: left;}
div.accom-details ul, div.avail-details ul { margin: 0; }
div.accom-details li, div.avail-details li { list-style: none; margin: 0; padding: 0; clear: left; }
div.accom-details li a { font-weight: bold; }
div.accom-details li strong.label, div.avail-details li strong.label { float: left; width: 58px; font-weight: normal; color: #818181; }

div.avail { clear: both; margin-top: 5px; background-color: #dfeef6; border: 1px solid #a9c0cd;  }
div.avail div.avail-price { float: left; text-align: center; padding: 3px 0 1px; width: 98px; margin-right: 14px; border-right: 1px solid #a9c0cd; font-size: 10px; position: relative; }
div.avail div.avail-price a { display: block; font-size: 18px; font-family: Verdana, sans-serif; font-weight: bold; color: #111; }
div.avail div.avail-price a span.from { position: absolute; text-align: center; top: -14px; left: 9px; width: 80px; height: 12px; padding-top: 2px; line-height: 12px; font-size: 9px; text-transform: uppercase; font-family: Arial, sans-serif; border: 1px solid #a9c0cd; border-bottom: none; background-color: #dfeef6; }
div.avail div.avail-price a:hover span.from { text-decoration: none;}
div.avail div.late-deal a,
div.avail div.late-deal a strong { color: #c60000; }
div.avail div.clear-avail { clear: both; }

div.avail div.avail-details { padding-top: 3px; width: 212px; }
div.avail div.avail-details strong.label { color: #616161; }
div.avail div.avail-details li.avail-date { text-align: right; }
div.avail div.avail-details li.avail-date strong.label { display: none; }
div.avail div.avail-details li.avail-date span.avail-depart,
div.avail div.avail-details li.avail-date span.duration { float: left; text-align: left; }
div.avail div.avail-details li.avail-date span.avail-depart { font-weight: bold; margin-right: 5px; }
span.avail-spaces { padding: 1px 3px; background-color: #e5f2fa; border: 1px solid #a9c0cd;  }

li.accom-listing-selected { border-top: 1px solid #a8a8a8; border-left: 1px solid #a8a8a8; border-right: 2px solid #989898; border-bottom: 2px solid #989898; background-color: #e5f2fa; }
li.accom-listing-selected div.avail { background-color: #fff; }



li.offer-listing { background: #fff url(images/li.offer-listing.gif) 0 0 no-repeat; }
li.offer-listing div.offer-content { position: relative; }
li.offer-listing h3 { font-size: 12px; line-height: 18px; margin: 0 0 6px 0; }
li.offer-listing p { padding-bottom: 6px; border-bottom: 1px dotted #ccc; margin-bottom: 6px; }

li.offer-listing div.offer-meta ul { margin: 0; position: relative; }
li.offer-listing div.offer-meta li { list-style: none; margin: 0; padding: 0;  }
li.offer-listing div.offer-meta li.offer-id, li.offer-listing div.offer-meta li.offer-expiry { font-size: 9px; }
li.offer-listing div.offer-meta li.offer-expiry { clear: both; padding-left: 85px; text-align: left; }
li.offer-listing div.offer-meta li.offer-id { position: absolute; bottom: 0; left: 0; }
li.offer-listing div.offer-meta li.offer-chalets { position: absolute; top: 0; right: 0; }
li.offer-listing div.offer-meta li.offer-chalets strong,
li.offer-listing div.offer-meta li.offer-category strong { display: none; }
li.offer-listing div.offer-meta li.offer-chalets a { display: block; height: 34px; width: 80px; text-align: center; background-color: #eee; border: 1px solid #ddd; font-size: 11px; font-weight: bold; line-height: 34px; }

a.truncate_show { padding: 0 12px 0 0; font-size: 9px; font-weight: bold; background: transparent url(images/read-more-arrow.gif) right 1px no-repeat; white-space: nowrap;}





/* Widgets */

div.widgets { margin: 6px -6px -6px -35px; padding: 0; background: #f4f4f4 url(images/widgets-bg.gif) 0 0 repeat-x; }

ul.actions { float: left; margin: 0; padding: 3px 0; }
ul.actions li {list-style: none; float: left; margin: 0; padding: 0 10px; line-height: 15px; border-right: 1px solid #e1e1e1; border-left: 1px solid #fff; }
ul.actions li a { float: left; font-weight: bold; color: #616161; padding-left: 18px; background-image: url(images/widgets-icons.gif); background-repeat: no-repeat; }
ul.actions li a:hover,
ul.actions li a.selected { color: #0089d5; text-decoration: none; }
ul.actions li.email a { background-position: 0 -12px; }
ul.actions li.email a:hover { background-position: 0 -52px; }
ul.actions li.share a { background-position: 0 -92px; }
ul.actions li.share a:hover,
ul.actions li.share a.selected { background-position: 0 -132px; }
ul.actions li.print a { background-position: 0 -172px; }
ul.actions li.print a:hover { background-position: 0 -212px; }
ul.actions li.info a { background-position: 0 -252px; padding-left: 10px; }
ul.actions li.info a:hover { background-position: -0 -292px; }
ul.actions li.clear a { background-position: 0 -332px; padding-left: 15px; }
ul.actions li.clear a:hover { background-position: -0 -372px; color: #c60000; }
ul.actions li.facebook a { background-position: 0 -412px; }
ul.actions li.facebook a:hover { background-position: -0 -452px; }
ul.actions li.info,
ul.actions li.clear { border-right: none; }

ul.actions li.shortlist { border-left: none; }
ul.actions li.shortlist a,
td.shortlist a  { display: block; margin: 0 auto; padding: 0; width: 70px; height: 15px; text-indent: -9999px; background-image: url(images/widgets-shortlist-btns.gif); background-repeat: no-repeat; }

.add-shortlist a,
.add-shortlist a { background-position: 0 0; }
.add-shortlist a:hover { background-position: 0 -15px; }
.remove-shortlist a { background-position: 0 -30px; }
.remove-shortlist a:hover { background-position: 0 -45px; }

div.shareoptions { clear: both; display: none; }
div.shareoptions dl { clear: both; width: 100%; float: left; padding: 0 0 8px; margin: 0; }
div.shareoptions dl.share-actions { border-top: 1px solid #e1e1e1; padding-top: 8px; }
div.shareoptions dt,
div.shareoptions dd { float: left; padding: 0 10px 0 0; margin: 0; }
div.shareoptions dt { padding-left: 10px; }
div.shareoptions dl.permalink input { width: 260px; }

dl.share-actions dd a { float: left; padding-left: 20px; height: 18px; background-image: url(images/widgets-share-icons.png); background-repeat: no-repeat; }
dl.share-actions dd.delicious a { background-position: 0 -52px; }
dl.share-actions dd.facebook a { background-position: 0 -132px; }
dl.share-actions dd.digg a { background-position: 0 -212px; }
dl.share-actions dd.stumbleupon a { background-position: 0 -292px; }


a.shortlist-button { display: block; margin: 0 auto; width: 70px; height: 15px; text-indent: -9999px; background-image: url(images/widgets-shortlist-btns.gif); background-repeat: no-repeat; }
a.shortlist-button { background-position: 0 0; }
a.shortlist-button:hover { background-position: 0 -15px; }




/* = Shortlisting
------------------------------------------------*/

/* Important - ensures that the enquiry panel cant be seen when scrolling across under the sidebar */
body.pg-shortlist div#sb-resizer { background: #c2c4c5 url(images/sb-resizer-bg-c2c4c5.gif) 0 0 repeat-x; } 

/* Shortlist Nav Over rides */
div.shortlist-nav ul.actions { padding: 6px 0 4px;  }
div.shortlist-nav ul.actions li { margin-top: 2px; }
div.shortlist-nav ul.actions li.enquire { margin-top: 0; line-height: 20px; }
div.shortlist-nav ul.actions li.enquire a.enquire-shortlist-btn { background-image: url(images/buttons/enquire-btn-18px.png); width: 82px; height: 20px; padding: 0; text-indent: -9999px; text-align: left; display: block; }

p.friends-shortlist { padding-top: 6px; font-size: 14px; text-align: center; font-weight: bold;}




/* Filter Results */
div.results-nav,
div.shortlist-nav { margin: 0 0 0 -10px; text-align: right; /*padding-top: 1px; border-bottom: 1px solid #d1d1d1; background-color: #e1e1e1;*/ }
div.results-nav-wrapper,
div.shortlist-nav-wrapper { background-color: #fff; }
div.results-nav a { cursor: pointer; }
div.results-nav ul { margin: 0; }
div.results-nav li { margin: 0; padding: 0; list-style: none; text-align: left; }
div.results-nav li a { float: left; height: 30px; line-height: 30px; }
div.clear-results-nav { clear: both; }

div.results-nav li.results-nav-sort { float: left; overflow: hidden; width: 257px; }

/* Sort and Refine buttons */
div.results-nav li.results-nav-sort a.sort-button,
div.results-nav li.results-nav-filter a.filter-button { float: left; display: block; position: relative; z-index: 100; padding-left: 30px; width: 50px; background: #fff url(images/gui-buttons-sort.gif) -2px -5px no-repeat; color: #131313; }
div.results-nav li.results-nav-filter a.filter-button { float: right; border-left: 1px solid #d1d1d1; width: 90px; margin-right: 1px; } /* not to self: margin right is so a border-right can be added when its selected */

div.results-nav li.results-nav-sort a.sort-button:hover,
div.results-nav li.results-nav-sort a.sort-button.selected,
div.results-nav li.results-nav-filter a.filter-button:hover,
div.results-nav li.results-nav-filter.selected a.filter-button { background-position: -2px -45px; color: #131313; text-decoration: none; }
div.results-nav li.results-nav-sort a.sort-button.selected { background-position: -2px -85px; }
div.results-nav li.results-nav-filter.selected a.filter-button { background-position: -2px -125px; background-color: #fff; padding-bottom: 1px; color: #131313; margin-bottom: -1px; }
div.results-nav li.results-nav-sort a.sort-button:hover,
div.results-nav li.results-nav-sort a.sort-button.selected:hover,
div.results-nav li.results-nav-filter a.filter-button:hover,
div.results-nav li.results-nav-filter.selected a.filter-button:hover { color: #0089d5; }
div.results-nav li.results-nav-filter.selected a.filter-button { border-right: 1px solid #d1d1d1; margin-right: 0; }



/* Sort By Options */
ul#sort-options.start { margin-left: -800px;}
ul#sort-options { position: relative; float: left; }
ul#sort-options li { float: left; padding: 0 7px 0 0; }
ul#sort-options a { padding-left: 18px; color: #666; background: transparent url(images/gui-buttons-sort.gif) -12px -164px no-repeat; }
ul#sort-options a:hover,
ul#sort-options a.selected { background-position: -12px -164px; color: #131313; text-decoration: none; }
ul#sort-options a.ascending { background-position: -12px -204px; }
ul#sort-options a.descending { background-position: -12px -244px; }



/* filter options 
Using animation to slide up and down so that the div has a height value in IE7 - fixes flickering bug in the sidebar panel
Overflow: hidden essential to hide the content onload
*/
div#filter-options { clear: both; margin: 0; overflow: hidden; height: 0; background-color: #fff; border-right: 1px solid #b1b1b1; }
div.filter-options.start { height: 0; }
div.filter-options-wrapper { border-top: 1px solid #e1e1e1; padding: 6px 0 6px 10px; }

div#filter-options p.filter-cat { padding: 0 0 3px 0; margin-bottom: 0; }
div#filter-options p.filter-cat span { font-weight: bold; text-transform: uppercase; }
div.filter-options-col { float: left; width: 250px; }
div#filter-options ul, div#filter-options p { margin-bottom: 7px; }
div#filter-options li { padding: 2px 0; border-top: 1px solid #e1e1e1; }
div#filter-options li input { clear: both; float: left; margin: 0 6px 0 0; vertical-align: middle; }
div#filter-options li label { display: block; cursor: pointer; }

div.show-matches { float: right; text-align: center; width: 120px; margin-top: 20px; }
div.matches-found { color: #009626; }
div.no-matches { color: #c60000; }
div#filter-options p.matches { font-weight: bold; font-size: 12px; }
div#filter-options p.matches span.total { display: block; font-family: Verdana, sans-serif; font-style: normal; font-weight: bold; font-size: 32px; line-height: 36px; letter-spacing: -1px; }

div.submit-filter-options input { width: 90px; }

div.filter-options-end { clear: both; }


/* testing */
/*
div.results-nav li.results-nav-sort { background: #ddd; }
div.results-nav li.results-nav-sort a:sort-button { background: #666; }
ul#sort-options { background: blue; }
*/


/* Fixed Results-Nav */

div#results, div#chalets, div#shortlist { padding-top: 32px; background: transparent url(images/results-nav-shadow-6px.png) 374px 30px no-repeat; }
body.shortlist-empty div#shortlist { background: none; padding-top: 18px; }
body.pg-offers div#results { padding-top: 0; background: none; }
div#results div.section-header,
div#chalets div.section-header  { display: none; }
div#results div.results-nav,
div#chalets div.results-nav,
div#shortlist div.shortlist-nav { position: fixed; margin-top: -32px; width: 384px; z-index: 3; padding-top: 0; border-bottom: 0; background-color: transparent; padding-bottom: 6px; background: transparent url(images/results-nav-shadow-6px.png) 0 bottom repeat-x; }





div.paginator { text-align: center; margin: 0 0 0 -10px; padding: 6px 10px; background-color: #eee; border-top: 1px solid #e1e1e1; }
div.paginator a, div.paginator span { padding: 0 4px; text-decoration: none; font-weight: normal; background-color: #b7b7b7; border: 1px solid #979797; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
div.paginator a:hover, div.paginator span { color: #fff; background-color: #0089d5; border-color: #377ba0; text-decoration: none; }



div.map-legend ul li { list-style: none; margin: 0; padding: 2px 0; width: 49.8%; float: left; }
div.map-legend ul li img { margin: 0 4px 0 0; width: 20px; height: 20px; }



div#footer { text-align: left; }
div#footer p.copyright { margin-left: 14px; font-size: 10px; }
div#footer ul.footer-nav { margin: 0 4px 0 0; float: right; }
div#footer ul.footer-nav li { list-style: none; margin: 0; padding: 0 10px; border-left: 1px solid #ccc; float: left; font-size: 10px; }
div#footer ul.footer-nav li a { color: #fff; }


/* Testing */
body.style1 div#header { background-color: orange; }