@import 'cards.css';

@media only screen {
	.wiki table.theme{
		empty-cells:show
	}
	.wiki table.theme tr:first-child td {
		white-space:nowrap;
		text-align:center;
		padding:.4em .6em;

		border-bottom:1px solid rgb(63,63,63);

		color:#181818;
		text-shadow:0 1px 0 rgba(255,255,255,.33);

		background: #aaa;
		background: -moz-linear-gradient(top, #aaa 0%, #888 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#888));
		background: -webkit-linear-gradient(top, #aaa 0%,#888 100%);
		background: -o-linear-gradient(top, #aaa 0%,#888 100%);
		background: -ms-linear-gradient(top, #aaa 0%,#888 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#888888',GradientType=0 );
		background: linear-gradient(top, #aaa 0%,#888 100%)
	}

	.red {
		color:var(--high-contrast-red);
	}

	.blue {
		color:blue;
	}

	#user_permission_list {
		padding-left: 4em;
		margin-top: 0px
	}

	.indent {
		margin-left:15px;
	}

	#edit_table {
		width:100%;
	}

	/* We use this to align the first image on wiki pages left-aligned on mobile, but right on computer */
	:is(.text-body, .preview) p:first-of-type > img {
		display: block;
		text-align: center;
		margin-bottom: 1rem;
		max-width: 100%;
		height: auto;
	}

	#edit_plugin_table {
		/*border-left:1px solid black;*/
		/*padding-left:20px;*/
		/*width:420px;*/
		width: auto;
		padding: 1rem;
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
		margin-top: 10rem;
	}

	td#edit_plugin_table table {
		display: table;
	}

	td#edit_plugin_table tbody {
		display: table-row-group;
	}

	td#edit_plugin_table tr {
		display: table-row;
	}

	td#edit_plugin_table td {
		display: table-cell;
	}

	#edit_table, #edit_table tbody, #edit_table tr, #edit_table td {
		display: block;
	}

	#edit_table :is(div.preview, .text.body) tbody {
		display: table-row-group;
	}
	#edit_table :is(div.preview, .text.body) tr {
		display: table-row;
	}
	#edit_table :is(div.preview, .text.body) td {
		display: table-cell;
	}

	td#edit_plugin_table {
		display: block
	}

	#edit_plugin_table .text-body {
		overflow: auto hidden;
	}

	textarea {
		width: 20em;
	}

	/*	table theme  */

	/* ----- theme styles ----- */
	table:not([id]) {
		empty-cells:hide;
		margin:2em 0;
		font-size:.75em;
	}
	table:not([id]) caption {
		text-align:left;
		font-weight:bold
	}
	table:not([id]) th {
		white-space:nowrap;
		text-align:center;
		padding:0 .75em;
		color:#181818;
		border:0;

		background-color:#999;
		background-image: -webkit-linear-gradient(top, #aaa 0%,#888 100%);
		background-image: -moz-linear-gradient(top, #aaa 0%, #888 100%);
		background-image: -ms-linear-gradient(top, #aaa 0%,#888 100%);
		background-image: -o-linear-gradient(top, #aaa 0%,#888 100%);
		background-image: linear-gradient(top, #aaa 0%,#888 100%);
	}
	table:not([id]) tbody {
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	table:not([id]) thead {
		border-top:1px solid #888;
		border-left:1px solid #888;
		border-right:1px solid #888;
	}

	table:not([id]) tfoot td {
		background:#ddd;
		border:1px solid #aaa;
		border-top-color:rgb(63,63,63);
		-webkit-box-shadow:0 1px 1px rgba(255,255,255,.5) inset;
		-moz-box-shadow:0 1px 1px rgba(255,255,255,.5) inset;
		box-shadow:0 1px 1px rgba(255,255,255,.5) inset
	}
	table:not([id]) td {
		padding:0 .375em;
		border-top:1px solid #aaa;
	}
	table:not([id]) td,
	table:not([id]) th {
		line-height: 2;
	}
	/*table:not([id]) td.checkbox {*/
	/*	text-align: center;*/
	/*}*/
	table:not([id]) tbody tr:first-child td {
		border-top:1px solid rgb(63,63,63)
	}

	/*
		Funnily enough, you can't combine the css selectors into
		  tbody tr:nth-child(odd) td,
		  tbody tr.odd td
		It causes the IE parser to break.  The whole point of
		the tr.odd classes is for that compatibility.
	*/
	table:not([id]) tbody tr:nth-child(odd) td {
		background:#eee
	}
	/*table:not([id]) tbody tr.odd td {*/
	/*	background:#eee*/
	/*}*/
	table:not([id]) tbody tr:nth-child(even) td {
		background:var(--white);
	}
	/*table:not([id]) tbody tr.even td {*/
	/*	background: var(--white);*/
	/*}*/
	table:not([id]) tbody tr:hover td,
	table:not([id]) tbody tr.hover td {
		background:#d4d4d4
	}
	table:not([id]) tbody tr td:first-child,
	table:not([id]) tbody tr th:first-child {
		text-align:left
	}

	table:not([id]) tbody tr.highlight td {
		background:#ffffd8;
	}
	table:not([id]) tbody tr.highlight:nth-child(even) td {
		background:#ffffe8;
	}
	table tbody tr.disabled td {
		color:#999;
		font-style: italic
	}

	/* -- two column -- */
	table:not([id]).two-col tbody td,
	table:not([id]).two-col tbody tr:nth-child(odd) td:first-child,
	table:not([id]).two-col tbody tr:nth-child(even) td:first-child {
		background:#eee;
		vertical-align: middle
	}
	table:not([id]).two-col tbody td:first-child label {
		display:block
	}
	table:not([id]).two-col tbody td:first-child {
		border-right:1px solid rgb(128,128,128);
		color:#222
	}
	table:not([id]).two-col tbody td + td {
		background: var(--white);
	}

	/* ----- End of theme ----- */
}

@media only screen and (min-width: 801px) {
	textarea {
		width: 47rem;
	}

	/* 	The markdown hack with Parsedown breaks how images are inserted into
	 	the wiki. Since images at the top of wiki pages need to be aligned at
	 	the top right, we use this style to float the image and give it a margin */
	:is(.text-body, .preview) p:first-of-type > img,
	:is(.text-body, .preview) h2[id] + p > img {
		float: right;
		margin-left: 1rem;
		margin-bottom: 0;
	}
}

@media only screen and (min-width: 1261px) {
	textarea {
		width: 75rem;
	}
}