/* Parscale Media Style Sheet ----------------------------------------------------------------------------- Prototype Version: 2.5 - Mobile Developer: Joe Jackson | Giles-Parscale, Inc Email Address: joe@gilesparscale.com Developer Website: http://www.parscale.com/ Client Website: http://www.bohanans.com Last Modifier: Joe Jackson - Giles-Parscale, Inc Last Modified: 10.15.2013 */ /* Table of Contents ----------------------------------------------------------------------------- 1. Mobile Framework 1a. 960px 1b. 480px */ /* 1. Mobile Framework - 1a. 960px ------------------------------------------------------------------------------*/ @media screen and (min-width:960px) { #header_nav_res {display:none !important;} } @media screen and (max-width: 959px) { /* 960 Grid */ #grid960 {width: 100%; margin: 0 auto;} /* Banner */ #banner {width:100%; height: auto;} #banner img {width: 100%; height: auto; position: relative; top: auto; left: auto;} /* Header */ #navigation_left {display:none;} #navigation_right {display:none;} #header_logo {position: relative; margin:0 auto; width:310px; left:auto;} #header_logo {display:none;} #ipad_logo {display:block; position:relative; margin:0 auto; width:269px; left:auto; top:0;} #header {width:100%;} #header_menu_res {display:block; position:absolute; right: 5px; top:0; z-index:9999;} #header_nav_res {position:absolute;width:320px; z-index:999; top:70px; right:15px;} #header_nav_res ul li {list-style:none;} #header_number_res {display:block; position:absolute; left:15px; top:10px; z-index:9998;} #res-menu-button { width:105px; height:39px; background: url('/images/site/menubutton.png') center center no-repeat; display:block; text-indent: -9999px;} #res-number-button {width:135px; height:20px; background: url('/images/site/phone_number.png') center center no-repeat; display:block; text-indent: -9999px;} #header_nav_res ul li {width:100%; background:#F5E7C4 url('/images/site/nav_btnrptr.jpg') top left repeat-x;} #header_nav_res ul li a {display:block; text-indent:-9999px; width:320px;height:37px; margin:0 auto;} #header_nav_res ul li ul {display:none;} #header_nav_res ul li ul li {background: none;} #header_nav_res ul li ul li a {text-indent:0; text-transform:uppercase; color:#591E18; text-align:center; font-weight: bold; height: 25px; height: 25px; font-size: 11px; letter-spacing: .2em; } #header_nav_res ul li ul li a:hover {color:#591E18;} .navRestaurant {background: url('/images/site/nav_restaurant.jpg') top left no-repeat;} .navContact {background: url('/images/site/nav_contact.jpg') top left no-repeat;} .navDirections {background: url('/images/site/nav_directions.jpg') top left no-repeat;} .navCatering {background: url('/images/site/nav_catering.jpg') top left no-repeat;} .navNews {background: url('/images/site/nav_newsandevents.jpg') top left no-repeat;} .navAbout {background: url('/images/site/nav_about.jpg') top left no-repeat;} .navStore {background: url('/images/site/nav_store.jpg') top left no-repeat;} .navReservation {background: url('/images/site/nav_reservation.jpg') top left no-repeat;} /* Home */ #home_content_wrapper {background: url(/images/site/home_banner_rptr.jpg) top repeat-x;} #home_content {width: 100%; margin: 0 auto 20px;} #home_news {text-align:center;} .home_news {float:none; display:inline-block; vertical-align:top; margin-right: 0px;} /* Content */ #content {width: 90%; padding:0 5%;} #main_content {width:100%;} #secondary_content {background: 0; float: none; width: 100%; margin: 0; padding-top: 10px;} #secondary_content ul {text-align: center;} #secondary_content ul li {display: inline-block; margin: 10px;} /* Food Menu */ .menu li ul li {width:100%;} .menu li ul li.right {float:none;} /* Slider */ #slider_wrapper {z-index:10000;} #slider_reservation {width: 100% !important; margin: 0 auto; padding:15px; position:absolute; top:0;} #slider_reservation .OT_feedTitle {color: #271b15 !important; font-size: 18px !important;} #slider_reservation #OT_defList {color: #271b15 !important; font-size: 15px !important;} #slider_reservation #startDate {color: #271b15 !important; font-size: 15px !important; width: 100px !important;} #slider_reservation #dateDisplay {color: #271b15 !important;} #OT_logoLink {display: none !important;} #OT_searchWrapper dd, #OT_searchWrapper dt {position:relative !important; float:left; left:auto;} #cal1 {position: absolute; top: -250px; background: #fff !important;} /* News */ #news_featured_image {text-align:center;} #news_featured_text {width: 50%; float: left;} /*.home_news ul li:nth-of-type(2n) {margin-right:0; float:right;}*/ /* Title Bar */ #title_bar {width: 100%; text-align: center; padding-top: 30px; margin-bottom: 10px;} #internal_title_bar {width:100%; text-align: center; padding-top: 20px; margin-bottom: 25px;} #title_bar img {max-width:100%;} /* Footer */ #footer_wrapper {display:none;} #slider {width:100%;} #slider_title {position:relative; margin:0 auto; width:435px; left:auto;} #contact_form input {width: 96%; padding: 10px 2%;} #contact_form textarea {width: 96%; padding: 10px 2%;} } /* 1. Mobile Framework - 1b. 480px ------------------------------------------------------------------------------*/ @media screen and (max-width: 480px) { /* 960 Grid */ #grid960 {width: 100%; margin: 0 auto;} .home_news {margin-right: 0px !important;} #content {text-align:center !important;} #header_logo {display:none;} #ipad_logo {display:none;} #mobile_logo {display:block; position:relative; margin:0 auto; width:197px; left:auto; top:15px;} #sticky_wrapper {display: none;} #header_nav_res {width:100% !important; background-color: #F5E7C4; right:auto;} #main_content .store {margin:0 auto 30px; float:none;} #top_left_main_content {position:relative !important;} #header_number_res {display:block; position:absolute; left:15px; top:5px !important; z-index:9998;} #res-number-button {width:110px; background: url('/images/site/phonenumber_small.png') center center no-repeat !important;} } @media screen and (max-width: 660px) { #news_featured_text {width: auto !important;} #news_featured_image {margin:0 auto !important; float:none !important;} #main_content img {width: 100% !important; height: auto !important;} #internal_title_bar img {width: 100% !important; height: auto !important;} }