/*------------------------------------------------------------------------------------------------- ---CALENDAR LISTING STYLES--- /*-------------------------------------------------------------------------------------------------*/ div.main > div.content.calendar h1.main-title span {display:block; padding-left:1em;} div.main > div.content.calendar h1.main-title span > a.selected:before { font-weight:bold; color:#f05431; content: "\2794 "; } div.main > div.content.calendar div.event-container {max-width: 730px;} div.main > div.content.calendar div.event-container > div.sub-heading{max-width: 700px;} div.main > div.content.calendar div.events div.year-head {font-size: 28px; padding-top: 1.25em; text-align:center; color:#cccccc; margin-bottom:40px; } div.main > div.content.calendar div.events ul {list-style-type: none; padding:0px; } div.main > div.content.calendar div.events ul li { padding-bottom:40px; margin-bottom:80px; border-bottom:1px solid #cccccc; } div.main > div.content.calendar div.events ul li > div.date, div.main > div.content.calendar div.events ul li > div.info, div.main > div.content.calendar div.events ul li > div.image {display:inline-block; vertical-align:top; } div.main > div.content.calendar div.events ul li > div.date {width:12%; max-width:140px; text-align:left; font-size:12px; margin-right:6px; } div.main > div.content.calendar div.events ul li > div.info {width:45%; max-width:418px; text-align:left; font-size:20px; margin-right:6px; line-height:26px; } div.main > div.content.calendar div.events ul li > div.info div.title > a {color:inherit; text-decoration:none; } div.main > div.content.calendar div.events ul li > div.info div.title > a:hover {color:#808080; } div.main > div.content.calendar div.events ul li > div.info div.title + div.image {max-width:230px; width:auto; margin-top:4px; display:none} div.main > div.content.calendar div.events ul li > div.info div.excerpt {font-size:13px; padding-top:4px; line-height:21px;} div.main > div.content.calendar div.events ul li > div.info div.draft-specs {margin-left:25px; font-size:13px; white-space:pre-wrap; opacity:.75; padding-top:0px; line-height:normal; color:brown;} div.main > div.content.calendar div.events ul li > div.info div.cat-list {font-size:11px; line-height:18px; margin-top:6px;} div.main > div.content.calendar div.events ul li > div.image {width:35%; max-width:230px; text-align:right;} div.main > div.content.calendar div.events ul li div.image img {width:100%; max-width:210px; border:1px solid #cccccc; } /*------------------------------------------------------------------------------------------------- ---CALENDAR FLOATING MENU STYLES--- /*-------------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.section div.floating-menu {position:absolute; top:10px; right:0px; list-style-type:none; white-space: normal; line-height:27px; background-color:transparent; color:#333333; overflow:hidden; z-index:3} div.main > div.content.calendar div.section div.floating-menu div.container {display:block; /*display:inline-block; */position:relative; border:1px solid #cccccc; background-color:#ffffff; overflow-y: auto; overflow-x: hidden; clear:right; } /*------------------------------------------------------------------------------------------------ ---CALENDAR FLOATING MENU ICON--- /*----------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.section div.floating-menu div.mobile-menu-icon {width:32px; margin-bottom:10px; float:right; /*margin:0px auto 10px auto;*/ display:none;} div.mobile-menu-icon:hover {cursor: pointer;} div.mobile-menu-icon div.bar1, div.mobile-menu-icon div.bar2, div.mobile-menu-icon div.bar3 { width: 30px; height: 1px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-5px, 5px); transform: rotate(-45deg) translate(-5px, 5px); } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-6px, -6px); transform: rotate(45deg) translate(-6px, -6px); } div.main > div.content.calendar div.section div.floating-menu.fixed {position: fixed; margin-top: 0; width: auto; top: 10px; float: none;} div.main > div.content.calendar div.section div.floating-menu ul {padding:0px; margin:0; text-align:left; white-space:normal; padding:0px 0px 15px 0px; height:100%; line-height: 20px; } div.main > div.content.calendar div.section div.floating-menu ul > li {display: list-item; color:#333333; vertical-align:top; /*border-bottom: 1px solid #afafb0; */ margin: 0 18px; padding:0; border-left:1px solid transparent; border-right:1px solid transparent; height:100%; transition:background-color .3s ease 0s; -moz-transition:background-color .3s ease 0s; -webkit-transition:background-color .3s ease 0s; -o-transition:background-color .3s ease 0s; transition:background-image .3s ease 0s; -moz-transition:background-image .3s ease 0s; -webkit-transition:background-image .3s ease 0s; -o-transition:background-image .3s ease 0s; transition:color .3s ease 0s; -moz-transition:color .3s ease 0s; -webkit-transition:color .3s ease 0s; -o-transition:color .3s ease 0s; } div.main > div.content.calendar div.section div.floating-menu ul > li.sub-category {padding-left:20px;} div.main > div.content.calendar div.section div.floating-menu ul > li table {width:100%; margin:0 auto; } div.main > div.content.calendar div.section div.floating-menu ul > li a {padding: 6px 0; font-size: 12px; text-align: left; display:inline-block; line-height:15px; text-decoration: none; color: inherit;} div.main > div.content.calendar div.section div.floating-menu ul > li.sub-category a {padding:2px 0; } div.main > div.content.calendar div.section div.floating-menu ul > li.selected a:before { font-weight:bold; color:#f05431; content: "\2794 "; } div.main > div.content.calendar div.section div.floating-menu ul > li > div {position:relative; height:100%; } div.main > div.content.calendar div.section div.floating-menu ul > li.menuHover {color:#808080; } div.main > div.content.calendar div.section div.floating-menu ul > li[selected] {color:#2d5c88; } div.main > div.content.calendar div.section div.floating-menu ul > div.division { font-weight:bold; color:#f05431; text-align:center; width: 80%; border-bottom: 1px solid #2d5c88; margin: 10px auto; } @media only screen and (max-width: 880px){ div.main > div.content.calendar div.section div.floating-menu { border-width:0px;} div.main > div.content.calendar div.section div.floating-menu div.mobile-menu-icon { display:block; } div.main > div.content.calendar div.section div.floating-menu div.container { right:-200px;} } /*--------------------------------------------------------------------------- ---Style for Left Menu Bar--- ---------------------------------------------------------------------------*/ @keyframes slide-in { from { right : -200px; } to { right:0px; } } @keyframes slide-out { from { right:0px; } to { right : -200px; } } .slide-out { -webkit-animation: slide-out .8s forwards; /* Safari 4+ */ -moz-animation: slide-out .8s forwards; /* Fx 5+ */ -o-animation: slide-out .8s forwards; /* Opera 12+ */ animation: slide-out .8s forwards; /* IE 10+, Fx 29+ */ } .slide-in { -webkit-animation: slide-in .8s forwards; /* Safari 4+ */ -moz-animation: slide-in .8s forwards; /* Fx 5+ */ -o-animation: slide-in .8s forwards; /* Opera 12+ */ animation: slide-in .8s forwards; /* IE 10+, Fx 29+ */ } /*------------------------------------------------------------------------------------------------ ---CALENDAR LISTING HISTORY--- /*----------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.event-container div.events {display:none; } div.main > div.content.calendar div.event-container.upcoming div.events.upcoming {display:block; } div.main > div.content.calendar div.event-container.past div.events.all {display:block; } div.main > div.content.calendar div.event-container.past div.events.all div.year.past, div.main > div.content.calendar div.event-container.upcoming div.events.all div.year.upcoming {display:block; } div.main > div.content.calendar div.event-container.past div.events.all ul li.past, div.main > div.content.calendar div.event-container.upcoming div.events.all ul li.upcoming {display:list-item; } div.main > div.content.calendar div.event-container.past div.events.all div.year.upcoming, div.main > div.content.calendar div.event-container.past div.events.all ul li.upcoming, div.main > div.content.calendar div.event-container.upcoming div.events.all div.year.past, div.main > div.content.calendar div.event-container.upcoming div.events.all ul li.past {display:none; } /*------------------------------------------------------------------------------------------------ ---CALENDAR LISTING YEAR--- SAMPLE: div.main > div.content.calendar div.events.year.2018 div.year.2018 {display:block; } ------------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.event-container.year div.events.all {display:block; } div.main > div.content.calendar div.event-container.year div.events.all div.year {display:none; } div.main > div.content.calendar div.event-container.year._2025 div.events.all div.year._2025, div.main > div.content.calendar div.event-container.year._2024 div.events.all div.year._2024, div.main > div.content.calendar div.event-container.year._2023 div.events.all div.year._2023, div.main > div.content.calendar div.event-container.year._2022 div.events.all div.year._2022, div.main > div.content.calendar div.event-container.year._2021 div.events.all div.year._2021, div.main > div.content.calendar div.event-container.year._2020 div.events.all div.year._2020, div.main > div.content.calendar div.event-container.year._2019 div.events.all div.year._2019, div.main > div.content.calendar div.event-container.year._2018 div.events.all div.year._2018, div.main > div.content.calendar div.event-container.year._2017 div.events.all div.year._2017, div.main > div.content.calendar div.event-container.year._2016 div.events.all div.year._2016, div.main > div.content.calendar div.event-container.year._2015 div.events.all div.year._2015, div.main > div.content.calendar div.event-container.year._2014 div.events.all div.year._2014{display: block; } /*------------------------------------------------------------------------------------------------ ---CALENDAR LISTING CATEGORIES--- SAMPLE: div.main > div.content.calendar div.events.category.sundays-on-broadway div.year.sundays-on-broadway {display:block; } div.main > div.content.calendar div.events.category.sundays-on-broadway ul li.sundays-on-broadway {display:list-item; } ------------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.event-container.category div.events.all {display:block; } div.main > div.content.calendar div.event-container.category div.year, div.main > div.content.calendar div.event-container.category ul li {display:none; } div.main > div.content.calendar div.event-container div.events.sub-category, div.main > div.content.calendar div.event-container.sub-category div.events {display:none; } div.main > div.content.calendar div.event-container div.events.sub-category div.year, div.main > div.content.calendar div.event-container div.events.sub-category ul li {display:block; } div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head {max-width:700px; font-size:22px; margin-left:30px; color:#2d5c88; background-color:#e0e0e0; padding:4px 4px 4px 20px; } div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head + div.sub-heading { margin: .5em 0 0 30px; padding: 2px 2px 2px 20px; } @media only screen and (max-width: 979px){ div.main > div.content.calendar div.events ul li div.info {width:30%; } div.main > div.content.calendar div.event-container > div.sub-heading, div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head, div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head + div.sub-heading {max-width:480px; } } @media only screen and (max-width: 650px){ div.main > div.content.calendar div.event-container > div.sub-heading, div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head, div.main > div.content.calendar div.event-container div.sub-events div.sub-events-head + div.sub-heading {max-width:80%; } } @media only screen and (max-width: 550px){ div.main > div.content.calendar div.events ul li > div.image {display:none; } div.main > div.content.calendar div.events ul li > div.info, div.main > div.content.calendar div.events ul li > div.date {width:90%; } div.main > div.content.calendar div.events ul li > div.info div.title + div.image {display:block;} } div.main > div.content.calendar div.event-container.category.sundays-on-broadway div.year.sundays-on-broadway {display:block; } div.main > div.content.calendar div.event-container.category.sundays-on-broadway ul li.sundays-on-broadway {display:list-item; } div.main > div.content.calendar div.event-container.category.weisworks div.year.weisworks {display:block; } div.main > div.content.calendar div.event-container.category.weisworks ul li.weisworks {display:list-item; } /*------------------------------------------------------------------------------------------------ ---CALENDAR ENTRY CATEGORIES--- ------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------- ---CONTENT STYLES--- /*-------------------------------------------------------------------------------------------------*/ div.main > div.content.calendar div.image-float-right {margin-left:30px; } div.main > div.content.calendar div.image-float-left {margin-right:30px; } div.main > div.content.calendar div.section {position:relative; } div.main > div.content.calendar h2 + div.time{margin-top: -10px; margin-bottom:14px; } div.main > div.content.calendar h3 {font-size:16px; line-height:1.8;} div.main > div.content.calendar p.artist-bio-heading {font-size:16px; line-height:1.8; margin: 20px 0; } div.main > div.content.calendar div.user-matter {margin-bottom:80px; } div.main > div.content.calendar div.section div.image + div.events-footer{} div.main > div.content.calendar div.user-matter div.events-footer {border-top:1px solid #e5e5e5; padding-top:2em; margin-bottom:2em; clear:both; } div.main > div.content.calendar div.section div.image + div.events-footer{margin-top:27px; } div.main > div.content.calendar div.section div.image.caption + div.events-footer{margin-top:15px; }