/* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}img{border:0;}address,caption,cite,code,dfn,th,var,optgroup{font-style:inherit;font-weight:inherit;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;} html { overflow-y:scroll; background:#fff url(../images/design/bg-page.jpg) no-repeat top center; } html, body { margin:0; padding:0; } body { font-size:62.5%; font-family:arial,helvetica,sans-serif; color:#444; } .left { float:left; } .right { float:right; } .clear { clear:both; } a img { border:0; } *:focus { outline:none; } .text-align-right { text-align:right; } img.left, .image.left { margin-right:10px; } h1, h2, h3, h4, h5 { font-family:georgia,serif; } #page { position:relative; width:960px; margin:0 auto; /*z-index:10;*/ } /* ------------------------------------------------------------------------------------------------------------------------------- Header and Navigation ---------------------------------------------------------------------------------------------------------------------------------*/ #head { position:relative; padding:74px 0 25px; z-index:20; } #head h1 { margin:0; padding: 7px 13px; font-size: 4.3em; font-weight:normal; color:#2e3f4a; text-shadow:1px 1px #e5e5e5; border-bottom:1px solid #c9c9c9; border-left:5px solid #eb273d; } #head h1 a { text-decoration:none; color:#2e3f4a; } #head .nav { position:relative; margin:0; padding:6px 0 0; left:-5px; width:952px; list-style:none; } #head .nav li.item { float:left; padding:0; } #head .nav li.item.right { float:right; } #head .nav li.item a.tab, #head .nav li.item a.no-tab { position:relative; float:left; display:block; padding:0 2px; height:36px; z-index:10; color:#4d4d4d; font-size:1.7em; line-height:.84em; text-decoration:none; } #head .nav li.item.current a.tab, #head .nav li.item.current a.no-tab { color:#ed1b2d; } #head .nav li.item a.tab b { position:relative; display:block; top:2px; padding:10px 18px 13px 6px; background: transparent url(../images/design/dd/arrow-down-off.gif) no-repeat right -4px; } #head .nav li.item a.no-tab b { position:relative; display:block; top:2px; padding:10px 6px 13px 6px; } #head .nav li.item i.sep { float:left; display:block; height:41px; width:14px; text-indent:-1000em; background: transparent url(../images/design/dd/sep.png) no-repeat 5px 0px; } #head .nav li.item.open a.tab, .no-js #head .nav li.item:hover a.tab { margin:-1px -1px 0 -1px; background-color:#eaeaea; border:1px solid #cbcbcb; border-bottom:0; } #head .nav li.item.open a.tab b, .no-js #head .nav li.item:hover a.tab b { margin:-2px -2px 0 -2px; background-color:#fff; background-image: url(../images/design/dd/arrow-down-on.gif); border:2px solid #eaeaea; border-bottom:0; color:#ed1b2d;} #head .nav li.item.open a.no-tab b, .no-js #head .nav li.item:hover a.no-tab b {color:#ed1b2d;} #head .nav li.item.open .dropdown, .no-js #head .nav li.item:hover .dropdown { display:block; } *:first-child+html #head .nav li.item.open a.tab b { float:left; } /* ie7 only bug fix */ #head .nav .dropdown { position:absolute; display:none; left:-1px; top:42px; margin:0; width:948px; padding:2px; z-index:5; background-color:#eaeaea; border:1px solid #cbcbcb; } #head .nav .right .dropdown { left:auto; right:-1px; width:680px; } #head .nav .right.gallery .dropdown { left:auto; right:-1px; width:800px; } #head .nav .dropdown .inner { margin:0; padding:0 0 15px; background-color:#fff; } #head .box { float:left; margin-top:15px; padding:0px 20px; width:127px; min-height:180px; height:auto !important; height:180px; border-right:1px solid #d6d6d6; } #head .box ul { margin:0; padding:0; font-size:1.2em; } #head .box h2 { margin:0; padding:0 0 8px; font-size:1.5em; color:#9ea6ab; } #head .box h3 { font-size:1.5em; line-height:1.6em; } #head .box h4 { font-size:1.3em; line-height:1.4em; } #head .box h2 a { display:block; color:#ed1b2d; font-size:.9em; font-weight:normal; text-decoration:none; background:transparent url(../images/design/dd/arrow.png) no-repeat right center; } #head .box h2 a:hover { text-decoration:underline; } #head .box a { color:#ed1b2d; } #head .box li { float:none; list-style:none; padding:3px 5px 4px; border-bottom:1px solid #ebebeb; background:transparent url(../images/design/dd/arrow.png) no-repeat right center; } #head .box li a { display:block; width:100%; color:#2e3f4a; text-decoration:none; } #head .box p { margin:0; padding:0 0 8px; font-size:1.2em; } #head .box a:hover { color:#ed1b2d; } #head .box .space-top { margin-top:15px; } #head .box.medium { width:137px; } #head .box.big { width:147px; } #head .box.bigger { width:157px; } #head .box.x-big { width:180px; } #head .box.last { border:none; } #head .box.hours { width:113px; } #head .box.now { width:222px; } #head .box.location { width:155px; border:none; } #head .box ul.red li { padding: 1px 0 1px 10px; border:none; background-position:left center; } #head .box ul.red li a { color:#ed1b2d; } #head .box.library { width:160px; } #head .box.resources { width:225px; } #head .box.projects { width:170px; border:none; } #head .box.small-img { width:173px; } #head .box.about { width:480px; } #head .join .box.about { width:710px; } #head .right .box ul { margin-left:10px; border-top:1px solid #ebebeb; } #head .buttons { margin:18px 8px -7px; padding:10px 0 0; border-top:1px solid #ebebeb; text-align:right; } *:first-child+html #head .buttons { margin-top:31px; } /* ie7 bug */ #head .buttons .button { margin-left:7px; } #head .image .info p { margin:0; padding:8px 6px; } /* widget event in top menu */ #head .box.event { position:relative; margin:0 0 -18px; padding:10px 15px 10px 20px; float:right; background:#2f3f49; color:#fff; width:328px; } #head .box.event h2 { color:#fff; padding-top:3px;} #head .box.event a { color:#fff; } #head .box.event ul { padding-right:10px; } #head .box.event li { padding:0; border-color:#44525b; background-image:none; } #head .box.event li a { display:block; background-color:#2f3f49; color:#fff !important; line-height:20px; padding:7px 0 5px 0} #head .box.event li a:hover { background-color:#213440; color:#fff !important; } #head .box.event li b.hour { display:block; float:left; width:50px; padding-left:4px; font-size:1.28em; } #head .box.event li i.icon15 { display:block; float:left; margin-top:1px; margin-left:15px; margin-right:15px; } #head .box.event li span.title { display:block; float:left; width:200px; overflow:hidden; padding-top:1px; } #head .box.event .ngcscroll { position:relative; overflow:auto; height:213px; width:328px; } #head .box.event a.rss { position:absolute; top:15px; right:15px; } #head .learn .buttons { width:545px; } form.search { position:relative; top:25px; background:transparent url(../images/design/bg-search.png) no-repeat top left; width:256px; height:24px; } #head form.search { position:absolute; right:0; top:94px; } #foot form.search { top:10px; } /* C. Chen modifications as a result of useability study for Advanced search link */ form.search input { padding:0; position:relative; top:1px; left:15px; width:145px; background:#fff; border:none; font-size:1em; line-height:1em; color:#6d6d6d; } /* C. Chen modifications as a result of useability study for Advanced search link */ form.search .search-submit { cursor:pointer;padding:0;margin:0;text-align:right;padding-right:25px;width:85px;position:relative;left:20px;top:3px;background-color:none;background:none;font-size:1.1em; color:#444; text-decoration:none; font-weight:bold; } #head form.search input.search-query, #foot form.search input.search-query { top:4px; font-size:1.3em; } /* C. Chen modifications as a result of useability study for Advanced search link */ #head form.search .advanced, #foot form.search .advanced { position:absolute; top:27px; right:8px; font-size:.9em; color:#444; text-decoration:none; } #head form.search .advanced:hover, #foot form.search .advanced:hover { text-decoration:underline; } #foot .location .right { width:144px; } /* ------------------------------------------------------------------------------------------------------------------------------- Quick Links ---------------------------------------------------------------------------------------------------------------------------------*/ #quick-links { position:absolute; top:5px; right:0; z-index:30; } #quick-links a { padding:0 8px; color:#474e4e; font-size:1.1em; text-decoration:none; } #quick-links a:hover { color:#ED1B2D; } #quick-links .font-size { display:inline; padding-left:8px; background:transparent url(../images/design/sep-quick-links.png) no-repeat top left; } #quick-links .font-size a { padding:0 2px; } /* ------------------------------------------------------------------------------------------------------------------------------- Main Tags Layout Definitions ---------------------------------------------------------------------------------------------------------------------------------*/ #main { padding:20px 0 50px; font-size:1.3em; line-height:1.6em; } #main h1 { margin:.5em 0 .5em; font-size:2.3em; font-weight:normal; line-height:1.4em; color:#404040; border-bottom:1px solid #d9d9d9; } #main h2 { margin:0 0 .5em; font-size:1.9em; line-height:1.1em; font-weight:normal; color:#404040; } #main h3 { margin:0 0 .5em; font-size:1.5em; font-weight:normal; color:#505050; } #main h4 { margin:0 0 .5em; font-size:1.3em; font-weight:normal; color:#696969; } #main h5 { margin:0 0 .5em; font-size:1em; font-weight:bold; font-style:italic; color:#404040; } #main h6 { margin:0 0 .5em; font-size:1em; font-weight:bold; } #main ol, #main ul { margin:0 0 1.5em 1.8em; } #main ol ul, #main ul ul, #main ol ol, #main ul ol { margin-top:0; margin-bottom:0; } #main a { color:#ee2535; } #main a:hover { text-decoration:none; } #main p { margin: 0 0 1.8em; } #main dt { margin-top:.5em; } #main dd { padding-left:30px; } #main .highlight { background-color:#fcfeb7; } #main input.textfield { border:1px solid #afafaf; font-size:1.23em; color:#404040; } #main input.textfield:hover, #main input.textfield:focus { border-color:#404040; } #main table { margin:1em 0; border:1px solid #e1e1e1; } #main table td { padding:2px 10px; line-height:1.3em; } #main table tr:nth-child(odd) { background-color:#fff; } #main table tr:nth-child(even) { background-color:#ededed; } #main table tr.titlebar td { padding:2px 10px; font:normal 2em/2em georgia,serif; background:#ededed; text-align:left; } #main table .subtitlebar td { padding:6px 10px; background:#787878; color:#fff; } #main table .subtitlebar a { color:#fff; text-decoration:none; } #main table .subtitlebar a:hover { text-decoration:underline; } #main table .cell_highlight_light td { background:#ededed; } #main table.no-border { border:0; } #main table.no-border tr.titlebar td { border-bottom: 1px solid #d7d7d7; } #main table.no-border td { padding:10px} #promo-banner { margin-bottom:25px; } /*#left-menu { float:left; width:220px; }*/ #sub-nav { margin:0 !important; } #sub-nav ul { margin:0; } #sub-nav li { display:block; list-style:none; margin:0; padding:0; } #sub-nav li.separator { margin-top:20px; font-weight:bold; font-size:1.1em; border-bottom: 1px solid #DDDDDD; padding:right:10px; background:url(../images/design/subnav-arrow-down.gif) center right no-repeat } #sub-nav li.separator.first { margin-top:0; } #sub-nav li a { display:block; padding:2px 0; color:#444; text-decoration:none; border-bottom:1px solid #ddd; } #sub-nav a:hover, #sub-nav a.current { color:#ed1b2d; } #sub-nav a.current { font-weight:bold; } #sub-nav a.exact.current { background:transparent url(../images/design/subnav-arrow-right.gif) no-repeat center right; } #sub-nav ul ul { border-top:0; } #sub-nav li li { /*padding:2px 0 2px 20px;*/ } #sub-nav li li li { /*border:0;*/ } #sub-nav li li a { padding:1px 0 1px 18px; color:#444; font-weight:bold; text-decoration:none; } #sub-nav li li li a { padding:1px 0 1px 36px; font-weight:normal; border:0; } /* ------------------------------------------------------------------------------------------------------------------------------- General Layout ---------------------------------------------------------------------------------------------------------------------------------*/ #main h2.title { font-size:2.3em; line-height:1.1em; padding-bottom:10px; margin:28px 0 15px; border-bottom:1px solid #d9d9d9; color:#2e424c; } .home #main h2.title { margin-top:48px; } .image { position:relative; border:1px solid #d0d0d0; padding:3px; } .image img { display: block; } .image .info { position:absolute; bottom:0; left:3px; right:0; height:0px; overflow:hidden; padding:27px 0 0; background:transparent url(../images/design/bt-info-off.png) no-repeat 13px 0; } * html .image .info { bottom:-1px;width:100%; } .image:hover .info, .image.hover .info { height:auto; padding-top:24px; background-image: url(../images/design/bt-info-on.png) } .image .info p { font-size:.9em;line-height:1.4em;margin:0 !important; padding:8px 9px; background:transparent url(../images/design/bg-white-80p.png) repeat 0 0; /*width: 292px;*/ } .image .info p .learn-more { padding-right:16px; color:#f23c4b; text-decoration:none; background:transparent url(../images/design/icon-learn-more.png) no-repeat center right; } .image.no-border { border:0; padding:0; } .image.no-border .info { left:0; padding-top:24px; } body .img-right { float:right; } div.img-right p { font-size:.9em; color:#777; } img.img-right { margin-left:10px; } body .img-left { float:left; } div.img-left p { font-size:.9em; color:#777; } img.img-left { margin-right:10px; } #main .grid-3.content-header { background:transparent url(../images/design/bg-content-header.jpg) no-repeat top left; color:#fff; } #main .grid-3.content-header h2 { margin-bottom:0; color:#fff; font-size:2.6em; line-height:1; } #main .grid-3.content-header b { font-weight:normal; color:#959ea5; } #main .grid-3.content-header a.back { font-family:georgia,serif; color:#959ea5; text-decoration:none; font-style:italic; } #main .grid-3.content-header a.back:hover { color:#fff; } #main .content-header { position:relative; height:217px; margin-bottom:25px; } #main .content-header a { font-family:georgia,serif; color:#fff; font-style:italic; text-decoration:none; } #main .content-header a:hover { text-decoration:underline; } #main .content-header .bottom { position:absolute; bottom:10px; right:10px; } /*Framed box grid */ #framed-box-grid .grid-3 { margin-bottom:20px; } #framed-box-grid .grid-3 h4 { position:relative; height:38px; font-size:1.1em; line-height:1.2em; text-transform:uppercase; font-weight:normal; } #framed-box-grid .grid-3 h4 span { position:absolute; bottom:0; left:0; } #framed-box-grid .grid-3 div { position:relative; border:1px solid #ddd; padding:2px; background-repeat:no-repeat;} #framed-box-grid .grid-3 div img { position:relative; } #framed-box-grid .grid-3 div ul { position:absolute; bottom:0; left:0; margin:0; padding:6px 8px 9px; width:202px; background:#fff; list-style:none; } #framed-box-grid .grid-3 div ul li { margin:0; padding: 3px 0 0 13px; color:#444; background:transparent url(../images/design/subnav-arrow-right.gif) no-repeat 0px 10px; } #framed-box-grid .grid-3 div ul li.no-arrow { background:none } #framed-box-grid .grid-3 div ul li a { color:#2d2d2d; } #framed-box-grid .grid-3 div ul li a:hover { color:#ee2535; } #framed-box-grid a.button { margin:10px} #framed-box-grid a.button span { text-align: center; width: 158px; } /* ------------------------------------------------------------------------------------------------------------------------------- Icons ---------------------------------------------------------------------------------------------------------------------------------*/ .icon { font-size:.83em; line-height:13px; } .icon.rss { padding: 0 0 0 15px; height:15px; background:transparent url(../images/design/icon-sprite.png) no-repeat 0 0; color:#666; text-decoration:none; } .icon.rss:hover { color:#c35600 !important; } .icon.ical { padding: 0 0 0 15px; height:15px; background:transparent url(../images/design/icon-sprite.png) no-repeat 0 -35px; color:#666; text-decoration:none; } .icon.ical:hover { color:#000 !important; } .icon.big { display:inline-block; padding: 0 0 0 25px; line-height:21px; font-size:1em; height:21px; background:transparent url(../images/design/icons-big-sprite.png) no-repeat 0 0; color:#666; text-decoration:none; } .icon.big:hover { text-decoration:underline; } .icon.big.ical { background-position:0 -22px; } /* C.Chen - Aug 29, 2011 - margin-top added for Twitter widget change */ .icon.blog { width:47px; height:40px; background:transparent url(../images/design/icon-extra-sprite.png) no-repeat 0 0;margin-top:-23px; } .icon.newsletter { width:47px; height:40px; background:transparent url(../images/design/icon-extra-sprite.png) no-repeat 0 -53px;margin-top:79px; } .icon.webcam { width:47px; height:40px; background:transparent url(../images/design/icon-extra-sprite.png) no-repeat 0 -93px;margin-top:180px; } .icon.right { margin-left:8px; } *:first-child+html .icon.right { position:relative; top:-42px; } h1 .icon { margin-top:19px; font-size:.40em; } h1 .icon.big { margin-top:15px; font-size:.48em; } h2 .icon { margin-top:4px; font-size:.48em; } h2 .icon.big { margin-top:0px; font-size:.55em; } #main .icon { color:#000; } #main .icon.big:hover { color:#000 !important; text-decoration:underline; } #main .icon.info { padding: 0 15px 0 0; background:transparent url(../images/design/icon-sprite.png) no-repeat right -17px; text-decoration:none; } #main .icon.print { margin-left:8px; padding: 1px 0 1px 20px; height:17px; line-height:17px; font-weight:bold; background:transparent url(../images/design/icon-sprite.png) no-repeat 0 -50px; color:#777; text-decoration:none; } #main .icon.print:hover { color:#222 !important; background-position:0 -66px; } #main .icon.link { margin-left:8px; padding: 1px 0 1px 20px; height:17px; line-height:17px; font-weight:bold; background:transparent url(../images/design/icon-sprite.png) no-repeat 0 -82px; color:#777; text-decoration:none; } #main .icon.link:hover { color:#222 !important; background-position:0 -99px; } /* ------------------------------------------------------------------------------------------------------------------------------- Home Page ---------------------------------------------------------------------------------------------------------------------------------*/ #calendar small { font-size:0.846em; } #calendar h3.title { margin-top:0px; margin-bottom:16px; line-height:1em; font-family:arial,helvetica,sans-serif; } #calendar h3.title a { position:relative; top:4px; } #calendar h3.title .prev-day { margin-left:10px; } #calendar h6 { color:#696969; } #calendar .grid-8 { width:640px;} #calendar .text-align-right a { margin-left:10px; } #calendar #exhibitions-slide-wrapper { position:relative; overflow:hidden; width:638px; height:300px; } #calendar.narrow #exhibitions-slide-wrapper {width:700px} #calendar #exhibitions-slide { position:absolute; width: 1000px; } /* CCHEN: exhibition sliders white keyline */ #calendar #exhibitions-slide .exhibition img { border:1px solid #fff; position:relative;right:1px; } #calendar #exhibitions-slide .exhibition { float:left; width:212px; border-right:1px solid #dbdbdb; height:300px; background:transparent url(../images/design/arrow-right-gray.jpg) no-repeat 190px 210px; } #calendar #exhibitions-slide .exhibition h3 { margin:0; padding:8px 30px 0 8px; font-size:1.1em; line-height:1.2em; } #calendar #exhibitions-slide .exhibition h3 a { color:#696969; text-decoration:none; } #calendar #exhibitions-slide .exhibition.over h3 a { color:#ee2535; } #calendar #exhibitions-slide .exhibition p { margin:0; padding:3px 30px 0 8px; line-height:1.2em; font-size:.93em; color:#878787; } #calendar .prev, #calendar .next { position:absolute; top:130px; left:-13px; display:block; width:45px;height:60px; background:transparent url(../images/design/sprites-arrow-prev-next.png) no-repeat -4px 0; } #calendar .next { left:auto; right:-10px; background-position: -70px 0; } #calendar .prev:hover { background-position: -4px -76px;} #calendar .next:hover { background-position: -70px -76px;} #calendar.narrow .prev, #calendar.narrow .next { margin-top:70px; } /* home calendar widget right */ #calendar .widget { width:280px; } #calendar .widget.tab-event .tabs { margin:10px 0 0; padding:0 0 0 8px; list-style:none; background:transparent url(../images/design/widget/bg-widget-calendar-tabs.jpg) repeat-x left bottom; } #calendar .widget.tab-event .tabs li { float:left; height:40px; line-height:40px; padding-left:1px; } #calendar .widget.tab-event .tabs li a { display:block; font-weight:bold; color:#5e5e5e; text-decoration:none; padding:10px 10px 0; font-size:.9em; line-height:30px; } #calendar .widget.tab-event .tabs li a:hover { text-decoration:underline; } #calendar .widget.tab-event .tabs li.current { background:transparent url(../images/design/widget/border-widget-calendar-tabs.jpg) no-repeat left bottom; } #calendar .widget.tab-event .tabs li.current a { background:#fff url(../images/design/widget/border-widget-calendar-tabs.jpg) no-repeat right bottom; } #calendar .widget.tab-event .ngcscroll { position:relative; overflow:auto; height:256px; width:280px; margin-top:10px; margin-bottom:8px; } #calendar .widget.tab-event .ngcscroll ul { margin:0; padding-right:10px; list-style:none; } #calendar .widget.tab-event .ngcscroll li { margin:0; padding:0; border-bottom:1px solid #e8e8e8; color:#7f7f7f; } #calendar .widget.tab-event .ngcscroll li a { display:block; line-height:20px; color:#565656; text-decoration:none; cursor:pointer; margin:7px 0 5px 0} #calendar .widget.tab-event .ngcscroll li a:hover { color:#ed1c2d; background:#f7f7f7; } #calendar .widget.tab-event .ngcscroll li b.hour { display:block; float:left; width:60px; padding-left:4px; } #calendar .widget.tab-event .ngcscroll li i.icon15 { display:block; float:left; margin:1px 8px 0 2px; } #calendar .widget.tab-event .ngcscroll li span.title { display:block; float:left; width:155px; text-decoration:underline; overflow:hidden; padding-top:1px; } #calendar .widget.tab-event #widgetCalendarTabOnTour ul li a, #calendar .widget.tab-event #widgetCalendarTabUpcoming ul li a { padding: 5px 3px; height:auto; line-height:1.3em; } #calendar .widget.tab-event #widgetCalendarTabOnTour ul li a span.title, #calendar .widget.tab-event #widgetCalendarTabUpcoming ul li a span.title { display:inline; float:none; width:auto; height:auto; overflow:none; padding-top:0; } #calendar .widget.tab-event #widgetCalendarTabOnTour ul li a:hover small, #calendar .widget.tab-event #widgetCalendarTabUpcoming ul li a:hover small { color:#444; } /* home featured */ #featured { position:relative; margin-top:22px; height:294px; z-index:10; } #featured big { display:block; position:relative; float:left; overflow:hidden; width:640px; height:294px; z-index:100; } #featured big canvas { position:absolute; top:0; left:0; z-index:100; } #featured big span { display:block; position:absolute; top:0; left:0; } #featured big img { display: block; position:absolute; top:0; left:0; } #featured small { display:block; position:absolute; overflow:hidden; right:0; width:300px; height:294px; z-index:200; } #featured small span { display:block; position:absolute; top:0; left:0; } #featured small img { display: block; } #featured .current { position:absolute; top:87px; right:-10px; width: 322px; height: 120px; z-index: 201; display:block; } /* Revised these to accomodate a wider arrow image(which was created to allow the entire previous and next images to be clickable */ /*#featured .prev { position:absolute; top:-11px; right:118px; cursor:pointer; z-index:201; display:block; }*/ /*#featured .next { position:absolute; bottom:-11px; right:118px; cursor:pointer; z-index:203; display:block; }*/ #featured .prev { position:absolute; top:-11px; right:0px; cursor:pointer; z-index:201; display:block; } #featured .next { position:absolute; bottom:-11px; right:0px; cursor:pointer; z-index:203; display:block; } /* home highlight */ #highlight h3 { font-weight:bold; font-family:arial,helvetica,sans-serif; font-size:1em; color:#696969; margin-bottom:5px; } #highlight .rss { position:absolute; top:5px; right:0; } /* home peoples choice */ #peoples-choice { width:320px; } #peoples-choice h3 { font-weight:bold; font-family:arial,helvetica,sans-serif; font-size:1em; color:#696969; margin-bottom:5px; } #peoples-choice a { color:#ed1c2d; font-weight:bold; } #peoples-choice .info { position:absolute; top:4px; right:0; } #peoples-choice .box { position:relative; float:left; border-right:1px solid #d0d0d0; min-height:176px; height:auto !important; height:176px; } /** html #peoples-choice .box { height: 176px; }*/ #peoples-choice .box.three { border:0; } #peoples-choice .box h4 { margin:0; padding:3px 3px 0 3px; font-size:1.077em; font-family:arial,helvetica,sans-serif; line-height:1em; width:99px; color:#909090; } #peoples-choice .box .votes { padding:0 4px; } #peoples-choice .box .button { position:absolute; left:4px; bottom:0; } #peoples-choice .message {display:block; position:absolute; background:#fff; z-index:10; padding:5px; width:307px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; margin:0; top:25px; left:0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity:0.8;} /* home must recent podcast */ #recent-podcast { width:280px; } #recent-podcast h3 { font-weight:bold; font-family:arial,helvetica,sans-serif; font-size:1em; color:#696969; margin-bottom:5px; } #recent-podcast .rss { position:absolute; top:5px; right:0; } #recent-podcast a { } /* home online extras */ #online-extras { padding-bottom:40px;} #online-extras .icon { position:absolute; top:27px; left:0; } #online-extras h3 { margin-left:60px; margin-bottom:.3em; font-family:arial,helvetica,sans-serif; font-weight:bold; font-size:1.077em; color:#404040; } /* C.Chen - Aug 29, 2011 - styles applied to #online-extras li */ #online-extras p, #online-extras li { margin-left:60px; color:#666; font-size:0.846em; line-height:1.3em; } #online-extras a { text-decoration:none; color:#666; } #online-extras a:hover { text-decoration:underline; } /* C.Chen - Aug 29, 2011 - Twitter widget */ #online-extras .ngcscroll { position:relative; overflow:auto; width:100%;height:265px;background-color:#f4f4f4; } #online-extras .ngcscroll ul { margin:0; list-style:none; } #online-extras .ngcscroll li { margin:0; padding:12px; border-bottom:1px dotted #999999; color:#7f7f7f; background-color:#f4f4f4; overflow:hidden } #online-extras .ngcscroll li a { color:#565656; text-decoration:none; cursor:pointer; } #online-extras .ngcscroll li a:hover { color:#ed1c2d; background:#f7f7f7; } #online-extras .noindent { margin-left:40px; } /* ------------------------------------------------------------------------------------------------------------------------------- Breadcrumb ---------------------------------------------------------------------------------------------------------------------------------*/ #main ul.breadcrumb { margin-top:0; margin-left:0; margin-bottom:0; list-style:none; } #main ul.breadcrumb li { float:left; padding-right:6px; font-size:.9em; font-weight:bold; } #main ul.breadcrumb li a { padding-right:4px; color:#777; text-decoration:none; } #main ul.breadcrumb li a:hover { color:#222; text-decoration:underline; } /* ------------------------------------------------------------------------------------------------------------------------------- Footer ---------------------------------------------------------------------------------------------------------------------------------*/ .backToTop { color:#666; text-decoration:none; } .backToTop:hover { color:#555; } #foot { position:relative; padding:40px 0; background:#e8e8e8 url(../images/design/foot/bg-foot.jpg) no-repeat top center; /*z-index:15;*/ } #foot .top { position:absolute; top:-67px; right:0; } /* CCHEN: changes to lay the SM icons out 3 x 3 */ #foot .connect { padding-bottom:6px; width:378px; } #foot .connect h5 { margin:0; font-size:1.1em; font-weight:normal; } #foot .connect a { padding-right:15px; text-decoration:none; color:#444c4e; font-weight:bold; width:100px; display:inline-block; padding-top:8px; } #foot .connect a:hover { text-decoration:underline; } #foot .connect a img { position:relative; top:7px; margin-right:5px; } #foot .box { float:left; margin-top:15px; padding:0; width:130px; min-height:280px; } #foot .box a { color:#444c4e; text-decoration:none; } #foot .box a span { text-decoration:underline; } #foot .box a:hover span { text-decoration:none; } #foot .box ul { float:left; margin:0; padding:0 18px 0 0; width:142px; font-size:1.2em; } #foot .box h2 { margin:0; padding:0 0 5px; font-size:2.3em; font-weight:normal; color:#828282; } #foot .box li { list-style:none; padding:7px 0 6px; border-bottom:1px solid #ddd; } #foot .box li.last { border:0; } #foot .box li a { display:block; width:100%; color:#444c4e; text-decoration:none; } #foot .box p { margin:4px 0 0; padding:0 0 4px; border-bottom:1px solid #ddd; } #foot .box p.no-border { border:0; } #foot .box a:hover { color:#ed1b2d; } /* box size */ #foot .box.about { width:320px; } #foot .box.library { width:238px; } #foot .box.location { width:380px; font-size:1.1em; line-height:1.3em; } #foot .box.location .image { border:0; } /* Copyright ---------------------------------------- */ #copyright { padding:18px 0 28px; background:#535353; color:#ccc; font-size:1.1em; } #copyright a { padding-left:15px; color:#ccc; } #copyright a:hover { text-decoration:none; } #copyright p { margin:0; padding:35px 0 0; } #foot .inner, #copyright .inner { position:relative; width:940px; margin:0 auto; } /*CSS TO REMOVE AT LAUNCH - START*/ div.placeholder {background-color:#000; padding:20px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } div.placeholder h2 {color:#fff; font-size:1.5em; font-weight:bold} div.over-content {position:absolute} /*CSS TO REMOVE AT LAUNCH - END */ /* ------------------------------------------------------------------------------------------------------------------------------- Buttons ---------------------------------------------------------------------------------------------------------------------------------*/ /* to style as a button: Label */ .button { position:relative; display:inline-block; text-decoration:none; white-space:nowrap; border:none; } .button span { display:inline-block; cursor:pointer; } .button.small.red, .button.small.red:hover { padding-left:4px; height:18px; line-height:18px; background: transparent url(../images/design/buttons/bg-small-red-left.png) no-repeat top left; } .button.small.red span, .button.small.red:hover span { padding-left:3px; padding-right:7px; height:18px; background: transparent url(../images/design/buttons/bg-small-red-right.png) no-repeat top right; font-size:1em; line-height:18px; color:#fff; } .button.filter { padding-left:15px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -60px; } .button.filter span { padding-left:3px; padding-right:18px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right 0; font-size:1em; line-height:29px; color:#fff; } .button.filter:hover { background-position: left -90px; } .button.filter:hover span { background-position: right -30px; } .button.red { padding-left:15px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -304px; } .button.red span { padding-left:3px; padding-right:18px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -244px; font-size:1em; line-height:29px; color:#fff; } .button.red:hover { background-position: left -334px; } .button.red:hover span { background-position: right -274px; } .button.gray { padding-left:15px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -424px; } .button.gray span { padding-left:3px; padding-right:18px; height:29px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -364px; font-size:1em; line-height:29px; color:#fff; } .button.gray:hover { background-position: left -454px; } .button.gray:hover span { background-position: right -394px; } .button.view { padding-left:1px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -120px; } .button.view span { padding-left:10px; padding-right:40px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -151px; font-size:1.2em; line-height:30px; color:#404040; } .button.view.blue span { background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -182px; } .button.view.orange span { background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -213px; } .button.view.red:hover { background-position: left -120px; } .button.view.red span:hover { background-position: right -151px; } .button.view:hover span { color:#666; } /**/ button.red { border:none; outline:0; background:transparent; margin:0; padding:0; width:auto; height:30px; } button.red b { display:block; cursor:pointer; padding:0 0 0 15px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -304px; } button.red span { display:inline-block; cursor:pointer; margin:0; padding:0 18px 0 3px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -244px; font-size:1em; line-height:30px; color:#fff; } button.red:hover b { background-position: left -334px; } button.red:hover span { background-position: right -274px; } button.gray { border:none; outline:0; background:transparent; margin:0; padding:0; width:auto; height:30px; } button.gray b { display:block; cursor:pointer; padding:0 0 0 15px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat left -424px; } button.gray span { display:inline-block; cursor:pointer; margin:0; padding:0 18px 0 3px; height:30px; background: transparent url(../images/design/buttons/buttons-sprite.png) no-repeat right -364px; font-size:1em; line-height:30px; color:#fff; } button.gray:hover b { background-position: left -454px; } button.gray:hover span { background-position: right -394px; } /* ------------------------------------------------------------------------------------------------------------------------------- Forms ---------------------------------------------------------------------------------------------------------------------------------*/ /*General*/ label {color:#666; font-size:1.1em; line-height:1.3em;} label.required {color:#000; font-weight:bold} form em {font-style:italic} form div.row {margin-bottom:10px} form span.required {font-weight:bold} form input.textField, form textarea.textField { font-size:1.3em; font-family: Georgia, serif; color:#404040; padding: 5px; border:1px solid #bdbdbd; } /* Form Errors */ form input.error, form textarea.error, form select.error { border:2px solid #ff9191; } form span.error {color:/*#ff9191*/#ff0000} * html select.error {background-color: #ff9191;} * html select.error option {background-color:#fff} /*Grid Form*/ form.grid .grid-1 input, form.grid .grid-1 textarea, form.grid .grid-1 textarea {width:40px;} form.grid .grid-2 input, form.grid .grid-2 textarea, form.grid .grid-2 textarea {width:120px;} form.grid .grid-3 input, form.grid .grid-3 textarea, form.grid .grid-3 textarea {width:200px;} form.grid .grid-4 input, form.grid .grid-4 textarea, form.grid .grid-4 textarea {width:280px;} form.grid .grid-5 input, form.grid .grid-5 textarea, form.grid .grid-5 textarea {width:360px;} form.grid .grid-6 input, form.grid .grid-6 textarea, form.grid .grid-6 textarea {width:440px;} form.grid .grid-7 input, form.grid .grid-7 textarea, form.grid .grid-7 textarea {width:520px;} form.grid .grid-8 input, form.grid .grid-8 textarea, form.grid .grid-8 textarea {width:600px;} form.grid .grid-9 input, form.grid .grid-9 textarea, form.grid .grid-9 textarea {width:680px;} form.grid .grid-1 select {width:50px;} form.grid .grid-2 select {width:130px;} form.grid .grid-3 select {width:210px;} form.grid .grid-4 select {width:290px;} form.grid .grid-5 select {width:370px;} form.grid .grid-6 select {width:450px;} form.grid .grid-7 select {width:530px;} form.grid .grid-8 select {width:610px;} form.grid .grid-9 select {width:690px;} form.grid label {display:block; } form.grid div.checkBoxes input {width:auto} /*Vertical Form*/ form.vertical label {float:left; width: 240px; text-align:right; margin-right:10px;padding:6px 0} .grid-6 form.vertical label {width: 120px;} form.vertical input.textField {float:left;} form.vertical .short {width:150px} form.vertical .medium {width:300px} form.vertical .long {width:400px} form.vertical div.checkBoxes {float:left; font-size:1.1em; line-height:1.3em; padding:6px 0; width:400px} .grid-6 form.vertical div.checkBoxes {width: 300px;} /*foundation-box*/ #main .foundation-box h2 { text-transform:uppercase; font-size:1.2em} #main .foundation-box ul { position:absolute; bottom:0; left:0; margin:0; padding:6px 0px 0px 0px; width:380px; /*background:#fff;*/ list-style:none; } #main .foundation-box ul li { margin:0; padding: 3px 15px 0 13px; color:#444; background:transparent url(../images/design/subnav-arrow-right.gif) no-repeat 0px 10px; float:left; display:inline; font-size:0.95em} /* ------------------------------------------------------------------------------------------------------------------------------- Podcasts ---------------------------------------------------------------------------------------------------------------------------------*/ #podcast-menu { position:relative; margin:-46px 0 0 !important; list-style:none; } #podcast-menu li { float:left; } #podcast-menu li a { display:block; margin:0 0 0 15px; padding:5px 15px 5px 3px; color:#2a3841; font-weight:bold; text-decoration:none; background: transparent url(../images/design/podcast/arrow-down-dark-blue-10x7.gif) no-repeat center right; } #podcast-menu li a:hover, #podcast-menu li a.current { color:#ED1B2D; } #podcast-featured { position:relative; margin-top:30px; } #podcast-featured .text { position:absolute; top:2px; right:0; width:307px; height:191px; padding:20px 10px 10px 80px; color:#fff; background: transparent url(../images/design/podcast/featured-bg.png) no-repeat top left; } *:first-child+html #podcast-featured .text { top:3px; } #podcast-featured .text h3 { color:#fff; line-height:1.4em; } #podcast-featured .text .listen { position:absolute; bottom:20px; color:#fff; background-image:url(../images/design/podcast/arrow-white-7x7.gif); } #podcast-featured .text .icons { position:absolute; bottom:17px; right:20px; } #podcast-featured .play b { width:350px; } #podcast-list { margin-top:30px; } #podcast-list .podcast { position:relative; width:219px; height:330px; margin-bottom:20px; border-right: 1px solid #d9d9d9; } #podcast-list .podcast h4 { padding:10px 8px 0 8px; font-size:1.308em; color:#404040; } #podcast-list .podcast p { padding:5px 8px 0 8px; font-size:.9em; line-height:1.4em; color:#404040; } #podcast-list .podcast .listen { position:absolute; bottom:9px; left:8px; } #podcast-list .podcast:hover, #podcast-list .podcast.over { background-color:#f7f7f7; } #podcast-list .podcast:hover .listen, #podcast-list .podcast.over .listen { color:#2a3841; background-image:url(../images/design/podcast/arrow-dark-blue-7x7.gif); } #podcast-list .podcast .listen:hover { color:#ED1B2D; } #podcast-detail { position:relative; margin-top:30px; } #podcast-featured h3, #podcast-list h3, #podcast-detail h3 { color:#404040; font-size:1.4em; } #podcast-featured h3 .icon, #podcast-list h3 .icon, #podcast-detail h3 .icon { position:relative; top:-2px; margin-left:5px; font-size:.583em; } #podcast-list h3 small { font-size:.73em; } .pod-icon { float:left; display:block; margin-left:4px; text-indent:-1000em; width:22px; height:20px; background: transparent url(../images/design/podcast/podcast-icons-sprite.png) no-repeat 0 0; } .pod-icon.hd { background-position:0 -20px; } a.listen { float:left; display:block; padding-right:15px; font-size:.73em;line-height:.9em; text-decoration:none; font-weight:bold; background: transparent url(../images/design/podcast/arrow-red-7x7.gif) no-repeat center right; } a.play { display:block; position:relative; } a.play img { display:block; } a.play b { display:block; position:absolute; top:0; left:0; text-indent:-1000em; width:100%; height:100% !important; height:164px; background: transparent url(../images/design/podcast/play.png) no-repeat center center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: opacity 300ms linear; } a.play:hover b { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } a.back { font-family:georgia,serif; } /* form */ .textField { font-size:1.3em; font-family: Georgia, serif; color:#404040; padding: 5px; border:1px solid #bdbdbd; } input.error { border:2px solid #ff9191; } /* ------------------------------------------------------------------------------------------------------------------------------- Visit ---------------------------------------------------------------------------------------------------------------------------------*/ #main #hours-horizontal {background:url(../images/design/visit/bg-visit-hours-operation.jpg) no-repeat; width:460px; height:162px; padding:0 5px} #main #hours-horizontal h3 {padding: 2px 0 1px 8px; height:31px; line-height:31px; text-transform:uppercase; font-size:1.1em;} #main #hours-horizontal h3 span.right { padding-right:14px; } *:first-child+html #main #hours-horizontal h3 span.right { position:relative; top:-30px; } #main #hours-horizontal h3 small { text-transform:none; } #main #hours-horizontal h3 small i { color:#EE2535; } #main #hours-horizontal h3 img { position:relative; top:-2px; vertical-align:middle; } #main #hours-horizontal table {margin: 0 0 10px 0; padding:0; border-collapse:separate; border-spacing:5px 2px; width:98%; border:0; left:-5px} #main #hours-horizontal table tr, #main #hours-horizontal table th, #main #hours-horizontal table td {border:0; text-align:center; background:none} #main #hours-horizontal table th { background-color:transparent; font-size:0.9em; font-weight:bold} #main #hours-horizontal table td {font-size:1em; background-color:#fff; padding:8px 5px; line-height:1.1em; } #main #hours-horizontal table td small {font-size:0.8em} /* ------------------------------------------------------------------------------------------------------------------------------- Home Page Scroller ---------------------------------------------------------------------------------------------------------------------------------*/ /* Scroll Bar Master Styling Starts Here */ /* comments can freely be removed from this file */ /* do not modify .scrollgeneric class,required for proper operation */ .scrollgeneric{line-height:1px;font-size:1px;position:absolute;top:0;left:0;} .vscrollerbase,.vscrollerbar{width:11px;} .hscrollerbase,.hscrollerbar{height:11px;} .vscrollerbar,.hscrollerbar{/*padding information of these elements are only used for padding of the scroll-bar with respect to the scroll base, the padding will automatically be turned off by the script*/ padding:5px;/* z-index for scrollbars no longer has to be given as of version 1.7.5 for correct operation,but it is still recommended,as this decides the z-index for content.*/ z-index:2;} .vscrollerbarbeg{/*top image holder for vertical scroll bar*/ background:url(../images/design/scroll/vscroller.png) 0px -8px;width:11px;/* height is auto set by the script to fit the scrollbar */} .vscrollerbarend{/*bottom image holder for vertical scroll bar*/ background:url(../images/design/scroll/vscroller.png);width:11px;height:3px;} .hscrollerbarbeg{/*left image holder for horizontal scroll bar*/ background:url(../images/design/scroll/hscroller.png) -10px 0px;height:11px;/* width is auto set by the script to fit the scrollbar */} .hscrollerbarend{/*right image holder for horizontal scroll bar*/ background:url(../images/design/scroll/hscroller.png);height:11px;width:10px;} /* Following are OPTIONAL */ /*.vscrollerbase,.hscrollerbase{background-image:url(images/scroll/scrollbaseback.png);}*/ .hscrollerbasebeg{height:11px;background:url(../images/design/scroll/scrollbases.png) -22px 0px no-repeat;/* width is auto set to fill the base */} .hscrollerbaseend{height:11px;width:5px;background:url(../images/design/scroll/scrollbases.png) 0% 0% no-repeat;} .vscrollerbasebeg{width:11px;background:url(../images/design/scroll/scrollbases.png) 0px -5px no-repeat;/* height is auto set to fill the base */} .vscrollerbaseend{height:5px;width:11px;background:url(../images/design/scroll/scrollbases.png) 0px 0px no-repeat;} .scrollerjogbox{width:11px;height:11px;top:auto;left:auto;bottom:0px;right:0px;background:white url(../images/design/scroll/scrolljog.png) 50% 50%;} /* Scroll Bar Master Styling Ends Here */