/* Quzzl.us specific styles */
/* GOLD		#FFBC23			*/
/* RUST		#C22803			*/
/* NAVY		#0A2B3D			*/
/* BLUE		#16618A			*/
/* SKYBLUE	#0B75D9			*/
/* YELLOW 	#FDFFBA			rgb(253, 255, 186)  */

#page_content h1 {
	color:				#C22803;			/* RUST */
	font-size:			2.00em;
	}
#page_content h2 {
	color:				#16618A;			/* BLUE */
	font-size:			1.5em;
	font-weight:		normal;
	}
#page_content h3 {
	color: 				#0A2B3D;			/* NAVY */
	font-size:			1.25em;
	font-weight:		normal;
	}
#register_block {
    width:          	600px;
    background:     	#FFBC23;
    # border:         	1px solid #C22803;                  /* CONTRAST */
    border:         	2px solid #FF0000;                  /* CONTRAST */
    padding:        	10px;
    margin-top:     	 0px;
    }
.instruction_block {
	width:				80%;
    color:          	#000000;     
    border:         	0px solid #00FF00;                  /* CONTRAST */
/*  font-size:      	14px;   */
/*  font-weight:    	normal; */
/*  text-align:     	center; */
    }

.emphasize, .emphasize2 {
	color: 				#C22803;			/* RUST */
	font-size:			1.10em;
	font-weight:		bold;
	}
.emphasize2 {			color:	#0A2B3D; }
.big, .question {
	color:				#C22803;			/* RUST */
	font-size:			1.5em;
	font-weight:		normal;
	}
.question {		color:	#16618A;	}

.square_bullet {
	list-style-type:	square;
	}
.square_bullet li {
	padding: 0px;
	margin:	 0px;
	}
a.bullet:link, a.bullet:visited, a.bullet:hover, a.bullet.active {
    color:              #C22803;
	text-decoration:	none;
    font-size:          1.00em;
    font-weight:        bold;
    }
a.bullet:hover {	color:	#16618A;	} 

#login_box {
	width:				70%;
	padding:			10px;
	border:				0px solid #0A2B3D;
	}
table.login, table.register, table.hints, table.score {
	border-width: 		2px;
	border-spacing: 	4px;
	border-style: 		ridge;
	border-color: 		#0A2B3D;
	border-collapse: 	collapse;
	background-color: 	#FFBC23;
	}
table.register {
	width:				650px;
	border-style:		none;
	}
table.hints {
	width:				1200px;
	border-style:		1px solid #0F0F0F;
	border-collapse:    collapse;
	}
table.login td, table.register, table.hints td {
	padding:		4px;
	margin:			3px;
	}
table.hints tr {
	border: 1px solid #0A2B3D;
}
table.hints th, table.score th {
	background-color:	#0A2B3D;					/* NAVY */
	color:				#FFBC23;					/* GOLD */
	}
table.score {
	border-width:		2px;
	border-spacing:		2px;
	padding:			5px;
	width: 60%;
	}
table.hints th.cell1 {	width:  30px; text-align:	center; vertical-align: top; }
table.hints th.cell2 {	width: 1000px; text-align:	left; }
table.hints th.cell3 {	width: 100px; text-align:	right; }
table.hints td.cell1 {	width:  30px; text-align:	center; vertical-align: top; }
table.hints td.cell2 {  width: 400px; text-align:	left;   vertical-align: top; }
table.hints td.cell3 {  width: 100px; text-align:	right;  vertical-align: top; }

table.score th {	vertical-align:bottom; }
table.score th.time {	width: 120px; text-align:	right; padding: 5px;	}
table.score td.time {	width: 120px; text-align:	right; padding: 5px;	}
table.score th.name {	width: 200px; text-align:	left;  padding: 5px;	}
table.score td.name {   width: 200px; text-align:	left;  padding: 5px;	}
table.score th.stat {   width: 100px; text-align:   center; padding: 5px;   }
table.score td.stat {   width: 100px; text-align:   center; padding: 5px;   }
													/* Label Fonts */
.lfl, .lfc, .lfr {
	font-size:			0.9em;
	color:				#0A2B3D;
	text-align:			left;
}
.lfc {	text-align:	center;	}
.lfr {	text-align: right;	}	

.highlight, .h3_red, .h3_white, .h3_dark {
    font-size:          18px;
    font-weight:        bold;
    color:              #902028;                        /* CONTRAST */
    margin:             0;
    }
.h3_dark {  color:      #0A2B3D;  }                         /* DARKBASE */
.h3_red {   font-size:  20px; }
.h3_white {
    font-size:          18px;
    color:              #FFFFFF;
    }

.clue_intro {
	color: #000000;
	font-style: 		italic;
}

/* ANSWER BOX */
input.answer {									/* This is the answer box itself */
	border: 			2px solid #C22803;
	color:				#0A2B3D;				/* NAVY */
	}
.submit input {
	margin-left: 		4.5em;
	background: 		#FFBC23;				/* GOLD */
	color:				#C22803;				/* RUST */
	border: 			2px outset #d7b9c9;
	}
fieldset.answer {
	border: 			1px solid #0A2B3D;		/* RUST */
	text-align:			center;
	width: 				80%;
	padding:			20px;
	}
legend {
	color: 				#C22803;				/* RUST */
	background: 		#FFBC23;				/* GOLD */
	border: 			1px solid #C22803;		/* RUST */
	padding: 			2px 6px;
	} 


/* CRYPTEX STYLES */
#cryptex_box {
    background-image:   url("../images/cryptexdial.jpg");
    margin-left:        50px;
    margin-top:         50px;
    width:              570px;
    height:             232px;
	position: relative;
}
#button_div {
    margin-left:        35px;
    margin-top:         35px;
    width:              570px;
	height:				70px;
    padding:            0px;
    text-align:         center;
}

#letter_box00, #letter_box01, #letter_box02, #letter_box03, #letter_box04,
#letter_box10, #letter_box11, #letter_box12, #letter_box13, #letter_box14,
#letter_box20, #letter_box21, #letter_box22, #letter_box23, #letter_box24 {
    font-size:      20px;
    font-weight:    bold;
    color:          #000000;
    position:       absolute;
    text-align:     center;
    top:            82px;
    left:           150px;      }
/* VERTICAL POSITIONING (Align the Rows) ORIGINAL 00 = 107; 01 = 148; 02 = 188 */
#letter_box00, #letter_box01, #letter_box02, #letter_box03, #letter_box04 {  top:  41px;   color: #808080; }
#letter_box20, #letter_box21, #letter_box22, #letter_box23, #letter_box24 {  top:  122px;   color: #808080; }
/* HORIZONTAL POSITIONING (Align the Dials) ORIGINAL 202 264 326 386 450  */
#letter_box00, #letter_box10, #letter_box20 {   left:   150px; }
#letter_box01, #letter_box11, #letter_box21 {   left:   212px; }
#letter_box02, #letter_box12, #letter_box22 {   left:   274px; }
#letter_box03, #letter_box13, #letter_box23 {   left:   336px; }
#letter_box04, #letter_box14, #letter_box24 {   left:   398px; }

.timer_style {
	background:		#000000;
	color:			#FFBC23;
	font-family:	verdana;
	font-size:		14px;
}

/* WORD FIND STYLES */
.big_word_box {
	border:		0px solid #FF0000;
	width:		80%;
	text-align:	center;
}

.word_box_list {
	border:  	0px solid #00FF00;
	width:		200px;
	text-align: left;
	display: 	inline-block;
	vertical-align:     top;
	margin-top: 50px;
}

.word_box {
    margin: 10px;
    padding:    15px;
	border:		0px solid #0000FF;
	text-align:	center;
/*	width:		21px; */
	display: inline-block;
	}
table.wordfind {
    border:             1px solid #000000;
    border-collapse:    collapse;
    font-family:        "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:          1.5em;
    font-weight:        bold;
}
td.no_pick, td.picked {
    border: 			1px solid black;
    width:              40px;
    height:             40px;
    vertical-align:     middle;
    text-align:         center;
	text-decoration:	none;
	}
td.no_pick { color:  #0A2B3D;  background-color:  #FDFDFD;  text-decoration: none;  }
td.picked  { color:  #FFBC23;  background-color:  #000000;  text-decoration: none;  }

/* ====================================================================== NEW STUFF 11/26/2020 */

.registration_block {
	border: 		0px solid black;
	margin-left:	15px;
	padding-left:	15px;
	margin-bottom:	10px;
	width:			100%;
}

.input_div {
	margin-bottom:	10px;
	border: 0px solid #0000FF;
}

.xlabel {
  display: grid;
  grid-gap: 1rem;
  align-items: center;
  grid-template-columns: auto 1fr;
	
}
label {
	display: inline-block;
	width: 130px;
	text-align:	right;
}

.lefted {
	display: flex;
	justify-content:	left;
	align-items:		left;
	border: 0px solid green;
	margin-left:		150px;
}
.centered {
	display: flex;
	justify-content:	left;
	align-items:		left;
	border: 0px solid green;
	margin-left:		150px;
}

/* ========================================================== BUTTON STYLING */
.qinput {
  background: white;
  color: rgb(7 2 18);
  transition: all 200ms ease;
  border: 1px solid #BCBCBC;
  padding: 0 calc(2.0rem * 0.5);
  border-radius: calc(2.0rem * 0.1);
/*  box-shadow: 0 0 2rem rgb(0, 0, 0, 20%); */
	height:			25px;
}
.qbutton {
  	border: 		1px solid #C22803;
  /#	padding: 		0 calc(2.0rem * 0.5); */
	padding-top:	3px;
	height:			30px;
  /*	border-radius: 	calc(2.0 * 0.3); */
  /*	border-radius: 	20px; */
  	border-radius: calc(2.0rem * 0.1);
  	box-shadow: 	0 0 2rem rgb(0, 0, 0, 20%);
	cursor: 		pointer;
	background:		#FFBC23;
	color:			#C22803;
	align:			center;
  	transition-duration: 0.2s;
}

.qbutton:hover {
  background-color: #16618A;
  color: 			#FDFFBA;
}
/* ========================================================== BUTTONS for VERTICAL MENU STYLING */
.qbtn-group .button {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  width: 125px;
  display: block;
  margin-top: 10px;
}

.qbtn-group .button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

.qbtn-group .button:hover {
  background-color: #FF0000;
  color: rgb(0,0, 0);
}

/* ========================================================== CHECKBOX STYLING */
/* ---------------------------------------------------------- The container */
.container {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
	margin-left: 155px;
  cursor: pointer;
	font-size: 14px;
  text-align:     	left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* -------------------------------------------------------------------- Hide the browser's default checkbox */
.container input {
	position: 	absolute;
	opacity: 	0;
	cursor: 	pointer;
	height: 	0;
	width: 		0;
}

/* -------------------------------------------------------------------- Create a custom checkbox */
.checkmark {
	position: 			absolute;
	top: 				0;
	left: 				0;
	height: 			20px;
	width: 				20px;
	background-color: 	#FDFFBA;
	border: 1px solid 	#C22803;
}

/* ------------------------------------------------------------------- On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: #BCBCBC;
}

/* ------------------------------------------------------------------- When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
	background-color: #0B75D9;
}

/* ------------------------------------------------------------------- Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content:	"";
	position:	absolute;
	display:	none;
}
/* ------------------------------------------------------------------- Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}
/* ------------------------------------------------------------------- Style the checkmark/indicator */
.container .checkmark:after {
margin-left: 6px;
margin-top: 1px;
	left: 				6 px;
	top: 				1 px;
	width: 				5px;
	height: 			10px;
	border: 			solid white;
	border-width: 		0 3px 3px 0;
	-webkit-transform: 	rotate(45deg);
	-ms-transform: 		rotate(45deg);
	transform: 			rotate(45deg);
}

/* ------------------------------------------------------------------ Main Image DIV */
div.main_image {
	width:		80%;
	background-color: white;
	box-shadow:	0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.image_lable {
  text-align: center;
  padding: 10px 20px;
}

/* ----------------------------------------------------------------- 3-Column Display:  https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_unequal */
/* Create three unequal columns that floats next to each other */
.qcolumn {
	float: left;
	padding: 10px;
	/* height: 300px; --  Should be removed. Only for demonstration */
}
.qleft {
	width: 35%;
	border: 0px solid #FF0000;
}
.qright {
	width: 20%;
	border: 0px solid #00FF00;
}
.qmiddle {
	width: 35%
}

/* Clear floats after the columns */
.qrow:after {
	content: "";
	display: table;
	clear: both;
}
.login_block {
	margin-top: 80px;
	border: 1px solid #0A2B3D;
	padding: 5px;
}
/* ---------------------------------------------------------------- Horizontal Tabs */
/* Style the tab */
.tab {
  	overflow: hidden;
  	border: 1px solid #ccc;
  	background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  	background-color: inherit;
  	float: left;
  	border: none;
  	outline: none;
  	cursor: pointer;
  	padding: 14px 16px;
  	transition: 0.3s;
  	font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* ------------------------------------------------------------------ QUZZL LIST */
.quzzl_list {
	margin-left: 	100px;
	border:			0px solid #000000;
	padding-left:	15px;
	text-align:		left;
	color:			#0A2B3D;
	font-size:		16px;
}
/* ----------------------------------------------------------------- Controla Space between Line Elements */
li + li {
	margin-top:		10px;
}

/* ------------------------------------------------------------------ QUZZL DESCRIPTION */
.quzzl_desc {
	width:			80%;
	color:			#0A2B3d;
	font-size:		16px;
	line-height:	1.5em;
}
/* ------------------------------------------------------------------ KID BLOCK IMAGES */
/* https://stackoverflow.com/questions/38747586/how-to-center-multiple-div-elements-within-a-parent-div/38747651 */
.kbdiv {
    text-align:		center;
    border:			0px solid #666;
	background-color: #FDFFBA;
	margin: 0px;
	padding: 0px;
}
div.kbbox {
	width:			120px;
	height:			300px;
	border:			0px solid #FF0000;
	display:		inline-block;
	margin:			0px;
}
.kbimg {
    display:		inline-block;
    margin:			0px 0px;
    padding:		0px;
    border:			0px solid #CCC;
	max-width:		120px;
	height: 		300px;
}
.XXXkbimg:hover {
	opacity: 0.3;
	color: red;
	position: relative;
}
#kbimgB {
	width:			120px;
	height:			300px;
	background:		url(./images/KidB2.jpg) 0px 0px;
}
#kbimgB:hover {
	background:		url(./images/KidB2.jpg) 120px, 0px;
}

.kbKidA, .kbKidB, .kbKidC, .kbKidD, .kbKidE, .kbKidF, .kbKidG, .kbKidH {
	display: inline-block;
	width: 120px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px solid #FF0000;
}

.kbKidA { background:  transparent url("../images/KidA2.jpg") no-repeat 0 0; }
.kbKidB { background:  transparent url("../images/KidB2.jpg") no-repeat 0 0; }
.kbKidC { background:  transparent url("../images/KidC2.jpg") no-repeat 0 0; }
.kbKidD { background:  transparent url("../images/KidD2.jpg") no-repeat 0 0; }
.kbKidE { background:  transparent url("../images/KidE2.jpg") no-repeat 0 0; }
.kbKidF { background:  transparent url("../images/KidF2.jpg") no-repeat 0 0; }
.kbKidG { background:  transparent url("../images/KidG2.jpg") no-repeat 0 0; }
.kbKidH { background:  transparent url("../images/KidH2.jpg") no-repeat 0 0; }

.kbKidA:hover {		background-position: -119px 0px; }
.kbKidB:hover {		background-position: -122px -1px; }
.kbKidC:hover {		background-position: -118px 1px; }
.kbKidD:hover {		background-position: -119px 1px; }
.kbKidE:hover {		background-position: -119px -1px; }
.kbKidF:hover {		background-position: -119px 1px; }
.kbKidG:hover {		background-position: -119px -1px; }
.kbKidH:hover {		background-position: -119px -1px; }