/* ========================================================================================

Stylesheet for web pages about HTML, CSS, JavaScript related issues
April 2016

make sure @import rules are the very first rules in the stylesheet or they won't work 

======================================================================================== */

/* import the following typefaces from Google Fonts: https://www.google.com/fonts */

/* Opens Sans (sans serif) Latin, Greek, normal 400, normal 400 italic, semi bold 600, semi bold 600 italic */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic&subset=latin,greek);

/* Lato (sans serif) Latin, normal 400, normal 400 italic, light 300, light 300 italic, bold 700, bold 700 italic */
@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,300,300italic);

/* Source Sans Pro (sans serif) Latin, normal 400, normal 400 italic, light 300, light 300 italic, semi bold 600, semi bold 600 italic */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,300italic,300);

/* Inconsolata (monospace) Latin, normal 400, bold 700 */
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);


/* following css for ignorant IE to teach it to render the new HTML5 semantic elements as block */
header, section, footer, aside, nav, main, article, figure {display: block;}

body {
	font-family: "Open Sans", verdana, sans-serif;
	font-size: 90%;
	color: #332;
	background-color: #ccb;
	margin: 0;
	padding: 0;
}

header, footer {
	padding: 1em 3em;
	background-color: #ddc;
}

header {
	padding-right: 40%;
}

main {
	padding: 2em 40% 2em 5em;
}

page-title, page-subtitle, section-title {
	display: block;
	margin: 0;
	padding: 0.25em 0;
	color: #665;
}

page-title {
	font-size: 2.5em;
	font-weight: bold;
	text-shadow: 0px 0px 10px #998;
}

page-subtitle {
	font-size: 1.25em;
}

main > section > section-title {
	font-size: 2em;
	border: 1px solid #998;
	background-color: #ddc;
	padding-left: 1em;
	border-radius: 5em;
}

section {
	margin: 2em 0;
}

section > section {
	padding-left: 3em;
}

section-title ~ section section-title {
	font-size: 1.5em;
	border-bottom: 1px solid #998;
}

footer {
	font-size: smaller;
	text-align: center;
}

aside {
	float: right;
	width: 25%;
	height: 75em;
	margin: 2em 5em;
	padding: 7em 0;
	border-left: 1px solid #998;
	border-right: 1px solid #998;
	border-radius: 7em;
	text-align: center
}

#js-gif {
	box-shadow: 3px 3px 3px #665;
}

a {
	color: #c33;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #900;
}

li {
	padding: 0.2em 0;
}

code {
	display: block;
	margin: 0.5em 5em 0.5em 1em;
	padding: 0.5em;
	border-left: 1em solid #998;
	background-color: #ddc;
	font-family: inconsolata, monospace;
}

code-inline {
	display: inline;
	padding: 0 0.5em;
	background-color: #ddc;
	font-family: inconsolata, monospace;
}

table {
	border: none;
	border-collapse: collapse;
	width: 95%;									 
	margin: 0 auto;									/* center the table */
}

caption {
	border: 1px solid #998;
	background-color: #ddc;
	padding: 0.5em;
	font-weight: bold;
}

td, th {
	border: 1px solid #998;
	margin: 0;
	padding: 0.5em;
}

th {
	background-color: #ddc;
}

img {
	border: 0;
}



/* javascript will populate the page with buttons */

button {
	width: 10em; 
	height: 2.5em;
	margin-bottom: 1em;
	border: 1px solid #998;
	border-radius: 2em;
	background-color: #ddc;
	text-align: center;
	vertical-align: middle;
}

div#fontselect {
	text-align: center; 
	border-left: 1px solid #998; 
	border-right: 1px solid #998; 
	padding: 1em; 
	border-radius: 10em;
}

div#fontselect p {
	font-size: smaller;
}