body { padding: 0; margin: 0; font-size: 18px; line-height:18px; font-family: 'Times', Serif; background-color: #fff; color: orangered; } body.subpage { background-color: #fff; text-align: left; } #header { padding: 0; margin:0; right: 0; top: 0; position: fixed; z-index: 1000; } #container { margin: 10px 40px 80px 40px; } #intro { margin: 8px 10px 40px 4px; text-align: center; color: green; } #item { margin: 0; padding: 20px 0; } /* ----- Responsive ----- */ .responsive { max-width: 100%; height: auto; } /* ----- Text ----- */ h1 { font-size: 18px; line-height:18px; font-weight: 400; padding: 0; margin: 0; } p { padding: 0; margin: 0; } a { text-decoration: none; text-decoration: underline; color: orangered; } a.special { text-decoration: none; text-decoration: underline; color: blue; } a:hover { text-decoration: none; border-bottom: 0px solid orangered; } span.italic { font-style: italic; } /* ----- Images & Video ----- */ img { margin: 0; padding: 0; /* -webkit-filter: drop-shadow(4px 1px 2px #878787 ); filter: drop-shadow(4px 1px 2px #878787); */ } video.media { max-width: 100%; box-shadow: 8px 4px 8px #878787; margin-right: auto; display: block; } video { outline: none; } /* ----- Tables ----- */ table { border-collapse: collapse; width: 100%; } table#t01 { width: 100%; } td, th { border-top: 1px solid orangered; border-left: 1px solid orangered; border-right: 1px solid orangered; text-align: left; padding: 8px 8px; height: 20px; } td.one { border-top: 1px solid orangered; border-left: 1px solid orangered; border-right: 1px solid orangered; border-bottom: 1px solid orangered; text-align: left; } td.two { border-top: 0px solid orangered; border-left: 1px solid orangered; border-right: 1px solid orangered; border-bottom: 1px solid orangered; text-align: left; } td.special-1 { border-top: 0px solid orangered; border-left: 1px solid orangered; border-right: 0px solid orangered; border-bottom: 1px solid orangered; } td.special-2 { border-top: 0px solid orangered; border-left: 0px solid orangered; border-right: 1px solid orangered; border-bottom: 1px solid orangered; } tr.highlight { height: 300px; } /* ----- Close ----- */ .close { position: absolute; right: 0px; top: 8px; width: 70px; height: 70px; } .close:hover { } .close:before, .close:after { position: absolute; left: 24px; content: ' '; height: 70px; width: 2px; background-color: orangered; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } a.close { text-decoration: none; border-bottom: 0px solid #000; color: orangered; } label { display: block; text-decoration: underline; } label:hover { text-decoration: none; } input { position: absolute; left: -999em; } .inner3 { padding: 0px; display: block; overflow: hidden; } .ex3 input[type="checkbox"]:checked + .hide3 { height: 0; opacity: 0; display: block; } /* ----- Mobile ----- */ @media only screen and (max-width: 500px) { /* ----- Images ----- */ .responsive { max-width: 100%; height: auto; } /* ----- Tables ----- */ table { border-collapse: collapse; width: 100%; } table#t01 { width: 100%; } td, th { border-top: 1px solid orangered; border-left: 1px solid orangered; border-right: 1px solid orangered; text-align: left; padding: 3px 6px; height: 20px; } td.one { border-top: 1px solid orangered; border-left: 1px solid orangered; border-right: 1px solid orangered; border-bottom: 1px solid orangered; text-align: left; padding: 3px 6px; height: 20px; } .single { margin: 0; text-align: left; padding: 11px; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; } }