@charset "UTF-8";
/* CSS Document */
/* module: shuttle, file: shuttle-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; }

h2 { margin: .25em 0; font-weight: bold; }
h3 { margin: 1ex 0 0.5ex 0; padding: 0; font-weight: bold; color: #222; }
h4 { margin: 1ex 0 0.5ex 0; padding: 0; font-size: 1.03em; font-weight: 700; color: #555; }

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

.home-header { }
.home-header .logo { bottom: 15px; display: block; float: left; /*margin-top: 20px;*/ }
.home-header .logo img { border: none; }
.home-header li.menu_tab { position: relative; z-index: 1001;
    padding-left: 6px;	/* padding for left side image */
    background: url(/static/images/shuttle/menu/subnav_tab_corner.jpg) no-repeat left top; }
.home-header li.menu_tab span { position: relative; cursor: pointer;
    background: url(/static/images/shuttle/menu/subnav_tab.png) no-repeat right top; }

#watermark { position: absolute; left: 145px; top: 60%; width: 550px; height: 277px; z-index: -1; opacity: 0.8;
    background: transparent url(/static/themes/shuttle/default/shuttle-faded-bg.png) no-repeat 0 0; }

/****************************
 * 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 #contentPane { position: relative; /*right: 0; bottom: 0;*/ width: 100%; height: 100%; overflow: auto; }
/* 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; }

/** End Main Content Area Styles **/