/* CSS Document */ /*-------------------------------------------------------- IMAJIKU WEBSITE version: 1 author: IMAJIKU Web Design and Development Studio email: marketing@imajiku.com website: http://www.imajiku.com/ ----------------------------------------------------------*/ /* GLOBAL RESET - ERIC MEYER RESET http://meyerweb.com/eric/tools/css/reset/ resetting some default styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} /* remember to define focus styles! */ :focus {outline:0;} /* remember to highlight inserts somehow! */ ins {text-decoration:none;} del {text-decoration:line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse:collapse; border-spacing:0;} /* em and strong reset */ em {font-style:normal;} strong {font-weight:normal;} /* UTILITIES ----------------------------------------*/ /* 1 em = 10px */ body {font-size:10px;} textarea {overflow:auto;} button {cursor:pointer;} /* a better and smarter way to clear floats */ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden} .clearfix {display:inline-block;} /* Hide from IE Mac */ .clearfix {display:block} /* End hide from IE Mac */ * html .clearfix {height:1px} /*GLOBAL STYLES ---------------------------------------------*/ a {color:#f1520d; font-weight:normal;} a:hover {color:#82850e; /*tanya*/} body {font-family:Verdana,Geneva,sans-serif; color:#000} p {font-size:1.167em; line-height:1.8em;} strong {color:#f1520d} /* BODY AND WRAPPER ---------------------------------------------*/ body {background:transparent url(images/bg.jpg) repeat top left;} .wrapper {width:960px; margin:0 auto;} /* CONTACT PANEL ---------------------------------------------*/ #contact {} /*SLIDING PANEL*/ #sliding_panel {display:none; background-color:#48330a; overflow:hidden; padding-bottom:15px;} #sliding_panel p.reply {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:2em; color:#f77c13; padding-left:20px;} /*Blockquote*/ #sliding_panel blockquote {display:block; width:300px; margin-top:20px; padding:27px 10px 10px 35px; margin-left:40px; text-indent:50px; float:left; display:inline; font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:2.5em; line-height:1.444em; color:#fff; background:transparent url(images/openquote2.gif) no-repeat left top;} #sliding_panel blockquote p {line-height:1.5em} #sliding_panel blockquote span {display:block; padding-left:25px; text-indent:45px;} #sliding_panel blockquote em {font-size:1.333em; clear:left;} /*Contact Form*/ #contact_top {width:460px; padding-left:60px; margin-top:20px; float:left; color:#fff;} #contact_top div {padding-bottom:15px; clear:left; } #contact_top .half {width:220px} #contact_top .left {float:left; display:inline;} #contact_top .right {float:right; clear:right; display:inline;} label {display:block; padding-bottom:5px; font-size:1.167em;} label.error {font-style:italic; color:#FBD851;} input {height:18px; border:1px solid #a8ab28; } /* last edited : 3 Agustus 2010 by. Ofi */ #contact_page select {height:20px; border:1px solid #a8ab28; width:500px;} #contact_page input{ width:500px; } #contact_top input{ width:100%; } /* end edited */ textarea {border:1px solid #a8ab28; width:100%; font-family:Verdana,Geneva,sans-serif; font-size:12px;} #contact_top input#send {width:90px; height:30px; background:transparent url(images/send_bg2.png) no-repeat left top; border:none; font-size:0; line-height:0; cursor:pointer;} #contact_top input#send:hover {background-position:left bottom;} /*TAB*/ #tab {border-top:12px solid #82850e} #tab .wrapper ul {display:block; width:auto; height:32px; float:right} #tab .wrapper ul li {display:block; height:32px; float:left; background:transparent url(images/tab_bg.png) repeat-x top left;} #tab .wrapper ul li#left {width:20px; background: transparent url(images/tab_left_bg.png) no-repeat top left;} #tab .wrapper ul li#right {width:20px; background: transparent url(images/tab_right_bg.png) no-repeat top left;} #tab .wrapper ul li#center {font-size:1.2em; font-weight:bold; color:#fff;} #tab .wrapper ul li#center #toggle a {font-weight:bold; height:25px; line-height:25px; color:#fbd851; text-decoration:none; padding-right:15px; background:transparent url(images/toggle_arrow.gif) no-repeat right center; display:inline-block} #tab .wrapper ul li#center #toggle a:hover {text-decoration:underline} #tab .wrapper ul li#center #toggle a.non_active {display:none} /* HEADER ---------------------------------------------*/ #header .wrapper {border-bottom:6px dotted #d6c6a7; padding:15px 0;} /*LOGO*/ h1 {width:192px; height:65px; float:left;} h1 a {background:transparent url(images/imajiku_logo.png) no-repeat top left; display:block; width:100%; height:100%; text-indent:-9999px;} /*NAVIGATION*/ #nav {float:right; position:relative; height:25px; padding:0 10px; margin-top:18px; overflow:hidden; } #nav li {float:left;} #nav li.back {background:transparent url(images/lava_bg.jpg) no-repeat right -25px; height:25px; width:15px; position:absolute; z-index:8;} #nav li.back .left {background:transparent url(images/lava_bg.jpg) no-repeat top left; height:25px; margin-right:15px/*the width of the rounded corner*/;} #nav li a {position:relative; overflow:hidden; color:#000; font-size:1.5em; text-decoration:none; height:25px; margin:0 10px; top:3px; text-align:center; z-index:10;} #nav li.current a {color:#FBD851;} /* MAIN CONTENT ---------------------------------------------*/ #content .wrapper {padding:20px 0 30px;} #content p {padding:10px 0;} /*PAGE HEADING*/ h2 {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:3.2em; line-height:1.2em; font-weight:normal; padding-bottom:10px;} h2 em {font-size:1.05em} h3 {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:2.167em; font-weight:normal; padding:30px 0 10px; clear:both;} p.desc {font-style:italic;} /* HOME PAGE ---------------------------------------------*/ #home p.desc {font-style:normal} /*SLIDER WRAPPER - see custom-nivo-slider.css for CSS of the slider */ #slider_wrapper {width:560px; height:260px; padding:15px 15px 31px; margin-top:20px; background:transparent url(images/slider_bg.png) no-repeat top left; float:left;} /*WHY US*/ #why_us {width:320px; height:250px; float:right; margin-bottom:30px; padding:40px 15px 15px; position:relative; background:transparent url(images/why_us_bg.png) no-repeat center top;} #why_us p {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:1.833em; font-weight:bold; padding:0;} .brown {color:#714f0d} .orange {color:#f1520d} #why_us ul {padding-top:5px;} #why_us ul li {line-height:1.6em; padding:5px 10px 5px 60px; font-size:1.145em;} #why_us ul li#wu1 {background:transparent url(images/wu1.png) no-repeat left center;} #why_us ul li#wu2 {background:transparent url(images/wu2.png) no-repeat left center;} #why_us ul li#wu3 {background:transparent url(images/wu3.png) no-repeat left center;} #why_us ul li.line {font-size:0; line-height:0; padding:0; height:2px; background:transparent url(images/wu_line.png) no-repeat center center;} /* last edited : 5 Agustus 2010 by. Ofi */ #why_us a {font-weight:bold; font-size:1.167em; text-indent:-9999px; text-decoration:none; color:#fff; float:right; margin-top:18px; width:171px; height:31px; background:transparent url(images/button_request.png) no-repeat 0px 0px;} #why_us a:hover {text-decoration:underline;background:transparent url(images/button_request.png) no-repeat 0px -29.85px;} /* end of last edited */ /*CLIENTS CAROUSEL*/ #client_carousel {width:960px; padding-top:10px; overflow:hidden;} a.prev {display:block; width:30px; height:30px; margin:5px 10px 0 0; background:transparent url(images/left_arrow.png) no-repeat 0 0; float:left; display:inline;} a.prev:hover {background-position:-30px 0} a.next {display:block; width:30px; height:30px; margin:5px 0 0 10px; background:transparent url(images/right_arrow.png) no-repeat 0 0; float:left; display:inline} a.next:hover {background-position:-30px 0} #client_thumb{width:880px; height:40px; float:left; display:inline;} #client_thumb ul li {display:block; width:160px; height:40px; float:left; display:inline; padding:0 8px;} #client_thumb ul li a.thumb {width:160px; height:40px; display:block; cursor:default;} #client_thumb ul li span {width:160px; height:40px; overflow:hidden; display:block;} /* ABOUT PAGE ---------------------------------------------*/ #left_column {width:580px; float:left; display:inline;} #right_column {width:370px; float:right; display:inline;} /*TEAM*/ #team {overflow:hidden; padding:10px 0; font-size:1.1em;} #team li {float:left; display:inline; margin-right:15px; padding:9px; background-color:#f3f2ef; border:1px solid #dddcd6;margin-top:14px;} #team li h4 {color:#714f0d; padding-top:5px;} #team li p {padding:0; font-size:0.917em;} /*CAREER*/ h3.career {font-size:1.8em;} /*OUR PHOTOS*/ #about_photos {width:312px; height:267px; margin:0 10px 30px 0; float:right; position:relative; display:inline; overflow:hidden;} #about_photos #tape {width:112px; height:60px; background:transparent url(images/tape.png) no-repeat left top; position:absolute; top:0; left:100px; z-index:20;} #our_photos {width:312px; height:243px; padding-top:24px; background:transparent url(images/photos_bg.png) no-repeat right bottom;} #our_photos ul {width:283px; height:202px; padding:15px 15px 26px 14px; } #our_photos ul li img {width:283px; height:202px;} /*BLOCKQUOTE*/ #about #content blockquote {width:330px; float:right; background:transparent url(images/paper_bg.png) no-repeat center top; overflow:hidden;} #about #content blockquote p {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:1.667em; color:#2b2b2b; padding:25px;} /* SERVICES PAGE ---------------------------------------------*/ #services h3 {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; display:block; width:150px; text-align:right; background:transparent url(images/bracket.png) no-repeat 100% 80%; padding-right:20px; clear:left; float:left; display:inline; margin-right:30px;} ol.service_section {width:760px; float:left; padding-top:30px;} ol.service_section li {width:200px; float:left; background:transparent url(images/service_section_bg.png) no-repeat 0 10px; padding:0 20px 10px; margin:0 13px 25px 0;} ol.service_section li.clear_left {clear:left;} ol.service_section li h4 {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:1.3em; color:#714f0d; text-transform:uppercase; padding:10px 7px; margin-bottom:20px; background-color:#d6c6a7; display:inline-block;} ol.service_section li em {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:2em; color:#f1520d; display:block;} ol.service_section li .no {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:4em; color:#d3d1c9; float:right;} /* PORTFOLIO AND CLIENTS PAGE ---------------------------------------------*/ /*FEATURED PORTFOLIO CAROUSEL*/ #featured_projects {width:960px; height:255px; overflow:hidden; padding:20px 0 40px;} #featured_projects .prev, #featured_projects .next {margin-top:100px;} #waterwheelCarousel {width:880px; height:255px; float:left; overflow:hidden;} #waterwheelCarousel .item {width:585px; height:253px; background:transparent url(images/featured_portfolio_bg.png) no-repeat left top;} #waterwheelCarousel .item {display:none; cursor:pointer;} /*FILTER & PROJECT CATEGORY*/ #filter {padding-left:26px; background:transparent url(images/tag.gif) no-repeat left top; font-family:Palatino Linotype,Book Antiqua,Palatino,serif; float:left; display:inline;} #filter span#filter_by {float:left; font-size:1.2em; color:#7e7c75; padding:4px 8px 0 0;} #filter ul {text-transform:uppercase; font-size:1.1em; height:16px; line-height:16px; margin:2px 0; margin-right:5px; float:left; display:inline;} #filter li {float:left; display:inline; background:#d6c6a7 url(images/filter_l.gif) no-repeat left center; padding-left:12px; margin-right:5px;} #filter li a {display:block; height:16px; color:#fff; text-decoration:none; background:#d6c6a7 url(images/filter_r.gif) no-repeat right center; padding-right:12px;} #filter li:hover, #filter li.active_filter {background:#f1520d url(images/filter_hover_l.gif) no-repeat left center;} #filter li:hover a, #filter li.active_filter a {background:#f1520d url(images/filter_hover_r.gif) no-repeat right center;} #filter span#for_more_tags, #filter select#more_tags {font-family:Palatino Linotype,Book Antiqua,Palatino,serif; font-size:1.1em; text-transform:uppercase; color:#724f0f; height:16px; line-height:16px;} #filter span#for_more_tags {font-weight:bold; margin:2px 0; text-align:center; position:absolute; width:88px; padding:0 22px 0 10px; background:url(images/more_tags_bg.gif) no-repeat left top; overflow:hidden;} #filter select#more_tags {margin-top:2px;} #project_category_wrapper {width:236px; float:right; display:inline; position:relative;} span#for_project_category, #project_category {font-family:Verdana,Geneva,sans-serif; font-size:1.1em; color:#714f0d; text-transform:uppercase; width:236px; height:24px; line-height:24px;} span#for_project_category {position:absolute; width:194px; padding:0 27px 0 15px; background:url(images/project_category_bg.gif) no-repeat left top; overflow:hidden;} /*PROJECT THUMBNAILS*/ #project_thumbs {clear:both; width:960px; padding-top:12px; overflow:hidden;} #project_thumbs ul {width:987px;} #project_thumbs ul li {margin:0 28px 15px 0; float:left; width:283px; height:163px; padding:9px 9px 18px 9px; background:transparent url(images/thumb_bg.png) no-repeat left top; position:relative;} #project_thumbs ul li h4 {color:#714f0d; float:left; line-height:1.833em;} #project_thumbs ul li span {float:right; font-size:0.917em; line-height:1.833em;} #project_thumbs ul li span.view_live {width:84px; height:84px; background:transparent url(images/view_live_bg.png) no-repeat center center; position:absolute; top:4px; right:4px;} #project_thumbs ul li span.view_live a{display:block; width:84px; height:84px; text-indent:-9999px;} /*PAGINATION*/ .pagination {float:right; overflow:hidden; padding-top:10px;} .pagination li {font-family:Tahoma,Geneva,sans-serif; font-size:1.1em; float:left; padding-left:4px;} .pagination li a {color:#918f8c; text-decoration:none; display:block; padding:6px; background-color:#ceccc8} .pagination li a:hover {color:#fff; background-color:#adacaa;} .pagination li.view_all a {color:#fff; background-color:#adacaa;} .pagination li.view_all a:hover {background-color:#999896;} .pagination li.current_page a {color:#714f0d; background-color:#d6c6a7;} /*CLIENT LIST*/ #client_list {width:960px; overflow:hidden; padding-top:30px;} #client_list h4 {text-transform:uppercase; padding-bottom:15px; font-size:1.2em;} .client_category {width:210px; padding:0 20px; float:left; background:transparent url(images/line.jpg) no-repeat right center; min-height:231px;} #first_cc {padding:0 20px 0 0;} #last_cc {padding:0 0 0 20px; background:none;} .client_category ul {list-style:outside square; line-height:2em; font-size:1.2em; padding-left:15px;} .client_category ul li a {color:#82850e; text-decoration:none;} .client_category ul li a:hover {text-decoration:underline;} /* CONTACT PAGE ---------------------------------------------*/ /*CONTACT FORM*/ /* last edited : 3 Agustus 2010 by. Ofi */ #contact_form {width:430px; height:793px; padding:100px 100px 50px 50px; margin-top:20px; background:transparent url(images/surat.jpg) no-repeat left top;} /* End edited by Ofi */ #contact_form div {padding-bottom:25px;} /*adding by Ofi 11 Agustus 2010*/ #contact_form div.captcha div{padding-bottom:0px;} #contact_form div#recaptcha_image {padding-bottom:0px;} #contact_form div#recaptcha_image div{padding-bottom:0px;} #contact_form div#recaptcha_widget_div {padding-bottom:0px;} #contact_form div#recaptcha_area {padding-bottom:0px;} #contact_form div.recaptcha_input_area {padding-bottom:0px;} /* end editing */ #contact_form div.required input, #contact_form div.required textarea , #contact_form div.required select{background-color:#f1f0e6;} #captcha_area {width:312px; height:123px; background:transparent url(images/captcha.jpg) no-repeat left top;} #contact_form input#c_send {width:90px; height:30px; background:transparent url(images/send_bg.png) no-repeat left top; border:none; font-size:0; line-height:0; cursor:pointer;} #contact_form input#c_send:hover {background-position:left bottom;} /*RIGHT COLUMN*/ #contact_page #right_column {width:330px;} #contact_page h3#email_us {padding-top:0;} #contact_page #right_column h4 {color:#714f0d} #contact_page #right_column ul{font-size:1.2em; line-height:1.8em;} #contact_page #right_column ul ul {font-size:1em;} #call_us_list li {padding-bottom:20px;} #call_us_list ul {padding-left:35px;} #call_us_list ul li {padding-bottom:0;} #chat_with_us_list img {position:relative; top:4px;} /* FOOTER ---------------------------------------------*/ #footer {height:70px; background-color:#48330a; color:#d6c6a7;} #footer #copyright {line-height:70px; float:left; width: 530px;} #footer #copyright a {color:#fbd851; text-decoration:none} #footer #copyright a:hover {text-decoration:underline} #follow_us {float:right; height:70px; width:230px;} #follow_us p {font-size:1.667em; width:120px; float:left; padding-top:18px; text-align:right;} #follow_us ul {display:block; width:105px; height:25px; float:right; padding-top:22px;} #follow_us ul li {width:25px; height:25px; margin-left:10px; float:left; text-indent:-9999px; display:inline;} #follow_us ul li a {display:block; width:25px; height:25px;} #follow_us ul li.twitter a {background:transparent url(images/twitter_icon.png) no-repeat top left} #follow_us ul li.del a {background:transparent url(images/del_icon.png) no-repeat top left} #follow_us ul li.fb a {background:transparent url(images/fb_icon.png) no-repeat top left} #follow_us ul li.twitter a:hover, #follow_us ul li.del a:hover, #follow_us ul li.fb a:hover{background-position:bottom left} /* Edited by Ofi @ Friday 13th, August */ .more_client_ajax { list-style:none;} ul li.more_client_ajax a{ color:#F1520D;} /*end editing*/ /* Edited by Ofi @ monday 30th, August */ .client_list_wrapper {margin-top:10px; } /*end editing*/