@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body
{    
	background-color: #FD9; /* #FFC430 */
	font-size: 16px;
	font-family: 'Source Sans Pro', Verdana, Arial;
	padding:0;
	margin:0;
	color: #331600;
}

a, a:visited {
	text-decoration:none;
	color:blue;
}

a:hover {
	text-decoration:none;
}

input, select {
	font-size: 1em;
	font-family: 'Source Sans Pro', Verdana, Arial;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, label  {
	cursor:pointer;
}

textarea {
	font-family: 'Source Sans Pro', Verdana, Arial;
}

/* Table formats */
.table {
	padding: 5px;
	clear: both;
}

	.table TABLE {
		background-color: #ffd;
		text-align: center;
	}

	.table TH
	{
		background-color: #ffa;
		vertical-align:middle;
	}

	.table TD
	{
		vertical-align:middle;
	}

	.table a {
		font-weight: bold;
	}

	.table .section_header {
		background-color: #FFC430;
		/*text-align:left;*/
		font-size:1.1em;
		font-weight:bold;
	}

	.table .section_subheader {
		background-color: #dfd;
		text-align:left;
		font-size:1.1em;
		font-weight:bold;
	}

	.table .section_footer {
		background-color: #ffa;
		font-size:1.1em;
		font-weight:bold;
	}

	.table .table_footer {
		background-color: Yellow;
		font-size:1.2em;
		font-weight:bold;
	}
	
#pagewrapper
{    
	min-width:300px;
	text-align:center;
	margin: 0 auto 0 auto;
}

#header {
	position: relative;
	margin: 0 auto 0 auto;
	text-align:center;
	height:75px;
}

#logo {
	position: absolute;
	top:0px;
	left:0px;	
	margin: 0;
}

#title{
	position: absolute;
	top:0px;
	right:0px;
	font-size: 1.6em;
	font-weight: bold;
	color: #331600;
	margin:20px;
}

#topbar {
	background-color: #331600;
	color: White;
	height: 35px;
	margin: 0 auto 0 auto;
	padding: 0;
	font-weight:bold;
	clear:both;
}

#login {
	float:left;
	margin: 5px 10px 0 5px;
	font-weight: bold;
	color: #AAFF00;	
}

	#login img{
		vertical-align:middle;
		width: 20px;
		margin-right:5px;
	}
	
#logout {
	float:right;
	margin: 5px 10px 0 0;
	
	font-weight: bold;
	color: White;	
}

	#logout  a{
		text-decoration:none;
		color: White;	
		margin-left:5px;
	}

	#logout  a:hover{
		text-decoration:none;
		color: #FFC430;
	}
	
	#logout img{
		vertical-align:middle;
		width: 20px;
		margin-right:5px;
		cursor:pointer;
	}
	
	#logout .label{
		display:inline;
	}	

#loginbox {
	background-color: #FFF3D1;
	border: solid 1px #331600; 
	max-width:380px; 
	padding: 5px;
	text-align:center;
	margin: 20px auto 0 auto;
}

#main{
	min-height:300px;
	margin: 0 auto 0 auto;
	padding: 0 0 30px 0;
	clear:both;
}

.summary_table {
	font-size:0.9em;
}	
	.summary_table h2 {
		margin-top: 0;
		background-color: #FFC430;
		padding: 5px;
	}

	.summary_table table {
		margin-top: 2px;
		margin-bottom: 2px;
		border-spacing: 0;
		background-color: #ffd;
	}
	
	.summary_table th {
		padding: 2px;
		vertical-align:middle;
	}

	.summary_table td {
		padding: 2px;
		vertical-align:middle;
	}	
	
	.summary_table .section_header {
		text-align:left;
		font-size: 1.2em;
		background-color: #eef;
		font-weight:bold;
	}

	.summary_table a:hover {
		text-decoration: underline;
	}
	
	.summary_table .numbering {
	/*
		border:solid 1px #333;
		background-color: #FFC430;
		color: #fff;
		padding:0 5px 0 5px;

		-moz-border-radius: 50%; 
		border-radius: 50%;			
	*/
	}
		
#host {
	color: #1166FF;
	font-size: 0.8em; 
	font-weight: bold; 
	font-style: italic;
	margin: 0 0 10px 0;
}		
		
#footer {
	background-color: #331600;
	color: White;
	margin: 0 auto 0 auto;
	padding: 5px;
	font-size:0.8em;
	font-weight:bold;
	clear:both;
}

	#footer a{
		color: #FFC430; /*#AFF0FF;*/
	}

	#footer a:hover{
		text-decoration:underline;
	}

.successmsg {
	color: Green;
	font-weight: bold;
}

.warnmsg {
	color: OrangeRed;
	font-weight: bold;
}

.errmsg {
	color: Red;
	font-weight: bold;
}

.msg_red {
	color: Red;
	font-weight: bold;
}

.msg_green {
	color: Green;
	font-weight: bold;
}

.msg_orange {
	color: Orange;
	font-weight: bold;
}

.msg_grey {
	color: Grey;
}

.readonly {
	background-color: #F0F0F0;
	color: #666;
}

#searchbox {
	background-color: #FFFFDD;
	border: solid 2px orange; 
	max-width:600px;
	padding: 5px;
	margin: 5px auto 5px auto;
}

	#searchbox .search-block {
		display:inline-block; 
		padding:5px;
		vertical-align: top;
	}		
	
#detail_page {
	text-align: left;
	padding: 0 10px 0 10px;
}
	#detail_page h2 {
		
	}
	
	#detail_page h3 {
		background-color: #FFC430;
		padding: 5px;
	}
	
	#detail_page th {
		vertical-align: middle;
	}

	#detail_page td {
		vertical-align: middle;
	}
		
	#detail_page .detail-block {
		padding:5px;
		vertical-align: top;	
		margin-bottom:1px;
	}
	
#sm-data {
	padding:2px;
}

	#sm-data .sm-block {
		display:inline-block; 
		padding:5px;
		vertical-align: top;
	}		

#sm-table {
	font-size:0.9em;
}	

	#sm-table table {
		width: 100%;
		border-spacing: 0;
	}
	
	#sm-table th {
		padding: 1px;
		vertical-align:middle;
	}

	#sm-table td {
		padding: 1px;
		vertical-align:middle;
	}


#detail_page .details {
	padding: 10px;
	background-color: #ffffdd;
}

#upload_file {
	width: 600px;
	text-align: center;
}

#upload_file .details {
	padding: 10px;
	background-color: #ffffdd;
}

.field-label {
	font-weight:bold;
}

/* UPLOAD PAGE */
#uploadbox {
	background-color: #FFFFDD;
	border: solid 2px orange; 
	max-width:600px;
	text-align:center;	
	margin: 5px auto 5px auto;
}

#statusbox {
	background-color: #EEF9FF;
	border: solid 1px #D0F0FF; 
	max-width:600px;
	text-align:center;
	margin: 5px auto 5px auto;
	padding: 5px;
}

#photo_preview {
	/*
	position: absolute; 
	top: 0%; 
	right: 2%;
	*/
	font-size: 0.8em;
	font-weight: bold;
	color: Orange;
}

.photo_preview {
	max-width: 200px; 
	max-height: 150px;
	cursor: pointer;
	margin:2px;
}

.selectionbox {
	background-color: White;
	font-size: 1.2em;
	padding:10px;
}
	
	.selectionbox_row {
		display:inline-block;
		border:solid 1px #ddd;
		padding:10px;
		margin-bottom:2px;
		font-weight:bold;
		min-width:200px;
	}

	.selectionbox_row:hover {
		background-color: Yellow;
		cursor: pointer;
		padding-left:12px;
	}
	
	.selectionbox_row_disabled {
		display:inline-block;
		border:solid 1px #ddd;
		padding:10px;
		margin-bottom:2px;
		font-weight:bold;
		color: Grey;
		min-width:200px;
	}
	
	.selectionbox_row_disabled input, 
	.selectionbox_row_disabled label {
		cursor: default;
	}
	
.selectionblock {
	display:inline-block;
	vertical-align: top;
	text-align:left;
	min-height:35px;
	min-width:120px;
	background-color: White;
	border:solid 1px #ddd;
	padding: 10px;
	margin: 1px;
}

	.selectionblock:hover {
		background-color: #DFD;
		font-weight:bold;
		cursor: pointer;
	}	

/* Search Results */	
#results {
	margin: 10px auto 10px auto;
	/*text-align:left;*/
	max-width:98%;
}

	#results .result_header {
		background-color:#FFC430;
		padding:5px;
		height:30px; 
		margin-bottom: 5px;
	}

	#results .subtitle {
		font-size:1.3em;
		text-align:left;
		font-weight:bold;
	}
	
	#results .result-block  {		
		position:relative;
		display: inline-block;
		text-align: center;		
		vertical-align: top;
		
		margin: 10px 8px 10px 8px;
		width: 200px;
		min-width: 200px;
		border:solid 1px silver;
		
		background: #fcfcfc;
		color: #222;
		font-weight:bold;
	}
	
		#results .result-block:hover {
			/*cursor:pointer;*/
		}
		
		#results .result-block .cell {
			display:inline-block;
			width:45%;
			margin-bottom:1px;
			border:solid 1px silver;
			vertical-align:middle;
			background-color: #EEF;
		}
		
		#results .store_name {
			font-size:1.3em;
			font-weight:bold;
			color:#331600;
		}
		
		#results .btnStockIO {
			height:35px;
			background-color:#FFD;
			border-top: solid 1px silver;
		}
			#results .btnStockIO:hover {
				cursor:pointer;
				background-color:Yellow;
			}
		
#search-sort {
	margin-top:-38px;
	padding-right:5px;
	float:right;
	text-align:left;
}
	#search-sort #sort-options {
		width: 100%;
		min-width:300px;
		max-width:300px;
	}
	
.shadow {
	box-shadow: 5px 5px 5px #666;
}
	
.record_count {
    font-weight:bold;
	font-style:italic;
	font-size:0.85em;
}

.align_left {
	text-align: left;
}

.align_mid {
	text-align: center;
}

.align_right {
	text-align: right;
}

.pagination {
	margin: 10px 0 0 0;
}

	.pagination a {
		display:inline-block;
		border:solid 1px silver;
		background-color:#FFE;
		padding: 5px 10px 5px 10px;
		margin-bottom: 2px;

		-moz-border-radius: 20%; 
		border-radius: 20%;			
	}

		.pagination a:hover {
			background-color:Yellow;
		}
	
	.pagination .selected {
		display:inline-block;
		padding: 5px 10px 5px 10px;
		margin-bottom: 2px;
	}

.smallbox{	
	background-color: #FFF3D1;
	border: solid 1px #331600; 
	max-width:400px; 
	padding: 5px;
	text-align:center;
	margin: 20px auto 0 auto;	
}

	.smallbox TH, .smallbox TD
	{
		text-align: left;
	}

/* Buttons */
.buttonbox{
	padding:5px;
	margin-top: 10px;
	margin-bottom: 5px;
	clear:both;
}

.buttons{
	cursor:pointer;
	padding: 5px 35px 5px 35px;
	margin-bottom:2px;
	text-align: center;
	min-width: 120px;
	min-height: 40px;	
	background-color:#F0F0F0;
	font-size: 1em;
}

.button_search {
	cursor:pointer;
	background-image:url('../images/search_small.png');
	background-repeat: no-repeat;
}

.button_select {
	cursor:pointer;
}

#btnLogin {
	font-weight: bold;
	background-image:url('../images/login.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnResetPwd {
	font-weight: bold;
	background-color: Blue;
	color: White;
	
	background-image:url('../images/keys.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnResetPwdTop {
	font-weight: bold;
	background-color: Blue;
	color: White;
	
	background-image:url('../images/keys.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnDelete {
	font-weight: bold;
	background-color: Red;
	color: White;

	background-image:url('../images/delete.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
	}

#btnSearch{
	background-image:url('../images/search.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnPrint{
	background-image:url('../images/print.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnClear{
	background-image:url('../images/recycle.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnNew{
	background-image:url('../images/add.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnEdit{
	background-image:url('../images/edit.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnSave {
	background-image:url('../images/save.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnSaveTop {
	background-image:url('../images/save.png');
	background-repeat: no-repeat;
	background-position: 2px center;	
}

#btnRefresh {
	background-image:url('../images/refresh.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnBack {
	background-image:url('../images/back.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnOK {
	font-size: 1.2em;
	font-weight: bold;
	background-color: Green;
	color: White;
	width: 150px;
	height: 50px;
	cursor: pointer;
}

#btnUpload {
	background-image:url('../images/upload.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnChgPwd {
	background-image:url('../images/keys.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnClose {
	background-image:url('../images/exit.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

#btnStockIn {
	background-image:url('../images/button_plus.png');
	background-repeat: no-repeat;
	background-position: 2px center;
	background-color: #8F8;
	font-weight:bold;
}

#btnStockOut {
	background-image:url('../images/button_minus.png');
	background-repeat: no-repeat;
	background-position: 2px center;
	background-color: #FBB;
	font-weight:bold;
}

.btnBrowse {
	background-image:url('../images/search_small.png');
	background-repeat: no-repeat;
	background-position: left center;
	width: 25px;
	height: 25px;
	cursor: pointer;
	border:none;
	background-color:transparent;
}

.menu_buttons {
	cursor:pointer;
	font-weight:bold;
	min-width: 220px;
	min-height: 40px;
	padding: 10px 35px 10px 35px;
	text-align: center;
	background-color:#FFD;
	font-size: 1em;
	
	border:solid 2px #FFC430;
	-moz-border-radius: 10%; 
	border-radius: 10%;		
}

	.menu_buttons:hover{
		background-color:#FFA;
	}
	
.admin_access {
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}

	.admin_access .menu_buttons{
		background-color: #7F3E18;
		color:White;
	}

.common_access {
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}

#btnRptStock {
	background-image:url('../images/stock.png');
	background-repeat: no-repeat;
	background-position: 5px center;	
}

#btnRptStore {
	background-image:url('../images/store.png');
	background-repeat: no-repeat;
	background-position: 5px center;	
}

/* Expand/Collapse DIV */
    .container{
	  border: solid 1px silver;
	  margin:10px;
	}


	.header{
	  background:#FFC430 url('../images/arrow_up.png') no-repeat right center;
	  cursor:pointer;
	  padding: 5px;
	  font-weight: bold;
	}


	.collapsed .header{
	  background-image:url('../images/arrow_down.png');
	}


	.content{
	  height:auto;
	  min-height:100px;
	  overflow:visible;
	  transition:all 0.3s linear;
	  -webkit-transition:all 0.3s linear;
	  -moz-transition:all 0.3s linear;
	  -ms-transition:all 0.3s linear;
	  -o-transition:all 0.3s linear;
	}


	.collapsed .content{
	  min-height:0px;
	  height:0px;
	  overflow:hidden;
	}	


#store-code {
	border:solid 1px silver;
	background-color:#FFC430;
	padding:5px;
	font-weight:bold; 
	font-size: 1.5em;
}

.scrollup{
	width:60px;
	height:60px;
	opacity:0.5;
	position:fixed;
	bottom:25px;
	right:30px;
	display:none;
	outline:none;
	text-indent:-9999px;
	z-index: 998;    
	background-image:url('../images/icon_top.png');
	background-repeat: no-repeat;
	background-size: 100% auto; 
}

	.scrollup:hover {
		opacity:0.8;
	}
	
#disable-page {
	background-image:url('../images/disable_bg.png');
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	z-index:999;
	display:none;
}

#loading {
	background-image:url('../images/loading.gif');
	background-repeat:no-repeat;
	background-position:center;
	font-size:3em;
	color:White;
	text-align:center;
	vertical-align:middle;
	width:100%;
	height:100%;
	margin:0 auto 0 auto;
	display:none;
}	

/* Tooltip */
.ToolText{position:relative; }
.ToolTextHover{position:relative;}

.ToolText span{display: none;}
.ToolTextHover span{
  display:block;
  position:absolute;
  border:1px solid black;
  top:1.3em;
  left:5px;
  background-color:#ffff66; 
  color:Blue;
  text-align: left;
  font-weight: normal;
  width: 280px;
  padding: 5px;
  z-index: 1;
} 
	
/* Media Queries */
@media screen and (max-width: 1000px) {
	.hidden_field_1 {
		display:none;
	}	
}

@media screen and (max-width: 800px) {
	.hidden_field_2 {
		display:none;
	}		
}

@media screen and (max-width: 600px) {
	#header {
		height:auto;
	}

	#logo {
		position: static;
	}

	#title{
		position: static;
		margin: 5px;
	}
	
	#logout .label{
		display:none;
	}		
	
	.hidden_field_3 {
		display:none;
	}	
	
	#search-sort {
		margin:0 0 10px 0;
		float:none;	
	}

		#search-sort #sort-options {
			min-width:250px;
			max-width:600px;
		}	
		
	.summary_table {
		font-size:0.8em;
	}	
	
	#results .result-block  {		
		width: 45%;
	}		
}

@media screen and (max-width: 480px) {

	/*
	.buttons {
		text-indent:-9999px;
		background-position: center center;
		padding:10px;
		min-width: 40px;
		min-height: 40px;
	}
	*/

	.buttons {
		width:49%;
	}
	
	.hidden_field_4 {
		display:none;
	}	

	#results .result-block  {		
		width: 95%;
		margin: 10px 0 10px 0;
	}	
}

@media screen and (max-width: 380px) {
	.buttons {
		width:95%;
	}
}