/**** DATASTAR definitions ****/

   @media screen and (min-width:10px){
      .headLogo{display:none}
      }
   @media screen and (min-width:699px){
      .headLogo{display:table-cell}
      }

   @media screen and (min-width:10px){
      .topSpacer{height:46px;}
      }
   @media screen and (min-width:699px){
      .topSpacer{height:6px;}
      }
   @media screen and (min-width:2000px){
      .topSpacer{height:12px;}
      }


   @media screen and (min-width:10px){
      .topHome{background-image:url(/images/210115_home02_small2.jpg); background-size:cover; background-position:50% 50%; width:100%; height:250px;}
      .wxHome{max-width:100%}
      }
   @media screen and (min-width:500px){
      .topHome{background-image:url(/images/210115_home02.jpg); background-size:cover; background-position:50% 50%; width:100%; height:350px;}
      .wxHome{min-width:40%;max-width:50%}
      }

   @media screen and (min-width:10px){
      .horizMenu{display:none;}
      }
   @media screen and (min-width:699px){
      .horizMenu{display:block;}
      }


/** used in weather/getCond.cgi **/
   @media screen and (min-width:10px){
      .wxPop1{display:inline; margin-left:auto; margin-right:auto;}
      }
   @media screen and (min-width:470px){
      .wxPop1{display:inline; float:left; margin-left:auto; margin-right:auto; width:49.99999%;}
      }

   @media screen and (min-width:10px){
      .wxPopSponsorImg{max-width:268px}
      }
   @media screen and (min-width:470px){
      .wxPopSponsorImg{max-width:200px}
      }
   @media screen and (min-width:699px){
      .wxPopSponsorImg{max-width:325px; margin-left:10px; margin-right:20px}
      }


/** used in getNews.cgi **/
   @media screen and (min-width:10px){
      .newsL{display:inline}
      .newsR{display:inline; float:left; width:100%; padding:0px 8px 0px;}
      .newsAd1{display:none}
      .newsAd2{display:none}
      }
   @media screen and (min-width:470px){
      .newsL{display:inline; float:left; width:220px;}
      .newsR{display:inline; float:left; padding:12px 8px 0px; width:49.99999%;}
      }
   @media screen and (min-width:699px){
      .newsL{display:inline; float:left; width:320px;}
      .newsR{display:inline; float:left; padding:12px 8px 0px; width:53.99999%;}
      .newsAd1{display:inline}
      .newsAd2{display:none}
      h5.newsTitle{font-size:20px!important}
      h6.newsDescr{font-size:18px!important;line-height:1.4em!important}
      }

/** default styles for myModal 'close' button **/
   .close{
      color:#000;
      float:right;
      font-size:16px;
      font-weight:bold;
      }

   .close:hover,
   .close:focus{
      color:yellow!important;
      background:#f00!important;
      text-decoration:none;
      cursor:pointer;
      }

/** style for error 'close' button in pageheader **/
   .closeE{
      color:#000;
      float:right;
      font-size:16px;
      font-weight:bold;
      }

   .closeE:hover,
   .closeE:focus{
      color:#000!important;
      background:#ccc!important;
      text-decoration:none;
      cursor:pointer;
      }


/** https://stackoverflow.com/questions/22457344/masking-input-characters-without-type-password **/
   @font-face{
     font-family: 'password';
     font-style: normal;
     font-weight: 400;
     src: url(/res/fonts/password.ttf);
     }

   input.key{
     font-family: 'password';
     width: 100px; height: 24px;
     }

/** Social media icons **/
   .fa-twitter,.fa-facebook,.fa-youtube{
      padding:8px;
      font-size:16px!important;
      width:32px; height:32px;
      text-align:center;
      text-decoration:none;
      margin:4px 4px;
      border-radius:50%;
      }

   .fa:hover{
      opacity:0.7;
      }

   .fa-twitter{
      background:#55acee;
      color:white;
      }

   .fa-facebook{
      background:#3b5998;
      color:white;
      }

   .fa-youtube{
      background:#b00;
      color:white;
      }

/** Other **/
   footer a.textLink:link{text-decoration:underline}
   footer a.textLink:active{}
   footer a.textLink:visited{}
   footer a.textLink:hover{color:cyan; text-decoration:none}

/* ununsed
   a._NOevent {text-decoration:none;display:block;width:100%;height:100%}
   a._NOevent:active{}
   a._NOevent:visited{}
   a._NOxevent:hover{text-decoration:none}
*/

/**** END ****/