/* --------------------------------------------- JDRF Screen Styles author: Cyberwoven version: 2008.10 ----------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } a, a:link { color:#0067b2; text-decoration:none; } a:hover { text-decoration:underline; } em { font-style:italic; } :focus { outline: 0; } body { font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; color: #000; } ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } screen { font-size:11px; } ol { margin-left:35px; } ol li { margin-bottom:15px; } /* --------------------------------------------- Common ----------------------------------------------- */ body { background:#ffffff url(../images/bodybg.png) repeat-x top center; margin:0; padding:0; } #wrapper { max-width:1200px; background:#ffffff; margin:0 auto; } #container { width:960px; margin:0 auto; background:url(../images/breakerline.gif) no-repeat center 123px;} h1 {background:url(../images/h1-logo.png) no-repeat; width:290px; height:121px;text-indent:-9999px; float:left; position:relative; } h1 a { height:121px; display:block;} ul#mainNav {width:552px; height:138px; float:right; position:relative; top:48px; right:17px; } ul#mainNav li { float:left; display:inline; } ul#mainNav li a {display:block; background:url(../images/main-nav.png) no-repeat;text-indent:-9999px; } ul#mainNav li#mainnavabout { width:93px; } ul#mainNav li#mainnavabout a {background-position:0 -69px; height:33px; } ul#mainNav li#mainnavabout a:hover {background-position:0 0} ul#mainNav li#mainnavdonate { width:114px;} ul#mainNav li#mainnavdonate a {background-position:-93px -69px; height:33px; } ul#mainNav li#mainnavdonate a:hover {background-position:-93px 0; } ul#mainNav li#mainnavevents { width:106px; } ul#mainNav li#mainnavevents a {background-position:-207px -69px; height:33px; } ul#mainNav li#mainnavevents a:hover {background-position:-207px 0;} ul#mainNav li#mainnavpublicoutreach { width:239px; } ul#mainNav li#mainnavpublicoutreach a { background-position:-313px -69px; height:33px; } ul#mainNav li#mainnavpublicoutreach a:hover {background-position:-313px 0;} ul#mainNav li#mainnavhowyoucanhelp { width:278px; margin-left:64px; } ul#mainNav li#mainnavhowyoucanhelp a { background-position:-64px -102px; height:36px; } ul#mainNav li#mainnavhowyoucanhelp a:hover {background-position:-64px -33px;} ul#mainNav li#mainnavnews { width:91px; } ul#mainNav li#mainnavnews a { background-position:-342px -102px;height:36px; } ul#mainNav li#mainnavnews a:hover {background-position:-342px -33px;} ul#mainNav li#mainnavcontact { width:119px; } ul#mainNav li#mainnavcontact a { background-position:-433px -102px; height:36px; } ul#mainNav li#mainnavcontact a:hover {background-position:-433px -33px;} h2 {clear:both; width:920px; height:40px; text-indent:-9999px; font-size:1px; padding:0; margin:0 0 20px 20px; } #leftColumn {clear:both; float:left; margin: 0 0 0 30px; width:290px; padding:0 0 10px 0; } #subNav { display:block; } #subNav li { display:inline; margin:0; padding:0; } #subNav li a {display:block; font:bold 18px/30px "Berthold Akzidenz Grotesk", Arial, Sans-Serif; } #subNav li ul {margin:0 0 20px 0;} #subNav li ul li a { font:normal 13px/26px "Berthold Akzidenz Grotesk", Arial, Sans-Serif; color:#777 !important; } #subNav li ul li.active a {color:#000 !important; } #rightColumn { float:left; border-left:1px solid #000; padding:0 20px 10px 20px; width:580px; } #rightColumn h3 { font:bold 22px/30px "Berthold Akzidenz Grotesk", Arial, Sans-Serif; margin:0 0 5px 0; clear:both; } #rightColumn h4 { font:normal 20px/30px "Berthold Akzidenz Grotesk", Arial, Sans-Serif; margin:20px 0 5px 0; clear:both; } #rightColumn h5 { font:bold 14px/20px "Berthold Akzidenz Grotesk", Arial, Sans-Serif; margin:0 0 5px 0; clear:both; } body.biopage #rightColumn h3, body.biopage #rightColumn h4, body.biopage #rightColumn h5 {clear:none;} #rightColumn ul, #rightColumn ol { display:block; background:#EEE; padding: 20px 25px; margin:10px 0; clear:both; } #rightColumn ul {list-style-type:disc; } #rightColumn ul li, #rightColumn ol li { list-style-position:inside; padding: 2px 0; margin:0; } #rightColumn ul ul, #rightColumn ul ol, #rightColumn ol ul, #rightColumn ol ol{margin:0; padding:5px 25px } #rightColumn blockquote { width:200px; padding:15px ; margin:0 20px 20px 0; float:left; background:#eee; font-size:13px; font-family:georgia, "times new roman", serif; line-height:22px; font-style:italic; } #rightColumn img { float:left; margin:0 20px 20px 0; } #rightColumn p {margin:0 0 10px 0; padding:0; } #rightColumn a {font-weight:bold; } #footer {clear:both; } #footer img {margin-left:20px; float:left; } #footer blockquote { width:480px; float:left; margin:30px 0 0 20px; font-weight:400; } #mtm { display:block; float:left; width:410px; margin:10px 0 0 20px; font-weight:600; font-style:italic } #mtmtitle { display:block; float:left; width:410px; margin:0 0 0 20px; font-weight:600; font-style:italic; line-height:13px; } #credits { clear:left; background:url(../images/breakerline.gif) no-repeat center top ; position:relative; top:-1px; text-align:right; padding:0 20px 200px 0; } #credits span{color:#b2b2b2; padding:5px 0 0 0; position:relative; top:4px;} #credits a{margin-left:20px; border-left:1px solid #b2b2b2; padding:5px 0 0 10px; position:relative; top:4px; } /* --------------------------------------------- Section Specific ----------------------------------------------- */ body#about h2 { background:#8dc63f url(../images/section-about.gif) no-repeat; } body#donate h2 { background:#f7941d url(../images/section-donate.gif) no-repeat; } body#events h2 { background:#ec008c url(../images/section-events.gif) no-repeat; } body#publicoutreach h2 { background:#00aeef url(../images/section-publicoutreach.gif) no-repeat; } body#howyoucanhelp h2 { background:#ed1c24 url(../images/section-howyoucanhelp.gif) no-repeat; } body#news h2 { background:#9c187e url(../images/section-news.gif) no-repeat; } body#contact h2 { background:#0067b2 url(../images/section-contact.gif) no-repeat; } body#about #subNav a { color:#8dc63f; } body#donate #subNav a { color:#f7941d; } body#events #subNav a { color:#ec008c; } body#publicoutreach #subNav a { color:#00aeef; } body#howyoucanhelp #subNav a { color:#ed1c24; } body#news #subNav a { color:#9c187e; } body#contact #subNav a { color:#0067b2; } /* Alternate sidebar images for sections with no subnav. */ body#donate #subNav, body#events #subNav, body#publicoutreach #subNav, body#news #subNav, body#contact #subNav {display:none;} body#donate #rightColumn, body#events #rightColumn, body#publicoutreach #rightColumn, body#news #rightColumn, body#contact #rightColumn {border-left:1px solid #fff;} body#donate #leftColumn {background:url(../images/side-donate.jpg) no-repeat; height:590px;} body#events #leftColumn {background:url(../images/side-events.jpg) no-repeat; height:250px;} body#publicoutreach #leftColumn {background:url(../images/side-publicoutreach.jpg) no-repeat; height:360px;} body#news #leftColumn {background:url(../images/side-news.jpg) no-repeat; height:250px;} body#contact #leftColumn {background:url(../images/side-contact.jpg) no-repeat; height:250px;} body#about #rightColumn ul, body#about #rightColumn ol, body#about #rightColumn blockquote { background-color:#eff7e4; } body#donate #rightColumn ul, body#donate #rightColumn ol, body#donate #rightColumn blockquote { background-color:#fef0df; } body#events #rightColumn ul, body#events #rightColumn ol, body#events #rightColumn blockquote { background-color:#fcdbef; } body#publicoutreach #rightColumn ul, body#publicoutreach #rightColumn ol, body#publicoutreach #rightColumn blockquote { background-color:#dbf4fd; } body#howyoucanhelp #rightColumn ul, body#howyoucanhelp #rightColumn ol, body#howyoucanhelp #rightColumn blockquote { background-color:#fcdfe0; } body#news #rightColumn ul, body#news #rightColumn ol, body#news #rightColumn blockquote { background-color:#f1deed; } body#contact #rightColumn ul, body#contact #rightColumn ol, body#contact #rightColumn blockquote { background-color:#dbeaf4; } body#about #rightColumn h4 em { font-style:normal; color:#8dc63f; } body#donate #rightColumn h4 em { font-style:normal; color:#f7941d; } body#events #rightColumn h4 em { font-style:normal; color:#ec008c; } body#publicoutreach #rightColumn h4 em { font-style:normal; color:#00aeef; } body#howyoucanhelp #rightColumn h4 em { font-style:normal; color:#ed1c24; } body#news #rightColumn h4 em { font-style:normal; color:#9c187e; } body#contact #rightColumn h4 em { font-style:normal; color:#0067b2; } .bioquote { width:140px; float:left; padding:10px; margin:0 20px 20px 0; clear:both; background:#8dc63f url(../images/bio-corner.gif) no-repeat right bottom; } #rightColumn .bioquote img { float:none; margin:0; } #rightColumn .bioquote p { margin:10px 0 25px 0; padding:0; color:#fff; font-weight:bold; } /* --------------------------------------------- Home Page Specific ----------------------------------------------- */ #home #flash {margin: 0px; padding: 0px; float: left;} #home #rightColumn {float:left; width:260px; margin: 0 0 0 20px; border:none; padding:0; } #home #event {background:url(../images/events_walktocure_10.jpg) no-repeat; width:260px; height:195px; position:relative;} #home #donate {background:url(../images/donatetoday.jpg) no-repeat; width:260px; height:120px; margin:10px 0 0 0; position:relative;} #home #trial {background:url(../images/trials.jpg) no-repeat; width:260px; height:120px; margin:10px 0 0 0; position:relative;} #home #event h3, #home #event h4, #home #event span, #home #event a, #home #donate h3, #home #donate h4, #home #donate span, #home #donate a, #home #trial h3, #home #trial h4, #home #trial span, #home #trial a { text-indent:-9999px ; display:block; } #home #event a {position:absolute; top:0; left:0; display:block; width:260px; height:195px;} #home #donate a {position:absolute; top:0; left:0; display:block; width:260px; height:120px;} #home #trial a {position:absolute; top:0; left:0; display:block; width:260px; height:120px;} #home #footer { position:relative; top:-100px; } #home #credits { top:-101px; } #home h2 { clear:left; background:url(../images/h2-dedicated.png) no-repeat 0 -9px; margin:0; width:660px; height:354px; text-indent:-9999px; position:relative; float:left; display:inline;} /* --------------------------------------------- Reusable Classes ----------------------------------------------- */ .notcleared { clear:none !important; } .contactform label {display:block; width:60px; text-align:right; margin-right:5px; float:left;} .contactform span {padding-left:65px;} /* Error messages */ .contactform a.linkbutton {display:block; width:100px; text-align:center; margin-left:65px; border:1px solid #0067b2; color:#0067b2;} .contactform a.linkbutton:hover {color:#05538c; border-color:#05538c;} .donationform label {display:block; width:120px; text-align:right; margin-right:5px; float:left;} .donationform span {padding-left:125px;} /* Error messages */ .donationform a.linkbutton {display:block; width:100px; text-align:center; margin-left:125px; border:1px solid #f7941d; color:#f7941d;} .donationform a.linkbutton:hover {color:#f60; border-color:#f60;} .donationform {border:none; margin:0 0 20px 0; padding:0;} .donationform legend {display:none;} .donationform br {clear:both; margin-bottom:15px;} input.textbox {border:1px solid #999; padding:2px 3px; width:150px; text-align:left;} .textarea {border:1px solid #999; padding:2px 3px; width:350px; text-align:left;}