/* ---------------------------------------- */
:root                         {
                               --ActiveBorder:#D4D0C8;
                               --ActiveCaption:#0A246A;
                               --AppworkSpace:#808080;
                               --Background:#3A6EA5;
                               --ButtonFace:#D4D0C8;
                               --ButtonHighlight:#FFFFFF;
                               --ButtonShadow:#808080;
                               --ButtonText:#000000;
                               --CaptionText:#FFFFFF;
                               --GrayText:#8B8B8B;
                               --Highlight:#0A246A;
                               --HighlightText:#FFFFFF;
                               --InactiveBorder:#D4D0C8;
                               --InactiveCaption:#808080;
                               --InactiveCaptionText:#D4D0C8;
                               --InfoBackground:#FFFFE1;
                               --InfoText:#000000;
                               --Menu:#D4D0C8;
                               --MenuText:#000000;
                               --Scrollbar:#D4D0C8;
                               --ThreedDarkShadow:#404040;
                               --ThreedFace:#D4D0C8;
                               --ThreedHighlight:#FFFFFF;
                               --ThreedLightShadow:#D4D0C8;
                               --ThreedShadow:#808080;
                               --Window:#FFFFFF;
                               --WindowFrame:#000000;
                               --WindowText:#000000;
                              }

/* ---------------------------------------- */
HTML, BODY                              {height:100%;}
.smaller                                {font-size:smaller;} /** it is possible to use nested tags to achieve multiple effect. **/
.larger                                 {font-size:larger;}  

/*** logo bar: beg ***/
DIV.top-bar                             {position:relative;top:0px;left:0px;padding:6px;overflow:hidden;cursor:default;-moz-user-select:none;
                                         font-family:sans-serif;font-size:small;border-bottom:1px solid buttontext;color:captiontext;}

[agent=MSIE     ] DIV.top-bar           {background-color:menu;}
[agent=MSIE     ] DIV.top-border        {position:absolute;left:0;top:0;width:100%;height:0px;font-size:1px;border:1px solid;
                                         border-color:threedshadow threedhighlight threedhighlight threedshadow;}

[agent=SeaMonkey] DIV.top-bar           {background-color:menu;border-bottom:1px solid threedshadow;}
[agent=SeaMonkey] DIV.top-border        {display:none;}

[agent=Firefox  ] DIV.top-bar           {background-color:#DAD7D0;border-bottom:1px solid threedshadow;}
[agent=Firefox  ] DIV.bottom-border,
[agent=Firefox  ] DIV.top-border        {display:none;}

[agent=Chrome   ] DIV.top-bar           {background-color:#F2F2F2;border-bottom:1px solid threedshadow;-webkit-user-select:none;}
[agent=Chrome   ] DIV.bottom-border,
[agent=Chrome   ] DIV.top-border        {display:none;}

[agent=Edge     ] DIV.top-bar           {background-color:#F2F2F2;border-bottom:1px solid threedshadow;-webkit-user-select:none;}
[agent=Edge     ] DIV.bottom-border,
[agent=Edge     ] DIV.top-border        {display:none;}

DIV.top-bar TABLE                       {border-collapse:collapse;border-spacing:0;margin:0 20px 0 auto;}
DIV.top-bar TD                          {vertical-align:middle;padding:0;}
/*** logo bar: end ***/

TABLE.page                              {font-family:sans-serif;font-size:small;border-collapse:collapse;border-spacing:0;empty-cells:show;width:100%;height:100%;}
TABLE.page TD                           {vertical-align:top;padding:0;}
TABLE.page IFRAME                       {border:0 none;overflow:hidden;overflow-x:hidden;overflow-y:hidden;width:100%;}

BODY.in-iframe                          {margin:0;padding:0 40px;}

TABLE.list                              {border-collapse:separate;border-spacing:0 40px;empty-cells:show;width:100%;font-family:sans-serif;font-size:small;}
TABLE.list TD                           {vertical-align:top;padding:4px;background-color:#E6E6E6;border:1px solid Black;}
TABLE.list TH                           {font-weight:normal;text-align:center;white-space:nowrap;}
TABLE.list IMG.icon                     {border:0 none;height:40px;width:40px;margin:4px 6px 0 4px;float:left;}
TABLE.list SPAN.B                       {font-weight:bold;xcolor:#606060;}

BODY                                    {font-family:sans-serif;font-size:small;}
TEXTAREA.BookDesk                       {border:0 none;width:calc(100% - 2px);height:calc(100% - 2px);font-family:Arial;font-size:13px;resize:none;}

INPUT[TYPE=number].PlayDesk             {position:absolute;bottom:2px;right:5px;width:40px;text-align:right;}
[agent=MSIE] INPUT.PlayDesk             {text-align:left;}

TABLE.PlayDesk                          {border-collapse:separate;border-spacing:4px;font-family:inherit;font-size:inherit;border:2px solid Black;background-color:#F6F6F6;}
TABLE.PlayDesk TD                       {padding:0px;vertical-align:top;font-size:smaller;}
TABLE.PlayDesk TH                       {font-weight:normal;}

#CDswitch TR                            {vertical-align:top;}
#CDswitch SPAN.title                    {font-weight:bold;font-size:larger;padding:4px 16px;background-color:#DDDDDD;display:inline-block;margin:1ex 0;}
#CDswitch A.external                    {color:blue;text-decoration:none;}

/*
SPAN.box                                {position:relative; border-width:1px; border-style:solid; padding:5px; width:100px; height:80px; font-size:9pt; background-color:white;}

A                                       {font-family:sans-serif; font-weight: bold; color:#606060;}
A:hover                                 {text-decoration:underline; color:gray;}
A:active                                {outline:thin dotted invert;}

A.more                                  {font-size:xx-small; font-weight:bold;}
*/

/* ---------------------------------------- */