.event-list {
list-style: none;
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
.event-list > li {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 5px rgb(51, 51, 51);
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
padding: 0px;
margin: 0px 0px 20px;
}
.event-list > li > time {
display: inline-block;
width: 100%;
color: rgb(255, 255, 255);
background-color: rgb(197, 44, 102);
padding: 5px;
text-align: center;
text-transform: uppercase;
position: relative;
}
.event-list > li:nth-child(even) > time {
background-color: rgb(165, 82, 167);
}
.event-list > li > time > span {
/* display: none; */
}
.event-list > li > time > .day {
display: block;
font-size: 25pt;
font-weight: 100;
line-height: 1;
}
.event-list > li time > .month {
display: block;
font-size: 17pt;
font-weight: 900;
line-height: 1;
}
.event-list > li > img {
width: 100%;
}
.event-list > li > .info {
padding-top: 5px;
text-align: center;
}
.event-list > li > .info > .title a {
font-size: 17pt;
font-weight: 700;
margin: 0px;
}
.event-list > li > .info > .desc {
font-size: 13pt;
font-weight: 300;
margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
display: table;
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
width: 100%;
text-align: center;
}
.event-list > li > .social > ul {
margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
display: table-cell;
cursor: pointer;
color: rgb(30, 30, 30);
font-size: 11pt;
font-weight: 300;
padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
display: block;
width: 100%;
color: rgb(30, 30, 30);
text-decoration: none;
}
@media (min-width: 768px) {
.event-list > li {
position: relative;
display: block;
width: 100%;
height: 100px;
padding: 0px;
}
.event-list > li > time,
.event-list > li > img {
display: inline-block;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
float: left;
}
.event-list > li > .info {
background-color: rgb(245, 245, 245);
overflow: hidden;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
height: 100px;
padding: 0px;
margin: 0px;
}
.event-list > li > .info {
position: relative;
height: 100px;
text-align: left;
padding-right: 40px;
}
.event-list > li > .info > .title,
.event-list > li > .info > .desc {
padding: 0px 10px;
}
.event-list > li > .info > ul {
position: absolute;
left: 0px;
bottom: 0px;
}
.event-list > li > .social {
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 40px;
}
.event-list > li > .social > ul {
border-left: 1px solid rgb(230, 230, 230);
}
.event-list > li > .social > ul > li {
display: block;
padding: 0px;
}
.event-list > li > .social > ul > li > a {
display: block;
width: 40px;
padding: 10px 0px 9px;
}
}
.event-list > li .cat {
position: absolute;
left: 0px;
right: 0;
bottom: 0;
top: 0px;
font-weight: 700;
text-shadow: 2px 2px 1px #444;
background: green !important;
display: inline;
line-height: 20px;
padding: 40px 4px;
}
.event-list > li .cat.theater {
/* left: -11px !important; */
background: #000 !important;
}
.event-list > li .cat.music {
/* left: -11px !important; */
background: blue !important;
}
.event-list > li .cat.art {
/* left: -3px !important; */
background: red !important;
}
.event-list > li .cat.dance {
/* left: -14px !important; */
background: yellow !important;
/* color: #000; */
}
.event-list > li .cat.museum {
/* left: -11px !important; */
background: gray !important;
}
.info p {
padding: 0 10px;
margin: 0 0 5px;
}
.info .title {
margin: 0 0 5px;
}
.event-filter.event-finder.uk-form {
margin-bottom: 30px;
background: #0d006a;
padding: 15px;
border-radius: 10px;
}
.event-filter.event-finder.uk-form h1,
.event-filter.event-finder.uk-form h2 {
color: #fff;
font-weight:700;
}
.event-filter #city-picker {
/* display: block; */
/* text-align: center; */
}
.event-filter #city-picker .uk-buttonx {
margin-top: 0;
font-size: 26px;
}
#open-popup {
font-size: 36px;
cursor: pointer;
display: inline-block;
padding: 6px 30px;
}
.loc-img.wp-post-image {
margin-right: 10px;
}
.event-filter .uk-margin-small-top {
margin-top: 20px !important;
}
.event-filter .uk-button-large {
min-height: 60px;
padding: 0 15px;
line-height: 40px;
font-size: 25px;
}
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"],
.uk-form input[type="url"],
.uk-form input[type="search"],
.uk-form input[type="tel"],
.uk-form input[type="number"],
.uk-form input[type="datetime"],
.uk-form input[type="datetime-local"],
.uk-form input[type="date"],
.uk-form input[type="month"],
.uk-form input[type="time"],
.uk-form input[type="week"],
.uk-form input[type="color"],
.uk-form select, .uk-form textarea {
height: 60px;
padding: 4px 6px;
/* border: 3px solid #0d006a; */
border-radius: 10px;
font-size: 25px;
}
#calendar_category {
padding-left: 25px;
}
.event-filter #city-picker .uk-buttonx {
margin-top: -10px;
font-size: 30px;
color: #fff;
}
.ef-box .uk-buttonx {
margin-top: -10px;
font-size: 36px;
margin-bottom: 10px;
}
.uk-modal-dialog > .uk-close:first-child {
margin: -15px -15px 0 0;
float: right;
}
#findevent-popup .uk-modal-dialog {
width: 400px;
}
div#locpopup {
background: #fff;
}
div#locpopup .tmbd-dp {
display: inline-block !important;
background: none;
}
div#locpopup #city-picker .tmbd-dp::after {
display: none !important;
}
div#locpopup .uk-nav-dropdown>li>a {
/* font-size: 12px; */
text-align: left;
}
.selectdiv {
/* position: relative; */
/*Don't really need this just for demo styling*/
/* float: left;
min-width: 200px;
margin: 50px 33%; */
}
/*To remove button from IE11, thank you Matt */
select::-ms-expand {
display: none;
}
.selectdiv:after {
content: '';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 100px;
font-weight: 700;
top: 18px;
padding: 0 0 2px;
position: absolute;
pointer-events: none;
}
.selectdiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
background-color: #ffffff;
background-image: none;
-ms-word-break: normal;
color: #999;
word-break: normal;
}
.selectdiv select:focus {
color: #999;
}
lang="en-US">
Picture This Post READERS' CALENDAR