
:root { color-scheme: light dark; }


/****************/
/* MOBILE TOOLS */
/****************/
.mobileshow { display:none; }

@media (max-width: 600px) {
  .mobilehide { display:none; }
  .mobileshow { display:block; }
}

/* used to take away the left padding on mobile to save space */
.bodypadding {
  padding-left:15px;
}

@media (max-width: 500px) {
  .bodypadding { padding-left:1px; padding-right:1px; }
}


/***********
/* COLORS */
/**********/
.ww-white { color: light-dark(#000000, #ffffff); background-color: light-dark(#ffffff, #5a5a5a); }

.ww-green { color: #ffffff; background-color: light-dark(#4CAF50, #0C5F10); }
.ww-hover-wwgreen:hover{color:#fff!important;background-color:#59633F!important}

.ww-sportsblue{color:#fff!important;background-color:#195680!important} 

.ww-blue { background-color:light-dark(#0072b5, #0072b5); } /* w3-2021-french-blue */

.ww-maroon { background-color:#77212E; } /* maroon from the WW Logo */

.ww-minastirithbrown { background:#625B45!important; color:#ffffff!important; }

.ww-churchpurple{color:#fff!important;background-color:#572C49!important}
.ww-hover-churchpurple:hover{color:#fff!important;background-color:#572C49!important}

.ww-purple { background-color:light-dark(#9c27b0, #875dc9) }

.ww-light-gray,.ww-hover-light-gray:hover{color: light-dark(#000000, #ffffff); background-color: light-dark(#f1f1f1, #717171); }

.ww-2020-faded-denim {color:#fff!important;background-color: light-dark(#798EA4, #242435); }


/************/
/* PALANTIR */
/************/

/* Palantir Header Setup */
/* Sets here so it can be changed universally */
.ww-palantirheader{ 
  color:#fff!important;
  background-color:#195680!important;  /* ww-sportsblue */
  font-weight:bold;
  font-size:24px!important; 
}


/************/
/* BUTTONS  */
/************/

.ww-back-button { 
  border:none;display:inline-block;padding:8px 16px;vertical-align:middle;text-decoration:none;text-align:center;cursor:pointer;
  /* these properties are all from the w3-button property */ 
  border-radius:8px; /* w3-round-large */
  color:#fff!important;background-color: light-dark(#9c27b0, #875dc9); /* w3-purple */
  margin-bottom:15px;
  margin-right:10px;
  }
.ww-back-button:hover { color:#fff!important;background-color:#4CAF50!important } /* w3-hover-green */

.ww-add-button { 
  border:none;display:inline-block;padding:8px 16px;vertical-align:middle;text-decoration:none;text-align:center;cursor:pointer;
  /* these properties are all from the w3-button property */ 
  border-radius:8px; /* w3-round-large */
  color:#fff!important;background-color: light-dark(#4CAF50, #4cc244);
  margin-bottom:15px;
  }
.ww-add-button:hover { color:#fff!important;background-color:#2196F3!important } /* w3-hover-blue */

.ww-blue-button { 
  border:none;display:inline-block;padding:8px 16px;vertical-align:middle;text-decoration:none;text-align:center;cursor:pointer;
  /* these properties are all from the w3-button property */ 
  border-radius:8px; /* w3-round-large */
  color:#fff!important;background-color: light-dark(#0072b5, #0072b5); /* w3-2021-french-blue */
  margin-bottom:15px;
  }
.ww-blue-button:hover { color:#fff!important;background-color:#4CAF50!important } /* w3-hover-green */

.ww-top-button { 
  border:none;display:inline-block;padding:8px 16px;vertical-align:middle;text-decoration:none;text-align:center;cursor:pointer;
  /* these properties are all from the w3-button property */ 
  border-radius:8px; /* w3-round-large */
  color: light-dark(#000000, #ffffff); background-color: light-dark(#ffffff, #444444);
  margin-bottom:30px;margin-top:15px;
  }
.ww-top-button:hover { color:#fff!important;background-color:#f44336!important; } /* w3-hover-red */


/***************/
/* COLOR BARS  */
/***************/

/* ***** NAVY HEADER BAR ***** */
.ww-navy-bar {
  background-color:#282d3c; /* w3-2020-navy-blazer */
  border: 1px solid light-dark(#282d3c, #ababab);
  color:#ffffff;
  padding:8px 16px;
  border-radius:8px;
  margin-bottom:10px;
  width:300px;
  font-weight:bold;
}

/* ***** NAVY HEADER BAR ***** */
.ww-navy-bar-wide {
  background-color:#282d3c; /* w3-2020-navy-blazer */
  border: 1px solid light-dark(#282d3c, #ababab);
  color:#ffffff;
  padding:8px 16px;
  border-radius:8px;
  margin-bottom:10px;
  max-width:500px;
  font-weight:bold;
}

/* ***** GREEN HEADER BAR ***** */
.ww-green-bar {
  background-color:light-dark(#4CAF50, #4cc244);
  /*border: 1px solid light-dark(#282d3c, #ababab);*/
  color:#ffffff;
  padding:8px 16px;
  border-radius:8px;
  margin-bottom:10px;
  width:300px;
  font-weight:bold;
}

/* ***** BLUE HEADER BAR ***** */
.ww-blue-bar {
  background-color:light-dark(#084e71, #084e71);
  /*border: 1px solid light-dark(#282d3c, #ababab);*/
  color:#ffffff;
  padding:8px 16px;
  border-radius:8px;
  margin-bottom:10px;
  width:300px;
  font-weight:bold;
}


/***************/
/* BOXES       */
/***************/

/* ***** WHITE BOX FOR BODY ***** */
.whitebox {
  width:425px;
  background-color: light-dark(#ffffff, #3a3a3a);
  color: light-dark(#000000, #ffffff);
  border-radius:8px;
  padding:8px;
}

@media (max-width: 500px) {
  .whitebox { width:350px; }
}

.whiteboxwide { 
  margin-top:15px;
  max-width:750px;
  background-color: light-dark(#ffffff, #3a3a3a);
  color: light-dark(#000000, #ffffff);
  border-radius:8px;
  padding:8px;
}


/***************/
/* TABLES      */
/***************/

.ww-table {
  border-collapse:collapse;
  border-spacing:0;
  width:auto;
  display:table;
  border:1px solid #ccc;
}

.ww-table td, .ww-table th { padding:7px 7px; text-align:left; vertical-align:top; }
.ww-table th { background:#195680; color:#ffffff; font-weight:bold; border-right: 1px solid #ccc; }
.ww-table th:first-child,.w3-table td:first-child { padding-left:12px }

.ww-table a { color:light-dark(#000090, #dbadf0); text-decoration:none; }
.ww-table a:hover { color:#ff5f1f; text-decoration:underline; }
.ww-table th a { color:#ffffff; }

.ww-table .highlight { background:#59633f; color:#ffffff; border-bottom: 1px solid #ccc; }
.ww-table .highlight-gray { background:#353535; color:#ffffff; border-bottom: 1px solid #ccc; }
.ww-table .highlight a { color:#c3e3eb; }

.ww-tablenoborder { 
  border-collapse:collapse;
  border-spacing:0;
  width:auto;
  display:table;
  border:0;
}
.ww-tablenoborder td, .ww-tablenoborder th {
  border:0!important;
}

/* ***** TABLE STRIPING ***** */
.ww-striped tbody tr:nth-child(odd){background-color:light-dark(#e5e5e5, #535353); color:light-dark(#000000, #ffffff); }
.ww-striped tbody tr:nth-child(even){background-color:light-dark(#f1f1f1, #353535); color:light-dark(#000000, #ffffff); }

.ww-bordered td{border-bottom:1px solid #888888; border-right: 1px solid #888888;}


/* ***** CHOICES TABLE ***** */
/* used primarily in Silmarils */
.ww-choices-table { 
  border:1px solid #282D3C; 
  border-radius:8px; 
  background:light-dark(#ffffff, #666666); 
  padding:5px; 
  width:100%; 
  border-collapse: collapse;
} 
.ww-choices-table td { 
  border-bottom:1px dotted #000000; 
  empty-cells:show; 
  padding:5px; 
  font-size:16px; 
} 
.ww-choices-table td a { 
  color:light-dark(#000000, #ffffff); text-decoration:none; 
} 
.ww-choices-table td a:hover { color:light-dark(#ff5722, #f2db7e); }
/* ***************************** */


/* ***********************
/* *** FORM FORMATTING ***
/* ***********************

/* ***** FORM BOX ***** */
/* used primarily in Silmarils */
.ww-form-box { 
  border:1px solid #282D3C; 
  border-radius:8px; 
  background:light-dark(#77212E, #666666); 
  color:#ffffff;
  padding:10px; 
  width:500px; 
} 
@media (max-width: 600px) {
  .ww-form-box { width:100%; }  
}

.ww-form-info-box {
  border-radius:8px;
  padding:8px;
  border:2px solid #232323;
  width:300px;
  color: light-dark(#000000, #ffffff); 
  background-color: light-dark(#f1f1f1, #717171);
}

/* ***** FIELD FORMATTING ***** */
.ww-field-title { 
  font-size:18px;
  font-weight:bold; 
  border:1px solid #000000;
  border-radius:8px;
  padding-left:5px;
  padding-right:10px;
  margin-bottom:2px;
  background:#195680; /* ww-sportsblue */
  color:#ffffff; 
  min-width:150px; 
  max-width:250px; 
}
.ww-field-input { 
  font-size:18px; 
  margin-left:5px;
  margin-bottom:10px;
}
.ww-field-black-bubble { 
  font-size:18px;
  font-weight:bold; 
  border:1px solid #000000;
  border-radius:8px;
  padding-left:5px;
  padding-right:10px;
  padding-top:5px;
  padding-bottom:5px;
  margin-bottom:2px;
  background:#191919; /* ww-sportsblue */
  color:#ffffff; 
  min-width:150px; 
  max-width:250px; 
}

/* *****************************/

.ww-img-center { display:block; margin-left:auto; margin-right:auto; }


/* USED PRIMARILY FOR PALANTIR MENU LISTS */
.ww-ul{ list-style-type:none;padding:0;margin:0;width:300px; }
.ww-ul li{ 
	padding:8px 12px;
	border-bottom:1px solid #aaaaaa;
	border-left:2px solid #666666;
	border-right:2px solid #666666;
	font-size:16px;
	background-color: light-dark(#e8e8e8, #222222); }
.ww-ul li a { text-decoration: none; }
.ww-ul li:hover { background:#ff5722; color:#ffffff; }
.ww-ul li:first-child{ border-top:2px solid #666666; }
.ww-ul li:last-child{ border-bottom:2px solid #666666; }
.ww-ul li.ww-blue { color: #ffffff; background-color: light-dark(#2196F3, #333355); }
.ww-ul li.ww-green { color: #ffffff; background-color: light-dark(#4CAF50, #0C5F10); }
.ww-ul li.ww-gray { color: #ffffff; background-color: light-dark(#aaaaaa, #444444); }



