/*===================================================================== * * Filename: main.css * Website: BioLab * Author: paste.com.au * Date Created: 30/03/2011 * Media: Screen * * Description * ----------- * Colours: * Background - * Link - * Font - * *=====================================================================*/ /* Layout styles index -> CSS reset */ /* =css reset --------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; list-style-type:none; } /* =fonts --------- */ @font-face { font-family: 'warugaki'; src: url('../fonts/warugaki.woff') format('woff'),url('../fonts/warugaki.otf') format("opentype"); } /* =defaults ------------ */ html { color: #545454; font: 0.95em/1.45em "museo-1","museo-2",serif; letter-spacing: 0.0651em; } section, aside, article, nav, header, footer, time { display: block; } a { text-decoration: none; color: #d61f34; } p { } h1 { font: 3.5em/1.2em warugaki; color: #e3003c; letter-spacing: 0.04em; } h1.title { padding-left: 12px; background: transparent url(../images/bottom-h1.gif) bottom left repeat-x; padding-bottom: 18px; overflow: hidden; } .primary h1.title:hover {color: #fac620;} .primary h1.title span { float: left;} h1.title span.lightning { background: transparent url(../images/header-bg.jpg) right top no-repeat; width: 75px; height: 52px;} h1.title span.lightning span { background: transparent url(../images/header-bg.jpg) right bottom no-repeat; width: 75px; height: 52px; opacity: 0; } h1.title:hover span.lightning span { opacity: 1; } h1.breakingNews { margin-top: -12px; padding-bottom: 23px; margin-bottom: 20px; padding-left: 18px; } h1.breakingNews { margin-top: -12px; } h1.homePageNews { padding-bottom: 22px; padding-left: 0px; margin-bottom: 27px; } h2 { font: 2em/1.2em warugaki; letter-spacing: 0.06em; } h3 { font: 2em/1.2em warugaki; letter-spacing: 0.06em; } h4 { font: 1.2em/1em warugaki; } .clear { font-size: 0px; line-height: 0px; clear: both; display: block; } .stretchableBackground { background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; background-clip: border-box; } .fadeEffect, a { -webkit-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), background 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), background 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), background 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), background 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */ -webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */ } input, select { outline: 0px; } .content.text p { margin-bottom: 14px; } a:hover {color: #fab900; } .action { cursor: pointer;} .action , #PageComments article time a { -webkit-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); } .action:hover , #PageComments article time a:hover {color: #f9c823 !important; -webkit-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000), color 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); } /* =layout ---------- */ .pageWrapper { max-width: 1210px; width: 67.222222222222222%; background-color: #f8fdff; margin: 0px auto; padding-bottom: 100px; } .pagePadding { padding: 0px 6.487603305785124%; } .pageContent { overflow: hidden; background: transparent url(../images/content-bot.gif) bottom left repeat-x; padding-bottom: 34px; position: relative; top: -6px; } .pageContent .content { float: left; width: 74.502369668246445%; } .secondary .pageContent .content { width: 69.924098671726755%; } .pageContent .sidebar { float: right; width: 22.085308056872038%; } .secondary .pageContent .sidebar { width: 25.616698292220114%; } .programs.secondary .pageContent .sidebar { width: 22.296015180265655%; } .pageContent .sidebar .widget { margin-bottom: 25px; } .pageContent .sidebar .widget h3.title { background: #cfcfcf url(../images/widget-title-bg.jpg) top no-repeat; background-size: 100% auto; -webkit-background-size: 100% auto; -khtml-background-size: 100% auto; -o-background-size: 100% auto; -moz-background-size: 100% auto; font-size: 1.3em; color: #FFF; padding-left: 45px; line-height: 45px; min-height: 45px; } .pageContent .sidebar .widget h3.title a { color: #FFF; } .pageContent .sidebar .widget h3.title a, .pageContent .sidebar .widget h3.title span { display: block; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); transform: rotate(1deg); } .pageContent .sidebar .widget h3.title img { max-width: 100%; } .pageContent .sidebar .whatIsBioLab img { max-width: 100%; } @media only screen and (max-width: 1750px) { .pageWrapper { width: 100%; } } @media only screen and (max-width: 1024px) { .pageContent { top: 0px; padding-top: 25px; } .pageContent .content, .secondary .pageContent .content { float: none; width: 100%; } .pageContent .calendarEvent, .pageContent .programPage, .pageContent .contactPage {float: none; width: 100%;} .pageContent .sidebar .programCategory { display: none; } .pageContent .sidebar, .secondary .pageContent .sidebar { width: 100%;float: none; padding: 10px 0px 0px 0px; } .pageContent .sidebar .widget { display: none; } .pageContent .sidebar .searchWidget { display: block; } .pageContent .sidebar .calendarWidget.widget { display: block; } } @media only screen and (max-device-width: 1024px) { .pageWrapper { width: 100%; } } @media only screen and (max-device-width: 480px) { .pageWrapper { max-width: 100%; width: 100%; } .pageContent .content { background: transparent url(../images/bottom-h1.gif) 12px left repeat-x; float: none; width: 100%; padding-top: 30px; } .pageContent .sidebar { width: 100%;float: none; padding: 10px 0px 0px 0px; } .pageContent .sidebar .widget { display: none; } .pageContent .sidebar .searchWidget { display: block; } } /* =header ---------- */ .mainHeader { clear: both; } .mainHeader .logo { margin-left: -3.886255924170616%; width: 44.834123222748815%; float: left; padding-top: 55px; position: relative; z-index: 10; } .mainHeader .logo img { max-width: 100%; } .mainHeader nav { position: relative; z-index: 10; } .mainHeader nav.dropdown { display: none; padding-top: 40px; } .mainHeader nav.dropdown select { -webkit-appearance: none; -webkit-box-shadow: 0px; -webkit-border-radius: 0px; } .mainHeader nav.dropdown #MenuDropdown { vertical-align:middle; font: 1.2em/1.4em warugaki; letter-spacing: 0.05em; color:#FFF; border:0; margin:0; float:none; width: 338px; padding: 86px 62px 23px 30px; background: url(../images/iphone-drop-down.png) no-repeat right top; } .mainHeader nav.dropdown { display: none; font: 2em/1.2em warugaki; color: #FFF; letter-spacing: 0.06em; float: right; } .mainHeader nav.dropdown .selectholder { background-image:url(../images/iphone-drop-down.png); height: 45px; padding: 91px 22px 24px 20px; } .mainHeader nav.dropdown .selectholder div { height: 45px; width: 295px; } .mainHeader nav.dropdown .selectholder span { display: block; height: 45px; line-height: 45px; padding: 0px 60px 0px 13px; position: relative; z-index: 4; cursor: pointer; } .mainHeader nav.dropdown .selectholder ul { background: #F1F1F1; color: black; font-size: 0.8em; width: 338px; margin-left: -20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; margin-top: 25px; } .mainHeader nav.dropdown .selectholder ul li { cursor: pointer; padding: 5px 10px; } .mainHeader nav.navigation { max-width: 608px; width: 57.744762808349146%%; float: right; line-height: 0px; margin-top: 8px; clear: right; margin-left: 3px; } .mainHeader nav.navigation ul { /*padding-right: 7.201522070015221%;*/ padding-left: 36px; clear: both; overflow: hidden; padding-top: 55px; position: relative; top: -50px; background-image: url(../images/nav.png); margin-left: -4px; } .mainHeader nav.navigation .top { width:265px; height: 130px; float: right; margin-right: -10.957377049180328%; background: transparent url(../images/nav-bg.jpg) top left no-repeat;background-size: auto 600%; -webkit-background-size: auto 600%; -khtml-background-size: auto 600%; -o-background-size: auto 600%; -moz-background-size: auto 600%; } .mainHeader nav.navigation .top .navSlide { position: absolute; background: transparent url(../images/nav-bg.jpg) top left no-repeat;background-size: auto 600%; -webkit-background-size: auto 600%; -khtml-background-size: auto 600%; -o-background-size: auto 600%; -moz-background-size: auto 600%; height: 130px; width: 265px; opacity: 0; } .mainHeader nav.navigation .top .navSlide.one { background-position: 0px -130px; } .mainHeader nav.navigation .top .navSlide.two { background-position: 0px -260px; } .mainHeader nav.navigation .top .navSlide.three { background-position: 0px -390px; } .mainHeader nav.navigation .top .navSlide.four { background-position: 0px -520px; } .mainHeader nav.navigation .top .navSlide.five { background-position: 0px -650px; } .mainHeader nav.navigation ul li { float: left; height: 67px; padding: 0px 4px 0px 2px; } .mainHeader nav.navigation ul .li1 { margin-top: 0px; } .mainHeader nav.navigation ul .li2 { margin-top: -2px; } .mainHeader nav.navigation ul .li3 { margin-top: -3px; } .mainHeader nav.navigation ul .li4 { margin-top: -5px; } .mainHeader nav.navigation ul .li5 { margin-top: -7px; } .mainHeader nav.navigation ul .li6 { margin-top: -8px; } .mainHeader nav.navigation ul a { color: #FFF; font: 300 1.35em/71px warugaki; letter-spacing: 0.15em; padding: 2px 7px; -webkit-border-radius: 10px;-moz-border-radius:10px; border-radius:10px; } .mainHeader nav.navigation ul.firefox { padding-right: 20px; padding-left: 40px; } .mainHeader nav.navigation ul.firefox a { font: 300 1.5em/71px warugaki; padding: 2px 5px; letter-spacing: 0.13em; } .mainHeader nav.navigation ul a:hover { color: #fac620; background-color:#e2003b ;} @media only screen and (max-width: 1250px) { .mainHeader nav.navigation ul li { padding: 0px 2px; } .mainHeader nav.navigation ul a { font-size: 1.4em; } } @media only screen and (max-width: 1150px) { .mainHeader nav.navigation ul li { padding: 0px 0px; } .mainHeader nav.navigation ul a { font-size: 1.3em; } } @media only screen and (max-width: 1024px) { .mainHeader { padding-bottom: 20px; } .mainHeader .logo { width: 58%; } .mainHeader nav.navigation { display: none; } .mainHeader nav.dropdown { display: block; } } @media only screen and (max-width: 850px) { .mainHeader .logo { width: 50%; } } @media only screen and (max-width: 740px) { .mainHeader nav.dropdown { width: 260px; } .mainHeader nav.dropdown .selectholder{ padding:76px 22px 17px 20px; } } @media only screen and (max-width: 560px) { .mainHeader nav.dropdown { width: 220px; } .mainHeader nav.dropdown .selectholder{ padding: 62px 22px 10px 20px; } } @media only screen and (max-width: 480px) { .mainHeader { padding-bottom: 0px; } .mainHeader .logo { padding-bottom: 0px; float: none; width: 100%; text-align: center; padding: 55px 0px 10px 0px; } .mainHeader nav.dropdown { float: none; width: 100%; margin: -67px auto 10px; } .mainHeader nav.dropdown .selectholder{ padding: 108px 22px 31px 20px; } } @media only screen and (max-width: 400px) { .mainHeader nav.dropdown { float: none; width: 100%; margin: -67px auto 10px; } .mainHeader nav.dropdown .selectholder{ padding: 91px 22px 24px 20px; } } @media only screen and (max-device-width: 1024px) { .mainHeader { padding-bottom: 0px; } .mainHeader .logo { margin-left: -3.886255924170616%; width: 44.834123222748815%; float: left; padding-top: 55px; } .mainHeader nav.navigation { display: none; } } @media only screen and (max-device-width: 480px) { .mainHeader { padding-bottom: 0px; } .mainHeader .logo { padding-bottom: 0px; float: none; width: 100%; text-align: center; padding: 55px 0px 10px 0px; } .mainHeader nav.dropdown { float: none; width: 338px; margin: -67px auto 10px; } .mainHeader nav.dropdown .selectholder{ padding: 108px 22px 31px 20px; } } /* =news slider --------------- */ #newsSlider { background: transparent url(../images/events.jpg) top right no-repeat; min-height: 90px; font-family: warugaki; position: relative; top: -33px; overflow: hidden; clear: both; } #newsSlider .slide-scroll { width: 100%; overflow: hidden; } #newsSlider .slide-scroll .inner { overflow:hidden; width: 90.04739336492891%; float: left; } #newsSlider .slide-scroll .inner ul li a:hover{ color: #fac620;} #newsSlider .slide-scroll ul { position: relative; } #newsSlider .slide-scroll li { float: left; width: 168px; margin-top: 16px; background: transparent url(../images/news-slide-item.png) right 12px no-repeat; padding: 0px 20px 0px 10px; } #newsSlider .slide-scroll li a { color: #FFF; text-decoration: none; font-weight: 300; } #newsSlider .slide-scroll li a time { font-size: 0.8em; line-height: 0.9em; padding: 5px 0px 0px 0px; } #newsSlider .slide-scroll li h3 { font-size: 1.4em; line-height: 1em; } #newsSlider .slide-scroll li a h3 { font-size: 1.25em; line-height: 1em; } #newsSlider .slide-scroll .prev { width: 3.606682464454976%; background: url(../images/prev.gif) top left no-repeat; cursor: pointer; float: left; height: 31px !important; margin-top: 32px; margin-left: 9px; } #newsSlider .slide-scroll .prev div.fadeEffect { background: url(../images/prev.gif) bottom left no-repeat; display: block; width: 100%; height: 100%; opacity: 0; } #newsSlider .slide-scroll .prev:hover div.fadeEffect { opacity: 1;} #newsSlider .slide-scroll .next { width: 2.085308056872038%; background: url(../images/next.gif) top left no-repeat; cursor: pointer; float: left; height: 31px !important; margin-top: 31px; margin-left: 0px; } #newsSlider .slide-scroll .next div.fadeEffect { background: url(../images/next.gif) bottom left no-repeat; display: block; width: 100%; height: 100%; opacity: 0; } #newsSlider .slide-scroll .next:hover div.fadeEffect { opacity: 1;} #newsSlider .newsLink { float: right; width: 38px; height: 90px; margin-top: -63px; text-indent: -99999px; overflow: hidden; -moz-transition-duration: 0ms, 0ms, 0ms; -webkit-transition-duration: 0ms, 0ms, 0ms;transition-duration: 0ms, 0ms, 0ms;} #newsSlider .newsLink:hover { background: url(../images/events-hover.jpg) left bottom no-repeat; } @media only screen and (max-width: 1024px) { #newsSlider { top: 0px; } #newsSlider .slide-scroll .inner { width: 80%; } #newsSlider .slide-scroll .next, #newsSlider .slide-scroll .prev { display: none; } #newsSlider .newsLink { margin-top: -77px;} } @media only screen and (max-width: 480px) { #newsSlider { top: 0px; } #newsSlider .slide-scroll .inner { width: 90%; } #newsSlider .slide-scroll li { width: 50%; } #newsSlider .slide-scroll .next, #newsSlider .slide-scroll .prev { display: none; } #newsSlider .newsLink { margin-top: -77px;} } @media only screen and (max-device-width: 480px) { #newsSlider { top: 0px; } #newsSlider .slide-scroll .inner { width: 90%; } #newsSlider .slide-scroll li { width: 50%; } #newsSlider .slide-scroll .next, #newsSlider .slide-scroll .prev { display: none; } #newsSlider .newsLink { margin-top: -77px;} } /* =pageSlider -------------- */ #pageSlider { } #pageSlider.noSlider { padding-bottom: 35px; } #pageSlider .slide-scroll { width: 100%; overflow: hidden; } #pageSlider .slide-scroll .inner { overflow:hidden; width: 100%; } #pageSlider .slide-scroll ul { position: relative; } #pageSlider .slide-scroll li { float: left; width: 100%; padding: 0px; } #pageSlider .slide-scroll li img { max-width: 100%; } #pageSlider .slide-scroll .prev { width: 4.071246819338422%; height: 32px; background: url(../images/prev-gray-hover.gif) left bottom no-repeat; cursor: pointer; margin-left: 91.603053435114504%; } #pageSlider .slide-scroll .prev div { width: 100%; height: 100%; background: url(../images/prev-gray-hover.gif) left top no-repeat; opacity: 0; } #pageSlider .slide-scroll .prev:hover div, #pageSlider .slide-scroll .prev:focus div { opacity: 1; } #pageSlider .slide-scroll .next { width: 4.071246819338422%; height: 32px; background: url(../images/next-gray-hover.gif) left bottom no-repeat; cursor: pointer; margin-left: 95.674300254452926%; margin-top: -32px; } #pageSlider .slide-scroll .next div { width: 100%; height: 100%; background: url(../images/next-gray-hover.gif) left top no-repeat; opacity: 0; } #pageSlider .slide-scroll .next:hover div, #pageSlider .slide-scroll .prev:focus div { opacity: 1; } @media only screen and (max-width: 1024px) { #pageSlider .slide-scroll li img { width: 100%; } } @media only screen and (max-width: 800px) { #pageSlider .slide-scroll li img { width: 100%; } #pageSlider .slide-scroll .next, #pageSlider .slide-scroll .prev {width:32px; height: 32px !important; } #pageSlider .slide-scroll .next { margin-top: -32px; } } @media only screen and (max-width: 680px) { #pageSlider .slide-scroll .next, #pageSlider .slide-scroll .prev { width:32px; height: 32px !important; } #pageSlider .slide-scroll .next { margin-top: -32px; } #pageSlider .slide-scroll .next { margin-top: -32px; margin-left: 93.674300254452926% !important;} #pageSlider .slide-scroll .prev{ margin-left: 88.603053435114504% !important; } } @media only screen and (max-width: 550px) { #pageSlider { display: none; } #pageSlider .slide-scroll .next, #pageSlider .slide-scroll .prev { width:32px; height: 32px !important; } #pageSlider .slide-scroll .next { margin-top: -32px; margin-left: 93.674300254452926% !important;} #pageSlider .slide-scroll .prev{ margin-left: 88.603053435114504% !important; } } @media only screen and (max-device-width: 1024px) { #pageSlider .slide-scroll li img { width: 100%; } } @media only screen and (max-width: 480px) { #pageSlider { display: none; } #pageSlider .slide-scroll .next, #pageSlider .slide-scroll .prev { width:32px; height: 32px !important; } #pageSlider .slide-scroll .next { margin-top: -32px; } #pageSlider .slide-scroll .next { margin-top: -32px; margin-left: 93.674300254452926% !important;} #pageSlider .slide-scroll .prev{ margin-left: 88.603053435114504% !important; } } @media only screen and (max-device-width: 480px) { #pageSlider { display: none; } #pageSlider .slide-scroll .next, #pageSlider .slide-scroll .prev { width:32px; height: 32px !important; } #pageSlider .slide-scroll .next { margin-top: -32px; } #pageSlider .slide-scroll .next { margin-top: -32px; margin-left: 93.674300254452926% !important;} #pageSlider .slide-scroll .prev{ margin-left: 88.603053435114504% !important; } } /* =news Holder --------------- */ .content.blog { padding-top: 5px; } .pageContent.BlogHolder .sidebar { padding-top: 18px; } .blog h1.title { background: url('../images/bottom-h1-grey.gif') left bottom repeat-x; color: #999999; font-size: 3.6em; padding-bottom: 20px; padding-left: 15px; margin-bottom: 27px; } .blog h1.title span { background: url('../images/event-list-h1-bg.jpg') right top no-repeat; padding-right: 91px; letter-spacing: 0.1em; } .blog h1.title:hover {color: #999999;} .newsHolder { overflow: hidden; width: 103%;} .newsHolder article { background: transparent url(../images/yellow-dots.png) left bottom repeat-x; margin-bottom: 18px; } .newsHolder .newsLeft { width: 47.60%; float: left; } .newsHolder .newsRight { width: 47.60%; float: right; } .newsHolder .homeNewsItem {overflow: hidden; margin-bottom: 13px; min-height: 230px; width: 46.40%; float: left; padding-right: 3.6%; } .newsHolder .homeNewsItem .newsContent { overflow: hidden; } .blog .newsHolder { width: 103%; } .newsHolder .homeNewsItem.newsPage { width: 46.40%; float: left; padding-right: 3.6%; } .newsHolder .homeNewsItem.even { float: right; } .newsHolder .homeNewsItem.even.newsPage { float: left; } .newsHolder .homeNewsItem:hover { cursor: pointer; } .newsHolder .homeNewsItem:hover h3 a { color: #fac620; } .newsHolder section.odd { } .newsHolder article .stage { padding-bottom: 13px; padding-top: 7px; } .newsHolder article .endImgHolder { float: right; } .newsHolder article .endImg { width: 11.497326203208556%; float: right; max-width: 50px; clear:both; width: 50px; height: 32px; margin-top: -16px; background: url(../images/news-lightning.png) top left no-repeat; } .newsHolder article .endImgHolder .endImg { right: auto; } .newsHolder article .endImg span {background: url(../images/news-lightning.png) bottom left no-repeat; width: 50px; height: 32px; max-width: 50px; display: block; opacity: 0; } .newsHolder article:hover .endImg span, .newsHolder article:focus .endImg span { opacity: 1; } .newsHolder article .stage img { max-width: 100%; } .newsHolder article h3 { margin-bottom: 12px; } .newsHolder article footer { font-family: warugaki; overflow: hidden; color: #000; padding-top: 14px; padding-bottom: 15px; } .newsHolder article footer span { float: left; padding: 4px 10px; font-size: 1.4em; } .newsHolder article footer .day { background-image: url(../images/day-bg.png); } .newsHolder article footer .month { background-image: url(../images/month-bg.png); padding: 4px 6px; } .newsHolder article footer .year { background-image: url(../images/year-bg.png); padding: 4px 12px; } .newsHolder article footer .comments { background-image: url(../images/comments-bg.png); padding: 5px 12px 16px; color: #FFF; margin-left: 16px; font-size: 1.7em; } @media only screen and (max-width: 1220px){ .newsHolder .homeNewsItem.newsPage { width: 44.0%; } } @media only screen and (max-width: 1024px) { .newsHolder article { overflow: hidden; } .newsHolder .newsLeft { float: none; width: 100%; } .newsHolder .newsRight { float: none; width: 100%; } .newsHolder .homeNewsItem { float: none; width: 100%; overflow: hidden; } .newsHolder .homeNewsItem.newsPage { float: none; width: 100%; } .newsHolder article h3 { margin-bottom: 9px; } .newsHolder article .stage { float: left; padding-right: 16px; width: 37.5%; } .newsHolder article .stage img { width: 100%; } .newsHolder article.odd { margin-right: 0px; } .newsHolder article .endImg { position: absolute; right: 0px; margin-top: -16px; } .newsHolder article footer { padding-top: 12px; } .newsHolder article .endImgHolder { margin-right: 70px; } } @media only screen and (max-width: 640px) { .newsHolder article .endImgHolder { margin-right: 60px; } } @media only screen and (max-width: 480px) { .newsHolder article .stage { padding-bottom: 23px; } .newsHolder article .stage { padding-bottom: 23px; width: 100%; padding-right: 0px; } .newsHolder article .endImg img { margin-left: -5px; } } @media only screen and (max-device-width: 480px) { .newsHolder article .stage img { width: 100%; } .newsHolder article { float: none; width: 100%; } .newsHolder article .stage { padding-bottom: 23px; width: 100%; padding-right: 0px; } .newsHolder article.odd { margin-right: 0px; } .newsHolder article .endImg { position: absolute; right: 0px; margin-top: -16px; } } /* =search ---------- */ .pageContent .sidebar .widget.searchWidget { margin-bottom: 16px; } .searchWidget input { border: 0px; } .searchWidget .field .text { width: 71.862068965517241%; padding-left: 10px; padding-right: 56px; background: #FFF url(../images/search-box.jpg) no-repeat; height: 62px; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; font: 2em/1.25em warugaki; letter-spacing: 0.06em; color: #d61f34; position: relative; z-index: 10; } .StaffMemberPage .searchWidget .field .text { padding-left: 21px; } .searchWidget .action { background: transparent url(../images/search-submit.jpg) no-repeat; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; height: 38px; float: right; width: 20.258620689655172%; margin-top: -50px; position: relative; z-index: 20; margin-right: 5.603448275862069%; cursor: pointer; max-width: 47px; } .searchWidget .action:hover { background-position: 0 100%; } @media only screen and (max-width: 1024px) { .searchWidget .field .text { background: #FFF url(../images/ipad-search.jpg) no-repeat; width: 71.862068965517241%; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; } } @media only screen and (max-device-width: 480px) { .searchWidget .field .text { background: #FFF url(../images/iphone-search-box.jpg) no-repeat!important; width: 81%%; } } /* =news article ---------------- */ .pageContent .content.newsArticle { background-image: url(../images/news-bg.jpg); color: #808080; } .newsArticle .hook-1 { background: url(../images/news-top.jpg) top left no-repeat; padding-top: 30px; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; } .newsArticle .hook-2 { background: url(../images/news-bot.jpg) bottom left no-repeat; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; padding: 0px 28px 30px 20px; } .newsArticle .stage { background: url(../images/news-image-bg.jpg) top left repeat-y; margin-bottom: 20px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .newsArticle .stage .hook-1 { background: url(../images/news-image-top.jpg) top left no-repeat; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; padding: 0px; } .newsArticle .stage .hook-2 { background: url(../images/news-image-bot.jpg) bottom left no-repeat; padding: 21px 17px 12px 18px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .newsArticle .stage img { width: 100%; } .newsArticle .title { color: #808080; background: none; padding-left: 7px; font-size: 4.0em; padding-bottom: 8px; } .newsArticle time { color: #009BDD; padding-left: 7px; padding-bottom: 18px; display: block; } .newsArticle .articleContent { padding-left: 7px; background: url(../images/news-content-bot.jpg) left bottom repeat-x; padding-bottom: 32px; } h3.comments { color: #0199dc; padding-top: 26px; font-size: 2.2em; padding-bottom: 0px; } /* =static page --------------- */ .staticPage .pageContent .content { background: url(../images/static-page-bot.jpg) left bottom no-repeat; background-size: 100% 45px; -webkit-background-size: 100% 45px; -khtml-background-size: 100% 45px; -o-background-size: 100% 45px; -moz-background-size: 100% 45px; padding-bottom: 45px; } .StaticPage.pageContent .sidebar { padding-top: 5px; } .staticPage .pageContent .content header { background-image: url(../images/static-page-head.jpg ); min-height: 168px; color: #FFF; padding-left: 26px; } .staticPage .pageContent .content header .title { color: #FFF; background: none; padding-top: 28px; font-size: 4.9em; padding-bottom: 4px; } .staticPage .pageContent .content header h1 { padding-left: 0px; } .staticPage .pageContent .content header h3 { font-size: 2.25em; padding-left: 0px; } .staticPage .pageContent .content .article { background: #f1f1f1; padding: 34px 30px 37px 27px; color: #808080; } .staticPage .pageContent .content .article .stage { background: url(../images/page-image-bg.jpg) top repeat-y; margin-bottom: 30px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .staticPage .pageContent .content .article .stage .hook-1 { background: url(../images/page-image-top.jpg) top left no-repeat; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .staticPage .pageContent .content .article .stage .hook-2 { padding: 20px 17px 15px 18px; background: url(../images/page-image-bot.jpg) bottom left no-repeat; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .staticPage .pageContent .content .article .stage img { max-width: 100%; } @media only screen and (max-width: 850px) { .staticPage .pageContent .content header .title { font-size: 4em; } .staticPage .pageContent .content header h3 { font-size: 2em; } } @media only screen and (max-width: 700px) { .staticPage .pageContent .content header .title { font-size: 3.5em; } .staticPage .pageContent .content header h3 { font-size: 1.6em; } } @media only screen and (max-width: 610px) { .staticPage .pageContent .content header .title { font-size: 3em; } .staticPage .pageContent .content header h3 { font-size: 1.4em; } } @media only screen and (max-width: 500px) { .staticPage .pageContent .content header { min-height: 130px; } .staticPage .pageContent .content header .title { font-size: 2em; } .staticPage .pageContent .content header h3 { font-size: 1.2em; } } @media only screen and (max-width: 500px) { .staticPage .pageContent .content header { min-height: 110px; } .staticPage .pageContent .content header h3 { font-size: 1em; } } @media only screen and (max-device-width: 450px) { .staticPage .pageContent .content header { min-height: 110px; } .staticPage .pageContent .content header .title { font-size: 3.4em; line-height: 1em; padding-top: 15px; } .staticPage .pageContent .content header h3 { font-size: 1.6em; } } /* =PageComments ----------------*/ #PageComments article { padding: 0px 0px 20px 0px; } #PageComments article.first { padding-top: 30px; } #PageComments article aside { margin-left: 3.622047244094488%; float: left; width: 10.551181102362205%; margin-right: 2.834645669291339%; } #PageComments .commentTop { background-image: url(../images/comment-top.jpg); height: 22px; } #PageComments .commentMid { background-image: url(../images/comment-mid.jpg); background-repeat: repeat-y; background-size: 100% 125px; -webkit-background-size: 100% 125px; -khtml-background-size: 100% 125px; -o-background-size: 100% 125px; -moz-background-size: 100% 125px; padding-top: 10px; } #PageComments .commentBot { background-image: url(../images/comment-bot.jpg); height: 28px;} #PageComments article aside img { max-width: 100%; } #PageComments article section.comment { width: 80.359055%; float: left; } #PageComments article section.comment h3 { color: #019cdc; } #PageComments article time { padding-left: 16.952756%; clear: both; overflow: hidden; width: 80.359055%; padding-top: 18px; margin-top: -6px; } #PageComments article time span { float: left; } #PageComments article time a { float: right; margin-top: -6px; background: url(../images/comment-submit.jpg) right top no-repeat; padding-right: 43px; height: 34px; font: 1.8em/1.2em warugaki;} #PageComments article time a:hover { background-position: right 100%; } .leaveCommentHolder { background: url(../images/leave-a-comment.jpg) repeat-y top left; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .leaveCommentHolder.noComments { margin-top: 25px; } .leaveCommentHolder .hook-1 { background: url(../images/leave-a-comment-top.jpg) top left no-repeat; padding: 0px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .leaveCommentHolder .hook-2 { background: url(../images/leave-a-comment-bot.jpg) bottom left no-repeat; padding: 23px 25px 32px 26px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .leaveCommentHolder h3 { padding-bottom: 13px; } .leaveCommentHolder label { position: absolute; } .leaveCommentHolder #CommenterURL { display: none; } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Name { background: url(../images/comment-input.jpg) no-repeat; border: 0px; width: 94%; padding: 0px 3%; font: 0.95em/53px "museo-1","museo-2",serif; color: #808080; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; height: 53px; } .leaveCommentHolder #Name { margin-bottom: 20px; } .leaveCommentHolder #Name label { margin: 2px 0px; line-height: 53px; margin-left: 2% } .leaveCommentHolder #Comment label { margin: 9px 0px 0px 18px; } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Comment { background: url(../images/comment-textarea.jpg) no-repeat; height: 161px; border: 0px; width: 94%; padding: 10px 3%; font: 0.95em/1.4em "museo-1","museo-2",serif; color: #808080; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; } .leaveCommentHolder .Actions { padding-top: 7px; } #PageCommentInterface_Form_PostCommentForm_action_postcomment { background: #f2f2f2 url(../images/comment-submit.jpg) right top no-repeat; float: right; height: 34px; margin-top: -41px; margin-right: 180px; border: 0px; font:1.8em/1.2em warugaki; color: #d61f35; padding: 2px 36px 1px 6px; } #PageCommentInterface_Form_PostCommentForm_action_postcomment:hover { background-position: right 100%; } #leaveAComment #Captcha { float: left; } @media only screen and (max-width: 850px) { .leaveCommentHolder h3 { font-size: 1.5em; } .leaveCommentHolder { /*padding: 12px 25px 12px 26px;*/ } .leaveCommentHolder #Name label { margin: 2px 0px; line-height: 38px; margin-left: 2% } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Name { height: 38px; line-height: 38px; } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Comment { height: 80px; } #PageCommentInterface_Form_PostCommentForm_action_postcomment { float: none; margin-top: 0px; } #PageComments article time a { display: none; } } @media only screen and (max-width: 550px) { .leaveCommentHolder h3 { font-size: 1em; } .leaveCommentHolder #Name label { margin: 2px 0px; line-height: 30px; margin-left: 2% } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Name { height: 30px; line-height: 30px; } .leaveCommentHolder #PageCommentInterface_Form_PostCommentForm_Comment { height: 50px; } } /* =flickrfeed widget --------------------- */ .flickrFeed { padding-bottom: 9px; background: transparent url(../images/widget-bot.jpg) no-repeat right bottom; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; } .flickrFeed .loading { text-align: center; background: #cfcfcf; padding: 5px 0px; } .flickrFeed ul { overflow: hidden; font-size: 0px; line-height: 0px; background: #cfcfcf; } .flickrFeed ul li { width: 25%; float: left; overflow:hidden; } .flickrFeed ul li img { max-width: 100%; height: 58px; } /* =bio build widget -------------------- */ .bioBuild { padding-bottom: 21px; background: transparent url(../images/bio-build-bot.jpg) no-repeat right bottom; background-size: 100% 21px; -webkit-background-size: 100% 21px; -khtml-background-size: 100% 21px; -o-background-size: 100% 21px; -moz-background-size: 100% 21px; } .pageContent .sidebar .widget.bioBuild h3.title { padding: 0px 0px 0px 8px; background-image: url(../images/bio-build.jpg); background-color: #fbc620; height: 50px; line-height: 50px; font-size: 2.6em; letter-spacing: 0.12em; } .bioBuild .bioBuildImage { padding: 12px 0px; } .bioBuild .bioContent { padding: 10px 24px 15px 14px; color: #808080; background: url(../images/bio-build-bg.jpg) no-repeat; } /* =staffWidget --------------- */ .secondary .pageContent.StaffMemberPage .sidebar { width: 26.616698292220114%; } .pageContent .sidebar .widget.staffWidget h3.title { background: transparent; padding: 0px; font-size: 0px; line-height: 0px; } .staffWidget { padding-bottom: 21px; background: transparent url(../images/tag-bot.jpg) no-repeat 1px bottom; background-size: 99% 21px; -webkit-background-size: 99% 21px; -khtml-background-size: 99% 21px; -o-background-size: 99% 21px; -moz-background-size: 99% 21px; } .staffWidget .members { background: #CCCCCC; padding: 16px 12px 21px 10px; margin: 0px 2px; } .staffWidget .member { background-image: url(../images/member-sidebar-bd.jpg); padding: 19px 13px 10px 16px; margin-bottom: 15px; } .staffWidget .member .stage img { max-width: 100%; } .staffWidget .member .name { background: url(../images/name.jpg) top left no-repeat; height: 49px; width: 96%; margin: 0px 2%; color: #FFF; line-height: 49px; font-family: warugaki; text-align: center; font-size:.95em; font-weight: 100; background-repeat: no-repeat; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; margin-top: 3px; } .staffWidget .member .name span { height: 49px; display: block; position: relative; width: 100%; overflow: hidden; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; } .staffWidget .member .name span.fadeEffect { background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; background-image: url(../images/name.jpg); background-position: 0 -100%; margin-top: -49px; opacity: 0; } .staffWidget .memberHolder:hover .member .name span.fadeEffect { opacity: 1; } .staffWidget .allMembers { overflow: hidden; } .staffWidget .allMembers .member { width: 42%; float: left; padding: 7px 7px; } .staffWidget .allMembers .member.even { float: right; } .staffWidget .allMembers .member .name { background-image: url(../images/name-small.jpg); height: 21px; width: 96%; margin: 0px 2%; color: #FFF; line-height: 23px; font-family: warugaki; text-align: center; font-size: 0.8em; font-weight: 100; } .staffWidget .allMembers .member .name span { height: 21px; display: block; position: relative; width: 100%; overflow: hidden; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; } .staffWidget .allMembers .member .name span.fadeEffect { background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; background-image: url(../images/name.jpg); background-position: 0 -100%; margin-top: -21px; opacity: 0; } .staffWidget .allMembers .memberHolder:hover .member .name span.fadeEffect { opacity: 1; } .staffMobileLinks { font-size: 3.8em; display: none; margin-bottom: 20px; } @media only screen and (max-width: 1024px) { .staffMobileLinks { display: block; } } /* =staffContent ---------------- */ .staffContent { background-image: url(../images/news-bg.jpg); color: #808080; } @media only screen and (max-width: 480px){ .pageContent .content.staffContent { background: url(../images/news-bg.jpg) top left no-repeat; } } .staffContent .hook-1 { padding-left: 15px; background: url(../images/news-bot.jpg) bottom left no-repeat; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; padding: 11px 12px 72px 12px; } .staffContent .stage { margin-bottom: 16px; height: 460px; } .staffContent .stage img { max-width: 100%; } .staffContent .stage aside { position: absolute; margin: 26px 0px 0px 448px; color: #999999; font-family: warugaki; width: 255px; } .staffContent .stage h1 { font-size: 3.7em; line-height: 1.1em; letter-spacing: 0.04em; color: #999999; padding-bottom: 13px; margin-top: -8px; } .staffContent .stage aside .profile { font-size: 1.6em; padding-left: 5px; margin-bottom: 16px; } .staffContent .stage aside .profile label { color: #009BDD; display: block; padding-bottom: 2px; } .staffContent .stage aside .profile span { display: block; } .staffContent .title { background: none; color: #999999; padding-left: 0px; padding-bottom: 27px; font-size: 4em; line-height: 0.8em; } .staffContent .article { padding-left: 15px; } @media only screen and (max-width: 1200px) { .staffContent .stage aside { margin-left: 420px; width: 255px; } .staffContent .stage h1 { font-size: 3.3em; } } @media only screen and (max-width: 1100px) { .staffContent .stage aside { margin-left: 365px; width: 235px; } .staffContent .stage h1 { font-size: 3em; } .staffContent .stage aside .profile { 1.1em;} } @media only screen and (max-width: 1000px) { .staffContent .stage aside { margin-left: 448px; width: 255px; } .staffContent .stage h1 { font-size: 3em; } } @media only screen and (max-width: 800px) { .staffContent .stage aside { margin-left: 385px; width: 235px; } .staffContent .stage h1 { font-size: 3em; } } @media only screen and (max-width: 750px) { .staffContent .stage aside { margin-left: 370px; width: 235px; } .staffContent .stage h1 { font-size: 2em; } .staffContent .stage aside .profile { font-size: 1.3em; } } @media only screen and (max-width: 700px) { .staffContent .stage aside { margin-left: 300px; width: 200px; } .staffContent .stage h1 { font-size: 1.8em; } .staffContent .stage aside .profile { font-size: 1.1em; } } @media only screen and (max-width: 600px) { .staffContent .stage aside { margin-left: 230px; width: 150px; } .staffContent .stage h1 { font-size: 1.5em; } .staffContent .stage aside .profile { font-size: 1em; margin-bottom: 6px; } } @media only screen and (max-device-width: 600px) { .staffContent .stage aside { margin-left: 440px; width: 250px; } .staffContent .stage h1 { font-size: 1.5em; } .staffContent .stage aside .profile { font-size: 1em; margin-bottom: 6px; } .staffContent.content { background: transparent; } } /* =ABC Science Feed -------------------- */ .scienceFeed { padding-bottom: 9px; background: transparent url(../images/widget-bot.jpg) no-repeat right bottom; } .scienceFeed ul { background: transparent url(../images/feed-bg.jpg) top repeat-y; background-size: 100% auto; -webkit-background-size: 100% auto; -khtml-background-size: 100% auto; -o-background-size: 100% auto; -moz-background-size: 100% auto; padding-bottom: 26px; } .scienceFeed ul li { width: 87.391304347826087%; margin: 0px auto; padding-top: 14px; padding-bottom: 18px; background: transparent url(../images/gray-dotted.gif) bottom left repeat-x; } .scienceFeed ul li h3 { font-size: 1.3em; line-height: 1.1em; padding-bottom: 8px; } .scienceFeed ul li p { font-size: 0.8em; line-height: 1.4em; letter-spacing: 0.09em; } /* =tag could widget -------------------- */ .pageContent .sidebar .widget.tagCloud h3.title { background-image: url(../images/tags-head.jpg); height: 59px; font-size: 1.9em; padding-left: 23px; } .pageContent .sidebar .widget.tagCloud h3.title span { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); display: block; padding-top: 7px; } .tagCloud { padding-bottom: 21px; background: transparent url(../images/tag-bot.jpg) no-repeat right bottom; background-size: 100% 21px; -webkit-background-size: 100% 21px; -khtml-background-size: 100% 21px; -o-background-size: 100% 21px; -moz-background-size: 100% 21px; } .tagCloud .tags { background: transparent url(../images/feed-bg.jpg) top repeat-y; padding: 14px 22px 26px 17px; font: 1.1em/1.5em warugaki; letter-spacing: 0.06em; color: #D61F34; } /* =footer images ----------------- */ .footerImages { padding-top: 7px; text-align: center; } .footerImages img { margin-right: 2.92%; } .footerImages img.last { margin-right: 0px; } /* =footer links ---------------- */ .footerLinks { font: 2em/1.2em warugaki; letter-spacing: 0.06em; color: #d61f34; text-align: center; padding: 27px 0px 81px; background: transparent url(../images/footer-links-bg.gif) left bottom repeat-x; } .footerLinks span { color: #b3b3b3; } .footerSmallLinks { font-size: 0.7em; } /* =sponsors ------------*/ .sponsors { font-family: warugaki; color: #999999; text-align: center; padding-top: 58px; font-size: 1.2em; } .sponsors a{ margin-right: 5.497630331753555%; } .sponsors .last { margin-right: 0px; } .sponsors section { padding-top: 26px; overflow: hidden; } .sponsors section a, .sponsors section img { display: inline-block; } /* =CalendarEvents ------------*/ .calendarEvent { background: url(../images/calendar-event-bg.jpg) no-repeat top left; color: #545454; width: 75.11870%;background-size: 100% 100%; -webkit-background-size: 100%; -khtml-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%; float: left;} .calendarEvent .hook-1 { background: url(../images/calendar-event-top.jpg) top left no-repeat; padding-top: 23px; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; } .calendarEvent .hook-2 { background: url(../images/calendar-event-bot.jpg) bottom left no-repeat; background-size: 100% 53px; -webkit-background-size: 100% 53px; -khtml-background-size: 100% 53px; -o-background-size: 100% 53px; -moz-background-size: 100% 53px; padding: 0px 20px 55px 17px; } .calendarEvent .stage { background: url(../images/news-image-bg.jpg) top left repeat-y; margin-bottom: 24px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .calendarEvent .stage .hook-1 { background: url(../images/news-image-top.jpg) top left no-repeat; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; padding: 0px; } .calendarEvent .stage .hook-2 { background: url(../images/news-image-bot.jpg) bottom left no-repeat; padding: 21px 17px 12px 18px; background-size: 100% auto; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; } .calendarEvent .stage img { width: 100%; } .calendarEvent .title { background: none; padding:0px 233px 28px 0px; background: url(../images/calendar-event-title-bg.jpg) top right no-repeat;margin-left: 16px;margin-bottom: 7px;} .calendarEvent .title h1 { font-size: 3.6em; color: #808080; } .calendarEvent ul li{margin-bottom: 46px;letter-spacing: 0.1em;} .calendarEvent ul li:last-child{margin-bottom:0;} .calendarEvent #times {margin-top: 0px;} .calendarEvent .calendarEventAttibute {font: 1.3em warugaki; color: #009cdf; width: 16.5126%;float: left;margin-left: 18px;} .calendarEvent .calendarEventValue,.calendarEvent time{color: #555555;width: 78.4873%;overflow: hidden;display: inline-block;} .calendarEvent time a {color: #555555; width: 78.4873%;overflow: hidden;display: inline-block;} .calendarEvent .articleContent { padding-left: 7px; background: url(../images/news-content-bot.jpg) left bottom repeat-x; padding-bottom: 10px; } @media only screen and (max-width: 840px) { .calendarEvent .title { background-size: auto 59px; -webkit-background-size: auto 59px; -o-background-size: auto 59px; -moz-background-size: auto 59px; padding-right:140px; } .calendarEvent .title h1 { font-size: 2.8em; } .calendarEvent .calendarEventAttibute { width: 24%; } .calendarEvent .calendarEventValue, .calendarEvent time { width: 72%; } } @media only screen and (max-width: 640px) { .calendarEvent .title { background-size: auto 56px; -webkit-background-size: auto 56px; -o-background-size: auto 56px; -moz-background-size: auto 56px; } .calendarEvent .title h1 { padding-right: 123px; font-size: 2.2em; } } /* =CalendarWidget ------------*/ #calendar-widget { background: url(../images/calendar-widget-top.jpg) no-repeat top left; color: #fff;background-size: 100% 33px; -webkit-background-size: 100% 33px; -khtml-background-size: 100% 33px; -o-background-size: 100% 33px; -moz-background-size: 100% 33px; background-repeat: no-repeat;} #calendar-widget .dp-popup { background: url(../images/calendar-widget-bot.jpg) no-repeat bottom left;display: block;margin: 0 auto;padding-bottom: 10px;width: 100%;background-size: 100% 10px; -webkit-background-size: 100% 10px; -khtml-background-size: 100% 10px; -o-background-size: 100% 10px; -moz-background-size: 100% 10px;} #calendar-widget .dp-popup h2 { background: none;font: 1.65em warugaki;text-decoration: none;letter-spacing: 0.1em;padding: 7px 0 4px 0;} #calendar-widget .jCalendar { border-spacing: 0px; margin: 0 auto;margin-top: 2px;width: 98.4%;} #calendar-widget .jCalendar thead, #calendar-widget .weekday {margin-top: 2px;} #calendar-widget .dp-calendar {padding-bottom: 0;} #calendar-widget table { font: 1.65em warugaki; color: #fff;background: none;} #calendar-widget tbody .weekday, #calendar-widget tbody .weekend{ background: #cfcfcf;width:14.2857% ;color: #fff;height: 22px;} #calendar-widget tbody .weekday { border-top: 2px solid #fff;border-right: 2px solid #fff;} #calendar-widget tbody .weekend { border-top: 2px solid #fff;} #calendar-widget tbody .today {background: #d61f35;} #calendar-widget tbody .other-month { color:#b3b3b3; } #calendar-widget .dp-nav-prev-month {background: url(../images/calendar-widget-month-btn.jpg) no-repeat left top; width: 14px; height: 18px;padding: 0;margin-top: 6px;} #calendar-widget .dp-nav-next-month {background: url(../images/calendar-widget-month-btn.jpg) no-repeat right top; width: 14px; height: 18px;padding: 0;margin:7px 2px 0 0;} #calendar-widget thead th { height: 19px; font: 0.7em/1.45em warugaki; } #calendar-widget thead .weekday{ background: #b3b3b3;padding: 5px 0 0 0;border-right: 2px solid #fff;height: 21px; width:14.2857%; } #calendar-widget thead .weekend {background: #b3b3b3;padding: 2px 5.2px;width:14.2857%;} #calendar-widget tbody .weekbutton,#calendar-widget thead .showweek{ display: none;} @media only screen and (max-width: 1024px) { .pageContent .sidebar .calendarWidget .jCalendar td { padding: 5px 0px; } #calendar-widget .dp-nav-prev-month { margin-left: 10px; } #calendar-widget .dp-nav-next-month { margin-right: 10px; } } /* =UpcomingEventsWidget ------------*/ .UpcomingEventsWidget { background: url("../images/upcoming-events-bot.jpg") no-repeat left bottom; background-size: 100% 13px; -webkit-background-size: 100% 13px; -khtml-background-size: 100% 13px; -o-background-size: 100% 13px; -moz-background-size: 100% 13px; padding: 0 0 13px 0;} .UpcomingEventsWidget .hook1 {background: url("../images/upcoming-events-bg.jpg") no-repeat left bottom;background-size: 100% 100%; -webkit-background-size: 100%; -khtml-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%;padding-bottom: 20px;} .pageContent .sidebar .widget.UpcomingEventsWidget h3.title { background-image: url(../images/widget-title-red); min-height: 40px; line-height: 40px; } .UpcomingEventsWidget ul li { background: url("../images/evnt-dotted-line.jpg") repeat-x left bottom;margin: 18px 15px 0 15px;padding-bottom: 20px;} .UpcomingEventsWidget .endImg { background: url("../images/events-bullet.jpg") no-repeat left top; clear: both; float: right; height: 30px; margin-top: 0px; max-width: 27px; width: 27px; } .UpcomingEventsWidget .endImg span { background: url("../images/events-bullet.jpg") no-repeat left bottom; display: block; height: 30px; max-width: 27px; opacity: 0; width: 27px;} .UpcomingEventsWidget ul li:hover .endImg span { opacity:1;} .UpcomingEventsWidget h3 {font: 1.4375em warugaki; color: #e3003c;} .UpcomingEventsWidget ul li:hover h3 a{color: #FAB900; } /* =calendarEvents ------------*/ .Calendar .calendarEvents.content {width: 72.50237%;float: left;} .calendarEvents .title { background: url('../images/bottom-h1-grey.gif') left bottom repeat-x; color: #999; font-size: 3.8em; padding-bottom: 27px; padding-left: 3px; margin-bottom: 24px; } .calendarEvents .title span { background: url('../images/event-list-h1-bg.jpg') right top no-repeat; padding-right: 91px; letter-spacing: 0.1em; } .calendarEventList:hover h3.summary a, .calendarEventList:focus h3.summary a { color: #FBC721; } .calendarEventList { min-height: 243px; float: none; clear: both; overflow: hidden; background-image: url("../images/event-list-bg.jpg"); margin-bottom: 25px; cursor: pointer; } .calendarInnerEventList { width: 100%; background-image: url("../images/event-list-bg-hover.jpg"); min-height: 243px; position: absolute; z-index: 10; width: 72.50237%; opacity: 0; -webkit-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ -webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ } .calendarEventList:hover .calendarInnerEventList, .calendarEventList:focus .calendarInnerEventList { opacity: 1; } .calendarEventList .transparency { background-image: url("../images/event-list-bg-hover.jpg") !important; } .calendarInnerWrapper { position: relative; z-index: 20; width: 100%; } .calendarEventList section { float: left;} .calendarEventList .calendarContentWrapper {width:88.61578266494179%; padding: 0px 0px 3px 3.134%; height: 239px; } .calendarEventList .calendarContentWrapper .Image {padding-top: 5px; float: left; width: 40.66481223922114%; } .calendarEventList .calendarContentWrapper .Image img { max-width: 100%; height: 236px; } .calendarEventList .calendarContentWrapper .calendarContent { float: left; padding-left: 16px; width: 55.1863173216885%; padding-top:18px; } .calendarEventList .calendarContentWrapper .calendarContent h3 {font-size: 3.1em; margin-bottom: 3px;} .calendarEventList .calendarEventDate { float: left; clear: right; position: relative; bottom: 0;width: 7.891332470892626%; height: 243px;} .calendarEventList .calendarEventInnerDate { -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); position: absolute;width: 165px; height: 22px; margin: 95px 0 0 -51px; font-size: 1.5em; font-family: warugaki; letter-spacing: 0.1em; color:#fff; } .calendarEventList .calendarContentWrapper .calendarContent time { color: #000; font-family: warugaki; font-size: 1.2em; letter-spacing: 0.2em; padding-bottom: 16px; } @media only screen and (max-width: 1024px){ .Calendar .calendarEvents.content { width: 100%; float: none; } .calendarInnerEventList { width: 100%; } .calendarEventList .calendarEventInnerDate { margin: 95px 0 0 -47px; font-size: 1.5em; } } @media only screen and (max-width: 860px){ .calendarEventList { min-height: 167px; } .calendarEventList .calendarEventDate { height: 167px; } .calendarEventList .calendarContentWrapper { height: 167px; } .calendarInnerEventList { min-height: 169px; } .calendarEventList .calendarContentWrapper .calendarContent h3 { font-size: 2em; } .calendarEventList .calendarEventInnerDate { margin: 81px 0 0 -62px; font-size: 1.2em; } } @media only screen and (max-width: 480px){ .calendarEventList { min-height: 145px; } .calendarEventList .calendarEventDate { height: 145px; } .calendarEventList .calendarContentWrapper { height: 145px; } .calendarInnerEventList { min-height: 148px; } .calendarEventList .calendarContentWrapper .calendarContent h3 { font-size: 1.3em; } .calendarEventList .calendarEventInnerDate { margin: 81px 0 0 -66px; font-size: 1em; } } @media only screen and (max-device-width: 1000px){ .calendarEvents.content { background: transparent; } .calendarEventList .calendarEventInnerDate { font-size: 1.4em; font-size: 1.2em; } } @media only screen and (max-device-width: 480px){ .calendarEvents.content { background: transparent; } .calendarEventList .calendarEventInnerDate { font-size: 0.9em; } .calendarEventList .calendarContentWrapper .calendarContent h3 { font-size: 1.8em; } } /* =programs ------------ */ .secondary .pageContent .content.programs { width: 100%; } @media only screen and (max-width: 1024px) { .secondary .pageContent .content.programs { width: 100%; } } .programs h1.title { background: url('../images/bottom-h1-grey.gif') left bottom repeat-x; color: #999999; font-size: 3.8em; padding-bottom: 27px; padding-left: 3px; margin-bottom: 24px; } .programs h1.title span { background: url('../images/event-list-h1-bg.jpg') right top no-repeat; padding-right: 91px; letter-spacing: 0.1em; } #programsHolder { width: 103%; } .programs .item { float: left; width: 337px; max-width: 337px; } .programs .item { padding: 0px 20px 26px 0px; } .programs .item .categories { background-image: url(../images/programs-header.jpg); background-color: #b3b3b3; background-position: top left; color: #FFF; padding: 10px 4% 9px; font-size: 1.2em; letter-spacing: 0.2em; min-height: 20px; line-height: 20px; background-size: 100% 39px; -webkit-background-size: 100% 39px; -khtml-background-size: 100% 39px; -o-background-size: 100% 39px; } .programs .item .summary { background: #f2f2f2; padding: 17px 3.98936170212766%; } .programs .item .summary .innerSummary { overflow: hidden; } .programs .item .summary header { overflow: hidden; padding-bottom: 23px; } .programs .item .summary aside { float: left; width: 30%; text-align: center; background-image: url(../images/icon-bg.gif); padding: 4px 4px; min-height: 100px; overflow: hidden; } .programs .item .summary aside img { max-width: 100%; } .programs .item .summary .title { float: left; margin-left: 3.98936170212766%; color: #d72036; width: 60%; font-size: 2.6em; line-height: 0.9em; } .programs .item .summary p { margin-bottom: 0px; } .programs .item footer { min-height: 34px; line-height: 34px; background: url('../images/program-footer.jpg') left top no-repeat; background-size: 100% 203%; -webkit-background-size: 100% 203%; -khtml-background-size: 100% 203%; -o-background-size: 100% 203%; -moz-background-size: 100% 203%;} .programs .item footer a { background: url('../images/program-footer.jpg') left bottom no-repeat; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; opacity: 0; display: block; } .programs .item:hover footer a { opacity: 1; } .programs .item:hover h3 a { color: #FAB900; } @media only screen and (max-width: 700px) { #programsHolder { width: 100%; } .programs .item { width: 100%; float: none; padding: 0px; margin-bottom: 10px; } } @media only screen and (max-device-width: 480px) { .programs.content { background-image: url('../images/bottom-h1-grey.gif'); } .programs .item { width: 400px; max-width: 400px; } .programs .item footer a { height: 34px; } } /* =programPage ------------ */ .secondary .pageContent.ProgramPage .sidebar { width: 22.216698%; } .programPage {width: 73.5%;float: left; background: url(../images/program-page-bg.jpg) no-repeat top left;background-size: 100% 100%; -webkit-background-size: 100%; -khtml-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%;} .programPage .hook-1 { background: url(../images/program-page-top.jpg) top left no-repeat; padding-top: 14px; background-size: 100% 52px; -webkit-background-size: 100% 52px; -khtml-background-size: 100% 52px; -o-background-size: 100% 52px; -moz-background-size: 100% 52px; } .programPage .hook-2 { background: url(../images/program-page-bot.jpg) bottom left no-repeat; background-size: 100% 49px; -webkit-background-size: 100% 49px; -khtml-background-size: 100% 49px; -o-background-size: 100% 49px; -moz-background-size: 100% 49px; padding: 22px 20px 42px 17px; } .programPage h3 {height: 31px; text-align: center; font: 1.5475em warugaki;color: #fff;} .programPage .title { display: inline-block; color: #808080; background: none; padding:0px; font-size: 4.9em; line-height: 0.8em; } .programPage ul li{margin-bottom: 27px;letter-spacing: 0.1em;overflow: hidden;} .programPage ul li:last-child{margin-bottom:0;} .programPage #times {margin-top: -14px;} .programPage .calendarEventAttibute {font: 1.3em warugaki; color: #009cdf; width: 19.5126%;float: left;letter-spacing: 0.2em;text-align: right; } .programPage .calendarEventAttibute img {margin:6px 4px 0 10px;background-image: url(../images/icon-bg.gif) ; background-repeat: no-repeat; padding: 16px;background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; } .programPage .calendarEventValue,.programPage time{color: #555555;width: 74.4873%;overflow: hidden;display: inline-block; padding-left: 15px;} .programPage .calendarEventValue span {display: block;} .programPage time a {color: #555555; width: 78.4873%;overflow: hidden;display: inline-block;} .programPage .articleContent { padding-left: 7px; background: url(../images/news-content-bot.jpg) left bottom repeat-x; padding-bottom: 10px; } .programPage div {margin-top: 50px;} .programPage .prev { float: left; font: 1.5em warugaki; color: #ffffff; background: url(../images/program-page-prev-btn.png) left top no-repeat; text-transform: uppercase; height: 30px; } .programPage .prev:hover { color: #FBC721;} .programPage .prev .prevSpan { background: url(../images/program-page-prev-btn.png) left bottom no-repeat; display: block; width: 20px; height: 30px; float: left; opacity: 0; padding-right: 5px;} .programPage .prev:hover .prevSpan { opacity:1; } .programPage .next {float: right;font: 1.5em warugaki; color: #ffffff;background: url(../images/program-page-next-btn.png) right top no-repeat;text-transform: uppercase;} .programPage .next:hover { color: #FBC721;} .programPage .next .nextSpan { background: url(../images/program-page-next-btn.png) right bottom no-repeat; display: block; width: 20px; height: 30px; float: right; opacity: 0; padding-left: 5px;} .programPage .next:hover .nextSpan { opacity:1; } /* =programCategory Widget -------------------------- */ .programCategory { color: #808080; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; text-align: center;margin-bottom: 18px; } .programCategory .programCategoryTop { background-image: url(../images/program-category-top.jpg); background-repeat: no-repeat; height: 15px; } .programCategory .programCategoryMid { background-image: url(../images/program-category-mid.jpg); background-repeat: repeat-y; background-size: 100% 80px; -webkit-background-size: 100% 80px; -khtml-background-size: 100% 80px; -o-background-size: 100% 80px; -moz-background-size: 100% 80px; padding: 0px 10px; } .programCategory .programCategoryBot { background-image: url(../images/program-category-bot.jpg); background-repeat: no-repeat; height: 15px; } .programCategory h3 { font-size: 1.375em;} .programCategory div { font: 1.875em warugaki;} /* =programCategories Widget ---------------------------- */ .pageContent .sidebar .widget.programCategories h3.title { background-image: url(../images/widget-title-blue.jpg); line-height: 40px; min-height: 40px; } .programCategories { background: url(../images/categories-bot.jpg) bottom no-repeat; background-size: 100% 10px; -webkit-background-size: 100% 10px; -khtml-background-size: 100% 10px; -o-background-size: 100% 10px; -moz-background-size: 100% 10px; padding-bottom: 10px; } .programCategories .categories { background-image: url(../images/categories-bg.jpg); padding-top: 16px; } .programCategories .categories li { padding-bottom: 10px; } .programCategories .categories a { font-family: warugaki; font-size: 1.6em; padding-left: 35px; background: url(../images/grey-lightning.jpg) 18px 4px no-repeat; } /* =morenews widget ------------------- */ .pageContent .sidebar .widget.moreNewsWidget .title { font-size: 2em; line-height: 1em; background: url(../images/red-dots.png) bottom left no-repeat; padding-bottom:18px; background-size: 100% auto; -webkit-background-size: 100% auto; -khtml-background-size: 100% auto; -o-background-size: 100% auto; -moz-background-size: 100% auto; padding: 0px; color: #E3003C; } .pageContent .sidebar .widget.moreNewsWidget .title span { background: transparent url(../images/header-bg.jpg) right top no-repeat; padding-right: 75px; background-size: auto 200%; -webkit-background-size: auto 200%; -khtml-background-size: auto 200%; -o-background-size: auto 200%; -moz-background-size: auto 200%; } .moreNewsWidget ul li { background: url("../images/yellow-dots.png") repeat-x left bottom; color: #808080; padding-bottom: 20px; padding-top: 27px; } .moreNewsWidget .endImg { background-image: url("../images/upcoming-news-bullet.jpg"); clear: both; float: right; height: 27px; margin-top: 0px; max-width: 27px; width: 27px; } .moreNewsWidget .endImg span { background: url("../images/upcoming-news-bullet.jpg") no-repeat left bottom; display: block; height: 27px; max-width: 27px; opacity: 0; width: 27px;} .moreNewsWidget ul li:hover .endImg span { opacity:1;} .moreNewsWidget h3 {font: 1.4375em warugaki; color: #e3003c;} /* =contactPage ------------- */ .contactPage { background-image: url(../images/calendar-event-bg.jpg); color: #545454; width: 69.9241%; float: left;} .contactPage .hook1 { background: url(../images/news-top.jpg) top left no-repeat; padding-top: 33px; background-size: 100% 9px; -webkit-background-size: 100% 9px; -khtml-background-size: 100% 9px; -o-background-size: 100% 9px; -moz-background-size: 100% 9px; } .contactPage .hook2 { background: url(../images/news-bot.jpg) bottom left no-repeat; background-size: 100% 13px; -webkit-background-size: 100% 13px; -khtml-background-size: 100% 13px; -o-background-size: 100% 13px; -moz-background-size: 100% 13px; padding: 0px 20px 30px 17px; overflow: hidden; } .contactPage input[type="text"] { background: url(../images/comment-input.jpg) no-repeat; border: 0px; width: 94%; padding: 0px 20px; font: 0.95em/53px "museo-1","museo-2",serif; color: #808080; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; height: 53px; margin:20px 0 32px 0;} .contactPage textarea{background: url(../images/comment-textarea.jpg) no-repeat; height: 161px; border: 0px; width: 94%; padding: 10px 20px; font: 0.95em/1.4em "museo-1","museo-2",serif; color: #808080; background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-repeat: no-repeat; margin:20px 0 0 0; } .contactPage input.action{ background: #f2f2f2 url(../images/comment-submit.jpg) right top no-repeat; padding-right: 36px; float: right; border: 0px; font:1.8em/1.1em warugaki; color: #d61f35;margin-top: 16px; cursor: pointer; } .contactPage input.action:hover { background-position: right 100%;} .contactPage label { font: 1.5em warugaki; color: #727272;} .contactPage .contactImage {float: left;padding-left: 30px; margin-right: 25px; width: 20%;max-width: 127px;} .contactPage .contactImage img { width: 100%; } .contactPage .contactDetailsWrapper {display: block; clear: both; float: none; padding: 38px 0 20px 17px; background: url("../images/contact-dashes.jpg") repeat-x 26px bottom; margin-bottom: 46px; } .contactPage .contactDetails li{ margin-bottom: 28px; } .contactPage .contactTitle h1{ color: #808080; background: none; padding-left: 7px; font-size: 5.4em; line-height: 0.88em;letter-spacing: 0.01em; padding-bottom: 8px;clear: right; float: none; } .contactPage .contactAttribute { font: 1.3em warugaki; color: #009cdf; width: 21.7%;float: left;margin-left: 18px; letter-spacing: 0.2em;} .contactPage .contactValue { color: #555555;width: 64.4873%;overflow: hidden;display: inline-block;} .contactPage .contactEmail { display: block;color: #E3003C;} .contactPage #Form_Form{ padding:0 8px 0 29px; } @media only screen and (max-width: 1024px) { .contactPage .contactImage { padding-left: 0px; } .contactPage #Form_Form { padding: 0px; } .contactPage .contactDetailsWrapper { padding-left: 0px; } .contactPage .contactAttribute { margin-left: 0px; } } @media only screen and (max-width: 640px) { .contactPage .contactAttribute { width:38%; } .contactPage .contactValue { width: 58%; } .contactPage input[type="text"] { width: 90%; } .contactPage textarea { width: 90%; } .contactPage .contactTitle h1 { font-size: 3em; } } /* =Flickr Page --------------- */ .flickrPage { width: 100%;} .flickrPage .title { background-image: url(../images/gallery-head.jpg); min-height: 90px; padding: 10px; text-align: center; color: #FFF; line-height: 90px; background-repeat: no-repeat; } .flickrPage .title span { background-image: url(../images/white-lightning.gif); display: inline-block; background-position: left; background-repeat: no-repeat; } .flickrPage .title span span { padding:0px 55px; background-image: url(../images/white-lightning-1.gif); background-position: right; background-repeat: no-repeat; } /* =gallery holder ------------------ */ .secondary .pageContent.GalleryHolder .content { width: 100%; } .GalleryHolder h1.title { background: url('../images/bottom-h1-grey.gif') left bottom repeat-x; color: #999; font-size: 3.8em; padding-bottom: 27px; padding-left: 3px; margin-bottom: 24px; } .GalleryHolder h1.title span { background: url('../images/event-list-h1-bg.jpg') right top no-repeat; padding-right: 91px; letter-spacing: 0.1em; } #galleryHolder { width: 103%; } #galleryHolder .item { float: left; width: 337px; max-width: 337px; } #galleryHolder .item { padding: 0px 20px 26px 0px; } #galleryHolder .item .categories { background-image: url(../images/programs-header.jpg); color: #FFF; padding: 0 4%; font-size: 1.2em; letter-spacing: 0.2em; min-height: 39px; line-height: 39px; } #galleryHolder .item .summary { background: #f2f2f2; padding: 17px 3.98936170212766%; } #galleryHolder .item .summary .innerSummary { overflow: hidden; } #galleryHolder .item .summary header { overflow: hidden; padding-bottom: 23px; } #galleryHolder .item .summary aside { float: left; width: 30%; height: 88px; text-align: center; background-image: url(../images/icon-bg.gif); padding: 4px 4px; } #galleryHolder .item .summary aside img { max-width: 100%; } #galleryHolder .item .summary .title { float: left; margin-left: 3.98936170212766%; color: #d72036; width: 60%; font-size: 2.6em; line-height: 0.9em; } #galleryHolder .item .summary p { margin-bottom: 0px; } #galleryHolder .item footer { min-height: 34px; line-height: 34px; background: url('../images/view-gallery.jpg') left top no-repeat; background-size: 100% 203%; -webkit-background-size: 100% 203%; -khtml-background-size: 100% 203%; -o-background-size: 100% 203%; -moz-background-size: 100% 203%;} #galleryHolder .item footer a { background: url('../images/view-gallery.jpg') left bottom no-repeat; background-size: 100% 200%; -webkit-background-size: 100% 200%; -khtml-background-size: 100% 200%; -o-background-size: 100% 200%; -moz-background-size: 100% 200%; opacity: 0; display: block; } #galleryHolder .item:hover footer a { opacity: 1; } #galleryHolder .item:hover h3 a { color: #FAB900; } /* =code programms page ------------------------ */ .threeColHolder { overflow: hidden; } .threeColHolder.borderBottom { background: url('../images/bottom-h1-grey.gif') left bottom repeat-x; color: #999999; padding-bottom: 27px; margin-bottom: 24px; } .threeColHolder.borderBottom a { color: #FFF; display:block; } .threeColHolder.borderBottom span.parent { color: #FFF; display: block; max-width: 303px; height: 76px; background: url('../images/purple-link.png') center no-repeat; background-size: 100% 100%; } .threeColHolder.borderBottom span.parent.red { background: url('../images/red-link.png') center no-repeat; background-size: 100% 100%; } .threeColHolder.borderBottom span.parent.blue { background: url('../images/blue-link.png') center no-repeat; background-size: 100% 100%; } .threeColHolder.borderBottom a.itemLink:hover span.parent { background: url('../images/ash-link.png') center no-repeat; } .threeColHolder.borderBottom span span { color: #FFF; /* padding: 14px 0px; height: 64px; display: block; width: 211px; float: right; font: 1.8em/0.9em 'warugaki'; margin-right: 30px; */ width: 211px; height: 76px; padding-left: 62px; font: 1.8em/0.9em 'warugaki'; display: table-cell; vertical-align: middle; } .threeColHolder .item { width: 33.333%; padding: 0px; max-width: 100%; } .threeColHolder .item .itemText { padding: 0px 26px 0px 13px; } .threeColHolder .item .itemText h1, .threeColHolder .item .itemText h2, .threeColHolder .item .itemText h3 { color: #000; padding-bottom: 35px; } .programs h1.title span { float: left; } .rightDropdown { float: right; width: 300px; height: 49px; background: url('../images/yellow-dd.png') center no-repeat !important; } .rightDropdown span { color: #fff; font: 0.35em/1.45em "museo-1","museo-2",serif; padding-right: 0!important; background: transparent !important; letter-spacing: 0.05em!important; margin: 10px 0px 0px 25px; cursor: pointer; display: block; float: none!important; height: 26px; overflow: hidden; } .rightDropdown ul { background: #f8c433 url('../images/yellow-dd-bg.png') bottom no-repeat !important; width: 100%; display: none; position: relative; z-index: 100000; padding-top: 20px; } .rightDropdown:hover ul { display: block; } .rightDropdown ul li { font: 0.3em/1.45em "museo-1","museo-2",serif !important; } .rightDropdown ul li a { color: #FFF; padding: 7px 26px; display: block; } .rightDropdown ul li a:hover, .rightDropdown ul li a.active { background: #FFF; background: rgba(255,255,255,0.5); } .overflowShow { overflow: visible!important; } @media only screen and (max-width: 700px){ .threeColHolder .item { width: 100%; padding: 0px; max-width: 100%; } } @media only screen and (max-width: 1125px){ .threeColHolder.borderBottom span.parent { } .threeColHolder.borderBottom span span { width: 160px; font: 1.8em/0.9em 'warugaki'; } } @media only screen and (max-width: 1023px){ .rightDropdown { float: left; } } @media only screen and (max-width: 960px){ .threeColHolder.borderBottom span.parent { color: #FFF; display: block; max-width: 303px; height: 76px; } .threeColHolder.borderBottom span span { width: 130px; font: 1.5em/0.9em 'warugaki'; } } @media only screen and (max-width: 656px){ .threeColHolder.borderBottom span.parent { margin: 0px auto; } .threeColHolder.borderBottom span span { /*padding: 14px 0px; height: 64px; */ width: 211px; font: 1.8em/0.9em 'warugaki'; } }