/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

html *
{
    font-family: 'Roboto' !important, sans-serif;
}

body {
  color: #5a5Fa5a;
  font-family: 'Roboto';
  height:100%;
}

[id$=Copyright] {
    font-family: Roboto !important;
    font-size: 8pt !important;
    color: white;
}

.row-padding{
    padding-top: 5px;
    padding-bottom: 5px;
}

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

li {
    font-size: 16px;
    margin-left: 50px;
}

p {
    font-size: 16px;
}

a {
   outline: 0;
}

td {
    padding: 5px;
}

/* Test Directory
-------------------------------------------------- */

.directory {
    margin-top: 50px;
    font-size: 1.5em;
}

.directory td {

    padding: 10px 10px 10px 10px;
}

.directory tr:nth-child(even) {
    background-color:  #FFFDBF ;
}

/*--------------- PowerGrid ----------------------*/
.pg-header a {
    color: white;
}

.pg-header * {
    color: white;
    font-size: 22px;
    font-weight: bold;
}

.pg-content{
    color:white; 
    border: solid 1px #888888; 
    display:none; 
    box-shadow: 2px 2px 5px #888888;
    padding: 10px;
}

.pg-content h4 {
    color: white !important;
}

.pg-content h4 {
    color: white !important;
}

.pg-content p {
    color: white !important;
}

.pg-content a {
    color: white !important;
}

.pg-content a:hover {
    color: white !important;
}

.pg-content a:visited {
    color: white !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

/* Jumbotron
-------------------------------------------------- */
.jumbotron {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    min-height: 190px;
    color: #5C6670;
    /*background-color: #003e7e;*/
    background-color: #002043;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 35%;

}

.jumbotron h1 {
    color: #444444;

}

h1 {
   font-weight: lighter; 
   color: white;
}

.header-gradient{
   
    background-image: linear-gradient(to right, #003366 65%, #0099CC,  #c5c526);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0% 35%;
    margin-bottom: 0px;
    opacity: 0.7;
    min-height: inherit;
}

.jumbotron-text-container{
    color: white;
    position: relative; 
    padding-top: 50px
    
}

.jumbotron-contentPane{
    color:white; 
}

/* BAND CONTENT
-------------------------------------------------- */
.band1{
    padding-top: 1px;
    padding-bottom: 1px;
    width: 100%;
    background-color: #003366;
    color: white;
}



.band2{
    padding-top: 20px;
    padding-bottom: 20px;    
    width: 100%;
}

.band3{
    padding-top: 20px;
    padding-bottom: 20px;    
    width: 100%;
    color: white;
    background-color: #337ab7;
}

.band1 a, 
.band1 a:visited,
.band1 a:hover,
.band2 a,
.band2 a:visited, 
.band2 a:hover,
.band3 a, 
.band3 a:visited,
.band3 a:hover{
    text-decoration: underline !important;
}

.lead-white {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: white;
}

.whiteText {
  color: white;
}

.whiteText a{
  color: white;
}

.whiteText a:hover{
  color: white;
}

.blackText {
  color: black;
}

.blackText a{
  color: black;
}

.blackText a:hover{
  color: black;
}

.lead-blue {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: #337ab7;
}


.marketing{
    padding: 30px;
    font-family: 'Roboto'
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;

}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Google Map
------------------------- */

#wrapper { 
    position: relative;
}

#over_map { 
    height: 250px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    opacity: 0.1;
    cursor: pointer;
    cursor: hand;
 
}

#map {
    width: 100%;
    height: 250px;
    background-color: #FFFFFF;
    border: 2px solid;
    border-bottom-color: #FFFF66;
    border-top-color: #FFFF66;
    border-left: none;
    border-right: none;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 60px 60px;
    content: 'Loading Map'
}

#over_map_large { 
    height: 500px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    opacity: 0.1;
    cursor: pointer;
    cursor: hand;
 
}

#map_large {
    width: 100%;
    height: 500px;
    background-color: #FFFFFF;
    border: 2px solid;
    border-bottom-color: #FFFF66;
    border-top-color: #FFFF66;
    border-left: none;
    border-right: none; 
}


/* ANNOUNCEMENTS CONTENT
-------------------------------------------------- */
.announcment-row{
    vertical-align: middle;
    box-shadow: 1px 1px 1px 1px darkgrey;
    margin: 5px;
    padding: 10px;

}

.announcment-row2{
    vertical-align: middle;
    box-shadow: 1px 1px 1px 1px darkgrey;
    background-color: #f2f1f1;

}

/* Footer
------------------------- */
.footer-container {
    width: 100%;
    background-color: #5C6670;
}

.footer-menu{
    padding-top: 10px;
    padding-bottom: 10px;
    color:white;
}

.footer-menu div a{
    padding-top: 10px;
    color:white;
    font-size: 13pt !important;
}

.footer-small div a{
    font-size: 8pt !important;
    color:white;
}

.copyright {
    color: white;
    text-decoration: none;
font-size: 8pt !important;
}

.copyright:hover {
    color: white;
    text-decoration: none;
}

.copyright:visited {
    color: white;
    text-decoration: none;
}

.termspriv {
	color: white;
    font-size: 8pt !important;
}
.dotpattern {
	height: 50px;
	background-color: white;
    	background-image: url('/Portals/_default/Skins/DLSkin/images/dot_pattern_web.png');
	background-size: 459px 50px;
}

/* Buttons
------------------------- */
#buttons-container{
    background-color: #4D7F71;
}

.parent {
    width: 100%;
    display: table;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}     

.staffportal {
    color: white;
    margin-top: 10px;
}
.staffportal:hover {
    color: white;
    margin-top: 10px;
}
.staffportal:visited {
    color: white;
    margin-top: 10px;
}

.hoverable{
    color:#33CCCC;
    font-size: 16px;

    transition: all 0.5s ease;
}

.hoverable:visited{
    color:#33CCCC;
    font-size: 16px;
    text-decoration: none;

    transition: all 0.5s ease;
}

.hoverable:hover{
    color:#3ae7e7;
    text-decoration: none;
    transform: scale(1.1);
}

.circle{
    border-radius: 50%;

    border: 4px solid white;
    text-align: center;

    width:150px;
    height:150px;
    margin:auto;
    padding-top: 20px;

    background-color: white;

    transition: all 0.5s ease;
}

.circle:hover{
    border: 4px solid yellow;
}

.social {
    color: lightgrey;
    transition: all .3s ease;
    text-decoration: none;
}

.social:visited {
    color: lightgrey;
    text-decoration: none;
}

.social:hover {
    color: white;
    text-decoration: none;

    transform: scale(1.1);

}

.logo {
    margin-top: 10px;
    margin-bottom: 10px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
}

.logo:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}


@media(min-width: 992px) {
    .testCat {
        margin: 2px;
        color: yellow;
        padding: 5px;
        font-size: 1.4em;
        text-decoration: none;

    }
}

@media(max-width: 992px) {
    .testCat {
        margin: 2px;
        color: yellow;
        padding: 5px;
        background-color: #003366;
        margin-right: 20px;
        font-size: 1.4em;

        text-decoration: none;
    }
}

.testCat:hover{

    color: yellow;
    text-decoration: none;
}

.testCat:visited{

    color: yellow;
    text-decoration: none;

}

.lettergrowvert {
    padding-top: 20px;
    text-align: center;


    transition: all 0.1s ease; 
}

.lettergrowvert:hover {
    text-decoration: none;
    transform: scale(1.2);   
}

.lettergrowvert:visited {
    text-decoration: none;

}



.lettergrow {
    transition: all 0.1s ease;  
    background-color: #003366;
}

.lettergrow:hover {
    text-decoration: none;
    transform: scale(1.2);   
}

.lettergrow:visited {
    text-decoration: none;

}



/*Search Control*/
.input-group-addon {
    background-color: aliceblue;
}

.searchIcon {
    color: #003366;
}

.modal-title {
    color: white;
}

.modal-header {
    background-color: #003e7e;
}

/* Design mode View Layout */
.paneOutline {
    outline: 1px solid orangered;

}

/*Print Control*/

.dlPrint {
    transition: all 0.1s ease;  

    color: #337ab7;
    background-color: white;
    margin-top: 20px;
}

.dlPrint:hover {
    text-decoration: none;
    transform: scale(1.2);   
}

.dlPrint:visited {
    text-decoration: none;

}

.center-div
{
     margin: 0 auto;
     width: 1350px;
    margin-top: 50px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-device-width: 480px) {
   .staffportalsmall {
      display: block;
  }   
}

@media (max-device-width: 768px) {
   .staffportalsmall {
      display: none;
  }   
 
}

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

  .staffportalsmall {
      display: none;
  }

       
}

@media (max-width: 1200px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 20px;
  }

  .staffportalsmall {
      display: none;
  }

 
}

@media print {
 
    a[href]:after {
        content: none;
    }

    .jumbotron {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        min-height: 0;
        color: inherit;
        background-color: #002043;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0% 35%;
    }

    .jumbotron-text-container {
        color: white;
        position: static; 
        padding-top: 0px
    }

    div:empty {
        display: none !important;
    }
  
}
/* Front Page buttons
----------------------*/
/* Style for the button container */
    .button-container-frontpage {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px;
    }
    .custom-button-frontpage {
      display: flex;
 	align-items: flex-start;
      align-items: center;
      font-size: 24px;
      padding: 10px 20px;
      background-color: #5C6670;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-bottom: 10px;
      width: 400px; /* Adjusted width for better presentation */
      height: 60px;
      
    }

    .button-icon-frontpage {
      
	 width: 45px; /* Adjust width if necessary */
      height: 50px; /* Adjust height if necessary */
display: flex;
      
    }
.button-icon1-frontpage {
      

	 width: 40px; /* Adjust width if necessary */
      height: 50px; /* Adjust height if necessary */
display: flex;
      
    }

    .button-text-frontpage {
      text-align: left; /* Align text to the right */
    }
.icon-text-space-frontpage {
      margin-right: 22px; /* Adjust margin-right for space between icon and text */
    }
.icon-text-space1-frontpage {
      margin-right: 25px; /* Adjust margin-right for space between icon and text */
    }

    .custom-button-frontpage:hover {
      background-color: #4d7f71;
    }
/* front middle buttons
------------------------*/
.button-container-frontpagemiddle {
      display: flex;
      align-items: center;
justify-content: center;
      margin: 0px;
      width: 100%;
      height: 80px;
      background-color: #4D7F71;
    }

    /* Style for the button */
    .custom-button-frontpagemiddle  {
      display: flex;
      font-size: 19px;
      align-items: flex-start;
      align-items: center; /* Align text at the top */
      
      padding: 10px 10px 10px 10px;
      color: white; /* Text color */
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s; /* Transition color */
      width: 285px;
      height: 70px;
      background: none; /* Remove background color */
      border: none; /* Remove border */
      outline: none; /* Remove button outline on focus */
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 10px;
      margin-left: 10px;
      
    }

    /* Style for the icon */
    .button-icon-frontpagemiddle  {
      
      margin-right: 15px;
      margin-left:0px;
      width: 45px; /* Adjust width if necessary */
      height: 45px; /* Adjust height if necessary */
    }
    .button-icon1-frontpagemiddle  {
      margin-right: 15px;
      width: 40px; /* Adjust width if necessary */
      height: 45px; /* Adjust height if necessary */
    }
    .button-icon2-frontpagemiddle  {
      margin-right: 15px;
      width: 46px; /* Adjust width if necessary */
      height: 45px; /* Adjust height if necessary */
    }
    
    .button-text-frontpagemiddle  {
      text-align: left; /* Align text to the right */
      
    }

    /* Style for the space between icon and text */
    .icon-text-space-frontpagemiddle  {
      margin-right: 4px; /* Adjust margin-right for space between icon and text */
    }
    .icon-text-space1-frontpagemiddle  {
      margin-right: 10px; /* Adjust margin-right for space between icon and text */
    }
    .icon-text-space2-frontpagemiddle  {
      margin-right: 3px; /* Adjust margin-right for space between icon and text */
    }

    /* Hover effect */
    .custom-button-frontpagemiddle:hover {
      background-color: #5B6770;/* Text color on hover */
    }
@media screen and (max-width: 800px) {
      .button-container-frontpagemiddle {
        flex-direction: column; /* Change flex direction to horizontal */
        height:250px; 
	padding-bottom:5px;
      }

/* Contact Us page button
------------------------*/
.button-containerContactUs {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px;
    }
    .custom-buttonContactUs {
      display: flex;
      align-items: center;
      font-size: 24px;
      padding: 10px 20px;
      background-color: #5C6670;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-bottom: 10px;
      width: 400px; /* Adjusted width for better presentation */
      height: 100px;
      
    }

    .button-iconContactUs {
      margin-right: 8px;
    }

    .button-textContactUs {
      text-align: left; /* Align text to the right */
    }


    .custom-buttonContactUs:hover {
      background-color: #4d7f71;
    }