/********************************************
   HTML ELEMENTS
********************************************/
/* Top Elements */
* { margin: 0; padding: 0;}

body {
        background: #cccccc;
        font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
        color: #000;
        text-align: center;
        margin: 0 0 15px 0;
}

/* links */
a, a:visited {
        color: #000;
        background: inherit;
        text-decoration: none;
}
a:hover {
        color: #326ea1;
        background: inherit;
        text-decoration: none;
        padding-bottom: 0;
        /*border-bottom: 2px solid #dbd5c5;*/
}

/* headers */
h1, h2, h3 {
        /*
        font-family: Verdana, Tahoma, arial, sans-serif;
        */
        font-weight: Bold;
        color: #333;
}
h1 {
        font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
}
h2 {
        font: bold 1.2em 'Trebuchet MS', Tahoma, Sans-serif;
        text-transform: uppercase;
}
h3 {
        font: bold 1.1em 'Trebuchet MS', Tahoma, Sans-serif;
}

h1, h2, h3, p {
        padding: 10px;
        margin: 0;
}
ul, ol {
        margin: 5px 0;
        margin-left: 30px;
        padding: 0 5px;
}

/* images */
img {
        /*
        background: #FAFAFA;
        border: 1px solid #DCDCDC;
        padding: 5px;
        */
        padding: 0;
        margin: 0;
}
img.float-right {
        margin: 5px 0px 10px 10px;
}
img.float-left {
        margin: 5px 10px 10px 0px;
}

code {
        margin: 5px 0;
        padding: 10px;
        text-align: left;
        display: block;
        overflow: auto;
        font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
        background: #F5F5F5;
        border-left: 3px solid #D4D4D4;
}
acronym {
        cursor: help;
        border-bottom: 1px dashed #777;
}
blockquote {
        font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
        margin: 10px;
        padding: 0 0 0 25px;
        background: #F5F5F5;
        border-left: 3px solid #D4D4D4;
        color: #444;
}

/* start - table */
table {
        /*
        border-collapse: collapse;
        margin: 10px;
        */
}
th strong {
        color: #fff;
}
th {
        background: #e7e6e6 url(../images/button.jpg) repeat-x;
        height: 29px;
        padding-left: 12px;
        padding-right: 12px;
        text-align: left;
        border-left: 1px solid #f4f4f4;
        border-bottom: solid 2px #fff;
        color: #333;
}
tr {
        height: 30px;
}
td {
        padding-left: 11px;
        padding-right: 11px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
}
td.first,th.first {
        border-left: 0px;
}
tr.row-a {
        background: #F8F8F8;
}
tr.row-b {
        background: #EFEFEF;
}
/* end - table */

/* form elements */
form {
        margin: 0;
        padding: 0 5px;
        background: none;
}
label {
        display:block;
        color: #000;
        font-weight:bold;
        margin:5px 0;
}
input {
        padding:2px;
        border:1px solid #eee;
        font: normal 1em Verdana, sans-serif;
        color:#777;
}
select {
        font: normal 10px Arial, Sans-serif;
        margin: 0;
        padding: 1px 0px 1px 0px;
        color: #000;	
}
textarea {
        width:400px;
        padding:2px;
        font: normal 1em Verdana, sans-serif;
        border:1px solid #eee;
        height:100px;
        display:block;
        color:#777;
}
input.button {
        width: 50px;
        font-family: Calibri;
        color: #FFFFFF;
        height: 22px;
        padding: 2px 5px;
        vertical-align: top;
        background: #999999;
		border: 1px solid #FFFFFF;
}

/* search form */
.searchform {
        background-color: transparent;
        border: none;
        margin: 0;
        padding: 5px;
        /*width: 240px;*/
        width: 220px;
        height: 25px;
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox {
        /*width: 140px;*/
        width: 120px;
        color: #000;
        height: 16px;
        padding: 2px;
        border: 1px solid #ff9803;
        vertical-align: top;
}
.searchform input.button {
        /*width: 60px;*/
        width: 50px;
        font-family: Calibri;
        color: #FFFFFF;
        height: 22px;
        padding: 2px 5px;
        vertical-align: top;
        background: #999999;
}

/********************************************
   LAYOUT
********************************************/
#wrap {
        position: relative;
        width: 1024px;
        margin: 0 auto;
        text-align: left;
        background: #fff;
}

#header {
        position: relative;
        width: 1024px;
        height: auto;
        /*height: 78px;*/
        padding: 0;
        margin: 0;
        color: #fff;
        /*border: 1px solid #000FFF;*/
}

/* header search */
#header #header-search {
        position: absolute;
        top: 10px; left: 20px;
        color: #000;
        text-align: left;
        margin: 0; padding: 0;
        height: auto;
        width: 251px;
        /*border: 1px solid #000;*/
}

/* header flag */
#header #header-flag {
        position: absolute;
        top: 87px; left: 0px;
        width: 335px;
        border: 1px solid #000;
}

/* header news */
#header #header-news {
        position: absolute;
        top: 70px; left: 20px;
        width: 725px;
        color: #000;
        border: 1px solid #cccccc;
}
#header #header-news p {
        padding: 0; margin: 0;
        margin-left: 5px;
}
#header #header-news a {
        color: #838181;
        text-decoration: none;
}
#header #header-news a:hover {
        color: #444;
}

/* header time */
#header #header-home {
        position: absolute;
        top: 5px; left: 50px;
        width: 16px;
}
#header #header-home p {
        margin: 0; padding: 0;
}

/* header flag */
#header-photo #header-flag {
        position: absolute;
        top: 173px; left: 5px;
        background: none;
        color: #666666;
        text-align: center;
        width: 60px;
}
#header-photo #header-flag p {
        margin: 0; padding: 0;
}

/* header-photo */
#header-photo {
        position: relative;
        clear: both;
        margin: 0 auto;
        height: 200px;
        width: 1024px;
        background: #fff url(../images/header-photo.jpg) no-repeat center bottom;
}
#header-photo #news {
        position: absolute;
        top: 170px; left: 70px;
        width: 630px;
        height: 20px;
        /* Changed by Taufiek, 21-02-2010 */
        /*background: #fff;*/
        background: none;
        color: #000;
        padding: 0; margin: 0;
        /* Changed by Taufiek, 21-02-2010 */
        /*border: 1px solid #cccccc;*/
}
#header-photo #news p {
        padding: 0; margin: 0;
        margin-left: 5px;
}
#header-photo #news a {
        color: #838181;
        text-decoration: none;
}
#header-photo #news a:hover {
        color: #444;
}

#header-photo #news span {
        /*
        width: 100px;
        font: bold 1.4em/1em 'Trebuchet MS', Tahoma, Sans-serif;
        padding: 0; margin: 0;
        */
        position: absolute;
        top: 0; left: 0;
        font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
        padding: 0; margin: 0;
        width: 75px;
        height: 18px;
}
#header-photo #news marquee {
        /*
        width: 570px;
        height: 18px;
        padding: 0; margin: 0;
        */
        position: absolute;
        top: 0; right: 0;
        /* Changed by Taufiek, 21-02-2010 */
        //font: normal 1em/1.2em 'Trebuchet MS', Tahoma, Sans-serif;
        font: 1.4em 'Calibri', Tahoma, Sans-serif;
        padding: 0; margin: 0;
         /* Changed by Taufiek, 21-02-2010 */
        //width: 570px;
        width: 625px;
        height: 18px;
}

#header-photo #news img {
        display: inline;
        padding: 0; margin: 0;
        margin-top: 2px;
}

#header-photo #search {
        position: absolute;
        top: 170px; right: 35px;
        background: none;
        width: 251px;
        /*border: 1px solid #000;*/
}

/* header login */
#header #header-login {
        position: absolute;
        top: 220px; right: 45px;
        background: #fff url(../images/login.jpg) no-repeat center center;
        height: 288px;
        width: 250px;
}

#header #header-afterlogin {
        position: absolute;
        top: 220px; right: 45px;
        background: #fff url(../images/afterlogin.jpg) no-repeat center center;
        height: 288px;
        width: 250px;
}

#login {
        width: 230px;
        margin: 70px 10px 10px 10px;
        padding: 0;
}

#login ul {
        margin-left: 20px;
}


/* Navigation */
#nav {
        width: auto;        
        padding: 0; margin: 0;
}
#nav ul {
        float: left;
        list-style: none;        
        background: url(../images/nav.jpg) repeat-x;
        width: auto;
        padding: 0;
        margin: 0;
        display: inline;
        text-transform: uppercase;
}
#nav ul li {
        display: inline;
        margin: 0; padding: 0;
}
#nav ul li a {
        display: block;
        float: left;
        width: auto;
        margin: 0;
        padding: 0 4px;
        border-bottom: none;
        color: #fff;
        font: bold 11px/35px Arial, Helvetica, Geneva, sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0px;
}
#nav ul li a:hover,
#nav ul li a:active {
        /*color: #326ea1;*/
        color: #fd9a00;
}
#nav ul li#current a {
        margin-left: 10px;
}
#nav ul li#currentid a {
        margin-left: 20px;
}

#content-wrap {
        float: left;
        width: 1024px;
        margin: 0;
        display: inline;
        padding: 0;
        /*border-top: 5px solid #fff;*/
        background: #fff;
        /*border: 1px solid #000;*/
}

#content-wraphome {
        float: left;
        width: 1024px;
        margin: 0;
        display: inline;
        padding: 0;
        /*border-top: 5px solid #fff;*/
        background: #fff;
        /*border: 1px solid #000;*/
}


/* Main Column */
.three-col #main {
        /*margin: 0 225px 0 225px;*/
        margin: 0 200px 0 180px;
        /*border: 1px solid #000;*/
}
.two-col #main {
        margin: 0 0 0 180px;
        /*border: 1px solid #000;*/
}

/* Main Column */
.three-col #mainhome {
        margin: 0 200px 0 180px;
        /*border: 1px solid #000;*/
}
.two-col #mainhome {
        margin: 0 0 0 180px;
        /*border: 1px solid #000;*/
}

#mainhome #sidebartop {
        float: left;
        /*background: #f2f2f2;*/
        width: 320px;
        height: auto;
        margin-left: 0px;
        /*border: 1px solid #000;*/
}
#mainhome #rightcolumntop {
        float: right;
        /*background: #f2f2f2;*/
        width: 320px;
        height: auto;
        margin-right: 0px;
        /*border: 1px solid #000;*/
}
#mainhome #sidebarbottom {
        float: left;
        /*background: #f2f2f2;*/
        width: 320px;
        height: auto;
        margin-left: 0px;
        margin-top: 5px;
        /*border: 1px solid #000;*/
}
#mainhome #rightcolumnbottom {
        float: right;
        /*background: #f2f2f2;*/
        width: 320px;
        height: auto;
        margin-right: 0px;
        margin-top: 5px;
        /*border: 1px solid #000;*/
}

#mainhome #top {
		width: 633px;
		height: 230px;
		margin-top: 5px;
		/*border: 1px solid #000;*/
}
#mainhome #bottomleft {
        float: left;
        width: 208px;
        height: auto;
        margin-left: 0px;
        margin-top: 5px;
        /*border: 1px solid #000;*/	
}
#mainhome #bottommiddle {
        float: left;
        width: 209px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
        /*border: 1px solid #000;*/		
}
#mainhome #bottomright {
        float: right;
        width: 209px;
        height: auto;
        margin-right: 9px;
        margin-top: 5px;
        /*border: 1px solid #000;*/		
}
#mainhome #text {
        margin: 0;
        margin-bottom: 10px;
        padding: 0;
        background: #f2f2f2; 
        font: normal 10px/1.75em Verdana, Tahoma, arial, sans-serif;   
        height: 220px;     
}

#mainhome ul {
        list-style: none;
        margin: 0;
        margin-left: 7px;
        padding: 0;        
}

#mainhome ul li {
        list-style-image: url(../images/lang.jpg);
        margin-left: 10px;
}

#content {
        /*background: #999999;*/
        background: url(../images/nav.jpg) repeat-x;
        width: auto;
        height: 35px;
        /*border: 1px solid #000;*/
}

#main h1 {
        margin: 5px 5px 0 5px;
        padding: 5px 5px;
        font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
        color: #2a4793;
        background: #cccccc;
        border-bottom: 1px solid #dadada;
}
#main span {
        font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
        margin-left: 10px;
}
#main h2 {
        margin: 0; padding: 0;
        margin-left: 10px;
}
#main fieldset {
        margin: 0;
        margin-left: 5px;
        margin-right: 5px;
        padding: 1em;
}
#main legend {
        color: #000;
}

/* Tabs */
#main #container {
        margin: 0; padding: 5px;
        width: 630px;
        height: 525px;
        /*border: 1px solid #000;*/
}
#main #container #left {
        float: left;
        width: 135px;
        margin: 0; padding: 0;
        height: auto;
        /*border: 1px solid #000;*/
}
#main #container #left #tabs ul {
        margin: 0; padding: 0;
}
#main #container #left #tabs ul li {
        float: left;
        margin: 0; padding: 0;
}
#main #container #left #tabs a {
        float: left;
        width: 120px;
        padding: 5px 8px;
        background-color: #cdcdcd;
        text-decoration: none;
        color: #000;
        border-bottom: 2px solid #fff;
}
#main #container #left #tabs a.active-tab {
        width: 120px;
        background-color: #9d9d9d;
        border-top: 3px solid #9d9d9d;
        padding-top: 3px;
        color: #fff;
}
#main #container #right {
        float: right;
        width: 488px;
        margin: 0; padding: 0;
        border: 1px solid #9d9d9d;
}
#main #container #right .panel {
        clear: both;
        display: none;
        height: 525px;
        overflow: scroll;
        text-align: left;
        margin: 0;
        padding: 10px;
}
#main #container #right .panel.active-tab-body {
        display: block;
}
#main #container #right fieldset {
        margin: 0;
        padding: 1em;
}
#main #container #right legend {
        color: #000;
}

#mainhome h1 {
        margin: 5px 5px 0 5px;
        padding: 5px 5px;
        font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
        color: #2a4793;
        background: #cccccc;
        border-bottom: 1px solid #dadada;
}
#mainhome span {
        font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
        margin-left: 10px;
}
#mainhome h2 {
        margin: 0; padding: 0;
        margin-left: 10px;
}
#mainhome fieldset {
        margin: 0;
        margin-left: 10px;
        margin-right: 10px;
        padding: 1em;
}
#mainhome legend {
        color: #000;
}

#basic-accordian ul {
        list-style: none;
        margin: 0;
        margin-left: 20px;
        padding: 0;        
}

#basic-accordian ul li {
        list-style-image: url(../images/lang.jpg);
        margin-left: 10px;
}

/* Sidebar */
#sidebar {
        float: left;
        /*width: 225px;*/
        width: 180px;
        margin-left: 0px;
        font: normal 10px/1.75em Verdana, Tahoma, arial, sans-serif;
        /*border: 1px solid #000;*/
}
#sidebar span {
        font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
        margin-left: 10px;
}
#sidebar h2 {
        margin: 0; padding: 0;
        margin-left: 10px;
}

#sidebar ul {
        margin: 5px; padding: 5px;
        border: none;
        border-right: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
}

#sidebar ul li { 
		list-style-image: url(../images/lang.jpg);
		margin-left: 10px;  
}

#sidebar ol {
        list-style: none;
}

#sidebarhome {
        float: left;
        width: 180px;
        margin-left: 0px;
        /*border: 1px solid #000;*/
}
#sidebarhome span {
        font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
        margin-left: 10px;
}
#sidebarhome h2 {
        margin: 0; padding: 0;
        margin-left: 10px;
}

#sidebarhome ul {
        list-style: none;
        border: none;
        border-right: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
}

#sidebarhome ol {
        list-style: none;
}

#language {
        width: 180px;
        margin: 0;
        padding: 0;
        color: #fff;
        background: url(../images/nav-lang.jpg) repeat-x;
}
#language ul {
        background: url(../images/nav-lang.jpg) repeat-x;
        width: 180px;
        height: 35px;
        margin: 0;
        padding: 0;
}
#language ul li {
        display: inline;
        margin: 0;
        margin-left: 9px;
        padding: 0;
}
#language ul li a {
        display: inline;
        width: auto;
        margin: 0;
        padding: 0;
        color: #fff;
        font: normal 10px/35px Arial, Helvetica, Geneva, sans-serif;
        text-decoration: none;
        letter-spacing: 0px;
}
#language ul li a:hover,
#language ul li a:active {
        color: #fd9a00;
}


/* right column */
#rightcolumn {
        float: right;
        /*width: 225px;*/
        width: 200px;
        height: auto;
        margin-right: 0px;
        /*border: 1px solid #000;*/
}
#rightcolumn h1, #sidebar h1 {
        margin: 10px 5px 5px 5px;
        padding: 5px 5px;
        font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
        color: #444;
        border-bottom: 1px solid #dadada;
}

#rightcolumnhome {
        float: right;
        width: 200px;
        height: auto;
        margin-right: 0px;
        /*border: 1px solid #000;*/
}
#rightcolumnhome h1, #sidebarhome h1 {
        margin: 5px 5px 0 5px;
        padding: 5px 5px;
        font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
        color: #2a4793;
        background: #cccccc;
        border-bottom: 1px solid #dadada;
}
#rightcolumnhome ol {
        list-style: none;
}

#search {
        /*width: 225px;*/
        width: 200px;
        margin: 0;
        padding: 0;
        color: #fff;
        background: url(../images/nav.jpg) repeat-x;
}
#rightcolumnbar {
        width: 200px;
        height: auto;
        margin: 0;
        margin-top: 5px;
        padding: 0;
        background: #f6f4f5;
}
#rightcolumnbar span {
        font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
        margin-left: 10px;
}
#rightcolumnbar p {
		font: normal 10px/1.75em Verdana, Tahoma, arial, sans-serif;
}
#rightcolumnbar h3 {
		font: normal 10px/1.75em Verdana, Tahoma, arial, sans-serif;
}

#rightcolumnbar #loginhead {
        background: #1c4893;
        width: 200px;
        height: 30px;
        margin: 0; padding: 0;
}

#rightcolumnbar #contacthead {
        background: #813331 url(../images/contacthead.jpg) no-repeat right top;
        width: 200px;
        height: 25px;
        margin: 0; padding: 0;
}
#rightcolumnbar #newshead {
        background: #813331 url(../images/newshead.jpg) no-repeat right top;
        width: 200px;
        height: 25px;
        margin: 0; padding: 0;
}
#rightcolumnbar #projecthead {
        background: #813331 url(../images/projecthead.jpg) no-repeat right top;
        width: 200px;
        height: 25px;
        margin: 0; padding: 0;
}


/* Announcement */
#announcement {
        width: 650px;
        margin-top: 10px;
        margin-left: 75px;
        /*border: 1px solid #000;*/
}

/* footer-wrap */
#footer-wrap {
        clear: both;
        width: 1024px;
        font-size: 95%;
        padding: 10px 0;
        text-align: left;
        /*border: 1px solid #000;*/
}
#footer-wrap a {
        text-decoration: none;
        color: #000;
        font-weight: bold;
}
#footer-wrap a:hover {
        color: #326ea1;
}
#footer-wrap p {
        padding: 10px 0;
}
#footer-wrap h2 {
        color: #000;
        margin: 0;
        padding: 0 10px;
}

/* footer */
/* footer */
#footer {
        clear: both;
        color: #000;
        margin: 0 auto;
        width: 1004px;
        height: 15px;
        padding: 0;
        text-align: center;
        background: #fff;
        border-top: 1px solid #cccccc;
        /*border: 1px solid #000;*/
}

#footer p {
        padding: 0; margin: 0;
}

#footer-copyright {
        float: left;
        top: 0px;
        width: 450px;
        padding: 0;
        margin-left: 50px;
        border: 1px solid #fff;
}

#footer-copyright p {
        padding: 0; margin: 0;
        text-align: left;
}

#footer-contact {
        float: left;
        top: 0px;
        width: 450px;
        padding: 0;
        border: 1px solid #fff;
}

#footer-contact p {
        padding: 0; margin: 0;
        text-align: right;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

/* post */
.post-by {
        font-size: .95em;
        padding-top: 0;
}
.post-footer {
        background: #F5F5F5;
        padding: 5px; margin: 20px 10px 0 10px;
        font-size: 95%;
        color: #000;
}
.post-footer .date{
        margin: 0 10px 0 5px;
}
.post-footer a.comments {
        margin: 0 10px 0 5px;
}
.post-footer a.readmore {
        margin: 0 10px 0 5px;
}