/*
 * author : nadeem elahi
 * time : Sunday October 11th 2026
 */
/*
 * w3schools/css/css_font.html
 *
 */

h1 , h2 , h3 , h4 {
	font-family : Arial , Helvetica , sans-serif ;
}
h5 , h6 , p  {
	font-family: "Times New Roman" , Times , serif ;
}
a { text-decoration : none ; }
button , input , a , textarea , .code , ol  {
	font-family: "Lucida Console" , "Courier New" , monospace ;
}
.codepgrf {
	padding-left : 25px ;
}

header , main , footer , article {
	display : block ;
}
time , sup { display : inline ; }



header {
	background-color : #fee ;
	text-align : center ;
	padding : 25px ;
}
main {
	background-color : #eaf ;
	padding : 5px ;
}

/*
 * footer
 * -make the <p> text smaller so it is smaller than h6
 */
footer {
	background-color : #ffc ;
	text-align : center ;
	padding : 25px ;
}
footer > h6:nth-child(1) {
	font-size : 10px ;
	margin : 0 ;
}
footer > p:nth-child(2) {
	font-size : 11px ;
	margin : 0 ;
}


/*
 * main
 */
.margin10 { 
	margin : 10px auto ;
}

.pg816 {
	box-sizing : border-box ;
	max-width : 816px ;
	margin : auto ;
}
.pad10 { padding : 10px ; }
.pad20 { padding : 20px ; }

/*
 * nav01
 */

#nav01ar {
	background-color : #cfd ;
}
#nav01ar > nav > a {
	display : inline-block ;
	width : 100px ;
	height : 25px ;
	line-height : 25px ;
	margin : 2px ;
	background-color : #7f7;
	text-align : center ;
}
/* moved to script02clr.js */
/*
#nav01ar > nav > a#activepg {
	background-color : #3a3 ;
}*/
#nav01Middle {
	text-align : center ;
}
#nav01Right {
	text-align : right ;
}
@media ( min-width : 450px ) {
	#nav01ar {
		overflow : hidden ;
	}

	#nav01Left ,
	#nav01Middle ,
	#nav01Right {
		float : left ;
	}
	#nav01Middle {
		width : 50% ;
	}
	#nav01Left ,
	#nav01Right {
		width : 25%
	}
}

/*
 * tables of contents
 * series - links
 */
.seriesLinks > p > a { 
	padding-left : 30px ; 
	padding-right : 30px ; 
}
.back2top { text-align : right ; padding-right : 25px ; }
.tableOfContents { 
	padding : 0 0 20px 50px ;
}
.tableOfContents > p { 
	margin : 0 ;
}

/* intro computer programming - school pg */
.articleImgLeft aside {
	text-align : center ;
	max-width : 300px ;
	margin : auto ;
	padding : 10px ;
}
.articleImgLeft aside > img {
	display : block ;
	width : 100% ;
}
.articleImgLeft div > button {
	display : block ;
	margin : 20px auto ;
	padding : 10px 50px ;
	border : none ; 
	background-color : #afa ;
}

@media ( min-width : 500px ) {
	.articleImgLeft aside {
		float : left ;
	}
}