/***********************************************/
/* ALL RELATIVE                                */
/***********************************************/
/***********************************************/
/* HTML TAG STYLES                             */
/***********************************************/
/* Colors
blue (slate):#336699;
light blue:  #99ccff;
purple: 	 #ccccff; 
gold:		 #ff9933;
beige:       #ffcc99;
*/

* {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
/************* Outer container for everything on the page **************/
/************************** Header Menu ********************************/
/************* TOP Navigation styles **************/
/************* Left Navigation **************/

#xleftcontent {
    width: 10%;
    display: block;
    float: left;
    min-height: 100%;
}
#sidenavigation {
    float: left;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
    color: white;
    font-size: 10px;
    min-height: 600px;
    background: #99ccff;
    display: block;
}
#sidenavigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#sidenavigation li {} #sidenavigation li a {
    display: block;
    padding: 2px;
    background: #99ccff;
    color: #ffffff;
    background:#99ccff;
    text-decoration: none;
}
#sidenavigation li a:hover {
    background-color: #d3d3d3;
    color: #000000;
    background-repeat: repeat-x;
}
#sidenavigation li a.sideselected {
    background-color: #99ccff;
    color: #000000;
    background-repeat: repeat-x;
}


.parent-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
}

.centered-content {
  /* Optional: add styling to the content itself */
    width: 400px;
    text-align: center;
}

/** Show/Hide Password **/
.iconEyeSlash {
    display: inline-block;
  background: url('../images/eye-slash-fill-18.png') no-repeat top left;
  }
  .iconEye {
    display: inline-block;
  background: url('../images/eye-fill-18.png') no-repeat top left;
  }
  


/** Topmenu Begin **/

.topnavigation {
    float: left;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    color: white;
    font-size: 14px;
    background: #99ccff;
    display: block;
    width: 100%;
}
.topnavigation ul {
    list-style-type: none;
    margin: 0;
    padding: 4px;
}
.topnavigation li {
    display: inline;
}
.topnavigation li a {
    display: inline;
    padding: 4px;
    background: #99ccff;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}
.topnavigation li a:hover {
    background-color: #d3d3d3;
    color: #000000;
    background-repeat: repeat-x;
}
.topnavigation li a.sideselected {
    background-color: #99ccff;
    color: #000000;
    background-repeat: repeat-x;
}
/** Content of the Page **/
#content {
    width: 846px;
    display: block;
    float: left;
    text-align: left;
    position: relative;
    min-height: 300px;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 25px;
    padding-left: 15px;
    background-color: #ffffff;
    min-height: 300px;
    background-image: url(../images/top-gradient.gif);
    background-repeat: repeat-x;
}
#contentblanksidemenu {
    width: 860px;
    display: block;
    float: right;
    text-align: left;
    position: relative;
    min-height: 300px;
    padding-top: 0;
    padding-bottom: 25px;
    background-color: #ffffff;
    background-image: url(../images/top-gradient.gif);
    background-repeat: repeat-x;
}
/****************************************************************************/
/******************************* Containers *********************************/
/*
 *.layoutgridism
 * A simple, responsive, and handy CSS.layoutgrid by @cobyism
 * https://github.com/cobyism.layoutgridism
 */
/* Preserve some sanity */

.layoutgrid,
.layoutunit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;  /* KPEDIT 180130 */
    padding-right: 10px; /* KPEDIT 180130 */
}
/* Set up some rules to govern the.layoutgrid */

.layoutgrid {
    display: block;
    clear: both !important;
}
.layoutgrid .layoutunit {
    float: left;
    width: 100%;
    padding: 10px;
}
.shaded-group {
    background-color: lightgray;
}
.with-bottom-border {
    border-bottom: 2px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #336699;
}
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */

.layoutgrid .layoutunit first-child {
    padding-left: 20px;
}
.layoutgrid .layoutunit last-child {
    padding-right: 20px;
}
/* Nested.layoutgrids already have padding though, so let's nuke it */

.layoutunit .layoutunit first-child {
    padding-left: 0;
}
.layoutunit .layoutunit last-child {
    padding-right: 0;
}
.layoutunit .layoutgrid first-child > .layoutunit {
    padding-top: 0;
}
.layoutunit .layoutgrid last-child > .layoutunit {
    padding-bottom: 0;
}
/* Let people nuke the gutters/padding completely in a couple of ways */

.no-gutters .layoutunit,
.layoutunit.no-gutters {
    padding: 0 !important;
}
/* Wrapping at a maximum width is optional */

.wrap .layoutgrid,
.layoutgrid.wrap {
    max-width: 978px;
    margin: 0 auto;
}
/* sidenavigation one-sixth */
/* Width classes also have shorthand versions numbered as fractions
 * For example: for a.layoutgrid.layoutunit 1/3 (one third) of the parent width,
 * simply apply class="w-1-3" to the element. */

.layoutgrid .whole,
.layoutgrid .w-1-1 {
    width: 100%;
}
.layoutgrid .half,
.layoutgrid .w-1-2 {
    width: 50%;
}
.layoutgrid .one-third,
.layoutgrid .w-1-3 {
    width: 33.3332%;
    
}
.layoutgrid .two-thirds,
.layoutgrid .w-2-3 {
    width: 66.6665%;
}
.layoutgrid .one-quarter,
.layoutgrid .w-1-4 {
    width: 25%;
    display: inline-block;
}
.layoutgrid .three-quarters,
.layoutgrid .w-3-4 {
    width: 75%;
}
.layoutgrid .one-fifth,
.layoutgrid .w-1-5 {
    display: inline-block;
    width: 20%;
}
.layoutgrid .one-sixth,
.layoutgrid .w-1-5 {
    width: 16.667%;
}
.layoutgrid .two-fifths,
.layoutgrid .w-2-5 {
    width: 40%;
}
.layoutgrid .three-fifths,
.layoutgrid .w-3-5 {
    width: 60%;
}
.layoutgrid .four-fifths,
.layoutgrid .w-4-5 {
    width: 80%;
}
.layoutgrid .one-tenth,
.layoutgrid .w-1-10 {
    width: 10%;
}
.layoutgrid .golden-small,
.layoutgrid .w-g-s {
    width: 38.2716%;
}
/* Golden section: smaller piece */

.layoutgrid .golden-large,
.layoutgrid .w-g-l {
    width: 61.7283%;
}
/* Golden section: larger piece */
/* Clearfix after every .layoutgrid */

.layoutgrid {
    *zoom: 1;
}
.layoutgrid:before,
.layoutgrid:after {
    display: table;
    content: "";
    line-height: 0;
}
.layoutgrid:after {
    clear: both;
}
.layoutunit img.fit {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
unit img.fixed {
    height: 74px;
    width: 74px;
    object-fit: cover;
}
/* Utility classes */

.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}

.justify-right {
    text-align: right;
}

.groupbox {
    margin: 10px 0px 10px 0px;
    text-align: left;
}
.undertogglegroupbox {
    margin: 15px 0px 10px 0px;
    text-align: left;
}
.breadcrumbs {
    text-align: left;
    display: block;
}
.pagetitle {
    text-align: left;
    font-size: 14px;
    display: block;
    font-weight: bold;
    padding: 5px;
}
.editbox {
    font-size: 12px;
}
.button {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    width: auto;
}
.button:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.button:active {
    border-top-color: #1b435e;
    background: #1b435e;
}
.buttongrid {
    border-top: 1px solid #55BC80;;
    background: #55BC80;
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    width: auto;
    min-width: 100px;
}
.buttongrid:hover {
    border-top-color: #153840; 
    background: #153840 ;
    color: #ccc;
}
.buttongrid:active {
    border-top-color: #153840;
    background: #153840;
}
.buttonright {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: top;
    position: relative;
    width: auto;
    float: right;
}

.red {
    background: #d62218;
    background: -webkit-gradient(linear, left top, left bottom, from(#f28a80), to(#d62218));
    background: -webkit-linear-gradient(top, #f28a80, #d62218);
    background: -moz-linear-gradient(top, #f28a80, #d62218);
    background: -ms-linear-gradient(top, #f28a80, #d62218);
    background: -o-linear-gradient(top, #f28a80, #d62218);

    
}

.buttonright:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.buttonright:active {
    border-top-color: #1b435e;
    background: #1b435e;
}
/* KP buttonleft added on 6/16/16 */

.buttonenvelope {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: top;
    position: relative;
    width: auto;
    float: right;

    background-image: url(../images/envelope.png) ;
    width:24px;
    height:25px;
    
}

.checkmark {
    background-image: url(../images/checkmark_small.png) ;
    width:24px;
    height:25px;
    background-repeat: no-repeat;
}

.noimage {
    background-image:none ;
}


.buttonleft {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    margin-top: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: top;
    position: fixed;
    width: auto;
    float: left;
}
.buttonleft:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.buttonleft:active {
    border-top-color: #1b435e;
    background: #1b435e;
}
.buttonsearch {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 5px 10px;
    margin-top: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: top;
    position: relative;
    width: auto;
}
.buttonsearch:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.buttonsearch:active {
    border-top-color: #1b435e;
    background: #1b435e;
}


/****************************************************************************/
/******************************* end containers *****************************/
/****************************************************************************/
/****************************************************************************/
/******************************* maincontent ********************************/
/****************************************************************************/
/*
 *#maincontentism
 * A simple, responsive, and handy CSS#maincontent by @cobyism
 * https://github.com/cobyism#maincontentism
 */
/* Preserve some sanity */

#maincontent,
.layoutunit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
/* Set up some rules to govern the#maincontent */

#maincontent {
    display: block;
    clear: both !important;
}
#maincontent .layoutunit {
    float: left;
    width: 100%;
    padding: 5px;
	
}
#maincontent .collapsable {
    clear: left;
    width: 100%;
    padding: 5px;
}
.with-bottom-border {
    border-bottom: 2px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #336699;
}
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */

#maincontent .layoutunit: first-child {
    padding-left: 20px;
}
#maincontent .layoutunit: last-child {
    padding-right: 20px;
}
/* Nested#maincontents already have padding though, so let's nuke it */

.layoutunit .layoutunit: first-child {
    padding-left: 0;
}
.layoutunit .layoutunit: last-child {
    padding-right: 0;
}
.layoutunit #maincontent: first-child > .layoutunit {
    padding-top: 0;
}
.layoutunit #maincontent: last-child > .layoutunit {
    padding-bottom: 0;
}
/* Let people nuke the gutters/padding completely in a couple of ways */

.no-gutters .layoutunit,
.layoutunit.no-gutters {
    padding: 0 !important;
}
/* Wrapping at a maximum width is optional */

.wrap #maincontent,
#maincontent.wrap {
    max-width: 978px;
    margin: 0 auto;
    float: left;
    clear: left;
}
/* Width classes also have shorthand versions numbered as fractions
 * For example: for a#maincontent.layoutunit 1/3 (one third) of the parent width,
 * simply apply class="w-1-3" to the element. */

#maincontent .whole,
#maincontent .w-1-1 {
    width: 100%;
}
#maincontent .half,
#maincontent .w-1-2 {
    width: 50%;
}
#maincontent .one-third,
#maincontent .w-1-3 {
    /*width: 33.3332%;*/
    -webkit-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%; }}
#maincontent .two-thirds,
#maincontent .w-2-3 {
    width: 66.6665%;
}
#maincontent .one-quarter,
#maincontent .w-1-4 {
    width: 25%;
    display: inline-block;
}
#maincontent .three-quarters,
#maincontent .w-3-4 {
    width: 75%;
}
#mailcontent .one-tenth
#maincontent .w-1-10 {
    width: 10%;
}

#maincontent .one-fifth,
#maincontent .w-1-5 {
    width: 20%;
}
#maincontent .three-tenths,
#maincontent .w-3-10 {
    width: 30%;
}

#maincontent .one-sixth,
#maincontent .w-1-5 {
    width: 16.667%;
}
#maincontent .two-fifths,
#maincontent .w-2-5 {
    width: 40%;
}
#maincontent .three-fifths,
#maincontent .w-3-5 {
    width: 60%;
}
#maincontent .four-fifths,
#maincontent .w-4-5 {
    width: 80%;
}
#maincontent .one-tenth,
#maincontent .w-1-10 {
    width: 10%;
}
#maincontent .seven-tenths,
#maincontent .w-7-10 {
    width: 70%;
}
#maincontent .golden-small,
#maincontent .w-g-s {
    width: 38.2716%;
}
/* Golden section: smaller piece */

#maincontent .golden-large,
#maincontent .w-g-l {
    width: 61.7283%;
}
/* Golden section: larger piece */
/* Clearfix after every #maincontent */

#maincontent {
    *zoom: 1;
}
#maincontent:before,
#maincontent:after {
    display: table;
    content: "";
    line-height: 0;
}
#maincontent:after {
    clear: both;
}

.layoutunit img.fit {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
unit img.fixed {
    height: 74px;
    width: 74px;
    object-fit: cover;
}
/* Utility classes */

.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
#maincontent .one-seventh,
#maincontent .w-1-7 {
    width: 14.2857%;
}
#maincontent .two-sevenths,
#maincontent .w-2-7 {
    width: 28.5717%;
}
#maincontent .three-sevenths,
#maincontent .w-3-7 {
    width: 42.8577%;
}
#maincontent .four-sevenths,
#maincontent .w-4-7 {
    width: 57.1437%;
}
#maincontent .five-sevenths,
#maincontent .w-5-7 {
    width: 71.42971%;
}
#maincontent .six-sevenths,
#maincontent .w-6-7 {
    width: 85.7157%;
}

#maincontent .one-fifteenth,
#maincontent .w-1-15 {
    width: 6.66665%;
}
#maincontent .one-twentieth,
#maincontent .w-1-20 {
    width: 4%;
}



/****************************************************************************/
/******************************* END maincontent ****************************/
/****************************************************************************/
/******************************* Menu Stuff *********************************/
/************* TOP Navigation styles **************/
/* nav */

.nav {
    position: relative;
    margin: 2px;
    border-bottom: 1;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 5px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 0;
    text-decoration: none;
    color: #000;
    line-height: 100%;
}
.nav a:hover {
    color: #fff;
}
.nav .current a {
    border-radius: 5px;
}
/* right nav */

.nav.right ul {
    text-align: right;
}
/* center nav */

.nav.center ul {
    text-align: center;
}
/****************************************************************************/
/****************************************************************************/
/* Expand the wrap a bit further on larger screens */

@media screen and (max-width: 480px) {
    .nav {
        border-bottom: 0;
    }
    .nav {
        position: relative;
        min-height: 40px;
    }
    .nav ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: #fff url('icon-menu.png') no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }
    .nav li {
        display: none;
        /* hide all <li> items */
        
        margin: 0;
    }
    .nav .current {
        display: block;
        /* show only current <li> item */
    }
    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
        width: auto;
    }
    .nav .current a {
        background: none;
        color: #666;
        width: auto;
    }
    /* on nav hover */
    
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li {
        display: block;
        margin: 0 0 5px;
    }
    .nav ul:hover .current {
        background: url('icon-menu.png') no-repeat 10px 7px;
    }
    /* right nav */
    
    .nav.right ul {
        left: auto;
        right: 0;
    }
    /* center nav */
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
}
/* Responsive Stuff */

@media screen and (max-width: 568px) {
    /* Stack anything that isn't full-width on smaller screens */
    
    .layoutgrid .layoutunit {
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }
    .layoutunit .layoutgrid .layoutunit {
        padding-left: 0px;
        padding-right: 0px;
    }
    /* Sometimes, you just want to be different on small screens */
    
    .center-on-mobiles {
        text-align: center !important;
    }
    .hide-on-mobiles {
        display: none !important;
    }
    .nav {
        position: relative;
        min-height: 40px;
    }
    .nav ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: #fff url('icon-menu.png') no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }
    .nav li {
        display: none;
        /* hide all <li> items */
        
        margin: 0;
    }
    .nav .current {
        display: block;
        /* show only current <li> item */
    }
    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
    }
    .nav .current a {
        background: none;
        color: #666;
    }
    /* on nav hover */
    
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li {
        display: block;
        margin: 0 0 5px;
    }
    .nav ul:hover .current {
        background: url('icon-menu.png') no-repeat 10px 7px;
    }
    /* right nav */
    
    .nav.right ul {
        left: auto;
        right: 0;
    }
    /* center nav */
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
}
@media screen and (max-width: 760px) {} header {
    border-bottom: 1px solid #eee;
    /* background-image: url(../images/logo.gif); */
    
    background-color:#336699;
    /* #1142AA  darker purple 42.52.141 */
    
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #336699;
    font-size: 18px;
}
h1 {
    color: #FFFFFF;
    border-bottom: none;
    font-size: 24px;
}
h2 {
    color: #FFFFFF;
    border-bottom: none;
    font-size: 18px;
}

header h1 a {
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: none;
}
header p {
    margin: 2em 0;
}
header,
footer {
    border-top: 1px solid #fff;
}
footer {
    padding: 5px 0;
}
/************* Logo  **************/

logo {
    float: left;
    background-image: url(../images/logo.gif);
    background-repeat: no-repeat;
    border-color: 336699;
    color: #336699;
    font-weight: bold;
}
label {
    /*display: block;*/
    
    float: left;
    margin-right: 1em;
}
/* a {
	display: block;
	float: left;
	font-size:11px;
	width: 95%;
}
*/
a .fit{
   height: 100%;
   width: 100%;
}

.label-one-third {
    width: 33.33%;
}
/*Added by KP on 6/16/16 */

.label-one-half-right {
    width: 50%;
    height: 25px;
    float: right;
    text-align:right
}

.v-align-checkbox {
	vertical-align:-25px;	
}
	
	

.input-box-wide {
    width: 56%;
    float: left;
}
.input-box-wider {
    width: 58.9%;
    float: left;
}
.input-box-100 {
    width: 100%;
    float: left;
}
.input-box-70 {
    width: 70%;
    float: left;
}
.input-box-30 {
    width: 30%;
    float: left;
}
.input-box-120 {
    width: 120%;
    float: left;
}

.input-box-200 {
    width: 200%;
    float: left;
}

.lonely-title {
	width : 18.9%
}
.APS-year {
	margin-left: -7%;
	width : 60%;
}
.APS-Button {
	font-size : smaller;
}
.Ghost-Button {
    background: white;
    color: grey;
}
.GridDropDown {
}

.PopUpBox  {
}
/* End KP Edits */
input {
    margin-top: 1px;
    display: block;
}
input .checkbox {
    margin-top: 1px;
    display: inline;
}
.checkboxtext {
    margin-top: 1px;
    display: inline;
}
.inputcalendar {
    width: 80px;
    display: block;
}
select {
    display: block;
}
.datefield {
    display: inline-block;
    vertical-align: center;
    float: none;
    white-space: nowrap
}
.datefield img {
    display: inline-block;
    vertical-align: center;
    float: none;
    white-space: nowrap
}
.showhidetoggle {
    font-size: 14px;
    min-height: 32px;
    width: 99.5%;
    color: white;
    padding-left: 5px;
    padding-top: 8px;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-right: 5px;
    background: #7a9eaa;
    font-weight: 500;
}
a[rel*="toggle"] {
text-decoration: none; 
vertical-align: middle;
}
.onelinecheckbox {
    display: inline-flex;
    white-space: nowrap;
}
.groupboxheader {
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
    display: inline-block;
}
.displayonlybox {
    border-width: 1px;
    border-style: solid;
    border-color: #A9A9A9;
    display: inline-block;
    width: 130px;
    padding: 2px 30px 2px 0px;
}
.displayonlybox:empty {
    width: 130px;
    height: 14px;
}
.boxwithborder {
    border-width: 1px;
    border-style: solid;
    border-color: #A9A9A9;
    padding: 10px;
}


.listheader{
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #000000;
}


.listheader-right{
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #000000;
   float:right;
   text-align:right;
}

.listheader-center{
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #000000;
   float:left;
   text-align:center;
}

.seperatorheader{
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #000000;
   background: #99ccff;
}

.dashborder {
    border-width: 1px;
    border-style: solid;
    border-color: #A9A9A9;
    padding: 1px;
    border-radius: 5px;
}
/* KP SubtleLink Added 3/7/2017 */
.SubtleLink {
     color: black !important;
    text-decoration: none !important;   
}

.SubtleLink:link {
     color: black;
    text-decoration: none;   
}
.SubtleLink:visited {
    color: green;
}
.SubtleLink:hover {
    color: blue;
}
.SubtelLink:active {
    color: black;
    text-decoration: none;   

}


.bt-method-box {
    height:50px;
    width:300px;
    clear:right;
    padding:10px;
    background-color: blanchedalmond;
}

.bt-edit-box {
    height:30px; 
    position:relative;
    width:300px; 
    border-style:solid;
    border-width:thin;
    margin-top: 20px;
}

.bt-selected-method {
    font-weight: bolder;
    /*background-color: #fdfdfdce;*/
    background-color: #ee4848ce;
    color: white;
    text-align: left;
    
}

.bt-method-select {
    justify-content: left;
    display: flex;
}

@media screen and (min-width: 1180px) {
    .wider .layoutgrid {
        max-width: 1180px;
        margin: 0 auto;
    }
}

.center-div {
    margin: auto;
    width: 15%;
}

@media screen and (max-width: 1000px) {
    .center-div {
        margin: auto;
        width: 20%;
    }
    
    
}