/*
 * style sheet for Pragmatic App
 *
 * reset stuff... */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td
  {margin:0; padding:0; border:0; outline:0; vertical-align: baseline;
        font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit;}
  :focus {outline:0;}
  body {/*line-height:1;*/ color:white; background:#999999;}
  ol, ul {list-style:none outside none;}
  /* tables still need 'cellspacing="0"' in the markup */
  table {border-collapse:separate; border-spacing:0;}
  caption, th, td {text-align:left; vertical-align:top; font-weight:normal;}
  blockquote:before, blockquote:after, q:before, q:after {content:"";}
  blockquote, q {quotes:"" "";}

  /* site structure... */
  html {
    width:100%;
    height:100%;
    }
  body {
    text-align:center;
    font:small arial, tahoma, sans-serif;
    }
  #center {
    width:1008px;
    margin:0 auto;
    }
  #site {
    float:left;
    clear:left;
    width:100%;
    padding-bottom:24px;
    }
  #page {
    float:left;
    clear:left;
    width:100%;
    margin:12px 0 0 0;
    padding-bottom:3px;
    }

  /* transitions */
  * {
    transition:color 0.3s, background-color 0.3s, border-color 0.3s;
    }

  /* panels */
  .panel {
    float:left;
    clear:left;
    padding:6px;              /* looks nice with a table inside */
    width:996px;
    border-radius:12px;
    min-height:24px;
    }
  .panel .liner {
    padding:0 12px 6px 12px;  /* extra panel padding makes forms look nicer! */
    }
  .panel.panel-sm {
    width:676px;
    margin:0 160px;
    }
  .main {
    min-height:200px;
    }
  .scroll-h-cntnr {
    margin:-3px -3px -3px -3px;
    width:calc(100% + 6px);
    overflow-x:auto;    /* wide elements scroll instread of overflow */
    overflow-y:hidden;
    }

  /* banner - a special case of .panel */
  #banner {
    text-align:left;
    position:relative;
    margin:3px 0 0 0;
    padding:6px;
    min-height:100px;
    max-height:100px;
    overflow:hidden;  /* don't let logo hog space! */
    }
  #logo {
    float:right;
    margin:0 12px 0 0;
    padding:0;
    max-height:100px;
    }

  /* navigation... */
  .nav li {
    display:block;
    float:left;
    margin:0 2px 0 0;
    padding:0;
    }
  .nav li a {
    display:block;
    text-decoration:none;
    font-size:1.1em;
    padding:6px 12px;
    border:solid 1px #ddd;
    border-radius:7px;
    }
  .nav li a:hover,
  .nav li a:focus {
    }
  /** this next should be in a skin file... */
  a:focus {
    box-shadow: 0 0 4px 2px #aedaff;
    }
  /* nav menu top or bottom */
  .nav.navtop {
    position:absolute;
    top:0;
    padding:0;
    margin:0;
    }
  .nav.navtop li a {
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0;
    }
  .nav.navbtm {
    position:absolute;
    bottom:0;
    padding:0;
    margin:0;
    }
  .nav.navbtm li a {
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    }
  /* main nav at top left of banner */
  #navmain {
    margin-left:6px;
    }
  /* user nav at bottom left of banner */
  #navuser {
    margin-left:6px;
    }
  /* server performance light */
  #svrperf {
    position:absolute;
    left:15px;
    top:50%;
    transform: translateY(-50%);
    padding:6px;
    border-radius:6px;
    border:solid 1px #999;
    }
  #svrperf span {
    position:absolute;
    left:18px;
    bottom:-1px;
    white-space:nowrap;
    }
  /* banner announcement - eg. a/c days left */
  #announce {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    padding:3px 6px 5px 6px;
    border-radius:4px;
    border:solid 1px #999;
    }

  /* tabs...*/
  .tabs {
    float:left;
    clear:left;
    margin:0 0 0 9px;
    font-size:1.1em;
    }
  .tabs.tabs-sm {
    margin-left:169px;
    }
  .tabs li {
    float:left;
    margin:0 2px 0 0;
    border-bottom:solid 1px #e0e1e2;
    }
  .tabs li.open {
    border-bottom:solid 1px #fff;
    }
  .tabs li a,
  .tabs li p {
    display:block;
    padding:8px 24px;
    margin:0;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    }
  .tabs li a {
    text-decoration:none;
    }

  /* dashboard page sections... */
  /*#summary  {float:left; width:240px; padding:0 12px 0 0; clear:left;}
  #main     {float:left; width:742px; padding:0 0 0 12px;} */

  /* text styles... */
  h1, h2, h3, h4 {
    float:left;
    clear:left;
    font-weight:bold;
    }
  h1 {
    font-size:2.0em;
    margin:12px 0 24px;
    width:100%;
    text-align:center;
    }
  h2 {
    font-size:1.4em;
    margin:18px 0 3px;
    }
  h3 {
    font-size:1.2em;
    margin:12px 0 0;
    text-align:left;
    }
  h4 {
    font-size:1.1em;
    font-style:italic;
    margin:12px 0 0;
    }
  p {
    float:left;
    clear:left;
    margin:6px 0 0 0;
    }
  a {
    }
  a:hover {
    }

  /* special content */
  .normal {
    font:small arial, tahoma, sans-serif;
    font-weight:normal;
    font-style:normal;
    }
  /* center a paragraph within its container */
  p.center {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
    text-align:center;
    }
  a.standout,
  span.standout {
    font-weight:bold;
    font-style:italic;
    text-decoration:underline;
    }

  /* show message page... */
  .msgpanel {
    width:512px;
    padding:24px;
    margin:24px 212px;
    font-size:1.2em;
    text-align:center;
    }
  .msgpanel p {
    width:100%;
    text-align:center;
    }
  .msgpanel p:last-child {
    margin-top:24px;        /* the OK button */
    }

  /* installation stuff... */
  .panel.setup {
    padding-bottom:12px;
    }
  .setup h4 {
    float:none;
    width:50%;
    margin:12px auto 0 auto;
    text-align:left;
    }
  .setup p {
    float:none;
    width:50%;
    margin:6px auto 0 auto;
    text-align:left;
    }
  .setup p.standout {
    width:50%;
    margin:24px auto;
    text-align:center;
    }

  /* version and processing time... */
  p#version
      {position:fixed; left:3px; bottom:3px; font-size:0.85em; text-align:left;}
  p#proctime
      {position:fixed; right:3px; bottom:3px; font-size:0.85em; text-align:right;}