/* PWC website stylesheet - pjcs 2023-02-02  */

@charset "utf8";

/* symbols */
html 	{
--body-font:	'Open Sans';
--head-font:	'Roboto Slab';
--mono-font:	'Courier New';
--head-color:	#006d98;    /*#06c;*/
}

/* basics */
a           {color: var(--head-color); text-decoration:none; }
body		{background: silver; font-family: var(--body-font); font-size: 0.9em; padding:0; margin:0}
h1			{font-family: var(--head-font); font-size: 1.5em;  color: var(--head-color); }
h2			{font-family: var(--head-font); font-size: 1.2em;  color: var(--head-color); }
code		{font-family:monospace; font-size: 15px; font-weight:400; color:#0a0}
button		{float:right;font-size:larger;margin-top:1em;margin-right:0em; color:darkblue; background:aliceblue;
			border:1pt solid darkblue; cursor:pointer}

.mono		{overflow:auto; max-width:100%; border: 0; padding: 0 0 1em 0; margin: 0; font-family: var(--mono-font);
			font-size:11pt}
.script		{font-family:var(--mono-font); overflow:auto; max-width:100%; border: solid gray .1em; padding: 0 0 1px 0.3em; 
			margin: 0; line-height: 15px; font-weight:bold; font-size:13.3333px; overflow:auto}
pre			{font-family:var(--mono-font); margin-top:0; padding-top:0}
pre.nobord	{border: 0; color:#0a0; padding-bottom:15px; font-size: 15px; font-family:monospace; font-weight:400;
			line-height:16px}
.example	{font-family:var(--mono-font); font-weight:bold; font-size:13.3333px; color: purple}
input.box	{font-family:var(--mono-font)}

/* divs */
div#frame_outer {width:100%; max-width:1000px; position:relative; margin:auto; }
div#frame_inner {position:absolute; background: white; width:100%; text-align:left; padding:0; margin:0;
			border: 2px solid var(--head-font); }
div#heading	{width:calc(100% - 24px); background:var(--head-color); color: white; border:0; min-height: 0px; 
			overflow:hidden; padding: 12px; text-align: center; font-family: var(--head-font)}
div#content	{width:calc(100% - 24px); border:0; min-height: 0px; overflow:hidden; padding: 12px}
div.column	{float:left; max-width:calc(50% - 2em); min-width:300px; border:0; padding:0 1em 0 1em}
div#footing	{width:calc(100% - 24px); background:var(--head-color); color: #ccf; border:0; padding:12px;
			min-height:0px; overflow:hidden; font-weight: 600}
div#foot-left	{float:left}
div#foot-right	{float:right; width:450px; max-width:100%; text-align:right}
div.picleft     {float:left; clear:left; margin-right:1%; margin-bottom:10px; font-size:0.8em; text-align:center; 
				padding:0.5%; background:white; height:auto; width:100%; }
div.picright    {float:right; clear:right; margin-left:1%; margin-bottom:10px; font-size:0.8em; text-align:center; 
				padding:0.5%; background:white; height: auto; width:100%; }

a.foot-link		{color:white}
div.wide	{float:left; width:calc(100% - 2em); min-width:300px; border:0; padding:0 1em 0 1em}

div.prev	{float:left; width:33%; padding:0 0 0 0; font-size:smaller; font-weight:bold}
div.this	{float:left; width:34%; text-align:center; font-size:smaller; font-weight:bold}
div.next	{float:left; width:33%; text-align:right; padding:0 0 0 0; font-size:smaller; font-weight:bold}

/* tabs */
div.tab_sel {float:left; text-align:center; font-weight:bold; border-left:1px solid silver; 
			border-right:1px solid silver; border-top:1px solid silver;  border-bottom: 1px solid white;
			border-top-left-radius:10px; border-top-right-radius:15px; background: white; z-index:1; height:25px; 
			border-collapse:collapse; font-family: var(--head-font); font-size: 1.2em;  color: var(--head-color);}
div.tab_unsel {float:left; text-align:center; font-weight:bold; background:#eef; border:1px solid silver;
			border-top-left-radius:10px; border-top-right-radius:15px; height:25px; border-collapse:collapse; 
			font-family: var(--head-font); font-size: 1.2em;  color: var(--head-color);}
div.tab_dis {float:left; text-align:center; font-weight:bold; color:silver; background:#eee; border:1px solid silver;
			border-top-left-radius:10px; border-top-right-radius:15px; height:25px; border-collapse:collapse; 
			font-family: var(--head-font); font-size: 1.2em;  color: var(--head-color);}
div.tab_spc {float:left; width:4%; height:25px; border-bottom:1px solid silver; border-top:1px solid white; 
			border-collapse:collapse; }

/* paras */
p			{padding:0; margin: 0 0 1em 0}
.button		{font-family: var(--body-font)}
span.caption {font-family:var(--body-font); font-size:1em; font-weight:300; color: white}
span.input	{color:green}
span.output	{color:blue}

div.link	{float:right; margin-top: 12px; text-align:center; padding:left: 2em} /* needed for old weeks */
div.button	{position:inline; border:1px solid #888; border-radius:3px; height:1.5em; background:#eee;
			float:right; margin-top: 12px; text-align:center; padding:left: 2em}
p.weeks		{font-family: var(--head-font); font-size: 1.2em;  color: var(--head-color); margin: 1em 0 0 0 }
p.tasks		{margin:0}
a.task-link	{text-decoration: none; color: purple; }

/* laptop */
@media screen and (min-width: 675px) {
div#icon-div	{float:right; width:150px; height:150px; text-align:center;min-height: 0px; overflow:hidden;}
div#img-div	{float:left; width:170px; text-align:center;min-height: 0px; overflow:hidden;}
img.pjcs	{width:150px; height:150px}
div#title	{text-align:center; vertical-align:middle; height: 140px; width:calc(100% - 170px); font-size: 32pt}
div#challenge	{text-align:center; height: 50px;  font-size: 16pt;}
div#nxtprv	{position:absolute; height:1.2em; width:1.2em; margin:130px 0 0 10px}
a.nxtprv	{font-size:1.2em; color:silver; }

p#big-date		{font: 1em var(--head-font); margin:0; width:100%; }
p#small-date	{visibility: hidden; height: 0; margin:0; border:0 }

/* tables */
table.bord      {border-bottom:1px solid white; margin:0 0 1em 0; padding:0; border-collapse:collapse; width:100%;}
table.bord tr	{border-top:1px solid white; padding:2px 0.5% 2px 0.5%; text-align:left; vertical-align:top; }
table.bord th   {font-weight:bold; color:var(--head-color); border-bottom:1px solid silver}
}

/* phone */

@media screen and (max-width: 674px) {   /* phone */
div#icon-div	{float:right; width:80px; text-align:center;min-height: 0px; overflow:hidden;}
div#img-div	{float:left; width:80px; text-align:center; min-height: 0px; overflow:hidden;}
img.pjcs		{width:80px; height:80px}
div.heading	{width:100%; background:var(--head-color); color: white; border:0; height: 140px; padding:1%; font-size: 1em}
div#title	{text-align:center; vertical-align:middle; height: 100px; width:calc(100% - 100px);  font-size: 16pt}
div#challenge	{height: 30px; font-size: 12pt;}
div#nxtprv	{position:absolute; height:1.2em; width:1.2em; margin:85px 0 0 10px}
a.nxtprv	{font-size:1em; color:silver; }

div#frame_inner	{border-width: 0; }
div.column	{float:left; max-width:calc(100% - 2em); border:0; padding:0 1em 0 1em}
div.big		{max-width:calc(100% - 2em) }

h1			{font-family: var(--head-font); font-size: 1.5em; font-weight: bold; color: var(--head-color); }
h2			{font-family: var(--head-font); font-size: 1.2em; font-weight: bold; color: var(--head-color); }

p#big-date	{visibility: hidden; height: 0; margin:0; border:0}
p#small-date	{font: 1em var(--head-font); margin:0; width:100%; }

p#blog-title		{text-align:center; font-size:1.7em; font-family: var(--head-font); color:var(--head-color); margin:0.5em;}
span.caption {font-family:var(--body-font); font-size:0.7em; font-weight:300; color: white}

/* tables */
table.bord      {border-bottom:1px solid white; margin:0 0 1em 0; padding:0; border-collapse:collapse; width:100%;
			font-size:smaller}
table.bord tr	{border-top:1px solid white; padding:2px 0.5% 2px 0.5%; text-align:left; vertical-align:top; }
table.bord th   {font-weight:bold; color:var(--head-color); border-bottom:1px solid silver}


}