/*
Summary: 	Info Window - Chalets and Resorts
Inherit:	/i/css/layout.css
Website:	www.interactiveresorts.co.uk
Author: 	Matthew Branthwaite (matthewbranthwaite.co.uk)
Created: 	2008-10-04
Updated:	2008-12-03
Notes:		- Update tabs (3 dec)
			- Updated h1 title with padding (3 dec)
			- Updated header meta info (3 dec)
*/

/* Create info window mockup - this wont be needed when finally implemented */
html,
body.emulate-gmap-max-window { overflow: auto; }
body.emulate-gmap-max-window { min-width: 580px; max-width: 673px; margin: 10px auto 10px auto; }
body.emulate-gmap-max-window div.iw { border: 1px solid #ccc; padding: 10px; }

div.iw-head { margin: -10px -10px 0 -10px; background-color: #eee; border-bottom: 1px solid #ccc; font-weight: bold; line-height: 20px; text-align: center;  }



/* START actual info window styling */

/* Info Window information

	Max IW width = 673px
	
	Min Browser size 		=	960px
	IR Sidebar (fixed) 		=	400px
	IR Map Area (minimum) 	= 	560px (960 - 400)
	
	Minimum IW size = 500px
	Map and IW padding/margin = 25px each side = 50px
*/


/* Grid percentages */
/*
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; display: inline; }

.col-1 { width: 8.3%; }
.col-2 { width: 16.6%; }
.col-3 { width: 24.9%; }
.col-4 { width: 33.2%; }
.col-5 { width: 41.5%; }
.col-6 { width: 49.8%; }
.col-7 { width: 58.1%; }
.col-8 { width: 66.4%; }
.col-9 { width: 74.7%; }
.col-10 { width: 83%; }
.col-11 { width: 91.3%; }
.col-12 { width: 99.6%; }
*/

div.iw { margin-right: 15px; min-width: 500px; }

h1.iw-title { font-size: 16px; line-height: 18px; padding: 2px 0; font-weight: bold; letter-spacing: normal; color: #000; margin-bottom: 0; }
h1.iw-title span.resort,
h1.iw-title span.country { color: #818181; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
span.connector { display: none; }
div.iw h2 { color: #0089d5; font-style: normal; font-weight: bold; font-size: 24px; line-height: 26px; margin-bottom: 18px; letter-spacing: -1px; }

div.iw div#photos h2,
div.iw div#offers h2 { float: left; margin-right: 14px; }
div.iw div#photos p,
div.iw div#offers p { padding-top: 8px; }

div.iw h3,
div.iw legend { display: block; font-size: 12px; line-height: 18px; font-weight: bold; border-bottom: 1px solid #383838; }
div.iw h3 span,
div.iw legend span,
div.back-to-top a { padding: 2px 5px; font-size: 11px; line-height: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background-color: #383838; color: #fff; border: none; text-decoration: none; }
div.iw legend { border: none; }
div.iw table.form-table { border-top: 1px solid #383838; }
div.iw div.back-to-top a:hover { background-color: #0089d5; }
div.iw div.back-to-top a { display: block; font-size: 11px; text-align: center; }

.cb { clear: both; }


div.iw-header { padding: 0 0 40px; /*border-top: 1px solid #ccc;*/ /*background: #fff url(images/iw-header-bg.gif) 0 bottom repeat-x;*/ }
/*div.iw-header-wrapper { border-top: 1px solid #ccc; }*/

div.iw-footer { border-top: 1px solid #ccc; padding-top: 10px; }
div.iw-footer p { text-align: right; font-size: 11px; color: #666; }
div.iw-footer a.ir-logo { float: left; margin-right: 10px; border: none; }



div.iw-meta ul { margin: 0; }
div.iw-meta ul li { float: left; list-style: none; margin: 0; padding: 6px 0 4px 14px; width: 22%; border-right: 1px solid #ccc; }
div.iw-meta ul li.board, div.iw-meta ul li.total-piste { border-right: none; }
div.iw-meta ul li strong { display: block; color: #818181; font-size: 10px; line-height: 14px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; }
div.iw-meta ul span { font-size: 13px; color: #131313; }
div.iw-meta ul span img { vertical-align:middle; border:0; margin:-2px 0 0; }

div#iw-resort div.iw-meta { display: none; }




/* Display table */
div.iw table.display-table { width: 100%; border: 0 !important; }
div.iw table.display-table td, div.iw table.display-table th { padding: 5px 6px; text-align: center; border-bottom: 1px solid #b8c6ce; }
div.iw table.display-table th { text-align: left; font-weight: bold; }
div.iw table.display-table tr.thead th, div.iw table.display-table thead th { background: #333f56; color: #fff; font-weight: bold; text-align: center; }
div.iw table.display-table tr.alt td, div.iw table.display-table tr.alt th { background-color: #e1eaf1; }

div.iw table#resort-stats { clear: both; }
div.iw table#resort-stats td { text-align: right; }
div.iw table#resort-stats td, table#resort-stats th { padding: 3px 6px; }


div.iw td.thumb { padding: 0 0 0 6px; width: 50px; vertical-align: middle; }
div.iw td.thumb a { border: none;}
div.iw td.thumb img { border: none; width: 50px; height: 36px; vertical-align: middle; }
div.iw td.accom {  text-align: left; width: 110px; }
div.iw td.accom { text-align: center; }
div.iw td.sale span.late-deal { font-weight: bold; color: #c60000; }
div.iw td.sale span.save { display: block; color: #666; white-space: nowrap; }

div.iw table.availability td.action a.enquire { display: block; float: none; margin: 0 auto 0 auto; }


div.iw div.focus-box { background-color: #f5fabf; border: 3px solid #f9ef84; padding: 6px 6px 0; margin-bottom: 18px; }
div.iw div.focus-box p { margin: 0; padding-bottom: 6px; }
div.iw div.focus-box img.icon { vertical-align:middle; margin:-2px 0 0; }

div.terms-text { color: #666; }



/* About */

div.iw div.supp-col { float: right; width: 234px; margin: 0 0 0 28px; display: inline; }
div.iw div.main-col { margin-right: 258px; }

div#map div.iw div.photo a,
div.iw div.photo a { float: left; padding: 1px; border: 1px solid #aaa; position: relative; cursor: pointer; }
div.iw div.photo a img { float: left; cursor: pointer; }
div#map div.iw div.photo a span,
div.iw div.photo a span { position: absolute; right: 1px; top: 1px; padding: 3px 10px; background-color: #383838; color: #fff; border: none; border-bottom: 1px solid #fff; border-left: 1px solid #fff; }
div#map div.iw div.photo a:hover span,
div.iw div.photo a:hover span { background-color: #0089d5; }

div.iw div.supp-col div.section { background-color: #e1eaf1; padding: 0 6px 6px; margin-top: 10px; }
div.iw div.supp-col div.section h3 { background-color: #fff; margin: 0 -6px 6px -6px;}
div.iw div.supp-col div.section div.photo { float: left; margin: 0 0 6px 0; padding: 1px; border: 1px solid #aaa; }
div.iw div.supp-col div.section div.photo img { float: left; width: 216px; }

div.iw h3 span.resort-name { display:block; padding: 5px; text-align:center; border-top:1px solid #282828; border-bottom:none; background-color:#ccdfee; color:#282828; }


/* Photos */

div.iw table.gallery-table { width: 100%; }
div.iw table.gallery-table td { padding: 0; vertical-align: top; }
div.iw table.gallery-table td.photo-col { width:404px; }
div.iw #photo { float: left; text-align: center; line-height:0; padding: 1px; border: solid 1px #aaa; }

div.iw #thumbnails { clear: both; float: left; list-style: none; margin: -6px 0 0; padding: 0; } /* ie7 hack margin top to compensate for the float margin-bottom bug */
div.iw #thumbnails li { list-style: none; margin: 0; padding: 0; float: left; }
div.iw #thumbnails li a { float: left; padding: 1px; border: solid 1px #aaa; margin: 6px 6px 0 0; outline: none; }
div.iw #thumbnails li a img { width: 66px; height: 50px; float: left; filter:alpha(opacity=35); -moz-opacity: 0.35; opacity: 0.35; }
div.iw #thumbnails li a:hover { border: solid 1px #666; }
div.iw #thumbnails li a.selected, #thumbnails li a.selected:hover { padding: 0; border: solid 2px #0089d5; }
div.iw #thumbnails li a.selected img, div.iw #thumbnails li a.over img { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; }


/* Offers */
div.iw ol.offer-list { margin: 0; }
div.iw ol.offer-list li.offer { list-style: none; margin: 0 0 18px; padding: 0; border: 3px solid #c60000; /*background-color: #e1eaf1;*/ }
div.iw ol.offer-list h3 { margin: 0; padding: 3px 6px; border-bottom: none; background-color: #c60000; }
div.iw ol.offer-list h3 span { padding: 0; background-color: transparent; letter-spacing: normal; text-transform: none; }
div.iw ol.offer-list li.offer p.offer-description { clear: both; margin: 6px; }

div.iw div.offer-meta { border-top: 1px solid #ccc; padding-top: 2px; }
div.iw div.offer-meta ul { float: left; border-top: 1px solid #ccc; margin: 0; width: 100%; }
div.iw div.offer-meta ul li { float: left; list-style: none; margin: 0; padding: 3px 6px 6px; border-right: 1px solid #ccc; line-height: 16px; }
div.iw div.offer-meta ul li strong { color: #818181; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
div.iw div.offer-meta ul span { font-size: 11px; color: #131313; font-weight: bold; }
div.iw div.offer-meta ul li.offer-id { width: 13.8%; }
div.iw div.offer-meta ul li.offer-chalets {  width: 38.7%; }
div#iw-accom div.offer-meta ul li.offer-chalets { display: none; }
div.iw div.offer-meta ul li.offer-category { display: none; width: 38.7%; border-right: none; }
div.iw div.offer-meta ul li.offer-expiry { float: right; border-right: none; border-left: 1px solid #ccc; }
div.iw div.offer-meta ul li.offer-category span.exclusive { background-color: #ffe400; padding: 1px 3px; color: #383838; }
div.iw div.offer-meta ul li.offer-category span.peak-date { background-color: #c60000; padding: 1px 3px; color: #fff; }





/* Resort IW */
div.latest-snow { }
p.webcam-photo { float: right; width: 300px; }
p.webcam-photo img { width: 300px; }
div.snow-stats { padding: 6px; margin-right: 310px; background-color: #e1eaf1; }
div.snow-stats h3 { margin: 0; border: none; }
div.snow-stats ul.snow-resort-meta { height: 18px; margin-bottom: 6px; }
div.snow-stats ul.snow-resort-meta li {list-style: none; margin: 0; padding: 0; float: left; margin-right: 20px; }
div.snow-stats ul.snow-list { margin: 0; }
div.snow-stats ul.snow-list li { list-style: none; margin: 0; padding: 0; }
div.snow-stats ul.snow-list li strong { float: left; width: 120px; }
div.snow-stats ul.snow-list li span {  }




table.weather-table { width: 100%; border: 0 !important; border-bottom: 1px solid #b8c6ce !important; }
table.weather-table img { vertical-align: middle; }
table.weather-table td, table.weather-table th { padding: 6px 2px; text-align: center; vertical-align: middle; border-right: 1px solid #b8c6ce; border-top: 1px solid #b8c6ce; }
table.weather-table th { padding: 6px 3px; font-weight: bold; }
table.weather-table thead th { background: #333f56; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; line-height: 14px; font-weight: bold; text-align: center; }
table.weather-table thead th.date, table.weather-table thead th.table-title { background-color: #e1eaf1; color: #111; border-top: none; border-right: 1px solid #fff; }
table.weather-table thead th.table-title { color: #0089d5; }
table.weather-table thead th span.day { display: block; font-size: 22px; line-height: 22px;   }
table.weather-table tbody th { padding: 6px 6px; background-color: #333f56; vertical-align: middle; color: #fff; text-align: left; border-left: 1px solid #b8c6ce; }
table.weather-table tbody th.row-label { width: 15px; border-right: none; }
table.weather-table tr.row-divide td, table.weather-table tr.row-divide th { border-top: 3px solid #b8c6ce; }
table.weather-table tr td.night { background-color: #e1eaf1; }
img.wind-icon {  display: block; width: 16px; margin: 0 auto 0 auto; }


div.iw table#resort-stats { clear: both; }
div.iw table#resort-stats td { text-align: right; }
div.iw table#resort-stats td, table#resort-stats th { padding: 3px 6px; }



div.iw-accom-search { width: 60%; margin: 0 auto 18px auto;  }
div.iw table.search-table { margin: 0; width: 100%; }
div.iw table.search-table th, div.iw table.search-table td { text-align: left; padding: 6px 9px; background: #e1eaf1; border-bottom: 3px solid #fff; }
div.iw table.search-table tr.search-field th { vertical-align: top; width: 100px; font-size: 12px; font-weight: bold; }
div.iw table.search-table input.textfield, div.iw table.search-table select { width: 90%;}
div.iw table.search-table p { margin: 0; }
div.iw table.search-table select, div.iw table.search-table input { margin-right: 6px; }
div.iw table.search-table tr.search-field td label { margin: 0 14px 0 0; }



div.iw div#accommodation table.form-table tr.form-field th { width: 80px; font-size: 12px; font-weight: bold; }







/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide { display: none; }
}

/* Hide useless elements in print layouts... */
@media print {
	.ui-tabs-nav { display: none; }
}


ul.iw-tabs { padding-left: 6px; margin-top: -31px; height: 33px;  border-bottom: 6px solid #0089d5; }
ul.iw-tabs li { list-style: none; margin: 0 3px 0 0; padding: 0; float: left; }
ul.iw-tabs li a,
ul.iw-tabs li a span { background: transparent url(images/gnav.gif) 0 0 no-repeat; cursor: pointer;  }
ul.iw-tabs li a { float: left; padding-left: 9px; font-weight: bold; }
ul.iw-tabs li a:hover { text-decoration: none; }
ul.iw-tabs li a span { float: left; display: block; padding:8px 10px 7px 1px; background-position: right 0; }

ul.iw-tabs li.ui-tabs-selected a { background-position: 0 -70px; color: #fff; }
ul.iw-tabs li.ui-tabs-selected a span { background-position: right -70px; }



div.min-iw { width: 252px; }
div.min-iw h1.iw-title { padding-top: 6px; }
div.min-iw h1.iw-title span.resort,
div.min-iw h1.iw-title span.country { display: block; }

div.iw-wizard ul { height: 38px; margin: 0; padding-top: 9px; }
div.iw-wizard ul li { list-style: none; margin: 0; padding: 0; float: left; }
div.iw-wizard ul li a { float: left; font-weight: bold; }
div.iw-wizard ul li.iw-details-button { margin-right: 14px; }
div.iw-wizard ul li.iw-details-button a { display: block; width: 134px; height: 38px; text-indent: -9999px; text-decoration: none; background-position: 0 0; background-repeat: none; }
div.iw-wizard ul li.iw-details-button a:hover { text-decoration: none; background-position: -150px 0; }
li.iw-details-button a { background-image: url(images/buttons/view-full-details-btn.png); }
li.iw-zoom-button a { margin-top: 18px; padding-left: 18px; }
li.iw-zoom-button a.IWZoomIn { background: url(../images/icons/zoom_in.png) 0 0 no-repeat; }
li.iw-zoom-button a.IWZoomOut { background: url(../images/icons/zoom_out.png) 0 0 no-repeat; }