/*
*  This is the default CSS file for the TideSpy Tide Chart frame.  
*
*   This file is mostly for overriding colours, fonts, and so forth, and generally is not for
*   positioning or layout changes.  Anything in this file that already has a height or width
*   specified may be modified.  Putting sizes and positioning properties on any of the others
*   will either be ignored or just mess up the layout.
*
*   The properties you see here are the defaults.  Do not remove or add any, just modify the
*   existing ones.
*
*   To supply your own CSS for the tide chart, save this file, modify it to your own requirements,
*   and upload it to your web site.  Then go to the TideSpy setup page at 
*       http://tidespy.com/client/FrameSetup.php
*   and enter the full URL of the edited CSS file on your site.
*/

.t_body {   /* Defaults for the whole chart */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 0px;
    margin: 0px;
}

/* The box around the whole chart */
.t_Outer {
    border: #FFE2B5 solid 3px; 
    background-color: #FFF0D9;
}

/* The Large place name title bar across the top.   */
.t_BigTitle {  
    height: 40px;
    font-size: 20pt;
    text-align: left;
    color: #000564;
    
    /* Important: If you change the following background image, you might also want to change ".t_PlaceMenuArrow" (further down). */
    background: transparent repeat-x url('http://tidespy.com/images/CurvedHeadBg.png');
}
.t_LatLong {
    float: right;
    font-style: italic;
    font-size: 8pt;
    font-weight: normal; 
    color: #0000ff;
}
.t_CurrentTime {   /* Current time underneath the BigTitle */
    border-bottom: #FFE2B5 solid 3px;
    font-size: 13pt;
    font-weight: normal; 
    text-align: center;
    color: black;
}

/* The title over the graph that says: "Tides - Sun - Moon - Solunar" */
.t_TidesSunMoonSolunar  {
    color: #000564;
}

/* The date range as in: (from Sun 7 Feb to Thu 11 Feb incl.)   */
.t_DateParen {
    font-size: 9px;
    font-style: italic;
}

/* The tide height scale on the left-side Y axis of the graph */
.t_HeightScale {
    background-color: #2B4B8D;
    color: white;
    text-align: right;
    font-weight: bold;
    font-size: 11px;
}

/* The time scale along the X axis under the graph that says: "Midnt 3 6 9 Noon 3 6 9"  */
.t_TimeScale {
    color: white;
    font-weight: bold;
    font-size: 11px;
}

/* The date scale along the X axis under the graph that says: "Thursday 9th" etc  */
.t_DateScale {
    background-color: transparent;
    border-bottom: solid 1px black;
    color: white;
    font-weight: normal;
    font-size: 9px;
}

/* The "hand" showing the current time. */
.t_NowPointer {
    margin-top: 140px;   /* The vertical positioning is all that's possible for this. */
}

/* Labels at the left of the time rows for Tide and Moon .  */
.t_RowLabels1 {
    background-color: #345AA8;
    color: white;
    font-weight: normal;
    font-size: 9px;
}

/* Labels at the left of the time rows for Sun and Solunar.  */
.t_RowLabels2 {  
    background-color: #2B4B8D;
    color: white;
    font-weight: normal;
    font-size: 9px;
}

/* The time rows for Tide and Moon .  */
.t_RowTimes1 {  
    background-color: #345AA8;
    color: white;
    font-weight: normal;
    font-size: 9px;
}

/* The time rows for Sun and Solunar.  */
.t_RowTimes2 {  
    background-color: #2B4B8D;
    color: white;
    font-weight: normal;
    font-size: 9px;
}

/* Various texts within the Info box when you hover the mouse over the graph */
.t_InfoBoxDate {
    font-weight: normal;
    font-size: 11px;
}

/* The time inside the info box */
.t_InfoBoxTime {
    font-weight: normal;
    font-size: 13px;
}

/* The tide height inside the info box */
.t_InfoBoxTideHeight {
    font-weight: bold;
    font-size: 20px;
}

/* The text inside the info box that says "Day", "Night", or "Civil twilight" */
.t_InfoBoxDayPart {
    font-weight: normal;
    font-size: 10px;
}

/* The settings band underneath the graph area. */
.t_Settings {    
    padding: 0px;
    margin: 0px 50px 20px 0px;
    background-color: #FFE2B5;
    font-weight: normal;
    font-size: 10px;
    text-align: right;
}

/*           ========= Multiple place selection stuff ======== 
*
*  This is the button at the left of the large place-name bar across the top.
*  The button is used to pop up a menu of the places you have chosen for your tide frame.
*   If only one place was chosen, then the button will not appear and the CSS doesn't matter.
*
*   If you change the background colour or size of the title bar, you may also want to
*   create two new background images for the button to match your own title colours.
*   Then replace the two urls below to be your own images, like: url('http://mysite.com/mybutton.png')
*   Your images should be sized to 20x40 pixels for the standard title, but this size must be
*   adjusted to any different height you've specified for the title bar (.t_BigTitle).  
*   For an example of a suitable button image, browse to these urls: 
*      http://tidespy.com/images/CurvedHeadNoHover.png
*      http://tidespy.com/images/CurvedHeadHover.png
*/
.t_PlaceMenuArrow  {
  width: 20px;        /* Must match your button image width */ 
  height: 100%;
  background: transparent url('http://tidespy.com/images/CurvedHeadNoHover.png');
}
.t_PlaceMenuArrow:hover {
  background: transparent url('http://tidespy.com/images/CurvedHeadHover.png');
}


/*
*   These entries are used for the pop-up menu of place names that is displayed by clicking the
*   down-arrow button at the left-hand end of the place-name title bar.
*   If you have selected only one place in the tide frame setup, then the button will not appear,
*   and the menu will never be seen.
*/
.t_PlacePopupMenu {     /* The pop-up menu as a whole */
 background: #5050b0;
 font : normal 13px Lucida, Helvetica, Arial, sans-serif;
 color: white;
 border: solid 2px white;
}

/* This is for a menu entry when the mouse is NOT over it.   Also see t_PlaceMenuItem:hover. */
.t_PlaceMenuItem {  
 width: 200px;     /* Long place names will get chopped, depending on this parameter. */
 padding: 1px 4px 1px 4px;
}

/* This is for a menu entry when the mouse IS over it.  The item must become highlighted in some way. */
.t_PlaceMenuItem:hover {
  color: yellow;
  background-color: #101070;
} 

/* The title line across the top of the menu. */
.t_PlaceMenuHeader {
  height: 1.3em;
  background: black;   /* Same green as the map is: #4B7D1F; */
  font: bold 10px Verdana,Helvetica,Arial,sans-serif;
  color: white;
  text-align: center;
}

/* A separator line on the menu. */
.t_PlaceMenuItemSep {
  background: transparent;
  border-top: solid 1px darkblue;  /* This is the separator line itself */
}