/* j5/top.css
 * Bruce Guenther Baumgart, copyright©2011-2016, license GPLv3.
 * style sheet for the Stanford A.I.Lab SYSTEM.DMP[J17,SYS] re-enactment.
:*/
*{
    margin:0;padding:0;
    border-width:0;
}
#topbody{background-color:gray;overflow:hidden}
.panel{position:absolute;border:0px solid red;}
.buffer{visibility:collapse;}
#pure_listing,#trace_log{display:none;}

/* Layout#1 screen Too Tall - so just show off the CTY roll-of-paper ASPECT < 0.33 :*/
@media screen and (max-aspect-ratio:1/3){
    #divCTY{left:0%; width:99%; height:99%; top:0;visibility:visible;}
}
/*Layout#2 screen Portrait 0.334 < ASPECT < 0.667 :*/
@media screen and (min-aspect-ratio:1/3) and (max-aspect-ratio:2/3){
    #divGUI{right:0;  width:28%;   height:99%; top:0; }
    #divPDP10{left:50%;width: 9%;  height:57%; top:0; }
    #divCTY{left:58%; width:14%;   height:57%; top:0; }
    #divSIM{left:50%; width:21%;   height:16%; top:57%;}
    #divKB{ left:50%; width:21%;   height:25%; bottom:1%; }
    #divPDP10,#divSIM,#divCTY,#divKB,#divGUI{visibility:visible;}
}
/* Layout#3 screen Square 0.67 < ASPECT < 1.5 :*/
@media screen and (min-aspect-ratio:2/3) and (max-aspect-ratio:3/2){
    #divGUI{right:0; width:99%;   height:89%;    top:0;}
    #divGUI{visibility:visible;}
}
/* Layout#4 screen Single Landscape 1.5 < ASPECT < 3.0 :*/
@media screen and (min-aspect-ratio:3/2) and (max-aspect-ratio:3/1){
    #divGUI{right:0; width:49%; height:99%; top:0; }
    #divSIM{ left:0; width:49%; height:20%; top:0; }
    #divCTY{ left:0; width:49%; height:57%; top:21%; }
    #divKB{  left:0; width:49%; height:20%; bottom:0; }
    #divSIM,#divCTY,#divKB,#divGUI{visibility:visible;}
}
/* Layout#5 screen Double Landscape 3.0 < ASPECT < 5.0 :*/
@media screen and (min-aspect-ratio:3/1) and (max-aspect-ratio:5/1){
    #divCODE{left:0;  width:48%; height:98%; top:0; }
    #divGUI{right:0;  width:25%; height:98%; top:0; }
    #divPDP10{left:50%; width: 9%; height:56%; top:0; }
    #divCTY{left:60.5%; width:14%; height:56%; top:0; }
    #divSIM{left:50%; width:23%; height:16%; top:57%;}
    #divKB{ left:50%; width:23%; height:25%; bottom:1%; }
    #divCODE,#divPDP10,#divSIM,#divCTY,#divKB,#divGUI{visibility:visible;}
}
/* Layout#6 screen Too Wide - so just show off a huge keyboard left over GUI right 5.0 < ASPECT < infinity :*/
@media screen and (min-aspect-ratio:5/1){
    #divKB{  left:0; width:49.4%;   height:99%; bottom:0; visibility:visible; z-index:2; }
    #divGUI{right:0; width:49.4%;   height:99%;    top:0; visibility:visible; z-index:1; }
}
/*:
#divCODE       { background-color:rgba(148,128,128,0.5);}
#divPDP10      { background-color:rgba(128,128,148,0.5);}
#divSIM        { background-color:rgba(128,128,128,0.5);}
#divCTY        { background-color:rgba(148,148,128,0.5);}
#divKB         { background-color:rgba(148,128,148,0.5);}
#divGUI        { background-color:rgba(128,148,128,0.5);}
#divCODE,#divPDP10,#divSIM,#divCTY,#divKB,#divGUI{border-color:black;}
#divCODE:hover { background-color:rgba(148,128,128,0.5);}
#divPDP10:hover  { background-color:rgba(128,128,148,0.5);}
#divSIM:hover  { background-color:rgba(128,128,128,0.5);}
#divCTY:hover  { background-color:rgba(148,148,128,0.5);}
#divKB:hover   { background-color:rgba(148,128,148,0.5);}
#divGUI:hover  { background-color:rgba(128,148,128,0.5);}
#hoverhelp:hover{ background-color:cyan; }
#divCODE:hover,#divPDP10:hover,#divSIM:hover,#divCTY:hover,#divKB:hover,#divGUI:hover{border-color:red;}
:*/
#popup_help{background-color:rgba(225,225,200,1.0);z-index:0;}
#simcheatsheet{visibility:hidden;position:fixed;top:0;right:0;background-color:rgb(250,250,200);}

.tab{
    position:absolute;    z-index:1;
    border:solid 2px lightblue;         left:2px;
    border-radius:15px 15px 0 0;        padding: 0 1em 0 1em;
    background-color:lightblue;
}
#sign{bottom:0; display:block; margin-left:auto;margin-right:0; height:250px;width:220px;z-index:2;}
#USER,#ReadOnly{color:#CCC;}
#MIDDLE pre:hover{background-color:pink!important;}
.wait{cursor:wait!important}
.progress{cursor:progress!important}

#REWINDING h1{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:xx-large;
    line-height:2em;
/*  text-align:center; vertical-align:middle; */
    padding:3em;
    color:black;
    background-color:#EEE;border-radius:30px;border: 8px solid darkred;
    z-index:2;
}

/* EOF :*/