/*
-----------------------------------------------
Pathways Philippines
Designer: Juan Magdaraog
Company: Sparkplug Studios
URL:      www.sparkplug-studios.com
Date:     February 2006
----------------------------------------------- */

/*
-----------------------------------------------
Sections
I. Global Styles
II. Header Styles
III. Mainbox Styles
IV. Infopath Styles

----------------------------------------------- */


/*---- Global Styles ----*/

body {
        margin: 0 auto;
	padding: 0 0 0 0;
	background: url("http://pods.hapster.org/images/donor_bg.png") repeat-y scroll 50% 50% #4C68B4;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

img {
    border: 0;
}

#container {
    display: block;
	width: 750px;
	margin: 0 auto;
	padding: 0 0 0 0;
}

.both {
	clear: both;
}

strong, b {
         color: #fdca02;
}


/*---- Header Styles ----*/

#header {
	display: block;
	position: relative;
	width: 750px;
	height: 112px;
	background: #fff url('../i/bg-header.gif') repeat-x top center;
	margin: 0 auto;
	padding: 0;
}

#header #logo {
        display: block;
	width: 232px;
	height: 92px;
	background: #fff url('../i/logo.gif') no-repeat top left;
	text-indent: -10000px;
	margin: 6px 0 0 27px;
	padding: 0;
}

#header #logo a {
        display: block;
        width: 232px;
        height: 92px;
        text-decoration: none;
        border: 0;
}

#header #nav {
	display: block;
	width: 420px;
	height: 27px;
	position: absolute;
	bottom: 8px;
	right: 10px;
	list-style-type: none;
	background: url('../i/nav.png') no-repeat top left;
	margin: 0;
	padding: 0;
}

#header #nav li {
	float: left;
}

#header #nav a {
	display: block;
	height: 27px;
	text-indent: -10000px;
}

#nav a#about {width: 52px;}
#nav a#about:hover {width: 52px; background: url('../i/nav.png') no-repeat 0 -27px;}

#nav a#activities {width: 68px;}
#nav a#activities:hover {width: 68px; background: url('../i/nav.png') no-repeat -53px -27px;}

#nav a#faqs {width: 42px;}
#nav a#faqs:hover {width: 42px; background: url('../i/nav.png') no-repeat -120px -27px;}

#nav a#blog {width: 48px;}
#nav a#blog:hover {width: 48px; background: url('../i/nav.png') no-repeat -162px -27px;}

#nav a#gallery {width: 56px;}
#nav a#gallery:hover {width: 56px; background: url('../i/nav.png') no-repeat -210px -27px;}

#nav a#contact {width: 60px;}
#nav a#contact:hover {width: 60px; background: url('../i/nav.png') no-repeat -266px -27px;}

#nav a#help {width: 94px;}
#nav a#help:hover {width: 94px; background: url('../i/nav.png') no-repeat -326px -27px;}

/*---- Mainbox Styles ----*/

#mainbox {
	display: block;
	background: #5f78bc;
	color: #fff;
	margin: 0 0 0 0;
	padding: 10px 0 20px 0;
	position: relative;

}

#mainbox p {
    font-size: 1.2em;
    line-height: 1.6em;
	/*margin-bottom: 2em;*/
}

#mainbox #mainimage {
    display: block;
	width: 430px;
	height: 250px;
	margin: 0 0 0 0;
	padding: 0 0 0 10px;
}

#mainbox #maincontent {
    width: 430px;
	
}

#mainbox #maincontent p {
    margin: 0;
	margin-bottom: 50px;
	width: 430px;
	padding: 0 0 0 0;
	display: block;
}

#mainbox #article ol, #mainbox #article ul {
        font-size: 1.2em;
        line-height: 1.4em;
        margin: 0 0 0 20px;
        padding: 0;
}

#mainbox #sidebar {
         display: block;
         position: absolute;

         width: 290px;
         top: 10px;
         right: 0;
         margin: 0 10px 0 450px;

         padding: 0;
}

#mainbox #controlme {
        margin: 0;
	padding: 0;
}

#mainbox #mnfeatures {
        display: block;
        list-style-type: none;
	margin: 0 0 10px 0;
	padding: 0;
}

#mainbox #mnfeatures li {
        display: block;
	width: 290px;
        height: 80px;
        /*\height: 83px;
        h\eight: 80px;*/
	margin: 0;
        margin-bottom: 5px;
	padding: 0;
}


#mainbox #mnfeatures li img {
        margin: 0;
        padding: 0;
}

#mainbox #features {
	display: block;
    list-style-type: none;
	margin: 0 0 10px 0;
	padding: 0;
}

#mainbox #features li {
	display: block;
	width: 290px;
    height: 76px;
	margin: 0 0 10px 0;
	padding: 0;
}


#mainbox #features li a {
    display: block;
    width: 290px;
    height: 76px;
    padding: 0;
	margin: 0;
	color: #1f3a83;
	font-weight: bold;
	font-size: 14px;
    background: url('../i/bg-features2.png') no-repeat top left;
    text-decoration: none;
}

#mainbox #features li a:hover {
    background: url('../i/bg-features2.png') no-repeat 0 -76px;
}

#mainbox #features li a p {
    margin: 0;
    padding: 5px 10px;
    font-size: 12px;
}

#mainbox #features li a p .featdes {
    padding: 0;
	margin: 0;
	color: #1f3a83;
	font-weight: normal;
	font-size: 12px;
    text-decoration: none;
}


#featstory, #article {
	display: block;
    width: 430px;
    background: #5f78bc;
	margin: 20px 0 0 0;
	padding: 0 0 0 10px;
	/*float: left;*/
}

#article table {
    padding: 0;
    margin: 0;
    font-size: .9em;
   
border-collapse: collapse;

}

#article table th, td {
    text-align: left;
    margin: 0;
    padding: 3px;
    border: 1px solid #BAC7EB;
    
}

#featstory .headline h2, #howtohelp .headline h2, #sidebar h2 {
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2.2em;
	color: #efe40b;
	margin: 0;
	padding: 0;
}

#featstory .headline {
        background: url('../i/pencil.png') no-repeat 380px 0;
}

#article .headline {
        font-size: 2.2em;
        font-weight: normal;
        color: #efe40b;
        margin: 0;
        padding: 0;
        font-family: Georgia, "Times New Roman", Times, serif;
	/*background: url('../i/pencil.png') no-repeat 380px 0;*/
}

#howtohelp .headline {
	background: url('../i/qmark.png') no-repeat 235px 0;
        padding-top: 10px;
}

#featstory .headline h3, #featstory h3, #article h3 {
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5em;
	color: #efe40b;
	margin: 0;
	padding: 0;
}

#featstory .subhead, #featstory .headline .subhead, #howtohelp .headline .subhead, #article .subhead {
	color: #f2f695;
	margin: 0;
	padding: 0;
}

#featstory .headline .sitemap {
	color: #f2f695;
	margin: 0;
	padding: 0 0 20px 0;
}

#featstory .headline .subhead02 {
	color: #f2f695;
	margin: 0;
	padding: 5px 0 0 0;
}

#featstory p, #article p {
	margin-right: 30px;
	padding: 0 0 0 0;
}

#featstory img {
	margin-left: 145px;
}

#featstory a, #howtohelp a, #article a {
	color: #f8ea00;
	text-decoration: underline;
}

#featstory a:hover, #howtohelp a:hover {
	color: #f8ea00;
	text-decoration: none;
}

#howtohelp {
    display: block;
    /*position: absolute;
    top: 278px;
    width: 290px;*/
    margin: 0;
    padding: 0;
}

#howtohelp img {
	margin-left: 41px;
}

#howtohelp p.fieldtitle {
	font-size: 14px;
	color: #efe40b;
	font-weight: bold;
}

#howtohelp .field {
	border: 1px solid #999999; margin: 0 0 0 0px;
}


#sidebar .recententries {
        list-style-type: none;
        list-style-position: none;
        margin: 10px 0 0 0;
        padding: 0;
}

#sidebar .recententries li {
        margin: 0 0 5px 0;
        padding: 10px;
        color: #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
}

#sidebar .recententries li a {
        margin: 0;
        padding: 0;
        color: #f7a800;
        font-weight: bold;
        text-decoration: none;
}

#sidebar .recententries li a:hover {
        margin: 0;
        padding: 0;
        background: #f7a800;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
}

#sidebar a {
        color: #f8ea00;
	text-decoration: underline;
}

#sidebar ul {
        margin: 0 0 0 15px;
        padding: 0;
}

#sidebar ul.schools {
        list-style-type: none;
        margin: 10px 0;
        padding: 0;
}

#sidebar ul.schools li {
         padding: 0 0 0 20px;
         margin: 0 0 10px 0;
         background: url('../i/blt-star.gif') no-repeat 0 0;
}

#sidebar .subhead {
        color: #f2f695;
	margin: 0;
	padding: 0;
}

#sidebar #inhowtohelp {
        background: #98abe0;
        padding: 0;
        margin: 10px 0 10px 0;
        color: #fff;
}

#sidebar #inhowtohelp h2, #sidebar #inhowtohelp p, #sidebar #inhowtohelp form {
	margin: 10px;
}

#sidebar #inhowtohelp .btn input {
        background: #fbc800;
        color: #fff;
        border-top: 1px solid #ffe788;
        border-left: 1px solid #ffe788;
        border-bottom: 1px solid #a88706;
        border-right: 1px solid #a88706;
}


#sidebar #eventlist {
	list-style-type: none;
	margin: 20px 0;
}

#sidebar #eventlist li {
	margin: 0;
	padding: 10px 5px;
	border-bottom: 1px dotted #ffffff;
}

#sidebar #eventlist li:hover {
	background: #f2f695;
	color: #845a08;
}

#sidebar a.linkbtn {
	margin: 10px 0;
	padding: 5px 10px;
	background: #fdca02;
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	border-top: 2px solid #fff8dd;
	border-right: 2px solid #fff8dd;
	border-bottom: 2px solid #d7ac02;
	border-left: 2px solid #d7ac02;
}






/*---- InfoPath Styles ----*/

#infopath {
       position: relative;
       /*width: 750px;*/
       background: url('../i/infopath_bg.gif') repeat-x;
	   /*margin: 0 auto;*/
	   padding: 14px 0 0 0;
       clear: both;
}

#pathblog {
    width: 420px;
	margin: 0 0 0 0;
	padding: 0 0 0 20px;
}

#contact h2 {
	display: block;
	width: 290px;
    color: #F7A800;
	font-size: 14px;
	font-weight: bold;
	padding: 30px 0 4px 0;
	margin: 0;
	background: url('../i/envelope.png') no-repeat 225px 0;
	border-bottom: #C2C2C2 1px solid;
}

#infopath #pathblog h2 {
	display: block;
	color: #F7A800;
	font-size: 14px;
	font-weight: bold;
	padding: 30px 0 4px 0;
	margin: 0;
	border-bottom: #C2C2C2 1px solid;
	background: url('../i/exmark.png') no-repeat 370px 0;
	vertical-align: baseline;
        text-align: left;
}

#pathblog p.infoheadline, #infopath #contact p.contactheadline {
    padding: 20px 0 0 0;
    color: #5C7AC9;
	font-size: 1.3em;
	font-weight: bold;
}

#pathblog p.infodate {
    padding: 0 0 10px 0;
    color: #C2C2C2;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
}

#pathblog p {
        margin: 0 auto;
	padding: 0 20px 0 0;
	text-align: justify;
	font-size: 1.2em;
        line-height: 1.6em;
	color: #5C6362;
}

#pathblog img {
    float: left;
    xmargin-left: 188px;
    padding: 0;
    margin: 10px 10px 0 0;
}

#pathblog p a { color: #5C7AC9; }
#pathblog p a:hover { color: #5C7AC9; text-decoration: none; }

#infopath #contact {
    position: absolute;
	margin: 0 0 0 452px;
	padding: 0 0 0 0;
	top: 14px;
	width: 290px;
	display: block;
}

#infopath #contact img.cenvelope {
    margin: 0 0 0 147px;
	padding: 0 0 0 0;
}


#infopath #contact p {
        margin: 0 auto;
	padding: 0;
        font-size: 1.2em;
	line-height: 1.6em;
	color: #5C6362;
}

#footer {
	position: relative;
}

#footer p{
  	padding: 30px 0 20px 20px;
   	margin: 0 0 0 0;
   	font-size: 14px;
   	color: #5C6362;
   	clear: both;
}

#footer #intouch {
	position: absolute;
	top: -10px;
	left: 430px;
}


/*---- Blog Section Styles ----*/

#article .postdetails {
       color: #f2f695;
	margin: 0;
	padding: 0;
}

.browsearchive a {
        display: block;
        width: 130px;
        height: 44px;
        margin: 0;
        padding: 0;
        background: url('../i/btn-archive.jpg') no-repeat top left;
        text-indent: -10000px;
        float: left;
}

.subscriberss a {
        display: block;
        width: 130px;
        height: 44px;
        margin: 0 0 0 130px;
        padding: 0;
        background: url('../i/btn-rss.jpg') no-repeat top left;
        text-indent: -10000px;
}

img.left {
        border: 1px solid #fff;
        float: left;
        margin: 2px 10px 2px 2px;
}

.left img {
        border: 1px solid #fff;
        float: left;
        margin: 2px 10px 2px 2px;
}

.right img {
        border: 1px solid #fff;
        float: left;
        margin: 2px 2px 2px 10px;
}

.center img {
        border: 1px solid #fff;
        margin: 0 0 0 0;
}


/*---- Comments Styles ----*/

#mainbox #article .comments {
        margin: 10px 0;
        padding: 0 0 0 10px;
        font-size: 1em;
}

#mainbox #article .comments li {
        border: 1px solid #dee5f7;
        margin: 0 0 10px 20px;
        padding: 10px;
        background: #b0bee2;
}

#mainbox #article .comments li p {
        margin: 0;
        padding: 0;
}

#mainbox #article .comments li a {
        color: #5F78BC;
        font-weight: bold;
        text-decoration: none;
}

#mainbox #article .comments li a:hover {
        background: #5F78BC;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
}
.night {
background-color: #000;
display:none;
opacity: 0.0; /* Safari, Opera */
-moz-opacity:0.0; /* FireFox */
filter: alpha(opacity=0); /* IE */
z-index: 399;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}