/*****
 * Generic/Common styles used for all of the MWOL website templates.
 ******/


/**** DEFAULT TAG STYLES ****/
	body, html {font-family: sans-serif; font-size: 14px; text-align: center;  margin: 0px; /*background: #f8f8f8;*/}
	img {border: none;}
	p, h3 {margin: 0px; margin-bottom: 1em;}
	form {margin: 0px;}
	button {padding: 2px;}
	fieldset {border: 1px solid #CCC; margin-bottom: 10px; padding: 5px; border-radius: 5px;}
	fieldset legend {color: #999; font: italic normal bold 14px sans-serif; margin-left: 10px;}
	fieldset hr {border: none; background: #CCC; height: 1px; line-height: 1px;}
	
/**** JQUERY UI PLUGIN ****/
	/* set default font size */
	.ui-widget {font-size: 10px;}
	/* date picker trigger style */
	.ui-datepicker-trigger {vertical-align: middle; margin-left: 2px;}
	/* autocomplete list items */
	.ui-menu-item {text-align: left;}
	/* left aligh tooltip text */
	.ui-tooltip { text-align: left; }
	
	
/**** JQUERY VALIDATION PLUGIN ****/
	div.error {display: none;}
	input.error {border: 1px dotted red;}
	label.error {color: red; font-style: italic; display: block;}
	
/**** JQUERY FLOWPLAYER TOOLS PLUGIN ****/
	div.tooltip { 
		background-color: #000; border: 1px solid #fff; padding: 10px 15px; width: 200px; display: none; color: #fff; text-align: left; font-size: 12px; z-index: 100;
		/* outline radius for mozilla/firefox only */ 
		-moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; 
	}
	/* the overlayed element */ 
	.overlay640-200 { 
		display:none; z-index:10000; background-color:#333; width:640px; min-height:200px; border:1px solid #666; 
		/* CSS3 styling for latest browsers */ 
		-moz-box-shadow:0 0 90px 5px #000; 
		-webkit-box-shadow: 0 0 90px #000;     
	} 
	/* the overlayed element */ 
	.overlay500-400 { 
		display:none; z-index:10000; background-color:#333; width:500px; min-height:400px; border:1px solid #666; 
		/* CSS3 styling for latest browsers */ 
		-moz-box-shadow:0 0 90px 5px #000; 
		-webkit-box-shadow: 0 0 90px #000;     
	}
	/* the overlayed element - gdd/chill graphs */ 
	.overlay500-550 { 
		display:none; z-index:10000; background-color:#333; width:500px; min-height:550px; border:1px solid #666; 
		/* CSS3 styling for latest browsers */ 
		-moz-box-shadow:0 0 90px 5px #000; 
		-webkit-box-shadow: 0 0 90px #000;     
	}
	/* close button positioned on upper right corner */ 
	.overlay640-200 .close, .overlay500-400 .close, .overlay500-550 .close {background-image:url(http://flowplayer.org/img/overlay/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px;}
	
/**** GLOBAL STYLES ****/
	/* table form layout */
	table.form {font-size: 14px;}
	table.form th {text-align: right; padding-right: 3px;}
	/* table form layout - small */
	table.form-small {font-size: 11px;}
	table.form-small th {text-align: right; padding-right: 1px;}
	table.form-small input {font-size: 11px;}
	table.form-small select {font-size: 11px;}
	table.form-small textarea {font-size: 11px; font-family: sans-serif;}
	/* images in buttons */
	img.btn-image {vertical-align: top; margin-right: 4px;}
	/* main form options fieldset */
	fieldset.options {width: 350px; margin: 0px auto 10px auto; position: relative;}
  /* form options with custom width specified in style tag */
  fieldset.options-custom-width {margin: 0px auto 10px auto; position: relative;}
  /* wizear form fieldset */
	fieldset.wizard {width: 500px; margin: 0px auto 10px auto; position: relative;}
	/* calculators don't have a options box so this style is applied to a div in it's place */
	div.calculator {margin: 0px auto; width: 400px; position: relative;}
	/* addition options offset to the right of the main form options */
	div.options-right {position: absolute; top: 0px; right: -210px; width: 200px;}
	/* custom accordion form options effect (see gdd calc) */
	#options-accordion p {margin: 0.25em 0;}
	#options-accordion .pane {display: none; margin-bottom: 5px;}
	
	/* form button layouts */
	button.btn-right {float: right;}
	/* vertical link list with icons */
	ul.link-list {list-style-type: none; margin: 0 0 0 1em; padding: 0px;}
	ul.link-list li {background-position:0 0; background-repeat:no-repeat; padding:0 0 0 22px; margin: 0.75em 0px;}
	/* horizontal link list with icons */
	ul.link-list-hoz {list-style-type: none; margin: 0 0 0 1em; padding: 0px;}
	ul.link-list-hoz li {background-position:0 0; background-repeat:no-repeat; padding:0 25px 0 22px; margin: 0.75em 0px; float: left;}
	/* list icons */
	li.graph {background-image:url(https://img.metwatch.co.nz/fam/chart_bar_edit.png);}	
	li.graph-link {background-image:url(https://img.metwatch.co.nz/fam/chart_bar_link.png);}	
	li.data {background-image:url(https://img.metwatch.co.nz/fam/application_view_columns.png);}	
	li.excel {background-image:url(https://img.metwatch.co.nz/fam/page_white_excel.png);}	
	li.help {background-image:url(https://img.metwatch.co.nz/fam/help.png);}	
	li.info {background-image:url(https://img.metwatch.co.nz/fam/information.png);}	
	li.film {background-image:url(https://img.metwatch.co.nz/fam/film.png);}	
	li.spray {background-image:url(https://img.metwatch.co.nz/fam/timeline_marker.png);}	
	li.zoom {background-image:url(https://img.metwatch.co.nz/fam/zoom.png);}
	li.cog {background-image:url(https://img.metwatch.co.nz/fam/cog.png);}
	li.key {background-image:url(https://img.metwatch.co.nz/fam/key.png);}
	li.user {background-image:url(https://img.metwatch.co.nz/fam/user.png);}
	li.table {background-image:url(https://img.metwatch.co.nz/fam/table.png);}
	li.station {background-image:url(https://img.metwatch.co.nz/fam/transmit_blue.png);}
	li.switch {background-image:url(https://img.metwatch.co.nz/fam/arrow_switch.png);}
	li.link {background-image:url(https://img.metwatch.co.nz/fam/link.png);}
	li.star {background-image:url(https://img.metwatch.co.nz/fam/star.png);}
	li.line-spacing {background-image:url(https://img.metwatch.co.nz/fam/text_linespacing.png);}
	/* standard data table */
	table.data {background: #fafafa; border: 1px solid #CCC; border-right: none;}
	table.data tr.odd {background-color: #FFFFFF;}
	table.data tr.even {background-color: #F7F7F7;}
	table.data tr.over {background-color: #c1e0ff;}
	table.data tr.click {background-color: #feefb4;}
	table.data th, table.data td {padding: 5px 1px 5px 5px; font-family: sans-serif; font-size: 11px; font-weight: normal; text-align: left; border-right: 1px solid #CCC;}
	table.data th {border-left: 1px solid #FFF; border-bottom: 1px solid #CCC; background: #c0c0c0 url(https://img.metwatch.co.nz/table-header.gif) repeat-x 0 0; }
	table.data td {}
	/* scrolling table v2 */
	div.table-scroll {width: 100%; background: #fafafa;}
	div.table-scroll div.table-head {width: 100%; border: 1px solid #CCC; border-bottom: none; background: #fafafa url(https://img.metwatch.co.nz/table-header.gif) repeat-x 0 0;}
	div.table-scroll div.table-body {width: 100%; border: 1px solid #CCC; overflow: auto;}
	div.table-scroll div.table-body tr.odd {background-color: #FFFFFF;}
	div.table-scroll div.table-body tr.even {background-color: #F7F7F7;}
	div.table-scroll div.table-body tr.over {background-color: #c1e0ff;}
	div.table-scroll div.table-body tr.click {background-color: #feefb4;}
	div.table-scroll div.table-body input[type='checkbox'] {margin: 0px; padding: 0px;}
	div.table-scroll table {width: 100%;}
	div.table-scroll table td, div.table-scroll table th {font-family: sans-serif; font-size: 11px; font-weight: normal; text-align: left; padding: 5px 0 5px 5px; border-right: 1px solid #CCC; border-left: 1px solid #FFF;} 
	/* scrolling table hack to hide column width alignment rows */
	div.table-scroll tr.temp td {padding: 0 0 0 5px; margin: 0px;}
	div.table-scroll tr.temp td div {overflow: hidden; height: 0px;}
	div.table-scroll tr.temp th {padding: 0 0 0 5px; margin: 0px;}
	div.table-scroll tr.temp th div {overflow: hidden; height: 0px;}
	/* additional footer addon */
	div.table-foot {width: 100%; border: 1px solid #CCC; border-top: none; background: #fafafa url(https://img.metwatch.co.nz/table-header.gif) repeat-x top; font-family: sans-serif; font-size: 11px; font-weight: normal;}
	div.table-foot input, div.table-foot select, div.table-foot button {font-size: 11px;}
	div.table-foot button {padding: 1px 3px;}
	div.table-foot .container {padding: 1px 5px; border-top: 1px solid #FFF; border-left: 1px solid #FFF;}
	div.table-foot .rows {float: right; margin: 5px 10px 0 0;}
	/* scroll panel */
	div.scroll-panel {border: 1px solid #CCC; background: #fafafa; overflow: auto; padding: 2px;}
	/* collapsable fieldset style */
	fieldset.collapsible {}
	/* dissabled as sww fieldset doesn't show table when opened */
	/* fieldset.collapsible-start table {display: none;} */
	div.hide-collapsible-content {visibility: hidden;}
	fieldset.collapsed {border-bottom-width: 0; border-left-width: 0; border-right-width: 0; margin-bottom: 0; margin-left: 3px; border-radius: 0px;}
	legend.collapsible {cursor: pointer; background-image:url(https://img.metwatch.co.nz/icon-arrow-up.gif); background-position: 3px 5px; background-repeat: no-repeat; padding:0 5px 0 17px;}
	legend.collapsed {cursor: pointer; background-image:url(https://img.metwatch.co.nz/icon-arrow-down.gif); background-position: 3px 5px; background-repeat: no-repeat; padding:0 5px 0 17px;}
	/* metservice text and logo */
	p.metservice {font-size: 12px; color: #999; margin: 0px; text-align: center;}
	p.metservice img {vertical-align: middle;}
	/* metservice advert eg frost */
	.metadvert { font-size: 12px; color: #999; margin: 0px; text-align: center; }
	/* forecast last updated style */
	.fupdate {font-size: 12px; color: #AAA; margin: 0px; text-align: right; font-style: italic;}
	/* 3 column list - used on met frost advert */
	ul.three-column { list-style: none; }
	ul.three-column li { list-style: none; display: block; float: left; width: 33%; text-align: left; }
	/* small font size - can be used for buttons */
	.small {font-size: 10px;}
	/* generic error class */
	.error {color: red;}
	/* styling for a simple image gallery */
	.gallery {text-align: center;}
	.gallery legend {text-align: left;} /* correct legend if fieldset is used */
	.gallery img {background: #FFF; border: 1px solid #CCC; padding: 2px; cursor: pointer; margin: 2px;}
	/* column layout divs */
	div.column5 {width: 5%; float: left;}
	div.column10 {width: 10%; float: left;}
	div.column20 {width: 20%; float: left;}
	div.column30 {width: 30%; float: left;}
	div.column33 {width: 33%; float: left;}
	div.column40 {width: 40%; float: left;}
	div.column50 {width: 50%; float: left;}
	div.column60 {width: 60%; float: left;}
	div.column70 {width: 70%; float: left;}
	div.column80 {width: 80%; float: left;}
	div.column90 {width: 90%; float: left;}
	div.column-inner {padding: 5px;}
	/* weather widget */
	#widget {border: 1px solid #AAA;}
	#widget .td {color: #FF0000; font-size: 30px;}
	#widget .rn {color: #0000FF;}
	#widget .rh {color: #5E0D89;}
	#widget .ws {color: #333333;}
	#widget .date {font-style: italic; font-size: 12px;}
  /* loading progress statements */
  .loading-progress { margin: 0.5em auto; width: 400px; font-style: italic; color: grey; }    
  .loading-progress-gif { padding-left: 20px; background-image: url(https://img.metwatch.co.nz/ajax-icon.gif); background-repeat: no-repeat; }
  /* call to action */
  .cta { font-size: 20px; border-left: 3px solid #0B123E; padding: 15px; background-color: #f3f3f3; }
	
/**** PAGE SPECIFIC ****/
	/* sww is a standard width */
	div.sww {margin: 0 auto; width: 600px;}
	
	/* (outlook charts) image gallery */
	.gallery-420 {width: 420px; float: right; text-align: center; margin-left: 1em;}
	.gallery-420 legend {text-align: left;} /* correct legend if fieldset is used */
	.gallery-420 img {background: #FFF; border: 1px solid #CCC; padding: 2px; cursor: pointer;}
	
	/* outlook text */
	p.outlook {margin-top: 1em;}
	
	/* codling moth table cell colors */ 
	.cm-green {background: #00ff00; color: #004000;}
	.cm-yellow {background: #ffff00; color: #808000;}
	.cm-red {background: #ff0000; color: #800000;}
	
  /* second legent text for chill/gdd calcs */
  .legend2 { position: absolute; padding: 0 3px; top: -0.1em; right: 45%; background: #fff; line-height:1.2em; color: #999; font: italic normal bold 14px sans-serif }
	
	/* station info */
	ul.station-list {list-style: none; margin: 0px; padding: 0px; border: 1px #AAA; font-size: 12px;}
	ul.station-list .region {font-weight: bold;}
	ul.station-list li {padding-top: 2px; padding-bottom: 2px;}
	ul.station-list span {font-style: italic;}
	h2.station {font-size: 25px; margin: 0 0 0.5em 0;}
	
	/* manage weather data */
	.station-list td {padding-left: 1em; font-size: 10px; line-height: 10px;}
	.station-list th {font-size: 14px; font-weight: normal;}
	.btyes {border-top: solid 1px #AAA; border-left: solid 1px #AAA;}
    .btyes td {padding: 0px; font-size: 1px; line-height: 1px; width: 8px; height: 10px; background-image: url(https://img.metwatch.co.nz/icon-byte.gif); background-repeat: no-repeat; border-bottom: solid 1px #AAA; border-right: solid 1px #AAA;}
    .btyes td.future {background-position: 0px -30px;}
    .btyes td.missing {background-position: 0px -20px;}
    .btyes td.some {background-position: 0px -10px;}
    .btyes td.all {background-position: 0px 0px;}
	
	/* cropirlog weather page */
	ol.cropirlog-instructions {  }
	ol.cropirlog-instructions h4 { margin: 0px; }
	ol.cropirlog-instructions .top-menu { background: #DDD; padding: 1px 5px; }
	ol.cropirlog-instructions .right { float: right; margin-left: 5px; }
	ol.cropirlog-instructions .column-inner-r10 { padding-right: 10px; }
	ol.cropirlog-instructions .column-inner-l10 { padding-left: 10px; }
	
	/* user form register/resubscribe */
	form#settings input[type='checkbox'] {vertical-align: middle;}
	
	/* bom text forecasts */
	.bom-text { padding: 20px; background: #F7F7F7; }