/*
HZSEDESIGN.com
zsolt hutvagner's portfolio
main.css
*/


@charset "utf-8";

/* reset */

:active, :focus {
	outline: none;
}

html, body, h1, h2, h3, h4, h5, h6, div, ul, ol, li, img, table, tr, th, td, input, textarea {
	padding: 0;
	margin: 0;
	border: none;
	font: normal 11px arial, 'verdana', helvetica, sans-serif;
	color: #fff;
}

ul, dl, ol {
	list-style: none outside none;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

span {
	display: none;
}

.clr {
	clear: both;
}

@font-face {
	font-family:'Accidental Presidency';
	src: url('Accidental Presidency.ttf') format('TrueType');
}

body {
	background: #000 url(images/bg.jpg) top left no-repeat fixed;
}

/* default url */

a:link, a:active, a:visited {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dashed #dedede;
}

/* wrap */

#content {
	width: 900px;
	height: auto;
	margin: 0;
	padding: 0;
}

.content {
	margin: 0 0 0 20px;
	padding: 5px;
	font-size: 11px;
	color: #dedede;
}

/* head */

#head {
	height: 180px;
	margin: 0 0 20px 0;
	padding: 0;
	background: url(images/dashed.png) center bottom no-repeat;
}

	#head .logo {
		width: 238px;
		height: 87px;
		margin: 20px;
		padding: 0;
		background: url(images/logo.png) no-repeat;
		float: left;
	}
	
		.logo a {
			width: 238px;
			height: 87px;
			display: block;
			float: left;
		}
		
			.logo a:hover {
				border-bottom: none;
			}
			
/* social */

ul.social {
	margin: -35px 0 10px 33px;
	padding: 8px 0 10px 107px;
	float: left;
	background: url(images/socialnetwork.png) center left no-repeat;
}

	ul.social li {
		margin: 0 8px 0 0;
		padding: 0;
		float: left;
	}
	
	li.twitter a {
		width: 23px;
		height: 23px;
		margin: 0;
		padding: 0;
		background: url(images/icons/twitterIcon.png) no-repeat;
		display: block;
		cursor: pointer;
	}
	
		li.twitter a:hover {
			background: url(images/icons/hover/twitterIcon.png) no-repeat;
			border: 0;
		}
		
	li.facebook a {
		width: 23px;
		height: 23px;
		margin: 0;
		padding: 0;
		background: url(images/icons/facebookIcon.png) no-repeat;
		display: block;
		cursor: pointer;
	}
	
		li.facebook a:hover {
			background: url(images/icons/hover/facebookIcon.png) no-repeat;
			border: 0;
		}
		
	li.deviantart a {
		width: 23px;
		height: 23px;
		margin: 0;
		padding: 0;
		background: url(images/icons/deviantartIcon.png) no-repeat;
		display: block;
		cursor: pointer;
	}
	
		li.deviantart a:hover {
			background: url(images/icons/hover/deviantartIcon.png) no-repeat;
			border: 0;
		}
		
	li.youtube a {
		width: 23px;
		height: 23px;
		margin: 0;
		padding: 0;
		background: url(images/icons/youtubeIcon.png) no-repeat;
		display: block;
		cursor: pointer;
	}
	
		li.youtube a:hover {
			background: url(images/icons/hover/youtubeIcon.png) no-repeat;
			border: 0;
		}
	
/* footer */

.footer {
	width: 900px;
	height: 20px;
	margin: 20px;
	padding: 0;
	font-size: 10px;
	text-align: center;
}
	
/* hello */

.hellobello {
	width: 482px;
	height: 73px;
	margin: 20px 0 0 115px;
	padding: 0;
	color: #5f5f5f;
	background: url(images/contact.png) top left no-repeat;
	float: left;
}

	.hellobello a {
		width: 370px;
		height: 30px;
		margin: 37px 5px 0 0;
		padding: 0;
		display: block;
		float: right;
	}

/* navigation */

.nav {
	height: 47px;
	margin: 20px 0 0 90px;
	padding: 0;
	float: left;
}

.nav ul {
		width: auto;
		height: 47px;
		margin: 0;
		padding: 0;
		list-style-type: none;
		overflow: hidden;
	}
				
		.nav ul li {
			height: 47px;
			margin: 0 0 0 22px;
			float: left;
		}
					
			.nav ul li a {
				height: 50px;
				cursor: pointer;
				display: block;
			}

				#nav01 { width: 123px; background: #000 url(images/nav01.png); }
				#nav01 a:hover { background: #000 url(images/nav01h.png);}
				
				#nav02 { width: 95px; background: #000 url(images/nav02.png); }
				#nav02 a:hover { background: #000 url(images/nav02h.png);}
				
				#nav03 { width: 115px; background: #000 url(images/nav03.png); }
				#nav03 a:hover { background: #000 url(images/nav03h.png);}
				
				#nav04 { width: 86px; background: #000 url(images/nav04.png); }
				#nav04 a:hover { background: #000 url(images/nav04h.png);}
/* hr */

hr {
	width: 868px;
	height: 3px;
	margin: 10px 0 20px 20px;
	padding: 0;
	border: 0;
	background: url(images/dashed.png) top left no-repeat;
}

/* title */

.projectsTitle {
	width: 167px;
	height: 56px;
	margin: 0 0 10px 20px;
	padding: 0;
	background: url(images/projectsTitle.png) no-repeat;
}

.aboutTitle {
	width: 167px;
	height: 56px;
	margin: 0 0 10px 20px;
	padding: 0;
	background: url(images/aboutTitle.png) no-repeat;
}

.contactTitle {
	width: 167px;
	height: 56px;
	margin: 0 0 10px 20px;
	padding: 0;
	background: url(images/contactTitle.png) no-repeat;
}

.blogTitle {
	width: 167px;
	height: 56px;
	margin: 0 0 10px 20px;
	padding: 0;
	background: url(images/blogTitle.png) no-repeat;
}

/* projects */

.projects {
	height: auto;
	margin: 0 0 0 0;
	padding: 0;
}

	.project {
		width: 270px;
		height: 214px;
		margin: 10px 10px 50px 10px;
		background: url('images/projectBg.png') top left no-repeat;
		float: left;
		display: block;
	}
	
		.project:hover {
			background: url('images/projectBg.png') bottom left no-repeat;
			display: block;
		}
		
		.project img {
			width: 250px;
			height: 150px;
			margin: 10px 0 0 10px;
			padding: 0;
		}
		
		.project .data {
			margin: 5px 0 0 10px;
		}
		
		.project .data .prName {
			color: #fff;
			line-height: 1.5em;
			text-transform: uppercase;
			display: inline;
			font-size: 10px;
		}
		
		.project .data .prDesc {
			margin: 2px 0 0 0;
			color: #777;
			font-size: 9px;
			display: block;
		}
		
		.project:hover, .project img:hover, .project a:hover {
			border-bottom: none;
		}
		
/* contact */

.content .contact {
	margin: 0 0 0 10px;
}

	.contact .contactme {
		width: 400px;
		height: 30px;
		margin: 0;
		padding: 0;
		background: url(images/contactMin.png) no-repeat;
	}
	
	.contact .quote {
		width: 400px;
		height: 30px;
		margin: 0;
		padding: 0;
		background: url(images/quoteMin.png) no-repeat;
	}

.left {
	width: 400px;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
}

	.left p {
		padding: 0 13px 13px 13px;
		text-align: justify;
		color: #dedede;
		font-size: 12px;
	}

.right {
	width: 450px;
	height: auto;
	margin: 0 0 0 0;
	padding: 0;
	float: left;
}

	span.titleContact {
		margin: 0 0 3px 5px;
		padding: 0;
		color: #dedede;
		font-family: TAHOMA;
		font-size: 13px;
		text-transform: uppercase;
		font-weight: bold;
		display: block;
	}

input.contactIn {
	width: 382px;
	height: 32px;
	margin: 0;
	padding: 0 10px 0 10px;
	font-size: 15px;
	color: #727272;
	background: url(images/inputBig.png) no-repeat;
}

textarea.contactText {
	width: 383px;
	height: 132px;
	margin: 0;
	padding: 10px;
	font-size: 12px;
	color: #727272;
	background: url(images/textareaBig.png) no-repeat;
}

.sendButton {
	width: 111px;
	height: 20px;
	margin: 10px 10px 0 0;
	padding: 0;
	background: url(images/sendButton.png) top left no-repeat;
	display: block;
	cursor: pointer;
}
	
	.sendButton:hover {
		display: block;
		cursor: pointer;
		background: url(images/sendButton.png) bottom left no-repeat;
	}
	
/* about me */

.content .about {
	margin: 0 0 0 10px;
}

	.contact .whatiDo {
		width: 400px;
		height: 30px;
		margin: 0;
		padding: 0;
		background: url(images/whatTitle.png) no-repeat;
	}
	
	.contact .andMe {
		width: 400px;
		height: 30px;
		margin: 0;
		padding: 0;
		background: url(images/meTitle.png) no-repeat;
	}

.left {
	width: 400px;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
}

	.left p {
		padding: 0 13px 13px 13px;
		text-align: justify;
		color: #bdbdbd;
	}

.right {
	width: 410px;
	height: auto;
	margin: 0 0 0 40px;
	padding: 0;
	float: left;
}

	.right p {
		text-align: justify;
		color: #bdbdbd;
	}
	
	/* what i do */
	
		.left h2.webdesignS {
			width: 393px;
			height: 22px;
			margin: 10px 0 5px 1px;
			padding: 0;
			background: url(images/webdesignLi.png) top left no-repeat;
			display: block;
			cursor: pointer;
		}
		
		.left h2.developmentS {
			width: 393px;
			height: 22px;
			margin: 10px 0 5px 1px;
			padding: 0;
			background: url(images/developmentLi.png) top left no-repeat;
			display: block;
			cursor: pointer;
		}
		
		.left h2.logoS {
			width: 393px;
			height: 22px;
			margin: 10px 0 5px 1px;
			padding: 0;
			background: url(images/logoLi.png) top left no-repeat;
			display: block;
			cursor: pointer;
		}
		
		.left h2.printS
		 {
			width: 393px;
			height: 22px;
			margin: 10px 0 5px 1px;
			padding: 0;
			background: url(images/printLi.png) top left no-repeat;
			display: block;
			cursor: pointer;
		}

	.acc_container {
		width: 370px;
		margin: 0 0 7px 10px;
		padding: 10px;
		overflow: hidden;
		clear: both;
	}

	/* and me */
		
		.right .skills {
			width: auto;
			height: auto;
			margin: 30px 0 40px 17px;
			padding: 0;
		}
		
			.right .skills h2 {
				width: 184px;
				height: 24px;
				margin: 0 0 5px 0;
				padding: 0;
				background: url(images/skills.png) no-repeat;
			}
			
			.right .skills ul {
				width: 184px;
				height: auto;
				list-style: none;
			}
			
				.right .skills ul li {
					width: 164px;
					margin: 0 0 2px 0;
					padding: 5px 0 5px 20px;
					color: #939393;
					text-transform: uppercase;
					background: #0e0e0e url(http://hzsedesign.com/images/li.png) center left no-repeat;
				}

/* blog */

.content .blog {
	margin: 0 0 0 10px;
}

	.content .blog .left {
		width: 510px;
		height: auto;
		margin: 0;
		padding: 0;
		float: left:
	}
	
	.content .blog .right {
		width: 310px;
		height: auto;
		margin: 0 0 0 25px;
		padding: 0;
		float: left:
	}
	
		/* menu */
		
		.content .blog .right .menu {
			width: 307px;
			margin: 0 0 20px 0;
			padding: 0;
			background: url(images/posttitleBg.png) top left no-repeat;
		}
		
			.right .menu h3 {
				margin: 0 0 10px 0;
				padding: 5px 10px 2px 10px;
				font-family: trebuchet ms, tahoma, verdana, arial;
				font-size: 17px;
				text-transform: uppercase;
				color: #e5e5e5;
			}
			
				.right .menu h3 a:link, .right .menu h3 a:active, .right .menu h3 a:visited {
					display: block;
					cursor: pointer;
					border: none;
				}
				
					.right .menu h3 a:hover {
						color: #6ac2ef;
					}
			
			.right .menu ul {
				width: 279px;
				margin: 0 0 0 13px;
				padding: 0;
			}
			
				.menu li a {
					width: 279px;
					height: 17px;
					margin: 0 0 0 3px 0;
					padding: 5px 0 0 23px;
					font-size: 10px;
					font-family: verdana, arial, tahoma, helvetica;
					text-transform: uppercase;
					font-weight: normal;
					background: url(images/liBg.png) top left no-repeat;
				}
				
					.menu li a:link, .menu li a:active, .menu li a:visited {
						color: #a7a7a7;
						text-decoration: none;
						display: block;
					}
					
					.menu li a:hover {
						color: #6ac2ef;
						border: none;
						background: url(images/liBg.png) bottom left no-repeat;
					}
	
		/* posts */
	
		.left .postsTitle {
			width: 505px;
			height: 27px;
			margin: 0 0 15px 0;
			padding: 0;
			background: url(images/postsTitle.png) top left no-repeat;
		}
		
		.left .notfoundTitle {
			width: 505px;
			height: 27px;
			margin: 0 0 15px 0;
			padding: 0;
			background: url(images/notfoundTitle.png) top left no-repeat;
		}
		
		.right .menuTitle {
			width: 307px;
			height: 27px;
			margin: 0 0 15px 0;
			padding: 0;
			background: url(images/menuTitle.png) top left no-repeat;
		}
		
		.blog .left .post {
			width: 505px;
			height: auto;
			margin: 0 0 50px 0;
			padding: 0;
			background: url(images/posttitleBg.png) top left no-repeat;
		}
		
			.post .text {
				width: 480px;
				margin: 5px 0 5px 12px;
				padding: 0 0 5px 0;
				border-bottom: 1px dashed #333;
			}
			
				.text p {
					margin: 0;
					padding: 0 0 10px 0;
					color: #a1a1a1;
					font-family: verdana, arial, tahoma, helvetica;
					font-size: 11px;
				}
				
					.post .text p:hover {
						color: #fff;
					}
				
		
		.blog .left .post h3 {
			width: 505px;
			margin: 0;
			padding: 5px 10px 2px 10px;
			font-family: trebuchet ms, tahoma, verdana, arial;
			font-size: 17px;
			text-transform: uppercase;
			color: #6aadcf;
			
		}
		
			.blog .left .post h3 a:link, .blog .left .post h3 a:active, .blog .left .post h3 a:visited {
				color: #6aadcf;
				text-decoration: none;
				display: block;
			}
			
			.blog .left .post h3 a:hover {
				color: #64cbff;
				text-decoration: none;
				border: none;
			}
			
			.blog .left .post .data {
				margin: 0 0 0 10px;
				padding: 5px;
			}
			
				.post .data .date {
					margin: 0;
					padding: 0 0 0 20px;
					color: #828282;
					font-size: 10px;
					font-family: arial, verdana, helvetica;
					background: url(images/dateIcon.png) center left no-repeat;
					float: left;
				}
					
				.post .data .comment {
					margin: 0 5px 0 0;
					padding: 0 0 0 20px;
					font-size: 10px;
					font-family: arial, verdana, helvetica;
					background: url(images/commentIcon.png) center left no-repeat;
					float: right;
					text-transform: uppercase;
				}
				
					.post .data .comment a:link, .post .data .comment a:active, .post .data .comment a:visited {
						color: #6aadcf;
						text-decoration: none;
					}
					
					.post .data .comment a:hover {
						color: #6ac2ef;
						text-decoration: none;
					}
					
	/* comments */
				
	.blog .left .comments {
		width: auto;
		margin: 0;
	}
	
		.left .comments .commentsTitle {
			width: 505px;
			height: 27px;
			margin: 0 0 15px 0;
			padding: 0;
			background: url(images/commentsTitle.png) top left no-repeat;
		}
		
		.left .comments .writeTitle {
			width: 505px;
			height: 27px;
			margin: 0 0 15px 0;
			padding: 0;
			background: url(images/writeTitle.png) top left no-repeat;
		}
		
		.left .comments .commentBox {
			width: 505px;
			height: auto;
			margin: 0 0 40px 0;
			padding: 0;
			background: url(images/posttitleBg.png) top left no-repeat;
		}
		
			.comments .data {
				margin: 0;
			}
			
				.comments .data .author {
					margin: 0;
					padding: 5px 10px 5px 10px;
					font-family: trebuchet ms, tahoma, verdana, arial;
					font-size: 12px;
					text-transform: uppercase;
					display: block;
				}
				
					.data .author a:link, .data .author a:active, .data .author a:visited {
						color: #6aadcf;
					}
				
					.data .author a:hover {
						color: #6ac2ef;
					}
				
				.comments .data .date {
					padding: 0 0 0 10px;
					color: #828282;
					font-size: 10px;
					font-family: arial, verdana, helvetica;
				}
				
				.comments .data .text {
					margin: 5px 0 0 15px;
				}
				
					.comments .data .text p {
						padding: 0 0 10px 0;
					}
					
					.comments .data .text p:hover {
						color: #fff;
					}
		
			.commentBox .gravatar {
				margin: 10px;
				float: right;
				opacity:0.4;filter:alpha(opacity=40)
			}
			
				.gravatar:hover {
					opacity:1;filter:alpha(opacity=100)
				}

.via {
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 10px;
	text-align: right;
	display: block;
}

a.more-link:link, a.more-link:active, a.more-link:visited {
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 10px;
	color: #6aadcf;
	text-align: right;
	text-transform: uppercase;
}

	a.more-link:hover {
		color: #6ac2ef;
		text-decoration: none;
	}

/* others */

.blog .left .post h2 {
	margin: 0 0 2px 0;
	font-family: trebuchet ms, tahoma, verdana, arial;
	font-size: 17px;
	text-transform: uppercase;
	color: #6aadcf;
}

	.blog .left .post h2 span.number {
		margin: 0 5px 0 0;
		font-family: trebuchet ms, tahoma, verdana, arial;
		font-size: 25px;
		text-transform: uppercase;
		color: #fff;
		display: inline;
	}
	
.blog .left .post a.link {
	margin: 0 0 0 20px;
	font-family: arial, verdana, helvetica, tahoma;
	font-size: 10px;
	font-weight: normal;
}

.post img.pic {
	width: 480px;
	height: auto;
	margin: 10px 0 10px 0;
}