/* 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 , 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
*/
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 */
}