/**
 * STL Catalog Home Styling
 *
 * Define UI styling for the STL Catalog Home page
 *
 * @package     Nemo Framework
 * @subpackage  STL Catalog
 * @author      Neonfire Development <webmaster@neonfire.co.za>
 * @copyright   2022 Neonfire Development
 * @version     1.09.02
 */

/*
	============================================================================
	General styling
*/
legend {
	font-weight: bold;
}

.stlcatalog-admin-button-container {
	float: right;
}

.tpl-content-pane h3:first-child {
	display: none;
}

/*
	============================================================================
	Listing filter styling
*/

#stlcatalog-filter {
	background-color: #bbb;
	border: 1px #000 solid;
	border-radius: 4px;
	padding: 4px;
	margin: 4px;
	overflow: auto;
}

#stlcatalog-filter input[name="search"],
#stlcatalog-filter select {
	width: 200px;
}

#stlcatalog-filter input[name="item_id"] {
	width: 80px;
}

.stlcatalog-filter-item {
	display: inline-block;
}

.stlcatalog-filter-refresh {
	float: right;
}

.stlcatalog-filter-tag-container {
	width: 900px;
}

.stlcatalog-filter-tag-item {
	display: inline-block;
	float: left;
	background-color: #ccc;
	border: 1px #333 solid;
	border-radius: 8px;
	margin: 2px;
	padding: 4px;
	width: 140px;
	cursor: pointer;
}
.stlcatalog-filter-tag-item:hover {
	background-color: #ddd;
	border: 1px #666 solid;
}

#stlcatalog-filter-extended {
	display: none;
	margin-top: 4px;
}


/*
	============================================================================
	Listing styling
*/

.stlcatalog-listing-item-container {
	overflow: auto;
}

.stlcatalog-listing-item {
	position: relative;
	display: inline-block;
	float: left;
	width: 202px;
	height: 202px;
	border: 1px #333 solid;
	background-color: #000;
	margin: 4px;
	cursor: pointer;
}

.stlcatalog-listing-item .image-button-group {
	position: absolute;
	top: 8px;
	right: 8px;
}

.stlcatalog-listing-item label {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #888;
	border-top: 1px #000 solid;
	padding: 4px;
	font-size: 11px;
	cursor: pointer;
}

.stlcatalog-listing-item .image-container {
	height: 100%;
	padding-bottom: 26px;
}

.stlcatalog-listing-item img {
	vertical-align: middle;
	max-width: 200px;
	max-height: 200px;
}

.stlcatalog-listing-item .helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}


.stlcatalog-listing-item-supported,
.stlcatalog-listing-item-paid,
.stlcatalog-listing-item-free {
	position: absolute;
	bottom: 40px;
	font-weight: bold;
	font-size: 8px;
	/*text-shadow: 0px 0px 3px #000;*/
	border-radius: 8px;
	padding: 2px 6px;
	opacity: .6;
}

.stlcatalog-listing-item-supported {
	right: 4px;
	color: #090;
	border: 1px #090 solid;
	background-color: #cfc;
}

.stlcatalog-listing-item-paid {
	left: 4px;
	color: #009;
	border: 1px #009 solid;
	background-color: #ccf;
}

.stlcatalog-listing-item-free {
	left: 4px;
	color: #990;
	border: 1px #990 solid;
	background-color: #ffc;
}

.stlcatalog-listing-item-id {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
	font-size: 12px;
	color: #fff;
	/*text-shadow: 0px 0px 3px #fff;*/
	border-right: 1px #000 solid;
	border-bottom: 1px #000 solid;
	background-color: #333;
	border-bottom-right-radius: 8px;
	padding: 2px 6px;
	opacity: .8;
}

.stlcatalog-pagination {
	position: relative;
}

.stlcatalog-pagination-button-container {
	text-align: center;
}

.stlcatalog-pagination-info-1 {
	position: absolute;
	top: 4px;
	left: 0;
}

.stlcatalog-pagination-info-2 {
	position: absolute;
	top: 4px;
	right: 0;
}

.stlcatalog-page-button {
	margin: 2px;
}

.stlcatalog-page-active {
	border: 1px #090 solid;
	background-color: #cfc;
}


/*
	============================================================================
	Random item picker
*/

.stlcatalog-dice-filter,
.stlcatalog-dice-rolling-container,
.stlcatalog-dice-image-container {
	width: 1100px;
}

.stlcatalog-dice-filter {
	border: 1px #666 solid;
	border-radius: 4px;
	padding:4px;
}

.stlcatalog-dice-image-container img {
	width: 100%;
}

.stlcatalog-dice-rolling-container {
	text-align: center;
}

#stlcatalog-dice-roll {
	font-size: 72pt;
	margin: 50px auto;
}

.stlcatalog-dice-filter-checkboxes {
	overflow: auto;
}

.stlcatalog-dice-filter-checkboxes label {
	float: left;
	width: 50%;
}

.stlcatalog-dice-tag {
	float: left;
	border: 1px #66f solid;
	background-color: #aaf;
	padding: 4px;
	margin: 2px;
	width: 208px;
	font-size: 12px;
}

.stlcatalog-tag-notice {
	margin-top: 6px;
}


/*
	============================================================================
	Image viewer
*/

.stlcatalog-large-image-container {
	float: left;
	width: 500px;
}

#stlcatalog-item-image-viewer-dialog img {
	width: 100%;
}

.stlcatalog-large-image-list-container {
	float: left;
	width: 210px;
	border: 1px #aaa solid;
	margin-left: 16px;
	/*overflow: auto;*/
}

.stlcatalog-large-image-thumb-item {
	float: left;
	width: 100px;
	height: 100px;
	margin: 2px;
	cursor: pointer;
}

.stlcatalog-large-image-thumb-item img {
	max-width: 100px;
	max-height: 100px;
}

.stlcatalog-large-image-info {
	float: left;
	width: 300px;
	border: 1px #aaa solid;
	margin-right: 16px;
	padding: 8px;
}

.stlcatalog-large-image-info hr {
	border: 1px #bbb solid;
}

.stlcatalog-large-image-info .info-tag {
	border: 1px #ccc solid;
	padding: 2px;
	margin-bottom: 2px;
}

.stlcatalog-large-image-button-group {
	overflow: auto;
	margin-top: 6px;
	padding: 2px;
}

#stlcatalog-size-info-button {
	float: left;
}

#stlcatalog-large-image-edit-button {
	float: right;
}

.stlcatalog-size-info-dialog {
	width: 1000px !important;
}
#stlcatalog-size-info-dialog img {
	width: 740px;
}

#stlcatalog-size-info-dialog table {
	float: right;
}
#stlcatalog-size-info-dialog table tbody th {
	width: 110px;
}
#stlcatalog-size-info-dialog table tbody td {
	width: 90px;
}

@media only screen and (max-width: 800px)
{
	.stlcatalog-size-info-dialog {
		width: 100% !important;
	}
	#stlcatalog-size-info-dialog img {
		width: 100%;
	}
	#stlcatalog-size-info-dialog table {
		float: none;
		width: 100%;
	}
	#stlcatalog-size-info-dialog table tbody th,
	#stlcatalog-size-info-dialog table tbody td {
		width: 50%;
	}
}


/*
	============================================================================
	Item edit dialog styling
*/

/* Dialog layout */

fieldset.stlcatalog-item-info {
	float: left;
}

fieldset.stlcatalog-item-tags {
	float: left;
}

.stlcatalog-item-edit-dialog .ui-dialog-buttonset {
	width: 100%;
	text-align: right;
}

#stlcatalog-dialog-item-remove-button {
	float: left;
}

/* General details */

.stlcatalog-item-info div {
	margin-bottom: 2px;
}

.stlcatalog-item-info label {
	display: inline-block;
	width: 100px;
	font-weight: bold;
}

.item-random-picked-row label {
	width: 100%;
	font-weight: normal;
}

.item-pay-type-row .radio-label {
	width: 60px;
	font-weight: normal;
	font-size: 11px;
}

.stlcatalog-item-info input[name="name"] {
	width: 200px;
}

.stlcatalog-item-info input[name="layers_at_50_micron"],
.stlcatalog-item-info input[name="volume"] {
	width: 60px;
}

.stlcatalog-item-info-buttons {
	margin-top: 10px;
	text-align: right;
}

/* Tags section */

.stlcatalog-item-tags > div {
	position: relative;
	border: 1px #666 solid;
	background-color: #ddd;
	padding: 4px;
	margin-bottom: 4px;
}

.stlcatalog-item-tag {
	position: relative;
	border: 1px #666 solid;
	background-color: #fff;
	padding: 7px;
	margin-bottom: 4px;
}

.stlcatalog-item-tag-delete-button {
	position: absolute;
	top: 4px;
	right: 4px;
}

fieldset.stlcatalog-item-tags input[type="text"] {
	width: 256px;
}

/* Images section */

fieldset.stlcatalog-item-images {
	max-width: 650px;
}

#stlcatalog-item-image-list .image-container {
	position: relative;
	float: left;
	width: 152px;
	height: 152px;
	border: 1px #666 solid;
	margin-bottom: 4px;
	margin-right: 4px;
	text-align: center;
}
#stlcatalog-item-image-list .image-container img {
	max-width: 150px;
	max-height: 150px;
}

#stlcatalog-item-image-list .image-button-group {
	position: absolute;
	top: 8px;
	right: 8px;
}

#stlcatalog-item-image-list .image-is-primary-selector {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	cursor: pointer;
	color: #fff;
	/*text-shadow: 0px 0px 3px #000;*/

	background-color: #666;
}

/* Legend section */

.stlcatalog-item-legend-container {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 300px;
	background-color: #fff;
	border: 1px #060 solid;
	border-radius: 4px;
	padding: 4px 6px 8px 6px;
	font-size: 11px;
}

/*
	============================================================================
	Custom mobile styling
*/

@media only screen and (max-width: 800px)
{
	.stlcatalog-filter-item {
		display: block;
		margin-bottom: 2px;
	}
	.stlcatalog-filter-item label {
		display: inline-block;
		width: 100px;
	}
	.stlcatalog-filter-id label {
		text-align: right;
	}
	.stlcatalog-filter-id {
		float: left;
	}

	#stlcatalog-filter-extended {
		clear: both;
	}

	#stlcatalog-filter input[name="search"],
	#stlcatalog-filter select {
		width: 170px;
	}

	.stlcatalog-filter-tag-container {
		width: 290px;
	}

	.stlcatalog-pagination-info-1 {
		position: relative;
		float: left;
	}
	.stlcatalog-pagination-info-2 {
		position: relative;
		float: right;
	}
	.stlcatalog-pagination-button-container {
		clear: both;
		padding-top: 6px;
	}

	.stlcatalog-listing-item {
		width: 168px;
		height: 168px;
	}
	.stlcatalog-listing-item img {
		max-width: 166px;
		max-height: 166px;
	}
	.stlcatalog-large-image-container {
		width: 338px;
	}
	.stlcatalog-large-image-list-container {
		width: 100%;
		margin-left: 0;
	}
	.stlcatalog-large-image-info {
		width: 100%;
		margin: 0 0 4px 0;
	}
	.stlcatalog-item-legend-container {
		display: none;
	}

	.stlcatalog-dice-filter,
	.stlcatalog-dice-rolling-container,
	.stlcatalog-dice-image-container {
		width: 100%;
	}

	.stlcatalog-random-pick-dialog {
		width: 100% !important;
	}

	.stlcatalog-dice-tag {
		width: 100%;
	}

	.stlcatalog-dice-filter-checkboxes label {
		font-size: 11px;
		width: 100%;
		padding: 4px;
	}
}

/*
	============================================================================
	Tag admin dialog styling
*/

#stlcatalog-tag-admin-dialog .tag-group {
	width: 1130px;
}

#stlcatalog-tag-admin-dialog .tag-group .group-buttons {
	float: right;
}

#stlcatalog-tag-admin-dialog .tag-group-content {
	border-top: 1px #00c solid;
	padding: 4px;
	overflow: auto;
}

#stlcatalog-tag-admin-dialog .tag-group .tag-item {
	float: left;
	border: 1px #66f solid;
	background-color: #aaf;
	padding: 4px;
	margin: 2px;
	width: 220px;
	font-size: 12px;
}

#stlcatalog-tag-admin-dialog .tag-group .tag-item span {
	display: inline-block;
	margin-top: 2px;
}

#stlcatalog-tag-admin-dialog .tag-group .tag-item .tag-buttons {
	float: right;
}

#stlcatalog-tag-group-edit-form .col-field-name { width: 100px; }
#stlcatalog-tag-group-edit-form .col-field-value { width: 250px; }
#stlcatalog-tag-group-edit-form .col-field-value input { width: 100%; }

#stlcatalog-tag-edit-form .col-field-name { width: 100px; }
#stlcatalog-tag-edit-form .col-field-value { width: 250px; }
#stlcatalog-tag-edit-form .col-field-value input,
#stlcatalog-tag-edit-form .col-field-value select {
	width: 100%;
}

@media only screen and (max-width: 800px)
{
	.stlcatalog-tag-admin-dialog {
		width: 100% !important;
	}
	#stlcatalog-tag-admin-dialog .tag-group {
		width: 100%;
	}
	#stlcatalog-tag-admin-dialog .tag-group .tag-item {
		width: 96%;
	}
}


/*
	============================================================================
	Vendor admin dialog styling
*/

#stlcatalog-vendor-admin-dialog .vendor {
	width: 1130px;
}

#stlcatalog-vendor-admin-dialog .vendor .vendor-buttons {
	float: right;
}

#stlcatalog-vendor-admin-dialog .vendor-content {
	border-top: 1px #00c solid;
	padding: 4px;
	overflow: auto;
}

#stlcatalog-vendor-admin-dialog .vendor .campaign {
	float: left;
	border: 1px #66f solid;
	background-color: #aaf;
	padding: 4px;
	margin: 2px;
	width: 220px;
	font-size: 12px;
}

#stlcatalog-vendor-admin-dialog .vendor .campaign span {
	display: inline-block;
	margin-top: 2px;
}

#stlcatalog-vendor-admin-dialog .vendor .campaign .campaign-buttons {
	float: right;
}

#stlcatalog-vendor-edit-form .col-field-name { width: 100px; }
#stlcatalog-vendor-edit-form .col-field-value { width: 250px; }
#stlcatalog-vendor-edit-form .col-field-value input { width: 100%; }

#stlcatalog-campaign-edit-form .col-field-name { width: 100px; }
#stlcatalog-campaign-edit-form .col-field-value { width: 250px; }
#stlcatalog-campaign-edit-form .col-field-value input,
#stlcatalog-campaign-edit-form .col-field-value select {
	width: 100%;
}

@media only screen and (max-width: 800px)
{
	.stlcatalog-vendor-admin-dialog {
		width: 100% !important;
	}
	#stlcatalog-vendor-admin-dialog .vendor {
		width: 100%;
	}
	#stlcatalog-vendor-admin-dialog .vendor .campaign {
		width: 96%;
	}
}