*{
	/* Universal reset: */
	margin:0;
	padding:0;
}

html {
	/* Universal reset: */
	margin:0;
	padding:0;
}

header,footer,
article,section,
hgroup,nav,
figure{
	/* Giving a display value to the HTML5 rendered elements: */
	display:block;
}

header {
	width:960px;
	margin:0 auto;
	padding:0 23px;
	height:149px;
	position:relative;
	background:url(img/png-design/brushe-header.png) no-repeat center top;
	}

body{
	/* Setting the default text color, size, page background and a font stack: */
	font-size:0.825em;
	color:#fcfcfc;
	background:#040409 url(img/jpg-design/bg.jpg);
	background-attachment:fixed;
	font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}

/* Hyperlink Styles: */

a {
	color:#5b9dbc;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:none;
}

a img{
	border:none;
}

/* Headings: */

h1,h2,h3{
	font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
	text-shadow:0px 1px 3px grey;
}

h1{
	/* The logo text */
	font-size:3.2em;
	padding:0.5em 0 0;
	text-transform:none;
	font-weight:100;
}

h1.intro {
	width:960px;
	height:300px;
	margin-top:20px;
	clear:both;
	font:130px "Cooper Black";
	line-height:70px;
	letter-spacing:-5px;
	/*opacity:0.8;
	filter: alpha(opacity=20);
	-moz-opacity:0.2;*/
}

h3{
	/* The slogan text */
	font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
	font-size:2em;
	font-weight:normal;
	margin:0 0 1em;
}


h2{
	font-size:2.2em;
	font-weight:normal;
	letter-spacing:0.01em;
}

p{
	line-height:1.5em;
	padding-bottom:1em;
}

.line{
	/* The dividing line: */
	height:1px;
	background-color:#fff;
	border-bottom:1px solid #88856b;
	margin:1em 0;
	overflow:hidden;
}

article .line{
	/* The dividing line inside of the article is darker: */
	background: url(img/bg-section.png);
	border:none;
	margin:1.3em 0;
}

footer .line{
	margin:2em 0;
}

nav{
	/*background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;*/
	padding:0 5px;
	position:absolute;
	right:0;
	top:1em;
	
	border:1px none #FCFCFC;

	/*-moz-box-shadow:0 1px 1px #333333;
	-webkit-box-shadow:0 1px 1px #333333;
	box-shadow:0 1px 1px #333333;*/
}

/* The clearfix hack to clear the floats: */

.clear:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* The navigation styling: */

nav ul li {
	display:inline;
}

nav ul li a,
nav ul li a:visited {
	color:#aea86f;
	display:block;
	float:left;
	font:21px "Georgia";
	font-style:italic;
	font-weight:100;
	margin:5px 2px;
	padding:7px 10px 4px;
}

nav ul li a:hover, nav ul li .current_page {
	text-decoration:none;
	background-color:transparent;
	background: url(img/png-design/bg-20.png);
}

a.twittertop {
	display:block;
	clear:both;
	position:relative;
	text-align:right;
}

nav, article, nav ul li a,figure {
	/* Applying CSS3 rounded corners: */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

#navigationbar {
/*-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;*/
background-color:transparent;
background-image:url("img/png-design/bg-header.png");
background-position:bottom left;
height:149px;
margin:0;
top:0;
padding:0;
position:fixed;
width:100%;
z-index:100;
}

a.logo {
	margin-top:25px;
	float:left;
	width:246px;
	height:100px;
	background:transparent url(img/png-design/logo-blogartz.png) no-repeat 0 0;
}

a.logo:hover {
	background:transparent url(img/png-design/logo-blogartz.png) no-repeat 0 -100px;
}

/*#navigationbar hgroup {
	width:960px;
	margin:0 auto;
	padding:0;
	position:relative;
	
	background:#333;

}*/



#nav {
height:40px;
overflow-x:hidden;
overflow-y:hidden;
}

/* Article styles: */
#separator {
	min-height:3px;
	height:3px;
	display:block;
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	background:transparent url(img/png-design/separator.png) repeat-x left bottom;	
	overflow:hidden;
}
#page{
	width:960px; 
	top:100px;
	margin:0 auto;
	padding:0;
	position:relative;
}

#headline, #portfolio, #about, #hire{
	width:100%; 
	margin:0 auto;
	padding:0 0 15px;
	/*position:relative;*/
}

#portfolio {
	background: url(img/jpg-design/bg-blur45.jpg);
}

#about {
	background: url(img/jpg-design/bg-blur55.jpg);
}

#hire {
	background: url(img/jpg-design/bg-blurbwn.jpg);
}

#headline {
	background:url(img/jpg-design/bg.jpg);
	margin-top:149px;
}

#grf, #thanks {
	width:960px;
	height:391px;
	margin-top:20px;
	clear:both;
	background:transparent url(img/png-design/grf-hi-design.png) no-repeat left top;
}

#thanks {
	height:283px;
	background:transparent url(img/png-design/grf-thank-design.png) no-repeat left top;
}

article{
	width:960px; 
	/*top:100px;*/
	margin:0 auto;
	padding:0;
	position:relative;
	
	text-shadow:0 1px 0 black;
}
#article2, #article3, #article4 {
	padding-top:200px;
}
#article2 {
	background:url(img/png-design/h1-portfolio.png) no-repeat left 15px;
	padding-top:170px;
}
#article3 {
	background:url(img/png-design/h1-about.png) no-repeat left 15px;
	color:#707070;
}
#article3 .col {
	width:300px;
	float:left;	
}
#article3 .col.lft { padding-right:20px; background:transparent url(img/png-design/vert-separator.png) right top repeat-y;}
#article3 .col.ctr { padding:0 20px; width:280px; background:transparent url(img/png-design/vert-separator.png) right top repeat-y;}
#article3 .col.rgt { padding-left:20px; width:300px;}
#article3 .col.lft img {
	/*border: 5px solid #fff;*/
	background: url(img/png-design/bg-20.png);
	padding:3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float:right;
	margin:0 0 5px 5px;
	/*-webkit-box-shadow: 0px 0px 5px #ac987e;
	-moz-box-shadow: 0px 0px 5px #ac987e;
	box-shadow: 0px 0px 5px #ac987e;*/
}
#article3 .col h2 {
	margin-bottom:10px;
}
#article3 .col h2.myblog {
	background:transparent url(img/png-design/h2-my-design-blog.png) no-repeat left center;
	padding:10px auto;
	text-indent:-10000px;
}
#article3 .col h2.blogartz {
	background:transparent url(img/png-design/h2-blogartz-twitter.png) no-repeat left center;
	padding:10px auto;
	text-indent:-10000px;
}
#article3 .col h2.follow {
	background:transparent url(img/png-design/h2-followme.png) no-repeat left center;
	padding:10px auto;
	text-indent:-10000px;
}
#article3 .col h2.download {
	background:transparent url(img/png-design/h2-downloadme.png) no-repeat left center;
	padding:10px auto;
	text-indent:-10000px;
}
#article3 ul.blog {
	margin:0px 0 10px 10px;
}
#article3 ul.blog li {
	background:transparent url(img/png-design/li-gold.png) no-repeat left 2px;
	display: block;
	padding-left:12px;
}
#article3 ul.social {
	margin:0px 0 10px 0px;
}
#article3 ul.social li {
	display: inline;
	float:left;
	background:none;
}
#article3 ul.social li img {
	background:none;
	padding:2px;
	margin:0 0 3px 5px;
}
#article4 {
	background:url(img/png-design/h1-hire.png) no-repeat left 15px;
}
#article4 .col.lft {
	float:left;
	padding-right:20px;
	color:#324e5a;
	font-size:14px;
}
#article4 .col.lft span {
	color:#171717;
}
#article4 .col.lft a, #article4 .col.lft strong {
	color:#aea86f;
	font-weight:100;
}
#article4 .col h2.contact {
	background:transparent url(img/png-design/h2-contactme.png) no-repeat left center;
	padding:10px auto;
	text-indent:-10000px;
	margin-bottom:10px;
}
#article4 .col.rgt {
	float:left;
	width:auto;
	padding-left:20px;
	background:transparent url(img/png-design/vert-separator.png) left top repeat-y;
}
#article4 .col form div {
	float:left;
	margin-right:20px;
}
#article4 .col form label {
	padding:0px auto;
	height:20px;
	text-indent:-10000px;
	margin-bottom:1px;
	display:block;
}
#article4 .col form label.subject {
	background:transparent url(img/png-design/label-yoursubject.png) no-repeat left center;
	height:34px;
}
#article4 .col form label.name {
	background:transparent url(img/png-design/label-yourname.png) no-repeat left center;
	height:28px;
}
#article4 .col form label.email {
	background:transparent url(img/png-design/label-youremail.png) no-repeat left center;
	height:34px;
}
#article4 .col form label.phone {
	background:transparent url(img/png-design/label-yourphone.png) no-repeat left center;
	height:34px;
}
#article4 .col form label.project {
	background:transparent url(img/png-design/label-yourproject.png) no-repeat left center;
	height:34px;
}
#article4 .col form input, #article4 .col form textarea{
	display: block;
	width:290px;
	border:0;
	color:#aea86f;
	margin: 4px 0 8px;
	padding: 10px 8px;
    font-size: 26px;
    text-shadow: 0px 1px #343c49;
    text-align: center;
    font:21px "Georgia", Times New Roman, Times, serif;
	font-style: italic;
	font-weight:100;
	background:url(img/png-design/bg-20.png) repeat;
  	-moz-border-radius: 10px; /* FF1+ */
  	-webkit-border-radius: 10px; /* Saf3+, Chrome */
    border-radius: 10px; /* Opera 10.5, IE 9 */	
	}
#article4 .col form textarea{
	height:236px;
	width:100%;
	font-size:14px;
	text-align:left;
}
#article4 .col form input.send {	
	width:304px;
}
#article4 .col form input.spm {
	color:#999;
}
#article4 .col form input.send:hover {
	background:url(img/png-design/bg-50.png) repeat;
	cursor:pointer;
}
figure{
	border:3px solid #142830;
	float:right;
	height:300px;
	margin-left:15px;
	overflow:hidden;
	width:500px;
}

figure:hover{
	-moz-box-shadow:0 0 2px #4D7788;
	-webkit-box-shadow:0 0 2px #4D7788;
	box-shadow:0 0 2px #4D7788;
}

figure img{
	margin-left:-60px;
}

#arrowsnav{
	float:right;
	width:73px;
	position:absolute;
	top:15px;
	right:0;
}

a.up-arrrow{
	float:left;
	height:34px;
	width:32px;
	background:transparent url(img/png-design/btn-arrows.png) no-repeat -33px 0;
	text-indent:-10000px;
}
a:hover.up-arrrow{background:transparent url(img/png-design/btn-arrows.png) no-repeat -33px -69px;}

a.down-arrrow{
	float:left;
	height:34px;
	width:32px;
	background:transparent url(img/png-design/btn-arrows.png) no-repeat 0px 0;
	text-indent:-10000px;
	margin-right:3px;
}
a:hover.down-arrrow{background:transparent url(img/png-design/btn-arrows.png) no-repeat 0px -34px;}
/* Footer styling: */

footer{
	padding-bottom:1330px;
	padding-top:15px;
	text-align:center;
	font-size:0.825em;
	position:relative;
	clear:both;	
	background: url(img/jpg-design/bg-blur65.jpg);
	color:#373c4c;
}

footer img{
	margin-bottom:5px;
	position:relative;
	clear:right;
}

footer p{
	margin-bottom:-2.5em;
	position:relative;
}

footer a,footer a:visited{
	color:#aea86f;
	padding-left:15px; background:transparent url(img/png-design/vert-separator.png) left top repeat-y;
	margin-left:15px;
}

footer a:hover{
	text-decoration:none;
	color:#eaeaea;
}

footer a.by{
	float:left;

}

footer a.up{
	float:right;
	height:63px;
	width:85px;
	background:transparent url(img/png-design/btn-fly-up.png) no-repeat 0 0;
	text-indent:-10000px;
	margin-left:-85px;
}
footer a:hover.up{background:transparent url(img/png-design/btn-fly-up.png) no-repeat 0 -66px;}

/********** services **********/	
	
	
.servicesbox {
	width:960px;
	margin: auto;
	margin-top:20px;
	/*padding: 17px 20px 12px 20px;*/
	background:url(img/png-design/bg-20.png) repeat;
 	-moz-border-radius: 10px; /* FF1+ */
 	-webkit-border-radius: 10px; /* Saf3+, Chrome */
    border-radius: 10px; /* Opera 10.5, IE 9 */	
	}
.servicesbox ul{
	width: 960px;
	list-style: none;
	margin: auto;
	text-align: left;
	background: url(img/png-design/arw-services.png) no-repeat left center;
	padding: 17px 20px 15px 0px;
 	-moz-border-radius: 10px; /* FF1+ */
 	-webkit-border-radius: 10px; /* Saf3+, Chrome */
    border-radius: 10px; /* Opera 10.5, IE 9 */	
	}
.servicesbox ul li{
	display: inline;
	padding:4px 0px 8px 26px;
	color: #677a85;
	font-size: 14px;
	margin:0px 40px 0 0;
	}
.servicesbox ul li.webdesign{
	background: url(img/png-design/icon-web-design.png) no-repeat 0px 0px;
}
.servicesbox ul li.webdev{
	background: url(img/png-design/icon-web-development.png) no-repeat 0px 0px;
}
.servicesbox ul li.uidesign{
	background: url(img/png-design/icon-ui-design.png) no-repeat 0px 0px;
}
.servicesbox ul li.graphicdesign{
	background: url(img/png-design/icon-graphic-design.png) no-repeat 0px 0px;
}
.servicesbox ul li.branding{
	background: url(img/png-design/icon-branding.png) no-repeat 0px 0px;
}
.servicesbox ul li.services{
	padding:4px 50px 8px 20px;
	color:#324e5a;
	font:21px "Georgia", Times New Roman, Times, serif;
	font-style: italic;
	font-weight:100;
	background:none;
}

/******** menu portfolio *************/
.navportfolio {
	margin-left:50px;
}

ul.menu {
	margin-left: .5em;
	margin-bottom: 1em;
}

ul.menu li {
	list-style-type: none;
	display: inline-block;
	padding: 5px 10px;
	
	text-decoration:none;
	background-color:transparent;
	background: url(img/png-design/bg-20.png);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
}

ul.menu li  {
	color:#aea86f;
	font:12px "Georgia";
	font-style:italic;
	font-weight:100;
}

ul.menu li a:hover {
	text-decoration:none;
	cursor:pointer;
	color:#CCC;
}
	
	.selected {
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	background: url(img/png-design/bg-50.png);
	color: #fff;
	}
	
	.selected a, .selected a:visited {
		color: #fff;
	}
ul.item li {
	list-style-type: none;
	display: block;
	float: left;
	margin: .4em;
}
	
	ul.item li img {
		border: 5px solid #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px #ac987e;
		-moz-box-shadow: 0px 0px 5px #ac987e;
		box-shadow: 0px 0px 5px #ac987e;
	}

a.btnbox960, a.btnbox300{
	display: block;
	width:960px;
	color:#aea86f;
	margin: auto;
	margin-top: 10px;
	padding: 15px 0px;
    font-size: 26px;
    text-shadow: 0px 1px #343c49;
    text-align: center;
    font:21px "Georgia", Times New Roman, Times, serif;
	font-style: italic;
	font-weight:100;
	background:url(img/png-design/bg-10.png) repeat;
  	-moz-border-radius: 10px; /* FF1+ */
  	-webkit-border-radius: 10px; /* Saf3+, Chrome */
    border-radius: 10px; /* Opera 10.5, IE 9 */	
	}
a.btnbox960 span, a.btnbox300 span{
	font-size: 36px;
	color:#5b9dbc;
	}
a.btnbox960:hover, a.btnbox300:hover{
	background:url(img/png-design/bg-20.png) repeat;
	color: #aea86f;
    text-shadow: 0px -1px #000;
    text-decoration: none;
	}
a.btnbox960:hover span, a.btnbox300:hover span{
	color: #eaeaea;
	}
a.btnbox300 {width:280px; font-size:17px; margin:0;}
a.btnbox300 span{font-size: 17px;}
/***************
tooltip **********/
/* override the arrow image of the tooltip */
.tooltip {
	background:url(img/png-design/black_arrow.png);
	padding:15px;
	height:92px;
	width:179px;
}

.tooltip {
	background:url(img/png-design/black_arrow.png);
}