/* CSS Document */ /* --------------------------------------------- 01. main/default elements --------------------------------------------- */ body { background:url(../images/bgbody.gif) repeat-x; font-family:Arial, Helvetica, sans-serif} p { font-size:14px; color:#666666} h2 { font-size:20px; color:#2F0237} h2 a { color:#2F0237; text-decoration:none} h2 a:hover { color:#2F0237; text-decoration:underline} h3 { font-size:18px; color:#330033} h3 a { color:#330033; text-decoration:none} h3 a:hover { color:#330033; text-decoration:underline} h6 { font-size:14px; color:#FFFFFF} /* --------------------------------------------- 02. container and wrapper --------------------------------------------- */ #container { width:100%; height:256px; float:left; background:url(../images/bgcontainer.jpg) no-repeat top center} #wrapper { width:960px; margin:0 auto} /* --------------------------------------------- 03. header --------------------------------------------- */ #header { width:895px; height:175px; float:left; padding:0 25px 0 40px} #header .logo { width:285px; height:92px; float:left; background:url(../images/logo.png) no-repeat; margin-top:51px; position:relative} #header .logo-link { width:285px; height:92px; float:left; position:absolute} #header .nodisplay { display:none} #header .buttonneedpartner { float:right; margin-left:-12px; padding-right:15px; position:relative} #header .phone { height:32px; float:right; background:url(../images/bgcall.gif) no-repeat; padding:7px 32px 0 22px;} #header .phone h2 { font-size:18px; color:#7C5695} #header .phone h2 span { color:#FFFFFF; font-weight:bold} #header .menu { width:536px; height:39px; float:right; margin-top:51px} #header .menu ul li { float:left; padding-left:9px} #header .menu ul li span { display:none} #header .menu ul li a {height:39px; float:left; background:url(../images/bgmenu.png) no-repeat} #header .menu ul li a.home { width:67px; background-position:-12px -0px} #header .menu ul li a.home:hover { width:67px; background-position:-12px -39px} #header .menu ul li.selected a.home { background-position:-12px -39px} #header .menu ul li a.about { width:94px; background-position:-89px 0} #header .menu ul li a.about:hover { background-position:-89px -39px} #header .menu ul li.selected a.about { background-position:-89px -39px} #header .menu ul li a.services { width:121px; background-position:-194px 0} #header .menu ul li a.services:hover { width:121px; background-position:-194px -39px} #header .menu ul li.selected a.services { width:121px; background-position:-194px -39px} #header .menu ul li a.portfolio { width:98px; background-position:-327px 0} #header .menu ul li a.portfolio:hover { width:98px; background-position:-327px -39px} #header .menu ul li.selected a.portfolio { width:98px; background-position:-327px -39px} #header .menu ul li a.contact { width:110px; background-position:-437px 0} #header .menu ul li a.contact:hover { width:110px; background-position:-437px -39px} #header .menu ul li.selected a.contact { width:110px; background-position:-437px -39px} /* --------------------------------------------- 04. content and content borders --------------------------------------------- */ #content { width:960px; float:left; margin-bottom:-45px; position:relative} #content h3 { font-weight:bold} #content .contentbordertop { width:960px; height:15px; float:left; background:url(../images/bgcontentbordertop.png) no-repeat; overflow:hidden} #content .contentbordermiddle { width:942px; float:left; background:url(../images/bgcontentbordermiddle.png) repeat-y; padding:0 9px} #content .contentborderbottom { width:960px; height:15px; float:left; background:url(../images/bgcontentborderbottom.png) no-repeat; overflow:hidden} /* --------------------------------------------- 05. banner with slideshow --------------------------------------------- */ #banner { width:882px; float:left; background: url(../images/bgcontent.gif) repeat-x; padding:28px 30px 33px 30px} #banner .content { width:315px; float:left; padding-right:24px; padding-top:30px} #banner .content .buttonview { float:left; padding-top:55px} #banner .content .buttonview a { width:260px; height:54px; float:left; background:url(../images/bgmenu.png) no-repeat; background-position:0 -217px;} #banner #slideshow { width:495px; height:338px; float:left; background:url(../images/bg_slideshow.jpg) no-repeat; padding:21px 24px} #slide { width:495px} #slide-scroller { margin:0px 0 0 0px;} #slide-scroll.scrollable { width:495px; height:340px; position:relative; overflow:hidden;} #slide-scroll.scrollable .items { width:20000em; height:340px; position:absolute; clear:both} #slide-scroll.scrollable .item { width:495px; float:left} #slide-scroll.scrollable .item img { width:495px; height:308px} #slide-scroll.scrollable .item a { text-decoration:none} #slide-scroll.scrollable .item span { font-size:14px; font-weight:bold; color:#2F0135; text-decoration:none; float:left; padding-top:10px;} .prevPage, .nextPage { width:58px; height:58px; background:url(../images/bgmenu.png) no-repeat; text-indent:-9999em; position: absolute; left:355px; top:198px; outline:0} .prevPage { background-position:0px -78px} .nextPage { background-position:-58px -78px; left:auto; right:23px !important} #slide-scroller .navi { margin:-18px -5px 0 0; float:right; background:#ECEBED; text-align:right; position:relative; padding-left:10px} #slide-scroller .navi a { margin:0 2px; width:13px; height:14px; background:url(../images/bgmenu.png) no-repeat; background-position:0px -136px; display:inline-block; overflow:hidden} #slide-scroller .navi a.active { background-position:-13px -136px} /* --------------------------------------------- 06. services --------------------------------------------- */ #services { width:942px; float:left; background:#F4F3F5; border-bottom:1px solid #DDDDDD; margin-bottom:65px} .serviceslist { width:927px; float:left; background:#F4F3F5 url(../images/bg_services.gif) repeat-x; border-top:1px solid #DADADB; padding:20px 0 0 15px} .serviceslist .set { width:210px; float:left; background:url(../images/divider_services.gif) no-repeat top right; padding-left:15px; padding-right:5px; padding-bottom:15px} .serviceslist .right { background:none} .serviceslist .set .photo { width:210px; float:left; padding-bottom:10px} .serviceslist .set .content { width:206px; float:left; padding-bottom:15px} .serviceslist .set h3 { padding-bottom:3px} .serviceslist .set p { line-height:1.5em} .serviceslist .set p.readmore { font-weight:bold} .serviceslist .set p.readmore a { float:left; color:#6E2774; text-decoration:none; background:url(../images/arrow.gif) no-repeat 0 8px; padding-left:12px} .serviceslist .set p.readmore a:hover { color:#6E2774; text-decoration:underline} #services .buttonservices { float:left; padding-left:30px; margin-bottom:-17px; position:relative} #services .buttonservices a { width:166px; height:33px; float:left; background: url(../images/bgmenu.png) no-repeat; background-position:0 -150px} #services .buttonservices { float:left; padding-left:30px; margin-bottom:-17px; position:relative} #services .buttonservices a { width:166px; height:33px; float:left; background: url(../images/bgmenu.png) no-repeat; background-position:0 -150px} /* --------------------------------------------- 07. about --------------------------------------------- */ #about { width:267px; float:left; padding:0 25px 0 30px; padding-bottom:10px} #about h3 { padding-bottom:10px} #about p { line-height:1.5em; padding-bottom:12px} #about p a { color:#6E2774; text-decoration:none; font-weight:bold; background:url(../images/arrow.gif) no-repeat 0 4px;padding-left:12px} #about p a:hover { color:#6E2774; text-decoration:underline} /** Twitter **/ ul.TweetList{ list-style-type: none; margin-left: 0px; padding-left: 0px; } li.Tweet { margin-bottom: 16px; color:#666666; text-decoration:none; font-size:14px; list-style-image:url(../images/twitter.png); list-style-position:inside; line-height:20px; } li.Tweet span { font-style:italic; font-size:10px;} /* --------------------------------------------- 08. clients --------------------------------------------- */ #clients { width:268px; float:left; padding-right:25px} #clients h3 { padding-bottom:10px} #clients p { font-size:16px; color:#666666; font-style:italic; line-height:1.6em; padding-bottom:25px} #clients p a { color:#6E2774; text-decoration:none; font-weight:bold} /* --------------------------------------------- 09. get in touch --------------------------------------------- */ #getintouch { width:253px; float:left; background:#F4F3F5; border:1px solid #CFCFCF; padding:20px} #getintouch h3 { padding-bottom:15px} #getintouch { width:253px; float:left} #getintouch .input { width:225px; height:30px; float:left; background:url(../images/bg_input.gif) repeat-x; border:1px solid #BDBCBD; font-size:14px; color:#666666; line-height:30px; padding:0 13px; margin-bottom:16px} #getintouch .textarea { width:225px; height:38px; float:left; background:url(../images/bg_textarea.gif) repeat-x; border:1px solid #BDBCBD; font-size:14px; color:#666666; padding:8px 13px; margin-bottom:16px} /**#getintouch .buttonsubmit { width:83px; height:34px; float:right; background:url(../images/bgmenu.png) no-repeat; border:none; background-position:0 -183px}**/ #getintouch .buttonsubmit { float:right; border:none; } /* --------------------------------------------- 10. footer --------------------------------------------- */ #bgfooter { width:100%; height:235px; float:left; background:#2F0135 repeat-x; background-position:0 -84px; padding-top:35px} #footer { width:920px; margin:0 auto} #footer h6 { line-height:1.8em; padding-bottom:2px} #footer h6 span { font-weight:bold} #footer p { font-size:12px; color:#82547B} #footer p a { color:#82547B; text-decoration:none} #footer p a:hover { color:#82547B; text-decoration:underline} #footer .leftcontent { float:left; padding-left:20px; padding-top:35px} #footer .rightcontent { width:250px; float:right} #footer .rightcontent ul li { float:right; padding-left:10px; padding-bottom:35px; position:relative} #footer .rightcontent ul li a { width:110px; height:33px; float:left} #footer .rightcontent ul li.facebook a { background:url(../images/sprite3.gif) no-repeat} #footer .rightcontent ul li.twitter a { background:url(../images/sprite3.gif) no-repeat; background-position:0 -33px} #footer .logofooter { float:right} /* --------------------------------------------- 11. portfolio page styles --------------------------------------------- */ #portfolio { width:882px; float:left; background:url(../images/bgcontent.gif) repeat-x; padding:20px 30px 0 30px} #portfolio h1 { padding-bottom:12px} #portfolio .set { width:882px; float:left; padding-top:20px; padding-bottom:30px} #portfolio .set .photo { width:487px; height:300px; float:left; border:5px solid #BFBDBD} #portfolio .set .photo a { width:485px; height:298px; float:left; border:1px solid #FFFFFE} #portfolio .set .indevelopment { float:right; margin-top:-301px; position:relative} #portfolio .set .content { width:355px; float:left; padding-left:29px} #portfolio .set .content h2 { font-weight:bold; line-height:1em; padding-bottom:10px} #portfolio .set .content p { line-height:1.6em; padding-bottom:20px} #portfolio .set .content ul li { font-size:14px; color:#666666; line-height:1.2em; background:url(../images/li_tick.gif) no-repeat; padding-left:27px; padding-bottom:5px;} #portfolio .set .content .buttonview { float:left;padding-top:28px} #portfolio .set .content .buttonview a { width:201px; height:33px; float:left; background:url(../images/bgmenu.png) no-repeat; background-position:0 -312px} /* --------------------------------------------- 12. details page --------------------------------------------- */ #details { width:882px; float:left; background:url(../images/bgcontent.gif) repeat-x; padding:20px 30px 15px 30px} /* --------------------------------------------- 12.1 details page - leftpanel --------------------------------------------- */ #leftpanel { width:550px; float:left} #leftpanel h1 { font-size:20px; padding-bottom:20px} #leftpanel h2 { padding-bottom:20px} #leftpanel h2.price { color:#9C3181; font-weight:normal; padding-bottom:30px} #leftpanel p { line-height:1.5em; padding-bottom:20px} #leftpanel .list { width:550px; float:left} #leftpanel ul { width:265px; float:left; padding:10px 15px 35px 0} #leftpanel ul.right { padding-right:0} #leftpanel ul li { font-size:16px; font-weight:bold; color:#2F0237; line-height:1.2em; background:url(../images/li_tick.gif) no-repeat 0 2px; padding-left:35px; padding-bottom:7px;} #leftpanel .buttonquote { float:left; padding-bottom:65px} #leftpanel .buttonquote a { width:221px; height:41px; float:left; background:url(../images/bgmenu.png) no-repeat; background-position:0px -271px;} /**#leftpanel .buttonview { float:left; padding-left:20px; padding-bottom:65px}**/ #leftpanel .buttonview { float:right; padding-left:0px; padding-bottom:30px} #leftpanel .buttonview a { width:211px; height:41px; float:left; background:url(../images/bgmenu.png) no-repeat; background-position:-221px -271px;} #leftpanel .interesting_services { width:550px; float:left} #leftpanel .interesting_services .set { width:550px; float:left; padding-bottom:12px} #leftpanel .interesting_services .set .photo { width:85px; float:left} #leftpanel .interesting_services .set .content { width:450px; float:left} #leftpanel .interesting_services .set .content p a { color:#6E2774; text-decoration:none; font-weight:bold; background:url(../images/arrow.gif) no-repeat 0 4px; padding-left:12px} #leftpanel .interesting_services .set .content p a:hover { color:#6E2774; text-decoration:underline} /* --------------------------------------------- 12.2 details page - rightpanel --------------------------------------------- */ #rightpanel { width:295px; float:left; padding-left:37px} #rightpanel #clients { width:290px; float:left; padding:40px 0 0 0px} /* --------------------------------------------- 13. our services --------------------------------------------- */ #ourservices { width:942px; float:left; background:url(../images/bgcontent.gif) repeat-x} #ourservices h1 { padding:30px 0 30px 30px} #ourservices .serviceslist .setlist { width:927px; float:left; padding-bottom:45px} #ourservices .serviceslist .set { padding-bottom:40px} /* --------------------------------------------- 14. General Content --------------------------------------------- */ #leftpanel ul.wide { width:511px; float:left; padding:10px 15px 35px 0 } #leftpanel ul.wide li { font-size:16px; font-weight:bold; color:#2F0237; line-height:1.2em; background:url(../images/li_tick.gif) no-repeat 0 2px; padding-left:35px; padding-bottom:12px;}