Code cosmetics

cps/static/css/main.css

@@ -72,6 +72,21 @@ body {
   padding: 3px;
 }
 
+.list_item.currentChapter > a,
+.list_item a:hover {
+  color: #f1f1f1;
+}
+
+#panels a {
+  visibility: hidden;
+  width: 18px;
+  height: 20px;
+  overflow: hidden;
+  display: inline-block;
+  color: #ccc;
+  margin-left: 6px;
+}
+
 #titlebar a:active {
   opacity: 1;
   color: rgba(0, 0, 0, 0.6);
@@ -189,19 +204,14 @@ body {
 
 #title-controls { float: right; }
 
-#panels a {
-  visibility: hidden;
-  width: 18px;
-  height: 20px;
-  overflow: hidden;
-  display: inline-block;
-  color: #ccc;
-  margin-left: 6px;
-}
-
 #panels a::before { visibility: visible; }
 #panels a:hover { color: #aaa; }
 
+.list_item a {
+  color: #aaa;
+  text-decoration: none;
+}
+
 #panels a:active {
   color: #aaa;
   margin: 1px 0 -1px 6px;
@@ -296,11 +306,6 @@ input:-moz-placeholder { color: #454545; }
   list-style: none;
 }
 
-.list_item a {
-  color: #aaa;
-  text-decoration: none;
-}
-
 .list_item a.chapter {
   font-size: 1em;
 }
@@ -309,11 +314,6 @@ input:-moz-placeholder { color: #454545; }
   font-size: 0.8em;
 }
 
-.list_item.currentChapter > a,
-.list_item a:hover {
-  color: #f1f1f1;
-}
-
 /* #tocView li.openChapter > a, */
 .list_item a:hover {
   color: #e2e2e2;
@@ -350,8 +350,8 @@ input:-moz-placeholder { color: #454545; }
   margin-right: -4px;
 }
 
-.currentChapter > .toc_toggle:before,
+.currentChapter > .toc_toggle::before,
-.openChapter > .toc_toggle:before {
+.openChapter > .toc_toggle::before {
   content: '▾';
 }
 
@@ -619,7 +619,7 @@ input:-moz-placeholder { color: #454545; }
 }
 
 @media only screen and (max-width: 550px) {
-  #viewer{
+  #viewer {
     width: 80%;
     margin-left: 10%;
   }
@@ -654,11 +654,6 @@ input:-moz-placeholder { color: #454545; }
     -ms-transform: translate(260px, 0);
   }
 
-  #titlebar {
-    /* font-size: 16px; */
-    /* margin: 0 50px 0 50px; */
-  }
-
   #metainfo {
     font-size: 10px;
   }
@@ -685,14 +680,15 @@ input:-moz-placeholder { color: #454545; }
 }
 
 @media only screen
-and (min-device-width : 768px)
+and (min-device-width: 768px)
-and (max-device-width : 1024px)
+and (max-device-width: 1024px)
 and (orientation : landscape)
 /*and (-webkit-min-device-pixel-ratio: 2)*/ {
   #viewer {
     width: 80%;
     margin-left: 10%;
   }
+
   #divider,
   #divider.show {
     display: none;
@@ -708,11 +704,12 @@ and (orientation : landscape)
 }
 
 /* For iPhone 6\6s portrait layouts only */
-@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation: portrait) {
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
   #viewer {
     width: 300px;
     height: 480px;
   }
+
   #viewer iframe {
      width: 300px;
      height: 480px;
@@ -720,11 +717,12 @@ and (orientation : landscape)
 }
 
 /* For iPhone 6\6s landscape layouts only */
-@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation: landscape) {
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
   #viewer {
     width: 450px;
     height: 300px;
   }
+
   #viewer iframe {
      width: 450px;
      height: 300px;
@@ -737,6 +735,7 @@ and (orientation : landscape)
     width: 256px;
     height: 432px;
   }
+
   #viewer iframe {
      width: 256px;
      height: 432px;
@@ -751,7 +750,7 @@ and (orientation : landscape)
   }
 }
 
-[class^="icon-"]:before, [class*=" icon-"]:before {
+[class^="icon-"]::before, [class*=" icon-"]:before {
   font-family: "fontello", serif;
   font-style: normal;
   font-weight: normal;