/* STYLES Created 2007/02/25 Updated 2008/08/21 Author: Jeffrey Prutsman Copyright (c)2007-2008 Signal Strategy Group LLC All rights reserved. Adaptation allowed under MIT License with attribution. 1 GLOBAL RESET 2 HTML TAG DEFAULTS Standard Links Nonstandard links Glossary formatting Tables 3 PAGE LAYOUT Generic Layout Classes Page Section Classes 4 REPLACED ELEMENTS 5 NAVIGATION MENU 6 TEXT FORMATTING 7 FORM ELEMENTS NOTES: Section-Specific Styles Lists Small Forms Form Tables Links Typography ----------------------------------- */ /* 1 GLOBAL RESET Important: We recommend operating system default button appearance as best practice for usability. However, global reset of background:transparent and border-style:none wipes out operating system default button appearance. -------------------------------------------------------------------------------------------- */ * { margin:0; padding:0; outline:0; outline:none; vertical-align:baseline; text-decoration:none } table { border-collapse:collapse; border-spacing:0 } fieldset, img, abbr { border:0 } address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var { font-weight:normal; font-style:normal } h1, h2, h3, h4, h5, h6 { font-size:1em } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font-size:1em; white-space:normal } ul { list-style:none } caption, th { text-align:left } dfn, cite, var, address { font-style: normal; } a, ins { text-decoration:none } a img { border:none } :focus { outline:0 } abbr, acronym { font-variant:normal } font { font:inherit !important; color:inherit !important } /* 2 HTML TAG DEFAULTS Body background color provides full-height footer background color without JavaScript. #nofooter style in Page Layout changes body background to match main content area background for pages with no footer. -------------------------------------------------------------------------------------------------- */ body { font-family: verdana,"Lucida Grande","Bitstream Vera Sans",sans-serif; line-height:1.5; color:#444; background:#FFF } h1, h2, h3, h4, h5, h6 { margin-bottom:0.5em; color:#831518 } h1 { font-size:180%; margin-top:0; line-height:1.2; font-family:arial,helvetica,"Bitstream Vera Sans",sans-serif; font-weight:bold } h2 { font-size:160%; margin-top:1.2em; line-height:1.2; font-family:arial,helvetica,"Bitstream Vera Sans",sans-serif; font-weight:bold } h3 { font-size:140%; margin-top:1.5em; font-family:arial,helvetica,"Bitstream Vera Sans",sans-serif; font-weight:bold } h4 { font-size:120%; font-weight:bold } p { margin-bottom:1em } blockquote { padding:0 2em 1.5em } ul { list-style:disc; margin-left:30px } ul li { margin-bottom:0 } ul li.last { margin-bottom:1em } ul.nested { margin-bottom:1em; list-style:inherit } ul.nested li { margin-bottom:0 } ol { list-style-position:outside; list-style:decimal; margin-left:2em } ol li { margin-bottom:1em } ol h4 li { margin-left:-18px; padding:0 } ol p { margin-left:-3em } img { display:block } hr { margin:1em 0; color:#CCC } pre { font:1.1em/1.25 courier, "courier new", monospace; padding:1em; background:#F3F3F3; color:#00F } tt { font:bold 1em courier, "courier new", monospace } big { font-size:1.17em } small { font-size:0.83em } em { font-style:italic } strong { font-weight:bold; color:#000 } /* Standard Links -------------------------------------------------- */ a:link { color:#0671A6; text-decoration:none } a:visited { color:#A6067E; text-decoration:none } a:hover, a:visited:hover { color:#007DC3; background:#FFC; text-decoration:underline } /* Nonstandard Links ---------------------------------------- */ .textlink { font-weight:bold } .fontMenu { margin-bottom:18px; text-align:right } .fontMenu a:visited { color:#007DC3 } /* Glossary Formatting ------------------------------------------------------------- */ dt { display:inline; font-weight:bold; padding-right:0.5em } dd { display:inline } dd a:link:visited { color:#00F } /* Tables ------------------------------------------------------------ */ table { border-collapse:collapse; border-spacing:0 } th, td { text-align:left; padding:0.5em; color:#000 } /* white-space:nowrap; border:1px #ccc solid */ th { background:#333; color:#FFF } .grid { margin:2em 0; border:1px solid #999 } .number { text-align:right } .rowdark { background:#F0E9DA } .rowlight { background:#FFF } .rowheader { background:#480303; color:#FFF; font-weight:bold } /* 3 PAGE LAYOUT Divs default to 100% width of immediate hierarchical parent containers. Explicit margins are not declared in page layout divs to avoid IE box model problems. display:none reduces/prevents onload flicker. Reversed by behavior.js file. ------------------------------------------------------------------------------------------- */ #wrapper { margin:0 auto; text-align:center } /* Major Page Section Divs ------------------------------------------------------------ */ #header, #header-es, #banner, #navmenubar, #content, #footer { width:1000px; margin:0 auto; text-align:left } #header, #header-es, #banner, #navmenubar { font-size:0; line-height:0; color:#FFF } #header { height:45px; background:url(../img/site/header-coffee-cup-tagline-phone.gif) 0 -45px no-repeat } #header-es { height:45px; background:url(../img/site/header-coffee-cup-tagline-phone.gif) 0 0 no-repeat } #banner { height:100px; background:url(../img/site/header-frazier-law-banner.jpg) no-repeat } #masthead { width:476px; height:290px; overflow:hidden } #feature { width:476px; padding:20px 40px; overflow:hidden } #callout { width:180px; padding-top:160px; overflow:hidden; background:url(../img/site/speak-now.gif) 0 0 no-repeat } #callout-es { width:180px; padding-top:160px; overflow:hidden; background:url(../img/site/speak-now.gif) -180px 0 no-repeat } #footer { font-size:90%; line-height:1.3; text-align:center } /* Page Section Classes Use pixels instead of percentages to avoid IE box model problems and image resize inconsistencies. Percentages calculate with respect to immediate hierarchical parent containers. -------------------------------------------------------------------------------------------------------- */ .twocolumn { width:49% } .threecolumn { width:32% } .fourcolumn { width:24% } .fivecolumn { width:18% } .sixcolumn { width:15% } .primary, .secondary, .twocolumn, .threecolumn, .fourcolumn, .fivecolumn, .sixcolumn { overflow:hidden } /* 4 REPLACED ELEMENTS Background images for logo, banners and link button elements Note: Placing the "off" state image for a :hover effect within the parent containing div prevents :hover image load flicker. ----------------------------------------------------------------------------------------------- */ #logo, #logo h1, #logo p, #header p, #banner p, #masthead h1, #masthead h2, #masthead h3, #masthead p, #callout h1, #callout h2, #callout h3, #callout-es h1, #callout-es h2, #callout-es h3, #masthead p { font-size:0; height:0; line-height:0; margin:0; margin-left:-10000px; text-decoration:none } #logo { width:340px; height:75px; background:url(../img/site/header-logo-tagline.jpg) no-repeat } #logo a { display:block; font-size:0; line-height:0; overflow:hidden; border:none; text-decoration:none; width:340px; height:75px; background:url(../img/site/header-logo-tagline.jpg) no-repeat } #logo a:hover { background:url(../img/site/header-logo-tagline.jpg) no-repeat } #freecasereview { width:180px; height:152px; background:url(../img/site/free-case-review.jpg) no-repeat } #freecasereview a { display:block; font-size:0; line-height:0; overflow:hidden; border:none; text-decoration:none; width:180px; height:152px; background:url(../img/site/free-case-review.jpg) no-repeat } #freecasereview a:hover { background:url(../img/site/free-case-review-on.jpg) no-repeat } #freecasereview-es { width:180px; height:152px; background:url(../img/site/free-case-review-es.jpg) no-repeat } #freecasereview-es a { display:block; font-size:0; line-height:0; overflow:hidden; border:none; text-decoration:none; width:180px; height:152px; background:url(../img/site/free-case-review-es.jpg) no-repeat } #freecasereview-es a:hover { background:url(../img/site/free-case-review-es-on.jpg) no-repeat } /* Generic Layout Classes ---------------------------- */ .left { float:left } .right { float:right } .center { text-align:center } .justify { text-align:justify } .clear { clear:both } .clearleft { clear:left } .clearright { clear:right } .exclaim { text-transform:uppercase } .hide { display:none } .visible { display:block } .block { display:block } .inline { display:inline } .noborder { border:0 none } .padright { padding-right:2em } .top10 { margin-top:10px } .top20 { margin-top:20px } .divider { margin:24px 0 18px 0; border-top:1px solid #DDD } .spacer { height:30px; background:#F6F6F6 } .border5 { border:solid 5px #CCC } .border10 { border:solid 10px #CCC } .border20 { border:solid 20px #CCC } /* 5 NAVIGATION MENUS ------------------------------------------------------------------------------------------- */ #navmenubar { height:30px; background:url(../img/site/menu-navbar.gif) no-repeat } #navmenubar ul { display:inline; list-style:none } #navmenubar li { display:block; float:left; margin:0; font-size:0; line-height:0; overflow:hidden } #navmenubar a { display:block; height:30px; text-decoration:none } #navmenubar-es { height:30px; width:1000px; margin:0 auto; background:url(../img/site/menu-navbar-es.gif) no-repeat } #navmenubar-es ul { display:inline; list-style:none } #navmenubar-es li { display:block; float:left; margin:0; font-size:0; line-height:0; overflow:hidden } #navmenubar-es a { display:block; height:30px; text-decoration:none } /* Descendant selectors for current page tab --------------------------------------------- */ #tab1 a { width:341px } #tab2 a { width:105px } #tab3 a { width:210px } #tab4 a { width:186px } #tab5 a { width:122px } #tab1 a { background:url(../img/site/menu-navbar.gif) 0 -30px no-repeat } #tab2 a { background:url(../img/site/menu-navbar.gif) -341px -30px no-repeat } #tab3 a { background:url(../img/site/menu-navbar.gif) -446px -30px no-repeat } #tab4 a { background:url(../img/site/menu-navbar.gif) -656px -30px no-repeat } #tab5 a { background:url(../img/site/menu-navbar.gif) -839px -30px no-repeat } #tab1 a:hover { background:url(../img/site/menu-navbar.gif) 0 0 no-repeat } #tab2 a:hover { background:url(../img/site/menu-navbar.gif) -341px 0 no-repeat } #tab3 a:hover { background:url(../img/site/menu-navbar.gif) -446px 0 no-repeat } #tab4 a:hover { background:url(../img/site/menu-navbar.gif) -656px 0 no-repeat } #tab5 a:hover { background:url(../img/site/menu-navbar.gif) -839px 0 no-repeat } body#s1 #tab1 a { background:url(../img/site/menu-navbar.gif) 0 0 no-repeat } body#s2 #tab2 a { background:url(../img/site/menu-navbar.gif) -341px 0 no-repeat } body#s3 #tab3 a { background:url(../img/site/menu-navbar.gif) -446px 0 no-repeat } body#s4 #tab4 a { background:url(../img/site/menu-navbar.gif) -656px 0 no-repeat } body#s5 #tab5 a { background:url(../img/site/menu-navbar.gif) -839px 0 no-repeat } #tab1-es a { width:341px } #tab2-es a { width:156px } #tab3-es a { width:234px } #tab4-es a { width:107px } #tab5-es a { width:100px } #tab1-es a { background:url(../img/site/menu-navbar-es.gif) 0 -30px no-repeat } #tab2-es a { background:url(../img/site/menu-navbar-es.gif) -341px -30px no-repeat } #tab3-es a { background:url(../img/site/menu-navbar-es.gif) -498px -30px no-repeat } #tab4-es a { background:url(../img/site/menu-navbar-es.gif) -732px -30px no-repeat } #tab5-es a { background:url(../img/site/menu-navbar-es.gif) -837px -30px no-repeat } #tab1-es a:hover { background:url(../img/site/menu-navbar-es.gif) 0 0 no-repeat } #tab2-es a:hover { background:url(../img/site/menu-navbar-es.gif) -341px 0 no-repeat } #tab3-es a:hover { background:url(../img/site/menu-navbar-es.gif) -498px 0 no-repeat } #tab4-es a:hover { background:url(../img/site/menu-navbar-es.gif) -732px 0 no-repeat } #tab5-es a:hover { background:url(../img/site/menu-navbar-es.gif) -837px 0 no-repeat } body#s1 #tab1-es a { background:url(../img/site/menu-navbar-es.gif) 0 0 no-repeat } body#s2 #tab2-es a { background:url(../img/site/menu-navbar-es.gif) -341px 0 no-repeat } body#s3 #tab3-es a { background:url(../img/site/menu-navbar-es.gif) -498px 0 no-repeat } body#s4 #tab4-es a { background:url(../img/site/menu-navbar-es.gif) -732px 0 no-repeat } body#s5 #tab5-es a { background:url(../img/site/menu-navbar-es.gif) -837px 0 no-repeat } #navmenucolumn { width:264px; height:880px; margin:0; overflow:hidden; background:url(../img/site/menu-navcolumn.jpg) no-repeat } #navmenucolumn ul { display:block; margin:0; list-style:none } #navmenucolumn li { font-size:0; line-height:0; margin:0; overflow:hidden } #navmenucolumn a { display:block; width:264px; height:80px; margin:0; text-decoration:none } #navmenucolumn-es { width:264px; height:880px; margin:0; overflow:hidden; background:url(../img/site/menu-navcolumn-es.jpg) no-repeat } #navmenucolumn-es ul { display:block; margin:0; list-style:none } #navmenucolumn-es li { font-size:0; line-height:0; margin:0; overflow:hidden } #navmenucolumn-es a { display:block; width:264px; height:80px; margin:0; text-decoration:none } #tab6 a { background:url(../img/site/menu-navcolumn.jpg) 0 0 no-repeat } #tab7 a { background:url(../img/site/menu-navcolumn.jpg) 0 -80px no-repeat } #tab8 a { background:url(../img/site/menu-navcolumn.jpg) 0 -160px no-repeat } #tab9 a { background:url(../img/site/menu-navcolumn.jpg) 0 -240px no-repeat } #tab10 a { background:url(../img/site/menu-navcolumn.jpg) 0 -320px no-repeat } #tab11 a { background:url(../img/site/menu-navcolumn.jpg) 0 -400px no-repeat } #tab12 a { background:url(../img/site/menu-navcolumn.jpg) 0 -480px no-repeat } #tab13 a { background:url(../img/site/menu-navcolumn.jpg) 0 -560px no-repeat } #tab14 a { background:url(../img/site/menu-navcolumn.jpg) 0 -640px no-repeat } #tab15 a { background:url(../img/site/menu-navcolumn.jpg) 0 -720px no-repeat } #tab16 a { background:url(../img/site/menu-navcolumn.jpg) 0 -800px no-repeat } #tab6 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px 0 no-repeat } #tab7 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -80px no-repeat } #tab8 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -160px no-repeat } #tab9 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -240px no-repeat } #tab10 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -320px no-repeat } #tab11 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -400px no-repeat } #tab12 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -480px no-repeat } #tab13 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -560px no-repeat } #tab14 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -640px no-repeat } #tab15 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -720px no-repeat } #tab16 a:hover { background:url(../img/site/menu-navcolumn.jpg) -264px -800px no-repeat } body#s6 #tab6 a { background:url(../img/site/menu-navcolumn.jpg) -264px 0 no-repeat } body#s7 #tab7 a { background:url(../img/site/menu-navcolumn.jpg) -264px -80px no-repeat } body#s8 #tab8 a { background:url(../img/site/menu-navcolumn.jpg) -264px -160px no-repeat } body#s9 #tab9 a { background:url(../img/site/menu-navcolumn.jpg) -264px -240px no-repeat } body#s10 #tab10 a { background:url(../img/site/menu-navcolumn.jpg) -264px -320px no-repeat } body#s11 #tab11 a { background:url(../img/site/menu-navcolumn.jpg) -264px -400px no-repeat } body#s12 #tab12 a { background:url(../img/site/menu-navcolumn.jpg) -264px -480px no-repeat } body#s13 #tab13 a { background:url(../img/site/menu-navcolumn.jpg) -264px -560px no-repeat } body#s14 #tab14 a { background:url(../img/site/menu-navcolumn.jpg) -264px -640px no-repeat } body#s15 #tab15 a { background:url(../img/site/menu-navcolumn.jpg) -264px -720px no-repeat } body#s16 #tab16 a { background:url(../img/site/menu-navcolumn.jpg) -264px -800px no-repeat } #tab6-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 0 no-repeat } #tab7-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -80px no-repeat } #tab8-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -160px no-repeat } #tab9-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -240px no-repeat } #tab10-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -320px no-repeat } #tab11-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -400px no-repeat } #tab12-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -480px no-repeat } #tab13-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -560px no-repeat } #tab14-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -640px no-repeat } #tab15-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -720px no-repeat } #tab16-es a { background:url(../img/site/menu-navcolumn-es.jpg) 0 -800px no-repeat } #tab6-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px 0 no-repeat } #tab7-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -80px no-repeat } #tab8-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -160px no-repeat } #tab9-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -240px no-repeat } #tab10-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -320px no-repeat } #tab11-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -400px no-repeat } #tab12-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -480px no-repeat } #tab13-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -560px no-repeat } #tab14-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -640px no-repeat } #tab15-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -720px no-repeat } #tab16-es a:hover { background:url(../img/site/menu-navcolumn-es.jpg) -264px -800px no-repeat } body#s6 #tab6-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px 0 no-repeat } body#s7 #tab7-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -80px no-repeat } body#s8 #tab8-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -160px no-repeat } body#s9 #tab9-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -240px no-repeat } body#s10 #tab10-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -320px no-repeat } body#s11 #tab11-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -400px no-repeat } body#s12 #tab12-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -480px no-repeat } body#s13 #tab13-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -560px no-repeat } body#s14 #tab14-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -640px no-repeat } body#s15 #tab15-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -720px no-repeat } body#s16 #tab16-es a { background:url(../img/site/menu-navcolumn-es.jpg) -264px -800px no-repeat } /* IMAGE FORMATTING ------------------- */ .incolumnright { float:right; margin:0 20px 10px 20px } .incolumnleft { float:left; margin:0 20px 10px 0 } /* 6 TEXT FORMATTING ---------------------------------------------- */ #byline { color:#F00; margin-bottom:-1em } #dateline { color:#090 } #summary { color:#06C } #deck { font-size:160%; line-height:1.3; margin-top:-0.5em; margin-bottom:1em; font-weight:normal; color:#999 } #caption { margin-bottom:2em; font-style:italic; width:90% } .wsp { padding:0 24px } .alpha { visibility:hidden; margin:0; padding:0 } /* glossary section headings */ .deck { font-size:150%; line-height:1.2; margin-top:0; margin-bottom:1em } .dropcap { display:block; float:left; font:bold 400% Georgia,Palatino,serif; color:#C00; margin:-0.25em 0; letter-spacing:0.05em } .firstline, .legalcaps { text-transform:uppercase } .slug { font:80%/1 Arial,Helvetica,san-serif; text-transform:uppercase; font-weight:100; margin-bottom:-1em; color:#999 } .itemlead { font-weight:bold } .product { font-size:0.83em } .highlight { background-color:#FFC } .php { color:#C00 } .comment { color:#090 } .delete { text-decoration:line-through } /* line-thru for galleys and simply deleted for publication. */ .source { text-align:right; padding-right:3em; margin-bottom:2em } .listing { margin:0; padding:2em 1em } .photobox { padding:0.75em; margin:1em 0 0.5em 0 } .biglist { margin-right:3em; margin-bottom:1em } .biglist li { margin-bottom:1em } .biglistside { margin-right:0; margin-bottom:0.5em } .biglistside li { margin-bottom:0.5em } .pullquote { font:160%;/1.3 Georgia,Palatino,"Times New Roman",Times,serif; font-style:italic; padding:1em 2em; color:#555; background:#FAFAFA } .callout { width:38%; float:right; font-size:130%; line-height:1.4; margin:0.5em 0 2em 1em; padding:2em; color:#900; background:#EEE } .callout a { color:#900; text-decoration:none } .footnote { font-size:90%; margin-bottom:1em } h2.footnote { font-size:160%; line-height:1.2; margin-top:2em; margin-bottom:0.67em; padding-top:1em; border-top:1px solid #CCC } h2.news { margin-top:1em } h2.questions { margin-top:1.2em; margin-bottom:-0.5em } .question { margin-top:0; margin-right:1em; margin-bottom:0.5em } a.faq:hover, a.faq:visited:hover { color:#A6067E; background:none; text-decoration:underline } /* 7 FORM ELEMENTS ------------------------------------------------------------------------------------------- */ form { margin:0 auto; overflow:visible; color:#000 } form h1 { margin:0; padding:10px 30px 15px; font-size:130%; font-weight:bold; color:#975036; background:#E6E0DC } form a:link { text-decoration:underline } fieldset { display:block; width:100% margin:0 auto; padding:10px 30px; background:#FFF } fieldset.left { float:none; padding-top:24px } /* float:none cancels generic .left class float */ legend { font-size:120%; font-weight:bold; color:#0F6CBC; padding:0 30px } form p, form li, label, button, submit, input, select, textarea { font-size:100%; line-height:1.3 } option { font-size:100%; line-height:1.3 } /* option inheritance is relative to select */ #formintro { display:block; padding:10px 24px 15px } /* Form Classes ------------------------------------------------------------------------------------------------ */ form.dialog { width:420px } form.medium { width:536px } /* Label classes ------------------------------- */ label { display:block } label.above { margin-top:1em; line-height:1.3 } label.left { float:left; clear:left; text-align:right; width:140px; margin-top:0.5em; padding-right:10px } label.check, label.radio { margin-left:2.3em } .checkleft { margin-left:150px } /* Input Field Classes ------------------------- */ input, select, textarea { margin-top:5px; padding:0.2em; background:#FFF } /* border:1px solid #CCC } */ input.xsmall select.xsmall { width:5% } input.small, select.small { width:15% } input.medium, select.medium, textarea.medium { width:30% } input.wide, select.wide, textarea.wide { width:50% } input.xwide, select.xwide, textarea.xwide { width:70% } input.xxwide, select.xxwide, textarea.xxwide { width:98% } .formgrid { margin:0 4em } .fieldnote { width:100%; font-style:italic; line-height:1.2; margin-top:5px; margin-bottom:18px } .legendnote { font-weight:normal; font-size:65% } .require { font-weight:bold; color:#C00 } form p.left { margin-left:151px } /* Button location ------------------------------------------------ */ button { padding:0.2em 1em; cursor:hand } #submit { margin:1em 0 1.5em 0 } #submit.left { margin-left:149px } /* Form error display styles must be declared after the form element styles ------------------------------------------------------------------------------------------------------- */ #errors { margin:0; padding:15px 30px; background:#FDD; color:#C00 } #errors p { font-weight:bold } #errors ul { margin-left:18px; margin-top:0; padding-top:0 } #errors li { padding-bottom:0.2em }