/*************************************************/
/* MASTER LAYOUT STYLES                          */
/*************************************************/
html, form {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    /*font-size: 12px;*/
    font-size: 14px;
    line-height: 1.4em;
    FONT-FAMILY: "Segoe UI", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    /*height: 100%;*/
}

/* Outer page container */
.pageContainer {
    width: 100%;
    height: 100%;
}

/* Top container */
.pageTop {
    position: fixed;
    top: 0px;
    left: 50px;
    height: 40px;
    /*width: 100%;*/
    right: 0px;
    /*z-index: 200;*/
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    background-color: #25a0da;
}

.pageTopContentPanel {
    display: block;
}

.pageTopContentPanelRow {
    display: block;
}

.pageTopAppTitleCell {
    display: block;
    FONT-SIZE: 18px;
    font-weight: bold;
    color: white;
}

.pageTopAppSubTitleCell {
    display: table-cell;
    FONT-SIZE: 14px;
    /*font-weight: bold;*/
    color: white;
}

/* Top language selection */
.pageTopLanguage {
    position: fixed;
    top: 42px;
    left: 10px;
    z-index: 200;
    display: none; /* we need to move this to the login page and hide it for now */
}
.pageTopLanguage .RadComboBox_Metro .rcbInputCell, 
.pageTopLanguage .RadComboBox_Metro .rcbReadOnly, 
.pageTopLanguage .RadComboBox_Metro .rcbArrowCell {
    background-color: transparent !important;
    background: none;
    background-position: -159px -88px !important;
}
.pageTopLanguage .RadComboBox_Metro .rcbInput {
    color: white !important;
    font-weight: normal;
}


/* Top logotype */
.pageTopLogo {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
}

.pageTopLogoContentPanel {
    display: table;
}

.pageTopLogoContentPanelRow {
    display: table-row;
}

.pageTopLogoButtonsCell {
    display: table-cell;
    vertical-align: top;
    padding-top: 8px;
    padding-right: 5px;
}

.pageTopLogoFirstButtonCell {
    display: table-cell;
}

.pageTopLogoAdditionalButtonCell {
    display: table-cell;
    padding-left: 10px;
}

.pageTopLogoLogoCell {
    /*display: table-cell;*/
    display: none;
    /*padding-left: 20px;*/
}

.pageTopMenu {
    position: fixed;
    /*top: 40px;*/
    top: 0px;
    left: 0px;
    height: 40px;
    width: 50px;
    z-index: 201;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    background-color: #25a0da;
}

.pageContent {
    position: absolute;
    /*top: 70px;*/
    top: 60px;
    left: 0px;
    bottom: 2px;
    /*right: 2px;*/
    right: 0px;
}

.pageOneColumn {
}

.pageCenteredContent {
    position: absolute;
    top: 0px;
    bottom: 2px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

/* Main menu background */
.RadMenu_Metro .rmRootGroup {
    color: white !important;
    background: transparent !important;
}
.RadMenu_Metro .rmRootToggle {
    color: white !important;
    background: transparent !important;
    border-color: transparent !important;
}
.RadMenu_Metro .rmRootToggle:active,
.RadMenu_Metro .rmRootToggle.rmExpanded {
    border-color: white !important;
}

/* Assists in fixing autoheight for dropdown portion of menu */
html .RadMenuPopup_Metro .rmGroup {
    height: auto;
}

.RadMenuPopup .rmLink {
    font-size: larger !important;
    /*font-weight: bold !important;*/
}

.RadMenuPopup li.rmItem.rmParentItem {
    font-size: larger !important;
    /*font-weight: bold !important;*/
}
.RadMenuPopup li.rmItem.rmParentItem::before {
    font-size: 2em;
    /*font-weight: normal;*/
}


/* Modal pane (background) */
.modalPane {
    display: none;
    position: absolute;
    /*z-index: 200;*/
    z-index: 202;
    left: 0px;
    /*top: 0px;*/
    top: -60px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(255,255,255,0.4); /* White w/ opacity */
}

/* Modal pane content */
.modalPaneContent {
    background-color: white;
    border: 1px solid white;
    box-shadow: -30px 0px 30px -30px rgba(0,0,0,0.4);
    /*width: 50%;*/
    width: 100%; /* Could be more or less, depending on screen size */
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
}

/* Modal left pane (background) */
.modalLeftPane {
    display: none;
    position: absolute;
    z-index: 100;
    left: 0px;
    top: 40px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(255,255,255,0.4); /* White w/ opacity */
}

/* Modal left pane content */
.modalLeftPaneContent {
    background-color: white;
    border: 1px solid white;
    box-shadow: 30px 0px 30px -30px rgba(0,0,0,0.4);
    /*width: 30%;*/
    width: 100%; /* Could be more or less, depending on screen size */
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

/* Modal pane buttons */
.modalPaneButtonsPanel {
    float: right;
}
.modalPaneCloseButton,
.modalLeftPaneCloseButton,
.modalPaneResizeButton {
    color: white;
    float: right;
    font-size: 28px;
    margin: 3px;
}
.modalPaneCloseButton:hover, 
.modalLeftPaneCloseButton:hover, 
.modalPaneResizeButton:hover, 
.modalPaneCloseButton:focus, 
.modalLeftPaneCloseButton:focus, 
.modalPaneResizeButton:focus{
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}
.modalPaneResizeButton {
    display: none;
}