/* The Canyons Lodge: style.css + nav.css from the old site, merged and trimmed
   (forms, IE6/7 hacks, sIFR and slimbox removed; lightbox, gallery captions and focus states added). */

body { width: 100%; color: #1b1b1b; background: #ac943e url(/images/bg.png) repeat-y center top; font-family: tahoma, verdana, arial, sans-serif; font-size: 62.5%; text-align: center; margin: 0 auto; }
html { min-height: 100%; }
img, object, embed { border: 0; display: block; margin: 0; padding: 0; }

a:visited, a:link { outline: none; color: #7b4906; text-decoration: underline; }
a:hover, a:active, a.active:visited, a.active:link { color: #000; text-decoration: underline; }
a:focus-visible { outline: 2px solid #7b4906; outline-offset: 2px; }

hr.dots { clear: left; width: 100%; height: 0; border: 0; border-bottom: 1px dotted #575757; padding: 0; margin: 0 0 1.1em; }
h2, h3, h4 { padding: 0; margin: 0 0 .8em 0; display: block; font-size: 1.2em; line-height: 1.1em; color: #1b1b1b; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h2 span.testimonial { color: #9d6a2a; padding: 0 0 0 10px; font-weight: normal; }
p { padding: 0; margin: 0 0 .7em 0; font-size: 1.2em; line-height: 1.4em; }
p.intro, h3.intro { font-size: 1.3em; margin: 0 0 1.1em 0; float: left; width: 100%; }
h3.intro { font-size: 1.3em; }
h2.margin { float: left; width: 100%; margin: 1.6em 0 .8em 0; }
ul, ol { clear: left; margin: 0 0 1.1em; padding: 0 0 0 20px; }
ul.margin { margin: 0 0 20px 0; }
ul li, ol li { font-size: 1.2em; line-height: 1.4em; }
li li { font-size: 1em; }
p.center, .center { text-align: center; margin-left: auto; margin-right: auto; }
img.center { max-width: 100%; height: auto; }
p.pair img { display: inline-block; vertical-align: top; margin: 0 6px 6px 0; max-width: 100%; height: auto; }
.contentright img { max-width: 100%; height: auto; }

/* Image-replaced text */
.logo, p.strapline, div.panel h2, div.contentinner ul.aux li, div.header ul.reslinks li.booknow {
	margin: 0; padding: 0; float: left; display: block; text-indent: -8000px; font-size: .05em; line-height: .05em; overflow: hidden;
}
.logo a, div.panel h2 a, div.contentinner ul.aux li a, div.header ul.reslinks li.booknow a { float: left; display: block; text-decoration: none; }
.logo, .logo a { background: url(/images/logo.gif) no-repeat; width: 200px; height: 72px; }
p.strapline { float: right; background: url(/images/straplinenew3.gif) no-repeat top right; width: 328px; margin: 10px 0 0 0; height: 52px; }

h1.sifr { float: left; width: 100%; margin: 0; padding: 0; color: #ac7a3e; font-size: 25px; min-height: 46px; font-weight: bold; font-variant: small-caps; letter-spacing: 0; font-family: 'palatino linotype', palatino, 'Book Antiqua', Georgia, serif; line-height: 1.1em; }

/* Layout */
div.canyons { width: 962px; margin: auto; text-align: left; }
div.headerouter { width: 100%; float: left; background: url(/images/header.jpg) repeat-x center top; margin: 0 0 -27px 0; position: relative; z-index: 200; }
div.header { width: 962px; float: left; padding: 19px 0 0 0; height: 123px; }
div.header ul.reslinks { clear: none; float: right; list-style-type: none; padding: 0 0 0 18px; margin: 7px 0 0 0; width: 132px; height: 29px; }
div.header ul.reslinks li.booknow { margin: 0 0 10px 0; }
div.header ul.reslinks li.booknow, div.header ul.reslinks li.booknow a { width: 132px; height: 29px; background: url(/images/booknow.gif) no-repeat; }
div.header ul.reslinks li a:hover { background-position: bottom left; }
div.header ul.reslinks li.live { text-align: right; font-size: 1.1em; }
div.header ul.reslinks li.live a:link, div.header ul.reslinks li.live a:visited { color: #fff; }
div.header ul.reslinks li.live a:hover, div.header ul.reslinks li.live a:active { color: #000; }

div.contentouterhome, div.contentouter, div.contentpanelouter { position: relative; z-index: 90; width: 100%; float: left; padding: 41px 0 0 0; background: #725e16 url(/images/content.png) repeat-y center top; }
div.contentpanelouter { padding: 0; }
div.panelouter, div.lineouter { position: relative; z-index: 90; width: 100%; float: left; padding: 0; background: url(/images/footer.png) repeat-x center bottom; }
div.lineouter { padding: 0 0 89px 0; }
div.content, div.content34, div.content34gal { position: relative; z-index: 10; float: left; width: 962px; padding: 0; }
div.imageleft { float: left; width: 238px; position: relative; z-index: 100; }
div.imageright { float: right; width: 721px; position: relative; }
div.imageright p, div.imageleft p { margin: 0 !important; }
div.imageright p { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; }
div.imageright p:first-child { position: relative; }
div.imageright p.on { opacity: 1; z-index: 2; }
div.imageright:not(.js) p:first-child { opacity: 1; }
div.content, div.content34, div.content34gal { margin: 3px 0 -90px 0; padding: 0 0 10px 0; background: url(/images/contentbottom.gif) no-repeat bottom left; }
div.content34 { background: url(/images/contentbottom34.gif) no-repeat bottom right; }
div.contentinner { float: left; width: 912px; padding: 13px 25px 15px 25px; background: url(/images/contentinner.gif) repeat-y; }
div.content34 div.contentcorner { float: left; width: 962px; background: url(/images/contentinner34.gif) repeat-y top right; }
div.content34gal div.contentcornergal { float: left; width: 962px; padding-top: 10px; background: url(/images/contenttop.gif) no-repeat top right; }
div.content34 div.contentinner { float: right; width: 665px; padding: 36px 25px 15px 31px; background: url(/images/contentcorner.gif) no-repeat top right; }
div.content34 div.imageleft { margin-bottom: -9px; }
div.contentright { float: right; width: 685px; }

div.content34 div.links { float: left; width: 687px; margin: 0 -22px 0 0; padding: 10px 0 0 0; border-top: 1px dotted #575757; }
div.content34 div.links ul { clear: none; margin: 0; padding: 0; list-style-type: none; width: 100%; float: left; }
div.content34 div.links ul li { margin: 0 0 .6em 0; width: 207px; padding: 0 22px 0 0; float: left; min-height: 2.8em; }
div.content34 div.links ul li a strong { color: #1b1b1b; font-weight: normal; }
div.content34 div.links ul li a:link, div.content34 div.links ul li a:visited { text-decoration: none; }
div.content34 div.links ul li a:hover, div.content34 div.links ul li a:active { text-decoration: underline; }
div.content34 p { float: left; width: 100%; margin: 0 0 .6em 0; }

/* Photo tour numbers */
div.contentinner #phototour { float: left; width: 100%; height: 23px; }
div.contentinner ul.phototour { clear: none; float: left; width: 100%; padding: 0; margin: 0; height: 23px; list-style-type: none; }
div.contentinner ul.phototour li { float: right; padding: 0 0 0 3px; font-size: 1.1em; font-family: 'palatino linotype', palatino, Georgia, serif; font-variant: small-caps; }
div.contentinner ul.phototour li a { float: left; padding: 2px; }
div.contentinner ul.phototour li.pt { padding: 2px; }
div.contentinner ul.phototour li a.active { color: #000; text-decoration: none; font-weight: bold; }

/* Enquire Now button */
div.contentinner ul.aux { clear: none; position: relative; z-index: 20; float: right; width: 133px; margin: -40px 0 0 0; padding: 0; list-style-type: none; }
div.contentinner ul.aux li, div.contentinner ul.aux li a { width: 133px; height: 29px; }
div.contentinner ul.aux li.enquiry, div.contentinner ul.aux li.enquiry a { background: url(/images/enquiry.png) no-repeat; }
div.contentinner ul.aux li a:hover { background-position: bottom left; }

/* Home panels */
div.panels { float: left; width: 962px; margin: 12px 0 0 0; background: url(/images/panels.png) no-repeat bottom left; }
div.panel { float: left; width: 238px; padding: 0 3px 10px 0; }
div.panel h2, div.panel h2 a { width: 238px; height: 37px; }
div.panel h2 { position: relative; z-index: 20; margin: 0; }
div.panel h2.panel1 { background: url(/titles/panel1.gif) no-repeat; }
div.panel h2.panel2 { width: 239px; background: url(/titles/panel2.gif) no-repeat; }
div.panel h2.panel3 { background: url(/titles/panel3new.gif) no-repeat; }
div.panel h2.panel4 { background: url(/titles/panel4new.gif) no-repeat; }
div.panel p { position: relative; z-index: 10; float: left; width: 210px; font-size: 1.1em; padding: 10px 14px 0 14px; margin: 0; }
#panelright { padding: 0; }
#panel2 { width: 239px; }

/* Gallery */
div.gallery { float: right; width: 665px; min-height: 695px; }
div.gallery img { float: left; max-width: 100%; height: auto; }
div.gallery p { margin: 0; }
div.gallery p.image { width: 665px; float: left; margin-bottom: 13px; }
div.gallery p.caption { clear: left; }
ul.gallery { width: 238px; margin: 0; padding: 0; list-style-type: none; float: left; }
ul.gallery li { float: left; padding: 0 7px 7px 0; font-size: 1em; line-height: 0; }
ul.gallery li a.active img { opacity: .3; }

/* Main nav (image tabs with dropdowns) */
ul.nav { clear: none; float: left; width: 960px; list-style-type: none; padding: 0; margin: 22px 0 0 0; }
ul.nav > li { text-indent: -8000px; float: left; display: block; padding: 0; margin: 0 -28px 0 0; font-size: 1em; line-height: .05em; position: relative; }
ul.nav > li > a { float: left; display: block; text-decoration: none; overflow: hidden; }
ul.nav > li, ul.nav > li > a { width: 161px; height: 29px; }
ul.nav li.home, ul.nav li.home > a { background: url(/nav/home.png) no-repeat; z-index: 160; }
ul.nav li.lodge, ul.nav li.lodge > a { background: url(/nav/lodge.png) no-repeat; z-index: 150; }
ul.nav li.accomm, ul.nav li.accomm > a { background: url(/nav/accomm.png) no-repeat; z-index: 140; }
ul.nav li.weddings, ul.nav li.weddings > a { background: url(/nav/weddings.png) no-repeat; z-index: 130; }
ul.nav li.activities, ul.nav li.activities > a { background: url(/nav/activities.png) no-repeat; z-index: 120; }
ul.nav li.gallery, ul.nav li.gallery > a { background: url(/nav/gallery.png) no-repeat; z-index: 110; }
ul.nav li.specials, ul.nav li.specials > a { background: url(/nav/specials.png) no-repeat; z-index: 100; }
ul.nav > li > a.active, ul.nav > li > a:hover, ul.nav > li:hover > a, ul.nav > li:focus-within > a { background-position: bottom left; }
ul.nav ul { clear: none; visibility: hidden; position: absolute; float: left; width: 128px; padding: 12px 0; margin: 0; list-style-type: none; background: url(/nav/sub.png) no-repeat bottom left; top: 28px; left: 17px; text-align: left; }
ul.nav ul li { padding: 0; background: none; font-size: 1.1em; line-height: 1.1em; width: 128px; margin: 0; text-indent: 0; float: none; }
ul.nav ul a { display: block; width: 104px; padding: 3px 12px; text-decoration: none; }
ul.nav ul a:link, ul.nav ul a:visited { color: #795324; text-decoration: none; }
ul.nav ul a:hover, ul.nav ul a:active, ul.nav ul a.active:link, ul.nav ul a.active:visited { color: #000; }
ul.nav li:hover ul, ul.nav li:focus-within ul { visibility: visible; }

/* Sub nav */
div.subnav { float: left; width: 206px; }
div.subnav ul.ta { float: left; width: 196px; list-style-type: none; padding: 0 0 0 10px; margin: 0 0 1em; }
ul.subnav { clear: none; float: left; width: 206px; list-style-type: none; padding: 0; margin: 24px 0; }
ul.subnav li { float: left; display: block; padding: 0 0 7px 0; margin: 0; font-size: 1.1em; line-height: 1.1em; letter-spacing: .05em; font-family: 'palatino linotype', palatino, Georgia, serif; width: 100%; text-transform: uppercase; font-weight: bold; }
ul.subnav li a { float: left; display: block; }
ul.subnav li a:link, ul.subnav li a:visited, ul.subnav li a:hover, ul.subnav li a:active { text-decoration: none; }
ul.subnav li a.active { color: #000; }
div.imageleft div.subnav { float: left; width: 206px; padding: 0 32px 0 0; }
div.imageleft div.subnav ul.subnav { margin-top: 0; }
div.subnav p { float: left; width: 100%; }

/* Weddings side panel */
.wedding-pack { float: left; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; margin-bottom: 10px; }
.wedding-pack p { text-align: center; font-size: 20px; font-family: Georgia, serif; color: #f90; margin: .6em 0; line-height: 1.2; }
.wedding-pack p span { font-size: 26px; }
p.enquire-btn { float: left; width: 100%; font-size: 1.4em; text-align: center; }
p.enquire-btn a:link, p.enquire-btn a:visited { display: inline-block; padding: 8px 16px; background: #ac7a3e; color: #fff; text-decoration: none; border-radius: 3px; }
p.enquire-btn a:hover { background: #7b4906; }
a.booknow-link { font-weight: bold; }

/* Footer */
ul.footer { clear: none; float: left; width: 962px; padding: 10px 0; margin: 0; list-style-type: none; }
ul.footer li { line-height: 1.1em; font-size: 1.1em; float: left; color: #7b4906; padding: 0 8px; border-left: 1px solid #7b4906; }
ul.footer li.swordfox { padding-right: 2px; }
ul.footer li.swordfox a { font-weight: bold; }
ul.footer li.copy, ul.footer li.links { border-left: 0 none; padding-left: 0; }
ul.footer li.swordfox, ul.footer li.copy { float: right; }
ul.footer li a:link, ul.footer li a:visited { color: #7b4906; text-decoration: underline; }
ul.footer li a:hover, ul.footer li a:active { color: #000; }

/* Lightbox (replaces slimbox) */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .8); cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, .5); background: #fff; padding: 8px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media print {
	body { background: #fff; font-size: 75%; }
	div.headerouter, ul.nav, ul.reslinks, div.imageright, div.imageleft, div.subnav, #phototour, ul.aux, div.panels h2 { display: none !important; }
	div.canyons, div.contentright, div.contentinner, div.content34 div.contentinner { width: auto; float: none; background: none; padding: 0; }
	div.contentouterhome, div.contentouter, div.contentpanelouter, div.lineouter, div.panelouter, div.content, div.content34, div.content34gal, div.contentcorner, div.contentcornergal { background: none; padding: 0; margin: 0; float: none; }
}

/* Home: keep mixed-size photos inside the 721x352 frame */
div.contentouterhome div.imageright { height: 352px; overflow: hidden; }
div.contentouterhome div.imageright img { width: 721px; height: 352px; object-fit: cover; }