body  {
  /* account for differing browser defaults */
  border: 0;   margin: 0;   padding: 0; 
  height: 100%;  max-height: 100%;
  overflow: hidden;

  /* default font and size */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 76%;
 
  /* light-gray background */
  background: #707070;
}

/* fixups for internet explorer */

* html body {
  padding:121px 0 46px 0; 
}

* html #pagebody {
  height:100%; 
  width:100%; 
}

/* header canvas. full width and with grey-ish blue background.
   fixed position. will add scrollbar, if shrunk too much.  */
#header {
  position: absolute;
  top: 0px;  left: 0px; border: 0px;
  width: 100%; 
  min-width: 65em;
  text-align: left;
  height: 120px;
  overflow: auto;
  padding: 0px;
  background: url(images/header-gradient.png) left repeat-x;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px;
  border-style: solid;
  border-color: #000000;
}

/* header anchors for navigation. we use only CSS to make them
   look like buttons. a small LED like background image is the
   indicator for the current page. hope this is portable... */
#header a { 
  font-size: 18px; font-weight: bold; font-variant: small-caps;
  line-height: 40px; text-decoration: none;
  color: #ffffff;
  background-color: #000060;
  padding-top: 2px;  padding-bottom: 2px; padding-right: 4px; padding-left: 12px;
  margin-top: 0px; margin-left: 2px;
  outline-style: none;
  /* this creates a metalwire-like ridge around the buttons. */
  border-color: #aaa;  border-width: 3px;  border-style: ridge;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

#header a:hover { 
  background-color: #202090;
}

/* specialty classes for active/inactive buttons */
a.navbar-active { 
  background: url(images/green-led-on-icon.png) no-repeat left; 
}
a.navbar-inactive { 
  background: url(images/green-led-off-icon.png) no-repeat left;
}

/* style and positioning of the ICMS logo in the header */
img.icmslogo { 
  float: right; 
  padding: 4px;  margin:  4px; 
  margin-top: 6px;
  margin-right: 10px;
  background: #ffffff; 
  border-color: #000000;
  border-width: 3px;
  border-style: solid;
  -webkit-border-radius: 10px; 
  -moz-border-radius:    10px; 
}

/* embed title text/image into a bilayer */
div.titlebackground { 
  background: url(images/bilayer-nowater-background.png) repeat-x left;
}

img.titleimage { 
  padding: 4px;  margin:  4px; 
  margin-top: 6px;
  margin-right: 10px;
  background: #000060; 
  border-color: #a0a0a0;
  border-width: 3px;
  border-style: ridge;
  -webkit-border-radius: 10px; 
  -moz-border-radius:    10px; 
}

#footer {
  font-size: 50%;
  text-align: center;
  position: absolute;
  width: 100%;
  min-width: 130em;
  bottom: 0px;
  border-style: solid;
  border-top: 1px;
  border-bottom: 0px;
  border-right: 0px;
  border-left: 0px;
  border-color: #000000;
  height: 45px;
  overflow: auto;
  padding:0;
  background:#7090d0; 
}


img.cstlogo { 
  float: left; 
  padding: 2px;
  margin-top: 2px;
  margin-left: 2px;
  background: #ffffff; 
  border-color: #000000;
  border-width: 2px;
  border-style: solid;
  -webkit-border-radius: 8px; 
  -moz-border-radius:    8px; 
}

img.validhtml { 
  float: right; 
  padding: 2px;
  margin-top: 2px;
  margin-left: 2px;
  border-style: none;
}

h1 { 
  text-align: center; 
}

/* basic style for the body of the page */
#pagebody {
 position: fixed;
 width: 100%;
 min-width: 65em;
/*
 padding-left: 1em;
 padding-right: 1em;
 padding-bottom: 1em;
*/
 border-style: solid;
 border-width: 0px;
 border-color: black;
 top: 122px;
 bottom:46px;
 overflow:auto; 
 background:#ffffff;
}

#pagebody p { 
  text-indent: 1em;
}

.twocol1 { 
  width: 48%;
  margin-left: 1%;
  float: left;
  text-align: justify;
}

.twocol2 { 
  width: 48%;
  margin-right: 1%;
  float: right;
  text-align: justify;
}
.ui-tabs .ui-tabs-panel { display: block; 
  padding: 0.0em 0.4em; 
}


.twocol1 ul {
  margin-top: -1.5em;
  padding-left: 2em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-style: solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background: none; 
  background-color: #e0e0e0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}

.twocol2 ul {
  margin-top: -1.5em;
  padding-left: 2em;
  padding-right: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-style: solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background: none; 
  background-color: #e0e0e0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}

.threecol1 { 
  width: 22em;
  margin-left: 1em;
  float: left;
  text-align: justify;
}

.threecol2 { 
  width: 22em;
  margin-left: 1em;
  float: left;
  text-align: justify;
}

.threecol3 { 
  margin-left: 1em;
  float: left;
  text-align: justify;
}

/* classes for image positioning */
.toleft  { 
  float: left; 
  margin-right: 5px;
}
.toright { 
  float: right; 
  margin-left: 5px;
}

/* for content background */
.content { 
  background-color: #e0e0e0;
}

.textblock {
  border-style: solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background: none; 
  background-color: #e0e0e0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}

.textblock p {
  padding-left: 1em;
  padding-right: 1em;
}

/* this class should be placed on a div or break element 
   and should be the final element before the close of a 
   container that should fully contain a float */
.clearfloat { 
  clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}

/* for headline rendering */
.headline { 
  font-variant: small-caps;
  font-weight: bold;
  padding: 4px;
  color: #ffffff;
  background-color: #000060;
  zoom: 1  ; 
  border-style: ridge;
  border-color:#a0a0a0;
  border-width: 3px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

ul.news { 
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-top: -1.0em;
  padding: 0.5em;
  padding-left: 3em;
  list-style-image: url(images/right_arrow.png);
}

/* Layout helpers ----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } 
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* for accordion rendering */
.ui-accordion .ui-accordion-header { 
  font-variant: small-caps;
  font-weight: bold;
  padding: 4px;
  color: #ffffff;
  cursor: pointer; 
  position: relative; 
  margin: 0px; 
  zoom: 1  ; 
  border-style: ridge;
  border-color:#a0a0a0;
  border-width: 3px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.ui-accordion h3.ui-state-default  { 
  padding-left: 15px;
  background: url(images/green-led-off-icon.png) no-repeat left;
  background-color: #000060;
}

.ui-accordion h3.ui-state-active  { 
  padding-left: 15px;
  background: url(images/green-led-on-icon.png) no-repeat left;
  background-color: #000060;
}

.ui-accordion h3.ui-accordion-header:hover  { 
  background-color: #202090;
}

.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }

.ui-accordion .ui-accordion-content { 
  padding: 0.5em 0.5em; 
  border-top: 0; 
  background: none; 
  background-color: #e0e0e0;
  position: relative; 
  top: 1px; 
  margin-bottom: 2px; 
  overflow: auto; 
  display: none; 
  zoom: 1;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
.ui-accordion .ui-accordion-content-active { display: block; }

.ui-accordion h4 {
  text-decoration: underline;
  margin-left: 1em;
  padding-top: 0;
}

.ui-accordion .ui-accordion-content img { 
  border-color: #e0e0e0;
  border-width: 1;
}

.ui-accordion .ui-accordion-content img:hover { 
  border-color: #000000;
}

/* for tabs rendering */
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .4em 0.8em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-hide { display: none !important; }


.ui-tabs .ui-tabs-panel { display: block; 
  padding: 0.0em 0.4em; 
  border-style: solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background: none; 
  background-color: #e0e0e0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}

.ui-tabs .ui-tabs-nav li {
  margin: 1px;
  margin-right: 0px;
  font-variant: small-caps;
  font-weight: bold;
  color: #ffffff;
  /* this creates a metalwire-like ridge around the buttons. */
  border-color: #aaa;  border-width: 3px;  border-style: ridge;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background: url(images/green-led-off-icon.png) no-repeat left;
  padding-left: 5px;
  background-color: #000060;
}

.ui-tabs .ui-tabs-nav a {
  color: #ffffff;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }

#tabs p { text-indent: 0; }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected  {
  background: url(images/green-led-on-icon.png) no-repeat left; 
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 0px;
  background-color: #000060;
  border-bottom: 0;
}

.ui-tabs .ui-tabs-nav a {
  border-style: none;
  outline-style: none;
}

.ui-tabs .ui-tabs-nav li:hover {
  background-color: #202090;
}

li.publist { 
  margin-bottom: 0.5em;
}

#cse-search-box { 
  margin-top: 0.5em;
}