@CHARSET "ISO-8859-1";

* {
	margin: 0;
}

html, body 
{
	background: #111111;
	/* font-family: 'Droid Sans', sans-serif; */
/*     font-family: 'Arimo', sans-serif, Verdana, Arial, Helvetica !important; */
/*     font-size:100%;  */
/*     font-weight: 400; */
/*     color:#1a1a1a; */


font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 12px;
	color: #bbbbbb;
	height: 100%;
}

/* h1, h2, h3, h4, h5, h6 { */
/*     font-family: 'Roboto', sans-serif, Verdana, Arial, Helvetica !important; */
/* } */

#main {
 min-height: 100%;
 height: 100%;
 margin-top: -100px;
}

#content { 
	margin-top: 100px;
	min-height: 300px;
}

#compTimeValue, #sprinklerTimeValue {
    font-size: 8pt;    	
}

.inactive-block {
    background-color: red !important;
    border-color: #020202 !important;
}

input[type="text"], input[type="password"] {
	display: inline-block;
	vertical-align: middle;
	width: 280px;
	padding: 6px;
	background-color: #cccccc;
	border: none;
}

.formField label {
	text-align: right;
	display:inline-block;
	color: #888888;
	font-weight: bold;
	font-size: 10pt;
	width:90px;
	vertical-align: middle;
	padding-right: 10px;
}

.formField {
	margin-bottom: 5px;
	padding:10px 20px 10px;
	
}

.rule {
	border: 2px solid #333333;
	margin-bottom:5px;
	margin-top: 5px;
}

/*
A senction is any rectangular area that contains something
Text, form, etc
*/
.section-header {
	padding: 5px 5px 5px;
}

.section {
	background: #222222;
}


/* ---------------- Login Form ------------------------------------- */

#loginWindow form{
		background-color: #222222;
}

#loginArea {
	margin-top: 100px;
	padding: 20px 30px 10px;
}

#loginArea input {
	padding: 5px;
}


#loginHeader {
	margin-bottom: 15px;
	height:25px;
}

#loginHeader img {
	position:relative;
	bottom:5px;
}

#loginTitle {
	font-size:14pt;
}

#loginFields {
}

#loginFields span:nth-child(1) {
	display:inline-block;
	vertical-align: middle;
}

#loginFields span:nth-child(2) {
	display:inline-block;
}

#loginFields span:nth-child(3) {
	display:inline-block;
	vertical-align: middle;
}

.loginErrorField {
	padding: 0 20px;
}

.loginField {
	margin-bottom: 5px;
	padding: 0px 20px 10px;
}

.loginField span:nth-child(1), .loginErrorField span:nth-child(1) {
	display: inline-block;
	width: 32px;
}

.loginField span:nth-child(2), .loginErrorField span:nth-child(2) {
	display: inline-block;
	width: 120px;
	text-align: right;
	font-size: 14px;
	margin-right: 5px;
}

.loginField span:nth-child(3){
}

.loginErrorField span:nth-child(3) {
	display: inline-block;
	color: red;
}

#loginTrouble {
	float:right;
}

#loginButton, #forgotPasswordButton, #registerButton, #unregisterButton {
	float: right;
	margin: 10px 20px 10px 0;
}


#loginAccessories {
	margin-left: 20px;
	margin-bottom: 10px;
	font-size: 12px;
}

#loginAccessories span {
	margin-right: 10px;
}

#recaptcha_area {
	margin-top: 30px;
	margin-left: 20px;
}

#recaptcha_links {
	float: left;
	margin-left: 20px;
}
/*--------------------------------- End Login Form -----------------------------*/

/*--------------------------------- Registration Fields ------------------------*/
#registrationArea {
	margin-top: 100px;
	padding: 20px 30px 10px;
	
}

#registrationFields .formField label{
	width: 140px;
}

#signUpButton {
	float: right;
	margin-right: 25px;
}
/*--------------------------------- End Registration Fields ------------------------*/

/*--------------------------------- Footer header------------------------*/
#header {
	height: 45px;
	margin: 10px 0 10px 0;
}

#header div:nth-child(1) {
		background-color: #333333;	 
}

#header #logo {
	float: left;
}

#header #links {
	margin-right: 20px;
	margin-top: 8px;
	float: right;
	font-size: 14px;
}


.header-social {
	float: right;
	margin: 55px 30px 0px;
}


#footer {
	margin-top: -90px;
	padding: 20px 20px 20px;
	height: 50px;
	background-color: #222222;	
}

#copyrightContact {
	
}
/*--------------------------------- End Footer------------------------*/

/*--------------------------------- Password Area ------------------------*/
#fpassArea {
	margin-top: 100px;
	padding: 20px 30px 10px;
}

#fpassSendButton { 
	float: right;
	margin-right:40px;
}
/*--------------------------------- End Password Area------------------------*/

.status-btn {
  width: 130px;
  margin: 0 auto;
  margin-top: 15px;
}

.status-counter {
  color: #EF8A06; 
  font-size: 2em;
}

#runProgId, #runZoneId {
  width:65px;
  float: left;
  font-size: 3em; 
  margin:5px 5px 0px 0px;
}

.run-status-title {
	font-size: 1.3em;
	font-weight: bold;
	padding: 5px 0px 5px 0px;
}

#onOffMessage {
	padding-left: 5px;
	padding-right: 5px;
	/*
	text-align: center;
	margin-top: 10px;
	*/
}

#onOffD {
	padding: 10px 0 10px 0;	
}

#onOffD #onOffControls {
	width: 200px;
}

#onOffControls {
	padding-top: 10px;
}

#onOffD label {
	margin-left:20px;
	margin-right: 5px;
}

#dash_top {
	border: none;
}

#dash_top div[role="tabpanel"] {
	margin: 0px;
	padding: 0px;
	border-style: none;
}

#controllerArea #menuArea {
	padding-top: 10px;
	padding-bottom: 10px;
}

#dash_tabs, 
#dash_tabs li {
	background-color: #000000;
  color: #0395CC;
}

.menu ul {
	background-color: #222222;
  color: #0395CC;
}


.menu .k-link,
.menu [role=menu] li,
.menu [role=menuitem] ul, 
#dash_tabs .k-link, 
#dash_tabs .k-dropdown .k-state-default,
#controllers-list, #accounts-list, #locations-list,
#controllerSelection .k-dropdown .k-dropdown-wrap,
#controllerSelection .k-dropdown .k-dropdown-wrap .k-input {
	background-color: #333333;
	color: #0395CC;
}

.menu [role=menu] .k-link {
	margin: 0 20px 10px 20px;
	border-bottom: 1px solid;
	border-color: #666666;
}

#controllerSelection .k-dropdown .k-state-disabled,
#controllerSelection .k-dropdown .k-state-disabled .k-input,
#controllerSelection [aria-disabled=true] {
	background-color: #2a2a2a;
	color: #888888;
}


.menu .k-state-active , 
#dash_tabs .k-state-active,
#controllerSelection .k-dropdown .k-state-active,
#dash_tabs .k-state-active .k-link {
	color: #7FCDFE !important;
}

.menu .k-state-hover > .k-link, 
#dash_tabs .k-state-hover > .k-link,
#controllers-list .k-state-selected, #accounts-list .k-state-selected, #locations-list .k-state-selected,
#controllers-list .k-state-hover, #accounts-list .k-state-hover, #locations-list .k-state-hover,
#controllerSelection .k-dropdown .k-state-hover .k-input{
	background-color: #333333;
	color: #7FCDFE;
	border: none;
}

.menu [role=menuitem] ul .k-link {
	margin: 0 20px 10px 20px;
	border-bottom: 1px solid;
	border-color: #666666;?
}


#left-side {
	/* width: 190px; */
}

#left-side .k-header {
	text-align: center;
}

#left-side .k-block {
	padding-bottom: 10px;
	margin-bottom:25px;
}

.right-field
{
	margin-left: 10px;
  color: #ffffff;
  /*font-size: 12px;*/
	vertical-align: middle;
	display: inline-block;
}

.left-field
{
  width:310px;
  text-align:right;
	vertical-align: middle;
	display: inline-block;
}

.left-field label
{
   margin: 3px 0 8px;
   padding-right: 8px;
   border-right: 1px dotted;
}

.stack-div,  .clear{
  clear: both;
}

.k-block {
	background-color: #222222; 
	/* background-color: #252525; */
}

/*
.k-header {
	background-color: #1f1f1f;
	color: #bbbbbb;
}
*/

.k-tabstrip {
	background-color: #2a2a2a;
}

.zoneTimesTabContent, .zoneTimesTabContent:hover {
	background-color: #2a2a2a;
}

.k-tabstrip-items .k-state-active .k-link {
	background-color: #9fb607;
}

.status-zone-table{
  width: 100%;
  border-collapse: collapse;
}

.status-zone-table-header  {
  background-color: #333333;  
}

.status-zone-table th, .status-zone-table td{
  padding: 3px;
  text-align: center;
}

.status-zone-table td {
      border-bottom: solid 1px #555555;
}

.status-zone-table tr {
/*    border-bottom: solid 1px #555555; */
}

#zoneRows .flag {
font-size: .8em;
font-weight: bold;
color: #ffffff;
width: 40px;
margin: 0 auto;
}

#zoneRows .on-flag {
background-color: #00ff00;
color: #000000;
}

#zoneRows .off-flag {
background-color: #333333;
color: #ff0000;
}

#zoneRows .wait-flag {
color: #000000;    
background-color: #fffdcd;
}

#prog-week-days, #prog-even-odd, #prog-every-x-days, #start-times-content {
	padding: 10px 0 10px 10px;
}

.slide-legends {
	color: #bbbbbb;
	text-align: left;
}

.slide-legend-start {
  top: 0px;
}

.slide-legend-start span {
	padding-left: 52px;
}

.slide-legend-middle {
  font-size:1.4em; 
  color: #ef8a06;
  text-align: center;
  margin: 0 auto;
}

.slide-legend-end {
	text-align: right;
  top: 0px;
}

.slide-legend-end span {
	padding-right: 48px;


}

#runTimes fieldset, #seasonAdjPanelTabs fieldset {
  background: #3a3a3a;
  margin: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}

#seasonAdjPanelTabs fieldset {
	padding-top: 15px;
	padding-bottom: 15px;
}

fieldset {
  border: none;
}

.slide-slider {
	margin: 0 auto;
	text-align: center;
}

.slider-input {
	width: 630px;
}

#zoneTimesTabs {
	border: none;
}

#zoneTimesTabs .zoneTimesTabContent legend {
	color: #bbbbbb;
  font-size: 1.5em;
  margin-left:5px;
}

#prog-summary legend {
	color: #bbbbbb;
	margin-left: 5px;
}

#progTotalTime {
	color:#EF8A06; 
	font-size:2em;
	padding-left: 15px;
}

.loader {
  width: 66px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}

.dialog {
	background-color: #222222 !important;
}

#scheContent {
	min-height: 700px;
}

#scheContent #program_title {
	height: 35px;
	font-size: 25pt;
}

#scheContent #program_title span:nth-child(1) {
	position: relative;
	bottom: 2px;
}

#scheContent #program_title #progNumber {
	font-size: 30pt;
	font-weight: bold;
	position:absolute;
	right: 0px;
	margin-right: 20px;
	
}

#scheContent #program_title #progName {
	/* margin-left: 5px; */
}

#settingsPanel .k-content {
	background-color: #181818;
	border-style: none;
}

#settingsPanel {
	border-style: none !important;
}

#settingsPanel .k-state-active {
	background-color: #9fb607;
}

#settingsPanel .k-state-selected {
	background-color: #9fb607;
}


#settingsPanel .k-state-default {
	background-color: #899c0c;
}
	

#compTimeLabel {
	padding: 0px !important;
	width: 350px;
}

#syncCell {
	width: 350px;
}

#sprinklerTimeLabel {
	width: 350px;
}

#settingsPanel li ul {
	padding: 10px;
}

#syncCell {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 120px;
}

#comp_time_sync div {
	margin-right: auto;
	margin-left: auto;
}

.settings-row {
  margin-bottom: 8px;
 	vertical-align: middle;
	min-height: 22px;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pad10 {
	padding:10px !important;
}

.pad20 {
	padding:20px !important;
}

.pad30 {
	padding:30px !important;
}

.right-field-input {
	margin-left: 10px;
  font-size: 12px;
	vertical-align: middle;
	display: inline-block;
}

#ntpForm  .left-field {
  width: 260px;
}

.vertical_center {
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -150px;
}

#contentArea {
	margin-right: 0px;
}

.highlight {
	color: #EF8A06;
}

.status-table {
    width: 100%;
    margin-top: 10px;
}

.status-table tr td:nth-child(2), .status-table tr td:nth-child(3) {
    text-align: right;
    color: #ef8a06;
}

.status-table td {
    padding: 0 10px 0 10px;
	vertical-align: middle;
}

.rain
{
	height: 32px;
	width: 32px;
	background: url('../img/res/drawable-mdpi/ic_action_rain.png') no-repeat center;
}

.sunny
{
	height: 32px;
    width: 32px;
    background: url('../img/res/drawable-mdpi/ic_action_sun.png') no-repeat center;
}

.right {
	float: right;
}

.left {
	float: left;
}

#rSensor1-status, #rSensor1-onOffStatus {
	margin-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.buttonMenuItem {
	width: 110px;
	height: 100px;
	background-color: #3a3a3a;
	margin: 15px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.buttonMenuItem div:nth-child(1) {
	padding-top: 15px;
}

.buttonMenuItem div:nth-child(2) {
	color: #0395CC;
}

.buttonMenuItem:hover {
	background-color: #555555;
	color: #7FCDFE;
}

#accountControllers {
	margin: 10px 0 0 0;
}

[role=treeitem] {
	color: #0395CC;
}

[role=treeitem] .k-state-hover, [role=treeitem] .k-state-selected {
	background-color: #222222;
	color: #7FCDFE;
	
}

.k-grid-toolbar {
	background-color: #222222;
}

.section-divider {
	background-color: #333333;
	color: #ffffff;
	padding: 3px 5px;
	margin: 20px 10px;
	font-weight: normal;
}

#locationEditControllers, #accountEditLocations, #controllerEditContent {
	margin: 0 10px 20px 10px;
}

#accountEditArea .k-header {
	margin-bottom: 10px;
}

#accountControllersEditArea {
	position: relative;
}

#dash_top {
	background-color: #111111;
	height: 200px;
}

.k-block {
	color: #bbbbbb;
}

#emptyController {
	margin-top: 150px;
	color: #aaaaaa;
}

#emptyController h2 {
	font-size: 2em;
}

#apiKeyChangeConfirmDialog {
	display: none;
}

#zoneNamesTabs, .zoneNamesTabContent{
	background-color: #222222 !important;
}

#zoneNamesTabs .right-field {
    width: 250px;
}

#zoneNamesTabs .w {
    width: 250px;
}

.zoneNamesTabContent {
	margin-bottom: 20px;
}

#zoneNamesTabList {
	border-bottom: solid 2px;
	border-color: #333333;
	padding-bottom: 0 !important;
	margin-bottom: 20px;
}

.zoneNamesTabContent .left-field {
    width: 250px;
}


 .w { float: left; clear: both; overflow: hidden; }
 .w span { float:left; }
 .w .input { }

 .w label { padding:0; }

/* Validation */
.w.error { color: red; background-color: #222222; width: 250px;}
.w.error .input { border-color: #C8A5A5;  }

.w.valid { background-color: #222222; }
.w.valid .input { border-color: #A5C8A6;  }
.w.valid span { display: none; }

#namesForm #saveNamesButtonRow .left-field {
	width: 250px;
}

#authForm input[type=text], #authForm input[type=password] {
	width: 130px;
}

#right-side {
	min-height: 1024px;
	position: relative;
}

#zoneStatusAccordion li[role=menuitem] span:nth-child(1) {
	background-color: #333333 !important;
}

#zoneStatusAccordion li[role=menuitem].inactive-block span:nth-child(1) {
    background-color: red !important;
}

/* ---------------------------------------------- HELP AREA -------------------------------------- */
#helpContentArea {
	background-color: #565656;
	color: #dddddd;
	padding-left: 50px;
    padding-right: 30px;
	padding-top: 50px;
/*
    -moz-box-shadow: inset 0 0 10px 10px #222;
    -webkit-box-shadow: inset 0 0 10px 10px #222;
    box-shadow: inset 0 0 100px 10px #222;
*/
}

#helpContentArea img {
	max-width: 600px;
}

#helpContentArea .article-title h1{
	font-size: 2em;
    margin-top: 20px;
    margin-bottom: 20px;
}

#helpContentArea h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 20px;
}

#helpContentArea ol{
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#helpContentArea ol ol{
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

#helpContentArea ol li a {
	margin-bottom: 30px;
}

#helpContentArea #indexArea {
	margin-bottom: 150px;
}

.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #444444;
    color: #cccccc;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

.rounded-list a:hover{
    background: #eee;
    color: #444444;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);  
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    color: #444444;
}
	
.thinThickTitle {
	color: #2b8abe;
	font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-size: 38px;
	font-weight: 300;
	text-transform: uppercase;
	
}

.thinThickTitle span {
	font-weight: 700;
}

.stale {
	background-color: red !important;
}

/*
------------------------------------------------------- CHARTS -----------------------------------------------
*/
#reportArea #calendar {
	margin: 0 auto;
	display: block;
	margin-bottom: 30px;
}

.titleDesc {
    font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-size: 18px;
	color: #999999;
}

#chartDayControls {
	margin-bottom: 5px;
}

#chartDayControls button {
	float: right;
}

#chartSummaryData {
    font-family: 'Open Sans Condensed', Verdana, sans-serif;
    font-size: 16px;
	margin-top: 10px;
}

.heading {
	color: #2b8abe;
}

.subHeading {
	display: block;
	color: #999999;
	font-size: 14px;
}

.bigNumber {
	font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-size: 100px;
	font-weight: 700;
	color: #777777;
}

.mediumNumber {
    font-family: 'Open Sans Condensed', Verdana, sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #555555;
}

.col_2 {
	padding: 0 5px 0 5px;
	width: 50%;
}

#chartDay { 
	border-bottom: 1px solid #333333;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.title {
	border-bottom: 1px solid #333333;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.hidden {
	visibility: hidden;
	display: none;
}


a {
	color: #cccccc;
	text-decoration: none;
}

.icon {
	margin-right: 3px;
}

.headerItem {
	margin-right: 5px;
}

#mapContainer {
    display: inline-block;
    position: relative;
    width: 100%;
}

#mapContainerDummy {
    margin-top: 100%;
}



/* Weather Station --------------------------------- */

#locationEditStationsMap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wstation-info-window {
	padding-right: 20px;
	color: black;
	line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

.wstation-info-window table tr td:nth-child(1)  {
	text-align: right;
	font-weight: bold;
}

.wstation-info-window table tr:last-child td  {
    height: 40px;
}

.wstation-info-window table tr td  {
    padding: 3px;    
}


.ic-text-strong {
  font-weight: bold;
}

.ic-text-smaller {
  font-size: 0.8em;
}

.ic-text-bit-bigger {
  font-size: 1.1em;
}

.ic-text-bigger {
  font-size: 1.2em;
}

.ic-text-more-bigger {
  font-size: 1.4em;
}

.ic-highlight {
  color: #EF8A06;
}

.ic-highlight-inverse {
  color: black;
  background-color: #EF8A06;
  padding: 3px;
}

#seasonAdjPanelTabs, #seasonAdjPanelTabs .k-content {
    background-color: #222222;
}

#seaonsAdjPanelTabList {
	background-color: #222222;
}

#weatherRainBlocks {
	padding-left: 28px;
}

#weatherAdjContent {
	padding-bottom: 30px;
}

#weatherAdjOnOff {
	padding-top: 30px;
	padding-left: 30px;
}

.ic-weather-adj-widget {
	background-color: #2a2a2a;
	padding-bottom: 10px;
}

.ic-weather-widget-slider {
	width: 280px;
}

.ic-weather-widget-slider-label-right {
	font-size: 1.1em;
	margin-right: 40px;
    float: right;
}

.ic-weather-widget-slider-label-left {
	font-size: 0.9em;
    margin-left: 40px;
    float: left;
}

.ic-weather-widget-slider-container {
	margin-top: 10px;
	margin-bottom: 10px;
}