@charset "utf-8";
/**************** Overall Styling *********************/
html {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
main {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-image: url(../images/IMG_0355.JPG);
}
body {
    background-color: #F5DEB3;
    background-color: tan;
    background-color: navajowhite;
    background-color: burlywood;
    xbackground-image: url(../images/IMG_0355.JPG);
}
hr.money
{	border: 1px dotted blue;}
/**************** Header Section *********************/
header {
    text-align: center;
}
/**************** Navigation Section *********************/
nav {
    background-color: #2E0E03;
}
nav a {
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    float: left;
}
nav a:link {
    color: #AAA;
}
nav a:visited {
    color: #FFF;
}
nav a.active {
    background-color: #4A9EDA;
    color: white;
}
nav a:hover {
    background-color: #1E6597;
    color: white;
}
/***************** Footer Styling *********************/
footer, footer p {
    text-align: center;
    font-size: small;
    background-color: #0663C6;
    color: #000000;
    padding-top: 1px;
    padding-bottom: 2px;
	margin: 0px;
	clear:both;
}
/********************************** Styling for pre-accordion **************************************/
#pre-accordion {
	margin: 0px 25px;
	xbackground-color: #dddddd99;
}
img.main-thumb {
	width:80px;
	height:auto;
}
/********************************** Styling for Accordion ******************************************/
div#accordion1{
	padding:20px;
}
.card-header{
	padding: .25rem 1.25rem;
	background-color: clear;
	background-color: #dddddddd;
}
.card {
	background-color: clear;
	background-color: #ffffff77;
}
.card img {
	height: 80px;
	width: auto;
	margin: 5px;
}
.collapse {
    background-repeat: no-repeat;
    zbackground-size: contain;
	background-size: 100% 100%;
    padding: 0px 20px 0px 20px;
}
.icon {
	height: 80px;
	width: auto;
}
.done 					{text-decoration: line-through;}
/********************************** Styling for Cooking info ******************************************/
img.food_thumb 			{	height:80px; width:auto;}
img.food_thumb:hover 	{	height:250px; width:auto;}
.food_items div p		{	color:white; background-color:darkslategray}
.food_items div p:hover {	color:yellow; font-size: 1.4em;}
.food_items div a img 	{	min-width: 80px;}
.food_items 			{	display: grid;
                    		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;	}

/********************************** Styling for Money info ******************************************/
p.pwd_hint 			{margin-bottom: 0px;}
ul.pwd_hint 		{margin-top: 0px; display: none;}
ul.zpwd_hint li 		{margin-top: 0px;}
div.pwd_hint:hover ul	{display:block; background-color:darkgoldenrod; text-align: left; width: 30%;}
/********************************** Styling for Travel info *****************************************/
tr.trip_done td 	{background-color:dimgrey; font-size: 0.9em;}
table 				{background-color: whitesmoke;}
/********************************** Styling for some hidden info ************************************/
#insurance	{	float: right; max-width: 30%; border: solid thin black; padding: 3px; display:none; background-color: lightyellow;	}
#telecom 	{	float: right; max-width: 30%; border: solid thin black; padding: 3px; display: none;								}
#personal 	{	float: right; max-width: 30%; border: solid thin black; padding: 3px; display: none; background-color: white;		}
#lam_work 	{	display:none;}


/********************************** Styling for Counters w/in "More" ********************************/
#stimer {
	float:right;
	padding: 10px;
	margin: 10px;
	background-color:white;
	border-radius: 15px;
    border: 5px solid #13005C;
    width: 300px;
    text-align: center;
}
#s-chart {	float:right;
			width:280px;
			height:auto;
			margin-right:0px;
			text-align: center;
			margin: 0px;}
#s-chart-img {
	margin:0px;
	max-width:100%;
	height: auto;}
#stimer div p {
	margin: 0px;	
}
.error {
	background-color:red;
	color: yellow;
	font-weight: bold;
	font-size: 0.8em;
}
#count_6 ul 		{	margin:0;
						padding:0;}
#count_6 ul li 		{	display: inline;
						margin: 0px;
						padding: 1px;
						border: thin solid #101010;
						font-weight: bold;
						color: #000000;}
#count_6 ul li.OS_done {background-color: blue;
						color: #FFFFFF;}
#count_6 ul li.MO_good {background-color: lightgreen;
						color: black;}
td.MO_bad 				{background-color: red; color: yellow;}
td.MO_good 				{background-color: lightgreen; color: black;}
td.MO_active			{fot-size:1.5em; border: solid thick black;}
#count_6 ul li.MO_bad {background-color: red;
						color: yellow;}
#count_6 ul li.MO_active {	zzbackground-color: orange;
							zzcolor: #FFFFFF;
							font-size: 1.5em;
							border: solid thick black;
							}
#count_6 ul li.miss_0 		{background-color:cornflowerblue;}
#count_6 ul li.miss_1 		{background-color:yellow;}
#count_6 ul li.miss_2 		{background-color:darkseagreen;}
#count_6 ul li.miss_3 		{background-color:red; color: yellow;}
#count_6 ul li.miss_4 		{background-color:red; color: white;}
#count_6 ul li.miss_5 		{background-color:red; color: greenyellow;}
#count_6 ul li.miss_6 		{background-color:red; color: cornflowerblue;}
#count_6 ul li.miss_7 		{background-color:red; color: lightgoldenrodyellow;}
#ttslo-x button,#ttslo-x fieldset inputzz			{width: 200px; padding:0px; margin:0px;}
#ttslo-x #ttslot_btn 							{zzwidth:10px;}

#zzsecurity 		{float:right;}
#stimer 			{display:none;}
#s-chart 			{display:none;}
#private_thoughts 	{display:none;}
#future_letters 	{display:none;}
.hide {display:none;}
ul.details li:hover + .hide {display:block;}
th .months_details 	{display:none;}
th:hover span	{display:block; background-color:darkgoldenrod; text-align: left;}
table#history-table tr:hover 				{background-color:lightskyblue;}
/*table#history-table tr:hover + img.hide 			{display:block;}       This is the code I'm still trying to debug for table pop-ups*/
.months_details, .year_details			{	position: absolute;
  											top: 0;
  											transform: translate(0%,0);
											transition: transform .2s ease-in;
  											transform-origin: left;
  											display: inline;
											z-index: 20;							}
.year_details img 						{	height: 400px;	}
.HD {
  position: relative;
}
.HD:hover span, .HD:hover span img {
  transform: translate(-50%,0) scale(1);
  display: block;
}



.details:hover + .hide {display:block;}
#monthly_details 		{	margin-top: 10px;
							border: thin solid black; 
							zborder-collapse: collapse;
							font-size: 16px;			}
#monthly_details th 	{	border: solid thin #000000;
							background-color: lightgrey;	zfont-weight: 700;	zborder:dashed #060AED;}
#monthly_details td 	{	border: solid thin #000000;	
							background-color: white;		}
#monthly_details td.miss {	background-color: yellow;}
#monthly_details td.missed_day {	zbackground-color: yellow;}

.table tr td, .table tr th {border: solid black;}
/****************************************** End of section *****************************************/