section is wide */
}
/* printing */
@media print
{
/*
the #headerbox div is:
position: fixed;
when print this may appear at top of every printed page
so for printing change it back to normal div defaults - only appears once
maybe hide it totally:
#headerbox { display: none !important; }
*/
#headerbox { position: static !important; }
#headerbox { top: auto !important; }
#headerbox { left: auto !important; }
#headerbox { right: auto !important; }
#controlsbox { display: none !important; }
#footerbox { display: none !important; }
/*
when printing, page break inside pre may mangle text
so for printing, avoid page break inside pre (if possible)
*/
pre { page-break-inside: avoid; }
table { page-break-inside: avoid; }
img { page-break-inside: avoid; }
div.runimgdiv { page-break-inside: avoid; }
}
/*
--- "
*/
a:link, a:visited {
color: navy ;
font-weight: bold ;
text-decoration: none ;
}
a:link:hover, a:visited:hover {
text-decoration: underline ;
}
/*
highlight link to section on page
might be nice to highlight target in yellow
but these targets are special - they use class=offsetfromtop because of fixed size header
but then yellow will be large area not small area
:target
{
border: 1px solid silver;
background-color: #ffffcc;
}
*/
select
{
padding: 3px 5px;
border-radius: 5px;
font-size: 14px;
color: midnightblue; /* darkcyan; */
background-color: white;
font-weight: bold ;
font-family:Georgia,Tw Cen MT;
/* font-family: Georgia, Verdana, "Times New Roman", Sans-serif; */
}
input
{
padding: 3px 5px;
border-radius: 5px;
font-size: 14px;
}
/* generic styling to apply to different elements */
/*
for elements that will be too wide for mobile and cannot be wrapped (like a wide table)
surround them with
and they will not impact page width, and they will get a horizontal scrollbar if needed
*/
.horizontalscroll
{
overflow-x: auto;
}
/*
force no break between elements
e.g. in a form:
label:
*/
.nobr
{
white-space: nowrap;
}
/* force word wrap / line wrap when content too wide for element */
.wraplines
{
word-wrap: break-word;
}
/* definition of big (page level) divs */
/* also used in runs - HTML div floating on top of canvas */
/*
=== Summary of how to do Three.js div background: ====================================
Pages with this effect should include:
3d.start
header
... ...
3d.controls
footer
3d.end
Pages without this effect are:
edit pages
viewjs
*/
/*
==== div id =================================================================
these divs are ids (one per page)
*/
#headerbox {
/*
background: rgba(255, 255, 255, 0.9);
*/
background: rgba(238, 255, 255, 1.0); /* eeffff */
color: black;
position: fixed; /* fixed at top, will not scroll */
top: 0 ;
left: 0; /* width is 100% */
right: 0;
/* width: 100%; */ /* right-hand border cut off, use left 0 and right 0 instead */
/*
if not width 100%:
to center a fixed position div is strange:
https://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div
no padding or it changes width calculations
width: 96%;
left: 50%;
margin-left: -48%;
*/
border: 1px solid black ;
z-index: 50; /* on top of regular divs, they scroll underneath it */
}
#controlsbox {
background: rgba(221, 221, 221, 1.0);
color: black;
max-width: 1500px;
padding: 10px;
margin: 30 auto 10 auto; /* top right bottom left */
text-align: left;
border: 2px solid gray ;
z-index: 20;
}
#footerbox {
background: rgba(255, 255, 255, 0.7);
color: black;
max-width: 1500px;
padding: 10px;
margin: 10 auto 10 auto; /* top right bottom left */
text-align: left;
border: 2px solid gray ;
z-index: 20;
}
#fullpagebox {
background-color:white;
color: black;
max-width: 95%;
margin: 30 auto;
text-align: left;
border: 2px solid black ;
padding: 30px;
z-index: 20;
}
/*
To do three.js background div:
base div (one per page):
full page three.js scene (one per page):
div to float on top of it (one per page):
multiple divs to go on top:
*/
/*
we sit them on top of a wrapper
and then we can do (position fixed, relative) relative to wrapper
http://stackoverflow.com/questions/16688545/scroll-div-over-another-div
*/
#wrapper
{
position: absolute;
height: 100%;
width: 100%;
}
#threecanvas
{
position: fixed; /* will not scroll */
height: 100%;
width: 100%;
z-index: -1 ; /* in background - can put divs in front of it */
/*
min-height: 100%;
margin: 0 auto;
border: none ;
padding: 0px;
top: 0 ;
left: 0 ;
*/
}
#threepage
{
background: rgba(255, 255, 255, 0); /* totally transparent */
position: relative; /* will scroll */
height: 100%;
width: 100%;
z-index: 10;
text-align: left; /* to position its variable-width child divs */
/*
border: none ;
padding: 0;
left: 15% ;
width: 800px;
position: absolute;
top: 0 ;
*/
}
/*
==== div class =================================================================
multiple divs per page
change padding interferes with width calculations
so to change padding use another div inside:
summary: all threeboxes are fairly narrow padding, exactly match width of header, controls, footer
to get wide padding, use another div inside, as above
*/
div.threebox {
background-color:white;
color: black;
max-width: 1500px;
padding: 10px;
border: 2px solid black ;
text-align: center; /* default is content is centred */
margin: 60 auto;
position: relative;
z-index: 20;
}
div.widepadding
{
padding: 30px;
}
/* for my own content - page-level, left-aligned text box, centred inside a threebox */
div.textthreebox
{
max-width: 1000px;
margin: auto;
text-align: left;
padding: 30px;
}
/* for my own content - smaller text box, centred inside a threebox */
div.tight-textthreebox
{
display: inline-block; /* div should fit width of content */
padding: 20px;
}
/* If JS is turned off, block the entire page */
div.fullpage-js-notice {
background-color: white;
color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20%;
text-align: center;
z-index: 300 ;
}
/*
display:flex elements
flexbox for Responsive Web Design - mobile re-sizing
*/
/* --- flex-container -------------------------------------------------------------------------------- */
/* the outer div */
.flex-container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* justify-content: space-around; */
/* justify-content: space-between; */
}
/* some common variants: */
.flex-center-bottom
{
justify-content: center;
align-items: flex-end; /* div contents aligned to bottom */
}
.flex-center-top
{
justify-content: center;
align-items: flex-start; /* div contents aligned to top */
}
.flex-center-center
{
justify-content: center;
align-items: center; /* div contents aligned to center */
}
.flex-left-top
{
justify-content: flex-start;
align-items: flex-start;
}
.flex-between-top
{
justify-content: space-between;
align-items: flex-start;
}
/* --- flex-div -------------------------------------------------------------------------------- */
/* the divs inside flex-container */
.flex-div
{
margin: 15px;
/* padding: 10px; */
/* border: thin solid silver ; */
vertical-align: bottom;
}
/* some common variants: */
.flex-text-center
{
text-align: center;
}
.flex-text-left
{
text-align: left;
}
/* --- tight flex for more cramped spaces ------------------------------------- */
/* divs have narrower spacing */
/* the whole flexbox needs a little space at top and bottom to compensate */
.flex-container-tight
{
margin-top: 5px;
margin-bottom: 5px;
}
.flex-div-tight
{
margin: 5px;
}
/* --- big action buttons ------------------------------------- */
div.bigbutton-container
{
display: flex;
margin: 0px;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
/* justify-content: space-between; */
}
/* any div inside a bigbutton-container */
div.bigbutton-container>div
{
margin: 5px;
}
/* --- course page videos and Worlds ------------------------------------- */
div.course-container
{
display: flex;
margin: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
div.course-div
{
background-color:white;
border: thin solid silver ;
margin: 20px;
padding: 0 20 20 20; /* top right bottom left */
box-shadow: 5px 5px 3px white; /* white (with white page) means shadow invisible until hover */
}
div.course-div:hover {
background: rgba(238, 255, 255, 1.0);
box-shadow: 5px 5px 3px lightgrey;
}
/* misc small things: */
/*
Styling of normal text, logo text, etc.
*/
.logo-text {
font-size: 25px;
color:midnightblue;
font-weight:bold;
font-family:Cooper Black,Bernard MT Condensed,Tw Cen MT,Georgia,Arial,verdana,century,arial narrow,impact,Tw Cen MT;
}
.tagline-text {
font-size: 16px;
color:darkcyan;
font-weight:bold;
font-family:Georgia,Tw Cen MT;
}
.normal-text {
font-size: 16px;
}
.darkredbold
{
color: darkred;
font-weight: bold ;
}
/* link variants */
a.biglink
{
color: darkred !important;
font-weight: bold !important;
font-size: larger !important; /* x-large */
}
a.main-navigation:link {
color: navy ;
font-weight: bold ;
font-family:Arial,Verdana,Sans-serif;
text-decoration: none ;
}
a.main-navigation:visited, a.main-navigation:active, a.main-navigation:focus {
color: navy ;
font-weight: bold ;
font-family:Arial,Verdana,Sans-serif;
text-decoration: none ;
}
a.main-navigation:hover {
color: navy ;
font-weight: bold ;
font-family:Arial,Verdana,Sans-serif;
text-decoration: underline ;
}
span.editheader-text
{
color: black ;
font-weight: bold ;
font-family:Arial,Verdana,Sans-serif;
}
hr.thinsilver {
margin: 5px;
border: none;
height: 1px;
background-color: silver;
}
hr.menu-separator {
margin: 10 auto;
/* width: 80%; */
border: none;
height: 1px;
background-color: silver;
}
/* --- pre for code with "copy" button (alternative to pretty pre) ---------------------------------------------------------------- */
pre.copycode
{
border: 1px solid black;
padding: 20;
}
pre.copycode:hover
{
background: rgba(221, 255, 255, 1.0);
}
/* --- spans ---------------------------------------------------------------- */
/*
alternative to etc.
*/
span.boldlarge {
font-weight: bold ;
font-size: 150%;
font-family: Georgia, Verdana, "Times New Roman", Sans-serif;
}
span.boldlarger { /* just larger than existing */
font-weight: bold ;
font-size: larger;
font-family: Georgia, Verdana, "Times New Roman", Sans-serif;
}
/*
colour highlight some words
*/
span.colorword {
color: black ;
background-color: #ffffcc ;
font-size: larger ;
font-weight: bold;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
/* menu of items on help pages */
dl.dlmenu
{
}
dl.dlmenu dd
{
margin-bottom: 20;
}
/* definition of smaller divs */
/* --- embed.php logo box ------------------------------------------- */
/* will be a div inside a parent that centres content */
div.logoembed
{
background: rgba(255, 255, 255, 0.7); /* semi-transparent */
z-index: 100; /* on top of everything */
border-radius: 20px;
border: 1px solid black ;
display: inline-block; /* div should fit width of content */
padding: 30px; /* internal padding */
text-align: center;
word-wrap: break-word; /* wrap long text */
overflow:auto; /* scroll bar if content too big (not likely) */
}
/* --- editor ---------------------------------------------------------------- */
div.editpagebox
{
/* page will define background color */
color: black ;
border: thin solid silver ;
position: relative;
max-width: 98%;
margin: 20 auto 40 auto ; /* top right bottom left */
padding: 10 0 10 10 ; /* top right bottom left */
text-align: left;
z-index: 20;
}
/* if one on page, give it this id: */
#editor {
height: 70%;
width: 98%;
font-size: 16px;
border:1px solid black;
}
/* if two on page, give them these ids: */
#worldeditor {
height: 70%;
width: 98%;
font-size: 16px;
border:1px solid black;
}
#mindeditor {
height: 70%;
width: 98%;
font-size: 16px;
border:1px solid black;
}
/* --- user-submitted content ---------------------------------------------------------------- */
/*
on pages where we display entire content (not truncated)
wrap needed for long words
*/
div.user-submitted
{
display: inline-block; /* div should fit width of content */
word-wrap: break-word;
text-align: left;
/* border: thin solid silver ; */
}
/* --- medium divs ---------------------------------------------------------------- */
/* box used on comment page */
div.commentbox {
border: thin solid silver ;
width: 75vw;
margin: 10 auto 10 auto; /* top right bottom left */
padding: 10px;
overflow: auto; /* scroll bar if content big */
}
div.commentformbox {
border: none ;
width: 75vw;
margin: 10 auto 0 auto; /* top right bottom left */
padding: none;
overflow: auto; /* scroll bar if content big */
}
/* box used around forms */
div.formbox {
background-color: #ffffdd;
border: 1px solid black ;
max-width: 75vw;
margin: 20 auto 20 auto; /* top right bottom left */
display: inline-block; /* div should fit width of content */
padding: 30px;
text-align: left;
}
/* box of text used close to a form */
div.textformbox {
border: 1px solid black ;
max-width: 75vw;
margin: 20 auto 20 auto; /* top right bottom left */
display: inline-block; /* div should fit width of content */
padding: 30px;
text-align: left;
}
/*
3 search elements in header - dropdown, input, button
maybe group them together with some surround box
*/
div.searchgroup {
/*
thin border lines
border-top: thin solid silver ;
border-radius: 5px;
padding-top: 5px;
padding: 5px 10px 5px 10px;
box-shadow: 5px 5px 3px lightgrey;
grey background color:
background: rgba(221, 221, 221, 1.0);
background-color: #e2e6e6;
#eaecec
*/
padding: 0px 20px 0px 20px;
display: inline-block;
}
/* --- small divs ---------------------------------------------------------------- */
/*
for displaying long user input, which may be all one word
must either truncate or force line wrap
the following forces line wrap
but must give it a width:
*/
div.wrapbox
{
word-wrap: break-word;
display: inline-block; /* will be positioned according to parent div text-align */
}
div.thinsilver
{
border: thin solid silver ;
padding: 10px;
display: inline-block; /* div should fit width of content */
}
/* hover effect boxes */
/*
used to group content on help / get started pages
hover makes it color
default no padding - page will decide what padding
*/
div.getstarted
{
background-color: white;
border: thin solid silver ;
margin: 20px;
}
div.getstarted:hover
{
/* yellow */
/* background: rgba(255, 255, 204, 1.0); */
/* background-color: #ffffdd; */
/* blue */
/* header is eeffff */
background-color: #eeffff; /* #ddffff; */
/* background-color: #eeeeee; */
}
/* white div, becomes some color on hover */
div.colorbox {
background-color:white;
padding: 10px;
border: thin solid silver ;
border-radius: 5px;
box-shadow: 5px 5px 3px white; /* white (with white page) means shadow invisible until hover */
}
div.colorbox:hover {
background: rgba(238, 255, 255, 1.0);
/* background: rgba(255, 255, 204, 1.0); */
/* border: 1px solid black ; */
box-shadow: 5px 5px 3px lightgrey;
}
/* small yellow notices, rounded corners, no hover effect */
div.yellow
{
border: thin solid silver ;
padding: 20px;
display: inline-block; /* div should fit width of content */
text-align: left;
border-radius: 15px;
background-color: #ffffdd;
}
div.smalltip
{
border: thin solid silver ;
margin: 5px;
padding: 5px;
display: inline-block; /* div should fit width of content */
text-align: left;
background-color: #ffffdd;
}
div.browserwarn /* warning up at top, not rounded, full width */
{
border: thin solid silver ;
padding: 5px;
text-align: center;
font-weight: bold;
background-color: #ffffdd;
}
/* alerts on login pages */
/* --- div of fixed size and position, with single inner div inside it ------------------------------------------- */
/* not normal flexbox (multiple divs) but just used for positioning of a single inner div, e.g. in popup alert */
div.innerdiv-center /* center my inner div */
{
display: flex;
justify-content: center; /* horizontal align inner div to center */
align-items: center; /* vertical center */
}
div.innerdiv-horizcenter /* horizontal center my inner div */
{
display: flex;
justify-content: center; /* horizontal center */
align-items: flex-start; /* vertical top */
}
/*
alert with lots of content (scroll bar):
if use flex align-items:center with inner div with lots of content, then on small screen it cuts off top of inner div
this is a known issue and the solution is align-items: safe center
https://www.w3.org/TR/css-align-3/#overflow-values
https://stackoverflow.com/questions/47635911/how-to-use-safe-center-with-flexbox/47636238#47636238
but this is not yet supported by many browsers
temporary solution: align-items:flex-start
works on everything but not perfect since it puts short content at top of div
*/
/* --- size for centred front alert ------------------------------------------- */
div.desktop-alert
{
left: 25%;
width: 50%;
top: 15%;
max-height: 70%;
}
div.mobile-alert
{
left: 10%;
width: 80%;
top: 10%;
max-height: 80%;
}
/* --- popup alert ------------------------------------------- */
/*
myalert is a div of fixed size on the page and fixed position
dimensions set separately via either desktop-alert or mobile-alert class
it is then a flexbox - uses innerdiv-horizcenter class - inner div is centred in it
*/
div.myalert
{
background-color:white;
border-radius: 5px;
border: 1px solid black ;
position: fixed; /* div itself does not scroll */
z-index: 100; /* on top of everything */
outline: none; /* if div gets focus for keypress, remove border */
overflow: auto; /* scroll bar if content too big */
}
div.myalert-inner /* div inside it */
{
/* border: 1px solid black ; */
/* margin: 30px; */
padding: 60px;
background: rgba(255, 255, 255, 0); /* totally transparent - to pick up change color */
text-align: center;
word-wrap: break-word; /* wrap long text */
}
div.myalert:hover {
/* background: rgba(204, 255, 255, 1.0); */ /* light blue ccffff */
background: rgba(221, 255, 255, 1.0); /* light blue ddffff */
}
/* --- full-page block, semi-transparent ------------------------------------------- */
div.fullpage-alert
{
background: rgba(169, 169, 169, 0.5);
/*
background: rgba(255, 255, 255, 0.5);
background: rgba(221, 221, 221, 0.5);
*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 90 ; /* just under the alert */
}
/* definition of runimgdivs */
/*
image you click on to do a run
should be inside (a version of) this div
styling makes the image increase in size when hover
but div overflow:hidden means div does not change size
nice "magnify" effect before click on it
*/
/*
small version - for use in lists
base width 225
base height 150
grow width 450 = 112 outside + 225 inside + 112 outside
grow height 300 = 75 outside + 150 inside + 75 outside
*/
.runimgdiv {
width: 225px;
height: 150px;
border: 1px solid silver ;
overflow: hidden;
position: relative;
}
.runimgdiv:hover {
border: 1px solid black ;
cursor: pointer;
}
.runimgdiv img {
width: 225px;
height: 150px;
opacity: 1.0;
position:absolute;
left:0px;
top:0px;
transition: all 1s ease;
}
.runimgdiv img:hover {
width: 450px;
height: 300px;
opacity: 1.0;
position:absolute;
left:-112px;
top:-75px;
}
/*
larger version - for use by itself on World, Mind page
--- pixels: ----------------------
base width 450
base height 300
grow width 900 = 225 outside + 450 inside + 225 outside
grow height 600 = 150 outside + 300 inside + 150 outside
--- percent of vw: ----------------------
the pixel version causes problems for mobile small screen
so use percentages of viewport width
https://www.w3schools.com/cssref/css_units.asp
width: 45vw
height: 30vw
note height based on vw (not vh) to keep ratio
--- percent of container: ----------------------
can't do this:
width: 45%
height: 30%
since it does not preserve ratio
could use JS to set height as fixed multiple of width
*/
.mobile-bigrunimg {
width: 45vw;
height: 30vw;
border: 1px solid silver ;
overflow: hidden;
position: relative;
}
.mobile-bigrunimg:hover {
border: 1px solid black ;
cursor: pointer;
}
.mobile-bigrunimg img {
width: 45vw;
height: 30vw;
opacity: 1.0;
position:absolute;
left:0px;
top:0px;
transition: all 1s ease;
}
.mobile-bigrunimg img:hover {
width: 90vw;
height: 60vw;
left:-22vw;
top:-15vw;
opacity: 1.0;
position:absolute;
}
/* smaller % needed on desktop */
.desktop-bigrunimg {
width: 30vw;
height: 20vw;
border: 1px solid silver ;
overflow: hidden;
position: relative;
}
.desktop-bigrunimg:hover {
border: 1px solid black ;
cursor: pointer;
}
.desktop-bigrunimg img {
width: 30vw;
height: 20vw;
opacity: 1.0;
position:absolute;
left:0px;
top:0px;
transition: all 0.5s ease;
}
.desktop-bigrunimg img:hover {
width: 45vw;
height: 30vw;
left:-7vw;
top:-5vw;
opacity: 1.0;
position:absolute;
}
/*
abandoned idea - fixed size 600 for embed iframe
base width 600
base height 400
grow width 900 = 150 outside + 600 inside + 150 outside
grow height 600 = 100 outside + 400 inside + 100 outside
*/
/*
generic embed iframe version
this works with any size iframe
inside iframe, there is a new viewport which is only the size of the iframe
so want:
base width 100vw
base height 100vh
grow width 200vw = 50vw outside + 100 inside + 50 outside
grow height 200vh = 50vh outside + 100 inside + 50 outside
(todo) maybe use 100% instead of 100vw,vh
why do we need img.mainpic?
because iframe embed is different
we may put div with img (logo box) inside this runimgdiv
*/
.iframe-runimgdiv {
width: 100vw;
height: 100vh;
border: 1px solid silver ;
overflow: hidden;
position: relative;
}
.iframe-runimgdiv:hover {
border: 1px solid black ;
cursor: pointer;
}
.iframe-runimgdiv img.mainpic {
width: 100vw;
height: 100vh;
opacity: 1.0;
position:absolute;
left:0px;
top:0px;
transition: all 1s ease;
}
.iframe-runimgdiv img.mainpic:hover {
width: 200vw;
height: 200vh;
opacity: 1.0;
position:absolute;
left:-50vw;
top:-50vh;
}
/* buttons */
/* normal or minor actions */
button.normbutton
{
padding: 3px 10px;
border-radius: 5px;
font-size: 14px;
color: white;
background-color: black; /* darkgreen; */
}
button.normbutton:hover
{
color: white;
background-color: darkcyan; /* dimgray; green; */
}
/* secondary row of buttons */
button.altbutton
{
padding: 3px 10px;
border-radius: 5px;
font-size: 14px;
color: black;
background-color: #ffffcc;
}
button.altbutton:hover
{
color: black;
background-color: #ffff88;
}
/* big or dangerous actions - save, rm, close window */
button.warnbutton
{
padding: 3px 10px;
border-radius: 5px;
font-size: 14px;
color: white;
background-color: darkred;
}
button.warnbutton:hover
{
color: white;
background-color: red;
}
/* greyed out button */
/* does nothing when hover */
button.greybutton
{
padding: 3px 10px;
border-radius: 5px;
font-size: 14px;
color: white;
background-color: dimgray;
}
/* normal - large */
button.largenormbutton
{
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
color: white;
background-color: black;
}
button.largenormbutton:hover
{
color: white;
background-color: darkcyan;
}
/* greyed out - large */
button.largegreybutton
{
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
color: white;
background-color: dimgray;
}
/* --- div/button that "throbs" - changes color and border constantly -------------- */
div.throb
{
display: inline-block; /* fit width of content */
word-wrap: break-word;
/* background-color: #ffff66; */ /* yellow */
background-color: #aaffff; /* blue */
border: 2px solid black ;
box-shadow: 5px 5px 3px darkgrey;
animation-name: throbblue;
animation-duration: 2s;
animation-iteration-count: infinite;
}
div.throb:hover
{
animation-name: throbyellow;
/* animation-play-state: paused; */
/* background-color: #ffffcc !important ; */
}
div.bigthrob /* button on its own */
{
padding: 15 40 15 40 ; /* top right bottom left */
border-radius: 10px;
}
div.smallthrob /* small, maybe on line with more text */
{
padding: 5 15 5 15 ; /* top right bottom left */
border-radius: 5px;
}
/* links within a throb */
div.throb a:hover
{
/* color: darkred !important ; */
/* text-decoration-skip-ink: none !important ; */ /* underline everything - do not skip descenders */
text-decoration: none !important ;
}
/* --- the actual throb effect ------ */
/* blue throb */
/* background is often div.getstarted which is ddffff */
@keyframes throbblue
{
0%
{
background-color: #eeffff;
border: 2px solid silver ;
box-shadow: 5px 5px 3px #ddffff;
}
25%
{
background-color: #ccffff;
border: 2px solid gray ;
box-shadow: 5px 5px 3px lightgrey;
}
50%
{
background-color: #aaffff;
border: 2px solid black ;
box-shadow: 5px 5px 3px darkgrey;
}
75%
{
background-color: #ccffff;
border: 2px solid gray ;
box-shadow: 5px 5px 3px lightgrey;
}
100%
{
background-color: #eeffff;
border: 2px solid silver ;
box-shadow: 5px 5px 3px #ddffff;
}
}
/* yellow throb */
@keyframes throbyellow
{
0%
{
background-color: #ffffdd;
border: 2px solid silver ;
box-shadow: 5px 5px 3px #ddffff;
}
25%
{
background-color: #ffff99;
border: 2px solid gray ;
box-shadow: 5px 5px 3px lightgrey;
}
50%
{
background-color: #ffff66;
border: 2px solid black ;
box-shadow: 5px 5px 3px darkgrey;
}
75%
{
background-color: #ffff99;
border: 2px solid gray ;
box-shadow: 5px 5px 3px lightgrey;
}
100%
{
background-color: #ffffdd;
border: 2px solid silver ;
box-shadow: 5px 5px 3px #ddffff;
}
}
div.worldthrob /* World div (e.g. to highlight online Socket Worlds) */
{
background-color: #ffff66;
padding: 15;
border: 2px solid black ;
box-shadow: 5px 5px 3px darkgrey;
animation-name: throbyellow;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/*
drop down menus
*/
/*
widths
use max-width
will fit to content width on large screen
max-width is basically limit for mobile
*/
/*
drop-down select menu for choosing mind