html {
	  width: 100%;
	  height: 100%;
}

body {
      margin: 0px;
	  font-family: "Arial", sans-serif;
	  color: #330099;
	  background-color: #ffc340;
	  width: 100%;
	  height: 100%;
}

.pageWhole {
      margin: 0px 2% 0px 2%;
	  padding: 0px;
	  width: 96%;
	  height: 100%;
      display: flex;
	  flex-direction: column;
	  align-items: stretch;
}

.pageTop {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  width: 100% ;
	  flex: 0 0 15px ;
}

.pageContent {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  width: 100% ;
	  flex: 1 0 auto;
	  display: flex;
	  flex-direction: row;
	  align-items: stretch;
}

.pageBottom {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  width: 100% ;
	  flex: 0 0 15px ;
}

.pageTopOrLeft {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  flex: 0 0 200px;
	  display: flex;
	  flex-direction: column;
	  align-items: stretch;
}

.pageSeparator {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  width: 15px;
	  flex: 0 0 15px;
}

.pageBarCenter {
      margin: 0px;
	  border: 0px;
	  padding: 0px;
	  width: 100% ;
	  flex: 0 0 15px;
}

.pageLogo {
      margin: 0px;
	  border: 3px;
	  padding: 10px 0px 10px 0px;
	  background: #ffffee;
	  border-style: solid;
	  border-color: #ffdf99;
      border-radius: 15px;
      text-align: center;
      font-size: 25px;
	  flex: 0 0 auto;
}

.pageNavigator {
      margin: 0px;
	  border: 3px;
	  padding: 10px 0px 10px 0px;
	  background: #ffffee;
	  border-style: solid;
	  border-color: #ffdf99;
      border-radius: 15px;
      background: #ffffee;
	  flex: 1 0 auto;
}

.pageCenter {
      margin: 0px;
	  border: 3px;
	  background: #ffffee;
	  border-style: solid;
	  border-color: #ffdf99;
      padding: 10px 0px 10px 0px;
      border-radius: 15px;
	  flex: 1 0 auto;
}