/* Reset some styles :) */
#page-wrapper,
.region-page-closure {
  min-width: 0;
}

#page,
#main-wrapper,
#header,
#main,
.content,
.node,
.clearfix,
.section,
#content-area,
#content,
#sanbi-node-wrapper,
#footer,
.field-type-datetime,
.group-extra {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  clear: both !important;
}

#header {
  width: auto;
}
  #logo {
    display: block;
    width: auto;
    height: 55px;
    margin: 0;
    padding: 20px 10px;
    text-align: center;
  }
  
  #header #search-box {
    display: none;
  }
  
  #secondary-menu {
    margin: 0 10px 20px !important;
  }
  
  #header .section,
  .section-gardens #header .section,
  .section-human-capital-development #header .section,
  .section-programmes #header .section,
  .section-information #header .section,
  .section-news #header .section,
  .section-events #header .section,
  .section-shops #header .section,
  #header,
  #main,
  .front #main,
  #main-wrapper {
    background: #fff;
  }
  
  #header #navigation {
    width: 290px; /* This is just till i find out why it floats only sometimes :) */
    margin: 0;
  }
    #header #navigation #main-menu {
      display: block;
      width: auto;
    }
      #header #navigation #main-menu li {
        padding: 0 0 10px 10px;
        margin: 0;
      }
      #header #navigation #main-menu li,
      #header #navigation #main-menu li a {
        float: left;
        display: inline;
      }

h1.title {
  margin-left: 10px;
  margin-right: 10px;
}

.breadcrumb {
  padding: 10px;
}

#main #content,
#main .region-sidebar-second,
#footer {
  clear: both;
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}

#main .region-sidebar-second,
#main .region-sidebar-first {
  border: #212121 solid !important;
  border-width: 10px 0 0 !important;
  width: auto !important;
  display: block !important;
}

#main .region-sidebar-first {
  padding: 10px 10px !important;
  width: 94% !important;
}
  #main .region-sidebar-first #block-menu_block-2 {
    display: block !important;
    width: 100% !important;
  }

.field-type-datetime,
.group-extra {
  margin: 10px 0 !important;
  padding: 0 0 0 45px !important;
  font-size: 11px !important;
}
  .group-extra .field {
    font-size: 11px !important;
    width: 250px !important;
    display: block !important;
  }

.front #content .section {
  padding: 0;
}

.front #content #content-area div,
.front #content #content-area ul {
  clear: both;
  float: left;
  display: block;
  margin: 0;
  width: auto;
}
  .front #content #content-area #sanbi-node-body div p,
  .front #content #content-area #sanbi-node-body div p.button a {
    border: none;
  }
  
  .front #content #content-area #sanbi-node-body ul {
    padding: 10px 0 20px;
    float: none;
    clear: both;
    width: auto;
    margin: 0;
  }
    .front #content #content-area #sanbi-node-body ul li {
      margin: 0;
      display: block;
      clear: both;
      padding: 10px 10px 0;
    }
      .front #content #content-area #sanbi-node-body ul li a {
        display: block;
        width: auto;
        clear: both;
        float: none;
      }

#block-views-latest_news-block_1 {
  width: auto;
  margin: 0 10px;
}
  .region-content-bottom .views-row {
    width: auto;
    display: block;
  }
    .region-content-bottom .views-row .views-field-field-displaydate-value {
      float: none;
      display: block;
      text-align: left;
    }
    .region-content-bottom .views-row .views-field-title {
      width: auto;
    }

.front #block-views-event_calendar-calendar_block_1 .attachment-before,
.front #block-views-event_calendar-calendar_block_1 .attachment-before .view-content {
  width: 120px;
}
#block-views-event_calendar-calendar_block_1 .view-content {
  padding: 10px 0 0;
}

#block-views-weekly_features-block_1 .field-content h3 {
  width: auto;
  font-size: 11px;
  width: 125px;
}

#block-menu_block-6 ul,
#block-menu_block-7 ul {
  width: auto !important;
}
  #block-menu_block-6 ul li,
  #block-menu_block-7 ul li {
    display: block !important;
    width: 93% !important;
    margin: 5px 10px !important;
  }

#content-area {
  width: auto !important;
  padding: 0 10px !important;
  overflow: hidden;
}
  .front #content-area {
    padding: 0 !important;
  }

.view-latest-news .item-list ul li,
.view-event-calendar .item-list ul li {
  font-size: 11px !important;
  overflow: hidden !important;
}
  /* Good grief CSS is messy sometimes... ;) */
  .view-latest-news .item-list ul li .views-field-field-image-fid,
  .view-latest-news .item-list ul li .views-field-field-displaydate-value,
  .view-latest-news .item-list ul li .views-field-title,
  .view-latest-news .item-list ul li .views-field-view-node,
  
  .view-event-calendar .item-list ul li .views-field-field-image-fid,
  .view-event-calendar .item-list ul li .views-field-field-displaydate-value,
  .view-event-calendar .item-list ul li .views-field-title,
  .view-event-calendar .item-list ul li .views-field-body,
  .view-event-calendar .item-list ul li .views-field-tid,
  .view-event-calendar .item-list ul li .views-field-field-eventdate-value {
    width: auto !important;
    clear: both !important;
    float: none !important;
    font-size: 11px !important;
    display: block !important;
    float: left !important;
  }
  
  .view-event-calendar .item-list ul li .views-field-tid {
    margin: 5px 0 0;
  }
  .view-event-calendar .item-list ul li .views-field-field-eventdate-value {
    margin: 0 0 5px;
  }

#footer ul li,
#footer ul li.last {
  display: block;
  width: auto;
  text-align: center;
  float: none;
  clear: both;
}

/* Make sure that images are never too wide. */
#sanbi-node-body img {
  max-width: 100% !important;
}

#sanbi-node-body p {
  clear: both;
}

/* The table's are not really listening to me... */
#sanbi-node-body table {
  width: 90% !important;
}

p.clear {
  min-width: 0;
}

/* The map is too big for mobile screens, bye bye :D */
/* We may be able to do some clever stuff with javascript if we feel like it. */
#block-block-1,
#block-block-6 {
  display: none;
}

/* The garden galleries are too big and complex to make smaller. */
#gallery {
  display: none;
}

/* The survey block is annoying on mobile, it doesn't behanve nicely. */
#block-webform-client-block-5502 {
  display: none;
}
/* RR added to fix initial hidden menu */
.menu-closed { 
   display: none !important; 
}
/* RR remove banner 
#fakerotational {
   display: none !important;
} */

/* RR added entries below to fix Creature feature mobile display */
.responsive-mobile .node-type-creature-feature .field-field-animal-classification {   
   position: relative !important;
   margin-bottom: 40px !important;
   width: auto !important;
}
.responsive-mobile.node-type-creature-feature #content .section {
   left: 10px !important;
}
.responsive-mobile .node-type-creature-feature #content .section .field-field-description2 {
   display: block !important; 
   position: relative !important;
   float: right;
}

body.responsive-mobile.node-type-creature-feature {
   background-color: #f4efd9 !important;
}