/*
Website:	www.villa-la-herradura.co.uk
Author: 	Matt Branthwaite (matthewbranthwaite.co.uk)
Created: 	2009-03-22
Updated:	2009-03-22
*/

/* = Reset
------------------------*/

/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, iframe { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img, iframe { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}

/* The below restores some sensible defaults */
strong, dt, th { font-weight: bold; }
em { font-style: italic; }
ol, ul, li { list-style: none; }
h1, h2, h3, h4, h5 { font-weight: bold; }
a { outline: none; } /* Gets rid of Firefox's dotted borders */
a img { border: none; } /* Gets rid of IE's blue borders */

img { vertical-align: middle; -ms-interpolation-mode: bicubic; }
.cb { clear: both; }
hr { display: none; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix { height: 1%; }

body { text-shadow: 0 0 0 #000; opacity: : .99; } /* Sharper type in Safari, Firefox, Opera */
img { -ms-interpolation-mode: bicubic; } /* IE7 fix for image scaling */
img { behavior:url(iepngfix.htc); } /* Angus Turnbulls png behaviour support for ie - http://www.twinhelix.com/css/iepngfix/ */


/* = Colours
------------------------*/
body { color: #484848; }
h2, h3 { color: #8d2100; } /* dark red */
a { color: #a52100; text-decoration: underline; }
a:hover { color: #ba7200; }


/* = Typography
------------------------*/
body, p, li, dt, dd, th, td, label, input, textarea, select {  font-family: Georgia, Arial, Verdana, sans-serif; }
h4, dt, th, label, ul.gnav li, div#footer p, textarea, input, legend, select { font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial sans-serif; }

body { font-size: 62.5%; }
p, li, dt, dd, th, td { vertical-align: top; }
p, ul, ol, dd, table, fieldet, address { margin: 0 0 20px 0; }

h1 { font-size: 2em; font-weight: normal; line-height: 1.25em;  } /*  display at 24px (24 / 12 = 2em) */
h2 { font-size: 2.6em; line-height: 1.15em; padding-bottom: 5px; margin: 0 0 15px; border-bottom: 1px solid #cac9c7; font-variant: small-caps; font-weight: normal; } /* 24px / 40px */
h3 { font-size: 2em; line-height: 1.11em; margin: 0 0 10px; font-variant: small-caps; font-weight: normal; } /* 18px / 20px */
h4, th, dt, label, legend { letter-spacing: 1px; text-transform: uppercase; } 

p, li, dd, td, textarea, input, select { font-size: 1.3em; line-height: 1.54em; }
p small { font-size: 0.85em; }
h4, th, dt, legend, label { font-size: 1.1em; line-height: 1.82em; margin: 0; }
h4, thead th, dt { color: #1a1a1a; font-weight: bold; }
h4 { font-size: 1.2em; line-height: 1.67em; }

ul li { list-style: disc; margin: 0 0 0 16px; }
ol li { list-style: decimal; margin: 0 0 0 30px; }

.lead { font-size: 1.5em; line-height: 1.33em; }
.section-divide { clear: both; height: 0; margin: 20px 10px; border-bottom: 1px solid #cac9c7 }

img.photo { margin: -1px 0 10px -1px; padding: 5px; background-color: #fff; border: 1px solid #cac9c7; }
div.frame { margin: -1px 0 10px -1px; padding: 5px; background-color: #fff; border: 1px solid #cac9c7; }





/* = Layout
------------------------*/

body { text-align: center; background: url(images/body-bg.jpg) 50% 0 repeat; }
div.container { width: 960px; margin: 0 auto; text-align: left;}
div.wrapper {  width: 900px; margin: 0 auto; padding: 0 30px; text-align: left; }

.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; margin: 0 10px; padding: 0 10px; display: inline; }

.col-1 { width: 35px; }
.col-2 { width: 110px; }
.col-3 { width: 185px; }
.col-4 { width: 260px; }
.col-5 { width: 335px; }
.col-6 { width: 410px; }
.col-7 { width: 485px; }
.col-8 { width: 560px; }
.col-9 { width: 635px; }
.col-10 { width: 710px; }
.col-11 { width: 785px; }
.col-12 { width: 860px; }



/*div#header, div#content, div#footer { width: 900px; margin: 0 auto; }*/
div#header { background: url(images/header-bg.jpg) 0 0 no-repeat; }
div#content { background: url(images/content-bg.jpg) 0 0 repeat-y; padding-bottom: 10px; }
div#content div.wrapper { padding: 20px 30px 0; }
div.content-top { background: url(images/content-top.jpg) 0 0 no-repeat;}
div#footer { clear: both; padding-top: 10px; background: url(images/content-bottom.png) 0 0 no-repeat; behavior:url(iepngfix.htc); }


div#header div.wrapper { height: 280px; padding-top: 20px; position: relative; }
div#header div.branding { position: absolute; left: 8px; top: 38px; }
div#header div.branding a { display: block; width: 239px; height: 204px; text-indent: -9999px; background: transparent url(images/branding.png) 0 0 no-repeat; behavior:url(iepngfix.htc); }
div#header h1 { z-index: 7; position: absolute; right: 8px; top: 208px; width: 586px; height: 24px; border: none; padding: 0; margin: 0; text-indent: -9999px; background: transparent url(images/strapline.png) 0 0 no-repeat; behavior:url(iepngfix.htc);  }
div#header p.bookings { float: right; width: 130px; padding-top: 80px; margin-right: 10px; }
div#header div.slideshow { margin: 4px 0 4px 234px;  float: left; width: 495px; height: 220px; padding: 6px; background: transparent url(images/header-img-bg.gif) 0 0 no-repeat; display: inline; overflow: hidden; position: relative; }
div#header div.slideshow img { margin-bottom: 6px; position:absolute; top:6px; left:6px; z-index:4; opacity:0.0; }
div#header div.slideshow img.active { z-index:6; opacity:1.0;}
div#header div.slideshow img.last-active { z-index:5; }



ul.gnav { clear: both; float: left; margin: 0; width: 896px; padding-left: 2px; background: url(images/gnav-divide.gif) 0 0 no-repeat; }
ul.gnav li { list-style: none; margin: 0; padding: 0 2px 0 0; height: 40px; line-height: 40px; float: left; background: url(images/gnav-divide.gif) right 0 no-repeat; }
ul.gnav li a { float: left; width: 110px; height: 40px; line-height: 40px; text-align: center; font-size: 0.92em; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
ul.gnav li a:hover { background: url(images/gnav-selected.jpg) 0 -40px repeat-x; color: #fff; }

body#pg-home li.gnav-home a,
body#pg-villa li.gnav-villa a,
body#pg-photos li.gnav-photos a,
body#pg-prices li.gnav-prices a,
body#pg-area li.gnav-area a,
body#pg-location li.gnav-location a,
body#pg-enquire li.gnav-enquire a,
body#pg-book li.gnav-enquire a,
body#pg-booking-terms li.gnav-booking-terms a { background: url(images/gnav-selected.jpg) 0 0 repeat-x; color: #1a1a1a; }


/* Forms */
.blur { color: #999; }
form fieldset { background: transparent url(images/features-bg.png) 0 0 repeat; padding: 10px; }
form legend { display: none; border: 1px solid #ccc; padding: 0 10px; background-color: #fff; }
form input.textfield, textarea.textfield { margin: 0 0 10px -1px; padding: 4px 0; text-indent: 4px; border: 1px solid #d1d1d1; width: 100%; background: #fff url(images/text-input-bg.gif) 0 0 repeat-x; }
form textarea.textfield { padding: 4px 0 4px 4px; text-indent: 0; }

/*form#newsletter-form label { display: none; }*/

form.display-form fieldset { background: none; padding: 0; margin-bottom: 10px; }
form.display-form input.textfield,
form.display-form textarea.textfield { margin-bottom: 0; }
form.display-form select { width: 80%; }

table.form-table { border-collapse: separate; border-spacing: 2px; width: 100%; }
table.form-table td, table.form-table th { font-size: 1em; padding: 5px 10px; margin: 5px; background: transparent url(images/features-bg.png) 0 0 repeat; }
table.form-table td span.label { font-size: 1.3em; }
table.form-table td p { margin-bottom: 10px; }
table.form-table th { width: 110px; background: transparent url(images/features-head-bg.png) 0 0 repeat; }
table.form-table tr#fm-message td { padding-right: 14px; } /* counter the 4px added to the textarea width */

textarea#message { height: 200px; }
form.display-form p.form-submit { padding-left: 142px; height: 34px; }
div.captcha-image { float: left; width: 180px; margin: 0 10px 5px 0; }
div.captcha-verify { padding-top: 5px; }
div.captcha-verify label { font-weight: bold; }

textarea#termstext { font-family: Courier; font-size: 12px; line-height: 16px; margin-bottom: 10px; }
span.flag img { margin-right: 10px; }

label.required { color: #c60000; }


/* Messages */
div.msg-success,
div.msg-failure { padding: 10px; margin-bottom: 20px; }
div.msg-success { background: transparent url(images/msg-success-bg.png) 0 0 repeat; }
div.msg-success h3 { color: #48a100; }
div.msg-failure { background: transparent url(images/msg-failure-bg.png) 0 0 repeat; }
div.msg-failure h3 { color: #c60000; }
.last { margin: 0; }


/* Buttons */
input.btn { display: block; float: left; width: 114px; height: 34px; background-position: 0 0; margin: -2px 0; border: none; cursor: pointer; text-indent: -9999px; line-height: 34px; /* important - input button needs a lineheight in order fo IE to hide the text for image replacement */ }
input.btn:hover, input.btn:focus { background-position: -125px 0; }

input.subscribe-btn { background:url(images/subscribe-btn.png) no-repeat; behavior:url(iepngfix.htc); }
input.send-btn { background:url(images/enquire-btn.png) no-repeat; behavior:url(iepngfix.htc); }


/* Tables */
table.display-table { border-collapse: separate; width: 100%; border-spacing: 2px; }
table.display-table td,
table.display-table th { padding: 5px 10px; margin: 5px; background: transparent url(images/features-bg.png) 0 0 repeat; }
table.display-table thead th { background: transparent url(images/features-head-bg.png) 0 0 repeat; } 


div#footer p { text-align: right; color: #e7e5de; text-transform: uppercase; letter-spacing: 1px; font-size: 1em;  }
div#footer p.copyright { float: left; }
div#footer a { color: #fff; text-decoration: none; }
div#footer a:hover { text-decoration: underline; }


/* The villa page */
div.level { clear: both; margin-bottom: 22px; }
div.level h4 { float: left; margin: 0; width: 75px; height: 80px; text-indent: -9999px; }
div#level-5, div#level-5 { background: transparent url(images/level-5.jpg) 0 0 no-repeat; }
div#level-4, div#level-4 { background: transparent url(images/level-4.jpg) 0 0 no-repeat; }
div#level-3, div#level-3 { background: transparent url(images/level-3.jpg) 0 0 no-repeat; }
div#level-2, div#level-2 { background: transparent url(images/level-2.jpg) 0 0 no-repeat; }
div#level-1, div#level-1 { background: transparent url(images/level-1.jpg) 0 0 no-repeat; }
div.level dl { float: right; display: block; width: 485px; margin: 2px 0 0 0; padding: 9px 0; background: url(images/levels-bg.png) 0 0 repeat-y; }
div.level dl.first { margin-top: 0; }
div.level dl dt { float: left; width: 130px; padding: 0 10px; margin-right: 10px;  }
div.level dl dd { float: left; width: 320px; margin: 0; }


div.main-features ul { float: left; width: 260px; }
div.main-features ul.last { float: right; }
div.main-features ul li,
div.features li { list-style: none; margin: 2px 0 0; padding: 4px 10px; background: transparent url(images/features-bg.png) 0 0 repeat; }
div.features h4 { padding: 5px 10px; background: transparent url(images/features-head-bg.png) 0 0 repeat; }

/*
div#header { background-color: #aaa; }
div.wrapper { background-color: #eee;}
div#content { background-color: #ccc; }
div#footer { background-color: green; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { background-color: pink; }*/

/* Floor Plan */
.floorplan-ui { position: relative; margin-bottom: 40px; }
.floorplan-ui .download { position: absolute; right: 0; top: 5px;}
#floorplan { position: relative; width: 858px; height: 548px; border: 1px solid #CAC9C7; background-color: #fff; overflow: hidden; margin-bottom: 10px; }
#floorplan .ui-tabs-nav { position: absolute; top: 5px; left: 5px; width: 272px; height: 538px; z-index: 2; }
#floorplan .ui-tabs-panel { position: absolute; top: 5px; right: 5px; width: 848px; height: 538px; overflow: hidden; z-index: 1; }
#floorplan .ui-tabs-panel img { position: absolute; right: -25px; top: -5px;}  
#floorplan .ui-tabs-hide{display:none;}
/*
Distance from Top to...
	lv 5 =	0
	lv 4 = 90
	lv 3 = 180
	lv 2 = 270
	lv 1 = 360
	next = 450
Distance from left to
	off = 0
	hover = 0
Width of...
	off =	254
	selected = 272

*/
#floorplan .ui-tabs-nav li { list-style: none; margin: 0; padding: 0;}
#floorplan .ui-tabs-nav a,
#floorplan a.mover { position: absolute; left: 0; display: block; height: 90px; width: 254px; background-image: url(images/floorplan-nav.gif); background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; }
#floorplan .ui-tabs-selected a { width: 272px; text-decoration: none;}
#floorplan a#nav-level-5 { background-position: 0 0; top: 0; }
#floorplan a#nav-level-4 { background-position: 0 -90px; top: 90px; }
#floorplan a#nav-level-3 { background-position: 0 -180px; top: 180px; }
#floorplan a#nav-level-2 { background-position: 0 -270px; top: 270px; }
#floorplan a#nav-level-1 { background-position: 0 -360px; top: 360px; }

#floorplan .ui-tabs-selected a#nav-level-5,
#floorplan a#nav-level-5:hover { background-position: -280px 0;}
#floorplan .ui-tabs-selected a#nav-level-4,
#floorplan a#nav-level-4:hover { background-position: -280px -90px;}
#floorplan .ui-tabs-selected a#nav-level-3,
#floorplan a#nav-level-3:hover { background-position: -280px -180px;}
#floorplan .ui-tabs-selected a#nav-level-2,
#floorplan a#nav-level-2:hover { background-position: -280px -270px;}
#floorplan .ui-tabs-selected a#nav-level-1,
#floorplan a#nav-level-1:hover { background-position: -280px -360px;}

#floorplan a#nav-level-5:active { background-position: -560px 0;}
#floorplan a#nav-level-4:active { background-position: -560px -90px;}
#floorplan a#nav-level-3:active { background-position: -560px -180px;}
#floorplan a#nav-level-2:active { background-position: -560px -270px;}
#floorplan a#nav-level-1:active { background-position: -560px -360px;}


#floorplan a.mover { left: 5px; top: 455px; width: 127px; z-index: 3;}
#floorplan a.next-tab { background-position: 0 -450px; }
#floorplan a.prev-tab { background-position: -127px -450px; left: 132px; }
#floorplan a.next-tab:hover { background-position: -280px -450px; }
#floorplan a.prev-tab:hover { background-position: -407px -450px; }
#floorplan a.next-tab:active { background-position: -560px -450px; }
#floorplan a.prev-tab:active { background-position: -687px -450px; }