@charset "utf-8"; /* CSS Document */ @import url("reset.css"); body {background: #bab8ad; font-family: Georgia, "Times New Roman", Times, serif; color: #222; } #container { position: relative; display: block; width: 100%; margin: 63px 0 61px 0; background:url(i/bg-site.jpg) center 148px repeat-y; } #siteTop { display:block; width: 100%; height: 63px; margin:0 auto; background: url(i/bg-site-top.jpg) center top no-repeat;} #siteBottom { display:block; width: 100%; height: 61px; margin:0 auto; background: url(i/bg-site-bottom.jpg) center top no-repeat;} #site {position: relative; width: 990px; margin: 0 auto; background: url(i/stripes.png) 320px 348px no-repeat; } #top {position: relative; display: block; width: 990px; height: 600px; } #sacred-heart { position: absolute; top:283px; left:54px; display: block; width: 797px; height: 1459px; background: url(i/sacred-heart.png); } #images, #words, #sounds, #about {position: relative; display: block; width: 990px; height: 600px; } #images { margin-top: 689px; } #words { height: 660px; margin-top: 236px;} #sounds { margin-top: 187px;} #about { margin-top: 258px; margin-bottom: 150px; } #imagesBG { position: absolute; top:78px; left:5px; display:block; width: 922px; height: 585px; background:url(i/bg-images2.png);} #wordsBG { position: absolute; top:38px; left:28px; display:block; width: 924px; height: 624px; background:url(i/bg-words.png); } #soundsBG { position: absolute; top:139px; left:204px; display:block; width: 625px; height: 514px; background:url(i/bg-sounds.png); } #aboutBG { position: absolute; top:2px; left:40px; display:block; width: 902px; height: 642px; background:url(i/bg-about3.png); } h1 {font-size: 26px; color: #000; margin: .5em 0 0 0; } h1#logo { position: absolute; top:47px; left:181px; display: block; width: 593px; height: 236px; text-indent: -9999px; overflow: hidden; background: url(i/title-pp.jpg); } h1 a {} h1 a:hover { } h2 {font-size: 22px; color: #341806; margin: .5em 0 0 0; } #images h2, #words h2, #sounds h2, #about h2 { display: block; position: relative; top:17px; left:10px; text-indent: -9999px; overflow: hidden; } #images h2 { width: 251px; height: 35px; background: url(i/title-images.png); } #words h2 {width: 237px; height: 35px; background: url(i/title-words.png); } #sounds h2 {width: 266px; height: 35px; background: url(i/title-sounds.png); } #about h2 {width: 296px; height: 35px; background: url(i/title-about.png); } h3 {font-size: 20px; color: #341806; margin: .5em 0 0 0; } h3#pp { position: absolute; top:100px; left:20px; } h3#gf { position: absolute; top:130px; left:20px; } a, a:visited { color: #a04c26; } a:hover {color: #663333; } p { font-size: 1.4em; line-height: 1.4em; margin: 1em 0; color: #333; } em {font-style: italic; } strong {font-weight: bold; } /* navigation */ #navHome {position: absolute; width: 990px; height: 250px; top:272px; } #navHome li {width: 127px; height: 81px; display: block; position: absolute; } #navHome:hover a {filter:alpha(opacity=50) -moz-opacity: 0.50; opacity: 0.50; } #navHome li a {display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; background-position: top left;} #navHome li a:hover {filter:alpha(opacity=100) -moz-opacity: 1.00; opacity: 1.00; } #navHome li.images {top:0; left:237px; } #navHome li.images a { background-image: url(i/nav/eye.jpg); } #navHome li.sounds { top:0; left:408px; } #navHome li.sounds a { background-image: url(i/nav/ear.jpg); } #navHome li.words { top:0; left:597px; } #navHome li.words a { background-image: url(i/nav/mouth.jpg); } #navHome li.list { top:82px; left:98px; display: none;} #navHome li.list a { background-image: url(i/nav/abc.jpg); } #navHome li.about { top:-23px; left:714px; } #navHome li.about a { background-image: url(i/nav/about.png); background-position: center 28px; } .miniNav { position: absolute; top:30px; right:15px; } .miniNav li {display: block; height: 36px; width: 50px; float: left; } .miniNav li a {display: block; text-indent: -9999px; overflow: hidden; margin: 0 auto; filter:alpha(opacity=50) -moz-opacity: 0.50; opacity: 0.50; } .miniNav li.top a { width: 34px; height: 28px; background: url(i/nav/icon-home.png); } .miniNav li.images a { width: 46px; height: 32px; background: url(i/nav/icon-eye.png); } .miniNav li.words a { width: 57px; height: 35px; background: url(i/nav/icon-mouth.png); } .miniNav li.sounds a { width: 43px; height: 36px; background: url(i/nav/icon-ear.png); } .miniNav li.about a { width: 31px; height: 22px; margin-top: 7px; background: url(i/nav/icon-about.png); } .miniNav li.active a {filter:alpha(opacity=100) -moz-opacity: 1.00; opacity: 1.00; } .miniNav li a:hover {background-position: top right; filter:alpha(opacity=100) -moz-opacity: 1.00; opacity: 1.00; } .listNav { position: absolute; top:0px; left:0px; } .listNav li {position: absolute; display: block; float: left; z-index: 50; } .listNav a.title {display: block; overflow: hidden; background-repeat: no-repeat; background-position: top left; text-indent: -9999px; } .listNav a.bio {display: block; width: 138px; height: 20px; background-repeat: no-repeat; background-position: top left; text-indent: -9999px; } #imagesList { } #imagesList li a {background-position: top right; } #imagesList li a:hover { } #imagesList li a.title {width: 100%; height: 20px; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70;} #imagesList li a.title:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; } #imagesList li a.bio {width: 100%; height: 20px; margin-top: 3px; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70;} #imagesList li a.bio:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; } #imagesList li.i1 { width: 263px; height: 67px; top:106px; left:339px; } #imagesList li.i1 a.title { background-image: url(i/items/i1.png); } #imagesList li.i1 a.bio { background-image: url(i/items/Betsy-Curtis.png); } #imagesList li.i2 { width: 263px; height: 67px; top:199px; left:339px;} #imagesList li.i2 a.title { background-image: url(i/items/i2.png); } #imagesList li.i2 a.bio { background-image: url(i/items/Caroline-Elbaor.png) } #imagesList li.i3 { width: 263px; height: 67px; top:292px; left:339px; } #imagesList li.i3 a.title { background-image: url(i/items/i3.png); height: 47px; } #imagesList li.i3 a.bio { background-image: url(i/items/Cecil-McDonald-Jr.png); } #imagesList li.i4 { width: 263px; height: 67px; top:408px; left:339px;} #imagesList li.i4 a.title { background-image: url(i/items/i4.png); } #imagesList li.i4 a.bio { background-image: url(i/items/Cecil-McDonald-Jr.png); } #imagesList li.i5 { width: 263px; height: 67px; top:505px; left:339px; } #imagesList li.i5 a.title { background-image: url(i/items/i5.png); } #imagesList li.i5 a.bio { background-image: url(i/items/Erin-Coleman-Cruz.png); } #wordsList li a { } #wordsList li a:hover { } #wordsList li a.title {width: 100%; height: 20px; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70;} #wordsList li a.title:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; } #wordsList li a.bio {width: 100%; height: 20px; filter:alpha(opacity=60); -moz-opacity: 0.60; opacity: 0.60;} #wordsList li a.bio:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; } #wordsList li.w1 { width: 169px; height: 20px; top:41px; left:313px; } #wordsList li.w1 a.title { background-image: url(i/items/w1.png); } #wordsList li.w1 a.bio { background-image: url(i/items/Arlene-Malinowski.png); } #wordsList li.w2 { width: 125px; height: 20px; top:33px; left:593px; } #wordsList li.w2 a.title { background-image: url(i/items/w2.png); } #wordsList li.w2 a.bio { background-image: url(i/items/Dion-Mindykowski.png); } #wordsList li.w3 { width: 190px; height: 20px; top:104px; left:700px; } #wordsList li.w3 a.title { background-image: url(i/items/w3.png); } #wordsList li.w3 a.bio { background-image: url(i/items/Keith-Cagney.png); } #wordsList li.w4 { width: 102px; height: 20px; top:386px; left:116px;} #wordsList li.w4 a.title { background-image: url(i/items/w4.png); } #wordsList li.w4 a.bio { background-image: url(i/items/Marcy-Sheldon.png); } #wordsList li.w5 { width: 112px; height: 20px; top:425px; left:180px;} #wordsList li.w5 a.title { background-image: url(i/items/w5.png); background-position: top right; } #wordsList li.w5 a.bio { background-image: url(i/items/Rachel-Theofanis.png); } #wordsList li.w6 { width: 112px; height: 20px; top:478px; left:256px;} #wordsList li.w6 a.title { background-image: url(i/items/w6.png); background-position: top right; } #wordsList li.w6 a.bio { background-image: url(i/items/Rachel-Theofanis.png); } #wordsList li.w7 { width: 198px; height: 20px; top:549px; left:240px;} #wordsList li.w7 a.title { background-image: url(i/items/w7.png); } #wordsList li.w7 a.bio { background-image: url(i/items/Thad-Higa.png); background-position: top right;} #wordsList li.w8 { width: 162px; height: 20px; top:575px; left:482px;} #wordsList li.w8 a.title { background-image: url(i/items/w8.png); } #wordsList li.w8 a.bio { background-image: url(i/items/Uhuru-Phalafala.png); } #wordsList li.w9 { width: 298px; height: 20px; top:515px; left:662px;} #wordsList li.w9 a.title { background-image: url(i/items/w9.png); } #wordsList li.w9 a.bio { background-image: url(i/items/Wade-Redfearn.png); } #soundsList li a { } #soundsList li a:hover { } #soundsList li a.title {width: 100%; height: 20px; cursor: default;} #soundsList li a.bio {width: 100%; height: 20px; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; } #soundsList li a.bio:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00;} #soundsList li.s1 { width: 188px; height: 40px; top:310px; left:48px; padding-top: 143px; background: url(i/ear-left.png) top center no-repeat; } #soundsList li.s1 a.title { background-image: url(i/items/s1.png); } #soundsList li.s1 a.bio { background-image: url(i/items/Elisabeth-Blair.png); } #soundsList li.s1 a.bio2 { background-image: url(i/items/Dion-Mindykowski.png); } #soundsList li.s2 { width: 130px; height: 40px; top:310px; left:808px; padding-top: 143px; background: url(i/ear-right.png) top center no-repeat; } #soundsList li.s2 a.title { background-image: url(i/items/s2.png); background-position: top right; } #soundsList li.s2 a.bio { background-image: url(i/items/Elisabeth-Blair.png); background-position: top right;} #aboutList { position: absolute; top: 446px; left: 0px; } #aboutList li {position: absolute; } #aboutList li a { display: block; overflow: hidden; background-repeat: no-repeat; background-position: top left; text-indent: -9999px;width: 100%; height: 40px; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #aboutList li a:hover { filter:alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; } #aboutList li.a1 { left: 282px; width: 168px; height: 40px; } #aboutList li.a1 a { background-image: url(i/items/Connor-Coyne.png); } #aboutList li.a2 { left: 561px; width: 168px; height: 40px; } #aboutList li.a2 a { background-image: url(i/items/Richard_Whaling.png); } #aboutList li.a3 { left: 803px; width: 168px; height: 40px; } #aboutList li.a3 a { background-image: url(i/items/Sam-Perkins-Harbin.png); } #aboutList li.a4 { left: 63px; width: 168px; height: 40px; } #aboutList li.a4 a { background-image: url(i/items/Skylar-Moran.png); } /*#aboutList li.a5 { width: 168px; height: 40px; top:425px; left:180px;} #aboutList li.a5 { background-image: url(i/items/w5.png); background-position: top right; }*/ #wordsItems {width: 800px; margin: -50px auto 0 auto; } .wordsItem {display: block; position: relative; height: 600px; width: 800px; overflow: hidden; } #sounds1 { position: absolute; top:520px; left:41px; } #sounds2 {position: absolute; top:520px; left:796px; }