/*------------------------------------------------------------------------------------------------- ---WORKS LISTING STYLES--- -------------------------------------------------------------------------------------------------*/ div.main > div.content.works.dummy {display:block; } div.main > div.content.works div.works-container {max-width: 730px;} div.main > div.content.works div.works-container > div.sub-heading{max-width: 700px;} /*div.main > div.content.works div.works div.year-head {font-size: 28px; padding-top: 1.25em; text-align:center; color:#cccccc; margin-bottom:40px; } */ div.main > div.content.works div.works div.year-head {font-size: 22px; padding-top: 1em; margin-bottom:1.25em; } div.main > div.content.works div.works ul {list-style-type: none; padding:0px; } div.main > div.content.works div.works ul li { padding-bottom:40px; margin-bottom:80px; border-bottom:1px solid #cccccc; } div.main > div.content.works div.works ul li > div.date, div.main > div.content.works div.works ul li > div.info, div.main > div.content.works div.works ul li > div.image {display:inline-block; vertical-align:top; } /*---------------------------------------------------------------------------------------------------------------------------------------------------- div.main > div.content.works div.works ul li > div.date {width:12%; max-width:140px; text-align:left; font-size:12px; margin-right:6px; } div.main > div.content.works div.works 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.works div.works ul li > div.info div.title > a {color:inherit; text-decoration:none; } div.main > div.content.works div.works ul li > div.info div.title > a:hover {color:#808080; } div.main > div.content.works div.works ul li > div.info div.title + div.image {max-width:230px; width:auto; margin-top:4px; display:none} div.main > div.content.works div.works ul li > div.info div.excerpt {font-size:13px; padding-top:4px; line-height:21px;} div.main > div.content.works div.works ul li > div.info div.cat-list {font-size:11px; line-height:18px; margin-top:6px;} div.main > div.content.works div.works ul li > div.image {width:35%; max-width:230px; text-align:right;} div.main > div.content.works div.works ul li div.image img {width:100%; max-width:210px; border:1px solid #cccccc; } ----------------------------------------------------------------------------------------------------------------------------------------------------*/ div.main > div.content.works div.works ul li > div.info { display:block; } div.main > div.content.works div.works ul li > div.info > div.image, div.main > div.content.works div.works ul li > div.info > div.works-info {display:inline-block; } div.main > div.content.works div.works ul li > div.info > div.image {max-width:300px; margin-bottom:14px; } div.main > div.content.works div.works ul li > div.info > div.works-info {max-width:45%; vertical-align:top; margin-left:10px; } div.main > div.content.works div.works ul li > div.info > div.image img {width:100%; border:1px solid #cccccc; } div.main > div.content.works div.works ul li > div.info > div.image > div.caption {margin:0px auto; max-width:90%; font-size: 12px; color:#404040; line-height: 15px; } div.main > div.content.works div.works ul li > div.info > div.works-info > div.title {/*font-size:15px;*/ margin-bottom:15px; } div.main > div.content.works div.works ul li > div.info > div.works-info > div.title > a {font-weight:bold; font-size:18px; } div.main > div.content.works div.works ul li > div.info > div.works-info > div.title > span.post-status {font-size:11px; color:#f05431; padding-left:10px; } div.main > div.content.works div.works ul li > div.info > div.works-info > div.premier {margin-bottom:1em; } /*------------------------------------------------------------------------------------------------- ---WORKS FLOATING MENU STYLES--- /*-------------------------------------------------------------------------------------------------*/ div.main > div.content.works div.section div.floating-menu {position:absolute; top:10px; right:0px; list-style-type:none; white-space: normal; line-height:27px; background-color:transparent; min-width:155px; color:#333333; overflow:hidden; z-index:3} div.main > div.content.works 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; } /*------------------------------------------------------------------------------------------------ ---WORKS FLOATING MENU ICON--- /*----------------------------------------------------------------------------------------------*/ div.main > div.content.works 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.works div.section div.floating-menu.fixed {position: fixed; margin-top: 0; width: auto; top: 10px; float: none;} div.main > div.content.works 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.works 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.works div.section div.floating-menu ul > li.sub-category {padding-left:20px;} div.main > div.content.works div.section div.floating-menu ul > li table {width:100%; margin:0 auto; } div.main > div.content.works 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.works div.section div.floating-menu ul > li.sub-category a {padding:2px 0; } div.main > div.content.works div.section div.floating-menu ul > li.selected a:before { font-weight:bold; color:#f05431; content: "\2794 "; } div.main > div.content.works div.section div.floating-menu ul > li > div {position:relative; height:100%; } div.main > div.content.works div.section div.floating-menu ul > li.menuHover {color:#808080; } div.main > div.content.works div.section div.floating-menu ul > li[selected] {color:#2d5c88; } div.main > div.content.works 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.works div.section div.floating-menu { border-width:0px;} div.main > div.content.works div.section div.floating-menu div.mobile-menu-icon { display:block; } div.main > div.content.works 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.works div.works-container.past div.year.past, div.main > div.content.works div.works-container.upcoming div.year.upcoming {display:block; } div.main > div.content.works div.works-container.past ul li.past, div.main > div.content.works div.works-container.upcoming ul li.upcoming {display:list-item; } div.main > div.content.works div.works-container.past div.year.upcoming, div.main > div.content.works div.works-container.past ul li.upcoming, div.main > div.content.works div.works-container.upcoming div.year.past, div.main > div.content.works div.works-container.upcoming ul li.past {display:none; } /*------------------------------------------------------------------------------------------------ ---CALENDAR LISTING YEAR--- SAMPLE: div.main > div.content.works div.works.year.2018 div.year.2018 {display:block; } ------------------------------------------------------------------------------------------------*/ div.main > div.content.works div.works-container.year div.year {display:none; } div.main > div.content.works div.works-container.year._2019 div.year._2019, div.main > div.content.works div.works-container.year._2018 div.year._2018, div.main > div.content.works div.works-container.year._2017 div.year._2017, div.main > div.content.works div.works-container.year._2016 div.year._2016, div.main > div.content.works div.works-container.year._2015 div.year._2015, div.main > div.content.works div.works-container.year._2014 div.year._2014, div.main > div.content.works div.works-container.year._2009 div.year._2009, div.main > div.content.works div.works-container.year._2007 div.year._2007, div.main > div.content.works div.works-container.year._2005 div.year._2005, div.main > div.content.works div.works-container.year._2002 div.year._2002, div.main > div.content.works div.works-container.year._2001 div.year._2001, div.main > div.content.works div.works-container.year._2000 div.year._2000, div.main > div.content.works div.works-container.year._1999 div.year._1999, div.main > div.content.works div.works-container.year._1998 div.year._1998, div.main > div.content.works div.works-container.year._1997 div.year._1997, div.main > div.content.works div.works-container.year._1996 div.year._1996, div.main > div.content.works div.works-container.year._1995 div.year._1995, div.main > div.content.works div.works-container.year._1993 div.year._1993, div.main > div.content.works div.works-container.year._1990 div.year._1990, div.main > div.content.works div.works-container.year._1984 div.year._1984{display: block; } /*------------------------------------------------------------------------------------------------ ---CALENDAR LISTING CATEGORIES--- SAMPLE: div.main > div.content.works div.works.category.sundays-on-broadway div.year.sundays-on-broadway {display:block; } div.main > div.content.works div.works.category.sundays-on-broadway ul li.sundays-on-broadway {display:list-item; } ------------------------------------------------------------------------------------------------*/ div.main > div.content.works div.works-container.category div.year, div.main > div.content.works div.works-container.category ul li {display:none; } div.main > div.content.works div.works-container div.works.sub-category, div.main > div.content.works div.works-container.sub-category div.works {display:none; } div.main > div.content.works div.works-container div.works.sub-category div.year, div.main > div.content.works div.works-container div.works.sub-category ul li {display:block; } div.main > div.content.works div.works-container div.sub-works div.sub-works-head {max-width:700px; font-size:22px; margin-left:30px; color:#2d5c88; background-color:#e0e0e0; padding:4px 4px 4px 20px; } div.main > div.content.works div.works-container div.sub-works div.sub-works-head + div.sub-heading { margin: .5em 0 0 30px; padding: 2px 2px 2px 20px; } @media only screen and (max-width: 979px) and (min-width:650px){ div.main > div.content.works div.works-container > div.sub-heading, div.main > div.content.works div.works-container div.sub-works div.sub-works-head, div.main > div.content.works div.works-container div.sub-works div.sub-works-head + div.sub-heading {max-width:480px; } div.main > div.content.works div.works ul li > div.info > div.works-info {max-width:30%;} } @media only screen and (max-width: 880px){ div.main > div.content.works div.works ul li > div.info > div.works-info {max-width:39%;} } @media only screen and (max-width: 650px){ div.main > div.content.works div.works-container > div.sub-heading, div.main > div.content.works div.works-container div.sub-works div.sub-works-head, div.main > div.content.works div.works-container div.sub-works div.sub-works-head + div.sub-heading {max-width:80%; } } @media only screen and (max-width: 550px){ div.main > div.content.works div.works ul li > div.image {display:none; } div.main > div.content.works div.works ul li > div.info, div.main > div.content.works div.works ul li > div.date {width:90%; } div.main > div.content.works div.works ul li > div.info div.title + div.image {display:block;} div.main > div.content.works div.works ul li > div.info > div.works-info {max-width:300px; } } div.main > div.content.works div.works-container.category.selected-works div.year.selected-works {display:block; } div.main > div.content.works div.works-container.category.selected-works ul li.selected-works {display:list-item; } /*------------------------------------------------------------------------------------------------ ---CALENDAR ENTRY CATEGORIES--- ------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------- ---CONTENT STYLES--- /*-------------------------------------------------------------------------------------------------*/ div.main > div.content.works div.image-float-right {margin-left:30px; } div.main > div.content.works div.image-float-left {margin-right:30px; } div.main > div.content.works div.section {position:relative; } div.main > div.content.works h2 + div.time{margin-top: -10px; margin-bottom:14px; } div.main > div.content.works h3 {font-size:16px; line-height:1.8;} div.main > div.content.works p.artist-bio-heading {font-size:16px; line-height:1.8; margin: 20px 0; } div.main > div.content.works div.user-matter {margin-bottom:80px; } div.main > div.content.works div.section div.image + div.image {margin-top: -11px; } div.main > div.content.works div.section div.image + div.works-footer{} div.main > div.content.works div.user-matter div.works-footer {border-top:1px solid #e5e5e5; padding-top:2em; margin-bottom:2em; clear:both; } div.main > div.content.works div.section div.image + div.works-footer{margin-top:27px; } div.main > div.content.works div.section div.image.caption + div.works-footer{margin-top:15px; }