/* Common Site CSS*/
	* {
		margin: 0px;
		padding: 0px;
	}

	body {
		color: #000;
		font-family: verdana, sans-serif, helvetica;
		font-size: 12px;
		line-height: 1.42857143;
	}
	
	a {
		font-family: verdana, sans-serif, helvetica;
		font-size: 1em;
		color: #337ab7;
		text-decoration: none;
	}
	img {
		border:none;
		vertical-align:middle
	}
	
	.belowThreshold {
		opacity: .1;
	}

	.belowThreshold:hover {
		opacity: unset;
	}
		
	.voteUpComment {
		filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
		vertical-align: top;
		width: 14px;
		margin-top: 1px;
	}
	
	.reportComment {
		filter: invert(.5) sepia(1) saturate(100) hue-rotate(360deg);
		vertical-align: top;
		width: 12px;
		margin-top: 3px;
	}
	
	.deleteComment {
		filter: invert(.7);
		vertical-align: top;
		width: 12px;
		margin-top: 3px;
	}
	
	.deleteAsSpamComment {
		filter: invert(.5) sepia(1) saturate(5) hue-rotate(340deg);
		vertical-align: top;
		width: 12px;
		margin-top: 3px;
	}
	
	/* Forum Pages*/
	.threadContainerItem {
		width: 100%; 
		padding: 10px; 
		border: 1px solid #f0f0f0; 
		box-sizing: border-box;
	}
	
	.threadTopicContainer {
		display: grid; 
		overflow: hidden; 
		grid-template-columns: repeat(1, 1fr); 
		grid-column-gap: 2px; 
		grid-row-gap: 2px; 
		margin: 0 .5em;
	}
	
	.threadTitleContainer 
	{
		background:#006ffa;
		font-size: 1.5em;
		padding: 8px 8px 8px 15px;
		margin: 0px 8px 2px 8px;
		box-sizing: border-box;
		color: #fff;
	}
	
	@media only screen and (min-width: 851px) {
		.threadTopicContainer {
			display: grid; 
			overflow: hidden; 
			grid-template-columns: repeat(3, 1fr) !important; 
			grid-column-gap: 2px; 
			grid-row-gap: 2px; 
			margin: 0 .5em;
		}
	}
	
	
	/* Comment Pages*/

		
			.profileAvatar {
				border-radius: 50%;
				border: 3px solid #fff;
				height: 80px;
				width: 80px;
			}
			
			span.info {
				margin-right: 1.5em;
			}
			
			.commentThumbnail {
				display: inline-block;
				width: 210px;
				text-align: center;
				vertical-align: top;
				padding: 0px 5px 0px 0px;
			}
			
			.commentAvatar {
				display: inline-block;
				box-sizing: border-box;
				vertical-align: top;
				padding: 15px;
				text-align: center;
			}
			
			.commentHeader {
				display: inline-block;
				width: calc(100% - 220px);
			}
			
			.commentBody {
				display: inline-block;
				box-sizing: border-box;
				width: calc(100% - 140px);
				color: #444 !important; 
				background: rgba(0,0,0,.03);
				padding: 20px 20px; 
				margin: 0px 0px 10px 0px; 
				vertical-align: top;
			}
			
			@media only screen and (max-width: 850px) {
					
				.commentHeader {
					display: inline-block;
					width: 100%;
				}
				
				.commentThumbnail {
					width: 	100% !important;
					margin: 20px 0px;
					box-sizing: border-box;
					min-height: 150px;
				}
				.commentAvatar {
					display: none !important;

				}
				
				.commentBody {
					word-break: break-word;
					width: 100% !important;
				}
			}

	.spoiler {
		color: black;
		background: black;
		cursor: text;
	}

	.spoiler a{
		color: black;
		background: black;
	}

	.spoiler:hover {
		color: white;
	}
	
	table tr.pending-tag {
		background: #dcecf6;
	}
	
	table tr.rejected-tag {
		background: #f6dcdc;
	}
	
	div#notice {
		padding:0.25em;
		position:fixed;
		top:0.5em;
		left:25%;
		width:50%;
		z-index:10000;
	}

	div#notice:not(.ui-state-error) {
		background-color:#FFFBBF;
		border:1px solid #CCC999;
		padding: 5px;
		text-align: center;
	}
	
	.mobileWrapperMenu {
		display: none;
	}
	

	.inbox-box {
		font-size: .8em;
		border-radius: 10px;
		padding: 10px;
	}

	.inbox-self {
		background: rgba(0,0,0,.05);
	}

	.inbox-receiver {
		border: 1px solid rgba(0,0,0,.05);
		background: transparent;
	}

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

		.mobileWrapperMenu {
			display: flex;
			justify-content: space-evenly;
		}
		.mobileActions {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 15px 0px;
			height: 30px;
			color: #fff;
			background: #000;
			z-index: 2000;
		}
		.mobileFooterIcon {
			filter:invert(100%);
			height: 2.5em;
			width: 2.5em;
			
		}
	}

	@supports not (display: grid) {
		.showNoGridSupport {
			display: block !important;
		}
		.aside {
			float: left;
			width: 20%;
		}
	}

	.searchList {
		-webkit-appearance: none;
	}
	
	.mainBodyPadding {
		padding: 10px 20px 20px 20px;
	}
	
	.fit-width {
		max-width: 100%;
		height: auto !important;
	}
	
	table.post-view td{
		border: 0px !important;
	}
	
	/* Tag List Specific*/
	table {
		text-align: left;
	}
	td {
		padding: 5px;
		border: 1px solid #f0f0f0;
	}
	th {
		background: #006ffa;
		color: #fff;
		padding: 10px;
	}
	input.tag-list-search {
		padding: 7px;
		width: 100%;
		border: 1px solid #e0e0e0;
	}
	
	textarea {
		padding: 5px;
		border: 1px solid #e0e0e0;
		font-family: inherit;
		font-size: 1em;
	}
	
	.quote {
		margin-top: 5px;
		padding: 15px;
		text-align: justify;
		color: #444444;
		font-style: italic;
		background: #fefefe url('./layout/quote.png') no-repeat top right;
		border: 1px solid #f0f0f0;
	}

	.comment-box {
		width: 100%;
		background: #fff;
		border: 1px solid #f0f0f0;
	}
	.comments-user-thumbnail {
		vertical-align: top;
		max-height: 100px;
		width: 80px;
		background: #fcfcfc;
	}

	
	select {
		padding: 5px 20px 5px 20px;
		border: 1px solid #333;
	}

	@keyframes sharpen
	{
		0%
		{
			-webkit-filter:blur(8px);
			filter:blur(8px)}
		to
		{
			-webkit-filter:none;
			filter:none
		}
	}
	
	/*Pagination begins here*/

	@media(max-width: 660px)
	{
		.desktop-only {
			display:none !important;
		}
	}

	div#paginator {
		padding: 0;
		font-size: 12px;
		text-align: center;
		font-weight: bold;
		clear: both;
	}

	div#paginator a {
		display: inline-block;
		margin: 3px 3px;
		padding: 12px 16px 12px 16px;
		font-weight: normal;
		border: 1px solid #EAEAEA;
	}

	div#paginator a.arrow {
		border: none;
	}

	div#paginator a.arrow:hover {
		background: white;
		color: #9093FF;
	}

	div#paginator a.current {
		border: 1px solid #AAA;
	}

	div#paginator a:hover {
		background: #006ffa;
		color: #fff;
	}

	div#paginator span {
		margin: 0 3px;
		padding: 2px 6px;
	}

	div#paginater {
		display: inline-block;
		padding: 0;
		font-size: 12px;
		text-align: center;
		font-weight: bold;
		clear: both;
	}

	div#paginater a {
		margin: 0 3px;
		padding: 8px 12px;
		font-weight: normal;
		border: 1px solid #EAEAEA;
	}

	div#paginater a.arrow {
		border: none;
	}

	div#paginater a.arrow:hover {
		background: white;
		color: #9093FF;
	}

	div#paginater a.current {
		border: 1px solid #AAA;
	}

	div#paginater a:hover {
		background: #006ffa;
		color: #fff;
	}

	div#paginater span {
		margin: 0 3px;
		padding: 2px 6px;
	}

	.alert {
		padding: 15px;
		margin: 10px;
	}
	.alert-success {
		background: #dff0d8;
		border: 2px solid #d6e9c6;
		color: #3c763d;
	}
	
	.alert-danger {
		background: #a43535;
		color:#fff;
		border: 2px solid #912f3f;
	}
	
	.alert-info {
		background: #d9edf7;
		border: 2px solid #bce8f1;
		color: #31708f;
		text-align: center;
	}
	
	.topnav {
		overflow: hidden;
	}

	.topnav a {
		float: left;
		display: block;
		color: #ffffff;
		text-align: center;
		padding: 20px 16px 23px 16px;
		text-decoration: none;
	}

	.topnav a:hover {
		color: #adecff;
	}

	a.homeIcon{
		padding: 7px 15px 1px 25px !important;
	}
	a.homeIcon:hover {
		background: unset;
	}

	.topnav a.active {
		background-color: #ffffff;
		color: #006ffa;
		font-weight: bold;
	}

	.topnav .icon {
		display: none;
	}
	
	.webm {
		border: 3px solid #0000ff;
	}
	
	article.thumbnail-preview img {
		max-width: 175px;
		max-height: 175px;
	}

	@media screen and (max-width: 850px) {
		
		.topnav a:not(:first-child) {
			display: none;
		}
		
		.topnav a.icon {
			float: right;
			display: block;
		}
		
		.sm-hidden {
			display: none;
		}
		
		.topnav.responsive {
			position: relative;
			max-height: 100vh;
			overflow-y: scroll;
		}
		
		.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		
		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
	}

	.searchList {
		font-weight: bold;
		width: 105px;
		padding: 7px 15px;
		border: 0px;
		color: #ffffff;
		background: #0773fb;
	}
	.tag-type-tag > a, a.tag-type-tag {
		color: #337ab7 !important;
	}

	.tag-type-artist > a, a.tag-type-artist {
		color: #A00 !important;
	}

	.tag-type-artist > a:hover {
		color: #9093FF;
	}

	.tag-type-character > a, a.tag-type-character  {
		color: #0A0 !important;
	}

	.tag-type-character > a:hover {
		color: #9093FF;
	}

	.tag-type-copyright > a, a.tag-type-copyright  {
		color: #A0A !important;
	}

	.tag-type-copyright > a:hover {
		color: #9093FF;
	}

	.tag-type-metadata > a, a.tag-type-metadata  {
		color: #F80 !important;
	}

	.tag-type-metadata > a:hover {
		color: #FA6;
	}

	.tag-type-deprecated > a, a.tag-type-deprecated  {
		color: #c0c0c0 !important;
		text-decoration: line-through;
	}

	.tag-type-deprecated > a:hover {
		color: #c0c0c0;
		text-decoration: line-through;
	}


	#container {
		width: 100%;
		min-height: 100vh;
		display: grid;
		grid-gap: 0px;
		grid-template-rows: max-content max-content max-content max-content auto max-content max-content auto max-content;
		grid-template-columns: 240px auto;
	}
	
	ul.tag-list li {
		display: inline-block;
		width: 200px;
		margin: 2px 4px 2px 15px;
	}
	
	.tag-list li a {

	}
	
	.tag-count {
		color: #a0a0a0;
	}
	
	.thumbnail-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumbnail-preview {
		display: flex;
		width: 195px;
		height: 185px;
		margin-top: 20px;
		align-items: center;
		justify-content: center;
	}
	
	.navSubmenu {
		background: #444444;
		color: #fff;
		padding: 10px 15px;
	}
	
	.navSubmenu a {
		display: inline-block;
		color: #fff;
		text-decoration: none;
		margin: 5px 15px;
		white-space: nowrap;
	}
	
	footer a {
		color: #fff;
		text-decoration: none;
		margin: 10px;
		white-space: nowrap;
	}
	
	footer a:hover {
		color: #eee;
	}

	footer {
		background: linear-gradient(#328dfe, #0773fb);
		padding: 20px;
		text-align: center;
	}
	
	@media only screen and (min-width: 851px) {
		header {
			grid-column: 1 / 3;
			grid-row: 1;
			background: linear-gradient(#328dfe, #0773fb);
		}

		div.navSubmenu {
			grid-column: 1 / 3;
			grid-row: 2;
			margin: 0px;
		}

		div.searchArea {
			grid-column: 1 / 3;
			grid-row: 3;
			margin: 10px 10px;
			height: 32px;
		}

		.aside {
			margin-left: 10px;
			padding-bottom: 20px;
			grid-column: 1;
			grid-row: 5 / 6;
			border-right: 1px solid #f0f0f0;
		}
		
		.headerAd {
			grid-column: 2 / 3;
			grid-row: 4;
			overflow: hidden;
			margin: 10px 10px 0px 10px;
		}
		
		.informationLeftMenu {
			/*Image box showing G-tan for tips*/
			grid-column: 1;
			grid-row: 4;
			height: 100px;
			background: #f0f0f0;
			margin: 10px;
		}
		
		main {
			grid-column: 2;
			grid-row: 5;
			margin-bottom: 20px;
		}
		
		.footerAd {
			grid-column: 2 / 3;
			grid-row: 6;
			text-align: center;

		}

		.pagination {
			grid-column: 2;
			grid-row:  7;
			margin: 20px 0px;

		}
		
		.footerAd2 {
			grid-column: 2 / 3;
			grid-row: 8;
			text-align: center;
		}
		
		footer {
			grid-column: 1 / 3;
			grid-row:  9;
			margin: 0px;

		}
	
	}
	
	/* This is for Tablets*/
	
	@media only screen and (max-width: 850px) {
		#container {
			display: grid;
			grid-template-columns: auto;
			grid-gap: 0px;
			grid-template-rows: max-content max-content max-content max-content max-content max-content max-content max-content max-content auto;
			box-sizing: border-box;
			grid-template-areas:
				"header"
				"headerAd"
				"searchArea"
				"main"
				"footerAd"
				"websitePagination"
				"footerAd2"
				"aside"
				"navSubmenu"
				"footer"
		}
		
		ul.tag-list li {
			padding: 0px;
			width: 95% !important;
			word-break: normal !important;
		}
		
		.thumbail-container {
			display: grid;
			padding: 10px;
			
		}
		
		.thumbnail-preview {
				width: 50vw;
				min-width: unset;
				margin-top: unset;
				padding: 10px;
				box-sizing: border-box;
			}

		/* This is for Mobile Phones*/	
		@media only screen and (min-width: 500px) {
			
			.thumbnail-preview {
				width: 33vw;
				min-width: unset;
				margin-top: unset;
				padding: 10px;
				box-sizing: border-box;
			}
		}
		
			
		.thumbnail-preview img {
			width: 100%;
			object-fit: contain;
			/*height: 175px;
			object-fit: cover;
			*/
			
		}
	

		header {
			grid-area: header;
			background: linear-gradient(#328dfe, #0773fb);
		}

		.searchArea {
			z-index: 1050;
			grid-area: searchArea;
			padding: 10px 10px 10px 10px;
			top: 60px;
			background: #fff;
		}
		
		
		.aside {
			grid-area: aside;
		  	margin: 10px 0px 20px 0px;
			font-size: 1.3em;
		}
		
		.pagination {
			grid-area: websitePagination;
		  	margin: 10px 10px;
		}
		
		div.navSubmenu {
			grid-area: navSubmenu;
			text-align: center;
		}
		
		main {
			grid-area: main;
		}
		
		.headerAd {
			grid-area: headerAd;
			margin: 10px 10px 0px 10px;
			overflow: hidden;
			text-align: center;
		}
		
		.footerAd {
			grid-area: footerAd;
			margin: 10px;
			text-align: center;
		}
		.informationLeftMenu {
			display: none;
		}
		.footerAd2 {
			grid-area: footerAd2;
			margin: 10px;
			text-align: center;
		}
		
		footer {
			grid-area: footer;
			margin: 0px 0px;
			text-align: center;
			padding: 20px;
		}
		
		.mobile-spacing {
			margin-right: 8px;
		}
	}