/*enrichment.css*/

/*-- Contents --*/

/*

  1. Jquery Enhancement
  2. Forms
  3. jQuery UI
  4. Mobile Targeting

*/

/*

  colour pallete
  --------------

  
*/  

/*-- Remove Skype --*/
#footer .foot-info span.skype_pnh_container, #leftcol span.skype_pnh_container {display:none !important;}
#footer .foot-info span.skype_pnh_print_container, #leftcol span.skype_pnh_print_container {display:inline !important;}

/* #Less Variables
================================================== */

@base-font-size: 16px;
@base-line-height: 22px;
@base-color: #010101;

@main-font: 'ITCStoneSerif', Arial, Helvetica, sans-serif;

// Color variables
@black: #010101;
@red: #b30838;

@imgsrc: '../img';


/*-----------------------------------------------------------------------------
------------------------------1----------Jquery Enhancements--------------------
-------------------------------------------------------------------------------*/

/* --- Image Transition --- */


.imageTrans {

  position: relative;
  border:2px solid @black; 
  width:936px;
  height:286px;
  padding: 10px;
  overflow:visible!important;
  clear:both;


  #transition {
    float:left;
    display:inline;
    width:936px;
    height:286px;
  }

  #map {
    float:left;
    display:inline;
    width:936px;
    height:286px;
  }

  span {

    width:30px;
    height:27px;
    overflow:hidden;
    display: block;
    position:absolute;
    background: transparent url('-{imgsrc}/img-corners.gif') no-repeat;
    z-index:100;

    &.top-left {
      top:-2px;
      left:-2px;
      background-position: top left;
    }
    &.top-right {
      top:-2px;
      right:-2px;
      background-position: top right;
    }
    &.bottom-left {
      bottom:-2px;
      left:-2px;
      background-position: bottom left;
    }
    &.bottom-right {
      bottom:-2px;
      right:-2px;
      background-position: bottom right;
    }

  }

}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
   

// /*-----------------------------------------------------------------------------
// ------------------------------2----------Forms---------------------------------
// -------------------------------------------------------------------------------*/


form div {width:100%; position:relative; clear:both;margin: 0 0px 10px 0; overflow:hidden;}

label {
  display: block;
  float: left;
  width: 90px;
  font-size: 14px;
  line-height:1;
  margin:0 0 0 0;
  padding:10px 0 0 0;
  font-family: @main-font;
  text-transform:uppercase;
  color:#fff;
}

input, textarea {
  padding: 2px;
  background:#fff none repeat 0 0;
  margin: 0 0px 0px 0;
  overflow: hidden;
  float:left;
  display:inline;
  width:305px;
  border:2px solid #fff;
  font-family:@main-font;
  font-size:13px;
  color:@black;
  text-transform:uppercase;
}
  input:focus, textarea:focus { 
    outline:0 none;
  }



select {
  float: left;
  width: 150px;
  background: none repeat scroll 0 0 #F4F3F3;
  color: @black;
  margin: 0 10px 10px 0;
  overflow: hidden;
  padding: 0.5%;
  border:1px solid #D3D2D2;
  font-family: @main-font;

}

/*Select Styling*/
 /*setting the width and height of the SELECT element to match the replacing graphics */
.select-wrap {
  width: 150px;
  height:27px;
  float: left;
  display: inline;
  clear: none;
  margin: 0 13px 10px 0;
  cursor: pointer;
  position:relative;  
}

select.select{
    position:relative;
    z-index:10;
    width:150px;
    height:27px;
    line-height:30px;
    cursor:pointer;
}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    top:0;
    float:left;
    left:0;
    width:150px;
    height:27px;
    line-height:29px;
    text-align:left;
    background: #F4F3F3 url('-{imgsrc}/forms/select.jpg') no-repeat 0 0;
    cursor:pointer;
    z-index:1;
    font-family:@main-font;
    font-size:13px;
    color:@black;
    text-transform:uppercase;
    text-indent:10px;
  }
  
  #main .error-select {
    background: #fff url('-{imgsrc}/forms/select-error.jpg') no-repeat 0 0;
    color:#ff0000;
  }
  


.submit {
  border:0 none;
  background:0 none!Important;
  float:right;
  display:inline;
  margin:0 0 0 0;
  padding:0;
  font-family: @main-font;
  font-size: 20px;
  color: #fff;
  width: auto;
  height: auto;
  line-height: 1;
  text-transform:uppercase;

  border-bottom:4px dotted #fff;
}


#join-wrap {
  position: absolute;
  background: #911e3d none repeat 0 0;
  width: 450px;
  height:170px;
  top: 70px;
  left: 10px;
  overflow:hidden;  
}

#joinus-form-wrap {
  float:left;
  display:inline;
  width:410px;
  margin:20px 0 0 20px;
}

#book-table-wrap {

  background: #911e3d none repeat 0 0;
  position: absolute;
  width: 450px;
  top: 70px;
  left: 10px;
  height:360px;
  overflow:hidden;

    div {
      margin:10px auto 0!Important;
    }

  // display:none;
}

#christmas-main-restaurant-page #join-wrap {
  div {
    margin:10px auto 0!Important;
  }
}

#contact-form-wrap {

  float:right;
  display:inline;
  width:405px;

  label {
    color:@black;
    padding:5px 0 0 0;
  }

  input, textarea {
    border-color:@black;
  }

  .submit {
    color:@black;
  }

  .error input, 
.error textarea,
.error {background: #fff url('-{imgsrc}/forms/error.png') no-repeat right center; color:#ff0000; border-color:#ff0000; }
}





// /*--- Error/Success Styling ---*/
.error input, 
.error textarea,
.error {background: #fff url('-{imgsrc}/forms/error.png') no-repeat right center; color:#ff0000; border-color:#ff0000; }

.successText { 
  font-size: 14px; 
  margin: 30px 0 0 0;   
  font-weight: bold;
  text-transform:uppercase;
  letter-spacing:-1px;
  font-family:@main-font;
  line-height:1;
  /*display:none;*/
  color:@black;
}




/*-----------------------------------------------------------------------------
------------------------------4----------Gallery---------------------------------
-------------------------------------------------------------------------------*/

form.gallery_selector {
  margin-bottom:2em;
}

p.no_galleries {
  text-align:center;
}

/* Thumbnail Effects Style */
.tj_container{
  width:960px;
  height:350px;
  position:relative;
  margin:0;
  float:left;
  display:inline;
}
.tj_nav{
  position:relative;
  height:230px;
  width:50px;
  z-index:100;
  float:right;
  display: inline;
}
.tj_nav span{
  width:50px;
  height:25px;
  background:transparent url('-{imgsrc}/gallery/prev.gif') no-repeat top left;
  cursor:pointer;
  text-indent: 100%;
  opacity: 0.7;
  cursor: pointer;
  float:left;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  position:absolute;
  top:0;
  left:0;
}
.tj_nav span.tj_next{
  background-image:url('-{imgsrc}/gallery/next.gif');
  top:auto;
  bottom:0;
}
.tj_nav span:hover{
  opacity:1.0;
}
.tj_wrapper{
  width:900px;
  height:100%;
  position:relative;
  margin:0px;
  float:left;
  display:inline;
}
.tj_wrapper ul li{
  float:left;
  display:inline;
  overflow:hidden;
  height:110px;
  width:110px;
  
}
.tj_wrapper ul li a{
  outline:none;
  display:block;
  margin:10px;
  position:relative;
}
.tj_wrapper ul li a img{
  display:block;
  border:none;
  padding:0 !important;
  margin:0 !important;
  clip:rect(0px,110px,110px,0px);
  height:110px!important;
  width:110px!important;

  /*
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -transition: all 0.2s ease-in-out;
  */
}

ul.gallery li a img.magnify {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100px !important;
  height: 100px !important;
}



/*-----------------------------------------------------------------------------
------------------------------5----------Menus---------------------------------
-------------------------------------------------------------------------------*/

#menu_con {
  display:block;
  margin:0 auto;
  width:800px;
}

.as-pdf a{
          color:@red;
          font-size:19px;

          &:hover{
            color:#000;
          }
}

.menu_table {
        width: 100%;
        margin:0 0 20px 0;
}

.left_table {
        text-align:left;
}

.centre_table {
        text-align:center;
}
.menu_category_cell {
        clear:both;

        font-family:@main-font;
        font-weight:bold;
        font-size:24px;
        color:@red;
        text-decoration:none;
        letter-spacing:1px;
        text-shadow: #999999 0 0 1px;
        line-height:32px;
        margin:0 0 25px 10px;
        padding:0 10px;
        text-align:left; 
        text-transform:uppercase;
}

.menu_price_cell {
        font-size:14px;
        line-height:1;
        font-weight:normal;
        padding: 0 10px 0 0;
        text-align: right !important;
        text-align:left;
        color:@red;
        letter-spacing:-1px;
        text-transform:lowercase;
        font-style:italic;
        position:relative;
        top:10px; 
}

.menu_content_cell {
        padding:5px 10px; 
        font-size:14px;
}
.menu_category_cell, .menu_content_cell {
  width:620px;
  float:left;
  display:block;
}
.menu_category_cell {
  width:610px;
}
.menu_price_cell, .menu_content_price_cell {
  float:left;
  width:43px;
  display:block;
}

.oddRow {
                
}

.evenRow {
                
}

.menu_title {
  margin-top:10px; 
}

.menu_description {

}

.menu_content_price_cell {
    text-align: right;
    padding:0 10px 0 0;
    margin-top:5px; 
    font-size:14px;
}

.menu_separator_row {
                
}

.menu_notes {
    font-size: 0.8em;
    text-align:center;
    margin-top:1em;
    color:@red;
    font-style:italic;
}



/*-----------------------------------------------------------------------------
------------------------------6----------Media Queries---------------------------------
-------------------------------------------------------------------------------*/

  @media only screen and (max-width: 1000px) {

    .wrap {
      width:980px;
    }

  }

 /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {

    .wrap {
      width:960px;
    }

  }