/*------------------------------------------------------------------
[Info]

	Project:				Designer.rs
	Version:				4.0
	Last change:			21/06/08
	Author:					Milan Živkovic
	Author URL:				http://www.designer.rs

[Colors]
	
	text:	 				#aaa (light gray)
	a (standard):			#a3bb00 (green)
	a (visited):			#fff	(white)

  
[Table of contents]

	0. =Body
		1. =Content
			1.0. =Navigation (for all sections)
			1.1. home
			1.2. work
			1.3. about
			1.4. hire
			1.5. links
		2. =Icons
		
------------------------------------------------------------------- =Imported css*/

/*reset css*/
@import url(tripoli.css);

@import url(shadowbox.css);

/*------------------------------------------------------------------- =Body */

body {
	background: #111 url(../images/bg.gif) fixed center center;
	color: #aaa;
	font-size: .95em;
}

/*------------------------------------------------------------------- =Content */

#content {
	margin: 0 auto;
	width: 780px;
}

/*------------------------------------------------------------------- =Navigation*/
	
	.hidden {
		display: none;
	}
	
	.success {
		background: url(../images/ok.gif) no-repeat top center;
		display: none;
		padding-top: 150px;
		text-align: center;
	}
	
	.red {
		color: #F00;
	}

	/* list items */
	#content ul {
		list-style: none;
		margin: 0;
	}
	
	#content .nav {
		background: url(../images/bg-nav.gif) repeat-x left 48px;
		padding: 40px 0 20px 400px;
		overflow: auto;
		text-transform: uppercase;
	}

		#content .nav li {
			float: left;
		}

			#content .nav li a, #content .download {
				display: block;
				line-height: 2.8em;
				margin: 0 6px;
				padding-top: 4px;
				text-align: center;
				width: 59px;
			}
		
		/* inactive navigation link color, visited link section links */
		#content .nav a, #content .links dl dd a:link, #content .links dl dd a:visited {
			color: #aaa;
		}

/* hover link color */
#content .nav li a:hover, #content .nav li a:active, #content .nav li a:focus, #content .nav .active a, #content .links dl dd a:hover, #content .links dl dd a:active, #content .btn, #content .download {
	color: #fff!important;
}

/* active link and download button background image */
#content .nav .active, #content .download {
	background: url(../images/bg-active.gif) no-repeat center center;
}

#content .home {
	overflow: hidden; 
	padding-top: 20px;
}
	
	#content .home img {
		float: left
	}

	h1 {
		color: #fff;
		line-height: 1.4em;
		margin-top: .5em;
	}
	
	#content .home h1 {
		float: right;
		text-align: right;
		width: 510px;
	}
	
		#content .home h1 em {
			color: #a3bb00;
		}
		
#content .work {
	overflow: hidden;
}

/* project, input box, textarea, twitter box */
#content .projects li, #content .other li, #content input, #content textarea, #twitter_update_list, #navigation select {
	background: url(../images/bg-project.gif);
	border: 1px solid #272727;
	margin-bottom: 1em;
}

#content .projects li, #content .other li {
	height: 220px;
	margin-bottom: 3em;
}

#content .projects dl {
	margin-left: 9px;
}

	#content .projects dl dt {
		color: #777;
	}
	
		#content .projects dl dd,
		#content .links dl dd,
		#content .hire dl dd,
		#twitter_update_list li {
			padding-left: 20px;
		}

	#content .projects img {
		float: right;
		margin: 9px 9px 0 0;
	}

	#content .projects .status, #content .projects .agency {
		float: right;
		margin-right: 10px;
		width: 70px;
	}

	#content .projects .project {
		margin-top: 4px;
	}

#content .other li,
#content .hire div {
	float: left;
	margin-right: 10px;
	width: 248px;
}

#content .other li {
	height: 220px;
}

	#content .other li img {
		margin: 8px;
	}

#content .about div {
	float: left;
	margin-right: 30px;
	width: 265px;
}

#content #lastfm
#content #twitter_div {
	margin-right: 0;
}

#content .about #twitter_update_list {
	width: 460px;
	padding: 8px 0;
}

h3, #content .nav, #content .links, #content .hire, #content .hire dt {
	clear: both;
	overflow: hidden;
}

	#content .links dl {
		float: left;
		margin-bottom: 100px;
		width: 190px;
	}

#content input,
#content textarea {
	width:248px;
	color: #aaa;
}

#content .hire {
	margin-bottom: 40px;
}

	#content .hire div {
		position: relative;
		margin-right: 0;
	}
	
		#content .hire div dl {
			margin-left: 40px;
		}

/* contact form text boxes */
#content input {
	height: 2em;
}

/* contact form textarea */
#content textarea {
	height: 170px;
}

/* buttons style */
#content .btn,
#content .download {
	background: url(../images/bg-active.gif) no-repeat;
	border: 0;
	color: #fff;
	height: 32px;
	text-transform: uppercase;
	width:71px;
	z-index:1;
}

/* download button position */
#content .download {
	bottom: 101px;
	right: 0px;
	position: absolute;
}	
	
	.banana {
		background: url(../images/bg_banana.jpg) no-repeat;
		height: 381px;
		width: 300px;
	}
	
	.banana h1 {
		padding: 10px 20px;
		margin: 0;
	}
	
	.banana ul {
		list-style: none;
		margin: 24px 0 0 24px;
		text-align: right;
	}
	
		.banana ul li {
			float: left;
			margin: 7px 12px;
		}
		
			.banana ul li a {
				display: block;
				height: 57px;
				width: 59px;
			}

#content .footer {
	background: url(../images/bananas.gif) no-repeat bottom center;
	height: 450px;
	position: relative;
	width: 780px;
}

#content .footer a {
	height: 86px;
	left: 150px;
	position: absolute;
	text-indent: -9999px;
	top: 160px;
	width: 165px;
}

#content #twitter_div,
#content #lastfm,
#content .tools {
	margin-right: 0!important;
}


/*------------------------------------------------------------------- =Icons*/


/* icons sprites and position (work, about, hire, link) */
dl dd, #twitter_update_list li {
	background: url(../images/icons/icons.gif) no-repeat left -775px;
}

/* globus icon */
dl .label-project {
	background-position: left 6px;
}

/* online status icon */
dl .label-online {
	background-position: left -52px;
}

/*work in progress status icon */
dl .label-wip {
	background-position: left -112px;
}

/* offline status icon */
dl .label-offline {
	background-position: left -172px;
}

/* concept design icon */
dl .label-concept {
	background-position: left -232px;
}

/* date icon */
dl .label-date {
	background-position: left -1555px;
}

/* light bulb icon */
dl .label-design {
	background-position: left -295px;
}

/* xhtml icon */
dl .label-xhtml {
	background-position: left -355px;
}

/* css icon */
dl .label-css {
	background-position: left -415px;
}

/* site meintenance icon */
dl .label-meintenance {
	background-position: left -475px;
}

/* wordpress icon */
dl .label-wp {
	background-position: left -535px;
}

/* jquery icon */
dl .label-jquery {
	background-position: left -595px;
}

/* joomla icon */
dl .label-joomla {
	background-position: left -655px;
}

/* star icon */
.services dl dd {
	background-position: left -895px;
}

.tools dl dd {
	background-position: left -835px;
}

/* apple icon */
.tools dl .label-mac {
	background-position: left -1255px;
}

/* hide icons for resume and status boxes */
#content .hire .tools .label-status, #content .hire .tools .label-resume {
	background: none;
	padding-left: 4px;
}

/* speach bubble icon */
#twitter_update_list li {
	background-position: left -715px;
}

/* flash icon */
.tools dl .label-fl, .label-fl {
	background-position: left -1315px;
}

/* photoshop icon */
.tools dl .label-ps {
	background-position: left -1375px;
}

/* illustrator icon */
.tools dl .label-ai {
	background-position: left -1435px;
}

/* dreamweaver icon */
.tools dl .label-dw {
	background-position: left -1495px;
}

/* twitter icon */
.label-twitter {
	background-position: left -955px;
}

/* stumble upon icon */
.label-stumble {
	background-position: left -1015px;
}

/* myspace icon */
.label-myspace {
	background-position: left -1075px;
}

/* facebook icon */
.label-facebook {
	background-position: left -1135px;
}

/* lastfm icon */
.label-lastfm {
	background-position: left -1195px;
}

.label-stockxpert {
	background-position: left -1615px;
}

.label-themeforest {
	background-position: left -1675px;
}

.label-dreamstime {
	background-position: left -1735px;
}

.label-vectorstock {
	background-position: left -1795px;
}

.label-istockphoto {
	background-position: left -1855px;
}

.label-mootools {
	background-position: left -1915px;
}