/*body, p, button		{font-family: sans-serif; font-size:.87em;} */
h1			{font-family: sans-serif; font-size:1.5em; font-weight:bold; text-align:center}
h2			{font-family: sans-serif; font-size:2em; font-weight:bold; text-align:center}
h3			{font-family: sans-serif; font-size:1.5em; font-weight:bold; color:blue;}
spana		{font-size: 0.85em; letter-spacing: 3px; }
ans			{font-family: sans-serif; font-size:3em; color:blue; text-align:center}
.peghole	{width:58px;	height:60px;}
.blank		{width:60px;	height:60px;border:0px}
.center		{width:100%;	margin: 0 auto;text-align:center;}
.centerR1	{width:60px;	margin: 0 auto;}
.centerR2	{width:180px;	margin: 0 auto;}
.centerR3	{width:300px;	margin: 0 auto;}
.centerR4	{width:420px;	margin: 0 auto;}
.centerR5	{width:540px;	margin: 0 auto; text-align:center;}
.dispright	{float:left}
.wfPuzzle	{width:480px;	float:left; text-align:center;}
.spacer		{width:50px;	float:left;}
.wfWordList	{width:200px;	float:left; text-align:left; color:green;}
.wfClrPick	{width:200px;	float:left;}
.wfbox		{width:40px;	height:40px;border:0px; float:left;}
.hmdiv		{width:240px; float:left;}
.hmimg		{width:30%;}
.balldiv	{width:320px; float:left;}
.solutdiv	{width:600px; float:left;}
.alpha		{height:70px; width:70px; float:left}
.hidden		{display:none;}
.chesssqw	{width:59px;	height:59px;background-color:white;border:1px solid black}
.chesssqb	{width:59px;	height:59px;background-color:rgb(195,195,195);border:1px solid black}

.cntctform	{float:left; width:400px}
.right		{float:right; width:60%}
.prodimage	{float:left; width:140px;}
.prodimages	{float:left; width:100%;}
.images		{width:400px; margin:0 auto; float:right;}
.article	{color:blue; font-size:1.5em;}
.productg	{width:1000px; font-size:1.2em; color:green;}
.productr	{width:1000px; font-size:1.2em; color:red;}
.producty	{width:1000px; font-size:1.2em; color:yellow;}
.productb	{width:1000px; font-size:1.2em; color:blue;}
.homecntnr	{width:100%; border:2px solid; border-radius:25px;}
.pf			{width:30%; font-size:1.2em; color:blue; float:left; margin-left:10px;}
.qb			{width:30%; font-size:1.2em; color:red; float:left; margin-left:10px;}
.thockey	{width:30%; font-size:1.2em; color:green; float:left; margin-left:10px;}
.border		{border:3px solid;}
.thnum		{width:75px; text-align:right}
h3blue		{font-size:2.5em; color:blue;}
h3red		{font-size:2.5em; color:red;}
h3green		{font-size:2.5em; color:green;}
h3yellow	{font-size:2.5em; color:yellow;}

b3blue		{font-size:1.25em; color:blue;}
b3red		{font-size:1.25em; color:red;}
.b3green		{font-size:1.5em; color:green;}
b3yellow	{font-size:1.25em; color:yellow;}

.fgborder	{border-top:dotted 1px; border-color:green;}

.newsborder	{	width:50%;padding:10px; text-align:justify;
				margin-left:10px;
				margin-right:10px;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				font-weight:normal;background-color:rgb(240,210,160);color:black;font-size:1.1em;
				}
/* rgb(245,245,200); */


/* DIY Game */

.boardpanel	{width:800px;	margin: 0 auto; float:right;}
.center2	{width:200px;	margin: 0 auto;}
.game		{width:50%;		float:left}
.celln		{width:76px;	height:76px;	border: 1px solid black; margin: 1px; float:left; font-size:.87em; font-weight:bold;}
.gcell		{width:100%;	             	border: 1px solid black; margin: 1px; float:left; font-size:.87em; font-weight:bold;}
.blankcell	{width:76px;	height:76px;	border: 1px solid white; margin: 1px; float:left;}
.endcell	{width:80px;	height:80px;	border: 0px;}
.stack		{position:absolute;}
.leftpanel	{float:left; width:400px; margin:0 auto}
.cntrpanel  {float:left; width:350px; margin:0 auto}

@media screen and (max-device-width: 1400px) {
.celln		{width:46px;	height:46px;	border: 1px solid black; margin: 1px; float:left; font-size:.87em; font-weight:bold;}
.blankcell	{width:46px;	height:46px;	border: 1px solid white; margin: 1px; float:left;}
.endcell	{width:50px;	height:50px;	border: 0px;}
.balldiv	{width:300px; float:left;}

}

@media screen and (max-device-width: 800px) {
.celln		{width:36px;	height:36px;	border: 1px solid black; margin: 1px; float:left; font-size:.87em; font-weight:bold;}
.blankcell	{width:36px;	height:36px;	border: 1px solid white; margin: 1px; float:left;}
.endcell	{width:50px;	height:50px;	border: 0px;}
.balldiv	{width:240px; float:left;}
.alpha		{height:30px; width:30px; float:left}
.peghole	{width:30px;	height:30px;}
.centerR1	{width:30px;	margin: 0 auto;}
.centerR2	{width:90px;	margin: 0 auto;}
.centerR3	{width:150px;	margin: 0 auto;}
.centerR4	{width:210px;	margin: 0 auto;}
.centerR5	{width:270px;	margin: 0 auto; text-align:center;}
.blank		{width:30px;	height:30px;border:0px}
.wfbox		{width:20px;	height:20px; border:0px; float:left;}
.hmimg		{width:100%;}
}

.tablecntnr	{margin:0 auto;	box-shadow: 10px 10px 5px #888888;	border:0px solid #000000;}
table.sptable		{width:100%;}
table.sptable tr:nth-child(odd)	{background-color:#dcd9e2; }
table.sptable tr:nth-child(even)	{background-color:#afafed; }

/* end DIY */

.tableA		{width:100%;border:3px solid blue;border-collapse:collapse;}
.textSignOn {border:0px; padding:0; background:lightgreen; color:black;height:20px; width:49%;}
th			{text-align:left;}
cellg		{color:green;}
.strike		{text-decoration:line-through;color:red;}

/* links and menu */

#nofluff	{font-family:sans-serif}

/*a				{text-decoration:none; color:gray; background:white; 
					-o-transition:color      .5s ease-out, background .2s ease-in; 
					-ms-transition:color     .2s ease-out, background .2s ease-in; 
					-moz-transition:color    .2s ease-out, background .2s ease-in; 
					-webkit-transition:color .2s ease-out, background .2s ease-in; 
					transition:color         .2s ease-out, background .2s ease-in; 
				}
*/
/*a:hover			{ color:white; background:blue; }
#nav							{left: 0; text-align:left; float:right; }
#nav > ul > li					{display: inline-block; padding-right: 1em; }
#nav > ul > li:last-child		{padding-right: 0; }
#nav > ul > li > a				{display: block;}
#nav > ul > li > a > spana		{font-size: 0.85em; letter-spacing: 3px; }
#nav > ul > li > ul				{display: none; position:absolute; list-style-type: none;}
#nav ul li:hover > ul			{display: block; border:1px dotted green;padding:0}
#nav ul li:hover > ul >li > a	{display: block; width:275px;}
*/

form input.text, form select, form textarea
			{
				-webkit-appearance: none;
				display: block;
				border: 0;
				background: #e8e8e8;
				width: 100%;
				box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.1);
				border-radius: 4px;
				padding: 0.75em 1em 0.75em 1em;
				-moz-transition: background-color 0.25s ease-in-out;
				-webkit-transition: background-color 0.25s ease-in-out;
				-o-transition: background-color 0.25s ease-in-out;
				-ms-transition: background-color 0.25s ease-in-out;
				transition: background-color 0.25s ease-in-out;
			}

				form input.text:hover,
				form select:hover,
				form textarea:hover
				{
				}

				form input.text:focus,
				form select:focus,
				form textarea:focus
				{
					background: #f0f0f0;
				}
				
				form textarea
				{
					min-height: 11em;
					font-family:sans-serif;
				}

				form .formerize-placeholder
				{
					color: #555 !important;
				}

				form ::-webkit-input-placeholder
				{
					color: #555 !important;
				}

				form :-moz-placeholder
				{
					color: #555 !important;
				}

				form ::-moz-placeholder
				{
					color: #555 !important;
				}

				form :-ms-input-placeholder
				{
					color: #555 !important;
				}

				form ::-moz-focus-inner
				{
					border: 0;
				}

.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
}

@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}


/* for Image Slider */

.div1, .div2 {width:700px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C; }
.div1 a {margin:0 8px;}
.div1 a.current {color:black; text-decoration:none;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;}
.green {color:Green;}
.cn {font-family: "Courier New", Georgia;}
#status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

.code
{
    border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:"Courier New", Georgia;
    font-size:12px; margin:6px 0;overflow:auto; 
}

.board-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.board-canvas {
    min-width: 860px;   /* good for A, B, D */
}

.board-canvas.board-c {
    min-width: 780px;   /* slightly narrower for style C */
}

.board-canvas::after {
    content: "";
    display: block;
    clear: both;
}