body,td,th,a,p,.h {
	font-family:Arial,Trebuchet MS,helvetica,sans-serif;
	font-size: 11pt;
}
body {
	margin: 0;
}
HR {
	height: 1px;
}
A:link { color: blue }       /* unvisited link */
#A:visited { color: mediumblue }   /* visited links */
A:active { color: red }    /* active links */
A:hover {
	/* background-color: #E6E6E6; */
	/* background-color: #FFFFCC; */
	background-color: #E0ECF0;
	text-decoration: none;
	/* border-bottom: 1px dashed navy; */
}
.minus1 {
	font-size: 10pt;
	color : #555555;
}
A.minus1 {
	font-size: 10pt;
	color : blue;
}
.minus2 {
	font-size: 9pt;
	color : #777777;
}
.gray1 {
	background-color : #D0D0D0;
}
.gray1hp {
	/* background-color : #D0D0D0; */
	/* border-color: #B0B0B0; */
	background-color : #D0D8E0;
	/* background: url(http://www.gagme.com/greg/gif/bheadblue.gif); */
	border-color: #A0A8B0;
	/* border-style : groove groove none groove; */
	border-style : none solid solid none;
	border-width : 1px;
	-moz-border-radius: 3px;
	border-radius: 4px;
}
.gray2 {
	background-color : #E8E8E8;
}
.gray2hp {
	/* background-color : #E8E8E8; */
	/* border-color: #C8C8C8; */
	background-color : #E0ECF0;
	border-color: #B8A8A8;
	/* border: groove; */
	/* border: none; */
	border-style : none solid solid none;
	border-width : 1px;
	-moz-border-radius: 3px;
	border-radius: 4px;
}
.infobox {
	font-size: 9pt;
	color : #555555;
	border-color: #555555;
	border-width : 1px;
	border-width : 1px;
        border-style: solid;
	-moz-border-radius: 4px;
        border-radius: 4px;
}

H3 {
	font-family:arial,sans-serif;
	font-size: 13pt;
	/* border-bottom: 1px solid #888;
	line-height: 100%; */
}
H2 {
	font-family:arial,sans-serif;
	font-size: 15pt;
	/* border-bottom: 1px solid #888; */
}
H1 {
	font-family:arial,sans-serif;
	font-size: 17pt;
}
.HL {
	background-color: #FFFF88;
}
.EXAMPLE {
	font-family:courier;
        background: #E6E6E6;
}
input,submit,select,textarea {
	font-size : 12px;
	font-family:arial,sans-serif;
	color : #000000;
	text-transform: none;
	background-color: #EEEEEE;
	text-decoration: none;
	border-width: 1px;
	border-color: #000000;
	border-style: solid;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 1px;
	margin-bottom: 0;
	margin-top: 0;
}
form {
	margin-bottom: 0;
	margin-top: 0;
}
.hidden { display: none; }
.unhidden { display: block; }
.alert {
/*        border-width: 1px; */
	border-style: groove;
	border-color: #EFBFCF;
        background: #FFCFDF;
	color: red;
        margin: 4px;
        padding: 4px;
	font-size: 10pt;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.donate {
/*        border-width: 1px; */
	border-style: groove;
	border-color: #EFBFCF;
        background: #CFDFFF;
        margin: 4px;
        padding: 4px;
	font-size: 10pt;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 0;
	margin-top: 0;
}
form.donate {
	text-align: right;
}
PRE {
        border-left: 1px solid #888888;
        background: #EEEEEE;
        margin: 4px;
        padding: 6px;
	font-size: 10pt;
}
CODE {
	font-family: Courier, "Courier New", monospace;
	/* font-size: 10pt; */
	font-size: 10pt;
}

.NOTE {
	font-family: "Bitstream Vera Sans Mono", Courier, "Courier New";
	font-size: 9pt;
}

.rubin {
	background: #D0DCE0;
	background-color: #D0DCE0;
}

.google {
	font-size : 14px;
	font-family:arial,sans-serif;
	color : #000000;
	text-transform: none;
	background-color: #EEEEEE;
	text-decoration: none;
	border-width: 1px;
	border-color: #000000;
	border-style: solid;
	background-image: url(http://www.gagme.com/greg/gif/google_logo.gif);
	background-repeat: no-repeat;
	background-positionx: 10;
}

table#navigation {border-collapse: collapse;  caption-side:bottom;}
table#navigation tr{border: 1px solid black;}
table#navigation col{border: 1px solid black;}
table#navigation td{}
table#navigation th{}

/*
Experimental, found on http://www.squarefree.com/userstyles/
a[href^="mailto:"]:before { content: "\2709 " }
*/

/* For search engine highlighting */
/* http://suda.co.uk/projects/SEHL/ */
.hl0 { background-color: #99FFFF }
.hl1 { background-color: #CCFFCC }
.hl2 { background-color: #FFAAFF }
.hl3 { background-color: #FFBBBB }
.hl4 { background-color: #FFFF99 }

.code {
	color: black;
	background-color: #E6E6E6;
	font-family: Courier, monospace;
}

/* Based on what I did for rubinreports */
table.nicetable {
        border-collapse:collapse;
        width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:20px;
}
table.nicetable td {
        padding:3px;
        border:1px solid #d0d0d0;
}
table.nicetable th {
        padding:3px;
        border:1px solid #a0a0a0;
        font-weight: bold;
        background-color:#f4f4f4;
        /* Nice orange color: #cc6600; */
}

.border {
	border: 1px solid;
	border-color: #bbb;
	padding: 3px;
}

.dropshadow {
	margin-right: 10px;
	margin-bottom: 10px;
	box-shadow: 5px 5px 7px #bbb;
	-moz-box-shadow: 5px 5px 7px #bbb;
	-webkit-animation: dropit 3s 1;
	animation: dropit 3s 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dropit {
    0% {
	box-shadow: 0px 0px 0px #000;
	-moz-box-shadow: 0px 0px 0px #000;
	}
    100% {
	box-shadow: 5px 5px 7px #bbb;
	-moz-box-shadow: 5px 5px 7px #bbb;
	}
}

/* Standard syntax */
@keyframes dropit {
    0% {
	box-shadow: 0px 0px 0px #bbb;
	-moz-box-shadow: 0px 0px 0px #bbb;
	}
    100% {
	box-shadow: 5px 5px 7px #bbb;
	-moz-box-shadow: 5px 5px 7px #bbb;
	}
}

// img.tn {
//     -webkit-animation: fadein 1s; /* Safari and Chrome */
//        -moz-animation: fadein 1s; /* Firefox */
//         -ms-animation: fadein 1s; /* Internet Explorer */
//          -o-animation: fadein 1s; /* Opera */
//             animation: fadein 1s;
// }

img.youtube {
	
}

// @keyframes fadein {
//     from { opacity: 0; }
//     to   { opacity: 1; }
// }

/* Firefox */
// @-moz-keyframes fadein {
//     from { opacity: 0; }
//     to   { opacity: 1; }
// }

/* Safari and Chrome */
// @-webkit-keyframes fadein {
//     from { opacity: 0; }
//     to   { opacity: 1; }
// }

/* Internet Explorer */
// @-ms-keyframes fadein {
//     from { opacity: 0; }
//     to   { opacity: 1; }
// }

/* Opera */
// @-o-keyframes fadein {
//     from { opacity: 0; }
//     to   { opacity: 1; }
// }

.tn:hover {
	transition-property: transform;
	-webkit-transition-property: transform;

	transition-duration: 2s;
	-webkit-transition-duration: 2s; /* Safari */

	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;

	transform:scale(1.3);
	-ms-transform:scale(1.3); /* IE 9 */
	-moz-transform:scale(1.3); /* Firefox */
	-webkit-transform:scale(1.3); /* Safari and Chrome */
	-o-transform:scale(1.3); /* Opera */
}

.stack { position: relative; z-index: 10; }
 
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
 
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */


// Flexible
.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.gallery {
	border: 1px solid #ccc;
	display: inline-block;
	margin: 5px;
}
div.gallery:hover {
	border: 1px solid #666;
	background-color: #eee;
}
img.gallery {
	margin: 5px;
	transition: all 1s;
}
img.gallery:hover{
	transform: scale(1.1)
}

/* From: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */

.topnav {
  overflow: hidden;
  background-color: #f2f2f2;
  color: #333;
  border-bottom: 1px solid darkblue;
}

.topnav a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Make dropdown match style as well */
select {
  background-color: #f2f2f2;
  border: 1px solid darkblue;
  padding: 2px 2px;
  font-size: 14px;
  cursor:pointer;
  -webkit-appearance:none;  /* for chrome & safari */
  -moz-appearance: none; /* for mozilla */
  border-radius: 0px;
  min-width: 200px;
}

select::after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'\2193';
    pointer-events: none;
}

select:hover {
  background-color: #ddd;
  color: black;
}

input[type=submit] {
  background-color: #f2f2f2;
  border: 1px solid darkblue;
  padding: 2px 2px;
  font-size: 14px;
  cursor:pointer;
  border-radius: 0px;
}

input[type=submit]:hover {
  background-color: #ddd;
  color: black;
}

.icon-black {
    color: #000000;
}