@charset "utf-8";
/* CSS Document */

.showNotes {display:none;}
/*div.showNotes {width:100%;}*/

div.showNotes label {cursor:pointer;
	float:right; padding-right:20px;
font-size: .7em; opacity: .4; display:block;}
	
input[type="checkbox"], input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

div.red, div.green, div.gold, div.note {border: 0px solid white;}
div.red, div.green, div.gold, table.red, table.green, table.gold
	{transition: border-color 1s, border-width 1s, border-radius 1s; }

div.ctrImgDiv.red > img, div.ctrImgDiv.green > img, div.ctrImgDiv.gold > img {border-radius:15px;}

div.note, div.sideImgDiv div.note, div.sideImgDiv.wide div.note {max-height: 0px; overflow: hidden; font-weight: bold; border-width:0px;
	opacity: 0%; text-align: center; clear:both; padding: 0px; margin-bottom: 0px;
	transition: max-height 1s, opacity 1s, padding 1s, margin-bottom 1s, border-width 1s 2s;}

@media screen and (max-width: 800px) {
	div.note, div.sideImgDiv div.note, div.sideImgDiv.wide div.note {display:none; max-height: 0px; overflow: hidden; font-weight: bold; border-width:0px;
	opacity: 0%; text-align: center; clear:both; padding: 0px; margin-bottom: 0px;
	transition: max-height 1s, opacity 1s, padding 1s, margin-bottom 1s, border-width 1s 2s;
	background: red;
	
	}
}

input[type="checkbox"]:checked ~ table div.red,
input[type="checkbox"]:checked ~ table table.red {    border: 10px solid red; border-radius: 25px;}
input[type="checkbox"]:checked ~ table div.green,
input[type="checkbox"]:checked ~ table table.green {  border: 10px solid lightgreen; border-radius: 25px;}
input[type="checkbox"]:checked ~ table div.gold,
input[type="checkbox"]:checked ~ table table.gold { border: 10px solid gold; border-radius: 25px;}

input[type="checkbox"]:checked ~ table div.note{
	display:block; max-height: 100px; opacity: 100%; padding: 8px; margin-bottom: 3px; text-align: center;
	border-width: 2px; border-radius: 15px;
	transition: max-height 2s, opacity 2s, padding 2s, border-width 2s 2s}

input[type="checkbox"] ~ table div.green.note {color:limegreen}
input[type="checkbox"] ~ table div.gold.note {color:darkorange}
input[type="checkbox"] ~ table div.red.note {color:red}


/*
input[type="checkbox"]:checked ~ table div.green.note {color:limegreen}
input[type="checkbox"]:checked ~ table div.gold.note {color:darkorange}
input[type="checkbox"]:checked ~ table div.red.note {color:red}
*/


/*
input[type="checkbox"] ~ table div.red,
input[type="checkbox"] ~ table table.red {    border: 10px solid red; border-radius: 25px;}
input[type="checkbox"] ~ table div.green,
input[type="checkbox"] ~ table table.green {  border: 10px solid lightgreen; border-radius: 25px;}
input[type="checkbox"] ~ table div.gold,
input[type="checkbox"] ~ table table.gold { border: 10px solid gold; border-radius: 25px;}

input[type="checkbox"] ~ table div.note {
	display:block; max-height: 500px; opacity: 100%; padding: 10px; text-align: center;
	transition: max-height 2s, opacity 2s, padding 2s;}
*/


div.red div.note, table.red div.note, div.red.note {    color: red;}
div.green div.note, table.green div.note, div.green.note {  color: limegreen;}
div.gold div.note, table.gold div.note, div.gold.note { color: darkorange;}