/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* MAIN STYLES */

/* General */

body{ background:#EFF0EE; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#737373;}
#wrapper{ margin:25px auto 0px auto; width:960px;}
h1, h2, h3{font-family:Arial, Helvetica, sans-serif; color:#333333; font-weight:bold; letter-spacing:-2px;
text-shadow:2px 2px #d7d8d6;}
a { text-decoration:none; color:#737373;}
a:hover {color:#ea7054;}
.row{margin:0px 0px 7px 0px;}

/* Side Bar */
#sidebar{ position:absolute; left:0px; top:242px; z-index:10;
}
.pic_holder{ background:#FFF; border:1px solid #E0E0E0; border-left:none; width:85px; position:relative;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px; }
.pic_holder a { display:block;}
.pic_holder a span{
	cursor: pointer;
	background:url(../img/full-size-icon.png) no-repeat center center #000;
	display:none;
	position:absolute;
	top:5px; left:1px;
	width: 78px;
    height: 77px;}
.profile_pic{border:1px solid #E0E0E0; margin:5px 5px 5px 0px;}
.social_list { margin:15px 0px 0px 0px; }
.social_list li{ height:32px;}
.social_list a span{ display:block; padding:0px 15px 0px 40px; height:32px; }
.social_list a { color:#FFF; text-decoration:none; height:32px; display:inline-block; min-width:32px; line-height:32px; cursor: pointer; 
-webkit-box-shadow: 2px 2px 0px 0px #bfc0be;
-moz-box-shadow: 2px 2px 0px 0px #bfc0be;
box-shadow: 2px 2px 0px 0px #bfc0be; }
.facebook a:hover{background:url(../img/facebook-icon.png) no-repeat 0 -32px #6b87d6;   }
.facebook a{background:url(../img/facebook-icon.png) no-repeat 0 0  #333333;}
.twitter a:hover{background:url(../img/twitter-icon.png) no-repeat 0 -32px #A3D4DE;   }
.twitter a{background:url(../img/twitter-icon.png) no-repeat 0 0  #333333; }
.flickr a:hover{background:url(../img/flickr-icon.png) no-repeat 0 -32px #FFFFFF; color:#ADB0B0;   }
.flickr a{background:url(../img/flickr-icon.png) no-repeat 0 0  #333333; }
.deviantart a:hover{background:url(../img/deviantart-icon.png) no-repeat 0 -32px #6B873D;   }
.deviantart a{background:url(../img/deviantart-icon.png) no-repeat 0 0  #333333; }
.download a:hover{background:url(../img/download-icon.png) no-repeat 0 -32px #3FFF91; color:#333333;   }
.download a{background:url(../img/download-icon.png) no-repeat 0 0  #333333; }

/* Name Box */
.name_box{height:275px; width:275px; background:none; padding:20px; float:left; margin:0px 7px 0px 0px;}
.logo{ float:left; margin:5px 8px 0px 0px;}
h1.name{ font-size:54px; border-bottom:1px dotted #d7d8d6; padding-bottom:5px; margin-bottom:10px;}
h2.title { color:#999999; font-size:24px; font-weight:normal; text-shadow:none; letter-spacing: normal;}

/* Note Box */
.note_box{ position:relative;  width:275px; background:url(../img/corner-dot.png) no-repeat 97% 2% #FFF; padding:20px; float:left; margin:0px 7px 10px 0px;
/*-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
-webkit-box-shadow: 2px 2px 0px 0px #d7d8d6;
-moz-box-shadow: 2px 2px 0px 0px #d7d8d6;
box-shadow: 1px 1px 0px 0px #ddd; */
border-bottom: 1px solid #ddd !important;    
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}
.note_box h2{ font-size:36px; margin:0px 0px 15px 45px; border-bottom:1px dotted #d7d8d6; padding-bottom:5px;}
.hover h2{ color:#ea7054; text-shadow:none;}
.bis{ padding-top:48px;}
#wrapper .last{ margin-right:0px;}


/* Icons Box */
.icon{ display:block; width:25px; height:26px; position:absolute; top:25px; left:23px; background-position:0px 0px; }
.hover .icon{ background-position:0px -26px; }
.personal_details_icon{background:url(../img/personaldetails-icon.png) no-repeat; }
.personal_contact_icon{background:url(../img/getintouch-icon.png) no-repeat; }
.education_details_icon{background:url(../img/education-icon.png) no-repeat; }
.employment_details_icon{background:url(../img/employment-icon.png) no-repeat; }
.skills_icon{background:url(../img/skills-icon.png) no-repeat; }
.contact_icon{background:url(../img/contact-icon.png) no-repeat; }
.portfolio_icon{background:url(../img/portfolio-icon.png) no-repeat; }

/* Personal Details */
.personal_list{ margin-left:45px;}
.personal_list span{ color:#000; font-weight:bold; width:90px; float:left; padding-right:10px;}
.personal_list li{ margin-bottom:10px; display:inline-block; line-height:18px; word-wrap: break-word;}
.personal_list li p{ float:right; width:130px; }

/* Contact Details */
.contact_list{ margin-left:5px; }
.contact_list span{ color:#000; font-weight:bold; width:70px; float:left; padding-right:10px;}
.contact_list li{ margin-bottom:10px; display:inline-block; line-height:18px; padding-left:25px; /*word-wrap: break-word;*/}
.contact_list li p{ float:right; width:130px; }
.phone_list{ background: url(../img/phone-icon.png) no-repeat left top;}
.email_list{  background: url(../img/mail-icon-2.png) no-repeat left top;}
.website_list{  background: url(../img/web-icon.png) no-repeat left top;}
.facebook_list{  background: url(../img/facebook-icon-2.png) no-repeat left top;}

/* History Details */
.history_list span{ color:#000; font-weight:bold; display:block;}
.history_list li{ margin-bottom:10px; line-height:18px;}

/* Skills Details */
.skills_list{ margin-left:45px;}
.skills_list span{ color:#555554; width:108px; display:inline-block; padding-right:10px; float:left;}
.skills_list li{ margin-bottom:10px; display:inline-block; }
.bar_level{ margin:0px 0px 15px 153px;}
.separator{ margin-left:45px; border-bottom:1px dotted #d7d8d6; display:block; height:1px; width:230px; margin-bottom:10px; }

/* Bar Rating */

.bar-rating{ 		background: url(../img/bar-rating.png) top left repeat-x;}
.bar-rating li.current-rating{ background: url(../img/bar-rating.png) left bottom; }

	 .bar-rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 111px;
		height: 10px;
		position: relative;
		display:inline-block;
	}
	
		.bar-rating li.current-rating{
		position: absolute;
		height: 10px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
	}
	
	.bar-rating li{
		padding:0px;
		margin:0px;
	}
	.bar-rating li.bar-half{width:8px;}
	.bar-rating li.one-bar{width:16px;}
	.bar-rating li.one-bar-half{width:24px;}
	.bar-rating li.two-bars{width: 32px;}
	.bar-rating li.two-bars-half{width: 40px;}
	.bar-rating li.three-bars{width: 48px;}
	.bar-rating li.three-bars-half{width: 56px;}
	.bar-rating li.four-bars{width: 64px;}
	.bar-rating li.four-bars-half{width: 72px;}
	.bar-rating li.five-bars{width: 80px;}
	.bar-rating li.five-bars-half{width: 88px;}
	.bar-rating li.six-bars{width: 96px;}
	.bar-rating li.six-bars-half{width: 104px;}
	.bar-rating li.seven-bars{width: 111px;}

/* Portfolio */
.portfolio_items li{ float:left; width:78px; float:left; margin:0px 20px 20px 0px; position:relative; }
.portfolio_items li.last{ margin-right:0px; }
.portfolio_items li a{
	display:block;
	width: 78px;
    height: 77px;
   }
.thumb_portfolio{ 
-webkit-box-shadow: 2px 2px 0px 0px #bfc0be;
-moz-box-shadow: 2px 2px 0px 0px #bfc0be;
box-shadow: 2px 2px 0px 0px #bfc0be;
}
.portfolio_items li a span{
	cursor: pointer;
	background:url(../img/full-size-icon.png) no-repeat center center #000;
	display:none;
	position:absolute;
	top:0; left:0;
	width: 78px;
    height: 77px;}
	
/* Email Form */
.contact_box{ background:none; 
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; 
}
#formwrapper { margin-left:45px; }
#formwrapper p{ margin:10px 0px;}
#formwrapper input.inputfield, #formwrapper textarea { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:1px solid #DBD9DB; color:#737373; padding:5px 7px; width:216px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
}
 #formwrapper textarea{ height:85px;}
#formwrapper input.submit{ background: url(../img/arrow.png) no-repeat 85% 50% #333333; color:#EFF0EE; padding:7px 35px 7px 15px; border:none; cursor:pointer; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
-webkit-box-shadow: 2px 2px 0px 0px #bfc0be;
-moz-box-shadow: 2px 2px 0px 0px #bfc0be;
box-shadow: 2px 2px 0px 0px #bfc0be; 
}
#formwrapper input.submit:hover{ background: url(../img/arrow-hover.png) no-repeat 85% 50% #ea7054; color:#333333; }
#message p{ margin:0px 0px 5px 0px; color:#F00;}

/* Footer */
#footer{ margin:15px 0px 25px 0px;}
.footer_title{ font-size:12px; letter-spacing:normal; }
.footer_title span{ text-shadow:none; letter-spacing:normal; font-weight:normal; color:#999999; padding-left:20px; }
.logo_footer{ float:left; margin:0px 8px 0px 0px;}

/* Extra styling */
.articleshadow1 {
    bottom: -5px;
    height: 4px;
    left: 4px !important;
    right: 4px !important;
    z-index: -1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}
.articleshadow2 {
    bottom: -9px;
    height: 4px;
    left: 8px !important;
    right: 8px !important;
    z-index: -2;
}
.articleshadow1, .articleshadow2 {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #ddd;
    content: "";
    display: block;
    left: 0;
    padding: 0 !important;
    position: absolute;  
}