/* CSS Document */

:focus {outline: none;}

body {background: #000; margin: 0; font: 12px Tahoma, Arial, Helvetica, sans-serif;}
ul, li, p, h1, h2, h3, h4, form {margin: 0; padding: 0;}

h2 {font: bold 12px/15px Tahoma, Arial, Helvetica, sans-serif; margin: 10px 0 10px 5px;}
h3 {font: normal 20px Tahoma, Arial, Helvetica, sans-serif; color: #000;}

.arial {font-family: 'Arial Unicode MS', Arial, Helvetica, sans-serif !important;}

#main {width: 980px; height: 600px; position: absolute; margin: -300px 0 0 -490px !important; left: 50%; top: 50%; z-index: 1; color: #fff;}

#top {height: 400px;}
#top a.logo {position: absolute; z-index: 10; left: 5px; top: 0; background: url(/img/img_logo_hostel.png) no-repeat center; width: 373px; height: 35px;}

.animation {height: 400px; position: relative; background: url(/img/img_animacion.jpg) no-repeat;}
.animation .control {position: absolute; z-index: 1; top: 0; left: 0; width: 980px; height: 35px; background: #000; opacity:.5; moz- opacity:.5; filter:alpha(opacity=50);}
.animation a.play {position: absolute; z-index: 10; right: 10px; top: 0; background: url(/img/btn_play.png) no-repeat center; width: 100px; height: 35px;}
.animation a.languages {background-image: url(/img/btn_play_languages.png);}
.animation a.hostel {background-image: url(/img/btn_play_hostel.png);}
.animation a.gallery {background-image: url(/img/btn_play_gallery.png);}
.animation a.booking {background-image: url(/img/btn_play_booking.png);}
.animation a.contact {background-image: url(/img/btn_play_contact.png);}
.animation a.rating{background-image: url(/img/btn_play_rating.png);}


.animation a:hover {opacity:.7; moz- opacity:.7; filter:alpha(opacity=70);}

#top .calendar {height: 400px; position: relative; background: #ede20e;}
.calendar .control {position: absolute; z-index: 1; top: 0; left: 0; width: 980px; height: 35px; background: #000; opacity:.5; moz- opacity:.5; filter:alpha(opacity=50);}
.calendar .left {float: left; width: 280px;}
.calendar .right {float: right; width: 655px;}

#top .calendar .left {margin: 49px 0 0 15px;}
.calendar .left a {text-decoration: none;}
.calendar .left table {font-weight: bold; margin: 0 -2px;}
.calendar .left th {background: #c6bc0f; color: #fff; padding: 7px 0 8px;}
.calendar .left th a {display: block; background: #c6bc0f; color: #fff; padding: 7px 0 8px;}
.calendar .left td {color: #000; text-align: center; background: #d8d00d;}
.calendar .left td a {display: block; padding: 7px 0 8px; color: #000; background: #d8d00d; }
.calendar .left td a:hover {background: #c6bc0d;}
.calendar .left td a.active {background: #eb660b; color: #fff;}
.calendar .left td a.off {background: #c4bd0d; color: #dcd20e; cursor: default;}
.calendar .left th.month {text-align: right; text-transform: uppercase; padding-right: 10px;}
.calendar .left th.month a {display: inline;}
.calendar .left th.month a img {margin-bottom: -3px;}
.calendar.highlights .left td a.active {background: #41af88 !important; color: #fff;}
.calendar.highlights .left td a.nextdays {background: #a2c75e; color: #000;}
.calendar.highlights .left td a.nextdays:hover {background-color: #41af88;}
.calendar.highlights .left td a.highlights { background-image: url(/img/bullet_highlights_small.gif); background-repeat: no-repeat; background-position: 3px 3px;  }

.calendar .left div.highlights {font-size: 14px; font-weight: bold; color: #fff; background: #41af88;}
.calendar .left div.highlights a {color: #fff; display: block; padding: 6px 0 7px 11px;}
.calendar .left div.highlights a img {vertical-align: middle; margin: 0 3px;}
.calendar .left div.highlights a:hover {background: #289569;}
.calendar .categories {background: #c6bc0f; padding: 7px 10px 8px; font-size: 14px; line-height: 17px; color: #fff762; margin-bottom: 2px;}
.calendar .categories a {color: #fff762 !important;}
.calendar .categories a:hover, .calendar .categories a.active {color: #fff !important;}
.calendar .left div.back {background: #e85011 !important;}
.calendar .left div.back a:hover {background: #c33e08 !important;}

#top .calendar .right {background: #e85011; margin: 52px 17px 0 15px; color: #fff; font-size: 14px; line-height: 18px; height: 332px; width: 653px;}
#top .calendar.highlights .right {background: #41af88;}
#top .calendar .right a {text-decoration: none;}
#top .calendar .right .month {font: bold 17px Tahoma, Arial, Helvetica, sans-serif; border-bottom: 3px solid #ede20e; padding: 10px 17px;}
#top .calendar.highlights .right .month img {margin-bottom: 3px; margin-right: 2px;}

#top .calendar .right .flexcroll {height: 273px; overflow: auto; margin: 7px 9px 10px 0; font-size: 13px; line-height: 18px; }
#top .calendar .right ul {list-style: none; margin: 10px 15px 15px;}
#top .calendar .right ul li {margin-bottom: 8px; padding-left: 10px; margin-left: -5px;}
#top .calendar .right ul li a {color: #fff;}
#top .calendar .right ul li a:hover {color: #e5e5e5;}
#top .calendar .right ul li img { vertical-align: top; margin-top: 3px;}
#top .calendar .right ul li.highlights { background: url(/img/bullet_highlights_small.gif) no-repeat 0 7px;}

#bottom.calendar .left h3 {margin: 3px 0 0 7px;}
#bottom.calendar .left .categories {height: 100px; margin-left: 7px;}
#bottom.calendar .right {background: #c6bc0f; margin: 27px 8px 0 0; height: 115px;}
#bottom.calendar .right ul {list-style: none; font: 13px/17px Tahoma, Arial, Helvetica, sans-serif; margin-top: 1px; color: #fff762;}
#bottom.calendar .right .flexcroll {height: 104px; margin: 6px 0; font-size: 13px;}
#bottom.calendar a {color: #fff762; text-decoration: none;}
#bottom.calendar a:hover {color: #fff;}
#bottom.calendar .categories {width: 259px;}

#bottom {height: 200px;}
#bottom #content {clear: both; height: 150px; padding: 8px;}
#bottom.language #content {background: #c8d200;}
#bottom.hostel #content {background: #e9680d;}
#bottom.gallery #content {background: #fab800;}
#bottom.calendar #content {background: #ede20e;}
#bottom.booking #content {background: #f1eedd;}
#bottom.contact #content {background: #79c1d7;}
#bottom.rating #content {background: #e1005c;}

#content .left {float: left;}
#content .right {float: right;}
#content .left ul {list-style: none; text-transform: uppercase;}
#content .left ul a {text-decoration: none;}


#menu {border-top: 3px solid #000; margin-right: -3px;}
#menu li {display: inline; font: 11px Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center;}
#menu li a {display: block; background: #2d2c31; float: left; height: 21px; padding-top: 7px; width: 137px; margin-right: 3px; border-bottom: 3px solid #000; color: #fff !important; text-decoration: none; text-align: center;}
#menu li.calendar a {width: 140px; .width: 137px;}
#menu li.booking a {border: 1px solid white; width: 135px; height: 19px;}

#menu li.language a:hover  {background: #c8d200; color: #000 !important;}
#menu li.language a.active  {background: #c8d200; border-color: #c8d200; color: #000 !important;}
#menu li.hostel a:hover  {background: #e9680d;}
#menu li.hostel a.active  {background: #e9680d; border-color: #e9680d;}
#menu li.gallery a:hover  {background: #fab800;}
#menu li.gallery a.active  {background: #fab800; border-color: #fab800;}
#menu li.calendar a:hover  {background: #ede20e; color: #000 !important;}
#menu li.calendar a.active  {background: #ede20e; border-color: #ede20e; color: #000 !important;}
#menu li.booking a:hover {background: #f1eedd; color: #000 !important;}
#menu li.booking a.active  {background: #f1eedd; border: 3px solid #f1eedd; color: #000 !important; width: 131px; padding-top: 5px; height: 20px;}
#menu li.contact a:hover {background: #79c1d7;}
#menu li.contact a.active  {background: #79c1d7; border-color: #79c1d7;}
#menu li.rating a:hover {background: #e1005c;}
#menu li.rating a.active  {background: #e1005c; border-color: #e1005c;}

#content .right div.content {height: 143px; margin: 0 10px; overflow: auto;}
#content .right div.content p {font: 12px/15px Tahoma, Arial, Helvetica, sans-serif; margin: 0 10px 10px 5px;}
#content .right div.content p a {text-decoration: none; color: #fff;}
#content .right div.content h2 {margin-top: 6px;}

.gallery #content .left, .hostel #content .left, .booking #content .left, .contact #content .left  {width: 265px;}
.gallery #content .right, .hostel #content .right, .booking #content .right, .contact #content .right  {width: 693px;}
.left ul {font: 18px/22px Tahoma, Arial, Helvetica, sans-serif; margin: 8px 0 0 10px;}
.gallery .left a {color: #fddd88;}
.gallery .left a:hover, .gallery .left a.active, .hostel .left a:hover, .hostel .left a.active {color: #fff;}
.gallery .right {background: #fbc837; position: relative; height: 150px;}
.gallery .right ul, .hostel .right ul  {margin-top: 12px; width: 1400px;}
.gallery .right li, .hostel .right li {display: inline;}
.gallery .right li img, .hostel .right li img {border: 3px solid #2d2b2e; margin-right: 5px;}

.hostel .left a {color: #efb48c;}
.hostel .right {background: #ef8941; position: relative; height: 150px;}
.hostel #content .right div.content {/*height: 143px; margin: 0 10px;*/ height: 137px; margin: 6px 10px 0; overflow: auto;}
.hostel #content .right div.content ul img {margin-top: -6px;}


.language #content a {color: #fff; text-decoration: none; line-height: 65px; .line-height: 62px;}
.language #content a:hover, .language #content a.active {color: #000;}
.arial {font-family: 'Arial Unicode MS', Arial, Helvetica, sans-serif !important;}
.language #content p.first {font-size: 54px; margin: 7px 0 0; text-align: center;}
.language #content p.second {font-size: 64px; text-align: center;}


.booking .left a {color: #ada495;}
.booking .left a:hover, .booking .left a.active {color: #000;}
.booking .right {background: #e8e4bf; position: relative; height: 150px; color: #000;}
.booking .right a {color: #000 !important;}
.booking #content .right div.content {height: 141px; padding-right: 5px; margin: 5px 8px 10px; overflow: auto;}
#bottom.booking .right .flexcroll {height: 129px; margin: 6px 0; font-size: 13px;}

.booking form {margin: 4px 0 0 4px; .margin: 1px 0 0 0; font-size: 11px;}
.booking form input {border: 1px solid #000; margin: 2px 0 0 0; .margin:0; font: 12px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.booking .name, .booking .email {float: left; width: 170px; text-transform: uppercase;}
.booking .name input, .booking .email input  {width: 160px;}
.booking .people {float: left; width: 95px; text-transform: uppercase;}
.booking .people input {width: 85px;}
.booking .trip {float: left; width: 230px; text-transform: uppercase;}
.booking .trip input {width: 220px;}
.booking .details {clear: both; text-transform: uppercase; padding: 5px 0 3px;}
.booking .details textarea {width: 655px; height: 55px; border: 1px solid #000; font: 12px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif; margin-top: 3px;}
.booking .btn {float: right; border: 0; margin-right: 10px;}
.booking .right ol {margin: 0; padding: 10px 0 0 25px !important;}
.booking .right ol li {margin: 0 0 8px 0 !important;}
.booking .btn {float: right; border: 0; margin-right: 10px; background: url(/img/bck_btn_submit_booking.png) no-repeat; width: 100px; text-align: center; font: 10px Verdana, Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; padding: 1px 0 2px; height: 17px;}


.contact .left ul {margin-top: 3px;}
.contact .left .contactGroup {text-transform: none !important; font-size: 15px; line-height: 15px; color: #009DD7; padding: 3px 0 5px;}
.contact .left .contactGroup a {color: #009DD7;}
.contact .left .contactGroup a:hover {color: #fff;}
.contact .left .contactAddress {text-transform: none !important; font-size: 13px; line-height: 16px;}
.contact form {margin: 4px 0 0 4px; .margin: 1px 0 0 0; font-size: 11px; color: #000;}
.contact form input {border: 1px solid #6ec7e7; margin: 2px 0 0 0; .margin:0; font: 12px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.contact .name {float: left; width: 335px; text-transform: uppercase;}
.contact .email {float: left; width: 330px; text-transform: uppercase;}
.contact .name input, .contact .email input  {width: 320px;}
.contact .details {clear: both; text-transform: uppercase; padding: 5px 0 3px;}
.contact .details textarea {width: 655px; height: 55px; border: 1px solid #6ec7e7; font: 12px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif; margin-top: 3px;}
.contact .btn {float: right; border: 0; margin-right: 10px;}
.contact .right {background: #b7e1ef; position: relative; height: 150px; color: #000;}
.contact #content .right div.content {height: 141px; padding-right: 5px; margin: 5px 8px 10px; overflow: auto;}

.contact .btn {float: right; border: 0; margin-right: 10px; background: url(/img/bck_btn_submit_contact.png) no-repeat; width: 100px; text-align: center; font: 10px Verdana, Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; padding: 1px 0 2px; height: 17px;}

.rating #content .left  {width: 475px; margin-left: 10px;}
.rating #content .right  {width: 475px;}
.rating #content .right  h3 { margin-left: 10px;}

.rating h3 {font-size: 20px; color: #fff; margin-top: 3px;}
.rating ul {font-size: 12px; line-height: 17px; text-transform: none !important;} 
.rating ul li {margin-bottom: 10px;}
.rating .right {position: relative; height: 150px; color: #fff;}
.rating #content .left div.content  {height: 120px; overflow: auto; background: #b9004c; margin-top: 3px;}
.rating #content div.flexcroll {height: 110px; margin: 5px 7px 0; padding-right: 5px; overflow: auto;}
.rating #content .right div.content {height: 120px; overflow: auto; background: #b9004c; margin-top: 3px;}
.rating #content .right h3 img {margin-bottom: 1px;}
.rating #content .right h3 .off {opacity:.5; moz- opacity:.5; filter:alpha(opacity=50);}
.rating #content .right h4 {font-size: 14px; font-weight: normal; margin-bottom: 4px;}
.rating td.bar {background: url(/img/bck_td_rating.gif) repeat-x center; color: #fff; height: 11px;}
.rating td.bar .bar {background: #f5bed5; color: #e30b5e; font: bold 9px Tahoma, Verdana, Arial, Helvetica, sans-serif; text-align: right; height: 11px;}
@media screen and (-webkit-min-device-pixel-ratio:0) { .rating td.bar .bar {margin-bottom: -2px;} }
.rating td.info {padding-top: 5px;}

#footer {text-align: right; padding: 10px 0; font-size: 11px;}
#footer img {margin-bottom: -4px; margin-left: 5px;}

p.thankyou {text-align: center; padding-top: 50px;}


.calendar .right {position: relative; z-index: 1000000000000;}
.calendar .right .calendartitle {position: absolute; top: -20px; display: visible;}
.calendar .right h1, .calendar .right h2 {font: normal 15px Tahoma, Arial, Helvetica, sans-serif; color: #000; display: inline;}
.calendar .right p.calendarimage {margin: -4px 10px 0 0 !important; float: left;}
.calendar .right p.calendarimage img {}


#top .calendar .right .month .citypass {float: right; margin: 4px -10px 0 0; .margin: -37px 6px 0 0;}
#top .calendar .right .month .citypass a {background: #ed6c26; color: #fff; font-size: 12px; padding: 6px 22px; border: 1px solid #b23e1a; .display: block;}
#top .calendar .right .month .citypass a:hover { background: #fc8543;} 


#footer .author {float: left; font: 9px Verdana, Geneva, sans-serif; color: #3c3c3e;}
#footer .author a {color: #3c3c3e; text-decoration: none;}
#footer .author a:hover {color: #666;}


.award {border: 4px solid #000; float: left; margin: 0 10px 10px 5px;}