/* standard elements */
html { max-height: 575px; max-width: 770px}

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #999999;
	width: 770px;height: 575px;
	margin: 0;
	padding: 0;
	border: 1px solid #666666;
}
#hide {
	position: absolute; top: 58px; left: 1px; z-index: 2;
	width: 760px; height: 510px; border: 1px solid #c3242b; background: #FFF;
	padding: 10px;
	text-align: left;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; color: #999999;
	font-stretch: condensed; text-decoration: none;
}
h2 { 
	padding: 8px 0 8px 8px;
	color: #000000; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-weight: bold; font-stretch: condensed; font-size: 15px; 
	text-decoration: none; 
}
h3 { 
	padding: 0 0 10px 8px;
	color: #000000; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-weight: bold; font-stretch: condensed; font-size: 15px; 
	text-decoration: none;
}
h4 { 
	padding: 8px 0 5px 8px;
	color: #c3242b; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-weight: bold; font-stretch: condensed; font-size: 15px; 
	text-decoration: none; 
}
h5 {
	padding: 5px 0 10px 8px;
	color: #000000;  
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-weight: bold; font-stretch: condensed; font-size: 15px; 
	text-decoration: none; 
}
blockquote {
	display: block;
	font-weight: bold;
	padding-left: 28px;
}
/* structure */
.inner-container {
	background-color: transparent;
	width: 770px; height: 517px;
	border: 0px;
}
.outer-container {
	width: 770px; height: 575px;
	background-image: url(img/bg.jpg);
	border: 0px;
}
/* header & title */
.header { 
	z-index: 3;
	background-color: transparent;
	height: 58px; width: 770px;
	border: 0px;
}
/* content */
.content-container {
	position: absolute; top: 70px; left: 215px;
	background-color: transparent;
	width: 548px; height: 500px;
	border: 0px;
}
.top-container {
	position: absolute; top: 0px; left: 0px;
	background-color: transparent;
	width: 548px; height: 290px;
	border: 0px;
}
.bott-container {
	position: absolute; bottom: 0px; left: 0px;
	background-color: transparent;
	width: 548px; height: 200px;
	border: 0px; z-index: 1;
}	
.content {
	float: right;
	width: 540px;
	text-indent: 10px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-size: 14px; font-stretch: condensed; font-weight: bold;
	text-decoration: none;
}
.demo a {
	text-indent: 10px;
	color: #c3242b;
	text-decoration: none;
}
.demo  {
	position: absolute; top: 0px; left: 1px;
	width: 345px; height: 245px;
	display: block;
	color: #000000;
	background-color: transparent;
	padding: 4px 0 6px 0;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-size: 15px; font-stretch: condensed; font-weight: bold;
	text-decoration: none;
	visibility: hidden; z-index: 3;
}
.wiring {
	position: absolute; top: 25px; left: 210px;
	width: 325px; height: 265px;
	display: block;
	background-color: transparent;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed; font-size: 14px;
	text-decoration: none;
	font-weight: bold; z-index: 4;
}
.relay-line {
	position: absolute; top: 300px; left: 0px;
	width: 548px; height: 3px;
	display: block;
	border-top: solid 1px #c6c6c6; z-index: 3;
}
.relay-container {
	position: absolute; top: 300px; left: 134px;
	width: 408px; height: 200px;
	display: block;
	border-top: solid 1px #FFF;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed; font-size: 12px;
	text-decoration: none; z-index: 5;
}
.relaytxt {
	position: absolute; top: 25px; left: 125px;
	width: 270px; height: 135px;
	display: block;
	background-color: transparent; z-index: 6;
}
.relaylink a { color: #c3242b; text-decoration: none; }
.relaylink a:active { text-decoration: underline; }
.relaylink a:hover { text-decoration: underline; }
.relaylink {
	position: absolute; top: 165px; left: 155px;
	width: 150px; height: 23px;
	display: block;
	background-color: transparent;
	font-weight: bold;
}
.relay-img {
	position: absolute; top: 20px; left: 5px;
	width: 100px; height: 150px;
	display: block;
	background-color: transparent; z-index: 7;
}
/* main navigation */
.nav-container {
	position: absolute; top: 241px; left: 10px;
	background-color: transparent;
	width: 195px; height: 327px;
	border: 0px;
}
.menutitle{
	display: block;
	cursor:pointer;
	margin: 0px;
	color: #000000;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.menutitle a { 
	background:#fff url(img/blend.jpg); background-repeat: center center repeat-x;
	padding: 4px 10px 4px 15px;
	margin: 0px; 
}
.menutitle a:active { 
	background:#fff url(img/blend.jpg); background-repeat: center center repeat-x; 
}
.menutitle a:hover { 
	background:#fff url(img/blend2.jpg); background-repeat: center center repeat-x; 
}
.menut2 { font-size: 12px; }

.submenu {
	display: block;
	color: #000000;
	background-color: transparent;
	padding: 6px 0 18px 15px;
	margin: 0 19px 0 5px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 11px;
	text-decoration: none;
	font-weight: bold;
}
.submenu .descr { font-weight: normal; }

.mainpdf {
	position: absolute; bottom: 7px; left: 10px;
	width: 180px; height: 16px;
	display: block;
	background-color: transparent;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 11px;
	font-weight: bold;
}
.mainpdf a { color: #c3242b; text-decoration: none; }
.mainpdf a:active { text-decoration: underline; }
.mainpdf a:hover { text-decoration: underline; }

/* Instructions */
.instructions {
	position: absolute; top: 70px; left: 10px;
	background-color: transparent;
	width: 195px;
	height: 160px;
	border: 0px;
	color: #999;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed; font-size: 12px; font-weight: bold;
}
.instructions ol {
	list-style-type: none; margin-top: 5px; color: inherit;
}
.instructions li {
	margin-left: 15px; margin-top: 2px; margin-bottom: 10px; margin-right: 10px;
}

/* Sub navigation */
.latchmenu {
	display: block;
	width: 145px;
	cursor:pointer;
	color: #000000;
	margin-left: 0px;
	padding-left: 30px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
.latchmenu a { 
	background:#fff url(img/blend1.jpg); 
	background-repeat: center center repeat-x;
	padding-left: 0px; padding-bottom: 2px; padding-top: 2px; padding-right: 0px;
	margin-bottom: 3px; margin-top: 3px;
	text-decoration: none; 
	border: solid 1px #c3242b; 
}
.latchmenu a:active { 
	background:#fff url(img/blend1.jpg); background-repeat: center center repeat-x; 
}
.latchmenu a:hover { 
	background:#fff url(img/blend1a.jpg); background-repeat: center center repeat-x; 
}
.latchinfo { display: block; font-size: 10px; font-weight: normal; padding-left: 40px; 
	padding-right: 150px; padding-bottom: 0px; padding-top: 5px; }

.latchmenubl {
	display: block;
	width: 145px;
	cursor:pointer;
	color: #000000;
	margin-left: 0px;
	padding-left: 30px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
}
.latchmenubl a { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x;
	padding-left: 0px; padding-bottom: 2px; padding-top: 2px; padding-right: 0px;
	margin-bottom: 3px; margin-top: 3px;
	text-decoration: none; 
	border: solid 1px #c6c6c6; 
}
.latchmenubl a:active { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x; 
}
.latchmenubl a:hover { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x; 
}
.relays {
	position: absolute; top: 310px; left: 0px;
	width: 200px; height: 200px;
	display: block;
	background-color: transparent;
}
.relaymenu {
	display: block;
	width: 75px;
	cursor:pointer;
	color: #000000;
	margin-left: 0px;
	padding-left: 15px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
}
.relaymenu a { 
	background:#fff url(img/blend1.jpg); background-repeat: center center repeat-x;
	padding-left: 5px; padding-right: 0px;
	margin-bottom: 3px; margin-top: 3px;
	text-decoration: none; border: solid 1px #c3242b; 
}
.relaymenu a:active { 
	background:#fff url(img/blend1.jpg); background-repeat: center center repeat-x; 
}
.relaymenu a:hover { 
	background:#fff url(img/blend1a.jpg); background-repeat: center center repeat-x; 
}

.relaymenubl {
	display: block;
	width: 75px;
	cursor:pointer;
	color: #000000;
	margin-left: 0px;
	padding-left: 15px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-stretch: condensed; font-size: 14px; font-weight: bold;
	text-decoration: none;
}
.relaymenubl a { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x;
	padding-left: 5px; padding-right: 0px;
	margin-bottom: 3px; margin-top: 3px;
	color: #000000; text-decoration: none; 
	border: solid 1px #c6c6c6; 
}
.relaymenubl a:active { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x; 
}
.relaymenubl a:hover { 
	background:#fff url(img/bl1.jpg); background-repeat: center center repeat-x; 
}
.relaypdf { display: block; font-size: 10px; font-weight: normal; 
	padding-left: 20px; padding-right: 5px; padding-bottom: 0px; padding-top: 8px; 
}
.relayinfo { display: block; font-size: 10px; font-weight: normal; 
	padding-left: 20px; padding-right: 150px; padding-bottom: 25px; 
}