body {

	margin: 0px; /* Must leave in - fixes body overflow in IE */

	padding: 0px; /* Must leave in - fixes body overflow in IE */

	background-color: #FCFCFC;

	background-image: url(images/ground_blue.gif);

	background-attachment: fixed;

	font-family: "Century Gothic", Helvetica, Tahoma, Arial, sans-serif;

	font-size: small;

	color: #00015E;

	voice-family: inherit;

}

#header {

	position: absolute;

	top: 0px;

	background-image: url(images/header-bk-mag-narrow.gif);

	background-repeat: repeat-x;

	width: 100%; /* Must keep for Safari and Opera */

	height: 75px;

}

#headerleft {

	float: left;

	margin-top: 8px;

	margin-left: 10px;

}

#headerright {

	float: right;

}

/****Menu - Navigation Styles****/

div#menu {

	position: absolute; /*This div is just a moveable container for positioning. */

	top: 76px; /* Using 'div' at the beginning of each '#nav' tag is only necessary to keep IE from choking on this menu type. If you don't do it, IE slows way down or won't use correctly. */

	left: 0px;

	right: 30%;

	clear: both;

	/*border: thin dotted #F4A460;*/

}

div#nav {

	float: left;

	margin: 0px 0 0 0px;

	background: #F6FFFF url(images/ground_blue.gif) fixed; /* Changes just the top row background except current */

	color: inherit; /* Satisfies passing CSS 2.0 standards */

}

div#nav ul {

 	margin: 0px 1px; 

	padding: 0px; 

	background: #F6FFFF;

	color: inherit;

}

div#nav li {

	position: relative;

	top: 0px;

	left: 0px; 

	list-style: none; 

	margin: 0;

  	float: left; 

	width: 6.0em; /* was 7.0em - IE looked crowded @ 800x600; aligned poorly */

	line-height: 1.75em;

	z-index: 100;

}

div#nav li#current {

	background: #26A2E2;

}

div#nav li:hover {

	background: #26A2E2;

}

/*div#nav li.submenu {

	background: #F0FFFF none no-repeat 99% 50%;

}*/

div#nav li a {

	display: block; 

	padding: 0em 0em 0.25em 0em;

  	text-decoration: none;

	width: 6.0em; /* was 7.0em - IE looked crowded @ 800x600; aligned poorly */

	color: #F6FFFF; /* changes top row anchor color - except current */

	text-align: center;

	font-size: x-small;

}



div#nav>ul a {

	width: auto;

}

div#nav ul ul {

	position: absolute;

	width: 9em;

	display: none;

}

div#nav ul ul li {

	width: 9em;

}

div#nav li.submenu ul.level2 li a,

div#nav li.submenu ul.level3 li a {

	font-size: x-small;

	font-weight: 600;

	text-align: left;

	padding-left: 1em;

	width: 11em;

	color: #404E84; /* only changes a text on level2 only lists? */

}

div#nav li.submenu li.submenu {

	background: #F6FFFF none no-repeat 99% 50%;

}

div#nav li.submenu li:hover, 

div#nav li.submenu li.submenu:hover {

	background-color: #26A2E2;

}

div#nav ul.level1 li.submenu:hover ul.level2, 

div#nav ul.level2 li.submenu:hover ul.level3 {

	display:block; 

	background-color: #F6FFFF;

}

div#nav ul.level2 {

	top: 1.9375em; /* positions the top of the first submenu just into the top menu row so it won't break */

	left: -1px;

}

div#nav ul.level3 {

	top: 0em; 

	left: 8.9375em;

}

/********/

.headTitle {

	position: relative;

	top: 126px;

	color: #FCFCFC;

	font-size: x-large;

	font-style: italic;

	font-weight: 600;

	text-align: center;

}

#mainContainer {

	position: relative;

	margin: 0px 100px 0px 100px;

/*	padding-left: 100px;   /* LC fullwidth - grail command */

/*	padding-right: 100px;  /* RC fullwidth + CC padding - grail command */

	min-width: 600px;  /* LC fullwidth + CC padding -or- 2x LC width + RC width - grail command */

	top: 126px;

	left: 0px;

	height: 100%;

	clear: both;

	background: #FCFCFC;

	border: thin solid #00015E;

}

#mainContainerWide {

	position: relative;

	margin: 0px 30px 0px 30px;

	min-width: 600px;  /* LC fullwidth + CC padding -or- 2x LC width + RC width - grail command */

	top: 126px;

	left: 0px;

	height: 100%;

	clear: both;

	background: #FCFCFC;

	border: thin solid #00015E;

}

#mainContainerXWide {

	position: relative;

	margin: 0px 100px 0px 100px;

	min-width: 760px;  /* LC fullwidth + CC padding -or- 2x LC width + RC width - grail command */

	top: 126px;

	left: 0px;

	height: 100%;

	clear: both;

	background: #FCFCFC;

	border: thin solid #00015E;

}

/*.column {

	position: relative;  /* grail command */

	/*float: left;  /* grail command */

/*}*/

#centerColumn {

	width: 100%;  /* grail command */

	padding: 0px;

	font-size: small; /* Use for Font-Size adjustments in the main body */

}

.boxIPLite {

	position: relative;

	top: 141px;

	left: 50%;

	margin-left: -335px;

	padding: 0px;

	width: 670px;

	height: 433px;

	background: #F0F8FF;

}

#imageTitle {

	width: 100%;

}

#imageTitle td.textLeft {

	text-align: left;

	padding: 0px 0px 0px 20px;

	font-size: x-large;

	font-style: italic;

	font-weight: 600;

}

td.textLeft p {

	text-align: left;

	padding: 20px 0px 10px 20px;

	font-size: large;

	font-style: italic;

	font-weight: 600;

	border-bottom: 1px solid #404E84;

}

#imageTitle td.imageCenter {

	text-align: left;

}

#imageTitle td.textRight {

	text-align: right;

	padding: 0px 20px 0px 0px;

	font-size: x-large;

	font-style: italic;

	font-weight: 600;	

}

.textTitle {

	position: relative;

	top: 0px;

	margin: 0em 0em 0em 0em;

	padding: .25em 0em .125em 0em;

	background: #B9DEFF;

	/*color: #404E84;*/

}

.textTitle p {

	color: #404E84;

	font-size: x-large;

	font-style: italic;

	font-weight: 600;

	text-align: center;

}

.textCenter {

	text-align: center;

}

#splash1 {

	position: relative; /*position must be relative for centering to work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -275px; /* - 1/2 of the width */

	margin-bottom: 20px;

	width: 550px; /* normally the width of the background graphic you want to center */

	height: 393px; /* normally the height of the background graphic */

	padding: 0px;	

	background: #404E84 url(images/sg-gr550.gif) no-repeat scroll center;

}

#splashLite1 {

	position: relative; /*position must be relative for centeringto work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -275px; /* - 1/2 of the width */

	width: 550px; /* normally the width of the background graphic you want to center */

	height: 393px; /* normally the height of the background graphic */

	padding: 0px;	

	background: #404E84 url(images/sgl-gr550.gif) no-repeat scroll center;

}

#splash2 {

	position: relative;

	top: 20px;

	left: 50%;

	margin-left: -224px;

	padding: 20px 0px 20px 0px;

	width: 448px;

	height: 318px;

	background: #FCFCFC url(images/mega.gif) no-repeat scroll;

}

#splashWebx1 {

	position: relative; /*position must be relative for centering to work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -274px; /* - 1/2 of the width */

	margin-bottom: 60px;

	width: 548px; /* normally the width of the background graphic you want to center */

	height: 559px; /* normally the height of the background graphic */

	padding: 0px;	

	background: #404E84 url(images/webmega2.gif) no-repeat scroll center;

}

#splashWebx2 {

	position: relative; /*position must be relative for centering to work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -288px; /* - 1/2 of the width */

	margin-bottom: 60px;

	width: 576px; /* normally the width of the background graphic you want to center */

	height: 327px; /* normally the height of the background graphic */

	padding: 0px;	

	background: #404E84 url(images/webx2.gif) no-repeat scroll center;

}

#splashHomeRunner {

	position: relative; /*position must be relative for centering to work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -252px; /* - 1/2 of the width */

	margin-bottom: 60px;

	width: 504px; /* normally the width of the background graphic you want to center */

	height: 360px; /* normally the height of the background graphic */

	padding: 0px;	

	background: #404E84 url(images/hr-splash.gif) no-repeat scroll center;

}

#logoCenter {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-top: 30px;

	margin-left: -200px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 400px; /* normally the width of the background graphic you want to center */

	height: 62px; /* normally the height of the background graphic */

	padding: 0px;	

}

#hrFloorplan {

	background: #F6FFFF url(images/i215-front-floorplan+hand.gif) no-repeat;

}

.imageCenter { /*for HomeRunner */

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -197px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 395px; /* normally the width of the background graphic you want to center */

	height: 366px; /* normally the height of the background graphic */

	padding: 0px;

}



.imageCenterWide {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -250px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 500px; /* normally the width of the background graphic you want to center */

	height: 206px; /* normally the height of the background graphic */

	padding: 0px;

}

.imageCenterHub {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -250px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 500px; /* normally the width of the background graphic you want to center */

	height: 593px; /* normally the height of the background graphic */

	padding: 0px;	

}

.imageCenterALC {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -252px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 504px; /* normally the width of the background graphic you want to center */

	height: 408px; /* normally the height of the background graphic */

	padding: 0px;	

}

.imageCenterHub800 {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -400px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 800px; /* normally the width of the background graphic you want to center */

	height: 949px; /* normally the height of the background graphic */

	padding: 0px;	

}

#imageCenterPSS-JBX-J-Diagram {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -300px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 600px; /* normally the width of the background graphic you want to center */

	height: 409px; /* normally the height of the background graphic */

	padding: 0px;	

}

.imageAnimated {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -180px; /* - 1/2 of the width */

	margin-bottom: 30px;

	width: 360px; /* normally the width of the background graphic you want to center */

	height: 90px; /* normally the height of the background graphic */

	padding: 0px;

}

#hrBedroomOffOn {

	background: #FCFCFC url(images/i215-bdrmOFF-ON_hand500.gif) no-repeat;

}

#hrBedroomOnOff {

	background: #FCFCFC url(images/i215-bdrmON-OFF_hand500.gif) no-repeat;

}

#hrSecurity {

	background: #FCFCFC url(images/i215-security500.gif) no-repeat;

}

#hrAudioVideo {

	background: #FCFCFC url(images/i215-remotes2-500.gif) no-repeat;

}

#hrAudioVideoHand {

	background: #FCFCFC url(images/i215-av_hand.gif) no-repeat;

}

#hrAnimated {

	background: #FCFCFC url no-repeat;

}

#hrMunsters {

	background: #FCFCFC url(images/i215-munsters500.gif) no-repeat;

}

.floatLeft {

	clear: both;

	top: 0px;

	left: 0px;

	margin: 30px 75px 30px 75px;

	/*border: thin solid #E6F0FA;*/

}

.floatLeft span.image {

	float: left;

	position: relative;

	top: 0px;

	margin: 0px 40px 20px 0px;

	}

.floatRight {

	clear: both;

	top: 0px;

	left: 0px;

	margin: 30px 75px 30px 75px;

	/*border: thin solid #E6F0FA;*/

}

.floatRight span.image {

	float: right;

	position: relative;

	top: 0px; 

	margin: 0px 0px 20px 40px;

	}

.floatBoth {

	clear: both;

	position: relative;	

	top: 0px;

	right: 0px;

	margin: 30px 75px 30px 75px;

	/*border: thin solid #E6F0FA;*/

}

.floatBoth div.imageLeft {

	float: left;

	position: relative;

	top: 1em;

	left: 0px;

	margin: 10px 40px 20px 0px;

}

.floatBoth div.imageRight {

	position: relative;

	float: right;

	top: 1em;

	right: 0px;

	margin: 10px 0px 20px 40px;

}

.floatBoth div.centerText {

	position: relative;

	top: 0px;

	left: 0px;	

	display: inline;

	text-align: center;

}

.textAlone {

  	clear: both; 

	margin: 30px 75px 30px 75px;

}

.textAlone li {

	font-weight: 500;

}

.textAlone dd {

	font-weight: normal;

}

.productBold {

	color: #00015E;

	text-shadow: Navy;

	font-weight: 600;

	font-style: italic;

}

.productBoldLarger {

	color: #00015E;

	text-shadow: Navy;

	font-weight: 600;

	font-style: italic;

	font-size: 135%;

}

.headDownloadRed {

	color: #A53B3B;

	font-size: large;

	font-style: italic;

	font-weight: bold;

}

.headDownloadYellow {

	color: #DAA520;

	font-size: large;

	font-style: italic;

	font-weight: bold;	

}

.headDownloadGreen {

	color: #006400;

	font-size: large;

	font-style: italic;

	font-weight: bold;	

}

.imageIcon {

	float: left; /* aligns icon and caption "download" under each other */

	padding: 10px 45px 10px 45px;

	border: none;

}

.imageIcon img{

	border: 0px;

}

.imageIcon a{

	text-decoration: none;

}

.smImageCenter {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	margin-left: -93px; /* - 1/2 of the width */

	margin-bottom: 0px;

	width: 186px; /* normally the width of the background graphic you want to center */

	height: 12px; /* normally the height of the background graphic */

	padding: 0px;

}

#specWrap {

	position: relative; /*position must be relative for centering to work */

	top: 20px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	bottom: 0px;

	right: 0px;

	margin-left: -40%; /* - 1/2 of the width */

	margin-bottom: 75px; /* White space of specWrap at the page bottom */

	width: 80%; /* normally the width of the background graphic you want to center */

	height: 100%; /* normally the height of the background graphic */

	padding: 0% 0% 0% 0%;

	border: 2px solid #404E84;

	background: #B9DEFF;

}

#wideWrap {

	position: relative; /*position must be relative for centering to work */

	top: 0px;

	left: 50%; /* works with "margin-left" & "width" - the 3 together will center the container */

	bottom: 0px;

	right: 0px;

	margin-left: -50%; /* - 1/2 of the width */

	margin-bottom: 0px;

	width: 100%; /* normally the width of the background graphic you want to center */

	height: 100%; /* normally the height of the background graphic */

	padding: 0% 0% 0% 0%;

/*	border: 2px solid #404E84; */

	background: #B9DEFF;

}

#specTable,

#priceTable {

	width: 100%;

}

#priceTable {

	background: #B9DEFF;

	padding: 0px 0px 0px 0px;

	margin: 10px 10px 0px 10px;

}

.specTitle {

	padding-top: 1em;

	padding-bottom: .75em;

	text-align: center;	

	font-style: italic;

	font-weight: bolder;

}

#specTable tr.even {

	width: 100%;

	background: #FFFFFF;

}

#specTable tr.odd {

	width: 100%;

	background: #B9DEFF;

}

#specTable td {

	padding: .5em 1.25em .5em 1.25em;

/*	border-bottom: 1px solid #404E84; */

}

#specTable td.leftClear {

	padding: 5px 10px 3px 10px;

	text-align: right;

	vertical-align: top;

	border-right: 1px solid #404E84;

}

#specTable td.leftClearLast {

	padding: 5px 10px 10px 10px;

	text-align: right;

	vertical-align: top;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.rightClearSmaller {

	padding: 5px 10px 3px 10px;

	font-size: 75%;

	vertical-align: top;	

}

#specTable td.rightClearSmallerLast {

	padding: 5px 10px 10px 10px;

	font-size: 75%;

	vertical-align: top;

	border-bottom: 1px solid #404E84;

}

#specTable td.headingNavyLeft {

	background: #404E84;

	font-weight: bold;

	text-align: center;

	color: #F6FFFF;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.headingNavyCenter {

	background: #404E84;

	font-weight: bold;

	text-align: left;

	color: #F6FFFF;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.headingNavyRight {

	background: #404E84;

	font-weight: bold;

	text-align: center;

	color: #F6FFFF;

	border-bottom: 1px solid #404E84;

}

#specTable td.priceLeft {

	text-align: center;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.priceCenter {

	text-align: left;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.priceRight {

	text-align: right;

	border-right: 1px solid #404E84;

	border-bottom: 1px solid #404E84;

}

#specTable td.priceRightLast {

	text-align: right;

	border-bottom: 1px solid #404E84;

}

#specTable td.downloadLine {

	text-align: left;

	border-bottom: 1px solid #404E84;

}

#specTable td.downloadLineLeft {  /*with an image icon */

	border-bottom: 1px solid #404E84;

	text-align: center;

}

#specTable td.textCell {

	padding: 10px 75px 10px 75px;

	border-bottom: 1px solid #404E84;

}

#input { 

	margin-top: 10px;

	text-align: center;

}

#leftColumn {

	background: #E6E6FA none repeat-y scroll center;

	width: 100px;  /* LC width - grail command */

	right: 100px;  /* LC full width + CC padding - grail command */	

	margin-left: -100%;  /* grail command */

}

#rightColumn {

	background: #E6E6FA none repeat-y scroll center;

	width: 100px; /* RC width - grail command */

	margin-right: -100%; /* -RC fullwidth + CC padding - grail command */

}

td.alignTop {

	vertical-align: text-top;

}

#listTable td li {

	list-style: none;

}

h1  {

	font-size : x-large;

	font-weight : bold;

	color : #Navy;

	font-style : italic;

	text-align: center;

}

h2  {

	font-size : large;

	font-weight : bold;

	color : #CD5C5C;

	font-style : italic;

	text-align: center;

}

h3  {

	font-size: large;

	color: #404E84;

	font-style: italic;

	text-align: center;

}

h4 {

	padding: .75em 0px 0px 0px;

	font-size: medium;

	color: #404E84;

	font-style: italic;

	text-align: center;

}

h5 {

	padding: .25em 0px 0px 0px;

	font-size: 100%;

	color: #404E84;

	font-style: italic;

	text-align: center;

	font-weight: 700;

}

h6 {

	padding: 0em 0px 0px 0px;

	font-size: 90%;

	color: #404E84;

	font-style: italic;

	text-align: center;

	font-weight: 900;

}

h6LeftAlign {

	padding: 0em 0px 0px 0px;

	font-size: 90%;

	color: #404E84;

	font-style: italic;

	text-align: left;

	font-weight: 900;

}

u {

	text-decoration: underline;

}

.state {

	font-size: 90%;

	font-weight: 600;

	font-style: italic;

	text-align: left;

	text-decoration: underline;

	color: #26A2E2;

}

.dlr {

	font-weight: 600;

}

.lg {

	color: #CD5C5C;

	font-style: normal;

}

.leftAlign {

	text-align: left;

}

hr.fiftyPercent {

	width: 50%;

}

dt,

dt a{

	font-weight: 600;

}

dd {

	margin-bottom: 20px;

}

.noBorder {

	border: none;

}

a:link {

	color: #00015E;

}

a:visited {

	color: Maroon;

}

a:active {

	color: #7B68EE;

}

a:hover {

	color: #CD5C5C;

}

#footer {

	clear: both;  /* grail command */

	margin: 146px 0px 10px 0px;

	text-align: center;

}

#address {

	margin: 0px 0px 20px 0px;

	font-size: 85%;

	color: #FCFCFC;

}

#bottom img {

	border: none;

}

/*** IE grail Fix ***/

* html #leftColumn {

	left: 100px; /* RC fullwidth - grail command */

}