/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    /* background-color: #00B2F7; */
    background-color: #ffffff;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

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

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}



/* Header
----------------------------------------------------------*/
header,
#header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}
header h1,
#header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}
#header #system-area
{
    display: table;
    width: 100%;
}
#header #system-area .header-group
{
    display: table-row;
}
#header #system-area .header-group .logo
{
    display:table-cell;
    width: 180px;
    padding: 2px;
}
#header #system-area .header-group .logo img
{
    border: 0px;
    vertical-align: bottom;
}
#header #system-area .header-group .title
{
    display: table-cell;
    text-align:left;
    vertical-align: middle;
    font-size: 21pt;
    padding: 0px 0px 0px 0.5em;
}
#header #system-area .header-group .actions
{
    display: table-cell;
    width: 200px;
    text-align: right;
    vertical-align: bottom;
    padding: 0px 5px 2px 0px;
}



/* Header Navigation
----------------------------------------------------------*/
#header #navigation
{
    width:100%;
    color: White;
    font-size: 10.5pt;
    text-align:left;
}
#header #navigation .separator
{
    height: 16px;
    vertical-align: middle;
    padding: 2px 0px 2px 10px;
    background: #507cd1; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #507cd1 0%, #8ab1f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#507cd1), color-stop(100%,#8ab1f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* IE10+ */
    background: linear-gradient(135deg,  #507cd1 0%,#8ab1f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#507cd1', endColorstr='#8ab1f6',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#header #navigation .links
{
    height: 16px;
    vertical-align: middle;
    padding: 2px 0px 2px 10px;
    background: #8ab1f6; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #8ab1f6 0%, #507cd1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#8ab1f6), color-stop(100%,#507cd1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #8ab1f6 0%,#507cd1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #8ab1f6 0%,#507cd1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #8ab1f6 0%,#507cd1 100%); /* IE10+ */
    background: linear-gradient(135deg,  #8ab1f6 0%,#507cd1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ab1f6', endColorstr='#507cd1',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#header #navigation .links a:link {
    color: #ffffff;
    text-decoration: none;
}
#header #navigation .links a:visited {
    color: #ffffff;
    text-decoration: underline;
}
#header #navigation .links a:hover {
    color: #ffffff;
    text-decoration: underline;
}
#header #navigation .links a:active {
    color: #ffffff;
    text-decoration: underline;
}



/* MAIN
----------------------------------------------------------*/
#main {
    margin:5px;
    min-height:580px;
    padding: 5px 10px 15px 10px;
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border: 1px solid gray;
}



/* MAIN HEADER
----------------------------------------------------------*/
#main #display-header
{
    display:table;
    width:100%;
    margin-bottom:10px;
}
#main #display-header .header-group
{
    display:table-row;
}
#main #display-header .header-group .title
{
    display:table-cell;
    text-align:left;
    font-size: 14pt;
    font-weight:bold;
    vertical-align: middle;
    padding:2px;
}
#main #display-header .header-group .user-info
{
    display:table-cell;
    width:350px;
    text-align:right;
    vertical-align: bottom;
    padding:2px;
}
#main #display-header .header-group .user-info .info-area
{
    display:table;
    width:100%;
}
#main #display-header .header-group .user-info .info-area .info-row
{
    display:table-row;
}
#main #display-header .header-group .user-info .info-area .info-row .caption
{
    display:table-cell;
    width:80px;
    text-align:right;
}
#main #display-header .header-group .user-info .info-area .info-row .value
{
     display:table-cell;
     text-align:left;
     padding-left:5px;
}



/* FOOTER
----------------------------------------------------------*/
footer,
#footer {
    background-color: red;
    color: white;
    font-size: 10.5pt;
    height: 16px;
    text-align: center;
    line-height: normal;
    vertical-align: middle;
    background: #507cd1; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #507cd1 0%, #8ab1f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#507cd1), color-stop(100%,#8ab1f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #507cd1 0%,#8ab1f6 100%); /* IE10+ */
    background: linear-gradient(135deg,  #507cd1 0%,#8ab1f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#507cd1', endColorstr='#8ab1f6',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#footer div#note
{
    display: block;
    text-align: right;
}


/* TAB MENU
----------------------------------------------------------*/
ul#menu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0.2em 1.4em 0.6em 1.4em;
    margin: 0 0 1.4em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"],
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="button"],
input[type="submit"] {
    font-size: 1.2em;
    padding: 5px;
}

/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table td {
    padding: 5px;
    border: solid 1px #e8eef4;
}

table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
}

.grid-base{
}
.grid-header{
}
.grid-footer{
    background-color: #e8eef4;
}
.grid-row{
    background-color: #fffff0;
}
.grid-alternating-row{
    background-color: #f4fbfe;
}
.grid-selected-row{
    background-color: Yellow;
}
.grid-error-row{
    background-color: #fff7f7;
}



/* MISC
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav,
#menucontainer {
    text-align: right;
}

div#title
{
    display: block;
    float:left;
    text-align: left;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 40px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label {
    display: inline;
    margin: 1em 0 0 0;
}
.display-field {
    display: inline;
    margin: 0.5em 0 0 0;
}




.editor-group {
    display: block;
    margin: 0.5em 0 0 0;
}
.editor-label {
    display: block;
    margin: 0.5em 0 0 0;
}
.editor-field {
    display: block;
}
.editor-label-inline {
    display: inline;
}
.editor-field-inline {
    display: inline;
}
.message-group {
    display: block;
    margin: 0.5em 0 1em 0;
}
.message-field {
    display: block;
    margin: 0.5em 0 0 0;
}
.message-errors {
    color: #ff0000;
}
.message-informations {
    color: #0000ff;
}
.message-warnings {
    color: #0000ff;
}

.button-group {
    display: block;
    margin: 1.1em 0 1.1em 0;
}
.button-field {
    display: inline;
}


.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}