#main {
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 759px;
    min-width: 1024px;
    width: 100%;
    height: auto;
}

.one {
    background-image: url("/static/img/landing1.jpg");
}

.two {
    background-image: url("/static/img/landing1.jpg");
}

.three {
    background-image: url("/static/img/landing2.jpg");
}

.four {
    background-image: url("/static/img/landing8b.jpg");
}


.watermark {
    position: absolute;
    float: center;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-25%) translateY(-50%);
    text-align: center;
    vertical-align: middle;
    z-index: 1000;
}

.invisible {
    display: none
}

html { 
  font-size: 62.5%;
}

body {
/*  background: #edc; */
  color: #333;
  font-size: 1.2em;
  height: auto;
  padding-bottom: 20px;
}

.notyellow {
    font-size: 1.2em;
    height: auto;
    padding: 0px;
}

.yellow {
    color: #cccc00;
    font-size: 1.2em;
    height: auto;
    padding: 0px;
}


a {
/*  color: #fff; */
  text-decoration: none;
}


a:visited { color:#000; }

a:link { color: #000; }


a:hover {
  text-decoration: underline;
}

@media print {
    h1 {
        page-break-before: always;
        page-break-after: avoid;
    }
    
    h3, h4 {
        page-break-after: avoid;
    }

    pre, blockquote, table {
        page-break-inside: avoid;
    }

}


h1 {
/*  font-family: Georgia, serif; */
  font-weight: normal;
/* padding-top: 20px; */
  text-align: left;
  font-size: 2em;
}

h2 {
    /*  padding-top: 20px; */
    font-weight: normal;
  text-align: left;
  font-size: 1.5em;
}

h3 {
    /*  padding-top: 20px; */
    font-weight: normal;
  text-align: left;
  font-size: 1em;
}

h3 {
    /*  padding-top: 20px; */
    font-weight: normal;
  text-align: left;
  font-size: 1em;
}

p {
/*  border: 1px solid #666; */
  overflow: hidden;
/*  padding: 10px 0; */
  text-align: left;
}


th { 
  font-weight: bold;
 }

cox {
/*  font-family: Georgia, serif; */
  font-weight: normal;
/* padding-top: 20px; */
  text-align: center;
  font-size: 2em;
}

.listtable tbody tr:nth-of-type(even) {  background-color: #DDD; }
.listtable thead th { 
    font-weight: bold;
}


.shortpadded td { padding: 3px 3px }

.paddedtable td { padding: 1px 20px }

.cortable {
    border-collapse: collapse;
}

.cortable td {
    border: 1px solid #999;
    text-align: center;
}

.plantable {
    border-collapse: collapse;
}

.plantable > td {
    text-align: center;
}


th.rotate {
  /* Something you can count on */
  height: 78px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(18px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 5px;
}

.fixtable table { 
  table-layout: fixed;
  width: 60%;
 }

.message { 
  border: 1px solid #000;
  background-color: #f88;
  font-weight: bold;
  color: #000;
  text-align: center;
 }

.midden { text-align: center }

.poscor {
    background-color: #8f8;
}

.weakposcor {
    background-color: #efe;
}

.negcor {
    background-color:#f88;
}

.weaknegcor {
    background-color: #fee;
}


.successmessage { 
  border: 1px solid #000;
  background-color: #8f8;
  color: #000;
  text-align: center;
  font-weight: bold;
 }

.deletelink { 
  border: 1px solid #000;
  background-color: #f88;
  color: #000;
  text-align: center;
  font-weight: bold;
 }

.navbar {
  border: 1px solid #666; 
  color: #000;


  overflow: hidden;
  background-color: #ddd;
/*  padding: 10px 0; */
  text-align: center;
}

.navbutton { 
  background-color: #ddd;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 2px solid #666;
  padding: 5px;
  text-align: center;
 }

.transparentbutton {
    padding: 1px;
    text-align: center;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #ffff66;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 999;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
  transition-delay:1s;
}

.caption { 
  text-align: center;
 }

.site-announcement-box {
    padding: .2em .5em .2em 0em;
}

.site-announcement {
    font: 1.1em/1.5em sans-serif;
    text-decoration: none;
    display: block;
    padding: .2em .5em .2em .5em; 
    zoom: 1;
/*    border-radius: .5em; */
/*    -moz-border-radius: .5em; */
/*    -webkit-border-radius: .5em; */
    text-align: left;
    border: solid 1px #333;
}

.dot {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 25px;
    height: 25px;
    border: solid 1px #333;
}

.dot:hover {
    text-decoration: none; 
}    

.button {
  font: 1.1em/1.5em sans-serif;
  text-decoration: none;
  display: block;
  /* width: 100%; */
  color: white;
  padding: 0.2em 0.0em 0.2em 0.0em;
  zoom: 1;
/*  border-radius: .5em; */
/*  -moz-border-radius: .5em; */
/*  -webkit-border-radius: .5em; */
/*  -box-shadow: 0 1px 3px  rgba(0,0,0,0.5); */
/*  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/*  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*
/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  */
  text-align: center;
}

.input {
  font: 1.1em/1.5em sans-serif;
  text-decoration: none;
  display: block;
  /* width: 100%; */
  color: white;
  padding: 0.2em 0.0em 0.2em 0.0em;
  zoom: 1;
  border-radius: .5em;
  -moz-border-radius: .5em;
  -webkit-border-radius: .5em;
/*  -box-shadow: 0 1px 3px  rgba(0,0,0,0.5); */
/*  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/*  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  */
  text-align: center;
}

a.button { 
  color: white;
 }

.button:hover {
  background: #d8e6ff; /* old browsers */
  text-decoration: none; 
}

.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 1.2em;
}
.small {
	font-size: 1.0em;
}

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
}
.black:hover {
	background: #000;
}
.black:active {
	color: #666;
}

/* gray */
.blue {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
}
.blue:hover {
	background: #616161;
}
.blue:active {
	color: #afafaf;
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
}
.white:hover {
	background: #ededed;
}
.white:active {
	color: #999;
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
}
.orange:hover {
	background: #f47c20;
}
.orange:active {
	color: #fcd3a5;
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
}
.red:hover {
	background: #b61318;
}
.red:active {
	color: #de898c;
}

/* blue */
.graytext {
    color: #27aae2;
}

.gray {
	color: #fae7e9;
	border: solid 1px #27aae2;
	background: #27aae2;
}
.gray:hover {
    background: #1c74bb;
    border: solid 1px #27aae2;
}
.gray:active {
	color: #ffffff;
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
}
.rosy:hover {
	background: #ba4b58;
}
.rosy:active {
	color: #dca4ab;
}

/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
}
.green:hover {
	background: #538018;
}
.green:active {
	color: #a9c08c;
}

/* palegreen */
.palegreen {
    background: palegreen;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* paleblue */
.paleblue {
#    padding: 8px; 
    background: aliceblue;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* lightsalmon */
.lightsalmon {
#    padding: 4px;
    background: lightsalmon;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

/* filler */
.filler {
    background: darkgray;
    box-shadow:inset 0px 0px 0px 6px #fff;
    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
    box-shadow:inset 0px 0px 0px 6px #fff;
}

.padded {
    padding: 10px;
}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
}
.pink:hover {
	background: #d57ea5;
}
.pink:active {
	color: #f3c3d9;
}


.greenbar {
  border: 1px solid #666; 
  color: #000;


  overflow: hidden;
  background-color: #8f8;
/*  padding: 10px 0; */
  text-align: center;
}


#footer { 
  text-align:center;
 }

.container_12,
.container_16,
.container_24 {
  background-color: #fff;
  background-repeat: repeat-y;
/*  margin-bottom: 20px; */
}

.container_12 {
/*    background-image: url(../img/12_col.gif);  */
}


/* Style The Dropdown Button */
.dropbtn {
  color: white;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
/*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 999;
}

/* Links inside the dropdown */
.dropdown-content a {
  text-decoration: none;
  display: block;
  z-index: 999;
}

/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {background-color: #f1f1f1} */

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.flexplot { 
  position: relative;
  z-index: 10;
}

a.wh:link { 
    color: #e9e9e9;
}

a.wh:visited { 
    color: #e9e9e9;
}

a.wh:hover { 
    color: #e9e9e9;
}


.bk-canvas-map {
    overflow: hidden;
    }


/* container */
.container {
  padding: 5% 5%;
}

/* CSS talk bubble */
.talk-bubble {
	margin: 40px;
  display: inline-block;
  position: relative;
	width: 200px;
	height: auto;
	background-color: lightyellow;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}
/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
    word-wrap: break-word;    
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

.drop-files {
  border: 1px solid #000;
  color: #000;

}

.wrapwords{
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

}

.upgradebutton {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

.buttonr2 {border-radius: 2px;}
.buttonr4 {border-radius: 4px;}
.buttonr8 {border-radius: 8px;}
.buttonr12 {border-radius: 12px;}
.buttonround {border-radius: 50%;}
