/*                                     LAYOUT + TYPOGRAPHY 
__________________________________________________________
*/

	body {
		background: #ffffff url(../img/bg-texture.gif) repeat-x fixed;
		font: 15px Verdana, Arial, Helvetica, sans-serif;
		line-height: 22px;
		color: #000000;
	}
	
	div#navbar {
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		background: url(../img/navbar.png) no-repeat left top;
	}
	
	div#container {
		width: 850px;
		margin: 0 auto;
		padding: 0 0 15px;
	}
	
	div#work, div#services, div#contact, div#extras, div#projekt, div#about{
		/*width: 390px;*/
		width: auto;
		margin: 10px auto 0;
		padding: 2px;
		background: url(../img/bg-line.gif) no-repeat 0 115px;
	}
	
	div#home {
		padding-top: 75px;
		min-height: 1000px;
	}
	
	div#about, div#work, div#services, div#contact, div#extras, div#projekt{
		padding-top: 75px;
		min-height: 300px;
	}
	
	div#headline {
		position: absolute;
		z-index: 10;
		width: 410px;
		height: 300px;
		margin-left: 12px;
		background: url(../img/h1-headline.png) no-repeat 0 8px;
	}
	
	div#bio {
		position: absolute;
		z-index: 12;
		width: 370px;
		height: 314px;
		margin: -8px 0 0 5px;
		margin-left: 435px;
		padding: 20px 21px;
		background: url(../img/bg-bio.gif) no-repeat;
	}
	
	div#gallery {
		padding-top: 12px;
	}
	
	h2 {
		padding: 0 0 16px;
		width: auto;
		height: 29px;
	}
		
	div#about h2 {
		background: url(../img/h2-om_oss.png) no-repeat;
	}
	
	div#projekt h2 {
		background: url(../img/h2-projekt.png) no-repeat;
	}
	
	div#work h2 {
		background: url(../img/h2-portfolj.png) no-repeat;
	}
	
	div#services h2 {
		background: url(../img/h2-vad_kan_vi.png) no-repeat;
	}
	
	div#contact h2 {
		background: url(../img/h2-kontakt.png) no-repeat;
	}
	
	div#headline h1, h2 span {
		display: none;
		visibility: hidden;
	}
	
	h1 {
		font: 32px 'Arial Narrow', Arial, sans-serif;
		color: #fff;
		text-transform: uppercase;
	}
	
	p {
		font: 15px Tahoma, Verdana, Arial, Helvetica, sans-serif;
		color: #202020;
		line-height: 22px;
		padding: 5px 0 8px;
		text-shadow: 1px 1px #f8f8f8;
		filter: Shadow(Color=#ffffff,Direction=135,Strength=1);
		text-align: justify;
	}
	
	div#bio p {
		width: 370px;
		text-align: left;
	}



/*                                                   NEWS
__________________________________________________________
*/

	div#news{
		width: 400px;
		float: left;
		margin-right: 25px;
		margin-left: 10px;
	}
	
	div#news h1 {
		padding: 0 0 6px;
		width: auto;
		height: 29px;
		border-bottom: 1px solid #8acae4;
	}
	
	div#news h1{
		background: url(../img/h1-news.png) no-repeat;
	}
	
	div#news h1 span {
		display: none;
		visibility: hidden;
	}
	
	div#news h2{
		
		margin: 17px 2px 2px 2px;
		padding:2px;
		font-size:25px;
	}
	
	div#news h4{
		height: 4px;
		border-bottom: 1px solid #d6d6d6;
	}

	div#news h3{
		margin: 0px;
		padding: 0px;
		font-size:14px;
		color:#616161;
	}
	
	div#news span{
		font-size: 9px;
		width: 150px;
		display: block;
	}
	
	div#news p{
		padding: 4px;
	}
	
/*                                                   FLOAT
__________________________________________________________
*/

	div#float{
		width: 200px;
		float: left;
		min-height:400px;
		border-left: 1px solid #d6d6d6;
		padding-left: 10px; 
	}
	
	div#float h2{
		font-size: 18px;
		padding: 1px;
		margin: 1px;
	}
	
	
/*                                                   FLOAT
__________________________________________________________
*/

	div#float2{
		margin-left: 10px;
		width: 180px;
		float: left;
		min-height:400px;
		border-left: 1px solid #d6d6d6;
		padding-left: 10px; 
	}
	
	div#float2 h2{
		font-size: 15px;
		padding: 1px;
		margin: 1px;
		border-bottom: 1px solid #d6d6d6;
	}
	
	div#float2 p{
		font-size: 12px;
	}

	div#float2 #bs{
		font-size: 12px;
		padding: 3px;
		margin: 1px;
		color: #ffffff;
		background: #202020;
		width: auto;
	}
	
/*                                                   LINKS
__________________________________________________________
*/

	a {
		color: #0066a9;
		text-decoration: none;
		outline: none;
		font-weight: normal;
	}

	a:hover {
		color: #0066a9;
		border-bottom: 1px solid #0066a9;
	}



/*                                              TOP NAVBAR
__________________________________________________________
*/

	div#navbar ul {
		width: 850px;
		margin: 0 auto;
		padding: 2px 0 0 13px;
	}

	div#navbar ul li {
		list-style: none;
		display: block;
		float: left;
		padding: 10px 16px;
	}
	
	div#navbar li a {
		display: block;
		font: 13px Verdana, Arial, Helvetica, sans-serif;
		color: #fff;
		text-transform: uppercase;
		border: none;
	}


	div#navbar li a span {
		display: none;
	}


	div#navbar a#tom {
		height: 25px;
		width: 100px;
		display: block;
	}
	
	div#navbar a#logo {
		height: 25px;
		width: 107px;
		display: block;
		background: transparent url(../img/navbar-iz_group.png) no-repeat 5px 5px;
		margin-top: -3px;
	}
	
	div#navbar a#projekt {
		height: 25px;
		width: 70px;
		display: block;

	}
	
	div#navbar a#this-guy {
		height: 25px;
		width: 70px;
		display: block;

	}
	
	div#navbar a#my-work {
		height: 25px;
		width: 70px;
		display: block;

	}
	
	div#navbar a#what-i-can-do {
		height: 25px;
		width: 80px;
		display: block;

	}
	
	div#navbar a#message-me {
		height: 25px;
		width: 70px;
		display: block;

	}

	div#navbar li a:active {
		margin-top:1px;
	}


/*                                            	   GALLERY
__________________________________________________________
*/
	
	div#work select {
		float: right;
		margin-top: 3px;
	}
	
	select#sortwork {
		font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
		color: #303030;
		padding: 3px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border: 1px solid #cacaca;
	}
	
	div.webwork, div.logowork, div.prowork { 
		display: block;
		height: 166px;
		width: 380px;
		border: 6px solid #95d1f2;
		margin-bottom: 22px;
		margin-left: 21px;
		position: relative;
		zoom: 1;
		float: left;
	}
	
	div.webwork a, div.logowork a, div.prowork a { 
		border-bottom: none;
	}
	
	div.webwork .caption, div.logowork .caption, div.prowork .caption {
		background-color: #303030; 
		background: rgba(30,30,30, .9) !important;
		height: 54px;
		width: 380px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	div.webwork .caption .left, div.logowork .caption .left, div.prowork .caption .left {
		display: block;
		padding: 6px 10px 0 10px;
		float: left;
	}
	
	div.webwork .caption .right, div.logowork .caption .right, div.prowork .caption .right {
		display: block;
		padding: 6px 10px 0 10px;
		float: right;
	}
	
	div.webwork .caption h3, div.logowork .caption h3, div.prowork .caption h3 {
		font-size: 16px;
		line-height: 16px;
		padding: 3px 0 7px;
		color: #fff;
	}
	
	div.webwork .caption span, div.logowork .caption span, div.prowork .caption span {
		display: block;
		padding: 0;
		margin: 0;
		font-size: 11px;
		line-height: 11px;
		color: #808080;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	
	div.webwork .caption span.date, div.logowork .caption span.date, div.prowork .caption span.date {
		text-align: right;
		padding: 2px 0 1px;
		font-size: 16px;
		line-height: 16px;
		color: #505050;
		text-transform: lowercase;
	}
	
	
	div.webwork .caption a, div.logowork .caption a, div.prowork .caption a  {
		color: #808080;
		text-transform: uppercase;
		font-size: 11px;
		line-height: 11px;
		padding: 7px 0 2px;
		border-bottom: 1px solid #404040;
		float: right;
		display: block;
	}
	
	
	div.webwork .caption a:hover, div.logowork .caption a:hover, div.prowork .caption a:hover {
		color: #fff;
		border-bottom: 1px solid #707070;
	}
	
/*                                          DESIGNER STATS
__________________________________________________________
*/

	div#stats {
		width: 96%;
		margin: 0 auto;
	}

	div#stats div#stats_head, div.error, div#success {
		display: block;
		width: 100%;
		height: 35px;
		margin: 14px 0 7px;
		background: url(../img/bg-texture_sm.png) repeat;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-top: 1px solid #c7c7c7;
		border-right: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		border-left: 1px solid #c7c7c7;
	}
	
	div#stats div#stats_head h3 {
		display: block;
		width: 100%;
		height: 35px;
		font-size: 18px;
		padding-top:4px;
		padding-left:10px;
	}
	
	div#needs_work {
		width: 245px;
		height: 40px;
		padding-left: 3px;
		float: left;
		text-align: left;
		font-size: 14px;
		font-style: italic;
		color: #929292;
		background: url(../img/stats-left_arrow.gif) no-repeat left 22px;	
	}
	
	div#perfect {
		width: 215px;
		height: 40px;
		padding-right: 2px;
		float: right;
		text-align: right;
		font-size: 14px;
		font-style: italic;
		color: #323232;
		background: url(../img/stats-right_arrow.gif) no-repeat right 22px;	
	}

	div#stats ul li {
		list-style: none;
		background-color: #636363;
		margin: 2px 0 10px;
		padding: 5px 0 2px;
		-moz-border-radius-topright: 4px;
		-moz-border-radius-bottomright: 4px;
		-webkit-border-top-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
	}
	
	div#stats ul li img {
		padding: 3px 0 0 7px;
	}
	
	div#stats ul li span {
		display: block;
		padding: 1px 8px 0 10px;
		color: #ffffff;
		text-shadow: 0 -1px #767676;
		filter: Shadow(Color=#767676,Direction=-45,Strength=1);
	}
	
	div#stats ul li#html_css {
		width: 99%;
		background-color: #3d3d3d;
	}

	div#stats ul li#html_css span {
		text-shadow: 0 -1px #585858;
		filter: Shadow(Color=#585858,Direction=-45,Strength=1);
	}
	
	div#stats ul li#js_jquery {
		width: 90%;
		background-color: #636363;
	}

	div#stats ul li#js_jquery span {
		text-shadow: 0 -1px #828282;
		filter: Shadow(Color=#828282,Direction=-45,Strength=1);
	}
	
	div#stats ul li#wordpress {
		width: 87%;
		background-color: #797979;
	}

	div#stats ul li#wordpress span {
		text-shadow: 0 -1px #a4a4a4;
		filter: Shadow(Color=#a4a4a4,Direction=-45,Strength=1);
	}

	div#stats ul li#creative_suite {
		width: 97%;
		background-color: #4f4f4f;
	}

	div#stats ul li#creative_suite {
		text-shadow: 0 -1px #757575;
		filter: Shadow(Color=#757575,Direction=-45,Strength=1);
	}

	div#stats ul li#flash_actionscript {
		width: 80%;
		background-color: #919191;
	}

	div#stats ul li#flash_actionscript span {
		text-shadow: 0 -1px #bdbdbd;
		filter: Shadow(Color=#bdbdbd,Direction=-45,Strength=1);
	}



/*                                            CONTACT FORM
__________________________________________________________
*/

	div#contact {
		min-height: 300px;
	}
	
	div#contact_form {
		margin: 10px auto;
		width: 826px;
	}
	
	div#contact_form label input {
		padding: 6px;
		margin: 2px 10px 12px 0;
		width: 393px;
		float: left;
		font: 15px Verdana, Arial, Helvetica, sans-serif;
		color: #707070;
		border-top: 2px solid #959595;
		border-right: 1px solid #c3c3c3;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #c3c3c3;
	}
	
	div#contact_form label input.second {
		margin-right: 0;
	}
	
	div#contact_form label textarea {
		padding: 6px;
		margin: 2px 10px 14px 0;
		width: 810px;
		height: 250px;
		font: 15px Verdana, Arial, Helvetica, sans-serif;
		float: left;
		color: #707070;
		border-top: 2px solid #959595;
		border-right: 1px solid #c3c3c3;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #c3c3c3;
	}

	div.error, div#success {
		width: auto;
		height: auto;
		margin: 12px 0;
		padding: 3px 0 2px 12px;
	}
	
	div#success strong {
		font-weight: bold;
	}
	
	#form_contain button {
		height: 35px;
		width: 130px;
		display: block;
		border: none;
		background: transparent url(../img/btn-sendmsg.png) no-repeat;
		background-position: top center;
	}
	
	#form_contain button:active {
		background-position: bottom center;
		outline: none;
	}
	
	#form_contain button span {
		display: none;
	}


/*                                                  EXTRAS
__________________________________________________________
*/
	
	div#extras {
		background-position: 0 192px;
		min-height: 135px;
	}

	div#social {
		width: 400px;
		padding: 15px 0 12px 18px;
		margin: 60px auto 0;
	}

	div#social ul {
		margin: 0 auto;
	}

	div#social ul li {
		list-style: none;
		display: block;
		float: left;
		height: 45px;
		padding-right: 18px;
		margin: 0 auto;
	}
	
	div#social ul li a {
		border: none;
	}

	p#copyright {
		text-align: center;
		font-size: 12px;
		color: #404040;
	}

/*                                                  SLIDE
__________________________________________________________
*/

	#slider{
		border: 6px solid #8acae4;
		background: #ffffff;
	}
	
	#slider h2{ 
		font-size:160%;
		font-weight:normal;
	}
		
	#slider li h2{ 
		margin:0 20px;
		padding-top:20px;
		}	
	#slider li p{ 
		margin:20px;
		}

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:850px;
		height:300px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}
	
	#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ 
	display:block;
	margin:0;
	overflow:hidden;
	text-indent:-8000px;		
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:-160px;
	}	
	#nextBtn, #nextBtn2{ 
	left:696px;
	}														
	#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{  
	display:block;
	width:30px;
	height:77px;
	background:url(img/banner/btn_prev.gif) no-repeat 0 0;	
	}	
	#nextBtn a, #nextBtn2 a{ 
	background:url(img/banner/btn_next.gif) no-repeat 0 0;	
	}								

/*                                                  SLIDE
__________________________________________________________
*/

	div#jord{
	height: 158px;
	background: #ffffff url(../img/bg-bottom.jpg) repeat-x center;
	}