.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p { padding: 0; margin: 0; text-indent: 0; } /* * Covers for projects section */ #sierra { background-image: url("../images/ChuckNew.jpg"); } #virtualKeyality { background-image: url("../images/keyality.jpg"); } /* * sections */ body { font-family: serif; font-size: 1em; line-height: 1.6; transition: none; } #top { padding-top: 10px; width: 100%; position: fixed; background: black; z-index: 999; } #top div { margin: auto; max-width: 800px; } #top h2 { font-weight: normal; } #mast { margin-top: 10px; background: none; line-height: 1.2; color: white; } #mast a { color: white; font-style: italic; } #mast a:hover { color: #ed1a76; } #mast .sub { font-style: italic; color: #ccc; } #mast img { transition-duration: .2s; } #mast h2 { transition-property: size; transition-duration: .2s; } .small .hideable { display: none; opacity: 0; } .small img { max-width: 200px; } .small h2 { font-size: 1em; } .large img { width: 100%; max-width: 400px; } .large .hideable { opacity: 1; } .nojs body { background: white; } .nojs #mast { background: black; } /* * standalone elements */ .slide { padding: 0px; width: 100%; /* width wrapping */ } .slide div { max-width: 800px; margin: auto; /* Project bits */ } .slide div .project { transition-duration: .2s; width: 390px; border: 1px solid #aaa; border-radius: 5px; overflow: hidden; } .slide div .project .cover { height: 15em; background-position: center center; background-size: cover; margin: 0px; padding: 1em; } .slide div .project .details { padding: 1em 1em 0 1em; } .slide div .project .details h2 { line-height: 1; margin: 0 0 .5em 0; } .slide div .project .details p { margin: 0 0 .5em 0; } .slide div .project .details .tag { float: left; padding: 0 .3em 0 .3em; background: #eee; border: 1px solid #ccc; margin: .2em; border-radius: 5px; } .slide div .project .details .cat { background: #B7EEFF; border: 1px solid #8AC9DD; } .slide div .project .details .award { float: right; background: none; border: none; margin: 0 0 .5em .5em; } .slide div .project .details .award div { display: inline-block; text-align: center; vertical-align: middle; padding: 0; } .slide div .project .details .award div h3 { margin: 0; padding: 0; font-size: 1.6em; line-height: 1; font-weight: normal; font-style: italic; } .slide div .project .details .award div p { font-size: .8em; } .slide div .project .details .award::before { vertical-align: middle; background-image: url(../images/laurelleft.png); background-size: contain; background-repeat: no-repeat; background-position: center center; display: inline-block; content: ""; width: 2em; height: 3em; } .slide div .project .details .award::after { vertical-align: middle; background-image: url(../images/laurelright.png); background-size: contain; background-repeat: no-repeat; background-position: center center; display: inline-block; content: ""; width: 2em; height: 3em; } .slide div .project:hover { box-shadow: 1px 1px 3px #333; } .slide table { line-height: 1.3; margin: 0; padding: 2px; border-spacing: 0; border-collapse: collapse; vertical-align: text-top; } .slide ul { margin: 5px; } .slide p { text-indent: 1em; max-width: 800px; margin: auto; } .slide h1 { font-size: 2em; font-style: italic; max-width: 800px; margin: auto; margin-top: 1.7em; } @media (max-width: 800px) { .slide div { margin: auto; padding: 0; } .slide div .project { width: 95vw; float: none; display: block; margin: 0 0 .5em 1vw; } .slide p, .slide h1, .slide h2, .slide a { margin: .5em; } } @media (max-width: 800px) { #mast { padding-left: 1em; } } h2 { font-style: italic; } a { transition-duration: .2s; }