#recommendations {width:100%; max-width:768px; margin:0 auto 20px auto; background:#3e3e3e; padding:10px 0 0 0; position:relative; z-index:10;}
#recommendations .content-inner {width:95%; max-width:671px; margin:-10px auto 0 auto; text-align:center;}
#recommendations .content-inner.plain {margin:0 auto; text-align:left;}
#recommendations .content-inner h1 {float:left; color:#a0bb5a;}
#recommendations .content-inner p {padding:5px 0; margin:0;}
#recommendations .content-inner a {color:#a0bb5a;}
#recommendations .content-inner a:hover {color:#d1d1d1;}
#recommendations h2 a {position:relative;}
#recommendations h2 a p {position:absolute; top:-40px; left:-84px; text-align:center; width:200px; color:#a0bb5a; text-decoration:underline;}

#recommendations .content-outer {width:100%; text-align:left; position:relative; border-bottom:2px solid #a0bb5a;}
#recommendations .content-outer:before {content:""; display:block; width:6%; height:22px; background:#a0bb5a; position:absolute; right:0; bottom:0;}
#recommendations .content-outer.mediumgrey {background:#5d5d5d;}
#recommendations .content-outer .content-inner {margin:0 auto;}

#recommendations .content-inner #topmatrix {clear:left; margin-top:20px;}
#recommendations .content-inner #topmatrix ul {padding:0; margin:0; list-style:none;}
#recommendations .content-inner #topmatrix ul li {width:20%; float:left; text-align:center;}
#recommendations .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;}
#recommendations .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;}
#recommendations .content-inner #topmatrix ul li a:hover {color:#fff; background:#a0bb5a;}
#recommendations .content-inner #topmatrix ul li .lightgrey {color:#3e3e3e; background:#a8a8a8;}
#recommendations .content-inner #topmatrix ul li .mediumgrey {color:#e6e6e6; background:#5d5d5d;}
#recommendations .content-inner #topmatrix ul li .darkgrey {color:#e6e6e6; background:#3e3e3e;}
#recommendations .content-inner #linksgreen {clear:left; width:100%; width:calc(100% - 1px); height:25px; background:#a0bb5a;}

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

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

#recommendations .content-inner .textright {float:right; width:72%;}

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

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

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