body { font: normal 13px 'lucida sans', sans-serif; color: #643f12; background: #958fbf; } /* top shadow */ body:before { content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } /* choice bg */ body.monkey1 { background: #958fbf url('bg/monkey1b.jpg') top center no-repeat; } /*splash*/ body.r7c { background: #958fbf url('bg/r7c.jpg') top center no-repeat; } /*main*/ body.r7c2 { background: #958fbf url('bg/r7c2.jpg') top center no-repeat; } /*main spanish*/ body.r8b { background: #958fbf url('bg/r8b.jpg') top center no-repeat; } /*cafe*/ body.r15c { background: #958fbf url('bg/r15c.jpg') top center no-repeat; } /*hotel*/ body.r15c2 { background: #958fbf url('bg/r15c2.jpg') top center no-repeat; } /*hotel spanish*/ body.r18b { background: #958fbf url('bg/r18c.jpg') top center no-repeat; } /*about*/ body.dt2c { background: #958fbf url('bg/dt2c.jpg') top center no-repeat; } /*location*/ body.r16 { background: #958fbf url('bg/r16b.jpg') top center no-repeat; } /*pp*/ body.dt1 { background: #958fbf url('bg/dt1.jpg') top center no-repeat; } body.dt1b { background: #958fbf url('bg/dt1b.jpg') top center no-repeat; } body.dt1c { background: #958fbf url('bg/dt1c.jpg') top center no-repeat; } body.dt2 { background: #958fbf url('bg/dt2.jpg') top center no-repeat; } body.dt2b { background: #958fbf url('bg/dt2b.jpg') top center no-repeat; } body.dt3 { background: #958fbf url('bg/dt3.jpg') top center no-repeat; } body.dt3b { background: #958fbf url('bg/dt3b.jpg') top center no-repeat; } body.dt4 { background: #958fbf url('bg/dt4.jpg') top center no-repeat; } body.dt5 { background: #958fbf url('bg/dt5.jpg') top center no-repeat; } body.dt6 { background: #958fbf url('bg/dt6.jpg') top center no-repeat; } body.dt6b { background: #958fbf url('bg/dt6b.jpg') top center no-repeat; } body.dt7 { background: #958fbf url('bg/dt7.jpg') top center no-repeat; } body.dt7b { background: #958fbf url('bg/dt7b.jpg') top center no-repeat; } body.dt7c { background: #958fbf url('bg/dt7c.jpg') top center no-repeat; } body.dt7d { background: #958fbf url('bg/dt7d.jpg') top center no-repeat; } body.dt8 { background: #958fbf url('bg/dt8.jpg') top center no-repeat; } body.dt8b { background: #958fbf url('bg/dt8b.jpg') top center no-repeat; } body.dt8c { background: #958fbf url('bg/dt8c.jpg') top center no-repeat; } body.dt9 { background: #958fbf url('bg/dt9.jpg') top center no-repeat; } body.dt10 { background: #958fbf url('bg/dt10.jpg') top center no-repeat; } body.dt10b { background: #958fbf url('bg/dt10b.jpg') top center no-repeat; } body.dt10c { background: #958fbf url('bg/dt10c.jpg') top center no-repeat; } body.dt10d { background: #958fbf url('bg/dt10d.jpg') top center no-repeat; } body.dt11 { background: #958fbf url('bg/dt11.jpg') top center no-repeat; } body.dt11b { background: #958fbf url('bg/dt11b.jpg') top center no-repeat; } body.dt11c { background: #958fbf url('bg/dt11c.jpg') top center no-repeat; } body.dt11d { background: #958fbf url('bg/dt11d.jpg') top center no-repeat; } body.mix { background: #958fbf url('bg/mixed1.jpg') top center no-repeat; } body.g1 { background: #958fbf url('bg/grunge1.jpg') top center no-repeat; } body.g2 { background: #958fbf url('bg/grunge2.jpg') top center no-repeat; } body.g3 { background: #958fbf url('bg/grunge3.jpg') top center no-repeat; } body.g4 { background: #958fbf url('bg/grunge4.jpg') top center no-repeat; } body.g5 { background: #958fbf url('bg/grunge5.jpg') top center no-repeat; } body.g6 { background: #958fbf url('bg/grunge6.jpg') top center no-repeat; } body.g7 { background: #958fbf url('bg/grunge7.jpg') top center no-repeat; } body.rust1 { background: #958fbf url('bg/rust1.jpg') top center no-repeat; } body.rust2 { background: #958fbf url('bg/rust2.jpg') top center no-repeat; } body.rust3 { background: #958fbf url('bg/rust3.jpg') top center no-repeat; } body.rust3b { background: #958fbf url('bg/rust3b.jpg') top center no-repeat; } body.r1 { background: #958fbf url('bg/r1.jpg') top center no-repeat; } body.r2 { background: #958fbf url('bg/r2.jpg') top center no-repeat; } body.r3 { background: #958fbf url('bg/r3.jpg') top center no-repeat; } body.r4 { background: #958fbf url('bg/r4.jpg') top center no-repeat; } body.r5 { background: #958fbf url('bg/r5.jpg') top center no-repeat; } body.r6 { background: #958fbf url('bg/r6.jpg') top center no-repeat; } body.r7 { background: #958fbf url('bg/r7.jpg') top center no-repeat; } body.r7b { background: #958fbf url('bg/r7b.jpg') top center no-repeat; } body.r8 { background: #958fbf url('bg/r8.jpg') top center no-repeat; } body.r9 { background: #958fbf url('bg/r9.jpg') top center no-repeat; } body.r10 { background: #958fbf url('bg/r10.jpg') top center no-repeat; } body.r11 { background: #958fbf url('bg/r11.jpg') top center no-repeat; } body.r12 { background: #958fbf url('bg/r12.jpg') top center no-repeat; } body.r13 { background: #958fbf url('bg/r13.jpg') top center no-repeat; } body.r14 { background: #958fbf url('bg/r14.jpg') top center no-repeat; } body.r15 { background: #958fbf url('bg/r15.jpg') top center no-repeat; } body.r15b { background: #958fbf url('bg/r15b.jpg') top center no-repeat; } body.r17 { background: #958fbf url('bg/r17.jpg') top center no-repeat; } body.r18 { background: #958fbf url('bg/r18.jpg') top center no-repeat; } body.r19 { background: #958fbf url('bg/r19.jpg') top center no-repeat; } body.r20 { background: #958fbf url('bg/r20.jpg') top center no-repeat; } body.k1 { background: #958fbf url('bg/k1.jpg') top center no-repeat; } body.k2 { background: #958fbf url('bg/k2.jpg') top center no-repeat; } body.k2b { background: #958fbf url('bg/k2b.jpg') top center no-repeat; } body.k3 { background: #958fbf url('bg/k3.jpg') top center no-repeat; } body.k4 { background: #958fbf url('bg/k4.jpg') top center no-repeat; } body.k5 { background: #958fbf url('bg/k5.jpg') top center no-repeat; } body.mia1 { background: #958fbf url('bg/mia1.jpg') top center no-repeat; } body.monkey2 { background: #958fbf url('bg/monkey2.jpg') top center no-repeat; } body.monkey3 { background: #958fbf url('bg/monkey3.jpg') top center no-repeat; } body.paper2 { background: #958fbf url('bg/paper2.jpg') top center no-repeat; } body.w1 { background: #958fbf url('bg/watercolor1.jpg') top center no-repeat; } body.w1b { background: #958fbf url('bg/watercolor1b.jpg') top center no-repeat; } body.w2 { background: #958fbf url('bg/watercolor2.jpg') top center no-repeat; } body.w3{ background: #958fbf url('bg/watercolor3.jpg') top center no-repeat; } body.w4 { background: #958fbf url('bg/watercolor4.jpg') top center no-repeat; } body.w4b { background: #958fbf url('bg/watercolor4b.jpg') top center no-repeat; } body.w5 { background: #958fbf url('bg/watercolor5.jpg') top center no-repeat; } body.w6 { background: #958fbf url('bg/watercolor6.jpg') top center no-repeat; } body.w7 { background: #958fbf url('bg/watercolor7.jpg') top center no-repeat; } body.w7b { background: #958fbf url('bg/watercolor7b.jpg') top center no-repeat; } body.w7c { background: #958fbf url('bg/watercolor7c.jpg') top center no-repeat; } body.w7d { background: #958fbf url('bg/watercolor7d.jpg') top center no-repeat; } body.w8 { background: #958fbf url('bg/watercolor8.jpg') top center no-repeat; } body.w9 { background: #958fbf url('bg/watercolor9.jpg') top center no-repeat; } body.w10 { background: #958fbf url('bg/watercolor10.jpg') top center no-repeat; } body.w11 { background: #958fbf url('bg/w11.jpg') top center no-repeat; } body.w12 { background: #958fbf url('bg/w12.jpg') top center no-repeat; } body.w13 { background: #958fbf url('bg/w13.jpg') top center no-repeat; } body.w14 { background: #958fbf url('bg/w14.jpg') top center no-repeat; } body.w15 { background: #958fbf url('bg/w15.jpg') top center no-repeat; } body.w16 { background: #958fbf url('bg/w16.jpg') top center no-repeat; } body.w17 { background: #958fbf url('bg/w17.jpg') top center no-repeat; } body.w18 { background: #958fbf url('bg/w18.jpg') top center no-repeat; } body.w19 { background: #958fbf url('bg/w19.jpg') top center no-repeat; } body.w20 { background: #958fbf url('bg/w20.jpg') top center no-repeat; } body.w21 { background: #958fbf url('bg/w21.jpg') top center no-repeat; } body.w22 { background: #958fbf url('bg/w22.jpg') top center no-repeat; } body.w22b { background: #958fbf url('bg/w22b.jpg') top center no-repeat; } body.w23 { background: #958fbf url('bg/w23.jpg') top center no-repeat; } body.w24 { background: #958fbf url('bg/w24.jpg') top center no-repeat; } /* SPLASH ////////////////////////////////*/ #splash { position: relative; margin-top: 50px; padding: 0; width: 700px; height: 430px; background: #fff url('paperbk.jpg') bottom no-repeat; z-index: 24; -moz-box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); -moz-border-radius: 18px 18px 0 0; -webkit-border-radius: 18px 18px 0 0; } #tags { position: absolute; top: 78px; left: 454px; width: 155px; height: 308px; background: transparent url('tags.png') no-repeat 0 0; } #line { position: absolute; top: 135px; left: 109px; width: 575px; height: 20px; background: transparent url('line.png') no-repeat 0 0; } #arrow { position: absolute; top: 215px; left: 235px; width: 55px; height: 82px; background: transparent url('arrow.png') no-repeat 0 0; z-index: 100; } #photo1 { position: absolute; top: 235px; left: 90px; width: 200px; height: 150px; background: transparent; } #photo2 { position: absolute; top: 260px; left: 230px; width: 200px; height: 150px; background: transparent; } #eng { position: absolute; top: 272px; left: 554px; width: 50px; height: 61px; } #eng2 { display: block; width: 50px; height: 61px; background: url('roll-eng.png') no-repeat 0 0; } #eng2:hover { background-position: 0 -61px; } #eng2 span { position: absolute; top: -999em; } #sp {position: absolute; top: 337px; left: 498px; width: 68px; height: 27px;} #sp2 { display: block; width: 68px; height: 27px; background: url('roll-sp.png') no-repeat 0 0; } #sp2:hover { background-position: 0 -27px; } #sp2 span { position: absolute; top: -999em; } #footersplash { position: relative; margin: 0px; width: 700px; height: 40px; background: #7d7b6f url('footer.jpg') top no-repeat; -moz-border-radius: 0 0 18px 18px; -webkit-border-radius: 0 0 18px 18px; -moz-box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); } #footersplash a, #footersplash a:link, #footersplash a:visited { color: #a7dfdb; text-decoration: none; border-bottom: 1px #7d7b6f dotted; } #footersplash a:hover { color: #fff; text-decoration: none; border-bottom: 1px #fff dotted; } /* PP */ #tag-pp { position: absolute; top: 200px; right: 35px; width: 145px; height: 100px; background: transparent; text-align: center; } #tag-pp2 { position: absolute; top: 220px; right: 190px; width: 145px; height: 100px; background: transparent; text-align: center; } #cc { position: absolute; bottom: 10px; right: 20px; width: 335px; height: 120px; background: transparent url('cc3.png') no-repeat 0 0; } #thanks-pp { position: absolute; top: 50px; background: transparent url('tag-pp.png') center no-repeat; width: 227px; height: 388px; } /* END SPLASH ////////////////////////////////*/ /* HEADER */ #header { position: relative; margin-top: 35px; width: 700px; height: 230px; background: transparent url('header.jpg') 0 0 no-repeat; z-index: 25; -moz-box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); box-shadow: -2px 2px 7px 2px rgba(0, 0, 0, 0.4), 2px 2px 7px 2px rgba(0, 0, 0, 0.4); -moz-border-radius: 18px 18px 0 0; -webkit-border-radius: 18px 18px 0 0; } #logo, #logosp { position: absolute; width: 312px; height: 240px; z-index: 25; } #logo { top: -20px; left: 230px; background: transparent url('logo.png') 0 0 no-repeat; } #logosp { top: -20px; left: 41px; background: transparent url('logosp.png') 0 0 no-repeat;} /* SOCIAL HEADER */ #mediabox { position: absolute; bottom: 10px; left: 20px; height: 30px; background: transparent; border: 1px solid transparent; z-index: 100; } .sprite1 { background-image: url('social/sprite1.png'); background-color: transparent; background-repeat: no-repeat; display: inline-block; padding-right: 7px; } #facebook1 { background-position: 0px 0px; width: 32px; height: 32px; } #facebook1:hover { background-position: 0px -32px; } #twitter1 { background-position: -39px 0px; width: 32px; height: 32px; } #twitter1:hover { background-position: -39px -32px; } #stumbleupon1 { background-position: -78px 0px; width: 32px; height: 32px; } #stumbleupon1:hover { background-position: -78px -32px;} #favorites1 { background-position: -117px 0px; width: 32px; height: 32px; } #favorites1:hover { background-position: -117px -32px; } #mail1 { background-position: -156px 0px; width: 32px; height: 32px; } #mail1:hover { background-position: -156px -32px; } /* SOCIAL FOOTER */ #mediabox2 { top: 0px; right: 0px; width: 28px; background: transparent; border: 1px solid transparent; z-index: 100; } .sprite2 { background-image: url('social/sprite2.png'); background-color: transparent; background-repeat: no-repeat; display: block; margin-bottom: 5px; } #facebook2 { background-position: 0px 0px; width: 30px; height: 30px; } #facebook2:hover { background-position: 0px -30px; } #twitter2 { background-position: -35px 0px; width: 30px; height: 30px; } #twitter2:hover { background-position: -35px -30px; } #stumbleupon2 { background-position: -70px 0px; width: 30px; height: 30px; } #stumbleupon2:hover { background-position: -70px -30px;} #favorites2 { background-position: -105px 0px; width: 30px; height: 30px; } #favorites2:hover { background-position: -105px -30px; } #mail2 { background-position: -140px 0px; width: 30px; height: 30px; } #mail2:hover { background-position: -140px -30px; } /* HEADER NAVIGATION */ #navig { position: absolute; top: -5px; right: 20px; width: 162px; height: 251px; background: transparent url('navtag.png') 0 0 no-repeat; text-align: center; } #navig p { line-height: 19px; font-size: 11px; margin-top: 70px; -webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);writing-mode: lr-tb; } #navig a, #navig a:link, #navig a:visited { color: #747267; font-weight: bold; text-decoration: none; overflow: hidden; border: 0; letter-spacing: .03em; } #navig a:hover, #navig a:active { color:#fff; text-decoration: none; border-bottom: 1px #fff dotted; } .current { font-weight: bold; color: #fff; overflow: hidden; letter-spacing: .03em; } /* GENERAL NAVIGATION */ a:link, a:visited { font-weight: normal; text-decoration: none; color: #15af8f; letter-spacing: .03em; } a:hover { text-decoration: none; color: #958fbf; } a:active, a:focus { width: 0; height: 0; outline: 0; } a img { margin-bottom: -1px; vertical-align: sub; border: none; }/**/ /* GLOBAL CONTENT */ #contentbk { position: relative; margin: 0px; width: 700px; background: #fff url('paperbk.jpg') bottom no-repeat; z-index: 24; -moz-box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.4), 1px 1px 3px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.4), 1px 1px 3px 1px rgba(0, 0, 0, 0.4); box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.4), 1px 1px 3px 1px rgba(0, 0, 0, 0.4); } #content { position: relative; width: 600px; margin: 0px auto; padding-bottom: 10px; background: transparent; clear: both; } #content a:link, #content a:visited { font-weight: normal; text-decoration: none; color: #15af8f; border: 0; letter-spacing: .03em; } #content a:hover { text-decoration: none; border-bottom: 1px #8179b3 dotted; color: #8179b3; } #content a:active, #content a:focus { width: 0; height: 0; outline: 0; } /* UNDERLINE*/ #title { position: relative; background: transparent; } #thanks { position: absolute; background: transparent url('thanks.png') center no-repeat; width: 227px; height: 388px; } #thanks2 { position: absolute; background: transparent url('thanks2.png') center no-repeat; width: 227px; height: 388px; } #back { position: absolute; top: 320px; left: 100px; width: 100px; height: 30px; background: transparent; } h1 { margin: 0 0 20px 30px; padding-top: 0px; text-align: left; font: normal 22px 'lucida sans'; color: #df9027; letter-spacing: 1px; } h3 { margin: 0; padding: 0; text-align: left; font: normal 20px 'lucida sans'; color: #d2d3c0; letter-spacing: 0; } /*"GET IN TOUCH"*/ .sep, .sep2 { width: 50px; height: 20px; background: transparent url('separa.png') center no-repeat; margin: 0px auto; } .sep2 { clear: both; } .bold { font-weight: bold;} .clear { clear: both; } .hi { color:#ac6c1f; letter-spacing: .05em;} .hiun { letter-spacing: .05em; text-decoration: underline; font-style: italic; } .ital { font-style: italic; } p { margin-top: 0; } .right { float: right; } .sub { color: #000; text-align: right; } /* MAIN */ #title.main { float: right; background: transparent url('main.png') bottom left no-repeat; width: 562px; height: 145px; padding-top: 10px; } #title.main2 { float: right; background: transparent url('main2.png') bottom left no-repeat; width: 562px; height: 145px; padding-top: 10px; } #contentmain { position: relative; width: 600px; margin: 0px auto; padding-bottom: 10px; background: transparent; clear: both; } #contentmain a:link, #contentmain a:visited { font-weight: normal; text-decoration: none; color: #15af8f; } #contentmain a:hover { text-decoration: none; color: #8179b3; cursor: pointer; } .leftcol-main {float: left; width: 200px; text-align: left; margin-top: -20px; margin-left: 20px; } .rightcol-main {float: right; width: 350px; text-align: left; margin-top: -20px; } .rightcol-main p { line-height: 19px; margin-left: 40px; margin-top: 20px; } #featcont { width: 560px; margin: 0px auto; text-align: center; } #featcont ul { clear: both; text-align: left; margin: 20px 0px 10px 0px; padding-top: 25px;} #featcont ul li { background: transparent url('bullet4.png') left top no-repeat; list-style-type: none; padding-left: 20px; padding-bottom: 5px; margin: 0 0 7px -40px; line-height: 17px; } #feature1 { float: left; width: 230px; margin: 30px 0 10px 40px; } #hotel { position: relative; width: 98px; height: 27px; margin: 0px auto 15px auto; } #hotel2 { display: block; width: 98px; height: 27px; background: url('hotel-r.png') no-repeat 0 0; } #hotel2:hover { background-position: 0 -27px; } #hotel2 span { position: absolute; top: -999em; } #more { position: relative; width: 31px; height: 22px; margin: 0 0 0 120px;} #more2 { display: block; width: 31px; height: 22px; background: url('arrow2-r.png') no-repeat 0 0; } #more2:hover { background-position: 0 -22px; } #more2 span { position: absolute; top: -999em; } #feature2 { float: right; width: 235px; margin: 0px 0 10px 0px; } #cafe { position: relative; width: 98px; height: 27px; margin: 0px auto 15px auto; } #cafe2 { display: block; width: 98px; height: 27px; background: url('cafe-r.png') no-repeat 0 0; } #cafe2:hover { background-position: 0 -27px; } #cafe2 span { position: absolute; top: -999em; } #morec { position: relative; width: 31px; height: 22px; margin: 0 0 0 130px;} #morec2 { display: block; width: 31px; height: 22px; background: url('arrow2-r.png') no-repeat 0 0; } #morec2:hover { background-position: 0 -22px; } #morec2 span { position: absolute; top: -999em; } /* CAFE */ #content-cafe { position: relative; width: 600px; margin: 0px auto; padding-bottom: 10px; clear: both; } #content-cafe2 { position: relative; width: 600px; margin: 0px auto; padding-bottom: 10px; text-align: center; clear: both; } #title.cafe { float: left; margin: 20px 0 10px 0; background: url('cafe3.png') 0 0 no-repeat; width: 400px; height: 111px; } #quote1 { position: absolute; bottom: 75px; right: 30px; width: 142px; height: 51px; background: url('quote1b.png') 0 0 no-repeat; } .leftcol-cafe {float: left; width: 350px; text-align: left; margin: 20px 0 30px 0; } .rightcol-cafe {float: right; width: 200px; text-align: right; margin-top: 0px; padding-top: 20px; } .leftcol-cafe p {line-height: 19px; } a.phone { z-index: 24; } a.phone:link, a.phone:visited { font-weight: normal; text-decoration: none; border-bottom: 1px #ac6c1f dotted; color: #67acaa; letter-spacing: .03em; } a.phone:hover { z-index: 25; text-decoration: none; border: 0; color: #8179b3; } a.phone span { display: none; } a.phone:hover span { display: block; position: absolute; bottom: 100px; left: 40px; width: 130px; height: 55px; background: transparent url('phone.png') 0 0 no-repeat; } #horas1 {position: absolute; top: 40px; right: -20px; width: 197px; height: 41px; background: transparent url('horas1.png') 0 0 no-repeat; } #horas1b {position: absolute; top: 40px; right: -20px; width: 197px; height: 41px; background: transparent url('horas1b.png') 0 0 no-repeat; } #horas2 {position: absolute; top: 62px; right: -32px; width: 160px; height: 75px; background: transparent url('horas2.png') 0 0 no-repeat; } #horas2b {position: absolute; top: 62px; right: -32px; width: 160px; height: 75px; background: transparent url('horas2b.png') 0 0 no-repeat; } #dinner {position: absolute; top: 105px; right: -22px; width: 230px; text-align: center; background: transparent; border: 1px solid #747267; padding: 5px; } #dinner2 {position: absolute; top: 105px; right: -22px; width: 250px; text-align: center; background: transparent; border: 1px solid #747267; padding: 5px; } #grill1 { position: absolute; top: 190px; right: 50px; width: 160px; height: 200px; background: transparent; } #grill2 { position: absolute; top: 245px; right: -20px; width: 190px; height: 150px; background: transparent; } #grill3 { position: absolute; top: 370px; right: 0px; width: 190px; height: 150px; background: transparent; } #wine {position: absolute; top: -65px; left: 25px; width: 175px; height: 173px; background: transparent url('wine.png') center center no-repeat; z-index: 100;} /*DO NOT ERASE!! #note {position: absolute; top: 55px; right: 0px; width: 173px; height: 176px; background: transparent url('note3.png') 0 0 no-repeat; z-index: 100; } DO NOT ERASE!! */ /* HOTEL */ #title.hotel { float: right; margin: 0 5px 30px 0; background: url('hotel2.png') 0 0 no-repeat; width: 350px; height: 94px;} #title.hotel2 { float: right; margin: 0 5px 10px 0; background: url('hotel2.png') 0 0 no-repeat; width: 350px; height: 94px;} #quote2 { position: absolute; bottom: 25px; right: 0px; width: 145px; height: 40px; background: url('quote2.png') 0 0 no-repeat; } .leftcol-hotel {float: left; width: 250px; text-align: left; margin-top: 90px; } .rightcol-hotel {float: right; width: 350px; text-align: left; padding-top: 30px; } .rightcol-hotel p { line-height: 19px; margin-left: 40px; } #photo3 { position: absolute; top: 167px; left: 90px; width: 200px; height: 150px; background: transparent; } #casitas { position: relative; margin-top: 40px; width: 600px; text-align: center; } #casitas2 { position: relative; margin-top: 0px; width: 600px; text-align: center; } .casita { float: right; margin: 10px 0 0px 0px; width: 150px; height: 130px; } h2 { margin: 0px 0 10px 0; padding: 0; text-align: center; font: bold 12px 'lucida sans'; color: #df9027; letter-spacing: 0px; } h2.gal { margin: 0 40px 10px 0; padding: 0; text-align: right; font: bold 14px 'trebuchet ms'; color: #e58901; letter-spacing: 1px; } .rates { font: normal 14px 'trebuchet ms'; color: #e58901; } .casita p { text-align: center; margin: 0; padding: 0px;} .casita p.rate { font: normal 14px 'trebuchet ms'; color: #e58901; margin-top: 10px; } .hi2 { color:#ffbf4f; letter-spacing: 1px;} a.phone2 { z-index: 24; } a.phone2:link, a.phone2:visited { font-weight: normal; text-decoration: none; border-bottom: 1px #ac6c1f dotted; color: #67acaa; letter-spacing: .03em; } a.phone2:hover { z-index: 25; text-decoration: none; border: 0; color: #8179b3; } a.phone2 span { display: none; } a.phone2:hover span { display: block; position: absolute; bottom: 5px; right: 150px; width: 130px; height: 55px; background: transparent url('phone3.png') 0 0 no-repeat; } #arrow2 { position: absolute; bottom: -105px; right: 80px; width: 55px; height: 100px; background: transparent url('arrow2.png') no-repeat 0 0; z-index: 100; } #arrow3 { position: absolute; bottom: -40px; right: 80px; width: 55px; height: 76px; background: transparent url('arrow3.png') no-repeat 0 0; z-index: 100; } /* ABOUT US */ #title.aboutus { float: left; margin: 0px; background: url('about.png') 0 0 no-repeat; width: 423px; height: 157px;} #title.aboutus2 { float: left; margin: 0px; background: url('about2.png') 0 0 no-repeat; width: 423px; height: 157px;} #content-us { position: relative; width: 600px; margin: 0px auto; padding-bottom: 20px; clear: both; } .leftcol-us {float: left; width: 215px; text-align: left; margin-top: 60px; padding-bottom: 20px; } .rightcol-us {float: right; width: 373px; text-align: left; margin-top: 0px; padding-top: 0px; } .leftcol-us2 {float: left; width: 215px; text-align: left; margin: 0px; padding-bottom: 20px; } .rightcol-us2 {float: right; width: 373px; text-align: left; margin-top: 20px; padding-top: 0px; } ul.about { clear: both; text-align: left; margin: 0 0 25px 130px; padding: 0; } ul.about li { margin-bottom: 10px; background: transparent url('bullet4.png') left top no-repeat; list-style-type: none; padding-left: 22px; padding-bottom: 2px; margin-left: -20px; line-height: 17px;} #cher { float: right; background: transparent url('ch.png') 0 0 no-repeat; width: 308px; height: 69px; margin: 0; } #sebnat { float: right; background: transparent url('sebnat.png') 0 0 no-repeat; width: 492px; height: 92px; margin: 0; } #sebnat2 { float: right; background: transparent url('sebnat2.png') 0 0 no-repeat; width: 492px; height: 92px; margin: 0; } #seb{ float: right; background: transparent url('seb1.png') 0 0 no-repeat; width: 492px; height: 92px; margin: 0; } #seb2 { float: right; background: transparent url('seb2.png') 0 0 no-repeat; width: 492px; height: 92px; margin: 0; } /* LOCATION */ #title.location { float: left; margin: 0px; background: url('location.png') 0 0 no-repeat; width: 416px; height: 110px; margin: 10px 0 10px 0; } #title.location2 { float: left; margin: 0px; background: url('location2.png') 0 0 no-repeat; width: 416px; height: 110px; margin: 10px 0 10px 0; } #content-loc { position: relative; width: 600px; padding-bottom: 10px; margin: 0px auto; clear: both; } #content-loc p { line-height: 19px; } #map1 { width: 500px; height: 250px; margin: 0px auto 20px auto; clear: both; } #quote3 { float: right; width: 267px; height: 42px; background: url('quote3.png') 0 0 no-repeat; margin-bottom: 20px; } .leftcol-loc {float: left; width: 320px; text-align: left; margin-top: 20px; padding-bottom: 20px; } .rightcol-loc {float: right; width: 240px; text-align: left; margin-top: 20px; padding-top: 0px; } /* FOOTER */ #footer { position: relative; margin: 0px; width: 700px; height: 235px; background: #7d7b6f url('footer.jpg') top no-repeat; -moz-border-radius: 0 0 18px 18px; -webkit-border-radius: 0 0 18px 18px; -moz-box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); box-shadow: -1px 4px 3px 1px rgba(0, 0, 0, 0.4), 1px 4px 3px 1px rgba(0, 0, 0, 0.4); } #footcont { position: relative; top: 20px; left: 20px; margin: 0px; width: 680px; height: 175px; text-align: left; color: #ccc;} #footcont2 { float: left; width: 230px; height: 172px; margin-right: 10px; margin-left: 20px; } #footcont2 p { margin: 18px 0 10px 0; line-height: 18px; } #footcont2 a, #footcont2 a:link, #footcont2 a:visited { color: #a7dfdb; text-decoration: none; font-weight: normal; border: 0; } #footcont2 a:hover { color: #fff; text-decoration: none; border-bottom: 1px #fff dotted;font-weight: normal; } #follow { position: absolute; top: 130px; left: 80px; width: 110px; height: 48px; } #follow2 { display: block; width: 110px; height: 48px; background: url('social/followus.png') no-repeat 0 0; } #follow2:hover { background-position: 0 -48px; border: 0px; } #follow2 span { position: absolute; top: -999em; } #footcont3 { float: left; width: 205px; height: 155px; } #footcont3 input.field1 { float: right; width: 200px; background: #fff; color: #757558; text-align: left; padding-left: 5px; margin-top: 10px; height: 25px; font-size: 10px; border: 0; } #footcont3 textarea { float: right; width: 200px; height: 45px; margin-top: 10px; background: #fff; color: #666; text-align: left; padding-left: 5px; border: 0; resize: none; } #footcont3 input.boton, #footcont3 input.boton:active { float: right; width: 70px; margin-top: 13px; background: #615f54; color: #a7dfdb; text-align: center; height: 21px; border: 0px dotted #9f9f9f; padding-bottom: 3px; -moz-box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.2), 1px 1px 3px 1px rgba(0, 0, 0, 0.2), inset 0 8px 10px #7d7b6f; -webkit-box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.2), 1px 1px 3px 1px rgba(0, 0, 0, 0.2), inset 0 8px 10px #7d7b6f; box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.2), 1px 1px 3px 1px rgba(0, 0, 0, 0.2), inset 0 8px 10px #7d7b6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 0 -2px 2px rgba(0,0,0,0.3); } #footcont3 input.boton:hover { background-color: #7d7b6f; color: #fff; cursor: pointer; } #footcont4 { float: right; width: 60px; height: 180px; margin: 0px; } /* CREDITS */ #credit, #creditsp { position: absolute; width: 490px; left: 25px; font: normal 11px verdana; color: #ccc; text-align: left; padding-top: 3px; background: transparent; clear: both; } #credit { bottom: 6px; border-top: 1px #8c7a62 solid; } #creditsp { bottom: 5px; } #credit a, #credit a:link, #credit a:visited, #creditsp a, #creditsp a:link, #creditsp a:visited, #trip a, #trip a:link, #trip a:visited { color: #a7dfdb; text-decoration: none; font-weight: normal; } #credit a:hover, #creditsp a:hover, #trip a:hover { color: #fff; text-decoration: none; font-weight: normal; border-bottom: 1px #fff dotted; } #trip, #tripsp { position: absolute; width: 120px; font: normal 10px 'lucida sans'; color: #ccc; text-align: right; padding-top: 0px; } #trip { bottom: 6px; right: 68px; } #tripsp { bottom: 6px; right: 55px; } #tripic { position: absolute; bottom: 6px; right: 28px; width: 31px; height: 31px; } #tripic2 { display: block; width: 31px; height: 31px; background: url('social/tripadvisor.png') no-repeat 0 0; } #tripic2:hover { background-position: 0 -31px; border: 0px; } #tripic2 span { position: absolute; top: -999em; } #trip2, #trip2sp { position: absolute; width: 40px; text-align: right; padding-top: 3px; } #trip2 { bottom: 6px; right: 25px; } #trip2sp { bottom: 6px; right: 17px; } /* COPYRIGHT & PRIVACY HOVERS */ a.copy, a.copy2 { z-index: 24; } a.copy:hover, a.copy2:hover { z-index: 25; background-color: transparent; } a.copy span, a.copy2 span { display: none; } a.copy:hover span, a.copy2:hover span { display: block; position: absolute; top: 35px; border: 1px #ffc dotted; color: #ffd; text-align: left; padding: 5px; font-size: 10px; font-weight: normal; line-height: 150%; background-color: #7d7b6f; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } a.copy:hover span { left: -10px; width: 650px; } a.copy2:hover span { left: 320px; width: 250px; } #meta { width: 700px; height: 100px; background-color: transparent; font-size: 9px; font-weight: normal; color: #958fbf; margin: 0 auto; } /* PHOTO SHADOW */ /* 1. Horizontal offset - Positive = on the right. Negative = on the left. 2. Vertical offset - Positive = below. Negative = above. 3. Blur radius - 0 = sharp. Higher number = more blurred. (4. Spread distance - Positive = expand in all directions by the specified radius. Negative = contract. 4/5. Color * ÔinsetÕ keyword changes shadow from an outer to inner. * RGBa - Color wih opacity. */ /*.pic, .pic2, .pic3 {position: relative; z-index: 10;} .pic2 { -webkit-transform: rotate(3.5deg); -moz-transform: rotate(3.5deg); -ms-transform: rotate(3.5deg); -o-transform: rotate(3.5deg); transform: rotate(3.5deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9981347984218669, M12=-0.06104853953485687, M21=0.06104853953485687, M22=0.9981347984218669, sizingMethod='auto expand'); zoom: 1; } .pic3 { -webkit-transform: rotate(-4.5deg); -moz-transform: rotate(-4.5deg); -ms-transform: rotate(-4.5deg); -o-transform: rotate(-4.5deg); transform: rotate(-4.5deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.996917333733128, M12=0.07845909572784494, M21=-0.07845909572784494, M22=0.996917333733128, sizingMethod='auto expand'); zoom: 1; } .curl img {display: block; padding: 7px;} .curl {display: inline-block; vertical-align: top; border: 1px solid #f6f6f6; position: relative; background: #fff; margin: 5px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .curl p {display: block; position: relative;} .curl:after, .curl:before, .curl p:before, .curl p:after {display: block; width: 75%; height: 75%; content: ""; position: absolute; z-index: -1;} .curl:after {right: 0; bottom: 0; transform-origin: bottom right; -o-transform-origin: bottom right; -moz-transform-origin: bottom right; -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform: skew(16deg) rotate(5deg); -o-transform: skew(16deg) rotate(5deg); -moz-transform: skew(16deg) rotate(5deg); -webkit-transform: skew(16deg) rotate(5deg); -ms-transform: skew(16deg) rotate(5deg); box-shadow: -5px 8px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: -5px 8px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -5px 8px 5px rgba(0, 0, 0, 0.4); } .curl:before {left: 0; bottom: 0; transform-origin: bottom left; -o-transform-origin: bottom left; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform: skew(-16deg) rotate(-5deg); -o-transform: skew(-16deg) rotate(-5deg); -moz-transform: skew(-16deg) rotate(-5deg); -webkit-transform: skew(-16deg) rotate(-5deg); -ms-transform: skew(-16deg) rotate(-5deg); box-shadow: 5px 8px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 8px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 5px 8px 5px rgba(0, 0, 0, 0.4); } .curl b:after {right:0; top:0; transform-origin: top right; -o-transform-origin: top right; -moz-transform-origin: top right; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform: skew(-12deg) rotate(-5deg); -o-transform: skew(-12deg) rotate(-5deg); -moz-transform: skew(-12deg) rotate(-5deg); -webkit-transform: skew(-12deg) rotate(-5deg); -ms-transform: skew(-12deg) rotate(-5deg); box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4); } .curl b:before {left:0; top:0; transform-origin: top left; -o-transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform: skew(12deg) rotate(5deg); -o-transform: skew(12deg) rotate(5deg); -moz-transform: skew(12deg) rotate(5deg); -webkit-transform: skew(12deg) rotate(5deg); -ms-transform: skew(12deg) rotate(5deg); box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4); -webkit-box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4); }*/