/* ---------------------------------------------------------------- CORE STYLES */ /* --------------------------------------------------------------------- LAYOUT */ /* ------ BANNER ------ */ #hpBanner { height: 275px; } #hpBanner.hpBannerWithMenu { height: 350px; } #hpBanner.hpBannerWithSmallMenu { height: 250px; } /* ------ MODULES ------ */ .moduleContainer { padding: 0 24px 24px 24px; overflow: hidden; } .moduleGrid { float: left; width: 292px; height: 265px; padding: 10px 6px 25px 6px; } .moduleGridDouble { width: 596px; } .moduleGridTriple { width: 900px; } .moduleColumn { float: left; width: 292px; padding: 5px 6px 5px 6px; } .moduleTitle { padding-top: 10px; } .moduleContainer.nofixedHeight { height: auto; } /* ------ PROMO / RESOURCES ------ */ #hpPromo .moduleContainer { padding-bottom: 30px; } #hpResources .moduleContainer { padding-bottom: 0; } #hpPromo .moduleGrid, #hpResources .moduleGrid { height: auto; padding-top: 0; } /* --------------------------------------------------------------- PRESENTATION */ /* ------------------------------------------- */ /* ----------------- BANNER ------------------ */ /* ------------------------------------------- */ #hpBanner { position: relative; overflow: hidden; } .bannerItem { position: relative; width: 900px; height: 195px; padding: 40px 30px; background-repeat: no-repeat; } .imageRotator .bannerItem { position: absolute; top: 0; left: 0; } .bannerBtnPrev, .bannerBtnNext { position: absolute; top: 12px; right: 55px; width: 35px; height: 35px; background: url( /common/images/homepages/arrows_banner.png) no-repeat; cursor: pointer; } .bannerBtnNext { right: 18px; background-position: right 0; } /* ------ Teaser Text Banner ------ */ .teaserText .bannerTitleWrap, .teaserText h3, .teaserText .bannerReadMore { float: left; clear: both; } .teaserText .bannerTitleWrap { width: 292px; overflow: hidden; } .teaserText h2, .teaserText h3, .teaserText .bannerReadMore { padding: 6px; color: #fff; } .teaserText h2 { display: inline; font-size: 34px; font-weight: normal; line-height: 1.35em; margin: 0; } .teaserText h3 { width: 356px; background: url( /common/images/homepages/shad_black.png); margin: 0; padding-top: 10px; } .teaserText .bannerReadMore, .teaserText .bannerReadMore:hover { background: #fff; color: #ee3388; padding-top: 9px; padding-bottom: 9px; } .teaserText .bannerReadMore img { display: inline; margin: 0 10px 0 5px; vertical-align: baseline; } .ttRight .bannerTitleWrap, .ttRight h3, .ttRight .bannerReadMore { float: right; text-align: right; } .ttRight .bannerBtnPrev { right: auto; left: 18px; } .ttRight .bannerBtnNext { right: auto; left: 55px; } #background .teaserText .bannerReadMore { float: none; display: inline-block; } /* ------ Paragraph Text Banner ------ */ .paraText .bannerText { position: absolute; bottom: 0; left: 106px; width: 338px; background: url( /common/images/homepages/shad_black.png); padding: 15px; color: #fff; } .paraText .bannerText h2 { margin: 5px 0 10px 0; } #hpBanner .paraText ul { list-style: none; margin: 5px 0 0 0; } #hpBanner .paraText ul li { display: inline; padding: 0 10px; border-left: 1px solid #fff; margin: 0; } #hpBanner .paraText ul li:first-child { border: 0; padding-left: 0; } .ptRight .bannerText { left: 486px; } /* ------ Gallery Banner ------ */ .bannerGallery .bannerItem { height: 275px; padding: 0 30px; } .bannerGallery .bannerBtnPrev { right: 313px; } .bannerGallery .bannerBtnNext { right: 276px; } .bannerGallery .bannerTitleWrap, .bannerGallery .bannerReadMore { float: left; clear: both; } .bannerGallery .bannerTitleWrap { overflow: hidden; } .bannerGallery h2 { display: inline; font-size: 34px; font-weight: normal; line-height: 1.35em; color: #fff; padding: 6px; margin: 0; background: url( /common/images/homepages/shad_black.png); } .bannerGallery .bannerReadMore { padding: 6px; } .bannerGallery .bannerReadMore, .bannerGallery .bannerReadMore:hover { background: #fff; color: #ee3388; padding-top: 9px; padding-bottom: 9px; } .bannerGallery .bannerReadMore img { margin: 0 10px 0 5px; vertical-align: baseline; } .bannerThumbsWindow { position: absolute; top: 0; right: 0; width: 240px; height: 275px; padding: 0 12px 0 6px; background: url( /common/images/homepages/banner_thumbs_bg.gif) repeat-x; overflow: hidden; } .bannerThumbsContent { position: relative; float: left; width: 228px; margin-bottom: 20px; } #hpBanner .bannerThumbsContent ul { float: left; list-style: none; margin: 0; padding: 6px 0; } #hpBanner .bannerThumbsContent li { float: left; width: 64px; height: 63px; padding: 6px; background: url( /common/images/homepages/banner_thumb_shad.png) no-repeat center 9px; margin: 0; } .bannerThumbsContent li div { width: 55px; height: 55px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; overflow: hidden; padding: 4px; border-radius: 4px; } .imageRotator .bannerThumbsContent li div { cursor: pointer; } .bannerScrollBar { position: relative; float: right; width: 11px; height: 189px; top: 71px; } .bannerScrubBar, .bannerScrubBar div { width: 5px; } .bannerScrubBar, .bannerScrubBar:hover { position: absolute; display: block; padding: 0 3px; background: none; cursor: pointer; } .bannerScrubTop, .bannerScrubBtm { height: 3px; background: url( /common/images/homepages/banner_scrub.png) no-repeat; } .bannerScrubBtm { background-position: 0 bottom; } .bannerScrubMid { height: 50px; background: #b6b6b6; } .bannerThumbsWindow:hover .bannerScrubTop { background-position: right 0; } .bannerThumbsWindow:hover .bannerScrubBtm { background-position: right bottom; } .bannerThumbsWindow:hover .bannerScrubMid { background: #fff; } .bgLeft .bannerBtnPrev { right: 55px; } .bgLeft .bannerBtnNext { right: 18px; } .bgLeft .bannerItem { width: 642px; margin-left: 258px; } .bgLeft .bannerThumbsWindow { right: auto; left: 0; padding: 0 6px 0 12px; } .bgLeft .bannerThumbsContent { float: right; } .bgLeft .bannerScrollBar { float: left; } /* ------ Faculty / Management Banner ------ */ #content .facultyBanner, #facultyBannerMenu { height: 350px; } #content .facultyBanner .bannerItem { height: 270px; } .facultyBanner .bannerItem { width: 672px; padding-left: 258px; } #facultyBannerMenu { position: absolute; top: 0; left: 0; width: 246px; background: url( /common/images/homepages/shad_black.png); } #facultyBannerMenu ul { list-style: none; margin: 35px 0 0 30px; border-top: 1px solid #a0a0a0; } #facultyBannerMenu ul li { padding: 4px 10px; margin: 0; } #facultyBannerMenu ul li { border-bottom: 1px solid #a0a0a0; } #facultyBannerMenu ul li a { color: #fff; } #content .managementBanner, .managementBanner #facultyBannerMenu { height: 275px; } #content .managementBanner .bannerItem { height: 210px; padding-top: 25px; } #hpBanner .bannerMoreNews { display: inline-block; color: #fff; background-image: url( /common/images/homepages/arrow_white.png); background-position: right center; background-repeat: no-repeat; border-right-width: 15px; border-right-style: solid; padding-right: 15px; } /* ------------------------------------------- */ /* ----------------- PROMO ------------------- */ /* ------------------------------------------- */ #hpPromo { position: relative; } #hpPromo .moduleGrid { padding: 25px 6px 16px 6px; } #promoZigZag { position: absolute; bottom: 0; left: 0; width: 100%; height: 9px; background: url( /common/images/homepages/promo_zig_zag.png) repeat-x; } /* ------ */ #promoNotice, #promoNotice div { width: 58px; height: 58px; margin-left: 3px; } #promoNotice { position: relative; float: left; width: 58px; background: url( /common/images/homepages/promo_notice_bg.png) no-repeat; margin: 5px 15px 0 3px; text-align: center; } #promoNotice div { background: url( /common/images/homepages/notice_exclamation.gif) no-repeat center center; margin-left: 0; } /* ------ */ #promoText { float: left; width: 512px; } #promoText h3 { margin: 0 0 5px 0; } .promoReadMore, .promoReadMore:hover { padding: 0 15px 0 5px; color: #ee3388; background: transparent url( /common/images/homepages/arrow_pink.png) no-repeat right center; } /* ------ */ #promoCtaTop { height: 13px; background: url( /common/images/homepages/promo_cta_top.png) no-repeat; } #promoCtaMid { width: 262px; background: #fff; border-style: solid; border-width: 0 2px; padding: 0 20px 0 6px; overflow: hidden; } #promoCtaBtm { height: 13px; background: url( /common/images/homepages/promo_cta_btm.png) no-repeat; } #promoCtaIcon { float: left; width: 42px; height: 42px; background: url( /common/images/homepages/cta_countdown.gif) no-repeat center center; } #promoCtaText { float: right; width: 210px; } #promoCtaText h4 { font-size: 18px; font-weight: normal; margin: 5px 0; } /* ------------------------------------------- */ /* ----------------- TABS -------------------- */ /* ------------------------------------------- */ #moduleTabs, .rowTitle { float: left; width: 925px; background: url( /common/images/homepages/tab_bg.png) no-repeat center bottom; margin: 0 0 0 -24px; padding: 10px 0 0 35px; } #moduleTabs .tabTitle, .rowTitle div { display: block; float: left; background: url( /common/images/homepages/tab_separator.png) no-repeat right bottom; padding: 0 6px 0 0; margin: 0 0 0 -5px; } #moduleTabs h2, .rowTitle h2 { font-size: 18px; padding: 15px 14px 4px 20px; margin: 0; } .tabTitle h2 { cursor: pointer; } #moduleTabs .activeTab, .rowTitle div { background-image: url( /common/images/homepages/tab_active_right.png); } #moduleTabs .activeTab h2, .rowTitle h2 { background: url( /common/images/homepages/tab_active_left.png) no-repeat; } /* ------------------------------------------- */ /* ------------- ACCREDITATIONS -------------- */ /* ------------------------------------------- */ #hpModules .accreditations { padding-top: 10px; } #hpAccreditations ul, #hpModules .accreditations ul { list-style: none; margin: 0; text-align: left; } #hpAccreditations ul li, #hpModules .accreditations ul li { width: auto; padding: 0 25px 0 0; background: none; } #hpAccreditations ul *, #hpModules .accreditations ul * { vertical-align: middle; margin: 0; } #hpAccreditations ul li a, #hpAccreditations ul li a:hover, #hpModules .accreditations ul li a, #hpModules .accreditations ul li a:hover { background: none; } /* ------------------------------------------- */ /* --------------- RESOURCES ----------------- */ /* ------------------------------------------- */ #hpResources .modDownload ul { list-style: none; margin: 0; } #hpResources .modDownload li { display: block; float: left; width: 87px; padding: 0 10px 0 0; margin: 0; } #hpResources .modDownload .downloadImg { width: 42px; padding: 4px; background: #fff; margin: 0 0 5px 0; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #hpResources .modDownload .downloadType { font-size: 10px; line-height: 1; text-transform: uppercase; text-align: center; padding: 6px 0 0 0; } #hpResources .modDownload p { padding: 0; } /* ------ Management ------ */ #content .managementResources .moduleContainer { padding: 0 18px 10px 30px; } #content .managementResources .moduleGrid { width: 205px; height: 165px; padding: 0 10px 0 0; border-right: 1px solid #dbdbdb; margin-right: 12px; } #content .managementResources .moduleLast { border: 0; } .managementResources .moduleGrid img { float: left; margin-right: 15px; } #hpResources ul { list-style: none; margin: 0; } #hpResources .socialMedia ul li { display: inline; margin: 0; padding-right: 3px; } .socialMedia a, .socialMedia a:hover { background: none; } #hpResources .socialMedia ul li img { float: none; margin: 0; } /* ------ */ #facultyTitle { margin: 0; } /* ----------------------------------------------------- PRESENTATION - MODULES */ /* ------------------------------------------- */ /* --------------- UNIVERSAL ----------------- */ /* ------------------------------------------- */ /* ------ H5 ------ */ #hpModules h5, #hpResources h5 { font: 13px/16px "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", "Malayalam", Optima, Geneva, Arial, sans-serif; font-weight: normal; margin: 0 0 5px 0; } /* ------ MENU ------ */ #hpModules ul { position: relative; list-style: none; margin: 0; } #content #hpModules li { margin-left: 0; } #hpModules li { display: inline-block; width: 272px; padding: 0 6px 5px 15px; background: url( /common/images/homepages/arrow_gray.gif) no-repeat 0 5px; vertical-align: top; } #hpModules .moduleGridDouble .modMenu ul { width: 608px; } #hpModules .moduleGridTriple .modMenu ul { width: 912px; } #hpModules .menuLarge li { font: 18px/22px "Myriad Pro", "Myriad Web", "Apple Myriad", "Adobe Myriad", "Trebuchet MS", Trebuchet, sans-serif; padding-bottom: 10px; } /* ------ DATE BOX ------ */ .dateBox { float: left; width: 45px; color: #fff; text-transform: uppercase; text-align: center; line-height: 1.0em; padding-right: 10px; } .dateBoxDay { background: #76a26f; font-size: 24px; padding: 12px 0 9px 0; letter-spacing: -0.05em; } .dateBoxMonth { background: #484848; font-size: 10px; padding: 6px 0 4px 0; } .dateImage { position: relative; display: inline-block; } .dateImage .dateBox { position: absolute; top: 0; left: 0; } /* ------ TOOLTIP ------ */ .toolTip { width: 110px; margin-left: -55px; background: #fff; border: 2px solid #7f7f7f; z-index: 500; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); } .toolTip div { position: relative; padding: 4px 6px; } .toolTip p { padding: 0; font-size: 12px; line-height: 18px; } .toolTip div div, .toolTip .datavis_hover { position: absolute; left: 50%; padding: 0; } .toolTip div div { bottom: -11px; margin-left: -5px; width: 9px; height: 11px; background: url( /common/images/homepages/arrow_tooltip.png) no-repeat; } .toolTip .datavis_hover { bottom: -27px; margin-left: -7px; width: 14px; height: 14px; background: url( /common/images/homepages/datavis_hover.png) no-repeat; cursor: pointer; } /* ------------------------------------------- */ /* ----------------- TEXT -------------------- */ /* ------------------------------------------- */ .modText img { margin-bottom: 13px; } .moduleGridDouble .modText img, .moduleGridTriple .modText img { float: left; margin-right: 15px; } /* ------ */ .modText .videoThumb { position: relative; } .modText a.videoLightbox { position: absolute; top: 0; left: 0; width: 216px; height: 122px; background: url("/common/images/flowplayer/splash-play-button-wide.png") no-repeat center 31px; } .modText a.videoLightbox:hover { background-position: center -69px; } /* ------ */ .modText blockquote { position: relative; color: #444; margin: 0; } .modText blockquote p { display: inline; padding: 0 25px; } .modText .quote { position: absolute; top: -8px; left: 0; font-size: 40px; margin-right: 15px; padding-top: 18px; } .modText .quoteClose { top: auto; right: 0; bottom: -10px; left: auto; } /* ------------------------------------------- */ /* ----------------- INTRO ------------------- */ /* ------------------------------------------- */ #hpModules .modIntro ul, #hpModules .modEvents ul, #facultyModules .modIntro ul { list-style: none; margin: 0 0 0 -6px; width: 304px; } #hpModules .modIntro ul li, #hpModules .modEvents ul li, #facultyModules .modIntro ul li { float: left; width: 292px; margin: 0 0 15px 0; overflow: hidden; padding: 0 6px; background: none; } .modIntro ul li h5, .modEvents ul li h5 { margin: 0 0 5px 0; font-weight: normal; } .modIntro p, .modEvents p { padding: 0; } .modIntro img { float: left; margin-right: 12px; } #hpModules .moduleGridDouble .modIntro ul, #hpModules .moduleGridTriple .modEvents ul { width: 608px; } #hpModules .moduleGridTriple .modIntro ul { width: 912px; } .introLeading h5, .introLeading p { font: 18px/22px "Myriad Pro", "Myriad Web", "Apple Myriad", "Adobe Myriad", "Trebuchet MS", Trebuchet, sans-serif; } .modIntro .introLeading img { float: none; } /* ------ */ #hpModules .introFullWidth ul, #hpModules .introFullWidth ul li { display: block; float: none; width: auto; } /* ------------------------------------------- */ /* --------------- DATA VIS ------------------ */ /* ------------------------------------------- */ .modData img, .modData table { margin-bottom: 13px; } .dataDesc { font-size: 11px; font-style: italic; } /* ------ LINE GRAPH ------ */ .modData area:hover { position: relative; z-index: 501; cursor: pointer; } /* ------ PIE CHART ------ */ /* ------ TABLE ------ */ .modData table { width: 260px; } .modData table td { padding: 4px 10px; } .modData tbody tr:nth-child(odd) td { background: #f5f5f5; } .modData tbody .oddRow td { background: #f5f5f5; } .modData table .cellRight { width: 35px; text-align: right; border-left: 1px solid #7f7f7f; } .modData thead td { font-weight: bold; } .modData .tableHighlight td { color: #fff; } /* ------------------------------------------- */ /* ---------------- GALLERY ------------------ */ /* ------------------------------------------- */ .galleryWrap, .galleryItem { width: 216px; height: 145px; } .galleryWrap { position: relative; overflow: hidden; margin-bottom: 15px; background: #5c5c5c; font-size: 0; -webkit-text-size-adjust: none; } .imageRotator .galleryWrap { overflow: visible; } .galleryWrap .galleryItem { top: 0; left: 0; text-align: center; } .imageRotator .galleryItem { position: absolute; overflow: hidden; } .galleryWrap .galleryItem span { display: inline-block; width: 0; height: 100%; } .galleryItem span, .galleryItem img { vertical-align: middle; } .galleryCount { padding: 0; } .galleryBtnPrev, .galleryBtnNext { position: absolute; top: 50%; left: -14px; width: 27px; height: 27px; margin-top: -13px; background: url( /common/images/homepages/arrows_gallery.png) no-repeat; cursor: pointer; } .galleryBtnNext { left: auto; right: -14px; background-position: right 0; } /* ------ */ .galleryLeft, .dataLeft { float: left; width: 216px; } .galleryRight, .dataRight { float: right; width: 366px; } .moduleGridTriple .galleryRight, .moduleGridTriple .dataRight { width: 668px; } #hpModules .moduleGridTriple .galleryRight ul { list-style: none; margin: -4px 0 0 -4px; overflow: hidden; } #hpModules .moduleGridTriple .galleryRight ul li { float: left; width: 64px; height: 63px; margin: 0; padding: 0 12px 12px 0; background: none; } .moduleGridTriple .galleryRight ul li div { width: 55px; height: 55px; text-indent: -9999px; overflow: hidden; padding: 4px; background-repeat: no-repeat; background-position: center center; border-radius: 4px; } .imageRotator .galleryRight ul li div { cursor: pointer; } /* ------------------------------------------- */ /* ---------------- EVENTS ------------------- */ /* ------------------------------------------- */ .calendarBg { float: left; width: 224px; height: 195px; background: url( /common/images/homepages/calendar_bg.png) no-repeat; padding: 10px 15px; } .eventsLeft { float: left; width: 254px; } .eventsRight { float: right; width: 292px; } .moduleGridTriple .eventsRight { width: 596px; } /* ------ FULL CALENDAR ------ */ #hpModules .fc table { border-collapse: collapse; font-size: 10px; text-align: center; } #hpModules .fc-header { margin: 0 0 5px 0; } #hpModules .fc-content, #hpModules .fc-content th, #hpModules .fc-content td { border: 0; } #hpModules .fc-header-title { font-size: 18px; margin: 0; } #hpModules .fc-button-today { display: none; } #hpModules .fc-content th { font-weight: normal; text-transform: uppercase; padding: 0 0 10px 0; } #hpModules .fc-day-number { float: none; } #hpModules .fc-content .fc-state-highlight { background: none; } #hpModules .fc-state-default, #hpModules .fc-state-default * { margin: 0; padding: 0; border: 0; background: none; opacity: 1; } #hpModules .fc-state-default a { display: block; width: 17px; height: 17px; background-image: url( /common/images/homepages/arrows_calendar.png); background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; margin: 2px 5px; } #hpModules .fc-button-next a { background-position: right 0; } #hpModules .fc-event, #hpModules .fc-event a { border: 0; background: none; padding: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .fc-grid .fc-other-month .fc-day-number { color: #aaa; } /* ------ */ #facultyTitle { margin: 0; } #facultyTitle a {color: #fff;} #clearingInternal { display: none; } /* ----------------------------------------------------------------- SITE SPECIFIC COLOURS */ /* Faculty h6 strapline at bottom of page */ #facultyTitle { margin: 0px; padding-left: 30px; height: 42px; background: url(/common/images/style/sectionTitle_bg.png) repeat-x #BC0A80; font-weight: 200; font-size: 21px; line-height: 42px; } /* Colour for site */ #sectionTitle, .teaserText h2, .dateBoxDay, #hpModules .modData .tableHighlight td, #hpModules .fc-event a, .bannerThumbsContent li.active div, .moduleGridTriple ul li.active div { background-color: #82569B; } #content h3 a, #content h3 a:hover { color: #82569B; } .moduleGrid h3, h2, #promoCtaText span, .toolTip, .modText .quote { color: #82569B; } #hpPromo, #hpResources { background-color: #FAF8FB; padding-top: 21px; } /* Heading and link in the semi transparent banner box */ .paraText h2, .paraText a { color: #D7C9DF; } #promoCtaMid { border-color: #82569B; } /* ----------------------------------------------------------------- SITE SPECIFIC IMAGE POSITIONING */ #promoZigZag { background-position: 0 -207px; } #promoNotice { background-position: right -1334px; } #promoCtaTop, #promoCtaBtm { background-position: 0 -299px; } #hpModules .fc-state-default a { background-position: 0 -391px; } #hpModules .fc-button-next a { background-position: right -391px; }