

/*'''''''''''''''''''''''''*\
|   Common element styles   |
\*_________________________*/

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 12px;
}

img { border: 0; }

body {
  background-color: #000;
  background-image: url( '/images/background-main.jpg' );
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
}

a { color: #000; }

h1, h2, h3, h4, h5, h6, th { font-weight: normal; }
h6 { font-size: 1.0em; }
h5 { font-size: 1.1em; margin: 0.1em 0; }
h4 { font-size: 1.2em; margin: 0.2em 0; }
h3 { font-size: 1.4em; margin: 0.3em 0; }
h2 { font-size: 1.8em; margin: 0.3em 0; }
h1 { font-size: 2.6em; text-shadow: 0 1px #000; }

p img { vertical-align: middle; }

/*'''''''''''''''''''''''''''*\
|   Specific element styles   |
\*___________________________*/

br.clear { clear: both; height: 1px; margin-bottom: -1px; }

div.secondary-background {
  z-index: -1;
  position: fixed;
  width: 522px;
  height: 911px;
  left: 50%;
  margin-left: -261px;
  background-image: url( '/images/trek-logo-large.png' );
  background-position: center;
  background-repeat: no-repeat;
}

/*'''''''''''''''''*\
|   Page headings   |
\*_________________*/

div.page-heading {
  height: 27px;
  position: absolute;
  top: 34px;
  right: 42px;
  width: 492px;
}

div.page-heading div.heading-text {
  height: 27px;
  float: right;
  line-height: 28px;
  padding: 0 27px 0 5px;
  background: url( '/images/title-row-end.png' );
  background-repeat: no-repeat;
  background-position: right;
}

div.page-heading div.heading-row {
  height: 27px;
  background: url( '/images/title-row-start.png' );
  background-repeat: no-repeat;
  overflow: auto;
}

/*''''''''*\
|   PAGE   |
\*________*/

div.main {
  width: 873px;
  margin: 0 auto 20px;
  position: relative;
}

/*'''''''''''''''*\
|   MAIN FOOTER   |
\*_______________*/

div.main .footer {
  width: 870px;
  margin: 0 auto;
  text-shadow: 1px 3px 3px #000;
  text-align: center;
  color: #ddd;
}

div.footer-content {
  display: inline-block;
  background-image: url( '/images/grey-pixel.png' );
  padding: 7px;
  border: 1px solid #333;
}

/*'''''''''''''''*\
|   MAIN HEADER   |
\*_______________*/

div.main .header img.sixth-fleet-logo {
  margin-left: 2px;
}

div.main .header {
  position: relative;
  width: 843px;
  height: 100px;
  margin: 0 auto;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-style: italic;
}

div.main .header div.header-tag-line {
  position: absolute;
  bottom: 6px;
  right: 30px;
  font-size: 1.5em;
}

/*''''''''''''''*\
|   PAGE PANEL   |
\*______________*/

div.panel .header img.section-title {
  margin-left: 339px;
  margin-top: 34px;
}

div.panel .header {
  width: 873px;
  height: 92px;
  padding: 0;
  margin: -9px 0 0;
  background-image: url( '/images/background-header.png' );
  background-repeat: no-repeat;
  text-align: left;
  line-height: 1em;
  font-style: normal;
}

div.panel .middle {
  width: 873px;
  background-image: url( '/images/background-repeat.png' );
  background-repeat: repeat-y;
}

div.panel .middle-full-width {
  width: 873px;
  background-image: url( '/images/background-repeat-full-width.png' );
  background-repeat: repeat-y;
  padding-top: 10px;
}

div.panel .middle-full-width-top-border {
  background-image: url( '/images/background-border-full-width.png' );
  width: 873px;
  height: 1px;
}

div.column-fix {
  clear: both;
  height: 15px;
}

/*''''''''''''''*\
|   NAVIGATION   |
\*______________*/

div.navigation.main, div.content {
  float: left;
}

div.navigation.personnel, div.navigation.administration {
  position: absolute;
  top: -53px;
  left: 295px;
}

div.navigation.sub {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 5px;
}

div.navigation.main {
  width: 244px;
  margin-top: 20px;
  padding-left: 43px;
  padding-right: 27px;
}

div.navigation.main ul {
  width: 250px;
}

div.navigation.admin ul {
  width: 500px;
}

div.navigation ul li {
  list-style: none;
  margin: 2px 4px 4px 0;
  float: left;
}

.button a {
  display: block;
  width: 110px;
  height: 30px;
  padding-right: 10px;
  background: url( '/images/button-background-16-percent.png' );
  background-repeat: no-repeat;
  text-align: right;
  line-height: 40px;
}

div.navigation li.button a {
  text-decoration: none;
  color: #fff;
}

div.navigation.admin { padding-left: 1px; }

div.navigation.back ul li { float: right; }

div.navigation.personnel ul li,
div.navigation.admin ul li { margin: 2px 1px 4px 1px; }

div.navigation.user { margin-top: 15px; }

div.navigation.user li.button a { color: #fff; }

a.button { width: 90px; text-decoration: none; }

/*'''''''''''''''''''''''*\
|   Resource navigation   |
\*_______________________*/

ul.dp-navigation.sub, ul.navigation.sub { list-style: none; }
ul.dp-navigation.sub li, ul.navigation.sub li {
  display: inline;
  list-style: none;
  margin: 2px 1px 4px 1px;
  float: left;
}
ul.dp-navigation.sub li.dp-subnode a, ul.navigation.sub li.subnode a {
  text-decoration: none;
  width: 110px;
  height: 30px;
  display: block;
  height: 30px;
  padding-right: 10px;
  background: url( '/images/button-background-16-percent.png' );
  background-repeat: no-repeat;
  text-align: right;
  line-height: 40px;
  border: 0;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}
ul.dp-navigation.breadcrumbs {
  background: url( '/images/white-transparent-33-percent.png' );
  padding: 3px 6px;
  height: 16px;
}
ul.dp-navigation.breadcrumbs li.dp-breadcrumb {
  list-style: none;
  background: url( '/images/raquo.png' ) no-repeat 0 4px;
  float: left;
  color: #fff;
  margin-right: 6px;
  padding-left: 9px;
  text-shadow: 1px 1px 3px #000;
}
ul.dp-navigation.breadcrumbs li.dp-breadcrumb.active {}
ul.dp-navigation.breadcrumbs li.dp-breadcrumb a { color: #fff; text-decoration: none; }
ul.dp-navigation.breadcrumbs li.dp-breadcrumb a:hover { text-decoration: underline; }

/*''''''''''''''''*\
|   PANEL FOOTER   |
\*________________*/

div.panel .footer {
  width: 873px;
  height: 69px;
  padding-top: 13px;
  background-image: url( '/images/background-footer.png' );
  background-repeat: no-repeat;
  color: #fff;
}

div.panel .footer .credits {
  width: 780px;
  margin: 0 auto;
  padding: 4px;
  background: url( '/images/white-transparent-33-percent.png' );
  background-repeat: no-repeat;
  color: #333;
  text-shadow: 1px 1px 1px #ccc, -0px -0px 1px #000;
  border: 1px solid #444;
  text-align: center;
}

div.panel .footer .credits img { vertical-align: top; margin-top: -1px; }

div.panel .footer a { color: #333; text-decoration: underline; }
div.panel .footer a:hover { text-decoration: none; }

/*''''''''''''''''*\
|   CONTENT PANE   |
\*________________*/

div.content {
  position: relative;
  z-index: 99;
  width: 492px;
  margin-left: 25px;
  margin-top: -22px;
}

div.content.full-width {
  width: 873px;
  margin-left: 45px;
  margin-top: 0;
}

div.content p {
  text-indent: 1.2em;
  margin: 0.4em 0;
}

div.content p.action-legend {
  text-indent: 0;
}

/*'''''''''''''''''''''*\
|   CONTENT CONTAINER   |
\*_____________________*/

div.container {
  background: url( '/images/background-container.png' );
  background-repeat: no-repeat;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  width: 470px;
  padding: 7px 10px;
  border: 1px solid #333;
  box-shadow: 0 2px 5px #333;
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  margin: 4px 0 8px;
}

div.container.full-width {
  background: url( '/images/background-container-full-width.png' );
  width: 760px;
}

div.container p { font-weight: normal; }

div.container a { color: #ddd; }

div.container a:hover { color: #bbb; text-decoration: none; }

div.container ol { margin-left: 20px; }

/*'''''''''''''''*\
|   NEWS TICKER   |
\*_______________*/

#listticker{
  position: absolute;
  margin: 15px 0 0 43px;
  height:20px;
  width:800px;
  overflow:hidden;
}

#listticker li {
  display:inline;
  border:0;
  padding:0;
  list-style:none;
  padding-left: 20px;
  background: url( '/images/fnn-spacer.jpg' );
  background-repeat: no-repeat;
  background-position: left;
  height: 10px;
}

#listticker a {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 2px 3px #000;
}

/*'''''''''''''*\
|   STAR DATE   |
\*_____________*/

#datetime {
  width: 238px;
  height: 28px;
  position: absolute;
  margin-top: 54px;
  margin-left: 44px;
  background: url( '/images/datetime-background.png' );
  background-repeat: no-repeat;
  padding-top: 15px;
  padding-left: 6px;
}

#datetime div {
  width: 116px;
  float: left;
  text-align: center;
}

/*'''''''''''''''''''*\
|   SIMULATION ROWS   |
\*___________________*/

div.sim-row {
  position: relative;
  width: 482px;
  height: 40px;
  background: url( '/images/dataset-row-background.png' );
  background-repeat: no-repeat;
  padding: 2px 2px 4px;
  border: 1px solid #333;
  margin-top: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
div.sim-row:hover { background: url( '/images/dataset-row-background-hover.png' ); background-repeat: no-repeat; }
img.sim-icon { float: left; border: 1px solid #333; margin-right: 3px; }
div.command-team {
  float: right;
  width: 190px;
  height: 36px;
  background: url( '/images/black-line-fading-in.png' );
  background-repeat: repeat-y;
  padding: 2px;
  border: 1px solid #333;
  margin-left: 2px;
}
div.command-team div { padding: 0 1px 2px; overflow: hidden; white-space: nowrap; }
div.title-and-info { text-align: center; }
div.sim-title { line-height: 25px; }
div.sim-links a { color: #ccc; text-decoration: none; font-size: 8pt; }
div.sim-links a:hover { text-decoration: underline; }
div.sim-banner {
  text-align: center;
  margin: 0 auto 10px;
  background-color: #000;
  border: 1px solid #333;
}
div.sim-banner a {
  display: table-cell;
  vertical-align: middle;
  width: 490px;
  height: 167px;
}
table.sim-command a { color: #fff; text-decoration: none; }
table.sim-command a:hover { text-decoration: underline; }
table.sim-command {
  width: 100%;
  color: #fff;
  margin-bottom: 10px;
}

/*''''''''''''''''''''*\
|   Section headings   |
\*____________________*/

div.section-heading {
  width: 492px;
  height: 10px;
  margin: 20px 0 12px;
  color: #fff;
}

div.section-heading div.heading-text {
  height: 10px;
  float: left;
  background: url( '/images/section-row-start.png' );
  background-repeat: no-repeat;
  padding: 0 4px 0 92px;
  line-height: 12px;
}

div.section-heading div.heading-row {
  height: 10px;
  background: url( '/images/section-row-end.png' );
  background-repeat: no-repeat;
  background-position: right;
  overflow: auto;
}

/*'''''''''*\
|   FORMS   |
\*_________*/

input[type=text], input[type=password] {
  padding: 0 4px;
}

div.form {
  font-size: 1em;
  padding: 20px 0;
  margin: 0 auto;
}

div.form textarea {
  background: url( '/images/background-container.png' );
  background-repeat: no-repeat;
  width: 210px;
  height: 100px;
  color: #fff;
  font-size: 0.8em;
  border: 1px solid #000;
  padding: 0 4px;
}

div.form textarea.medium {
  width: 300px;
}

div.form select {
  color: white;
  background-color: #333;
}

div.form select option {
  background-color: #555;
}

div.form input[type=text], div.form input[type=password] {
  border: 0;
  width: 212px;
  height: 20px;
  background: url( '/images/text-input.png' );
  background-repeat: no-repeat;
  color: #fff;
  padding-top: 4px;
}

div.form input[type=file] {
  height: 24px;
}

div.form input.short {
  width: 42px;
  background: url( '/images/text-input-short.png' );
}

div.form table { width: 100%; }

div.form table.medium { width: 338px; margin-left: 56px; }

div.form th { width: 50%; }
/*div.form th, div.form td { width: 50%; }*/

div.form th {
  text-align: right;
  font-weight: normal;
  padding-right: 10px;
  padding-top: 6px;
  vertical-align: top;
}

div.form td { padding-top: 5px; }

div.form td.form-submit { padding-top: 10px; }

div.form ul { list-style: none; color: red; }

div.form ul.checkbox_list, div.form ul.radio_list { color: #fff; }

div.upload-field { position: relative; }

input.upload-overlay {
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 220px;
  text-align: right;
}

input.upload-style {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: url( '/images/text-input.png' );
  background-repeat: no-repeat;
  border: 0;
  width: 212px;
  height: 24px;
  padding: 4px 4px 0;
  display: none;
}

div.sixth-fleet-banner {
  padding: 10px 0;
}

div.sixth-fleet-banner textarea {
  width: 470px;
}

input.button:hover,
a.logout:hover,
a.button:hover,
.button a:hover,
.button.active a,
ul.dp-navigation.sub li.dp-subnode a:hover,
ul.navigation.sub li.subnode a:hover {
  background: url( '/images/button-background-33-percent-coloured.png' )
}

input.button:hover,
a.logout:hover,
a.button:hover,
.button a:hover,
.button.active a {
  background-repeat: no-repeat;
}

/*''''''''''''*\
|   DATASETS   |
\*____________*/

table.datasets {
  width: 470px;
  margin: 10px 0;
}

table.datasets.full-width {
  width: 760px;
  margin: 10px 0;
}

table.datasets th, table.datasets td {
  text-align: center;
  padding: 3px 0 0;
}

table.datasets td {
  border: 1px solid #222;
  vertical-align: top;
}

table.datasets tbody th, table.datasets tbody td {
  background: url( '/images/dataset-row-background.png' );
  background-repeat: no-repeat;
}

table.datasets tbody td.text {
  background: url( '/images/background-container.png' );
  text-align: left;
  padding: 10px;
}

th.action-column { width: 50px; }

div.dataset {
  position: relative;
  width: 480px;
  height: 44px;
  background: url( '/images/dataset-row-background.png' );
  background-repeat: no-repeat;
  padding: 1px 5px 3px;
  border: 1px solid #333;
  margin-top: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
div.dataset:hover { background: url( '/images/dataset-row-background-hover.png' ); background-repeat: no-repeat; }
div.dataset-type-separator { width: 492px; height: 10px; margin-bottom: 12px; }

/*''''''''''''''*\
|   LOGIN FORM   |
\*______________*/

div.database-access {
  position: relative;
  width: 244px;
  height: 244px;
  margin-top: 20px;
  background-image: url( '/images/background-login.png' );
  background-repeat: no-repeat;
}

div.security-clearance {
  position: absolute;
  bottom: 0px;
  left: 52px;
  width: 141px;
  height: 10px;
}

div.clearance-required { background: url( '/images/label-clearance-required.png' ); background-repeat: no-repeat; }
div.clearance-accepted { background: url( '/images/label-clearance-accepted.png' ); background-repeat: no-repeat; }
div.error-password { background: url( '/images/label-error-password.png' ); background-repeat: no-repeat; }
div.error-username { background: url( '/images/label-error-username.png' ); background-repeat: no-repeat; }

div.login-form {
  position: absolute;
  width: 150px;
  top: 110px;
  left: 47px;
}

div.login-form input { color: #fff; }

label.identification {
  display: block;
  width: 66px;
  height: 10px;
  text-indent: -9999px;
  background: url( '/images/label-identification.png' );
  background-repeat: no-repeat;
  margin-left: 1px;
}

label.authorisation {
  display: block;
  width: 93px;
  height: 10px;
  text-indent: -9999px;
  background: url( '/images/label-authorisation.png' );
  background-repeat: no-repeat;
  margin-left: 1px;
}

input.button { width: 120px; }

a.button { width: 110px; }

input.button, a.button {
  display: block;
  height: 30px;
  padding-right: 10px;
  background: url( '/images/button-background-16-percent.png' );
  background-repeat: no-repeat;
  text-align: right;
  line-height: 40px;
  margin: 0 auto;
  border: 0;
  cursor: pointer;
  color: #fff;
}

a.logout {
  width: 110px;
  position: absolute;
  bottom: 18px;
  left: 62px;
  color: #fff;
  text-decoration: none;
}

input.identification, input.authorisation {
  width: 142px;
  height: 20px;
  margin: 3px 0 6px;
  background: url( '/images/text-input-small.png' );
  background-repeat: no-repeat;
  border: 0;
  padding-top: 4px;
}

/*a.logout:hover {
  background: url( '/images/button-background-33-percent-coloured.png' );
  background-repeat: no-repeat;
}*/

div.login-form input.button, div.login-form a.button { color: #fff; }

div.active-credentials {
  position: absolute;
  width: 150px;
  top: 114px;
  left: 47px;
  text-align: center;
  color: #fff;
  font-size: 1em;
}

div.label-credentials {
  display: block;
  width: 90px;
  height: 10px;
  margin: 0 auto 6px;
  text-indent: -9999px;
  background: url( '/images/label-credentials.png' );
  background-repeat: no-repeat;
}

/*'''''''''*\
|   Stuff   |
\*_________*/

#btn-toggle-sim-form { cursor: pointer; }

#new-sim-form { overflow: hidden; }

div.system-message.success {
  color: green;
}

div.system-message.error {
  color: red;
}

span.position-available {
  display: block;
  height: 18px;
  font-style: italic;
  color: green;
}

div.positions {
  background: url( '/images/black-line-fading.png' );
  background-repeat: repeat-y;
  border: 1px solid #333;
  padding: 2px 4px;
}

#dp-editor {
  background: url( '/images/white-transparent-75-percent.png' );
  background-repeat: repeat-y;
}

.ct-rank {
  width: 55px;
  height: 16px;
  float: right;
  vertical-align: middle;
}

a.join-prompt {
  display: block;
  height: 103px;
  width: 194px;
  background-image: url( '/images/background-join-prompt.png' );
  background-repeat: no-repeat;
  margin: 0 auto 10px;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  font-family: sans-serif;
  text-decoration: none;
  text-shadow: 0 -1px #fff;
}

#btn-join-prompt {
  color: #573;
}

div.positions a, div.command-team a { color: #fff; text-decoration: none; }
div.positions a:hover, div.command-team a:hover { text-decoration: underline; }

.js-button {
  cursor: pointer;
}

/*'''''''''''''''''''''''*\
|   QueueBert Overrides   |
\*_______________________*/

div.qb-container * {
  text-shadow: none;
}

