New theme button almost themed (error indicator missing). Includes SmartSprites syntax as well.

svn changeset:7597/svn branch:theme_2009_03

18 files changed, 471 insertions, 102 deletions

diff --git a/WebContent/ITMILL/themes/base/button/button.css b/WebContent/ITMILL/themes/base/button/button.css
index f7a3e6ae28..ce0e0d430f 100644
--- a/WebContent/ITMILL/themes/base/button/button.css
+++ b/WebContent/ITMILL/themes/base/button/button.css
@@ -3,6 +3,9 @@
 	white-space: nowrap;

 	margin: 0;

 }

+.i-button span {

+	white-space: nowrap;

+}

 .i-checkbox input {

 	vertical-align: middle;

 }

@@ -12,7 +15,8 @@
 	vertical-align: middle;

 	margin-right: 3px;

 }

-.i-button span, .i-checkbox label {

+.i-button span,

+.i-checkbox label {

 	vertical-align: middle;

 }

 .i-button-link {

@@ -37,22 +41,17 @@
 	padding-left: 1em;

 	background-position: left;

 }

-

-/* Fixes streched buttons in IE6 */

+/* Fixes streched buttons in IE6 and IE7*/

 .i-ie6 .i-button {

 	width: 1px;

-	overflow: visible;

-	padding-left: 1em;

-	padding-right: 1em;

 }

-

-/* Fixes streched buttons in IE7 */

-.i-ie7 .i-button {

+.i-ie6 .i-button,

+.i-ie7 .i-button,

+.i-ie8 .i-button {

 	overflow: visible;

 	padding-left: 1em;

 	padding-right: 1em;

 }

-

 /* Error indicator on checkbox fix for IE6 */

 .i-ie6 .i-checkbox * {

 	float: left;

@@ -65,34 +64,32 @@
 	padding-left: 0; 

 	padding-right: 0.4em;

 }

-

 /* Error indicator on checkbox fix for IE7 */

-.i-ie7 .i-checkbox * {

+.i-ie7 .i-checkbox *,

+.i-ie8 .i-checkbox * {

 	float: left;

 }

-.i-ie7 .i-checkbox .i-errorindicator {

+.i-ie7 .i-checkbox .i-errorindicator,

+.i-ie8 .i-checkbox .i-errorindicator {

 	background-position: right;

 	float: left;

 	padding-left: 0;

 	padding-right: 0.7em;

 }

-

 /* Error indicator on button fix for IE */

 .i-ie6 button .i-errorindicator,

-.i-ie7 button .i-errorindicator {

+.i-ie7 button .i-errorindicator,

+.i-ie8 button .i-errorindicator {

 	display: inline;

 	padding-right: 0.5em;

 }

-

-

 /* Disabled by default

 .i-checkbox-error {

 	background: #ffe0e0;

 }

 */

-

 /* Disabled by default

 .i-checkbox-required {

 	background: #ffe0e0;

 }

-*/

+*/
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/base/styles.css b/WebContent/ITMILL/themes/base/styles.css
index 5d059fb2b8..3a7f29ea22 100644
--- a/WebContent/ITMILL/themes/base/styles.css
+++ b/WebContent/ITMILL/themes/base/styles.css
@@ -40,6 +40,9 @@
 	white-space: nowrap;
 	margin: 0;
 }
+.i-button span {
+	white-space: nowrap;
+}
 .i-checkbox input {
 	vertical-align: middle;
 }
@@ -49,7 +52,8 @@
 	vertical-align: middle;
 	margin-right: 3px;
 }
-.i-button span, .i-checkbox label {
+.i-button span,
+.i-checkbox label {
 	vertical-align: middle;
 }
 .i-button-link {
@@ -74,22 +78,17 @@
 	padding-left: 1em;
 	background-position: left;
 }
-
-/* Fixes streched buttons in IE6 */
+/* Fixes streched buttons in IE6 and IE7*/
 .i-ie6 .i-button {
 	width: 1px;
-	overflow: visible;
-	padding-left: 1em;
-	padding-right: 1em;
 }
-
-/* Fixes streched buttons in IE7 */
-.i-ie7 .i-button {
+.i-ie6 .i-button,
+.i-ie7 .i-button,
+.i-ie8 .i-button {
 	overflow: visible;
 	padding-left: 1em;
 	padding-right: 1em;
 }
-
 /* Error indicator on checkbox fix for IE6 */
 .i-ie6 .i-checkbox * {
 	float: left;
@@ -102,32 +101,30 @@
 	padding-left: 0; 
 	padding-right: 0.4em;
 }
-
 /* Error indicator on checkbox fix for IE7 */
-.i-ie7 .i-checkbox * {
+.i-ie7 .i-checkbox *,
+.i-ie8 .i-checkbox * {
 	float: left;
 }
-.i-ie7 .i-checkbox .i-errorindicator {
+.i-ie7 .i-checkbox .i-errorindicator,
+.i-ie8 .i-checkbox .i-errorindicator {
 	background-position: right;
 	float: left;
 	padding-left: 0;
 	padding-right: 0.7em;
 }
-
 /* Error indicator on button fix for IE */
 .i-ie6 button .i-errorindicator,
-.i-ie7 button .i-errorindicator {
+.i-ie7 button .i-errorindicator,
+.i-ie8 button .i-errorindicator {
 	display: inline;
 	padding-right: 0.5em;
 }
-
-
 /* Disabled by default
 .i-checkbox-error {
 	background: #ffe0e0;
 }
 */
-
 /* Disabled by default
 .i-checkbox-required {
 	background: #ffe0e0;
@@ -1418,6 +1415,7 @@ div.i-tree-node-leaf {
 div.i-window-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
diff --git a/WebContent/ITMILL/themes/base/window/window.css b/WebContent/ITMILL/themes/base/window/window.css
index 3a9094dc4c..75bd915a7b 100644
--- a/WebContent/ITMILL/themes/base/window/window.css
+++ b/WebContent/ITMILL/themes/base/window/window.css
@@ -13,6 +13,7 @@
 div.i-window-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
diff --git a/WebContent/ITMILL/themes/default/common/common.css b/WebContent/ITMILL/themes/default/common/common.css
index 9629875244..a4e3f82612 100644
--- a/WebContent/ITMILL/themes/default/common/common.css
+++ b/WebContent/ITMILL/themes/default/common/common.css
@@ -14,6 +14,8 @@
 	background-position: 50%;
 }
 /* Global font styles */
+.i-window,
+.i-popupview-popup,
 .i-app input,
 .i-app select,
 .i-app button,
diff --git a/WebContent/ITMILL/themes/default/panel/panel.css b/WebContent/ITMILL/themes/default/panel/panel.css
index 47a2cbebaf..55b435a3eb 100644
--- a/WebContent/ITMILL/themes/default/panel/panel.css
+++ b/WebContent/ITMILL/themes/default/panel/panel.css
@@ -82,15 +82,18 @@
 	background: transparent;
 }
 .i-ie6 .i-panel-content,
-.i-ie7 .i-panel-content {
+.i-ie7 .i-panel-content,
+.i-ie8 .i-panel-content {
 	border-bottom: 1px solid #babfc0;
 }
 .i-ie6 .i-panel-content-light,
-.i-ie7 .i-panel-content-light {
+.i-ie7 .i-panel-content-light,
+.i-ie8 .i-panel-content-light {
 	border-bottom: none;
 }
 .i-ie6 .i-panel-deco,
-.i-ie7 .i-panel-deco {
+.i-ie7 .i-panel-deco,
+.i-ie8 .i-panel-deco {
 	height: 0;
 	overflow: hidden;
 }
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index c453d0ae46..4e262aa44b 100644
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -40,6 +40,9 @@
 	white-space: nowrap;
 	margin: 0;
 }
+.i-button span {
+	white-space: nowrap;
+}
 .i-checkbox input {
 	vertical-align: middle;
 }
@@ -49,7 +52,8 @@
 	vertical-align: middle;
 	margin-right: 3px;
 }
-.i-button span, .i-checkbox label {
+.i-button span,
+.i-checkbox label {
 	vertical-align: middle;
 }
 .i-button-link {
@@ -74,22 +78,17 @@
 	padding-left: 1em;
 	background-position: left;
 }
-
-/* Fixes streched buttons in IE6 */
+/* Fixes streched buttons in IE6 and IE7*/
 .i-ie6 .i-button {
 	width: 1px;
-	overflow: visible;
-	padding-left: 1em;
-	padding-right: 1em;
 }
-
-/* Fixes streched buttons in IE7 */
-.i-ie7 .i-button {
+.i-ie6 .i-button,
+.i-ie7 .i-button,
+.i-ie8 .i-button {
 	overflow: visible;
 	padding-left: 1em;
 	padding-right: 1em;
 }
-
 /* Error indicator on checkbox fix for IE6 */
 .i-ie6 .i-checkbox * {
 	float: left;
@@ -102,32 +101,30 @@
 	padding-left: 0; 
 	padding-right: 0.4em;
 }
-
 /* Error indicator on checkbox fix for IE7 */
-.i-ie7 .i-checkbox * {
+.i-ie7 .i-checkbox *,
+.i-ie8 .i-checkbox * {
 	float: left;
 }
-.i-ie7 .i-checkbox .i-errorindicator {
+.i-ie7 .i-checkbox .i-errorindicator,
+.i-ie8 .i-checkbox .i-errorindicator {
 	background-position: right;
 	float: left;
 	padding-left: 0;
 	padding-right: 0.7em;
 }
-
 /* Error indicator on button fix for IE */
 .i-ie6 button .i-errorindicator,
-.i-ie7 button .i-errorindicator {
+.i-ie7 button .i-errorindicator,
+.i-ie8 button .i-errorindicator {
 	display: inline;
 	padding-right: 0.5em;
 }
-
-
 /* Disabled by default
 .i-checkbox-error {
 	background: #ffe0e0;
 }
 */
-
 /* Disabled by default
 .i-checkbox-required {
 	background: #ffe0e0;
@@ -1418,6 +1415,7 @@ div.i-tree-node-leaf {
 div.i-window-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
@@ -1634,6 +1632,8 @@ div.i-window-header {
 	background-position: 50%;
 }
 /* Global font styles */
+.i-window,
+.i-popupview-popup,
 .i-app input,
 .i-app select,
 .i-app button,
@@ -2174,15 +2174,18 @@ div.i-window-header {
 	background: transparent;
 }
 .i-ie6 .i-panel-content,
-.i-ie7 .i-panel-content {
+.i-ie7 .i-panel-content,
+.i-ie8 .i-panel-content {
 	border-bottom: 1px solid #babfc0;
 }
 .i-ie6 .i-panel-content-light,
-.i-ie7 .i-panel-content-light {
+.i-ie7 .i-panel-content-light,
+.i-ie8 .i-panel-content-light {
 	border-bottom: none;
 }
 .i-ie6 .i-panel-deco,
-.i-ie7 .i-panel-deco {
+.i-ie7 .i-panel-deco,
+.i-ie8 .i-panel-deco {
 	height: 0;
 	overflow: hidden;
 }
@@ -2849,12 +2852,10 @@ div.i-window-header {
 	padding-top: 12px;
 }
 /* IE specific styles */
-.i-ie6 .i-tabsheet-tabs,
-.i-ie7 .i-tabsheet-tabs {
+.i-ie6 .i-tabsheet-tabs {
 	height: 46px;
 }
-.i-ie6 .i-tabsheet-tabitem-selected,
-.i-ie7 .i-tabsheet-tabitem-selected {
+.i-ie6 .i-tabsheet-tabitem-selected {
 	border: 1px solid #babfc0;
 	border-bottom: none;
 	background: #fff;
@@ -2864,24 +2865,26 @@ div.i-window-header {
 	cursor: default;
 	color: #ee5311;
 }
-.i-ie6 .i-tabsheet-tabitem-selected .i-caption,
-.i-ie7 .i-tabsheet-tabitem-selected .i-caption {
+.i-ie6 .i-tabsheet-tabitem-selected .i-caption {
 	background: transparent;
 	padding: 0;
 	margin: 0;
 }
 .i-ie6 .i-tabsheet-content,
-.i-ie7 .i-tabsheet-content {
+.i-ie7 .i-tabsheet-content,
+.i-ie8 .i-tabsheet-content {
 	border-bottom: none;
 }
 .i-ie6 .i-tabsheet-deco,
-.i-ie7 .i-tabsheet-deco {
+.i-ie7 .i-tabsheet-deco,
+.i-ie8 .i-tabsheet-deco {
 	height: 1px;
 	background: #babfc0;
 	overflow: hidden;
 	margin: 0;
 }
-.i-ie7 .i-tabsheet-deco {
+.i-ie7 .i-tabsheet-deco,
+.i-ie8 .i-tabsheet-deco {
 	width: 100%;
 }
 /* Light-style */
@@ -2995,7 +2998,8 @@ div.i-window-header {
 	padding: 9px 11px 0 11px;
 }
 .i-ie6 .i-tabsheet-deco-light,
-.i-ie6 .i-tabsheet-deco-light {
+.i-ie7 .i-tabsheet-deco-light,
+.i-ie8 .i-tabsheet-deco-light {
 	height: 0;
 }
 
diff --git a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
index 7ae7fd6d7a..3dd1f6ffec 100644
--- a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
+++ b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
@@ -117,12 +117,10 @@
 	padding-top: 12px;
 }
 /* IE specific styles */
-.i-ie6 .i-tabsheet-tabs,
-.i-ie7 .i-tabsheet-tabs {
+.i-ie6 .i-tabsheet-tabs {
 	height: 46px;
 }
-.i-ie6 .i-tabsheet-tabitem-selected,
-.i-ie7 .i-tabsheet-tabitem-selected {
+.i-ie6 .i-tabsheet-tabitem-selected {
 	border: 1px solid #babfc0;
 	border-bottom: none;
 	background: #fff;
@@ -132,24 +130,26 @@
 	cursor: default;
 	color: #ee5311;
 }
-.i-ie6 .i-tabsheet-tabitem-selected .i-caption,
-.i-ie7 .i-tabsheet-tabitem-selected .i-caption {
+.i-ie6 .i-tabsheet-tabitem-selected .i-caption {
 	background: transparent;
 	padding: 0;
 	margin: 0;
 }
 .i-ie6 .i-tabsheet-content,
-.i-ie7 .i-tabsheet-content {
+.i-ie7 .i-tabsheet-content,
+.i-ie8 .i-tabsheet-content {
 	border-bottom: none;
 }
 .i-ie6 .i-tabsheet-deco,
-.i-ie7 .i-tabsheet-deco {
+.i-ie7 .i-tabsheet-deco,
+.i-ie8 .i-tabsheet-deco {
 	height: 1px;
 	background: #babfc0;
 	overflow: hidden;
 	margin: 0;
 }
-.i-ie7 .i-tabsheet-deco {
+.i-ie7 .i-tabsheet-deco,
+.i-ie8 .i-tabsheet-deco {
 	width: 100%;
 }
 /* Light-style */
@@ -263,6 +263,7 @@
 	padding: 9px 11px 0 11px;
 }
 .i-ie6 .i-tabsheet-deco-light,
-.i-ie6 .i-tabsheet-deco-light {
+.i-ie7 .i-tabsheet-deco-light,
+.i-ie8 .i-tabsheet-deco-light {
 	height: 0;
 }
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/reindeer/button/button.css b/WebContent/ITMILL/themes/reindeer/button/button.css
index e69de29bb2..cef518e073 100644
--- a/WebContent/ITMILL/themes/reindeer/button/button.css
+++ b/WebContent/ITMILL/themes/reindeer/button/button.css
@@ -0,0 +1,139 @@
+/** sprite: buttons; sprite-image: url('img/buttons.png'); sprite-layout: vertical */
+
+/* IE6 gets native buttons, since it doesn't support the adjacent child selector (>) that is needed to position i-icon properly */
+div > .i-button,
+.i-ie7 .i-button,
+.i-ie8 .i-button {
+	height: 26px;
+	padding: 0 0 0 6px;
+	background-color: transparent;
+	background-repeat: none;
+	background-image: url(img/left.png); /** sprite-ref: buttons */
+	border: none;
+	cursor: default;
+}
+div > .i-button span,
+.i-ie7 .i-button span,
+.i-ie8 .i-button span {
+	display: inline-block;
+	height: 21px;
+	padding: 5px 15px 0 9px;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: right top;
+	background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
+	text-shadow: #fff 0 1px 0;
+	font-weight: bold;
+	float: none;
+	line-height: 16px;
+}
+.i-ie7 .i-button span,
+.i-ie8 .i-button span {
+	padding: 5px 15px 0 9px;
+	height: 21px;
+}
+.i-button:focus {
+	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
+	outline: none;
+}
+.i-button:focus span {
+	background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
+	outline: none;
+}
+.i-button:active {
+	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
+	outline: none;
+}
+.i-button:active span {
+	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
+	outline: none;
+}
+/* FF3 & FF2 */
+.i-button::-moz-focus-inner {
+	border: none;
+	padding: 0;
+}
+.i-ff2 .i-button span {
+	display: -moz-inline-box;
+}
+/* IE7 */
+.i-ie7 .i-button.i-pressed,
+.i-ie8 .i-button.i-pressed {
+	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
+}
+.i-ie7 .i-button.i-pressed span,
+.i-ie8 .i-button.i-pressed span {
+	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
+	position: relative;
+}
+.i-ie7 .i-button.i-pressed .i-icon,
+.i-ie8 .i-button.i-pressed .i-icon {
+	position: relative;
+	z-index: 2;
+}
+/* IE8 */
+/* TODO
+.i-ie8 .i-button:active {
+	background-position: 1px -39px;
+}
+.i-ie8 .i-button:active span {
+	position: relative;
+}
+*/
+/* Opera */
+.i-op .i-button:active span {
+	margin-top: -1px;
+	margin-left: -1px;
+}
+/* Modifications for buttons with icons */
+div > .i-button .i-icon,
+.i-ie7 .i-button .i-icon,
+.i-ie8 .i-button .i-icon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	overflow: hidden;
+	position: relative;
+	margin: 0 3px 0 0;
+}
+.i-ff2 .i-button .i-icon {
+	display: block;
+	float: left;
+	margin-top: 4px;
+}
+.i-ff2 .i-button-link .i-icon {
+	margin: 0;
+}
+.i-button .i-icon + span {
+	margin-left: -19px;
+	padding-left: 19px;
+}
+.i-ie7 .i-button .i-icon + span,
+.i-ie8 .i-button .i-icon + span {
+	margin-left: -23px;
+	padding-left: 23px;
+}
+/* Link style buttons */
+.i-button.i-button-link,
+.i-ie .i-button-link.i-pressed {
+	background: transparent;
+	height: auto;
+	padding: 0;
+	cursor: pointer;
+}
+.i-button.i-button-link span,
+.i-ie .i-button-link.i-pressed span {
+	background: transparent;
+	height: auto;
+	padding: 0;
+	display: inline;
+	font-weight: normal;
+	color: #1b699f;
+}
+.i-button.i-button-link .i-icon + span {
+	margin: 0;
+	padding: 0;
+}
+.i-button-link:focus {
+	outline: 1px dotted #1b699f;
+}
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/left-focus.png b/WebContent/ITMILL/themes/reindeer/button/img/left-focus.png
new file mode 100644
index 0000000000..636cf840c3
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/left-focus.png
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/left-pressed.png b/WebContent/ITMILL/themes/reindeer/button/img/left-pressed.png
new file mode 100644
index 0000000000..e70f56b84b
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/left-pressed.png
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/left.png b/WebContent/ITMILL/themes/reindeer/button/img/left.png
new file mode 100644
index 0000000000..c4209e8119
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/left.png
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/right-focus.png b/WebContent/ITMILL/themes/reindeer/button/img/right-focus.png
new file mode 100644
index 0000000000..dbb0677ac7
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/right-focus.png
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/right-pressed.png b/WebContent/ITMILL/themes/reindeer/button/img/right-pressed.png
new file mode 100644
index 0000000000..0a99111e60
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/right-pressed.png
diff --git a/WebContent/ITMILL/themes/reindeer/button/img/right.png b/WebContent/ITMILL/themes/reindeer/button/img/right.png
new file mode 100644
index 0000000000..e70a7be739
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/button/img/right.png
diff --git a/WebContent/ITMILL/themes/reindeer/common/common.css b/WebContent/ITMILL/themes/reindeer/common/common.css
new file mode 100644
index 0000000000..7d3e413978
--- /dev/null
+++ b/WebContent/ITMILL/themes/reindeer/common/common.css
@@ -0,0 +1,45 @@
+.i-generated-body,
+.i-app {
+	background: #f5f5f5;
+}
+/* Global font styles */
+.i-app,
+.i-window,
+.i-popupview-popup,
+.i-tooltip,
+.i-app input,
+.i-app select,
+.i-app button,
+.i-app textarea,
+.i-window input,
+.i-window select,
+.i-window button,
+.i-window textarea,
+.i-popupview-popup input,
+.i-popupview-popup select,
+.i-popupview-popup button,
+.i-popupview-popup textarea {
+	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+	font-size: 12px;
+	line-height: normal;
+	color: #222;
+}
+/* Fonts for Safari, exchange Helvetica for Arial */
+.i-sa .i-app,
+.i-sa .i-window,
+.i-sa .i-popupview-popup,
+.i-sa .i-tooltip,
+.i-sa .i-app input,
+.i-sa .i-app select,
+.i-sa .i-app button,
+.i-sa .i-app textarea,
+.i-sa .i-window input,
+.i-sa .i-window select,
+.i-sa .i-window button,
+.i-sa .i-window textarea,
+.i-sa .i-popupview-popup input,
+.i-sa .i-popupview-popup select,
+.i-sa .i-popupview-popup button,
+.i-sa .i-popupview-popup textarea {
+	font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
+}
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/reindeer/styles.css b/WebContent/ITMILL/themes/reindeer/styles.css
index b759ebdd20..1906b69143 100644
--- a/WebContent/ITMILL/themes/reindeer/styles.css
+++ b/WebContent/ITMILL/themes/reindeer/styles.css
@@ -40,6 +40,9 @@
 	white-space: nowrap;
 	margin: 0;
 }
+.i-button span {
+	white-space: nowrap;
+}
 .i-checkbox input {
 	vertical-align: middle;
 }
@@ -49,7 +52,8 @@
 	vertical-align: middle;
 	margin-right: 3px;
 }
-.i-button span, .i-checkbox label {
+.i-button span,
+.i-checkbox label {
 	vertical-align: middle;
 }
 .i-button-link {
@@ -74,22 +78,17 @@
 	padding-left: 1em;
 	background-position: left;
 }
-
-/* Fixes streched buttons in IE6 */
+/* Fixes streched buttons in IE6 and IE7*/
 .i-ie6 .i-button {
 	width: 1px;
-	overflow: visible;
-	padding-left: 1em;
-	padding-right: 1em;
 }
-
-/* Fixes streched buttons in IE7 */
-.i-ie7 .i-button {
+.i-ie6 .i-button,
+.i-ie7 .i-button,
+.i-ie8 .i-button {
 	overflow: visible;
 	padding-left: 1em;
 	padding-right: 1em;
 }
-
 /* Error indicator on checkbox fix for IE6 */
 .i-ie6 .i-checkbox * {
 	float: left;
@@ -102,32 +101,30 @@
 	padding-left: 0; 
 	padding-right: 0.4em;
 }
-
 /* Error indicator on checkbox fix for IE7 */
-.i-ie7 .i-checkbox * {
+.i-ie7 .i-checkbox *,
+.i-ie8 .i-checkbox * {
 	float: left;
 }
-.i-ie7 .i-checkbox .i-errorindicator {
+.i-ie7 .i-checkbox .i-errorindicator,
+.i-ie8 .i-checkbox .i-errorindicator {
 	background-position: right;
 	float: left;
 	padding-left: 0;
 	padding-right: 0.7em;
 }
-
 /* Error indicator on button fix for IE */
 .i-ie6 button .i-errorindicator,
-.i-ie7 button .i-errorindicator {
+.i-ie7 button .i-errorindicator,
+.i-ie8 button .i-errorindicator {
 	display: inline;
 	padding-right: 0.5em;
 }
-
-
 /* Disabled by default
 .i-checkbox-error {
 	background: #ffe0e0;
 }
 */
-
 /* Disabled by default
 .i-checkbox-required {
 	background: #ffe0e0;
@@ -1418,6 +1415,7 @@ div.i-tree-node-leaf {
 div.i-window-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
@@ -1555,3 +1553,182 @@ div.i-window-header {
 /* Automatically compiled css file from subdirectories. */
 
 /* ./WebContent/ITMILL/themes/reindeer/button/button.css */
+/* IE6 gets native buttons, since it doesn't support the adjacent child selector (>) that is needed to position i-icon properly */
+div > .i-button,
+.i-ie7 .i-button,
+.i-ie8 .i-button {
+	height: 26px;
+	padding: 0 0 0 6px; /* Left side padding width the same amount as left.png  */
+	background: transparent url(button/img/left.png) no-repeat;
+	border: none;
+	cursor: default;
+}
+div > .i-button span,
+.i-ie7 .i-button span,
+.i-ie8 .i-button span {
+	display: inline-block;
+	height: 21px;
+	padding: 5px 15px 0 9px;
+	background: transparent url(button/img/right.png) no-repeat right top;
+	text-shadow: #fff 0 1px 0;
+	font-weight: bold;
+	float: none;
+	line-height: 16px;
+}
+.i-ie7 .i-button span,
+.i-ie8 .i-button span {
+	padding: 5px 15px 0 9px;
+	height: 21px;
+}
+.i-button:focus {
+	background-image: url(button/img/left-focus.png);
+	outline: none;
+}
+.i-button:focus span {
+	background-image: url(button/img/right-focus.png);
+	outline: none;
+}
+.i-button:active {
+	background-image: url(button/img/left-pressed.png);
+	outline: none;
+}
+.i-button:active span {
+	background-image: url(button/img/right-pressed.png);
+	outline: none;
+}
+/* FF3 & FF2 */
+.i-button::-moz-focus-inner {
+	border: none;
+	padding: 0;
+}
+.i-ff2 .i-button span {
+	display: -moz-inline-box;
+}
+/* IE7 */
+.i-ie7 .i-button.i-pressed,
+.i-ie8 .i-button.i-pressed {
+	background-image: url(button/img/left-pressed.png);
+}
+.i-ie7 .i-button.i-pressed span,
+.i-ie8 .i-button.i-pressed span {
+	background-image: url(button/img/right-pressed.png);
+	position: relative;
+}
+.i-ie7 .i-button.i-pressed .i-icon,
+.i-ie8 .i-button.i-pressed .i-icon {
+	position: relative;
+	z-index: 2;
+}
+/* IE8 */
+/* TODO
+.i-ie8 .i-button:active {
+	background-position: 1px -39px;
+}
+.i-ie8 .i-button:active span {
+	position: relative;
+}
+*/
+/* Opera */
+.i-op .i-button:active span {
+	margin-top: -1px;
+	margin-left: -1px;
+}
+/* Modifications for buttons with icons */
+div > .i-button .i-icon,
+.i-ie7 .i-button .i-icon,
+.i-ie8 .i-button .i-icon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	overflow: hidden;
+	position: relative;
+	margin: 0 3px 0 0;
+}
+.i-ff2 .i-button .i-icon {
+	display: block;
+	float: left;
+	margin-top: 4px;
+}
+.i-ff2 .i-button-link .i-icon {
+	margin: 0;
+}
+.i-button .i-icon + span {
+	margin-left: -19px;
+	padding-left: 19px;
+}
+.i-ie7 .i-button .i-icon + span,
+.i-ie8 .i-button .i-icon + span {
+	margin-left: -23px;
+	padding-left: 23px;
+}
+/* Link style buttons */
+.i-button.i-button-link,
+.i-ie .i-button-link.i-pressed {
+	background: transparent;
+	height: auto;
+	padding: 0;
+	cursor: pointer;
+}
+.i-button.i-button-link span,
+.i-ie .i-button-link.i-pressed span {
+	background: transparent;
+	height: auto;
+	padding: 0;
+	display: inline;
+	font-weight: normal;
+	color: #1b699f;
+}
+.i-button.i-button-link .i-icon + span {
+	margin: 0;
+	padding: 0;
+}
+.i-button-link:focus {
+	outline: 1px dotted #1b699f;
+}
+
+/* ./WebContent/ITMILL/themes/reindeer/common/common.css */
+.i-generated-body,
+.i-app {
+	background: #f5f5f5;
+}
+/* Global font styles */
+.i-app,
+.i-window,
+.i-popupview-popup,
+.i-tooltip,
+.i-app input,
+.i-app select,
+.i-app button,
+.i-app textarea,
+.i-window input,
+.i-window select,
+.i-window button,
+.i-window textarea,
+.i-popupview-popup input,
+.i-popupview-popup select,
+.i-popupview-popup button,
+.i-popupview-popup textarea {
+	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+	font-size: 12px;
+	line-height: normal;
+	color: #222;
+}
+/* Fonts for Safari, exchange Helvetica for Arial */
+.i-sa .i-app,
+.i-sa .i-window,
+.i-sa .i-popupview-popup,
+.i-sa .i-tooltip,
+.i-sa .i-app input,
+.i-sa .i-app select,
+.i-sa .i-app button,
+.i-sa .i-app textarea,
+.i-sa .i-window input,
+.i-sa .i-window select,
+.i-sa .i-window button,
+.i-sa .i-window textarea,
+.i-sa .i-popupview-popup input,
+.i-sa .i-popupview-popup select,
+.i-sa .i-popupview-popup button,
+.i-sa .i-popupview-popup textarea {
+	font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
+}
diff --git a/WebContent/ITMILL/themes/sampler/sampler/styles.css b/WebContent/ITMILL/themes/sampler/sampler/styles.css
index 8e68b5f97e..6e6144d639 100644
--- a/WebContent/ITMILL/themes/sampler/sampler/styles.css
+++ b/WebContent/ITMILL/themes/sampler/sampler/styles.css
@@ -143,13 +143,14 @@
 	display: block;
 	height: 24px;
 	background-repeat: no-repeat;
-	background-position: 50% 40%;
+	background-position: 50% 30%;
 }
 .i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch span {
 	background-image: url(tree.png);
 }
 .i-app-SamplerApplication .i-horizontallayout-segment .i-popupview span {
 	background-image: url(magnifier.png);
+	background-position: 50% 40%;
 }
 .i-app-SamplerApplication .i-horizontallayout-segment .i-button-previous span {
 	background-image: url(prev.png);
@@ -303,8 +304,9 @@
 	text-shadow: 0 1px 0 #272a2b;
 	background: transparent url(info-bubble-top.png);
 	margin: 0;
-	padding-bottom: 10px;
+	padding-bottom: 12px;
 	padding-left: 28px;
+	padding-top: 15px;
 }
 .i-app-SamplerApplication .feature-info .i-panel-content {
 	background: transparent url(info-bubble-top.png) no-repeat 0 -44px;
diff --git a/WebContent/ITMILL/themes/sampler/styles.css b/WebContent/ITMILL/themes/sampler/styles.css
index bcd1cfab44..2707893d3d 100644
--- a/WebContent/ITMILL/themes/sampler/styles.css
+++ b/WebContent/ITMILL/themes/sampler/styles.css
@@ -1,4 +1,4 @@
-@import url(../default/styles.css);
+@import url(../reindeer/styles.css);
 
 @import url(sampler/styles.css);