*{
	margin:0;
	padding:0;
}

body{
	background-color:#f4f7f9;
	font-family: arial, san-serif;
}

h1,h2,h3,h4,h5,#toTop,a.moreSites{
	font-family: 'AmaranthBoldItalic';
	line-height:1.5;
}

img{
	border:none;
}

h1{
	font-weight:normal;
}

h2{
	/*color:#4f4e4e;*/
	color:#101010;
	font-size:1.4em;
}

p{
	color:#5a5a5a;
	font-size:0.9em;
}
/*=================Area layout=================================*/
#wrapper{
	width:100%;
	height:100%;
}

#headerOuter{
	width:100%;
	height:135px;
	}


#headerInner{
	width:960px;
	height:135px;
	margin:0 auto;
	overflow:hidden;
}

#contentUpperOuter{
	width:100%;
	height:375px;
	background:url(images/woodBG.jpg) repeat top center;
	border-top:5px solid #000;
	border-bottom:5px solid #323232;
	overflow:hidden;
}

#contentUpperInner{
	width:960px;
	height:375px;
	margin:0 auto;
	position:relative;
}

#contentLower{
	width:960px;
	height:auto;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#footerOuter{
	width:100%;
	height:225px;
	background-color:#101010;
	border-top:5px solid #323232;
	overflow:hidden;
}

#footerInner{
	width:960px;
	height:223px;
	margin:0 auto;
	font-family: 'AmaranthBoldItalic';
}

/*----------------HeaderInner positioning/stying and Main Navigation--------------------*/

a#mainLogo{
	float:left;
	width:360px;
	height:150px;
	margin-top:1.1em
}

a#hireMe{
	float:right;
	margin:-5em 0 0 0;
	-webkit-animation: cssAnimation 3s 1 linear;
	-moz-animation: cssAnimation 3s 1 linear;
}
@-webkit-keyframes cssAnimation {
	from { -webkit-transform: rotate(0deg) scale(0.692) skew(20deg) translate(0px); }
	to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
	from { -moz-transform: rotate(0deg) scale(0.692) skew(20deg) translate(0px); }
	to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}

ul#topnav{
	list-style:none;
}

ul#topnav li{
	display:inline;
}

ul#topnav a{
	font-family: 'AmaranthBoldItalic';
	text-decoration:none;
	float:left;
	position:relative;
	top:110px;
	left:200px;
	margin:0 0.75em 0.25em 0;
	font-size:1.1em;
	padding-right:5px;
	color:#101010;
	}

ul#topnav a:hover{
	color:#999;
}

#home li.home a,#contact li.contact a{
	color:#00f;
}

/*--------------Styling/Positioning for upperContentArea-------------------*/
#contentUpperInner h1{
	width:475px;
	font-size:200%;
	color:#fff;
	margin:0 0 0.25em 0.2em;
	padding-top:1em;
	float:left;
}

#slideShowWrap{
	width:410px;
	height:335px;
	background-color:#333;
	float:right;
	margin:0.85em 0 0 0;
	-webkit-box-shadow:1px 2px 7px #eee;
	-moz-box-shadow:1px 2px 7px #eee;
	box-shadow:1px 2px 7px #eee;
}

.slideShow li img{
	margin:5px 0 0 5px;
	width:400px;
	height:325px;
}

.textLeft{
	background:url(images/h1BG.png) no-repeat -15px 5px;
	width:475px;
	height:370px;
	float:left;
}

#contentUpperInner h2,#contentUpperInner h3{
	float:left;
	width:475px;
	clear:left;
	color:#fff;
	margin-bottom:0.75em;
	font-weight:normal;
}
	
/*--------------Styling/Positioning for lowerContentArea-------------------*/

#upperTextLeft{
	float:left;
	margin:1.25em 0 1.5em 0;
}

#upperTextRight{
	float:right;
	margin:1.25em 0 1.5em 0;
}

#upperTextRight a{
	color:#191970;
}

#contentLower p,#contentLower li {
	width:440px;
	margin:0.5em 0.5em 0.5em 0;
}

#contentLower li{
	font-size:0.9em;
}

#contentLower li:nth-child(even){
	color:#5a5a5a;
}
/*------------------Index sprite pack positioning--------------------------*/

h2#me{
	background:url(images/indexSprite.png) no-repeat 360px 0;
	padding:23px 50px 10px 0;
}

h2#services{
	background:url(images/indexSprite.png) no-repeat 360px -80px;
	padding:20px 50px 10px 0;
}

h2#workDone{
	background:url(images/indexSprite.png) no-repeat 290px -150px;
}

a.viewSiteLeft,a.viewSiteRight {
	background:url(images/indexSprite.png) no-repeat -12px -246px;
	padding:7px 25px 23px 75px;
}

/*-----Styles main heading on index page------*/

h2#workDone{
	padding:20px 120px 15px 0;
	color:#101010;
	text-shadow:1px 1px 1px #ccc;
	font-size:200%;
	margin:0 0 0 10em;
	float:left;
}

/*---Styles the containing element surrounding the Right hand side of each portfolio statement*/

.WrapAroundImgRight{
	margin:0 0 0.5em 0;
	float:left;
}	
	
div.rightImg{
	width:410px;
	height:335px;
	background-color:#ddd;
	border:3px solid #ccc;
	float:right;
	margin:1em 0.5em 0 0;
	-webkit-box-shadow:1px 2px 7px #101010;
	-moz-box-shadow:1px 2px 7px #101010;
	box-shadow:1px 2px 7px #101010;
}

.rightImg img{
	margin:5px;
}

h2.nameLeft{
	margin:0;
	text-shadow:1px 1px 1px #ccc;
}

.WrapAroundImgRight p{
	float:left;
}

/*---Styles the containing element surrounding the Left hand side of each portfolio statement*/

.WrapAroundImgLeft{
	margin:0 0 0.5em 0;
	float:left;
}

div.leftImg{
	width:410px;
	height:335px;
	background-color:#ddd;
	border:3px solid #ccc;
	float:left;
	margin:1em 0 0 0.5em;
	-webkit-box-shadow:1px 2px 7px #101010;
	-moz-box-shadow:1px 2px 7px #101010;
	box-shadow:1px 2px 7px #101010;
}

.leftImg img{
	margin:5px;
}

h2.nameRight{
	float:left;
	margin:0 0 0 4em;
	text-shadow:1px 1px 1px #ccc;
	}

.WrapAroundImgLeft p{
	float:right;
}

/*------------------Styles the hover effect over each portfolio screenshot---------------*/
.rightImg:hover,.leftImg:hover{
	border:3px solid #666;
}

/*-----Posititons and styles the sites made image and text/link*/
a.viewSiteLeft {
	float:left;
	margin:0.5em 0 0 0;
	text-decoration:none;
	color:#191970;
	font-size:0.9em;
	font-family: 'AmaranthBoldItalic';
}

a span{
	font-family: 'AmaranthBoldItalic';
	font-size:1em;
	color:#101010;
}

a.viewSiteRight {
	float:right;
	margin:0.5em 14em 0 0;
	text-decoration:none;
	color:#191970;
	font-size:0.9em;
	font-family: 'AmaranthBoldItalic';
	}

a.viewSiteLeft:hover,a.viewSiteRight:hover{
	color:#4f4e4e;
}	

/*-----------Positions the link for back to the top-------------*/

#toTop {
    background:url(images/toTop.png) no-repeat 0 0;
	height:35px;
	width:120px;
    position:absolute; 
    bottom:0.1em; 
    left:1em;
	color:#191970;
    cursor:pointer;
	padding:15px 0 0 45px;
}

#toTop:hover{
	background:url(images/toTop.png) no-repeat 0 -50px;
	color:#000;
}


/*------------Positions the link for more sites-------------*/	

a.moreSites{
	display:block;
	float:right;
	text-decoration:none;
	color:#00f;
	margin:3.7em 1em 0.2em 0;
	background:url(images/moreSites.png) no-repeat 0 -3px;
	padding:10px 0 10px 55px;
	}
	
a.moreSites:hover{
	background:url(images/moreSites.png) no-repeat 0 -53px;
}
	
/*-------Styles/Positions text/social icons in the footer*/

p#rightTxt{
	margin:4.5em 0 0 23em;
	float:left;
	clear:left;
	font-size:0.8em;
	color:#fff;
}

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

p#rightTxt a:hover{
	color:#ccc;
	text-decoration:underline;
}

a#board{
	float:right;
	margin-top:-3em;
}


#footerInner h3{
	margin:1.5em 0 1em 2.5em;
	color:#fff;
	font-weight:normal;
	float:left;
}

#footerInner a#facebook,#footerInner a#twitter,#contentInner a#rss{
	margin:0 0.75em 0 0;
	display:inline-block;
}

#footerInner a#facebook{
	background:url(images/socialSprite.png) no-repeat -5px 0;
	margin-left:3.5em;
	padding:5px 75px 72px 0;
	float:left;
	clear:left;
}

#footerInner a#twitter{
	background:url(images/socialSprite.png) no-repeat -112px 0;
	padding:5px 75px 72px 0;
	float:left;
}

#footerInner a#rss{
	background:url(images/socialSprite.png) no-repeat -220px 0;
	padding:5px 75px 72px 0;
	float:left;
}

#footerInner a#facebook:hover{
	background:url(images/socialSprite.png) no-repeat -7px -115px;
	padding:5px 75px 72px 0;
}

#footerInner a#twitter:hover{
	background:url(images/socialSprite.png) no-repeat -114px -115px;
	padding:5px 75px 72px 0;
}


#footerInner a#rss:hover{
	background:url(images/socialSprite.png) no-repeat -220px -115px;
	padding:5px 75px 72px 0;
}

div#googleplus{
	padding-top:4em;
	float:left;
	margin:-3.5em 0 0 2em;
}

/*----------------Contact form styling and postioning----------------*/


#formContainer{
	width:450px;
	height:auto;
	background:url(images/form_bg.png) no-repeat 0 0;
	float:right;
	margin:2em 0 1em 0;
	/*border:1px solid #999;*/
	-webkit-box-shadow:1px 1px 10px #999;
	-moz-box-shadow:1px 1px 10px #999;
	box-shadow:1px 1px 10px #999;
	-webkit-border-radius:1em;
	-o-border-radius:1em;
	-moz-border-radius:1em;
	border-radius:1em;
}

fieldset{
	margin:0.5em 0.2em 0.2em 0.5em;
	padding-bottom:1em;
	border:none;
}

fieldset p{
	color:#eee;
	font-family: arial, sans-serif;
	font-style:italic;
	font-size:0.75em;
	font-weight:bold;
	margin-bottom:1.5em;
}

fieldset span{
	color:#f00;
	font-weight:bold;
}

label span{
	color:#f00;
	margin-left:-0.7em
}

#formContainer label{
	margin:0 1em 0 0.5em;
	width:130px;
	float:left;
	font-size:0.8em;
	color:#eee;
	font-family: arial, sans-serif;
	font-style:italic;
	font-weight:bold;
}

#formContainer input{
	padding:0.25em;
	width:250px;
	margin-bottom:0.5em;
	background-color:#ddd;
	border:none;
	-webkit-border-radius:0.35em;
	-o-border-radius:0.35em;
	-moz-border-radius:0.35em;
	border-radius:0.35em;
}

#formContainer textarea{
	width:250px;
	height:75px;
	overflow:auto;
	padding:0.25em;
	background-color:#ddd;
	border:none;
	-webkit-border-radius:0.35em;
	-o-border-radius:0.35em;
	-moz-border-radius:0.35em;
	border-radius:0.35em;
}

input#submit{
	margin:1em 2.7em 1em 1em;
	float:right;
	background-color:#ddd;
	color:#000;
	font-weight:bold;

}

input#submit:hover{
	background-color:#999;
}

/*--------Positions the graphic between each company profile------*/

.spacedOut{
	margin:2.5em 0 2em 20em;
}

/*----------------------------Thankyoupage styling--------------------------------*/
#thanksBox h1 {
	margin:2em 0 0 5em;
	text-align:center;
	width:650px;
	background:url(images/h1BG.png) no-repeat 100px 0;
}

/*----------------------------Errorpage styling--------------------------------*/

h1.errorHeading,h2.errorHeading{
	text-align:center;
}

#contact h1.errorHeading{
	margin-top:2.5em;
}

/*temporary More sites to come text index page*/

h2#moreSites{
	float:left;
	clear:left;
	margin-left:11em;
	color:#333;
}