/* CSS Document */

body{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#999999; background: url(images/bgmain.jpg) top center no-repeat #000000;}/*changed*/
body img{ border:0}
form{ padding:0; margin:0}
#nav ul, #nav li, .linkslist, .linkslist li, .products, .products li , .portfolio, .portfolio li, .homeportfolio, .homeportfolio li, #footer li, #footer ul,#navigation,#navigation li,.listwithleftarrow, .listwithleftarrow li { margin:0; padding:0; text-indent:0; list-style-type:none}
h1,h2,h3{ margin:0 auto}
h1{ margin:0; padding:0}
h2{  padding-bottom:5px; padding-top:15px; font-size:14px; color:#FFFFFF}
h2123123{ background:url(images/dottedline.jpg) bottom repeat-x; padding-bottom:5px; padding-top:15px; font-size:14px; color:#FFFFFF}
#tophead {background: url(images/cross-header_01.png) no-repeat; height:121px; position:absolute; width:100%}

#thumbviewer h6{ background:url(images/dottedline.jpg) bottom repeat-x;  font-size:18px; color:#FFFFFF; padding:0; margin:0; padding-bottom:13px ; padding-top:10px;font-weight:normal;}
h2.noline {background:none;}
h2 a{color:#999999}
a:hover{color:#999999}
#bg{ background:url(images/bottombg.jpg) bottom center no-repeat}
#main, #footer{ width:977px; margin:0 auto}
#header{ height:105px;  position:relative}
.call{position:absolute;width:402px;height:24px;right:17px;bottom:15px;text-indent:0}

#headerlink a { width:305px ; height:132px; display:block; text-indent:-9000px; overflow:hidden}
#nav{ background: url(images/navbar.png) ; height:45px; padding-top:24px }
.logo{position:absolute;top:17px;left: 15px;}
#nav li { float:left; padding-left:30px}
#nav a { font-family: Calibri, "Trebuchet MS", Arial; font-size:15px; color:#4F4F4F; text-decoration:none} 
#nav a:hover{ color:#000000}
#threecolumns{ padding-top:25px; padding-bottom:20px}
.column1{ width:675px; float:left; padding-right:50px;padding-left:10px;} 
.column1 h3{ font-size:18px; color:#9777b4; padding-top:30px}
.column3{ float:left; width:232px}

.whiteandbold, a{ color:#FFFFFF;  text-decoration:none}
#threecolumns { line-height:18px}
.redbutton a{ background-position: left bottom}
.style14s {font-size:14px;color:#FFF}
.headers{ height:22px;text-indent:-9000px; overflow:hidden; margin-top:20px; margin-bottom:20px; background: no-repeat left top }
.welcome{ background-image:url(images/welcome.jpg)}
.ourservices{ background-image:url(images/ourservices.jpg); }
.ourproducts{ background-image:url(images/ourproducts.jpg)}

.linkslist{ padding-top:10px; }
.linkslist li{ padding-bottom:8px;; padding-top:8px; background:url(images/dottedline.jpg) bottom repeat-x;  position:relative}
.linkslist span{ position:absolute; right:0; top:9px}
.linkslist a{ color:#999999; display:block }
.linkslist a:hover{ color: #FFFFFF; }
.latestwork{ background-image:url(images/latestwork.jpg);  }
.quote{ font-style:italic}
.paddingright25{ padding-right:25px}
.products li{ padding-bottom:6px}
.imgportfolio{ padding-bottom:10px}
.news{ position:relative; }
.news h3{font-size:14px;; padding-top:10px}
.news h3 a{  color:#2898DF}
.news p{ padding:0; margin:0; padding-top:5px}
.abs{
	position:absolute;
	right:0;
	width:89px;
	height:14px;
	top: -24px;
}
.clear{ clear:both}

.portfolioleft{width:687px; float:left; position:relative}
.portfolioright{float:left; width:256px; padding-left:13px}
.portfolioright h1{ color:#FFF; padding-bottom:15px; background:url(images/dottedline.jpg) bottom repeat-x; font-size:25px}
.viewsite{ padding-top:15px; text-align:right; display:block}
.portfolioh{ background-image:url(images/portfolioo.jpg)}
#threecolumns h1{height:34px; padding:0; margin:0}
#threecolumns h2{height:25px; padding:0; margin:0}
.portfolio li{ padding-right:13px; padding-bottom:13px; float:left; width:216px}
.portfolio a {border:8px solid #3f3f3f; display:block}
.portfolio a:hover{border: 8px solid #48a7e2}
.navbutton{ text-align:right; padding-bottom:25px}
#portfolionav{ background: url(images/portfolionav.jpg) no-repeat ; height:28px}
.pager{ width:507px; float:left}
.previous,.next{ float:left; width:83px}
.previous a,.next a{ float:left; width:83px; color:#000000; padding-top:6px; text-align:center}
.previous a:hover,.next a:hover{ color:#3f3f3f}
.portfoliocontainer{position:relative}
.padbottom15{ padding-bottom:15px}
.padbottom30{ padding-bottom:30px}
.padtop15{ padding-top:15px}



.homeportfolio{ padding-top:20px; position:relative}
.homeportfolio li{ float:left;  }
.homeportfolio li img{ margin-bottom:9px}
.homeportfolio li a  {color:#999999; display:block; font-size:13px;  width:197px; height:180px;  padding:9px; background:#3f3f3f;margin-right:14px}
.homeportfolio li a:hover{ color:#171717;background:#65b2e2 }

.margin0 a{ margin-right:0}

#ourportfolio{
	display:block;
	position:absolute;
	right:6px;
	top:-39px;
	padding-right:10px;
	background:url(images/smallarrow.png) right 6px no-repeat;
	width:100px
}
#ourportfolio h1{ height:6px}

.arrowedlink{ text-align:right; background:url(images/smallarrow.png) right 6px no-repeat; padding-right:33px; margin-top:18px; margin-right:5px}
.arrowedlink a:hover{ color:#999999}
.secondhome{ padding-top:30px}
.secondlefthome{ width:434px; float:left; padding-right:24px; }
.secondrighthome{  width:197px; float:left; background:#3f3f3f; padding:9px; margin-top:3px}

.arrowed{ padding-right:15px; background:url(images/smallarrow.png) right 12px no-repeat; padding-bottom:15px; margin-top:3px}




.arrowlist a{ background:url(images/smallarrow.png) 210px 7px no-repeat;}
.testimonials{ font-style:italic; padding-bottom:0; margin-bottom:0}

.uperfooter{ background-image:url(images/footerrounded.jpg); background-repeat:no-repeat; height:60px; margin-top:30px}
.uperfooterleft{ float:left; padding-left:27px; width:700px; padding-top:20px; }
.uperfooterright{ float:right; width:200px; padding-right:27px; padding-top:5px }

#footer{ background: url(images/smalllogo.jpg) right top no-repeat; padding-top:25px; padding-bottom:25px}

#footer li{ float:left; padding-right:12px}
#footer a{ display:block; padding-right:12px; border-right:1px solid #202020}
#footer a:hover{ color:#999999}
.copyright{ font-size:10px; padding-top:15px;}

.contactform label{ display:block; padding-bottom:8px; padding-top:8px}
.contactform input{ height:19px; border:1px solid #3f3f3f; background: url(images/formbg.jpg) top repeat-x #171717; padding-top:3px; color:#FFFFFF; width:228px}
.nameform{ width:90px; float:left; padding-right:10px}
.nameform input{width:88px;}
.phoneform{ width:128px; float:left;}
.phoneform input{ width:126px}
.contactform textarea{ width:228px; height:70px; padding-top:3px; border:1px solid #3f3f3f; background: url(images/formbg.jpg) top repeat-x #171717;color:#FFFFFF; overflow:auto}

.submit input{ width:230px; height:31px; border:0; margin-top:10px}


input.fields { height:19px; border:1px solid #3f3f3f; background:url(images/formbg.jpg) top repeat-x #171717; padding-top:3px; color:#FFFFFF}
select.fields {border:1px solid #3f3f3f; background:top repeat-x #171717;  color:#FFFFFF; }
textarea.fields {  border:1px solid #3f3f3f; background:url(images/formbg.jpg) top repeat-x #171717; padding-top:3px; color:#FFFFFF}


/* fade effect for what we do menu*/
#navigation {
  list-style: none;
    

}

#navigation li {
  float: left;
   width:120px;
   margin-right:10px;
    cursor: pointer


}


#navigation a,
#navigation a .hover {
  height:180px; 
	position: relative;
	display: block;
	background:url(images/whatwedo.png);
	width: 120px;
	 cursor: pointer

	
}


#navigation a * {
  display: none;
}

/* individual navigation items */
#navigation a.webdesign {
  background-position: 0 0;
  

}

#navigation .highlight a.webdesign:hover,
#navigation a.webdesign .hover{
  background-position:  0 -183px ;


	


  

}
#navigation a.webdev {
  background-position: -130px 0;



}

#navigation .highlight a.webdev:hover,
#navigation a.webdev .hover {
  background-position: -130px -183px;

}

#navigation a.ecom {
  background-position: -260px 0;

   
}

#navigation .highlight a.ecom:hover,
#navigation a.ecom .hover {
  background-position: -260px -183px;
}


#navigation a.emar {
  background-position: -390px 0;

   
}

#navigation .highlight a.emar:hover,
#navigation a.emar .hover {
  background-position: -390px -183px;
}


#navigation a.gfx {
  background-position: -520px 0;

   
}

#navigation .highlight a.gfx:hover,
#navigation a.gfx .hover {
  background-position: -520px -183px;
}
#nopadding li{ padding:0}

.left50 { float:left; width:48%}
.right50{ float:right; width:48%}
/* fade effect for what we do menu*/


.listwithleftarrow{ padding-top:15px; padding-bottom:30px }
.listwithleftarrow li{ padding-top:10px; padding-bottom:10px; padding-left:20px; background:url(images/smallarrow.png) left 15px no-repeat}



/* Image Gallery Styles */
.galleryContainer {width:660px;margin:auto;}
.galleryImage {float:left;width:215px;margin-bottom:10px;text-align:center;}

.galleryImage img {border: solid 1px #999999;}
.galleryImage span {display:block;font-size:11px;}
.galleryImage span div {display:block;font-size:11px;}
.galleryText {}
.c,.clear {clear:both}

#breadcrumb {font-size:11px;}


.portfolio{ width:675px}
th {color:black}
.white {color:White;}

#thumbviewer div{ display:none}
#thumbviewer { height:470px; overflow:hidden}


/*New Stuuff*/

.pager ul, .pager li{ margin:0; padding:0; list-style-type:none}
.pager ul{ padding-left:30px; padding-top:8px; margin:0 auto; }
.pager li { float:left; width:11px; height:10px; padding-right:7px}
.pager a { display:block; width:11px; height:10px; background:url(images/pager.jpg) right top; text-indent:-9000px; overflow:hidden}
.pager a:hover, .pager a.activeSlide {background:url(images/pager.jpg) left top}