/* ===================== Typography Image Replacements ====================== */ /* IMAGE REPLACEMENTS */ .ImgReplacement {position:relative;margin:0px;padding:0px;overflow: hidden;text-indent:-2em;letter-spacing:-2em;font-size:-2em;} .ImgReplacement span {display:block;width:100%;height:100%;} h2.ImgReplacement {margin-bottom: 10px;} h2#WelcomeToSuttonImg {width:319px;height:61px;margin-left:20px;} h2#WelcomeToSuttonImg span {background:url(/media/images/welcome_to_sutton_55.png) no-repeat;} h2#SuttonYouthCentreImg {width:306px;height:34px;} h2#SuttonYouthCentreImg span {background:url(/media/images/sutton_youth_center_56.png) no-repeat;} h2#WeeklyProgramImg {width:212px;height:30px;} h2#WeeklyProgramImg span {background:url(/media/images/weekly_program_57.png) no-repeat;} h3#AwareImg {width:197px;height:74px;margin-left:30px;margin-top:65px;} h3#AwareImg span {background:url(/media/images/aware_47.png) no-repeat;} h2#PhotoGalleryImg {width:139px;height:30px;margin-left:14px;} h2#PhotoGalleryImg span {background:url(/media/images/photo_gallery_51.png) no-repeat;} h2#PollImg {width:210px;height:120px;margin-left:6px;} h2#PollImg span {background:url(/media/images/poll_52.png);} a#VoteNowImg {width:80px;height:49px;display:block;position:absolute;top:180px;right:10px;} a#VoteNowImg span {background:url(/media/images/vote_now_54.png) no-repeat;} input#VoteNowWhiteImg {width:80px;height:49px;background:url(/media/images/vote_now_white_184.gif) no-repeat;font-size:0;} .PollRightColumn input#VoteNowWhiteImg {margin-left:85px;} h2#NewsImg {width:83px;height:27px;} h2#NewsImg span {background:url(/media/images/news_49.png) no-repeat;} h2#MapImg {width:52px;height:26px;} h2#MapImg span {background:url(/media/images/map_58.png) no-repeat;} h2#ContactDetailsImg {width:167px;height:26px;} h2#ContactDetailsImg span {background:url(/media/images/contact_details_59.png) no-repeat;} h2#NewsArticleImg {width:187px;height:33px;margin-bottom:30px;} h2#NewsArticleImg span {background:url(/media/images/news_article_60.png) no-repeat;} h2#PhotoGalleryBigImg {width:209px;height:39px;margin-bottom:10px;} h2#PhotoGalleryBigImg span {background:url(/media/images/photo_gallery_big_75.png) no-repeat;} h2#Events {width:0;height:0;} h2#AlbumsImg {width:85px;height:26px;} h2#AlbumsImg span {background:url(/media/images/albums_160.png) no-repeat;} h2#PhotosImg {width:77px;height:30px;margin-right:140px;} h2#PhotosImg span {background:url(/media/images/photos_161.png) no-repeat;} /* ARROWS NAVIGATIONS */ ul.ArrowsNavigation li.UpOrange a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.UpOrange a span {background:url(/media/images/top_orange_arrow_153.png) no-repeat center left;} ul.ArrowsNavigation li.DownOrange a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.DownOrange a span {background:url(/media/images/bottom_orange_arrow_154.png) no-repeat center left;} ul.ArrowsNavigation li.UpGreen a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.UpGreen a span {background:url(/media/images/up_green_arrow_591.png) no-repeat center left;} ul.ArrowsNavigation li.DownGreen a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.DownGreen a span {background:url(/media/images/down_green_arrow_590.png) no-repeat center left;} ul.ArrowsNavigation li.LeftGreen a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.LeftGreen a span {background:url(/media/images/left_green_arrow_155.png) no-repeat center left;} ul.ArrowsNavigation li.RightGreen a {display:block;width:26px;height:26px;} ul.ArrowsNavigation li.RightGreen a span {background:url(/media/images/right_green_arrow_156.png) no-repeat center left;} /* HEADINGS */ h1 {text-indent:-2em;letter-spacing:-2em;font-size:-2em;padding:25px 0 0 30px;} h1 a {display:block;width:250px;height:60px;} h1,h2,h3,h4,h5 {color:#fff;} div.NewsArticle h3 {font-size:1.7em;margin-top:5px;margin-bottom:15px;} div.NewsArticle h4 {color:#2f2f2f;} /* === */ /* OTHER TYPOGRAPHY */ p.ComingSoon {font-size:1.54em;font-weight:bold;letter-spacing:0.6px;margin:10px;margin-left:30px;margin-right:20px;} a {text-decoration:underline;color:#ffffff;} .NewsSlim a, .EventsWide a {text-decoration:none;} p {line-height:1.48em;} div.WelcomeBox p.Intro {font-size:1.14em;font-weight:bold;letter-spacing:0.6px;margin-bottom:5px;margin-left:30px;margin-right:20px;} div.WelcomeBox p.text {margin:0 100px 10px 30px;} div.NewsArticleText {margin-left:20px;color:#2f2f2f;} div.NewsArticle p {margin-bottom:5px;} div.NewsArticle p.Intro {font-size:1.16em;color:#ffffff;} div.Sutton_Sout_Centre_CentreBox p {color:#646464;} div.Sutton_Sout_Centre_CentreBox p.Intro {font-size:1.14em;font-weight:bold;margin:3px 0;color:#ffffff;} div.Sutton_Sout_Centre_Bottom p.SmallParagraph {width:220px;font-size:0.96em;color:#ffffff;} div.PhotoGalleryRightBox p {margin-left:10px;} div.PhotoGalleryRightBox p.FramedImg {background:url(/media/images/frame_22.png) no-repeat top left;width:159px;height:160px;padding-left:15px;padding-top:7px;} div.PhotoGalleryRightBox p.Caption {padding-left:10px;font-size:1.15em;font-weight:bold;} div.PollRightBox p.Question {margin-left:20px;margin-right:20px;font-size:1.15em;font-weight:bold;line-height:1em;} div.NewsArticle p.NewsArticleDate {color:#ffd400;font-size:0.96em;font-weight:bold;font-family:arial,sans-serif;border:1px solid #b4c34d;padding:0 20px;width:150px;margin:3px 0;} div.ContactRightBox p {padding:5px 15px 0 15px;font-size:0.86em;line-height:1.22em;} div.FirstBox { margin-top: 27px; } div.FirstBoxHome { margin-top: 30px; } /* === */ /* ============================= Structural Divs ============================ */ /* ########### Looks like this section needs a lot of updating ############## */ div#Wrapper {margin:0px auto;text-align:left;width:935px;background:url(/media/images/wrapperbg_35.gif) no-repeat;position:relative;} div#Header {height:245px;position:relative;} div.HeadSearch {width:216px;height:56px;background:url(/media/images/HeadSearchBg_25.jpg) no-repeat;position:absolute;bottom:18px;right:0;padding:4px 0 0 14px;} div.HeadSearch input.text_input {background:#feffff;border:none;font-size:1em;width:120px;padding:2px;} div.HeadSearch input.submit_input {background:transparent;font-weight:bold;color:#2e1858;font-size:1.16em;margin-left:8px;} div.HeadSearch input.submit_input:hover {cursor:pointer;} div#Sidebar {width:210px;height:500px;padding-top:30px;} /* === */ div#MainContent {width:710px;z-index:10;position:relative;} div.HomePageTop {display:block;} div.SuttonCentreTop {height:705px;display:block;position:relative;} div.NewsTop {display:block;} div.NewsArticleTop {display:block;position:relative;} div.GalleryTop {display:block;position:relative;height:698px;} div.PollFillTop {display:block;} /* MAIN BOXES - the boxes displayed in the center of the page */ div.WelcomeBox {width:474px;height:521px;background:url(/media/images/welcome_box_bg_166.png) no-repeat;} div.PhotoGalleryBig {width:454px;height:471px;background:url(/media/images/centrebox_photo_gallery_bg_90.png) no-repeat;padding:0 10px;} div.SuttonCentreCentreBox {width:474px;height:485px;background:url(/media/images/centrebox_syc_bg_93.png) no-repeat;position:relative;} div.SuttonCentreBottom {margin-top:15px;width:220px;font-size:0.96em;} div.PhotoBox {position:absolute;top:16px;right:0;width:220px;height:240px;} div.News, div.NewsArticle {width:434px;height:765px;background:url(/media/images/standardbg_204.gif) no-repeat;padding:0 20px;position:relative;} div.PollFill {width:434px;height:765px;background:url(/media/images/poll_fill_bg_183.jpg) no-repeat;padding:0 20px 0 20px;} div.standardBox {height: 700px;} /* === */ /* RIGHT BOXES - secondary boxes shown in the right sidebar */ div.MapRightBox {width:217px;height:231px;background:url(/media/images/rightbox_map_bg_94.png) no-repeat;margin-top:32px;padding:0 5px 0 5px;} div.ContactRightBox {width:217px;height:220px;background:url(/media/images/rightbox_contact_bg_95.png) no-repeat;padding:0 5px 0 5px;} div.SYRightBox {width:227px;height:239px;background:url(/media/images/syspanelempty_538.png) no-repeat;margin:10px 0;position:relative} div.SYRightBox div.FlashOrangeMan {position:absolute;top:40px;left:-15px;} div.PollRightBox {width:227px;height:235px;background:url(/media/images/rightbox_poll_bg_97.png) no-repeat;} div.InsidePoll {position:relative} div.HomePageTop div.PollRightBox {margin-top:13px;} div.NewsArticleTop div.PollRightBox {margin-top:40px;} div.PhotoGalleryRightBox {width:227px;height:231px;background:url(/media/images/rightbox_photo_gallery_bg_98.png) no-repeat;} div.HomePageTop div.PhotoGalleryRightBox {margin-top:30px;} div.AlbumsRightBox {width:207px;height:413px;background:url(/media/images/bg_albums_157.png) no-repeat;margin-top:30px;padding:0 10px;} /* === */ div#MainBottom {width:710px;padding-top:10px;} /* NEWS SLIM */ div.NewsSlim {width:227px;height:302px;background:url(/media/images/news_bg_167.png) no-repeat;} ul.NewsSlimList {margin-left:22px;margin-top:38px;} ul.NewsSlimList li {margin-bottom:8px;} ul.NewsSlimList p.NewsDate {color:#ffd400;font-size:0.96em;font-weight:bold;font-family:arial,sans-serif;} ul.NewsSlimList p.NewsTitle {font-size:1.16em;line-height:0.96em;font-weight:bold;} /* EVENTS SLIM */ div.EventsSlim {width:227px;height:335px;background:url(/media/images/events_slim_bg_70.png) no-repeat;position:absolute;bottom:0px;left:0;} div.EventsSlim img {margin-left:13px;margin-top:2px;} ul.EventsSlimList {margin-left:22px;margin-top:5px;margin-right:50px;} ul.EventsSlimList li {margin-bottom:8px;} ul.EventsSlimList p.EventsDate {color:#703724;font-size:0.96em;font-weight:bold;font-family:arial,sans-serif;} ul.EventsSlimList p.EventsTitle {font-size:1.16em;line-height:0.96em;font-weight:bold;} /* EVENTS WIDE */ div.EventsWide {width:448px;height:268px;padding-left:19px;padding-top:35px;background:url(/media/images/events_bg_19.png) no-repeat;position:relative;} ul.EventsWideList li {width:207px;float:left;display:inline;margin-right:5px;} ul.EventsWideList li p.EventTitle {font-weight:bold;margin-bottom:6px;} ul.EventsWideList li p.EventDescription {color:#6f3624;font-size:0.9em;padding-right:20px;line-height:1.46em;} /* WEEKLY PROGRAM WIDE */ div.WeeklyProgram {width:448px;height:213px;padding-left:19px;background:url(/media/images/weekly_program_bg_71.png) no-repeat;position:absolute;right:0;bottom:0;} ul.WeeklyProgramList {font-size:1em;margin-top:10px;} ul.WeeklyProgramList li {float:left;display:inline;} ul.WeeklyProgramList li p {display:block;float:left;} ul.WeeklyProgramList li p.WeekDay {font-weight:bold;color:#36205d;width:100px;padding-right:15px;} ul.WeeklyProgramList li p.ProgrammedActivity {width:200px;padding-right:10px;} ul.WeeklyProgramList li p.Time {} /* PHOTOS WIDE */ div.PhotosBottom {width:710px;height:244px;background:url(/media/images/bg_photos_158.png) no-repeat;position:absolute;right:0;bottom:0;} div#Footer {width:710px;height:192px;margin-top:15px;background:url(/media/images/footer_bg_21.png) no-repeat;padding-left:20px;padding-top:5px;} ul.FooterContacts li {display:inline;margin-right:20px;} div#RightCircles {height:120px;width:130px;background:url(/media/images/right_circles_32.jpg) no-repeat;position:absolute;right:-65px;top:500px;z-index:1;} div.SlideshowThumbs, div.albumList ul {overflow:hidden;} div.AlbumsRightBox ul.ArrowsNavigation {margin-top:5px;} div.PhotosBottom ul.ArrowsNavigation {clear:both;margin-top:3px;margin-right:5px;} ul.ArrowsNavigation li {float:left;display:inline;width:26px;margin-left:2px;} /* ==================== BODY, ERASER AND TOOLBOX CLASSES ==================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td {border:none;padding:0;margin:0; } html {border:none;margin:0;padding:0;} body {text-align:center;margin:0;padding:0;font-size:76%;font-family:verdana,arial,tahoma,sans-serif;margin:0;padding:0;background:#feffff;color:#ffffff;} ul {list-style:none;} .Fleft {float:left;display:inline;} .Fright {float:right;display:inline;} .ClearL {clear:left;} .ClearR {clear:right;} .ClearB {clear:both;} .Clearer {font-size:0;line-height:0;height:0;clear:both;} .SemiTrans {background:url(/media/images/semitrans_33.png);} .Hide {display:none;} .ZeroHeight {height:0px;} .AbsolutePosition {position:absolute;} /* =================== HEADINGS ==================== */ h3 {font-size: 1.3em;} /* LAST CSS INSERTED ON TUESDAY MAY 20th */ a:hover {cursor:pointer;} .PhotoGalleryRightBox a {text-decoration:none} /* 28th may */ .SCBTop {height:235px;padding:0 10px 0 20px;} .SCBBottom {height:248px;padding:0 10px 0 20px;position:relative;} .SCBBottom div.caption { width: 210px; float: left; display: inline; padding-top:25px;} div.ArrNavContainer {height:26px;padding:1px 5px 0px 390px;position:absolute;bottom:0px;} ul.ArrowsNavigation {width:57px;text-indent:0;letter-spacing:0;font-size:0;float:right;display:inline;} div#SearchResults ul li {margin-bottom:10px;} li#prevLink {float:left;display:inline;margin-right:10px;font-weight:bold} li#nextLink {float:left;display:inline;margin-right:10px;font-weight:bold;} div.homepageHeader { background:url(/media/images/homepage_649.jpg) no-repeat left;} div.newsHeader {background:url(/media/images/news_650.jpg) no-repeat left;} div.eventsHeader {background:url(/media/images/events_651.jpg) no-repeat left;} div.photogalleryHeader {background:url(/media/images/photogallery_652.jpg) no-repeat left;} div.centresHeader {background:url(/media/images/centres_653.jpg) no-repeat left;} div.activitiesHeader {background:url(/media/images/activities_654.jpg) no-repeat left;} div.projectsHeader {background:url(/media/images/projects_655.jpg) no-repeat left;} div.youthfundHeader {background:url(/media/images/youthfund_656.jpg) no-repeat left;} div.connexionsLanderHeader {background:url(/media/images/connexionslander_1084.jpg) no-repeat left;} div.staffareaHeader {background:url(/media/images/staffarea_657.jpg) no-repeat left;} div.linksHeader {background:url(/media/images/links_658.jpg) no-repeat left;} div.pollsHeader {background:url(/media/images/polls_659.jpg) no-repeat left;} div.searchresultsHeader {background:url(/media/images/searchresults_660.jpg) no-repeat left;} div.404Header {background:url(/media/images/404_661.jpg) no-repeat left;} h2#newsImg {width:84px;height:40px;}h2#newsImg span {background:url(/media/images/news_202.png) no-repeat;}h2#eventsImg {width:101px;height:40px;}h2#eventsImg span {background:url(/media/images/events_205.png) no-repeat;}h2#centresImg {width:119px;height:40px;}h2#centresImg span {background:url(/media/images/centres_206.png) no-repeat;}h2#activitiesImg {width:149px;height:40px;}h2#activitiesImg span {background:url(/media/images/activities_742.png) no-repeat;}h2#projectsImg {width:123px;height:40px;}h2#projectsImg span {background:url(/media/images/projects_192.png) no-repeat;}h2#youthfundImg {width:182px;height:40px;}h2#youthfundImg span {background:url(/media/images/youthfund_636.png) no-repeat;}h2#connexionsLanderImg {width:170px;height:40px;}h2#connexionsLanderImg span {background:url(/media/images/connexionslander_1082.png) no-repeat;}h2#staffareaImg {width:154px;height:40px;}h2#staffareaImg span {background:url(/media/images/staffarea_788.png) no-repeat;}h2#linksImg {width:84px;height:40px;}h2#linksImg span {background:url(/media/images/links_208.png) no-repeat;}h2#pollsImg {width:px;height:px;}h2#pollsImg span {background:url() no-repeat;}h2#searchresultsImg {width:218px;height:40px;}h2#searchresultsImg span {background:url(/media/images/searchresults_642.png) no-repeat;}h2#404Img {width:px;height:px;}h2#404Img span {background:url() no-repeat;} h2#thequadImg {width:317px;height:40px;}h2#thequadImg span {background:url(/media/images/thequad_210.png) no-repeat;}h2#suttonyouthcentreImg {width:285px;height:40px;}h2#suttonyouthcentreImg span {background:url(/media/images/suttonyouthcentre_455.png) no-repeat;}h2#CenturyImg {width:308px;height:40px;}h2#CenturyImg span {background:url(/media/images/century_215.png) no-repeat;}h2#YouthZoneImg {width:162px;height:40px;}h2#YouthZoneImg span {background:url(/media/images/youthzone_216.png) no-repeat;} h2#PAYPImg {width:78px;height:40px;}h2#PAYPImg span {background:url(/media/images/payp_218.png) no-repeat;}h2#summeruniImg {width:184px;height:40px;}h2#summeruniImg span {background:url(/media/images/summeruni_219.png) no-repeat;}h2#youthparliamentImg {width:260px;height:43px;}h2#youthparliamentImg span {background:url(/media/images/youthparliament_1407.png) no-repeat;}h2#youthfmImg {width:140px;height:40px;}h2#youthfmImg span {background:url(/media/images/youthfm_220.png) no-repeat;}h2#DetachedyouthteamImg {width:306px;height:40px;}h2#DetachedyouthteamImg span {background:url(/media/images/detachedyouthteam_222.png) no-repeat;}h2#DofEImg {width:207px;height:40px;}h2#DofEImg span {background:url(/media/images/dofe_223.png) no-repeat;}h2#SaturdayintegratedImg {width:139px;height:40px;}h2#SaturdayintegratedImg span {background:url(/media/images/saturdayintegrated_224.png) no-repeat;}h2#AdventureImg {width:157px;height:40px;}h2#AdventureImg span {background:url(/media/images/adventure_225.png) no-repeat;}h2#diversionsImg {width:162px;height:40px;}h2#diversionsImg span {background:url(/media/images/diversions_693.png) no-repeat;} .holder {margin-top:30px;float:left;margin-bottom:10px;} div.pane-stretcher {float: left;height: 700px;} div.scroll-pane {width: 470px;} div.scroll-pane ul {float:left; margin:0; padding:0; width: 440px;} div.scroll-pane li {float:left;clear:both; margin-bottom:20px;width:440px;} div.scroll-pane li div.PaneThumb {margin-right:5px;float:left;display:inline;width:142px;} div.scroll-pane li div.PaneDetails {float:left;display:inline;width:285px;} div.scroll-pane li div.PaneDetails p.PaneDate {color:#ffd400;font-size:0.96em;font-weight:bold;font-family:arial,sans-serif;float:left;} div.scroll-pane li div.PaneDetails p.PaneTitle {font-size:1.16em;line-height:0.96em;font-weight:bold;} div.scroll-pane li div.PaneDetails p.PaneText {font-size:0.94em;} div.scroll-pane { position: relative; overflow: auto; float: left; height:630px; } ul#SideNav li.sn_home a {width:62px;height:26px;display:block;} ul#SideNav li.sn_home a span {background:url(/media/images/sn_home_78.png) no-repeat;} ul#SideNav li.sn_news a {width:61px;height:26px;display:block;} ul#SideNav li.sn_news a span {background:url(/media/images/sn_news_79.png) no-repeat;} ul#SideNav li.sn_events a {width:73px;height:26px;display:block;} ul#SideNav li.sn_events a span {background:url(/media/images/sn_events_80.png) no-repeat;} ul#SideNav li.sn_centres a {width:84px;height:25px;display:block;} ul#SideNav li.sn_centres a span {background:url(/media/images/sn_centres_152.png) no-repeat;} ul#SideNav li.sn_projects a {width:90px;height:29px;display:block;} ul#SideNav li.sn_projects a span {background:url(/media/images/sn_projects_82.png) no-repeat;} ul#SideNav li.sn_youthfund a {width:126px;height:29px;display:block;} ul#SideNav li.sn_youthfund a span {background:url(/media/images/youthfunds_635.png) no-repeat;} ul#SideNav li.sn_photogallery a {width:143px;height:29px;display:block;} ul#SideNav li.sn_photogallery a span {background:url(/media/images/sn_photo_gallery_84.png) no-repeat;} ul#SideNav li.sn_staffarea a {width:111px;height:26px;display:block;} ul#SideNav li.sn_staffarea a span {background:url(/media/images/sn_staff_area_85.png) no-repeat;} ul#SideNav li.sn_links a {width:62px;height:26px;display:block;} ul#SideNav li.sn_links a span {background:url(/media/images/sn_links_86.png) no-repeat;} ul#SideNav li.sn_sitemap a {width:94px;height:29px;display:block;} ul#SideNav li.sn_sitemap a span {background:url(/media/images/sn_sitemap_87.png) no-repeat ;} ul#SideNav li.sn_activities a {width:111px;height:33px;display:block;} ul#SideNav li.sn_activities a span {background:url(/media/images/activities_595.png) no-repeat;} ul#SideNav li.sn_connexionsLander a {width:125px;height:29px;display:block;} ul#SideNav li.sn_connexionsLander a span {background:url(/media/images/connexionslander_1079.png) no-repeat;} ul#SideNav li {margin:4px 0;} ul#SideNav li a {margin:0;font-size:0;text-indent:-2em;letter-spacing:-2em;} ul#SideNav li a:hover span {background-position:bottom left;} ul#SideNav li.sn_active a {background:url(/media/images/nav_arrow_orange_88.png) no-repeat left bottom;min-height:26px;padding:0;} ul#SideNav li.sn_active a span {margin-left:30px;background-position:bottom left;} /* SIDE SUB NAVIGATION */ /* This allows thethe SideSubNav li elements to avoid inheriting the properties that are supposed to be applied only to the SideNav */ ul#SideNav li.sn_active ul#SideSubNav li a {background:none;} ul#SideSubNav li.ssn_thequad a {width:96px;height:33px;clear:both;}ul#SideSubNav li.ssn_thequad a span {background:url(/media/images/thequad_238.png) no-repeat;}ul#SideSubNav li.ssn_suttonyouthcentre a {width:101px;height:33px;clear:both;}ul#SideSubNav li.ssn_suttonyouthcentre a span {background:url(/media/images/suttonyouthcentre_237.png) no-repeat;}ul#SideSubNav li.ssn_Century a {width:90px;height:33px;clear:both;}ul#SideSubNav li.ssn_Century a span {background:url(/media/images/century_234.png) no-repeat;}ul#SideSubNav li.ssn_YouthZone a {width:115px;height:33px;clear:both;}ul#SideSubNav li.ssn_YouthZone a span {background:url(/media/images/youthzone_233.png) no-repeat;} ul#SideSubNav li.ssn_PAYP a {width:59px;height:33px;clear:both;}ul#SideSubNav li.ssn_PAYP a span {background:url(/media/images/payp_243.png) no-repeat;}ul#SideSubNav li.ssn_summeruni a {width:132px;height:33px;clear:both;}ul#SideSubNav li.ssn_summeruni a span {background:url(/media/images/summeruni_244.png) no-repeat;}ul#SideSubNav li.ssn_youthparliament a {width:189px;height:33px;clear:both;}ul#SideSubNav li.ssn_youthparliament a span {background:url(/media/images/youthparliament_1410.png) no-repeat;}ul#SideSubNav li.ssn_youthfm a {width:104px;height:33px;clear:both;}ul#SideSubNav li.ssn_youthfm a span {background:url(/media/images/youthfm_260.png) no-repeat;}ul#SideSubNav li.ssn_Detachedyouthteam a {width:164px;height:33px;clear:both;}ul#SideSubNav li.ssn_Detachedyouthteam a span {background:url(/media/images/detachedyouthteam_259.png) no-repeat;}ul#SideSubNav li.ssn_DofE a {width:67px;height:33px;clear:both;}ul#SideSubNav li.ssn_DofE a span {background:url(/media/images/dofe_264.png) no-repeat;}ul#SideSubNav li.ssn_Saturdayintegrated a {width:99px;height:33px;clear:both;}ul#SideSubNav li.ssn_Saturdayintegrated a span {background:url(/media/images/saturdayintegrated_456.png) no-repeat;}ul#SideSubNav li.ssn_Adventure a {width:109px;height:33px;clear:both;}ul#SideSubNav li.ssn_Adventure a span {background:url(/media/images/adventure_256.png) no-repeat;}ul#SideSubNav li.ssn_diversions a {width:123px;height:33px;clear:both;}ul#SideSubNav li.ssn_diversions a span {background:url(/media/images/diversions_678.png) no-repeat;} ul#SideSubNav {clear:both;font-size:3em;color:#000000;letter-spacing:1em; margin-top: 5px;} ul#SideSubNav li {margin:0;} ul#SideSubNav li a {background:none;} ul#SideSubNav li.ssn_active {background:url(/media/images/nav_arrow_orange_88.png) no-repeat left 4px;min-height:26px;margin-left:30px;} ul#SideSubNav li.ssn_active a span {background-position:bottom;margin-left:30px;} ul#SideSubNav li a:hover span {background-position:bottom left;} DIV.SlideshowThumbs UL li.current a img { border-color: #fff; } DIV.SlideshowThumbOuter { float:left; width:500px; margin-top: 10px; } DIV.SlideshowThumbs { float:left; margin-left: 20px; width:500px; height: 160px; } DIV.SlideshowThumbs UL { clear: both; } DIV.SlideshowThumbs UL LI { float: left; margin-right:5px; margin-bottom: 5px; } DIV.SlideshowThumbs UL LI A { outline: none; } DIV.SlideshowThumbs UL LI A IMG { border: solid #FF3F01 2px; border-width: 4px 4px 8px 4px; } DIV.SlideShowPanel { padding-left: 10px; } DIV.SlideShowPolaroid { width:321px; height: 321px; } P.PolaroidCaption { width: 360px; float: left; display: inline; height: 1em; } /***********album************/ DIV.albumList { margin-top: 20px; margin-left: 10px; } DIV.albumList UL { height: 330px; } DIV.albumList UL LI { height: 62px; clear: both; margin-bottom: 5px; } DIV.albumList UL LI A, DIV.albumlist UL LI DIV { float: left; display: inline; } DIV.albumList UL LI DIV { width: 100px; float: left; margin-left: 5px; } /* ============================== jScrollPane CSS ============================== */ .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #aaa; } .jScrollPaneDrag { position: absolute; background: #666; cursor: pointer; overflow: hidden; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowUp:hover { /*background-color: #f60;*/ } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowDown:hover { /*background-color: #f60;*/ } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ } /* Recent Styles for the Gallery Page */ .GalleryImage {background:url(/media/images/gallery_big_frame_188.png) no-repeat top left;padding:15px 0px 0 15px;width:346px;height:366px;} .albumDetail h3 {font-size:1.14em;} .PhotosBottom .albumDetail {margin-top:10px;} h2#CentralPollImg {width:61px;height:39px;} h2#CentralPollImg span {background:url(/media/images/central_poll_181.png);} h2#pollsImg, h2#pollsImgTop {width:193px;height:39px; position:absolute;top:335px;} h2#pollsImg span, h2#pollsImgTop span { background:url(/media/images/take_this_poll_182.png);} h2#pollsListImg {width:193px;height:39px;} h2#pollsListImg span { background:url(/media/images/take_this_poll_182.png);} h2#pollsImgTop {top:10px;} ul.PollResults {margin-left:20px;margin-top:20px;} ul.PollResults li {clear:both;display:block;height:20px;line-height:20px;margin-bottom:5px;} ul.PollResults li div {float:left;display:inline;} ul.PollResults li div.PollLeftColumn {color:#ffffff;width:100px;font-size:1.1em;margin-right:10px;} ul.PollResults li div.PollRightColumn {width:300px;} ul.PollResults li div.PollRightColumn div.Trigger {border:1px solid #b4c34d;margin-right:5px;width:245px;} ul.PollResults li.CentralPollTitle {margin-bottom:20px;min-height:45px;} ul.PollResults li.CentralPollTitle div.PollLeftColumn {font-size:1.3em;font-weight:bold;} ul.PollResults li.CentralPollTitle div.PollRightColumn h3 {color:#ffd400;font-weight:bold;font-size:1.4em;line-height:0.9em;} div.CurrentPoll {margin-left:20px;margin-top:20px;position:absolute;top:370px;} div.CurrentPollTop {margin-left:20px;margin-top:20px;position:absolute;top:40px;} div.CurrentPoll div.PollLeftColumn {color:#ffffff;width:100px;font-size:1.1em;margin-right:10px;float:left;display:inline;} div.CurrentPoll div.PollRightColumn {width:300px;float:left;display:inline;} div.CurrentPoll div.Question {margin-bottom:20px;min-height:45px;} div.CurrentPoll div.Question div.PollLeftColumn {font-size:1.3em;font-weight:bold;} div.CurrentPoll div.Question div.PollRightColumn h3 {color:#ffd400;font-weight:bold;font-size:1.4em;line-height:0.9em;} div.CurrentPoll div.Question div.PollRightColumn input {clear:both;} ul.PollOptions li {line-height:1.76em;} ul.PollOptions li label {display:block;float:left;width:150px;} div.SearchFormZone{position:relative; margin-left:28px}div.SearchFormZone div.ResultsZone p {font-size:18px}div.SearchFormZone div.OfferZone{border-bottom:1px dotted white;clear:both;margin-bottom:10px;padding-bottom:2px; margin-left:38px; width:355px;float:left; display:inline}div.SearchFormZone div.OfferZone div.HeadingZone{float:right; width:240px; font-weight:bold; margin-bottom:5px}div.SearchFormZone div.OfferZone div.ImageZone{float:left; width:80px;height:70px; overflow:hidden;}div.SearchFormZone div.OfferZone div.ImageZone img{width:80px !important}div.SearchFormZone div.OfferZone div.DescriptionZone{float:right; width:240px}div.SearchFormZone div.OfferZone div.DescriptionZone p{width:222px; height:48px; overflow:hidden; font-size:11px}div.SearchFormZone div.MoreZone{float:right; clear:both;}div.SearchFormZone div.MoreZone a{color:#4D4D4D; text-transform:uppercase; text-decoration:none}div.SearchFormZone div.Rating{display:none}div.standardBox h2.Search{color:#FFD300;font-size:22px;font-weight:bold}div.standardBox a.refine{font-size:10px;text-transform:uppercase;background:url(/media/images/advSearch_935.png) no-repeat -10px top; padding-right:21px; display:block; height:21px; text-decoration:none;width:155px;padding-top:4px}div.standardBox a.back{font-size:9px;text-transform:uppercase;background:url(/media/images/backbtn_930.gif) no-repeat top left; padding-left:17px; padding-top:3px; display:block; height:21px; width:155px; text-decoration:none; position:absolute; top:55px; right:0px}div.SearchFormZone a.back{font-size:9px;text-transform:uppercase;background:url(/media/images/backbtn_930.gif) no-repeat top left; padding-left:17px; padding-top:3px; display:block; height:21px; width:155px; text-decoration:none; position:absolute; top:11px; right:0px}div.pagination{margin-left:110px}div.pagination a{float:left; border-right:1px solid white;padding-left:4px;width:10px;}div.pagination a.pagination_last{border-right:none}div.pagination a.pagination_current{}div.pagination a.previous{background:url(/media/images/backBtn_932.png) no-repeat top left;border:0 none;color:#4D4D4D;float:left;font-size:10px;height:22px;padding-right:15px;padding-top:3px;text-align:right;text-decoration:none;width:63px;}div.pagination a.next{background:url(/media/images/nextBtn_931.png) no-repeat top left;height:22px; width:82px; float:left; color:#4D4D4D; border:0 none; text-decoration:none; margin-left:10px;font-size:10px; padding-top:3px; padding-left:8px}form.advancedSearch{margin-left:52px;margin-top:15px;width:280px; font-family:verdana; color:#4D4D4D; font-size:12px}form.advancedSearch label{width:100px; float:left}form.advancedSearch input{width:178px; float:left; background:#E4EABF; height:17px}form.advancedSearch input#StartDate, form.advancedSearch input#EndDate{margin-right:1px;width:150px;}form.advancedSearch select{width:179px; float:left}form.advancedSearch div{margin-bottom:5px; float:left; width:100%; clear:both}form.advancedSearch div.StartDateZone img, form.advancedSearch div.EndDateZone img{margin-top:-1px}form.advancedSearch input.SearchButton{width:108px; height:33px; background:url(/media/images/searchBtn_951.png) no-repeat left top; color:#fff; font-weight:bold; margin-top:16px; float:right; padding-bottom:6px; border:0 none}ul.thingsToDo{width:300px; margin-left:77px}ul.thingsToDo li{background:url(/media/images/whiteArrow_955.gif) no-repeat left top; cursor:pointer;font-weight:bold;height:22px;margin-bottom:6px;padding-left:30px;padding-top:2px;width:179px;}ul.thingsToDo li:hover{background:url(/media/images/orangeArrow_954.gif) no-repeat left top}ul.thingsToDo li a{text-decoration:none}h2.bigYellow{color:#FFD300;font-size:22px;font-weight:bold}div.updateTtd{margin-left: 77px; border-top:1px dotted #fff; float:left; width:300px}div.MoreInfoZone{position:relative; padding-top:85px; margin-left:30px; width:96%}div.MoreInfoZone div.HeadingLabel,div.MoreInfoZone div.CommentsZone{display:none}div.MoreInfoZone div.Heading{font-size:22px;font-weight:bold}div.MoreInfoZone div.BriefLabel{display:none}div.MoreInfoZone div.Brief{background:url(/media/images/dotsGif_956.gif) no-repeat 50px bottom;margin-bottom:7px;padding-bottom:18px;}div.MoreInfoZone div.ImageZone{position:absolute; top:0px; left:0px; height:80px; width:80px; overflow:hidden}div.ClubCostLabel,div.TelephoneLabel,div.VenueLabel,div.VenuePostcodeLabel,div.VenueCountyLabel,div.VenueTownLabel,div.VenueAdd2Label,div.VenueAdd1Label,div.StartDateLabel,div.EndDateLabel,div.EventStartTimeLabel,div.EventEndTimeLabel,div.MoreInfoZone div.DescriptionLabel,div.MoreInfoZone div.DaysLabel,div.MoreInfoZone div.TimesLabel,div.MoreInfoZone div.AgeRangeLabel,div.MoreInfoZone div.EmailLabel,div.MoreInfoZone div.WebsiteLabel,div.MoreInfoZone div.CommentsZone{float:left; width:98px; margin-left:50px}div.ClubCost,div.Telephone,div.Venue,div.VenuePostcode,div.VenueCounty,div.VenueTown,div.VenueAdd1,div.StartDate,div.EndDate,div.EventStartTime,div.EventEndTime,div.MoreInfoZone div.VenueAdd2,div.MoreInfoZone div.Description, div.MoreInfoZone div.Days, div.MoreInfoZone div.Times,div.MoreInfoZone div.AgeRange, div.MoreInfoZone div.Email, div.MoreInfoZone div.Website{float:left; width:200px; font-weight:bold; margin-bottom:10px}div.VenueAdd1Label p, div.VenueAdd2Label p, div.VenueAdd3Label p{line-height:12px; margin-top:-3px;}div.buttons a.back{font-size:9px;text-transform:uppercase;background:url(/media/images/backbtn_930.gif) no-repeat top left; padding-left:17px; padding-top:3px; display:block; height:21px; width:155px; text-decoration:none; float:right; z-index:9999;} /* This is a very basic stylesheet for the date-picker. Feel free to create your own. *//* Hide the input by using a className */input.fd-hidden-input,select.fd-hidden-input { display:none; }/* Screen reader class - hides it from the visual display */.fd-screen-reader { position:absolute; left:-999em; top:0; width:1px; height:1px; overflow:hidden; outline: 0 none;-moz-outline: 0 none; } /* Disabled datePicker and activation button */a.dp-disabled,.dp-disabled table { opacity:.3 !important; filter:alpha(opacity=40); }.dp-disabled,.dp-disabled td,.dp-disabled th,.dp-disabled th span { cursor:default !important; }a.date-picker-control:focus,div.datePicker table td:focus { overflow:hidden; outline:0 none;-moz-outline: 0 none;color:rgb(100,130,170) !important; }/* The wrapper div */div.datePicker { position:absolute; z-index:9999; text-align:center; /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */ font:900 0.8em/1em Verdana, Sans-Serif; /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */ /* font:900 77%/77% Verdana, sans-serif; */ /* Or, if you prefer a pixel precision */ /* font:900 12px/12px Verdana, sans-serif; */ background:transparent; /* Mozilla & Webkit extensions to stop text-selection. */ -moz-user-select:none; -khtml-user-select:none; } /* Styles for the static datePickers */div.static-datepicker { position:relative; top:5px; left:0; }div.datePicker table { width:auto; height:auto; } /* Draggable datepickers */div.datePicker tfoot th.drag-enabled,div.datePicker thead th.drag-enabled,div.datePicker thead th.drag-enabled span { cursor:move; }/* The iframe hack to cover selectlists in Internet Explorer <= v6 */iframe.iehack { position:absolute; background:#fff; z-index:9998; padding:0; border:0; display:none; margin:0; }/* The "button" created beside each input for non-static datePickers */a.date-picker-control:link,a.date-picker-control:visited { position:relative; /* Moz & FF */ display: -moz-inline-stack; border:0 none; padding:0; margin:0 0 0 4px; background:transparent url(/media/images/cal_950.gif) no-repeat 50% 50%; min-width:16px; line-height:1; cursor:pointer; visibility:visible; text-decoration:none; vertical-align:top; }a.date-picker-control:hover,a.date-picker-control:active,a.date-picker-control:focus,a.dp-button-active:link,a.dp-button-active:visited,a.dp-button-active:hover,a.dp-button-active:active,a.dp-button-active:focus { background:transparent url(/media/images/cal_950.gif) no-repeat 50% 50% !important; }/* Feed IE6 the following rule, IE7 should handle the min-width declared above */* html a.date-picker-control { width:16px; }/* IE, Safari & Opera. Seperate CSS rule seems to be required. */a.date-picker-control { display:inline-block; }a.date-picker-control span { display:block; width:21px; height:20px; margin:auto 0; }/* Default "button" styles */div.datePicker thead th span { display:block; padding:0; margin:0; text-align:center; line-height:1em; border:0 none; background:transparent; font-weight:bold; cursor:pointer; }/* The "month, year" display */div.datePicker th span.month-display,div.datePicker th span.year-display { display:inline; text-transform:uppercase; letter-spacing:1px; font:normal 1.2em Verdana, Sans-Serif; cursor:default; }/* Next & Previous (month, year) buttons */div.datePicker th span.prev-but,div.datePicker th span.next-but { font-weight:lighter; font-size:2.4em; font-family: georgia, times new roman, palatino, times, bookman, serif; cursor:pointer !important; }/* Hover effect for Next & Previous (month, year) buttons */div.datePicker th span.prev-but:hover,div.datePicker th span.next-but:hover,div.datePicker th span.today-but:hover { color:#a84444; }/* Today button */div.datePicker th span.today-but { text-align:center; margin:0 auto; font:normal 1em Verdana, Sans-Serif; width:100%; text-decoration:none; padding-top:0.3em; text-transform:uppercase; vertical-align:middle; cursor:pointer !important }/* Disabled buttons */ div.dp-disabled th span.prev-but,div.dp-disabled th span.next-but,div.dp-disabled th span.today-but,div.dp-disabled th span.prev-but:hover,div.dp-disabled th span.next-but:hover,div.dp-disabled th span.today-but:hover,div.datePicker th span.prev-but.fd-disabled:hover,div.datePicker th span.next-but.fd-disabled:hover,div.datePicker thead th span.fd-disabled,div.datePicker th span.fd-disabled:hover { color:#aaa; cursor:default !important; } /* The mon, tue, wed etc day buttons */div.datePicker th span.fd-day-header { text-align:center; margin:0 auto; font:900 1em Verdana, Sans-Serif; text-decoration:none; text-transform:lowercase; cursor:pointer; }/* The table */div.datePicker table { margin:0; padding:0px; border:1px solid #ccc; background:#fff url(/media/images/gradient-e5e5e5-ffffff_1002.gif) repeat-x 0 -20px; text-align:center; border-spacing:2px; padding:0.3em; width:auto; empty-cells:show; -moz-border-radius:0.8em; border-radius:0.8em; }/* Common TD & TH styling */div.datePicker table td,div.datePicker table tbody th { border:0 none; padding:0; text-align:center; vertical-align:middle; cursor:pointer; background:#fff url(/media/images/gradient-e5e5e5-ffffff_1002.gif) repeat-x 0 -40px; width:3em; height:3em; overflow:hidden; outline:transparent none 0px; border:1px solid #ccc; text-transform:none; -moz-border-radius:2px; border-radius:2px;color:#999 }div.datePicker table td:focus,div.datePicker table td:active { outline:0 none red; }div.datePicker table th { border:0 none; padding:0; font-weight:bold; color:#222; text-align:center; vertical-align:middle; text-transform:none; }div.datePicker table thead th { height:auto !important; }div.datePicker table tbody th { border:1px solid #dcdcdc; }/* Week number display */div.datePicker table thead th.date-picker-week-header,div.datePicker table tbody th.date-picker-week-header { font-style:oblique; background:transparent; cursor:default; }div.datePicker table thead th.date-picker-week-header { cursor:help; border:0 none; padding:0 0 0.2em 0; }/* tfoot status bar */div.datePicker tfoot th { cursor:default; font-weight:normal; text-transform:uppercase; letter-spacing:0.1em; border:0 none; background:#fff; height:2.8em; }/* TD cell that is _not_ used to display a day of the month */div.datePicker table tbody td.date-picker-unused { background:#fff url(/media/images/backstripes_996.gif); border-color:#dcdcdc; cursor:default !important; }/* The TH cell used to display the "month, year" title */div.datePicker table thead th.date-picker-title { width:auto; height:auto; padding:0.4em 0; }/* The "mon tue wed etc" day header styles */div.datePicker table thead th.date-picker-day-header { text-transform:lowercase; cursor:help; height:auto; }/* The "todays date" style */div.datePicker table tbody td.date-picker-today { background:#fff url(/media/images/bullet2_999.gif) no-repeat 0 0; color:rgb(100,100,100) !important; }div.datePicker table tbody td.month-out.date-picker-highlight { color:#aa8866 !important; }/* The "highlight days" style */div.datePicker table tbody td.date-picker-highlight,div.datePicker table thead th.date-picker-highlight { color:#a86666 !important; }/* The "active cursor" style */div.datePicker table tbody td.date-picker-hover { background:#fff url(/media/images/bg_header_997.jpg) no-repeat 0 0; cursor:pointer; border-color:rgb(100,130,170) !important; color:rgb(100,130,170); text-shadow: 0px 1px 1px #fff; }/* The "disabled days" style */div.datePicker table tbody td.day-disabled { background:#fff url(/media/images/backstripes_996.gif) no-repeat 0 0; color:#aaa !important; cursor:default; text-decoration:line-through; } div.datePicker table tbody td.month-out { border-color:#ddd; color:#aaa !important; background:#fff url(/media/images/gradient-e5e5e5-ffffff_1002.gif) repeat-x 0 -40px; } /* The "selected date" style */div.datePicker table tbody td.date-picker-selected-date { color:#333 !important; border-color:#333 !important; }/* The date "out of range" style */div.datePicker table tbody td.out-of-range,div.datePicker table tbody td.not-selectable { color:#ccc !important; font-style:oblique; background:#fcfcfc !important; cursor:default !important; } /* Week number "out of range" && "month-out" styles */div.datePicker table tbody th.month-out,div.datePicker table tbody th.out-of-range { color:#aaa !important; font-style:oblique; background:#fcfcfc !important; }/* week numbers "out of range" */div.datePicker table tbody th.out-of-range { opacity:0.6; filter:alpha(opacity=60); } /* Used when the entire grid is full but the next/prev months dates cannot be selected */div.datePicker table tbody td.not-selectable { opacity:0.8; filter:alpha(opacity=80); }div.datePicker table tbody tr { display:table-row; }div.datePicker table tfoot sup { font-size:0.86em; letter-spacing:normal; text-transform:none; height: 0;line-height: 1;position: relative;top: -0.2em;vertical-align: baseline !important;vertical-align: top; }div.datePicker table thead th.date-picker-day-header,div.datePicker table thead span.month-display,div.datePicker table thead span.year-display { text-shadow: 0px 1px 1px #fff; }/* You can add focus effects (for everything but IE6) like so: */div.datepicker-focus { /* Naughty, naughty - but we add a highlight using the table's border colour */ outline:none; }div.datepicker-focus table.datePickerTable { border-color:#999 !important; }div.datePicker table tbody tr td:focus { overflow:hidden; outline:0 none;-moz-outline: 0 none;color:rgb(100,130,170) !important; }/* INTERNET EXPLORER WOES ====================== Hover Effects ------------- IE cannot deal with :focus on the TR so the datePicker script adds the class "dp-row-highlight" to the row currently being hovered over. This should enable you to add hover effects if desired. e.g. the following rule will highlight the cell borders in another colour when a row is moused over, it looks like crap though so I didn't include the rule within the demo: div.datePicker table tbody tr.dp-row-highlight td { border-color:#aaa; }*//* Remove the images for Internet Explorer <= v6 using the "* html" hack This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes which means that they are downloaded for every cell for every table - nasty! */ * html div.datePicker table td { background-image:none; }* html div.datePicker table td.date-picker-unused { background:#f2f2f2; }/* Chrome has problems with the -webkit-box-shadow and -webkit-border-radius styles together Remove one or the other to get things looking less ugly */ @media screen and (-webkit-min-device-pixel-ratio:0) { div.datePicker table { border-spacing:0.3em; /* Naughty, naughty */ -webkit-box-shadow:0px 0px 5px #aaa; -webkit-border-radius:0.8em; } div.static-datepicker table { -webkit-box-shadow:0 0 0 transparent; } div.static-datepicker:focus table { -webkit-box-shadow:0px 0px 5px #aaa; } div.datePicker table td, div.datePicker table tbody th { padding:0.1em; -webkit-border-radius:2px; } div.datePicker table tbody td.date-picker-hover { -webkit-box-shadow:0px 0px 1px rgb(100,130,170); } }/* Untested webkit rules for fading out the disabled buttons - fingers crossed */@-webkit-keyframes fadeout { to { opacity: 0.4; } from { opacity: 1.0; color:#222; }}@media screen and (-webkit-min-device-pixel-ratio:0) { div.datePicker table thead th span.fd-disabled { -webkit-animation-name: fadeout; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; }}