/* GENERAL

   COLOUR PALETTE:

	dkr blue : #3F5670
	dk blue  : #82A3BC
	md blue  : #97B3C8
	lt blue  : #CDDDEC
	ltr blue : #E1EBF4
	bgndy    : #854141
	lt green : #D6EFC0
	dk green : #360
	red      : #854141

-------------------------------------------------------------------------*/

.wrapper {
  display: flex;
  justify-content: center;
  
}

.main,
.sidebar {
  /*border: 1px solid black;*/
  padding: 15px;
  background-color: #FFF;
}

.main {
	width: 85%;
	max-width:1028px;
	min-width:1000px;
        min-height:75%;

}

.sidebar {
	min-width:250px;
	max-width:250px;
}

body {
	background: #FFF;
	color: #123;
	font: 11px "Lucida Grand", "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	margin: 0; padding: 0;
	/*text-align: center;*/
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* clear fix */
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.clear { display: inline-block }


/* CLASSES
-------------------------------------------------------------------------*/
.alert, .alert-split, .itemlinks, .construct, .tip {
    background: #FFC url(../images/ico-error.gif) no-repeat 4px 4px;
    border: 1px solid #CC3;
    margin: 0 0 6px;
    padding: 6px 6px 6px 26px
}

.alert-split { background: #FFC url(/images/bg-alert-divider.gif) repeat-y 50% 0 }

.alert-split div { margin: 2px 0; text-align: center; width: 50% }

.construct {
    background-image: url(../images/ico-construct.gif);
}

.itemlinks { background-image: none }

.tip {
    background-color: #CDDDEC;
    background-image: url(../images/ico-tip.gif);
    border-color: #97B3C8;
}

.currentpage { color: #854141 }

.help, .help:hover { cursor: help }

.lrg {
    font-family: Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    letter-spacing:-1px;
}

.note { font-size:10px }

.pages {
    list-style: none;
    text-align:center;
    margin: -3px 0 3px 0;
    padding: 6px 0 0;
}

.pages li { display: inline; margin: 0 6px }


/* FOOTER
-------------------------------------------------------------------------*/
#footer {
	clear: both;
	background: #3F5670 url(../images/FooterGraphic1000.jpg) no-repeat left bottom;
	color: #fff;
	margin: 6px 0 6px;
    width: 100%;
    height: 100px;
    background-size: 100% 100%;    
    position:absolute;
    bottom: 0;}

#bodyCenter {
    clear: both;
    position: absolute;
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); }


/* ERRORS
-------------------------------------------------------------------------*/

label.error, span.error, .asterisk {
	color: #C00;
}

div.error {
	background-color: #C00;
	padding: 2px;
}


#errors {
	border: 2px solid #C00;
	overflow:hidden;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  min-width: 50%;
}


#errorsTitle {
	background: #C00 url(../images/ico-error.gif) left no-repeat;
	color: #fff;
	padding:3px 10px 3px 25px;
	font-size: 12px;
	font-weight: bold;
}

#errors p{
	color: #000;
	margin: 0 0 3px;
	padding: 3px;
}

#errors ul{
	border:1px solid #ccc;
	border-width:1px 0;
	margin:0;
	padding:0;
	text-align:left;
	list-style-type: circle
}

#errors li{
	margin:0 0 0 25px;
	padding:0;
	text-align:left;
	list-style-type: circle
}

/* SideBarContainer
-------------------------------------------------------------------------*/

label.sbContainer, span.sbContainer, .asterisk {
	color: #82A3BC;
}

div.sbContainer {
	background-color: #82A3BC;
	padding: 2px;
}


#sbContainer {
	width: 100%;
	border: 1px solid #82A3BC;
	overflow:hidden;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 10px;
}


#sbContainerTitle {
	background: #82A3BC;
	color: #fff;
	padding:0 10px 0 25px;
	font-size: 12px;
	font-weight: bold;
}

#sbContainer p{
	color: #000;
	margin: 0 0 3px;
	padding: 3px;
}

#sbContainer ul{
	border:1px solid #82A3BC;
	border-width:1px 0;
	margin:-1;
	padding:0;
	text-align:left;
	list-style-type: circle
}

#sbContainer li{
	margin:0 0 0 25px;
	padding:0;
	text-align:left;
	list-style-type: circle
}

/* Buttons
-------------------------------------------------------------------------*/
label.buttons, span.buttons, .asterisk {
	color: #FFF;
}

#buttons {
	background: #3F5670;
	overflow:hidden;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding:1px 10px 3px 10px;
	font-size: 13px;
	font-weight: bold;
    border: none;
}

button:focus { outline: none; }

#mainpage {
	width: 100%;
	border: 1px solid #82A3BC;
	overflow:hidden;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 10px;
	height: 450px;
    position: relative; /*Used to put footer at bottom */
}

/* Forms
-------------------------------------------------------------------------*/
form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #82A3BC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text fields */
  width: 200px;
  border: 1px solid #82A3BC;
  padding: 3px;
  margin: 0 0px 0px 5px;
}

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;
}