/*MAJOR WARNING - PLEASE DO NOT WORK ON THIS WHEN DISK MEMORY IS LOW OR ANY PROGRESS MADE WILL BE LOST IF DUMPED.*/
/*YOU WILL BE PROMPTED AND WARNED.*/

/*Bootstrap theme name - Calm Night Metroplex*/
/*Bootstrap version - 4.0.0*/
/*A multicolor themed stylesheet based on which city is picked.
It will be based on the colors the cities use for their government site.

*/

/*THIS STYLESHEET RELIES ON THE ORDER OF CSS TO WORK PROPERLY.*/
/*External > Internal > Inline*/
/*This stylesheet is put below the bootstrap min css file. It will overwrite the deafault settings the top css stylesheet has provided to an extent. It works the same with different CSS stylesheets though they'll be overwritten since they're external files by INternal and Inline.*/


/*SO MUCH BLUE! HOW CAN DIS BEEEEEE POSSIBLE..!!!!!! AAAAHHHHHHHHHH...!!!!!
I blame the cities I've picked since they all happen to love blue or dark colors for some reason. WHo would want a hot pink or amazingly purple colored local city government website?
*/

/*They're not going to be the colors that are typed up here at most. .-.
This is what some of us get for using w3Schools HTML color picker. Sure, we've got the color mixer.
*/


/*THE LIST BELOW WILL BE REFERENCED AT HERE AND WITHIN*/


/*Dallas Metroplex- Light blue*/
/*Primary colors - Navigation and potential content - #b3e6ff/#80d4ff/#4dc3ff  - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #538AA6/#46758C/#3A5F73 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #e6f7ff*/

/*Dallas - Dark blue*/
/*Primary colors - Navigation and potential content - #0073e6/#0059b3/#004080 - #595959/#737373/#8C8C8C*/
/*Secondary colors - Text colors and more - #00356B/#002C5A/#002448 - #F2F2F2/#D9D9D9/#BFBFBF */
/*Third color - Body background-color - #b3d9ff*/

/*Fort Worth - Grey blue*/
/*Primary colors - Navigation and potential content - #7C96AF/#6F8FAF/#6389AE - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #254B70/#1F3F5F/#1A344D - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #94A2B0*/

/*Garland - Brown*/
/*Primary colors - Navigation and potential content - #caaa94/#be977b/#b28462 - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #9e591c/#804817/#623812
 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #D6BEAC*/

/*Richardson - Medium Blue*/
/*Primary colors - Navigation and potential content - #668cff/#3366ff/#0040ff - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #172E73/#122459/#0D1A40 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #D6E0FF*/


/*CSS Reset*/
* {margin:0px;
    padding:0px;
    border:0px;
    box-sizing:border-box;}

/*Font Customization*/

h1,h2,h3,h4,h5,h6 {font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:normal;
    padding:0px;
    padding-top:5px;
    padding-bottom:5px;
    margin:auto;}

p {font-family:Arial, Helvetica, sans-serif;
    font-weight:;
    font-style:;
    padding:0px;
    margin:;}

/*You can change these settings in the layout*/
ul {font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:normal;
    list-style-type:none;}
ol {font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:normal;
    list-style-type:;
    margin-left:50px;}
li {font-family:Arial, Helvetica, sans-serif;
    font-weight:;
    font-style:;}

a {text-decoration:none !important;}
/*End of Font Customization*/


/*Layout*/
/*It will go from the order the classes and ids appear on the HTML the best way it can. There will different variations of the same classes.*/





/*Use these ids for the background-image of the body along with the lightest background-color:; for that city.*/
/*Not is silly as the the navigation. I would call this more simplfied version of what is to come. Trust me when I write that it won't be complicated. This only aims at the body. I advise you to use an id since they're aimed that way.*/
 
body {position:relative;}

#body-metroplex {background-color:#e6f7ff;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image: url(/graphics/dfwmetro/dfwmetroplexbody.jpg);
    background-blend-mode:soft-light;}
#body-metroplex p {color:#3A5F73;}
#body-metroplex h1 {color:#3A5F73;}
#body-metroplex h2 {color:#3A5F73;}
#body-metroplex h3 {color:#3A5F73;}
#body-metroplex h4 {color:#3A5F73;}
#body-metroplex h5 {color:#3A5F73;}
#body-metroplex h6 {color:#3A5F73;}
#body-metroplex .factital{font-style: italic;}
#body-metroplex ol{color:#3A5F73;}
#body-metroplex ol li {color:#3A5F73;}
#body-metroplex .container-fluid {background-color:#4dc3ff;}
#body-metroplex #footer {color:#4C4C4C;
    background-color:#FFFFFF;}
#body-metroplex #footer p {color:#4C4C4C;}

#body-dallas {background-color:#b3d9ff;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image: url(/graphics/dallas/dallasbody.jpg);
    background-blend-mode:overlay;}
#body-dallas p {color:#002448;}
#body-dallas h1 {color:#002448;}
#body-dallas h2 {color:#002448;}
#body-dallas h3 {color:#002448;}
#body-dallas h4 {color:#002448;}
#body-dallas h5 {color:#002448;}
#body-dallas h6 {color:#002448;}
#body-dallas .container-fluid {background-color:#0073e6;}
#body-dallas #footer {color:#D9D9D9;
    background-color:#8C8C8C;}
#body-dallas #footer p {color:#BFBFBF;}

#body-fortworth {background-color:#94A2B0;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image: url(/graphics/fortworth/fortworthbody.jpg);
    background-blend-mode:soft-light;}
#body-fortworth p {color:#1A344D;}
#body-fortworth h1 {color:#1A344D;}
#body-fortworth h2 {color:#1A344D;}
#body-fortworth h3 {color:#1A344D;}
#body-fortworth h4 {color:#1A344D;}
#body-fortworth h5 {color:#1A344D;}
#body-fortworth h6 {color:#1A344D;}
#body-fortworth .container-fluid {background-color:#6389AE;}
#body-fortworth #footer {background-color:#FFFFFF;}
#body-fortworth #footer p {color:#4C4C4C;}

#body-garland {background-color:#eaded6;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image: url(/graphics/garland/garlandbody.jpg);
    background-blend-mode:screen;}
#body-garland p {color:#623812;}
#body-garland h1 {color:#623812;}
#body-garland h2 {color:#623812;}
#body-garland h3 {color:#623812;}
#body-garland h4 {color:#623812;}
#body-garland h5 {color:#623812;}
#body-garland h6 {color:#623812;}
#body-garland .container-fluid {background-color:#b28462;}
#body-garland #footer {background-color:#FFFFFF;}
#body-garland #footer p {color:#4C4C4C;}

#body-richardson {background-color:#D6E0FF;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-image: url(/graphics/richardson/richardsonbody.jpg);
    background-blend-mode:soft-light;}
#body-richardson p {color:#0D1A40;}
#body-richardson h1 {color:#0D1A40;}
#body-richardson h2 {color:#0D1A40;}
#body-richardson h3 {color:#0D1A40;}
#body-richardson h4 {color:#0D1A40;}
#body-richardson h5 {color:#0D1A40;}
#body-richardson h6 {color:#0D1A40;}
#body-richardson .container-fluid {background-color:#0040ff;}
#body-richardson #footer {background-color:#FFFFFF;}
#body-richardson #footer p {color:#4C4C4C;}


/*Use these classes to customize the settings for paddings of the container system. Be aware that the .container has a preset max-width:; so do not try to trifle with it.*/
.container {margin:0px auto;
    padding:auto;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:auto;
    padding-right:auto;}
.container-fluid {margin:0px auto;
    padding:auto;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:auto;
    padding-right:auto;}

/*These classes down here are used to set the padding and margins for the rows and columns. Make sure the settings are auto for the padding if you aren't sure. Be sure to test them out locally or Live to see the effects. The background-color:: are there to see the effects.*/
.row {margin:0px auto;
    padding:auto;
    background-color:;}
[class*="col-"] {margin:0px auto;
    padding:auto;
    background-color:;}


/*Modal Classes*/
/*This will be simple, clean and easy to work with.*/
/*The stuff on the top section will be adjustment classes to the modal structure and the bottom will be with color scheme.*/

div.modal.fade {background-color:;
    opacity:auto;}
.modal-content {background-color:;
    margin:0px auto;
    border-radius:2px;}
.modal-header {text-align:center;
    margin:0px auto;}
.modal-title {display:block;
    width:100%;
    position:relative;
    margin:0px auto;}
.modal-dialog .modal-footer {margin:0px auto;}
.modal-content .btn {display:block;
    margin:0px auto;
    width:100%;
    border-radius:2px;}

/*Modal color scheme difference.*/
/*We will apply it as a class and go through what needs to be changed.*/
/*class="modal fade modalbg-city" is the set formula used to call up the classes below from the HTML documents with the respective city names attached to them.*/
.modalbg-dallas {color:#002C5A;}
.modalbg-dallas .modal-content{background-color:#0059b3;
    border:2px solid #002C5A;}
.modalbg-dallas .modal-header{color:#002C5A;
    border-bottom:1px solid #002C5A;}
.modalbg-dallas .modal-footer{color:#002C5A;
    border-top:1px solid #002C5A;}
.modalbg-dallas .btn {background-color:#0059b3;
    border:1px solid #002C5A;
    color:#002C5A;
    transition:all 0s;
    -webkit-transition:all 0s;
    -moz-transition:all 0s;
    -o-transition:all 0s;
    -ms-transition:all 0s;
    -khtml-transition:all 0s;}
.modalbg-dallas .btn:hover {background-color:#0073e6;
    border:1px solid #00356B;
    color:#00356B;}
.modalbg-dallas .btn:active {background-color:#004080;
    border:1px solid #002448;
    color:#002448;}

.modalbg-fortworth {color:#1F3F5F;}
.modalbg-fortworth .modal-content{background-color:#6F8FAF;
    border:2px solid #1F3F5F;}
.modalbg-fortworth .modal-header{color:#002C5A;
    border-bottom:1px solid #1F3F5F;}
.modalbg-fortworth .modal-footer{color:#002C5A;
    border-top:1px solid #1F3F5F;}
.modalbg-fortworth .btn {background-color:#6F8FAF;
    border:1px solid #1F3F5F;
    color:#1F3F5F;
    transition:all 0s;
    -webkit-transition:all 0s;
    -moz-transition:all 0s;
    -o-transition:all 0s;
    -ms-transition:all 0s;
    -khtml-transition:all 0s;}
.modalbg-fortworth .btn:hover {background-color:#7C96AF;
    border:1px solid #254B70;
    color:#254B70;}
.modalbg-fortworth .btn:active {background-color:#6389AE;
    border:1px solid #1A344D;
    color:#1A344D;}

.modalbg-garland {color:#804817;}
.modalbg-garland .modal-content{background-color:#be977b;
    border:2px solid #804817;}
.modalbg-garland .modal-header{color:#804817;
    border-bottom:1px solid #804817;}
.modalbg-garland .modal-footer{color:#804817;
    border-top:1px solid #804817;}
.modalbg-garland .btn {background-color:#be977b;
    border:1px solid #804817;
    color:#804817;
    transition:all 0s;
    -webkit-transition:all 0s;
    -moz-transition:all 0s;
    -o-transition:all 0s;
    -ms-transition:all 0s;
    -khtml-transition:all 0s;}
.modalbg-garland .btn:hover {background-color:#caaa94;
    border:1px solid #9e591c;
    color:#9e591c;}
.modalbg-garland .btn:active {background-color:#b28462;
    border:1px solid #623812;
    color:#623812;}

.modalbg-richardson {color:#122459;}
.modalbg-richardson .modal-content{background-color:#3366ff;
    border:2px solid #122459;}
.modalbg-richardson .modal-header{color:#122459;
    border-bottom:1px solid #122459;}
.modalbg-richardson .modal-footer{color:#122459;
    border-top:1px solid #122459;}
.modalbg-richardson .btn {background-color:#3366ff;
    border:1px solid #122459;
    color:#122459;
    transition:all 0s;
    -webkit-transition:all 0s;
    -moz-transition:all 0s;
    -o-transition:all 0s;
    -ms-transition:all 0s;
    -khtml-transition:all 0s;}
.modalbg-richardson .btn:hover {background-color:#668cff;
    border:1px solid #172E73;
    color:#172E73;}
.modalbg-richardson .btn:active {background-color:#0040ff;
    border:1px solid #0D1A40;
    color:#0D1A40;}

/*Navigation classes*/

/*The classes below are used to set padding, display and other things respectively and act as a template for what's to come below this section.*/

/*These classes are ued to edit th margin, padding, and the sorts.*/

.navbar {
    padding:auto;
    border:0px none;}
a.navbar-brand {padding:auto;}
.collapse.navbar-collapse {padding:0px auto;}
.navbar button.navbar-toggler {border:red solid 2px;}
.navbar li.nav-item {display:;}
.navbar li.nav-item a.nav-link {margin:0px auto;
    margin-top:0px;
    margin-bottom:;
    margin-left:15px;
    margin-right:15px;
    padding:0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:;
    padding-right:;
    height:auto;
    width:125px;
    text-align:center;}
.navbar li.nav-item a.nav-link {color:red;}
.navbar li.nav-item .nav-link:hover{color:green;}
.navbar li.nav-item .nav-link:active {color:blue;}
.navbar li.nav-item.active .nav-link {color:red;}

.disabled {pointer-events:none;}

.navbar .dropdown-menu {padding:0px;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:0px;
    padding-right:0px;}
.navbar .dropdown-item {background-color:red;
    padding:0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:25px;
    padding-right:25px;
    text-align:;}

.navbar button.navbar-toggler {border:#46758C solid 2px;
    background-color:#80d4ff;}
.navbar button.navbar-toggler:hover {border:#538AA6 solid 2px;
    background-color:#b3e6ff;}
.navbar button.navbar-toggler:active {border:;
    background-color:;}

.navbar .span.navbar-toggler-icon {;}
.navbar button.navbar-toggler .fa-bars {font-size:24px;
    margin:0px auto;
    padding:0px;
    color:;}


/*The class below is best used with the spyscroll function. Since we're using custom-made navigation themes that do not have an .active class attached to them.*/
/*.navbar-city .dropdown-item.active*/

/*NAVIGATION COLOR SCHEMES*/
/*This will get complicated real fast. Be sure to rerference the list of colors picked at the top of the stylesheet and the methods of changing the color schemes respectively of the individual assets. Refrain from editing any classes below here.*/
/*Anything with the .navbar before it is an example that can and should be followed.*/

/*.navbar.navbar-dark .nav-item a{;}
The above class is an example template.
    
*/
/*We're going in with .navbar-cityname and the following elements/classes/tags and whatnots.*/


/*Dallas Metroplex- Light blue*/
/*Primary colors - Navigation and potential content - #b3e6ff/#80d4ff/#4dc3ff  - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #538AA6/#46758C/#3A5F73 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #e6f7ff*/

/*Dallas - Dark blue*/
/*Primary colors - Navigation and potential content - #0073e6/#0059b3/#004080 - #595959/#737373/#8C8C8C*/
/*Secondary colors - Text colors and more - #00356B/#002C5A/#002448 - #F2F2F2/#D9D9D9/#BFBFBF */
/*Third color - Body background-color - #b3d9ff*/

/*Fort Worth - Grey blue*/
/*Primary colors - Navigation and potential content - #7C96AF/#6F8FAF/#6389AE - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #254B70/#1F3F5F/#1A344D - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #94A2B0*/

/*Garland - Brown*/
/*Primary colors - Navigation and potential content - #caaa94/#be977b/#b28462 - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #9e591c/#804817/#623812
 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #D6BEAC*/

/*Richardson - Medium Blue*/
/*Primary colors - Navigation and potential content - #668cff/#3366ff/#0040ff - #CCCCCC/#E6E6E6/#FFFFFF*/
/*Secondary colors - Text colors and more - #172E73/#122459/#0D1A40 - #1A1A1A/#333333/#4C4C4C*/
/*Third color - Body background-color - #D6E0FF*/

/*
.navbar-maxw {max-width:100px;}
*/ 

/*METROPLEX*/
.navbar-metroplex {margin:0px auto;
    border-bottom:1px solid #46758C;}
.navbar-metroplex a {color:#46758C;}
.navbar-metroplex button.navbar-toggler {border:#46758C solid 2px;
    background-color:#80d4ff;}
.navbar-metroplex button.navbar-toggler:hover {border:#538AA6 solid 2px;
    background-color:#b3e6ff;}
.navbar-metroplex button.navbar-toggler:active {border:#3A5F73 solid 2px;
    background-color:#4dc3ff;}
.navbar-metroplex button.navbar-toggler .fa-bars {color:#46758C;}
.navbar-metroplex button.navbar-toggler:hover .fa-bars {color:#538AA6;}
.navbar-metroplex button.navbar-toggler:active .fa-bars {color:#3A5F73;}

.navbar-metroplex span.navbar-toggler-icon {;}

.navbar-metroplex li.nav-item a.nav-link {color:#46758C;}
.navbar-metroplex li.nav-item a.nav-link:hover {color:#538AA6;}
.navbar-metroplex li.nav-item a.nav-link:active {color:#3A5F73;}
.navbar-metroplex li.nav-item.active .nav-link {color:#3A5F73;}

.navbar-metroplex .dropdown-menu {background-color:#FFFFFF;
    border:1px solid #46758C;}

.navbar-metroplex .dropdown-item {background-color:#FFFFFF;
    color:#333333;}
.navbar-metroplex .dropdown-item:hover {background-color:#E6E6E6;
    color:#4C4C4C;}
.navbar-metroplex .dropdown-item:active {background-color:#CCCCCC;
    color:#1A1A1A;}
.navbar-metroplex .dropdown-item.active {background-color:#CCCCCC;
    color:#1A1A1A;}

/*DALLAS*/
.navbar-dallas {margin:0px auto;
    border-bottom:1px solid #002C5A;}
.navbar-dallas a {color:#002C5A;}
.navbar-dallas button.navbar-toggler {border:#002C5A solid 2px;
    background-color:#0059b3;}
.navbar-dallas button.navbar-toggler:hover {border:#00356B solid 2px;
    background-color:#0073e6;}
.navbar-dallas button.navbar-toggler:active {border:#002448 solid 2px;
    background-color:#004080;}
.navbar-dallas button.navbar-toggler .fa-bars {color:#002C5A;}
.navbar-dallas button.navbar-toggler:hover .fa-bars {color:#00356B;}
.navbar-dallas button.navbar-toggler:active .fa-bars {color:#002448 ;}

.navbar-dallas span.navbar-toggler-icon {;}

.navbar-dallas li.nav-item a.nav-link {color:#002C5A;}
.navbar-dallas li.nav-item a.nav-link:hover {color:#00356B;}
.navbar-dallas li.nav-item a.nav-link:active {color:#002448;}
.navbar-dallas li.nav-item.active .nav-link {color:#002448;}

.navbar-dallas .dropdown-menu {background-color:#737373;
    border:1px solid #002C5A;}

.navbar-dallas .dropdown-item {background-color:#737373;
    color:#D9D9D9;}
.navbar-dallas .dropdown-item:hover {background-color:#8C8C8C;
    color:#F2F2F2;}
.navbar-dallas .dropdown-item:active {background-color:#595959;
    color:#BFBFBF;}
.navbar-dallas .dropdown-item.active {background-color:#595959;
    color:#BFBFBF;}


/*FORT WORTH*/
.navbar-fortworth {margin:0px auto;
    border-bottom:1px solid #1F3F5F;}
.navbar-fortworth a {color:#1F3F5F;}
.navbar-fortworth button.navbar-toggler {border:#1F3F5F solid 2px;
    background-color:#6F8FAF;}
.navbar-fortworth button.navbar-toggler:hover {border:#254B70 solid 2px;
    background-color:#7C96AF;}
.navbar-fortworth button.navbar-toggler:active {border:#3A5F73 solid 2px;
    background-color:#6389AE;}
.navbar-fortworth button.navbar-toggler .fa-bars {color:#1F3F5F;}
.navbar-fortworth button.navbar-toggler:hover .fa-bars {color:#254B70;}
.navbar-fortworth button.navbar-toggler:active .fa-bars {color:#1A344D;}

.navbar-fortworth span.navbar-toggler-icon {;}

.navbar-fortworth li.nav-item a.nav-link {color:#1F3F5F;}
.navbar-fortworth li.nav-item a.nav-link:hover {color:#254B70;}
.navbar-fortworth li.nav-item a.nav-link:active {color:#1A344D;}
.navbar-fortworth li.nav-item.active .nav-link {color:#1A344D;}

.navbar-fortworth .dropdown-menu {background-color:#FFFFFF;
    border:1px solid #1F3F5F;}

.navbar-fortworth .dropdown-item {background-color:#FFFFFF;
    color:#333333;}
.navbar-fortworth .dropdown-item:hover {background-color:#E6E6E6;
    color:#4C4C4C;}
.navbar-fortworth .dropdown-item:active {background-color:#CCCCCC;
    color:#1A1A1A;}
.navbar-fortworth .dropdown-item.active {background-color:#CCCCCC;
    color:#1A1A1A;}

/*GARLAND*/
.navbar-garland {margin:0px auto;
    border-bottom:1px solid #804817;}
.navbar-garland a {color:#804817;}
.navbar-garland button.navbar-toggler {border:#804817 solid 2px;
    background-color:#be977b;}
.navbar-garland button.navbar-toggler:hover {border:#9e591c solid 2px;
    background-color:#caaa94;}
.navbar-garland button.navbar-toggler:active {border:#623812 solid 2px;
    background-color:#b28462;}
.navbar-garland button.navbar-toggler .fa-bars {color:#804817;}
.navbar-garland button.navbar-toggler:hover .fa-bars {color:#9e591c;}
.navbar-garland button.navbar-toggler:active .fa-bars {color:#623812;}

.navbar-garland span.navbar-toggler-icon {;}

.navbar-garland li.nav-item a.nav-link {color:#804817;}
.navbar-garland li.nav-item a.nav-link:hover {color:#9e591c;}
.navbar-garland li.nav-item a.nav-link:active {color:#623812;}
.navbar-garland li.nav-item.active .nav-link {color:#623812;}

.navbar-garland .dropdown-menu {background-color:#FFFFFF;
    border:1px solid #804817;}

.navbar-garland .dropdown-item {background-color:#FFFFFF;
    color:#333333;}
.navbar-garland .dropdown-item:hover {background-color:#E6E6E6;
    color:#4C4C4C;}
.navbar-garland .dropdown-item:active {background-color:#CCCCCC;
    color:#1A1A1A;}

/*RICHARDSON*/
.navbar-richardson {margin:0px auto;
    border-bottom:1px solid #122459;}
.navbar-richardson a {color:#122459;}
.navbar-richardson button.navbar-toggler {border:#122459 solid 2px;
    background-color:#3366ff;}
.navbar-richardson button.navbar-toggler:hover {border:#172E73 solid 2px;
    background-color:#668cff;}
.navbar-richardson button.navbar-toggler:active {border:#0D1A40 solid 2px;
    background-color:#0040ff;}
.navbar-richardson button.navbar-toggler .fa-bars {color:#122459;}
.navbar-richardson button.navbar-toggler:hover .fa-bars {color:#172E73;}
.navbar-richardson button.navbar-toggler:active .fa-bars {color:#0D1A40;}

.navbar-richardson span.navbar-toggler-icon {;}

.navbar-richardson li.nav-item a.nav-link {color:#122459;}
.navbar-richardson li.nav-item a.nav-link:hover {color:#172E73;}
.navbar-richardson li.nav-item a.nav-link:active {color:#0D1A40;}
.navbar-richardson li.nav-item.active .nav-link {color:#0D1A40;}

.navbar-richardson .dropdown-menu {background-color:#FFFFFF;
    border:1px solid #122459;}

.navbar-richardson .dropdown-item {background-color:#FFFFFF;
    color:#333333;}
.navbar-richardson .dropdown-item:hover {background-color:#E6E6E6;
    color:#4C4C4C;}
.navbar-richardson .dropdown-item:active {background-color:#CCCCCC;
    color:#1A1A1A;}


/*These classes change the navigation bar's color as a whole.*/
.bg-metroplex {background-color:#80d4ff;}
.bg-dallas {background-color:#0059b3;}
.bg-fortworth {background-color:#6F8FAF;}
.bg-garland {background-color:#be977b;}
.bg-richardson {background-color:#3366ff;}


#empty_top {display:block;
    margin:0px auto;
    padding:0px;
    height:55px;}

.btn {margin:0px auto;
    text-align:center;
    outline:none;}

/*For the modal buttons.*/
/*Use inline CSS for the background buttons.*/
/*NOTE OT SELF: The .btn class has a preset border after the button is clicked but is not with any pseudo classes. Please remove the .btn if we're working like this.*/
.container-fluid_modal {padding:auto;
    margin:0px auto;}
.container-fluid_modal [class*="col-"] {padding:0px;
    margin:0px auto;
    margin-top:10px;
    margin-bottom:10px;
    padding-left:10px;
    padding-right:10px;}

button.img-btn_modal {margin:0px auto;
    padding:0px;
    background-color:transparent;
    width:100%;
    height:250px;
    display:inline-block;
    position:relative;
    text-align:center;
    background-size:contain;
    background-image:url(/graphics/dallas/modalbtn-dallaspres.jpg);
    font-size:35px;
    outline:none;
    border-radius:5px;
    border:0px black solid;}
button.img-btn_modal:hover {filter: brightness(2) grayscale(0.5);
    -webkit-filter: brightness(2) grayscale(0.5);
    -moz-filter: brightness(2) grayscale(0.5);
    outline:none;
    border:none;
    }
button.img-btn_modal:active {filter: grayscale(0.5) saturate(0.75);
    -webkit-filter: grayscale(0.5) saturate(0.75);
    -moz-filter: grayscale(0.5) saturate(0.75);
    outline:0px;
    border:none;}
button.img-btn_modal:focus {filter: brightness(2) grayscale(0.5);
    -webkit-filter: brightness(2) grayscale(0.5);
    -moz-filter: brightness(2) grayscale(0.5);
    outline:none;
    border:none;}


/*These classes below are used for border color themes and sizes. Please refer to the color themese for the pesudo classes such as hover, active and the default settings*/
button.img-btn_modal-dallas {border:2px solid #002C5A;
    color:#002C5A;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-dallas:hover {border:2px solid #00356B;
    color:#00356B;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-dallas:active {border:2px solid #002448;
    color:#002448;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-dallas:focus {border:2px solid #00356B;
    color:#00356B;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}

button.img-btn_modal-fortworth {border:2px solid #1F3F5F;
    color:#1F3F5F;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-fortworth:hover {border:2px solid #254B70;
    color:#254B70;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-fortworth:active {border:2px solid #1A344D;
    color:#1A344D;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-fortworth:focus {border:2px solid #254B70;
    color:#254B70;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}

button.img-btn_modal-garland {border:2px solid #804817;
    color:#804817;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-garland:hover {border:2px solid #9e591c;
    color:#9e591c;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-garland:active {border:2px solid #623812;
    color:#623812;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-garland:focus {border:2px solid #9e591c;
    color:#9e591c;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}

button.img-btn_modal-richardson {border:2px solid #3366ff;
    color:#3366ff;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-richardson:hover {border:2px solid #668cff;
    color:#668cff;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-richardson:active {border:2px solid #0040ff;
    color:#0040ff;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}
button.img-btn_modal-richardson:focus {border:2px solid #668cff;
    color:#668cff;
    text-shadow:-1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;}

/*These set of classes are for the home page or Metroplex page. They are the only classes that use a a button combo at most.*/


.btn.img-btn_nonmodal {margin:0px auto;
    padding:0px;
    text-align:center;
    background-color:transparent;
    color:;
    width:;
    height:auto;
    display:inline-block;
    }

.btn.img-btn_nonmodal:hover {color:;}
.btn.img-btn_nonmodal:active {color:;}

button.img-btn_nonmodal {text-align:center;
    margin:0px auto;
    display:;}

a .img-btn_nonmodal img {width:350px;
    height:auto;
    margin:0px auto;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:15px;
    text-decoration:none;
    border:1px solid #1A1A1A;} 
a .img-btn_nonmodal img:hover {border-color:#4C4C4C;
    filter: brightness(1.5) ;
    -webkit-filter: brightness(1.5);
    -moz-filter: brightness(1.5) ;}
a .img-btn_nonmodal img:active {border-color:#1A1A1A;
    filter: brightness(0.75) ;
    -webkit-filter: brightness(0.75);
    -moz-filter: brightness(0.75) ;}
/*Ends right here*/


p.img-btn_text  {text-align:center;
    display:block;
    width:100%;
    font-size:25px;
}
ol.ol-sidebyside {display:block;
    margin:0px auto;}
ol.ol-sidebyside li{display:;
    width:50%;
    float:left;}

/*
.nounderline {text-decoration:none !important;}
*/

.factital {font-style:italic;}

/*Use Inline CSS for the footer since there is no need to use a ID for respective pages and it'll be a waste of space.*/

#footer {padding-top:15px;
    padding-bottom:10px;}

/*End of Layout*/

/*Media queries*/
@media only screen and  (max-width: 1200px) {}

@media only screen and  (max-width: 992px) {
    a .img-btn_nonmodal img {width:300px;
        height:auto;}
    .navbar li.nav-item a.nav-link {width:100%;
        margin-left:0;
        margin-right:0;
        padding-top:5px;
        padding-bottom:5px;}
}

@media only screen and  (max-width: 768px) {
    .navbar li.nav-item a.nav-link {width:100%;
        margin-left:0;
        margin-right:0;
        padding-top:10px;
        padding-bottom:10px;}
    a .img-btn_nonmodal img {width:250px;
        height:auto;}
    ol.ol-sidebyside li {width:100%;}
}


@media only screen and  (max-width: 576px) {
    a .img-btn_nonmodal img {width:200px;
        height:auto;}
    .container-fluid_modal [class*="col-"] {padding-top:5px;
        padding-bottom:5px;}
}

/*In case you are viewing from a phone and if the images go wonky.*/
@media only screen and (max-width:340px) {

}

/*Media End*/