/* Global 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,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-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}
input,button{overflow:visible}strong{font-weight:bold}em{font-style:normal}hr{display:none}
/* Default classes */
.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-left{margin-left:15px}.margin-right{margin-right:15px}
.left{float:left}.right{float: right}.clear{clear:both}.overflow{overflow:hidden;height:100%}.cleared{clear:both;*margin-bottom:-25px}
.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.middle{vertical-align:middle}
/* Basic selectors styles */
h3 { font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; }
h4 { font: bold 12px Arial, Helvetica, sans-serif; color: #4b4b4b; }
a { color: #8d1917; text-decoration: none; outline: none; cursor: pointer }
a:hover { text-decoration: underline; }
em { color: #8d1917; font-weight: bold; }
blockquote { padding: 15px; font-size: 12px; border: 1px dotted #cfcfcf; }
cite { display: block; margin-top: 10px; font-size: 12px; text-align: right; color: #8d1917; font-weight: bold; line-height: 140%; }
cite span { display: block; color: #4b4b4b; font-weight: normal; }
html { background: #252525; }
body {
font: 14px/180% Arial, Tahoma, Helvetica, sans-serif;
color: #4b4b4b;
background: #fff url(../img/html.gif) repeat-x;
}
/*
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
/* Container
---------------------------------------------- */
#wrap { background: url(../img/body.jpg) center 165px no-repeat; }
#container { width: 1099px; margin: 0 auto; padding-bottom: 254px; background: url(../img/content/wrap-b.gif) center 0 repeat-y; }
html>/**/body #container, x:-moz-any-link, x:default { position: relative; right: 1px; }
#container.without-contacts { padding-bottom: 121px; }
/* Header
---------------------------------------------- */
#header { position: relative; height: 308px; padding: 0; z-index: 99; background: url(../img/html.gif) repeat-x; }
/* Logo */
#header h1 { float: left; width: 271px; height: 64px; padding: 20px 0 22px 71px; }
#header h1 a { display: block; height: 100%; background: url(../img/header/logo.gif); text-indent: -999999px }
/* Menu */
#menu { clear: left; padding-left: 51px; }
#menu li { float: left; position: relative; height: 47px; padding: 12px 0 0; border-left: 1px solid #000; }
#menu .last { border-right: 1px solid #000; }
#menu .active { background: url(../img/header/active.gif) repeat-x; }
#menu a { display: block; width: 140px; padding-left: 20px; text-decoration: none; color: #fff; font: 14px "Trebuchet MS", Tahoma, sans-serif; }
#menu a span { display: block; color: #616161; font: 12px Arial, sans-serif; }
#menu a:hover span, #menu .hover a span { color: #949494; }
/* Submenu */
#menu .submenu { position: absolute; top: 59px; z-index: 99; background: url(../img/header/s.gif) 0 bottom no-repeat; }
#menu ul { display: none; padding: 5px 19px; background: url(../img/header/sg.gif) repeat-x; }
#menu .submenu ul { display: block; }
#menu ul li, #menu ul .active { float: none; height: auto; padding: 8px 0; border: 0; background: url(../img/header/sep.gif) 0 bottom repeat-x; }
#menu ul .last { background: none; }
#menu ul a { width: 190px; padding: 0; }
#menu ul a:hover { color: #686868; }
/* Slogans */
#slogans { position: absolute; left: 0; bottom: 0; clear: both; height: 143px; color: #fff; overflow: hidden; width: 1099px !important; background: url(../img/body.jpg) center 0 no-repeat; }
#slogans li { position: relative; width: 1017px; height: 143px; margin: 0 auto; }
#slogans h2, #slogans p { position: absolute; }
#slogans h2 { width: 315px; top: 30px; left: 35px; font-size: 26px; color: #f5f5f5; font: 28px "Trebuchet MS", Arial, sans-serif; }
#slogans p { width: 515px; top: 50px; left: 445px; }
/* Content
---------------------------------------------- */
#content { position: relative; z-index: 10; overflow: hidden; width: 1015px; padding: 0 42px; background: url(../img/content/wrap-t.gif) center 0 no-repeat; }
.content { padding: 30px; }
.separated { margin: 30px 30px 0; padding-bottom: 20px; border-bottom: 3px solid #ddd; }
.end { background: url(../img/content/end.jpg) center bottom no-repeat; }
.bordered { padding-bottom: 15px; margin-bottom: 15px; background: url(../img/content/border.gif) 0 bottom repeat-x; }
.to-left { position: relative; margin-left: -25px; }
img.left { margin-right: 15px; margin-bottom: 10px; }
img.right { margin-left: 15px; margin-bottom: 10px; }
/* Content styles */
.content-styles { padding: 30px; }
.content-styles h1 { margin-bottom: 15px; font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; }
.content-styles h2 { margin-bottom: 15px; font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; }
.content-styles h3 { margin-bottom: 15px; font-size: 14px; font-weight: bold; }
.content-styles h4 { margin-bottom: 15px; font-size: 12px; font-weight: bold; }
.content-styles p { margin-bottom: 15px; }
.content-styles ul { margin-bottom: 15px; }
.content-styles ul li { padding-left: 20px; border-bottom: 1px dotted #d4d4d4; background: url(../img/content/check.gif) 0 9px no-repeat; }
/* List */
.list { background: url(../img/content/border.gif) 0 0 repeat-x; }
.list li { padding: 3px; background: url(../img/content/border.gif) 0 bottom repeat-x; }
.list .last { background: none; }
.list strong { float: left; width: 70px; font-weight: normal; }
.check { background: none; }
.check li { padding-left: 20px; border-bottom: 1px dotted #d4d4d4; background: url(../img/content/check.gif) 0 9px no-repeat; }
/* Link */
.link, .link strong, .link button { float: left; height: 32px; line-height: 32px; font-weight: normal; background: url(../img/content/link.gif) no-repeat; }
.link { color: #fff; font-size: 12px; padding-left: 23px; }
.link strong, .link button { padding: 0 15px; background-position: right -32px; }
.link:hover { background-position: 0 -64px; text-decoration: none; }
.link:hover strong, .link:hover button { background-position: right -96px; }
.link button { color: #fff; border: 0; cursor: pointer; }
/* Headers */
.header { padding-left: 50px; line-height: 45px; background: 0 center no-repeat; }
.lupe { background-image: url(../img/content/headers/lupe.gif); }
.engine { background-image: url(../img/content/headers/engine.gif); }
.check-list { background-image: url(../img/content/headers/check-list.gif); }
.programming { background-image: url(../img/content/headers/programming.gif); }
.xhtml { background-image: url(../img/content/headers/xhtml.gif); }
.illustrations { background-image: url(../img/content/headers/illustrations.gif); }
.webdesign { background-image: url(../img/content/headers/webdesign.gif); }
.payment { background-image: url(../img/content/headers/payment.gif); }
.hosting { background-image: url(../img/content/headers/hosting.gif); }
.shop { background-image: url(../img/content/headers/shop.gif); }
.cms { background-image: url(../img/content/headers/cms.gif); }
.projectmanagement { background-image: url(../img/content/headers/projectmanagement.gif); }
.seo { background-image: url(../img/content/headers/seo.gif); }
/* Logo */
.logo { font-weight: bold; color: #212121; }
.logo span { color: #812322; }
/* Project */
.project { float: right; width: 625px !important; min-height: 317px; _height: 317px; background: url(../img/content/latest-project.gif) 0 bottom no-repeat; }
.project .wrapper { margin: 0 0 15px 3px; width: 619px; height: 256px; overflow: hidden; border-top: 3px solid #dcdcdc; }
.project ul li { width: 619px; height: 255px; }
.project ul img { display: block; }
.project .link { position: relative; float: right; right: 40px; }
.project-paginator { padding-left: 15px; }
.project p { clear: both; padding: 30px 0 30px; margin: 0 15px; *padding-top: 15px; background: url(../img/content/border.gif) 0 15px repeat-x; }
.project-paginator { float: left; overflow: hidden; padding-top: 5px; }
.project-paginator dt, .project-paginator dd { float: left; font-size: 12px; }
.project-paginator dt { margin-right: 10px; color: #afafaf; }
.project-paginator a { float: left; width: 21px; height: 21px; line-height: 21px; margin-right: 5px; text-align: center; font-weight: bold; background: url(../img/content/paginator.gif) no-repeat; }
.project-paginator a:hover, .project-paginator .active { color: #626262; text-decoration: none; }
.product-descriptions { float: left; width: 610px; }
.product-descriptions h3 { margin-bottom: 10px; }
.product-info { float: right; width: 300px; }
.type1 { padding: 15px 15px; margin-bottom: 15px; background: url(../img/content/type1.jpg) 0 bottom no-repeat; }
.type1 .last { border: 0; background: url(../img/content/check.gif) 0 9px no-repeat; }
.type1 h3 { margin-bottom: 10px; }
.type2 h3 { margin-bottom: 10px; }
.type2 img { margin-top: 5px; margin-bottom: 0; }
/* Home -------------------------------------- */
.box { float: left; width: 298px; margin-right: 30px; }
.box.last { margin: 0; }
.box .inside { margin: 10px 0 15px; }
#home-intro .inside { height: 125px; }
#home-intro ul.inside { /*line-height: 160%;*/ }
/* Latest projects */
.latest-project { overflow: hidden; height: 100%; padding: 30px; background: #f7f7f7; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; }
.latest-project h3 { margin-left: 3px; margin-bottom: 10px; }
.latest-project .list { width: 280px; background: none; }
.latest-project .list .last { text-align: justify; /*line-height: 180%;*/ }
.latest-project .project-paginator { padding-left: 25px; }
/* Magento */
#magento { overflow: hidden; height: 100%; padding: 30px 0 0 30px; background: url(../img/content/project.gif) 0 bottom repeat-x; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; }
#magento .description { float: left; width: 340px; }
#magento h3 { height: 80px; background: url(../img/content/magento-logo.gif) no-repeat; text-indent: -999999px; }
#magento p { padding-top: 20px; margin-bottom: 20px; background: url(../img/content/border.gif) repeat-x; }
#magento .link { margin-right: 15px; }
#magento .image { float: right; position: relative; right: 17px; width: 593px; height: 345px; }
#magento .image img { position: absolute; bottom: 0; left: 0; }
/* Programming */
.table { margin: 25px 0; border: 1px solid #efefef; border-top-color: #d7d7d7; }
.table table { width: 100%; border-collapse: collapse; }
.table th { padding: 10px 0; width: 140px; text-align: center; font: normal 18px "Trebuchet MS", sans-serif; border-top: 3px solid #efefef; background: url(../img/content/th.gif) 0 center no-repeat; }
.table .first { width: 180px; padding-right: 15px; background: none; border-left: 0; }
.table td { padding: 7px 0; font-size: 12px; text-align: center; color: #666766; border-top: 1px solid #efefef; border-left: 1px solid #fff; }
.table td.first { text-align: right; color: #666766; vertical-align: middle; }
.table .odd td { background-color: #fafafa; }
.table img { vertical-align: middle; }
.table .bold td { color: #272727; font-weight: bold; font-size: 14px; }
.table .bold .first { color: #666766; font-weight: normal; font-size: 12px; }
.table .price strong { display: block; color: #272727; font: bold 18px "Trebuchet MS", sans-serif; line-height: 100%; }
.table .price td { color: #a4a5a4; font-size: 11px; line-height: 100%; }
.table .price .first { color: #666766; font-weight: normal; font-size: 12px; }
.table .first a { display: block; line-height: 20px; height: 20px; position: relative; z-index: 10; color: #666766; padding-right: 25px; text-decoration: none; background: url(../img/content/info-white.gif) right center no-repeat; }
.table .odd .first a { background-image: url(../img/content/info-gray.gif); }
.tooltip { position: absolute; width: 238px; right: 0; bottom: 21px; line-height: 100%; text-align: left; background: url(../img/content/tooltip.png) 0 bottom no-repeat; }
.tooltip span { display: block; padding: 0 11px 25px; line-height: 140%; font-size: 11px; }
.tooltip em { display: block; padding-left: 10px; margin: 0 0 0 2px; height: 34px; line-height: 34px; color: #fff; background: url(../img/content/tooltip.png) right 0 no-repeat; }
.table .first .tooltip { margin-right: -207px; }
.forms { margin: 25px 0; border: 1px solid #efefef; color: #707170; }
.forms li { overflow: hidden; height: 100%; border-bottom: 1px solid #efefef; }
.forms .odd { background-color: #fafafa; }
.forms li label { float: left; width: 180px; padding: 10px 15px 10px 0; margin-right: 15px; text-align: right; font-size: 12px; border-right: 1px solid #fff; }
.forms li input,
.forms li textarea { padding: 3px 5px; margin: 12px 0; color: #707170; font: 12px Arial, sans-serif; border: 1px solid #cbcbcb; background: #fff; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.forms li input { width: 205px; }
.forms li textarea { width: 360px; }
.forms .buttons { padding: 10px 0 10px 210px; }
/* Project ------------------------------------ */
.project-screens { position: relative; height: 338px; padding: 30px 80px 0; border-bottom: 1px solid #cdcdcd; background: url(../img/content/project.gif) 0 bottom repeat-x; }
.project-screens h3 { width: 255px; padding-bottom: 10px; margin-bottom: 10px; background: url(../img/content/border.gif) 0 bottom repeat-x; }
.project-screens p { width: 255px; }
.project-screens .project { width: 585px !important; height: 338px; background: url(../img/content/project-bg.png) no-repeat; }
.project-screens .project .wrapper { margin: 2px 0 15px 2px; width: 581px; height: 270px; border: 0; }
.project-screens .project ul li { width: 581px; height: 270px; }
.project-screens .project .link { right: 0; }
.project-screens .project-list { position: relative; width: 855px !important; height: 338px !important; }
.project-screens .project-list li { position: relative; width: 855px !important; height: 338px !important; }
.project-screens .project-screen { float: right; width: 593px; height: 338px; }
.project-screens .project-screen img { display: block; }
.project-screens .link { margin: 15px 15px 0 0; }
.project-changer { line-height: 0; }
.project-changer a { position: absolute; top: 145px; width: 67px; height: 81px; text-indent: -999999px; }
.project-changer a:hover { margin-top: 5px; }
.project-changer .prev a { left: 0; margin-left: -12px; background: url(../img/content/project-prev.gif) no-repeat; }
.project-changer .next a { right: 0; margin-right: -12px; _margin-right: -13px; background: url(../img/content/project-next.gif) no-repeat; }
/* About ------------------------------------ */
.about-description { float: left; width: 445px; }
.about-partners { float: right; width: 445px; }
.about-partners ul { overflow: hidden; height: 100%; padding: 10px 0 15px; border: 1px solid #d4d4d4; }
.about-partners li { float: left; width: 199px; height: 120px; padding-left: 15px; text-align: center; }
.about-partners .right { float: right; padding: 0 15px 0 0; }
.about-partners h4 { padding: 5px 0; margin-bottom: 10px; font-weight: normal; text-align: left; border-bottom: 1px solid #d4d4d4; }
/* Services ------------------------------------ */
.services { margin: 30px 30px 0; padding-bottom: 20px; border-bottom: 3px solid #ddd; overflow: hidden; height: 100%; }
.services li { float: left; width: 460px; height: 220px; position: relative; }
.services .right { float: right; }
.services h3 { margin-bottom: 15px; border-bottom: 2px solid #ddd; }
.services .link { position: absolute; right: 0; bottom: 10px; }
.service .project { float: left; }
.service .project .link { right: 16px; }
.service .service-details { float: right; width: 305px; }
.service .service-details h3 { margin-bottom: 15px; }
.service .service-details p { margin-bottom: 15px; }
.service .service-details blockquote p { margin: 0; }
.service .service-details h4 { padding: 15px 0 10px; font-size: 16px; color: #000; }
/* References ------------------------------------ */
#references { padding: 0 30px 0; }
#references .reference { overflow: hidden; height: 100%; padding: 30px 0; border-bottom: 3px solid #ddd; }
#references .project { float: left; }
#references .reference-details { float: right; width: 300px; }
#references .reference-details h4 { padding: 15px 0 10px; font-size: 16px; color: #000; }
#references .reference-details blockquote img { float: left; margin: 6px 10px 0 0; }
#references.portfolio .reference { overflow: visible; }
#references.portfolio h3 { position: relative; line-height: 32px; padding-bottom: 10px; margin-bottom: 15px; font-size: 22px; background: url(../img/content/border.gif) 0 bottom repeat-x; }
#references.portfolio h3 .link { position: absolute; right: 0; top: 0; font: 12px Arial, sans-serif; }
#references.portfolio h4 { font-size: 22px; font-weight: normal; padding-top: 10px; }
#references.portfolio p { /*line-height: 180%;*/ }
#references.portfolio .type1 { margin: 0; }
#references.portfolio .type1 h4 { padding: 15px 0 10px; }
#references.portfolio .magento { clear: both; height: 60px; background: url(../img/content/magento-logo.gif) 0 center no-repeat; text-indent: -999999px; }
#references.portfolio .modx { clear: both; height: 60px; background: url(../img/content/modx-logo.gif) 0 center no-repeat; text-indent: -999999px; }
#references.portfolio .php-mysql { clear: both; height: 60px; background: url(../img/content/phpmysql-logo.gif) 0 center no-repeat; text-indent: -999999px; }
#references.portfolio .facebook { clear: both; height: 60px; background: url(../img/content/facebook-logo.gif) 0 center no-repeat; text-indent: -999999px; }
#references .reference-image { float: left; width: 640px; position: relative; margin-left: -15px; }
/* Contact ------------------------------------ */
#contact { padding-bottom: 0; }
#contact .list.margin-bottom { margin-bottom: 35px; }
#contact h3.margin-bottom { margin-bottom: 15px; }
#contact .list { background: none; }
.contact-informations { float: left; width: 440px; padding-right: 40px; margin-bottom: 30px; *margin-bottom: 0px; border-right: 1px solid #ddd; }
.contact-informations .list strong { width: 130px; }
.contact-informations .list .separator { padding-left: 133px; }
.contact-details { float: right; width: 440px; margin-bottom: 30px; *margin-bottom: 0px; }
#contact-map { clear: both; border: 3px solid #ddd; height: 350px; background: #fff url(../img/google-load.gif) center center no-repeat; }
/* Blog ------------------------------------ */
#blog { float: left; width: 610px; }
#blog ul li { overflow: hidden; height: 100%; padding: 30px 0; border-bottom: 3px solid #ddd; }
#blog h3 { position: relative; line-height: 32px; padding-bottom: 10px; margin-bottom: 15px; font-size: 22px; background: url(../img/content/border.gif) 0 bottom repeat-x; }
#blog ul h3 a { color: #333; }
#blog ul h3 small { position: absolute; right: 0; top: 0; font: 14px/32px Arial, sans-serif; color: #4B4B4B; }
#blog p { margin-bottom: 15px; }
#blog ul li li { float: left; padding: 0 15px 0 0; margin-right: 14px; border: 0; line-height: 32px; background: url(../img/content/sep.gif) right center no-repeat; }
#blog ul li .last { background: none; }
#blog .pagination { position: relative; height: 60px; }
#blog .pagination .wrapper { position: absolute; left: 50%; top: 30px; }
#blog .pagination .project-paginator { position: relative; right: 50%; top: 0; }
#blog-comments { padding-top: 30px; }
#blog-comments .commentlist li { background: url(../img/content/border.gif) 0 bottom repeat-x; }
#blog-comments .comment-author { float: left; width: 400px; line-height: 32px; }
#blog-comments .comment-author * { float: left; line-height: 32px; margin: 0 5px 0 0; font-size: 14px; }
#blog-comments .comment-author img { margin-right: 15px; }
#blog-comments .comment-meta { float: right; font-size: 12px; }
#blog-comments .comment-meta a { color: #4B4B4B;; }
#blog-comments p { clear: both; padding: 5px 0 15px 48px; }
#blog-sidebar { float: right; width: 300px; padding: 60px 30px 0 0; }
/* Footer
---------------------------------------------- */
/* Contacts */
#contacts { position: absolute; margin-top: -134px; width: 954px; height: 123px; padding: 20px 30px 0; left: 50%; margin-left: -507px; }
#contacts .contacts { float: left; width: 280px; margin-right: 30px; }
#contacts .contacts.middle { padding: 0 27px; }
#contacts .last { margin: 0; }
#contacts .list li { padding: 3px 0; }
#contacts h4 { font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; }
#contacts h5 { font: bold 12px Arial, Helvetica, sans-serif; color: #4b4b4b; margin: 5px 0 10px 0; }
/* Copyrights etc. */
#footer { position: relative; height: 121px; margin-top: -121px; background: #252525 url(../img/footer/bg.gif) repeat-x; }
#footer .wrapper { position: relative; width: 960px; height: 40px; padding: 80px 90px 0; margin: 0 auto; line-height: 100%; color: #707070; background: url(../img/footer/end.gif) no-repeat; }
#footer .wrapper a { color: #b8b8b8; }
#footer .wrapper a:hover { }
#footer .wrapper ul li { float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #393939; }
#footer .wrapper ul .last { border: 0; }
#footer .wrapper ul a { padding-left: 10px; background: url(../img/footer/arr.gif) 0 center no-repeat; }
#footer .wrapper p { float: right }