html, body {height: 100%;}
body {margin: 0; font: normal 12px Tahoma, Verdana, Arial, sans-serif; color: #000; background: #fff url(../images/back.png) 0 0 repeat-x; text-align: left; min-height: 100%; min-width: 1200px;}
img {border: none;}
a {color: #006cff; border: 0; padding: 0; margin: 0; text-decoration: underline;}
form {margin: 0; padding: 0; border: 0;}
a:hover {text-decoration: underline;}
p {margin-bottom: 10px;}

/* service-type styles */
.clear {clear: both; height: 1px; margin-bottom: -1px; overflow: hidden;}
.hidden {display: none;}

h1,h2,h3 {font: 16px normal;font-family: "Myriad Pro", Tahoma, Verdana, Arial; color: #0061c4; margin: 0; padding: 0; margin-bottom: 5px;}
h1 {font-size: 33px; color: #494949;}
h2 {font-size: 18px;}
h3 {margin: 20px 0 0 0;}

/* main parts */
.site {min-height: 100%; height: auto !important; height: 100%; width: 100% mini-width: 980px;; margin: 0 auto; overflow: hidden;}
.page {width: 940px; margin: 0 auto;}
.header {height: 170px; margin: 0 auto;}
.header .logo {display: block; width: 317px; height: 0; padding-top: 79px; overflow: hidden; position: relative; top: 30px; left: 0; float: left; background: url(../images/logo.png) 0 0 no-repeat; z-index: 10;}
.language {height: 20px; margin-bottom: -20px; overflow: hidden;}
.language a {font-size: 10px; float: right; display: block; padding: 2px 7px 4px 7px; color: #869bb7; outline: none; text-decoration: none;}
.language a:hover {text-decoration: underline; color: #007eff;}
.language .active {background: #3fabff; color: #fff;}
.language .active:hover {color: #fff; text-decoration: none;}
.signin {float: right; font-size: 11px; background: url(../images/footer-icons.png) -77px 0 no-repeat; height: 16px; padding-top: 1px; padding-left: 18px; position: relative; top: 70px; margin-left: 30px;}

.socials {float: right; margin: 50px 0 0 0; font-size: 11px;}
.socialicon {width: 35px; height: 35px; display: inline-block; background: url(../images/socials.png) 0 0 no-repeat; text-decoration: none;}
.socialicon:hover {text-decoration: none;}
.icon-facebook {background-position: -70px 0;}
.icon-facebook:hover  {background-position: -70px -35px;}
.icon-linkedin {background-position: -35px 0;}
.icon-linkedin:hover  {background-position: -35px -35px;}
.icon-twitter {background-position: 0 0;}
.icon-twitter:hover  {background-position: 0 -35px;}

.socials .socialicon {position: relative; left: -15px;}
.footer-socials {float: left; margin-right: 30px; position: relative; top: -12px;}

.menu {position: absolute; left: 0; top: 170px; font-family: "Myriad Pro", Tahoma, Verdana, Arial; font-size: 14px;}
.menu a {text-decoration: none; display: inline-block; white-space: nowrap; margin-bottom: 5px; color: #717171;}
.menu .iconwrap {display: inline-block; padding: 4px 4px 4px 10px; background: #c1c8d0; margin-right: 6px; position: relative; top: -3px;}
.menu a:hover {color: #22aae1;}
.menu a:hover .iconwrap {background: #22aae1;}
.icon {width: 26px; height: 26px; display: inline-block; background: url(../images/menu.png) 0 -26px no-repeat;}
.icon-services {background-position: -26px -26px;}
.icon-portfolio {background-position: -52px -26px;}
.icon-contact {background-position: -78px -26px;}
.menu a:hover .icon-home {background-position: 0 -52px;}
.menu a:hover .icon-services {background-position: -26px -52px;}
.menu a:hover .icon-portfolio {background-position: -52px -52px;}
.menu a:hover .icon-contact {background-position: -78px -52px;}
.menu a.active {color: #494949;}
.menu a.active .iconwrap {background: #494949;}
.menu a.active .icon-home {background-position: 0 0;}
.menu a.active .icon-services {background-position: -26px 0;}
.menu a.active .icon-portfolio {background-position: -52px 0;}
.menu a.active .icon-contact {background-position: -78px 0;}

.back {width: 100%; height: 400px; position: absolute; top: 0; left: 0; background: url(../images/backfade.png) 0 0 repeat-x; z-index: 0;}
.pagecontent {padding-bottom: 80px; line-height: 18px;color: #000;}
.footer {width: 940px; height: 40px; border-top: #c3c8cf 1px solid; color: #788690; padding: 23px 0 0 0; margin: -64px auto 0 auto; text-align: right;}
.footer a {color: #788690; text-decoration: none;}
.footercontacts {float: left; margin-right: 15px; white-space: nowrap; position: relative; z-index: 2;}
.footercontacts .icon {background: url(../images/footer-icons.png) 0 0 no-repeat; height: 17px; float: left; margin-right: 5px; width: 11px; position: relative; top: -2px;}
.footercontacts .icon-skype {width: 16px; background-position: -11px 0;}
.footercontacts .icon-gtalk {width: 17px; background-position: -28px 0;}
.footercontacts .icon-envelope {width: 17px; background-position: -45px 0;}
.footercontacts .icon-time {width: 15px; background-position: -62px 0;}

/* columns */
.leftcolumn {float: left; width: 45%;}
.rightcolumn {float: right; width: 45%;}
.wide {width: 70%;}
.narrow {width: 230px; margin-right: 20px;}

/* homepage styles */
.homepage-graphic {width: 940px; height: 297px; background: url(../images/graphic.jpg) 0 0 no-repeat; margin: 0 auto;}
.homepage h1 {margin-bottom: 15px;}
.slides {background: url(../images/slidesback.png) 0 0 no-repeat; width: 971px; height: 198px; overflow: hidden; margin: 0 auto; padding: 5px 6px 7px 6px;}
.slide {width: 971px; height: 198px; z-index: 1; position: absolute; background: url(../images/slideicons.jpg) 0 500px no-repeat; overflow: hidden; display: none;}
#slide1 {background-position: 581px -1px;}
#slide2 {background-position: 581px -199px;}
#slide3 {background-position: 581px -397px;}
.visible {z-index: 2; display: block;}
.slide .slidetext {width: 470px; font-size: 12px; line-height: 18px; padding: 15px 24px 0 24px;}
.slide p {margin: 0 0 5px 0; padding: 0;}
.slide h2 {font-size: 30px;}
.slide .green {color: #48ff00;}
.slide .special {font: 15px normal; font-family: "Myriad Pro", Tahoma, Verdana, Arial; color: #fff; height: 21px; background: url(../images/icon-attention.png) 0 0 no-repeat; padding-left: 25px; margin-top: 9px;}
.slides .tabs {position: relative; z-index: 20; left: 24px; top: 175px; margin-bottom: -23px; overflow: hidden; height: 23px;}
.slides .tabs a {width: 126px; height: 23px; display: block; float: left; margin-right: 3px; background: url(../images/tabs.png) 0 0 no-repeat; opacity: 0.4; outline: none; position: relative;}
.slides .tabs #slidelink1 {background-position: 0 0;}
.slides .tabs #slidelink2 {background-position: -129px 0;}
.slides .tabs #slidelink3 {background-position: -258px 0;}
.slides .tabs #slidelink1.active {background-position: 0 -23px; opacity: 1; color: #000;}
.slides .tabs #slidelink2.active {background-position: -129px -23px; opacity: 1; color: #000;}
.slides .tabs #slidelink3.active {background-position: -258px -23px; opacity: 1; color: #000;}
.slides .tabs a:hover {opacity: 1;}

.homepage .mission {
font-style: italic; font-weight: normal;
display: block;
font-size: 14px;
font-family: "Myriad Pro", Tahoma, Verdana, Arial;
text-align: left;
overflow: hidden;
background: #e0f0fd; 
margin: 10px -20px;
padding: 10px 20px;
-moz-border-radius: 8px; -ms-border-radius: 8px;  -o-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;
}
.homepage .mission strong {font-style: italic; font-weight: normal; font-size: 18px; display: block;}
.homepage .mission span {display: block;} 
.homepage .pagecontent {padding-top: 30px;}
.homepage .leftcolumn {width: 45%;}
.homepage .rightcolumn {width: 45%px;}
.homepage h2 {margin-bottom: 10px;}
.prices {overflow: hidden;}
.price {width: 296px; background: #1da7ff; padding: 8px; text-align: center; color: #fff; float: left; margin-top: 1px;}
.price-development {margin-left: 2px; background: #59db7b;}
.price-maintenance {margin-left: 2px; background: #d38bfb;}

.testimonials {height: 150px; margin: 30px 0 30px 0;}
.testimonials .prev,.testimonials .next {float: left; width: 21px; height: 34px; margin: 0 20px 0 0; background: url(../images/arrows.png) 0 0 no-repeat; position: relative; top: 20px; cursor: pointer;}
.testimonials .next {float: right; margin: 0 0 0 20px; background-position: -21px 0;}
.testimonials a.prev:hover {background-position: 0 -34px;}
.testimonials a.next:hover {background-position: -21px -34px;}
#testimonials {overflow: hidden;}
.testimonials .item {height: 150px; overflow: hidden; display: none;}
.testimonials .item .sign {margin-top: 10px; text-align: right;}
.testimonials .visible {display: block;}

.icon-tweety {width: 30px; height: 22px; margin-bottom: -22px; display: block; background: url(../images/tweety.png) 0 0 no-repeat; position: relative; left: -35px;}
.recenttweets .item {margin: 25px 0;}
.recenttweets .time {font-size: 11px; color: #7887a5; display: block;}
.recenttweets .firstitem {font-size: 22px; line-height: normal;}
.allupdates {text-decoration: none; float: right;}
.allupdates:hover {text-decoration: underline;}

/* Contact Page styles */
.contactpage .rightcolumn {position: relative; height: 450px; margin-top: -20px; float: left; width: 690px;}
.contactpage .back {height: 410px;}
.contactpage .mapframe {padding: 20px; position: relative; z-index: 3;}
.textinput {background: #fff url(../images/input.png) repeat-x scroll left top; border: 1px solid #b4bac2; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; padding: 3px; width: 320px;}
.textinput:focus {border: #0071f0 3px solid; margin: -2px;}
.formright img {border: 1px solid #b4bac2;}
.formright a {font-size: 11px; color: #bbbfc3;}
.formright a:hover {text-decoration: underline;}
.formleft {float: left; padding: 4px 4px 0 0; text-align: left; width: 120px;}
.formright {float: right; text-align: left; width: 350px; margin-bottom: 10px;}
.contactpage .iconwrap {width: 25px; height: 25px; float: left; overflow: hidden; margin-top: 20px;}
.contactpage .info {float:left; margin: 25px 0 0 5px; overflow: hidden;} 
.contactpage .icon {background: url(../images/contact-icons.png) 0 0 no-repeat; width: 100px; height: 25px; position: relative; left: 0; display: block;}
.contactpage a {color: #000; text-decoration: none;}
.contactpage a:hover .info {text-decoration: underline;}
.contactpage .icon-skype {left: -75px;}
.contactpage .icon-gtalk {left: -25px;}
.contactpage .icon-envelope {left: -50px;}

.errormessage {color: #f00; font-weight: bold; padding-bottom: 10px;}

.portfoliopage {padding: 15px 25px; position: relative; margin: 0 -25px;}
.portfoliopage h1,portfoliopage .sort,.portfoliopage .portfolio {position: relative; z-index: 1;}
.portfoliopage h1 {float: left;}
.portfoliopage .sort {float: right; position: relative; top: 10px; font-size: 11px;}
.portfoliopage .sort a {margin: 7px; outline: none;}
.portfoliopage .sort a.active {text-decoration: none; color: #000;}
.portfoliopage .portfolio {margin-top: 20px;}
.portfoliopage .portfolio .item {float: left; width: 25%; text-align: center; line-height: 18px; margin-top: 10px; height: 220px; overflow: hidden;}
.portfoliopage .portfolio .item img {width: 200px; height: 146px; border: #b1b6be 1px solid; margin-bottom: 5px;}
.portfoliopage .portfolio .item .url {font-size: 11px;}
.servicespage {padding: 20px 34px 20px 34px; position: relative;}
.servicespage .leftcolumn,.servicespage .rightcolumn {padding: 0;}
.servicespage .pagecontent {position: relative; z-index: 1;}
.servicespage h3 {margin-top: 35px;}