/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color: #ffffff;
    font-size: .7em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

.left 
{
    float:left;
}

.left50 
{
    float:left;
    width:48%;
    margin-top: 5px;
    margin-right: 5px;
}

.left75 
{
    float:left;
    width:72%;
    margin-top: 5px;
    margin-right: 5px;
}

.left40 
{
    float:left;
    width:40%;
    margin-top: 5px;
    margin-right: 5px;
}

.left30 
{
    float:left;
    width:30%;
    margin-top: 5px;
    margin-right: 5px;
}

.left25 
{
    float:left;
    width:22%;
    margin-top: 2px;
    margin-right: 2px;
}

.right
{
    float:right;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 1200px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}

#loggedInUser 
{
    height: 30px;
    width: auto;
    float: right;
    padding-top: 7px;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    padding-bottom: 0;
    border-color: #018FF1;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    margin-bottom: 10px;
    height: 70px;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: White;
    border: none;
    line-height: 2em;
    font-family: Calibri;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}

#mainBlueBorder {
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-color: #018FF1;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    height: 780px;
}

footer, 
#footer {
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    font-size: 1.2em;
    padding: 5px;
}

/* Table - sorted
----------------------------------------------------------*/
table { border-spacing:0;}

table.tablesorter thead tr .header {
	background-image: url(images/bg.png);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 2px;
	background-color: #FFF;
	vertical-align: top;
	font-size: 1em;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}

table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.png);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.png);
}
table th { width:150px;   
           background-color: #e8eef4;
           border: solid 1px #e8eef4;
           margin-right: 20px;
           font-size: 1.2em;
           font-style:normal; 
           font-weight:bold;
           color: #4F5052;
           cursor:pointer;
           text-align:left;
}
table thead th:hover { background-color :#4F5052; color:#F8BF24;}
table td { width:120px; border-bottom: 1px solid gray; font-size:small;}


/* TABLE
----------------------------------------------------------*/


table.tablestatic {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table.tablestatic  td {
    padding: 2px;
    border: solid 1px #e8eef4;
    font-size: 1em;
}

table.tablestatic  th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
    font-size: 1em;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.clear-small {
    clear: both;
    height: 2px;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

.deleteButton {
    height:25px; 
    width:80px;
    vertical-align:top;
    padding-bottom:10px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/

.indexDetails {
	background-image: url(images/document.png) no-repeat;
}

.indexTrash{
	background-image: url(images/trash.png);
}

.indexEdit{
	background-image: url(images/edit.png);
}

th.indexButtons,
td.indexButtons
{
    width:250px;
}

a.indexButtons
{
    font-size: 0.75em;
    color:yellow;
}

th.indexImages,
td.indexImages
{
    width:150px;
    text-align:right;
}

a.indexImages
{
    font-size: 0.75em;
    color:yellow;
}

.indexButton
{
    width:100px;
}


a.yellowButton,
a.smallYellow
{
    color:yellow;
}

a.smallDisabled,
a.smallYellow
{
    font-size:xx-small;
}

a.breadCrumb 
{
    font-size:xx-small;
    background: none;
    border-width:0px;
}

a.smallDisabled 
{
    display:none;
}

.indexTable
{
    width:100%;
}

.display-label, 
.editor-label,
.editor-label-short,
.editor-label-vshort {
    margin: 1em 0 0 0;
}

.log-label,
.log-label-short,
.log-label-vshort {
    margin: 1em 0 0 0;
    font-size:small;
    float: left;
    width: 80px;
}

.log-label-short {
    width:70px;
}

.log-label-vshort {
    width:40px;
}
.details-barcode {
    margin: 0 0 0 0;
    font-size:small;
    text-align: center;
    color:black;
}

.indexActionButton {
    border:none;
}

.editor-label-small,
.drawer-label-small,
.drawer-label-small-40,
.drawer-label-small-100, 
.drawer-label-small-200, 
.editor-display-small
{
    margin: 0 0 0 0;
    font-size:x-small;
    float: left;
    width: 80px;
}

.drawer-label-small
{
    width:60px;
   font-size:x-small;
}

.drawer-label-small-100
{
    width:100px;
}
.drawer-label-small-40
{
    width:40px;
}
.drawer-label-small-200
{
    width:200px;
    margin-top: 3px;
}

.editor-display-small
{
    color:black;
}

.editor-field-small {
    font-size:x-small;
    float: left;
}

.editor-label-short 
{
    float: left;
    width:50px;
}

.editor-label-vshort 
{
    float: left;
    width:40px;
    text-align:right;
    padding-right: 5px;
}

.display-field, 
.editor-field {
    margin: 1em 0 0 0;
}

.display-label-address, 
.display-label-address-long,
.editor-label-auto,
.editor-label-address-long, 
.updated-label,
.updated-label-long,
.day-check-label,
.schedule-check-label
{
    float:left;
    margin: 1em 0 0 0;
    width: 100px;
    font-size: 12px;
}

.editor-label-address
{
    float: left;
    margin: 1em 0 0 0;
    width: 100px;
    font-size: 12px;
}

.editor-label-auto {
    width: auto;
    padding-right: 5px;
}

.display-label-address-long {
    width: 300px;
}

.schedule-check-label
{
    width:130px;
}
.day-check {
    margin-top: 10px;
}

.schedule-day-list
{
   float:left;
   width: 150px;
   margin-top: 5px;
}


.schedule-time
{
   float:left;
   margin-top: 10px;
   margin-left: 5px;
}

.updated-label,
.updated-label-long
{
    margin: 0 0 0 0;
}
 
.LastCost { width:75px; }

.updated-label-long
{
    width:150px;
}

.editor-label-address-long 
{
    width: 300px;
}

.editor-field-left,
.editor-field-address,
.editor-field-long,
.editor-field-date
{
    float:left;
    margin: 0.8em 0 0 0;
    width:100px;
    font-size:12px;
}

.editor-field-address
{
    width:300px;
}

.editor-field-long
{
    width:500px;
}

.editor-field-date
{
    width:150px;
}

.address-no-label {
    float:left;
    margin: 0.2em 0 0 0;
    width:300px;
}

.display-field-address,
.display-field-address-long
{
    float:left;
    margin: 1.2em 0 0 0;
    width:300px;
}

.rounded-corners {
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.document-label 
.document-label-medium
{
}

.document-label-medium {
    font-size: medium;
}

.document-label-bold,
.document-label-bold-medium 
{
    float:left;
    margin-bottom: 0.5em;
    width:300px;
    font-weight:bold;
}

.document-label-bold-medium {
    font-size:medium;
}

.edit400
{
    float:left;
    margin: 0.5em 0 0 0;
    width: 400px;
}

.text-box {
    width: 30em;
}

.text-area {
    font-family:Verdana; 
    font-size:10pt; 
    color: #696969;
}

.text-box.multi-line {
    height: 6.5em;
}
.altEmail
{
    width: 250px;
    height: 150px;
    font-family: verdana;
    font-size: 10pt;
    color: #696969;
}

.tri-state {
    width: 6em;
}

#dvLoading
{
    background:#000 url(images/loading.gif) no-repeat center center;
    height: 400px;
    width: 400px;
    position:fixed;
    z-index: 1000;
    display:block;
    left: 40%;
    margin-left: auto;
    margin-right: auto;
}

/*  ****************************** PureCss Menu ************************************* */

#topMenu {
    background-color: #018FF1;
    border-color: #018FF1;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    height: 38px;
    margin-bottom: 5px;
}

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:Transparent;
	background-repeat:repeat;

}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:75.60000000000001px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#018FF1;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	color: #ffffff;
	font:bold 11px Verdana;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	
	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#AAAAAA;	
	background-image:none;}

ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	font:bold 11px Verdana;
	color: #6f6dae;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	font:bold 11px Verdana;
	color: #6f6dae;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}

/* ************************************************** Customer Menu  ******************************************************* */

.menuItemContainer 
{
    float:left; 
    width: 250px;
}

.customerMenuRow
{
    width:800px; 
    margin:0 auto;
}

a.customerMenu 
{
    width:230px; 
    height:50px;
    background: url('');
}

.customerMenuImage 
{
    vertical-align:middle;
    border:none;
}

.nojqueryformat
{
    background: url('');
    border-width:0px;
}


.dashboardRow
{
    width:1100px; 
    margin:0 auto;
}

.dashboardContainer 
{
    float:left; 
    width: 540px;
}

.gauge
{
    margin-left: 5px;    
    margin-right: 5px;
    height: 160px;
}

.gaugeInternal
{
    height: 140px;
}

.gaugeMarket
{
    margin-left: 5px;    
    margin-right: 5px;
    height: 320px;
}

.gaugeInternalMarket
{
    height: 290px;
    overflow:auto;
}

/* **********  Invoice  *********** */

.border-header {border: 1px solid #000000; border-width: 1px 1px 1px 0;}
.border-left {border-left: 1px solid #000000; }
.border-bottom {border-bottom: 1px solid #000000; }
.border-right {border-right: 1px solid #000000; }

.noborder-bottom {border-bottom: 1px solid #ffffff; }
.noborder-top {border-top: 1px solid #ffffff; }


.colInvoice,
.gridHeader,
.colQty,
.colItemNo,
.colDescription,
.colPrice,
.colUnit,
.colExtended {
    text-align:center;
}

.gridHeader {
    height:30px;
    border:solid;
    border-width:1px;
}

.colQty {
    width:50px;
    border-bottom:none;
}

.colItemNo {
    width:100px;
    border-bottom:none;
}

.colDescription {
    width:250px;
    border-bottom:none;
}

.colPrice, 
.colUnit,
.colExtended {
    width:100px;
    border-bottom:none;
}

.question {
    width:24px;
    height:24px;
    float: left;
    margin-top:2px; 
    margin-left:5px;
    background: url(images/blue_question.png) no-repeat;
   /*background: url(data:image/png;base64,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAB3RJTUUH3goHADIxjymjrAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAQmSURBVHjahZTvTxt1GMCf+9HSXgul15bxq9SiAsIGm4PRRRckUeMmyxQ1c8l8rYma+A/4ylcmZpvTOd/shbww84XRmJgMMTEjEZAwhWClBQoK1bKWXq+9ttfe9e58vr0SWKZbk6f33H2f7+f5+f1S8KAfRVFg4TigWQuAoTGaImtqqfLALf/5lePddPezz7kHTo95/D29ToezQasoZTWbiqvxpZ/UyK3vktH51WKxoD8cePjsmcD4+x+MHu8f6PFYGN6OQdIU0JQB5YoBiZxmLG9nU9nI9BfJqY8+XFqYTR/cztwDO/XOWyPvXrtxYSjYEXAxtI2l0SMFhmH6ZhHMcwzV1Wx32HydJ0ttI0932ZKTq5E/pPuA1ODFC6NvX/n8dGe9jaGoKsjvAuj1AfR4oapzWEmxBKAZFHidLOVudHXsOo8OdVoSk2urEWkfyAcDj755Y+JMzyEvjTASkIcDeOUJgLZ6XLYDeDkT2uQAiAkAFaye085AXre1H2rxU6noz9OCIFRowmNPXHwj1BV8hKSlalCVCko8B3ArBvBVGGA5CdXUCZDAVd20627lmH+ozvNjL58fYBgGaLA6HZ7jY+d8dpqqGtUkkQe4+TvAnQTApggQSQHoxn4X9+worKvD5WoJ9D/zAs/zLAtcY2NzoLfPMMzoNNzBoGhoTNOmztUBDLejju9ZrOE2Rq5o5hopUZPLxuwm+ZN9fX1OBPK8va7ORmA6ZUKqTyIYkR1h41hLfwNAUQX4fg1AkM11nTafDHrKa5Zmv9/vYjF6Q8dcSPh6DbIXJYEPtQIEXGYTvl4BWBdqziizBMSmggqOqcVut1tYppQRZEUtqprVodF7aezDpTLArzsAeQUgiiOs6zUgXXOMNvmSDrxFKd4tFhWWLuVEORlblj1HQlak7aW7B7+9BTD7t9kMrQYjtSTOTMcG7AqycYwv//nDxkaW1kpSkd28/W2yUDFI2oq+PxKk8MNtAO8NmzOp17qr1EaL6IUy/hUzMqelZqPRaJ7WMQflzs0vxexuTEYL9YAxkXorQDs2xOcwIzw4WsRuOyEZg950ZH5m+sdMJqNVT4qU3skde7w1vcUdebEB62rUzi+RNHZ0CWv4246p67Xv5DQJogyNhS3xyYbNK5cvXZoURdEEkiiFtYXw6IneworadspmtVpI0QhYwmbcLezDiGhon0rljXrpL+mlYPyzqx9fvr64uFi453KQZdlIrcwsnB3s2E7qfLdQZnjzHJhnW0OSgjnmpJJR3E1VBh1bGyNN259ev3b1k6mpqcz/3odut5s+9+rr3Y89Nf7alt7+fLJkCyo6gxeNTrnZstzVIMVRZmLh+W8mJiZ+CYfD8kNvbHLz+3w+NhQKeQ73H+3wNrX4LCzNFHKiGI1G4nNzczvr6+uyqqr37f0XGdH4Q0Ndbs0AAAAASUVORK5CYII=) no-repeat;*/
}