/*
 * Global Styles
 */

/* Tag-level styles */

html {
    margin-left: calc(100vw - 100%);
}

a {
    text-decoration: none
}

a:link,
a:visited,
a:hover {
    color: #233237;
}

.guide-text a:link,
.guide-text a:visited,
.guide-text a:hover,
.static-text a:link,
.static-text a:visited,
.static-text a:hover {
    color: rgba(152, 75, 67, 1.0);
    font-weight: bold;
}

a.linkbutton {
    padding: 5px;
}

body {
    font-family:"Open Sans", AppleGothic, sans-serif;
    font-weight: lighter;
}

table {
    margin: auto;
    border-collapse: collapse;
    font-weight: lighter;
}

table.contact-form {
    border-style: none;
}

th {
    font-weight: lighter;
}

ul {
    list-style: none;
}

li {
    margin: 3px;
}

/* Class-level styles */

div.frame-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

div.outer-frame {
    position: relative;
    max-width: 1024px;
    min-width: 526px;
    margin: 0 auto;
}

div.middle-frame {
    max-width: 896px;
    margin: 0px 20% 0px 20%;
}

.play-detail-set {
    text-align: center;
}

.play-detail-set tr:nth-child(odd) {
    background-color: rgba(35, 50, 55, 0.1);
}

.play-detail-set tr:nth-child(1) {
    background-color: rgba(152, 75, 67, 0.5);
}

.play-detail-set tr {
    border: none;
}

table.play-detail-set {
    margin: 0% 12% 10% 12%;
}

span.unverified-symbol-small,
span.unverified-symbol {
    font-weight: bold;
    color: rgba(182, 75, 67, 1.0);
}

span.unverified-symbol {
    font-size: 130%;
}

span.verified-symbol-small,
span.verified-symbol {
    font-weight: bold;
    color: rgba(67, 75, 182, 1.0);
}

span.verified-symbol-small {
    font-size: 110%;
}

span.verified-symbol {
    font-size: 170%;
}

.play-detail-set td,
.play-detail-set th {
    width: 100px;
    padding: 10px 6px 10px 6px;
}

.play-detail-set th.detailed {
    width: 2000px;
}

.play-detail-set th.terse {
    width: 40px;
}

.play-detail-set th.icon {
    width: 5px;
}

.play-detail-set th.even {
    width: 300px;
}

.warning,
.notice {
    padding: 10px;
    margin: 10px;
}

.notice {
    background-color: rgba(35, 50, 55, 0.1);
}

.note {
    font-size: 75%;
    margin-left: 10px;
    margin-right: 10px;
}

.warning {
    background-color: rgba(152, 75, 67, 0.3);
}

p.static-text {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: left;
}

p.error-text,
p.guide-text,
td p.static-text {
  text-align: center;
}

p.error-text {
  margin-top: 0px;
  margin-bottom: 40px;
}

span.citation {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px ;
  text-indent: -24px ;
  display: block;
}

.tucked {
    text-align: right;
}

.unicode-icon {
    font-family: FontAwesome;
    padding-left: 4px;
    padding-right: 4px;
}

.fa, .fas {
    display: inline;
}

/* UI Styles (May be either class- or tag-level) */

input,
.button,
.button-inline,
.button-inline-selected,
.button-inline-small {
    cursor: pointer;
    margin: 2px;
    border: solid;
    border-radius: 4px;
    border-width: 1px;
    border-color: rgba(152, 75, 67, 0.4);
    padding: 2px 6px 3px 6px;
    font-family: inherit;
    user-select: none;
}

input,
.button {
    height: 25px;
    font-size: 80%;
}

.admin-submit input[type="text"] {
    width: 100%;
}

.button-inline {
    height: 18px;
    font-size: 65%;
    padding: 1px 6px 2px 6px;
    margin: 2px 10px 3px 10px;
}

.button-inline-small {
    height: 10px;
    font-size: 50%;
    padding: 1px 3px 1px 3px;
    margin: 2px 10px 3px 10px;
}

input {
    background-color: rgba(152, 75, 67, 0.1);
}

.ui-menu .ui-menu-item {
    background-color: rgba(152, 75, 67, 0.1);
    font-size: 75%;
}

.ui-menu .ui-menu-item,
.ui-menu .ui-menu-item .ui-state-active {
    font-weight: lighter;
    font-family: "Open Sans", AppleGothic, sans-serif;
}

.button,
.button-inline,
.button-inline-small,
input[type="submit"] {
    background-color: rgba(152, 75, 67, 0.2);
    font-weight: lighter;
}

.button-inline-selected {
    background-color: rgba(152, 75, 67, 0.6);
}

body:focus {
    outline-color: rgba(152, 75, 67, 0.6);
}

select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    background-color: rgba(152, 75, 67, 0.2);
    padding: 3px 5px 3px 5px;
    margin: 3px;
    font-weight: lighter;
    font-size: 80%;
    font-family: "Open Sans", AppleGothic, sans-serif;
}

/*
 * Header and Footer Styles
 */

table.title {
    margin: 0% 20% 0% 20%;
}

.title th,
.title td {
    width: 170px;
}

.title th {
    font-size: 10px;
    height: 20px;
    padding: 0px 6px 0px 6px;
}

.title td {
    padding: 10px 6px 0px 6px;
}

.title {
    font-family: "Open Sans", AppleGothic, sans-serif;
    font-size: 25px;
    text-align: center;
    margin: 40px auto 20px auto;
}

table.footer-nav {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 80%;
    border-top: 1px solid rgba(0, 0, 0, 0.65);
}

.footer-nav span {
    padding: 0px 10px 0px 10px;
}

.footer-nav th,
.footer-nav td {
    padding: 10px 15px 10px 15px;
}

.header-title-nav th,
.header-title-nav td {
    padding: 10px;
}

.search-bar {
    text-align: center;
    height: 32px;
    padding: 0px 0px 15px 0px;
}

.search-bar form {
    margin-bottom: 0px;
}

/* Frontpage Styles */

td.play-title,
td.play-title-icon {
    width: 150px;
}

div.play-title {
    padding: 4px 0px 20px 0px;
    margin: 2px;
}

div.play-title-icon {
    text-align: center;
    margin: 12px 0px 0px 0px;
}

div.play-title-icon-border {
    width: 100px;
    height: 100px;
    margin: 0px auto;
    border-radius:100px;
    border: 1px solid;
}

img.play-title-icon {
    height:80px;
    width:80px;
    margin: 10px;
    border-radius: 20px;
}

img.play-title-icon-generic {
    height:100px;
    width:100px;
    border-radius: 100px;
}

.play-title,
.body-text {
    font-family: 'Open Sans', AppleGothic, sans-serif;
    text-align: center;
}

.play-title {
    font-size: 14px;
}

.about {
    font-size: 10px;
}

.hidden {
    display: none;
}

.hidden-icon {
    display: none;
    /* Using visibility: hidden instead of display: none keeps the 
     * words from subtly changing position when the icon appears.
     * But it skews the headers slightly to one side, so it's not
     * a perfect solution; still working on this problem. */
    /* visibility: hidden; */
}

/* Detail Table Styles */

.play-title-header {
    font-family: 'Open Sans', AppleGothic, sans-serif;
    font-size: 20px;
}

table.play-title-header {
    margin: 0px 10% 25px 10%;
}

td.play-title-header-icon {
    vertical-align: top;
    padding-right: 10px;
}

td.play-title-header {
    height: 50px;
}

.play-issue-header {
    font-size: 75%;
}

td.play-issue-header {
    vertical-align: top;
}

.play-issue-header span {
    display: inline-block;
    padding: 0px 10px 0px 0px;
}

.modal-header {
    background-color: rgba(152, 75, 67, 0.3);
}

.modal-title {
    font-weight: lighter;
}

/* Styles for Admin and Librarian views */

table.admin-ui {
    border-collapse: separate;
    border-spacing: 0px 40px;
}

table.admin-ui td {
    min-width: 400px;
}

table.admin-submit {
    border-collapse: separate;
    border-spacing: 10px;
}

th.librarian-select-ui {
    height: 50px;
}

th.librarian-select-ui,
td.librarian-select-ui {
    min-width: 120px;
}

td.librarian-select-ui-wide,
th.librarian-select-ui-wide {
    min-width: 450px;
}

span.toggle-up,
span.toggle-down {
    display: inline-block;
    font-size: 80%;
    transition-property: all;
    transition-duration: 0.1s;
    /* -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; */
    user-select: none;
}

span.toggle-down {
    transform: rotate(90deg);
}

/* style for contact page START */
div.contactfieldWrapper {
  padding-bottom: 30px
}

.guardian {
  display: none;
}
/* style for contact page END */