﻿/* HOUSTON */
@font-face{font-family:Nb-International-Pro;font-style:normal;font-weight:500;src:url("nb_international_pro_light-webfont.woff2")format("woff2"),url("nb_international_pro_light-webfont.woff")format("woff")}
@font-face{font-family:Canela;font-style:normal;font-weight:500;src:url("Canela-Light-Web.woff2")format("woff2"),url("Canela-Light-Web.woff")format("woff")}
/* === Standard styles === */
/* Font sizing in ems. To change anything, just change this. */
html,body,textarea,select,input {font-size:100%;font-family:'Nb-International-Pro',sans-serif;color:#325644;background-color:#f6fbf6;margin:0;padding:0;line-height:24px;}
h2 {font-family: Canela, sans-serif;} 
html, body {height:100%;}
body {overflow-x:hidden;}
form {margin:0 auto;padding:0;width:980px;min-height:100%;margin-bottom:-50px;position:relative;}
input[type="text"],input[type="file"],input[type="password"] {padding:0 0 3px 0;margin:2px;}
input[type="checkbox"] {margin-right:4px;}
select {padding:4px 0 4px 4px;margin:2px 0 2px 0;}
div {margin:0;}
a:link,a:visited {text-decoration:underline;color:#282626;}
a:hover {text-decoration:underline;color:#0b5a9d;}
a:focus {outline:none;}
a[disabled="disabled"],a:hover[disabled="disabled"],a.disabled {text-decoration:none;}
h1 {font-size:0.1em;font-weight:normal;margin:0;padding-left:1px;padding-bottom:2px;float:left;}
h2 {font-size:2.0em;font-weight:normal;margin:0;padding-top:32px;padding-bottom:2px;margin:26px 0 0 16px;float:left;}
h3 {font-size:1.0em;font-weight:normal;margin:0;}
h4.big {font-size:1.1em;font-weight:normal;margin:0;padding:4px 0 !important;}
ul {margin-left:0;padding-left:20px;}
/* Remove Safari default styling */
input[type=text],input[type=button],input[type=submit] {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

/* === DIV page styles === */
div.pagemain {color:#282626;width:100%;}
div.pageheader {margin-left:-50%;width:100%;padding:0 50% 0 50%;}
div.pageheadertop {}
div.pageheaderleft 
{
	margin-left:-50%;width:100%;
	padding:0 50% 0 50%;
	background: url(logo.svg); /* logo.png */
	background-repeat:no-repeat;
	background-position:28.5% 20px;
	background-size: 240px auto; 
	background-color:#325644;
	height:140px;
}
div.pageheaderright {display:none;}
div.pagemenu {clear:both;background-color:transparent;width:100%;overflow:hidden;margin:3px 0;}
div.pagefooter {clear:both;position:absolute;bottom:0;width:100%;overflow:hidden;height:40px;margin-left:-50%;background-color:#325644;padding:18px 50% 20px 50%;border:solid 1px #2a2a2c;}
div.pageleft {float:left;width:100%;margin-left:-350px;}
/*div.pageright {float:right;width:350px;}*/
div.pageright {width:100%;clear:both;margin-bottom:100px;}
div.pagefull {float:left;width:100%;}
div.pagecontent {margin-left:350px;margin-right:0;  float:left;width:100%;margin-bottom:0;}
div.pagemaincontent {width:auto;margin:auto;max-width:1400px;padding-bottom:100px;}

/* === MENU styles === */
div.menunav {text-align:center;} 
ul.menunav {padding:0;margin:0;list-style-type:none;}
li.menunav a {float:left;padding:10px 30px;}
li.menunav a:hover {color:#fff;background-color:#325644;} 
li.menunav a[disabled="disabled"],a:hover[disabled="disabled"],a.disabled {background-color:#325644;color:#fff;}
li.menunav {display:inline-block;}
div.menuset {display:none;float:right;padding-top:2px;padding-right:2px;}

/* === DIV special styles === */
div.leftmargin {margin:10px 10px 10px 0;}
div.rightmargin {margin:10px 0 10px 0;}
div.fullmargin {margin:10px 0 10px 0;}
div.sepmargin {height:10px;line-height:10px;}
div.border {border:none;}
div.panel {color:#325644;background-color:#f6fbf6;padding:0;}
div.infopanel {background-color:#ededed;padding:0;} 
div.header {padding:8px 20px;margin-bottom:6px;}
h3.header {font-family:Canela;font-size:1.4em !important;font-weight:bold !important;}
div.content {padding:15px;}		
div.content table {padding-bottom:10px;}
div.septop {border-top:solid 1px #ccc;}
div.sepbottom {border-bottom:solid 1px #ccc;}
div.listpager {padding:8px 15px !important;}
div.searchbuttonpanel {padding:8px 12px;} 
div.syscontent {padding-left:10px;}
.listprevious {background:url(previous.png) left center no-repeat;padding-left:1.2em;text-decoration:none;}
.listnext {background:url(next.png) right center no-repeat;padding-right:1.2em;text-decoration:none;}
div.welcomeimage {float:left;margin-right:14px;padding-bottom:4px;width:100% !important;height:auto !important;} /* Width set in webexpl.config */
div.welcomeimage img {cursor:url(zoom-in-cursor.cur),pointer;width:100% !important;height:auto !important;}
div.welcometext > strong {font-size:1.2em;} 
div.taxonimage {margin:0;padding:0;margin-bottom:6px;}
div.taxonimagediv {width:50%;float:right;margin-left:6px;}
div.taxonimage img {height:auto !important;cursor:url(zoom-in-cursor.cur),pointer;}
div.taxonnoimage {float:right;margin-left:6px;margin-right:6px;margin-bottom:6px;padding-top:4px;}
div.mapimage img {cursor:url(zoom-in-cursor.cur),pointer;width:100% !important;}     
div.assetimage {float:left;padding-bottom:4px;width:100%;}
div.assetimage img {cursor:url(zoom-in-cursor.cur),pointer;width:100%;}
div.taxontext {float:none;padding:8px 0;}
div.taxoninfo {padding-bottom:2px;}
div.infotext {padding:6px;}
div.clearfix {clear:both;height:0;overflow:hidden;}
ul.taxalist {padding:0;margin:0;list-style-type:none;display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));grid-auto-rows:auto;grid-gap:1rem;}
li.taxalist {display:flex;flex-direction:column;border:1px solid #ccc;border-radius:8px;background-color:#fff;padding-bottom:0.5em;}
li.taxalist a, li.taxalist a:link {text-decoration:none;} 
li.taxalist a:visited, li.taxalist a:focus, li.taxalist a:hover {color:#0b5a9d;} 
img.taxalist {width:100%;height:160px;object-fit:cover;border-radius:8px 8px 0 0;opacity:1;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;}
span.taxalistname {margin:0.5em 1.0em 0 1.0em;display:inline-block;}
span.taxalistname img {padding-left:0.5em;}
span.taxalistdetail {display:block;color:inherit;}
span.taxalistdetail span {color:inherit;}
ul.taxalistdetail {list-style-type:disc;margin:0 0.5em;}

img.taxamaplist {float:right;width:75px;height:50px;text-align:center;vertical-align: middle;object-fit:cover;border:solid 1px #282626;}
.taxalistitem {background-color:#ffff66;}
ul.itemlist {padding:0;margin:0;list-style-type:none;}
li.itemlist {width:100%;}
div.searchlist {overflow: hidden;padding: 1em;}
div.searchlist a:visited,div.searchlist a:focus {color:#0b5a9d;}
div.searchfield {position:relative;overflow:hidden;min-height:54px;width:50%;float:left;white-space:nowrap;padding-top:4px;}
div.assetsearch {float:left;margin:6px 8px 6px 0;}
#ctl00_ContentPlaceHolder1_TaxaMapDetail_ImageFinder1_ImageMissingPanel {display:none;}
#ctl00_ContentPlaceHolder1_AssetMapDetail_AssetImageDiv {width:50%;margin:0;}
#ctl00_ContentPlaceHolder1_AssetMapDetail_AssetTextDiv {width:45%;display:inline-block;padding-left:16px;}
#ctl00_ContentPlaceHolder1_TaxaTourDetail_ImageDiv {width:100%;}
#ctl00_ContentPlaceHolder1_MapDyn_UpdatePanelMapDyn1 {border:solid 1px #ccc;} 
div.largeimgpanel {text-align: center;visibility:hidden;position:fixed;z-index:1500;top:0;left:0;width: 100%;height:100%;background-color:rgba(34,34,34,0.95);}
div.largeimgpanel img {cursor:url(zoom-out-cursor.cur),auto;border:solid 4px #fff;}
div.openseadragon-container {background-color:#222 !important;color:#fff;}
div.openseadragon-container img {cursor:auto;}

/* === Custom styles - also used in Skin-file === */
/* Color styles */
.colorlabel {color:#282626;}
.colorfield {color:#282626;background-color:#fff;}
.colorfieldalt {color:#282626;background-color:#f8f7f4;}
.colorfieldreq {color:#282626;background-color:#ffff99;}
.colorsel {color:#282626;background-color:#ffff99;}
.colorerr {color:#fff;background-color:#ff0000;}
.colorheader {color:#325644;}
a.colorheader:link,a.colorheader:visited {color:#325644;}
a.colorheader:hover {text-decoration:underline;color:#325644;}
.colorinfo {color:#282626;background-color:#e6ddca;}
.colortitle {color:#fff;}
a.colortitle {color:transparent;}
a.colortitle:link,a.colortitle:visited {text-decoration:none;color:transparent;}
a.colortitle:hover {text-decoration:none;color:transparent;}
a.colormenuitem:link,a.colormenuitem:visited {text-decoration:none;color:#325644;}
a.colormenuitem:hover {text-decoration:none;color:#fff;background-color:#325644;}
.colorfooter {color:#fff;}
a.colorfooter:link,a.colorfooter:visited {text-decoration:none;color:#fff;}
a.colorfooter:hover {text-decoration:underline;color:#fff;}
/* Text styles */
.textlarge {font-size:1.2em;}
.textmedium {font-size:1.0em;}
.textsmall {font-size:0.9em;}
.textinput {font-weight:bold;}
.textinfo {font-size:0.9em;}
.textupper {text-transform:uppercase;}
.textmenuitem {font-size:1.1em;font-weight:normal;text-transform:uppercase;}
select option {font-weight:normal;}
/* Border styles */
.bordersimple {border:solid 1px #7f9db9;}
.bordererr {border:solid 1px #ff0000;padding:1px;}
.bordernone {border:none;border-collapse:collapse;}
/* Misc styles */
.lnklogoleft {float:left;margin-left:0;margin-top:10px;width:270px;height:120px;text-indent:200%;white-space:nowrap;overflow:hidden;}	
.lnklogoright {display:none;}
.button {width:140px;color:#fff;background-color:#ed746a;font-size:1.1em;font-weight:normal;padding:8px;margin-right:8px;border:solid 1px #ed746a;border-radius:100px !important;}
.button:hover {color:#ed746a;background-color:#fff;border:solid 1px #ed746a;}
.buttonauto {width:auto;min-width:40px;margin:0;margin-bottom:2px;border-radius:5px !important;}     
.buttonpopup {width:auto;padding:3px;margin-top:8px;}
.buttonpanel {padding:8px 0;}
.scrollbutton {bottom:10px;display:none;right:5px;position:fixed;background:url(scrolltop.png) center no-repeat;width:32px;height:32px;z-index:1200;}
.msg {border:solid 1px #ccc;padding:2px;}
.syslogo {float:right;text-align:right;padding:0 15px;}
.social {float:right;text-align:right;}
.social>span {display:inline-block;vertical-align:top;padding-left:2px;padding-right:2px;}
.social-icon {font-size:1.0em; color:#fff;padding-left:15px;}
.maplegend {width:50%;float:left;white-space:nowrap;padding-top:0;padding-bottom:4px;}
.maplegend img {vertical-align:middle;width:auto;height:18px;padding-bottom:1px;}
.tourlist {height:600px;overflow:auto;}
.touritem {border-bottom:solid 1px #ccc;margin:8px 0;padding-bottom:8px;}
div.tourtext {float:left;width:100%;margin:8px 0;} 
div.tourimage {float:right;overflow:hidden;width:100px;height:100px;margin-top:2px;margin-left:5px;margin-bottom:5px;text-align:center;}
input[type="file"] {border: solid 1px #ccc;padding: 1px;}
input[disabled="disabled"],input.disabled {color:#8c8c8c;}
ul.noindent {margin-left:5px;margin-right:0;padding-left:10px;padding-right:0;}
ul.noindent li {padding-bottom:4px;}
/* OL styles */
div.olControlPanZoom {display:none;}
div.olControlZoom {display:none;}
div.olControlAttribution {bottom:0;left:0;}
div.olControlAttribution div {float:left;}
div.olControlAttribution span {white-space:nowrap;}
div.olControlAttribution img {height:20px;border-style:none;}
div.olControlScaleLine {left: auto;bottom:3px;right:3px;font-weight:bold;}
div.olControlZoomPanel {left:10px;top:10px;opacity:0.80;}
div.olControlLayerSwitcher .maximizeDiv {opacity:0.80;}
div.olPopup {font-size:1.1em;height:auto !important;}
div.olPopupContent {padding-bottom:6px;height:auto !important;}
div.olLayerGooglePoweredBy.olLayerGoogleV3.gmnoprint {visibility:hidden;}
div.olLayerGoogleCopyright.olLayerGoogleV3 div {visibility:hidden;}
.olPopupCloseBox {background:url(../Images/close.png) no-repeat;width:24px !important;height:24px !important;}
.gm-style {font-size:13px;}

/* === MEDIA definitions === */
@media print
{
	form {margin:16px 0;width:100%;white-space:normal;}
	html,body,textarea,div.pagemain {background-color:#fff;}
	div.pageheader {margin:0;padding:0;}
	div.pageheaderleft {height:80px;margin:0;padding:15px 0 0 0;background-position:10px 20px;background-size:250px auto;}
	h2 {font-size:2.0em;margin:12px 0 0 260px;}
	div.pagefooter {clear:both;position:relative;bottom:auto;width:100%;margin-left:0;padding:8px;}
	div.pageleft {width:100%;}
	div.pageright {width:100%;clear:both;}
	div.pagecontent {float:left;width:100%;margin-bottom:0;}
	div.taxonimage {clear:both;width:98%;float:left;margin:2px;}
	div.taxontext {clear:both;float:left;width:98%;}
	div.searchfield {height:auto;width:100%;}
	.tourlist {height:auto;overflow:visible;}
	.noprint {display:none;}
}
@media only screen and (min-width:1200px)
{
	form {width:1160px;}
	xdiv.pageleft {margin-left:-380px;}
	xdiv.pageright {width:380px;}
	xdiv.pagecontent {margin-left:380px;}
}
@media handheld,only screen and (max-width:960px)
{
	form {margin:0;width:99.0%;white-space:normal;border:none;}
	body,textarea {font-size:100%;}
	div.pageheader {margin:0;padding:0;}
	div.pageheaderleft {height:130px;margin:0;padding:15px 0 0 0;background-position:10px 20px;background-size:250px auto;}
	h2 {font-size:2.0em;padding-top:2px;margin:42px 0 0 280px;}
	div.pageleft {width:100%;}
	div.pageright {width:100%;clear:both;margin-bottom:100px;}
	div.pagecontent {float:left;width:100%;margin-bottom:0;}
	div.pagemaincontent {margin:auto auto auto 8px;}
	div.pagemenu {padding-right:0;} 
	li.pagemenu a {padding:8px;}
	div.menuset {padding-top:8px;}
	div.leftmargin {margin:0 0 8px 0;}
	div.rightmargin {margin:0 0 8px 0;}
	div.fullmargin {margin:0 0 8px 0;}
	div.margin {margin:2px;margin-right:3px;}
	div.welcomeimage {display:inherit;width:100%;}
	div.welcomeimage img {width:100% !important; height:auto !important;}
	div.taxonimagediv {width:100%;float:left;margin:0;padding:0;}
	div.taxonimage {margin:0;margin-bottom:6px;padding:0;}
	div.taxonimage img {cursor:default;}
	div.taxonnoimage {display:none;}
	div.assetimage img {cursor:default;}
	div.mapimage img {cursor:default;}
	div.taxontext {width:99%;float:left;}
	li.taxalist {width:100%;}
	li.itemlist {width:100%;padding-bottom:3px;}
	div.searchfield {min-height:56px;}
	.tourlist {height:auto;overflow:visible;}
	.textsmall {font-size:0.7em;}
	.textdropdown {font-size:0.9em;}
	.textmenuitem {font-size:1.1em;}
	.nomobile {display:none}
	.buttonauto {width:auto;min-width:65px;margin-bottom:2px;}
	.buttonpopup {width:auto;padding:3px;margin-top:8px;}
	.olControlLayerSwitcher .layersDiv {padding-left:5px;font-size:medium;}
	.olControlLayerSwitcher .maximizeDiv img,.olControlLayerSwitcher .minimizeDiv img {width:30px!important;height: 30px!important;right: 12px;}
	.olControlOverviewMapElement {padding-right:30px;}
	.olControlOverviewMapMaximizeButton img,.olControlOverviewMapMinimizeButton img {width:30px!important;height: 30px!important;right: 12px;}
	div.olControlZoomPanel {height:108px;width:36px;position:absolute;top:2px;left:1px;}
	div.olControlZoomPanel div {width:36px;height:36px;background-image:url(mobile-zoombar.png);left:0;}
	div.olControlZoomPanel .olControlZoomInItemInactive {top:0;background-position:0 0;}
	div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {top:36px;background-position:0 -36px;}
	div.olControlZoomPanel .olControlZoomOutItemInactive {top:72px;background-position:0 -72px;}
}
@media handheld,only screen and (max-width:740px)
{
	form {width:98.0%;}
    h1 a {max-width:6em;background-size:100px auto;height:100px;}
    h2 {font-size:1.7em;margin:22px auto auto 0;}
   	div.pageheaderleft {height:95px;background-size:180px auto;padding:20px 0 0 200px;}
	div.menuset {float:left;padding-left:4px;padding-bottom:3px;}
	div.searchfield {height:auto;width:100%;}
	.maplegend {width:50%;}
	li.taxalist {}
	li.itemlist {padding-top:3px;}
}
@media handheld,only screen and (max-width:500px)
{
   	div.pageheaderleft {height:60px;background-size:120px auto;padding:29px 0 0 180px;}
   	h2 {font-size:1.3em;margin:0 auto auto -45px;}
	div.mapdyn {height:400px!important;}
	div.olControlAttribution {font-size:6px;}
	div.olControlAttribution img {height:10px;width:auto;}
	div.olControlScaleLine {font-size:6px;}
	div.olLayerGoogleCopyright div {font-size:6px!important;}
	div.olLayerGooglePoweredBy div {height:auto!important;width:auto!important;}
	div.olLayerGooglePoweredBy img {height:10px!important;width:auto!important;}
}
