1 /****************************************************************************************************
2
3 The following is an abreviated verison of the core mobile stylesheet that is used in the AudienceView Mobile online UI.
4
5 assumes that this file is in a directory called "site_branding" directory in ArticleMedia
6 * for example: https:7 * relative path for reaching the Images directory in ArticleMedia :
8 ** url(../../Images/)
9 * relative path to branding folder :
10 ** url(../../../Online/mobile/branding/)
11
12 ****************************************************************************************************/
13
14 /* = Basic HTML styles
15 -------------------------------------------------------------- */
16
17 body {
18 background: #dedfe3; /* Old browsers */
19 color: #3f3f3f;
20 font-family: arial, helvetica, sans-serif;
21 font-size: .8em;
22 }
23 a:link,
24 a:visited,
25 a:hover,
26 a:active {
27 color: #000;
28 }
29 h1 {
30 font-size: 1.5em;
31 text-shadow: 0 1px 0 #fff;
32 }
33 h2 {
34 font-size: 1.3em;
35 text-shadow: 0 1px 0 #fff;
36 }
37 h3 {
38 font-size: 1.2em;
39 text-shadow: 0 1px 0 #fff;
40 }
41 h4 {
42 font-size: 1.1em;
43 text-shadow: 0 1px 0 #fff;
44 }
45 p {
46 margin: 2% 0;
47 }
48 th {
49 text-align: left;
50 }
51 input[type="password"],
52 input[type="select"],
53 input[type="text"],
54 select,
55 option,
56 textarea,
57 .comboBoxWrapper {
58 border: 2px groove #DFE0E4;
59 }
60 .dataTable td a.link,
61 td.standard a,
62 td.performance-link a,
63 .performance-options a,
64 .large-button,
65 .medium-button,
66 .small-button,
67 input[type="submit"],
68 input[type="button"] {
69 border: 2px groove #dfe0e4;
70 }
71 .performance-options a,
72 a.large-button,
73 a.medium-button,
74 a.small-button {
75 color: #000;
76 }
77 hr {
78 background: #000;
79 border-bottom: 1px solid #ababab;
80 }
81 .required {
82 color: #2C76B7;
83 font-size: 1.75em;
84 font-weight: bold;
85 }
86 .row-click-indicator {
87 background: url(../../../Online/mobile/branding/icons/click-row-indicator.png) 0 0 no-repeat transparent;
88 }
89 /* =Page Regions
90 -------------------------------------------------------------- */
91
92 #order-info {
93 color: #bf0a0a;
94 font-weight: bold;
95 padding: 2% 2% 7%;
96 text-align: center;
97 }
98
99 /* =page header
100 -------------------------------------------------------------- */
101
102 #page-header {
103 color: #fff;
104 text-shadow: 0 1px 0 #000;
105 }
106 #page-header ul li#search-button a span {
107 background: url(../../../Online/mobile/branding/icons/search-icon.png) center top no-repeat;
108 }
109 #page-header ul li#help-button a span {
110 background: url(../../../Online/mobile/branding/icons/help-icon.png) center top no-repeat;
111 }
112
113 /*= static menu
114 ***************************************/
115
116 #static-menu table td {
117 border-left: 1px solid #090909;
118 border-right: 1px solid #0f0f0f;
119 }
120 #static-menu table td:first-child {
121 border-left: 0;
122 }
123 #static-menu table td a {
124 color: #afafaf;
125 text-shadow: 0 -1px 0 #000;
126 }
127 a#home-button span {
128 background: url(../../../Online/mobile/branding/icons/home-button.png) top center no-repeat;
129 }
130 td.active a#home-button span {
131 background: url(../../../Online/mobile/branding/icons/home-button-active.png) top center no-repeat;
132 color: #4ea4c9;
133 }
134 td.active a#shoppingCart-button span {
135 background: url(../../../Online/mobile/branding/icons/cart-button-active.png) top center no-repeat;
136 color: #4ea4c9;
137 }
138 a#shoppingCart-button span {
139 background: url(../../../Online/mobile/branding/icons/cart-button.png) top center no-repeat;
140 }
141 a#settings-button span {
142 background: url(../../../Online/mobile/branding/icons/myaccount-button.png) top center no-repeat;
143 }
144 td.active a#settings-button span {
145 background: url(../../../Online/mobile/branding/icons/myaccount-button-active.png) top center no-repeat;
146 color: #4ea4c9;
147 }
148 a#promo-button span {
149 background: url(../../../Online/mobile/branding/icons/promo-button.png) top center no-repeat;
150 }
151 td.active a#promo-button span {
152 background: url(../../../Online/mobile/branding/icons/promo-button-active.png) top center no-repeat;
153 color: #4ea4c9;
154 }
155 a#exit-button span {
156 background: url(../../../Online/mobile/branding/icons/exit-button.png) top center no-repeat;
157 }
158 #static-menu table td span.menu-indicator {
159 border: 1px solid #fff;
160 color: #fff;
161 font-size: .75em;
162 font-weight: bold;
163 text-shadow: 0 -1px 0 #000;
164 }
165
166 /* =Search
167 -------------------------------------------------------------- */
168 #searchBox {
169 margin: 2%;
170 }
171 #searchBox ul {
172 border-color: #dbdbdb;
173 border-style: groove ridge ridge;
174 border-width: 2px;
175 }
176 #searchBox ul li.searchBoxLabel {
177 font-size: 1.25em;
178 font-weight: bold;
179 text-shadow: 0 1px 0 #fff;
180 }
181
182 /* =Search Results
183 -------------------------------------------------------------- */
184
185 #searchFilters h3 {
186 background: #3F3F3F;
187 color: #fff;
188 text-shadow: 0 -1px 0 #000;
189 }
190 #searchFilters .objectTypeFilterList,
191 #searchFilters .monthFilterList,
192 #searchFilters .cityFilterList,
193 #searchFilters .venueFilterList {
194 border-bottom: 2px groove #f0f0f0;
195 }
196 #searchFilters .objectTypeFilterList li a,
197 #searchFilters .monthFilterList li a,
198 #searchFilters .cityFilterList li a,
199 #searchFilters .venueFilterList li a {
200 border-top: 2px groove #f0f0f0;
201 font-weight: bold;
202 text-shadow: 0 1px 0 #fff;
203 }
204 #searchFilters .objectTypeFilterList li.clear-filter a,
205 #searchFilters .monthFilterList li.clear-filter a,
206 #searchFilters .cityFilterList li.clear-filter a,
207 #searchFilters .venueFilterList li.clear-filter a {
208 background: silver;
209 font-size: 0.8em;
210 }
211 #searchFilters ul li select {
212 font-size: .8em;
213 }
214 .objectTypeFilterList-dropdown .clear-filter a,
215 .monthFilterList-dropdown .clear-filter a,
216 .cityFilterList-dropdown .clear-filter a,
217 .venueFilterList-dropdown .clear-filter a {
218 border: 2px groove #f0f0f0;
219 border-radius: 0.5em;
220 display: inline-block;
221 font-size: 0.8em;
222 font-weight: bold;
223 margin: 0.25em 0;
224 padding: .75em;
225 text-decoration: none;
226 text-shadow: 0 1px 0 #fff;
227 }
228 .search-results {
229 display: block;
230 margin: 5% 0;
231 font-size: 80%;
232 }
233 .pagination {
234 margin: 2%;
235 width: 96%;
236 }
237 .pagination td {
238 vertical-align: middle;
239 text-align: center;
240 width: 33%;
241 white-space: nowrap;
242 }
243 .pagination td#av_paging_links a,
244 .pagination td#av_prev_link a,
245 .pagination td#av_next_link a {
246 border: 2px groove #dfe0e4;
247 border-radius: .5em;
248 display: block;
249 font-weight: bold;
250 text-shadow: 0 1px 0 #fff;
251 }
252 .pagination td#av_paging_links span.current {
253 border: 2px groove #686D74;
254 color: #fff;
255 font-weight: bold;
256 text-shadow: 0 1px 0 #fff;
257 }
258 .pagination td.pages ul li a {
259 border: 1px solid #ccc;
260 border-radius: 0.3em;
261 box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .25);
262 padding: 0.5em;
263 }
264 .pagination td.pages ul li.current-page span {
265 background: #f1f1f1;
266 border: 1px solid #ccc;
267 box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
268 }
269
270 /* =Search Results Table - standard format/extra info
271 -------------------------------------------------------------- */
272 .dataTable {
273 border: groove #f0f0f0;
274 border-width: 2px 0 0;
275 }
276 .dataTable th {
277 color: #fff;
278 text-shadow: 0 -1px 0 #000;
279 }
280 .dataTable td {
281 border-bottom: 1px solid #c3c3c3;
282 }
283 tr.even td.active-code,
284 tr.odd td.active-code,
285 tr.even td.performance-description,
286 tr.odd td.performance-description {
287 color: #000;
288 font-weight: bold;
289 text-shadow: 0 1px 0 #fff;
290 }
291 td.standard a,
292 td.performance-link a {
293 border: 2px groove #979ca3;
294 border-radius: .5em;
295 font-weight: bold;
296 text-shadow: 0 1px 0 white;
297 }
298 .dataTable td.performance-info ul li.performance-title {
299 font-weight: bold;
300 }
301
302 /*= availability legend
303 -------------------------------------------------------------- */
304
305 #availability-legend {
306 border: 2px groove #f0f0f0;
307 border-radius: .5em;
308 }
309 #body-articles #availability-legend h3 {
310 color: #fff;
311 text-shadow: 0 -1px 0 #000;
312 }
313 #availability-legend ul li {
314 font-weight: bold;
315 text-shadow: 0 1px 0 #fff;
316 }
317
318 /*= seat select/Result
319 -------------------------------------------------------------- */
320
321 .performance-details .performance-title {
322 font-weight: bold;
323 }
324 .dataTable .item-amount {
325 font-weight: bold;
326 }
327 .dataTable tfoot td {
328 border-top: 2px groove #f0f0f0;
329 border-bottom: 2px groove #f0f0f0;
330 font-weight: bold;
331 text-shadow: 0 1px 0 #fff;
332 }
333 .dataTable#order-totals tr.grand-total td {
334 font-weight: bold;
335 }
336 #tblSeatQuantity {
337 border-top: 2px groove #f0f0f0;
338 }
339 #tblSeatQuantity td {
340 border-bottom: 2px groove #f0f0f0;
341 }
342 #tblSeatQuantity td.type-label {
343 font-weight: bold;
344 text-shadow: 0 1px 0 #fff;
345 }
346 #price-zone-tabs li {
347 background: #DEDFE3;
348 border-color: #f0f0f0;
349 border-style: groove ridge groove groove;
350 border-width: 2px 2px 0;
351 }
352 #price-zone-tabs li.unselected {
353 background: #c4c5c7;
354 border-style: ridge groove ridge ridge;
355 box-shadow: inset 0 0 3px #c4c5c7;
356 }
357 #tblSeatPriceZone .price-zone-color span {
358 border: 2px #f0f0f0;
359 border-style: groove;
360 }
361 #venue-image {
362 border: 1px solid #63686F;
363 }
364 #venue-image .venue-name {
365 color: #fff;
366 font-weight: bold;
367 text-shadow: 0 -1px 0 #000;
368 }
369 #seatsOnOrderBox {
370 background: #fff;
371 border: 2px groove #f0f0f0;
372 }
373
374 /*= shopping cart
375 -------------------------------------------------------------- */
376
377 #shoppingCart .dataTable thead th,
378 #shoppingCart .dataTable tbody td {
379 font-size: .8em;
380 }
381 #shoppingCart .dataTable tfoot td {
382 font-size: .9em;
383 }
384 .totals-table td {
385 font-weight: bold;
386 text-shadow: 0 1px 0 #fff;
387 }
388 .totals-table tr.grand-total td {
389 font-size: 1.15em;
390 }
391 .totals-table tr#recalculateBox td {
392 border-top: 2px groove #f0f0f0;
393 font-weight: normal;
394 }
395 .totals-table tr#recalculateBox td input {
396 font-size: .75em;
397 }
398 .totals-table td.navNote {
399 font-size: .75em;
400 }
401 #shoppingCart.bodyDetails .navigationBox {
402 border-bottom: 2px groove #f0f0f0;
403 }
404 #showSeats.bodyDetails .navigationBox {
405 margin: 0;
406 padding: 0;
407 width: 100%;
408 }
409 .seat-info {
410 border-bottom: 2px groove #f0f0f0;
411 }
412 .seat-info li {
413 border-top: 2px groove #f0f0f0;
414 color: #000;
415 font-weight: bold;
416 text-shadow: 0 1px 0 #fff;
417 }
418
419 /*= login
420 -------------------------------------------------------------- */
421
422 .accountBox label {
423 font-weight: bold;
424 font-size: 1.15em;
425 text-shadow: 0 1px 0 #fff;
426 }
427 #login-box ul li .medium-button {
428 font-size: 1em;
429 }
430 .accountBox .large-button {
431 font-size: 1.15em;
432 }
433 #create-account-with-option {
434 border-top: 2px groove #f0f0f0;
435 }
436 #forgot-username {
437 border-top: 2px groove #f0f0f0;
438 }
439
440 /* = create account
441 -------------------------------------------------------------- */
442
443 #createAccount.bodyDetails {
444 padding: 2% 2%;
445 }
446 #createAccount.bodyDetails form ul {
447 border-top: 2px groove #f0f0f0;
448 }
449 #createAccount.bodyDetails form ul li label {
450 font-weight: bold;
451 font-size: 1em;
452 text-shadow: 0 1px 0 #fff;
453 }
454 ul.account-name,
455 ul.account-address {
456 border-top: 2px groove #f0f0f0;
457 }
458
459 /* = my account
460 -------------------------------------------------------------- */
461
462 .account-menu li a {
463 border-top: 1px solid #ccc;
464 display: block;
465 padding: 1em;
466 text-decoration: none;
467 }
468 #successIcon {
469 background: url(../../../Online/mobile/branding/icons/success.png) 0 0 no-repeat transparent;
470 }
471 #errorIcon {
472 background: url(../../../Online/mobile/branding/icons/error.png) 0 0 no-repeat transparent;
473 }
474 #errorMessage,
475 #successMessage {
476 font-weight: bold;
477 }
478 ul.forward-ticket {
479 border-top: 2px groove #f0f0f0;
480 }
481 ul.forward-ticket li label {
482 font-weight: bold;
483 font-size: 1.1em;
484 text-shadow: 0 1px 0 #fff;
485 }
486 #accountInformation-contacts.bodyDetails .dataTable tfoot td input,
487 #accountInformation-address.bodyDetails .dataTable tfoot td input {
488 font-size: .75em;
489 border: 2px groove #f0f0f0;
490 }
491 #accountInformation.bodyDetails ul,
492 #maintainContacts.bodyDetails ul {
493 border-top: 2px groove #F0F0F0;
494 }
495 #maintainAddresses.bodyDetails ul {
496 border-top: 2px groove #F0F0F0;
497 }
498
499 /* = change password/payment methods maintainContacts
500 -------------------------------------------------------------- */
501
502 #maintainContacts.bodyDetails ul li label,
503 #maintainAddresses.bodyDetails ul li label,
504 #accountSavedPayment.bodyDetails ul li label,
505 #changePassword.bodyDetails ul li label {
506 font-size: 1em;
507 font-weight: bold;
508 text-shadow: 0 1px 0 #fff;
509 }
510
511 /* = attention
512 -------------------------------------------------------------- */
513
514 .attention {
515 border: 1px solid #d50a1a;
516 font-weight: bold;
517 color: #fff;
518 text-shadow: 0 -1px 0 #000;
519 }
520 .attention h1,
521 .attention h2 {
522 text-shadow: 0 -1px 0 #000;
523 }
524 #promocode .attention {
525 margin: 10% 0;
526 }
527 .attention a {
528 color: #fff;
529 }
530
531 /* = Order Details
532 -------------------------------------------------------------- */
533
534 .order-questions,
535 .giftcard-paymentBox,
536 .paymentBox ul {
537 background: #ddd;
538 border-color: #dbdbdb;
539 border-style: groove ridge ridge;
540 border-width: 2px 2px 0;
541 font-weight: bold;
542 text-shadow: 0 1px 0 #fff;
543 }
544 .used-cards {
545 background: #ececec;
546 font-weight: bold;
547 }
548 .used-cards span {
549 font-weight: normal;
550 }
551 .used-cards input {
552 font-size: 0.75em;
553 }
554 .giftcard-paymentBox li .medium-button {
555 font-size: .75em;
556 }
557 .order-totals {
558 border-color: #dbdbdb;
559 border-style: groove ridge ridge;
560 border-width: 1px 2px 2px;
561 }
562 .order-totals td {
563 font-size: 1em;
564 font-weight: bold;
565 text-shadow: 0 1px 0 #fff;
566 }
567 .order-totals tr.grand-total td {
568 font-size: 1.25em;
569 }
570
571 /* = delivery methods
572 -------------------------------------------------------------- */
573
574 #loginDelivery.bodyDetails ul.order-contact-summary,
575 #loginDelivery.bodyDetails ul.order-address-summary {
576 border-top: 2px groove #f0f0f0;
577 }
578 #loginDelivery.bodyDetails ul li.edit-button input {
579 font-size: 0.75em;
580 }
581 #loginDelivery.bodyDetails ul li.selection-heading {
582 font-weight: bold;
583 }
584 #loginDelivery.bodyDetails ul li.selection-heading label {
585 font-size: 1.15em;
586 }
587 .displayTable {
588 border-bottom: 1px solid #ababab;
589 }
590
591 /* = view order
592 -------------------------------------------------------------- */
593
594 #viewOrder.bodyDetails {
595 font-size: 1em;
596 }
597 #viewOrder .order-number {
598 border-bottom: 1px solid #ccc;
599 font-size: 1.2em;
600 }
601 .toggle-tickets {
602 border-top: 2px groove #f0f0f0;
603 }
604 #viewOrder .performance-options {
605 border-bottom: 2px groove #f0f0f0;
606 }
607
608 /* = promocodes
609 -------------------------------------------------------------- */
610
611 #promoCodeBox label {
612 font-weight: bold;
613 font-size: 1.15em;
614 }
615 .promoCodeListItem a {
616 border-top: 1px solid #ababab;
617 }
618
619 /* = scrolling top features
620 -------------------------------------------------------------- */
621
622 #leftFeaturesArrow,
623 #rightFeaturesArrow {
624 border: 1px solid #464951;
625 font-weight: bold;
626 font-size: 1.25em;
627 color: #000;
628 }
629
630 /* =Popup Styles
631 -------------------------------------------------------------- */
632
633 body#popup {
634 background: #fff;
635 }
636 #popupDiv {
637 background: #fff;
638 border: 1px solid #174D83;
639 }
640 #popupDiv p {
641 font-weight: bold;
642 }
643 #popupDiv #popupDiv_title {
644 background: #2d3c5d;
645 color: #fff;
646 font-weight: bold;
647 }
648 #popupDiv .header {
649 font-weight: bold;
650 }
651 .popupDiv_giftCard {
652 background: #fff;
653 }
654 .popupDiv_ticketForward {
655 background: #fff;
656 }
657 #popupDiv_alertContainer span {
658 color: #2c76b7;
659 font-weight: bold;
660 }
661 #popupDiv_errorDiv {
662 background: url(../../../Online/mobile/branding/error.gif) 10px 10px no-repeat;
663 }
664 #popupDiv_successDiv {
665 background: url(../../../Online/mobile/branding/success.gif) 10px 10px no-repeat;
666 }
667 #popupDiv_timeoutDiv {
668 background: url(../../../Online/mobile/branding/timeout.gif) 10px 10px no-repeat;
669 }
670 #popupDiv_confirmDiv {
671 background: url(../../../Online/mobile/branding/confirm.gif) 10px 10px no-repeat;
672 }
673 #popupDiv_errorDiv #alertMessage {
674 color: #2c76b7;
675 font-weight: bold;
676 }
677 #popupBody {
678 background: #fff;
679 }
680
681 /* =Calendar Widget
682 -------------------------------------------------------------- */
683
684 #calendarWidget-body {
685 background: #ECECEB;
686 }
687 #calendarWidget-navigation {
688 background: #2C76B7;
689 }
690 #calendarWidget-navigation td a {
691 font-size: 17px;
692 color: #fff;
693 }
694 #calendarWidgetHeader {
695 border: solid #ececec;
696 }
697 #calendarWidgetHeader td {
698 background: f2f2f2;
699 border: solid #ececec;
700 font-size: 8px;
701 color: #666666;
702 }
703 #calendarWidgetTable {
704 border: solid #ececec;
705 }
706 #calendarWidgetTable td {
707 background: #fff;
708 border: solid #ececec;
709 font-size: 12px;
710 }
711 #calendarWidgetTable .WidgetToday {
712 background: #ececec;
713 }
714 #calendarWidgetTable .WidgetEvent:hover,
715 #calendarWidgetTable .WidgetEvent {
716 background: #2C76B7;
717 color: #fff;
718 font-weight: bold;
719 }
720 #calendarWidgetTable .WidgetSelect {
721 background: #2C76B7;
722 color: #fff;
723 }
724 #calendarWidgetTable .WidgetPast {
725 color: #ccc;
726 }
727
728 /*
729 The AudienceView Mobile UI makes use of CSS gradients that are currently not standardized across mobile or desktop browsers or browser versions. CSS gradient tools can be found online. A good example is the following - http:730
731 ** the following selectors may also appear above where standard CSS properties are defined - border, font-size, color, etc..
732
733 */
734
735
736 /* =CSS Gradients
737 -------------------------------------------------------------- */
738
739 /* =CSS Gradients - standard grey gradient seen on most input buttons throughout mobile UI */
740
741 .dataTable td a.link,
742 td.standard a,
743 td.performance-link a,
744 .performance-options a,
745 .large-button,
746 .medium-button,
747 .small-button,
748 input[type="submit"],
749 input[type="button"],
750 .pagination td#av_paging_links a,
751 .pagination td#av_prev_link a,
752 .pagination td#av_next_link a,
753 #leftFeaturesArrow,
754 #rightFeaturesArrow {
755 background: #f3f3f3; /* Old browsers */
756 background: -moz-linear-gradient(top, #f3f3f3 1%, #d3d4d6 50%, #c0c1c4 50%, #c0c1c4 100%); /* FF3.6+ */
757 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f3f3f3), color-stop(50%,#d3d4d6), color-stop(50%,#c0c1c4), color-stop(100%,#c0c1c4)); /* Chrome,Safari4+ */
758 background: -webkit-linear-gradient(top, #f3f3f3 1%,#d3d4d6 50%,#c0c1c4 50%,#c0c1c4 100%); /* Chrome10+,Safari5.1+ */
759 background: -o-linear-gradient(top, #f3f3f3 1%,#d3d4d6 50%,#c0c1c4 50%,#c0c1c4 100%); /* Opera 11.10+ */
760 background: -ms-linear-gradient(top, #f3f3f3 1%,#d3d4d6 50%,#c0c1c4 50%,#c0c1c4 100%); /* IE10+ */
761 background: linear-gradient(top, #f3f3f3 1%,#d3d4d6 50%,#c0c1c4 50%,#c0c1c4 100%); /* W3C */
762 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#c0c1c4',GradientType=0 ); /* IE6-9 */
763 }
764
765 /* =CSS Gradients - top header and bottom menu, search and help buttons */
766
767 #page-header,
768 #static-menu {
769 background: #2d2d2d; /* Old browsers */
770 background: -moz-linear-gradient(top, #2d2d2d 0%, #161616 50%, #000000 50%, #000000 100%); /* FF3.6+ */
771 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(50%,#161616), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
772 background: -webkit-linear-gradient(top, #2d2d2d 0%,#161616 50%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
773 background: -o-linear-gradient(top, #2d2d2d 0%,#161616 50%,#000000 50%,#000000 100%); /* Opera 11.10+ */
774 background: -ms-linear-gradient(top, #2d2d2d 0%,#161616 50%,#000000 50%,#000000 100%); /* IE10+ */
775 background: linear-gradient(top, #2d2d2d 0%,#161616 50%,#000000 50%,#000000 100%); /* W3C */
776 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
777 }
778 #page-header ul li#help-button a,
779 #page-header ul li#search-button a {
780 background: #4c4c4c; /* Old browsers */
781 background: -moz-linear-gradient(top, #4c4c4c 0%, #393939 50%, #262626 50%, #262626 100%); /* FF3.6+ */
782 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#393939), color-stop(50%,#262626), color-stop(100%,#262626)); /* Chrome,Safari4+ */
783 background: -webkit-linear-gradient(top, #4c4c4c 0%,#393939 50%,#262626 50%,#262626 100%); /* Chrome10+,Safari5.1+ */
784 background: -o-linear-gradient(top, #4c4c4c 0%,#393939 50%,#262626 50%,#262626 100%); /* Opera 11.10+ */
785 background: -ms-linear-gradient(top, #4c4c4c 0%,#393939 50%,#262626 50%,#262626 100%); /* IE10+ */
786 background: linear-gradient(top, #4c4c4c 0%,#393939 50%,#262626 50%,#262626 100%); /* W3C */
787 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
788 border: 1px #4C4C4C;
789 color: #afafaf;
790 }
791
792 /* =CSS Gradients - shopping cart and promocode indicator seen on bottom menu */
793
794 #static-menu table td span.menu-indicator {
795 background: #f5959a; /* Old browsers */
796 background: -moz-linear-gradient(top, #f5959a 0%, #cb0306 100%); /* FF3.6+ */
797 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5959a), color-stop(100%,#cb0306)); /* Chrome,Safari4+ */
798 background: -webkit-linear-gradient(top, #f5959a 0%,#cb0306 100%); /* Chrome10+,Safari5.1+ */
799 background: -o-linear-gradient(top, #f5959a 0%,#cb0306 100%); /* Opera 11.10+ */
800 background: -ms-linear-gradient(top, #f5959a 0%,#cb0306 100%); /* IE10+ */
801 background: linear-gradient(top, #f5959a 0%,#cb0306 100%); /* W3C */
802 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5959a', endColorstr='#cb0306',GradientType=0 ); /* IE6-9 */
803 }
804
805 /* =CSS Gradients - search box background and shopping cart performance totals */
806
807 #searchBox ul,
808 .dataTable tfoot td,
809 .order-totals {
810 background: #DDD;
811 background: -moz-linear-gradient(top, #DDD 0%, #BBB 100%);
812 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DDD), color-stop(100%,#BBB));
813 background: -webkit-linear-gradient(top, #DDD 0%,#BBB 100%);
814 background: -o-linear-gradient(top, #DDD 0%,#BBB 100%);
815 background: -ms-linear-gradient(top, #DDD 0%,#BBB 100%);
816 background: linear-gradient(top, #DDD 0%,#BBB 100%);
817 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCC', endColorstr='#AAA',GradientType=0 );
818 }
819
820 /* =CSS Gradients – pagination buttons and availability legend header */
821
822 .pagination td#av_paging_links span.current,
823 #body-articles #availability-legend h3 {
824 background: #686D74;
825 background: -moz-linear-gradient(top, #686D74 0%, #3A424A 50%, #2C333C 50%, #424851 100%);
826 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#686D74), color-stop(50%,#3A424A), color-stop(50%,#2C333C), color-stop(100%,#424851));
827 background: -webkit-linear-gradient(top, #686D74 0%,#3A424A 50%,#2C333C 50%,#424851 100%);
828 background: -o-linear-gradient(top, #686D74 0%,#3A424A 50%,#2C333C 50%,#424851 100%);
829 background: -ms-linear-gradient(top, #686D74 0%,#3A424A 50%,#2C333C 50%,#424851 100%);
830 background: linear-gradient(top, #686D74 0%,#3A424A 50%,#2C333C 50%,#424851 100%);
831 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686d74', endColorstr='#424851',GradientType=0 );
832 }
833
834 /* =CSS Gradients - table headers and venue map title block */
835 .dataTable th,
836 #venue-image .venue-name {
837 background: #63686F;
838 background: -moz-linear-gradient(top, #63686F 1%, #40464F 100%);
839 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#63686F), color-stop(100%,#40464F));
840 background: -webkit-linear-gradient(top, #63686F 1%,#40464F 100%);
841 background: -o-linear-gradient(top, #63686F 1%,#40464F 100%);
842 background: -ms-linear-gradient(top, #63686F 1%,#40464F 100%);
843 background: linear-gradient(top, #63686F 1%,#40464F 100%);
844 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63686F', endColorstr='#40464F',GradientType=0 );
845 }
846
847 /* =CSS Gradients - search result rows */
848
849 tr.odd td,
850 tr.even td,
851 .search_result_div {
852 background: #ffffff; /* Old browsers */
853 background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f7 100%); /* FF3.6+ */
854 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f7)); /* Chrome,Safari4+ */
855 background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f7 100%); /* Chrome10+,Safari5.1+ */
856 background: -o-linear-gradient(top, #ffffff 0%,#f2f2f7 100%); /* Opera 11.10+ */
857 background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f7 100%); /* IE10+ */
858 background: linear-gradient(top, #ffffff 0%,#f2f2f7 100%); /* W3C */
859 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f7',GradientType=0 ); /* IE6-9 */
860 }
861
862 /* =CSS Gradients - search result table cell that contains promocode indicator and item short description */
863
864 tr.even td.active-code,
865 tr.odd td.active-code,
866 tr.even td.performance-description,
867 tr.odd td.performance-description,
868 #availability-legend {
869 background: #E6E6ED;
870 background: -moz-linear-gradient(top, #E6E6ED 0%, #CFCFD3 100%);
871 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6ED), color-stop(100%,#CFCFD3));
872 background: -webkit-linear-gradient(top, #E6E6ED 0%,#CFCFD3 100%);
873 background: -o-linear-gradient(top, #E6E6ED 0%,#CFCFD3 100%);
874 background: -ms-linear-gradient(top, #E6E6ED 0%,#CFCFD3 100%);
875 background: linear-gradient(top, #E6E6ED 0%,#CFCFD3 100%);
876 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6ed', endColorstr='#cfcfd3',GradientType=0 );
877 }
878
879 /* =CSS Gradients - my account menu items */
880
881 .account-menu li a {
882 background: white;
883 background: -moz-linear-gradient(top, white 0%, #F2F2F7 100%);
884 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#F2F2F7));
885 background: -webkit-linear-gradient(top, white 0%,#F2F2F7 100%);
886 background: -o-linear-gradient(top, white 0%,#F2F2F7 100%);
887 background: -ms-linear-gradient(top, white 0%,#F2F2F7 100%);
888 background: linear-gradient(top, white 0%,#F2F2F7 100%);
889 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f7',GradientType=0 );
890 }
891
892 /* =CSS Gradients - red "attention" block */
893
894 .attention {
895 background: #ef7c85; /* Old browsers */
896 background: -moz-linear-gradient(top, #ef7c85 1%, #c5303c 100%); /* FF3.6+ */
897 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ef7c85), color-stop(100%,#c5303c)); /* Chrome,Safari4+ */
898 background: -webkit-linear-gradient(top, #ef7c85 1%,#c5303c 100%); /* Chrome10+,Safari5.1+ */
899 background: -o-linear-gradient(top, #ef7c85 1%,#c5303c 100%); /* Opera 11.10+ */
900 background: -ms-linear-gradient(top, #ef7c85 1%,#c5303c 100%); /* IE10+ */
901 background: linear-gradient(top, #ef7c85 1%,#c5303c 100%); /* W3C */
902 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef7c85', endColorstr='#c5303c',GradientType=0 ); /* IE6-9 */
903 }