/**
 * Halcyon Hotel CSS
 *
 * Author: Gravitywell Ltd (http://gravitywell.co.uk)
 *
 */


/* Reset
**********************************************************************/
    html,body,div,span,applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,em,font,img,ins,kbd,q,s,samp,
    small,strike,strong,sub,tt,var,
    b,u,i,center,
    dl,dt,dd,ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
    body{line-height:13px;}
    ol,ul{list-style:none;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,
    q:before,q:after{content:'';content:none;}
    :focus{outline:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}



/* Defaults
**********************************************************************/

html {
     overflow: -moz-scrollbars-vertical; /* Make firefox always show vertical scrollbars */
}

body {
    background-color: #000;
    text-align: center;
    color: #fff;
    padding-bottom: 30px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
}

#light body {
    text-shadow: 0 1px 0 #fff;
}

sup {
    font-size: 50%; vertical-align: super;
}

#light {
    background-color: #fff;
    color: #4f4f4f;
}

#light a {
    color: #000;
    text-decoration: none;
}

#light .box1 a {
    color: #fff;
}


/* Layout
**********************************************************************/

#logo {
    display: block;
    height: 115px;
    margin: 0 auto;
    width: 200px;
    background: transparent url("../images/layout/logoDark.gif") top center no-repeat;
}

#logo span {
    display: none;
}

#light #logo {
    background-image: url("../images/layout/logoLight.gif");
}

.wrapper {
    width: 928px;
    margin: -1px auto 0 auto;
    overflow: hidden;
    position: relative;
    text-align: left;
}

/* Fake section splitter */
#section1Splitter, #section2Splitter, #section15Splitter {
    width: 3px; height: 3px;
    position: absolute;
    left: 229px;
    top: 0px;
    background-color: #000;
}
#section15Splitter { left: 461px; }
#section2Splitter { left: 693px; }

#light #section1Splitter, #light #section2Splitter, #light #section15Splitter {
    background-color: #fff;
}


/* Top Menu
**********************************************************************/

#topMenu {
    position: relative;
    height: 26px;
    margin: 0;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#topMenu ul { list-style: none;}
#topMenu ul li {
    float: left;
}
#topMenu ul li a{
    display: block;
    float: left;
}

#topMenu ul li span { display: none; }


#topMenu a {
    color: #fff;
    text-decoration: none;
    border-top: 2px solid #404040;
}

#light #topMenu a {
    border-top-color: #DADADA;
}

#topMenu a:hover {
    background-position: 0 -16px;
}

#topMenu a.current {
    border-top-color: #fff;
}

#light #topMenu a.current {
    border-top-color: #000;
}

/* Individual Menu Items */
.mHome, .mHalcyon, .mRooms, .mGallery, .mLocalEvents, .mPromotions, .mBar, .mRestaurants, .mContact, .mReservations {
    position: absolute; top: 0; height: 22px;
    background: transparent url("../images/menu/home.gif") 0 3px no-repeat;
}

.mHome                { left: 0;     width: 40px; background-image: url("../images/menu/dark/home.gif"); }
.mHalcyon             { left: 61px;  width: 87px; background-image: url("../images/menu/dark/halcyon.gif"); }
.mRooms               { left: 177px; width: 50px; background-image: url("../images/menu/dark/rooms.gif"); }
.mGallery             { left: 255px; width: 55px; background-image: url("../images/menu/dark/gallery.gif"); }
.mLocalEvents         { left: 339px; width: 92px; background-image: url("../images/menu/dark/localEvents.gif"); }
.mPromotions          { left: 460px; width: 88px; background-image: url("../images/menu/dark/promotions.gif"); }
.mBar                 { left: 576px; width: 26px; background-image: url("../images/menu/dark/bar.gif"); }
.mRestaurants         { left: 630px; width: 87px; background-image: url("../images/menu/dark/restaurants.gif"); }
.mContact             { left: 745px; width: 57px; background-image: url("../images/menu/dark/contact.gif"); }
.mReservations        { left: 831px; width: 94px; background-image: url("../images/menu/dark/reservations.gif"); }

#light .mHome          { left: 0;     width: 40px; background-image: url("../images/menu/light/home.gif"); }
#light .mHalcyon       { left: 61px;  width: 87px; background-image: url("../images/menu/light/halcyon.gif"); }
#light .mRooms         { left: 177px; width: 50px; background-image: url("../images/menu/light/rooms.gif"); }
#light .mGallery       { left: 255px; width: 55px; background-image: url("../images/menu/light/gallery.gif"); }
#light .mLocalEvents   { left: 339px; width: 92px; background-image: url("../images/menu/light/localEvents.gif"); }
#light .mPromotions    { left: 460px; width: 88px; background-image: url("../images/menu/light/promotions.gif"); }
#light .mBar           { left: 576px; width: 26px; background-image: url("../images/menu/light/bar.gif"); }
#light .mRestaurants   { left: 630px; width: 87px; background-image: url("../images/menu/light/restaurants.gif"); }
#light .mContact       { left: 745px; width: 57px; background-image: url("../images/menu/light/contact.gif"); }
#light .mReservations  { left: 831px; width: 94px; background-image: url("../images/menu/light/reservations.gif"); }


/* Rows
**********************************************************************/

#bigImage {
    height: 346px;
    width: 924px;
    margin: 0 0 3px 0;
    overflow: hidden;
}
#bigImage.galleryPage {
     background: transparent url("../images/layout/loading.gif") top left no-repeat;
}

#row1 {
    background-color: transparent;
}

#row1, #row2 {
    border-top: 2px solid #404040;
    position: relative;
    zoom: 1; /* Invoke ie's hasLayout */
}

#light #row1, #light #row2 {
    border-top-color: #DADADA;
}

#row2 {
    border-top-width: 1px;
}

#row1 .wrapper {
    margin-top: -2px !important;
    border: none;
}

#row2 .wrapper {
    margin-top: -2px;
    padding: 5px 0 0 0;
    border: none;
    border-left: 4px solid #000;
    border-right: 4px solid #000;
}

#light #row2 .wrapper {
    border-left-color: #fff;
    border-right-color: #fff;
}

.floatContainer {
    float: left;
    width: 930px;
    margin: 0 0 5px 0;
}


/* Columns
**********************************************************************/

.columnSmall {
    width: 229px;
    float: left;
    margin-right: 3px;
}

.columnLarge {
    width: 461px;
    float: left;
    margin-right: 3px;
}




/* Boxes
**********************************************************************/

/* --------- */
/* Home Page */
/* --------- */

.box1 {
    height: 169px;
    cursor: pointer;
    background: transparent url("../images/layout/boxBg.png") top left repeat-x;
    position: relative;
}

.box1 .boxHeader {
    position: relative;
    top: 0px; left: 0px;
    padding: 5px 0 6px 8px;
    font-size: 9px;
    display: block;
    letter-spacing: 1px;
    border-bottom: 1px solid #999;
    color: #fff;
}

.box1 .boxFooter {
    position: absolute;
    bottom: 0; left: 0;
    width: 221px;
    padding: 5px 0 6px 8px;
    font-size: 9px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    letter-spacing: 1px;
    background: transparent url("../images/layout/boxRightArrow.png") 210px -23px no-repeat;
}

* html .box1 .boxFooter {
    background-image: url("../images/layout/boxRightArrow.gif")
}

.box1 a {
    color: #fff; text-decoration: none;
}

.box1 a.boxHeader, .box1 a.boxFooter {
    color: #fff;
    text-decoration: none;
    outline: none;
    text-transform: uppercase;
}

.box1 .boxHeader:hover, .box1 .boxFooter:hover  {
    border-top-color: #666;
    border-bottom-color: #666;
    background-position: 210px 4px;
    color: #ccc;
}
.box1 .boxHeader:hover {
    border-bottom-color: #999;
}


/*
 * 999 = 85px/30px
 * 99  = 90px/55px
 */
.bigPrice {
    margin: 8px 0 0 35px;
    display: block;
    font-family: Arial;
    font-size: 93px;
    vertical-align: top;
    letter-spacing: -2px;
}
.bigPrice .poundSign {
    font-size: 50px;
    position: absolute;
    top: 36px; left: 8px;
}
.bigPrice .priceDecimal {
    font-size: 57px;
}

.roomsFrom {
    text-transform: uppercase;
    font-size: 11px;
    position: absolute;
    text-align: left;
    width: 200px;
    top: 123px; left: 10px;
}



/** What's On in Bath **/
#cycleEvents {
    height: 110px;
    margin: 6px 0 0 0;
    overflow: hidden;
    position: relative;
    width: 221px;
}
.cycleEventsItems {
    position: absolute;
    height: 20000em;
}
.whatsOnBlock {
    height: 38px;
    margin: 0 0 0 8px;
}
.whatsOnLine1 {
    font-size: 15px;
    text-transform: uppercase;
    display: block;
    overflow: hidden;
    height: 16px;
    margin: 0;
    white-space: nowrap;
}
.whatsOnLine2 {
    font-size: 10px;
    text-transform: uppercase;
    display: block;
    margin: 0;
}



/** Recently **/
.recentlyTitle, .fancyHead {
    display: block;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0px 0 0 8px;
}
.fancyHead {margin-top: 5px; }
.recentlySub, .fancySub {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0 10px 10px 8px
}
.recentlyArticle, .fancyText {
    display: block;
    font-size: 12px;
    margin: 0 0 0 8px;
    line-height: 95%;
}

.box1 .fancyHead, .fancySub { color: #fff; }
.fancyText { color: #fff; }
.box .fancyHead, .box .fancySub { color: #000; }
.box .fancyText { color: #333; }
#light .box a {  color: #000 !important; }



/** Reservations **/

.reservationsCheckIn, .reservationsNights {
    font-size: 15px;
    text-transform: uppercase;
    margin: 7px 0 0 8px;
}

#light .reservationsCheckIn, #light .reservationsNights {
    color: #000;
}
#light .box1 .reservationsCheckIn, #light .box1 .reservationsNights {
    color: #fff;
}

.reservationsCheckInSelect {
    margin: 0;
    padding: 4px 0 7px 8px;
    border-bottom: 1px solid #999;
}

.reservationsCheckInSelect select, .reservationsNightsSelect select {
    background-color: #333;
    color: #fff;
    padding: 2px;
    border: 1px solid #666;
}
#light .reservationsCheckInSelect select, #light .reservationsNightsSelect select {
    background-color: #eee;
    color: #000;
    border: 1px solid #ccc;
}
#light .box1 .reservationsCheckInSelect select, #light .box1 .reservationsNightsSelect select {
    background-color: #333;
    color: #fff;
    border: 1px solid #666;
}
.reservationsNightsSelect {
    margin: 4px 0 0 8px;
}




/* ------------- */
/* End home page */
/* ------------- */

#light .box {
    position: relative;
    background-color: #e7e7e7 !important;
    padding: 30px 0 40px 0;
}

.box a:hover {
    color: #000 !important;
}

#light .box .boxHeader {
    position: absolute;
    top: 0px; left: 0px;
    padding: 5px 0 6px 8px;
    width: 221px;
    font-size: 9px;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    border-bottom: 1px solid #999;
}

#light .columnLarge .box .boxHeader {
    width: 453px;
}
#light .box p {
    padding: 0 8px 8px 8px;
    line-height: 130%;
}

#light .box .boxFooter {
    position: absolute;
    bottom: 0; left: 0;
    width: 221px;
    padding: 5px 0 6px 8px;
    font-size: 9px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    letter-spacing: 1px;
    background: transparent url("../images/layout/boxRightArrowLight.png") 210px -22px no-repeat;
    color: #000;
    text-transform: uppercase;
}

* html #light .box .boxFooter {
    background-image: url("../images/layout/boxRightArrowLight.gif");
}

#light .columnLarge .box .boxFooter {
    background-position: 440px -22px;
    width: 453px;
}
#light .box .boxFooter:hover {
    border-top-color: #666;
    border-bottom-color: #666;
    background-position: 210px 5px;
    color: #ccc;
}
#light .columnLarge .box .boxFooter:hover {
    background-position: 440px 5px;
}

#light .box h1, h2 {
    font-size: 25px;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 2px;
    margin: 9px 0 13px 8px;
}

#light .box h3 {
    font-size: 12px;
    font-weight: 600;
    line-height: 120%;
    text-transform: uppercase;
    color: #000;
    margin: 10px 0 2px 8px;
}


#light .bigPrice {
    color: #000;
}


#row2 ul {
    margin: 0 0 10px 5px;
    list-style: square;
}
#row2 ul li {
    padding: 0 0 0 3px;
    margin: 0 0 0 20px;
}


/** Gallery **/
.gallery {
    margin: 5px 0 0 7px;
}

.imageWrap {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    background-color: #000;
    margin: 0 5px 5px 0;
}


/** Rooms **/
.roomTypeList {
    display: block;
    width: 221px;
    padding: 5px 0 6px 8px;
    font-size: 9px;
    border-bottom: 1px solid #999;
    letter-spacing: 1px;
    background: transparent url("../images/layout/boxRightArrowLight.png") 210px -22px no-repeat;
    color: #000;
    text-transform: uppercase;
}

* html .roomTypeList {
    background-image: url("../images/layout/boxRightArrowLight.gif");
}

.roomTypes {
    padding-bottom: 0 !important;
    height: auto !important;
    padding-top: 26px !important;
}
.roomTypeList:hover, .roomTypeList.selected {
    border-bottom-color: #666;
    background-position: 210px 5px;
    color: #ccc;
}

.roomTypeList.selected {
    font-weight: bold;
}

#rooms .box, #rooms .box1 {
    min-height: 100px;
}

#rooms .roomInfo .box {
    height: auto;
}

#rooms .roomInfo .columnLarge .box {
    padding-top: 8px !important;
    padding-bottom: 25px !important;
    min-height: 175px;
}
#rooms .roomInfo .columnLarge .box p {
    line-height: 113% !important;
}
.roomGallery {
    margin: 8px 0 0 8px;
    width: 210px;
    height: 130px;
    overflow: hidden;
}

.roomGalleryFooter {
    height: 13px;
    background-image: none !important;
}
.roomGalleryLeft {
    width: 20px;
    display: block;
    float: left;
    height: 20px;
    background: transparent url("../images/layout/boxLeftArrowLight.png") 0 -27px no-repeat;
}
* html .roomGalleryLeft {
    background-image: url("../images/layout/boxLeftArrowLight.gif");
}

.roomGalleryLeft:hover, .roomGalleryRight:hover {
    background-position: 0 0;
}

.roomGalleryRight {
    width: 20px;
    display: block;
    height: 20px;
    float: right;
    background: transparent url("../images/layout/boxRightArrowLight.png") 0 -27px no-repeat;
}
* html .roomGalleryRight {
    background-image: url("..images/layout/boxRightArrowLight.gif");
}

.smallGoogleMap {
    margin: 8px 0 0 8px;
}


/** Local Events **/
h2.eventh2 {
    margin-bottom: 0;
}
.eventDate {
    display: block;
    font-size: 16px;
    font-weight: lighter;
    margin-left: 8px;
    color: #555;
    margin-bottom: 15px;
    text-transform: uppercase;
}



/** Promotions **/
#promotions .box1:hover, .homePage .box1:hover {
    background-image: url("../images/layout/boxBgDarker.png");
}

#promotions .box1 {
    padding-top: 0px !important;
    color: #fff;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#promotions .promotionsPrice {
    color: #fff;
    position: absolute;
    top: 104px;
    left: 23px;
    display: block;
    font-family: Arial;
    font-size: 30px !important;
    vertical-align: top;
    letter-spacing: -2px;
}
.promotionsPrice .poundSign {
    font-size: 20px;
    position: absolute;
    top: 2px; left: -15px;
}
.promotionsPrice .priceDecimal {
    font-size: 20px !important;
}
.promotionsPrice .perNight {
    font-size: 15px !important;
    position: absolute;
    top: 10px; right: -30px;
    letter-spacing: 1px;
}

.promotionsSection1 {
    position: absolute;
    width: 210px;
    border-bottom: 1px solid #666;
    top: 5px;
    left: 8px;
    font-size: 15px;
    padding-bottom: 6px;
    line-height: 150%;
}

.promotionsSection2 {
    position: absolute;
    width: 210px;
    border-bottom: 1px solid #666;
    top: 60px;
    left: 8px;
    font-size: 11px;
    padding-bottom: 4px;
    line-height: 130%;
}


/** Bars & Cocktail List **/
#cocktailList {
    margin: 0;
    padding: 0;
    width: 460px;
}
#cocktailList ul {
    list-style-type: none;
    min-height: 20px;
}
#cocktailList #leftCocktailList ul {
    float: left;
    margin-left: 10px;
}
* html #cocktailList #leftCocktailList ul {
    margin-left: 5px;
}
#cocktailList #rightCocktailList ul {
    float: right;
    margin-right: 10px;
}
* html #cocktailList #rightCocktailList ul {
    margin-right: 5px;
}
#cocktailList ul li {
    margin: 0;
    padding: 10px 0;
    font-size: 11px;
    width: 213px;
    color: #444;
    height: 25px;
    border-top: 1px solid #999;
}
#cocktailList .name {
    font-weight: bold;
}
#cocktailList .price {
    font-size: 10px;
    font-weight: bold;
    float: right;
}
#cocktailList .desc {
    color: #666;
    display: block;
    font-size: 10px;
    font-weight: normal;
    padding: 2px 0;
}


/** Footer **/
#footer {
    text-transform: uppercase;
    font-size: 10px;
    width: 960px;
    text-align: center;
    margin: 25px auto 5px auto;
    font-weight: normal;
}
#footer ul {
    list-style: none;
    margin: 2px 0; padding: 0;
}
#footer li {
    display: inline;
    padding: 0 2px;
}
#footer, #footer a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}
#light #footer, #light #footer a {
    color: #bbb;
}
#footer a:hover {
    color: #999;
}
#light #footer a:hover {
    color: #333;
}

/** Clear Fix **/
.clearIt {
    height: 1px;
    content: '.';
    line-height: 1px;
    overflow: hidden;
    clear: both;
}

#cssLoader { display: none; }
#hoverbghome {background-image: url("../images/layout/boxBgDarker.png"); }




/** Forms **/
form fieldset {
    padding: 10px;
    margin: 20px 10px;
    border: 1px solid #ccc;
}

form fieldset legend {
    font-weight: bold;
    padding: 0 5px;
}

form label {
    clear: both;
    display: block;
    width: 100px;
    float: left;
    margin: 0 5px 5px 5px;
    line-height: 25px;
    vertical-align: middle;
}
form input {
    float: left;
    padding: 2px;
    font-size: 12px;
    height: 16px;
    border: 1px solid #ccc;
    margin: 0 0 0 0px;
    width: 200px;
}
input:focus, select:focus, textarea:focus {
    border-color: #666;
    outline: none;
}

form select {
    float: left;
    margin: 0 0 0 0;
    border: 1px solid #ccc;
}

form textarea {
    float: left;
    border: 1px solid #ccc;
    width: 250px;
}

form .cl {
    display: block;
    width: 100%;
    clear: both;
}


.clearit {
    clear: both;
}

.button {
    margin: 10px 0 0 0;
    padding: 6px 15px;

    zoom:1;

    text-align: center;
    white-space: nowrap;

    color: #464646;

    display: block;
    text-decoration: none;
    font-size: 11px;
    cursor: pointer;

    border: 1px solid #bbb;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -khtml-box-sizing: content-box;
    box-sizing: content-box;
}

html>body .button {
    *height: 25px;
}

* html .button {
    height: 25px;
}
.rbutton {
    float: right;
    position: relative;
    margin-left: 5px;
}
.button:hover {
    color: #000;
    border-color: #666;
    text-decoration: none;
}
.button {
    background: #f2f2f2 url(../images/layout/white-grad.png) repeat-x scroll left top;
}
.button:active{
    background: #eee url(../images/layout/white-grad-active.png) repeat-x scroll left top;
}

#submitResButton {
    padding: 0 0 0 110px;
}

#submitResButton input {
    width: 90px;
}


#reservationErrors {
    display: none;
    padding: 5px;
    margin: 10px 0;
    color: #000;
    background-color: #F8B2B2;
    border: 1px solid #EA6B58;
    font-size: 12px;
}

#reservationSuccess {
    display: none;
    font-size: 12px;
    padding: 5px;
    margin: 10px 0;
    color: #000;
    background-color: #D0F89D;
    border: 1px solid #A4D862;
}

#blogSidebar {
    float: right;
    width: 229px;
    margin: 0;
}

#blog .columnLarge {
    margin: 0 0 3px 0;
}

#blog .columnLarge .box {
    margin: 0;
    width: 693px;
}

#blog .columnLarge .box .boxHeader {
    width: 685px;
}

#blog #blogSidebar .box {
    margin-bottom: 3px;
}

#blog #blogSidebar .box a {
    text-transform: none;
}

#blog .pagination {
    float: left;
    display: block;
    width: 677px;
    height: 15px;
    padding: 8px;
    background-color: #E7E7E7;
}

#blog .newer, #blog .older {
    font-weight: bold;
}

#blog .newer {
    float: right;
}

#blog .older {
    float: left;
}


#cyclePosts {
    height: 110px;
    margin: 5px 0 0 0;
    overflow: hidden;
    position: relative;
    width: 221px;

}
.cyclePostItem {
    height: 110px;
}
.cyclePostsItems {
    position: absolute;
    height: 20000em;
}

#blog .roomTypeList.fancyFontHel.selected {
    background-color: #ddd;
    border-bottom-color: #999999;
}


#columnFooter {
    clear: both;
    width: 924px;
    padding: 0;
    margin: 15px auto 0 auto;
}

#columnFooter h4 {
    padding: 3px 0;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
}

#columnFooter .col {
    display: block;
    width: 111px;
    margin: 0 5px 0 0;
    float: left;
    color: #696969;
    font-size: 9px;
    line-height: 10px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

#columnFooter .col.last {
    margin: 0;
    width: 112px;
}


#light #footerLinks {
    display: none;
}

#footerLinks {
    margin: 10px auto;
    width: 250px;
    text-align: center;
    height: 40px;
    position: relative; 
}
#footerLinks #facebook {
    position: absolute;
    height: 34px;
    width: 121px;
    background: url("../images/facebook.jpg") top left no-repeat;
    top: 3px;
    left: 0;
}
#footerLinks #tripAdvisor {
    position: absolute;
    height: 40px;
    width: 92px;
    background: url("../images/trip_advisor.jpg") top left no-repeat;
    right: 15px;
    top: 0px;
}

#footerLinks span { display: none; }