/*css reset of browser defaults*/
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, 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; }
:focus { outline: 0; }
body { line-height: 1; color: #fff; background: #000; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/*end reset*/
/*begin document css*/
/*general css declarations*/
body {
background-image: url("images/at-fifty-bg.jpg");
background-repeat: no-repeat;
font-size: 62.5%;
font-family: verdana, arial, helvetica, sans-serif;
background-position: center center;
background-attachment: fixed;
overflow: scroll;
}
em {
font-style: italic;
}
.goldEm {
font-style: normal;
color: #e7d9a5;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
font-weight: bold;
margin: .8em 0;
clear: both;
font-family: "trebuchet ms", "ludida sans", "lucida sans unicode", geneva, helvetica, sans-serif;
}
h1 {
font-size: 2.1em;
}
h2 {
font-size: 2em;
text-align: center;
width: 631px;
border-bottom: 2px solid #fff;
margin: 20px auto 45px auto;
padding-bottom: .3em;
padding-top: .3em;
border-top: 2px solid #fff;
}
h2 span {
font-size: .8em;
display: block;
color: #e7d9a5;
}
h3 {
font-size: 1.9em;
}
h4 {
font-size: 1.8em;
}
h5 {
font-size: 1.6em;
}
h6 {
font-size: 1.5em;
}
p {
font-size: 1.3em;
line-height: 1.5em;
margin-bottom: .7em;
}
acronym {
border-bottom: 1px dotted #555;
}
a acronym {
border: 0;
}
sup {
font-size: .8em;
vertical-align: super;
}
/*page-specific declarations*/
#header {
width: 998px;
height: 150px;
margin: 0 auto;
}
#header h1 a {
display: block;
text-indent: -9999px;
width: 806px;
height: 150px;
margin: 0 auto;
background: url("images/header-title.png") no-repeat top left transparent;
}
/*Nav Menu*/
#navMenu {
width: 993px;
margin: 15px auto 0 auto;
}
#navMenu:after, .photoLeft:after, .photoRight:after, #articlePages ul:after {
content: ".";
font-size: 0;
height: 0;
display: block;
clear: both;
visibility: hidden;
}
#navMenu ul {
clear: both;
}
#navMenu li {
display: inline;
float: left;
width: 282px;
padding-left: 45px;
}
#navMenu a {
display: block;
height: 50px;
width: 199px;
text-indent: -9999px;
}
#navMenu a.HistoryArticle {
background: url("images/history-article.png") no-repeat left top;
}
#navMenu a.HistoryArticle:focus {
background-position: left -80px;
width: 331px;
padding: 0;
}
#navMenu a.TimeLine {
background: url("images/time-line.png") no-repeat left top;
}
#navMenu a.TimeLine:focus {
background-position: left -80px;
width: 331px;
padding: 0;
}
#navMenu a.HistoryResources {
background: url("images/history-resources.png") no-repeat left top;
}
#navMenu a.HistoryResources:focus {
background-position: left -80px;
width: 331px;
padding: 0;
}
/*main section containers*/
#pageWrapTimeLine, #pageWrapHistoryArticle, #pageWrapHistoryResources, #pageWrapIntro, #pageWrapMacVideo {
clear: both;
width: 998px;
margin: 0 auto;
position: relative;
}
/*------Main Article CSS--------*/
.articleTop {
height: 33px;
width: 900px;
margin: 0 auto;
background: url("images/content-top.png") no-repeat left top;
}
#articleContent, #historyResourcesContent, #introContent, #videoContent {
color: #000;
width: 805px;
margin: 0 auto;
padding: 0 55px .7em 40px;
background: url("images/content-slice.png") repeat-y left top;
position: relative;
}
#introContent p , #videoContent p{
line-height: 1.6em;
}
.shrink {
height: 0px;
overflow: hidden;
position: absolute;
left: -9999px;
}
#articleContent h3, #historyResourcesContent h3, #introContent h3, #videoContent h3 {
color: #666;
margin: 0;
padding: 1em 0;
}
#historyResourcesContent p {
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0 2.5em;
}
#historyResourcesContent p.marginTop {
margin-top: 1em;
}
.fileType {
font-size: .8em;
color: #666;
}
#articleContent a:hover, .timeLineEntry a:hover, #introContent a:hover, #historyResourcesContent a:hover, #articleContent a:focus, .timeLineEntry a:focus, #introContent a:focus, #historyResourcesContent a:focus, #videoContent a:hover, #videoContent a:focus {
text-decoration: none;
}
.photoLeft, .photoRight {
width: 220px;
padding: 20px;
margin-top: -.7em;
}
.photoLeft {
display: inline;
float: left;
clear: left;
padding-left: 0px;
}
.photoRight {
display: inline;
float: right;
clear: right;
padding-right: 0px;
}
.photoLeft img, .photoRight img {
display: block;
padding: 10px;
margin: 0 auto;
width: 200px;
background: #ccc;
border: 1px solid #666;
}
.photoLeft span, .photoRight span {
display: block;
text-align: center;
font-style: italic;
font-size: 1.1em;
line-height: 1.2em;
margin-top: 1em;
color: #666;
}
.photoLeft span em, .photoRight span em {
font-style: normal;
}
blockquote {
padding-left: 75px;
background: url("images/blockquote.gif") no-repeat left -24px;
font-weight: bold;
}
.articleBottom {
width: 900px;
height: 48px;
background: url("images/content-bottom.png") no-repeat left top;
margin: 0 auto;
position: relative;
}
#articlePages ul {
position: absolute;
right: 0;
clear: both;
width: 111px;
}
#articlePages li {
display: inline;
float: left;
width: 37px;
}
#articlePages li a {
display: block;
background: url("images/article-links.png") no-repeat;
width: 37px;
height: 34px;
text-indent: -9999px;
cursor: pointer;
}
#articlePages a.One {
background-position: 0px 0px;
}
#articlePages a.One:hover {
background-position: 0px -34px;
}
#articlePages a.Two {
background-position: -37px 0px;
}
#articlePages a.Two:hover {
background-position: -37px -34px;
}
#articlePages a.Three {
background-position: -74px 0px;
}
#articlePages a.Three:hover {
background-position: -74px -34px;
}
#articlePages {
width: 111px;
position: absolute;
right: 35px;
top: -20px;
display: none;
}
/*Time Line CSS-----------------*/
#timeLineContainer {
clear: both;
width: 900px;
margin: 0 auto;
position: relative;
}
#timeLineContainer ul {
height: 136px;
position: relative;
background: url("images/timeline_base.png") no-repeat left bottom;
}
#timeLineContainer ul li {
display: inline;
float: left;
position: absolute;
height: 80px;
}
#timeLineContainer li a {
display: block;
width: 17px;
margin-top: 40px;
height: 40px;
text-indent: -9999px;
background: url("images/timeline_numbers.png") no-repeat left top;
}
#timeLineContainer li a:hover, #timeLineContainer li a:focus {
background-image: url("images/timeline_numbers_alt.png");
}
#timeLineContainer li.y58 {
left: 18px;
}
#timeLineContainer li.y58 a {
background-position: -18px 0;
}
#timeLineContainer li.y59 {
left: 35px;
}
#timeLineContainer li.y59 a {
background-position: -35px 0;
}
#timeLineContainer li.y60 {
left: 52px;
}
#timeLineContainer li.y60 a {
background-position: -52px 0;
}
#timeLineContainer li.y61 {
left: 69px;
}
#timeLineContainer li.y61 a {
background-position: -69px 0;
}
#timeLineContainer li.y62 {
left: 86px;
}
#timeLineContainer li.y62 a {
background-position: -86px 0;
}
#timeLineContainer li.y63 {
left: 103px;
}
#timeLineContainer li.y63 a {
background-position: -103px 0;
}
#timeLineContainer li.y64 {
left: 120px;
}
#timeLineContainer li.y64 a {
background-position: -120px 0;
}
#timeLineContainer li.y65 {
left: 137px;
}
#timeLineContainer li.y65 a {
background-position: -137px 0;
}
#timeLineContainer li.y66 {
left: 154px;
}
#timeLineContainer li.y66 a {
background-position: -154px 0;
}
#timeLineContainer li.y67 {
left: 171px;
}
#timeLineContainer li.y67 a {
background-position: -171px 0;
}
#timeLineContainer li.y68 {
left: 191px;
}
#timeLineContainer li.y68 a {
background-position: -191px 0;
}
#timeLineContainer li.y69 {
left: 208px;
}
#timeLineContainer li.y69 a {
background-position: -208px 0;
}
#timeLineContainer li.y70 {
left: 225px;
}
#timeLineContainer li.y70 a {
background-position: -225px 0;
}
#timeLineContainer li.y71 {
left: 242px;
}
#timeLineContainer li.y71 a {
background-position: -242px 0;
}
#timeLineContainer li.y72 {
left: 259px;
}
#timeLineContainer li.y72 a {
background-position: -259px 0;
}
#timeLineContainer li.y73 {
left: 276px;
}
#timeLineContainer li.y73 a {
background-position: -276px 0;
}
#timeLineContainer li.y74 {
left: 293px;
}
#timeLineContainer li.y74 a {
background-position: -293px 0;
}
#timeLineContainer li.y75 {
left: 310px;
}
#timeLineContainer li.y75 a {
background-position: -310px 0;
}
#timeLineContainer li.y76 {
left: 327px;
}
#timeLineContainer li.y76 a {
background-position: -327px 0;
}
#timeLineContainer li.y77 {
left: 344px;
}
#timeLineContainer li.y77 a {
background-position: -344px 0;
}
#timeLineContainer li.y78 {
left: 364px;
}
#timeLineContainer li.y78 a {
background-position: -364px 0;
}
#timeLineContainer li.y79 {
left: 381px;
}
#timeLineContainer li.y79 a {
background-position: -381px 0;
}
#timeLineContainer li.y80 {
left: 398px;
}
#timeLineContainer li.y80 a {
background-position: -398px 0;
}
#timeLineContainer li.y81 {
left: 415px;
}
#timeLineContainer li.y81 a {
background-position: -415px 0;
}
#timeLineContainer li.y82 {
left: 432px;
}
#timeLineContainer li.y82 a {
background-position: -432px 0;
}
#timeLineContainer li.y83 {
left: 449px;
}
#timeLineContainer li.y83 a {
background-position: -449px 0;
}
#timeLineContainer li.y84 {
left: 466px;
}
#timeLineContainer li.y84 a {
background-position: -466px 0;
}
#timeLineContainer li.y85 {
left: 483px;
}
#timeLineContainer li.y85 a {
background-position: -483px 0;
}
#timeLineContainer li.y86 {
left: 500px;
}
#timeLineContainer li.y86 a {
background-position: -500px 0;
}
#timeLineContainer li.y87 {
left: 517px;
}
#timeLineContainer li.y87 a {
background-position: -517px 0;
}
#timeLineContainer li.y88 {
left: 537px;
}
#timeLineContainer li.y88 a {
background-position: -537px 0;
}
#timeLineContainer li.y89 {
left: 554px;
}
#timeLineContainer li.y89 a {
background-position: -554px 0;
}
#timeLineContainer li.y90 {
left: 571px;
}
#timeLineContainer li.y90 a {
background-position: -571px 0;
}
#timeLineContainer li.y91 {
left: 588px;
}
#timeLineContainer li.y91 a {
background-position: -588px 0;
}
#timeLineContainer li.y92 {
left: 605px;
}
#timeLineContainer li.y92 a {
background-position: -605px 0;
}
#timeLineContainer li.y93 {
left: 622px;
}
#timeLineContainer li.y93 a {
background-position: -622px 0;
}
#timeLineContainer li.y94 {
left: 639px;
}
#timeLineContainer li.y94 a {
background-position: -639px 0;
}
#timeLineContainer li.y95 {
left: 656px;
}
#timeLineContainer li.y95 a {
background-position: -656px 0;
}
#timeLineContainer li.y96 {
left: 673px;
}
#timeLineContainer li.y96 a {
background-position: -673px 0;
}
#timeLineContainer li.y97 {
left: 690px;
}
#timeLineContainer li.y97 a {
background-position: -690px 0;
}
#timeLineContainer li.y98 {
left: 710px;
}
#timeLineContainer li.y98 a {
background-position: -710px 0;
}
#timeLineContainer li.y99 {
left: 727px;
}
#timeLineContainer li.y99 a {
background-position: -727px 0;
}
#timeLineContainer li.y00 {
left: 744px;
}
#timeLineContainer li.y00 a {
background-position: -744px 0;
}
#timeLineContainer li.y01 {
left: 761px;
}
#timeLineContainer li.y01 a {
background-position: -761px 0;
}
#timeLineContainer li.y02 {
left: 778px;
}
#timeLineContainer li.y02 a {
background-position: -778px 0;
}
#timeLineContainer li.y03 {
left: 795px;
}
#timeLineContainer li.y03 a {
background-position: -795px 0;
}
#timeLineContainer li.y04 {
left: 812px;
}
#timeLineContainer li.y04 a {
background-position: -812px 0;
}
#timeLineContainer li.y05 {
left: 829px;
}
#timeLineContainer li.y05 a {
background-position: -829px 0;
}
#timeLineContainer li.y06 {
left: 846px;
}
#timeLineContainer li.y06 a {
background-position: -846px 0;
}
#timeLineContainer li.y07 {
left: 863px;
}
#timeLineContainer li.y07 a {
background-position: -863px 0;
}
#timeLineContainer li.y08 {
left: 883px;
}
#timeLineContainer li.y08 a {
background-position: -883px 0;
}
/*TIMELINE CONTENT*/
#timeLineContent {
width: 681px;
margin: 0 auto;
padding: 33px 60px 33px 59px;
height: 477px;
background: url("images/timeline-content-frame.png") no-repeat left top;
overflow: hidden;
}
#timeLineContentWindow {
width: 681px;
height: 400px;
overflow: auto;
color: #000;
position: relative;
}
.timeLineEntry {
width: 634px;
margin: 0 32px 0 18px;
padding-top: 20px;
line-height: 1.5em;
font-size: 1.3em;
}
.timeLineEntryJS {
position: absolute;
left: -1000px;
}
.hasBG {
display: block;
width: 394px;
padding-right: 220px;
background-repeat: no-repeat;
background-position: 414px top;
min-height: 200px;
}
.timeLineEntry h3 {
color: #666;
border-bottom: 1px solid #666;
}
.timeLineEntry ul {
padding: 0;
}
.timeLineEntry li {
margin: 0 5px .5em 10px;
background: url("images/disc.gif") no-repeat left .5em;
padding-left: 20px;
}
.pic58 {
background-image: url("images/cfd.png");
}
.pic70 {
background-image: url("images/mac-norwood.jpg");
}
.pic60 {
background-image: url("images/rockets.jpg");
}
.pic84 {
background-image: url("images/cfv.png");
}
.pic94 {
background-image: url("images/captioning-key.png");
}
.pic98 {
background-image: url("images/cmp.png");
}
.pic06 {
background-image: url("images/dcmp_logo.png");
}
.pic08 {
background-image: url("images/equal-access-in-the-classroom.png");
}
/* */
/* */
/*Footer*/
#footer {
clear: both;
width: 900px;
margin: 1em auto 0 auto;
}
#footer a {
color: #fff;
}
#footer a:hover, #footer a:focus {
color: #e7d9a5;
text-decoration: none;
}
#footerCol1 {
display: inline;
float: left;
width: 450px;
}
#footer h3 {
border-bottom: 1px solid;
}
#footerCol1 ul, #footerCol1 h3 {
width: 400px;
margin-left: 20px;
margin-right: 30px;
}
#footer ul {
font-size: 1.2em;
line-height: 1.6em;
}
#footerCol2, #footerCol3 {
width: 225px;
display: inline;
float: left;
}
#footerCol2 h3, #footerCol2 ul, #footerCol3 h3, #footerCol3 ul {
width: 180px;
margin-left: 20px;
margin-right: 20px;
}
.moreSpace {
margin-bottom: .6em;
}
.license {
font-size: .9em;
line-height: 1.3em;
}
.licenseExplain {
display: block;
position: absolute;
left: -9999px;
}
.license img {
display: block;
border: 0;
width: 88px;
margin: 0 0 10px 0;
}
#video {
width: 680px;
margin: 0 auto 25px auto;
position: relative;
}
#javaScriptRequired, #flashPlayerRequired {
font-size: 1.2em;
line-height: 1.6em;
color: #ff0;
background: black;
border: 3px double #ff0;
padding: 20px;
display: block;
}
#javaScriptRequired a, #flashPlayerRequired a {
color: #fff;
}
#javaScriptRequired .fileType, #flashPlayerRequired .fileType {
color: #cf3;
}
#flashPlayerRequired {
display: none;
}
.noHeight {
height: 0px;
overflow: hidden;
}