/* The site is set up to use several custom defined fonts, to whit:
 *
 *  computer1 - body text (i.e., everything else)
 *  computer2 - typed text effect
 *  computer3 - main menu
 *  computer4 - site-column-1 (on the Whatsnew page, IIRC)
 *
 * If any or all of these are undefined, the site will fall back to courier new, 
 * then lucida, then  monospaced. Note that the actual font declarations for 
 * these fonts are currently handled in the separate webfonts.css stylesheet.
 */

/* ------------------------General Formatting --------------------------------
 *
 * Add these to "class=" of the element you want to style
 */
    .bg-primary { background: black }            /* primary background color */
    .bg-secondary { background: #060 }           /* dark green for banners   */
    .fg-primary { color: #0F0 }                  /* normal green text        */
    .fg-bright { color: #0f0 }                   /* bright green text        */
    .strikeout { text-decoration: line-through; }
    .rounded {  border-radius: 6px;  }                    /* rounded corners */
    .text-shadow { text-shadow: 2px 2px #222; }       /* drop shadow to text */
    .centered { text-align: center }
    .beveled {                                              /* Adds beveling */
        box-shadow:                                 
            0 1px 2px #444,                    /* bottom external highlight. */
            0 -1px 1px #444,                   /* top external shadow.       */
            inset 0 -1px 1px rgba(0,0,0,0.5),  /* bottom internal shadow.    */
            inset 0 1px 1px rgba(255,255,255,0.8) /* top internal highlight. */
    }

    body { /* Note that these settings are overridden -- by site-column1 and 
              site-column2 I guess */ 
        font-family: computer1, courier new, LucidaTerminal, monospace;
        text-align: left;
        font-size: 14pt;
    }

      a, a:visited {
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: dashed 1px;
            color: inherit;             /* if not specified, you'll get blue */
            border-color: inherit;
            background-color: inherit;
        font-weight: bold;
            line-height: 150%;
      }

    a:hover {            /* inherit everything from <a>, just reverse colors */
        border-color: #0f0;
        background-color:#0f0;
        color: #000;
    }

    h2 {
        text-align: center;
        color:#000;
        margin-bottom: 0px;
        background-color: #0f0;
    }

    h3 {        /* used for the subheaders (OS names) on the cp/m-live! page */
        font-family: computer3, courier new, LucidaTerminal, monospace;
        font-size: 110%;
        font-weight: bold;
        margin-top: 0px;
    }

      /* ----------------------------- Old Site layout -----------------------
       * Don't remove this yet, you idiot, you still use the old layout on some
       * pages. [2018 Note: is this still true?]
       */
     
      div.site-container {
            width: 100%;
            float: left; border-bottom-style: dashed;
            border-width: 1px;
            border-color: #060;
            }
     
      div.site-column-1 {
            float:left;
            font-family: computer4, courier new, LucidaTerminal, monospace;
            font-size: 125%;
        font-weight: bold;
            text-align: center;   
            width:20%;
            margin-right: 2px;
            padding-right: 0%;
        vertical-align: middle;
            }

      div.site-column-2 {
            float:right;
            font-family: computer1, courier new, LucidaTerminal, monospace;
            font-size: 100%;
            font-weight: normal;
            text-align: justify;
            width:75%;
            margin-left: 10px;
        padding-left: 2%;
            vertical-align: top;
            }
           
      div.linkswrapper {
            float:left; width:100%;
      }

      div.originalsite,
      div.mirrorsites,
      div.downloads {
            float: left;
            font-family: computer1, courier new, LucidaTerminal, monospace;
            text-align: left;
            width: 33%;
            overflow: hidden; /* stop long lines spilling into next box on
                               * narrow screens 
                               */
            }

      ul.linkscontent li {
          margin-left: -1em;
          list-style-type:circle;
          }

      div.downloads a,
      div.originalsite a,
      div.mirrorsites a {
            font-weight: normal; /* too much bold everywhere */
            font-size: 90%;
            }

      p.linksheader {
            text-align: left;
            font-family: computer3, courier new, LucidaTerminal, monospace;
            font-weight: bold;
            font-size: 110%;
            margin-bottom: -0.5em;
            }

      /* ------------------------- New Grid layout  ------------------------*/
     
      #everythingwrapper {
        /* border-top: 2px dashed green;
         * border-bottom: 2px dashed green;
         */
      }

      #header {
        float: left;
        position: absolute;
        top: 0; left:0; width: 100%;
      }

      #menu {                      /* Used by the navigation menu at the top */
        margin-bottom: 10px;
        text-align: center;
        font-weight: bold;
        font-family: computer3, courier new, LucidaTerminal, monospace;
        font-size: 110%;
      }

      #menu ul {
        margin:0;
        padding:0;   
        list-style:none;
      }

      #menu li {
        display:inline;
        margin:0;
        padding:0;
      }

      #mainbodywrapper {
        width:100%;
        margin:0 auto;
        background:#000;
        margin-bottom: 10em;
        padding-bottom: 10em;
        margin-top: 3em;
        padding-top: 0.5em;
        float: clear;
      }

      #eyecandywrapper {
        margin-left: 5%; margin-top: 2em;
        width: 90% ;
      }

      #eyecandytable {  width: 100%;  border: 0; }

      #siteboxwrapper {
/*      pre-flexbox styling  
        margin-left: 5%;
        margin-top: 3em;
        text-align: center; */

        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
      #siteboxwrapper div{
        flex-direction:column;
    }

    
    #siteboxwrapper .spacer { }

/* ----------------------------Banner Styling --------------------------------
 * For some reason Safari on iOS isn't seeing some of these, so you'll need to
 * put them in cpmbanner.html and trs80banner.html.
 */

    #banner { font-family: computer1, courier new, LucidaTerminal, monospace; }
    .bannertext {
        font: 4px/4px monospace;
        background-color: #060;
        color: #fff;
        text-align: center;
        font-weight: bold;        /* Not seen in banner files; specify there */
        padding-bottom: 10px;
        padding-top: 10px;
      }

/* ------------------------------- Menu ------------------------------------ */

table#menu { margin-left: auto; margin-right: auto; color: #0f0 }

/* ----------------------------Sitebox Styling ----------------------------- */

    .sitebox {
/* pre-flexbox styling                             
        position: relative; /* Needed so can calculate the positions of popup
                             * within a sitebox by setting the tooltip class to
                             * position: absolute. 
                             
                             
        float: left; display: inline-block;
        padding: 0;
        border: 0;
        margin: 0;
        height: 7em;
        margin-bottom: 3em;
        margin-top: -3em;   /* Without the margin-top and -bottom settings the
                             * bottom of the last row of siteboxes gets swal-
                             * lowed by the footer. They can be set to whatever
                             * you like, as long as they're offsetting. I find 
                             * that 3em and -3em seem to roughly center the 
                             * sitebox grid between header and footer. Ideally, 
			     * the bottom-margin setting should be applied to 
			     * either siteboxwrapper or mainbodywrapper but for
			     * some reason, margin- or padding-bottom settings 
			     * have no effect on pushing the footer down. 
			     */

/* Flexbox Styling */

  padding: 0em;
  width: 18.6em;
  height: 8.3em;
  line-height: 120%;  

			     
			     
			     
			     color: #0c0; /* This controls both the body text inside a sitebox and the box border. 
                              I can't find where the default color is being set. */
    }

    div.sitebox a {
        font-weight: bold;
        text-decoration: none;
        line-height: 0.95em;
        border-bottom: 0;
    }

    div.sitebox pre {
        font-family: /* computer1, */ courier, monospace; 
        line-height: 1em;   /* Firefox 8 under Kubuntu line heights are defaul-
                             * ting to something less than 1em; forcing it here 
                             */
        margin: 0; 
        padding: 0;
        border: 0;
        margin-left: -0.55em; 
    }
     
    div.sitebox pre a {
        line-height: 1em;
        font-weight: bold;
        text-decoration: none;
    }                     /* if not explicitly enforced, lines with links 
                             * will push things down a bit and siteboxes will 
                             * misalign. font-weight: bold creates wider-width
                             * chars under Firefox 8.
                             */
    div.sitebox pre a.siteboxtitle {   /* Copied to index.html so iOS Safari */
        background: green;             /* sees them */
        color: #cf0;
        text-shadow: 2px 2px #222;
        border-radius: 6px;
        box-shadow:                      /* This provides the beveled effect */
          0 1px 2px #444,                       /* bottom external highlight */
          0 -1px 1px #444,                            /* top external shadow */
          inset 0 -1px 1px rgba(0,0,0,0.5),        /* bottom internal shadow */
          inset 0 1px 1px rgba(255,255,255,0.8);   /* top internal highlight */
    }
    
    div.sitebox pre a.siteboxtitle:hover {
        background-color:#0f0;
        color: black;
        text-shadow: 0px 0px;
      }
      div.sitebox pre a.controls {
        background: black;
        color: #050;
        cursor: pointer;
      }
      div.sitebox pre a.controls:hover {
        background-color:#0f0;
        color: black;
      }
     
    .siteboxpage {
        border: 0;
        margin: 0;
        padding: 0;
        display: none;
    }

    div.sitebox > pre:first-child { z-Index: 2; display: block }

    * .grid(3) {  }
    ul.grid {list-style-type: none;}
   
/* ----------------------------Footer Styling --------------------------------
 * Safari on iOS isn't seeing these in srcs.css, so I’ve copied them to 
 * footer.html. Change them there. 
 */

    * html #footer { height:1px; }                               /* IE6 hack */

    #footer {    /* This has been copied into ftp.php so it will be seen there.
                  * Someday figure out why it can't see this. */
        font-size: 11px; text-shadow: 1px 1px #000;
        margin-top: 40px;
        margin-bottom: 20px;
        padding: 0 10px;
        clear: both;
        border-radius: 6px;
        text-align: center;
        background:#000;
        background: #060;
        color:#FFFFFF;
    }

/* --------------------------------Ticker tape --------------------------------

/* Copied from srcs.css to index.php and whatsnew.php because Safari on iPad 
 * won't see the settings in srcs.css. Change these in index and whatsnew 
 */

    #tickerouter {
        height: 170px;
     /* background:#fff url(../images/stripe3.png) repeat left top; */          
    }
       
    #ticker { /* Only used to provide the left-side feed holes and white 
               * background; set everything else to zero. */
     /*background:transparent url(../images/holeleft4.png) repeat-y left top;*/
        margin: 0px;
        padding: 0px;
        border: 0px;
        height: 100%;
        overflow:hidden;
    }

    div#tickerinner {                  /* right feed holes, plus all content */
        height: 100%;    /* force div full height so feed holes show immediate-
                          * ly; else bottom of div pushes down as text is typed
                          * doing a slow reveal of the holes.
                          */
     /* background:transparent url(../images/holeright4.png) repeat-y right top;
      * color: #666;
      */   
        font-family: computer2, courier new, LucidaTerminal, monospace;
        text-align: left;
        margin: 0px;
        padding: 0px 40px 0px 45px;
        border: 0px;
    }
       
    .tickertext {
        margin: 0; margin-top: -0.7em;
        line-height: 1em;
        text-shadow: 2px 2px #222;
	font-family: computer5, courier new, LucidaTerminal, monospace;
    }
     
    .tickercmd {
        margin: 0;
        line-height: 1em;
        color: #0FF;
        text-shadow: 2px 2px #222;
    }
       
    #ticker .cursor {
        display: inline-block;
        background: #565c61;
        width: 0.6em;
        text-align: center;
    }

    #ticker p {  }

    #ticker code { margin: 0.4em 0.4em; display: block; }

    #ticker .next { /* position: absolute; bottom: 1em; */ }

/* --------------------------------- Search Form ----------------------------*/
     
    .text_input {
        color:inherit;
        background-color:#000;
        border:1px dashed #0f0;
        font-family:computer1, courier new, LucidaTerminal, monospace;
    }
   
    .submit_button { /* must specify "inherit" or it pulls default colors 
	                * from somewhere else */
        color:inherit;
        background-color:inherit;
        border:solid 1px;
        font-family:computer1, courier new, LucidaTerminal, monospace;
        font-weight:bold;
    }
           
/* --------------------------------Tooltips --------------------------------*/

    a.tooltip { outline: none; }
    a span.tooltip { font-size: 0%; line-height: 0em; /* make the span zero-
                                 * sized, otherwise hovering the mouse over its 
                                 * area even when it's not showing will trigger 
                                 * it, as it's embedded in the <a> 
                                 */
        position: absolute; 
	z-index: 10; 
	opacity: 0; 
	background: #0f0; 
	color: #000; 
	transition-delay: 0s ;                         /* Occurs on mouseout */
        padding-left: 1.2em; 
	padding-right: 1em; 
	top: 2.5em; left: -1.3em;
        width: auto; 
	height: auto; 
	border-radius: 6px;
    }
    a:hover span.tooltip { 
        opacity: 1; 
	font-size: 80%; 
	line-height: 0.8em; 
	transition-delay: 1s;                             /* Occurs on hover */
    }