source: other-projects/nz-flag-design/trunk/main-form/css/styles.css@ 29740

Last change on this file since 29740 was 29740, checked in by davidb, 9 years ago

Development of the page for selecting flag w x h (canvas), and the page for controlling the palette colour.
  • Property svn:executable set to *
File size: 22.3 KB
Line 
1
2/* Start with general page based style info for web-app with forward/backward style pages navigation */
3
4/* Color schemes */
5.purpletext {color: #AF90B2;} /*rgba(175, 144, 178, 1.0);*/
6.purplemedium {color: #8F3E98;} /*rgb(143, 62, 152);*/
7.purpledark {color: #632468;} /*rgb(99, 36, 104);*/
8
9
10html {
11 height: 100%;
12
13 border: none;
14 padding: 0;
15 margin: 0;
16}
17
18/*html#main {
19 background:url("../images/background1.png") no-repeat top center fixed #632468;
20 -webkit-background-size: cover;
21 -moz-background-size: cover;
22 -o-background-size: cover;
23 background-size: cover;
24}*/
25
26body {
27 font-family: "Century Gothic", serif;
28 border: none;
29 padding: 0;
30 margin: 0;
31/*
32 font-size: 16px;
33 margin: 0;
34 padding: 0;
35 height: 100%;
36 background-color: #fff;
37 overflow: hidden;
38 position: relative;
39*/
40}
41
42.header {
43 background: #CC0000;
44 -webkit-background-size: 1px 44px;
45 -moz-background-size: 1px 44px;
46 -ms-background-size: 1px 44px;
47 -o-background-size: 1px 44px;
48 background-size: 1px 44px;
49 height: 44px;
50 line-height: 44px;
51 width: 100%;
52 color: #fff;
53 -webkit-user-select: none;
54 -webkit-touch-callout: none;
55 border-bottom: solid 1px #eee;
56}
57
58.header h1 {
59 padding: 0;
60 text-align: center;
61 /*font-size: 24px; */
62 margin: 0;
63 white-space: nowrap;
64 text-overflow: ellipsis;
65 overflow: hidden;
66 -webkit-box-flex: 1;
67 -moz-box-flex: 1;
68 box-flex: 1;
69}
70
71.header-button {
72 position: absolute;
73 top: 6;
74 padding: .7rem .5rem;
75 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76 /* line-height: 1em; */
77}
78
79.header-button-left {
80 position: absolute;
81 left: 4;
82}
83
84
85
86
87/* Narrative/Form style elements for presenting and gathering information */
88
89
90
91html {
92 height: 100%;
93 font-size: 62.5%; /* 10px with default settings */
94 margin: 0;
95 padding: 0;
96}
97
98body {
99 margin: 0;
100 height: 100%;
101 width: 100%; /* width needed for Firefox */
102 border: none;
103 /*background-color: #FFFFFF; */
104}
105
106
107
108.page {
109 margin: 0;
110 height: 100%;
111
112 display: -webkit-box; display: -moz-box; /* old flexbox */
113 display: -ms-flexbox; /* middle-aged flexbox, IE 10 */
114 display: -webkit-flex;
115 display: flex;
116
117 -webkit-box-orient: vertical; -moz-box-orient: vertical;
118 -ms-flex-direction: column;
119 -webkit-flex-direction: column;
120 flex-direction: column;
121
122 -webkit-box-pack: start; -moz-box-pack: start;
123 -ms-flex-pack: start;
124 -webkit-justify-content: start;
125 justify-content: start;
126}
127
128
129
130
131/*.page-heading {display: none;}*/
132.page-heading {
133 color: #AF90B2;
134 background:none;
135}
136
137.page-heading {
138
139 margin: 0;
140
141 display: -webkit-box; display: -moz-box;
142 display: -ms-flexbox;
143 display: -webkit-flex;
144 display: flex;
145
146 -webkit-box-align: center; -moz-box-align: center;
147 -ms-flex-align: center;
148 -webkit-align-items: center;
149 align-items: center;
150
151 -webkit-box-pack: center; -moz-box-pack: center;
152 -ms-flex-pack: center;
153 -webkit-justify-content: center;
154 justify-content: center;
155
156 /*opacity:0.4;
157 filter:alpha(opacity=40);*/ /* For IE8 and earlier */
158
159 /*background-color: #CC0000;*/
160 font-family: "Century Gothic", serif;
161 font-size: 3rem; /* font shorthand doesn't work with rem in IE10 */
162 /*color: white;
163 color:black;*/
164 padding: 1.5rem;
165
166 text-shadow: 0.2rem 0.2rem 0.8rem rgba(0,0,0, .4);
167
168}
169
170.page-body {
171 margin: 0;
172
173 display: -webkit-box; display: -moz-box;
174 display: -ms-flexbox;
175 display: -webkit-flex;
176 display: flex;
177
178 -webkit-box-align: center; -moz-box-align: center;
179 -ms-flex-align: center;
180 -webkit-align-items: center;
181 align-items: center;
182
183 -webkit-box-pack: center; -moz-box-pack: center;
184 -ms-flex-pack: center;
185 -webkit-justify-content: center;
186 justify-content: center;
187
188 -webkit-box-flex: 1; -moz-box-flex: 1;
189 -ms-flex: 1;
190 -webkit-flex: 1;
191 flex: 1;
192
193 /*background:none;*/
194 /*background-color: #FFFFFF;*/
195
196}
197
198.kiaora {
199 background-image:url('../images/background_kiaora.png');
200 background-repeat:no-repeat;
201 /*background-color:#632468; */
202 background-color:#a8cb45; /* Fieldays Green */
203 -webkit-background-size: cover;
204 -moz-background-size: cover;
205 -o-background-size: cover;
206 background-size: cover;
207
208 padding: 1rem 3rem;
209
210 /*color: white;*/
211 font-family: "Century Gothic", serif;
212 /*font-family: "Roboto", "Century Gothic Regular", helvetica, sans-serif;*/
213 font-size: 3rem; /* font shorthand doesn't work with rem in IE10 */
214
215}
216
217div.box {
218 background-repeat:no-repeat;
219 background-color:#a8cb45; /* Fieldays Green, previous purple one, #632468; */
220 -webkit-background-size: cover;
221 -moz-background-size: cover;
222 -o-background-size: cover;
223 background-size: cover;
224
225 font-family: "Century Gothic", serif;
226 font-size: 3rem; /* font shorthand doesn't work with rem in IE10 */
227
228
229 width: 100%;
230 height: 100%;
231 top: 0;
232 right: 0;
233 left: 0;
234 bottom: 0;
235 position: absolute;
236
237}
238
239.consider {
240 background-image:url('../images/consider_background.png');
241}
242
243.final {
244 background-image:url('../images/credits-background.png');
245}
246
247.question-section, .static-discover-box {
248 width:70%;
249 margin: 10% auto;
250 text-align: center;
251}
252
253.finish {
254 width:70%;
255 margin: 15% auto;
256 text-align: center;
257}
258
259.question {
260 margin-top: 20%;
261}
262
263
264/* splash-button unused */
265button.splash-button, button.splash-button:enabled:active {
266 position:absolute;
267 left:0;
268 top:0;
269 background-color:transparent;
270 width:100%;
271 height:100%;
272 border:none;
273
274 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
275 -webkit-tap-highlight-color: transparent;
276}
277
278a.splash-link {
279 position:absolute;
280 left:0;
281 top:0;
282 width:100%;
283 height:100%;
284 z-index:100;
285}
286
287div.top-left {
288 position: absolute;
289 top:20%;
290 left:20%;
291}
292div.bottom-tabbed {
293 position:absolute;
294 top:70%;
295 left:25%;
296}
297div.top-center {
298 position:relative;
299 margin-top:20%;
300 /*border: 2px solid white;*/
301}
302
303.splash {
304 background-image:url('../images/splashpage.png');
305 background-repeat:no-repeat;
306 background-color:#a8cb45; /* Fieldays Green, previous purple one, #632468;*/ /* If this line is taken out, then the white frame of the splash screen is seen */
307 -webkit-background-size: cover;
308 -moz-background-size: cover;
309 -o-background-size: cover;
310 background-size: cover;
311}
312
313.home-page {
314 background-image:url('../images/background_home_browser.png');
315 background-repeat:no-repeat;
316 background-color:#a8cb45; /* Fieldays Green, previous purple one, #632468; */
317 -webkit-background-size: cover;
318 -moz-background-size: cover;
319 -o-background-size: cover;
320 background-size: cover;
321}
322#whats-your-name {
323 /*position:relative;
324 left: -31%;
325 top:-8%;*/
326 position:absolute;
327 left: 5%;
328 top:35%;
329 height: 15%;
330}
331
332.answer {
333 background-repeat:no-repeat;
334 background-color:transparent;
335 background-size:100% 100%;
336
337 border:none;
338 width:205px;
339 height:205px;
340
341 /*position:absolute;
342 top:88%;
343 left:3.5%;*/
344 /*margin-left: 4%;
345 margin-bottom: 7%;*/
346}
347
348
349/* Forward button */
350button.forward-button {
351 background-image:url("../images/forwardbutton.png");
352 /*background-repeat:no-repeat;*/
353 background-color:transparent;
354 background-size:100% 100%;
355
356 border:none;
357 width: 116px;
358 height: 162px;
359
360 position:absolute;
361 right:5%;
362 bottom:5%;
363}
364
365button.forward-button, button.forward-button:enabled:active {
366 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
367 -webkit-tap-highlight-color: transparent; /* For some Androids */
368}
369
370button.forward-button:active {
371 background-image:url('../images/clicked-forward-swirly.png');
372}
373
374
375/* http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html */
376button.answer, button.answer:enabled:active {
377 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
378 -webkit-tap-highlight-color: transparent; /* For some Androids */
379}
380
381button.answer-true {
382 background-image:url('../images/white-true.png');
383}
384
385button.answer-true:active {
386 background-image:url('../images/clicked-white-true.png');
387}
388
389button.answer-false {
390 background-image:url('../images/purple-false.png');
391}
392
393button.answer-false:active {
394 background-image:url('../images/clicked-purple-false.png');
395}
396
397button.answer-any {
398 background-image:url('../images/white-anyone.png');
399}
400
401button.answer-any:active {
402 background-image:url('../images/clicked-white-anyone.png');
403}
404
405button.answer-none {
406 background-image:url('../images/purple-not-me.png');
407}
408
409button.answer-none:active {
410 background-image:url('../images/clicked-purple-not-me.png');
411}
412
413.question-button {
414 position:relative;
415 width: 277px;
416 height: 258px;
417}
418
419#question-title {
420 background-image:url('../images/what-do-you-make-of-this.png');
421 background-repeat:no-repeat;
422 background-color:transparent;
423 background-size:100% 100%;
424
425 border:none;
426 width:275px;
427 height:166px;
428 position: absolute;
429 top: 4%;
430 left: 4%;
431}
432
433
434.page-inset {
435 margin-top:200px;
436
437 width: 75%;
438 /*width: 500px;*/
439 height: 350px;
440
441 display: -webkit-box; display: -moz-box;
442 display: -ms-flexbox;
443 display: -webkit-flex;
444 display: flex;
445
446 -webkit-box-orient: vertical; -moz-box-orient: vertical;
447 -ms-flex-direction: column;
448 -webkit-flex-direction: column;
449 flex-direction: column;
450
451 -webkit-box-align: center; -moz-box-align: center;
452 -ms-flex-align: center;
453 -webkit-justify-content: center;
454 justify-content: center;
455
456 -webkit-box-pack: center; -moz-box-pack: center;
457 -ms-flex-pack: center;
458 -webkit-align-items: center;
459 align-items: center;
460
461 padding: 1rem 3rem;
462
463 background: none;
464 /*color: #AF90B2; purpletext: rgba(175, 144, 178, 1.0);*/
465 /*background-color: rgba(200, 200, 200, .9);
466 color: white;*/
467
468 font-family: "Century Gothic", serif;
469 font-size: 3rem; /* font shorthand doesn't work with rem in IE10 */
470 text-shadow: 0 0 1.2rem rgba(0,0,0, .4);
471
472 /*
473 -moz-box-box-shadow: 0.3rem 0.3rem 0.3rem 0.2rem #909090;
474 -webkit-box-shadow: 0.3rem 0.3rem 0.3rem 0.2rem #909090;
475 box-shadow: 0.3rem 0.3rem 0.3rem 0.2rem #909090;
476
477 border-radius: .5rem;*/
478}
479
480.page-inset.purple { color: #AF90B2; }
481
482
483#info-page {
484 position: relative;
485 margin:0;
486 border: 0px;
487 height: 100%;
488 background-color:#a8cb45; /* Fieldays Green, previous purple one, #642261;*/ /* dark purple instead of dark violet */
489 /*padding: 2%;*/
490}
491
492/* don't add padding to body of innovation-story.html. It gets added TO the width. */
493iframe {
494position: relative;
495width: 100%;
496height: 100%;
497border: 0px; /* stops the unnecessary tiny bit of horizontal scrolling in iframe */
498overflow:scroll;
499/*scrolling:no;*/
500margin: 0;
501background-color:none;
502}
503
504/*http://stackoverflow.com/questions/65034/remove-border-from-iframe
505frameBorder:0;
506hspace: 0; vspace:0; marginheight: 0; marginwidth: 0;
507seamless: seamless;
508*/
509
510html#story {
511 background:url("../images/background_kiaora.png") no-repeat top center fixed #a8cb45;
512 /* background:url("../images/background_kiaora.png") no-repeat top center fixed #632468;*/
513 /* background:url("../images/background3.png") no-repeat center center fixed;*/ /* #632468 */
514 -webkit-background-size: cover;
515 -moz-background-size: cover;
516 -o-background-size: cover;
517 background-size: cover;
518 height: 100%;
519 color: white;
520}
521
522html#story-final {
523 background:url("../images/consider_background.png") no-repeat top center fixed #a8cb45;
524 /* background:url("../images/consider_background.png") no-repeat top center fixed #632468; */
525 /* background:url("../images/background3.png") no-repeat center center fixed;*/ /* #632468 */
526 -webkit-background-size: cover;
527 -moz-background-size: cover;
528 -o-background-size: cover;
529 background-size: cover;
530 height: 100%;
531 color:#632468;
532}
533
534
535.flex-stretch {
536 -webkit-box-flex: 1; -moz-box-flex: 1;
537 -ms-flex: 1;
538 -webkit-flex: 1;
539 flex: 1;
540}
541
542
543#static-info-page a {text-decoration: none;}
544#static-info-page a:link {color:#cfa1cd;}
545#static-info-page a:visited {color:#95348b;}
546#static-info-page a:hover {color:white;}/*#dbbcda*/
547#static-info-page a:active {color:white;}
548
549#enter-name, #enter-email {
550 position:absolute;
551 left:10%; /*left:11.7%;*/
552 top:50%;/*top:46.7%;*/
553 width: 79.2%;/*width: 79.5; 77.5%;*/
554 height: 12%; /*no height for app*/
555 color:white;
556 background-color: #95348b; /*background:none; for app*/
557 font-size: 5rem;
558 border:none;
559}
560
561/* http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
562http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml : width vs device-width
563http://protofluid.com/ and http://protofluid.com/?c=mediaQueries
564http://www.w3avenue.com/2010/05/12/protofluid-website-layout-testing-for-various-devices/
565Need to run fieldays app on a local server, such as public_html then visit the protofluid.com site
566Press the link labelled "URL" at the top right, paste in http://www.cs.waikato.ac.nz/~anupama/fieldays
567and then keep clicking > button on top left until on the top-right it says 480 (px) for width. */
568@media only screen and (max-device-width: 1280px) { /*480px*/
569 .home-page {
570 background-image:url('../images/background_home.png');
571 }
572 #whats-your-name {
573 display:none;
574 }
575
576 #enter-name, #enter-email {
577 position:absolute;
578 top:48.5%;/*top:46.7%;*/
579 /*left:10%;*/
580 width: 79.5%;
581 height: 10%; /*no height for app*/
582 background:none;
583
584 }
585}
586
587.vstretchy-centered {
588 margin: 0;
589
590 display: -webkit-box; display: -moz-box;
591 display: -ms-flexbox;
592 display: -webkit-flex;
593 display: flex;
594
595 -webkit-box-orient: vertical; -moz-box-orient: vertical;
596 -ms-flex-direction: column;
597 -webkit-flex-direction: column;
598 flex-direction: column;
599
600 -webkit-box-align: center; -moz-box-align: center;
601 -ms-flex-align: center;
602 -webkit-align-items: center;
603 align-items: center;
604
605 -webkit-box-pack: center; -moz-box-pack: center;
606 -ms-flex-pack: center;
607 -webkit-justify-content: center;
608 justify-content: center;
609
610 -webkit-box-flex: 1; -moz-box-flex: 1;
611 -ms-flex: 1;
612 -webkit-flex: 1;
613 flex: 1;
614}
615
616/* Exploring buttons */
617button.exploring {
618 background-repeat:no-repeat;
619 background-color:transparent;
620 background-size:100% 100%;
621
622 border:none;
623
624 /*position:absolute;
625 top:88%;
626 left:3.5%;*/
627 /*margin-left: 4%;
628 margin-bottom: 7%;*/
629 width:514px;
630 height:63px;
631}
632button.continue-exploring {
633 background-image:url('../images/continueexploringbutton.png');
634}
635button.start-exploring {
636 background-image:url('../images/startexploringbutton.png');
637}
638button.consider {
639 background-image:url('../images/nowconsiderbutton.png');
640}
641/* End exploring buttons */
642
643button.start {
644 background-image:url('../images/enter_enabled.png');
645 background-repeat:no-repeat;
646 background-color:transparent;
647 background-size:100% 100%;
648
649 border:none; /*border:2px solid white;*/
650 position:absolute;
651
652 top:71%;
653 left:36.5%;
654 width:27%;
655 height:14%;
656}
657
658button.start:disabled {
659 /*width: 200px; width: 220px; */
660 background-image:url('../images/enter_disabled.png');
661
662}
663
664.discover {
665 position:relative;
666 /*width: 260px;*/
667 width: 514px;
668 height: 63px;
669}
670.start-exploring {
671 top:70%;
672 left:30%;
673
674 background-image:url('../images/startexploringbutton.png');
675}
676.continue-exploring {
677 background-image:url('../images/continueexploringbutton.png');
678}
679
680/* http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html */
681button, button:enabled:active {
682 /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
683 /*-webkit-tap-highlight-color: transparent;*/ /* For some Androids */
684}
685
686/*button.round, button.square, button.square:enabled:active {
687 font-size:4rem;
688
689 text-align: center;
690 text-decoration: none;
691
692 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
693}*/
694
695button.purple {
696 color:white;/*#AF90B2;*/
697 background-color:#95bd26; /* Fieldays Green, previous purple one, #8F3E98; */
698 border: none;
699}
700
701/*
702button.square:disabled {
703 border:3px solid #8F3E98;
704}
705button.square:enabled:active {
706 border:3px solid white;
707}
708button.purple.square:disabled {
709 color:#8F3E98;
710 background-color:#632468;
711}
712button.purple.square:enabled:active {
713 color:white;
714 background-color:#8F3E98;
715}*/
716
717
718button.round:disabled{
719 background:#c2b0b0;
720 border:1px solid #c2b0b0;
721 /*reduce the size of the shadow to give a pushed effect*/
722 -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
723 -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
724 box-shadow: 0px 0px 5px rgba(0,0,0, .75);
725}
726
727button.round:enabled:active{
728 background:#c20b0b;
729 border:1px solid #c20b0b;
730 /*reduce the size of the shadow to give a pushed effect*/
731
732 -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
733 -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
734 box-shadow: 0px 0px 5px rgba(0,0,0, .75);
735}
736
737
738
739hr.fade-in {
740 border: 0;
741 height: 2px;
742 width: 100%;
743
744 background: #333;
745 background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
746 background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
747 background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
748 background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
749}
750
751
752hr.inset {
753 height: 6px;
754 width: 100%;
755 border: 0;
756 box-shadow: inset 0 6px 6px -6px black;
757}
758
759
760.narrative {
761 background: #ccc;
762 height: 32px;
763 padding-left:6px;
764 padding-right: 6px;
765 padding-top: 6px;
766 margin-bottom: 6px;
767 border-bottom: solid 1px #666;
768}
769
770
771
772/* Application specific CSS */
773
774.search-bar {
775 background: #ccc;
776 height: 32px;
777 padding-left:6px;
778 padding-right: 6px;
779 padding-top: 6px;
780 margin-bottom: 6px;
781 border-bottom: solid 1px #666;
782}
783
784
785
786
787input[type="search"] {
788 width:100%;
789 border: none;
790 border-radius: 4px;
791 padding: 4px 0px 2px 2px;
792 margin-top: 0px;
793 font-size: 16px;
794 box-shadow: inset 0 2px 2px rgba(0,0,0,.5), 0 1px #fff;
795 background: #eee;
796 -webkit-appearance:none;
797}
798
799input[type="search"]:focus {
800 outline: none;
801 box-shadow: inset 0 4px 8px rgba(0,0,0,.5), 0 1px #fff;
802}
803
804input.purple {
805 background-color: #95bd26; /* Fieldays Green, previous purple one, #8F3E98; */
806 color:white;
807 border: 0px solid;
808 height:6rem;
809}
810
811ul {
812 margin: 0;
813 padding: 0;
814 list-style: none;
815 background-color: #fafafa;
816 border-bottom: 1px solid #e0e0e0;
817}
818
819li {
820 display: block;
821 border-top: 1px solid #c0c0c0;
822 padding: 10px;
823}
824
825ul {
826 margin: 0;
827 padding: 0;
828 list-style: none;
829 background-color: #fff;
830 border-bottom: 1px solid #e0e0e0;
831}
832
833li {
834 display: block;
835 border-top: 1px solid #e0e0e0;
836 padding: 10px;
837}
838
839li {
840 padding: 0;
841 display: -webkit-box;
842 display: -moz-box;
843 display: box;
844 width: 100%;
845}
846
847li>a {
848 color: #000;
849 display: block;
850 padding: 5px;
851 text-decoration: none;
852 width: 100%;
853 -webkit-box-flex: 1;
854 -moz-box-flex: 1;
855 box-flex: 1;
856 -webkit-box-sizing: border-box;
857 -moz-box-sizing: border-box;
858 box-sizing: border-box;
859 background-position: -10px 0;
860 background-repeat: no-repeat;
861 -webkit-background-size: 10px 100%;
862 -moz-background-size: 10px 100%;
863 -ms-background-size: 10px 100%;
864 -o-background-size: 10px 100%;
865 background-size: 10px 100%;
866}
867
868li>a * {
869 pointer-events: none;
870}
871
872.button {
873 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
874 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
875 box-shadow:inset 0px 1px 0px 0px #ffffff;
876 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
877 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
878 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
879 background-color:#ededed;
880 -moz-border-radius:2px;
881 -webkit-border-radius:2px;
882 border-radius:2px;
883 border:1px solid #dcdcdc;
884 display:inline-block;
885 /*color:#CC0000;*/
886 color: #632468;
887 font-size:3rem;
888 text-decoration:none;
889 text-shadow:1px 1px 0px #ffffff;
890}
891.button:hover {
892 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
893 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
894 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
895 background-color:#dfdfdf;
896
897}
898
899h1 {
900 font-size: 4rem;
901 padding: 20 0 0 0;
902 margin: 0px;
903}
904
905h2 {
906 font-size: 3rem;
907 font-weight: normal;
908 padding: 0px;
909 margin: 0px;
910}
911
912.scroll {
913 overflow: auto;
914 -webkit-overflow-scrolling: touch;
915 position: absolute;
916 top: 84px;
917 bottom: 0px;
918 left: 0px;
919 right: 0px;
920}
921
922li>a.tappable-active {
923 color: #fff;
924 background-color: #4286f5; /* !!!! */
925}
926
927.page {
928 position: absolute;
929 width: 100%;
930 height: 100%;
931 -webkit-transform:translate3d(0,0,0);
932}
933
934.stage-center {
935 top: 0;
936 left: 0;
937}
938
939.stage-left {
940 left: -100%;
941}
942
943.stage-right {
944 left: 100%;
945}
946
947.transition {
948 -moz-transition-duration: .375s;
949 -webkit-transition-duration: .375s;
950 -o-transition-duration: .375s;
951}
952
953/* Jojo's changes */
954
955/* CSS for the choose-canvas page */
956.centredDiv {
957 margin: 0 auto;
958 width: 1300px;
959 text-align: center;
960}
961
962.ratioDiv {
963 height: 200px;
964 margin: 5px;
965 display: inline-block;
966 background-color: #95BD26;
967 border: 1px solid #000;
968}
969
970#ratio23 { width: 300px }
971#ratio12 { width: 400px; border-color: white }
972#ratio35 { width: 333.3px }
973#ratio1019 { width: 380px }
974#ratio58 { width: 320px }
975#ratio811 { width: 275px }
976
977.optionline {
978 word-spacing: 300px;
979 line-height: 5px;
980 margin-top: 5px;
981 text-align: center;
982}
983
984
985/* Ideally the different flags shown will be dynamic in the future, and flagHover will no longer be necessary */
986.flagHover:hover {
987 position: relative;
988}
989
990.flagHover:hover:after {
991 content: url(ratio23.png);
992 display: block;
993 position: absolute;
994 left: 250px;
995 top: 10px;
996}
997
998/* CSS for choose-palette page */
999.paletteCircle {
1000 position: absolute;
1001}
1002
1003#palette {
1004 padding: 0 0 0 50px;
1005 position: relative;
1006}
1007
1008/* The orange palette image */
1009#paletteImage {
1010 position: relative;
1011 top: 0;
1012 left: 0
1013}
1014
1015/* Positions of the palette circles on the palette */
1016#paletteCircleBackground { top: 75px; left: 150px }
1017#paletteCircle1 { top: 35px; left: 295px }
1018#paletteCircle2 { top: 50px; left: 450px }
1019#paletteCircle3 { top: 105px; left: 585px; display: none }
1020#paletteCircle4 { top: 210px; left: 700px; display: none }
1021#paletteCircle5 { top: 330px; left: 625px; display: none }
1022#paletteCircle6 { top: 355px; left: 480px; display: none }
1023#paletteCircle7 { top: 345px; left: 335px; display: none }
1024
1025#pickerDiv {
1026 float:right;
1027 position: relative;
1028 padding: 0 50px 0 0;
1029}
Note: See TracBrowser for help on using the repository browser.