/* SVN FILE: $Id: screen.css 143 2008-10-06 12:50:26Z Chris $ */
/**
 * Master css file for screen media
 *
 * @copyright    Copyright 2008 PBM Web Development - All Rights Reserved
 * @package      app
 * @subpackage   app.webroot.css
 * @since        V1.0.0
 * @version      $Revision: 143 $
 * @modifiedby   $LastChangedBy: Chris $
 * @lastmodified $Date: 2008-10-06 13:50:26 +0100 (Mon, 06 Oct 2008) $
 */

/* Normalization
------------------- */
/* margin and padding */
body, blockquote, div, dl, dt, dd, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, select, th, td, ul {
  margin : 0;
  padding : 0;
}

/* font-size for headers */
h1, h2, h3, h4, h5, h6 {
  font-size : 100%;
}

/* Removes list-style from lists */
ol, ul {
  list-style : none;
}

/* font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
 font-style : normal;
 font-weight : normal;
}

/* Removes list-style from lists */
table {
  border-collapse : collapse;
  border-spacing : 0;
}

/* Removes border from fieldset and img */
div.input fieldset, img {
  border : 0;
}

/* Left-aligns text in caption and th */
caption, th {
  text-align : left;
}

/* Removes quotation marks from q */
q:before, q:after {
  content :'';
}

/* layout
------------ */
html {
  text-align : center;
}
body {
  background-color: #e2e1f2;
  color: #082567;
  font: 70%/1.5 verdana, arial, sans-serif;
  margin : 0 auto;
  position : relative;
  text-align : left;
  width : 780px;
}
h1 {
  color: #02091a;
  font-family: Verdana;
  font-size: 300%;
  position: relative;
}
h1 span {
  background: url(/css/img/heading-gradient.png) repeat-x top;
  display: block;
  height: 31px;
  position: absolute;
  top: 4px;
  width: 100%;
}
label, legend {
  font-weight: bold;
}
td {
  padding: 3px;
  vertical-align: top;
}
textarea {
  font: 100%/1.5 verdana, arial, sans-serif;
}
noscript {
  color: #670825;
}
noscript.email {
  color: #000;
}
.hidden {
  display: none;
}
/* <branding> */
#branding {
  position : relative;
  z-index: 10;
}
#branding h1 {
  background: transparent url(/css/img/branding_h1.png) no-repeat;
  height: 520px;
  left: -99px;
  position: absolute;
  text-indent: -999px;
  top: 60px;
  width: 99px;
}
#branding q {
  background: transparent url(/css/img/branding_q.png) no-repeat;
  height: 45px;
  left: 20px;
  position: absolute;
  text-indent: -999px;
  top: 30px;
  width: 462px;
}
#branding p {
  background: transparent url(/css/img/branding_p.png) no-repeat;
  height: 45px;
  left: 20px;
  position: absolute;
  text-indent: -999px;
  top: 75px;
  width: 462px;
}
/* </branding> */

/* <nav-main> */
#nav-main {
  position: absolute;
  right: 30px;
  top: 38px;
}
#nav-main li {
  float: left;
}
#nav-main li a {
  background-color: #455b8d;
  border: 1px solid #000;
  color: #e6e9f0;
  display: block;
  font-size: 120%;
  font-weight: bold;
  padding: 0.15em 0;
  text-align: center;
  text-decoration: none;
  width: 4.5em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#nav-main li a:hover {
  background-color: #02091a;
  color: #e6e9f0;
}
#nav-main li#nav-home a {
  border-left: 1px solid #000;
}
#sapphire-index #nav-main li#nav-home a,
#rates-index #nav-main li#nav-rates a,
#join-add #nav-main li#nav-join a {
  background-color: #aca5d9;
  color: #02091a;
  cursor: default;
}
#sapphire-view #nav-main li#nav-home a {
  cursor: pointer;
}
/* </nav-main> */

/* <content> */
div#content {
  background: #a199d4 url(/css/img/content_background.jpg) no-repeat;
  border-left: 99px solid #082567;
  left: -99px;
  min-height: 390px;
  padding: 60px 20px 10px;
  position: relative;
  top: 60px;
  width: 740px;
}
div#content h1 {
  border-bottom: 1px solid  #02091a;
  margin-bottom: 15px;
  padding-right: 1em;
  text-align: right;
}
/* <content-main> */
div#content-main {
  background: transparent url(/css/img/content_main_background.png) repeat;
  margin-left: 250px;
  padding: 10px 15px;
  position: relative;
  text-align: justify;
  width: 450px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
div#content-main.thin {
  margin-left: 360px;
  width: 340px;
}
#content-main p {
  padding-bottom: 0.5em;
}
/* </content-main> */
/* <content-sub> */
div#content-sub {
  float: left;
  position: relative;
  width: 40%;
}
div#content-sub noscript {
  text-align: center;
}
/* </content-sub> */
/* </content> */

/* <site-info> */
#site-info {
  border-top: 2px solid #fff;
  clear: both;
  font-size: 80%;
  height: 5em;
  left: -99px;
  position: relative;
  top: 60px;
  width: 879px;
}
#site-info, #site-info a {
  background-color: #082567;
  color: #e6e9f0;
  text-decoration: none;
}
#copyright-notice {
  padding-left: 30px;
  padding-top: 5px;
}
#policies {
  padding-left: 30px;
}
p#rss {
  position: absolute;
  right: 30px;
  top: 2.25em;
}
p#rss img {
  position: relative;
  top: 0.25em;
}
#content-rating {
  position: absolute;
  right: 30px;
  top: 5px;
}
#content-rating li {
  float: left;
  padding: 0.25em 0.5em;
}
/* </site-info> */
/* <form> */
legend {
 margin-left: 15px;
 padding: 0 5px;
}
div.input {
  clear: both;
  margin-bottom: 5px;
  position: relative;
}
div.input label {
  float: left;
  margin-right: 10px;
  text-align: right;
  width: 25%;
}
div.input span {
  margin-right: 5px;
}
div.input input, div.input select, div.input textarea {
  padding-left: 3px;
}
div.input input, div.input textarea {
  padding-right: 3px;
}
div.input textarea {
  padding-bottom: 3px;
  padding-top: 3px;
}
div.input fieldset legend {
  display: none;
}
div.radio label {
  padding: 0 5px;
}
div.radio input, div.radio label {
  float: none;
  left: 27%;
  position: relative;
}
input[type=checkbox] {
  left: 27%;
  position: relative;
  top: 1.5em;
}
div.captcha img {
  padding: 5px;
  padding-left: 27%;
}
div.captcha div.refresh {
  cursor: pointer;
}
div.input input.form-error, div.input select.form-error, div.input textarea.form-error {
  background-color: #ffeeee;
}
div.input input:focus, div.input select:focus, div.input textarea:focus {
  background-color: #fffacd;
}
.error {
  color: #ff0000;
}
.error-message {
  margin-left: 27%;
}
/* </form> */
#flashMessage {
  color: #ff0000;
  font-size: 250%;
  font-weight: bold;
  margin-left: 30px;
  padding: 5px;
}
#content-main p.closing {
  margin-bottom: 0;
  padding-bottom: 0;
}