/* Responsive App base css
 * 
 * Controls full screen responsive layout
 * To edit styles, edit style.css
 *
 */
/* 
 * Default panel width 284px
 * override in ra.js options
 */
/* normalize */
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
h1 {
  font-size: 2em;
}
img {
  border: 0;
}
/* responsive-app elements */
/* ra-container element contains all other elements
 * 
 * The ra framework uses css transforms to move the container
 * to show and hide off screen panels
 *
 * The container element will have .ra-small or .ra-large classes
 * depending on screen size
 *
 */
#ra-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* ra-panel is positioned on the left and is hidden when screen size is small
 */
#ra-panel {
  width: 284px;
  position: absolute;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
#ra-panel.ra-panel-hidden {
  display: none !important;
}
#ra-panel-content {
  overflow: auto;
}
/* ra-headmatter element contains the header, subheader, and nav
 * 
 * The ra framework will move the headmatter from to top of the screen or 
 * the top of panel1-content depending on screen size
 * 
 */
#ra-headmatter {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* responsivemenu button shows/hides nav on click
 */
#ra-responsivemenu-btn {
  float: left;
  background: url("../img/menu_white.png") no-repeat center;
  background: -webkit-image-set(url("../img/menu_white.png") 1x, url("../img/menu_white@2x.png") 2x);
  width: 44px;
  height: 44px;
}
#ra-nav-container {
  overflow: auto;
  overflow: visible \ 9;
  height: auto;
}
/* main full screen content */
#ra-main {
  position: absolute;
  overflow-y: auto;
  overflow: visible \ 9;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
/* ra-cover covers the main content on small screens when side panels are open
 * clicking on the cover returns the view to the main content
 */
#ra-cover {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
}
/* large screens */
.ra-large #ra-panel {
  left: 0;
}
.ra-large #ra-responsivemenu-btn,
.ra-large .ra-hidewhenlarge {
  display: none !important;
}
/* small screens */
.ra-small #ra-main {
  left: 0;
}
.ra-small #ra-panel {
  top: 0;
  right: 100%;
  height: 100%;
}
.ra-small .ra-hidewhensmall {
  display: none !important;
}
.ra-small #ra-nav {
  position: absolute;
  top: 44px;
  left: 0px;
  overflow: hidden;
  width: 100%;
  max-height: 100%;
  z-index: 10000;
}
.ra-small #ra-nav.ra-nav-hidden {
  max-height: 0;
}
.ra-small #ra-headmatter {
  height: 44px;
}
/* full screen mode */
.ra-fullscreen #ra-panel {
  display: none !important;
}
.ra-fullscreen #ra-headmatter {
  display: none !important;
}
/* subpanels */
.ra-subpanel-l {
  float: left;
  overflow: auto;
  height: inherit;
}
/* hiding elements */
.ra-hidden {
  display: none !important;
}
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ie7 */
.clearfix {
  zoom: 1;
}
/* basic styling for button divs */
.ra-btn {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}