/* Light green 36a125  */

html, body {
  height: 100%;
  background: #dedede;
}

body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1000px) {
  /*
  #header {
      max-height: 164px;
    }
    */
  .losTitle {
      font-family: 'Architects Daughter', cursive;
      font-size: 3.3em;
      line-height: 1.2em;
      margin-left: -35px;
    }

    .losLogo {
      width: 80%;
    }    

    .nav-item {
      font-size: 1.5em;
      margin-right: 30px;
      cursor: pointer;
    }
}

@media (max-width: 999px) {
  .losTitleSmall {
    font-size: 2em;
    margin-left: 0px;
    line-height: 1em;
  }

  .losLogoSmall {
    width: 50%;
    margin-left: 0px;
  }

  .nav-item {
    font-size: 1.2em;
  }
}

@media (max-width: 485px) {
  .losTitleSmall {
    font-size: 1.2em;
  }
}

@media (max-width: 999px) {
  td {
    font-size: .9em;
  }
}

@media (max-width: 485px) {
  td {
    font-size: .7em;
  }
}

a#homeLink:link, a#homeLink:visited, a#homeLink:hover {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.navbar-dark .navbar-nav .nav-link {
  color: #dddddd;
}

/* change the color of active or hovered links  */
.nav-item.active {
  color: white;
  font-weight: 700;
}
.nav-item:hover .nav-link:hover {
  color: white;
}

.container {
  height: 100%;
}

#header {
/*  max-height: 170px;  */
  background: #dddddd;
  width: 100%;
}

#mainContainer {
  display: flex;
  flex-direction: column;

  flex: 1 0 auto;
  /*   height: 100%; */
 

/*  min-height: 100%;  */
  background: #dddddd;
}

#losTitle {
  font-family: 'Architects Daughter', cursive;
}

#topLine {
  height: 15px;
  width: 100%;
  background: #000000;
}

#main-nav {
  background: #000000;
  margin-bottom: 30px;
  text-shadow: 1px 1px 5px #222222;
}

#myFooter {
  text-align: center;
  color: white;
  font-size: .9em;
  width: 100%;
  margin-bottom: 2px;
  background: #36a125;
  flex-shrink: 0;
  margin-top: 10px;
}

/* *********************** LOS style *************************
/* *********************** LOS style *************************

/*  tos - green: #000000  */
/*  tos - orange #f58634 */

/*
body {
  background-color: #eeeeee;
  color: #222222;
}
*/

img {
  border: none;
}

/*
.container {
  height: 100%;
} */
 
#contentDiv {
   padding-top: 30px;
   padding-left: 10px;
   height: 100%;
}

#bigContainer {
   max-width: 900px;
   padding: 5px;
   margin-bottom: 30px;
   border-radius: 15px;
}

#copyrightArea {
/*   position: absolute;
  bottom: 12px;  */
  margin-top: 50px;
  width: 100%;
}

#copyrightText {
   width: 310px;
 margin: auto;
 font-size: 12px;
}



/*******  Button *************/

.tosButton {
  background: #36a125; /*  orange */
  border-radius: 8px;
  font-family: Arial;
  color: white;
  font-size: 1.2em;
  padding: 3px 10px 5px 10px;
  cursor: pointer;
  display: inline-block;
  border: none;
  font-weight: 500;
  border: 2px solid #777777;
}


.losButton {
  background: #ffffff; /*  orange */
  border-radius: 8px;
  font-family: Arial;
  color: white;
  font-size: 1.2em;
  padding: 3px 10px 5px 10px;
  cursor: pointer;
  display: inline-block;
  border: none;
  font-weight: 500;
  border: 2px solid #777777;
}





.tosLargeButton {
  width: 170px;
  height: 70px;
  font-size: 1.5em;
  line-height: 50px;
  text-align: center;
  margin-bottom: 2px;
  text-shadow: 1px 1px 0px #222222;
}

.tosButton > span {
 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}

.tosXLargeButton {
  width: 364px;
}

.tosButton:hover {
 background: #ffffff;
 background-image: -webkit-linear-gradient(top, #ffffff, #a6a6a6);
 background-image: -moz-linear-gradient(top, #ffffff, #a6a6a6);
 background-image: -ms-linear-gradient(top, #ffffff, #a6a6a6);
 background-image: linear-gradient(to bottom, #ffffff, #a6a6a6);
 text-decoration: none;
}

.blueButton {
   background-color: #337ab7;
}

#loadingDiv {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
   background-color: black;
 filter:alpha(opacity=70);
 -moz-opacity:0.70;
 opacity:0.70;
 display: none;
 z-index: 20;
}

#loadingImgAndMsg {
   width: 90px;
 margin: auto;
 margin-top: 300px;
   padding-right: 60px;
}

table.dataTable {
   border-collapse: collapse;
   margin: auto;
   border: 7px solid #555555;
 border-radius: 8px;
}

.dataTable th, .dataTable td {
   border: 1px solid #888888;
}

.dataTable th {
   background-color: #555555;
   color: white;
   padding: 8px;
   font-size: 1.4em;
 font-weight: normal;
   border: 1px solid white;
}

.dataTable td {
   padding: 5px;
   padding-left: 7px;
   padding-right: 7px;
   background-color: white;
}

.genericLink {
   display: block;
   font-weight: bold;
   text-decoration: underline;
 color: blue;
}

.genericLink2 {
   font-weight: bold;
   text-decoration: underline;
 color: blue;
 cursor: pointer;
}

.featureDiv {
  margin-top: 10px;
  margin: auto;
  max-width: 300px;
  border: 1px solid black;
/*   z-index: 5;  */
  border-radius: 18px;
  font-family: sans-serif;
  border: 4px double black;
  box-shadow: 10px 10px 5px #bbbbbb;
}

.featureLink {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
   text-decoration: underline;
   cursor: pointer;
   color: green;
}

.featureTitleDiv {
   color: white;
   width: 100%;
   min-height: 60px;
   background-color: black;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
}

.featureTitle {
   font: lighter;
   font-size: 1.2em;
   padding-top: 18px;
   padding-left: 10px;
}

.featureText {
   padding: 4px;
/*    min-height: 220px;  */
   background-color: #ffffff;
}

.featureBottomDiv {
   width: 100%;
   height: 60px;
   background-color: black;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
}

.closeIt {
   position: relative;
   float: right;
   width: 25px;
   top: 3px;
   right: 10px;
   font-size: 1.2em;
   font-weight: bold;
   background-color: #5b6d4d;
   padding-left: 5px;
   padding-right: 5px;
   border: 1px solid white;
   border-radius: 4px;
}