1 html, body{
  2     background: #00a896;
  3     background: linear-gradient(to bottom, #028090 0%, #00BCA8 90%);
  4     height:100%;
  5     width: device-width;
  6     background-repeat: no-repeat, repeat;
  7     background-attachment: fixed;
  8     background-size: cover;
  9     margin:0;
 10     padding:0;
 11 }
 12 
 13 * {
 14   box-sizing: border-box;
 15 }
 16 
 17 body {
 18   font-family: Arial, Helvetica, sans-serif;
 19 }
 20 
 21 header {
 22   background-color: #05668D;
 23   padding: 15px;
 24   text-align: center;
 25   font-size: 40px;
 26   color: #05EAB9;
 27   width: device-width;
 28   font-weight: bold;
 29   cursor:pointer;
 30 }
 31 
 32 #article {
 33   padding: 20px;
 34   margin: auto;
 35   width: 100%;
 36   background-color: #05668D;
 37   color: #05EAB9;
 38   font-size: 20px;
 39   text-align: center;
 40 }
 41 
 42 #notes {
 43   padding: 20px;
 44   margin: auto;
 45   width: 100%;
 46   background-color: #05668D;
 47   color: #05EAB9;
 48   font-size: 20px;
 49   text-align: center;
 50 }
 51 
 52 #articleTitle {
 53   padding: 20px;
 54   margin: auto;
 55   font-weight: bolder;
 56   width: 100%;
 57   background-color: #05668D;
 58   color: #05EAB9;
 59   font-size: 30px;
 60   text-align: center;
 61 }
 62 
 63 #articleContainer {
 64   padding: 20px;
 65   margin: auto;
 66   width: 70%;
 67   text-align: center;
 68 }
 69 
 70 #articleDate {
 71   padding: 17px;
 72   width: 30%;
 73   background-color: #05668D;
 74   color: #05EAB9;
 75   font-size: 25px;
 76   text-align: left;
 77 }
 78 
 79 #articlePublisher {
 80   padding: 15px;
 81   width: 100%;
 82   background-color: #05668D;
 83   color: #05EAB9;
 84   font-size: 20px;
 85   text-align: right;
 86 }
 87 
 88 #article2 {
 89   padding: 20px;
 90   margin: auto;
 91   width: 100%;
 92   background-color: #05668D;
 93   color: #05EAB9;
 94   font-size: 20px;
 95   text-align: center;
 96 }
 97 
 98 #notes2 {
 99   padding: 20px;
100   margin: auto;
101   width: 100%;
102   background-color: #05668D;
103   color: #05EAB9;
104   font-size: 20px;
105   text-align: center;
106 }
107 
108 #articleTitle2 {
109   padding: 20px;
110   margin: auto;
111   font-weight: bolder;
112   width: 100%;
113   background-color: #05668D;
114   color: #05EAB9;
115   font-size: 30px;
116   text-align: center;
117 }
118 
119 #articleContainer2 {
120   padding: 20px;
121   margin: auto;
122   width: 70%;
123   text-align: center;
124 }
125 
126 #articleDate2 {
127   padding: 17px;
128   width: 30%;
129   background-color: #05668D;
130   color: #05EAB9;
131   font-size: 25px;
132   text-align: left;
133 }
134 
135 #articlePublisher2 {
136   padding: 15px;
137   width: 100%;
138   background-color: #05668D;
139   color: #05EAB9;
140   font-size: 20px;
141   text-align: right;
142 }
143 
144 #article3 {
145   padding: 20px;
146   margin: auto;
147   width: 100%;
148   background-color: #05668D;
149   color: #05EAB9;
150   font-size: 20px;
151   text-align: center;
152 }
153 
154 #notes3 {
155   padding: 20px;
156   margin: auto;
157   width: 100%;
158   background-color: #05668D;
159   color: #05EAB9;
160   font-size: 20px;
161   text-align: center;
162 }
163 
164 #articleTitle3 {
165   padding: 20px;
166   margin: auto;
167   font-weight: bolder;
168   width: 100%;
169   background-color: #05668D;
170   color: #05EAB9;
171   font-size: 30px;
172   text-align: center;
173 }
174 
175 #articleContainer3 {
176   padding: 20px;
177   margin: auto;
178   width: 70%;
179   text-align: center;
180 }
181 
182 #articleDate3 {
183   padding: 17px;
184   width: 30%;
185   background-color: #05668D;
186   color: #05EAB9;
187   font-size: 25px;
188   text-align: left;
189 }
190 
191 #articlePublisher3 {
192   padding: 15px;
193   width: 100%;
194   background-color: #05668D;
195   color: #05EAB9;
196   font-size: 20px;
197   text-align: right;
198 }
199 
200 #centered  {
201   margin: auto;
202   width: 60%;
203 }
204 
205 #suggestionBox  {
206   margin: auto;
207   padding: 15px;
208   background-color: #028090;
209   color: #05EAB9;
210   font-size: 20px;
211   border-radius: 10px 10px 10px 10px;
212 }
213 
214 #suggestionBoxL  {
215   float: left;
216   padding: 15px;
217   width: 40%;
218   background-color: #028090;
219   color: #05EAB9;
220   font-size: 20px;
221   border-radius: 10px 10px 10px 10px;
222 }
223 
224 #suggestionBoxR  {
225   float: right;
226   padding: 15px;
227   width: 40%;
228   background-color: #028090;
229   color: #05EAB9;
230   font-size: 20px;
231   height: 40%;
232   border-radius: 10px 10px 10px 10px;
233 }
234 
235 #FREQUENT_1  {
236   float: left;
237   margin-top: 0%;
238   margin-bottom: 0%;
239   padding: 15px;
240   background-color: #05EAB9;
241   color: #028090;
242   font-size: 20px;
243   border-radius: 10px 10px 10px 10px;
244   cursor: pointer;
245 }#FREQUENT_2  {
246   float: left;
247   margin-top: 0%;
248   margin-bottom: 0%;
249   padding: 15px;
250   background-color: #05EAB9;
251   color: #028090;
252   font-size: 20px;
253   border-radius: 10px 10px 10px 10px;
254   cursor: pointer;
255 }#VIEWED_1  {
256   float: left;
257   margin-top: 0%;
258   margin-bottom: 0%;
259   padding: 15px;
260   background-color: #05EAB9;
261   color: #028090;
262   font-size: 20px;
263   border-radius: 10px 10px 10px 10px;
264   cursor: pointer;
265 }#VIEWED_2  {
266   float: left;
267   margin-top: 0%;
268   margin-bottom: 0%;
269   padding: 15px;
270   background-color: #05EAB9;
271   color: #028090;
272   font-size: 20px;
273   border-radius: 10px 10px 10px 10px;
274   cursor: pointer;
275 }#LASTADDED  {
276   float: left;
277   padding: 15px;
278   background-color: #05EAB9;
279   color: #028090;
280   font-size: 20px;
281   border-radius: 10px 10px 10px 10px;
282   cursor: pointer;
283 }
284 
285 #infoText  {
286   padding: 20px;
287   width: 80%;
288   margin-left: auto;
289   margin-right: auto;
290   color: rgb(180, 255, 240);
291   font-size: 18px;
292   text-align:center;
293 }
294 
295 #lockScreen {
296   padding: 20px;
297   margin: auto;
298   width: 100%;
299   background-color: #05668D;
300   color: #05EAB9;
301   font-size: 20px;
302   text-align: center;
303 }
304 
305 #newStory {
306   float: right;
307   padding: 10px;
308   text-align: center;
309   color: #05EAB9;
310   border-radius: 10px 10px 10px 10px;
311   border: 7px solid #05EAB9;
312 }
313 
314 footer {
315   background-color: #05668D;
316   padding: 10px;
317   text-align: center;
318   color: #05EAB9;
319 }
320 
321 @import url(https://fonts.googleapis.com/css?family=Open+Sans);
322 
323 .search {
324   width: 100%;
325   position: relative;
326   display: flex;
327 }
328 
329 .searchTerm {
330   width: 100%;
331   border: 3px solid #05EAB9;
332   border-right: none;
333   padding: 5px;
334   height: 36px;
335   border-radius: 5px 0 0 5px;
336   outline: none;
337   color: #9DBFAF;
338 }
339 
340 .searchTerm:focus{
341   color: #05EAB9;
342 }
343 
344 .searchButton {
345   width: 40px;
346   height: 36px;
347   border: 1px solid #05EAB9;
348   background: #05EAB9;
349   text-align: center;
350   color: #ffffff;
351   border-radius: 0 5px 5px 0;
352   cursor: pointer;
353   font-size: 20px;
354 }
355 .searchButton:hover, .searchButton:active {
356   background: #00A896;
357 }
358 
359 .wrap{
360   width: 50%;
361   transform: translate(50%, 0%);
362 }
363 
364 a:link, a:visited {
365   float: right;
366   position:absolute;
367   top:180px;
368   padding-right: 10px;
369   padding-left: 10px;
370   text-align: center;
371   color: #05EAB9;
372   border-radius: 10px 10px 10px 10px;
373   border: 5px solid #05EAB9;
374   font-size: 25px;
375   white-space: nowrap;
376   overflow: hidden;
377   text-overflow: ellipsis;
378   text-decoration:none;
379 }
380 
381 a:hover, a:active {
382   background-color: #05668D;
383 }
384 
385 
386 header .tooltiptextHeader {
387   visibility: hidden;
388   width: 120px;
389   background-color: #05EAB9;
390   color: #05668D;
391   text-align: center;
392   border-radius: 6px;
393   padding: 5px 0;
394   font-size: 10px;
395 
396   position: absolute;
397   top: 5%;
398   left: 60%;
399 }
400 
401 header:hover .tooltiptextHeader {
402   visibility: visible;
403 }
404 
405 .registerBox{
406   float: right;
407   position:fixed;
408   right:15%;
409   top:0px;
410   padding-right: 10px;
411   padding-left: 10px;
412 }
413 
414 .registerBoxB{
415   float: right;
416   position:fixed;
417   right:15%;
418   top: 100px;
419   padding-right: 10px;
420   padding-left: 10px;
421 }
422