/* ------------------------------------------------------------- Project Name NetworkPlumping developer@pxdev.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .version 1.0 .updated 13-05-2009 ------------------------------------------------------------- ------------------------------------------------------------- + Page structure + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Resets + Main layout + Forms - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* ------------------------------------------------------------- 0. Rests - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {margin:0; padding:0;} a{ outline:none; text-decoration:none; color:#FFF;} ul{ list-style:none;} .clear{ clear:both;} /* ------------------------------------------------------------- .Comment Classes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .clear{ clear:both;} .span28{ font-size:28px;} .Border{ border:1px solid #666; } /* ------------------------------------------------------------- .Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ body{ background:#000; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; font-weight:100;} #Container{ display:block; width:900px; margin:0 auto; position:relative; padding-bottom:50px;} #Header{ background:#000 url(images/header_bg.jpg) repeat-x top; height:129px; width:900px; position:relative;} #Header .Logo{ position:absolute; left:14px; top:14px;} #Header .Logo a{ display:block; background:url(images/logo.jpg) no-repeat; height:106px; width:614px; text-indent:-9999px;} #Header .Search{ position:absolute; right:138px; top:0; background:url(images/search_ico.jpg) no-repeat 12px center; width:175px; height:35px; padding-left:40px; border:1px solid #232323;} #Header .Search form{ position:relative;} #Header .Search form .searchinput{ position:absolute; top:7px; left:0px; width:105px; height:16px; font-size:11px; font-weight:700; text-align:center;color:#666; font-family:Arial, Helvetica, sans-serif;} #Header .Search form .go{ position:absolute; top:7px; left:120px; border:0;} #Header .CallNow{ position:absolute; top:85px; right:20px;} #Header .CallNow h4{ color:#FFF; font-size:32px; font-weight:700;} #Header .Quotes{position:absolute; right:11px; top:0; background:url(images/quote.jpg) no-repeat 7px center; width:81px; height:35px; padding-left:37px; border:1px solid #232323;} #Header .Quotes a{ padding-top:10px; display:block; font-size:14px; font-weight:700; } #Header .Quotes a:hover{ color:#676666;} /* ------------------------------------------------------------- .Top MainNav - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #MainNav{margin:5px auto 0 auto; width:898px; display:block; background:url(images/list_bg.jpg) repeat-x; height:30px; border:1px solid #666;} #MainNav ul{ } #MainNav ul li{ float:left; display:inline; background:url(images/list_line.jpg) no-repeat left; height:30px; } #MainNav ul li a{ text-decoration:none; color:#FFF; display:block; float:left; padding:8px 11px 9px 11px ; height:12px; font-size:11px; font-weight:700; } #MainNav ul li a:hover{ background:#FFF; color:#000;} #MainNav ul li a.HomeLink{ display:inline; background:url(images/home_link.jpg) no-repeat center top; text-indent:-9999px; height:30px; width:39px; padding:0; margin:0; } #MainNav ul li a:hover.HomeLink{ background:url(images/home_link.jpg) no-repeat center bottom; } /* ------------------------------------------------------------- .Home Page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Contents .HomePage{ display:block; padding-top:10px;} /* Level one => Home page */ #Contents .HomePage .Levelone{ display:block; width:900px; height:321px;} #Contents .HomePage .Levelone .Levelone_Left{ float:left; display:inline; width:245px;} #Contents .HomePage .Levelone .Levelone_Right{ float:left; display:inline; width:649px;} #Contents .HomePage .Levelone .Guaranteed a{ display:block; background:url(images/guaranteed.jpg) no-repeat; width:243px; height:181px; text-indent:-9999px} #Contents .HomePage .Levelone .GIFT{ margin:-10px 0 0 -53px; } #Contents .HomePage .Levelone .GIFT a{ display:block; background:url(images/freegift.png) no-repeat; width:292px; height:141px; text-indent:-9999px;position:relative; cursor:pointer; } /* Level two => Home page */ #Contents .HomePage .Leveltwo .Leveltwo_Left{ background:#000; border:1px solid #666; width:680px; line-height:18px; float:left; } #Contents .HomePage .Leveltwo .Leveltwo_Left .darkBorder{display:block; background:#000 url(images/botttom_grad_logo.gif) no-repeat bottom right ; padding:20px 25px;margin:3px; position:relative; } #Contents .HomePage .Leveltwo .Leveltwo_Left h2{ font-size:16px; font-weight:700; padding-bottom:5px;} #Contents .HomePage .Leveltwo .Leveltwo_Left p{ width:575px; padding-bottom:7px;} #Contents .HomePage .Leveltwo .Leveltwo_Left h3{ padding:20px 0 5px 0;} #Contents .HomePage .Leveltwo .Leveltwo_Left ul{ padding:5px 0 0 10px; list-style:none; } #Contents .HomePage .Leveltwo .Leveltwo_Left ul li{ background:url(images/white_dots.gif) no-repeat left; padding:2px 0 2px 20px;} #Contents .HomePage .Leveltwo .Leveltwo_Left .PlumpingCar{ position:absolute; width:212px; height:139px; right:-10px; bottom:-15px;} #Contents .HomePage .Leveltwo .Leveltwo_Left .PlumpingCar a{ width:212px; height:139px; display:block; text-indent:-9999px; background:url(images/plumping_car.png) no-repeat; } #Contents .HomePage .Leveltwo .Leveltwo_Right{ float:right; width:200px; display:inline; margin-right:2px;} #Contents .HomePage .Leveltwo .Leveltwo_Right .QuickLinks{/*padding:2px 2px 10px 2px ; /*HOME PAGE ONLY*/ height:335px;} .QuickLinks ul li a{ font-size:12px;} .QuickLinks{ background:#ed1c24 url(images/red_grad.gif) repeat-x bottom; border:1px solid #666; padding:2px ;} .QuickLinks .LinksHead{border-bottom:1px solid #FFF; margin-bottom:15px; padding:4px 0 4px 5px; } .QuickLinks .LinksHead h2{ background:url(images/link.gif) no-repeat left; height:24px; display:block; padding:4px 0 0 30px; font-size:18px;} .QuickLinks ul{ list-style:none; padding:0 0 10px 5px;} .QuickLinks ul li{ background:url(images/arrow.gif) no-repeat left 10px; padding:6px 0 7px 15px;} /* ------------------------------------------------------------- .INTERNAL PAGES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .InternalPages .BreadCrumps{ display:block; height:30px; padding-top:10px;} .InternalPages .BreadCrumps ul{ list-style:none;} .InternalPages .BreadCrumps ul li{ float:left; display:inline; padding:0 4px} .InternalPages .BreadCrumps ul li a.treeElement{ background:url(images/arrow_black.gif) no-repeat left; padding-left:10px;} .InternalContents{ display:block;} .InternalContents .SideBar, .InternalContents .Bodycontents{ display:inline; float:left; overflow:hidden; } .InternalContents .SideBar{ width:140px;border:1px solid #666; background:#000 url(images/gray_grad.jpg) repeat-x bottom; } .InternalContents .Bodycontents{ width:540px;margin-left:9px;border:1px solid #666; } .InternalContents .RightAds{ width:195px; display:inline; float:right } .InternalContents .SideBar .darkBorder{ display:block; background:#000 url(images/gray_grad.jpg) repeat-x bottom right ;margin:3px; position:relative; } .InternalContents .SideBar .MenuHead{ display:block; background:#000 url(images/red_head.jpg) repeat-x ; height:36px; } .InternalContents .SideBar .MenuHead h2{ font-size:12px; font-weight:700; padding:9px 0 0 7px;} .InternalContents .SideBar #DarkLeft{ margin:0; padding:0;} .ads img{ border:1px solid #3c3c3c;margin-bottom:10px} .InternalContents .SideBar .darkBorder ul{ list-style:none;} .InternalContents .SideBar .darkBorder ul li{ display:block;border-bottom:1px solid #000; } .InternalContents .SideBar .darkBorder ul li a{ display:block; padding:10px 0 10px 5px; background:#000 url(images/sidemenu_items.jpg) repeat-x bottom ; font-size:11px;} .InternalContents .SideBar .darkBorder ul li a span{ background:url(images/sidemenu_main.gif) no-repeat left 5px; padding-left:10px; display:block; } .InternalContents .SideBar .darkBorder ul li a:hover, .InternalContents .SideBar .darkBorder ul li a.selected{ display:block; background:#FFF ; color:#000; } .InternalContents .SideBar .darkBorder ul li a:hover span, .InternalContents .SideBar .darkBorder ul li a.selected span { background:url(images/sidemenu_hover.gif) no-repeat left 5px; } #Contents .InternalContents .RightAds .Guaranteed a{display:block; width:198px; margin:0 -2px 10px 0;} #Contents .InternalContents .RightAds .Guaranteed a img{ border:0; width:198px;} #Contents .InternalContents .RightAds .GIFT{ margin:-15px 0 10px -39px;width:235px; height:111px } #Contents .InternalContents .RightAds .GIFT a{ display:block; background:url(images/freegift_internal.png) no-repeat; width:235px; height:111px; text-indent:-9999px;position:absolute; cursor:pointer; } #Contents .InternalContents .Bodycontents .darkBorder{ display:block; background:#000 url(images/botttom_grad_logo.gif) no-repeat bottom right ; padding:15px 0 0 0;margin:3px; position:relative; } #Contents .InternalContents .Bodycontents #darkBorder{display:block;} #Contents .InternalContents .Bodycontents .darkBorder p, #Contents .InternalContents .Bodycontents .darkBorder h1, #Contents .InternalContents .Bodycontents .darkBorder h2, #Contents .InternalContents .Bodycontents .darkBorder h3, #Contents .InternalContents .Bodycontents .darkBorder h4{ padding-left:15px; padding-right:8px;} #Contents .InternalContents .Bodycontents .darkBorder img{ margin:15px 8px ;} #Contents .InternalContents .Bodycontents .darkBorder h1{ font-size:20px; font-weight:100; padding-bottom:15px; } #Contents .InternalContents .Bodycontents .darkBorder h2{ font-size:16px; font-weight:700; padding-top:10px; padding-bottom:5px; } #Contents .InternalContents .Bodycontents .darkBorder h4{ font-size:12px; font-weight:700; padding-bottom:5px; } #Contents .InternalContents .Bodycontents .darkBorder h3{ font-size:14px; font-weight:700; padding-bottom:10px; padding-top:10px; } #Contents .InternalContents .Bodycontents .darkBorder h6{ font-size:16px; font-weight:700; padding-bottom:10px; padding-top:10px; padding-left:20px; } #Contents .InternalContents .Bodycontents .darkBorder p{ padding-bottom:10px;} #Contents .InternalContents .Bodycontents .darkBorder strong{ padding-bottom:10px;} #Contents .InternalContents .Bodycontents .darkBorder ul{ padding:5px 0 30px 30px; list-style:none; } #Contents .InternalContents .Bodycontents .darkBorder ul li{ background:url(images/white_dots.gif) no-repeat left; padding:5px 0 5px 20px;} .Red_Block{ background:#ed1c24; margin:10px auto} .Red_Block table td{ padding-left:10px;} #Contents .InternalContents .Bodycontents .darkBorder .Red_Block table td h3{ padding-bottom:5px; font-size:16px; padding-left:5px;} #Contents .InternalContents .Bodycontents .darkBorder .Red_Block table td p{ padding-left:5px;} .our_mission{ background:url(images/mission_bg.jpg) no-repeat right bottom; height:278px; } .our_mission h3{ font-size:17px; padding:10px 10px 5px 10px; } .our_mission p{ padding:0 10px 10px 10px; width:420px; } #Contents .InternalContents .Bodycontents .darkBorder .Steps{ display:block; margin:5px 0;} #Contents .InternalContents .Bodycontents .darkBorder .Steps h2{padding:15px 0 20px 15px;} #Contents .InternalContents .Bodycontents .darkBorder .Steps h3{ padding-bottom:5px;} #Contents .InternalContents .Bodycontents .darkBorder .Steps p {padding:0 10px 25px 25px;} #Contents .InternalContents .Bodycontents .darkBorder .garanteed_red{ margin:-55px 0 0 -2px;} .Block{ border:1px solid #FFF; width:520px; margin:15px auto;} .Red{ background:#ed1c24;} .Gray{ background:#1f1d1d;} .red_arrow{ margin-left:16px; margin-right:30px; font-size:12px; font-weight:700; background:url(images/arrow_01.gif) no-repeat; padding-left:20px;} .Contacts_info{ display:block;color:#FFF;} .Contacts_info{ display:block;color:#FFF;} .Contacts_info .left_info{ display:inline; float:left; width:280px; position:relative;} .Contacts_info .MAP{ display:inline; float:right; margin-top:-35px;height:185px;width:210px; margin-right:15px;} .Contacts_info .MAP a, .Contacts_info .MAP span{ display:none;} /* ------------------------------------------------------------- .Forms - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ form.extended{ padding:15px 0 90px 20px; background:#333 url(images/forms_bg.gif) no-repeat bottom right; position:relative; } input, textarea{ background:#FFF url(images/input_bg.jpg) repeat-x top; border-top:1px solid #727272; border-bottom:1px solid #DADADA; border-left:1px solid #B4B4B4; border-right:1px solid #B4B4B4; border-top:1px solid #727272;} .input{ display:block; position:relative; height:30px; width:330px;} #CheckBoxGroup { padding:5px 0 0 10px; position:relative;} #CheckBoxGroup .input{ width:170px;} form.extended h5{ font-size:12px; padding:10px 0; font-weight:700; width:450px; display:block; } .input span{ position:absolute; right:0; top:5px;} .input label{ font-weight:700;} .text input, .textarea textarea, .check input , .submit input{ position:absolute;} .text input{ left:120px;width:200px;} .textarea{ height:160px;} .textarea textarea{ top:30px; left:120px; width:200px; overflow:hidden; height:100px;} .check input{ left:0; border:0; background:none;} .check label{ left:25px; position:absolute; font-weight:100;} .submit{ position:relative; height:90px;} .submit input{ right:-55px; border:1px solid #e0e0e0; background:#FFF; border:0; font-weight:700; color:#595959; top:15px; } .star_for_required{ font-weight:700; position:absolute; top:20px; left:-15px;} .security_code{ height:60px; position:relative;} .security_code img{ position:absolute; left:100px; top:0; } .security_code input{ position:absolute; left:218px; top:20px; width:102px;} .security_code label{ position:absolute; top:20px; left:0; font-weight:700;} .check{ height:25px;} .Error { background:#eedbd5 url(images/error_msg.gif) no-repeat 10px 10px; height:auto; text-align:left; width:350px; border:1px solid #bd5748; padding:14px 0 10px 40px; margin:0 auto 30px auto; color:#bd5748; font-weight:700; } .msg { background:#e6ebc3 url(images/suc_msg.gif) no-repeat 10px 10px; height:auto; text-align:left; width:400px; border:1px solid #709f33; padding:14px 0 10px 40px; margin:30px auto 30px auto; color:#709f33; font-weight:700; } .Notemessage { background:#FEF9F1 url(images/warn.gif) no-repeat 10px 10px; height:auto; text-align:left; width:400px; border:1px solid #9C3C1C; padding:20px 0 10px 60px; margin:30px auto 30px auto; color:#9C3C1C; font-weight:700; } .Error ul{ list-style:decimal; padding:3px 0 0 20px;} /* ------------------------------------------------------------- .Others - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .BookingLeft{ width:300px; float:left;display:inline; position:relative; } .Booking_img{float:right; display:inline; margin-top:-45px; position:relative; } #Contents .InternalContents .Bodycontents .Block img{ margin:0;} .customer_thanks {position:relative;} .customer_left{width:270px} .customer_right{left:240px; position:absolute;top:-55px} .Notes{ font-size:14px; font-weight:700; margin:0 0 20px -10px; } /* ------------------------------------------------------------- .Others - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #TopTabs{ display:block; width:655px; height:307px; position:relative;} #TopTabs .TabsNav{ display:block; position:absolute; height:30px; top:7px; left:25px;} #TopTabs .TabsNav ul li{ display:inline; float:left; } #TopTabs .TabsNav ul li a{ font-size:11px; font-weight:700;display: inline; float:left;} #TopTabs .TabsNav ul li a.button_one{ width:110px; margin-right:15px; } #TopTabs .TabsNav ul li a.button_two{ width:100px; margin-right:17px; } #TopTabs .TabsNav ul li a.button_three{ width:90px; margin-right:15px; } #TopTabs .TabsNav ul li a.button_four{ width:120px;margin-left:5px; } .Tab_04 a.button_four{ color:#000;} .Tab_01{ background:url(images/tabs/tabs.jpg) no-repeat top;} .Tab_02{ background:url(images/tabs/tabs.jpg) no-repeat 0 -307px;} .Tab_03{ background:url(images/tabs/tabs.jpg) no-repeat 0 -614px;} .Tab_04{background:url(images/tabs/tabs.jpg) no-repeat 0 -921px;} .TabsContents{ display:block;} .TabsContents div{display:none} .TabsContents .tabonecontents{ display:none; position:absolute; top:85px; left:25px; width:240px;} .TabsContents p{ padding-bottom:15px;} .TabsContents .tabonecontents h3{ padding-bottom:10px;} .TabsContents .tabonecontents .red_arrow{ margin-left:0;} .TabsContents .tabtwcontents{ display:none; position:absolute; top:70px; left:390px; width:240px;} .TabsContents .tabtwcontents h3{ padding-bottom:10px} .TabsContents .tabtwcontents .red_arrow{ margin-left:0;} .TabsContents .tabthreeontents{ display:none; position:absolute; top:45px; left:25px; width:445px;} .TabsContents .tabthreeontents p{ width:370px; color:#607808;} .TabsContents .tabthreeontents h2{ padding-bottom:10px; color:#607808; font-size:22px; width:470px;} .TabsContents .tabthreeontents .red_arrow{ margin-left:0;} .TabsContents .tabfourontents{ display:block; position:absolute; top:60px; left:25px; width:275px;} .TabsContents .tabfourontents p{ width:280px; color:#FFF;} .TabsContents .tabfourontents h2{ padding-bottom:10px; color:#FFF; width:250px; } .TabsContents .tabfourontents .red_arrow{ margin-left:0;color:#FFF;} #Contents .InternalContents .Bodycontents .darkBorder p img{ margin-left:-7px; margin-right:0;} /* ------------------------------------------------------------- .FOOTER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Footer .BottomAds{ height:130px; display:block; position:relative; top:-10px;} #Footer .BottomAds .SaveMoney{ display:block; height:137px; text-indent:-9999px; width:452px; background:url(images/ad_one.png) no-repeat;position:absolute; left:0; top:0; /*IE6 Hack*/} #Footer .BottomAds .Qualify{ display:block; height:103px; text-indent:-9999px; width:446px; background:url(images/ad_two.jpg) no-repeat; position:absolute; right:0; top:21px; } #Footer .Break{ border:1px solid #666; height:9px; font-size:1%; margin:10px 0;} #Footer ul.Copyrights{ display:block; padding-left:25px; color:#dfdfdf;} #Footer ul.Copyrights a{ color:#dfdfdf;} #Footer ul.Copyrights li{display:inline; float:left; padding:0 7px; font-size:11px;} /* SEARCH RESULTD */ #Contents .InternalContents .Bodycontents #SearchBlock{ display:block; padding:0 5px 10px 10px;} #Contents .InternalContents .Bodycontents .SearchResults{ display:block; padding:10px 5px 10px 0;border:1px solid #FFF; width:495px; margin:15px auto;} #Contents .InternalContents .Bodycontents .ResultsNumbers{ margin:30px 0 15px 8px; font-weight:700;} .Counts{ margin-left:8px;} #Contents .InternalContents .Bodycontents .Searchpages p.ResultsNumbers{ padding-left:0;} .Counts a, .Counts strong { float:left; display:block; margin:0; height:13px; width:13px; font-size:12px;} .Counts a.previous{ display:block; background:url(images/arrow_prev.gif) no-repeat left ; text-indent:-9999px; height:13px; width:17px;} .Counts a.next{ display:block; background:url(images/arrow_next.gif) no-repeat left ; text-indent:-9999px; height:13px; width:17px;} .more{ display:inline; margin-left:10px; font-size:10px; color:#ED1B24; text-decoration:underline;} /*RED AD*/ #Contents .InternalContents .Bodycontents .clock{ z-index:1000;} #Contents .InternalContents .Bodycontents #Big_Red{ display:block; width:539px; height:466px; background:url(images/guaranteed_red.jpg) no-repeat; position:relative; margin-top:-57px; left:-2px;} #Contents .InternalContents .Bodycontents #Big_Red h1{ position:absolute; z-index:100; top:20px; font-size:24px; font-weight:700; padding:0; margin:0; left:10px;} #Contents .InternalContents .Bodycontents #Big_Red h4{ position:absolute; z-index:100; top:290px; font-size:16px; font-weight:700; padding:0; margin:0; left:10px;} #Contents .InternalContents .Bodycontents #Big_Red h5{ position:absolute; z-index:100; top:412px; font-size:31px; font-weight:700; padding:0; margin:0; left:10px;} #Contents .InternalContents .Bodycontents #Big_Red h5 span{ color:#ed1c24}