.header {
	width: 100%;
}

.login, .logout, .logindata, .userformLabel {
	display: block;
}

.login, .logout {
	float: none;
	text-align: center;
}

.logout {
	padding-left: 0px;
	background-image: none;
}

.userformLabel {
	margin-right: 0px;
}

input.userformButton {
	margin-right: 0px;
}

#usersubmit {
	margin-right: 0px;
}

.menu {
	display: none;
}

.leftcol, .rightcol, .leftcol-work, .rightcol-work {
	display: block;
}

.leftcol, .leftcol-work {
	float: left;
	width: 100%;
}

.rightcol, .rightcol-work {
	float: left;
	width: 100%;
}

.white-popup-block {
    max-width: 80%;
}

#hdrtitle {
	display: none;
}

#hdrtitlemobile {
	display: block;
}

.expandable {
	display: none;
	padding-top: 20px;
}

.superuserlist {
	display: none;
}

.superuserlist_mobile {
	display: block;
}

.task-menu-item {
	width: 40%; 
	display: inline-block; 
	vertical-align: top; 
	text-align: center; 
	padding: 10px 0px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	border-radius: 7px;
	cursor:pointer;
}

.task-menu-item.cols-1 {
	width: 80%;
}

.task-menu-item.cols-2 {
	width: 40%;
}

.task-menu-item.cols-3 {
	width: 30%;
}

.field-menu-button {
	width: 60%; 
	display: inline-block; 
	vertical-align: top; 
	text-align: center; 
	padding: 10px 0px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	border-radius: 7px;
	cursor:pointer;
	background-color: #b0d50f;
	margin-bottom: 10px;
}

@media (min-width: 536px) {

	.expandable {
		padding-left: 105px;
	}

}

@media (min-width: 570px) {

	#hdrtitlemobile {
		display: none;
	}

	#hdrtitle {
	display: block;
}

	.login, .logout, .logindata, .userformLabel {
		display: inline;
	}

	.login, .logout {
		float: right;
		text-align: left;
	}
	
	.logout {
		padding-left: 60px;
		background-image: url("../images/userimage.png");
		background-position: left top;
		background-size: 40px 40px;
		background-repeat: no-repeat;
	}
	
	input.userformButton {
		margin-right: 20px;
	}

	#usersubmit {
		margin-right: 20px;
	}

	.userformLabel {
		margin-right: 10px;
	}

	.leftcol, .rightcol {
		display: inline;
	}

	.white-popup-block {
		max-width: 550px;
	}

}

@media (min-width: 932px) {

	.leftcol-work, .rightcol-work, .leftcol, .rightcol {
		display: inline;
	}

	.leftcol-work {
		float: right;
		margin-left: -50%;
		margin-right: 0%;
		width: 50%;
	}

	.rightcol-work {
		float: left;
		margin-left: 0%;
		margin-right: -50%;
		width: 50%;
	}

	.leftcol {
		float: right;
		margin-left: -40%;
		margin-right: 10%;
		width: 40%;
	}

	.rightcol {
		float: left;
		margin-left: 10%;
		margin-right: -40%;
		width: 40%;
	}

	.task-menu-item {
		width: 20%; 
	}

	.field-menu-button {
		width: 30%; 
}

}

@media (min-width: 1417px) {

/* wrap on wide viewports once open */

	.ui-panel-page-content-open.ui-panel-page-content-position-left {
		margin-right: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-position-right {
		margin-left: 17em;
	}
	.ui-panel-page-content-open {
		width: auto;
	}

	/* disable "dismiss" on wide viewports */
	.ui-panel-dismiss {
		display: none;
	}

	/* same as the above but for panels with display mode "push" only */

	.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
		margin-right: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
		margin-left: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-display-push {
		width: auto;
	}

	.ui-panel-dismiss-display-push {
		display: none;
	}

	.superuserlist {
		display: block;
	}

	.superuserlist_mobile {
		display: none;
	}

}


/***********************************************************************************************
********                                                                               *********
******** responsive staff                                                              *********
********                                                                               *********
***********************************************************************************************/

.staffcontainer .listfield-container,
.staffcontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.staffcontainer .listfield-container-2,
.staffcontainer .listfield-container-3 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.staffcontainer #contact,
.staffcontainer #email,
.staffcontainer #phone,
.staffcontainer #name {
	display: none;
}

.staffcontainer #staff {
	display: inline-block;
}

@media (min-width: 736px) {

	.staffcontainer #staff {
		display: none;
	}

	.staffcontainer #name,
	.staffcontainer #contact {
		display: inline-block;
	}

	.staffcontainer .listfield-container,
	.staffcontainer .listfield-container-1,
	.staffcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}
		
}

@media (min-width: 941px) {

	.staffcontainer #phone,
	.staffcontainer #email {
		display: inline-table;
	}

	.staffcontainer #contact {
		display: none;
	}

	.staffcontainer .listfield-container,
	.staffcontainer .listfield-container-1,
	.staffcontainer .listfield-container-2,
	.staffcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

}


/***********************************************************************************************
********                                                                               *********
******** responsive clients                                                            *********
********                                                                               *********
***********************************************************************************************/

.clientcontainer .listfield-container,
.clientcontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.clientcontainer .listfield-container-2,
.clientcontainer .listfield-container-3 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.clientcontainer #address,
.clientcontainer #location,
.clientcontainer #name {
	display: none;
}

.clientcontainer #client {
	display: inline-block;
	width: 300px;
}

.clientcontainer .expandable .client,
.clientcontainer .expandable #serialno,
.clientcontainer .expandable #machine,
.clientcontainer .expandable #startdate {
	display: none;
}

@media (min-width: 736px) {

	.clientcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}

	.clientcontainer #client {
		display: none;
	}

	.clientcontainer #name,
	.clientcontainer #address {
		display: inline-table;
	}

	.clientcontainer .expandable #startdate {
		display: inline-table;
	}

}

@media (min-width: 1041px) {

	.clientcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

	.clientcontainer #location {
		display: inline-table;
	}

}


/***********************************************************************************************
********                                                                               *********
******** responsive activity                                                           *********
********                                                                               *********
***********************************************************************************************/

.activitycontainer .listfield-container,
.activitycontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.activitycontainer .listfield-container-2 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.activitycontainer #activity {
	display: inline-block;
}


/***********************************************************************************************
********                                                                               *********
******** responsive tasks                                                              *********
********                                                                               *********
***********************************************************************************************/

.taskcontainer .listfield-container,
.taskcontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.taskcontainer .listfield-container-2,
.taskcontainer .listfield-container-3,
.taskcontainer .listfield-container-4,
.taskcontainer .listfield-container-5 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.taskcontainer #taskdate,
.taskcontainer #client,
.taskcontainer #activity,
.taskcontainer #staff,
.taskcontainer #detail {
	display: none;
}

.taskcontainer #task {
	display: inline-block;
	width: 300px;
}

.taskcontainer .expandable .task {
	display: none;
}

@media (min-width: 736px) {

	.taskcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}

	.taskcontainer #task {
		display: none;
	}

	.taskcontainer #taskdate,
	.taskcontainer #detail {
		display: inline-block;
	}
	
	/*.clientcontainer .listfield-container-l {
		display: inline-block;
		width: auto;
	}*/
	
}

@media (min-width: 1041px) {

	.taskcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

	.taskcontainer #client {
		display: inline-block;
	}

	.taskcontainer .expandable #task {
		display: inline-table;
	}

}

@media (min-width: 1345px) {

	.taskcontainer .listfield-container-4,
	.taskcontainer .listfield-container-5 {
		display: inline-block;
		width: auto;
	}

	.taskcontainer #activity,
	.taskcontainer #staff {
		display: inline-block;
	}

	.taskcontainer #detail {
		display: none;
	}

}

/***********************************************************************************************
********                                                                               *********
******** responsive tasks in expandable client                                         *********
********                                                                               *********
***********************************************************************************************/

.clientcontainer .expandable .listfield-container,
.clientcontainer .expandable .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.clientcontainer .expandable .listfield-container-2,
.clientcontainer .expandable .listfield-container-3,
.clientcontainer .expandable .listfield-container-4,
.clientcontainer .expandable .listfield-container-5 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.clientcontainer .expandable #taskdate,
.clientcontainer .expandable #client,
.clientcontainer .expandable #activity,
.clientcontainer .expandable #staff,
.clientcontainer .expandable #detail {
	display: none;
}

.clientcontainer .expandable #task {
	display: inline-block;
	width: 300px;
}

.clientcontainer .expandable .expandable .task {
	display: none;
}

.clientcontainer .expandable .listfield-action {
	display: none;
}

@media (min-width: 747px) {

	.clientcontainer .expandable .listfield-container-2 {
		display: inline-block;
		width: auto;
	}

	.clientcontainer .expandable #task {
		display: none;
	}

	.clientcontainer .expandable #taskdate,
	.clientcontainer .expandable #detail {
		display: inline-block;
	}
	
	/*.clientcontainer .listfield-container-l {
		display: inline-block;
		width: auto;
	}*/
	
}

@media (min-width: 1051px) {

	.clientcontainer .expandable .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

	.clientcontainer .expandable #client {
		display: inline-block;
	}

	.clientcontainer .expandable .expandable #task {
		display: inline-table;
	}

}

@media (min-width: 1356px) {

	.clientcontainer .expandable .listfield-container-4,
	.clientcontainer .expandable .listfield-container-5 {
		display: inline-block;
		width: auto;
	}

	.clientcontainer .expandable #activity,
	.clientcontainer .expandable #staff {
		display: inline-block;
	}

	.clientcontainer .expandable #detail {
		display: none;
	}

}

/***********************************************************************************************
********                                                                               *********
******** responsive tasks in expandable staff                                          *********
********                                                                               *********
***********************************************************************************************/

.staffcontainer .expandable .listfield-container,
.staffcontainer .expandable .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.staffcontainer .expandable .listfield-container-2,
.staffcontainer .expandable .listfield-container-3,
.staffcontainer .expandable .listfield-container-4,
.staffcontainer .expandable .listfield-container-5 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.staffcontainer .expandable #taskdate,
.staffcontainer .expandable #client,
.staffcontainer .expandable #activity,
.staffcontainer .expandable #staff,
.staffcontainer .expandable #detail {
	display: none;
}

.staffcontainer .expandable #task {
	display: inline-block;
	width: 300px;
}

.staffcontainer .expandable .expandable .task {
	display: none;
}

.staffcontainer .expandable .listfield-action {
	display: none;
}

@media (min-width: 747px) {

	.staffcontainer .expandable .listfield-container-2 {
		display: inline-block;
		width: auto;
	}

	.staffcontainer .expandable #task {
		display: none;
	}

	.staffcontainer .expandable #taskdate,
	.staffcontainer .expandable #detail {
		display: inline-block;
	}
	
	/*.staffcontainer .listfield-container-l {
		display: inline-block;
		width: auto;
	}*/
	
}

@media (min-width: 1051px) {

	.staffcontainer .expandable .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

	.staffcontainer .expandable #client {
		display: inline-block;
	}

	.staffcontainer .expandable .expandable #task {
		display: inline-table;
	}

}

@media (min-width: 1356px) {

	.staffcontainer .expandable .listfield-container-4,
	.staffcontainer .expandable .listfield-container-5 {
		display: inline-block;
		width: auto;
	}

	.staffcontainer .expandable #activity,
	.staffcontainer .expandable #staff {
		display: inline-block;
	}

	.staffcontainer .expandable #detail {
		display: none;
	}

}

/***********************************************************************************************
********                                                                               *********
******** responsive invoice                                                            *********
********                                                                               *********
***********************************************************************************************/

.invoicecontainer .listfield-container,
.invoicecontainer .listfield-container-1,
.invoicedetailcontainer .listfield-container,
.invoicedetailcontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.invoicecontainer .listfield-container-2,
.invoicecontainer .listfield-container-3,
.invoicecontainer .listfield-container-4,
.invoicedetailcontainer .listfield-container-2,
.invoicedetailcontainer .listfield-container-3,
.invoicedetailcontainer .listfield-container-4 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.invoicecontainer #externalreference,
.invoicecontainer #client,
.invoicecontainer #invoicedate,
.invoicecontainer #invoiceid {
	display: none;
}

.invoicecontainer #invoice {
	display: inline-block;
}

@media (min-width: 846px) {
	
	/*.invoicecontainer #staffid {
		width: 300px;
	}*/
	
	.invoicecontainer #client {
		display: inline-table;
	}

	.invoicecontainer .listfield-container-2,
	.invoicedetailcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}
	
}

@media (min-width: 1151px) {

	.invoicecontainer #externalreference {
		display: inline-table;
	}

	.invoicecontainer .listfield-container-3,
	.invoicedetailcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

		
}

@media (min-width: 1455px) {

	.invoicecontainer #invoice {
		display: none;
	}

	.invoicecontainer #invoicedate,
	.invoicecontainer #invoiceid {
		display: inline-table;
	}

	.invoicecontainer .listfield-container-4,
	.invoicedetailcontainer .listfield-container-4 {
		display: inline-block;
		width: auto;
	}

}

/***********************************************************************************************
********                                                                               *********
******** responsive machines                                                           *********
********                                                                               *********
***********************************************************************************************/

.machinescontainer .listfield-container,
.machinescontainer .listfield-container-l,
.machinescontainer .listfield-container-2,
.machinescontainer .listfield-container-3 {
	display: inline-table;
	width: 300px;
	/*border-style: solid;
	border-width: 1px;
	border-color: #ff0000;*/
}

.machinescontainer #startdate,
.machinescontainer #serialno,
.machinescontainer #client,
.machinescontainer #name,
.machinescontainer #machineid {
	display: none;
}

.machinescontainer #machine {
	display: inline-block;
}

@media (min-width: 532px) {

	.machinescontainer #client {
		display: inline-block;
	}

}

@media (min-width: 736px) {

	.machinescontainer #startdate {
		display: inline-block;
	}

	.machinescontainer .listfield-container {
		display: inline-block;
		width: auto;
	}

	.machinescontainer .listfield-container-1,
	.machinescontainer .listfield-container-2,
	.machinescontainer .listfield-container-3 {
		display: inline-block;
		width: 300px;
	}
	
	.machinescontainer #machine {
		width: 300px;
	}

}

@media (min-width: 841px) {

	.machinescontainer .listfield-container,
	.machinescontainer .listfield-container-1 {
		display: inline-block;
		width: auto;
	}

	.machinescontainer .listfield-container-2,
	.machinescontainer .listfield-container-3 {
		display: inline-block;
		width: 300px;
	}

	.machinescontainer #name,
	.machinescontainer #machineid {
		display: inline-block;
	}
	
	.machinescontainer #machine {
		display: none;
	}

	/*.machinescontainer .listfield-container-l {
		display: inline-block;
		width: auto;
	}*/
	
}

@media (min-width: 1145px) {

	.machinescontainer .listfield-container,
	.machinescontainer .listfield-container-1,
	.machinescontainer .listfield-container-2,
	.machinescontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}

	.machinescontainer #serialno {
		display: inline-table;
	}

}

/***********************************************************************************************
********                                                                               *********
******** responsive work                                                               *********
********                                                                               *********
***********************************************************************************************/

.workcontainer .listfield-container,
.workcontainer .listfield-container-1 {
	display: inline-block;
	width: auto;
}

.workcontainer .listfield-container-2,
.workcontainer .listfield-container-3 {
	display: inline-table;
	width: 300px;
}

@media (min-width: 652px) {

	.workcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}
	
}

@media (min-width: 855px) {

	.workcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}
	
}

@media (min-width: 932px) {

	.workcontainer .listfield-container-2,
	.workcontainer .listfield-container-3 {
		display: inline-table;
		width: 300px;
	}
	
}

@media (min-width: 1340px) {

	.workcontainer .listfield-container-2 {
		display: inline-block;
		width: auto;
	}
	
}

@media (min-width: 1693px) {

	.workcontainer .listfield-container-3 {
		display: inline-block;
		width: auto;
	}
	
}