﻿/****************************************************************************/
/*********************** BARIS OZTEKIN / 2009 *******************************/
/***************** http://www.barisoztekin.com/blog**************************/
/****************************************************************************/
/****************************************************************************/
/*********************CSS RESET / Eric Meyer's ******************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
/****************************************************************************/
body
{
	font-family:"Trebuchet MS", "Lucida Grande","Lucida Sans Unicode","Arial", sans-serif;
	background-color:#c5cad1;
}
/****************************************************************************/
.header
{
	background:url(../images/bck_header.jpg) center;
	background-color:black;
	height:150px;
}
.headerContainer
{
	margin:auto;
	width:960px;
	position:relative;
	overflow:auto;
}
.headerContainer #twitter
{
	width:680px;
	float:left;
	padding:10px;
}
.headerContainer #twitter div
{
	width:480px;
	height:70px;
	margin-left:196px;
	margin-top:30px;
	font-size:18px;	
	color:#8c9197;
	color:#55595e;
}
.headerContainer #twitter div img
{
	display:none;
}
.headerContainer #twitter div a
{
	color:#0faff8;
	text-decoration:none;
}

.headerContainer #socialLinks
{
	width:240px;
	float:right;
	padding:10px;
	padding-right:1px;
	text-align:right;
}

.headerContainer #socialLinks ul
{
	margin-top:36px;
}
.headerContainer #socialLinks ul li
{
	display:inline;
}


.container
{
	
	width:960px;
	margin:auto;
	overflow:auto;
	min-height:540px;
	background:url(../images/bck_container.jpg) no-repeat ;
	position:relative;
/*	border-bottom:1px solid gray;*/
}
.headerOpener
{
	height:23px;
	position:absolute;
	right:12px;
	top:-3px;
}
.headerOpener img
{
	cursor:pointer;
}

.contentHeader
{
/*	color:#515457;
	padding-left:150px;
	padding-top:16px;*/
	text-indent:-999px;
}
/****************************************************************************/
#menu
{
	position:absolute;
	top:149px;
	left:0px;

}
#menu ul 
{
	width:192px;
}
#menu ul li
{
	margin-bottom:4px;
/*	background-color:aqua;*/
}
#menu ul li a
{
/*	background-color:aqua;*/
	display:block;
	text-indent:-200px;
	height:43px;
}

/***********************************************************/
.m01
{
	background:url('../images/m01.png') no-repeat;
	background-position:0% 0%;
}
.m01:hover
{
	/*background:url('../images/m01over.png') no-repeat;*/
	background-position:0% -43px;
	
}
.m01Selected
{
	background:url('../images/m01.png') no-repeat;
	background-position:0% 100%;
	cursor:default;
}

.m02
{
	background:url('../images/m02.png') no-repeat;
	background-position:0% 0%;
}
.m02:hover
{
	background-position:0% -43px;
}
.m02Selected
{
	background:url('../images/m02.png') no-repeat;
	background-position:0% 100%;
	cursor:default;
}


.m03
{
	background:url('../images/m03.png') no-repeat;
	background-position:0% 0%;
}
.m03:hover
{
	background-position:0% -43px;
}
.m03Selected
{
	background:url('../images/m03.png') no-repeat;
	background-position:0% 100%;
	cursor:default;
}

.m04
{
	background:url('../images/m04.png') no-repeat;
	background-position:0% 0%;
}
.m04:hover
{
	background-position:0% -43px;
}
.m04Selected
{
	background:url('../images/m04.png') no-repeat;
	background-position:0% 100%;
	cursor:default;
}




/****************************************************************************/
.footer
{
	width:960px;
	margin:auto;
	margin-top:30px;
	margin-bottom:10px;	
/*	border-top:1px solid #808080;*/
	color:#3d3c3c;
	font-size:11px;
	padding-left:206px;
	text-align:center;
/*	padding-right:530px;*/
/*	background: url(../images/bck_footer.jpg) center no-repeat;*/
/*	height:80px;*/
}

/***************************************************************************************************************/
/* ---------- Portfolio ---------- */
#works {
	
/*	height: 500px;*/
	width: 740px;
	/*background: url(../obrazy/portfolio.jpg);*/
	position: relative;
	margin-top: 82px;
	margin-left:220px;
}
#featured
{
	position:absolute;
	z-index:90;
	right:0;
	top:-1px;
}
#slider {
	position: relative;
	overflow: hidden;
	width: 740px;
	height: 390px;
	margin-left: auto;
	margin-right: 0;
}
#slider ul {
	position: absolute;
	list-style: none;
	top: 0px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 960px;
/*	height: 400px;*/
}
#slider li {
	width: 960px;
/*	height: 400px;*/
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}
#slider li div {
/*	background: url(../images/transparent.png) repeat-y left;*/
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 10px;
/*	margin-left:424px;*/
	margin-left:210px;	
}
#slider li div {
	background: none;
/*	background: url(../images/transparent.png) repeat-x;*/
	background: url(../images/iteminfo.png) no-repeat;
	margin-bottom:5px;
	color:white;
	color:gray;
	font-size:12px;	
	padding-left:50px;
}
#slider li div h2 {
	margin: 0;
	padding: 0;
/*	letter-spacing: -0.05em;*/
	color:black;
	color:#50a2c8;
	font-size:14px;
}
#slider li div h2 img
{
	position:absolute;
	margin-left:234px;
	

}
#mask
{
	position:absolute;
	z-index:99;
}

.paging {
	float: left;
/*	margin:0;*/
	margin-left:-6px;
/*	margin-top:10px;*/
	margin-top:-22px;
	padding: 0;
}
.paging li {
	float: left;
	cursor: pointer;
/*	padding: 0 2px;*/
/*	background: transparent;*/
/*	background-color:#d0d5dc;*/
/*	border: 1px solid silver;*/
/*	margin: 2px 4px 0 0;*/
	text-align: center;
/*	color: #666666;*/
	color:#8c9094;	
/*	font-size:12px;*/
	font-size:54px;

}
.paging:hover li {
/*	color: #CCCCCC;*/
/*	background: #666;*/
/*	border: 1px solid #999;*/
}
.paging li:hover {
/*	background: #777;*/
/*	border: 1px solid #bbb;*/
/*	color: #FFFFFF*/
	color:#8d0c1c;
	color: #333;	

}
li.current, .paging:hover .current {
/*	border: 1px solid #ccc;*/
/*	background: #888;*/
/*	color: #F4F4F4;*/
/*	color:#509cc0;*/
	color:#4e9cc3;

}


#arrow_left
{
	position:absolute;
	top:168px;
	z-index:100;
	cursor:pointer;
}
#arrow_right
{
	position:absolute;
	top:168px;
	right:0;
	z-index:101;
	cursor:pointer;
}

/*******************************************************************************/
#about{
	
/*	height: 500px;*/
	width: 760px;
	height:448px;
	position: relative;
	margin-top: -10px;
	margin-left:200px;
	margin-bottom:94px;
	text-indent:-999px;
	background:url(../images/me.png);
}
#about h2
{
	color:#373738;
	color:#6c6c6c;
	font-size:20px;
}

/****************************************************************************/
#contact{
	
/*	height: 500px;*/
	width: 760px;
	height:448px;
	position: relative;
	margin-top: -10px;
	margin-left:200px;
	margin-bottom:94px;	
/*	text-indent:-999px;*/
	background:url(../images/contact.png) no-repeat;
}
#mailMe
{
	width:146px;
	text-decoration:none;
/*	background-color:aqua;*/
	position:absolute;
	left:135px;
	top:188px;
}
#contact #contactFormOpener
{
	position:absolute;
	right:35px;
	top:226px;
	cursor:pointer;
	
}
#contactFormContainer
{
	width: 760px;
	height:448px;
	position: absolute;
	background:url(../images/form.png) no-repeat;

}
#contactFormContainer #closeForm
{
	position:absolute;
	right:15px;
	top:142px;
	cursor:pointer;
}

#contactFormContainer table
{
	margin-top:181px;
	margin-left:158px;


		
}
#contactFormContainer #form_name,#form_email,#form_web
{
	width:210px;
	height:26px;
	background:url();
	border:none;
	padding:4px;
}

#contactFormContainer input:focus
{
	color:#2569d0;
}
#contactFormContainer textarea:focus
{
	color:#2569d0;
}

#contactFormContainer #form_email
{
	margin-top:2px;
}
#contactFormContainer #form_web
{
	margin-top:2px;
}
#contactFormContainer #form_message
{
	vertical-align:top;
	background:url();
	height:96px;
	margin-left:117px;
	margin-top:-2px;
	width:210px;
	padding:4px;
	border:none;
}
#contactFormContainer #form_send
{
	float:right;
	background:url();
	border:none;
	margin-top:12px;
	width:116px;
	height:24px;
	cursor:pointer;
}
/****************************************************************************/
#boxes
{
/*	width: 741px;*/
	height:134px;
	background:url(../images/bck_boxes.png) no-repeat;
	margin-top: 60px;
	margin-left:219px;
}
#box1
{
	float:left;	
	width:218px;
	padding:8px;
	padding-top:34px;	
	display:inline-block;
	font-size:11px;
}
#box1 h2
{
	color:#03d3f9;
	font-size:12px;
}
#box1 p
{
	color:silver;
}
#box2
{
	float:left;
	width:234px;
	display:inline-block;
	margin-left:19px;	
	padding-top:34px;
	position:relative;
}
#box2 #loading
{
	position:absolute;
	z-index:1;
	top:55px;
	left:45px;
	
}
#box2 ul
{
	width:234px;
}
#box2 ul li 
{
	font-size:11px;
	border-bottom:1px dotted gray;
	padding:2px 10px;
}
#box2 ul li:hover
{
	background-color:white;
}
#box2 ul li a
{
	text-decoration:none;
	display:block;
	color:#090909;
	color:silver;
	padding:2px 0;
}
#box2 ul li a:hover
{
	color:#010101;
}
/***************************************************/
#listed
{
	width:960px;
	margin:auto auto;
	position:relative;
	padding-top:20px;
}
#listed ul
{
	margin-left:220px;
	background:url('../images/list/listedOn.png') no-repeat;
	padding-left:80px;
	
}
#listed ul li
{
	display:inline;
}
