@charset "utf-8";
/* CSS Document style sheet for security page inc*/

input[name=Category]{
	height:30px;
	border-radius:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	font-stretch:expanded;
	transition:all 2s;
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,4c0008+100 */
background: #cc0000; /* Old browsers */
background: -moz-linear-gradient(top, #cc0000 0%, #4c0008 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cc0000 0%,#4c0008 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cc0000 0%,#4c0008 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#4c0008',GradientType=0 ); /* IE6-9 */	
	
}


#frmProducts{
	position:fixed;
	float:left;
	top:10px;
	left:100px;
	display:inline;
}

#catRes{
	width:94%;
	height:auto;
	background:rgba(255,255,255,0.3);
	padding:10px;
	margin-top:50px;
	padding-left:5%;

	
	
}
.prodBox{
	width:200px;
	height:240px;
	background:rgba(0,0,0,0.5);
	display:inline-block;
	text-align:center;
	margin-top:10px;
	margin-bottom:3px;
	margin-right:20px;
	margin-left:10px; /*changed to correct spelling, seems to be fine.*/
	padding:10px;
	border-radius:10px;
	
	
}
.ProdImg:after{
	content:"Click Image";
	width: 100px;
	height:10px;
	position:relative;
	top:-160px;
	padding:5px;
	background:rgba(125, 179, 198,0.5);
	border-radius:-10px;

}
.ProdImg{/** image DIV **/
	background:rgba(255,255,255,0.3);
	height:auto;	
}
.imgView{/** image **/
	height:150px;
	width:150px;
	margin:8px;
	border-radius:10px;
}
.ItemCode{
	background:rgba(255,255,255,0.9);
	height:40px;
	
}
.Description{
	background:blue;
	height:250px;
	display:none;
}
.Category{
	padding-top:4px;
	color:white;
}

.dbImgL, .dbImgR{/*Images From Database*/
	display:inline-block;
	
	height:auto;
	margin:30px;
	border:solid 5px white;
	border-radius:20px;
	box-shadow:0 0 20px black;
}
.dbImgL{
	float:left;
	width:35%;
	
}
.dbImgR{
	float:right;
	width:15%;
}

/******** ImgIcon For Mouse Hover start *****/

#imgIconTxt0,#imgIconTxt1,#imgIconTxt2,#imgIconTxt3, #imgIconTxt4,
#imgIconTxt5, #imgIconTxt6, #imgIconTxt7, #imgIconTxt8,#imgIconTxt9{
	width:240px;
	height:80px;
	background:white;
	margin-left:270px;
	transition:all, 2s;
	overflow:hidden;
	margin-top:20px;
	padding:10px;
	border-radius:20px;
	

}



#imgIcon0, #imgIcon1, #imgIcon2{
	width:250px;
	height:150px;
	overflow:hidden;
	transition:all, 2s;
	background-color:red;
	display:inline-block;
	margin:20px;
	box-shadow:0 0 15px  black;
}

#imgIcon0{
	background-image:url('../images/GaurdMon/thumbs/guard-patrol_t.jpg');
	background-size:260px;
	background-position:-3px -50px;
	background-repeat:no-repeat;
}

#imgIcon1{
	background-image:url('../images/Tracking/thumbs/Tracking_t.jpg');
	background-size:250px;
	background-position:0px -50px;
	background-repeat:no-repeat;
}

#imgIcon2{
	background-image:url('../images/CCTV/thumbs/CCTV_t.jpg');
	background-size:260px;
	background-position:-3px -50px;
	background-repeat:no-repeat;
}

#imgIcon0:hover, #imgIcon1:hover, #imgIcon2:hover{/*,#imgIcon1:hover,#imgIcon2:hover */
	width:650px;
	height:150px;
	border-radius: 0 20px 20px 0 ;
	background-color:black;
	
}

/******** ImgIcon For Mouse Hover start *****/

@media only screen and (max-width: 1390px){
	#imgIcon0, #imgIcon1, #imgIcon2{
		display:block;
		margin-top:50px;
	}
	#catRes{
		height:auto;
		width:89.2%;
		padding-left:10%;
		margin-bottom:30px;
	}
	#frmProducts{
		left:40%;
	}
}
@media only screen and (max-width: 1100px){
	#catRes{

	}
	#frmProducts{
		left:100px;
	}

}