/*==============default setting===============*/

html,body{

  width:100%;

  height:100%;

}



body{



	font-family:Georgia, Times, serif;



}



h2{

	font-family:'plantagenet_cherokeeregular';

	color: #92278F;

	font-size:1.187em;

	/*text-shadow:0 0 1px #92278F;*/

	padding:.5em 0 .5em 0;

}



p{

	padding:.5em 0 .5em 0;

}



img{

	max-width:100%;/*responsive*/

	display:block;/*for centering*/

}

a:link{
	color: #92278F;
	-webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}


a:hover{
	opacity:.6;
}

a:active{
	opacity:.8;
}

@font-face {

    font-family: 'plantagenet_cherokeeregular';

    src: url('../fonts/plantc-webfont.eot');

    src: url('../fonts/plantc-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/plantc-webfont.woff') format('woff'),

         url('../fonts/plantc-webfont.ttf') format('truetype'),

         url('../fonts/plantc-webfont.svg#plantagenet_cherokeeregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



/*==============end default setting===============*/



.hideItems{/*hide and show jquery menu*/

  display:none; 

  height:80px;

}



#subMenuRoll>a{

	/*cursor:default;*/

}



#outerWrapper{

	width:100%;/*make it expand all the way*/

	/*height:100%;make it expand all the way*/

	max-width:1024px;

	min-height:748px;

	/*debug background:#999; */

	margin:0 auto;

	overflow: hidden;

}



header{

	/*debug background:red;*/

	height:100%;

	width:22%;

	/*max-width:211.168px; this will not work as float will remove its properties*/

	float:left;

	min-height:748px; /*add min-height to add height by default since height in default doesnt stretch the div*/

	position:relative;

}



header nav{

	position:fixed;

	width: auto; /*or dun specify at all*/

	padding-left: 2%;

	z-index: 1;

	height: 100%;

}



#logo{

	background:url(../images/naber-group-of-companies.png) no-repeat;

	width:157px;

	height:56px;

	text-indent:-9999px;

	margin-top:13.5px;



}



.separator{

	padding-top: 1em;

	padding-bottom: 1em;

	display: block;

	width: 45px;

	height: 8px;

}



#mainNavBar{

	padding-left: 0;

	font-family:'plantagenet_cherokeeregular';

	font-size: 1.0837em;

	letter-spacing: 1px;

	display: inline-block;

	

	

}





#mainNavBar li{

	padding-bottom: 0;

	list-style-type:none;

}



#mainNavBar a{

	text-decoration:none;

	color: #808285;/*rollover colour #92278F*/

	text-shadow:0 0 1px #808285;
	
	-webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}

#mainNavBar a:hover{
color:#333;
text-shadow:0 0 1px #333;
}

#currentSelectedNav a{

color: #92278F;

text-shadow: 0 0 1px #92278F;

}

.currentSelectedNav > a{
color: #92278F !important;
text-shadow: 0 0 1px #92278F !important;
}

#mainNavBar .hideItems{
letter-spacing: 0px;
}

#mainNavBar ul {

padding-left: .4em;

}



#mainNavBar ul li {

font-size: .8em;

}



#mainWrapper{

	/*debug background:#C60; */

	/*height:100%;*/

	width:78%;

	/*max-width:812.836px; this will not work as float will remove its properties*/

	height:100%;

	float:left;

	min-height: 748px;

	overflow: hidden;

}



#iconWrapper,#iconWrapper2{

	min-height:84px;

	width:100%;

	position:relative;

}



.contentWrapper {

	min-height: 406px;

	/*debug background: #333; */

	float: left;

	position:relative;

	width: 100%;

	padding-bottom: 1em;

}



/*==========================Big purple title on side(big screen)===================================*/

.sideTitle{

	position:absolute;

	top:2%;

	left:102%;

	font-family:'plantagenet_cherokeeregular';

	font-size: 2em;

	color: #92278F;

	line-height: 1em;

	text-shadow:0 0 1px #92278F;

	width: 100%;/*pos absolute will remove properties of divs that why u need to restretch the width again*/

	max-width: 40%;



}

/*==========================end Big purple title on side(big screen)===================================*/



/*==========================Big purple title on middle(ipad verticle)===================================*/



.sideTitle2{

	font-family:'plantagenet_cherokeeregular';

	font-size: 2em;

	color: #92278F;

	line-height: 1em;

	text-shadow:0 0 1px #92278F;

	display:none;

	width: 40%;

	/*debug background: yellow; */

	padding-left: .3em;

}



/*========================== end Big purple title on middle(ipad verticle)===================================*/



.contentImage{

	max-width:475px;

	height:auto;

	margin: 0 auto;

	margin-bottom: 1em;

	

}



.contentAreaRight{

	width:47.6%;/*226px*/

	height:100%;

	/*debug background:#3C0; */

	float:right;

	color:#58595B;

	

	

}



.contentAreaLeft{

	width:47.6%;/*226px*/

	height:100%;

	/*debug background:#3C0; */

	float:left;

	color:#58595B;

	

}



.contentAreaSingle{

	width:58%;

	padding-left: 1em;

	padding-right: 1em;

	color:#58595B;

}



footer{

	width:auto;

	/*height:100%;make it expand all the way*/

	max-width:1024px;

	/*height:38px;*/

	/*debug background:#3FF; */

	margin:0 auto;

	display: none;/*hide in normal/big pc screen(only visible in smaller size)*/

}



/*=========================3btns on top, and hide when reach certain size============*/

#topSpacing{

	padding-left: 0;

	overflow:hidden;

	position:absolute;

	right: 3%;

}



#topSpacing li{

	list-style-type:none;

	padding-bottom: 0;

	float:left;

	margin: 15px 5px 0 5px;

	

	

}



#cornerOne{

	background: url('../images/top-left-icons_03.png') no-repeat -8px -51px;

	width: 32px;

	height: 32px;

	

	

}



#cornerTwo{

	background: url('../images/top-left-icons_03.png') no-repeat -49px -49px;

	width: 29px;

	height: 33px;

	

	

}



#cornerThree{

	background: url('../images/top-left-icons_03.png') no-repeat -85px -48px;

	width: 35px;

	height: 35px;

	

}





#cornerOne a{

	display:block;

	background:url('../images/top-left-icons_03.png') no-repeat -8px -8px;

	width: 32px;

	height: 32px;

	text-indent:-9999px;

}



#cornerTwo a{

	display:block;

	background: url('../images/top-left-icons_03.png') no-repeat -49px -5px;

	width: 29px;

	height: 33px;

	text-indent:-9999px;

}



#cornerThree a{

	display:block;

	background: url('../images/top-left-icons_03.png') no-repeat -85px -4px;

	width: 35px;

	height: 35px;

	text-indent:-9999px;

}



/*=========================end 3btns on top, and hide when reach certain size============*/



/*=========================3btns in 1============*/

.threeInOne,.threeInOneMobile{

	/*when rollover*/

	background: url('../images/three-icons.gif') no-repeat -1px -45px;

	width: 117px;

	height: 35px;

}



.threeInOne a, .threeInOneMobile a{

	display:block;

	/*original*/

	background: url('../images/three-icons.gif') no-repeat -1px -2px;

	width: 116px;

	height: 35px;

	text-indent:-9999px;

}

/*=========================end 3btns in 1============*/



/*=========================3btns on middle, appear when reach certain size============*/

#phonesizeSeparator{

	display:none; /*hide whole container by default*/

}



#topSpacing2{

	padding-left: 0;

	overflow:hidden;

	position:absolute;

	right: 10px;

}



#topSpacing2 li{

	list-style-type:none;

	padding-bottom: 0;

	float:left;

	margin: 15px 5px 0 5px;

}



#cornerOne2{

	background: url('../images/top-left-icons_03.png') no-repeat -8px -51px;

	width: 32px;

	height: 32px;

	

	

}



#cornerTwo2{

	background: url('../images/top-left-icons_03.png') no-repeat -49px -49px;

	width: 29px;

	height: 33px;

	

	

}



#cornerThree2{

	background: url('../images/top-left-icons_03.png') no-repeat -85px -48px;

	width: 35px;

	height: 35px;

	

}





#cornerOne2 a{

	display:block;

	background:url('../images/top-left-icons_03.png') no-repeat -8px -8px;

	width: 32px;

	height: 32px;

	text-indent:-9999px;

}



#cornerTwo2 a{

	display:block;

	background: url('../images/top-left-icons_03.png') no-repeat -49px -5px;

	width: 29px;

	height: 33px;

	text-indent:-9999px;

}



#cornerThree2 a{

	display:block;

	background: url('../images/top-left-icons_03.png') no-repeat -85px -4px;

	width: 35px;

	height: 35px;

	text-indent:-9999px;

}

/*=========================end 3btns on middle, appear when reach certain size============*/





footer, #copyright{

	color:#808285;

	font-family:'plantagenet_cherokeeregular';

	font-size: .9em;

	padding: 1em 0 .3em 0.6em;

}



#copyright{

	font-weight:normal;

	position: absolute;

	bottom: 0;

	left: 0;

}



.tinynav { display: none;/*hide by default*/ }





.lightBoxSection img{

	float:left;

	max-width: 110px;

	height: auto;

	border: 2px solid white;



}



.lightBoxSection{

	overflow:hidden;

	

}



.NaberVideo{

	width: 100%;

	/* debug background: #009999; */

}





.no-touch #outerWrapper {

 /* width: 1024px; */

}





/*================================alocit page=========================*/

.alocit .contentWrapper {

	width:100%;

	

}



.alocit .contentAreaSingle{

	font-family:Verdana, Geneva, sans-serif;

	color:#58595B;

	font-size: .9em;
text-align:justify;
}



.alocit .contentAreaSingle b{

	color:#2B3990;

	

}



.alocit .slideShow, .alocit .lightBoxSection, .NaberVideo{

	margin: 1em 0em;

}



.alocit .contentAreaSingle h2{

	color:#2B3990;

	font-family:Verdana, Geneva, sans-serif;

	font-weight:normal;

	font-size: 1.4em;

}



.alocit .contentAreaSingle h3{

	font-size: 1em;

	padding: .4em 0 0 0;

}



.alocit .contentAreaSingle ul{

	padding-top: 0em;

	padding-bottom: .5em;

}



.alocit .contentAreaSingle li{

	padding-bottom: 0;

}



.alocit .contentAreaSingle a{

	color:#2B3990;

}



.alocit .contentAreaSingle .slideShow li{

	list-style-type: none;

}



.alocit .contentAreaSingle .flexslider{

	border:0;

	box-shadow: 0 0 0 0 white;

	-webkit-box-shadow: 0 0 0 0 white;

	-moz-box-shadow: 0 0 0 0 white;

	-o-box-shadow: 0 0 0 0 white;

}



.alocit .contentAreaSingle ul.flex-direction-nav {

	padding-top: 0em;

	padding-bottom: 0em;

}

/*================================end alocit page=========================*/



/*================================enviropeel page=========================*/

.enviropeel .contentWrapper {

	width:100%;

}



.enviropeel .contentAreaSingle{

	font-family:Verdana, Geneva, sans-serif;

	color:#58595B;

	font-size: .9em;
text-align:justify;
}



.enviropeel .contentAreaSingle b{
	color:#EF4136;
}



.enviropeel .slideShow, .enviropeel .lightBoxSection, .NaberVideo{

	margin: 1em 0em;

}



.enviropeel .contentAreaSingle h2{

	color:#EF4136;

	font-family:Verdana, Geneva, sans-serif;

	font-weight:normal;

	font-size: 1.4em;

}



.enviropeel .contentAreaSingle h3{

	font-size: 1em;

	padding: .4em 0 0 0;

}



.enviropeel .contentAreaSingle ul{

	padding-top: 0;

	padding-bottom: .5em;

}



.enviropeel .contentAreaSingle li{

	padding-bottom: 0;

}



.enviropeel .contentAreaSingle a{

	color:#EF4136;

}



.enviropeel .contentAreaSingle .slideShow li{

	list-style-type: none;

}



.enviropeel .contentAreaSingle .flexslider{

	border:0;

	box-shadow: 0 0 0 0 white;

	-webkit-box-shadow: 0 0 0 0 white;

	-moz-box-shadow: 0 0 0 0 white;

	-o-box-shadow: 0 0 0 0 white;

}



.enviropeel .contentAreaSingle ul.flex-direction-nav {

	padding-top: 0em;

	padding-bottom: 0em;

}

/*================================end enviropeel page=========================*/



/*================================greenbatt page=========================*/

.greenbatt .contentWrapper {

	width:100%;

}



.greenbatt .contentAreaSingle{

	font-family:Verdana, Geneva, sans-serif;

	color:#58595B;

	font-size: .9em;
	text-align:justify;

}



.greenbatt .contentAreaSingle b{

	color:#006838;

	

}



.greenbatt .slideShow, .greenbatt .lightBoxSection, .NaberVideo{

	margin: 1em 0em;

}



.greenbatt .contentAreaSingle h2{

	color:#006838;

	font-family:Verdana, Geneva, sans-serif;

	font-weight:normal;

	font-size: 1.4em;

}



.greenbatt .contentAreaSingle h3{

	font-size: 1em;

	padding: .4em 0 0 0;

}



.greenbatt .contentAreaSingle ul{

	padding-top: 0;

	padding-bottom: .5em;

}



.greenbatt .contentAreaSingle li{

	padding-bottom: 0;

}



.greenbatt .contentAreaSingle a{

	color:#006838;

}



.greenbatt .contentAreaSingle .slideShow li{

	list-style-type: none;

}



.greenbatt .contentAreaSingle .flexslider{

	border:0;

	box-shadow: 0 0 0 0 white;

	-webkit-box-shadow: 0 0 0 0 white;

	-moz-box-shadow: 0 0 0 0 white;

	-o-box-shadow: 0 0 0 0 white;

}



.greenbatt .contentAreaSingle ul.flex-direction-nav {

	padding-top: 0em;

	padding-bottom: 0em;

}

/*================================end greenbatt page=========================*/







/*================================about us page=========================*/

.about-us .contentWrapper {

	width:58%;

}

/*================================end about us page=========================*/

/*================================product services page=========================*/
.producsservices .contentWrapper {
width: 68%;
}

.producsservices .flexslider {
border: 0;
box-shadow: 0 0 0 0 white;
-webkit-box-shadow: 0 0 0 0 white;
-moz-box-shadow: 0 0 0 0 white;
-o-box-shadow: 0 0 0 0 white;
}
.producsservices .slideShow{
margin: 0em 0em;
}

.producsservices .slides li{
	padding-bottom:0;
	list-style-type: none;/* bullet cause extra space, margin-top: -15px;*/
}

.producsservices h2{
font-size:1.4em;
padding: .5em 0 0em 0;
}

.producsservices section span{
font-size:.8em;
}

.grLogos, .crLogos{

}


/*grey to color background fade technique*/
/*div for color back, a link for greyscale background*/
.greenbattLog .grLogos{
	display: block;
max-width: 171px;
height: 69px;
background: url(../images/3images/alllogos-greenbatt-g.jpg) no-repeat;
background-size: contain;

margin: 0 auto;
background-position: center center;
}

.greenbattLog{
	display: block;
	max-width: 171px;
	height: 69px;
	background: url(../images/3images/alllogos-greenbatt-c.jpg) no-repeat;
	background-size: contain;
	margin: 0 auto;
	background-position: center center;

}

.alocitLog .grLogos{
	display: block;
max-width: 171px;
height: 57px;
background: url(../images/3images/alllogos-alocit-g.jpg) no-repeat;
background-size: contain;

margin: 0 auto;
background-position: center center;
}

.alocitLog{
	display: block;
max-width: 171px;
height: 57px;
background: url(../images/3images/alllogos-alocit-c.jpg) no-repeat;
background-size: contain;

margin: 0 auto;
background-position: center center;
}

.enviropeelLog .grLogos{
	display: block;
max-width: 171px;
height: 43px;
background: url(../images/3images/alllogos-enviropeel-g.jpg) no-repeat;
background-size: contain;

margin: 0 auto;
background-position: center center;
}

.enviropeelLog{
	display: block;
max-width: 171px;
height: 43px;
background: url(../images/3images/alllogos-enviropeel-c.jpg) no-repeat;
background-size: contain;

margin: 0 auto;
background-position: center center;
}

/*
 @media screen and (max-width:768px) {

.alllogos{

	float:left;

}
}
*/
/*================================end product services page=========================*/

/*================================contact page=========================*/

.contact .contentAreaSingle {

width: 100%;
text-align:justify;
}

/*================================end contact page=========================*/


/*==============================support network===================*/
.support-networks .contentAreaSingle {
width: 95%;
}
.supportNetworkList{
padding-left: 1.9em;
}

.supportNetworkList li{
list-style-type:lower-roman;
font-weight:bold;
}

.supportNetworkList li ul{
	padding-left: 1em;
	padding-top: .3em;

}

.supportNetworkList li li{
	list-style-type:none;
	padding-bottom: .1em;
padding-top: .1em;
	font-weight:normal;
	list-style-image:url(../images/hyphen.gif);
}


/*
.supportNetworkList li li:before{
content:" - ";
list-style-position:outside;  
}
*/
/*==============================end support network===================*/


/* Via CSS, to be applied ot multiple tooltips */

.qtip-content{

	font-size:1.4em;

	padding:.2em;

	font-family:'plantagenet_cherokeeregular';

}



/*============================facilities page======================*/
.facilities .contentAreaSingle {
width: 95%;
}
/*============================end facilities page======================*/


/*==============default setting===============*/

img{

	width:auto\9; /*always place at the bottom, prevent ie8 squeeze bug*/

}

/*==============end default setting===============*/