@font-face
{ 
    font-family: myFont;
    src: url("/fonts/scriptina/scriptin.ttf");
    src: url("/fonts/BoogieNightsShadowNF.ttf");
    src: url("/fonts/Sho-CardCapsNF.ttf");
}


:root
{
	--dark: #333;
	--light: #FFFFFF;
	--primary: #4CAF50;
	--secondary: #C0C0C0;
	--highlight: #E6E6FA;
    --labcolor: rgba(245,245,220,0.5);
	--lavender: #E6E6FA;
	--coral: coral;
	--beige: #FFEEAD;
	--sienna : #A0522D;
	--GoldenBrown: #996515;
	--SaddleBrown: #8B4513;
	--WalnutBrown: #5D432C;
	--White1: #dee3de;
	--QuillGray: #e1e1dd;
	--Olive: #808000;
	--Tan: #d2b48c;
}

.theme
{
	--secondary: #FFEEAD;
}
.nature
{
	--primary: dodgerblue;
	--secondary: #FFFFFF;
}

html
{
    box-sizing: border-box;
    font-family: 'Arial Unicode MS', 'Consolas', 'sans-serif';
  	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
*, *:before, *:after
{
    box-sizing: border-box;
}

a
{
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a:hover
{
    text-decoration: none;
}



body
{
    box-sizing: border-box;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
	margin-top: 60px;
    border: 0px solid black;
    font-size: 12pt;
    font-family: 'Arial Unicode MS', 'Consolas';
    font: 12px sans-serif;
    font-family: 'Arial Unicode MS', 'Consolas';
	background-color: var( --light );
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}


table
{
    width: calc(100% - 20px);
    vertical-align: top;
    margin: 10px;
    border-collapse: collapse;
	border: 1px solid gray;
}
table tr td
{
    vertical-align: top;
    padding: 5px;
	border: 1px solid gray;
}
table tr th
{
    vertical-align: top;
    width: 240px;
}
table.view
{
	width: 100%;
	table-layout: fixed;
	border: 0px solid gray;
}
table.view tr td
{
	border: 0px solid gray;
}

table.edit
{
	table-layout: fixed;
	border: 0px solid gray;
}
table.edit tr td
{
	border: 0px solid gray;
}

ul.mylist
{
	width: 100%;
	font-size: 120%;
}
ul.mylist li
{
	padding: 6px;
	font-weight: bold;
}


.t-fixbar
{
	position: fixed;
	top: 0;
	left: 0;
	display: inline-grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 60px;
    grid-template-areas:
        'L C';
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 0px;
    margin: 0px;
	width: 100%;
	height: 60px;
	border-bottom: 0px solid #333;
	background-color: var( --dark );
	color: var( --light );
	font-size: 100%;
	z-index: 100;
}
.t-left
{
	grid-area: L;
	padding-top: 10px;
}
.t-left img
{
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.t-left span
{
	display: inline-block;
	height: 40px;
	margin: 5px;
}
.t-right
{
	grid-area: R;
}
.t-right a span.logout
{
	background-color: red;
	float: right;
	padding: 25px 10px 10px 10px;
	height: 60px;
	font-weight: bold;
	font-size: 200%;
	color: black;
}
.t-right a span.changep
{
	background-color: yellow;
	float: right;
	padding: 25px 10px 10px 10px;
	height: 60px;
	font-weight: bold;
	font-size: 200%;
	color: black;
}
.t-right a span.profileE
{
	background-color: skyblue;
	float: right;
	padding: 25px 10px 10px 10px;
	height: 60px;
	font-weight: bold;
	font-size: 200%;
	color: black;
}




.t-center
{
	grid-area: C;
	padding: 0px;
	margin: 0px;
}
.t-center div
{
	display: block;
	float: left;
	border: 0px solid white;
	padding: 10px;
	margin: 0px;
}
.t-center div.dropdown
{
	float: left;
	overflow: hidden;
}
.t-center div.dropdown a
{
	display: inline-block;
	float: left;
	border: 0px solid white;
	padding: 0px;
	margin: 0px;
}
.t-center div div.dropdown-content
{
	display: none;
	position: absolute;
	top: 60px;
	background-color: #f9f9f9;
	background-color: #333;
	z-index: 1;
	padding: 0px;
}
.t-center div div.dropdown-content div
{
	display: inline-block;
	float: left;
	width: 180px;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
}
.t-center div div.dropdown-content div a
{
	display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: disc;       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */
    list-style-position: inside;
	float: left;
	border: 0px solid white;
	padding: 8px 8px 8px 25px;
	margin: 0px;
	text-transform: Capitalize;
	list-style: none;
	background-image: url("/icons/yellow-arrow.png");
	background-repeat: no-repeat;
	background-position: 5px  center;
	background-size: 12px;
}
.t-center div div.dropdown-content-right
{
	display: none;
	position: absolute;
	top: 60px;
	right: 0;
	background-color: #f9f9f9;
	background-color: #333;
	z-index: 1;
}


.t-center div.dropdown a
{
	display: inline-block;
	float: left;
	border: 0px solid white;
	padding: 0px;
	margin: 0px;
}
.t-center div.dropdown a figure
{
	text-align:center;
	padding: 0px;
	margin: 0px;
}
.t-center div.dropdown a figure img
{
	height: 25px;
	width: 25px;
}
.t-center div.dropdown a figure figcaption
{
	display: block;
	text-align: center;
	padding-top: 8px;
	text-decoration: none;
	font-weight: bold;
}






/* 		TOP BAR		*/
.t-topbar
{
	width: 100%;
	background: dodgerblue;
	background-color: var( --primary );;
	height: 150px;
	margin-top: 40px;
	display: grid;
	grid-template-columns: 120px 1fr 120px;
    grid-template-rows: 40px 1fr 40px;
    grid-template-areas:
        'logo title rating'
        'logo text rating'
        'logo text share';
    grid-gap: 0px;
}
.t-topbar-title
{
	grid-area: title;
	font-size: 180%;
	font-weight: bold;
	line-height: 1.5;
	padding: 10px;
	overflow: hidden;
}
.t-topbar-logo
{
	grid-area: logo;
	padding: 10px;
}
.t-topbar-logo img
{
	width: 100%;
	height: 100%;
}

.t-topbar-text
{
	grid-area: text;
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5;
	padding: 10px;
	padding-top: 20px;
	overflow: hidden;
}
.t-topbar-rating
{
	grid-area: rating;
	text-align: right;
	padding: 20px;
}
.t-topbar-share
{
	grid-area: share;
	text-align: right;
	padding-right: 10px;
}
.t-topbar-share a img
{
	height: 30px;
}



.t-navbar
{
	width: 100%;
	background-color:var( --dark );
	height: 40px;
	border: 0px solid black;
	position: sticky;
    position: -webkit-sticky;
    top: 0;
	z-index: 100;
}


/*		FOOTER		*/
.t-footer
{
	width: 100%;
	height: 250px;
	background-color:var( --dark );
	border: 1px solid black;
	z-index: 100;
	display: inline-grid;
	grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 40px 1fr 40px;
    grid-template-areas:
        'info address cright'
        'info address cright'
        'info links cright';
    grid-gap: 10px;
	padding: 20px;
}
.t-footer-address
{
	grid-area: address;
	text-align: center;
	color: white;
	font-size: 130%;
}
.t-footer-social
{
	grid-area: links;
	text-align: center;
	color: white;
	font-size: 100%;
	border: 0px solid white;
}
.t-footer-cright
{
	grid-area: cright;
	text-align: right;
	color: yellow;
	font-size: 100%;
	border: 0px solid white;
}
.t-footer-info
{
	grid-area: info;
	text-align: left;
	color: var( --secondary );
	font-size: 100%;
	border: 0px solid white;
}

.icon-m
{
	width: 40px;
	height: 40px;
	padding: 4px;
	margin: 2px;
}


.K
{
	display: inline-grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 50px auto;
    grid-template-areas:
        'side path tool'
        'side main wid';
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 0px;
    margin: 0px;
    background-color: var( --light );
    width: 100%;
    min-height: 700px;
	z-index: 90;
}
.K-path
{
	grid-area: path;
	color: brown;
	padding: 10px;
	font-size: 130%;
	font-weight: bold;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.K-path a img
{
	float: left;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.K-path span
{
	margin: 5px;
	height: 40px;
	line-height: 2.5;
}
.K-side
{
	grid-area: side;
}
.K-main
{
	grid-area: main;
}




.C2
{
	display: inline-grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 50px auto;
    grid-template-areas:
        'side  path'
        'side main';
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    padding: 0px;
    margin: 0px;
    background-color: var( --secondary );
    width: 100%;
    min-height: 700px;
	z-index: 90;
}
.C2-path
{
	grid-area: path;
	color: brown;
	padding: 10px;
	font-size: 150%;
	font-weight: bold;
}
.C2-side
{
	grid-area: side;
	border: 0px solid black;
	padding: 10px;
/*	-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000; */
	border-right: 1px solid gray;
}
.C2-main
{
	grid-area: main;
	border: 0px solid black;
	padding: 10px;
}

.C2-search span a img
{
	width: 40px;
	height: 40px;
}
.C2-path span
{
	margin: 5px;
}


.C3
{
	display: inline-grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 50px auto;
    grid-template-areas:
        'search path path'
        'side main wid';
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    padding: 0px;
    margin: 0px;
    background-color: var( --secondary );
    width: calc(100% - 40px);
    width: 100%;
    min-height: 700px;
	border: 0px solid black;
	z-index: 90;

}
.C-search
{
	grid-area: search;
	border: 0px solid black;
	padding: 0px;
	border-right: 1px solid silver;
	margin: 0px;
}
.C3-side
{
	grid-area: side;
	border: 0px solid black;
	padding: 10px;
	-moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
}
.C3-path
{
	grid-area: path;
	color: brown;
	padding: 10px;
	font-size: 130%;
	font-weight: bold;
}
.C3-main
{
	grid-area: main;
	border: 0px solid black;
	padding: 10px;
}
.C3-wid
{
	grid-area: wid;
	-moz-box-shadow:    inset 0 0 100px #000000;
   -webkit-box-shadow: inset 0 0 100px #000000;
   box-shadow:         inset 0 0 100px #000000;
}


.C-path
{
	grid-area: path;
	color: brown;
	padding: 10px;
	font-size: 130%;
	font-weight: bold;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.C-path a img
{
	float: left;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.C-path span
{
	margin: 5px;
	height: 40px;
	line-height: 2.5;
}
.C-side
{
	grid-area: side;
	border: 0px solid black;
	padding: 10px;
/*	-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000; */
	border: 0px solid silver;
	border-right: 1px solid silver;
	overflow: hidden;
}
.C-side img
{
	width: calc( 100% - 10px );
	border: 1px solid dodgerblue;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
}
.C-wid
{
	grid-area: wid;
	border: 0px solid black;
	padding: 10px;
/*	-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000; */
	border: 0px solid silver;
}
.C-main
{
	grid-area: main;
	border: 0px solid black;
	padding: 10px;
}
.C-long
{
	grid-column: 2 / 5;
	grid-row: 2;
	border: 0px solid black;
	padding: 10px;
}




form
{
	padding: 0px;
	margin: 0px;
}
input
{
	width: calc(100% - 10px);
	border: 0px solid silver;
	border-bottom: 1px solid silver;
	margin: 5px;
	padding: 5px;
	background-color: var( --secondary );
}
input:active
{
	background-color: var( --secondary );
}
input:focus
{
	background-color: var( --light );
	-moz-box-shadow:    inset 0 0 5px var( --coral );
    -webkit-box-shadow: inset 0 0 5px var( --coral );
    box-shadow:         inset 0 0 5px var( --coral ); 
}
input.search
{
    background-image: url('/icons/search.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    background-size: 15px 15px;
    height: 40px;
    margin: 10px;
    width: calc(100% - 20px);
	border: 1px solid dodgerblue;
}
input[type=image]
{
	display: block-inline;
	width: 40px;
	height: 40px;
}
input[type=radio]
{
	width: 20px;
	vertical-align: middle;
	margin: 5px;
	padding: 5px;
}
input[type=checkbox]
{
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	margin-right: 5px;
}
input[type=submit]
{
	border: 1px solid gray;
	font-weight: bold;
}
input[type=file]
{
	border: 0px solid gray;
	font-weight: bold;
}
select
{
	width: calc(100% - 10px);
/*	-moz-box-shadow:    inset 0 0 5px dodgerblue;
    -webkit-box-shadow: inset 0 0 5px dodgerblue;
    box-shadow:         inset 0 0 5px dodgerblue; */
	background-color: var( --secondary );
	border: 1px solid silver;
	margin: 5px;
	padding: 5px;
	overflow:hidden;
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
select option
{
	background-color: var( --secondary );
}
select.sort
{
	width: 200px;
}



div.W
{
	display: inline-block;
	margin: 10px;
	padding: 10px;
	width: calc( 100% - 20px );
	border: 0px solid dodgerblue;
	-webkit-box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.75);
}
.W1
{
	width: calc(100% - 10px);
	margin: 5px;
	padding: 10px;
	border: 1px solid silver;
	-moz-box-shadow:    inset 0 0 10px dodgerblue;
    -webkit-box-shadow: inset 0 0 10px dodgerblue;
    box-shadow:         inset 0 0 10px dodgerblue; 
}

.W8
{
	width: calc(100% - 10px);
	margin: 5px;
	border: 1px solid black;
	border-bottom: 1px dashed black;
	-moz-box-shadow:    inset 0 0 10px black;
    -webkit-box-shadow: inset 0 0 10px black;
    box-shadow:         inset 0 0 10px black; 
}
.W8 h1
{
	width: 100%;
	background-color: black;
	padding: 10px;
	margin: 0px;
	font-size: 120%;
	text-transform: Uppercase;
}
.W9
{
	width: calc(100% - 10px);
	margin: 5px;
	border: 1px solid dodgerblue;
	border-bottom: 1px dashed dodgerblue;
	-moz-box-shadow:    inset 0 0 10px dodgerblue;
    -webkit-box-shadow: inset 0 0 10px dodgerblue;
    box-shadow:         inset 0 0 10px dodgerblue; 
}
.W9 h1
{
	width: 100%;
	background-color: dodgerblue;
	padding: 10px;
	margin: 0px;
}

.R
{
	float: right;
}

.round
{
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	padding: 6px;
	margin: 0px 5px 0px 0px;
}
.red
{
    background-color: red;
}
.green
{
    background-color: green;
}
.yellow
{
    background-color: yellow;
}









.expand
{
    list-style-type: circle;
}
.expand li
{
    padding: 4px 0px 4px 0px;
    margin-left: -30px;
    font-weight: bold;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.expand li:first-letter
{
    font-size: 120%;
	font-weight: bold;
/*  color:  #382b1e; */
}
.expand li ul li a
{
    font-weight: normal;
}




.pages
{
    width: calc(100% - 10px);
    height: 30px;
    border: 0px solid black;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}
.pages span
{
    padding: 5px;
    font-size: 110%;
    border:1px solid silver;
}





.Hindi
{
    background-color: yellow;
    color: black;
}
.English
{
    background-color: rgba(30,144,255,0.5);
	background-color: dodgerblue;
    color: white;
}
.Other
{
    background-color: orange;
    color: black;
}
.Opacity
{
	opacity: 80%;
}




.timeline
{   
    list-style-type: none;
}

.timeline li
{   
    position: relative;
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
    font-size: 110%;
    color: green;
    font-weight: bold;
}

.timeline li:before
{
    content: '';
    background-color: #c00;
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 6px;
    width: 3px;
}

.timeline li:after
{
    content: '';
    position: absolute;
    left: -6px;
  	top: 10px;
    height: 12px;
    width: 12px;
  	width: 25px;
  	height: 25px;
  	background-color: var( --lavender );
  	border: 4px solid #FF9F55;
  	border: 4px solid #C00;
  	border-radius: 50%;
  	z-index: 1;
}





.yellow
{
	background-color: yellow;
}
.red
{
	background-color: red;
}
.skyblue
{
	background-color: skyblue;
}

.label
{ 
    color: green; 
    padding: 3px 3px; 
    text-align: left; 
    display: inline-block; 
    margin: 2px 2px; 
    cursor: pointer; 
	font-size: 100%;
	width: auto;
} 

.character
{ 
    color: green; 
    padding: 3px 3px; 
    text-align: left; 
    display: inline-block; 
    margin: 2px 2px; 
    cursor: pointer; 
	border: 1px solid black;
	font-size: 100%;
	height: 300px;
	width: auto;
	background-color: var( --dark );
} 
.character a img
{
	width: 100%;
	height: calc( 100% - 40px );
	border-bottom: 1px solid white;
}


.m-tools
{
	width: 100%;
	padding: 0px;
	margin: 0px;
}
.m-tools div
{
	display: inline-block;
	width: auto;
	height: 30px;
	border: 0px solid dodgerblue;
	padding: 0px;
	margin: 0px;
	line-height: 3.5;
}
.m-tools a
{
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 0px solid dodgerblue;
	padding: 0px;
	margin: 0px;
}
.m-tools a img
{
	width: 30px;
	height: 30px;
	border: 0px solid black;
	padding: 2px;
	margin: 0px;
}

.prevnext
{
	display: inline-block;
	width: 100%;
	text-align: center;
}
.prevnext a
{
	display: inline-block;
	width: calc(50% - 25px);
	max-width: 200px;
	text-align: center;
	font-weight: bold;
	padding: 10px;
	margin: 10px;
	font-size: 120%;
	-moz-box-shadow:    inset 0 0 10px #000000;
   	-webkit-box-shadow: inset 0 0 10px #000000;
   	box-shadow:         inset 0 0 10px #000000;
}

input[type=range]
{
	height: 25px;
	background-color: silver;
	border: 1px solid gray;
}
::-webkit-slider-thumb
{
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	background: #4CAF50; /* Green background */
	cursor: pointer; /* Cursor on hover */
}
::-moz-range-thumb
{
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	background: #4CAF50; /* Green background */
	cursor: pointer; /* Cursor on hover */
}





.header-left-middle
{
	display: inline-block;
	background: black;
	background-color: var( --Olive );
	color: var( --light );
	position: fixed;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 0;
	width: 54px;
	height: auto;
	min-height: 100px;
	margin: auto;
	border: 2px solid #808000;
	border-radius: 5px 0px 0px 5px;
	padding: 4px 0px 4px 4px;
	z-index: 260;
}
.header-left-middle a img
{
	width: 35px;
	height: 35px;
	margin: 4px;
	padding: 0px;
	z-index: 260;
	border: 1.2em solid rgba(#000, 0.2);
}
.header-left-middle a img:hover
{
	border: 1px solid black;
	-moz-box-shadow:    inset 0 0 10px black;
    -webkit-box-shadow: inset 0 0 10px black;
    box-shadow:         inset 0 0 10px black; 
}


#load-more
{
	width: 150px;
    line-height: 40px;
    border-radius: 2px;
    margin: 0 auto;
    display: block;
    background: #219150;
    color: #fff;
    cursor: pointer;
    text-align: center;
	font-weight: bold;
	font-size: 20px:
    &:hover { background: green; }
    .loaded { display: none; }
}



.tab
{
	display: block-inline;
	width: 100%;
	height: 30px;
	border-bottom: 1px dotted black;
	padding-left: 10px;
}
.tab div
{
	display: block-inline;
	width: 100px;
	height: 30px;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	padding: 6px;
	border: 1px solid black;
	border-bottom: 0px solid black;
	text-align: center;
}