/* default style for all panels */
.panel {
  position: absolute;
  background-color: #000;
  color: #FFF;
  top: 55px;
  left: 0.5%;
  right: 0.5%;
  width: auto;
  bottom: 5px;
  font-size: 30px;
  display: none;
  margin: 0;
}
/* don't display .desktop_options by default */
.desktop_options {
  display: none;
}
/* when #Panel_1 is shown */
.Panel_1-shown {
  /* display it */
}
.Panel_1-shown #Panel_1 {
  display: block;
}
/* when #Panel_2 is shown */
.Panel_2-shown {
  /* display it */
}
.Panel_2-shown #Panel_2 {
  display: block;
}
/* when #Panel_1 and #Panel_2 are shown */
.Panel_1-shown.Panel_2-shown {
  /* Panel_1 will use the left half of the screen */
  /* Panel_2 will use the right half of the screen */
}
.Panel_1-shown.Panel_2-shown #Panel_1 {
  left: 0.5%;
  right: 50.25%;
}
.Panel_1-shown.Panel_2-shown #Panel_2 {
  left: 50.25%;
  right: 0.5%;
}
/* when we're in desktop or desktop-wide mode */
.desktop,
.desktop-wide {
  /* display our .desktop_options elements */
}
.desktop .desktop_options,
.desktop-wide .desktop_options {
  display: block;
}
/* when we're on a tablet */
.tablet {
  /* when we're on a tablet and showing both panels */
}
.tablet .Panel_1-shown.Panel_2-shown {
  /* the panels should have a different background color
        ** and we'll make them flush with the left and right of
        ** the screen since we have less space for content, we'll
        ** also disable the rounding of corners because they look 
        ** odd when flush to the edge of the visible area 
        */
  /* we'll also set diffent background colors on
        ** #Panel_1 & #Panel_2 as well as make them consume
        ** 50% of the screen, with each getting their own half
        */
}
.tablet .Panel_1-shown.Panel_2-shown .panel {
  left: 0;
  right: 0;
  background-color: #333;
  border-radius: 0;
}
.tablet .Panel_1-shown.Panel_2-shown #Panel_1 {
  color: #999;
  left: 0;
  right: 50%;
}
.tablet .Panel_1-shown.Panel_2-shown #Panel_2 {
  color: #666;
  left: 50%;
  right: 0;
  background-color: #EEE;
  border-left: 1px solid #999;
  z-index: 10;
}
/* when we're on a mobile device */
.mobile {
  /* our panels will have a lighter background and 
    ** be flush with the edge of the visible area 
    */
  /* we'll hide the #Panel_2 toggle controls by default */
  /* if #Panel_1 is shown, we'll show the #Panel_2 toggle controls */
  /* when #Panel_2 is shown */
}
.mobile .panel {
  background-color: #999;
  color: #333;
  left: 0;
  right: 0;
}
.mobile .Panel_2_toggle {
  display: none !important;
}
.mobile .Panel_1-shown .Panel_2_toggle {
  display: block !important;
}
.mobile .Panel_2-shown {
  /* we'll hide #Panel_1 and #Panel_1's toggle controls */
  /* we'll show #Panel_2 */
}
.mobile .Panel_2-shown #Panel_1,
.mobile .Panel_2-shown .Panel_1_toggle {
  display: none !important;
}
.mobile .Panel_2-shown #Panel_2 {
  color: #666;
  left: 0;
  right: 0;
  background-color: #EEE;
}
.state-horz.desktop .Panel_1-shown.Panel_2-shown #Panel_1,
.state-horz.desktop-wide .Panel_1-shown.Panel_2-shown #Panel_1 {
  top: 55px;
  bottom: 50.25%;
  left: 0.5%;
  right: 0.5%;
}
.state-horz.desktop .Panel_1-shown.Panel_2-shown #Panel_2,
.state-horz.desktop-wide .Panel_1-shown.Panel_2-shown #Panel_2 {
  top: 51%;
  bottom: 5px;
  left: 0.5%;
  right: 0.5%;
}