/****** NAV ******/

.nav-path-cell {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
    color: #ffffff;
}
.nav-path-cell a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}
.nav-path-cell a:hover {
    color: #698D9F;
}
.nav-path-cell a:active {
    color: #FFFFFF;
}
.nav-path-cell a:visited {
    color: #FFFFFF;
}

/* Tabbed Page
   All of the below classes refer to the student tabs, these were created so that we could add the react email tab component directly into the existing markup and keep the outer content styles in tact.
   If adding anything new please state what page it was added for.
*/

/* place on an empty like so for proper spacing.
  <uc1:Nav id="nav_header" runat="server"  ...etc />
  <div class="tab-wrapper-table-spacer"></div> <-- here
  <table class="tab-wrapper-table" cellspacing="0" cellpadding="0">

  Use this instead of the image spacer on components where the nav and table have a 
  larger than normal vertical space that is gray, its cause by react integration on some pages.
*/
.tab-wrapper-table-spacer {
  height: 12px;
  width: 100%;
  background-color: #ffffff;
}

/* outer wrapper of all content.*/
.tab-wrapper-table {
    background-color: #FFFFFF;
    width: 100%;
    border: 0 none;
}

.tab-wrapper-table > tbody > tr > td {
    line-height: normal;
}

/* Tabs nav wrapper */
.compass-tabs-table {
  background-color: inherit;
  line-height: normal;
}

.compass-tabs-table table,
.compass-tabs-table td,
.compass-tabs-table tr,
.compass-tabs-table a {
    line-height: normal;
}

/* left side of tabs, odd naming but it was old... */
.admin-tab-right a {
    text-decoration: underline;
    line-height: normal;
}


/* wrapper of content under tabs table. */
.tab-content-table {
  border-collapse: initial;
  border-spacing: initial;
  width: 100%;
  height: 100%;
}

.tab-content-table td.tab-content-left,
.tab-content-table td.tab-content-right {
    padding:12px;
}

/* Left side of tabbed page */
.tab-content-table td.tab-content-left {
  width: 30%;
  vertical-align: top;
  border-right: 1px solid #D5D291;
  min-width: 300px; /* now with the info section general in react, we need a min width to prevent the left side from being smashed super small, and also the horizontal page jump on load */
}

.tab-content-table td.tab-content-left table {
    border-collapse: separate;
}

.tab-content-table td.tab-content-left table + table {
    border-spacing: 4px;
}

.tab-content-table td.tab-content-left table table {
    border-spacing: 2px;
}

.tab-content-table td.tab-content-left .student-table table {
   border-spacing: 0;
}

.tab-content-table td.tab-content-left a {
    text-decoration: underline;
}

.tab-content-table #info_student_info_div_scores table table td {
   padding: 2px;
}

/* Right */
.tab-content-table td.tab-content-right {
    width: 70%;
    vertical-align: top;
    max-width: 1px; /* force td to be restricted to window width, needed for react content that was pushing table widths out past the 70% mark.*/
}