/** Legacy CSS that needs cleaning up **/

/* Logged in Home page stuff - for some reason not having this will cause a javascript error
    and what that error means - I will have to find out. In the meantime it should be here.
*/

#LearnMorePopUp 
{    
    background-color: #fff;
    -webkit-background-clip: padding-box;
    display:block;
    border: 1px solid black;
    width:auto; 
    max-width: 800px;
    height: auto;
    min-height: 100px;
    max-height: 500px;
    display:none;
    overflow: auto;
    z-index: 9999;
}
#LearnMorePopUp_title 
{
    background-color: #f2f2f2;
    padding: 10px;
    font-weight: bold;
    color:#298762;
    overflow: auto;
}
#LearnMorePopUp_body
{
    padding: 10px;
    overflow: auto;
}

#landing-page-programs a.learn {
    cursor: pointer;
    color: #99CC33;
    text-decoration: underline;
    padding: 3px 5px 3px 10px;
}

#landing-page-programs a.apply {
        background-position: 72px -19px;
        color: #FFFFFF;
        background-color: #99CC33;
        padding: 3px 10px 3px 10px;
        cursor: pointer;
}
#landing-page-programs a.change-round {
        background-position: 118px -19px;
}

#landing-page-programs a.copy-round {
        background-position: 126px -19px;
}


/* validation errors */
.field-validation-error {
    display: block;
    color: #ff0000;
    font-weight: bold;
    /*font-size: 80%;*/
    clear: both;
}

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

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

a.input-validation-error,
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    background: #FEF1EC !important;
    border: 1px solid #CD0A0A !important;
}

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

.messagewrapper_static
{
    background-position: 10px center;
    background-repeat: no-repeat;    
}

#messagewrapper
{
    background-position: 10px center;
    background-repeat: no-repeat;
}

.success,.warning,.error,.info,.messagebox {
    background-repeat: no-repeat;    
    background-position: 10px center;    
    padding: 10px 5px 15px 50px;    
}

#messagewrapper .success, div.success
{
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('buttons/knob_success.png');
    border: solid 1px #4F8A10;

}

#messagewrapper .warning, div.warning
{
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('buttons/knob_warning.png');
    border: solid 1px #9F6000;

}

#messagewrapper .error, div.error
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('buttons/knob_error.png');
    border: solid 1px #D8000C;
}

#messagewrapper .info, div.info
{
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('buttons/knob_info.png');
    border: solid 1px #00529B;
}

/* Progress Bar */
.progress-bar {
    -moz-border-radius: 20px;
    /*border: 1px solid #b5b2b2;*/
    border-radius: 20px;
    float: left;
    height: 10px;
    width: 100%;
}

.progress-bar .inner-bar {
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    height: 100%;
    line-height: 13px;
    text-align: right;
    width: 0; 
}
/** End of Legacy CSS **/

/* Bootstrap overrides */
code, kbd, pre, samp { background-color: transparent; border: 0px; font-family: 'Open Sans'; }
div[class*="col-"] { padding-left: 5%; padding-right: 5%; }
.nogutter { padding-left: 0 !important; padding-right: 0 !important; }
.gutter-1 { padding-left: 1% !important; padding-right: 1% !important; }
.gutter-2 { padding-left: 2% !important; padding-right: 2% !important; }
.gutter-3 { padding-left: 3% !important; padding-right: 3% !important; }
.gutter { padding-left: 5% !important; padding-right: 5% !important; }
.gutter-left { padding-left: 5% !important; padding-right: 0% !important; }
.gutter-right { padding-left: 0% !important; padding-right: 5% !important; }
.gutter-10 { padding-left: 10% !important; padding-right: 10% !important; }
@media (max-width: 767px) {
    .nogutter-xs { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 767px) {
    .gutter-2-xs { padding-left: 2% !important; padding-right: 2% !important; }
    .gutter-xs { padding-left: 5% !important; padding-right: 5% !important; }
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:visited { color: #FFF; text-decoration: none !important; padding-bottom: 5px !important; }
.navbar { margin-bottom: 0px; }
label { font-weight: normal; }

/* Navbar divider */
/* This was depricated with 3.2, but it seems like it was pretty useful */
.navbar .divider-vertical { height: 20px; margin: 15px 0px 0px 0px; border-right: 1px solid #ffffff; }
.navbar-inverse .divider-vertical { border-right-color: #CCC; }
@media (max-width: 767px) {
    .navbar-collapse .nav > .divider-vertical { display: none; }
}

/* Sidebar Nav */
.selected { background-color: #f5f5f5; }
.accountSidebar .selected, #application-sections-menu .selected { background-color: #f0f0f0;  }
#sidebarCollapse .nav-stacked > li { height: 75px; }
#sidebarCollapse .nav > li > a { height: 75px; margin-left: 40px; padding-top: 25px; }
#sidebarCollapse .nav > li > a:focus, #sidebarCollapse .nav > li > a:hover { background: none; }

.imgArrow { float: right; position: relative; }
.imgArrow img { position: absolute; bottom:0px; right: 0px; height: 75px; }
/* End of Bootstrap overrides */

/* Forms (this must come before the global section) */
.form-control { background: #F0F0F0; border: 0px solid #F0F0F0; border-radius: 0px; height: 40px; }
fieldset legend { border: 0; font-weight: bold; padding: 2% 0 0 5%; font-family: Open Sans Condensed; font-size: 18px; }

.sa-button { width: 100%; padding: 5% 10% 5% 10%; color: #FFF; background-color: #8EC73D;  border: 0; }
.sa-button-slim { }
.sa-button2 { padding: 10px; color: #FFF; background-color: #8EC73D;  border: 0; }
.sa-button-fixed { padding: 10px; color: #FFF; background-color: #8EC73D;  border: 0; }
@media (max-width: 767px) { 
    .sa-button { padding: 1% 2% 1% 2%; } 
}

/* Global */
body { font-family: Open Sans, sans-serif; font-size: 14px; color: #333; -ms-overflow-style: scrollbar; }

/* Over-ride the body for screen sizes larger than 1200px */
@media (min-width: 1200px) {
  .wrapBody { background-color: blue; }

  body {
    width: 1170px !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
}






a, a:hover, a:visited { text-decoration: underline !important; color: #8EC73D; }
a:focus { outline-color: transparent !important; }

h1 { font-size: 27px; font-weight: bold; font-family: Open Sans Condensed; }
h2 { font-size: 18px; font-weight: bold; }
h3 { font-size: 18px;}
h4 { font-size: 16px; font-weight: bold; }
h5 { font-size: 16px; font-weight: 600; word-wrap: break-word; }
h6 { font-size: 14px; font-weight: bold; }

/* Sticky Footer */
html, body { height: 100%; }
#wrapBody { min-height: 100%;  height: auto; margin-bottom: -90px; padding-bottom: 90px; }
#footer { height: 90px; }
@media (max-width: 767px) {
    #wrapBody { margin-bottom: -105px; padding-bottom: 105px; }
    #footer { height: 105px; }
}


/* Specific font color controls */
.bgcolor-white { background-color: #FFF; }
.bgcolor-body { background-color: #F9F9F9; }
.bgcolor-black { background-color: #000; }
.bgcolor-green { background-color: #8EC73D; }
.bgcolor-darkgrey { background-color: #EFF0EF; }
.bgcolor-darkergrey { background-color: #333; }
.bgcolor-progressbar { background-color: #ccc; }

.font-small { font-size: .75em; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-23 { font-size: 23px; }
.font-27 { font-size: 27px; }
.font-30 { font-size: 30px; }
.font-36 { font-size: 36px; }
.font-40 { font-size: 40px; }

.font-green { color: #8EC73D; }
.font-darkgrey { color: #999; }
.font-darkergrey { color: #333; }
.font-white { color: #FFF; }
.font-black { color: #000; }

.font-bold { font-weight: bold; }
.font-OpenSansCondensed { font-family: Open Sans Condensed; }
.font-OpenSansLight { font-weight: 300; }
.font-OpenSansExtraBold { font-weight: 800 !important; }
.font-OpenSansBold { font-weight: 700; }
.font-OpenSansSemiBold { font-weight: 600; }
.font-Times { font-family: 'Times New Roman'}
.font-Verdana { font-family: 'Verdana,Geneva,sans-serif'; }
.lineheight-clear { line-height: initial; }
.lineheight-20 { line-height: 20px; }
.lineheight-22 { line-height: 22px; }
.lineheight-25 { line-height: 25px; }
.lineheight-30 { line-height: 30px; }

a.link-inherit, a.link-inherit:hover, a.link-inherit:visited { font-family: inherit; color: inherit; text-decoration: none !important; }
a.link-darkgrey, a.link-darkgrey:hover, a.link-darkgrey:visited { color: #999; text-decoration: none !important; }
a.link-black, a.link-black:hover, a.link-black:visited { color: #000; text-decoration: none !important; }
a.link-white, a.link-white:hover, a.link-white:visited { color: #FFF; text-decoration: none !important; }
a.link-red, a.link-red:hover, a.link-red:visited { color: #FF0000; text-decoration: none !important; }
a.link-underline, a.link-underline:hover, a.link-underline:visited { text-decoration: underline !important; }

.border-bottom { border-bottom: 2px solid #EFF0EF; }
.border-bottom-dark { border-bottom: 1px solid #999; }
.border-top-dark { border-top: 1px solid #999; }
.border-top { border-top: 2px solid #EFF0EF; }
.border-top-1 { border-top: 1px solid #EFF0EF; }
.border-full-grey { border: 1px solid #E7E7E7; }
.border-grey { border: 1px solid #ddd; }
.noborder { border: 0px; }
.border-lrt { border-left: 1px solid #ddd; border-right: 1px solid #999; border-top: 1px solid #999; border-bottom: 1px solid #F9F9F9; }

.cursor-pointer { cursor: pointer }

/* Positioning controls */
.display-block { display: block; }
.display-inlineblock { display: inline-block; }
.text-center { text-align: center; }

.padding-1 { padding: 1%; }
@media (max-width: 767px) {
    .padding-1-xs { padding: 1% !important; }
    .padding-2-xs { padding: 2% !important; }
    .nopad-topbot-xs { padding-top: 0 !important; padding-bottom: 0 !important; }
    .nopad-top-xs { padding-top: 0 !important; }
    .padtop-2-xs { padding-top: 2% !important; }
    .padtop-5-xs { padding-top: 5% !important; }
    .padbot-5-xs { padding-bottom: 5% !important; }
    .padtopbot-2-xs { padding-top: 2% !important; padding-bottom: 2% !important; }
    .padtopbot-5-xs { padding-top: 5% !important; padding-bottom: 5% !important; }
    .width-20-xs { width: 20% !important; }
    .width-full-xs { width: 100% !important; }
    .float-clear-xs { float: none !important; }
}

@media (max-width: 992px) {
    .padding-1-sm { padding: 1% !important; }
}

.width-full { width: 100%; }
.margin-l-20 { margin-left: 20px; }
.padding-but { padding: 10px; }
.margin-auto { margin: 0 auto; }

.pad-but { padding: .5% 2% .5% 2%; }
.padtopbot-1 { padding-top: 1%; padding-bottom: 1%; }
.padding-2 { padding: 2%; }
.padding-3 { padding: 3%; }
.padding-5 { padding: 5%; }
.padbot-2 { padding-bottom: 2% }
.padbot-5 { padding-bottom: 5% }
.padbot-10 { padding-bottom: 10% }
.padtop-2 { padding-top: 2% }
.padtop-3 { padding-top: 3% }
.padtop-4 { padding-top: 4% }
.padtop-5 { padding-top: 5% }
.padtop-7 { padding-top: 7% }
.padtop-10 { padding-top: 10% }
.padtopbot-2 { padding-top: 2%; padding-bottom: 2%; }
.padtopbot-3 { padding-top: 3%; padding-bottom: 3%; }
.padtopbot-5 { padding-top: 5%; padding-bottom: 5%; }
.padtopbot-10 { padding-top: 10%; padding-bottom: 10%; }
.nopad { padding: 0; }
.nopad-topbot { padding-top: 0px !important; padding-bottom: 0px !important; }

.floating-div { position: absolute; right: 0; bottom: 0; z-index: 2; height: 60%; width: 100%; }

/* When using vcenter both divs must be set to vcenter. Since it is using
    inline-block elements to center them vertically, it is imperitative that
    the divs have no space between them for example:
    <div>
    </div><!-- 
    --><div>
    </div>
    The comment will remove the space between them. See stackoverflow.com/questions/20547819/.
    I really don't like this solution because if someone edits the files the comments are
    automatiicaly adjusted.  Let me think of a better solution.
*/
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Buttons */
a.viewprint:before {
    font-family: 'FontAwesome';
    content: "\f02f";
    padding-right: 5px;
}

a.previcon:before {
    font-family: 'FontAwesome';
    content: "\f104";
    padding-right: 5px;
}

a.nexticon:after {
    font-family: 'FontAwesome';
    content: "\f105";
    padding-left: 5px;
}

a.editicon:before {
    font-family: 'FontAwesome';
    content: "\f040";
    padding-right: 5px;
}

a.copyicon:before {
    font-family: 'FontAwesome';
    content: "\f0c5";
    padding-right: 5px;
}

/* Telerik Control Override */
.t-dropdown, .t-dropdown-wrap { width: 100% !important; background: #f0f0f0 !important; }
.t-grid { font-size: 12px !important; word-wrap: break-word; }
.t-button {
    background: none !important;
    color: white !important;
    background-color: black !important;
    font-size: 12px !important;
    border: 0px !important;
    padding: 3px 5px !important;
    text-decoration: none !important;
    border-radius: 0px !important;

}

.t-edit, .t-update, .t-cancel, .t-delete, .t-insert, .t-filter-options .t-filter, .t-filter-options .t-clear-filter {
    background-image:none !important; 
    position: relative !important;
      top: 1px !important;
      display: inline-block !important;
      font-family: 'Glyphicons Halflings' !important;
      font-style: normal !important;
      font-weight: normal !important;
      line-height: 1 !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
      font-size: 14px !important;
      text-indent: inherit !important;
}

.t-filter-options .t-clear-filter:before {
  color:white;
   content: "\e014";
}

.t-filter-options .t-filter:before {
    color: white;
    content: "\e138";
}

.t-edit:before{   
  color:green;
   content: "\270f";
}
.t-update:before{   
  color:green;
   content: "\e013";
}
.t-cancel:before{   
  color:red;
   content: "\e014";
}
.t-delete:before{   
  color:red;
   content: "\e014";
}
.t-insert:before{   
  color:green;
   content: "\e013";
}

/* Page specific */
/* Header */
/* not logged in header adjustments */
@media (max-width: 475px) { .header .headerTitle { font-size: 1.5em; } .header .headerImage { height: 50px; } .header { padding-left: 1% !important; padding-right: 1% !important; } }
@media (max-width: 350px) { .header .headerTitle { font-size: 1em; } }
@media (max-width: 275px) { .header .headerImage { height: 50px; } .header { padding-left: 0%; padding-right: 0%; } }
/* logged in header adjustments */
@media (max-width: 950px) { .headerLoggedIn .headerTitle { font-size: 1.25em; } .headerLoggedIn { padding-left: 1% !important; padding-right: 1% !important; } .headerLoggedIn ul { font-size: 16px; } .headerLoggedIn .margin-l-20 { margin-left: 10px; } }
@media (max-width: 320px) { .headerLoggedIn .headerTitle { font-size: 1em; } .navbar-toggle { margin-right: 5px; } }
@media (max-width: 275px) { .headerLoggedIn .headerImage { height: 50px; } .headerLoggedIn { padding-left: 0%; padding-right: 0%; } .headerLoggedIn .headerTitle { font-size: .75em; } }

#loggedInUserInfo { 
    padding-left: 15px; 
    /* Needed for IE divs to display correctly */
    clear: both;
}

/* Footer - This is really the only funky thing because of the positioning of the 
    copyright has to be located near the bottom.  There might be a more elegant 
    solution. vcenter maybe a more appropriate solution.
*/
#footer #logos .img-responsive { display: inline; }
#footer #copyright { height: 50px; }
#footer #links  { height: 60px; }
#footer #copyright span { position:absolute; bottom: 0px; left: 0px; }
#footer #links ul  { position:absolute; bottom: 0px; right: 2%; }
@media (max-width: 767px) {
    #footer #copyright, #footer #links { height: auto; }
    #footer #copyright span, #footer #links ul { position: relative; right: 0; }
}

/* Index Page */
.mainImage { max-height: 300px; overflow-y: hidden; }
.text-shadow { text-shadow: 0px 0px 10px #130c0e; }

/*
@media (max-width: 1030px) { .checkSpan { font-size: 11px; } }
@media (max-width: 880px) { .checkSpan { font-size: 9px; } }
@media (max-width: 767px) { .checkSpan { font-size: 11px; } }
@media (max-width: 400px) { .checkSpan { font-size: 9px; } }
*/

#registration-page > input[type=checkbox] {
 /* Double-sized Checkboxes */
 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
 margin-left: 8px;
}
#registration-page > input[type=checkbox]:focus { outline: none; }

/* Applications Tab */
.navAppsTab > li > a { margin-right: 0px !important;}
.divClose { float: right; position: relative; }
.divClose a { position: absolute; bottom: 11px; right: 20px; height: 32px; font-size: 18px; }
.divClose a.clientSave:before {
    font-family: 'FontAwesome';
    content: "\f00d";
}


/* Application Widget Landing Page */
#appWidgetLandingPage label { margin: 0px; }
#appWidgetLandingPage { word-wrap: break-word; }
/* Invitation */
.invitationLabel label { font-weight: inherit; }

/* Temp */
.border { border: 1px solid red; }

/* Administration Section */

.grid-command-column,.grid-single-command-column {
    text-align: center;
}

.bodyColumnGridFreeText
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor:pointer;
}

.WindowPopupCellDetails { white-space:pre-wrap; }

.t-filter-options { width: 160px !important; }

/* Had to set this so that the pop-ups for Link and Image were not behind this modal window*/
#emailEditor { z-index: 1000 !important; }
input.k-checkbox, .k-radio { opacity: 1 !important; margin-right: 10px !important; }

#EmailTemplateGrid .t-grid-add  {
    background: none !important;
    color: white !important;
    background-color: black !important;
    font-size: 12px !important;
    border: 0px !important;
    padding: 3px 5px !important;
    text-decoration: none !important;
    border-radius: 0px !important;
}
#EmailTemplateGrid .t-icon.t-add { display: none; }
#EmailTemplateGrid .t-grid-add:before {
    padding: 0px 5px 0px 0px;
    font-family: 'FontAwesome';
    content: "\f067";
}

.administration 
{
    width: 100%;
    /*font-size: 105%;     */
    background-color: #f5f3f3; 
    padding: 10px;
    margin: 0px auto;
    margin-bottom: 20px;
}
.administration-ul  
{
   list-style-type: none;
   display:inline;	
}
.administration-ul li
{      
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display:inline;
}