﻿/* Generic CSS */
body {
    background-color: #E7E9EF;
    background: url("/images/grid_noise.png") repeat scroll 0% 0% #E7E9EF;
    font-size: .80em;
    font-family: Arial;
    margin: 0px;
    padding: 0px;
    color: Black;
}

.bgcolorWhite {
    background-color: White;
}

.hrgrey {
    /*width: 990px;*/
    /*margin-left: -12px;*/
    background-color: #eeeeee;
    color: #eeeeee;
}

input, select, textarea {
    font-family: Arial;
    font-size: 1em;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

a:active, a:focus {
    outline-style: none;
}

img {
    border: none;
}

.gvColumnPadding {
    padding: 2px;
}

/*Custom scrollbars*/
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-button {
    width: 8px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border: thin solid gray;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #7d7d7d;
    }
/*mozilla*/
::-moz-scrollbar {
    width: 8px;
}

::-moz-scrollbar-button {
    width: 8px;
    height: 5px;
}

::-moz-scrollbar-track {
    background: #eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius: 10px;
}

::-moz-scrollbar-thumb {
    background: #999;
    border: thin solid gray;
    border-radius: 10px;
}

    ::-moz-scrollbar-thumb:hover {
        background: #7d7d7d;
    }
/*Custom scrollbar end*/
/***********************/

/* Modal Popup */
.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    color: Black;
    background-color: #E7E9EF;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 20px 10px;
    min-width: 400px;
    min-height: 100px;
}

.popupControl {
    background-color: #AAD4FF;
    position: absolute;
    visibility: hidden;
    border-style: solid;
    border-color: Black;
    border-width: 2px;
}

.modalButton {
    font-size: small;
}
/************************/

/* Top Bar */
.topBar {
    width: 1200px;
    height: 110px;
    z-index: 1;
    background-color: #1F3051;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4b608b), color-stop(100%, #1f3051));
    background: -webkit-linear-gradient(#4b608b, #1f3051);
    background: -moz-linear-gradient(#4b608b, #1f3051);
    background: -ms-linear-gradient(#4b608b, #1f3051);
    background: linear-gradient(#4b608b, #1f3051);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b608b', endColorstr='#1f3051',GradientType=0 );
    color: White;
}

.tchLogoImageContainer {
    text-align: center;
    padding-left: 20px;
}

.tchLogoImage {
    border: none;
}

.topbarTitle {
    font-size: x-large;
    font-weight: bold;
    color: White;
    text-align: center;
    vertical-align: middle;
    padding-right: 75px;
}

.topbarTitleLogin {
    font-size: x-large;
    font-weight: bold;
    color: White;
    text-align: center;
    vertical-align: middle;
}

.help a {
    color: White;
    margin-right: 10px;
    text-decoration: none;
}

.help {
    font-size: small;
    text-align: right;
    padding-bottom: 25px;
}

.logout {
    font-size: small;
    text-align: right;
}

.logoutButton {
    color: White;
    margin-right: 10px;
    text-decoration: none;
}

/* Form top Bar */
.topBarForm {
    background-color: #1F3051;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4b608b), color-stop(100%, #1f3051));
    background: -webkit-linear-gradient(#4b608b, #1f3051);
    background: -moz-linear-gradient(#4b608b, #1f3051);
    background: -ms-linear-gradient(#4b608b, #1f3051);
    background: linear-gradient(#4b608b, #1f3051);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b608b', endColorstr='#1f3051',GradientType=0 );
    color: White;
    font-size: medium;
    font-family: Arial;
    font-weight: bold;
    color: White;
    text-align: left;
    height: 25px;
}

    .topBarForm td {
        padding-left: 10px;
    }

/* Left Menu */
.leftMenuPanel {
    width: 190px;
    min-height: 600px;
    background: #1F3051;
    background: -moz-linear-gradient(left, #35486E 0%, #1F3051 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#35486E), color-stop(100%,#1F3051));
    background: -webkit-linear-gradient(left, #35486E 0%,#1F3051 100%);
    background: -ms-linear-gradient(left, #35486E 0%,#1F3051 100%);
    background: linear-gradient(to right, #35486E 0%,#1F3051 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b608b', endColorstr='#1f3051',GradientType=1 );
    color: White;
    position: relative;
}

.nodeStyle {
    color: White;
    font-weight: normal;
    padding: 5px 0px 5px 0px;
}

.hoverNodeStyle {
    color: White;
    border: 1px dashed #FFFF00;
    font-size: Small;
}

.parentNodeStyle {
    color: White;
    font-weight: normal;
    font-size: Small;
    padding: 5px 0px 5px 0px;
}

.rootNodeStyle {
    color: White;
    font-weight: bold;
    font-size: Small;
    padding: 15px 0px 10px 0px;
}

.leafNodeStyle {
    color: White;
    font-weight: normal;
    font-size: Small;
    padding: 5px 0px;
}

.selectedNodeStyle {
    color: White;
    font-weight: bold;
    font-style: italic;
    font-size: Small;
    border: 1px solid #FFFF00;
}

/* Main Form */
.mainForm {
    min-height: 600px;
    width: 1025px;
    background-color: #FFFFFF;
}

/* Tables within form */
.mainTable {
    width: 960px;
}

.mainTable900 {
    width: 900px;
}

.tableSurgerySelfReporting {
    width: 960px;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 15px;
}

    .tableSurgerySelfReporting tr {
        vertical-align: top;
        text-align: left;
    }

    .tableSurgerySelfReporting > tbody > tr > td, .tableSurgerySelfReporting > tbody > tr > th {
        padding-top: 5px;
        border-spacing: 0px;
    }

.tableSurgerySelfReportingInner {
    width: 955px;
    margin-left: 4px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .tableSurgerySelfReportingInner tr {
        vertical-align: top;
    }

    .tableSurgerySelfReportingInner > tbody > tr > td, .tableSurgerySelfReportingInner > tbody > tr > th {
        padding: 3px;
        border-spacing: 0px;
    }

.divSurgerySelfReporting {
    width: 950px;
    margin-top: 5px;
}

.divSurgerySelfReportingFullWidth {
    width: 1025px;
    margin-top: 5px;
}

.divSurgerySelfReporting990 {
    width: 990px;
    margin-top: 5px;
}

.fieldsetSurgerySelfReporting legend {
    font-weight: bold;
    color: Black;
    padding: 5px;
    margin-left: 5px;
}

.fieldsetSurgerySelfReportingFullWidth {
    width: 990px;
    padding: 5px 0px 5px 0px;
    border: 1px solid Silver;
    border-radius: 10px;
    /*margin-left: 5px;*/
    margin-bottom: 5px;
}

.fieldsetSurgerySelfReportingAccordianGrantPages {
    width: 975px;
    padding: 5px 0px 5px 0px;
    border: 1px solid Silver;
    border-radius: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
}

    .fieldsetSurgerySelfReportingAccordianGrantPages legend {
        font-weight: bold;
        color: Black;
        padding: 5px;
        margin-left: 5px;
    }

.fieldsetSurgerySelfReportingAccordian {
    width: 970px;
    padding: 5px 0px 5px 0px;
    border: 1px solid Silver;
    border-radius: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
}

    .fieldsetSurgerySelfReportingAccordian legend {
        font-weight: bold;
        color: Black;
        padding: 5px;
        margin-left: 5px;
    }

.fieldsetSurgerySelfReporting {
    width: 980px;
    padding: 5px 0px 5px 0px;
    border: 1px solid Silver;
    border-radius: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
}

    .fieldsetSurgerySelfReporting legend {
        font-weight: bold;
        color: Black;
        padding: 5px;
        margin-left: 5px;
    }



.tablePadding {
    width: 10px;
    padding: 0px;
}

/* Bottom Bar */
.bottomBar {
    height: 80px;
    z-index: 1;
    background-color: #F4F4F4;
    color: White;
}
/* Menu logo */
.menuLogoContainer {
    margin: 5px 5px 5px 5px;
    /*bottom: 20px;
    
    position: absolute;  */
}

.adminPortalListDiv {
    width: 600px;
    margin: 10px auto 25px auto;
}

.changePasswordDiv {
    width: 600px;
    margin: auto auto 25px auto;
}
/* Common classes */
.hidden {
    display: none;
}

.disabled {
    background-color: #FFFFDF;
}

.alternateBackground {
    background-color: #E7E9EF !important;
}

.highlightField {
    border: 1px solid red;
    padding-right: 2px;
}

.linkButton {
    background-color: #1F3051;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4b608b), color-stop(100%, #1f3051));
    background: -webkit-linear-gradient(#4b608b, #1f3051);
    background: -moz-linear-gradient(#4b608b, #1f3051);
    background: -ms-linear-gradient(#4b608b, #1f3051);
    background: linear-gradient(#4b608b, #1f3051);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b608b', endColorstr='#1f3051',GradientType=0 );
    color: White;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-style: outset;
    border-width: 1px;
    padding: 2px;
    border-radius: 5px;
    display: inline-block;
    min-width: 50px;
}

/* For CTMS Admin pages */

.readOnly {
    /* background-color: #FFFFDF */
    background-color: #EEEEEE;
}

/* Timeout */
.timeoutButton {
    background-color: Orange;
    color: Blue;
    font-weight: bold;
}
/* End of Timeout */

/* Table Alignment Styles */
.right {
    text-align: right;
}

.left {
    text-align: left;
}

.top {
    vertical-align: top;
    vertical-align: text-top;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.medium {
    font-size: medium;
}

.large {
    font-size: large;
}

.tableLayoutFixed, fixedTable {
    table-layout: fixed;
}

.verticalAlignTop {
    vertical-align: top;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

.verticalAlignMiddle {
    vertical-align: middle;
}

.verticalAlignCenter {
    vertical-align: central;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginLeft25 {
    margin-left: 25px;
}

.marginLeft100 {
    margin-left: 100px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

/* End of Table Alignment Styles */

/*Styles specific to SurgerySelfReporting*/

.defaultDiv {
    width: 100%;
    vertical-align: central;
}

.medium {
    font-size: medium;
}

.small {
    font-size: small;
}

.contactDiv {
    font-size: small;
}

.mainPanelColumn {
    text-align: left;
    vertical-align: top;
    padding: 10px 0px 0px 0px;
}

.leftPanelColumn {
    width: 190px;
    text-align: left;
    vertical-align: top;
    padding: 10px 0px 0px 0px;
}

.textBox60 {
    width: 60px;
}

.textBox70 {
    width: 70px;
}

.textBox80 {
    width: 80px;
}

.textBox100 {
    width: 100px;
}

.textBox120 {
    width: 120px;
}

.textBox {
    width: 140px;
}

.textBox160 {
    width: 160px;
}

.textBox180 {
    width: 180px;
}

.textBox200 {
    width: 200px;
}

.textBox230 {
    width: 230px;
}

.textBox245 {
    width: 245px;
}

.textBox260 {
    width: 260px;
}

.textBox280 {
    width: 280px;
}

.textBox300 {
    width: 300px;
}

.textBox330 {
    width: 330px;
}

.textBox420 {
    width: 420px;
}

.textBox460 {
    width: 460px;
}

.textBox480 {
    width: 480px;
}

.textBox690 {
    width: 690px;
}

.textBox780 {
    width: 780px;
}

.textBox810 {
    width: 810px;
}

.textBox835 {
    width: 835px;
}

.textBox840 {
    width: 840px;
}

.dropDownList55 {
    width: 55px;
}

.dropDownList90 {
    width: 90px;
}

.dropDownList105 {
    width: 105px;
}

.dropDownList125 {
    width: 125px;
}

.dropDownList {
    width: 145px;
}

.dropDownList160 {
    width: 160px;
}

.dropDownList180 {
    width: 180px;
}

.dropDownList185 {
    width: 185px;
}

.dropDownList205 {
    width: 205px;
}

.dropDownList210 {
    width: 210px;
}

.dropDownList230 {
    width: 230px;
}

.dropDownList240 {
    width: 240px;
}

.dropDownList250 {
    width: 250px;
}

.dropDownList255 {
    width: 255px;
}

.dropDownList300 {
    width: 300px;
}

.dropDownList340 {
    width: 340px;
}

.dropDownList405 {
    width: 405px;
}

.dropDownList465 {
    width: 465px;
}

.validationFont {
    font-size: x-small;
    color: Red;
}

.fullWidth {
    width: 100%;
}

.gridView, .gridView table, .gridView td, .gridView th {
    border-style: none;
}

.spacedTable td {
    padding: 3px 1px;
}

.headerButton {
    color: White;
    margin-right: 10px;
    text-decoration: none;
}

/* General Styles */
.requiredField {
    font-size: xx-small;
    color: Red;
    text-align: left;
}

.noteField {
    font-size: xx-small;
    color: Black;
    text-align: left;
    font-style: italic;
}
/* General Styles */

.searchButton, .defaultButton, .personnelButton, .protocolButton, .uploadButton, .sopButton, .submissionButton, .messageModalButton, .safetyreportButton {
    background-color: #1F3051;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4b608b), color-stop(100%, #1f3051));
    background: -webkit-linear-gradient(#4b608b, #1f3051);
    background: -moz-linear-gradient(#4b608b, #1f3051);
    background: -ms-linear-gradient(#4b608b, #1f3051);
    background: linear-gradient(#4b608b, #1f3051);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b608b', endColorstr='#1f3051',GradientType=0 );
    color: White !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px;
    border-radius: 5px;
    display: inline-block;
    min-width: 50px;
}

.hyperLink {
    color: blue !important;
}

.wrap {
    word-wrap: break-word;
}

.noPaddingTable, .noPaddingTable table, .noPaddingTable td, .noPaddingTable th {
    padding: 2px;
    margin: 0px;
}

.inline {
    display: inline;
}

.inlineBlock {
    display: inline-block;
}

.floatLeft {
    float: left;
}

.marginTop3 {
    margin-top: 3px;
}

/* Logo Panel */
.logoPanel {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.logoImage {
    border-style: none;
}
/* Logo Panel */

/* Orientation styles - Start */
.orientationDiv {
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
    padding-top: 10px;
    text-align: left;
}

.orientationParentDiv {
    position: relative;
}

.orientationNavigationDiv {
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    bottom: 0px;
    position: absolute;
}

.orientationTable {
    table-layout: fixed;
    padding: 10px;
    width: 100%;
}

    .orientationTable td {
        padding: 5px;
        border-spacing: 0px;
    }

.navigationLine {
    background-color: #DCDCDC;
    height: 1px;
    border: none;
}

.orientationParentDiv a:link, .orientationParentDiv a:visited, .orientationParentDiv a:hover, .orientationParentDiv a:active {
    color: blue;
}
/* Orientation styles - End */

/* Collapsible */
.ui-collapsible-content {
    border-style: none;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}

.ui-collapsible-content {
    border-style: none;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
    font-size: small !important;
    font-weight: normal;
}

.ui-collapsible-active {
    border-style: none;
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}

.ui-collapsible-default {
    border-style: none;
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

.ui-collapsible {
    width: 100%;
}

    .ui-collapsible .ui-collapsible-header {
        cursor: pointer;
        position: relative;
        margin-top: 1px;
        zoom: 1;
    }

    .ui-collapsible .ui-collapsible-header-active {
        border-bottom: 0 !important;
    }

    .ui-collapsible .ui-collapsible-header a {
        display: block;
        font-size: small;
        font-weight: normal;
        padding: 0.2em .5em 0.2em .7em;
    }

    .ui-collapsible .ui-collapsible-header a {
        text-decoration: none;
    }

.ui-collapsible-active a {
    color: #585757;
}

.ui-collapsible-default a {
    color: Blue;
}

.ui-collapsible-icons .ui-collapsible-header a {
    padding-left: 2.2em;
}

.ui-collapsible .ui-collapsible-header .ui-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}

.ui-collapsible .ui-collapsible-content {
    padding: 0.2em 2.2em;
    border-top: 0;
    margin-top: -2px;
    position: relative;
    top: 1px;
    margin-bottom: 2px;
    overflow: auto;
    display: none;
    zoom: 1;
}

.ui-collapsible .ui-collapsible-content-active {
    display: block;
}
/* Collapsible*/

.borderCollapse {
    border-collapse: collapse;
}

.fixedTable {
    table-layout: fixed;
}

.timestampTable {
    width: 960px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.emptyTemplateLabel {
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.xsmall {
    font-size: x-small;
}

.applicationGridView {
    border-collapse: collapse;
    width: 970px;
    margin-left: 10px;
}

    .applicationGridView table {
        border-style: none;
    }

    .applicationGridView td, .applicationGridView th {
        border: 1px solid Silver;
        padding: 5px;
    }

.groupBackground {
    background-color: #E7E9EF;
}

.gridviewList {
    border-collapse: collapse;
    margin-left: 5px;
}

    .gridviewList table {
        border-style: none;
    }

    .gridviewList td, .gridviewList th {
        border: 1px solid gray;
        padding: 5px;
    }

.borderedGridView {
    border-collapse: collapse;
    width: 960px;
    margin-left: 15px;
    font: 1.0em Tahoma, Arial, Sans-Serif;
}

    .borderedGridView table {
        border-style: none;
    }

    .borderedGridView td, .borderedGridView th {
        border: 1px solid Silver;
        padding: 5px;
    }


.highlightField {
    border: 1px solid red;
    padding-right: 2px;
}

.normal {
    font-weight: normal;
}

.GridViewBorderWhite {
    border-style: none;
    border-color: none;
    border-collapse: collapse;
    border-width: 0px;
}

    .GridViewBorderWhite table {
        border-style: none;
        border-color: none;
        border-collapse: collapse;
        border-width: 0px;
    }

    .GridViewBorderWhite td, .GridViewBorderWhite th {
        border-style: none;
        border-color: none;
        border-collapse: collapse;
        border-width: 0px;
    }

.checkBoxListTable {
    width: 100%;
}

    .checkBoxListTable td {
        vertical-align: top;
    }

.checkBoxListTableWrap input {
    float: left;
    vertical-align: middle;
}

.checkBoxListTableWrap label {
    margin-left: 25px;
    display: block;
}

.checkBoxListTableFlowLayout label {
    padding-right: 12px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.displayGridView td, .displayGridView th {
    border: 1px solid #C0C0C0;
    padding: 5px;
    vertical-align: top;
}

.displayGridView > tbody > tr > th > a {
    color: #004EEF !important;
}

.labelFont {
    font-size: small;
    font-family: Arial;
    color: #234889;
}

.labelgrey {
    display: inline-block;
    background-color: #eeeeee;
    width: 1000px;
    min-height: 55px;
    border: thin solid #eeeeee;
}

.labelgrey330 {
    display: inline-block;
    background-color: #eeeeee;
    width: 330px;
    min-height: 55px;
    border: thin solid #eeeeee;
}

.labelgrey340 {
    display: inline-block;
    background-color: #eeeeee;
    width: 340px;
    min-height: 55px;
    border: thin solid #eeeeee;
}

.labelBorder {
    display: inline-block;
    padding: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-collapse: collapse;
    min-height: 15px;
}

.checkBoxListWrap {
    width: 100%;
}

    .checkBoxListWrap tr {
        height: 30px;
    }

    .checkBoxListWrap input[type='checkbox'] {
        vertical-align: top;
        padding: 0px;
        margin: 1px 0px 0px 5px;
    }

    .checkBoxListWrap label {
        margin-left: 0px;
        display: inline-block;
        vertical-align: top;
        padding: 0px 10px 5px 10px;
        max-width: 90%;
    }

.successMessage {
    color: #21ae21;
}

.colorGrey {
    color: lightgrey;
}

.colorGreen {
    color: green;
}

.spanInline {
    display: inline;
}

.helpLink { 
    height: 16px; 
    width: 16px; 
    border-radius: 8px; 
    display: inline-block; 
    text-align: center !important; 
    color: white !important; 
    font-size: small !important; 
    font-weight: bold !important; 
    background-color: #A9A9A9 !important; 
}