/* Title: Betty and Milton Katz JCC of Cherry Hill, NJ Style: General stylesheet Author: Tome Wilson - tome@creativewebgroup.net Last Updated: December 20, 2011 */ /* ---[ css reset ]--------------------- */ 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, .rss_box {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1.55em; /* 12x1.55=18.6px */ font-family: inherit; vertical-align: baseline} :focus {outline: 0} body {line-height: 1; color: #000} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse; border-spacing: 0} caption, th, td {text-align: left; font-weight: normal; padding: 6px; font-size: 12px} em, .em {font-style: italic} strong, .strong {font-weight: bold} .big {font-size: 110%} .small {font-size: 75%} .l {float: left} .r {float: right} .clear {clear: both; font-size: 0; line-height: 0} .center {text-align: center} .none {padding: 0; border: 0 !Important} /* ---[ link styles ]--------------------- */ a {color: #666; text-decoration: none} a:link {color: #666} a:visited {color: #666} a:hover {text-decoration: underline} /* ---[ structure ]--------------------- */ html, body {background: #f2f7fa url(images/shell/background.png) repeat-x; height: 100%; min-width: 760px; text-align: center; color: #666; font: normal 0.82em/1em Arial, Helvetica, sans-serif} #center-on-page {width: auto; text-align: center} #container {margin: 0 auto; width: 760px; overflow: hidden} #header {height: 100px; width: 760px; display: block; margin-bottom: 15px} #logo, #photos {float: left} #logo {margin-right: 6px} #main-area {text-align: left; width: 790px; padding: 0 0 20px 0} /* ---[ left side ]--------------------- */ #left-side {width: 190px; display: block; float: left; margin-right: 10px; text-align: left; font: normal 12px/1em Arial, Helvetica, sans-serif} /* ---[ link styles ]--------------------- */ #left-side a {color: #000; text-decoration: none; display: block; padding: 2px 3px} #left-side a:visited {color: #000} #left-side a:hover {color: #00b1eb; background: #f2f7fa} #left-side h3 {width: 190px; height: 24px; display: block; text-indent: -9999px; cursor: pointer; padding: 0 !IMPORTANT} #left-side ul {width: 179px; padding: 6px 1px 6px 10px; display: block; list-style-type: none} #left-side li {padding-left: 12px} #left-side span {width: 190px; height: 23px; display: block; margin-bottom: 10px; cursor: pointer} #left-side .fader, #hours-page .fader {opacity: 0; display: none} #left-side #nav_top-navigation {display: none} #left-side #nav_register-online h3 {background: transparent url(images/shell/left-navigation/register-online_top.png); margin-top: 0; cursor: auto} #left-side #nav_register-online ul {background: transparent url(images/shell/left-navigation/register-online_background.gif)} #left-side #nav_register-online li {background: transparent url(images/icons/bullet-blue.gif) 0 8px no-repeat} #left-side #nav_register-online .more {background: transparent url(images/icons/more-blue.png) 152px 6px no-repeat} #left-side #nav_register-online .more:hover {background: #f2f7fa url(images/icons/more-blue.png) 154px 6px no-repeat} #left-side #nav_register-online span {background: transparent url(images/shell/left-navigation/register-online_bottom.png); cursor: auto} /* ---[ "register online" flyout menus ]--------------------- */ #left-side #nav_register-online ul li:hover {position: relative} #left-side #nav_register-online ul ul {display: none; width: 200px; position: absolute; left: 179px; top: -3px; padding: 0; z-index: 100} #left-side #nav_register-online ul li:hover ul {display: block; border: 1px solid #177474; background-color: #fff; background-image: none} #left-side #nav_register-online ul ul li {width: 188px; float: left; display: inline; background-image: none; padding-left: 0} #left-side #nav_register-online ul ul li:hover {} #left-side #nav_register-online ul ul a {width: 194px; padding: 5px 0 5px 6px} #left-side #nav_register-online li:hover ul li ul {display: none} #left-side #nav_register-online ul ul li ul {left: 200px; top: -1px} #left-side #nav_register-online ul ul li:hover ul {display: block} #left-side #nav_register-online li:hover, #nav_register-online li.hover {position: static} #left-side #nav_explore-the-jcc h3 {background: transparent url(images/shell/left-navigation/explore-the-jcc_top.png); cursor: auto} #left-side #nav_explore-the-jcc ul {background: transparent url(images/shell/left-navigation/explore-the-jcc_background.gif)} #left-side #nav_explore-the-jcc li {background: transparent url(images/icons/bullet-teal.gif) 0 6px no-repeat} #left-side #nav_explore-the-jcc .more {background: transparent url(images/icons/more-teal.png) 152px 6px no-repeat} #left-side #nav_explore-the-jcc .more:hover {background: #f2f7fa url(images/icons/more-teal.png) 154px 6px no-repeat} #left-side #nav_explore-the-jcc span {background: transparent url(images/shell/left-navigation/explore-the-jcc_bottom.png); cursor: auto} /* ---[ "explore the jcc" flyout menus ]--------------------- */ #left-side #nav_explore-the-jcc ul li:hover {position: relative} #left-side #nav_explore-the-jcc ul ul {display: none; width: 200px; position: absolute; left: 179px; top: -3px; padding: 0; z-index: 100} #left-side #nav_explore-the-jcc ul li:hover ul {display: block; border: 1px solid #177474; background-color: #fff; background-image: none} #left-side #nav_explore-the-jcc ul ul li {width: 188px; float: left; display: inline; background-image: none; padding-left: 0} #left-side #nav_explore-the-jcc ul ul li:hover {} #left-side #nav_explore-the-jcc ul ul a {width: 194px; padding: 5px 0 5px 6px} #left-side #nav_explore-the-jcc li:hover ul li ul {display: none} #left-side #nav_explore-the-jcc ul ul li ul {left: 200px; top: -1px} #left-side #nav_explore-the-jcc ul ul li:hover ul {display: block} #left-side #nav_explore-the-jcc li:hover, #nav_explore-the-jcc li.hover {position: static} #left-side #nav_hours-and-schedules h3 {background: transparent url(images/shell/left-navigation/hours-and-schedules_top.png)} #left-side #nav_hours-and-schedules h4 {color: #9acc02; font-size: 15px; font-weight: 800; padding: 10px 0 0 10px; background: transparent url(images/shell/left-navigation/hours-and-schedules_background.gif)} #left-side #nav_hours-and-schedules ul {background: transparent url(images/shell/left-navigation/hours-and-schedules_background.gif)} #left-side #nav_hours-and-schedules li {background: transparent url(images/icons/bullet-green.gif) 0 6px no-repeat} #left-side #nav_hours-and-schedules span {background: transparent url(images/shell/left-navigation/hours-and-schedules_bottom.png)} #left-side #nav_jcc-publications h3 {background: transparent url(images/shell/left-navigation/jcc-publications_top.png)} #left-side #nav_jcc-publications ul {background: transparent url(images/shell/left-navigation/jcc-publications_background.gif)} #left-side #nav_jcc-publications li {background: transparent url(images/icons/bullet-yellow.gif) 0 6px no-repeat} #left-side #nav_jcc-publications span {background: transparent url(images/shell/left-navigation/jcc-publications_bottom.png)} #left-side #nav_facility-rental-and-catering h3 {background: transparent url(images/shell/left-navigation/facility-rental-and-catering_top.png)} #left-side #nav_facility-rental-and-catering ul {background: transparent url(images/shell/left-navigation/facility-rental-and-catering_background.gif)} #left-side #nav_facility-rental-and-catering li {background: transparent url(images/icons/bullet-orange.gif) 0 6px no-repeat} #left-side #nav_facility-rental-and-catering span {background: transparent url(images/shell/left-navigation/facility-rental-and-catering_bottom.png)} #left-side #nav_information-and-links h3 {background: transparent url(images/shell/left-navigation/information-and-links_top.png)} #left-side #nav_information-and-links ul {background: transparent url(images/shell/left-navigation/information-and-links_background.gif)} #left-side #nav_information-and-links li {background: transparent url(images/icons/bullet-pink.gif) 0 6px no-repeat} #left-side #nav_information-and-links span {background: transparent url(images/shell/left-navigation/information-and-links_bottom.png)} /* ---[ social networks ]--------------------- */ #social-networks {width: 190px; height: 58px; display: block; margin: 10px 0} #social-networks a.facebook, #social-networks a.youtube, #social-networks a.twitter {float: left; display: block; height: 58px; width: 58px; text-indent: -999999px; background: transparent url(images/shell/left-navigation/social-networks.png) no-repeat; padding: 0} #social-networks a.facebook {background-position: 0 0} #social-networks a.facebook:hover {background-position: 0 -58px} #social-networks a.twitter {background-position: -65px 0; margin: 0 8px 0 7px} #social-networks a.twitter:hover {background-position: -65px -58px} #social-networks a.youtube {background-position: -132px 0} #social-networks a.youtube:hover {background-position: -132px -58px} /* ---[ right side ]--------------------- */ #right-side {width: 562px; float: left; font-size: 0 /* font-size removes extra space between divs in IE */} #top-navigation {width: 560px; height: 30px} .top-navigation {width: 560px; height: 30px; background: url(images/shell/top-navigation.png) no-repeat; position: absolute} .top-navigation li {display: inline} .top-navigation li a:link, .top-navigation li a:visited {position: absolute; top: 0; height: 30px; text-indent: -9000px; overflow: hidden} .top-navigation .home a:link, .top-navigation .home a:visited {left: 0px; width: 71px} .top-navigation .home a:hover, .top-navigation .home a:focus {background: url(images/shell/top-navigation.png) no-repeat 0px -30px} .top-navigation .home a:active {background: url(images/shell/top-navigation.png) no-repeat 0px -60px} .top-navigation .support a:link, .top-navigation .support a:visited {left: 71px; width: 75px} .top-navigation .support a:hover, .top-navigation .support a:focus {background: url(images/shell/top-navigation.png) no-repeat -71px -30px} .top-navigation .support a:active {background: url(images/shell/top-navigation.png) no-repeat -71px -60px} .top-navigation .contact-us a:link, .top-navigation .contact-us a:visited {left: 146px; width: 94px} .top-navigation .contact-us a:hover, .top-navigation .contact-us a:focus {background: url(images/shell/top-navigation.png) no-repeat -146px -30px} .top-navigation .contact-us a:active {background: url(images/shell/top-navigation.png) no-repeat -146px -60px} .top-navigation .membership a:link, .top-navigation .membership a:visited {left: 240px; width: 100px} .top-navigation .membership a:hover, .top-navigation .membership a:focus {background: url(images/shell/top-navigation.png) no-repeat -240px -30px} .top-navigation .membership a:active {background: url(images/shell/top-navigation.png) no-repeat -240px -60px} .top-navigation .my-account a:link, .top-navigation .my-account a:visited {left: 340px; width: 100px} .top-navigation .my-account a:hover, .top-navigation .my-account a:focus {background: url(images/shell/top-navigation.png) no-repeat -340px -30px} .top-navigation .my-account a:active {background: url(images/shell/top-navigation.png) no-repeat -340px -60px} .top-navigation .shopping-cart a:link, .top-navigation .shopping-cart a:visited {left: 440px; width: 120px} .top-navigation .shopping-cart a:hover, .top-navigation .shopping-cart a:focus {background: url(images/shell/top-navigation.png) no-repeat -440px -30px} .top-navigation .shopping-cart a:active {background: url(images/shell/top-navigation.png) no-repeat -440px -60px} /* ---[ search bar ]--------------------- */ #search-bar {width: 560px; height: 30px; margin-top: 10px; padding: 0; background: #f2f7fa url(images/shell/search-bar.png) no-repeat} #search-bar .interest {margin: 8px 6px 0 89px; height: 14px; width: 226px; background: #fff; border: 0; font-size: 11px; float: left} #search-bar .age {margin: 7px 6px 0 19px; height: 14px; width: 84px; background: #fff; border: 0; font-size: 11px; float: left} #search-bar .keyword {margin: 7px 6px 0 21px; height: 14px; width: 57px; background: #fff; border: 0; font-size: 11px; float: left} #search-bar .search-button {width: 42px; height: 30px; border: 0; cursor: pointer; float: left} /* ---[ homepage ]--------------------- */ /* ---[ homepage-events ]--------------------- */ #homepage-events img {padding: 9px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #9acc02; width: 540px; height: 100px; background: #fff; margin: 10px 0} #homepage-events a {display: none} #homepage-events a:first-child {display: block} #homepage-photo {float: left; margin-right: 10px} /* ---[ tumblr ]--------------------- */ #tumblr {padding: 9px 9px 0 9px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #f90; width: 350px; background: #fff; float: left} #tumblr p {padding: .4em 0} #tumblr ul, #tumblr ol {padding: 0; margin: 0; list-style-type: none; text-align: left} #tumblr li {padding: 0; margin: 0} #tumblr a {color: #e71884; text-decoration: none} #tumblr a:visited {color: #e71884} #tumblr a:hover {color: #e71884; text-decoration: underline} #tumblr h1 {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #0075c3; padding: 0 0 .15em 0; margin: 0; text-align: left} #tumblr h2 {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #e71884; padding: .15em 0; text-align: left} #tumblr h3 {font: normal 18px/1.25em Arial, Helvetica, sans-serif; color: #0075c3; padding: .15em 0; text-align: left} #tumblr .tumblr_title {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #f90; padding: 0 0 .15em 0; margin: 0; text-align: left; list-style-type: none} /* ---[ what's hot blocks ]--------------------- */ .whats-hot {display: block; width: 158px; height: 148px; float: left; padding: 11px; background: transparent url(images/homepage/whats-hot/background.png) no-repeat; font: normal 11px/1.35em Arial, Helvetica, sans-serif} .whats-hot img {padding-bottom: 6px} /* ---[ constant contact sign up ]--------------------- */ #enewsletter {width: 560px; height: 30px; margin-top: 10px; padding: 0; background: #f2f7fa url(images/shell/enewsletter.png) no-repeat} #enewsletter .form {margin: 7px 6px 0 327px; height: 14px; width: 181px; border: 0; background: #fff; font-size: 11px; float: left} #enewsletter .submit-button {margin: 0; height: 30px; width: 44px; border: 0; cursor: pointer; float: left} /* ---[ hours ]--------------------- */ .toggle_holiday {padding: .25em .5em; margin-top: 1em; background: #0075c3; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_holiday:hover {background: #3391cf} .toggle_membership-services {padding: .25em .5em; margin-top: 1em; background: #177474; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_membership-services:hover {background: #459090} .toggle_health-and-wellness {padding: .25em .5em; margin-top: 1em; background: #9acc02; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_health-and-wellness:hover {background: #aed635} .toggle_babysitting {padding: .25em .5em; margin-top: 1em; background: #cc0; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_babysitting:hover {background: #d6d633} .toggle_teen-and-family-complex {padding: .25em .5em; margin-top: 1em; background: #f90; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_teen-and-family-complex:hover {background: #ffad33} .toggle_activezone {padding: .25em .5em; margin-top: 1em; background: #e71884; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_activezone:hover {background: #ec469d} .toggle_imaginarium {padding: .25em .5em; margin-top: 1em; background: #0075c3; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_imaginarium:hover {background: #3391cf} .toggle_playground {padding: .25em .5em; margin-top: 1em; background: #177474; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_playground:hover {background: #459090} .toggle_library {padding: .25em .5em; margin-top: 1em; background: #9acc02; color: #fff; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer} .toggle_library:hover {background: #aed635} /* ---[ sponsors ]--------------------- */ #big-sponsor, #big-sponsor2, #big-sponsor3 {margin-top: 10px; height: 71px; width: 560px; padding: 10px; background: #f2f7fa url(images/sponsors/big-sponsor-background.png) no-repeat} #small-sponsors {margin-top: 10px} #small-sponsor1, #small-sponsor2, #small-sponsor3, #small-sponsor4, #small-sponsor5, #small-sponsor6, #small-sponsor7, #small-sponsor8 {float: left; height: 71px; width: 255px; padding: 10px; background: #f2f7fa url(images/sponsors/small-sponsor-background.png) no-repeat} #small-sponsor1, #small-sponsor3, #small-sponsor5, #small-sponsor7 {margin: 0 10px 0 0} #small-sponsor3, #small-sponsor4, #small-sponsor5, #small-sponsor6, #small-sponsor7, #small-sponsor8 {margin-top: 10px} /* ---[ calendar ]--------------------- */ .calendar-label {background: #0075c3; color: #fff; border: 1px solid #fff; padding: 2px 6px; font-weight: 800; font-size: 14px} .calendar-day {color: #fff; border: 1px solid #fff; letter-spacing: 1px; text-align: center; font-weight: 800; font-size: 11px; width: 20%} .calendar-time {border: 2px solid #fff; background: #f3f3f3; text-align: center; font-size: 11px} /* ---[ content styles ]--------------------- */ .content-middle {background: transparent url(images/shell/content-background.png) repeat-y; padding: 0 10px; font: normal 12px/1em Arial, Helvetica, sans-serif; text-align: left} .content-middle a {color: #e71884} .content-middle a:hover {color: #e71884; text-decoration: underline} .content-middle ul {padding: .35em 0 .35em 1em; line-height: 1.35em; list-style-type: none; text-align: left; font-size: 13px} .content-middle li {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-green.gif) 0 .9em no-repeat} /* ---[ list colors ]--------------------- */ .blue-bullet {background: url(images/icons/bullet-blue.gif) 0 .9em no-repeat !important} .orange-bullet {background: url(images/icons/bullet-orange.gif) 0 .9em no-repeat !important} .pink-bullet {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-pink.gif) 0 .9em no-repeat !important} .purple-bullet {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-purple.gif) 0 .9em no-repeat !important} .teal-bullet {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-teal.gif) 0 .9em no-repeat !important} .yellow-bullet {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-yellow.gif) 0 .9em no-repeat !important} p {padding: .35em 0; line-height: 1.5em; font-size: 13px} .pdf {background: #fff url(images/icons/pdf.gif) no-repeat top left; padding: 2px 0 2px 2em; margin: .35em 0 .35em .15em} .arrow {background: #fff url(images/icons/arrows.gif) no-repeat 0 .35em; padding-left: 1em} .arrows {background: #fff url(images/icons/arrows.gif) no-repeat 0 .8em; padding-left: 1em} .arrow-left {background: #fff url(images/icons/arrows-left.gif) no-repeat left .35em; padding-left: 1em} .arrow-right {background: #fff url(images/icons/arrows.gif) no-repeat right .35em; padding-right: 1em} .hr {border-bottom: 2px dotted #9acc02; margin: 10px 0; line-height: 1.5em; padding: 0} .hr-grey {border-bottom: 2px dotted #ccc; margin: 10px 0; line-height: 1.5em; padding: 0} .photoL {float: left; margin: 3px 10px 0 0} .photoR {float: right; margin: 3px 0 0 10px} .photoCaptionL {float: left; margin: 1em 8px 0 0; font-size: 75%; text-align: center} .photoCaptionR {float: right; margin: 1em 0 0 8px; font-size: 75%; text-align: center} .border {border: 1px solid #ccc} .dotted-border {border: 2px dotted #ccc} .dotted-box {border: 2px dotted #ccc; padding: 10px; background: #f9f9f9; margin: 10px 0} .column1, .column2 {width: 250px; display: block; float: left; margin-right: 10px} .column2 {margin-right: 0} .column-one, .column-two, .column-three {width: 180px; display: block; float: left; margin: 0 9px 9px 0; text-align: center} .column-three {margin-right: 0} /* ---[ buttons ]--------------------- */ .round-button, .round-button:visited {background: #9acc02 url(images/graphics/gradient.png) repeat-x; border: 2px solid #9acc02; display: block; color: #fff !IMPORTANT; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-align: center; font-size: 16px; font-weight: bold; line-height: 1; padding: 10px 20px; margin: 10px 0; text-decoration: none !IMPORTANT;} .round-button:hover {background: #0075c3 url(images/graphics/gradient.png) repeat-x; color: #fff; text-decoration: none; border: 2px solid #9acc02} /* ---[ colored boxes ]--------------------- */ .blue-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/blue-box-heading.png) repeat; width: 520px; padding: 6px 10px} .blue-box-top, .blue-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/blue-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0} .blue-box-top {margin-top: .35em; margin-bottom: -20px} .blue-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/blue-box-middle.png) repeat-y} .blue-box-bottom {background: url(images/shell/boxes/blue-box-bottom.png) no-repeat; margin-bottom: .35em} .green-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/green-box-heading.png) repeat; width: 520px; padding: 6px 10px} .green-box-top, .green-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/green-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0} .green-box-top {margin-top: .35em; margin-bottom: -20px} .green-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/green-box-middle.png) repeat-y} .green-box-bottom {background: url(images/shell/boxes/green-box-bottom.png) no-repeat; margin-bottom: .35em} .orange-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/orange-box-heading.png) repeat; width: 520px; padding: 6px 10px} .orange-box-top, .orange-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/orange-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0} .orange-box-top {margin-top: .35em; margin-bottom: -20px} .orange-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/orange-box-middle.png) repeat-y} .orange-box-bottom {background: url(images/shell/boxes/orange-box-bottom.png) no-repeat; margin-bottom: .35em} #subnav {margin: 10px 0} #subnav select {font-size: 12px; background: #f3f3f3; width: 100%; border: 1px solid #0075c3} #subnav option {margin: 5px; padding: 1px} /* ---[ colors ]--------------------- */ .black {color: #000 !Important} .blue {color: #0075c3 !Important} .green {color: #9acc02 !Important} .grey {color: #666 !Important} .orange {color: #f90 !Important} .pink {color: #e71884 !Important} .purple {color: #609 !Important} .teal {color: #177474 !Important} .white {color: #fff !Important} .yellow {color: #cc0 !Important} /* ---[ headings ]--------------------- */ h1 {font: normal 26px/1em Arial, Helvetica, sans-serif; color: #0075c3; padding: 0; text-align: left} h2 {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #e71884; padding: .15em 0; text-align: left} .h2 {padding: .25em .5em; margin-top: .5em; background: #9acc02; color: #fff} h3 {font: normal 18px/1.25em Arial, Helvetica, sans-serif; color: #0075c3; padding: .15em 0; text-align: left} h4 {font: bold 14px/1.25em Arial, Helvetica, sans-serif; color: #666; padding: .35em 0; text-align: left} /* ---[ search result links and rollovers ]--------------------- */ #class-links ul {list-style-type: none; margin: .35em 0 0 -10px; width: 530px} #class-links li {border-top: 2px dotted #9acc02; padding: 5px 0} #class-links li a {display: block; text-decoration: none; padding: 6px 6px 6px 58px} #class-links a em {font: normal 18px/1em Arial, Helvetica, sans-serif; color: #9acc02; padding: .15em 0; display: block} #class-links a span {font: normal 13px/1.25em Arial, Helvetica, sans-serif; display: block; color: #666} #class-links .normal {background: url(images/icons/class-circle.png) no-repeat 10px 13px} #class-links .normal a:hover {background: #ffc url(images/icons/class-circle2.png) no-repeat 10px 8px; text-decoration: none} #class-links .featured {background: url(images/icons/class-star.png) no-repeat 10px 13px} #class-links .featured a:hover {background: #ffc url(images/icons/class-star2.png) no-repeat 10px 8px; text-decoration: none} #results-navigation {margin: 0 0 10px 0; font-size: 13px; border-top: 2px dotted #9acc02; padding-top: 10px} #results-per-page {font-weight: bold; color: #0075c3; text-align: left} #results-per-page a {margin-right: 3px} #page-navigation {font-weight: bold; color: #e71884; text-align: right} #results-found {text-align: center} /* ---[ class/department pages ]--------------------- */ #program-description {border-top: 2px dotted #9acc02; border-bottom: 2px dotted #9acc02; margin: 10px 0; padding: 10px 0; display: block} #program-details {clear: both; font-size: 13px} #program-details .column1, #program-details .column2 {width: 235px; display: block; float: left; margin: .35em 10px 1em 0} #program-details .column2 {width: 265px; margin-right: 0} #program-related-items {clear: both} #program-buttons {border-top: 2px dotted #9acc02; margin-top: 15px; padding: 15px 0 5px 0; display: block} /* ---[ footer ]--------------------- */ #footer {display: block; border-top: 1px solid #9acc02; padding: 10px 0; background: #fff; font-weight: bold; clear: both} #footer li {display: inline} #footer a {color: #9acc02; text-decoration: none; padding: 0 6px} #footer a:hover {color: #f15d22}