@import "./calendarShared.css";

/* Foundation Resets/Overrides */
.button:hover {
  text-decoration: none;
}

/* Universal Rules (serves multiple pages) */
h4.errors {
  font-size: 20px;
  font-size: 2rem;
  margin-top: 0;
  text-shadow: 1px 1px 2px rgba(96,5,5,.3);
}

caption {
  background-color: #5e5e5e;
  border: 1px solid #333;
  border-bottom: none;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  color: #fff;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.dateRow td {
  background-color: #eee;
}

/* Calendar - top navigation/header */
#calendarTop.with-header {
  border-bottom: 1px solid #333;
  margin-bottom: 1em;
  position: relative;
}

#calendarTop p {
  margin: 0 0 .5em;
  text-align: right;
}

#calendarTop.with-header p {
  margin: 4px 0 4px 100px;
}

#calendarTop a {
  border-left: 1px solid #333;
  color: #666;
  margin-left: .5em;
  padding-left: .5em;
}

#calendarTop a:first-child {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

#calendarTop h3 {
  border-bottom: none;
  color: #333;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  bottom: 3px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

/* Calendar Tabs */
.calendarTabs {
  margin: 0;
  padding: 0;
}

.calendarTabs li {
  background-color: #aaa;
  -webkit-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  float: right;
  line-height: 1.8;
  list-style: none;
  margin-left: 8px;
}

.calendarTabs a {
  color: #000;
  display: block;
  padding: 5px;
  text-decoration: none;
}

.calendarTabs span {
  color: #000;
  padding: 0 10px;
}
.calendarTabs a:hover span, .calendarTabs .active span { color: #fff; }

.calendarTabs a:hover, .calendarTabs .active {
  background-color: #5e5e5e;
  -webkit-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  padding: 5px;
}

.calendarTabs span em {
  cursor: pointer;
  margin-left: 20px;
}

/* Calendar Buttons */
.cal-buttons {
  float: left;
}

.cal-buttons a {
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  padding: 5px 12px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.cal-buttons a:hover,
.cal-buttons a:focus {
  background-color: #ebebeb;
  border-color: #adadad;
  color: #333;
  text-decoration: none;
}

.cal-buttons a + a { margin-left: 10px; }

/* List Calendar - Search */
#calListSearch {
  clear: both;
}

#calListSearch .button {
  margin: 0 0 1em 1em;
}

#calListSearch #advSearchBtn {
  margin-left: 0;
}

#calListSearch .collapse .button {
  margin: 0;
}

#calListSearch #city_only {
  vertical-align: middle;
}

#calListSearch label {
  color: #222;
  display: inline;
  margin-left: .25em;
}

/* List Calendar/Advanced Search Results - Event Table */
#eventTable table {
  border: 1px solid #5e5e5e;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

#eventTable caption {
  border: 1px solid #5e5e5e;
  -webkit-border-radius: 3px 0 0 0;
          border-radius: 3px 0 0 0;
}

#eventTable caption a {
  color: #fff;
  float: right;
}
#eventTable caption a:first-child { float: left; }

#eventTable caption div {
  line-height: 26px;
}

#eventTable select {
  font-size: 16px;
  width: auto;
}

#eventTable tr:nth-child(2n) {
  background: #fff; /* Foundation reset */
}

#eventTable td {
  border-top: 1px solid #5e5e5e;
  border-bottom: 1px solid #5e5e5e;
  padding: 5px;
}

#eventTable .event-time {
  text-align: center;
}

#eventTable .filter-options select {
  width: 100%;
}

#eventTable .show-selected {
  margin: 5px 0 2px;
  text-align: center;
}

#eventTable .day-header td {
  background-color: #c4c4c4;
  font-weight: bold;
}

#eventTable .day-header td,
#eventTable .day-grid td {
  border: 1px solid #5e5e5e;
  padding: 7px 2px;
  text-align: center;
}

#eventTable .day-header-event td {
  border-left: none;
  border-right: none;
}

#eventTable .notInMonth {
  background-color: #eee;
}

#eventTable .day-grid td > div {
  cursor: pointer;
}

#eventTable .day-grid .inMonthHighlighted {
  padding: 0;
}

#eventTable .inMonthHighlighted > div {
  border-top: 4px solid /*Link Color*/ #222222;
  padding: 7px 0; /* To get the div to FILL the td - don't understand why */
}

#eventTable .current-date {
  background-color: /*Link Color*/ #222222;
  color: #fff;
}

#eventTable .maag-grid td {
  border: 1px solid #5e5e5e;
  padding: 3px;
}

#eventTable .maag-grid td div {
  font-size: 13px;
}

#eventTable .maag-grid .dayNumber {
  font-weight: bold;
  margin: 2px 2px 3px 3px;
  text-align: right;
}

#eventTable .maag-grid .dayEvents {
  min-height: 65px;
  overflow: hidden;
}

#eventTable .maag-grid .dayEvent {
  margin-bottom: .5em;
}

#eventTable .maag-grid .dayEvent .time {
  font-weight: bold;
  margin-right: .5em;
}

#eventTable .button {
  margin-left: 1em;
}

#eventTable .button:first-child {
  margin-left: 0;
}

/* Login Form */
#signIn, #signUp {
  margin-bottom: 1em;
}

#signIn h3, #signUp h3 {
  border-bottom: 1px solid #333;
  color: #333;
  margin: 0 0 .5em;
  padding-bottom: 5px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#loginform .formButtons a {
  margin-bottom: 1em;
}

#loginform #signInBtn {
  margin-right: 1em;
}

/* Register Form */
#registerForm h3 {
  color: #333;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#registerForm p.first {
  border-bottom: 1px solid #333;
}

#registerForm .formButtons a {
  margin-bottom: 1em;
}

#registerForm #registerBtn {
  margin-right: 1em;
}

/* My Events */
#myClippedIcons {
  margin-top: .5em;
  text-align: center;
}

#myClippedIcons a {
  margin-left: 1em;
  padding-left: 28px;
  position: relative;
}

#myClippedIcons a:first-child {
  margin-left: 0;
}

#myClippedIcons [data-icon] {
  font-size: 24px;
  font-size: 2.4rem;
  left: 0;
  position: absolute;
  top: -11px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.25);
}

#myClippedTable {
  border: 1px solid #5e5e5e;
  border-collapse: collapse;
  width: 100%;
}

#myClippedTable thead {
  background-color: #c4c4c4;
}

#myClippedTable tr:nth-child(2n) {
  background: #fff; /* Foundation reset */
}

#myClippedTable td, #myClippedTable th {
  border-top: 1px solid #5e5e5e;
  border-bottom: 1px solid #5e5e5e;
}

/* Reminder Preferences */
#editPrefsForm h4:first-child {
  font-size: 20px;
  font-size: 2rem;
  margin-top: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

#editPrefsForm label {
  color: #222;
  display: inline;
}

#editPrefsForm input[type="checkbox"] {
  margin-right: .5em;
  vertical-align: middle;
}

#editPrefsForm input[type="text"] {
  display: inline;
  margin: 0 .5em;
  width: auto;
}

#editPrefsForm .button {
  margin: 0 0 1em 1em;
}

#editPrefsForm .button:first-child {
  margin-left: 0;
}

/* Edit Your Profile */
#profileForm h4:first-child {
  font-size: 20px;
  font-size: 2rem;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

#profileForm .button {
  margin: 0 0 1em 1em;
}

#profileForm .button:first-child {
  margin-left: 0;
}

/* Advanced Search */
#calendarSearchForm h4:first-child {
  font-size: 20px;
  font-size: 2rem;
  margin-top: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

#calendarSearchForm .dateFields select {
  width: auto;
}

#calendarSearchForm .button {
  margin: 0 0 1em 1em;
}

#calendarSearchForm .button:first-child {
  margin-left: 0;
}

/* View Event */
#eventInfo table {
  border: 1px solid #5e5e5e;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  width: 100%;
}

#eventInfo caption {
  font-weight: bold;
  text-align: left;
}

#eventInfo th {
  font-weight: bold;
  padding: 5px;
  text-align: right;
  width: 35%
}

#eventInfo .button {
  margin: 0 0 1em 1em;
}

#eventInfo .button:first-child {
  margin-left: 0;
}

/* Add/Edit Event */
#Event h4:first-child {
  font-size: 20px;
  font-size: 2rem;
  margin-top: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

#Event .eventTime select, #Event .eventRepeats select {
  margin-right: .5em;
  width: auto;
}

#Event .eventTime p {
  margin-bottom: .5em;
}

#Event .formButtons input {
  margin: 0 0 1em 1em;
}

#Event .formButtons input:first-child {
  margin-left: 0;
}

/* Month at a Glance (MaaG) */
.monthGlance {
  background: #fff;
}

.monthGlance label {
  color: #222;
}

#calMonthSearch h3 {
  font-size: 20px;
  font-size: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

/* MaaG - Table of events */
.MaaGTable {
  border: 1px solid #5e5e5e;
  border-collapse: collapse;
  margin-bottom: 0;
  table-layout: fixed; /* KEY to keeping the cells the same width regardless of cell content */
  width: 100%;
}

.MaaGTable caption {
  border: 1px solid #5e5e5e;
  -webkit-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.MaaGTable caption a {
  color: #fff;
  float: right;
}
.MaaGTable caption a:first-child { float: left; }

.MaaGTable caption select {
  margin-top: 5px;
  width: auto;
}
.MaaGTable caption select + select { margin-left: 8px; }

.MaaGTable thead {
  background-color: #c4c4c4;
}

.MaaGTable tr:nth-child(2n) {
  background: #fff; /* Foundation reset */
}

.MaaGTable th, .MaaGTable td {
  border: 1px solid #5e5e5e;
  color: #222;
  font-size: 13px;
  font-size: 1.3rem;
}

.MaaGTable th {
  overflow: hidden;
  padding: 7px 2px;
  text-align: center;
}

.MaaGTable td {
  padding: 3px;
}

.MaaGTable .notInMonth {
  background-color: #eee;
}

.MaaGTable .dayNumber {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 2px 2px 3px 3px;
  text-align: right;
}

.MaaGTable .dayEvents {
  min-height: 65px;
  overflow: hidden;
}

.MaaGTable .dayEvent {
  font-size: 13px;
  font-size: 1.3rem;
  margin-bottom: .5em;
}

.MaaGTable .dayEvent .time {
  font-weight: bold;
  margin-right: .5em;
}

.monthGlance .tableFooter {
  background-color: #5e5e5e;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  color: #fff;
  padding: 5px 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

/* MaaG - View Event */
.monthGlance #eventInfo table {
  margin: 1em 0;
}

/* Parent Teacher Conferences */
#ptc h3 {
  border-bottom: 1px solid #333;
  color: #333;
  margin: 0 0 .5em;
  padding-bottom: 5px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#ptc table {
  border: 1px solid #333;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

#ptc caption {
  font-size: 16px;
  font-size: 1.6rem;
}

#ptc table thead {
  background-color: #ddd;
}

/* Parent Teacher Conferences - parentTeacherForm.tpl */
#parentTeacherForm .formButtons {
  border-bottom: 1px solid #333;
  padding-bottom: 1em;
}

/* Parent Teacher Conferences - parentConfReport.tpl */
#ptcReportHd, #ptcReportBd, #ptcReportFt {
  font-family: "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
  margin-left: auto;
  margin-right: auto;
}

#ptcReportHd {
  font-weight: bold;
}

#ptcReportBd table {
  margin: 0;
}

/* `MEDIA QUERIES
 ------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

  /* Login/Register Form */
  #loginform #signInBtn, #registerForm #registerBtn {
    margin-right: 0;
  }

  /* List Calendar - Search */
  /* Reminder Preferences */
  /* Edit Your Profile */
  /* Advanced Search */
  /* Advanced Search Results */
  /* View Event */
  #calListSearch .button,
  #editPrefsForm .button,
  #profileForm .button,
  #calendarSearchForm .button,
  #eventTable .button,
  #eventInfo .button {
    margin-left: 0;
  }

  #eventTable .button + .button {
    margin-top: .5em;
  }
}

/* Add/Edit Event - ezEdit */
#Event_Color {
  display: inline;
  width: 90%;
}

#Event_Type {
  margin-top: 1em;
}

/* ezEdit */
.ezEdit {
  margin: 1em .5em .5em;
  text-align: right;
}

.ezEdit > a {
  margin-left: .5em;
}

#calendarTop .ezEdit > a {
  border-left: 0;
  padding: 0;
}

/* jPicker - Foundation overrides */
table.jPicker td.Text input {
  display: inline;
  font-size: 12px;
  height: 20px;
  padding: 2px;
}

table.jPicker td.Radio {
  width: 40px;
}

table.jPicker tr.Hex td.Text input.Hex {
  width: 60px;
}

/* MaaG - Event Bubble */
.event-bubble {
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
  padding: 15px 25px;
  position: absolute;
  width: 400px;
  z-index: 1001;
}

.event-bubble .outer-tail {
  border-style: solid;
  border-color: #ccc transparent;
  left: 192px;
  position: absolute;
}
.top .outer-tail { border-width: 0 8px 8px; top: -8px; }
.bottom .outer-tail { border-width: 8px 8px 0; bottom: -8px; }

.event-bubble .inner-tail {
  border-style: solid;
  border-color: #fff transparent;
  left: 194px;
  position: absolute;
}
.top .inner-tail { border-width: 0 6px 6px; top: -6px; }
.bottom .inner-tail { border-width: 6px 6px 0; bottom: -6px; }

.event-bubble .close {
  color: #999;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  text-decoration: none;
  top: 8px;
}

.event-bubble .close:hover {
  color: #666;
}

.event-bubble h4 {
  font-size: 17.5px;
  margin: 0 0 .5em;
}

.event-bubble form {
  margin-bottom: 0;
}

.event-bubble .eb-table {
  border: 0;
  font-size: 13px;
  margin: 0;
}

.event-bubble tr:nth-child(even) {
  background: #fff;
}

.event-bubble th, .event-bubble td {
  border: none;
  padding: 4px 5px;
}

.event-bubble .eb-key {
  text-align: right;
  vertical-align: middle;
  width: 25%;
}

.event-bubble input, .event-bubble select {
  margin-bottom: 0;
}

.event-bubble .eb-actions {
  padding-top: .8em;
}

.event-bubble .button {
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #444;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  height: 27px;
  line-height: 27px;
  margin-right: 1em;
  padding: 0 8px;
  text-align: center;
  text-decoration: none;
}

.event-bubble .button:hover {
  background-color: #f6f6f6;
  border: 1px solid #aaa;
  color: #222;
}