/** Global
------------------------------------------- **/

body {
    font-family: Verdana, Arial, 'Bitstream Vera Sans', sans-serif; 
    font-size: 80%;
    color: #555;
    background: #fff;
}

* {
    margin: 0;
    padding: 0;
}

.none { display: none; }

.clear { clear: left; }

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/** Tag Overrides
------------------------------------------- **/

img { margin: 0; border: none; }

td { font-size: 0.8em; }

input { padding: 2px; }
textarea { padding: 2px; }

dl {
    margin: 5px;
    padding: 0;
}

dt {
    float: left;
    clear: left;
    text-align: right;
    margin: 5px 10px 0 0;
    width: 75px;
    font-size: 12px;
    font-weight: bold;
}

dd {
    margin: 0 0 10px 0;
    font-size: 12px;
}

dt.indent {
    float: left;
    clear: left;
    text-align: right;
    margin: 5px 10px 0 0;
    width: 175px;
    font-size: 11px;
    font-weight: normal;
}

hr { display: none; }

.hr {
    width: 620px;
    height: 1px;
    margin: 10px 0 15px;
    background: url(Images/dots.gif) repeat-x top left;
    font-size: 1px;
    line-height: 1px;
}

h1 {
    padding: 5px 0;
    color: #f90;
    font-size: 21px;
}

h2 {
    padding: 0;
    color: #000;
    font-size: 21px;
}

h4 {
    padding: 0.5em 0 0.2em; 
    font-size: 12px;
}

a {
    color: #036;
    text-decoration: none;
}

a:hover { border-bottom: 1px solid #acd; }

p.left { float: left; }
p.right { float: right; }

/** Header
------------------------------------------- **/

#header {
    padding-top: 20px;
    padding-left: 160px;
    height: 36px;
    background: #333 url('Images/header-bg.gif') repeat-x bottom left;
}

#header ul { list-style-type: none; }

#header a {
    border: none;
    text-decoration: none;
}

#header #user {
    float: right;
    font-size: 0.8em;
    font-weight: bold;
    padding: 1px;
    margin: -20px 50px 0 0;
    background: #aaa;
}

#header #user li { float: left; }

#header #user li a {
    float: left;
    display: block;
    color: #fff;
    text-transform: lowercase;  
    padding: 0.2em 1em 0.2em 1em;
}

#header #user li a:hover { text-decoration: underline; }

#logo {
    position: absolute;
    left: 0;
    top: 0;
}

#header #nav {
    float: left;
    font-size: 1.2em;
    padding-left: 10px;
    margin-left: 10px;
}

#header #nav li {
    float: left;
    padding-right: 3px;
    background: url('Images/header-nav-li-bg.gif') no-repeat top right;
}

#header #nav li a {
    float: left;
    display: block;
    color: #000;
    font-weight: bold;
    padding: 7px 15px 11px 17px;
    background: url('Images/header-nav-li-a-bg.gif') no-repeat top left;
}

#header #nav li a:hover { color: #fff; }

#header #nav li.this { background: url('Images/header-nav-li-this-bg.gif') no-repeat top right; }

#header #nav li.this a,
#header #nav li.this a:hover {
    color: #000;
    background: url('Images/header-nav-li-this-a-bg.gif') no-repeat top left;
}


/** Main Content
------------------------------------------- **/

#wrapper {
    position: relative;
    min-height: 80%;
    padding: 15px;
    margin-bottom: 7%;
    background: #fff;
}

div.small-content {
    width: 775px; 
    margin: 0 auto;
    text-align: left;
}

#optionsbox {
    width: 184px;
    padding: 5px 10px 10px;
    margin-bottom: 10px;
    background: #cfd;
    border-bottom: solid 1px #6c7;
}

#optionsbox input { width: 100%; }

/** Footer
------------------------------------------- **/

#footer {
    clear: both;
    position: relative;
    color: #666;
    font-size: 0.7em;
    text-transform: lowercase;
    text-align: center;
    padding: 1%;
    margin: -8.5em 2% 3% 2%;
    background: #333;
}

* html #footer { margin-top: -8.4em; }

#footer strong, #footer a { color: #888; }

#footer a:hover { color: #fff; }

#body { height: 95%; }

#debug { color: #bbb; }

/** Lists
------------------------------------------- **/

tr.head td {
    font-size: 85%;
    font-weight: bold;
    background-color: #eee;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 10px;
}

tr.head a { color: #006; }

tr.subhead td {
    font-size: 66%;
    font-weight: bold;
    background-color: #bdd;
    color: #000;
    border-top: solid 1px #6aa;
    border-bottom: solid 1px #6aa;
    padding: 5px;
}

tr.foot td {
    font-size: 66%;
    font-weight: bold;
    background-color: #9cc;
    color: #000;
    border-top: solid 1px #6aa;
    padding: 5px;
}


tr.row td {
    background-color: #fff;
    border-bottom: solid 1px #ddd;
    padding: 2px 5px;
    vertical-align: top;
}

tr.odd td { background-color: #ffc; }

tr.row td a,
tr.row td a:visited  {
    text-decoration: none;
    color: #339;
}

tr.row td a.small,
tr.row td a.small:visited  {
    text-decoration: underline;
    color: #000;
    font-size: 10px;
    line-height: 5px;
}

td.liteblue {
    background-color: #def;
    padding: 5px;
}

td.darkblue {
    background-color: #acd;
    padding: 5px;
}

td.litered {
    background-color: #fed;
    padding: 5px;
}

td.darkred {
    background-color: #dca;
    padding: 5px;
}

a.nice {
    text-decoration: none;
    color: #653;
}

tr.spacer {
    background-color: transparent;
    padding: 0px;
    font-size: 5px;
}


/** Boxes
------------------------------------------- **/
div.error {
    color: #b36;
    background-color: #fde;
    margin: 10px;
    padding: 10px;
    border: solid 1px #b36;
}

div.message {
    color: #390;
    background-color: #cfc;
    margin: 10px;
    padding: 10px;
    border: solid 1px #390;
}

div.help {
    float: right;
    width: 285px;
    color: #555436;
    background-color: #fff8dd;
    padding: 10px;
    border: solid 1px #dddd88;
}

div.title {
    font-weight: bold;
    border-bottom: dotted 1px #999;
}

div.subtitle {
    width: 50%;
    font-size: 11px;
    font-weight: bold;
    border-bottom: solid 1px #aaa;
    margin: 15px;
}

div.listitem { padding: 5px; }

div.odd { background: #ffc; }

div.listitem a,
a.bluelink {
    color: #0095ec;
    font-weight: bold;
    text-decoration: none;
}

div.prev, div.next {
    background: #cff;
    padding: 3px;
    margin: 3px;
    border: solid 1px #0095ec;
}

div.prev { float: left; }

div.next { float: right; }

/** Specifics
------------------------------------------- **/

#login {
    float: right;
    background: url('Images/login-back.gif') no-repeat;
    width: 300px;
    height: 200px;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 20px;
}

#login p {
    background: none;
    color: #999;
    font-weight: normal;
    font-size: 0.5em;
    padding: 0 20px;
}

#login-info {
    float: left;
    width: 450px;
    text-align: left;
}   

.indent {
    margin: 10px 100px;
    width: 650px;
}

#overview-main,
.tools-main {
    float: left;
    width: 500px;
    margin-left: 100px;
}

.tools-main h3 {
    font-weight: bold;
    background-color: #eee;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 10px;
    width: 100%;
}

.tools-main h3 img {
    vertical-align: top;
    position: absolute;
    left: 550px;
    cursor: pointer;
}

.tools-main p {
    padding: 0 10px;
    margin-bottom: 10px;
}

#buttons {
    overflow: auto;
    width: 100%;
    height: 200px;
}

#buttons img {
    padding: 5px;
}

#overview-sidebar,
.tools-sidebar {
    width: 250px;
    margin-left: 630px;
    padding: 15px;
}

#overview-sidebar {
    height: 200px;
    margin-top: 50px;
    background: url('Images/overview-statsback.png') no-repeat;
}

#overview-sidebar table {
    width: 210px;
    margin-top: 30px;
}

#overview-sidebar td {
    padding: 2px;
    padding-bottom: 15px;
    text-align: right;
    color: #fff;
}

#overview-sidebar td.title {
    text-align: left;
}

.tools-main div.left {
    float: left;
}

.tools-main div.right {
    float: right;
}

#referrals-head,
#referrals {
    margin: 15px 100px;
    width: 700px;
}

#referrals td {
    padding: 10px;
}






/* Overlay */
#modalOverlay {
    height: 100%; 
    width: 100%; 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:3000; 
    background-color:#000; 
    cursor:wait;
}

/* Container */
#modalContainer {
    height: 150px; 
    width: 400px; 
    position: fixed; 
    left: 50%; 
    top: 15%; 
    margin-left: -300px; 
    z-index: 3100; 
    background-color: #fff; 
    border: 3px solid #ccc;
}
#modalContainer a.modalCloseImg {
    background: url('Images/x.png') no-repeat; 
    width:25px; 
    height:29px; 
    display:inline; 
    z-index:3200; 
    position:absolute; 
    top:-14px; 
    left:388px; 
    cursor:pointer;
}
#modalContainer #basicModalContent {
    padding:8px;
}