/* *************************************************************************************
 
   Client:      The Hole In The Wall Pub
  
   Module:      HITW.CSS

   Description: This is the general CSS file.

   Version History
   ===============
   09/05/08   2.0   IDM    Development
  
   *************************************************************************************
*/
  body {
    margin: 0;
    padding: 0;
    background-color: #b3b087;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12pt;
    background-image: url(body_background.gif);
    background-repeat: repeat-x;
  }
  #wrapper {
  }
  #main {
    color: #403f37;
    background-color: #fffdda;
    background-image: url(main_div_background.gif);
    background-repeat: repeat-y;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
  }
  #site-map-main {
    color: #403f37;
    background-color: #fffdda;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
  }
  #header-and-content {
  }
  #header {
    padding-bottom: 1em;
    margin-left: 175px; /* This is the width of the sidebar. */
  }
  #site-map-header {
    padding-bottom: 1em;
  }
  #header-bottom {
  }
  .sub-heading {
    text-align: center;
    padding-bottom: 1em;
    border-bottom: thin solid #e6e4c4;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    font-size: 90%;
    font-style: italic;
  }
/*
  This is the pub name at the top of every page.
*/
  #logo {
    display: block;
    margin: 0 auto 2em auto;
    border: 5px solid #ff6100;
  }
/*
  This is the tag line on every page.
*/
  #tag-text {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
  }
  #pub-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid #e6e4c4;
    margin-top: 2em;
    margin-bottom: 1.0em;
  }
  #pub-sketch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    margin-top: 2em;
    margin-bottom: 1em;
  }
/*
  This is the CAMRA award text on the home page.
*/
  #camra-award {
    text-align: center;
    font-style: italic;
    font-size: 1.5em;
    margin-bottom: 1em;
    margin-top: 1.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  #camra-award-link {
    color: #403f37;
    text-decoration: none;
  }
  a:visited#camra-award-link {
    color: #b2cc9a;
  }
  a:hover#camra-award-link {
    color: #46134c;
    text-decoration: underline;
  }
/*
  This is the welcome on the home page.
*/
  #welcome {
    display: block;
    margin-top: -0.5em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 0 4em;
    text-align: justify;
  }
  #welcome p {
    margin-bottom: 1em;
  }
/*
  This is the signature beneath the welcome on the home page.
*/
  #signature {
    margin-left: 250px;
    margin-bottom: 1em;
  }
/*
  This is the text on the accommodation page.
*/
  #accommodation-content {
    display: block;
    margin-top: 1em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 0 4em;
    text-align: justify;
  }
  #suggested-contacts {
    margin: 1em 0 1em 2em;
  }
/*
  This is the text on the location page.
*/
  #location-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
/*
  This appears on the location page.
*/
  #location-address {
    display: block;
    margin-top: 1em;
    margin-left: 10em;
    font-style: oblique;
    padding-bottom: 2em;
  }
  #mail-links {
    padding-top: 2em;
  }
  .map-link {
    outline: none;   /* This prevents the dotted outline around clicked links in Firefox. */
  }
  #email-contact {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
  }
/*
  These appear on the news page.
*/
  #news-content {
    display: block;
    margin-top: 4em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
  .item {
    background-color: #cccaae;
    padding: 10px;
    margin-bottom: 1em;
    overflow: auto; /* This is essential for the "clear:both" in item-description to function correctly. */
  }
  .item-title {
    display: block;
    float:left;
    font-weight: bold;
    text-align: left;
    text-decoration: underline;
  }
  .item-date {
    display: block;
    float: right;
    font-weight: bold;
    text-align: right;
    text-decoration: underline;
  }
  .item-description {
    display: block;
    clear: both;
    padding-top: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
  }
/*
  These appear on the events page.
*/
  #events-content {
    display: block;
    margin-top: 4em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
  .event {
    background-color: #cccaae;
    padding: 10px;
    margin-bottom: 1em;
    overflow: auto; /* This is essential for the "clear:both" in event-description to function correctly. */
  }
  .event-title {
    display: block;
    float:left;
    font-weight: bold;
    text-align: left;
    text-decoration: underline;
  }
  .event-date {
    display: block;
    float: right;
    font-weight: bold;
    text-align: right;
    text-decoration: underline;
  }
  .event-description {
    display: block;
    clear: both;
    padding-top: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
 
  }
/*
  These appear on the meals and snacks page.
*/
  #food-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
  #food-intro {
    text-align: justify;
    margin-bottom: 1.5em;
  }
  #food-menu {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    color: #660000;
    border: 10px solid #bfbea3;
  }
  .food-category {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    padding-bottom: 10px;
  }
  .food-category-intro {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    font-size: 0.9em;
    text-align: justify;
    font-style: italic;
  }
  .food-item {
    padding-left: 10px;
    white-space: pre;
  }
  .food-description {
    font-size: 0.9em;
    padding-left: 10px;
    padding-bottom: 10px;
  }
  .food-intro-print {
    display: none;
  }
  #special {               /* Any changes to the linksbar width MUST be applied here */
    clear: both;
    float: left;
    width: 169px;          /* This is the width of the sidebar. */
    text-align: center;
    margin-top: 2em;
    height: 15em;
    background-color: #000000;
    color: #ffffff;
    font-family: cursive;
    border: 3px solid #fff98e;
  }
  .special-detail {
    margin-top: 0.5em;
    font-size: 0.9em;
  }
 /*
  These appear on the opening hours page.
*/
  #normal-hours-content {
  }
  #special-hours-content {
    margin-top: 2em;
  }
  #normal-hours {
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 67%;
  }
  #special-hours {
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 67%;
  }
  #hours-content {
    display:block;
    margin-top: 2em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 0 5em;
  }
/*
  These appear on the current beers page.
*/
  #beers-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
  #four-pint-offer {
    float: right;
    width: 200px;
    margin-left: 30px;
    background-color: #d4e7b2;
    padding: 15px;
    border: 2px solid #006633;
    text-align: justify;
    font-style: italic;
    font-size: 90%;
}
  #four-pint-offer-heading {
    text-decoration: underline;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    padding-bottom: 0.5em;
}
  #beers-intro {
    text-align: justify;
    margin-bottom: 50px;
}
  #beers-intro p {
    margin-bottom: 1em;
  }
  #hops-image {
    float: left;
    margin-top: 0px; 
    padding-top: 0px;
  }
  #hops2-image {
    float: right;
    margin-top: 0px;
    padding-top: 0px;
  }
  #barley-image {
    float: left;
    margin-top: 0px;
    padding-top: 0px;
    margin-right: 2em;
  }
  .left-beer-image {
    float: left;
    margin-right: 20px;
    border: 3px solid #b39097;
    width: 200px;
  }
  .right-beer-image {
    float: right;
    margin-left: 20px;
    border: 3px solid #b39097;
    width: 200px;
  }
  .beer {
    display: block;
    margin-bottom: 1em;
    min-height: 181px;  /* Image height (175) + top and bottom border of image (2x3). */
  }
  .beer-category {
    font-style: italic;
    font-weight: bold;
  }
  .left-beer-separator {
    border-top: 1px solid #b39097;
    margin-left: 38%;
  }
  .right-beer-separator {
    border-top: 1px solid #b39097;
    margin-right: 38%;
  }
  .new-beer {
    padding-left: 10px;
    font-weight: bold;
    color: #ff0000;  /* #6d0419; */
  }
/*
  This is the site map page.
*/
  #site-map-section {
    display: block;
    width: 70%;
    margin: 2em auto 0 auto;
    padding: 0 0 2em 0;
    line-height: 1.5em;
    height: 300px;
  }
  #site-map-column-1 {
    display: block;
    float: left;
  }
  #site-map-column-2 {
    display: block;
    float: left;
    margin-left: 100px;
  }
  #site-map-column-3 {
    display: block;
    float: left;
    margin-left: 100px;
  }
  #site-map-column-1 ul {
    list-style: none;
    padding: 0;  /* This removes any indentation that may exist. */
  }
  #site-map-column-2 ul {
    list-style-type: none;
    padding: 0;  /* This removes any indentation that may exist. */
  }
  #site-map-column-3 ul {
    list-style-type: none;
    padding: 0;  /* This removes any indentation that may exist. */
  }
  #site-map-section h1 {
    font-size: 125%;
    margin-bottom: 0.5em;
    text-align: left;
  }
/*  
  #beer-section {
    display: block;
    float: right;
    width: 65%;
    margin: -1em auto 4em auto;
  }
*/
/*
  These appear on the links page.
*/
  #links-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
    text-align: justify;
  }
  .entry {
    background-color: #cccaae;
    padding: 10px;
    margin-bottom: 0.5em;
    overflow: auto; /* This is essential for the "clear:both" in item-description to function correctly. */
  }
  .entry-name {
    display: block;
    float:left;
    font-weight: bold;
    text-align: left;
  }
  .entry-description {
    display: block;
    clear: both;
    padding-top: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
  }
/*
  This is the text on the other drinks page.
*/
  #beverages-content {
    display: block;
    margin-top: 2em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 0 4em;
    text-align: justify;
  }
  #apple-image {
    margin-left: 8em;
  }
  #apple-text {
    text-align: justify;
    margin-top: -1em;
  }
/*
  These appear on the picture gallery page.
*/
  #gallery-content {
    display: block;
    margin-top: 4em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 1em 4em;
  }
  #table-container {
    position: relative;
    overflow: hidden;
  }
  #table-container table {
    background-color: #fffdda;
  }
  #table-container td {
    width: 190px;
    height: 190px;
    border: 1px solid #fffdda;
    text-align: center;
    vertical-align: middle;
    background-color: #403f37;
  }
  #table-container td img {
    border: 1px solid #ffffff;
    padding: 0;
    margin: 0;
  }
  .landscape-thumbnail:hover {
    background-color: transparent;
  }
  .landscape-thumbnail span { /*CSS for enlarged image*/
    position: fixed;
    top: 35%; /* 180px; */
    left: 43%; /* 550px; */
    visibility: hidden;
    color: black;
    text-decoration: none;
  }
  .landscape-thumbnail span img { /*CSS for enlarged image*/
    padding: 0;
    width: 320px;
    height: 240px; 
    border: 5px solid #ffffff; 
  }
  .landscape-thumbnail:hover span { /*CSS for enlarged image*/
    visibility: visible;
    z-index: 20;
  }
  .portrait-thumbnail:hover {
    background-color: transparent;
  }
  .portrait-thumbnail span { /*CSS for enlarged image*/
    position: fixed;
    top: 20%; /* 120px; */
    left: 45%; /* 550px; */
    visibility: hidden;
    color: black;
    text-decoration: none;
  }
  .portrait-thumbnail span img { /*CSS for enlarged image*/
    padding: 0;
    width: 275px;
    height: 384px;
    border: 5px solid #ffffff; 
  }
  .portrait-thumbnail:hover span { /*CSS for enlarged image*/
    visibility: visible;
    z-index: 10;
  }
/*
  These appear on the web feeds introduction page.
*/
  #web-feeds-content {
    display: block;
    /* margin-top: 0.5em; */
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 2em 4em;
    margin-bottom: 1em;
    text-align: justify;
  }
  #web-feeds-content p {
    margin-bottom: 1em;
  }
  #web-feeds-content a:link {
    color: #3F627F;
    text-decoration: none;
  }
  #web-feeds-content a:visited {
    color: #CC7950;
  }
  #web-feeds-content a:hover {
    color: #FF0000;
    text-decoration: underline;
  }
  #feed-use-list {
    list-style-type: decimal;
    text-align: justify;
    margin-bottom: 1em;
  }
/*
  These appear on the disclaimer page.
*/
  #disclaimer-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 2em 4em;
  }
  #disclaimer-intro {
    margin-bottom: 1em;
    text-align: justify;
  }
  #disclaimer-list {
    list-style-type: disc;
    text-align: justify;
  }
/*
  This appears on the accessibility page.
*/
  #accessibility-content {
    display: block;
    margin-top: 3em;
    margin-left: 175px; /* This is the width of the sidebar. */
    width: 65%;
    padding: 0 0 2em 4em;
  }
  #accessibility-content ul {
    margin-left: 4em;
    margin-top: 1em;
  }
/*
  This sidebar contains the navigation links and various images.
*/
  #linksbar {
    float: left;
    width: 175px;
    margin: 0;
    padding: 0;
    background-color: #e6e4c4;
  }
/*
  This is the CAMRA logo at the top of the sidebar.
*/
  #camralogo {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    border: none;
  }
/*
  This is the menu within the sidebar.
*/
  #menu {
    list-style-type: none;
    margin: 0 0 1em 0;
    padding: 0;
    line-height: 1.25em; /* Ensures consistent size across all browsers. */
  }
  #menu li {
    padding-bottom: 2px;
  }
  #menu li a {
    color: #000000;
    display: block;
    padding: 2px 0 0 19px;
    text-decoration: none;
    font-weight: bold;
    font-size: 90%;
    border-bottom: 1px solid #b3b087;
  }
  #menu a:hover {
    color: #00008B; /* This is dark blue */
    background-color: #ffff99;
    font-weight: bold;
  }
  #current-menu-item {
    background-color: #cccaae;
    line-height: 1.25em;
  }
/*
  This is the Good Beer Guide image which appears beneath the menu within the sidebar.
*/
  #gbglogo {
    display: block;
    margin: 1.5em auto 1em auto;
    border: none;
  }
  a#current-page {
    text-transform: uppercase;
  }
/*
  This appears within the sidebar.
*/
  #list-updated {
    width: 150px;
    margin: 2em auto 2em auto;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #b39097;
  }
/*
  These appear within the current beers page sidebar.
*/
  .beer-feeds {
    width: 150px;
    margin: 0 auto 2px auto;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #b39097;
    color: #000000;
    font-size: 90%;
    padding-top: 3px;
    padding-bottom: 1px;
  }
  .beer-feeds a {
    color: #000000;
  }
/*
  These appear within the news page sidebar.
*/
  .news-feeds {
    width: 150px;
    margin: 0 auto 2px auto;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #b39097;
    color: #000000;
    font-size: 90%;
    padding-top: 3px;
    padding-bottom: 1px;
  }
  .news-feeds a {
    color: #000000;
  }
/*
  These appear within the events page sidebar.
*/
  .event-feeds {
    width: 150px;
    margin: 0 auto 2px auto;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #b39097;
    color: #000000;
    font-size: 90%;
    padding-top: 3px;
    padding-bottom: 1px;
  }
  .event-feeds a {
    color: #000000;
  }
/*
  These appear on those pages which can be shared on a social network site.
*/
  #share-section-heading {
    width: 150px;
    margin: 2em auto 0 auto;
    text-align: center;
    background-color: #ffffff;
    border-top: 2px solid #b39097;
    border-left: 2px solid #b39097;
    border-right: 2px solid #b39097;
    color: #000000;
    padding-top: 2px;
    padding-bottom: 3px;
  }
  #share-list {
    width: 150px;
    margin: 0 auto 1em auto;
    text-align: left;
    background-color: #ffffff;
    border-left: 2px solid #b39097;
    border-right: 2px solid #b39097;
    border-bottom: 2px solid #b39097;
    color: #000000;
    font-size: 90%;
    padding-top: 3px;
  }
  .share a {
    color: #000000;
  }
  .share-logo {
    border: none;
    padding-left: 5px;
    padding-right: 5px;
  }
/*
  This appears on pages other than the home page and occupies the space taken by the address
  bar section on the home page.
*/
  #dummy-address-bar {
    clear: both;
    margin: 30px auto 0 auto;
    padding: 0.5em 1em 0.5em 1em;
    background-color: #000000;
  }
/*
  The address bar section on the home page.
*/
  #address-bar {
    clear: both;
    margin: 40px auto 0 auto;
    padding: 0.5em 1em 0.5em 1em;
    border-top: 1px solid #ffffff;
    background-color: #80804c;
    color: #ffff99;
    font-size: small;
    text-align: center;
  }
  #address {
  }
  #telephone {
    padding-left: 3em;
  }
  #email {
    padding-left: 3em;
  }
/*
  The footer section.
*/
  #footer {
    clear: both;
    font-size: 0.75em;
    text-align: center;
    margin-top: 10px;
    margin-right: 1em;
    color: #ffff99;
    padding-bottom: 1em;
  }
  #copyright {
    color: #000000;
  }
  #designer {
    color: #000000;
    margin-left: 4em;
  }
  #designer a {
    color: #403f37;
    text-decoration: none;
  }
  #designer a:hover {
    color: #46134c;
    text-decoration: underline;
  }
  #sitemap {
    margin-left: 4em;
  }
  #sitemap a {
    color: #403f37;
    text-decoration: none;
  }
  #sitemap a:hover {
    color: #46134c;
    text-decoration: underline;
  }
  #accessibility {
    margin-left: 4em;
  }
  #accessibility a {
    color: #403f37;
    text-decoration: none;
  }
  #accessibility a:hover {
    color: #46134c;
    text-decoration: underline;
  }
  #disclaimer {
    margin-left: 4em;
  }
  #disclaimer a {
    color: #403f37;
    text-decoration: none;
  }
  #disclaimer a:hover {
    color: #46134c;
    text-decoration: underline;
  }
  #feeds {
    margin-left: 4em;
  }
  #feeds a {
    color: #403f37;
    text-decoration: none;
  }
  #feeds a:hover {
    color: #46134c;
    text-decoration: underline;
  }
/*
  Unless stated otherwise, a link will use these settings.
*/
  a {
    color: #807c47;
    outline: none;   /* This prevents the dotted outline around clicked links in Firefox. */
  }
  a:hover {
    color: #807f6d;
    text-decoration: none;
  }
  #print-heading {
    display: none;
  }
  .text-centre {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
/*
  Extend the parent element's height i.e. create a full-height column.
*/
  #clearone {
   clear: both;
   height: 1px;
  }
/*
  Various pages.
*/
  .bold-text {
    font-weight: bold;
  }
  .bold-italics-text {
    font-weight: bold;
    font-style: italic;
  }
  .underline {
    text-decoration: underline;
  }
  .no-underline {
    text-decoration: none;
  }
  .print-only {
    display: none;
  }
  #print-heading {
    display: none;
  }
  #back-to-top {
    background-color: #cccaae;
    margin: 3em auto 0 auto;
    text-align: center;
    text-decoration: none;
    width: 100px;
    border: 1px solid #000000;
  }
  #back-to-top a {
    color: #000000;
    text-decoration: none;
  }
  #back-to-top a:hover {
    font-weight: bold;
  }
  #back-to-top-on-gallery-page {
    background-color: #cccaae;
    /* margin: 3em auto 0 auto; */
    margin-top: 3em;
    margin-left: 15em;
    text-align: center;
    text-decoration: none;
    width: 100px;
    border: 1px solid #000000;
    clear: left;
  }
  #back-to-top-on-gallery-page a {
    color: #000000;
    text-decoration: none;
  }
  #back-to-top-on-gallery-page a:hover {
    font-weight: bold;
  }
  #validated {
    margin-top: 2em;
  }
  .new-line {
    padding-top: 1em;
  }