/* CSS Document */
@media only screen and (max-width:1280px) {  /* not visible in responsivedesignchecker.com */
	body { /*background:#666666; --grey-- */ }
	div#loginWrap div#content {
		margin:5% 33% 2%;
	}
	div#loginWrap div.record input.loginText {
		width:89.6%;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass #logoWrap img {
		top:14px;
	}
	/* --- */
	div#forgotPass div#section label.title {
		font-size:2em;
	}
	div#forgotPass div#section div#imgWrap {
		width:39%;
	}
	div#forgotPass div#text p {
		line-height:22px;
	}
	/* --- */
	div#forgotPass div.record #qybMidig {
		margin:0 0 1.5%;
		font-size:0.95em;
	}
	div#forgotPass div.record input {
		margin:0 1.5% 0 0;
	}
	div#forgotPass div.record label.qaladka {
		margin:1.5% 0 0;
	}
	/* ---------------------- dashboard -------------------------- */
	#sidebar > ul > li > a > i {
		font-size:1.1em;
	}
	#sidebar ul ul {
		margin:2% 0;
	}
	#sidebar ul ul li {
		padding:1.5% 0;
	}
	/* ------------------------ load page ------------------------ */
	.workplace #loadPage #command #searchBox {
		width:60%;
	}
	.workplace #loadPage #command #searchBox input.srchInput {
		padding-left:6%;
	}
	.workplace #loadPage #command #searchBox div.suggest, 
	.workplace div.twoCols div#searchBox div.suggest {
		width:54.1%;
	}
	.workplace div.twoCols div#searchBox div.suggest {
		width:42.6%;
	}
	.workplace #loadPage #command #searchBox div.suggest #time, 
	.workplace div.twoCols div#searchBox div.suggest #time {
		margin:0 4%;
	}
	.workplace #loadPage #dynamicQnd #foundNum {
		width:58%;
		padding:0.7% 1%;
		font-size:0.85em;
	}
	.workplace #loadPage #dynamicQnd #filters {
		width:37%;
	}
	/* ------------------------- the form ------------------------ */
	.workplace div.theForm div.record div.switch {
		margin-top:7px;
	}
	.workplace div.theForm div.record span#checkReceipt {
		margin-top:2%;
	}
	/* -- add user -- */
	.workplace div.theForm span#tickAll {
		margin:0.5% 2% 0 0;
	}
	.workplace div.theForm div#userRights div.rights {
		width:28%;
	}
	.workplace div.theForm .btnSubmit.inline {
		width:100% !important;
	}
	.workplace div.theForm div.record span.check {
		margin:1.5% 0 0 2%;
		font-size:0.92em;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		width:91%;
		padding:2% 2.5%;
	}

}

@media only screen and (min-width:768px) and (max-width:1024px) {  /* iPad (Landscape) */
	body { /*background:#80FF00;  --heavy green-- */  }
	div#loginWrap div#content {
		width:46%;
		margin:5% 27% 2%;
		padding:5% 0;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass div#bottomBar {
		height:6px;
	}
	div#forgotPass div#topBar #logoWrap {
		margin:0.5% 0 0 10%;
	}
	div#forgotPass div#section {
		width:80%;
		margin:5% 10% 0;
	}
	div#forgotPass div#section label.title {
		font-size:2em;
	}
	div#forgotPass div#section div#imgWrap {
		width:39%;
	}
	div#forgotPass div#text p:first-child {
		margin:0 0 8%;
	}
	div#forgotPass div#section div.buttons {
		height:54px;
	}
	div#forgotPass div.record input {
		padding:0 0 0 2%;
	}
	div#forgotPass div.buttons a#back {
		font-size:0.95em;
	}
	/* ---------------------- dashboard -------------------------- */
	.edurdur {
		width:91%;
		padding-left:9%;
		min-height:600px;
	}
	#dashboard #sidebar, .workplace #sidebar {
		height:auto;
		min-height:100vh;
		width:9% !important;
	}
	#sidebar #logoWrap {
		padding:0.5em 0;
	}
	#sidebar #logoWrap img#large {
		display:none;
	}
	#sidebar #logoWrap img#small {
		display:inline;
		width:40px;
	}
	#sidebar > ul {
		position:relative;
		margin-top:1%;
	}
	#sidebar > ul > li {
		display:block;
		height:40px;
		position:relative;
	}
	#sidebar > ul > li > a > i {
		width:100%;
		height:40px; line-height:40px;
		font-size:1.4em;
	}
	#sidebar > ul > li span {
		opacity:0;
	}
	#sidebar > ul > li > a > span {
		position:absolute;
		background:rgba(0, 0, 0, 0.8);
		padding:0.5em 0.5em;
		top: 28%;
		left:0; min-width:100px;
		transform: translate3d(0px, -15px, 0);
		transition: all 0.15s ease-in-out;
	}
	#sidebar > ul > li.has-sub > a::after {
		background:none;
	}
	#sidebar > ul > li.has-sub.active > a::after {
		background:none;
	}
	#sidebar > ul > li:hover span {
		left:82px !important;
	}
	#sidebar ul li:hover span {
		opacity: 1;
		transform: translate3d(0px, -15px, 0);
	}
	#sidebar ul ul {
		position:absolute;
		width:160px;
		left:92px; top:55%;
	}
	#sidebar ul li:hover ul {
		background:rgba(0, 0, 0, 0.8);
	}
	/* -- */
	#sidebar ul ul li {
		display:block;
		text-align:left;
		margin:0;
	}
	#sidebar ul ul li span {
		padding:0.7em 0.7em;
	}
	/* --- */
	#middlebar div.topMBar {
		min-height:48px;
		line-height:48px;
	}
	#middlebar div#clearMbar {
		float:left;
		width:100%;
		min-height:11px;
		background:#fff;
		border-bottom:1px dotted #999;
	}
	#middlebar div.topMBar #topIcons {
		height:48px;
	}
	#middlebar #topIcons div.icon {
		top:7px;
		width:34px;height:34px;
	}
	#middlebar #topIcons div.dropDown {
		left:-18%;
		width:110%;
		top:52px;
		display:none;
	}
	/* --- */
	#middlebar div.nextMBar div#title {
		margin:1.5% 2% 0 2%;
		font-size:1em;
	}
	#middlebar div.nextMBar div#title ~ label {
		margin:1.7% 0 0;
	}
	#middlebar div.nextMBar div#border {
		width:96%;
		margin:0.7% 0 0.7% 2%;
	}
	#middlebar div.nextMBar div#chart {
		width:54%;
		margin:1% 0 2% 2%;
	}
	#middlebar div.nextMBar div#hints {
		width:41%;
		margin:1% 2% 0 0;
	}
	#middlebar div.nextMBar div#chart div#cinwan {
		min-height:207px;
	}
	#middlebar div.nextMBar div#chart div#graph {
		min-height:207px;
	}
	#middlebar div.nextMBar div#hints div.hint {
		width:48.5%;
	}
	#middlebar div.nextMBar div.hint div#currency {
		margin-top:14%; margin-bottom:1%;
		font-size:1.8em;
	}
	/* --- */
	#middlebar div.lastMBar div.box {
		width:49.3%;
		min-height:286px;
	}
	#middlebar div.lastMBar header {
		width:96%;
		padding:2.8% 0 2.8% 4%;
	}
	#middlebar div.lastMBar div.box article #timeline {
		width:92%;
		min-height:52px;
		margin:0 4% -0.2%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time, 
	#middlebar div.lastMBar div.box article #timeline #details {
		margin:0 0 0 8%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time {
		margin:0 0 0.8% 8%;
	}
	/* -- */
	#middlebar div.lastMBar div.box article #title, 
	#middlebar div.lastMBar div.box article #record {
		width:92%;
		margin:0 0 2% 4%;
		padding:1.5% 0;
		font-size:0.95em;
	}
	#middlebar div.lastMBar div.box article #record {
		padding:0;
	}
	#middlebar div.lastMBar div.box article div.cave.long {
		width:48%;
	}
	#middlebar div.lastMBar div.box article p#noRecord {
		margin-top:2%;
		font-size:0.85em;
	}
	/* ------------------------ load page ------------------------ */
	.workplace #loadPage #command #searchBox input.srchInput {
		padding-left:7%;
	}
	.workplace #loadPage div.buttons a.btnAddNew {
		padding:2.2% 8%;
	}
	.workplace #loadPage #dynamicQnd #filters {
		width:38%;
	}
	.workplace #loadPage #dynamicQnd #filters label {
		width:40%;
	}
	.workplace #loadPage #dynamicQnd #filters select {
		width:56%;
		height:28px;
	}
	/* --- two Cols --- */
	.workplace div.twoCols {
		width:49.2%;
	}
	.workplace div.twoCols header a#addnew {
		margin-right:0.3%;
		width:20px; height:20px;
		text-align:right;
	}
	.workplace div.twoCols header a#addnew:before {
		line-height:22px;
	}
	.workplace div.twoCols div#searchBox input.srchInput {
		padding-left:8%;
		height:31px;
	}
	.workplace div.twoCols div#searchBox div.suggest {
		margin:31px 0 0;
		width:43.2%;
	}
	.workplace div.twoCols div.dynamicData {
		height:430px;
	}
	.workplace div.twoCols div.dynamicData div.record {
		font-size:0.85em;
	}
	.workplace div.twoCols div.record div#batono {
		width:17%;
	}
	.workplace div.twoCols div.record label#sumada {
		width:20%;
	}
	.workplace div.twoCols div#batono a {
		margin-right:7px;
	}
	/* ------------------------- the form ------------------------ */
	.workplace div.theForm div.record #leftPrt {
		width:27%;
		font-size:0.85em;
	}
	.workplace div.theForm.chngPass div.record #leftPrt {
		width:32%;
	}
	.workplace div.theForm.chngPass div.record #rghtPrt {
		width:67%;
	}
	.workplace div.theForm input.mlarge {
		width:87%;
	}
	.workplace div.theForm label.error {
		font-size:0.85em;
		line-height:20px;
	}
	.workplace div.theForm div.record .listCaves {
		padding:1% 0;
	}
	.workplace div.theForm #topCaves {
		margin:0 0 1%;
	}
	.workplace div.theForm .listCaves div.cave {
		width:13%;
	}
	.workplace div.theForm .listCaves div.cave.xmiddle {
		width:32%;
	}
	.workplace div.theForm.purchase .listCaves div.cave.middle {
		width:22.6%;
	}
	.workplace div.theForm.purchase .listCaves div.cave.mshort {
		width:11%;
	}
	.workplace div.theForm div#list div.column { 
		padding:0;
		font-size:0.85em;
	}
	.workplace div.theForm div#list header div.column { 
		height:32px; line-height:32px;
	}
	.workplace div.theForm div#list div.listItem div.column { 
		padding:0;
		height:28px; line-height:28px;
	}
	.workplace div.theForm div#list div.listItem div.column.first {
		padding:0;
	}
	.workplace div.theForm div#list div.column input {
		height:28px;
		font-size:0.95em; 
	}
	.workplace div.theForm div#list div.column a#remove {
		height:28px; line-height:28px;
		padding:0 0 0 20px;
	}
	/* -- add purchase -- */
	.workplace div.theForm.purchase fieldset {
		width:90%;
		padding:2% 1%;
	}
	.workplace div.theForm.chngPass .btnSubmit {
		margin-left:15.5%;
	}
	/* ----------------------- show Record ----------------------- */
	.workplace div.showRecord {
		padding:1.5% 2%;
	}
	.workplace div.showRecord #leftSide header {
		padding:1.5% 2%;
	}
	.workplace div.showRecord #leftSide div#separate {
		height:14px;
	}
	.workplace div.showRecord #leftSide #colLeft {
		padding:0;
		height:30px; line-height:30px;
	}
	.workplace div.showRecord #leftSide #colRight {
		padding:1.3% 4% 1.3% 2%;
	}
	.workplace div.showRecord #leftSide span.status {
		padding:0.3% 4% 0.6% 2%;
		font-size:em;
	}
	.workplace div.showRecord #rightSide div.imgHolder {
		width:45%;
		margin:0 0 3%;
	}
	.workplace div.showRecord #rightSide div.imgHolder img {
		height:120px;
	}
	.workplace div.showRecord #rightSide h3#title {
		margin-top:1%;
		padding:2.5% 5%;
		font-size:0.9em;
	}
	.workplace div.showRecord #rightSide #record {
		padding:4% 5%;
	}
	.workplace div.showRecord #rightSide p,
	.workplace div.showRecord #rightSide label {
		margin:0 0 2%;
	}
	/* -- profile -- */
	.workplace div.showRecord #rightSide div.imgWrap {
		width:58%;
	}
	/* --- show user -- */
	.workplace div.showRecord div.userRights fieldset {
		padding:3% 1%;
	}
	.workplace div.showRecord div.userRights fieldset legend {
		padding:6px 18px;
	}
	.workplace div.showRecord div.userRights fieldset > div {
		margin-bottom:1.2%;
	}
	/* -- show list items -- */
	.workplace div.showRecord div.details.long div.listItems div.box {
		padding:1% 0 1% 1%;
	}
	.workplace div.showRecord div#totals {
		width:40%;
		margin:3% 0;
	}
	/* -- settings -- */
	.workplace div.showRecord a#edit {
		padding-left:6%;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		width:90%;
		padding:2% 3%;
	}
	.workplace div.reportArea div.oneDiv {
		float:left;
		width:24%;
		margin:0 1% 1% 0;
	}
	.workplace div.reportArea div.oneDiv input[type="radio"] {
		margin:1.5% 4% 0 0;
	}
	/* -- */
	.workplace div.reportArea div#filterCmdPrcess {
		margin-top:3%;
	}
	.workplace div.reportArea div#filterCmdPrcess #filterWrap {
		width:90%;
		margin-right:10%;
	}
	.workplace div.reportArea button {
		width:14%;
		margin:0.5% 0 0 13.5%;
		height:32px;
	}
	.workplace div.reportArea label#process {
		margin:1.8% 0 0 2%;
	}
	.workplace div.reportArea label.error {
		margin:1.3% 0 0 2%;
	}
	.workplace div.reportArea div#filterWrap div.filter {
		margin-bottom:1%;
	}
	.workplace div.reportArea div#filterWrap div.filter label {
		margin-top:1%;
	}
	/* -- report show */
	.workplace div#loadPage div#dynamicQnd h3#title {
		margin:2% 0 0.7% 5%;
	}
	.workplace #loadPage #dynamicQnd.report #foundNum {
		width:76%;
		padding:0.9% 1%;
	}
	.workplace #loadPage #dynamicQnd #filters a#back {
		width:50%;
	}
	.workplace #loadPage #dynamicQnd div#incomeDsgn a#back {
		width:50%;
		margin:7% 10% 0 0;
	}
	.workplace #loadPage #dynamicQnd a#print.report {
		margin:1% 0 0 0;
	}

}

@media only screen and (max-width:768px) {  /* testing 900px, upload 768px mahad jiif */
	body {
		/*background:#D8FFB0; light green */
	}
	div#loginWrap {
		background:#ffffff;
	}
	div#loginWrap div#content {
		width:80%;
		margin:0 10%;
		padding:4% 0;
		border:none;
	}
	div#loginWrap div#content #logoHolder {
		margin:8% 5% 0;
	}
	div#loginWrap div#content #logoHolder img {
		width:90px;
		height:90px;
	}
	div#loginWrap div#content h3 {
		margin:3% 5%;
		font-size:1.2em;
	}
	div#loginWrap div#content div.record {
		width:94%;
		margin:2% 3% 1%;
	}
	div#loginWrap div.record span#icon {
		height:40px; line-height:40px;
		font-size:1.3em;
	}
	div#loginWrap div.record input.loginText {
		width:89.7%;
		height:40px;
		font-size:0.9em;
	}
	div#loginWrap div.tooltip {
		padding:8px 30px;
		font-size:0.85em;
		left:13%;
	}
	div#loginWrap label.error {
		margin:0 0 2% 14%;
		font-size:0.95em;
		background-size:15px;
	}
	div#loginWrap div#content div.record div.switch, 
	.workplace div.theForm div.record div.switch {
		left:22%;
		margin-right:15px;
		width:50px;
		height:26px;
	}
	div#loginWrap div#content div.record div.switch {
		left:0;
	}
	div#loginWrap div#content div.record div.switch:before, 
	.workplace div.theForm div.record div.switch:before {
		width:50px;
		height:26px;
	}
	div#loginWrap div#content div.record div.switch:after, 
	.workplace div.theForm div.record div.switch:after {
		height:25px;
		width:25px;
	}
	div#loginWrap div#content div.record div.switch.switchOn:after, 
	.workplace div.theForm div.record div.switch.switchOn:after {
		left:25px !important;
	}
	div#loginWrap div.record span#rememberLbl, 
	.workplace div.theForm div.record span#checkReceipt {
		font-size:1em;
	}
	.workplace div.theForm div.record span#checkReceipt {
		margin-top:1.5%;
		margin-left:22%;
		font-size:0.95em;
	}
	div#loginWrap div.record a#forgot {
		font-size:1em;
	}
	div#loginWrap div.record #submitBtn {
		height:40px;
		font-size:1.15em;
	}
	div#loginWrap div.record label#copyRight {
		margin:3% 5%;
		font-size:1em;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass div#topBar, div#forgotPass div#bottomBar {
		height:90px;
	}
	div#forgotPass div#bottomBar {
		height:8px;
	}
	div#forgotPass div#topBar #logoWrap {
		width:80%;
		margin:1% 10% 0;
	}
	div#forgotPass #logoWrap img {
		width:170px;
	}
	div#forgotPass div#section {
		width:80%;
		margin:5% 10% 0;
	}
	div#forgotPass div#section label.title {
		font-size:1.5em;
	}
	div#forgotPass div#section div.center {
		float:left !important;
		width:100% !important;
	}
	div#forgotPass div#section div#imgWrap {
		display:none;
	}
	div#forgotPass div#section div#text {
		float:left;
		width:100%;
	}
	div#forgotPass div#text p {
		font-size:1.05em;
		line-height:24px;
	}
	div#forgotPass div#text p:first-child {
		margin:0;
	}
	div#forgotPass div#section div.record.two {
		margin-top:4%;
	}
	div#forgotPass div#section div.buttons {
		width:100%;
		height:auto;
		margin:2% 0;
		padding:0;
		background:none;
	}
	div#forgotPass div.record #qybMidig {
		margin:0;
	}
	div#forgotPass div.record input {
		height:36px;
		margin:1% 1.5% 0 0;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	div#forgotPass div.buttons a#back {
		width:100%;
		margin:5% 0;
		text-decoration:underline;
	}
	div#forgotPass div.buttons input.btnSubmit {
		float:left;
		margin-top:0;
		padding:1.5% 5%;
		font-size:1.1em;
	}
	div#forgotPass div#imgWrap2 img {
		display:none;
	}
	/* ---------------------- dashboard -------------------------- */
	.edurdur {
		width:100%;
		height:auto;
		min-height:10px;
		padding-left:0;
	}
	#dashboard #middlebar, .workplace #middlebar {
		position:relative;
		height:100vh;
	}
	#dashboard #sidebar, .workplace #sidebar {
		height:auto;
		min-height:100vh;
		width:190%;
		top:0;
		left:0;
		box-shadow:0 0 0 100em rgba(0, 0, 0, 0);
		transform:translate3d(-190%, 0, 0);
		transition:all 0.3s ease-in-out;
	}
	#sidebar #logoWrap {
		padding:0.43em 0;
	}
	#sidebar #logoWrap img#large {
		display:inline;
		width:100px;
	}
	#sidebar #logoWrap img#small {
		display:none;
	}
	#sidebar > ul {
		position:relative; 
		margin-top:2em;
	}
	#sidebar > ul > li {
		display:inline-table;
		height:30px;
		width:90.5% !important;
		position:relative;
	}
	#sidebar > ul li a i {
		position:relative;
		top:2px;
		width:30px;
		height:auto; line-height:normal;
		font-size:1.1em;
	}
	#sidebar > ul > li span {
		opacity:1;
	}
	#sidebar > ul > li > a > span {
		position:static;
		background:none;
		padding:0;
		min-width:1px;
		transform: none;
		transition: none;
	}
	#sidebar > ul > li.has-sub > a::after {
		background:url(../images/system/icon_plus.png) no-repeat;
	}
	#sidebar > ul > li.has-sub.active > a::after {
		background:url(../images/system/icon_minus.png) center no-repeat;
	}
	#sidebar ul li:hover span {
		transform:none;
	}
	/* --- */
	#sidebar .smartphone-menu-trigger {
		width:43px;
		height:44px;
		position:absolute;
		left:190%;
		background:#b96125;
	}
	#sidebar .smartphone-menu-trigger:before,
	#sidebar .smartphone-menu-trigger:after {
		content:'';
		width:50%;
		height:2px;
		background:#ffffff;
		border-radius:10px;
		position:absolute;
		top:45%;
		left:50%;
		transform:translate3d(-50%, -50%, 0);
	}
	#sidebar .smartphone-menu-trigger:after {
		top:55%;
	}
	#dashboard #sidebar:focus, 
	.workplace #sidebar:focus {
		transform:translate3d(0, 0, 0);
		width:230px !important;
		box-shadow:0 0 0 100em rgba(0, 0, 0, 0.6);
	}
	#sidebar:focus .smartphone-menu-trigger {
		left:230px;
	}
	#sidebar:focus .smartphone-menu-trigger {
		pointer-events:none;
	}
	#sidebar ul {
		margin-top:0em;
		padding:0;
	}
	#sidebar ul li {
		width:90%;
		padding:0 5%;
	}
	#sidebar > ul > li > a {
		padding:4% 0;
	}
	#sidebar > ul > li > a > i {
		width:30px;
		font-size:1.1em;
	}
	#sidebar > ul > li > a > span {
		font-size:0.9em;
	}
	#sidebar ul ul {
		position:inherit;
		margin:0;
		padding-bottom:5%;
		width:85%;
		left:30px; top:0;
	}
	#sidebar ul li:hover ul {
		background:none;
	}
	#sidebar ul ul li {
		padding:2% 0;
	}
	#sidebar ul ul a {
		font-size:0.9em;
	}
	/* --- */
	#middlebar div.topMBar {
		min-height:44px;
		line-height:44px;
	}
	#middlebar div.topMBar #programName {
		margin-left:8%;
	}
	#middlebar div#clearMbar {
		display:none;
	}
	#middlebar div.topMBar #topIcons {
		height:44px;
	}
	#middlebar #topIcons div.icon {
		top:7px;
		width:30px;height:30px;
	}
	#middlebar #topIcons div.dropDown {
		left:-55%;
		width:150%;
	}
	/* --- */
	#middlebar div.nextMBar, 
	#middlebar div.lastMBar {
		width:100%;
		margin:0;
	}
	#middlebar div.nextMBar {
		border:none;
	}
	#middlebar div.nextMBar div#title {
		margin:3% 2% 0 3%;
	}
	#middlebar div.nextMBar div#title ~ label {
		margin:3.2% 0 0;
	}
	#middlebar div.nextMBar div#border {
		width:94%;
		margin:1% 0 1% 3%;
	}
	#middlebar div.nextMBar div#chart, 
	#middlebar div.nextMBar div#hints {
		width:54%;
		margin:1% 0 2% 3%;
	}
	#middlebar div.nextMBar div#hints {
		width:39%;
		margin:1% 3% 0 0;
	}
	#middlebar div.nextMBar div#chart div#cinwan {
		width:94%;
		padding:0 3%;
		min-height:36px;
	}
	#middlebar div.nextMBar div#chart div#graph {
		float:left;
		width:100%;
		min-height:212px;
	}
	#middlebar div.nextMBar div#chart div#currency, 
	#middlebar div.nextMBar div#chart label {
		float:left;
		width:auto;
		margin:0 1.5% 0 0;
		font-size:0.95em;
		min-height:36px; line-height:36px;
		text-align:right;
	}
	#middlebar div.nextMBar div#chart label {
		text-transform:none;
	}
	#middlebar div.nextMBar div#hints div.hint {
		float:left !important;
		width:100%;
		height:55.5px;
		margin:0 0 2% !important;
		background:#916c61 !important;
		background-image:none;
	}
	#middlebar div.nextMBar div#hints div.hint.two, 
	#middlebar div.nextMBar div#hints div.hint.four {
		background:#f2c4a4 !important;
	}
	#middlebar div.nextMBar div.hint div#currency {
		margin-top:2.5%;
		font-size:1.3em;
	}
	#middlebar div.nextMBar div.hint label {
		font-size:0.7em !important;
	}
	/* --- */
	#middlebar div.lastMBar div.box {
		float:left;
		width:100%;
		min-height:50px;
		margin-top:2%;
		border:none;
	}
	#middlebar div.lastMBar div.box.right {
		float:left;
	}
	#middlebar div.lastMBar header {
		width:97%;
		padding:2% 0 2% 3%;
		font-size:1em;
	}
	#middlebar div.lastMBar div.box article {
		height:200px;
	}
	#middlebar div.lastMBar div.box article #timeline {
		width:96%;
		min-height:56px;
		margin:0 3% -0.1%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time, 
	#middlebar div.lastMBar div.box article #timeline #details {
		width:93%;
		margin:0 0 0 6%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time {
		margin:0 0 0.7% 6%; 
	}
	/* -- */
	#middlebar div.lastMBar div.box article #title, 
	#middlebar div.lastMBar div.box article #record {
		width:94%;
		margin:0 0 2% 3%;
	}
	#middlebar div.lastMBar div.box article #record {
		margin:0 0 1.5% 3%;
	}
	#middlebar div.lastMBar div.box article div.cave.short {
		width:15%;
	}
	#middlebar div.lastMBar div.box article div.cave.middle {
		width:15%;
	}
	#middlebar div.lastMBar div.box article div.cave.long {
		width:60%;
	}
	#middlebar div.lastMBar div.box article p#noRecord {
		margin-top:2%;
		font-size:0.9em;
	}
	/* ------------------------ load page ------------------------ */
	.workplace #loadPage {
		width:100%;
		margin:1% 0;
	}
	#middlebar div.positionBar {
		height:38px; line-height:38px;
	}
	.workplace #loadPage #dynamicQnd {
		padding:2%;
	}
	.workplace #loadPage #command, 
	.workplace #loadPage #dynamicQnd {
		border:none;
	}
	/* ------------------------ unknown -------------------------- */
	div.unknown {
		width:96%;
		margin:1% 0;
		padding:2%;
		height:100vh;
		background:#fff url(../images/system/oops.png) 94% 20px no-repeat;
	}
	div.unknown h3, div.unknown p, div.unknown ul {
		width:60%;
	}
	div.unknown h3 {
		font-size:1.2em;
	}
	div.unknown ul {
		margin:0.5% 0 1% 4.5%;
	}
	div.unknown p, div.unknown ul li {
		font-size:0.9em;
	}
	.workplace #loadPage #command #searchBox {
		width:80%;
	}
	.workplace #loadPage #command .buttons {
		width:15%;
	}
	.workplace #loadPage #command #searchBox input.srchInput {
		padding-left:6%;
	}
	.workplace #loadPage div.buttons a.btnAddNew {
		float:right;
		width:100%;
		height:28px;
		padding:0;
		line-height:28px;
	}
	.workplace #loadPage #command #searchBox div.suggest, 
	.workplace div.twoCols div#searchBox div.suggest {
		width:75.5%;
	}
	.workplace div.twoCols div#searchBox div.suggest {
		width:92.8%;
		margin:31px 0 0;
		padding:1.5% 0.5%;
	}
	.workplace div.twoCols div#searchBox div.suggest #time {
		padding-left:5%;
	}
	/* -- */
	.workplace #loadPage #dynamicQnd #foundNum {
		width:52%;
		margin:0 0 2%;
	}
	.workplace #loadPage #dynamicQnd #filters {
		width:45%;
		margin:0 0 2%;
	}
	.workplace #loadPage #dynamicQnd #dataTable {
		min-height:100vh;
	}
	.workplace #loadPage #dataTable div#loading {
		margin:2% 0 0;
	}
	.workplace div.twoCols div.dynamicData #loading {
		margin:2% 0;
	}
	.workplace #loadPage #dataTable #record {
		font-size:83%;
	}
	.workplace #loadPage #dataTable div.cave {
		margin-left:2%;
		padding-left:2%;
		display:none;
	}
	.workplace #loadPage #dataTable div.cave:nth-child(1), 
	.workplace #loadPage #dataTable div.cave:nth-child(2), 
	.workplace #loadPage #dataTable div.cave:nth-child(3), 
	.workplace #loadPage #dataTable div.cave:nth-child(4) { 
		display:inline;
	}
	.workplace #loadPage #dataTable div.cave.button { 
		width:12%;
	}
	.workplace #loadPage #dataTable div.cave:first-child {
		border-left:none !important;
		margin:0;
	}
	/* --- two Cols --- */
	.workplace div.twoCols {
		width:100%;
		margin:1% 0;
		border:none;
	}
	.workplace div.twoCols.two {
		float:left;
	}
	.workplace div.twoCols header {
		padding:0 3%;
		height:36px; line-height:36px;
		background:#ccc;
	}
	.workplace div.twoCols header a#addnew {
		margin-right:0;
		width:22px; height:22px;
		text-align:right;
	}
	.workplace div.twoCols header a#addnew:before {
		font-size:1.4em;
	}
	.workplace div.twoCols div#searchBox input.srchInput {
		padding-left:5%;
		height:31px;
	}
	.workplace div.twoCols div.dynamicData {
		height:auto;
	}
	.workplace div.twoCols div.dynamicData div.record {
		padding:1% 2%;
		font-size:85%;
	}
	.workplace div.twoCols div.dynamicData div.record:last-child {
		border-bottom:none;
	}
	.workplace #loadPage #btnDisplayMore {
		width:40%;
		margin:3% 30%;
		height:34px; line-height:34px;
	}
	/* ------------------------- the form ------------------------ */
	.workplace p#info {
		margin:1.5% 0 0 2%;
		padding:1% 2%;
		font-size:0.85em;
	}
	.workplace div.reNotify {
		margin:2% 0 1% 2%;
		padding:1% 2%;
		font-size:0.85em;
	}
	.workplace a#btnCancel,
	.workplace div.showRecord #rightSide a#back,
	.workplace #loadPage #dynamicQnd #filters a#back, 
	.workplace #loadPage #dynamicQnd div#incomeDsgn a#back {
		width:14%;
		font-size:0.95em;
		margin:1.5% 2% 0 0;
	}
	.workplace div.theForm {
		width:100%;
		margin:1.5% 0;
	}
	.workplace div.theForm div.record {
		width:100%;
		padding:1.5% 0;
	}
	.workplace div.theForm div.record:nth-child(even) {
		margin:0;
		background:none;
	}
	.workplace div.theForm div.record .twoCol {
		width:95%;
		padding:0 2.5%;
	}
	.workplace div.theForm div.record .twoCol.two {
		float:left;
		padding:1.5% 2.5% 0;
		margin-top:1.5%;
		border-top:1px dotted #cccccc;
	}
	.workplace div.theForm div.record .twoCol.empty {
		display:none;
	}
	.workplace div.theForm div.record #leftPrt {
		width:22% !important;
		margin:0;
		height:32px; line-height:32px;
	}
	.workplace div.theForm div.record #rghtPrt {
		width:78% !important;
	}
	.workplace div.theForm div.record span#red {
		left:4px;
	}
	.workplace div.theForm input, .workplace div.theForm select, .workplace div.theForm textarea {
		height:30px;
		border:1px solid #bbb;
	}
	.workplace div.theForm select {
		height:32px;
	}
	.workplace div.theForm textarea {
		height:auto;
	}
	.workplace div.theForm input[type="radio"] {
		height:auto;
	}
	.workplace div.theForm input:focus, 
	.workplace div.theForm select:focus, 
	.workplace div.theForm textarea:focus {
		border:1px solid #aaaaaa;
	}
	.workplace div.theForm input.vlarge, .workplace div.theForm textarea.vlarge {
		width:90%;
	}
	.workplace div.theForm input.mlarge, .workplace div.theForm textarea.mlarge {
		width:82%;
	}
	.workplace div.theForm input.large, .workplace div.theForm select.large {
		width:62%;
	}
	.workplace div.theForm input.middle {
		width:37%;
	}
	.workplace div.theForm input.lshort {
		width:17%;
	}
	.workplace div.theForm select.large {
		width:62%;
	}
	.workplace div.theForm select.middle {
		width:44%;
	}
	.workplace div.theForm select.vmiddle {
		width:32%;
	}
	.workplace div.theForm select.short {
		width:14%;
	}
	.workplace div.theForm div#tweet_feed {
		margin:1% 0 0 1%;
	}
	.workplace div.theForm div.record span.check {
		margin:1.8% 0 0 1.5%;
		font-size:0.85em;
	}
	.workplace div.theForm label.error {
		width:100%;
		font-size:0.85em;
		line-height:20px;
	}
	.workplace div.theForm .btnSubmit {
		float:left;
		margin-left:23.6%;
		padding:1% 5%;
		font-size:0.95em;
	}
	.workplace div.theForm.user .btnSubmit {
		margin-left:2.6%;
	}
	.workplace div.theForm.chngPass .btnSubmit {
		margin-left:23.6%;
		padding:1% 5%;
	}
	.workplace div.theForm label.process {
		float:left;
		margin:1.5% 0 0 2%;
	}
	.workplace div.theForm.chngPass label.process {
		margin:1.5% 0 0 2%;
	}
	/*--- user add ---*/
	.workplace div.theForm div#header {
		padding:1.5% 2.5%;
	}
	.workplace div.theForm label.error.inline {
		margin:0.5% 0 0 2%;
		width:auto;
	}
	.workplace div.theForm input#checkAll {
		margin:0 1.5% 0 2.5%;
	}
	.workplace div.theForm span#tickAll {
		margin:0.7% 1% 0 0;
	}
	.workplace div.theForm div#userRights {
		width:97.5%;
		margin:2% 0 0.5% 2.5%;
	}
	.workplace div.theForm div#userRights div.rights {
		width:32%;
		margin-right:0.5%;
	}
	.workplace div.theForm div#userRights fieldset {
		min-height:220px;
	}
	.workplace div.theForm div#userRights fieldset legend {
		padding:6px 16px;
		font-size:0.9em;
	}
	.workplace div.theForm div#userRights fieldset > div {
		margin-left:5%;
	}
	.workplace div.theForm div#userRights label.tickOne {
		margin:2.5% 0 0 3%;
		font-size:0.9em;
	}
	.workplace div.theForm div.suggest {
		width:65.5%;
		margin-top:32px;
		padding:1% 0;
	}
	.workplace div.theForm div.suggest #time {
		padding-left:6%;
		padding-bottom:2%;
	}
	.workplace div.theForm div.displayInfo {
		width:70%;
		margin:0 0 0 22.5%;
	}
	.workplace div.theForm div.displayInfo label#header {
		width:94%;
		padding:1% 3%;
	}
	.workplace div.theForm div.displayInfo p {
		padding:0 0 0 3%;
		height:28px; line-height:28px;
	}
	.workplace div.theForm div.displayInfo p#midigta {
		padding-left:3%;
	}
	/* ----------------  popup form  -------------------*/
	.workplace div.theForm a#addNew {
		margin:0 0 0 1%;
		width:30px; height:30px; line-height:30px;
		text-align:center;
		font-size:1.25em;
	}
	.workplace div.theForm div.popupContainer {
		width:580px;
		top:50px;
	}
	.workplace div.theForm .popupHeader {
		padding:0 20px;
		height:38px; line-height:38px;
		font-size:1em;
	}
	.workplace div.theForm .popupHeader span.close {
		top:0px;
		height:38px; line-height:38px; 
		font-size:1.2em;
	}
	.workplace div.theForm .popupBody label {
		font-size:0.9em;
	}
	.workplace div.theForm .popupBody .btnAdd {
		padding:0 7%;
		margin:1% 2.7% 3%;
		height:32px; line-height:30px;
		font-size:1em;
	}
	.workplace div.theForm .popupBody label.oops {
		padding:0 0 0 4%;
		line-height:18px;
		font-size:0.9em;
	}
	/* ------  add to list ------ */
	.workplace div.theForm div.record .listCaves {
		width:95%;
		padding:0.5% 2.5%;
	}
	.workplace div.theForm #topCaves {
		display:none;
	}
	.workplace div.theForm .listCaves div.cave {
		margin:0 1% 1.5% 0;
		font-size:0.9em;
	}
	.workplace div.theForm .listCaves div.cave.xmiddle {
		width:38%;
	}
	.workplace div.theForm .listCaves div.cave.middle {
		width:35% !important;
	}
	.workplace div.theForm .listCaves div.cave.mshort {
		width:15% !important;
	}
	.workplace div.theForm .listCaves div.cave.action {
		width:20%;
	}
	.workplace div.theForm .listCaves a#addNew {
		margin:4% 0 0 2%;
	}
	/* --- */
	.workplace div.theForm div.cave span.responsive {
		float:left;
		width:100%;
		margin-bottom:0.5em;
		display:inline;
	}
	.workplace div.theForm.distrPrdts div.cave.action span.responsive {
		display:none;
	}
	.workplace div.theForm a#addNew {
		margin:0 0 0 1% !important;
		width:28px; height:28px; line-height:28px;
	}
	.workplace div.theForm div.cave input {
		height:30px;
	}
	.workplace div.theForm div.cave select {
		height:32px;
	}
	.workplace div.theForm a.addToList {
		height:31px; line-height:31px;
		font-size:0.95em;
	}
	.workplace div.theForm .btnSubmit.inline {
		margin-left:0;
		width:100% !important;
		height:32px; line-height:31px;
	}
	/* -- the list -- */
	.workplace div.theForm div#list {
		width:95%;
		margin:0 2.5% 1%;
	}
	.workplace div.theForm div#list div.column.subTtl, 
	.workplace div.theForm div#list div.column.total { 
		display:none;
	}
	.workplace div.theForm div#list header div.column { 
		height:34px; line-height:34px;
	}
	.workplace div.theForm div#list div.listItem div.column { 
		padding:0.3% 0;
		min-height:26px;
	}
	.workplace div.theForm div#list div.column.first {
		width:6%;
	}
	.workplace div.theForm div#list div.column.vshort {
		width:10%;
	}
	.workplace div.theForm div#list div.column.short {
		width:12%;
	}
	.workplace div.theForm div#list div.column.mshort {
		width:17%;
	}
	.workplace div.theForm.trnsfrPrdt div#list div.column.mshort {
		width:21%;
	}
	.workplace div.theForm div#list div.column.middle {
		width:25%;
	}
	.workplace div.theForm div#list div.column.xmiddle {
		width:34%;
	}
	.workplace div.theForm div#list div.listItem div.column.first {
		padding:0.6% 0 0;
	}
	.workplace div.theForm div#list div.column a#remove {
		background:url(../images/system/b_delete.png) 0 6px no-repeat;
	}
	/* -- add purchase -- */
	.workplace div.theForm.purchase fieldset {
		width:97.5%;
	}
	.workplace div.theForm.purchase fieldset legend {
		margin-left:20px;
		padding:7px 20px;
	}
	.workplace div.theForm.purchase fieldset > p {
		width:30%;
		margin-left:2%;
	}
	.workplace div.theForm.purchase fieldset > p:nth-child(3), 
	.workplace div.theForm.purchase fieldset > p:nth-child(5), 
	.workplace div.theForm.purchase fieldset > p:nth-child(7) {
		margin-left:2%;
	}
	.workplace div.theForm.purchase fieldset > p input {
		width:95%;
		padding:0 0 0 4%;
	}
	.workplace div.theForm.purchase .btnSubmit {
		margin-left:6.6%;
	}
	/* ----------------------- show Record ----------------------- */
	.workplace div.showRecord {
		padding:2%;
		min-height:100vh;
	}
	.workplace div.showRecord #leftSide {
		width:100%;
	}
	.workplace div.showRecord #rightSide {
		float:left;
		width:100%;
	}
	.workplace div.showRecord #leftSide header {
		height:32px; line-height:32px;
		padding:0 2%;
	}
	.workplace div.showRecord div.details {
		width:100%;
		box-sizing:border-box;
	}
	.workplace div.showRecord div.details.responsive, 
	.workplace div.showRecord #leftSide div.responsive {
		display:inline;
	}
	.workplace div.showRecord #leftSide #record:last-child {
		border-bottom:none;
	}
	.workplace div.showRecord #leftSide #colLeft {
		width:26%;
		padding:1% 0;
		line-height:normal; height:auto;
	}
	.workplace div.showRecord #leftSide #colRight {
		width:66%;
		padding:1% 4% 1% 2%;
	}
	.workplace div.showRecord #leftSide #colRight p {
		margin:0 0 0.7%;
	}
	.workplace div.showRecord #leftSide span.status {
		padding:0.5% 4% 0.5% 2%;
		font-size:1em;
	}
	.workplace div.showRecord #rightSide div.imgHolder {
		width:22%;
		margin:0 0 2% 0%;
	}
	.workplace div.showRecord #rightSide div.imgHolder img {
		height:auto;
	}
	.workplace div.showRecord #rightSide a#back {
		float:right;
		width:20%;
		margin:0 0 2% 2%;
		padding:0;
		height:34px; line-height:34px;
	}
	.workplace div.showRecord.user #rightSide a#back {
		float:left;
	}
	.workplace div.showRecord #rightSide a#print {
		width:15%;
		padding-left:2%;
		height:36px; line-height:36px;
	}
	.workplace div.showRecord #rightSide a#print::before{
		top:2px; left:-10px;
		font-size:1.3em;
	}
	.workplace div.showRecord #rightSide h3#title, 
	.workplace div.showRecord #rightSide div.details {
		display:none;
	}
	/* -- profile -- */
	.workplace div.showRecord #rightSide div.imgWrap {
		width:28%;
		margin:0 0 4%;
	}
	.workplace div.showRecord div.imgWrap #imgChange {
		height:30px;
		line-height:30px;
	}
	.workplace div.showRecord div.imgWrap #imgChange input[type="file"] {
		height:30px;
	}
	/* --- show user -- */
	.workplace div.showRecord div#header {
		width:100%;
		padding:1% 0;
	}
	.workplace div.showRecord div#rights div.userRights {
		float:left;
		width:32%;
		margin:2% 0 2% 1%;
	}
	.workplace div.showRecord div.userRights:first-child {
		margin:2% 0 !important;
	}
	.workplace div.showRecord div.userRights fieldset {
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	.workplace div.showRecord div.userRights fieldset legend {
		font-size:0.9em;
		letter-spacing:0.5px;
	}
	/* -- show list items -- */
	.workplace div.showRecord div.details.long div.listItems {
		margin:1% 0 0;
		box-sizing:border-box;
	}
	.workplace div.showRecord div.details.long div.listItems header {
		background:#e6e6e6;
		height:33px; line-height:33px;
	}
	.workplace div.showRecord div.details.long div.listItems header div.box {
		padding:0 0 0 1%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.hide {
		display:none;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.first {
		width:6%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.vshort {
		width:11%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.middle {
		width:22%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.xmiddle {
		width:32%;
	}
	.workplace div.showRecord div#totals {
		width:50%;
		margin:3% 0;
	}
	.workplace div.showRecord div#totals label, 
	.workplace div.showRecord div#totals span {
		width:40%;
		padding:2% 3%;
	}
	.workplace div.showRecord div#totals label {
		width:55%;
	}
	/* -- settings -- */
	.workplace div.showRecord a#edit {
		padding-left:6%;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		width:90%;
		padding:3%;
	}
	.workplace div.reportArea div.oneDiv {
		width:33%;
		margin:0 0 1.5% 0;
		padding-bottom:1.5%;
		border-bottom:1px dotted #bbbbbb;
	}
	.workplace div.reportArea div#clear {
		display:none;
	}
	.workplace div.reportArea div.oneDiv input[type="radio"] {
		margin:1.5% 4% 0 0;
	}
	/* -- */
	.workplace div.reportArea div#filterCmdPrcess {
		width:99%;
		margin-top:2%;
	}
	.workplace div.reportArea div#filterCmdPrcess #filterWrap {
		width:100%;
		margin-right:0;
	}
	.workplace div.reportArea button {
		width:16%;
		margin:0.5% 0 0 20%;
		height:31px;
	}
	.workplace div.reportArea label#process {
		margin:2% 0 0 3%;
	}
	.workplace div.reportArea div#filterWrap div.filter {
		margin-bottom:1%;
	}
	.workplace div.reportArea div#filterWrap div.filter label {
		width:20%;
		margin-top:1%;
	}
	.workplace div.reportArea div#filterWrap div.filter input[type="text"],
	.workplace div.reportArea div#filterWrap div.filter input[type="month"], 
	.workplace div.reportArea div#filterWrap div.filter select {
		width:25%;
	}
	.workplace div.reportArea div#filterWrap div.filter select {
		width:26.3%;
		margin-right:1.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter select.long {
		width:26.3%;
		margin-right:1.5%;
	}
	/* -- income statement */
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="radio"] {
		margin:4% 3% 0 0;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="radio"] ~ span {
		margin:3.5% 4% 0 0;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="month"], 
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment select {
		width:60%;
		padding:0 0 0 3%;
	}
	
}
@media only screen and (max-width:603px) { /* testing 760px, upload 603px maxamud jiif */
	body {
		/*background:#FF5BFF;  pinky */
	}
	div#loginWrap div#content {
		width:90%;
		margin:0 5%;
	}
	div#loginWrap div#content #logoHolder {
		margin:10% 5% 0;
	}
	div#loginWrap div#content #logoHolder img {
		width:80px;
		height:80px;
	}
	div#loginWrap div#content h3 {
		font-size:1.15em;
	}
	div#loginWrap div.record span#icon {
		font-size:1.2em;
	}
	div#loginWrap div.record input.loginText {
		font-size:0.87em;
	}
	div#loginWrap div.record span#rememberLbl {
		margin-top:1%;
		font-size:0.95em;
	}
	div#loginWrap div.record a#forgot {
		font-size:0.95em;
	}
	div#loginWrap div.record label#copyRight {
		font-size:0.95em;
	}
	.workplace div.theForm div.record div.switch {
		left:0;
		width:54px;
		height:28px;
	}
	.workplace div.theForm div.record div.switch:before {
		width:54px;
		height:28px;
	}
	.workplace div.theForm div.record div.switch:after {
		height:26px;
		width:26px;
	}
	.workplace div.theForm div.record div.switch.switchOn:after {
		left:28px !important;
	}
	.workplace div.theForm div.record span#checkReceipt {
		margin-top:2%;
		margin-left:0;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass div#topBar, div#forgotPass div#bottomBar {
		height:78px;
	}
	div#forgotPass div#bottomBar {
		height:6px;
	}
	div#forgotPass div#topBar #logoWrap {
		width:86%;
		margin:1% 7% 0;
	}
	div#forgotPass #logoWrap img {
		width:140px;
	}
	/* --- */
	div#forgotPass div#section {
		width:86%;
		margin:5% 7% 0;
	}
	div#forgotPass div#section label.title {
		margin:1% 0;
	}
	div#forgotPass div#section div#text {
		font-size:1em;
	}
	div#forgotPass div#text p {
		font-size:0.95em;
		line-height:24px;
	}
	div#forgotPass div#text p:first-child {
		margin:0 0 7px;
	}
	/* --- */
	div#forgotPass div#section div.record.two {
		margin-top:4%;
	}
	div#forgotPass div#section div.buttons {
		width:100%;
		height:auto;
		margin:2% 0;
		padding:0;
		background:none;
	}
	div#forgotPass div.record #qybMidig {
		margin:0;
	}
	div#forgotPass div.record input {
		margin:2% 1.5% 0 0;
	}
	/* --- dashboard */
	#sidebar ul ul {
		padding-bottom:1em;
		width:80%;
		left:40px;
	}
	#sidebar ul ul li {
		margin:0;
	}
	/* --- */
	#middlebar div.topMBar #programName {
		margin-left:10%;
	}
	#middlebar div.topMBar #topIcons {
		padding-right:3%;
	}
	#middlebar #topIcons div.dropDown {
		left:-110%;
		width:200%;
		top:50px;
	}
	/* --- */
	#middlebar div.nextMBar div#title {
		margin:5% 3% 0 3%;
	}
	#middlebar div.nextMBar div#title ~ label {
		margin:5.3% 0 0;
	}
	#middlebar div.nextMBar div#chart, 
	#middlebar div.nextMBar div#hints {
		float:left;
		width:94%;
		margin:1% 0 1% 3%;
	}
	#middlebar div.nextMBar div#chart div#cinwan {
		min-height:46px;
	}
	#middlebar div.nextMBar div#chart div#graph {
		min-height:228px;
	}
	#middlebar div.nextMBar div#chart div#currency, 
	#middlebar div.nextMBar div#chart label {
		font-size:1.1em;
		min-height:46px; line-height:46px;
	}
	#middlebar div.nextMBar div#chart label {
		text-transform:none;
	}
	#middlebar div.nextMBar div#hints div.hint {
		width:48.5%;
		height:70px;
		background:#8b5c4e !important;
	}
	#middlebar div.nextMBar div#hints div.hint.two, 
	#middlebar div.nextMBar div#hints div.hint.four {
		float:right !important;
		background:#8b5c4e !important;
	}
	#middlebar div.nextMBar div#hints div.hint.three {
		background:#f6a975 !important;
	}
	#middlebar div.nextMBar div#hints div.hint.four {
		background:#f8c86d !important;
	}
	#middlebar div.nextMBar div.hint div#currency {
		margin-top:5%;
		font-size:1.4em;
	}
	#middlebar div.nextMBar div.hint label {
		margin-top:1.5%;
		font-size:0.8em !important;
	}
	/* --- */
	#middlebar div.lastMBar header {
		padding:2.5% 0 2.5% 3%;
	}
	#middlebar div.lastMBar div.box article {
		height:auto;
		min-height:100px;
		max-height:250px;
	}
	#middlebar div.lastMBar div.box article #timeline {
		min-height:60px;
	}
	#middlebar div.lastMBar div.box article #timeline label#time {
		margin:0 0 1% 6%; 
	}
	/* ------------------------ load page ------------------------ */
	#middlebar div.positionBar {
		width:94%;
		padding:2% 3% 0.5%;
	}
	#middlebar div.positionBar label {
		left:8px;
	}
	.workplace #loadPage #command, 
	.workplace #loadPage #dynamicQnd {
		width:94%;
		padding:2% 3%;
	}
	.workplace #loadPage #dynamicQnd {
		padding:2% 3.2%;
		width:93.6%;
	}
	/* ------------------------ unknown -------------------------- */
	div.unknown {
		background:#fff;
	}
	div.unknown h3, div.unknown p, div.unknown ul {
		width:90%;
	}
	div.unknown h3 {
		margin:1% 2%;
	}
	div.unknown ul {
		margin:0.5% 0 1% 5%;
	}
	div.unknown p, div.unknown ul li {
		font-size:85%;
	}
	.workplace #loadPage #command #searchBox {
		width:100%;
	}
	.workplace #loadPage #command .buttons {
		float:left;
		width:100%;
		margin-bottom:2%;
	}
	.workplace #loadPage #command #searchBox input.srchInput {
		height:36px;
	}
	div#forgotPass div.buttons input.btnSubmit, 
	.workplace #loadPage div.buttons a.btnAddNew, 
	.workplace div.theForm .btnSubmit, 
	.workplace div.theForm .popupBody .btnAdd {
		background: #b96125;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
	}
	div#forgotPass div.buttons input.btnSubmit:hover, 
	.workplace #loadPage div.buttons a.btnAddNew:hover, 
	.workplace div.theForm .btnSubmit:hover,
	.workplace div.theForm .popupBody .btnAdd:hover {
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
	}
	.workplace #loadPage div.buttons a.btnAddNew {
		height:36px; line-height:36px;
		font-size:1em;
		box-sizing:border-box;
	}
	.workplace #loadPage #command #searchBox div.suggest, 
	.workplace div.twoCols div#searchBox div.suggest {
		width:92.7%;
		margin:36px 0 0;
		padding:2% 0.5%;
	}
	.workplace #loadPage #command #searchBox div.suggest #time, 
	.workplace div.twoCols div#searchBox div.suggest #time, 
	.workplace div.theForm div.suggest #time {
		margin:0 4.5%;
	}
	/* -- */
	.workplace #loadPage #dynamicQnd #foundNum {
		width:100%;
		margin:0 0 2%;
		padding:0 2%;
		height:30px; line-height:30px;
		box-sizing:border-box;
	}
	.workplace #loadPage #dynamicQnd #filters {
		float:left;
		width:100%;
	}
	.workplace #loadPage #dynamicQnd #filters > div.empty {
		display:none;	
	}
	.workplace #loadPage #dynamicQnd #filters label {
		width:auto;
		height:35px; line-height:35px;
		margin:0 11% 0 2%;
		text-align:left;
	}
	.workplace #loadPage #dynamicQnd #filters select {
		float:left;
		width:45%;
		height:36px;
	}
	.workplace #loadPage #dynamicQnd #dataTable {
		border-top:none;
	}
	.workplace #loadPage #dataTable div#loading {
		margin:4% 0 0;
		font-size:1em;
	}
	.workplace #loadPage #dataTable div#loading::after, 
	.workplace div.twoCols div.dynamicData #loading::after {
		padding-left:2%;
	}
	.workplace #loadPage #dataTable p#noRecords {
		margin:3% 0;
		font-size:0.85em;
	}
	.workplace #loadPage #dataTable #record {
		font-size:83%;
	}
	.workplace #loadPage #dataTable div.cave {
		display:none !important;
	}
	.workplace #loadPage #dataTable div.cave:nth-child(1), 
	.workplace #loadPage #dataTable div.cave:nth-child(2), 
	.workplace #loadPage #dataTable div.cave:nth-child(3) { 
		display:inline !important;
	}
	.workplace #loadPage #dataTable div.cave.button { 
		width:15%;
	}
	.workplace #loadPage #dataTable div.cave:nth-child(2), 
	.workplace #loadPage #dataTable div.cave:nth-child(3) { 
		width:auto;
	}
	.workplace #loadPage #dataTable div.cave.short {
		width:15%;
	}
	.workplace #loadPage #dataTable div.cave.lshort {
		width:22%;
	}
	.workplace #loadPage #dataTable div.cave.smiddle, 
	.workplace #loadPage #dataTable div.cave.middle {
		width:25%;
	}
	.workplace #loadPage #dataTable div.cave.lmiddle {
		width:40%;
	}
	.workplace #loadPage #dataTable div.cave.long, 
	.workplace #loadPage #dataTable div.cave.vlong {
		width:45%;
	}
	.workplace #loadPage #dataTable div.cave:first-child {
		border-left:none !important;
		margin:0;
	}
	.workplace #loadPage #btnDisplayMore {
		width:100%;
		margin:3% 0;
		height:32px; line-height:32px;
	}
	/* --- two Cols --- */
	.workplace div.twoCols div#searchBox input.srchInput {
		padding-left:6%;
		height:36px;
	}
	.workplace div.twoCols div.dynamicData {
		min-height:100px;
		border:none;
		border-top:1px dotted #cccccc;
	}
	.workplace div.twoCols div.dynamicData div.record {
		padding:1.5% 2%;
	}
	.workplace div.twoCols div.record div#batono {
		width:15%;
		margin-top:0;
	}
	.workplace div.twoCols div.record label#cinwan {
		width:56%;
		height:16px;
	}
	.workplace div.twoCols div.record label#sumada {
		width:22%;
		height:16px;
	}
	.workplace div.twoCols div#batono a {
		margin-right:14px;
	}
	/* ------------------------- the form ------------------------ */
	.workplace p#info {
		width:92%;
		margin:1.5% 2% 0;
		padding:1.5% 2%;
	}
	.workplace div.reNotify {
		width:91.8%;
		margin:2% 0 0.5% 2%;
		padding:1.5% 2%;
	}
	.workplace a#btnCancel {
		float:left;
		width:96%;
		margin:2% 2% 0;
		height:33px; line-height:33px;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
		background:none;
		background:none;
		background:none;
		background:none;
		background:none;
		background:none;
		background-color:#fff;
		border:1px solid #dcdcdc;
	}
	.workplace div.theForm div.record {
		padding:1% 0 2%;
	}
	.workplace div.theForm div.record .twoCol.two {
		padding:1% 2.5% 0;
		margin-top:2%;
	}
	.workplace div.theForm div.record #leftPrt {
		width:100% !important;
		margin:0 0 0.2%;
		font-size:0.87em;
	}
	.workplace div.theForm div.record #rghtPrt {
		width:100% !important;
	}
	.workplace div.theForm div.record span#red {
		left:5px;
	}
	.workplace div.theForm input, .workplace div.theForm select, .workplace div.theForm textarea {
		height:32px;
		font-size:0.85em;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	.workplace div.theForm select {
		height:34px;
	}
	.workplace div.theForm textarea {
		height:auto;
		font-size:1.05em;
	}
	.workplace div.theForm input[type="radio"] {
		height:auto;
	}
	.workplace div.theForm input.vlarge, .workplace div.theForm textarea.vlarge {
		width:98%;
	}
	.workplace div.theForm input.large, .workplace div.theForm select.large {
		width:62%;
	}
	.workplace div.theForm input.middle {
		width:48%;
	}
	.workplace div.theForm input.lshort {
		width:20%;
	}
	.workplace div.theForm select.large {
		width:65%;
	}
	.workplace div.theForm select.middle {
		width:49%;
	}
	.workplace div.theForm select.vmiddle {
		width:36%;
	}
	.workplace div.theForm select.short {
		width:18%;
	}
	.workplace div.theForm div#tweet_feed {
		margin:1.5% 0 0 1%;
	}
	.workplace div.theForm .btnSubmit {
		margin:2% 2.5%;
		width:95%; height:37px; line-height:37px;
		padding:0;
	}
	.workplace div.theForm.chngPass .btnSubmit {
		margin:2% 0 2% 2.5%;
		padding:1.5% 7%;
	}
	.workplace div.theForm label.process {
		margin:4.5% 0 0 4%;
	}
	.workplace div.theForm.chngPass label.process {
		margin:4.5% 0 0 4%;
	}
	/*--- user add ---*/
	.workplace div.theForm div#header {
		width:96%;
		margin:3% 2%;
		padding:0 0 1%;
		border-bottom:1px dotted #999;
	}
	.workplace div.theForm input#checkAll {
		margin:0 1.5% 0 7%;
		transform:scale(1.2,1.2);
	}
	.workplace div.theForm span#tickAll {
		margin:1.2% 1% 0 2%;
	}
	.workplace div.theForm div#userRights div.rights {
		width:100%;
	}
	.workplace div.theForm div#userRights fieldset {
		margin-bottom:3%;
		padding:1% 0 2%;
		min-height:10px;
	}
	.workplace div.theForm div#userRights fieldset legend {
		margin-left:24px;
		padding:7px 22px;
	}
	.workplace div.theForm div#userRights fieldset > div {
		margin-bottom:0;
	}
	.workplace div.theForm div#userRights input[type="checkbox"] {
		transform:scale(1.2,1.2);
	}
	.workplace div.theForm div#userRights label.tickOne {
		margin:1.2% 0 0 3%;
	}
	.workplace div.theForm div.suggest {
		width:79.6%;
		padding:2% 0;
	}
	.workplace div.theForm div.displayInfo {
		width:98%;
		margin:1% 0;
	}
	.workplace div.theForm div.displayInfo p#midigta {
		padding-left:3%;
	}
	/* ----------------  popup form  -------------------*/
	.workplace div.theForm a#addNew {
		margin:0 !important;
		width:20px; height:34px; line-height:34px;
		font-size:1.1em;
	}
	.workplace div.theForm div.popupContainer {
		width:580px;
		top:50px;
	}
	.workplace div.theForm .popupBody .btnAdd {
		padding:0 9%;
		height:34px; line-height:32px;
	}
	/* ------  add to list ------ */
	.workplace div.theForm div.record .listCaves {
		padding:1.5% 2.5%;
	}
	.workplace div.theForm .listCaves div.cave {
		margin:0 1% 2.5% 0;
		font-size:0.85em;
	}
	.workplace div.theForm .listCaves div.cave.xmiddle {
		width:42%;
	}
	.workplace div.theForm .listCaves div.cave.middle {
		width:38% !important;
	}
	.workplace div.theForm .listCaves div.cave.mshort {
		width:21% !important;
	}
	.workplace div.theForm .listCaves div.cave.action {
		width:24%;
	}
	/* --- */
	.workplace div.theForm.distrPrdts div.cave.action span.responsive {
		display:inline;
	}
	.workplace div.theForm div.cave input {
		height:32px;
		font-size:1em;
	}
	.workplace div.theForm div.cave select {
		height:34px;
		font-size:1em;
		padding-left:4%;
	}
	.workplace div.theForm a.addToList {
		height:34px; line-height:34px;
		font-size:1em;
	}
	.workplace div.theForm a.addToList::before {
		left:-7px;
	}
	.workplace div.theForm .btnSubmit.inline {
		margin:0;
		width:100% !important;
		height:34px; line-height:34px;
		font-size:1.1em;
	}
	/* -- the list -- */
	.workplace div.theForm div#list div.column { 
		font-size:0.85em;
	}
	.workplace div.theForm div#list header div.column { 
		height:30px; line-height:30px;
	}
	.workplace div.theForm div#list div.listItem div.column { 
		min-height:30px;
	}
	.workplace div.theForm div#list div.column input {
		height:28px;
		font-size:1em;
	}
	.workplace div.theForm div#list div.column a#remove {
		width:0px;
		overflow:hidden;
		background:url(../images/system/b_delete.png) 0 6px no-repeat;
	}
	/* -- add purchase -- */
	.workplace div.theForm.purchase fieldset {
		padding:2% 1%;
	}
	.workplace div.theForm.purchase fieldset legend {
		padding:7px 30px 7px 15px;
	}
	.workplace div.theForm.purchase fieldset > p input {
	}
	.workplace div.theForm.purchase .btnSubmit {
		margin:2% 2.5%;
		width:95%; height:37px; line-height:37px;
		padding:0;
	}
	/* ----------------------- show Record ----------------------- */
	.workplace div.showRecord {
		width:95%;
		margin:1.5% 0;
		padding:2% 2.5%;
	}
	.workplace div.showRecord #leftSide header {
		height:34px; line-height:34px;
	}
	.workplace div.showRecord #leftSide #colLeft {
		padding:1.5% 0;
	}
	.workplace div.showRecord #leftSide #colRight {
		padding:1.5% 4% 1.5% 2%;
	}
	.workplace div.showRecord #leftSide #colRight p {
		margin:0 0 1.5%;
	}
	.workplace div.showRecord #leftSide span.status {
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	.workplace div.showRecord #rightSide div.imgHolder {
		width:26%;
	}
	.workplace div.showRecord #rightSide a#back {
		margin:0 0 2% 4%;
	}
	/* -- profile -- */
	.workplace div.showRecord #rightSide div.imgWrap {
		width:29%;
	}
	/* --- show user -- */
	.workplace div.showRecord div#header {
		padding:3% 0;
	}
	.workplace div.showRecord div#rights div.userRights {
		width:48%;
		margin:2% 0 0 1%;
	}
	.workplace div.showRecord div.userRights:first-child, 
	.workplace div.showRecord div.userRights:nth-child(3) {
		margin:2% 0 0 !important;
	}
	.workplace div.showRecord div.userRights fieldset {
		min-height:200px;
	}
	.workplace div.showRecord div.userRights fieldset legend {
		margin-left:15px;
		padding:7px 30px 7px 15px;
	}
	/* -- show list items -- */
	.workplace div.showRecord div.details.long header, 
	.workplace div.showRecord div.details.long div.listItems #record {
		height:33px; line-height:33px;
	}
	.workplace div.showRecord div.details.long div.listItems div.box {
		padding:0 0 0 1%;
		height:33px;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.first {
		width:7%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.vshort {
		width:12%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.middle {
		width:18%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.xmiddle {
		width:30%;
	}
	.workplace div.showRecord div#totals {
		width:70%;
	}
	/* -- settings -- */
	.workplace div.showRecord a#edit {
		padding-left:7%;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		width:94%;
		margin:1.5% 0;
		min-height:100vh;
		font-size:0.92em;
	}
	.workplace div.reportArea div.oneDiv {
		width:45%;
	}
	/* -- */
	.workplace div.reportArea button {
		width:22%;
	}
	.workplace div.reportArea label#process {
		margin:2.3% 0 0 3%;
	}
	.workplace div.reportArea label.error {
		margin:1.5% 0 0 2%;
	}
	.workplace div.reportArea div#filterWrap div.filter {
		margin-bottom:1.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter input[type="text"],
	.workplace div.reportArea div#filterWrap div.filter input[type="month"], 
	.workplace div.reportArea div#filterWrap div.filter select {
		width:30%;
	}
	.workplace div.reportArea div#filterWrap div.filter select {
		width:31.3%;
	}
	.workplace div.reportArea div#filterWrap div.filter select.long {
		width:31.3%;
	}
	/* -- income statement */
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#mdgDiv, 
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#dhexDiv {
		width:40%;
	}
	
	
}

@media only screen and (max-width:480px) { /* testing 680px, upload 480px mahad istag */
	body {
		/*background:#f0ff00;  yellow */
	}
	div#loginWrap div#content #logoHolder {
		margin:7% 5% 0;
	}
	div#loginWrap div#content #logoHolder img {
		width:65px;
		height:65px;
	}
	div#loginWrap div#content h3 {
		margin:5%;
		font-size:1.1em;
	}
	div#loginWrap div#content div.record {
		width:100%;
		margin:2% 0;
	}
	div#loginWrap div.record span#icon {
		width:12%;
		height:34px; line-height:34px;
		font-size:1.2em;
	}
	div#loginWrap div.record input.loginText {
		width:87.7%;
		height:34px;
		font-size:0.85em;
	}
	div#loginWrap label.error {
		padding:0 0 0 5%;
		font-size:0.9em;
		background-size:auto;
	}
	div#loginWrap div#content div.record div.switch, 
	.workplace div.theForm div.record div.switch {
		width:49px;
		height:27px;
	}
	div#loginWrap div#content div.record div.switch:before, 
	.workplace div.theForm div.record div.switch:before {
		width:49px;
		height:27px;
	}
	div#loginWrap div#content div.record div.switch:after, 
	.workplace div.theForm div.record div.switch:after {
		height:25px;
		top:1.5px;
	}
	.workplace div.theForm div.record div.switch.switchOn:after {
		left:24px !important;
	}
	.workplace div.theForm div.record span#checkReceipt {
		margin-top:2.7%;
		font-size:0.9em;
	}
	div#loginWrap div.record a#forgot {
		text-decoration:underline;
	}
	div#loginWrap div.record #submitBtn {
		height:36px;
		font-size:1em;
	}
	div#loginWrap div.record label#copyRight {
		margin:5%;
		font-size:0.9em;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass div#topBar, div#forgotPass div#bottomBar {
		height:66px;
	}
	div#forgotPass div#bottomBar {
		height:4px;
	}
	div#forgotPass div#topBar #logoWrap {
		width:100%;
		margin:1% 0;
		text-align:center;
	}
	div#forgotPass #logoWrap img {
		width:110px;
	}
	/* --- */
	div#forgotPass div#section label.title {
		font-size:1.1em;
		margin:1% 0 3%;
	}
	div#forgotPass div#text p {
		font-size:0.85em;
		line-height:21px;
	}
	div#forgotPass div#text p:first-child {
		margin:0 0 10px;
	}
	/* --- */
	div#forgotPass div#section div.record.two {
		margin-top:6%;
	}
	div#forgotPass div#section div.buttons {
		margin:3% 0;
	}
	div#forgotPass div.record #qybMidig {
		margin:0;
		font-size:0.85em;
	}
	div#forgotPass div.record input {
		width:98%;
		height:30px;
		margin:3% 0 0;
		padding:0 0 0 2%;
		font-size:0.8em;
		letter-spacing:0.2px;
	}
	div#forgotPass div.record label.qaladka {
		margin:2% 0 0;
	}
	/* --- */
	div#forgotPass div.buttons input.btnSubmit {
		margin:0 0 2%;
		padding:2% 10%;
		font-size:1em;
	}
	/* --- dashboard */
	#sidebar .smartphone-menu-trigger {
		height:44.5px;
	}
	/* --- */
	#middlebar div.topMBar #programName {
		margin-left:12%;
	}
	#middlebar div.topMBar #programName > span {
		left:8px;
		font-size:0.9em;
	}
	#middlebar #topIcons div.dropDown {
		left:-160%;
		width:250%;
	}
	/* --- */
	#middlebar div.nextMBar div#chart div#cinwan {
		width:100%;
		padding:0.7em 0;
		min-height:1px;
		background:#3cabc7;
		box-sizing:border-box;
	}
	#middlebar div.nextMBar div#chart div#graph {
		display:none;
	}
	#middlebar div.nextMBar div#chart div#currency, 
	#middlebar div.nextMBar div#chart label {
		width:100%;
		margin:0 0 0.5%;
		font-size:0.8em;
		min-height:1px; line-height:normal;
		text-align:center;
	}
	#middlebar div.nextMBar div#chart div#currency {
		font-size:1.3em;
	}
	#middlebar div.nextMBar div#chart label {
		text-transform:uppercase;
	}
	#middlebar div.nextMBar div#hints div.hint {
		width:49%;
		border:none;
	}
	#middlebar div.nextMBar div.hint div#currency {
		margin-top:6%;
		font-size:1.3em;
	}
	/* --- */
	#middlebar div.lastMBar header {
		padding:3% 0 3% 3%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time, 
	#middlebar div.lastMBar div.box article #timeline #details {
		width:91%;
		margin:0 0 0 8%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time {
		margin:0 0 1% 8%; 
	}
	/* -- */
	#middlebar div.lastMBar div.box article #record div.cave {
		font-size:0.85em;
	}
	#middlebar div.lastMBar div.box article div.cave.short {
		width:13%;
	}
	#middlebar div.lastMBar div.box article div.cave.middle {
		width:17%;
	}
	#middlebar div.lastMBar div.box article p#noRecord {
		font-size:0.85em;
	}
	/* ------------------------ load page ------------------------ */
	div.unknown h3, div.unknown p, div.unknown ul {
		color:#444; 
	}
	div.unknown ul {
		margin:0.5% 0 1% 6%;
	}
	.workplace #loadPage #command #searchBox input.srchInput {
		padding-left:7.5%;
		height:34px;
		font-size:0.8em;
	}
	.workplace #loadPage div.buttons a.btnAddNew {
		height:34px; line-height:34px;
	}
	.workplace #loadPage #command #searchBox div.suggest, 
	.workplace div.twoCols div#searchBox div.suggest {
		margin:34px 0 0;
		padding:2.5% 0.5%;
	}
	.workplace #loadPage #command #searchBox div.suggest #time, 
	.workplace div.twoCols div#searchBox div.suggest #time, 
	.workplace div.theForm div.suggest #time {
		margin:0 5%;
		padding-left:7%;
	}
	.workplace #loadPage #command #searchBox div.suggest p,
	.workplace div.twoCols div#searchBox div.suggest p, 
	.workplace div.theForm div.suggest p {
		font-size:83%;
	}
	/* -- */
	.workplace #loadPage #dynamicQnd #foundNum {
		margin:1% 0 3%;
		padding:0 2%;
		height:30px; line-height:30px;
		box-sizing:border-box;
	}
	.workplace #loadPage #dynamicQnd #filters > div {
		width:48%;
	}
	.workplace #loadPage #dynamicQnd #filters > div:nth-child(1) {
		float:right;
	}
	.workplace #loadPage #dynamicQnd #filters label {
		height:30px; line-height:30px;
		margin:0 0 0 2%;
		font-size:85%;
	}
	.workplace #loadPage #dynamicQnd #filters select {
		float:right;
		width:auto; min-width:65%;
		height:30px;
	}
	.workplace #loadPage #dynamicQnd #dataTable {
		margin:2% 0;
	}
	.workplace #loadPage #dataTable div#loading {
		font-size:0.9em;
	}
	.workplace #loadPage #dataTable div#loading::after, 
	.workplace div.twoCols div.dynamicData #loading::after {
		padding-left:3%;
	}
	.workplace #loadPage #dataTable p#noRecords {
		margin:5% 0;
		font-size:0.85em;
	}
	.workplace #loadPage #dataTable #record {
		font-size:80%;
	}
	.workplace #loadPage #dataTable div.cave {
		height:30px; line-height:30px;
	}
	.workplace #loadPage #dataTable #record.header div.cave {
		height:32px; line-height:32px;
	}
	.workplace #loadPage #btnDisplayMore {
		font-size:0.75em;
	}
	/* --- two Cols --- */
	.workplace div.twoCols div#searchBox {
		margin:2% 3% 1%;
	}
	.workplace div.twoCols div#searchBox input.srchInput {
		padding-left:7.5%;
		height:34px;
	}
	.workplace div.twoCols div.dynamicData div.record {
		padding:2%;
		font-size:83%;
	}
	.workplace div.twoCols div#batono a {
		margin-right:12px;
	}
	/* ------------------------- the form ------------------------ */
	.workplace a#btnCancel {
		margin:1% 2% 0;
		height:31px; line-height:31px;
	}
	.workplace div.theForm div.record #leftPrt {
		margin:0;
	}
	.workplace div.theForm div.record #rghtPrt {
		width:100% !important;
	}
	.workplace div.theForm input, .workplace div.theForm select, .workplace div.theForm textarea {
		height:30px;
		font-size:0.8em;
	}
	.workplace div.theForm select {
		height:32px;
	}
	.workplace div.theForm textarea {
		height:auto;
		font-size:1em;
		padding:1.5% 0 0 2%;
	}
	.workplace div.theForm input[type="radio"] {
		height:auto;
	}
	.workplace div.theForm input.vlarge, .workplace div.theForm textarea.vlarge {
		width:97.8%;
	}
	.workplace div.theForm input.mlarge, .workplace div.theForm textarea.mlarge {
		width:90%;
	}
	.workplace div.theForm input.large, .workplace div.theForm select.large {
		width:70%;
	}
	.workplace div.theForm input.middle {
		width:49%;
	}
	.workplace div.theForm input.lshort {
		width:30%;
	}
	.workplace div.theForm select.large {
		width:75%;
	}
	.workplace div.theForm select.middle {
		width:49%;
	}
	.workplace div.theForm select.vmiddle {
		width:40%;
	}
	.workplace div.theForm select.short {
		width:25%;
	}
	.workplace div.theForm div#tweet_feed {
		font-size:0.8em;
	}
	.workplace div.theForm div.record span.check {
		margin:1.5% 0 0 1.5%;
	}
	.workplace div.theForm div.record span#add3Spaces {
		margin-left:3%;
	}
	.workplace div.theForm label.error {
		font-size:0.83em;
	}
	.workplace div.theForm .btnSubmit {
		height:35px; line-height:35px;
	}
	.workplace div.theForm.chngPass .btnSubmit {
		margin:2% 2.5%;
		width:95%;
		padding:0;
	}
	.workplace div.theForm label.process {
		width:100%;
		margin:1% 0 3%;
		background:url(../images/system/loading.gif) center no-repeat;
	}
	.workplace div.theForm.chngPass label.process {
		margin:1% 0 3%;
	}
	/*--- user add ---*/
	.workplace div.theForm div#header {
		width:95%;
		margin:3% 2.5% 2%;
		font-size:0.9em;
	}
	.workplace div.theForm div#userRights fieldset {
		width:97%;
		min-height:10px;
	}
	.workplace div.theForm div#userRights fieldset legend {
		margin-left:23px;
		padding:7px 40px 7px 30px;
	}
	.workplace div.theForm div#userRights fieldset > div {
		width:45%;
	}
	.workplace div.theForm div#userRights label.tickOne {
		margin:2.5% 0 0 3%;
		font-size:0.85em;
	}
	.workplace div.theForm div.suggest {
		width:94%;
	}
	.workplace div.theForm div.suggest #time {
		width:90%;
		margin:0 1.5%;
	}
	.workplace div.theForm div.displayInfo label#header {
		padding:1.5% 3%;
		font-size:0.9em;
	}
	.workplace div.theForm div.displayInfo p {
		font-size:0.83em;
	}
	.workplace div.theForm div.displayInfo p#midigta {
		padding-left:3%;
	}
	/* ----------------  popup form  -------------------*/
	.workplace div.theForm a#addNew {
		height:32px; line-height:32px;
	}
	.workplace div.theForm div.popupContainer {
		width:460px;
	}
	.workplace div.theForm .popupHeader {
		height:34px; line-height:36px;
		font-size:0.9em;
	}
	.workplace div.theForm .popupHeader span.close {
		height:34px; line-height:34px;
	}
	.workplace div.theForm .popupBody label {
		font-size:0.85em;
	}
	.workplace div.theForm .popupBody a#reload {
		height:31px; line-height:31px;
	}
	.workplace div.theForm .popupBody span#clear {
		height:7px;
	}
	.workplace div.theForm .popupBody .btnAdd {
		height:32px; line-height:32px;
		font-size:0.95em;
	}
	.workplace div.theForm .popupBody label.oops {
		width:62%;
		padding:0 0 0 5%;
		line-height:20px;
		font-size:0.85em;
	}
	/* ------  add to list ------ */
	.workplace div.theForm .listCaves div.cave.xmiddle {
		width:55%;
	}
	.workplace div.theForm .listCaves div.cave.middle {
		width:38% !important;
	}
	.workplace div.theForm .listCaves div.cave.mshort {
		width:21% !important;
	}
	.workplace div.theForm .listCaves div.cave.action {
		width:24%;
	}
	/* --- */
	.workplace div.theForm.distrPrdts div.cave.action span.responsive {
		display:inline;
	}
	.workplace div.theForm div.cave input {
		height:30px;
	}
	.workplace div.theForm div.cave select {
		height:32px;
	}
	.workplace div.theForm a.addToList {
		height:32px; line-height:33px;
	}
	.workplace div.theForm a.addToList::before {
		left:-7px;
	}
	.workplace div.theForm .btnSubmit.inline {
		height:32px; line-height:32px;
	}
	.workplace div.theForm .listCaves label.error {
		margin:1% 0;
	}
	/* -- the list -- */
	.workplace div.theForm div#list div.column { 
		padding:0.5% 0;
		font-size:0.8em;
	}
	.workplace div.theForm div#list header div.column { 
		height:26px; line-height:26px;
	}
	.workplace div.theForm div#list div.listItem div.column { 
		min-height:26px;
	}
	.workplace div.theForm div#list div.column.first {
		width:8%;
	}
	.workplace div.theForm.sales div#list div.column:last-child, 
	.workplace div.theForm.purchase div#list div.column:last-child {
		width:8%;
	}
	.workplace div.theForm.trnsfrPrdt div#list div.column:last-child {
		width:15%;
	}
	.workplace div.theForm div#list div.listItem div.column.first {
		padding:1.5% 0 0;
	}
	.workplace div.theForm div#list div.column input {
		font-size:0.95em;
	}
	/* -- add purchase -- */
	.workplace div.theForm.purchase fieldset {
		margin:2% 0;
	}
	.workplace div.theForm.purchase fieldset > p input {
		padding:0 0 0 5%;
	}
	.workplace div.theForm.purchase .btnSubmit {
		width:95%;
		height:35px; line-height:35px;
	}
	/* ----------------------- show Record ----------------------- */
	.workplace div.showRecord {
		padding:3% 2.5%;
		font-size:90%;
	}
	.workplace div.showRecord #leftSide header {
		width:100%;
		padding:0 3%;
		box-sizing:border-box;
	}
	.workplace div.showRecord #leftSide #record {
		width:94%;
		padding:0 3%;
	}
	.workplace div.showRecord #leftSide #colRight p {
		margin:0 0 1.8%;
	}
	.workplace div.showRecord #leftSide span.status {
		font-size:0.95em;
	}
	.workplace div.showRecord #rightSide div.imgHolder {
		width:29%;
		margin:0 0 4%;
	}
	.workplace div.showRecord #rightSide a#back {
		width:30%;
		margin:0 0 3% 4%;
	}
	/* -- profile -- */
	.workplace div.showRecord #rightSide div.imgWrap {
		width:40%;
	}
	.workplace div.showRecord div.imgWrap #imgChange {
		font-size:0.9em;
	}
	/* --- show user -- */
	.workplace div.showRecord div#header {
		padding:5% 0 2.5%;
		font-size:1.1em;
	}
	.workplace div.showRecord div#rights div.userRights {
		width:100%;
		margin:2% 0 0 !important;
	}
	.workplace div.showRecord div.userRights fieldset {
		width:97.5%;
		min-height:10px;
	}
	.workplace div.showRecord div.userRights fieldset legend {
		margin-left:20px;
	}
	.workplace div.showRecord div.userRights fieldset > div {
		width:42%;
		margin:0 0 5px 20px;
	}
	.workplace div.showRecord div.userRights fieldset > div:last-child {
		margin-bottom:5px;
	}
	.workplace div.showRecord div.userRights span {
		font-size:1.1em;
	}
	.workplace div.showRecord div.userRights label {
		font-size:0.95em;
	}
	/* -- show list items -- */
	.workplace div.showRecord div.details.long div.listItems div.box {
		padding:0 0 0 1.5% !important;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.first {
		width:9%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.vshort {
		width:14%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.middle {
		width:22%;
	}
	.workplace div.showRecord.purchase div.details.long div.listItems div.box.vshort {
		width:12%;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.xmiddle {
		width:40%;
	}
	.workplace div.showRecord.purchase div.details.long div.listItems div.box.middle {
		width:14%;
	}
	.workplace div.showRecord.purchase div.details.long div.listItems div.box.xmiddle {
		width:30%;
	}
	.workplace div.showRecord div#totals {
		float:left;
		width:100.5%;
		margin:5% 0;
	}
	.workplace div.showRecord div#totals label, 
	.workplace div.showRecord div#totals span {
		padding:1.5% 3%;
	}
	/* -- settings -- */
	.workplace div.showRecord.settings #leftSide #colLeft {
		padding:2% 0;
	}
	.workplace div.showRecord.settings #leftSide #colRight {
		padding:2% 4% 2% 2%;
	}
	.workplace div.showRecord a#edit {
		padding-left:8%;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		padding:4% 3%;
	}
	.workplace div.reportArea div.oneDiv {
		margin:0 0 2% 0;
		padding-bottom:2%;
	}
	/* -- */
	.workplace div.reportArea button {
		width:46.5%;
		margin:2% 0 0 0;
		height:33px;
	}
	.workplace div.reportArea label#process {
		margin:4.5% 0 0 3%;
	}
	.workplace div.reportArea label.error {
		width:90%;
		margin:2% 0;
	}
	.workplace div.reportArea div#filterWrap div.filter label {
		width:98%;
		margin:1% 0 1.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter input[type="text"],
	.workplace div.reportArea div#filterWrap div.filter input[type="month"], 
	.workplace div.reportArea div#filterWrap div.filter select {
		width:45%;
	}
	.workplace div.reportArea div#filterWrap div.filter select {
		width:46.3%;
	}
	.workplace div.reportArea div#filterWrap div.filter select.long {
		width:46.3%;
	}
	/* -- income statement */
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#mdgDiv, 
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#dhexDiv {
		width:48%;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#dhexDiv {
		float:left;
	}
	
}
@media only screen and (max-width:320px) { /* testing 520px, upload 320px maxamud istag */
	body {
		/*background:#FF9F00;  orange */
	}
	div#loginWrap div#content {
		min-height:100vh;
	}
	div#loginWrap div#content #logoHolder img {
		width:60px;
		height:60px;
	}
	div#loginWrap div#content h3 {
		font-size:0.95em;
	}
	div#loginWrap div#content div.record.three {
		margin:3% 0 2%;
	}
	div#loginWrap div.record span#icon {
		width:13%;
		height:32px; line-height:32px;
		font-size:1em;
	}
	div#loginWrap div.record input.loginText {
		width:86.5%;
		height:32px;
		font-size:0.8em;
	}
	div#loginWrap div.tooltip {
		padding:5px 20px;
		font-size:0.8em;
	}
	div#loginWrap label.error {
		padding:0 0 0 6%;
		font-size:0.85em;
		background-size:auto;
	}
	div#loginWrap div#content div.record div.switch, 
	.workplace div.theForm div.record div.switch {
		width:42px;
		height:24px;
	}
	div#loginWrap div#content div.record div.switch:before, 
	.workplace div.theForm div.record div.switch:before {
		width:42px;
		height:24px;
	}
	div#loginWrap div#content div.record div.switch:after, 
	.workplace div.theForm div.record div.switch:after {
		height:23px;
		width:23px;
		top:1px;
	}
	div#loginWrap div#content div.record div.switch.switchOn:after, 
	.workplace div.theForm div.record div.switch.switchOn:after {
		left:19px !important;
	}
	div#loginWrap div.record span#rememberLbl {
		margin-top:1.5%;
		font-size:0.85em;
	}
	.workplace div.theForm div.record span#checkReceipt {
		margin-top:3.5%;
		font-size:0.85em;
	}
	div#loginWrap div.record a#forgot {
		margin-top:1.5%;
		font-size:0.85em;
	}
	div#loginWrap div.record #submitBtn {
		height:32px;
		font-size:0.9em;
	}
	div#loginWrap div.record label#copyRight {
		margin:5%;
		font-size:0.8em;
	}
	/* -------------------- forgot password ---------------------- */
	div#forgotPass div#topBar, div#forgotPass div#bottomBar {
		height:50px;
	}
	div#forgotPass div#bottomBar {
		height:3px;
	}
	div#forgotPass #logoWrap img {
		width:100px;
		top:8px;
	}
	/* --- */
	div#forgotPass div#section {
		width:90%;
		margin:5% 5% 0;
	}
	div#forgotPass div#section label.title {
		font-size:1em;
		margin:3% 0;
	}
	div#forgotPass div#text p {
		font-size:0.8em;
		line-height:19px;
	}
	/* --- */
	div#forgotPass div.record #qybMidig {
		font-size:0.8em;
	}
	div#forgotPass div.record input {
		height:28px;
		margin:2% 0 0;
	}
	div#forgotPass div.record label.qaladka {
		font-size:0.8em;
	}
	/* --- */
	div#forgotPass div.buttons a#back {
		font-size:0.9em;
	}
	div#forgotPass div.buttons input.btnSubmit {
		padding:2% 13%;
	}
	/* --- dashboard */
	#middlebar div.topMBar #programName {
		width:auto;
		margin-left:17%;
		font-size:0.9em;
	}
	#middlebar #topIcons div.dropDown {
		left:-210%;
		width:300%;
	}
	/* --- */
	#middlebar div.nextMBar div#title {
		margin:5% 0 0 3%;
		font-size:0.85em;
	}
	#middlebar div.nextMBar div#title ~ label {
		float:right;
		margin:5.7% 3% 0 0;
		font-size:0.7em;
	}
	#middlebar div.nextMBar div#border {
		margin:1.5% 0 2% 3%;
	}
	#middlebar div.nextMBar div#chart div#cinwan {
		padding:0.5em 0;
		text-align:center;
		position:relative;
	}
	#middlebar div.nextMBar div#chart div#currency, 
	#middlebar div.nextMBar div#chart label {
		display:inline;
		float:none;
		width:auto;
		margin:0; padding:0;
		font-size:0.75em;
		min-height:1px; line-height:normal;
		text-align:left;
	}
	#middlebar div.nextMBar div#chart label {
		text-transform:uppercase;
	}
	#middlebar div.nextMBar div#hints div.hint {
		height:50px;
		background:#663d31 !important;
		border:none;
	}
	#middlebar div.nextMBar div#hints div.hint.two, 
	#middlebar div.nextMBar div#hints div.hint.four {
		background:#663d31 !important;
	}
	#middlebar div.nextMBar div#hints div.hint.three {
		background:#c7763e !important;
	}
	#middlebar div.nextMBar div#hints div.hint.four {
		background:#e0a535 !important;
	}
	#middlebar div.nextMBar div.hint div#currency {
		font-size:1em;
		text-shadow:none;
	}
	#middlebar div.nextMBar div.hint label {
		font-size:0.55em !important;
		text-shadow:none;
	}
	/* --- */
	#middlebar div.lastMBar div.box {
		margin-top:4%;
	}
	#middlebar div.lastMBar div.box.right {
		margin-bottom:4%;
	}
	#middlebar div.lastMBar header {
		padding:3.5% 0 3.5% 3%;
		font-size:0.75em;
	}
	#middlebar div.lastMBar div.box article {
		padding:3% 0;
	}
	#middlebar div.lastMBar div.box article #timeline {
		font-size:0.7em;
	}
	#middlebar div.lastMBar div.box article #timeline label#time, 
	#middlebar div.lastMBar div.box article #timeline #details {
		width:85%;
		margin:0 0 0 10%;
	}
	#middlebar div.lastMBar div.box article #timeline label#time {
		margin:0 0 1% 10%; 
	}
	#middlebar div.lastMBar div.box article #timeline span {
		float:left;
		width:100%;
	}
	/* -- */
	#middlebar div.lastMBar div.box article #record {
		margin:0 0 0.5% 3%;
	}
	#middlebar div.lastMBar div.box article div.cave {
		font-size:0.65em;
		height:14px; line-height:14px;
	}
	#middlebar div.lastMBar div.box article #record div.cave {
		font-size:0.65em;
	}
	#middlebar div.lastMBar div.box article div.cave.middle {
		width:20%;
	}
	#middlebar div.lastMBar div.box article div.cave.long {
		width:55%;
	}
	#middlebar div.lastMBar div.box article p#noRecord {
		font-size:0.65em;
	}
	/* ------------------------ load page ------------------------ */
	#middlebar div.positionBar {
		padding:0 3%;
		margin-bottom:1%;
	}
	#middlebar div.positionBar i {
		font-size:0.95em;
	}
	#middlebar div.positionBar label {
		left:5px;
		font-size:80%;
	}
	.workplace #loadPage #command, 
	.workplace #loadPage #dynamicQnd {
		padding:2.5% 3%;
	}
	/* ------------------------ unknown -------------------------- */
	div.unknown h3 {
		font-size:1em;
	}
	div.unknown ul {
		margin:0.5% 0 2% 8%;
	}
	div.unknown p, div.unknown ul li {
		line-height:19px;
		font-size:80%;
	}
	.workplace #loadPage #command .buttons {
		margin-bottom:2.5%;
	}
	.workplace #loadPage #command #searchBox input.srchInput {
		padding-left:11%;
		height:31px;
		font-size:0.75em;
	}
	.workplace #loadPage div.buttons a.btnAddNew {
		height:31px; line-height:31px;
		font-size:0.93em;
	}
	.workplace #loadPage #command #searchBox div.suggest, 
	.workplace div.twoCols div#searchBox div.suggest {
		width:92.3%;
		margin:31px 0 0;
	}
	.workplace #loadPage #command #searchBox div.suggest #time, 
	.workplace div.twoCols div#searchBox div.suggest #time, 
	.workplace div.theForm div.suggest #time {
		width:85%;
		margin:0 3%;
		padding-left:9%; padding-bottom:1.5%;
		background-size:16px;
	}
	.workplace #loadPage #command #searchBox div.suggest p,
	.workplace div.twoCols div#searchBox div.suggest p, 
	.workplace div.theForm div.suggest p {
		margin-bottom:1.5%;
		font-size:75%;
	}
	/* -- */
	.workplace #loadPage #dynamicQnd #foundNum {
		margin:1% 0 4%;
		padding:0 3%;
		height:29px; line-height:29px;
		font-size:75%;
	}
	.workplace #loadPage #dynamicQnd #filters label {
		height:27px; line-height:27px;
		margin:0;
		font-size:73%;
	}
	.workplace #loadPage #dynamicQnd #filters select {
		height:27px;
	}
	.workplace #loadPage #dynamicQnd #dataTable {
		margin:3% 0;
	}
	.workplace #loadPage #dataTable div#loading {
		margin:5% 0 0;
		font-size:85%;
	}
	.workplace #loadPage #dataTable div#loading::after, 
	.workplace div.twoCols div.dynamicData #loading::after {
		padding-left:5%;
	}
	.workplace #loadPage #dataTable p#noRecords {
		font-size:82%;
	}
	.workplace #loadPage #dataTable #record {
		font-size:75%;
	}
	.workplace #loadPage #dataTable div.cave {
		height:27px; line-height:27px;
		display:none !important;
	}
	.workplace #loadPage #dataTable #record.header div.cave {
		height:29px; line-height:29px;
	}
	.workplace #loadPage #dataTable div.cave:nth-child(1), 
	.workplace #loadPage #dataTable div.cave:nth-child(2) { 
		display:inline !important;
	}
	.workplace #loadPage #dataTable div.cave:nth-child(3) { 
		display:none !important;
	}
	.workplace #loadPage #dataTable div.cave.button { 
		width:20%;
	}
	.workplace #loadPage #dataTable div.cave.short, 
	.workplace #loadPage #dataTable div.cave.lshort, 
	.workplace #loadPage #dataTable div.cave.smiddle, 
	.workplace #loadPage #dataTable div.cave.middle, 
	.workplace #loadPage #dataTable div.cave.lmiddle, 
	.workplace #loadPage #dataTable div.cave.long, 
	.workplace #loadPage #dataTable div.cave.vlong {
		width:70%;
	}
	.workplace #loadPage #dataTable div.cave.button a {
		height:27px; line-height:27px;
		background-size:14px !important;
	}
	.workplace #loadPage #dataTable div.cave.button a.showtitle {
		width:0px; overflow:hidden;
		padding-left:28px;
	}
	/* --- two Cols --- */
	.workplace div.twoCols {
		margin:1% 0 3%;
	}
	.workplace div.twoCols header {
		height:32px; line-height:32px;
		font-size:85%;
	}
	.workplace div.twoCols div#searchBox {
		margin:3% 3% 1%;
	}
	.workplace div.twoCols div#searchBox input.srchInput {
		padding-left:11%;
		height:31px;
		font-size:75%;
	}
	.workplace div.twoCols div.dynamicData {
		margin:2% 3% 3%;
	}
	.workplace div.twoCols div.dynamicData div.record {
		width:100%;
		padding:1.7% 0;
		font-size:80%;
	}
	.workplace div.twoCols div.record div#batono {
		width:17%;
		margin-left:0;
	}
	.workplace div.twoCols div.record label#cinwan {
		width:58%;
	}
	.workplace div.twoCols div.record label#sumada {
		width:20%;
	}
	.workplace div.twoCols div#batono a {
		margin-right:5px;
		background-size:14px !important;
		background-position:left 1px !important;
	}
	/* ------------------------- the form ------------------------ */
	.workplace p#info {
		display:none;
	}
	.workplace div.reNotify {
		width:89.5%;
		padding:3%;
		font-size:0.8em;
	}
	.workplace a#btnCancel {
		font-size:0.85em;
		height:28px; line-height:28px;
	}
	.workplace div.theForm {
		min-height:100vh;
	}
	.workplace div.theForm div.record {
		padding:1.5% 0 0;
	}
	.workplace div.theForm div.record .twoCol.two {
		margin:1.5% 0;
	}
	.workplace div.theForm div.record #leftPrt {
		height:25px; line-height:25px;
		font-size:0.8em;
	}
	.workplace div.theForm div.record #rghtPrt {
		margin-bottom:1%;
	}
	.workplace div.theForm input, .workplace div.theForm select, .workplace div.theForm textarea {
		height:28px;
		font-size:75%;
		margin:0 1.5% 1.5% 0;
		font-size:0.8em;
	}
	.workplace div.theForm select {
		height:30px;
	}
	.workplace div.theForm textarea {
		height:auto;
		font-size:1em;
	}
	.workplace div.theForm input[type="radio"] {
		height:auto;
	}
	.workplace div.theForm input.mlarge, .workplace div.theForm textarea.mlarge {
		width:88%;
	}
	.workplace div.theForm input.large, .workplace div.theForm select.large {
		width:97.8%;
	}
	.workplace div.theForm input.middle {
		width:97.8%;
	}
	.workplace div.theForm input.lshort {
		width:50%;
	}
	.workplace div.theForm select.large {
		width:97.8%;
	}
	.workplace div.theForm select.middle {
		width:100%;
	}
	.workplace div.theForm select.vmiddle {
		width:100%;
	}
	.workplace div.theForm select.short {
		width:50%;
	}
	.workplace div.theForm div.record span.check {
		margin:1.3% 0 2% 2%;
		font-size:0.8em;
	}
	.workplace div.theForm div.record span#add3Spaces {
		margin-left:6%;
	}
	.workplace div.theForm label.error {
		font-size:0.8em;
	}
	.workplace div.theForm .btnSubmit {
		height:32px; line-height:32px;
	}
	/*--- user add ---*/
	.workplace div.theForm div#header {
		margin:5% 2.5% 1%;
		font-size:0.85em;
		border-bottom:none;
	}
	.workplace div.theForm input#checkAll {
		margin:0 1.5% 0 3%;
		transform:scale(1.1,1.1);
	}
	.workplace div.theForm span#tickAll {
		margin:1.5% 1% 0 2%;
		font-size:0.8em;
	}
	.workplace div.theForm div#userRights fieldset {
		width:96.5%;
		margin-bottom:4%;
		padding:1% 0 4%;
	}
	.workplace div.theForm div#userRights fieldset legend {
		width:35%;
		margin-left:15px;
		padding:5px 0 5px 15px;
		font-size:0.85em;
	}
	.workplace div.theForm div#userRights fieldset > div {
		width:44%;
		margin-left:5%;
		margin-top:3%;
	}
	.workplace div.theForm div#userRights input[type="checkbox"] {
		transform:scale(1.1,1.1);
		height:auto; min-height:10px;
		margin-top:1%;
	}
	.workplace div.theForm div#userRights label.tickOne {
		margin:0 0 0 3%;
		font-size:82%;
	}
	.workplace div.theForm div.suggest {
		margin-top:30px;
	}
	.workplace #loadPage #command #searchBox div.suggest p,
	.workplace div.twoCols div#searchBox div.suggest p, 
	.workplace div.theForm div.suggest p {
		font-size:0.8em;
	}
	.workplace div.theForm div.displayInfo {
		width:99%;
	}
	.workplace div.theForm div.displayInfo label#header {
		padding:1.8% 3%;
		font-size:0.8em;
	}
	.workplace div.theForm div.displayInfo p {
		height:26px; line-height:26px;
		font-size:0.75em;
		overflow:hidden;
	}
	.workplace div.theForm div.displayInfo p#midigta {
		padding-left:3%;
	}
	/* ----------------  popup form  -------------------*/
	.workplace div.theForm a#addNew {
		height:30px; line-height:30px;
	}
	.workplace div.theForm div.popupContainer {
		width:300px;
	}
	.workplace div.theForm .popupHeader {
		padding:0 15px;
		height:30px; line-height:30px;
		font-size:0.85em;
	}
	.workplace div.theForm .popupHeader span.close {
		right:5px;
		height:30px; line-height:30px;
		font-size:1.1em;
	}
	.workplace div.theForm .popupBody {
		padding:10px 15px;
	}
	.workplace div.theForm .popupBody label {
		width:100%;
		height:24px; line-height:24px;
		font-size:0.8em;
	}
	.workplace div.theForm .popupBody input, 
	.workplace div.theForm .popupBody select {
		padding-left:3%;
	}
	.workplace div.theForm .popupBody input.dheer {
		width:96%;
	}
	.workplace div.theForm .popupBody select.dheer {
		width:98%;
	}
	.workplace div.theForm .popupBody select#popCtgryID {
		width:80%;
	}
	.workplace div.theForm .popupBody a#reload {
		width:28px;
		height:30px; line-height:30px;
	}
	.workplace div.theForm .popupBody span#clear {
		height:5px;
	}
	.workplace div.theForm .popupBody .btnAdd {
		float:left;
		width:100%;
		padding:0;
		margin:1% 0 8%;
	}
	.workplace div.theForm .popupBody label.oops {
		margin:1% 0 0;
		width:93%;
		padding:0 0 0 7%;
		font-size:0.8em;
	}
	/* ------  add to list ------ */
	.workplace div.theForm #topCaves, 
	.workplace div.theForm #btmCaves {
		float:none; 
		width:auto;
		position:relative;
		margin:0;
	}
	.workplace div.theForm.purchase #topCaves, 
	.workplace div.theForm.purchase #btmCaves {
		float:left; 
		width:100%;
	}
	.workplace div.theForm .listCaves div.cave {
		width:98%;
	}
	.workplace div.theForm .listCaves div.cave.xmiddle {
		width:95%;
	}
	.workplace div.theForm .listCaves div.cave.middle {
		width:99% !important;
	}
	.workplace div.theForm .listCaves div.cave.mshort {
		width:99% !important;
	}
	.workplace div.theForm .listCaves div.cave.action {
		width:98%; background:#FFCC66;
	}
	/* --- */
	.workplace div.theForm div.cave span.responsive {
		font-size:0.9em;
	}
	.workplace div.theForm.distrPrdts div.cave.action span.responsive,
	.workplace div.theForm div.cave.action span.responsive {
		display:none;
	}
	.workplace div.theForm div.cave input {
		height:28px;
		font-size:0.9em;
		padding-left:3%;
		width:95% !important;
	}
	.workplace div.theForm div.cave select {
		height:30px;
	}
	.workplace div.theForm a.addToList {
		font-size:0.95em;
	}
	.workplace div.theForm a.addToList::before {
		font-size:0.95em;
	}
	/* -- the list -- */
	.workplace div.theForm div#list {
		margin:0 2.5% 5%;
	}
	.workplace div.theForm div#list div.column { 
		font-size:0.85em;
		display:none;
	}
	.workplace div.theForm div#list header div.column { 
		height:30px; line-height:30px;
	}
	.workplace div.theForm div#list div.listItem div.column { 
		min-height:26px;
	}
	.workplace div.theForm div#list div.column.first, 
	.workplace div.theForm div#list div.column:nth-child(2), 
	.workplace div.theForm div#list div.column:last-child {
		display:inline;
	}
	.workplace div.theForm div#list div.column.first {
		width:15%;
	}
	.workplace div.theForm div#list div.column:nth-child(2) {
		width:40%;
	}
	.workplace div.theForm div#list div.column:last-child {
		width:35% !important;
	}
	.workplace div.theForm div#list div.listItem div.column.first {
		padding:1.5% 0 0;
	}
	.workplace div.theForm div#list div.column input {
		font-size:0.95em;
	}
	.workplace div.theForm div#list div.column a#remove {
		width:50px; line-height:22px;
		overflow:auto;
	}
	/* -- add purchase -- */
	.workplace div.theForm.purchase fieldset {
		margin:3% 0;
	}
	.workplace div.theForm.purchase fieldset legend {
		margin-left:15px;
		padding:5px 25px 5px 10px;
		font-size:0.85em;
	}
	.workplace div.theForm.purchase fieldset > p {
		width:40%;
		margin-left:5%;
		margin-bottom:3%;
	}
	.workplace div.theForm.purchase fieldset > p:nth-child(3), 
	.workplace div.theForm.purchase fieldset > p:nth-child(5), 
	.workplace div.theForm.purchase fieldset > p:nth-child(7) {
		margin-left:5%;
	}
	.workplace div.theForm.purchase fieldset > p input {
		padding:0 0 0 5%;
		font-size:0.8em;
	}
	/* ----------------------- show Record ----------------------- */
	.workplace div.showRecord {
		width:94%;
		padding:3%;
	}
	.workplace div.showRecord #leftSide header {
		margin-top:1em;
		height:30px; line-height:30px;
	}
	.workplace div.showRecord div.details {
		border:none;
	}
	.workplace div.showRecord #leftSide div#separate {
		height:1px;
	}
	.workplace div.showRecord #leftSide #record {
		width:100%;
		padding:0;
	}
	.workplace div.showRecord #leftSide #colLeft {
		float:left;
		width:97%;
		padding:2.5% 0 1% 3%;
	}
	.workplace div.showRecord #leftSide #colRight {
		float:left;
		width:85%;
		padding:0 5% 2.5% 10%;
		border-left:none;
	}
	.workplace div.showRecord #leftSide span.status {
		padding:0.5% 4% 1% 2%;
	}
	.workplace div.showRecord #rightSide div.imgHolder {
		width:40%;
		margin:0 0 4%;
	}
	.workplace div.showRecord #rightSide a#back {
		width:40%;
		height:28px; line-height:28px;
		font-size:1em;
	}
	.workplace div.showRecord.user #rightSide a#back {
		float:right;
	}
	.workplace div.showRecord #rightSide a#print {
		height:30px; line-height:30px;
	}
	/* -- profile -- */
	.workplace div.showRecord #rightSide div.imgWrap {
		width:45%;
	}
	.workplace div.showRecord #rightSide div.imgWrap img {
		height:120px;
	}
	.workplace div.showRecord div.imgWrap #imgChange {
		height:24px;
		line-height:24px;
	}
	.workplace div.showRecord div.imgWrap #imgChange input[type="file"] {
		height:24px;
	}
	/* --- show user -- */
	.workplace div.showRecord div#header {
		padding:7% 0 3%;
		font-size:0.95em;
	}
	.workplace div.showRecord div.userRights fieldset {
		width:97%;
	}
	.workplace div.showRecord div.userRights fieldset legend {
		margin-left:15px;
		padding:5px 30px 5px 10px;
	}
	.workplace div.showRecord div.userRights fieldset > div {
		width:44%;
		margin:0 0 5px 15px;
	}
	.workplace div.showRecord div.userRights span {
		font-size:1em;
	}
	.workplace div.showRecord div.userRights label {
		font-size:0.9em;
	}
	/* -- show list items -- */
	.workplace div.showRecord div.details.long header, 
	.workplace div.showRecord div.details.long div.listItems #record {
		height:27px; line-height:27px;
	}
	.workplace div.showRecord div.details.long div.listItems header {
		height:29px; line-height:29px;
	}
	.workplace div.showRecord div.details.long div.listItems div.box {
		height:27px;
		display:none;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.first {
		width:12%;
		display:inline;
	}
	.workplace div.showRecord div.details.long div.listItems div.box.important {
		display:inline;
	}
	.workplace div.showRecord.purchase div.details.long div.listItems div.box.vshort {
		width:19%;
	}
	.workplace div.showRecord.purchase div.details.long div.listItems div.box.xmiddle {
		width:40%;
	}
	.workplace div.showRecord div#totals label, 
	.workplace div.showRecord div#totals span {
		padding:2% 3%;
		font-size:0.85em;
	}
	/* -- settings -- */
	.workplace div.showRecord.settings #leftSide #colLeft {
		padding:2% 0;
	}
	.workplace div.showRecord.settings #leftSide #colLeft {
		float:left;
		width:97%;
		padding:4% 0 2% 3%;
	}
	.workplace div.showRecord.settings #leftSide #colRight {
		float:left;
		width:85%;
		padding:0 5% 2.5% 10%;
	}
	/* ------------------------- reports ------------------------- */
	.workplace div.reportArea {
		padding:4% 3% 10%;
	}
	.workplace div.reportArea div.oneDiv {
		width:98%;
		margin:0 0 2.5% 0;
		padding-bottom:2.5%;
	}
	/* -- */
	.workplace div.reportArea button {
		width:98%;
		margin:2% 0 0 0;
		height:33px;
	}
	.workplace div.reportArea label#process {
		width:98%;
		margin:3% 0;
		background:url(../images/system/loading.gif) center no-repeat;
	}
	.workplace div.reportArea label.error {
		width:98%;
		margin:3% 0;
	}
	.workplace div.reportArea div#filterWrap div.filter {
		margin-bottom:2.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter label {
		margin:1% 0 2%;
	}
	.workplace div.reportArea div#filterWrap div.filter input[type="text"],
	.workplace div.reportArea div#filterWrap div.filter input[type="month"], 
	.workplace div.reportArea div#filterWrap div.filter select {
		width:46.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter select {
		width:48.3%;
	}
	.workplace div.reportArea div#filterWrap div.filter select.long {
		width:48.3%;
	}
	/* -- income statement */
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#mdgDiv, 
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment p#dhexDiv {
		width:100%;
		margin-bottom:2.5%;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="radio"] {
		margin:3% 3% 0 0;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="radio"] ~ span {
		margin:2.5% 0 0;
		width:18%;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment input[type="month"] {
		width:69%;
	}
	.workplace div.reportArea div#filterWrap div.filter.byIncStatment select {
		width:73%;
	}
	
	
}
/* 4405 */