/* COMMON*/
	
	html, body {
		font-family: Arial !important;
		margin: 0;
		padding: 0;
	}
	#header {
		width: 100%;
		background-color: darkmagenta;
		height: 70px;
		line-height: 70px;
		text-align: left;
	}
	#header-text {
		color: white;
		font-size: 40px;
		margin-left: 20px;
		vertical-align: middle;
	}
	#pelican-pic {
		height: 65px;
		float: right;
		vertical-align: middle;
		margin-right: 10px;  
		margin-top: 5px;
	}
    #header a {
		text-decoration: none;  /* Removes underline from link*/
	}		
	.footer {
		width: 100%;
		height: 60px;
		background-color: darkmagenta;
		text-align: center;
		/* margin: 0px; */
		padding: 20px;
		line-height: 10px;
	}
	.footer-text {
		margin-top: 0px;
		font-size: 16px;
		color: white;
	}

	
	/* FIRST PAGE */

	#frontpage {
		background-color: white;
	}
	#sub-header {
		height: 70px;
		line-height: 70px;
		vertical-align: middle;
		text-align: left;
		color: black;
		font-size: 30px;
		padding-left: 20px;
		margin-bottom: 40px;
	}
	#index-flex-container {
		display: flex;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	#index-left-side {         
		flex: 15%;
	}
	#index-left-column {
		flex: 35%;
	}
	#index-right-column {
		flex: 35%;
	}
	#index-right-side {            
		flex: 15%;
	}
	.toc-title {
		color: red;
		font-size: 30px;
		margin-top: 0px;
		margin-bottom: 10px;
		margin-left: 20px;
	}
	li {
		color: black;
		font-size: 20px;
		margin-bottom: 5px;
	}
	ul {
		margin:0 1em 30px 0;
	}

	/* PAGE STUFF*/

	.page-flex-container {
		display: flex;
		margin-top: 50px;
		margin-bottom: 10px;
	}
	#page-left-column {         
		/* width: 18%; */
	}
	#page-middle-column {
/*             text-align: left;
		width: 36em; */
		width: 40em;
		margin: 0 auto;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	#page-right-column {            
		/* width: 18%; */
	}
	.article-title1 {
		color: black;
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.article-title2 {
		color: black;
		font-size: 28px;
		font-weight: bold;
		
		margin-bottom: 10px;
		/* margin-top:20px; */
	}
	.article-text {
		color: black;
		font-size: 22px;
		text-align: left;
		line-height: 1.6;    
		margin-bottom: 10px;  
	}
	.article {
		/* margin-bottom: 50px; */
	}


    /* CODE BLOCK*/

	main
	{
		display:block;
		min-width:18em;
		margin:2em auto;
	}
	figure
	{
		display:block;
		margin:1em 0;
		border:1px solid #ccc;
		border-radius:3px;
		background:#eee;
		margin-bottom: 20px;
	}
	figure figcaption
	{
		display:block;
		padding:5px 10px 4px 10px;
		border-bottom:1px solid #ccc;
		border-radius:3px 3px 0 0;
		font-weight:bold;
		background:#ddd;
		color:#777;
	}
	/* re-factor the existing styles so that the layout 
	   is on the inner code element rather than the outer pre, 
	   and extend the font reset to all descendents */
	pre, pre *
	{
		font:normal normal normal 1em/1.4 monaco, courier, monospace;
	}
	pre
	{
        /*font-size:1.0em;*/
        font-size:0.8em;
	}
	pre, pre code, pre samp
	{
		display:block;
		margin:0;
		cursor:text;
	}
	pre code, pre samp
	{
		/* explicit white-space is needed for IE7 */
		white-space:pre;
		padding:10px;
		padding-bottom: 0;
		-moz-tab-size:4;
		-o-tab-size:4;
		tab-size:4;	
		overflow-x:auto;
	}
	
	/* extra layout rules for the pre when the numbers column is present */
	pre.line-numbers
	{
		position:relative;
	}
	pre.line-numbers code, 
	pre.line-numbers samp
	{
		margin-left:3em;
		border-left:1px solid #ccc;
	}

	/* layout and counter rules for the numbers column */
	pre.line-numbers > div
	{
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:100%;
		border-radius:0 0 0 3px;
		background:#e5e5e5;
		overflow:hidden;
		counter-reset:line;
	}
	
	/* layout and counter rules for each individual number */
	pre.line-numbers > div > span
	{
		display:block;
		width:2.5em;
		padding:0 0.5em 0 0;
		text-align:right;
		color:#777;
		overflow:hidden;
		counter-increment:line;
	}
	pre.line-numbers > div > span::before
	{
		content:counter(line);
	}
	pre.line-numbers > div > span:first-child
	{
		/* adjust the first number's position 
		   to allow for the code element's padding-top */
		margin-top:10px;
	}
	pre.line-numbers > div > span:nth-child(odd)
	{
		background:#dfdfdf;
	}
	.code-red{
		color:#c55;
	}
	.code-purple{
		color: purple;
	}
	.code-blue{
		color: #3333cc;
	}
	.code-grey{
		color: grey;
	}
	/* negate the numbers column for print since it uses pre-wrap */
	@media print
	{
		pre code
		{
			overflow-x:visible;
			white-space:pre-wrap;
		}
		pre.line-numbers div
		{
			display:none;
		}
		pre.line-numbers > code, 
		pre.line-numbers > samp
		{
			margin-left:0;
		}
	}
	pre b
	{
		font-weight:normal;
		color:#039;
	}
	pre u, pre u b
	{
		text-decoration:none;
		color:#083;
	}
	pre i, pre i *, pre i * *
	{
		letter-spacing:-0.1em;
		text-decoration:none;
		font-style:normal;
		color:#c55;
	}

	/* RESPONSIVE STUFF */

    @media only screen and (max-width: 600px) {
		#pelican-pic {
			/*display: none;*/
		}
 		#index-flex-container {         
			flex-direction: column;
			margin-left: 0px;
			margin-right: 0px;
		}
		.index-side-div {
			display: none;
		}
		#page-middle-column {
			width: 90%;
		}        
		#header {
            /*text-align: center;*/
        }
		#header-text {
            font-size: 24px;
            margin-left: 20px;
		}
		#sub-header {
            font-size: 22px;
            margin-bottom: 10px;
		}
        .toc-title {
            font-size: 20px;
        }
        li {
            font-size: 18px;
		}
		.article-title1 {
            font-size: 32px;
        }
        .article-title2 {
            font-size: 24px;
        }
        .article-text {
            font-size: 18px;     
        }
		.footer {
			width: 100%;
			height: 60px;
			background-color: darkmagenta;
			text-align: center;
			/* margin: 0px; */
			padding-top: 20px;
			padding-bottom: 20px;
			padding-left: 0px;
			padding-right: 0px;
			line-height: 10px;
		}
		.footer-text {
			margin-top: 0px;
			font-size: 14px;
			color: white;
		}
	}