body { font-size: 100% }
img { border: 0 }

h1 { float: left; padding-left: 2em; margin-top: 0em;}
h2#issue { text-align: center; padding-top: 50px;}
p#kindle { text-align: center; font-weight: bold }
h3 { margin-bottom: 0em;}
img#cover { float: right; margin-left: 2em; margin-right: 2em; margin-bottom: 1em }

header { margin-bottom: 1em }

#features_h { clear: both }

#credits { background-color: #33CCFF; border: solid 1px black; padding: 5px; margin: 0px;}
dt { font-weight: bold; font-style: italic;}
dd { margin-left: 0; padding-bottom: 1em;}

.contents :link {color: #FFFFFF}
.contents :visited {color: #CCCCCC}
.contents div, div h2 { padding: 5px; margin: 2px; }
.contents h3 {margin-bottom: 2px; margin-top: 2px;}
.contents h2 {margin-bottom: 2px; margin-top: 2px;}

#features_h, #features > div:nth-of-type(1) {background-color: #c3261c; color: white }
#features > div:nth-of-type(2) { background-color: #c75023; ; color: white }
#features > div {background-color: #d85826; color: white}

#articles_h, #articles > div:nth-of-type(1) {background-color: #AB631C; color: white}
#articles > div {background-color: #8E6B1A; color: white}

#regulars_h, #regulars > div:nth-of-type(1) {background-color: #6B701A; color: white}
#regulars > div:nth-of-type(2) {background-color: #5F7425; color: white}
#regulars > div:nth-of-type(3) {background-color: #557a37; color: white}
#regulars > div:nth-of-type(4), #regulars > div:nth-of-type(5), #regulars > div:nth-of-type(6), #regulars > div:nth-of-type(7) {background-color: #406a41; color: white}
#regulars > div {background-color: #406a41; color: white}

#diy_h, #diy > div:nth-of-type(1) {background-color: #376564; color: white}
#diy > div:nth-of-type(2) {background-color: #275958; color: white}
#diy > div {background-color: #1F5352; color: white}

#guide_h, #guide > div:nth-of-type(1) {background-color: #1C39A4;  color: white}
#guide > div:nth-of-type(2) {background-color:#304588; color: white}

#reviews_h, #reviews > div {background-color:#be2a4d; color: white}

#nextmonth { background-color: yellow !important; color: black !important; border: solid 1px black; margin-bottom: 2px !important; }
.note { font-weight: bold }

p.zxreviews { float: right }

@media screen and (max-width: 600px) {
    h1 { float: none; margin-left: auto; margin-right: auto; padding-left: 0em !important; padding-right: 0em !important; text-align: center}
    h1 img { max-width: 96%; height: auto; }
}

@media screen and (min-width: 900px)
{

main {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(13, auto);
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
}

header { grid-area: 1 / 1 / 2 / 4; }
#features_h { grid-area: 2 / 2 / 3 / 4; }
#features { grid-area: 3 / 2 / 4 / 4; }
#articles_h { grid-area: 4 / 2 / 5 / 4; }
#articles { grid-area: 5 / 2 / 6 / 4; }
#regulars_h { grid-area: 6 / 2 / 7 / 4; }
#regulars { grid-area: 7 / 2 / 8 / 4; }
#diy_h { grid-area: 8 / 2 / 9 / 4; }
#diy { grid-area: 9 / 2 / 10 / 4; }
#guide_h { grid-area: 10 / 2 / 11 / 4; }
#guide { grid-area: 11 / 2 / 12 / 4; }
#reviews_h { grid-area: 12 / 2 / 13 / 4; }
#reviews { grid-area: 13 / 2 / 14 / 4; }
#credits { grid-area: 2 / 1 / 14 / 2; } 

.contents > div:nth-of-type(1) { margin-top: 0px !important }
.contents > div:nth-last-of-type(1) { margin-bottom: 0px !important }

}

@media screen and (min-width: 1200px)
{

main {
  display: grid;
  grid-template-columns: calc(228px + 2em) 220px auto;
  grid-template-rows: repeat(7, auto);
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
}

header { grid-area: 1 / 1 / 2 / 4; }
#features_h { grid-area: 2 / 2 / 3 / 3; }
#features { grid-area: 2 / 3 / 3 / 4; }
#articles_h { grid-area: 3 / 2 / 4 / 3; }
#articles { grid-area: 3 / 3 / 4 / 4; }
#regulars_h { grid-area: 4 / 2 / 5 / 3; }
#regulars { grid-area: 4 / 3 / 5 / 4; }
#diy_h { grid-area: 5 / 2 / 6 / 3; }
#diy { grid-area: 5 / 3 / 6 / 4; }
#guide_h { grid-area: 6 / 2 / 7 / 3; }
#guide { grid-area: 6 / 3 / 7 / 4; }
#reviews_h { grid-area: 7 / 2 / 8 / 3; }
#reviews { grid-area: 7 / 3 / 8 / 4; }
#credits { grid-area: 2 / 1 / 8 / 2; } 

.heading { transform: skewY(-10deg) translate(0px, 1.2em) }

}

.contents > div { margin-left: 0px !important; margin-right: 0px !important; border: solid 1px black }

.heading { border: solid 1px black }