/* --------------------------------------------------------------
Responsive base layout ideas from grid-r.css.
This layout css is a mobile full width adaption of blueprint layout 
engine and was produced for Referlocal.

It also attempts to address some of the mobile layout issues presented
by the typical web design tactics of 2010.

Use this to extend national.css while using responsive header.
/* Columns
-------------------------------------------------------------- */
@media screen and (max-width:48em){
    .container { width: 100%; }
    .column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {

    margin: 0;
    }

    .span-1,
    .span-2,
    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-9,
    .span-10,
    .span-11,
    .span-12,
    .span-13,
    .span-14,
    .span-15,
    .span-16,
    .span-17,
    .span-18,
    .span-19,
    .span-20,
    .span-21,
    .span-22,
    .span-23,
    .span-24 {
         width: 100%;
    }
    /* The last column in a row needs this class. */
    .last { margin-right: 0; }







    /* MOBILE LAYOUT & DESIGN*/

    body{
        -webkit-font-smoothing: subpixel-antialiased;
        font-family: 'Helvetica Neue','Roboto', 'Segoe UI','Helvetica', Open Sans !important;

        min-width: 320px;
        margin:0px auto;
        font-size: 100%;
    }

    .last{
        float:none;
    }

    .column
    {
        float:none !important;
        width:100% !important;
    }
    .row{
            -webkit-box-sizing: border-box;
        -blink-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding:0px !important;;
        background:white;
        margin:0px auto  !important;
        overflow: hidden !important;

    }

    #classifiedList
    {
            -webkit-box-sizing: border-box;
        -blink-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0px !important;
        background-color:transparent !important;
        box-shadow: none !important;
        border:0px;
        border-radius: 0px !important;



    }



    tbody tr:nth-child(even) td, tbody tr.even td {background:#eee;}

    /* Clearing floats without extra markup
       Based on How To Clear Floats Without Structural Markup by PiE
       [http://www.positioniseverything.net/easyclearing.html] */

    .clearfix:after, .container:after {
      content: "\0020";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      overflow:hidden;
    }
    .clearfix, .container {display: block;}

    /* Regular clearing
       apply to column that should drop below previous ones. */

    .clear { clear:both; }
           /* Category Classes
-------------------------------------------------------------- */
    #searchForm > :not(#search_div)
    {
        display:none;
    }
    #search_div
    {
        display:block;
        background: #e7e7e7 !important;
        height:100% !important;
        box-sizing: border-box;
    }
    #search_div_content
    {
          box-sizing: border-box;
        border-radius: 3px !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        background: white !important;
       height:100% !important;
    width: 97% !important;
    line-height: 50px !important;
    margin-bottom: 2% !important;
    }
        #search_div_content > :nth-child(2),#search_div_content > :nth-child(4),#search_div_content > :nth-child(6)
    {
        width: 20%  !important;
        text-align: right !important;
        line-height: 50px !important;
        color:#333;

    }
            #search_div_content > :nth-child(3),#search_div_content > :nth-child(5),#search_div_content > :nth-child(7)
    {
        width: 70%  !important;
        text-align: left !important;
           line-height: 50px !important;
    }
            #search_div_content > :nth-child(8)
    {
     width:100% !important;
        text-align: right !important;
           line-height: 40px !important;
           margin: 0px !important;
           box-sizing: border-box;
           padding-right: 4%;
           border-top: #DDD 1px solid;
           font-size: 30px !important;
    }
             #search_div_content > :nth-child(8) .classifiedButton
    {

           font-size: 30px !important;
           font-weight:300 !important;
    }
    #category_parent, #q, #place
    {
        width: 80% !important;
    }
    #search_div_content > div
    {
       height:100% !important;
        width: 20%;
      text-align: center;
    }
    #search_div_content > :first-child
    {
       height:100% !important;
        width:100% !important;
      text-align: center;
      padding-top: 20px ;
          margin: 0px !important;
    }
    
        #search_div_content > :first-child a img, #search_div_content > :first-child a
    {
       height:50% !important;
        width:50%;
        margin: 0px auto !important;
    }

    #search_div div {
        float:left;
    }
    
    #classified-landing-bottom , #classified-bottom-content .left , #classified-bottom-content,.category-column , #classified_category_div, #homepage-search
    {
        width:100% !important;
       
    }
    .category-column
    {
         padding:0px !important;
    }
    #classified-bottom-content .left{
        float: none !important;
    }
    #classified-landing-bottom{
       display:none;
    }
    #classified-categories li {
        float: none !important;
        width: 100%;
        display: inline-block;
        margin: 0px;
        padding: 5px 0px 5px 0px;
        text-align: center;
    }
       #classified-categories li a{
        padding: 0px 10px 0px 10px;
        font-size: 1.2em;
    }
           #classified-categories li a:hover{
        padding: 0px 10px 0px 10px;
        font-size: 1.2em;
        color: #555;
    }
    
    #classified_category_div
    {
        margin-left: 0px !important;
        padding-top: 10px;
    }
    #regionDiv
    {
        padding-top:20px !important;
    }
    
      #classified_category_div h1, #regionDiv h1
    {
        padding-bottom: 10px;
        margin-bottom: 10px !important;
        font-weight: 300;
        border-bottom: none;
        color:#222;
        text-align: center;
    }
    #regionDiv h3 
        {
            padding-left: 5% !important;
            font-weight: 500 !important;
            font-style: italic;
            border-bottom: 2px #EEE solid !important;
        }
    .header-logo{
        width:74px;
        z-index:4 !important;
    }
    .logo-text{
        padding: 15px 0 0 65px !important;
    }
     .logo-text img{
        width:80% !important;
    }
    .regionUl
    {
        width: 40% !important;
        padding-left: 10% !important;
    }
       .regionUl li
    {
      font-size: 1.2em !important;
    }
    .classifiedBody
    {
        width:100% !important;
        height: 100% !important;
        margin: 0px !important;
    }
    #classifiedContainer 
    {
        margin:0 !important;
    }
    .white-box{
        padding: 0px !important;
    }
    .white-box > div{
        width:100% !important;
        margin:0px !important;
        padding: 0px !important;
        border: 0px !important;
    }
    .button, .classified-social-container
    {
        display:none;
    }
    #simpleModalLoadHtml, simplemodal-container-auto
    {
        width:100% !important;
    }
    .classifiedsLeftHeader
    {
        font-size: 20px;
        background-color: #446cb3;
            color:white;
            margin-top:0px !important;
    }



     #priceDiv div{
         display:inline-block !important;
        float:none !important;
        font-size:20px !important;
    }
    #priceDiv input, #priceDiv select{
        font-size:20px !important;
    }
    #price_min_control, #price_max_control
    {
      width:  80px !important;
    }
    
    .classifiedButton
    {
        display:inline-block !important;
        line-height:20px;
        padding: 0px !important;
        background:none !important;
        border:none !important;
        box-shadow: none !important;
        color: #446cb3 !important;
        font-size: 20px !important;
        width:100%;
        text-align:center;
    }
    .classifiedsFilterBox div:first-child
    {
        margin-top: 0px !important;
    }
    div.classifiedsFilterCategory
    {
        padding: 10px 0px 10px 10px !important;
    }
      div.classifiedsFilterCategory a
    {
        font-size: 18px !important;
        line-height: 20px !important;
    }
        div.classifiedsFilterCategory .left-icon
    {
       border-radius: 9px;
    }
    .classified-subs
    {
        padding-top:10px !important;
        padding-left: 10px !important;
    }
  .noCategoryFilter
  {
      display:none;
  }
    .inlineRemoveFilter 
  {
      display:inline-block !important;
      padding: 5px 20px 0px 0px;
      color: #EEE;
      
      font-size: 18px;
      float:right !important;
      text-align:right;
  }
     div  .classifiedsFilterBox
    {
        float: none !important;
        background-color: #e7e7e7;
        margin-bottom: 10px !important;

        margin:  0px 0px 10px 0px !important;
    }
        .classifiedsFilterDistance 
    {
        padding: 5px 80px 5px 15px !important;
    }

    .classifiedsFilterDistance select
    {
        font-size: 20px !important; 
        width: 250px !important;
    }
    #modal_backer, #modal_data, #modal_blank
    {
        display:none !important;
    }
 
    .classifiedRow
    {
        display:inline-block;
    }
    .classifiedRow .classifiedPhotoDiv
    {
        width:25% !important;
        height:100% !important;
    }
    .classifiedRow .classifiedPhotoDiv img
    {
        padding: auto 5px auto 0px !important;
        width: 80% !important;
    }
    .classifiedRow .classifiedBody
    {
        width:70% !important;
        font-size: 1em !important;
    }
    .paging{
        font-size:1.2em;
    }
    .classifiedsRegionDiv{
        padding-bottom: 30px !important;
        background-color: #446cb3 !important;
        color: white !important;
        padding-top: 30px !important;
    }
        .classifiedsRegionDiv a{
        font-size:1.4em !important;

        color: white !important;
        padding-top: 30px !important;
        		 -webkit-tap-highlight-color: rgba(200, 200, 200, 0.8);
		 -webkit-font-smoothing: antialiased;
    }
    .clearfix{
        border-bottom: 1px solid #eee !important;
    }
       /* BP Classes
-------------------------------------------------------------- */
    #homepage-ad-callout, .simple-list, #homepage-advertiser, #homepage-hero-image,  h1.lighter, .span-8.search-sidebar #map_canvas, .share_div, .social-icons ,.advertiser-callout
    {
        display: none !important;
    }
    
    .span-8.search-sidebar > div
    {
    	width:100% !important;
    	text-align:center !important;
    }
    #category-image-div .span-6 
    {
        background:black !important;
       overflow:hidden !important;

       width: 47% !important;
       margin: 2% 0% 0px 2% !important;
               
            box-shadow:0 1px 2px #aaa;
      border-radius:3px;
              line-height: 0px !important;

    }
    #homepage-business-categories .row.vertpad{
        background: #e7e7e7 !important;
    }

    #category-image-div .span-6 a img
    {
        background:black !important;
        opacity:1;
        width:100%;
        height:120px;
        object-fit: cover;
        z-index: -1 !important;
    }
    
    #category-image-div .span-6 h4
    {
        width:140% !important;
        float:left;
       position: relative;
       bottom:35px;
       height:45px;
       left: 0px;
       right: 0px;
      padding-left: 5px;
       color: #333;
       background: rgba(256,256,256,.9) !important;
       font-weight: 300;
       font-family: Helvetica Neue !important;
       font-size:25px !important;
       padding-bottom: 0px !important;
       margin-bottom:-60px !important;

    }
    .vertpad .span-11 h2, .vertpad .span-13 h2{
        padding-left: 5px !important;
    }
      #popular-city-list li a
    {
      font-size: 1.2em !important;
    }
    .lighter{
        padding-bottom: 0px !important;
    }
    #homepage-discovery
    {
        position:static !important;
    }
    #homepage-search-buttons ul li
    {
        padding: 10px 0px !important;
        padding-top: 20px !important;
        width: 33.3333333333333% !important;
        font-size: 1.2em !important;
        font-weight:300 !important;
    }
    #homepage-search-buttons ul
    {
        margin: 0px !important;
    }
    #homepage-search
    {
         min-width:100%;
         border:0px !important;
    }
    #homepage-search input, #listings_search_form input
    {
         margin-left: 5% !important;
    }
     .zip-search
    {
        width: 27% !important;
        margin-top:10px !important;
        margin-bottom: 10px !important;
    }
    .big-search
    {
        width: 80% !important;
        padding: 10px 5% !important;
    }
    .slick-button.search
    {
        background:#446cb3 !important;
        border: 1px !important;
        box-shadow: none !important;
        color: white !important;
        font-size: 30px !important;
        font-weight: 300;
        padding:10px !important;
        float:right !important;
        margin:10px 5% !important;
    }
    #business-categories ul li a {
      font-size: 26px;
    }
        #business-categories ul li {
      margin: 5px 10px !important;
      text-align:center;
    }
        #business-categories ul {
    padding-left: 0px;
    }

    /* Search result
    -------------------------------------------------------------- */
    .mobile-first{
        background-color: #e7e7e7 !important;
    }
    .local-listings-search-results.span-24.last .row .header.span-24-last
    {
        display:none !important;
    }
    #local-listing-profile
    {
        margin-top: 0px !important;
          border-radius: 0px;
          border-bottom: 5px solid #446cb3 !important;
    margin: 0px !important;
    }
    .search-results div
    {
       background:#e7e7e7 !important;
    }
    .search-results div .search-result
    {
       margin: 45px 5px !important; 
    padding-top: 0px !important;
       box-shadow:0 1px 2px #aaa;
      background:white !important;

    padding-right: 0px !important;
      border-radius:3px;
      position: relative;
    }
    .search-results div .search-result div
    {

       background: none !important;
    }

    .search-results div .search-result .span-4
    {
        float:left !important;
        display: inline-block !important;
        border-top: 1px solid #e7e7e7 !important;
    }
    .search-results div .search-result .span-3
    {
        position: absolute;
        left:5px;
        top:-35px;
        width: 100px !important;
        height: 100px !important;
        border-radius: 30px;
        overflow: hidden;
           box-shadow:0 1px 3px #666;
                  background:url("/res/users/classifieds/blank-image.png") #EFF0E2 !important;
                  background-repeat:no-repeat !important;
                  background-position: center center !important;

    }
    .search-results div .search-result .span-3 a img
    {
        width:100px;
        height:100px;
    }
    .search-results div .search-result .span-9
    {
    overflow: hidden !important;
    border-radius: 3px !important;
    }
    .search-results div .search-result div .result-content
    {
        padding-right: 0px !important;
        background-color: #f1f3f8 !important;
    }

     .search-results div .search-result div .result-content p
    {
    border-top: 2px solid #ff9326;
    background: white !important;
    padding: 2% !important;
    margin-bottom: 0px !important;
    }
    .result-content .header
    {

        padding-left: 110px;
        width:100% !important;
        font-size: 20px !important;
        height:60px !important;
        color:#446cb3 !important;
        display: table-cell !important;
        vertical-align: middle !important;
        text-align: center !important;
    }

    div.result-content div.search-result-category
    {
        padding-left: 110px;
        font-size: 12px !important;
    }
    .search-results div .search-result .span-4 address
    {
        width: 45% !important;
        display: inline-block !important;
           float:left !important;
           padding: 2% !important;
           font-size: 14px !important;
    }
    .search-results div .search-result .span-4 span
    {
        float:left !important;
        width: 45% !important;
            display: inline-block !important;
            font-size: 20px !important;
            font-weight: 300 !important;
            font-style: italic !important; text-align: right !important;
            padding-top: 15px !important;
    }
    .search-results div .search-result .span-4  .featured-listing-tag{
        width:98% !important;
        margin-right: 5% !important;

        height:30px !important;
        font-size: 16px !important;
        color:#3b7eff !important;
        background: none !important;
        padding-top: 0px !important;
        text-align: right !important;
        margin-bottom: -25px !important;
        position:absolute;
        top: -25px !important;
    }
    /* BP listing 
    -------------------------------------------------------------- */
    #local-listing-profile, #local-listing-container 
    {
        width:100% !important;
    }
     #local-listing-container
     {
         width:97% !important;
         margin-top:10px !important;
         border-top: 1px solid white;
            box-shadow:0 1px 2px #aaa;
      border-radius:3px;
         
     }
    #about_listing .description 
    {
         width: 100% !important;
         box-sizing: border-box;
    }
   .local-listing-section
    {
        margin-top:0px !important;
        padding-top: 0px !important;
    }
    #about_listing .top_half
    {
        height:100% !important;
    }
    #local-listing-container .span-7.listing , .listing_info .twitter , .listing_info .facebook , .listing_navigation, .span-6.top_half.listing.last , #local-listing-content-wrapper > div
    {
        display: none !important;
    }
    #local-listing-container .listing_head
    {
        margin-bottom: 0px !important;
    }        
    #local-listing-content-wrapper
    {
        margin-left: 0px !important;
    }
    #local-listing-content-wrapper #about_listing
    {
        display:block !important;
    }
 
    .cover_title
    {
        margin-top: 20px !important;
    }
    .listing_logo{
        margin-top: -120px !important;
            width: 100px !important;
            height: 100px !important;
            border-radius: 30px;
            overflow: hidden;
               box-shadow:0 1px 3px #666;
                      background:url("/res/users/classifieds/blank-image.png") #EFF0E2 !important;
                      background-repeat:no-repeat !important;
                      background-position: center center !important;
                      padding:0px !important;
                      border: 0px !important;
    }
    .listing_logo img
    {
        width:100% !important;
        height:100% !important;
    }
    
    #simplemodal-container-local-listing-other_location
    {
        width:80% !important;
    }
    .listing-hours{

        margin-top:0px !important;
        padding-left:15px !important;
        font-size: 18px;
        border:none !important;
        width: 80% !important;
        
    }
        .listing-hours span{
        text-decoration: none !important;
        text-transform: capitalize !important;
        color: #333 !important;
        font-style: italic !important;
        font-weight: 700 !important;
    }
    /* Home Page
    -------------------------------------------------------------- */
    #ad-box{
        width: 100% !important;
    }
  
    .span-13.last .centered, .card-bottom.card a .block .centered
    {
        display:inline-block !important;
        width: 100% !important;
        border-top: 1px #DDD solid;
        margin-top: 0px !important;    
    }
      .span-13.last .location.centered , .card-bottom.card a .block .location.centered
    {
        display: none !important;
    }
    .dealPrice {
        font-weight: 300 !important;
        color: #666 !important;
        font-size: 30px !important;
        font-style:italic !important;
        margin: 0px !important;
        width: 50% !important;
        line-height:45px !important;
    }
    .dealSavings{
          font-weight: 300 !important;
        color: #666 !important;
        font-size: 30px !important;
        font-style:italic !important;
              margin: 0px !important;
        width: 50% !important;
        clear: none !important;
    }
    .deal.featured .span-13.last h1{
        height: 100% !important;
        padding: 15px !important;
        font-weight: 500;
        text-align: center;
            background:#446cb3;
            color: white;
}
.card-bottom.card a .block h3
{
    color: #333;
    margin-top: 0px !important;
    height: 100% !important;
            padding: 15px !important;
        font-weight: 500;
        text-align: center;
        font-size: 20px !important;
}
.deal.featured
{
        height: 100% !important;
        border: 0px !important;
        position: initial !important;
        width: 95% !important;
        margin: 20px auto  30px auto !important;
        float: none !important;
        max-width: 400px !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        padding: 0px !important;
         
}
.deal.featured .span-13.last{
    float: left !important;
    box-sizing:border-box !important;
}
    .deal.rl
    {
        border: 0px !important;
        position: initial !important;
        width: 90% !important;
        margin: 0px auto 25px auto  !important;
        float: none !important;
        max-width: 400px !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .card-bottom.card
    {
          height: 100% !important;
    }
    .card-bottom.card a .image, .deal.featured a .image, .card-bottom.card a .block
    {
        padding: 0px !important;
    }
        .card-bottom.card a .image div, .deal.featured a .image div
    {
        border-radius: 0px !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    #deals-category-layout .row{
        background: #e7e7e7 !important;
    }
        #deals-category-layout {
            padding-top:0px !important;
    }
        /* Locked listing Page
    -------------------------------------------------------------- */
    #locked-container .span-7.listing, .deal-of-the-day-listings, #ebay_widget
    {
        display:none !important;
    }
    #local-listing-content-wrapper a img
    {
        width:100% !important;
    }
    #aswift_2_expand
    {
    	width: 100% !important;
    	overflow:hidden;
    }

}
@media screen and (min-width:30em) and (max-width:48em){
       
       .result-content .header
{
    
    padding-left: 120px;
    width:100% !important;
    font-size: 22px !important;
    font-weight: 300 !important;
}
div.result-content div.search-result-category
    {
        padding-left: 100px;
    }
}