/* "SilverWolf" Theme for WebERP by Hindra Joshua

NOTE:
This CSS is not yet optimized. Some styles maybe 'redundant' or 'unused',
but for the obvious one it will be cleaned up.
To optimized the rest we should examined the whole codes! That would be for
the next project. :)

Design guidelines:
	Fonts are 10pt hight.
	Icons are ??px x ??px size.  (24x24 ?)
*/

button img {
	/* Describes how button image should be displayed. */
	height:21px;
	width:21px;
}


body {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:10pt;
	background:url(images/stripe.png) white;
	margin:0;
	padding:5px;
}

a {
	color:#5B5B68;
	text-decoration:none;
}
a:hover {
	color:#000000;
	text-decoration:underline;
}
form {
}
img {
	border:none;
	vertical-align:middle;
}
p.good {
	font-weight:bold;
	color:green;
}
p.bad {
	font-weight:bold;
	color:red;
}
table {
	width:auto; /* automatic width */
	max-width:90%;
	margin:0 auto;
	margin-bottom:10px;
}
table.selection {
}
th {
	background-color:#C3C3C3;
	color:#300;
	font-size:100%;
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
}
th.number {
	background-color:#CCCCE5; /* Should be #C3C3C3 ? */
	text-align:right;
}
th.text {
	background-color:#CCCCE5; /* Should be #C3C3C3 ? */
	text-align:left;
}
th.ascending {
	cursor:s-resize;
}
th.descending {
	cursor:n-resize;
}
th:after {
	content:"";
	float:right;
	margin-top:7px;
	visibility:hidden;
}
th.ascending:after {
	border-width:0 4px 4px;
	border-style:solid;
	border-color:#000000 transparent;
	visibility:visible;
}
th.descending:after {
	border-bottom:none;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:4px solid #000000;
	visibility:visible;
}
td {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%;
	text-align:left;
	vertical-align:top;
}
td.select {
	background-color:#eeeeee;
}
.centre {
	margin:0 auto 10px;
	text-align:center;
}

input {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%;
	background-color:#e3e1e1;
	border-width:1px;
	border-bottom-color:gray;
	border-bottom-style:solid;
	border-top-color:gray;
	border-top-style:solid;
	border-left-color:gray;
	border-left-style:solid;
	border-right-color:gray;
	border-right-style:solid;
}
input:hover {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%;
	background-color:#e3e5f5;
	border-width:1px;
	border-bottom-color:gray;
	border-bottom-style:solid;
	border-top-color:gray;
	border-top-style:solid;
	border-left-color:gray;
	border-left-style:solid;
	border-right-color:gray;
	border-right-style:solid;
}
input.image {
	border-width:0px;
	background-color:transparent;
}
input.inputerror, input.error, select.error, select.selecterror, label.error {
	color:red;
	border:2px solid red;
}
input:required, select:required, textarea:required {
	background-color:#ffffe0;
}
select {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%;
}
tr.striped_row:nth-of-type(even) {
	background-color:#cccccc;
}

tr.striped_row:nth-of-type(odd) {
	background-color:#eeeeee;
}
div.Message {
	border-radius:10px;
	padding:10px 10px 10px 36px;
	margin:5px;
	opacity:1;
	transition:opacity 0.6s; /* 600ms to fade out */
}
div.Message.error {
	background:#ffecec url('images/message-error.svg') no-repeat 10px 50%;
	border:1px solid #f5aca6;
}
div.Message.success {
	background:#e9ffd9 url('images/message-success.svg') no-repeat 10px 50%;
	border:1px solid #a6ca8a;
}
div.Message.info {
	background:#e3f7fc url('images/info.svg') no-repeat 10px 50%;
	border:1px solid #8ed9f6;
}
div.Message.warn {
	background:#fff8c4 url('images/message-warning.png') no-repeat 10px 50%;
	border:1px solid #f2c779;
}
.MessageCloseButton {
	margin-left:15px;
	color:#C8C8C8;
	font-weight:bold;
	float:right;
	font-size:20px;
	line-height:17px;
	cursor:pointer;
	transition:0.3s;
}
.MessageCloseButton:hover {
	color:#606060;
}
#MessageContainerFoot {
	display:none;
}

.dpTbl {
	border:solid navy 1px;
}
.dpTD {
	border:0;
	width:20px;
	background-color:#eeeeee;
	text-align:right;
	cursor:pointer;
}
.dpDayHighlight {
	border:0;
	width:20px;
	background-color:yellow;
	text-align:right;
	cursor:pointer;
}
.dpTDHover {
	border:0;
	width:20px;
	background-color:#ccc;
	text-align:right;
	cursor:pointer;
}

.table1 {
	width:90%;
	background:#eeeeee;
	border:0px 0px 2px 2px #222 solid;
	background:#eeeeee;
	margin:0 auto;
}
.tableheader {
	font-weight:normal;
	background-color:#cccce5;
	color:#300;
}
.notavailable { /* WorkOrderIssue.php, WorkOrderStatus.php */
	font-weight:lighter;/* light is not a w3c css valid font weight */
	font-style:italic;
	color:#555;
}
.label { /*WorkOrderCosting.php, WorkOrderEntry.php, WorkOrderIssue.php, WorkOrderStatus.php */
	font-weight:bold;
	font-style:normal;
	font-size:120%;
	color:#000000;
	background-color:#ccc;
}
.table_index {
	background-color:#F1FFDD;
}

.header { /* used in \includes\InputSerialItemsFile.php */
	background-image:url("");
	background-repeat:no-repeat;
	background-attachment:fixed;
	border:none;
	margin:0px;
	padding:0px;
}
input.inputerror { /* many * .php */
	background-color:#fddbdb;
}
textarea {
	font-size:100%;
	background-color:#e3e1e1;
	border-width:1px;
	border-bottom-color:gray;
	border-bottom-style:solid;
	border-top-color:gray;
	border-top-style:solid;
	border-left-color:gray;
	border-left-style:solid;
	border-right-color:gray;
	border-right-style:solid;
}
select.selecterror { /*AccountGroups.php, BankAccounts.php, BOMs.php, Stocks.php */
	background-color:#fddbdb;
}

.OsRow { /* PO_OrderDetails.php */
	background-color:#234567;
	color:white;
}

/*** CANVAS ***/

#CanvasDiv {
}

/*** HEADER ***/

#HeaderDiv {
	overflow:hidden; /* REQUIRED:height according to items contained */
	background:url(images/menu_bg_grey.png) repeat-x #cfcfcf;
	color:gray;
	padding:3px;
	border:thin solid d3d3d3;
}
#HeaderWrapDiv {
}

/*** HEADER - APP INFO ***/

#AppInfoDiv {
	float:left; /* REQUIRED:to the left */
}
#AppInfoDiv img {
	vertical-align:middle; /* center image and text vertically */
}
#AppInfoCompanyDiv {
	display:table-cell; /* REQUIRED:as a cell */
}
#AppInfoUserDiv {
	display:table-cell; /* REQUIRED:as a cell */
}
#AppInfoUserDiv a {
	color:gray;
}
#AppInfoUserDiv a:hover {
	color:#000000;
	text-decoration:underline;
}
#AppInfoModuleDiv {
}

/*** HEADER - QUICK MENU ***/

#QuickMenuDiv {
	float:right; /* to the right side */
	margin-top:2px;
}
#QuickMenuDiv ul {
	list-style:none; /* hide the bullets */
}
#QuickMenuDiv li {
	display:inline-block;
}

/*** links as buttons!!! clicking anywhere in the button will activate
 the link!!! ***HJ***/

#QuickMenuDiv li a {
	padding:9px; /* links as button */
	border:thin outset d3d3d3; /* un-pressed state */
}
#QuickMenuDiv li a:hover {
	padding:9px; /* links as button */
	border:thin inset d3d3d3; /* pressed state */
	text-decoration:none; /* no underline */
	color:#000000;
}

/*** BODY ***/

#BodyDiv {
	clear:both; /* REQUIRED */
	overflow:hidden; /* REQUIRED */
	color:#000000;
	background:whitesmoke;
	padding-bottom:5px;
	text-align:center;
}


/*** BODY - MAIN MENU ***/

#MainMenuDiv {
	float:left; /* REQUIRED:to the left side */
	white-space:nowrap; /* don't break text */
	text-align:center;
	width:12%;
	margin-top:3px;
}
#MainMenuDiv ul {
	padding:0; /* REQUIRED:remove extra gaps (ex-bullets) */
	margin:0 3px 0 0;
	border:thin outset silver;
}
#MainMenuDiv li {
	list-style:none; /* REQUIRED */
	padding:0; /* REQUIRED */
}
#MainMenuDiv li a,
#MainMenuDiv li a:hover,
#MainMenuDiv li a:active,
#MainMenuDiv .main_menu_selected a,
#MainMenuDiv .main_menu_selected a:hover { /* common styles */
	display:block; /* REQUIRED */
	padding:3px;
	border:thin outset silver;
	color:#000000;
	text-decoration:none;
	background:silver;
}
#MainMenuDiv li a:hover { /* link as button!!! pressed state */
	border:thin inset silver;
}
#MainMenuDiv .main_menu_selected a,#MainMenuDiv .main_menu_selected a:hover { /* the selected button */
	border:thin inset silver;
	background:dimgray;
	color:white;
}

/*** BODY - SUB MENU ***/

#SubMenuDiv {
	display:table;
	float:right;
	overflow:hidden;
	width:88%;
	margin-top:3px;
	text-align:left;
}
#SubMenuDiv ul {
	list-style-type:none; /* REQUIRED:hide bullets */
	padding:0; /* REQUIRED:remove extra gaps (ex-bullets) */
	margin:0;
	background:gainsboro;
	border:thin outset gainsboro;
	margin-left:3px;
}
#SubMenuDiv li {
	list-style:none; /* REQUIRED:hide the bullets */
	padding:2px;
}
.menu_group_headers {
	background:silver;
	outline:thin outset silver;
	text-align:center;
	color:#000000;
}

#TransactionsDiv,#InquiriesDiv,#MaintenanceDiv {
	display:table-cell;
}
#InquiriesDiv div { /* default div, used for custom report header */
	background:silver;
	color:#000000;
	padding:2px;
}
.menu_group_item p {
	color:#00f; /* This is the color for bullets, I like it to be the same as the anchor color, but it's up to you */
	text-indent:-10px; /* this makes the bullet to appear as the li tag previously used */
	margin:0 0 0 12px; /* One thing that I didnÃÂÃÂ´t like of the li was that it had no left margin applied */
}

/*** FOOTER ***/

#FooterDiv {
	clear:both; /* REQUIRED */
	overflow:hidden;
	color:gray;
	background:url(images/menu_bg_grey.png) repeat-x #cfcfcf;
	border:thin solid d3d3d3;
}
#FooterWrapDiv {
	overflow:hidden;
	padding:3px;
}
#FooterLogoDiv {
	float:left;
	background:white;
	border-radius:8px;
	padding:3px;
	margin-left:44%; /* to the center (approx) */
}
#FooterVersionDiv {
	clear:both; /* below the logo */
	text-align:center;
}
#FooterTimeDiv {
	display:block;
	float:right;
	line-height:2.8em; /* Center the text vertically.
						[vertical-align has no effect on text alone] */
}
#Report {
	/* Division id for reports. */}
#Report table {
	/* Body of a report formatted with table tag. */
}
/* BEGIN Class selectors of the style for all devices. ---------------------- */
.centre {
	text-align:center;
	/* Class selector to horizontal align a text (centre) in an element. */
}
.number {
	text-align:right;
	/* Class selector to horizontal align a number (right) in an element. */
}
.text {
	text-align:left;
	/* Class selector to horizontal align a text (left) in an element. */
}
.gallery {
	float:left;
	margin:5px;
	/* Class selector to let an element float to the left. */
}
.field_help_text {
	font-style:italic;
	/* Class selector for field help text. */
}
.page_help_text {
	background-color:#d3d3d3;
	background-image:url(images/question.svg);
	background-position:top left;
	background-repeat:no-repeat;
	border-radius:5px;
	border:#a52a2a 1px solid;
	color:#000000;
	font-size:100%;
	font-weight:normal;
	margin:0 auto;
	padding-bottom:3px; /* 2px in merge */
	padding-left:3px;	 /* 10px in merge */
	padding-top:3px;/* 2px in merge */
	text-align:center;
	width:50%; /* 80% in merge */
	/* Class selector for page help text. Hidden/displayed by the ShowPageHelp parameter. */
}
.page_info_text {
	background:#d3d3d3 url(images/info.svg) top left no-repeat;
	border-radius:5px;
	border:#a52a2a 1px solid;
	color:#000000;
	font-size:100%;
	font-weight:normal;
	margin:0 auto;
	padding-bottom:3px; /* 2px in merge */
	padding-left:3px;	 /* 10px in merge */
	padding-top:3px;/* 2px in merge */
	text-align:center;
	width:50%; /* 80% in merge */
	/* Class selector for page info text. */
}
.page_title_text {
	background:#dcdcdc;
	margin:10px auto;
	padding:5px;
	text-align:center;
	/* Class selector for page title text. */
}
.sheet {/* Uncomment this to use sheet style preview
	background-color:#ffffff;
	border:0;
	box-shadow:26px 16px 8px 0 rgba(0, 0, 0, 0.5);
	color:#000000;
	margin:5%;
	padding:5%;*/
	/* Class selector for sheet style preview. */
}
/* END Class selectors of the style for all devices. ------------------------ */
/* END Style for all devices.================================================ */


/* If you want to use a cascading style sheet for a small device width, uncomment line "<meta name="viewport" content="width=device-width, initial-scale=1" />" on includes/header.php and use the following sections. */

@media only screen and (max-device-width:767px) {
	/* Style for new browser in a device with a rendering width less than 768px (xs - Extra small devices - Phones). */
	.field_help_text {display:none;/* Hides field help text. */}
	.page_help_text {display:none;/* Hides page help text. */}
}

@media only screen and (min-device-width:768px) and (max-device-width:991px) {
	/* Style for new browser in a device with a rendering width between 768px and 992px (sm - Small devices - Tablets). */
}

@media only screen and (min-device-width:992px) and (max-device-width:1199px) {
	/* Style for new browser in a device with a rendering width between 992px and 1200px (md - Medium devices - Desktops). */
}

@media only screen and (min-device-width:1200px) {
	/* Style for new browser in a device with a rendering width greater than 1200px (lg - Large devices - Larger desktops). */
}
