/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.1
   Last updated:     2008/08/15
   Last updated by:  Matt Wilcox
                     matt@viewcreativegroup.co.uk
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   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, sup, 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: 1; }
   ol, ul {
    list-style: none; }
   blockquote, q {
    quotes: none; }

   /* remember to define focus styles! */
   :focus {
    outline: 0; }

   /* remember to highlight inserts somehow! */
   ins {
    text-decoration: none; }
   del {
    text-decoration: line-through; }

   /* tables still need 'cellspacing="0"' in the markup */
   table {
    border-collapse: collapse; border-spacing: 0; }

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 75%/1.5 Verdana, Helvetica, Ariel, Verdana, sans-serif; }
   html > body {
     font-size : 12px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-top : 1.5em; margin-bottom : 1.5em; }
   h1 { font-size : 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; font-weight : normal; }
   h2 { font-size:1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 1em; line-height: 1em; margin-top: 1.5em; margin-bottom: 0.5em;
     font-weight : bold; }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {
     background-color : #000; color : #777; }
   body {  }
   body.ajax { background-color: #111;}
   
/* =hx */
   h1, h2, h3, h4, h5, h6 {
     color : #c0c08f; font-weight : normal; }

/* =h1 */
   h1 {
     margin : 10px 0; }
   /*.home h1 {
     margin : 0; }*/
   .contact h1,
   .enquire h1 {
     display : none; }
     
/* =h2 */
   #content_main h2,
   #fancy_content h3, .ajax h1, .ajax h3{
     font-size : 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; font-weight : normal; }
   #content_supp h2 {
     background-color : #eee; }
     
  .ajax h3 { margin-top: 1em;}
   #nav_main h2 {
     display : none; }
     
   h2#wine-list,
   h2#other-list {
     border-top : 1px dotted #c0c08f; padding-top : 1em; }
     
   .contact #content_main form h2,
   .enquire #content_main form h2 {
     margin-bottom : 1em; }
   .wine_club #content_main form h2 {
     margin-bottom : 0; }
     
/* =h3 */
   .restaurant #content_main h3,
   .restaurant #content_main h3 {
     position : relative;
     display : block; width : 120px; height : 20px; }
     
   #fancy_content h3 {
     margin-top : 1em; }
     
/* =h4 */
   h4 {  }
   
/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }
     
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dotted #666; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   blockquote.pullquote p.quotation {
     font-size:2em;
     margin:0pt; }
     
   .attributed p {
     margin-bottom : 0; }
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
/* =blockquote */
   blockquote {
     clear : both; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }
   
/* =address */
   address {  }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
     border-left : .3em solid #ddd; padding : .5em 0 0 .7em; }
   
/* =ul */
   #content ul {
     list-style : none outside; }
   #nav_main ul,
   #site_info ul { 
     margin : 0; display : table; }
     
   ul.fancybox-list {
     column-count : 2; -moz-column-count : 2; -webkit-column-count : 2; }
     
   #site_info ul {
     position : absolute; right : 0; bottom : 0em; }
     
   #fancy_content ul.ac_gallery {
     border-top : 1px solid #C2BB8B; }
       
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
   #content ul li,
   #fancy_content ul li, .ajax ul li {
     /*position: relative;*/ padding-left : 1.5em; background : url(../images/li.gif) 0 6px no-repeat; }
  
   #nav_main li,
   #site_info li {
     display : inline; margin : 0 .3em 0 0; }
   #nav_main li:after,
   #site_info  li:after {
     content : "|"; margin-left : .5em; }
   #nav_main li:last-child,
   #site_info li:last-child {
     margin : 0; }
   #nav_main li:last-child:after,
   #site_info li:last-child:after {
     content : ""; margin : 0; }
   #site_info li#footer_about:after {
     content : ""; }
   
   
   #content #gallery ul li {
     width : auto;
     list-style : none outside; text-align : center; padding : 0; background : none; }
     
   .tabs li {
     text-transform : lowercase; }
   #fancy_content ul.ac_gallery li {
     display : inline; padding-left : 0;
     background : none; }
     
   .eat_and_drink #fancy_content ul li {
     background-image : none; padding : 0 0 1em 0; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
   #content #gallery ul li img {
     border : 0; padding : 0; margin : 0; }
   img#rails {
     position : absolute; top : -10px; left : 36px;
     margin : 0;
     z-index : 10;}
     
   .fancy_content img {
     float : left; margin-right : 1em; }
   
/* =hr */
   hr { display : none; }
   #fancy_content hr {
     display : block; }
   .ajax hr { display:block;}

/* =a */
   a:link    { color : #c0c08f; text-decoration : none; }
   a:visited { color : #c0c08f; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { text-decoration : underline; }
   a:active  { /*background-color : #ff6; color : #000; outline : none;*/ }
   :target   { background-color : #ff6; }
   
   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }
     
   a.download {
     padding-left : 16px;
     background : url(../images/download.gif) 1px 1px no-repeat; }
     
   #site_context a, a.logo {
     position : absolute; top : 26px; left : 0;
     display : block; width : 120px; height : 66px; }
    
   #nav_main a:link,
   #nav_main a:visited,
   .tabs ul a:link,
   .tabs ul a:visited,
   #site_info a:link,
   #site_info a:visited {
     color :  #4A4B33; /*#373729*/}
     
   .home #nav_main a:link,
   .home #nav_main a:visited {
     color :  #c0c08f; /*#373729*/}
     
   #nav_main a:hover, 
   .home #nav_main li.nav_home a,
   .stay #nav_main li.nav_stay a,/*
     .stay #nav_main li.nav_stay a,
     .families #nav_main li.nav_stay a,
     .singles #nav_main li.nav_stay a,
     .standard #nav_main li.nav_stay a,
     .superior #nav_main li.nav_stay a,*/
   .eat-and-drink #nav_main li.nav_eat_and_drink a,/*
     .menus #nav_main li.nav_eat_and_drink a,
     .wine-club #nav_main li.nav_eat_and_drink a,
     .wine-list #nav_main li.nav_eat_and_drink a,
     .suppliers #nav_main li.nav_eat_and_drink a,*/
      
   .celebrate #nav_main li.nav_celebrate a,
   .contact #nav_main li.nav_contact a,
   .enquire #nav_main li.nav_enquire a,
   .rates #nav_main li.nav_rates a,
   .find-us #nav_main li.nav_find_us a,
   .explore #nav_main li.nav_explore a,
   .offers #nav_main li.nav_offers a,
   .relax #nav_main li.nav_relax a,
   .offers #nav_main li.nav_offers a,
   .eat_and_drink #nav_main li.nav_eat_and_drink a,
   .find_us #nav_main li.nav_find_us a,
   .wine_club .nav_wine_club1 a,
   .eat_and_drink .nav_wine_club1 a,
   .wine_club .nav_wine_club a,
   .tabs li a.current,
   #content .tabs li a:focus,
   #content .tabs li a:hover,
   #site_info a:focus,
   #site_info a:hover {
     color : #c0c08f; }
     
   li#view a img {
     position : relative; top : 5px;
     margin : 0; }
     
/* =table */
   table {
     width : 100%; border : 1px solid #16170D; }

/* =caption */
   caption {  }

/* =thead */
   thead {
     text-align : left; background : #ddd; }

/* =tfoot */
   tfoot {
     background-color : #ddd; }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tbody tr:hover td { background-color : #16170D; color : #fff; }
   
/* =th */
   th {
     font-weight : bold; padding : 2px; color : #C0C08F; }
   .rates th {
     text-align : left; font-weight : normal; }

/* =td*/
   td {
     border : 1px dotted #16170D; padding : 2px; }

/* =form */
   form {
     position : relative;
     width : 100%; }
     
   #nav_main form {
     margin : 0; }
     
   .wine_club form,
   .brochure_request form {
     border-top : 1px solid #C0C08F; padding-top : 1em; }
   
/* =fieldset */
   .contact fieldset,
   .enquire fieldset,
   .wine_club fieldset,
   .brochure_request fieldset {
     margin : 0 0 2em -12px; border-bottom : 1px dotted #4A4B33; }
   .wine_club fieldset,
   .brochure_request fieldset {
     margin-left : 0;}
/* =legend */
   legend {
     margin : 0; }
   
   #nav_main legend,
   .contact legend {
      }
   
/* =blockquote */
   blockquote {
     border-left : 5px solid #666; padding-left : 5px; }
   blockquote.pullquote {
     float : left; clear : none;
     border-left : 0; padding-left : 0; }

/* =label */
   label {
     position : relative; /* so we can absolutely position errors */
     display : block;
     overflow : hidden; /* so no collapsing float issues */ }
     
   .contact fieldset label,
   .enquire fieldset label,
   .wine_club fieldset label,
   .brochure_request fieldset label {
     float : left;
     width : 181px; margin-left : 12px; }
   .contact label.two-thirds,
   .enquire label.two-thirds,
   .wine_club label.two-thirds,
   .brochure_request label.two-thirds {
     width : 567px; }
     
   .brochure_request #label_offers {
     width : 374px; padding-top : 17px; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }
     
   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }
   
/* =textarea */
    textarea {
      width : 99%; height : 8em; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     position : relative;
     width : 786px; margin : 0 auto; padding-top : 90px; }
  
   body.ajax { opactiy: 0.95;}
   .ajax #container { width: auto; padding: 10px; color: #777;}
   
   #page_context,
   #site_context  {
     height : 348px;  border-top : 1px solid #c0c08f; 
    /* background : url(../../images/header-1.jpg) 0 2px no-repeat; */
     background-position:0 2px;
     background-repeat:no-repeat; }
   #nav_main {
     position : absolute; top : 79px; right : 0;
     margin : 0;
     font-size : .9166em; text-transform : lowercase; }
     
   #content {
    border-top : 1px solid #c0c08f; }
    
   #content_main .columns-2 {
     column-count : 2; -moz-column-count : 2; -webkit-column-count : 2;
     column-gap : 2em; -moz-column-gap : 2em; -webkit-column-gap : 2em;
     padding : 0 1em; }
   #content_main .columns-1,
   .rates #content_main .columns-2 /* hack */ {
     column-count : 1; -moz-column-count : 1; -webkit-column-count : 1;
     column-gap : 2em; -moz-column-gap : 2em; -webkit-column-gap : 2em;
     padding : 0 1em; }
     
   #content_main .columns-2 ul {
     -webkit-column-count : 1; }
   
   #site_info {
     border-top : 1px solid #c0c08f; color : #333; height : 33px;
     font-size : 0.9166em; }
     
   div#wine-list,
   div#other-list {
     overflow : hidden; }
     
   div#gallery,
   div#vcard {
     position : absolute; top : 93px; right : 0;
     display : block; width : 192px; height : 344px;
     background : url(../images/gallery.gif) 0 0 no-repeat; overflow : hidden; }
     
   div#vcard {
     padding : 20px; width : 152px; height : 304px; }
     
   #gallery div {
     position : absolute; top : 52px; margin : 0;
     height : 248px; width : 100%; text-align : center; }
   #gallery span.prev,
   #gallery span.next {
     position : absolute; top : 15px; left : 10px;
     display : block; width : 170px; height : 120px;
     background : url(../images/prev.gif) 50% 0 no-repeat; cursor : pointer; z-index : 3; }
   #gallery span.next {
     top : 218px;
     background : url(../images/next.gif) 50% 100% no-repeat; }
   div#gallery li,
   div#gallery li a,
   div#gallery li a img {
     height : 77px; width : 101px; padding : 0; }
   #content #gallery ul li{
     margin : 0 0 8px 0; }
     
   #site_context span.image {
     position : absolute; top : 111px; left : 0;
     display : block; width : 591px; height : 344px;
     background-position : 0 0;
     background-repeat:no-repeat; }
     
   .contact form div,
   .contact form label,
   .enquire form div,
   .enquire form label {
     margin-top : 0; }
   .hiddenFields {
     display : none; }
     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
     
   #site_context a span, a.logo span {
     position : absolute; top : 0; left : 0;
     display : block; width : 120px; height : 66px;
     background : url(../images/site_context-span.gif) 0 0; }

   /*.restaurant h3 span,
   .restaurant h3 span {
     position : absolute; top : 0; left : 0;
     display : block; width : 120px; height : 20px;
     background : url(../images/white.gif) 0 0 no-repeat; }
   .restaurant .right h3 span {
     background-image : url(../images/red.gif); }
   .restaurant h3.starter span {
     background-image : url(../images/starter.gif); }
   .restaurant h3.main-course span {
     background-image : url(../images/main-course.gif); }
   .restaurant h3.dessert span {
     background-image : url(../images/dessert.gif); }*/
     
   #gallery span.hilite {
     position : absolute; top : 137px; left : 39px;
     display : block; width : 113px; height : 78px;
     background : url(../images/hilite.gif) 0 0 no-repeat; z-index : 3; }
     
   .hide { display : none; }
   
   #vcard .adr {
     display : block;
     margin-bottom : 1em; }
     
   .contact .chatter,
   .enquire .chatter {
     border-bottom : 1px solid #C0C08F; }

   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .one-third {
     width : 300px; text-align : justify; /* text align to show column bounds */ }
   .two-thirds {
     width : 630px; text-align : justify; /* text align to show column bounds */ }
   .half {
     width : 465px; text-align : justify; /* text align to show column bounds */ }
   label.one-third {
     width : 190px; }
   label.two-thirds {
     width : 410px; }
   
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
   .attributed {
     padding : 9px; border : 1px solid #eee;
     background-color : #f6f6f6; }
     
   div.left {
     float : left;
     width : 383px; }
   div.right {
     float : right;
     width : 383px; }
   #fancy_div div.left,
   #fancy_div div.right {
     width : 260px; }
	 
	  ul.fancybox-list {
	  	margin:0;
		padding:0;
    padding-top : 1em; margin-top : 1em; border-top : 1px dotted #252615;
	  }
	 
	 /*.fancybox-list li {
	 	background-image:none !Important;
		padding:0 !important;		
	 }*/
	 
	 .fancybox-list span {
	 	display:block;
	 	clear:both;
		font-style:italic;
		color:#ccc;
	 }
   
   iframe {
     margin-top : 2px; }
     
   /* Fix for utterly random Firefox menu bug - every now and then it collapses to two lines, a page refresh fixes it - but that's no good */
   #nav_main {
     width : 660px; }
   #nav_main ul {
     float : right;
     width : auto; margin : 0; }
     
     
     
     
     .ui-tabs-hide { display: none; }
     div.tabs { margin-top : 0; }
     div#content_main, div#content, ul.tabs li { margin-top : 0; }
     #site_context { margin-bottom : 0; }
     .tabs ul { margin-top : 0; overflow : hidden; border-bottom : 1px dotted #c0c08f; font-size : 11px; padding-left : 1em; }

     #content .tabs li { padding : 0; background-image : none; float : left; padding : 1em 1em 1em 0; margin : 0; }
        #content .tabs li:after {
          content : "|"; margin-left : .5em; }
        #content .tabs li:last-child {
          margin : 0; }
        #content .tabs li:last-child:after {
          content : ""; margin : 0; }
     #content .tabs li a:focus { background-color : transparent; text-decoration : underline; }

     .ui-tabs-selected a { text-decoration : underline; }