/* @override http://localhost/css/style.php */


@font-face { 
	font-family: Netto; 
	src: url(/fonts/NettoWeb.eot); 
	font-weight: normal;
	font-style:  normal;
} 
/* then for Firefox */ 
@font-face { 
  font-family: Netto; 
  src: url(/fonts/NettoWeb.woff) format('woff');
	font-weight: normal;
	font-style:  normal;
} 

body, h1, h2, h3 {
	margin: 0;
	padding: 0;
}

body {
	background: #000 url(../images/body-bg.png) left top repeat-x;
	font: normal 12px Arial, sans-serif;
	text-decoration: none;
}


#wraper-main {
	width: 100%;
	background: url(../images/glow.png) no-repeat 100px top;

}

#wraper-right {
	width: 100%;
	min-width: 990px;
	min-height: 800px;
	background: url(../images/right-bg.png) right top no-repeat;
}

/* @group common */

img {
	border: 0;
}
a img {
	border: 0;
}

a {
	text-decoration: none;
	color: #ddd;
}
a:hover {
	color: #fff;
}

a:focus {
	outline: none;
}


.cols1 {
	width: 220px;
	float: left;
	padding-left: 10px;
}

#form .cols1, #proposalForm .cols1 {
	width: 220px;
	height: 192px;
	float: left;
	padding-left: 10px;
	overflow: hidden;
}


.cols2 {
	width: 487px;
	float: left;
}




form.wm {
	background: url(../images/form-bg.png) no-repeat;
	overflow: hidden;
	padding: 10px;
	padding-top: 0;
	width: 465px;
	height: 277px;
}

form.wm label {
	display: block;
	margin-top: 17px;
	margin-bottom: 5px;
}

form.wm input {
	background: none;
	border: none;
	/*background-image: url(../images/input.png);*/
	width: 195px;
	color: #fff;
	border: 1px solid white;
	background-color: #002d40;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	opacity: .5;
	font-size: 11px;
	padding: 4px;
}

form.wm input:focus {
	/*background-position: bottom;*/
	outline: none;
	border: 1px solid white;
	background-color: #30506a;
	opacity: .8;	
}

form.wm textarea {
	background: none;
	border: none;
	/*background: url(../images/textarea.png) no-repeat;*/
	width: 195px;
	height: 75px;
	color: #fff;
	padding: 5px;
	border: 1px solid white;
	background-color: #002d40;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	opacity: .5;
}

form.wm textarea:focus {
	/*background-position: bottom;*/
	outline: none;
	border: 1px solid white;
	background-color: #30506a;
	opacity: .8;	
}

form.wm form p {
	margin: 0 0 4px;
}


/* @end */

/* @group header */

#header {
	height: 105px;
	padding-top: 25px;
	padding-left: 25px;
}

#logo {
	float: left;
}


#navigation {
	margin-left: 200px;
	height: 39px;
	padding-left: 0;
	margin-right: 194px;	left: 5px;
	margin-top: 2px;
}

#navigation ul, #navigation ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

#navigation ul {
	background: url(../images/menu-bg.png) repeat-x;
	margin-left: -5px;
}

#navigation ul li {
	display: inline;
}

#navigation ul li a {
 	background: url(../images/menu.png) 0 0;
	display: block;
	float: left;
	height: 39px;
	width: 100px;

}

#navigation ul li a span {
	display: none;
}

#navigation ul li a#about {
	width: 81px;
	background-position: 0 0;
}

#navigation ul li a#portfolio {
	width: 95px;
	background-position: -91px 0;
}

#navigation ul li a#quote {
	width: 126px;
	background-position: -192px 0;
}

#navigation ul li a#contact {
	width: 90px;
	background-position: -321px 0;
}

#navigation ul li a#clients {
	width: 100px;
	background-position: right 0;
	position: relative;
	left: 80px;
/*
	z-index: 3;
	position: relative;
*/
}


#navigation ul li a#about:hover {
	background-position: 0 -39px;
}

#navigation ul li a#portfolio:hover {
	background-position: -91px -39px;
}

#navigation ul li a#quote:hover {
	background-position: -192px -39px;
}

#navigation ul li a#contact:hover {
	background-position: -321px -39px;
}

#navigation ul li a#clients:hover {
	background-position: right -39px;
}


#clientLoginDiv {
	background: url(../images/login-bgn.png) no-repeat top right;
	clear: both;
	width: 148px;
	position: relative;
	color: #fff;
	top: -38px;
	height: 226px;
	padding-top: 35px;
	padding-left: 15px;
	padding-right: 15px;
/* 	z-index: 1; */
}

#clientLoginForm {
	width: auto;
	background: none;
	text-align: left;

}
#clientLoginForm p {
	margin: 0;
	text-align: left;
}

#clientLoginForm label {
	display: block;
	margin-top: 20px;
	text-align: left;
}

#clientLoginForm input {
	width: 130px;
	/*background: url(../images/login-text.png) no-repeat;*/
	text-align: left;
	border: none;
	outline: none;
	color: #fff;
	border: 1px solid white;
	background-color: #111823;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	padding: 3px;
	opacity: .5;
}
#clientLoginForm input:focus {
	outline: none;
	opacity: .7;
}

#clientLoginForm #signin {
	background: url(../images/sign-in.png);
	width: 59px;
	height: 23px;
	float: none;
	margin: 5px 0 10px;
}

#clientLoginForm a.reset {
	display: inline;
	float: none;
	background: none;
}

.float-right {
	float: right;
	width: 180px;
	
}


/* @end */

/* @group content */

#content {
	height: 457px;
	overflow: hidden;
	color: #ddd;
	padding: 0 20px;
}

.text {
	float: left;
	overflow: hidden;
	margin-top: 15px;
	font-weight: normal;
	font-style: normal;
	clear: both;
}

.marginTop {
	margin-top: 64px;
}

.text h1 {
	margin-bottom: 10px;
	word-spacing: 3px;
	font: normal normal 28px/1.3em Netto, Arial;
}

.text h1 strong {
	color: #00a7e6;
	font-weight: normal;
	font-style:  normal;
}

.text h2 {
	color: #7493ad;
	word-spacing: 3px;
	font: normal normal 16px Netto, Arial;
	margin: 0;
	padding: 0;
}

.text h2 strong {
	color: #fff;
}

.info {
	color: #7493ad;
}

.prored {
	line-height:175%;
}

.iphone-vertical {
	background: url(../images/iphone-vertical2.png) no-repeat 35px top;
	width: 331px;
	height: 272px;
	overflow: hidden;
	padding: 73px 0 185px;
}

.iphone-vertical .scrollable {
	width: 180px;
	margin-left: 78px;
	height: 283px;
}



#list ul, #portfolioList li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#list ul li {
	float: left;
	text-align: center;
	margin: 7px 8px 1px 7px;
	font-size: 8pt;
}

#list ul {
	height: 240px;
	width: 207px;
	float: left;
	margin-top: 7px;
}



.buttons {
	display: block;
	background: url(../images/buttons.png) no-repeat;
	width: 334px;
	height: 43px;
}

a.buttons span {
	display: none;
}

#request-quote {
	background-position: 0 0;
}
#see-work {
	background-position: 0 -44px;
}


/* @end */

/* @group footer */

#footer {
	color: #555;
	margin-top: 172px;
	
}

#footer p {
	clear: both;
	margin-left: 13px;
	margin-top: 3px;
}


/* @end */

/* @group aboutus */


#aboutusText {
	width: 335px;
	margin-right: 30px;
}

#aboutImg {
	margin-top: 59px;
}

/* @end */

/* @group index */

#indexText {
	width: 335px;
	margin-right: 130px;
}

.crtici {
	background: url(../images/crti.png) no-repeat left 66px;
	margin-left: 451px;
}

#list ul li a {
	display: block;
	width: 45px;
	font-size: 8px;
}


/* @end */

/* @group request-quote */

#quoteText {
	text-align: center;
	margin-top: 26px;
}

#quoteDesc {
	float: left;
	width: 307px;
	font-size: 8pt;
	margin-left: 10px;
}


#submit {
	background: url(../images/submit.png) no-repeat;
	width: 103px;
	text-indent: -10000px;
	float: right;
	height: 26px;
	margin-right: 18px;
	margin-top: 12px;
}

form.wm input.file {
	/*background: url(../images/attach.png) no-repeat;*/
	width: 90px;
	height: auto;
	margin-right: 5px;
}

/* @end */

/* @group portfolio */

#type, #type li {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
}

#type li {
	margin-right: 5px;
	display: block;
	float: left;
}

#type li a {
	background: url(../images/type.png) no-repeat 0 -23px;
	display: block;
	float: left;
	width: 78px;
	height: 23px;
}

#type li a#iPhoneTab {
	background-position: 0 -23px;

}#type li a#iPadTab {
	background-position: -79px -23px;
}
#type li a#iPhoneTab:hover,  #type li a#iPhoneTab.clicked {
	background-position: 0 0;

}
#type li a#iPadTab:hover, #type li a#iPadTab.clicked {
	background-position: -79px 0;
}


#type li a span {
	display: none;
}


#appstore {
	display: block;
	float: right;
	background: url(../images/app-store-badge.png) no-repeat 0 0;
	width: 100px;
	height: 33px;
	text-indent: -1000px;
	overflow: hidden;
}

#thumbs {
	float: left;
	display: block;
	background: url(../images/back-thumbs.png) no-repeat 0 0;
	height: 22px;
	width: 78px;
	text-indent: -1000px;
	overflow: hidden;
	margin-top: 4px;
}


#portfolioText {
	background: url(../images/portfolio-bg.png) no-repeat;
	width: 685px;
	overflow: hidden;
	height: 303px;
}

#portfolioList ul, #portfolioList li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#portfolioList ul li {
	float: left;
	width: 67px;
	text-align: center;
	margin: 30px 22px 30px 21px;
	font-size: 8pt;
}

#portfolioList ul {
	height: 240px;
	width: 661px;
	float: left;
	margin-top: 7px;
}

#appIcon {
	float: left;
	width: 168px;
	text-align: center;
}

#details {
	background: url(../images/form-bg.png) no-repeat;
	overflow: hidden;
	padding: 10px;
	padding-top: 0;
	width: 465px;
	height: 277px;
	float: left;
}

#det {
	height: 235px;
	margin-top: 10px;
}



/* @end */




/* @group contact */

#contactText p {
	line-height: 1.7em;
}

#message {
	/*background: url(../images/message.png) no-repeat left bottom;*/
	height: 140px;
}



#message:focus {
	/*background-position: top;*/
}

#address, #telephone, #ouremail {
	background: url(../images/contact-icons.png) no-repeat;
	display: block;
	text-indent: -1000px;
	height: 23px;
}

#telephone {
	background-position: 0 -46px;
}

#ouremail {
	background-position: 0 -23px;
}

a#skypeBig {
	display: block;
	text-indent: -1000px;
	background: url(../images/skype.png) no-repeat;
	height: 33px;
	width: 149px;
	margin-top: 40px;
}

a#skypeBig.Online {
	background-position: 0 0;
}

a#skypeBig.Offline {
	background-position: 0 -33px;
}


#thanks {
	margin-top: 124px;
	text-align: center;
}


/* @end */

/* @group social */

ul#social, ul#social li {
	margin: 0;
	padding: 0;
}

ul#social {
	margin-left: 10px;
	overflow: hidden;
}

ul#social li {
	display: block;
	float: left;
	margin: 0 3px;
}

ul#social li a {
	width: 20px;
	height: 20px;
	display: block;
	overflow: hidden;
	float: left;
	background: url(../images/social.png) left -32px;
}

ul#social li a span {
	display: none;
}

#social .facebook {
	background-position: 0 -32px;
}

#social .youtube {
	background-position: -96px -32px;
}

#social .twitter {
	background-position: -32px -32px;
}

#social .skype {
	background-position: -64px -32px;
}



#social .facebook:hover {
	background-position: 0 0;
}

#social .youtube:hover {
	background-position: -96px 0;
}

#social .twitter:hover {
	background-position: -32px 0;
}

#social .skype:hover {
	background-position: -64px 0;
}


/* @end */

div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 650px; 
    height: 304px; 
} 

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div { 
    /* this cannot be too large */ 
    width:20000em; 
	height: 270px;
	float: left;
	position: absolute;
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	float: left;
	clear:both;
	position: absolute;
}
/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}


/* position and dimensions of the navigator */
.iphone-vertical .navi {
	margin-left: 70px;
	width:200px;
	height:20px;
	margin-top: 271px;
}


.navi {
	margin-left: 312px;
	width:200px;
	height:20px;
	margin-top: 291px;
}

.navi a.active {
	border: none;
}

/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/scrollable/navigator.png) 0 -16px no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 0;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 0;
}

.left, .right {
	background: url(../images/portfolio-arrows.png) left center no-repeat;
	width: 11px;
	height: 285px;
	float: left;
}

a.left {
	background-position: -22px center;
}

a.left:hover {
	background-position: 0 center;
}

a.right {
	position: relative;
	left: 673px;
	top: -308px;
	background-position: -33px center;
}

a.right:hover {
	background-position: -11px center;
}



.iphone-vertical .left, .iphone-vertical .right {
	background: url(../images/venikom-strelice.png) left center no-repeat;
	width: 55px;
	height: 52px;
	float: left;
}

.iphone-vertical a.left {
	background-position: -2px -51px;
	margin-top: 100px;
}

.iphone-vertical a.left:hover {
	background-position: -3px -2px;
}

.iphone-vertical a.right {
	position: relative;
	left: 277px;
	margin-top: 136px;
	background-position: -58px -51px;
}

.iphone-vertical a.right:hover {
	background-position: -58px -2px;
}



.clear {
	clear: both;
}.jquery-msgbox
{
  background:url(../js/msgbox/images/background.png) repeat-x left bottom;
  padding-bottom:55px;
}

.jquery-msgbox-wrapper
{
  padding:20px 20px 20px 100px;
}

.jquery-msgbox-buttons
{
  padding:15px;
  text-align:right;
  position:absolute;
  bottom:0;
  right:0;
}

.jquery-msgbox-buttons button,
.jquery-msgbox-buttons input
{
  margin-left:10px;
  min-width:85px;
  cursor:pointer;
}

.jquery-msgbox-inputs
{
  margin-top:4px;
}

.jquery-msgbox-inputs input
{
  display:block;
  padding:3px 2px;
  border:1px solid #dddddd;
  margin:3px 0 6px 0;
  width:95%;
}

.jquery-msgbox-label
{
  font-weight:bold;
  font-size:11px;
}

.jquery-msgbox-alert
{
  background: url(../js/msgbox/images/alert.png) no-repeat 20px 20px;
}

.jquery-msgbox-info
{
  background: url(../js/msgbox/images/info.png) no-repeat 20px 20px;
}

.jquery-msgbox-error
{
  background: url(../js/msgbox/images/error.png) no-repeat 20px 20px;
}

.jquery-msgbox-prompt
{
  background: url(../js/msgbox/images/question.png) no-repeat 20px 20px;
}

.jquery-msgbox-confirm
{
  background: url(../js/msgbox/images/confirm.png) no-repeat 20px 20px;
}.jquery-msgbox
{
  background:url(../js/msgbox/images/background.png) repeat-x left bottom;
  padding-bottom:55px;
}

.jquery-msgbox-wrapper
{
  padding:20px 20px 20px 100px;
}

.jquery-msgbox-buttons
{
  padding:15px;
  text-align:right;
  position:absolute;
  bottom:0;
  right:0;
}

.jquery-msgbox-buttons button,
.jquery-msgbox-buttons input
{
  margin-left:10px;
  min-width:85px;
  cursor:pointer;
}

.jquery-msgbox-inputs
{
  margin-top:4px;
}

.jquery-msgbox-inputs input
{
  display:block;
  padding:3px 2px;
  border:1px solid #dddddd;
  margin:3px 0 6px 0;
  width:95%;
}

.jquery-msgbox-label
{
  font-weight:bold;
  font-size:11px;
}

.jquery-msgbox-alert
{
  background: url(../js/msgbox/images/alert.png) no-repeat 20px 20px;
}

.jquery-msgbox-info
{
  background: url(../js/msgbox/images/info.png) no-repeat 20px 20px;
}

.jquery-msgbox-error
{
  background: url(../js/msgbox/images/error.png) no-repeat 20px 20px;
}

.jquery-msgbox-prompt
{
  background: url(../js/msgbox/images/question.png) no-repeat 20px 20px;
}

.jquery-msgbox-confirm
{
  background: url(../js/msgbox/images/confirm.png) no-repeat 20px 20px;
}.jquery-msgbox
{
  background:url(../js/msgbox/images/background.png) repeat-x left bottom;
  padding-bottom:55px;
}

.jquery-msgbox-wrapper
{
  padding:20px 20px 20px 100px;
}

.jquery-msgbox-buttons
{
  padding:15px;
  text-align:right;
  position:absolute;
  bottom:0;
  right:0;
}

.jquery-msgbox-buttons button,
.jquery-msgbox-buttons input
{
  margin-left:10px;
  min-width:85px;
  cursor:pointer;
}

.jquery-msgbox-inputs
{
  margin-top:4px;
}

.jquery-msgbox-inputs input
{
  display:block;
  padding:3px 2px;
  border:1px solid #dddddd;
  margin:3px 0 6px 0;
  width:95%;
}

.jquery-msgbox-label
{
  font-weight:bold;
  font-size:11px;
}

.jquery-msgbox-alert
{
  background: url(../js/msgbox/images/alert.png) no-repeat 20px 20px;
}

.jquery-msgbox-info
{
  background: url(../js/msgbox/images/info.png) no-repeat 20px 20px;
}

.jquery-msgbox-error
{
  background: url(../js/msgbox/images/error.png) no-repeat 20px 20px;
}

.jquery-msgbox-prompt
{
  background: url(../js/msgbox/images/question.png) no-repeat 20px 20px;
}

.jquery-msgbox-confirm
{
  background: url(../js/msgbox/images/confirm.png) no-repeat 20px 20px;
}.jquery-msgbox
{
  background:url(../js/msgbox/images/background.png) repeat-x left bottom;
  padding-bottom:55px;
}

.jquery-msgbox-wrapper
{
  padding:20px 20px 20px 100px;
}

.jquery-msgbox-buttons
{
  padding:15px;
  text-align:right;
  position:absolute;
  bottom:0;
  right:0;
}

.jquery-msgbox-buttons button,
.jquery-msgbox-buttons input
{
  margin-left:10px;
  min-width:85px;
  cursor:pointer;
}

.jquery-msgbox-inputs
{
  margin-top:4px;
}

.jquery-msgbox-inputs input
{
  display:block;
  padding:3px 2px;
  border:1px solid #dddddd;
  margin:3px 0 6px 0;
  width:95%;
}

.jquery-msgbox-label
{
  font-weight:bold;
  font-size:11px;
}

.jquery-msgbox-alert
{
  background: url(../js/msgbox/images/alert.png) no-repeat 20px 20px;
}

.jquery-msgbox-info
{
  background: url(../js/msgbox/images/info.png) no-repeat 20px 20px;
}

.jquery-msgbox-error
{
  background: url(../js/msgbox/images/error.png) no-repeat 20px 20px;
}

.jquery-msgbox-prompt
{
  background: url(../js/msgbox/images/question.png) no-repeat 20px 20px;
}

.jquery-msgbox-confirm
{
  background: url(../js/msgbox/images/confirm.png) no-repeat 20px 20px;
}