font-size: 20pt; /* For 1024x768 */
/* font-family: liberation, helvetica; */
font-family: helvetica;
+
+ /* Can be used to scale the whole document. */
+ /*transform: translate(-10%,-10%) scale(0.75,0.75);*/
}
body td, body th { /* why?? */
background: #f8f8ff;
border: 1px solid rgb(204,0,0);
border-radius: 15px;
+ margin-left: auto;
+ margin-right: auto;
width: 800px;
height: 400px;
/* Position relative is needed so that items may be
positioned inside. */
position: relative;
- column-count: 4;
}
div.plugins p#caption {
}
div.plugins ul {
+ position: absolute;
+ top: 10%;
+ width: 700px;
+ height: 380px;
+ column-count: 4;
list-style-type: none;
- top: 50%;
- transform: translateY(15%);
margin: 0;
}
div.plugins ul li {
- padding: 4px;
+ padding: 0px;
margin: 5px;
}
border-radius: 20px;
font-weight: bold;
}
+
+/* Filters box. */
+div.filters {
+ background: #f8fff8;
+ border: 1px solid rgb(204,0,0);
+ border-radius: 15px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 800px;
+ height: 200px;
+ /* Position relative is needed so that items may be
+ positioned inside. */
+ position: relative;
+}
+
+div.filters p.filtercaption {
+ position: absolute;
+ bottom: -5px; right: 5px;
+ color: rgb(204,0,0);
+ text-align: right;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+div.filters ul {
+ position: absolute;
+ top: 10%;
+ width: 700px;
+ height: 180px;
+ column-count: 4;
+ list-style-type: none;
+ margin: 0;
+}
+
+div.filters ul li {
+ padding: 0px;
+ margin: 5px;
+}
+
+div.filters ul li.highlighted {
+ border: 1px solid rgb(204,0,0);
+ background: #fff;
+ padding-left: 10px;
+ color: rgb(204,0,0);
+ border-radius: 20px;
+ font-weight: bold;
+}
+
+/* For images which must be centered on the page. */
+div.allcenter {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 50vw;
+}
+
+div.all-center img {
+}
+
+/* Outlined text. */
+.outline {
+ text-shadow: 2px 2px 0 rgb(204,0,0),
+ -2px 2px 0 rgb(204,0,0),
+ 2px -2px 0 rgb(204,0,0),
+ -2px -2px 0 rgb(204,0,0),
+ 0px 2px 0 rgb(204,0,0),
+ 0px -2px 0 rgb(204,0,0),
+ -2px 0px 0 rgb(204,0,0),
+ 2px 0px 0 rgb(204,0,0),
+ 4px 4px 0 rgb(204,0,0),
+ -4px 4px 0 rgb(204,0,0),
+ 4px -4px 0 rgb(204,0,0),
+ -4px -4px 0 rgb(204,0,0),
+
+ 0px 4px 0 rgb(204,0,0),
+ 0px -4px 0 rgb(204,0,0),
+ -4px 0px 0 rgb(204,0,0),
+ 4px 0px 0 rgb(204,0,0),
+ 2px 4px 0 rgb(204,0,0),
+ -2px 4px 0 rgb(204,0,0),
+ 2px -4px 0 rgb(204,0,0),
+ -2px -4px 0 rgb(204,0,0),
+ 4px 2px 0 rgb(204,0,0),
+ -4px 2px 0 rgb(204,0,0),
+ 4px -2px 0 rgb(204,0,0),
+ -4px -2px 0 rgb(204,0,0),
+
+ 4px 4px 0 rgb(255,128,128),
+ -4px 4px 0 rgb(255,128,128),
+ 4px -4px 0 rgb(255,128,128),
+ -4px -4px 0 rgb(255,128,128),
+ 0px 4px 0 rgb(255,128,128),
+ 0px -4px 0 rgb(255,128,128),
+ -4px 0px 0 rgb(255,128,128),
+ 4px 0px 0 rgb(255,128,128),
+ 8px 8px 0 rgb(255,128,128),
+ -8px 8px 0 rgb(255,128,128),
+ 8px -8px 0 rgb(255,128,128),
+ -8px -8px 0 rgb(255,128,128),
+
+ 0px 8px 0 rgb(255,128,128),
+ 0px -8px 0 rgb(255,128,128),
+ -8px 0px 0 rgb(255,128,128),
+ 8px 0px 0 rgb(255,128,128),
+ 4px 8px 0 rgb(255,128,128),
+ -4px 8px 0 rgb(255,128,128),
+ 4px -8px 0 rgb(255,128,128),
+ -4px -8px 0 rgb(255,128,128),
+ 8px 4px 0 rgb(255,128,128),
+ -8px 4px 0 rgb(255,128,128),
+ 8px -4px 0 rgb(255,128,128),
+ -8px -4px 0 rgb(255,128,128);
+}
+
+/* Warning symbol. */
+span.warning {
+ background-color: yellow;
+ font-weight: bold;
+}