html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.outer-layout {
height: 100%;
}
.north-pane {
background-color: black;
width: 100%;
height: 50px;
box-sizing: border-box;
}
.north-left-pane {
width: 300px;
height: 100%;
float: left;
box-sizing: border-box;
}
.north-right-pane {
width: calc(100% - 300px);
height: 100%;
float: left;
box-sizing: border-box;
}
.north-right-pane:after {
clear: both;
}
.south-pane {
width: 100%;
height: calc(100% - 50px);
box-sizing: border-box;
}
.south-left-pane {
width: 300px;
height: 100%;
box-sizing: border-box;
float: left;
border-right: 1px solid black;
}
.south-right-pane {
width: calc(100% - 300px);
box-sizing: border-box;
height: 100%;
float: left;
}
.logo-area {
display: flex;
height: 100%;
width: 100%;
align-content: stretch;
justify-content: flex-start;
box-sizing: border-box;
padding: 10px;
color: white;
}
.logo {
align-self: center;
}
.sidebar-area {
background-color: darkgray;
box-sizing: border-box;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
border: 1px solid black;
padding: 10px;
overflow: auto;
}
.page-area {
background-color: white;
box-sizing: border-box;
margin: 10px auto 10px auto;
height: calc(100% - 20px);
width: calc(100% - 20px);
max-width: 12in;
border: 1px solid black;
}
.page-title-area {
width: 100%;
height: 40px;
border-bottom: 1px solid black;
box-sizing: border-box;
display: flex;
align-content: stretch;
justify-content: flex-start;
padding-left: 10px;
}
.page-title {
align-self: center;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
}
.page-content-scroller {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
overflow: auto;
}
.page-content {
padding: 10px;
}
.search-outer-area {
display: flex;
align-self: center;
box-sizing: border-box;
align-content: stretch;
justify-content: center;
width: 100%;
height: 100%;
}
.search-input-area {
align-self: center;
color: white;
width: 100%;
justify-content: center;
}
#searchTextBox {
/* Add a search icon to input */
/* Position the search icon */
/* Do not repeat the icon image */
background: white url('../../images/searchicon.png') no-repeat 10px 8px;
margin-left: 10px;
margin-right: 10px;
width: 100%;
font-size: 16px; /* Increase font-size */
padding: 8px 20px 8px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
align-self: center;
justify-content: center;
max-width: 12in;
box-sizing: border-box;
}