AudienceView Connect
AudienceView Documentation

AudienceView Mobile - branding-styles.css

The following is the AudienceView Mobile - branding-styles.css style sheet that should be used to make changes to Online branding. Once you have made your changes, upload the branding-styles.css file to the desired site using the Content Management application Site|Branding page. For more information, refer to Branding a Site.

This file can be found in your welcome package. A AudienceView Mobile 6.3 - branding_checklist.xls file can also be found within your welcome package. This file can be used to request specific changes from your AudienceView project team. The Default AudienceView Mobile Branding portion of this guide provides more detail on specific portions of the AudienceView Mobile - branding-styles.css.

Warning
If you want to remove a particular branding option, you must explicitly set the option to none, 0px or 0em appropriately. If you simply remove the line that you no longer want to use, the style setting in the AudienceView Mobile global.css file will override the removed option.

The AudienceView Mobile .CSS uses the em unit, which will automatically adapt to the font of the reader/mobile device that is being used. If 1em is used in the .CSS, the font size will match that of the reader/mobile device being used. If 2em is used, the font size will be double that of the reader/mobile device.

For information about CSS, refer to http://www.w3schools.com/css/default.asp.

AudienceView Mobile - branding-styles.css
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://www.myaudienceviewsite.com/ArticleMedia/Files/site_branding/branded-styles.css
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://www.colorzilla.com/gradient-editor/
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	}