/* tags */
@media (min-width: 768px)
.lead {
    font-size: 18px;
}

html {
	background-color:#FFFFFF;
}

img {
	border:0;
}

table {
	border:0;
	padding:0;
}

form {
	margin:0;
	padding:0;
}

th {
	text-align:center;
}

h1 {
	color:#3373B7;
	font-size:36px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	letter-spacing:2px;
	padding:0px;
	margin:0px;
}

h2 {
	color:#3373B7;
	font-size:20px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	letter-spacing:1px;
	margin:0px;
	padding:5px 0px;
}

h3 {
	color:#000000;
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, sans-serif;
	line-height:19px;
	margin:10px 0px;
}
.text_h1 {
	color:#3373B7;
	font-size:36px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	letter-spacing:2px;
	padding:0px;
	margin:0px;
}
.text_h25 {
	color:#3373B7;
	font-size:25px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	padding:0px;
	margin:0px;
}
.text_h36 {
	color:#3373B7;
	font-size:36px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	padding:0px;
	margin:0px;
}
.text_h2 {
	color:#3373B7;
	font-size:20px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
	letter-spacing:1px;
	margin:0px;
}
.text_h311 {
	color:#3373B7;
	font-size:18px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
}
.text_h3 {
	color:#005431;
	font-size:18px;
	font-family:Arial, Tahoma, Geneva;
	font-weight:normal;
}
.text_h4 {
	color:#555555;
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, sans-serif;
}
.text_h511 {
	color:#000000;
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, sans-serif;
}
.text_h5 {
	color:#804112;
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, sans-serif;
}
.text_h6 {
	color:#000000;
	font-size:12px;
	font-family:Verdana, Arial, sans-serif;
}

.lead {
	margin-bottom:10px;
	font-size:18px;
	font-weight:300;
	line-height:1.4;
}
.itree-brown {
  font-weight: bold;
  color: #825227;
}
.itree-blue {
  font-weight: bold;
  color: #7290C9;
}
.itree-green {
  font-weight: bold;
  color: #005D37;
}
.itree-yellow {
  font-weight: bold;
  color: #C55A11;
}
p.note {
	font-weight:normal;
	font-style:italic;
	color:#666666;
	margin:5px 5px 15px;
}

span.note {
	font-weight:normal;
	font-style:italic;
	color:#666666;
}
span.subscript {
	font-size: 75%;
}
a {
	text-decoration:none;
	color:#0000FF;
}

a:visited {
	color:#0000FF;
}

a:hover {
	text-decoration:underline;
}

input {
	vertical-align:middle;
}

input.txt {
	background-color:#FFFFFF;
	border:1px solid #AAAAAA;
	height:18px;
	margin:0px;
	padding:0px 1px;
	font-size:14px;
}

input.txt:active , input.txt:focus {
	background-color:#FFFFCC;
}

input.btn {
	background-color: #DDDDDD;
	border:1px solid #AAAAAA;
	height:20px;
	line-height:14px;
	text-align:center;
	margin:0px;
	padding:0px 3px;
	cursor:pointer;
	font-family:"MS Shell Dlg", Arial, Verdana, Helvetica, sans-serif;
}

select {
	border: 1px solid #AAAAAA;
	font-size:14px;
	height:20px;
	margin:0px;
}

select:active, select:focus {
	background-color:#FFFFCC;
}

label {
	line-height:18px;
	margin:0px;
	font-size:14px;
	text-align:left;
}

/* classes */
.center {
	text-align:center;
}

.right {
	text-align:right;
}

.left {
	text-align:left;
}

.round {
	background:#FFFFFF;
	background:rgba(255, 255, 255, 0.9);
	border:1px solid #444444;
	padding:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:#000000 0 0 10px;
	box-shadow:#000000 0 0 10px ;
}
.square {
	background:#FFFFFF;
	background:rgba(255, 255, 255, 0.9);
	border:1px solid #444444;
	padding:10px;
}
.square p {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:19px;
	margin:10px 10px 10px;
}
.squarenoborder {
	font-family:Verdana, Arial, sans-serif;
	background:#FFFFFF;
	background:rgba(255, 255, 255, 0.9);
	padding-left:10px;
	padding-right:10px;
}
.squarenoborder p {
	font-family:Verdana, Arial, sans-serif;
	font-size:14px;
	line-height:19px;
	margin:10px 10px 10px;
}
.squareshadow {
	background:#FFFFFF;
	background:rgba(255, 255, 255, 0.9);
	border:1px solid #444444;
	padding:10px;
	-moz-box-shadow:#000000 0 0 2px;
	box-shadow:#000000 0 0 2px ;
}
.squareshadow p {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:19px;
	margin:10px 10px 10px;
}
.err {
	color:#FF0000;
}

.info {
	color:#0000FF;
}

.tools {
	color: #7E9596;
	font-size:12px;
	margin-bottom:5px;
}
	
.community_forests {
	color: #456970;
	font-weight: bold;
	font-size:14px;
}

.clear {
	clear:both;
	height:0px;
}

.panel{
	border:1px solid #CCCCCC;
}

.panel p {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:19px;
	margin:10px 10px 10px;
}

.newsyear {
	float:left;
	height:150px;
	width:105px;
}

.newsyear ul {
	margin:0px;
	padding:0px;
	padding-left:10px;
	list-style-position:inside;
}

.prtonly {
	display:none;
}

.inprtonly {
	display:none;
}

.page_img {
	position:relative;
	float:right;
	margin:10px 0px 10px 10px;
}

.required {
	color:#FF0000;
	font-weight:bold;
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
}


.ui-tabs .ui-tabs-nav li {
	font-size:9px;
	font-weight:bold;
	background-position:left top;
	width:100px;
	background-image:url(Logos/tab_bkg_blue.png);
	background-repeat:repeat-x;
    -moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
	
}
.ui-tabs .ui-tabs-nav li a {
	background-color: transparent;
	text-align:center;
	display:block;
	float:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-image:url(Logos/tab_bkg_green.png);
	background-repeat:repeat-x;
	
}
.tabmouseover{
	cursor:pointer;
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
    width:130px;
	text-align:center;
    -moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
}
.tabnormal{
	cursor:pointer;
	/*background:url(logos/bg-button.jpg) top repeat-x;*/
	background-color:#7390CA;
	color:#fff;
	/*
	background-image:url(Logos/tab_bkg_blue.png);
	background-repeat:repeat-x;
	*/
	border:1px solid #000000;
    width:130px;
	text-align:center;
    -moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
}
.tabnormal:hover{
	/*background-position:bottom;*/
	background-color:#4272A2;
	cursor:pointer;
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
}
.tabselected{
	cursor:pointer;
	background-image:url(Logos/tab_bkg_green.png);
	background-repeat:repeat-x;
	border-top:1px solid #000000; 
	border-left:1px solid #000000;
	border-right:1px solid #000000;
    border-bottom:1px solid #FFFFFF;
	
    width:130px;
	text-align:center;
    -moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px; 
}
.contentFrame{
	clear:both; 
	position:relative; 
	top:0px; 
	height:610px;
	width:900px;
	border-top:none;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	background:#FFFFFF;
	padding-top:30px;
}
.verticalrotation{
	-webkit-transform-origin: top left;
	-webkit-transform: rotate(-90deg);
	-moz-transform-origin: top left;
	-moz-transform: rotate(-90deg);
	-o-transform-origin: top left;
	-o-transform: rotate(-90deg);
	-ms-transform-origin: top left;
	-ms-transform: rotate(-90deg);
	/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
}

.verticaltabnormal{
	cursor:pointer;
	background-image:url(Logos/tab_bkg_blue.png);
	background-repeat:repeat-x;
	border:1px solid #000000;
    width:130px;
	text-align:center;
	-moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	text-align:center;
}
.verticaltabmouseover{
	cursor:pointer;
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
    width:130px;
	text-align:center;
	-moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	text-align:center;
}
.verticaltabselected{
	cursor:pointer;
	background-image:url(Logos/tab_bkg_green.png);
	background-repeat:repeat-x;
	border-top:1px solid #000000; 
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #ffffff;
    width:130px;
	text-align:center;
	-moz-border-radius-topleft:     10px;
	-moz-border-radius-topright:    10px;

    border-top-left-radius:         10px;
	border-top-right-radius:        10px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	text-align:center;
}
/* elements */
#main {
	margin:10px auto;
	width:950px;
	min-width:950px;
}

#header td {
	vertical-align:middle;
}

#searchfrm {
	margin:auto auto;
	width:268px;
}

#searchfrm p {
	margin:3px 0px;
	padding:0px;
}

#searchfrm input.txt {
	width:97px;
	margin-right:3px;
}

#searchfrm input.btn {
	padding:0px;
	width:60px;
	height:20px;
}

#searchfrm #search {
	width:201px;
}

#hdnpass {
	display:none;
	color:#888888;
}

#register {
	width:60px;
	margin:0px;
	float:right;
	text-align:center;
	font-size:14px;
	font-family:"MS Shell Dlg", Arial, Verdana, Helvetica, sans-serif;
}

#register a {
	color:#000000;
	display:block;
	height:18px;
	background-color:#DDDDDD;
	border:1px solid #AAAAAA;
}

#register a:hover {
	text-decoration:none;
}

#forgotpass {
	width:200px;
	line-height:18px;
	float:left;
}

#menu {
	margin-top:5px;
}

#content {
	margin:10px 0px 20px;
}

#page_content {
	border-spacing:10px;
	border-collapse:separate;
	border-collapse:expression('separate', cellSpacing='10px');
}

#banner {
	width:924px;
	margin:0px auto 10px;
	border:2px solid #666666;
}

#page_title {
	padding:0px 20px;
	text-align:center;
}

#page_left_pnl {
	width:180px;
	padding:10px;
	border:1px solid #CCCCCC;
	background-color:#D5ECFE;
	font-size:13px;
	font-weight:bold;
	vertical-align:top;
}

#page_left_pnl a {
	color:#000099;
}

#page_left_pnl a:visited {
	color:#000099;
}

#page_right_pnl {
	padding:10px 20px;
	text-align:justify;
	border:1px solid #CCCCCC;
	background-color:#FFFFFF;
	vertical-align:top;
}

#page_right_pnl.authreq {
	background-color:#FFBBBB;
}

#page_right_pnl li {
	margin:0px 0px 5px;
}

#page_right_pnl li li {
	margin:0px;
}

#page_right_pnl p, #page_right_pnl li {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:19px;
}

#pnl_left {
	width:190px;
	float:left;
	margin:5px 5px 0px 0px;
	padding: 5px;
	background-color:#FFFFE2;
}

#pnl_left a {
	color:#000000;
}

#pnl_left a:hover {
	text-decoration:none;
	color:#0000FF;
}

#pnl_center {
	margin:5px 210px 0px 210px;
	padding:10px 20px;
	text-align:justify;
	background-color:#FFFFFF;
}

#pnl_center p {
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	line-height:19px;
}

#pnl_center img {
	vertical-align:middle;
}

#pnl_right {
	margin:5px 0px 0px 5px;
	padding:5px;
	width:190px;
	float:right;
	background-color:#FFFFFF;
}
#footer td {
	text-align:center;
}

#coop {
	margin-bottom:10px;
}

#footer a {
	text-decoration:none;
	color:#4488BB;
}

#footer a:hover {
	text-decoration:underline;
}

#footer a:visited {
	color:#4488BB;
}

#footer table {
	line-height:47px;
}

#footer img {
	vertical-align:middle;
}

#footnotes {
	padding:10px 20px;
	border:1px solid #CCCCCC;
	background-color:#FFFFFF;
	vertical-align:top;
	font-family:Verdana, Arial, sans-serif;
	font-size:10px;
	display:none;
}

#login {
	width:220px;
	margin:0px auto;
	text-align:right;
}

#login label {
	display:-moz-inline-box;
	display:inline-block;
	width:96px;
}

#login input {
	margin:0px 0px 3px;
}

#login input.txt {
	width:120px;
}

#register_frm {
	width:340px;
	margin:0px auto;
	text-align:right;
}

#register_frm label {
	display:-moz-inline-box;
	display:inline-block;
	width:136px;
}

#register_frm select {
	width:164px;
}

#register_frm input.txt {
	width:160px;
}

#register_frm fieldset {
	border:1px solid #CCCCCC;
	font-size:14px;
	margin:0px;
	padding:5px 0px 5px 5px;
	margin-bottom:5px;
	color:#5E81BC;
	text-align:left;
}

#register_frm fieldset div {
	width:314px;
	margin:0px auto 3px;
	color:#000000;
}

#forgot form div {
	width:320px;
	margin:0 auto;
}

#forgot fieldset {
	margin:0px;
	margin-bottom:5px;
	padding:5px;
	text-align:right;
	border:1px solid #CCCCCC;
	font-size:14px;
	color:#5E81BC;
}

#forgot fieldset div {
	color:#000000;
	width:294px;
	margin:0px 5px 3px 10px;
}

#forgot fieldset label {
	display:-moz-inline-box;
	display:inline-block;
	width:130px;
	text-align:left;
}

#forgot fieldset input.txt {
	width:160px;
}

#address {
	margin-bottom:10px;
}

#address p {
	margin:0;
	padding:0;
	font-family:monospace;
	margin-left:3em;
}

#addrfrm div{
	text-align:center;
	margin-bottom:10px;
}

#vmovie {
	margin:0 auto;
	color:#FFFFFF;
	background-color:#000000;
}

a.button, button {
		display:inline-block;
		background:url(logos/bg-button.jpg) top repeat-x; 
		height:30px;
		padding:0 25px;
		text-decoration:none; 
		color:#fff; 
		font: 16px/30px Arial, sans-serif;
		cursor:pointer;
		border:1px solid #0B2B4A;
		-o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	}
a.button:hover, button:hover, a.button.green:hover {background-position:bottom;}

input.button, button {
		display:inline-block;
		background:url(logos/bg-button.jpg) top repeat-x; 
		height:30px;
		padding:0 25px;
		text-decoration:none; 
		color:#fff; 
		font: 14px/28px Arial, sans-serif;
		cursor:pointer;
		border:1px solid #0B2B4A;
		-o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	}
input.button:hover, button:hover, input.button.green:hover {background-position:bottom;}

input.buttonsmall{
		display:inline-block;
		background:url(logos/bg-button.jpg) top repeat-x; 
		/*height:20px;*/
		
		padding:0 5px;
		text-decoration:none; 
		color:#fff; 
		/*font: 14px/28px Arial, sans-serif;*/
		cursor:pointer;
		line-height:18px;
		border:1px solid #0B2B4A;
		-o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	}
input.buttonsmall:hover, buttonsmall:hover, input.buttonsmall.green:hover {background-position:bottom;}

#ui-dialog-title-frmDesignfile {
	font-size:14px;
}
#ui-dialog-title-divexport {
	font-size:14px;
}
.file {
	font-size:14px;
}

.sidecontentpullout {
	cursor:pointer;
	background-color:#7390CA;
	color: white;
	border:1px solid #000000;
    padding: 2px 3px;
	-moz-border-radius-bottomright: 1em;
	-moz-border-radius-topright: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
	
	/*
	background-color:#7390CA;
	color: white;
	padding: 4px 3px;
	-moz-border-radius-bottomleft: 1em;
	-moz-border-radius-topleft: 1em;
	-webkit-border-bottom-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	border-top-left-radius: 1em;
	top: 200px;
	*/
	/*
	background-image: url(images/test.png)
	*/
	/*
	cursor:pointer;
	background-image:url(Logos/tab_bkg_blue.png);
	background-repeat:repeat-y;
	padding: 4px 3px;
	border:1px solid #000000;
	-moz-border-radius-topleft:     1em;
	-moz-border-radius-bottomleft:    1em;
	-webkit-border-bottom-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	border-top-left-radius:         1em;
	border-bottom-left-radius:        1em;
	top: 200px;
	*/
}

.sidecontentpullout:hover {
	/*
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
	*/
	
	background-color: #4575A5;
	color: white;
	
	/*
	cursor:pointer;
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
	width:130px;
	-moz-border-radius-topleft:     1em;
	-moz-border-radius-bottomleft:    1em;
	
	border-top-left-radius:         1em;
	border-bottom-left-radius:        1em;
	*/
}

.sidecontentpullout1 {
	cursor:pointer;
	background-color:#7390CA;
	color: white;
    padding: 2px 3px;
	-moz-border-radius-bottomleft: 1em;
	-moz-border-radius-topleft: 1em;
	-webkit-border-bottom-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	border-top-left-radius: 1em;
	
	/*
	background-color:#7390CA;
	color: white;
	padding: 4px 3px;
	-moz-border-radius-bottomleft: 1em;
	-moz-border-radius-topleft: 1em;
	-webkit-border-bottom-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	border-top-left-radius: 1em;
	top: 200px;
	*/
	/*
	background-image: url(images/test.png)
	*/
	/*
	cursor:pointer;
	background-image:url(Logos/tab_bkg_blue.png);
	background-repeat:repeat-y;
	padding: 4px 3px;
	border:1px solid #000000;
	-moz-border-radius-topleft:     1em;
	-moz-border-radius-bottomleft:    1em;
	-webkit-border-bottom-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	border-top-left-radius:         1em;
	border-bottom-left-radius:        1em;
	top: 200px;
	*/
}

.sidecontentpullout1:hover {
	/*
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
	*/
	background-color: #4575A5;
	color: white;
	
	/*
	cursor:pointer;
	border-top:1px solid #00cc00; 
	border-left:1px solid #00cc00;
	border-right:1px solid #00cc00;
	border-bottom:1px solid #000000;
	width:130px;
	-moz-border-radius-topleft:     1em;
	-moz-border-radius-bottomleft:    1em;
	
	border-top-left-radius:         1em;
	border-bottom-left-radius:        1em;
	*/
}
.sidecontent {
	background-color: #FFFFCC;
	color: Black;
	height: 400px;
	overflow:auto;
	-moz-border-radius-bottomleft: 1em;
	-webkit-border-bottom-left-radius: 1em;
	border-bottom-left-radius: 1em;
}

.sidecontent > div > div {
	padding-left: 10px;
	padding-right: 40px;
}
.csselect {
    padding:3px;
    margin: 0;
	height:24px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
    -webkit-box-shadow: 0 3px 0 #89a, 0 -1px #3f8882 inset;
    -moz-box-shadow: 0 3px 0 #89a, 0 -1px #3f8882 inset;
    box-shadow: 0 3px 0 #89a, 0 -1px #6688b1 inset;
    background: #6688b1;
    color:#ddc;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
.csselect:active, .csselect:focus {
	background: #6688b1;
}
.csselect1 {
    padding:3px;
    margin: 0;
	height:24px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	/*
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
	*/
	
    -webkit-box-shadow: 0 3px 0 #aa5, 0 -1px #aa5 inset;
    -moz-box-shadow: 0 3px 0 #aa5, 0 -1px #aa5 inset;
    box-shadow: 0 3px 0 #aa5, 0 -1px #aa5 inset;
	
    background: #cca;
    color:#000;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
.csselect2 {
    padding:3px;
    margin: 0;
	height:24px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
    background: #FFFFCC;
    color:#000;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
.csselect3 {
    /*padding:3px;*/
    margin: 0;
	height:24px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
	
    background:#ffc;
    color:#000;
    outline:none;
    display: inline-block;
    cursor:pointer;
}
.csselect4 {
    /*padding:3px;*/
    margin: 0;
	height:150px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
	
    background:#ffc;
    color:#000;
    outline:none;
    display: inline-block;
    cursor:pointer;
}
.csinput {
    /*padding:3px;*/
    margin: 0;
	height:18px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
	
	border-style:groove;
    
	text-align:right; 
	background:#ffc;
	
    color:#000;
    outline:none;
    display: inline-block;
}
.csinput1 {
    /*padding:3px;*/
    margin: 0;
	height:18px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
 
	width: 280px;
	border-style:groove;
    
	text-align:left; 
	background:#ffc;
	
    color:#000;
    outline:none;
    display: inline-block;
}

/*for species selctor*/
.species-selector-wrap {  /* overall style */
	display:flex;
	flex-direction:column;         			/*search box is above, common/scientific name toggle button is bottom */
	/*flex-direction:column-reverse;*/		/*search box is bottom, common/scientific name toggle button is above */
	/* flex-direction:row; */				/*search box is left, common/scientific name toggle button is right */
	/*flex-direction:row-reverse;*/		/*search box is right, common/scientific name toggle button is left */
}
.species-selector-wrap .search-box-wrap {
	text-align:left; /* search box is aligned left */
}
.species-selector-wrap .search-box-wrap .search-box {   /* style of the search box */
	/*padding:3px;*/
    margin: 0;
	height:18px;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
 
	width: 320px;
	border-style:groove;
    
	text-align:left; 
	background:#ffc;
	
    color:#000;
    outline:none;
    display: inline-block;
}


.species-selector-wrap .toggle-button-wrap {
	text-align:left; /* common/scientifc name tobble button is aligned left */
}
.species-selector-wrap .toggle-button-wrap .toggle-button {	/* style of the common/scientific name toggle button */

	display:inline-block;
	background:url(logos/bg-button.jpg) top repeat-x; 
	/*height:20px;*/
	
	padding:0 5px;
	text-decoration:none; 
	color:#fff; 
	/*font: 14px/28px Arial, sans-serif;*/
	cursor:pointer;
	line-height:18px;
	border:1px solid #0B2B4A;
	-o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
}
.species-selector-wrap .toggle-button-wrap .toggle-button:hover {background-position:bottom;}

.species-selector-wrap .species-drop-down {   /*species dropdown. it is a ul element */
    /* Remove default list styling */
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 320px;
	height: 400px;
	overflow: auto;
	border-style:groove;
	border-width:1px;
	border-color:#CCCCCC;
	-webkit-border-bottom-left-radius:4px;
    -moz-border-bottom-left-radius:4px;
	-webkit-top-left-border-radius:4px;
    -moz-top-left-border-radius:4px;
	border-bottom-left-radius:4px;
    border-top-left-radius:4px;
	
	-webkit-border-bottom-right-radius:4px;
    -moz-border-bottom-right-radius:4px;
	-webkit-top-right-border-radius:4px;
    -moz-top-right-border-radius:4px;
	border-bottom-right-radius:4px;
    border-top-right-radius:4px;
	
    background:#ffc;
    color:#000;
    outline:none; 
    display: inline-block;
    cursor:pointer;
}
.species-selector-wrap .species-drop-down li {
	border: 1px solid #ddd; /* Add a border to all links */
	margin-top: -1px; /* Prevent double borders */
	background-color: #ffc; /*#f6f6f6;*/ /* Grey background color */
	padding: 2px; /* Add some padding */
	text-decoration: none; /* Remove default text underline */
	/*font-size: 18px;*/ /* Increase the font-size */
	color: black; /* Add a black text color */
	display: block; /* Make it into a block element to fill the whole list */
}
.species-selector-wrap .species-drop-down li:hover:not(.header) {
  background-color: #ADD8E6; /* Add a hover effect, except for headers */
}
.species-selector-wrap .species-drop-down .smallfont{  
	/* an li is composed of two divs. 
		one for common name and the other for scientific name. 
		one is above, the other is below.
		the above one is always sorted. If display common name, the common name is above and sorted. If display scientific name, the scientific name is above and sorted.
		this class is used for the bottom div */
  font-size: 9px;
}

.species-selector-wrap .species-drop-down .li-selected{  /*for highlighting selected item */
	background-color:#33CCFF;
}
.species-selector-wrap .species-drop-down .search-text{  /*for highlighting searching string */
	background-color:#FFCC00;
}
/*end of species selctor*/

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .csselect {padding-right:20px}
}

.cslabel {position:relative;}
.cslabel:after {
    content:url(images/downarrow3.png);
    font:11px "Consolas", monospace;
    right:0px; top:-2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
.cslabel:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:19px;
    background:#6688b1;
    position:absolute;
    pointer-events:none;
    display:block;
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
}