/*main html tags style  when updating styles in here, please also update the styles.php page accordingly...*/
* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding:5px;

    
   //border: 1px solid red;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

body {
	background-color: #9ab3b0;
	background-image: url(back.gif);
	background-repeat: repeat-x;
	color: #003c23;
	font-size:1em;
    font-family: 'Catamaran', sans-serif;
    font-style: normal;
	margin: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
} 

h1, h2, h3, h4, h5, h6, nav
{
    font-style: normal;
    font-weight: 700;
 border-radius: 5px;
}

p {
	color: #003c23;
	letter-spacing: normal;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	text-align: justify;
	text-indent: 0pt
}


table.excel {
	border-style: ridge;
	border-width: 1;
	border-collapse: collapse;
	font-family: sans-serif;
}

table.excel thead th,table.excel tbody th {
	background: #CCCCCC;
	border-style: ridge;
	border-width: 1;
	text-align: center;
	vertical-align: bottom;
}

table.excel tbody th {
	text-align: center;
	width: 20px;
}

table.excel tbody td {
	vertical-align: bottom;
}

table.excel tbody td {
	padding: 0 3px;
	border: 1px solid #EEEEEE;
}

.tweetbox {
	height: auto;
}

img {
	border: 0px;
	width: 100%;
	height: auto;
}
img.intext {
	border: 0px;
	width: auto;
	
}

img.height80 {
	border: 0px;
	width: auto;
	height: 80px;
}

img.thinborder {
	border: 1px solid #cccccc;
}

table {
	border-collapse: collapse;
	margin-left: 10px;

	width: 97.5%;
	
}

.center {
	text-align: center;
}

.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.center th {
	text-align: center !important;
}

td,th {
	border: 1px solid #000000;
	padding-left: 10px;
	padding-right: 10px
}
.border {
border: 1px solid #000000;
}
.noborder {
	border: 0px solid #fff;
}

a {
	color: #3366cc;
	text-decoration: none
}

a:active {
	color: #ff6666;
	text-decoration: underline
}

a:hover {
	color: #ff6666;
	text-decoration: underline
}

a:link {
	color: #3366cc
}

a:visited {
	color: #cc6666
}

b {
	font-weight: bold
}

blockquote {
	border-bottom: medium none;
	border-left: #993333 thick outset;
	border-right: medium none;
	border-top: medium none;
	color: #666699;

	height: 0pc;
	margin-left: 10pt;
	padding-left: 5pt;
	text-align: justify;
	text-decoration: none;
	text-indent: 0pt;
	width: 80%
}

hr {
	color: #003c23;
	font-size: 95%
}

h1 {
	color: #003c23;
	font-size: 120%;
	margin: 5px;
}

h2 {
	background-color: #9AB3B0;
	color: #ffffff;
	font-weight: 600;
	margin-left: 0;
	padding-left:3px;
	text-align: left;
	width: 100%;
	clear: both;
}

h3 {
	color: #003c23;
	font-weight: 600;
	margin-left: 15pt;
	text-align: left;
}

h4 {
	color: #003c23;
	margin-left: 30pt;
	text-align: left;
}

ul {
	margin: 10px;
	text-align: left
}

li {

}

pre {
	color: #0000ff;
	float: left;
	text-align: left;
	font-family: courier, monospace;
	font-size: 9pt;
	font-variant: normal;
	padding-left: 5px;
}

sub {
	font-size: 75%;
}

sup {
	font-size: 75%;
}
/*classes*/
/* placing images */
div.floatleft {
	float: left;
}

div.floatleft p {
	text-align: center;
}

div.floatright {
	float: right;
}

div.floatright p {
	text-align: center;
}

div.float {
	margin: 2em auto 0 auto;
	width: 550px;
}

div.float p {
	text-align: center;
}

li.simplelist {
	font-size: 1em;
	//font-weight: bold;
	margin-left: 5px;
	display: list-item;
	list-style-type: square;
	padding-left: 0px;
}

li.nicelist {
	margin-bottom: 10px;
	display: list-item;
	padding-left: 0px;
}


.small {
	color: #000099;
	text-align: center;

	width: 100%;
	font-size: 75%;
	font-style: italic;
	padding-left: 5px;
}

.note {
	color: #ccccff;
	text-align: left;

	font-size: 75%;
	font-variant: normal;
}

.debug {
	color: #cc0000;
	text-align: left;
	
	font-size: 9pt;
	font-variant: normal;
}

.width75 {
	color: #000099;
	float: left;
	text-align: left;
	width: 175px;
	height: 20px;
	
	font-size: .8em;
	font-variant: normal;
	padding-left: 2px;
	overflow: hidden;
}

.motd {
	width: 600px;
	height: 200px;
	overflow: scroll;
}

.copyright {
	color: #666699;
	
	font-size: 8pt;
	font-weight: 300;
	text-decoration: none
}

.spacer {
	visibility: hidden;
}

.hrbottom {
	padding: 0px;
	border-bottom: 3px #003c23 solid;
	height: 68px;
}


.content {

	letter-spacing: normal;
	margin: 5px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	text-align: left;
	text-indent: 5pt;
	height: 600em;
	/*background-color: #e6e8fa;*/
}

/*===============links========================*/
a.toplink:active {
	color: #ffff33;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: none
}

a.toplink:link {
	color: #993300;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: 600;
	text-decoration: none
}

a.myButton:visited {
	color: #ffffff;
	
}
a.myButton:active {
	color: #ffff33;
	text-decoration: none
}

a.myButton:link {
	color: #ffffff;
	
}

a.toplink:visited {
	color: #993300;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: 600;
	text-decoration: none
}

a.roth:active {
	font-style: italic;
	text-decoration: none;
	color: #ffff33;
	text-shadow: drop shadow;
}

a.roth:link {
	text-decoration: none;
	color: #006600;
	text-shadow: drop shadow;
}

a.roth:hover {
	font-style: italic;
	text-decoration: underline overline;
	color: #006600;
	text-shadow: drop shadow;
}

a.roth:visited {
	font-style: italic;
	text-decoration: none;
	color: #006600;
	text-shadow: drop shadow;
}

a.username:active {
	color: #ffff33;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: none
}

a.username:link {
	color: #ff6666;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: 600;
	text-decoration: none
}

a.username:visited {
	color: #660000;
	font-family: courier, monospace;
	font-size: 10pt;
	font-weight: 600;
	text-decoration: none
}

.footer {
	position: relative;
	width: 750px;
	left: -10px;
	margin-top: 10px;
	border-top: solid 1px #808080;
	border-bottom: solid 1px #808080;
	margin-bottom: 2px;
	background-color: #ffffe8;
	text-align: center;
}

/*================form classes===========================*/
.formbox {
	padding: 5px;
	margin: 0px auto;
}

.row /*usually a div: starts a row in a form*/ {
	clear: both;
	padding-top: 2px;
}

.infolabel { /*label in a form : usually a span*/
	color: #666699;
	float: left;
	text-align: right;
	width: 150px;
	
	font-size: 9pt;
	font-variant: normal;
	font-weight: 700;
}

.info { /*info in a form : usually a span*/
	color: #000099;
	float: left;
	text-align: left;
	width: 300px;
	
	font-size: 10pt;
	font-variant: normal;
	padding-left: 5px;
}

.help {
	color: #666699;
	background-color: #e6e8fa;
	text-align: left;
	
	font-size: 9pt;
	font-variant: normal;
	text-align: left;
	width: 100px;
	padding-left: 2px;
}

/*================================================*/
/*=============Picture Gallery======================*/
.thumbnail {
	//float: left;
	width: 110px;
	//border: 0px solid #999;
	margin: 0 15px 15px 0;
	padding: 5px;
	background-color: #fff;
 border-radius: 5px;
}

.clearboth {
	clear: both;
}
/*===================================================*/
/*=================table=============================*/
.borderarea /*makes the flat outside border*/ {
	background-color: #cccccc;
}

.resulttable {
	color: #003c23;
	
	font-size: 80%;
}

.tablepageheader {
	background-color: #85B6A6;
}

.rowodd {
	background-color: #ffffff;
}

.roweven {
	background-color: #F2F2CC;
}

/*===================================================================*/
/*===============================header ids===========================*/


.title {
	color: #003c23;
	font-size: 2em;
	padding: 0;
}


#gowide {
	position: absolute;
	top: 98px;
	left: 130px;
	color: #003c23;
	width: 125px;
}

#NWmap {
	position: relative;
	top: 0px;
	width: 310px;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-left: 20px;
	float: left;
	clear: both;
}

#NWLegend {
	position: relative;
	float: right;
	width: 400px;
	padding: 10px;
}

br {
	clear: both;
}


/*=====================================================================*/
/*=====================================================================*/

.myButton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
	background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:18px 21px;
	text-decoration:none;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
	background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}