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

@charset "utf-8";
body {
	font: 90%/1.4 Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #666;
}
/* ----------  menu --------------- */
#menu ul li, #menu ul li a{
	list-style:none;
	position:relative;
	float:left;
         padding: 0.5em 1.31em;
         color: #666;
}
#menu ul li a:first-child{
        padding-left:0;
}
#menu ul li:first-child{
        margin: 0;
        padding: 0.5em 0.1em 0.5em 0;
}
.content #menu ul{
        width:600px;
}
.content #menu ul li.parent ul{
        width:auto;
}
#menu ul .parent li:first-child{
        margin: 0.4em 0 0 0;
        padding: 0.5em 0.2em;
}


#menu ul li ul{
	position:absolute;
	width:230px;
	display:none;
         padding: 0;
         margin-top: 2em;
         	z-index:9999;
}

#menu ul li ul li{
	width:230px;
	padding: 0.5em  0.2em;
         	text-align:left;
	background-color: #666;
         color: #fff;
	border-bottom: 1px dotted rgb(150, 150, 150);
}
#menu ul li ul li a, #menu ul li ul li ul li a{
         margin-left: 5px;
padding: 0.5em  0.2em;

      }

#menu ul li ul li ul{
	margin-top: -10px;
	margin-left: 232px;
	display:none;
}
#menu ul li ul li ul li{
	padding: 0.5em 0.2em;
         text-align:left;
}
#menu ul li ul li:hover{
         padding: 0.5em 0.2em;
	text-decoration: none;
	color: #fff;
	background-color: #666;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999999));
background-image: -webkit-linear-gradient(top, #333, #999999);
background-image: -moz-linear-gradient(top, #333, #999999);
background-image: -o-linear-gradient(top, #333, #999999);
background-image: linear-gradient(to bottom, #333, #999999);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );
}


#menu ul li ul li a:hover{
        background-image:none;
        padding: 0.5em 0.2em;
}
#menu ul li ul li a{
	color:#fff;
         display:block;
	padding: 0.5em 0.2em;
}



/* -------- end menu -------------- */
/* ----------  menu2 --------------- */
#menu_new ul li, #menu_new ul li a{
	list-style:none;
	position:relative;
	float:left;
         padding: 0.5em 1.31em;
         color: #666;
}
#menu_new ul li a:first-child{
        padding-left:0;
}
#menu_new ul li:first-child{
        margin: 0;
        padding: 0.5em 0.1em 0.5em 0.2em;
}
.content #menu_new ul{
        width:600px;
}
.content #menu_new  ul li.parent ul{
        width:auto;
}
#menu ul .parent li:first-child{
        margin: 0.4em 0 0 0;
        padding: 0.5em 0.2em;
}


#menu_new ul li ul{
	position:absolute;
	width:230px;
	display:none;
         padding: 0;
         margin-top: 2em;
         	z-index:9999;
}

#menu_new ul li ul li{
	width:230px;
	padding: 0.5em  0.2em;
         	text-align:left;
	background-color: #666;
         color: #fff;
	border-bottom: 1px dotted rgb(150, 150, 150);
}
#menu_new ul li ul li a, #menu_new ul li ul li ul li a{
         margin-left: 5px;
padding: 0.5em  0.2em;

      }

#menu_new ul li ul li ul{
	margin-top: -10px;
	margin-left: 232px;
	display:none;
}
#menu_new ul li ul li ul li{
	padding: 0.5em 0.2em;
         text-align:left;
}
#menu_new ul li ul li:hover{
         padding: 0.5em 0.2em;
	text-decoration: none;
	color: #fff;
	background-color: #666;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999999));
background-image: -webkit-linear-gradient(top, #333, #999999);
background-image: -moz-linear-gradient(top, #333, #999999);
background-image: -o-linear-gradient(top, #333, #999999);
background-image: linear-gradient(to bottom, #333, #999999);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );
}


#menu_new ul li ul li a:hover{
        background-image:none;
        padding: 0.5em 0.2em;
}
#menu_new ul li ul li a{
	color:#fff;
         display:block;
	padding: 0.5em 0.2em;
}
#menu_new ul li.parent:hover ul{
        display:block;
}
#menu_new ul li.parent:hover ul li.parent ul{
        display:none;
}
#menu_new ul li.parent ul li.parent:hover ul{
        display:block;
}

/* -------- end menu2 -------------- */
#logo{
	padding: 1em;
}
.h2mainTitle{
         line-height: 0.5;
}
.noSpUnder{
        margin: 0;
        padding: 0;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 0px;
	padding-left: 0px; 
}
p{
	font-size: 0.8em;
	font-family:Arial, Helvetica, sans-serif;
}
.sb1{
	line-height: 1.5em;
	text-align:justify;
          float: left;
	/*width: 95%;*/
	padding-bottom: 5px;
        /*margin-right: 0.8em;*/
	min-height:300px;
	min-width:370px;
}
a img {
	border: none;
}

         
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a{ font-size: 0.8em;
	color: #666;
}

a:link {
	color:#666;
	text-decoration: none; 
}
a:visited {
	color: #666;
	text-decoration: none;
}
a:hover{
        color: #666;
	text-decoration: none;
}

#box1 a,#box2 a, #box3 a{
         text-decoration: none;
         color: #666;
}
#box1 a:hover, #box1 a:active, #box1 a:focus, 
#box2 a:hover, #box2 a:active, #box2 a:focus, 
#box3 a:hover, #box3 a:active, #box3 a:focus{ 
	text-decoration: none;
	color: #333; 
}
.boxNav{
         padding: 1em 0.2em;
         color: #FFF;
}
#nav{
	float: left;
	width: 100%;
}
ul #navProject li a{
	text-decoration: underline;
        	width: 3.5em;	
}
#navProject a:hover, #navProject a:active, #navProject a:focus { 
	text-decoration: none;
	margin-left: 0;
	color: #FFF;
        background-color: #666;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999999));
  background-image: -webkit-linear-gradient(top, #333, #999999);
  background-image:    -moz-linear-gradient(top, #333, #999999);
  background-image:      -o-linear-gradient(top, #333, #999999);
  background-image:         linear-gradient(to bottom, #333, #999999);
}
.imgA a:hover{
   border-left: #999 2px solid;
   border-bottom: #999 2px solid;
}


/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	max-width: 990px;
	background-color: #fff;
	margin: 0 auto;
        min-height:420px;
}
.service_container {
	width: 100%;
	max-width: 990px;
	background-color: #fff;
	margin: 0 auto;
	min-height:420px; 
}
.head_container{
	width: 100%;
	background-color:#666;
	height: 8.5em;
	overflow:hidden;
}
.foot_container{
 	width: 100%;
	background-color:#666;
	height:25.5em;
	overflow:hidden;
}

.header {
	background-color: #666;
	padding: 0;
	width: 85.4%;
	max-width: 990px;
	margin:0 auto;
	margin-top:12px;
	height:100px;
	overflow:hidden;
	text-align:right;
}
.footer .header{
	padding-left:0px;
	text-align:left;
}
.headImg{
          margin: 0 1em 0 0;
	float: left;
}
.headImg2, .headImg2_s, .headimg2{
	float: left;
          margin: 0 1em 0 0;
          cursor:pointer;
	/*filter:gray;*/
}
.header_home, .footer_home {
	background-color: #666;
	padding: 0;
	width: 100%;
	max-width: 1260px;
	margin:0 auto;
	margin-top:12px;
	height:100px;
	overflow:hidden;
	text-align:right;
}
.sidebar1 {
	float: left;
	width: 37%;
	padding-bottom: 5px;
        margin-right: 1.7em;
}
.sidebar1 div{
	padding-left:0px;
}
.sidebar1 p{
        text-align: justify;
}
.spacer{
          height: 0.9em;
}
.content{
	padding: 10px 0;
	width: 60%;
	float: left;
        min-height: 38em;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 15px 15px 15px 0; 
	margin: 0 10px 0 0px ;
}
h {
       height: 420px;
}

/* ~~ navigation~ */
ul.nav li{
	display: inline;
	list-style-type:none;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 0.4em;
	margin: 1em 2em 1em 0;
	display: inline; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background-color: #fff;
	color: #666;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus, navProjects a:hover, navProjects a:active, navProjects a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #6F7D94;
	color: #fff;
}
/* main content css */

ul.navProjects a, ul.navProjects a:visited {
	padding: 5px;
	margin: 0px 15px 0 0;
	display: inline; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background-color: #fff;
	color: #000;
}

/* the projects div and boxes */


div#projects{
        padding-top: 3.8em;
	min-width: 400px;
	max-height:450px;
        min-height: 420px;
	
}
div#projects_home{
       min-height: 450px;
}
div#box1, div#box2, div#box3{
        width: 33%;
	min-height: 125px;
	float: left;
}
div#box1 a, div#box2 a, div#box3 a{ 
   margin-top: 0;
   padding: 0.4em;
}
div#box1 img, div#box2 img, div#box3 img{
	margin:  0.2em 0 0.2em;
	opacity:0.75;
}
div#box1 img:hover, div#box2 img:hover, div#box3 img:hover{
	opacity:1;
}

div#quote{
	margin: auto;
	padding: 0.6em;
	width:91%;
       /* min-height:300px; */
        float: left;
}
.quoteLrgTxt{
	font-size: 1.3em;
}
.quoteUnderline{
	text-decoration: underline;
}


/* ~~ The footer ~~ */
.footer {
          min-height: 50em;
	background-color: #666;
	padding: 0;
	/*position: relative;/* this gives IE6 hasLayout to properly clear */
	/*clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	width: 100%;
	overflow:hidden;
}


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
#projects_other{
         min-height: 37em;
}
#large_image{
          margin-top: 3em;  
}


#large_image_portrait{
        background-color: #000;
        border: 10px solid #000;
}
#large_image_portrait img{
	max-width:380px;
	max-height:600px;
        padding-right: 15px;
}
#large_image img:hover, #large_image_portrait img:hover {
	cursor:pointer;
}
#menu{
	float:left;
}
.service_container #menu{
	margin-top:25px;
}
.footer .gallery img:hover{
	cursor:pointer;
}
.left_content h4 a{
	color:black;
}
.left_content h4 a:hover{
	text-decoration:underline;
}
.img_link:hover{
	background-image:none !important;
	background-color:none !important;
}
.footer .gallery .gsWrapper{
	padding : 0 0px;
}
.footer .gallery .gsWrapper canvas{
	padding : 0 0px;
}
.footer .gallery .gsWrapper canvas:hover{
	cursor:pointer;
}
.service_content{
	width:100%;
}
.service_content h2{
	padding:0px 10px;
}
.service_content div{
	width:20%;
	float:left;
}

@media screen and (max-width: 1010px) {
	#menu ul li a{
		padding:0em 0.5em 0em 0.5em;
	}
	/* #large_image img{ */
		/* width:580px; */
          /* } */
}
@media screen and (max-width: 500px) {
	#logo{
		width:120px;
		height:auto;
	}
	.left_content h2{
		font-size:1em;
	}
	#large_image img{
		width:300px;
	}
        #large_image_portrait img{
	        width:190px;
	}
	.container{
		min-height:300px;
	}
	.footer, .head_container{
		height:5.5em;
	}
          
	.headImg2{
		width:80px;
		height:58px;
	}
	#menu ul li{
		display:list-item;
	}
	div#box1, div#box2, div#box3{
		float:none;
		width:65%;
		text-align:center;
		margin-bottom:2em;
	}
}

/* -- styles for Concept design service -- */

h2 CDStxt{
	color: #72706F;
	font-size:24px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	height: 24px;
}

.h3gr{
	color: #92D400;
	font-size:36px;
}
.gr24{
	color: #92D400;
	font-size: 26px;
}
.gr22{
	color: #92D400;
	font-size: 22px;
}

.gr12{
	color: #92D400;
	font-size: 12px;
}

#content1{
	float: left;
	width: 430px;
	padding: 0 0 5px 2px;
}

#content1 .ct1iframe{
	float: right;
	z-index:0;
		
}
#content1 h3{
	padding-left: 10px;
	font-size: 32px;	
}
#content1 .lh{
	padding:1.6em 0 0.13em 0.3em;
	margin:0;	
}

#content2{
	position: relative;
	z-index: 10;
	top: 32px;
	left: 20px;
	float: left;
	width: 340px;
		
}
#photo1{
	position:absolute;
	top: 0;
	left: 0;	
	z-index: 100;
}
#photo2{
	float: right;
	position:absolute;
	top: 30;
	left: 30;	
	z-index: 10;
}
#img1{
	
	float: left;
	z-index: 10;
	top: 0;
	left: 0;
}
#fltSample{
	
	z-index: 100;
	top: 20;
	left: 20;
	width: 200px;
}
#img2{
	
	float: left;
	z-index: 9;
	top: 20;
	left: 20;
}

#content3{
	position:relative;
	z-index:11;
	float: right;
	width: 195px;
	
}

#content3 a{
	width: 2em;
	padding: .5em;
	color:#92D400;
	text-decoration: none;
}

#content3 a:hover{
	text-decoration: underline;	
}
#content3 li.hgt{
	height: 3.1em;
	background-color: none;
	list-style-type: none;
	
}
#content3 li{
background-color: none;
	list-style-type: none;
	padding: !important 0;
	margin: 0;
}

#content3 .move1{
	position: relative;
	top: -5px;
	left: -8px;
	
}

#content3 .lh2{
	padding: 2em 0 0.25em 0;
	margin:0;	
}
.CDS{
	font-size:38pt;
	color: #92D400;
	font-weight: 600;
}
#CDSmargin{
	margin:0;
	padding-bottom: 18px;	
	height: 90px;
}

#CDS img{
	position: relative;
	z-index: 20;
	top: 0;
	left: 0;
}
#CDStext{ 
	position:absolute;
	z-index:1;
	top: 65px;
	left: 345px;	
}

#CDS1{
	position:relative;
	z-index:1;
	float: left;
	margin: 0;
	padding: 0;
	width: 990px;
	height: 90px;
}

#CDS1 h2{
	padding: 0;
	margin: 0;
	line-height: 0;
}
#CDS2{
	position:relative;
	z-index:100;
	float: right;
	width: 600px;
	height: 90px;
	vertical-align:bottom;
}

.CDS3{
	font-size: 28pt;
	color: #72706F;
	font-weight: 600;	
}

#FBH{
	position:relative;
	z-index:15;
	float: right;
	width: 420px;	
	height: 53px;
	padding: 8px 17px 0 0;
}
h4 .ftLists .flListsForward {
	color: #72706F;
	line-height: 0.1em;	
}
.ftLists{
	width:174px;
	float: left;
	line-height: 0.01em;
	padding: 0;
	margin: 0;	
	
}
.flListsForward{
	width: 240px;
	float: left;
	line-height: 0.01em;
	padding: 0;
	margin: 0;	
}

.flListsForward li{
line-height: 1.4em;
	color: #72706F;
	font-size: 0.8em;
	list-style-image: url(images/bulletLi.gif);
}
.ftListsSmlTxt{
	font-size:10px;
}
.ftLists li{
	line-height: 1.4em;
	color: #72706F;
	font-size: 0.8em;
	list-style-image: url(images/bulletLi.gif);
	}
.flListsForward .ft1{
	padding-left: 25px;	
}

.ftLists  .ft1 {
	padding-left: 25px;
	color: #72706F;	
}
h3 .ft1{
	font-size: 18px;
}
.clearfloat{ 
	clear:both;	
}

.fltRight{
	float:right;
	margin:0;
	padding: 0;
}

pd1{
	margin-top: 6px;	
}
/* Stylesheet: TNA_css Modified On 2013-12-27 02:37:20 */