@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Capriola:400,400i,700,700i');

.tob {
	font: 10pt "Capriola", Candara, sans-serif;
	background:
		url('https://chilly.muncher.se/layouts/tob/noise.png') center,
		url('https://chilly.muncher.se/layouts/tob/bg.png') center,
		linear-gradient(to top, #ffd3d0 0%, #ff406a 100%);
	min-height: 180px;
	padding: 41px;
	text-shadow: 0 2px 1px rgba(0,0,0,0.45);
	color: white;
}

.tob ::selection {background: #3DDB87; text-shadow: none;}
.tob ::-moz-selection {background: #3DDB87; text-shadow: none;}

/* Post & Sig */


.tobpost {
    box-shadow:
		0 0 0 1px black,
		inset 0 0 25px rgba(0,0,0,.75),
		2px 4px 4px rgba(0,0,0,0.3);
	border: 2px groove #FFEEBF;
	border-radius: 8px;
	padding: 12px 15px;
	background:
		repeating-linear-gradient(to bottom, rgba(40,0,30,0.8) 0px, rgba(55,00,60,0.8) 90px, rgba(40,0,30,0.8) 180px);
	min-height: 100px;
}

.tobsig {
	position: relative;
	text-shadow: none;
	font-size: 9pt;
	color: black;
	margin: 20px 35% 0 30px;
	border-radius: 15px;
	background: #FFF8BA url('https://chilly.muncher.se/layouts/tob/stripes.png');
	padding: 6px 9px;
	box-shadow:
		inset 0 0 4px rgba(0,0,0,.8),
		2px 4px 4px rgba(0,0,0,0.3);
	text-shadow:
		1px 0px 0px #FFF8BA,			-1px 0px 0px #FFF8BA,
		0px 1px 0px #FFF8BA,			0px -1px 0px #FFF8BA,
		1px 1px 0px #FFF8BA,			-1px -1px 0px #FFF8BA,
		1px -1px 0px #FFF8BA,			-1px 1px 0px #FFF8BA;
	transition: 0.5s ease;
}

.tobsig img {vertical-align: bottom;}

.tobsig:hover {
	background: #FFE19B url('https://chilly.muncher.se/layouts/tob/stripes.png');
	transition: 0.5s ease;
}

.tobsig:before {
	position: absolute;
	content: url('https://chilly.muncher.se/layouts/tob/star.png');
	transform: rotate(9deg);
	top: -7px;
	right: -4px;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}


/* Quote & Codes */


.tob .quote, .tob .code {
	position: relative;
	margin-left: -15px;
}

.tob .quote > .boxhead:after, .tob .code > .boxhead:after {content: ':'}

.tob .quote > .box, .tob .code > .box {
	margin-top: 3px;
	border: none;
	background: rgba(0,0,0,.6);
	padding: 7px 6px 9px 30px;
	box-shadow:	2px 2px 4px rgba(0,0,0,.35);
	position: relative;
	transition: .5s ease;
}

.tob .quote > .box:hover, .tob .code > .box:hover {
	background: rgba(0,0,0,.45);
	transition: .5s ease;
}

.tob .quote > .boxhead, .tob .code > .boxhead {
	display: inline-block;
	padding: 2px 4px 2px 24px;
	border-radius: 0 3px 3px 0;
	box-shadow:
		inset 5px 0 20px rgba(0,0,0,.4),
		2px 2px 4px rgba(0,0,0,.35);
	overflow: hidden;
}

/* -- */

.tob .quote > .boxhead {	
	background: #028AD3;
	color: #eee;
}

.tob .quote > .box {
	color: #ccc;
	border-radius: 0 6px 6px 0;
}

.tob .quote > .box:before {
	position: absolute;
	content: "\275D";
	left: 9px; top: 4px;
	font-size: 18pt;
	pointer-events: none;
}

.tob .quote:before {
	position: absolute;
	content: "\2605";
	top: -3px; left: 6px;
	color: #FFDF6D;
	font-size: 12pt;
	transform: rotate(-9deg);
}

/* -- */

.tob .code > .boxhead {	
	background: #D11F1F;
	color: #dff;
}

.tob .code > .box {
	color: #85D1B2;
	border-radius: 0 2px 2px 0;
	font-size: 10pt;
	background: rgba(175,66,139,.6);
}

.tob .code > .box:hover {
background: rgba(175,66,139,.4);}

.tob .code > .box:before {
	position: absolute;
	content: "\00AB";
	left: 9px; top: 0;
	font-size: 18pt;
	pointer-events: none;
}

.tob .code:before {
	position: absolute;
	content: "\2606";
	top: -3px; left: 6px;
	color: #6DFFA2;
	font-size: 12pt;
	transform: rotate(-9deg);
}


/* Links */


.tob a {text-decoration: none;}
.tob a:link {color: #5E99FF;}
.tob a:visited {color: #2A73C2;}
.tob a:hover {color: #93C7FF;}
.tob a:active {text-shadow: 0 0 5px rgba(255,255,255,.3);}