body {
/* Always use margin:  0;  padding:  0; as margin controls for your page itself.  Setting both to 0 ensures that your page will spread to the outer edges of the browser window. */
	margin:  0;
	padding:  0;
	background-color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:62.1%;
}

h1{
/* margin-top ensures 1st header will not be overlapped by header */
	margin-top:100px;
	font-size:2.1em;
	letter-spacing:.2em;
	color:#FF9900;
	font-family:arial, sans-serif;
	text-transform:uppercase;
}

#leftbackground {
/* replace this value with the height of your header. */
	margin-top:  80px;
	margin-bottom:  0;
	margin-left:  0;
	margin-right:  0;
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top left repeat-y #333;
	color:  #000000;
}

#rightbackground {
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y #333;
}

#leftcolumn {
	float:  left;
	width:  250px;
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */

	background:  url(../layoutimages/body_bg.gif) top left repeat-y;
}

#rightcolumn {
	float:  right;
	width:  250px;
	margin:  0; 
	padding:  0;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y;
}

#contentarea {
	margin-top:  0;
	margin-bottom:  0;
	margin-left:  250px;
	margin-right:  250px;
	padding:20px 70px 20px 70px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-left:1px solid #fff;

	background-color:#333;
	color:  #fff;
	height:  1%; /*  IE hack related to float:  left bug.  */
	min-height:600px;
}

#leftcolumncontent {
	position:  absolute;
	font-size:1.2em;
	letter-spacing:.2em;
/* replace this value with the height of your header. */
	top:  100px;
	left:  0;
/* replace with the width of your left column div */
	width:  230px;
	padding-left:20px;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../layoutimages/body_bg.gif) top right repeat-y #333;
	color:  #FFFFFF;
}

#rightcolumncontent {
	position:  absolute;
/* replace this value with the height of your header. */
	top:  100px;
	right:  0;
/* replace with the width of your right column div */
	width:  230px;
	padding-left:20px;
/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
	background:  url(../../../images/catbgHD.jpg) top right repeat #333;
	color:  #FFFFFF;
}

#columnsize {
	clear:  both;
/* this is the lowest possible value that will ensure three columns.  Do not lower this value, or your layout will break up. */
	height:  1px; 
	overflow:  hidden;
	border:  none;
	margin:  0; 
	padding:  0;
	background:  transparent;
}

#header {
	position:  absolute;
	font-size:2em;
	top:  0;
	left:  0;
/* The header can be set to either a fixed width or a liquid width.  I prefer to make the header a liquid width for aesthetic purposes, but changing it to a fixed width will not affect the layout.  This is an optional property. */
	width:  100%;
/* replace this value with the height of your header. */
	height:  99px;
/* background for the header.  Replace the URL and the background color (#F2F2F2) with your choices for each.  */
	background:  url(../../../images/header-bg.jpg) top center no-repeat #000;

	color:#fff;
	border-bottom:1px solid #fff;
/* put this in to ensure that your header doesn't overlap the body of your website. */
	overflow:  hidden;
}

.logo{
float:left
}


#header ul{
font-size:.55em;
text-transform:uppercase;
font-weight:bold;
text-align:right;
}

#header ul li{
padding-right:10px;
}

#header ul li, #header ul li a{
display:inline;
}

#header ul li a{
color:orange;
}

#footer {
	margin:  0;
	padding:  0;
/*  Replace with the width of your footer.  Optional. */
	width:  100%;
/* Replace with the height of your footer.  Optional.  */
	height:  30px;
	padding-top:10px;
/* Replace with the background image and colour of your footer.  */
	background:  #000;
	color: #FF9933;
	border-top:1px solid #fff;
	text-align:right;
	
}

#nav{
font-size:1.5em;
list-style-type:none;
}
/* Styles */
a, a:visited, a:link{
color:#fff;
text-decoration:none;
}

a:hover{
color:#FF9900;
}

img{
border:none;
}

p{
font-size:1.2em;
line-height:1.6em;
letter-spacing:.1em;
}

.float-left-image{
float:left;
padding:0px 20px 10px 0px;
}

h2{
color:#FF9933;
}

h3{
color:#ff9933;
font-size:1.2em;
}

.highlight1{
color:#FF9900;
}

.highlight2, strong{
color:#ff8400;
}

.features li{
font-size:1.2em;
color:#FFCC66;
line-height:150%;
}

.center{
text-align:center;
}


/**Cams Page**/

#comp{
background-color:#666666;
border:1px solid #fff;
}
.comparison{
}

.products a{
color:#FF9900;
line-height:250%;
}