Shamusworld >> Repos - apple2/blob - web/apple2.css

   1 /* CSS for Apple2 Web */
   2
   3 /* for testing */
   4 /*div { border: 1px solid red; }*/
   5
   6 body, table
   7 {
   8         background: #006060;
   9         color: #FFFFFF;
  10         text-align: center;     /* Crappy IE kludge */
  11         font: 14.0pt Arial, Verdana, sans-serif;
  12         padding-left: 10%;
  13         padding-right: 10%
  14 }
  15
  16 /*#title img
  17 {
  18         margin-top: 22px;
  19 }*/
  20
  21 h1.title
  22 {
  23         width: 263px;
  24         height: 79px;
  25         background: url("img/a2-logo.png");
  26         text-indent: -9999px;
  27         display: block;
  28         margin: 0 auto;
  29         margin-top: 45px;
  30 }
  31
  32 .flt-l
  33 {
  34         float: left;
  35         padding-right: 8px;
  36 }
  37
  38 .flt-r
  39 {
  40         float: right;
  41         padding-left: 8px;
  42 }
  43
  44 .clr-l
  45 {
  46         clear: left;
  47 }
  48
  49 .clr-r
  50 {
  51         clear: right;
  52 }
  53
  54 figure
  55 {
  56         margin-top: 0;
  57         margin-left: 0;
  58         margin-right: 0;
  59         font-style: italic;
  60         font-size: 90%;
  61 }
  62
  63 img
  64 {
  65         max-width: 100%;
  66         object-fit: contain;
  67 }
  68
  69 img.border
  70 {
  71         margin: 5px;
  72         border: 1px solid #CF5F00;
  73         border-radius: 4px;
  74         padding: 5px;
  75         background-color: #FFAF00;
  76         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  77 }
  78
  79 .small33
  80 {
  81         width: 33%;
  82         height: auto;
  83 }
  84
  85 .small50
  86 {
  87         width: 50%;
  88         height: auto;
  89 }
  90
  91 #title
  92 {
  93         font-size: 300%;
  94         font-weight: bold;
  95         color: #30FF30;
  96 }
  97
  98 #news td
  99 {
 100         padding-bottom: 1em;
 101 }
 102
 103 #compatibility
 104 {
 105         border: 1px solid white;
 106         border-spacing: 0;
 107         margin-bottom: 1em;
 108 }
 109
 110 #compatibility td
 111 {
 112         vertical-align: top;
 113         border: 1px solid white;
 114         font-size: 85%;
 115 }
 116
 117 .date
 118 {
 119         width: 7em;
 120         vertical-align: top;
 121 /*      color: #FF6060;*/
 122         color: #FF6020;
 123 }
 124
 125 sup
 126 {
 127         font-size: 60%;
 128 }
 129
 130 hr
 131 {
 132         margin-bottom: 1.75em;
 133 }
 134
 135 table, ul
 136 {
 137         text-align: left;
 138 }
 139
 140 p
 141 {
 142         text-align: left;
 143         margin-top: 0;
 144         margin-bottom: 1em;
 145         line-height: 140%;
 146 }
 147
 148 li
 149 {
 150         line-height: 140%;
 151 }
 152
 153 /*h1
 154 {
 155         font-size: 300%;
 156         margin-top: 0;
 157         margin-bottom: 0;
 158 }*/
 159
 160 h2
 161 {
 162         font-size: 200%;
 163         margin-top: 0.75em;
 164         margin-bottom: 0.75em;
 165         color: #FFB000;
 166         font-style: italic;
 167 }
 168
 169 h3
 170 {
 171         font-size: 140%;
 172         margin-top: 1.2em;
 173 /*      margin-bottom: 0;*/
 174 }
 175
 176 tt
 177 {
 178         font-size: 80%;
 179 }
 180
 181 p#footer
 182 {
 183         margin-top: 2.0em;
 184         font-size: 75%;
 185         font-style: italic;
 186 }
 187
 188 a:link    { color: #0090FF; text-decoration: underline; }
 189 a:visited { color: #FF6F00; text-decoration: underline; }
 190 a:hover   { color: #20B0FF; text-decoration: none; }
 191 a:active  { color: #FFFFFF; text-decoration: underline; }
 192