/* STYLES Created 25 Feb 2007 Updated 27 Jul 2008 Author: Jeffrey Prutsman Copyright (c)2007-2008 Signal Strategy Group LLC All rights reserved. Adaptation allowed under MIT License. 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; font-size:1em } 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 { text-align:center; line-height:1.4; font-family:verdana,"Lucida Grande","Bitstream Vera Sans",sans-serif; color:#333; background:#F0F0F0 } h1, h2, h3, h4, h5, h6 { margin-bottom:0.5em; color:#06C; font-weight:bold } h1 { font-size:220%; margin-top:1em; line-height:1.2; font-family:arial,helvetica,"Bitstream Vera Sans",sans-serif } h2 { font-size:200%; margin-top:1.2em; font-family:arial,helvetica,"Bitstream Vera Sans",sans-serif } h3 { font-size:150%; margin-top:1.5em } h4 { font-size:100% } p { margin-bottom:1em } blockquote { padding:0 2em } ul { list-style:disc; margin-left:2em } 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:0; padding:0 } ol p { margin-left:-2em } 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:#00F; text-decoration:none } a:visited { color:#639; text-decoration:none } a:hover, a:visited:hover { color:#00F; background:#FFC; text-decoration:underline } /* Nonstandard Links ---------------------------------------- */ .fontMenu { margin-bottom:0 } .fontMenu a:visited { color:#00F } #footer a { font-weight:bold; color:#FFF } #footer a:hover { background:none; text-decoration:underline } /* 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; border:1px solid #999 } /* 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. ------------------------------------------------------------------------------------------- */ #nofooter { background:#FFF } #wrapper { margin:0 auto; text-align:left; display:none } #navmenu { padding:0 24px; background:#000 } #header { padding:0 24px; background:#000 } #banner { padding:0 24px; background:#000; height:200px } /*******************************************/ #container { padding:0; padding-top:3em; background:#FFF } #sidebar { margin-left:24px; padding:24px; border-left:4px solid #CCC; padding-right:0 } #footer { padding:24px; color:#000 } /* 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 } .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 } .border5 { border:solid 5px #CCC } .border10 { border:solid 10px #CCC } .border20 { border:solid 20px #CCC } /* 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. -------------------------------------------------------------------------------------------------------- */ .innerwrap { margin:0 auto } body.normal .innerwrap { width:656px } body.wide .innerwrap { width:840px } body.ultra .innerwrap { width:1050px } body.normal .primary { width:440px } body.wide .primary { width:563px } body.ultra .primary { width:704px } body.normal .secondary { width:216px } body.wide .secondary { width:277px } body.ultra .secondary { width:346px } .twocolumn { width:49.5% } .threecolumn { width:33.0% } .fourcolumn { width:24.5% } .fivecolumn { width:19.5% } .sixcolumn { width:16.2% } .innerwrap, .primary, .secondary, .twocolumn, .threecolumn, .fourcolumn, .fivecolumn, .sixcolumn { overflow:hidden } /* Single Column Basic Layout ------------------------------------------------------------------------------------- */ body.basic .innerwrap, body.basic .primary, body.basic .secondary, body.basic .twocolumn, body.basic .threecolumn, body.basic .fourcolumn, body.basic .fivecolumn, body.basic .sixcolumn { float:none; clear:both; width:100% } /* Column Backgrounds Full-height image-based background color(s) for multiple columns without scripts ----------------------------------------------------------------------------------------------- */ body.normal #columns { width:656px; background:url(../img/site/columns-656.gif) repeat-y } body.wide #columns { width:840px; background:url(../img/site/columns-840.gif) repeat-y } body.ultra #columns { width:1050px; background:url(../img/site/columns-1050.gif) repeat-y } .grayfade { clear:both; margin-top:1em; padding:24px; background:#FFF url(../img/site/gradient-gray.gif) repeat-x } /* 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 p, #phone p, #dealer p, #headline h1 { font-size:0; line-height:0; color:#FFF; margin-left:-10000px } #logo { width:285px; height:45px; background:url(../img/site/logo-signal.gif) no-repeat } #logo a { width:285px; height:45px; background:url(../img/site/logo-signal.gif) no-repeat; display:block; font-size:0; line-height:0; color:#FFF; text-decoration:none } #orderbutton { float:right; overflow:hidden } #orderbutton a { display:block; font-size:0; line-height:0; border:none; text-decoration:none } #orderbutton { width:250px; height:80px; background:url(../img/site/orderbutton-off.jpg) no-repeat } #orderbutton a { width:250px; height:80px; background:url(../img/site/orderbutton-off.jpg) no-repeat } #orderbutton a:hover { width:250px; height:80px; background:url(../img/site/orderbutton-on.jpg) no-repeat } /* Prototype Absolute Location On-Off Sprite Background ---------------------------------------------------------------------------------------------- */ #content .one h2 { position:relative; padding:10px 0 1em 40px; color:#FFF } #content .one h2 a { position:absolute; left:-50px; top:-25px; display:block; width:85px; height:85px; text-indent:-9999px; background:url(../img/site/a_more.png) no-repeat 0 -85px } #content .one h2 a:hover { background-position:0 0; text-decoration:none } /* IMAGE GALLERY ------------------------------------------------------------------------------------- */ .gallery { cursor:default; list-style:none; margin-left:-30px; margin-right:30px } .gallery a { position:relative; cursor:default } .gallery a .zoom { display: none } .gallery a:hover { display:block; font-size:100%; z-index:1 } .gallery a:hover .zoom { display:block; position:absolute; top:-80px; left:-50px; z-index:100; overflow:visible } .gallery img { background:#FFF; border:1px solid #F0F0F0; color:inherit; padding:2px; vertical-align:top; width:173px } .gallery li { background:#F0F0F0; color:inherit; display:inline; float:left; margin:3px; padding:3px; position:relative } .gallery .zoom { width:346px } /* IMAGE FORMATTING ------------------- */ .incolumnright { float:right; margin:0 20px 10px 20px } .incolumnleft { float:left; margin:0 20px 10px 0 } /* 5 NAVIGATION MENUS -------------------------------------------------------------------------- */ #access { left:-10000px; visibility:hidden; width:0; height:0 } #navmenu ul { list-style:none } #navmenu a { display:block; font-size:110%; font-weight:normal; text-decoration:none; color:#0078FD } #navmenu a:hover { text-decoration:none; color:#FFF; background:#0078FD } /* Row Style ------------------------------------------------------------------------------ */ #navmenu { font-size:90%; font-weight:bold; background:transparent } #navmenu ul { display:inline } #navmenu li { float:left } #navmenu li.first { } #navmenu li.last { } #navmenu a { margin-top:1em; padding:0 1em 0.5em 1em; font-weight:bold; color:#FFF } /* Column Style ------------------------------------ #navmenu ul { display:block } #navmenu li { border-bottom:1px solid #CCC } #navmenu li.first { } #navmenu li.last { border-bottom:none } #navmenu a { padding:1em } */ /* Descendant selectors for current page tab ----------------------------------------------- */ body#s1 #tab1 a, body#s2 #tab2 a, body#s3 #tab3 a, body#s4 #tab4 a, body#s5 #tab5 a, body#s6 #tab6 a, body#s7 #tab7 a { color:#FFF; background:#0078FD } /* Descendant selectors for current page tab hover state ----------------------------------------------------------- */ body#s1 #tab1 a:hover, body#s2 #tab2 a:hover, body#s3 #tab3 a:hover, body#s4 #tab4 a:hover, body#s5 #tab5 a:hover, body#s6 #tab6 a:hover, body#s7 #tab7 a:hover { color:#FFF; background:#1BB706 } /* 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% } #abstract { } #promo { margin:1em 0 2em 0; padding:1em 2em; background:#F8F8E2; border:1px solid #CCC } #promo h2 { color:#D5481E } .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 } .question { font-weight:bold; margin-top:2em; padding-top:1em; border-top:1px solid #CCC } .answer { margin-top:-1em } .qnalead { font:bold 150% Georgia,Palatino,serif; color:#CCC; letter-spacing:-0.1em } .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:85%; 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 } /* 7 FORM ELEMENTS ------------------------------------------------------------------------------------------- */ form { margin:0 auto; overflow:hidden; padding:0 30px 35px 30px; color:#000; background:#FFF url(../img/site/form-gradient.jpg) repeat-x } form h1 { margin:0; padding:10px 0 15px; font-size:200%; color:#000; background:#E5ECFE } form.medium h1 { padding:15px 0 18px 0 } form a:link { text-decoration:underline } fieldset { display:block; width:100% margin:0 auto; padding:10px 30px; background:#FFF; border:1px solid #DDD } fieldset.left { float:none; padding-top:24px } /* float:none cancels generic .left class float */ legend { font-size:150%; font-weight:bold; color:#1E4A65; padding:0 0.5em } label, input, select, option, textarea { line-height:1.3 } #formintro { display:block; padding:10px 24px 15px } /* Form Classes ------------------------------------------------------------------------------------------------ */ form.dialog { width:350px } form.medium { width:500px } body.normal form.wide { width:600px } body.wide form.wide { width:700px } body.ultra form.wide { width:800px } /* 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 { font-style:italic; line-height:1.2; margin-top:4px } .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-left:-30px; margin-right:-30px; 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 }