/* SCROOLABLE*/
/* root element for scrollable */
.vertical {  
	
	/* required settings */
	position:relative;
	overflow:hidden;
	top: 30px;
	/* vertical scrollers have typically larger height than width */	
	height: 210px;	 
	width: 530px;

}

/* root element for scrollable items */
.items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0 0 0 10px;
	width: 500px;
	left: 30px;
}

/* single scrollable item */
.item {
	margin: 0 0 50px 0px;
	font-size:12px;
	height:180px;
	padding: 10px 10px 0 10px;
}

/* elements inside single item */
.item img {
	float:left;
	margin-right:20px;
	height:180px;
	width:240px;
}

.item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#456;
	font-weight:normal;
}

/* the action buttons above the scrollable */
.actions {
	width:100px;
	height: 230px;
	margin:0px 0 10px 0;
	position: relative;
	z-index: 100000;
	top: 30px;
	left: 11px;
	float: right;
}

.actions a {
	font-size:11px;		
	cursor:pointer;
	color:#666;
}

.actions a:hover {
	text-decoration:underline;
	color:#000;
}

.disabled {
	visibility:hidden;		
}

.prev {width: 60px;height: 60px; margin: 0px 0 20px 0px;top: 30px;left: 11px;background: url(../images/overlay_toparrow.jpg) no-repeat 0 0; display: block;}
.next {width: 60px;height: 60px; margin: 40px 0 0 0;position: relative;top: 58px; background: url(../images/overlay_downarrow.jpg) no-repeat 0 0; display: block;}	
.next:hover {background: url(../images/overlay_downarrow.jpg) no-repeat 0 -60px;}
.prev:hover {background: url(../images/overlay_toparrow.jpg) no-repeat 0 -60px;}

/* SCROOLABLE END*/



/*
Main CSS
Creator: Dobromir Nikolov Ivanov
Last Update: 21.05.2010
*/
@font-face {
       font-family: Calibri;
       src: local("Calibri"), url("../fonts/calibri.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
}
body {background: black; margin: 0px; padding: 0px; color: white; font-family: Calibri, sans-serif;}
#bg_gradient {background: url(../images/bg.png) repeat-x; height: 768px; margin: 0px; padding-top: 0px; display: none; }
img {border: 0;}
#container {background: url(../images/main5.png) no-repeat; width: 1024px; height: 768px; margin: 0 auto; }
#container_pf {background: url(../images/main4.png) no-repeat; width: 1024px; height: 768px; margin: 0 auto; }
#heading { margin: 0 auto; width: 700px; padding-top: 50px;}
#heading h1 {font-size: 20pt; margin: 0; padding: 0;text-shadow: 0px 1px 1px #000; line-height: 19px; float: left; }
#heading h1 a {color: white; text-decoration: none;}
#heading h1 span {font-size: 11pt;  margin: 0; padding: 0; text-shadow: 0px 1px 1px #000; padding-left: 28px; }
#heading h1 span a:hover {text-decoration: underline;}
#heading span a {color: white;}
#heading span {font-size: 11pt; font-weight: strong;  margin: 0; padding: 0; text-shadow: 0px 1px 1px #000; }
a {text-decoration: none;}
a:link {color: #31D3E6; text-decoration: none;}
a:visited {color: gray;}
a:hover {color: #95f4ff;text-decoration: underline;}
a:active {color: red;}
#copyright {font-size: 12px; color:#545454; margin: 0 auto; text-align: center; position: relative; top: 75px; font-family: Verdana; line-height: 15px; font-weight: bold; width: 400px;}
#copyright span {font-size: 10px; font-weight: normal;}
#copyright a:link {color: #545454;}
#copyright a:visited{color: #545454;}
#copyright a:hover {color: #999;}
#copyright a:active {;}
.arrows {display: block; float: left;}
#loader {background: #000; width: 100%; height: 650px;}
#indexFrame { margin:0 auto;	width:568px; height:274px; position: relative; top: 0px; left: 5px;	background: url(../images/indexbg.png) no-repeat 0 0;}
#blog_sc {text-shadow: 0px 1px 1px #000; width: 333px; height: 126px; margin: 0px 0 0 15px;}
#blog_sc .post h3 {font-size: 14px; margin: 0; padding: 0;}
.entry {font-size: 12px; }
.entry a {color: #31d3e6;}
.post .storytitle a {color: #31d3e6;}
.index_post .storytitle {font-style: italic;}
#blog_sc h3, #work_sc h3 {font-size: 14px; margin: 5px 0px 0 0px; padding: 0px 0 0 0;font-style: strong; }
#blog_sc p a {color: #31d3e6;}
#blog_sc p a:hover {color: #fff;}

#work_sc {text-shadow: 0px 1px 1px #000; width: 333px; height: 126px; margin: 0px 0 0 15px;}
#work_sc p { margin: 8px 0 0 0px; font-size: 14px;}
#work_sc img {position: relative; top: -15px;}
#twitter_sc{text-shadow: 0px 1px 1px #000;height: 200px; width: 200px; float: right; margin: 5px 0 0 0px;position: relative; left: 6px;}
.twtr-ft div {display: none;}
.twtr-bd {margin-top: -10px;}

/*Portfolio Style*/
.slide {font-size: 14px;}
.slide strong {font-weight: bold;font-size: 16px;margin: 0px 0 5px 0px;position: relative; left: -10px;}
.slide h4 {font-weight: bold;font-size: 16px; margin: 30px 0 -5px 0px;}

/*Portfolio Style END*/

/* Jquery Tooltips*/
.tooltip { display: none;  background: url(../images/tooltip.png); font-size:12px; height:36px; width:102px;  color:#fff; margin: 20px 0 0 0; text-align: center; font-size: 14px; font-weight: bold; padding-top: 4px;
}
/*Jquery Tooltips END*/
/*About.php*/
#me {width: 567px; height: 280px; position: relative; top: 9px; left: 86px; text-shadow: 0px 1px 1px #000;}
#me p {margin: 0 0 0 0; padding: 20px 0 0 0; text-shadow: 0px 1px 1px #000; font-size: 15px;}
#me p a {color: #31D3E6;font-weight: bold;}
#me p a:hover {color: #95f4ff;}
#iread { width: 265px; height: 120px; float: left; margin: -40px 0 0 0px;}
#iknow { width: 265px; height: 120px; float: left;margin: -40px 0 0 27px;}
ul li {margin: 0px 0 0 0; padding: 3px 0 0 0; font-size: 12px;}
ul {list-style: none; margin: 10px 0 0 0; padding: 0 0 0 0;}
input,a,textarea {outline: none;}
.input_1st {background: url(../images/input_rcorners.png) no-repeat 0 0;width: 11px; height: 29px; float: left;}
.input_mid {background: url(../images/input_middle.gif) repeat-x; float:left;position: relative;z-index: 24;height: 29px;padding: 4px 0 0 0; width: 110px;text-align: center; border: 0;}
.input_mid a {color: #fff;}
.input_last {background: url(../images/input_rcorners.png) no-repeat -11px 0;width: 11px; height: 29px; float: left;position: relative;z-index:25;left: 0px;}
#code_table, #design_table {width: 210px; margin: -10px 0 0 0;}
#read_links {margin: -30px 0 0 0;}
#code_table img, #design_table img { float: right;margin: 0 0 0 5px;}
/*About.php ...*/

/*Contact.php*/
#message {float:left; width: 400px; height: 280px; margin: 10px 0 0px 85px;}
#message h4 {margin: 0 0 0 0; padding: 0 0 0 0; text-align: center;font-weight: normal; text-shadow: 0px 1px 1px #000;}
#message table {margin: 20px 0 0 10px;}
#message table td {border: 0;}
#message .input_mid {text-align: left;font-size: 14px;color: #496473; text-shadow: 0px 1px 1px #000;}
#message textarea {font-size: 14px; color: #496473; text-shadow: 0px 1px 1px #000;}
#message .send_buttons {background: url(../images/form_button.png) no-repeat 0 0;height: 29px; width: 93px;border: 0;margin: -20px 0 0 8px;padding: 0 0 4px 0; font-size: 14px; color: white; text-shadow: 0px 1px 1px #000;}
#social_background {float:left;width: 200px; height: 280px; border: 0; margin: 9px 0 0 -2px;background: url(../images/contact_divider.jpg) no-repeat 0 0;}
#social_placement {margin: 36px 0 0 24px;}
#facebook, #twitter, #linkedin, #digg, #gtalk, #edno23, #vimeo, #skype {display: block;  float: left; text-decoration: none;}
#facebook {background: url(../images/soc_sprite.jpg) no-repeat 0 0; width: 71px; height: 54px;}
#facebook:hover {background: url(../images/soc_sprite.jpg) no-repeat -71px 0px; width: 71px; height: 54px;}
#twitter {margin-left: 4px;background: url(../images/soc_sprite.jpg) no-repeat -142px 0; width: 72px; height: 54px;}
#twitter:hover {background: url(../images/soc_sprite.jpg) no-repeat -214px 0px; width: 72px; height: 54px;}
#linkedin {background: url(../images/soc_sprite.jpg) no-repeat 0px -54px; width: 71px; height: 55px; position: relative; top: -9px;}
#linkedin:hover {background: url(../images/soc_sprite.jpg) no-repeat -71px -54px; width: 71px; height: 55px;}
#digg {margin-left: 4px;background: url(../images/soc_sprite.jpg) no-repeat -142px -54px; width: 72px; height: 55px;position: relative; top: -9px;}
#digg:hover {background: url(../images/soc_sprite.jpg) no-repeat -214px -54px; width: 72px; height: 55px;}
#gtalk {background: url(../images/soc_sprite.jpg) no-repeat 0px -109px; width: 71px; height: 54px; position: relative; top: -19px;}
#gtalk:hover {background: url(../images/soc_sprite.jpg) no-repeat -71px -109px; width: 71px; height: 54px;}
#edno23 {margin-left: 4px;background: url(../images/soc_sprite.jpg) no-repeat -142px -109px; width: 72px; height: 54px;position: relative; top: -19px;}
#edno23:hover {background: url(../images/soc_sprite.jpg) no-repeat -214px -109px; width: 72px; height: 54px;}
#vimeo {background: url(../images/soc_sprite.jpg) no-repeat 0px -163px; width: 71px; height: 55px; position: relative; top: -28px;}
#vimeo:hover {background: url(../images/soc_sprite.jpg) no-repeat -71px -163px; width: 71px; height: 55px;}
#ebutton {position: relative; top:-20px;left: 55px;}
#skype {margin-left: 4px;background: url(../images/soc_sprite.jpg) no-repeat -142px -163px; width: 72px; height: 55px;position: relative; top: -28px;}
#skype:hover {background: url(../images/soc_sprite.jpg) no-repeat -214px -163px; width: 72px; height: 55px;}
/*Contact.php ...*/

/*Twitter Feed style*/
#twitter_feed {width: 180px;}
#twitter_feed h2 {font-size: 16px; font-style: italic; margin: 5px 0 -8px 3px;}
#twitter_feed ul li {border-bottom: 1px dotted white; padding: 5px 2px 5px 2px;}
#twitter_feed ul li.lastTweet {border: 0;}

/*Twitter Feed style END*/

/*BLOG style*/
#blog_content {float: left; width: 380px; height: auto; margin: -10px 0 0 161px; }
#sidebar{float: right; width: 145px; height: 600px; margin: 0 160px 0 0px; }
#BlogFrame {	margin:0 auto; width:872px; height:664px;	position: relative;	top: 9px; left: 5px; background: url(../images/blog_bg.jpg) no-repeat 0 0;}
.post { width: 370px; height: 126px;background: url(../images/post_bg.png) no-repeat 0 0; margin: 18px 0 -10px 0px; padding: 0 0px 0 5px;}
#blog_copyright {font-size: 12px; color:#545454; margin: 0px auto; text-align: center; position: relative; top: 0px; font-family: Verdana; line-height: 15px; font-weight: bold; width: 909px; height: 44px; background: url(../images/blog_footer.jpg) no-repeat 0 0; padding-top: 7px;}
#blog_copyright span {font-size: 10px; font-weight: normal;}
#blog_copyright a:link {color: #545454;}
#blog_copyright a:visited{color: #545454;}
#blog_copyright a:hover {color: #999;}
#blog_copyright a:active {;}
#new_old_posts {margin: 15px auto; width: 320px; }
.post_title, #category h3, #tags h3 {text-shadow: 0px 1px 1px #000; font-size: 16px; font-weight: strong; font-style: italic; padding: 5px 0 0 5px;}
.post_title a {color: white;}
#category h3 { margin: 8px 0 0 0px;}
.post_content {font-size: 12px; margin: 0 0 0 0px; padding: 0 10px 0 0px; text-shadow: 0px 1px 1px #000;}
.post_content_main, p {font-size: 14px; margin: 15px 0 10px 0px; padding: 0 10px 0 0px; text-shadow: 0px 1px 1px #000;}
.tags, .publish_date {font-size: 12px; margin: 0px 0 0 0px;position: relative; top: -10px; padding: 0 0 0 5px;}
.publish_date {float: right; padding: 0 15px 0 0px;}
.thumb {margin: -10px 10px 0 10px; padding: 0 0 0 0px;} /*Tova e class za image thumbovete*/
#category ul { margin: 5px 0px -10px 25px; list-style: circle; }
#category a {text-decoration: none;}
#category a:link {color: white; text-decoration: none;}
#category a:visited {color: gray;}
#category a:hover {color: #31D3E6;text-decoration: underline;}
#category a:active {color: red;}
#tags a {font-size: 12px;}
#tags h3 {margin: 20px 0 0 0px;}
#tags_container {margin: 0 0 0 10px; display: block;}

/** post style **/
#posttop { background: url(../images/post_top.png) no-repeat; height: 16px; width: 370px; position: relative; z-index: 1; }
#postmid { background: url(../images/post_mid.png) repeat-y; width: 370px; margin-top: 0; }
#postbot { background: url(../images/post_bottom.png) no-repeat; height:16px; width:370px; }
#post_cont, #posttop h3 {padding: 5px;}
/** post style END **/

/*COMMENTS style*/
.comments {color: #919191;}
.comment_text {border-bottom: 1px dotted white;margin: 10px 0 0 0px; padding: 5px;}
#name,#email,#website, .submit, #comment {text-align: center; color: #7d96a4; text-shadow: 0px 1px 1px #000;margin: 0 0 10px 0px;}
#name {width: 348px; height: 41px; background: url(../images/comment_input.jpg)no-repeat 0 0; border: 0;}
#email {width: 348px; height: 41px; background: url(../images/comment_input.jpg)no-repeat 0 0; border: 0;}
#website {width: 348px; height: 41px; background: url(../images/comment_input.jpg)no-repeat 0 0; border: 0;}
#comment {width: 348px; height: 152px; background: url(../images/comment_textarea.jpg)no-repeat 0 0; border: 0; padding: 5px; text-align: left;}
.submit {width: 348px; height: 41px; background: url(../images/comment_submit.jpg)no-repeat 0 0; border: 0;}
.submit:hover {background: url(../images/comment_submit.jpg)no-repeat 0 -41px;}
/*COMMENTS style END*/
/*BLOG style END*/











/* OVERLAY STYLES*/
	/* some styling for triggers */
	#triggers {
		text-align:center;
	}

	#triggers img {
		cursor:pointer;
		margin:0 5px;
		background-color:#fff;
		border:1px solid #ccc;
		padding:2px;

		-moz-border-radius:4px;
		-webkit-border-radius:4px;

	}

/* the overlayed element */
.apple_overlay {
	
/* must be initially hidden */
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/overlay.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(../images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
/* OVERLAY STYLES END*/