-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
156 lines (127 loc) · 19.2 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/* CASCADABLE 1.0.0 */
/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}address{font-style:normal}* :focus{outline:0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/* CUI PAGE DEFAULTS */
html body.cui { background:#f6f6f6; background:rgba(246, 246, 246, 1); }
div.cui.cui-page-wrap[role="main"] { color:#969a9d; color:rgba(150, 154, 157, 1); font:300 14px/24px "Helvetica Neue", sans-serif; letter-spacing:0.5px; background:#fcfcfc; background:rgba(252, 252, 252, 1); border:solid 1px #e6e6e6; border-color:rgba(230, 230, 230, 0.8); box-shadow:0 0 8px rgba(221, 221, 221, 0.8); }
.cui a:link, .cui a:visited { color:#1c9dd7; color:rgba(28, 157, 215, 1); text-decoration:none; }
.cui a:hover, .cui a:active { text-decoration:underline; }
/* CUI GRID */
div.cui.cui-column-a.cui-page-wrap[role="main"]
{ float:none !important; margin:10px auto !important; }
div.cui.cui-column-a, aside.cui.cui-column-a, div.cui.cui-column-b, aside.cui.cui-column-b, div.cui.cui-column-c, aside.cui.cui-column-c, div.cui.cui-column-d, aside.cui.cui-column-d, div.cui.cui-column-e, aside.cui.cui-column-e, div.cui.cui-column-f, aside.cui.cui-column-f
{ float:left; margin:0 10px; padding:10px; }
div.cui.cui-column-a, aside.cui.cui-column-a { width:940px; }
div.cui.cui-column-b, aside.cui.cui-column-b { width:700px; }
div.cui.cui-column-c, aside.cui.cui-column-c { width:430px; }
div.cui.cui-column-d, aside.cui.cui-column-d { width:270px; }
div.cui.cui-column-e, aside.cui.cui-column-e { width:195px; }
div.cui.cui-column-f, aside.cui.cui-column-f { width:160px; }
div.cui.cui-column-a.cui-container, aside.cui.cui-column-a.cui-container { width:930px; padding:0; }
div.cui.cui-column-b.cui-container, aside.cui.cui-column-b.cui-container { width:690px; padding:0; }
div.cui.cui-column-c.cui-container, aside.cui.cui-column-c.cui-container { width:420px; padding:0; }
div.cui.cui-column-d.cui-container, aside.cui.cui-column-d.cui-container { width:260px; padding:0; }
div.cui.cui-column-e.cui-container, aside.cui.cui-column-e.cui-container { width:185px; padding:0; }
div.cui.cui-column-f.cui-container, aside.cui.cui-column-f.cui-container { width:150px; padding:0; }
/* HEADINGS */
h1.cui { font-size:36px; margin:10px 0 40px; color:#434e53; color:rgba(67, 78, 83, 1); }
h2.cui { font-size:40px; font-weight:100; margin:10px 0 30px; color:#1c9dd7; color:rgba(28, 157, 215, 1); }
h3.cui, h4.cui { font-size:24px; margin:10px 0 20px; color:#434e53; color:rgba(67, 78, 83, 1); }
h4.cui, h5.cui, h6.cui { font-size:18px; margin:0; }
h5.cui { font-size:14px; color:#434e53; color:rgba(67, 78, 83, 0.8); }
h6.cui { font-size:11px; text-transform:uppercase; color:#434e53; color:rgba(67, 78, 83, 0.8); }
/* PARAGRAPHS, FORMATTING & PHRASES */
p.cui { margin:16px 0; }
.cui code { color:#000; color:rgba(0, 0, 0, 1); background:#eee; background:rgba(238, 238, 238, 1); padding:1px 2px; margin:4px; border:solid 1px #ddd; border-color:rgba(221, 221, 221, 1); }
.cui strong { color:#666; color:rgba(102, 102, 102, 1); }
.cui address { line-height:26px; margin:10px; }
/* FORMS */
form.cui { background:#e0e0e0; background:rgba(238, 238, 238, 0.7); width:auto; margin:0 4px 32px; padding:16px 24px 24px 16px; -webkit-padding-before:6px; border-radius:5px; -ms-border-radius:5px; border:solid 1px #e6e6e6; border-color:rgba(224, 224, 224, 0.8); box-shadow:inset 1px 2px 10px rgba(220, 220, 220, 0.6), 1px 2px 1px rgba(255, 255, 255, 1); }
form.cui legend { font-size:22px; font-weight:100; letter-spacing:1px; margin:0 0 10px 0; color:#434e53; color:rgba(67, 78, 83, 1); }
form.cui legend span { color:rgba(67, 78, 82, 0.6); font-size:18px; }
form.cui label { display:block; margin:12px 0 4px 0; font-size:11px; font-weight:200; text-transform:uppercase; letter-spacing:0.5px; color:rgba(67, 78, 83, 0.6); }
form.cui input[type="checkbox"] + label, form.cui input[type="radio"] + label { display:inline; font:300 15px "Helvetica Neue", sans-serif; color:#434e53; color:rgba(67, 78, 83, 0.8); text-transform:capitalize; }
form.cui label em.cui-req, label em.cui-req { font-style:normal; color:#1c9dd7; color:rgba(28, 157, 215, 1); }
form.cui input, form.cui textarea, form.cui select { display:block; width:100%; padding:4px; margin:5px 0; height:26px; border:solid 1px #d6d6d6; border-color:rgba(214, 214, 214, 1); font:300 15px "Helvetica Neue", sans-serif !important; color:#434e53; color:rgba(67, 78, 83, 0.8); border-radius:3px; -ms-border-radius:3px; box-shadow:inset 1px 2px 8px rgba(200, 200, 200, 0.6), 1px 1px 0 rgba(255, 255, 255, 1); }
form.cui input:focus, form.cui textarea:focus, form.cui select:focus { border:solid 1px rgba(0, 127, 185, 0.4); box-shadow:0 0 4px rgba(28, 157, 215, 0.6); }
form.cui textarea { min-height:100px; resize:none; }
form.cui select, form.cui input[type="number"], form.cui input[type="range"] { width:60%; height:26px; }
form.cui select { height:40px; padding:8px 4px; cursor:pointer; }
form.cui ::-webkit-input-placeholder { color:#bbb; color:rgba(187, 187, 187, 1); text-shadow:1px 1px 0 rgba(255, 255, 255, 1); }
form.cui :-moz-placeholder { color:#bbb; color:rgba(187, 187, 187, 1); }
form.cui :-ms-input-placeholder { color:#bbb; color:rgba(187, 187, 187, 1); }
form.cui input[type="checkbox"], form.cui input[type="radio"] { display:inline; -webkit-appearance:none; background:none; -webkit-padding-start:18px; -webkit-padding-after:0px; width:20px; height:20px; margin:5px; vertical-align:middle; }
form.cui input[type="radio"] { -webkit-border-radius:1000px; }
form.cui input[type="range"] { -webkit-appearance:none; height:0px; padding:3px; background:rgba(67, 78, 83, 0.25); box-shadow:1px 1px rgba(255, 255, 255, 1); border:solid 1px rgba(67, 78, 83, 0.2); }
form.cui input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; background:#eee; background:rgba(221, 221, 221, 1); -webkit-box-shadow:inset 0px 1px 1px rgba(255, 255, 255, 1), 0 2px 2px rgba(0, 0, 0, 0.4), 0 0 4px rgba(10, 10, 40, 0.4); width:20px; height:20px; border-radius:1000px; -webkit-border-radius:1000px; background:-webkit-radial-gradient(rgba(255, 255, 255, 0.25) 50%, rgba(240, 240, 240, 0.25) 100%), -webkit-radial-gradient(50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%); cursor:move; }
/* BUTTONS */
button.cui, input[type="button"].cui, input[type="submit"].cui, .cui.cui-button-style, a.cui.cui-button-style { border-radius:4px; -ms-border-radius:4px; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(120, 120, 120, 1), 0 4px 6px rgba(200, 200, 200, 0.6); padding:8px 10px; width:120px; cursor:pointer; font-size:12px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); color:#434e53; color:rgba(67, 78, 83, 1); text-align:center; display:inline-block; vertical-align:middle; margin:5px; background:#eee; border:solid 1px #ccc; border-color:rgba(204, 204, 204, 1); background:-webkit-linear-gradient(rgba(242, 242, 242, 1), rgba(226, 226, 226, 1)); background:-moz-linear-gradient(rgba(242, 242, 242, 1), rgba(226, 226, 226, 1)); background:-ms-linear-gradient(rgba(242, 242, 242, 1), rgba(226, 226, 226, 1)); background:-o-linear-gradient(rgba(242, 242, 242, 1), rgba(226, 226, 226, 1)); background:linear-gradient(rgba(242, 242, 242, 1), rgba(226, 226, 226, 1)); }
button.cui:hover, input[type="button"]:hover, input[type="submit"]:hover, .cui-button-style:hover, a.cui-button-style:hover { text-decoration:none; background:-webkit-linear-gradient(rgba(250, 250, 250, 1), rgba(214, 214, 214, 1)); background:-moz-linear-gradient(rgba(250, 250, 250, 1), rgba(214, 214, 214, 1)); background:-ms-linear-gradient(rgba(250, 250, 250, 1), rgba(214, 214, 214, 1)); background:-o-linear-gradient(rgba(250, 250, 250, 1), rgba(214, 214, 214, 1)); linear-gradient(rgba(250, 250, 250, 1), rgba(214, 214, 214, 1)); opacity:0.9; }
.cui.cui-button-style, a.cui.cui-button-style { padding:4px 5px; width:108px; font-weight:400; }
button.cui.cui-secondary:hover, .cui.cui-button-style.cui-secondary:hover, a.cui.cui-button-style.cui-secondary:hover { background:rgba(57, 68, 73, 1); color:#e0e0e0; rgba(224, 224, 224, 1); }
button.cui.cui-button, input[type="button"].cui.cui-button, input[type="submit"].cui.cui-button, .cui.cui-button.cui-button-style, a.cui.cui-button.cui-button-style, button.cui.cui-button-cta, input[type="button"].cui.cui-button-cta, input[type="submit"].cui.cui-button-cta, .cui.cui-button-cta.cui-button-style, a.cui.cui-button-cta.cui-button-style { width:200px; padding:10px 20px; font-size:13px; color:#fff; color:rgba(255, 255, 255, 1); text-shadow:0 1px 1px rgba(27, 38, 43, 1); background:#1c9dd7; background:-webkit-linear-gradient(rgba(58, 187, 245, 1), rgba(0, 129, 200, 1)); background:-moz-linear-gradient(rgba(58, 187, 245, 1), rgba(0, 129, 200, 1)); background:-ms-linear-gradient(rgba(58, 187, 245, 1), rgba(0, 129, 200, 1)); background:-o-linear-gradient(rgba(58, 187, 245, 1), rgba(0, 129, 200, 1)); background:linear-gradient(rgba(58, 187, 245, 1), rgba(0, 129, 200, 1)); border-color:#1c9dd7; border-color:rgba(8, 137, 195, 1); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 89, 170, 1); }
.cui.cui-button.cui-button-style, a.cui.cui-button.cui-button-style { padding:6px 11px; width:176px; font-weight:400; }
button.cui.cui-button:hover, input[type="button"].cui.cui-button:hover, input[type="submit"].cui.cui-button:hover, .cui.cui-button.cui-button-style:hover, a.cui.cui-button.cui-button-style:hover, button.cui.cui-secondary, .cui.cui-button-style.cui-secondary, a.cui.cui-button-style.cui-secondary { color:#eee; color:rgba(238, 238, 238, 1); background:#434e53; background:-webkit-linear-gradient(rgba(70, 76, 81, 1), rgba(40, 46, 53, 1)); background:-moz-linear-gradient(rgba(70, 76, 81, 1), rgba(40, 46, 53, 1)); background:-ms-linear-gradient(rgba(70, 76, 81, 1), rgba(40, 46, 53, 1)); background:-o-linear-gradient(rgba(70, 76, 81, 1), rgba(40, 46, 53, 1)); background:linear-gradient(rgba(70, 76, 81, 1), rgba(40, 46, 53, 1)); border-color:#434e53; border-color:rgba(47, 58, 63, 1); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(17, 28, 33, 1); opacity:1; }
button.cui.cui-secondary, .cui.cui-button-style.cui-secondary, a.cui.cui-button-style.cui-secondary { color:#eee; color:rgba(238, 238, 238, 1); text-shadow:0 1px 1px rgba(27, 38, 43, 1); }
button.cui.cui-button-cta, input[type="button"].cui.cui-button-cta, input[type="submit"].cui.cui-button-cta, .cui.cui-button-cta.cui-button-style, a.cui.cui-button-cta.cui-button-style { width:340px; padding:12px 24px; font-size:16px; font-weight:500; color:#fff; color:rgba(255, 255, 255, 1); text-shadow:0 1px 1px rgba(27, 38, 43, 1); background:-webkit-linear-gradient(rgba(58, 187, 245, 1) 30%, rgba(68, 197, 255, 1) 50%, rgba(30, 159, 230, 1) 50%, rgba(0, 129, 200, 1)); background:-moz-linear-gradient(rgba(58, 187, 245, 1) 30%, rgba(68, 197, 255, 1) 50%, rgba(30, 159, 230, 1) 50%, rgba(0, 129, 200, 1)); background:-ms-linear-gradient(rgba(58, 187, 245, 1) 30%, rgba(68, 197, 255, 1) 50%, rgba(30, 159, 230, 1) 50%, rgba(0, 129, 200, 1)); background:-o-linear-gradient(rgba(58, 187, 245, 1) 30%, rgba(68, 197, 255, 1) 50%, rgba(30, 159, 230, 1) 50%, rgba(0, 129, 200, 1)); background:linear-gradient(rgba(58, 187, 245, 1) 30%, rgba(68, 197, 255, 1) 50%, rgba(30, 159, 230, 1) 50%, rgba(0, 129, 200, 1)); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 89, 170, 1), 0 1px 5px rgba(67, 78, 83, 0.6); }
.cui.cui-button-cta.cui-button-style, a.cui.cui-button-cta.cui-button-style { padding:9px 21px; width:297px; }
button.cui.cui-button-cta:hover, input[type="button"].cui.cui-button-cta:hover, input[type="submit"].cui.cui-button-cta:hover, .cui.cui-button-cta.cui-button-style:hover, a.cui.cui-button-cta.cui-button-style:hover { opacity:1; background:-webkit-linear-gradient(rgba(68, 197, 255, 1), rgba(58, 187, 245, 1)); text-shadow:0 1px 0 rgba(80, 86, 91, 1); }
/* CONTAINERS */
div.cui.cui-container, aside.cui.cui-container { background:#fff; background:rgba(255, 255, 255, 1); border:solid 1px #ccc; margin:6px; border-radius:4px; -ms-border-radius:4px; }
div.cui.cui-container hgroup, aside.cui.cui-container hgroup { overflow:hidden; background:#e0e0e0; background:rgba(238, 238, 238, 0.7); border-bottom:solid 1px #ccc; }
div.cui.cui-container hgroup h4, div.cui.cui-container hgroup h4, div.cui.cui-container hgroup h5, div.cui.cui-container hgroup h5, aside.cui.cui-container hgroup h4, aside.cui.cui-container hgroup h4, aside.cui.cui-container hgroup h5, aside.cui.cui-container hgroup h5
{ float:left; margin:8px 12px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); }
div.cui.cui-container button.cui-container-toggle, aside.cui.cui-container button.cui-container-toggle { width:24px; height:24px; font-size:16px; float:right; text-align:center; padding:0 0 2px 0; margin:8px; -webkit-padding-after:0; }
div.cui.cui-container section.cui, aside.cui.cui-container section.cui, div.cui.cui-container section.cui p.cui, aside.cui.cui-container section.cui p.cui { margin:1%; width:96% !important; }
div.cui.cui-container.cui-column-a section.cui, aside.cui.cui-container.cui-column-a section.cui { width:97% !important; }
div.cui.cui-container.cui-column-e section.cui, aside.cui.cui-container.cui-column-e section.cui,
div.cui.cui-container.cui-column-f section.cui, aside.cui.cui-container.cui-column-f section.cui,
div.cui.cui-container a.cui.cui-button-style, aside.cui.cui-container a.cui.cui-button-style { width:93% !important; }
div.cui.cui-container section.cui form.cui, aside.cui.cui-container section.cui form.cui { background:none; border:none; margin:5px; padding:0; box-shadow:none; }
/* MISCELLANY */
.clear { clear:both; }
.cui-full { display:block; width:100% !important; }
p.cui-full { text-align:center; }
form.cui input, hr.cui
{ width:100%; -webkit-margin-before:0; -webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0; }
hr.cui { margin:20px 5px 20px 0; }
/* END CUI STYLES */
/* DEMO PAGE STYLES */
header#topbar { position:fixed; z-index:1; top:0; left:0; width:100%; height:40px; background:#434e53; background:rgba(67, 78, 83, 1); border-bottom:solid 1px #666; border-color:rgba(102, 102, 102, 0.8); color:#fff; color:rgba(255, 255, 255, 0.9); font:100 20px/30px "Helvetica Neue", Helvetica, sans-serif !important; }
header#topbar h2 { float:left; color:inherit !important; margin:5px; letter-spacing:1px; font-weight:100; }
header#topbar h2 a span { display:block; float:left; text-indent:-99999px; background:url("http://www.getable.com/content/theme/g1/img/getable_logo.png") 0 0 / cover no-repeat; width:38px; height:32px; margin:-1px 2px 2px; }
header#topbar h2 em { font-size:14px; font-weight:normal; letter-spacing:0.5px; opacity:0.7; padding-left:4px; }
header#topbar nav#top-nav { width:960px; text-align:right; margin:3px 0 0 150px; }
header#topbar nav#top-nav a { width:140px; color:#fff; color:rgba(255, 255, 255, 1); font-size:14px; margin:0 0 0 16px; font-weight:300; }
header#topbar nav#top-nav a.active { opacity:0.8; }
nav#cascadable { position:fixed; top:40px; left:0; width:140px; height:100%; background:#dce6f0; background:rgba(220, 230, 240, 1); font:12px/24px sans-serif; border-right:solid 1px rgba(135, 139, 142, 1); }
nav#cascadable a, nav#cascadable strong { display:block; padding:4px 8px; }
nav#cascadable a:link, nav#cascadable a:visited { color:#434e53; color:rgba(67, 78, 83, 1); text-shadow:none; }
nav#cascadable a:hover, nav#cascadable a:active { background:#1c9dd7; background:rgba(28, 157, 215, 1); text-decoration:none; color:#fff; color:rgba(255, 255, 255, 1); }
nav#cascadable strong { text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7); letter-spacing:1px; font-size:10px; text-transform:uppercase; color:#1c9dd7; color:rgba(28, 157, 215, 1); margin-top:8px; }
div#elements { float:none; margin:50px 0 20px 150px !important; }
aside#welcome { margin:20px 0 80px 10px; font:100 20px/30px "Helvetica Neue", Helvetica, sans-serif !important; color:#434e53; color:rgba(67, 78, 83, 1); }
aside#welcome h2 { font-size:30px; }
aside#welcome h1 { font-size:50px; width:960px; margin:12px 0 0 -3px; color:#1c9dd7; color:rgba(28, 157, 215, 1); }
aside#welcome h1 span { color:rgba(28, 157, 215, 0.5); }
aside#welcome p { margin:30px 0 0 2px; letter-spacing:2px; }
h3.demo-heading, h4.demo-heading { font:200 13px "Helvetica Neue", sans-serif !important; color:#434e53; color:rgba(67, 78, 83, 0.5); letter-spacing:1px; text-transform:uppercase; margin:20px 0; }
h4.demo-heading { font-size:11px !important; margin:10px 0; }
div.demo-grid
{ float:left; background:#eee; background:rgba(238, 238, 238, 1); border-radius:4px; -ms-border-radius:4px; border:solid 1px #ddd; border-color:rgba(221, 221, 221, 0.7); margin:10px; padding:10px; text-align:center; }
div.demo-grid span { color:#434e53; color:rgba(67, 78, 83, 1); }
div.demo-grid em { font-size:13px; }
div.demo-grid-a { width:898px; }
div.demo-grid-b { width:680px; }
div.demo-grid-c { width:428px; }
div.demo-grid-d { width:271px; }
div.demo-grid-e { width:176px; }
div.demo-grid-f { width:146px; }
aside.demo-container { background:#fff; background:rgba(255, 255, 255, 1); border:solid 1px #ccc; margin:10px; border-radius:4px; -ms-border-radius:4px; float:left; }
aside.demo-container hgroup { overflow:hidden; background:#e0e0e0; background:rgba(238, 238, 238, 0.7); border-bottom:solid 1px #ccc; }
aside.demo-container hgroup h4, aside.demo-container hgroup h5 { float:left; margin:8px 12px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); }
aside.demo-container button.cui-container-toggle { width:24px; height:24px; font-size:16px; float:right; text-align:center; padding:0 0 2px 0; margin:8px; -webkit-padding-after:0; }
aside.demo-container section.cui, aside.demo-container section.cui p.cui { margin:6px; }
aside.demo-container.demo-container-b { width:696px; }
aside.demo-container.demo-container-d { width:291px; }
aside.demo-container.demo-container-e { width:200px; }