Draft Forbes Group Website (Build by Nikola). The official site is hosted at:

https://labs.wsu.edu/forbes

1
.wireframe .row .column {
2
	min-height: 198px;
3
	xbox-shadow: inset -2px -2px 1px rgba(137,137,137,0.1);
4
	box-shadow: inset 0px 0px 1px rgba(137,137,137,0.6);
5
	}
6
.inset {
7
	box-shadow: inset 0px 0px 1px rgba(137,137,137,0.6);
8
	}
9
	
10
/* GRID */
11

12
/* ------------------- */
13

14
#binder {
15
	position: relative;
16
	}
17
x#cropping {
18
	background-color: #424a4f;
19
	height: 400px;
20
	}
21
	
22
button {
23
	width: auto;
24
	}	
25

26
#grid {
27
	display: none;
28
	}
29
.grid #grid {
30
	position: absolute;
31
	width: 990px;
32
	left: 0;
33
	top: 0;
34
	display: block;
35
	height: 3000px;
36
	z-index: 99999;
37
	background: transparent url('/wp-content/themes/brand/images/pages/wireframe/grid.png') repeat-y left top;
38
	}
39
.grid12 #grid {
40
	background: transparent url('/wp-content/themes/brand/images/pages/wireframe/grid12.png') repeat-y left top;
41
	}
42
	
43
main:not(.wireframe) .wireframe-only {
44
	display: none;
45
	}
46

47
.wireframe section.row::before {
48
	display: block;
49
	background: #5e6a71;
50
	padding: 0px 0px;
51
	text-indent: 5px;
52
	opacity: .5;
53
	position: absolute;
54
	right: 0px;
55
	width: 75px;
56
	z-index: 99;
57
	visibility: visible;
58
	height: auto;
59
	color: white;
60
	font-size: 10px;
61
	}
62
.wireframe .row.eighths::before { content: "eighths"; }
63
.wireframe .row.twelfths::before { content: "twelfths"; }
64
.wireframe .row.quarters::before { content: "quarters"; }
65
.wireframe .row.single::before { content: "single"; }
66
.wireframe .row.halves::before { content: "halves"; }
67
.wireframe .row.side-right::before { content: "side-right"; }
68
.wireframe .row.triptych::before { content: "triptych"; }
69
.wireframe .row.thirds::before { content: "thirds"; }
70
.wireframe .row.margin::before { content: "margin"; }
71

72
	
73
/* Column Numbering */
74
.wireframe .column:not(.note)::after { 
75
	color: rgba(255,255,255,0.5);
76
	background-color: rgba(182,188,191,0.5);
77
	padding: 5px 10px;
78
	position: absolute;
79
	right: 0; bottom: 0;
80
	}
81
.wireframe .row:not(.nest) .column.one::after { content:"1"; }
82
.wireframe .row:not(.nest) .column.two::after { content:"2"; }
83
.wireframe .row:not(.nest) .column.three::after { content:"3"; }
84
.wireframe .row:not(.nest) .column.four::after { content:"4"; }
85
.wireframe .row:not(.nest) .column.five::after { content:"5"; }
86
.wireframe .row:not(.nest) .column.six::after { content:"6"; }
87
.wireframe .row:not(.nest) .column.seven::after { content:"7"; }
88
.wireframe :not(.nest) .column.eight::after { content:"8"; }
89
.wireframe :not(.nest) .column.nine::after { content:"9"; }
90
.wireframe :not(.nest) .column.ten::after { content:"10"; }
91
.wireframe :not(.nest) .column.eleven::after { content:"11"; }
92
.wireframe :not(.nest) .column.twelve::after { content:"12"; }
93

94
.wireframe .row .column.one-twelfth::after { content:"1/12"; }
95
.wireframe .row .column.two-twelfths::after { content:"2/12"; }
96
.wireframe .row .column.three-twelfths::after { content:"3/12"; }
97
.wireframe .row .column.six-twelfths::after { content:"6/12"; }
98

99
/* Column Measurements */
100
.column::before { 
101
	color: black;
102
	padding: 2px 4px;
103
	position: absolute;
104
	opacity: .2;
105
	font-size: 10px;
106
	top: 0;	left: 0;
107
	width: 95%;
108
	margin: 0px auto;
109
	text-align: center;
110
	}
111
.wireframe .single .column::before { content:"\2190 792 \2192"; }
112
.wireframe .side-right .column.one::before { content:"\2190 528 \2192"; }
113
.wireframe .side-right .column.two::before,
114
.wireframe .thirds .column::before { content:"\2190 264 \2192"; }
115
.wireframe .margin .column.one::before { content:"\2190 594 \2192"; }
116
.wireframe .margin .column.two::before,
117
.wireframe .quarters .column::before,
118
.wireframe .triptych .column.one::before,
119
.wireframe .triptych .column.three::before,
120
.wireframe .halves .halves .column::before { content:"\2190 198 \2192"; }
121
.wireframe .halves .column::before,
122
.wireframe .triptych .column.two::before { content:"\2190 396 \2192"; }
123
.wireframe .halves .quarters .column::before { content:"\2190 99 \2192"; }
124
.wireframe .quarters .thirds .column::before { content:"\2190 66 \2192"; }
125
.wireframe .halves .thirds .column::before { content:"\2190 132 \2192"; }
126

127
.wireframe .row .row::after {
128
	display: block;
129
	background: #5e6a71;
130
	padding: 0px 0px;
131
	text-indent: 5px;
132
	opacity: .2;
133
	position: absolute;
134
	text-align: center;
135
	left: 50%;
136
	top: 50%;
137
	bottom: 50%;
138
	margin-top: -10px;
139
	margin-bottom: -10px;
140
	margin-left: -25px;
141
	width: 50px;
142
	height: 20px;
143
	xbottom: 0px;
144
	z-index: 99;
145
	visibility: visible;
146
	height: auto;
147
	color: white;
148
	font-size: 10px;
149
	content:"nested";
150
	}
151
	
152
.side-right .column.two ul {
153
	padding: 0px; margin: 0px;
154
	}
155
.side-right .column.two li {
156
	list-style: none;
157
	padding: 10px 0px;
158
	margin: 0px;
159
	}
160
.side-right .column.two li:last-of-type {
161
	border-bottom: none;
162
	}
163
	
164
.thirds.gutter .column {
165
   background-color: white; 
166
   border: none;
167
   }
168
.thirds.gutter .column article {
169
	padding: 0px;
170
	xborder: 1px #f2f4f5 solid;
171
	background: #f2f4f5;
172
	}
173

174
.gutter article p { opacity: .3em; }
175
	
176
#binder main .note::after {
177
	color: black;
178
	padding: 6px 10px;
179
	position: absolute;
180
	font-size: 12px;
181
	opacity: .8;
182
	top: 5px;
183
	left: 5px;
184
	width: auto;
185
	height: auto;
186
	text-align: left;
187
	display: none;
188
	z-index: 999631;
189
	line-height: 1em;
190
	background: white;
191
	visibility: visible !important;
192
	}
193
#binder main .note:hover::after {
194
	display: block;
195
	}
196
	
197
main section:nth-of-type(even):not(.wireframe-only):not(.hidden) {
198
	background: rgba(0,0,0,0.05)
199
	}
200
section > big {
201
	padding: 100px 100px 10px 100px;
202
	font-size: 2em;
203
	line-height: 1.1em;
204
	display: block;
205
	}
206
#unprecedented .column.one {
207
	padding-top: 100px;
208
	}
209
#unprecedented .column.two {
210
	position: relative;
211
	}
212
button {
213
	padding: 2px 4px;
214
	}
215
.size-lt-small #controls dl:first-of-type {
216
	margin-top: 150px;
217
	}
218

219
#controls dl {
220
	margin-top: 15px;
221
	padding-top: 5px;
222
	}
223
#controls dl ~ dl {
224
	border-top: 1px #D7DAD8 solid;
225
	}
226
#controls dl dt {
227
	display: block;
228
	}
229
dt a:hover {
230
	
231
	}
232
#controls dl dd {
233
	display: block; float: left;
234
	padding: 0px; margin: 0px 0px 2px 0px;
235
	}
236
#controls dl a.info {
237
	float: right;
238
	display: block;
239
	xtext-indent: -9000px;
240
	overflow: hidden;
241
	position: relative;
242
	color: white;
243
	opacity: .3;
244
	}
245
#controls dl a.info::before {
246
	font-family: "Iconography";
247
	content: "\2139";
248
	font-size: 1.4em;
249
	color: #b5babe;
250
	position: absolute;
251
	right: 0;
252
	top: 0;
253
	height: 16px;
254
	width: 30px;
255
	text-align: center;
256
}
257

258
#controls dl a.info:hover::before {
259
    color: #5e6a71;
260
}
261

262
.spine-colors dd {
263
    display: block;
264
    float: left;
265
    padding: 2px 0px;
266
    xwidth: 33%;
267
}
268

269
#spine .spine-wireframe button {
270
    text-indent: 0%;
271
}
272

273
.spine-wireframe button::before {
274
    content: "show ";
275
}
276
.wireframe .spine-wireframe button::before {
277
    content: "hide ";
278
}
279
pre,code {
280
    display: none;
281
}
282
.wireframe pre, .wireframe code {
283
    display: block;
284
}
285
pre {
286
    white-space: normal;
287
}
288
pre code {
289
    font-style: italic;
290
}
291

292

293