@charset "utf-8";

/*
file         screen.css
license      (c) 2010 Stephan Boeni, Basel - all rights reserved.

version history:
3.0.0-0  26.01.2010  sb  initial release
*/

/** GLOBAL DEFAULTS **/
* {
  margin:                0;
  border:                0;
  padding:               0;
}
body {
  overflow:              hidden;
  background-color:      #000000;
  color:                 #889988;
  font-family:           Verdana, sans-serif;
  font-size:             12px;
}
h1 {
  margin-bottom:         12px;
  color:                 #776644;
  font-weight:           normal;
  font-size:             24px;
}
h2 {
  margin-bottom:         10px;
  color:                 #776644;
  font-weight:           normal;
  font-size:             18px;
}
h3 {
  margin-bottom:         8px;
  font-weight:           bold;
  font-size:             12px;
}
p {
  margin-bottom:         8px;
}
hr {
  border-bottom:         1px dotted #889988;
  margin-bottom:         4px;
}
.link, .next, .prev {
  padding-left:          10px;
  background-image:      url(../images/arrow.png);
  background-repeat:     no-repeat;
  cursor:                pointer;
}
.link {
  margin-bottom:         20px;
  border-right:          1px solid #889988;
  border-bottom:         1px solid #889988;
  padding-left:          15px;
  color:                 #c7b459;
  font-weight:           bold;
}
.prev {
  background-image:      url(../images/prev.png);
}
.link:hover, .next:hover, .prev:hover, .close:hover {
  background-position:   0 100%;
}
.link:hover {
  border-right:          1px solid #bbbbbb;
  border-bottom:         1px solid #bbbbbb;
  color:                 #bbbbbb;
}
.close {
  float:                 right;
  width:                 10px;
  height:                16px;
  background-image:      url(../images/close.png);
  background-repeat:     no-repeat;
  cursor:                pointer;
}
.indicator {
  margin:                20px;
}

/** FORM **/
input, textarea {
  width:                 160px;
  padding:               1px;
  background-color:      #bbbbbb;
  color:                 #111111;
  font-family:           Verdana, sans-serif;
  font-size:             12px;
}
input[type=submit], input[type=reset] {
  height:                22px;
  width:                 162px;
  padding-bottom:        4px;
  background-color:      transparent;
  background-image:      url(../images/button.png);
  background-position:   top;
  color:                 #c7b459;
  cursor:                pointer;
  font-weight:           bold;
}
input[type=submit]:hover, input[type=reset]:hover {
  background-position:   bottom;
  color:                 #bbbbbb;
}
textarea {
  width:                 320px;
  height:                80px;
}
.key {
  display:               inline-block;
  width:                 160px;
  padding-right:         8px;
  text-align:            right;
  vertical-align:        top;
}

/** HEADER (MENU BAR) **/
.header {
  position:              absolute;
  z-index:               10;
  height:                45px;
  width:                 90%;
}
.headerLeft {
  float:                 right;
  height:                45px;
  width:                 5%;
  margin-right:          85%;
  background-image:      url(../images/headerBg.png);
}
.headerContent {
  float:                 right;
  height:                45px;
  width:                 80%;
  margin:                -45px 5% 0 0;
  background-image:      url(../images/headerContentBg.png);
}
.headerContentItem {
  float:                 left;
  height:                32px;
  min-width:             2px;
  background-image:      url(../images/separator.png);
  background-repeat:     repeat-y;
  cursor:                pointer;
  font-weight:           bold;
}
.headerContentItem span {
  display:               block;
  margin-left:           2px;
  padding:               8px 10px 8px 8px;
  color:                 #111111;
}
.headerContentItem span:hover {
  background-color:      #555544;
  color:                 #bbbbbb;
}
.headerContentItem span.active {
  color:                 #889988;
}
.headerContentInfo {
  float:                 right;
  padding:               8px;
}
.headerRight {
  float:                 right;
  height:                45px;
  width:                 5%;
  margin-top:            -45px;
  background-image:      url(../images/headerBg.png);
  background-position:   100% 0;
}
.headerLogin {
  position:              absolute;
  display:               none;
  height:                200px;
  width:                 280px;
  padding:               8px 20px 14px 22px;
  background-image:      url(../images/loginBg.png);
}
.headerLoginTitle {
  border-bottom:         1px solid #889988;
  padding-bottom:        25px;
  font-weight:           bold;
}
.headerLoginForm {
  text-align:            right;
}
.headerLoginForm span {
  padding-right:         10px;
}
.headerLoginLink {
  border-top:            1px solid #889988;
  padding-top:           25px;
}
.headerLoginLink span, .headerLoginLink span:hover {
  display:               block;
  margin-bottom:         5px;
  border:                0;
}

/** MAIN (CONTENT AREA) **/
.main {
  position:              absolute;
  overflow:              auto;
  height:                100%;
  width:                 100%;
  background-attachment: fixed;
  background-image:      url(../images/bodyBg.jpg);
  background-position:   center;
  background-repeat:     no-repeat;
}
.mainContent {
  width:                 85%;
  max-width:             900px;
  margin:                40px auto 40px auto;
  padding:               0 40px 0 40px;
  text-align:            justify;
}
.mainContentLeft {
  float:                 left;
  width:                 64%;
  margin:                80px 0 60px 0;
}
.mainContentLeftTabs {
  height:                25px;
}
.mainContentLeftTabs p {
  float:                 left;
  min-width:             20px;
  border-top:            1px solid #222222;
  border-right:          1px solid #222222;
  padding:               4px 8px 4px 8px;
  background-color:      #000000;
  font-weight:           bold;
  color:                 #c7b459;
  cursor:                pointer;
  line-height:           17px;
  text-align:            center;
}
.mainContentLeftTabs p:first-child {
  border-left:           1px solid #222222;
}
.mainContentLeftTabs p:hover {
  color:                 #bbbbbb;
}
.mainContentLeftTabs p.active {
  padding-bottom:        5px;
  background-color:      #111111;
  color:                 #889988;
  cursor:                default;
}
.mainContentLeftPage {
  border:                1px solid #222222;
  padding:               20px;
  background-image:      url(../images/pageBg.png);
  background-repeat:     repeat-x;
}
.mainContentRight {
  float:                 right;
  width:                 32%;
  margin:                100px 0 60px 0;
}

/** FOOTER (STATUS BAR) **/
.footer {
  position:              absolute;
  bottom:                0;
  height:                45px;
  width:                 90%;
}
.footerLeft {
  float:                 right;
  height:                45px;
  width:                 5%;
  margin-right:          85%;
  background-image:      url(../images/footerBg.png);
}
.footerContent {
  float:                 right;
  height:                45px;
  width:                 80%;
  margin:                -45px 5% 0 0;
  background-image:      url(../images/footerContentBg.png);
}
.footerContentItem {
  float:                 left;
  height:                32px;
  min-width:             2px;
  margin-top:            13px;
  background-image:      url(../images/separator.png);
  background-repeat:     repeat-y;
  cursor:                pointer;
}
.footerContentItem span, .footerContentItem a {
  display:               block;
  margin-left:           2px;
  padding:               8px 10px 8px 8px;
  color:                 inherit;
  text-decoration:       none;
}
.footerContentItem span:hover, .footerContentItem a:hover {
  color:                 #bbbbbb;
  background-color:      #1b2025;
}
.footerContentItem span.active {
  color:                 #c7b459;
}
.footerContentInfo {
  float:                 right;
  margin-top:            13px;
  padding:               8px;
}
.footerRight {
  float:                 right;
  height:                45px;
  width:                 5%;
  margin-top:            -45px;
  background-image:      url(../images/footerBg.png);
  background-position:   100% 0;
}