/**
 * Styles for the Faculty of Computer Science internal pages - 2023
 * Common CSS
 */

@font-face {
   font-family: questrial;
   src: url(/fcswebresources/font/questrial.woff);
}

body {
	margin: 0;
	padding: 0;
	font: 76%/170% questrial, sans-serif;
	color: #322e2a;
	font-size:16px;
	/** background: url("/fcswebresources/img/fcs/itc-background.jpg") center top no-repeat #fff; */
}

/**
 * Colour Codes for Sections and Dark mode
 */

.system_color {background-color:#595959;}
.ugrad_color {background-color:#9f1115;}
.grad_color {background-color:#9f1115;}
.staff_color {background-color:#9f1115;}
.form_color {background-color:#595959;}

@media (prefers-color-scheme: dark) {
    .system_color {background-color:#575757;}
    .ugrad_color {background-color:#981d1a;}
    .grad_color {background-color:#981d1a;}
    .staff_color {background-color:#981d1a;}
    .form_color {background-color:#575757;}
}

/**
 * End Colour Codes
 */

h1 {
	font-size:36px;
	font-weight:normal;
	line-height:38px;
        margin:0 0 20px 0;
        padding:0;
}

h2 {
	font-size:24px;
	font-weight:normal;
	line-height:26px;
        margin:0 0 20px 0;
        padding:0;
}

h3 {
	font-size:22px;
	line-height:24px;
	margin:0;
	margin:0 0 10px 0;
}


h3 a, h3 a:hover, h3 a:visited, h3 a:active, h3 a:link {
	color:#9f1115;
}

a {
	text-decoration:none;
        color:#981d1a;
}

pre {
	padding:10px;
	background:#e7e7e7;
	white-space: pre-wrap;
}

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

#header{
}

#header a {
        color:#322e2a;
}

#header_login {
	float:right;
	text-align: right;
	padding:15px 15px 0px 0px;
	font-size:14px;
	line-height:16px;
}

#header_icon {
	position:relative;
	z-index:20;
	float:left;
}

#header_text {
	padding:15px 0 15px 140px;border-bottom:5px solid #000;
}

.header_text_level1 {
        font-size:36px;
        font-weight:normal;
        line-height:38px;
        margin:0;
        padding:0;
}

.header_text_level2 {
        font-size:24px;
        font-weight:normal;
        line-height:26px;
        margin:0;
        padding:0;
}

#content{
	padding:15px 30px 30px 30px;
	border-bottom:solid 5px #000;
	z-index:0;
	position:relative;
}


/**
 * CSS for Blocked sections
 */

.block_outer_container {
	margin:0 auto;
	/* max-width:900px; */
}

#block_inner_container {
        display:inline-block;
}

#block_inner_container a {
        color:#322e2a;
}

.block_container {
	height:100px;
	width:250px;
	border:solid 3px #000;
	text-align:center;
	display:inline-block;
	margin:15px 15px;
	float:left;
	border-radius: 7px;
}

.block_container a {
	display:block;
	height:100px;
}

.block_title_container {
	border-bottom:solid 1px #000;
	height:25px;
}

.block_title_icon {
	width:25px;
	height:25px;
	line-height:24px;
	font-size:24px;
	font-weight:bold;
	background-color:#000;
	float:left;
	color:#fff;
}

.block_title_text {
	height:25px;
	font-align:center;
	font-size:20px;
	color:#fff;
        border-radius: 3px 3px 0 0;
}

.block_text {
	line-height:18px;
	padding:5px;
}

.noborder {
	width:256px;
	height:106px;
	border:none;
}

.center_control {
	width:0;
	neight:0;
}

/*
 * Block Control Ends
 */


#secmenu2 {
	background-color:#981d1a;
        border:1px solid #070707;
        height:25px;
        padding: 3px 20px 5px 20px;
        font-size:20px;
        color:#fff;
        font-family:questrial;
        margin:25px auto 0 auto;
        width:425px;
        height:25px;
        line-height:25px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

#secloginpadding{
	/*min-height:550px;*/
}

#seclogin{
        min-height:200px;
        padding:20px 20px 20px 20px;
        margin:0 auto 40px auto;
/*	-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
        -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);*/
	width:425px;
        border-left:1px solid #070707;
        border-right:1px solid #070707;
        border-bottom:1px solid #070707;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
}

#seclogin .fcssectextinput input{
	width:425px;
	margin:0 0 15px 0;
}

#seclogin input{
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border: 1px solid #aaa;
	padding: 6px;
}

#seclogin .fcssectextlogin{
	float:right;
	padding: 10px 0 0 0;
}

#seclogin .fcssectextlogin input{
	color:#fff;
	background:#9f1115;
	padding:10px;
	font-size:16px;
}

.floatright {
	float:right;
}

.whitelinks a, .whitelinks a:hover, .whitelinks a:visited, .whitelinks a:active, .whitelinks a:link {
	color:#fff;
}

.linksrightmargin a {
	margin-right:20px;
}

#secfooter{
	position: absolute;
	bottom: 0;
	width: 100%;
	height:100px;
	background:#000;
	display:block;
}

#secfooter .secfooterwrapper{
	margin:0 auto 0 auto;
	width: 1140px;
	color: #fff;
	line-height:100px;
}

#contact_container {
	text-align:center;
	margin:30px auto 0 auto;
	max-width:900px;
}

#contact_center_container {
	display:inline-block;
}

#contact_container a {
	text-decoration:none;
	color:#ac2027;
}

.contact_block {
	float:left;
	text-align:left;
	line-height:20px;
	padding:20px;
}

#footer {
	text-align:center;
	margin:15px auto 0 auto;
	max-width:900px;
}

#footer_container {
	display:inline-block;
}

5#footer_container a {
	text-decoration:none;
	color:#ac2027;
}

.footer_block {
	float:left;
	text-align:left;
	line-height:20px;
	padding:20px;
}


/**
 * Menu CSS
 */

#menu {
    position:relative;
    background-color:#000;
    height:42px;
    z-index:10;
}

#menu a, #submenu a {
    color:#fff;
}

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  background-color: #000;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFF;
  height: 10px;
  padding: 1em;
}

.sub-top-nav {
  align-items: center;
  justify-content: right;
  background-color: #9f1115;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFF;
  height: 10px;
  padding: 1em;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sub-menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: -7px;
  padding: 0;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

.sub-menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle, #sub-menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#sub-menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#sub-menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

#sub-menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 620px) {
  .menu-button-container {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 0;
    margin-top: 42px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .sub-menu {
    position:relative;
    top:0;
    z-index:15;
    margin-top: 15px;
    flex-direction: column;
    width: 348px;
    justify-content: center;
    align-items: center;
    margin:5px 0 0 0;
  }

  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #sub-menu-toggle ~ .sub-menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #sub-menu-toggle:checked ~ .sub-menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu > li {
    /*display: flex;*/
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #222;
  }

  .sub-menu > li {
    /*display: flex;*/
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #9f1115;
  }

  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }

  .sub-menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }

  .menu li a, .sub-menu li a {
      display:block;
      width:100%;
      text-align:center;
      line-height:40px;
  }
}

#menu ul li {background-color:000;}

/**
 * Menu CSS Ends
 */

/*
 * General Table CSS
 */

table.sortmodules tr:nth-child(odd), table.contenttable tr:nth-child(odd), table.datatable tr:nth-child(odd) {}
table.sortmodules tr:nth-child(even),table.contenttable tr:nth-child(even), table.datatable tr:nth-child(even) {background-color: #d7d7d7;}
table.sortmodules th, table.contenttable th, table.datatable th {padding:5px;text-align:left;background-color:#b0b0b0;vertical-align: middle;color:#000;line-height:25px;}table.contenttable td,table.datatable td {padding:5px;line-height:25px;border: 1px solid #e3dee2;}
table.sortmodules th, table.contenttable th, table.datatable th {border: 1px solid #e3dee2;}
table.sortmodules td {padding:5px 3px;}
table.sortmodules td.title {padding:4px; font-family: Arial; font-size:80%; font-weight:bold; color:#ffffff; border-color:#ffffff; background-color:#9e1c20}
table.sortmodules td.changed {padding:4px; font-family: Arial; font-size:80%;font-weight:bold; color:#000000; border-color:#ffffff; background-color:#2ff3df}
table.sortmodules td.total {padding:4px; font-family: Arial; font-size:80%; font-weight:bold; color:#000000; border-color:#ffffff; background-color:#C0C0C0}
table.sortmodules td.divider {padding:4px; font-family: Arial; font-size:80%; font-weight:bold; color:#000000; border-color:#ffffff; background-color:#D8D6C0}
table.sortmodules td.accept {padding:4px; font-family: Arial; font-size:80%; font-weight:bold; color:#000000; border-color:#ffffff; background-color:#00FF00}
table.sortmodules td.pending {padding:4px; font-family: Arial; font-size:80%; font-weight:bold; color:#000000; border-color:#ffffff; background-color:#FFFF00}
table a {color:#981d1a;}

/* Content Table Modifications */

/*
 * End General Table CSS
 */


/*
 * Login Info CSS
 */

.user_info {
    font-size:14px;
    line-height:16px;
    text-align:right;
}

/*
 * End Login Info CSS
 */

/**
 * Buttons...
 */

/** Show / Hide password trickery **/
table.sortmodules tr:nth-child(odd) .redacted {
	color:#bf5053;
	background-color:#bf5053;
}

table.sortmodules tr:nth-child(odd) .redacted:hover {
        background-color:white;
	color:black;
}

table.sortmodules tr:nth-child(even) .redacted {
	color:#981d1a;
	background-color:#981d1a;
}

table.sortmodules tr:nth-child(even) .redacted:hover {
        background-color:#d7d7d7;
        color:black;
}

#passwddisplaytoggle {
	display: none;
}

#passwddisplaytoggle + label {
        background-image: url('/fcswebresources/img/view.png');
	display:block;
        width:21px;
        height:21px;
	float:right;
	margin:0 150px 0 0;
}

#passwddisplaytoggle:checked + label {
	background-image: url('/fcswebresources/img/hide.png');
	background-size: cover;
	width:21px;
	height:21px;
	border:none;
	display:block;
}

#passwddisplay
{
	
}

/**
 * Padding on the cells of the TA form table.
**/

table.taformtable td
{
	padding:5px;
}


/*****~~~~~*****/


/**
 * Form control CSS, imported from UNB.
 */

/* === Global Forms ==== */
	input[type="search"] {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-appearance: textfield;}
	input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}

/**
 * Table control CSS, imported from UNB.
 */
 
/* ==== Tables ==== */
	table {margin: 0.5em 0 1.5em 0;}
	table caption {}
	table img {border: none;background: none !important;}
	table th, table td {}
	table.st-head-row {}
	table.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
	table.st-key { width: 49%; text-align: right; padding-right: 1%; }
	table.st-val { width: 49%; padding-left: 1%; }
	table {border-collapse: collapse;}
	table img {border: none; background: none !important;}
	table caption {color: #666}
	table.stacktable td {border:1px solid #eaeaea;}
/* == Standard table == */
	table.stndrd th, table.stndrd td {border: 1px solid #e3dee2;}
/* == contenttable == */
	table.contenttable,table.datatable {margin-top: 8px;}
	table.contenttable th, table.contenttable td {border: 1px solid #e3dee2; padding: 0.5em 1em;}
	table.contenttable td,table.datatable td,table.plain td {padding: 8px;line-height: 1.8em;vertical-align: top;}
/* == Alternate Rows ==
	Replaced by a blanket CSS that covers all table types.

	table.contenttable tr:nth-child(odd) {background-color:#fff; }
	table.contenttable tr:nth-child(even) {background-color: #fff4ce;}
*/
/* == datatable == */
	table.datatable th,table.datatable td {padding: 0.5em 1em;}
/* == plaintable == */
	table.plain th {font-weight: bold;}
/* == sortable tables == */
    thead th.header {cursor: pointer;background-image: url(/fcswebresources/img/fcs/tablesort/bg-dark.png);background-position: right center;background-repeat: no-repeat;padding-right: 1.2em;}
    thead th.header.headerSortDown {background-image: url(/fcswebresources/img/fcs/tablesort/desc-dark.png);}
    thead th.header.headerSortUp {background-image: url(/fcswebresources/img/fcs/tablesort/asc-dark.png);}
    thead.light th.header {background-image: url(/fcswebresources/img/fcs/tablesort/bg-light.png);}
    thead.light th.header.headerSortDown {background-image: url(/fcswebresources/img/fcs/tablesort/desc-light.png);}
    thead.light th.header.headerSortUp {background-image: url(/fcswebresources/img/fcs/tablesort/asc-light.png);}
/* == undergrad table == */
	table.ugradcal { border-collapse:collapse;}
	table.ugradcal th, table.ugradcal td  {border: 1px solid #e3dee2;} 
	table.ugradcal th {background-color: #eaeaea;font-weight: bold;}
/* = Alternate Rows == */
	table.ugradcal tr:nth-child(odd) {background-color:#fff; }
	table.ugradcal tr:nth-child(even) {background-color: #fff4ce; }
/* Pricing Table */	
	table.pricing {width: 95%;box-shadow: 6px 6px 10px #e1e1e1;}
	table.pricing td {border: 1px solid #ccc; padding: 8px;}
	table.pricing tr:nth-child(even) {background: #fdf7df;}
	table.pricing tr:nth-child(odd) {background: #FFF;}
	table.pricing tr.total { background:#f03b44; color: #fff;}
	table.pricing tr.subtotal { background:#f6898f; color: #fff;}