@charset "utf-8"; /* global parameters for object inbetween . The Arial Narrow font is displayed for people who dont have flash plugin installed so if they cant see sIFR text, they will see similar font */ html,body{ margin:0; padding:0; color:#272727; background:#e7e7e7; font-family: Verdana, Geneva, sans-serif; font-size: 11px; } .clear{clear:both;font-size:0;} ul,ol,li{list-style:none;padding:0;margin:0;line-height:normal;} img{border:0;} a,a:hover{text-decoration:none;} h1,h2,h3,h4,h5,p{margin:0;padding:0;font-weight:normal;font-size:12px;line-height:18px;} h1,h2,h3,h4,h5 {font-family:"Arial Narrow", Arial, Tahoma;font-weight:bold;} .set-size {width:942px;margin:0 auto;position:relative;} /* set the position of any object to right or left (if it is already right), like more link */ .right {float:right;} .left {float:left;} /* more/continue button - you may use it anywhere you want */ a.more {background:url(../img/bg-more-button.jpg) no-repeat top right;height:20px;border:1px solid #c0c0c0;display:block;color:#272727;font-weight:bold;font-size:11px;padding:4px 30px 0px 8px;font-family:"Arial Narrow", Arial, Tahoma;} /* end */ /* page-wrap, repats the background image on 100% of your display width */ #page-wrap {background:url(../img/bg-body.jpg) repeat-x;} /* top section of main page formats main logo, header slogan (h1), additional text (p), upper main menu with links (main-menu), lcd display (#lcd-container) and buttons like "our services" */ #top {background:url(../img/bg-top.jpg) no-repeat top center;border-bottom:0px;} #top a.logo {float:left;display:block;} #top h1 {font-size:32px;width:450px;padding:14px 0px 19px 10px;height:74px;cursor:default;line-height:normal;} #top p {width:450px;height:60px;cursor:default;padding:0px 0px 0px 10px;} #main-menu {float:right;padding:19px 0px 19px 0px;} #main-menu li {display:block;float:left;margin:0px 10px 0px 0px;padding:6px 10px 6px 10px;} #main-menu li a {color:#f7f8f6;} #main-menu li a:hover {color:#b7b7b7;} #main-menu .active {background:#e2e2e2;border:1px solid #272727;margin-top:-1px;} #main-menu .active a {color:#000;} /* lcd-container, contains the background with LCD monitor but without the rotated image */ #lcd-container {background:url(../img/bg-lcd-blank.png) no-repeat;height:286px;width:400px;display:block;position:absolute;right:0px;top:60px;} /* lcd li - defines the gap of img inbetween

tags - 9px from top, 0px from right, 0px from bottom and 8px from left ex: padding:1px 2px 3px 4px; means: 1px gap from top, 2px gap from right, 3px gap from bottom, 4px gap from left */ #lcd li {padding:9px 0px 0px 8px;} #main-buttons {padding:14px 0px 11px 0px;float:left;display:block;} #main-buttons li {float:left;display:block;margin:0px 10px 0px 0px;} #main-buttons li a {background:url(../img/bg-top-buttons.jpg) no-repeat;width:208px;height:30px;display:block;border:1px solid #4c4d4f;padding:8px 0px 0px 10px;font-family:"Arial Narrow", Arial, Tahoma;font-size:18px;font-weight:bold;color:#272727;} #main-buttons li a:hover {background:url(../img/bg-top-buttons2.jpg) no-repeat;width:208px;height:30px;display:block;border:1px solid #4c4d4f;padding:8px 0px 0px 10px;font-family:"Arial Narrow", Arial, Tahoma;font-size:18px;font-weight:bold;color:#272727;} /* end */ /* IE Fix */ #main-buttonsx {padding:14px 0px 11px 0px;float:left;display:block;} #main-buttonsx li {float:left;display:block;margin:0px 10px 0px 0px;} #main-buttonsx li a {background:url(../img/bg-top-buttons.jpg) no-repeat;width:208px;height:30px;display:block;border:1px solid #4c4d4f;padding:8px 0px 0px 10px;font-family:"Arial Narrow", Arial, Tahoma;font-size:18px;font-weight:bold;color:#272727;} #main-buttonsx li a:hover {background:url(../img/bg-top-buttons2.jpg) no-repeat;width:208px;height:30px;display:block;border:1px solid #4c4d4f;padding:8px 0px 0px 10px;font-family:"Arial Narrow", Arial, Tahoma;font-size:18px;font-weight:bold;color:#272727;} /* end */ /* defines the height of top section for sub-pages so you dont need to use other backgrounds to have different images on main page (heigher) and sub-pages (smaller) */ .sub-page {height:120px;border-bottom:1px solid #818180;} /* content section */ #content {padding:20px 0px 20px 0px;background:#fff;position:relative;} /* big slogan on the sub-pages */ #content h1 {font-size:35px;padding:20px 0px 30px 10px;} #content h2 {font-size:18px;} /* left menu on sub-pages */ #submenu {width:218px;font-family:"Arial Narrow", Arial, Tahoma;font-weight:bold;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;margin:0px 0px 40px 0px;background:#eee;} #submenu a {font-size:18px;color:#272727;width:200px;} #submenu li {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow.jpg) no-repeat 180px 10px #eee;display:block;height:22px;} #submenu li:hover {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-hover.jpg) no-repeat 180px 10px #f6f6f6;display:block;height:22px;} #submenu .active {width:208px;position:relative;border:1px solid #a8a8a8;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-selected.jpg) no-repeat 180px 10px #bacbdb;display:block;height:22px;} #submenu .active:hover {width:208px;position:relative;border:1px solid #a8a8a8;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-selected.jpg) no-repeat 180px 10px #bacbdb;display:block;height:22px;} /* end */ /* IE Fix sub-pages */ #submenux { width:218px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; margin:0px 0px 40px 0px; background:#eee; } #submenux a {font-size:14px;color:#272727;width:200px;} #submenux li {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow.jpgx) no-repeat 180px 10px #eee;display:block;height:22px;} #submenux li:hover {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-hover.jpgx) no-repeat 180px 10px #f6f6f6;display:block;height:22px;} #submenux .active {width:208px;position:relative;border:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-selected.jpgx) no-repeat 180px 10px #bacbdb;display:block;height:22px;} #submenux .active:hover {width:208px;position:relative;border:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-selected.jpgx) no-repeat 180px 10px #e0e7ed;display:block;height:22px;} #submenux .active1 {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow.jpg) no-repeat 180px 10px #eee;display:block;height:22px;} #submenux .active1:hover {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-hover.jpg) no-repeat 180px 10px #f6f6f6;display:block;height:22px;} #submenux .active2 {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow.jpg) no-repeat 180px 10px #eee;display:block;height:22px;} #submenux .active2:hover {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-hover.jpg) no-repeat 180px 10px #f6f6f6;display:block;height:22px;} #submenux .active3 {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow.jpg) no-repeat 180px 10px #eee;display:block;height:22px;} #submenux .active3:hover {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:url(../img/submenu-arrow-hover.jpg) no-repeat 180px 10px #f6f6f6;display:block;height:22px;} /* end */ /* search bar on sub-pages */ #search {background:#eee;width:198px;border:1px solid #dcdcdc;padding:10px;height:60px;} #search .input {padding:3px;color:#7b7b7b;font-size:12px;border:1px solid #aeaeae;font-family:Tahoma, Geneva, sans-serif;float:left;width:160px;margin:1px 0px 0px 0px;} #search .submit {background:url(../img/icon-search.png) no-repeat;border:0px;height:24px;width:22px;float:right;cursor:pointer;} /* end */ /* latest works box on services sub-page */ #latest-works {background:#eee;padding:10px;width:198px;border:1px solid #dcdcdc;margin:40px 0px 0px 0px;} #latest-works img {margin:10px 0px 0px 0px;} /* end */ /* contact box displayed on contact page */ #contact-sub {background:#eee;padding:10px;width:198px;border:1px solid #dcdcdc;line-height:18px;} #contact-sub a {color:#6e8893;} /* global parameters only for objects in #main-content div */ #main-content {float:right;width:670px;} #main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5 {padding:0px 0px;} #main-content h1 {font-size:24px;} #main-content h2 {font-size:20px;} #main-content h3 {font-size:16px;} #main-content h4 {font-size:14px;} #main-content h5 {font-size:9px;} #main-content p {padding:10px 0px 15px 0px;} blockquote {background:url(../img/blockquote-open.jpg) no-repeat top left #f5f5f5;margin:20px 0px 20px 0px;padding:30px 0px 0px 60px;line-height:18px;font-style:italic;border:1px solid #b5b5b5;} blockquote div {background:url(../img/blockquote-closed.jpg) no-repeat bottom right;padding:0px 60px 30px 0px;color:#515151;} /* end */ /* welcome box on main page */ #welcome {background:url(../img/bg-welcome-box.jpg) repeat-x #fff;width:498px;padding:10px;border:1px solid #cbcbcb;float:left;} #welcome a {color:#272727;} #welcome a:hover {text-decoration:underline;} #welcome h2 {border-bottom:1px solid #e4e4e4;padding:0px 0px 7px 0px;font-size:20px;} #welcome p {padding:7px 0px 0px 0px;} #welcome img {float:left;padding:10px 10px 10px 0px;} #welcome ul {clear:both;} #welcome ul li {background:url(../img/welcome-arrow-right.png) no-repeat 0px 6px;padding:3px 0px 3px 20px;line-height:18px;} /* end */ /* features box on main page */ #features {float:right;width:380px;} #features h2 {padding:10px 0px 0px 0px;font-size:20px;} #features ul {clear:both;} #features ul li {clear:both;margin:10px 0px 30px 0px;padding:0px 0px 0px 0px;line-height:18px;} #features img {float:left;padding:0px 10px 0px 0px;} /* end */ /* divs on blog sub-page */ #blog li {padding:0px 0px 30px 0px;margin:0px 0px 20px 0px;border-bottom:1px solid #c9c9c9;float:left;display:block;width:670px;} #blog li:last-child {border:0px;margin:0px;} #blog img {float:right;border:1px solid #dcdcdc;padding:9px;background:#eee;margin:20px 0px 0px 10px;} #blog span {display:block;font-size:10px;padding:10px 0px 10px 0px;} #blog span a {color:#272727;} /* end */ /* divs on blog-j sub-page */ #blog-j li {padding:0px 0px 30px 0px;margin:0px 0px 20px 0px;border-bottom:1px solid #c9c9c9;float:left;display:block;width:670px;} #blog-j li:last-child {border:0px;margin:0px;} #blog-j img {float:left;border:1px solid #dcdcdc;padding:9px;background:#eee;margin:0px 0px 0px 10px;} #blog-j span {display:block;font-size:10px;padding:10px 0px 10px 0px;} #blog-j span a {color:#272727;} /* end */ /* divs on blog-j1 sub-page */ #blog-j1 li {padding:0px 0px 30px 0px;margin:0px 0px 20px 0px;border-bottom:1px solid #c9c9c9;float:left;display:block;width:670px;} #blog-j1 li:last-child {border:0px;margin:0px;} #blog-j1 img {float:left;border:1px solid #dcdcdc;padding:9px;background:#eee;margin:0px 0px 0px 0px;} #blog-j1 span {display:block;font-size:10px;padding:10px 0px 10px 0px;} #blog-j1 span a {color:#272727;} /* end */ /* div on works sub-page */ #works {margin:0px 0px 0px -50px;float:left;} #works li {float:left;width:304px;padding:0px 0px 40px 50px;} #works img {border:1px solid #cbcbcb;padding:3px;background:#eee;} #works p {padding:5px 0px 0px 0px;} #works h4 {font-size:16px;padding:3px 0px 0px 0px;} /* end */ /* bottom section of page (get in touch - fast contact) */ #bottom {background:url(../img/bg-bottom.jpg) repeat-x;height:96px;border-top:1px solid #d6d6d6;padding:10px 0px 10px 0px;} #bottom h2 {font-size:18px;padding:0px 0px 0px 10px;} #bottom p {line-height:18px;padding:10px 0px 10px 10px;} #bottom span {margin:0px 10px 0px 0px;color:#767676;padding:0px 0px 0px 10px;} #bottom span img {vertical-align:middle;padding:0px 2px 0px 0px;} #bottom span a {color:#6e8893;} #bottom .twitter {position:absolute;right:0;display:block;background:url(../img/icon-twitter.png) no-repeat 0px 20px;padding:40px 0px 0px 55px;font-size:10px;color:#000;height:35px;color:#272727;} #bottom a.twitter:hover {text-decoration:underline;} /* end */ /* footer section containing smaller logo, copyright and links */ #footer {font-size:10px;padding:20px 0px 30px 0px;color:#7a7a7a;border-top:1px solid #d6d6d6;} #footer img {float:left;margin:-35px 10px 0px 0px;position:relative;} #footer a {color:#7a7a7a;margin:0px 5px 0px 5px;} #footer span {padding:0px 15px 0px 0px;} #footer ul {list-style:none;} #footer li {float:left;} /* end */ /* contact form divs */ #form {float:left;list-style:none;width:450px;padding:0px 0px 20px 0px;} #form li {padding:0px;margin:0px;clear:both;} #form label {font-family:Tahoma, Geneva, sans-serif;font-weight:bold;padding:20px 0px 4px 0px;display:block;margin:0px;float:left;} #form .field {border:1px solid #c4c4c4;background:#f9f9f9;color:#666;padding:5px;font:12px Tahoma, Geneva, sans-serif;width:380px;} #form textarea {border:1px solid #c4c4c4;background:#f9f9f9;color:#666;padding:5px;font:12px Tahoma, Geneva, sans-serif;width:440px;} /* message is visible only after someone click "send message" button in the contact form */ .message {display:none;margin-top:30px;padding:0px 0px 0px 20px;width:200px;float:right;} .contact-submit {background:url(../img/contact-form-send.jpg) no-repeat;width:118px;height:26px;border:0px;cursor:pointer;float:right;margin:20px 0px 20px 0px;padding:0px;} /* additional centered message */ #form .msg {clear:both;text-align:center;} /* end */