new icons

33 files changed, 224 insertions, 17 deletions

diff --git a/examples/org.eclipse.swt.examples.browser.demos/build.properties b/examples/org.eclipse.swt.examples.browser.demos/build.properties
index bf2a825849..4af8b04fc0 100644
--- a/examples/org.eclipse.swt.examples.browser.demos/build.properties
+++ b/examples/org.eclipse.swt.examples.browser.demos/build.properties
@@ -7,4 +7,6 @@ bin.includes = doc-html/,\
                BrowserDemo.jar,\
                css1/,\
                css2/,\
+               css3/,\
+               css4/,\
                icons/
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css1/welcome.html b/examples/org.eclipse.swt.examples.browser.demos/css1/welcome.html
index 1e85ae6dc5..58e92a35b0 100644
--- a/examples/org.eclipse.swt.examples.browser.demos/css1/welcome.html
+++ b/examples/org.eclipse.swt.examples.browser.demos/css1/welcome.html
@@ -23,10 +23,31 @@ Different themes are supported. Theme is configured through a Cascading Style Sh
 <ul class="theme">
 <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css1">Theme 1</a></li>
 <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css2">Theme 2</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css3">Theme 3</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css4">Theme 4</a></li>
 </ul>
 
 </div>
 <h2>How to win</h2>
 The game ends when all cells are filled. The winner is the one with most pawns of their colour. 
+
+<h2>Java and HTML integrated through the SWT Browser widget</h2>
+<p>
+Rendering is based on HTML and CSS techniques. Computer moves are programmed in regular
+Java code in the Eclipse plug-in. The SWT Browser widget is used for rendering and reacting
+to user input.
+</p>
+<h3>Implementation</h3>
+<p>
+The board is a table filled with hyperlinks. Cascading Style Sheets
+provide various themes and control the table aesthetic appearance.
+<br>The API <code>org.eclipse.swt.browser.Browser.setText(java.lang.String)</code> draws
+the board game from HTML generated in memory.
+<br>Player moves are captured by implementing the interface <code>org.eclipse.swt.browser.LocationListener</code>.
+e.g the player clicks on a cell that may generate a hyperlink with a URL similar to
+<code>http://www.org.eclipse.swt.examples.browser.demos/xx1yy2</code>. That hyperlink identifies
+the position of the cell selected by the player (column 1, row 2). The move is completed by generating
+new HTML content and invoking <code>Browser.setText</code> to update the board game.
+</p>
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/Back640x440.gif b/examples/org.eclipse.swt.examples.browser.demos/css2/Back640x440.gif
new file mode 100644
index 0000000000..6533821828
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/Back640x440.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/back2.png b/examples/org.eclipse.swt.examples.browser.demos/css2/back2.png
deleted file mode 100644
index 6c49d9ffdd..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/back2.png
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/black.png b/examples/org.eclipse.swt.examples.browser.demos/css2/black.png
deleted file mode 100644
index ad466cf198..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/black.png
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/black_chip.gif b/examples/org.eclipse.swt.examples.browser.demos/css2/black_chip.gif
new file mode 100644
index 0000000000..c7c6ebd55c
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/black_chip.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/empty.png b/examples/org.eclipse.swt.examples.browser.demos/css2/empty.png
deleted file mode 100644
index d6ed8e03c2..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/empty.png
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/style.css b/examples/org.eclipse.swt.examples.browser.demos/css2/style.css
index 2c63d36d6f..9ef0d94191 100644
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/style.css
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/style.css
@@ -1,30 +1,29 @@
-body {background: url(./back2.png) fixed; font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+body {background: url(./Back640x440.gif) fixed; font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

 h1 {text-align: center; font-size: 14pt; font-family: Verdana, Arial, Helv, Helvetica, sans-serif;}

 h2 {background: url(./line1.gif) no-repeat right bottom; font-size: 12pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

 h3 {font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

 

 ul {list-style: none; padding: 0; margin:0; font: 12pt Times;}

-li.white {background: url(./white.png) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

-li.black {background: url(./black.png) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

-li.wall {background: url(./wall.png) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.white {background: url(./white_chip.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.black {background: url(./black_chip.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.wall {background: url(./wall_chip.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

 

 .board {text-align: left;}

-table { border-collapse: collapse; margin: 0; padding:0}

+table { border-collapse: collapse; margin: 0; padding:0; background: url(./texture_cells.gif)}

 tr {}

 td {height:48px; width:48px; table-layout: fixed;}

 

-.whitelink a {display: block; background: url(./empty.png) no-repeat; width:48px; height:48px;}

-.blacklink a {display: block; background: url(./empty.png) no-repeat; width:48px; height:48px;}

-.empty {display: block; background: url(./empty.png) no-repeat; width:48px; height:48px;}

+.whitelink a {display: block; width:48px; height:48px;}

+.blacklink a {display: block; width:48px; height:48px;}

 

-.whitelink a:hover {display: block; background: url(./white.png) no-repeat; width:48px; height:48px;}

-.blacklink a:hover {display: block; background: url(./black.png) no-repeat; width:48px; height:48px;}

-.white {background: url(./white.png) no-repeat;}

-.black {background: url(./black.png) no-repeat;}

-.wall {background: url(./wall.png) no-repeat;}

+.whitelink a:hover {display: block; background: url(./white_chip.gif) no-repeat; width:48px; height:48px;}

+.blacklink a:hover {display: block; background: url(./black_chip.gif) no-repeat; width:48px; height:48px;}

+.white {background: url(./white_chip.gif) no-repeat;}

+.black {background: url(./black_chip.gif) no-repeat;}

+.wall {background: url(./wall_chip.gif) no-repeat;}

 

-.playerwhite {position: absolute; top: 50px; right:10px; margin: 1em 10px; border: 3px solid yellow; background: url(./white.png) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

-.playerblack {position: absolute; top: 300px; right:10px; margin: 1em 10px; border: 3px solid yellow; background: url(./black.png) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+.playerwhite {position: absolute; top: 50px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./white_chip.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+.playerblack {position: absolute; top: 300px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./black_chip.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

 

-.winner {border: 4px solid blue; font: bold 16pt Times, serif;}

+.winner {border: 4px solid white; font: bold 16pt Times, serif;}

 .loser {border: 1px solid black; font: 12pt Times, serif;}

diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/texture_cells.gif b/examples/org.eclipse.swt.examples.browser.demos/css2/texture_cells.gif
new file mode 100644
index 0000000000..f7fee9d24d
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/texture_cells.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/wall.png b/examples/org.eclipse.swt.examples.browser.demos/css2/wall.png
deleted file mode 100644
index a38a12c7c4..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/wall.png
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/wall_chip.gif b/examples/org.eclipse.swt.examples.browser.demos/css2/wall_chip.gif
new file mode 100644
index 0000000000..bdf0b30ebd
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/wall_chip.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/welcome.html b/examples/org.eclipse.swt.examples.browser.demos/css2/welcome.html
index 1e85ae6dc5..58e92a35b0 100644
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/welcome.html
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/welcome.html
@@ -23,10 +23,31 @@ Different themes are supported. Theme is configured through a Cascading Style Sh
 <ul class="theme">
 <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css1">Theme 1</a></li>
 <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css2">Theme 2</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css3">Theme 3</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css4">Theme 4</a></li>
 </ul>
 
 </div>
 <h2>How to win</h2>
 The game ends when all cells are filled. The winner is the one with most pawns of their colour. 
+
+<h2>Java and HTML integrated through the SWT Browser widget</h2>
+<p>
+Rendering is based on HTML and CSS techniques. Computer moves are programmed in regular
+Java code in the Eclipse plug-in. The SWT Browser widget is used for rendering and reacting
+to user input.
+</p>
+<h3>Implementation</h3>
+<p>
+The board is a table filled with hyperlinks. Cascading Style Sheets
+provide various themes and control the table aesthetic appearance.
+<br>The API <code>org.eclipse.swt.browser.Browser.setText(java.lang.String)</code> draws
+the board game from HTML generated in memory.
+<br>Player moves are captured by implementing the interface <code>org.eclipse.swt.browser.LocationListener</code>.
+e.g the player clicks on a cell that may generate a hyperlink with a URL similar to
+<code>http://www.org.eclipse.swt.examples.browser.demos/xx1yy2</code>. That hyperlink identifies
+the position of the cell selected by the player (column 1, row 2). The move is completed by generating
+new HTML content and invoking <code>Browser.setText</code> to update the board game.
+</p>
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/white.png b/examples/org.eclipse.swt.examples.browser.demos/css2/white.png
deleted file mode 100644
index 9d28855043..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/css2/white.png
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css2/white_chip.gif b/examples/org.eclipse.swt.examples.browser.demos/css2/white_chip.gif
new file mode 100644
index 0000000000..3c6d6582b6
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css2/white_chip.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/Back640x440.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/Back640x440.gif
new file mode 100644
index 0000000000..6533821828
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/Back640x440.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/black_pawn.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/black_pawn.gif
new file mode 100644
index 0000000000..6e1a41dc31
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/black_pawn.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/line1.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/line1.gif
new file mode 100644
index 0000000000..f9a0f34ecf
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/line1.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/style.css b/examples/org.eclipse.swt.examples.browser.demos/css3/style.css
new file mode 100644
index 0000000000..293ad78ba4
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/style.css
@@ -0,0 +1,29 @@
+body {background: url(./Back640x440.gif) fixed; font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+h1 {text-align: center; font-size: 14pt; font-family: Verdana, Arial, Helv, Helvetica, sans-serif;}

+h2 {background: url(./line1.gif) no-repeat right bottom; font-size: 12pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+h3 {font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+

+ul {list-style: none; padding: 0; margin:0; font: 12pt Times;}

+li.white {background: url(./white_pawn.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.black {background: url(./black_pawn.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.wall {background: url(./wall_pawn.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+

+.board {text-align: left;}

+table { border-collapse: collapse; margin: 0; padding:0; background: url(./texture_cells.gif)}

+tr {}

+td {height:48px; width:48px; table-layout: fixed;}

+

+.whitelink a {display: block; width:48px; height:48px;}

+.blacklink a {display: block; width:48px; height:48px;}

+

+.whitelink a:hover {display: block; background: url(./white_pawn.gif) no-repeat; width:48px; height:48px;}

+.blacklink a:hover {display: block; background: url(./black_pawn.gif) no-repeat; width:48px; height:48px;}

+.white {background: url(./white_pawn.gif) no-repeat;}

+.black {background: url(./black_pawn.gif) no-repeat;}

+.wall {background: url(./wall_pawn.gif) no-repeat;}

+

+.playerwhite {position: absolute; top: 50px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./white_pawn.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+.playerblack {position: absolute; top: 300px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./black_pawn.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+

+.winner {border: 4px solid white; font: bold 16pt Times, serif;}

+.loser {border: 1px solid black; font: 12pt Times, serif;}

diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/texture_cells.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/texture_cells.gif
new file mode 100644
index 0000000000..f7fee9d24d
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/texture_cells.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/wall_pawn.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/wall_pawn.gif
new file mode 100644
index 0000000000..d05cd507ab
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/wall_pawn.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/welcome.html b/examples/org.eclipse.swt.examples.browser.demos/css3/welcome.html
new file mode 100644
index 0000000000..58e92a35b0
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/welcome.html
@@ -0,0 +1,53 @@
+<html>
+<head>
+	<title>Start a game</title>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+<h1>Pawns Game</h1>
+<div class="start">
+<a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart1player">1 player</a>
+<a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart2players">2 players</a>
+</div>
+<h2>How to play</h2>
+This board game is a variant of Reversi and Tic Tac Toe. Each one of the two players sets a pawn on an empty cell of the board.
+<h3>Pawns</h3>
+<ul>
+<li class="white">Player 1</li>
+<li class="black">Player 2</li>
+<li class="wall">Wall. Cannot be reversed.</li>
+</ul>
+<div class="theme">
+Different themes are supported. Theme is configured through a Cascading Style Sheet (CSS) that determines how the HTML content is rendered by the SWT Browser widget.
+<ul class="theme">
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css1">Theme 1</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css2">Theme 2</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css3">Theme 3</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css4">Theme 4</a></li>
+</ul>
+
+</div>
+<h2>How to win</h2>
+The game ends when all cells are filled. The winner is the one with most pawns of their colour. 
+
+<h2>Java and HTML integrated through the SWT Browser widget</h2>
+<p>
+Rendering is based on HTML and CSS techniques. Computer moves are programmed in regular
+Java code in the Eclipse plug-in. The SWT Browser widget is used for rendering and reacting
+to user input.
+</p>
+<h3>Implementation</h3>
+<p>
+The board is a table filled with hyperlinks. Cascading Style Sheets
+provide various themes and control the table aesthetic appearance.
+<br>The API <code>org.eclipse.swt.browser.Browser.setText(java.lang.String)</code> draws
+the board game from HTML generated in memory.
+<br>Player moves are captured by implementing the interface <code>org.eclipse.swt.browser.LocationListener</code>.
+e.g the player clicks on a cell that may generate a hyperlink with a URL similar to
+<code>http://www.org.eclipse.swt.examples.browser.demos/xx1yy2</code>. That hyperlink identifies
+the position of the cell selected by the player (column 1, row 2). The move is completed by generating
+new HTML content and invoking <code>Browser.setText</code> to update the board game.
+</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css3/white_pawn.gif b/examples/org.eclipse.swt.examples.browser.demos/css3/white_pawn.gif
new file mode 100644
index 0000000000..98f5e538b6
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css3/white_pawn.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/Back640x440.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/Back640x440.gif
new file mode 100644
index 0000000000..6533821828
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/Back640x440.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/blue_people.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/blue_people.gif
new file mode 100644
index 0000000000..a710c55e5b
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/blue_people.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/gold_people.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/gold_people.gif
new file mode 100644
index 0000000000..605090a1ae
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/gold_people.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/line1.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/line1.gif
new file mode 100644
index 0000000000..f9a0f34ecf
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/line1.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/style.css b/examples/org.eclipse.swt.examples.browser.demos/css4/style.css
new file mode 100644
index 0000000000..a1a3afbefe
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/style.css
@@ -0,0 +1,29 @@
+body {background: url(./Back640x440.gif) fixed; font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+h1 {text-align: center; font-size: 14pt; font-family: Verdana, Arial, Helv, Helvetica, sans-serif;}

+h2 {background: url(./line1.gif) no-repeat right bottom; font-size: 12pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+h3 {font-size: 10pt; font-family:Verdana, Arial, Helv, Helvetica, sans-serif;}

+

+ul {list-style: none; padding: 0; margin:0; font: 12pt Times;}

+li.white {background: url(./blue_people.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.black {background: url(./gold_people.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+li.wall {background: url(./wall_people.gif) no-repeat; padding: 3px 0 32px 64px; margin: 0;}

+

+.board {text-align: left;}

+table { border-collapse: collapse; margin: 0; padding:0; background: url(./texture_cells.gif)}

+tr {}

+td {height:48px; width:48px; table-layout: fixed;}

+

+.whitelink a {display: block; width:48px; height:48px;}

+.blacklink a {display: block; width:48px; height:48px;}

+

+.whitelink a:hover {display: block; background: url(./blue_people.gif) no-repeat; width:48px; height:48px;}

+.blacklink a:hover {display: block; background: url(./gold_people.gif) no-repeat; width:48px; height:48px;}

+.white {background: url(./blue_people.gif) no-repeat;}

+.black {background: url(./gold_people.gif) no-repeat;}

+.wall {background: url(./wall_people.gif) no-repeat;}

+

+.playerwhite {position: absolute; top: 50px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./blue_people.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+.playerblack {position: absolute; top: 300px; right:10px; margin: 1em 10px; border: 3px solid blue; background: url(./gold_people.gif) no-repeat right; text-align: left; width:100px; height:48px; font: 36pt Times, serif;}

+

+.winner {border: 4px solid white; font: bold 16pt Times, serif;}

+.loser {border: 1px solid black; font: 12pt Times, serif;}

diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/texture_cells.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/texture_cells.gif
new file mode 100644
index 0000000000..f7fee9d24d
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/texture_cells.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/wall_people.gif b/examples/org.eclipse.swt.examples.browser.demos/css4/wall_people.gif
new file mode 100644
index 0000000000..5616c815d9
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/wall_people.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/css4/welcome.html b/examples/org.eclipse.swt.examples.browser.demos/css4/welcome.html
new file mode 100644
index 0000000000..58e92a35b0
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/css4/welcome.html
@@ -0,0 +1,53 @@
+<html>
+<head>
+	<title>Start a game</title>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+<h1>Pawns Game</h1>
+<div class="start">
+<a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart1player">1 player</a>
+<a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart2players">2 players</a>
+</div>
+<h2>How to play</h2>
+This board game is a variant of Reversi and Tic Tac Toe. Each one of the two players sets a pawn on an empty cell of the board.
+<h3>Pawns</h3>
+<ul>
+<li class="white">Player 1</li>
+<li class="black">Player 2</li>
+<li class="wall">Wall. Cannot be reversed.</li>
+</ul>
+<div class="theme">
+Different themes are supported. Theme is configured through a Cascading Style Sheet (CSS) that determines how the HTML content is rendered by the SWT Browser widget.
+<ul class="theme">
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css1">Theme 1</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css2">Theme 2</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css3">Theme 3</a></li>
+<li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css4">Theme 4</a></li>
+</ul>
+
+</div>
+<h2>How to win</h2>
+The game ends when all cells are filled. The winner is the one with most pawns of their colour. 
+
+<h2>Java and HTML integrated through the SWT Browser widget</h2>
+<p>
+Rendering is based on HTML and CSS techniques. Computer moves are programmed in regular
+Java code in the Eclipse plug-in. The SWT Browser widget is used for rendering and reacting
+to user input.
+</p>
+<h3>Implementation</h3>
+<p>
+The board is a table filled with hyperlinks. Cascading Style Sheets
+provide various themes and control the table aesthetic appearance.
+<br>The API <code>org.eclipse.swt.browser.Browser.setText(java.lang.String)</code> draws
+the board game from HTML generated in memory.
+<br>Player moves are captured by implementing the interface <code>org.eclipse.swt.browser.LocationListener</code>.
+e.g the player clicks on a cell that may generate a hyperlink with a URL similar to
+<code>http://www.org.eclipse.swt.examples.browser.demos/xx1yy2</code>. That hyperlink identifies
+the position of the cell selected by the player (column 1, row 2). The move is completed by generating
+new HTML content and invoking <code>Browser.setText</code> to update the board game.
+</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/org.eclipse.swt.examples.browser.demos/icons/pawn.gif b/examples/org.eclipse.swt.examples.browser.demos/icons/pawn.gif
new file mode 100644
index 0000000000..c811f8ba71
--- /dev/null
+++ b/examples/org.eclipse.swt.examples.browser.demos/icons/pawn.gif
diff --git a/examples/org.eclipse.swt.examples.browser.demos/icons/sample.gif b/examples/org.eclipse.swt.examples.browser.demos/icons/sample.gif
deleted file mode 100644
index 34fb3c9d8c..0000000000
--- a/examples/org.eclipse.swt.examples.browser.demos/icons/sample.gif
+++ /dev/null
diff --git a/examples/org.eclipse.swt.examples.browser.demos/plugin.xml b/examples/org.eclipse.swt.examples.browser.demos/plugin.xml
index 3ef59e5655..371ee25a6e 100644
--- a/examples/org.eclipse.swt.examples.browser.demos/plugin.xml
+++ b/examples/org.eclipse.swt.examples.browser.demos/plugin.xml
@@ -27,7 +27,7 @@
       <view
             allowMultiple="false"
             class="org.eclipse.swt.examples.browser.demos.views.BrowserDemoView"
-            icon="icons/sample.gif"
+            icon="icons/pawn.gif"
             category="org.eclipse.swt.examples.category"
             name="Browser Demo"
             id="org.eclipse.swt.examples.browser.demos.views.BrowserDemoView">