/*
 * author: Nadeem Elahi
 * copyright May 2025
 * nadeem.elahi@gmail.com
 * nad@3deem.com
 */

/*
 * FONTS
 *
 */

h1 , h2 , h3 {
	font-family: Arial , Helvetica , sans-serif ;
}

h1 { 
	text-align: center; 
	padding-bottom: 15px;
}

p {
	font-family: "Time New Roman" , Times , serif ;
}

/*
 *
 * RESET
 *
 */

a , button { 
	text-decoration: none ; 
	cursor: pointer;
}
button {
	border: none;
	background: none;
}

canvas { display : block; }

a.learnMore  {
	display: inline-block;
	margin: 15px auto;
	padding: 5px 15px;
}


/*
 * LAYOUT
 * fullscreen 
 * sidebar
 *
 */

html , body , #fullscreen { height: 100%; }

body { margin: 0; }

.centreAlign { text-align: center; }
.rightAlign { text-align: right; }


/*
 * body > button#showSidebar
 * body > div#sidebar
 */

#showSidebar {
	position: fixed;
	top: 0px; left: 0px;
	z-index: 50;
}

#sidebar {
	position: fixed;
	width: 200px;
	top: 0px; left: -220px;
	z-index: 51;
	transition: left 1s;
}

#sidebarBody {
	padding: 5px;
}

#sidebarBroschureLinks ,
#sidebarLibraryLinks {
	padding: 5px;
}

#sidebar a { display: block; }

/*
 * body > #sidebar > button#closeSidebar
 * body > #sidebar > img 
 *
 */

#hideSidebar {
	display: block;
	position: absolute;
	top: 0px; right: 0px;
	z-index: 10; /* inside #sidebar so z-index is reset */
}

/*
 * body > canvas#cnv
 * body > div#overlay
 *
 */

#cnv , #overlay { 
	top: 0px; left: 0px;
	height: 100%; width: 100%;
	overflow: hidden; /* slides_1/2/3 goes over */
}

#cnv { 
	position: relative; /* first child */
	z-index: 10; /* below div#sidebar button#showSidebar */
}
#overlay{ 
	position: absolute; /* sibling following position: relative */
	z-index: 11; /* below div#sidebar button#showSidebar */
}

/*
 *
 * body > div#overlay > top middle , top right , left middle right , bottom
 * #otm - overlay top middle
 * #otr - overlay top right
 *
 */
#otm , #otr , #oml , #omm , #omr , #obl , #obm , #obr {
	position: absolute;
	z-index: 10; /* inside #overlay so z-index is reset */
}

#otm {
	top: 0px ; left: 50%;
	transform:translate( -50% , 0 );
	-ms-transform:translate( -50% , 0 );
}



#obl { bottom: 0px; left: 0px; }
#obm { 
	bottom: 15px; left: 50%;
	transform:translate( -50% , 0 );
	-ms-transform:translate( -50% , 0 );
}
#obr { bottom: 0px; right: 0px; }


/* 
 * button styling #sidebar #showSidebar #hideSidebar
 * fullscreen 
 * sidebar
 */

#showSidebar , #hideSidebar {
	font-size: 18px;
	font-weight: bold;
	padding: 10px;
}

/*
 * LAYOUT
 * body > #scrollableDiv_1 , _2 
 * body > .scrollableDivPadding
 *
 */

.scrollableDivPadding { padding: 10px; }

/*
 * fullscreen 
 * overlay
 * #slide_1 2 3
 *
 */

#slide_1 ,
#slide_2 ,
#slide_3 {
	position: absolute;
	z-index: 10; /* inside #overlay so z-index is reset */
	bottom: 60px;
	text-align: center;
	width: 90%;
	margin: auto;
	max-width: 400px;
	padding-bottom: 15px;
	transition: left 1s;
}
#slide_1 { 
	left: 50%;  
	transform:translate( -50% , 0% );
	-ms-transform:translate( -50% , 0% );
}
#slide_2 { 
	left: 150%; 
	transform:translate( -50% , 0% );
	-ms-transform:translate( -50% , 0% );
}
#slide_3 { 
	right: 250%; 
	transform:translate( -50% , 0% );
	-ms-transform:translate( -50% , 0% );
}

#slide_1 > h2 ,
#slide_2 > h2 ,
#slide_3 > h2 {
	margin: 10px auto 5px auto;
}

/*
 * fullscreen 
 * overlay
 * #obl , #obm , #obr
 *
 */

#gameButtons > button {
	display: inline-block;
	width: 20px ; height: 20px ;
	margin: 5px; padding: 5px;
}

/*
 * scrollableDiv_1
 * salesPitch_123
 */

#salesPitch_123 {
	box-sizing: border-box;
	margin: auto;
}

#salesPitch_123 > div {
	width: 100%; 
	text-align: center; 
	margin: auto;

	max-width: 300px;
	padding: 18px 0 10px 0;
}

#salesPitch_123 > div > img {
	max-width: 100px;
}


@media ( min-width: 650px ) {

	#salesPitch_123 {
		overflow: hidden; 
	}
	#salesPitch_123 > div {
		float: left;
		width: 33%; 

		max-width: none;
	}
}

#sp_append_1 > p ,
#sp_append_2 > p,
#sp_append_3 > p {
	height: 50px;
}


/*
 * accessibility buttons
 * black on white vs white on black
 *
 */

#otr { 
	top: 110px ; 
	right: 0px; 
	text-align: right;
}
@media ( min-width: 500px ) {

	#otr { 
		top: 0px ; 
	}
}
#accessibility { padding-right: 10px; }

#accessibility h2 {
	font-size: 14px;
}
#accessibility h3 { 
	font-size: 12px;
}

#lightDarkContrast > button { 
	font-size: 15px;
	padding: 5px 8px;
	cursor: pointer;
}

/*
 *
 * scrollableDiv_footer
 *
 */
#scrollableDiv_footer { 
	text-align: center; 
	padding: 20px 5px;
}

/*
 *
 *
 */