@charset "utf-8";

body {
    font-family:arial;
    color: white;
    background-image: url(bg3.jpg);
    background-attachment: fixed;
	background-color: rgb(10,10,10);
    position: absolute;
    width: 100%;
	margin: 0;
}

button {
	background-color: white;
}
a {
	color: yellow;
}
p {
	width: 80%;
	margin: 0 10%;
}

.nav {
    width: 100%;
	display: inline-block;
    margin: 0;
	position: fixed;
	z-index: 1;
}
.nav a {
	text-decoration: none;
	color: rgba(200,200,200,0.8);
	transition: 0.3s;
}
.nav a:hover, .nav a:active {
	color: rgba(250,100,250,1);
}
.nav table {
	width: 100%;
	height: 70px;
}
.nav td {
	text-align: center;
	background-color: black;
	width: 16%;
	border-left: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0px 3px 3px black;
	letter-spacing: 2px;
	transition: 0.3s;
	padding: 0 10px;
	cursor: pointer;
}
.nav td:hover, .nav td:active {
	transform: scale(1.1, 1.1);
	background-color: rgb(60,110,60);
}
.nav td:hover a {
	color: rgba(250,250,250,1);
}

.content {
	margin-top: 75px;
	font-size: 1.1em;
}

.footer {
	padding: 30px 0;
}

.programming {
	margin-left: 18%;
	width: 82%;
	display: inline-block;
	padding-top: 20px;
	text-align: center;
}

#programming_side {
	left: 0;
	width: 18%;
	display: inline-block;
	position: fixed;
    direction: rtl;
    height: calc(100% - 75px);
    background-color: rgba(0,0,0,0.35);
    overflow-y: scroll;
	scrollbar-color: black silver;
	border-right: 3px solid rgba(150,150,150,0.5);
}
#programming_side ul {
    padding: 0 20px;
}
#programming_side li {
	text-align: right;
	text-decoration: none;
	list-style-type: none;
}
#programming_side li p {
	color: springgreen;
    margin-top: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(150,150,150,0.5);
}
.p_item {
    letter-spacing: 1px;
    color: silver;
    padding: 5px 20px 10px 20px;
    margin: 15px 0;
	border-right: 3px solid silver;
    transition: 0.3s;
	cursor: pointer;
	font-size: 0.9em;
	border-bottom: 1px solid rgba(100,100,100,0.2);
}
.p_item:hover {
    color: pink;
	border-right: 5px solid pink;
    padding-right: 10px;
	padding-left: 28px;
}
.smallNotes {
    color: springgreen;
}

.codelink, .codelink_spe, .codelink_ext {
	color: springgreen;
	padding: 5px;
	border-radius: 5px;
	transition: 0.3s;
	border: 1px solid dimgray;
}
.codelink_spe {
	color: yellow;
	white-space: nowrap;
}
.codelink_ext {
	color: rgb(230,230,230);
}
.codelink:hover, .codelink_spe:hover, .codelink_ext:hover {
	background-color: dimgray;
}
.codelinks {
	margin: 0 15%;
	width: 70%;
	line-height: 220%;
}

.codelink_github {
	color: springgreen;
	padding: 5px;
	border-radius: 5px;
	transition: 0.3s;
	border: 1px solid dimgray;
}
.codelink:hover {
	background-color: dimgray;
}

#pixelcanvas {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding: 0 30px;
}

#colorgrid {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
}

#compoundint {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
}

#timeapplet {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	padding-bottom: 50px;
}

#additiontest {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#temperaturerange {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#runningRate {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#localstorage {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#timer {
    text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#stopwatch {
    text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#lottery {
	text-align: center;
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#utility {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#clickapp {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
}

#rng {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#factoring {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#infverb {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#daysleft {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#gamepaddemo {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#age {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
	padding-bottom: 50px;
}

#reflextest {
	border-top: 10px solid rgba(150,150,150,0.8);
	background-attachment: fixed;
}

h1, h2, h3, .content {
	text-align: center;
}

/* additiontest.css */

#additiontest {
	width: 100%;
}

#header {
	letter-spacing: 1px;
}

#start {
	text-align: center;
	margin-left: 40%;
	margin-right: 40%;
	width: 20%;
	height: 10%;
	font-size: 2em;
	padding-top: 10px;
	padding-bottom: 10px;
}

#soln {
	text-align: center;
	margin-left: 40%;
	margin-right: 40%;
	width: 20%;
	font-size: 1.1em;
	padding: 10px 0;
	margin-bottom: 30px;
}

#addanswer {
	margin-bottom: 50px;
	font-size:3em;
	width: 20%;
	text-align: center;
}

#time {
	font-size: 1em;
}

#additives {
	font-size: 3em;
	display: none;
}

.additionprob {
	display: inline-block;
	width: 70%;
}

/* temprange.css */

#tempRange_temp_range {
	width: 50%;
}

/* runningRate.css */

.runningRateTextInput {
	padding: 5px;
	font-size: 1.2em;
	border-radius: 5px;
	width: 100px;
	transition-property: background-color;
	transition: 300ms;
}
#runningRateInputs {
	padding-top: 50px;
	padding-bottom: 50px;
	border-top: 1px solid rgb(200,200,200);
	border-bottom: 1px solid rgb(200,200,200);
}
#runningRateResultDetail, #runningRateKmResult, #runningRateMiResult {
	color: springgreen;
}
#runningRateResultDetail {
	margin-top: 20px;
}
#runningRateKmResult, #runningRateMiResult {
	font-size: 1.5em;
	margin-top: 10px;
	margin-bottom: 10px;
}

.runningRateSpaceLeft {
	margin-left: 20px;
}
.runningRateSpaceTop {
	margin-top: 10px;
}

/* age.css */

#daysdiff {
    font-size: 1.5em;
    font-weight: bold;
}

#age button {
	padding: 10px;
	border-radius: 5px;
	font-size: 1.2em;
	margin-bottom: 50px;
}

#age input {
	padding: 5px;
	font-size: 1.2em;
	border-radius: 5px;
	width: 100px;
	margin-bottom: 10px;
}

.ageoutput {
	font-size: 1.5em;
}

#ageyear, #agemonth, #ageday {
	text-align: center;
}

/* clicktest.css */

#clickapp {
	padding-bottom: 50px;
}

#clickcounter {
	margin: 0;
	font-size: 1.5em;
	padding-bottom: 20px;
	}
#clock {
	margin: 0;
	font-size: 1.5em;
	}

#startclick {
	font-weight: bold;
	font-size: 2em;
	height: 100px;
	width: 200px;
	background-color: AliceBlue;
	border-radius: 10px;
	}
	
#resetclick {
	display: none;
	font-weight: bold;
	width: 200px;
	background-color: AliceBlue;
	border-radius: 10px;
	padding: 5px, 5px, 5px, 5px;
	font-size: 1em;
	}

/* colorgrid.css */

#colorgrid {
	width: 100%;
	display: inline-block;
}

.options {
	margin-left: 30%;
	margin-right:0%;
	width: 10%;
	text-align: left;
	float: left;
	display: inline-block;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid silver;
}

.reset:hover, #cycle:hover, #clearcycle:hover, #fastcycle:hover, #fastclearcycle:hover, #cascade:hover, #cascadecycle:hover {
    color: pink;
}

.cycle_option, .fastcycle_option, .cascade_option {
    display: flex;
	width: 100%;
}
.reset, #cycle, #clearcycle, #fastcycle, #fastclearcycle, #cascade, #cascadecycle {
    padding: 10px 10px 10px 10px;
    margin: 0;
	cursor: pointer;
	width: 100%;
	transition: 0.2s;
}

.grid {
    width: 30%;
	margin-bottom: 5%;
    margin-left: 0%;
    margin-right: 20%;
    text-align: center;
    display: inline-block;
}

.grid1, .grid2, .grid3, .grid4, .grid5 {
    display: flex;
}

#square1, #square2, #square3, #square4, #square5, #square6, #square7, #square8, #square9, #square10, #square11, #square12, #square13, #square14, #square15, #square16, #square17, #square18, #square19, #square20, #square21, #square22, #square23, #square24, #square25 {
    margin: 2px;
    width: 80px;
    height: 80px;
    background-color: white;
}

/* compoundint.css */

#compoundint input {
	margin: 5px 0 25px 0;
	text-align: center;
	padding: 2px 0 2px 0;
	font-size: 1.2em;
}

#compoundint button {
	margin: none;
	padding: 10px;
	border-radius: 3px;
	text-align: center;
	margin: 20px 45% 20px 45%;
	width: 10%;
	font-size: 1.1em;
}

#ciTableRow {
	width: 60%;
	margin: 0 20% 0% 20%;
	border-collapse: collapse;
	text-align: center;
}

#ciTableRow td {
	border: 1px solid silver;
	padding: 5px;
}

#ciTableRow th {
	font-weight; bold;
	background-color: darkslategray;
	color: white;
	padding: 7px 0 7px 0;
}

#ciTableRow tr:nth-child(even) {
	background-color: rgb(230,230,230);
	color: black;
}

#ciTableRow tr:nth-child(odd) {
	background-color: rgb(250,250,250);
	color: black;
}

#ciTableRow tr:hover {
	background-color: rgb(200,200,200);
	color:black;
}

/* daysleft.css */

.daysleftoutput {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	border-collapse: collapse;
}
.daysleftoutput p, h1, h3, h5 {
	margin-left: 10%;
	margin-right: 10%;
}

.a_0101, .a_0214, .a_0401, .a_0704, .a_1031, .a_1111 , .a_1126, .a_1225 {
	background: linear-gradient(rgb(0,150,100), rgb(20,100,80));
	border: 2px solid rgba(250,250,250,0.7);
	text-align: center;
	width: 25%;
	height: auto;
}

/* gamepaddemo.css */

#GPactiveInput {
	display: block;
	height: 1em;
	width: 30%;
	margin: auto;
	padding: 20px;
	font-size: 3em;
	color: rgb(200,200,200);
	background-color: rgb(50,50,50);
	border: 3px solid rgb(20,20,20);
}

#GPinputSequence {
	font-size: 20px;
	background-color: rgb(100,100,100);
	width: 80%;
	margin: 0 10%;
	height: auto;
	border-radius: 5px;
	padding: 10px;
}

/* infverb.css */

#infverb {
	clear: both;
	width: 100%;
	text-align: center;
	}
	
#infverb table {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

#infverb th {
	font-weight: bold;
	font-style: italic;
	padding: 5px 10px 5px 10px;
}
	
#infverb td {
	text-align: center;
	padding: 5px 10px 5px 10px;
}

#infverb input {
	height: 30px;
	width: 200px;
	font-strength: bold;
	font-size: 1.2em;
	text-align: center;
}


#conjbutton {
	height: 30px;
	margin-top: 5px;
	margin-left: 10px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: white;
}

#randbutton {
	height: 30px;
	margin-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: aliceblue;
}

#leftcol {
    font-weight: bold;
}

#sample {
    font-size: 0.7em;
}

/* localstorage.css */

#localstorage button, #lsclear {
	padding: 10px;
	border-radius: 5px;
	font-size: 1.2em;
	margin-bottom: 50px;
	text-align: center;
}

#lskey {
	margin-right: 20px;
}

#localstorage input {
	padding: 5px;
	font-size: 1.2em;
	border-radius: 5px;
	width: 100px;
	margin-bottom: 50px;
	transition-property: background-color;
	transition: 300ms;
}

#localstorage input:focus {
	background-color: rgb(230,230,230);
}

#localstorage table {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
}

#localstorage td {
	width: 50%;
}

#localstorage th {
	background-color: silver;
	color: rgb(50,50,50);
	padding: 5px;
}

#localstorage caption {
	padding: 5px;
}

/* lottery.css */

#lottery h4 {
    padding-left: 30px;
    font-size: 0.8em;
}

#lottery h2 {
    padding-left: 30px;
    border-left: 1px rgba(0,0,0,0.2);
}

#lottery button {
    padding: 10px;
    background-color: AliceBlue;
    border-radius: 20px;
	font-size: 1.2em;
}

#spend, #winning {
    font-weight: bold;
    text-decoration: underline;
}

/* pixelcanvas.css */

#pixcanvas table {
	border-collapse: collapse;
	margin: auto;
	width-max: 60%;
}

#pixcanvas td {
	width:20px;
	height:20px;
	border: 1px solid gray;
	background-color: white;
}
#pixcanvas table {
	border: 2px solid rgba(200,200,200,0.2);
}

#pixpalette {
	margin: auto;
	margin-bottom: 10px;
	display: inline-block;
}
#pixcolors {
	margin-top: 10px;
	display: inline-block;
}

.pixcolor {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin: 10px 6px 10px 0px;
	border: 1px solid silver;
	display: inline-block;
	cursor: pointer;
}

#pixactive {
	width: 30px;
	height: 30px;
	background-color: rgb(0,0,0);
	margin-right: 20px;
	border-radius: 8px;
	border: 2px solid springgreen;
	display: inline-block;
}

#canvasreset {
	padding: 5px;
	margin: 20px 10px 20px 0;
	background-color: rgba(0,0,0,0);
	color: silver;
	border: 1px solid silver;
	cursor: pointer;
}

/* randomcolor.css */

#randomcolortest {
	border-top: 20px solid white;
	border-bottom: 20px solid white;
	background-color: black;
	text-shadow: 1px 1px 1px black;
	padding-top: 50px;
}

.word h1 {
    padding-top: 10%;
    padding-bottom: 10%;
}
.word:hover {
    cursor: pointer;
}

#num {
	padding-bottom: 30px;
	margin: 0;
}

/* reflextest.css */

#reflextest {
	background-color: white;
	color: black;
	font-family: arial;
	letter-spacing: 1px;
	padding-bottom: 50px;
	}
	
#reflextest button {
	font-size: 1.5em;
	font-weight: bold;
	height: 75px;
	width: 20%;
	margin-left: 40%;
	margin-right: 40%;
}

#reflextime {
	text-align: center;
	display: none;
}

#reflexstart {
	margin-top: 0px;
}

#reflexstop {
	margin-top: 0px;
	display: none;
}

#reflexreset {
	display: none;
}

#reflextest mark {
	font-size: 1.5em;
	text-decoration: underline; 
}

/* rng.css */

#rng button {
	padding: 10px;
	font-size: 1em;
	margin-left: 20px;
	margin-right: 20px;
}

#rngnum h1 {
	font-size: 2em;
	text-decoration: underline;
}

/* stopwatch.css */

#stopwatch button {
	padding: 10px;
	border-radius: 5px;
	font-size: 1.2em;
	margin-bottom: 50px;
}

#stopwatch span {
    font-weight: bold;
}

#swStartBtn, #swRecordBtn, #swPauseBtn, #swRestartBtn {
    margin: 20px 10px;
}

#swTime {
    font-size: 2em;
}

#swTimePoints table {
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	text-align: center;
    margin-bottom: 50px;
}

.swTimeCount {
	width: 30%;
    color: aqua;
}

#swTimePoints td {
    padding: 3px;
    font-size: 1.2em;
}

#swTimePoints caption {
	padding: 5px;
    font-size: 1.5em;
}

.swJS {
    color: springgreen;
    margin: 8px;
}

.swNote {
    color: silver;
}

/* timeapplet.css */

#timeapplet {
	font-weight: bold;
}

#timeapplet div {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* timer.css */

#timer button {
	padding: 10px;
	border-radius: 5px;
	font-size: 1.2em;
	margin-bottom: 50px;
}

#timer input {
	padding: 5px;
	font-size: 1.2em;
	border-radius: 5px;
	width: 100px;
	margin-bottom: 10px;
    margin-top: 20px;
}

#timer span {
    font-weight: bold;
}

#startTimer, #stopTimer, #resumeTimer, #restartTimer {
    margin-top: 20px;
}

#timerTime {
    font-size: 2em;
}

.timerJS {
    color: springgreen;
    margin: 8px;
}

.timerNote {
    color: silver;
}

/* utility.css */

#utility .main {
	text-align: center;
	width:95%;
}

#utility .app1 {
	color: white;
	height: auto;
	display: inline-block;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

#utility button {
	cursor: pointer;
	border: 1px solid black;
	border-radius: 5px;
}

#utility .column1, #utility .column2, #utility .column3, #utility .column4 {
	color: white;
	padding: 10px 0 10px 0;
	position: relative;
	float: left;
	width: 25%;
}

#utility .column1 button, #utility .column2 button, #utility .column3 button, #utility .column4 button {
	font-size: 1.1em;
	padding: 10px;
}

#utility .column1 input, #utility .column2 input, #utility .column3 input, #utility .column4 input {
	font-size: 1.1em;
	margin-bottom: 5px;
	width: 85%;
}

#utility .strings {
	color: white;
	padding: 10px;
	width: 80%;
	display: inline-block;
}

#utility .fizzbizz {
	display: inline-block;
	width: 80%;
}

#utility .fizzleft {
	color: white;
}

#utility .fizzleft button {
	padding: 10px;
	font-size: 1.2em;
	background-color: Aliceblue;
	border-radius: 10px;
}

#utility .test {
	color: white;
	background-color: rgba(0,0,0,0.9);
	border: 3px solid rgba(0,0,0,0.2);
	margin-left: 12%;
	margin-right: 12%;
	width: 70%;
	opacity: 0.95;
}