/* Treewatch styling. */

    body {
        margin: 0px;
        background-color: #fff;
        font-size: 13px;
        font-family: arial, sans-serif;
        color: #333;
        line-height: 130%;
    }

    a:link {
        text-decoration: none;
        color: #907106;
        outline: none;
    }
    a:visited {
        text-decoration: none;
        color: #907106;
        outline: none;
    }
    a:active {
        text-decoration: none;
        color: #907106;
        outline: none;
    }
    a:hover {
        text-decoration: none;
        color: #cfb044;
        outline: none;
    }

    a.light:link {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        outline:none;
    }
    a.light:visited {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        outline: none;
    }
    a.light:hover {
        text-decoration: none;
        color: #d4fae7;
        font-weight: bold;
        position: relative;
        outline: none;
    }
    a.light:active {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        outline: none;
    }

    h2 {
        color: #333;
        font-size: 18px;
        font-family: Georgia,Cambria,Times,"Times New Roman",serif;
        font-weight: normal;
    }

/* --== google translate ==-- */
/*
    #translateDropdown {
        position: absolute;
        right: 40px;
        top: 122px;
    }
    #translateBranding {
        position: absolute;
        right: 200px;
        top: 125px;
    }
    .jq-translate-ui {
        background: #f3eee8;
        border: 1px solid #e6dfd6;
        color: #555555;
    }
    .gBrandingText {
        color: #555555;
    }
*/

/* --== tooltips ==-- */

    a span.helpPopup {
        display: none;
    }

    a:hover span.helpPopup {
        display: block;
        position: absolute;
        top: -10px;
        left: 0px;
        text-align: left;
        width: 350px;
        border: 1px solid #cccccc;
        background-color: white;
        padding: 20px;
        line-height:1.5;
        z-index: 3;
        cursor: default;
    }

    hr {
        width: 90%;
        border: 0;
        color: #ccc;
        background-color: #ccc;
        height: 2px;
    }

    .title {
        color: #333;
        font-size: 18px;
        font-family: Georgia,Cambria,Times,"Times New Roman",serif;
    }

    #container {
        width: 100%;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    #content {
        margin: 30px auto 30px auto;
        text-align: left;
        width: 960px;
        position: relative;
        overflow: hidden;
        z-index: 5;
    }

    #projectBar {
        position: relative;
        width: 100%;
        background-color: #000;
        height: 28px;
        z-index: 350;
    }

        #projectTabArea {
            position: relative;
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            height: 28px;
            z-index: 350;
        }
        #sylvaLogo {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 148px;
            background-color: #fff;
            z-index: 350;
        }


    #topBar {
        position: relative;
        width: 100%;
        height: 120px;
        background-color: #e7cc2b;
        z-index: 310;
    }
        #header {
            position: relative;
            width: 960px;
            height: 120px;
            margin-left: auto;
            margin-right: auto;
            background-image: url("images/header_bg.jpg");
            background-repeat: no-repeat;
            z-index: 310;
        }

        #rightButtons {
            position: absolute;
            right: 0px;
            top: 15px;
            width: 130px;
            height: 100px;
        }

    #navBar {
        position: relative;
        width: 100%;
        height: 33px;
        background-color: #cfb044;
        z-index: 320;
    }
        #mainMenu {
            position: relative;
            width: 960px;
            height: 33px;
            margin-left: auto;
            margin-right: auto;
            z-index: 320;
        }
            .navItem {
                position: relative;
                cursor: pointer;
                float: left;
                height: 33px;
                background-color: transparent;
            }
            .navItem.navHover {
                background-color: #e7c81a;
            }
            .navItem.navSelected {
                background-color: #fff9d7;
            }
            .navText {
                color: #ffffff;
                margin: 7px 15px 0px 15px;
                font-size: 18px;
                font-family: arial, sans-serif;
            }
            .navText.textSelected {
                color: #b19619;
            }

            .navDropdown {
                display: none;
                position: absolute;
                top: 33px;
                z-index: 330;
                width: 180px;
                font-weight: bold;
                font-size: 14px;
                background-color: #388A2B;
                opacity: 0.9;
                filter:alpha(opacity=90);
            }

            .navDropdownLink {
                width: 100%;
                text-align: left;
                overflow: hidden;
                color: #fff;
            }
            .navDropdownLink.hover {
                background: #62b137;
            }

            .tabInner {
                z-index: 302;
                margin: 5px;
                color: #fff;
                line-height: 150%;
                font-weight: normal;
                text-align: left;
                font-family: arial, sans-serif;
                opacity:1;
                filter:alpha(opacity=100);
            }
            .tabInner a, .tabInner a:hover, .tabInner a:visited, .tabInner a:active {
                color: #fff;
                font-weight: normal;
                font-family: arial, sans-serif;
            }

        #subMenu {
            position: relative;
            width: 960px;
            height: 30px;
            margin-left: auto;
            margin-right: auto;
            z-index: 310;
        }
            .subNavItem {
                position: relative;
                cursor: pointer;
                float: left;
                height: 30px;
                color: #236318;
            }
            .subNavItem.subHover {
                border-bottom: 2px solid #62b137;
            }
            .subNavItem.subSelected {
                background-color: #eee;
                border-bottom: 2px solid #62b137;
            }
            .subNavText {
                margin: 8px 15px 5px 15px;
                font-size: 14px;
                font-family: arial, sans-serif;
            }


    #loginBox  {
        position: absolute;
        display: none;
        right: 0px;
        bottom: 0px;
        background-color: #388a2b;
        height: 40px;
        -webkit-border-radius:10px 0px 0px 0px;
        vertical-align: bottom;
        font-family: arial, sans-serif;
        font-size: 12px;
        z-index: 3;
        color: #444;
    }
    #loginText  {
        float: right;
        margin: 8px;
        font-size: 14px;
        color: #fff;
    }

     #map_canvas {
         float: left;
         width: 630px;
         height:450px;
         border: 1px solid #c4964b;
         margin-right: 20px;
     }

     #treefilter {
         float: left;
         clear: left;
         width: 630px;
         border: 1px solid #968531;
         border-top: 0px;
         background-image: url('images/boxbg.jpg');
         background-repeat: no-repeat;
     }

     #treedata {
         float: right;
         width: 280px;
         border: 1px solid #f1dc77;
         background-image: url('images/boxbg.jpg');
         background-repeat: no-repeat;
     }

     .survey {
         width: 100%;
     }
     .survey td {
         margin: 5px;
         padding: 5px;
         background-image: url('images/boxbg.jpg');
         background-repeat: no-repeat;
         color: #444;
     }
     td.s1 {
         margin: 5px;
         padding: 5px;
         font-weight: bold;
         background: none;
         color: #444;
     }
     td.s2 {
         margin: 5px;
         padding: 5px;
         background-color: #eee;
         color: #444;
     }


     .tabBox {
         width: 960px;
         border: 1px solid #f1dc77;
         background-image: #fbfbf3 url('images/boxbg.jpg');
         background-repeat: no-repeat;
         border-radius: 10px;
         -moz-border-radius: 10px;
         -webkit-border-radius: 10px;
     }
     .tabBoxHeader {
         width: 100%;
         background: #ece1ad url('images/tabBoxHeader.jpg') repeat-x left top;
         border: 1px solid #ece1ad;
         border-radius: 10px 10px 0px 0px;
         -moz-border-radius: 10px 10px 0px 0px;
         -webkit-border-radius: 8px 8px 0px 0px;
     }
     .boxTab {
         width: 82px;
         height: 50px;
         border-bottom: 0;
         margin-right: 5px;
     }

    .smallgrey {
        color: #666;
        font-size: 11px;
    }

    td {
        padding: 0;
        border-spacing: 0;
        text-align: left;
        vertical-align: top;
        font-family: arial, sans-serif;
        font-size: 14px;
        line-height: 140%;
    }

    input {
        color: #333;
        font-size: 13px;
        padding: 4px;
    }

    textarea {
        font-family: arial, sans-serif;
        font-size: 13px;
        color: #333;
        padding: 4px;
    }

    .fadebox {
        position: relative;
        width: 554px;
        height: 124px;
        margin-bottom: 30px;
        z-index: 10;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .fadeinner {
        position: absolute;
        text-align: justify;
        width: 303px;
        margin-left: 55px;
        margin-top: 14px;
        font-size: 12px;
    }

    .treeImage {
        position: absolute;
        right: -40px;
        top: 450px;
        width: 1000px;
        height: 242px;
        background-image: url("images/background3.png");
        background-position: bottom right;
        background-repeat: none;
        overflow: visible;
    }




    /*----------------  tabs  -----------------*/

    .topTab {
        position: relative;
        display: inline-block;
        height: 31px;
        background-position: bottom;
        background-repeat: no-repeat;
        /* Fix ie hasLayout bug */
        zoom: 1;
        *display:inline;
    }
    .tabText {
        position: relative;
        top: 8px;
        font-size: 13px;
        text-align: center;
        font-family: arial, sans-serif;
        font-weight: bold;
    }
    .tab1 {
        width: 145px;
        background-image: url("../shared/images/tabs/tab.png");
    }
    .tab1on {
        width: 145px;
        background-image: url("../shared/images/tabs/tab_hl.png");
        color: #0C794D;
    }
    .tab2 {
        width: 245px;
        background-image: url("../shared/images/tabs/tab2.png");
    }
    .tab2on {
        width: 245px;
        background-image: url("../shared/images/tabs/tab2_hl.png");
        color: #0C794D;
    }
    .tabStart {
        background-image: url("../shared/images/tabs/tabStart.png");
        width: 28px;
        margin-right: -4px;
    }
    .tabEnd {
        background-image: url("../shared/images/tabs/tabEnd.png");
        width: 260px;
        margin-left: -4px;
    }

    .detailTitle {
        float: left;
        clear: left;
        width: 150px;
        height: 30px;
        padding-top: 5px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
    }
    .detailInput {
        float: left;
        width: 750px;
        height: 30px;
        margin-bottom: 10px;
        text-align: left;
    }

    .greenSuccess {
         font-size: 16px;
         color: #13d00f;
         font-weight: bold;
     }

    .niceButton {
        width: 100px;
        height: 40px;
        font-size: 14px;
        font-weight: bold;
    }