/*this is to reset css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
/*end css reset*/

body{
	background-color: #FFF;
	background-image: url(../images/bg_grid.gif);
	margin: 0 auto;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	font-size:12px;
	color: #000;
	}


#wrapper{
	width: 960px;
	background-color: #FFF;
	margin: 0 auto;
	margin-top: 20px;
	text-align: left;
	min-height: 640px;
}
	
#header{
	width: 960px;
	height: 105px;
	background-color: #FFF;
	position: relative;
}

#header h1 {
	background: url('../images/links/pica_home.jpg') no-repeat scroll top left;
	width: 300px;
	height: 100px;
	margin-left: 10px;
	position: absolute;
	text-indent: -9999px; 
}

h2{
  	font-weight: bold; 
  	padding-top: 10px;
	padding-bottom: 5px;
  	font-size: 14px;
  	color: #323232;	
  }

	
#nav{
	background-color: #FFF;
	background-repeat:repeat-x;
	height: 60px; 
	margin: 10px 10px 0 10px;
	float: right;
	width: 620px;
	}	
	
	
#middle{
	width: 920px;
	background-color: #999;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 210px;
	background: url('../images/apps_banner.jpg') no-repeat;
	
}


#footer{
	clear: both;
	width:  960px;
	height: 30px;
	margin: 0 auto;	
}


.copyright{
	clear: both;
	text-align: left;
	line-height: 1.5px;
	margin: 0 auto;
    font-size: 0.7em;
	padding: 1.7em 10px;
	color: #525252;
	width: 300px;
	float: left;
}

#foot_links #designerd_link a{
	width: 620px;
	height: 20px;
	background-image:url(../images/links/about.jpg);
	float: right;
	margin-right: 10px;	
	list-style: none;	
}


#foot_links a {
	height: 20px;
	background-position: 0 -20px;
	display: block;
	text-indent: -9999px;
	outline: none; 
	border: none;
	list-style: none;
}

#foot_links ul{
	list-style: none;
	padding-top: 5px;
}

#foot_links a:hover {
	background-position: 0 0;
	}

#foot_links #back a{
		width: 620px;
		height: 20px;
		background-image:url(../images/links/back.jpg);
		float: right;
		margin-right: 10px;	
		list-style: none;	
}


#nav ul {
	margin: 0;
	padding: 0;
	list-style:none;
}


#nav li {
	margin: 0;
	padding: 0;
	float: left;	
}

#nav a {
	height: 20px;
	background-position: 0 -20px;
	display: block;
	text-indent: -9999px;
	outline: none; 
	border: none;
}

#nav a:hover {
	background-position: 0 0;
	}

#nav #nav_about a{
	width: 620px;
	background-image:url(../images/links/about.jpg);
}
	
	
.just_added{
	width: 500px;
	font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
	color:#333; 
	margin-bottom:18px;
	padding-left: 10px;
	line-height: 1.6em;
	}

.just_added a:link{
	color: #0099ff;
	text-decoration: none;
}

.just_added a:hover{
	color: #ffcc00;
	text-decoration: none;
}

.just_added a:visited{
	color: #000;
	text-decoration: none;
}
	
#content .post {padding:10px;}


#content{
	float: left;
	width: 580px;	
}

#image{
	float: right;
	margin: 20px 20px;
	width: 300px;	
}


#tabs{
	position: relative;
	width: 920px;
	padding-top: 10px;
	padding-bottom: 10px;
	height: 15px;
}

.about_content{
	width: 430px;
	color:#e4e4e4; 
	padding-top: 225px;
	padding-left: 30px;
	line-height: 1.6em;
	letter-spacing: .5px;
	}
	
#leftCol{
	float: left;
	padding-left: 10px;
	width: 310px;
	margin-right: 5px;
	height: 472px;
	background-image: url('../images/bg_dots4.jpg');	
}

#aboutCol{
	float: right;
	width: 620px;
	height: 472px;
	margin-right: 10px;
	background-color: #414141;
}


#mainGrid{
	float: right;
	width: 620px;
	height: 472px;
	padding: 0;
	margin-right: 10px;
}


#mainProject{
	float: right;
	width: 580px;
	height: 472px;
	padding: 0;
	margin-right: 10px;
}


#right_sidebar{
	float: right;
	width: 40px;
	height: 472px;
	padding: 0;
}


.intro_content {
	padding: 0 20px 10px 0;
	line-height: 1.7em;
	color: #525252;	
}


.intro_content a{
	text-decoration: none;
	color: #0099CC;
}

.intro_content a:hover{
	color: #858585;
}


.about_content span{
	font-weight: bold;
	color: #00ccff;
	font-size: 14px;
}

.avatar{
	width: 125px;
	height: 125px;
	direction: rtl;
	margin: 10px 0 0 175px;
}

.resume{
	color: #FFF;
	padding-top: 15px;
	padding-left: 221px;
}

.resume a:hover{
	color: #FFF;
}

.contact_content{
	padding: 30px 10px 0 0;
	text-align: right;
	font-size: 11px;
	line-height: 1.0em;
	color: #525252;
}

.contact_content span{
	font-weight: bold;
	font-size: 13px;
	line-height: 1.3em;
}

.contact_info{
	text-align: right;
	padding-right: 10px;
	list-style: none;
}

.design_services{
	padding: 40px 10px 0 5px;
	text-align: right;
	font-size: 11px;
	line-height: 1.6em;
	color: #525252;
}

.design_services span{
	font-weight: bold;
	font-size: 13px;
	line-height: 1.3em;
}

.services{
	list-style-type: none;
	text-align: right;
	padding-right: 10px;
	font-size: 11px;
	line-height: 1.6em;
	color: #525252;
}

/*FOLIO SECTION*/

.projectInfo a{
	text-decoration: none;
	color: #0099CC;
}

#navBar {
	width: 30px;
	height: 59px;
	margin-right: 10px;
	border: none;
	margin: 0;
	padding: 0;
}


#navBar ul{
	width: 30px;
	padding: 0;
	margin: 0;
	list-style: none;
}

#navBar li{
	margin: 0;
	padding: 0;
	float: right;
}


#navBar a{
	width: 30px; height: 59px;
	display: block;
	outline: none;border:none;
	text-decoration: none;
	color: #000;
	text-indent: -9999px;
	background-position: 0 0;
}

#navBar #one_inch a {
	background-image: url('../images/ruler/1inch.jpg');
	width: 30px; height: 59px;
}

#navBar #two_inch a {
	width: 30px; height: 59px;
	background-image:url('../images/ruler/2inch.jpg');
}

#navBar #three_inch a{
	width: 30px;
	background-image:url('../images/ruler/3inch.jpg');
}

#navBar #four_inch a{
	width: 30px;
	background-image:url('../images/ruler/4inch.jpg');
}

#navBar #five_inch a{
	width: 30px;
	background-image:url('../images/ruler/5inch.jpg');
}

#navBar #six_inch a{
	width: 30px;
	background-image:url('../images/ruler/6inch.jpg');
}

#navBar #seven_inch a{
	background-image: url('../images/ruler/7inch.jpg');
}

#navBar #eight_inch a{
	background-image: url('../images/ruler/8inch.jpg');
}

#navBar a:hover, #navBar li.active a {
	background-position: -30px 0;
}