/* ------------------------------------------------------------- Project Name DK ADVERTISING - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .version 1.0 .updated 26-04-2009 deverloper3@silvertree.net developer@pxdev.com ------------------------------------------------------------- ------------------------------------------------------------- + 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;} .clear{ clear:both;} h1, h2, h3, h4, h5,h6{ color:#32689A;} img {border:none} h1{ font-size:22px;} h2{ font-size:18px;} h3{ font-size:14px;} h3 img{z-index:10;} a{ color:#707171; text-decoration:none; outline:none; /* FF outline*/} /*a:hover{ color:#32689A;}*/ body{ background:#FFF; color:#8c8d8d; font:12px Arial, Helvetica, sans-serif;} /* ------------------------------------------------------------- 1. Top Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Container{ width:900px; margin:0 auto; position:relative;} #Container h1{ margin-left:25px;} #Container #Header{ position:relative; height:112px; width:845px; margin:0 auto;} #Container #Header .Logo{ position:absolute; top:37px; } #Container #Header .Logo a{ display:block; height:65px; width:167px; background:url(images/dk_advertising.jpg) no-repeat;text-indent:-99999px; } #Container #Header .TopMenu{ position:absolute; top:70px; right:-5px;} #Container #Header .TopMenu ul{ list-style:none;} #Container #Header .TopMenu ul li{ float:left; display:inline;} #Container #Header .TopMenu ul li a{font-weight:700; font-size:14px; text-indent:-9999px; display:block; float:left;} /* Top Menu */ #Container #Header .TopMenu li#Home a{ background:url(images/home.gif) no-repeat bottom; height:32px; width:64px;} #Container #Header .TopMenu li#Home a:hover{ background:url(images/home.gif) no-repeat top; } #Container #Header .TopMenu li#Home .selected { background:url(images/home.gif) no-repeat top; } #Container #Header .TopMenu li#Who_we_are a{ background:url(images/who_we_are.gif) no-repeat bottom; height:32px; width:101px;} #Container #Header .TopMenu li#Who_we_are a:hover{ background:url(images/who_we_are.gif) no-repeat top; } #Container #Header .TopMenu li#Who_we_are .selected { background:url(images/who_we_are.gif) no-repeat top; } #Container #Header .TopMenu li#Services a{ background:url(images/services.gif) no-repeat bottom; height:32px; width:79px;} #Container #Header .TopMenu li#Services a:hover{ background:url(images/services.gif) no-repeat top; } #Container #Header .TopMenu li#Services .selected { background:url(images/services.gif) no-repeat top; } #Container #Header .TopMenu li#Our_Work a{ background:url(images/our_work.gif) no-repeat bottom; height:32px; width:79px;} #Container #Header .TopMenu li#Our_Work a:hover{ background:url(images/our_work.gif) no-repeat top; } #Container #Header .TopMenu li#Our_Work .selected{ background:url(images/our_work.gif) no-repeat top; } #Container #Header .TopMenu li#People a{ background:url(images/people.gif) no-repeat bottom; height:32px; width:88px;} #Container #Header .TopMenu li#People a:hover{ background:url(images/people.gif) no-repeat top; } #Container #Header .TopMenu li#People .selected{ background:url(images/people.gif) no-repeat top; } #Container #Header .TopMenu li#Contact_Us a{ background:url(images/contact_us.gif) no-repeat bottom; height:32px; width:91px;} #Container #Header .TopMenu li#Contact_Us a:hover{ background:url(images/contact_us.gif) no-repeat top; } #Container #Header .TopMenu li#Contact_Us .selected{ background:url(images/contact_us.gif) no-repeat top; } #Level_one{ position:absolute; top:35px; left:10px; width:500px; z-index:50;display:none } #Container #Header .TopMenu #Level_one #Creative_Services a{ background:url(images/creative_services.gif) no-repeat bottom; height:19px; width:138px;} #Container #Header .TopMenu #Level_one #Stratigic_Services a{ background:url(images/stratigic_services.gif) no-repeat bottom; height:19px; width:144px;} /* ------------------------------------------------------------- 2. Our Works Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Works_Gallery{ width:900px; height:275px; position:relative; margin:15px auto 0 auto; } #Works_Gallery .Show_Five{ overflow:hidden ; position:relative; width:830px;margin-left:25px; padding-top:55px;} #Container #Works_Gallery h1 a{ position:absolute; left:15px; z-index:15; margin-bottom:15px; margin-left:25px; display:block; background-position:left; height:35px; width:400px; text-indent:-9999px; background-repeat:no-repeat; } #Container #Works_Gallery .Back{position:absolute; left:440px; top:-10px; z-index:15;} #Container #Works_Gallery .Back .WorkBack{ display:block; text-indent:-9999px; background:url(images/work_back.gif) no-repeat; width:175px; height:60px; } #Container #Works_Gallery .Back .ServicesBack{ display:block; text-indent:-9999px; background:url(images/services_back.gif) no-repeat; width:175px; height:60px; } #Works_Gallery .previous{} #Works_Gallery .previous a{cursor:pointer; z-index:15; position:absolute; left:-20px; bottom:90px; background:url(images/previous.gif) no-repeat; display:block; text-indent:-9999px; width:30px; height:50px;display:none} #Works_Gallery .Next a{ cursor:pointer; z-index:15; position:absolute; right:0; bottom:90px; background:url(images/next.gif) no-repeat; display:block; text-indent:-9999px; width:30px; height:50px;display:none} #Works_Gallery .Boxs{ float:left; display:block; width:100%; } #Works_Gallery .box_container{ position:relative;overflow:hidden;} #Works_Gallery h3{ cursor:pointer; } #Works_Gallery .Mask{ position:absolute; display:block; z-index:10 } #Works_Gallery .box_container h3{ position:absolute;top:11px; left:10px; z-index:15; } #Works_Gallery .box_container h3 a{ text-indent:-9999px; background-position:left bottom; background-repeat:no-repeat; display:block; width:198px; height:190px; } #Works_Gallery .box_01 {width:198px;} #Works_Gallery .box_01 .Mask{background:url(images/mask_01.png) no-repeat;height:216px; width:198px; } #Works_Gallery .box_container{height:216px; width:198px; display:block;} #Works_Gallery .box_01 .box_container h3{ top:0; } #Works_Gallery .box_01 img{ margin:15px auto; vertical-align:middle;} #Works_Gallery .box_02 {width:160px; } #Works_Gallery .box_02 .Mask{ background:url(images/mask_02.png) no-repeat;height:216px; width:160px; } #Works_Gallery .box_02 .box_container{height:216px; width:160px; display:block;} #Works_Gallery .box_02 .box_container h3{ top:-5px; } #Works_Gallery .box_02 img{ margin:15px 0 0 -15px; vertical-align:middle;} #Works_Gallery .box_03 {width:160px; } #Works_Gallery .box_03 .Mask{background:url(images/mask_03.png) no-repeat;height:216px; width:160px; } #Works_Gallery .box_03 .box_container{height:216px; width:160px; display:block;} #Works_Gallery .box_03 .box_container h3{ top:5px;} #Works_Gallery .box_03 img{ margin:23px 0 0 -15px; vertical-align:middle;} #Works_Gallery .box_04 {width:153px; } #Works_Gallery .box_04 .Mask{background:url(images/mask_04.png) no-repeat;height:216px; width:153px; } #Works_Gallery .box_04 .box_container{height:216px; width:153px; display:block;} #Works_Gallery .box_04 .box_container h3{ top:11px; } #Works_Gallery .box_04 img{ margin:10px 0 0 -17px; vertical-align:middle;} #Works_Gallery .box_05 { width:158px; } #Works_Gallery .box_05 .Mask{ background:url(images/mask_05.png) no-repeat;height:216px; width:158px; } #Works_Gallery .box_05 .box_container{height:216px; width:158px; display:block;} #Works_Gallery .box_05 .box_container h3{ top:-4px; } #Works_Gallery .box_05 img{ margin:15px 0 0 -17px; vertical-align:middle;} /* ------------------------------------------------------------- 3. Contents area - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Contents { display:block; width:845px; margin:30px auto 45px auto; } #Contents .LeftContents { display:inline; float:left;width:380px; } #Contents .RightContents { display:inline; float:left;width:400px; margin-left:25px; padding-top:25px; } #Contents .RightContext{ height:190px; overflow:hidden;} #Container #Contents .RightContents h1 { display:block; background-position:left; background-repeat:no-repeat; height:43px; width:360px; text-indent:-9999px; margin-bottom:10px; margin-left:0;} #Contents .BigMask{ display:block; position:relative; width:375px; height:305px; overflow:hidden; } #Contents .BigMask .Mask{ width:376px; height:308px; background:url(images/left_mask.png) no-repeat; position:absolute; z-index:10;} #Contents .BigMask #sub_sub_image{ margin-left:17px;} a.Full_Link_big{ display:block; height:245px; top:25px; width:320px; position:absolute; left:25px; z-index:15; cursor:pointer; background:transparent ; } a#grey{ display:block; width:320px; height:245px; background:url(images/blank.gif)} a#grey img{ display:block; margin:-10px 0 0 18px;vertical-align:middle;} /* ------------------------------------------------------------- 4. Contactus Page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .RightContents p{ padding-bottom:10px; font-size:11px;} .RightContents h1.contacts{ background:url(images/contacts.gif) no-repeat; width:154px; height:28px; display:block; text-indent:-9999px; padding-bottom:10px;} .RightContents h1.contacts{ background:url(images/contacts.gif) no-repeat; width:154px; height:28px; display:block; text-indent:-9999px; padding-bottom:10px;} .RightContents p strong{ font-size:12px;} /* ------------------------------------------------------------- 5.Forms - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ form{ padding-top:30px;} 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:355px;} .input label{ font-weight:700;} .text input, .textarea textarea, .check input , .submit input{ position:absolute;} .text input{ left:95px;width:255px;} .textarea{ height:130px;} .textarea textarea{ left:95px; width:255px; overflow:hidden;} .check input{ left:0; border:0;} .check label{ left:25px; position:absolute; font-weight:100;} .submit input{ right:5px; border:1px solid #e0e0e0; background:#FFF; width:120px; height:28px; font-weight:700; color:#595959; } .security{ height:70px;} .security img{ position:absolute; left:95px; } .security input{ position:absolute; left:208px; top:5px; width:140px;} .check{ height:60px;} .Error { background:#eedbd5 url(images/error_msg.gif) no-repeat 10px 10px; height:26px; 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:26px; 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:26px; 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} /* ------------------------------------------------------------- 6.Navigations - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .Navigation{ display:block; position:relative; height:30px; } .Navigation ul{ list-style:none; position:absolute; left:-10px;} .Navigation ul li{ float:left; display:inline; width:38px; } .Navigation ul li a{ float:left; display:inline; background:url(images/navigation.gif) no-repeat top; height:20px; width:38px;text-align:center; padding-top:8px; color:#8c8d8d; font-weight:700; } .Navigation ul li a:hover, .Navigation ul li a.selected{ background:url(images/navigation.gif) no-repeat bottom; height:28px; height:20px; width:38px;text-align:center; padding-top:8px; } .Campaign_Date{ display:block; clear:both; height:60px; position:relative;} .Campaign_Date h4{ font-size:14px; font-weight:700; position:absolute; left:0; top:20px; color:#595959} .Campaign_Date a{ display:block; background:url(images/view_tvc.gif) no-repeat; width:89px; height:26px; font-size:13px; font-weight:700; left:260px; position:absolute; top:-10px; padding:17px 0 0 29px ;} /* ---------------------- --------------------------------------- 7. BreadCrumps - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #BreadCrumps{ background:url(images/ajax_bar.gif) bottom repeat-x; height:30px; display:block; width:845px; margin:20px auto; position:relative;} #BreadCrumps ul{ list-style:none;} #BreadCrumps ul li{ float:left; display:inline;} #BreadCrumps ul li a { height:15px; display:block; text-indent:-9999px; } #BreadCrumps ul li#crumps_Our_Work ul { position:absolute; top:-2px; left:470px;} #BreadCrumps ul li#crumps_Services ul { position:absolute; top:3px; left:310px;} #BreadCrumps ul li#crumps_Home{ width:105px;} #BreadCrumps ul li#crumps_Home a { background:url(images/crumps_01.gif) no-repeat top left;width:34px; } #BreadCrumps ul li#crumps_Home a:hover { background:url(images/crumps_01.gif) no-repeat bottom left; } #BreadCrumps ul li#crumps_Who_we_are {width:100px; margin-right:30px;} #BreadCrumps ul li#crumps_Who_we_are a { background:url(images/crumps_02.gif) no-repeat top center;width:74px; } #BreadCrumps ul li#crumps_Who_we_are a:hover { background:url(images/crumps_02.gif) no-repeat bottom center; } #BreadCrumps ul li#crumps_Services{ width:80px; margin-right:80px;} #BreadCrumps ul li#crumps_Services a { background:url(images/crumps_03.gif) no-repeat top left;width:57px; } #BreadCrumps ul li#crumps_Services a:hover { background:url(images/crumps_03.gif) no-repeat bottom left; } #BreadCrumps ul li#crumps_Our_Work{width:87px; margin-right:120px; display:inline;} #BreadCrumps ul li#crumps_Our_Work a { background:url(images/crumps_04.gif) no-repeat top left;width:57px; } #BreadCrumps ul li#crumps_Our_Work a:hover { background:url(images/crumps_04.gif) no-repeat bottom left; } #BreadCrumps ul li#crumps_People{width:54px; margin-right:62px; display:inline;} #BreadCrumps ul li#crumps_People a { background:url(images/crumps_05.gif) no-repeat top left;width:70px; } #BreadCrumps ul li#crumps_People a:hover { background:url(images/crumps_05.gif) no-repeat bottom left; } #BreadCrumps ul li#crumps_Contact_Us{width:60px; margin-left:50px; } #BreadCrumps ul li#crumps_Contact_Us a { background:url(images/crumps_06.gif) no-repeat top center;width:60px; } #BreadCrumps ul li#crumps_Contact_Us a:hover { background:url(images/crumps_06.gif) no-repeat bottom center; } .Ajax_Ball{ position:relative; width:820px; height:14px; clear:both; display:block;} .Ajax_Ball img{ position:absolute; } #BreadCrumps ul li#crumps_Our_Work ul li#Sub_list a{ width:131px; height:30px; background-position:left top; display:block; text-indent:-9999px;} .prop { height:400px; float:right; width:1px;} /*Loading Message */ .loading {background:#FFF url(images/ajax-loader.gif) no-repeat center center; position:absolute; z-index:70; font-size:0; } #loader1{ height:265px; width:900px; top:125px; position:absolute; z-index:70; font-size:0;} #loader2{ height:450px; width:900px; top:460px; position:absolute; z-index:70; font-size:0;} /* ---------------------- --------------------------------------- 8. Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Gallery{ display:block; width:845px; margin:0 auto;} #Gallery .Gallery_imgs{ width:470px; display:inline; float:left; padding-top:20px;} #Gallery .Gallery_imgs a{ position:relative; width:75px; height:75px; display:block; float:left; padding:1px;} #Gallery .Gallery_imgs img{ border:none;} #Gallery .Gallery_Preview{ width:358px; display:inline; float:right;} #Gallery .Gallery_Preview .GalleryMask{ width:358px; overflow:hidden; position:relative; height:403px;} #Gallery .Gallery_Preview .GalleryMask h3{ position:absolute; z-index:15; bottom:42px; left:30px; color:#636363;} #Gallery .Gallery_Preview .GalleryMask .Mask{ background:url(images/gallery_mask.png) no-repeat; position:absolute; display:block; height:403px; width:358px; z-index:10;} #Gallery .Gallery_Preview .GalleryMask .images{ position:absolute; height:330px; width:330px; overflow:hidden; z-index:5;left:0;} a.preview_link{ display:block; margin:0 auto; width:290px; height:280px; position:absolute; text-indent:-999px; top:40px; left:30px; background:url(images/blank.gif) no-repeat; z-index:15; } /* EMAIL FRIEND*/ #send_to_friend{ display:block; padding:30px 0 0 15px;} #send_to_friend a{ display:block; background:url(images/email_friend.gif) no-repeat; height:44px; width:148px; text-indent:-99999px;} /* ---------------------- --------------------------------------- 9. Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #Footer{ position:relative; width:845px; margin:25px auto; background:url(images/footer.gif) repeat-x top; height:150px; padding:7px 0 0 0} #Footer ul{ list-style:none; left:10px; position:absolute; } #Footer ul li{ float:left; padding-right:10px; display:inline; text-align:center;} #Footer .jobs{ position:absolute; right:0;} /* Tool Tips*/ #tooltip{ position:absolute; display:none; width:100px;background:url(images/tips_top.gif) no-repeat; width:129px; padding:5px 0 0 0; z-index:100; } #balloon{background:url(images/tips_bottom.gif) no-repeat; height:15px; width:129px; } #tooltip_text{ background:#FFF; width:127px; display:block; padding:5px 0; font-weight:700; font-size:1.2em; color:#666; text-align:center; border-left:1px solid #999; border-right:1px solid #999} .content img{position:absolute; top:-10px; cursor:pointer; left:-10px; height:23px; width:23px;} #GB_window .content{ border:15px solid #212121;} #Container .Terms h1{ margin-left:0;} #Container .Terms p {text-align:justify; width:635px;}