/* colour palette 
#063940 : top header bar / border all Headings (unless specified elsewhere)
*/

/* Body changed to arial, font size 1.0em and line height 110%*/

@import url("https://use.typekit.net/gyb7cch.css");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");

:root {
  --Block-Graphic-1: #0D0D0D; /*UoB Black*/
  --Block-Graphic-2: #C59A00; /*UoB Gold*/
  --Block-Graphic-3: #DCC266; /*UoB Gold 60% Tint*/
  --Block-Graphic-4: #EEE1B3; /*UoB Gold 30% Tint*/
  --Background-Colour: #F7F7F7; /*UoB White*/
  --Text-Colour: #0D0D0D;
  --Text-Colour-Inverted: #F7F7F7; 
  --Detail-Colour: #006892;
  --Text-Background: #4C4C4C;
}


/*
    Banner
*/

.header-wrapper, .banner-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.banner-wrapper {
    background-color: var(--Block-Graphic-1);
    align-items: center;
}

.text-wrapper {
    width: 840px;
}

.stripe-wrapper {
    display: flex;
    flex-direction: row;
}

.banner-stripe {
    width: 30px;
    background: linear-gradient(to right, var(--Block-Graphic-1), var(--Block-Graphic-2) 4% 52%, var(--Block-Graphic-3) 56%);
}

.banner-logo {
    display: none;
}

td > .banner-wrapper > .banner-logo {
    display: block;
    height: 40px;
    padding: 35px;
}

/*
    Navigation Bar
*/ 

.header-wrapper {
    background-color: var(--Background-Colour);
    position: sticky;
    top: 0px;
    align-items: center;
}

.nav-and-logo {
    display: flex;
    justify-content: space-between;
    width: 840px;
}

.nav-logo {
    height: 50px;
    padding: 35px 45px;
}

.nav-wrapper {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-wrapper > li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-divider {
    background: var(--Block-Graphic-2);
    width: 2px;
    height: 30px;
    border-radius: 2px;
    margin: 0px 10px 0px 10px;
}

.nav-wrapper > li > a, .exit-button {
    padding: 0.6875rem 1.5rem;
    border-radius: 3.75rem;
    text-decoration: none;
    transition: all .2s ease-in;
    font-family: "Manrope", "Arial", sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.225rem;
    background: var(--Background-Colour);
    border: 1px solid var(--Text-Colour);
    color: var(--Text-Colour);
    text-wrap: nowrap;
}

.nav-wrapper > li > a:hover, .exit-button:hover {
    color: var(--Text-Colour) !important;
    background: var(--Block-Graphic-4);
    cursor: pointer;
}

.exit-button {
    white-space: nowrap;
}

/*
    Element Styles
*/

body {
     font-family: Manrope, Arial, sans-serif;
     font-size: 1.0em;
     margin-top: 10px;
     line-height: 110%;
     margin: 0;
     background-color: var(--Background-Colour);
}

h1 {
     font-size: 3.1em;
     font-weight: 400;
     color: var(--Text-Colour-Inverted);
     font-family: larken,Times New Roman,Times,serif;
     padding: 5px 45px;
     line-height: 1em;
}

h2 {
     font-size: 1.3em;
     font-weight: 250;
     color: var(--Text-Colour-Inverted);
     padding: 0em; 
     margin: 0.2em 0em 0em 0em; 
     font-family: larken,Times New Roman,Times,serif;
}

h3 {
     font-size: 1.2em;
     color: var(--Text-Colour);
     padding: 0px; 
     margin: 0px; 
}

h4 {
     font-size: 1.2em;
     color: var(--Text-Colour);
     margin: 10px;
     padding: 0px; 
     margin: 0px; 
}

h5 {
     font-size: 1.1em;
     color: var(--Text-Colour);
     padding: 0px; 
     margin: 0px; 
}

TD  {
    font-size : 0.90em;
    color : var(--Text-Colour);
}

A {	
    font-size : 1.0em;
    color : var(--Detail-Colour);
    transition: all .2s ease-in;
}

A:link {
    text-decoration: none;
    /*border-bottom: 1px dashed #063940;*/
    border-bottom: 1px solid;
}

A:active {
    /*border-bottom: 1px dashed #063940;*/
    border-bottom: 1px solid;
}

A:visited {
    /*border-bottom: 1px dashed #063940;*/
    border-bottom: 1px solid;
}

A:hover {
    /*border-bottom: 1px solid #063940;*/
    background: var(--Block-Graphic-1);
    color: var(--Text-Colour-Inverted);												 
}

input, select    {
   font-size: 0.95em; font-weight: lighter;
   border: 1px solid var(--Text-Colour);
   margin-top:1.5px;
   font-family: Manrope, Arial, sans-serif;
}
input    {
  height: 14px;
  font-family: Manrope, Arial, sans-serif;
}
/* Add #btn to allow buttons to be taller so they can be fully displayed */
select, #btn   {
   height: 20px;
}

td {
    padding: 0px;
}

/*
    Page Styles
*/

.pagetable { 
    width:840px;
     background-color: var(--Background-Colour);
     margin: auto;
     border-spacing: 0.5px;
}

.content {
   background-color: var(--Background-Colour);
}

.FilterPanel {
    vertical-align: top;
}

.FilterTitle {
    font-weight: bold;
    font-size: 1.2em;
    padding-bottom: 10px;
    color: var(--Text-Colour);
    font-family: larken,Times New Roman,Times,serif;
}

.InfoTable {
    width: 100%	
}
.InfoCell {
    width: 500px;	
}

.ErrorMessage {
   font-size: 10em;
   color: Red;
}

.ObjectInputErrorLabel {
    color: Red;
}

/* Main Body Panel*/
.FilterPanel {
    text-align: left;
    width: 100% !important;
    vertical-align: top;
    padding-left: 10px;
    padding-top: 5px;
}

.pFilterPanel {
    width: 100%;
}

.pInfoBox {
    width: 100%;
}

.pButton {
    width: 100%;
}

/*Window Buttons*/

.LinkPanel {
    vertical-align: top;
    font-size: 0.90em;
    overflow: hidden;
    padding: 20px 10px;
}

/*  
    Table Styles
*/
table.whdefault {
    padding:0px;
    border-spacing: 0px;
    margin: 0px 35px 0px 35px;
    border-collapse: collapse; 
}

th.whdefault, td.default {
    border: 0px ;
    padding-bottom: 0px;
 }

table.whProgTab, table.whModTab, table.whDefaultTab  {
   padding:2px ;
   border:1px solid var(--Text-Colour);
   border-collapse: collapse; 
}

table.whDefaultTab { 
   width: 670px;
} 

table.whProgTab {
   width:550px;
}

table.whModTab { 
   width:650px;
} 

td.whTDText, td.whTDTextCent,
td.whTDSpecText,
td.whTDOutcomeText, td.whTDSrchText, td.whTDSrcHead {
   font-size: 0.95em; 
   padding:2px ;
   border: 1px solid var(--Text-Colour);
}

td.whTDTitle, th.whTHProgHead, th.whTHYearHead, th.whTHCampusHead, th.whTHDetHead,
th.whTHModCode,th.whTHModVal, th.whTHSpecHead,
th.whTHModDesc1, th.whTHModDesc2, th.whTHModCode,
th.whTHModVal, th.whTHSpecHead {
   font-size: 0.95em; font-weight: bold;
   padding:2px ;
   border: 1px solid var(--Text-Colour);
   background-color: var(--Block-Graphic-4);
}

.whTHProgOutcome {
    background-color: var(--Block-Graphic-4);
}

td.whTDTextCent { 
   text-align: center;
}

th.whTHCampusHead {
    width: 580px;
    text-align: center;
}

th.whTHProgHead { 
    width: 60%;
    text-align: center;
}
th.whTHYearHead { 
    width: 60px;
}
th.whTHDetHead { 
    width: 150px;
    text-align: left;
}

th.whTHModDesc1 { 
   width: 200px;
   text-align: left;
}

th.whTHModDesc2 { 
   width: 380px;
   text-align: left;
}

th.whTHModCode { 
   width: 70px;
   text-align: center;
}
th.whTHModVal { 
   width: 80px;
   text-align: center;
}

th.whTHSpecHead { 
   width: 230px;
   text-align: left;
   font-weight: bold;
}
td.whTDSpecText { 
   width: 460px;
}
td.whTDOutcomeText { 
   width: 230px; 
   vertical-align:text-top;
}

td.whTDSrchText, td.whTDSrcHead {
   font-size: 0.95em; 
   text-align: left;
   padding: 2px;
   border: 0.8px;
}

td.whTDSrchText { 
  font-weight: lighter;
  width: 120px;
}

td.whTDSrcHead { 
  font-weight: bold;
  width: 90px;
  padding-left:10px;
}

.wbTHSpecHead {
    text-align: center;
}


.Search_button {  
    float: right;
    height: 21px;
    font-size: 1.1em;
    font-weight: lighter;
    color: var(--Text-Colour);
    text-align: center;
    background-color: var(--Background-Colour);
    border-radius: 2em;
    width: 7.0em; 
    margin:0.1em;
    font-family: Manrope, Arial, sans-serif;
    line-height: 0em;
}

.Search_button:hover {
    color: var(--Text-Colour-Inverted);
    background-color: var(--Text-Colour);
    border-color: var(--Text-Colour);
    transition: all .2s ease-in;
    cursor: pointer;
}