@charset "utf-8";

*{
	border: 0;
	margin: 0;
	padding: 0;}

div.ccm-block-arrange, div.ccm-block{
	border: none;
	outline: 2px dotted #f00;
	margin: 0;
	padding: 0;}

body{
	font-family: Arial, Helvetica, sans-serif;
	color: #015d8e;}


/*#################### - PAGE LAYOUT - ####################*/
.col1_3{
	width: 302px;
	float: left;
	margin-left: 20px;}

.col2_3{
	width: 628px;
	float: left;}

.col3_3{
	width: 100%;
	float: left;}

/*#################### - BOX - ####################*/
.box{
	margin-bottom: 20px;
	/*float: left;*/
	width: 100%;
	position: relative;}
	
	div.boxA1{
		overflow: visible;
		background: url(../images/boxBkgrnd.gif) no-repeat 0 0;
		padding-left: 7px;}

	div.boxA2{
		background: url(../images/boxBkgrnd.gif) no-repeat 100% -34px;
		height: 34px;}

	div.boxContent{
		border-left: 1px solid #c4dbe8;
		border-right: 1px solid #c4dbe8;
		padding: 5px;
		background: #fff;
		padding-bottom: 0;}

	div.boxB1{
		background: url(../images/boxBkgrnd.gif) no-repeat 0 -68px;
		padding-left: 7px;
		overflow: visible;}
	
	div.boxB2{
		background: url(../images/boxBkgrnd.gif) no-repeat 100% -74px;
		height: 6px;
		clear: both;}
						
		.box h1{
			/*display: inline-block;*/
			font-size: 16px;
			height: 34px;
			line-height: 32px;
			color: #fff;
			position: absolute;
			top: 1px;
			left: 8px;}


a.iconDownload{
	height: 21px;
	float: right;
	display: block;
	background: url(../images/iconDownload.png) no-repeat 100% 0;
	margin-top: 7px;
	margin-right: 7px;
	line-height: 20px;
	padding-right: 25px;}
	
	a.iconDownload:hover{
		background-position: 100% 100%;
		line-height: 21px;
		padding-right: 24px;
		color: #a1cde3}

/*#################### - TEXT FORMATTING - ####################*/
p{
	padding-bottom: 7px;}

a{
	text-decoration: none;}

p a, .col2_3 ul.nav a:hover{
	color: #4f9abf;}

	p a:hover, .col2_3 ul.nav a{
		color: #015d8e;}

.boxContent ul{
	list-style: url(../images/bullet.gif);}
		
		.boxContent ul li{
			margin-left: 20px;}
			
			.boxContent ul li:last-child{
				margin-bottom: 0 !important;}

.floatclear{
	clear: both;}

.pageWrap{
	width: 1000px;
	margin: 0 auto 10px auto;}
	
	.pageWrapA, .pageWrapB{
		background: url(../images/pageWrapBkgrnd.gif) no-repeat 0 0;}
	
	.pageWrapB{
		background-position: 100% 100%;}

.pageTop{
	font-size: 12px;}
	
	.pageTop ul{
		margin-top: 12px;
		height: 16px;
		list-style: none;}
		
		.pageTop ul li{
			float: right;
			margin-right: 24px;}
			
			.pageTop ul li a{
				display: block;
				color: #fbca01;
				background: url(../images/pageTopIcons.gif) no-repeat 0 0;
				padding-left: 24px;
				height: 16px;
				cursor: pointer;}
				
				.pageTop ul li a:hover{
					color: #4f9abf;
					}
				
					.pageTop ul li a#pageTopHome{
						background-position: 0 0;}
					
						.pageTop ul li a#pageTopHome:hover{
							background-position: 0 -16px;}
					
					.pageTop ul li a#pageTopSiteMap{
							background-position: 0 -32px;}
					
						.pageTop ul li a#pageTopSiteMap:hover{
							background-position: 0 -48px;}
					
					.pageTop ul li a#pageTopPrint{
							background-position: 0 -64px;}
					
						.pageTop ul li a#pageTopPrint:hover{
							background-position: 0 -80px;}
					
					.pageTop ul li a#pageTopFacebook{
							background-position: 0 -96px;}
					
						.pageTop ul li a#pageTopFacebook:hover{
							background-position: 0 -112px;}
					
					.pageTop ul li a#pageTopTwitter{
							background-position: 0 -128px;}
					
						.pageTop ul li a#pageTopTwitter:hover{
							background-position: 0 -144px;}

.page{
	width: 950px;
	margin: 11px auto 20px auto;}

.headerWrap{
	}
	
	.header{
		height: 121px;
		position: relative;}
	
		.header .headerLogo{
			position: absolute;}
		
			.header #logoBcs{
				top: 12px;
				left: 5px;}
			.header #logoIbcs{
				top: 27px;
				right: 5px;}
		
		.header blockquote{
			font-size: 20px;
			position: absolute;
			top: 35px;
			left: 160px;
			color: #fbca01;}

.navWrap{
	width: 960px;
	background:url(../images/navBkgrnd.gif) no-repeat 0 0;
	height: 41px;
	font-size: 16px;}
	
	.navWrap ul{
		line-height: 41px;
		list-style: none;}
	
	.navWrap ul li{
		
		float: left;
		padding: 0 16px;
		position: relative;}
		
		.navWrap a{
			color: #fbca01;}
		
			.navWrap a:hover{
				color: #fff;}

/*##################NAVIGATION DROPDOWN STYLES#######################*/		
			.navWrap ul li ul{
				background: url(../images/dropDownBkgrnd.png) no-repeat 0 100%;
				top: 41px;
				left: -9999px;
				position: absolute;
				z-index: 9;
				width: 200px;
				line-height: 1em;
				padding: 5px 0 10px 0;}
			
				.navWrap ul li:hover ul{
					top: 41px;
					left: 0;}
				
					.navWrap ul li ul li{/*Second level nav buttons*/
						float: none;
						margin: 0 0 6px 5px;
						background: url("../images/breadcrumbSep.gif") no-repeat scroll 6px 6px;}
						
						.navWrap ul li ul li a{
							color: #015d8e;
							font-size: 12px;}
							
							.navWrap ul li ul li a:hover{
								color: #015d8e;
								text-decoration: underline;}
/*################################################################*/

.breadcrumbWrap{
	margin-left: 5px;
	height: 30px;
	font-size: 12px;}
	
	.breadcrumbWrapA, span.breadcrumbWrapB{
		background: url(../images/breadcrumbBkgrnd.gif) no-repeat 0 0;
		float: left;}
	
	span.breadcrumbWrapB{
		margin-left: 10px;
		float: left;
		background-position: 100% 100%;}
	
	.breadcrumbWrap ul{
		list-style: none;
		height: 30px;}
		
		.breadcrumbWrap ul li{
			float: left;
			padding-right: 15px;
			margin-right: 10px;
			line-height: 29px;
			background: url(../images/breadcrumbSep.gif) no-repeat 100% 50%;}
			
			.breadcrumbWrap ul li:last-child{
				background: none;}
			
			.breadcrumbWrap ul li a{
				color: #015d8e;}
				
				.breadcrumbWrap ul li a:hover{
					color: #a1cde3;}

.contentWrap{
	margin-top: 20px;}

#slideShow{
	height: 305px;
	width: 618px;
	overflow: hidden;
	background: url(../images/galleryBkgrnd.gif) no-repeat 0 0;
	position: relative;
	padding: 5px;}
	
/*##################OVERRIDES ELEMENT STYLES#######################*/
	#slideShow .ccm-SlideshowBlock-display {
    	width: auto;
    	height: 295px !important;}
		
		#slideShow .ccm-SlideshowBlock-display .slideImgWrap{
			top: 0 !important;}
		
		#slideShow .ccm-SlideshowBlock-display .slideImgWrap div{
			height: 295px !important;
			background-position: top center !important;}
/*################################################################*/

	.gallery .slide ul {/*list of slides*/
		list-style:none;
		width:600px;
		height:379px;
		position:relative;
		z-index:1;}
		
		.gallery .slide ul li {
			float:left;
			width:600px;
			position:absolute;
			left:0;
			top:0;
			z-index:1;}
				
			.gallery .slide ul li.active{
				z-index:2;}
		
				.gallery .slide ul li img {
					display:block;}
		
	.gallery .slide .prev ,
	.gallery .slide .next {
		width:40px;
		height:80px;
		position:absolute;
		top:141px;
		text-indent:-999px;
		overflow:hidden;
		cursor:pointer;
		z-index:30;}
		
		.gallery .slide .prev {
			background:url(http://www.barcode-systems.com/themes/bcs/images/arrow-prev.png) no-repeat;
			left:0;}
			
		.gallery .slide .next {
			background:url(http://www.barcode-systems.com/themes/bcs/images/arrow-next.png) no-repeat;
			right:0;}
		
	.gallery .caption {
		position: absolute;
		background: url(../images/captionBkgrnd.png) repeat;
		text-align:right;
		padding:3px 6px 3px 6px;
		top: 11px;
		left: 0;
		font-size: 24px;}
		
		.gallery .caption a{
			color: #fff;}
			
			.gallery .caption a:hover{
				color: #fff;}
		
	.gallery .caption a span {
		line-height:28px;}
		
	.swicher{
		list-style:none;
		position: absolute;
		top: 270px;
		left: 550px;
		z-index: 99;}
		
	.swicher li {
		display:inline-block;}
		
		.swicher li a {
			width:10px;
			height:10px;
			text-indent:-9999px;
			overflow:hidden;
			display:block;
			background:url(../images/pip.gif) no-repeat;}
			
			.swicher li a.active {
				background-position:0 -10px;}

#latestNews{
	height: 315px;
	font-size: 11px;}
	
	#latestNews .boxContent{
		height: 260px;}
	
	#latestNews p{
		padding-bottom: 0;}
	
	#latestNews ul{
		margin-top: 5px;
		list-style: none;
		position: relative;}
		
		#latestNews ul li{
			float: left;
			margin: 0 0 10px 0;
			background: url(../images/dotted.gif) repeat-x 0 100%}
			
			#latestNews ul li:last-child{
				margin: 0;
				background: none;}
		
			#latestNews ul li ul{
				margin: 0;
				float: left;}
			
				#latestNews ul li ul li{
					float: left;
					background: none;}
				
					#latestNews li.icon{
						width: 17px;}
						
						#latestNews li.icon a{
							display: block;
							width: 17px;
							height: 17px;
							background:url(../images/iconBullet.gif) no-repeat 0 0;}
							
							#latestNews li.icon a:hover{
								background-position: 0 100%;}
					
					#latestNews li.title{
						width: 210px;
						margin-left: 10px;}
						
						#latestNews li.title span{
							display: block;}
					
					#latestNews li.image{
						float: right;
						width: 50px;}
						
						#latestNews li.image img{
							width: 50px;
							height: auto;}

#catDownload{
	/*height: 223px;*/}
	
	#catDownload p{
		display: inline;
		margin-top: 10px;
		width: 115px;
		float: left;}	
		
	a#barcode2D{
		float: right;
		width: 171px;
		height: 171px;
		display: block;
		background: url(../images/barcode2D.gif) no-repeat 0 0;}
		
		a#barcode2D:hover{
		background-position: 0 100%;}

#whoAreWe{
	/*height: 223px;*/}
	
	#whoAreWe p, #prodOverview p{
		margin-bottom: 7px;}
	
	#whoAreWe p:last-child, #prodOverview p:last-child{
		margin-bottom: 0;}
	
	#whoAreWe ul, #prodSpec ul{
		list-style: url(../images/bullet.gif);
		margin-bottom: 7px;}
		
		#whoAreWe ul li, #prodSpec ul li{
			margin-left: 20px;}
		
		#whoAreWe ul li:last-child, #prodSpec ul li:last-child{
			margin-bottom: 0 !important;}

#prodAreas{
	height: 138px;}
	
	#prodAreas ul{
		margin-left: -2px;
		list-style: none;}
	
	#prodAreas ul li{
		float: left;
		margin: 0;}
		
		#prodAreas a{
			width: 188px;
			height: 93px;
			background: url(../images/prodAreas.gif) no-repeat 0 0;
			display: block;
			text-indent: -9999px;}
			
			a#prodVerification{
				background-position: 0 0;}
				
				a#prodVerification:hover{
					background-position: 0 100%;}
				
			a#prodPrinters{
				background-position: -188px 0;}
				
				a#prodPrinters:hover{
					background-position: -188px 100%;}
				
			a#prodDevices{
				background-position: -376px 0;}
				
				a#prodDevices:hover{
					background-position: -376px 100%;}
				
			a#prodBasics{
				background-position: -564px 0;}
				
				a#prodBasics:hover{
					background-position: -564px 100%;}
				
			a#prodSolutions{
				background-position: -752px 0;}
				
				a#prodSolutions:hover{
					background-position: -752px 100%;}

#prodOverview{
	}

#prodSpec{
	}
	
	#prodSpec ul{
		margin-bottom: 0;}
		
		#prodSpec ul li{
			margin-bottom: 10px;}

#prodImage{
	text-align: center;
	margin-bottom: 15px;}
	
	/*#prodImage img{
		height: auto;
		width: 300px;} maxes out the image to the width of the column*/

a.cta{
	width: 300px;
	height: 53px;
	display: block;
	font-size: 17px;
	line-height: 16px;
	color: #015d8e;
	margin-bottom: 15px;
	background-position: 0 -1px;
	background-repeat: no-repeat;
	cursor: pointer;}
	
	
	
	a.btnDefault,
	a.btnYellow{
		background-image: url(../images/ctaYellow.png);}
		
	a.btnGreen{
		background-image: url(../images/ctaGreen.png);}
		
	a.btnBlue{
		background-image: url(../images/ctaBlue.png);}
	
	a.btnBlack{
		background-image: url(../images/ctaBlack.png);
		color: #fff;}
		
	a.btnDkBlue{
		background-image: url(../images/ctaDkBlue.png);
		color: #fff;}
		
	a.btnOrange{
		background-image: url(../images/ctaOrange.png);}
	
	a.btnPurple{
		background-image: url(../images/ctaPurple.png);}
		
	a.btnRed{
		background-image: url(../images/ctaRed.png);}
		
		a.cta:hover{
			background-position: 0 100%;}
		
		a.cta .ctaIcon{
			background-position: 10px 0;
			background-repeat: no-repeat;}
		
		a.btnContact .ctaIcon{
			background-image: url(../images/ctaContact.png);}
			
		a.btnDownload .ctaIcon{
			background-image: url(../images/ctaDownload.png);}
		
			a.cta:hover .ctaIcon{
				padding: 1px 0 0 1px;
				background-position: 11px 1px}
					
					/*a.cta .ctaIcon{
						background: url(http://www.barcode-systems.com/themes/bcs/images/ctaIcons.png) no-repeat 10px 0;}
						
						a.cta:hover .ctaIcon{
							background-position: 11px 1px;}
						
						a.btnDefault .ctaIcon{
							background-position: 10px 55px;}
							
							a.btnDefault:hover .ctaIcon{
								background-position: 10px 55px;}
						
						a.btnContact .ctaIcon{
							background-position: 10px 0;}
							
							a.btnContact:hover .ctaIcon{
								background-position: 11px 1px;}
						
						a.btnDownload .ctaIcon{
							background-position: 10px -55px;}
							
							a.btnDownload:hover .ctaIcon{
								background-position: 11px -54px;}

				.b{
					padding: 0 15px;
					width: 218px;
					max-height: 33px;
					overflow: hidden;
					margin: 0 0 0 45px;}
					
					a.cta:hover .b{
						margin: 2px 0 0 46px;}

					a.btnDefault .b{
						width: 258px;
						margin:  0 0 0 5px;
						text-align: center;}
						
						a.btnDefault:hover .b{
							margin:  2px 0 0 6px;}*/

/*#################### - ABSOLUTE CENTRING - ####################*/
.xAx{
	display: table;/*!IE*/
	height: 53px;/* REQUIRED */
	overflow: hidden;
	margin: 0 auto;
	#position: relative;/*IE*/}

.xBx{
	display: table-cell;/* !IE */
	vertical-align: middle;/* !IE */
	#position: absolute;
	#top: 50%;/*IE*/
	#left: 50%;}

.xCx{
	width: 285px;/* REQUIRED */
	text-align: center;
	#position: relative;/* IE */
	#top: -50%;/* IE */
	#left: -50%;}/*NEEDS A width*/


.footerWrap{
	font-size: 10px;
	color: #4f9abf;}
	
	.footerWrap a{
		color: #4f9abf;}
	
	.footerWrap a:hover{
		color: #015d8e;}

.footer{
	width: 950px;
	margin: 0 auto;
	margin-bottom: 20px;}

.footerNav{
	margin-left: 5px;
	text-indent: -5px;
	margin-right: -5px;}

	.footerNav ul{
		list-style: none;}
		
		.footerNav ul li{
			float: left;
			font-size: 11px;
			margin: 0;}
			
			.footerNav ul li a{
				text-decoration: underline;}
			
			.footerNav ul li ul{
				width: 125px;}
			
			.footerNav ul li ul li{
				float: none;
				font-size: 10px;
				margin-top: 5px;}
			
			.footerNav ul li ul li a{
				text-decoration: none;}

.footerContact{
	text-align: right;}
	
.footerPartners{
	width: 1000px;
	height: 72px;
	background: url(../images/partnersBkgrnd.gif) no-repeat 0 0;
	margin-bottom: 5px;
	padding: 5px;
	text-align: center;}

	.footerPartners img{
		margin: 5px 45px;}

.copywrite{
	text-align: center;
	clear: both;}
	
.col2_3 ul.nav{
	margin-left: 20px;
	margin-bottom: 20px;
	list-style: url(../images/bullet.gif);}
	
	.col2_3 ul.nav li{
		margin-left: 20px;}
		
		.col2_3 ul.nav li ul{
			margin-bottom: 10px;
			list-style-image: none;}

input, textarea{
	border: 1px solid #015D8E;
	padding: 5px;}

input[type="text"]{
	padding: 5px;
	width: 70%;
	height: 15px;}
	
	input.ccm-input-captcha{
		width: 174px;}
		
	input[type="submit"]{
		background: url(../images/bgSubmit.gif) 0 0;
		border: 0;
		height: 32px;
		width: 103px;
		color: #f2f2f2;}
		
		input[type="submit"]:hover, input[type="submit"]:active{
			cursor: pointer;
			background-position: 0 100%;
			padding: 2px 0 0 1px;}