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


/********************************************************************/
/****************  Index Top Menu ***********************************/
/********************************************************************/

#indexMenu {
	position:relative;
	margin: 20px 0 30px 0;
}

#indexMenu hr {
	background-color: #a8a8a8;
	height: 1px;
	margin: 0 0 0 0;
}

#indexHeader {
	position:relative;
	margin: 20px 0 30px 0;
}

#indexMenucopy {
	position:absolute; 
	top:85px; 
	left:355px; 
	width:265px; 
	height:300px; 
	overflow:hidden; 
	z-index:200;
}

#indexMenucopy p {
	text-align:justify; 
	line-height:17px; 
}


/********************************************************************/
/****************  Index 3 Boxes  ***********************************/
/********************************************************************/

.indexBox {
	position:relative;
	float:left;
	width: 325px;
	height:208px;
	margin: 0 0 30px 0;
	background:url(../img/indexBox.png) no-repeat center;
}


/* Newsletter */

.indexNewsletter {
	position:relative;
	width:250px;
}

.indexNewsletter img {
	position:relative;
	float:left;
	left:18%;
	top:5px;
	margin: 0 155px 0 0;
}

.indexNewsletter #indexEnv {
	position:relative;
	float:left;
	top:5px;
	left:18%;
	margin: 15px 10px 10px 0;
}

.indexNewsletter h3 {
	position:relative;
	float:left;
	color:#1b2ba3;
	font-weight:bold;
	font-size:13px;
	top: 16px;
	left:16%;
	margin: 15px 10px 10px 0;
}

.indexNewsletter p {
	position:relative;
	float:left;
	left:20%;
	width: 220px;
	text-align:justify;
	margin: 3px 35px 6px 0;
}

.indexNewsletter #indexNewsletterbutton {
	position:relative;
	float:left;
	left: 23%;
}

.indexNewsletter a {
	color:#1b2ba3;
	text-decoration:none;
}

.indexNewsletter a:hover {
	color:#f7cd59;
	text-decoration:underline;
}
	
	
/*  Why us */

.indexWhytechally {
	position:relative;
	float:left;
	top:3%;
	left:13%;
}

.indexWhytechally img {
	position:relative;
	float:left;
	left:2px;
	top:0;
	margin: 3px 155px 0 0;
}

.indexWhytechally p {
	position:relative;
	float:left;
	text-align:justify;
	width:220px;
	height:113px;
	margin: 15px 0 -3px 9px;
}

.indexWhytechally #indexWhytechallybutton {
	position:relative;
	float:left;
	left:19%;
}

.indexWhytechally a {
	color:#a31b1b;
	text-decoration:none;
}

.indexWhytechally a:hover {
	color:#f7cd59;
	text-decoration:underline;
}



/* Case Studies */

.indexCasestudy {
	position:relative;
	float:left;
	top:3%;
	left:13%;
}

.indexCasestudy img {
	position:relative;
	float:left;
	left:4px;
	top:0;
	margin: 0 155px 0 0;
}

.indexCasestudy p {
	position:relative;
	float:left;
	text-align:justify;
	width:220px;
	height:113px;
	margin: 18px 0 0 9px;
}

.indexCasestudy #indexCasestudybutton {
	position:relative;
	float:left;
	left:19%;
}

.indexCasestudy a {
	color:#27a31b;
	text-decoration:none;
}

.indexCasestudy a:hover {
	color:#f7cd59;
	text-decoration:underline;
}














/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/


/* Container for the whole menu */

div.header {
	position: relative;
	width: 100%;
	margin: 0;
}


/* Center Box Container and Rotator */

div.centerBox-holder {
	position: relative;
	float:left;
	margin:0 auto 0 3%;
	width: 100%;
	height: 375px;
	background: url(../img/indexMenubg.png) no-repeat 100px 0px;
	z-index: -10;
}

div.centerBox-whatsnew {
	background: url(../img/indexMenubg.png) no-repeat 100px 0px;
}

div.centerBox-itconsulting {
	background: url(../img/indexMenubg.png) no-repeat 100px -375px;
}

div.centerBox-cabling {
	background: url(../img/indexMenubg.png) no-repeat 100px -750px;
}

div.centerBox-cctvsecurity {
	background: url(../img/indexMenubg.png) no-repeat 100px -1125px;
}



/* Category Links */
div.header h2 a {
	display: block;
	width: 263px;
	height: 70px;
	text-indent: -10000px;
}

div.cabling h2 a, div.itconsulting h2 a, div.whatsnew h2 a, div.cctvsecurity h2 a {
	display: block;
	width: 263px;
	height: 70px;
	cursor: pointer;
	overflow: hidden;
}


/* Circle Arrow mouseover */

div.itconsulting h2 a span {
	display: block;
	width: 43px;
	height: 43px;
	background: transparent url(../img/indexMenuGreencircle.png) no-repeat;
}
div.itconsulting h2 a:hover span {
	background-position: 0px -43px;
}
div.itconsulting h2 a.current span {
	background-position: 0px -43px;
}
div.itconsulting h2 a.current:hover span {
	background-position: 0px -43px;
}

div.cctvsecurity h2 a span {
	display: block;
	width: 43px;
	height: 43px;
	background: transparent url(../img/indexMenuRedcircle.png) no-repeat;
}
div.cctvsecurity h2 a:hover span {
	background-position: 0px -43px;
}
div.cctvsecurity h2 a.current span {
	background-position: 0px -43px;
}
div.cctvsecurity h2 a.current:hover span {
	background-position: 0px -43px;
}

div.cabling h2 a span {
	display: block;
	width: 43px;
	height: 43px;
	background: transparent url(../img/indexMenuBluecircle.png) no-repeat;
}
div.cabling h2 a:hover span {
	background-position: 0px -43px;
}
div.cabling h2 a.current span {
	background-position: 0px -43px;
}
div.cabling h2 a.current:hover span {
	background-position: 0px -43px;
}

div.whatsnew h2 a span {
	display: block;
	width: 43px;
	height: 43px;
	background: transparent url(../img/indexMenuGraycircle.png) no-repeat;
}
div.whatsnew h2 a:hover span {
	background-position: 0px -43px;
}
div.whatsnew h2 a.current span {
	background-position: 0px -43px;
}
div.whatsnew h2 a.current:hover span {
	background-position: 0px -43px;
}

div.cabling h2 a span, div.itconsulting h2 a span {
	float:right;
	margin: 15px 10px 0 0;
}
div.cctvsecurity h2 a span, div.whatsnew h2 a span {
	float:right;
	margin: 15px 10px 0 0;
}


/* Container for the Category links and everything else except the centerbox */

div.popup-holder {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 395px;
	z-index: 2;
}

div.header div.floatleft {
	position:relative;
	float:left;
	width: 263px;
	padding: 0;
}
div.header div.floatright {
	position:relative;
	float:right;
	width: 263px;
	padding: 0;
}


/* expansion text */

div.itconsulting div.reveal {
	position:relative;
	float:left;
	top:-10px;
	width: 263px; 
	height:175px;
	margin: 0;
	padding: 5px 0 0 0;
	background: transparent url(../img/indexMenuitexpansion.png) no-repeat;
}

div.cabling div.reveal {
	position: absolute;
	/* float:left; */
	/* top: 5px; */
    bottom: 68px;
	width: 263px; 
	height:175px; 
	margin: 0;
	padding: 5px 0 0 0;
	background: transparent url(../img/indexMenucabexpansion.png) no-repeat bottom center;
}

div.cctvsecurity div.reveal {
	position:relative;
	float:left;
	top:-10px;
	width: 263px; 
	height:175px;
	margin: 0;
	padding: 5px 0 0 0;
	background: transparent url(../img/indexMenucctvexpansion.png) no-repeat;
}

div.whatsnew div.reveal {
	position: absolute;
	/* float:left; */
	/* top:5px; */
    bottom: 68px;
	width: 263px; 
	height:175px; 
	margin: 0;
	padding: 5px 0 0 0;
	background: transparent url(../img/indexMenunewexpansion.png) no-repeat bottom center;
}






.wrapper1 {
	position:absolute;
	height: 250px;
}

.wrapper2 {
	position:absolute;
	top:120px;
	height:250px;
}

div.itconsulting h2 {
	background: url(../img/indexMenuit.png) no-repeat;
	height:70px;
}


div.cabling h2 {
	position:absolute;
	top:175px;
	background: url(../img/indexMenucab.png) no-repeat;
	height:70px;
}


div.cctvsecurity h2 {
	background: url(../img/indexMenucctv.png) no-repeat;
	height:70px;
}
div.whatsnew h2 {
	position:absolute;
	top:175px;
	background: url(../img/indexMenunew.png) no-repeat;
	height:70px;
}

div.hidden {
	display: none;
}
div.header {
	height: 400px;
}





div.header h2 {
	margin-bottom: 0;
}
div.header h2 a {
	display: block;
	height: 70px;
}
div.header div.reveal p {
	margin: 0;
	padding: 8px 10px 4px 10px;
	text-shadow: 1px 0px 2px #fff;
	text-align:justify;
}
div.header div.reveal ul li {
	margin: 0;
	padding: 8px 10px 2px 10px;
	text-shadow: 1px 0px 2px #fff;
	text-align:left;
	list-style:inside;
	line-height:18px;
}
div.header div.reveal p em {
	font-weight: bold;
}
div.header div.reveal a {
	display: block;
	width: 105px;
	height: 27px;
	margin: 3px auto 3px auto;
	text-indent: -10000px;
}
div.reveal a span {
	display: block;
	width: 250px;
	height: 20px;
}
div.itconsulting div.reveal a span {
	width: 105px;
	height: 27px;
	background: transparent url(../img/itconsultingReadmorebutton.png) no-repeat;
}
div.cabling div.reveal a span {
	width: 105px;
	height: 27px;
	background: transparent url(../img/cablingReadmorebutton.png) no-repeat;
}
div.cctvsecurity div.reveal a span {
	width: 105px;
	height: 27px;
	background: transparent url(../img/cctvReadmorebutton.png) no-repeat;
}
div.whatsnew div.reveal a span {
	width: 105px;
	height: 27px;
	background: transparent url(../img/companyReadmorebutton.png) no-repeat;
}






/* Easy Slider */

#slider .graphic, #slider #prevBtn, #slider #nextBtn{
	margin:0;           
	padding:0;
	display:block;
	overflow:hidden;
	text-indent:-8000px;
}

#slider{}	
#slider ul, #slider li{
	display:block;
	width:250px;
	height:150px;
	margin:0;
	padding:0;
	list-style:none;
}

#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/
	display:block;
	width: 250px; 
	height:150px; 
	margin: 15px 0px 0px 2px; 
	/* border: solid 1px red; */
	overflow:hidden; 
	
}

#slider h3 {
	margin: 2px 0 3px 0;
}

#slider p {
	margin: 0 0 3px 0;
	padding: 0;
	font-size:12px;
}

#slider a { 
	color:#353535; 
	text-decoration: underline; 
	text-indent: 0px; 
	display:inline; 
	font-weight:bold;
}

#slider a:hover { 
	color: #f7b809; 
	text-decoration: none; 
}

	
#prevBtn, #nextBtn{ 
	display:block;
	width:10px;
	height:12px;
	position:absolute;
	left:230px;
	top:6px;
}	
		
#nextBtn{ 
	left:243px;
}	
		
#prevBtn a, #nextBtn a{  
	display:block;
	width:10px;
	height:12px;
	background:url(../img/btn_prev.gif) no-repeat 0 0;	
}	

#nextBtn a{ 
	background:url(../img/btn_next.gif) no-repeat 0 0;	
}												

/* // Easy Slider */