/* zero out all browser styles props to Eric Meyer ...but I did tweak a few things :) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*@import url("/includes/css/tables.css");*/ /*@import url("/includes/css/width.css");*/ table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background:transparent; } :focus { outline:0; } /* remember to explicitly define focus styles if you want a click trail */ body { line-height:1; color:black; background:transparent; } ol, ul { list-style:none; } table { border-collapse:collapse; border-spacing:0; } /* any tables still need 'cellspacing="0"' in the markup */ caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } /* styles for general layout */ .hidden { display:block; position:absolute; height:0; width:0; overflow:hidden; } .clear { clear:both; } .floatLeft { float:left; margin:12px 20px 20px 0;} .floatRight { float:right; margin:12px 0 20px 20px;} hr { display:none; } /* hr { width:100%; height:1px; color:#999; background-color:#999; border:none; } */ /* yes. you *can* style the tag */ html { background:#b7cbb3 url(/museum/assets/images/topfadebg.jpg) repeat-x; } body { background:transparent url(/museum/assets/images/pagebg0.gif) 50% 0 repeat-y; min-width:886px;} /* body variants*/ body.nae0 { background-image:url(/museum/assets/images/pagebg0.gif); } body.nae1 { background-image:url(/museum/assets/images/pagebg1.gif); } body.nae2 { background-image:url(/museum/assets/images/pagebg2.gif); } body.nae3 { background-image:url(/museum/assets/images/pagebg3.gif); } body.nae4 { background-image:url(/museum/assets/images/pagebg4.gif); } body.nae5 { background-image:url(/museum/assets/images/pagebg5.gif); } /* never used? */ /* header */ #header { clear:both; height:50px; border-bottom:2px solid #eedc93; background:transparent url(/museum/assets/images/topfadebg.jpg) repeat-x; } /* has same bg image as to cover body bg at top */ /* header variants*/ body.nae1 #header { border-bottom-color:#be522c; } body.nae2 #header { border-bottom-color:#7e6340; } body.nae3 #header { border-bottom-color:#455d78; } body.nae4 #header { border-bottom-color:#646c45; } body.nae5 #header { border-bottom-color:#72959c; } /* never used? */ /*logo*/ #header h1 { position:relative; width:882px; margin:0 auto; background:#b7cbb3 url(/museum/assets/images/topfadebg.jpg) repeat-x; } #header h1 a { position:absolute; display:block; overflow:hidden; left:16px; top:18px; height:0; width:126px; padding-top:125px; background:#fff url(/museum/assets/images/common-sprites.gif) -1018px -120px no-repeat; border:2px solid #1c1c17; } #header h1 a:hover { background-color:#fff; border:5px double #1c1c17; left:13px; top:15px; } /* section indicator */ #header h1 span { position:absolute; display:block; overflow:hidden; left:0; top:42px; width:38px; height:0; padding-top:8px; background:transparent url(/museum/assets/images/common-sprites.gif) -1000px -3000px no-repeat; } /* section indicator variants*/ body.nae1 #header h1 span { left:216px; background-position:-1163px -200px; } body.nae2 #header h1 span { left:359px; background-position:-1201px -200px; } body.nae3 #header h1 span { left:502px; background-position:-1239px -200px; } body.nae4 #header h1 span { left:645px; background-position:-1277px -200px; } body.nae5 #header h1 span { left:788px; background-position:-1315px -200px; } /* never used? */ /* main nav */ #header ul { width:719px; height:50px; padding-left:163px; margin:auto; background:transparent url(/museum/assets/images/common-sprites.gif) -1000px -100px no-repeat; } #header ul li { display:inline; } #header ul li a { display:block; float:left; overflow:hidden; width:143px; height:0; padding-top:50px; background:transparent url(/museum/assets/images/common-sprites.gif) -10px 0 no-repeat; } /* main nav :hovers and variants */ #header ul li a.n1:hover, body.nae1 #header ul li a.n1 { background-position:-1163px -150px; } #header ul li a.n2:hover, body.nae2 #header ul li a.n2 { background-position:-1306px -150px; } #header ul li a.n3:hover, body.nae3 #header ul li a.n3 { background-position:-1449px -150px; } #header ul li a.n4:hover, body.nae4 #header ul li a.n4 { background-position:-1592px -150px; } #header ul li a.n5:hover, body.nae5 #header ul li a.n5 { background-position:-1735px -150px; } /* never used? */ /* outer
between header and footer: bg = doc bg image */ #docbg { background:transparent url(/museum/assets/images/docbg0.jpg) 50% 0 no-repeat; } /* docbg variants */ body.nae0 #docbg { background-image:url(/museum/assets/images/docbg0.jpg); } body.nae1 #docbg { background-image:url(/museum/assets/images/docbg1.jpg); } body.nae2 #docbg { background-image:url(/museum/assets/images/docbg2.jpg); } body.nae3 #docbg { background-image:url(/museum/assets/images/docbg3.jpg); } body.nae4 #docbg { background-image:url(/museum/assets/images/docbg4.jpg); } body.nae5 #docbg { background-image:url(/museum/assets/images/docbg5.jpg); } /* never used? */ /* defines page width */ #middle { width:880px; margin:0 auto; padding:0 4px; } /* left nav bar */ #subnav { float:left; width:124px; padding:170px 14px 80px 20px; background:transparent url(/museum/assets/images/common-sprites.gif) -1000px -389px no-repeat;} /* subnav varaints for topic labels */ body.nae1 #subnav { background-position:-1000px -389px; } body.nae2 #subnav { background-position:-1200px -389px; } body.nae3 #subnav { background-position:-1400px -389px; } body.nae4 #subnav { background-position:-1600px -389px; } #subnav h3 { padding-bottom:8px; color:#fff; font:normal 12px/12px times, "times new roman"; text-transform:uppercase;} #subnav h3 a { color:#fff; text-decoration:none; } #subnav h3 a:hover { color:#f7f0cd; text-decoration:underline; } #subnav ul { } #subnav li { display:block; font:11px/14px verdana, sans-serif; } #subnav li a { display:block; color:#f6da53; padding-bottom:8px; } #subnav li a:hover { color:#f7f0cd; } #subnav li.youAreHere, #subnav ul li ul li.youAreHere { display:block; position:relative; left:-8px; padding-left:8px; padding-bottom:4px; background:transparent url(/museum/assets/images/common-sprites.gif) -989px -571px no-repeat; line-height:12px; color:#fff; text-decoration:none; } #subnav li.youAreHere span { display:block; margin-bottom:4px; } #subnav ul li ul li.youAreHere span { margin-bottom:0; } #subnav li ul { /*position:relative; */ padding:0 0 0 0; top:-3px; } #subnav li ul li { display: block; padding:0 0 0 10px; font-size:11px; line-height:13px; background:transparent url(/museum/assets/images/common-sprites.gif) -977px -613px no-repeat;} #subnav li ul li a { padding-bottom:5px; } #subnav ul li ul li.youAreHere { margin:0 0 0 10px; } .parentLink { display:block; padding:7px 8px 8px 0; margin-bottom:20px; color:#fff; font:normal 10px/12px Verdana, Arial; } .parentLink:hover { color:#f7f0cd; } p#bgnotes { margin-top:35px; padding-top:10px; border-top:3px double #444; font:10px verdana, sans-serif; } /* bgnotes variants to change top border hue */ body.nae1 p#bgnotes { border-top-color:#7e361c } body.nae2 p#bgnotes { border-top-color:#544129 } body.nae3 p#bgnotes { border-top-color:#2e3d4d } body.nae4 p#bgnotes { border-top-color:#42472c } p#bgnotes, p#bgnotes a { display:block; color:#edeada; } p#bgnotes a:hover { color:#f6da53; } p#bgnotes strong { display:block; font-size:9px; font-weight:bold; } /* main content column */ /* has min-height to assure border does not end abruptly on pages where content is shorter than subnav */ #content { float:left; width:689px; min-height:800px; margin:13px 0 0 16px; padding:0 0 30px; border:1px solid #e3e3e3; border-bottom:none; } /* content layout grid (rows and columns) */ .row { clear:both; overflow:auto; width:649px; margin:12px 0 0; padding:1px 20px 12px; background:transparent url(/museum/assets/images/common-sprites.gif) -2px 0 repeat-y; } .col1, .col2, .col3 { float:left; } .row50-50 { background-position:340px 0; } .row50-50 .col1 { width:300px; margin-right:22px; } .row50-50 .col2 { width:300px; padding-left:22px; } .row66-33 { background-position:460px 0; } .row66-33 .col1 { width:420px; margin-right:22px; } .row66-33 .col2 { width:180px; padding-left:20px; } .row33-66 { background-position:240px 0; } .row33-66 .col1 { width:200px; margin-right:22px; } .row33-66 .col2 { width:400px; padding-left:20px; } .row33-33-33 { background:none; } .row33-33-33 .col1, .row33-33-33 .col2 { width:190px; margin-right:30px; } .row33-33-33 .col3 { width:190px; } /* apply .emptygutter to div.row to remove the 2px vert rule in gutter */ div.emptygutter { background:none; } div.emptygutter .col2 { padding-left:10px; } /* remove space between adjacent .row divs (IE6 doesn't obey this selector) */ .row + .row { margin:0; } /* light green full-width content column usually at top of content area */ .rowhighlight { padding:14px 20px 20px; background-color:#f7faf2; } .rowhighlight .row { margin-left:-20px; padding-right:0; margin-bottom:0; } /* adjust left for nested padding */ .rowhighlight .teaser img { border-color:#dcdfd7; } /* teaser images have different border color inside */ div.hr { width:100%; height:2px; background:transparent url(/museum/assets/images/common-sprites.gif) 50% 0 no-repeat;} /* box for large images with captions */ .captionBox { margin-top:12px; background-color:#edeada; padding:11px; } .captionBox h3 { margin:0; font:bold 11px/14px verdana, sans-serif; } .captionBox dl, .captionBox dt { margin:0; } .captionBox p { font:normal 11px/15px verdana, sans-serif; margin:0; } p.rightcaption { text-align:right; font-style:italic; } /* optional first paragraph under page heading */ p.intro { font-style:italic; margin-top:5px; } /* featured item text with thumbnail (thumb image = 72x72) */ .teaser { position:relative; min-height:85px; margin-top:16px; padding-left:92px; clear:both;} .teaser img { position:absolute; left:0; top:3px; border:5px solid #edeada; } .teaser p { margin-top:3px; } .teaser h2 { margin-top:3px; } /* apply .bigthumb to div.teaser to accommodate the larger thumb size (thumb image = 135x135) */ div.bigthumb { margin-top:16px; padding-left:155px; min-height:148px; } /* beige box containing document resources on lesson plan pages */ .documents { margin-top:35px; padding:8px; background:#f9f6db; border:2px solid #e0ddc5; } .documents .inner { display:block; padding:10px 20px 20px; border:1px solid #e0ddc5;} .documents li { margin-bottom:8px; } .documents .smaller { display:block; padding-left:8px; } /* special styles for type in div.sidebar */ .sidebar p, .sidebar ul, .sidebar ol { font:11px/15px verdana, sans-serif; } .sidebar h3 { font:bold 12px/15px verdana, sans-serif; } .sidebar h3 + p { margin-top:0; } /* special list style for a list of hyperlinks (usually within .sidebar) */ #content ul.links { padding-left:0; list-style:none; } ul.links li { font:normal 12px/15px verdana, sans-serif; margin-bottom:13px; } ul.links li a { font-weight:bold; } .sidebar ul.links a { text-decoration:none; } /* footer */ #footer { clear:both; border:2px solid #000; border-width:2px 0; padding:1px 0; background-color:#262626; } #footer ul { background-color:#000; padding:4px 0; text-align:center; } #footer li { display:inline; white-space:nowrap; } #footer a { font:normal 11px verdana, sans-serif; margin:0px 20px; color:#b3b3b3; text-decoration:none; border-bottom:1px solid #333; } #footer a:hover { color:#dedede; border-bottom-color:#dedede; } /* typographic styles */ h1 { font:26px/30px "Trebuchet MS", verdana, sans-serif; letter-spacing:1px; margin:0; } h2 { font:bold 16px/18px "Trebuchet MS", verdana, sans-serif; } h3 { font:bold 13px/15px verdana, sans-serif; } h4 { font:bold 11px/15px verdana, sans-serif; text-transform:uppercase; } h1, h2, h3, h4, p { margin-top:12px; } p, ul, ol, dl { font:12px/18px verdana, sans-serif; } p + h1, ul + h1, ol + h1, div + h1, p + h2, ul + h2, o3 + h2, div + h2, p + h3, ul + h3, ol + h3, div + h3, p + h4, ul + h4, ol + h4, div + h4, .captionBox + dl { margin-top:35px; } /* (IE6 doesn't obey these peer selectors) */ a { color:#4b6daa; } a:hover { color:#8db2f3; } #content ul, #content ol { padding-left:2.5em; margin-top:8px; } #content ul { list-style-type:disc; } #content ol { list-style-type:decimal; } dt { font-weight:bold; margin-top:20px; } dd { } em { font-style:italic; } strong { font-weight:bold; } .smaller { font:11px/15px verdana, sans-serif; } /* adding in from other archives.gov styles */ /* WORD icon on right side */ .wordImage { padding:5px 20px 0 0; background-image:url(/global-images/word-icon.gif); background-repeat:no-repeat; background-position:100% 100%; } /* PDF icon on right side */ .pdfImage { padding:5px 22px 0 0; background-image:url(/global-images/tiny-pdf-file-icon.gif); background-repeat:no-repeat; background-position:100% 100%; } /* New icon on right side */ .newRight { padding:8px 24px 0 0; background-image:url(/global-images/icons/24x24/new.gif); background-repeat:no-repeat; background-position:100% 100%; } /*adding class=highlighted */ /* Box with a yellow BG */ .highlighted { background-image:url(/global-images/layout/boxed-highlighted-bg.gif); background-repeat:repeat-x; background-color:#FFFFEC; border:1px solid #e8e7c5; padding:.5em; } /* class = boxed */ .boxed { margin:.5em; margin-bottom:18px; border:1px solid #E4E5E6; border-bottom-color:#C2C3C4; border-top-color:#C2C3C4; border-top-width:3px; background-color:#F9F9F9; background-image:url(/global-images/layout/boxed-1-bg.gif); background-repeat:repeat-x; } .boxed p { margin-top:0; margin-bottom:0.5em; } #content .boxed { margin:0 0 1em 0; padding:0.5em; } p.boxed { padding:0em; margin-bottom:18px; border:1px solid #E4E5E6; border-bottom-color:#C2C3C4; border-top-color:#C2C3C4; background-color:#F4F6F7; background-image:url(/global-images/layout/boxed-1-bg.gif); background-repeat:repeat-x; padding:.5em; } /* adds a light gray outline around something */ .outline { padding:0.5em; border:1px solid #CCCCCC; display:table; /* style for browsers not IE */ } *.outline { display:inline-block; /* equivalent style for IE */ } .outline h2, .outline h3 { margin-top:0; } /*p thumb */ /* thumbnail images with text */ /* 45px x 45px seems to be a good dimension for the thumbnail images...but whatever */ p.thumb { margin-bottom:1em; } p.thumb img { float:left; margin:.3em .5em 0 0; border:1px solid #1D4C7D; } p.thumb img.noBorder { border:none; } .indent { margin-left:2em; } /* classes to add space around an object */ .spaceAbove { margin-top:1.3em; } .spaceRight { margin-right:1.3em; } .spaceBelow { margin-bottom:1.3em; } .spaceLeft { margin-left:1.3em; } /* link with arrow to left pointing left */ .moreLink, .nextLink { font-weight:bold; padding-right:14px; background-image:url(/global-images/layout/arrow-blue.gif); background-repeat:no-repeat; background-position:100% 100%; } /* Basic styles for data tables */ table.fancy { border-collapse:collapse; border-spacing:0; border:1px solid #555; border-width:1px 0 0 1px; margin:1em 0; } table.fancy th, table.fancy td { border:1px solid #555; border-width:0 1px 1px 0; padding:2px 6px; } table.fancy th { background-color:#eee; font-weight:bold; } table.fancy th p, table.fancy td p { line-height:normal; margin:0px; padding:0px; } /* now attempt to remove all the CSS styling for tables of class 'layout' */ /* this works in Firefox, but not so well in IE 6 (surprise surprise) */ table.layout { border-collapse:inherit; border-spacing:inherit; border:none; border-width:0px; } table.layout th, table.layout td { background:none; font-weight:normal; border:none; border-width:auto; padding:0; } table.layout th p, table.layout td p { line-height:normal; margin:auto; padding:auto; } table.summaryrowtable { border-collapse:inherit; border-spacing:inherit; border:none; border-width:0px; } table.summaryrowtable th { background-color:#eee; font-weight:bold; } table.summaryrowtable th, table.summaryrowtable td { border:none; border-width:auto; padding:2px 6px; } table.summaryrowtable th p, table.summaryrowtable td p { font-weight:normal; line-height:normal; margin:auto; padding:auto; } .summaryrow { font-size:.85em; background:#ccc; } /*addthislink */ .addthisLink2 { padding-left:25px; background-image:url(/global-images/layout/page-options-add-this2.gif); background-repeat:no-repeat; background-position:4px 0; } /*BUTTON LINK STYLES ADDED */ #content .buttonLink { display:block; min-height:4em; margin:1.5em 0 1.5em 0; padding:7px 35% 15px 7px; border:1px solid #e7e6d6; background-position:bottom right; clear:both; font-size:16px; font-weight:normal; color:#304498; text-decoration:none; } #content .buttonLink strong { font-weight: normal; } .buttonLink { display:block; min-height:4em; margin:1.5em 0 1.5em 0; padding:7px 35% 15px 7px; border:1px solid #e7e6d6; background-image:url(/global-images/buttons/button-bg-blank.gif); background-repeat:no-repeat; background-position:100% 100%; clear:both; font-size:11px; font-weight:bold; line-height: 1.2em; text-decoration:none; } .buttonLink:hover { border:1px solid #d0cfb9; } titleBox .buttonLink { margin-left:7px; margin-right:7px; } body.main #col-b .buttonLink { margin-left:7px; } #col-a .buttonLink { padding-right:30%; } /* additions to .buttonLink class please keep in alphabetical order */ /* Democracy Starts Here video button */ .dsh-video { background-image:url(/global-images/buttons/button-bg-dsh-video.gif); color:#5d4929; /* green2 */ padding:7px 45% 15px 7px; padding-bottom:3em; } #col-a .dsh-video { padding-bottom:7.5em; } /*added 2013 to add display image function */ /* classes for "display_image()" function elements ul.displayImageButtons, .titleBox ul.displayImageButtons { margin:0 0 .5em 0 !important; padding:0; height:23px; border-top:2px solid #9f9f9f; list-style:none !important; } ul.displayImageButtons li, .titleBox ul.displayImageButtons li { margin:0 !important; padding:0 !important; display:inline !important; list-style:none !important; } ul.displayImageButtons li a, .titleBox ul.displayImageButtons li a { display:block; float:right; height:0px; padding-top:23px; background-repeat:no-repeat; background-color:#9f9f9f; overflow:hidden; background-position:0 0; } ul.displayImageButtons li a:hover { background-color:#000; } ul.displayImageButtons li a.largerLink { width:44px; background-image:url(/global-images/display-image-larger-view.gif) !important; } ul.displayImageButtons li a.hiResLink { width:52px; background-image:url(/global-images/display-image-hi-res.gif) !important; } ul.displayImageButtons li a.pdfLink { width:58px; background-image:url(/global-images/display-image-pdf.gif) !important; } ul.displayImageButtons li.displayImageRightCurve, .titleBox .captionBox ul.displayImageButtons li.displayImageRightCurve { display:inline; margin:0; padding:0; float:right; height:23px; width:5px; background-image:url(/global-images/display-image-right-curve.gif) !important; background-repeat:no-repeat !important; background-position:0 0 !important; } ul.displayImageButtons li.displayImageLeftCurve, .titleBox .captionBox ul.displayImageButtons li.displayImageLeftCurve { display:inline; margin:0; padding:0; float:right; height:23px; width:5px; background-image:url(/global-images/display-image-left-curve.gif) !important; background-repeat:no-repeat !important; background-position:0 0 !important; } ul.displayImageButtons li.displayImageButtonDivider, .titleBox ul.displayImageButtons li.displayImageButtonDivider { display:inline; margin:0; padding:0; float:right; height:23px; width:10px; background-image:url(/global-images/display-image-button-divider.gif) !important; background-repeat:no-repeat !important; background-position:0 0 !important; } */ /* testing width60 */ .width60 { width:60% !important; }