@import url(https://fonts.googleapis.com/css?family=Roboto:500);
@import url(https://fonts.googleapis.com/css?family=Fredoka+One);

@font-face {
	font-family: 'MyriadPro-Regular';
	src: url('fonts/MyriadPro-Regular.eot');
	src: url('fonts/MyriadPro-Regular.woff') format('woff'), 
		url('fonts/MyriadPro-Regular.ttf') format('truetype'), 
		url('fonts/MyriadPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueLTStd-Bd';
	src: url('fonts/HelveticaNeueLTStd-Bd.eot');
	src: url('fonts/HelveticaNeueLTStd-Bd.woff') format('woff'), 
		url('fonts/HelveticaNeueLTStd-Bd.ttf') format('truetype'), 
		url('fonts/HelveticaNeueLTStd-Bd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body
{    
	background-color: Silver;
	background-image:url('../images/bg.jpg');
	font-size: 1em;
	font-family: 'MyriadPro-Regular', 'Roboto', Verdana, Arial;
	padding:0;
	margin:0;
	color: black;
}

::selection {
	background: #9E0044;
	color: White;
}

::-moz-selection {
	background: #9E0044;
	color: White;
}

a, a:visited {
	/*color:#9E0044;*/
	color: Blue;
	text-decoration: none;
}

a:hover {
	text-decoration:underline;
}

input, select {
	font-size: 1em;
}

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

input[type="checkbox"]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.2); /* IE */
  -moz-transform: scale(1.2); /* FF */
  -webkit-transform: scale(1.2); /* Safari and Chrome */
  -o-transform: scale(1.2); /* Opera */
}

textarea {
	font-family: 'MyriadPro-Regular', 'Roboto', Verdana, Arial;
}

#pagewrapper
{    
	/*min-width:768px;*/
	text-align:center;
	margin: 0 auto 0 auto;
}

#header {
	/*width:768px;*/
	margin: 0 auto 0 auto;
	text-align:center;
	padding: 5px;
	
	position:relative;
	min-height:60px;	
}

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

#logo_landing {
	margin: 0;
}

#title{
	font-family: 'Fredoka One', Verdana, Arial;
	font-size: 1.2em;
	font-weight: bold;
	color: #333333;

	position:absolute;
	margin: 0;
	right: 5px;
	bottom: 5px;	
}

#title_landing{
	font-family: 'Fredoka One', Verdana, Arial;
	font-size: 1.8em;
	font-weight: bold;
	color: #333333;
}

#topbar {
	background-color: #9E0044;
	color: White;
	height: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
	clear:both;
}

#login {
	float:left;
	font-size: 0.9em;
	font-weight: bold;
	color: Orange;
	margin: 5px 0 0 10px;
}

#login img{
	vertical-align:middle;
	margin-right:2px;
}

#logout {
	color: white;
	font-size: 0.8em;
	float:right;
	margin: 5px 10px 0 0; 
}

#logout  a{
	color: white;
	margin-left:5px;
}

#logout img{
	vertical-align:middle;
	margin-right:5px;
}

#logout  a:hover{
	text-decoration:none;
	color: Orange;
}

#logout .label{
	display:inline;
}

#cssmenu {
	clear:both;
}

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

#main{
	margin: 0 auto 0 auto;
	padding: 0 0 30px 0;
	clear:both;
	min-height:300px;
}
		
#host {
	color: #1166FF;
	font-size: 0.8em; 
	font-weight: bold; 
	font-style: italic;
	margin: 0 0 10px 0;
}		
		
#footer {
	background-color: #F2F2F2;
	color: #333333;
	margin: 0 auto 0 auto;
	padding: 5px;
	font-size:0.8em;
	font-weight:bold;
	clear:both;
}

#footer a {
	color:#9E0044;
}

#footer a:visited {
	color:#9E0044;
}

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

.warnmsg {
	color: Orange;
	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: #333333;
}

#searchbox {
	background-color: #FFFFDD;
	border: solid 2px orange; 
	max-width:600px;
	min-width:220px;
	padding: 10px;
	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: #FFAA00;
		padding: 5px;
	}
	
	#detail_page th {
		vertical-align: top;
	}

	#detail_page td {
		vertical-align: top;
	}
	
	#detail_page .detail-block {
		padding:5px;
		vertical-align: top;	
		margin-bottom:1px;
	}
	
	#detail_page .detail-block-photos {
		display:inline-block;
		max-width:400px;
		width:100%;
		padding:5px;
		vertical-align: top;	
		margin-bottom:1px;		
	}
	
#main .details {
	padding: 10px;
	background-color: #ffffdd;
	position: relative;
}

#main_popup {
	width: 640px;
	text-align: center;
	font-family: 'MyriadPro-Regular', 'Roboto', Verdana, Arial;
}

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

#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: 1em;
}

	.selectionbox_header {
		font-weight: bold;
		font-size: 1.3em;
		border:solid 1px #666;
		padding:10px;		
	}
	
	.selectionbox_row {
		border:solid 1px #ddd;
		padding:10px;
	}

	.selectionbox_row:hover {
		background-color: #FFFFBB;
		cursor: pointer;
		padding-left:12px;
	}

.selectionblock {
	display:inline-block;
	vertical-align: top;
	text-align:center;
	min-height:80px;
	min-width:120px;
	background-color: White;
	border:solid 1px #ddd;
	padding: 10px;
	margin: 1px;
}

	.selectionblock:hover {
		/*background-color: #FFDCA8;*/
		cursor: pointer;
	}

.checkbox {
	cursor:pointer;
}

.label {
	cursor:pointer;
}

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

.icon {
	width:50px; 
	height:50px;
	vertical-align:middle;
	margin-bottom:1px;
}

.matgrp_icon {
	display:inline-block;
	font-size:0.9em;
	padding:3px;
	margin:0 0 1px 0;
	cursor: default;
}

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

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

#proc-main {
	 margin: 0 auto;
	 min-height: 270px;
	 text-align: center;
}

	#proc-main .proc-block {
		display:inline-block; 
		padding:20px;
		color: #333333;		
		font-weight:bold;
	}
	
	#proc-main .proc-block:hover{
		background-color: #9E0044;
		color: White;
		cursor:pointer;
	}
	
	#proc-main .proc-block .label {
		padding-top:5px;
	}
	
/* Table formats */
.table {
	padding: 5px;
	clear: both;
}

	.table TABLE {
		background-color: #ffffee;
		text-align: center;
		border-spacing: 0;
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
	}

	.table TH
	{
		background-color: #ffffbb;
		padding:3px;
		border: 1px solid #000
	}

	.table TD
	{
		padding:3px;
		border: 1px solid #000
	}

	.table a, a:visited {

	}

	.table a, a:hover {
		
	}

.t_matiso th {
	font-size:0.9em;
}
.t_matiso td {
	font-size:0.9em;
}
	
#param-data {
	padding:2px;
}

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

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

	#param-table table {
		font-size:0.8em;
		width: 100%;
		border-spacing: 0;
		background-color: #cceeff;
		text-align: center;		
	}

	#param-table tr:hover {
		background-color: #FFFFBB;
	}
	
	#param-table th {
		border: solid 1px silver;
		padding: 3px;
		background-color: Navy;
		color: white;
		vertical-align:middle;
	}

	#param-table td {
		border: solid 1px silver;
		padding: 3px;
		vertical-align:middle;
		cursor: pointer;
	}

	#param-table .section-header {
		text-align:left;
		background-color:#66B5FF; 
		color: Black;
		font-size: 1.5em;
	}

	#param-table .section-subheader {
		text-align:left;
		background-color:#A3D2FF; 
		color: Black;
		font-size: 1.3em;
	}
	
#sku-data {
	padding:2px;
}

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

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

	#sku-table table {
		font-size:0.8em;
		width: 100%;
		border-spacing: 0;
		background-color: #cceeff;
		text-align: center;		
	}

	#sku-table tr:hover {
		background-color: #FFFFBB;
	}
	
	#sku-table th {
		border: solid 1px silver;
		padding: 3px;
		background-color: Navy;
		color: white;
		vertical-align:middle;
	}

	#sku-table td {
		border: solid 1px silver;
		padding: 3px;
		vertical-align:middle;
		cursor: pointer;
	}

	#sku-table .section-header {
		text-align:left;
		background-color:#66B5FF; 
		color: Black;
		font-size: 1.5em;
	}
	
	#sku-table .flute {
		padding:0 5px 0 5px;
		background-color:#9E0044;
		color:White;
		font-size:2em;
		
		-moz-border-radius: 30%; 
		border-radius: 30%;
	}
	

.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-top: 10px;
}

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

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

.smallbox .block {
	padding:5px;
	vertical-align: top;	
	margin-bottom:1px;
}

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

.buttons{
	padding: 10px 35px 10px 35px;
	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;	
}

#btnChgPwd {	
	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;	
}

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

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

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

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

.btnNext {
	background-image:url('../images/next.png');
	background-repeat: no-repeat;
	background-position: 2px center;	

	padding: 10px 35px 10px 35px;
	text-align: center;
	min-width: 80px;
	min-height: 40px;	
	background-color:#FFD670;	
	font-size: 1em;	
}

.btnPrev {
	background-image:url('../images/prev.png');
	background-repeat: no-repeat;
	background-position: 2px center;	

	padding: 10px 35px 10px 35px;
	text-align: center;
	min-width: 80px;
	min-height: 40px;	
	background-color:#FFD670;	
	font-size: 1em;	
}

#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;
}

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

#btnLogout{
	color: OrangeRed;	
	background-image:url('../images/logout.png');
	background-repeat: no-repeat;
	background-position: 2px center;
}

.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;
}

.admin_access {
	
}

.admin_access .menu_buttons{
	/*background-color:#FFEEEE;*/
}

.common_access {
	
}


/* TAB PAGES */

/* Set the size and font of the tab widget */
.tabGroup {
    width: 100%;
    min-height: 400px;
}
 
/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
    position: absolute;
    left:-100px;
    top:-100px;
}
 
/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
    /* inline-block such that the label can be given dimensions */
    display: inline-block;
 
    /* A nice curved border around the tab */
    border: 1px solid black;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
     
    /* the bottom border is handled by the tab content div */
    border-bottom: 0;
 
    /* Padding around tab text */
    padding: 5px 10px;
 
    /* Set the background color to default gray (non-selected tab) */
    background-color:#ddd;
	color: #333333;
	cursor: pointer;
}
 
/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
    border:1px dotted black;
}
 
/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
    color: Black;
	background-color: #ffffdd;
    font-weight: bold;
    border-bottom: 1px solid #ffffdd;
    margin-bottom: -1px;
}
 
/* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
    display: none;
    border: 1px solid black;
    background-color: #ffffdd;
    padding: 10px 10px;
    height: 100%;
    /*overflow: auto;*/
     
    box-shadow: 0 0 20px #444;
    -moz-box-shadow: 0 0 20px #444;
    -webkit-box-shadow: 0 0 20px #444;
     
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
}
 
/* This matches tabs displaying to their associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2 {
    display: block;
}


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


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

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

	.content{
	  height:auto;
	  min-height:100px;
	  overflow:hidden;
	  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;
	}	


.detail_footer {
	text-align: right;
	background-color:#E8FAFF;
	padding: 5px;
	font-weight: bold;	
	border-top: solid 1px #DDDDDD;
}

.section_box {
	background-color: #FDFDFD;
	margin: 10px 0 10px 0;
	width: 600px; 
	border: solid 1px silver; 
	min-height: 100px;
}

.section_header {
	background-color:#EEEEEE;
	padding: 5px;
	font-weight: bold;	
	font-size: 1.3em;
	color: Black;
	border-bottom: solid 1px silver;
}

.section_footer {
	text-align: right;
	background-color:#E8FAFF;
	padding: 5px;
	font-weight: bold;	
	border-top: solid 1px #DDDDDD;
}

.red_footer {
	background-color:Red;
	color: White;
}

.outstanding {
	background-color:Yellow;
}

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

.scrollup:hover {
	opacity:0.8;
}

/* 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;
} 

.show_field_1 {
	display:none;
}
.show_field_2 {
	display:none;
}
.show_field_3 {
	display:none;
}
.show_field_4 {
	display:none;
}

/* Media Queries */
@media screen and (max-width: 1050px) {
	.t_matiso th {
		font-size:0.85em;
	}
	.t_matiso td {
		font-size:0.85em;
	}
	
	.hidden_field_1 {
		display:none;
	}
	.show_field_1 {
		display:inherit;
	}		
}

/* Media Queries */
@media screen and (max-width: 800px) {
	.t_matiso th {
		font-size:0.8em;
	}
	.t_matiso td {
		font-size:0.8em;
	}

	.hidden_field_2 {
		display:none;
	}
	.show_field_2 {
		display:inherit;
	}		
}

/* Media Queries */
@media screen and (max-width: 600px) {

	#logo{
		position:static;
	}
	#title{
		position:static;
		margin-top: -5px;
		font-size: 1em;
	}
	#logout .label{
		display:none;
	}	
	
	.t_matiso th {
		font-size:0.75em;
	}
	.t_matiso td {
		font-size:0.75em;
	}
	
	.hidden_field_3 {
		display:none;
	}
	.show_field_3 {
		display:inherit;
	}		
}

/* Media Queries */
@media screen and (max-width: 480px) {
	.buttons {
		text-indent:-9999px;
		background-position: center center;
		padding:10px;
		min-width: 40px;
		min-height: 40px;
	}

	.hidden_field_4 {
		display:none;
	}
	.show_field_4 {
		display:inherit;
	}		
}