/*
***
project: katmilk personal portfolio
version: 1.1
author: katarina milkova
email: katarina.milkova@gmail.com
website: http://katmilk.com

If you like or dislike my site please let me know; I love the feedback!

***
*/
/*
Table of Contents
	#Colors
	#Global
	#Structure
	#Header
	#Navigation
	#Content
	#Typography
	#Lists
	#Links
	#Classes
	#Images
	#Forms
	#Misc
	#Blog
*/

/********************/
/* *** =Colors= *** */
/********************/
/*
	#Green:			#99CC00;
	#Pink:			#FF00EA;
	#Violet: 		#AE00FF;
	#Yellow:		#EDC61A;
*/



/***********************/
/* *** =Structure= *** */
/***********************/
body {
	background: #0C0C0C;
	color: #777;
	font-family: "Helvetica Neue",Helvetica,Tahoma,Arial,sans-serif;
	font-size: 1em;
	text-align: center;
}

#wrapper {
	background: #0C0C0C;
	margin: 0 auto;
	text-align: left;
	width: 95em;
}



/********************/
/* *** =Header= *** */
/********************/
#wrapper em {
	border-top: .09em dashed #333;
	color: #343434;
	float: right;
	font-size: 1.2em;
	left: 37.3em;
	letter-spacing: .15em;
	margin: 0;
	padding: .2em 0 0 0;
	position: relative;
	text-align: center;
	top: 7.7em;
	width: 29em;
}
#welcome, #welcomeBio {
	clear: both;
	margin: 12em 2em 2em 2em;
}
#intro {
	/*
	clear: left;
	float: right;
	*/
	margin: 2em 0;
}



/************************/
/* *** =Navigation= *** */
/************************/
#nav {
	float: left;
	position: relative;
	top: 4.6em;
	padding: 0 0 0 1em;
	width: 45em;
}
		#nav li {
			display: inline;
			font-size: 1.6em;
			margin: .5em;
			text-decoration: none;
		}
#subnav {
	font-size: 1em;
	float: right;
	margin: 0 1em 0 0;
	padding: .5em;
	position: relative;
	top: 5.8em;
	width: 30em;
}
	#subnav p {
		color: #EDC61A;
		float: left;
		margin: 0;
		padding: 0;
	}
	#subnav ul {
		float: right;
		margin: .2em 0 0 0;
	}
	#subnav ul li {
		display: inline;
		margin: .7em;
	}



/*********************/
/* *** =Content= *** */
/*********************/
#content {
	float: left;
	margin: 4em 0 5em 0;
}

#cta {}

#cta:after {
	clear: both;
	content: "";
	display: block;
}
	.col1 {
		background: #0C0C0C;
		color: #777;
		float: left;
		margin: 0 .7em 0 0;
		padding: 0 .5em 1em 0;
		width: 30em;
	}
	.col2 {
		background: #0C0C0C;
		color: #777;
		float: left;
		margin: 0 .7em;
		padding: 0 .5em 1em .5em;
		width: 30em;
	}
	.col3 {
		background: #0C0C0C;
		color: #777;
		float: right;
		margin: 0 0 0 .7em;
		padding: 0 0 1em .5em;
		width: 30em;
	}
	
#cta .cntctInfo {
	clear: both;
	display: block;
	float: left;
	margin: 1em 0 0 0;
}
	#cta span, #networks span {
		color: #AE00FF;
		float: left;
		margin: 0 1em 0 0;
		text-align: right;
		width: 5em;
	}
	#hire span {
		color: #AE00FF;
	}
#latest {
	margin: 5em 0 0 0;
}	
#networks .clmn {
	clear: right;
	display: block;
	float: left;
	margin: 0 5.7em 2em 5.7em;
	width: 20em;
}

#networks #otherCntct {
	clear: both;
	margin: 2em 0 0 0;
}

#foot {
	border-top: .15em solid #333;
	clear: both;
	font-size: .9em;
	margin: 0;
	padding: .5em 0 0 0;
	width: 106em;
}



/************************/
/* *** =Typography= *** */
/************************/

/* *** Headings *** */

h1 {
	color: #AE00FF;
	float: right;
	font-size: 10em;
}	
h2 {
	color: #EDC61A;
	float: left;
	font-size: 7em;
	padding: .5em 0;
}
	#home #welcome p {
		margin: .2em 0; /* fix for centering h2 vertically on home page*/
	}
	#bio #welcome h2 {
		float: right;
		margin: .1em 1.3em .1em 0;
		padding: 0;
}
	#hire #welcome h2 {
		float: none;
		margin: 0 0 .5em 0;
		padding: 0;
		text-align: center;
	}
h3 {
	border-bottom: .04em dashed #333;
	color: #AE00FF;
	font-size: 3em;
	font-weight: normal;
	padding: .1em .5em;
}
	h3.subCol {
		margin: 1em 0 0 0;
	}
	h3.hire {
		color: #FF08EA;
		border: none;
		margin: .3em 0;
	}
	h3.postTtl {
		margin: 1.6em 0 0 0;
	}
	#latest h3 {
		padding: 0 1em;
	}
h4 {
	border-bottom: .04em dashed #333;
	color: #AE00FF;
	font-size: 2em;
	font-weight: normal;
	margin: 2em 0 0 0;
	padding: .1em 0 .1em 1em;
}
	h4.thmbName {
		border: none;
		color: #EDC61A;
		font-size: 1.4em;
		float: left;
		margin: 0 0 0 1em;
		padding: .9em 0 0 0;
		width: 20em;
	}
	h4.thmbDesc {
		border: none;
		background: #171717;
		color: #bd35fd;
		font-size: 1.4em;
		float: right;
		margin: 0 .2em 0 0;
		padding: .7em 0 .5em 0;
		text-align: center;
		width: 15em;
	}



/* *** =Paragraphs= *** */

p {
	color: #777;
	font-size: 1.4em;
	line-height: 1.4em;
	padding: .5em;
}
	p.tagline {
		color: #777;
		font-size: 1.2em;
		font-weight: normal;
		float: right;
		left: 20em;
		margin: 0;
		padding: 0;
		position: relative;
		top: 1.2em;
		}
	#welcome p {
		clear: right;
		color: #777;
		float: right;
		font-size: 1.6em;
		line-height: 1.6em;
		margin: .5em 0;
		padding: 0;
		width: 35em;
	}
	#hire #intro p {
		width: 55em;
	}
	#bio #welcome p {
		clear: right;
		float: right;
		width: 32.8em;
	}
	#foot p {
		color: #333;
		display: inline;
		margin: .2em 1em;
	}



/*******************/
/* *** =Lists= *** */
/*******************/
.thmb ul {
	font-size: 1.2em;
	margin: 0 0 0 1.2em;
	padding: .5em 0 0 0;
}
#latest ul {
	padding: 1em 0 0 0;
}

li {
	font-size: 1.4em;
	line-height: 1.1em;
	margin: .5em;
}
	#latest li {
		display: inline;
		font-size: 1.1em;
		margin: 0 3em 0 0;
	}
	#home #cta .col3 .subCol + ul li {
		margin-left: 2em;
	}
	#networks .clmn li {
		margin: 0 0 3em 0;
	}
	#networks #otherCntct ul {
		margin: 1.4em 0 0 0;
	}
		#networks #otherCntct li {
			margin: .7em 0 1.2em 0;
		}
	

   
/*******************/
/* *** =Links= *** */
/*******************/
a:link, a:visited {
	color: #99CC00;
}
	a:hover {
		color: #444;
	}
	a.current {
		color: #99CC00;
	}
a.title {
	color: #AE00FF;
}	
#nav a:link, #nav a:visited {
	color: #777;
	font-family: 'Trebuchet MS',Helvetica,Arial,Geneva,sans-serif;
	font-size: .95em;
}
	#nav a:hover {
		color: #99CC00;
	}
	#nav a.current {
		color: #99CC00;
	}
#subnav a:link, #subnav a:visited,	
.hire a:link, .hire a:visited {
	color: #FF08EA;
}
#subnav a:hover, 
.hire a:hover {
	color: #444;
}
#subnav a.current, 
.hire a.current {
	color: #99CC00;
}
#latest a:link, #latest a:visited {
	color: #777;
}
#latest a:hover {
	color: #FFF;
}



/*********************/
/* *** =Classes= *** */
/*********************/
.medium {
	color: #99CC00;
}
.client {
	color: #FF00EA;
	}
.desc {
	color: #AE00FF;
}
.yellow {
	color: #EDC61A;
}
.thmb {
	margin: 2em;
	width: 89em;
}
.left {
	float: left;
}
.right {
	float: right;
}


/********************/
/* *** =Images= *** */
/********************/
#imgBio {
	border: 1em solid #111;
	float: left;
	height: 23em;
	margin: 0 2em 0 0;
	width: 34.5em;
}
#latest a img {
	width: 89em;
}
#latest img {
	background: #333;
	border: .7em solid #333;
}
#latest img:hover {
	background: #99CC00;
	border: .7em solid #99CC00;
}
#networks img {
	border: .3em solid #333;
}
#networks img:hover {
	border: .3em solid #99CC00;
}



/*******************/
/* *** =Forms= *** */
/*******************/
#commentsForm {
	float: left;
	margin: 5em 0;
	width: 45em;
}
#cntct {
	clear: both;
	display: block;
	float: left;
	margin: 2em 6em;
	width: 30em;
}
#hireForm {
	float: left;
	margin: 0;
	width: 30em;
}
	.formField {
		display: block;
		margin: 1em;
	}
	.formField label{
		clear: both;
		display: block;
		float: left;
		font-size: 1.4em;
		margin: .5em .5em;
	}
	.formField input{
		background: #DDD;
		clear: right;
		display: block;
		float: right;
		margin: .7em .5em;
		padding: .4em 0;
	}
	.formField textarea {
		background: #DDD;
		float: right;
		margin: .7em .5em;
		padding: .4em 0;
		width: 19.7em;
	}
	#commentsForm textarea {
		width: 26.3em;
	}
	#submitBtn {
		background: #FF00EA;
		border: .1em solid #333;
		color: #111;
		font-size: 1.2em;
		font-weight: bold;
		margin: .5em;
		padding: .2em;
	}
	#submitBtn:hover {
		background: #99CC00;
		border: .1em solid #333;
	}
	


/******************/
/* *** =Misc= *** */
/******************/



/******************/
/* *** =Blog= *** */
/******************/
.main {}
.secondary {
	clear: both;
}
.post {
	float: left;
	margin: 0 .8em;
	width: 70em;
}
.sidebar {
	float: right;
	margin: 0 .8em;
	width: 20em;
}
	.sidebar h4 {
		border-bottom: .05em dashed #333;
		margin: 2.8em 0 .5em 0;
		padding: .2em 0 .2em .5em;
	}

.date {
	color: #AE00FF;
	float: left;
	font-size: 1.1em;
	margin: 0;
	padding: .5em;
}
.post-comments {
	float: right;
	font-size: 1.1em;
	margin: 0;
	padding: .5em;
}
.entry {
	clear: both;
}
.post-tags {
	color: #444;
	font-size: 1.1em;
}
blockquote {
	background: #111;
	border: none;
	color: #CCC;
	font-size: 1.4em;
	margin: 2.5em;
	padding: 1em;
}



/* *** Comments *** */

#comments {
	clear: both;
	margin: 5em 0 0 0;
}
.comment {
	margin: 5em 0 0 0;
}
.comment:after {
	content: "";
	display: block;
	clear: both;
}

#comments .date {
	border-top: .1em dashed #333;
	font-size: 1.2em;
}
.comment-author {
	float: left;
	font-size: 1.8em;
	margin: .2em .5em;
}
.comment-text {
	clear: both;
	float: left;
	margin: 0 0 0 10em;
	width: 75em;
}



/********************/
/* *** =End of CSS= *** */
/********************/