/* ========= CSS Reset ========== */

body, h1, h2, h3, h4, h5, h6, a, p, ul, ol, li, em, strong, pre, code, form {
 padding: 0;
 margin: 0;
}


/* ========= General Styles ========== */

body {
	color: white;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;	
	background: black;
	
}	

#wrapper
{width: 960px;
margin: 0 auto;
z-index: 999;
background:  url(../images/border.png) repeat-y center 5px;}

h1, h2
{text-transform: uppercase;}

a:link, a:visited
{color: #d2d2d2;}

a:hover
{color: #b0b0b0;}


/* ========= Header Styles ========== */



#header
{width: 960px;
height: 140px;
margin: 0 auto;
overflow: hidden;
background: url(../images/border-bottom.png) repeat-x 5px bottom;}

#header div
{float: left;
padding: 0 90px;
}

#name h1.author_name
{font-size: 60px;
margin: 36px 0 -6px 0;
}


#name h2.occupation
{font-size: 24px;
margin: 0;
}

#menu ul
{list-style: none;
font-size: 12px;
margin: 32px 0 0 40px;}

#menu ul li a
{margin: 0 0 7px 0;}

#menu ul a
{padding: 2px 0 0 30px;
display: block;
text-decoration: none;
height: 20px;
color: #cdcdcd;}

#menu ul a.print_menu_link
{background: url(../images/printer.png) no-repeat top left;
}

#menu ul a.download_menu_link
{background: url(../images/download.png) no-repeat left 3px;
}

#menu ul a.contact_menu_link
{background: url(../images/contact.png) no-repeat top left;
padding: 0 0 0 30px;}
/* Header Styles end here */


/* ========= Container styles ========== */

.container
{clear: left;
overflow: hidden;
display: block;
padding: 0 0 42px;
background: url(../images/border-bottom.png) repeat-x 5px bottom;
}

.container div, #about_container div 
{float: left;
margin: 0 90px;
width: 300px;
}

.container h2, #about_container h2
{font-size: 40px;
line-height: 20px;
margin: 49px 0 30px 0;
}

.container h3, #about_container h3
{font-size: 24px;
margin: 0 0 5px 0;
color: #d2d2d2;}
/* Container Styles end here */


/* ========= About styles ========== */

#about_container
{clear: left;
overflow: hidden;
display: block;
padding: 0 0 37px;
background: url(../images/border-bottom.png) repeat-x 5px bottom;
}

#about, #photos
{padding: 0 0 20px;}

#about .subsection
{float: left;}

#about .subsection ul
{list-style: none;}

#about .subsection ul li
{margin: 0 0 4px 0;}

#about #metadata
{width: 195px;
margin: 31px 0 0 0;
}

#about #social
{width: 85px;
margin:  31px 0 0 20px;
width: 55px;}

#about #social ul li 
{margin: 4px 10px 4px 0;
float: left;
height: 16px;}

#about #social ul li a img
{border: none;
}
/* About styles end here */


/* ========= Experience / Education / Awards styles ========== */

.container .subsection
{margin: 0 0 30px 0;
position: relative;}

span.emphasize
{
font-weight: bold;
}

span.date
{font-size: 16px;
position: absolute;
top: -10px;
right: 0px;
color: #8a8a8a;}

/* ------ date positions ------- */
span.some_web
{right: -3px;}

span.another_web
{right: -18px;}

span.university
{right: -37px;}

span.school
{right: 63px;}

span.award1
{right: 95px;}


span.award2
{right: 158px;}


/* Experience / Education / Awards styles end here */





/* ========= Skills styles ========== */
#skills h3
{margin: 0 0 5px 0;}

#skills .subsection
{margin: 0 0 -20px;}

#skills .subsection ul
{list-style: none;
	margin: 0 0 30px 0;
}

#skills .subsection ul li
{clear: left;
padding: 5px 0 25px 0;
}

#skills .subsection ul li p
{margin: 0;
float: left;
font-style: italic;}

#skills .subsection ul li p.skill
{text-align: right;
width: 100px;
font-style: normal;}

.one_star
{padding: 0 20px 0 90px;
background: url(../images/stars/1.png) no-repeat top left;
text-indent: -9999px;}

.two_star
{padding: 0 20px 0 90px;
background: url(../images/stars/2.png) no-repeat top left;
text-indent: -9999px;}

.three_star
{padding: 0 20px 0 90px;
background: url(../images/stars/3.png) no-repeat top left;
text-indent: -9999px;}

.four_star
{padding: 0 20px 0 90px;
background: url(../images/stars/4.png) no-repeat top left;
text-indent: -9999px;}


.five_star
{padding: 0 20px 0 90px;
background: url(../images/stars/5.png) no-repeat top left;
text-indent: -9999px;}

/* Skills styles end here  */

/* ========= Portfolio styles ========== */
#portfolio
{background: black url(../images/border-bottom.png) repeat-x 5px bottom;
padding: 0px 90px 40px 90px;
width: 780px;
overflow: hidden;
margin: 0 0 0 0;}

#portfolio h2
{margin: 49px 0 30px 0;}

#portfolio ul
{list-style: none;
margin: 0 0 0 -20px;	
}

#portfolio li
{display: inline;
float: left;
width: 140px;
height: 140px;
margin: 0 0 20px 20px;
position: relative;
z-index: 10;}

#portfolio a img
{border: none;
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;}

#portfolio a span
{display: none;
width: 140px;
height: 140px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
cursor: pointer;}

#portfolio a span.image_hover
{background: url(../images/thumb_hover_image.png) no-repeat top left;}

#portfolio a span.video_hover
{background: url(../images/thumb_hover_video.png) no-repeat top left;}

#portfolio a span.link_hover
{background: url(../images/thumb_hover_link.png) no-repeat top left;}
/* Portfolio styles end here */


/* ========= Footer styles ========== */
#footer 
{
position: relative;
padding: 12px 90px 20px;
}

#footer p.copyright
{font-size: 11px;}

#footer p.footer_menu
{position: absolute;
top: 12px;
right: 90px;

font-size: 16px;
text-transform: uppercase;
}

#footer p.footer_menu a
{text-decoration: none;}
/* Footer styles end here */


/* ========= Contact styles ========== */

#contact
{position: fixed;
width: 500px;
height: 330px;
top: 18%;
left: 50%; 
margin-left: -290px;
background: #080808;
border: 10px solid #2e2e2e;
padding: 20px 30px;
z-index: 9999;}

#contact a.close
{text-indent: -9999px;
display: block;
background: url(../images/cross.png) no-repeat top left;
width: 32px;
height: 32px;
position: absolute;
right: -28px;
top: -25px;
outline: none;}

.overlay 
{ background: black;
display: block;	
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 8888; }

#contact_form h3
{
font-size: 36px;
margin: 0 0 20px;
}

#contact_form input, textarea
{background: #1b1b1b;
border: 1px solid #333333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: white;
padding: 3px 5px;
font: 12px Verdana, Arial, sans-serif;}

#contact_form input
{height: 20px;
width: 150px;
}

#contact_form textarea
{width: 250px;
height: 125px;
}

#contact_form input#form_submit
{height: 30px;
padding: 0 0 2px 0;
background: -moz-linear-gradient(top, #424242,#282828);}

#contact_form input#form_submit:hover
{background: -moz-linear-gradient(top,#282828, #424242);
cursor: pointer;
}

#contact_form p
{position: relative;
margin: 0 0 15px 0;}

#contact_form p label
{position: absolute;
top:3px;
left: 10px;
color: #7b7b7b;
display: none;}

span.error
{position: absolute;
top: 3px;
left: 175px;
font-size: 12px;
color: red;}

span.comment_error
{left: 275px;}

.hide
{display: none;}

.success
{color: green;
position: absolute;
top: 155px;
left: 145px;
padding: 5px 0 7px 40px;
background: url(../images/success.png) no-repeat top left;
}



/* ============== TipTip Plugin CSS ============== */

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

#tiptip_holder.tip_top {
	padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
	padding-top: 5px;
}

#tiptip_holder.tip_right {
	padding-left: 5px;
}

#tiptip_holder.tip_left {
	padding-right: 5px;
}

#tiptip_content {
	font-size: 11px;
	color: #fff;
	text-shadow: 0 0 2px #000;
	padding: 4px 8px;
	border: 1px solid #474747;
	background: rgb(25,25,25);
	background: rgba(25,25,25,0.92);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow: 0 0 3px #555;
	-webkit-box-shadow: 0 0 3px #555;
	-moz-box-shadow: 0 0 3px #555;
}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
	border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
	border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(25,25,25);
	border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
	border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}


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