html, body {
  height: 100%;
}
body {
  color: #000;
  background-color: #fff;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: .8em;
  margin: 0;
  padding: 0;
}

div#body  {
  position: relative;
  min-height: 100%;
}

img {
  border: none;
  -ms-interpolation-mode: bicubic;
}

div {
/*  -moz-box-sizing: border-box;
  box-sizing: border-box;*/

/*  border: solid 1px red;*/
}

.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.clearLeft {
  clear: left;
}
.clearRight {
  clear: right;
}
.clearBoth,
.cleaner {
  clear: both;
  font-size: .1em;
}
.relative {
  position: relative;
}
.invisible {
  display: none;
}


/** links, forms *************************************************************/

a {
  margin: 0 -1px;
  padding: 0 1px;
}

a:link,
a:visited {
  color: #1599f5;
  text-decoration: underline;
}
a:hover {
  color: #fff;
  text-decoration: none;
  /*border-bottom: dotted 1px #090;*/
  background-color: #1599f5;
}

form {
  margin: 0 0 2em 0;
}

/*input[type=text] {*/
input.text {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

  border: solid 1px #999;
}
button {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}


/** top: logo, menu **********************************************************/


#top {
  /*height: 66px;
  font-size: .25em;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.65em;
  z-index: 20; /* blog h1 = 10, #top = 20, #nav = 30, #logo = 40, #userControls = 50 */

  border-top: solid 6px #1599f5;
  background-color: transparent;

  padding: 0;
  margin: 0 0 10px 0;
}
.loggedin  #top {
  background-color: #eee;
}
.staff  #top {
  border-color: #555;
}

#logo {
  position: absolute;
  top: .8em;
  left: 1.2em;
  z-index: 40; /* blog h1 = 10, #top = 20, #nav = 30, #logo = 40, #userControls = 50 */

  color: #555;
  text-align: center;
  vertical-align: top;
}
#logo  a {
  margin: 0;
  padding: 0;
}
#logo  img {
  vertical-align: top;
}
#logo  i {
  color: #999;
}
#logo  a {
  text-decoration: none;
}
#logo  a:hover {
  background-color: transparent;
  text-decoration: none;
}


#nav {
  position: absolute;
  top: 6px;
  /*left: 28%;
  width: auto;*/
  left: 0;
  width: 100%;
  z-index: 30; /* blog h1 = 10, #top = 20, #nav = 30, #logo = 40, #userControls = 50 */

  color: #999;
  text-align: center;
}

#nav  .dashboard {
  margin: 0 auto 2.3em auto !important;
  width: 34em;
}
#nav  .dashboard  span {
  display: block;
  float: left;
  font-style: normal;

  padding: .55em .4em .2em .4em;
  margin: 0 .3em;
}
#nav  .dashboard  a,
#nav  .dashboard  em {
  display: block;
  float: left;
  font-style: normal;

  background-image: url('../i/dot.eee.gif');
  background-repeat: no-repeat;
  background-position: 0 100%;

  padding: 0;
  margin: 0 .3em;
}
#nav  .dashboard  a  div,
#nav  .dashboard  em  div {
  background-image: url('../i/dot.eee.gif');
  background-repeat: no-repeat;
  background-position: 100% 100%;

  padding: .55em .4em .2em .4em;
  margin: 0;
}

#nav  .dashboard  em {
  color: #fff;
  font-weight: bold;
  background-color: #1599f5;
}

#nav  .dashboard  a  b,
#nav  .dashboard  em  b {
  font-weight: normal;
}

#nav  .dashboard  img {
  display: block;
}

#nav  .dashboard  a.staff {
  color: #555;
}
#nav  .dashboard  a.staff:hover {
  color: #fff;
  background-color: #555;
}
#nav  .dashboard  em.staff {
  background-color: #555;
}


#nav  .sub-dashboard {
  font-size: .9em;
  margin: 0 auto 0 auto !important;
}
#nav  .sub-dashboard  span {
  display: block;
  float: left;
  font-style: normal;

  padding: .55em .4em .16em .4em;
  margin: 0 .3em;
}
#nav  .sub-dashboard  a,
#nav  .sub-dashboard  em {
  display: block;
  float: left;
  font-style: normal;

  background-image: url('../i/dot.fff.gif');
  background-repeat: no-repeat;
  background-position: 0 100%;

  padding: 0;
  margin: 0 .3em;
}
#nav  .sub-dashboard  a  div,
#nav  .sub-dashboard  em  div {
  background-image: url('../i/dot.fff.gif');
  background-repeat: no-repeat;
  background-position: 100% 100%;

  padding: .55em .4em .16em .4em;
  margin: 0;
}

#nav  .sub-dashboard  a:hover {
  color: #666;
  background-color: #eee;
}
#nav  .sub-dashboard  em {
  color: #666;
  font-weight: bold;
  background-color: #eee;
}
#nav  .sub-dashboard  em.light {
  color: #999;
  font-weight: normal;
}


#nav  .context {
  font-size: .9em;
}

/*#nav  a.sub {
  color: #fff;
  font-weight: normal;
  background-color: #777;
  text-decoration: none;
}
#nav  a.sub {
  padding: 0 .3em;
  margin: 0 1px;
}
#nav  a.sub:hover {
  background-color: #1599f5;
}*/


#userControls {
  position: absolute;
  top: .95em;
  right: 1.2em;
  z-index: 50; /* blog h1 = 10, #top = 20, #nav = 30, #logo = 40, #userControls = 50 */

  color: #ccc;
  font-size: .9em;
  width: 24em;
  text-align: right;
  line-height: 2.05em;
}

#userControls  a,
#userControls  span {
  padding: 0 1px;
  margin: 0 .3em;
}
#userControls  a.sub,
#userControls  span {
  color: #444;
  font-weight: bold;
  text-decoration: none;
}
#userControls  a.sub:hover {
  background-color: #1599f5;
}

#userControls  .userpic {
  float: right;
  margin-left: .7em;
  margin-right: .4em;
  width: 50px;
  height: 50px;
}

#userControls  select {
  color: #666;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 1em;
  border: dotted 1px #ccc;
  margin-right: .3em; 
}
#userLoginFrame,
#userSignupFrame {
  visibility: hidden;

  position: absolute;
  top: 5em;
  left: 30%;

  width: 40%;
  height: 17em;

  border: solid 1px #555;
  border-top: solid 6px #555;
}
#userSignupFrame {
  height: 27.5em;
}
#userBackgroundLayer {
  visibility: hidden;

  filter: alpha(opacity=50); /* MSIE */
  opacity: .5; /* Firefox */

  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/** content ******************************************************************/


div#content {
  font-size: 1em;
  padding: 9em 15% 2.5em 15%;
  width: 69.5%;
}
.universe  div#content {
  padding: 9em 5% 2.5em 5%;
  width: 89.5%;
}
.galaxy  div#content {
  padding: 9em 13% 2.5em 13%;
  width: 73.5%;
}
.dashboard  div#content {
  padding: 9em 5% 2.5em 5%;
  width: 89.5%;
}

div#content  #welcome {
  border: solid 1px #e4e4e4;
  background-color: #ccffd8;
  padding: .3em 1.3em;
  margin: 0 0 2em 0;
}

div#content  .column.left {
  float: left;
  width: 48%;

  height: 1%; /* Holly hack */
}

div#content  .column.right {
  float: right;
  width: 48%;

  height: 1%; /* Holly hack */
}

div#content  h1 {
  color: #000;
  font-size: 1.8em;
  font-weight: normal;
  margin: 1em 0 .5em 0;
  /*position: relative;*/
}
div#content  h1.first {
  margin-top: 0;
}
div#content  h1.center {
  text-align: center;
}
div#content  h1  a {
  /*color: #555;
  text-decoration: none;*/
}

div#content  h2 {
  color: #222;
  font-size: 1.5em;
  font-weight: normal;
  margin: 1em 0 .2em 0;
  /*position: relative;*/
}
div#content  h2.first {
  margin-top: 0;
}

div#content  h3 {
  color: #444;
  font-size: 1.2em;
  font-weight: normal;
  margin: 1.5em 0 .5em 0;
  /*position: relative;*/
}
div#content  h3.first {
  margin-top: 0;
}

div#content  form  input.radio {
  vertical-align: middle;
  margin: .1em .1em 0 .3em;
}


div#content  .snippet  a {
  margin: 0;
  padding: 0;
}

div#content  .nobr {
  white-space: nowrap;
}

div#content  hr {
  width: 100%;
  height: 1px;
  border: none;
  border-top: dashed 1px #090;
  margin: 20px 0;
}


/** bottom *******************************************************************/


div#bottom {
  position: absolute;
  bottom: 1px; /* to avoid vertical scrollbar in Opera, use '1px' */
  /*right: 1.6em;*/
  width: 100%;
  margin-bottom: 1.2em;
  clear: both;
 
  background-color: #fff;
  /*border-top: solid 1px #eee;
  border-left: solid 1px #eee;
  border-right: solid 1px #eee;*/
  color: #999;
  font-size: .85em;
  text-align: center;
}

/*
div#bottom  span.div {
  color: #ccc;
  font-size: 1.2em;
  padding: 0 .3em;
}

div#bottom  div.standards {
  float: left;
  text-align: left;
  width: 82%;
}
div#bottom  div.standards  span.div {
  padding: 0 .07em;
}
div#bottom  img {
  vertical-align: middle;
  margin: 0 0 1px 0;
}
*/

div#bottom  div.copyright {
  text-align: center;
  vertical-align: middle;
  margin-right: .3em; /* == #menu links padding  */
  white-space: nowrap;
}