table.vtop td {
    vertical-align: top;
}

/* Should be used to replace "cardHead" */
h5 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-style: none;
    border-top-width: 1px;
    height: 28px;
    vertical-align: middle;
    font-size: 18px;
    font-family: Segoe UI;
    border-bottom-color: #dddddd;
    color: #606060;
    margin: 0px;
    font-weight: normal;
    padding-top: 4px;
    padding-left: 2px;
}

/* Should be used to replace "subcardHead" */
h6 {
    border-bottom-color: #C4D2E4;
    border-top-color: #C4D2E4;
    background-color: #EAF3FF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-style: none;
    border-top-width: 1px;
    font-weight: bold;
    font-size: 12px;
    margin: 0px;
    padding: 2px;
}

/* 
    formLayout 
    Try to use this one instead of tables when possible
*/
.formLayout {
    padding: 5px;
}

.formLayout > div {
    display: inline-block;
    width: 150px;
    float: left;
    margin-bottom: 5px;
}

.formLayout > br {
    clear: left;
}

/* red and green labels in DetailsView controls */

.detail-good {
    background-color: Green;
    font-weight: bold;
    color: White;
}

.detail-bad {
    background-color: Red;
    font-weight: bold;
    color: White;
}

/* vertical alignment */
.valign-middle {
    vertical-align: middle;
}

/* listview */
.listview-row-image {
    background-position: 2px center;
    background-repeat: no-repeat;
    padding: 2px 2px 2px 20px;
}

.listview-row {
    background-position: 2px center;
    background-repeat: no-repeat;
    padding: 2px 2px 2px 2px;
}

/* datapager */
.datapager-button {
    vertical-align: middle;
}

.datapager-wrapper {
    margin: 2px;
    padding: 2px;
    text-align: center;
    background-color: #eeeeee;
}

/* alternating rows */
.row-odd {
    background-color: White;
}

.row-even {
    background-color: #E0F0FF;
}

/* instructions */
.instructions {
    max-width: 1100px;
    padding: 5px 5px 5px 50px;
    background-position: 5px 5px;
    background-repeat: no-repeat;
    background-image: url(../../images/instructions/info-small.png);
    margin: 5px;
    border: 3px solid #E0F0FF;
    font-style: italic;
    font-size: 1.2em;
    color: #3861aa;
    border-radius: 10px;
}

.instructions a {
    text-decoration: underline;
}

.instructions div {
    text-align: center;
}

.instructions img {
    display: block;
    box-shadow: 3px 3px 5px rgba(60, 60, 60, 0.5);
    border-collapse: separate; /* specify border-collapse, otherwise shadow will not be rendered properly if the element is inside a table */
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

.instructions ol li {
    margin-top: 1em;
}

.instructions ol img {
    margin-top: 0.5em;
    text-align: center;
}

.below-instructions {
    width: 500px;
}

/* modal popup */

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    background-color: White;
    padding: 5px 5px 5px 50px;
    background-position: 5px center;
    background-repeat: no-repeat;
    background-image: url(../../images/instructions/info-small.png);
    border-width: 3px;
    border-style: solid;
    border-color: #E0F0FF;
    width: 350px;
    font-size: 1.2em;
    color: #3861aa;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.shadow {
    box-shadow: 3px 3px 5px rgba(60, 60, 60, 0.5);
    border-collapse: separate; /* specify border-collapse, otherwise shadow will not be rendered properly if the element is inside a table */
}

.hidden {
    display: none;
}

ul.font-icons {
    padding-left: 0px;
    margin-left: 0px;
    list-style-type: none;
}

ul.font-icons li {
    margin-top: 5px;
    margin-bottom: 5px;
}

.triangle {
    padding-right: 5px;
    color: #84CA44;
}

.help {
    padding-right: 5px;
    color: #2565F6;
}

.help-info-box {
    border: 1px solid #2565F6;
    padding: 5px;
}

/* explanation panels */
.explainPanelWrapper {
    border: 1px solid #00529B;
}

.explainPanel {
    color: #00529B;
    background-color: white;
    padding: 3px;
    margin: 2px;
}

.explainPanelHeader {
    width: 100%;
    height: 30px;
    background-color: #BDE5F8;
    color: #00529B;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}

/* side padding */
.padSides {
    padding-left: 5px;
    padding-right: 5px;
}

/* a command in a prompt */
.command {
    font-size: 0.8em;
    font-style: normal;
    font-family: 'Courier New', monospace;
}

/* ----------------------------------------------------------------------------- 
                                  Home Page
----------------------------------------------------------------------------- */

@media only screen and (min-width: 601px) {

    #homeMenuWrapper {
        width: 100%;
        float: left;
        display: table;
    }

    #homeMenuContent {
        display: table-row;
    }

    #homeMenu1 {
        max-width: 33%;
        padding-left: 5px;
        margin: 0px;
        display: table-cell;
    }

    #homeMenu2, #homeMenu3 {
        max-width: 32%;
        padding-left: 5px;
        margin: 0px;
        border-left: 1px solid #DBDCE3;
        display: table-cell;
    }

}

@media only screen and (max-width: 600px) {
    #homeMenuWrapper {
    }
    #homeMenuContent {
    }
    #homeMenu1, #homeMenu2, #homeMenu3 {
    }
}

/* ----------------------------------------------------------------------------- 
                                    Help pages
----------------------------------------------------------------------------- */

img.help {
    box-shadow: 3px 3px 5px rgba(60, 60, 60, 0.5);
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.help {
    border: 1px solid black;
    border-collapse:collapse;
}

table.help td {
    border: 1px solid black;
}

table.help th {
    font-weight: bold;
}

/* ----------------------------------------------------------------------------- 
                                    resourceGrid
----------------------------------------------------------------------------- */

.certificatesGrid {
    border-bottom: 1px solid #eeeeee;
    padding-left: 3px;
}
.certificatesGrid:hover {
    background-color: #eeeeee;
}
.certificatesGridInvalidCertificate {
    color: red;
}
.certificatesGridContent {
    display: table-cell;
    width: 100%;
}
.certificatesGridDescription {
    color: gray;
    font-style: italic;
    font-size: 0.8em;
}
.certificatesGridDivClear {
    clear:both;
}

.certificatesGridTable tr th {
    padding: 0px;
}

/* generic paginator element */
.certificatesGridPagination {
    font-size: 90%;
    background: #EEEEEE;
}

/* paginator links */
.certificatesGridPagination a {
    padding-left: 3px;
    padding-right: 3px;
}

/* paginator current element */
.certificatesGridPagination span {
    padding-left: 3px;
    padding-right: 3px;
    background: White;
    color: Black;
    border: solid 1px Blue;
}
.certificatesGridSelectedRow {
    font-weight: bold;
}

@media only screen and (min-width: 601px) {
    .certificatesGridRight {
        width: 70px;
        float: right;
        display: table-cell;
        padding-left: 5px;
    }
    .certificatesGridClass {
        width: 140px; 
        float: left; 
        color: #999999;
        display: table-cell;
    }
}

@media only screen and (max-width: 600px) {
    .certificatesGridRight {
        width: 50px;
        float: right;
        display: table-cell;
        padding-left: 5px;
    }
    .certificatesGridClass {
        width: 90px; 
        float: left; 
        color: #999999;
        display: table-cell;
    }
}

.code {
    padding: 5px;
    background-color: #0066CC;
    color: white;
}

/* A table element that contains and positions the ComboBox's button and text box input elements. */
.HostComboBox .ajax__combobox_inputcontainer {
    width: 100%;
    top: 0px !important;
}

.HostComboBox .ajax__combobox_textboxcontainer {
    width: 100%;
    padding-right: 5px;
}

.HostComboBox .ajax__combobox_buttoncontainer button {
    background-color: rgb(77, 148, 204);
    border: 1px solid rgb(77, 148, 204);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: normal;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ----------------------------------------------------------------------------- 
                                    resourceGrid
----------------------------------------------------------------------------- */

.info-icon {
    color: #2565F6;
}

.on-icon {
    color: rgb(77, 148, 204);
}

.off-icon {
    color: #DBDCE3;
}