simple message/error display
[confetti] / style.css
1 * {
2   font-family: sans-serif;
3   -moz-box-sizing: border-box;
4   -webkit-box-sizing: border-box;
5   box-sizing: border-box;
6   z-index: 0;
7 }
8 body {
9   background: #EEE;
10   margin: 0;
11   padding: 0;
12   padding-top: 2.5em;
13   position: absolute;
14   min-height: 100%;
15   width: 100%;
16   padding-bottom: 2em;
17 }
18 .NAVIGATION {
19   position: fixed;
20   top: 0;
21   display: inline-block;
22   border-style: none solid solid solid;
23   border-width: 0 1px 1px 1px;
24   border-radius: 0 0 4px 4px;
25   margin: 0 2em;
26   padding: .5em 1ex;
27   background: #FFF;
28   z-index: 1;
29 }
30 .NAVIGATION label,
31 .NAVIGATION a {
32   color: #008;
33   border: solid 1px #BBF;
34   margin: .5em .5ex .25em .5ex;
35   padding: .2em 3ex .2em 3ex;
36   background: #EFF;
37 }
38 .NAVIGATION label:hover,
39 .NAVIGATION a:hover {
40   border-width: 2px 1px;
41   background: #F3FFFF;
42 }
43
44 #CONFIGURE        label[for="navigationconfig"] { display: none; }
45 #CONFIGURE:target label[for="navigationconfig"] { display: inline; }
46
47 .NAVIGATION input#navigationconfig { display: none; }
48 .NAVIGATION input + form.config {
49   position: static;
50   display: none;
51 }
52
53 .NAVIGATION .config a { display: block; }
54 .NAVIGATION .config a:hover { border-width: 1px 2px; }
55 .NAVIGATION input:checked + form.config { display: block; }
56 .NAVIGATION .config input[type=text],
57 .NAVIGATION .config button {
58   font-size: .875em;
59   line-height: 1.5em;
60   height: 1.75em;
61   padding: 0 .25em;
62   vertical-align: bottom;
63   border: 1px solid #000;
64   background-color: #FFF;
65 }
66 .NAVIGATION .config input[type=text] {
67   margin: .25em 0 0 .375em;
68   border-right: none;
69   width: 70%;
70 }
71 .NAVIGATION .config button {
72   min-width: 2.5em;
73   text-align: center;
74   max-width: 30%;
75 }
76 .NAVIGATION .config button[value=del] {
77   background: #FCC;
78 }
79
80 #message {
81   display: block;
82   position: fixed;
83   top: 0; width: 100%;
84   margin: 0; padding: 1em;
85   text-align: center;
86   font-weight: bold;
87   background-color: #FAA;
88   border: 1px solid #000;
89   border-style: none none solid none;
90 }
91
92 .trailbtn { display: none; }
93 .trailbtn + .trailbox { display: none; }
94 .trailbtn:checked + .trailbox { display: inline-block; }
95 .trailbtn:checked + .trailbox + .trailbtn { display: block; }
96 .trailbtn:checked + .trailbox + .trailbtn:before {
97    display: block; content: '+';
98    width: 3ex; text-align: center;
99    margin-top: .25em; padding: .25em 0;
100    background-color: #FFF;
101    border-width: 1px; border-style: solid;
102 }
103 .trailbtn:checked + .trailbox + .trailbtn:checked,
104 .trailbtn:checked { display: none; }
105
106 #footer {
107   width: 100%;
108   background-color: #FFF;
109   border-top: 1px solid #BBF;
110   margin: 0; padding: .5em 2em;
111   position: absolute; bottom: 0;
112 }