/*------------------------------------------------ FAIRFAX LIBRARY EDITION 2010 ------------------------------------------------*/ /*------------------------------------------------ GLOBAL RESET ------------------------------------------------*/ HTML, BODY, FORM, DIV, SPAN, CITE, P, A, UL, OL, LI, DL, DT, DD, H1, H2, H3, H4, H5, H6, IMG, FORM, FIELDSET, LABEL, INPUT, BUTTON, SELECT, TEXTAREA, EMBED, TABLE TH, TD, OBJECT, EMBED {margin:0px; padding:0px;} OBJECT, EMBED, IFRAME {float:left;} DIV IMG {display:block; border:0; font-size:10px; font-weight:bold;} DIV.content IMG, TABLE IMG {display:inline;} DIV.panel IMG{ display:block;} BODY {font-family:Arial,Helvetica,San Serif; font-size:62.5%; line-height:normal; text-align:center;} BODY DIV {text-align:left;} /*------------------------------------------------ GLOBAL ------------------------------------------------*/ * {padding: 0; margin: 0} /*------------------------------------------------ TYPOGRAPHY ------------------------------------------------*/ h1, h2, h3, h4, h5, h6 {color:#0277B2; margin-bottom:12px; font-weight:bold;} h1 {font-size:16px} h2 {font-size:14px} h3 {font-size:12px} p {font-size:12px;margin-bottom:8px} p.small {font-size:11px;margin-bottom:6px} a {color:navy; } a:hover {color:white;background-color:#0277B2 } a:focus {outline: none} /*ff bug fix - removes dotted border when on focused*/ div.clear {clear:both} /*------------------------------------------------ LAYOUT ------------------------------------------------*/ body { font-family:"Arial", Helvetica, sans-serif;margin:0;padding:0;text-align:center;color:#333333; background: url(../images_2010/bg-splash-entry-repeat-x.jpg) repeat-x left 95px; } .container { width: 800px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } .header { height:95px; background: white; padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .header .logo-fairfax-library-edition { width:325px;height:85px;margin:0;padding:0;float:left; background: url(../images_2010/logo-fairfax-library-edition.jpg) no-repeat left center; } /*------------------------------------------------ LOGIN ------------------------------------------------*/ .header .login { width:304px;height:74px;margin:0;padding:35px 0 0 15px;float:right;border:0px solid red; background: url(../images_2010/bg-login-box.jpg) no-repeat left top; } .header .login form { margin:0; padding:0 } .header .login form p { position:relative } .header .login label { padding-left:5px;*margin:2px 0 0 1px;line-height:22px;font-weight:normal; font-size:13px; color:#666666; /*infield plugin*/position:absolute; top:0; left:0 } .header .login input.textField { width:105px; height:22px; line-height:22px;font-size:16px; margin-right:5px; color:#666666} .header .login input.buttonLogin { width:50px; height:26px; line-height:22px;margin-top:-9px;*margin-top:0} #msgBoxWrap { border:0px solid yellow; padding:0px; position:absolute; width:755px; font-size:1px; top:65px; z-index:10 } #msgBox { display:block; border:0px solid red; color:red; width:304px; background:url(../images_2010/msgBox-stem.gif) 253px top no-repeat; float:right; padding:0px; font-size:11px } #msgBox #body { width:auto; background:#FFFFA0 url(../images_2010/iconAlert.jpg) 10px 10px no-repeat; padding:10px; margin-top:14px; } #msgBox #body .message { padding-left:57px; color:red; min-height:33px } * html #msgBox #body .message { /* ie min-height hack*/ padding-left:57px; color:red; min-height:33px; height:auto !important; height:33px; } #msgBox #close { width:auto; text-align:right; } #msgBox #close a { color:red; text-decoration:underline } #msgBox #close a:hover { color:#FFFFA0; background-color:red; text-decoration:none } /*------------------------------------------------ SPLASH ------------------------------------------------*/ .splash {background:url(../images_2010/bg-splash-desktop.jpg) no-repeat left top;width:800px;height:440px;padding:0 20px;} * html .splash {margin-top:-14px;padding:0} .splash-entry {background:url(../images_2010/bg-splash-entry.jpg) no-repeat left top;width:800px;height:440px;padding:0 20px;} * html .splash-entry {margin-top:-14px;padding:0} /* Free Demo Button */ #freedemoWrapper { margin-left:476px; margin-top:60px; z-index:2; width:250px; height:67px; position:absolute; } a#buttonFreeDemo { background:url(../images_2010/button_freedemo.gif) left top no-repeat; display:block; width:250px; height:67px; cursor:pointer} a:hover#buttonFreeDemo {background-position:left -67px } /* Order Form Button */ #orderformWrapper { margin-left:476px; margin-top:137px; z-index:2; width:250px; height:53px; position:absolute; } a#buttonOrderform { background:url(../images_2010/button_orderform.gif) left top no-repeat; display:block; width:250px; height:53px; cursor:pointer} a:hover#buttonOrderform { background-position:left -53px } /* Subscribe Today */ #subscribetodayWrapper { margin-left:476px; margin-top:200px; z-index:2; width:250px; height:57px; position:absolute; } div#subscribetoday { background:url(../images_2010/text_subscribetoday.gif) left top no-repeat; display:block; width:250px; height:57px; } /* SmartEdition */ #SmartEditionWrapper { margin-left:476px; margin-top:267px; z-index:2; width:250px; height:54px; position:absolute; } a#buttonSmartEdition { background:url(../images_2010/button_SmartEdition.gif) left top no-repeat; display:block; width:250px; height:54px; cursor:pointer} a:hover#buttonSmartEdition { background-position:left -54px } /* SMH iPad App */ #SMHiPadAppWrapper { margin-left:476px; margin-top:267px; z-index:2; width:250px; height:54px; position:absolute; } a#buttonSMHiPadApp { background:url(../images_2010/button_SMHiPadApp.gif) left top no-repeat; display:block; width:250px; height:54px; cursor:pointer} a:hover#buttonSMHiPadApp { background-position:left -54px } /*------------------------------------------------ TABS ------------------------------------------------*/ .tabs { background:url(../images_2010/tabs-bg.jpg) left top repeat-x; width:800px; line-height:normal; margin-bottom:25px; height:50px; } .tabs ul { margin:0; padding:0 0 0 15px; list-style:none;} .tabs li { display:inline; margin:0; padding:0; } .tabs a { font-weight:bold; text-decoration:none; line-height:50px; cursor:pointer } .tabs a span { float:left; display:block; font-size: 14px; color: #CCCCCC; padding:0 25px 0 25px/*spacing between tabs*/ } .tabs a span { background:url(../images_2010/tabs-divider.jpg) no-repeat right top } .tabs a:hover { color:white; text-decoration:underline } .tabs a:hover span { color:white; text-decoration:underline } .tabs a.selected { color:white; text-decoration:none;background:url(../images_2010/tabs-bg-selected.jpg) repeat-x left top } .tabs a.selected span {color:white; text-decoration:none;background:url(../images_2010/tabs-bg-selected.jpg) repeat-x left top } .tabs a span.icon-home {background:url(../images_2010/tabs-icon-home.jpg) no-repeat center;width:55px;height:50px;padding:0} .tabs a:hover span.icon-home {background:url(../images_2010/tabs-icon-home-hover.jpg) no-repeat center} .tabs a.selected span.icon-home {background:url(../images_2010/tabs-icon-home-selected.jpg) no-repeat center} .tabs a span.icon-contact {background:url(../images_2010/tabs-icon-contact.jpg) no-repeat center;width:55px;height:50px;padding:0} .tabs a:hover span.icon-contact {background:url(../images_2010/tabs-icon-contact-hover.jpg) no-repeat center} .tabs a.selected span.icon-contact {background:url(../images_2010/tabs-icon-contact-selected.jpg) no-repeat center} /*------------------------------------------------ CONTENT ------------------------------------------------*/ .content {padding: 0 20px 20px 20px;background: #FFFFFF;font-size:12px} /*------------------------------------------------ ENTRY PAGE ------------------------------------------------*/ .splash-entry {text-align:center; padding-top:20px} .splash-entry h1, .splash-entry h2, .splash-entry h3 {color:white} table.entry {text-align:center; width:800px; margin-top:20px} table.entry td {vertical-align:top;} table.entry a {color:white; font-weight:bold; font-size:14px; text-decoration:none;background:none } table.entry a:hover {color:yellow; } table.entry a img {margin-bottom:5px} /*------------------------------------------------ FOOTER ------------------------------------------------*/ .footer {padding: 0 10px;border-top:1px solid #CCCCCC} .footer p {margin: 0;padding: 10px 0}