/* Basic Layout */

/* Header ***************************/

#header {
  background-color: #222;
}

#header a {
  color: #fff;
}

#site-name {
    display: table-cell;
    vertical-align: middle;
}

#site-name .site-name-main {
  color: #fff;
  font-size: 3.8rem;
  font-weight: 600;
  margin: 0;
  vertical-align: middle;
  line-height: 90%;
}

#site-name .site-name-main a {
  text-decoration: none;
  font-weight: 600;
}

#site-name .site-name-main a:hover {
  background: none;
}

#site-name .site-name-slogan {
  margin: 10px 0 0 0;
  color: #eee;
  font-size: 1.2em;
  display: block;
  font-weight: 300;
}

#site-logo {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  float: right;
}

#site-logo img {
  height: 130px;
  width: auto;
  margin-right: -0.5em;
}


/* Body ***************************/

body {
  color: #222;
  font-weight: 300;
  font-size: 16px;
  font-family: 'proximanova',Helvetica,Arial,sans-serif;
  /*background: #222;*/
  /*min-width: 950px;*/
  line-height: 120%;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.6em 0;
  line-height: 100%;
  color: #2d2d2d;
}

h2 {
  font-size: 1.5rem;
  font-weight: 300;
  /*margin-top: 1.8em;*/
  line-height: 100%;
  color: #2d2d2d;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: .1em 0 0.5em 0;
  line-height: 120%;
  color: #2d2d2d;
}

h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: .4em 0 0.6em 0;
  line-height: 120%;
  color: #2d2d2d;
}

h3.errorHeading {
  color: #bb0000;
  font-weight: 500;
  margin: 0 0;
}

#content a, a:link, a:active {
  text-decoration: none;
  color: #bb0000;
  font-weight: 400;
}

.resource-button a, a:link, a:visited, a:active {
  text-decoration: revert;
  color: #ffffff;
  font-weight: 400;
}

#content a:hover {
  color: white;
  text-decoration: none;
  background: #333333;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;  
}

#content span.ext {
  background: url(icon-external-link-549843020a9c565555c96386997235ec.svg) 2px center no-repeat;
  width: 8px;
  height: 1.0em;
  padding-right: 6px;
  padding-left: 12px;
  text-decoration: none;
  margin-left: 2px;
  /*float:right;*/
}

#content .resource-button span.ext {
  background: url(icon-external-link-549843020a9c565555c96386997235ec.svg) 2px center no-repeat;
  width: 8px;
  height: 1.0em;
  padding-right: 6px;
  padding-left: 12px;
  text-decoration: none;
  margin-left: 2px;
  float:right;
}


.element-invisible {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  overflow: hidden;
  height: 1px;
}


:focus {
  outline: dashed 2px #333333; /* Accessibility */
  outline-offset: 1px;
}

img {
  display: block;
}

strong {
  font-weight: 600;
}

#page .container {
  margin: 0 auto;
  width: 98%;
  /*width: 950px;*/
  display: table;
  padding: 25px 0;
}

/* Large Button Panels */
.panel-pane .red-panel {
  background: #b00;
  color: #fff;
  margin-bottom: 1em;
  width: 100%;
  border: none;
  font-family: 'proximanova',Helvetica,Arial,sans-serif;
  font-size: 1.2rem;
  padding: 1em 0;
}

.panel-pane .red-panel:hover {
  background: #333;
  text-decoration: none;
  cursor: pointer;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
}


/* Other Body Styling */
body #page #content {
  background-color: #fdfdfd;
  /*overflow: hidden;*/
}

#content .container {
  display: table;
  margin: 0.5em auto 1em auto;
}

#content .banner {
  margin: 1em 0 0 0;
}

#content p {
  margin: 0.8em 0;
  font-size: 1rem;
  line-height: 140%;
}

p {
  margin: 0.8em 0;
  font-size: 1rem;
  line-height: 140%;
}

#content .tagline {
  font-size: 2rem;
  font-family: 'capita', Georgia, serif;
  font-weight: 100;
  line-height: 115%;
}

#content .tagline a {
  font-weight: 100;
}

#content ul {
  margin-left: 2em;
}

#content ul li {
  font-size: 1rem;
  line-height: 130%;
  padding-left: 0.5em;
  padding-bottom: 0.8em;
  list-style: square;
}

#content .column.first {
  width: 83%;
  float: right;
}

#content .column.last {
  width: 15%;
  float: left;
  margin-right: 2%;
}

#content .column.last h2 {
  margin: .2em 0 0.6em 0;
}

.caps {
  text-transform: uppercase;
}


/* Status Bar */
#content .status-bar {
  background: #ececec;
  padding: 1em 0 .75em 0;
  /*margin-bottom: 20px;*/
}

#content .status-bar .container {
  width: 100%;
  padding: 0 1em 0.2em 1em;
  margin: 0 auto;
}

#content .status-bar i {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.3rem;
  color: #666666;
  width: 35px;
}

#content .status-bar p {
  color: #444;
  font-weight: 500;
  font-size: 0.8rem;
  display: table-cell;
  vertical-align: middle;
}

#content .status-bar p strong {
  font-weight: 700;
}


/* Announcement */
#content .announcement {
  border: 2px solid #ececec;
  padding: 25px;
  margin: 1.4em 0 1em 0;
}

#content .announcement i {
  display: table-cell;
  vertical-align: middle;
  font-size: 2rem;
  color: #666666;
}

#content .announcement p {
  color: #444;
  font-weight: 500;
  font-size: 1rem;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
}

#content .announcement p strong {
  font-weight: 700;
}

#content .announcement ul {
  color: #444;
  font-weight: 500;
  font-size: 1rem;
  padding: 10px 0 0 50px;
}


/* Confirmation */
#content .confirmation {
  border: 2px solid #5fc64e;
  padding: 25px;
  margin: 1.4em 0 1em 0;
}

#content .confirmation i {
  display: table-cell;
  vertical-align: middle;
  font-size: 2rem;
  color: #5fc64e;
}

#content .confirmation p {
  color: #5fc64e;
  font-weight: 500;
  font-size: 1rem;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
}

#content .confirmation p strong {
  font-weight: 700;
}

#content .confirmation ul {
  color: #5fc64e;
  font-weight: 500;
  font-size: 1rem;
  padding: 10px 0 0 50px;
}


/* Error */
#content .error {
  border: 2px solid #b00;
  padding: 25px;
  margin: 1.4em 0 1em 0;
}

#content .error i {
  display: table-cell;
  vertical-align: middle;
  font-size: 2rem;
  color: #b00;
}

#content .error p {
  color: #b00;
  font-weight: 500;
  font-size: 1rem;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
}


#content .success p {
  color: #5fc64e;
  font-weight: 500;
  font-size: 1rem;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
}

#content .error p strong {
  font-weight: 700;
}

#content .error ul {
  color: #b00;
  font-weight: 500;
  font-size: 1rem;
  padding: 10px 0 0 50px;
}

#errorHeading {
  color: #b00;
  font-weight: 500;
}


/* Resource List and Buttons */
#content .resource-list {
  margin: 0;
}

#content .resource-list li {
  padding: 0 0.8em 0 0;
  margin: 0;
  list-style: none;
  float: left;
  display: inline-block;
}

/*#content .resource-button {*/
.resource-button {
  background: #555;
  color: #fff;
  margin-bottom: 0.8em;
  width: auto;
  border: none;
  font-family: 'proximanova', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  padding: 0.5em 0.4em 0.5em 0.7em;
}

/*#content .resource-button:focus {*/
.resource-button:focus {
  background: #333;
  text-decoration: none;
  cursor: pointer;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
}


/* Login Form */
#content #loginForm  {
  padding: 6%;
  margin: 0 0 1.2em 0;
  background: #ececec;
  width: 88%;
}

#content #loginForm fieldset {
  border: none;
}

#content #loginForm legend {
  display: none;
}

#content #loginForm p {
  margin: 0.3em 0 0 0;
  font-size: 0.95em;
}

#content #loginForm input {
  margin: 1em 0 0 0;
  padding: 3.5%;
  width: 90%;
  height: 25px;
  font-size: 1em;
}

#content #loginForm input.login {
  margin: 1em 0 0.5em 0;
  padding: 0;
  width: 80px;
  height: 35px;
  font-size: 1em;
  background: #b00;
  border: none;
  color: #fff;
  text-align: center;
}

#content #loginForm input.login:hover {
  background: #333;
}


/* Bordered Form */

#content .borderForm  {
  padding: 20px 5%;
  margin: 0;
  width: 89.7%;
  border: 1px solid #ececec;
}

#content .borderForm .field {
  width: 100%;
  clear: both;
  display: table;
}

#content .borderForm .label-text {
  width: 15%;
  padding: 10px 2% 10px 0;
  float: left;
  height: auto;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

#content .borderForm .label-text label {
  font-weight: 600;
}

.pop-div-hidden .defaultForm .input-content{
  width: 60%;
  padding: 10px 0;
  float: right;
  height: auto;
  display: table-cell;
  align-content: center;
  margin: 0;
}

#content .borderForm .input-content {
  width: 60%;
  padding: 10px 0;
  float: right;
  height: auto;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

#content .borderForm h2 {
  margin-top: 0.6em;
}


/* Default Form */
.pop-div-hidden .defaultForm,
#content .defaultForm  {
  padding: 20px 5%;
  margin: 0;
  background: #ececec;
  width: 90%;
}

.pop-div-hidden .defaultForm fieldset,
#content .defaultForm fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.pop-div-hidden .defaultForm legend,
#content .defaultForm legend {
  display: none;
}

.pop-div-hidden .defaultForm ul,
#content .defaultForm legend {
  padding-left: 2em;
}

.pop-div-hidden .defaultForm .field,
#content .defaultForm .field {
  width: 100%;
  clear: both;
  display: flex;
  align-self: center;
  /*display: table;*/
}

.pop-div-hidden .defaultForm .label-text,
#content .defaultForm .label-text {
  width: 12%;
  /*width: 38%;*/
  padding: 20px 2% 20px 0;
  /*float: left;*/
  height: auto;
  /*display: table-cell;*/
  vertical-align: middle;
}

.pop-div-hidden .defaultForm label,
#content .defaultForm .label-text label {
  font-weight: 600;
}

.pop-div-hidden .defaultForm .input-content,
#content .defaultForm .input-content {
  width: 60%;
  padding: 10px 0;
  /*float: right;*/
  height: auto;
  /*display: table-cell;*/
  vertical-align: middle;
}

#content .defaultForm .input-ro-content {
  width: 60%;
  padding: 24px 0 20px 0;
  /*float: right;*/
  height: auto;
  /*display: table-cell;*/
  vertical-align: middle;
}

#content .defaultForm p {
  margin: 0.3em 0 0 0;
  font-size: 1rem;
}

.pop-div-hidden .defaultForm .small-link,
#content .defaultForm .small-link {
  margin-top: 0;
  font-size: 0.6rem;
}

#content .defaultForm i {
  font-size: 0.8rem;
  color: #555;
}

#content .defaultForm input {
  width: 96%;
  height: 25px;
  padding: 1.5%;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#content .defaultForm input.input_8 {
  width: 8em;
  height: 1.1rem;
  padding: 1.5%;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#content .defaultForm  input.input_16 {
  width: 16em;
  height: 1.1rem;
  padding: 1.5%;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#content .defaultForm  input.input_24 {
  width: 24em;
  height: 1.1rem;
  padding: 1.5%;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#content .defaultForm  input.input_32 {
  width: 32em;
  height: 1.1rem;
  padding: 1.5%;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#content .defaultForm input.submit {
  margin: 0.5em 0 0 0.5em;
  padding: 0;
  width: 100px;
  height: 35px;
  font-size: 1em;
  background: #b00;
  border: none;
  color: #fff;
  text-align: center;
  display: inline-block;
  float: right;
}

.defaultForm input.submit:hover {
  background: #333;
}

button.submit {
  margin: 0.5em 0 0 0.5em;
  padding: 0;
  width: 100px;
  height: 35px;
  font-size: 1em;
  background: #b00;
  border: none;
  color: #fff;
  text-align: center;
  display: inline-block;
  float: right;
}

button.submit:hover {
  background: #333;
}

.defaultForm input.check-box {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0.5em 0.5em 1em 0;

  /*padding: 0;*/
  display: inline;
}

.defaultForm .check-box-text {
  display: inline-block;
  vertical-align: middle;
  margin: 0.5em 0.5em 1em 0.5em;
  /*margin: 1em 1em 2em 1em;*/
  padding-left: 0.5em;
  font-weight: 600;
}

.defaultForm .check-box-input {
  display: inline-block;
}

.radio-option-field {
  display: block;
  margin-bottom: 1em;
}

 .defaultForm .radio-option-field label {
  display: inline;
  /*margin: 0.5em 0 0.5em 0;*/
  font-size:larger; margin-bottom: 2em;
}


/* Main Menu */
#content .main-menu  {
  padding: 1.7em 1.5em 1em 1.5em;
  margin: 0 0 1.2em 0;
  /*background: #cfd4d8;*/
  background: #ececec;
}

#content .main-menu ul {
  margin: 0;
}

#content .main-menu ul li {
  list-style: none;
}

#content .main-menu ul li a.active {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  background: url(icon-nav-marker-67a8bb7076f8d5a5d4b3e9e46c2c7ca9.svg) 2px center no-repeat;
  padding-left: 22px;
}

#content .main-menu ul li a.active:hover {
  color: #333;
}


/* Security Questions */
#content .security-questions-answered {
  padding: 0;
  margin: 20px 0 35px 0;
}

#content .security-questions-answered li {
  list-style: none;
  border: 1px solid #ececec;
  background-color: #f8f8f8;
  padding: 10px;
}

#content .security-questions-answered li::before {
  font-family: fontawesome;
  content: " \f058";
  color: #5fc64e;
  padding: 0 12px 0 5px;
}

#content .security-question-label {
  width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
  margin: .5em 0 0.7em 0;
}

#content .security-question {
  width: 100%;
  height: 25px;
  font-size: 0.8rem;
  margin-bottom: 0.7em;
}


/* Accessibility and Disclaimer Modal ***************************/

#osu_navbar a:focus {
  outline: dashed 2px #333 !important;
}

#site-name h1 a:focus {
  outline: dashed 2px #fff !important;
}

#site-logo a:focus {
  outline: dashed 2px #fff !important;
}

#footer a:focus {
  outline: dashed 2px #fff !important;
}

#content a:focus {
  outline: dashed 2px #333;
}

#content img:focus {
  outline: dashed 2px #333;
}

#accessibility-text {
  float: left;
  margin-top: 20px;
  border-top: 1px solid #ddd;
}

#simplemodal-overlay {
  background-color: #000;
}

#simplemodal-container {
  max-width: 700px;
  top: 25% !important;
}

#simplemodal-container #accessibility-text {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0,0,0, 0.3);
  margin: -60px 20px 20px 20px;
  line-height: 22px;
}

#simplemodal-container #accessibility-text p {
  margin-bottom: 15px;
}


/** tables ***/

table {
  /*border: 1px solid #ccc;*/
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: auto;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
    table-layout: fixed;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td:before {

    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }


}
.medLabel {
  font-weight: bold;
}

.medContent {
  padding-left: .5em;
  padding-right: 2em;
}

.displayfield{
  padding-top:.25em;
  padding-bottom: .25em;
  padding-left: 0.5em;
}

div.section{
  background: #ececec;
  border: darkgray dotted 1px;
  margin-bottom: 1em;
  margin-left:1em;
}

.warn {
  background: #ffb600;
  font-weight: 500;
  font-size: 1.25rem;
  /*display: table-cell;*/
  vertical-align: middle;
  /*padding-left: 1.5em;*/
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}


span.expired {
  background: #b00;
  color:#ececec;
   /*display: table-cell;*/
   vertical-align: middle;
   padding-left: 1.5em;
   padding-right: 1.5em;
 }

.message {
  font-size: 0.8em;
  line-height: 2;
  margin: 1em 2em;
  padding: 0.25em;
}

.message {
  background: #f3f3ff;
  border: 1px solid #b2d1ff;
  color: #000000;
  box-shadow: 0 0 0.25em #b2d1ff;
}

div.message {
  background: #f3f3ff;
  border: 1px solid #b2d1ff;
  color: #000000;
  box-shadow: 0 0 0.25em #b2d1ff;
}

.nep-entitle-button {
  background: #b9b8b8;
  color: #000000;
  margin-bottom: 0.2em;
  width: 80%;
  border: none;
  font-family: 'proximanova', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 1rem;
  padding: 0.5em 0.5em 0.5em 0.5em;
}


div.hide{
  display: none ;
}

div.show{
  display: block;
}

.shade-button:hover {
  background: #333;
  /*border: #c6e9f8 dashed 2px;*/
  color: #ffffff;
  margin-bottom: 1em;
}

.shade-button {
  color: #000000;
  /*background-color: teal;*/
  background-color: #c6e9f8;
  border-radius: 3px;
  /*padding-bottom: 1em;*/
  /*margin: 0.5em;*/
  margin-bottom: 1em;
  border:1px solid black;
  width:8em;
  text-align: center;
  /*float:right;*/
}


div.shade-div {
  font-family: "Georgia", Times, serif;
  border: 1px solid #bb0000;
  color: black;
  /*background-color: #ececec;*/
  background-color: #EEEEEE;
  border-radius: 6px;
  margin-top: 0.5em;
  padding-left: 0.5em;
}

.required-indicator {
  color: #cc0000;
  /*display: inline-block;*/
  font-weight: bold;
  margin-left: 0.3em;
  position: relative;
  top: 0.2em;
}

/* Footer ***************************/

#footer {
  color: #fff;
  background: #222;
}

#footer-container {
  max-width: 950px;
  display: block;
  padding: 0 20px;
  margin: 0 auto;
}

#footer-logo {
  /*float: left;*/
  margin: 1.9em 0 2em 0;
}

#footer-logo a {
  width: 295px;
  height: auto;
  display: block;
}

#footer-logo a:focus {
  outline: dashed 2px #fff; /* Accessibility */
  outline-offset: 1px;
}

#footer-logo img {
  width: 295px;
  height: auto;
}

#footer-content {
  clear: left;
  line-height: 1.5em;
  margin: 1em 0 1em 0;
}

#footer-content p.secondary-signature {
  font-size: 1em;
  font-weight: 600;
}

#footer-content p.contact-info {
  font-size: 0.9em;
}

#footer-content p.help-link {
  font-size: 0.85em;
  line-height: 1.4em;
}

#footer-content a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}

#footer-content a:hover {
  color: #222222;
  text-decoration: none;
  background: white;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

#footer-content a:focus {
  outline: dashed 2px white; /* Accessibility */
  outline-offset: 1px;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
  display: inline-flex;
}

#accessible-statement{
  /*margin: 2em;*/
  color: white;
  text-align: center;
}

#accessible-statement a{
  text-decoration: underline;
  text-align: center;
  color: white;
}

#footer{
  text-align: center;
}


.footer-box {
  display: inline-block;
  line-height: 1.5em;
  margin: 1em 0 3em 3em;
  vertical-align: top;
  text-align: left;
}


.footer-box a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 500;
}

.footer-box a:hover {
  color: #222222;
  text-decoration: none;
  background: white;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

.footer-box a:focus {
  outline: dashed 2px white; /* Accessibility */
  outline-offset: 1px;
}

.social-icon {
  color: #ffffff;
  width: 2em;
  height: 2em;
}

.social-icon a{
  color: #ffffff;
  width: 2em;
  height: 2em;
  text-decoration: none;
}

.social-icon a:hover{
  color: #bb0000;
  background: #FFFFFF;
  width: 2em;
  height: 2em;
  text-decoration: none;
}

.footer-resources{
 display: inline-flex;
}

.footer-link{
  padding: .5em .5em;
}

.maintained-by{
  padding-top: .25em;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}