/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:775px } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#fff; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#fff; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#fff; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#fff; margin:0 0 12px 0 } a { } a:hover { } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { width:980px; margin:0 auto; position:relative; text-align:left } /* 3.3 - header */ div#header { padding:30px 0px 0 60px; float:left; width:200px} div#header .logo{ float:left} /* 3.4 - content */ div#content { background:#fff; padding:0 12px } /* 3.5 - primary content */ body.index div#primary-content { background:#fff; margin:0px; float:left; width:960px } /* 3.6 - secondary content */ div#secondary-content { background:#FFFFFF } /* 3.7 - tertiary content */ div#tertiary-content { } /* 3.8 - footer */ div#footer { padding:20px 75px; } div#footer ul{float:left; list-style:none} div#footer ul li{float:left; color:#b4b3b3} div#footer ul li a{color:#b4b3b3; padding:0 3px} div#footer ul li a:hover{color:#7b7b7b;} div#footer span{float:right; color:#b4b3b3; font-size:11px} div#footer span a{color:#b4b3b3; padding:0 3px; font-size:11px} div#footer span a:hover{color:#7b7b7b;} #compliance{float:left; width:190px;} #compliance h5{color:#b4b3b3; font-size:11px; font-weight:100; margin:0} #compliance p{color:#b4b3b3; font-size:11px; font-weight:100; margin:0} #compliance ul li{color:#b4b3b3; font-size:11px; font-weight:100; margin:0} #compliance address{color:#b4b3b3; font-size:11px; font-weight:100; margin:0} #compliance .footer-columns{float:left; width:190px; padding:20px 15px 0 0} #compliance .footer-columns a{color:#CC6600} div#footer #seo{float:left; width:840px; padding-top:50px} div#footer #seo h2{color:#b4b3b3; font-size:10px; margin:0} div#footer #seo p{color:#b4b3b3; font-size:10px; font-weight:100; margin:0} #ian-greenhalgh #name{background:url(../images/global/ian-greenhalgh.png) no-repeat; width:180px; height:47px; display:block; text-indent:-3000em; position:absolute; top:80px; left:540px } #ian-greenhalgh .faderIan{background:url(../images/global/info-panel-bg.png) repeat; width:390px; padding:5px} #ian-greenhalgh .faderIan a{color:#FF6600} #richard-kerr #name{background:url(../images/global/richard-kerr.png) no-repeat; width:180px; height:47px; display:block; text-indent:-3000em; position:absolute; top:200px; left:415px } #richard-kerr .faderRichard{background:url(../images/global/info-panel-bg.png) repeat; width:390px; padding:5px} #richard-kerr .faderRichard a{color:#FF6600} #warren-usden #name{background:url(../images/global/warren-usden.png) no-repeat; width:180px; height:47px; display:block; text-indent:-3000em; position:absolute; top:280px; left:645px } #warren-usden .faderWarren{background:url(../images/global/info-panel-bg.png) repeat; width:390px; padding:5px} #warren-usden .faderWarren a{color:#FF6600} .peopleDiv{float:right; width:280px;} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ .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: 0px 0; position: relative; width: 100%; z-index:1; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; margin:0 auto; width: 838px; /* Also specified in .stripViewer .panelContainer .panel below */ min-height: 524px; height: auto; height: 524px!important; 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:524px; position: relative; width: 838px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .primary-navigations { /* This is the div to hold your nav (the UL generated at run time) */ } .primary-navigations ul { /* The auto-generated set of links */ list-style: none; float:right; position:absolute; top:-50px; right:53px;width:538px; } .primary-navigations ul li { float: left; margin-right: 0px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .primary-navigations a { /* The nav links */ font-size: 10px; font-weight: bold; line-height: 32px; text-decoration: none; display: block; padding: 0px; } .primary-navigations li.tab1 a { background:url(../images/global/primary-navigations.gif) no-repeat 0 0; width:57px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab2 a { background:url(../images/global/primary-navigations.gif) no-repeat -57px 0; width:73px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab3 a { background:url(../images/global/primary-navigations.gif) no-repeat -130px 0; width:99px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab4 a { background:url(../images/global/primary-navigations.gif) no-repeat -228px 0; width:83px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab5 a { background:url(../images/global/primary-navigations.gif) no-repeat -311px 0; width:68px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab6 a { background:url(../images/global/primary-navigations.gif) no-repeat -379px 0; width:65px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab7 a { background:url(../images/global/primary-navigations.gif) no-repeat -444px 0; width:87px; height:33px; text-indent:-3000em; display:block } .primary-navigations li.tab1 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat 0 100%; } .primary-navigations li.tab2 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -57px 100%; } .primary-navigations li.tab3 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -130px 100%;} .primary-navigations li.tab4 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -228px 100%; } .primary-navigations li.tab5 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -311px 100%; } .primary-navigations li.tab6 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -379px 100%;} .primary-navigations li.tab7 a:hover { background:url(../images/global/primary-navigations.gif) no-repeat -444px 100%; } .primary-navigations li.tab1 a.current { background:url(../images/global/primary-navigations.gif) no-repeat 0 100%; } .primary-navigations li.tab2 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -57px 100%; } .primary-navigations li.tab3 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -130px 100%; } .primary-navigations li.tab4 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -228px 100%; } .primary-navigations li.tab5 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -311px 100%; } .primary-navigations li.tab6 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -379px 100%; } .primary-navigations li.tab7 a.current { background:url(../images/global/primary-navigations.gif) no-repeat -444px 100%; } .primary-navigations li a:hover { } .primary-navigations li a.current { } .primary-navigationsL, .primary-navigationsR { /* The left and right arrows */ position: absolute; top: 230px; text-indent: -9000em; } .primary-navigationsL a, .primary-navigationsR a { display: block; height: 64px; width: 53px; } .primary-navigationsL { left: 0; } .primary-navigationsR { right: 0; } .primary-navigationsL { background: url(../images/global/previous-arrow.gif) no-repeat center; } .primary-navigationsR { background: url(../images/global/next-arrow.gif) no-repeat center; } .info-panel{background:url(../images/global/info-panel-bg.png) repeat; color:#FFF; width:400px; padding:12px; position:absolute; bottom:12px; right:12px; z-index:999;} .min-panel{background:url(../images/global/info-panel-bg.png) repeat; color:#FFF; width:90px; padding:12px; position:absolute; bottom:12px; right:12px} .info-panel h2{color:#FFF} .info-panel dl { line-height:125%; z-index:9999; position:relative } .info-panel dl dd{margin:0 0 5px 0; z-index:9999; position:relative} .info-panel dl dd a{color:#C60; text-decoration:underline; z-index:9999; position:relative } .info-panel dl dd a:hover{color:#fff; text-decoration:underline; z-index:9999; position:relative } .info-panel ul{ list-style:none; margin:0px 0px 12px 0px!important; padding:0px; z-index:9999; position:relative} .info-panel ul li{color:#C60; font-weight:bold; z-index:9999; position:relative} .info-panel ul li a{color:#C60; text-decoration:underline; z-index:9999; position:relative } .info-panel ul li a:hover{color:#fff; text-decoration:underline; z-index:9999; position:relative } .info-panel dl dt {color:#CC6600; font-size:13px; padding:5px 0 } .info-panel h4{color:#CC6600; font-size:11px; margin:0 0 5px 0} .info-panel p{color:#FFF; line-height:125%; margin:0 0 5px 0; font-size:11px } .panel-inner{text-decoration:underline;} .panel-inner:hover{ color:#FFFFFF; text-decoration:underline;} .info-panel .recoverylist {list-style:disc; font-size:11px} .info-panel .recoverylist li{font-size:11px; font-weight:normal; margin-left:15px; color:#FFFFFF } .info-panel .recoverylist li.indent{ margin-left:25px} .info-panelwide{background:url(../images/global/info-panel-bg.png) repeat; color:#FFF; width:190px; padding:12px; position:absolute; top:75px; left:11px} #homePanel{background:url(../images/global/home-img.jpg) no-repeat; height:524px} #firmPanel{background:url(../images/global/the-firm-img.jpg) no-repeat; height:524px} #practicePanel{background:url(../images/global/practice-areas-img.jpg) no-repeat; height:524px} #credit-legPanel{background:url(../images/global/credit-leg-img.jpg) no-repeat; height:524px} #debt-recoveryPanel{background:url(../images/global/debt-recovery-img.jpg) no-repeat; height:524px} #key-peoplePanel{background:url(../images/global/key-people-img.jpg) no-repeat; height:524px} #servicePanel{background:url(../images/global/service-img.jpg) no-repeat; height:524px} #careersPanel{background:url(../images/global/carrers-img.jpg) no-repeat; height:524px} #contactPanel{background:url(../images/global/contact-img.jpg) no-repeat; height:524px} #credit-fiance-litigation-specialists-ttl{ background:url(../images/titles/credit-fiance-litigation-specialists-ttl.png) no-repeat; width:600px; height:51px; display:block; text-indent:-3000em} #home-ttl{ background:url(../images/titles/home-ttl.png) no-repeat; width:600px; height:151px; display:block; text-indent:-3000em} #the-firm-ttl{background:url(../images/titles/the-firm-ttl.png) no-repeat; width:600px; height:51px; display:block; text-indent:-3000em} #practice-area-ttl{background:url(../images/titles/practice-area-ttl.png) no-repeat center; padding:15px; width:218px; height:51px; display:block; text-indent:-3000em} #commercial-and-consumer-credit-litigation-ttl{background:url(../images/titles/commercial-and-consumer-credit-litigation-ttl.png) center no-repeat; padding:15px; width:650px; height:51px; display:block; text-indent:-3000em} #debt-recovery-ttl{background:url(../images/titles/debt-recovery-ttl.png) center no-repeat; padding:15px; width:230px; height:51px; display:block; text-indent:-3000em} #key-people-ttl{background:url(../images/titles/key-people-ttl.png) no-repeat; width:181px; height:51px; display:block; text-indent:-3000em} #service-ttl{background:url(../images/titles/service-ttl.png) no-repeat; width:127px; height:51px; display:block; text-indent:-3000em} #careers-ttl{background:url(../images/titles/careers-ttl.png) no-repeat; width:128px; height:51px; display:block; text-indent:-3000em} #contact-us-ttl{background:url(../images/titles/contact-us-ttl.png) no-repeat; width:176px; height:51px; display:block; text-indent:-3000em} #wrapper-inner { width:838px; height:100%; position:absolute; top:0;left:0; background-color:#ccc; overflow:hidden; } #mask { width:838px; height:500%; background-color:#eee; } .item { width:838px; height:524px; float:left; background-color:#ddd; } .content { width:838px; height:524px; background-color:#aaa; position:relative; } .selected { background:#fff; font-weight:700; } .clear { clear:both; } .keypeople{ float:right} .keypeople li{color:#CC6600; font-size:11px; padding:2px 0} .keypeople li a{color:#CC6600; font-size:11px; padding:2px 0} /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }