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

/*-------------------------------------------------------------------------------------------
/ Company
-------------------------------------------------------------------------------------------*/
#Company #marketingMix{
	position: absolute;
	top: 30px;
	right: -205px;
}
#Company #bg{
	background:url(/images/company/small-city-bg.png) no-repeat;
	background-position: 0px 50px;
}
#Company #subNav{
	margin-left: 50px;	
}

/*-------------------------------------------------------------------------------------------
/ Website Development
-------------------------------------------------------------------------------------------*/
#websiteDevelopment{
	background-image:url(/images/template/bg/green.png);
}
	#websiteDevelopment .cornerImage{
		position: absolute;
		top: -55px;
		left: -55px;
	}
	#websiteDevelopment #introParagraph{
		margin-top: 20px;
	}
	#websiteDevelopment #contentMiddle{
		padding-left: 130px;
		width: 700px;
	}
			#websiteDevelopment .section#siteDesign .icon{
				left: -100px;
				top: -20px;
			}
			#websiteDevelopment .section#webpageDesign .icon{
				left: -80px;
				top: -30px;
			}
			#websiteDevelopment .section#copywriting .icon{
				left: -90px;
				top: -30px;
			}
			#websiteDevelopment .section#production .icon{
				left: -90px;
				top: -20px;
			}
			#websiteDevelopment .section#webHosting .icon{
				left: -90px;
				top: -20px;
			}
			#websiteDevelopment .section#webmail .icon{
				left: -90px;
				top: -20px;
			}
	
/*-------------------------------------------------------------------------------------------
/ Website Development
-------------------------------------------------------------------------------------------*/
#websiteMaintenance{
	background-image:url(/images/template/bg/purple.png);
}
	#websiteMaintenance .cornerImage{
		position: absolute;
		top: -55px;
		left: -55px;
	}
	#websiteMaintenance #contentMiddle{
		padding-left: 130px;
		width: 700px;
	}
			#websiteMaintenance .section#links .icon{
				left: -100px;
				top: -20px;
			}
			#websiteMaintenance .section#newsletter .icon{
				left: -90px;
				top: -30px;
			}
			#websiteMaintenance .section#naturalSearchOptimization .icon{
				left: -90px;
				top: -30px;
			}
			#websiteMaintenance .section#keywordSearchMarketing .icon{
				left: -90px;
				top: -20px;
			}
			
/*-------------------------------------------------------------------------------------------
/ Custom Applications
-------------------------------------------------------------------------------------------*/
#customApplications{
	background-image:url(/images/template/bg/blue.png);
}
	#customApplications .cornerImage{
		position: absolute;
		top: -55px;
		left: -55px;
	}
	#customApplications #contentMiddle{
		padding-left: 130px;
		width: 700px;
	}
	    #chart, #list{
			position:relative;
			margin-bottom: 10px;
		}
		#chart #print {
			background: url(/images/template/icons/print.png) right no-repeat;
			position:absolute;
			right:24px;
			top:25px;
			width: 59px;
			height:15px;
			display: block;
		}
		    #chart #print a {
				display: block;
			}
			#chart #print a:hover {
				color: #F89921;
			}
		#chart #header {
			background: url(/images/custom-applications/chartheader.png) no-repeat;
			width: 211px; height: 71px;
			color: #FFF;
			font-weight:bold;
			position: absolute;
			top: 95px;
			left:235px;
			padding: 12px 0 0 25px;
		}
		    #chart #line1 {
				color: #000;
				background: url(/images/custom-applications/chartline1.png) center no-repeat;
				font-weight:bold;
				width:300px;
				height:75px;
				position: absolute;
				top:170px;
				left:191px;
				text-align:center;
			}
			    #chart #line1 p {
					margin: 0 0 30px 0 ;
				}
			#chart #line2 {
				background: url(/images/custom-applications/chartline2.png) center 0 no-repeat;
				width: 600px;
				padding-top: 40px;
				position:absolute;
				top:247px;
				left:32px;
			}
			    #chart #line2 .box {
					float: left;
					font-size: 12px;
					width: 139px;
				}
				    #chart #line2 #sales.box {
						margin-left:30px;
					}
					#chart #line2 #production.box {
						margin-left:72px;
					}
					#chart #line2 #processes.box {
						margin-left:55px;
					}
				    #chart #line2 .box p {
						margin:0; padding:0;
					}
				    #chart #line2 .box .title {
						font-weight:bold;
						text-align: center;
					}
					#chart #line2 .box .description {
						font-style:italic;
						line-height:12px;
						font-size:10px;
					}
				    #chart #line2 .box ul {
						padding-left:25px;
						margin:0
					}
				    #chart #line2 .box ul li {
						color: #B0BC22;
						background: none;
						font-size:10px;
						list-style:disc;
						padding: 0;
						margin: 0;
					}
					    #chart #line2 .box ul li span {
							color: #000;
						}
		#list {
			background: url(/images/custom-applications/listbg.jpg) no-repeat;
			width: 680px;
			height: 129px;
			padding-top:10px;
		}
		#list .box {
			width: 317px;
			float: left;
			padding-left:20px;
		}
		#list #experience.box {
			border-right: 1px solid #FFF;
		}
		    #list .box p {
				margin:0;
				color: #FFF;
				font-weight: bold;
			}
			#list .box ul {
				padding-left:25px;
				margin:0
			}

		    #list .box ul li {
				list-style: disc;
				background: none;
				color: #F89921;
				font-size:10px;
				padding: 0;
				margin: 0;
				width: 120px;
				float: left;
				margin-left: 20px;
			}
			    #list .box ul li span {
					color: #000;
				}
			
/*-------------------------------------------------------------------------------------------
/ Portfolio
-------------------------------------------------------------------------------------------*/
#portfolio{
	background-image:url(/images/template/bg/green.png);
}
	#portfolio .cornerImage{
		position: absolute;
		top: -55px;
		left: -55px;
	}
	#portfolio #contentMiddle{
		padding-left: 130px;
		width: 800px;
	}
		#portfolio .section#featuredProjects .icon{
			left: -100px;
			top: -20px;
		}
		#portfolio .section#recentProjects .icon{
			left: -100px;
			top: -20px;
		}
#portfolio table {
	margin-top: 20px;
}
	#portfolio table a img{
		background-color: #b2c085;
		padding: 8px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-box-shadow: 2px 2px 3px #666;
		-moz-box-shadow: 2px 2px 3px #666;
	}
		#portfolio table a:hover img{
			background-color: #98a66b;
		}
#portfolio table tr td{
	text-align:center;
	color: #b0bc22;
	font-weight:bold;
	font-size: 14px;
}
#portfolio h2 span{
	font-size: 12px;	
}

/*-------------------------------------------------------------------------------------------
/ Portfolio Detail
-------------------------------------------------------------------------------------------*/
#portfolioDetail{
	background-image:url(/images/template/bg/green.png);
}
	#portfolioDetail .section .icon{
		left: -85px;
		top: -20px;
	}
	#portfolioDetail .cornerImage{
		position: absolute;
		top: -75px;
		left: -75px;
	}
	#portfolioDetail #contentMiddle{
		padding-left: 130px;
		width: 700px;
	}
	#portfolioDetail #portfolioImageColumn{
		float: left;
		margin: 0px 10px 20px 0px;
		width: 433px;
	}
	    #portfolioDetail #portfolioImageColumn a img {
			background-color: #B2C085;
            border-radius: 10px 10px 10px 10px;
            box-shadow: 2px 2px 3px #666666;
            padding: 8px;
		}
		#portfolioDetail #portfolioImageColumn ul{
			list-style-type: none;
			padding: 5px 0px 0px 0px;
			margin: 0px;
		}
			#portfolioDetail #portfolioImageColumn ul li{
				background-image: none;
				padding-left: 0px;
				float: left;
				margin: 5px 10px 5px 0px;
				
			}

/*-------------------------------------------------------------------------------------------
/ Portfolio Archive
-------------------------------------------------------------------------------------------*/
#portfolioArchive{
	background-image:url(/images/template/bg/green.png);
}
#portfolioArchive #contentMiddle ul img{
	background-color: #b2c085;
	padding: 8px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 2px 2px 3px #666;
	-moz-box-shadow: 2px 2px 3px #666;
}
	#portfolioArchive #contentMiddle ul a:hover img{
		background-color: #98a66b;
	}
#portfolioArchive #contentMiddle ul{
	list-style: none;
}
	#portfolioArchive #contentMiddle ul li{
		width: 200px;
		height: 180px;
		background-image:none;
		float: left;
	}
		#portfolioArchive #contentMiddle ul li p{
			text-align:center;
			color: #58595B;
			font-weight:bold;
			font-size: 14px;
		}
			#portfolioArchive #contentMiddle ul li p a{
				color: #b0bc22;
			}
				#portfolioArchive #contentMiddle ul li p a:hover{
					color: #F8971D;
				}


/*-------------------------------------------------------------------------------------------
/ Testimonials
-------------------------------------------------------------------------------------------*/
.testimonialBox {
	margin: 25px 0 ;
}
    .testimonialBox p {
		margin: 0;
		margin-bottom:10px;
	}
	    .testimonialBox a img {
		    background-color: #b2c085;
		    padding: 8px;
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		    -webkit-box-shadow: 2px 2px 3px #666;
		    -moz-box-shadow: 2px 2px 3px #666;
		}
#testimonials .cornerImage {
    left: -75px;
    position: absolute;
    top: -75px;
}
#testimonials #subNav {
	margin-left:150px;
}


/*-------------------------------------------------------------------------------------------
/ Contact
-------------------------------------------------------------------------------------------*/
#contact .cornerImage{
	position: absolute;
	top: -85px;
	left: -55px;
}
#contact #contentMiddle{
	padding-left: 130px;
	width: 700px;
}
	#contact .section#contactInfo .icon{
		left: -110px;
		top: -20px;
	}
#contact #mapWrapper{
	position: absolute; 
	top: 85px; 
	right: 10px; 
	z-index:10;
}
	#contact iframe{
		-webkit-box-shadow: 2px 2px 6px #666;
		-moz-box-shadow: 2px 2px 6px #666;
		margin: 20px 20px 5px 0px;
	}
	#qrCodeImage{
		margin-top: 30px;
		margin-bottom: 0px;
		text-align:center;
	}
	#qrCodeDecription{
		margin-top: 5px;
		text-align:center;
		font-size: .8em;
	}
#contact #contactInfo{
	
}
	#contact #contactInfo tr{
		
	}
		#contact #contactInfo tr td{
			padding: 5px;
		}
#contact form{
	margin-top: 10px;
}
	#contact form input{
		margin-bottom: 10px;
		width: 350px;
	}
	#contact form label{
		font-weight: bold;
	}
	#contact form p.label{
		font-weight: bold;
	}
	#contact form fieldset{
		display: inline-block;
		padding: 10px 20px 10px 0px;
		width: 330px;
	}
		#contact form fieldset legend{
			font-weight: bold;
			margin: 0px 0px 0px 10px;
		}
		#contact form fieldset checkbox{
			height: 20px;
			width: 20px;
		}
		#contact form fieldset img{
			height: 20px;
			width: 20px;
		}
	#contact form textarea{
		height: 100px;
		width: 350px;
		margin-bottom: 10px;
	}
		
/*-------------------------------------------------------------------------------------------
/ Hosting
-------------------------------------------------------------------------------------------*/
#hosting{
	
}
	#hosting .section .icon{
		left: -85px;
		top: -20px;
	}
	#hosting .cornerImage{
		position: absolute;
		top: -75px;
		left: -75px;
	}
	#hosting #contentMiddle{
		padding-left: 130px;
		width: 700px;
	}
	
/*-------------------------------------------------------------------------------------------
/ FTP
-------------------------------------------------------------------------------------------*/
#FTP #loginForm{
	width: 300px;
	margin: auto;
}
	#FTP #loginForm label, #FTP #loginForm input{
		font-size: 18px;
	}
#FTP #contentMiddle{
	padding: 100px 130px 70px 30px;	
}