@font-face {
	font-family: "SaithikHandwritten";
	src: url("/css/Saithik-Handwritten.ttf") format('truetype');
}

:root {
	--height-footer: 42px;

	--width-nav: 240px;
	--width-quicknav: 64px;
	--width-deco: 340px;
	--width-inner-content: 1536px;
}

.bg-img {
	background-image: url(../imgs/deco_h_dub_003.JPG);
}

html { 
	height:100%;
}

body {	
	height: 100%;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 300;
	color: var(--colour-text);
	background: var(--bg-page); 
	background: linear-gradient(to top right, var(--bg-page), var(--bg-page-grd));
	margin: 0px;
	padding: 0px;
}

.container {
	box-sizing: border-box;
}

.site-wrapper {
	height: calc(100% - 42px);
	width: 100%;
}

.overlay {
	position: fixed;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-shadow);
	opacity: .69;
    visibility: hidden;
	z-index: 10;
}

.site-nav { 
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	height: calc(100% - 42px);	
	width: var(--width-nav);
	background: var(--bg-nav);
	padding: 0px 16px 16px 16px;
	overflow-y: scroll;
	z-index: 12;
}

.site-nav a.bt-close {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 3rem;
	text-decoration: none;
	color: white;
}

.site-nav a.bt-close:hover {
	color: var(--colour-primary);
}

nav.site-nav-obj {
	
}

/* a[target=_blank]:before {
	font-style: normal;
	text-decoration: none;
	content: "\1F30D";
} */

/* a.twitter:before {
	font-style: normal;
	text-decoration: none;
	content: "\1F30D";
}  */

.site-nav-obj ul {
	list-style: none; 
	line-height: 1.5rem;
	margin: 0px;
	padding: 0px;
}

.site-nav-obj ul li a {
	color: var(--colour-text);
	text-decoration: none;
	border-bottom: 1px solid;
}

.site-nav-obj ul li a:hover {
	color: var(--colour-primary);
	border-bottom: none;
}	

.site-inner {
	display: flex;
	margin: 42px auto 42px auto;
	height: calc(100% - 42px - var(--height-footer));
	max-width: var(--width-inner-content);
	z-index: 1;
}

.site-deco {
	position: relative;
	height: 100%;
	width: var(--width-deco);
	background: var(--bg-content);
}

.site-deco > .site-deco-img {
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.site-deco > .site-deco-content {
	text-align: center;
	padding: 12px;
}

.site-deco-content:before { 
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	content: "";
	height: 360px;
	width: 100%;
	background-image: linear-gradient(to bottom, var(--bg-shadow) -25%, transparent 25%);
}

.site-deco-content:after { 
	position: absolute;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	content: "";
	height: 360px;
	width: 100%;
	background-image: radial-gradient(circle at bottom, var(--bg-content) -25%, transparent 80%), linear-gradient(to top, var(--bg-shadow) 0%, transparent 25%);
}

.site-deco-box {
	position: absolute;
	bottom: 0;
	text-align: center;
	padding: 0 0 64px 0;
	width: 100%;
}

.deco-box {
	display: box;
	padding: 12px;
	background: rgba(var(--bg-deco-rgbfun));
	border-top: 1px solid var(--colour-primary);
	border-bottom: 1px solid var(--colour-primary);
	line-height: 1.4;
}

.horz-box {
	display: flex;
	flex-direction: column; 
	align-items: center;
}

.site-deco-box h1 {
	font-size: 1.75rem;
	text-align: center;
}

.site-deco-box-list > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	padding: 0;
}

.site-deco-box-list > ul > li {
	width: 42px;
	height: 42px;
	padding: 0px 8px 0px 8px;
}

.site-qicknav {
	position: relative;
	float: left;
	margin: 32px 0 32px 0;
	height: calc(100% - 64px);
	width: var(--width-quicknav);
	background: var(--bg-content); 
    background-image: linear-gradient(to left, var(--bg-shadow) 0, transparent 16px);
}

.site-qicknav-menu {
	height: calc(var(--width-quicknav) - 8px);
	width: var(--width-quicknav);
	background: var(--colour-primary);
	text-align: center;
	vertical-align: middle;
	padding: 6px 0 0 0;
    background-image: linear-gradient(to bottom right, var(--colour-primary) 0, var(--bg-hr-heavy-right) 100%);
}

.site-qicknav-items {
	display: flex;
	flex-direction: column;
	height: calc(100% - var(--width-quicknav));
}

.site-qicknav-item {
	height: calc(var(--width-quicknav) - 10px);
	width: var(--width-quicknav);
	padding: 6px;
}

.site-qicknav-filler {
	flex-grow: 1;
	text-align: center;
	vertical-align: middle;
}

.site-qicknav-item:last-child {
	padding: 0 6px 0 6px;
}

.site-content {
	position: relative;
	margin: 32px 0 32px 0;
	height: calc(100% - 64px);
	width: calc(100% - var(--width-quicknav) - var(--width-deco));
	background: var(--bg-content);
}

.site-content:before { 
	position: absolute;
	box-sizing: border-box;
	content: "";
	height: 100%;
	width: 16px;
    background-image: linear-gradient(to right, var(--bg-shadow) 0, transparent 100%);
	z-index: 10;
}

.site-content > hr:first-child  {
	margin: 12px 2.5rem 0 12px;
	height: 4px;
}

.site-content-wrapper {
	height: 100%;
	width: 100%;
	padding: 24px 1.5rem 42px 1.5rem;
}

.site-content-wrapper:before { 
	position: absolute;
	top: calc(12px + 4px);
	left: 0; 
	box-sizing: border-box;
	content: "";
	height: 32px;
	width: 100%;
    background-image: linear-gradient(to bottom, var(--bg-content)  50%, transparent 100%);
	z-index: 9;
}

.site-content-wrapper:after { 
	position: absolute;
	bottom: 0;
	left: 0; 
	box-sizing: border-box;
	content: "";
	height: 32px;
	width: 100%;
	background-image: linear-gradient(to top, var(--bg-content)  50%, transparent 100%);
	z-index: 9;
}

.col-2 {
	column-count: 2;
	column-gap: 24px;
	column-rule: 1px solid var(--colour-text-column);
}

.grid-2  {
	display: grid; 
	grid-template-columns: auto auto; grid-gap: 2em;
}
	
.grid-2-ps  {
	display: grid; 
	grid-template-columns: 72% auto;
}
	
.grid-3 {
	display: grid; 
	grid-template-columns: auto auto auto; grid-gap: 2em;
}

.grid-4 {
	display: grid; 
	grid-template-columns: auto auto auto auto; grid-gap: 2em;
}

.footer {
	position: absolute;
	bottom: 0;
	height: var(--height-footer);
	width: 100%;  
	background: var(--bg-footer);
	padding: 12px;
	text-align: center;
	color: var(--colour-text-footer);
    background-image: linear-gradient(to bottom, var(--bg-shadow) 0, transparent 6px);
	line-height: 1;
}

.footer > div {
	display: flex; 
	margin: 0 auto 0 auto; 
	max-width: var(--width-inner-content);
}

.footer div.footer-left {
	flex: 1; 
	text-align: left;
}

.footer div.footer-centre {
	flex: 1; 
}

.footer div.footer-right {
	flex: 1; 
	text-align: right;
}

h1, h2, h3, h4, h5 {
	margin: 1.5rem 0 .25rem 0;
	color: var(--colour-header);
	text-shadow: 2px 1px 3px var(--txt-shadow);
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
	margin-top: 4px;
}

hr + h2, hr + h1, hr + h3, hr + h4, hr + h5  {
	margin-top: 1rem;
}

a {
	color: var(--colour-text);
}	

a:hover {
	color: var(--colour-text-highlight);
	text-decoration: none;
}	

.highlight a {
	color: var(--colour-text-highlight);
}

.highlight a:hover {
	color: var(--colour-text);
	text-decoration: none;
}

.highlight {
	color: var(--colour-text-highlight);
	text-shadow: 2px 1px 3px var(--txt-shadow-light);
}

.colour_text {
	color: var(--colour-text);
}

.content-box {
	margin-top: .8rem;
}

p {
	text-align: justify;
}

.site-content-wrapper p {
	line-height: 1.4;
	text-align: justify;
}


.site-deco p {
	text-align: center;
}

.site-content-wrapper p:first-child  {
	margin-top: 4px;
}

.site-content-wrapper ul:first-child  {
	margin-top: 0;
}

.lighter {
	font-size: smaller;
	font-weight: lighter;
}

.heavier {
	font-size: larger; 
	font-weight: bolder;
}

.larger {
	font-size: larger; 
}

.smaller {
	font-size: smaller; 
}

.saithik {
	display: block;
	margin: 0 1rem 0 1rem;
	color: var(--colour-text-highlight);
	font-family: "SaithikHandwritten", serif;
	font-size: 3rem;
	line-height: 2;
}

hr {
	border: 0;
	height: 4px;
	margin: .5rem 0 .5rem 0;
	background-image: linear-gradient(90deg, var(--bg-hr-heavy-left), var(--bg-hr-heavy-right));
	border-radius: 4px;
}

hr.light {
	height: 1px;
	background: var(--bg-hr-light);
	border-radius: 1px;
}

.icon-box div {
	display: inline-block; 
	width: calc(100% - 112px); 
}

blockquote {
	display: block;
	margin: 3rem 3rem 2rem 1rem;
	padding: .25rem 0 .25rem 3rem;
	/* border-left: 2px solid var(--colour-primary); */
	color: var(--colour-text-highlight);	
	text-shadow: 2px 1px 3px var(--txt-shadow);
	font-family: "SaithikHandwritten", serif;
	font-size: 2rem;
	line-height: 1.3;
}

blockquote i {
	display: block;
	margin: 1rem 0 0 0;
	font-style: italic;
	text-align: right;
	font-size: 1.6rem;
}

blockquote i:before {
	content: "-\2002";
}

ul.list-words {
	padding: 6px;
	list-style-type: none;
}

ul.list-words li {
	display: inline;
}

ul.list-words li:not(:last-child):after {
	content: "/";
	padding: 6px;
	color: var(--colour-text);
}

ul.tags {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.tags li {
	margin: 3px 5px 3px 0;
	padding: 3px 5px 3px 4px;
	display: block;
	color: var(--bg-tagtext);
	background: var(--bg-tag);
	box-shadow: 1px 1px 4px var(--bg-shadow-dark);
	white-space: nowrap;
	float: left;
	border-radius: 4px;
}

div.tags {
	margin: 0;
	padding: 0;
	display: flex;
}

div.tags .label {
	padding: 4px 10px 0 0;
	display: inline-block;
	white-space: nowrap;
}

div.tags  a {
	margin: 3px 5px 3px 0;
	padding: 3px 5px 3px 4px;
	display: block;
	font-size: smaller;
	text-decoration: none;
	color: var(--bg-tagtext);
	background: var(--bg-tag);
	box-shadow: 1px 1px 4px var(--bg-shadow-dark);
	white-space: nowrap;
	float: left;
	border-radius: 4px;
	transition: .2s;
	transition-timing-function: ease-in-out;
}

div.tags div a.selected {
	background: var(--colour-primary-dark);
}

div.tags div a:hover {	
	background: var(--colour-primary-dark);
	margin: 3px 5px 3px 2px;
	transform: rotate(6deg);
	transition: .2s;
	transition-timing-function: ease-in-out;
}

.horizontal-box {
	position: relative; 
	left: -1.5rem; 
	width: 100%;  
	padding: 2.5rem 1.5rem 2.5rem 1.5rem; 
	margin: 0 0 1.5rem 0;
	background: var(--bg-box); 
    background-image: linear-gradient(to bottom, var(--bg-shadow-dark) 0, transparent 1em), linear-gradient(to top, var(--bg-shadow-dark) 0, transparent 1em);
}

.blog-box-container {
	display: flex; 
	flex-wrap: wrap;
}

.blog-box {
	position: relative; 
	display: flex; 
	flex-direction: column; 
	background: #222833; 
	border: none; 
	width: 242px; 
	margin: .75rem;
	box-shadow: 6px 6px 10px -2px var(--bg-shadow-dark);
}

.blog-box .head {
	position: relative; 
	height: 160px; 
	width: 100%; 
	background-color: var(--bg-box); 
	/* background: url(/imgs/deco_h_macro_001.JPG) no-repeat local center; */
}

.blog-box .body {
	padding: .5rem .75rem .75rem .75rem;
}

.blog-box .body h1, .blog-box .body h3 .blog-box .body h2, .blog-box .body h3, .blog-box .body h4, .blog-box .body h5 {
	font-size: 1.125rem; 
	margin-bottom: .75rem;
}

.blog-box .body p {
	
}

.blog-box .body .read {
	text-align: right;
}

.blog-box .read a:after  {
	content: " ...";
}

.blog-box .foot  {
	margin: .75rem 0 0 0;
	font-size: 0.75rem;
	text-align: right;
}

/*.blog-box .foot:after {
	position: absolute;
	bottom: 0; 
	right: -.5rem;
	content: "";
	width: 100%;
	height: .125rem;
	margin: 0 .5rem 0 0;
	background-color: var(--colour-primary);
} */

.timeline {
  position: relative;
  margin: 0;
}

.timeline:after {
  position: absolute;
  top: 1.1rem;
  bottom: 8px;
  left: 0;
  width: 2px;
  background-color: var(--colour-text);
  box-shadow: 1px 1px 2px var(--bg-shadow-dark);
  margin: 6px 8px 6px 8px;
  content: "";
}

.timeline > .item {
  position: relative;
  margin: 0;
  padding: 3px 2rem 8px 2rem;
}

.timeline > .item > * {
  margin: 0 auto 4px auto;
  padding: 0 auto 2px auto;
}

.timeline > .item  > p:first-child {
  margin: 4px auto 4px auto;
}

.timeline  > .item::after {
  position: absolute;
  width: 9px;
  height: 9px;
  top: 1.15rem;
  left: 4px;
  background-color: var(--colour-primary);
  border: 1px solid var(--bg-hr-heavy-right);
  box-shadow: 1px 1px 4px var(--bg-shadow-dark);
  border-radius: 50%;
  z-index: 1;
  content: '';
}

ul.publications {
	padding: 0;
	margin: 1rem 0 0 0;
	list-style-type: square;
}

ul.publications li {
	padding: .2rem;
	margin: 0 0 .2rem 1.5rem;
}

/* ul.publications .author {
	
} */

ul.publications .title {
	font-style: italic;
}

ul.publications .title:before {
	content: "\201E";
}

ul.publications .title:after {
	content: "\201D .";
}

ul.publications .journal:after {
	content: ". ";
}

ul.publications .pubmed:before {
	content: "PMID: ";
}

@media all and (max-width: 840px) {	
	body { background: var(--bg-page); }

	.site-nav { width: 100%; }
	
	.site-inner { margin: 0; height: auto; flex-direction: column; }
	
	.site-qicknav {
		height: var(--width-quicknav); min-width: 100%; margin: 0; float: none;
		background-image: linear-gradient(to top, var(--bg-shadow) 0, transparent 16px);
	}
	
	.site-qicknav-menu { float: left; height: var(--width-quicknav); }
	
	.site-qicknav-items { flex-direction: row; height: var(--width-quicknav); }
	
	.site-qicknav-item { height: var(--width-quicknav); width: calc(var(--width-quicknav) - 10px); }
	
	.site-qicknav-item:last-child { padding: 6px; }
	
	.site-deco { height: 640px; min-width: 100%; }
	
	.site-content { height: auto; min-width: 100%; margin: 0; }
	
	.site-content:before { 
		height: 16px; min-width: 100%;
		background-image: linear-gradient(to bottom, var(--bg-shadow) 0, transparent 100%);
	}
	
	.footer { 
		position: relative; height: auto; background: unset; 
		background-image: linear-gradient(to bottom, var(--bg-shadow) 0, transparent 12px);
	}
	
	.footer > div { flex-direction: column; }
}


@media all and (max-width: 1024px) {
	.grid-4 { grid-template-columns: auto; grid-gap: 0; }
}

@media all and (max-width: 1280px) {
	.grid-2  { grid-template-columns: auto ; grid-gap: 0; }
	
	.grid-2-ps  { grid-template-columns: auto ; grid-gap: 0; }
	
	.grid-3 { grid-template-columns: auto ; grid-gap: 0; }

	.grid-4 { grid-template-columns: auto auto ; grid-gap: 2em; }
	
	.col-2 { column-count: 1; column-gap: 0; }
}

@media all and (min-width: 840px) {	
	.container { overflow: hidden; }
	
	.site-content-wrapper { overflow-y: scroll; }
	
	.site-content-wrapper::-webkit-scrollbar, .site-nav::-webkit-scrollbar {
		width: 1rem;
	}
 
	.site-content-wrapper::-webkit-scrollbar-track, .site-nav::-webkit-scrollbar-track {
		background-color: var(--bg-scroll-bg);
	}

	.site-content-wrapper::-webkit-scrollbar-thumb, .site-nav::-webkit-scrollbar-thumb {
		background-color: var(--bg-scroll-thumb);
	}
}