/*--------------------- CSS for T4A WebSite ----------------------------*
 *
 *      Tim Sutton, Linfiniti Consulting CC, tim AT linfiniti.com
 *      Jurgen Blignaut, WebTide cc, jurgen_dot_blignaut_at_gmail_dot_com
 *
 *-------------------- Page layout styling ------------------------------*/
/* 
 * body
 *   t4a-page
 *      t4a-logo
 *      t4a-navbar
 *      t4a-page-header
 *      t4a-content
 *      t4a-site-links
 *      t4a-footer
 */

/* body background color */
body.t4a-background {
    font-family: Verdana,Arial,sans-serif;
    font-size: 12px;
    border: 0;
    /* background: #f00; /*for test site */
    background: #ffffff url(/media/images/t4a-body-bg.png) repeat-x top left;
    font-weight: normal; 
    color: #333333; 
    outline: none;
}

h1 {
    font-size: 1.8em;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}
.centered { text-align: center; }
.bold { font-weight: bold; }
/* page layout styling */
div#t4a-page {
    width: 1024px;
    text-align: left;
    margin: auto;
    padding-top: 10px;
}


div#t4a-auth-links {
    margin-top: 16px; 
    float: left;
}
div#t4a-auth-links a {
    color: #ff7e00;
    text-decoration: none;
}
div#t4a-auth-links a:hover {
    text-decoration: underline;
}


div#t4a-logo {
    float: right;
    border: 0;
    text-align: right;
    font-size: 10px;
    padding: 0;
    margin-bottom: 14px;
}

div#t4a-navbar {
    float: left;
    width: 100%;
    height: 36px;
    background: #fff url(/media/images/t4a-navbar-bg.png) repeat-x top left; 
    border: 0;
    margin: 0;
    padding: 0;
}

div#t4a-map-navbar {
    float: left;
    width: 80%;
    height: 36px;
    background: #fff url(/media/images/t4a-navbar-bg.png) repeat-x top left; 
    border: 0;
    margin: 0;
    padding: 0;
}

span.t4a-navbar-item {
    width: 10%;
    color: black;
    float: left;
    font-size: 10px;
    text-align: center;
    padding: 12px 0;
}

span.t4a-navbar-item a {
    color: black;
    text-decoration: none;
}

span.t4a-navbar-item a:hover {
    text-decoration: underline;
}

div#t4a-page-header {
/* margin-top: 14px; */
    background: #eaeaea;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

div#t4a-page-header label {
    font-weight: bold;
}
div#t4a-page-header a, div#permalink-container a {
    color: black;
    text-decoration: none;
}
div#t4a-page-header a:hover, div#permalink-container a:hover {
    text-decoration: underline;
}

div#t4a-content {
    float: left;
    width: 1023px;
    height: auto;
    margin: 19px 0 19px 0;
    border: 1px solid #d8d8d8;
    background-color: #fff;
    /* padding: 26px 52px; */
}

div#t4a-site-links {
    width: 76%;
    margin-left: 14%;
    float: left;
}

div#t4a-footer {
    float: left;
    width: 100%;
    font-size: 11px;
    text-align: center;
    height:115px;
    padding-top: 60px;
    margin: bottom: 20px;
}
div#t4a-footer a {
    color: black;
    text-decoration: none;
}
div#t4a-footer a:hover {
    text-decoration: underline;
}


/*-------------------- Inheriting jquery for non widget elements ------*/

.ui-widget-header h1, 
.ui-widget-header h2, 
.ui-widget-header h3, 
.ui-widget-header h4 { 
    color: inherit; 
    font-family: inherit;
    padding-left: 10px;
}


/*-------------------- Additional styling ------------------------------*/

/* suppress jquery theme gradients on body and footer */
.ui-widget-content.ui-corner-all.no-background, 
.ui-state-default.no-background
{
    background-image: none;
}

.ui-state-default.no-border
{
    border:10px;
}

/* background for input elements */
#t4a-page input[type="text"], 
#t4a-page input[type="password"], 
#t4a-page input[type="radio"], 
#t4a-page input[type="checkbox"], 
#t4a-page textarea, 
#t4a-page select { 
    background-color: #f7f7f7;
}

/* inline search form style */
.search-form-include {
    text-align: right;
    padding: 3px;
    margin-bottom: 7px;
}

/*---------------------- Map Related ------------------------------*/
#map-toolbar
{
  height: 34px;
  background: #eaeaea url(/media/images/t4a-navbar-bg.png) repeat-x top left; 
  width: 20%;
  border: 0;
  margin: 0;
  padding: 0;
  padding-top: 10px;
}

/* Todo make this class based rather */
#papermap-layer-legend-title, 
#live-tracks-legend-title, 
#base-layer-legend-title, 
#padkos-title, 
#query-results-title, 
#permalink-title
{
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  margin-right: 0.5em;
  margin-bottom: 0em;
  cursor: pointer;
}
#base-layer-legend
{
  margin-bottom: 0em;
}
#permalink-container a:link, 
#permalink-container a:visited, 
#permalink-container a:active, 
#permalink-container a:hover, 
{
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}

#query-results-list
{
  text-align: center;
}
#base-layer-legend, 
#papermap-layer-legend, 
#listings
{ 
  margin-top: 0em;
  list-style-type: none; 
  padding: 5px; 
  width: 100%;
  font-size: 1em;
}
#base-layer-legend li, 
#listings li
{ 
  padding: 5px; 
  margin-right: 2em;
  margin-bottom: 0.5em;
}
.header 
{ 
  font-weight: bold;
  text-align: center;
  padding: 2px 0 4px;
  position: relative;
  overflow: hidden;
}
.subhead, .footer
{
  padding: 3px 10px;
  font-size: 0.85em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* gavin changed to match mapnik ocean to fill outside when there's a gap */
/* #0079c2 is the blue in the T4A logo that Gavin at one stage tried as an ocean colour*/
#t4a-map
{
  background-color: #9AAEE0;
  padding: 10px;
  padding-left: 1em;
  width: 100%;
  height: 100%;
}
/*this must styled like GE hover label*/
.popup-label
{
  background-color: #ebebebff;
  text-decoration: none;
  padding: 0;
  font-weight: bold;
  font-family: Verdana,Arial,sans-serif;
  font-size: 2em;
}

/* Automatically scroll legend area in live map */
.ui-layout-pane-east 
{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}