/************/ /* GLOBAL */ /************/ /* NON-HEADER */ * { padding: 0; margin: 0; } body { font-size: 62.5%; background-color: #314f60; font-family: Tahoma; } /*Font-size: 1.0em = 10px when browser default size is 16px*/ .page-container { width: 970px; margin: 0px auto; margin-top: 0px; margin-bottom: 10px; /*border:solid 1px rgb(150,150,150);*/ font-size: 1.0em; } .main { clear: both; width: 970px; padding-bottom: 20px; background-color: rgb(255,255,255); } .main-content { background: rgb(255,255,255) /*url(../Image/tab_expan.jpg) no-repeat*/; padding: 6px 20px 0 20px; display: inline; float: left; width: 930px; margin: 0 0 0 0; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .content_left { float: left; margin: 0 0 0 10px; width: 150px; display: inline; float: left; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .content_right { float: right; font-size: 14px; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; /*border-left:solid 1px rgb(150,150,150); border-right:solid 1px rgb(150,150,150);*/ width: 750px; /*height:640px; background:url(../Image/content_right.gif); background-repeat:repeat-y;*/ } .rpt_content_left { float: left; margin: 0 0 0 10px; width: 210px; display: inline; float: left; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .rpt_content_right { border-left:solid 1px gray; float:left; font-size: 14px; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; padding-top:10px; background:url(../Image/content_right.gif); background-repeat:repeat-y; width: 689px; /*height:640px; */ } .font14px { font-size: 14px; font-weight:bold; text-align:center; text-decoration:underline; } .footer { clear: both; width: 970px; height: 3.7em; padding: 1.1em 0 0; background: rgb(225,225,225) url(../Image/bg_foot.jpg) no-repeat; font-size: 1.0em; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } /* --- For alternative headers START PASTE here --- */ /* HEADER */ .header { width: 970px; font-family: Tahoma; } .header-top { width: 970px; height: 60px; /*background: url(../Image/header_top.gif) no-repeat;*/ background-color: #4D829B; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .header-middle { padding: 0 30px 0 20px; width: 920px; height: 45px; background: rgb(230,230,230) url(../Image/tab_bg.jpg); overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .header-bottom { padding: 0px 0 0 0; width: 970px; height: 105px; background: rgb(255,255,255) url(../Image/tab_expan.jpg) repeat-y; } .header-breadcrumbs { clear: both; width: 970px; padding: 1.0em 0 1.5em 0; background: rgb(100,100,100) url(../Image/bg_head_breadcrumbs.jpg) repeat-y; } /********************/ /* HEADER SECTION */ /********************/ .sitelogo { position: absolute; z-index: 1; margin: 5px 0 0 10px; /*background: url(../Image/band_black.jpg) no-repeat;*/ /*background: url(../Image/iso.jpg) no-repeat;*/ } .sitelogo img { width: 60px; height: 50px; border:none; } .sitename { width: 650px; height: 30px; position: absolute; z-index: 1; margin: 12px 0 0 80px; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } .sitename h1 { color:White; font-size: 20px; } .sitename h1 a { color:White; } .sitename h2 { margin: 0px 0 0 0; /*color: rgb(125,125,125);*/ /*olor: rgb(50,50,50);*/ color:White; font-size: 100%; } .sitename a { text-decoration: none; color: rgb(50,50,50); } .sitename a:hover { text-decoration: none; color: rgb(125,125,125); } .appDetail { color: rgb(255,200,0); margin: 2px 0 0 510px; font-weight: bold; font-family: Tahoma; text-align: right; font-size: 200%; width: 450px; height: 53px; position: absolute; z-index: 1; } .appDetailContent1 { font-size: 65%; color: rgb(255,255,255); } .appDetailContent2 { font-size: 65%; } .nav0 { font-family: Tahoma; font-size: 10px; font-weight: bold; cursor: default; } .nav0 table { text-align: left; color: rgb(66,66,88); } .nav0 td { text-align: center; vertical-align: top; width: 80px; height: 100%; } .nav0 img { padding-top: 2px; height: 22px; border: none; cursor: pointer; } .nav0 td a span { text-decoration: none; color: rgb(66,66,88); } .nav0 img:hover { height: 25px; } /********************************************************************/ .nav1 { font-family: Tahoma; font-size: 10px; font-weight: bold; color: rgb(66,66,88); cursor: default; } .nav1 td { text-align: right; vertical-align: top; width: 50px; height: 100%; } .nav1 img { height: 22px; border: none; cursor: pointer; } .nav1 a { text-decoration: none; color: rgb(66,66,88); } .nav1 img:hover { height: 25px; } /********************************************************************/ .popupmenu { margin: 45px 0 0 0px; width: 930px; height: 80px; position: absolute; z-index: 100; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; background: url(../Image/inner_h_b2.gif) repeat-y; } /* ; overflow:hidden;*//*IE6*//* background:url(../Image/inner_h_b2.gif) repeat-y; }*/ .popupmenu tr { list-style-type: none; text-align:center; } .popupmenu tr td { position: relative; margin-left: auto; margin-right: auto; } .popupmenu a img { border: none; height: 20px; padding: 5px 16px 0 16px; } .popupmenu tr td a { float: left; display: block; padding: 0 10px 0 10px; text-decoration: none; font-weight: bold; color: rgb(100,100,100); } .popupmenu table { margin-top: 2px; margin-left: auto; margin-right: auto; } .popupmenu tr td h3 { font-size: small; margin: 0px 0 0 0; } .popupmenu tr td:hover a img { height: 24px; } .popupmenu h2 { margin-top: 2px; font-weight: normal; text-align: center; } .sitemessage { width: 350px; height: 120px; position: absolute; z-index: 1; margin: 20px 0 0 530px; color: rgb(234,239,247); /*xoverflow:visible !important /*Activate if Firefox print problems*/ overflow: hidden /*IE6*/; } .sitemessage h1 { width: 350px; text-align: right; font-size: 230%; } .sitemessage h2 { float: right; width: 270px; margin: 10px 0 0 0; text-align: right; line-height: 100%; font-size: 160%; } .sitemessage h3 { float: right; width: 270px; margin: 10px 0 0 0; text-align: right; font-size: 140%; } .sitemessage h3 a { text-decoration: none; color: rgb(234,239,247); } .sitemessage h3 a:hover { text-decoration: none; color: rgb(50,50,50); } .inner-header-buttom { /*border:solid 1px rgb(150,150,150);*/ background: url(../Image/inner_h_b1.gif); margin: 0px 15px 10px 18px; width: 937px; height: 88px; } .inner-h-b-content { /*border:solid 1px rgb(150,150,150);*/ width: 925px; height: 78px; margin: 0px 0 0 5px; } .nav2 { float: left; width: 760px; border: none; color: rgb(75,75,75); font-size: 1.0em; font-size: 130%; } /*Color navigation bar normal mode*/ .nav2 ul { list-style-type: none; text-align: center; } .nav2 ul li { float: left; position: relative; z-index: 1000; /*border-left:solid 1px rgb(175,175,175);border-right:solid 1px rgb(175,175,175);*/ } .nav2 ul li ul { display: none; border: none; } .nav2 ul li ul { margin-left: 0px; padding: 0 0px 0px 0px; background: url(../Image/bg_head_bottom_nav_hover.gif) top center; } /*Sticky hover zones*/ .nav2 ul li a { float: left; display: block; height: 45px; line-height: 45px; padding: 0 16px 0 16px; text-decoration: none; font-weight: bold; color: rgb(100,100,100); } .nav2 ul li a img { border: none; height: 22px; padding: 5px 16px 0 16px; } .nav2 ul li h3 { font-size: small; margin: -15px 0 0 0; } .nav2 ul li:hover { width: auto; } .nav2 table { position: absolute; z-index: 999; top: 0; left: 0; border-collapse: collapse; } /*Non-IE6*/ .nav2 ul li:hover a { text-decoration: none; } /*Color main cells hovering mode*/ .nav2 ul li:hover a img { text-decoration: none; height: 24px; } .nav2 ul li:hover ul { background: url(../Image/bg_mid_menu.gif); display: block; position: absolute; z-index: 998; top: 3.0em; margin-top: 0.1em; left: 0; } .nav2 ul li:hover ul li ul { display: none; } .nav2 ul li:hover ul li a { display: block; width: 10em; height: auto; line-height: 1.3em; margin-left: -1px; padding: 4px 16px 4px 0px; border-right: solid 1px rgb(175,175,175); border-left: solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color: rgb(237,237,237); font-weight: normal; color: rgb(50,50,50); } /*Color subcells normal mode*/ .nav2 ul li:hover ul li a:hover { background-color: rgb(210,210,210); text-decoration: none; } /*Color subcells hovering mode*/ .main-content .searchform /*ส่วนของการ Search*/ { width: 220px; z-index: 90; margin: -15px 0 0 700px; /*border:solid 1px black;*/ position: absolute; z-index:10; } .div_dropdown /*ส่วนของการ Search*/ { background-color: White; width: 222px; height: 100px; visibility: hidden; overflow: auto; border: solid 1px rgb(150,150,150); } .header-breadcrumbs ul { float: left; width: 560px; list-style: none; padding: 0 0 0 15px; font-family: Tahoma; } .header-breadcrumbs ul a { color: rgb(70,122,167); text-decoration: none; } .header-breadcrumbs ul a:hover { color: rgb(42,90,138); text-decoration: underline; } .header-breadcrumbs .searchform { float: right; width: 285px; padding: 0 17px 0px 0px !important /*Non-IE6*/; padding: 0 12px 0px 0px /*IE6*/; } .header-breadcrumbs .searchform form fieldset { float: right; border: none; } .header-breadcrumbs .searchform input.field { width: 10.0em; padding: 0.2em 0 0.2em 0; border: 1px solid rgb(200,200,200); font-family: Tahoma; font-size: 120%; } .header-breadcrumbs .searchform input.button { width: 3.0em; padding: 1px !important /*Non-IE6*/; padding: 0 /*IE6*/; background: rgb(230,230,230); border: solid 1px rgb(150,150,150); text-align: center; font-family: Tahoma; color: rgb(150,150,150); font-size: 120%; } .header-breadcrumbs .searchform input.button:hover { cursor: pointer; border: solid 1px rgb(80,80,80); background: rgb(220,220,220); color: rgb(80,80,80); } /* --- For alternative headers END PASTE here --- */ /******************/ /* MAIN SECTION */ /******************/ /* MAIN NAVIGATION */ .content_left .round-border-topright { width: 10px; height: 10px; position: absolute; z-index: 100; margin: 0 0 0 190px; background: url(../Image/bg_corner_topright.gif) no-repeat; } .rpt_content_left .round-border-topright { width: 10px; height: 10px; position: absolute; z-index: 100; margin: 0 0 0 190px; background: url(../Image/bg_corner_topright.gif) no-repeat; } /* MAIN CONTENT */ .column1-unit { font-size: 120%; width: 720px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; } .column2-unit-left { float: left; width: 300px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; } .column2-unit-right { float: right; width: 300px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; } .column3-unit-left { float: left; width: 186px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; } .column3-unit-middle { float: left; width: 186px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; margin-left: 40px; } .column3-unit-right { float: right; width: 186px; margin-bottom: 10px !important /*Non-IE6*/; margin-bottom: 5px /*IE6*/; } /********************/ /* FOOTER SECTION */ /********************/ .footer p { line-height: 1.3em; text-align: center; color: rgb(125,125,125); font-weight: bold; font-size: 110%; } .footer p.credits { font-weight: normal; } .footer a { text-decoration: underline; color: rgb(125,125,125); } .footer a:hover { text-decoration: none; color: rgb(0,0,0); } .footer a:visited { color: rgb(0,0,0); } /******************/ /* CLEAR FLOATS */ /******************/ .page-container:after, .header:after, .header-breadcrumbs:after, .main:after,.rpt_content_left:after, .content_left:after, .main-content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .footer:after, p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear-contentunit { clear: both; width: 640px; height: 0.1em; border: none; background: rgb(210,210,210); color: rgb(210,210,210); } .dwtab { font-size:14px; } /********************************/ /* PRINTING and MISCELLANEOUS */ /********************************/ @media print { .header-top { width: 900px; height: 80px; background: rgb(240,240,240); overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } } @media print { .header-breadcrumbs { width: 900px; background: transparent; } } @media print { .nav2 { float: left; width: 900px; border: none; background: rgb(240,240,240); color: rgb(75,75,75); font-size: 1.0em; font-size: 130%; } } /*Color navigation bar normal mode*/ @media print { .main { clear: both; width: 900px; padding-bottom: 30px; background: transparent; } } @media print { .content_left { display: inline /*Fix IE floating margin bug*/; float: left; width: 199px; border-right: solid 1px rgb(200,200,200); border-bottom: solid 1px rgb(200,200,200); background-color: rgb(240,240,240); overflow: visible !important /*Firefox*/; overflow: hidden /*IE*/; } .rpt_content_left { display: inline /*Fix IE floating margin bug*/; float: left; width: 199px; border-right: solid 1px rgb(200,200,200); border-bottom: solid 1px rgb(200,200,200); background-color: rgb(240,240,240); overflow: visible !important /*Firefox*/; overflow: hidden /*IE*/; } } @media print { .footer { clear: both; width: 900px; height: 3.7em; padding: 1.1em 0 0; background: rgb(240,240,240); font-size: 1.0em; overflow: visible !important /*Firefox*/; overflow: hidden /*IE6*/; } } html { /*filter: expression(document.execCommand( "BackgroundImageCache" , false, true));*/ } /*IE proprietary flicker hack for background images. Not validating, but OK*/ #sddm { margin: 0; padding: 0; z-index: 100; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial; } #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 202px; background: #5970B2; color: #FFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #49A3FF} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2; z-index: 100;} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: 200px; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial} #sddm div a:hover { background: #49A3FF; color: #FFF} .linkSpan { float:right; cursor:pointer; } .setdwcenter { left:auto; }