/* ***************************************
GENERAL STYLES
*************************************** */

/* ~~~~~~~~~~~~~~~ DOCUMENT ~~~~~~~~~~~~~~~ */


body { margin: 0 ; font: 70.5%/1.3 "Tahoma", Verdana, Arial, Helvetica, sans-serif; color: #CCC; text-align: center; background: #FFF; text-align:left; height:100% !important; }

html { height:100% !important; }

a { color: #CCC; }

a:hover { color:#FF9900; }

h2 { color:#FF9900; font-size: 1.2em; font-weight:700; }

h3 { color:#666; font-size: 1.1em; font-weight:700; margin:8px 0 0; }

	.top-style { font-family: "Arial", Verdana, Helvetica, sans-serif; color:#CCC; text-decoration:none; }

	img { border: none; }

/*Home Page style*/
.bg-contact { background: url(../images/contact-bg.jpg) no-repeat fixed center top !important }

.bg-home-coffee { background: url(../images/home-coffee-bg.jpg) no-repeat fixed center top !important }

.bg-home-services { background: url(../images/services-bg.jpg) no-repeat fixed center top !important }

.bg-home-aboutus { background: url(../images/about-bg.jpg) no-repeat fixed center top !important }

.bg-home-portfolio { background: url(../images/portfolio-bg.jpg) no-repeat fixed center top !important }


.mainWrapper { width:1000px; height:100% !important; margin: 0 auto;}

	.leftSection { float: left }

	.logo-holder { float: left; padding: 20px 0px 0px 18px; }
		
				.logo-holder a { display:block; /*text-indent:-9000px;*/ }

	.leftCaption1 { background: url(../images/left-caption1.jpg) no-repeat right top; border-right: 1px solid #DBDBDB; float:left; margin: 10em 0em 0em 0em; width: 200px; text-align: right; padding: 12em 0.35em 1em 0em; line-height: 1.15em; color:#333; clear:left; overflow: hidden; font-size: 0.95em;}
	
	.leftCaption-Home { background: url(../images/left-caption-home.jpg) no-repeat right top; border-right: 1px solid #DBDBDB; float:left; margin: 10em 0em 0em 0em; width: 194px; text-align: right; padding: 8.20em 0.65em 1em 2em; line-height: 1.15em; color:#333; clear:left; overflow: hidden; font-size: 0.95em; }
	
	.leftCaption-Services { background: url(../images/left-caption-services.jpg) no-repeat 35px top; border-right: 1px solid #DBDBDB; float:left; margin: 10em 0em 0em 0em; width: 154px; text-align: right; padding: 8em 0.65em 1em 2em; line-height: 1.15em; color:#333; clear:left; overflow: hidden; font-size: 0.95em; }
	
	.leftCaption-About { background: url(../images/left-caption-about.jpg) no-repeat right top; border-right: 1px solid #DBDBDB; float:left; margin: 10em 0em 0em 0em; width: 181px; text-align: right; padding: 14.50em 0.65em 1em 2em; line-height: 1.15em; color:#333; clear:left; overflow: hidden; font-size: 0.95em; }

.leftCaption-Portfolio { background: url(../images/left-caption-portfolio.jpg) no-repeat right top; border-right: 1px solid #DBDBDB; float:left; margin: 10em 0em 0em 0em; width: 153px; text-align: right; padding: 9em 0.65em 1em 2em; line-height: 1.15em; color:#333; clear:left; overflow: hidden; font-size: 0.95em; }


	.midContent { background: #000/*2b2b2b url(../images/main-wrapper-bg.jpg) repeat-x left top*/; float: left; width: 328px;  margin: 0em 0em 0em 9.70em; height:100% !important; }
	
	


/* ~~~~~~~~~~~~~~~ TOP MENUS ~~~~~~~~~~~~~~~ */
.topmenu-holder { float: left; padding:2em 0px 0em 2em; overflow:hidden; }

	.topmenu-holder ul { list-style:none; margin:0em; padding:0em; width:180px; }
		
		.topmenu-holder ul li { margin: 0em 0em 1em 0em; }
		.topmenu-holder ul li.webDesign { float:left; padding:0 0.35em 0 0; background: url(../images/btn-menu-webdesign.gif) no-repeat left top; width: 154px; height:20px; } 		
		.topmenu-holder ul li.webDesign:hover { background: url(../images/btn-menu-webdesign-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.webDesign a:hover { background: url(../images/btn-menu-webdesign-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.webDesign a { display: block; width: 154px; height:20px; text-indent:-9000px; }
		
		.topmenu-holder ul li.webApps { float:left; padding:0 0.35em 0 0; background: url(../images/btn-menu-webapps.gif) no-repeat left top; width: 112px; height:20px; } 		
		.topmenu-holder ul li.webApps:hover { background: url(../images/btn-menu-webapps-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.webApps a:hover { background: url(../images/btn-menu-webapps-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.webApps a { display: block; width: 112px; height:20px; text-indent:-9000px; }
		
		.topmenu-holder ul li.flashApps { float:left; padding:0 0.35em 0 0; background: url(../images/btn-menu-flashapps.gif) no-repeat left top; width: 117px; height:20px; } 		
		.topmenu-holder ul li.flashApps:hover { background: url(../images/btn-menu-flashapps-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.flashApps a:hover { background: url(../images/btn-menu-flashapps-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.flashApps a { display: block; width: 117px; height:20px; text-indent:-9000px; }
		
		.topmenu-holder ul li.seo { float:left; padding:0 0.35em 0 0; background: url(../images/btn-menu-seo.gif) no-repeat left top; width: 176px; height:20px; } 		
		.topmenu-holder ul li.seo:hover { background: url(../images/btn-menu-seo-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.seo a:hover { background: url(../images/btn-menu-seo-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.seo a { display: block; width: 176px; height:20px; text-indent:-9000px; }
		
		
		.topmenu-holder ul li.ia { float:left; padding:0 0.35em 0 0; background: url(../images/btn-menu-ia.gif) no-repeat left top; width: 176px; height:20px; } 		
		.topmenu-holder ul li.ia:hover { background: url(../images/btn-menu-ia-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.ia a:hover { background: url(../images/btn-menu-ia-hover.gif) no-repeat left top; } 
		.topmenu-holder ul li.ia a { display: block; width: 176px; height:20px; text-indent:-9000px; }
		
	.horzmenu-holder { /*float: left;*/ padding: 20px 0em 0em 1em; clear: both;  }
		
		.horzmenu-holder ul { list-style:none; margin:0em; padding:0em; width:280px; font-size: 0.90em; }
			
			.horzmenu-holder ul li { padding: 0em 0em 1em 1em; float: left; font-size:1.10em; }
			 
			
				.horzmenu-holder ul li a { color:#99cc33; font-weight: bold; text-decoration: none; } 
				.horzmenu-holder ul li a:hover { color:#ff9900; font-weight: bold; }
				
				.horzmenu-holder ul li.active { color:#ff9900; font-weight: bold; }
				
		
		.content-holder { float: left; padding: 1.50em 1.50em 1.50em 2em; clear: both; background: #333; /*width:288px;*/ width:88%;}
		
		.imgFloat { clear: right; float: left; margin: 1.65em 0.70em 0em 0em; }
		
		.content-holder ul { list-style:none; margin:0em; padding:0em; width:280px; font-size: 0.90em; }
		
			.content-holder ul li { float: left; margin: 0em 0em 0.65em 0em; clear: both; }
		
		.content-holder-portfolio{ float: left; padding: 1.50em 1.50em 1.50em 2em; clear: both; background: #FFF; /*width:307px;*/ width:88%; color:#333; }
		
			.content-holder-portfolio a { color: #333; } .content-holder-portfolio a:hover { color:#FF9900; }
				
				.content-holder-portfolio img { margin: 0em 0em 0.50em 0.50em; }
			
			
			.inputBox { background:#898989; width: 188px; height:18px; color:#333; border: none; padding: 0.25em 0em 0em 0.45em; font-size: 1.1em;  } 
			
			.textAreaBox { background:#898989; width: 230px; height:110px; color:#333; border: none; padding: 0.25em 0em 0em 0.45em; overflow: hidden; font-size: 1.1em; font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif  } 
			
			.sendBtn { background: #181818; padding: 5px; color:#FFF; text-align: center; font-weight: bold; font-variant:small-caps; font-size: 1.10em; border: 1px solid #0a0a0a; cursor: pointer; height:25px; }
			
			
			ul.privacy { list-style:disc; margin:0em; padding:0em 0em 0em 1.85em; width:265px; font-size: 0.90em; }
		
			ul.privacy li { margin: 0em 0em 0.65em 0em; clear: both; float:none; }
			
			/* ~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~ */
			
			.footer-Top { color:#999; height:auto; float:left; clear:both; font-size: 0.90em; padding: 1em 0.60em 1em 1.60em; /*width: 310px;*/ width:93.2%; background:#000;  }
			
			.footer-Top .leftSection { float: left; }
			
				.lighterTxt { color: #CCC; }
			
			.footer-Top a { color: #999; text-decoration:none; }
			
.footer { color:#666; height:auto; float:left; clear:both; font-size: 0.90em; padding: 1em 0.60em 2em 1.60em; /*width: 310px;*/ width:93.2%; background:#000; border-top:1px dotted #666; line-height:1.60em; }
	
	.footer a { color: #999; text-decoration:none; } .footer a:hover { color:#FF9900; }

	.footer .leftSection { float: left; }
	
	.footer .rightSection { float: right; }
	
	/********Portfolio related styles**********/
	.yui-overlay { position:absolute; padding:0px; margin:0px;background:Transparent; border:1px solid #CCC; }
		
		.overlayBox { visibility:hidden; min-height:372px !important; overflow:hidden; top:220px; position:absolute;  /*-5.00em*/ margin: 0.05em -2em 0em -2em; }
		
		.overlayBox , x:-moz-any-link /* FireFox 2 */{ visibility:hidden; min-height:372px !important; overflow:hidden; top:220px; position:absolute;  /*-5.00em*/ margin: 2.35em -2em 0em -2em; }
		
		.overlayBox , x:-moz-any-link, x:default /* FireFox 3 and above */{ visibility:hidden; min-height:372px !important; overflow:hidden; top:220px; position:absolute;  /*-5.00em*/ margin: 0.35em -2em 0em -2em; }
		
		
		
		.overlayBox .left { float:left; width:328px; height:372px; background:#FFF; filter: alpha(opacity=78) !important; -moz-opacity: 0.78 !important; }
		
		.overlayBox .right { float:right; width:322px; height:372px; background:#FFF; }
		
			.overlayBox .right .close { float:right; padding:0.55em 1.45em 0em 0em; }
			
						.close a { color:#FF0000; font-weight:bold; }  .close a:hover { color: #FF9900; }
			
					.overlayBox .right .content { float:left; padding:1em 1em 0em 1em; }
					
						.overlayBox .right .content img { margin:0px; }
						
						.overlayBox .right .content p { margin:5px 0 0; }