Bare-bones theme (native style) started; cleanups, improvements.

Note: table still missing completely.

svn changeset:123/svn branch:toolkit

3 files changed, 258 insertions, 832 deletions

diff --git a/WebContent/themes/default/calendar-default.css b/WebContent/themes/default/calendar-default.css
index d018ff7fac..c766d64ee2 100644
--- a/WebContent/themes/default/calendar-default.css
+++ b/WebContent/themes/default/calendar-default.css
@@ -28,7 +28,6 @@ div.calendar { position: relative; }
   font-weight: bold;      /* Pressing it will take you to the current date */
   text-align: center;
   background: #fff;
-  background-image: url('img/bg1.gif');
   background-repeat: repeat-x;  color: #000;
   padding: 2px;
 }
diff --git a/WebContent/themes/default/theme.css b/WebContent/themes/default/theme.css
index 985efac13b..e63affa8c2 100644
--- a/WebContent/themes/default/theme.css
+++ b/WebContent/themes/default/theme.css
@@ -1,803 +1,225 @@
-/**
-* Various styles for debug mode
-*/
-.uidl {
-	z-index: 1001;
-	text-indent: 18px;
-	border: 1px dashed red;
-	font-weight: normal;
-	white-space: nowrap;
-	cursor: hand;
-	cursor: pointer;
-}
-
-.minimized {
-	overflow: hidden;
-	width: 5px;
-	height: 5px;
-	z-index: 1000;
-	float: left;
-}
-
-
-
-/**
-* Common attribute classes
-*/
-.abs { position: absolute; }
-.right { float: right; }
-.nobr {	white-space: nowrap; }
-.inline { display: inline; }
-.hidden { display: none; }
-.pad {
-    padding: 3px 7px 3px 10px;
-}
-.padnr {
-    padding: 4px 0 4px 10px;	
-}
-
-/**
-* Background used in various headers
-*/
-.bg {
-    background-image: url(img/bg1.gif);
-    background-repeat: repeat-x; 
-    background-color: white;    
-}
-
-
-
-
-
-
-
-
-
-
-
-.disabled {
-    color: #999999;
-    opacity: 0.5;
-    filter: alpha(opacity=50);
-}
-.disabled .caption {
-    color: #999999;
-}
-.disabled .border .caption {
-    color:#999999;
-}
-.disabled * {
-    color:#999999;
-}
-
-.caption {
-    font-weight:bold;
-    color: black;
-    white-space:nowrap;
-    /*height: 16px;*/
-}
-.caption .error {
-	/*width: 16px;
-	height: 16px;*/	
-	padding-left:5px;
-}
-
-.content {
-	padding:5px;
-}
-
-.clickable {
-    cursor:hand;
-    cursor:pointer;
-}
-
-
-/*.over {
-	border: 1px solid #eeeeee;
-}
-.over .border {
- 	border: 1px solid #9999ee;
-	margin-left:-1px;
-}*/
-
-/*
-.over.outset {
- 	border: 1px solid #eeeeee !important;
- 	border: inherit;
-}*/
-
-.border {
-    border: 1px solid #aaaaaa;
-}
-
-.border.error {
-    border-color: #ee6666;
-}
-
-IMG.overlay {
-	position: absolute;
-	z-index: 5;
-}
-IMG.error {
-	width: 11px;
-	height: 16px;
-}
-
-.inset {
-    border-top: 2px solid #eeeeee;
-    border-left: 2px solid #eeeeee;
-}
-
-.outset {
-    border-bottom: 2px solid #eeeeee;
-    border-right: 2px solid #eeeeee;
-}
-
-.odd {
-    background-color:#f1f1f1;
-}
-
-
-.selectable {
-    color:white;
-	background:#0075d9;
-}
-.selected {
-	background-color:#c6e5fa;
-}
-
-/* Popup */
-.popup {
-	font-weight: normal;
-	position: absolute;
-	z-index: 10000;
-	background: #f5f5fa;
-}
-.popup TD {
-	padding: 0px;
-	border: 0px;
-	margin: 0px;
-}
-.popup .icon {
-	vertical-align: middle;
-	display: inline;
-	/*width: auto;
-	height: auto;*/
-}
-.popup .error {
-	border: 1px solid red;
-}
-.popup.hide {
-	display: none;
-}/*
-.popup.hide .border {
-	display: inline;
-	border: none;
-}
-.popup.hide .icon {
-	display: inline;
-	/*width: 16px;
-	height: 16px;
-}
-.popup.hide .content {
-	display: none;
-}
-.popup.hide .error {
-	display: none;
-}*/
-
-
-
-.item {
-	border: 1px solid #e9e9ef;
-	border-top: 1px solid white;
-	white-space: nowrap;
-}
-.item.over {
-	border: 1px solid #9999ee;
-	background-color: white;
-    background-image: url('img/bg1.gif');
-    background-repeat: repeat-x;   
-}
-.item .icon {
-	width:16px;
-	height:16px;
-}
-
-
-
-
-
-/**
-* Icons
-*/
-
-.icon {
-	vertical-align:bottom;
-	width:32px;
-	height:32px;
-}
-.icon-mini {
-	width:14px;
-	height:11px;
-	display:-moz-inline-box;
-	display:inline-block;
-	vertical-align:top;
-}
-.icon.error {
-	background:url(img/icon/error.gif) no-repeat top right;
-}
-.icon-mini.error {
-	background:url(img/icon/error-mini.gif) no-repeat;
-}
-.icon.info {
-	background:url(img/icon/info.gif) no-repeat;
-}
-.icon-mini.info {
-	background:url(img/icon/info-mini.gif) no-repeat top right;
-}
-
-
-/* COMPONENTS */
-
-
-/**
-* Layouts
-*/
-.gridlayout TABLE TD {
-	text-align: left;
-	vertical-align: top;
-}
-
-.orderedlayout TABLE {
-	/* TODO works in FF not IE */
-	Xwidth: 100%;
-}
-
-
-/**
-* Button
-*/
-
-/* Button-style */
-.button {
-	margin-left:-5px;
-}
-.button .icon-mini {
-	padding-left:5px;
-}
-.btn {
-	float:left;
-	padding:5px 12px 0 0;
-	height:23px;
-	color:#fff;
-	background:url(img/button/btn-bg.gif) repeat-x;
-}
-
-.over .btn {
-	background:url(img/button/btn-bg.gif) repeat-x bottom left;
-	border:none;
-}
-.btn-left, .btn-right {
-	width:16px;
-	height:28px;
-	float:left;
-	background:url(img/button/btn-left.gif) no-repeat;
-}
-.btn-right {
-	background:url(img/button/btn-right.gif) no-repeat;
-}
-.over .btn-left {
-	background:url(img/button/btn-left.gif) no-repeat bottom left;
-}
-.over .btn-right {
-	background:url(img/button/btn-right.gif) no-repeat bottom left;
-}
-.btn .caption {
-	color:#fff;
-}
-.btn .popup, .btn .popup .caption {
-	color:#494949;
-}
-.button.over {
-	border:none;
-}
-.button.over .btn .caption {
-	color:#fff;
-}
-
-/* Link-style */
-.button-link .caption {
-	color:#6db201;
-	text-decoration:underline;
-}
-.button-link.over .caption {
-	color:#2a7acc;
-}
-.button-link .popup, .button-link .popup .caption, .button-link.over .caption .popup .content {
-	color:#494949;
-	text-decoration:none;
-}
-
-
-
-/**
-* Link
-*/
-.link {
-    
-}
-.link.over {
-	background:none;
-}
-.link .caption {
-    color:#6db201;
-	text-decoration:underline;
-}
-.link.over .caption {
-	color:#2a7acc;
-}
-.link .description {
-    font-size:0.9em;
-}
-.link .popup .caption, .link .popup .content  {
-    color:#494949;
-	text-decoration:none;
-}
-
-
-
-
-/**
-* Tabsheet
-*/
-/*
-.tabs {
-	padding-left: 0px !important;
-    padding-left: 1px;
-    padding-top: 5px;
-    padding-bottom: 3px !important;   
-    padding-bottom: 2px;
-    white-space: nowrap;
-}
-.tab, .tab-on {
-   border-right: 2px solid #eeeeee;
-   border-bottom: none;
-}
-.tab-on {
-    position: relative;
-    top: 1px;
-}
-.tab .caption {
-    background-image: url('img/bg1.gif');
-    background-repeat: repeat-x;        
-    border-bottom: none;
-}
-.tab .over {
-    /*border: 1px solid #9999ee;
-    border-bottom: none;
-}
-.tab-on .caption {
-    border-bottom: 1px solid white;
-    border-bottom: none;
-    background-color: white;
-}
-*/
-
-
-.node {
-    border: 1px solid white;
-    white-space: nowrap;
-    padding-bottom: 2px;
-}
-.nodes {
-    padding-left: 16px;
-}
-.node .caption {
-    vertical-align: top;
-    font-weight: normal;
-}
-
-.node.over {
-    /*border: 1px solid #9999ee;
-    background-image: url('img/bg1.gif');
-    background-repeat: repeat-x;
-    background-color: white;*/
-}
-.node.over .caption {
-    /*color: blue;*/
-}
-.node .icon {
-	width:16px;
-	height:16px;
-}
-
-/**
-* Panel
-*/
-
-/* Normal style */
-.panel {
-	margin:14px 9px 14px 0;
-}
-.panel .top {
-	height:35px;
-}
-.panel .top .left {
-	background:transparent url(img/panel/top-left.gif) no-repeat;
-	margin-right:19px;
-	height:35px;
-}
-.panel .top .right {
-	background:transparent url(img/panel/top-right.gif) no-repeat right top;
-	margin-left:-19px;
-	width:19px;
-	height:35px;
-	float:right;
-	display:inline;
-}
-.panel .middle {
-	background:#f8f8f8 url(img/panel/middle.gif) repeat-x;
-	border-left:solid 2px #ededed;
-	border-right:solid 2px #ededed;
-	padding:12px 19px 12px 19px;
-	overflow:auto;
-}
-.panel .bottom {
-	height:21px;	
-}
-.panel .bottom .left {
-	background:url(img/panel/bottom-left.gif) no-repeat;
-	margin-right:19px;
-	height:21px;
-	
-}
-.panel .bottom .right {
-	background:url(img/panel/bottom-right.gif) no-repeat right top;
-	width:19px;
-	height:21px;
-	float:right;
-}
-/* FIX IE6 (5.5) leaves a four pixel gap between left and right div's */
-* html .panel .bottom .right {
-	position:relative;
-	left:-4px;
-}
-.panel .top .left .title {	
-	padding:8px 19px 3px 19px;
-	height:22px;
-	margin-right:-19px;
-	border-bottom:solid 1px #dedede;
-}
-.panel .top .left .title .caption {
-	font-family:'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
-	color:#0076c9;
-	font-style:italic;
-	font-weight:bold;
-	font-size:12pt;
-	letter-spacing:-0.04em;
-	white-space:nowrap;
-}
-
-
-/* Light style */
-.panel-light {
-    margin:20px 9px 20px 0;
-}
-.panel-light .top {
-	height:31px;
-	overflow:hidden;
-}
-.panel-light .top .left {
-	background:transparent url(img/panel/top-left-light.gif) no-repeat;
-	margin-right:19px;
-	height:31px;
-}
-.panel-light .top .right {
-	background:transparent url(img/panel/top-right-light.gif) no-repeat right top;
-	margin-left:-19px;
-	width:19px;
-	height:31px;
-	float:right;
-	display:inline;
-}
-.panel-light .middle {
-	background:#fff url(img/panel/middle-light.gif) repeat-x;
-	padding:12px 19px 12px 19px;
-	overflow:auto;
-}
-.panel-light .top .left .title {	
-	padding:5px 19px 3px 19px;
-	height:18px;	
-}
-.panel-light .top .left .title .caption {
-	font-family:'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
-	color:#0076c9;
-	font-style:italic;
-	font-weight:bold;
-	font-size:11pt;
-	letter-spacing:-0.04em;
-	white-space:nowrap;
-}
-
-/* Description popup fixes */
-.panel .title .caption .popup .caption, .panel .title .caption .popup .caption {
-	font-family:Tahoma, Arial, Helvetica, sans-serif;
-	font-style:normal;
-	font-size:8pt;
-	color:#494949;
-}
-
-
-
-
-
-/*
-.textfield.over .border {    
-    border: 1px solid #9999ee;
-}
-*/
-.textfield INPUT {
-    border: none;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-
-
-
-/* 
-* Table
- */
-
-/* Renewed theme styles, 8.6.2006 - Jouni Koivuviita */
-.table {
-	margin:14px 10px 14px 0;
-	color:#494949;
-}
-.table .header {
-	height:25px;
-	overflow:hidden;
-	position:relative;
-	top:3px;
-	z-index:1;
-}
-.table .header .left {
-	width:20px;
-	height:25px;
-	float:left;
-	background:url(img/table/caption-left.gif) no-repeat;
-}
-.table .header .title {
-	height:25px;
-	float:left;
-	background:url(img/table/caption-bg.gif) repeat-x;
-	padding-right:20px;
-}
-.table .header .right {
-	width:20px;
-	height:25px;
-	float:left;
-	background:url(img/table/caption-right.gif) no-repeat;
-}
-.table .header .title {
-	padding-top:7px;
-	color:#fff;
-}
-.table .top {
-	height:3px;
-	overflow:hidden;
-}
-.table .top .left {
-	background:url(img/table/top-left.gif) no-repeat;
-	margin-right:4px;
-	height:3px;	
-}
-.table .top .right {
-	background:url(img/table/top-right.gif) no-repeat right top;
-	width:4px;
-	height:3px;
-	float:right;
-}
-
-.table .middle {
-	background-color:#f8f8f8;
-	border-left:solid 3px #f1f1f1;
-	border-right:solid 3px #f1f1f1;
-	color:#494949;
-}
-.table .bottom {
-	height:3px;	
-}
-.table .bottom .left {
-	background:url(img/table/bottom-left.gif) no-repeat;
-	margin-right:4px;
-	height:3px;
-	
-}
-.table .bottom .right {
-	background:url(img/table/bottom-right.gif) no-repeat right top;
-	width:4px;
-	height:3px;
-	float:right;
-}
-.table .header .title .caption {
-	color:#fff;
-}
-.table .col-headers {
-	background:#f4f4f4 url(img/table/col-header-bg.gif) repeat-x;
-	color:#0076c9;
-}
-
-
-/* Old table styles */
-.list .bg {
-	background-image: none;
-}
-.list .cheader {
-	border-width: 1px 1px 1px 1px;
-}
-.list .content TABLE {
-	width: 100%;
-}
-.list .nav {
-    border-top: 2px solid #eeeeee;
-    text-align: center;
-    font-size: smaller;
-}
-.list .nav .small {
-    font-size: smaller;
-}
-.list .content TR.over {
-    background-image: url('img/bg1.gif');
-    background-repeat: repeat-x;
-    background-color: white;
-}
-.list .content TD.scroll {
-	background: white;
-}
-.list .content TD.scroll {
-	background: white;
-}
-.table .content {
-	padding: 0px;
-}
-.table .content TABLE {
-    border-collapse: collapse;
-    empty-cells: show;
-    width: 100%;
-}
-.table .content TD {
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 3px;
-    padding-bottom: 3px;    
-    border-left: 1px solid #eeeeee;
-    border-bottom: 1px solid #eeeeee;
-}
-
-.table .cheader {
-	border-bottom-color: #999999;
-	border-left: 1px solid #cdcdcd;
-	padding-top: 5px;
-	padding-bottom: 5px;
-	vertical-align: middle;
-}
-.table .cheader.over {
-	border-color: #9999ee;
-	padding-bottom: 4px;
-}
-.table .cheader.sorted {
-	border-color: #9999ee;
-	padding-bottom: 4px;
-}
-.table .rheader {
-   text-align: right;
-   border-right-color: #999999;  
-   border-left: none;
-}
-.table .selected .rheader {
-	background-color: white;
-}
-.table .empty {
-   border-bottom-color: #999999;
-   border-right-color: #999999;
-}
-.table .nav {
-    border-top: 2px solid #eeeeee;
-    text-align: center;
-    font-size: smaller;
-}
-.table .nav .small {
-    font-size: smaller;
-}
-.table .content TR.over {
-    background-image: url(img/bg1.gif);
-    background-repeat: repeat-x;
-    background-color: white;
-}
-.table .content TR.over TD {
-    border-bottom: 1px solid #9999ee;
-}
-
-.table .content TD.scroll {
-	padding: 0px;
-	border: none;
-	width: 16px;
-	height: 100%;
-}
-.table .content TD.cheader.scroll {
-	border-left: 1px solid #999999;
-	border-bottom: 1px solid #999999;
-	width: 16px;
-}
-.table DIV.scroll {
-	width: 16px;
-	border-left: 1px solid #eeeeee;
-	/*overflow: scroll;*/
-	height: 100%;
-}
-td.header {
-	background: url(img/bg1.gif);
-	background-repeat: repeat-x;
-}
-.table .icon {
-	width:16px;
-	height:16px;
-	background:url(img/table/col-header-bg.gif) repeat-x;
-}
-
-
-/**
-* General HTML-tag styles
-* Added 6.6.2006
-* Jouni Koivuviita
-**/
-
-body {
-	margin:0;
-	padding:20px;
-	background: url(img/body_bg.gif) repeat-x #fff;
-	color:#494949;
-	font-family:Tahoma, Arial, Helvetica, sans-serif;
-	font-size:62.5%;
-}
-td {
-	font-size:8pt;
-}
-p {
-	font-size:1em;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	font-family: "Trebuchet MS", sans-serif;
-	color:#494949;
-	letter-spacing:-0.03em;
-}
-h1 {
-	font-size: 18pt;
-	text-transform:uppercase;
-	margin:1em 0 0.6em 0;
-}
-h2 {
-	font-size:17pt;
-	font-weight:normal;	
-	color:#0076c9;
-	margin:0.8em 0 0.5em 0;
-}
-h3 {
-	font-size: 14pt;
-	margin:0.6em 0 0.4em 0;
-}
-h4 {
-	font-size:12.4pt;
-	font-style:italic;
-	color:#0076c9;
-	margin:0.4em 0 0.3em 0;
-}
-h5 {
-	font-size:10pt;
-	margin:0.3em 0 0.2em 0;
-}
\ No newline at end of file
+/* Debug styles */

+.uidl {

+	position: absolute;

+	z-index: 1001;

+	text-indent: 18px;

+	background-color: white;

+	background-image: url('img/debug.gif');

+	background-repeat: no-repeat;

+	background-position: 1 1;

+	font-weight: normal;

+	white-space: nowrap;

+}

+.minimized {

+	overflow: hidden;

+	width: 18px;

+	height: 18px;

+	z-index: 1000;

+}

+

+/* General styles */

+

+* {

+    background-color: ThreeDFace;

+    font-family: sans-serif;

+    Xfont-size: 10pt;

+    font-weight: normal;

+}

+

+.inline {

+    display: inline;

+}

+

+.hidden {

+    display: none;

+}

+

+.border {

+    background-color: ButtonFace;

+    border-width: 1px;

+    border-style: solid;

+    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;    

+}

+

+.outset {

+	border: 1px solid ButtonFace;

+}

+/* DISABLED */

+.disabled {

+    color: GrayText;

+    opacity: 0.5;

+    filter: alpha(opacity=50);

+}

+.disabled .caption {

+    color: GrayText;

+}

+.disabled .border .caption {

+    color: GrayText;

+}

+INPUT, SELECT, SELECT OPTION, TEXTAREA {

+	background-color: ThreeDHighlight;

+}

+.disabled INPUT, .disabled SELECT, .disabled SELECT OPTION {

+	background-color: ThreeDFace;

+}

+

+/* CAPTION */

+.caption {

+    color: ButtonText;

+}

+.caption .icon {

+	width: 1em;

+	height: 1em;	

+	vertical-align: middle;

+	padding-right: 5px;

+}

+

+.clickable {

+    cursor: hand;

+    cursor: pointer;

+}

+

+.over {

+	border: 1px solid ThreeDDarkShadow;

+}

+.over .caption {

+ 	color: ActiveCaption;

+}

+

+.selected {

+	font-weight: bold;

+	background: #aaaaaa;

+}

+

+.content {

+    padding: 7px;

+}

+

+/* TOOLTIP */

+IMG.overlay {

+	position: absolute;

+	z-index: 5;

+}

+.popup {

+	position: absolute;

+	z-index: 99999;

+	overflow: hidden;

+}

+.popup.hide {

+	display: none;

+}

+.popup .border {

+	border: 1px solid InfoText;

+	background-color: InfoBackground;

+}

+.popup .caption {

+	text-align: left;

+}

+.popup * {

+	white-space: nowrap;

+	color: InfoText;

+	background-color: InfoBackground;

+}

+.popup .error {

+	font-size: 0.9em;

+}

+

+/* COMPONENTS */

+

+/* Button */

+.button .border {

+	height: 1.2em;

+	overflow: hidden;

+	padding: 0.2em 0.4em 0.2em 0.4em;

+	text-align: center;

+}

+

+.button-link .caption {

+	color: ActiveCaption;

+	font-style: italic;

+}

+.button-link .over {

+	border: none;

+}

+.button-link .over .caption {

+	text-decoration: underline;

+}

+

+/* DateField */

+.datefield .btn {

+	background-color: ButtonFace;

+	margin-right: 3px;

+}

+

+/* Link */

+.link .caption {

+	color: ActiveCaption;

+	font-style: italic;

+}

+.link .over {

+	border: none;

+}

+.link .over .caption {

+	text-decoration: underline;

+}

+.link .description {

+	font-size: 0.8em;

+	text-indent: 1.5em;

+}

+

+/* Panel */

+.panelcaption {

+	padding: 0.2em 0.4em 0.2em 0.4em;

+}

+.panel .panelcaption {

+	border-bottom: 2px groove ButtonShadow;

+	color: CaptionText;

+	background-color: ActiveCaption;

+}

+.panel-light .borderlight {

+	border: 2px groove ThreeDHighlight;

+}

+

+/* Select */

+.select-optiongroup INPUT.option {

+	background-color: ThreeDFace;

+}

+.select-optiongroup DIV.newitem {

+	margin-left: 1.2em;

+	margin-top: 0.3em;

+}

+

+/* TabSheet */

+.tabsheet .tabs {

+	margin-top: 0.5em;

+}

+.tabsheet .tabs .tab .caption, .tabsheet .tabs .tab-on .caption {

+	margin-left: 1px;

+	margin-right: 1px;

+	padding: 0.2em 0.4em 0.1em 0.4em;

+}

+.tabsheet .tabs .tab .border {

+	border-bottom: 1px solid ThreeDHighlight;

+}

+.tabsheet .tabs .tab-on .border {

+	border-bottom: 1px solid ThreeDFace;

+}

+.tabsheet .tabs .over {

+	border: none;

+}

+.tabsheet .tabs .over .border {

+	border-bottom: 1px solid ThreeDFace;

+}

+

+

+/* TextField */

+.textfield {

+	margin-top: 0.05em;

+}

+.textfield .border {

+	border: none;

+}

+.textfield INPUT {

+	font-size: 1em;

+	padding: 0.12em 0.4em 0.12em 0.4em;

+}

diff --git a/WebContent/themes/default/theme.js b/WebContent/themes/default/theme.js
index 3b0ea0a1cf..6ac94987df 100644
--- a/WebContent/themes/default/theme.js
+++ b/WebContent/themes/default/theme.js
@@ -791,9 +791,12 @@ DefaultTheme.prototype.showPopup = function(client,popup, x, y, delay, defWidth)
 		this.hidePopup();

 	} 

 	this.popup = popup;

+/*	THIS CODE IS NOT NEEDED IF WE CAN POSITION THE POPUP BEFOREHAND

+

 	popup.style.left = 0+"px";

 	popup.style.top = 0+"px";

 	this.removeCSSClass(popup,"hide");

+

     var p = client.getElementPosition(popup);

     this.addCSSClass(popup,"hide");

     // TODOO!!! width not working properly

@@ -822,7 +825,7 @@ DefaultTheme.prototype.showPopup = function(client,popup, x, y, delay, defWidth)
     

 	popup.style.left = posX+"px";

 	popup.style.top = posY+"px";

-

+*/

 	if (delay > 0) {

 		with ({theme:this}) {

 			theme.popupTimeout = setTimeout(function(){

@@ -1336,6 +1339,8 @@ DefaultTheme.prototype.renderPanel = function(renderer,uidl,target,layoutInfo) {
 			

 			var style = uidl.getAttribute("style");

 			

+			var borderStyle = "border";

+			

 			// Create component element

 			var outer = theme.createPaintableElement(renderer,uidl,target,layoutInfo);

 			if (uidl.getAttribute("invisible")) return; // Don't render content if invisible

@@ -1345,19 +1350,20 @@ DefaultTheme.prototype.renderPanel = function(renderer,uidl,target,layoutInfo) {
             }

 			if ("light"==style) {

 				theme.addCSSClass(div,"light");

+				borderStyle += "light";

 			}

 			

 			// Create extra DIV for visual layout

 			var div = theme.createElementTo(outer,"div");

             if ("none"!=style) {

-			    theme.setCSSClass(div,"border");

+			    theme.setCSSClass(div,borderStyle);

             }

 

 			// Create default header

 			var caption = theme.renderDefaultComponentHeader(renderer,uidl,div);

-			theme.addCSSClass(caption,"pad");

+			theme.addCSSClass(caption,"panelcaption");

             if ("light"==style) {

-				theme.addCSSClass(caption,"lightcap");

+				theme.addCSSClass(caption,"panelcaptionlight");

 			}

 

 			// Create content DIV

@@ -1382,7 +1388,6 @@ DefaultTheme.prototype.renderTabSheet = function(renderer,uidl,target,layoutInfo
 

 			// Create default header

 			var caption = renderer.theme.renderDefaultComponentHeader(renderer,uidl,div,layoutInfo);

-			theme.createElementTo(div,"br");

 			

 			//  Render tabs

 			var tabs = theme.createElementTo(div,"div","tabs");

@@ -1404,7 +1409,9 @@ DefaultTheme.prototype.renderTabSheet = function(renderer,uidl,target,layoutInfo
 					if (tabNode.getAttribute("selected") == "true") {

 						theme.addCSSClass(tab,"tab-on inline");

 						selectedTabNode = tabNode;

-					} else if (tabNode.getAttribute("disabled") == "true") {

+					} else if (tabNode.getAttribute("disabled") == "true" 

+								|| uidl.getAttribute("disabled") == "true"

+								|| uidl.getAttribute("readonly") == "true") {

 						theme.setCSSClass(tab,"tab disabled inline");

 					} else {

 						theme.setCSSClass(tab,"tab clickable inline");

@@ -1417,22 +1424,18 @@ DefaultTheme.prototype.renderTabSheet = function(renderer,uidl,target,layoutInfo
 					

 					// Icon

 					if (iconUrl) {

-						tab.innerHTML = "<IMG src=\""+iconUrl+"\" class=\"icon\" />"+tabNode.getAttribute("caption");

-						//var icon = theme.createElementTo(tab,"img","icon");

-						//icon.src = iconUrl;

+						tab.innerHTML = "<IMG src=\""+iconUrl+"\" class=\"icon\" />" + tabNode.getAttribute("caption");

 					} else {

 						tab.innerHTML = tabNode.getAttribute("caption");

 					}

-					

-					// Caption

-					//theme.createTextNodeTo(tab,tabNode.getAttribute("caption"));

 				

 				}

 			}

 			

-			// Render content

+			// Render content (IE renderbug need three)

 			var content = theme.createElementTo(div,"div","outset");

-			content = theme.createElementTo(content,"div","content border");

+			content = theme.createElementTo(content,"div","border");

+			content = theme.createElementTo(content,"div","content");

 			if (selectedTabNode != null) {

 				theme.renderChildNodes(renderer,selectedTabNode, content);

 			}

@@ -1617,21 +1620,20 @@ DefaultTheme.prototype.renderTextField = function(renderer,uidl,target, layoutIn
 			input.focusid = focusid;

 		}

 	} else {

-		input = renderer.theme.createInputElementTo(border,(secret?"password":"text"),null,focusid);

-		

+		input = renderer.theme.createInputElementTo(border,(secret?"password":"text"),null,focusid);	

 	}

 	if (tabindex) input.tabIndex = tabindex;

 	if (disabled||readonly) {

 		input.disabled = "true";

 	}

 	

-	

 	// Assign cols and rows

 	if (cols >0) {

 		if (multiline) {

 			input.cols = cols;

 		} else {

 			input.size = cols;

+			input.maxlength = cols;

 		}

 	}

 	if (rows >0) {

@@ -1740,7 +1742,7 @@ DefaultTheme.prototype.renderDateField = function(renderer,uidl,target,layoutInf
 		    }

 			

 			// Create button

-		    var button = theme.createInputElementTo(div,"button");

+		    var button = theme.createInputElementTo(div,"button","btn clickable");

 		    button.id =buttonId;

 		    button.value = "...";

 		    if (disabled||readonly) {

@@ -2305,8 +2307,8 @@ DefaultTheme.prototype.renderLink = function(renderer,uidl,target,layoutInfo) {
 	var link = theme.createElementTo(div,"div", "link pad clickable");

 	

 	if (!disabled&&!readonly) {

-		theme.addAddClassListener(theme,client,div,"mouseover","over");

-		theme.addRemoveClassListener(theme,client,div,"mouseout","over");

+		theme.addAddClassListener(theme,client,link,"mouseover","over");

+		theme.addRemoveClassListener(theme,client,link,"mouseout","over");

 		

 		var feat;

 		switch (border) {

@@ -3273,7 +3275,7 @@ DefaultTheme.prototype.renderSelect = function(renderer,uidl,target,layoutInfo)
 	if (focusid) select.focusid = focusid;

 	if (tabindex) select.tabIndex = tabindex;

 	if (selectMode == "multi") {

-		select.setAttribute("multiple", "true"); 

+		select.setAttribute("multiple", "true");

 		if (newitem) {

 			theme.createElementTo(div,"br");

 		} 

@@ -3285,6 +3287,9 @@ DefaultTheme.prototype.renderSelect = function(renderer,uidl,target,layoutInfo)
 	var options = theme.getFirstElement(uidl,"options");

 	if (options != null) {

 		options = options.getElementsByTagName("so");

+		if (options && options.length && selectMode == "multi") {

+			select.size = (options.length>7?7:options.length);

+		}

 	}	

 	if (disabled||readonly) {

 		select.disabled = "true";

@@ -3313,7 +3318,7 @@ DefaultTheme.prototype.renderSelect = function(renderer,uidl,target,layoutInfo)
 		var button = theme.createElementTo(div,"button");

 		theme.createTextNodeTo(button,"+");

 		var newitemVariable = theme.createVariableElementTo(div,theme.getVariableElement(uidl,"string","newitem"));

-		theme.addSetVarListener(theme,client,input,"change",newitemVariable,input,immediate);

+		theme.addSetVarListener(theme,client,input,"change",newitemVariable,input,true);

 	}

 }

 

@@ -3364,9 +3369,9 @@ DefaultTheme.prototype.renderSelectOptionGroup = function(renderer,uidl,target,l
 			var caption =  optionUidl.getAttribute("caption");

 			var html;

 			if (selectMode == "multi") {

-				html = "<input type=checkbox name=\""+inputName+"\" id=\""+inputId+"\" ";

+				html = "<input class=\"option\" type=checkbox name=\""+inputName+"\" id=\""+inputId+"\" ";

 			} else {	

-				html = "<input type=radio name=\""+inputName+"\" id=\""+inputId+"\" ";			

+				html = "<input class=\"option\" type=radio name=\""+inputName+"\" id=\""+inputId+"\" ";			

 			}

 			if (disabled||readonly) html += " disabled=\"true\" "

 			if (optionUidl.getAttribute("selected") == "true") {

@@ -3395,11 +3400,11 @@ DefaultTheme.prototype.renderSelectOptionGroup = function(renderer,uidl,target,l
 		}

 	}

 	if (newitem) {

-		theme.createElementTo(div,"br");

-		var input = theme.createInputElementTo(div,"text");

-		var button = theme.createElementTo(div,"button");

+		var ni = theme.createElementTo(div,"div","newitem");

+		var input = theme.createInputElementTo(ni,"text");

+		var button = theme.createElementTo(ni,"button");

 		theme.createTextNodeTo(button,"+");

-		var newitemVariable = theme.createVariableElementTo(div,theme.getVariableElement(uidl,"string","newitem"));

+		var newitemVariable = theme.createVariableElementTo(ni,theme.getVariableElement(uidl,"string","newitem"));

 		theme.addSetVarListener(theme,client,input,"change",newitemVariable,input,true);

 	}

 }