#widthDetector {
    display: none;
}



@media screen and (min-width:1px) and (max-width:708px) {
    #widthDetector {
        display: block;
    }
}

@media screen and (min-width:1025px) and (max-width:1200px) {

       .social-button ,.social-button-blue {
        margin: 0px 0px 0 0;    
        width: auto;
    }

      #joinUsText {
          display: none;
      }
}

@media screen and (min-width:700px) and (max-width: 870px) {

    .mainContentRow1 {
        color: #001a3e;
        display: inline-block;
        float: left;
        min-height: 120px;
        padding: 0 20px;
        width: 90%;
    }

    #joinUsText {
          display: none;
      }
    
}
    

@media screen and (min-width:700px) and (max-width: 1177px) { 
    .col_33 {
        float: left;
        margin: 0 2%;
        width: 31%;
    }
}
   

@media screen and (min-width:700px) and (max-width:1024px) {

    #header
    {
        padding: 45px 35px 2em 20px;
        border-bottom: 0px solid #000;
        background-color: none;
        max-width: 1150px;
        margin: 0 auto;
    }

    
    #restaurantSelectors {
        left: 200px;
        position: relative;
        top: -92px;
    }

    .restaurantSelector {
        font-weight: bold;
        font-size: 15px;
        font-family: 'Roboto Condensed', sans-serif;
    }

    .restaurantSelectorBlue {
        font-weight: bold;
        font-size: 15px;
        font-family: 'Roboto Condensed', sans-serif;
    }

    #menuMain,#menuMainBlue {
        float: left;
        padding-left: 14px;
    }

    
    #menuSubBlue {
        float: left;
        left: 200px;
        position: relative;
        top: -70px;
        width: 90%;
    }

     .social-button,.social-button-blue {
        margin: 0px 40px 0 0;    
        width: auto;
    }

    #joinUsText {
        display: none;
    }

    
    #ctl21_enquiryPanel input {
        width: 100%;
    }
    
    #menuSubBlue ul li, #menuSubBlueol li {
        float: left;
        padding: 0 15px 0 0;
    }

    #restaurantSelector1 {
        float: left;
        width: 132px;
    }

    #restaurantSelector2
    {
        float: left;
        width: 181px;
    }
    
    #restaurantSelector3 {
        float: left;
        width: 200px;
    }

    .restaurantSelector a {
        color: #fff;
    }

    .restaurantSelectorBlue a {
        color: #002348;
    }

    .restaurantInfoPanel {
        z-index: 1;
    }

    .restaurantInfoPanelContainer {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: none;
        cursor: pointer;
    }

    #restaurantInfoPanel1 {
        position: relative;
        top: -20px;
        left: -69px;
        width: 182px;
        padding: 15px;
        height: 400px;
        text-align: center;
    }


    #restaurantInfoPanelBackground1 {
        background: #002348;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    #restaurantInfoPanel2 {
        position: relative;
        top: -20px;
        left: 130px;
        width: 182px;
        padding: 15px;
        height: 400px;
    }

    #restaurantInfoPanelBackground2 {
        background: #002348;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    #restaurantInfoPanel3 {
        position: relative;
        top: -20px;
        left: 299px;
        width: 182px;
        padding: 15px;
        height: 400px;
    }

    #restaurantInfoPanelBackground3 {
        background: #002348;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .restaurantInfoPanelRestaurantName {
        display: block;
        height: 60px;
    }

    .restaurantInfoPanelRestaurantPhone {
        display: block;
        height: 30px;
    }

    #restaurantInfoPanel1 .restaurantInfoPanelRestaurantPhone a,
    #restaurantInfoPanel2 .restaurantInfoPanelRestaurantPhone a,
    #restaurantInfoPanel3 .restaurantInfoPanelRestaurantPhone a {
        position: relative;
    }

    .restaurantInfoPanel a {
        margin: 20px 0 0 0;
        position: absolute;
        top:0px;
        left: 0px;
        font-family: "Roboto Condensed",sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        width: 100%;
    }

    #restaurantInfoPanel1 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }

    #restaurantInfoPanel2 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }

    #restaurantInfoPanel3 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }



    .restaurantInfoPanelImage {
        position: absolute;
        top:0px;
        left: 0px;
        width: 100%;
        margin-top: 10px;
        color: #ffffff;
        text-align: center;
    }

    .restaurantInfoPanelText {
        position: absolute;
        top:250px;
        left: 0px;
        width: 100%;
        margin-top: 30px;
        color: #ffffff;
        text-align: center;
    }

    .restaurantInfoPanelText i {
        font-size: 32px;
    }

    .restaurantInfoPanel img {
        margin: 20px auto 0 auto;
        position: relative;
        top:30px;
        left: 0px;
    }

    #restaurantInfoPanel1 h1,
    #restaurantInfoPanel2 h1,
    #restaurantInfoPanel3 h1 {
        font-size: 15px;
        color: #ffffff;
    }

    .social-button-blue {
        color: #002348;
        font-size: 14px;
        font-weight: normal;
        margin: -35px 40px 0 -2px;
        position: absolute;
        right: -8px;
        top: 82px;
        width: auto;
    }

    .menuItem.depth-1:nth-child(4)
    {
        display: inline-block;
        margin: 0 0 0 20px;
    }

    .menuItem.depth-1:nth-child(5)
    {
        display: inline-block;
        margin: 0 0 0 60px;
    }

    .menuItem.depth-1:nth-child(6)
    {
        display: inline-block;
        margin: 0 0 0 116px;
    }



    #restaurantMapLogo {
        /*display: none;*/
    }
    
    #mapFooter {
        bottom: 0;
        height: 131px;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }

    #mapFooterImages {
        bottom: 6px;
        position: fixed;
        text-align: center;
        left: 20%;
        width: 60%;
        min-width: 300px;
    }


    #mapFooter img {
        padding: 1px 3px 0 0;
        cursor: pointer;
        width: 80px;
    }


}

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

    #mainContent {
        /*background: #00ff00;*/
        
    }

    #containerForm {
        background: #fff;
        /*overflow: hidden;*/
    }


    #responsiveControlsContainer {
        display: block;
        /*background: #002448;
        height: 82px;*/
    }

    
    #header {
        border-bottom: 0 solid #000;
        left: 0px;
        margin: 0 auto;
        max-width: 1150px;
        padding: 20px 0px 2em 0;
        /*position: fixed;*/
        top: 0;
        width: 100%;
        background: #002448;
        bottom: 0;    
        z-index: 99999;
        display: none;
    }

    #menuSubBlue ul li, #menuSubBlueol li {
        float: left;
        padding: 0 10px 0 10px;
    }

    #menuSubBlue {
        float: left;
        left: 10px;
        position: relative;
        top: 90px;
        width: 100%;
    }

    
    #menuSubBlue li a, #menuSubBlue li a:visited {
        color: #000;
        font-size: 11px;
        font-weight: normal;
        text-decoration: none;
        text-transform: uppercase;
    }

    
    #menuSubBlue li a.currentPage {
        color: #949494;
    }

    #header #clickToBookButton {
        margin: auto;
        display: block;
        cursor: pointer;
    }

    #menuSubBlue {
        float: left;
        left: 10px;
        position: relative;
        top: 86px;
        width: 100%;
    }
       
    .social-button ,.social-button-blue {
        margin: 0px 0px 0 0;
    }

    #responsiveLocationButton {
        margin: auto;
        display: block;    
        z-index: 9999999;
        
    }

     #responsiveCloseNavigationButton {
        margin: auto;
        display: block;
        z-index: 9999999;
        
    }

    #responsiveOpenNavigationButton {
        margin: auto;
        display: block;
        z-index: 9999999;
        
    }

    #responsiveSocialMediaContainer {   
        width: 100%;
        text-align: center;
        padding-top: 22px;
        position: absolute;
        left: 0px;
        top: 90px;
    
    }

    #responsiveSocialMedia {
        width: 70%;
        margin: 0 15% 0 15%;
        text-align: center;
        padding-top: 22px;
    }

    #responsiveHeaderHtml {
        text-align: center;
        width: 100%;
        margin: 50px 0 0 0;
        display: block;
    }

    #responsiveTopNavCaretDown {
        cursor: pointer;
        left: 0;
        position: absolute;
        text-align: center;
        top: 71px;
        width: 100%;
    }

    #logo {
        float: none;
        margin: 0 auto;
        width: 130px;    
        padding: 0 0 3em;
    }

    #responsiveControlsContainer {    
        top: 0;
        left: 0;
        position: absolute;
        z-index: 1000001;
        display: block;
        width: 100%;
        opacity:0;
    }

    #responsiveOpenNavigationButton i {
        color: #ffffff;
        font-size: 42px;
        position: absolute;
        top: 20px;
        left: 20px;
        cursor: pointer;
    }

    #responsiveCloseNavigationButton i {
        color: #ffffff;
        font-size: 42px;
        position: absolute;
        top: 20px;
        left: 70px;
        cursor: pointer;
        display: none;
    }

    #responsiveLocationButton {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    #restaurantSelectors {
        display: none;
    }

    .mainContentRow1,
    .mainContentRow2,
    .mainContentRow3 {
        float: left;
        width: 100%;     
        padding: 0;
        margin: 0 0 0 10px;
    }

    #menuSub,#menuSubBlue {
        display: none;
    }


    #mainContent {
        margin: 0 auto;
        max-width: 100%;
        padding: 140px 2% 0 2%;
    }

    #mainContentColumn {
        text-align: left;
    }

    #mainContentColumn img {
        text-align: center;
        /*width: 100%;*/
        height: auto;
        max-width: 100%;
    }

    .mainContentRow2 img {
        max-width: 100%;
    
    }

    .reviewItemInline img {
        margin-bottom: 20px;
    }

    .mainContentRow3 .quote {
        margin-bottom: 15px;
    }

    #clickToBookButtonContainer {
        text-align: center;
        display: block;
    }

    .clickToBookButton {
        display: block;
        float: none;
        margin: 0 auto;
        text-align: center;
    }

    .mainContentRow1  {
        float: none;
    }


    #mainContentColumn .rating img {
        width: 70px;
    }

    .social-button,.social-button-blue {
        position: absolute;
        text-align: center;
        top: 130px;
        width: 100%;
    }

    .social-button,.social-button-blue {
        display: none; 
    }

    #MobileHomepageQuoteContentPlaceHolderFix {
        display: block;
    }

    #menuMain {
        float: left;
        padding: 25px 0 0;
    }

    #menuMain li a, #menuMain li a:visited {
        color: #fff;    
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        font-family: "Roboto Condensed", sans-serif;
        width: 100%;
        display: block;
    }



    #menuMainBlue {
        float: left;
        padding: 25px 0 0;
    }

    #menuMainBlue li a, #menuMainBlue li a:visited {
        color: #fff;    
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        font-family: "Roboto Condensed", sans-serif;
        width: 100%;
        display: block;
    }
    .menuItem.depth-1 {
        display: inline-block;
        margin: 0 0 0 0px;
        background: #123356;
        width: 84%;
        height: 24px;
        padding: 10px 10px 10px 30px;
        margin: 0 5% 3px 3%;
    }

    .menuItem.depth-1:nth-child(1)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }
  .menuItem.depth-1:nth-child(2)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }

    .menuItem.depth-1:nth-child(3)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }

    .menuItem.depth-1:nth-child(4)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }

    .menuItem.depth-1:nth-child(5)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }

    .menuItem.depth-1:nth-child(6)
    {
        display: inline-block;
        margin: 0 0 3px 3%;
    }


    .mainContentRow3.quote {
    margin: 0 0 0 10px;
        text-align: left;
        
    }
    
.rightColumnContent {
    color: #001a3e;
    margin: 0 0 0 10px;
}



    #restaurantMapLogo {
        display: none;
    }


    .restaurantMapInfoPanel {
        z-index: 1;
    }

    .restaurantMapInfoPanelContainer {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: block;
        cursor: pointer;
    }

    #restaurantMapInfoPanel1 {
        position: relative;
        top: -20px;
        left: 0px;
        width: 210px;
        padding: 20px;
        height: 60px;
        text-align: center;
    }


    #restaurantMapInfoPanelBackground1 {
        background: transparent url("/images/map-popup-responsive.png") repeat scroll 0% 0%;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    #restaurantMapInfoPanel2 {
        position: relative;
        top: -20px;
        left: 0px;
        width: 210px;
        padding: 20px;
        height: 60px;
        text-align: center;
    }

    #restaurantMapInfoPanelBackground2 {
        background: transparent url("/images/map-popup-responsive.png") repeat scroll 0% 0%;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    #restaurantMapInfoPanel3 {
        position: relative;
        top: -20px;
        left: 0px;
        width: 210px;
        padding: 20px;
        height: 60px;
        text-align: center;
    }

    #restaurantMapInfoPanelBackground3 {
        background: transparent url("/images/map-popup-responsive.png") repeat scroll 0% 0%;
        opacity: .70;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .restaurantMapInfoPanel a {
        margin: 20px 0 0 0;
        position: absolute;
        top:0px;
        left: 0px;
        font-family: "Roboto Condensed",sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        width: 100%;
    }

    #restaurantMapInfoPanel1 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #ffffff;
    }

    #restaurantMapInfoPanel2 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #ffffff;
    }

    #restaurantMapInfoPanel3 a {
        font-family: "Roboto Condensed",sans-serif;
        font-size: 22px;
        font-weight: bold;
        color: #ffffff;
    }

    .restaurantMapInfoPanelImage {
        color: #ffffff;
        left: 10px;
        margin-top: 10px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 56px;
        }

    .restaurantMapInfoPanelText {
        color: #ffffff;
        font-size: 9px;
        line-height: 1.2;
        left: 76px;
        margin-top: 30px;
        position: absolute;
        text-align: left;
        top: 2px;
        width: 100px;
    }

    .restaurantMapInfoPanel img {
        margin: 20px auto 0 auto;
        position: relative;
        top:0px;
        left: 0px;
        width:100%
    }

    #restaurantMapInfoPanel1 h1,
    #restaurantMapInfoPanel2 h1,
    #restaurantMapInfoPanel3 h1 {
        font-size: 10px;
        color: #ffffff;
        line-height: 0.7;
    }

    .restaurantMapInfoPanelBookNowButton {    
        left: 50px;
        margin-top: 30px;
        position: absolute;
        top: 40px;
    }

    #largeBookingMessage {
        color: #fff;
        width:260px;
        font-size: 12px;
        margin: 0 auto;
    }
    
    #mapFooter {
        bottom: 0;
        height: 111px;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }

    
    #mapFooterImages {
        bottom: 6px;
        left: 10%;
        /*min-width: 300px;*/
        position: fixed;
        right: 10%;
        text-align: center;
        width: 80%;
    }


    #mapFooter img {
        padding: 1px 3px 0 0;
        cursor: pointer;
        width: 50px;
    }

    
    #mapFooterBackground1 {
        background: #002348 none repeat scroll 0 0;
        border: medium none;
        border-radius: 15px;
        height: 100%;
        left: 0;
        opacity: 0.7;
        position: relative;
        text-align: center;
        top: 0;
        width: 97%;
    }

    #footer {
        display: none;
    }


    #mainContentColumn .clickToBookButton,#responsiveTopNavCaretDown {
        display: none;
    }

    #footerContentContainer {
        background-color: #002348;
        border-top: 0 solid #666;
        color: #666;
        float: left;
        margin: 4px 0 0;
        padding: 20px 0 20px;
        width: 100%;
    }

    #footerFishersAwards {
        width: 100%;
        margin: 0 0 0 0;
        float: left;
        text-align: center;
    }

    #footerRestaurants {
        width: 100%;
        margin: 0 0 0 0;
        float: left;    
        text-align: center;  
    }

    #footerRestaurantAwards {
        float: left;
        width: 100%;
        color: #fff;
        text-align: center;
    }

    #footerRestaurantSelector1 {
        float: left;
        width: 100%;
        color: #fff;
        text-align: center;
    }

    #footerRestaurantSelector2
    {
        float: left;
        width: 100%;
        color: #fff;
        text-align: center;
    }
    
    #footerRestaurantSelector3 {
        float: left;
        width: 100%;
        color: #fff;
        text-align: center;
    }

    #footerRestaurantSelector1 h3 {
        font-size: 18px;
    }

    #footerRestaurantSelector2 h3 {
        font-size: 18px;
    }
    
    #footerRestaurantSelector3 h3 {
        font-size: 18px;
    }

    #footerAwardLogos {
        width: 100%;
        margin: 0 0 0 0;
        float: left;       
        text-align: center;
    }

    
    #toptableimg {
        float: none;    
        display: block;
        margin: 0 auto;
    }

    #tripadvisorimg {
        float: none;
        clear: both;    
        display: block;
        margin: 0 auto;
    }



    #webLogo {
        margin: 20px 0 20px 0;
        clear: both;
    }

    #webLogo a {
        color: #ffffff;
        font-size: 12px;
    }
   

    #resDiaryFrameSelectorLinks {
        padding: 1%;   
        margin: 10px 0 15px 0;
    }


    #resDiaryFrameSelector a {    
        color: #000;
        cursor: pointer;
        display: block;
        padding: 10px;
        font-size: 10px;
        /*width: 33%;*/
        display: inline-block;
        z-index: 2147483647;
    }

    #closeResDiaryFrame {
        color: #fff;
        cursor: pointer;
        display: none;
        font-size: 30px;
        opacity: 1;
        position: fixed;
        right: 10px;
        top: 0;
        z-index: 2147483647;
    }

    #resDiaryFrameSelectorLinksTitle {
        height: 50px;
        font-size: 18px;
    }

    .TA_certificateOfExcellence {
        width: 170px;
        margin: 0 auto;
        padding: 20px 0 0 0;
    }

    .TA_excellent {
        width: 170px;
        margin: 0 auto;
        padding: 0;
    }


}