/* CSS Document */

body {
    margin: 0;
    padding: 0;
    background: #20155a;
    background-image: url(images/gradient.gif);
    background-repeat: repeat-x;
}

/* Use h1 for all headers at the top of each page. Use h2 for secondary headers. Use h3 for tags in the text that won't be seen. */

h1 {
    color: #333;
    font-size: 1.4em;
    font-style: italic;
    margin-top: 0px;
}

h2 {
    color: #333;
    font-size: 1.1em;
    font-weight: bold;
}

h3 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
}

ul {
    line-height: 1.5em;
    list-style-image: url(images/arrow2.gif)

}

/* Change link color and style here. This applies to all links on the page, so if you want a different style somewhere else you need to specify that later. */

a:link, a:active, a:visited {
    color: #20155A;
    text-decoration: underline;
}

a:hover {
    color: #666;
    text-decoration: none;
}

#wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 821px;
    height: auto;
}

/* This is the header image or flash file. Make height and width same as image or .swf */

#header {
    width: 821px;
    height: 286px;
    margin: 0;
    padding: 0;
}

/* NAVIGATION STYLES */

#leftside {
    position: absolute;
    left: 18px;
    top: 286px;
    width: 242px;
    height: auto;
    background-color: #20155a;
    z-index: 5;
}

#leftlist1 {

    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 15px;
}

#leftside ul {
    text-align: right;
    line-height: 23px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid #FFF;
}

#leftside ul li {
    width: 100%;
    border-bottom: 1px solid #FFF;
}

#list1 {
    float: left;
    margin-right: 40px;
    padding-bottom: 10px;
}

#list2 {
    float: right;
    padding-bottom: 28px;
    padding-right: 30px;
}

#leftside li a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    color: #8b85a9;
    text-decoration: none;
    background: none;
    padding-right: 25px;
    padding-left: 10px;
}

#leftside li a:hover {
    color: #FFF;
    background: url(images/arrow.gif) no-repeat left center;
    padding-left: 10px;
}

#image {
    margin-right: 90px;
    margin-left: 120px;
}

#leftside .here {
    color: #FFF;
    background: url(images/arrow.gif) no-repeat left center;
    padding-left: 10px;
}

/* Content is where the text is going to go. It's best for it to just be text, but if you need images/backgrounds in it, that is okay. This is as wide as the whole site so when it expands with content, so will the other things. So in order to move the text away from the side, use padding, or a table if you need background images like this site. */

#content {
    width: 516px;
    height: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: .75em;
    line-height: 1.3em;
    padding: 20px 15px 25px 290px;
    background-color: #FFF;
}

#footer {
    width: 821px;
    height: 30px;
    font-family: Verdana, sans-serif;
    color: #fff;
    font-size: 10px;
    text-align: right;
    padding-top: 5px;

}

#footer a {
    color: #fff;
}

.input {
    border: 1px solid #000;
}

fieldset {
    border: 1px solid #999;
    padding: 20px 20px 20px 20px;
}

legend {
    background-color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    color: #31B16D;
}

.noshow {
    display: none;
}

.redtext {
    font-weight: bold;
    color: #FF0000;
}

#leftside table {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.noshow {
    display: none;
}

.contact table {
    width: 90%;
    border-collapse: collapse;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.contact td {
    color: #333333;
    padding: 0.5em;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
}

.contact .input {
    padding: 2px;
    background-color: #F2F2F2;
    color: #333333;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    width: 97%;
}

.contact .textarea {
    padding: 2px;
    background-color: #F2F2F2;
    color: #333333;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    width: 97%;
    height: 100px;
}

.input {
    border: 1px solid #666;
}