.center-everything {
	text-align:center
}

.production-type {
	font-size:72pt;
	font-weight:900;
}

.production-name {
	font-size:48pt;
	font-weight:700;
}

.production-content {
	font-size:24pt;
	font-weight:400;
}

.production-content-sub {
	font-size:18pt;
	font-weight:250;
}

.image-centered {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.production-content a {
	background-color:inherit;
	color:white;
}

.hidden-sect {
	display:none;
	width:100%;
}

.data-sect {
	display:none;
}

.psuedolink:hover {
	cursor:pointer;
	color:teal;
}

.selected-psuedolink {
	color:red;
}

.sort-container {
	background-color:#111;
	margin-bottom:8px;
}

.sort-container-secondary {
	background-color:#333;
}

.sort-tag-container {
	margin:0px;
	width:19%;
	display:inline-block;
	text-align:center;
}

.sort-tag {
	padding:8px 16px 16px 8px;
	text-align:center;
	display:inline-block;
}

.title-thin {
	font-weight: 70;
	font-size: 24pt;
	font-family: Raleway,"Open Sans",Arial;
}

.cover-container {
	display:inline-block;
	margin:16px;
}

.cover-container:hover {
	color:teal;
	cursor:pointer;
}

.cover-container:hover .cover-thumbnail {
	border-color:teal;
}

.cover-thumbnail {
	position:relative;
	display:inline-block;
	border-style:solid;
	border-width:5px;
	border-color:gray;
}

.cover-name {
	display:block;
	text-align:center;
	padding:8px;
}

.cover-elemcount {
	position: absolute;
	bottom: 8px;
	right: 8px;
	
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;	
	font-weight:900;
}

.cover-tags {
	position: absolute;
	top: 8px;
	left: 8px;
	
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;	
	font-weight:900;	
}

.viewer-container {
    position: fixed;
    left: 50%;
	top:150%;
    transform: translate(-50%, -50%);
	
	border-style:solid;
	border-width:10px;
	border-color:gray;
	
	background-color:#333;
	height:95%;
}

.viewer-close-circle {
	cursor:pointer;
	
	position:absolute;
	top: 8px;
	right: 8px;
	
	height: 25px;
	width: 25px;
	
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	
	z-index:999;
}

.viewer-close-circle:hover {
	color:red;
}

.viewer-close-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -60%);
	
	font-weight:900;
	font-size:25px;
}

.viewer-content-container {
	position:right;
	display:inline-block;
	
	width:100%;
	height:100%;
	
	background-color:teal;
}

.viewer-content-parent {
	display:inline-block;
	
	height:100%;
	
	overflow-y:scroll;
}

.viewer-content {
	width:100%;
}

/* https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6 ; for horizontal scrollbar */
.viewer-content-preview {
	width:100%;
	
	display:flex;
	flex-wrap:nowrap;
	overflow-x:auto;
}

.viewer-preview-thumbnail {
	margin:8px;
	
	border-style:solid;
	border-width:3px;
	border-color:gray;
	
	cursor:pointer;
	
	flex:0 0 auto;
}	

.viewer-preview-thumbnail:hover {
	border-color:teal;
}

.viewer-content-controller {
	position:relative;
	display:inline-block;
	
	background-color: #222;
	
	height:100%;
	
	cursor:pointer;
}

.viewer-content-controller:hover {
	color:teal;
	
	background-color:#444;
}

.viewer-content-controls {
	padding:8px;
	position:relative;
	text-align:center;
}

.viewer-controls-link-container {
	display: flex;
	width:100%;
	justify-content: space-between;
	margin-bottom:16px;
}

.viewer-controls-link-container span {
	color:green;
	font-weight:bold;
	font-size:18pt;
	cursor:pointer;
}

.viewer-controls-link-container span:hover {
	color:#0d0;
}

.selected-thumbnail {
	border-color:#b00;
}

.selected-thumbnail:hover {
	border-color:red;
}

.filter-label {
	padding-left:8px;
	padding-right:32px;
}

.hidden-element {
	display:none;
}

/* https://www.freakyjolly.com/how-to-disable-text-selection-highlighting/#.X__fYOhKiHs */
.disable-select{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.enable-select{
  -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
     -khtml-user-select: all; /* Konqueror HTML */
       -moz-user-select: all; /* Firefox */
        -ms-user-select: all; /* Internet Explorer/Edge */
            user-select: all; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}