@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */

/* START - CMS Overides */
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.page-column-center { padding: 10px !important; }
.category-list, div.category-list-item { margin: 0 auto !important; }



h1 {
	background: #0f457c !important;
	border-bottom: none !important;
	color: #fff;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 24px;
	padding: 5px 10px 5px 10px;
	text-decoration: none !important;
}
h2,
h2.one {
  background: none;
  background-repeat: no-repeat;
  border: none;
  color: #303030;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 300 !important;
  font-variant: normal;
  line-height: 24px;
  margin: 0;
  padding: 0;
  text-decoration: none !important;
}
h2.one {
	background: #0f457c;
	border-bottom: none !important;
	color: #fff;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 14px;
	font-weight: 600 !important;
	line-height: 20px;
	padding: 5px 5px 5px 10px;
	text-decoration: none !important;
}
h2.headline,
h2.light {
  color: #2383c6 !important;
  font-weight: 300 !important;
}
h2.headline {
  border-bottom: 1px solid #c3c8cb;
  padding: 4px 0 !important;
}
h2 a {
  color: #2383c6 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 24px !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 300 !important;
  line-height: 24px;
  margin-top: 0;
  text-decoration: none;
}
h2 a:hover {
  border-bottom: none;
  color: #2570b8 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  line-height: 24px;
  margin-top: 0;
  text-decoration: none;
}

/* Start - Paragraph Styles */
p {
	clear: none;
	color: #292828 !important;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 18px;
	margin: .8em 0;
	overflow: hidden;
}
p.time-stamp {
  border-top: 1px solid #c3c8cb;
  font-size: 12px !important;
  padding-top: 2px !important;
}
/* End - Paragraph Styles */

div.product-list-control { margin-bottom: 5px !important; }
	div.product-list-control input { margin: 0 auto 5px !important; }

div.product-list-qty { text-align: center !important; }

div.product-list-text { margin-bottom: 5px !important; }

div.product-list-rating table { margin: 0 auto !important; }

div.prod-detail-rating { margin-bottom: 5px !important; }

div.prod-detail-email-friend { margin-top: 8px !important; }

div.prod-detail-purchase .label { font-weight: bold !important; margin-right: 4px !important; }

input.prod-detail-add { margin-left: 5px !important; }

div.prod-detail-rating-stat table tr td { text-align: left !important; }

div.prod-detail-rating-stat table tr td strong { line-height: 18px !important; margin-right: 5px; }

div.prod-detail-rating-stat table tr td strong, 
div.prod-detail-rating-stat table tr td table { float: left !important; }

div.checkout-options { margin-bottom: 5px !important; text-align: center !important; }

a#ctl00_ctl08_hypCart { 
	background: #2c85c2 !important;
	border-bottom: none !important;
	color: #fff !important;
	display: inline-block;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 12px;
	font-weight: 400 !important;
	line-height: 18px;
	margin: 5px auto 0 !important;
	padding: 5px 10px;
	text-decoration: none !important;
}

td.content-nav h5 { color: #363e4a !important; text-align: center !important; }

ul.arrow li { margin-left: 5px !important; }
/* START - CMS Overides */

/* START - scrollUp Style */
#scrollUp { background: #E6E6E6 url(../images/btns/btn-scrollup.png) no-repeat; bottom: 0px; -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2); height: 70px; margin-bottom: -10px; right: 30px; -webkit-transition: margin-bottom 150ms linear; -moz-transition: margin-bottom 150ms linear; transition: margin-bottom 150ms linear; width: 70px; }
#scrollUp:hover { border-bottom: none; margin-bottom: 0px; }
/* END - scrollUp Style */

/* START - HEADER STYLES - Including main logo, catalog link and nav menu */

div#wrapper td.page-header { background: url(../images/bkg-menu-header.png) 0 0 repeat-x; background-color: #0c1840 !important; border: 0 !important; height: 196px; margin: 0; padding: 0; position: relative; }

tr.page-body { background-color: #fff; }

#ctl00_bodyContent, div#wrapper td.page-column-center { border-left: #c8ced0 solid 1px; border-right: #c8ced0 solid 1px; }

#header-top { 
	background: #0c1840 url(../images/bkg_ov-header.jpg) top left no-repeat;
	height: 200px;
	margin: 0 auto;
	width: 100%;
}
	
	#header-top #main-logo {
		background:url(../images/optiview-logo-lrg.png) 0 0 no-repeat;
		color: #fff;
		display: inline-block;
		float: left;
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		font-variant: uppercase;
		font-weight: 600;
		height: 100px;
		margin: 25px 0 0 10px;
		padding: 0 0 0 95px;
		width: 350px;
	}
	
	#header-top #main-logo:hover {
		-moz-opacity: 0.90; 
		-khtml-opacity: 0.90; 
		opacity: 0.90; 
		filter:alpha(opacity=90); 
	}

		#header-top #main-logo #logo-text {
			display: inline-block;
			margin: 25px 0 2px;
			vertical-align: top;
		}
		
		#header-top #main-logo span {
			display: inline-block;
			letter-spacing: .5px;
		}
		
		#header-top #main-logo .logo-tagline {
			border-bottom: 1px solid #fff;
			font-size: 16px;
			margin-bottom: 1px;
		}
		
		#header-top #optiview-catalog {
			display: inline-block;
			float: right;
			height: 125px;
			margin: 12px 10px 0 0;
			width: 225px;
		}

#header-nav {
	background-color: #0f457c;
	border-bottom: #0c1840 1px solid;
	border-top: #3087C3 1px solid;
	height: 50px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	bottom: 0;
	width: 100%;
}

	#header-nav a {
		color: #fff;
		display: inline-block;
		height: 50px;
		padding: 0;
		text-decoration: none;
		text-transform: uppercase;
		transition: background 0.8s;
	}
	
		#header-nav .nav-links { 
			background-color: #0f457c; 
			float: left;
			font-family: 'Open Sans', sans-serif;
			font-size: 14px;
			font-variant: uppercase;
			font-weight: 600; 
			line-height: 50px;
			padding: 0 20px; 
		}
			#header-nav .nav-links:hover { background-color: #2066a0; }

	#header-nav .nav-btns { 
		background: #0f457c url(../images/btns-nav-social.png) no-repeat;
		display: inline-block;
		float: left;
		height: 35px;
		margin: 7px 10px 0 0;
		transition: none; 
		width: 35px; 
	}
	
	#header-nav .btn-home { background-position: 0 0; float: left; }
		
	#header-nav .nav-social { float: right; }
	
	#header-nav .btn-fb { background-position: 0 0; margin-left: 15px; }
		#header-nav .btn-fb:hover { background-position: 0 -35px; }
		
	#header-nav .btn-yt { background-position: -35px 0; margin-right: 15px; }
		#header-nav .btn-yt:hover { background-position: -35px -35px; }

	#header-nav #nav-search {
		background-color: #fff;
		float: right;
		height: 30px;
		margin: 10px 20px 0;
		position: relative;
		width: 286px;
	}
	
	#header-nav #nav-search table {
		height: 30px;
		width: 300px;
	}
	
	#header-nav #nav-search table tr,
	#header-nav #nav-search table td,
	#header-nav #nav-search table .mod-body-tl, 
	#header-nav #nav-search table .mod-body-tp, 
	#header-nav #nav-search table .mod-body-tr,
	#header-nav #nav-search table mod-body-bl,
	#header-nav #nav-search table mod-body-bt,
	#header-nav #nav-search table mod-body-br { height: 0 !important; padding: 0 !important; width: 0 !important; }
	
	#header-nav #nav-search div#ctl00_ctl03_pnlSearch {
	}
	
	#header-nav #nav-search div#ctl00_ctl03_pnlSearch #ctl00_ctl03_txtSearch {
		border: none !important;
		width: 250px !important;
	}

/* END - HEADER STYLES */


/* START - SIDE NAV STYLES */

/* Start - Multi-level Side-Bar Menu Styles */


.sb-nav { float: left; position: relative; }
	
	.sb-nav ul, 
	.sb-nav ul li {
		list-style: none; 
		margin: 0; 
		padding: 0;
		z-index: 1000;
	}
	
	/**** MENU HEADERS ****/
	div.sb-nav a.cat-header, 
	div.cat-header {
		background: #262e3c url(../images/bkg-menu-header.png) 0 0 repeat-x;
		border-top: 1px solid #67727e;
		color: #fff !important;
		display: inline-block;
		font-family: 'Open Sans', sans-serif !important;
		font-size: 14px;
		font-weight: 600 !important;
		height: 30px;
		line-height: 30px !important;
		padding-left: 10px;
		text-decoration: none;
		width: 210px;
	}
		div.sb-nav a.cat-header:hover { -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; filter:alpha(opacity=90); cursor: pointer; }

	/**** FIRST LEVEL MENU ****/
	.sb-nav ul li { background-color: #fff; cursor: pointer; width: 210px; }
		.sb-nav ul li:hover { background-color:#3087c3; position: relative; }
	
		.sb-nav ul li a, 
		.sb-nav ul li:hover ul li a,
		.sb-nav ul li:hover a,
		.sb-nav ul li:hover ul li a {
			color: #0f457c !important;
			display: inline-block;
			font-family: 'Open Sans', sans-serif !important;
			font-size: 14px !important;
			font-weight: 400 !important;
			line-height: 30px !important;
			padding: 0 10px;
			text-decoration: none;
			width: 210px !important;
		}
		
		.sb-nav ul li a { width: 188px; }
			.sb-nav ul li:hover a, .sb-nav ul li:hover ul li a { color: #fff !important; }
			
		.sb-nav ul li .sb-menu:after {
			background: url(../images/nav-arrow-right.png) 0 0 no-repeat;
			content: "";
			display: inline-block;
			float: right;
			height: 12px;
			margin-top: 9px;
			width: 7px;  
		}
			.sb-nav ul li:hover .sb-menu:after { background-position: 0 -12px; }

			/**** SECOND LEVEL MENU ****/
			/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
			.sb-nav ul li ul {
				display: none;
				position: absolute;
				-moz-box-shadow: 0px 2px 3px #000000;
				-webkit-box-shadow: 0px 2px 3px #000000;
				box-shadow: 0px 2px 3px #000000;
				-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(enabled = false)" !important;
				/* For IE 5.5 - 7 */
				filter: "progid:DXImageTransform.Microsoft.Dropshadow(enabled = false)" !important; 
			}
			
			/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
			.sb-nav ul li:hover ul { background-color: #0f457c; display: inline-block; left: 210px; top: 0px;  }
			
				/* we apply different background color to 2nd level menu items*/
				.sb-nav ul li ul li { background-color: #0f457c; transition: background 0.6s; width: 180px; }
				
					/* We change the background color for the level 2 submenu when hovering the menu */
					.sb-nav ul li:hover ul li:hover { background-color: #2066a0; }
						
/* End - Multi-level Side-Bar Menu Styles */

/* Start - Resources & Tools Side-Bar Menu Styles */

#menu-resources { float: left; position:relative; }

	#menu-resources a.btn,
	#menu-resources  a.btn:hover {
		background: url(../images/bkg-resources.png) 0 0 repeat-x;
		border-bottom: #c8ced0 1px solid;
		color: #0f457c !important;
		display: inline-block;
		float: left;
		font-family: 'Roboto Condensed', sans-serif !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		height: 105px;
		line-height: 14px !important;
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background 0.8s;
		width: 104.5px;
	}
		#menu-resources  a.btn:hover  { background: url(../images/bkg-resources-hover.png) 0 0 repeat-x; }
		
	.menu-resources .right { border-left: #c8ced0 1px solid; }
	
		.menu-resources  a.btn span {
			background: url(../images/icns-solutions.png) no-repeat;
			display: block;
			height: 60px;
			margin: 8px auto 1px;
			overflow: hidden;
			position: relative;
			width: 60px;
		}

		#icn-solutions { background-position: 0 0; }
		#icn-notifications { background-position: 0 -60px; }
		#icn-demos { background-position: 0 -120px; }
		#icn-tools { background-position: 0 -180px; }
		#icn-faqs { background-position: 0 -240px; }
		#icn-media { background-position: 0 -300px; }
		#icn-support { background-position: 0 -360px; }
		#icn-feedback { background-position: 0 -420px; }
		#icn-bus { background-position: 0 -480px; }
		#icn-dealer { background-position: 0 -540px; }

/* End - Resources & Tools Side-Bar Menu Styles */

/* END - SIDE NAV STYLES */

/* START - HOMEPAGE ELEMENTS STYLES */

/* Start - Highlight Bar (What's New, On Sale & Clearance Links) / Hightlight Grid (Top Category Links) */

.highlight-title {
	background-color: #0f457c; 
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	height: 30px;
	line-height: 30px;
	margin: 10px auto 5px;
	padding: 0 10px;
	width: 600px;
}

.highlight-title-2 {
	background-color: #0f457c; 
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	height: 30px;
	line-height: 30px;
	margin: 10px auto 5px;
	padding: 0 10px;
	width: 600px;
}

.highlight-bar-2, .highlight-grid-2 { margin: 10px auto 0; padding: 0; width: 600px; }

.highlight-bar-2 li, .highlight-grid-2 li { float: left; list-style: none; }

	.highlight-bar-2 li a, 
	.highlight-grid-2 li a { 
		background-color: #fff; 
		display: inline-block;
		transition: background 0.8s; 
	}
	
	.highlight-grid-2 { height: 200px; }

	.highlight-grid-2 li { margin: 0 5px 5px 0; }
	
	.highlight-grid-2 li:nth-child(4n+0) { margin-right: 0; }

		.highlight-grid-2 li a {
			background: #fff;
			color: #000 !important;
			font-family: 'Open Sans', sans-serif !important; 
			font-size: 14px !important;
			font-weight: 600 !important;
			height: 160px;
			line-height: 16px;
			text-align: center;
			text-decoration: none;
			
			width: 146px;
		}
			.highlight-grid-2 li a:hover { 
				background: #fff 0 0 no-repeat;
				line-height: 16px; 
			}
	
			.highlight-grid-2 li a img {
				display: block;
				height: 100px;
				margin: 15px auto 5px;
				width: 100px;
			} 
			
			.highlight-grid-2 li a img {
				display: block;
				height: 100px;
				margin: 15px auto 5px;
				width: 100px;
			}
			
		.highlight-grid-2 li .new-cat {
			
		}
			.highlight-grid-2 li .new-cat:hover {
				
			}	

.highlight-bar, .highlight-grid { margin: 10px auto 0; padding: 0; width: 600px; }

.highlight-bar li, .highlight-grid li { float: left; list-style: none; }

	.highlight-bar li a, 
	.highlight-grid li a { 
		background-color: #3087c3; 
		display: inline-block;
		transition: background 0.8s; 
	}
		.highlight-bar a:hover, .highlight-grid a:hover { background-color: #4593c9; }

.highlight-bar { height: 80px; }

	.highlight-bar li a {
		float: left;
		font-weight: 700;
		height: 80px;
		padding: 10px;
		text-align: right;
		text-decoration: none;
		width: 200px;	
	}
	
	.highlight-bar li .whats-new { background: #3087c3 url(../images/bkg-whats-new.jpg) 0 0  no-repeat; }
	.highlight-bar li .on-sale { background: #3087c3 url(../images/bkg-onsale.jpg) 0 0  no-repeat; }
	.highlight-bar li .clearance { background: #3087c3 url(../images/bkg-cleance.jpg) 0 0  no-repeat; }
	
		.highlight-bar li a span { display: block; float: right; }
		
		.highlight-bar li a .title { 
			color: #fff;
			font-family: 'Open Sans', sans-serif; 
			font-size: 16px;
			font-weight: 700;
			text-align: right;
			text-shadow: 1px 1px 1px #000;
			width: 100%;
		}
		
		.highlight-bar li a .btn {
			background-color: #febf10;
			color: #000;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 14px;
			font-weight: 600;
			height: 24px;
			line-height: 24px;
			margin-top: 5px;
			text-align: center;
			text-transform: uppercase;
			transition: background 0.4s;
			width: 80px;
		}
			.highlight-bar li a:hover .btn { background-color: #fff; color: #0f457c; }

.highlight-grid { height: 325px; }

	.highlight-grid li { margin: 0 5px 5px 0; }
	
	.highlight-grid li:nth-child(4n+0) { margin-right: 0; }

		.highlight-grid li a {
			background: #3087c3 url(../images/bkg-highlight-grid.png) 0 0 no-repeat;
			color: #fff !important;
			font-family: 'Open Sans', sans-serif !important; 
			font-size: 14px !important;
			font-weight: 600 !important;
			height: 160px;
			line-height: 16px;
			text-align: center;
			text-decoration: none;
			text-shadow: 1px 1px 1px #0f457c;
			width: 146px;
		}
		
				.highlight-grid li a .feat-cat-starlight {
			background: url(../images/bkg-highlight-featured-starlight.png) 0 0 no-repeat;
			color: #fff !important;
			font-family: 'Open Sans', sans-serif !important; 
			font-size: 14px !important;
			font-weight: 600 !important;
			height: 160px;
			line-height: 16px;
			text-align: center;
			text-decoration: none;
			text-shadow: 1px 1px 1px #0f457c;
			width: 146px;
		}
			.highlight-grid li a:hover { 
				background: #3087c3 url(../images/bkg-highlight-grid-hover.png) 0 0 no-repeat;
				line-height: 16px; 
			}
			
			.highlight-grid li a .feat-cat-starlight:hover { 
				background: url(../images/bkg-highlight-featured-starlight-hover.png) 0 0 no-repeat;
				line-height: 16px; 
			}
			
			.highlight-grid li a img {
				display: block;
				height: 100px;
				margin: 15px auto 5px;
				width: 100px;
			}
			
			.highlight-grid-2 li a img {
				display: block;
				height: 100px;
				margin: 15px auto 5px;
				width: 100px;
			}
			
		.highlight-grid li .new-cat {
			background-image: url(../images/bkg-highlight-new-2.png);
		}
			.highlight-grid li .new-cat:hover {
				background-image: url(../images/bkg-highlight-new-2-hover.png);
			}	
			
		.highlight-grid li .feat-cat {
			background-image: url(../images/bkg-highlight-featured-2.png);
		}
			.highlight-grid li .feat-cat:hover {
				background-image: url(../images/bkg-highlight-featured-2-hover.png);
			}
		.highlight-grid li .feat-cat-starlight {
			background-image: url(../images/bkg-highlight-featured-starlight.png);
		}
			.highlight-grid li .feat-cat-starlight:hover {
				background-image: url(../images/bkg-highlight-featured-starlight-hover.png);
			}
			
					.highlight-grid li .feat-cat-license-plate {
			background-image: url(../images/bkg-highlight-featured-license-plate.png);
		}
			.highlight-grid li .feat-cat-license-plate:hover {
				background-image: url(../images/bkg-highlight-featured-license-plate.png);
			}
					.highlight-grid li .feat-cat-weatherproof {
			background-image: url(../images/bkg-highlight-featured-weatherproof.png);
		}
			.highlight-grid li .feat-cat-weatherproof:hover {
				background-image: url(../images/bkg-highlight-featured-weatherproof.png);
			}
		.highlight-grid li .feat-cat-vms {
			background-image: url(../images/bkg-highlight-vms.png);
		}
			.highlight-grid li .feat-cat-vms:hover {
				background-image: url(../images/bkg-highlight-vms.png);
			}
			.highlight-grid li .feat-cat-ip12f {
			background-image: url(../images/bkg-highlight-ip12f.png);
		}
			.highlight-grid li .feat-cat-ip12f:hover {
				background-image: url(../images/bkg-highlight-ip12f.png);
			}
					.highlight-grid li .new-cat-1 {
			background-image: url(../images/bkg-highlight-new_1.png);
		}
			.highlight-grid li .new-cat-1:hover {
				background-image: url(../images/bkg-highlight-new_1.png);
			}
					.highlight-grid li .new-cat-2 {
			background-image: url(../images/bkg-highlight-new_2.png);
		}
			.highlight-grid li .new-cat-2:hover {
				background-image: url(../images/bkg-highlight-new_2.png);
			}
					.highlight-grid li .new-cat-3 {
			background-image: url(../images/bkg-highlight-new_3.png);
		}
			.highlight-grid li .new-cat-3:hover {
				background-image: url(../images/bkg-highlight-new_3.png);
			}
			
/* End - Highlight Bar (What's New, On Sale & Clearance Links) / Hightlight Grid (Top Category Links) */	


/* Start - Homepage Banners Styles  */
.banners-homepage {
	display: block;
	margin: 10px auto 0;
	position: relative;
	width: 600px;
}

	.banners-homepage .btn {
		background-color: #febf10;
		bottom: 10px;
		color: #000;
		display: block;
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 14px;
		font-weight: 600;
		height: 24px;
		line-height: 24px;
		margin-top: 5px;
		position: absolute;
		right: 15px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background 0.4s;
		width: 90px;
	}
		.banners-homepage:hover .btn { background-color: #fff; color: #0f457c; }

#banner-apps-and-solutions { background: url(../images/optiview-banner_applications-and-solutions.jpg) 0 0 no-repeat; height: 120px; }
#banner-about-optiview { background: url(../images/optiview-banner-about-optiview.jpg) 0 0 no-repeat; height: 180px; }

/* End - Homepage Banners Styles  */

/* END - HOMEPAGE ELEMENTS STYLES */

/* START - FOOTER STYLES */
#footer-nav {  height: 160px; padding: 20px; width: 1040px; }
	
		#footer-nav .footer-list { float: left; margin: 0 20px 0 0; padding: 0; }
		
			#footer-nav .footer-list li {
				color: #fff;
				font-family: 'Open Sans', sans-serif !important;
				font-size: 14px;
				line-height: 18px;
				list-style-type: none;
			}
			
			#footer-nav .footer-list li:first-child { margin-bottom: 2px; text-transform: uppercase; }
			
				#footer-nav .footer-list li a {
					color: #929DA2;
					font-family: 'Open Sans', sans-serif !important;
					font-size: 12px;
					font-weight: 400;
					text-decoration: none;
					transition: color 0.6s;
				}
					#footer-nav .footer-list li a:hover { color: #fff; }
		
		#footer-nav .footer-social { float: right; margin: 0; }

			#footer-nav .footer-social .social-btns { 
				background: url(../images/btns-footer.png) no-repeat; 
				display: inline-block;
				float: left;
				height: 40px;
				margin: 2px 5px 0 0; 
				width: 40px; 
			}
			
			#footer-nav .footer-social .btn-fb { background-position: 0 0; }
				#footer-nav .footer-list .btn-fb:hover { background-position: 0 -40px; }
				
			#footer-nav .footer-social .btn-yt { background-position: -40px 0; }
				#footer-nav .footer-social .btn-yt:hover { background-position: -40px -40px; }

#copyright { 
	background-color: #1c232d;
	color: #929DA2;
	height: 40px;
	padding: 0 20px;
	width: 1040px;
}

	#copyright span,
	#copyright a {
		font-family: 'Open Sans', sans-serif !important;
		font-size: 12px;
		font-weight: 400;
		line-height: 40px;
	}

	#copyright a {
		color: #fff;
		padding-bottom: 2px;
		text-decoration: none;
		transition: color 0.6s;
	}
		#copyright a:hover { color: #fff; border-bottom: #fff 1px solid; }
/* END - FOOTER STYLES */

.top-banner {
	background-color: #3087C3;
	
	margin: 0 auto;
	padding: 10px 10px 10px 115px;
	width: 600px;
}

.bkg-alerts { background: #3087C3 url(../images/bkg-service-alerts.png) 0 0 no-repeat; height: 120px; }
.bkg-feedback { background: #3087C3 url(../images/bkg-customer-feedback.png) 0 0 no-repeat; height: 120px; }
.bkg-media { background: #3087C3 url(../images/bkg-cctv-media.png) 0 0 no-repeat; height: 120px; }
.bkg-tools { background: #3087C3 url(../images/bkg-cctv-tools.png) 0 0 no-repeat; height: 120px; padding-left: 100px; }

.top-category { height: 150px; }

.tools-grid { 
	background: #3087C3; 
	min-height: 100px; 
	padding: 5px 10px 5px; 
	width: 600px; 
}

.tools-grid .tools-cell {
	background: 0 0 no-repeat;
	display: inline-block;
	height: 80px;
	padding: 0 0 0 80px;
	width:288px;
}

#tc-lens-calculator { background-image: url(../images/icn-tools-lens-cal.png); }
#tc-metric-conversions { background-image: url(../images/icn-tool-metric-conversions.png); }
#tc-disc-calculator { background-image: url(../images/icn-tool-metric-conversions.png); }

.tools-grid .tools-cell h6 { 
	color: #fff;
	display: inline-block;
	float: left;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}

.tools-grid .tools-cell span {
	background-color: #febf10;
	color: #000;
	display: inline-block;
	font-size: 14px;
	float: right;
	height: 24px;
	line-height: 24px;
	margin-top: 24px;
	text-align: center;
	width: 60px;
}

.tools-grid .tools-cell p {
	color: #fff;
	display: inline-block;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 12px;
	font-weight: 400;
	height:42px;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
	width: 140px;
}

	.top-banner h4 {
		background: none;
		color: #FFF;
		font-family: 'Roboto Condensed', sans-serif;
		display: inline-block;
		font-size: 36px;
		font-weight: 400 !important;
		line-height: 36px;
		margin: 0 !important;
		text-decoration: none !important;
		padding: 0;
	}
	
	.top-banner p {
		color: #FFF !important;
		font-family: 'Open Sans', sans-serif !important;
		font-size: 12px;
		line-height: 1.3em;
	}

			
			#mb-mobile { background: url(../images/icn-mb-mobile-compatible.png) 0 0 no-repeat; border-right: solid 1px #C8CED0; padding-right: 10px; width: 287px; }
			#mb-mobile-wide { background: url(../images/icn-mb-mobile-compatible.png) 0 0 no-repeat; width: 580px; }
			#mb-solutions { background: url(../images/icn-mb-apps-and-solutions.png) 0 0 no-repeat; width: 288px; }
			#mb-solutions-wide { background: url(../images/icn-mb-apps-and-solutions.png) 0 0 no-repeat; width: 580px; }


/* Start - CCTV Media Page Tabs (idTabs)  */

.media-tabs { overflow: hidden; margin: 0 auto; padding: 0  0 5px; width: 600px; }

	.media-tabs .idTabs { background: #3087C3; float: left; margin: 0; padding: 0 0 20px; width: 600px; }
		.media-tabs .idTabs li { float: left; list-style: none; }
		
			.media-tabs .idTabs li a { 
				background: url(../images/bkg-media-tab.png) left top repeat-x #3087C3;
				color: #FFF;
				display: inline-block; 
				height: 70px; 
				text-decoration: none !important; 
				width: 200px; 
			}
				.media-tabs .idTabs li a:hover { background-position: left bottom; }
				.media-tabs .idTabs li a.selected { background: #3087C3; font-weight: bold; }
			
			.media-tabs .idTabs li a span {  
				float: left; 
				font-family: 'Roboto Condensed', sans-serif;
				font-size: 16px;
				font-weight: 400; 
				margin-top: 10px; 
			}
			
			.media-tabs .idTabs li a .icn { background: url(../images/icn-media-tab.png) 0 0 no-repeat; height: 70px;  margin-top: 0; width: 70px; }
			
			.media-tabs .idTabs li a .btn { 
				background-color: #FEBF10; 
				color: #000; 
				display: inline-block;
				font-size: 12px;
				font-weight: 400; 
				height: 25px; 
				line-height: 25px;  
				margin: 5px auto 5px;
				padding: 0 5px 0;
				text-align: center; 
			}
				.media-tabs .idTabs li a:hover .btn { background-color: #FFF; color: #0F457C; }

	
	.media-tabs .tab-wrap { background: #FFFFFF; border: solid 1px #C8CED0; border-top: none; clear: left; padding: 10px 10px 5px; width: 598px; }
	
	.media-tmb {
		color: #000 !important;
		cursor: pointer;
		display: inline-block;
		font-family: 'Open Sans', sans-serif !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		height: 130px;
		line-height: 12px !important;
		margin: 5px;
		text-align: center;
		width: 180px;
	}
	.media-tmb:hover {
		color: #3087C3 !important;
		text-decoration: underline !important;
	}
	.media-tmb-disabled, .media-tmb img {
		border: 1px solid #fff;
		height: 110px;
		margin-bottom: 4px;
		width: 180px;
	}
	.media-tmb:hover img {
		border-color: #3087C3;
	}
	.media-tmb-disabled {
		cursor: default;
		display: inline-block;
		height: 130px;
		margin: 5px;
		vertical-align: top;
		width: 180px;
	}

/* End - CCTV Media Page Tabs (idTabs)  */

/*
    Start - Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:25px; height:25px; background:url(../images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(../images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(../images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(../images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(../images/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(../images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(../images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(../images/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(../images/loading.gif) no-repeat 5px 5px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/* End - Colorbox Core Style */

div.info-footer {
	background: #fff url(../images/icn-info.png) 0 0 no-repeat;
	border: none;
	color: #262E3C;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 12px;
	line-height: 20px;
	margin: 0 auto;
	min-height: 20px;
	padding: 0 10px 0 25px;
	width: 600px;
}

	div.info-footer a,
	div.info-footer a:hover {
		color: #3087C3;
		font-family: 'Open Sans', sans-serif !important;
		font-size: 12px !important;
		font-weight: 400;
		line-height: 20px;
	}
		div.info-footer a:hover { text-decoration: underline; }

.textwrap-left {
	border: none !important;
	clear: both;
	float: left;
	margin: 0 !important;
	padding: 0 6px 6px 0;
}

.textwrap-right {
	border: none !important;
	clear: both;
	float: right;
	margin: 0 !important;
	padding: 0 0 6px 6px;
}

.video-comparison {
	background: #002137 url(../images/banners/bkg_comparison-banner.jpg) 0 0 no-repeat;
	color: #FFFFFF;
	height: 160px;
	padding: 20px;
	width: 600px;
}

	.video-comparison img {
		float: left;
		clear: right;
		margin-right: 10px;
		-moz-box-shadow: 1px 1px 2px #000000;
		-webkit-box-shadow: 1px 1px 2px #000000;
		box-shadow: 1px 1px 2px #000000;
		
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
		-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
		zoom: 1;
	}
	
	.video-comparison h4 {
		color: #FFFFFF;
		font-family: 'Open Sans', sans-serif;
		font-size: 24px;
		font-variant: uppercase;
		font-weight: 600;
		line-height: 1.2em;
		margin: 0 0 5px;
		padding: 0;
		text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
	}
	
	.video-comparison p, .video-comparison a {
		clear: none;
		display:block;
		font-family: 'Open Sans', sans-serif;
		font-size: 12px;
		font-variant: uppercase;
		font-weight: 400;
		line-height: 1.4em;
		margin: 0;
		padding: 0;
		text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
	}
	
	.video-comparison a, .video-comparison a:hover {
		color: #FFFFFF !important;
		display: inline;
		font-weight: 400 !important;
		text-decoration: underline !important;
	}
	
.personalization-question {
	margin-top: 6px;
}

/* Catalog Download Buttons */
#dlbtns {  height: 50px; margin: 0 auto 10px; width: 430px; }
.btn-download-large { display: inline-block; float: left; height: 50px; margin: 0 5px; width: 200px; }
#catalog-print { background: url(../images/btn-download-cat-print.png) left top no-repeat; }
#catalog-web { background: url(../images/btn-download-cat-web.png) left top no-repeat; }

/* Sorting Tabs */

ul.sortTabs {
  margin: 10px auto;
  padding: 0;
  width: 100%;
}
ul.sortTabs li {
  display: inline-block;
  float: left;
  height: 40px;
  list-style: none;
  text-align: center;
}
ul.sortTabs li {
	width: 25%;
}
ul.sortTabs li a,
ul.sortTabs li a:hover {
  background: #2383c6;
  border-right: 1px #FFFFFF solid;
  color: #FFFFFF;
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 40px;
  text-decoration: none;
  -webkit-transition: background-color 0.8s ease;
  -moz-transition: background-color 0.8s ease;
  -ms-transition: background-color 0.8s ease;
  -o-transition: background-color 0.8s ease;
  transition: background-color 0.8s ease;
}
ul.sortTabs li a:hover {
  background-color: #2570b8;
}

/* Start: Homepage Owl Carousel */
.owl-carousel .owl-dots .owl-dot span {
  margin: 5px;
}
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
  background: #2383c6;
}

#top-carousel {
  height: 280px;
  width: 600px;
}
#top-carousel .owl-dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.bus-carousel {
	display: inline-block;
	height: 198px;
	width: 600px;
	margin-bottom: 14px;
}
.bus-carousel .owl-dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}