/*
common css
Version: 1
Date Launched: 07-05-2025
Last Edit: 07-26-2025
Author URI: https://jrpcs.com
*/

/*=============================================*/
/*=========================== Reset Styles ===*/
/*=============================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
color: black;
background: white;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}

/*=============================================*/
/*=========================== Light / Dark ====*/
/*=============================================*/

/* from https://jarv.is/notes/dark-mode/ */

.dark-mode-toggle {
cursor: pointer;
padding: 1em;

/* hide toggle until we're sure user has JS enabled */
visibility: hidden;
}

/*=============================================*/
/*=========================== Light Mode ======*/
/*=============================================*/

body.light {background-color: #c4dcef;color: #00090f;}
/*body.light a {color: #a5addb;}*/

body.light div.interpretation {background:#f2f7fa;}

body.light hgroup h1 {color: #09263b;}

body.light hgroup h2 {color: #555555;text-shadow:1px 1px 1px #dfe2e2;}

body.light .double-grid-container {background:#cddfec;}

body.light .article blockquote {color: #555555;text-shadow: 1px 1px 1px #e8edf0;}

body.light cite {color: #555555;}

body.light .article  {background:none;}

body.light .article p li a {color:#333;}

body.light .article ul li:nth-child(odd) {background-color: #e6eff5;color: #00060a;text-shadow: 1px 1px #e6eff5;}

body.light .article ul li:nth-child(even) {color: #00060a;text-shadow: 1px 1px #ffffff;}

body.light .article ul li:nth-child(odd) a {color:#0e1b24;}

body.light .article ul li:nth-child(even) a {color:#0e1b24;}

body.light .article ol li:nth-child(odd) {background-color: #e6eff5;color: #00060a;text-shadow: 1px 1px #e6eff5;}

body.light .article ol li:nth-child(even) {color: #00060a;text-shadow: 1px 1px #ffffff;}

body.light .article ol li:nth-child(odd) a {color:#0e1b24;}

body.light .article ol li:nth-child(even) a {color:#0e1b24;}

body.light .article p {color: #00060a;text-shadow: 1px 1px #f2f7fa;}

body.light .article strong {color: #333333;}

body.light .article em {color: #21282b;text-shadow: 1px 1px #dfe2e2;}

body.light h2 {color: #21282b;text-shadow: 1px 1px 1px #ddd;}

body.light .article h2 {background-color: #c4dcef; color: #21282b;text-shadow: 1px 1px 1px #ddd;}

body.light h3 {color: #333333;text-shadow: 1px 1px 1px #fff;}

body.light .article h3 {color: #333333;text-shadow: 1px 1px 1px #fff;}

body.light h4 {color: #00060a;text-shadow: 1px 1px 1px #fff;}

body.light .article h4 {color: #00060a;text-shadow: 1px 1px 1px #fff;}

body.light h5 {color: #555555;text-shadow: 1px 1px 1px #999;}

body.light .article h5 {color: #555555;text-shadow: 1px 1px 1px #999;}

body.light footer {background:#ffffff;color: #ccc;}

body.light footer a {color: #555;}

body.light footer a:hover {color: #556556;text-shadow:1px 1px 1px #bbbbbb;}

/*=============================================*/
/*=========================== Dark Mode =======*/
/*=============================================*/

body.dark {background-color: #07091e;color: #efebff;}

body.dark div.interpretation {background:#24052c;}

body.dark hgroup h1 {color: #6dc1ff;}

body.dark hgroup h2 {color: #cfdbe0;text-shadow:1px 1px 1px #dfe2e2;}

body.dark .double-grid-container {background:#030222;}

body.dark .article blockquote {color: #cfdbe0;text-shadow: 1px 1px 1px #e8edf0;}

body.dark cite {color: #cfdbe0;}

body.dark .article {background:none;}

body.dark .article p a {color:#26a8db;}

body.dark .article p li a {color:#26a8db;}

body.dark .article ul li:nth-child(odd) {background-color: #121135;color: #efebff;}

body.dark .article ul li:nth-child(even) {color: #efebff;}

body.dark .article ul li:nth-child(odd) a {color:#c5ddee;}

body.dark .article ul li:nth-child(even) a {color:#c5ddee;}

body.dark .article ol li:nth-child(odd) {background-color: #121135;color: #efebff;}

body.dark .article ol li:nth-child(even) {color: #efebff;}

body.dark .article ol li:nth-child(odd) a {color:#c5ddee;}

body.dark .article ol li:nth-child(even) a {color:#c5ddee;}

body.dark .article p {color: #efebff;}

body.dark .article strong {color: #cccccc;}

body.dark .article em {color: #cfdbe0;}

body.dark h2 {color: #cfdbe0;}

body.dark .article h2 {background-color: #07091e; color: #cfdbe0;}

body.dark h3 {color: #cccccc;}

body.dark .article h3 {color: #cccccc;}

body.dark h4 {color: #efebff;}

body.dark .article h4 {color: #efebff;}

body.dark h5 {color: #cfdbe0;}

body.dark .article h5 {color: #cfdbe0;}

body.dark footer {background:#121135;color: #888;}

body.dark footer a {color: #cfdbe0;}

body.dark footer a:hover {color: #888;}

/*=============================================*/
/*=========================== Main Styles ====*/
/*=============================================*/

.left {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}
.justify {text-align:justify;}
.margin-left {margin-left:2em; text-align:left;}
.padding-left {padding-left:1.5em; text-align:justify;}
.padding-right {padding-right:1.5em; text-align:justify;}
.quote {padding-left:1.5em; padding-right:1.5em; text-align:justify;}
.indent {text-indent:2em;}
.negative_indent {text-indent:-0.4em;}

@media screen {

body {
font-size:26px;
width:100%;
}

b, strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
u {
text-decoration: underline;
}
abbr, acronym {
cursor: help;
border-bottom: 1px dotted #cccccc;
}
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

code {
font: 0.9em/1.1em 'Quicksand', sans-serif;
color: #555;
text-align:justify;
font-weight:400;
padding:1em 1em 1em 1em;
}

pre {
background: #fff;
padding: 0.7em;
text-align:justify;
margin: 1em;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
-moz-border-radius: 0.3em;
border-radius: 0.3em;
-moz-box-shadow: inset 0 0 0.2em 0.2em #ccc;
-webkit-box-shadow: inset 0 0 0.2em 0.2em #ccc;
box-shadow: inset 0 0 0.2em 0.2em #ccc;
}

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
/* make buttons play nice in IE:
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

input {
  font: 1em/1.2em 'Open Sans', sans-serif;
  color: #000000;
  background-color:#dddddd;
  width: 100%;
}

.result div {
font: 1.0em/1.4em 'Crimson Pro', serif;
padding:0em 0em 0em 0.2em;
margin:0em 0em 0em 0.2em;
}

.result-item div div:nth-child(odd) {
padding:0.3em;
margin: 0em 0em 0em 0em;
list-style-type: none;
}

.result-item div div:nth-child(even) {
background-color:#081026;
padding:0.3em;
margin: 0em 0em 0em 0em;
list-style-type: none;
}

table { margin-bottom: 1em; }
th {
font-weight: bold;
padding: 0 0.2em;
}
td { padding: 0 0.2em; }

/*=============================================*/
/*=========================== Clearfix =======*/
/*=============================================*/

/* Clearfix */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}

/*=============================================*/
/*=========================== divs ============*/
/*=============================================*/

div.interpretation {
width:auto;
height:auto;
padding:5px;
margin:5px;
text-shadow:none;;!important
border-style: solid;
border-width: 1px;
border-color: #bdbdbd;
}

/*=============================================*/
/*=========================== Links ==========*/
/*=============================================*/

a  {
text-decoration: none;
display:inline;
}

/*=============================================*/
/*=========================== form ==========*/
/*=============================================*/

form {
  position: relative;
  width: 740px;
  height: 498px;
  margin: 0 auto;
  padding: 1em;
  box-sizing: border-box;
}

button {
  padding: 5px;
  font: bold 0.6em sans-serif;
  font-color:#eee;
  border: 2px solid #333;
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

/*=============================================*/
/*=========================== q-and-a ==========*/
/*=============================================*/

.q-and-a {
  display:block;
  padding:15px;
}

/*=============================================*/
/*=========================== hgroup =========*/
/*=============================================*/

.spacer {
margin: 21px auto auto auto;
}

hgroup {
background:none;
clear:both;
top:0px;
left:0;
right:0;
margin:auto;
z-index:1000;
}

hgroup h1 {
font: 1.6em 'Open Sans', sans-serif;
font-weight: 800;
letter-spacing:0pt;
word-spacing: 0pt;
display: block;
border-radius: 0.4em;
padding:0em;
margin: 0px 0px 0.3em 0px;
z-index:1000;
}

hgroup h2 {
font: 1.2em/1.4em 'Open Sans', sans-serif;
position:relative;
left:0;
right:0;
font-weight:300;
letter-spacing: 0pt;
word-spacing: 2pt;
padding:0.1em 0em 0.4em 0em;
margin:0.1em 0em 0.4em 0em;
z-index:1;
}

/*=============================================*/
/*=========================== nav ============*/
/*=============================================*/

/*------------------------------------*\
Flaunt JS Navigation
\*------------------------------------*/

.nav {
position:relative;
display:inline-block;
width:100%;
top:0px;
font-size:20px;
list-style-type: none;
z-index:6001;
margin-bottom:30px;
}
.nav-list {
font: 1em/1.2em 'Open Sans', sans-serif;
color: #fdf7f7;
font-weight:400;
text-align:center;
text-shadow: 1px 1px 1px #1f0a0b;
}
.nav-item {
float:left;
*display:inline;
zoom:1;
position:relative;
list-style-type: none;
border-right: 1px solid white;
width: auto;
}
.nav-item a {
display:block;
color:#FFF;
padding:15px 10px;
background:#150c17;
border-bottom:2px solid #ffffff;
list-style-type: none;
}
.nav-item > a:hover {
background-color:#666666;
color:#FFF;
}
.nav-item:hover .nav-submenu {
display:block;
}

/* Navigation submenu */
.nav-submenu {
display:none;
position:absolute;
text-align:center;
left:0;
width:300px;
list-style-type: none;
}
.nav-submenu-item a {
background:#0d0d2c;
color:#dddddd;
border-bottom:2px solid #ffffff;
display:block;
padding:13px 10px 13px 10px;
}
.nav-submenu-item a:hover {
background:#150c17;
color:#cccccc;
}
/* Mobile navigation */

.nav-mobile:before {
color:#ffffff;
content:' Menu ';
text-shadow: 1px 1px 1px #666666;
}

.nav-mobile {
display:none; /* Hide from browsers that don't support media queries */
cursor:pointer;
position:absolute;
top:0;
left:0;
background:#333333 url(https://jrpcs.com/images/menu.svg) no-repeat right center;
background-size:32px;
background-position: 125px;
height:40px;
width:130px;
padding: 10px 30px 0px 40px;
margin: 0px 0px 0px 0px;
-moz-border-radius:0px 0px 30px 0px;
border-radius:0px 0px 30px 0px;
}
/* Mobile navigation, clickable area for revealing <ul> */
.nav-click {
position:absolute;
top:0;
left:0;
display:none;
border-left:2px solid #cccccc;
height:40px;
width:120px;
cursor:pointer;
}
.nav-click i {
display:block;
height:40px;
width:40px;
background:url(https://jrpcs.com/images/drop.svg) no-repeat center center;
background-size:20px;
}
.nav-click:hover {
background-color:#cccccc;
}
.nav-rotate {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}

/*------------------------------------*\
Media Queries
\*------------------------------------*/

@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav-mobile {
display:block;
}
.nav {
width:100%;
padding:50px 0 0;
font-size:26px;
font-weight:900;
}

.nav-list {
display:none;
}
.nav-item {
width:100%;
float:none;
}
.nav-item > a {
padding:15px;
}
.nav-click {
display:block;
}
.nav-mobile-open {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}
.nav-item:hover .nav-submenu {
display:none;
}
.nav-submenu {
position:static;
width:100%;
}
}

/*=============================================*/
/*======================== cssgrid ============*/
/*=============================================*/

header.header {
max-width: 800px;
margin: auto;
}
main.front_page {
max-width: 1200px;
margin: auto;
padding:20px;
}
main.article_page {
max-width: 1200px;
margin: auto;
padding:20px;
}
main.lined_text_page {
max-width: 800px;
margin: auto;
padding:20px;
}
section.article {
max-width: 1200px;
margin: auto;
padding:20px;
}
.double-grid-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 40px;
row-gap: 40px;
background:#cddfec;
padding:20px;
}
.triple-grid-container {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 40px;
row-gap: 40px;
padding:20px;
}
.grid-item {
background-color: none;
padding:20px;
}
footer.footer {
max-width: 1200px;
margin: auto;
}

/*=============================================*/
/*=========================== tables =========*/
/*=============================================*/

table {
font-size:0.8em;
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 2px solid #ccc;
text-align: left;
}

/*=============================================*/
/*=========================== separator ======*/
/*=============================================*/

#separator {
background:#cccccc;
width:auto;
height:auto;
padding:0px;
margin:0px;
}

/*=============================================*/
/*=========================== top bar ========*/
/*=============================================*/

.titlebar {
background-color:none;
position:fixed;
top:0;
left:0;
margin:auto;
padding: 0px 0px 0px 90px;
z-index:-4000;
}

.searchbar {
background:#150c17;
position:fixed;
top:0;
left:0px;
height:51px;
width:100%;
z-index:4500;
border-bottom:2px solid #fff;
}

.searchtool {
background: url(https://jrpcs.com/images/search.svg) no-repeat;
position: fixed;
width: 28px;
height:28px;
top: 0;
right:0;
padding:3px;
margin:8px;
z-index:7000;
}

.homeicon {
background: url(https://jrpcs.com/images/home.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:7px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.topicon {
background: url(https://jrpcs.com/images/top_icon.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:80px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.kindleWidget {
background: none;
position: fixed;
top: 6px;
right:55px;
padding:8px;
margin:8px;
z-index:3000;
}

/*=============================================*/
/*=========================== Quotations =====*/
/*=============================================*/

article blockquote {
font:0.9em/0.9em 'Economica', serif;
background: none;
font-weight: normal;
clear:both;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0;
margin: 0;
-moz-border-radius:none;
border-radius:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

cite {
font: 1em/1.2em'Economica', serif;
background: none;
font-weight:400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
!important
text-shadow:none;
}

cite em {
font: 1.2em/1.4em 'Crimson Pro', serif;
font-style: italic;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
text-shadow:none;
}

/*=============================================*/
/*=========================== List ===========*/
/*=============================================*/

.article p li {
font: 1.0em/1.4em 'Crimson Pro', serif;
text-align: left;
font-weight:200;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
list-style-type: none;
}

.article p li a {
text-decoration:none;
}

/*---- unordered lists ----*/

.article ul {
font: 1.0em/1.4em 'Crimson Pro', serif;
padding:0em 0em 0em 0.2em;
margin:0em 0em 0em 0.2em;
}

.article ul li:nth-child(odd) {
padding:0.3em;
margin: 0em 0em 0em 0em;
list-style-type: none;
}

.article ul li:nth-child(even) {
padding:0.3em;
margin: 0em 0em 0em 0em;
list-style-type: none;
}

.article ul li:nth-child(odd)  a {
text-decoration:none;
display: inline;
}

.article ul li:nth-child(even) a {
text-decoration:none;
display: inline;
}

/*---- ordered lists ----*/


.article ol {
font: 1.0em/1.4em 'Crimson Pro', serif;
padding:0em 0em 0em 0.2em;
margin:0em 0em 0em 0.2em;
}

.article ol li:nth-child(odd) {
padding:0.3em;
margin: 0em 0em 0em 0em;
}

.article ol li:nth-child(even) {
padding:0.3em;
margin: 0em 0em 0em 0em;
}

.article ol li:nth-child(odd)  a {
text-decoration:none;
display: inline;
}

.article ol li:nth-child(even) a {
text-decoration:none;
display: inline;
}

/*=============================================*/
/*=========================== Article ========*/
/*=============================================*/

.article {
clear:both;
padding:0px;
margin:0px 0px 0px 0px;
}

.article p  {
font: 1em/1.4em 'Crimson Pro', serif;
background: none;
font-style:normal;
clear:both;
margin: 0.5em 5px 0.5em 5px;
}

.article strong {
font-weight: 700;
font-style: bold;
word-spacing: 1.1pt;
}

.article em {
font-weight: 400;
font-style: italic;
word-spacing: 1.1pt;
}

/*=============================================*/
/*=========================== Header =========*/
/*=============================================*/


h1 {
}

h1 a {
}

article h1 {
}

h2  {
font: 1.2em/1.4em 'Open Sans', sans-serif;
clear:both;
font-weight: 400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:1em 0em 0.5em 0em;
margin:0.3em 0em 0.3em 0em;
height:110px;
}

article h2  {
/* position:sticky; */
top:20px;
bottom:30px;
}

h3  {
font: 1em/1.2em 'Open Sans', sans-serif;
clear:both;
font-weight: 400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0.7em 0em 0.7em 0em;
margin:0.7em 0em 0.7em 0em;
}

article h3  {
font: 1em/1.2em 'Open Sans', sans-serif;
clear:both;
font-weight: 400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0.7em 0em 0.7em 0em;
margin:0.7em 0em 0.7em 0em;
}

h4  {
font: 1em/1em 'Open Sans', sans-serif;
clear:both;
font-weight: 300;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0.7em 0em 0.7em 0em;
margin:0.7em 0em 0.7em 0.0em;
}

article h4  {
font: 1em/1em 'Open Sans', sans-serif;
clear:both;
font-weight: 300;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0.7em 0em 0.7em 0em;
margin:0.7em 0em 0.7em 0.0em;
}

article h5  {
font: 0.9em/1.2em 'Open Sans', sans-serif;
clear:both;
font-weight: normal;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0.7em 0em 0.7em 0em;
margin:0.7em 0em 0.7em 0.4em;
}

/*=============================================*/
/*=========================== Section ========*/
/*=============================================*/

section {
}

#buffer {
margin-top:90px;
}

/*=============================================*/
/*=========================== Figure =========*/
/*=============================================*/

.logo {
display: block;
text-indent: -9999px;
width: 63px;
height: 72px;
background: url(https://jrpcs.com/images/guide_grayscale.svg);
background-size: 63px 72px;
margin-top:20px;
margin-left: auto;
margin-right: auto;
margin-bottom:20px;
}

figure {
padding:0em;
margin:0em;
text-align:center;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0.2em;
-webkit-margin-end: 0.2em;
}

figcaption {
font: 0.9em/1.2em 'Quicksand', sans-serif;
color:#999999;
padding:0em;
margin:0px 0.2em 2em 0.2em;
text-align:center;
}

figure blockquote {
}

figure cite {
}

figure blockquote p {
font:1.8em 'Economica', cursive;
color: #666666;
background: none;
text-align:left;
font-weight: normal;
clear:both;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;

line-height: 42px;
padding:0;
margin: 0;
text-shadow: 1px 1px 1px #e8edf0;
-moz-border-radius:none;
border-radius:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

figure cite p {
font: 0.8em 'Quicksand', sans-serif;
color: #777777;
background: none;
text-align: right;
clear:both;
font-weight:500;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;

padding:5px;
margin:3px;
text-shadow:none;
}

figure cite p a {
color: #666666;
}

/*=============================================*/
/*=============================== buttons =========*/
/*=============================================*/

.button1 {
background-color: #150c17;
color: #ffffff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:inline-block;
cursor:pointer;
font-family:Verdana;
font-size:0.8em;
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
text-decoration:none;
}
.button1:hover {
background-color: #0050a6;
color: #ffffff;
}
.button1:active {
position:relative;
top:1px;
}


/*=============================================*/
/*=========================== Dividers =======*/
/*=============================================*/

hr {
margin:1em auto 1em auto;
clear:both;
text-align:center;
width:200px;
border:2px solid #bbb;
}

article hr {
margin:1em auto 0px auto;
clear:both;
text-align:center;
width:200px;
border:2px solid #bbb;
}

/*=============================================*/
/*=========================== Media ==========*/
/*=============================================*/

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

/*=============================================*/
/*=========================== Footer =========*/
/*=============================================*/

footer {
padding:auto;
margin:auto;
text-align: center;
}

footer a {
font: 0.7em 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
letter-spacing: .7pt;
word-spacing: -0.8pt;
text-shadow:none;
height:auto;
}

footer a:hover {
background:none;
font: 0.7em 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
letter-spacing: .7pt;
word-spacing: -0.8pt;
height:auto;
}

}

/*=============================================*/
/*=========================== SMALLER ========*/
/*=============================================*/

@media handheld, only screen and (max-width: 767px) {

/*=============================================*/
/*============================ Main Styles ===*/
/*============================ Mobile ========*/
/*=============================================*/

.margin-left {margin-left:0.3em; text-align:left;}
.padding-left {padding-left:0.5em; text-align:justify;}
.quote {padding-left:0.5em; padding-right:0.5em; text-align:justify;}

body {
font-size:23px;
}

h2  {
font: 1.0em/1.3em  'Quicksand', sans-serif;
text-align: left;
clear:both;
font-weight: 400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0em 0em 0.3em 0em;
margin:0em 0em 0.3em 0em;
height:110px;
}

article h2  {
/* position:sticky; */
top:50px;
bottom:30px;
}

hgroup {
background:none;
clear:both;
top:70px;
left:0;
right:0;
margin:70px auto auto auto;
z-index:1000;
}

article {
background:none;
clear:both;
padding:0em;
margin:0em;
}

article p  {
font: 1.1em/1.5em 'Crimson Pro', serif;
background: none;
font-style:normal;
text-align:justify;
clear:both;
padding:0px;
margin: 10px 0px 10px 0px;
}

.titlebar {
background-color:none;
position:fixed;
top:0;
left:0;
margin:auto;
z-index:-4000;
}

.searchbar {
background-color:#555555;
position:fixed;
top:0;
left:0px;
height:51px;
width:100%;
z-index:4500;
}

.searchtool {
background: url(https://jrpcs.com/images/search.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
right:7px;
padding:3px;
margin:3px;
z-index:7000;
}

.homeicon {
background: url(https://jrpcs.com/images/home.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:7px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.topicon {
background: url(https://jrpcs.com/images/top_icon.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:80px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.spacer {
margin: 18px 0px 0px 0px;
}

aside {display:none;}

th {display:none}

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #ccc;
position: relative;
padding-left: 35%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 60%;
padding-right: 10px;
white-space: nowrap;
}

}

/*=============================================*/
/*=========================== SMALLEST =======*/
/*=============================================*/

@media handheld, only screen and (max-width: 624px) and (-webkit-min-device-pixel-ratio: 2) {

/*=============================================*/
/*============================ Main Styles ===*/
/*============================ Mobile ========*/
/*=============================================*/

.margin-left {margin-left:0.3em; text-align:left;}
.padding-left {padding-left:0.5em; text-align:justify;}
.quote {padding-left:0.5em; padding-right:0.5em; text-align:justify;}

body {
font-size:21px;
}

hgroup {
background:none;
clear:both;
top:0px;
left:0;
right:0;
margin:70px auto auto auto;
z-index:1000;
}

h2  {
font: 1.0em/1.3em  'Quicksand', sans-serif;
text-align: left;
clear:both;
font-weight: 400;
letter-spacing: 1.2pt;
word-spacing: -0.8pt;
padding:0em 0em 0.3em 0em;
margin:0em 0em 0.3em 0em;
height:110px;
}

article h2  {
/* position:sticky; */
top:50px;
bottom:30px;
}

.titlebar {
background-color:none;
position:fixed;
top:0;
left:auto;
right:auto;
width:200px;
padding:1px auto 0px auto;
margin: 3px 0px 0px 0px;
z-index:2900;
}

.titlebartext {
font: 20px 'Open Sans', sans-serif;
font-style: normal;
font-weight: 100;
overflow:hidden;
color:#cccccc;
}

.searchbar {
background-color:#555555;
position:fixed;
top:0;
left:0px;
height:51px;
width:100%;
z-index:4500;
}

.searchtool {
background: url(https://jrpcs.com/images/search.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
right:7px;
padding:3px 10px 3px 3px;
margin: 4px 8px 3px 3px;
z-index:7000;
}

.homeicon {
background: url(https://jrpcs.com/images/home.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:7px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.topicon {
background: url(https://jrpcs.com/images/top_icon.svg) no-repeat;
position: fixed;
width: 23px;
height:23px;
top: 7px;
left:80px;
padding:3px 3px 3px 10px;
margin: 4px 3px 3px 8px;
z-index:4510;
}

.spacer {
margin: 16px 0px 0px 0px;
}

aside {display:none;}

#buffer {
margin-top:45px;
}

}