/*
   Licensed to Jasig under one or more contributor license
   agreements. See the NOTICE file distributed with this work
   for additional information regarding copyright ownership.
   Jasig licenses this file to you under the Apache License,
   Version 2.0 (the "License"); you may not use this file
   except in compliance with the License. You may obtain a
   copy of the License at:

   http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing,
   software distributed under the License is distributed on
   an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
   KIND, either express or implied. See the License for the
   specific language governing permissions and limitations
   under the License.
*/

/* RESPONSIVE OVERRIDES to the Bedework 3.10 Theme
   Place overrides in here based on media queries.
   This file is loaded AFTER bwThemeGlobal.css

   This stylesheet cascades alone below bwThemeGlobal.css
*/

/* All mobile views smaller than iPad portrait mode */
@media only screen and (max-width: 767px) {
  /* Hide menu components - the #mobileMenu can toggle them on */
  /* These are toggled: */
  #rightColumn {
    display: none;
  }

  /* These are not toggled (they remain hidden): */
  #ongoing,
  #bwDatePickerLinks,
  #bwViewList,
  #block-menu_block-1,
  #expSubLinksList,
  #leftColumn label,
  .sideBarContainer,
  #bwBasicSearch h3 {
    display: none;
  }
 
  /* Mobile menu placement */
  #rightColumn {
    background-color: white;
    margin: 0;
    padding: 0 2em 2em 0;
    position: absolute;
    top: 65px;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
 
  /* Columbia */
  #columbiaBar {
    text-align: center;
  }
  #siteLogo img {
    max-width: 90%;
    margin: 8px 0;
  }
  #columbiaCarousel {
    height: 440px; 
  }
  #columbiaCarousel .carouselImage {
    float: none;
    width: 100%;
  }
  #columbiaCarousel a {
    height: auto;
  }
  #columbiaCarousel img {
    margin: 0;
    min-width: 100%;
    max-height: auto;
    height: auto;
  }
  .rslides_tabs {
    top: 400px;
  } 
  #header {
    margin: 0;
  }
  #masthead {
    padding: 0;
  }
  .eventTitle {
    margin-top: 0.5em;
  }
  .secondaryColHeader h2 {
    font-size: 1.5em;
  }  
  #leftColumn {
    padding: 0.5em 1.2em;
  }
  #listEvents .withImage {
    margin-left: 96px;
  }
  #listEvents .withBlank {
    margin-left: 0;
  }
  #listEvents .eventListTime {
    display: none;
  }
  #listEvents .eventListContent {
    margin-left: 0;
  }
  #listEvents .eventListDateTime {
    display: block;
  }
  #bwDatePicker {
    margin-top: 0;
  }
  #bwDatePickerLinks {
    margin-bottom: 2em;
  }
  #bwDatePickerInput {
    width: 90%;
  }
  #feature {
    /* if features are displayed, fill the width of the screen */
    margin-left: -15px;
    margin-right: -15px;
  }
  #ongoing {
    float: none;
    padding: 0;
  }
  #bwMenuTitle {
    background-color: #ddd;
    border-color: #ccc;
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
  }
  #bwMenuTitle:hover,
  #bwMenuTitle:active {
    background-color: #ccc;
    border-color: #bbb;
    color: #555;
  }
  .leftMenuTitle {
    margin: 0;
  }
  #ongoing h3.bwEventsTitle {
    cursor: pointer;
    font-size: 1em;
  }
  #ongoing .caret {
    display: inline-block;
    margin-right: 2px;
  }
  #ongoing .bwEventList {
    display: none;
  }

  #expSubLinksList {
    margin: 0.5em 1em 0 0; /* mobile placement */
  }
  /* hide slider control on small devices */
  #exportSubscribeForm .bwSlider {
    display: none;
  }

  /* All Calendars */
  .calendarList {
    float: none;
    width: 100%;
  }
  #listEvents li.bwDateRow .bwdrB {
    display: none;
  }
  .bwDateRow,
  td.dateRow {
    text-align: center;
    border-right: 6px solid #174581;
    border-left: 6px solid #174581;
  }
  .singleEvent .bwEventImage {
    min-width: 100%;
    max-width: 100%;
    height: auto;
  }
  .singleEvent #eventIcons img {
    width: 32px;
    height: 32px;
  }
  .stButton {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
  }

  #footer {
    text-align: center;
  }
  #rightFoot {
    float: none;
    text-align: center;
  }
  #rightFoot ul {
    padding: 0;
  }
  footer.endlessScroll {
    position: static;
    bottom: auto;
  }
}

/* mobile portrait */
@media only screen and (max-width: 480px) {
  #siteLogo img {
    max-width: 86%;
    margin: 14px 0 0 0;
  }
}