
<style>

    @media print{
        #labelRender { border: none !important; zoom: 1 } 
	    .noprint {visibility:hidden;display:none; }
	    div.divFooter {position: fixed;bottom: 0; }
    }
    @media screen {
        div.divFooter {
            display: none;
        }
    }
    .center {
        margin-left: auto;
        margin-right: auto;
    }
    img{border-style:solid;border-color:red;border-width:0px 0px 0px 0px;}


body {
            font-family: Arial, Verdana, SanSerif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 00px;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

.select{  }

.bodyStripes {
  overflow:-moz-scrollbars-vertical;
  background:#fff url("images/standard-background-image.png") no-repeat center 0; 
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333;
}

.menuicon{width:50px;height:50px;padding:2px 2px 0px 2px;cursor:pointer;}
.menuicon:hover{border-style:solid;border-width:1px;border-color:red;}
.noborder{border-style:none;}

.i1{width:180px;max-width:180px;font-size:1em;border-color:#2824B3; background-color:#F7FFD9; }
.l1{width:180px;min-width:180px;max-width:180px;font-size:1.1em;color:#000000; }
.iLink{margin-top:3px;margin-bottom:3px;padding:5px 4px 4px 3px; cursor:pointer;}

.statusClass{ width:auto; max-width:180px; overflow:hidden; }

#map { height: 700px; width:1000px; border-style:solid; border-color:#2824B3;}
#legend { height: 527px; width:200px; border-style:solid; border-color:#2824B3; overflow:auto;}
#hiInfo { border-style:solid; border-color:#2824B3; background-color:#EBBCA4; }
.dev { border-style:solid; border-color:red; background-color:none; }
.devLabel { position: relative; top:0px; }

.tabContainer{
	visibility:hidden;
	display:none;
	width:auto;
	max-width:1020px;
	height:auto;
	height:90%;
}
.tabSelected{
	color:black;
}
.tabUnselected{
	color:white;
}

.toprow{
	border-style:solid;
	border-width:0px 0px 1px 0px;
	font-weight:bold;
}

.selectedItem{
	position:relative;
	top:8px;
}

.popHide{ visibility:hidden; display:none; }
.popShow{ visibility:visible; display:block; }
.hideMe{ visibility:hidden; display:none; }
.righthere{ position:absolute;top:0px;left:0px;height:100px;width:100px; z-index:1;}
.pictureFrame{
	border-style:solid;
	border-color:blue;
}

.cp{cursor:pointer;}

.vCenter{position:relative;top:50%;transform:translateY(-50%);}
.bgColorBar{ background-color:#BDD9FF; }

input:disabled{ background:#dddddd; width:200px;}
.labelColumn{ width:200px; }
.menuDropItem{ text-decoration: none; padding:10px 0px 0px 0px; }
.menuDropDiv{ height:30px; width:120px; min-width:120px;}
.pMenu{ z-index:55; width:40px; height:40px; position:absolute; top:60px; left:-100;background-color:none; cursor:pointer;}
.alertSoil{	position:absolute;top:90px;left:65px; }
.pageCover{position:absolute;z-index:60;padding:0px;top:0px;left:0px;height:100px;width:100px;
	background:#E3E19A;
	background:rgba(255,255,255,0.6);
	filter:blur(4px);
	-o-filter:blur(4px);
	-ms-filter:blur(4px);
	-moz-filter:blur(4px);
	-webkit-filter:blur(4px);
}

.noSelect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}
.okSelect{
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

.selection{ cursor:pointer; border-style:solid;border-width:0px 0px 1px 0px; width:150px;min-width:150px;}

.selection:hover{
    color:blue;
    background-color:yellow;
}

.popover{
	position:absolute;top:300px;left:300px; border-style:solid;border-color:#E8570E;background-color:#EBBCA4; 
	width:200px;height:100px;background-image:url('../images/soils.png');
	visibility:hidden; display:none;
}
.mainTitle{ color:#2824B3; font-size:2em; }
.hrLower{ border-style:solid; border-width:0px 0px 1px 0px; border-color:#2824B3; }

.animate{
    -webkit-transition: all 1.0s ease-in-out;  
    -moz-transition: all 1.0s ease-in-out;  
    -o-transition: all 1.0s ease-in-out;  
    -ms-transition: all 1.0s ease-in-out;  
    transition: all 1.0s ease-in-out;  
}
.animate2{
    -webkit-transition: all .5s ease-in-out;  
    -moz-transition: all .5s ease-in-out;  
    -o-transition: all .5s ease-in-out;  
    -ms-transition: all .5s ease-in-out;  
    transition: all .5s ease-in-out;  
}

.tap1{
	cursor:pointer;
	padding:4px;
}

.rounded {
	-moz-box-shadow:inset 0px 1px 0px 0px #C0C0C0;
	-webkit-box-shadow:inset 0px 1px 0px 0px #C0C0C0;
	box-shadow:inset 0px 1px 0px 0px #C0C0C0;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8DC8E2), color-stop(1, #8DB3E2) );
	background:-moz-linear-gradient( center top, #8DC8E2 5%, #8DB3E2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC8E2', endColorstr='#8DB3E2');
	background-color:#8DC8E2;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #8DC8E2;
	text-indent:4px;
}

.rounded3 {
	-moz-box-shadow:inset 0px 1px 0px 0px #6262BD;
	-webkit-box-shadow:inset 0px 1px 0px 0px #6262BD;
	box-shadow:inset 0px 1px 0px 0px #6262BD;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #BBBFEE), color-stop(1, #BBBFEE) );
	background:-moz-linear-gradient( center top, #BBBFEE 5%, #BBBFEE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BBBFEE', endColorstr='#BBBFEE');
	background-color:#7D82B0;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #4242AA;
	text-indent:4px;
}
.roundedDirtCardFS{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #f2d3ad) );
	background:-moz-linear-gradient( center top, #FFFFFF 5%, #f2d3ad 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f2d3ad');
	background-color:#f2d3ad;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #eab676;
}
.roundedDirtCard{
	-moz-box-shadow:inset 0px 5px 2px 0px #d26d35;
	-webkit-box-shadow:inset 0px 5px 2px 0px #d26d35;
	box-shadow:inset 0px 5px 2px 0px #d26d35;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #f2d3ad) );
	background:-moz-linear-gradient( center top, #FFFFFF 5%, #f2d3ad 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f2d3ad');
	background-color:#f2d3ad;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #eab676;
	text-indent:4px;
}
.roundedDirt {
	-moz-box-shadow:inset 0px 5px 2px 0px #d26d35;
	-webkit-box-shadow:inset 0px 5px 2px 0px #d26d35;
	box-shadow:inset 0px 5px 2px 0px #d26d35;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #d26d35) );
	background:-moz-linear-gradient( center top, #FFFFFF 5%, #d26d35 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#d26d35');
	background-color:#d26d35;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #eab676;
	text-indent:4px;
}
.roundedWhite {
	-moz-box-shadow:inset 0px 5px 2px 0px #D7D5ED;
	-webkit-box-shadow:inset 0px 5px 2px 0px #D7D5ED;
	box-shadow:inset 0px 5px 2px 0px #D7D5ED;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #FFFFFF) );
	background:-moz-linear-gradient( center top, #FFFFFF 5%, #FFFFFF 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
	background-color:#FFFFFF;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	border:1px solid #D7D5ED;
	text-indent:4px;
}

.lightGreen {
	-moz-box-shadow:inset 0px 5px 2px 0px #64EB49;
	-webkit-box-shadow:inset 0px 5px 2px 0px #64EB49;
	box-shadow:inset 0px 5px 2px 0px #cae3fc;
	border:1px solid #468F0A;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #64EB49), color-stop(1, #64EB49) );
	background:-moz-linear-gradient( center top, #64EB49 5%, #64EB49 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#64EB49', endColorstr='#64EB49');
}

.yellow {
	-moz-box-shadow:inset 0px 5px 2px 0px #DCE0A8;
	-webkit-box-shadow:inset 0px 5px 2px 0px #DCE0A8;
	box-shadow:inset 0px 5px 2px 0px #DCE0A8;
	border:1px solid #DCE0A8;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #DCE0A8), color-stop(1, #DCE0A8) );
	background:-moz-linear-gradient( center top, #DCE0A8 5%, #DCE0A8 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCE0A8', endColorstr='#DCE0A8');
}


.red {
	-moz-box-shadow:inset 0px 5px 2px 0px #F73E3E;
	-webkit-box-shadow:inset 0px 5px 2px 0px #F73E3E;
	box-shadow:inset 0px 5px 2px 0px #F73E3E;
	border:1px solid #F73E3E;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #F73E3E), color-stop(1, #F73E3E) );
	background:-moz-linear-gradient( center top, #F73E3E 5%, #F73E3E 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F73E3E', endColorstr='#F73E3E');
}

.info {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #851C94), color-stop(1, #871B96) );
	background:-moz-linear-gradient( center top, #851C94 5%, #871B96 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#851C94', endColorstr='#871B96');
	background-color:#851C94;
	color:yellow;
	padding:0px 5px 0px 5px;
}
.graybutton {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #BCB5BD), color-stop(1, #ECE4ED) );
	background:-moz-linear-gradient( center top, #BCB5BD 5%, #ECE4ED 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCB5BD', endColorstr='#ECE4ED');
	background-color:#BCB5BD;
	padding:0px 5px 0px 5px;
	border:1px solid #BCB5BD;
}

.button1 {
	-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	box-shadow:inset 0px 1px 0px 0px #cae3fc;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
	background-color:#79bbff;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:10px;
	border:1px solid #469df5;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:122px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #287ace;
}
.button1:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.07, #4197ee), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
	background-color:#4197ee;
}.button1:active {
	position:relative;
	top:1px;
}

.button2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	box-shadow:inset 0px 1px 0px 0px #cae3fc;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
	background-color:#79bbff;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:10px;
	border:1px solid #469df5;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:122px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #287ace;
}
.button2:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.07, #4197ee), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
	background-color:#4197ee;
}.button2:active {
	position:relative;
	top:1px;
}

.buttonVertical {
	-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	box-shadow:inset 0px 1px 0px 0px #cae3fc;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
	background-color:#79bbff;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:10px;
	border:1px solid #469df5;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	line-height:30px;
	height:40px;
	max-height:40px;
	width:110px;
	max-width:110px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #287ace;
	-ms-transform:rotate(270deg); /* IE 9 */
	-moz-transform:rotate(270deg); /* Firefox */
	-webkit-transform:rotate(270deg); /* Safari and Chrome */
	-o-transform:rotate(270deg); /* Opera */

}
.buttonVertical:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.07, #4197ee), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
	background-color:#4197ee;
}.buttonVertical:active {
	position:relative;
	top:1px;
}

.verticalText{
	-ms-transform:rotate(270deg); /* IE 9 */
	-moz-transform:rotate(270deg); /* Firefox */
	-webkit-transform:rotate(270deg); /* Safari and Chrome */
	-o-transform:rotate(270deg); /* Opera */
}

.mTab {
	-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
	box-shadow:inset 0px 1px 0px 0px #cae3fc;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #74C92E), color-stop(1, #468F0A) );
	background:-moz-linear-gradient( center top, #74C92E 5%, #468F0A 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74C92E', endColorstr='#468F0A');
	background-color:#74C92E;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:6px;
	border:1px solid #468F0A;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:112px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #468F0A;
	cursor:pointer;
	
}
.mTab:hover{
	color:#2E75D9;
}

.invalid{
	background-image:url('/images/invalidslashes.png'); background-size: 300px 5px; background-position:top 0px; background-repeat:repeat-x;
	background-color:yellow;
}


.invalidLower{
	background-image:url('/images/invalidslashes.png'); background-size: 300px 5px; background-position:center bottom; background-repeat:repeat-x;
	background-color:yellow;
}

.h1{
	font-family:Arial;
	font-size:1.5em;
	font-weight:bold;
	font-style:normal;
	height:20px;
	line-height:20px;
}

.menuTab{
	z-index:70; position:absolute; top:44px; left: 266px; border-style:solid;border-color:#086CA2;background-color:#64AAD0; padding:2px; width:117px; min-width:117px;
	font-size:.9em; color:white;
}

.menuHeaderRow{
	font-family:Arial;
	font-size:1.1em;
	font-weight:bold;
	font-style:normal;
	height:20px;
	line-height:20px;
}

.menuListItem{
	padding: 5px;
	border:2px solid;
	border-radius:25px;
	background-color:#B8FFFE;
}
.menuListItem:hover{ background-color:#F0FFA6;}

.centroidCircleStyle{
	color: '#136AEC',
	fillColor: '#FA0A26',
	fillOpacity: 0.15,
	weight: 2,
	opacity: 0.5
}
.centroidMarkerStyle{
	color: '#FA0A26',
	fillColor: '#2A93EE',
	fillOpacity: 0.7,
	weight: 2,
	opacity: 0.9,
	radius: 5
}
</style>
<!-- <link rel="stylesheet" href="css/table.css" /> -->
<style>
.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:auto;
	max-width:1000px;
	height:auto;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#81D685; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;
	
	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}


.transform2{
	color-new:#81D685;
	color-old:#33c223;
}

.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #38C740 5%, #2E9E34 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #38C740), color-stop(1, #2E9E34) );
	background:-moz-linear-gradient( center top, #38C740 5%, #2E9E34 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#38C740", endColorstr="#2E9E34");	background: -o-linear-gradient(top,#38C740,#2E9E34);
	background-color:#2E9E34;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #38C740 5%, #BBBFEE 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #38C740), color-stop(1, #8de683) );
	background:-moz-linear-gradient( center top, #38C740 5%, #BBBFEE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#38C740", endColorstr="#v");	background: -o-linear-gradient(top,#38C740,#BBBFEE);

	background-color:#33c223;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
</style>
<style>
	.anyBox{text-align:center;vertical-align:center;margin:2px;border-radius:8px;padding:4px;overflow:hidden;
			border:solid 2px black;background-color:white;width:150px;height:150px;font-size:.8em;}
	.mediaLink{
		padding:0px 5px 0px 5px;
		height:44px;
	}
	.distCards{
		float:right;display:inline-block;width:160px;min-width:160px;max-width:160px;
	}
	.rm4{
		margin:0px 4px 0px 0px;
	}
	.lm4{
		margin:0px 0px 0px 4px;
	}
	.p5{
		padding:5px;
	}
	.fr{
		float:right;
	}
	.fl{
		float:left;
	}
	.fse{
		margin:0px;
	}
	.cai{
		width:300px;
		height:30px;
		font-size:1.2em;
		border-radius: 10px;
		margin:6px;
		color:black;
	}
	.bg2{
		background-color:sandybrown;
	}
	.tal{
		text-align:left;
	}
	.p10{
		padding:10px;
	}
	.star{
		width:18px;
	}	
	.ib{
		display:inline-block;
	}
	.ibp{
		display:inline-block;
		padding:0px 10px 0px 10px;
		cursor:pointer;
		vertical-align:top;
		height:40px;
	}
	.i1{
		padding:4px;
		margin:4px;
		font-size:1.2em;
	}
	.rccX{
		display: inline-block;
		margin: 0px auto; 
		min-width:25%;
		max-width:250px;
	}
	.rcc{
		min-width:250px;
		max-width:250px;
		-webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: -moz-none;
	    -o-user-select: none;
	    user-select: none;
	}
	.rc1{
	  border-radius: 25px;
	  background: #C2b280;
	  margin: 10px;
	  padding: 2px 6px 2px 6px;
		text-align:left;
	}
	.rcLabel{
		font-size:1em;
	}
	.cardImage{
		width:44px;
		height:44px;
		border-radius:15px;
		border-style:solid;
		border-color:darkred;
		border-width:2px;
	}
	.mapboxgl-canvas-container {height: 80vh;}

        .compass-container {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			top:-40px;
			z-index: 9999;  /* ADD THIS */
		}

        .toggle-btn {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 12px 32px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .toggle-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
        }

        .toggle-btn:active {
            transform: translateY(0);
        }

        #compassDiv {
            transition: all 0.5s ease;
            opacity: 1;
            transform: scale(1);
        }

        #compassDiv.hidden {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
            height: 0;
            overflow: hidden;
        }

        .compass {
            width: 200px;
            height: 200px;
            position: absolute;
			top:100px;
			left:-50px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                        inset 0 0 40px rgba(255, 255, 255, 0.1);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
			transform: translateZ(0);
			will-change: transform;
        }

        .compass-inner {
            width: 260px;
            height: 260px;
            position: relative;
            transition: transform 0.15s ease-out;
        }

        .compass-rose {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .cardinal {
            position: absolute;
            font-weight: 700;
            font-size: 24px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .cardinal.n {
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: #ff6b6b;
            font-size: 28px;
        }

        .cardinal.e {
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

        .cardinal.s {
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .cardinal.w {
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

        .needle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 120px;
            transform: translate(-50%, -50%);
        }

        .needle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to bottom, #ff6b6b, #ff8787);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .needle::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, #e0e0e0, #ffffff);
            clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .center-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                        0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }

        .degree-display {
            margin-top: 20px;
            color: white;
            font-size: 32px;
            font-weight: 700;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            font-variant-numeric: tabular-nums;
        }

        .direction-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin-top: 8px;
            font-weight: 500;
        }

        .status-text {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            margin-top: 15px;
            font-style: italic;
        }

        .tick {
            position: absolute;
            width: 2px;
            height: 10px;
            background: rgba(255, 255, 255, 0.4);
            top: 5px;
            left: 50%;
            transform-origin: center 125px;
        }

        .tick.major {
            height: 15px;
            width: 3px;
            background: rgba(255, 255, 255, 0.6);
        }
		
</style>