#journals {width:100%; max-width:768px; margin:0 auto 20px auto; background:#3e3e3e; padding:10px 0 0 0; position:relative; z-index:10;}
#journals .content-inner {width:95%; max-width:671px; margin:-10px auto 0 auto; text-align:center;}
#journals .content-inner.plain {margin:0 auto; text-align:left;}
#journals .content-inner h1 {float:left; color:#cb86a8;}
#journals .content-inner p {padding:5px 0; margin:0;}
#journals .content-inner a {color:#cb86a8;}
#journals .content-inner a:hover {color:#d1d1d1;}

#journals .content-outer {width:100%; text-align:left; position:relative;}
#journals .content-outer.mediumgrey {background:#5d5d5d;}
#journals .content-outer.lightgrey {color:#3e3e3e; background:#a8a8a8;}
#journals .content-outer.lightgrey h2 {color:#3e3e3e;}
#journals .content-outer.lightgrey p {color:#3e3e3e;}
#journals .content-outer.lightgrey a {color:#c4568c;}
#journals .content-outer.lightgrey a:hover {color:#d1d1d1;}

#journals .content-outer .content-inner {margin:0 auto;}
#journals .content-outer.light:before {display:block; position:absolute; content:""; background:#a8a8a8; width:6%; height:22px; right:0; top:0; z-index:100;}
#journals .content-outer.medium:before {display:block; position:absolute; content:""; background:#5d5d5d; width:6%; height:22px; right:0; top:0; z-index:100;}
#journals .content-outer.dark:before {display:block; position:absolute; content:""; background:#3e3e3e; width:6%; height:22px; right:0; top:0; z-index:100;}

#journals .content-inner #topmatrix {clear:left; margin-top:20px;}
#journals .content-inner #topmatrix ul {padding:0; margin:0; list-style:none;}
#journals .content-inner #topmatrix ul li {width:20%; float:left; text-align:center;}
#journals .content-inner #topmatrix ul li a {display:block; font:400 13px/25px 'Lato', arial, sans-serif; text-decoration:none; border-right:1px solid #3e3e3e; border-bottom:1px solid #3e3e3e;}
#journals .content-inner #topmatrix ul li span {display:block; font:400 13px/25px 'Lato', arial, sans-serif; border-right:1px solid #3e3e3e; border-bottom:1px solid #3e3e3e;}
#journals .content-inner #topmatrix ul li a:hover {color:#fff; background:#cb86a8;}
#journals .content-inner #topmatrix ul li .lightgrey {color:#3e3e3e; background:#a8a8a8;}
#journals .content-inner #topmatrix ul li .mediumgrey {color:#e6e6e6; background:#5d5d5d;}
#journals .content-inner #topmatrix ul li .darkgrey {color:#e6e6e6; background:#3e3e3e;}

#journals .content-inner #diariespink {clear:left; width:100%; width:calc(100% - 1px); height:25px; background:#cb86a8;}

#journals .content-inner .diaries {padding:20px 0; text-align:left;}

#journals .content-inner .leftpic {width:25%; float:left; padding-top:11px;}
#journals .content-inner .leftpic img {display:block; width:90%; max-width:127px; border:1px solid #bbb7b7; margin:10px 0;}
#journals .content-inner .textright {float:right; width:72%;}

#journals .content-inner .rightpic {width:25%; float:right; padding-top:11px;}
#journals .content-inner .rightpic img {display:block; width:90%; max-width:127px; border:1px solid #bbb7b7; margin:10px 0; float:right;}
#journals .content-inner .textleft {float:left; width:72%;}

#diaries img.to-top {position:fixed; left:50%; bottom:25px; cursor:pointer; z-index:1000; margin-left:-500px;}
#diaries img.mobile-to-top {display:none;}

@media only screen and (max-width:700px) {
html, body {background:#3e3e3e;}
#journals .content-inner #topmatrix ul li {width:25%;}
}
@media only screen and (max-width:600px) {
html, body {background:#3e3e3e;}
#journals .content-inner #topmatrix ul li {width:50%;}
#journals .content-inner #topmatrix ul li.blank {display:none;}
#journals .content-inner #topmatrix ul li .darkgrey {color:#e6e6e6; background:#5d5d5d;}

#journals .content-inner .leftpic {width:100%; float:none;}
#journals .content-inner .leftpic h2 {padding-bottom:10px;}
#journals .content-inner .leftpic img {margin: 0 0 10px; float:left;}
#journals .content-inner .textright {clear:left; float:none; width:100%;}

#journals .content-inner .rightpic {width:100%; float:none;}
#journals .content-inner .rightpic h2 {padding-bottom:10px;}
#journals .content-inner .rightpic img {margin: 0 0 10px; float:left;}
#journals .content-inner .textleft {clear:left; float:none; width:100%;}
}
@media only screen and (max-width:1200px) {
#diaries img.to-top {display:none;}
#diaries img.mobile-to-top {display:block; cursor:pointer; z-index:1000;}
}
@media only screen and (max-height:620px) {
#diaries img.to-top {display:none;}
#diaries img.mobile-to-top {display:block; cursor:pointer; z-index:1000;}
}