/** RESET STYLES (for resetting default values in different browsers) **/

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, dl, dt, dd,
 ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
}
:focus {
	outline: 0;
}

ol, ul {
	list-style: none;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/***** GENERAL STYLES ****/

body{
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#222;
overflow-x:hidden;
}

a{ color:#2bdb00; font-weight: bold; text-decoration: underline; }
a:hover{ color: #1c8f00; font-weight: bold; text-decoration:underline; }
h1 { margin-top: 5px; }
h2 { color: #000; font-size: 15px; font-weight: normal; padding-bottom: 20px; }
ul { padding-left: 13px; list-style-type: disc; }
td { padding-bottom: 10px; }
.signature { color: #555; font-size: 14px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; line-height: 39px; }
.img { color: #555; font-size: 13px; 
font-family: Georgia, "Times New Roman", Times, serif; 
font-style: italic; line-height: 39px; padding: 5px; border: solid 1px #ccc;
 -moz-border-radius: 5px;
  border-radius: 5px;
 }
img { 
 -moz-border-radius: 2px;
  border-radius: 2px;
 }
a img{  }
a:hover img { /* for IE */
  filter:alpha(opacity=85);
  /* CSS3 standard */
  opacity:0.85;}
/***** BACKGROUND IMAGE ****/

#homeBG{
background-image:url(../images/background.jpg);
background-position:top center;
background-repeat:repeat-x;
}

#otherBG{
background-image:url(../images/background2.jpg);
background-position:top center;
background-repeat:repeat-x;
}

/***HOLDS ALL IN THE MIDDLE***/

#holder{
width:960px;
margin:0px auto;
position:relative;
padding-top:126px;
}

/***HEADER**/

h1#logo{
width:305px;
height:80px;
background-image:url(../images/logo.png);
position:absolute;
text-indent:-5000px;
left:10px;
top:26px;
}
h1 a { font-size: 15px; font-weight: normal; text-decoration: none; }
h1 a:hover { font-weight: normal; text-decoration: none; }
ul#meni{ position:absolute; width:600px; font-family:Arial, Helvetica, sans-serif; font-size:13px; left:452px; top:8px; }

ul#meni li{
display:block;
float:left;
}

ul#meni li a{ color:#ffffff; font-weight: normal; text-decoration:none; display:block; padding:50px 12px 0; height:69px; text-align:center; float:left; margin-right: 1px; }

ul#meni li a:hover, a#Aktivni{ background-image:url(../images/mouse-over.png); background-position:50% top; background-repeat:repeat-x; }

#rss{
position:absolute;
width:32px;
height:27px;
background-image:url(../images/rss-icon.png);
text-indent:-5000px;
top:50px;
left:910px;
}

/***HEADER WITH INTRODUCTORY TEXT***/

#top1{ width:900px; height:234px; background-image:url(../images/top.png); padding:45px 39px 0; color:#2c2c2c; font-size:13px; background-repeat: no-repeat; background-position: 0 1px; }

#top1 h1, #top2 h1{ color: #fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; text-transform: uppercase; margin-bottom:28px; }

#introText1{ color: #fff; font-size: 14px; line-height: 20px; width:430px; float:left; padding-right:40px; height:190px; }

#introText2{ color: #fff; width:430px; float:left; padding-right:40px; height:60px; }

#top1 img{
float:left;
}

#slogan{ color: #fff; font-family:Arial, Helvetica, sans-serif; clear:both; width:850px; font-size:16px; text-transform: uppercase; padding-top:12px; }
#slogan2 { color: #fff; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; padding-top: 15px; width: 850px; clear: both; }
#slogan3 { color: #fff; font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding-top: 13px; width: 850px; clear: both; }
#top2{
width:900px;
height:133px;
background-image:url(../images/top2.png);
padding:45px 30px 0 39px;
color:#2c2c2c;
font-size:13px;
background-repeat:no-repeat;
}

/** download and demo buttons**/

#butons{
width:260px;
position:absolute;
top:240px;
left:628px;
}

#dwnl{
background-image:url(../images/download.gif);
width:122px;
height:37px;
text-indent:-5000px;
display:block;
float:left;
margin-right:10px;
}

#demo{
background-image:url(../images/viewdemo.gif);
width:122px;
height:37px;
text-indent:-5000px;
display:block;
float:left;
}

/** porfolio and live chat buttons**/

a#completePort{
background-image:url(../images/complete-portfolio.png);
width:360px;
height:115px;
position:absolute;
text-indent:-5000px;
top:152px;
left:530px;
}

a#liveChat{
background-image:url(../images/live-chat.png);
width:389px;
height:111px;
position:absolute;
text-indent:-5000px;
top:155px;
left:500px;
}

/** CONTENT **/
/** containers for content**/

#bottomholder1{ background-image:url(../images/bottom-holder-tile.gif); width:930px; float:left; padding-left:22px; background-position:left 50%; background-repeat:repeat-y; margin-left: -1px; }

#bottomholder2{
width:910px;
float:left;
padding-left:16px;
}

#bottomholder3{
background-image:url(../images/bottom-holder-tile-other.gif);
width:940px;
float:left;
margin:20px 0 30px;
}

#bottomholder3 div{
background-image:url(../images/bottom-holder-top.gif);
background-position:50% top;
background-repeat:no-repeat;
width:940px;
float:left;
}

#bottomholder3 div div{ font-size: 12px; line-height: 17px; background-image:url(../images/bottom-holder-bottom.gif); background-position:0 bottom; background-repeat:no-repeat; width:900px; padding:33px 45px 20px 33px; float:left; }

/**boxes with icons**/

.littleBox, #bottomholder3 div.littleBox{ width:260px; float:left; padding:26px 22px 13px 17px; font-size:13px; background-image:none; margin-top: 12px; }

#bottomholder3 div.littleBox{
width:180px;
padding:0 20px;
}

.littleBox h1, #bottomtext h1{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; font-weight:normal; line-height: 20px; text-transform: uppercase; margin-bottom:2px; }

.littleBox h1 span{ background-image:url(../images/dot1.gif); background-position:50% bottom; background-repeat:repeat-x; }

.littleBox h1 span.noLine{
background-image:none;
}

.littleBox h1 img{
margin-right:10px;
}

.divider, #bottomholder3 div.divider{
background-image:url(../images/divider.gif);
background-position:right;
background-repeat:no-repeat;
}

.more{
color:#2bdb00;
font-size:12px;
display:block;
margin-top:15px;
text-align:right;
}
.more:hover { color: #1c8f00; font-size: 12px; text-align: right; display: block; margin-top: 15px; }
/**containers for introdctory tex on About and Work **/

#topText{ background-image:url(../images/dot1.gif); background-position:50% bottom; background-repeat:repeat-x; padding-top:39px; font-size:12px; width:880px; padding-bottom:20px; padding-left: 20px; }

#topText p, #topText2 p{ margin-right: 20px; margin-bottom:20px; }
 
#topText2{ margin-left:8px; background-image:none; padding:39px 30px 0; font-size:12px; width:910px; }

/**containers with text on About page**/

#prvi{ font-size: 12px; width:270px; float:left; padding:30px 60px 50px 22px; }

#prvi h1, #news h1{
color:#000;
font-size:16px;
font-family:arial, Helvetica, sans-serif;
font-weight:normal;
margin-bottom:15px;
}

/**container with news **/

#news{ font-size: 12px; width:285px; float:left; padding:30px 50px 50px 0; }

#news div{ font-size: 12px; margin-bottom:30px; }

#news div span{
color:#000000;
}

#news div h1{
color:#008a41;
font-size:15px;
margin-bottom:10px;
}

/**toolboxon the About page**/

#toolbox{ font-size: 11.5px; width:175px; height:267px; background-image:url(../images/toolbox.gif); float:left; margin:30px 0 0 10px; text-align:left; }

#toolbox h1{
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
padding-top:15px;
}
#toolbox p { color: #555; padding-right: 13px; padding-left: 13px; }
#toolbox img{
display:block;
margin:5px auto;
}

#toolbox div{ text-align:left; }


/***three boxes on the Work page**/

dl.workStep{
width:226px;
height:225px;
background-image:url(../images/box.gif);
float:left;
}

dl.workStep dt{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#2c2c2c;
padding:10px 0 10px 15px;
}

dl.workStep dd{
padding-left:6px;
}

dl.workStep dd p{
padding:4px;
}

#bottomholder3 div.arrow{
padding:0px;
width:85px;
float:left;
height:40px;
margin-top:85px;
background-image:url(../images/arrow.gif);
background-repeat:no-repeat;
}

#bottomholder3 div#tockice{
padding:0px;
background-image:url(../images/dot1.gif);
background-position:bottom;
background-repeat:repeat-x;
height:40px;
margin-bottom:40px;
}

/***box with a form**/

#leftBox{ color: #000; background-image:url(../images/left-box.gif); width:524px; height:366px; float:left; margin-right:65px; margin-top:30px; margin-left: 1px; padding:26px 23px 0 36px; }

#leftBox li{ color: #000; margin-bottom:7px; }

.name{ color:#7a7a7a; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height: 23px; }
.contact-logo { color: #7a7a7a; font-size: 17px; font-family: Arial, Helvetica, sans-serif; line-height: 23px; margin-left: 15px; }
.big { color: #7a7a7a; font-size: 17px; font-family: Arial, Helvetica, sans-serif; line-height: 25px; }
.desc{
color:#2c2c2c;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

.frmItem{
border:1px solid #bfbfbf;
background-color:#e9e9e9;
width:430px;
margin-bottom:40px;
height:22px;
padding:4px;
}
/**box with the contact details**/

#rightBox{
width:284px;
height:342px;
background-image:url(../images/right-box.gif);
float:left;
margin-top:30px;
text-align:center;
padding:0 0 30px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:13px;
}

#rightBox p{ color: #000; margin-top:25px; }

/**bottom text container on the Home page **/

#bottomtext{ font-size: 12px; background-image:url(../images/shadow.gif); background-position:left 26px; background-repeat:no-repeat; width:810px; clear:both; padding:30px 30px 30px 50px; }

/**BOTTOM PART**/

/**social links **/
#socialize{
text-align:center;
padding:35px 0 20px ;
clear:both;
}

#topText h1, #topText2 h1{
color:#2bdb00;
font-size:16px;
font-family:arial, Helvetica, sans-serif;
font-weight:normal;
margin-bottom:15px;
}
#socialize h1, #recentClients h1 { color: #2bdb00; font-size: 14px; font-family: arial, Helvetica, sans-serif; font-weight: normal; margin-bottom: 15px; }
#socialize img{
margin:0px 10px;
}

/**footer**/
#futer{ height:180px; background-image:url(../images/futer.gif); background-position: 0 180px; clear:both; }

#futerMeni{
width:910px;
margin:0 auto;
padding-top:36px;
text-align:center;
}

#futerMeni a{ color:#d6d6d6; text-decoration:none; font-size:12px; font-weight: normal; padding:0 5px; }
#futerMeni a:hover { color: #2bdb00; font-size: 12px; text-decoration: none; padding: 0 5px; }
#futerMeni span{
display:block;
margin-top:20px;
}

#recentClients{
background-image:url(../images/shadow2.png);
background-position:top;
background-repeat:no-repeat;
margin-top:25px;
padding-top:25px;
}

#recentClients img{
margin:0px 12px;
}

/**SLIDESHOW**/

#screen2{
position:absolute;
width:333px;
height:160px;
left:50%;
top:170px;
margin-left:50px;
background-image:url(../images/portfolio.png);
padding-left:44px;
padding-top:4px;
z-index:1000;
}
	
#screen2 .prev, #screen2 .next{
display:block;
width:40px;
height:30px;
position:absolute;
text-indent:-5000px;
top:66px;
}

#screen2 .prev{
left:0px;
}

#screen2 .next{
left:340px;
}

#slideshow{ overflow:hidden; width:292px; }

#slideshow ul{
width:1740px;
}

#slideshow li{ height: 150px; float:left; margin-top: 1px; border: solid 1px white; cursor:pointer; }