html {margin:0; padding:0;}
body {margin:0; padding:0; font:normal 80% arial, sans-serif; color:#000; background:#f7f7f7;}

.align-left {text-align:left;}
.align-center {text-align:center;}

a {color:#dc3131;}

header {height:45px; background:#222; color:#fff; text-align:right;}
header a {color:#fff;}
header .ttwd a span {display:none;}
header .ttwd a {display:block; width:30px; height:30px; background:url(../img/cms-logo-small.png) 0 0 no-repeat; float:left; margin-top:9px; margin-left:8px; border-bottom:1px solid #222;}
header .ttwd a:focus, header .ttwd a:hover {border-color:#dc3131; outline:none;}
header ul {margin:0; padding:15px 20px 0 0; list-style:none;}
header ul li {float:right; margin-left:10px; font-size:11px; text-transform:uppercase; font-weight:bold; border-left:1px solid #ccc; padding-left:10px;}
header ul li a {text-decoration:none;}
header ul li a:focus, header ul li a:hover {text-decoration:underline; background:#dc3131;}
header ul li span.more {float:right; margin-left:10px;}
header ul li:last-child {border-left:0;}

#flashMessage {padding:10px; background:#fff2a9;}
#flashMessage.success {background:#cdf5d0;}
#flashMessage.error {background:#ffe5e5;}

#wrapper {overflow:auto;}
#left {width:20%; float:left; background:#333; overflow:auto;}
#right {float:left; width:80%; overflow:auto;}

.mobile-menu {display:none;}
nav ul {margin:0; padding:0; list-style:none;}
nav ul li {overflow:auto; clear:both; border-bottom:1px solid #444;}
nav ul li a {display:block; color:#999; padding:14px 5%; text-decoration:none; width:90%;}
nav ul li a span {display:block; float:left; margin-top:2px; width:30px;}
nav ul li ul li {border-top:1px solid #444; border-bottom:0;}
nav ul li ul li {padding-left:20px;}
nav ul li:focus, nav ul li:hover {background:#dc3131;}
nav ul li:hover ul li {background:#333;}
nav ul li:hover ul li:hover {background:#dc3131;}
nav ul li:hover span, nav ul li:hover a {color:#fff;}
nav ul li:hover ul li span, nav ul li:hover ul li a {color:#999;}
nav ul li:hover ul li:hover span, nav ul li:hover ul li:hover a {color:#fff;}
nav ul li.active span, nav ul li.active a {color:#fff;}

#breadcrumbs ul {background:#fff; margin:0; padding:15px 0; list-style:none; color:#888; text-transform:uppercase; font-size:12px; overflow:auto;}
#breadcrumbs ul li {float:left; margin-right:10px; padding-left:10px;}
#breadcrumbs ul li a {text-decoration:none; font-weight:bold; color:#000;}
#breadcrumbs ul li i {color:#000; margin-right:15px;}
#breadcrumbs ul li:first-child i {color:#000; margin-right:5px;}
#breadcrumbs ul li:hover i, #breadcrumbs ul li:hover a, #breadcrumbs ul li a:focus {color:#dc3131; text-decoration:underline;}

.main {padding:20px; min-height:500px;}
.main h1 {font-weight:normal; margin:0; padding:0 0 20px 0; color:#555; font-size:20px; text-transform:uppercase;}
.main h1 span.small {font-size:50%;}

.new-job-link {display:block; margin-bottom:20px;padding:20px; background:#73be41; color:#fff; text-decoration: none; text-transform:uppercase; text-align: center;}
.new-job-link span {margin-right:5px;}
.new-job-link:focus, .new-job-link:hover {background:#539328;}

.summary-boxes {overflow:auto; margin-bottom:20px;}
.summary-boxes .box {width:23.5%; background:#333; float:left; margin-right:2%; height:120px; position:relative;}
.summary-boxes .box4 {margin-right:0;}
.summary-boxes .box a {display:block; position:absolute; bottom:0; left:0; right:0; background:#444; padding:7px 10px 5px 10px; font-size:11px; text-transform:uppercase; text-decoration:none; color:#fff;}
.summary-boxes .box a:hover {text-decoration:underline;}
.summary-boxes .box a i {float:right;}
.summary-boxes .box .number {font-size:40px; color:#fff; position:absolute; top:10px; right:10px;}
.summary-boxes .box .text {font-size:15px; position:absolute; right:10px; top:50px; color:#fff;}

.summary-boxes .box1 {background:#FFC759 url(../img/bg-user-circle-o.png) 0 0 no-repeat;}
.summary-boxes .box1 a {background:#FFAE00;}

.summary-boxes .box2 {background:#8775A7 url(../img/bg-dropbox.png) 0 0 no-repeat;}
.summary-boxes .box2 a {background:#7D6AA0;}

.summary-boxes .box3 {background:#E35B5A url(../img/bg-wrench.png) 0 0 no-repeat;}
.summary-boxes .box3 a {background:#E04C4B;}

.summary-boxes .box4 {background:#44B6AE url(../img/bg-list-ol.png) 0 0 no-repeat;}
.summary-boxes .box4 a {background:#3FA9A1;}

section h2 {font-weight:normal; color:#333; font-size:18px;}

.one-col {overflow:auto;}
.one-col .box {background:#fff; width:100%; margin-right:0%; float:none;}
.one-col .box:last-child {margin-right:0;}
.one-col .inner {padding:20px;}
.one-col .inner a.view-all-link {float:right; font-size:11px; text-transform:uppercase; text-decoration:none; color:#333; padding-top:3px;}
.one-col .inner a.view-all-link i {margin-left:5px;}
.one-col .inner a.view-all-link:hover {color:#f01d0e; text-decoration:underline;}
.one-col .inner h2 {margin-top:0;}
.one-col .inner h3 {margin-top:0; font-weight:normal;}
.one-col .inner ul {margin:0; padding:0; list-style:none; overflow:auto;}
.one-col .inner ul li {padding:10px 0; border-bottom:1px dotted #ccc;}
.one-col .inner ul li strong {display:block; width:35%; float:left;}

.two-col {overflow:auto;}
.two-col .box {background:#fff; width:49%; margin-right:2%; float:left; border:1px solid #ddd; box-sizing: border-box;}
.two-col .box:last-child {margin-right:0;}
.two-col .inner {padding:20px;}
.two-col .inner a.view-all-link {float:right; font-size:11px; text-transform:uppercase; text-decoration:none; color:#333; padding-top:3px;}
.two-col .inner a.view-all-link i {margin-left:5px;}
.two-col .inner a.view-all-link:hover {color:#f01d0e; text-decoration:underline;}
.two-col .inner h3 {margin-top:0; font-weight:normal;}
.two-col .inner ul {margin:0; padding:0; list-style:none; overflow:auto;}
.two-col .inner ul li {padding:10px 0; border-bottom:1px dotted #ccc;}
.two-col .inner ul li strong {display:block; width:35%; float:left;}
.two-col .inner .stdForm .term {margin-bottom:15px; border-bottom:1px dashed #ddd; padding-bottom:10px;}
.two-col .inner .stdForm .input {text-align:right;}
.two-col .inner .stdForm .input label {width:40% !important; margin-top:10px; text-align:left;}
.two-col .inner .stdForm .submitExit {overflow:auto;}
.two-col .inner .stdForm .submitExit button {border:0;background:#5C9B4C; display:block; float:right; text-decoration:none; color:#fff; text-decoration:none; padding:10px 15px; margin-left:10px; cursor:pointer;}
.two-col .inner .stdForm .submitExit button:hover, .two-col .inner .stdForm .submitExit button:focus {background:#427733; text-decoration:underline;}

ul.stdList {margin:0; padding:0; list-style:none;}
ul.stdList li {}
ul.stdList li a {display:block; padding:10px; border-bottom:1px solid #f2f2f2; text-decoration:none; color:#333;}
ul.stdList li a:hover {background:#f2f2f2;}
ul.stdList li:last-child a {border-bottom:0;}
ul.stdList li a span {float:right; margin-top:2px; font-size:11px; text-transform:uppercase; color:#000; display:none;}
ul.stdList li a span i {margin-right:5px;}
ul.stdList li a:hover span {display:block;}

ul.imgThumbs li {float:left;}
ul.imgThumbs li .image {overflow:hidden; width:100px; height:67px; margin-right:5px; margin-bottom:7px; padding:5px; border:1px solid #ddd;}
ul.imgThumbs li .image img {height:67px; width:100px;}
ul.imgThumbs li:hover .image {background:#E04C4B; border:1px solid #ad1c1c; cursor:pointer;}

.sub-tabs ul {margin:0 0 20px 0; padding:0; list-style:none; height:36px; border-bottom:1px solid #ddd;}
.sub-tabs ul li {display:inline;}
.sub-tabs ul li a {display:block; float:left; border:1px solid #ddd; background:#eee; padding:10px 20px; margin-left:2px; color:#777; text-decoration:none;}
.sub-tabs ul li a:hover {background:#fff;}
.sub-tabs ul li a.active {background:#f7f7f7; border-bottom:1px solid #f7f7f7;}

.add-link {display:block; float:right; background:#578EBE; color:#fff; text-decoration:none; padding:10px 15px;}
.add-link i {margin-right:5px;}
.add-link:hover {background:#4985B8;}

.reorder-link {display:block; float:right; background:#BC5656; color:#fff; text-decoration:none; padding:10px 15px; margin-left:5px;}
.reorder-link i {margin-right:5px;}
.reorder-link:hover {background:#B74949;}

.filter-link {display:block; float:right; background:#AAAAAA; color:#fff; text-decoration:none; padding:10px 15px; margin-left:5px;}
.filter-link i {margin-right:5px;}
.filter-link:hover {background:#CCCCCC;}

.import-link {display:block; float:right; background:#4cb349; color:#fff; text-decoration:none; padding:10px 15px; margin-left:5px;}
.import-link i {margin-right:5px;}
.import-link:hover {background:#1f8d1c;}

.sync-link {display:block; float:right; background:#4cb349; color:#fff; text-decoration:none; padding:10px 15px; margin-left:5px;}
.sync-link i {margin-right:5px;}
.sync-link:hover {background:#1f8d1c;}

.banner-link {display:block; float:right; background:#4cb349; color:#fff; text-decoration:none; padding:10px 15px; margin-left:5px;}
.banner-link i {margin-right:5px;}
.banner-link:hover {background:#1f8d1c;}

#filter {margin-bottom:10px; border-top:1px dotted #ccc; padding:20px 0 10px 0;}
#filter input[type=text], #filter select {border:1px solid #ddd; padding:5px; width:200px;}
#filter input[type=submit] {background:#63B768; border:0; padding:5px 20px; color:#fff;}
#filter input[type=submit]:hover {background:#36A056; cursor:pointer;}

#banner form {background:#fff; padding:20px; border:1px solid #ddd; margin-bottom:20px;}
#banner form label {display:block; float:left; width:130px;}
#banner form .input {margin-bottom:5px;}
#banner form .existing {margin-left:130px; margin-top:10px;}
#banner form .submit input {margin-left:130px; border:0; -moz-appearance: none; -webkit-appearance:none; font-size:100%; background:#4cb349; color:#fff; text-decoration:none; padding:10px 15px;}
#banner form .submit input:hover {background:#36A056; cursor:pointer;}

#pagenums .text {float:left; margin-top:10px;}
#pagenums ul {float:right; margin:0 0 20px 0; padding:0; list-style:none; overflow:auto; border-left:1px solid #ddd;}
#pagenums ul li {display:inline; padding-left:3px;}
#pagenums ul li a, #pagenums ul li.current {display:block; float:left; border:1px solid #ddd; border-left:0; padding:10px 15px; background:#fff; text-decoration:none; color:#333;}
#pagenums ul li a:hover {background:#eee;}
#pagenums ul li a.current, #pagenums ul li.current {background:#578EBE; color:#fff;}

table {width:100%; border-left:1px solid #ddd; border-bottom:1px solid #ddd; margin-bottom:20px;}
table th {background:#eee; font-size:11px; padding:10px; border:1px solid #ddd; border-width:1px 1px 0 0;}
table th.small {width:60px;}
table td {background:#fff; padding:10px; border:1px solid #ddd; border-width:1px 1px 0 0; text-align:center;}
table td ul {margin:0; padding:0; list-style:none;}
table td ul li {display:inline-block;}
table td img {display:block; margin:0 auto; max-height:60px;}
table td a img {border:0;}
table tr.dark td {background:#f7f7f7;}
table tr:hover td {background:#fdffe5;}
table td.actions {width:120px;}
table td.actions a {font-size:110%; color:#333; padding:5px 5px; margin-bottom:5px; display:inline-block;}
table td.actions a:hover {background:#dc3131; color:#fff; border-radius:3px;}
table td.actions a.invoiced {color:#ccc !important;}
table tr.refund td {color:#f00; font-style:italic;}
table tr td.alignLeft {text-align:left;}
table tr td.indent {padding-left:20px;}
table tr td.indent span {margin-right:5px; color:#888;}
table tr td.not-visible {color:#aaa;}

.form-wrapper {background:#fff; padding:20px;}

.tabber {margin:0; padding:0; list-style:none; height:36px; border-bottom:1px solid #eee;}
.tabber li {float:left;}
.tabber li a {display:block; padding:10px 20px; border-bottom:1px solid #eee; text-decoration:none; color:#888; text-transform:uppercase;}
.tabber li a:hover, .tabber li a:focus {border-bottom:3px solid #F27474;}
.tabber li a.active {border-bottom:3px solid #dc3131;}

.req {color:#f00;}
.note {font-size:11px;}

.stdForm .input {overflow:auto; margin-bottom:5px;}
.stdForm .input label {display:block; float:left; width:13%; margin-top:10px;}
.stdForm .input input {font:inherit; padding:10px; width:84%; border:1px solid #ddd;}
.stdForm .input select {font:inherit; padding:10px; border:1px solid #ddd;}
.stdForm .input textarea {font:inherit; padding:10px; border:1px solid #ddd; width:84%; height:400px;}
.mce-tinymce {margin-left:13% !important; width:85% !important; }
.stdForm .input .error {border:1px dashed #f00; background:#FFF4F4;}
.stdForm .required label:after {content:" *"; color:#f00;}
.stdForm .existing {margin-bottom:5px;}
.stdForm .existing span {float:left; width:13%; }
.stdForm .checkbox {margin-left:130px;margin-bottom:0; border-bottom:1px solid #eee; width:86%;}
.stdForm #checklist .checkbox {margin-left:0; width:100%;}
.stdForm .checkbox label {margin-top:0px; margin-left:10px; width:70%; cursor:pointer; padding:10px 0;}
.stdForm .checkbox:hover {background:#f7f7f7;}
.stdForm .checkbox input {width:auto; float:left; margin-top:11px;}
.stdForm .info {background:#e0e7ff; padding:10px; border:1px solid #c0cffe; text-align:center; margin:20px 0; font-size:80%; font-weight:bold; text-transform:uppercase; color:#47547e;}
.stdForm .existing {margin:20px 0 20px 130px;}
.stdForm .existing img {max-height:60px;}
.stdForm .existing #dp_image img {max-height:none;}
.stdForm .member-rating-select label {margin:6px 0;}
.stdForm .member-rating {display:inline-block; padding-top:5px;}

.stdForm .sortable {margin:0; padding:0; list-style:none;}
.stdForm .sortable li {padding:10px; background:#dc3131; width:30%; color:#fff; margin-bottom:3px;}
.stdForm #images.sortable li {background:#f7f7f7; color:#000;}
.stdForm #images.sortable li img {max-width:100%;}
.stdForm .sortable li:hover {background:#80C342; cursor:move;}

.forgotten-password a {margin-left:13%;}

ul.reorder {margin:0; padding:0; list-style:none;}
ul.reorder li img {border:1px solid #ddd; padding:5px;}
ul.reorder li img:hover {background:#dc3131; cursor:move; border:1px solid #dc3131;}
ul.reorder-text li {background:#f7f7f7; padding:10px; margin-bottom:5px; cursor:move;}

.buttons {margin:20px 0; padding-bottom:20px;}
.buttons ul {margin:0; padding:0; list-style:none; text-align:right;}
.buttons ul li {display:inline;}
.buttons ul li a {display:block; float:right; text-decoration:none; background:#578EBE; color:#fff; text-decoration:none; padding:10px 15px; margin-left:10px;}
.buttons ul li a.cancel {background:#ddd; color:#888;}
.buttons ul li a.cancel:hover {background:#888; color:#fff;}
.buttons ul li a.submitEdit {background:#e9ba4a; color:#623500;}
.buttons ul li a.submitEdit:hover {background:#e5a304;}
.buttons ul li a.submitExit {background:#5C9B4C;}
.buttons ul li a.submitExit:hover {background:#427733; text-decoration:underline;}

.transaction-buttons {margin:0 0 10px 0; padding:0; list-style:none; overflow:auto;}
.transaction-buttons li {float:left;}
.transaction-buttons li a {display:block; background:#ccc; padding:10px 20px; margin-right:5px; text-decoration:none;}
.transaction-buttons li a:hover {text-decoration:underline;}
.transaction-buttons li a span {margin-right:5px;}
.transaction-buttons li a.reconcile {color:#fff; background:#80C342;}
.transaction-buttons li a.reconcile:hover, .transaction-buttons li a.reconcile:focus {background:#dc3131;}
.transaction-buttons li a.unreconcile {background:#e9ba4a; color:#623500;}
.transaction-buttons li a.unreconcile:hover, .transaction-buttons li a.reconcile:focus {background:#e5a304;}
.transaction-buttons li a.delete {color:#fff; background:#c23b3b;}
.transaction-buttons li a.delete:hover, .transaction-buttons li a.reconcile:focus {background:#931c1c;}

td.icon span.fa-clock-o {background:#e9ba4a; padding:5px 6px; border-radius:3px; color:#623500;}
td.icon span.fa-check-circle-o {background:#80C342; padding:5px 6px; border-radius:3px; color:#fff;}

#submit input {background:#578EBE; color:#fff; border:0; padding:10px 15px; background:#4cb349; cursor:pointer;}
#submit input:hover {background:#1f8d1c;}

#images.sortable {margin:0; padding:0; list-style:none; overflow:auto;}
#images.sortable li {float:left; width:183px; padding:5px; border:1px solid #eee; margin-right:4px; margin-bottom:10px;}
#images.sortable li:hover {background:#f7f7f7; cursor:move;}
#images.sortable li .image {margin-bottom:10px;}
#images.sortable li .image img {display:block; margin:0 auto;}
#images.sortable li .alt input {padding:10px; width:160px;}
#images.sortable li .alt label {display:block; margin-bottom:5px;}
#images.sortable li .alt {margin-bottom:10px;}
#images.sortable li .del label {cursor:pointer;}

#uploader {background:#fff; padding:20px; margin-bottom:20px;}
#uploader .input {overflow:auto;}
#uploader .input label {display:block; float:left; width:120px; padding-top:15px;}
#uploader .input input {padding:10px; border:1px solid #ddd;}
#progress {height:3px; background:#eee; margin-top:20px;}
#progress .bar {height:3px; background:#5EC461;}

.add-aco {overflow:auto; margin-bottom:20px; width:100%;}
.add-aco .input {float:left; width:30%;}
.add-aco .input input {padding:10px; margin:0 5px; width:85%;}
.add-aco .submit input {border:0; padding:10px 20px; background:#4cb349; color:#fff;}
.add-aco .submit input:hover {cursor:pointer; background:#1f8d1c;}

.auto-complete {margin:0; padding:0; list-style:none; border:1px solid #ddd; border-bottom:0; position:absolute; z-index:10; margin-left:130px; margin-top:-6px; width:500px;}
.auto-complete li {padding:10px;border-bottom:1px solid #ddd; background:#fff; cursor:pointer;}
.auto-complete li:hover {background:#dc3131; color:#fff;}
.auto-complete li span.secondary {display:block; color:#777;}

.auto-complete-selection {margin-left:130px; overflow:auto; margin-bottom:5px;}
.deletable {float:left; margin-right:5px; margin-bottom:5px; background:#62bb47; color:#fff; padding:10px 40px 10px 10px; position:relative;}
.deletable span {position:absolute; top:0; right:0; padding:11px 10px; margin-left:5px; margin-top:1px; cursor:pointer; border-left:1px solid #8fd979;}
.deletable span:hover {background:#398e1f;}

.content-wrapper {background:#fff; padding:20px;}

h2 {font-weight:normal;}

.cancel-link {display:block; float:right; background:#c23b3b; color:#fff; padding:10px 20px; text-decoration:none;}
.cancel-link i {margin-right:5px;}
.cancel-link:focus, .cancel-link:hover {background:#931c1c;}

.stats.line-chart .placeholder {background:#f7f7f7; padding:30px 0; text-align:center;}
.stats.line-chart .placeholder h2 {margin-bottom:0; color:#aaa;}
.stats.line-chart .placeholder p {margin-top:5px; color:#aaa;}

.stats.two-col {overflow:auto; margin-top:20px;}
.stats.two-col .left {width:49%; float:left; }
.stats.two-col .right {width:49%; float:right;}
.stats.two-col .placeholder {background:#f7f7f7; text-align:center; padding:30px 0;}
.stats.two-col .placeholder h2 {margin-bottom:0; color:#aaa;}
.stats.two-col p {margin-top:5px; color:#aaa;}
.stats.two-col h2 {margin-top:0;}

.stats.three-col {overflow:auto; margin-top:20px;}
.stats.three-col .col1, .stats.three-col .col2,.stats.three-col .col3 {width:32%; float:left;}
.stats.three-col .col2 {margin:0 2%;}
.stats.three-col ul {margin:0; padding:0; list-style:none;}
.stats.three-col ul li {padding:10px 0 10px 10px; overflow:auto;}
.stats.three-col ul li:nth-child(odd) {background:#f7f7f7;}
.stats.three-col ul li.heading {background:#80C342; padding:10px; color:#fff;}
.stats.three-col ul li span.value {width:20%; float:right; text-align:center; border-left:1px solid #ddd;}
.stats.three-col ul li.heading span.value {border:0;}

.chart-holder {width:30%; height:160px; float:left;}
.dataset {margin:0; padding:0; list-style:none; float:left; margin-left:5%; width:65%;}
.dataset li {padding:10px 0 10px 10px; overflow:auto;}
.dataset li:nth-child(odd) {background:#f7f7f7;}
.dataset li.heading {background:#80C342; padding:10px; color:#fff;}
.dataset li span.color {display:block; width:1%; float:left; padding:10px; margin-right:3%;}
.dataset li span.color1 {background:#80C342;}
.dataset li span.color2 {background:#D7DFAA;}
.dataset li span.value {width:20%; float:right; text-align:center; border-left:1px solid #ddd;}
.dataset li.heading span.value {border:0;}

.notes_icon .notes {position:absolute; background:#fff; width:300px; margin-left:-320px; padding:20px; border:1px solid #ddd;}
.notes_icon .notes h3 {font-size:100%; font-weight:normal; background:#578EBE; color:#fff; padding:10px 0; cursor:pointer;}
.notes_icon .notes h3:hover {background:#4985B8;}
.notes_icon .notes textarea {background:#fff; border:1px solid #ddd; width:94%; padding:5px 2%; font:inherit;}
.notes_icon .notes button {color:#fff; background:#80C342; border:0; padding:10px 20px; margin-top:10px;}
.notes_icon .notes button:hover {background:#dc3131; cursor:pointer;}

.contact-info {overflow:auto; margin:20px 0; width:100%;}
.contact-details {float:left; background:#fff; padding:20px; border:1px solid #ddd; width:32%; box-sizing: border-box; text-align: center; color:#333 !important;}
.contact-details:nth-child(2) {margin:0 2%;}
.contact-details span {margin-right:5px;}

.back-link {display:block; margin-top:20px;}
.website-link {float:right; text-decoration:none;}
.website-link span {margin-right:5px; padding-top:8px;}
.website-link:hover {text-decoration: underline;}

.dynamic-tasks {clear:both; padding-top:10px; margin-bottom:20px;}
.dynamic-task {padding:20px 0; border-bottom:1px dotted #ccc;}
.dynamic-task .task-name {display:block; margin-bottom:5px;}
.dynamic-task .task-hrs {margin-right:10px; color:#777;}
.dynamic-task .task-details {color:#777;}
.dynamic-parts {clear:both; padding-top:10px; margin-bottom:20px;}
.dynamic-part {padding:20px 0; border-bottom:1px dotted #ccc;}
.dynamic-part .part-name {display:block; margin-bottom:5px;}
.dynamic-part .part-qty {margin-right:10px; color:#777;}
.dynamic-part .part-price {color:#777;}
.remove-link {float:right;}

.job-details {width:100%; background:#fff; padding:0px; box-sizing:border-box; margin:20px 0; border:1px solid #ddd;}
.job-details ul {margin:0; padding:0; list-style:none; overflow:auto;}
.job-details ul.three-col {margin-bottom:0px;}
.job-details ul.three-col li {width:33%; float:left; padding:20px; box-sizing: border-box; text-align: center; border-left:1px solid #ddd;}
.job-details ul.three-col li:first-child {border-left:0;}
.job-details ul.three-col li strong {margin-right:10px;}
.job-details ul.four-col li {width:25%; float:left; border-top:1px solid #ddd; padding:20px; box-sizing: border-box; border-left:1px solid #ddd; text-align:center;}
.job-details ul.four-col li:first-child {border-left:0;}
.job-details ul.four-col li strong {margin-right:10px;}

.two-col .tasks ul li {overflow:auto;}
.two-col .tasks ul .date {display:block; float:left; width:15%; text-align:center;}
.two-col .tasks ul .description {display:block; float:left; width:55%; text-align: text-align:center}
.two-col .tasks ul .hrs {display:block; float:left; width:15%; text-align:center;}
.two-col .tasks ul .kms {display:block; float:left; width:15%; text-align:center;}

.two-col .parts li {overflow:auto; padding:10px !important;}
.two-col li.headings {font-weight:bold;}
.two-col .parts li .description {width:55%; float:left;}
.two-col .parts li .qty, .two-col .parts li .price, .two-col .parts li .subtotal {width:15%; float:left; text-align:center;}
.two-col .parts li .subtotal {text-align:right;}
.two-col .totals {background:#f7f7f7; text-align:right;}
.two-col .totals strong {display:block; width:81% !important; text-align:right; padding-right:4%;}

.print-area {background:#fff; border:1px solid #ddd; padding:20px;}
.print-area table {padding:0; margin:0; background:#fff; border:0;}
.print-area table td, .print-area table th {border:0; background:#fff !important; vertical-align:top;}
.print-area table td .box {border:1px solid #000; padding:10px 10px 30px 10px; margin-bottom:20px;}

.print-area .one-col {width:98%; overflow:auto; padding:10px 1%;}
.print-area .one-col .label {display:block; width:15%; float:left; text-transform:uppercase;}
.print-area .one-col .value {width:85%; float:left; border-bottom:1px dotted #333;}

.print-area .four-col {overflow: auto; width:98%; padding:10px 1%;}
.print-area .four-col .item {width:25%; float:left; overflow:auto;}
.print-area .four-col .item .label {display:block; float:left; text-transform: uppercase; margin-right:10px;}
.print-area .four-col .item .value {display:block; float:left; width:55%; border-bottom:1px dotted #333;}

.print-area .two-col .item {width:98%; padding:10px 1%; overflow:auto;}
.print-area .two-col .item .label {text-transform: uppercase; display:block; width:15%; float:left;}
.print-area .two-col .item .value {border-bottom:1px dotted #333; display:block; width:85%; float:left;}

.print-area h1 {margin-top:20px; padding-left:1%;}
.print-area table.tasks {width:98%; margin:0 1%; border-top:1px solid #333; border-collapse: collapse;}
.print-area table.tasks th {text-transform: uppercase;}
.print-area table.tasks td {border-top:1px solid #333; border-left:1px solid #333;  padding:10px;}
.print-area table.tasks td:first-child {border-left:0; width:10%;}
.print-area table.tasks td:nth-child(3), .print-area table.tasks td:nth-child(4) {width:10%;}
.print-area table.tasks td:nth-child(2), .print-area table.tasks th:nth-child(2) {text-align:left;}

.print-area table.parts {width:98%; margin:0 1%; border-top:1px solid #333; border-collapse: collapse;}
.print-area table.parts th {text-transform: uppercase;}
.print-area table.parts td {border-top:1px solid #333; border-left:1px solid #333;  padding:10px;}
.print-area table.parts td:first-child {border-left:0;}
.print-area table.parts td:nth-child(2), .print-area table.parts td:nth-child(3), .print-area table.parts td:nth-child(4) {width:10%;}
.print-area table.parts td:nth-child(4), .print-area table.parts th:nth-child(4) {text-align:right;}
.print-area table.parts td:first-child, .print-area table.parts th:first-child {text-align:left;}
.print-area table.parts .totals td {text-align:right;}
.print-area table.parts .totals td:first-child {border-top:0;}
.print-area table.parts .totals td.subtotal {border-top:1px solid #333;}

/*MOBILE*/
@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 1000px) {
#accessibility {display:none; top:39px; background:#fff !important; padding-left:15px; padding-bottom:10px; position:absolute !important; min-height:200px;}
.mobile-access {display:block; background:#fff url(../img/access-icon.png) 5px 12px no-repeat; color:#000; padding:15px 10px 15px 35px; font-family:arial !important; font-size:120%;}
.mobile-access:hover, .mobile-access:focus {display:block; background:#fff url(../img/access-icon.png) 5px 12px no-repeat; color:#000; padding:15px 10px 15px 35px; font-family:arial !important; font-size:120%;}
#accessibility ul.accessibility li {float:none;}
#accessibility li.separator {display:none;}
#accessibility .accessibility li a {display:block; float:none;}
.font-theme {float:none !important; padding-left:20px; padding-bottom:10px;}
.font-theme ul {clear:both;}

.mobile-menu {display:block; text-align:left; float:none; color:#999; padding:14px 5%; text-decoration:none; width:90%; border:0;}
.mobile-menu span.fa {margin-right:10px;}
#menu {display:none; width:100%;}
nav ul {z-index:1000;  width:100%;}
nav ul li {display:block !important;}
nav ul li a {display:block; background:#111; text-align:left; width:90%; padding:14px 5%; color:#999 !important;}

nav, .content, .blog_block, footer, .footer_links, .center_copy, .breadcrumb-search ul.breadcrumbs {width:100%;}

#left {float:none; width:100%; min-height:0 !important;}
#right {float:none; width:100%;}

.two-col .box {width:100%; margin-bottom:20px;}
.two-col .dashboard-alerts ul li a {overflow:auto;}
.two-col .dashboard-jobs li span.status {width:10%;}
.two-col .dashboard-jobs li span.date {width:30%; text-align:center;}
.two-col .dashboard-jobs li span.name {width:30%; text-align:left;}

form input, form select, form textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; width:100% !important; padding:10px 2% !important;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
form .input label {display:block; width:100% !important; magin-bottom:5px;}
form input[type=checkbox] {width:15px !important; height:15px !important; padding:0 !important; float:left;}
form .checkbox label {float:left; width:90%; border:0; padding:0;}

.text-center {text-align:center;}
.forgotten-password a {margin-left:0 !important; padding-left:0;}

.alert-panel {top:45px; right:0;}
.alert-panel a {padding:14px 19px;}

header ul {display:none;}

.summary-boxes .box {width:48%; margin-bottom:8px;}
canvas {width:100% !important; height:200px !important;}

table tr td.actions {width:25% !important;}
table tr td.actions-large {width:40% !important;}
table tr th.size0 {width:25px;}

#pagenums {overflow:auto; margin-bottom:20px;}
#pagenums ul {float:none; margin:0 auto;}
#pagenums .text {float:none; }

h1 span.smalltext {display:block;}
form select {border:1px solid #ddd; padding:10px; background:#fff;}

.buttons ul li a {margin-bottom:10px;}

.add-link {margin-bottom:20px;}
.contact-details {width:100%; float:none; margin:0 0 10px 0 !important;}
.one-col .inner ul li strong, .two-col .inner ul li strong {width:50% !important;}
  
.website-link {float:none; display:block; background:#eee; color:#777; padding:10px 10px 15px 10px !important; margin-bottom:20px; text-align:center;}

.job-form .tabber {display:none;}
.job-form .date select {width:auto !important; padding:20px !important;}
.job-form .input input, .job-form .input textarea, .job-form .input select {padding:20px !important;}
.job-form #tasks, .job-form #parts {display:block !important; overflow:auto;}
.job-form #general h2, .job-form #general p {position:absolute; left:-9999px;}
.job-form .input label {position:absolute; left:-9999px;}
.job-form .date label, .additional label {position:static !important; left:0 !important;}

.btn-add {display:block; float:left; padding:15px; background:#4cb349; color:#fff; text-decoration:none; text-transform: uppercase; }
.btn-add span {margin-right:5px;}

.buttons ul li a {width:100%; float:none; box-sizing: border-box; text-align:center; padding:15px; margin:0 0 5px 0;}

.add-task-form {}
.pop-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.7;}
.pop-content {position:absolute; top:50px; left:5%; right:5%; background:#fff; box-shadow:0 0 5px #000; box-sizing: border-box; padding:20px;}
.pop-content h3 {margin-top:0;}
.pop-content .input input {padding:20px !important;}
.pop-content .additional .input label {float:left !important; width:40% !important; text-transform: uppercase; text-align:right; padding:13px 5%;}
.pop-content .additional .input input, .pop-content .additional .input select {float:left !important; width:50% !important;}

.btn-secondary {display:block; box-sizing: border-box; padding:20px; background:#4cb349; color:#fff; text-decoration:none; text-align:center; text-transform: uppercase; margin:10px 0;}
.btn-cancel {display:block; box-sizing: border-box; padding:20px; background:#ddd; color:#777; text-decoration:none; text-align:center; text-transform: uppercase; margin:10px 0;}

.dynamic-buttons {overflow:auto; margin:20px 0;}
.add-task {width:48%; float:left; padding:20px 0; margin-right:4%; text-align:center;}
.add-part {width:48%; float:left; padding:20px 0; text-align:center;}

#tasks h2, #parts h2 {margin-bottom:0;}

.auto-complete {margin-left:0; font-size:inherit; width:78% !important; box-sizing:border-box;}
.job-details ul.three-col li {width:100%; border-left:0; text-align:left; border-bottom:1px solid #ddd;}
.job-details ul.four-col li strong {display:block; text-align:center; margin-right:0;}
.job-details ul.four-col li {border-top:0;}

.two-col .parts li .description {width:35%;}
.two-col .parts li .price, .two-col .parts li .subtotal {width:25%;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {

}

@media only print {
	header, #left, #breadcrumbs, footer {display:none;}
	#right, .print-area {width:100%; float:none; border:0; padding:0; font-size:100% !important;}
	.one-col, .item {padding-left:0 !important; padding-right:0 !important;}
}