AudienceView Connect
AudienceView Documentation

AudienceView Online - branding-styles.css

The following is the AudienceView Online - 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. An  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 Online Branding portion of this guide provides more detail on specific portions of the AudienceView Online - branding-styles.css.

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

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

AudienceView Online - branding-styles.css
1	/****************************************************************************************************
2
3		assumes that this file is in a directory called "site_branding" directory in ArticleMedia
4			* for example: https://www.myaudienceviewsite.com/ArticleMedia/Files/site_branding/branded-styles.css
5			* relative path for reaching the Images directory in ArticleMedia:
6				** url(../../Images/)
7			* relative path to branding folder:
8				** url(../../../Online/branding/)
9
10	****************************************************************************************************/
11
12	/* =Basic HTML Styles
13	-------------------------------------------------------------- */
14
15	body {
16		background-color: transparent;
17		background-image: url(../../../Online/branding/wallpaper.jpg);
18		background-position: inherit;
19		background-repeat: repeat;
20		color: #3f3f3f;
21		font-family: arial, helvetica, sans-serif;
22		font-size: 12px;
23	}
24	a:link,
25	a:visited,
26	a:hover,
27	a:active {
28		color: #3f3f3f;
29	}
30	h1 {
31		color: #F58036;
32		font-size: 16px;
33		font-weight: bold;
34	}
35	h2 {
36		color: #2c76b7;
37		font-size: 13px;
38		font-weight: bold;
39	}
40	h3 {
41		color: #3f3f3f;
42		font-size: 12px;
43		font-weight: bold;
44	}
45	h4 {
46		color: #79B3E3;
47		font-style: italic;
48		font-weight: bold;
49	}
50	hr {
51		background-color: #C8C8C8;
52		border-width: 0;
53		height: 1px;
54	}
55	.required {
56		color: #2C76B7;
57	}
58	.optional {
59		font-weight: normal;
60		font-style: italic;
61	}
62
63	/* =Page Regions
64	-------------------------------------------------------------- */
65
66	#content {
67		background-color: #fff;
68	}
69	#header {
70		background-color: #2e3e5f;
71	}
72	.bodyDetails {
73		background-color: #fff;
74	}
75
76	/* =Order Box
77	-------------------------------------------------------------- */
78
79	#orderInfo {
80		background-color: #002447;
81		border: 1px solid #174d83;
82	}
83	#orderInfoImage {
84		background-color: transparent;
85		background-image: url(../../../Online/branding/ShoppingCart.gif);
86		background-position: inherit;
87		background-repeat: no-repeat;
88		display: none;
89	}
90	#orderInfoSummary {
91		color: #fff;
92	}
93	#orderInfoSummary h2 {
94		color: #fff;
95		font-size: 15px;
96		font-weight: normal;
97	}
98	#orderInfoCartLink {
99		color: #fff;
100	}
101	#orderTimeout {
102		background-color: #f58036;
103	}
104
105
106	/* =Menu
107	-------------------------------------------------------------- */
108	#menu {
109		background-color: #f4f9fc;
110		border-bottom: 1px solid #cee5fb;
111	}
112	.menuTopItem a:link,
113	.menuTopItem a:visited,
114	.menuTopItem a:hover,
115	.menuTopItem a:active {
116		color: #2c77b8;
117		font-size: 12px;
118		font-weight: normal;
119	}
120	.menuTopItem a:hover {
121		background-color: #fff;
122		border: 1px solid #cfe5fa;
123		color: #2C76B7;
124	}
125	.menuTopItem ul {
126		background-color: #f4f9fc;
127	}
128	.menuTopItem li.menuSubItem a:active,
129	.menuTopItem li.menuSubItem a:visited,
130	.menuTopItem li.menuSubItem a:link {
131		border: solid #cfe5fa;
132		border-width: 0 1px 1px;
133		color: #2c77b8;
134		font-size: 12px;
135		font-weight: normal;
136	}
137	.menuTopItem li.menuSubItem a:hover  {
138		background-color: #fff;
139	}
140	#menuTop a.menuHighlight {
141		background-color: #fff;
142		border: 1px solid #cfe5fa;
143		color: #2C76B7;
144	}
145
146	/* =Search Box
147	-------------------------------------------------------------- */
148	#searchBox {
149		background-color: #f4f9fc;
150		border: 1px solid #cee5fb;
151	}
152	.searchBoxLabel {
153		color: #2c76b7;
154		font-weight: bold;
155	}
156
157	/* =Search Filters
158	-------------------------------------------------------------- */
159
160	#searchFilters h3 {
161		color: #2C76B7;
162	}
163	#searchFilters ul li a span {
164		color: #2C76B7;
165	}
166
167	/* =Search results widgets
168	-------------------------------------------------------------- */
169
170	#performance-results-heading {
171		font-size: 16px;
172	}
173	.dataTable thead th,
174	.dataTable h3 {
175		background-color: #fff;
176		font-size: 11px;
177	}
178	.dataTable tbody {
179		border-bottom: 1px solid #D7D7D7;
180	}
181	tr.odd td{
182		background-color: #ededed;
183		border-top: 1px solid #d7d7d7;
184	}
185	tr.even td {
186		border-top: 1px solid #d7d7d7;
187	}
188	#search_results .search_result_div {
189	    border: 1px solid #d7d7d7;
190	}
191	#search_results .search_result_div.even {
192
193	}
194	#search_results .search_result_div.odd {
195		background-color: #ededed;
196	}
197	.performance-info-list .performance-description {
198		font-weight: bold;
199	}
200	#availability-legend {
201		background-color: #ededed;
202		border: solid #d7d7d7;
203		border-width: 0 1px 1px 1px;
204	}
205	#availability-legend h3 {
206		background-color: #d7d7d7;
207		border: solid #d7d7d7;
208		border-width: 1px 0;
209	}
210
211	/* =Seat Select
212	-------------------------------------------------------------- */
213
214	#seatResults .venueImage h2,
215	#seatSelect .venueImage h2 {
216		background-color: gray;
217		color: #fff;
218		font-size: 12px;
219	}
220	#seatTabs {
221		border-bottom: 1px solid #d7d7d7;
222	}
223	.seattab_off {
224		background-color: #ededed;
225		border: solid #d7d7d7;
226		border-width: 1px 1px 0px 1px;
227	}
228	.seattab_on {
229		background-color: #f4f9fc;
230		border: solid #76b2e6;
231		border-width: 1px 1px 0px 1px;
232		color: #2c76b7;
233	}
234	.seatsOnOrderBox {
235		background-color: #fff;
236		border: 1px solid #cee5fb;
237	}
238
239	/* =Performance Information
240	-------------------------------------------------------------- */
241
242	.seriesDescription {
243		font-size: 12px;
244		font-weight: bold;
245	}
246	.performanceDescription {
247
248	}
249	.performanceDate {
250
251	}
252	.moreInformationLink {
253
254	}
255
256	/* =Bundle Pages
257	-------------------------------------------------------------- */
258
259	.bundlesHeader {
260		border-bottom: 1px solid #D7D7D7;
261	}
262	.bundleDescriptions {
263
264	}
265	.miscItem.bundle {
266		border-bottom: 1px solid #D7D7D7;
267	}
268	.bundle-donation {
269		border-bottom: 1px solid #D7D7D7;
270	}
271	.misc-item-quantity.bundles td.options {
272		border-top: 1px solid #ccc;
273	}
274	.misc-item-quantity .quantity,
275	.bundle-donation .quantity {
276		font-weight: bold;
277	}
278	.bundleFlowItem {
279	    background-color: #f4f9fc;
280		border: 1px solid #ffffff;
281		color: #2c77b7;
282		font-weight: bold;
283	}
284	.bundleFlowSelectedItem {
285		background-color: #cee5fb;
286		border: 1px solid #cfe5fa;
287		color: #2c76b7;
288		font-weight: bold;
289	}
290
291
292	/* =Miscellaneous Items
293	-------------------------------------------------------------- */
294
295	#popupLink,
296	#mainImage {
297		border: 1px solid #c8c8c8;
298	}
299	.miscThumbnail img {
300		border: 1px solid #c8c8c8;
301		width: 80px;
302	}
303	.largeImage  {
304		background-color: #fff;
305		border: 1px solid #174D83;
306	}
307	.closeText {
308		background-color: #2D3C5D;
309		border: 1px solid #174D83;
310		font-weight: bold;
311	}
312
313	/* =Promo Codes
314	-------------------------------------------------------------- */
315
316	#promoCodeBox {
317		background-color: #f4f9fc;
318		border: 1px solid #cee5fb;
319		color: #2c76b7;
320	}
321	#lastPromoCodeBox {
322		background-color: #f7fcff;
323		border: 1px solid #cee5fb;
324		color: #2c76b7;
325	}
326	div#promoCodeList-box {
327		background-color: #cee5fb;
328		border: 1px solid #2C77B8;
329		color: #2C76B7;
330	}
331
332	/* =Donations
333	-------------------------------------------------------------- */
334
335	.donation-group td ul li span {
336		font-size: 13px;
337	}
338
339	/* =Gift Cards/Certificates
340	-------------------------------------------------------------- */
341
342	.giftCardGroup label {
343		font-weight: bold;
344	}
345	/* =Shopping Cart
346	-------------------------------------------------------------- */
347
348	#recommendations {
349		border-top: 1px solid #c8c8c8;
350	}
351
352	/* =Order Contact
353	-------------------------------------------------------------- */
354
355	.paymentBox {
356		background-color: #ededed;
357		border: 1px solid #d7d7d7;
358	}
359	.paymentBox p {
360		font-weight: bold;
361	}
362
363	/* =Order Summary
364	-------------------------------------------------------------- */
365
366	.download {
367		background-color: #ffe8c6;
368		border: 1px solid #f47320;
369		color: #000;
370	}
371	div#newOrder {
372		background-color: #ededed;
373		border: 1px solid #d7d7d7;
374	}
375
376	/* =Login
377	-------------------------------------------------------------- */
378
379	.login-widget,
380	.accountBox {
381		background-color: #f4f9fc;
382		border: 1px solid #cee5fb;
383		color: #2c76b7;
384	}
385
386	/* =My Account
387	-------------------------------------------------------------- */
388
389	#accountNav {
390		background-color: #f4f9fc;
391		border: 1px solid #d0e6fb;
392	}
393	li.accountListItem {
394		background-color: transparent;
395		background-image: url(../../../Online/branding/chevron.jpg);
396		background-position: 97% center;
397		background-repeat: no-repeat;
398		border-top: 1px solid #d0e6fb;
399	}
400	#accountNav ul#accountList li a {
401		color: #2C76B7;
402	}
403	#accountNav ul#accountList li.accountListItem_selected {
404		background-color: #fff;
405		border: solid #d0e6fb;
406		border-width: 1px 0 1px 1px;
407	}
408	#accountNav ul#accountList li.accountListItem_selected a {
409		font-weight: bold;
410	}
411	#accountNav ul#accountList li#listItem_offers span#offerCount {
412		background-color: #2e75b5;
413		color: #fff;
414		font-weight: bold;
415	}
416	#accountContent h2 {
417		color: #F58036;
418	}
419	#accountContent h3 {
420		color: #2C76B7;
421	}
422	#accountContent a.sectionAllLink {
423		color: #2C76B7;
424	}
425	#accountHeader {
426		background-color: #f4f9fc;
427		border: 1px solid #d0e6fb;
428	}
429	#customerName.accountHeaderItem {
430		color: #2C76B7;
431		font-size: 15px;
432	}
433	#customerNumber .label,
434	#customerCreateDate .label {
435		color: #2C76B7;
436		font-weight: normal;
437	}
438	#customerNumber,
439	#customerCreateDate {
440		font-size: 11px;
441	}
442	#customerValue {
443	    font-size: 11px;
444	}
445	.accountHeaderCustomerValueItem {
446	    font-weight: normal;
447	    font-size: 11px;
448	}
449	#customerPoints .label,
450	#customerRank .label,
451	#customerTotal .label {
452		color: #2C76B7;
453		font-weight: normal;
454	}
455	#sectionList li {
456		background-color: #f4f9fc;
457		border: 1px solid #d0e6fb;
458	}
459	#sectionList li a {
460		color: #2C76B7;
461	}
462	.sectionBox {
463		border: 1px solid #ccc;
464	}
465	.sectionBox .dataTable tbody {
466		border-bottom: 1px dotted #9f9f9f;
467
468	}
469	.sectionBox .dataTable tr.odd td,
470	.sectionBox .dataTable tr.even td {
471		background-color: #fff;
472		border-top: 1px dotted #9f9f9f;
473	}
474	.sectionBox .dataTable td a {
475		color: #2C76B7;
476	}
477	.sectionBox .dataTable #keywordsBox {
478		border: 1px solid #9f9f9f;
479	}
480	#accountContent .accountSectionBox {
481		border: 1px solid #ccc;
482	}
483	#accountContent #offerSearchBox,
484	#accountContent #addFriendBox {
485	    background-color: #EBF3F6;
486	    border: 1px solid #CEE5FB;
487	}
488	.actionList li a {
489		background-color: #f4f9fc;
490		border: 1px solid #d0e6fb;
491		color: #2C76B7;
492	}
493	#archiveMessage .disabled {
494		background-color: #E7E7E7;
495		border: 1px solid #DCDCDC;
496		color: #999999;
497	}
498	#messageCenterBox table.dataTable td.read {
499
500	}
501	#messageCenterBox table.dataTable td.unread {
502		color: #000;
503		font-weight: bold;
504	}
505	ul#messageSearchButtons.actionList {
506		border-bottom: 1px solid #d0e6fb;
507	}
508	ul#messageSearchButtons.actionList li a {
509		border: 1px solid #d0e6fb;
510	}
511	ul#messageSearchButtons.actionList li.selectedMessageFilter a {
512		background-color: #fff;
513	}
514	.actionList li.selectedMessageFilter a {
515	    font-weight: bold;
516	}
517
518	/* =Popup Styles
519	-------------------------------------------------------------- */
520
521	body#popup {
522		background-color: #fff;
523	}
524	.popupDetails {
525		background-color: #fff;
526	}
527	#popupBody {
528		background-color: #fff;
529	}
530	#loadArticle {
531		background-color: #fff;
532	}
533	#popupDiv {
534		background-color: #fff;
535		border: 1px solid #174D83;
536	}
537	.popupDiv_giftCard {
538		background-color: #fff;
539	}
540	#popupDiv #popupDiv_title {
541		background-color: #2d3c5d;
542		color: #fff;
543		font-weight: bold;
544	}
545	#popupDiv_alertContainer span {
546		color: #2c76b7;
547		font-weight: bold;
548	}
549	#popupDiv_errorDiv #alertMessage {
550		color: #2c76b7;
551		font-weight: bold;
552	}
553	#popupDiv_errorDiv {
554		background-color: transparent;
555		background-image: url(../../../Online/branding/error.gif);
556		background-position: 10px 0;
557		background-repeat: no-repeat;
558	}
559	#popupDiv_successDiv {
560		background-color: transparent;
561		background: url(../../../Online/branding/success.gif);
562		background-position: 10px 0;
563		background-repeat: no-repeat;
564	}
565	#popupDiv_timeoutDiv {
566		background-color: transparent;
567		background: url(../../../Online/branding/timeout.gif);
568		background-position: 10px 0;
569		background-repeat: no-repeat;
570	}
571	#popupDiv_confirmDiv {
572		background-color: transparent;
573		background: url(../../../Online/branding/confirm.gif);
574		background-position: 10px 0;
575		background-repeat: no-repeat;
576	}
577
578	/* =Ticket Forwarding
579	-------------------------------------------------------------- */
580
581	.popupDiv_ticketForward {
582		background-color: #fff;
583	}
584	#ticketForwardDetails #errorIcon {
585		background-color: transparent;
586		background: url(../../../Online/branding/error.gif);
587		background-position: 10px 0;
588		background-repeat: no-repeat;
589	}
590	#ticketForwardDetails #successIcon {
591		background-color: transparent;
592		background-image: url(../../../Online/branding/success.gif);
593		background-position: 10px 0;
594		background-repeat: no-repeat;
595	}
596
597	/* =Calendar Widget
598	-------------------------------------------------------------- */
599
600	#calendar-widget-frame {
601		background-color: #ECECEB;
602	}
603	#calendarWidget-body {
604		background-color: #ECECEB;
605	}
606	#calendarWidget-navigation {
607		background-color: #2C76B7;
608		color: #fff;
609	}
610	#calendarWidget-navigation td a {
611		font-size: 17px;
612		color: #fff;
613	}
614	#calendarWidgetHeader {
615		border-color: #ececec;
616	}
617	#calendarWidgetHeader td {
618		background-color: #f2f2f2;
619		border-color: #ececec;
620		color: #666666;
621	}
622	#calendarWidgetTable {
623		border-color: #ececec;
624	}
625	#calendarWidgetTable td {
626		background-color: #fff;
627		border-color: #ececec;
628	}
629	#calendarWidgetTable .WidgetToday {
630		background-color: #ececec;
631	}
632	#calendarWidgetTable .WidgetEvent:hover,
633	#calendarWidgetTable .WidgetEvent {
634		background-color: #2C76B7;
635		color: #fff;
636		font-weight: bold;
637	}
638	#calendarWidgetTable .WidgetPast {
639		color: #ccc;
640	}
641
642	/* =Feature Scrolling
643	-------------------------------------------------------------- */
644
645	#leftFeaturesArrow,
646	#rightFeaturesArrow {
647		width: 25px;
648		height: 25px;
649	}
650	#leftFeaturesArrow {
651		background-color: transparent;
652		background-image: url(../../../Online/branding/back.png);
653		background-position: inherit;
654		background-repeat: no-repeat;
655	}
656	#rightFeaturesArrow {
657		background-color: transparent;
658		background-image: url(../../../Online/branding/forward.png);
659		background-position: inherit;
660		background-repeat: no-repeat;
661	}
662
663	/* =Multilingual Start Page
664	-------------------------------------------------------------- */
665
666	.languageTable {
667		color: #f58036;
668		font-weight: bold;
669	}
670
671	/* =Attention and Warning Messages
672	-------------------------------------------------------------- */
673
674	.attention  {
675		background-color: #ffe8c6;
676		border: 1px solid #f47320;
677		color: #000;
678		font-weight: bold;
679	}
680	.attention h2 {
681		color: #000;
682	}
683	.warning_message {
684		font-weight: bold;
685	}
686
687	/* =Notifications
688	-------------------------------------------------------------- */
689
690	#notifications {
691		background-color: #FFE8C6;
692	    border: 1px solid #F47320;
693	}
694	#notifications h2 {
695		color: #f58036;
696	}