.nav {
	#background-color: #2d4db5;
	border: 2px solid #7088ff;
	font-family: helvetica;
	font-size: 19px;
	padding: 2px;
	margin-bottom: 1px;
}

.nav a:link, .nav a:visited {
	color: #000000;
}

.nav a:hover {
	color: #e300a3;
}

header {
	font-family: helvetica;
	font-size: 30px;
	text-align: center;
	color: #ffffff;
	background-color: #000000;
	padding: 1px;
}


li a {
	color: green;
}

body {
	/*background: white url("images/grub.76208ded8029.png") repeat;*/
	//background-color: #dbe1f4;
	background-color: #ffffff;
	margin: auto;
	overflow: scroll;
}

.row {
	//content: "";
	//clear: both;
	display: table;
	//background-color: #6202b0;
	width:378px;
	margin: auto;
	margin-bottom: 5px;
	margin-top: 3px;
	padding: 0;
	border: 3px solid #000000;
	border-radius: 2px;
}

.rowWin {
	//content: "";
	//clear: both;
	display: table;
	#background-color: #6202b0;
	width:378px;
	margin: auto;
	margin-bottom: 5px;
	margin-top: 3px;
	padding: 0;
	border: 3px solid #d06ff2;
	#border: 3px solid #000000;
	border-radius: 2px;
}


.column {
	background-color: #6202b0;
	float: left;
	width: 124px;

	height: 124px;

	#padding: 0;
	margin: auto;
	position: relative;
	border: 1px solid #1a0149;
}

.blanko {
	background-color: #380162;
	float: left;
	width: 124px;
	#width: 33.33%;
	height: 124px;
	#height: 33.33%;
	#padding: 0;
	margin: auto;
	position: relative;
	border: 1px solid #1a0149;
}

.spu2{
	position: absolute;
	top: 52%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: -13.5%;
	margin-right: 13.5%;
	font-family: helvetica;	
}


.numbers .column {
	color: #eeee00;
	font-size: 50px;
} 

.numbers2 .column {
	color: #eeee00;
	font-size: 50px;
} 

.spu{
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: 40%;
	margin-right: 40%;
	font-family: helvetica;	
}

a .column {
	padding: 0;
	margin: 0;
	//width: 33.33%;
	#position: absolute;
	#top: 50%;
	#-ms-transform: translateY(-50%);
	#transform: translateY(-50%);
	text-decoration: none;
	color: #eeee00;

}

.numbers .column:hover {
	#opacity: 0.8;
	#height: 100%;
	#width: 100%;
	color: #6202b0;
	background-color: #eeee00;
	text-decoration: none;
}


.score {
	margin: auto;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}

.missingPiece {
	margin: auto;
	text-align: center;
	font-family: helvetica;
	text-decoration: none;
}

.missingPiece a {
	text-decoration: none;
}

#missingPiece {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 62px;
	height: 62px;
	color: #eeee00;
	background-color: #6202b0;
	border: 2px solid #1a0149;
	font-size: 32px;
	position: relative;
	font-family: helvetica;
}

#saveScore {
	display: none;
	//margin-top: 5px;
	background-color: #eeee00;
}

#scoreBoard {
	display: none;
	border: 3px solid #1a4da9;
	border-radius: 2px;
	margin: auto;
	text-align: center;
	position: fixed;
	/*float: left;
	float: right;*/
	left: 10%;
	right:10%;
	/*width: 380px;*/
	top: 5%;
	z-index: 10;
	//background-color: #ffffff;
	background-color: #dbe1f4;
	padding: 4px;
	padding-bottom: 20px;
	/*padding-left: 5px;
	padding-right: 5px;*/
}

#top10 {
	font-size: 20px;
	margin-bottom: 5px;
}

#gameOptions {
	display: block;
	font-family: helvetica;
}

/*#gameOptions a {
	text-decoration: none;
}*/

fieldset {
	border-width: 0;
}

.scoreLeft {
	font-size: 12px; 
	width: 25%; 
	float: left;
	text-align: center;
}

.scoreMidL {
	font-size: 12px; 
	width: 25%;
	text-align: center;
	float: left;
}

.scoreMidR {
	font-size: 12px; 
	width: 25%;
	text-align: center;
	float: left;
}

.scoreRight {
	font-size: 12px; 
	width: 25%;
	float: left;	
	text-align: center;
	/*padding-right: 2%;*/
 }

form fieldset p {
	margin-top: 0;
	margin-bottom: 4px;
}

/*form fieldset input {
	margin-bottom: 0;
}*/

fieldset {
	padding: 4px;
}

#small {
	display: none;
}

.pad {
	font-size: 50px;
	font-family: helvetica;
	color: #eeee00;
	background-color: #6202b0;
	padding: 35px 10px;
	border-radius: 5px;
	border: 3px solid #000000;
	border-radius: 2px;
	text-align: center;
	margin: auto;
	margin-top: 10px;
	width: 70%;
	
}

a:link {
	text-decoration: none;
}







/* Spelling Police */

body {
	min-width: 316px;
}

.the_tweets {
	#text-decoration: none;
	#font-weight: bold;
	#margin-bottom: 1px;
	#margin-top: 1px;
	padding: 10px;
	//font-family: "Fredoka", sans-serif;
	//font-family: "Zilla SLab", serif;
	font-family: "Space Mono", monospace;
}

.the_tweets a:link {
	color: #000000;
	font-size: 15px;
}

#tweet1, #tweet3, #tweet5 {
	background-color: #ffffe6;
	#border-left: 5px solid #1e00a6;
	#border-top: 1px solid #1e00a6;
	#border-bottom: 2px solid #1e00a6;
	
}

#tweet2, #tweet4 {
	background-color: #1e00a6;
	#border-right: 5px solid #ffffe6;
	#border-top: 1px solid #1e00a6;
	#border-bottom: 2px solid #1e00a6;
}

#tweet2 a:link, #tweet4 a:link, 
#tweet2 a:visited, #tweet4 a:visited {
	color: #ffffe6;
}

#tweet1 a:link, #tweet3 a:link, 
#tweet5 a:link, #tweet1 a:visited, 
#tweet3 a:visited, #tweet5 a:visited {
	color: #1e00a6;
}

#tweet1 a:hover, #tweet2 a:hover, #tweet3 a:hover, 
#tweet4 a:hover, #tweet5 a:hover {
	color: #e300a3;
}



.deets {
	margin-top:10px;
	margin-bottom: 10px;
	text-decoration: none;
}

.deets-top {
	#margin-bottom: 10px;
	#margin-top: 6px;
	padding-bottom: 10px;
}

.deets-bottom {
	#margin-bottom: 6px;
	#margin-top: 10px;
	text-align: center;
	font-size: 14px;
}

.deets-bottom a:link {
	text-align: center;
}

.deets-left {
	width: 40%;
	float: left;
	text-align: left;
	padding-bottom: 10px;
	font-size: 17px;
}

.deets-right {
	width: 60%;
	float: left;
	text-align: right;
	padding-bottom: 10px;
	font-size: 17px;
}

div a {
	text-decoration: none;
}

#boxy {	
	#display: none;
	position: fixed;
	z-index: 10;
	top: 5%;
	margin: auto;
	left: 10%;
	right: 10%;
	background-color: #1e00a6;	
	color: #ffffe6;
	text-align: center;
	font-family: "Fredoka", sans-serif;
	padding-left: 15px;
	padding-right: 15px;
	border: 3px solid #ffffe6;
}

#boxy a:link {
	color: #ffffe6;
}

#boxy a:visited {
	color: #ffffe6;
}

#boxy a:hover {
 color: #e300a3;
}

.inst {
	font-size: 18px;
	font-weight: bold;
	padding: 1px;
}

#the_buttons {
	padding-bottom: 4px;
}

.words1 {
	font-size: 15px;
}

.words2 {
	font-size: 15px;
}

.closer {
	padding-bottom: 7px;
	font-weight: bold;
	color: #FFC300;
}

span.closer a:link, span.closer a:visited {
	color: #FFC300;
}
span .closer:hover {
	color: #e300a3;
}

.controls {
	text-align: center;
	font-family: "Fredoka", sans-serif;
	#padding: 0;
	font-size: 14px;
	color: #000000;
	margin: auto;
	#width: 50%;
	width: 316px;
}

.controls a:link, .controls a:visited,
.pages a:link, .pages a:visited {
	color: #000000;
}

.controls a:hover, .pages a:hover {
	color: #e300a3;
}

.chooseo {
	width: 30%;
	display: inline;
	float: left;
	
	text-align: left;
}

.leftside {
	padding-left: 19px;
	width: 30%;
	float: left;
	text-align: left;
}

.rightside {
	width: 28%;
	float: left;
	text-align: left;
	#padding-right: 7%;
}

#radios {
	border: 2px solid #7703fc;
	#border-bottom: None;
	#background-color: #d9d1ff;
	margin-bottom: 1px;
}

.inputy {
	/*margin-top: -1px;
	width: 10px;*/

	margin-bottom: 6px;
	vertical-align: middle;
	width: 10px;

}

#searchy {
	margin-top: 6px;
	margin-left: 8px;
}

.pages {
	//background-color: #fcff3b;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 2px solid #7703fc;
	#border-top: 1px solid #7703fc;
	#background-color: #ffd4a6;
	font-family: "Fredoka", sans-serif;
}

form {
	padding-left: 10px;
	padding-right: 10px; 
	padding-bottom: 10px;
	padding-top: 7px;
	margin-block-end: 0;
}

.hello {
	font-family: "Fredoka", sans-serif;
	text-align: center;
}

#lastclose {
	padding-bottom: 3px;
}



/* PICNIC */

body {
	
}

.search_button {
	text-align: center;
	font-family: helvetica;
	margin-top: 5px;
	margin: auto;
	
}

.search_button a:link, .search_button a:visited {
	color: #0313fc;
}

.search_button a:hover {
	color: #d40492;
}

#pork {
	margin-top: 10px;
	/*margin-left: 17px;*/
	position: relative;
}


.map {  
	/*float: left;*/
	float: none;
	margin: auto;
	margin-top: 10px;
	width: 258px;
	display: block;
	/*display: inline;*/
	
}

.stats {
	/*float: right;*/
	float: none;
	margin: auto;
	margin-top: 2px;
	font-size: 15px;
	width: 510px;
	/*display: inline;*/
	display: block;
	font-family: helvetica;
}

.search_button {
	font-size: 30px;
}

.welc {
	text-align: center;
	font-size: 30px;
	padding: 3px;
	/*margin-right: 5px;*/
	border: 3px solid #0313fc;
	border-radius: 5px;
}

.heado {
	text-align: center;
}

.best {
	/*background-color: #00d107;*/
	border: 3px solid #0eb549;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 35x;
	margin-bottom: 5px;
}

.worst {
	/*background-color: #e33b19;*/
	border: 3px solid #e33b19;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.one {
	width: 200px;
	display: inline;
	float: left;
}

.two {
	width: 125px;
	display: inline;
	float: left;
	text-align: center;
}

.three {
	width: 125px;
	display: inline;
	float: left;
	text-align: center;
}

#g1 {
	position: absolute;
	z-index: 5;
}

#g2 {
	position: absolute;
	z-index: 6;
}

#g3 {
	position: absolute;
	z-index: 7;
}

#g4 {
	position: absolute;
	z-index: 8;
}

#g5 {
	position: absolute;
	z-index: 9;
}

#b1 {
	position: absolute;
	z-index: 10;
}

#b2 {
	position: absolute;
	z-index: 11;
}

#b3 {
	position: absolute;
	z-index: 12;
}

#b4 {
	position: absolute;
	z-index: 13;
}

#b5 {
	position: absolute;
	z-index: 14;
}

#mappo {
	z-index: 0;
}


/* DIARY */



.dateinput {
	#width:200px;
}

ul.errorlist.nonfield {
	text-align: center;
	list-style-type: none;
	color: #ee0000;
	font-weight: bold;
}

#labely {
	float: left;
	width: 100px;
	line-height: 21px;
}

/*input {
	float: right;
	width: 200px;
}*/

.input_u {
	#float: right;
	#width: 4px;
	#margin-right: 20px;
	padding-bottom: 20px;
	#height: 5px;
}

.page_contents {
	text-align: center;
	margin: auto;
	#width: 300px;
	#display: block;
	font-family: helvetica;
}

.formy {
	float: none;
}

.labelo {
	float: left;
	width: 10%;
}

.labelo2 {
	#padding: 5px;
	float: left;
	#width: 30px;
	#margin: 10px;
	#text-align: left;
	#font-size: 12px;
}

.labelo3 {
	float: left;
	font-size: 15px;
}

.user_contain {
	padding-top: 10px;
	#border: 1px solid #000000;
	margin: auto;
}

.user_col {
	margin-bottom: 5px;
}

input[type="radio"] + .label03:after{
	#margin-top: -1px;
	vertical-align: middle;
	#height: 100%;
}

.gap {
	height: 10px;
}

#date_pick {
	width: 159px;	
	float: left;
	margin-left: 11px;
}

.deleting_detail {
	border: 2px solid #ffc166; 
	border-radius: 3px; 	
	margin-left: 15%; 
	margin-right: 15%; 
	padding-top: 5px; 
	padding-bottom: 5px;
}

.form_style {
	border: 2px solid #ffe900;
	border-radius: 3px;
	padding-left: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 290px;
	margin: auto;
}

.listo {
	display: block; 
	margin: auto; 
	width: 90%; 
	text-align: center;
	}

.entry {
	border: 2px solid #ffc166;
	border-radius: 3px;
	margin-left: 20%;
	margin-right: 20%;
	/*padding-top: 4px;
	padding-bottom: 4px;*/
	padding: 4px;
	font-family: helvetica;
}

.toggleo {
	font-family: helvetica;
	color: #000000;
	margin-bottom: 10px;
	font-weight: bold;
}

.entry a:link {
	color: #000000;
}

.entry a:visited {
	color: #000000;
}

.entry a:hover {
	color: #f86400;
}

.toggleo a:link {
	color: #000000;
}

.toggleo a:visited {
	color: #000000;
}

.toggleo a:hover {
	color: #f86400;
}

.page_contents a:link {
	color: #000000;
}

.page_contents a:visited {
	color: #000000;
}

.page_contents a:hover {
	color: #f86400;
}

/* CALCULATORS */

/* Template 1 */

.calculator1 {
	margin: auto; 
	margin-top: 5px;
	width: 314px;
	overflow: auto; 
	border: 1px solid #85929E;
}

.screen-itself1 {
	width: 290px;
	height: 42px;
	line-height: 42px;
	text-align: right; 
	background-color: #ffffff;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px #000000 solid;
}

.screen1 {
	//font-size: 40px;
	//width: 40px;
	padding-right: 0.2%;
	font-family: 'VT323', monospace;
}

.big-button {
	background-color: #FF5C28;
	width: 292px; 
	//height: 24px;
	font-size: 20px; 
	margin: auto; 
	text-align: center;
	margin-bottom: 3px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family: 'Trispace', sans-serif;
}

#equals-button {
	width: 218px;
	background-color: #FF5C28;
	margin-bottom: 10px;
}

.button-box {
	width: 296px;
	margin: auto;
}

.buttony {
	background-color: #0A73D4;
	width: 70px;
	height: 24px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 5px;
	padding-bottom: 3px;
	font-size: 20px;
	font-family: 'Trispace', sans-serif;
	float: left;
	text-align: center;
}

#the_buttons:visited {
	color: #FFFF00;
}

#the_buttons {
	color: #FFFF00;
}

#the_buttons:hover {
	color: #ffa200;
}

.calc_swap {
	margin: auto;
	text-align: center;
	font-size: 20px;
}


#swap_links:visited {
	color: #000000;
}

#swap_links:hover {
	color: #8000FF;
}

.formypick {
	margin: auto;
	text-align: center;
}


/* Template 2 */

.screen-itself2 {
	width: 290px;
	height: 42px;
	line-height: 42px;
	text-align: right;
	background-color: #ffffff;
	margin: auto;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 1px #ffffff solid;
	background-color: #000000;
}

.screen2 {
	//font-size: 40px;
	color: #0cfa18;
	padding-right: 0.2%;
	font-family: VT323;
}

.button-box2 {
	width: 296px;
	margin: auto;
	
}

.calculator2 {
	//border: 1px solid #000000;
	background-color: #000000;
	overflow: auto;
	margin: auto;
	margin-top: 5px;
	width: 314px;
}

.big-button2 {
	background-color: #000000;
	border: 1px solid #ffffff;
	border-radius: 3px;
	width: 290px;
	font-size: 20px;
	margin: auto;
	text-align: center;
	margin-bottom: 2px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-family: helvetica;
}

.buttony2 {
	background-color: #000000;
	border: 1px solid #ffffff;
	border-radius: 3px;
	width: 68px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 20px;
	font-family: helvetica;
	float: left;
	text-align: center;
}

#equals-button2 {
	width: 216px;
	background-color: #000000;
	border: 1px solid #ffffff;
	border-radius: 3px; 
	margin-bottom: 10px;
}

#the_buttons2:visited {
	color: #ffffff;
}

#the_buttons2 {
	color: #ffffff;
}

#the_buttons2:hover {
	color: #0cfa18;
}

.big-button2:hover {
	border: 1px solid #0cfa18;
}

.buttony2:hover  {
	border: 1px solid #0cfa18;
}

#equals-button2:hover {
	border: 1px solid #0cfa18;
}

/* Template 3 */

.calculator3 {
	width: 314px;
	background-image: linear-gradient(#07D550, #004AF7);
	margin: auto;
	margin-top: 5px;
	overflow: auto;
}

.screen-itself3 {
	border: 1px solid #000000;
	width: 290px;
	height: 42px;
	line-height: 42px;
	text-align: right;
	margin:auto;
	margin-top: 12px;
	margin-bottom: 12px;
	background-color: #e0e0e0;
}

.screen3 {
	font-family: VT323;
	padding-right: 0.2%;
}

.button-box3 {
	width: 296px;
	margin: auto;
}

.big-button3 {
	border: 1px solid #ffffff;
	width: 290px;
	font-size: 20px;
	margin: auto;
	text-align: center;
	margin-bottom: 10px;
	padding-top: 3.5px;
	padding-bottom: 4.5px;
	font-family: 'IBM Plex Sans', sans-serif;
}

#equals-button3 {
	width: 216px;
	margin-bottom: 10px;
	font-family: 'IBM Plex Sans', sans-serif;
}

.buttony3-under {
	background-color: #7803A0;
	color: none;
	opacity: 0.2;
}

.buttony3 {
	border: 1px solid #ffffff;
	width: 68px;
	margin-top: 2px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 3px;
	padding-bottom: 5px;
	font-size: 20px;
	font-family: 'IBM Plex Sans', sans-serif;
	float: left;
	text-align: center;
}

.buttony3:hover {
	background-color: #ffffff;
	color: #23B2FF;
	opacity: 0.9;
}

#the_buttons3:visited {
	color: #ffffff;
}

#the_buttons3 {
	color: #ffffff;
	
}

.big-button3:hover {
	background-color: #ffffff;
	color: #23B2FF;
	opacity: 0.9;
}





/*Start of SMALL MOBILE PHONES*/
@media all and (min-width: 1px) and (max-width: 500px){
.blanko {
	//background-color: #ffffff;
	width: 70px;
	height: 70px;
	}

.row {
	width: 216px;
}

.rowWin {
	width: 216px;
}

.column {
	width: 70px;
	height: 70px;
}

.numbers .column {
	font-size: 30px;
}

.numbers2 .column {
	font-size: 30px;
}

.spu {
	#position: absolute;
	#top: 50%;
	#-ms-transform: translateY(-50%);
	#transform: translateY(-50%);
	margin-left: 38.5%;
	#margin-right: 40%;
}

.spu2{
	#position: absolute;
	top: 52%;
	#-ms-transform: translateY(-50%);
	#transform: translateY(-50%);
	margin-left: -11%;
	#margin-right: 13.5%;
}

#missingPiece {
	width: 55px;
	height: 55px;
	font-size: 23px;
}

.scoreLeft {
	//width: 34%;
	width: 100%;
	#text-align: left;
	padding-bottom: 3px;
	font-weight: bold;
	font-size: 17px;
}

.scoreMidL {
	text-align: left;
	padding-bottom: 9px;
	width: 32%;
}

.scoreMidR {
	//width: 21%;
	width: 32%;
	padding-bottom: 9px;
	font-size: 13px;
}

.scoreRight {
	//width: 24%;
	width: 36%;
	padding-bottom: 9px;
	font-size: 13px;
	text-align: right;
}

form fieldset p {
	margin-top: 0;
	margin-bottom: 2px;
	padding: 0;
}

fieldset {
	padding-top: 2px;
	padding-bottom: 6px;
}

#full {
	display:none;
}

#small {
	display: inline;
}

/*Twitter Spelling Police for Mobile*/

.deets-left {
	width: 30%;
	font-size: 12px;
}

.deets-right {
	width: 70%;
	font-size: 12px;
}

.deets-bottom {
	font-size: 12px;
}

.controls {
	font-size: 12px;
}

.chooseo {
	width: 29%;
	display: inline;
	float: left;
	
	text-align: left;
}

.leftside {
	padding-left: 29px;
	width: 29%;
	float: left;
	text-align: left;
}

.rightside {
	width: 28%;
	float: left;
	text-align: left;
	#padding-right: 7%;
}

#radios {
	border: 2px solid #7703fc;
	#border-bottom: None;
	#background-color: #d9d1ff;
	/*margin-bottom: 2px;*/
}

/* .inputy {
	margin-bottom: 7px;
	vertical-align: middle;
	width: 10px;
} */

/* PICNIC for mobile */

.map {
	float: none;
	width: 258px;
	/*height: 60px;*/
	margin: auto;
	margin-top: 10px; 
	display: block;
}

.stats {
	float: none;
	width: 300px;
	margin: auto;
	margin-top: 2px;
	display: block;
	font-size: 10px;
}

#pork {
	margin: auto;
	margin-top: 10px;
	/*margin-top: 5px;*/
	/*margin-left: 0;*/
}

.one {
	width: 100px;
	/*float: left;
	display: inline;
	text-align: left;*/
}

.two {
	width: 75px;
	/*float: left;
	display: inline;
	text-align: center;*/
}

.three {
	width: 75px;
	/*float: left;
	display: inline;
	text-align: center;*/
}


.gap {
	width: 0px;
}






}

/*START OF BIGGER PHONES*/
@media all and (min-width: 1px) and (max-width: 930px){
/* PICNIC for bigger mobile */

.map {
	float: none;
	width: 258px;
	/*height: 60px;*/
	margin: auto; 
	margin-top: 10px;
	display: block;
}

.stats {
	float: none;
	width: 300px;
	margin: auto;
	margin-top: 2px;
	display: block;
	font-size: 8px;
}

.welc {
	text-align: center;
	font-size: 30px;
	margin-top: 26px;
}

#pork {
	margin: auto;
	margin-top: 10px;
	/*margin-left: 0;*/
	float: none;
	
}

.best {
	margin-top: 0;
}

.one {
	width: 130px;
	/*float: left;
	display: inline;
	text-align: left;*/
}

.two {
	width: 60px;
	/*float: left;
	display: inline;
	text-align: center;*/
}

.three {
	width: 60px;
	/*float: left;
	display: inline;
	text-align: center;*/
}


}


/*Mid test*/
@media all and (min-width: 501px) and (max-width: 1000px){
.blanko {
	#background-color: #000000;
	}
}