@charset "utf-8";
/* aus cyclones */

/* map */
.tc-areas {width:48%; float:right; margin-left:1%;}
#tc-regions .text p{background-color: transparent !important;  color:#333; text-shadow:#fff 1px 1px 0px}

#tc-regions {position: relative; height:256px; border: 1px solid #ccc;}
#tc-regions img {display:block; position:absolute;z-index: 1;top:0; left:0}
#australian, #western, #northwestern, #northern, #eastern {position:absolute; z-index: 99; border: 1px dotted #fff; background-color:rgba(0,0, 0, 0.0); }
#australian:hover , #western:hover, #northwestern:hover, #northern:hover, #eastern:hover { background-color:rgba(256,256, 256, 0.4); border-color:#C00; border-style:solid; cursor:pointer; box-shadow:#666 0 0 4px}
#australian:hover strong,#australian:hover .value, #western:hover strong,#western:hover .value, #northwestern:hover strong,#northwestern:hover .value #northern:hover strong, #northern:hover .value, #eastern:hover strong, #eastern:hover .value{color:#C00;}

#australian {top:20px; left:7px; width:355px; height: 203px; border-width:2px; }
#australian .text {width:auto !important; padding:130px 0 0 85px; margin:0}

#western {top:22px; left:9px; width:177px; height: 201px}
#western .text {width:140px; padding:115px 0 0 0; margin:0}

#northern {top:23px; left:186px; width:88px; height: 201px}
#northern .text {width:70px; padding:5px 0 0 20px; margin:0}

#northwestern {top:23px; left:84px; width:125px; height: 104px}
#northwestern .text {width:100px; padding:15px 0 0 0; margin:0 }

#eastern {top:22px; left:274px; width:88px; height: 201px}
#eastern .text {width:80px; padding:60px 0 0 5px; margin:0}


#tc-regions.aus .text p { padding:0 !important; margin:0 !important; font-size:.8em;}
#tc-regions.aus strong, #tc-regions.aus .value {color:#000;}
#tc-regions.aus div:hover p , #tc-regions.aus  div:hover p {color:#000;}
#tc-regions.aus div:hover strong , #tc-regions.aus  div:hover .value {color:#900;}

strong.black {color: #000;}
#tc-regions.aus .text p strong { font-size:1.1em;}


/* generic to tcs */

.ui-tabs .ui-tabs-panel { min-height: 200px;}
.ui-tabs-panel h3 {clear: none;}
#tabs img {display:block; max-width: 100%; box-sizing:border-box;}
#about a img {max-width:100%; height:auto;}

/* see also buttons */
.inline { display: inline;}
.intro {padding:10px;}
a.button{ margin-top:0;}
.button.inline {display: inline-block; width:auto; float: none; padding: 8px; margin: 2px;}
.button.inline.alert  {background-color: #FFC;}

/* not cmslite generic ...as annual timestamp - review */
p.date {
    background: rgba(0, 0, 0, 0) url("/climate/images/symbols/time-icon.png") no-repeat scroll left top;
    height: 2em;
    margin: 0.5em 0;
    padding: 1px 4px 1px 20px !important;
}


p.date span {
    color: #666;
    display: inline-block;
    font-weight: normal;
    margin-left: 0;
    margin-right: 0.5em;
}
time:before {
    content: 'Issued';
    color: #666;
    display: inline-block;
    font-weight: normal;
    margin-left: 0;
    margin-right: 0.5em;
}

time {
    color: #000;
    display: inline-block;
    font-weight: bold;
    margin-right: 0.5em;
}