/*
 * CN_Blog CSS File
 *
 * Description:
 *     Theme for CN_Blog... Not much else to say tbh.
 *
 * Author:
 *     Clara Nguyen (@iDestyKK)
 */

/* ------------------------------------------------------------------------- */
/* Custom Fonts                                                         {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Specifies custom fonts for use on the page that may not be present on the
 * user's system.
 */

@font-face {
	font-family: ssans-regular;
	src: url("../../font/SourceSansPro-Regular.ttf");
}

@font-face {
	font-family: ssans-light;
	src: url("../../font/SourceSansPro-Light.ttf");
}

@font-face {
	font-family: ssans-exlight;
	src: url("../../font/SourceSansPro-ExtraLight.ttf");
}

@font-face {
	font-family: inconsolata;
	src: url("../../font/inconsolata.otf");
}

@font-face {
	font-family: kosugimaru;
	src: url("../../font/KosugiMaru-Regular.ttf");
}

@font-face {
	font-family: lato-regular;
	src: url("../../font/Lato-Regular.ttf");
}

@font-face {
	font-family: lato-bold;
	src: url("../../font/Lato-Bold.ttf");
}

/* ------------------------------------------------------------------------- */
/* Page                                                                 {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Now then... the real deal.
 */

html {
	margin: 0px;
	padding: 0px;

	font-family: ssans-light, kosugimaru;

	text-size-adjust: none;
}

body.pendual {
	margin: 0px;
	padding: 0px;

	font-family: ssans-light, kosugimaru;

	text-size-adjust: none;
}

body.pendual.dark::-webkit-scrollbar {
	width: 8px;
}

body.pendual.dark::-webkit-scrollbar-thumb {
	background-color: #666;
}

body.pendual.dark::-webkit-scrollbar-track-piece {
	background-color: #111;
}

body.pendual.amoled::-webkit-scrollbar {
	width: 8px;
}

body.pendual.amoled::-webkit-scrollbar-thumb {
	background-color: #666;
}

body.pendual.amoled::-webkit-scrollbar-track-piece {
	background-color: #111;
}

/* ------------------------------------------------------------------------- */
/* Top Bar                                                              {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * The top bar present on every page...
 */

body.pendual .top-bar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	z-index: 10000;

	color: #FFF;
	text-shadow:
		0px 0px 4px rgba(0, 0, 0, 0.5), 0px 0px 12px #000, 0px 0px 24px #000;
}

@keyframes bg-fade-in-light {
	0% {
		color: #FFF;
		padding-top: 16px;
	}
	50% {
		padding-top: 12px;
	}
	100% {
		color: #000;
		backdrop-filter: blur(15px) contrast(1.2) saturate(2);
		background-color: rgba(242, 243, 244, 0.5);
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	}
}

@keyframes bg-fade-in-dark {
	0% {
		color: #FFF;
		padding-top: 16px;
	}
	50% {
		padding-top: 12px;
	}
	100% {
		color: #FFF;
		backdrop-filter: blur(15px) contrast(1.2) saturate(2);
		background-color: rgba(11, 11, 14, 0.8);
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	}
}

body.pendual .hover-bar {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	z-index: 10000;

	padding: 12px 0px 12px 0px;

	/*
	text-shadow:
		0px 0px 4px rgba(0, 0, 0, 0.5), 0px 0px 12px #000, 0px 0px 24px #000;
	*/

	animation: bg-fade-in-light 0.5s forwards;
}

body.pendual.dark   .hover-bar,
body.pendual.amoled .hover-bar {
	animation: bg-fade-in-dark 0.5s forwards;
}

body.pendual .banner-links-inner {
	width: calc(100% - 64px);
	max-width: 1280px;

	margin: 0px auto;
	height: 100%;
	padding: 16px 0px 8px 0px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body.pendual .hover-bar .banner-links-inner {
	padding: 0px;
	border-bottom: 0px solid transparent;
}

body.pendual .dark-banner .banner-links-inner {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body.pendual .site-txt {
	float: left;
	margin: 0px 4px;
	font-weight: bold;
	padding: 4px 8px 4px 8px;
}

body.pendual .site-txt .post-name-txt {
	float: right;
	opacity: 0;
}

@keyframes stxt-fade-in {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body.pendual .hover-bar .site-txt .post-name-txt {
	animation: stxt-fade-in 0.5s forwards;
}

body.pendual .banner-link {
	position: relative;
	float: right;
	margin: 0px 4px;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
}

body.pendual .hover-bar .banner-link {
	color: #000;
}

body.pendual.dark   .hover-bar .banner-link,
body.pendual.amoled .hover-bar .banner-link {
	color: #FFF;
}

body.pendual .banner-link:hover {
	/* background-color: #FFF; */
	color: #000;
	text-shadow: 0px 0px 4px transparent;

	backdrop-filter: invert(0.4) contrast(2.5) saturate(2) blur(15px);
	background-color: rgba(16, 16, 16, 0.25);
}

body.pendual .banner-link:hover span.txt-fx {
	color: #FFF;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

body.pendual .dark-banner .banner-link {
	color: #FFF;
}

body.pendual .dark-banner .banner-link:hover {
	background-color: #FFF;
	color: #000;
}

body.pendual .banner-links-inner a {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------------------- */
/* Top Banner                                                           {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * This deals with the top of the page when viewing a specific blog page.
 * Includes the banner, text inside the banner, etc.
 */

body.pendual .top-banner {
	width: 100%;
	height: 720px;
	max-height: 100vh;
	box-shadow: inset 0px 0px 250px rgba(0, 0, 0, 0.5);
}


body.pendual .top-banner .img-layer00 {
	background-image: url("../../../images/banners/knox_sunrise/layer_00.jpg");
	z-index: -3;
}

@keyframes banner-fade {
	25% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

body.pendual .top-banner .img-layer01 {
	background-image: url("../../../images/banners/knox_sunrise/layer_01.jpg");
	animation: banner-fade 2s forwards;
	z-index: -2;
	opacity: 0;
}

body.pendual .top-banner .img-layer02 {
	background: transparent;
	z-index: -1;
}

body.pendual.dark .top-banner .img-layer02,
body.pendual.amoled .top-banner .img-layer02 {
	background-color: rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 250px rgba(0, 0, 0, 0.5);
}

body.pendual .top-banner .img-layer00,
body.pendual .top-banner .img-layer01,
body.pendual .top-banner .img-layer02 {
	background-size: cover;
	background-position: center center;

	position: fixed;
	width: 100%;
	height: 720px;
	top: 0px;
	left: 0px;
}

body.pendual .category-banner {
	height: 420px;
}

body.pendual .category-banner .img-layer00,
body.pendual .category-banner .img-layer01,
body.pendual .category-banner .img-layer02 {
	height: 420px;
}

body.pendual .top-banner .inner {
	width: calc(100% - 64px);
	max-width: 1280px;
	height: 100%;
	margin: auto;
	position: relative;
}

body.pendual .top-banner .inner .dbl-inner {
	position: absolute;
	bottom: 0px;

	font-size: 165%;
	color: #FFF;
	text-shadow:
		0px 0px 1px rgba(255, 255, 255, 1),
		1px 1px 1px rgba(0, 0, 0, 0.225),
		2px 2px 1px rgba(0, 0, 0, 0.2),
		3px 3px 2px rgba(0, 0, 0, 0.175),
		4px 4px 2px rgba(0, 0, 0, 0.15),
		5px 5px 3px rgba(0, 0, 0, 0.125),
		6px 6px 3px rgba(0, 0, 0, 0.1),
		7px 7px 4px rgba(0, 0, 0, 0.075),
		8px 8px 4px rgba(0, 0, 0, 0.05),
		9px 9px 5px rgba(0, 0, 0, 0.025),
		1px 1px 5px #000,
		1px 1px 15px #000;
}

body.pendual .top-banner .inner .dbl-inner .label {
	margin-bottom: 12px;
	overflow: auto;
}

body.pendual .top-banner .inner .dbl-inner .label a {
	text-decoration: none;
	color: inherit;
}

/* ok, we can do better */
body.pendual .top-banner .inner .dbl-inner .label .label-bg {
	float: left;
	background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(15px) saturate(3.5) contrast(2);
	padding: 0px 5px 1px 5px;
	margin-right: 10px;
	font-size: 75%;
	border-radius: 4px;
	font-variant: all-small-caps;
	color: #000 !important;
	text-shadow: 0px 0px 0px transparent !important;
	font-weight: bold;
}

body.pendual .top-banner .inner .dbl-inner .title {
	margin-bottom: 14px;
	font-family: ssans-regular, kosugimaru;
	font-size: 210%;
}

body.pendual .top-banner .inner .dbl-inner .about {
	margin-bottom: 12px;
}

/*
 * Category page patches
 */

body.pendual .category-banner .inner {
	max-width: unset;
}

body.pendual .category-banner .inner .dbl-inner {
	text-shadow: 2px 2px 7px rgba(50, 50, 50, 0.5);
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);

	border-top: 3px solid #333;
	border-bottom: 3px solid #333;
	color: #000;
	padding: 24px 32px;
}

body.pendual .category-banner .inner .dbl-inner .title {
	text-align: center;
	font-variant: small-caps;
}

body.pendual .category-banner .inner .dbl-inner .about {
	text-align: center;
	font-variant: all-small-caps;

	font-family: ssans-regular, kosugimaru;
}


/* ------------------------------------------------------------------------- */
/* Sidebar                                                              {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Sidebar that appears on the home page, category pages, and second page,
 * third page, etc.
 */

body.pendual .widget {
	box-sizing: border-box;
	padding: 16px;
	margin-bottom: 32px;
	/* background-color: #E3E4E5; */
}

body.pendual .about-me {
	position: relative;
	padding-top: calc(50% + 32px);
	background-color: transparent !important;
}

body.pendual .about-me div.name {
	width: 100%;
	font-size: 175%;
	text-align: center;
	padding-bottom: 16px;
}

body.pendual .about-me img.profile-pic {
	box-sizing: border-box;
	border: 8px solid #FFC0CB;

	position: absolute;
	left: 25%;
	width: 50%;
	top: 16px;

	margin: 0 auto;
	border-radius: 50%; /* could be 100% idc */
}

body.pendual.dark .about-me img.profile-pic {
	border: 8px solid #5F5F5F;
}

body.pendual.amoled .about-me img.profile-pic {
	border: 8px solid #333333;
}

body.pendual .widget .header {
	border-top   : 2px solid #000;
	border-bottom: 2px solid #000;

	margin-bottom: 16px;
}

body.pendual.dark .widget .header {
	border-top   : 2px solid #CCCCCF;
	border-bottom: 2px solid #CCCCCF;
}

body.pendual.amoled .widget .header {
	border-top   : 2px solid #FFF;
	border-bottom: 2px solid #FFF;
}

body.pendual .widget .header .inner {
	background-color: transparent;
	margin: 4px 0px;
	width: 100%;
}

body.pendual .widget .header .inner .text {
	color: #000;
	font-size: 125%;
	font-variant: all-small-caps;
	position: relative;
	top: -2px;
	text-align: center;
}

body.pendual.dark .widget .header .inner .text {
	color: #CCCCCF;
}

body.pendual.amoled .widget .header .inner .text {
	color: #FFF;
}

body.pendual .widget .cat-label {
	box-sizing: border-box;
	margin: 4px;
	width: calc(100% - 8px);

	padding: 4px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.pendual.dark   .cat-label,
body.pendual.amoled .cat-label {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Social Media Icons */
body.pendual .sm {
	width: 100%;
	height: 48px;
	position: relative;
	margin-top: 8px;
}

body.pendual .sm-circle {
	margin-top: 16px;
	margin-left: 6px;
	box-sizing: border-box;
}

body.pendual .sm-regular .ico {
	width: 32px;
	height: 32px;
	float: left;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 8px;
}

body.pendual .sm-circle .ico {
	width: 32px;
	height: 32px;
	float: left;
	background-size: 75%;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 8px;
	margin-bottom: 8px;
	border: 2px solid #CCC;
	background-color: #EEE;
	border-radius: 50%;
}

body.pendual.dark .sm-circle .ico {
	background-color: #0b0b0e;
	border: 2px solid #4b4b4e;
}

body.pendual.amoled .sm-circle .ico {
	background-color: #000;
	border: 2px solid #FFF;
}

body.pendual .sm .content {
	float: left;
	line-height: 32px;
	height: 32px;
	box-sizing: border-box;
	margin-left: 10px;
	width: calc(100% - 50px);
}

body.pendual .sm .fb { background-image: url("../../../images/social_icons/facebook-light.svg"  ); }
body.pendual .sm .tw { background-image: url("../../../images/social_icons/twitter-light.svg"   ); }
body.pendual .sm .gh { background-image: url("../../../images/social_icons/github-light.svg"    ); }
body.pendual .sm .yt { background-image: url("../../../images/social_icons/youtube-light.svg"   ); }
body.pendual .sm .sc { background-image: url("../../../images/social_icons/soundcloud-light.svg"); }
body.pendual .sm .bc { background-image: url("../../../images/social_icons/bandcamp-light.svg"  ); }
body.pendual .sm .ln { background-image: url("../../../images/social_icons/line-light.svg"      ); }

body.pendual.dark   .sm .fb, 
body.pendual.amoled .sm .fb { background-image: url("../../../images/social_icons/facebook-dark.svg"  ); }
body.pendual.dark   .sm .tw, 
body.pendual.amoled .sm .tw { background-image: url("../../../images/social_icons/twitter-dark.svg"   ); }
body.pendual.dark   .sm .gh, 
body.pendual.amoled .sm .gh { background-image: url("../../../images/social_icons/github-dark.svg"    ); }
body.pendual.dark   .sm .yt, 
body.pendual.amoled .sm .yt { background-image: url("../../../images/social_icons/youtube-dark.svg"   ); }
body.pendual.dark   .sm .sc, 
body.pendual.amoled .sm .sc { background-image: url("../../../images/social_icons/soundcloud-dark.svg"); }
body.pendual.dark   .sm .bc, 
body.pendual.amoled .sm .bc { background-image: url("../../../images/social_icons/bandcamp-dark.svg"  ); }
body.pendual.dark   .sm .ln, 
body.pendual.amoled .sm .ln { background-image: url("../../../images/social_icons/line-dark.svg"      ); }

/* ------------------------------------------------------------------------- */
/* Post Listings                                                        {{{1 */
/* ------------------------------------------------------------------------- */

body.pendual table.page-table {
	width: 100%;
	color: inherit;
}

body.pendual table.page-table td {
	vertical-align: top;
}

/*
 * The listing of posts (home page, pages, categories, etc).
 */

body.pendual a.post-link-box {
	text-decoration: none;
	color: inherit !important;
}

body.pendual .post-box {
	width: 100%;
	box-sizing: border-box;
	background-color: #E3E4E5;
	padding: 8px 24px;
	position: relative;
}

body.pendual.dark .post-box {
	background-color: #0B0B0E;
	color: #CCCCCF;
	border: 1px solid #171717;
}

body.pendual.amoled .post-box {
	background-color: #0B0B0B;
	color: #FFF;
	border: 1px solid #171717;
}

body.pendual .post-box .title {
	font-size: 175%;
	font-family: ssans-regular, kosugimaru;
	margin: 8px;
}

body.pendual .post-box .tags,
body.pendual .post-box .date {
	font-size: 100%;
	font-family: ssans-regular, kosugimaru;
	margin: 8px;
	font-variant: all-small-caps;
}

body.pendual .post-box .tags {
	margin: 8px;
}

body.pendual .post-box .date {
	margin: 8px 8px 16px 8px;
}

body.pendual .post-box .banner {
	width: 100%;
	height: 320px;
	background-size: cover;
	background-position: center;
}

body.pendual .post-box .desc {
	margin: 16px 0px;
	max-height: 192px;
	overflow-y: hidden;
}

body.pendual .post-box .fade-down {
	height: 64px;
	position: absolute;
	bottom: 50px;
	width: calc(100% - 48px);
	background: rgb(227, 228, 229);
	background: linear-gradient(
		0deg,
		rgba(227, 228, 229, 1.0) 15%,
		rgba(227, 228, 229, 0.0) 100%
	);
}

body.pendual.dark .fade-down {
	background: rgb(11, 11, 14);
	background: linear-gradient(
		0deg,
		rgba(11, 11, 14, 1.0) 15%,
		rgba(11, 11, 14, 0.0) 100%
	);
}

body.pendual.amoled .fade-down {
	background: rgb(11, 11, 11);
	background: linear-gradient(
		0deg,
		rgba(11, 11, 11, 1.0) 15%,
		rgba(11, 11, 11, 0.0) 100%
	);
}

body.pendual .post-box .continue {
	display: table;
	background-color: #000;
	color: #FFF;
	padding: 1px 8px 4px 8px;
	margin: 0px auto 8px auto;
	font-variant: all-small-caps;
}

body.pendual.dark   .post-box .continue,
body.pendual.amoled .post-box .continue {
	background-color: #FFF;
	color: #000;
}

body.pendual .nav-bar {
	width: 100%;
	box-sizing: border-box;
	overflow: auto;
}

body.pendual .nav-bar .nav-left {
	float: left;
}

body.pendual .nav-bar .nav-right {
	float: right;
}

body.pendual .nav-bar .nav-left,
body.pendual .nav-bar .nav-right {
	display: table;
	background-color: #000;
	color: #FFF;
	padding: 1px 8px 4px 8px;
	font-variant: all-small-caps;
}

body.pendual.dark   .nav-bar .nav-left, body.pendual.dark   .nav-bar .nav-right,
body.pendual.amoled .nav-bar .nav-left, body.pendual.amoled .nav-bar .nav-right {
	background-color: #FFF;
	color: #000;
}

body.pendual .nav-bar a {
	color: #FFF;
}

body.pendual.dark   .nav-bar a,
body.pendual.amoled .nav-bar a {
	color: #000;
}

/* ------------------------------------------------------------------------- */
/* Post Content                                                         {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Regarding the body of the page where the post is displayed.
 */

body.pendual .content {
	background-color: #EDEEEF;
	width: 100%;
}

body.pendual a.anchor {
	position: relative;
	top: -56px;
}

body.pendual h1 a,
body.pendual h2 a,
body.pendual h3 a,
body.pendual h4 a,
body.pendual h5 a,
body.pendual h6 a {
	color: inherit !important;
	text-decoration: none;
}

body.pendual li {
	margin: 12px 0px;
}

body.pendual .disclaimer {
	border: 0px solid transparent;
	border-left: 4px solid #A00;
	background-color: rgba(255, 0, 0, 0.15);
	font-size: 15px;
	color: #b30000;
	margin: 8px 0px;
	padding: 8px;
}

body.pendual.dark   .disclaimer,
body.pendual.amoled .disclaimer {
	color: #FF0000;
}

body.pendual.dark .content {
	background-color: #121218;
	color: #CCCCCF;
}

body.pendual.amoled .content {
	background-color: #000;
	color: #FFF;
}

body.pendual .post-body {
	max-width: 1280px;
	width: calc(100% - 64px);
	margin: 0 auto;
	font-family: ssans-regular, kosugimaru;
	font-size: 125%;
	box-sizing: border-box;
	padding: 16px 32px;
}

body.pendual .post-body img {
	max-width: 100%;
}

body.pendual.dark .invertible,
body.pendual.amoled .invertible{
	filter: invert(1);
}

body.pendual a {
	color: #00a5b7 /* #5c23e0 */ /* #006ac7 */;
	text-decoration: none;
}

body.pendual.dark a {
	color: #3BD3E2;
}

body.pendual.amoled a {
	color: #00FFE7;
}

body.pendual h2 {
	border-left: 4px solid #ff768e;
	padding-left: 12px;
	position: relative;
	left: -18px;
	margin-top: 48px;
}

body.pendual h2:first-of-type {
	margin-top: 24px;
}

body.pendual h3 {
	margin-top: 42px;
}

body.pendual.dark h2, body.pendual.amoled h2 {
	border-left: 4px solid #667;
}

body.pendual pre {
	/* border: 1px solid #BBB; */
	padding: 8px;
	overflow-x: auto;
	background-color: #e0e0e0;
	color: #000000;
	/* border-radius: 4px; */
	/* box-shadow: 2px 2px 8px #c7c7c7; */
	border-left: 4px solid #c3c3c3;

	background-image: radial-gradient(#d4d4d4 20%, transparent 20%), radial-gradient(#d4d4d4 20%, transparent 20%);
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 3px 3px;

	position: relative;
	top: -10px;
}

/* Code without a pre on the outside */
body.pendual code {
	background-color: #D8D8D8;
	/* border: 1px solid #C3C3C3; */
	padding: 2px 4px;
	border-radius: 4px;
}

/* Code with a pre on the outside */
body.pendual pre code {
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0px;
	border-radius: 0px;
	text-shadow: 0px 0px 0px transparent;
}

body.pendual pre, body.pendual code {
	font-family: inconsolata !important;
	font-size: 92%;
	tab-size: 4;
}

body.pendual.dark pre {
	background-color: rgba(0, 0, 0, 0.5);
	border: 0px solid transparent;
	border-left: 4px solid #232323;
	box-shadow: 0px 0px 0px transparent;
	border-radius: 0px;
	color: #C3C3C3;

	background-image: radial-gradient(#101010 20%, transparent 20%), radial-gradient(#101010 20%, transparent 20%);
}

body.pendual.dark code {
	background-color: #080808;
	border: 1px solid transparent;
}

body.pendual.dark pre code {
	background-color: transparent;
	border: 0px solid transparent;
}

body.pendual.amoled pre {
	background-color: rgba(12, 12, 12, 0.5);
	border: 0px solid transparent;
	border-left: 4px solid #232323;
	box-shadow: 0px 0px 0px transparent;
	border-radius: 0px;
	color: #C3C3C3;

	background-image: radial-gradient(#151515 20%, transparent 20%), radial-gradient(#151515 20%, transparent 20%);
}

body.pendual.amoled code {
	background-color: #1b1b1b;
	border: 1px solid transparent;
}

body.pendual.amoled pre code {
	background-color: transparent;
	border: 0px solid transparent;
}

/* Label for the code blocks */
body.pendual .code-label {
	position: relative;
	top: 2px;
	left: 20px;
	font-size: 14px;
	font-variant: all-small-caps;
	font-weight: bold;
}

/* Quote box */
body.pendual.light .quote {
	border-left: 4px solid #c3c3c3;
	padding: 8px 14px;
	font-style: italic;
}

body.pendual.dark .quote,
body.pendual.amoled .quote {
	border-left: 4px solid #232323;
	padding: 8px 14px;
	font-style: italic;
}

/* Hide elements in specific themes */
body.pendual.light .light-null {
	display: none;
}

body.pendual.dark .dark-null {
	display: none;
}

body.pendual.amoled .dark-null {
	display: none;
}

/* Tables */
body.pendual table.nt {
	border-radius: 4px;
	border-spacing: 0px;
	background-color: #e0e0e0;
	border: 1px solid #BBB;
	box-shadow: 2px 2px 8px #c7c7c7;
	overflow: hidden;
}

body.pendual table.nt,
body.pendual table.nt td.nows {
	white-space: nowrap;
}

body.pendual table.nt tr.top td,
body.pendual table.nt th {
	background-color: #3e3e3e;
	overflow: hidden;
	color: white;
	text-align: left;
}

body.pendual table.nt tr.bt td,
body.pendual table.nt td,
body.pendual table.nt th {
	padding: 6px 8px;
}

body.pendual.dark table.nt {
	background-color: #1A1A20;
	border: 1px solid #202026;
	box-shadow: 2px 2px 8px #000;
}

body.pendual.dark table.nt tr.top td {
	background-color: #2e2e37;
	color: #FFF;
}

body.pendual.dark table.nt tr.bt td {
	border-bottom: 1px solid #0A0A0A;
	color: #FFF;
}

body.pendual.dark table.nt td {
	color: #FFF;
}

body.pendual.amoled table.nt {
	background-color: #000;
	border: 1px solid #444;
	box-shadow: 2px 2px 8px #000;
}

body.pendual.amoled table.nt tr.top td {
	background-color: #111;
	color: #FFF;
}

body.pendual.amoled table.nt tr.bt td {
	border-bottom: 1px solid #0A0A0A;
	color: #FFF;
}

body.pendual.amoled table.nt td {
	color: #FFF;
}

body.pendual .caption {
	font-style: italic;
	font-size: 85%;
	margin-top: 12px;
	width: 100%;
	text-align: center;
}

body.pendual table td .caption {
	font-size: inherit;
}

body.pendual.dark .caption {
	color: #CCCCCF;
}

body.pendual.amoled .caption {
	color: #FFF;
}

/*
 * Audio Player Overrides
 */

body.pendual.light audio::-webkit-media-controls-panel {
	background-color: #DDD;
}

body.pendual.dark   audio,
body.pendual.amoled audio {
	filter: invert(1);
}

body.pendual audio:focus {
	outline-width: 0px;
}


/* ------------------------------------------------------------------------- */
/* Bottom Links & Copyright                                             {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Links are listed, as well as the copyright string and page generation time.
 * The theme will stay traditional to how other CN websites are.
 */

body.pendual hr.post-end {
	border: 1px solid rgba(0, 0, 0, 0.5);
}

body.pendual.dark   hr.post-end,
body.pendual.amoled hr.post-end {
	border: 1px solid rgba(255, 255, 255, 0.5);
}

body.pendual.dark   table,
body.pendual.amoled table {
	color: inherit;
}

body.pendual img.avi {
	width: 100%;
	border-radius: 50%; /* could be 100% idc */
}

body.pendual .blog-bottom {
	width: 100%;
	background-color: #252528;
	color: #FFF;
}

body.pendual .blog-bottom .inner {
	width: calc(100% - 64px);
	max-width: 1280px;
	margin: auto;
	position: relative;
	box-sizing: border-box;
	padding: 42px 32px;
	overflow: auto;

	font-family: ssans-regular, kosugimaru;
}

body.pendual .blog-bottom .inner .section {
	float: left;
	padding-right: 32px;
	font-size: 110%;
}

body.pendual .blog-bottom .inner .section .title {
	font-variant: all-small-caps;
	color: rgba(255, 255, 255, 0.5);
	padding-bottom: 6px;
}

body.pendual .blog-bottom .inner .section a {
	text-decoration: none;
	color: #BBB;
}

body.pendual .blog-bottom .inner .section a:hover {
	color: #FFF;
}

body.pendual .blog-bottom .copyright {
	width: 100%;
	padding-bottom: 6px;
	font-weight: bold;
	text-align: center;
}