/*
  Note on height: each parent component must declare a height percentage
  (or px value) all the way up the chain in order for any child component to 
  to be able to use height.  Otherwise, height will default to use the
  height of the content (height value ignored).

  Note on comments: // is invalid.  Must use traditional C-style comments.

  20191229: most borders disabled due to border-bottom rendering issues with
  Chrome.  Looks more modern with them disabled anyways.
*/

html
{
	background-color: #505050;
	text-align: center;
	padding: 0px;
	margin: 0px;
	height: 100%;
}

body
{
	background-color: #505050;
	height: 100%;
}

.wrapper
{
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: 99%;
	width: 99%;
}

/* Common attributes for the headers; each header has a different image */
.header1, .header2, .header3, .header4, .header5, .header6
{
	background-position: center; 
	background-color: #000000;
	background-repeat: no-repeat;
	background-size: cover;
	color: #FFFFFF;
	width: 100%;
}

/* Unique per-header attributes */
.header1
{
	background-image: url('images/header1.png');
}
.header2
{
	background-image: url('images/header2.png');
}
.header3
{
	background-image: url('images/header3.png');
}
.header4
{
	background-image: url('images/header4.png');
}
.header5
{
	background-image: url('images/header5.png');
}
.header6
{
	background-image: url('images/header6.png');
}

h1 {
	font-size: 50px;
	font-family: "Lucida Console","DejaVu Sans Mono","Bitstream Vera Sans Mono",sans-serif,monospace;
	padding: 2%;
	text-decoration: none;
}

/* Navigation tabs */
.nav
{
	text-align: center;
	margin: 0px 0px;
	/* margin-top: -12px; */
	/* background: #000000; */
}

.nav ul li
{
	list-style: none;
	display: inline;
	margin: 0px 2px;
}

.nav ul li a
{
	color: #FFFFFF;
	background: #404040;
	text-decoration: none;
	padding: 1%;
	font-size: 20px;
}

.nav ul li a:hover
{
	color: #FFFFFF;
	background: #2C2C2C;
}

.nav ul li a#active
{
	color: #FFFFFF;
	background: #000000;
}

.tabs
{
	background: #404040;
	color: #FFFFFF;
	margin: auto 3px;
	display: inline;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Lucida Console","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;
}

.tabs a
{
	color: #FFFFFF;
	background: #404040;
	/* border: 3px solid #404040; */
	/* border-bottom: 0px solid #000000; */
	text-decoration: none;
	padding: 10px 15px;
}

.tabs a:hover
{
	color: #FFFFFF;
	background: #2C2C2C;
	/* border: 3px solid #404040; */
	/* border-bottom: 0px solid #000000; */
	padding: 10px 15px;
}

.tabs a#active
{
	color: #FFFFFF;
	background: #000000;
	/* border: 3px solid #404040; */
	/* border-bottom: 3px solid #000000; */
	padding: 10px 15px;
}

.content
{
	background: #000000;
	color: #FFFFFF;
	min-height: 400px;
	width: 70%;
	overflow: auto;
	text-align: left;
	margin: 10px auto 0px auto;
	padding: 10px 10px 10px 10px;
	/* border: 3px solid #404040; */
	/* border-top: 3px solid #404040; */
	font-family: "DejaVu Sans Mono","Bitstream Vera Sans Mono",sans-serif,monospace;
}

.content ul.square
{
	list-style-type: square;
	font-size: 85%;
}

.content p.small
{
	font-size: 75%;
}

.content p.smaller
{
	margin: 10px 10px 10px 10px;
	font-size: 85%;
}

.content p.bold
{
	font-weight: bold;
}

.content a
{
	color: #777;
	text-decoration: none;
}

.content a:hover
{
	text-decoration: underline;
}

.content h3
{
	text-align: left;
	text-decoration: underline;
	padding-top: 2%;
}

.content h4
{
	text-align: left;
	text-decoration: none;
	font-weight: bold;
}

.content a.customers
{
	color: #A0A0A0;
}

.content table.customers
{
	width: 100%;
}

.content td.customers
{
	padding: 0px 15px 0px 0px;
	vertical-align: top;
	text-align: left;
}

.email
{
	padding-top: 10%;
	text-align: center;
}

.box_right
{
	float: right;
	width: 20%;
	border: 1px solid #404040;
	padding: 0 1% 0 1%;
	/* padding: 1%; */
	margin: 1%;
}

.box_left
{
	float: left;
	width: 20%;
	border: 1px solid #404040;
	padding: 0 1% 0 1%;
	/* padding: 1%; */
	margin: 1%;
}

.footer
{
	background: #2C2C2C;
	color: #FFFFFF;
	width: 70%;
	text-align: center;
	padding: 1px 10px 1px 10px;
	border: 3px solid #404040;
	margin: 5px auto 5px auto;
}

.footer a
{
	color: #FFFFFF;
	text-decoration: none;
}

.footer a:hover
{
	text-decoration: underline;
}