lainchan/stylesheets/new_test.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
	max-width: 100%;
}

body {
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	margin: 22px 5px;
	background: #1e1e1e;
	color: #999999;
}

.bar {
	z-index: 1;
	font-size: 13px;
	width: 100%;
	height: 20px;
	position: fixed;
	display: block;
	margin-left: -5px;
	background: #333333;
	border: solid #666666;
}
	.bar.top {
		top: 0;
		border-width: 0 0 1px 0;
	}
		.bar.top .boardlist {
			overflow: scroll;
			display: table;
			border-collapse: separate;
			border-spacing: calc(1em / 3) 2.5px;
			text-align: center;
			margin: 0 auto;
			height: 100%;
		}
			.bar.top .boardlist .sub {
				white-space: nowrap;
				display: table-cell;
			}
	.bar.bottom {
		bottom: 0;
		border-width: 1px 0 0 0;
	}
		.bar.bottom .pages {
			margin-top: -1px;
		}
			.bar.bottom .pages > * {
				display: inline-block;
			}

@media (max-width: 480px) {
	body, .bar {
		margin-left: 0;
		margin-right: 0;
	} }

a, a:visited, a:active, a:focus {
	color: #cccccc;
	-webkit-transition: 0.15s color;
	-khtml-transition: 0.15s color;
	-moz-transition: 0.15s color;
	-ms-transition: 0.15s color;
	-o-transition: 0.15s color;
	transition: 0.15s color;
	-webkit-transition: 0.15s text-shadow;
	-khtml-transition: 0.15s text-shadow;
	-moz-transition: 0.15s text-shadow;
	-ms-transition: 0.15s text-shadow;
	-o-transition: 0.15s text-shadow;
	transition: 0.15s text-shadow;
	text-decoration: none;
}
	a.post_no, a:visited.post_no, a:active.post_no, a:focus.post_no {
		color: #999999;
	}
	a:hover, a:visited:hover, a:active:hover, a:focus:hover {
		text-shadow: 0px 0px 5px white;
		color: #32dd72;
	}

.board_image, header, body > form[name="post"] {
	display: block;
	max-width: 100%;
}

.board_image, header {
	width: 384px;
	margin: 0 auto;
}

.board_image {
	border: 1px solid #666666;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	width: auto !important;
	height: auto !important;
	margin-top: 32px;
}
	@media (max-width: 480px) {
		.board_image {
			width: 100% !important;
			border-top: 0;
			border-right: 0;
			border-left: 0;
			margin-top: 0;
			-webkit-border-radius: 0;
			-khtml-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			-o-border-radius: 0;
			border-radius: 0;
		} }

header {
	text-align: center;
	color: #32dd72;
	margin: 1em auto;
}
	header h1 {
		font: 26px "lain", tahoma;
		font-weight: bold;
		letter-spacing: -2px;
		margin-bottom: 6px;
	}
	header .subtitle {
		font-size: 8pt;
	}

.unimportant {
	font-size: 10px;
}

input, textarea {
	color: #cccccc;
	-webkit-appearance: none;
	-khtml-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}
	input[type="checkbox"]:after, textarea[type="checkbox"]:after {
		opacity: 1;
		display: inline-block;
		content: " ";
		box-sizing: border-box;
		width: 12px;
		height: 12px;
		background: transparent;
		border: 1px solid #666666;
		position: relative;
		top: 1px;
		right: calc(1em + 4px);
		margin-right: calc(1px - 1em);
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		-moz-border-radius: 2px;
		-ms-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
	}
	input:not([type="file"]), textarea:not([type="file"]) {
		background: #333333;
		border: 1px solid #666666;
	}
	input[type="text"], input[type="button"], input[type="password"], input[type="submit"], input#body, textarea[type="text"], textarea[type="button"], textarea[type="password"], textarea[type="submit"], textarea#body {
		padding: 2px 4px;
	}
	input[type="text"], input[type="button"], input[type="password"], input[type="submit"], textarea[type="text"], textarea[type="button"], textarea[type="password"], textarea[type="submit"] {
		height: 16px;
	}
	input[type="text"], input[type="submit"], input#body, textarea[type="text"], textarea[type="submit"], textarea#body {
		box-sizing: content-box;
		-webkit-transition: 0.15s border-color;
		-khtml-transition: 0.15s border-color;
		-moz-transition: 0.15s border-color;
		-ms-transition: 0.15s border-color;
		-o-transition: 0.15s border-color;
		transition: 0.15s border-color;
	}
		@media (max-width: 480px) {
			input[type="text"]:last-of-type, input[type="submit"]:last-of-type, input#body:last-of-type, textarea[type="text"]:last-of-type, textarea[type="submit"]:last-of-type, textarea#body:last-of-type {
				border-right: 0;
				-webkit-border-radius: 2px 0 0 2px;
				-khtml-border-radius: 2px 0 0 2px;
				-moz-border-radius: 2px 0 0 2px;
				-ms-border-radius: 2px 0 0 2px;
				-o-border-radius: 2px 0 0 2px;
				border-radius: 2px 0 0 2px;
			} }
	input[type="text"]:focus, input[type="submit"]:hover, input#body:focus, textarea[type="text"]:focus, textarea[type="submit"]:hover, textarea#body:focus {
		border-color: #888888;
	}
	input[type="submit"]:hover, textarea[type="submit"]:hover {
		color: #32dd72;
		background: #555555;
	}
	input[type="submit"], textarea[type="submit"] {
		-webkit-transition: 0.15s background;
		-khtml-transition: 0.15s background;
		-moz-transition: 0.15s background;
		-ms-transition: 0.15s background;
		-o-transition: 0.15s background;
		transition: 0.15s background;
		-webkit-transition: 0.15s color;
		-khtml-transition: 0.15s color;
		-moz-transition: 0.15s color;
		-ms-transition: 0.15s color;
		-o-transition: 0.15s color;
		transition: 0.15s color;
		width: 64px;
		padding: 2px 5px;
		margin-right: -8px;
	}
	input[type="text"], input#body, textarea[type="text"], textarea#body {
		width: calc(100% - 2px);
	}
		input[type="text"][name="subject"], input#body[name="subject"], textarea[type="text"][name="subject"], textarea#body[name="subject"] {
			width: calc(100% - 76px - 4px);
		}
	input#body, textarea#body {
		min-width: calc(100% - 2px);
		margin: 0;
	}

/*[for^="delete"], [for="spoiler"] {
	&:before {
		display: inline-block;
		content: " ";
		box-sizing: border-box;
		width: $body_size;
		height: $body_size;
		background: transparent;
		border: $nav_border $nav_border_look;
		position: relative;
		top: 1px;
		right: calc(1em + 4px);
		margin-right: calc(1px - 1em);
		@include border-radius($div_radius);
	}
}*/
form[name="post"] {
	display: block;
}
	@media (max-width: 480px) {
		form[name="post"] table, form[name="post"] tbody, form[name="post"] tr, form[name="post"] td {
			margin: 0;
			width: 100% !important;
		} }
	form[name="post"] table, form[name="post"] tbody {
		max-width: 100%;
	}
	form[name="post"] table {
		border-collapse: separate;
		border-spacing: 2px;
		margin: 0 auto;
	}
	form[name="post"] tbody {
		width: 100%;
		display: block;
		position: relative;
		left: -4px;
	}
	form[name="post"] [id|="upload"] td {
		display: table-row;
	}
		form[name="post"] [id|="upload"] td > * {
			display: table-cell;
			height: 20px;
		}
			form[name="post"] [id|="upload"] td > *#upload_file {
				width: 100%;
			}
			form[name="post"] [id|="upload"] td > *#spoilercontainer {
				width: 74px;
			}
	form[name="post"] th, form[name="post"] input, form[name="post"] textarea {
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		-moz-border-radius: 2px;
		-ms-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
	}
	form[name="post"] th {
		text-align: left;
		min-height: 20px;
		vertical-align: middle;
		width: 64px;
		min-width: 64px !important;
		padding: 0 5px;
		font-weight: bold;
		border: 1px solid #333333;
		background: #333333;
	}
		@media (max-width: 480px) {
			form[name="post"] th {
				-webkit-border-radius: 0 2px 2px 0;
				-khtml-border-radius: 0 2px 2px 0;
				-moz-border-radius: 0 2px 2px 0;
				-ms-border-radius: 0 2px 2px 0;
				-o-border-radius: 0 2px 2px 0;
				border-radius: 0 2px 2px 0;
			} }

hr {
	border: 1px solid #333333;
	margin: 6px 0px;
	clear: left;
}

.blotter {
	color: red;
	font-weight: bold;
	text-align: center;
}
	.blotter p {
		margin: 12px 0;
	}

[id^="thread"] > .files, .op {
	margin-left: 19px;
}
	@media (max-width: 480px) {
		[id^="thread"] > .files, .op {
			margin-left: 0;
		} }

[id^="thread"] > br {
	display: none;
}

.fileinfo {
	margin: 5px 0 5px 0;
}

.post-image {
	margin: 0 10px 10px 0;
	float: left;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}
	@media (max-width: 480px) {
		.post-image {
			float: none;
			width: 100% !important;
			height: auto !important;
			margin-right: 0;
			-webkit-border-radius: 0;
			-khtml-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			-o-border-radius: 0;
			border-radius: 0;
			margin-bottom: 5px;
		} }

@media (max-width: 480px) {
	.post .intro {
		clear: left;
	} }
.post .intro [type="checkbox"] {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	width: 14px;
	margin: 0 4px 2px 0;
}
.post.op .intro {
	line-height: 1.5em;
	margin-top: -.25em;
}
	@media (max-width: 480px) {
		.post.op .intro {
			display: block;
			margin-top: calc(-.5em - 1px);
			padding: 0.25em 18px;
			background-color: #333333;
			border-bottom: 1px solid #666666;
		} }
	.post.op .intro > :last-child:before {
		content: " ";
	}
@media (max-width: 480px) {
	.post.op .body {
		margin: 0.7em 23px;
	} }
.post .body {
	margin: 0.7em 0 0.7em 18px;
}

.postcontainer {
	border-top: 3px solid transparent;
}
	.postcontainer .sidearrows {
		float: left;
		width: 14px;
		margin-right: 5px;
	}
		@media (max-width: 480px) {
			.postcontainer .sidearrows {
				display: none;
			} }
	.postcontainer .op .body {
		margin-bottom: 1em;
	}
	.postcontainer .reply {
		display: table;
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		-moz-border-radius: 2px;
		-ms-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
		background-color: #333333;
		border: 1px solid #666666;
		padding: 8px 19px 6px 8px;
	}
		.postcontainer .reply .files, .postcontainer .reply .body {
			margin-left: 18px;
		}
		@media (max-width: 480px) {
			.postcontainer .reply .files {
				position: relative;
				left: -7px;
				margin-right: -7px;
			} }
		@media (max-width: 480px) {
			.postcontainer .reply {
				box-sizing: border-box;
				width: 100%;
				border-left: 0;
				border-right: 0;
				-webkit-border-radius: 0;
				-khtml-border-radius: 0;
				-moz-border-radius: 0;
				-ms-border-radius: 0;
				-o-border-radius: 0;
				border-radius: 0;
			} }

.name {
	font-weight: 800;
	color: #32dd72;
}

.subject {
	font-weight: 800;
	color: rgba(50, 221, 114, 0.6);
}

.spoiler {
	background: black;
	color: black;
}
	.spoiler:hover {
		color: white;
	}

.quote {
	color: #b8d962;
}

.omitted {
	opacity: 0.6;
}

div.delete {
	float: right;
	white-space: nowrap;
	position: relative;
	right: 15px;
	margin-right: -7px;
}
	div.delete input {
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		-moz-border-radius: 2px;
		-ms-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
	}
		div.delete input:last-child {
			margin-left: 2px;
		}
	div.delete [type="text"] {
		width: 256px !important;
	}
	div.delete:last-child {
		margin-top: 2px;
	}

footer {
	clear: both;
	margin-bottom: 32px;
}