/* = RESETS AND BASIC INITIALIZATIONS
----------------------------------------------------------------------------------------------------------------------*/
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, pre, ul, p {

    margin: 0;
    padding: 0;
    position: relative;
/*    overflow: auto /* this is to fix the "peek-a-boo" bug in IE*/

}

/* transform the font size so that 1em is 10px so that you can use em's
but think in pixels as now 1em is 10px, 1.2em is 12px and so on */
html { font-size: 62.5% }

body {

    background-color: #fff;
    text-align: center; /* this is done so that IE6 will center the main wrapper */

}

a img { border:none }

div.hr {

    background: #ddd;
    color: #ddd;
    clear: both;
    float: none;
    width: 100%;
    height: .1em;
    margin: .5em 0;
    border: none;
    overflow: hidden;

}

/* = TYPOGRAPHY
----------------------------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 { font-weight: normal }

/* set default body font size. declarations that follow, are percentual relative to this */
body    { font-family: Arial, Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif; font-size: 130%; color: #666 }
h1      { font-size: 220%; margin: .5em 0 }
h2      { font-size: 200%; margin: .5em 0 }
h3      { font-size: 180%; margin: .5em 0 }
h4      { font-size: 160%; margin: .5em 0 }
h5      { font-weight: bold; font-size: 140%; margin: .5em 0 }
h6      { font-weight: bold; font-size: 120%; margin: .5em 0 }
p       { font-size: 100%; margin: .5em 0; line-height: 1.6em }
small,
sup,
sub     { font-size: 80% }

/* = FLOATS
----------------------------------------------------------------------------------------------------------------------*/
.left   { float: left }
.right  { float: right }
.clear  { clear: both }

/* = LINKS
----------------------------------------------------------------------------------------------------------------------*/
a:link      { color: #088EEE }
a:visited   { color: #088EEE }
a:hover     { color: #088EEE }
a.active    { color: #088EEE }
a           { text-decoration: none }

/* = TABLES
----------------------------------------------------------------------------------------------------------------------*/
table           { border-collapse: collapse; border-spacing: 0 }
table caption   { text-align: left; font-size: 180%; margin-bottom: .5em }
table tr.even   { background-color: #dedede }
table tr th     { background-color: #669999; font-weight: bold; color: #fff }

/* = LISTS
----------------------------------------------------------------------------------------------------------------------*/
ul, ol          { margin-left: 1em }
ul.notype,
ol.notype       { list-style-type: none; margin-left: 0; margin-right: 0 }
ul.notype li,
ol.notype li    { margin-left: 0; margin-right: 0 }
ul.float,
ol.float        { margin-left: 0 }
ul.float li,
ol.float li     { margin-top: 0; margin-bottom: 0; float: left }
ul.float li a,
ol.float li a   { display: block; float: left } /* float: left is for IE6 */

/* = MISCELLANEOUS
----------------------------------------------------------------------------------------------------------------------*/
h1      { overflow: hidden } /* for images as links to home page in h1 */
h1 a    { height: 100%; display: block; text-indent: -9000px }

.bottom         { margin-bottom: 0; padding-bottom: 0}
.first          { margin-left: 0; padding-left: 0 }
.hide           { display: none }
.highlight      { background: #ccf }
.inline         { display: inline }
.last           { margin-right: 0; padding-right: 0 }
.stretch        { width: 100% }
.top            { margin-top: 0; padding-top: 0 }
.nowrap         { white-space: nowrap }

/* = ROAR MESSAGES
----------------------------------------------------------------------------------------------------------------------*/
div.roar-message {

    background-image: url(../images/roar-done.png);
    background-repeat: no-repeat;
    background-position: 5px top;
    padding: 0px 0px 48px 63px;

}

/* = MOOTIPS
----------------------------------------------------------------------------------------------------------------------*/
.tooltips               { color: #fff; width: 139px; z-index: 13000 }
.tooltips .tip-top      { height: 8px; background: url(../images/bubble.png) center top }
.tooltips .tip          { background: url(../images/bubble.png) center center; padding: 0 8px 0 8px; text-align: left }
.tooltips .tip-title    { font-family: inherit; font-weight: bold; font-size: 12px }
.tooltips .tip-text     { font-family: inherit; font-weight: normal; font-size: 10px; margin-top: 6px }
.tooltips .tip-bottom   { background: url(../images/bubble.png) center bottom; height: 8px }

/* = ACCORDION
----------------------------------------------------------------------------------------------------------------------*/
.accordion .toggler { cursor: pointer }