/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */

.txt-center {  text-align: center; }

.body-margin-20 { margin:0 20px; }

.body-margin-10 { margin:0 10px; }


/* #Header*/
.special-message-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; padding: 20px 0;  text-align: center; }

.header-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; background: #a5c5ed; }

.container-margin { margin: 0 20px}

.logo-box { position: relative; float: left; margin-left: 30px; padding: 10px 0; }

/* #Nav*/
.nav-box {  position: relative; float: right; margin: 60px 30px 0 0; }

.expander { display:none; }


/* #SubNav*/
.subnav-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden; background: #000; }

.subnav-column-600 { position: relative; max-width: 640px; width: 100%; margin: 0 auto; }


/* #HeroImage*/
.hero-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden; }
	
.hero-banner  { position: relative;  width:100%; max-width:1600px;background-color:#00FFCC; }
	
.hero-banner-image { position: relative; height:500px; width:100%; max-width:1600px; }

.hero-banner-caption	{ position: relative; width:100%; padding:0; }

.outer					{ display: table; position: static; }
.inner					{ display: table-cell; vertical-align: middle; position: static; }


/* #body content*/
.body-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden;  background: #a5c5ed; }

.body-column-600 { position: relative; max-width: 640px; width: 100%; margin: 0 auto; padding: 60px 0; }


/* #instagram area*/
.insta-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden;  background: #000; }

.insta-column-1800 { position: relative; max-width: 1080px; width: 100%; margin: 0 auto; text-align: center; padding: 30px 0; }


/* #Food-Drink*/
.food-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden;  background: #ff8189; }

.drink-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden;  background: #a5c5ed; }

.food-drink-spacer { width: 100%; height: 30px; }
.food-drink-spacer-2 { width: 100%; height: 10px; }

.food-black-box,
.drink-black-box { padding: 20px 20px 15px 20px; background: #000; }


/* #press content*/
.press-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; overflow: hidden;  background: #fff; }

.press-margin {margin: 20px 10px;}

.press-item { position: relative; float: left; width: 25%; margin: 0 auto; }

.press-image-box { position: relative; overflow: hidden; margin: 0 0 10px 0; border: 1px solid #c5c5c5; }

.press-link-box { position: relative; height: 50px; margin: 0 0 10px 0; }


/* #footer*/
.footer-container  { position: relative; max-width: 1600px; width: 100%; margin: 0 auto; padding: 40px 0; background: #a5c5ed; border-top: #000 1px solid; }

.details-box { position: relative; float: left; width: 300px; margin-left: 30px; padding: 10px 0; }
.hours-box { position: relative; float: left; width: 300px; margin-left: 30px; padding: 10px 0; }
.social-box {  position: relative; float: right; margin: 0 30px 0 0; }

.copyright-box { width: 100%; text-align: center; padding: 10px 0 0 0 }



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

  



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }
		
		
/* #Header*/
.logo-box { position: relative; float: left; margin-left: 20px; padding: 10px 0; }
		
img.logo { width:175px; height: 68px; }
		
/* #Nav*/
.nav-box { margin: 40px 30px 0 0; }
.nav-desktop li { display: inline; }
.nav-desktop li a { font-size: 14px; color: #000; font-weight: bold; font-style: italic; padding: 5px 3px; }
		
/* #HeroImage*/	
.hero-banner-image { height:400px; }	
.hero-banner-caption { font-size: 100px; line-height: 90px; }
		
		
/* #body content*/
.body-column-600 { padding: 30px 0; }	
		
/* #press content*/		
.press-item h2 { font-size: 12px; line-height: 14px; }
		
		
/* #footer*/
.footer-container  { padding: 20px 0; }

.details-box { width: 100%; margin-left: 0; padding: 10px 0; text-align: center; }
.hours-box { width: 100%; margin-left: 0; padding: 10px 0; text-align: center; }
.social-box {  width: 100%; margin: 0; padding: 10px 0; text-align: center; }
		
		
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }
		
		
/* #Header*/
.logo-box { margin: 0; width: 100%; text-align: center; }
img.logo { width:250px; height: 97px; }
		
/* #Nav*/	
.nav-box { margin: 0; width: 100%; text-align: center; }
.nav-desktop  { display:none; margin-top: 20px; }
.nav-desktop li {display: block; margin-bottom: 20px;}
a.expander { display: block;}
		
/* #HeroImage*/	
.hero-banner-image { height:300px; }
.hero-banner-caption { font-size: 60px; line-height: 48px; }

/* #body content*/
.body-column-600 { padding: 30px 0; }
		
/* #press content*/		
.press-item { position: relative; float: left; width: 50%; margin: 0 auto; }
.press-link-box { height: 75px; }

 /* #footer*/
.footer-container  { padding: 20px 0; }

.details-box { width: 100%; margin-left: 0; padding: 10px 0; text-align: center; }
.hours-box { width: 100%; margin-left: 0; padding: 10px 0; text-align: center; }
.social-box {  width: 100%; margin: 0; padding: 10px 0; text-align: center; } 

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

    
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }