diff --git a/web/style.css b/web/style.css
index 90f7dd6..2b42cd1 100644
--- a/web/style.css
+++ b/web/style.css
@@ -678,4 +678,455 @@ div#maincontent h1	{
         border:1px #bebebe solid;
         height:25px;
         margin:15px 0 0 0;
-    }
\ No newline at end of file
+    }
+    
+div#header a#logo
+{
+margin: 0;
+padding: 0;
+border: 0;
+}
+
+div#header a#logo
+{
+text-indent: -9999px;
+overflow:hidden;
+float:left;
+}
+
+div#header a#logo:link, div#header a#logo:visited
+{
+display: block;	
+width: 372px;
+height: 90px;
+background : transparent url(/ui2019/bg.png) 0 -150px no-repeat;
+}
+
+div#header a#logo:hover
+{
+background: transparent url(/ui2019/bg.png) 0 -250px no-repeat;
+}
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2) { 
+
+div#header a#logo
+    {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    }
+
+div#header a#logo
+    {
+    text-indent: -9999px;
+    overflow:hidden;
+    float:left;
+    }
+
+div#header a#logo:link, div#header a#logo:visited
+    {
+    display: block;	
+    width: 372px;
+    height: 90px;
+    background : transparent url("/ui2019/bg-retina.png") 0 -150px no-repeat;
+    background-size: auto 900px;
+    }
+
+div#header a#logo:hover
+    {
+    background: transparent url("/ui2019/bg-retina.png") 0 -250px no-repeat;
+    background-size: auto 900px;
+    }
+
+}
+
+
+div#header_index a, div#header_index h1
+{
+margin: 0;
+padding: 0;
+border: 0;
+}
+
+div#header_index a, div#header_index h1
+{
+text-indent: -9999px;
+overflow:hidden;
+float:left;
+}
+
+div#header_index a:link, div#header_index a:visited, div#header_index h1
+{
+display: block;	
+width: 500px;
+height: 100px;
+background : transparent url(/ui2019/bg.png) 0 -150px no-repeat;
+}
+
+div#header_index a:hover
+{
+background: transparent url(/ui2019/bg.png) 0 -250px no-repeat;
+}
+
+
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2) {
+
+div#header_index a, div#header_index h1
+    {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    }
+
+div#header_index a, div#header_index h1
+    {
+    text-indent: -9999px;
+    overflow:hidden;
+    float:left;
+    }
+
+div#header_index a:link, div#header_index a:visited, div#header_index h1
+    {
+    display: block;	
+    width: 500px;
+    height: 90px;
+    background : transparent url("/ui2019/bg-retina.png") 0 -150px no-repeat;
+    background-size: auto 900px;
+    }
+
+div#header_index a:hover
+    {
+    background: transparent url("/ui2019/bg-retina.png") 0 -250px no-repeat;
+    background-size: auto 900px;
+    }
+
+}
+
+
+/* ----------------------------------- search form ----------------------------------- */
+div#searchui
+{
+margin:0;
+padding:0;
+width:306px;
+height:100px;
+background-color: transparent;
+float:right;
+}
+
+#searchui input.button
+{
+padding:0;
+margin:0;
+background:#AE4141;
+font:12px Verdana, Arial, Helvetica, sans-serif;
+color:#FFFFFF;
+width:30px;
+height:30px;
+}
+
+#searchui input.box
+{
+margin:0;
+margin-top:35px;
+width:256px;
+height:28px;
+background:#fdfdfd;
+font:12px Verdana, Arial, Helvetica, sans-serif;
+border:1px solid #ddd;
+}
+
+
+
+/* ----------------------------------- index -----------------------------------*/
+
+
+body#homefirst div#maincontent div
+{
+padding-top:0;
+padding-bottom:30px;
+width:810px;
+}
+
+body#homefirst div#maincontent h3
+{
+margin-top:35px;
+margin-left:110px;
+font-size:24px;
+}
+
+body#homefirst div#maincontent p
+{
+margin-left:110px;
+font-size:16px;
+}
+
+body#homefirst div#maincontent div.idea
+{
+min-height: 118px;
+}
+
+body#homefirst div#maincontent div#d1
+{
+text-align:center;
+}
+
+body#homefirst div#maincontent div#d1 h2
+{
+margin-top:35px;
+font-size:24px;
+}
+
+body#homefirst div#maincontent div#d1 p
+{
+margin-left:0;
+font-size:18px;
+}
+
+body#homefirst div#maincontent div#partner
+{
+width: 307px;
+float: left;
+}
+
+body#homefirst div#maincontent div#update
+{
+width: 300px;
+float: left;
+margin:0;
+}
+
+body#homefirst div#maincontent div#d2
+{
+background : transparent url(/ui2017/icon2.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d3
+{
+background : transparent url(/ui2017/icon3.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d4
+{
+background : transparent url(/ui2017/icon4.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d5
+{
+background : transparent url(/ui2017/icon5.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d6
+{
+background : transparent url(/ui2017/icon6.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d7
+{
+background : transparent url(/ui2017/icon7.png) 0 0 no-repeat;
+}
+
+body#homefirst div#maincontent div#d8
+{
+background : transparent url(/ui2017/icon8.png) 0 0 no-repeat;
+border:0px;
+}
+
+body#homefirst div#maincontent div#d9		{
+background: transparent url(/ui2017/icon9.png) top left no-repeat;
+}
+
+body#homefirst div#maincontent div#d10		{
+background: transparent url(/ui2017/icon10.png) top left no-repeat;
+}
+
+body#homefirst div#maincontent div#d9, body#homefirst div#maincontent div#d10	{
+margin-left:75px;
+margin-top:10px;
+width:290px;
+float:left;
+border:0;
+}
+
+body#homefirst div#maincontent div#d9, body#homefirst div#maincontent div#d10	{
+margin-left:75px;
+margin-top:15px;
+float:left;
+border:0;
+min-height:87px;
+}
+
+body#homefirst div#maincontent div#d9, body#homefirst div#maincontent div#d10	{
+width:290px;
+}
+
+body#homefirst div#maincontent div#d10	{
+width:299px;
+}
+
+body#homefirst div#maincontent div#d9 h3, body#homefirst div#maincontent div#d10 h3	{
+font-size:14px;
+margin:23px 0 0 58px;
+color:#777;
+font-weight:400;
+}
+
+body#homefirst div#maincontent div#d9 p, body#homefirst div#maincontent div#d10 p	{
+font-size:14px;
+margin:0 0 0 58px;
+line-height:normal;
+}
+
+div#d9 p a	{
+color:#000;
+}
+
+
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2) {
+
+body#homefirst div#maincontent div#d2
+{
+background : transparent url("/ui2019/ref-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+body#homefirst div#maincontent div#d3
+{
+background : transparent url("/ui2019/try-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+body#homefirst div#maincontent div#d4
+{
+background : transparent url("/ui2019/easy-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+body#homefirst div#maincontent div#d5
+{
+background : transparent url("/ui2019/how-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+body#homefirst div#maincontent div#d6
+{
+background : transparent url("/ui2019/news-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+body#homefirst div#maincontent div#d7
+{
+background : transparent url("/ui2019/update-retina.png") 0 0 no-repeat;
+background-size: auto 80px;
+}
+
+}
+
+/* ----------------------------------- navfirst -----------------------------------*/
+div#navfirst
+{
+height: 48px;
+width: 1210px;
+margin: 0 0 0 12px;
+padding: 0;
+border: 0;
+background: #E8E7E3;
+}
+
+div#navfirst ul#menu
+{
+height: 48px;
+width: 1210px;
+margin: 0;
+padding: 0;
+position: relative;
+}
+
+div#navfirst ul#menu li
+{
+margin:0;
+padding:0;
+list-style:none;
+position:absolute;
+top:0;
+}
+
+ul#menu li,ul#menu a
+{
+display: block;
+height: 48px;
+border-bottom:0;
+}
+
+div#navfirst ul#menu li a
+{
+text-indent: -9999px;
+overflow:hidden;
+text-decoration: none;
+}
+
+
+div#navfirst ul#menu  {background: transparent url(/ui2019/bg.png) top left no-repeat;}
+
+#h	{width: 166px; left: 0px;}
+#b	{width: 191px; left: 166px;}
+#s	{width: 175px; left: 357px;}
+#p 	{width: 198px; left: 532px;}
+#x	{width: 113px; left: 730px;}
+#w	{width: 197px; left: 843px;}
+#r	{width: 170px; left: 1040px;}
+
+#h a:hover	{background: transparent url(/ui2019/bg.png) 0 -48px no-repeat;}
+#b a:hover	{background: transparent url(/ui2019/bg.png) -166px -48px no-repeat;}
+#s a:hover	{background: transparent url(/ui2019/bg.png) -357px -48px no-repeat;}
+#p a:hover	{background: transparent url(/ui2019/bg.png) -532px -48px no-repeat;}
+#x a:hover	{background: transparent url(/ui2019/bg.png) -730px -48px no-repeat;}
+#w a:hover	{background: transparent url(/ui2019/bg.png) -843px -48px no-repeat;}
+#r a:hover	{background: transparent url(/ui2019/bg.png) -1040px -48px no-repeat;}
+
+body.html #h				{background: transparent url(/ui2019/bg.png) 0 -48px no-repeat;}
+body.browserscripting #b	{background: transparent url(/ui2019/bg.png) -166px -48px no-repeat;}
+body.serverscripting #s     {background: transparent url(/ui2019/bg.png) -357px -48px no-repeat;}
+body.programming #p         {background: transparent url(/ui2019/bg.png) -532px -48px no-repeat;}
+body.xml #x					{background: transparent url(/ui2019/bg.png) -730px -48px no-repeat;}
+body.webbuilding #w		    {background: transparent url(/ui2019/bg.png) -843px -48px no-repeat;}
+body.reference #r		    {background: transparent url(/ui2019/bg.png) -1040px -48px no-repeat;}
+
+
+
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2) {
+
+div#navfirst ul#menu  {background: transparent url("/ui2019/bg-retina.png") top left no-repeat; background-size: auto 900px;}
+
+#h	{width: 166px; left: 0px;}
+#b	{width: 191px; left: 166px;}
+#s	{width: 175px; left: 357px;}
+#p 	{width: 198px; left: 532px;}
+#x	{width: 113px; left: 730px;}
+#w	{width: 197px; left: 843px;}
+#r	{width: 170px; left: 1040px;}
+
+#h a:hover	{background: transparent url("/ui2019/bg-retina.png") 0 -48px no-repeat; background-size: auto 900px;}
+#b a:hover	{background: transparent url("/ui2019/bg-retina.png") -166px -48px no-repeat; background-size: auto 900px;}
+#s a:hover	{background: transparent url("/ui2019/bg-retina.png") -357px -48px no-repeat; background-size: auto 900px;}
+#p a:hover	{background: transparent url("/ui2019/bg-retina.png") -532px -48px no-repeat; background-size: auto 900px;}
+#x a:hover	{background: transparent url("/ui2019/bg-retina.png") -730px -48px no-repeat; background-size: auto 900px;}
+#w a:hover	{background: transparent url("/ui2019/bg-retina.png") -843px -48px no-repeat; background-size: auto 900px;}
+#r a:hover	{background: transparent url("/ui2019/bg-retina.png") -1040px -48px no-repeat; background-size: auto 900px;}
+
+body.html #h				{background: transparent url("/ui2019/bg-retina.png") 0 -48px no-repeat; background-size: auto 900px;}
+body.browserscripting #b    {background: transparent url("/ui2019/bg-retina.png") -166px -48px no-repeat; background-size: auto 900px;}
+body.serverscripting #s     {background: transparent url("/ui2019/bg-retina.png") -357px -48px no-repeat; background-size: auto 900px;}
+body.programming #p         {background: transparent url("/ui2019/bg-retina.png") -532px -48px no-repeat; background-size: auto 900px;}
+body.xml #x					{background: transparent url("/ui2019/bg-retina.png") -730px -48px no-repeat; background-size: auto 900px;}
+body.webbuilding #w		    {background: transparent url("/ui2019/bg-retina.png") -843px -48px no-repeat; background-size: auto 900px;}
+body.reference #r		    {background: transparent url("/ui2019/bg-retina.png") -1040px -48px no-repeat; background-size: auto 900px;}
+
+}
\ No newline at end of file