@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;font:12px/18px Arial, Helvetica, sans-serif;color:#272727;background:#FFF;} .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;} *{ outline:none;} /* 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:25px; width:118px; display:block; text-indent:-9999px;} a.more:hover {background:url(../img/bg-more-buttonh.jpg) no-repeat top right;} /* end */ /* page-wrap, repats the background image on 100% of your display width */ #page-wrap {background:url(../img/bg-body.gif) 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; height:401px; overflow:hidden;} #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:0px;} #main-menu li a {color:#405b6d; padding:8px 15px; font:bold 13px Arial, Helvetica, sans-serif; text-shadow:0px 1px 0px #fff; } #main-menu li a:hover, #main-menu li.active a {color:#fff; background:#009fde; text-shadow:0px 1px 0px #00598f;} .logoHolder{margin:10px 0 0 0; height:53px; display:block; width:160px;} /* 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:310px;width:383px;display:block;position:absolute;right:0px;top:87px;} /* 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:14px 0px 0px 15px;} #main-buttons {padding:80px 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 */ /* 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:195px!important;border-bottom:1px solid #818180;} /* content section */ #content {padding:0px 0px 20px 0px; background:url(../img/content-bg.gif) repeat-x left top #fff; position:relative;} /* big slogan on the sub-pages */ #content h1 {font-size:24px;padding:10px 0px 30px 0px; color:#0070b9; text-shadow:0px 1px 0px #fff;} #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 #afafaf;border-right:1px solid #afafaf;border-bottom:1px solid #afafaf;margin:0px 0px 20px 0px;background:#d2d2d2;} #submenu a { font-weight:normal;font-size:18px;color:#525252;width:200px; display:block; height:37px;} #submenu a:hover{color:#FFF!important; text-shadow:0px 1px 0px #757575;} #submenu li {width:208px;border-top:1px solid #dcdcdc;padding:8px 0px 8px 10px;background:#eee;display:block;height:22px; text-shadow:0px 1px 0px #fff;} #submenu li:hover {width:208px;border-top:1px solid #e0e0e0;padding:8px 0px 8px 10px;background:#a5a5a5;display:block;height:22px; } #submenu .active {width:208px;position:relative;border-top: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-top: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 a{ color:#000; height:37px;} #submenu .active a:hover{ color:#000!important;text-shadow:0px 1px 0px #ccc!important;} /* end */ /* search bar on sub-pages */ #search {background:#eee;width:198px;border:1px solid #dcdcdc;padding:10px;height:25px;} #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 {width:222px;margin:40px 0px 0px 0px;} #latest-works img {margin:10px 0px 0px 0px; border:2px solid #fff;} /* end */ /* contact box displayed on contact page */ #contact-sub {width:222px;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:18px;color:#272727;} #main-content h2 {font-size:16px;color:#272727;} #main-content h3 {font-size:14px;color:#272727;} #main-content h4 {font-size:13px;color:#272727;} #main-content h5 {font-size:9px;color:#272727;} #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 #c6c6c6;} 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:10px;margin:0px 0px 10px 0px;border:1px solid #dbdbdb;float:left;display:block;width:670px; background:#f7f7f7;} #blog li:last-child {margin:0px;} #blog img {float:right;border:1px solid #cbcbcb;padding:3px;background:#fff;margin:20px 0px 0px 10px;} #blog span {display:block;font-size:10px;padding:10px 0px 10px 0px;} #blog 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:#fff;} #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:#454545;height:96px;border-top:1px solid #3d3d3d;padding:5px 0px 0px 0px; color:#bcbbbb;} #bottom h2 {font-size:18px;padding:0px 0px 0px 10px; color:#bcbbbb;} #bottom p {line-height:18px;padding:10px 0px 10px 10px;} #bottom span {margin:0px 10px 0px 0px;color:#bcbbbb;} #bottom span img {vertical-align:middle;padding:0px 2px 0px 0px;} #bottom span a {color:#bcbbbb;} #bottom span a:hover{ text-decoration:underline; color:#FFF;} #bottom .twitter {position:absolute;right:0;display:block;background:url(../img/icon-twitter.png) no-repeat 0px 0px; text-indent:-9999px; height:47px; width:135px; margin-top:25px;} #bottom a.twitter:hover {text-decoration:underline;} /* end */ /* footer section containing smaller logo, copyright and links */ #footer {font-size:10px;padding:20px 0px 10px 0px;color:#bcbbbb; background:url(../img/footerbg.gif) repeat-x left top #2f2f2f;} #footer img {float:left;margin:-75px 10px 0px 0px;position:relative;} #footer a {color:#bcbbbb;margin:0px 5px 0px 5px;} #footer a:hover{ color:#FFF;} #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-top:1px solid #a1a1a1;border-left:1px solid #a1a1a1;border-bottom:1px solid #e3e3e3;border-right:1px solid #e3e3e3;background:#f9f9f9;color:#666;padding:5px;font:12px Tahoma, Geneva, sans-serif;width:440px;} #form textarea {border-top:1px solid #a1a1a1;border-left:1px solid #a1a1a1;border-bottom:1px solid #e3e3e3;border-right:1px solid #e3e3e3;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:134px;height:37px;border:0px;cursor:pointer;float:right;margin:20px 0px 20px 0px;padding:0px;} .contact-submit:hover {background:url(../img/contact-form-sendh.jpg) no-repeat;} /* additional centered message */ #form .msg {clear:both;text-align:center;} /* end */ /* new css */ .bannerText{padding:50px 0 0 30px ; width:480px;} .bannerText h1{ color:#fff; font:bold 24px Arial, Helvetica, sans-serif; text-shadow:0px 1px 0px #005180; padding-bottom:20px;} .bannerText p{ color:#FFF; text-shadow:0px 1px 0px #017fc9; font:12px/20px Arial, Helvetica, sans-serif;} .servicesBtn{ background:url(../img/servicesbtn.png) no-repeat left top; display:block; text-indent:-9999px; height:40px; width:181px;} .servicesBtn:hover{ background:url(../img/servicesbtnh.png) no-repeat left top;} .aboutUsBtn{background:url(../img/aboutusbtn.png) no-repeat left top; display:block; text-indent:-9999px; height:40px; width:181px; margin-left:15px;} .aboutUsBtn:hover{background:url(../img/aboutusbtnh.png) no-repeat left top; } .telePhone{ background: url(../img/telephoneicon.gif) no-repeat left top; height:24px; padding-left:35px; padding-top:6px; display:block; float:left;} .emailIcon{background: url(../img/emailicon.gif) no-repeat left top; height:24px; padding-left:35px; padding-top:6px; display:block; float:left;} #bottom .set-size{ padding-left:120px; width:922px;} .blocks{float:left; width:301px; padding:10px 19px 20px 0px;} .blocks h3{ color:#0070b9; font:bold 16px Arial, Helvetica, sans-serif; padding-bottom:10px; padding-top:6px;} .rightBlock{ padding-right:0px; float:right;} .welcomeContents{border-top:1px solid #dcdcdc; padding-top:20px;} .welcomeContents h1{ padding:8px 0px 8px 0px!important;} .welcomeContents p{ padding:8px 0 10px 0px;} .welcomeContents img{float:left; margin-right:20px;} .innerContents{ background: url(../img/contentsbg.gif) repeat-x left top; padding:15px 0 0 0;} .topCurve{ background:url(../img/contact-top.gif) no-repeat left top; padding-top:21px;} .btmCurve{ background:url(../img/contact-bottom.gif) no-repeat left bottom; padding-bottom:21px;} .curveBgmid{ background:url(../img/contact-mid.gif) repeat-y left top; padding:0px 10px;}