/* color palette:
 - green: #32A620
 - darkgreen: #397F19
 - tan: #F7F1CD
 - rust: #7D1921
 - navy: #2E3959
*/

@font-face {
  font-family: Quicksand;
  src: url(./fonts/Quicksand-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: Quicksand;
  src: url(./fonts/Quicksand-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: Quicksand;
  src: url(./fonts/Quicksand-Medium.ttf);
  font-weight: 400;
}

@font-face {
  font-family: Quicksand;
  src: url(./fonts/Quicksand-Bold.ttf);
  font-weight: 700;
}

body {
	margin:0px;
	padding:0px;
	background-color:#397F19;
	font-family: 'Helvetica', sans-serif;
	font-size:12pt;
  -moz-text-size-adjust: none;
}
div, p {
	margin:0px;
}

/******** Overall Layout Styles **********/

div.header {
	background-image: url('logo.png');
	background-repeat: no-repeat;
	background-position: 64px 8px;
	background-color: #32A620;
	height:80px;
}

div.header div.title {
	font-family: 'Quicksand', sans-serif;
	font-size: 24pt;
	text-transform: uppercase;
	text-align:right;
	color:white;
	padding-top:35px;
	padding-right:16px;
}

div.header div.titlenote {
	font-size: 10pt;
	color:white;
	padding-left:8px;
}

div.footer {
/* 	right: 0px; */
	float: right;
	background-image: url(grass.jpg);
	background-position: top right -220px;
	background-repeat: no-repeat;
	background-color: #32A620;
	color:white;
	text-align: right;
	padding: 16px 160px 16px 50px;
	font-size:9pt;
	width: 100%;
}

div.content {
	background-color: #FCFAEB;
	color:black;
}

div.body {
	margin:0px;
	margin-bottom: -20px;
	padding:0px;
	background-image: url(grass.jpg);
}

div.panel {
	margin-left: 240px;
	padding:12px;
	background-color: white;
}

div.panel div.title {
	font-weight: 700;
	font-size: 20pt;
	margin-bottom: 8px;
}

div.controlblock {
	border:3px solid #2E3959;
	border-radius: 12px;
	margin: 8px 0px;
}
div.controlblock p, div.controlblock div {
	padding: 2px 24px;
}

.oneline {
	white-space: nowrap;
	user-select: none;
    -webkit-user-select: none;
}

span.stationName:after {
	content: ",";
}
span.stationName:last-child:after {
	content: "";
}
.program {
    width: 75%;
    max-width: 600px;
}
.program p:first-child {
	background-color: #2E3959;
	color: white;
}

.program.disabled {
	border-color: #7D1921;
}
.program.disabled p:first-child {
	background-color: #7D1921;
	color: white;
}
/******** General Global Styles **********/

#errorHint {
	color: #7D1921;
}
.inputError {
	color: #7D1921;
}
.showInterval {
	text-align:center;
}

.program p:first-child .val {
	color: white;
}
.val {
	font-weight: 700;
	color: #397F19;
}

/******** Clock Styles **********/

div#status {
	float:left;
	width: 240px;
	text-align:center;
	color:white;
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
/* 	font-weight: light; */
	padding-top: 23px;
	padding-bottom: 12px;
	background-color: #397F19;
	opacity: .85;
}
#deviceTime span {
	display:inline-block;
	position:relative;
}
#deviceTime span.time {
	text-align:right;
	font-size:42pt;
	top: 6px;
	width: 160px;
	letter-spacing: -3px;
}
#deviceTime span.sep {
	font-size:36px;
	top: -.25em;
}
#deviceTime span.second {
	text-align:left;
	font-size:18pt;
	top: -16px;
	width: 36px;
	letter-spacing: -1px;
}
#deviceTime span.ampm {
	position:relative;
	top:6px;
	left: -38px;
	font-size:18pt;
	width: 36px;
	text-transform: uppercase;
	text-align: right;
	
}
#deviceDate {
	margin-top:16px;
	font-weight:400;
}

.countdown, .rainsense {
	color: #7D1921;
	font-family: Quicksand, sans-serif;
	font-size: 12pt;
	font-weight: 700;
/* 	font-weight: bold; */
	text-transform: uppercase;
}


/******** Navigation Button Styles **********/

#nav {
	margin-bottom:16px;
}
#nav button {
	padding:9px 18px;
	margin-right: 8px;
	font-family: Quicksand, sans-serif;
	text-transform: uppercase;
	font-size: 16pt;
	font-weight: 400;
/* 	font-weight: medium; */
	color:white;
	background-color:#2E3959;
	border:0px;
	border-radius: 8px;
	cursor: pointer;
}
#nav button.here {
	background-color: #32A620;
	height: 54px;
}
#nav button.home {
	background-image: url('home.png');
	background-repeat: no-repeat;
	background-position: center center;
	text-indent:-99999em;
    overflow:hidden;
    width: 40px;
}
#nav button.options {
	background-image: url('options.png');
	background-repeat: no-repeat;
	background-position: center center;
	text-indent:-99999em;
    overflow:hidden;
    width: 40px;
}

/******** Button Styles **********/

div.controls {
	margin-top: 5px;
	margin-bottom: 12px;
}

button {
	padding: 4px 12px;
	font-family: Quicksand, sans-serif;
	font-size: 12pt;
	font-weight: 400;
/* 	font-weight: medium; */
	text-transform: uppercase;
	text-align: center;
	line-height: 14pt;
	color: white;
	background-color: #397F19;
	border: 0px;
	border-radius: 12px;
	cursor: pointer;
}
button:hover {
	color: #F7F1CD;
}
button.on {
	background-color: #397F19;
}
button.off {
	background-color: #7D1921;
}
button:disabled, button[disabled] {
	pointer-events: none;
	opacity: 0.3;
}
button.execute {
	background-color: #2E3959;
    margin: 2px;
}

button.help {
	font-weight: 700;
    background-color: #2E3959;
}

button.toggle {
	background-repeat: no-repeat;
	background-position: center center;
	width: 304px;
	padding: 4px;
	text-align: center;
	color: #DDD;
}
button.toggle.on {
	background-color: #397F19;
	background-image: url('on.png');
}
button.toggle.on:hover {
	color: #F7F1CD;
	background-image: url('off.png');
}
button.toggle.off {
	background-color: #7D1921;
	background-image: url('off.png');
}
button.toggle.off.choice {
	background-color: #397F19;
	background-image: url('off.png');
}
button.toggle.off:hover {
	color: #F7F1CD;
	background-image: url('on.png');
}
button.toggle span.togglesep {
	display: inline-block;
	width: 50px;
}
button.toggle span.toggleleft {
	display: inline-block;
	text-align: right;
	width: 120px;
}
button.toggle span.toggleright {
	display: inline-block;
	text-align:left;
	width: 120px;
}
button.toggle.on span.toggleright, button.toggle.off span.toggleleft {
	font-weight: 400;
}
button.toggle.off span.toggleright, button.toggle.on span.toggleleft {
	font-weight: 700;
	color: white;
}

#controls button#cSubmit  {
	background-color: #397F19;
}
#controls button#cSubmit:disabled {
	background-color: #AAA;
}
button.danger {
	background-color: #7D1921;
}

button.toggle.narrow {
	width: 140px;
}
button.toggle.narrow span.toggleright, button.toggle.narrow span.toggleleft {
	width: 36px;
}

#options button, #controls button {
	margin: 4px 0px;
}

button.weekday {
	width:100%;
}
button.pushon.on {
    font-weight: 700;
}

input.timeInput {
	font-size: 12pt;
	width: 3em;
}

input.timeVal {
	font-size: 12pt;
	width: 3em;
}

input[type='number']{
    width: 2.5em;
} 

/******** Station Table Styles **********/

table.optionList {
	border:3px solid #2E3959;
	border-radius: 12px;
	padding: 4px;
	border-spacing: 0px;
	empty-cells: show;
	border-collapse: separate;
}
td.pluginName {
    text-align: right;
    padding: 0px 12px;
    color: #2E3959;
    font-weight: 700;
    width: 12em;
    height: 30px;
    white-space: nowrap;
}
table.stationList {
	table-layout: auto;
	background-color: white;
	border:3px solid #2E3959;
	border-radius: 12px;
	padding: 4px 0px;
	border-spacing: 0px;
	empty-cells: show;
	border-collapse: separate;
	margin: 6px 0px;
}
td.station_name {
	text-align: right; 
	padding: 0px 12px; 
	color: #2E3959;
	font-weight: 700;
	width: 12em;
	height: 30px;
	white-space: nowrap;
}
table.stationList td {
	text-transform: uppercase;
	margin-bottom: 1px;
}
table.stationList td.station_name {
	text-transform: none;
}
table.stationList td.timeInput {
	white-space: nowrap;
}
tr.even {
	background-color: #DDD;
}
td.stationStatus {
	color: white;
	background-color: #7D1921;
	padding: 0px 12px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
td.stationStatus.station_on {
	background-color: #32A620;
}
td.stationStatus.station_off {
	background-color: #7D1921;
}
td.stationStatus.station_waiting {
	background-color: #397F19;
}
td.stationStatus.station_disabled {
	background-color: #AAA;
}

td.stationOn.dayOn {
	background-color: #32A620;
	text-align:center;
	color:white;
	border-radius: 6px;
	background-image: url('checkmark.png');
	background-position: center center;
	background-repeat: no-repeat;
}
td.stationOn {
	background-color: #F7F1CD;
	border-radius: 8px;
}
td.dayOn {
	background-color: #F7F1CD;
	border-radius: 8px;
}
table.logList {
	padding: 4px;
	margin: 1em 0em;
	text-align:center;
	white-space: nowrap;
}
table.logList td {
	padding: 0px 12px;
}
table.logList th {
	padding: 0px 12px;
	border-bottom: 2px solid #2E3959;
}

/******** Interval Selector Styles **********/

.animatedSelector {
	font-size: 26px;
	text-align:center;
	width: 500px;
}
.intervalSelect {
	line-height: 60px;
	border-radius: 12pt;
	padding: 3px;	
	cursor: pointer;
}
.intervalSelect.distance0 {
	background-color: #32A620;
	color: white;
}
.intervalSelect:hover {
	border: 2px solid #32A620;
}	

/******** Collapsible Styles **********/
.collapsible h4 {
	color:white;
	background-color: #2E3959;
	background-repeat: no-repeat;
	background-position: 3px center;
	padding: 4px 4px 4px 24px;
	margin: 3px 0px 0px 0px;
}
.collapsible.collapsed h4 {
	background-image:url(collapsed.png)
}
.collapsible.expanded h4 {
	background-image:url(expanded.png)
}

.collapsible.collapsed div {
	display:none;
}
.collapsible.expanded div {
	border-right: 3px solid #2E3959;
	border-left: 3px solid #2E3959;
}
.collapsible.expanded div:last-child {
    border-bottom: 3px solid #2E3959;
}
.option {
	margin: 0px;
	padding: 2px 6px;
	clear:both;
}



/******** Timeline Styles **********/

td.stationSchedule {
	padding: 0px;
}
.scheduleMarkerContainer {
	overflow-x:hidden;
	margin:0px;
	padding:0px;
	height:30px;
	position:relative;
}
.scheduleMarker {
	position:absolute;
	top: 0px;
	height:30px;
}
.nowMarker {
	position:absolute;
	top: 0px;
	background-color: #af232f;
	height:30px;
}
.nowMarker.on {
	background-color: #4aa320;	
}
.scheduleTick {
	padding: 0px;
	position: relative;
	font-size: 9px;
	text-align:center;
	color: #2E3959;
	border-right:1px solid #2E3959;
}
.scheduleHeader {
	width : 4.17%;
}
.scheduleTick:last-child {
	border-right: none;
}

.program0 {background-color: hsl(50,80%,40%)}
.program1 {background-color: hsl(150,80%,40%)}
.program2 {background-color: hsl(225,80%,40%)}
.program3 {background-color: hsl(75,80%,40%)}
.program4 {background-color: hsl(175,80%,40%)}
.program5 {background-color: hsl(250,80%,40%)}
.program6 {background-color: hsl(100,80%,40%)}
.program7 {background-color: hsl(200,80%,40%)}
.program8 {background-color: hsl(275,80%,40%)}
.program9 {background-color: hsl(125,80%,40%)}
.programManual {background-color: hsl(25,80%,40%)}

.schedule {
	background-image:url("whitestripes.png");
}

.showDetails {
	position: absolute;
	width: 90px;
	top: 100%;
	left:0px;
	color:white;
	z-index:100;
	border-radius: 6px;
	display: inline-block;
	font-size: 10pt;
	margin: 3px;
	padding: 3px;
}

.systemInfo {
	margin-right: -5px;
}

.scheduleMarker.showDetails {
	border: 1px solid black;
}

#displayScheduleDate {
	text-transform: none;	
}

#legend span {
	padding:2px 6px;
	color:white;
	margin: 0px 4px;
	font-size:9pt;
}

#pluginLinks
{
    list-style-type: none;
    padding:0;
}

#pluginMgr
{
   background-color:#397F19;
   font-weight: 700;
}

#browsePlugins
{
   background-color:#397F19;
   /*font-weight: 700;*/
   margin-left: 50px;
}

#writePlugins
{
   background-color:#397F19;
   /*font-weight: 700;*/
   margin-left: 50px;
}

#pluginMenu
{
    border:3px solid #2E3959;
	border-radius: 12px;
	padding: 4px;
	border-spacing: 0px;
    background-color: white;
}

@media only screen and (max-width: 1024px) {
   body {
      font-size: 10pt;
   }
   div.option .input{
   	  padding-left: 20px;
   }
   div.panel {
      margin-left: 0;
      margin-top: -4pt;
   }
   div.panel div.title {
      font-size: 14pt;
   }
   div.header div.title {
	  font-size: 16pt;
   }
   div.ftrInfo {
	  min-width: 100px;
   }
   
   div.footer {
     background-image: none;
     padding: 16px 16px 16px 50px;
   }
   #pluginPars {
	  width: 90%;
    }

   div#status {
      float: none;
      width: 100%;
      padding: 0;
      display: inline-block;
   }
   #deviceTime {
      float: left;
   }
   #deviceTime span.time {
      font-size: 22pt;
      width: 120px;
      letter-spacing:0px;
      padding-right:2px;
      margin-bottom: 4px;
   }
   #deviceTime span.sep {
      font-size: 16pt;
   }
   #deviceTime span.second, #deviceTime span.ampm {
      font-size: 10pt;
   }
   #deviceTime span.second {
      top: -5px;
      left: auto;
   }
   #deviceTime span.ampm {
      left: -55px;
   }
   #deviceDate {
      float: right;
      padding: 0 5px 5px 5px;
   }

   button {
      font-size: 9pt;
   }

   #nav button {
      padding: 4px 12px;
      margin: 4px 0;
      font-size: 9pt;
   }
   #nav button.here {
      height: 40px;
   }

   td.stationStatus {
      padding: 0 6px;
      font-size: 10pt;
   }
   td.station_name {
      font-size: 10pt;
   }

   .program {
      min-width: 400px;
   }

   #programs table tr:nth-child(2).showWeekly td {
      height: 90px;
      max-width: 26px;
   }
   #programs table tr:nth-child(2).showWeekly td button.weekday {
      -webkit-transform: rotate(-90deg);
      font-size: 8pt;
      height: 26px;
      width: 90px;
      text-align: left;
      margin-left: -24px;
   }
   .animatedSelector {
      width: 100%;
      max-width: 100%;
   }
   .shaded {
	background-color: #DDD;
   }
   label {
	border:1px solid #ccc;
	padding-left: 20px;
	padding-right:20px;
	display: block;
	white-space: nowrap;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
   }
   .noNewline {
    white-space: nowrap;
   }
   .timeInput{
   	border:none;
	padding-left: 0px;
	padding-right:0px;
	display: inline;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	width: 3em;
   }
   input[type=number][size="3"]{
    width: 3em;
   }
   input[type=number][size="3"]{
    width: 3em;
   }
   .breakBefore {
    display: table;
   }
}

/******** Mobile Styles **********/

   .notSelectable {
      user-select: none;
      -webkit-user-select: none;
   }