body {
	font:18px 'Abel', Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #FFF;
	overflow:hidden;

}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding:0px;
	font-weight:normal;
}
h1{
	color:#FFF;
	font-size:32px;
	font-weight:400;
	margin:0px;
	padding:0px;
	text-transform:uppercase;
}
h2{
	color:#FFF;
	font-size:22px;
	margin:0px;
	padding:0px;
	text-transform:uppercase;
	font-weight:400;
}
.section-heading{
	color:#566777;
	font-size:14px;
	margin:0px;
	padding:5px;
	background:#d4dbe2;
	width:95%;
}

a img { 
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #FFF;
	text-decoration: underline; 
}
a:visited {
	color: #FFF;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.sitetitle{
	float:left; 
	font-weight:normal;
	font-size:42px;
	width:150px;
	padding:0px 145px 0px 30px; 
	margin:0px; 
	color:#566777;
	text-shadow: 2px 2px 2px #b6b6b6;
	font-family: Arial, Helvetica, sans-serif;
}
.sitetitle img{
	position:absolute;
	top:130px;
	}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	margin: 0 auto;
	margin-top:118px;
	width:1040px;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {
	padding: 0px 20px 20px 20px;
	width: 1000px;
	margin: 0 auto;
}

#home {
	background: #4887a5 url(../images/bg.jpg) repeat-x center top scroll;
	float: left;
	width:100%;
	height:1400px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
nav{
	width:600px;
	padding-left:105px;
	}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none;
	width:600px;
}
ul.nav li {
	float:left;
	margin:105px 3px 0px 0px;
	text-align:center;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 12px 5px 30px 5px;
	display: block;
	text-decoration: none;
	color:#FFF;
	width:85px;
	text-align:center;
	font-size:17px;
	font-weight:bold;
}
ul.nav li a{
	color: #FFF;
	opacity:0.9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
	transition:padding 1s;
	-moz-transition:padding 1s; /* Firefox 4 */
	-webkit-transition:padding 1s; /* Safari and Chrome */
	-o-transition:padding 1s; /* Opera */
	}
ul.nav li a:hover{
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	padding: 12px 5px 20px 5px;
	}

ul.nav li.nav1 a{
	background: url(../images/nav-bg1.png) no-repeat bottom;
}
ul.nav li.nav2 a{
	background: url(../images/nav-bg2.png) no-repeat bottom;
}
ul.nav li.nav3 a{
	background: url(../images/nav-bg3.png) no-repeat bottom;
}
ul.nav li.nav4 a{
	background: url(../images/nav-bg4.png) no-repeat bottom;
}


/* About */
#about{
	border-top:solid 80px #4c4d01;
	padding-top:50px;
	background: #949831 url(../images/bg-about.jpg);
	float: left;
	height:1400px;
	width:100%;
	color:#FFF;
	font-size:20px;
	}
#about aside{
	display:block;
	}
.header-inner {
	position:fixed;
	margin: 0 auto;
	margin-top:0px;
	width:1040px;
}
.header-inner .sitetitle img{
	position:absolute;
	transition:top 1s;
	-moz-transition:top 1s; /* Firefox 4 */
	-webkit-transition:top 1s; /* Safari and Chrome */
	-o-transition:top 1s; /* Opera */
	top:5px;
	left:700px;
	}
.header-inner nav {
	padding-left: 0px;
}
.findme{
	float:right;
	padding:115px 16px 0px 20px;
	background:url(../images/findMe.png) no-repeat right top;
	}
.findme a{
	text-decoration:none;
	padding:3px 8px;
	margin:0px;
	}
.findme a img{
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
		
	-webkit-box-shadow: 0px 1px 5px 0px #646500;
	-moz-box-shadow: 0px 1px 5px 0px #646500;
	box-shadow: 0px 1px 5px 0px #646500;
	
	}
	
.findme a img:hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	}

.circle {
	position:absolute;
	float:left;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	/* for IE */
	behavior: url(border-radius.htc);
    border-radius: 100px;
	
	text-align: center; 
	width: 80px;
	height: 80px;
	padding:10px;
	color:#665e00;
	font-size:18px;
	
	-webkit-transition: -webkit-transform 1s,color 1s,background 1s;/* Safari and Chrome */
	-o-transition: -o-transform 1s,color 1s,background 1s;/* Opera */
	-moz-transition: -o-transform 1s,color 1s,background 1s;/* Firefox 4 */
	transition: transform 1s, color 1s,background 1s;
	border: solid 5px #990;
	}
.circle:hover{
	transform:rotate(360deg);
	-moz-transform:rotate(360deg); /* Firefox 4 */
	-webkit-transform:rotate(360deg); /* Safari and Chrome */
	-o-transform:rotate(360deg); /* Opera */
		
	background:#d3c200;
	font-size:18px;
	cursor:pointer;
	color:#FFF;
	
	-webkit-box-shadow: 0px 1px 5px 0px #646500;
	-moz-box-shadow: 0px 1px 5px 0px #646500;
	box-shadow: 0px 1px 5px 0px #646500;
	}
.circle p{
	margin-top:28px;
	}
.crc-color1{
	background:#c8ca42;
	}
.crc-color2{
	background:#c2c43b;
	margin-left:110px;
	}
.crc-color3{
	background:#bbbd35;
	margin-left:220px;
	}
.crc-color4{
	background:#b5b730;
	margin-left:330px;
	}
.crc-color5{
	background:#afb12c;
	margin-left:440px;
	}
.crc-color6{
	background:#afb12c;
	margin:110px 0px 0px 0px;
	}
.crc-color7{
	background:#b5b730;
	margin:110px 0px 0px 110px;
	}
.crc-color8{
	background:#bbbd35;
	margin:110px 0px 0px 220px;
	}
.crc-color9{
	background:#c2c43b;
	margin:110px 0px 0px 330px;
	}
.crc-color10{
	background:#c8ca42;
	margin:110px 0px 0px 440px;
	}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav-inner {
	list-style: none;
	margin:0px;
	padding:0px;
}
ul.nav-inner li {
	float:left;
	margin:0px 3px 0px 0px;
	text-align:center;
}
ul.nav-inner a, ul.nav-inner a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 12px 5px 70px 5px;
	display: block;
	text-decoration: none;
	color:#FFF;
	width:90px;
	text-align:center;
	font-size:17px;
	font-weight:bold;
}

ul.nav-inner li a{
	color: #FFF;
	opacity:0.9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
	transition:padding 1s;
	-moz-transition:padding 1s; /* Firefox 4 */
	-webkit-transition:padding 1s; /* Safari and Chrome */
	-o-transition:padding 1s; /* Opera */
	}
ul.nav-inner li a:hover{
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	padding: 12px 5px 20px 5px;
	}

/* Work */
#work{
	border-top:solid 80px #46006a;
	padding-top:50px;
	float: left;
	height:1400px;
	width:100%;
	color:#FFF;
	font-size:20px;
	background:#810097 url(../images/bg-work.jpg);
	}
	
#work .clum1 {
	float:left;
}
.exPading {
	padding:10px 0px 10px 0px;
}

.conLeftImg {
	background-position:left;
	padding:0px 20px 0px 0px;
	float:left;
}
.bgThum {
	background-image:url(../images/potfolioThumBG.png);
	background-repeat:no-repeat;
	background-position:center;
	padding:11px 10px 0px 2px;
	width:220px;
	height:200px;
	float:left;
	text-align:center;
}
.bgThum a img{
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.bgThum img:hover{
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
	}
.portThum {
	padding:20px 0px 0px 3px;
}
	

/* Contact */
#contact{
	border-top:solid 80px #374d01;
	padding-top:50px;
	float: left;
	height:1400px;
	width:100%;
	color:#FFF;
	font-size:20px;
	background:#5caa00 url(../images/bg-blog.jpg);
	}
#contact .container aside{
	width:400px;
	float:left;
	}
#contact .container #address{
	padding:50px 0px 0px 200px;
	}
#contact .container aside form label{
	display:block;
	}
#updatemsg{
	display:none;
	color:#d0d946;
	}
.findmeContact{
	background:url(../images/findMe.png) no-repeat left top ;
	float:right;
	}
.findmeContact span{
	padding:0px 0px 0px 37px;
	}

/* ~~ The footer ~~ */
.footer {
	padding:20px;
	background: #90b5d2;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	color:#FFF;
	text-align:right;
	line-height:22px;
}
.footer a{
	color:#FFF;
	}
.footerlogo{
	width:200px;
	float:left;
	text-align:left;
	}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Form style */
#contactForm{
	width:95%;
	}

#contactForm textarea, input[type=text], input[type=email], input[type=tel]{
	width: 310px;
	padding:7px;
	border: 3px solid #537503;
	background:#80ac05;
	font-size: 15px;
	color: #ecf19b;
	outline: none;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	/* for IE */
	behavior: url(border-radius.htc);
    border-radius: 5px;

}
::-webkit-input-placeholder {
    color:    #719802;
}
:-moz-placeholder {
    color:    #719802;
}
#contactForm textarea{
	width: 400px;
}

#contactForm input[type=submit] {
	display:block;
	background: #304400;
	border: 2px solid #537503;
	width: 100px;
	height:40px;
	color: #FFF;
	font-size: 15px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	/* for IE */
	behavior: url(border-radius.htc);
    border-radius: 5px;
}
#contactForm input[type=submit]:hover {
	cursor:pointer;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	}
.error{
	color:#FF0;
	}

::selection {
	background: none repeat scroll 0 0 #8BC235;
	color: white;
}

/* page loading */
.QOverlay {
	background-color: #4888a4;
	z-index: 9999;
}

.QLoader {
	background-color: #80b7cf;
	height: 1px;
}