/* Science Horizons main CSS formatting
 * "New Horizon"
 *
 * 
 * Suggested property order:
 * 
 * display, float
 * position, top, right, bottom, left
 * width, height, overflow
 * margin, padding
 * color
 * background (color, image, repeat, attachment, position)
 * border (width, style, color), border-width, border-collapse
 * text-align, text-indent, white-space, text-decoration
 * font (style, variant, weight, size, height, family)
 * 
 */
  
  
/*** HIDE TEXTUAL NAVIGATION ELEMENTS ***/
  
  .hidden {
    position: absolute; right: 1000em;
    width: 0; height: 0; overflow: hidden;
    margin: 0; padding: 0;
  }
  
  
/*** CLEAN SLATE ***/
  
  img {
    vertical-align: bottom;
    border: none;
  }
  
  
/*** DOCUMENT ***/
  
  body {
    margin: 0; padding: 0;
    color: black;
    background: #8eadcc url("images/background.png") top repeat-x;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #frame {
    position: relative;
    width: 920px;
    margin: 0 auto; padding: 0;
    background: white url("images/background-page.png") left repeat-y;
    text-align: left;
  }
  
  abbr {
    text-decoration: none;
    border: none;
  }
  
  abbr:hover {
    text-decoration: underline;
  }
  
  
/*** MAIN CONTENT ***/
  
  #page {
    position: relative;
    margin: 0; padding: 0 82px;
  }
  
  #page .run {
    margin-left: -72px;
    margin-right: -72px;
  }
  
  #page h1, h2, h3, h4, h5, h6, h7 {
    color: black;
    margin: 1em 0 0 0;
    padding: 0;
  }
  
  #page h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a {
    color: black !important;
  }
  
  #page h1, h2, h3 {
    font-size: large;
  }
  
  #page h4, h5, h6, h7 {
    font-size: medium;
  }
  
  #page h1, h2 {
    color: red;
  }
  
  #page p {
    margin: 0 0 1em 0;
    padding: 0;
    color: #444;
    text-align: justify;
  }
  
  #page p.center {
    text-align: center;
  }
  
  #page ul {
    margin-top: 0;
    margin-bottom: 1em;
    color: #444;
  }
  
  #page ul li {
    margin-bottom: 0.5em;
  }
  
  #page a {
    color: #444;
  }
  
  #page a:hover {
    color: black;
  }
  
  #page clear {
    clear: both;
  }
  
  
/*** MAIN CONTENT (LEGACY) ***/
  
  #page.small {
    padding: 0 160px;
  }
  
  #page.legacy ul.page-links {
    clear: both;
    display: block;
    margin: 0 0 1em 0; padding: 0;
    list-style: none;
    text-align: right;
  }
  
  #page.legacy .page-links li {
    margin: 0; padding: 0;
  }
  
  #page.legacy .page-links li.left {
    float: left;
  }
  
  #page.legacy .page-links li a {
    color: #ff7d1b;
    text-decoration: none;
    font-weight: bold;
  }
  
  #page.legacy .page-links li a:hover {
    color: black;
  }
  
  
/*** HEADER ***/
  
  #header {
    position: relative;
    margin: 0 0 -320px 0; padding: 0 0 320px 0;
    background: url("images/background-center.png") top left no-repeat;
    font-size: small;
  }
  
  
/*** TITLE ***/
  
  #header h1 {
    position: relative;
    margin: 0 0 14px 0; padding: 0;
    width: 550px; height: 90px; overflow: hidden;
    background: url("images/title.png") top left no-repeat;
  }
  
  #header h1 a {
    display: block;
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    font-size: xx-small;
    text-decoration: none;
    text-indent: -1000em;
  }
  
  
/** SIDE PANEL ***/
  
  .right-panel {
    float: right;
    width: 300px;
    margin: 0 -72px 0 0;
    padding: 0;
    color: #475766;
    background: #8eadcc url("images/background-panel.png") top left repeat-y;
    color: #475766;
    text-shadow: 0px 1px #bccee0;
  }
  
  * html .right-panel {
    margin-right: -36px;
  }
  
  .right-panel h3 {
    position: relative;
    margin: 0 10px 0.25em 10px;
    padding: 0 0 0.25em 0;
    color: white;
    border: 0px solid #bccee0;
    border-bottom-width: 1px;
    font-size: 100%;
    text-shadow: 0px 1px #475766;
  }
  
  .right-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .right-panel li {
    display: block;
    margin: 0 !important;
    padding: 0;
  }
  
  .right-panel li a {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.3em 10px;
    text-decoration: none;
    font-size: 85%;
  }
  
  .right-panel li a:hover {
    color: black;
    background: #bccee0 url("images/background-panel-hover.png");
  }
  
  
/** MAIN MENU **/
  
  #nav ul {
    display: block;
    position: absolute; top: 64px; left: 80px;
    height: 40px;
    margin: 0; padding: 0;
    white-space: nowrap;
    list-style: none;
  }
  
  #nav ul li {
    display: inline;
    margin: 0; padding: 0;
  }
  
  #nav ul li a {
    display: -moz-inline-box; /* Moz: no inline-block */
    -moz-box-align: center;   /* Moz: inline-box won't vertically align contents */
    display: inline-block;
    height: 40px;
    margin: 0; padding: 0 7px;
    color: #475766;
    background-color: white;
    text-decoration: none;
    text-shadow: 0px 1px white;
  }
  
  #nav ul li.first a {
    padding-left: 12px;
    background-position: left 0px;
    background-image: url("images/tab-first.png");
    background-repeat: no-repeat;
  }
  
  #nav ul li.middle a {
    background-position: left 0px;
    background-image: url("images/tab-middle.png");
    background-repeat: repeat-x;
  }
  
  #nav ul li.last a {
    padding-right: 12px;
    background-position: right 0px;
    background-image: url("images/tab-last.png");
    background-repeat: no-repeat;
  }
  
  #nav ul li.first a:hover,
  #nav ul li.middle a:hover {
    background-position: left -60px;
  }
  
  #nav ul li.last a:hover {
    background-position: right -60px;
  }
  
  #nav ul li.first a.selected,
  #nav ul li.middle a.selected {
    color: white;
    text-shadow: 0px 1px 3px black;
    background-position: left -120px !important;
    background-color: #8eadcc;
  }
  
  #nav ul li.last a.selected {
    color: white;
    text-shadow: 0px 1px 3px black;
    background-position: right -120px !important;
    background-color: #8eadcc;
  }
  
  #nav ul li a span {
    display: -moz-inline-box; /* Moz: no inline-block */
    display: inline-block;
    width: 0; height: 40px;
    vertical-align: middle;
  }
  
  
/*** SUBMENU ***/
  
  #subnav {
    position: relative;
    margin: 0 10px 0 10px; padding: 0;
    background: url("images/submenu.png") bottom repeat-x;
    font-size: 90%;
    min-height: 38px;
  }
  
  #subnav h2 {
    display: inline;
    margin: 0; padding: 0;
    font-size: 90%;
  }
  
  #subnav h2 a {
    display: -moz-inline-box; /* Moz: no inline-block */
    display: inline-block;
    width: 1px; height: 38px; overflow: hidden; /* Moz: 1px width fixes shift on click */
    margin: 0; padding: 0 0 0 1px; /* Moz: 1px padding fixes shift on click */
    text-indent: 1px; /* Moz: so text doesn't show in that one pixel*/
    white-space: nowrap;
    vertical-align: middle;
  }
  
  #subnav ul {
    display: inline;
    margin: 0; padding: 0;
    line-height: 20px;
    list-style: none;
  }
  
  #subnav ul li {
    display: inline;
    margin: 0 0 0 1em; padding: 0;
  }
  
  #subnav ul li a {
    color: #888;
    text-decoration: none;
    text-shadow: 0px 1px white;
  }
  
  #subnav ul li a:hover {
    color: #555;
  }
  
  #subnav ul li a.selected {
    color: black;
    text-shadow: 0px 1px 3px #999;
    border: 0px solid #ff7d1b;
    border-bottom-width: 1px;
  }
  
  
/*** FOOTER ***/
  
  #footer {
    position: relative;
    margin: 0; padding: 24px 0 100px 0;
    font-size: small;
    text-align: center;
    color: #475766;
    background: #8eadcc url("images/footer.png") top left no-repeat;
    clear: both;
  }
  
  #footer p {
    margin: 0; padding: 0;
  }