/************************************
all
body
container
top bar
nav bar
content
footer
other
************************************/

/*
 * all
 */
* {
    box-sizing: border-box;
}

/*
 * body
 */
body
{
	text-align: center;
	background: #000000;
	font: 12px verdana;
}
@media only screen and (max-device-width: 900px)
{
	body
	{
		font: 24px verdana;
	}
}

img
{
	max-width: 100%;
	height: auto;
}

/*
 * container
 */
#container
{
	margin: 0.83em auto;
	text-align: left;
	width: 906px;
}
@media only screen and (max-device-width: 900px)
{
	#container
	{
		max-width: 100%;
	}
}

/*
 * top bar
 */
#top_bar
{
	text-align: left;
	background: url(/_images/header_3.png) no-repeat #000000;
	color: #ffffff;
	margin: 0;
	padding: 0.25em;
	height: 10.83em;
	width: 100%;
}
@media only screen and (max-device-width: 900px)
{
	#top_bar
	{
		background: #000000;
		height: 8em;
		width: 100%;
	}
}
#top_bar h1
{
	margin: 1em 0 0.75em 0;
	font: 2.5em serif;
	text-shadow: 0.1em 0.1em 0.4em #000000;
}
#top_bar .tagline
{
	margin: 0 0 0 0;
	font: 1.5em serif;
	text-shadow:0 0 0.25em #000000;
}
@media only screen and (max-device-width: 900px)
{
	#top_bar .tagline
	{
		display: none;
	}
}

/*
 * nav bar
 */
#nav_bar
{
	background-color: rgba(15, 15, 15, 0.30) ;
	margin: 0;
	padding: 0 0.5em 0 0;
	color: #ffffff;
	height: 3.75em;
	width: 100%;
}
@media only screen and (max-device-width: 900px)
{
	#nav_bar
	{
		width: 100%;
	}
}

#nav_bar ul 
{
	display: inline-block; 
	padding: 0 0 0 0;
	margin: 1.58em auto;
	list-style: none;
	background: transparent;
}
@media all
{
	#nav_bar ul
	{
		margin: 1.08em auto;
	}
}

#nav_bar li
{
	display: inline;
	list-style: none;
	padding: 0.483em 0 0.917em 0;
	margin: 0 0.25em 0 0;
	background-color: #202080;
	background-color: #202020;
	outline: none;
}
@media only screen and (max-device-width: 900px)
{
	#nav_bar li
	{
		padding: 0.483em 0 0.917em 0;
		line-height: 233%;
	}
}

#nav_bar ul li a,
#nav_bar ul li a:visited 
{
	padding: 0.483em 1.25em 0.917em 1.25em;
	text-decoration: none;
	color: #ffffff;
	text-shadow:0 0 0.1em #000000;
	margin: 0 auto;
	outline: none;
}

#nav_bar li:hover,
#nav_bar li:hover a,
#nav_bar li a:hover
{
	background-color: #606060;
}

#nav_bar .current
{
	background-color: #404040;
}

/*
 * content
 */
#content
{
	padding: 1em;
	background: #f0f0f0;
	color: #000000;
	overflow: auto;
	min-height: 400px;
}
@media only screen and (max-device-width: 900px)
{
	#content
	{
		width: 95%;
		min-height: 95%;
	}
}
#content a,
#content a:hover,
#content a:visited 
{
	color: #101010;
}
#content h2
{
	font-size: 1.5em;
	width: 75%;
	margin: 1.5em 0 0 0;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #404040;
}
#content h3
{
	font-size: 1.25em;
	width: 40%;
	margin: 2em 0 0 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #404040;
}
#content h4
{
	font-size: 1em;
	margin: 1.75em 0 0 0;
	text-decoration: underline;
}
#content ol li ol
{
	list-style: lower-roman;
}
#content ul
{
	margin: 0 0 0 0;
	list-style: circle;
}
@media only screen and (max-device-width: 900px)
{
	#content ul
	{
		margin: 0 0 0 -5%;
	}
}
#content ul li
{
	margin-left: 1em;
}

/*
 * footer
 */
#footer_bar
{
	text-align: center;
	background-color: #202020;
	margin: 0;
	padding: 0.2em 0.25em 0 0.25em;
	color: #ffffff;
	height: 3.5em;
	font-size: 0.8em;
	text-shadow:0 0 0.25em #000000;
	width: 100%;
}
@media only screen and (max-device-width: 900px)
{
	#footer_bar
	{
		padding: 0.2em 1.25em 0 1.25em;
		width: 95%;
	}
}
#footer_bar a
{
	color: #ffffff;
}
#footer_bar a:visited 
{
	color: #dddddd;
}

/*
 * other
 */
button,
button:hover,
button:visited
{
	display: inline;
	background-color: #000000;
	color: #DDDDDD;
	padding: 0.1em 0.5em 0.25em 0.5em;
	text-decoration: none;
	cursor: pointer;
}

.code_css,
.code_html,
.code_php
{
	margin: 1em;
	padding: 0 1.25em 1.25em 1.25em;
	font-family: courier, monospace;
	background: #E0E0E0;
	white-space: pre;
	overflow-x: scroll;
}

.form_col_left,
.form_col_mid
{
	display: inline;
	margin: 0.25em 0.5em 0.25em 0;
	float: left;
}
.form_col_left
{
	width: 10em;
	text-align: right;
	clear: left;
	padding-bottom: 0.5em;
}
.form_col_mid
{
	text-align: left;
}
.form_col_spacer
{
	margin-left: 2em;
}

.no_see
{
	visibility: hidden;
}

.nota_bena
{
	margin: 1em;
	padding: 1.25em 1.25em 1.25em 1.25em;
	background: #D0D0D0;
}

.statcounter
{
	visibility: hidden;
}