/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Title : CSS for Jay Chan Portfolio. Author : Jay Chan URL : www.jaychan.co.uk/2008 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Copyright (c) 2008 Jay Chan. All rights reserved. Horizontal Slide & Magic Inspired by http://www.ndoherty.com/coda-slider */ * {margin:0;padding;0} html {height:100%;background-color:#1b1b1b;} body {background-color:#1b1b1b;text-align:center;background: url(images/bg.jpg) no-repeat fixed;} img {border: 0 } p {color: #c4c2c3;font-family: trebuchet ms, tahoma, georgia, arial;margin:0px 0 4px 0px;text-align:left;font-size:11px;line-height:1.5em;} .intro {font-size:12px;} .pink {color:#ff1c93;} .pink2 {color:#ff1c93;margin:0 0 0 28px;} .link a {background-color:#ff1c93;text-decoration:none;margin-left:5px;color:#e7e7e7;padding: 0 2px 0 2px;} /**************** Structure *****************/ /*** Header/Nav and all main Sections ***/ #HeaderBG {width:100%;background: url(images/TopBarBG.jpg) repeat-x;height:170px;position:fixed;z-index:500;top:0px;left:0px;} #LogoArea {width:672px;background: url(images/Logo.jpg) no-repeat; height:170px;margin:0 auto;text-indent:-9999px;} #Nav {width:233px;background-color:none;height:52px;position:relative;top:69px;left:371px;} #Nav ul {list-style:none;text-align:left;padding:0;margin:0;} #InfoArea {margin:20px auto 0 auto;width:590px;border-top:1px #ff1c93 solid;border-bottom:1px #ff1c93 solid;padding:5px 0px 5px 0px;text-align:left;} #intro {width:590px;position:relative;top:0px;left:42px;} #footer {width:672px;height:124px;background: url(images/footer2.jpg) no-repeat;margin:0 auto;} #footerbg {width:100%;background: url(images/footer_bg.jpg) repeat-x; height:124px;margin:50px 0 0 0;} #profilefix {width:1px;height:600px;} li.portfolio a {width:77px;height:32px;display:block;background: url(images/portfolio_normal.jpg) no-repeat;text-indent:-9999px;float:left;} li.portfolio a:hover {width:77px;height:52px;display:block;background: url(images/portfolio_hover.jpg) no-repeat;text-indent:-9999px;float:left;} li.portfolio_selected {width:77px;height:52px;display:block;background: url(images/portfolio_hover.jpg) no-repeat;text-indent:-9999px;float:left;} li.profile a {width:67px;height:32px;display:block;background: url(images/profile_normal.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.profile a:hover {width:67px;height:52px;display:block;background: url(images/profile_hover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.profile_selected {width:67px;height:52px;display:block;background: url(images/profile_hover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.contact a {width:77px;height:32px;display:block;background: url(images/contact_normal.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.contact a:hover {width:77px;height:52px;display:block;background: url(images/contact_hover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.contact_selected {width:77px;height:52px;display:block;background: url(images/contact_hover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} /*** Form Styles ***/ #formcontainer {text-align:left;margin-top:20px;} .textfield {width:200px;} .labelstyle {color: #c4c2c3;font-family: trebuchet ms, tahoma, georgia, arial;margin:0px;text-align:left;font-size:11px;line-height:1.5em;padding:0;} .table {border:0;padding:0;margin:0;} /*** Footer Title***/ #jump {background :url(images/jump.jpg) no-repeat;width:214px;height:23px;text-indent:-9999px;position:relative;top:10px;left:210px;} #jump ul {list-style:none;text-align:left;padding:0;margin:0 0 0 120px;} li.one a {width:21px;height:21px;display:block;background: url(images/pages/one_normal.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.one a:hover {width:21px;height:21px;display:block;background: url(images/pages/one_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.one_selected {width:21px;height:21px;display:block;background: url(images/pages/one_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.two a {width:21px;height:21px;display:block;background: url(images/pages/two_normal.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.two a:hover {width:21px;height:21px;display:block;background: url(images/pages/two_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.two_selected {width:21px;height:21px;display:block;background: url(images/pages/two_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.three a {width:21px;height:21px;display:block;background: url(images/pages/three_normal.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.three a:hover {width:21px;height:21px;display:block;background: url(images/pages/three_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} li.three_selected {width:21px;height:21px;display:block;background: url(images/pages/three_rollover.jpg) no-repeat;text-indent:-9999px;float:left;margin-left:6px;} /*** Container ***/ #Container {width:672px;background-color:none;margin:175px auto 0 auto;z-index:1;position:relative;min-height:100%;*zoom: 1;overflow:hidden;border:none;} #Container:after { content: '.'; clear: both; height: 0; display: block; visibility: hidden; } /*** Clear them Floats! ***/ .surround { *zoom: 1; } .surround:after { content: '.'; clear: both; height: 0; display: block; visibility: hidden; } .clear {clear: both;} /*** Titles ***/ h1.welcome {background: url(images/titles/welcome.png) no-repeat;height:18px;width:430px;text-indent:-9999px;margin:0px 0px 15px 0px;} h1.thegreatescape {background: url(images/titles/title_thegreatescape.png) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.hpfair {background: url(images/titles/title_hpfair.png) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.mazdaballrally {background: url(images/titles/title_mazdaballrally.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.allders {background: url(images/titles/title_allders.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.fordcredit {background: url(images/titles/title_fordcredit.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.santech {background: url(images/titles/title_santech.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.rrh2 {background: url(images/titles/title_rrh.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.lfc {background: url(images/titles/title_lfc.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.lfc {background: url(images/titles/title_lfc.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.spring {background: url(images/titles/title_spring.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.ricambi {background: url(images/titles/title_ricambi.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.hpretail {background: url(images/titles/title_hpretail.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.ratpacman {background: url(images/titles/title_ratpacman.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.honeywell {background: url(images/titles/title_honeywell.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.formahouse {background: url(images/titles/title_formahouse.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.perfect {background: url(images/titles/title_perfect.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.placeholder {background: url(images/titles/placeholder.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.braye {background: url(images/titles/title_braye.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.euro2008 {background: url(images/titles/title_euro2008.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.ad {background: url(images/titles/title_adantiques.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.personal {background: url(images/titles/title_personal.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.about {background: url(images/titles/title_about.gif) no-repeat;height:18px;width:430px;text-indent:-9999px;margin:0px 0px 15px 0px;} h1.contact {background: url(images/titles/title_contact.gif) no-repeat;height:18px;width:430px;text-indent:-9999px;margin:0px 0px 15px 0px;} h1.ladbrokesi {background: url(images/titles/title_ladbrokesi.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.ladcasino {background: url(images/titles/title_ladbrokesCasino.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.kia {background: url(images/titles/title_kiaMotors.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.facebook {background: url(images/titles/title_facebook.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.tl {background: url(images/titles/title_tfl.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.bmi {background: url(images/titles/title_bmi.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.hyundai {background: url(images/titles/title_hyundai.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.personal {background: url(images/titles/title_personal.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.tfl {background: url(images/titles/title_tfl.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.facebook {background: url(images/titles/title_facebook.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.LadC {background: url(images/titles/title_ladbrokesCasino.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.bmi {background: url(images/titles/title_bmi.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.hyundai {background: url(images/titles/title_hyundai.gif) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} h1.tcpc {background: url(images/titles/title_tcpc.png) no-repeat;height:35px;width:590px;text-indent:-9999px;margin:35px 0 0 42px;} /** After Effects **/ .aftereffects {height:730px;width:560px;margin:0 auto;background-color:blue;} /*** Portfolio Images Page 1 ****/ /*** Ladbrokes iPhone ***/ .iPhone1 {background: url(images/work/iphone_1.jpg) no-repeat;height:340px;width:590px;} .iPhone2 {background: url(images/work/iphone_2.jpg) no-repeat;height:340px;width:590px;} /*** TCPC ***/ .tcpc1 {background: url(images/work/tcpc_1.jpg) no-repeat;height:340px;width:590px;} .tcpc2 {background: url(images/work/tcpc_2.jpg) no-repeat;height:340px;width:590px;} .tcpc3 {background: url(images/work/tcpc_3.jpg) no-repeat;height:340px;width:590px;} .tcpc4 {background: url(images/work/tcpc_4.jpg) no-repeat;height:340px;width:590px;} /*** Kia Barbados ***/ .kia1 {background: url(images/work/kia_1.jpg) no-repeat;height:340px;width:590px;} .kia2 {background: url(images/work/kia_2.jpg) no-repeat;height:340px;width:590px;} .kia3 {background: url(images/work/kia_3.jpg) no-repeat;height:340px;width:590px;} .kia4 {background: url(images/work/kia_4.jpg) no-repeat;height:340px;width:590px;} .kia5 {background: url(images/work/kia_5.jpg) no-repeat;height:340px;width:590px;} .kia6 {background: url(images/work/kia_6.jpg) no-repeat;height:340px;width:590px;} .kia7 {background: url(images/work/kia_7.jpg) no-repeat;height:340px;width:590px;} .kia8 {background: url(images/work/kia_8.jpg) no-repeat;height:340px;width:590px;} /*** Personal Project ***/ .wood1 {background: url(images/work/woods_1.jpg) no-repeat;height:340px;width:590px;} .wood2 {background: url(images/work/woods_2.jpg) no-repeat;height:340px;width:590px;} .wood3 {background: url(images/work/woods_3.jpg) no-repeat;height:340px;width:590px;} /*** Facebook ***/ .face1 {background: url(images/work/face_6.jpg) no-repeat;height:340px;width:590px;} .face2 {background: url(images/work/face_1.jpg) no-repeat;height:340px;width:590px;} .face3 {background: url(images/work/face_4.jpg) no-repeat;height:340px;width:590px;} .face4 {background: url(images/work/face_3.jpg) no-repeat;height:340px;width:590px;} .face5 {background: url(images/work/face_2.jpg) no-repeat;height:340px;width:590px;} .face6 {background: url(images/work/face_5.jpg) no-repeat;height:340px;width:590px;} /*** TFL ***/ .tfl1 {background: url(images/work/tfl_1.jpg) no-repeat;height:340px;width:590px;} .tfl2 {background: url(images/work/tfl_2.jpg) no-repeat;height:340px;width:590px;} .tfl3 {background: url(images/work/tfl_3.jpg) no-repeat;height:340px;width:590px;} .tfl4 {background: url(images/work/tfl_4.jpg) no-repeat;height:340px;width:590px;} .tfl5 {background: url(images/work/tfl_5.jpg) no-repeat;height:340px;width:590px;} .tfl6 {background: url(images/work/tfl_6.jpg) no-repeat;height:340px;width:590px;} /*** lotus escape ***/ .lotusescape1 {background: url(images/work/lotusescape_1.jpg) no-repeat;height:340px;width:590px;} .lotusescape2 {background: url(images/work/lotusescape_2.jpg) no-repeat;height:340px;width:590px;} .lotusescape3 {background: url(images/work/lotusescape_3.jpg) no-repeat;height:340px;width:590px;} .lotusescape4 {background: url(images/work/lotusescape_4.jpg) no-repeat;height:340px;width:590px;} .lotusescape5 {background: url(images/work/lotusescape_5.jpg) no-repeat;height:340px;width:590px;} .lotusescape6 {background: url(images/work/lotusescape_6.jpg) no-repeat;height:340px;width:590px;} /*** Ladbrokes Casino ***/ .ladC1 {background: url(images/work/ladcasino_1.jpg) no-repeat;height:340px;width:590px;} .ladC2 {background: url(images/work/ladcasino_2.jpg) no-repeat;height:340px;width:590px;} /*** Mazda Ball Rally ***/ .mbr1 {background: url(images/work/mbr_1.jpg) no-repeat;height:340px;width:590px;} .mbr2 {background: url(images/work/mbr_2.jpg) no-repeat;height:340px;width:590px;} .mbr3 {background: url(images/work/mbr_3.jpg) no-repeat;height:340px;width:590px;} .mbr4 {background: url(images/work/mbr_4.jpg) no-repeat;height:340px;width:590px;} .mbr5 {background: url(images/work/mbr_5.jpg) no-repeat;height:340px;width:590px;} .mbr6 {background: url(images/work/mbr_6.jpg) no-repeat;height:340px;width:590px;} .mbr7 {background: url(images/work/mbr_7.jpg) no-repeat;height:340px;width:590px;} .mbr8 {background: url(images/work/mbr_8.jpg) no-repeat;height:340px;width:590px;} .mbr9 {background: url(images/work/mbr_9.jpg) no-repeat;height:340px;width:590px;} .mbr10 {background: url(images/work/mbr_10.jpg) no-repeat;height:340px;width:590px;} .mbr11 {background: url(images/work/mbr_11.jpg) no-repeat;height:340px;width:590px;} /*** Euro 2008 ***/ .euro1 {background: url(images/work/euro_1.jpg) no-repeat;height:340px;width:590px;} .euro2 {background: url(images/work/euro_2.jpg) no-repeat;height:340px;width:590px;} .euro3 {background: url(images/work/euro_3.jpg) no-repeat;height:340px;width:590px;} .euro4 {background: url(images/work/euro_4.jpg) no-repeat;height:340px;width:590px;} .euro5 {background: url(images/work/euro_5.jpg) no-repeat;height:340px;width:590px;} /*** Braye ***/ .braye1 {background: url(images/work/braye_1.jpg) no-repeat;height:340px;width:590px;} .braye2 {background: url(images/work/braye_2.jpg) no-repeat;height:340px;width:590px;} .braye3 {background: url(images/work/braye_3.jpg) no-repeat;height:340px;width:590px;} /*** BMI ***/ .bmi1 {background: url(images/work/bmi_1.jpg) no-repeat;height:340px;width:590px;} .bmi2 {background: url(images/work/bmi_2.jpg) no-repeat;height:340px;width:590px;} .bmi3 {background: url(images/work/bmi_3.jpg) no-repeat;height:340px;width:590px;} /*** HP Fair ***/ .hpfair1 {background: url(images/work/hpfair_1.jpg) no-repeat;height:340px;width:590px;} .hpfair2 {background: url(images/work/hpfair_2.jpg) no-repeat;height:340px;width:590px;} /*** Hyundai ***/ .hyundai1 {background: url(images/work/hyundai_1.jpg) no-repeat;height:340px;width:590px;} .hyundai2 {background: url(images/work/hyundai_2.jpg) no-repeat;height:340px;width:590px;} .hyundai3 {background: url(images/work/hyundai_3.jpg) no-repeat;height:340px;width:590px;} .hyundai4 {background: url(images/work/hyundai_4.jpg) no-repeat;height:340px;width:590px;} /*** Fantasy Funfair ***/ .fantasy1 {background: url(images/work/fantasy_1.jpg) no-repeat;height:340px;width:590px;} .fantasy2 {background: url(images/work/fantasy_2.jpg) no-repeat;height:340px;width:590px;} .fantasy3 {background: url(images/work/fantasy_3.jpg) no-repeat;height:340px;width:590px;} .fantasy4 {background: url(images/work/fantasy_4.jpg) no-repeat;height:340px;width:590px;} /*** Ford Credit ***/ .credit1 {background: url(images/work/credit_1.jpg) no-repeat;height:340px;width:590px;} .credit2 {background: url(images/work/credit_2.jpg) no-repeat;height:340px;width:590px;} .credit3 {background: url(images/work/credit_3.jpg) no-repeat;height:340px;width:590px;} .credit4 {background: url(images/work/credit_4.jpg) no-repeat;height:340px;width:590px;} .credit5 {background: url(images/work/credit_5.jpg) no-repeat;height:340px;width:590px;} .credit6 {background: url(images/work/credit_6.jpg) no-repeat;height:340px;width:590px;} .credit7 {background: url(images/work/credit_7.jpg) no-repeat;height:340px;width:590px;} .credit8 {background: url(images/work/credit_8.jpg) no-repeat;height:340px;width:590px;} .credit9 {background: url(images/work/credit_9.jpg) no-repeat;height:340px;width:590px;} /*** Portfolio Images Page 2 ****/ /*** Santech ***/ .santech1 {background: url(images/work/santech_1.jpg) no-repeat;height:340px;width:590px;} .santech2 {background: url(images/work/santech_2.jpg) no-repeat;height:340px;width:590px;} .santech3 {background: url(images/work/santech_3.jpg) no-repeat;height:340px;width:590px;} /*** Red Riding Hood ***/ .rrh1 {background: url(images/work/rrh_1.jpg) no-repeat;height:340px;width:590px;} .rrh2 {background: url(images/work/rrh_2.jpg) no-repeat;height:340px;width:590px;} /*** Spring ***/ .spring1 {background: url(images/work/spring_1.jpg) no-repeat;height:340px;width:590px;} .spring2 {background: url(images/work/spring_2.jpg) no-repeat;height:340px;width:590px;} .spring3 {background: url(images/work/spring_3.jpg) no-repeat;height:340px;width:590px;} /*** london flower co ***/ .lfc1 {background: url(images/work/lfc_1.jpg) no-repeat;height:340px;width:590px;} .lfc2 {background: url(images/work/lfc_2.jpg) no-repeat;height:340px;width:590px;} .lfc3 {background: url(images/work/lfc_3.jpg) no-repeat;height:340px;width:590px;} .lfc4 {background: url(images/work/lfc_4.jpg) no-repeat;height:340px;width:590px;} .lfc5 {background: url(images/work/lfc_5.jpg) no-repeat;height:340px;width:590px;} /*** Ricambi Rally ***/ .ricambi1 {background: url(images/work/ricambi_1.jpg) no-repeat;height:340px;width:590px;} .ricambi2 {background: url(images/work/ricambi_2.jpg) no-repeat;height:340px;width:590px;} .ricambi3 {background: url(images/work/ricambi_3.jpg) no-repeat;height:340px;width:590px;} .ricambi4 {background: url(images/work/ricambi_4.jpg) no-repeat;height:340px;width:590px;} .ricambi5 {background: url(images/work/ricambi_5.jpg) no-repeat;height:340px;width:590px;} .ricambi6 {background: url(images/work/ricambi_6.jpg) no-repeat;height:340px;width:590px;} .ricambi7 {background: url(images/work/ricambi_7.jpg) no-repeat;height:340px;width:590px;} .ricambi8 {background: url(images/work/ricambi_8.jpg) no-repeat;height:340px;width:590px;} .ricambi9 {background: url(images/work/ricambi_9.jpg) no-repeat;height:340px;width:590px;} .ricambi10 {background: url(images/work/ricambi_10.jpg) no-repeat;height:340px;width:590px;} /*** Portfolio Images Page 3 ****/ /*** HP Retail Forum ***/ .hp1 {background: url(images/work/hp_1.jpg) no-repeat;height:340px;width:590px;} .hp2 {background: url(images/work/hp_2.jpg) no-repeat;height:340px;width:590px;} .hp3 {background: url(images/work/hp_3.jpg) no-repeat;height:340px;width:590px;} .hp4 {background: url(images/work/hp_4.jpg) no-repeat;height:340px;width:590px;} .hp5 {background: url(images/work/hp_5.jpg) no-repeat;height:340px;width:590px;} /*** Ratpackman ***/ .rat1 {background: url(images/work/rat_1.jpg) no-repeat;height:340px;width:590px;} .rat2 {background: url(images/work/rat_2.jpg) no-repeat;height:340px;width:590px;} .rat3 {background: url(images/work/rat_3.jpg) no-repeat;height:340px;width:590px;} .rat4 {background: url(images/work/rat_4.jpg) no-repeat;height:340px;width:590px;} /*** Honeywell ***/ .honeywell1 {background: url(images/work/honeywell_1.jpg) no-repeat;height:340px;width:590px;} .honeywell2 {background: url(images/work/honeywell_2.jpg) no-repeat;height:340px;width:590px;} .honeywell3 {background: url(images/work/honeywell_3.jpg) no-repeat;height:340px;width:590px;} .honeywell4 {background: url(images/work/honeywell_4.jpg) no-repeat;height:340px;width:590px;} /*** FORMA ***/ .forma1 {background: url(images/work/forma_1.jpg) no-repeat;height:340px;width:590px;} .forma2 {background: url(images/work/forma_2.jpg) no-repeat;height:340px;width:590px;} /*** PerfectHomes ***/ .perfect1 {background: url(images/work/perfect_1.jpg) no-repeat;height:340px;width:590px;} .perfect2 {background: url(images/work/perfect_2.jpg) no-repeat;height:340px;width:590px;} .perfect3 {background: url(images/work/perfect_3.jpg) no-repeat;height:340px;width:590px;} /*** AdAntiques ***/ .ad1 {background: url(images/work/ad_1.jpg) no-repeat;height:340px;width:590px;} .ad2 {background: url(images/work/ad_2.jpg) no-repeat;height:340px;width:590px;} .ad3 {background: url(images/work/ad_3.jpg) no-repeat;height:340px;width:590px;} /*** 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: 20px 0; position: relative; width: 100%; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 590px; height: 340px; background: #1b1b1b; overflow: none;} .csw .loading {margin: 200px 0 300px 0; text-align: center;font-family:tahoma,trebuchet;font-size:16px;color:#ff1c93;} .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: 590px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 340px; 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: 590px; /* 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: 170px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 23px; width: 23px; } .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; }