h2 a, h4 a { color: black; text-decoration: none; } h2 a:hover, h4 a:hover { text-decoration: underline; } h2 em { display: inline-block; color: gray; font-size: .5em; line-height: 2em; float: left; margin-right: 1em; border: .1em solid gray; padding: 0 1em; border-radius: .25em; font-style: normal; } h2 strong em { background: #084; border-color: #084; color: white; } h2 img { float: right; max-width: 5em; border: .2em solid white; box-shadow: 0 2px 2px black; margin-left: 1em; } article:first-child h2 img { max-width: 10em; } h4 { margin-top: 0; margin-bottom: -0.6em; } h2 + .subtext { margin: -1.5em 0 1em 0; } p + .subtext { margin: -0.5em 0 1em 0; } .subtext { padding: 0; list-style: none; clear: left; } .subtext li { display: inline; margin-right: 3em; font-size: .7em; color: gray; } .subtext li a, .subtext li strong { color: black; font-size: 1.2em; font-weight: normal; } .events:before { height: 1px; width: 100%; display: block; content: " "; background-image: -webkit-linear-gradient(left, transparent, rgba(0,0,0,.1), transparent); background-image: -moz-linear-gradient(left, transparent, rgba(0,0,0,.1), transparent); background-image: -o-linear-gradient(left, transparent, rgba(0,0,0,.1), transparent); margin: 0; padding: 0; border: 0; } .events { margin-top: -1.5em; margin-left: 0.3em; margin-bottom: 2em; list-style: none; padding: 0; } .events >li { padding-left: 0.5em; border-left: 4px solid #35a; margin-top: 0.9em; } .events li p { text-align: left; } .events .subtext { margin-bottom: 0; } @media screen and (max-width: 50rem) { h2 img { display: none; } .subtext { margin-top: -1em; } .subtext li { display: block; } }