/* 2026_SIA_MASTER_HOME_PAGE_01.CSS */

/* ******************************* START OF HTML TEMPLATE CSS ***************************************/

/***********START MY NOTES *********/
/* margin:  TOP RIGHT BOTTOM LEFT */
/*********** END MY NOTES **********/

html {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
  min-height: 100%;
  background-color:#ffffff;
}

/* BEGIN OF TEMPLATE CSS */
/*DIV_MAIN is used to encapsulate the template format to permit centering*/
#div_main {
  margin: auto;
  width: 1200px;
  margin-top:10px;
  position: relative;  
}
#div_header {
    /*background-color: rgb(153, 102, 51);  brown*/
    background-color: rgb(0, 0, 102);   /*darkblue*/
    background-image: none;
    height: 125px;
    width: 1200px;
    margin-top:10px;
    position: relative;
    overflow: visible;    
}
#div_menu_main {
  position: absolute;
  left:0px;
  top:133px;
  width:1200px;  
  height:28px;
  background-color: #000066;     /*darkblue*/
  z-index:-10;
  /* 
  THE DIV_MENU_MAIN IS THE RECTANGLE, it DOES NOT INCLUDE THE MENU ITEMS.  
  THIS WAS DUE TO THE SIA LOGO INTERFERING WITH THE HREF MOUSEOVER OF THE 
  MENU ITEMS.  THE RECTANGLE WAS PUT BEHIND THE LOGO, AND THE MENU ITEMS WERE 
  PUT IN THE MENU_MAIN_OVERLAY CLASS.  BOTH ITEMS ARE POSITION:ABSOLUTE WRT
  DIV_MAIN.
  */
}
#div_scorecard {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);     
  background-image: none;
  height: 60px;
  left: 0px;
  position: absolute;
  top: 170px;
  width: 180px;
}

#div_scorecard_mobile {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: #555;
  background-image: none;
  position: relative;
}

#div_banner_main {
  background-color: transparent;
  background-image: none;
  height: 60px;
  left: 381.333px;
  position: absolute;
  top: 170px;
  width: 468px;
}

#div_banner_main_mobile {
  background-color: transparent;
  background-image: none;
  position: relative;
  padding:10px 0px 6px 0px;
  /*width:469px; /*Needs to be 468+1 to account for the banner IMPRESSION image 1x60px */
  /*width:350px;*/
  /*overflow:hidden;  */
  /*margin:auto;*/
  text-align: center;
  height:60px;
/*  height:45px; */
}

#div_siastore {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);
  background-image: none;
  height: 60px;
  left: 1020px;
  position: absolute;
  top: 170px;
  width: 180px;
}
#div_menu_navbar {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);
  background-image: none;
  width: 180px;
  display:table-cell;
  vertical-align: top;
}
#div_body {
  background-color: transparent;
  background-image: none;
  width: 820px;
  padding:0px 10px 0px 10px;
  display:table-cell;
  vertical-align: top;
}

#div_banner_mini {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);
  background-image: none;
  text-align:center;  
  width: 180px;
  display:table-cell;
  vertical-align: top;
}
#div_footer_lhs {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);
  background-image: none;
  height: 100px;
  width: 180px;
  display:table-cell;
}
#div_footer, #div_footer_mobile {
  background-color: transparent;
  background-image: none;
  height: 100px;
  width: 820px;
  font-size:12px;
  color:#000066;
  text-align:center;
  font-weight:normal;
  background-color:#ffffff;
  display:table-cell;
  padding:0px 10px 0px 10px;
}

#div_footer_mobile {
  border-radius: 0px 0px 6px 6px;
  width:auto;
  display:block; 
  height: auto;
}

#div_footer_rhs {
  /*background-color: rgb(153, 102, 51);  brown*/
  background-color: rgb(0, 0, 102);
  background-image: none;
  height: 100px;
  width: 180px;
  display:table-cell;
}
#img_logo_sia {
  height: 151px;
  left: 368px;
  position: absolute;
  top: 3px;
  width: 484px;
  z-index:0;
}
/*
#img_funpage {
    height: 40px;
    width: 130px;
    left: 12px;
    position: absolute;
    top: 75px;
}
*/
#img_funpage {
    height: 40px;
    width: 130px;
    left: 12px;
    position: absolute;
    top: 50px;
}
#img_dreamhost {
    height: 50px;
    width: 50px;
    left: 12px;
    position: absolute;
    top: 10px;
    display:none;
}
.img_banner_main_image {
  width: 468px;  /* For JPEG and GIF */
  border:1px solid #000080;
}
.mobile_margin_tweak{
  margin-left:auto;    
}

.header_stmt_1 {
  color: rgb(255, 255, 255);  /*white*/
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: 25px;
  left: 12px;
  position: absolute;
  text-align: center;
  top: 3px;
  width: 260px;
}
.header_stmt_2 {
  left: 825px;
  top: 3px;
  transform-origin: 144.5px 12.5px 0px;
  width: 320px;
}

.header_stmt_3 {
  /*color: rgb(255, 0, 0);  /*red*/
  /*color: rgb(255, 255, 0);  /*yellow*/
  color: rgb(0, 255, 0);  /*green*/
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  left: 12px;
  position: absolute;
  text-align: center;
  top: 100px;
}

#img_rssfeed_mouseup {
  height: 28px;
  left: 1164px;
  position: absolute;
  top: 8px;
  width: 28px;
}
#img_rssfeed_mousedown {
  height: 28px;
  left: 1164px;
  position: absolute;
  top: 8px;
  width: 28px;
}
#div_quicksearch {
  position: absolute;
  color: black;
  right:-6px; /*Negative because "canned" button has a 6-10 padding and 8-16 margin */
  top: 75px;
}
#div_quicksearch button {
  float: right;
  padding: 6px 10px 5px 10px;   /*TOP RIGHT BOTTOM LEFT*/
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
#div_quicksearch button:hover {
  background: #ccc;
}
/* 20210207-INPUT fields types include a SEARCH box to use the type=search vs type=text.  The browsers are now setup with an input
            field for SEARCH boxes only.  Firefox, Safari, Chrome all render these differently, with Apple Safari being the most different.
            W3Schools used the type=text vs search to produce a clean square rectangle (no radius callouts required) however Safari shows
            not only radiused corners but a few pixels taller.  Therefore had to call out radis=0 and set the height equiv to font-size 17px.
            When I added input[type="search"] to the callout, things really went wonky because at this point I was now overiding all default
            browser "search" field settings, not just my text_FindPost item. ANS: See answer below, I had the callout wrong so my CSS had no affect.
            Using #text_FindPost input[type="search"]{} and viewing in browser Inspect Element, none of the CSS below is being used.  Only that
            normalize.css and inline. And this was because ... I am an idiot!
            ANSWER: My callout was wrong ... this input tag is within the #div_quicksearch DIV ... the id=text_FindPost has no bearing on this.
                    Using the #text_FindPost (by itself) === #div_quicksearch input[type="search"], that is why nothing happened when I was using
                    #text_FindPost input[type="search"]
*/
#div_quicksearch input[type="search"]{
  /*Note:  #div_quicksearch input[type="search"] === #text_FindPost */
  border: none;
  color:#000066;  
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border-radius: 0px; /*Required for Safari to render properly, it has radius by default whereas others do not*/
  height: 32px;       /*Required for Safari to render more properly, cannot get it to render exactly like Windows Firefox/Chrome*/
}
.swap img:last-child {
  display: none;
}
.swap:hover img:first-child {
  display: none;
}
.swap:hover img:last-child {
  display: inline-block;
}
/*This is for iPad and iPhone but might work for any tablet or mobile.  It basically turns off the swap image for hover incapable devices*/
@media (hover: none) {
  .swap:hover img:first-child {
  display: inline-block;
  }
  .swap:hover img:last-child {
  display: none;
  }
}
/* The below was auto-gen'd by GWD so not really needed.
@media (width: 1200px) and (height: 800px) {
  #div_header {
    left: 0px;
    top: 0px;
  }
}
*/
.text-outline {
    color: #000066;
    font-size: larger;
    text-shadow: -1px -1px 0 #000066, 1px -1px 0 #000066, -1px 1px 0 #000066, 1px 1px 0 #000066;
}

/* BEGIN OF MAIN MENU CSS */
.menu_main_overlay {
  position: absolute;
  left:0px;
  top:133px;
  height:26px;
  z-index:10;
}
/*
.home_icon {
    display:inline-block;
    vertical-align:text-bottom;
    background-image:url('https://192.168.1.10/sia/htdocs/graphics/home-summer_17x17.png');
    background-repeat:no-repeat;
    background-position: right;
}
*/
.menu_main_overlay a {
  float: left;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 4px 10px;
  text-decoration: none;
  background-color: inherit;  
}
.menu_main_overlay a:hover {
  color: #000066;
  background-color: #ffffff;
  /* TOP RIGHT BOTTOM LEFT */
  border-bottom:1px solid #000066;  
  border-top:1px solid #000066;    
}
.menu_main_overlay:hover .home_icon{
    display:none;
}
.dropdown {
  float: left;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-button {
  font-size: 16px;  
  border:1px solid #000066; /*Need this or else a grey border shows up but cannot determine where it is coming from */
  color: #ffffff;
  font-weight: bold;
  padding: 0px 12px;
  background-color: inherit;
  font-family: inherit;
  height:28px; /*Setting HEIGHT here helps SAFARI render the DROPDOWN class same as Chrome & Firefox regular <A>*/
}
.dropdown-button:hover {
  color: #000066;
  background-color: #ffffff;
  border-bottom:1px solid #000066;  
  border-top:1px solid #000066; 
}
.dropdown-content {
  display: none; /*DROPDOWN-CONTENT is normally hidden but when display:block is declared, it needs to know how it looks.*/
  position: absolute;
  background-color: #ffffff;
  border:2px solid #000066;  
  min-width: 128px; /*DONATORS is shortest so need 128 to make it same width as DONATIONS*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
  z-index:1;
}
.dropdown-content a {
  float: none;
  color: #000066;
  padding: 4px 14px;
  text-decoration: none;
  border:1px solid #ffffff;  
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  color: #ffffff;
  background-color: #000066; 
  border: 1px solid white;   /* Need this border around the ANCHOR when hovering to match up with the non-hover ANCHOR border or else the height jiggles */
}

/* ******************************* END OF TEMPLATE CSS ***************************************/

/* *******************************START OF ORIGINAL CSS ***************************************/

/****************************/
/*LG ADDED DIV and CSS STUFF*/
/****************************/
/*
html { 
  background: url(../graphics/keystone2013_036.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html { 
  background: url(../graphics/winter_view.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/

/*This is so Chrome turns the cursor to a hand-pointer when hovering over a form image (Still Time To Donate)*/
input[type=image] {
    cursor: pointer;
}

hr {
    display: block;
    height: 0; 
    border: 2px solid #000066;
    margin: 1em 0;
    padding: 0; 
}
/*
.text-outline {
    color:#ffffff;
    font-size:larger;
    text-shadow:-1px -1px 0 #000066, 1px -1px 0 #000066, -1px 1px 0 #000066, 1px 1px 0 #000066;
}
*/
#navbar {
    font-family:Tahoma, Arial, Helvetica;
    font-size:13px;
    color:#ffffff;
    text-align:left;
    font-weight:bold;
    background-color:#000066;
    position: relative;
}

#navbar a {
    color: white;
}

#navbar a:hover {
    color: red;
}

#navbar a:visited {
    color: yellow;
}

#navbar input[type="email"],
#navbar input[type="password"] {
  padding: 2px;
  border-radius: 4px;
}

table.scorecard {
    font-family:Tahoma, Arial, Helvetica;
    font-size:13px;
    text-align:left;
    font-weight:bold;
    background-color:#000066;
    height:60px;
}

table.scorecard_mobile {
    font-family:Tahoma, Arial, Helvetica;
    font-size:13px;
    text-align:left;
    font-weight:bold;
}

table.scorecard_mobile a {
    color: yellow;
}

table.scorecard_mobile a:hover {
    color: red;
}

table.scorecard_mobile a:visited {
    color: yellow;
}
table.scorecard a {
    color: yellow;
}

table.scorecard a:hover {
    color: red;
}

table.scorecard a:visited {
    color: yellow;
}

/***************************************************************************************/
/* Revise the HEIGHT when adding a new SIDEBARPANEL Entry, Add 60pixels to current     */
/* HEIGHT value and use CTRL+F5 to get the white background to appear                  */
/* THIS IS NO LONGER NECESSARY WITH NEW CSS                                            */
/***************************************************************************************/
#sidebarpanel {
    background-color:#ffffff;
    border: medium solid #ff0000;
    padding: 8px;
    width: 104px;
    /*height: 380px;*/
    margin-left: 28px;
    margin-top: 14px;
    box-sizing: content-box;
}

#sidebarpanel img {
    padding: 5px 0px;
}

#sidebarpanel_mobile {
    width: 100%;
}

/***************************************************************************************/
/* The CODE automatically will start a new FRIEND ROW based on the number of entries   */
/* in the ARRAY_FRIENDPANEL.  However if you are revising the BORDER around the        */
/* revise the BORDER HEIGHT by adding or subtracting 45px to the HEIGHT value below.   */
/***************************************************************************************/
#friendpanel, #friendpanel_mobile {
    font-family:Tahoma, Arial, Helvetica;
    font-size:30px;
    color:#000066;
    text-align:center;
    font-weight:normal;
    background-color:#ffffff;
    position: relative;
    border: medium solid #000066;
    margin-left: 95px;
    width: 625px;
}

#friendpanel, #friendpanel_mobile {
    font-family:Tahoma, Arial, Helvetica;
    font-size:24px;
    margin: auto;
    /*width: 340px;*/
    padding-bottom: 10px;
}

/* Footer table height in the main HTM file is used to remove/add a white space between footer and sidebars*/
#footer {
    font-family:Tahoma, Arial, Helvetica;
    font-size:10px;
    color:#000066;
    text-align:center;
    font-weight:normal;
    background-color:#ffffff;
    position: relative;
    margin-left: 15px;
}

#footer a {
    color:#000066;
}

#footer a:hover {
    color: red;
}

#footer a:visited {
    color: red;
}

table.body {
    font-family:Tahoma, Arial, Helvetica;
    font-size:16px;
    text-align:left;
    font-weight:normal;
    background-color:#ffffff;
/*
background-image:url(../graphics/winter_view.gif);
background-repeat:no-repeat;
background-position:right top;
*/     
    text-decoration:none;
    color: #000066;
}

table.body a {
    color: #000066;
}

table.body a:hover {
    color: red;
}

table.body a:visited {
    color: orange;
}

table.body td.centered {
    text-align: center;
}

table.body td.totaldonations {
    font-family:Tahoma, Arial, Helvetica;
    font-size:28px;
    text-align:center;
    font-weight:bold;
    background-color:#000066;
    text-decoration:none;
    vertical-align: top;
    color: red;
}

table.donatedetails {
    font-family:Tahoma, Arial, Helvetica;
    font-size:16px;
    text-align:right;
    font-weight:normal;
    background-color:#ffffff;
    text-decoration:none;
    color: #000066;
    margin-left:325px;
    border:2px solid #000066;
    border-collapse: collapse;
}

table.donatedetails td {
    border:1px solid #000066;
    padding: 2px;
}

/*added for banner table page*/
table.banner h1, 
table.banner h2,
table.banner h3 {
    font-family:  Tahoma, Arial, Helvetica;
    font-weight: normal;
    /* line-height: 0%; */
    line-height: 15%;
    color:#000066;
}

table.banner h1 {
    /* font-size:42px; */
    font-size:36px;
}

table.banner h2 {
    /* font-size:36px; */
    font-size:30px;
}

table.banner h3 {
    /* font-size:30px; */
    font-size:24px;
}
/*added for banner table page*/

table.body h1, 
table.body h2,
table.body h3 {
    /*font-family:  Mistral, Tahoma, Arial, Helvetica; */
    font-family:  Tahoma, Arial, Helvetica;
    font-weight: normal;
    /* line-height: 0%; */
    line-height: 15%;
    color:#000066;
}

table.body h4, 
table.body h5,
table.body h6 {
    font-family:  Tahoma, Arial, Helvetica;
    font-weight: bold;
    font-size:16px;
    margin-top: 1px;
    margin-bottom: 1px;
}

table.body h1 {
    /* font-size:42px; */
    font-size:36px;
}

table.body h2 {
    /* font-size:36px; */
    font-size:30px;
}

table.body h3 {
    /* font-size:30px; */
    font-size:24px;
}

table.body h4 {
    color:#000066;
}

table.body h5 {
    color: red;
}

table.body h6 {
    color: green;
}

h4, h6 {
    font-family:  Tahoma, Arial, Helvetica;
    font-weight: bold;
    font-size:16px;
    margin-top: 1px;
    margin-bottom: 1px;    
}

h6 {
    color: green;    
}


table.store {
    font-family: Tahoma, Arial, Helvetica;
    font-size:16px;
    text-align:left;
    font-weight:normal;
    background-color:#ffffff;
    text-decoration:none;
    vertical-align: top;
    color: #000066;
}

table.store td.picture{
    text-align:center;
    width: 400px;
}

table.store td.picture div{
    text-align:left;
    position:absolute;
    left:40%;
    visibility:hidden;
}

table.store td.description{
    text-align:left;
}
/***************************************************************************************/
/* CSS CLASS:  BTN                                                                     */
/* Button Class for <button> or <anchor> tags                                          */
/***************************************************************************************/
.btn, .btn_store, .btn_mobile, .btn_contact-seller {
  padding: 4px 8px;
  font-family: tahoma,arial;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  outline: none;  /*  outline:3px solid red; */
  color: #000066;
  background-color: #ccccff;
  border:1px solid #000066;  
  border-radius: 10px;
  width: 235px;
/*  box-shadow: 0 9px #999;  */
}

.btn_submit_reset {
  padding: 4px 8px;
  font-family: tahoma,arial;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  outline: none;  /*  outline:3px solid red; */
  color: #000066;
  background-color: #ccccff;
  border:1px solid #000066;  
  border-radius: 10px;
  width: 235px;
/*  box-shadow: 0 9px #999;  */
}

.btn_store {
  font-size: 18px;
  background-color: #ffffff;
  border-radius: 20px;
  width: 140px;
  margin:15px 21px;  
  /* TOP RIGHT BOTTOM LEFT */
}

.btn_mobile {
  font-size: 18px;
}

.btn_contact-seller {
   padding: 4px 8px;
   font-size: 20px;
}

.btn:hover, .btn_store:hover, .btn_submit_reset:hover, .btn_mobile:hover {
  background-color: #000066;
  border:1px solid #ffffff;  
  color: #ffffff;
}

.btn:visited, .btn_store:visited, .btn_submit_reset:visited, .btn_mobile:visited {
  /*color: #ffffff;*/
  color: red;  
}

/***************************************************************************************/
/* CSS CLASS:  BTN_VANTAGE                                                             */
/* Button Class for <button> or <anchor> tags                                          */
/***************************************************************************************/
.btn_vantage, .btn_vantage_mobile {
  padding: 3px 6px;
  font-family: tahoma,arial;
  font-size: 12px;
  font-weight: bold;
  /*text-align: center;*/
  text-align: left;
  cursor: pointer;
  outline: none;
  color: #003300;
  background-color: #ccffcc;
  border:1px solid #006600;  
  border-radius: 10px;
  width: 350px;
  /*background-image:url('http://192.168.1.10/sia/htdocs/graphics/logo_vantage_redo_98x39.gif');*/
  background-image:url('https://www.ski-it-again.com/graphics/logo_vantage_redo_98x39.gif');
  background-repeat:no-repeat;
  background-position: right;
}

.btn_vantage_mobile {
  padding: 3px 3px;
  width: 320px;
}

.btn_vantage:hover {
  background-color: #009900;
  color: #ffffff;
}
.btn_vantage:visited {
  color: red;  
}

/***************************************************************************************/
/* CSS FOR THE SIGIN-SIGNUP FORM                                                         */
/*                                                                                     */
/***************************************************************************************/

#signin_signupform {
  font-family: tahoma,arial;
  font-size: 18px;
  /*font-weight: bold;*/
  /*text-align: center;*/
  color:#000066;
  text-align: center;
}

#signin_signupform input[type="email"],
#signin_signupform input[type="password"] {
  width:100%;
  padding: 3px;
  border-radius: 4px;
  resize: vertical;
}

#signin_signupform label {
  width:50%;
/*  padding: 9px 3px 3px 0px;  TOP-RIGHT-BOT-LEFT  Has not affect with INLINE.  Works fine with INLINE-BLOCK.  Have to use margin-top on the container*/
/*  display:inline;  */
}

#signin_signupform_container.container {
  border-radius: 20px;
  background-color: #f2f2f2;
  margin:auto;
  width:55%;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #aaa; 
}

/***************************************************************************************/
/* CSS FOR THE MEMBERSHIP FORM                                                         */
/*                                                                                     */
/***************************************************************************************/

#membershipform * { 
  box-sizing: border-box;
}

#membershipform { 
  font-family: tahoma,arial;
  font-size: 14px;
  /*font-weight: bold;*/
  /*text-align: center;*/
  color:#000066;
  text-align: left;
}

/*
input[type="text"], 
input[type="email"],
input[type="password"],
select,
textarea {
  width:100%;
  padding: 3px;
  border-radius: 4px;
  resize: vertical;
}
*/

#membershipform input[type="text"], 
#membershipform input[type="email"],
#membershipform input[type="password"],
#membershipform select,
#membershipform textarea {
  width:100%;
  padding: 3px;
  border-radius: 4px;
  resize: vertical;
}

/*#membershipform2 label,*/
#membershipform label {
  width:100%;
/*  padding: 9px 3px 3px 0px;  TOP-RIGHT-BOT-LEFT  Has not affect with INLINE.  Works fine with INLINE-BLOCK.  Have to use margin-top on the container*/
/*  display:inline;  */
}
/*

#membershipform label {
  width:100%;
  padding: 3px 3px 3px 0px;
}

#membershipform button[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
}

#membershipform button[type=submit]:hover {
  background-color: #45a049;
}
*/

#membershipform_container.container {
  border-radius: 6px;
/*  background-color: #f2f2f2;  
  padding: 5px;                 */
  padding: 0px;
}

#membershipform_container ul {
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.container_left {
  border-radius: 6px;
  width:50%;
  background-color: #e2e2e2;
  padding: 10px;
  height:1675px;
  /*max-height:2000px; */
  border: 1px solid #aaa;
  float:left;
  margin-top: 10px;
}

.container_right {
  margin-left: 51%; 
  border-radius: 6px;
  width:49%;
  background-color: #e2e2e2;
  height:1675px;
  /*max-height:2000px; */
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #aaa;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.container_left_mini {
  border-radius: 6px;
  width:50%;
  background-color: #e2e2e2;
  padding: 5px;
  height:125px;
  border: 1px solid #aaa;
  float:left;
}

.container_right_mini {
  margin-left: 51%; 
  border-radius: 6px;
  width:49%;
  background-color: #e2e2e2;
  padding: 5px;
  height:125px;
  border: 1px solid #aaa;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

#activation_moniker {
    background-color:#000080;
    /*background-color:green;*/
    float:right;
    margin-top:-40px;
    margin-right:25px;
    font-size:20px;
    padding:2px 12px;
    font-weight:bold;
}

/***************************************************************************************/
/* CSS FOR THE POST DETAILS CONTAINER                                                  *
/*                                                                                     */
/*  20220129-Terry Jones reported he could not select the text above the photos.       */
/*  Did not think I had done anything for that but turns out the USER-SELECT statements*/
/*  below are the culprits.  This has no affect on the Account Info or any other page.  */
/*  User Select is disabled on ALL DETAILS AND GALLERY listing VIEWS since their        */
/*  container is a LINK (cant click on text without activating link).  Therefore,       */
/*  disabling this instance should have no adverse affects anywhere else in the website.*/
/***************************************************************************************/
.container_post_details {
  margin-left: 0%; 
  border-radius: 4px;
  border:2px solid #000066; 
  background-color: #ffffff;
  padding: 2px;
/*
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
*/  
  font-size: 13px;
  color: #000066;
  font-family:Tahoma, Arial, Helvetica;
  text-align:left;
}

.container_post_details hr {
    border: 1px solid #000066;
    margin: 5px 0px;
}

/*
.container_post_details h1{
  line-height: 0px;
}
*/

/***************************************************************************************/
/* CSS FOR THE ACTIVE POSTING CONTAINER _ DETAILS VIEW                                 */
/*                                                                                     */
/***************************************************************************************/
.container_activeposting {
  position:relative;
/*  margin-left: 1%;  Removed for Mobile but doesnt appear to adversely affect FULL WEBSITE */ 
  border-radius: 4px;
/*  width:97%;   Removed for Mobile but doesnt appear to adversely affect FULL WEBSITE */
  background-color: #e2e2e2;
  min-height:85px;
  padding: 3px;
  border:1px solid #000066;  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.container_activeposting:hover {
  background-color: #ccccff;
}

.container_activeposting .photo {
    border: 2px solid #000066;
    float: left;
    padding: 0px;
    width: 100px;
    height: 85px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
/*
    background-image:url('https://www.ski-it-again.com/photos/sorry-no-photo.jpg');
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
*/
}

.container_activeposting .postinginfo {
    float: left;
    width: 500px;
    margin: 0px 0px 0px 10px;
    padding: 0px;
    overflow: hidden;
}

.container_activeposting .postinginfo_mobile {
    float: left;
    /*width: 265px;*/
    width:80%;  /*Samsung Galaxy S10*/
    margin: 0px 0px 0px 10px;
    padding: 0;
    overflow: hidden;
}

.container_activeposting .postinginfo .title {
  font-size: 18px;
/*  font-weight: bold; */
  color: #000066;
  margin: 0px 0px 6px 0px;
  width: 475px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container_activeposting .postinginfo_mobile .title {
  font-size: 16px; 
  font-weight: bold;
  color: #000066;
  margin: 0px 0px 2px 0px;
/*  width: 475px;    */
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

.container_activeposting .dealer_flag_mobile {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.container_activeposting .postinginfo .subdetails1 {
    float: left;
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container_activeposting .postinginfo_mobile .subdetails1 {
    float: left;
/*    width: 40%;  */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:normal;
    font-size:12px;
}

.container_activeposting .postinginfo .subdetails2 {
    float: left;
    width: auto;
    min-width: 40%;
    clear: right;
    margin: 0px 10px 4px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container_activeposting .soldremove {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 175px;
    min-height: 50px;
    text-align: left; /*text-align: right;*/
}

.container_activeposting .soldremove .title {
  font-size: 18px;
  font-weight: bold;
  color: #000066;
  margin: 0px 0px 6px 0px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/***************************************************************************************/
/* CSS FOR THE ACTIVE POSTING CONTAINER _ GALLERY VIEW                                 */
/*                                                                                     */
/***************************************************************************************/
.container_activeposting_gallery {
  position: relative;
  margin-left: 2%; 
  border:1px solid #000066;
  border-radius: 4px;
  width:100%;
  background-color: #e2e2e2;
  min-height:250px;
  padding: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.container_activeposting_gallery:hover {
  background-color: #ccccff;
}

.container_activeposting_gallery .dealer_flag {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

.container_activeposting_gallery .motor_hours {
    position: absolute;
    right: 16px;
    top: 10px;
    font-size: 10px;
    color:#000066;
    background-color: white;
    font-weight: bold;
    border-radius: 50%;
    width:65px;
    height:17px;
    padding-top: 3px;
    border:#000066 solid 1px;
}

.container_activeposting_gallery .sizegender {
    position: absolute;
    right: 16px;
    top: 10px;
    font-size: 10px;
    color:#000066;
    background-color: white;
    font-weight: bold;
    border-radius: 50%;
    width:75px;
    height:28px;
    padding-top: 3px;
    border:#000066 solid 1px;
}

.container_activeposting_gallery .photo {
    border: 2px solid #000066;
    height:150px;
/*
    float:inherit;
    padding: 0;
    background-image:url('https://www.ski-it-again.com/photos/sorry-no-photo.jpg');
    background-size: cover;
*/
    background-color:#ffffff;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.container_activeposting_gallery .postinginfo {
/*
    float: left;
    width: 150px;
    margin: 0px 0px 0px 10px;  */
    padding: 0px;
    overflow: hidden;
}

.container_activeposting_gallery .postinginfo .title {
  font-size: 18px;
  color: #000066;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.container_activeposting_gallery .postinginfo .subdetails1 {
    float: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container_activeposting_gallery .postinginfo .subdetails2 {
    float: left;
    width: auto;
    min-width: 100%;
    clear: right;
    margin: 0px 10px 4px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container_activeposting_gallery .soldremove {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 175px;
    text-align: right;
}

.container_activeposting_gallery .soldremove .title {
  font-size: 18px;
  font-weight: bold;
  color: #000066;
  margin: 0px 0px 6px 0px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*The next is for ALL Titles that are children of PostingInfo, but for some reason has to appear after the Parent:Child definitions. */
.postinginfo .title:hover {
    color:red;
}

/***************************************************************************************/
/* CSS FOR THE CONTAINER_CENTER, used by Forms like SIGNIN-SIGNUP FORM, Lost Password  */
/*                                                                                     */
/***************************************************************************************/

.container_center {
  font-size: 18px;
  margin:auto;
  /*width:61%;*/
  width:70%;
  border-radius: 6px;
  background-color: #e2e2e2;
  padding: 10px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.container_center textarea,
.container_center input[type="text"],
.container_center input[type="email"],
.container_center input[type="password"],
.container_center select {
  width:100%;
  padding: 3px;
  border-radius: 4px;
  resize: vertical;
}

 
.container_center label {
    padding-top: 4px;  
    /*TOP-RIGHT-BOT-LEFT  Has not affect with INLINE.  Works fine with INLINE-BLOCK.  Have to use margin-top on the container*/

}

/***************************************************************************************/
/* CSS FOR THE POSTING ACTIVE, SOLD, and NOT SOLD TABS and GAMETRIC                    */
/*                                                                                     */
/***************************************************************************************/
#postings_active_container,
#postings_sold_container,
#postings_notsold_container,
#postings_gametric_container {
  font-family: tahoma,arial;
  font-size: 14px;
  color:#000066;
  text-align: left;
}

#postings_active_container,
#postings_sold_container,
#postings_notsold_container,
#postings_gametric_container {
  border-radius: 6px;
  padding: 0px;
}

#postings_active_container .row,
#postings_sold_container .row,
#postings_notsold_container .row {
    /*height:20px; */
    min-height: 24px;   /*20px is more for the LIST-VIEW template, other TEMPs can alter as needed inline */
    /*line-height:20px; */
    vertical-align:middle;
    white-space:nowrap;
}

.row.odd {background-color:#ffffff;}
.row.even {background-color:#e2e2e2;}

#postings_active_container a.container_link:active
{
    text-decoration: none;
    cursor: pointer;
    color:#000066;
}

#postings_active_container a.container_link:link
{
    text-decoration: none;
    cursor: pointer;
    color:#000066;
}

#postings_active_container a.container_link:visited
{
    text-decoration: none;
    cursor: pointer;
    color:#000066;
}

#postings_active_container a.container_link:hover
{
    text-decoration: none;
    cursor: pointer;
    color:#000066;
}

/***************************************************************************************/
/* CSS FOR DIV ROW COLUMNS                                                             */
/*                                                                                     */
/***************************************************************************************/

/*
.row {
  height: 20px;
  vertical-align:middle;
  white-space:nowrap;
}
*/

.col-1 {
  float: left;
  width: 1%;
  margin-top: 3px;
}

.col-2 {
  float: left;
  width: 2%;
  margin-top: 3px;
}

.col-3 {
  float: left;
  width: 3%;
  margin-top: 3px;
}

.col-4 {
  float: left;
  width: 4%;
  margin-top: 3px;
}

.col-5 {
  float: left;
  width: 5%;
  margin-top: 3px;
}

.col-6 {
  float: left;
  width: 6%;
  margin-top: 3px;
}

.col-7 {
  float: left;
  width: 7%;
  margin-top: 3px;
}

.col-8 {
  float: left;
  width: 8%;
  margin-top: 3px;
}

.col-9 {
  float: left;
  width: 9%;
  margin-top: 3px;
}

.col-10 {
  float: left;
  width: 10%;
  margin-top: 3px;
}

.col-11 {
  float: left;
  width: 11%;
  margin-top: 3px;
}

.col-12 {
  float: left;
  width: 12%;
  margin-top: 3px;
}

.col-13 {
  float: left;
  width: 13%;
  margin-top: 3px;
}

.col-14 {
  float: left;
  width: 14%;
  margin-top: 3px;
}

.col-15 {
  float: left;
  width: 15%;
  margin-top: 3px;
}

.col-16 {
  float: left;
  width: 16%;
  margin-top: 3px;
}

.col-17 {
  float: left;
  width: 17%;
  margin-top: 3px;
}

.col-18 {
  float: left;
  width: 18%;
  margin-top: 3px;
}

.col-19 {
  float: left;
  width: 19%;
  margin-top: 3px;
}

.col-20 {
  float: left;
  width: 20%;
  margin-top: 3px;
}

.col-21 {
  float: left;
  width: 21%;
  margin-top: 4px;
  height:25px;
  padding-top: 4px;
}

.col-22 {
  float: left;
  width: 22%;
  margin-top: 3px;
}

.col-23 {
  float: left;
  width: 23%;
  margin-top: 3px;
}

.col-24CP {
  float: left;
  width: 24%;
  margin-top: 3px;
}

.col-24 {
  float: left;
  width: 24%;
  margin-top: 4px;
  height:25px;
  padding-top: 4px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 3px;
}

.col-28 {
  float: left;
  width: 28%;
  margin-top: 3px;
}

.col-30 {
  float: left;
  width: 30%;
  margin-top: 3px;
}

/* CP = used on Create Post form */
.col-30cp {
  float: left;
  width: 30%;
  margin-top: 5px;
}

.col-31 {
  float: left;
  width: 31%;
  margin-top: 3px;
}

.col-32 {
  float: left;
  width: 32%;
  margin-top: 3px;
}

.col-32cp {
  float: left;
  width: 32%;
  margin-top: 5px;
}

.col-33 {
  float: left;
  width: 33%;
  margin-top: 3px;
}

.col-33cp {
  float: left;
  width: 33%;
  margin-top: 5px;
}

.col-34 {
  float: left;
  width: 34%;
  margin-top: 4px;
  height:27px;
  padding-top: 4px;
}

.col-34cp {
  float: left;
  width: 34%;
  margin-top: 5px;
}

.col-35 {
  float: left;
  width: 35%;
  margin-top: 3px;
}

.col-35cp {
  float: left;
  width: 35%;
  margin-top: 5px;
}

.col-36 {
  float: left;
  width: 36%;
  margin-top: 3px;
}

.col-36cp {
  float: left;
  width: 36%;
  margin-top: 5px;
}

.col-38 {
  float: left;
  width: 38%;
  margin-top: 3px;
}

.col-38cp {
  float: left;
  width: 38%;
  margin-top: 5px;
}

.col-39 {
  float: left;
  width: 39%;
  margin-top: 3px;
}

.col-40 {
  float: left;
  width: 40%;
  margin-top: 3px;
}

.col-40cp {
  float: left;
  width: 40%;
  margin-top: 5px;
}

.col-41 {
  float: left;
  width: 41%;
  margin-top: 3px;
}

.col-42 {
  float: left;
  width: 42%;
  margin-top: 3px;
}

.col-42cp {
  float: left;
  width: 42%;
  margin-top: 5px;
}

.col-43 {
  float: left;
  width: 43%;
  margin-top: 3px;
}

.col-44 {
  float: left;
  width: 44%;
  margin-top: 3px;
}

.col-45 {
  float: left;
  width: 45%;
  margin-top: 3px;
}

.col-46 {
  float: left;
  width: 46%;
  margin-top: 3px;
}

.col-47 {
  float: left;
  width: 47%;
  margin-top: 3px;
}

.col-48 {
  float: left;
  width: 48%;
  margin-top: 3px;
}

.col-49 {
  float: left;
  width: 49%;
  margin-top: 3px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 3px;
}

.col-50cp {
  float: left;
  width: 50%;
  margin-top: 5px;
}

.col-51 {
  float: left;
  width: 51%;
  margin-top: 4px;
  height:25px;
  padding-top: 4px;
}

.col-52 {
  float: left;
  width: 52%;
  margin-top: 3px;
}

.col-53 {
  float: left;
  width: 53%;
  margin-top: 4px;
  height:25px;
  padding-top: 4px;
}

.col-54 {
  float: left;
  width: 54%;
  margin-top: 3px;
}

.col-55 {
  float: left;
  width: 55%;
  margin-top: 3px;
}

.col-56 {
  float: left;
  width: 56%;
  margin-top: 3px;
}

.col-58 {
  float: left;
  width: 58%;
  margin-top: 3px;
}

.col-60 {
  float: left;
  width: 60%;
  margin-top: 3px;
}

.col-60cp {
  float: left;
  width: 60%;
  margin-top: 5px;
}

.col-62cp {
  float: left;
  width: 62%;
  margin-top: 5px;
}

.col-62 {
  float: left;
  width: 62%;
  margin-top: 4px;
  height:25px;
  padding-top: 0px;
}

.col-64 {
  float: left;
  width: 64%;
  margin-top: 3px;
}

.col-65 {
  float: left;
  width: 65%;
  margin-top: 4px;
  height:25px;
  padding-top: 0px;
}

.col-65cp {
  float: left;
  width: 65%;
  margin-top: 3px;
}

.col-66 {
  float: left;
  width: 66%;
  margin-top: 3px;
}

.col-68 {
  float: left;
  width: 68%;
  margin-top: 3px;
}

.col-70 {
  float: left;
  width: 70%;
  margin-top: 3px;
}

.col-71 {
  float: left;
  width: 71%;
  margin-top: 4px;
  height:25px;
  padding-top: 0px;
}

.col-72 {
  float: left;
  width: 72%;
  margin-top: 3px;
}

.col-73 {
  float: left;
  width: 73%;
  margin-top: 3px;
}

.col-74 {
  float: left;
  width: 74%;
  margin-top: 3px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.col-76 {
  float: left;
  width: 76%;
  margin-top: 3px;
}

.col-77 {
  float: left;
  width: 77%;
  margin-top: 3px;
}

.col-78 {
  float: left;
  width: 78%;
  margin-top: 3px;
}

.col-79 {
  float: left;
  width: 79%;
  margin-top: 3px;
}

.col-80 {
  float: left;
  width: 80%;
  margin-top: 3px;
}

.col-85 {
  float: left;
  width: 85%;
  margin-top: 3px;
}

.col-90 {
  float: left;
  width: 90%;
  margin-top: 3px;
}

.col-95 {
  float: left;
  width: 95%;
  margin-top: 3px;
}

.col-100 {
  float: left;
  width: 100%;
  margin-top: 3px;
}

.centered {
text-align: center;
}

/* Clear floats after the columns */
.container_left .row:after {
  content: "";
  display: table;
  clear: both;
}

/* Clear floats after the columns
#membershipform .container_right .row:after {
  content: "";
  display: table;
  clear: both;
}
 */

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other 
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
*/

/***************************************************************************************/
/* CSS FOR THE ACCOUNT MANAGEMENT FORM                                                 */
/*                                                                                     */
/***************************************************************************************/

/* Style tab links */
.tablink, .tablink_mobile {
  background-color: #555;
  color: #ffffff;
  float: left;
  border: 1px solid #000066;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 17px;
  width: 16.65%;
  border-radius: 8px 8px 0px 0px; /*TOP-L TOP-R BOT-L BOT-R */
}

.tablink_mobile {
  float:none;
  width: 100%;
}

.tablink:hover, .tablink_mobile:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: #000066;
  display: none;
  padding: 65px 3px 25px 3px;
  height: 100%; 
/*border:aqua 1px dashed;*/
}

#Account_Info {background-color: #f2f2f2;}
#Posts_Active {background-color: #f2f2f2;}
#Posts_SOLD {background-color: #f2f2f2;}
#Posts_NotSOLD {background-color: #f2f2f2;}
#GA_Metrics {background-color: #f2f2f2;}

/***************************************************************************************/
/* CSS FOR CUSTOM CHECKBOX FOR CONTAINER_RADIOBTN                                      */
/*                                                                                     */
/***************************************************************************************/

 /* Customize the label (the container)  ... display:block*/
.container_radiobtn {
  position: relative;
  padding-left: 27px;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container_radiobtn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  border:1px solid black;

}

/* On mouse-over, add a grey background color */
.container_radiobtn:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container_radiobtn input:checked ~ .checkmark {
  background-color: #000066;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked ... display:block*/
.container_radiobtn input:checked ~ .checkmark:after {
  display: inline;
}

/* Style the indicator (dot/circle) */
.container_radiobtn .checkmark:after {
  top: 5.8px;
  left: 6.2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
} 

#postings_gametric_container_geoworld.container,
#postings_gametric_container_geousa.container,
#postings_gametric_container_geousacity.container,
#postings_gametric_container_linechart.container,
#postings_gametric_container_piechart.container {
  border-radius: 20px;
  background-color: #f2f2f2;
  margin-left: 2%;
  width:92%;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #aaa;
}

/***************************************************************************************/
/* CSS FOR POSTINGS VIEW                                                               */
/*                                                                                     */
/***************************************************************************************/
#postings_view {
  margin-left: 1%; 
  border-radius: 4px;
  width:97%;
  background-color: #e2e2e2;
  height:100px;
  padding: 3px;
  border: 2px solid #aaa;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}




/***************************************************************************************/
/* CSS FOR POSTINGS VIEW - CLASS: DETAILS                                               */
/*                                                                                     */
/***************************************************************************************/
.details {
  margin-left: 1%; 
  border-radius: 4px;
  width:97%;
  background-color: #e2e2e2;
  height:100px;
  padding: 3px;
  border: 2px solid #aaa;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}


/***************************************************************************************/
/* CSS FOR POSTINGS VIEW - CLASS: LIST                                               */
/*                                                                                     */
/***************************************************************************************/


/***************************************************************************************/
/* CSS FOR POSTINGS VIEW - CLASS GALLERY                                               */
/*                                                                                     */
/***************************************************************************************/


/***************************************************************************************/
/* CSS FOR SEARCH LISTINGS - CLASS PAGINATION                                          */
/*                                                                                     */
/***************************************************************************************/

.pagination {
    list-style-type: none;
    text-align: right;
    padding: 2px 0px; 
    display: inline-flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.pagination li {
    box-sizing: border-box;
    padding-right: 8px;
}

.pagination li a {
    box-sizing: border-box;
    background-color: #000066;
    padding: 2px;    
    text-decoration: none;
    font-size: 10px;    
    font-weight: bold;
    color: #ffffff;
    border-radius: 2px;
}

.pagination li a:hover {
    background-color: #ccccff;
}

.pagination .next a, .pagination .prev a {
    text-transform: uppercase;
    font-size: 10px;
}

.pagination .currentpage a {
    background-color: #ccccff;
    color: #000066; 
}

.pagination .currentpage a:hover {
    background-color: #518acb;
}

/***************************************************************************************/
/* CSS FOR HOME PAGE OVERLAY - CLASS OVERLAY                                           */
/* NOTE: See LOADER class for CREATE/REVISE POST spinner                               */
/***************************************************************************************/
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 20; /*The Div_Main_Menu is at z=-10, the Div_Main_Menu_Overlay is at z=10, therefore this overlay needs to be Z>10 to cover ALL */
  top: 0px;
  left: 0px;
  /*background-color: rgb(0,0,0);   Background will be solid Black using the rgb() function.  The rgba() function adds opacity */
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 13%;
  width: 100%;
  text-align: center;
  /*margin-top: 30px;*/
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  /* color: #818181;  */
  color: #ffffff;  
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  /*font-size: 60px;*/
  font-size: 99px;
}

/***************************************************************************************/
/* CSS FOR LOADER SPINNER for CREATE/REVISE POST OVERLAY                               */
/* NOTE: See LOADER class for CREATE/REVISE POST spinner                               */
/***************************************************************************************/
.overlay_fileupload {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 30; /*The Div_Main_Menu is at z=-10, the Div_Main_Menu_Overlay is at z=10, therefore this overlay needs to be Z>10 to cover ALL */
  top: 0px;
  left: 0px;
  /*background-color: rgb(0,0,0);   Background will be solid Black using the rgb() function.  The rgba() function adds opacity */
  background-color: rgba(0,0,0, 0.6);
}

#loader {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -85px 0px 0px -75px;  
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #000060;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


/***************************************************************************************/
/* CSS FOR ADVERTISE PAGE - CLASS OVAL_ADVERTISE                                       */
/*                                                                                     */
/***************************************************************************************/
.oval_advertise {
    position: relative;
    display:inline-block;
    font-size: 18px;
    color:#000066;
    background-color: white;
    font-weight: bold;
    border-radius: 50%;
    width:220px;
    height:32px;
    padding-top: 10px;
    border:#000066 solid 3px;
}

/***************************************************************************************/
/* CSS FOR PHOTO UPLOAD WIDGET                                                         */
/*                                                                                     */
/***************************************************************************************/

/* ORIGINAL UPLOAD WIDGET CSS
#upload_widget {
  /*width: 792px;
  width: 95%;
  background: #ccc;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #000066;
}

#upload_widget ol {
  padding-left: 0px;
}

#upload_widget li, div > p {  ==>>I split up LI and DIV>P
#upload_widget li {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  list-style-type: none;
  /*border: 1px solid black;
  border: 1px solid #000066;
}

#upload_widget div > p {
  background: #eee;
  /*margin-bottom: 5px;
  margin: 6px 0px;
  list-style-type: none;
  /*border: 1px solid black;
  border: 1px solid #000066;
  line-height: 32px;
  /*padding-left: 210px;
  text-align: center;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}

#upload_widget img {
  height: 64px;
  order: 1;
}
/* ORIGINAL UPLOAD WIDGET CSS */

#upload_widget {
  width: 95%;
  background: #ccc;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #000066;
}

#upload_widget ol {
  padding-left: 0px;
}

#upload_widget li {
  background: #eee;
  margin-bottom: 5px;
  list-style-type: none;
  border: 1px solid #000066;
  min-height:64px;
}

#upload_widget div > p {
  background: #eee;
  margin: 6px 0px;
  list-style-type: none;
  border: 1px solid #000066;
  line-height: 32px;
  text-align: center;
  width:100%;
  word-wrap:break-word;
}

#upload_widget img {
  height: 64px;
  order: 1;
}





/*
The following code was from the example which I do not need
#upload_widget p {
  line-height: 32px;
  padding-left: 210Px;
}

#upload_widget label, button {
  background-color: #ccccff;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge #000066;
  font-size: 0.8rem;
  height: auto;
}

#upload_widget label:hover, button:hover {
  background-color: #000066;
  color: white;
}

#upload_widget label:active, button:active {
  background-color: #0D3F8F;
  color: white;
}
*/

/***************************************************************************************/
/* CSS FOR PHOTO ROLLOVER THUMBNAIL on the REVISE POST TEMPLATE
/*                                                                                     */
/***************************************************************************************/

/*
img.thumbnail {
    opacity: 0.5;
}
*/

img.thumbnail + img {
display:none;
}

img.thumbnail:hover + img {
    position: absolute;
    display:block;
}

/***************************************************************************************/
/* CSS FOR MOBILE TEMPLATE                                                             */
/*                                                                                     */
/***************************************************************************************/
.mobile-container {
  margin: auto;
  background-color: #000060;   /*SIA Dark BLUE*/  
  padding: 1px 0px 8px 0px;
  /*height:auto;*/
  color: white;
  border-radius: 0px 0px 10px 10px;
  /*width:360px;*/
  /*width:360px;*/
}

.credentials{
  display: inline-block;
}

.topnav {
  overflow: hidden;
  background-color: #333;   /*Very Dark Grey*/
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.myLinkHeader, #myLinks a {
  font-size:20px;
}

.myLinkHeader{
  color: white;
  padding: 0px 0px 0px 0px;  
  text-decoration: none;
  font-size: 20px;
  display: block;
}  

.topnav a {
  color: white;
  padding: 0px 0px 0px 0px;  
  text-decoration: none;
  font-size: 50px;
  display: block;
}  

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;      /*Very Light Grey*/
  color: black;
}

.header {
  background-color: #000060;   /*SIA Dark BLUE*/
  color: white;
  font-size: 36px;
  /*padding: 12px 25px; */
  padding: 12px 25px 0px 25px;
}

.subheader {
  background-color: #000060;   /*SIA Dark BLUE*/
  color: white;
  font-size: 12px;
  padding: 0px 0px 5px 25px; 
}

.collapsible_header {
  background-color: #000060;
  color: white;
  cursor: pointer;
  padding: 10px; /*Padding between container and text */
  width: 100%;
  text-align: left;
  font-size: 20px;
  border: none;
}

.collapsible_header:after {
  content: "\2212";              /*MINUS SIGN*/
  color: white;                  /*White*/
  font-weight: bold;
  float: right;
  /*border:1px solid aqua;*/
  font-size: 32px;  
  padding:0px;
  margin-top: -10px;
}

.active_header:after {
  content: "\002B";              /*PLUS SIGN*/
}

/* Initial menu buttons */
.menu_btn {
  background-color: #777;      /*Lighter Grey*/
  color: white;
  cursor: pointer;
/*padding: 8px; Padding between container and text */
  width: 100%;
  height:42px;
  border: none;
  /*border:1px solid #000060;*/
  text-align: left;
  /*margin-top:10px;   /*This is margins between collapsible elements, not the inner text */
  /*vertical-align:bottom;*/
  /*outline: thick black;*/
  font-size: 20px;
}

/*
.menu_btn:after {
  content: "\002B";
  color: white;    
  font-weight: bold;
  float: right;
  font-size: 32px;  
  padding:0px;
  margin-top: -10px;
}

.active_menu_btn:after {
  content: "\2212";
}
*/

/* Collapsible buttons */
.collapsible {
  background-color: #777;      /*Lighter Grey*/
  color: white;
  cursor: pointer;
/*padding: 8px; Padding between container and text */
  width: 100%;
  height:42px;
  border: none;
  /*border:1px solid #000060;*/
  text-align: left;
  /*margin-top:10px;   /*This is margins between collapsible elements, not the inner text */
  /*vertical-align:bottom;*/
  /*outline: thick black;*/
  font-size: 20px;
}

.collapsible:after {
/*  content: '\002B';            /*PLUS SIGN*/
  content: "\2212";              /*MINUS SIGN*/  
  color: white;                  /*White*/
  font-weight: bold;
  float: right;
  /*border:1px solid aqua;*/
  font-size: 32px;  
  padding:0px 6px 0px 0px;
  margin-top: -10px;
}

.active:after {
  content: '\002B';            /*PLUS SIGN*/
/*  content: "\2212";            /*MINUS SIGN*/
}

.active, .collapsible:hover, .collapsible_header:hover, .menu_btn:hover {
  background-color: #555;         /*Dark Grey*/
}

.content {
  padding: 0 6px; /*padding from LHS of content container -  TOP-RIGHT-BOT-LEFT or TOP/BOT-RIGHT/LEFT*/
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*background-color: #f1f1f1;      Light Silver*/
  background-color: #ffffff;      /*Light Silver*/  
  color: #000060;                  /*SIA Dark BLUE*/
  font-size: 18px;  
}

#div_embedfile_mobile {
  background-color: transparent; 
  /*background-color: #ffffff;*/
  background-image: none;
  padding:8px 0px;
  vertical-align: top;
  color:#000066;
}

.donate_tally {
  background-color:#000066;
  padding:0px 4px;
  color:#ffffff;
  height:25px;
  font-size:20px;
  font-weight:bold;
  padding:0px 4px;
}

#login_mobile {
    display:block;
    text-align:center;
    padding-top:5px;
    padding-bottom:3px;    
} 

.img_banner {
  width:468px;
  height:60px;
}

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
  width:48%; 
  float:left;
  margin: 0px 25px 10px 0px; 
}

figcaption {
  background-color: #000060;
  color: white;
  font-style: italic;
  font-size: smaller;
  padding: 2px;
  text-align: left;
}

.banner_advert_fullsize {
     width:500px;
     margin:auto;
}
                       
.banner_advert_mini{
  float:left;
  padding-right:10px;"  
} 
    
/* SETUP MOBILE CONTAINER BASED ON SCREEN MAX WIDTHS */
@media screen and (max-width: 768px) {
    .mobile-container {
     max-width: 768px;  
    }
    .topnav a {
      font-size: 40px;
    }
    .header {
      font-size: 32px;
      padding: 12px 20px 0px 20px;
    }    
    .subheader {
      font-size: 10px;
      /* padding: 0px 20px; */
      padding: 0px 0px 4px 20px; 
    }    
    .container_activeposting .postinginfo_mobile {
      float: left;
      width:73%;
    }
   .container_left_mini {
      width:100%;
      float:none;
    }
    .container_right_mini {
      margin-left: 0%; 
      width:100%;
      margin-top: 10px;
    }
    .container_left {
      width:100%;
      float:none;
      height:1675px;      
    }
    .container_right {
      margin-left: 0%; 
      width:100%;
      height:1600px;
    }
    .tabcontent {
      padding: 15px 3px 25px 3px;
    }
}

@media screen and (max-width: 470px) {
    .mobile-container {
      max-width: 470px;  
    }
    .topnav a {
      font-size: 35px;
    }
    .credentials{
      display:block;
      text-align:left;
    }    
    #login_mobile{
      text-align:left;
    }
    .header {
      font-size: 26px;
      padding: 8px 15px 0px 15px;
    }   
    .subheader {
      font-size: 8px;
      /* padding: 0px 15px; */
      padding: 0px 0px 4px 15px; 
    }    
    .img_banner {
      width:100%;      
      /*width:360px;
      height:auto;*/
    }
    .container_activeposting .postinginfo_mobile {
      float: left;
      width:64%;  /*Samsung Galaxy S10*/
    }
    .img_banner_main_image {
      width: 412px;  /* For JPEG and GIF */
      margin-left:-4px;
    }
    .banner_advert_fullsize {
         width:470px;
         margin:auto;    
    }
     #activation_moniker {
    background-color:#000080;
    /*background-color:pink;*/
      margin-left:25%;
      margin-right:25%;
      margin-top:-15px;
      margin-bottom:10px;
      float:none;
    /*font-size:20px;
      padding:2px 12px;*//
      font-weight:bold;
      text-align: center;
      }
}

@media screen and (max-width: 399px) {
    .topnav a {
      font-size: 35px;
    }
    .mobile-container {
      max-width: 399px;  
    }
    .container_left {
      height:1800px;      
    }
    .container_right {
      height:1750px;
    }
    .img_banner_main_image {
      width: 380px; /* For JPEG and GIF */
      margin-left:-4px;      
    }
    .banner_advert_fullsize {
         width:399px;
         margin:auto;             
    }
     #activation_moniker {
      background-color:#000080;
    /*background-color:pink;*/
      margin-left:23%;
      margin-right:23%;
      margin-top:-15px;
      margin-bottom:10px;
      float:none;
    /*font-size:20px;
      padding:2px 12px;*//
      font-weight:bold;
      text-align: center;
      }
    .subheader {
      font-size: 8px;
      /* padding: 0px 15px; */
      padding: 0px 0px 4px 15px; 
    }    
}

@media screen and (max-width: 377px) {
    .img_banner_main_image {
      width: 340px;  /* For JPEG and GIF */
      margin-left:-3px;      
    }
    .banner_advert_fullsize {
     width:360px;
     margin:auto;         
     }
     .mobile_margin_tweak{
      margin-left:-3px;;    
     }
     #activation_moniker {
      background-color:#000080;
    /*background-color:pink;*/
      margin-left:23%;
      margin-right:23%;
      margin-top:-15px;
      margin-bottom:10px;
      float:none;
    /*font-size:20px;
      padding:2px 12px;*//
      font-weight:bold;
      text-align: center;
      }
    .subheader {
      font-size: 8px;
      /* padding: 0px 15px; */
      padding: 0px 0px 4px 15px; 
    }    
}

/* LG END */