/* --------------------------------------------------------------------------------------------------------- Cascading Stylesheet designed by Fluvius (http://www.fluvius.co.uk) Copyright (c) Atkins Law. All Rights Reserved. Created: June 2008 Revision: 1.1 - 19/09/08 Latest Revision: 1.2 - 08/01/10 (adding Civil Litigation) IMPORTANT No part of this website can be considered a template. The author has no problem with you examining this stylesheet to find out how it 'ticks', but please don't reproduce it, or any other part of this website, without their written permission. Thanks. --------------------------------------------------------------------------------------------------------- */ /* -------------------- === Reset Styles - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://www.clintbalcom.com/css/better-css-reset -------------------- */ html, body { font-size:10px; margin:0; padding:0; line-height:1; } * { font-size:1em; margin:0; padding:0; outline:0; vertical-align:baseline; } img { border:none; } ul, ol, li { list-style:none; } :focus { outline:none; } table, td, form, fieldset { border:none; border-collapse:collapse; border-spacing:0; } table { border-collapse:separate; border-spacing:0; } /* tables still need 'cellspacing="0"' in the markup */ caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } /* -------------------- === Element Sizing -------------------- */ h1 { font-size:2.4em; } h2 { font-size:1.8em; } h3 { font-size:1.6em; } h4 { font-size:1.4em; } h5 { font-size:1.2em; } h6 { font-size:1.1em; } ol, ul, li { font-size:1.0em; } p { font-size:1.0em; } pre { font-family:monospace; font-size:1.0em; } /* -------------------- === Common Class Elements -------------------- */ .removed { display:none; } .move-off { width:1px; position:absolute; left:-999px; overflow:hidden; } .bold { font-weight:bold; } .italic { font-style:italic; } .underline { text-decoration:underline; } p.quote { background-color:#eee; margin-right:5em; margin-left:5em; padding:1em; } .clearfix { clear:both; font-size:0px; line-height:0px; visibility:hidden; margin:0; } /* -------------------- === Redefine Standard Tags -------------------- */ body { font-family:Arial, Helvetica, sans-serif; color:#333; text-align:left; position:relative; } a { color:#333; text-decoration:none; } a:hover { color:#fff; background-color:#f23703; text-decoration:none; } a img { border:0; } p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.1em; line-height:1.3em; margin-bottom:0.8em; } textarea, input { font-family:Tahoma, Helvetica, Arial, sans-serif; padding:0.8em 0.5em; width:26.5em; border:solid 1px #ccc; } textarea { height:11.3em; } /* -------------------- === Header (including logo and 4 activity buttons) -------------------- */ #header { background:#2f2f2f url(../images/bgnd_body.jpg) repeat-x top; height:8.40em; width:100%; } #header-container { width:90em; margin:0 auto 0 auto; position:relative; height:8.40em; } #header-container h1 { height:48px; width:385px; margin:0; padding:17px 0 0 0; background:url(../images/logo_atkins-law.gif) no-repeat right bottom; } #header-container h1 a { display:block; height:48px; width:385px; text-decoration:none; text-indent:-999em; background-image:none; background-color:transparent; } /* Activity Buttons */ #activity-wrapper { height:21px; width:125px; background:url(../images/bgnd_activity-buttons.gif) no-repeat; position:absolute; right:0px; bottom:-1px; } #activity-buttons { height:21px; width:125px; position:relative; } #activity-buttons p.home { height:14px; width:16px; background:url(../images/icon_activity-home-norm.gif) no-repeat; position:absolute; top:6px; left:8px; } #activity-buttons p.home a { display:block; height:14px; width:16px; text-decoration:none; text-indent:-999em; background-image:none; } #activity-buttons p.home a:hover { background:url(../images/icon_activity-home-hover.gif) no-repeat; } #activity-buttons p.contact { height:14px; width:20px; background:url(../images/icon_activity-contact-norm.gif) no-repeat; position:absolute; top:6px; left:38px; } #activity-buttons p.contact a { display:block; height:14px; width:20px; text-decoration:none; text-indent:-999em; background-image:none; } #activity-buttons p.contact a:hover { background:url(../images/icon_activity-contact-hover.gif) no-repeat; } #activity-buttons p.vcard { height:14px; width:18px; background:url(../images/icon_activity-vcard-norm.gif) no-repeat; position:absolute; top:6px; left:71px; } #activity-buttons p.vcard a { display:block; height:14px; width:18px; text-decoration:none; text-indent:-999em; background-image:none; } #activity-buttons p.vcard a:hover { background:url(../images/icon_activity-vcard-hover.gif) no-repeat; } #activity-buttons p.sitemap { height:14px; width:17px; background:url(../images/icon_activity-sitemap-norm.gif) no-repeat; position:absolute; top:6px; left:102px; } #activity-buttons p.sitemap a { display:block; height:14px; width:17px; text-decoration:none; text-indent:-999em; background-image:none; } #activity-buttons p.sitemap a:hover { background:url(../images/icon_activity-sitemap-hover.gif) no-repeat; } /* -------------------- === Content -------------------- */ #content { background:#fff url(../images/bgnd_content.gif) repeat-x; width:100%; margin:4.4em 0 0 0; } #content-container { width:90em; margin:0 auto; } #content a { color:#f23703; text-decoration: none; } #content a:hover { color:#f23703; text-decoration:underline; background-color:transparent; } #content a:visited { color:#8c8c8c; text-decoration:none; } #content h2 { font-size:2.4em; border-bottom:1px solid #333; padding-bottom:0.2em; margin-bottom:0.6em; letter-spacing:-1px; } #content h3 { font-size:1.8em; font-weight:normal; margin:2em 0 0.8em; letter-spacing:-1px; text-transform:capitalize; } #content h4 { margin:1em 0 0.5em; letter-spacing:-1px; } #content ul { margin:0 0 1em 2em; } #content li, #content li ul li, #content li ul li ul li { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.1em; line-height:1.3em; list-style:disc outside; margin:0.6em 0 0 1em; } #content li ul li { font-size:1em; } #content li ul li ul li { font-size:0.9em; } /* Content Column */ #content-column { width:62.6em; margin:7.5em 0 0 0; padding-bottom:3em; float:left; } #content-column p.breadcrumb { margin-top:0; } #content-column .box-out, #content-column .box-out-system-staff { border:1px solid #333; background-color:#fed0c2; margin:3em 0; } #content-column .box-out-system-staff { margin-top:1em; } #content-column .box-out h3, #content-column .box-out p, #content-column .box-out-system-staff p { font-size:1.2em; padding:1.4em; margin:0; font-weight:bold; line-height:1.3em; letter-spacing:normal; text-transform:none; } #content-column .box-out p, #content-column .box-out-system-staff p { font-family:Arial, Helvetica, sans-serif; font-size:1.4em; } #content-column .box-out img, #content-column .box-out-system-staff img { float:left; padding:0.3em; margin:1.4em; border:1px solid #fd9171; } #content-column .news-item { margin-bottom:1em; } #content-column .news-item li { list-style:disc inside; margin:0.6em 0 0 1em; } #content-column .news-item p { margin:0.3em 0 0.3em 3em; } #content-column p.date-added { color:#999; } #content-column #team-quote p { font-style:italic; } #content-column #team-quote p.name { font-style:normal; font-weight:bold; font-size:1.4em; } #content-column #team-quote p { font-style:normal; } #content-column .team-intro { margin-top:2em; } #content-column .page-top { background:url(../images/icon_top-of-page.gif) no-repeat left bottom; padding-top:3em; font-size:1.1em; padding-left:26px; } #content-column .page-top a { color:#333; text-decoration:none; } #content-column .page-top a:hover { color:#f23703; text-decoration:underline; background-color:transparent; } ul.sitemap-list li { list-style:disc inside; margin:0.6em 0 0 3em; font-size:1.2em; } #content-column .google-map { margin-top:0.5em; border:solid 1px #fed0c2; padding:0.5em; } /* Sidebar Column */ #sidebar-column { width:25.4em; margin:7.5em 0 3em 2em; padding-bottom:3em; float:left; } #sidebar-column h4 { font-size:1.5em; font-weight:bold; border-bottom:1px solid #333; margin:0.75em 0 1em; padding-bottom:0.2em; letter-spacing:-1px; } #sidebar-column li { list-style:disc outside; margin:0.6em 0 0 2em; line-height:1.2em; } #sidebar-contact { margin-top:4em; background-color:#efefef; border:solid 1px #b6b6b6; } #sidebar-contact h5 { font-size:1.5em; font-weight:bold; margin:0.3em 0 0.3em 0.3em; letter-spacing:-1px; } #sidebar-contact a:link, #sidebar-contact a:visited { color:#8c8c8c; text-decoration:none; } #sidebar-contact a:hover { color:#f23703; text-decoration:underline; } #sidebar-contact p.phone, #sidebar-contact p.form { font-size:1.4em; border-top:1px dotted #ccc; margin:0 0.5em 0.3em 0.5em; padding:0.5em 0 0.5em 2.5em; color:#666; } #sidebar-contact p.phone { background:url(../images/bgnd_contact-panel-phone.gif) no-repeat left center; } #sidebar-contact p.form { background:url(../images/bgnd_contact-panel-form.gif) no-repeat left center; } #sidebar-contact p.form span { background:url(../images/bgnd_sidebar-contact-arrow.gif) no-repeat left center; height:14px; width:11px; display:inline; } #sidebar-litigation { margin-top:3em; background-color:#fff; border:2px solid #b6b6b6; } #sidebar-litigation h5 { font-size:1.5em; font-weight:bold; padding:0.3em 0 0.3em 0.3em; letter-spacing:-1px; background-color:#cdcdcd; border-bottom:solid 1px #b6b6b6; } #sidebar-litigation #litigation-content { background:url(../images/bgnd_sidebar-litigation.jpg) no-repeat left top; font-size:1em; padding:0.5em 0 0.5em 145px; color:#666; height:134px; } #sidebar-litigation #litigation-content p { font-size: 1em; margin-right:0.3em; } #sidebar-employment { margin-top:3em; background-color:#fff; border:2px solid #b6b6b6; } #sidebar-employment h5 { font-size:1.5em; font-weight:bold; padding:0.3em 0 0.3em 0.3em; letter-spacing:-1px; background-color:#cdcdcd; border-bottom:solid 1px #b6b6b6; } #sidebar-employment #employment-content { background:url(../images/bgnd_sidebar-employment.jpg) no-repeat left top; font-size:1em; padding:0.5em 0 0.5em 145px; color:#666; height:134px; } #sidebar-employment #employment-content p { font-size: 1em; margin-right:0.3em; } #sidebar-immigration { margin-top:1.5em; background-color:#fff; border:2px solid #b6b6b6; } #sidebar-immigration h5 { font-size:1.5em; font-weight:bold; padding:0.3em 0 0.3em 0.3em; letter-spacing:-1px; background-color:#cdcdcd; border-bottom:solid 1px #b6b6b6; } #sidebar-immigration #immigration-content { background:url(../images/bgnd_sidebar-immigration.jpg) no-repeat left top; font-size:1em; padding:0.5em 0 0.5em 145px; color:#666; height:134px; } #sidebar-immigration #immigration-content p { font-size:1em; margin-right:0.3em; } #sidebar-prison { margin-top:1.5em; background-color:#fff; border:2px solid #b6b6b6; } #sidebar-prison h5 { font-size:1.5em; font-weight:bold; padding:0.3em 0 0.3em 0.3em; letter-spacing:-1px; background-color:#cdcdcd; border-bottom:1px solid #b6b6b6; } #sidebar-prison #prison-content { background:url(../images/bgnd_sidebar-prison.jpg) no-repeat left top; font-size:1em; padding:0.5em 0 0.5em 145px; color:#666; height:134px; } #sidebar-prison #prison-content p { font-size:1em; margin-right:0.3em; } /* -------------------- === Contact Panel -------------------- */ #contact { width:100%; margin:0; background:#efefef url(../images/bgnd_contact-panel-top-border.gif) repeat-x; } #contact-container { width:90em; margin:0 auto 0 auto; position:relative; } #contact-bottom { clear:both; font-size:0px; line-height:0px; margin:0; height:5px; background:#fff url(../images/bgnd_contact-panel-bottom-border.gif) repeat-x; } /* Contact Form Column */ #contact-form { width:62.6em; margin:0 0 2.8em 0; float:left; position:relative; } #contact-form form { width:100%; margin-top:3em; } #contact-form form h3{ font-size:1.8em; font-weight:normal; margin:0 0 0.2em; letter-spacing:-1px; } #contact-form form a { color:#f23703; text-decoration:none; } #contact-form form a:hover { color:#f23703; text-decoration:underline; background-color:transparent; } #contact-form form a:visited { color:#8c8c8c; text-decoration:none; } .requiredStar { font-weight:bold; color:#f23703; } .optional { background:#f4f4f4; } .required { background:#fff; } .optional:hover, .required:hover { background:#fed0c2; } .optional:focus, .required:focus { color:#fff; background:#fd6251; } #contact-form form #enquiry { position:absolute; right:0; top:0; margin-top:10.1em; } #contact-form form input.button { background:#5a5a5a url(../images/bgnd_button-contact-normal.gif) repeat-x; float:right; color:#fff; border:0; padding:4px 5px 3px; font-size:1.3em; cursor:pointer; cursor:hand; width:7em; } #contact-form form input.button:hover { background:#9d6060 url(../images/bgnd_button-contact-hover.gif) repeat-x; } #contact-form form input.button:focus { background:#5a5a5a url(../images/bgnd_button-contact-normal.gif) repeat-x; } #contact-form .return-top { clear:both; background:url(../images/icon_contact-top-of-page.gif) no-repeat left bottom; padding-top:1em; font-size:1.1em; padding-left:26px; } #contact-form .return-top a { color:#333; text-decoration:none; } #contact-form .return-top a:hover { color:#f23703; text-decoration:underline; background-color:transparent; } /* Other Links Column */ #other-links { width:25.4em; margin:3em 0 2.8em 2em; float:left; } #other-links h3 { margin:1.5em 0 0 1.5em; font-size:1.4em; font-weight:bold; letter-spacing:-1px; } #other-links li { list-style:disc inside; margin:0.6em 0 0 3em; font-size:1.2em; } #other-links a { color:#f23703; text-decoration:none; } #other-links a:hover { color:#f23703; text-decoration:underline; background-color:transparent; } /* -------------------- === Membership Logo Panel -------------------- */ #membership { width:90em; margin:0 auto 0 auto; } #membership h5 { margin:1em 0; } #membership-container { margin:0 auto; text-align:center; } #membership-container a { background-color:transparent; } #membership-container img { margin:0 10px; display:inline; vertical-align:middle; } /* -------------------- === Footer -------------------- */ #footer { width:100%; margin:4em 0 0 0; border-top:1px solid #b6b6b6; color:#999; } #footer-container { width:90em; margin:0 auto 0 auto; } /* Copyright */ #copyright { width:62.6em; margin:1.5em 0; float:left; } /* Fluvius */ #fluvius { width:25.4em; margin:1.5em 0 1.5em 2em; float:left; text-align:right; } #fluvius a { color:#999; text-decoration:underline; background-color:transparent; } #fluvius a:hover { color:#f23703; text-decoration:underline; } /* -------------------- === Navigation Bar (including stylesheet switcher buttons) -------------------- */ #navigation { width:100%; margin:0; position:absolute; top:8.4em; height:4.4em; background:#fefefe url(../images/bgnd_nav.gif) repeat-x; } #navigation h3 { display:none; } #nav { width:90em; margin:0 auto; height:4.4em; position:relative; } ul.main { font-size:1.2em; display:inline; } ul.main li { float:left; margin-top:0.55em; padding:0.9em 1.0em; } ul.main a { display:block; text-decoration:none; } ul.main li a { font-size:1.2em; text-decoration:none; text-transform:capitalize; display:block; } ul.main li:hover, ul.main li.sfhover { color:#fff; background-color:#f23703; display:block; } ul.main li ul { position:absolute; left:-999%; width:21em; margin:0; margin-top:0.6em; padding:0; background-color:#dadada; border:3px solid #fed0c2; z-index:50; } ul.main li li { padding:0; margin:0; height:auto; float:left; width:21em; } ul.main li ul a { margin:0; padding:0.5em 1.5em; } ul.main li ul ul { margin:-1em 0 0 6em; } ul.main li ul { padding:1px; border:3px solid #fed0c2; background:#000; } ul.main ul li a { display:block; padding:0.3em 0.8em 0.4em 0.8em; line-height:normal; background:#dadada; font-size:1em; } ul.main ul li a:hover { margin-left:-1px; padding-left:0.9em; color:#fff; background:#f23703 url(../images/dropnav_bullet.gif) no-repeat left center; } ul.main li:hover ul ul, ul.main li:hover ul ul ul, ul.main li.sfhover ul ul, ul.main li.sfhover ul ul ul { left:-999em; } ul.main li:hover ul, ul.main li li:hover ul, ul.main li li li:hover ul, ul.main li.sfhover ul, ul.main li li.sfhover ul, ul.main li li li.sfhover ul { left:auto; } #nav li:hover ul { display:inline; } /* Stylesheet Switcher */ #stylesheet-switcher { background:url(../images/bgnd_stylesheet-switcher.gif) no-repeat; position:absolute; top:0px; right:0px; height:4.4em; width:125px; } #stylesheet-switcher p.switch-default { height:28px; width:27px; background:url(../images/icon_style-switcher-default.gif) no-repeat 0px 0px; position:absolute; top:11px; left:38px; } #stylesheet-switcher p.switch-default a { display:block; height:28px; width:27px; text-decoration:none; text-indent:-999em; background-image:none; } #stylesheet-switcher p.switch-default a:hover { background:url(../images/icon_style-switcher-default.gif) no-repeat 0px 0px; } #stylesheet-switcher p.switch-medium { height:28px; width:27px; background:url(../images/icon_style-switcher-medium.gif) no-repeat right bottom; position:absolute; top:11px; left:66px; } #stylesheet-switcher p.switch-medium a { display:block; height:28px; width:27px; text-decoration:none; text-indent:-999em; background-image:none; } #stylesheet-switcher p.switch-medium a:hover { background:url(../images/icon_style-switcher-medium.gif) no-repeat 0px 0px; } #stylesheet-switcher p.switch-large { height:28px; width:27px; background:url(../images/icon_style-switcher-large.gif) no-repeat right bottom; position:absolute; top:11px; left:94px; } #stylesheet-switcher p.switch-large a { display:block; height:28px; width:27px; text-decoration:none; text-indent:-999em; background-image:none; } #stylesheet-switcher p.switch-large a:hover { background:url(../images/icon_style-switcher-large.gif) no-repeat 0px 0px; }