/* Theme Name: The House Media v1 Theme URI: http://thehousemedia.com/ Version: 1.0 Author: Steven Gleave, Stefan Stanica Author URI: http://www.thehousemedia.com/ */ /* Import Master Reset */ @import url(reset.css); /* HTML Elements */ *{margin:0px;padding:0px;} body,html { min-height:101%; margin:0px;padding:0px;} body { background:#03202E url(images/bg.jpg) repeat; } body, select, input, textarea { font: 100% Arial, Helvetica, Verdana, Sans-Serif,宋体,黑体; } a, a:visited { text-decoration:none; } a:hover, a:active { text-decoration:underline; } a img { border:none; } /* STRUCTURE */ .container { width:960px; margin-left:auto; margin-right:auto; } /* HEADER SECTION */ #header { width:100%; background:url(images/topstrip.png) repeat-x 50% 0; margin-bottom:10px; } #header.about-margin, #header.work-pages-margin { margin-bottom:10px; } #header.contact-margin, #header.services-margin, #header.text-page-margin { margin-bottom:5px; } #header .top-area { width:1000px; margin-left:auto; margin-right:auto; background:url(images/header-light.png) no-repeat -250px 10px; } #header #action-bar { margin-bottom:0; } #header #action-bar #logo { float:left; margin:75px 0 0 0px; } #header #action-bar #nav { float:right; margin-top:100px; } #header #action-bar #nav ul { list-style-type:none; } #header #action-bar #nav ul li { float:left; text-transform:uppercase; margin-right:7px; text-indent:-9999px; } #header #action-bar #nav ul li a { display:block; color:#FFF; text-decoration:none; height:14px; text-indent:-9999px; } #header #action-bar #nav ul li#nav-home a { width:41px; background:url(images/nav-links.png) no-repeat; margin:0 18px; } #header #action-bar #nav ul li#nav-about a { width:67px; background:url(images/nav-links.png) 0 -30px no-repeat; margin:0 18px; } #header #action-bar #nav ul li#nav-work a { width:73px; background:url(images/nav-links.png) 0 -60px no-repeat; margin:0 18px; } #header #action-bar #nav ul li#nav-services a { width:61px; background:url(images/nav-links.png) 0 -90px no-repeat; margin:0 18px; } #header #action-bar #nav ul li#nav-contact a { width:66px; background:url(images/nav-links.png) 0 -120px no-repeat; margin:0 0 0 18px; } #header #action-bar #nav ul li#nav-home a:hover { width:41px; background:url(images/nav-links.png) 0 -15px no-repeat; } #header #action-bar #nav ul li#nav-about a:hover { width:67px; background:url(images/nav-links.png) 0 -45px no-repeat; } #header #action-bar #nav ul li#nav-work a:hover { width:73px; background:url(images/nav-links.png) 0 -75px no-repeat; } #header #action-bar #nav ul li#nav-services a:hover { width:61px; background:url(images/nav-links.png) 0 -105px no-repeat; } #header #action-bar #nav ul li#nav-contact a:hover { width:66px; background:url(images/nav-links.png) 0 -135px no-repeat; } #header #action-bar #nav ul li#nav-home a.active { width:41px; background:url(images/nav-links.png) 0 -15px no-repeat; } #header #action-bar #nav ul li#nav-about a.active { width:67px; background:url(images/nav-links.png) 0 -45px no-repeat; } #header #action-bar #nav ul li#nav-work a.active { width:73px; background:url(images/nav-links.png) 0 -75px no-repeat; } #header #action-bar #nav ul li#nav-services a.active { width:61px; background:url(images/nav-links.png) 0 -105px no-repeat; } #header #action-bar #nav ul li#nav-contact a.active { width:66px; background:url(images/nav-links.png) 0 -135px no-repeat; } #header #action-bar #nav ul li a:hover { color:#fff2c9; text-decoration:none; } #header #action-bar #nav ul li.active a { color:#fff2c9; text-decoration:none; } #header #featured {height:350px;margin-top:15px; background:url(images/slogan-light.png) no-repeat 50% 120%; } #header #featured p,#header #featured h3 { font-size:12px; text-align:right; color:#076a8d; margin-bottom:25px; } #header #featured #featured-left { width:236px; float:left; margin-right:21px; } #header #featured #featured-left a { display:block; float:left; width:236px; height:291px; background:url(images/featured-border.png) no-repeat; } #header #featured #featured-left a img { padding:10px; } #header #featured #featured-middle {width:623px; float:left; } #header #featured #featured-middle .top ul, #header #featured #featured-middle .bottom ul { list-style-type:none; } #header #featured #featured-middle .top ul li ul li, #header #featured #featured-middle .bottom ul li ul li { display:block; float:left; margin-right:21px; margin-bottom:21px; width:140px; height:135px; } #header #featured #featured-middle .top ul li ul li.last, #header #featured #featured-middle .bottom ul li ul li.last { margin-right:0; } #header #featured #featured-middle .top ul li ul li a { display:block; width:140px; height:135px; background:url(images/thumb-border.png) no-repeat; } #header #featured #featured-middle .top ul li ul li a img { padding:10px; } #header #featured #featured-middle .bottom ul li a { display:block; width:140px; height:135px; background:url(images/thumb-border.png) no-repeat; } #header #featured #featured-middle .bottom ul li a img { padding:10px; } #header #featured #featured-right { width:59px; float:right; margin-bottom:40px; } #header #featured #featured-right a.more { display:block; width:57px; height:291px; background:url(images/more-btn.png) no-repeat; text-indent:-9999px; } #header #featured #featured-right a.more:hover { background:url(images/more-btn.png) -57px 0 no-repeat; } #header #page-header { margin-top:10px; margin-bottom:0;} #header #page-header .page-title {margin-bottom:15px;} #header #page-header .page-title h3, #header #page-header .page-title p { font-size:12px;height:25px;line-height:25px; color:#076a8d;} #header #page-header .page-title #about-us-title{background:url(images/about-us.png) no-repeat 0 0;width:120px;text-indent: -9999px;} #header #page-header .page-title #product-view-title{background:url(images/product-view.png) no-repeat 0 0;width:120px;text-indent: -9999px;} #header #page-header .page-title #service-title{background:url(images/what-we-do.png) no-repeat 0 0;width:120px;text-indent: -9999px;} #header #page-header .page-title #cooperation-title{background:url(images/cooperation.png) no-repeat 0 0;width:120px;text-indent: -9999px;} /* FOOTER STYLING */ #footer { width:100%; background:url(images/footer-bg.png) no-repeat 47% 100%; padding-top:20px; } #footer #copyright-bar { width:960px; margin-left:auto; margin-right:auto; padding:0 0 60px 0; } #footer #copyright-bar .copyright { float:left; width:550px; margin-top:9px; } #footer #copyright-bar .copyright p { font-size:12px; color:#b9b9b9; } #footer #copyright-bar .copyright p span { color:#FAE70A; } #footer #copyright-bar .bottom-links { float:right; width:auto; margin-top:5px; } #footer #copyright-bar .bottom-links ul { list-style-type:none; } #footer #copyright-bar .bottom-links ul li { display:inline; font-size:12px; color:#b9b9b9; margin-right:2px; text-transform:uppercase; } #footer #copyright-bar .bottom-links ul li.last { margin-right:0; } #footer #copyright-bar .bottom-links ul li.no-link { margin-left:20px; margin-right:0px; } #footer #copyright-bar .bottom-links ul li a { text-decoration:none; color:#b9b9b9; font-weight:800; padding-right:2px; } #footer #copyright-bar .bottom-links ul li a.sitemap-link { background:url(images/up-arrow.png) no-repeat 0 5px; padding-left:13px; } #footer #copyright-bar .bottom-links ul li a:hover { text-decoration:underline; } /* HOME PAGE STYLING */ #main-service-list { margin:25px auto; padding:5px auto;} #main-service-list .section { width:295px; float:left; margin-right:35px; } #main-service-list .section.last { margin-right:0; } #main-service-list .section h3 { margin-bottom:10px; text-indent:-9999px; } #main-service-list .section h3.wholesale { background:url(images/wholesale.png) no-repeat 4px 0; } #main-service-list .section h3.customized { background:url(images/wear.png) no-repeat 4px 0; } #main-service-list .section h3.oem { background:url(images/oem.png) no-repeat 4px 0; } #main-service-list .section h3.web { background:url(images/web-design.png) no-repeat 4px 0; } #main-service-list .section h3.print { background:url(images/print-design.png) no-repeat 4px 0; } #main-service-list .section h3.branding { background:url(images/branding.png) no-repeat 4px 0; } #main-service-list .section p { font-size:13px; color:#c7cfd3; margin-bottom:10px; line-height:1.5; padding-left:5px; } #slider-img { width:960px; margin-left:auto; margin-right:auto;padding:5px; } #slider-img ul{list-style: none;} #slider-img ul li{float:left;margin-right:10px;} #slider-img ul li a { display:block; width:140px; height:135px; background:url(images/thumb-border.png) no-repeat; } #slider-img ul li a img { padding:10px; } #company-info { width:960px; margin-left:auto; margin-right:auto; padding:25px 0px; background:url(images/home-line-bg.png) repeat-x bottom left; } #company-info .info-left { width:625px; float:left; margin-right:35px; } #company-info .info-left h2, #company-info .info-right h2 { margin-bottom:4px; text-indent:-9999px; } #company-info .info-left h2.why-work { background:url(images/why-work.png) no-repeat; } #company-info .info-left h2.what-we-do { background:url(images/what-we-do.png) no-repeat; margin-top:25px; } #company-info .info-right h2.contact { background:url(images/contact-us.png) no-repeat; } #company-info .info-left p { font-size:12px; color:#c7cfd3; line-height:1.5; } #company-info .info-left ul.first-block { list-style-type:none; float:left; margin-right:75px; } #company-info .info-left ul.first-block li { font-family:Arial, Helvetica, sans-serif; display:block; font-size:14px; color:#c7cfd3; margin-bottom:10px; } #company-info .info-left ul.first-block li.sub-design { background:url(images/small-icons/design-icon.png) no-repeat; padding: 11px 0 3px 35px; } #company-info .info-left ul.first-block li.sub-development { background:url(images/small-icons/development-icon.png) no-repeat; padding: 5px 0 3px 35px; } #company-info .info-left ul.first-block li.sub-branding { background:url(images/small-icons/branding-icon.png) no-repeat 0 2px; padding: 5px 0 5px 35px; } #company-info .info-left ul.second-block { list-style-type:none; float:left; } #company-info .info-left ul.second-block li { font-family:Arial, Helvetica, sans-serif; display:block; font-size:14px; color:#c7cfd3; margin-top:6px; margin-bottom:10px; } #company-info .info-left ul.second-block li.sub-advertising { background:url(images/small-icons/advertising-icon.png) no-repeat 0 4px; padding: 5px 0 3px 35px; } #company-info .info-left ul.second-block li.sub-seo { background:url(images/small-icons/seo-icon.png) no-repeat 0 2px; padding: 5px 0 3px 35px; } #company-info .info-left ul.second-block li.sub-game { background:url(images/small-icons/game.png) no-repeat; padding: 5px 0 5px 35px; } #company-info .info-right { width:295px; float:right; background:url(images/contact-light.png) no-repeat 50% 50%; } #company-info .info-right form#contact { margin:0; padding:0; } #company-info .info-right form#contact label { display:none; } #company-info .info-right form#contact input { display:block; border:none; padding:7px 10px 3px 10px; color:#c7cfd3; font-size:12px; margin-bottom:15px; } #company-info .info-right form#contact input.name { width:275px; height:20px; background:url(images/name-email-fields-home.png) no-repeat; } #company-info .info-right form#contact input.email { width:275px; height:20px; background:url(images/name-email-fields-home.png) no-repeat; } #company-info .info-right form#contact textarea { width:275px; height:77px; border:none; display:block; background:url(images/message-field.png) no-repeat; padding:7px 10px; margin-top:5px; overflow:hidden; color:#c7cfd3; font-size:12px; } #company-info .info-right form#contact input.submit { width:83px; height:35px; background:url(images/send-tab.png) no-repeat; border:none; cursor:pointer; float:right; margin-top:15px; } #company-info .info-right form#contact input.submit:hover { background:url(images/send-tab.png) -83px 0 no-repeat; } /* PRODUCT VIEW PAGE STYLING */ #header #page-header .page-title #product-desc{width:780px;color:#1d98e2;} #product-view {padding-top:10px;background:url(images/home-line-bg.png) repeat-x top left;} #product-view p { font-size:12px; text-align:right; color:#ffff55;height:30px;line-height:30px;margin-bottom:10px;margin-right:20px;} #product-view #menu{width:160px;float:left;margin-right:20px;} #product-view #menu ul{list-style: none;} #product-view #menu ul li{width:130px;padding:5px 15px;margin-bottom:20px;background:url(images/product-view-border.png) repeat;} #product-view #menu ul li a{color:#ccc} #product-view #product-view-left { width:300px; float:left; margin-right:20px; } #product-view #product-view-left a { display:block; float:left; width:300px; height:365px; background:url(images/product-view-border.png) repeat; } #product-view #product-view-left a img { padding:10px;width:280px;height:345px; } #product-view #product-view-middle {width:380px; float:left;} #product-view #product-view-middle .slider-list ul{ list-style-type:none; } #product-view #product-view-middle .slider-list ul li ul li{ display:block; float:left; margin-right:10px; margin-bottom:10px; width:120px; height:115px; } #product-view #product-view-middle .slider-list ul li ul li.last{ margin-right:0; } #product-view #product-view-middle .slider-list ul li ul li a { display:block; width:120px; height:115px; background:url(images/thumb-border.png) no-repeat; } #product-view #product-view-middle .slider-list ul li ul li a img { padding:10px;width:100px;height:95px;} #product-view #product-view-middle .jcarousel-skin-tango .jcarousel-container-horizontal {width: 390px;padding: 0px 0px;} #product-view #product-view-middle .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 390px;height: 365px;} #product-view #product-view-middle .jcarousel-skin-tango .jcarousel-clip-vertical {width: 75px;height: 365px;} #product-view #product-view-middle .jcarousel-skin-tango .jcarousel-item {width: 390px;height: 365px;} #product-view #product-view-right { width:59px; float:right; margin-bottom:40px; } #product-view #product-view-right a.more { display:block; width:57px; height:365px; background:url(images/product-view-more-btn.png) no-repeat; text-indent:-9999px;} #product-view #product-view-right a.more:hover { background:url(images/product-view-more-btn.png) -57px 0 no-repeat; } /* SERVICES PAGE STYLING */ #services-block { background:url(images/services-light.png) no-repeat 50% -5%; } #services-block .service-titles { background:url(images/home-line-bg.png) repeat-x top left; padding:13px 0px; overflow:hidden; } #services-block .service-titles .design-produce-title, #services-block .service-titles .wholesale-title, #services-block .service-titles .wear-title, #services-block .service-titles .oem-title { width:215px; float:left; margin-right:33px; } #services-block .service-titles .oem-title { margin-right:0; } #services-block .service-titles .design-produce-title h2, #services-block .service-titles .wholesale-title h2, #services-block .service-titles .wear-title h2, #services-block .service-titles .oem-title h2 { text-indent:-9999px; } #services-block .service-titles .design-produce-title h2 { width:138px; height:15px; background:url(images/design-produce.png) no-repeat; } #services-block .service-titles .wholesale-title h2 { width:155px; height:15px; background:url(images/wholesale.png) no-repeat; } #services-block .service-titles .wear-title h2 { width:98px; height:15px; background:url(images/wear.png) no-repeat; } #services-block .service-titles .oem-title h2 { width:109px; height:15px; background:url(images/oem.png) no-repeat; } #services-block .design-produce, #services-block .wholesale, #services-block .wear, #services-block .oem {width:215px; float:left; margin-right:33px; margin-bottom:10px; } #services-block .oem { margin-right:0; } #services-block .design-produce p, #services-block .wholesale p, #services-block .wear p, #services-block .oem p { font-size:12px; color:#d5eaf4; line-height:1.6; } #services-block .design-produce ul, #services-block .wholesale ul, #services-block .wear ul, #services-block .oem ul { list-style-type:none; } #services-block .design-produce ul li, #services-block .wholesale ul li, #services-block .wear ul li, #services-block .oem ul li { font-size:12px; font-weight:normal; display:block; background:url(images/home-line-bg.png) repeat-x bottom left; padding:0 0 5px 3px; margin-bottom:5px; } #services-block .design-produce ul li { color:#FD4C73; } #services-block .wholesale ul li { color:#53B441; } #services-block .wear ul li { color:#F9E308; } #services-block .oem ul li { color:#009ce2; } /* COOPER PAGE STYLING */ #cooper-block {background:url(images/services-light.png) no-repeat 50% -5%; } #cooper-block .cooper-item{margin:15px 0px;} #cooper-block .cooper-item .cooper-img{width:125px;float:left;} #cooper-block .cooper-item .cooper-body{width:720px;float:left;margin-left:20px;padding:10px;} #cooper-block .cooper-item .cooper-body .business-title{background:url(images/cooper-business.png) no-repeat;text-indent:-99999px;} #cooper-block .cooper-item .cooper-body .sales-title{background:url(images/cooper-sales.png) no-repeat;text-indent:-99999px;} #cooper-block .cooper-item .cooper-body .produce-title{background:url(images/cooper-produce.png) no-repeat;text-indent:-99999px;} #cooper-block .cooper-item .cooper-body .supply-title{background:url(images/cooper-supply.png) no-repeat;text-indent:-99999px;} #cooper-block .cooper-item .cooper-body p{margin:5px 0px;color:999;line-height:25px;} /* CONTACT PAGE STYLING */ .contact-section { width:960px; margin-left:auto; margin-right:auto; margin-bottom:35px; background:url(images/contact-page-light.png) no-repeat center center; } .contact-section #contact-info-block { background:url(images/home-line-bg.png) repeat-x bottom left; padding-bottom:15px; margin:15px 0px; } .contact-section #contact-info-block p {line-height:25px;color:#999; } .contact-section #contact-info-block h3 {line-height:25px;color:#999;margin-top:15px; } .contact-section #contact-info-block .info .map-image{padding-left:10px;} .contact-section #contact-info-block .contact{width:400px;} .contact-section #contact-info-block .contact h3{text-indent:-9999px;background:url(images/contact.png) no-repeat;} .contact-section #contact-info-block .comp-bank{width:400px;} .contact-section #contact-info-block .comp-bank h3{text-indent:-9999px;background:url(images/bank-info.png) no-repeat;} .contact-section #contact-info-block #findus h3, .contact-section #contact-info-block #projectsheet h3 { text-indent:-9999px; margin-bottom:4px; } .contact-section #contact-info-block #findus h3.quote { width:160px; height:11px; background:url(images/no-quote.png) no-repeat; } .contact-section #contact-info-block #projectsheet h3.project-sheet { width:107px; height:11px; background:url(images/project-sheet.png) no-repeat; } .contact-section #contact-info-block #findus p, .contact-section #contact-info-block #projectsheet p { font-size:12px; color:#cedce1; line-height:1.3; } .contact-section #contact-info-block #download { float:right; width:47px; margin-left:30px; } .contact-section #contact-info-block #projectsheet { float:right; margin-left:20px; width:170px; } .contact-section #contact-info-block #projectsheet img { float:left; margin-right:9px; } .contact-section #contact-info-block #projectsheet p span { font-size:11px; padding-left:2px; color:#00c0ff; } /* TEXT PAGE STYLING */ #text-only-page { width:960px; margin-left:auto; margin-right:auto; margin-bottom:15px; } #text-only-page .finish-line { margin-top:30px; } #text-only-page h3 { font-family:Arial, Helvetica, sans-serif; color:#FAE70A; line-height:1.6; margin-bottom:10px; } /* THANKS / 404 STYLING */ #thanks-page { background:url(images/case-study-light.png) no-repeat center top; padding-bottom:15px; } #thanks-page #intro { padding-top:56px; height:132px; background:url(images/thanks-intro.png) repeat-x; text-align:center; margin-bottom:30px; } #thanks-page #intro img { margin-bottom:30px; } #thanks-page #intro h3 { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FAE70A; margin-bottom:12px; } #thanks-page #testimonial-sections .testimonial-1, #thanks-page #testimonial-sections .testimonial-2, #thanks-page #testimonial-sections .testimonial-3 { float:left; } #thanks-page #testimonial-sections .testimonial-1 { width:270px; margin:0 35px 15px 2px; padding:0 0 10px 5px; } #thanks-page #testimonial-sections .testimonial-2 { width:270px; margin:0 20px 15px 2px; padding:0 0 10px 12px; } #thanks-page #testimonial-sections .testimonial-3 { width:270px; margin:0 0 15px 2px; padding:0 0 10px 24px; } #thanks-page #testimonial-sections .testimonial-1 h3, #thanks-page #testimonial-sections .testimonial-2 h3, #thanks-page #testimonial-sections .testimonial-3 h3 { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#75BB3A; margin-bottom:12px; } #thanks-page #testimonial-sections p.centered { text-align:center; margin-bottom:35px; } #thanks-page #testimonial-sections .testimonial-1 p, #thanks-page #testimonial-sections .testimonial-2 p, #thanks-page #testimonial-sections .testimonial-3 p { font-style:italic; } /* GENERAL STYLING */ p { font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#cedce1; line-height:1.5; margin-bottom:1em; } h1, h2, h3, h4, h5, h6 { font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; line-height:1; } h1 { font-size:2em; letter-spacing:-1px; } h2 { font-size:1.5em; letter-spacing:-1px; } h3 { font-size:1em; } strong { font-weight:800; } .line {margin:5px auto;width:960px; height:2px; display:block; background:url(images/home-line-bg.png) repeat-x; clear:both; } .finish-line { width:100%; height:2px; display:block; background:url(images/home-line-bg.png) repeat-x; clear:both; } blockquote { font-size:12px; font-style:italic; color:#cedce1; margin:10px 0 30px 0; line-height:1.5; } blockquote a { color:#00c0ff; text-decoration:none; } blockquote a:hover { text-decoration:underline; } blockquote span { font-style:normal; display:block; margin-top:10px; text-transform:uppercase; } .clear { clear:both; font-size:1px; height:1px; border:none; } .clear { clear:both; font-size:1px; height:1px; border:none; } .fl{float:left;} .fr{float:right;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */