/* CSS production v3.00 */
    body {
        height: 100%;
    }
    img {
        border: none;
    }
    .RText {
      text-align: right;
      float: right;
    }
    .CText {
      text-align: center;
    }
    .RSText {
      text-align: right;
      float: right;
      padding: 0px 12px 0px 3px;
    }
    #TheRat {
        left: 0px;
        margin-top: -10px;
        z-index: 1000;
    }
    #TabWarning {
        position: absolute;
        left: 300px;
        top: 200px;
        width: 300px;
        padding: 15px;
        border: solid black 3px;
        background: #902020;
        text-align: justify;
        font: bold 13pt Verdana,Helvetica,Arial,sans-serif;
        color: white;
        display: none;
        z-index: 1000;
    }    
    #Scriptless {
      position: absolute;
      margin: 20px 20px 0px 220px;
      width: 600px;
      font:  normal 12pt Lucida, Helvetica, Arial, sans-serif;
      text-align: justify;
    }
    /* 
    *   Left side-panel styles 
    */
    #LHPanel {
      position: absolute;
      top: 0px;
      left: 0px;
      width:  160px;
      min-height: 696px;
      margin: 3px;
      padding: 2px;
      border: 2px solid #0066bb;      
      font:  normal 10pt Lucida, Helvetica, Arial, sans-serif;
      background-color: #a0a0b0;
      z-index: 0;
    }
    .LHPanelText {
       text-align: justify;
       padding: 8px 4px 8px 4px;
       color: #303030;
    }
    .PanelRollup { 
      color: #2020A0; 
      background-color: #c1d2e1;
      border: 2px solid #606060;
      padding: 0px;
      font: inherit;
      text-align: justify;
      margin: 3px 0px;
    }
    #mruRollup {
      padding: 4px;
    }
    #mruPlaceList {
      font:  normal 8pt Lucida, Helvetica, Arial, sans-serif;
      text-align: left;
      width: 146px; 
    }
    .RollTop {
      width: 156px;
      height: 30px;
      padding: 0px;
      margin: 0px;
      background-repeat: repeat-x;
      cursor: pointer;
    }
    .Roller {
        display: none;
        padding: 4px;
    }
    .RolldownArrow {
        float: right;
        margin: 2px 4px 4px 0px;
        /*width:  21px;*/
        /*height: 26px;*/
        padding: 0px;
        border-width: 0px;
    }
    div.SpyMenuItem {
        margin: 2px;
        padding: 1px 0px 1px 5px;
        background-color: #0066BB;
        width: 94%;
        font:  bold 11pt Verdana, Lucida, Helvetica, Arial, sans-serif;
        color: #C1D2E1;
    }
    div.SpyMenuItem:hover {
        background-color: #0066BB; 
        color: yellow;
        cursor: pointer;
    }    
    .MarkerKeyHelp { 
      color: Black; 
      font:  normal 9pt Lucida, Helvetica, Arial, sans-serif;
    }
    .PanelDisplayBox {
      color: #2040A0; 
      font:  bold 10pt Lucida, Helvetica, Arial, sans-serif;
      border: 1px solid #2020A0;
      text-align: center;
      height: 35px;
      margin: 3px 0px;
    }
    div.PositionHR {         /* This is to do an <hr> because IE screws it up yet again */
      
      width: 66%;
      padding: 0;
      margin: -4px auto 6px auto;
      border-top: solid blue 1px;
      
    }
    div#RelBack {
      clear: both;
      height: 700px;
      padding: 0 0 20px 0;
      z-index: -100;
    }
    div#debug {
      margin: -20px 0 0 0;
      padding: 5px;
      background-color: #ffff80;
      border: solid black 1px;
    }
    
    .Footer {
       left: 0px;
       height: 14px;
       width: 840px; 
       margin: 0px 0px 8px 3px; 
       background-color: #000564;
       border: #010665 solid 3px; 
       font: normal 10pt Verdana,Arial,Helvetica,Sans-serif;
       color: #82C6FF; 
       padding: 4px; 
    } 
    .FooterLink {
       margin: 0px 0px 0px 0px;
       float: right;
    } 
    .FooterLink A:link    {color: #82C6FF}
    .FooterLink A:visited {color: #82C6FF}
    .FooterLink A:active  {color: #00ffff}
    .FooterLink A:hover   {color: #ffffff} 
    
    .FooterText {
      color: #82C6FF;
      float: right; 
      text-align: left;
      padding-right: 20%;
      max-width: 40%;
    } 
    #GraphOuter {
      position: relative;
      padding: 2px;
      margin: 0 0 0 12px;
      width: 360px;
    }
    #CurveOuter {
      position: absolute;
      width: 560px;
      height: 200px;
      margin: 0px;
      clip: rect(0px 360px 200px 0px);
      background: #f0f0ff;
    }
    #CurveSection {
      float: left;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
    }
    .YScaleNum {
      position : absolute;
      left : -25px;
      width: 24px;
      overflow: hidden;
      font : bold 9pt Lucida, Helvetica, Arial, sans-serif;
      color: black;
      text-align: center;
    }
    
    div.HGrid {
      position: absolute;
      left: -1px;
      width: 364px;
      height: 2px;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      border-top: solid 1px gray;
      font : normal 1px sans-serif;     /* Stop IE making room for text even though there is none. */
    }
    div.VGrid {
      position: absolute;
      top: 2px;
      width: 2px;
      height: 204px;
      padding: 0px;
      margin: 0px;
      border-left: solid 1px gray;
    }
    div.TimeScale {
      position: absolute;
      z-index: 1;
      top: 102px;
      left: 2px;
      width: 361px;
      /*height: 21px;*/ height: 121px;
      background: transparent; /*#d4c6ff;*/
      overflow: hidden;
    }
    div.TimeBack {
      position: absolute;
      z-index: 0;
      top: 202px;
      left: 2px;
      width: 361px;
      height: 21px;
      background: #d4c6ff;
    }
    div.Times {
      position: absolute;
      top: 209px;
      width: 40px;
      font : normal 8pt Lucida, Helvetica, Arial, sans-serif;
      color: black;
      text-align: center;
      z-index: 10;
    }
    div#TimeArrow {
      position: absolute;
      top: 198px;
      width: 22px;
      height: 22px;
      padding: 0px;
      margin: 0px;
      border: 0px;
      z-index: 3;
    }
    #MapOuter {
      position: absolute;
      padding: 0px;
      margin-top: -16px;
    }
    #TheMap {
      position: absolute;
      top: 0px;
      left: 171px;
      margin: 3px 0px 0px 3px;
      width: 680px;
      height: 700px;
      border: 2px solid #0066bb;
    }
    #GoogleAds {
      position: absolute;
      top: 0px;
      left: 858px;
      margin: 3px 0px 0px 3px;
      padding: 0px 0px 0px 2px;
      width: 122px;
      height: 702px;
      background: #0066bb;
      border: none;
    }
    #GoogleSigh {         /* Stupid bullshit to deal with IE bugs */
      position: relative; 
      margin: 0px;
      padding: 0px;
      float: left;
    }
    #Grayout {
      display: none;
      position: absolute;
      z-index: 10;
      top: 3px;
      left: 3px;
      width: 855px;
      min-width: 855px;
      height: 705px;
      background: transparent url("https://www.tidespy.com/images/Grayout.png") repeat;
     }
     #DisWin {
       position: relative;
       margin-left: 15%;
       margin-top: 5%;
       width: 70%;
       background: transparent;
     }
     #DisWinHead {
       position: absolute;
       top: 12px;
       left: 50px;
       font : bold 12pt Lucida, Helvetica, Arial, sans-serif;
     }
     #DisWinClose {
       position: absolute;
       bottom: 12px;
       right: 50px;
       cursor: pointer;
     }
     #DisWinIframe {
       position: absolute;
       margin: 51px 40px 50px 40px;
       background: #e8e8ff;
       width: 515px;
       height: 395px;
       padding: 0px;
       border: none;
     }
    
    /*
    *  The styles for the GMap info box (the big speech bubble with arrow thing)...
    */
    div.CamInfoBox {       /* The entire contents of one tab in the Info Window */
      color: #183078; 
      font:  normal 11pt Lucida, Helvetica, Arial, sans-serif;
      border: solid white 1px;
      margin: 0 0 20px 20px;
    }
    .InfoBubble {          /* The info bubble's background style */
      background-color: white;
      padding: 12px 0px 0px 0px;
      overflow: hidden;
      width: 408px;
    }
    .InfoBubbleTab {          /* The style for tabs (mostly relates to the title in the tab) */
      font: bold 8pt Lucida, Helvetica, Arial, sans-serif;
      text-align: center;
      width: 100px;
    }
    div.InfoBox {       /* The entire contents of one tab in the Info Window */
      color: #183078; 
      font:  normal 11pt Lucida, Helvetica, Arial, sans-serif;
      width: 406px;
      height: 335px;
      overflow-x: hidden;
      overflow-y: hidden;
      overflow: hidden;
      padding: 0;
    }
    div.HeadBox {
      position: relative;
      margin: 0px 10px 0 0;
      padding: 0 0 0 0;
      color: #183078; 
    }    
    div.InfoPlaceInfo {      /* The right-hand time and lat/long box inside HeadBox */
      float: right;
      width: 160px;          /* Stop it bumping into the name over to the left */
      font:  bold 10pt Lucida, Helvetica, Arial, sans-serif;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      text-align: right;
    }
    div.InfoPlaceName {          /* The left-hand side with the place name, inside HeadBox */
      font:  bold 10pt Lucida, Helvetica, Arial, sans-serif;
      float: left;
      margin: 0px 0 0 12px;
      padding: 0 0 0 14px;
      width: 187px;
    }
    div.InfoPlaceNameLine {          /* One line within the place name */
      height: 1.2em;
      overflow: visible;
      white-space: nowrap;
    }
    div.InfoBody {             /* The variable area - the tide graph. */
      position: relative;
      height: 226px;
      width: 403px;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 15px;
      clear: both;
      z-index: 10;
    }
    div.InfoTabularBody {           /* The variable area - the tide table. */
      position: relative;
      height: 226px;
      width: 404px;
      margin: 0px 0px 0px -15px;
      padding: 0px 0px 0px 15px;
      clear: both;
    }
    div.InfoTabBody {           /* The outer of the insides of the Information tab */
      position: relative;
      height: 224px;
      width: 403px;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 10px;
      clear: both;
      color: white;
      z-index: 10;
    }
    img.InfoTabBody {
       position: absolute;
       margin: 0px 0px 0px 0px;
       top: 0; 
       left: 0;
       max-height: 226px;
       max-width: 418px;
       z-index: -4;
    }
    a.DarkLink:link {
       color: #8080ff;
       text-decoration: none;
    }
    a.DarkLink:visited {
       text-decoration: none;
       color: #8080ff;
    }
    a.DarkLink:hover {
       text-decoration: underline;
       color: yellow;
    }
    a.DarkLink:active {
       color: #8080ff;
    }
    a.InfoTab:link {
       color: #000080;
    }
    a.InfoTab:visited {
       color: #000080;
    }
    a.InfoTab:hover {
       color: #3030ff;
    }
    a.InfoTab:active {
       color: #000080;
    }
    img.InfoTabBack {
       position: absolute;
       margin: 0px 0px 0px 0px;
       top: 0; 
       left: 0;
       max-height: 226px;
       max-width: 410px;
       z-index: -2;
    }
    td.SunMoon {
      width: 32%;
      text-align: center;
      padding: 6px 15px 0px 15px;
    }
    td.Astrono {
      text-align: center;
      padding: 0px 3px 0px 3px;
      color: white;
      height: 4.2em;
      min-height: 4.2em;
      max-height: 4.2em;
    }
    td.RSTime {
      text-align: right;
      padding: 0px 8px 0px 0px;
      width: 50%;
    }
    table.RSTable {
      text-align: center;
      padding: 0px;
      margin: 0px;
      width: 100%;
    }
    div.InfoNav {            /* Navigation area under the bar at the bottom of the info window */
      height: 30px;
      background: white url("https://www.tidespy.com/images/InfoNavBg.png") repeat-x;
      margin: 0px -15px 0px -5px;
      padding: 2px 15px 0px 15px;
    }
    div.TidesList { 
      position: relative;
      width: 408px;
      background-color: #e8e8ff;
      border: 1px solid #102050;
      padding: 2px 0px 0 0px;
      margin: 0 13px 0 -2px;
      clear: both;
    }
    pre#TidesList {
      color: #2040A0; 
      font: normal 11pt Courier, monospace;
      line-height: 13pt;
      text-align: center;
    }
    pre#DebugList {
      color: #2040A0; 
      font: normal 8pt Courier, monospace;
      text-align: left;
    }
    div.Disclaimer { 
      float: left;
      color: #2040A0; 
      font:  italic bold 10px Lucida, Helvetica, Arial, sans-serif;
      padding: 10px 0px 0px 0px;
      margin: -10px 0 0 0;
    }
    div.FeetOrMetres {
      float:right;
      margin: 2px 15px 0 25px; 
    }
    div.Time12or24 {
      float:right;
      margin: 2px 0 0 25px;
    }
    div.InfoNavDays {
      clear: both;
      position: relative;
      padding-top: 5px;
      margin: 0;
      border: 0px;
      font : normal 8pt Lucida, Helvetica, Arial, sans-serif;
      text-align: center;
      color: #202020;
    }
    div.dlsStarBlurb {
      position: relative;
      margin: 0;
      border: none;
      font : normal 10.5pt Lucida, Helvetica, Arial, sans-serif;
      text-align: center;
    }
    div#MkrHover {
      position: absolute;
      top: 0;
      left: -1000px; /* Fixes firefox reappearance bug */
      min-width: 100px;
      background: transparent url("https://www.tidespy.com/images/TooltipBg.png") repeat; /*#FFFF80;*/
      font : normal 12px Lucida, Helvetica, Arial, sans-serif;
      color: black;
      padding: 5px 12px 5px 8px;
      border: solid 1px gray;
      z-index: 500;
    }
    div#MkrPop {
      position: absolute;
      top: 0;
      left: -1000px; /* Fixes firefox reappearance bug */
      width: 120px;
      background: white;
      font : normal 13px Lucida, Helvetica, Arial, sans-serif;
      color: blue;
      padding: 5px;
      border: solid 1px #5080a0;
      z-index: 500;
    }
    div.MkrPopHead {
      position: relative;
      width: 125px;
      height: 1.3em;
      background: #4B7D1F;
      padding: 3px;
      margin: -5px 0px 0px -5px;
      overflow: hidden; 
      font: bold 10px Verdana,Helvetica,Arial,sans-serif;
      color: white;
      text-align: center;
      white-space: nowrap;
    }
    div.MkrPopItem {
      position: relative;
      width: 100px;
      background: transparent;
      padding: 3px 8px 3px 8px;
      margin: 1px 2px 1px 2px;
      cursor: pointer;
    }
    div.MkrPopItem:hover {
      color: white;
      background-color: #0066BB;
    }
    div.MkrPopItemSep {
      position: relative;
      width: 116px;
      height: 0px;
      background: transparent;
      margin: 2px 2px 2px 2px;
      cursor: pointer;
      border-top: solid 1px darkblue;
    }