/* CSS */
html{
	overflow-y: scroll;
}

body{
	background-color:#4b8bbe;
	color:white;
	font-family:verdana;
	margin:0px;
}

p,ul,ol{
	font-size:18px;
	line-height:1.7;
}

a{
	width:100%;
	color:white;
}

hr{
	border: 1px solid #4b8bbe;
}

li{
    padding: 0.1em;
}

h2{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h3{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}

h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h2:after {
    margin: 0 0 0 20px;
}

h3:before,
h3:after {
    content: '';
    border-top: 3px dotted;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h3:after {
    margin: 0 0 0 20px;
}


.tabcontent a, .tabcontent a:visited{
	color:#4b8bbe;
	font-weight:bold;
}

h1, a:visited{
	color:white;
}

.ppLink{
	color:red;
}

.img_icons{
	float:left;
	margin-right:20px;
	margin-bottom:5px;
}

.body{
	min-width:600px;
	padding:5px;
	width:1400px;
	margin:0 auto;
}

.HTMLoutput{
	background: #272822;
	padding: 1em;
	border-radius: 0.3em;
	white-space: normal;
	color:white;
}

.heading{
	min-width: 700px;
	text-align:center;
	background-color:#646464;
	background-image:url("images/header-bg.png");
	height:90px;
	margin-bottom:10px;
	border: 1px solid #ccc;
	padding-top:10px;
}

.main{
	clear:both;
}

.level{
	margin-bottom:10px;
}

/* Style the tab */
.tab, .level {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: black;
}

.subtab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: black;
	margin:10px 0px 10px 0px;
}

.subtabWDD, .subtabSDD{
	margin: auto;
	padding: 1px;
	display: inline-block;
}

.leveltab, .tab, .subtab, .subtabWDD, .subtabSDD{
	display:flex;
	justify-content:space-evenly;
}

/* Style the buttons inside the tab */
.level .leveltab button {
	background-color:#646464;
	float:left;
	border:none;
	cursor:pointer;
	padding:14px 16px;
	transition:0.3s;
	font-size:19px;
	color:white;
	width:100%;
}

.tab button {
	background-color:#646464;
	float:left;
	border:none;
	cursor:pointer;
	padding:14px 16px;
	transition:0.3s;
	font-size:19px;
	color:white;
	width:100%;
}

.subtab button, .subtabWDD button {
	background-color:#646464;
	float:left;
	border:none;
	cursor:pointer;
	padding:14px 16px;
	transition:0.3s;
	font-size:18px;
	color:white;
	width:100%;
	min-width:70px;
}

.subtabSDD button {
	background-color:#646464;
	float:left;
	border:none;
	cursor:pointer;
	padding:14px 2px;
	transition:0.3s;
	font-size:16px;
	color:white;
	width:100%;
	min-width:70px;

}

.subtab .active, .subtabWDD .active, .subtabSDD .active, .level .leveltab .active, .tab .active{
	box-shadow: inset 0 -5px 0 #FFD43B;
	transition:0.3s;
	color:white;
	background-color: #474747;

}

/* Change background color of buttons on hover */
.tab button:hover, .subtab button:hover, .subtabWDD button:hover, .subtabSDD button:hover, .leveltab button:hover {
  box-shadow: inset 0 -5px 0 #FFD43B;
}


/* Style the tab content */
.tabcontent {
	display: block;
	padding: 6px 15px;
	background-color:white;
	color:black;
}

/* Resource Page */
#resourceUnit{
	width:100%;
	height:auto;
}

#resourcePageBox{
	background-color: #646464;
	height:100%;
	padding-left:10px;
	padding-right:10px;
}

#resourcePageBox a{
	width:300px;
	text-decoration: none;
}
#resourcePageBox a:hover{
	width:300px;
	text-decoration:none;
}

.homeSubBox{
	background-color:white;
	border: 1px solid black;
	border-radius: 10px;
	width:440px;
	height:440px;
	margin:10px 30px 10px 30px;
	color:black;
}

.resourceSubBox{
	background-color:white;
	box-shadow:0px 0px 0px 1px black inset;
	border-radius: 10px;
	width:100%;
	height:100px;
	margin:10px 0px 10px 0px;
	color:black;
	cursor: pointer;
	display:inline-block;
	display:flex;
	justify-content: center;
	align-items: center;
}

.resourceSubBox:hover{
	background-color:black;
	color:#4b8bbe;
	box-shadow:0px 0px 0px 1px yellow inset;
	transition:0.3s;
}

#resourcePageBox{
	display:flex;
	justify-content: space-around;
	position:relative;
	gap:10px;
}

.resourceUnitText{
	font-size:23px;
	text-align:center;
	margin-top:8px;
	margin-bottom:8px;
}

.subTopic{
	width:100%;
	background-color: #646464;
}

.subTopic h4{
	display:flex;
	justify-content: center;
	font-size: 22px;
	margin-bottom:10px;
}

/* Table Styling */
.UMLClassTable, .UMLClassTable td{
	width:250px;
	text-align:left;
	border:1px solid black;
	border-collapse: collapse;
}

.UMLClassTable td p{
	line-height:1;
	margin: 7px 0px 0px 7px;
}

.pastPaperTable{
	border-collapse: collapse;
	width: 100%;
}

.web_table, .html_table_body, .data_type_table, .flowchart_table, .css_table1_, .structureDiagram_table{
	margin:auto;
	width: 70%;
	background-color:black;
}

.flowchart_table .symbolCol, .structureDiagram_table .symbolCol {
	width:25%;
}

.css_table1_, .css_table2_, .html_table_{
	cursor:pointer;
}

.tag-def{
	width:70%;
	text-align:left;
}
.tag-css{
	width:70%;
	text-align:left;
}

th, td{
  text-align: center;
  padding: 8px;
  color: black;
}

th{
  background-color: #FFD43B;
  color: black;
}

td{
	background-color:white;
}

.binary_table_bottom input, .binary_table_top input{
	font-family:verdana;
	font-size:20px;
	border:none;
	text-align:center;
}

#binary_table{
	text-align:center;
	font-family:verdana;
	font-size:20px;
}

#css_example_table{
	font-family:verdana;
	margin:auto;
}

#css_example_table td{
	width:auto;
	text-align:left;
}

.floating_point, #ascii_table{
	white-space:nowrap;
	background-color:black;
}

input:focus{
	outline:none;
}

td, .top, input {
  border-collapse: collapse;
  width:50px;
  text-align: center;
  table-layout: fixed;
}

.top {
  background-color:red;
}

.img_corner{
	border-radius: 15px;
}

.sub-topic-icon{
	display:block;
	margin:auto;
}

.flowchart_table, .structureDiagram_table svg{
	stroke:black;
	stroke-width:1.5px;
	fill:white;
}

.js_example_container{
	display:flex;
	justify-content:space-evenly;
	flex-wrap: wrap;
}

.js_examples{
	border-radius:5px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	width:300px;
	height:440px;
	padding:5px;
	text-align:center;
	margin-bottom:20px;
	-webkit-transition: background 0.5s; /* For Safari 3.0 to 6.0 */
    transition: background 0.5s; /* For modern browsers */
}

.js_example_title{
	font-weight:bold;
}

.js_examples ul li{
	list-style-type:none;
	background-color:#4b8bbe;
	margin-left:0px;
	float:left;
	width:100%;
	border:1px solid black;
	margin: 0px 1px 0px 1px;
	-webkit-transition: background 1s; /* For Safari 3.0 to 6.0 */
    transition: background 1s; /* For modern browsers */
}

.js_examples:hover{
	background-color:#d4bdde;
}

.js_examples ul li:hover{
	background-color:#FFD43B;
	color:black;
	cursor:pointer;
}

.js_examples ul{
	padding-left:0px;
	display:flex;
}

#js_fastfood_images{
	display:flex;
	justify-content:space-evenly;
}

#countDownDiv{
	margin-top:10px;
	clear:both;
}

#countDownExam{
	font-size:28px;
	color:darkred;
}


/* iPad Pro 1024 width */
@media (max-width: 1024px){
	h2{
		font-size:32px;
	}
	h3{
		font-size:26px;
	}
	h4{
		font-size:22px;
		margin-bottom:15px;
	}
	p{
		padding:3px 8px 3px 8px;
		font-size:24px;
		text-align:justify;
	}
	tr,td{
		font-size:18px;
	}
	ul,ol, li{
		margin-left:10px;
		font-size:22px;
	}
	.subtab button, .subtabSDD button, .subtabWDD button, .tab button, .level .leveltab button{
		font-size:24px;
		width:100%;
		align-items: center;
		height:60px;
	}
	.web_table, #css_example_table{
		margin:auto;
		border-collapse: collapse;
		width: 90%;
		background-color:black;
	}
	tr,td{
		font-size:20px;
	}
}
/* phone 480px width */
@media only screen and (max-device-width: 480px){
	body{
		background-color:black;
	}
	h2{
		font-size:38px;
	}
	h3{
		font-size:33px;
	}
	h4{
		font-size:30px;
		margin-bottom:20px;
	}
	p{
		padding:5px 15px 5px 15px;
		font-size:28px;
		text-align:justify;
	}
	ul,ol{
		margin-top:4px;
		padding-left:80px;
	}
	li{
		font-size:26px;
	}
	.subtabSDD, .subtabWDD{
		width:100%;
	}
	.subtab{
		margin-top:10px;
	}
	.tab button, .level .leveltab button, .subtab button{
		font-size:30px;
		width:100%;
	}
	.subtabWDD button, .subtabSDD button{
		font-size:26px;
		width:330px;
	}
	hr{
		margin-top:40px;
		margin-bottom:40px;
		border: 3px solid #4b8bbe;
	}
	tr,td{
		font-size:20px;
	}
}