/* NOTE to self: overflow: auto clears floated divs. Use it in the containing div (contains the floated elements). In this case, it's the Container div. For reference: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
/* ////////////// GLOBAL STYLES - begin ////////////// */
html { padding: 0; margin: 0; }
/* has large image as background... Padding at top pushes the rest of the content down */
body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 0.79em; color: #333; height: 100%; background: url(images/bridge2.jpg) top left no-repeat #fff; padding: 140px 0px 0px 0px; margin: 0px 0px 0px -10px; line-height: 1.5; }
#container { width: 900px; margin: 0px 0px 0px 20px; }
#menu { background-color: #000000; width: 100%; }
/* holds accordion nav menu on all interior pages */
#navCol { width: 215px; float: left; min-height: 400px; padding-top: 0; }
#breadcrumbs { width: 621px; margin-left: 30px; float: left; }
/* holds actual page content */
#featureImage { /* holds feature image on interior pages */ width: 100%; margin-bottom: 30px; }
/* #header_about-us, #header_fc-advan, #header_about-us, #header_programs, #header_news-finan, #header_careers, #header_citizenship, #header_sitemap { display: none; } */
#header_about-us, #header_fc-advan, #header_about-us, #header_programs, #header_news-finan, #header_careers, #header_citizenship, #header_sitemap, #header_contact, #header_search { width: 900px; height: 99px; }
#header_about-us { background: url(images/header_about-us.jpg) top left no-repeat #5a76a5; }
#header_fc-advan { background: url(images/header_farm-credit-advan.jpg) top left no-repeat #5a76a5; }
#header_programs { background: url(images/header_programs-services.jpg) top left no-repeat #5a76a5; }
#header_news-finan { background: url(images/header_news-financials.jpg) top left no-repeat #5a76a5; }
#header_careers { background: url(images/header_careers.jpg) top left no-repeat #5a76a5; }
#header_citizenship { background: url(images/header_citizenship.jpg) top left no-repeat #5a76a5; }
#header_sitemap { background: url(images/header_sitemap.jpg) top left no-repeat #5a76a5; }
#header_contact { background: url(images/header_contact.jpg) top left no-repeat #5a76a5; }
#header_search { background: url(images/header_search.jpg) top left no-repeat #5a76a5; }
#topInfo {display: none; }
h1 { font-size: 1.7em; font-weight: normal; margin-top: 10px; margin-bottom: 20px; line-height: 1.2; }
h2 { font-size: 1.35em; font-weight: normal; color: #7b382f; margin: 0px 0px 0px 0px; padding: 0; line-height: 1.1; }
h3 { font-size: 1em; font-weight: bold; color: #000; margin: 10px 0px -5px 0px; padding: 0; }
h4 { font-size: 1.1em; font-weight: normal; text-align: center; margin-top: 1px; margin-bottom: 3px; }
#logo { width: 462px; height: 70px; background: url(images/logo-bridge.jpg) top left no-repeat; position: absolute; top: 38px; left: 22px; }
/* holds a hidden text link */
#logo a { text-indent: -2000em; /* hides link text */ text-decoration: none; /* no underline in link */ z-index: 1000; /* IE fix */ height: 73px; display: block; }
.sideSpecial { /* for special items in side columns */
margin-top: 40px;
}
/* --------- HOME PAGE ----------- */
/* this holds all content beneath the menu and flashHolder on the HOME page, including breadcrumbs, etc. and has the light gradient background image */
#contentHome { width: 900px; height: 500px; background: url(images/side-gradient2.jpg) top left no-repeat #fff; padding: 17px 0px 25px 0px; }
/* div that holds the image that will be the flash movie on home page */
#flashHolder { width: 900px; height: 292px; background: url(images/flash-placeholder-isaac.jpg) top left no-repeat #5a76a5; clear: right;}
#colWrapper { width: 866px; margin: 17px 17px 0px 17px; } /* this helps avoid the padding problem with IE */
#leftCol { width: 205px; float: left; padding-top: 0; }
#centerCol { width: 352px; float: left; margin-left: 42px; }
#rightCol { width: 225px; float: left; margin-left: 42px; }
/* Content div holds all content beneath the menu on all interior pages (NOT home page), including breadcrumbs, etc. */
#content { background-color: #fff; padding: 7px 25px 25px 7px; overflow: auto; }
#contentCol { width: 635px; margin-left: 0; padding-bottom: 20px; background-color: #fff; overflow: auto; }
/* holds page content on Site Map page */
#contentSiteMap { width: 100%; margin-left: 10px; margin-top: 10px; }
/* holds accordion nav menu on all interior pages */
/* holds actual page content */
#featureImage { /* holds feature image on interior pages */ width: 100%; margin-bottom: 30px; }
/* ////////////// CONTENT STYLES - These are context-oriented styles ////////////// */
#featureHead { /* This is an SEO friendly image-based header on the home page. */ background: url(images/FCadvantage.gif) top left no-repeat #fff; display: block; height: 23px; width: 342px; text-indent: -2000em; /* Hides the text in the h1 tag */ text-decoration: none; z-index: 1000; margin: 0px 0px 0px 0px;}
/* used for news on home page & maybe other places. Has heavy colored line across the top */
.newsHead { font-size: 1.1em; font-weight: bold;/* border-top: 5px solid #6da7c4; border-top: 5px solid #000; */ border-top: 5px solid #607daa; padding: 0; margin-bottom: 10px; }
/* used for news on HOME page & maybe other places. Has heavy colored line across the top. This one has more margin space above it */
.newsHead2 { font-weight: bold; font-size: 1.2em; border-top: 5px solid #6da7c4; /* border-top: 5px solid #000;*/ /* border-top: 5px solid #607daa; this is the bluer color */ margin-bottom: 10px; margin-top: 20px;}
/* used on programs/services pg & maybe other places. Has heavy bright colored line across the top */
.newsHead3 { font-size: 1.3em; font-weight: normal; border-top: 5px solid #6da7c4;/* border-top: 5px solid #f3b256; */ /* border-bottom: 5px solid #ee881b; */ padding-bottom: 0; border-top: 5px solid #E6E3D8;/* border-top: 5px solid #69342c; */ margin-bottom: 10px; }
.barHead { /* has heavy black background... used anywhere? */ color: #fff; background-color: #000; font-size: 1.1em; padding: 0px 5px 0px 5px; margin-top: 20px; }
.barHeadLandscapes { /* has heavy black background. Use for Landscapes header on HOME page*/ color: #fff; background: url(images/LS-fanned-top.gif) bottom right no-repeat #000; font-size: 1.1em; padding: 0px 5px 0px 5px; margin-top: 20px;}
#LSMags { /* Has bottom of LS mags as bg image. Forces text to flow around it to the left. */ width: 73px; height: 87px; background: url(images/LS-fanned-bottom.gif) top right no-repeat; float: right; clear: left; padding-left: 15px; padding-bottom: 15px; margin-top: 0; }
#homeFeatureImage { /* holds the "feature" story image on the home page */ margin: 0; padding: 0; background: url(images/community.jpg) top left no-repeat #fff; width: 222px; height: 178px; }
#photoBanner { /* black banner to put across image on home page. Put INSIDE the homeFeatureImage div */ width: 85%; float: left; color: #fff; background-color: #000; padding: 2px 5px 1px 5px; font-size: 1em; margin-top: 120px; }
.director { margin-bottom: 20px; }
div.directorPhoto { /* this acts like a column for the director photos. If the photo width changes, make the div width the same size */ float: left; width: 90px; height: 90px; margin-right: 20px; height: auto; background-color: #eee; }
div.directorText { width: 531px; height: auto; }
/* programs & services page; maybe other main section pages */
.sectionLeft { width: 191px; min-height: 100px; float: left; padding: 0px 5px 5px 5px; }
.sectionMid { width: 191px; min-height: 100px; margin-left: 9px; float: left; padding: 0px 5px 5px 5px; }
.sectionRight{ width: 191px; min-height: 100px; margin-left: 9px; float: left; padding: 0px 4px 5px 5px; }
/* ---------- Landscapes page -------------- */
table.landscapes ul { list-style-type: none; list-style-image: none; margin-left: -40px; margin-top: 0; }
table.landscapes li { line-height: 1.3; padding: 2px 0px 7px 0px; font-size: 0.9em; color: #979797;}
table.landscapes li a { color: #333; }
table.landscapes .head { font-weight: bold; font-size: 0.9em; }
table.landscapes td { padding-top: 10px; border-bottom: 1px solid #E6E3D8; }
table.landscapes th { background-color: #f8f6f0; border-bottom: 1px solid #e6e3d8; font-weight: bold; font-size: 0.9em; text-align: left; }
/*
table.landscapes li { line-height: 1.3; padding-bottom: 5px; font-size: 0.9em; }
table.landscapes li a { color: #333; }
table.landscapes .head { font-weight: bold; font-size: 0.9em; } */
/* -----------Landscapes Articles ---------- *****
/* ***** <<<< Instructions for article photos >>>> *****
1. Use a div w/ class either figureR or figureL.
2. If image floats to left or right, add width style to the figureR or figureL div tag. Make the width the same width as the photo! It'll work... (NOTE: div.figure width is already defined at 635px)
3. Add the image inside the div. Use alt text.
4. Inside the div beneath the photo, put the credit text inside tags.
5. Inside the div beneath the caption, put the credit text inside tags.
NOTE: The widest a full-width photo should be is 635px.*/
div.imgHeader {
width: 635px; }
/* holds a hidden text link */
div.imgHeader h1 { text-indent: -2000em; text-decoration: none; z-index: 1000; /* IE fix */ display: block; padding: 0; margin: 0; }
p#LSissue { padding: 0; margin: 0; text-align: right; }
.subtitle { width: 80%; font-size: 1.1em; font-style: italic; margin: -15px 0px 0px 0px; padding: 0; }
div.sidebar { float: none; margin: 15px 0px 10px 0px; padding: 5px 12px 5px 12px; width: 611px; background-color: #f8f6f0; overflow: auto;}
.intro2 { line-height: 2; } /* intro para for landscapes articles with wider line spacing */
div.figure, div.figureR, div.figureL, div.sidebar { border: 1px solid #dfdecc; }
div.figure, div.figureR, div.figureL { background-color: #fff; }
div.figure { float: none; margin: 10px 0px 10px 0px; padding: 12px; width: 611px; }/* image is full-size (horiz) */
div.figureSidebar { float: none; margin: 10px 0px 10px 0px; padding: 12px; width: 591px; }/* image is full-size (horiz) for use in inset stories */
div.figureR { /* floats image to the right */
float: right;
margin: 10px 0px 10px 10px;
padding: 12px;
}
div.figureL { /* floats image to the left */
float: left;
margin: 10px 10px 10px 0px;
padding: 12px;
}
div.figureR p.credit, div.figureL p.credit, div.figure p.credit, div.figureSidebar p.credit {
text-align: right;
text-indent: 0;
padding: 0;
margin: 0;
font-style: italic;
font-size: 10px;
line-height: 1.5;
}
div.figureR p.caption, div.figureL p.caption, div.figure p.caption, div.figureSidebar p.caption {
text-align: left;
text-indent: 0;
padding: 5px 0px 0px 0px;
margin: 0;
font-style: italic;
font-size: 11px;
line-height: 1.5;
}
/* Article Pullquotes */
div.pullQuote, div.pullQuoteL, div.pullQuoteR {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 18px; }
div.pullQuote { /* pullquote is full-width */
margin: 10px;
padding: 0;
/* color: #c4c4ac; */
color: #b0b092;
line-height: 1.5;
}
div.pullQuoteL { /* floats pullquote to the left */
float: left;
margin: 10px 10px 10px 0px;
padding: 10px;
width: 40%;
/* color: #c4c4ac; */
color: #b0b092;
line-height: 1.5;
}
div.pullQuoteR { /* floats pullquote to the right */
float: right;
margin: 10px 0px 10px 10px;
padding: 10px;
width: 40%;
/* color: #c4c4ac; */
color: #b0b092;
line-height: 1.5;
}
div.pullQuoteSig { font-size: 16px; text-align: right; }
.photoCaption {
font-style: italic;
font-size: 11px;
}
.LSimgFloattRight {
float: right;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
.LSimgFloatLeft {
float: left;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
table#jobs td { padding-right: 5px; } /* used on tenth-district-jobs page */
div.job { width: 100%; overflow: hidden; font-weight: bold; padding-bottom: 5px; }
div.job .leftCol { width: 100px; float: left; }
div.job .rightCol { width: 500px; float: left; }
div#jobContact { margin-top: 20px; }
/* --------- FOOTER -------- */
#footer { height: 50px; padding: 20px 1em 15px 10px; background-color: #000; color: #b27350; font-size: 0.85em;}
#footer a { text-decoration: none; color: #b27350; }
#footer a:hover { text-decoration: underline; }
/* this styles the text in the footer, which is actually an unordered list */
#footer ul { margin-left: 0px; padding-left: 0px; display: inline; font-size: 1em; list-style-type: none; text-align: left; }
#footer ul li { margin-left: 0px; padding-left: 16px; list-style-type: none; display: inline; }
/* this styles the last in the footer -- the copyright text -- made to look like it's right-aligned. */
#footer ul li.rightAlign { margin-left: 150px; display: inline; }
/* -------- Site Map ----------- */
td.sitemap { padding-top: 0; padding-left: 10px; }
td.sitemap ul { margin-top: 0; margin-left: -20px; margin-bottom: 5px; line-height: 1.5; list-style-type: none; list-style-image: none; }
td.sitemap ul ul { margin-left: -20px; }
td.sitemap p /* main sitemap section headers */ { margin-top: 0px; margin-bottom: 10px; font-size: 1.3em; font-weight: normal; }
td.sitemap .siteMapCategory /* sitemap subcategories */{ margin-top: 5px; font-size: 1.1em; color: #375788; font-weight: normal;}
td.sitemap a { /*color: #666666; */ color: #333; }
table.interactive tr:hover { background-color: #e6e3d8; }
.borderLeft { border-left: 1px solid #E6E3D8; }
/* --------- MICRO FORMATTING ----------- */
a.external { /* little external page icon to the right */ background: url(images/external.gif) no-repeat scroll transparent 100% 85%; padding-right: 15px; margin-right: 3px; }
.emph { font-style: italic; }
.emph2 {font-style: italic; font-weight: bold; }
.intro { /* use for first paragraphs where you don't want much spacing at the top of the para beneath the header */ margin-top: .5em; margin-bottom: 1em}
.orangeLine { /* puts an orange line across the top of an element */ border-top: 3px solid #ee881b; margin-top: -5px; padding: 0; }
.compr { /* line spacing is set tighter or "compressed" - use for lists of links on home page, headlines in columns etc */ line-height: 1.3; }
.compr p { margin-top: 10px; margin-bottom: 10px; }
.imgFloatRight { /* floats images to the right. Forces text to flow around it to the left. */ float: right; clear: left; padding-left: 15px; padding-bottom: 15px; padding-top: 15px; }
.imgFloatLeft { /* floats images to the left. Forces text to flow around it to the right. */ float: left; clear: right; padding-right: 15px; padding-bottom: 15px; padding-top: 15px; }
.indent5 { /* indent an element 5 px */ margin-left: 5px !important; }
.indent10 { /* indent an element 5 px */ margin-left: 10px !important; }
.clear { clear: both; }
a.plainLink { /* use where you don't want colored links */ color: #333; }
a.plainLink:hover { color: #f90; }
.padLeft10 { padding-left: 10px; }
.padLeft15 { padding-left: 15px; }
.padTop10 {padding-top: 10px; }
.padTop15 {padding-top: 15px; }
.grayedOut { color: #979797 !important;}
.largerText { font-size: 1.3em; }
.noBtm { margin-bottom: 0px; }
.smaller { font-size: 16px; }
.plain { font-style: normal; }
hr { width: 50%; text-align: left; border-top: 1px solid #dfdecc; margin: 20px auto 20px 0px; }
.pageBreak { page-break-before: always !important; background-color: blue;}
/* ---------- LINKS -------------- */
a.more { /* creates blue link and small blue arrow to the right */ background: url(images/morearrow.gif) no-repeat scroll transparent 100% 60%; padding-right: 9px; /* white-space: nowrap; */}
a.back { /* small blue arrow to the left; used on landscapes article pages */
position: absolute; left: 279px; top: 300px; padding-left: 9px; /* white-space: nowrap; */
background: url(images/back-arrow.gif) no-repeat transparent 0% 60%;
}
/* little external page icon to the right */
/*a.external, ul li a.external { background: url(images/external.gif) no-repeat scroll transparent 100% 85%; padding-right: 15px; }
*/
a.external, ul li a.external { /* little external page icon to the right */ background: url(images/external.gif) no-repeat scroll transparent 99% 83%; padding-right: 14px; margin-right: 1px; }
a.special { /* circle/arrow link to the left of link */
background: url(images/arrow-r.gif) 0% 99% no-repeat scroll transparent; padding-left: 17px; /* white-space: nowrap; */}
/*background-image: url(images/arrow-r.gif) !important;
background-repeat: no-repeat !important;
background-position: left !important; padding-left: 17px !important; white-space: nowrap !important; }*/