html,body,div,span,applet,object,iframe,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,s,samp,var,center,dl,dt,dd,ol,ul,li,form,label,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}ol,ul{list-style:none}

blockquote{max-width: 80%; margin: 20px 10%;}
* {  box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; transition: 1s; }
body {	line-height: 1.6; }
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button, input[type="submit"]{cursor: pointer; border-width: 0px;}
.icon256{height:256px;width:256px}.icon128{height:128px;width:128px}.icon64{height:64px;width:64px}.icon32{height:32px;width:32px}.icon16{height:16px;width:16px}.iconHalf{height:50%;width:50%}.iconQuarter{height:25%;width:25%}
.tleft,.tLeft{text-align:left}.tcenter,.tCenter{text-align:center}.tright,.tRight{text-align:right}
.wFull{box-sizing:border-box;vertical-align:top;display:inline-block;width:100%}.wHalf{box-sizing:border-box;vertical-align:top;display:inline-block;width:50%}.wThird{box-sizing:border-box;vertical-align:top;display:inline-block;width:33.33%}.wThird2{box-sizing:border-box;vertical-align:top;display:inline-block;width:66.7%}.wQuarter{box-sizing:border-box;vertical-align:top;display:inline-block;width:25%}.wQuarter2{box-sizing:border-box;vertical-align:top;display:inline-block;width:50%}.wQuarter3{box-sizing:border-box;vertical-align:top;display:inline-block;width:75%}.wFifth{box-sizing:border-box;vertical-align:top;display:inline-block;width:20%}.wFifth2{box-sizing:border-box;vertical-align:top;display:inline-block;width:40%}.wFifth3{box-sizing:border-box;vertical-align:top;display:inline-block;width:60%}.wFifth4{box-sizing:border-box;vertical-align:top;display:inline-block;width:80%}.wTenth{box-sizing:border-box;vertical-align:top;display:inline-block;width:10%}.wTenth2{box-sizing:border-box;vertical-align:top;display:inline-block;width:20%}.wTenth3{box-sizing:border-box;vertical-align:top;display:inline-block;width:30%}.wTenth4{box-sizing:border-box;vertical-align:top;display:inline-block;width:40%}.wTenth5{box-sizing:border-box;vertical-align:top;display:inline-block;width:50%}.wTenth6{box-sizing:border-box;vertical-align:top;display:inline-block;width:60%}.wTenth7{box-sizing:border-box;vertical-align:top;display:inline-block;width:70%}.wTenth8{box-sizing:border-box;vertical-align:top;display:inline-block;width:80%}.wTenth9{box-sizing:border-box;vertical-align:top;display:inline-block;width:90%}
.icenter{text-align: center;}.ileft{text-align: left;}.iright{text-align:right;}.icenter > *{display:inline-block;}.ileft  > *{display:inline-block;}.iright > *{display:inline-block;}

.nspace4 {  display: inline-block; margin-right: -4px; }
.nspace0 { font-size: 0;}

ul li{white-space:normal;}
.inline-list li{display:inline; margin: 4px 8px;}
.ib{display: inline-block;}
.m-S{margin: 4px 8px;}
.seachbar{padding: 4px 2ch; margin-left: 20px; display:inline-block; border: solid 1px silver; border-radius: 8px;}

.collapsed{height: 0px; padding:0px; margin:0px; transition: 0.1s;}
.collapsed *{display:none;}


.rounder{background:red;color:white;display:inline-block;margin:0;padding:4px;border:0;font:bold 1.2em arial,sans serif;border-radius:5px;text-align:center;vertical-align:top;text-decoration:none}


nav{display: grid; grid-template-columns: auto 48px; grid-gap: 0; position: fixed; z-index: 99; min-height: 48px; max-height: 96px; width: 100%; font-family: alegreya; font-size: 24px; text-align:center; font-weight: 700; vertical-align:top;}
nav:hover{ }
#nav-left{display: inline-block;  text-align: left; min-height: 40px; max-height: 80px;}
#nav-right{display: grid; text-align: right; height: 100%; justify-content: center; align-content:center;}

nav a{display: inline; text-decoration:none; margin:0px; padding:0px; color: inherit; }
.navitm{display: inline-block; height: 24px; padding: 0.2em 0.6ch; margin: 0px; text-align:center;}
.navitm:hover{color: white; opacity: 0.9; transition: 0.1s; text-shadow: 1px 1px 5px white; animation-name: glowlite; animation-duration: 1.2s; animation-iteration-count: infinite; animation-delay: 0.5s;}

nav:hover ~ .cnts .hmi-grid{ border-left: 1em solid red; border-right: 1em solid red; transition: 0.3s; }


nav#nav{ transition: 1s;}
#topgap {height: 48px;}

.arrowNav {  border: solid black;  border-width: 0 5px 5px 0;  display: inline-block;  padding: 5px; border-radius: 3px; margin: 0px 3px;}
.arrow3 {  border: solid black;  border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px; border-radius: 1px; margin: 0px 2px;} .arrow_h{transition: none;} .arrow_h:hover{border-color: DodgerBlue; cursor:pointer;}
.arrow5 {  border: solid black;  border-width: 0 5px 5px 0;  display: inline-block;  padding: 5px; border-radius: 3px; margin: 0px 3px;}
.arrow8 {  border: solid black;  border-width: 0 8px 8px 0;  display: inline-block;  padding: 8px; border-radius: 5px; margin: 0px 6px;}
.arrow10 {  border: solid black;  border-width: 0 10px 10px 0;  display: inline-block;  padding: 10px; border-radius: 5px; margin: 0px 8px;}
.arrow15 {  border: solid black;  border-width: 0 15px 15px 0;  display: inline-block;  padding: 15px; border-radius: 8px;margin: 0px 12px;}
.right {  transform: rotate(-45deg);}.left {  transform: rotate(135deg); }.up {  transform: rotate(-135deg);}.down {  transform: rotate(45deg);}


#navHome::before{display:inline-block; content:"Home"}
#navNews::before{display:inline-block; content:"News"}
#navBlog::before{display:inline-block; content:"Blog"}
#navTrans::before{display:inline-block; content:"Translations"}
#navTwintails::before{display:inline-block; content:"Twintails"}
#navRecs::before{display:inline-block; content:"Recommendations"}
#navInfo::before{display:inline-block; content:"Info"}
#navStory::before{display:inline-block; content:"Stories"}
#navTools::before{display:inline-block; content:"Tools"}


#nav-options{top: 0px; display: inline-block; position: fixed; z-index: 80; width: 100%; height:40px; background: #fcfcff; border-bottom: solid 1px #333333; color:black; font-size: 20px; font-family: Helvetica; text-align: center;  transition: 0.2s;}
#nav-options.nav-options{padding-top:48px; height:88px;}
#nav-options > span{display: inline-block; padding: 0px 1vw; vertical-align: bottom;}
#nav-options input, #nav-options select{ margin: 4px 4px; height: 24px; width: 12ch; }
#nav-option-font{ margin: 0px 8px 0px; font-size: 20px; width: 10ch; text-align:center;}
#nav-option-font:hover{ background: dodgerblue; color:white;}
#nav-options input[type="button"] {cursor: pointer; font-family: Helvetica; font-weight: 700; border-radius: 3px; height: 24px; border:none; padding: 0.2em 2ch;}
#nav-options input[type="button"]:hover {animation-name: glow; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.5s; }
#nav-settings{display:inline-block; height: 30px; width: 30px; padding: 0px; background-color:white; background:url("../rsc/img/settings.svg"); cursor: pointer; background-size:70%; background-repeat:no-repeat; background-position: center center; border-radius: 50%;}
#nav-settings:hover{transform: rotate(-360deg); background-size:90%; animation-name: glowlite; animation-duration: 1.2s; animation-iteration-count: infinite; animation-delay: 0.5s; }
#updset{padding: 0px 1vw;}


.hidden{display:none;}

#cnts{text-align: center; padding: 0px; margin: 0px; display:inline-block;  width: 100%;}
.cnts {text-align: center;	background: black; padding: 0px; margin: 0px;}
#cnt-grid{ display:inline-block; border-style: solid; text-align: center; margin: 0px; transition: 0.1s; transition-delay: 0.5s; min-height: 100vh; padding: 0px 0px 4em; }


.settings{display: inline-block; opacity: 0.8; height: 1em; width: 1em; background: url("rsc/img/gear2.png"); background-size:contain; background-origin: content-box; vertical-align: text-bottom; }
.settings:hover{ opacity: 1; transform: rotate(-360deg);}

.field-container0{ display: grid; grid-template-columns: 30% auto; justify-content: space-evenly;  align-content: center; font-family: ubuntu;}
.field-title{display:inline-block;}
.field-input{display:inline-block;}

img.cen50{ width: 50%; margin: 2em 25%;}

#overmsg{display: inline-block; position: fixed; z-index: 101; top: 200px; left: 0px; width: 100%; opacity: 0.9; padding: 0.5em 1em; font-size: 1.6em; text-align:center; font-family: Arial; box-shadow: 0px 0px 3px 1px #fff, inset 0px 0px 1px 0px #fff; text-shadow: 0px 0px 3px white;}
#overmsg:hover{background: #444;}
.overmsg0{color: white; background: DodgerBlue;}
.overmsg1, .overmsg2, .overmsg3 {color: white; background: red;}
.overmsg0 > span::after{content: "Success";} 
.overmsg1 > span::after, .overmsg2 > span::after{content: "Attempt Failed";} 
.overmsg3 > span::after{content: "Please wait 10 minutes between posting comments";} 
.overmsg1:hover > span::after, .overmsg2:hover > span::after, .overmsg3:hover > span::after{content: "Click to Dismiss";} 
	
.rds3 {  border-radius: 3px;}
.rds5 {  border-radius: 5px;}
.rds10 {  border-radius: 10px;}
.rds15 {  border-radius: 15px;}

.typeblock{display: inline-block; padding: 2px 2px; height: 2ch; width:2ch; margin: 0px; box-shadow: 1px 1px 2px #222222; text-align:center; color: white; font-family: ubuntu; color: white; vertical-align: text-middle;}

.awrap{text-decoration:none; margin:0px; padding:0px; color: inherit;}
.awrap-1{display:none; margin:0px;}

.mtt {background: blue; z-index: 1; top: 10px; width: 50px; height: 30px;}
.mtt:hover {width: 200px;}

.rtt {background: red; height: 30px; width: 20px;}
.rtt:hover {width: 800px;}

.soapl {display: grid; grid-template-columns: auto auto auto auto auto; grid-column-gap: 1em; font-family:ubuntu;}
.soapl li {display: inline-block; user-select: none; }
.soapl label{ border: solid 1px black; margin: auto 0.1ch; border-radius: 5px; padding: 0.1em 0.5ch; transition: 0.2s;  cursor: pointer; }
.soapl input[type="checkbox"]{display: none;}
.soapl input[type="checkbox"] + label::before{content: ""}
.soapl input[type="checkbox"] + label{background: white; color: black;}
.soapl input[type="checkbox"] + label:hover{background: DodgerBlue; color: white;}
.soapl input[type="checkbox"]:checked + label{background: DodgerBlue; color: white; box-shadow: 0px 0px 8px gold;}
.soapl input[type="checkbox"]:checked + label::before{content: ""}
.soapl input[type="checkbox"]:checked + label:hover{background: white; color: black;}

.closer::after{content:"\00d7"; color:white; float:right;}

.news3date {padding: 4px 4px; border-radius: 3px; font-family: ubuntu; margin: 4px 20px;}
.newstitle{font-family: alegreya; font-size: 1.6em; margin: 8px 0px;}
.newstitle > img {height: 100%;}
.newsline{display: inline-block; font-size: 1.2em;  vertical-align: text-middle;}
.newsline a {text-decoration: none; font-family: futura; font-weight: 700;}

.sxntitle {padding: 0.2em 0.4em; width: 96%; margin: 5vh 2% 2vh; font-family:alegreya; font-size:1.6em; font-weight: 700; border-radius: 3px;}
.sxninfo {padding: 1em; font-family:futura; font-size: 1.2em; text-align:left; text-align: justify; text-justify: inter-word;}

.popout{border-color: #222; border-style: solid; border-bottom-width: 2px; border-right-width:1px; border-left-width: 1px; box-shadow: 0px 0px 3px 1px #888, 0px 0px 2px 1px sienna; transition: 0.4s;}
.popout:hover{ transform: translate(0px, -1px);}

.typeblock{}
.radioset{}
.radioset > ul{}
.radioset li{ display: inline-block; user-select: none; }
.radioset label{border: solid 1px black; margin: auto 0.25ch; border-radius: 5px; padding: 4px 8px; transition: 0.2s;  cursor: pointer; box-shadow: 1px 1px 2px #222222; text-align:center; font-family: ubuntu; color: white;}
.radioset input[type="checkbox"], .radioset input[type="radio"]{display: none;}
.radioset input[type="radio"] + label::before{content: ""}
.radioset input[type="radio"] + label{background: white; color: black;} .radioset input[type="radio"] + label:hover{background: gold; color: white;}
.radioset input[type="radio"]:checked + label{background: DodgerBlue; color: white; box-shadow: 0px 0px 3px gold;}
.radioset input[type="radio"] + label.label-g:hover{background: Sienna; color: white;}.radioset input[type="radio"]:checked + label.label-g{background: MediumSeaGreen; color: white; box-shadow: 0px 0px 3px gold;}
.radioset input[type="radio"]:checked + label::before{content: ""}
.radioset input[type="radio"]:checked + label:hover{background: white; color: black;}
.radioset input[type="radio"].tb_tl:checked ~ #choice::after{content:"Translation"}

.grid-2{display: grid; grid-template-columns: auto auto; text-align: center;}
.grid-2 > div{width:100%; padding: 2vw;}
.grid-3{display: grid; grid-template-columns: auto auto auto;}
.grid-4{display: grid; grid-template-columns: auto auto auto auto;}
.grid-5{display: grid; grid-template-columns: auto auto auto auto auto;}
.grid-6{display: grid; grid-template-columns: auto auto auto auto auto auto;}
.grid-7{display: grid; grid-template-columns: auto auto auto auto auto auto auto;}
.grid-8{display: grid; grid-template-columns: auto auto auto auto auto auto auto auto;}
.grid-9{display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto;}
.grid-gap1{grid-gap: 1em;}
.grid-gap2{grid-gap: 2em;}

.blockform{background: #f0f0ff; display:inline-block; border-radius: 1em; padding: 2em; font-family: futura;}
.blockform > label{margin: 12px 12px; font-weight: 800;}
.blockform > .grid-2 > div > label{margin: 12px 16px; font-weight: 800;}
.blockform > input[type="text"]{ width: 60%;}
.blockform > input[type="number"]{ width: 8ch;}
.pageheader{font-family: alegreya; font-size: 200%; text-align:left; margin: 20px 0px 30px; font-weight: 800; padding: 8px 2ch;}
#twibanner{ width: 100%; opacity: 0.7; background-position: center center; padding: 0px; margin: 0px; height:48vh; }
#reader {padding: 0.5em 2em 2em;  text-align: justify;  text-justify: inter-word;}
#reader img{ display: inline-block; width: 80%; margin: 40px 10%; border: solid 1px #222222;}
#reader a{text-decoration: none;}
#reader p{margin-bottom: 1em;}

#copyblock{display: inline; opacity: 0; width: 0px; height:0px; font-size: 0px; overflow:hidden;}

#archivelist{ padding: 0px 2em 2em; font-size: 100%;}
#archivelist ul{ padding: 0px 0.8em;}
#archivelist li{list-style-type: none;}
#archivelist .archivedate{font-weight: 700; font-family: futura; margin-right: 1ch;}
#archivelist a {text-decoration: underline;}
.listheader{ font-size: 130%; font-family:futura; font-weight: 700; }

footer{font-family: alegreya; height: 40px; width: 100%; padding: 2px 2ch; margin:0px;text-align:right; font-weight: 800; border-top: solid 4px white; transition: 0.3s;}
footer ul{padding: 0px; margin: 0px;}

#gear1:hover{ background: #ff0000; }#gear2:hover{ background: #008AE6; }#gear3:hover{ background: #F0D049; }
#gear4:hover{ background: #D6D2CE; }#gear5:hover{ background: #333333; }#gear6:hover{ background: #801C41; }

#gear_list{	list-style-type: none; padding: 5px; padding-right:12px; height:20px; display:inline-block;}
#gear_list li{ display: inline-block; text-align:center; height:24px; width:24px; border: solid 1px #000000; border-radius:8px;	box-shadow: 1px 1px 3px #222222; opacity: 0.5; cursor:pointer;}
#gear_list li.gearshifter{transition: 0.4s;}
#gear_list li.gearshifter:hover{ opacity: 0.9; box-shadow: 1px 1px 3px #222222, 0px 0px 4px #ffffff; }

.ablock, .ablock-b, .ablock-r, .ablock-y, .ablock-g{display: inline-block; font-family:ubuntu; padding: 4px 8px; border-radius:3px; box-shadow: 0px 0px 3px #333333; text-decoration: none;} 
.ablock-b{color: white; background: DodgerBlue;}.ablock-b:hover{text-shadow: 1px 1px 3px white; background: #ff9900;}
.ablock-r{color: white; background: red;}.ablock-r:hover{text-shadow: 1px 1px 3px white; background: black;}
.ablock-y{color: white; background: gold;}.ablock-y:hover{text-shadow: 1px 1px 3px white; background: orchid;}
.ablock-g{color: white; background: MediumSeaGreen;}.ablock-g:hover{text-shadow: 1px 1px 3px white; background: sienna;}

.circle {border-radius: 50%; padding: 0.3em 0.5em; color: black; background-color: white; margin-right: 1ch;}
.collapser{display: inline-block; font-famiy: ubuntu; font-weight: 800; width:100%; border-radius: 8px 8px 8px 8px; color: white; background-color: SteelBlue; padding: 4px 12px; cursor: pointer; margin-top: 2em; }
.collapser:hover{background-color:chocolate;}
.collapser.triggered{border-radius: 8px 8px 0px 0px; background-color: RoyalBlue; }
.collapser-title{display: inline-block; float:left;}
.collapser-button::after{display: inline-block; float: right; content: "\25b2"; }
.collapser-button.triggered::after{float: right; content: "\25bc";}
.collapsee{display: inline-block; width:100%; padding: 2em;}

.alert{display: inline-block; width:90%; margin: 1em 5%; text-align: center; font-family:Arial; padding: 0.2em 2ch; box-shadow: inset 0px 0px 3px 0px white;}
.col-b{color: white; background: DodgerBlue;}.col-b:hover{text-shadow: 1px 1px 3px white; background: #ff9900;}
.col-r{color: white; background: red;}.col-r:hover{text-shadow: 1px 1px 3px white; background: black;}
.col-y{color: white; background: gold;}.col-y:hover{text-shadow: 1px 1px 3px white; background: orchid;}
.col-g{color: white; background: MediumSeaGreen;}.col-g:hover{text-shadow: 1px 1px 3px white; background: sienna;}

.tags_list{color: navy; font-family: ubuntu;  font-size: 1em;  font-kerning: none;}

#vrangeboxes{background-color: rgba(200,200,200,0.2); display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; width: 80%; margin: 2em 10%;}
.vrangebox{display: grid; grid-template-rows: 125px auto auto; width: 25px; margin: 0px 5px; height: 200px; justify-content: center; }
.vrange{display: inline-block; transform: rotate(270deg); width: 125px; height: 25px;  align-self: center; box-shadow: 0px 0px 3px 1px #333;}
.vrangespan{display: grid; justify-content: center; align-content:center; border:solid 1px black;}
.vrange ~ label{font-family:ubuntu;}
.vrange[value="1"] + label{color: Black; }
.vrange[value="2"] + label{color: OrangeRed; }
.vrange[value="3"] + label{color: RoyalBlue; }
.vrange[value="4"] + label{color: SeaGreen; }
.vrange[value="5"] + label{color: DarkOrchid; }

.spoiler{background: black; color: black; padding: auto 4px; cursor: pointer;}
.spoiler:hover{color: white;}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.vrange::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 0px;
  background: White; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.vrange::-moz-range-thumb {
  border-radius: 0px;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: White; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.vrange:focus {
 box-shadow: 0 0 3px 1px white;
 }

@media only screen and (max-width: 1280px){
	nav{}
	#nav-options, #nav-options input, #nav-options select{ font-size: 12px;}
	#nav-options input, #nav-options select{width: 6ch}
	#nav-options input[type="button"] {padding: 0.2em 0.5ch;}
	#topgap {height: 40px;}	
	#navHome::before{content:"Home";}
	#navNews::before{content:"News";}
	#navBlog::before{content:"Blog";}
	#navTrans::before{content:"TL";}
	#updset{background: url("../rsc/img/refresh.png"), red; background-size: contain; background-position: center; background-repeat: no-repeat; color: transparent;}
	#navRecs::before{content:"Recs";}
	#navInfo::before{content:"Info";}
	#navStory::before{content:"Story";}
	#navTools::before{content:"Tools";}
}

@media only screen and (max-width: 900px){
	nav{}
	#nav-options{font-size: 9px; }
	#nav-options input, #nav-options select{max-width: 4ch}
	.arrowNav {  border: solid black;  border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px; border-radius: 1px; margin: 0px 3px;}
	#navTwintails::before{display: inline-block; content:" "; height: 0.8em; width: 0.8em; background: url('../rsc/img/40_Twintail_Orb.png') no-repeat; background-size: contain;}
}

@media only screen and (max-width: 600px){
	#nav-options{overflow:auto; }
}