body {
    margin: 0;
    padding: 0; /* Set body margin and padding to get consistency between browsers. */
    width: 100%;
    height: auto;
    text-align: center; /*This centres the container in IE*/
    background-color: #a5a5a5; /*#a5a5a5*/
}

body, h1, h2, h3, p, a, button, input {
    font-family: Tahoma,Arial,Helvetica,sans-serif;
}

html, body{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

/* ====== Anchor Styles ====== */
a {
	text-decoration: none;
}
a:link, a:visited {
	color: #4f5281;
}

a:hover, a:active {
	color: #990000;
}
a.linkbutton, a.linkbutton_f, a.linkbutton_m {
    margin: 3px 5px 3px 0;
    padding: 2px 5px;
    border: solid 1px #808080;
    background-color: #e2e2e2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
a.linkbutton:hover, a.linkbutton_f:hover, a.linkbutton_m:hover {
    background-color: #808080;
    border: solid 1px #000000;
    color: #ffffff;
}
a.linkbutton_m {
    display: none;
}
a.linkbutton_f {
    display:  inline;
}
a.species{
    font-weight: bold;
    font-style:italic;
}

.headingText {
    padding: 4px 4px 0 4px;
    float:left;
}
.headingText a:link, .headingText a:visited {
    color: #fff;
}
.headingText a:hover, .headingText a:active {
    color: #990000;
}
.headingTextR {
    padding: 4px 4px 0 4px;
    float: right;
    font-size: 13px;
    font-weight: bold;
}

p {
    font-size: 13px;
    line-height: 17px;
    padding: 0 5px 0 4px;
}

label {
    font-size: 12px;
    cursor: pointer;
}

h1 {
    font-size: 16px;
    padding: 3px 5px;
    margin: 0;
}
h2 {
    font-size: 14px;
    padding: 2px 5px;
    margin: 0;
    font-weight: bold;
}
h3 {
    font-size: 12px;
    padding: 2px 5px;
    margin: 0;
    font-weight: bold;
}
/* ===== set font sizes here ===== */
.regularXL {
    font-size: 14px;
    font-weight: normal;
}
.regularL {
    font-size: 13px;
    font-weight: normal;
}
.regular {
    font-size: 12px;
    font-weight: normal;
}
.small {
    font-size: 11px;
    font-weight: normal;
}
.smallNoResize {
    font-size: 11px;
    font-weight: normal;
}
.disabledText {
    color: #999;
}

table {    
    padding: 0;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}
table.wide {
    width: 100%;   
}

td {
    vertical-align: top;
}

input[type=checkbox] {
    vertical-align: middle;
    position: relative;
    bottom: 0px;
}

.blockHilite {
    font-size: 12px;
    background-color: #c85ad7;
    /*background-color: #e59b9b;*/
    color: #fff;
    padding: 0 3px 1px 3px;
    border: solid 1px #8714cb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.blockHiliteCompare {
    font-size: 12px !important;
    color: #696969;
    background-color: #ccc;
    padding: 0 3px 1px 3px !important;
    border: solid 1px #8714cb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}

.hiliteKeywords {
    background-color: #d1d1d1;
    color: #000;
    font-weight: normal;
    padding: 0 2px 0 0;
}

.mySub {
    font-size: 9px;
}

div.aRight {
    text-align:right;
}

.warningText {
    background-color: #FF0000;
    color: #fff;
}
article {
    display: inline;
}
.magnify {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.imgAjax {
    background-image: url(../images/ajax-loader.gif);
}
.imgAjaxHidden, .imgAjax {
    width: 16px;
    height: 16px;
}

.tdText{
    color: #000;
    font-weight: bold;
}
/* ===== List styles ===== */
li {
    padding-bottom: 5px;
}
li.nopad {
    padding: 0;
}
.liType {
    color: #FF5C00; /* orange */
}

/* ===== UL styles ===== */
.ulImg, .ulImgL, .ulImgLL, .ulImgCompare {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ulImg li, .ulImgL li, .ulImgLL li, .ulImgCompare li {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    margin: 1px;
    padding: 2px;
    /* The following two lines is because IE is funny... */
    *display: inline;
    *zoom: 1;
}
.ulImg li {
    background-color: #f3f3f3;
    font-size: 11px;
    line-height: 12px;
    width: 99px;
    height: 97px;
    border: solid 1px #6183CA;
}
.ulImgL li {
    background-color: #f3f3f3;
    text-align: center;
    font-size: 11px;
    width: 138px;
    height: 158px;
    border: solid 1px #6183CA;
}
.ulImgLL li {
    background-color: #f3f3f3;
    text-align: center;
    font-size: 11px;
    width: 176px;
    height: 150px;
    border: solid 1px #6183CA;
}

/* ===== UL (compare panel) styles ===== */

.ulImgCompare li {
    background-color: #f3f3f3;
    font-size: 9px;
    line-height: 11px;
    width: 65px;
    height: 75px;
    border: solid 1px #6183CA;
    margin: 1px 0;
    padding: 1px;
}

/* ===== UL styles for Search Results (single column) ===== */
.ulSingleCol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ulSingleCol li {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    width: 100%;
    border-bottom: solid 1px #d6d6d6;
    /* The following two lines is because IE is funny... */
    *display: block;
    *zoom: 1;
}
.ulSingleCol li div.liImgDiv {
    position:relative;
    width: 110px;
    float: right;
    /*clear: both;*/
}
.ulSingleCol li div.midImgDiv {
    width: 210px;
    float: right;
    clear: both;
}
.ulSingleCol li span.liTxtDiv, .ulSingleCol li div.liTxtDiv {
    /*position: relative;
    float: left;*/
    font-size: 13px;
    line-height: 16px;
    padding: 5px 5px 5px 0;
    margin-left: 15px;
    /*clear: none;*/
}
.ulSingleCol li img.liImg {
    display: inline-block;
    width: 100px;
    height: 75px;
    border: none;
    margin: 4px;
}
.ulSingleCol li img.midImg {
    display: inline-block;
    width: 200px;
    height: 150px;
    border: none;
    margin: 4px;
}
.ulSingleCol li div.liTaxaDiv {
    display: block;
    padding: 4px;
    height: 18px;
    background-color: #dfdede;
    border-bottom: solid 1px #ffffff;
}
.ulSingleCol li td.tdliImg {
    width: 110px;
    text-align: right;
    vertical-align: top;
}
.ulSingleCol li td.tdmidImg {
    width: 209px;
    text-align: right;
    vertical-align: top;
}


/* ===== UL styles for Identify (no caption) ===== */
.ulImgI, .ulImgIcap {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ulImgI li, .ulImgIcap li {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    margin: 1px;
    padding: 1px;
    /* The following two lines is because IE is funny... */
    *display: inline;
    *zoom: 1;
    font-size: 11px;
    line-height: 12px;
    width: 117px;
    height: 85px;
    border: none;
}
.ulImgI li {
    /* li with Identify Image only */
    height: 85px;
}
.ulImgIcap li {
    /* li with Identify Image and caption */
    height: 115px;
    background-color: #f3f3f3;
}
.thumbClassImgDivI {
    float: left;
    width: 110px;
    padding: 4px;
}

.thumbClassImgDivI img {
    width: 110px;
    border: none;
}


.regular li, .small li, .smallNoResize li {
    padding-bottom: 5px;
}
ul.ulLinksNarrow {
    font-size: 13px;
    padding: 0 0 0 20px;
}
ul.ulLinks {
    font-size: 13px;
    padding: 10px 10px 10px 40px;
}
ul.ulLinks li, ul.ulLinksNarrow li {
    padding-bottom: 5px;
}
.ulImg div.divPhylum, .ulImg > div.divClass {
    font-size: 12px;
}
.divPhylumWrapper {
    margin-top: 25px;
}
div.divPhylum, div.divClass {
    padding: 5px;
    font-weight: bold;
}

/* ===== image styles ===== */
.imgNew {
    width: 95px;
    border: none;
}
.imgNewLL {
    width: 175px;
    border: none;
}
.imgCompare {
    width: 64px;
    border: none;
}
div.imgCompare {
    width: 64px;
    height: 48px;
    background-color: #808080;
    color: #CCC;
}
div.imgCompareL {
    width: 200px;
    height: 150px;
    background-color: #808080;
    color: #CCC;
    margin: 5px 0 0 5px;
}
div.imgCompareL2 {
    width: 200px;
    height: 150px;
    background-color: #808080;
    color: #CCC;
    margin-left: 13px;
}
.sprite16 {
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 1px;
    right: 0px;
}
.sprite16-cross-out {
    background: url('../images/sprite16.png') -32px 0px;
}
.sprite16-cross-over {
    background: url('../images/sprite16.png') -32px -16px;
}

.imgCaption {
    font-size: 11px;
    font-weight: normal;
    padding: 3px 5px 4px 3px;
    margin: 0 3px 3px 0;
    background-color: #e2e2e2;
    min-height: 68px;
}
.imgCredit {
    font-size: 10px;
    color: #707070;
    padding: 3px 0 4px 0;
}
.div-responsive-image {
    float: left;
    width: 239px;
    margin: 4px 0 2px 5px;
}
.responsive-image {
    height: auto;
    width: 236px;
}
.divImgHoverCaption {
    color: #000;
}
.divGeoRangeFilterX {
    float: right;
    cursor: pointer;
}
.imgFilter {
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
}

/* ===== search results styles ===== */
/* TO DELETE FROM JAVASCRIPT */
.searchDivider {
    border-bottom: solid 1px red; /*#3b7fb0*/
}

/* ===== gallery images styles ===== */
.thumbPhylumDiv {
    display: block;
    float: left;
    width: 100%;
    background-color: #dbdbdb;
    border-top: solid 1px #6183CA;
}
.thumbClassDiv {
    display: block;
    float: left;
    width: 100%;
    background-color: #f3f3f3;
    border-top: solid 1px #6183CA;
}
.thumbClassImgDiv {
    float: left;
    width: 130px;
    padding: 4px;
}
.thumbClassImgDiv img {
    width: 128px;    
    /*height: 90px;*/
    border: none;
}
.thumbClassTextDiv {
    clear: none;
    padding: 5px 10px 5px 140px;
}
.thumbClassImgDiv div.noimage {
    width: 128px;
    height: 96px;
    border: none;
    background-color: #808080;
    color: #ccc;
}

div.noimageSm {
    width: 95px;
    height: 71px;
    border: none;
    background-color: #808080;
    color: #ccc;
    margin: 0 0 0 2px;
}


/* ===== non-molluscan warning styles ===== */
.divNonMollusca {
    display: block;
    font-size: 13px;
    line-height: 18px;
    background-color: #6e9da9;
    color: #fff;
    font-weight: normal;
    padding: 7px 10px 8px 10px;
}

/* ===== div list styles (eg. species details) ===== */
.detailWrapper {
    float: left;
    width: 100%;
    border-bottom: solid 1px #a5a5a5;
}
.detailWrapper, .detailWrapper .label, .detailWrapper .detail {
    display: block;
}
.detailWrapper .label, .detailWrapper .detail {
    font-size: 13px;
    padding: 8px 5px;
}
.detailWrapper .label {
    float: left;
    font-weight: bold;
    width: 140px;
}
.detailWrapper .detail {
    float: left;
    font-weight: normal;
    clear: none;
    width: 570px;
}
.wrapperNarrow div.detail {
    width: 200px;
}

.spanLabel {
    font-size: 12px;
    font-weight: bold;
}

/* ===== custom anchor styles ===== */
a.majorLink:link, a.majorLinkM:link, a.majorLinkL:link {
    color: #3b7fb0;
    font-weight: bold;
}
a.majorLink:link {
    font-size: 12px;
}
a.majorLinkM:link {
    font-size: 13px;
}
a.majorLinkL:link {
    font-size: 14px;
}
a.minorLink:link {
    color: #3b7fb0;
    font-weight: normal;
    font-size: 13px;
}
a.majorLink:visited, a.majorLinkM:visited, a.majorLinkL:visited, a.minorLink:visited {
    color: #3b7fb0;
}
a.majorLink:hover, a.majorLinkM:hover, a.majorLinkL:hover, a.minorLink:hover {
    color: #990000;
}

/* --- CHECKLIST BODY STYLES --- */
.divChecklistScrolling {
    display: block;
    max-height: 679px;
    overflow: auto;
    padding: 10px 0;
}
.chkSp {
    font-size: 13px;
    font-weight: normal;
    min-height:20px;
    padding-right:10px;
}

a.chkSpA {
    font-style: italic;
}
a.chkFaA {
    font-style: normal;
}
/* --- CHECKLIST Photo Link STYLES --- */
a.chkPhoto:link, a.chkPhoto:active, a.chkPhoto:hover {
    font-size: 12px !important;
    font-weight: bold;
    background-color: #808080;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 2px 0 2px;
    font-style: normal !important;
}
a.chkPhoto:visited {
    color: #FFF;
}
a.chkPhoto:active, a.chkPhoto:hover {
    background-color: #FF0000;
    color: #FFF;
}

/* ====== Geographical Ranges Styles ====== */
.gK, .gA, .gC, .gF, .gM, .gAn {
    padding: 2px;
    margin-left: 1px;
    margin-right: 1px;
    font-weight: bold;
}

.gK {
    background-color: #e2e2e2;
}

.gA {
    background-color: #d37e8a;
}

.gC {
    background-color: #d3e78c;
}

.gF {
    background-color: #48a68e;
}

.gM {
    background-color: #d9b979;
}

.gAn {
    background-color: #a59de0;
}

.geoSymbol {
    float: left;
    /*clear: both;*/
    width: 35px;
    margin-bottom: 5px;
}

.geoText {
    float: left;
    width: 165px;
    margin-bottom: 5px;
}

.geoHr {
    border-top: solid 1px #7790d6;
    padding-top: 5px;
}

.rangeDisabled, .rangeDisabledList {
    background-color: #cccccc;
    opacity: .50;
    -moz-opacity: .50;
    filter: alpha(opacity=50);
    /*display: none;*/
}
.rangeDisabledList {
    /* for 1 col list to change divider colour - not used for grid images */
    border-bottom: solid 1px #fff !important;
}

.rangeHidden {
    display: none; /*not used currently*/
}




/* ===== layout and positioning ===== */
#wrapper {
    margin: 0 auto;
    width: 1216px;
    height: auto;
    padding: 0 0 0 0;
    text-align: left;
}
#page {
    background-color: #fff;
    border-left: solid 1px #3b7fb0;
    border-right: solid 1px #3b7fb0;
    border-bottom: solid 1px #3b7fb0;
    float: left;
    width: 100%;
}
#toppannel {
    width: 100%;
    float: left;
    clear: none;
}
#leftpanel {
    width: 220px;
    float: left;
    clear: none;
}
#homebodypannel, #bodypannel {
    width: 736px;
    float: left;
    clear: none;
    margin: 0 20px;
}
#rightpannel {
    width: 220px;
    float: right;
    clear: none;
    margin-bottom: 10px;
}
#rightpannelBottom {
    width: 220px;
    float: right;
    clear: none;
    margin-bottom: 10px;
}
#mainrightpannel {
    float: left;
    padding: 0 25px 20px 25px;
}
#pagefooter {
    width: 100%;
    float: left;
}

/* ===== top panel styles ===== */
#divTopPanelL {
    width: 1099px;
    height: 112px;
    float: left;
    background-image: url(../images/topleftbanner_d.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    text-align: right;
}

#divTopPanelR {
    width: 117px;
    height: 112px;
    float: left;
    background-image: url(../images/toprightbanner_d.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}
#imgNZMollusca {
    width: 340px;
    height: 50px;
    background-image: url(../images/nzmollusca_d.png);
    margin:0 8px 0 0;
}

/* ===== footer panel styles ===== */
.pageFooter {
    font-size: 12px;
    background-color: #eaf6fd;
    border-top: 3px solid #044365;
    text-align: center;
    padding: 6px 0;
    margin: 0;
}

.pageFooter span {
    padding-right: 5px;
}
.footerR {
    display: none; /*mobile only*/   
}

/* ===== panel wrapper styles ===== */
.divMainPanelWrapper, .divSidePanelWrapper {
    display: block;
}
.divMainPanelWrapper {
    /*width: 100%;
    float: left;*/
}

/* ===== side panel styles ===== */
.divSidePanelHL, .divSidePanelHR {
    background: url(../images/textheadingsprite.gif) 0px -78px repeat-x;
    width: 220px;
    height: 26px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    color: #f1f9ff;
    font-size: 15px;
}
.divSidePanelHL {
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;
}
.divSidePanelHR {
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
}
    
.divSidePanelL, .divSidePanelR, .divSidePanelBL, .divSidePanelBR {
    background-color: #e2e2e2;
}
.divSidePanelL, .divSidePanelR, .divSidePanelBL, .divSidePanelBR {
    border-bottom: solid 1px #3b7fb0;
}
.divSidePanelL, .divSidePanelBL {
    border-right: solid 1px #3b7fb0;
}
.divSidePanelR, .divSidePanelBR {
    border-left: solid 1px #3b7fb0;
}
.divSidePanelBL, .divSidePanelBR {
    margin-bottom: 10px;
}
.divPadTop {
    margin-top: 10px;
}
.divDisclaimerWrapper {
    /*display: block;*/
    /*border: solid 3px red;
    margin-top: 10px;*/
    /*border: solid 1px #808080;
    background-color: #CCC;*/
}
/* ===== middle panel styles ===== */
.divMainPanelH, .divMainPanelHI {
    width: 736px;
    float: left;
}
.divMainPanel, .divMainPanelB {
    width: 734px;
    float: left;
}

.divMainPanelH, .divMainPanelHI {
    min-height: 26px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    color: #f1f9ff;
    font-size: 15px;
    background: url(../images/textheadingsprite.gif) 0px -78px repeat-x;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.divMainPanel, .divMainPanelB {
    border-left: solid 1px #3b7fb0;
    border-right: solid 1px #3b7fb0;
    border-bottom: solid 1px #3b7fb0;
}
.divMainPanelB {
    margin-bottom: 10px;
}
.divMainPanelInsertDiv {
    padding: 5px 5px 3px 5px;
    border-bottom: solid 1px #3b7fb0;
}
.divMainPanelInsertDivT {
    padding: 5px;
    border-top: solid 1px #3b7fb0;
}

/* ===== form elements ===== */
.fldSet {
    margin: 0 10px 5px 0;
    padding: 0px 3px 7px 3px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    vertical-align: baseline;
}
.fldSet legend {
    font-size: 11px;
}

label {
    font-size: 12px;
}

label.lnk {
    cursor: pointer;
}

label.padR {
    margin-right: 5px;
}

/*==== Search Input Styles ======*/
#panelQuickSearch, #panelSpeciesSearch, #spanelLocalitySearch {
    display: block;
}
.search-box {
    width: 100%;
    margin: 0;
    height: 45px;
    padding-top: 5px;
}

.search-form-item {
    margin: 0 5px 5px 5px;
    padding: 3px 3px;
    min-height: 22px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    vertical-align: baseline;
    /* overflow: hidden;*/
}
.searchInput {
    font-size: 13px;
    background-color: #fff;
    width: 99%;
    padding: 2px 0 3px 2px;
    color: #333;
    outline: none;
    border: none;
    position: relative;
}
.searchInputSpan {
    font-size: 13px;
    color: #333;
}
#chkSearchImages {
    position: relative;
}
.txtPad {
    padding: 4px 7px 5px 7px;
}
.imgPad {
    padding: 4px 2px;
}
.noSearchText {
    padding: 6px 15px 6px 20px;
}
.noSearchText p {
    font-size: 13px;
}

#btnQuickSearch, #btnQuickSearchClear, #btnAdvancedSearch, #btnAdvancedReset, #btnLogin, #btnSpeciesSearch, #btnLocalitySearch, #btnShowResults {
    position: relative;
    float: right;
    top: 0;
    height: 32px;
    width: 60px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-width: 0;
    background-color: #999;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
}

#btnQuickSearchClear {
    font-size: 14px;
    width: 20px !important;
    height: 20px;
    top: -20px;
    right: -58px;
    padding: 0 0 5px 0;
}

#btnQuickSearch, #btnQuickSearchClear, #btnAdvancedSearch, #btnLogin, #btnSpeciesSearch, #btnLocalitySearch, #btnShowResults {
    background-color: #1978a4;
}
#btnAdvancedReset {
    background-color: #999;
}

#btnQuickSearch, #btnSpeciesSearch, #btnLocalitySearch {
    top: 8px;
    right: -3px;
}
#btnAdvancedSearch {
    right: -3px;
}
#btnAdvancedReset {
    right: -7px;
}
#btnLogin {
    right: 5px;
}
#btnShowResults {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 90px;
}

#btnQuickSearch:hover, #btnQuickSearchClear:hover, #btnAdvancedSearch:hover, #btnAdvancedReset:hover, #btnLogin:hover,
#btnSpeciesSearch:hover, #btnLocalitySearch:hover {
    background-color: #7a7a7a;
}


/* ====== paging styles ====== */
.pagingNavWrapper {
    float: left;
    clear: both;
    width: 100%;
    border-bottom: solid 1px #d6d6d6;
}
.pagingNavCount {
    float: left;
    padding: 3px;
}
.pagingNavPages {
    float: right;
    padding: 3px;
}

.divPageNumbers {
    padding: 0 4px 3px 4px !important;
}

.divPageNumbers a, .divPageNumbers span {
    font-size: 13px;
    font-weight: normal;
    padding: 1px 4px;
    margin: 0 1px;
}

.divPageNumbers a {
    border: 1px solid #e7e7e7;
    text-decoration: none;
}

.divPageNumbers .current {
    color: #FF0000;
    font-weight: bold;
    border: 1px solid #FF0000;
}

.divPageNumbers .prev, .divPageNumbers .next {
    margin: 0 3px;
}

.divPageNumbers .inactive {
    border: 1px solid #aaaaaa;
    color: #aaaaaa;
}

.divPageNumbers a:link {
    text-decoration: none;
    background-color: transparent !important;
}
.divPageNumbers a:hover, .divPageNumbers a:active {
    text-decoration: none;
    background-color: #cccccc !important;
    border: 1px solid #808080;
}

/* ===== map styles ===== */
.mygmap3 {
    /*width: 710px;*/
    height: 500px;
    border: 1px solid #808080;
    /*margin: 10px 0 10px 10px;*/
}
.divSpeciesLocalities {
    width: 695px;
}
.mygmap3loading{
    text-align:center;
    margin: 5px 0 0 0;
}
#mygmap3key {
    float: left;
    width: 695px;
    margin: 0 0 10px 10px;
}
.mapKeyIcon {
    height: 8px;
    width: 8px;
    margin: 2px 3px 0 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
/* ====== map legend/key styles ====== */
.mapKey {
    float: left;
    width: 340px;
    margin-bottom:3px;
}
.mapKey .icon {
    float: left;
    vertical-align: top;
    padding-top: 6px;
}
.mapKey .text {
    float: left;
    vertical-align: top;
    font-size: 12px;
    font-weight: normal;
    padding-top: 8px;
    padding-right: 10px;
    width: 280px;
}
.mapKey .chk {
    float: left;
    vertical-align: top;
    padding-top: 4px;
    padding-right: 2px;
    transform: scale(1.3);
}

/* ===== Geographical Range Filter Styles ===== */
.divGeoRangeFilterLink {
    font-weight: normal;
    display: block;
    cursor: pointer;
    padding-bottom: 0px !important;
}

.divGeoRangeFilter {
    display: none;
}
.divRangeFilter {
    font-size: 12px;
}
.geoRangeFilter {
    background-color: #818181;
    color: #fff;
    cursor: pointer;
}

/* ===== Species Compare Grid Styles ===== */
.tdSpeciesGrid {
    font-size: 13px;
    padding: 4px 10px;
    background-color: #e4e4e4;
    width: 226px;
}
.tdSpeciesGrid:not(:last-child) {
    border-right: solid 1px #808080;
}
.tdSpeciesGrid:last-child {
    padding-bottom: 10px;
}
.trSpeciesGridLast:not(:last-child) {
    border-bottom: solid 1px #808080;
}

/* ===== Species Compare Popup Styles ===== */
.species-compare-wrapper {
    position: fixed;
    bottom: 0;
    right: 0;
}

.species-compare-alert-wrapper {
    position: fixed;
    bottom: 50px;
    right: 10px;
    display: none;
}
.species-compare-alert {
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 18px;
    color: #000;
    background-color: #bada55;
    border: solid 1px #000;
    padding: 5px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.species-compare-alert-arrow {
    position: fixed;
    bottom: 38px;
    right: 20px;
}
.species-compare-button {
    height: 64px;
    padding: 10px 2px 0 2px;
    background-color: #bada55;
    color: #000;
    line-height: 16px;
    font-size: 13px;
}

.species-compare-list, .species-compare-count {
    position: fixed;
    bottom: 0;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 14px;
    background-color: #3b7fb0;
    border: solid 1px #000;
    color: #FFF;
    float: right;
}

.species-compare-count {
    cursor: pointer;
    width: 200px;
    right: 0;
    padding: 5px 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
}

.species-compare-list {
    display: none;
    right: 205px;
    padding: 2px 5px 2px 5px;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

/* ===== NEW Slider On/Off Checkbox Styles ===== */
input[type=checkbox].chkSlider {
    height: 0;
    width: 0;    
    display:none; /* NOT visibility: hidden; as that still takes up space! */
}
label.slider {
    cursor: pointer;
    text-indent: -9999px;
    width: 35px;
    height: 18px;
    background: grey;
    display: block;
    border-radius: 18px;
    position: relative;
}
label.slider:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 14px;
    transition: 0.3s;
}
input.chkSlider:checked + label {
    background: #bada55;
}
input.chkSlider:checked + label.slider:after {
    left: calc(100% - 1px);
    transform: translateX(-100%);
}
label.slider:active:after {
    width: 33px;
}

/* ======================================================= */
/* =============== normal screen overrides =============== */
/* ======================================================= */
@media screen and (max-width: 1200px) {
    #wrapper {
        width: 996px;
    }

    #homebodypannel {
        width: 516px;
    }
    #bodypannel {
        /*width: 516px;*/ /*width: 556px;*/
    }

    #divTopPanelL {
        width: 879px;
    }
    .divMainPanelHI, divMainPanelBI {
        width: 516px;
    }
    .imgNewLL {
        width: 116px;
        border: none;
    }

    .ulImgLL li {
        width: 121px;
        height: 115px;
    }
}

/* ===== search overrides - NEW TESTING STYLES 17/06/2025 ===== */
#lblchkSearchImages, #chkSearchImages {
    display: none;
}
#divQuickSearchImages{
    height:18px;
}
.search-box1 {
    display: none;
}


/* ======================================================= */
/* =============== mobile screen overrides =============== */
/* ======================================================= */
@media screen and (max-width: 768px) {
    body{
        overflow-x: hidden !important;
    }
    #wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* wrapper panel overrides */
    #wrapper, #leftpanel, #rightpannel, #rightpannelBottom, #homebodypannel, #bodypannel {
        width: 100%;
        margin: 0;
    }
    #divTopPanelL {
        width: 100%;
        height: 115px;
        background-image: url(../images/topbanner_m.jpg);
    }
    #divTopPanelR {
        display: none;
    }
    #imgNZMollusca {
        width: 160px;
        height: 50px;
        background-image: url(../images/nzmollusca_m.png);
        margin-top:20px;
    }
    a.linkbutton_m {
        display: inline;
    }
    a.linkbutton_f {
        display: none;
    }
    #panelNewSpecies {
        display: none;
    }
    /* footer overrides */
    .pageFooter {
        font-size: 12px;
        border: none;
        text-align: left;
        height: 111px;
        padding: 0;
        margin: 0 0 5px 0;
        background-image: url('../images/mobilefooterbg.jpg');
        background-repeat: repeat-x;
    }
    .pageFooter span {
        padding-right: 10px;
    }
    .footerL span {
        padding: 0;
        float: left;
        clear: both;       
    }
    .footerL {
        float: left;
        height: 111px;
        font-family: arial, helvetica, sans-serif;
        font-size: 12px;
        text-align: left;
        background-color: transparent;
    }
    .footerLtext {
        margin: 36px 0 0 5px;
    }
    .footerR {
        float: right;
        display: block;
        width: 131px;
        height: 111px;
        background-image: url('../images/mobilefooterR.jpg');
    }

    /* side and main panel overrides */
    .divSidePanelR {
        border-top: solid 1px #3b7fb0;
    }
    .divSidePanelR, .divSidePanelBR {
        border-left: none;
    }
    .divSidePanelHL, .divSidePanelHR, .divMainPanelH, .divMainPanelHI {
        width: 100%;
        background: none;
        background-color: #3b7fb0;
        border: solid 1px #808080;
    }
    .divMainPanelH, .divMainPanelHI {
        width: 100%;
        float: left;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .divMainPanel, .divMainPanelB, .divMainPanelBI {
        width: 100%;
        float: left;
        margin: 0;
        padding: 0;
    }

    .pagingNavPages {
        float: left;
    }

    /* ===== div list styles (eg. species detail table) mobile screen overrides ===== */
    .detailWrapper {
        padding: 5px 4px;
        width: calc(100% - 30px);
        font-size: 15px;
    }
    .detailWrapper .detail {
        width: calc(100% - 30px); /*width: 100%;*/
        /*width: calc(100% - 180px);*/ /* now we are listing details UNDER labels for mobile view */
        float: left;
        clear: left;
        margin: 0;
        padding: 5px 20px;
        font-size: 15px;
    }
    .wrapperNarrow div.detail {
        width: calc(100% - 30px); /*width: 100%;*/
    }

    /* UL and grid image content overrides */
    .ulImgL li {
        width: 100px;
        height: 140px;
    }
    .thumbClassImgDiv {
        width: 82px;
    }
    .thumbClassImgDiv img {
        width: 90px;
    }
    .thumbClassTextDiv {
        padding: 5px 10px 5px 95px;
    }
    .thumbClassImgDiv div.noimage {
        width: 90px;
        height: 67px;
    }

    /* ===== set font sizes here overrides ===== */
    .regular {
        font-size: 15px;
        font-weight: normal;
    }

    .small {
        font-size: 14px;
        font-weight: normal;
    }
    a.majorLink:link {
        font-size: 14px;
    }

    /* --- CHECKLIST BODY STYLES overrides --- */
    .divChecklistScrolling {
        overflow: unset;
        height: unset;
        max-height: unset;
    }
    .chkSp {
        font-family: Tahoma, Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        font-weight: normal;
    }
    .chkSp {
        padding: 0 20px 0 20px;
    }
    .chkSp a {
        font-family: Tahoma, Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        font-style: italic;
    }
    a.chkPhoto:link, a.chkPhoto:active, a.chkPhoto:hover {
        font-size: 14px !important;
        font-weight: bold;
        background-color: #808080;
        color: #FFF;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0 2px 0 2px;
        font-style: normal !important;
    }
    a.chkPhoto:active, a.chkPhoto:hover {
        background-color: #FF0000;
        color: #FFF;
    }

    /* ===== homepage image overrides ===== */
    .imgNewLL {
        width: 95px;
        border: none;
    }
    .ulImgLL li {
        width: 99px;
        height: 100px;
    }

    /* ====== map legend/key overrides ====== */
    .mapKey .icon {
        padding-top: 6px;
    }
    .mapKey .text {
        padding-top: 9px;
    }
    .mapKey .chk {
        padding-top: 5px;
        transform: scale(1.0);
    }

    /* ===== search overrides - NEW TESTING STYLES 17/06/2025 ===== */
    #divQuickSearchHeading, #divQuickSearchAdvancedLink, #divQuickSearchImages, #btnQuickSearch {
        display: none;
        height: 0;
    }
    #quickSearchBox {
        display: block;
        float: right;
        width: 100%;
        margin: 0;
        height: 0;
        padding: 0;
    }
    #searchFormItem {
        display: block;
        float: right;
        margin: 0 5px 5px 5px;
        padding: 3px 3px;
        height: 28px;
        width: 220px;
        border: 2px solid #000;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #fff;
        position: relative;
        top: -40px;
        right: 60px;
        opacity: .90;
        -moz-opacity: .90;
        filter: alpha(opacity=90);
        background-image: url('../images/magnify24.png');
        background-repeat: no-repeat;
        background-position: 4px;
    }

    #searchSpecies {
        display: block;
        float: right;
        font-size: 16px;
        background-color: #fff;
        width: 70%;
        padding: 2px 0 3px 2px;
        color: #333;
        outline: none;
        border: none;
        position: relative;
        top: 2px;
        right: 36px;
    }
    #btnQuickSearchClear {
        display: block;
        position: relative;
        float: right;
        top: 4px;
        right: -153px;
        height: 20px;
        width: 20px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-width: 0;
        background-color: #1978a4;
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        padding: 0 0 5px 0;
        cursor: pointer;
    }
    
    
    
    


    /* ===== map styles overrides ===== */
    .mygmap3 {
        width: calc(100% - 22px); /*width: 96%;*/
        height: 500px;
        border: 1px solid #808080;
        margin: 10px 10px 10px 10px;
    }

    .divSpeciesLocalities {
        width: 100%;
    }
    #mygmap3key {
        width: 96%;
    }

    /*paging overrides*/
    .pagingFull {
        display: none;
    }

    .divPageNumbers a, .divPageNumbers span {
        font-size: 15px;
    }

    .responsive-image {
        height: auto;
        width: calc(100% - 7px); /*width: 100%;*/
    }
    .div-responsive-image {
        float: left;
        width: calc(100% - 5px); /*width: 100%;*/
    }
    .imgCaption {
        min-height: unset;
    }

}

/* ===== Customised Google Map Styles ===== */
.gm-style-iw button {
    display: none !important;
}