/* Topico.uk - Memo2go */
/* g2-styles.css --- 2025-12-20 */

html {
	font-size: 10px; /* 10px with 1.6rem */ 
	overflow-y: scroll;
}
 
body {
	font-size: 1.6rem; /* Based from html font size */
	background-color: white;
	font-family: Arial, sans-serif;
	/* margin:1em; */
}




h6.debugging {
	color: red;
	font-size: 2rem;
	margin: 10px auto;
	width: 100%;
	text-align: center;
}

p {
	font-size: 1.4rem; 
}

.pagebounds {
	max-width: 70rem;
	border-left: .5em solid #f0f0f0;
	border-right: .5em solid #f0f0f0;
	border-bottom: .5em solid #f0f0f0;
	margin-left: auto;
 	margin-right: auto;
}

header {
	background-color: #f0f0f0;
	text-align: center;
	margin: 0;
	padding: 1rem;
	font-size: 3.0rem;
	font-weight: bold;
	color: #96151d;
}

header a { 
	color: #96151d !important; 
	text-decoration: none;
}

header a:link { 
	color: #96151d !important; 
	text-decoration: none;
}

header a:hover {
	color:pink;
}

footer {
   width: 100%;
   margin: 1rem 0; 
   padding: 1rem;
   background-color: #f6f6f6;
   color: #444444;
   text-align: center;
   font-size: 2rem;
}

footer a { 
	color: #96151d !important; 
	text-decoration: none;
}

footer a:link { 
	color: #96151d !important; 
	text-decoration: none;
}

footer a:hover {
	color:pink;
}


.topnav {
  /* overflow: hidden; */
  color: green; /* ??? */
  /* background-color: teal; */
  position: relative;
  text-align: center;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1rem;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 48px;
}

.myLinks {
	/* ... */
}

.topnav #myLinks {
  display: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.myLinks {
	font-size:1em !important; 
	text-align: center !important;	
}

.links {
	font-size:1.8em !important; 
	text-align: center !important;	
}

/* Navbar */
.navbar a {
  float: left; /* vince temp */
  font-size: 1em;
  color: white;
  text-align: center;
  padding: 2.6em 1em;
  text-decoration: none;
}

/* Setting to defaults */
details {
	color: white;		
	background-color: #007BFF; 
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: .8rem;
	overflow: hidden;
}

summary {
	color: white;
	background-color: #007BFF;
	padding: 1rem;
	cursor: pointer;
	font-weight: bold;
	/* list-style: none; removes default arrow style */
	/* list-style-image: url('abcde.gif'); */
}

summary::-webkit-details-marker {
	display: none; /* hides default marker in WebKit browsers */
}

details[open] summary {
	/* background: #0056b3; / * darker when open */
	/* background: #000000; */

}

details.menu-1 {
	background:lightgray;		
}

summary.menu-1 {
	background: black;
}

details.menu-2 {
	background:lightgray;	
}

summary.menu-2 {
	background: red;
}

details.menu-3 {
	background:lightgray;
}

summary.menu-3 {
	background: purple;
}






/* summary */ 
details p.intro {
	text-align: center;
	margin-left: 1rem;
	padding-left: 1rem;
	color: navy;
	
	text-decoration: underlined;
}

.accordion-content {
	background: #f9f9f9;
	padding: 1rem;
}

.accordion-content a {
	display: block;
	padding: .8rem;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #ddd;
}

.accordion-content a:hover {
	background: #eee;
}



details.styleHome {
	background: white !important; 
}
summary.styleHome {
	background: blue !important; 
	color: white;
	margin: 1rem 0;
}



details.styleMenu {
	background: white !important; 
}
summary.styleMenu {
	background: o !important; 
	color: white;
	margin: 1rem 0;
	padding: 1rem;
}
div.styleMenu {
	
}



/* Copilot end */

/* Standard styles for Memo2go 
Light-bg BlancheArmond
Dark-bg #cc9900
Border  #cc9900
Light-tx #
Dark-tx  #444444
*/
details.style1 {  
	background-color: #ffebcd; /* Light () */
	border: 2px #cc9900 solid; /* Dark */
	border-radius: 10px;
	padding: 0;
	margin: 1rem;
}
summary.style1 {
	color: #fff9e6; /* Light */
	background: #cc9900 !important; /* Dark-bg */
	/* background: lime !important; /* Dark-bg */		
	font-size: 2rem;
	text-align: center;
	margin: 0;
	padding: 1.5rem .6rem .9rem .6rem;
}

div.style1 {
	color: #444444;	/* Dark-tx */
	background: #ffebcd; /* Light-bg */
	font-size: 2rem;
	text-align: center;	
	margin: 1rem;
}

/* Standard styles for Memo2go 
Light-bg BlancheArmond xxx
Dark-bg #cc9900 xxx
Border  #cc9900 xxx
Light-tx #   xxx
Dark-tx  #444444 xxxx
*/
details.style2 {          /* ----------------------------------- */
	background-color: #ffebcd; /* Light () */
	border: 1px #999999 solid; /* Dark */
	border-radius: 10px;
	padding: 0;
	margin: 1rem; 
}
summary.style2 {
	/* color: red;  Light */
	color: purple; /* Light */
	/* background: #cc9900 !important; /* Dark-bg */
	background: #ffebcd !important; /* Dark-bg */	
	/* border: 1px #666666 solid; /* Dark */
	font-size: 2rem;
	text-align: center;
	margin: 0;
	padding: 1.5rem 1rem .9rem 1rem;
}
div.style2 {
	color: #444444;	/* Dark-tx */
	/* background: #ffebcd; Light-bg */
	background: #ffebcd; /* Light-bg */
	font-size: 2.2rem;
	font-weight: 600;
	text-align: center;	
	margin: 1rem;
}

div.frame { /* For logos, flags, etc */
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem; 
	background-color: #ffebcd; /* was white; */
}

.active {
  background-color: #04AA6D;
  color: white;
}

.box {
	border: 1px solid white;
	width:  100%;
}

.medium-box {
	border: 1px dashed red;
	margin: 10px;
	padding: 10px;
	width: 100%;
	max-width: 1200px;
	min-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.center-box {
	border: 1px solid green;
	margin: 10px;
	padding: 10px;
	width: 60%;
	max-width: 1200px;
	min-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.center-text{
  text-align: center;
}

.center-box-width {
	width:80%;	
	border: 0px red solid;
	padding: .5em;
	margin: 0 0 0 0;
 	margin-left: auto;
 	margin-right: auto;
}

.intro_AAA {
	color: black;
	background-color: white;
	padding: .3rem .2rem .3rem .2rem;
	font-size: 1.6rem;
	text-align: center;
}

			.headline, .headline-places, .headline-people, .headline-quiz, .headline-excepts {
				color: navy;
				background-color: lightblue;
				font-size: 2rem;
				padding: .3em;
			}

.ZZZ_sticky-bottom {
  position: sticky;
  bottom: 0;
  /* background-color: pink;
  padding: 1em; */
}

.center{
	text-align:center;
	/* margin: auto; */
}

.gen-reportErrorFriendly {
	color: white;
	background-color: orange;
	font-size: 1.6em;
	text-align: center;	
}

.gen-reportErrorTech {
	color: white;
	background-color: red;
	font-size: 1.8em;
	text-align: center;	
}
	
.gen-click {
	color:gray;
}

.gen-flag {
	padding:1em 0 0.8em 0;
	width: 6em;
	height: 6em;
}
	
.gen-flag-border { /* ??? */
	margin: 1em 0 0 0;
	background-color: lightgray;
}
	
.gen-logo {
	padding:1em 0 0.8em 0;
	max-width: 6em;
	max-height: 6em;
}
	
.gen-logo-border { /* ??? */
	margin: 1em 0 0 0;
	background-color: lightgray;
}

.gen-around { /* For first day panels */
	/* border:2px #96151d solid; */
	border:1px gray solid;
	border-radius: 10px;
	padding: .6em;
	margin:0 3em 1em 3em;
	/* box-shadow: 5px 10px gray; */
}



/* Start people - recog */
.pp-strip {
	border: none;
	background-color: #aaaaaa;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 20px 0 10px 0;		
	font-size: 28px;
	color: #333333;
	text-align: center;
	cursor: pointer;
	outline: none;
	/* transition: 0.4s; */
}
.pp-active, .pp-recog:hover {
	/* background-color:pink; */
	background-color:green;
}
.pp-txt-main {
	color: navy;
	font-size: 2rem;
	text-align: center;
}
.pp-txt-sub {
	color: #666666;
	font-size: 1.4rem;
	text-align: center;
}

/* Odd One Out -- ex */
.ex-box {
	border: 2px solid purple;
	border-radius: 8px;
	max-width: 95%;
	min-width: 95%;
	margin: .6rem auto .6rem auto;
	padding: .3rem;
	color: purple;
	font-weight: bold;
	font-size: 1.4rem;
	background-color: white; 
}

.ex-box-text {
	display: block;
	cursor: pointer;
	color: purple;
	font-size: 2rem !important;
	font-weight: bold;
	text-align: center;
	margin: .3rem;
}

.ex-reload {
	margin: 1rem;
	border: 1px solid lightblue;
	border-radius: 8px;
	padding: .6rem;
	font-size: 1.4rem;
}

/* For JS */
.ex-yes { background: green; }
.ex-no { background: red; }
.ex-yes, .ex-no { 
	color: white;
	font-size: 1em;
	font-weight: bold;
	width: 22rem;
	border-radius: 8px;
	margin: 0 auto 1rem auto;
	padding: .8rem;
}

/* Quiz */
.qz-flex {
	display: flex; 
}

.qz-bigbox {
	/* border: center; */
	display: block;
	width: 100%;
	margin: 1rem auto;
}

.qz-question {
	color: #444444;
	font-size: 1.5em;
	background-color: none;
	/* width: 100%; */
	text-align: center;
	padding: .8rem 0;
	margin: .1rem;
}

.qz-smallbox {
	border: center;
	background: white;
	max-width: 33rem; 
	min-width: 33rem; 
	border: 1px solid purple;
	border-radius: 8px;
	margin: .6rem;
	padding: .6rem .3rem .6rem .3rem;
}
	
.qz-possible {
	/* background-color: #ffffff; */
	/* border: 0px solid gray; */
	color: purple;
	font-size: 2.1rem;
	margin: .6rem;
	text-align: left;
	padding:0;
	/* width: 60%; */
}

.qz-correct { background: green; }
.qz-wrong  { background: red; }
.qz-correct, .qz-wrong { 
	color: white;
	font-size: .8em;
	font-weight: bold;
	width: 120px;
	border-radius: 8px;
	margin: 0 auto 12px auto;
	padding: 5px 0 !important;
}
.qz-space {
	margin: 3px;
	border-style: dotted;
	border-color: blue;
	width: 50px;
	border: 0;
}

/* Words4 */
.words-container {
	margin: .9rem;
	border: 1px solid blue;
	border-radius: 10px;
	padding: 1.2rem;
	background-color: #daeefd;
	font-size: 1.5rem;
}

.uppercase {
	text-transform: uppercase;
}

.bad {color: red}
.maybe {color: orange}
.good {color: green}

.upper { 
	color: blue; 
	text-transform: uppercase;
}

.center-box {
	/* margin: auto;
	width: 100%; */
	border: 1px solid green;
	padding: 10px;
}

/* Forms */
label {display: block; font-size: 1.4em;}

input[type=text], select {
  width: 200px;
  padding: 5px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
  color: black;
  font-size: 1.4em;
}
input[type=submit] {
  background-color: pink;
	font-size: 1.4em;
	border-radius: 10px;
	width:5em; /* testing */
}
input[type=submit]:hover {
  background-color: lime;
	font-size: 1.4em;
}

/* End of words4 */

/* max-width: Orange: 979px and 980 px Pink:    */

/* media query */
@media screen and (max-width: 980px) {
	.ZZZ_body {
		width: 100%;
		background-color:lightgray; 
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px; /* Base font size */
		margin: .1em;
	}
	
	.zzz_medium-box {
		border: 1px dashed green;
		margin: 10px;
		padding: 10px;
		width: 90%;
		max-width: 980px;
		/* min-width: 600px; */
		/* margin-left: auto; */
		/* margin-right: auto; */
	}
	
}