/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : CSS for The Canvas Printing Company. Author : Jay Chan URL : www.TheCanvasPrintingCompany.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Copyright (c) 2010 Jay Chan. All rights reserved. */ img, div, ul, li { behavior: url(iepngfix.htc) ;} * {margin:0;padding:0;} body {background:url(images/bg.jpg);margin:0;padding:0;text-align:center;} p {font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px;color:#200900;text-align:left;line-height:15px;} .white {color:white;} .lightbrown {color:#ece6da} .underline {text-decoration:underline;} a {color:#200900;text-decoration:underline;} #container {background:url(images/main_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_faq {background:url(images/faq_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_contact {background:url(images/contact_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_pricelist {background:url(images/price_bg2.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_swapshop {background:url(images/swapshop_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_examples {background:url(images/examples1_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #container_examples_two {background:url(images/examples2_bg.jpg);width:1110px;height:860px;margin:0 auto;position:relative;} #xmas {width:668px;height:110px;position:absolute;top:650px;left:80px;background:url(images/xmas.jpg);} #corner {background:url(images/top_corner_02.png);height:134px;width:124px; z-index:1000;position:absolute;top:0;right:0px;text-indent:-9999px;behavior: url(iepngfix.htc);} li {margin:0;padding:0;border:0;} ul {margin:0;padding:0;border:0;} /****** NAVIGATION ******/ #nav {width:676px;height:65px;position:absolute;top:92px;left:355px;} #nav ul {list-style-type:none;text-align:left;display:inline;} #nav li.home {background:url(images/nav_home.jpg) 0 0px no-repeat;width:86px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.home a {background:url(images/nav_home.jpg) 0 -65px no-repeat;width:86px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.home a:hover {background:url(images/nav_home.jpg) 0 0px no-repeat;width:86px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.examples {background:url(images/nav_examples.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.examples a {background:url(images/nav_examples.jpg) 0 -65px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.examples a:hover {background:url(images/nav_examples.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.pricelist {background:url(images/nav_pricelist.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.pricelist a {background:url(images/nav_pricelist.jpg) 0 -65px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.pricelist a:hover {background:url(images/nav_pricelist.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.swapshop {background:url(images/nav_swapshop.jpg) 0 0px no-repeat;width:137px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.swapshop a {background:url(images/nav_swapshop.jpg) 0 -65px no-repeat;width:137px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.swapshop a:hover {background:url(images/nav_swapshop.jpg) 0 0px no-repeat;width:137px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.faq {background:url(images/nav_faq.jpg) 0 0px no-repeat;width:63px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.faq a {background:url(images/nav_faq.jpg) 0 -65px no-repeat;width:63px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.faq a:hover {background:url(images/nav_faq.jpg) 0 0px no-repeat;width:63px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.contact {background:url(images/nav_contact.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.contact a {background:url(images/nav_contact.jpg) 0 -65px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} #nav li.contact a:hover {background:url(images/nav_contact.jpg) 0 0px no-repeat;width:130px;height:65px;text-indent:-9999px;display:block;float:left;} /****** FOOTER ******/ #footer {position:relative;top:775px;left:0px; width:942px;height:25px;margin:0 auto;z-index:9999;} .footerleft {font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:11px;color:#787878;float:left;height:25px} .footerright a {font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:11px;color:#787878;text-decoration:none;height:25px} .footerright a:hover {display:block;background-color:#d6485e;color:white;} /****** GENERIC STYLES ******/ .left {float:left;} .right {float:right;} h2, h1 {margin:0;padding:0;} .question {font-size:15px;font-weight:bold;text-decoration:underline;margin:13px 0 10px 0;} .brown {color:#d04155;font-weight:bold;} /**** PRICE LIST *****/ h1.price {background:url(images/title_price.jpg) no-repeat;height:42px;width:157px;text-indent:-9999px;position:absolute;top:268px;left:162px;} .smallprint {position:absolute;top:675px;left:170px;} /***** SWAPSHOP SPECIFIC ******/ h1.whatisswapshop {background:url(images/title_what_is_swap_shop.jpg) no-repeat;height:42px;width:284px;text-indent:-9999px;position:absolute;top:268px;left:164px;} h1.whatwillitcostme {background:url(images/title_what_will_it_cost_me.jpg) no-repeat;height:42px;width:284px;text-indent:-9999px;position:absolute;top:385px;left:164px;} h2.swapnumber123 {background:url(images/swap_number123.jpg) no-repeat;width:300px;height:368px;text-indent:-9999px;position:absolute;top:369px;left:708px;} /****** SWAPSHOP TABLE ******/ #swapshop_box {width:360px;height:60px;overflow-y:auto;overflow-x:hidden;position:absolute;top:323px;left:164px;} #swapshop_boxa {width:360px;height:60px;overflow-y:auto;overflow-x:hidden;position:absolute;top:440px;left:164px;} /***** CONTACT SPECIFIC ******/ #google {width:520px;height:393px;position:absolute;top:240px;left:152px;} #formcontainer {width:250px;height:260px;position:absolute;top:485px;left:757px;} h1.contactus {background:url(images/title_contactus.jpg) no-repeat;height:42px;width:188px;text-indent:-9999px;position:absolute;top:200px;left:748px;} h1.telephone {background:url(images/title_telephone.jpg) no-repeat;height:42px;width:263px;text-indent:-9999px;position:absolute;top:427px;left:748px;} .textfield {width:250px;padding:0;margin:0;} .labelstyle {color: #c4c2c3;font-family: trebuchet ms, tahoma, georgia, arial;margin:0px;text-align:left;font-size:11px;line-height:1.5em;padding:0;} #contact_intro {color:white;position:absolute;top:258px;left:759px;width:250px;height:150px;} .viewdirections a {background:url(images/btn_viewdirections.jpg) no-repeat;width:161px;height:40px;text-indent:-9999px;position:absolute;top:670px;left:520px} .fareham a {font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:white;text-decoration:none;} .fareham a:hover {background-color:#d6485e;color:white;} /****** FAQS TABLE ******/ #faq_box {width:520px;height:365px;overflow-y:auto;overflow-x:hidden;position:absolute;top:323px;left:164px;} /***** FAQS LABELS ******/ h1.faq {background:url(images/title_faq.jpg) no-repeat;height:42px;width:270px;text-indent:-9999px;position:absolute;top:268px;left:162px;} /****** EXAMPLES 1 IMAGES ******/ #examples_btn {background:url(images/btn_moreExamples1.jpg) no-repeat;width:223px;height:62px;text-indent:-9999px;display:block;position:absolute;top:697px;left:801px;} #examples_btn a {background:url(images/btn_moreExamples1.jpg) no-repeat;width:223px;height:62px;text-indent:-9999px;display:block;} #examples_btn a:hover {background:url(images/btn_moreExamples1.jpg) no-repeat;width:223px;height:62px;text-indent:-9999px;display:block;} #examplesback_btn {background:url(images/btn_examplegoback.jpg) no-repeat;width:224px;height:60px;text-indent:-9999px;display:block;position:absolute;top:698px;left:800px;} #examplesback_btn a {background:url(images/btn_examplegoback.jpg) no-repeat;width:224px;height:60px;text-indent:-9999px;display:block;} #examplesback_btn a:hover {background:url(images/btn_examplegoback.jpg) no-repeat;width:224px;height:60px;text-indent:-9999px;display:block;} #instruction {height:42px;width:276px;background:url(images/g_instruction.jpg) no-repeat;position:absolute;top:430px;left:420px;text-indent:-9999px;} #one {background:url(images/g_one.jpg) 0 0px no-repeat;width:200px;height:131px;text-indent:-9999px;display:block;position:absolute;top:234px;left:136px;} #one a {background:url(images/g_one.jpg) 0 -131px no-repeat;width:200px;height:131px;text-indent:-9999px;display:block;} #one a:hover {background:url(images/g_one.jpg) 0 0px no-repeat;width:200px;height:131px;text-indent:-9999px;display:block;} #two {background:url(images/g_two.jpg) 0 0px no-repeat;width:133px;height:168px;text-indent:-9999px;display:block;position:absolute;top:216px;left:382px;} #two a {background:url(images/g_two.jpg) 0 -168px no-repeat;width:133px;height:168px;text-indent:-9999px;display:block;} #two a:hover {background:url(images/g_two.jpg) 0 0px no-repeat;width:133px;height:168px;text-indent:-9999px;display:block;} #three {background:url(images/g_three.jpg) 0 0px no-repeat;width:146px;height:146px;text-indent:-9999px;display:block;position:absolute;top:223px;left:566px;} #three a {background:url(images/g_three.jpg) 0 -146px no-repeat;width:146px;height:146px;text-indent:-9999px;display:block;} #three a:hover {background:url(images/g_three.jpg) 0 0px no-repeat;width:146px;height:146px;text-indent:-9999px;display:block;} #four {background:url(images/g_four.jpg) 0 0px no-repeat;width:211px;height:149px;text-indent:-9999px;display:block;position:absolute;top:226px;left:754px;} #four a {background:url(images/g_four.jpg) 0 -149px no-repeat;width:211px;height:149px;text-indent:-9999px;display:block;} #four a:hover {background:url(images/g_four.jpg) 0 0px no-repeat;width:211px;height:149px;text-indent:-9999px;display:block;} #five {background:url(images/g_five.jpg) 0 0px no-repeat;width:198px;height:198px;text-indent:-9999px;display:block;position:absolute;top:460px;left:130px;} #five a {background:url(images/g_five.jpg) 0 -198px no-repeat;width:198px;height:198px;text-indent:-9999px;display:block;} #five a:hover {background:url(images/g_five.jpg) 0 0px no-repeat;width:198px;height:198px;text-indent:-9999px;display:block;} #six {background:url(images/g_six.jpg) 0 0px no-repeat;width:228px;height:154px;text-indent:-9999px;display:block;position:absolute;top:503px;left:314px;} #six a {background:url(images/g_six.jpg) 0 -154px no-repeat;width:228px;height:154px;text-indent:-9999px;display:block;} #six a:hover {background:url(images/g_six.jpg) 0 0px no-repeat;width:228px;height:154px;text-indent:-9999px;display:block;} #seven {background:url(images/g_seven.jpg) 0 0px no-repeat;width:177px;height:130px;text-indent:-9999px;display:block;position:absolute;top:513px;left:584px;} #seven a {background:url(images/g_seven.jpg) 0 -130px no-repeat;width:177px;height:130px;text-indent:-9999px;display:block;} #seven a:hover {background:url(images/g_seven.jpg) 0 0px no-repeat;width:177px;height:130px;text-indent:-9999px;display:block;} #eight {background:url(images/g_eight.jpg) 0 0px no-repeat;width:153px;height:154px;text-indent:-9999px;display:block;position:absolute;top:488px;left:816px;} #eight a {background:url(images/g_eight.jpg) 0 -154px no-repeat;width:153px;height:154px;text-indent:-9999px;display:block;} #eight a:hover {background:url(images/g_eight.jpg) 0 0px no-repeat;width:153px;height:154px;text-indent:-9999px;display:block;} #nine {background:url(images/g_nine.jpg) 0 0px no-repeat;width:195px;height:169px;text-indent:-9999px;display:block;position:absolute;top:212px;left:142px;} #nine a {background:url(images/g_nine.jpg) 0 -169px no-repeat;width:195px;height:169px;text-indent:-9999px;display:block;} #nine a:hover {background:url(images/g_nine.jpg) 0 0px no-repeat;width:195px;height:169px;text-indent:-9999px;display:block;} #ten {background:url(images/g_ten.jpg) 0 0px no-repeat;width:216px;height:159px;text-indent:-9999px;display:block;position:absolute;top:219px;left:337px;} #ten a {background:url(images/g_ten.jpg) 0 -159px no-repeat;width:216px;height:159px;text-indent:-9999px;display:block;} #ten a:hover {background:url(images/g_ten.jpg) 0 0px no-repeat;width:216px;height:159px;text-indent:-9999px;display:block;} #eleven {background:url(images/g_eleven.jpg) 0 0px no-repeat;width:208px;height:159px;text-indent:-9999px;display:block;position:absolute;top:222px;left:553px;} #eleven a {background:url(images/g_eleven.jpg) 0 -159px no-repeat;width:208px;height:159px;text-indent:-9999px;display:block;} #eleven a:hover {background:url(images/g_eleven.jpg) 0 0px no-repeat;width:208px;height:159px;text-indent:-9999px;display:block;} #twelve {background:url(images/g_twelve.jpg) 0 0px no-repeat;width:203px;height:159px;text-indent:-9999px;display:block;position:absolute;top:222px;left:779px;} #twelve a {background:url(images/g_twelve.jpg) 0 -159px no-repeat;width:203px;height:159px;text-indent:-9999px;display:block;} #twelve a:hover {background:url(images/g_twelve.jpg) 0 0px no-repeat;width:203px;height:159px;text-indent:-9999px;display:block;} #thirteen {background:url(images/g_thirteen.jpg) 0 0px no-repeat;width:281px;height:157px;text-indent:-9999px;display:block;position:absolute;top:508px;left:241px;} #thirteen a {background:url(images/g_thirteen.jpg) 0 -157px no-repeat;width:281px;height:157px;text-indent:-9999px;display:block;} #thirteen a:hover {background:url(images/g_thirteen.jpg) 0 0px no-repeat;width:281px;height:157px;text-indent:-9999px;display:block;} #fourteen {background:url(images/g_fourteen.jpg) 0 0px no-repeat;width:254px;height:157px;text-indent:-9999px;display:block;position:absolute;top:511px;left:574px;} #fourteen a {background:url(images/g_fourteen.jpg) 0 -157px no-repeat;width:254px;height:157px;text-indent:-9999px;display:block;} #fourteen a:hover {background:url(images/g_fourteen.jpg) 0 0px no-repeat;width:254px;height:157px;text-indent:-9999px;display:block;} /***** HOMEPAGE SPECIFIC IMAGES & STYLES *****/ #twitter {background:url(images/twitter_bg.jpg) no-repeat;width:275px;height:253px;position:absolute;top:506px;left:749px;padding:15px 40px 30px 40px;width:200px; height:200px;} #twitter ul {list-style-image:url('images/bullet_cream.png'); list-style-type:square; font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#200900; text-align:left; behavior: url(iepngfix.htc); } #twitter li {font-size:13px; color:#200900;} #twitter_div { padding-top:14px; padding-right: 5px; padding-left: 5px; } #twitter_div ul li { font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#ece6da; padding-bottom:10px; padding-top:0px; /*border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #white; */ } #twitter_div ul li a { text-decoration: none; color: #DDA84E; display:block; } #twitter_div ul li a:hover { text-decoration: none; color: #D78E42; } #twitter_div p { text-align: right; padding-right: 6px; padding-bottom: 10px; } h2.number1 {background:url(images/number1.jpg) no-repeat;width:168px;height:222px;text-indent:-9999px;position:absolute;top:517px;left:136px;} h2.number2 {background:url(images/number2.jpg) no-repeat;width:196px;height:222px;text-indent:-9999px;position:absolute;top:517px;left:305px;} h2.number3 {background:url(images/number3.jpg) no-repeat;width:201px;height:222px;text-indent:-9999px;position:absolute;top:517px;left:500px;} h2.hintreadmore {background:url(images/hint_readmore.jpg) no-repeat;width:86px;height:41px;text-indent:-9999px;position:absolute;top:282px;left:660px;} .slidercopy {position:absolute;top:75px;left:20px;width:300px;margin:0;padding:0;} .slidercopy2 {position:absolute;top:76px;left:80px;width:380px;} ul.slider { list-style-image:url('images/bullet_brown.gif'); list-style-type:square; font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#200900; text-align:left; position:relative; top:115px; left:34px; } ul.slider li {margin-bottom:5px;} ul.sliderdrop { list-style-image:url('images/bullet_brown.gif'); list-style-type:square; font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#200900; text-align:left; position:relative; top:130px; left:8px; } ul.sliderdrop li {margin-bottom:5px;} ul.services { list-style-image:url('images/bullet_cream.png'); list-style-type:square; font-family:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:13px; /*line-height:14px;*/ line-height:13px; color:#ece6da; text-align:left; position:absolute; top:258px; left:780px; width:240px; z-index:1; behavior: url(iepngfix.htc); } ul.services li {margin-bottom:16px;} #dividerpanel {background:url(images/divider_panel.jpg) no-repeat 0 0;width:276px;height:145px;position:absolute;top:260px;left:749px;} /***** LABELS *****/ h1.ourservices {background:url(images/title_ourservices.jpg) no-repeat;height:42px;width:196px;text-indent:-9999px;position:absolute;top:200px;left:761px;} h1.latestnews {background:url(images/title_latestnews.jpg) no-repeat;height:42px;width:185px;text-indent:-9999px;position:absolute;top:453px;left:761px;} /***** HOMEPAGE LABELS ******/ h1.welcome {background:url(images/title_welcome.jpg) no-repeat;height:42px;width:176px;text-indent:-9999px;position:absolute;top:18px;left:16px;} h1.whatnext {background:url(images/title_whatnext.jpg) no-repeat;height:42px;width:278px;text-indent:-9999px;position:absolute;top:18px;left:16px;} h1.whatdoweoffer {background:url(images/title_whatdoweoffer.jpg) no-repeat;height:42px;width:293px;text-indent:-9999px;position:absolute;top:18px;left:16px;} h1.easysteps {background:url(images/title_4easysteps.jpg) no-repeat;height:42px;width:173px;text-indent:-9999px;position:absolute;top:18px;left:16px;} /****** WORK ******/ .iframe {height:274px;width:480px;border:none;position:absolute;top:212px;left:168px;} .homeslide1 {background: url(images/homeslide1a.jpg) no-repeat;height:274px;width:480px;position:absolute;top:0px;left:0px;} .homeslide2 {background: url(images/homeslide2.jpg) no-repeat;height:274px;width:480px;position:absolute;top:0px;left:0px;} .homeslide3 {background: url(images/homeslide3.jpg) no-repeat;height:274px;width:480px;position:absolute;top:0px;left:0px;} .homeslide4 {background: url(images/homeslide1.jpg) no-repeat;height:274px;width:480px;position:absolute;top:0px;left:0px;} .gobtn a {background: url(images/btn_right_normal.gif) no-repeat;width:38px;height:38px;display:block;text-indent:-9999px;outline:none;position:absolute;top:327px;left:680px;} .homeslide1 a {text-decoration:none;} /*** Horizontal Slide & Magic Thanks to http://www.ndoherty.com/coda-slider ***/ noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin:0; position: absolute;top:211px;left:110px; width: 600px; z-index:800; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 480px; height: 274px; background: #eae5da; overflow:hidden;} .csw .loading {margin: 100px 0 200px 0; text-align: center;font-family:trebuchet MS, tahoma, verdana ;font-size:16px;color:#200900;} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; /*border: 4px #414141 solid; /* this is the border. should have the same value for the links */ margin: auto; width: 480px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 274px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 480px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 0px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #fff; text-decoration: none; display: none; padding:0; } .stripNav li.tab1 a { background: #60f } .stripNav li.tab2 a { background: #60c } .stripNav li.tab3 a { background: #63f } .stripNav li.tab4 a { background: #63c } .stripNav li.tab5 a { background: #00e } .stripNav li a:hover { background: #333; } .stripNav li a.current { background: #000; color: #fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 120px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 38px; width: 38px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("images/btn_left_normal.gif") no-repeat center; } .stripNavL a:active { background: url("images/btn_left_active2.gif") no-repeat center; } .stripNavL a:visited { background: url("images/btn_left_normal.gif") no-repeat center; } .stripNavR { background: url("images/btn_right_normal.gif") no-repeat center; } .stripNavR a:active { background: url("images/btn_right_active2.gif") no-repeat center; } /****** POP UP MAP ******/ #pop_container {margin:15px 15px 0px 15px;} #mainarea {width:498px;}