body {
      background-color: #01004C;
      font-family: Sans-Serif;
      padding:0px;
      margin:0px;
      width: 100%;
    }
    
    body.tablebody {      
      display: table;
    }

    body.popup {
      background-color: #FFFFFF;
    }
    
    h1.powrhead, h2.powrhead {    
      background-color: #01004C;
      color: #EEEEEE;
    }
    
    h1.powrhead {    
      background-image: url('powrhead.png');
      background-position:  98% 45%;
      background-repeat: no-repeat;
      height: 80px;
      margin: 5px 0px 10px 0px;
      padding: 15px 0px 10px 20px;
      line-height: 2.5em;
    }

    h2.powrhead {    
      padding: 10px 15px;
      margin-top: 0em;
    }
    
    div#powrcontent {      
      margin:0px 0px 0px 0px;
      padding:5px 10px;
      background-color: #FFFFFF;      
    }
    
    .vertical {
      transform:rotate(270deg);
    }
    
    .clearfloat {
      clear: both;  
    }
    
    div.sidebar {
      float: right;
    }
    
    div.sidecol, div.sidebar {
      width: 300px;            
    }

    div#powrretrieve {
      width: 920px;      
    }
    
    div.sidecol {
      float: right;
    }
    
    div.buttonmenu a, div.buttonline a.button {
      border: 1px solid #000000;
      background-color: #DDDDDD;
    }
    
    div.buttonmenu a {
      display: block;
      padding:10px;
      margin: 5px;        
      text-decoration: none;
    }

    div.sidebar div.buttonmenu a {
      text-align: center;
      background-color: #CCDDEE;
      color: #0000FF;
      font-weight: bold;
    }
    
    div.rightragged {
      text-align: right;
    }
    
    div.rightfloat {
      float: right;
    }
    
    div.buttonline a.button {
      display: inline-block;
      padding:0.5em;
      margin: 0.5em;          
      text-decoration: none;
    }
    
    div.buttonmenu a:hover, div.buttonline a.button:hover {
      background-color: #AAAAAA;
      color: #FFFFFF;
    }

    img.ajaxloader {      
      display: block;
      margin: auto;
      padding: 0.5em;
    }
    
    div.colorbox {
      background-color: #FFFFDD;  
      padding: 0.1em 0.5em;
    }
    
    div.sidebar div.colorbox {
      font-size:smaller;      
    }

    div.sidebar div.colorbox h4 {
      font-size:larger;
      margin-left: 0.4em;
    }
    
    div.sidebar ul.reflist {      
      padding-left:0.5em;
      list-style-type: none;
      font-style: italic;
    }

    div.sidebar ul.reflist ul {      
      padding:0.25em 0.5em 1.0em 2.0em;
      list-style-type: square;
      font-style: normal;
    }
        
    div#powrfooter {
      background-color: #01004C;
      line-height:1.5em;
      padding: 10px 20px;
      font-size:small;
      color: #BBBBBB;
    }
    
    div#powrfooter a {
      color: #EEEEEE;
    }

    div#powrfooter .devinfo {
      font-size: smaller;
    }
    
    #warnjspop {      
      padding:1em 2em 1em 1em;
      background-color: #F44336;
      color: #FFFFDD;
      margin-bottom:1em;
      font-size: smaller;
      display: inline-block;
    }

    #warnjspop.jstrue {      
      background-color: #FF8800;
    }
      
    span.closebtn {
      margin-left:1em;
      float: right;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 2em;
      position: relative;
      top: -0.1em;
      right: -0.75em;
      line-height: 0.25em;
      display: none;
    }

    #warnjspop.jstrue span.closebtn {      
      display: inline;
    }
    
    span.closebtn:hover {
      color: black;
    }
    
    ul.datalist {
      padding-left:1.5em;      
    }

    ul.datalist li {
      padding:0.3em 0.2em;  
    }        
    
    form.powrform input, form.powrform select {
      font-size:medium;
      font-weight: bold;
    }

    form.powrform input {
      padding:0.5em;      
    }

    form.powrform select {
      padding:0.3em;      
    }

    form.powrform select option {
      font-weight:normal;
      padding: 0.2em;
    }

    form.powrform select optgroup {
      padding: 0.2em;
      margin:0.1em;
    }

    form.powrform select optgroup option {
      padding-left: 0.5em;
    }
    
    table.gridtable {
      border: 1px solid; 
      background-color:#DDDDDD;
    }

    table.gridtable th {
      vertical-align: top;
    }
    
    table.gridtable td {
      text-align: center;
      padding: 2px 4px;
    }

    table.gridtable td:first-child {
      text-align: left;
    }

    table.gridtable tr td.hsep, table.gridtable tr th.hsep {
      width:20px;
    }
    
    table tr.zsephead {
      background-color: #AAAAAA;
    }
    
    table tr.zsephead th {
      font-weight: normal;
    }
    
    form#backtoovform {
      display: inline-block;
    }

    div#gridselectioninfo {
      display: inline-block;
      background-color: #CCDDEE;
      margin-left: 1em;
      padding:0.6em 0.6em 0.4em 0.6em;
      vertical-align: middle;
      font-size: 1.0em;
    }

    div#gridselectioninfo h3 {
      float: left;
      margin: 0em;
      padding-right: 0.3em;
      font-size: 1em;
    }

    form#gridmodelselectform {
      margin-top: 1em;
    }
    
    table.modelgridselect tr td.modcell {      
      /* background-color: #AAAAAA; */
      background-color: #FFFFFF;
      text-align: center;
    }
    
    table.modelgridselect tr td.modcell .moddot {
      font-size:2rem; 
      line-height:1rem;
      color: #CCCCCC;
      display: inline-block;
    }

    table.modelgridselect tr td.modcell a {      
      display: block;
      padding:0.2em 0.6em 0.2em 0.6em;
      background-color: #EEEEEE;
      color: #01004C;
      text-decoration:none;
      font-size: 0.6em;
      line-height:0.9em;
    }

    table.modelgridselect tr td.modcell a.wrmod .moddot {
      padding-top:0.3em;
    }
    
    table.modelgridselect tr td.modcell a .moddot {
      color: #00AA00;
    }
   
    table.modelgridselect tr td.xaxis {      
      border-top:3px solid #000000;
    }

    table.modelgridselect tr td.yaxis {      
      border-right:3px solid #000000;
    }
    
    table.modelgridselect tr td.modcell a.selected {      
      background-color: #FFEE11; 
    }

    table.modelgridselect tr.labrow td {      
      text-align:center;
    }

    table.modelgridselect tr.labrow td, table.modelgridselect tr td.labcell {      
      font-weight: bold;
    }

    div#modinfoboxwrapper {
      width: 800px;
      margin: 1em 0em;
    }
    
    div#griddlnote {
      width: 780px;
      padding: 10px;
      margin-top: 1em;
      font-size:0.9em;
    }
    
    #idmodinfobuttonline {      
      display: none;
    }
        
    span.mdot:before {
      content: "d"
    }

    span.mdot:after {
      content: "/dt"
    }
    
    /* Modern browsers can write Mdot instead */
    @supports(position: relative) {      
      span.mdot:before {
        content: "\00B7";
        position: relative;
        top:-0.6em;
        left:0.6em;
      }      
      
      span.mdot {        
        margin-left: -0.3em;
      }
      
      span.mdot:after {      
        content:"";
      }
    }
    
    span.tstar:after, span.rstar:after {
      content: "*";
      position: relative;
      top: 0.55em;
      left:-0.1em;
    }

    span.rsun:after, span.lsun:after, span.msun:after, span.sol:after {
      content: "\2609";
      position: relative;
      top: 0.4em;
      left:-0.1em;
      font-size:smaller;
    }
    
    span.vinf:after, span.infty:after {
      content: "\221E";
      position: relative;
      top: 0.4em;
      left:-0.1em;
    }
    
    img.equation {
      height: 3em;      
    }
    
    div.togglebody, div.subblock {      
      display: none;
      opacity: 0;
      transition: opacity 1s ease-out;
    }

    div.togglebody.visible, div.subblock.visible {      
      display: block;
      opacity: 1;
    }
    
    div.togglewrapper {      
      background-color: #CCCCCC;
    }

    div.togglewrapper div.togglebody {      
      background-color: #DDDDDD;
    }
    
    div.togglehead, div.togglebody {
      padding:0.25em 0.5em; 
    }
    
    div.togglehead .switch {      
      float:right;
      display: block;
      color: #777777;
    }

    div.togglehead .switch:before {      
      font-size: 0.7em;
      content: "click to expand ";
    }

    div.togglehead .switch.expanded:before {      
      content: "click to shrink ";
    }
    
    div.infotext, div.infoblock {
      background-color: #FFFFDD;
    }    
    
    div.infoblock {
      font-size:smaller;  
    }

    div.citenote {      
      margin: 0.5em;
      text-align: center;
      font-size: 1.1em;
    }
    
    div.togglebody div.infoblock {
      margin: -0.25em -0.5em;       
      padding: 0.25em  0.5em; 
    }

    pre {      
      font-family: monospace, monospace;
      font-size: small;
    }
    
    fieldset {
      padding-bottom:0.4em;            
    }
    
    fieldset legend {
      font-weight: bold;  
    }
    
    div#modselectioninfo {
      background-color: #CCDDEE;
      margin-top: 0em;
      padding:0.2em 0.6em;
    }

    div#modselectioninfo h4 {
      margin:0.2em 0em 0.5em 0em;
    }
    
    div#modselectioninfo table.paramtable {
      width: 100%;
    }

    div#modselectioninfo table.paramtable td.param {
      padding-left:0.5em;
    }

    div#modselectioninfo table.paramtable td.value {
      text-align: center;
      font-style:italic;
    }

    div#modselectioninfo table.paramtable tr.morecol td {
      text-align: center;
      font-size: smaller;
    }
    
    div#modselectioninfo table.paramtable tr.important td.value {
      font-weight: bold;
    }

    div#modselectioninfo table.paramtable tbody.extended {
      display: none;
    }

    div#modselectioninfo table.paramtable tbody.extended.visible {
      display: table-row-group;
    }
    
    div#modselectioninfo form#changemodform input[type="submit"] {
      float:right;
    }
        
    div#gridchangeinfo, div#modlinkinfo, div#gridlinkinfo {
      background-color: #CCDDEE;
      margin-top: 0.8em;
      font-size: smaller;
    }        

    div#gridchangeinfo {
      padding:0.2em 0.6em;      
    }      
      
    div#gridchangeinfo form.powrform {
      width:100%;
      padding: 0.5em 0em;
    }

    div#gridchangeinfo form.powrform select {
      width:70%; 
    }

    div#gridchangeinfo form.powrform select, div#gridchangeinfo form.powrform input[type="submit"] {
      font-size: 1.0em;
    }

    div#modlinkinfo {
      padding:0.6em;      
    }    
    
    div#gridlinkinfo {      
      width: 780px;
      padding: 0.2em 10px 0.3em 10px;
    }
    
    div#modlinkinfo div#idmodlink, div#gridlinkinfo div#idgridlink {
      font-size:small;
      margin-top:0.1em;
      padding: 0.4em;
      text-align: center;
      background-color: #AABBCC;
    }

    div#bulkdlinfo {
      background-color: #CCCCCC;
      margin-top: 0.8em;
      font-size: 0.9em;
      padding:0.1em;
    }

    div#bulkdlinfo #bulkdlhead {
      padding: 0.2em 0.4em;      
    }
    
    div#bulkdlinfo button {
      padding:0.5em;      
      display: block;
      margin: auto;      
      font-weight: bold;
      font-size: 1.1em;
    }

    div#bulkdlinfo div.infoblock {
       padding: 0.5em;
    }

    div#bulkdlinfo div.infoblock .warning {
       color: #FF0000;
    }
    
    form#spectypeform {
      background-color: #CCCCCC;
    }

    form#spectypeform div.subblock {
      background-color: #DDDDDD;
    }

    div.spectypeoption {
      padding:0.1rem 0.1rem;
    }

    div.spectypeoption input[type=radio], div.spectypeoption label {
      cursor: pointer;
    }

    div.spectypeoption input[type=radio] {
      height: 1.5rem;
      position: relative;
      top:0.3rem;
      margin-left:0.6rem;
    }

    div.spectypeoption > label {
      display: inline-block;
      height: 1.5rem;
    }

    div.spectypeoption div.infoblock, div.spectypeoption div.subblock {
      margin-left:2rem;
    }
    
    div.spectypeoption div.infoblock {     
      padding: 0.2em 0.2em 0.2em 0.4em;
    }
    
    div.spectypeoption fieldset#waverangeset {
      margin: 0.0em 0.4rem 0.0em 0.4em;
      border: 1px solid;
    }

    div.spectypeoption fieldset#waverangeset legend {
      padding-top:0.2em;
    }
    
    div.spectypeoption fieldset#waverangeset input[type="text"] {
      width: 20%;
      text-align:right;
    }

    div.spectypeoption fieldset#waverangeset div#limitline {
      margin-top:0.2em;
      padding:0.3em 0.4rem 0.3em 0.4rem;
    }

    div.spectypeoption fieldset#waverangeset div#limitline span.limitulab {
      display: inline-block;
      width: 2em;
    }
    
    div#pvordl {
      padding: 0.3em 0.4rem 0.4em 0.4rem;
    }

    div#pvordl fieldset {
      width: 45%;
      display: inline-block;
      border: 1px solid;
      margin: 0em;
    }

    div#pvordl fieldset:last-child {
      float:right;
    }    
    
    div#pvordl fieldset input[type="submit"], div#pvordl fieldset input[type="button"] {
      float: right;
      margin-top: 0.5em;
    }

    div#griddlwrapper {
      padding:1em;
      display: none;
    }

    div#griddlcaption {
      font-size: 0.9em;
    }

    div#griddlcaption #griddlproglabel {
      display: inline-block;
      float: right;
    }
    
    div#gridprogress {   
      position: relative;
      width: 100%;
      height: 2rem;
      background-color: #DDDDDD;
    }
    
    div#gridprogress div#gridprogressbar {
      position: absolute;
      width: 1%;
      height: 100%;
      background-color: #01004C;
    }    
    
    p.fulltext {
      max-width: 50em;            
      font-size: smaller;
    }
    
    span.inlinenote {
      font-size: smaller;      
    }
    
    div#paramdetailinfowrapper, div#obparamdetailinfowrapper { 
      max-width: 700px;
    }
    
    div#colorsboxwrapper, div#stratboxwrapper, form#spectypeform { 
      max-width: 600px;
    }
    
    /** ion tables **/

    span.rednote {
        color: red;
    }

    table.ionmetatable {
        border: 0px;
    }

    table.ionmetatable tr td {
        vertical-align: top;
    }

    table.iontable {
        border-collapse: separate;
        border-spacing: 2px 2px;
        border:1px solid black;
        border-style: outset;
    }

    table.iontable tr td {
       padding:2px;
       border:1px solid;
       border-style: inset;
       height:28px;
       vertical-align: middle;
    }

    table.iontable tr td.ionsubtable {
        padding:0px;
    }

    table.iontable tr td.ionsubtable table {
        width:100%;
        border-collapse:collapse;
        border:0px;
        margin:-1px;
    }

    table.iontable tr td.ionsubtable table tr td {
        border-collapse:collapse;
        border:0px;
        border-left:1px solid black;
        padding:2px;
        margin:0px;
    }

    table.iontable tr td.ionsubtable table tr td:first-child {
        border-left:0px;
        width:50%;
    }

    div#ionmetabox div.iontabbox {
       width: 200px;
       float: left;
       margin-right: 2em;
    }

    div#ionmetabox table.iontable {
       width: 100%;
       border: none;
       table-layout: fixed;
    }

    div#ionmetabox table.iontable th:first-child, div#ionmetabox table.iontable td:first-child {
       width: 35%;
    }       
    
    div#ionmetabox table.iontable th {
       background-color: #AAAAAA;
       border: none;
       padding: 0.3em 0.2em;
    }

    div#ionmetabox table.iontable td {
       background-color: #DDDDDD;
       border: none;
       text-align: center;
    }
 
    div#ionmetabox table.iontable td.ionname {
       text-align: left;
       padding-left: 0.5em; 
       background-color: #CCCCCC;
    }
    
    div#ionmetabox::after {
       content: ' ';
       display: block;
       clear: both;
    }

    div#paramdetailscontent dl, div#obparamdetailscontent dl {
        display: grid;
        grid-template-columns: 0px auto;
        grid-gap:10px;
    }

    div#paramdetailscontent p, div#obparamdetailscontent p {
        margin-left: 50px;
    }