Add 'test.css'

test.css

@@ -0,0 +1,332 @@
+html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote,
+pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
+q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
+dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
+thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
+footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
+mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup,
+menu, nav, section {
+    display: block
+}
+
+body {
+    line-height: 1
+}
+
+ol, ul {
+    list-style: none
+}
+
+blockquote, q {
+    quotes: none
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+    content: '';
+    content: none
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+@font-face {
+    font-family: 'Range Mono';
+    font-display: auto;
+    src: url('fonts/range-mono-light-webfont.woff2') format('woff2'), url('fonts/range-mono-light-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Range Mono';
+    font-display: auto;
+    src: url('fonts/range-mono-normal-webfont.woff2') format('woff2'), url('fonts/range-mono-normal-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Range Mono';
+    font-display: auto;
+    src: url('fonts/range-mono-bold-webfont.woff2') format('woff2'), url('fonts/range-mono-bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+  max-width: 400px;
+  margin-bottom: 20px;
+}
+
+.tm {
+    margin: 10px 0 20px 0 !important;
+}
+
+html, body {
+    position: relative;
+    width: 100%;
+    
+    padding-bottom: 10px;
+    font-family: 'Range Mono', Helvetica, sans-serif
+}
+
+img {
+    display:inline-block;
+    margin:auto;
+    vertical-align: middle;
+}
+
+section {
+    position: relative;
+    margin: 80px 0 0 0
+}
+
+section:after {
+    content: '';
+    display: table;
+    clear: both
+}
+
+section#subsections + section {
+    margin: 40px 0 0 0
+}
+
+section#footer {
+    margin: 80px 0 80px 0
+}
+
+section article.halfsection {
+    float: left;
+    width: 50%;
+    padding: 0 20px 40px 0
+}
+
+section article.subsection {
+    float: left;
+    width: 25%;
+    padding: 0 20px 40px 0
+}
+
+@media (max-width: 1040px) {
+    section {
+        margin: 40px 0 0 0
+    }
+
+    section#subsections + section {
+        margin: 20px 0 0 0
+    }
+
+    section#footer {
+        margin: 40px 0 40px 0
+    }
+
+    section article.halfsection {
+        padding: 0 20px 20px 0
+    }
+
+    section article.subsection {
+        width: 33%;
+        padding: 0 10px 40px 0
+    }
+}
+
+@media (max-width: 640px) {
+    article.subsection {
+        width: 50% !important
+    }
+}
+
+footer {
+    position: relative;
+    margin: 40px 0 80px 0;
+    text-align: right
+}
+
+footer span {
+    color: #bcbdc2;
+    font-size: 0.7em;
+    font-weight: 700
+}
+
+@media (max-width: 1040px) {
+    footer {
+        margin: 20px 0 40px 0
+    }
+}
+
+.full-width {
+    width: 100%
+}
+
+.body-width {
+    width: 1040px;
+    padding: 0 80px 0 80px
+}
+
+@media (max-width: 1040px) {
+    .body-width {
+        width: 100%;
+        padding: 0 40px 0 40px
+    }
+}
+
+h1 {
+    text-align: center;
+    color: #d2a668;
+    font-weight: 400;
+    margin: 20px 0 20px 0;
+
+}
+
+h2 {
+    text-align: center;
+    color: #d2a668;
+    font-weight: 400;
+    font-size: 0.7em;
+    margin: 20px 0 20px 0
+}
+
+h3 {
+    text-align: center;
+    font-weight: 400;
+    margin: 20px 0 20px 0
+}
+
+p {
+    color: #595f6e;
+    font-size: 0.8em;
+    font-weight: 300;
+    line-height: 1.8em
+}
+
+p a {
+    color: #595f6e;
+    font-weight: 700;
+    text-decoration: underline
+}
+
+@media (max-width: 1040px) {
+    p {
+        font-size: 0.7em
+    }
+}
+
+iframe {
+    text-align: center;
+    display:block;
+    border:  none;
+}
+
+ul li {
+    text-align: center;
+    margin: 12px 0 20px 0
+}
+
+ul li a {
+    color: #595f6e;
+    font-size: 0.8em;
+    font-weight: 300;
+    text-decoration: underline
+}
+
+@media (max-width: 1040px) {
+    ul li {
+        margin: 8px 0 0 0
+    }
+
+    ul li a {
+        padding-top: 5px;
+        font-size: 0.7em
+    }
+}
+
+#stream {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 80px
+}
+
+.your-centered-div img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.container {
+    width: 100%;
+    float: left;
+    /* border: 1px solid orange; */
+}
+
+.youtube-centered-div {
+    max-width: 560px; /* you have to have a size or this method doesn't work */
+    max-height: 315px;
+    margin-right: auto;
+    margin-left: auto;
+   margin-bottom: 10px;
+
+}
+.youtube-centered-div iframe {
+    margin-right: 10px;
+}
+.bandcamp-centered-div {
+    max-width: 560px; /* you have to have a size or this method doesn't work */
+    max-height: 680px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media only screen 
+  and (min-device-width: 300px) 
+  and (max-device-width: 600px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+    .youtube-centered-div iframe {
+    margin-right: 10px;
+    width: 100vw; 
+    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */  
+    }
+    .bandcamp-centered-div iframe {
+    margin-right: 10px;
+    height: 420px;
+    }
+
+
+}
+
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 3000px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+    .youtube-centered-div iframe {
+    margin-right: 10px;
+    height: 680px;
+    width: 100%; 
+    height: 315px;
+    }
+
+    .bandcamp-centered-div iframe {
+    margin-right: 10px;
+    height: 680px;
+    }
+
+
+}
+