/*
PALLETTE
blue: 0066a4 
light grey: cfcfcf
grey: 3e3e3e


font-family: 'PT Sans'
font-size: 400 (normal), 700 (bold), & 400italic (normal italicized)
*/

/* Reset */
input { outline: none; border: none; } 

/* Webkit Reset */
ul { 
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}

/* Moz reset */
ul, menu, dir { 
    -moz-padding-start: 0;
    margin: 0 0;
    padding: 0;
}

/* Global Reset */
ul li { list-style-type: none;  display: block; float: left; padding: 0; margin: 0; } 
a { text-decoration: none; color: #fff; cursor: pointer; } 
.clear { clear: both; } 

.disabled, .loading { opacity: 0.3;  user-select: none; -webkit-user-select: none; } 
.invalid { border: 1px solid red; } 

/* Main */
.wrapper { width: 980px; margin: 0 auto; } 
.overlay {  display: none;  width: 100%; height: 100%; position: fixed; z-index: 1; background: rgba(0,0,0,0.4); } 
#menu { width: auto; min-width: 600px; float: right; height: 48px; background: #19496e; border: 1px solid #162e4e; border-radius: 3px; 
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(67,134,175,1);
	-moz-box-shadow: inset 1px 1px 0px 0px rgba(67,134,175,1);
	box-shadow: inset 1px 1px 0px 0px rgba(67,134,175,1);
	
	margin-top: 50px;
}
#menu ul li { float: left; width: auto; color: #fff; text-shadow: 1px 1px #081d2d; margin: 0 20px; line-height: 48px; cursor: pointer; } 
#menu ul li:hover { text-decoration: underline; }

#create_wrapper  { float: right;  height: auto;  width: 1px;  position: relative;  clear: right; } 
.create_button { position: relative; border: 1px solid #bebebe; border-radius: 3px; background: url(../images/create.png) repeat-x; height: 46px; width: auto; padding: 0 20px; text-align: center; font: 700 15px 'Open Sans', sans-serif; color: #19991c; float: right; margin: 20px 0 0; clear: right; } 
#create_menu { display: none; margin: 75px 0 0 -250px; width: 250px; padding-bottom: 10px; height: auto; position: absolute; background: #f2f2f2; border: 1px solid #bebebe; border-radius: 3px; }
.create_item { cursor: pointer; float: left; width: 90%; border-radius: 5px; color: #19496e; height: 30px; line-height: 30px; padding: 0 2%; margin: 10px 3% 0; }
.create_item:hover { background: #19496e; color: #fff; }  

.create_form_wrapper { width: 500px; margin: 0 auto; clear: both; } 
.create_form { display: none; z-index: 2; width: 500px; position: absolute; height: auto; min-height: 100px; background: #fff; border: 1px solid #676767;  border-radius: 3px; margin-top: 100px; }

.create_form .msg { color: red; width: 100%; float: left; text-align: center; display: none; }
.create_form  form { width: 100%;} 
.create_form  form .form_section:nth-child(even) { border: none; margin-left: 20px; } 
.create_form form h1 { background: #19496e; margin: 10px 0; }
.buttons_wrapper { text-align: center; float: left; width: 100%; } 
.buttons_wrapper input { float: none; display: inline-block; }  
.invalid { border: 1px solid red; } 

.green_button, .grey_button, .red_button { width: auto; text-shadow: 1px 1px #147716; padding: 0 20px; height: 35px; line-height: 35px; color: #fff; font-size: 15px; font-weight: 600; background: #19991c;  border: 1px solid #147716; 
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(80,238,84,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(80,238,84,1);
box-shadow: inset 1px 1px 0px 0px rgba(80,238,84,1);
}
.grey_button { text-shadow: 1px 1px #494949; background: #666666;  border: 1px solid #494949; 
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(167,167,167,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(167,167,167,1);
box-shadow: inset 1px 1px 0px 0px rgba(167,167,167,1); 
}
.red_button { text-shadow: 1px 1px #4E0707; background: #C21515;  border: 1px solid #8A1111; 
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 21, 21, 1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255, 21, 21, 1);
box-shadow: inset 1px 1px 0px 0px rgba(255, 21, 21, 1); 
}

/* Legend */
#legend { float: left; width: 600px; margin-top: 40px; } 
#legend div { border: 1px solid #A0932B; float: left; width: 15px; height: 15px; background: yellow; border-radius: 15px; }
#legend div.green { background: green; border: 1px solid rgb(3, 26, 3); }
#legend div.red { background: red; border: 1px solid rgb(129, 16, 16) }
#legend div.white { background: white; border: 1px solid rgb(215, 215, 215); }
#legend label { float: left; margin-left: 20px; margin-right: 40px;  } 

#create_wrapper { float: right; } 

/* Form */
form { float: left; } 
form h1, #order_entry h1 { clear: both; width: 100%; float: left; height: 34px; line-height: 34px; background: #000; color: #fff; text-align: center; font-weight: 600; font-size: 16px; } 
form input, form label, form select { float: left; }
form .form_section { float: left; width: 440px; }
form .form_section.left_section { border-right: 1px solid #ccc; padding-right: 35px; margin-right: 60px;  }  
form input, form select { background: #e5e5e5; border-radius: 3px; border: 1px solid #b3acac; height: 30px; padding: 0 10px; margin: 10px 10px 0 0;
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	
	text-shadow: 1px 1px rgba(255,255,255,0.5);
	outline: none;
} 
form label { float: left; line-height: 34px; font-size: 18px; float: left; margin-right: 20px; line-height: 46px; } 

/* Order Entry */ 
.form_errors { display: none; float: left; width: 100%; height: 30px; line-height: 30px; margin: 5px 0; text-align: center; font-weight: 700; color: red; }  
#order_entry .break { float: left; width: 100%; height: 1.1px; background: #b3acac; display: block; clear: both; margin: 20px 0 20px; } 
#order_entry .datatable select { margin-bottom: 10px; } 

/* View */
#order_entry.view span,
#order_entry.view label {float: left; font-size: 15px; line-height: 15px; margin: 10px 0; } 
#order_entry.view label { font-weight: 600; } 
#order_entry.view span:not(.datatable span) { clear: none; margin: 10px 40px 0 10px; } 
#order_entry.view h2 { font-size: 20px; margin: 0; }

#order_entry.view form .form_section { width: auto; } 

table th { cursor: pointer; white-space: nowrap; } 
#items table input { width: 100px; margin:  2px; } 
#items table td { padding: 0 10px; } 
#order_item_list.add td:nth-child(3) input,
#items table td:nth-child(2) input { width: 280px; } 
#items table td:nth-child(4) input { width: 100px; } 
#items table:not(.add) td:nth-child(4) input { width: 140px; } 
#items table td:nth-child(5) input { width: 200px; } 
#items table td:nth-child(1) input { width: 60px; } 

.order_note { float: left; width: 100%; text-align: right; color: red; } 

/* Tables */
.datatable { width: 100%; margin-top: 20px; float: left; clear: both; } 
.dataTables_info { display: none; } 
.datatable th, .datatable td { outline: none; color: #000; padding: 0 10px; height: 30px; text-align: left; } 
.datatable th { background: #19496e; color: #fff; } 
.datatable td { background: #EAEAEA; border-bottom: 1px solid #D3CCCC; } 
.datatable tr:nth-child(odd) td { background: #F9F9F9; } 

.dataTables_paginate { margin-top: 10px; float: left; } 
.dataTables_paginate a { color: #343434; margin:  10px; } 
.dataTables_paginate a:hover:not(.disabled), 
.dataTables_paginate a.current { color: #19496e; text-decoration: underline; } 
.dataTables_paginate a.disabled { opacity: 0.7; } 
.dataTables_length { float: right; margin-bottom: 25px; }
#orders_frontpage_filter label { font-weight: bold; color: #343434; margin-right: 15px; } 
#orders_frontpage_filter label input { font-weight: normal; } 
#orders_frontpage_filter input { width: 150px; height: 24px; background: #e5e5e5; border-radius: 3px; border: 1px solid #b3acac;  padding: 0 10px; margin: 10px 10px 0 15px;
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
	
	text-shadow: 1px 1px rgba(255,255,255,0.5);
	outline: none;
	} 

#manage_page   label { font-weight: bold; color: #343434; margin-right: 15px; } 
#manage_page  label input { font-weight: normal; } 
#manage_page  input { width: 150px; height: 24px; background: #e5e5e5; border-radius: 3px; border: 1px solid #b3acac;  padding: 0 10px; margin: 10px 10px 0 15px;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);

text-shadow: 1px 1px rgba(255,255,255,0.5);
outline: none;
} 
	
.datatable .status { text-align: center; } 
.datatable .status  span{ border: 1px solid #A0932B; display: inline-block; width: 15px; height: 15px; background: yellow; border-radius: 15px; }
.datatable .status  span.green { background: green; border: 1px solid rgb(3, 26, 3); }
.datatable .status  span.red { background: red; border: 1px solid rgb(129, 16, 16) }
.datatable .status  span.white { background: white; border: 1px solid rgb(215, 215, 215); }

.add_row { cursor: pointer;  float: right;  width: auto; margin: 10px 0; height: auto; line-height: 30px; } 
.add_row:hover { color: #19496e }
.add_row span { display: inline-block;  margin: 0 7px 0 15px; width: auto; width: 30px; height: 30px; line-height: 30px; background: #19496e; border-radius: 120px; text-align: center; color: #fff; font-weight: 700; } 

.delete_row { text-align: center;  user-select: none; -webkit-user-select: none; } 
.delete_row span { display: inline-block; width: 20px; height: 20px; line-height: 20px; font-size: 10px; color: #fff; background: red; border-radius: 120px; text-align: center; font-weight: 700;  cursor: pointer; } 

/* Frontpage */
#orders_frontpage th, #orders_frontpage td { line-height: 30px; text-align: center; } 
#orders_frontpage.datatable { margin-top: 0; } 

#orders_frontpage tbody tr:hover { cursor: pointer; }
#orders_frontpage tbody tr:hover td:not(.dataTables_empty) { background: #19496e;  color: #fff; cursor: pointer; }

/* Search */
#results tbody tr:hover { cursor: pointer; }
#results tbody tr:hover td:not(.dataTables_empty) { background: #19496e;  color: #fff; cursor: pointer; }

.home_header { margin: 0; font-size: 24px; margin: 20px 0; }

::-webkit-input-placeholder {
   color: #666;
}
:-moz-placeholder { 
	/* Firefox 18- */
   color: #666;  
}
::-moz-placeholder {  
	/* Firefox 19+ */
   color: #666;  
}
:-ms-input-placeholder {  
   color: #666;  
}

/* TBD */
#chartDateRange { width: auto; float: left; margin-left: 90px; } 
#chartDateRange a.prev, #chartDateRange a.next { margin-right: 5px;  margin-top: 12px; width: 21px; height: 25px; background: url(../images/sprites/prev_next_arrows.png) no-repeat; float: left; }
#chartDateRange a.prev:hover:not(.inactive) { background-position-y: -25px; }
#chartDateRange a.next { background-position-x: -21px; margin-right: 15px; margin-left: 5px; }
#chartDateRange a.next:hover:not(.inactive) { background-position-y: -25px; } 
#chartDateRange a.inactive { opacity: 0.3; }
#chartDateRange input[type='button'].inactive { background: #ccc; border: 1px solid #ccc; opacity: 0.5} 

/* Date Selector */
#chartSettings input.date_input { margin-top: 12px; float: left; width: 150px; height: 25px; line-height: 25px; padding: 0 5px; border: 1px solid #ccc; border-radius: 5px; background: #fafafa url(../images/icons/calendar.png) no-repeat 96% center; } 
	
.blue-skin {
	font-size: 90%;
}

.blue-skin .ui-widget {
	font-family: "Open Sans";
	background: #2e3641;
	border: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.blue-skin.ui-datepicker {
	padding: 0;
	border: 1px solid #E6DDDD;
	border-radius: 5px;
	width: 300px;
	margin: 10px 0;
}

.blue-skin .ui-datepicker-header {
	border: none;
	background: transparent;
	font-weight: normal;
	font-size: 15px;
}

.blue-skin .ui-datepicker-header .ui-state-hover {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.blue-skin .ui-datepicker .ui-datepicker-title {
	margin-top: .4em;
	margin-bottom: .3em;
	color: #e9f0f4;
}

.blue-skin .ui-datepicker .ui-datepicker-prev-hover,
.blue-skin .ui-datepicker .ui-datepicker-next-hover,
.blue-skin .ui-datepicker .ui-datepicker-next,
.blue-skin .ui-datepicker .ui-datepicker-prev {
	top: .9em;
	border:none;
}

.blue-skin .ui-datepicker .ui-datepicker-prev-hover {
	left: 2px;
}

.blue-skin .ui-datepicker .ui-datepicker-next-hover {
	right: 2px;
}

.blue-skin .ui-datepicker .ui-datepicker-next span,
.blue-skin .ui-datepicker .ui-datepicker-prev span {
	background-image: url(images/ui-icons_ffffff_256x240.png);
	background-position: -32px 0;
	margin-top: 0;
	top: 0;
	font-weight: normal;
}

.blue-skin .ui-datepicker .ui-datepicker-prev span {
	background-position: -96px 0;
}

.blue-skin .ui-datepicker table {
	margin: 0;
}

.blue-skin .ui-datepicker th {
	padding: 1em 0;
	color: #ccc;
	font-size: 13px;
	font-weight: normal;
	border: none;
	border-top: 1px solid #3a414d;
}

.blue-skin .ui-datepicker td {
	background: #19496e;
	border: none;
	padding: 0;
}

.blue-skin td .ui-state-default {
	background: transparent;
	border: none;
	text-align: center;
	padding: .5em;
	margin: 0;
	font-weight: normal;
	color: #19496e;
	font-size: 16px;
}

.blue-skin .ui-state-disabled  {
	opacity: 1;
}

.blue-skin .ui-state-disabled .ui-state-default {
	color: #fba49e;
}

.blue-skin td .ui-state-active,
.blue-skin td .ui-state-hover {
	border-radius: 5px;
	background: #19496e;
	color: #fff;
}
		
/* Popup */
#popup_wrapper { position: fixed; z-index: 99; top: 10; right: 10;  }
#popup { display: none; float: right; width: 220px; padding: 21px 10px 19px 60px; text-shadow: 1px 1px #fff; height: auto; background: rgba(255,255,255,1) urL(../images/icons/alert.png) no-repeat 10px center; border: 1px solid #0066a4; border-radius: 5px; } 

/* Datepicker Form */
.datepicker_form { margin-bottom: 20px;  float: left; width: 100%; }
.datepicker_form input { height: 30px; margin: 0 10px }
.datepicker_form input[type='text'] { background: #f5f5f5 url(../images/icons/calendar.png) no-repeat 96% center; } 
body .datepicker_form input[type='button'],
body .datepicker_form input[type='button']:not(.disabled):hover { margin: 0 0 0 20px; height: 30px; }

/* Login */
#login { width: 220px; height: 160px; background: #19496e; border-radius:  3px; margin: 50px auto; float:  none; padding: 10px 100px; }
#login h3 { text-align: left; color: #fff; margin: 5px 0; }