* {margin: 0; padding: 0;}
html {background:#daecba;}
body {background:#daecba; font-family: Helvetica, Arial, Courier, sans-serif; color:#222; font-size:62.5%;}
h1 {font-size:2.6em; margin-bottom:5px; color:#3b5a11;}
h2 {margin-bottom:10px; font-size:2.1em;}
h3 {margin-bottom:10px; font-size:1.8em; color:#4a7015;}
h4 {margin-bottom:10px; font-size:1.5em;}
h5 {margin-bottom:10px; font-size:1.3em;}
h6 {margin-bottom:10px; font-size:1.3em;}
h6 strong {position:relative; top:-5px;}
a {outline: none;}

img {border:0;}

.fl {float:left;}
.fr {float:right;}

img.fl {display: block; float:left;}
img.fr {display: block; float:right;}

p {font-size:1.4em; line-height:1.4em; margin-bottom:10px;}
ul, ol {margin:0 0 10px 20px;}
	ul li, ol li {font-size:1.4em; line-height:1.4em; margin-bottom:10px; margin-left:-10px; padding-left:20px; list-style-type:none;}	
	ol li {list-style-image:none;}
	
	
/*HEADER*/
#headerBack {background:#fff; border-bottom:1px solid #ccc;}
#logo {float:left; background:url(/images/kustomlogo.png); width:146px; height:40px; text-indent:-9999px; margin: 5px 0 0 20px;}
div#login {float:right; padding:0 20px; font-size:1.2em; margin:10px;} 

/*CONTENT*/
#wrapper {border-radius: 10px; box-shadow: 3px 3px 12px #888; -moz-box-shadow:3px 3px 12px #888; -webkit-box-shadow:3px 3px 12px #888; position:relative; margin:20px; overflow:hidden; min-height:430px;  -moz-border-radius:10px; -webkit-border-radius:10px; background: #f2f2f2; background-repeat:repeat-y; background-position:left top; padding:10px 10px 10px 10px; }
#content {padding:10px 10px 10px 10px; background:#f7f7f7; border:1px solid #ddd;}

#notification {border:1px solid #ccc; margin:0 auto; width:70%; background:#fff; overflow:hidden; padding:20px;}
#notification img {display:block; float:left; margin-right:20px;}
#notification span {font-size:2em; margin-top:20px; display:block; float:left;}

#notification_show {border:1px solid #ccc; margin:0 auto; width:70%; background:#fff; overflow:hidden; padding:20px;}
#notification_show img {display:block; float:left; margin-right:20px;}
#notification_show span {font-size:2em; margin-top:20px; display:block; float:left;}

.viewCont {border: 1px solid #ddd; color:#444; padding:10px; float:left; margin:0 10px 10px 0; display:inline-block; background:#fff; border-radius: 0 0 7px 7px; -moz-border-radius:0 0 7px 7px; -webkit-border-radius:0 0 7px 7px; width:92%}
#map {display:block; width:300px; margin: 0 0 10px 0px; border: 1px solid #ddd;}
.viewCont h4 {margin-bottom:0; font-size:3em;}
.viewCont h5 {font-size:2em;font-weight:normal;}
.sectionheader {background:url(/images/sectionheader2.png); height:15px; padding:5px 8px 6px;; font-size:1.4em; color:#fff; font-weight:bold; margin:-10px -10px 10px; text-shadow: 0 1px 0 #888;}

#colwide .viewCont {width:auto;}

#editjobBtn {background:url(images/editjobBtn.png); width:132px; height:30px; text-indent:-9999px; display:block; background-position: 0 100%; float:right; margin-bottom:10px;}
a#editjobBtn:hover {background-position:0 0;}

#paginate {overflow:hidden; margin-top:10px;}
#paginate a {display:block; float:left; margin: 0 2px; font-size:1.2em; padding:2px 5px; border:1px solid #ccc; text-decoration:none; background:#f0f0f0; color:#333}
#paginate a:hover {background:#daecba;}
#paginate a.currpage {background:#ccc;}

#goBack {display:block; font-size:1.3em; font-weight:bold; float:right; padding: 10px; background:#daecba; border: 1px solid #ccc; color:#3b5a11; text-decoration:none;}
#goBack:hover {background:#97c542;}

#sortLetters {margin-bottom: 10px; float: left;}
.sortLetter {padding: 2px 4px 0; margin-right:3px; background:#efefef; font-weight: bold; font-size: 1.3em; border:1px solid #c7c7c7; color:#2b2b2b; text-decoration: none;}
	.sortLetter:hover {background:#fff;}

.highlight { background-color: yellow }

/*=====================================
======= LOG IN
=====================================*/
#login {float:right;}
#loginWrapper, #resetWrapper {background:#fff; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; width:600px; margin: 50px auto; padding:20px;}
#biglogo {display:block; margin:0 auto;}
#loginWrapper #loginForm, #resetWrapper #loginForm {margin: 0 auto; width:410px; overflow: visible;}
#loginWrapper #registerForm, #resetWrapper #registerForm {margin: 0 auto; width:400px;}
#loginWrapper #loginForm input.login , #loginWrapper #registerForm input.login {font-size:1.6em; height:1.5em; line-height:1.8em; margin: 4px 0 10px; padding: 5px 0 0 5px; position:relative; width:195px; float:right;}
#resetWrapper #loginForm input.login {font-size:1em; height:1em; line-height:1.8em; margin: 4px 0 10px; padding: 5px 0 0 5px; position:relative; width:195px; float:right;}
#loginWrapper label {font-size:1.5em; font-weight:bold; margin-top:13px; text-align:right; width:185px; display:block; float:left;}
#resetWrapper label {font-size:1em; font-weight:bold; text-align:right; width:185px; display:block; float:left;}
#loginWrapper p, #resetWrapper p {clear: both;}
#loginWrapper #loginBtn, #resetWrapper #loginBtn {border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius:4px; background-color:#96b03d; border: medium none; color:#eee; cursor:pointer; font-size:1.4em; font-weight:bold; padding: 6px 20px; text-align:center; position: relative; top:20px;}
#loginWrapper input[type="checkbox"] {width:auto; margin:15px 0 0 15px;}
#loginWrapper small {font-weight:normal; line-height:.5em; font-size:.8em; position:relative; top:7px; left:25px;}
#loginWrapper span {line-height:.4em;}
.adminform label {display:block; float:left; margin-right: 10px; text-align:right; width:130px;}

#forgotpasswordLink {font-size: .8em; float: left; position: relative; top:16px; left:203px;}

/*FORMS*/
form {overflow:hidden;}
fieldset {border:1px solid #ccc; background:#fff; padding:10px; margin-bottom:10px;}
fieldset p {height:20px; width:500px;}
fieldset.wide p {height:auto; width:auto;}
label {display:block; float:left; margin-right:10px; text-align:right; width:115px;}
input {float: left;}
select {float: left;}
#clientinfo label {width:100px;}

.job_block {float:left;}

.jobFieldset {margin-right:10px; margin-bottom:10px;}
	.jobFieldset p {float: left;}
	.jobFieldset textarea {width:auto; height:auto; float: left;}
	
#jobInfo p {float: none; width:auto;}
#jobInfo label {width:110px;}

#materialsComments p {float: none; height: auto; width: auto;}
#materialsComments textarea {float: none; height:100px; width: 200px;}
	
legend {font-weight:bold; font-size:1.2em;}
textarea {width:200px; height:100px;}
.numInput {width:50px; float: none;}

.required_indicate {background: red; height:19px; width:5px; display: block; float: left; margin-left: 10px;}
#passwordmatch, #validzip, #validphone {float: left; margin-left:10px; font-size: .8em; display: none; margin-left:10px;}
#newuser_form, #editcontact_form, #editrole_form, #newcustomer_form, #edituser_form{overflow: hidden;}

.contactform_block, .customerform_block {float: left; width: auto; margin-right:10px;}
	.contactform_block input[type="checkbox"], .customerform_block input[type="checkbox"], #newuser_form input[type="checkbox"], #edituser_form input[type="checkbox"], .role input[type="checkbox"] {margin:2px 5px 0 160px;}
	.contactform_block input[type="radio"], .customerform_block input[type="radio"], #newuser_form input[type="radio"], #edituser_form input[type="radio"], .role input[type="radio"] {margin:2px 5px 0 160px;}
	.contactform_block p, .customerform_block p {width:auto;}

.attachments {}

.wideFieldset label {width:150px}

#notes {width:447px;}
#attachments {width:447px;}

#jobInfo {width:301px; float: left}

#materialsForm {width:200px; float: left;}

#materialsComments {width:392px;}
#materialInstalled, #returnedBundles, #itemsNotAccountedFor, #evaluatorChecklist { float: left;}
	#materialInstalled table, #returnedBundles table, #itemsNotAccountedFor table, #evaluatorChecklist table {width:auto;}

#materials, #materialInstalled {min-height:410px;}
#customerblock1 label {width:75px}
#customerblock2 label {width:130px}

/*=====================================
======= NOTES
=====================================*/

.note {cursor: pointer;}
.note td:first-child {width:300px;}
#noteblock {clear: both; height:auto; width:auto;}
#noteblock label {width:75px;}
#noteblock textarea {width:600px;}

#btn_seeAll {background:url(/images/btn_seeall.png); width:80px; height:25px; text-indent: -9999px; display: block;}	
	#btn_seeAll:hover {background-position: 0 100%;}

#noteform {height:210px;}
#noteform textarea {width:325px; height:145px;}

#notes textarea {width:300px; height: 150px;}
#notes p {height:auto; width:auto;}
#notes p label {width: auto;}

#notesHolder {float: left;}

#shownote {width:500px; height:400px; overflow-y: auto;}
#shownote textarea {width:450px; height:350px;}

#noteListWrap {width:600px;}
.noteList {border: 1px solid #ccc; background: #fafafa; padding: 5px; margin-bottom: 10px;}

#customerform {display: none;}
#customerform_toggle {display: block; width: 150px; height:35px; background: url("/images/new_customer.png"); cursor:pointer; float: right;}
#customerform_toggle:hover {background-position: 0 100%;}

.viewJobColLeft {width:385px; float: left;}
.viewJobColRight {width:210px; float:right;}
.viewJobCol {width:210px; float: left;}

#customers_page #notesTable {width:800px;}

/*=====================================
======= EMAIL
=====================================*/
#emailWrap {overflow-y: auto; overflow-x: hidden; margin-bottom: 10px; width:600px; max-height: 500px;}
#newemail_fieldset {overflow: hidden;}
	#newemail_fieldset p {height: auto; width: auto; min-height: 20px;}
	#newemail_fieldset textarea {width:400px; float: left; margin-left: 0px; margin-top: 0px;}
.emailAttachment {margin-right:5px;}
#emailAttachmentList {border: 1px solid #ccc; background:#fafafa; padding: 5px; margin: 10px 0; max-height: 100px; overflow-y: auto;}

/*=====================================
======= WORKORDER
=====================================*/
#workorderWrap {overflow-y: auto; margin-bottom: 10px;}
#workorderWrap p {height: auto;}
	#workorderWrap p#date {height:20px;}
	#workorderWrap p#date label {float: left;}
#workorderWrap label {float: none;}
#workorderTable {width:auto;}
	#workorderTable p {width:auto;}
	#workorderTable label {width:50px; float: left}
#scopeOfWork {width:500px; height:200px;}
#workorderNotes {width:500px; height:100px;}

/*=====================================
======= MESSAGES
=====================================*/
#messageList {max-height: 300px; overflow-y: auto;}
#messageWrap {font-size: 1.2em; min-width:600px; min-height:400px;}

#messageSubject {font-size:1.2em;border: 1px solid #ccc; background: #fafafa; padding:5px; margin-bottom: 10px;}
#messageBody {font-size:1.2em;border: 1px solid #ccc; background: #fafafa; padding:5px;}

.message td {cursor: pointer;}

/*=====================================
======= REMINDERS
=====================================*/

#remindersWrap {max-height: 220px; overflow-y: auto; margin-bottom: 10px;}
#reminders {float: left; width:255px;}
	.reminder {border:1px solid #ccc; background:#f2f2f2; margin:0 0 10px; padding:10px; overflow: hidden; position: relative;}
	.reminder p {margin-bottom: 0px;}
	.reminder_date {border: 1px solid #ccc; width:65px; float: left; margin-right: 10px;}
	.reminder_month {text-align: center; border-bottom: 1px solid #ccc; color: #fff; background-color: #990000; font-weight: bold; font-size: 1.2em; padding: 2px 0;text-shadow: 0 1px 0 #ee0000;}
	.reminder_day {font-size: 2em; text-align: center; font-weight: bold; background:#fff;}
	#dismiss_reminder {position: absolute; top: 5px; right: 5px; display: block;}
	


#reminderWrap {width:600px;}
	#reminder_subject {background: #fafafa; border: 1px solid #ccc; padding: 5px; margin: 10px; font-size: 2em; font-weight: bold;}
	#reminder_desc {background: #fafafa; border: 1px solid #ccc; padding: 5px; margin: 10px;}
	#reminder_datetime {font-size: .8em; font-weight: normal; float: right; display: block;}
	#reminder_addedinfo {background: #fafafa; border: 1px solid #ccc; padding: 5px; margin: 10px; font-size:1em;}
#newReminder {background:url(/images/btn_newreminder.png); width:80px; height:25px; text-indent: -9999px; display: block; float: right;}	
	#newReminder:hover {background-position: 0 100%;}
	#newreminder_fieldset {overflow: hidden;}
		#newreminder_fieldset p {height: auto; width: auto; min-height: 20px;}
		#newreminder_fieldset textarea {width:420px; float: left; margin-left: 0px; margin-top: 0px;}
	#dismiss_reminder{cursor: pointer;}
/*=====================================
======= XACTIMATE REQUESTED
=====================================*/
	.field {margin-bottom:10px;}
    .cb-na, .cb-requested, .cb-completed, .cb-na span, .cb-requested span, .cb-completed span { background: url(/images/switch.jpg) repeat-x; display: block; float: left; font-size:.9em;}
    #jobInfo label.cb-na, #jobInfo label.cb-requested, #jobInfo label.cb-completed {margin: auto; text-align: left; width: auto;}
    .cb-na span, .cb-requested span, .cb-completed span { line-height: 15px; display: block; background-repeat: no-repeat; font-weight: bold; }
    .cb-na span { background-position: left -47px; padding: 0 5px; }
    .cb-requested span { background-position: right 0px;padding: 0 10px; }
    .cb-completed span { background-position: right -93px;padding: 0 5px; }
    .cb-requested.selected { background-position: 0 -32px; }
    .cb-requested.selected span { background-position: right -32px; color: #fff; }
    .cb-na.selected { background-position: 0 -32px; }
    .cb-na.selected span { background-position: left -78px; color: #fff; }
    .cb-completed.selected { background-position: 0 -31px; }
    .cb-completed.selected span { background-position: right -124px; color: #fff; }
    .switch label { cursor: pointer; }
    .switch input { display: none; }

/*=====================================
======= DASHBOARD JOBS
=====================================*/
.dashJobs {width:410px; max-height: 200px; overflow-y: auto; float: left; border: 1px solid #ccc; padding: 10px; margin-right: 10px; margin-bottom: 10px;}
#dashJobTable tr {cursor: pointer;}
.dashboardSalesTable {width:432px; float: left; margin-right: 10px;}
	.dashboardSalesTable summary{display: block; font-size: 1.4em; font-weight: bold;}
.dashboardSalesTable tfoot {font-weight: bold;}

/*=====================================
======= BUTTONS
=====================================*/
.button {width:120px; height:35px; display: block; text-indent: -9999px; border:0; cursor:pointer;}
	#btn_save, .btn_save {background:url(images/btn_save.png);}
		#btn_save:hover, .btn_save:hover {background-position:0 100%;}
	#btn_newjob {background:url(images/btn_newjob.png);}
		#btn_newjob:hover {background-position:0 100%;}
	#btn_cancel {background:url(images/btn_cancel.png);}
		#btn_cancel:hover {background-position:0 100%;}
	#btn_delete {background:url(images/btn_delete.png);}
		#btn_delete:hover {background-position:0 100%;}
	#btn_print {background:url(images/btn_print.png); margin-top:5px;}
		#btn_print:hover {background-position:0 100%;}
	#btn_email {background:url(images/btn_email.png);}
		#btn_email:hover {background-position:0 100%;}
	#btn_send {background:url(images/btn_send.png);}
		#btn_send:hover {background-position:0 100%;}

.spaced {float:left; margin-right:70px;}


/*=====================================
======= NAVIGATION
=====================================*/

#navigation {margin:5px 20px -30px 40px; position: relative; overflow: hidden;}
	.navigation_button {float:left;}

	#dashboard_btn {background: url(/images/nav_dashboard.png); width:160px; height:50px; text-indent:-9999px; display: block;}
		a#dashboard_btn:hover {background-position:0 50px;}
	#customers_btn {background: url(/images/nav_customers.png); width:160px; height:50px; text-indent:-9999px; display: block;}
		a#customers_btn:hover {background-position:0 50px;}
	#jobs_btn {background: url(/images/nav_jobs.png); width:160px; height:50px; text-indent:-9999px; display: block;}
		a#jobs_btn:hover {background-position:0 50px;}
	#projects_btn {background: url(/images/nav_projects.png); width:160px; height:50px; text-indent:-9999px; display: block; position: relative; top:2px;}
		a#projects_btn:hover {background-position:0 50px;}
	#reports_btn {background: url(/images/nav_reports.png); width:160px; height:50px; text-indent:-9999px; display: block; position: relative; top:2px;}
		a#reports_btn:hover {background-position:0 50px;}
	#support_btn {background: url(/images/nav_support.png); width:160px; height:50px; text-indent:-9999px; display: block; right: 20px; position: relative; float: right;}
		a#support_btn:hover {background-position:0 50px;}
		
	#admin_btn {background: url(/images/nav_admin.png); width:160px; height:50px; text-indent:-9999px; display: block; right: 20px; position: relative; float: right;}
		a#admin_btn:hover {background-position:0 50px;}
		
	#dashboard_page #navigation #dashboard_btn {background-position: 0 50px;}
	#customers_page #navigation #customers_btn {background-position: 0 50px;}
	#jobs_page #navigation #jobs_btn {background-position: 0 50px;}
	#projects_page #navigation #projects_btn {background-position: 0 50px;}
	#reports_page #navigation #reports_btn {background-position: 0 50px;}
	#support_page #navigation #support_btn {background-position: 0 50px;}
	#admin_page #navigation #admin_btn {background-position: 0 50px;}
	
	
/*TABLE*/
table {background:#fff; border-color:#dedede #dedede -moz-use-text-color; border-style: solid solid none; border-width:1px 1px medium 0; width:100%; vertical-align:top; border-collapse:separate; border-spacing:0;}
tr {vertical-align:top;}
th {text-shadow: 0 1px 0 #fff; font-weight:bold; padding: 8px; text-align:center; vertical-align:middle; background:#e6e6e6; border-bottom: 1px solid #dedede; border-left:1px solid #ccc;}
td {border-left:1px solid #ccc; color:#616161; padding:6px; text-align:left; border-bottom: 1px solid #d3d3de; vertical-align: middle;}
tr.even {background:#f4f4f4;}
tr.highlight {background: #fffccc;}
tr.totalRow {font-size:1.4em; font-weight:bold;}
	

#commission_wrap {width:100%}
#commission_wrap .cols {width:45%; float:left;}
#commission_wrap .cols:first-child {margin-right: 10px;}
#commission_wrap .sectionheader {margin:0; width:100%;}
#commission_wrap table {width:100%;}


	/*=====================================
======= TABLE SORTING
=====================================*/
table.tablesorter thead tr .header {
	background-image: url(/images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/images/desc.gif);
}

/*=====================================
======= THUMBNAILS
=====================================*/
#thumbnailWrap {float:left; width:100%; margin-bottom: 10px;}
#thumbnails {max-height: 200px; overflow-y: auto;}
.gallery {background: #dbedbd; border:5px solid #dbedbd; display: block; float: left; height:150px; margin: 0 15px 15px 0;}

/*=====================================
======= FILTER
=====================================*/
#filterWrap {position: relative; float: right; margin-right: 10px;}
#filterToggle {background: url(/images/btn_filter.png); text-indent: -9999px; width:100px; height:25px;}
#filterStatus {width: 200px; position: absolute; border: 1px solid #ccc; background: #f0f0f0; box-shadow: 2px 2px 10px #888; -moz-box-shadow:2px 2px 10px #888; -webkit-box-shadow:2px 2px 10px #888; padding:5px 0;}
#filterStatus ul {margin: 0;}
#filterStatus ul li {margin: 0; background: #f0f0f0;}
#filterStatus ul li input {margin-right: 5px;}

/*=====================================
======= EVENTS
=====================================*/
#eventsWrapper {width:714px; float: left; margin-right: 10px;}
#events {border:1px solid #ccc; background:#f2f2f2; margin:0 0 10px; padding:10px;overflow: hidden;}
.event {background:#fff; border: 1px solid #ccc; margin-right: 10px; padding: 10px;position: relative; overflow: hidden; float: left; width:20%}

.calDate {padding: 5px; background:#eee; border: 1px solid #ccc; float: left; margin-right:10px;}
.calMonth {display: block; font-size: 1.5em;}
.calDay {font-size:2em; font-weight: bold; float: left;}

.calDesc {float: left;}
.calTitle {font-size: 1em; font-weight: bold;}
.calTime {display: block;}
.calContent {font-size:.8em;}

.day {float:left; margin-right:10px; border: 1px solid #ccc; width: 150px; padding: 10px; max-height: 200px; overflow-y: auto; font-size:14px; padding-right:1px; text-align:left;}
.dayHeader {background:#ddd; padding: 10px 10px 5px; margin: -10px -1px 5px -10px; border-bottom: 1px solid #ccc;}
.dayWeek {font-weight: bold; font-size: 1.3em; display: block;}
.dayDate {display: block;}

/*=====================================
======= TICKETS
=====================================*/
.view_ticket {width:16px; text-align:center}
.view_ticket a {text-decoration: none;}
.view_ticket a:hover {text-decoration: underline;}
.view_ticket span {position: relative; top: -4px; left:4px;}
#ticketFields textarea {width:600px; height:200px;}
#ticketFields p {width: auto;}

#comments_wrap label {font-size:1.4em;}
#comments {float: left;}

.ticket_comment {background:#fafafa; border: 1px solid #ccc; padding: 5px; margin: 10px 0; width:400px;}
	.comment_addedby {float: left;}
	.comment_addeddate {float: right;}
	
	.comment_text {font-size:1.2em; margin: 5px;}
	#ticketFields #ticket_comment {width:410px; height:100px;}
	
/*=====================================
======= ATTACHMENTS
=====================================*/
#attachmentList {border:1px solid #ccc; margin-bottom: 10px; max-height:200px; overflow-y: auto;}
#attachmentList a {font-size:1.2em; display: block; padding:5px; text-decoration: none;}
	
#attachmentList a[href$='.pdf'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_acrobat.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.doc'], #attachmentList a[href$='.docx'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_word.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.xls'], #attachmentList a[href$='.xlsx'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_excel.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.csv'] { padding-left:30px; line-height:18px; background:url(/images/icons/table_go.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.ppp'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_powerpoint.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.pub'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_paint.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.zip'] { padding-left:30px; line-height:18px; background:url(/images/icons/page_white_zip.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}
#attachmentList a[href$='.jpg'], #attachmentList a[href$='.png'], #attachmentList a[href$='.JPG'], #attachmentList a[href$='.jpeg'], #attachmentList a[href$='.JPEG'] { padding-left:30px; line-height:18px; background:url(/images/icons/image.png) center left no-repeat #f0f0f0; background-position: 10px 5px;}

#attachmentList a[href$='.pdf'], #attachmentList a[href$='.doc'], #attachmentList a[href$='.docx'], #attachmentList a[href$='.xls'], #attachmentList a[href$='.xlsx'], #attachmentList a[href$='.csv'], #attachmentList a[href$='.ppp'], #attachmentList a[href$='.pub'], #attachmentList a[href$='.jpg'], #attachmentList a[href$='.png']   {border-bottom:none;}
#attachmentList a[href$='.pdf']:hover, #attachmentList a[href$='.doc']:hover, #attachmentList a[href$='.docx']:hover, #attachmentList a[href$='.xls']:hover, #attachmentList a[href$='.xlsx']:hover, #attachmentList a[href$='.csv']:hover, #attachmentList a[href$='.ppp']:hover, #attachmentList a[href$='.pub']:hover, #attachmentList a[href$='.jpg']:hover, #attachmentList a[href$='.png']:hover, #attachmentList a[href$='.zip']:hover, #attachmentList a[href$='.JPG']:hover, #attachmentList a[href$='.jpeg']:hover, #attachmentList a[href$='.JPEG']:hover {background-color:#fffccc;}

#attachmentList a.highlight {background: #fffccc}
#attachmentList a.odd {background-color:#fafafa}

span#upload {overflow: hidden;}

span#upload .uploadifyQueueItem {width:200px;}
span#upload.button object {position: absolute; left:0;}
span#upload.button #file_uploadQueue img {position: relative;}
span#upload #uploadFiles {background:url(/images/btn_attach.png); width:80px; height:25px; text-indent: -9999px;}

/*=====================================
======= ADMIN
=====================================*/
	
	#notification {display: none;}
	img.status {margin-right:5px; vertical-align: middle;}
	
	#notification #countdown span {float: none; font-size: 1em; display: inline;}
	#notification_show #countdown span {float: none; font-size: 1em; display: inline;}
	
	/*ANNOUNCEMENTS*/
#newAnnouncement textarea {width:100%; height:200px;}
#announcements {width:68%; float: left; margin-right:10px;}
.announcement {border:1px solid #ccc; background:#f2f2f2; margin:0 0 10px; padding:10px;}
	.announcement h2 {font-size: 1.5em;}
	.announcement p {font-size:1.2em;}
	
	/*KOZ KORNER*/
	#newkozkorner textarea {width:100%; height:200px;}
	.kozkorner {border: 1px solid #ccc; background:#f2f2f2; margin: 0 0 10px; padding: 10px; overflow: hidden;}
	.kozkorner h2 {font-size: 1.5em;}
	.kozkorner p {font-size:1.2em; float: left;}
	
	/*SIDEBAR*/
#sideBar {border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width:200px; border:1px solid #ddd; background:#fff; float: left; margin-right: 15px; min-height:300px;}
	#sideBarCont {margin:10px;}
	#sideBarCont .title {cursor:pointer; display:block; font-weight:bold; border-bottom:1px solid #c7c7c7; background:#97c542; color:#fff; padding:6px; margin-bottom:4px; margin-top:20px; font-size:1.2em;}
	#sideBarCont li {font-size:1em; line-height:1em; list-style-type:none; margin:auto; background:none; padding:0;}
	#sideBarCont .sidebutton, #projectOptionsWrap .sidebutton {position:relative; background:#f0f0f0; margin-bottom:10px; border:1px solid #ddd; color:#505f2a; font-weight:bold; outline: medium none; padding: 4px; display:block; text-decoration:none;}
	#sideBarCont .sidebutton:hover, #projectOptionsWrap .sidebutton:hover {background:#fcfcfc; border:1px solid #ccc; color:#404e10;}
	#sideBarCont .sidebutton img, #projectOptionsWrap .sidebutton img{margin-right:7px; vertical-align: middle;}

#importSteps {font-size:.8em; margin: 5px 5px 20px;}
#importSteps span {font-size:1.5em; border: 1px solid #ccc; padding: 5px; background: #fff;}
#importSteps .activeStep {color:#333; }
#importSteps .nextStep {color:#777;}
#importSteps .completedStep {color:#199500; background: #e8ffea;}

.typewrap {font-size: 1.2em; line-height: 1.5em;}
	#newrole_form .typewrap input {margin-left:10px;}
	 #editrole_form .typewrap input {margin-left:10px;}
	#newrole_form fieldset, #editrole_form fieldset {float: left; margin-right: 10px;}

/*=====================================
======= TIMEPICKER
=====================================*/

 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
 .ui-timepicker-div dl{ text-align: left; }
 .ui-timepicker-div dl dt{ height: 25px; }
 .ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
 .ui-timepicker-div td { font-size: 90%; }
 
/*=====================================
======= PROJECTS
=====================================*/ 

#projectMainWrap {float: left; width:76%; margin-right: 10px;}
	.projectWrap {padding: 10px; background:#fff; border: 1px solid #ccc; margin: 10px 0;}
		.projectWrap fieldset p {margin-bottom: 0; height: auto;}
	
	.projectName {float: left;}
	.editProject {display: block; float: right;}
	.projectDescription {}
	.projectDepartment {font-size:.6em; margin-left: 7px;}
	
	.projectTodo {font-size: 1.2em; display: block; padding: 5px; background:#fafafa; border: 1px solid #f0f0f0; margin: 0 0 10px;}
	.todoCompleted {text-decoration: line-through;}
#projectOptionsWrap {width:200px; float: left; padding: 10px 10px 1px 10px; background:#fff; border: 1px solid #ccc; margin: 10px 0 0;}
#projectSideWrap {width:225px; float: right;}

.projectStatus {font-size: .5em; padding-left: 10px; font-weight: normal; color: #ff0000;}

#completedProjects {width:200px; float: left; padding: 10px; background:#fff; border: 1px solid #ccc; margin: 10px 0 0; max-height: 400px; overflow-y: auto;}
	#completedProjects strong {font-size:1.4em;}
	#completedProjects .completedProject {background:#f0f0f0; border: 1px solid #ccc; padding: 5px; margin: 5px 0; overflow: hidden;}
		#completedProjects .projectName {float: left; display: block;}
		#completedProjects .dateCompleted {float: right; display: block;}
	
#unconfirmedProjects {width:200px; float: left; padding: 10px; background:#fff; border: 1px solid #ccc; margin: 10px 0 0; max-height: 200px; overflow-y: auto;}
	#unconfirmedProjects strong {font-size:1.4em;}
	#unconfirmedProjects .unconfirmedProject {background:#f0f0f0; border: 1px solid #ccc; padding: 5px; margin: 5px 0; overflow: hidden;}
		.confirmProject {float: right; vertical-align: middle; cursor: pointer;}
		#unconfirmedProjects .projectName {position: relative; top: 3px; display: block; float: left;}
	
.newTodoBtn {
display: block; width:50px;
text-align: center;
padding:5px; margin: 5px 0 0; cursor: pointer; border:1px solid #89ca00; font-weight: bold; text-decoration: none; color: #333;
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
.newTodoBtn:hover {background: #a0ea00; /* Old browsers */
background: -moz-linear-gradient(top,  #a0ea00 0%, #8bc600 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0ea00), color-stop(100%,#8bc600)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a0ea00 0%,#8bc600 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a0ea00 0%,#8bc600 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a0ea00 0%,#8bc600 100%); /* IE10+ */
background: linear-gradient(top,  #a0ea00 0%,#8bc600 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0ea00', endColorstr='#8bc600',GradientType=0 ); /* IE6-9 */
}
	.completeProjectBtn {display: block; width: 80px; height:25px; background:url('/images/icons/btn_complete.png'); cursor: pointer}
		.completeProjectBtn:hover {background-position: 0 100%;}
	
	.addScope {display: block; width: 80px; height:25px; background:url('/images/btn_attach.png'); cursor: pointer}
		.addScope:hover {background-position: 0 100%;}
	
	.showProject {display: block; float: left; margin-right: 10px;}
	
#newTodoWrap, #newProjectWrap, #viewProjectWrap {width:500px; height:450px;}
	#newTodoWrap fieldset p, #newProjectWrap fieldset p {height: auto;}
	#viewProjectWrap li {list-style-type: disc; margin-left: 0; padding-left: 0;}
	
	#viewProjectWrap table {font-size: 1.2em;}
	
	.todoAssigned {color: #888;}
	.todoCount {text-align: right; font-weight: bold;}
	
	.deleteTodo {background:url(/images/icons/delete.png); text-indent: -9999px; float: right; width: 20px; background-repeat: no-repeat; height: 20px; cursor: pointer;}
	.editTodo {background:url(/images/icons/page_white_edit.png); text-indent: -9999px; float: right; width: 20px; background-repeat: no-repeat; height: 20px; cursor: pointer;}
	
#changeDepartment {float: right;}
	#changeDepartment label {width: 140px;}	
	
	
	   #upload{
	margin:30px 200px; padding:15px;
	font-weight:bold; font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#f2f2f2;
	color:#3366cc;
	border:1px solid #ccc;
	width:150px;
	cursor:pointer !important;
	border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}
.darkbg{
	background:#ddd !important;
}
#status{
	font-family:Arial; padding:5px;
}
ul#files{ list-style:none; padding:0; margin:0; }
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:180px; max-height:150px; }
.success{ background:#99f099; border:1px solid #339933; }
.error{ background:#f0c6c3; border:1px solid #cc6622; }

	
 /*=====================================
======= VIEW JOB
=====================================*/
#subArea {float:left; padding: 10px; width:270px; border: 1px solid #ccc; background:#fff;}
#subArea h4 {font-size: 2.7em; margin-bottom:0;}
#subArea h5 {font-size: 1.7em; font-weight: normal;}
#subArea h4.sideDivide {border-top: 2px solid #ccc; font-size:1.6em; margin-top:10px; padding: 10px 0;}
#subArea .button {background:none #f0f0f0; border:1px solid #ddd; color:#505f2a; display:block; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; outline:none; padding: 10px 10px 10px 26px; position: relative; text-decoration: none; height:auto; text-indent: 0; width:auto;}
	#subArea .button:hover {background:#fcfcfc; color:#404e10;}
#subArea .button img {left:5px; top: 7px; position: absolute;}
#subArea table {font-size:1.2em;}

#subArea ul li {background:none #f0f0f0; border:1px solid #ddd; color:#505f2a; display:block; font-size: 1em; margin-top: -5px; outline:none; padding: 5px 10px 5px 26px; position: relative; text-decoration: none; height:auto; text-indent: 0; width:auto;}

#mainArea {float: left; margin-left:10px; width:595px;}

#map_canvas {width:270px; height:250px;}
#main_map_canvas {width:100%; height:600px; margin-bottom:20px;}

 /*=====================================
======= CHANGELOG
=====================================*/
.changeentry {margin-bottom:10px; padding-bottom: 10px; border-bottom: 1px dashed #ccc;}
#changelog_page h2 {margin:10px 0 0;}
#changelog_page small {margin-left:10px;}
#changelog_page ul li {list-style-type:inherit; margin: 0 0 0 20px; padding: 0; font-size:14px;}