.main-body {
	min-height: 100%
}

.layout-wrapper {
	min-height: 100%;
    display: flex;
    flex-direction: column;
}

.layout-main {
	flex: 1 1 auto;
}

/*
 ====== TOP BAR ===========
*/

/*Pad the space previously occupied by the menu bar*/
.layout-wrapper.menu-layout-horizontal .layout-main {
	padding-top: 75px;
}

/*Pad the space previously occupied by the top bar menu*/
.layout-wrapper.menu-layout-horizontal .layout-main .route-bar {
	background-color: #f0f3f5;
	padding: 0px 0px 20px 0px;
}

/*Extends the topbarleft width for the logo and title to fit inside the panel*/
.layout-wrapper .topbar .topbar-left {
	width: 600px !important;
}

/*Sets the dimension of the topbar panel*/
.layout-wrapper .topbar .logo {
	width: 78px;
	height: 43px;
}

/*User Account menu icon size set*/
.topbar-icon {
	font-size: 24px !important;
}

/*Removed panel grid border*/
.ui-panelgrid td, .ui-panelgrid tr {
	border-style: none !important
}

/*Topbar width set to fit the CCEA logo*/
.layout-wrapper .topbar .logo {
}

@media ( max-width : 749px) {
.topbar-title {
	display: none;
}
}

/* Removes the box shadow from the top bar */
.layout-wrapper .topbar {
	box-shadow: 0px 0px 0px 0px !important;
}

/* Keeps the person icon in the same place irrespective of the screen size */
.layout-wrapper .topbar .topbar-right {
	padding: 9px 8px 15px 270px
}

/*Taken from the poseidon css layout. Duplicated and copied to change the topbar-items layout.
Ensures the person icon is shown on small screens*/
@media ( min-width : 50px) {
	.layout-wrapper .topbar .topbar-right .topbar-items {
		float: right;
		display: block;
		top: 0;
		right: 0;
		width: 50px;
		padding-top: 19px;
		background-color: transparent;
		box-shadow: 0px 0px 0px 0px !important;
	}
}

.topbar-series-button {
	float: right !important;
	margin:6px;
	margin-left: 12px;
}

/* Size of the menu bars on a smaller screen  */
.layout-wrapper .topbar .topbar-right #menu-button i {
	font-size: 24px;
}

/* Brings menu bars on smaller screen into vertical alignment */
.layout-wrapper .topbar .topbar-right #menu-button {
	margin-top: 10px;
}

/* Manages the menu bar position on a smaller screen*/
@media ( max-width : 1024px) {
	.layout-wrapper.menu-layout-static .topbar .topbar-left, .layout-wrapper.menu-layout-overlay .topbar .topbar-left,
		.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left
		{
		float: none;
		margin: 0 auto;
		background-color: #ffffff;
	}
	.layout-wrapper.menu-layout-static .topbar .topbar-left .logo,
		.layout-wrapper.menu-layout-overlay .topbar .topbar-left .logo,
		.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left .logo
		{
		background-image:
			url("");
			background-size: contain;
    background-position: center;
	}
	.layout-wrapper.menu-layout-static .topbar .topbar-right,
		.layout-wrapper.menu-layout-overlay .topbar .topbar-right,
		.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right
		{
		position: relative;
		top: -75px;
		padding: 15px 20px 15px 25px;
	}
	.layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button,
		.layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button,
		.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right #menu-button
		{
		font-size: 44px;
	}
	.layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button i,
		.layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button i,
		.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right #menu-button i
		{
		vertical-align: top;
	}
}

/*
 ====== PANEL GRID COLUMN WIDTHS ===========
*/

div .ui-panel {
	border: 0px;
}

.width-200 {
     width: 200px;
}
.width-500 {
     width: 500px;
}
.width-33 {
     width: 33%;
}
.width-67 {
     width: 67%;
}
.width-40 {
	width:40%;
}
.width-60 {
	width:60%;
}
.vert-align-top{
	vertical-align:top;
}
.message-box{
	margin: 0 0 20px;
    padding: 10px 20px;
    font-size: 1.0em;
    line-height: 1.5em;
    display: inline-block;
}
.message-box-blue{
	color: #01579b;
    background: #e1f5fe no-repeat top left;
}
.message-box-red{
	color: #920505;
    background: #F2DEDE  no-repeat top left;
}
/*Needed to allow buttons to float to correct position without losing integrity of panel*/
.ui-panel-content{
	overflow:hidden;
}
.summaryInfoDisplay .ui-panel-content{
	width:400%;
}
.no-left-padding{
	padding-left:2px;
}
.th-align th{
	padding-right:15px;
}
.th-width th{
	width:160px;
}
.vert-align-top th{
	vertical-align:top;
	width:160px;
}
.vert-align-top td{
	vertical-align:top;
}