/*~~~~~~~ Basic ~~~~~~~*/
body, html {
font-family: 'Open Sans', sans-serif;
font-size: 90%;
color:#252525 ;
line-height: 1.2;
height:100%;
white-space: nowrap;
}

html {
height:100%;
}

* {
margin: 0;
padding: 0;
}

img {
border: none;
}


h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
line-height: 2em;
}

h1 {font-size:2.2em;}
h2 {font-size:2em; color: #f15a25;}
h3 {font-size:1.8em; color: #f15a25;}
h4 {font-size:1.5em; color: #f15a25;}
h5 {font-size:1em;}
h6 {font-size:1em;}
/*
tr {
vertical-align: bottom;
}
*/

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

a:hover {
color: #666666;
cursor: pointer;
}

a:focus {
outline: none;
}

input, textarea {
font-family: 'Open Sans', sans-serif;
}

p {
margin: 1em 0;
}

/*~~~~~~~ Layout ~~~~~~~*/
#leftcolumn {
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 15em;
padding: 0 1.5em;
min-height: 100%;
background: #F0F0F0;
border-right: 1px solid #E2E2E2;
}
#rightcolumn {
position: fixed;
top: 0; 
left: 18em; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
padding: 0 2em 0 2em;
overflow: auto; 
}

/*~~~~~~~ Left Column ~~~~~~~*/
#logo {
width: 200px;
margin: 0 auto;
margin: 2em 0 1em 0;
}

#logo h1 {
height: 52px;
background: url(../images/logo-lotus.png) no-repeat;
text-indent: -9999px;
}

#logo h5 {
text-align: right;
}

div.message {
position: fixed;
width: 100%;
}

/*~~~~~~~ Left Menu Navigation ~~~~~~~*/
.nav {
background: #FFFFFF;
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
margin-bottom: 1em;
}

.nav ul {
overflow: hidden;
}

.nav ul, .nav li {
list-style: none;
}

.nav li {
font-size: 1.2em;
border-bottom: 1px solid #f0f0f0;
position: relative;
float: left;
width: 12.5em;
}

.nav li.nav-title {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 96%;
font-style: normal;
font-size: inherit;
background: #252525;
color: #CCCCCC;
width: 14.65em;
padding: 0.2em 0.5em;
border: none;
}

.nav li.logout {
background: #CCCCCC;
}

.nav li.logout a {
background: none;
color: #FFFFFF;
}

.nav li.logout a:hover {
background: #999999;
}

.nav a {
display: block;
padding: 0.5em;
color: #252525;
}

.nav a:hover, .nav a.active {
color: #FFFFFF;
background: #f15a25 url(../images/icon-right-reverse.png) 11.2em 0.8em no-repeat;
background-position: 97%;
}

/*~~~~~~~ Job List Table ~~~~~~~*/
table.maintable {
width: 100%;
border-top: 2px solid #f15a25;
border-bottom: 2px solid #f15a25;
border-collapse: collapse;
}

table.maintable th, table.maintable td {
padding: 0.2em;
}

table.maintable th {
color: #f15a25;
text-align: left;
border-bottom: 1px solid #f15a25;
font-weight: normal;
font-size: 110%;
}

table.maintable td {
border-bottom: 1px solid #CCCCCC;
font-size: 110%;
}

/*~~~~~~~ Title Bar ~~~~~~~*/
.title-bar {
padding: 10px 0;
}

.title-bar td {
vertical-align: middle;
}

/*~~~~~~~ Filter Bar ~~~~~~~*/
.filter-bar {
vertical-align: middle;
padding: 10px 0 10px 0;
overflow: auto;
margin-bottom: 0;
}

.filter-bar li{
list-style: none;
float: left;
display: inline-block;
margin-right: 2em;
}
/*
.filter-bar {
min-width: 20em;
//float: right;
text-align: right;
}
*/
.filter-bar label{
font-weight: 600;
margin-right: 1em;
}



/*~~~~~~~ Quick Actions ~~~~~~~*/
.quick-actions {
display: block;
position: relative;
width: 2em;
height: 1.8em;
background: #252525 url(../images/icon-down-reverse.png) 50% 50% no-repeat;
cursor: pointer;
z-index: 50;
}

.quick-actions:hover {
background: #f15a25 url(../images/icon-right-reverse.png) 50% 50% no-repeat;
}
.quick-actions ul, .row-actions li{
list-style: none;
}

.quick-actions ul{
display: none;
}

.quick-actions:hover ul{
display: block;
width: 15em;
position: absolute;
left: 2em;
top: 0;
z-index: 100;
padding: 0 0 0 0.5em;
//overflow: hidden;
}

.quick-actions li {
padding: 0 0 0 3em;
background: #252525;
width: 11em;
float: left;
}

.quick-actions a {
display: block;
padding: 0.5em 0.5em 0.5em 0;
color: #FFFFFF;
vertical-align: middle;
}

.quick-actions a:hover {
color: #999999;
}

.quick-actions li.quick-edit {
background: #252525 url(../images/edit18.png) 0.75em no-repeat;
}

.quick-actions li.quick-edit-inactive {
background: #252525 url(../images/edit18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-invoice {
background: #252525 url(../images/script18.png) 0.75em no-repeat;
}

.quick-actions li.quick-invoice-inactive {
background: #252525 url(../images/script18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-print {
background: #252525 url(../images/print18.png) 0.75em no-repeat;
}

.quick-actions li.quick-print-inactive {
background: #252525 url(../images/print18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-note {
background: #252525 url(../images/icon-note.png) 0.75em no-repeat;
}

.quick-actions li.quick-delete {
background: #252525 url(../images/trash18.png) 0.75em no-repeat;
}

.quick-actions li.quick-delete-inactive {
background: #252525 url(../images/trash18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-delete-db {
background: #252525 url(../images/database18.png) 0.75em no-repeat;
}

.quick-actions li.quick-delete-db-inactive {
background: #252525 url(../images/database18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-close {
background: #252525 url(../images/lock18.png) 0.75em no-repeat;
}

.quick-actions li.quick-close-inactive {
background: #252525 url(../images/lock18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-unclose {
background: #252525 url(../images/unlock18.png) 0.75em no-repeat;
}

.quick-actions li.quick-unclose-inactive {
background: #252525 url(../images/unlock18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-task {
background: #252525 url(../images/user18.png) 0.75em no-repeat;
}

.quick-actions li.quick-task-inactive {
background: #252525 url(../images/user18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

.quick-actions li.quick-report {
background: #252525 url(../images/report18.png) 0.75em no-repeat;
}

.quick-actions li.quick-report-inactive {
background: #252525 url(../images/report18.png) 0.75em no-repeat;
padding: 0.5em 0 0.5em 3em;
color: #999999;
}

/******* FORM *******/

input, textarea, select {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
}



.label {
width: auto !important;
margin: 0 50px 0 5px;
}


}

.left-align {
text-align: left;
margin: 0 0 0 50px;
float: left;
}


input.check {
text-align: left;
width: auto !important;
}
td.check {
text-align: left;
width: auto !important;
}



/*~~~~~~~ Feedback Message ~~~~~~~*/
.response {
margin: -6px 0;
position: relative;
top: 8px;
color: #222222;
background-color: #F9EDBE;
border: 1.5px solid;
border-color: #F0C36D;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 6px 10px;
text-align: center;
font-size: 13.5px;
font-weight: bold;
z-index: 100;
opacity: 0;
}

/*~~~~~~~ Spaces ~~~~~~~*/
td.space {
width: 50px;
}

td.small-space {
width: 15px;
white-space: nowrap;
}


/*~~~~~~~ Span Class for Orange Text ~~~~~~~*/
.orange {
//font-size: 115%;
color: #f15a25;
}

.orange-bold {
font-weight: bold;
color: #f15a25;
}

.orange-right {
font-size: 115%;
color: #f15a25;
text-align: right;
}


/*~~~~~~~ Invoice edit? ~~~~~~~*/
.value {
text-align: right;
}



.first {
font-weight: bold;
font-style: italic;
}

.notfirst {
font-weight: normal;
font-style: normal;
}

li.filter{
font-size: 95%;
margin: 5px 0;

}

td.center {
text-align: center;
}

.centre {
text-align: center;
}

.underline {
text-decoration: underline;
}



.orange-label {
color: #f15a25;
}



/*~~~~~~~ Not Sure ~~~~~~~*/
.button-delete {
display: block;
position: relative;
width: 2em;
height: 2em;
background: #252525 url(../images/icon-delete.png) 0.1em 0.1em no-repeat;
cursor: pointer;
z-index: 50;
}

label.selection {
color: #f15a25;
text-align: right;
}

tr.selection {
//margin: 50px 0;
line-height: 2;
vertical-align: middle;
}

td.selection {
vertical-align: middle;
text-align: right;
//padding: 0 0 1em 0;
}



/*~~~~~~~ Buttons ~~~~~~~*/
input.save-btn {
background: -moz-linear-gradient(center top , #FBCEBE, #f15a25) no-repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 12px 12px 12px 12px;
color: #FFFFFF;
font-weight: bold;
padding: 3px 7px;
cursor: pointer;
font-weight: 700;
}

input.save-btn:hover {
background: -moz-linear-gradient(center top , #f15a25, #F79C7C) repeat scroll 0 0 transparent;
cursor: pointer;
position: relative;
}

input.save-btn:active {
left: 1px;
position: relative;
top: 1px;
}

input.orange-btn {
background: -moz-linear-gradient(center top , #FBCEBE, #f15a25) repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 12px 12px 12px 12px;
color: #FFFFFF;
font-weight: bold;
padding: 3px 7px;
cursor: pointer;
font-weight: 700;
}

input.orange-btn:hover {
background: -moz-linear-gradient(center top , #f15a25, #F79C7C) repeat scroll 0 0 transparent;
cursor: pointer;
position: relative;
}

input.orange-btn:active {
left: 1px;
position: relative;
top: 1px;
}

input.black-btn {
background: -moz-linear-gradient(center top , #D3D3D3, #252525) repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 12px 12px 12px 12px;
color: #FFFFFF;
font-weight: bold;
padding: 3px 7px;
cursor: pointer;
font-weight: 700;
}

input.black-btn:hover {
background: -moz-linear-gradient(center top , #1A1A1A, #7C7C7C) repeat scroll 0 0 transparent;
cursor: pointer;
position: relative;
}

input.black-btn:active {
left: 1px;
position: relative;
top: 1px;
}

input.add {
background: #252525 url("../images/icon-plus-reverse.png") no-repeat scroll 0.75em;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font-weight: 700;
padding: 0.5em 0.8em 0.5em 2.4em;
}

input.add:hover {
background-color: #f15a25;
}

input.go {
background-color: #252525;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font-weight: 700;
padding: 0.3em 0.5em;
}

input.go:hover {
background-color: #f15a25;
}

input.save {
background-color: #f15a25;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font-weight: 700;
padding: 0.5em 0.8em;
}

input.save:hover {
background-color: #666666;
}

input.show {
background-color: #f15a25;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font-weight: 700;
padding: 0.5em 0.8em;
}

input.show:hover {
background-color: #666666;
}

input.hide {
background-color: #252525;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font-weight: 700;
padding: 0.5em 0.8em;
}

input.hide:hover {
background-color: #666666;
}

input.goButton {
background: -moz-linear-gradient(center top , #FFFFFF, #CCCCCC) repeat scroll 0 0 transparent;
border: 1px solid #AAAAAA;
border-radius: 12px 12px 12px 12px;
color: #111111;
font-weight: bold;
padding: 3px 7px;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}

input.goButton:hover {
background: -moz-linear-gradient(center top , #CCCCCC, #DDDDDD) repeat scroll 0 0 transparent;
cursor: pointer;
position: relative;
}

input.goButton:active {
left: 1px;
position: relative;
top: 1px;
}

/*~~~~~~~ Obsolete ~~~~~~~*/
/*


div.panel-right {
background: none repeat scroll 0 0 #F2F2F2;
height: 240px !important;
padding: 1em;
margin: 2em 0;
}

td.valignmid, li.valignmid, ul.valignmid {
vertical-align: middle !important;
}

.filter-actions {
display: block;
position: relative;
width: 2em;
height: 2em;
background: #252525 url(../images/icon-down-reverse.png) 50% 50% no-repeat;
cursor: pointer;
z-index: 50;
}

.filter-actions:hover {
background: #f15a25 url(../images/icon-right-reverse.png) 50% 50% no-repeat;
}
.filter-actions ul, .row-actions li{
list-style: none;
}

.filter-actions ul{
display: none;
}

.filter-actions:hover ul{
display: block;
width: 15em;
position: absolute;
left: 2em;
top: 0;
z-index: 100;
padding: 0 0 0 0.5em;
overflow: hidden;
}

.filter-actions li {
padding: 0 0 0 3em;
background: #252525;
width: 12em;
float: left;
}

.filter-actions a {
display: block;
padding: 0.5em 0.5em 0.5em 0;
color: #FFFFFF;
}

.filter-actions a:hover {
color: #999999;
}

table.savebar {
line-height: 1.2;
}

div.savebar {
vertical-align: middle;
padding: 0 0 10px 0;
//overflow: hidden;
//margin-bottom: 2em;
}

div.savebar li{
list-style: none;
float: left;
display: inline-block;
margin-right: 2em;
}

.save-btn {
width: auto !important;
border: none;
background: #f15a25 url(../images/save24.png) 0.5em 0.5em no-repeat;
color: #FFFFFF;
padding: 0.5em 0.5em 0.5em 3em;
cursor: pointer;
font-weight: 700;
//vertical-align: middle;
}

.save-btn:hover {
background: #666666 url(../images/save24.png) 0.5em 0.5em no-repeat;
}

.actions {
clear: both;
margin: 1em 0;
}

.actions ul {
overflow: hidden;
list-style: none;
}

.actions li {
display: inline-block;
padding: 0 0.5em 0 3em;
background: #252525;
margin: 0 0.3em 0 0;
float: left;
}

.actions a, .actions input {
display: block;
padding: 0 0.5em 0 0;
color: #FFFFFF;
height: 32px;
line-height: 32px;
}

.actions input {
background: none;
border: none;
cursor: pointer;

}

.actions a:hover, .actions input:hover {
color: #999999;
}

.actions li.quick-edit {
background: #252525 url(../images/icon-edit.png) 1em 0.5em no-repeat;
}

.actions li.quick-print {
background: #252525 url(../images/icon-print.png) 1em 0.5em no-repeat;
}

.actions li.quick-note {
background: #252525 url(../images/icon-note.png) 1em 0.5em no-repeat;
}

.actions li.quick-delete {
background: #252525 url(../images/icon-delete.png) 1em 0.5em no-repeat;
}

.actions li.quick-bill {
background: #252525 url(../images/icon-tag.png) 1em 0.5em no-repeat;
}

.actions li.quick-close {
background: #252525 url(../images/icon-closejob.png) 1em 0.5em no-repeat;
}

.save {
background: #f15a25;
cursor: pointer;
font-weight: bold;
margin-bottom: 1em;
}

.save ul {
overflow: hidden;
}

.save ul, .save li {
list-style: none;
}

.save li {
font-size: 1.2em;
border-bottom: 1px solid #f0f0f0;
position: relative;
float: left;
width: 12.5em;
}

.save a {
display: block;
padding: 0.5em;
color: #FFFFFF;
cursor: pointer;
}

.save a:hover, .save a.active {
color: #FFFFFF;
background: #666666;

}
*/