@font-face {
font-family: champ;
src: url('images/style/font-champ-bold.ttf') format('truetype');
}
:root {
--txtClr: #333;
--bgClr: hsl(0, 0%, 100%);
--bg: linear-gradient(to right, hsla(214, 100%, 90%, 100%) 0%, hsla(214, 100%, 90%, 0%) 20%, hsla(214, 100%, 90%, 0%) 50%, hsla(214, 100%, 90%, 0%) 80%, hsla(214, 100%, 90%, 100%) 100%);
/*--bg: hsl(214, 100%, 99%); */
/* your turn: #dfffe1; words: #aef;*/
--a0Clr: hsla(50, 100%, 98%, 70%); /* transparent yellow */
--a1Clr: hsl(50, 100%, 96%); /* v light yellow */
--a2Clr: hsl(50, 100%, 85%); /* light yellow */
--a3Clr: hsl(45, 100%, 77%); /* sand */
--a4Clr: hsl(50, 100%, 28%); /* gold (text) */
--b0Clr: hsla(214, 100%, 50%, 20%); /* transparent blue */
--b1Clr: hsl(214, 100%, 95%); /* v light blue */
--b2Clr: hsl(214, 100%, 84%); /* light blue */
--b3Clr: hsl(214, 65%, 46%); /* pretty blue (text) */
--b4Clr: hsl(214, 100%, 25%); /* dark blue (text) */
--o1Clr: hsl(44, 100%, 50%); /* orange (text) */
--r1Clr: hsl(0, 100%, 60%); /* red (text) */
/* rgba(var(--bClr), 0.1) */
--hdrImg: url(images/hdr/hdr-main-lite.svg);
--hdrAdvImg: url(images/hdr/hdr-adv.svg);
--h1Shadow: 2px 5px 5px hsl(0, 0%, 100%), 0px 0px 0 hsl(214, 100%, 25%);
}
@media all {
/*div {border: 1px solid red;}*/
/* https://webkul.github.io/coolhue/*/
body { margin: 0; padding: 0; font: 15px/23px Verdana, Arial, Tahoma, sans-serif; color:var(--txtClr); line-height:1.52;
}
h1 { margin: 18px 0 5px 0; font: normal 40px champ, Verdana, Arial; text-align: center; color: var(--b0Clr); text-shadow: var(--h1Shadow); }
h2 { margin: 60px 0 12px 0; font: 30px champ, Verdana; color: var(--r1Clr); }
h3 { margin: 24px 0 10px 0; font-weight: normal; font-size: 18px; color: var(--b3Clr); }
h4 { margin: 22px 0 10px 0; font-weight: normal; font-size: 19px; font-variant: small-caps; color: var(--o1Clr); }
/* a:visited { color: #600060 ; }
a:hover { color: crimson; } */
p {min-width:150px;overflow:150px;}
p:before, li:before { content:""; width:100px; display:block; overflow:hidden; }
p a { padding: 3px; border: solid 2px var(--b2Clr); border-radius: 10px; background-color: var(--b1Clr); }
p a:hover { border: solid 2px var(--a2Clr); background-color:var(--a1Clr); }
/* img { max-width:100%; } good idea for some, but distorts/shrinks others */
img[src*=".svg"] { max-width:100%; } /* NB TESTING */
/* p img[src*=".svg"] { min-height:100px; } NB TESTING */
header {}
nav {}
article { display: block; }
footer {}
.large { font-size: 19px; color: var(--a4Clr); }
.larger { font-size: 17px; color: var(--b3Clr); }
.largest { font-size: 24px; color: var(--b4Clr); }
.huge { font-weight: bold; font-size: 35px; }
/* activity */
.activity { font-size: 17px; background: var(--b1Clr) url(images/style/activity-div.gif) no-repeat; padding: 10px 4px 11px 128px; border: 1px solid #aa44aa; border-radius: 10px; margin: 35px 35px 30px 35px; }
.activity a { font-size: 17px; font-weight: normal; padding: 0; }
/* center */
.center80 { margin: 10px 40px 10px 40px; padding: 5px 8px 5px 8px; border-radius: 10px; background: var(--b1Clr); border: 2px solid var(--b2Clr);}
.center80 p { margin: 10px 0px 8px 0px; }
/* def */
.def {margin: 10px 15px 10px 15px; padding: 5px 18px 5px 18px; border-radius: 10px; background:var(--a1Clr); box-shadow: 2px 2px 4px var(--a3Clr); }
/* dotpoint */
/*.dotpoint { background-image: url(images/style/dotpoint.svg); background-repeat: no-repeat; background-position: 10px 15px; */
.dotpoint {
margin: 0 0 15px 0; padding: 4px 10px 2px 25px; color: var(--b4Clr); background-color:var(--a0Clr);
border: 2px solid var(--a2Clr); border-left: 6px solid var(--a2Clr); border-radius: 35px; }
.dotpoint, .dotpoint p { font-size: 16px; }
/* example */
.example { margin: 20px 0 30px 45px; background-color: var(--b1Clr); padding: 5px 10px 1px 10px; border-radius: 10px;
box-shadow: 4px 4px 3px var(--b4Clr); overflow:hidden; }
.example h3 { margin: 2px -2px 12px -2px; padding: 2px 8px; background: var(--a1Clr); border-radius: 8px; color: var(--txtClr) }
/* hide */
.hide { color: var(--a2Clr); background-color: var(--a2Clr); border: 1px solid var(--a3Clr); padding: 3px 15px 3px 15px; }
.hide:hover { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--a2Clr); }
/* hilite (hi deprecated) */
.hi { background-color: var(--a2Clr); border: 2px solid var(--a2Clr); }
.hilite { background-color: var(--a2Clr); }
/* fun */
.fun {margin: 0 20px 0 20px; padding: 0px 18px 0px 18px; border: 4px dotted var(--o1Clr); border-radius: 30px; background: var(--a1Clr); box-shadow: inset 0px 0px 40px var(--bgClr); }
.fun h3 { margin-top: 15px;}
/* questions */
.questions { min-height:50px; margin: 35px 35px 30px 35px; padding: 10px 4px 11px 118px; border: 1px solid var(--a3Clr); border-radius: 10px; font-size: 17px; background: var(--a1Clr) url(images/style/questions.svg) no-repeat; } /* #DFFFE1*/
.questions a { padding: 0; font-weight: normal; font-size: 17px; }
/* related */
.rel-title { font-weight: bold; font-size: 17px; }
.related { min-height:50px; border-top: 4px solid var(--b1Clr); border-bottom: 4px solid var(--b1Clr); margin-top: 10px; margin-bottom: 1px; padding-top: 12px; padding-bottom: 9px; font-weight: bold; font-size: 17px; background: url(images/style/related.svg) no-repeat; clear: none; }
.related a { display: list-item; margin-top: 2px; margin-left: 180px; font-weight: normal; font-size: 15px; list-style-type: circle; }
/* so */
.so ul { margin-top: 6px; }
li .so { padding-left: 120px; }
.so { background: url(images/style/so.svg) no-repeat 45px 25%; padding: 0px 0px 10px 100px; color: var(--b3Clr); font-size: 17px; }
p.so { margin:1px; }
/* words */
.words { margin: 15px 40px 25px 40px; padding: 10px 4px 12px 70px; border: 2px solid var(--bgClr); border-radius: 10px;
background: var(--b2Clr) url(images/style/word.svg) no-repeat; background-position: 7px 7px; box-shadow: inset 0 0 15px 0px var(--b1Clr);
border: 2px solid var(--b2Clr); }
.words p { margin: 8px 0px 5px 0px; }
/* others */
/* http://localhost/mathsisfun/divisibility-rules.html, /mathsisfun/multiplication-tips-tricks.html
.wow { font: bold 50px Verdana; color: gold; margin: 2px 30px 0px 10px; display: inline-block; float: left;
text-shadow: -2px -2px 10px orange, -2px 2px 10px orange, 2px -2px 10px orange, 2px 2px 10px red;
} */
/* mono text (for code etc) just use
/* box-shadow: 0px 0px 10px 10px white inset ;*/
.tbl { display: table; table-layout:auto; margin-right: auto; margin-left: auto; text-align: center; border-collapse:separate; border-spacing: 0 10px;
padding: 0 9px 0 9px; border-radius: 6px; }
.tbl .row { display: table-row; border: 2px solid var(--bgClr); height: 25px; }
.tbl .row .left { display: table-cell; text-align: right; padding: 0 7px 0 0; color: var(--b4Clr); font-size: 15px; vertical-align:text-top; }
.tbl .row .right { display: table-cell; text-align: left; padding: 0 0 0 7px; color: var(--b3Clr); font-size: 17px; font-weight: normal; white-space: nowrap; vertical-align:text-top; }
.tbl .row i { font-size: 14px; color: var(--txtClr); }
.tbl p { text-align: center; margin: 10px auto 10px auto; color: var(--b3Clr); width:150%; }
/* ul, ol { font-size: 15px; list-style-position: inside; }
li { padding: 0 0 5px 0px; font-size: 15px; margin:0; color: var(--b4Clr); list-style-type: disc; }
li:hover { color: var(--b3Clr); }*/
li { color: var(--b4Clr); list-style-type: disc; padding-bottom: 7px; }
li:hover { color: var(--b3Clr); }
ul.large { display: list-item; list-style: none; } /* display:inline also works but need to shift everything over more */
ul img { vertical-align: middle; border:0;}
ul.large > li { margin: 0 0 0 -20px; padding: 4px; color:var(--b2Clr); }
ul.large > li:hover { color:var(--b3Clr); }
ul.large > li > a {border: solid 2px var(--bgClr); padding: 3px; background-color: transparent; }
ul.large > li > a:hover { padding: 3px; border: solid 2px var(--a2Clr); background-color:var(--a0Clr); }
/* summary */
ul.larger > li { font-size: 16px; margin: 15px 0 0 -10px; padding-left: 10px; color: var(--b4Clr); background-color: var(--b1Clr); list-style-type:disc; border-radius: 10px; }
ul.larger > li:hover { background-color: var(--b2Clr); }
ul.larger > li > p {font-size: 15px; color: var(--txtClr); }
ul.larger > li > ul {font-size: 15px; color: var(--txtClr); margin-top: 3px; }
ul.larger > li > ul > li {font-size: 15px; margin: 5px 0 -7px 0; }
#bodybg { background: var(--bg); }
.bg { height: 300px; }
/* #hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrImg) no-repeat fixed center top; } */
#hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: url(images/hdr/hdr-main-lite.svg) no-repeat fixed center top; }
/* .adv #hdr { position: absolute; top: 0; margin: auto; z-index: -1; background: var(--hdrAdvImg) no-repeat fixed center top; } */
.adv #hdr { position: absolute; top: 0; margin: auto; z-index: -1; background: url(images/hdr/hdr-adv.svg) no-repeat fixed center top; }
.center { text-align: center; }
/**/
#adTop { width: 728px; height: 45px; }
#adTopOuter { width: 728px; height: 45px; text-align: center; margin: 0 auto 15px auto; }
#adHide { position: absolute; left: 50%; top: 60px; margin-left: 380px; text-align: center; font: 14px Verdana; background: var(--a0Clr); }
#hideAds1 { display: inline; }
#showAds1 { display: none; }
#logo { position: absolute; right: 50%; margin-right: 260px; top:100px; width:100px; }
#gtran { position: absolute; left: 50%; top: 32px; margin-left: 300px; }
#gplus { position: absolute; left: 50%; top: 35px; margin-left: 250px; }
#linkto { max-width: 760px; height: 35px; text-align: center; margin: 0px auto 5px auto; }
#linktort { float: right; margin-right: -20px; }
#advText {position: absolute; right: 50%; top: 160px; margin-right: 220px; font: italic 27px Verdana; color: var(--b4Clr); text-shadow: var(--h1Shadow);}
/* search */
#search { max-width: 760px; height: 48px; text-align: center; margin: 25px auto 0 auto; }
#searchFld { width: 260px; margin: 0; padding: 4px; border-radius: 5px; font-size: 18px; background-color: var(--a0Clr); }
#searchFld:hover { background-color: var(--a1Clr); }
#searchBtn { width: 48px; height: 48px; vertical-align: middle; margin-bottom: 10px; border: 1px solid var(--b4Clr); border-radius: 5px; background: var(--a0Clr) url(images/style/search.svg) no-repeat; cursor: pointer; }
#searchBtn:hover { background-color: var(--a1Clr); }
#extra { max-width: 760px; height: 0; margin: 0 auto 0 auto; }
.centerfull { max-width: 760px; text-align: center; margin-right: auto; margin-left: auto; }
#content { max-width: 760px; text-align: left; margin: -65px auto 15px auto; }
/* menu */
#menuWide { display: block; }
#menuSlim { display: none; }
#menuTiny { display: none; }
.menu { max-width: 760px; height: 40px; text-align: center; margin: 0px auto 5px auto; }
.menu ul { display: inline; margin: 0; padding: 0; font-size: 0; }
.menu li { display: inline-block; position: relative; margin: 0; padding: 6px 0 6px 0; border: 1px solid var(--bgClr); background-color: var(--b0Clr); backdrop-filter: blur(1px); }
.menu li:hover { background-color: var(--a1Clr); }
.menu li:before { content: none; }
.menu li a { font-size: 14px; text-decoration: none; padding: 7px 7px 5px 7px; height:25px; color: var(--txtClr);}
.menu li ul { display: block; position: absolute; right: 0px; top: 27px; z-index: 1; }
.menu li li { display: block; background-color: var(--b1Clr); }
.menu ul ul { display: none; }
.menu ul li:hover > ul { display: block; }
/* https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ */
#linkfb, #linktw, #linkpi, #linkgp, #linkem, #linkus, #linkli { display: block; width: 33px; height: 32px; float: left; margin-right: 6px; text-indent: -9999px; background: transparent url(images/style/links3.svg) no-repeat; }
#linkfb { background-position: 0px 0px; }
#linktw { background-position: -50px 0px; }
#linkpi { background-position: -100px 0px; }
#linkgp { background-position: -150px 0px; }
#linkem { background-position: -250px 0px; }
#linkus { background-position: -300px 0px; width: 50px; }
#linkli { background-position: -350px 0px; }
/* Related left right */
.menuLt, #menuLt { display: table-cell; width: 110px; height: 60px; vertical-align: middle; padding: 0 0 0 25px; text-decoration: none; background: transparent url("images/style/arrow-tall-left.svg") no-repeat left center; }
.menuRt, #menuRt { display: table-cell; width: 110px; height: 60px; vertical-align: middle; padding: 0 25px 0 0; text-decoration: none; background: transparent url("images/style/arrow-tall-right.svg") no-repeat right center; }
/* ad .mathsisfunresp { width: 728px; height: 90px; }*/
/* Footer
#footLinks { max-width: 550px; height: 50px; margin-right: auto; margin-left: auto; }
.footFriend a { display: block; width: 152px; height: 50px; float: left; background: url(images/style/footer.jpg) no-repeat -105px 0; }
.footFriend a:hover { background-position: -105px -50px; }
.footFave a { display: block; width: 188px; height: 50px; float: left; background: url(images/style/footer.jpg) no-repeat -257px 0; }
.footFave a:hover { background-position: -257px -50px; }
.footLink a { display: block; width: 205px; height: 50px; float: left; background: url(images/style/footer.jpg) no-repeat -445px 0; }
.footLink a:hover { background-position: -445px -50px; }*/
#footMenu { max-width: 760px; margin: auto; }
#copyrt { margin: 10px auto 0 auto; text-align: center; font: 14px Arial; color: var(--o1Clr); }
.simple { overflow:auto; }
.simple table { border-collapse: collapse; background: var(--b1Clr); }
.simple .tbl { background: var(--b1Clr); padding-left: 6px; padding-right: 6px; border-radius: 5px;}
.simple th, .simple td { border: solid 2px var(--bgClr); padding: 5px; }
.simple th { background: var(--b2Clr); }
.beach { overflow:auto; }
.beach table { border-collapse: collapse; background: var(--a2Clr); }
.beach th, .beach td { border: solid 2px var(--bgClr); padding: 4px; }
.beach th { background: var(--b1Clr); }
/*.box { display: inline-block; vertical-align: top; margin: 0 10px 15px 10px; } rgba(var(--b3Clr), 0.2) */
/*
.example { margin: 20px 0 30px 45px; background-color: var(--b1Clr); padding: 5px 10px 1px 10px; border-radius: 10px; box-shadow: 4px 4px 3px var(--b3Clr); overflow:hidden; }
.example h3 { margin: 2px -2px 12px -2px; padding: 2px 8px; background: var(--a1Clr); border-radius: 8px; color: var(--txtClr); }
*/
/* .example h3:before { content:""; width:100px; height:100px; float:left; margin: 2px -2px 12px -2px; background: white; border-radius: 8px; }*/
/* in-line "table" fractions */
.intbl { display: inline-table; text-align: center; vertical-align: 40%; margin: 0 2px 0 2px; border-collapse: collapse; }
.intbl em { display: table-row; text-align: center; border-bottom: solid var(--txtClr) 1px; font-size: 93%; font-style: inherit; line-height: 130%;}
.intbl strong { display: table-row; text-align: center; font-weight: inherit; font-size: 93%; line-height: 110%; }
.intbl em:before, .intbl em:after, .intbl strong:before, .intbl strong:after { content: "\2005"; } /* 2005=unicode 1/4 em space */
sup .intbl em { line-height: 100%; }
sup .intbl strong { line-height: 100%; }
.times { font: bold 130% "Times New Roman", serif; }
/* JavaScript sliders */
input[type=range] {
padding-top:2px; padding-bottom:2px;
}
input[type=range]::-ms-tooltip {
display: none;
}
input[type=range]::-ms-fill-lower {
background: var(--b4Clr);
border-radius: 20px;
}
input[type=range]::-ms-fill-upper {
background: var(--b2Clr);
border-radius: 20px;
}
input[type=range]::-ms-thumb {
border: none;
height: 36px;
width: 16px;
border-radius: 50%;
background: var(--o1Clr);
}
input[type=range]::-moz-range-track {
height: 15px;
background: var(--b3Clr);
border: none;
border-radius: 9px;
}
}
@media (max-width: 810px) {
#gtran { display:none; }
#adHide { display:none; }
}
@media (max-width: 600px) {
h1 { text-align: center; margin-top: 5px; font: normal 32px champ, Verdana; }
/*.bg { width: 100%; height: 350px; margin: auto; background: url(images/style/hdr-lg.jpg) no-repeat fixed center top; }*/
#bodybg { background: none; }
/*.bg { width: 100%; height: 250px; margin: auto; background: white url(images/style/hdr-lg.jpg) no-repeat fixed center top; }*/
/* menu /photos/150/101/P1010938.jpg */
#search { display: none; height: 40px; margin: 160px auto 0px auto; text-align: center; }
#showSearch { width: 48px; height: 48px; background: url(images/style/search.svg) no-repeat; cursor: pointer; }
#gtran { display:block; position: absolute; left: auto; right: 0; top: 105px; margin-left: 0px; }
#linkto { position: absolute; right: 0; top: 169px; background: none; z-index: 100; }
#linktort { float: right; margin-right: 0; }
#linkus { display:none; }
#menuWide { display: none; }
#menuSlim { display: none; position: absolute; left:5px; top: 220px; }
#menuTiny { display: block; position: absolute; left: 0; top: 158px; width: 100%; height: 55px; text-align: left; margin: 0; background-color: rgba(55, 245, 255, 0.5); }
/* backdrop-filter: blur(1px); */
.menu li { background-color: var(--b0Clr); }
#gplus { display: none; }
#logo { position: absolute; left: 0; top: 80px; }
#advText {position: absolute; left: 100px; top: 125px; margin: auto;}
#content { margin: -45px auto 15px auto; background: none; }
/* ad */
.mathsisfunresp { width: 320px; height: 50px; }
#adTopOuter { width: 322px; height: 62px; }
#adTop { width: 320px; height: 50px; }
#footMenu { clear: both; }
/**/
.example { margin: 20px 0 30px 20px; }
/*
.related { padding-top: 50px; }
.related a { margin-left: 90px; }*/
.menuLt { display: none; }
.menuRt { display: none; }
#menuLt { display: none; }
#menuRt { display: none; }
.center80 { margin: 10px 10px 10px 10px; padding: 5px 8px 5px 8px; border-radius: 10px; }
.center80 p { margin: 10px 0px 8px 0px; }
.def {padding: 3px 10px 3px 10px; }
}
@supports (-ms-ime-align:auto) { /* Edge */
h1 {font: normal 28px Verdana, Arial; color:var(--txtClr); text-shadow: none;}
}
/*@media screen\0 { IE only hack */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10 and 11 */
h1 {font: normal 28px Verdana, Arial; color:var(--b4Clr); text-shadow: none;}
}
@media print {
#logo { position: absolute; left: 0; top: 0; }
#hdr {display: none;}
#adTop {display: none;}
#adend {display: none;}
#footer {display: none;}
#gtran {display: none; }
#gplus {display: none; }
#adhide {display: none; }
#hideAds1 { display: none; }
#showAds1 { display: none; }
#linkto { display: none;}
#linktort {display: none;}
#menuWide { display: none; }
#menuSlim { display: none; }
#menuTiny { display: none; }
#search { display: none; }
.related { display: none; }
.menuLt { display: none; }
.menuRt { display: none; }
#menuLt { display: none; }
#menuRt { display: none; }
#advText { display: none; }
.bg { height: 100px; }
#bodybg { background: none; }
h1 {color: var(--b4Clr); }
}
/*:root {
--data-theme: dark;
}*/
/*
:root[data-theme="dark"] {
@media (prefers-color-scheme: dark) { */
/* :root {*/