﻿body
{
    font-family: Segoe UI;
    margin: 0px;
    background: #ffffff;
    font-size: 8pt;
}

a, a:active, a:link {
	text-decoration: none;
	color: #006193;
	font-size:7.5pt;
}
a:visited {
	text-decoration: none;
}

a:hover 
{
	color:#480a0a;
}

/* Use headers in the markup for accessibility reasons but control look with styles below*/

h1, h2, h3, h4, h5, h6
{
   margin: 2px 0 2px 0;
}

h1
{
    font-size: 8pt;
    font-weight: bold;
    margin: 5px 0 5px 0;
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active
{
    text-decoration: none;
    color: #480a0a;
}

/* Main navigation used by the masterpage */
.page-container 
{
    width:900px; 
    margin:0px auto; 
    margin-top:10px; 
    margin-bottom:10px; 
    border:solid 1px #969696; 
    font-size:8.5pt;
}
.main 
{
    clear:both; 
    width:900px; 
    background:transparent url(images/bg_main_withnav.jpg) top left repeat-y;
}

.main-navigation 
{
    display:inline; 
    float:left; 
    width:200px;
    overflow:visible; 
    overflow:hidden;
}

.main-navigation1 .round-border-topright1 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin:0 0 0 190px; 
}

.column1-unit2 
{
    width:640px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/;
}

.column2-unit-left2 
{
    float:left; 
    width:300px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/;
}

.column2-unit-right2 
{
    float:right; 
    width:300px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/;
}

.column3-unit-left2 
{
    float:left; 
    width:186px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/
}

.column3-unit-middle2 
{
    float:left; 
    width:186px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/; 
    margin-left:40px;
}

.column3-unit-right2 
{
    float:right; 
    width:186px; 
    margin-bottom:10px !important /*Non-IE6*/; 
    margin-bottom:5px /*IE6*/;
}

.main-content 
{
    display:inline;
    float:left; 
    width:440px; 
    margin:0 0 0 30px; 
    overflow:visible; 
    overflow:hidden;
}

.main-content1 
{
    display:inline;
    float:left; 
    width:600px; 
    margin:0 0 0 30px; 
    overflow:visible; 
    overflow:hidden;
}

.main-content2 
{
    display:inline;
    float:left; 
    width:850px; 
    margin:0 20px 20px 20px; 
    overflow:visible; 
    overflow:hidden;
    text-align:justify;
}

.main-content3 
{
    display:inline; 
    float:left; 
    width:600px; 
    margin:0 0 0 30px; 
    overflow:visible !important; 
    overflow:hidden;
}

.main-subcontent 
{
    display:inline; 
    float:right; 
    width:185px; 
    margin:0 15px 0 0; 
    overflow:visible; 
    overflow:hidden;
}

/* HEADER */
.header 
{
    width:900px; 
    font-family:Segoe UI;
}

.header-top 
{
    width:900px; 
    height:5px; 
    background:#e2e2e2 url(images/bg_head_top.jpg);
}

.header-middle 
{
    width:900px; 
    height:203px;
}

.header-bottom 
{
    width:900px; 
    height:10px;
}

.footer-bottom 
{
    width:900px; 
    height:70px;
}

/*  HEADER SECTION  */
.sitelogo 
{
    width:60px; 
    height:40px; 
    position:absolute; 
    z-index:1; 
    margin:22px 0 0 20px; 
    background:url(images/bg_head_top_logo.jpg);
}

.sitelogo1
{
    width:80px; 
    height:58px; 
    position:absolute; 
    z-index:1; 
    margin:10px 0 0 290px; 
    background:url(images/philippine_flag.gif);
}

.sitename 
{
    width:300px; 
    height:45px; 
    position:absolute; 
    z-index:1; 
    margin:20px 0 0 90px; 
    overflow:visible; 
    overflow:hidden;
}

.sitename h1 
{
    font-size:11pt;
}

.sitename h2 
{
    margin:-4px 0 0 0; 
    color:rgb(125,125,125); 
    font-size:8pt;
}

.nav0 
{
    width:350px; 
    position:absolute; 
    z-index:2;
    font-size:8pt;
    font-weight:bold;
    font-family:Segoe UI;
    color:#464646; 
    margin:35px 0 0 0; 
    margin-left:553px; 
    margin-left:553px;
}
.nav0 ul 
{
    float:right; 
    padding:0 2px 0 0;
}

.nav0 li 
{
    display:inline; 
    list-style:none;
}

.nav0 li a 
{
    padding:0 0 0 3px;
}

.nav0 a:hover 
{
    text-decoration:none;
}

.nav0 a img 
{
    height:14px; 
    border:none;
}

.nav1 
{
    width:350px; 
    position:absolute; 
    z-index:3; 
    margin:45px 0 0 550px;
}

.nav1 ul 
{
    float:right; 
    padding:0 15px 0 0; 
    font-weight:bold;
}
	
.nav1 li 
{
    display:inline; 
    list-style:none;
}

.nav1 li a 
{
    display:block; 
    float:left; 
    padding:2px 5px 2px 5px; 
    color:#7d7d7d; 
    text-decoration:none; 
    font-size:8pt;
 }
 
.nav1 a:hover 
{
    text-decoration:none; 
}

.sitemessage 
{
    width:350px; 
    height:120px; 
    position:absolute; 
    z-index:1; 
    margin:20px 0 0 530px; 
    color:rgb(234,239,247); 
    overflow:visible; 
    overflow:hidden;
}

.sitemessage h1 
{
    width:350px; 
    text-align:right; 
    font-size:8pt;
}

.sitemessage h2 
{
    float:right; 
    width:270px; 
    margin:8px 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:11pt;
}

.sitemessage h3 a 
{
    text-decoration:none; 
    color:#eaeff7;
}

.sitemessage h3 a:hover 
{
    text-decoration:none; 
    color:#480a0a;
}

.nav2 
{
    float:left; 
    width:900px;
    height:15px;
    background:#dcdcdc;     
}

.nav2 ul 
{
    list-style-type:none;
}

.nav2 ul li 
{
    float:left; 
    position:relative; 
    z-index:1000; 
    border-right:solid 1px rgb(175,175,175);
}

.nav2 ul li ul 
{
    display:none; 
    border:none;
}

.nav2 ul li ul 
{
    padding:0 30px 30px 30px;
    background:url(images/bg_head_bottom_nav_hover.gif) top center;    
}

.nav2 ul li a 
{
    float:left; 
    display:block; 
    height:29px; 
    line-height:24px; 
    padding:0 16px 0 16px; 
    text-decoration:none; 
    font-weight:bold; 
    color: rgb(100,100,100);
}

.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 
{
    background-color:rgb(210,210,210); 
    text-decoration:none;
}

.nav2 ul li:hover ul 
{
    display:block; 
    position:absolute; 
    z-index:998; 
    top:28px; 
    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:15px; 
    margin-left:-1px; 
    padding:4px 16px 4px 16px; 
    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);
}

.nav2 ul li:hover ul li a:hover 
{
    background-color:rgb(210,210,210); 
    text-decoration:none;
}

/*IE6*/
.nav2 ul li a:hover 
{
    background-color:rgb(210,210,210); 
    text-decoration:none;
}
.nav2 ul li a:hover ul 
{
    display:block; 
    position:absolute;
    z-index:997; 
    top:3.1em; 
    left:0; 
    margin-top:0.1em;
}

.nav2 ul li a:hover ul li a 
{
    display:block; 
    width:10em; height:1px; 
    line-height:1.3em; 
    padding:4px 16px 4px 16px; 
    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);
}

.nav2 ul li a:hover ul li a ul 
{
    visibility:hidden; 
    height:0px; 
    width:0px; 
    position:absolute; 
    z-index: 997;
}

.nav2 ul li a:hover ul li a:hover 
{
    background-color:rgb(210,210,210); 
    text-decoration:none;
}

/* Navigation strips */
#navbottom
{
    background: #000000;
    font-size: 8pt;
    font-weight: bold;
    font-family: Segoe UI;
    margin-right: auto;
    margin-left: auto;
    width: 900px;
    height: 35px;
    margin-top: 10px;
}
#navbottom a:hover {
    color:Gray;
    border-bottom:none;
}

#footer
{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 22px;
    color:#464646;
    font-weight:bold;
}

#navbottom ul
{
    margin: 0px;
    padding-top: 9px;
    list-style-type: none;
    height: 19px;
    text-align: center;
}

#navbottom ul li
{
    display: inline;
    color: #ffffff;
    margin-right: 25px;
}

#navbottom a:visited
{
    color: #ffffff;
    text-decoration: none;
}

#navbottom a:hover
{
    color: Gray;
    text-decoration: none;
}

#navbottom a:active
{
    color: #ffffff;
    text-decoration: none;
}

/* MAIN NAVIGATION */
.main-navigation .round-border-topright 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin:0 0 0 190px; 
    background:url(images/bg_corner_topright.gif) no-repeat;
}

/* MAIN CONTENT */
.column1-unit 
{
    width:440px; 
    margin-bottom:5px; 
    margin-bottom:5px;
    text-align:justify;
}

.column1-unit p
{
    text-align:justify; 
    font-size:7pt;
}

.column2-unit-left 
{
    float:left; 
    width:200px;
    margin-bottom:5px; 
    margin-bottom:5px;
}

.column2-unit-right 
{
    float:right; 
    width:200px; 
    margin-bottom:5px; 
    margin-bottom:5px;
}

.column3-unit-left 
{
    float:left; 
    width:120px; 
    margin-bottom:5px;
    margin-bottom:5px;
}

.column3-unit-middle 
{
    float:left; 
    width:120px; 
    margin-bottom:5px; 
    margin-bottom:5px; 
    margin-left:40px;
}

.column3-unit-right 
{
    float:right; 
    width:120px; 
    margin-bottom:5px; 
    margin-bottom:5px;
}

.column1-unit1 
{
    width:600px; 
    margin-bottom:5px; 
    margin-bottom:5px;
    text-align:justify;
}

.column1-unit-left1 
{
    float:left; 
    width:300px;
    margin-bottom:5px; 
    margin-bottom:5px;
}

.column1-unit-right1 
{
    float:right; 
    width:300px; 
    margin-bottom:10px; 
    margin-bottom:5px;
}

.column3-unit-left1 
{
    float:left; 
    width:186px; 
    margin-bottom:5px;
    margin-bottom:5px;
}

.column3-unit-middle1 
{
    float:left; 
    width:186px; 
    margin-bottom:5px; 
    margin-bottom:5px; 
    margin-left:40px;
}

.column3-unit-right1 
{
    float:right; 
    width:186px; 
    margin-bottom:5px; 
    margin-bottom:5px;
}

/* MAIN SUBCONTENT */
.subcontent-unit-border 
{
    width:183px; 
    margin:0 0 2.0em 0; 
    padding:0 0 5px 0; 
    border:solid 1px rgb(190,190,190); 
    background:rgb(235,235,235);
}

.subcontent-unit-border-blue  
{
    width:183px; 
    margin:0 0 2.5em 0; 
    padding:0 0 10px 0; 
    border:solid 1px rgb(137,170,214); 
    background-color:rgb(213,225,240);
}

.subcontent-unit-noborder 
{
    width:185px; 
    margin:0 0 2.5em 0; 
    padding:0 0 10px 0; 
    background:rgb(235,235,235);
}

.subcontent-unit-noborder-blue  
{
    width:185px; 
    margin:0 0 2.5em 0; 
    padding:0 0 10px 0; 
    background-color:rgb(213,225,240);
}

.round-border-topleft 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin-top:-1px; 
    margin-left:-1px;
    background:url(images/bg_corner_topleft.gif) no-repeat;
}

.round-border-topright 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin-top:-1px; 
    margin-left:174px;
    background:url(images/bg_corner_topright.gif) no-repeat;    
}

.round-noborder-topleft 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin-top:0px; 
    margin-left:0px;
    background:url(images/bg_corner_topleft.gif) no-repeat;
}

.round-noborder-topright 
{
    width:10px; 
    height:10px; 
    position:absolute; 
    z-index:100; 
    margin-top:0px; 
    margin-left:175px;
    background:url(images/bg_corner_topright.gif) no-repeat;
}

/*  CLEAR FLOATS  */
.page-container:after, .header:after, .main:after, .main-navigation:after, .main-content:after, .main-content div:after, .main-subcontent: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;
}

.column1-unit1:after, .column2-unit-left1:after, .column2-unit-right1:after, .column3-unit-left1:after, .column3-unit-middle1:after, .column3-unit-right1:after 
{
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

.subcontent-unit-border:after, .subcontent-unit-noborder:after 
{
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

.subcontent-unit-border-blue:after, .subcontent-unit-border-green:after, .subcontent-unit-border-orange:after 
{
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

.subcontent-unit-noborder-blue:after, .subcontent-unit-noborder-green:after, .subcontent-unit-noborder-orange: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:440px; 
    height:0.1em; 
    border:none; 
    background:#d7d7d7; 
    color:#d7d7d7;
}

.clear-contentunit1 
{
    clear:both; 
    width:600px; 
    height:0.1em; 
    border:none; 
    background:#d7d7d7; 
    color:#d7d7d7;
}

.clear-contentunit2 
{
    clear:both; 
    width:290px; 
    height:1px; 
    border:none; 
    background:#d7d7d7; 
    color:#d7d7d7;
}

/* PagingBulletedList */
.selectIndex {
    font-weight: bold;
    text-decoration:none;
}
.unselectIndex {
    font-weight:normal;
    text-decoration:underline;
}

.bulletdiv {
height: 600px; 
overflow: auto; 
overflow-y: scroll; 
border: solid 1px #CCCCCC;
}

/* Animation */
.demoarea {
	padding:20px;
	background:#FFF;
}

.demoarea p 
{
	padding:5px;
}

.demoheading {
	padding-bottom:20px;
	color:#5377A9;
	font-family:Arial, Segoe UI;
	font-weight:bold;
	font-size:1.5em;
}

.demobottom {
	height:8px;
	background:#FFF;
}

wireFrame {
display: 	none; 
overflow: hidden; 
z-index: 2; 
background-color: #FFFFFF; 
border: solid 1px #D0D0D0;

}

CloseButtonStyle {
background-color: #666666; 
color: #FFFFFF; 
text-align: center; 
font-weight: bold; 
text-decoration: none; 
border: outset thin #FFFFFF; 
padding: 5px;
}

/* Hover Menu */
.popupMenu {
	position:absolute;
	visibility:hidden;
}

.popupHover {
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#F5F7F8;
}

.TextIndicator_TextBox1 {
         background-color:Gray;
         color:White;
         font-family:Arial;
         font-size:x-small;
         font-style:italic;  
         padding: 2px 3px 2px 3px;   
    }

.BarIndicator_TextBox2 {
        color:Blue;
        background-color:Blue;
        padding-bottom:1px;
    }

.BarBorder_TextBox2 {
        border-style:solid;
        border-width:1px;
        width:200px;
        vertical-align:middle;
    }

.TextIndicator_TextBox3 {
         background-color:Blue;
         color:Yellow;
         font-size:small;
         font-variant:small-caps;  
         padding: 2px 3px 2px 3px;   
    }

.TextIndicator_TextBox3_Handle {
        width:16px;
        height:14px;
        background-image:url(images/Question.png);
        overflow:hidden;
        cursor:help;
    }
    
.subheading {
	padding:1em 0 0.8em 0;
	color:#0F2543;
	font-weight:bold;
	font-family:Arial, Segoe UI;
	font-size:1.2em;
}

.dynamicPopulate_Normal {	
	border:silver 1px inset;
	padding:2px;
	text-align:center;
	height:2em;
	margin:5px;
	width:400px;
}

.dynamicPopulate_Updating {
	background-image:url(images/loading.gif);
	background-repeat:no-repeat;
	border:silver 1px inset;
	text-align:center;
	padding:2px;
	height:2em;
	margin:5px;
	width:400px;
}

.dragContainer {
	background-color: #FFC0FF;
	height: 282px;
	width: 357px;
	border-bottom-color: black;
}

.dragHeader {
	background-color: #8080FF; 
	height: 48px;
	width: 358px;	
}

.dragBody {
	background-color: #FFC0FF;
	height: 213px; 
	width: 357px;	
}

.collapsePanel {
	width: 640px;
	height:0px;
	background-color:white;
	overflow:hidden;
}

.collapsePanelHeader {	
	width:640px;		
	height:20px;
	color: Yellow;
	background-color: Black;
	font-weight:bold;
	float:left;
	padding:5px; 
	cursor: pointer; 
	vertical-align: middle;
}

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Segoe UI;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.accordionLink
{
 background-color: #D3DEEF;
    color:#FFF;
}

.watermark {
	background: #FFAAFF;
}

.popupControl {
	background-color:#AAD4FF;
	position:absolute;
	visibility:hidden;
	border-style:solid;
	border-color: Black;
	border-width: 2px;
}

.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

.sampleStyleA {
	background-color:#FFF;
}

.sampleStyleB {
	background-color:#FFF;
	font-family:monospace;
	font-size:10pt;
	font-weight:bold;
}

.sampleStyleC {
	background-color:#ddffdd;
	font-family:Segoe UI;
	font-size:10pt;
	font-style:italic;
}

.sampleStyleD {
	background-color:Blue;
	color:White;
	font-family:Arial;
	font-size:10pt;
}