1 /****************************************************************************************************
2
3 assumes that this file is in a directory called "site_branding" directory in ArticleMedia
4 * for example: https:5 * relative path for reaching the Images directory in ArticleMedia:
6 ** url(../../Images/)
7 * relative path to branding folder:
8 ** url(../../../FB/branding/)
9
10 ****************************************************************************************************/
11
12 /* =Basic HTML Styles
13 -------------------------------------------------------------- */
14
15 body {
16 background: #fff;
17 color: #3F3F3F;
18 font-family: Arial, Helvetica, sans-serif;
19 font-size: 14px;
20 }
21 a:link,
22 a:visited,
23 a:hover,
24 a:active {
25 color: #DD3C10;
26 }
27 h1 {
28 font-size: 22px;
29 font-weight: normal;
30 }
31 h2 {
32 font-size: 18px;
33 font-weight: normal;
34 }
35 h3 {
36 font-weight: bold;
37 }
38 input[type="submit"],
39 input[type="button"] {
40 background: #cfcfcf;
41 border-color: #a6a6a6;
42 border-style: solid;
43 border-width: 1px;
44 color: #454545;
45 font-size: 11px;
46 }
47 .required {
48 color: #DD3C10;
49 font-weight: bold;
50 }
51
52 /* =containers Styles
53 -------------------------------------------------------------- */
54 .secondary-brand {
55 background: url(images/logo_audienceview.png);
56 }
57 /********** IE7 hacks to position brand logos *************/
58 #content {
59 background-color: #fff;
60 }
61 .bodyDetails {
62 background-color: #fcfcfc;
63 border: 1px solid #D8DFEA;
64 }
65
66
67 /* =order timeout Styles
68 -------------------------------------------------------------- */
69
70 .orderInfo {
71 border-top: 5px solid #DD3C10;
72 }
73 .orderInfo p {
74 background: #DD3C10;
75 border-radius: 0 0 5px 5px;
76 box-shadow: 0 1px 1px rgba(0,0,0,0.5);
77 color: #fff;
78 }
79 .orderInfo p .offer-timeout {
80 font-weight: bold;
81 }
82
83
84 /* =datatable Styles
85 -------------------------------------------------------------- */
86
87 .dataTable {
88 border-bottom: 2px groove #fff;
89 }
90 .dataTable td a {
91 color: #2c77b8;
92 }
93 tr.odd td,
94 tr.even td {
95 background: #E7EBF2;
96 border-top: 2px groove #fff;
97 }
98
99 /* =landing page Styles
100 -------------------------------------------------------------- */
101
102 #search_results table {
103 border-right: 1px solid #ccc;
104 border-bottom: 2px groove #fff;
105 border-left: 1px solid #ccc;
106 }
107 #search_results table tr td.event-image img {
108 display: inline-block;
109 width: 55px;
110 height: 55px;
111 }
112 .performance-link input[type="button"] {
113 font-size: 14px;
114 }
115 .performance-link span.unavailable-message,
116 .performance-link span.sold-out-message {
117 background: #b6c4dd;
118 border-width: 1px;
119 border-color: #d4d7dc #d4d7dc #c1c4c8 #d4d7dc;
120 border-style: solid;
121 border-radius: 3px;
122 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75);
123 color: #0c0c0c;
124 font-size: 14px;
125 font-weight: bold;
126 text-shadow: 0 1px 0 #fff;
127 }
128 .performance-link.unavailable .next-on-sale {
129 font-size: 11px;
130 font-style: italic;
131 }
132
133 /* =Pagination
134 -------------------------------------------------------------- */
135
136 #search_results table.pagination {
137 background: #E7EBF2;
138 }
139
140 /* =event details
141 -------------------------------------------------------------- */
142
143 .selected-event-info td {
144 background: #E7EBF2;
145 border: solid #ccc;
146 border-width: 1px;
147 }
148 .event-details .event-name,
149 #event-details .event-name {
150 font-size: 18px;
151 font-weight: bold;
152 text-shadow: 0 1px 0 #fff;
153 }
154
155 /* =Event Details on viewOrder.asp
156 -------------------------------------------------------------- */
157 #viewOrder .event-logo {
158 width: 50px;
159 height: 50px;
160 }
161 #viewOrder #event-details ul {
162 font-size: 12px;
163 }
164 #viewOrder #event-details .event-name {
165 font-size: 16px;
166 }
167
168 /* =Event Facepile
169 -------------------------------------------------------------- */
170
171 #rsvp-actions a.rsvp-confirm {
172 background-image: url(check.png);
173 background-color: #697DA8;
174 }
175 #facebook-event-block h2 {
176 font-size: 14px;
177 }
178 #facebook-event-block h2 span {
179 font-style: italic;
180 }
181
182 /* =Seat Select pop-ups
183 -------------------------------------------------------------- */
184
185 #offerInfoPopUp {
186 background: #fff;
187 border: 2px solid #29447E;
188 }
189 #offerInfoPopUp .pop-up-header {
190 background: #627AAD;
191 color: #fff;
192 }
193 #offerInfoPopUp ul li {
194 background-image: url(list-circle.png);
195 color: #000;
196 }
197 #offerInfoPopUp h1 {
198 margin: 0 0 30px;
199 }
200
201 /* =Seat Select page Styles
202 -------------------------------------------------------------- */
203
204 .seat-quantity #select-admissions,
205 .seat-quantity #select-reservations {
206 background: #E7EBF2;
207 border: 1px solid #ccc;
208 }
209 .seat-quantity h2 {
210 background: #29447E;
211 color: #fff;
212 font-weight: bold;
213 text-shadow: 0 -1px 0 #000;
214 }
215
216 /* =reservations CTA
217 -------------------------------------------------------------- */
218
219 .reservations table,
220 .seat-quantity table {
221 background: #fff;
222 border: solid #ccc;
223 border-width: 1px 1px 0;
224 }
225 .reservations table td,
226 .seat-quantity table td {
227 border: groove #ccc;
228 border-width: 0 0 1px;
229 }
230
231 /* =create account/billing page Styles
232 -------------------------------------------------------------- */
233
234 #customer-details {
235 background: #E7EBF2;
236 border: 1px solid #ccc;
237 }
238 #customer-details h2 {
239 color: #234c78;
240 font-weight: bold;
241 }
242 #payment input[type="text"],
243 #payment select,
244 #payment textarea {
245 border: 1px solid #ccc;
246 background: #fff;
247 }
248 #payment input[type="text"]:focus,
249 #payment select:focus,
250 #payment textarea:focus {
251 outline: 2px solid #1D4088;
252 }
253 .order-block h2 {
254 background: #ccc;
255 font-weight: bold;
256 text-shadow: 0 1px 0 #fff;
257 }
258 .order-block h2 span {
259 font-size: 13px;
260 font-style: italic;
261 font-weight: normal;
262 }
263 #order-questions p,
264 #order-additional-info p {
265 border-bottom: 2px groove #fff;
266 }
267 #delivery-method-select table {
268 border-bottom: 2px groove #fff;
269 }
270 #delivery-method-select td.method-description {
271 font-size: 11px;
272 }
273 #delivery-method-select td.method-description label {
274 font-size: 14px;
275 font-weight: bold;
276 }
277 .paymentBox ul li label {
278 font-weight: bold;
279 }
280 #payment .paymentBox ul li select {
281 background: #fff;
282 border: 1px solid #ccc;
283 }
284 #payment .paymentBox ul li input {
285 border: 1px solid #ccc;
286 }
287 .paymentBox ul li a {
288 font-size: 11px;
289 }
290 .order-summary table tr.reservations-total td,
291 #purchase-summary table tr.order-offers td {
292 font-weight: bold;
293 color: #DD3C10;
294 }
295 tr.grand-total td,
296 .order-summary table tr.grand-total td,
297 #purchase-summary table tr.grand-total td {
298 background: #98bde5;
299 border-bottom: 2px groove #fff;
300 font-size: 15px;
301 font-weight: bold;
302 }
303 #orderInstructions {
304 font-size: 11px;
305 }
306
307 /* =order summary page Styles
308 -------------------------------------------------------------- */
309 .order-summary table tr.grand-total td,
310 .order-summary {
311 font-size: 12px;
312 }
313 .order-summary h2 {
314 font-size: 15px;
315 }
316 .order-summary table tr.payment-total td {
317 background: #f0bcae;
318 border-top: 2px groove #ccc;
319 font-weight: bold;
320 }
321 #sharing-calls-to-action p {
322 font-size: 12px;
323 }
324 #sharing-calls-to-action a.share-button {
325 background-color: #29447E;
326 color: #fff;
327 }
328 #sharing-calls-to-action a.share-button#appReqBtn {
329 background-image: url(invite.png);
330 }
331 #sharing-calls-to-action a.share-button#publishBtn {
332 background-image: url(share.png);
333 }
334 #download-tickets table td {
335 background: #FFE8C6;
336 border: 1px solid #F47320;
337 color: #000;
338 font-size: 12px;
339 }
340 #download-tickets table td ul li.already-downloaded {
341 color: #F47320
342 font-weight: bold;
343 }
344
345 /* =Navigation-box
346 -------------------------------------------------------------- */
347
348
349 .navigation-box a {
350 color: #3f3f3f;
351 }
352
353
354 /* =Widget
355 -------------------------------------------------------------- */
356
357 .widget {
358 background: #eaeaea;
359 border: 1px outset #d3d3d3;
360 border-radius: 6px;
361 }
362 .black_overlay {
363 background-color: #fff;
364 }
365
366
367 /* = pop-up window styles
368 -------------------------------------------------------------- */
369
370 body#popup {
371 background: #fff;
372 }
373 #popupDiv {
374 background: #f2f2f2;
375 border-color: rgb(82, 82, 82);
376 border-width: 10px;
377 border-style: solid;
378 border-radius: 8px;
379 }
380 #popupDiv #popupDiv_title {
381 background: #627AAD;
382 color: #fff;
383 font-weight: bold;
384 }
385 #popupDiv .header {
386 font-weight: bold;
387 }
388 .popupDiv_giftCard {
389 background: #fff;
390 }
391 #popupDiv_alertContainer span {
392 font-weight: bold;
393 }
394 #popupDiv_confirmDiv,
395 #popupDiv_timeoutDiv,
396 #popupDiv_successDiv,
397 #popupDiv_errorDiv {
398 background: #fff;
399 border-bottom: 1px solid #E2E2E2;
400 }
401 #popupDiv_errorDiv #alertMessage {
402 color: #3B5998;
403 font-weight: bold;
404 }
405 #popupDiv_buttonContainer input {
406 background: #6079ab;
407 border-color: #29447E #29447E #1A356E;
408 color: #fff;
409 }
410 #popupBody {
411 background: #fff;
412 }
413 #loadArticle {
414 background: #fff;
415 }
416
417 /* = misc styles
418 -------------------------------------------------------------- */
419 .performance-link input[type="button"],
420 #offerInfoPopUp a,
421 #rsvp-actions a,
422 input[type="button"].new-order-btn,
423 .navigation-box .next-btn {
424 background: #29447E;
425 border-width: 1px;
426 border-color: #5B74A8 #1A356E #1c2f55 #536997;
427 border-style: solid;
428 border-radius: 3px;
429 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
430 color: #fff;
431 font-weight: bold;
432 text-shadow: 0 -1px 0 #000;
433 text-decoration: none;
434 text-align: center;
435 }
436 .media-container {
437 border: solid #e9e9e9;
438 border-width: 1px 0;
439 }
440 .label {
441 font-weight: bold;
442 }
443
444 /* = attention block
445 -------------------------------------------------------------- */
446
447 .attention {
448 background: #FFE8C6;
449 border: 1px solid #F47320;
450 color: #3F3F3F;
451 font-weight: bold;
452 }
453 #default.bodyDetails .attention h1,
454 .attention h1 {
455 color: #3F3F3F;
456 }
457
458 /* = search bar
459 -------------------------------------------------------------- */
460
461 /* search wrapper */
462 #search {
463 border-bottom: 1px solid #d8dfea;
464 }
465
466 /* search navigation */
467 #search #search-nav li {
468 float: right;
469 }
470 #search #search-nav li a {
471 display: block;
472 background: #fff;
473 font: bold 11px/12px arial, sans-serif;
474 text-decoration: none;
475 color: #b5b5b5;
476 border-radius: 10px 10px 0px 0px;
477 }
478 #search #search-nav li a.selected {
479 background: #edeff4;
480 color: #3f3f3f;
481 }
482
483
484 /* from elements*/
485 #search span.searchBoxLabel {
486 font-weight: bold;
487 }
488 #search input[type='text'] {
489 border: 1px solid #bcbcbc;
490 background: #fff;
491 }
492 #searchDates img {
493 background: url(buttons.png) 0 -60px no-repeat;
494 }