@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'DejaWeb';
  src: url('/fonts/DejaWeb.ttf');
} 

@font-face {
  font-family: 'DejaWeb-Bold';
  src: url('/fonts/DejaWeb-Bold.ttf') format("opentype");
}  

body {
	font: 16px 'DejaWeb', 'Helvetica', sans-serif;
	color: #000;
	background: #181818;
	margin: 0px;
	padding: 0px;
	clear: both;
}

a {
	text-decoration:none;
	color: #fff;
}

h1 {
	font: 48px DejaWeb-Bold;
	text-shadow:#6a6a6a 2px 1px 0;
	color:#FFF;
	filter: dropshadow(color=#6a6a6a,offX=1,offY=1);
}

h2 {
	font: 30px DejaWeb-Bold;
	text-shadow:#6a6a6a 2px 1px 0;
	color:#6be065;
}

h4 {
	font: 22px DejaWeb-Bold;
	text-shadow:#6a6a6a 1px 1px 0;
	color:#FFF;
	filter: dropshadow(color=#6a6a6a,offX=1,offY=1);
}

p {
    font: 14px DejaWeb-Bold;
	text-shadow:#6a6a6a 1px 1px 0;
	color:#FFF;
}

#index-bottom-right, #index-bottom-left h2, #bottom p, footer p {
	filter: dropshadow(color=#6a6a6a,offX=1,offY=1);
}

#wrapper {
	width:1000px;
	margin:0px auto;
}

/*for Christmas use images/christmas-header-bg.png*/

header {
	background-image:url(images/header-bg.png);
	height:170px;
}

/*Nav bar start*/
nav {
	margin:0 0 0 480px;
	padding:0;
	height: 53px;
	width: 462px;
}

nav ul {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 462px;
	float: left;
}
nav li {
	display: inline;
	margin: 57px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	height: 53px;
	text-indent: -3000px;
	overflow: hidden;
}
#nav-home a  {
	background: url(images/nav_01.png) no-repeat 0px 0px;
	display: block;
	height: 53px;
	width: 82px;
	margin: 0px;
	padding: 0px;
}
#nav-services a {
	background: url(images/nav_02.png) no-repeat 0px 0px;
	display: block;
	height: 53px;
	width: 96px;
	margin: 0px;
	padding: 0px;
}
#nav-portfolio a {
	background: url(images/nav_03.png) no-repeat 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 53px;
	width: 108px;
}
#nav-blog a {
	background: url(images/nav_04.png) no-repeat 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 53px;
	width: 68px;
}
#nav-contact a {
	background: url(images/nav_05.png) no-repeat 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 53px;
	width: 108px;
}

#nav-home.active a, #nav-services.active a, #nav-portfolio.active a, #nav-blog.active a, #nav-contact.active a {
	background-position: 0px -106px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 53px;
}

    
#nav-home a:hover, #nav-services a:hover, #nav-portfolio a:hover, #nav-blog a:hover, #nav-contact a:hover {	
	background-position: 0px -53px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 53px;
}

#nav-home.active a:hover, #nav-services.active a:hover, #nav-portfolio.active a:hover, #nav-blog.active a:hover, #nav-contact.active a:hover {	
	background-position: 0px -106px;
}

/*Nav bar end*/

#content {
	width:1000px;
	height:730px;
}

/*for index page*/
#index-top-left {
	background-image:url(images/index-bg-left.png);
	background-repeat:no-repeat;
	width:33px;
	height:380px;
	float:left;
}

#index-top-center {
	background-image:url(images/index-bg.png);
	background-repeat:repeat-x;
	width:936px;
	height:380px;
	float:left;
}

/*for all other pages*/

#top-left {
	background-image:url(images/body-bg-left.png);
	background-repeat:no-repeat;
	width:34px;
	height:540px;
	float:left;
}

#top-center {
	background-image:url(images/body-bg.png);
	background-repeat:repeat-x;
	width:937px;
	height:540px;
	float:left;
}

#top-right {
	background-image:url(images/body-bg-right.png);
	background-repeat:no-repeat;
	width:29px;
	height:540px;
   	float:right;
	
}
/*index page Slideshow pics start*/ 
.pics {  
    height:  312px;  
    width:   463px;  
    padding: 0;  
    margin-top: 30px;
	float:left;  
} 

.pics img {  
    padding: 0;  
    border:  0;    
    width:  463px; 
    height: 312px; 
    top:  0; 
    left: 0 
} 
/* index page Slideshow pics end*/ 


#index-top-right {
	background-image:url(images/index-bg-right.png);
	background-repeat:no-repeat;
	width:31px;
	height:380px;
   	float:right;
	
}

#intro-text {
	width:420px;
	float:right;
	margin-top:30px;
}

#intro-text-topleft{
	width:400px;
	float:left;
	margin-top:0px;
}

/*Carousel start*/

#container {
	width:580px;
	padding:10px;
	margin:130px auto 0px;
	position:relative;
	z-index:0;
}

#example {
	width:600px;
	height:350px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:739px;
	height:341px;
	top:-3px;
	left:-80px;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:570px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:570px;
	height:270px;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next, #slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
	border:0px;
}

#slides .next {
	left:585px;
}

/*
	Pagination
*/

.pagination {
	margin:26px 0px 0px 200px;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 2px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(images/carousel/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	bottom:-35px;
	left:0;
	height:25px;
	padding:0px 20px 20px 20px;
	background:#000;
	background:rgba(0,0,0,0.5);
	width:540px;
	font-size:1.3em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
}

/*Carousel end*/


/*Free qoute button start*/
.css3button {
	width:73px;
	font-family: DejaWeb-Bold;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#206f23 0%,
		#7ef378);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#206f23),
		to(#7ef378));
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border: 1px solid #ffffff;
	-moz-box-shadow:
		0px 1px 0px rgba(255,255,255,0.3),
		inset 0px 0px 1px rgba(255,255,255,0.4);
	-webkit-box-shadow:
		0px 1px 0px rgba(255,255,255,0.3),
		inset 0px 0px 1px rgba(255,255,255,0.4);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

.css3button:hover{
	background: -moz-linear-gradient(
		bottom,
		#206f23 0%,
		#7ef378);
	background: -webkit-gradient(
		linear, left bottom, left top, 
		from(#206f23),
		to(#7ef378));
}
/*Free quote button end*/

/*for index page only*/
#index-bottom {
	background-image:url(images/index-bottom-bg.png);
	background-repeat:repeat-x;
	width:1000px;
	height:350px;
	clear:both;
}

#index-bottom-left {
	width:350px;
	float:left;
	padding-left:60px;
	padding-top:30px;
}

#index-bottom-left ul{
	list-style-image:url(images/list1.png);
}
	

#index-bottom-left li {
	font: 14px DejaWeb-Bold;
	text-shadow:#000 1px 1px 0;
	color:#FFF;
	filter: dropshadow(color=#373737,offX=1,offY=1);
	padding-bottom:25px;
}

#index-bottom-right {
	width:450px;
	float:left;
	padding-left:80px;
	padding-top:30px;
}

#index-bottom-right p {
	padding-bottom:7px;
}

/*for all other pages*/
#bottom {
	background-image:url(images/bottom-bg.png);
	background-repeat:repeat-x;
	width:1000px;
	height:190px;
	clear:both;
}

#bottom h4 {
	padding:20px 0 0 20px;
}

.bottom-tasks {
	width:210px;
	height:70px;
	float:left;
	margin-right:5px;
	margin-left:35px;
}

.bottom-tasks p {
	line-height:24px;
	margin-top:0;
}

/*services page*/

#services-text-topleft h1 {
	margin:20px 0 0 0px;
}

#services-text-topleft h4 {
	margin:5px 0 0 0px;
}

#services-image {
	background-image:url(images/bundle.png);
	width:550px;
	height:369px;
	float:right;
    margin-top:30px;
}

#top-center ul {
	font: 22px DejaWeb-Bold;
	text-shadow:#000 1px 1px 0;
	color:#FFF;
	filter: dropshadow(color=#373737,offX=1,offY=1);
	list-style-image:url(images/list2.png);
	width:280px;
	line-height:40px;
	display:block;	
	float:left;
}

#tools-image {
	width:185px;
	height:177px;
	background-image:url(images/tools.png);
	background-repeat:no-repeat;
	margin:3px 0 0 20px;
	float:left;
}

.bottom-services {
	width:180px;
    float:right;
	margin-top:10px;
	margin-right:10px;
}

.bottom-services p {
	line-height:30px;
}

/*Contact page*/

#contact-text-topleft h1 {
margin:30px 0 5px 30px;
}

#contact-image{
	width:157px;
	height:200px;
	background-image:url(images/mailbox.png);
	margin-top:200px;
	float:right;
}

.bottom-contact {
	width:200px;
    float:left;
	margin-top:10px;
	margin-right:10px;
}

.bottom-contact p {
	line-height:24px;
	margin:0 0 0 30px;
}

/*Social nav*/
#social {
	margin:0 0 0 330px;
	padding:0;
	height: 74px;
	width: 691px;
}

#social ul {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 691px;
	float: left;
}
#social li {
	display: inline;
	margin: 5px 25px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	height: 74px;
	text-indent: -3000px;
	overflow: hidden;
}
#linkedin a  {
	background: url(images/linkedin.png) no-repeat 0px 0px;
	display: block;
	height: 76px;
	width: 94px;
	margin: 0px;
	padding: 0px;
}
#twitter a {
	background: url(images/twitter.png) no-repeat 0px 0px;
	display: block;
	height: 76px;
	width: 95px;
	margin: 0px;
	padding: 0px;
}
#facebook a {
	background: url(images/facebook.png) no-repeat 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 76px;
	width: 106px;
}
#flickr a {
	background: url(images/flickr.png) no-repeat 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 76px;
	width: 96px;
}
    
#linkedin a:hover, #twitter a:hover, #facebook a:hover, #flickr a:hover {	
	background-position: 0px -76px;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 76px;
}

/*social nav end*/


/*contact form*/


input, textarea { 
	padding: 8px;
	border: solid 1px #E5E5E5;
	font: normal 12px Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('form_background.png') left top repeat-x;/*Mimic Background Property in Internet Explorer since IE 6,7,8 does not support CSS3*/
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*0.1 actually means 10 %*/
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}

textarea { 
	width: 400px;
	max-width: 400px;
	height: 150px;
	line-height: 150%;
	}

input:hover, textarea:hover,
input:focus, textarea:focus { 
-moz-box-shadow:0 0 8px lightblue;
	-webkit-box-shadow:0 0 8px lightblue;
	box-shadow:0 0 8px lightblue;
}

.form label { 
	margin-left: 12px; 
	color: #999999; 
	}

.submit input {
	width: auto;
	padding: 5px 14px;
	background: #617798;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor:pointer;
	}
#form-div { 
-moz-border-radius:12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
background-color:#F5F5F5;
padding:15px;
}

#form-wrapper { 
margin:0 0 0 140px;
width:500px;
float:left;
}
/*contact form end*/

footer {
	width:1000px;
	height:100px;
	background-image:url(images/footer-bg.png);
	background-repeat:repeat-x;
}

footer p {
	float:left;
	margin-left:410px;
	margin-top:40px;
	clear:both;
}

#html-badge {
	width:104px;
	float:right;
	margin:5px 10px 0 0;
}