/* Author:    Everett George @ "http://www.jefgeorge.com"  */
/* Reference: architecture.zip @ "http://www.freewebsitetemplates.com" */

/* Overall *********************************************************/

html,
body {
	background: white;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
h2 {
	margin:  0px;
	padding: 0px;
	font-size: 20px;
	color: #383422;
	display: inline;
}
h3 {
	margin:  0px;
	padding: 0px;
	font-size: 16px;
	color: #383422;
	display: inline;
}a,
a:hover {
	cursor: pointer;
	text-decoration: underline;
}
.clear {
	clear: both;
}
#wrapper {
	text-align: left;
	margin: 2px auto;
	width: 900px;
}

/* Graphic Frame *********************************************************/
#body {
	color: #383422;
	width: 100%;
}
#body-top {
	padding-top: 9px;          /* top padding outside box */
	position: relative;
}
#body-bot {
	padding-bottom: 17px;
}

/* Overall *********************************************************/
#wrapper {
	position: relative;
	padding-top: 20px;
}

/* Title */
#tfont {
	color: #383422;
	font-weight: bolder;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}
#title {
	position: relative;
	font-size: 32px;
	top: 5px;
	left: 0px;
}
#title div,
	a,
       	a:hover {
	color: #383422;
	text-decoration: none;
}
#name {
	position: relative;
	font-size: 24px;
	top: 3px;
	left: 0px;
	text-decoration: none;
}
#name div,
	a,
       	a:hover {
	color: #383422;
	text-decoration: none;
}

/* Top Menu *********************************************************/
#nav {
	position: relative;
	top: 4px;
	left: 0px;	/* Menu Offset 104px * (8-7) */
}
#nav  a {
	width: 100px;
	height: 100px;
	background-color: orange;
  	border: 5px solid black;
	display: inline;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
	padding: 4px 4px;
	margin: 4px 4px;
	text-decoration: none;
	color: white;
	font-weight: bold;
}
#nav  a:hover {
	color: #5a5644;
}
#nav  span {
	color: #383422;
}

/* Graphic Frame */
#body-bot {
	padding-top: 10px;
}

/* Overall Buttons ******************************************************/
#btnA,
#btnH,
#btnS,
#btnW {
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	white-space: nowrap; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	white-space: normal;  
}

/* Left Cell Button *********************************************************/
#btnS a {
	background-repeat: no-repeat;
	background-image: url(../gph/btnS0.gif);
 	display: inline-block;
	width: 124px;
	height: 36px;
	padding-top: 11px;
	font-weight: bolder;
	color: #383422;
}
#btnS a:hover {
	background-image: url(../gph/btnS1.gif);
	font-weight: bolder;
	color: #383422;
}

/* Reference Button *********************************************************/
#btnW a {
	background-repeat: no-repeat;
	background-image: url(../gph/btnW0.gif);
 	display: inline-block;
	width: 124px;
	height: 45px;
	padding-top: 10px;
	text-decoration: none;
	font-weight: bolder;
	color: #383422;
}
#btnW a:hover {
	background-image: url(../gph/btnW1.gif);
	font-weight: bolder;
	color: #383422;
}

/* Audio Speaker Button *********************************************************/
#btnA a {
	background-repeat: no-repeat;
	background-image: url(../gph/sbtnA.gif);
 	display: inline-block;
	width: 23px;
	height: 12px;
}
#btnA a:hover {
	background-image: url(../gph/sbtnB.gif);
}

/* Audio Hearing Button *********************************************************/
#btnH a {
	background-repeat: no-repeat;
	background-image: url(../gph/gphSPKa.gif);
 	display: inline-block;
	height: 12px;
	width: 8px;
}
#btnH a:hover {
	background-image: url(../gph/gphSPKa.gif);
}
/* Right Cell *********************************************************/
#content {
	float: left;
	width: 474px;
	padding: 6px 36px 6px 13px;
	color: #383422;
	text-align: left;
	margin: auto;
	font-weight: normal;
	font-variant: normal;
}
#content span {
	font-size: 14px;
}
#content a,
#content h1,
#content h2,
#content h3 {
	color: #383422;
}
#content b {
	color: #383422;
	font-weight: bold;
}
#content a:hover {
	color: black;
}
#content hr {
 	display: block;
	color: #383422;
  	margin: 1em auto;
  	border-style: solid;
  	border-width: 1px;
}
#signed {
	margin-left: 310px;
}

/* Collapsing Blocks *************************************************/
.clpB0,
.clpB1 { /* main, sub button */
	margin: 2px 0px;
	background-color: #5a5644;
	cursor: pointer;
	padding: 6px;
	width: 100%;
	border: none;
	border-radius: 8px;
	text-align: left; 
	outline: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.clpB2 { /* blank button */
	margin: 0px;
	padding: 0px;
	color: black;
	background-color: white;
	cursor: pointer;
	width: 100%;
	border: none;
	border-radius: 0px;
	text-align: left; 
	outline: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.clpB0 { /* main button */
	color: #ceb085;
	font-weight: bold;
}
.clpB1 { /* sub button */
	color: white;
	font-weight: normal;
}
.clpB0:after,
.clpB1:after {
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	float: right;
	content: "◄";
	margin-left: 5px; 
}
.clpB2:after {
	color: #5a5644;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	float: left;
	content: "◄";
	margin-right: 5px; 
}
.clpB0:hover,
.clpB1:hover {
	background-color: #8b846a;
}
.clpB2:hover {
	color: #5a5644;
}
.active:after {
	font-weight: bold; 
	content: "▼";
}
#clpTxt {
	padding: 0 0 0 16px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
	font-weight: normal;
	font-variant: normal;
}
#clpTxt s {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
#clpTxt ul {
	margin-left: -2em;
}
#abox {
	border: 5px solid #8b846a;
	border-radius: 8px;
	background-color: #e5dcb9;
	color: #383422;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	padding: 5px 0px;
	margin: 2px 5px;
	white-space: nowrap;  
}
/* Collapsing Blocks *************************************************/
/* Link box */
#abox tr,
#abox td {
	margin: 0px;
	padding: 0px;
}
#abox a {
	padding: 0px 1px;
	margin:  0px -2.3px;
	text-decoration: none;
}
#abox a:hover {
	padding: 0px;
	margin: 0px -2.3px;
	color black;
	text-decoration: none;
	background-color: #ceb085;
	border: 1px solid #383422;
	border-radius: 5px;
}

/* Overall *********************************************************/
.fineline {
	border-bottom: 1px solid #383422;
	margin-bottom: 12px;
}
.fineline-flat {
	border-bottom: 1px solid #383422;
}
.clear-flat {
	margin-bottom: 4px;
}
.shift-left {
	text-align: left;
}
.shift-center {
	text-align: center;
}
.shift-right {
	text-align: right;
}

/* Copyright Notice *********************************************************/
#footer {
	font: 11px arial, sans-serif;
	color: #383422;
	text-align: right;
	padding-right: 0px;
}
#footer p {
	margin-top: 0.5em;
}
