﻿/* 
https://www.canva.com/learn/website-color-schemes/

Scheme 16 BEING USED:
DarkBlue  color:#083C5D;
LightBlue color:#328CC1;
Gold      color:#098310;
Black     color:#1D2731;

Scheme 42:
Red		color:#E14658;
Navy	color:#22252C;
Purple	color:#3F3250;
Beige	color:#C0B3A0;

Scheme 46
Fresh Beige		color:#F7F5E6;
Vermillion Navy	color:#333A56;
Sunshine Blue	color:#52658F;
Clean White		color:#E8E8E8;
*/


/* Google Fonts
@import url('https://fonts.googleapis.com/css?family=Montserrat:Medium,Medium Italic,Bold,Bold Italic');
*/


body {
	font-family: Poppins,Helvetica,sans-serif;
	font-size: 14px;
	background-color: ghostWhite;
	/*
    font-family: 'Alegreya Sans SC', Helvetica, sans-serif;
	font-weight: 300;
	font-style:italic;
	font-size: 14px;
	color:Navy; 
	*/
}

h1 {
	font-family: "Titan One", sans-serif;
	font-size: 2.4em;
	letter-spacing: 1px;
	color: Navy;
	text-align: center;
	margin: 0px auto 0px auto !important;
	font-weight:500;
	-webkit-appearance: none;
}

h2 {
	font-size: 1.8em;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-variant: small-caps;
	font-style: normal;
	color: #328dc2;
	margin: 0px auto 0px auto !important;
}

h3 {
	font-size: 1.4em;
	font-weight: bold;
	color: DarkRed;
	margin: 0px auto 0px auto !important;
}

h4 {
	font-size: 1.0em;
	font-weight: bold;
	color: #0379C7;
	margin: 0px auto 0px auto !important;
}

h5 {
	font-size: 0.6em;
	font-weight: bold;
	color: orange;
	margin: 0px auto 0px auto !important;
}



  
.actionButton {
	padding: 5px 10px 5px 10px !important; 
    color:white !important; 
    height:30px !important; 
    background-color:#328CC1 !important; 
    font-size:14px !important; 
    font-weight:bold !important;
    border-radius: 10px !important;
    -webkit-appearance: none;
}
  
.contentPanel	/* white raised panel, contains one or more areas of content on a page */
{
	display:inline-block;
	width:100%;
	border-style:none;
    padding: 10px 0px 10px 0px;
}

.basePanel {
	display: inline-block;
	margin: 5px 5px 5px 0px;
	min-width: 200px;
	max-width: 300px;
	/*width:90%;*/
	left:-15px;
	border: solid 3px #78AEC6;
	padding: 10px 10px 20px 10px;
	vertical-align: top;
	font-size: 1em;
	background-color: white;
	border-radius: 15px;
	box-sizing: border-box;
}

.memberPanel {
	display: inline-block;
	margin: 5px;
	min-width: 120px;
	max-width: 280px;
	border: solid 3px darkgray;
	padding: 10px 10px 20px 10px;
	vertical-align: top;
	font-size: 10px;
	background-color: gainsboro;
	border-radius: 10px;
	-webkit-box-shadow: 10px 10px 10px -1px rgba(0,0,0,8);
	-moz-box-shadow: 10px 10px 10px -1px rgba(0,0,0,8);
	box-shadow: 10px 10px 10px -1px rgba(0,20,80,0.8)
}
.memberName {
	font-size: 2.0em;
	font-weight: bold;
	color: Black;
	margin: 0px auto 0px auto !important;
}
.memberName2 {
	font-size: 1.6em;
	font-weight: bold;
	color: Black;
	margin: 0px auto 0px auto !important;
}

/**************** Text Input **************/
input[type=text],
input[type=password] {
	color:Navy;
	font-size:1em;
}
.textArea {
	color:Navy;
	font-size:1.5em; 
}

/**************** Tables **************/
table {
	/* width: 100%; */
	padding:0px;
    border-collapse: collapse;
    border-spacing: 0px;
    border-color: White;
    border-style:none;
	color: Black;
}

th 
{
	padding:7px;
	font-size:14px;
	font-weight: 800;
	text-align:center;
	background: DarkGreen;  /* #4CAF50; */ 
	color:White;
}

.calendarGrid tr {
	background: white;
	padding:10px;
}
.tableGrid.striped tr {
	background: White;
}	
.tableGrid.striped tr:nth-of-type(odd) {
	background: #FAFAFA;
}



tr 
{
}

td
{
	border-style:none;
}

.tableGrid {
	width: 100%;
	padding:0px;
	border:solid 1px navy;
}
.tableGrid.noBorder 
{
	border-style:none;
}
.tableGrid tr {
	height:20px;
    border-collapse: separate;
    border:solid 1px navy;
}

.tableGrid td 
{
	text-align:center;
    border:solid 1px navy;
    padding:5px;
}

.tableNoGrid {
	width: 100%;
	padding:5px;
	border: solid 1px navy;
    border-radius: 10px;
    border-collapse: collapse;
    border-spacing: 0px;
}
.tableNoGrid tr {
	height:36px;
	border-style:none;
}



.tableNoGrid td 
{
	border-style:none;
	text-align:center;
}




a
{
	font-size:1.0em;
	font-weight:bold;
    text-decoration:underline;
    color:Green;
}

a:hover
{
    color:Maroon;
}
	
.drag { position: relative; }      
.dragme{position:relative;}

	


p, ul, li
{
	margin-top: 0px;
	margin-bottom: 0px;
}

Select 
{
    font-size: 1.2em;
    padding:2px 1px 2px 1px;
	border: 1px solid black;
	color: Black;
}

/**************** Mobile Tooltips **************/
.tooltip-container {
	position: relative;
	display: inline-block;
	margin: 50px;
	font-size: 20px;
}

.tooltip-text {
	visibility: hidden;
	background-color: black;
	color: white;
	padding: 6px 10px;
	border-radius: 6px;
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 10;
}

.tooltip-container.show .tooltip-text {
	visibility: visible;
}

/******************* Photos ************/
.photoAlbumCover {
	margin: 10px;
	background-color: lightGray;
	border-style: none;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
	-webkit-box-shadow: 10px 10px 10px -1px rgba(0,0,0,8);
	-moz-box-shadow: 10px 10px 10px -1px rgba(0,0,0,8);
	box-shadow: 10px 10px 10px -1px rgba(0,20,80,0.8)
}

.photo {
	width: 90%;
	margin: 3px;
	border: solid 4px darkgray;
	border-radius: 15px;
	-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,8);
	-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,8);
	box-shadow: 5px 5px 5px -1px rgba(0,20,80,0.8);
}

.albumCaption {
	font-size: 12px;
}

.photoCaption {
	font-size: 12px;
}

.photoCaptionLarge {
	font-size: 16px;
	margin-top:-20px;
}

.photoCaptionSmall {
	font-size: 12px;
}

/***************** Buttons **************/
input[type=button],input[type=submit],.button {
	display: inline-block;
    padding: 6px 15px;
    font-size: 14px;
    font-weight:bold;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px #999;
    opacity:1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type=button]:hover,input[type=submit]:hover,.button:hover {
	color: white;
	background-color: #3e8e41
}

input[type=button]:active,input[type=submit]:active,.button:active {
    background-color: #3e8e41;
    box-shadow: 0 3px #666;
    transform: translateY(2px);
}
 
input[type=button].smallest,input[type=submit].smallest {
	font-size:1em;
	font-weight:500;
	padding: 3px 11px;
	border-radius: 4px;
	margin:0px 0px 8px 0px;
}

input[type=button].smaller,input[type=submit].smaller {
	font-size:1em;
	font-weight:600;
	padding: 6px 14px;
	border-radius: 6px;
	margin:0px 2px 10px 2px;
}
	
input[type=button]:disabled,input[type=submit]:disabled {
	background: #dddddd;
	cursor:default;
} 

input[type=button].larger,input[type=submit].larger {
	font-size:16px;
	font-weight:700;
	padding: 8px 14px;
	border-radius: 6px;
	margin:0px 2px 10px 2px;
}

input[type=date], input[type=time], input[type=datetime-local] {
	font-family: Poppins,Helvetica,sans-serif;
	color: Navy;
	font-size: 1.2em;
	height: 24px;
	border: solid 1px black;
	background-color: White;
	-webkit-appearance: none;
}

input[type=file] {
	font-family: Poppins,Helvetica,sans-serif;
	font-size: 1.2em;
}

.helpTextInfo {
	font-size: 14px;
	font-style: italic;
	color: Navy;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width:80%;
	max-width: 600px;
}
.helpTextOK {
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: Green;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 80%;
	max-width: 600px;
}
.helpTextKO {
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: Red;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 80%;
	max-width: 600px;
}


.signUpInput {
	font-size: 16px !important;
	width: 80% !important;
	height: 95% !important;
	border: solid 1px LightGray !important;
}


:placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-family: Poppins,Helvetica,sans-serif;
	color: gray !important;
	font-size: 1.0em !important;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: gray !important;
    font-size:12px !important;
}

:-ms-input-placeholder { /* Microsoft Edge */
    color: gray !important;
    font-size:12px !important;
} 



.PrintOnly
{
	display: none;
}




.postingCellLeft
{
	background-color:white;
	border:solid 1px navy;
	padding:20px;
	text-align:center;
	border-style:solid;
	border-width:1px;
	width:100%;	
}
.postingCellNotice
{
	background-color:yellow;
}
.postingCellRight
{
	background-color:LightGray;
	border:solid 1px navy;
	text-align:center;
	padding:10px;
	border-width:1px;
}
.postingCellLeftEdit
{
	background-color:LightGray;
	border:solid 1px navy;
	padding:20px;
	text-align:center;
	text-align:center;
	border-width:1px;
}
.postingCellRightEdit
{
	background-color:LightGray;
	border:solid 1px navy;
	padding:10px;
}

.calendarGrid {
	width: 95%;
	border: solid 1px navy;
	border-radius: 10px;
	border-collapse: collapse;
	border-spacing: 0px;
	font-size: 0.8em;
}
.calendarGrid tr {
	height:36px;
	border-style:none;
}
  
.calendarGrid td {
	border:solid thin navy;
	padding:5px;
}

.calendarToday 
{
	background-color: LightGreen;
}
.calendarMultiDayEvent {
	display: inline-block;
	padding: 5px;
	margin: 2px;
	background-color: Navy;
	color: White;
	font-size: 0.8em;
}
.calendarOneDayEvent {
	display: inline-block;
	padding: 5px;
	margin: 2px;
	background-color: Green;
	color: White;
	font-size: 0.8em;
}


@media print 
{
	/* Print stylesheet overrides to go in here */
	.NonPrintable
	{
		display:none;
	}
	.PrintOnly
	{
		display:inline-block;
	}
}

@media screen and (max-width: 460px) {
	.calendarGrid {
		font-size: 0.25em !important;
	}

	.calendarMultiDayEvent {
		padding: 2px;
		margin: 0px;
		font-size: 0.1em !important;
	}

	.calendarOneDayEvent {
		padding: 2px;
		margin: 1px;
		font-size: 0.1em !important;
	}
}




.poppins-thin {
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.poppins-extralight {
	font-family: "Poppins", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.poppins-light {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.poppins-regular {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.poppins-medium {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.poppins-semibold {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.poppins-bold {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.poppins-extrabold {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.poppins-black {
	font-family: "Poppins", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.poppins-thin-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.poppins-extralight-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 200;
	font-style: italic;
}

.poppins-light-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.poppins-regular-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.poppins-medium-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.poppins-semibold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: italic;
}

.poppins-bold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.poppins-extrabold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-style: italic;
}

.poppins-black-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 900;
	font-style: italic;
}

.titan-one-regular {
	font-family: "Titan One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

	