/***********
* Site CSS
* This style sheet contains the common look and feel for all the IRMA Apps 
* This version accommodates ExtJS 4.2 and should be used for SmallApps 2.0


    IMPORTANT!!!!
    body{} and div.wrapper{} rules contains background images pointing with RELATIVE paths.
    Please DO NOT CHANGE THE INTERNAL STRUCTURE of the WebResource folder of the Content Domain Site
***********/

/*********************************************** COMMON RULES FOR BASIC ELEMENTS *********************************/

body {
    font: normal normal 14px arial,helvetica,clean,sans-serif;
    background: url('../Images/arrowhead-wmk.gif') #f4efdd no-repeat center top;
    position: relative;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

a, a:link, a:visited {
    color: #624000;
    text-decoration: none;
}

    a:hover {
        color: #000066;
        text-decoration: underline;
        cursor: pointer;
    }

/* These two rules were added with the introduction of ExtJS 4.2.1.
    ExtJS 4.2.1 changes the way of render buttons; now it includes <a> tags in it. Therefore, together with the rule above,
    buttons were showing an underlined when displayed.
    By adding this rule, the intention is to maintain the underlying in hyper links but remove them from ExtJS buttons
    */
.x-btn-over {
    text-decoration: none !important;
}

.x-tab-over {
    text-decoration: none !important;
}

hr {
    border-bottom: solid 1px;
    border-bottom-color: #BBBBBB;
}

ul /* Use for unordered lists */ {
    list-style-type: disc;
}

ol /* Use for ordered lists */ {
    list-style-type: upper-roman;
}

/************************************************ LAYOUT PAGE ******************************************************/

/************* Header CSS **************/
#header {
    position: relative;
    height: 80px;
    background: #000;
    width: 1024px;
    text-align: left;
}

#leftnrpcbanner, #rightnrpcbanner, #arrowhead {
    position: absolute;
}

#leftnrpcbanner {
    color: #FFFFFF;
    font-weight: 700;
    vertical-align: middle;
}

    #leftnrpcbanner h1 {
        padding-top: 6px;
        padding-left: 5px;
        padding-bottom: 0;
        color: #FFFFFF;
        margin: 2px 0 2px 0;
    }

        #leftnrpcbanner h1 a {
            font-size: 22px;
            padding-top: 10px;
            padding-left: 12px;
            padding-bottom: 0;
            color: #FFFFFF;
            text-decoration: none;
        }

#downloadCallout {
    padding: 5px 5px 5px 10px;
}

A.topbarEl {
    float: right !important;
    font-weight: bold !important;
    margin-right: 20px !important;
    color: #FFFFFF !important;
    margin-top: 8px !important;
}

    A.topbarEl:hover {
        float: right !important;
        font-weight: bold !important;
        margin-right: 20px !important;
        color: #c67d31 !important;
        margin-top: 8px !important;
        cursor: pointer !important;
    }

#leftnrpcbanner h3 {
    padding-left: 5px;
    padding-bottom: 0;
    color: #FFFFFF;
    margin: 2px 0 2px 0;
}

    #leftnrpcbanner h3 a {
        font-size: 12px;
        padding-left: 12px;
        padding-bottom: 0;
        color: #FFFFFF;
        text-decoration: none;
    }
    

#EnvironmentMessage {
    margin-left: 12px;
    font-size: 10px;
}

#rightnrpcbanner {
    right: 70px;
    padding: 5px 15px 5px 0;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
    text-align: left;
}

    #rightnrpcbanner a, #rightnrpcbanner a:hover, #rightnrpcbanner a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }

#arrowhead {
    top: 4px;
    right: 5px;
}

#arrowheadIcon {
    height: 63px;
}

/*************
* End Header CSS *
*************/

/************* Menus and navigation CSS **************/

#main {
    float: left;
    overflow: hidden;
    min-width: 1024px;
}

#breadcrumbs {
    font: 10px Arial, Tahoma, Sans-Serif;
    margin-top: 8px;
    margin-bottom: 3px;
    color: #425921;
}

    #breadcrumbs A:link {
        font: 10px Arial, Tahoma, Sans-Serif;
        margin-top: 3px;
        margin-bottom: 3px;
    }

.secondaryMenuCss {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 2px 0 2px 0;
    text-align: right;
}

    .secondaryMenuCss a {
        font-weight: bold;
        display: inline;
        margin-left: 20px;
        margin-right: 3px;
        font-size: 12px;
    }

        .secondaryMenuCss a:hover {
            color: #c67d31;
        }
/*************
* End Menus CSS *
*************/

/************* Login and User CSS ( Used in the header of layout)*/
#userwelcome {
    padding: 0 2px 2px 2px;
    font-size: 13px;
    font-weight: bold;
    float: right;
    color: #425921;
}

SPAN#loginName {
    color: #425921 !important;
    font-size: 12px;
    font-weight: bold;
}

#logoutLink {
    font-size: 10px;
    font-weight: bold;
}

#userwelcome a {
    color: #000000;
}

    #userwelcome a:link {
        color: #000099;
        text-decoration: none;
        font-weight: bold;
    }

    #userwelcome a:visited {
        color: #000099;
    }

    #userwelcome a:hover {
        color: #000066;
        text-decoration: underline;
    }

/*************
* End of Login and User CSS *  
*************/

/************** Content Section CSS **************/
div#wrapper {
    margin: auto;
    text-align: left;
    width: 1088px;
    background: url('../Images/page_shadow.png') repeat-y center top;
}

div#speciesProfileJustified {
    word-wrap: break-word;
    width: 700px;
}

#content {
    float: left;
    width: 1024px;
    background: #5E7630;
}

div#mainContent {
    width: 993px;
    margin: 0 6px 6px 6px;
    padding: 5px 10px 30px 10px;
    background-color: #FFFFFF;
    text-decoration: none;
    display: inline-block;
    min-height: 750px;
}

/**************
* End Content CSS * 
**************/

/************** Footer CSS **************/
.footer {
    clear: both;
    background-color: Black;
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    width: 1024px;
    color: #FFFFFF;
    line-height: 20px;
}

a.footerLink {
    color: #FFFFFF;
    font: 12px arial,helvetica,clean,sans-serif;
    font-weight: bold;
    margin-right: 10px;
    margin-left: 5px;
}

img.footerExperience {
    vertical-align: middle;
}
/*****************
* END Footer CSS *
*****************/

/********************************************** STATIC PAGES ***************************************************/

.bigLinkText {
    color: #595959;
    font-size: 1.4em;
    margin-left: 1em;
    margin-top: 10px;
}

.bigText, .homePageTitle, .homePageSubtitle {
    color: #8c8c8c;
    font-size: 1.6em;
    font-weight: bold;
}

.homePageTitle, .homePageSubtitle {
    font-family: Times New Roman;
}

.homePageTitle {
    font-size: 3em;
}

.homePageSubtitle {
    font-size: 1.2em;
}

.homeItemBlock {
    text-align: -webkit-match-parent;
    line-height: 20px;
    text-decoration: none;
    margin: 0 0 0 20px;
}

    .homeItemBlock p, .homeItemBlock span, .homeItemText {
        font-size: 1.1em;
        /*color: #595959*/
    }

    .homeItemBlock span {
        margin-left: 1em;
    }

.homePageText {
    font-size: 1.1em;
    color: #595959;
}

.homeItemBlock a, .homeItemTitle {
    color: #906309;
    font-size: 1.2em;
    font-weight: bold;
}

.homePageContainer {
    margin: 0 0 0 15px;
}

/*******************************************  ERROR Page ************************************************************/
.lineCSS {
    border-bottom: solid 1px;
    border-bottom-color: #BBBBBB;
    height: 10px;
    width: 97%;
    margin-left: 10px;
}

div#divTitle, .errorPageTitle {
    font-style: normal;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #755A51;
    padding: 10px;
    padding-left: 20px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
}

.errorPageBody {
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    padding-left: 20px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
}

.Label {
    width: 80px;
}
/* --- END ERROR Page CSS --- */

/***************************************************** HEADER WIDGET ***********************************************/

.infoHeaderCss, .infoHeaderNoBodyCss {
    margin-left: 0;
    margin-top: 10px;
    padding-top: 0;
    border-bottom: solid 1px #CCCCCC;
    font-family: Times New Roman, Arial, Tahoma;
    color: #8c8c8c;
}

    .infoHeaderCss:hover {
        border-bottom: solid 1px #595959;
        font-family: Times New Roman, Arial, Tahoma;
        color: #595959;
    }

    .infoHeaderCss h2 {
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: Times New Roman, Arial, Tahoma;
        font-size: 28px;
        cursor: pointer;
    }

    .infoHeaderNoBodyCss h2 {
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: Times New Roman, Arial, Tahoma;
        font-size: 28px;
        cursor: default;
    }

.infoBodyCss {
    font-size: 11px;
    font-family: Verdana;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #595959;
    margin-left: 20px;
    line-height: 18px;
}

.infoHeaderIcon {
    cursor: pointer;
    float: right;
    width: 12px;
    height: 12px;
    vertical-align: bottom;
    padding-top: 18px;
}

.headerWidgetIcon /* Help Icon */ {
    cursor: pointer;
    float: right;
    width: 16px;
    height: 16px;
    vertical-align: bottom;
    padding-top: 16px;
}

.ttHeaderCss {
    font-weight: bold;
    font-size: 15px;
    color: #785308;
    padding: 10px;
    border-bottom: solid 1px #999;
}

.x-tip-default {
    background-color: #d9d9d9
}


/****************************************************** SEPARATORS ********************************************************************/

.sep, .sep5, .sep10, .sep20, .sep25, .sepLine, .sepLine5, .sepLine10, .sepLine20, .sepLine25 /* Use these after float to clear out the float, sep is 0px sep5 is 5px and so on sepLine creates a top border */ {
    clear: both;
}

.sepLine {
    height: 1px;
}

.sep5, .sepLine5 {
    height: 5px;
}

.sep10, .sepLine10 {
    height: 10px;
}

.sep20, .sepLine20 {
    height: 20px;
}

.sep25, .sepLine25 {
    height: 25px;
}

.sepLine, .sepLine5, .sepLine10, .sepLine20, .sepLine25 {
    border-top: solid 1px #CCCCCC;
}

.hrStyle {
    width: 100%;
}
/* --- END Separators --- */

/****************************************************** LABELS ********************************************************************/

.fakeLabel, .fakeLabel-R180, .fakeLabel-R100, .fakeLabel-L180, .formCell, .fakeLabel-R300 /* Standard label fakeLabel, to make it 180 use either R180 or L180 and you will get either right aligned text or left aligned text */ {
    float: left;
}

    .fakeLabel a {
        text-decoration: underline;
    }

.fakeLabel, .fakeLabel-R180, .fakeLabel-L180, .plainLabel, .fakeLabel-R100, .fakeLabel-L300, .fakeLabel-R300 {
    color: #6e4000;
    font: .9em tahoma, arial, helvetica, sans-serif;
    padding-right: 10px;
}

.fakeLabel-R180, .fakeLabel-L180 {
    width: 180px;
}

.fakeLabel-R100 {
    width: 100px;
}

.fakeLabel-R300 {
    width: 300px;
    text-align: Right;
}

.fakeLabel-L300 {
    float: left;
    width: 300px;
    text-align: left;
}

.fakeLabel-R180, .fakeLabel-R100 {
    text-align: right;
}

.fakeLabel-L180 {
    text-align: left;
}

/******************************************************  MAIN ACTION BUTTON ***************************************/
/*Main action button Ext classes override - Applicable to Ext buttons with 'cls: mainActionButton' ****************/

.mainActionButton .x-btn-inner {
    background-color: #5E7630 !important;
    font-weight: bold;
    color: #FFFFFF;
}

.mainActionButton.x-btn-default-small {
    background-image: none !important;
}

.mainActionButton .x-btn-center {
    background-color: #5E7630 !important;
}

.mainActionButton {
    background-color: #5E7630 !important;
}

/*Prevents the mainActionButton to be underlined when hovered*/
a.mainActionButton {
    text-decoration: none;
}

/*Fixes some issues with the border of the mainActionButton when hovered, when rendered in a toolbar*/
.mainActionButton.x-btn-default-toolbar-small-over {
    border-color: rgb(94, 118, 48) !important;
    background-color: rgb(94, 118, 48) !important;
    background-image: none !important;
}

/******************************************************  AUTO FADE SPAN***************************************/
.autoFadeSpan {
    background-color: #F9EDBE;
    color: Black;
    text-align: center;
    vertical-align: middle;
    padding: 5px 20px 5px 20px;
    border: solid 1px Orange;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
}

/*
    Classes that override ExtJS styles to make the controls more 508 compliant
*/
.x-grid-empty {
    color: #737373;
}

.x-tab button {
    color: #626262
}