.left { float: left }
.right { float: right }
.clear { clear: both }
.smlFont { font-size: 0.8em }
.lrgFont { font-size: 1.4em }
.grey { color: #A6A6A6 }
.blue { color: #6fb0e6 }
.red { color: #FF0000 }
.lightgrey { color: #DADADA }
.center { text-align: center }
.bold { font-weight: bold; }

.marginSmall { margin: 5px; }
.marginLarge { margin: 10px; }

.marginTopSmall { margin-top: 5px; }
.marginTopLarge { margin-top: 10px; }
.marginTopHuge { margin-top: 20px; }

.marginBottomSmall { margin-bottom: 5px; }
.marginBottomLarge { margin-bottom: 10px; }
.marginBottomHuge { margin-bottom: 20px; }

.marginLeftSmall { margin-left: 5px; }
.marginLeftLarge { margin-left: 10px; }

.paddingSmall { padding: 5px; }
.paddingLarge { padding: 10px; }

.paddingTopSmall { padding-top: 5px; }
.paddingTopLarge { padding-top: 10px; }
.paddingTopHuge { padding-top: 20px; }

.paddingLeftSmall { padding-left: 5px; }
.paddingLeftLarge { padding-left: 10px; }

/* removes the margin from the jQuery Mobile .ui-content */
.marginContentRemoveX { margin-left: -15px; margin-right: -15px; }
.marginContentRemoveY { margin-top: -15px; margin-bottom: -15px; }

.borderBox {
	border:           1px solid #bbb /*{d-bup-border}*/;
	background:       #fff /*{d-bup-background-color}*/;
	font-weight:      bold;
	color:            #333 /*{d-bup-color}*/;
	text-shadow:      0 /*{d-bup-shadow-x}*/ 1px /*{d-bup-shadow-y}*/ 0 /*{d-bup-shadow-radius}*/ #fff /*{d-bup-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f6f6f6 /*{d-bup-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image: -moz-linear-gradient(#fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* FF3.6 */
	background-image: -ms-linear-gradient(#fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* IE10 */
	background-image: -o-linear-gradient(#fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Opera 11.10+ */
	background-image: linear-gradient(#fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/);
}

/**
 *page header logo
 */
.simpro-header {
	position:         relative;
	height:           40px;
	z-index:          300;
	background:       #183967;
	background-image: -moz-linear-gradient(center top, #204C89, #183967);
	color:            #FFFFFF;
	font-weight:      bold;
	text-shadow:      0 1px 1px #000000;
	padding-bottom:   0px;
}
.simpro-header-logo {
	background: url(../images/logo_white_100px.png) 0 0 no-repeat;
	position:   absolute;
	width:      100px;
	height:     24px;
	margin:     .5em 0 0 .4em;
}
.simpro-header .title h4 {
	font-size:  1em;
	text-align: center;
	margin:     5px 0 2px 0;
	padding:    .4em 0;
}
.simpro-header .simpro-header-toolbar {
	position: absolute;
	top:      0; right: 0;
	margin:   4px;
}
/* Login
=============*/
#page-login {
	background:      url(../images/background.png) 0 0 no-repeat;
	background-size: 100%;
}
#page-login #top {
	padding-top: 40px;
}
#page-login #box {
	width:  90%;
	margin: 0 auto 100px auto;
}
#page-login .title span {
	text-shadow: 0 1px 0 #000000;
}
#page-login .outerBox {
	padding:    15px;
	margin:     10px 0 60px 0;
	border:     1px solid #404040;
	background: #d2e7f7;
}
#page-login .innerBox {
	padding:    10px;
	border:     1px solid #404040;
	background: #ffffff;
}
#page-login input.ui-input-text {
	width: 100%;
	display: block;
	box-sizing: border-box;
}

#page-login #simpro-barcode-header {
	padding:    25px 25px 0px;
	text-align: center;
}
#page-login #simpro-barcode-header-logo {
	margin:     0 auto 10px;
	background: url(../images/logo_white_160px.png) 0 0 no-repeat;
	width:      160px;
	height:     48px;
}

/* table
=================*/
.tblBox {
	margin: 10px -15px 10px -15px;
}
.tblGrid, .tblSmplNoHead, .tblSmplHead {
	width:           100%;
	border-collapse: collapse;
}
.tblGrid thead tr, .tblSmplHead thead tr {
	color:            white;
	background-image: -moz-linear-gradient(top, #204c89, #183967);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #204c89), color-stop(1, #183967));
	-ms-filter:       "progid:DXImageTransform.Microsoft.gradient(startColorStr='#204c89', EndColorStr='#183967')";
}
.tblGrid thead th, .tblSmplHead thead th {
	font-weight:        normal;
	text-align:         left;
	padding:            8px 5px;
	border-top:         1px solid #011e33;
	-webkit-box-shadow: inset 0 1px 0 0 #2e6590;
	-moz-box-shadow:    inset 0 1px 0 0 #2e6590;
	box-shadow:         inset 0 1px 0 0 #2e6590;
}
.tblGrid tbody td {
	border-bottom: 1px solid #999999;
}
.tblGrid tbody.boldFirstColumn tr td:first-child {
	font-weight: bold;
}
.tblGrid tbody td {
	color:            #000;
	background-color: #ffffff;
}
.tblGrid tr td.greyBox {
	background-color: #cccccc;
}
table tbody td {
	padding: 5px;
}
table input.ui-input-text.medInput {
	width: 80%;
}

/** copy field-contain style for plain text **/
.simpro-ui-field-contain .label, .ui-field-contain label {
	font-weight: bold;
}
.simpro-ui-field-contain .value {
	/* nothing yet */
	text-align: left;
}
.simpro-ui-field-contain {
	margin: 1em 0;
}
@media all and (min-width: 450px) {
	.simpro-ui-field-contain {
		margin: 0.5em 0;
	}
	.simpro-ui-field-contain .label {
		vertical-align: top;
		display:        inline-block;
		width:          20%;
		margin:         0 2% 0 0;
	}
	.simpro-ui-field-contain .value {
		display: inline-block;
		width:   75%;
		margin:  0 2% 0 0;
	}
}

/**
 * job details page : notes
 */
div.notes {
	border:                2px solid #999;
	-webkit-box-shadow:    0px 0px 2px 0px #CCC; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	box-shadow:            0px 0px 2px 0px #CCC;
	-webkit-border-radius: 5px;
	border-radius:         5px;
	background:            #FFF;
	padding:               10px 10px 5px;
	margin:                4px 0px;
	font-weight:           normal;
}
canvas {
	border: 4px double #999;
	width: 100%;
}