@charset "UTF-8";
/* CSS Document */
/* module: emc, file: emc-main.css */

/* parent element's height must be defined to stretch vertically */
html, body { height: 100%; }

/* body overflow: visible allows popups like state code drop-down lists to pop a scrollbar onto the page.
   otherwise we try to keep scrollbars on the pageContainer child containers only. */
body { margin: 4px; background: #bed9eb url('/static/themes/shuttle/default/envelope_bg.gif') repeat-x left top;
    overflow: visible; }

a { text-decoration: none; color: #1a74b0; }
a:hover { text-decoration: underline; }

/**
 * Page layout consists of the following named areas:
 * 1. Header: Three-column fixed/fluid/fixed header layout for logo, login area, top-level actions, and
 *    current user, date, and time display.
 * 2. Title/Context: Horizontal bar for current view's title and a search field, stacked on top of another
 *    horizontal bar for hierarchical location in the application and page-level actions.
 *    The title/context bar styles are defined for all modules in /static/css/layout-defaults.css.
 * 3. Main Content: Anything the module wants to display.  Typically a sidebar and content area.
 * 4. Footer.
 *
 * This file contains the defaults for these areas.  Individual modules should override those defaults
 * for their own purposes.

Page layout is with div's like the following diagram.  header-frame wraps header.

 -----------------------------------------------------------------------------------------------  __
 |                   |        login bar / logged in site name           | home / current user  |    \
 |      logo         |--------------------------------------------------| current date/time    |     \ header
 |                   |        top actions (modules)                     |                      |     /
 |                   |                                                  |                      |  __/
 -----------------------------------------------------------------------------------------------  __
 | active view's title                                                    search/tool bar      |    \
 -----------------------------------------------------------------------------------------------     \ page
 | breadcrumb bar                                                              tags bar        |  __/
 -----------------------------------------------------------------------------------------------  __
 | main content pane                 |                 fly-out message area                    |    \
 |                                   ----------------------------------------------------------|     \
 |                                                                                             |      \
 |                                                                                             |       content
 |                                                                                             |      /
 |                                                                                             |     /
 |                                                                                             |  __/
 -----------------------------------------------------------------------------------------------  __
 | footer                           record navigation                                          |    \  footer
 -----------------------------------------------------------------------------------------------  __/

*/

/**********************
 * Page Header Styles
 */

#header-frame { display: block; width: 100%; height: 65px; background: #FF8400 url('/static/themes/emc/default/orange-header-bg.png') repeat-x left top;
/*alternate: background: #f9c964;*/
}
    /* Left/right header frame images must fill their corners with the page background color because the
    header-frame background extends full width. */
    #header-frame-left { float: left; width: 14px; height: 65px;
        background: transparent url('/static/themes/emc/default/orange-header-left.png') no-repeat left top;
    }
    #header-frame-left:after { content: "."; visibility: hidden; }
    #header-frame-right { float: right; width: 14px; height: 65px;
        background: transparent url('/static/themes/emc/default/orange-header-right.png') no-repeat right top;
    }
    #header-frame-right:after { content: "."; visibility: hidden; }

    #header { float: left; height: 65px; margin: 0; padding: 0;
        /* don't wrap the header */ overflow: hidden; }

        /* Left side of header is intended for a logo */
        #header-left { float: left; padding: 0 0 0 5px; height: 100%; }
            #header-left img { padding-top: 8px; }

        /* Middle of header is intended for small login form or tab buttons for the content pane*/
        #header-middle { float: left; height: 100%; padding-left: 35px; }
            #login-bar { font-size: 8pt; padding-top: 4px; height: 35px;}
            #login-bar label { padding-left: 5px; padding-right: 2px; }
            #login-bar>#loginForm>input { font-size: 9pt; }
            #login-name-display { font-size: 12pt; font-weight: bold; padding-top: 2px;}

        /* Right of header is intended for buttons and display items like user, date/time */
        #header-right { position: absolute; right: 0; height: 65px; }
            #header-actions { margin-top: 9px; }
            #header-actions.buttons a { border-width: 2px 2px 0 2px; border-color: #220000; border-style: solid;
                font-size: 10pt; color: #000; background-color: #ff8400;/*#7979f4;*/ text-decoration: none; padding: 5px 10px 5px 10px; }
            #header-actions.buttons a:hover { color: #fff; background-color: #E9A12E;/*#6060ff;*/ text-decoration: underline; }
            #header-actions.buttons a.activeHeaderButton { color: #fff; background: #336699; }

            /* quick links and current time/user block */
            #quick-links { float: right; font-size: 9pt; padding-top: 2px; padding-right: 20px; }

            ul#top-links { list-style: none; padding: 0; margin: 0; }
            ul#top-links li { display: inline; padding-left: 7px; padding-right: 3px;
                background: transparent url('/static/images/black-dot.gif') repeat-y 0 10px;
                border-width: 0 0 1px 0; border-color: #000; border-style: solid; }
            ul#top-links a:link, ul#top-links a:visited { color: #000; text-decoration: none; }
            ul#top-links a:hover { color: #009; text-decoration: underline; }

            #current-datetime { color: #444; padding: 2px; }
            #current-datetime img { vertical-align: text-bottom; }


/****************************
 * Main Content Area Styles
 */

#appNode { right: 0; bottom: 0; }

.topbar-menu-button-holder {
	width: 42px;
	height: 41px;
	display: inline-block;
	float: left;
}
.topbar-menu-button {
	background: transparent url('/static/images/buttons/menu-icon-white.png') no-repeat top left;
	border: solid #4479c8 1px;
	width: 22px;
	height: 22px;
	margin-left: 6px;
	margin-top: 5px;
	display: inline-block;
	cursor: pointer;
}

#sidebar-slideout {
	display: none;
	border: solid 2px #c3c3c3;
	background-color: #ffffff;
	padding: 5px;
	position: absolute;
	left: 0; top: 36px;
	z-index: 99;
}

#sidebarContainer { width: 470px; height: auto; padding: 5px; }
    /** Override #sidebar to remove top border and ensure our background-color is set. */
    #sidebar {
        position: relative; background-color: #fff; border: none;
        width: 470px; height: auto;
        overflow: auto;
        -webkit-box-shadow: none; box-shadow: none;
    }
    #sidebar ul li {
        border-width: 1px; border-style: solid; border-color: #fff;
        height: 19px; cursor: pointer;
    }
    #sidebar li:hover {
        border: 1px solid #99a;
        border-radius: 5px;
    }
    #sidebar li.selected { font-weight: normal; background-color: #bbb; }
    #sidebar ul li a { width: 190px; }
    #sidebar ul li a:hover { font-weight: normal; }
    #sidebar ul li.selected a:hover { font-weight: normal; background-color: #bbb; }

/* Content page wrapper.  Positions the content area including any title bar or footer.  Overflow is not shown, so
either body or child containers must handle scrolling. */
#mainContainer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; }
    #mainContainer div.column_first { float: left; width: 150px; }
    #mainContainer div.column_spacer { float: left; width: 15px; }
    #mainContainer div.column_second { float: left; width: 600px; background-color: #fff; padding: 5px;
        border: 1px solid #9fa0c2;
        border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; }
    #mainContainer div.column_third { float: left; width: 200px; }

/* pageContainer positions where content panes will show and what size they are (flush to browser window.
The child containers (contentPane and appletContainer) can then fill this space and provide scrolling so
that only the content pane is scrollable and any title bar or footer areas are always visible.  This
basically just positions like mainContainer does.  Note however that this approach does prevent standard keys
from scrolling this area until it is clicked in. */
#mainContainer #pageContainer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
/* it is important to have overflow:auto here and on the body element, but note that dijit TabContainers
 that contain wide content will push out and not calculate their width correctly.  an easy solution is to
 add a margin to the specific TabContainer that does that, as not all will have the problem. */
#mainContainer #contentPaneHolder { position: relative; /*right: 0; bottom: 0;*/ width: 100%; height: 95%; overflow: visible; padding: 0; }
#mainContainer #contentPane { position: relative; right: 0; bottom: 0; width: 100%; height: 100%; overflow: auto; padding: 4px; }
/* default padding for dojox ContentPanes is 8px; make applet fill the area with no padding.  also, no scrollbars. */
#mainContainer #appletContainer { position: relative; right: 0; bottom: 0; padding: 0; overflow: visible; }

/* Sub-level navigation styles (tabs in main content area) */
div.subnav { height: 22px; display: block; padding-top: 4px; border-width: 0 0 1px 0; border-color: #bbb; border-style: solid; }

ul#submenu { list-style: none; margin: 0; font-size: 12px; }
ul#submenu li { display: inline; line-height: 22px; margin: 0 15px 0 5px; width: 50px; }
ul#submenu a:link, ul#submenu a:visited { padding: 3px 15px 3px 15px; font-weight: bold; background-color: #eee;
    border-width: 1px; border-color: #222; border-style: solid; border-bottom: 0; text-decoration: none; }
ul#submenu a:hover { background-color: #fff; text-decoration: underline; }

/**********************
 * Page Footer Styles
 */

#footer { clear: both; text-align: center; margin: 0; padding: 20px;
    /*border: 1px solid #0F1923;*/ color: #999999; font-size: 80%; }

#footer table { border-width: 0; empty-cells: show; border-spacing: 10px; }

#footer table td { padding-top: 10px; padding-bottom: 10px; vertical-align: top; text-align: center;
    empty-cells: show; border-width: 0; background-color: #fbfbfb;
    border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; }

#footer a:link, #footer a:visited { font-size: 12px; font-weight: bold; color: #999; }

#PoweredBy { float: left; width: 30%; height: 9ex; margin: 0; padding: 0; }

/** End Page Footer Styles **/