.alert {background:#f5f5f5; border:2px solid #CCC; margin: 0 0 0.2em; padding: 0.2em; color: #CC0000;}

#page-info {margin: 0 0.3em;}

.box-info {border: 1px solid #ccc; width: 291px; margin: 2px 2px 0 0; float:left; height: auto !important; height: 13em; min-height: 14em;}
.box-info h2 {font-size: 1em; margin: 0 0 0.2em; padding: 0.2em; background: #e5e5c3; color: #655e30;}
.box-info p {margin: 0; padding: 0.2em;}
.box-info ul {margin: 0.3em 1.5em;}


#faq_DL .box-info {width: 260px; text-align: center;}

#faq_DL, #faq_DL dl, #faq_DL dd, #faq_DL dt {margin:0;padding:0;} 
#faq_DL dt {clear: both; font-weight:bold ; border:1px solid #fff; }
/* image and left padding for DDs */
#faq_DL dd {margin:0.4em 0 1em 0; clear:both; border:1px solid #e5e5e5;}
/* styling all anchors in the DTs */
#faq_DL dt a {padding:0.2em 0.2em 0.2em 12px;text-decoration:none; color:#000; background:0 50% no-repeat;display:block;font-weight:normal; background-color: #f5f5f5;}
#faq_DL dt a:visited:hover, #faq_DL dt a:hover{color:#000;text-decoration:underline;}
#faq_DL dt a:active, #faq_DL dt a:focus {color:#000;}
 
/* the + and - gif in the anchors */
#faq_DL .DTplus a {background-image:url(/watl/images/symbols/link-page.gif); background-position:0 3px;font-weight:normal;} 
#faq_DL .DTminus a {background-image:url(/watl/images/symbols/link-down.gif);background-position:0 6px; font-weight:bold;}
/**********************************/
 
#faq_DL .showDD {display:block;}
#faq_DL .hideDD{display:none;}
 
/*  "Show All" + "Hide All" links */
#faq_ToggleON , #faq_ToggleOFF {border:1px solid #ccc;padding:0.4em; background-color:#f5f5f5; margin:0.4em 0.4em 0.4em 0;display:inline;width:100px;text-decoration:none;}
#faq_ToggleON:hover , #faq_ToggleOFF:hover {background-color:#fff;}
 
/* js id anchor for writing javascript controls (all on/off) into page */
#jsControls{margin-top:1.0em; font-weight:bold; border:1px solid #ccc;}
#jsControls p{line-height:2.0em;}
#jsControls h2{padding-top:0.4em;}
#faq_ToggleON{margin-left:6em;}
 
div.checklist ul{ list-style-image: none;}
div.checklist li{background-image:url(/watl/images/symbols/checbox.gif); background-repeat:no-repeat; background-position:0 0; padding-left:20px;padding-bottom:0.6em; padding-right:0.2em;}
div.checklist h2{margin-top:1.2em}
 
.leftmenu li.subhead {font-weight: bold; background-image: none; text-indent: 0;}

.inactive {color:#ccc;}

.table-text2{border:#ccc solid 2px;}
.table-text2 tr:hover{background-color:#fff;}

.table-text2 th,.table-text2 td{border:1px solid #fff;padding:2px;margin:1px}
.bg1 {background-color: #F2F1DB; }
.bg2 {background-color: #F9FDDF;}
.bg3 {background-color: #CCCC99;}


@media print{
	#jsControls{display:none;}
	#faq_DL dd, .hideDD {position:relative; top:0;display:block;}
	div.checklist li{ list-style-image:url(/watl/images/symbols/checbox.gif);margin-left:0.4em; padding-left:0.2em; margin-bottom:0;padding-bottom:0.3em;}
}

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
 @media screen{
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
 background-color:transparent;/*added */

}
.tabberlive {
 margin-top:1em;
 background-color:transparent;/*added */
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #999; /*#778 blue grey */
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #999;
 border-bottom: none;
 background:#E5E5C3;
 text-decoration: none;
}

ul.tabbernav li a:link { color:#655E30 ; }
ul.tabbernav li a:visited { color: #667; } 

ul.tabbernav li a:hover
{
 color: #000;
 background:#FFF ; 
 border-color:#000 ;
}

ul.tabbernav li.tabberactive a
{
 color:#000;
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: #fff;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #ccc; /* #aaa grey */
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px; 
 overflow:auto;
}
} /* /screen styles */

@media print{.tabbernav { display:none;}}

.tabberlive{position: relative; /* IE6/7 fix for clipped content */}

.tabbertab {height:1%;}


.table-text {width: 100%; border-collapse: collapse;}
.table-text tr {border-bottom: 1px solid #E6E6E6;}
.table-text th * {vertical-align: middle;}
.control label { float: left; }
.control input {position: relative; width: auto; display: inline; margin-right: 0.4em}
.control * {vertical-align: middle}
label input {display: block; width: 95%}

th.area {width: 20%}
th.name {width: 40%}
th.date {width: 40%}

/* /cyclone/event/ loop animation style - Adrian Evans 31/01/11 */

div#loopAnimControls {
	display: block; position: relative; float: none; clear: none; margin: 10px 0; height: 25px;
}
div#loopAnimControls a {
	display: block; float: left; clear: none; margin-right: 3px; width: 25px; height: 25px;
}
div#loopAnimControls a img {
	border: none;
}
div#loopAnimControls form {
	display: block; float: left; clear: none; margin-left: 6px; line-height: 25px;
}
div#loopAnimControls form input {
	width: 18px; text-align: center;
}
div#loopAnimContainer {
	position: relative; overflow: hidden; width: 591px;
}
div#loopAnimContainer img {
	position: relative; border: none; margin-left: -49px;
}
#seq-btn {
	height:56px;
	width:188px;
	padding:0; 
	margin-top:7px; 
	margin-bottom:7px;
	border:1px solid #8A9BA8;
	background-color:#D3E5F0;
	background-image:url('/cyclone/images/seq-btn-bg.png');
	background-repeat:repeat;
	vertical-align:middle;
	}
#seq-btn img {float:left; padding:5px 7px 5px 5px; border:0;}
h3.seq-btnTitle, h3.seq-btnTitle a {
	text-decoration:none;
	font-family: Helvetica, Arial, sans-serif; 
	font-weight:normal;
	font-size: 1.1em;
	line-height: 1.1em;
	color:#4583C0; 
	margin:2px 0 3px 0;
	padding:0;
	background-color: transparent;
	border: none;
	}
.seq-btnSubTitle, .seq-btnSubTitle a {
	text-decoration:none;
	font:11px Arial, sans-serif; 
	color:#000; 
	padding:0;
	margin:0;
	}

/* styles for severe tropical cyclone page /cyclone/history/yasi.shtml
   by Adrian Evans 04/02/2011	*/

div.box-feature ul {
	margin-bottom: 1em;
	margin-left: 2em;
}
div#loop_box {
	position: relative;
	float: none;
	clear: none;
	border: 2px solid #CCC;
	padding: 9px;
	margin: 1em 0;
	width: 569px;
	height: 202px;
	background-color: #F5F5F5;
}
div#loop_box div {
	position: relative;
	float: left;
	clear: none;
	margin-right: 12px;
	width: 180px;
}
div#loop_box div.loop_box_end {
	margin-right: 0px;
}
div#loop_box div a {
	text-decoration: none;
}
div#loop_box div a img {
	border: 1px solid #999;
	margin-bottom: 5px;
}
div#loop_box div p {
	margin: 0.3em 0;
	font-size: 80%;
}
div.yasi_image {
	width: 587px;
	border: 2px solid #CCC;
	margin: 1em 0;
}
table.yasi_tab_data {
	margin: 1em 0;
	border: 1px solid #CCC;
}
table.yasi_tab_data td {
	border-bottom: 1px dotted #CCC;
	vertical-align: top;
}
table.yasi_tab_data td.last {
	border-bottom: none;
}
div.yasi_tab_data {
	float: none;
	clear: none;
	position: relative;
	overflow: auto;
	padding-bottom: 3px;
	margin: 1em 0;
}
div.yasi_tab_data .left {
	float: left;
	clear: left;
	width: 210px;
	margin-bottom: 0.2em;
}
div.yasi_tab_data .right {
	float: left;
	clear: none;
	width: 350px;
	margin-bottom: 0.2em;
}
ul.track_legend {
	margin: 1em 0em;
}
ul.track_legend li {
	display: inline;
	list-style-type: none;
	padding: 0px 0.51em 0px 0.5em;
}
ul.track_legend span.color {
	 margin-right: 0.3em;
	 border: 1px solid #FF6767;
	 padding-right: 1.4em;
}