/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/*
    Created on : 07-Dec-2017, 17:57:08
    Author     : Simon
*/

/*  */

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/

img, object, embed, video {
  max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */

.ie6 img {
  width: 100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10px;
	dw-gutter-percentage:	25;

	Inspiration from "Responsive Web Design" by Ethan Marcotte
	http://www.alistapart.com/articles/responsive-web-design

	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 479 and below. */

/*remove rounded corners on ipads*/

textarea, input[type="text"], input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

#courseDetails {
  clear: both;
  float: left;
  padding-right: 10px;
  margin-left: 50px;
}

.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1.82%;
  padding-right: 1.82%;
  background-color: #FFDEA3;
}

#passage {
  padding: 10px;
  overflow: auto;
  width: 98%;
  margin: auto;
  margin-top: 10px;
}

#passageContainer {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#LayoutDiv1 {
  clear: both;
  float: right;
  margin: auto;
  width: 100%;
  display: block;
}

#ctsCanvasDiv {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#tides {
  width: 100%;
  display: block;
}

table#tidalStreams {
  margin-top: 10px;
}

#courseDetails {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
  display: block;
  margin-bottom: 10px;
}

#ctsCanvasDivTides {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#passagePlotDiv {
  clear: both;
  padding: 10px;
}

table {
  margin: 0 auto;
}

h1 {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  line-height: 26.4px;
  text-align: center;
  clear: both;
  height: 90%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 15px;
}

h2 {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 25px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

h3 {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
}

Canvas {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid blue;
}

#navWaning {
  color: red;
  background-color: white;
  font-size: larger;
  text-align: center;
  clear: both;
  float: left;
  margin-left: 0px;
  width: 100%;
  display: block;
  margin: auto;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  border: 1px solid red;
  margin-top: 1px;
}

#getData {
  /*	float:left;*/
  padding-left: 5px;
}

#results {
  margin-top: 15px;
}

input[type=text]:enabled {
  background-color: #ffffcc;
  border: none;
  outline: none;
  padding-left: 5px;
}

input[type=text]:disabled {
  background-color: #cccccc;
  border: none;
  outline: none;
  padding-left: 5px;
  /*font-weight: bold;*/
}

.tideHdr {
  max-width: 10px;
  background-color: #ffffcc;
}

#courseDetails.input {
  size: 10px;
}

#footer {
  clear: both;
  width: 100%;
  text-align: right;
}

table {
  border-collapse: collapse;
}

table th, td {
  background-color: antiquewhite;
  border: 1px solid black;
}

table th {
  text-align: center;
}

table.referenceData {
  /*table-layout: fixed;*/
  margin-top: 10px;
}

table.referenceData .description {
  width: 155px;
}

table.referenceData .inputData {
  /*width: 25px;*/
}

table .description {
  padding-left: 5px;
  padding-right: 5px;
}

.infoPoint {}

.ctsTip {
	text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: dotted;
}

#getData h2 {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: dotted;
}

table.tidalResults {
  table-layout: fixed;
  margin-top: 10px;
}

table.tidalResults td {
  width: 155px;
}

.hideTideTot {}

.travelDist {}

.rhumbPort {}

.rhumbStbd {}

.rhumbCumm {}

.time {}

.totDistance {}

.totalNorth {}

.totalWest {}

.offsetBearing {}

.offsetDistance {}

.courseToSteer {}

.magVar {}

.comDev {}

.finalCTS {}

.calcArrive {}

.tideHWRef {}

.tideTime {}

.tideFrom {}

.tideTo {}

.tideDostance {}

.tideRate {}

.tideDirection {}

.tideN {}

.tideW {}

.tides {}

.hw1M6 {}

.hw1M5 {}

.hw1M4 {}

.hw1M3 {}

.hw1M2 {}

.hw1M1 {}

.hw1P0 {}

.hw1P1 {}

.hw1P2 {}

.hw1P3 {}

.hw1P4 {}

.hw1P5 {}

.hw1P6 {}

.hw2M6 {}

.hw2M5 {}

.hw2M4 {}

.hw2M3 {}

.hw2M2 {}

.hw2M1 {}

.hw2P0 {}

.hw2P1 {}

.hw2P2 {}

.hw2P3 {}

.hw2P4 {}

.hw2P5 {}

.hw2P6 {}

.hwRef {}

.time {}

.resetHW1 {}

.from {}

.resetHW2 {}

.to {}

.distance {}

.xrate {}

.xdirection {}

.north {}

.west {}

#about p {
  font-size: larger;
}


@media only screen and (min-width: 479px) {
  .gridContainer {
    width: 88.2%;
    max-width: 479px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #passage {
    padding: 10px;
    overflow: auto;
    width: 98%;
    margin: auto;
    margin-top: 10px;
  }
  #passageContainer {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #LayoutDiv1 {
    clear: both;
    float: right;
    margin: auto;
    width: 100%;
    display: block;
  }
  #ctsCanvasDiv {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #tides {
    width: 100%;
    display: block;
  }
  #courseDetails {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
  }
  #ctsCanvasDivTides {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #passagePlotDiv {
    clear: both;
    padding: 10px;
  }
}

@media only screen and (min-width: 767px) {
  .gridContainer {
    width: 88.2%;
    max-width: 767px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #passage {
    padding: 10px;
    overflow: auto;
    width: 98%;
    margin: auto;
    margin-top: 10px;
  }
  #passageContainer {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #LayoutDiv1 {
    clear: both;
    float: right;
    margin: auto;
    width: 100%;
    display: block;
  }
  #ctsCanvasDiv {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #tides {
    width: 100%;
    display: block;
  }
  #courseDetails {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
  }
  #ctsCanvasDivTides {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #passagePlotDiv {
    clear: both;
    padding: 10px;
  }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1023px) {
  .gridContainer {
    width: 88.2%;
    max-width: 1023px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #passage {
    padding: 10px;
    overflow: auto;
    width: 98%;
    margin: auto;
    margin-top: 10px;
  }
  #passageContainer {
    width: auto;
    float: left;
    margin-left: 0px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    padding-right: 10px;
  }
  #LayoutDiv1 {
    clear: both;
    float: right;
    margin: auto;
    width: 100%;
    display: block;
  }
  #ctsCanvasDiv {
    width: auto;
    float: right;
    padding: 5px;
    margin-right: 0px
  }
  #tides {
    width: 100%;
    display: block;
  }
  #courseDetails {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
  }
  #ctsCanvasDivTides {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #passagePlotDiv {
    clear: both;
    padding: 10px;
  }
}

@media only screen and (min-width: 1279px) {
  .gridContainer {
    width: 88.2%;
    max-width: 1279px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #passage {
    padding: 10px;
    overflow: auto;
    width: 98%;
    margin: auto;
    margin-top: 10px;
  }
  #passageContainer {
    float: left;
    margin-left: 50px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    padding-right: 10px;
  }
  #LayoutDiv1 {
    clear: both;
    float: right;
    margin: auto;
    width: 100%;
    display: block;
  }
  #ctsCanvasDiv {
    float: right;
    padding: 5px;
    margin-right: 50px
  }
  #tides {
    margin: auto;
    overflow: auto;
    width: 100%;
    margin-bottom: 50px;
  }
  #courseDetails {
    clear: both;
    width: auto;
    float: left;
    padding-right: 10px;
    margin-left: 10px;
  }
  #ctsCanvasDivTides {
    width: auto;
    margin-left: 5px;
    float: right;
    margin-top: 0px;
    margin-right: 10px;
  }
  #passagePlotDiv {
    clear: both;
    padding: 10px;
  }
}

@media only screen and (min-width: 1679px) {
  .gridContainer {
    width: 88.2%;
    max-width: 1679px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #passage {
    padding: 10px;
    overflow: auto;
    width: 98%;
    margin: auto;
    margin-top: 10px;
  }
  #passageContainer {
    float: left;
    margin-left: 200px;
    margin-bottom: 50px;
    padding-bottom: 30px;
    padding-right: 10px;
  }
  #LayoutDiv1 {
    clear: both;
    float: right;
    margin: auto;
    width: 100%;
    display: block;
  }
  #courseDetails {
    clear: both;
    float: left;
    padding-right: 10px;
    margin-left: 100px;
  }
  #ctsCanvasDiv {
    float: right;
    padding: 5px;
    margin-right: 100px;
  }
  #tides {
    margin: auto;
    overflow: auto;
    width: 100%;
    margin-bottom: 50px;
  }
  #ctsCanvasDivTides {
    margin-left: 5px;
    float: right;
    margin-top: 0px;
    margin-right: 100px;
  }
  #passagePlotDiv {
    clear: both;
    padding: 10px;
  }
  table {
    font-size: larger;
  }
  table .tidalResults td {
    width: auto;
  }
  table .description {
    white-space: nowrap;
  }
}