Attachment #237859 for bug #422848

Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.




/*!
 * CSS Modal
 * http://drublic.github.com/css-modal
 *
 * @author Hans Christian Reinl - @drublic
 * @version 1.0.3
 */

(function (global) {

	'use strict';

	// Storage variable
	var modal = {};

	// Store for currently active element
	modal.lastActive = undefined;
	modal.activeElement = undefined;

	// Polyfill addEventListener for IE8 (only very basic)
	modal._addEventListener = function (element, event, callback) {
		if (element.addEventListener) {
			element.addEventListener(event, callback, false);
		} else {
			element.attachEvent('on' + event, callback);
		}
	};

	// Hide overlay when ESC is pressed
	modal._addEventListener(document, 'keyup', function (event) {
		var hash = window.location.hash.replace('#', '');

		// If hash is not set
		if (hash === '' || hash === '!') {
			return;
		}

		// If key ESC is pressed
		if (event.keyCode === 27) {
			window.location.hash = '!';

			if (modal.lastActive) {
				return false;
			}

			// Unfocus
			modal.removeFocus();
		}
	}, false);

	// Convenience function to trigger event
	modal._dispatchEvent = function (event, modal) {
		var eventTigger;

		if (!document.createEvent) {
			return;
		}

		eventTigger = document.createEvent('Event');

		eventTigger.initEvent(event, true, true);
		eventTigger.customData = { 'modal': modal };

		document.dispatchEvent(eventTigger);
	};


	// When showing overlay, prevent background from scrolling
	modal.mainHandler = function () {
		var hash = window.location.hash.replace('#', '');
		var modalElement = document.getElementById(hash);
		var htmlClasses = document.documentElement.className;
		var modalChild;
		var oldModal;

		// If the hash element exists
		if (modalElement) {

			// Get first element in selected element
			modalChild = modalElement.children[0];

			// When we deal with a modal and body-class `has-overlay` is not set
			if (modalChild && modalChild.className.match(/modal-inner/)) {
				if (!htmlClasses.match(/has-overlay/)) {

					// Set an html class to prevent scrolling
					document.documentElement.className += ' has-overlay';
				}

				// Unmark previous active element
				if (modal.activeElement) {
					oldModal = modal.activeElement;
					oldModal.className = oldModal.className.replace(' is-active', '');
				}
				// Mark modal as active
				modalElement.className += ' is-active';
				modal.activeElement = modalElement;

				// Set the focus to the modal
				modal.setFocus(hash);

				// Fire an event
				modal._dispatchEvent('cssmodal:show', modal.activeElement);
			}
		} else {
			document.documentElement.className =
					htmlClasses.replace(' has-overlay', '');

			// If activeElement is already defined, delete it
			if (modal.activeElement) {
				modal.activeElement.className =
						modal.activeElement.className.replace(' is-active', '');

				// Fire an event
				modal._dispatchEvent('cssmodal:hide', modal.activeElement);

				// Reset active element
				modal.activeElement = null;

				// Unfocus
				modal.removeFocus();
			}
		}
	};

	modal._addEventListener(window, 'hashchange', modal.mainHandler);
	modal._addEventListener(window, 'load', modal.mainHandler);

	/*
	 * Accessibility
	 */

	// Focus modal
	modal.setFocus = function () {
		if (modal.activeElement) {

			// Set element with last focus
			modal.lastActive = document.activeElement;

			// New focussing
			modal.activeElement.focus();
		}
	};

	// Unfocus
	modal.removeFocus = function () {
		if (modal.lastActive) {
			modal.lastActive.focus();
		}
	};

	// Export CSSModal into global space
	global.CSSModal = modal;

}(window));




<style>
/**
 * CSS Modal
 * Modal as reusable module
 * http://drublic.github.com/css-modal
 *
 * @author Hans Christian Reinl - @drublic
 * @version 1.0.4
 */
html {
	overflow-y: scroll;
}
.has-overlay {
	overflow: hidden;
}

.has-overlay>body {
	height: 100%;
	overflow-y: scroll;
}

.semantic-content {
	-webkit-transform: translate(0, 100%);
	-moz-transform: translate(0, 100%);
	-o-transform: translate(0, 100%);
	-ms-transform: translate(0, 100%);
	transform: translate(0, 100%);
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	opacity: 0;
	color: #222;
	line-height: 1.3;
	display: none\9;
}

.semantic-content:target {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
}

.is-active.semantic-content {
	display: block\9;
}

.semantic-content:target {
	display: block\9;
}

.semantic-content .modal-inner {
	position: absolute;
	top: 50px;
	left: 50%;
	z-index: 20;
	margin-left: -325px;
	width: 650px;
	overflow-x: hidden;
	border-radius: 2px;
	background: #fff;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.semantic-content .modal-inner>img,.semantic-content .modal-inner>video,.semantic-content .modal-inner>iframe
	{
	width: 100%;
	height: auto;
	min-height: 300px;
}

.semantic-content .modal-inner>img {
	width: auto;
	max-width: 100%;
}

.semantic-content .modal-header {
	border-bottom: 1px solid #dddddd;
	padding: 0 1.2em;
}

.semantic-content .modal-header>h2 {
	margin: 0.5em 0;
	border-bottom:0;
}

.semantic-content .modal-content {
	max-height: 400px;
	max-height: 70vh;
	border-bottom: 1px solid #dddddd;
	padding: 15px 1.2em;
	overflow-x: hidden;
	overflow-y: auto;
}

.semantic-content .modal-content>* {
	max-width: 100%;
}

.semantic-content .modal-footer {
	border-top: 1px solid white;
	padding: 13px 1.2em 18px;
	background: #f0f0f0;
	border-radius: 2px;
}

.semantic-content .modal-close {
	display: block;
	text-indent: -100px;
	overflow: hidden;
}

.semantic-content .modal-close:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background:
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
}

.semantic-content .modal-close:after {
	content: '\00d7';
	position: absolute;
	top: 25px;
	left: 50%;
	z-index: 20;
	margin-left: 285px;
	background: #fff;
	border-radius: 2px;
	padding: 4px 8px;
	font-size: 1.2em;
	text-decoration: none;
	text-indent: 0;
}

@media screen and (max-width: 690px) {
	.semantic-content .modal-inner {
		width: auto;
		left: 20px;
		right: 20px;
		margin-left: 0;
	}
	.semantic-content .modal-close {
		left: auto;
		right: 33px;
		margin-left: 0;
	}
	.semantic-content .modal-close:after {
		margin-left: 40%;
	}
}

@media screen and (max-width: 30em) {
	.semantic-content {
		-webkit-transform: translate(0, 400px);
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
		-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;
		-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;
		-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;
		transition: transform .25s ease-in-out, opacity 1ms .25s;
		display: block;
		height: 100%;
		bottom: auto;
	}
	.semantic-content:target {
		-webkit-transition: -webkit-transform .25s ease-in-out;
		-moz-transition: -moz-transform .25s ease-in-out;
		-o-transition: -o-transform .25s ease-in-out;
		-ms-transition: -ms-transform .25s ease-in-out;
		transition: transform .25s ease-in-out;
	}
	.semantic-content:before {
		background-color: #27aae2;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2),
			to(#1c9cd3));
		background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);
		background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3);
		background-image: -o-linear-gradient(top, #27aae2, #1c9cd3);
		background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		height: 3em;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	}
	.semantic-content .modal-inner {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		top: 0;
		left: 0;
		right: 0;
		padding-top: 3em;
		height: 100%;
		overflow: scroll;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.semantic-content .modal-content {
		max-height: none;
	}
	.semantic-content .modal-close {
		right: auto;
		text-decoration: none;
	}
	.semantic-content .modal-close:before {
		display: none;
	}
	.semantic-content .modal-close:after {
		content: attr(data-close);
		top: 0.4em;
		left: 1em;
		z-index: 40;
		margin-left: 0;
		font-size: 1em;
		padding: 0.5em 1em;
	}
}

@media screen and (max-height: 46em) and (min-width: 30em) {
	.semantic-content .modal-content {
		max-height: 340px;
		max-height: 50vh;
	}
}

@media screen and (max-height: 36em) and (min-width: 30em) {
	.semantic-content .modal-content {
		max-height: 265px;
		max-height: 40vh;
	}
}

@media screen and (min-width: 30em) {
	.semantic-content {
		-webkit-transition: opacity 0.4s;
		-o-transition: opacity 0.4s;
		transition: opacity 0.4s;
	}
}
#surveyMonkeyInfo{
	width:100%;
	font-size:10px;
	color:#666;
}
#sm_e_s{
	overflow:hidden;
	border:0px;
	padding-bottom:4px;
}
#logo{
	font-size:12px;
	padding-top:6px;
}
#logo span{
  position:absolute;
  top:45px;
}
#logo-a{
	padding:18px;
}
</style>


<!-- Call the modal by clicking this link -->
<a href="#modal-text" class="call-modal"
	title="Do you like this new logo?"><img
	src="/home/promotions/logovoting/logo/eclipse-logo-a.png"
	alt="Eclipse.org" id="logo-a"/><span>Do you like this new logo?</span></a>

<!-- A modal with its content -->
<section class="semantic-content" id="modal-text" tabindex="-1"
	role="dialog" aria-labelledby="modal-label" aria-hidden="true">

	<div class="modal-inner">
		<div class="modal-header">
			<h2 id="modal-label">Do you like this new logo?</h2>
		</div>

		<div class="modal-content">
			<div id="surveyMonkeyInfo">
			  <iframe id="sm_e_s" src="https://www.surveymonkey.com/jsEmbed.aspx?sm=v_2fUJ5cztOQKSptKXZy7m6A_3d_3d" width="100%" height="585" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
		  </div>
	  </div>

		<div class="modal-footer">
			Create your free online surveys with <a href="https://www.surveymonkey.com">SurveyMonkey</a> , the world's leading questionnaire tool.
		</div>
	</div>

	<!-- Use Hash-Bang to maintain scroll position when closing modal -->
	<a href="#!" class="modal-close" title="Close this modal"
		data-dismiss="modal">&times;</a>
</section>

<script src="/home/promotions/logovoting/modal.js"></script>
<!-- JS for Modal -->

Lines 1-5 Link Here

(-)a/promotions/promotion.php (-1 / +8 lines)
1	<?php	1	<?php
2	if ($theme == "Nova" \|\| $theme == "bootnova") {	2	if ($theme == "Nova" \|\| $theme == "bootnova") {
3	require_once 'promotion-default.php';	3	// I need Ian to review this. The newlogo variable is required to load the voting functionality.
		4	// We will need to remove this once we are ready to go live.
		5	if(!isset($_GET['newlogo'])){
		6	require_once 'promotion-default.php';
		7	}
		8	else{
		9	require_once 'logovoting/promotion-newlogo.php';
		10	}
4	}	11	}
5	?>	12	?>

Return to bug 422848

Added Link Here

(-)a/promotions/logovoting/modal.js (+155 lines)
1	/*!
2	* CSS Modal
3	* http://drublic.github.com/css-modal
4	*
5	* @author Hans Christian Reinl - @drublic
6	* @version 1.0.3
7	*/
8
9	(function (global) {
10
11	'use strict';
12
13	// Storage variable
14	var modal = {};
15
16	// Store for currently active element
17	modal.lastActive = undefined;
18	modal.activeElement = undefined;
19
20	// Polyfill addEventListener for IE8 (only very basic)
21	modal._addEventListener = function (element, event, callback) {
22	if (element.addEventListener) {
23	element.addEventListener(event, callback, false);
24	} else {
25	element.attachEvent('on' + event, callback);
26	}
27	};
28
29	// Hide overlay when ESC is pressed
30	modal._addEventListener(document, 'keyup', function (event) {
31	var hash = window.location.hash.replace('#', '');
32
33	// If hash is not set
34	if (hash === '' \|\| hash === '!') {
35	return;
36	}
37
38	// If key ESC is pressed
39	if (event.keyCode === 27) {
40	window.location.hash = '!';
41
42	if (modal.lastActive) {
43	return false;
44	}
45
46	// Unfocus
47	modal.removeFocus();
48	}
49	}, false);
50
51	// Convenience function to trigger event
52	modal._dispatchEvent = function (event, modal) {
53	var eventTigger;
54
55	if (!document.createEvent) {
56	return;
57	}
58
59	eventTigger = document.createEvent('Event');
60
61	eventTigger.initEvent(event, true, true);
62	eventTigger.customData = { 'modal': modal };
63
64	document.dispatchEvent(eventTigger);
65	};
66
67
68	// When showing overlay, prevent background from scrolling
69	modal.mainHandler = function () {
70	var hash = window.location.hash.replace('#', '');
71	var modalElement = document.getElementById(hash);
72	var htmlClasses = document.documentElement.className;
73	var modalChild;
74	var oldModal;
75
76	// If the hash element exists
77	if (modalElement) {
78
79	// Get first element in selected element
80	modalChild = modalElement.children[0];
81
82	// When we deal with a modal and body-class `has-overlay` is not set
83	if (modalChild && modalChild.className.match(/modal-inner/)) {
84	if (!htmlClasses.match(/has-overlay/)) {
85
86	// Set an html class to prevent scrolling
87	document.documentElement.className += ' has-overlay';
88	}
89
90	// Unmark previous active element
91	if (modal.activeElement) {
92	oldModal = modal.activeElement;
93	oldModal.className = oldModal.className.replace(' is-active', '');
94	}
95	// Mark modal as active
96	modalElement.className += ' is-active';
97	modal.activeElement = modalElement;
98
99	// Set the focus to the modal
100	modal.setFocus(hash);
101
102	// Fire an event
103	modal._dispatchEvent('cssmodal:show', modal.activeElement);
104	}
105	} else {
106	document.documentElement.className =
107	htmlClasses.replace(' has-overlay', '');
108
109	// If activeElement is already defined, delete it
110	if (modal.activeElement) {
111	modal.activeElement.className =
112	modal.activeElement.className.replace(' is-active', '');
113
114	// Fire an event
115	modal._dispatchEvent('cssmodal:hide', modal.activeElement);
116
117	// Reset active element
118	modal.activeElement = null;
119
120	// Unfocus
121	modal.removeFocus();
122	}
123	}
124	};
125
126	modal._addEventListener(window, 'hashchange', modal.mainHandler);
127	modal._addEventListener(window, 'load', modal.mainHandler);
128
129	/*
130	* Accessibility
131	*/
132
133	// Focus modal
134	modal.setFocus = function () {
135	if (modal.activeElement) {
136
137	// Set element with last focus
138	modal.lastActive = document.activeElement;
139
140	// New focussing
141	modal.activeElement.focus();
142	}
143	};
144
145	// Unfocus
146	modal.removeFocus = function () {
147	if (modal.lastActive) {
148	modal.lastActive.focus();
149	}
150	};
151
152	// Export CSSModal into global space
153	global.CSSModal = modal;
154
155	}(window));

Added Link Here

(-)a/promotions/logovoting/promotion-newlogo.php (+315 lines)
1	<style>
2	/**
3	* CSS Modal
4	* Modal as reusable module
5	* http://drublic.github.com/css-modal
6	*
7	* @author Hans Christian Reinl - @drublic
8	* @version 1.0.4
9	*/
10	html {
11	overflow-y: scroll;
12	}
13	.has-overlay {
14	overflow: hidden;
15	}
16
17	.has-overlay>body {
18	height: 100%;
19	overflow-y: scroll;
20	}
21
22	.semantic-content {
23	-webkit-transform: translate(0, 100%);
24	-moz-transform: translate(0, 100%);
25	-o-transform: translate(0, 100%);
26	-ms-transform: translate(0, 100%);
27	transform: translate(0, 100%);
28	-webkit-transform: translate3d(0, 100%, 0);
29	transform: translate3d(0, 100%, 0);
30	position: fixed;
31	top: 0;
32	left: 0;
33	right: 0;
34	bottom: 0;
35	z-index: 999;
36	opacity: 0;
37	color: #222;
38	line-height: 1.3;
39	display: none\9;
40	}
41
42	.semantic-content:target {
43	-webkit-transform: translate(0, 0);
44	-moz-transform: translate(0, 0);
45	-o-transform: translate(0, 0);
46	-ms-transform: translate(0, 0);
47	transform: translate(0, 0);
48	opacity: 1;
49	}
50
51	.is-active.semantic-content {
52	display: block\9;
53	}
54
55	.semantic-content:target {
56	display: block\9;
57	}
58
59	.semantic-content .modal-inner {
60	position: absolute;
61	top: 50px;
62	left: 50%;
63	z-index: 20;
64	margin-left: -325px;
65	width: 650px;
66	overflow-x: hidden;
67	border-radius: 2px;
68	background: #fff;
69	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
70	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
71	}
72
73	.semantic-content .modal-inner>img,.semantic-content .modal-inner>video,.semantic-content .modal-inner>iframe
74	{
75	width: 100%;
76	height: auto;
77	min-height: 300px;
78	}
79
80	.semantic-content .modal-inner>img {
81	width: auto;
82	max-width: 100%;
83	}
84
85	.semantic-content .modal-header {
86	border-bottom: 1px solid #dddddd;
87	padding: 0 1.2em;
88	}
89
90	.semantic-content .modal-header>h2 {
91	margin: 0.5em 0;
92	border-bottom:0;
93	}
94
95	.semantic-content .modal-content {
96	max-height: 400px;
97	max-height: 70vh;
98	border-bottom: 1px solid #dddddd;
99	padding: 15px 1.2em;
100	overflow-x: hidden;
101	overflow-y: auto;
102	}
103
104	.semantic-content .modal-content>* {
105	max-width: 100%;
106	}
107
108	.semantic-content .modal-footer {
109	border-top: 1px solid white;
110	padding: 13px 1.2em 18px;
111	background: #f0f0f0;
112	border-radius: 2px;
113	}
114
115	.semantic-content .modal-close {
116	display: block;
117	text-indent: -100px;
118	overflow: hidden;
119	}
120
121	.semantic-content .modal-close:before {
122	content: '';
123	position: absolute;
124	top: 0;
125	left: 0;
126	right: 0;
127	bottom: 0;
128	z-index: 10;
129	background:
130	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
131	}
132
133	.semantic-content .modal-close:after {
134	content: '\00d7';
135	position: absolute;
136	top: 25px;
137	left: 50%;
138	z-index: 20;
139	margin-left: 285px;
140	background: #fff;
141	border-radius: 2px;
142	padding: 4px 8px;
143	font-size: 1.2em;
144	text-decoration: none;
145	text-indent: 0;
146	}
147
148	@media screen and (max-width: 690px) {
149	.semantic-content .modal-inner {
150	width: auto;
151	left: 20px;
152	right: 20px;
153	margin-left: 0;
154	}
155	.semantic-content .modal-close {
156	left: auto;
157	right: 33px;
158	margin-left: 0;
159	}
160	.semantic-content .modal-close:after {
161	margin-left: 40%;
162	}
163	}
164
165	@media screen and (max-width: 30em) {
166	.semantic-content {
167	-webkit-transform: translate(0, 400px);
168	-webkit-transform: translate3d(0, 100%, 0);
169	transform: translate3d(0, 100%, 0);
170	-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
171	-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;
172	-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;
173	-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;
174	transition: transform .25s ease-in-out, opacity 1ms .25s;
175	display: block;
176	height: 100%;
177	bottom: auto;
178	}
179	.semantic-content:target {
180	-webkit-transition: -webkit-transform .25s ease-in-out;
181	-moz-transition: -moz-transform .25s ease-in-out;
182	-o-transition: -o-transform .25s ease-in-out;
183	-ms-transition: -ms-transform .25s ease-in-out;
184	transition: transform .25s ease-in-out;
185	}
186	.semantic-content:before {
187	background-color: #27aae2;
188	background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2),
189	to(#1c9cd3));
190	background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);
191	background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3);
192	background-image: -o-linear-gradient(top, #27aae2, #1c9cd3);
193	background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);
194	content: '';
195	position: fixed;
196	top: 0;
197	left: 0;
198	right: 0;
199	z-index: 30;
200	height: 3em;
201	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
202	box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
203	}
204	.semantic-content .modal-inner {
205	-webkit-box-sizing: border-box;
206	-moz-box-sizing: border-box;
207	box-sizing: border-box;
208	top: 0;
209	left: 0;
210	right: 0;
211	padding-top: 3em;
212	height: 100%;
213	overflow: scroll;
214	-webkit-box-shadow: none;
215	box-shadow: none;
216	}
217	.semantic-content .modal-content {
218	max-height: none;
219	}
220	.semantic-content .modal-close {
221	right: auto;
222	text-decoration: none;
223	}
224	.semantic-content .modal-close:before {
225	display: none;
226	}
227	.semantic-content .modal-close:after {
228	content: attr(data-close);
229	top: 0.4em;
230	left: 1em;
231	z-index: 40;
232	margin-left: 0;
233	font-size: 1em;
234	padding: 0.5em 1em;
235	}
236	}
237
238	@media screen and (max-height: 46em) and (min-width: 30em) {
239	.semantic-content .modal-content {
240	max-height: 340px;
241	max-height: 50vh;
242	}
243	}
244
245	@media screen and (max-height: 36em) and (min-width: 30em) {
246	.semantic-content .modal-content {
247	max-height: 265px;
248	max-height: 40vh;
249	}
250	}
251
252	@media screen and (min-width: 30em) {
253	.semantic-content {
254	-webkit-transition: opacity 0.4s;
255	-o-transition: opacity 0.4s;
256	transition: opacity 0.4s;
257	}
258	}
259	#surveyMonkeyInfo{
260	width:100%;
261	font-size:10px;
262	color:#666;
263	}
264	#sm_e_s{
265	overflow:hidden;
266	border:0px;
267	padding-bottom:4px;
268	}
269	#logo{
270	font-size:12px;
271	padding-top:6px;
272	}
273	#logo span{
274	position:absolute;
275	top:45px;
276	}
277	#logo-a{
278	padding:18px;
279	}
280	</style>
281
282
283	<!-- Call the modal by clicking this link -->
284	<a href="#modal-text" class="call-modal"
285	title="Do you like this new logo?"><img
286	src="/home/promotions/logovoting/logo/eclipse-logo-a.png"
287	alt="Eclipse.org" id="logo-a"/><span>Do you like this new logo?</span></a>
288
289	<!-- A modal with its content -->
290	<section class="semantic-content" id="modal-text" tabindex="-1"
291	role="dialog" aria-labelledby="modal-label" aria-hidden="true">
292
293	<div class="modal-inner">
294	<div class="modal-header">
295	<h2 id="modal-label">Do you like this new logo?</h2>
296	</div>
297
298	<div class="modal-content">
299	<div id="surveyMonkeyInfo">
300	<iframe id="sm_e_s" src="https://www.surveymonkey.com/jsEmbed.aspx?sm=v_2fUJ5cztOQKSptKXZy7m6A_3d_3d" width="100%" height="585" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
301	</div>
302	</div>
303
304	<div class="modal-footer">
305	Create your free online surveys with <a href="https://www.surveymonkey.com">SurveyMonkey</a> , the world's leading questionnaire tool.
306	</div>
307	</div>
308
309	<!-- Use Hash-Bang to maintain scroll position when closing modal -->
310	<a href="#!" class="modal-close" title="Close this modal"
311	data-dismiss="modal">×</a>
312	</section>
313
314	<script src="/home/promotions/logovoting/modal.js"></script>
315	<!-- JS for Modal -->