@import url("font.pt-sans.css");
@import url("fontawesome.6.1.1.css");

/* ************************* */

body
{
    background      : black linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(96,96,96,1) 100%) fixed;
    padding         : 0;
    margin          : 0;
    color           : #ccc;
    width           : 100%;
    font-family     : 'PT Sans', sans-serif;
}

/* <body-canvas> */
div.body-canvas
{
    width           : 100%;
    height          : 100%;
    color           : black;
}
body[colorMode=dark] div.body-canvas
{
    color           : white;
}
/* </body-canvas> */

/* <page-framework> */
table.page-framework
{
    /*border          : 1px solid green;*/
    padding         : 0;
    margin          : 0;
    border-collapse : collapse; 
    border-spacing  : 0;
    width           : 100%;
    min-width       : 400px;
}
table.page-framework tr
{
    padding         : 0;
    margin          : 0;
}
table.page-framework td
{
    padding         : 0;
    margin          : 0;
}
/* </page-framework> */

/* <top-footer> */
div#top-footer
{
    padding-left    : 20px;
    font-size       : 12pt;
    line-height     : 48px;
    color           : #eee;
}
div#top-footer .lang-selector
{
    float           : right;
    margin-right    : 10px;
    font-size       : 12pt;
    line-height     : 50px;
    color           : #ddd;
}
div#top-footer .lang-selector a
{
    color           : #ddd;
    text-decoration : none;
    cursor          : pointer;
}
div#top-footer .lang-selector a:hover
{
    color           : #ddd;
    text-shadow     : 0px 0px 15px white;
}
div#top-footer .logo
{
    font-size       : 24px;
    font-weight     : bold;
}
div#top-footer .white
{
    color           : white;
}
div#top-footer .gray
{
    color           : darkgray;
}
div#top-footer .dark-gray
{
    color           : gray;
}

body[colorMode=dark] div#top-footer .lang-selector a
{
    color           : #80a0f0;
    text-decoration : none;
}
body[colorMode=dark] div#top-footer .lang-selector a:hover
{
    color           : #84a6ff;
    text-shadow     : 0px 0px 15px white;
}
/* </top-footer> */

/* <bottom-footer> */
div#bottom-footer
{
    font-size       : 10pt;
    color           : white;    
    padding         : 40px 20px 40px 20px;
}
div#bottom-footer a
{
    color           : #a0a0a0;
}
body[colorMode=dark] div#bottom-footer
{
    color           : #aaa;
}
body[colorMode=dark] div#bottom-footer a
{
    color           : #777;
}
/* </bottom-footer> */


/* <panes> */
table.panes
{
    width           : 100%;
    height          : 100%;
    border-collapse : collapse;
    border-spacing  : 0;
}
table.panes td.pane
{
    height          : 100%;
    vertical-align  : top;
    background      : white url(/design/pane.left.top.background.dark.png) top left no-repeat;
    margin          : 0;
    padding         : 0;
    color           : black;
}
body[colorMode=dark] table.panes td.pane
{
    background      : black url(/design/pane.left.top.background.dark.png) top left no-repeat;
    color           : #ddd;
}
table.panes td#left-led-backlight
{
    width           : 20px;
    min-width       : 20px;
    background      : url(/design/led_canvas.png) top left repeat-y;
}
/* </panes> */

/* <left-pane> */
td#left-pane
{
    width           : 300px;
}
td.pane table
{
    padding         : 0;
    margin          : 0;
    border-collapse : collapse;
    border-spacing  : 0;
    height          : 100%;
}
td#left-pane td
{
    vertical-align  : top;
}
td#left-pane td.pane-block
{
    padding         : 20px;
    min-width       : 240px;
    width           : 240px;
    overflow        : clip;
}

td#left-pane div#toggle-block
{
    width           : 240px;
}

.pane .right-shadow
{
    width           : 20px;
    min-width       : 20px;
    background      : white linear-gradient(90deg, rgba(192,192,192,0) 0%, rgba(192,192,192,0.1) 25%, rgba(192,192,192,1) 100%);
}
body[colorMode=dark] td.pane td.right-shadow
{
    background      : black linear-gradient(90deg, rgba(64,64,64,0) 0%, rgba(64,64,64,1) 100%);
}
td#left-pane div.pane-block-hide-button
{
    float           : right;
    display         : block;
    height          : 20px;
    cursor          : pointer;
    text-align      : center;
    width           : 20px;
    color           : #666;
    margin-top      : 0;
}
td#left-pane div.pane-block-hide-button:hover
{
    color           : #4466ff;
    text-shadow     : 0px 0px 15px #4466ff;
}
td#left-pane div.pane-block-show-button
{
    float           : right;
    display         : block;
    height          : 20px;
    cursor          : pointer;
    text-align      : center;
    width           : 20px;
    color           : #666;
    margin-top      : 36px;
    visibility      : hidden;
}
td#left-pane div.pane-block-show-button:hover
{
    color           : #4466ff;
    text-shadow     : 0px 0px 15px #4466ff;
}
/* </left-pane> */

/* <main-pane> */
td#main-pane td.pane-block
{
    padding         : 20px;
    vertical-align  : top;
    width           : 100%;
}
/* </main-pane> */

/* <right-pane> */
td#right-pane
{
    width           : 300px;
    visibility      : visible;
    display         : table-cell;
}
td#right-pane.hidden
{
    width           : 300px;
    visibility      : hidden;
    display         : none;
}
td#right-pane td.pane-block
{
    width           : 100%;
    padding         : 20px;
    vertical-align  : top;    
}
/* </right-pane> */


/* <pane-pane-block-elems> */
.pane-block a
{
    color           : #048;
    text-decoration : none;
}
.pane-block a:hover
{
    color           : #46f;
    text-shadow     : 0px 0px 15px #7a93ff;
}
body[colorMode=dark] .pane-block a
{
    color           : #8af;
    text-decoration : none;
}
body[colorMode=dark] .pane-block a:hover
{
    color           : #8fbbff;
    text-shadow     : 0 0 15px white;
}
.pane-block h1, 
.pane-block h2, 
.pane-block h3, 
.pane-block h4
{
    font-weight     : normal;
    color           : gray;
}
body[colorMode=dark] .pane-block h1, 
body[colorMode=dark] .pane-block h2, 
body[colorMode=dark] .pane-block h3, 
body[colorMode=dark] .pane-block h4
{
    color           : #bbb;
}
.pane-block .small
{
    font-size       : 80%;
}
.pane-block .smallDate
{
    background      : linear-gradient(90deg, #80a0f0 0%, rgb(1, 158, 255, 0) 100%);
    font-size       : 80%;
    padding-left    : 2px;
    padding-right   : 2px;
    color           : white;
}
.pane-block .underSign
{
    margin-top      : 40px;
    margin-bottom   : 40px;
    font-size       : small;
}
/* </pane-pane-block-elems> */

/* ++ Dead-pixel check ++ */
#startButton
{
    text-align      : center;
    width           : 200px;
    height          : 50px;
    background      : gray;
    color           : white;
    line-height     : 50px;
    cursor          : pointer;
    margin          : 20px 20px 100px 20px;  
}
#testBlock
{
    display         : none;
    position        : absolute;
    z-index         : 5;
    top             : 0px;
    left            : 0px;
    bottom          : 0px;
    right           : 0px;
    background      : white;
    cursor          : none;
}
/* -- Dead-pixel check -- */

/* listable ------*/
table[zoommode="small"] td
{
    font-size       : 80%;
}

table.listtable td
{
    text-align      : left;
    padding         : 0 0 0 0.5em;
    font-size       : 80%;
}

table.listtable tr.listrow
{
    vertical-align  : top;
}

table.listtable td + td
{
    padding         : 0;
    text-align      : center;
}

table.listtable th.left
{
    text-align      : left;
    padding         : 0.2em 0.5em 0.2em 0.5em;
}
/*
table.listtable th
{
    background-image: url("/design/table.header.canvas.png");
}
*/
body[colorMode=dark] table.listtable th
{
    background      : #333;
}

table.listtable tr.header
{
    vertical-align  : bottom;
    font-size       : 80%;
    background      :#f0f0f0;
}
body[colorMode=dark] table.listtable tr.header
{
    background      :#444;
}

table.listtable tr.smallheader
{
    font-size       : 12px;
    text-align      : center;
    vertical-align  : bottom;
}

table.listtable tr.smallheader
{
    font-size       : 80%;
    text-align      : center;
    vertical-align  : bottom;
}
table.listtable tr.outOfPrd
{
    color           : #666;
    background-color: #fafafa;
}
body[colorMode=dark] table.listtable tr.outOfPrd
{
    color           : #999;
    background-color: #222;
}
table.listtable tr.unOfficial
{
    color           : #800;
    background-color: #f0e0e0;    
}
body[colorMode=dark] table.listtable tr.unOfficial
{
    color           : #daa;
    background-color: #220000;    
}
table.listtable tr.outOfPrdunOfficial
{
    color           : #b88;
    background-color: #f0e0e0;
}
body[colorMode=dark] table.listtable tr.outOfPrdunOfficial
{
    color           : #d66;
    background-color: #200;
}
table.listtable tr.hoverLine td
{
    vertical-align  : top;
}
table.listtable tr.hoverLine:hover td
{
    background-color: #dce6ff;
}
body[colorMode=dark] tr.hoverLine:hover td
{
    background-color: #048;
}
table.listtable td
{
    padding         : 0 0.2em 0 0.2em;
    text-align      : left;
}
table.listtable td + td
{
    padding         : 0 0.2em 0 0.2em;
    text-align      : left;
}
table.listtable tr.separator
{
    background      :#f0f0f0;
}
body[colorMode=dark] table.listtable tr.separator
{
    background      :#333;
}
tr.separator td
{
    text-align      : right;
}
table.listtable tr.brand
{
    background      :#f0f0f0;
}
body[colorMode=dark] table.listtable tr.brand
{
    background      :#333;
}
tr.brand td
{
    text-align      : left;
    font-weight     : bold;
}
table.listtable tr.size
{
    background      :#f0f0f0;
}
body[colorMode=dark] table.listtable tr.size
{
    background      :#333;
}
table.listtable tr.size td
{
    text-align      : left;
    font-size       : 150%;
    padding-left    : 10px;
}

table.listtable .ef
{
  font-size         : 100%;
  width             : 90%;
  border            : 1px solid #ddd;
}
body[colorMode=dark] table.listtable .ef
{
  background        : #222;
  color             : #eee;
  border            : 1px solid #666;
}

/* /listable ------*/

.mimeIcon
{
  margin : 2px;
}

/* <colorShiftTable> */
.colorShiftTable
{
    border-collapse : collapse; 
    border-spacing  : 0;
    background      :#888888;
    border          : none;
}
.colorShiftTable #gauge
{
	color: #eee;
	font-size: x-small;
	text-align : center;
	overflow: hidden;
}
.colorShiftTable .cell1
{
	background-color:#660000;
}
.colorShiftTable .cell2
{
	background-color:#006600;
}
.colorShiftTable .cell3
{
	background-color:#000066;
}
.colorShiftTable .cell4
{
	background-color:#006666;
}
.colorShiftTable .cell5
{
	background-color:#660066;
}
.colorShiftTable .cell6
{
	background-color:#666600;
}
/* </colorShiftTable> */

.pane-block table.center
{
    margin-left     : auto;
    margin-right    : auto;
}

/* pixel-size-calculator */
.pane-block table.calculator
{
    height          : auto;
}
table.calculator td
{
    padding         : 8px;
}
table.calculator td:first-child
{
    text-align      : right;
    color           : #888;
}
body[colorMode=dark] table.calculator td:first-child
{
    color           : #aaa;
}
.pane-block .button
{
    border-radius   : 5px;
    padding         : 4px 8px 4px 8px;
    border          : none;
    background      : #dce6ff;
    color           : #334fca;
    margin          : 5px;
    font-family     : "PT Sans", sans-serif;
    cursor          : pointer;
}
body[colorMode=dark] .pane-block .button
{
    background      : #334fca;
    color           : #dce6ff;
}
.pane-block .button:hover
{
    background      : #dce6ff;
    color           : #4466ff;
    box-shadow      : 0px 0px 10px #4466ff;
}
body[colorMode=dark] .pane-block .button:hover
{
    background      : #4466ff;
    color           : #dce6ff;
    box-shadow      : 0px 0px 10px white;
}

table.calculator .input
{
    border          : 1px solid #ddd;
    text-align      : center;
}

body[colorMode=dark] table.calculator .input
{
    background      : #222;
    color           : #eee;
    border          : 1px solid #666;
}

.pane-block table.spec
{
    height          : auto;
}
table.spec td
{
    padding-top     : 5px;
    padding-bottom  : 5px;
    vertical-align  : top;
}
table.spec td + td
{
    padding-left    : 10px;
}
table.spec tr:first-child td
{
    padding-top     : 20px;
    line-height     : 24px;
    min-height      : 32px;
    font-weight	    : 300;
    vertical-align  : bottom;
    color           : gray;
    border-bottom   : 1px gray solid
}
table.spec tr:last-child td
{
    min-height      : 32px;
    border-bottom   : 1px gray solid  
}
.pane hr
{
    border          : none;
    background      : linear-gradient(90deg, rgba(68,192,255,0.2) 0%, #4466ff 50%, rgba(68,192,255,0.2) 100%);
    height          : 1px;
}

/* <image> */
div.image
{
    padding         : 10px;
    margin          : 0 auto;
    width           : 100%;
    font-size       : small;
    text-align      : center;
    color           : gray;
    font-style      : italic;
}
div.image img
{
    margin-top      : 2px;
}
div.image a, div.image a:hover
{
    border          : none;
}
img.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* </image> */