/* CSS 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,
b, u, i, center,
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-size: 100%; vertical-align: baseline; background: transparent; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
textarea { overflow: auto; }
textarea, input[type=text] { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

/*STYLE */

body { background: url(../images/bg.jpg) repeat; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #545454; line-height: 20px; position: relative }
img { border: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: #0d77d2; text-decoration: none; }
i { color: #8a8a8a; font-style: italic; display: block; padding: 4px 0 14px 0; background: url(../images/hr.gif) 0 100% repeat-x; }
p { margin: 0; padding: 0; }
:focus { outline: 0; }


/* + Heading + */
h1 { font-size: 26px; margin: 0; padding: 18px; }
h2 { font-size: 22px; margin: 0; padding: 0; }
h3 { font-size: 20px; margin: 0; padding: 0; }
h4 { font-size: 18px; margin: 0; padding: 0; }
h5 { font-size: 16px; margin: 0; padding: 0; }
h6 { font-size: 14px; margin: 0; padding: 0; }


/* + Font Barve + */
.blue { color: #0D77D2; }
.red { color: #cd2c65; }
.white { color: #ededed; }
.sea { color: #1c7a74; }
.lsea { color: #a2bacb; }
.italic { font-style: italic; }
.clear { clear: both; }
.hr { height: 2px; width: 100%; background: url(../images/hr.gif) 0 0 repeat-x; }


/* + Containers + */
.container_bg { height: 56px; background: url(../images/footerbg.gif) 0 0 repeat-x; clear: both; }
.container_bgs { height: 56px; background: url(../images/footerbg.gif) 0 0 repeat-x; clear: both; margin-bottom: 45px; }
.container { margin-bottom: 50px; }
.container_tabs { width: 949px; margin: auto; position: relative; overflow: hidden; }
.footer_container { padding: 0; }
.container, .footer_container, #testapp, #toolbar, .container_3d { width: 950px; margin: auto; position: relative; }
.container .imcon { position: relative; display: block; margin: 0 0 25px 0; }

/* + HEADER + */

#header { height: 115px; background: url(images/topbg.gif) 0 0 repeat-x; position: relative; }
.logo { margin: 36px 0 0 0; width: 400px; height: 50px; position: absolute; }

ul#nav { padding: 5px; margin: 40px 0; list-style: none; float: right; z-index:200; }
ul#nav li { float: left; display: inline; margin: 0 5px; position: relative; }
ul#nav li a { text-decoration: none; float:left; color: #646464; font-weight: bold;	text-transform: uppercase; font-size: 11px; display: block; }
ul#nav li a span { margin: 0 10px 0 -10px; padding: 4px 8px 4px 18px; position: relative; float:left; }
ul#nav li a.active, ul#nav li a:hover {	background: url(../images/buttons_sprite.png) no-repeat top right; color: #ffffff; font-weight: bold; }
ul#nav li a.active span, ul#nav li a:hover span { background: url(../images/buttons_sprite.png) no-repeat top left; font-weight: bold; }


/* MENU */

.dd { padding: 5px 0 0 5px; margin: 40px 0; list-style: none; float: right; z-index: 200; }
.dd ul { margin-right: -5px; padding: 0; }
.dd ul li { position: relative; display: inline; float: left; margin: 0 5px; }
.dd ul li a { display: block; color: #646464; font-weight: bold; text-transform: uppercase; font-size: 11px; text-decoration: none; float: left; }
* html .dd ul li a { display: inline-block; }
.dd ul li a span { margin: 0 10px 0 -10px; padding: 4px 8px 4px 18px; position: relative; float:left; }
.dd ul li .active, .dd ul li a:hover, .dd ul li:hover { background: url(../images/buttons_sprite.png) no-repeat top right; font-weight: bold; }
.dd ul li .active span, .dd ul li a:hover span, .dd ul li:hover span { background: url(../images/buttons_sprite.png) no-repeat top left; font-weight: bold; color: #ffffff; }


/* + Okviri Slik + */

.frame { position: absolute; background: url(../images/frame_b.png) no-repeat 0 0; left: 0; top: 0; width: 265px; height: 146px; }
.frame_m { position: absolute; background: url(../images/frame_content.png) no-repeat 0 0; left: 0; top: 0; width: 630px; height: 232px; }
.frame_l { position: absolute; background: url(../images/frame_large.png) no-repeat 0 0; left: 0; top: 0; width: 950px; height: 279px; }
.frame_3col { position: absolute; background: url(../images/frames/portfolio_3_columns.png) no-repeat 0 0; left: 0; top: 0; width: 290px; height: 180px; }
.frame_2col { position: absolute; background: url(../images/frames/portfolio_2_columns.png) no-repeat 0 0; left: 0; top: 0; width: 455px; height: 180px; }
.frame_content { position: absolute; background: url(../images/frames/content.png) no-repeat 0 0; left: 0; top: 0; width: 265px; height: 132px; }
.frame_tabs { position: absolute; background: url(../images/frames/tabs_frame.png) no-repeat 0 0; left: -17px; top: -10px; width: 982px; height: 421px; z-index: 2; }
.frame_content_slider { position: absolute; background: url(../images/frames/content_slider_frame.png) no-repeat 0 0; left: -17px; top: -10px; width: 982px; height: 374px; z-index: 2; }


/* + 3 Posti na prvi strani + */

.blocks { margin: 45px 0 0 0; }
.img { position: relative; display: block; width: 265px; height: 132px; margin: 16px 0 2px 0; }
.blocks p { padding: 16px 0; }
.block { float: left; display: block; width: 265px; margin-right: 77px; }
.block3 { margin: 0; }


/* + Leva stran - podstrani (blog) + */

.content { width: 630px; float: left; margin: 0 68px 0px 0; display: block; padding: 0; }
.content .line { margin: 25px 0; }
.content .last { padding-bottom: 0; margin-bottom: 0; background: none; }

/* - 2 inside blocks - */
.inside_blocks { padding: 0; }
.inside_blocks p { padding-top: 12px; }
.inside_blocks .left { display: block; float: left; width: 268px; margin-right: 62px; padding: 0 6px; }
.inside_blocks .right { display: block; float: right; width: 268px; padding: 0; }

/* - Socialne ikone - */
ul.social { display: block; position: absolute; right: 0; top: 2px; }
ul.social li { display: inline-block; margin-left: 6px; background: url(../images/social.png) no-repeat; }
ul.social li a { display: block; width: 16px; height: 16px; }
ul.social li.fb { background-position: 0 0; }
ul.social li.tw { background-position: 0 -17px; }
ul.social li.del { background-position: 0 -34px; }
ul.social li.fb:hover { background-position: 0 -59px; }
ul.social li.tw:hover { background-position: 0 -76px; }
ul.social li.del:hover { background-position: 0 -93px; }



/* + PAGINATION + */

.pagination, .pagination_content { margin: auto; width: 950px; text-align: center; }
.pagination_content { width: 630px; clear: both; }
ul.pages { /*display: inline;*/ }
ul.pages li.prev { margin-right: 20px; }
ul.pages li.next { margin-left: 20px; }
ul.pages li { display: inline-block; clear: both; margin: 0 4px; }
ul.pages li a { background: url(../images/buttons_sprite.png) no-repeat right -257px; float: right; height: 22px; display: block; }
ul.pages li a span { margin: 0 5px 0 -5px; padding: 0 3px 0 8px; position: relative; float: left; background: url(../images/buttons_sprite.png) no-repeat left -257px; color: #ffffff; text-transform: uppercase; font-size: 10px; line-height: 20px; font-weight: bolder; height: 22px; }
ul.pages li a:hover { background-position: right -279px; }
ul.pages li a:hover span { background-position: left -279px; }
ul.pages li .active { background-position: right -235px; }
ul.pages li .active span { background-position: left -235px; }

/* + SIDEBAR + */

.sidebar { float: left; width: 252px; }
.sidebar h4 { padding: 0px 0 25px 34px; background: url(../images/hr.gif) bottom left repeat-x; }
.sidebar .underline { background: url(../images/hr.gif) repeat-x 0 100%; }

/* - General widgets - */
.navigation, { margin-bottom: 40px; }

/* - Navigacija - */
.navigation { background: url(../images/icons/sidebar/categories.png) no-repeat 5px 0; }
.navigation li { display: block; width: 252px; background: url(../images/hr.gif) 0 100% repeat-x; font-size: 10px; font-weight: bold; text-transform: uppercase; } 
.navigation li a { display: block; color: #6f6d6d; padding: 8px 0 10px 30px; background: url(../images/sidebar-arrow.gif) no-repeat 12px 15px; }
.navigation li.active a { color: #0D77D2; background: url(../images/sidebar-arrow-active.gif) no-repeat 22px 15px; padding-left: 40px; }

/* + Footer BackGround + */

#bottom { background: url(../images/bottombg.jpg) 0 0 repeat; position: relative; clear: both; padding-bottom: 25px; }
#bottom .bg { background: url(../images/curves.gif) 0 0 repeat-x; height: 7px; margin: 0; }

/* + FOOTER + */

#footer { height: 56px; background: url(../images/footerbg.gif) 0 0 repeat-x; clear: both; }
#footer .copyright { color: #ebebeb; padding-top: 19px; display: block; float: left; }
#footer ul { display: block; float: left; padding: 18px 0 0 110px; }
#footer ul li { display: block; float: left; width: 22px; height: 22px; margin: 0 15px 0 0; }
#footer form { float: right; padding: 18px 0 0 61px; display: block; position: relative; }
#footer form input[type=text] { font-size: 11px; width: 210px; background: url(../images/footer-input.jpg) no-repeat; border: none; padding: 4px 5px 5px 5px; color: #838383; }
#footer form input[type=submit] { cursor: pointer; display: block; height: 22px; width: 27px; background-image: url(../images/footer-input-submit.jpg); background-repeat: no-repeat; border: none; position: absolute; right: 0px; bottom: 1px; cursor: pointer; }
#footer form label { color: #ebebeb; margin: 0 15px 0 0; }

/* LATEST Blog Posts Slider */

.latest { clear: both; height: 285px; position: relative; background: url(../images/latest_slider.png) repeat-x 0 -572px; margin: 0 auto 50px auto; padding: 0; }
.latest a.leftarrow { display: block; width: 23px; height: 285px; background: url(../images/latest_slider.png) no-repeat scroll 0 0 transparent; position: absolute; left: 0; top: 0; text-indent: -9999px; }
.latest a.leftarrow:hover { background: url(../images/latest_slider.png) no-repeat scroll -24px 0 transparent; } 
.latest a.rightarrow { display: block; width: 23px; height: 285px; background: url(../images/latest_slider.png) no-repeat scroll 0 -286px transparent; position: absolute; right: 0; top: 0; text-indent: -9999px; }
.latest a.rightarrow:hover { background: url(../images/latest_slider.png) no-repeat scroll -24px -286px transparent; }
.projects_wrapper { width: 950px; height: 285px; overflow: hidden; position: relative; left: 25px; }
#projects { display: block; position: relative; margin: 0; padding: /*25px*/ 9px 0 0 0; height: 285px; overflow: hidden; width: 950px }
#projects li { width: 265px; height: 285px; padding: 0 17px 0 18px; }
#projects li p { padding: 8px 0 0 0; }
#projects .name { color: #2778c4; font-size: 14px; text-decoration: none; padding: 16px 0 4px 0; display: block; font-weight: normal; margin: 0; }


/* - Preberi - */
.read { display: block; float: right; clear: both; }
.read a { background: url(../images/buttons_sprite.png) no-repeat right -29px; float: right; height: 26px; display: block; }
.read a span { margin: 0 10px 0 -10px; padding: 0 8px 0 18px; position: relative; float: left; background: url(../images/buttons_sprite.png) no-repeat left -29px; color: #ffffff; text-transform: uppercase; font-size: 10px; line-height: 24px; font-weight: bolder; height: 26px; }
.read a:hover { background-position: right -55px; }
.read a:hover span { background-position: left -55px; }

/* - Blue Button- */
.bluebtn { display: block; z-index: 999; }
.bluebtn a { background: url(../images/buttons_sprite.png) no-repeat 100% -182px; float: right; height: 26px; display: block; }
.bluebtn a span { margin: 0 10px 0 -10px; padding: 0 5px 0 16px; position: relative; float: left; background: url(../images/buttons_sprite.png) no-repeat left -182px; color: #ffffff; text-transform: uppercase; font-size: 10px; line-height: 24px; font-weight: bolder; height: 26px; }
.bluebtn a:hover { background-position: 100% -208px; }
.bluebtn a:hover span { background-position: 0 -208px; }

/* + BLOG + */

.blog_info { background: url(../images/blog_info.png) 0 0 repeat-x; height: 28px; margin-bottom: 17px; font-size: 11px; }
.blog_info ul { }
.blog_info ul li { display: inline-block; padding: 3px 5px 0 20px; }
.blog_info ul li.author { background: url(../images/author.png) 0 9px no-repeat; width: 165px; }
.blog_info ul li.tags { background: url(../images/tags.png) 0 9px no-repeat; width: 300px; }
.blog_info ul li.comments { background: url(../images/comments.png) 0 9px no-repeat; width: 80px; }
.date { background: url(../images/date.png) no-repeat 0 0; position: absolute; top: -5px; left: -7px; width: 51px; height: 42px; }
.date .day { font-size: 20px; font-weight: bold; color: #fff; text-align: center; display: block; text-shadow: #000000 0 -1px 0; padding: 3px 6px 0 0; }
.date .month { color: #ffffff; text-shadow: #000000 0 -1px 0; font-size: 11px; font-weight: bold; display: block; padding: 0; text-align: center; margin: -6px 6px 0 0; }
.post { margin-bottom: 50px; }
.floating { }
.imgright { float: right; margin: 5px 0 0 15px; position: relative; }
.imgleft { float: left; margin: 5px 15px 0 0; position: relative; }
.name { font-size: 16px; margin: 0 0 16px 0; font-weight: bold; display: block; position: relative; padding-right: 50px; }
.date { background: url(../images/date.png) no-repeat 0 0; position: absolute; top: -5px; left: -7px; width: 51px; height: 42px; }
.date .day { font-size: 20px; font-weight: bold; color: #fff; text-align: center; display: block; text-shadow: #000000 0 -1px 0; padding: 3px 6px 0 0; }
.date .month { color: #ffffff; text-shadow: #000000 0 -1px 0; font-size: 11px; font-weight: bold; display: block; padding: 0; text-align: center; margin: -6px 6px 0 0; }