﻿
/* Color sets */

.swBlue         {color: #d0d0d0;}   /*rgb(10,108,203)*/
.swBlueHover    {color: #0054a5;}

.LAFblue        {color: #d0d0d0;}
.LAFteal        {color: #00FF00;}  /*#39a9b6;*/

.LAFblueback    {background-color: #d0d0d0;}
.LAFtealback    {background-color: #00FF00;}

.tangored       {color: #d0d0d0;}  /* RGB(209, 24, 32) */  /* #ff0000 */
.brown          {color: #b64639;}
.tangotan       {color: #b68539;}
.tangogray      {color: #cccccc;}
.white          {color: white;}
.blue           {color: blue;}
.navy           {color: navy;}
.red            {color: red;}
.darkgray       {color: #888;}
.lightgray      {color: #aaa;}

.pinkish {
    background-color: #eee;
}
.tangoredback   {background-color: #d0d0d0;}
.tangobrownback {background-color: #b64639;}
.tangotanback   {background-color: #b68539;}
.tangograyback  {background-color: #cccccc;}

.warningback        {background-color: #f9b0a5 !important;}
.lightyellowback    {background-color: #ffffcc !important;}
.lightgreenback     {background-color: #ccffcc !important;}
.lightblueback      {background-color: #b5ebfe !important;}
.whiteback          {background-color: #fff; }

tangored        {color: #d0d0d0;}       /* This one is an element, not a class and can be used like <tangored>some phrase</tangored>*/
gray            {color: #cccccc;}
maroon          {color: maroon;}
blue            {color: blue;}
black           {color: black;}
green           {color: green;}
red             {color: red;}
bold            {font-weight:bold;}
underline       {text-decoration: underline;}

.noborder       {border-width: 0px;}

/*body {background-color: #fff;}*/


/* Override Foundation settings, change dark-gray text to black. */
label {color: #000000; }



/* Section Headers for the DEALER pages */
h1 {
    /*color: #0B4D8B;*/ /*#00FF00;*/ /*#b64639;     /* Brown*/
    font-size: 2rem;
}

.bold       {font-weight:bold;}
.italic     {font-style:italic;}
.required   {color: #0000CC;}
.noshow     {display:none !important;}

.floatleft  {float:left;}
.floatright {float: right;}
.lmargin10  {margin-left: 10px;}

.hidden     {display: none !important;}

/* This next item is not prefixed with a dot (.) since it is used as an element, not as a class                */ 
/*   e.g.   <nowrap>(213) 555-1212</nowrap>  keeps it from breaking apart and wrapping between area and telno  */
/*          <redtext>Important!</redtext> Read this notice!                                                    */
nowrap  {white-space: nowrap; }
.nowrap  {white-space: nowrap; }
redtext {color: red;}


/* I add this class to DIVs sometimes to add a little extra space either before or after them, as needed */
.spaceAfter {margin-bottom: 1rem;}
.spaceBefore {margin-top: 1rem;}


/* When using TEST Database, diaplay a thin green bar at top of page to indicate that */
.testlabel { color: white; font-weight:bold; font-size: 4pt; }

/*---------------------------------------------------------------------*/
/*                         Header / Navigation                         */
/*---------------------------------------------------------------------*/

companytitle      {color: #d0d0d0; font-weight:bold;}
.top-bar {
    color: black;
    background-color: #e2e2e2;
}
.top-bar-section {
    color: black;
    background-color: #e2e2e2;
}
    .top-bar-section li:not(.has-form) a:not(.button) {
        color: black;
        background-color: #e2e2e2;
    }
    .top-bar-section ul li {
        color: black;
        background-color: #e2e2e2;
    }
.top-bar-section li:not(.has-form) a:not(.button):hover {
color: black;
background-color: #cccccc;
}

.top-bar .toggle-topbar.menu-icon a {
    color: #222 !important ;
}
a.menu-icon span {
    -webkit-box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
    box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
    color: #222 !important;
}   

.row {max-width: 720px;}

.SocialLinks { 
    font-family: Helvetica, Arial, sans-serif;
    font-size: .9em;
    vertical-align: middle;
    color: RGB(0,0,0);
}

a.SocialLinks:link, a.SocialLinks:visited {
    color: RGB(0,0,0);
}

a.SocialLinks:hover, a.SocialLinks:active {
    color: rgb(0, 0, 255);
    text-decoration: underline;
}

.SocialLogos {
    border-style: none; 
    border-color: inherit;
    border-width: 0px; 
    height: 26px; 
    width: 26px; 
    vertical-align: text-bottom;
}

.FooterLinks { 
    font-family: Helvetica, Arial, sans-serif;
    font-size: .9em;
    color: RGB(64,64,64);
    vertical-align: middle;
}

.FooterLinks:link, .FooterLinks:visited {
    color: RGB(64,64,64);
}

.FooterLinks:hover, .FooterLinks:active {
    color: rgb(0, 0, 255);
    text-decoration: underline;
}

.FooterText {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .9em;
    color: RGB(64,64,64);
}

.VerticalGrayBar {
    border-style: none; 
    border-color: inherit;
    border-width: 0px; 
    height: 31px; 
    width: 2px; 
    vertical-align: top;
    margin-left: 5px;
    margin-right: 5px;
}

.VerticalWhiteBar {
    border-style: none; 
    border-color: inherit;
    border-width: 0px; 
    height: 31px; 
    width: 2px; 
    vertical-align: top;
    margin-left: 5px;
    margin-right: 5px;
}



/*---------------------------------------------------------------------*/
/*                              Footer                                 */
/*---------------------------------------------------------------------*/

/*
    Footer Elements
*/

.FooterStripe {
    border: 0px none;
    width: 100%;
    height: 6px;
    background-color: #d0d0d0 ; /*RGB(205,206,208)*/    /* Menubar gray*/
    padding: 0px 0px 0px 0px;
    margin: 0px;
}

/*---------------------------------------------------------------------*/
/*                         Button Overrides                            */
/*---------------------------------------------------------------------*/

button, .button {
    /* Gray fade background */
    /*background: #bbbbbb; /* Old browsers */
    /*background: -moz-linear-gradient(top, #dddddd 0%, #bbbbbb 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, #dddddd 0%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, #dddddd 0%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */
    border: 1px solid #d0d0d0;
    background-color: white;
    /*border-radius: 5px !important;*/
    color: #000;
}
    button:hover, button:focus, .button:hover, .button:focus {
        background-color: #cccccc;
        color: #000;
    }


.bluelink, .bluelink:hover, .bluelink:visited, .bluelink:active {
    color: #3366cc;
    text-decoration: underline;
}

.small-left-medium-right {
    text-align: right;
}

@media only screen and (max-width: 40em) {
    .small-left-medium-right {
        text-align: left !important;
    }
}


hr.hrredfade {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(176,176,176, 0.75), rgba(0, 0, 0, 0));
}


/* Application Items */ 

hr.slim {
    margin: 4px 0px;
}

.toppad6 {
    padding-top: 6px !important;
}

.topmar2 {
    margin-top: 2px !important;
}

.botmar10 {
    margin-bottom: 6px !important;
}

.topmar5r {
    margin-top: .5rem !important;
}

.purplebutton {
    color: #fff;
    background-color: #5a2d9e;
}

.autocorrected {
    border-color: #00bb00 !important;
}

.canaryback {
    background-color: #ffff77;
    padding: 10px;
}

.ltgreenback {
    background-color: #ccffcc;
    padding: 10px;
}

.greenback {
    background-color: #77ff77;
    padding: 10px;
}

.acstreet {
    font-weight: bold;
    margin-left: 25px;
}

.halfspaceAfter {
    margin-bottom: .5rem;
}

.halfspaceBefore {
    margin-top: .5rem;
}

.bottomline {
    border-bottom: 1px solid #d0d0d0;
}


 /* Textboxes */

input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"],
input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
    border-radius: 5px;
}
select {
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}   

/* Target inputs and textareas with the error class */
.error select,
select.error,
.error input,
input.error,
.error textarea,
textarea.error {
    border-color: red !important;
    /* Optional: Add a slight background tint for better visibility */
    background-color: #fafafa;
}

/* Ensure the red border persists when the user focuses on the field */
.error input:focus,
input.error:focus,
.error textarea:focus,
textarea.error:focus {
    border-color: red !important;
    background: #fafafa;
}

/*Turn Off thead drop-down error message*/
small.error {display: none !important;}

.formlabel {font-size: .8rem; display: none;}