/* ********** ********** ********** Main Styling ********** ********** ********** */

body {
    border: 0;
    margin: 0;
    font-size: 13px;
    color: #787878;
    font-family: Verdana;
    background: #FFFFFF;
    line-height: 18px;
}

a {
    font-size: 13px;
    color: #787878;
    font-family: Verdana;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

a[href$=".pdf"] {
    padding-left: 20px;
    background: url('images/examples/pdf.gif') no-repeat left center;
}

img { border: 0; }
a img { border: 0; text-underline: none;}

table.table {
    border-width: 1px;
    border-spacing: 0px;
    border-style: solid;
    border-color: #E0E0E0;
    border-collapse: separate;
    background-color: white;
    font-size: 13px;
    color: #787878;
    font-family: Verdana;
    background: #FFFFFF;
    line-height: 18px;
    margin-left: 15px;
    margin-right: 15px;
}

table.table td {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: #E0E0E0;
    background-color: white;
    -moz-border-radius: 0px 0px 0px 0px;
}

table.table th {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: #E0E0E0;
    background-color: white;
    font-weight: bold;
    text-align: left;
    -moz-border-radius: 0px 0px 0px 0px;
}

dfn { cursor: help; }
abbr { cursor: help; }


/* ********** ********** ********** Page Header ********** ********** ********** */

#logo { padding: 10px; }

#refs {
    top: 0;
    right: 0;
    padding: 5px;
    text-align: right;
    position: absolute;
}

#refs a {
    text-decoration: none;
}

#refs a:hover {
    text-decoration: underline;
}

#logged-in {
    position: absolute;
    top: 95px;
    right: 0px;
    padding: 5px;
    text-align: right;
}

/* ********** ********** ********** Menu ********** ********** ********** */

#menu {
    margin: 0;
    padding: 0;
    height: 50px;
    width: 100%;
    background: url('images/bar-blue.gif') repeat-x left top;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 25px;
    list-style: none;
}

#menu li {
    float: left;
    height: 50px;
    border: none;
    display: block;
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 3px;
    text-decoration: none;
    padding: 12px 30px 7px 30px;
}

#menu a {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

#menu .current_page_item a {
    padding-left: 0;
}

#menu a:hover {
    text-decoration: underline;
}


/* ********** ********** ********** Content ********** ********** ********** */

#wrapper {
    float: left;
    width: 100%;
}

.inside {
    margin: 20px;
    margin-top: 0;
}

#contents {
    margin-left: 280px;
}

#contents h2 {
    height: 50px;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 0;
    padding-top: 10px;
    padding-left: 10px;
    text-decoration: none;
    background: url('images/bar-orange.gif') repeat-x left top;
}

#contents h3 {
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
}

#contents h3 a {
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

#contents p {
    padding-left: 15px;
    padding-right: 15px;
}

#split-left { width: 48%; float: left; }
#split-right { width: 48%; float: right; }


/* ********** ********** ********** Tutorials ********** ********** ********** */

#breadcrumbs {
    font-size: 12px;
    color: #8AB52B;
    padding-left: 12px;
    padding-right: 12px;
}

#breadcrumbs a {
    font-size: 12px;
    color: #8AB52B;
    text-decoration: none;
}

#breadcrumbs a:hover {
    font-size: 12px;
    color: #8AB52B;
    text-decoration: underline;
}

code {
    width: 620px;
    margin: 5px 0;
    padding: 10px;
    text-align: left;
    display: block;
    overflow: auto;
    white-space:nowrap;
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-left: 4px solid #0096C5;
}

#tutorial_navigation_wrapper {
    border: 0;
    width: 95%;
    padding: 0px;
    margin: 10px;
}

#tutorial_left {
    float: left;
    width: 210px;
    text-align: left;
    line-height: 18px;
}

#tutorial_right {
    float: right;
    width: 210px;
    text-align: right;
    line-height: 18px;
}

#tutorial_middle {
    float: left;
    width: 32%;
    text-align: center;
}

#tutorial_left img { float: left; margin-right: 7px; vertical-align: middle; }
#tutorial_right img { float: right; margin-left: 7px; vertical-align: middle; }



/* ********** ********** ********** Navigation ********** ********** ********** */

#navigation {
    float: left;
    width: 280px;
    margin-left: -100%;
}

#navigation h2 {
    height: 50px;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 0;
    padding-top: 10px;
    padding-left: 10px;
    text-decoration: none;
    background: url('images/bar-green.gif') repeat-x left top;
}

#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li {
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px dashed #658C00;
}

#navigation a {
    font-weight: bold;
    text-decoration: none;
}

#navigation a:hover {
    text-decoration: underline;
}


/* ********** ********** ********** Forms ********** ********** ********** */

form.styled {
    padding: 0;
    margin: 10px;
    border: 1px solid #E0E0E0;
}

label {
    margin: 5px 0;
    display: block;
    font-weight: bold;
}

.styled input {
    padding: 2px;;
    font-size: 13px;
    color: #787878;
    font-family: Verdana;
    border: 1px solid #E0E0E0;
}

.styled textarea {
    width: 300px;
    padding: 2px;
    height: 100px;
    display: block;
    border: 1px solid #E0E0E0;
    font-size: 13px;
    color: #787878;
    font-family: Verdana;
}

input.button {
    margin: 0;
    color: #005A98;
    padding: 2px 3px;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
}

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url('images/checkbox.gif') no-repeat;
    display: block;
    clear: left;
    float: left;
}

.radio { background: url('images/radio.gif') no-repeat; }



/* ********** ********** ********** Examples ********** ********** ********** */


#example-link a {
    color: #6633FF;
    font-size: 14px;
    text-decoration: underline;
}

#example-link a:visited { color: #006699; }
#example-link a:hover { text-decoration: none; color: #FF9966; }
#example-link a:active { color: #FFFF99; }

p.fls:first-letter {
    font-size: 20px;
    padding-left: 15px;
}

p.flis:first-line {
    color: #658C00;
    text-decoration: underline;
}

p.quote:before {
    content: url('images/examples/quote-before.gif');
}

p.quote:after {
    content: url('images/examples/quote-after.gif');
} 



/* ********** ********** ********** Footer ********** ********** ********** */

#footer{
    clear: left;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #F2F2F2;
}