/*
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: 170px;
		margin: 10px 10px 50px 10px;
		background: url('../images/projectBg.png') no-repeat;
		float: left;
	}
	
		.project:hover {
			background: url('../images/projectBg_hover.png') no-repeat;
			border-bottom: none;
		}
	
	.project a {
		width: 270px;
		height: 170px;
		margin: 0;
		cursor: pointer;
		display: block;
		float: left;
	}
	
		.project a:hover {
			border-bottom: none;
		}
	
img.project {
	width: 250px;
	height: 150px;
	margin: 10px 0 0 10px;
	padding: 0;
}

.task {
	margin: 175px 0 0 10px;
	padding: 0;
	color: #fff;
	font-family: 'arial', tahoma, verdana, helvetica;
	font-size: 9px;
}

	span.prtTitle {
		color: #fff;
		line-height: 1.5em;
		text-transform: uppercase;
		display: inline;
	}

	span.prtDesc {
		margin: 2px 0 0 0;
		color: #777;
		display: inline;
	}
	
/* 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;
}

	.right 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;
}
	
	.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 .andme {
			width: auto;
			height: auto;
			margin: 0;
			padding: 0;
			float: left;
		}
		
			.right .andme h2.skills {
				width: 184px;
				height: 24px;
				margin: 0 0 5px 0;
				padding: 0;
				background: url(../images/skills.png) no-repeat;
			}
			
			.right .andme h2.sn {
				width: 184px;
				height: 24px;
				margin: 0 0 5px 0;
				padding: 0;
				background: url(../images/snTitle.png) no-repeat;
			}
			
			.right .andme ul {
				width: 184px;
				height: auto;
				list-style: none;
			}
			
				.right .andme ul li {
					width: 164px;
					margin: 0 0 2px 0;
					padding: 5px 0 5px 20px;
					color: #939393;
					text-transform: uppercase;
					background: #0e0e0e url(../images/li.png) center left no-repeat;
				}