/* Base CSS Styles

   Copyright 2006 by Ryan Thrash and Vertexworks, LLC. All Rights Reserved.
   ryan@vertexworks.com

   Credits and Handy References:
     Alex Robinson via John Gallant - http://positioniseverything.net/articles/onetruelayout/
     Eric Meyer - http://meyerweb.com/eric/thoughts/2005/11/09/multi-unit-any-order-columns/
     Big John Gallant in General - http://positioniseverything.net/
     Faruk Ates - www.kurafire.net and Robert Nyman - www.robertnyman.com
     Mark Boutlon - http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_4/
     Veerle - http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
     IE Max Width - http://www.svendtofte.com/code/max_width_in_ie/ */

/* Neutralize styles, fonts and viewport:
---------------------------------------------------------------- */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
}
html { 
    font-size: 100.01%; /* avoids obscure font-size bug */
    line-height: 1.6; /* http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ */
    font-family: Helvetica, Arial, sans-serif !important; /* IE ignores this and renders Arial better */
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    margin-bottom: 1px; /* avoid jumping scrollbars */
} 
body { 
    font-size: 68.75%; /* 11px */
    height: 100%;
}
img, a img {
    border: 0 !important;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 0 0 1em; /* Reset vertical margins on selected elements */
        padding: 0;
}

li, dd, blockquote {
    margin: 0 0 .5em 1em; /* Left margin only where needed */
}

/* Miscellaneous conveniences: 
---------------------------------------------------------------- */
form label {
    cursor: pointer;
}
fieldset {
    border: none;
}
input, select, textarea, td {
    font-size: inherit;
}
/* use with a <br class="cls" /> to clear floats without extra space */
.clearfix, .cls { 
    clear: both;
    height: 0 !important;
    margin: 0;
    font-size: 1px;
    overflow: hidden;
}
.clear { 
    clear: both;
    margin:  0 0 1em;
}
.right {text-align: right !important;}
.left {text-align: left !important;}
.hide, .skip, .printonly { display: none; }

.inline { display: inline; }

/* Headers and Paragraphs:
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: #444;
}

h1 { font-size: 218%; }
h2 { font-size: 164%; }
h3 { font-size: 145%; }
h4 { font-size: 118%; }
h5 { font-size: 100%; font-weight: bold; }
h6 { font-size: 86%; font-weight: bold; }

p, dd, dl, li { color: #998d80; }

/* Basic Layout:
---------------------------------------------------------------- */
/* Set your "container width" here and build sticky footers */
#wrap {
    margin: 0 auto 0;
    min-height: 100%;
    text-align: left;
    position: relative; /* key for footer stick, otherwise can be removed */
    font-size: 120%;    /* also scale your intended base font size here :) */
}
* html #wrap { height: 100%; }

/* To stick a footer to the bottom of a page, give it a specific
height and an equivalent negative top margin. Make sure that it's
not contained by the #wrap element */
#footerStick { 
    position: relative;
    margin: -75px auto 0; /* negative top margin = height ... the trick that makes it work! */
    padding-top: 1px;     /* compensate for top scroll-bar fix to REALLY stick the footer*/
    height: 75px;
}
/* This makes sure your footer has the room it needs, wrap all columns with this
and make the bottom morgin equal the footer height */
#content {
    margin: 0 0 0 0;
    padding: 75px 0;
    height: auto;
}

/* Forms:
---------------------------------------------------------------- */
/* style the form elements to look similar across browsers */
form input,
form textarea {
    border: 1px solid #ddd;
    border-left-color: #c3c3c3;
    border-top-color: #7c7c7c;
    padding: 2px 0 2px 2px;
    background: #fff url(img/input-bg.gif) repeat-x top left;
}
input.radio, input.checkbox {
    height: auto !important;
    width: auto !important;
    background: none !important;
    vertical-align: middle;
    border: 0;
}

.form {
    padding: 15px;
    border: solid 1px #ddd;
}
form input.hidden {
    display: none !important;
    position: absolute;
}
.form label,
.form input,
.form textarea {
    display: block;
    float: left;
    vertical-align: middle;
    font: inherit;
    color: inherit;
}
.form label {
    padding-right: 20px;
    text-align: right;
    width: 110px;
}
form textarea {
    height: 100px;
    width: 300px;
    margin-top: 0;
}
.form legend {
    color: #04C;
    font-weight: bold;
    padding: 5px;
}

.form select {
    display: inline;
    float: left;
}
.form br {
    clear: both;
}
input.submit {
    display: block !important;
    float: none !important;
    margin: 20px 0 0 140px !important;
}
input.button, input.submit {
    margin: 0;
    border: 0;
    padding: auto;
    width: auto;
    height: auto;
    background: transparent;
    vertical-align: middle;
    
}
.form fieldset.list {
    border: 0;
    padding: 0 !important;
    margin: 6px 0 3px 6px;
}
/* in case someone adds a legend */
.form fieldset.list legend {
    display: none;
}
.form fieldset.list label, 
.form fieldset.list input {
    padding: 0;
    margin: 0 0 3px;
    float: left;
    display: inline;
    border: 0;
    background: none;
    width: auto;
    height: auto;
}
.form fieldset.list label {
    padding-left: 5px;
    text-align: left;
    width: auto;
}