@import url(global.css);

:root {background : #fff url(i/backgrounds/page.gif) 50% 477px no-repeat}

/* Body
---------------------- */
body {min-width : 878px; min-height : 416px; height : auto; text-align : center}
html>body.home {background : url(i/backgrounds/home.png) 0 0 repeat-x}
html>body.hotel {background : url(i/backgrounds/hotel.png) 0 0 repeat-x}
html>body.food {background : url(i/backgrounds/food.png) 0 0 repeat-x}
html>body.art {background : url(i/backgrounds/art.png) 0 0 repeat-x}
html>body.nature {background : url(i/backgrounds/nature.png) 0 0 repeat-x}
html>body.alps {background : url(i/backgrounds/alps.png) 0 0 repeat-x}
html>body.winter {background : url(i/backgrounds/winter.png) 0 0 repeat-x}
html>body.reservations {background : url(i/backgrounds/reservations.png) 0 0 repeat-x}
html>body.recommend {background : url(i/backgrounds/home.png) 0 0 repeat-x}

/* Page
---------------------- */
#page {position : relative; width : 878px; margin : 0 auto; text-align : left;}

.home #page {padding-bottom:3em;}


/* Header
---------------------- */
h1 {height : 122px; background : url(i/hotel_tyrol.png) 4px 22px no-repeat}
h1 a {position : absolute; left : 4px; top : 22px; display : block; width : 261px; height : 91px; text-indent : -999em; text-decoration : none}
address {height : 19px; text-indent : -999em; background-position : 22px 0; background-repeat : no-repeat}
.en address {background-image : url(i/address_en.png)}
.it address {background-image : url(i/address_it.png)}
.de address {background-image : url(i/address_de.png)}

/* Content
---------------------- */
#content {position : relative; margin : 306px 0 0 300px; min-height : 127px; height : auto; z-index : 100; width : 570px; color : #594137; padding-bottom: 3em; line-height: 1.45;}
#content * {color : #594137}

#content h2 {font-size : 1em; margin-bottom : 1.2em}
.mmm {text-align : center}
.hotel #content h2 {color : #418371}
.food #content h2 {color : #9F0102}
.art #content h2 {color : #C5A37C}
.nature #content h2 {color : #2FA3C0}
.alps #content h2 {color : #C57A22}
.winter #content h2 {color : #709AD6}
.reservations #content h2 {}

#content h3 {font-size : 1em}

#content p {margin-bottom : 1em}

#content a {border-bottom : solid 1px #E6DDD1}
#content a:hover {border-bottom : solid 1px #CDBBA3}

/* Photo zone
---------------------- */
#photoZone {position : absolute; left : 0; top : 142px; width : 878px; height : 269px}
html>body #photoZone {background : url(i/deco/photo_shadow.png) 0 0 no-repeat}
#photoZone img {position : absolute; left : 7px; z-index : 151}
#photoZone .switch {position : absolute; right : 12px; bottom : -20px; z-index : 152; color: #594137;}
#photoZone ul {display:inline;}
#photoZone li {display : inline; border : solid 1px #594137; font-size : 0.8em}
#photoZone li.on {background : #594137}
#photoZone a {color : #594137; text-decoration : none; padding : 0 1em; font-size : 0.85em; font-family : myriad,tahoma,verdana,sans-serif; font-weight : bold; line-height : 0.8em}
#page #photoZone a:hover {color : #ccc}

.hotel #photoZone .switch {color : #418371;}
.hotel #photoZone li {border-color : #418371;}
.hotel #photoZone li.on {background : #418371}
.hotel #photoZone a {color : #418371;}

.food #photoZone .switch {color : #9F0102;}
.food #photoZone li {border-color : #9F0102;}
.food #photoZone li.on {background : #9F0102}
.food #photoZone a {color : #9F0102;}

.art #photoZone .switch {color : #C5A37C;}
.art #photoZone li {border-color : #C5A37C;}
.art #photoZone li.on {background : #C5A37C}
.art #photoZone a {color : #C5A37C;}

.nature #photoZone .switch {color : #2FA3C0;}
.nature #photoZone li {border-color : #2FA3C0;}
.nature #photoZone li.on {background : #2FA3C0}
.nature #photoZone a {color : #2FA3C0;}

.alps #photoZone .switch {color : #C57A22;}
.alps #photoZone li {border-color : #C57A22;}
.alps #photoZone li.on {background : #C57A22}
.alps #photoZone a {color : #C57A22;}

.winter #photoZone .switch {color : #709AD6;}
.winter #photoZone li {border-color : #709AD6;}
.winter #photoZone li.on {background : #709AD6}
.winter #photoZone a {color : #709AD6;}


/* Recommend
---------------------- */
form.recommend {padding-bottom: 1.75em; display: block;}
form.recommend h3 {margin: 0 0 0.4em 0; font-size: 0.95em;}
form.recommend label {display: block; margin-bottom: 0.3em;}
form.recommend label span {display: block; float: left; width: 90px;}
form.recommend input {width: 180px; padding: 1px 2px; border: solid 1px #A58C76;}
form.recommend textarea {width: 380px; padding: 1px 2px; border: solid 1px #A58C76; overflow: auto; margin: 0 0 0.8em 0;}
form.recommend button {border:none; border-style: inset; border-width: 0; overflow: visible; text-align: left; border: solid 1px #BCC793; border-color: #BCC793 #95B02E #95B02E #BCC793; background: #DBE3BE; color: #594137; cursor: pointer; padding: 2px 5px;}


/* Navigation
---------------------- */
#navigation {position : absolute; top : 425px; left : 22px; height : 128px; width : 239px; border-right : solid 1px #A58C76; padding-top : 4px; background-repeat : no-repeat; background-position : -284px 4px}
.en #navigation {background-image : url(i/nav/nav_en.png)}
.it #navigation {background-image : url(i/nav/nav_it.png)}
.de #navigation {background-image : url(i/nav/nav_de.png)}
#navigation li {height : 17px; width : 100%}
#navigation a {display : block; text-indent : -999em; text-decoration : none; width : 100%; height : 100%; background-repeat : no-repeat}
.en #navigation a {background-image : url(i/nav/nav_en.png)}
.it #navigation a {background-image : url(i/nav/nav_it.png)}
.de #navigation a {background-image : url(i/nav/nav_de.png)}
#n1 a {background-position : 0 0}
.hotel #n1 a {background : none}
#n2 a {background-position : 0 -17px}
.food #n2 a {background : none}
#n3 a {background-position : 0 -34px}
.art #n3 a {background : none}
#n4 a {background-position : 0 -51px}
.alps #n4 a {background : none}
#n5 a {background-position : 0 -68px}
.nature #n5 a {background : none}
#n6 a {background-position : 0 -85px}
.winter #n6 a {background : none}
#n7 a {background-position : 0 -102px}
.reservations #n7 a {background : none}
#navigation a:hover {background : none}

/* Transversal navigation
---------------------- */
#transversal {position : absolute; top : 18px; right : 20px; height : 22px; background : url(i/deco/coloured_flower_ico.png) 0 -6px no-repeat}
.hotel #transversal {background-position : 0 -202px}
.food #transversal {background-position : 0 -174px}
.art #transversal {background-position : 0 -146px}
.nature #transversal {background-position : 0 -90px}
.alps #transversal {background-position : 0 -118px}
.winter #transversal {background-position : 0 -62px}
.reservations #transversal {background-position : 0 -34px}
#transversal li {display : inline}
#transversal a {display : block; text-indent : -999em; text-decoration : none; height : 14px; background : url(i/nav/transversal_nav.png) 0 5px no-repeat; position : absolute; top : 5px}
.en #transversal {width : 380px}
.it #transversal {width : 401px}
.de #transversal {width : 331px}
#t1 a {background-position : 0 -9px; left : 23px}
.en #t1 a {background-image : url(i/nav/contact_en.png); width : 60px}
.it #t1 a {background-image : url(i/nav/contact_it.png); width : 60px}
.de #t1 a {background-image : url(i/nav/contact_de.png); width : 60px}
.hotel #t1 a {background-position : 0 -205px}
.food #t1 a {background-position : 0 -177px}
.art #t1 a {background-position : 0 -149px}
.nature #t1 a {background-position : 0 -94px}
.alps #t1 a {background-position : 0 -121px}
.winter #t1 a {background-position : 0 -65px}
.reservations #t1 a {background-position : 0 -37px}
#t2 a {right : 187px}
.en #t2 a {background-position : 0 -7px; width : 113px}
.en #t2 a:hover {background-position : 0 -33px}
.it #t2 a {background-position : -176px -7px; width : 128px}
.it #t2 a:hover {background-position : -176px -33px}
.de #t2 a {background-position : -113px -7px; width : 62px}
.de #t2 a:hover {background-position : -113px -33px}
#t3 a {background-position : -306px -7px; right : 122px; width : 64px}
.de #t3 a, .en #t3 a:hover, .it #t3 a:hover {background-position : -306px -33px}
#t4 a {background-position : -372px -7px; right : 60px; width : 61px}
.it #t4 a, .de #t4 a:hover, .en #t4 a:hover {background-position : -372px -33px}
#t5 a {background-position : -433px -7px; right : 0; width : 59px}
.en #t5 a, .de #t5 a:hover, .it #t5 a:hover {background-position : -433px -33px}

/* SudTirol
---------------------- */
#sudTirol {position : absolute; top : 55px; left : 779px; width : 69px; height : 42px; background : url(i/backgrounds/sudtyrol.png) no-repeat; overflow: hidden;}
#sudTirol a {display : block; text-decoration : none; width : 100%; height : 100%; text-indent : -999em}

#alpinePearls {position : absolute; top : 55px; left : 661px; width : 107px; height : 42px; background : url(i/backgrounds/alpine-pearls.png) no-repeat; overflow: hidden;}
#alpinePearls a {display : block; text-decoration : none; width : 100%; height : 100%; text-indent : -999em}

#villnosserTal {position : absolute; top : 55px; left : 421px; width : 134px; height : 42px; background : url('i/backgrounds/villnosser-tal.png') no-repeat; overflow: hidden;}
#villnosserTal a {display : block; text-decoration : none; width : 100%; height : 100%; text-indent : -999em}

#eisacktal {position : absolute; top : 55px; left : 570px; width : 80px; height : 42px; background : url('i/backgrounds/eisacktal.png') no-repeat; overflow: hidden;}
#eisacktal a {display : block; text-decoration : none; width : 100%; height : 100%; text-indent : -999em}

/* Credits
---------------------- */
body #page #credits {position : absolute; left:300px; bottom : 0.3em; font-size : 0.9em; color:#594137; z-index: 555;}

#credits a {color : #594137; text-decoration: none; border-bottom: solid 1px #ababab;}
#credits a:hover {text-decoration : none; border-bottom: solid 1px #594137;}

.tell-a-friend {display: block; margin-bottom: 0.3em;}
#credits .tell-a-friend a {border-bottom: solid 1px #fff;}
#credits .tell-a-friend a:hover {border-bottom: solid 1px #594137;}

/* Deco
---------------------- */
#deco {position : absolute; z-index : 190; left : 212px; top : 356px; width : 101px; height : 108px}
html>body #deco {background : url(i/deco/edelweissknopf.png) 0 0 no-repeat}
#loader {position : absolute; left : 430px; top : 120px; z-index : 150; background : url(i/deco/swirl.gif) no-repeat; width : 30px; height : 30px}

/* Clear floats
---------------------- */
.recommend label:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}