/* ----------------------------------------------------------------------------
MITNA web site styles
Initial implementation by Alvar Saenz-Otero
Based on design for Snowriders by Nicoli Ames and directions at 
  http://www.webreference.com/authoring/style/sheets/layout/advanced/
Major overhaul 2014 by Matthew Wall
---------------------------------------------------------------------------- */

/* Global box-sizing for better sizing behavior */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
  text-align: left;
  /* color:#fff; */
  font: small Verdana, Arial, Sans-serif;
  overflow-wrap: anywhere;  /* allow long words/links to break */
  word-wrap: break-word;    /* fallback */
}

/* Internet Explorer hack */
html>body {
  font-size: small;
}
html>body table {
  font-size: small;
}

/* Page Structure ---------------------------------------------------------- */

#wrap {
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1200px;
}

#content {
  flex: 1 1 100%;
}

/* Main content area */
#main {
  background: #fff;
  padding-left: 10px;
  padding-right: 20px;
  flex: 1 1 75%;
  min-width: 300px;
}

/* Main content without sidebar */
#main_nosidebar {
  background: #fff;
  padding-left: 10px;
  padding-right: 10px;
}

/* Sidebar */
#sideBar {
  background-color: #eeeeff;
  border-left: 1px solid #22c;
  border-right: 1px solid #22c;
  border-bottom: 1px solid #22c;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 20px;
  width: 20%;
  min-width: 250px;
  order: 1;
  flex: 1 1 20%;
  float: none; /* Remove float for flexbox */
}

#sideBar h1 {
  padding: 0;
  padding-top: 14px;
  margin: 0;
  font-size: 120%;
}

#sideBar a:link,
#sideBar a:visited {
  /* Keep default */
}

#sideBar a:hover {
  text-decoration: none;
}

#sideBar li {
  padding: 6px 0px 6px 0px;
}

#sideBar .event {
  margin-bottom: 5px;
}

#sideBar .event-time {
  font-size: 90%;
}

#sideBar .event-date {
  width: 100%;
  border-bottom: 1px solid #aaaaaa;
  margin-top: 4px;
  margin-bottom: 4px;
}

#sideBar .button {
  color: #ff0;
}

#sideBar .button:hover {
  text-decoration: none;
}

/* Tables ------------------------------------------------------------------ */

#content table {
  border-collapse: collapse;
  width: 100%;
  display: block;          /* enable horizontal scrolling on small */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling iOS */
}

#content th {
  font: bold 85%/1.5em Helvetica, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px;
  color: #00A;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

#content td {
  padding-right: 15px;
  color: #000;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere; /* wrap long words */
  word-wrap: break-word;
}

#content th.thform {
  background: #eeefff;
  border: 1px solid #ddddff;
  padding-bottom: 0px;
}

#general_sched th {
  color: #000;
}

#general_sched td {
}

#news td {
  padding-bottom: 10px;
}

#calendar_list {
}

#calendar table {
}

#calendar th {
  vertical-align: top;
  text-align: right;
  border-bottom: 1px solid #dddddd;
  padding: 0px;
  padding-bottom: 4px;
}

#calendar th.weekday {
}

#calendar th.weekend {
}

#calendar td.weekday {
}

#calendar td.weekend {
  background: #f0f0f0;
  border: 1px solid #dddddd;
}

#calendar td {
  padding: 1px;
  vertical-align: top;
}

#calendar table.day {
  width: 100%;
}

#calendar th.day {
  background: #f8f8f8;
  border: 1px solid #dddddd;
  padding-left: 5px;
  color: #000000;
}

#calendar th.today {
  background: #efefaa;
}

#calendar td.today {
  background: #ffffee;
  border: 1px solid #aaaa88;
}

#calendar .event {
  margin-bottom: 5px;
}

#calendar .event-time {
  font-size: 100%;
}

#calendar .calendar-row {
  height: 160px;
}

#calmenu {
  width: 100%;
}

#calmenu .toolbar-item {
  float: left;
  width: 160px;
  margin-right: 20px;
}

#calmenu .toolbar-item-short {
  width: 40px;
}

#calmenu th {
  background: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: 0;
  border-right: 4px solid white;
}

#eventmenu th {
  font: bold 125%/1.5em Helvetica, Arial, Verdana, Sans-serif;
  color: black;
  background: #fff;
  text-align: center;
  text-transform: none;
  font-variant: small-caps;
  padding: 0;
  border-right: 1px solid white;
}

#oddrow {
  background: #eee;
}

#evenrow {
  background: #fff;
}

.oddrow {
  background: #eee;
}

.evenrow {
  background: #fff;
}

#main_pic {
  text-align: center;
  background: #dff;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 5px;
  border: 1px solid #ccc;
}

/* Links ------------------------------------------------------------------- */

a:link {
  color: #12F;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  max-width: 100%;
  display: inline-block;
}

a:visited {
  color: #04f;
  text-decoration: none;
}

a:hover {
  color: #00f;
  text-decoration: underline;
}

a img {
  border-width: 0;
}

/* lists ------------------------------------------------------------------- */

#content ul {
  margin: 12px;
  padding: 0px;
}

#content ol {
  margin: 12px;
  padding: 0px;
}

#content li {
  margin: 0px 0px 0px 20px;
  padding: 0px;
}

/* headings ---------------------------------------------------------------- */

#content h1 {
  font: bold 150% Helvetica, Arial, Verdana, Sans-serif;
}

#content h2 {
  padding-top: 0.5em;
  font: bold 130% Helvetica, Arial, Verdana, Sans-serif;
}

#content h3 {
  padding-top: 0.5em;
  font: italic bold 130% Helvetica, Arial, Verdana, Sans-serif;
  font-style: italic;
}

#content h4 {
  padding-top: 0.5em;
  font: italic bold 100% Helvetica, Arial, Verdana, Sans-serif;
  font-style: italic;
  text-transform: uppercase;
}

/* Navigation Bar ---------------------------------------------------------- */

#topBar {
  /* background:#22c; */
}

#navBar {
  position: relative;
  /* background-color:#22c; */
  padding-top: 2px;
  padding-bottom: 2px;
  width: auto;
  color: #ff0;
  z-index: 1000;
}

.navBarL {
  position: relative;
  float: left;
}

.navBarR {
  position: relative;
  float: right;
}

#navBar a {
  color: #ff0;
  /* border: 2px solid #22c; */
}

#navBar ul {
  margin: 0px;
  padding: 0px;
  /* background-color: #22c; */
  list-style-type: none;
}

#navBar ul a:hover {
  /* border: 2px solid #118;
  background-color: #118; */
  text-decoration: none;
}

#navBar li {
  margin: 0px;
  padding: 0px;
  /* background-color: #22c; */
  float: left;
  position: relative;
}

#navBar li li {
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
}

/* initially hide all sub menus */
#navBar ul ul {
  margin: 0px;
  display: none;
  padding: 2px;
  background-color: #77d;
  border: 1px solid #000;
  width: 200px;
  position: absolute;
}

/* display them on hover */
div#navBar ul li:hover ul {
  display: block;
}

#navBar a {
  display: block;
}

#navBar ul ul a {
  color: #fff;
  padding-left: 5px;
}

/* sub-Nav Bar ------------------------------------------------------------- */

#subBar {
  background: #b52b45;
  padding-left: 2px;
  padding-bottom: 3px;
  color: #ff0;
}

#subBar a {
  color: #ff0;
  padding-left: 2px;
  padding-right: 2px;
}

#subBar a:hover {
  background-color: #F00;
  text-decoration: none;
}

.subBar_sidebar {
  margin-left: -10px;
  margin-right: -20px;
}

.subBar_nosidebar {
  margin-left: -10px;
  margin-right: -10px;
}

/* subSubMenu ------------------------------------------------------------- */

#subSubMenu li {
  color: #000;
  background-color: #f00;
}

#subSubMenu li a {
  color: #000;
  background-color: #7bd;
  border: 2px solid #7bd;
}

#subSubMenu li a:hover {
  color: #fff;
  background-color: #22c;
  border: 2px solid #22c;
  text-decoration: none;
}

/* bottom bar -------------------------------------------------------------- */

#botBar {
  position: relative;
  background: #22c;
}

#botBar .modified {
}

#botBar .hi-contrast {
  font-size: large;
  font-weight: bold;
  background: #000000;
  border: 1px solid #444444;
  color: #00ff00;
  padding-left: 20px;
  padding-right: 20px;
}

#botText {
  background-color: #22c;
  color: #888;
  border: 1px solid #22c;
}

.botTextLeft {
  position: relative;
  float: left;
  padding: 4px;
}

.botTextRight {
  position: relative;
  float: right;
  padding: 3px;
  background-color: #22c;
  text-align: right;
}

.botTextRightPrint {
  display: none;
}

#botText a:link {
  color: #ff0;
}

#botText a:visited {
  color: #fd0;
}

/* 'pop-up' sections ------------------------------------------------------- */

#popBar {
  position: relative;
  z-index: 900;
}

#popBar a {
}

#popBar ul {
  margin: 0px;
  padding: 0px;
  display: inline;
  list-style-type: none;
}

#popBar li {
  margin: 0px;
  padding: 0px;
  float: left;
  display: inline;
  position: relative;
}

#popBar li li {
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
  color: #000;
}

/* initially hide all sub menus */
#popBar ul ul {
  margin: 0px;
  display: none;
  padding: 5px;
  background-color: #fff;
  border: 2px solid #ddd;
  width: 200px;
  position: absolute;
}

/* display them on hover */
#popBar ul li:hover ul {
  display: block;
}

/* for curved boxes -------------------------------------------------------- */

b.rtop {
  display: block;
  margin: 2px 0px 0px 0px;
  padding: 0px;
  border: 0px;
}

b.rbottom {
  display: block;
  margin: 0px 0px 2px 0px;
  padding: 0px;
  border: 0px;
}

b.rtop b,
b.rbottom b {
  display: block;
  height: 1px;
  overflow: hidden;
  padding: 0px;
  border: 0px;
}

b.r1 {
  margin: 0px 5px 0px 5px;
  height: 1px;
  padding: 0px;
  border: 0px;
  font-size: 0;
}

b.r2 {
  margin: 0px 3px 0px 3px;
  height: 1px;
  padding: 0px;
  border: 0px;
  font-size: 0;
}

b.r3 {
  margin: 0px 2px 0px 2px;
  height: 1px;
  padding: 0px;
  border: 0px;
  font-size: 0;
}

b.rtop b.r4,
b.rbottom b.r4 {
  margin: 0px 1px 0px 1px;
  height: 1px;
  padding: 0px;
  border: 0px;
  font-size: 0;
}

/* section headings for event registration --------------------------------- */

#eventmenu {
  margin-top: 40px;
  width: 95%;
  margin-right: auto;
}

#eventmenu th {
  vertical-align: bottom;
}

/* miscellaneous ----------------------------------------------------------- */

.week-edit {
  border: 1px solid #ddd;
}

.week-edit-add {
  border: 1px solid #ddd;
  background: #ffd;
}

.membership-stats {
  float: left;
  padding-right: 60px;
}

#good_feedback {
  margin-top: 5px;
  margin-bottom: 5px;
  font: bold 100% Helvetica, Arial, Sans-serif;
  color: #292;
  background: #efe;
  border: 1px solid #292;
}

#error_feedback {
  margin-top: 5px;
  margin-bottom: 5px;
  font: bold 100% Helvetica, Arial, Sans-serif;
  color: #922;
  background: #fee;
  border: 1px solid #922;
}

#supernews {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding: 0.25em;
  height: 14px;
  font: 1em Helvetica, Arial, Sans-serif;
  border: 1px solid #88f;
  color: #000;
  background: #eef;
}

.good-news {
  color: #22aa22;
}

.bad-news {
  color: #aa2222;
}

.notice {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.5em;
  background: #ffffaa;
  border: 1px solid #aaaa55;
}

.pending {
  color: red;
}

.confirmed {
  color: green;
}

.unpaid {
  color: red;
}

.paid {
  color: green;
}

.unapproved {
  color: red;
}

.empty-results {
  background-color: #f0f0f0;
  border: 1px solid #dddddd;
  padding: 8px;
  margin: 4px;
}

.sql-error {
  color: black;
  background-color: #ffdddd;
  border: 1px solid #ddaaaa;
  padding: 8px;
  margin: 4px;
}

.gallery {
  color: purple;
  padding: 0;
  margin: 0;
}

.photo {
  border: 1px solid #aaa;
  padding: 3px;
  margin: 15px;
}

#faq .faq_qa {
  padding-top: 30px;
}

.infobox {
  float: right;
  background: #eef;
  border: 2px solid #aac;
  padding: 8px;
  margin: 4px;
  margin-top: 20px;
  width: 35%;
}

.event_past {
  color: #aaaaaa;
}

.event_future {
}

.account_renew {
  display: block;
  background: #efe;
  border: 2px solid #0b0;
  padding: 8px;
  margin: 4px;
}

.card_assigned {
  font-weight: bold;
  color: green;
}

.card_requested {
  font-weight: bold;
  color: orange;
}

.card_inactive {
  font-weight: bold;
  color: red;
}

.card_assign {
  display: block;
  background: #efe;
  border: 2px solid #0b0;
  padding: 8px;
  margin: 4px;
}

#tabledisabled table {
}

#tabledisabled th {
}

#tabledisabled td {
}

.event_datetime td {
}

.event_reg_datetime td {
  font-size: 75%;
}

/* Responsive media queries ------------------------------------------------- */

@media (max-width: 768px) {
  #wrap {
    flex-direction: column;
  }
  #main, #sideBar {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: auto !important;
    border: none !important;
  }
  #sideBar {
    order: 2;
    margin-top: 20px;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  #navBar ul {
    display: flex;
    flex-wrap: wrap;
  }
  #navBar li {
    float: none;
    flex: 1 1 50%;
  }
  #navBar ul ul {
    position: static;
    width: 100%;
    display: none;
    background-color: #77d;
    border: none;
  }
  #navBar li:hover ul {
    display: block;
  }
  #navBar ul ul a {
    padding-left: 10px;
  }
}

@media (max-width: 480px) {
  #navBar li {
    flex: 1 1 100%;
  }
  #main {
    padding-left: 5px;
    padding-right: 5px;
  }
  a {
    word-break: break-word;
  }
}
