html, body {
    font-size: .90em;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

/* TODO - remove this as it prevents the bottom bar from working */

/*#wrap table td {
    padding: 2px 0px;
}*/

/* Main Layout */
/* Note - container, header, body, and footer used to ensure a 100% height with the footer at the bottom */

#container {
    min-height: 100%;
    position: relative;
    height: 100%;
    overflow-x: hidden;
}

/*.ui-dialog .ui-dialog-content {
        background: red;
    }*/

#header {
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}

#body {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#body a {
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 1em;
}

#body-internal {
    width: 1200px;
    border: 1px solid #bbb;
    margin: 10px;
    margin-top: 0px;
    margin-bottom: 60px;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 30px;
}

#footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
}
.footer-ofl {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #008B91;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    
}
#menubar {
    background-color: #848484;
    height: 25px;
}

    #menubar a {
        padding-left: 20px;
        color: white;
        font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
        font-size: 1em;
    }

        #menubar a:hover, a:active {
            color: #FFA543;
        }

/* The following fixes link flicker on active from the CORE default stylesheet */
/*#menuitem a a:link a:visited a:active {
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 1em;
}*/

/*.menuitem {
    padding-left: 25px;
    color: white;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 1em;
}*/

/* remove when old Layout is obsolete */
#main {
    overflow: auto;
    padding-bottom: 20px; /* must be same height as the footer */
    /*border-left: 2px solid gray;     
    margin-left: 10px;  */
    height: 777px;
}

/* menu
----------------------------------------------------------*/
ul#tabmenu {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    padding-bottom: 0px;
    margin-bottom: 0px;
    /*border-bottom: 1px solid #eee;*/
    height: 21px;
}

    ul#tabmenu li {
        display: inline;
        list-style: none;
        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
        border: 1px solid #bbb;
        border-bottom-width: 0px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #eee;
    }

        ul#tabmenu li a {
            background: none;
            color: #999;
            text-decoration: none;
            font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
        }

            ul#tabmenu li a:hover {
                color: #333;
                text-decoration: none;
            }

/*Opera Fix*/
/*body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}*/
/* End sticky footer CSS */

/* Default Styles */

/* Default container for content pages (within the tabs) */
/*.container {
    width: 1164px !important;
}*/

/*.popup-dialog {
    background-color: yellow;
    margin: 0px;
    padding: 10px 4px 4px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}*/

/* End Default Styles */


.assign-button {
    width: 15px;
    height: 15px;
    vertical-align: top;
    padding-top: 3px;
    padding-left: 1px;
    cursor: pointer;
    cursor: hand;
}

.icon-button {
    cursor: pointer;
    cursor: hand;
}

/* Images Panel (i.e. left side of Report Profile */
.image-button-panel {
    padding: 8px;
    padding-right: 15px;
    vertical-align: top;
    text-align: center;
}

/* Dialogs */
#ReportProfileDialog .ui-dialog {
    background-color: #D4DFF5;
}



.ui-datepicker-trigger {
    padding-left: 1px;
    cursor: pointer;
    cursor: hand;
}


fieldset {
    width: 100%;
    border: 1px solid #ddd;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 15px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.search-fieldset {
    font-size: 0.8em;
    width: 100%;
    border: 1px solid #ddd;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 15px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

    .search-fieldset input[type="text"] {
        width: 115px;
    }

    .search-fieldset select {
        width: 141px;
    }

.search-table {
}

    .search-table td {
        padding-left: 10px;
    }

legend {
    font-size: 1.2em;
    font-weight: bold;
    color: #5584B1;
    padding: 10px;
}

textarea {
    /*    min-height: 75px;*/
    padding: 2px;
    color: #444;
    width: 316px;
    height: 55px;
    font-size: 1.0em !important;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif !important;
    background-color: #F0F0F0;
}

.featured {
    margin: 10px auto 35px auto;
    padding: 30px;
    width: 100%;
    background-color: cornsilk;
    border: solid 1px wheat;
    vertical-align: top;
    font-weight: bolder;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.featuredForTenementOperatorSelection {
    padding: 4px 0 4px 0; 
    margin: 10px 0 0 0;
    font-weight: normal; 
    font-size: 11px;
    width: 95%;
    background-color: cornsilk;
    border: solid 1px wheat;
    vertical-align: top;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.editor-label {
    margin: 1em 0 0 0;
    width: 250px;
    vertical-align: top;
}

.editor-field {
    margin: 0.5em 0 0 0;
}

input[type="text"],
input[type="password"] {
    padding: 2px;
    color: #444;
    width: 315px;
    height: 25px;
    background-color: #F0F0F0;
}

select {
    color: #444;
    width: 323px;
    height: 23px;
    background-color: #F0F0F0;
}

input[type="submit"] {
    font-size: 1.2em;
    padding: 5px;
    width: 150px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
    vertical-align: top;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}


.validation-summary-errors {
    border: 1px solid #ff0000;
    width: 600px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.validation-step-header {
    padding: 10px;
    border-bottom: 1px;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-style: dashed;
    border-bottom-color: #ff0000;
}

/*
.validation-summary-valid
{
    display: none;
}
*/

/*.reportDetails {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 800px;
}*/

.tenementDetailsTable td {
    width: 160px;
    vertical-align: top;
}

.htmlTextContainer {
    overflow: auto;
    border: solid 1px #7f9db9;
    padding: 2px;
    color: #444;
    width: 100%;
    height: 196px;
    font-size: 1.0em !important;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif !important;
    font-weight: normal;
    background-color: white;
}

.htmlTextContainer table
{
    overflow: hidden !important;
    word-break: break-word !important;
    border-collapse: collapse;
    border-spacing: 0;
    border-left: 2px solid black !important;
    border-right: 2px solid black !important;
    border-top: 2px solid black !important;
    border-bottom: 2px solid black !important;
    width: 100%
}

.htmlTextContainer td {
    border: 1px solid black;
}

.openReportIcon {
    margin-left: 3px;
    cursor: pointer;
}

.lockReportIcon {
    margin-left: 3px;
}

.tenementDetailsIcon {
    margin-left: 3px;
    cursor: pointer;
}

.openLetterIcon {
    margin-left: 3px;
    cursor: pointer;
}

/* remove all MenuItems */
.homeMenuItem {
    color: #ffffff;
    margin-left: 10px;
}

.myProfileMenuItem {
    color: #ffffff;
    margin-left: 35px;
}

.reportsMenuItem {
    color: #ffffff;
    margin-left: 35px;
}

.obligationsMenuItem {
    color: #ffffff;
    margin-left: 35px;
}

.helpMenuItem {
    color: #ffffff;
    margin-left: 35px;
}

.filetree li {
    padding: 3px 0px 2px 16px;
}

.filetree .folder, .filetree .file {
    padding: 0px 0px 10px 3px;
    display: block;
    color: #5584B1 !important;
    font-weight: bold;
}

input[type="button"] {
    width: 120px;
}

input[type="submit"] {
    padding: 2px;
    width: 120px;
}

.mandatoryFieldAsterisk {
    color: red;
    font-weight: bold;
}

.ui-pg-input /* this is the class name applied to the ""Page No" textbox in the Pager of JQGrid. */ {
    width: 30px !important;
}

.ui-th-div-ie {
    font-weight: bold !important;
}

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    text-align: left !important;
}

.ui-state-highlight { /* the default background (yellow) is very light. So overriding it with below color */
    background: sandybrown !important;
}

/* styles for Online Form Lodgement */

#ofl-sidebar {
    margin-top: 15px;
    width: 250px;
    color: white;
    background-color: #34495E;
}

#ofl-maincontent {
    padding-left: 50px;
}

#ofl-maintitle {
    color: #2D00ED;
    padding: 15px;
    padding-left: 0px;
    padding-top: 0px;
}

.ofl-mainlink-image {
    padding: 18px;
}

.ofl-mainlink-image-homepage {
    padding: 1rem;    
}

.ofl-mainlink-image-homepage img {
    width: 150px;
}

.ofl-mainlink-text {
    vertical-align: top;
    padding: 7px;
}

#ofl-sidebar-header {
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 15px 8px 15px;
    background: #2F7CAC; /* Old browsers */
    background: -moz-linear-gradient(top, #2F7CAC 0%, #2989d8 50%, #207cca 51%, #0F3A64 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2F7CAC), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#0F3A64)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2F7CAC 0%,#2989d8 50%,#207cca 51%,#0F3A64 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2F7CAC 0%,#2989d8 50%,#207cca 51%,#0F3A64 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2F7CAC 0%,#2989d8 50%,#207cca 51%,#0F3A64 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2F7CAC 0%,#2989d8 50%,#207cca 51%,#0F3A64 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2F7CAC', endColorstr='#0F3A64',GradientType=0 ); /* IE6-9 */
}

#ofl-sidebar-content {
    padding: 20px 5px 20px 5px;
}

#ofl-sidebar a {
    color: white;
    font-weight: normal;
}

#ofl-sidebar img, #ofl-maincontent img {
    border: 0px;
}

#ofl-frontpage-links {
    color: #888;
}

.ofl-frontpage-highlight {
    color: red;
    padding-bottom: 10px;
    padding-left: 5px;
    font-size: 0.9em;
    font-weight: bold;
}

/* styles for wizard-like look */

.wizardLeftMenu {
    /*float: left;*/
    vertical-align: top;
    width: 230px;
    padding-top: 12px;
    padding-bottom: 100px;
    padding-right: 30px;
}

.wizardSteps {
    padding-top: 8px;
    padding-left: 2px;
    width: 320px;
}

    .wizardSteps button {
        min-width: 200px;
        width: 320px;
        margin-bottom: 5px;
        height: 40px;
        text-align: left;
    }

        .wizardSteps button.wizardSidebarItemComplete.selected {
            background-color: #D7EBF9;
            color: #025182;
            font-weight: bold;
            border-width: 1.5px;
            border-color: #025182;
        }

        .wizardSteps button.wizardSidebarItemInformation.selected {
            background-color: #D7EBF9;
            color: #025182;
            font-weight: bold;
            border-width: 1.5px;
            border-color: #025182;
        }

         .wizardSteps button.wizardSidebarItemWithNoCompletionCheck.selected {
            background-color: #D7EBF9;
            color: #025182;
            font-weight: bold;
            border-width: 1.5px;
            border-color: #025182;
        }

        .wizardSteps button.wizardSidebarItemWithNoCompletionCheck {
            background-color: #F0F0F0;
            border-width: 2.5px;
            border-color: black;
        }

        .wizardSteps button.wizardSidebarItemComplete {
            background-image: url('../Images/StepCompleted.png');
            background-repeat: no-repeat;
            background-position: right !important;
        }

.wizardSidebarLastStep {
    border-width: 2px;
    border-color: black;
}

    .wizardSidebarLastStep.selected {
        background-color: #D7EBF9;
        color: #025182;
        font-weight: bold;
        border-width: 1.5px;
        border-color: #025182;
    }

.wizardSteps button.wizardSidebarItemInformation {
    background-image: url('../Images/StepInComplete.png');
    background-repeat: no-repeat;
    background-position: right !important;
}

.wizardHeader {
    color: #5584B1;
}

.wizardContent {
    vertical-align: top;
    width: 100%;
    /*padding: 8px 5px 20px 5px;
    margin-left: 350px;
    vertical-align: top !important;*/
}

.wizardNavigation {
    margin-top: 15px;
}

    .wizardNavigation button {
        margin: 4px;
        font-size: 1.2em;
        padding: 5px;
        width: 120px;
    }

     .wizardNavigation .wizardNavigationNext {
        margin: 4px;
        font-size: 1.2em;
        padding: 5px;
        width: 150px;
    }

    .wizardNavigationCustomButton {
        margin: 4px;
        font-size: 1.2em;
        padding: 5px;
        width: 120px;
    }

.HomePageMainTable {
    border: 1.5px solid black;
}

.HomePageMainTitle {
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 26px;
    vertical-align: middle;
    margin-left: 15px;
}

.HomePageSubTitle {
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-left: 15px;
}

.HomePageSubTitleContent {
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    font-size: 14px;
    margin-left: 15px;
}

#AdminReportSearch {
    font-size: 11px; /*client wants the font to be the same size as that of the grid that we have below the Quick Search*/
}

    #AdminReportSearch td {
        padding-right: 8px !important;
    }

    #AdminReportSearch input[type="text"] {
        width: 115px;
    }

    #AdminReportSearch select {
        width: 141px;
    }

#AdminObligationSearch {
    font-size: 11px; /*client wants the font to be the same size as that of the grid that we have below the Quick Search*/
}

    #AdminObligationSearch td {
        padding-right: 8px !important;
    }

    #AdminObligationSearch input[type="text"] {
        width: 115px;
    }

    #AdminObligationSearch select {
        width: 141px;
    }

#ObligationDetailsTable {
    font-size: x-small !important;
}

    #ObligationDetailsTable input[type="text"] {
        width: 127px;
    }

#ReportProfileTable {
    font-size: x-small !important;
    margin: 0px !important;
    padding: 0px !important;
}

    #ReportProfileTable input[type="text"] {
        width: 175px;
    }

    #ReportProfileTable label {
        font-weight: bold;
    }

.AccordionDiv {
    font-weight: bold;
    font-size: 11px;
    color: white;
    /*background-color: #1B79AC !important;*/ /* this property gets override by Accordion so I have specified it inline with the Div control */
}

.ProjectInformationFieldset label {
    margin-right: 8px;
}

/*TODO remove*/
.ImagesContainer {
    width: 150px;
    vertical-align: top;
    text-align: center;
}

.AddEditReportAbstractFirstColumn {
    width: 150px !important;
    vertical-align: top !important;
}

.AdministrativeNoteFirstColumn {
    width: 150px !important;
    vertical-align: top !important;
}

.ReadOnlyViewEditorField {
    font-size: 1.1em !important;
    overflow: auto !important;
    word-break: break-all !important;
}

.ReadOnlyViewDonotBreakTableRows {
    width: 100%;
    border-color: #4F81BD;
}

.ReadOnlyViewTableHeader {
    font-weight: bold;
    font-size: 10px;
    background-color: #D3DFEE;
}

.SendLetterTextboxes {
    width: 200px;
}

.SendLetterSignatureBlockTextContainer {
    overflow: auto;
    border: solid 1px #7f9db9;
    padding: 2px;
    color: #444;
    width: 300px;
    height: 100px;
    font-size: 1.0em !important;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif !important;
    font-weight: normal;
    background-color: #F0F0F0;
}

.editLetterIcon {
    margin-left: 3px;
    cursor: pointer;
}

/*Jquery Ui Tab gives its tab below Ids */
#ui-tabs-1 /* Very first tab On Home Page ('Report Management' Tab at this stage) */ {
    /*This is neccessary to do as, for some reason, the page populates 'Reports' term (On Report Management tab) one line below than it should and I couldn't figure out why */
    padding-top: 0px !important;
    margin-top: -20px !important;
}

#ui-tabs-2 /* Second tab On Home Page ('Obligation Management' Tab in this case) */ {
    padding-top: 0px !important;
    margin-top: 0px !important; /* It's 0px here and not -20px like in '#ui-tabs-1' */
}

.administration-fieldset {
    margin: 0px;
    font-size: 0.8em;
}

#BulkEmailDetailsTable {
    font-size: x-small !important;
}

    #BulkEmailDetailsTable td.firstColumn {
        width: 100px;
    }

    #BulkEmailDetailsTable select {
        width: 205px;
    }

#BulkLetterCreationDetailsTable {
    font-size: x-small !important;
}

    #BulkLetterCreationDetailsTable td.firstColumn {
        width: 100px;
    }

    #BulkLetterCreationDetailsTable select {
        width: 205px;
    }

    #BulkLetterCreationDetailsTable input[type="text"] {
        width: 179px;
    }

#AuthorSearchTable {
    font-size: x-small !important;
}

    #AuthorSearchTable input[type="text"] {
        width: 179px;
    }

#AuthorTable td.firstColumn {
    width: 130px;
}

#AuthorTable input[type="text"] {
    width: 150px;
}

#CompanySearchTable {
    font-size: x-small !important;
}

    #CompanySearchTable input[type="text"] {
        width: 179px;
    }

#CompanyTable td.firstColumn {
    width: 190px;
}

#CompanyTable input[type="text"] {
    width: 250px;
}

#CompanyTable input[type="button"] {
    width: 65px;
    height: 25px;
}

#KeywordSearchTable {
    font-size: x-small !important;
}

    #KeywordSearchTable input[type="text"] {
        width: 179px;
    }

#KeywordTable td.firstColumn {
    width: 130px;
}

#KeywordTable input[type="text"] {
    width: 150px;
}

#TargetCommoditySearchTable {
    font-size: x-small !important;
}

    #TargetCommoditySearchTable input[type="text"] {
        width: 179px;
    }

#TargetCommodityTable td.firstColumn {
    width: 200px;
}

#TargetCommodityTable input[type="text"] {
    width: 150px;
}

#UserSearchTable {
    font-size: x-small !important;
}

    #UserSearchTable input[type="text"] {
        width: 179px;
    }

#UserTable td.firstColumn {
    width: 130px;
}

#UserTable select {
    width: 130px;
}

#UnlockReportTable {
    padding-left: 30px;
}

    #UnlockReportTable td.firstColumn {
        width: 70px;
    }

    #UnlockReportTable input[type="text"] {
        width: 100px;
    }

#ReportAttachmentSearchTable {
    font-size: x-small !important;
}

    #ReportAttachmentSearchTable input[type="text"] {
        width: 115px;
    }

#LetterTemplateSearchTable {
font-size: x-small !important;
}

#LetterTemplateSearchTable input[type="text"] {
    width: 179px;
}

#LetterTemplateTable td.firstColumn {
    width: 160px;
}

#LetterTemplateTable input[type="text"] {
    width: 150px;
}

.actionReportAttachmentIcon {
    margin-left: 3px;
    cursor: pointer;
}

.publishIcon {
    margin-left: 3px;
    cursor: pointer;
}

.AnchorHead 
{
    cursor:default;
    color:Black;
}

.Head 
{
    border: solid 1px #b0b0b0;
    padding: 5px;
    background-color: #d0d0d0; 
    font-weight: bold;
    zoom: 1; /* force hasLayout flag for IE so click event will fire if clicking on a blank area of div */
}