@charset "utf-8";

/*	-------------------------------------------------------------
	Stefan Petrovic - Web Developer // www.stefanpetrovic.com
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Author: 	Stefan Petrovic
	Filename:	home.css
	Version:	1.1
	Date:	01/01/2010
	-------------------------------------------------------------	*/

/*	== RESET ============================== */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {outline: 0;}
body {
	background:#2D2015 url(../images/bg.gif) repeat fixed center center;
	border-top:10px solid #DC3E17;
	color:black;
	font-family:Trebuchet MS,Arial,Verdana,sans-serif;
	line-height:1;
}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*	== IE6 WarNING	============================== */

#ie6Warning {
	background:#E3E3E3;
	font-size:14px;
	line-height:17px;
	padding:10px;
	display:block;
}
#ie6Warning h2 {
	background: url(../images/ie6-warning.gif) no-repeat scroll 0 50%;
	font-size:18px;
	font-weight:bold;
	height:33px;
	line-height:33px;
	padding-left:40px;
}

#ie6Warning a {color:#00F;}

/*	== BASIC ============================== */
#wrap {
	position:relative;
	margin: 0 auto;
	width: 940px;
}

#header {float:left; margin: 10px 0 30px; width:940px;}

/*	== HEADLINES ============================== */
#portfolio h4, #contact h4, #partners_and_friends h4, #awards_and_showcase h4 {
	float:left;
	height:22px;
	width:918px;
	margin-bottom:20px;
	color: #fff;
	text-indent: -9999px;
}

#portfolio h4 {background: url(../images/latest_projects.png) no-repeat top left;width:178px;}
#contact h4 {background: url(../images/contact.png) no-repeat top left;width:178px;}
#partners_and_friends h4 {background: url(../images/partners_and_friends.png) no-repeat top left;width:193px;}
#awards_and_showcase h4 {background: url(../images/awards_and_showcase.png) no-repeat top left;width:198px;}

/*	== HEADLINES TOP LINKS ============================== */
#contact a.top_link, #portfolio a.top_link, #awards_and_showcase a.top_link, #footer a.top_link { background:none;float:right; width:22px;}

/*	== HEADLINES FOR PROJECTS ============================== */
#portfolio .projects .right h3 {
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	background: #DC3E17;
	text-indent: 5px;
	margin-bottom:10px;
}

/*	== MENU ============================== */
#menu {
	float:left;
	margin-top:30px;
	position:relative;
	width:780px;
}

#menu ul {
	display:inline;
	list-style-type: none;
}

#menu ul li {
	display:inline;
	list-style-type: none;
}

#menu li#work a {
	background:#211811 url(../images/menu_my_latest_projects.gif) no-repeat right 0;
	height:37px;
	width: 250px;
	display: block;
	text-indent:-9999px;
	float:right;
}

#menu li#work a:hover {background:#211811 url(../images/menu_my_latest_projects.gif) no-repeat right -38px;}

#menu li#contact_me a {
	background:#211811 url(../images/menu_contact.gif) no-repeat right 0;
	height:37px;
	width: 250px;
	margin-top:10px;
	display: block;
	text-indent:-9999px;
	float:right;
	clear:both;
}

#menu li#contact_me a:hover {background:#211811 url(../images/menu_contact.gif) no-repeat right -38px;}

/*	== LOGO ============================== */
h1 {
	float:left;
	position:relative;
	width:160px;
	height:150px;
}
#header #logo {float: left;}

#logo {
	width: 160px;
	height: 150px;
	background: url(../images/logo.png) no-repeat left 0px;
	display: block;
	text-indent: -9999px;
}
#logo:hover {background: url(../images/logo.png) no-repeat left -151px;}

/*	== ABOUT TEXT ============================== */
h2#top_about {
	border-bottom: solid 1px #412E1E;
	background-color: #19120C;
	color: #BB9B80;
	font-family: Georgia, Times, Serif;
	font-style: oblique;
	font-weight: lighter;
	font-size: 25px;
	padding: 20px;
	margin:20px 0 0 0;
	clear: both;
}

h2#top_about a {color: #BB9B80;}
h2#top_about span {color:#fff;}

#portfolio .projects {
	border-bottom:1px solid #412E1E;
	clear:left;
	float:left;
	margin-bottom:20px;
	padding-bottom:20px;
	position:relative;
	width:940px;
}

#portfolio .projects .left {
	position: relative;
	float: left;
	width: 600px;
	height: 260px;
}

#portfolio .projects .left img {
	border: 5px solid #19120C;
	outline: none;
}

#portfolio .projects .left img:hover {
	border: 5px solid #4E4138;
	outline: none;
}

#portfolio .projects .left .zoom img {border: none;}
#portfolio .projects .left .zoom img:hover {border: none;}

#portfolio .projects .left .zoom {display: none;}

#portfolio .projects .left:hover .zoom {
	display: block;
	position: absolute;
	z-index: 1;
	top: 117px;
	left: 262px;
}

#portfolio .projects .right {
	color:#fff;
	float:right;
	width:340px;
}

#portfolio .projects .right p {;
	font-size: 14px;
	color: #E03F15;
	line-height:17px;
	margin-bottom:10px;
}

#portfolio .projects .right p a {
	color: #E03F15;
	text-decoration:none;
}

#portfolio .projects .right p a:hover {
	color: #E03F15;
	text-decoration: none;
	border-bottom: 1px dotted #E03F15;
}

#portfolio .projects .right p span {
	color: #AC946B;
	text-transform: uppercase;
}

/* == CONTACT ============================== */

#portfolio, #contact {
	color:#fff;
	float:left;
	font-size:16px;
	position:relative;
	width:940px;
}

#contact_left {
	float:left;
	width:410px;
}
#contact_left p {margin-bottom:10px;}

#contact_right {
	float:left;
	line-height:20px;
	width:530px;
}

#contact_right p {margin-bottom:10px;}

#contact form#form2 {clear:both;}

#contact label {
	background:#4E4138 none repeat scroll 0 0;
	border:1px solid #19120C;
	clear:both;
	color:#fff;
	cursor:pointer;
	float:left;
	font-family:Trebuchet MS,Arial,Verdana,sans-serif;
	font-size:13px;
	line-height:18px;
	margin-right:5px;
	padding:5px;
	width:70px;
}

#contact form span {color:#DC3E17;}

#contact input, #contact textarea {
	background:#4E4138 none repeat scroll 0 0;
	border:1px solid #19120C;
	color:#fff;
	font-family:Trebuchet MS,Arial,Verdana,sans-serif;
	font-size:13px;
	line-height:18px;
	padding:5px;
	width:300px;
}

#contact input:focus,
#contact textarea:focus {background: #65564c;}

#contact_left .send_btt {
	cursor:pointer;
	float:right;
	margin-right:10px;
	width:120px;
}

#contact_left .send_btt:focus {background-color: #65564c;}

#contact_information {
	border-top:1px solid #412E1E;
	margin-top:20px;
	padding:30px 0 0 30px;
	float:left;
	width:500px;
}

#contact_information_photo {
	float:left;
	width:190px;
	border-right:1px solid #412E1E;
}

#contact_information_photo img {border:5px solid #19120C;}

#contact_right ul {
	color:#fff;
	float:left;
	line-height:18px;
	margin-left:20px;
}

#contact_right li a {
	color:#fff;
	text-decoration:none;
}

#contact_right li a:hover {
	color:#fff;
	text-decoration:none;
	border-bottom:1px dotted #fff;
}

.skype {
	background:transparent url(../images/skype.png) no-repeat 0 0;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	vertical-align:middle;
}

.mail {
	background:transparent url(../images/mail.png) no-repeat 0 0;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	vertical-align:middle;
}

.linkedin {
	background:transparent url(../images/linkedin.png) no-repeat 0 0;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	vertical-align:middle;
}

.phone {
	background:transparent url(../images/phone.png) no-repeat 0 0;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	vertical-align:middle;
}

.twitter {
	background:transparent url(../images/twitter.png) no-repeat 0 0;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	vertical-align:middle;
}

#msg_sent {
	background:#8bb800;
	padding:10px;
	margin-bottom:20px;
	border-top:1px solid #d8f27d;
	border-bottom:1px solid #d8f27d;
	float:left;
	width:920px;
}

#msg_failed {
	background:#FF0000;
	padding:10px;
	margin-bottom:20px;
	border-top:1px solid #8F0000;
	border-bottom:1px solid #8F0000;
	float:left;
	width:920px;
}

#available_for_work {
	background:#8bb800;
	font-weight:bold;
	padding:0 5px;
}

/* == friends_and_awards ============================== */

#friends_and_awards {
	border-top:1px solid #412E1E;
	color:#9D8067;
	float:left;
	font-size:12px;
	line-height:2;
	margin-top:20px;
	padding-top:20px;
	position:relative;
	width:940px;
}
#friends_and_awards a {
	background:#211811;
	color:#fff;
	font-size:16px;
	padding:0 5px;
	text-decoration:none;
}
#friends_and_awards a span {
	background:none;
	color:#9D8067;
	font-style:italic;
	font-size:12px;
	text-decoration:none;
}
#friends_and_awards a:hover span {
	background:none;
	color:#9D8067;
	font-style:italic;
	font-size:12px;
	text-decoration:underline;
}
#friends_and_awards a:hover {color:#DC3E17;}
#partners_and_friends,
#awards_and_showcase {
	float:left;
	width:470px;
}

#partners_and_friends ul {clear:left; float:left; width:470px;}

ul#left_column {clear:left; float:left; width:235px;}

ul#right_column {float:left; width:235px;}

#awards_and_showcase_wrap_links {clear:both;}

/* == friends_and_awards ============================== */

/* == FOOTER ==============================	*/

#footer {
	border-top:1px solid #412E1E;
	float:left;
	margin-top:20px;
	padding:5px 0 10px 0;
	position:relative;
	width:940px;
}

#footer p {
	color:#fff;
	float:left;
	font-size:12px;
	margin-top:6px;
}

#footer p a {
	color:#fff;
	text-decoration:none;
}

#footer p a:hover {border-bottom:1px dotted #fff;}