/*
Theme Name: Beracah International Mission
Theme URI: http://missions.beracahmusic.com
Version: 1.0
Description: Customized theme for Beracah Music by Carine Ma Fat (Design) and David Chung (Implementation)
Author: Carine & David
Author URI:
Template: sandbox
*/
/*************
LAYOUT
*************/
* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    background:#F7F5F3 url(images/Body_Background_Bottom_1024x364.jpg)  repeat-x scroll bottom center;
    max-width:1680px;
    min-width:768px;
}

div#menu { /* top nav bar */
  background:#F7F5F3 url(images/Nav_background_1024x43.jpg) top center repeat-x;
  height:43px;

  width:100%;
  position:fixed; /* visible even if scrolling */
  left:0;
  top:0;
  z-index:100;/* always on top */
}

div#container {
    float:left;

    margin:0 0 100px auto; /* margin from footer */
    width:66%;
}

div#content {
    top:43px; /* Leave gap for top nav bar */
    position:relative;

    max-width:650px;
    min-width:100px;
    margin:0 2% 0 5%; /* margin from browser and side bar */
    float:left; /* hang to left edge */
    min-height:400px;
}

div.sidebar {
    position: relative;
    top:43px; /* Leave gap for top nav bar */
    float:left; /* hang as close to content as possible */
    margin:55px 5% 0 2%; /* 20px down to match post title, mirror content left/right */
    width:250px;
}

div.skip-link {
    display:none;
}

div#secondary {
    clear:right;
    display:none;
}

div#footer {
    position: relative;
    top:43px; /* displaced due to top nav bar */
}

div#nav-above, div#nav-below {
    margin:1em 0;
}
/*************
TOP NAV
*************/
div#menu ul li ul {
    display: none; /* ignore child pages for top nav */
}

div#menu ul {
    /* common elemments to all list items */
    list-style:none;
  

    width: 100%;
    height:43px;
}

div#menu ul li a { /* Applies to all links in nav menu */
    position:absolute;
    top:12px;
    text-decoration:none;
    height:0; /* hide the link text */
    padding:21px 0 0;
    background:transparent url(images/BeracahMission_NavTop.png) no-repeat;
    overflow:hidden;
    display:block;
    z-index:150;
}

/* home */
div#menu ul li.page-item-15 a { 
    left:36px;
    width:51px;
    background-position: -15px -2px; 
}
div#menu ul li.page-item-15 a:hover { 
    background-position: -15px -23px;
}

/* our mission */
div#menu ul li.page-item-5 a {
    left:97px;
    width:54px;
    background-position: -85px -2px;
}
div#menu ul li.page-item-5 a:hover {
    background-position: -85px -23px;
}

/* our music */
div#menu ul li.page-item-7 a {
    left:171px;
    width:42px;
    background-position: -165px -2px;
}
div#menu ul li.page-item-7 a:hover {
    background-position: -165px -23px;
}

/* Donate */
div#menu ul li.page-item-9 a {
    left:232px;
    width:54px;
    background-position: -233px -2px;
}
div#menu ul li.page-item-9 a:hover {
    background-position: -233px -23px;
}

/* blog */
div#menu ul li.page-item-11 a {
    left:306px;
    width:31px;
    background-position: -306px -2px;
}
div#menu ul li.page-item-11 a:hover {
    background-position: -306px -23px;
}

/* Contact us*/
div#menu ul li.page-item-13 a {
    left:355px;
    width:63px;
    background-position: -363px -2px;
}
div#menu ul li.page-item-13 a:hover {
    background-position: -363px -23px;
}


/********************
Header-home Image Map
*********************/
div#header-home { /* large image map */
  

    width:100%;
    height:658px;
    position:relative;
    background:#fff url(images/Banner_Home_1680x658.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-home ul { /* top level container */
    list-style:none;
    margin:0 auto; /* center UL in parent */ 
 
    height:658px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:hidden;
}

#header-home li {
    list-style-type:none; 
    height:107px;
    width:304px; 
    position:absolute;
}

#header-home li a { /* settings common to links replaced by buttons */
    position:absolute; /* position must be relative to parent container */
    display:block; 
    height:0; /* hide link text */
    padding-top:110px; /*padding displays background despite 0 height */
    background:transparent url(images/BeracahMission_HdrBtns.png) no-repeat; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
}

#header-home a.home_button_logo {
    left:-9999px; /* Hide link as we're in home page */ 
}

#header-home a.button_our-mission {
    left:10px; 
    top:387px; 
    width:302px;
    background-position: 0px 0px;
}
#header-home a.button_our-mission:hover {
    background-position: 0px -111px;
}

#header-home a.button_our-music {
    left:725px; 
    top:387px; 
    width:260px;
    background-position: -305px -0px; 
}
#header-home a.button_our-music:hover {
    background-position: -305px -111px;
}

#header-home a.button_donate {
    left:647px; 
    top:10px; 
    width:182px;
    background-position: -568px -0px;
}
#header-home a.button_donate:hover {
    background-position: -568px -111px;
}

/*************
General stuff
*************/
div#menu ul li,div.gallery dl,div.navigation div.nav-previous {
float:left;
}

input#author,input#email,input#url,div.navigation div {
width:50%;
}

body, div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
margin:0;
padding:0;
}

#theme-link, #generator-link {
   display:none;
}

/*************
Font styles
*************/

a {
   color:#33CC66;
}

h2.entry-title { /* Post title background */
    background:transparent url(images/gradient_line_blog.png) no-repeat bottom left;
    font-size:150%;
    text-transform: capitalize; 
    font-variant:small-caps;
}

.entry-title a{ /* Post title */
    font-size:100%;
    color:#005771;
    text-decoration: none;
}
.entry-title a:hover { /* Post title */
    color:#999999;
}

.entry-content h1, .entry-content h2, .entry-content h3 { /** header styles **/
    font-size:150%;
    text-transform: capitalize; 
    font-variant:small-caps;
  
    padding:12px 40px 0 0;
}


body {
    font-family:'Trebuchet MS','Lucida Sans Unicode','Lucida Grande',Verdana,Geneva,Helvetica,Futura,Arial,sans-serif;
    font-size: 1em;
}

.verse { /* verses */
   font-weight:bold;
   font-size: 150%;
   color: #999999;
}

p {
   color: #333333;
   margin: 1em 0 1em 0;
}

.entry-meta {
    font-size:70%;
    margin-bottom:40px;
    position:relative;
    top:0;
}

.single div.entry-content {
    margin-top:30px;
}
/********************************
Image Replacement for page titles
********************************/

.page h2.entry-title { /* Common elements */
    height:0;
    margin:40px 0 0 0; /* leave gap from header */
    padding:63px 0 0 0;
    overflow:hidden;
}

#post-15 h2.entry-title { /*  Welcome page title*/
    width:240px;
    background: url(images/Welcome_txt.png) no-repeat;
}

#post-5 h2.entry-title { /* Our Mission page title*/
    width:280px;
    background: url(images/OurMission_txt.png) top left no-repeat;
}

#post-7 h2.entry-title { /* Our Music page title*/
    width:240px;
    background: url(images/OurMusic_txt.png) no-repeat;
}

#post-9 h2.entry-title { /* Donate page title*/
    width:240px;
    background: url(images/Donate_txt.png) no-repeat;
}

#post-13 h2.entry-title { /* Contact Us page title*/
    width:265px;
    background: url(images/ContactUs_txt.png) no-repeat;
}

/*************
FOOTER
*************/
div#footer {
    clear:both;
    width:100%;
    background: transparent URL(images/Footer_Background_1024x324.jpg);
    height:50px;
    font-size: 80%;
    color: #F7F5F3;
}

div#footer div {
   position:relative;
   top:14px;
}

div#footer div#links {
    float:left;
}

div#footer div#copyright {
    float:right;
}

/*************
Other Navigation
*************/
div#nav-above {
    margin-bottom:1em;
}

div#nav-below {
    margin-top:1em;
}

div#nav-images {
    height:150px;
    margin:1em 0;
}

div.navigation {
    height:1.25em;
}

div.navigation div.nav-next {
    float:right;
    text-align:right;
}


/*******************
 SIDEBAR
*******************/

/*** Search ***/
#search {
    margin-bottom: 3em;
}

#searchform {
    margin: 0.4em 0 2em 0;
}

#search-input {
    height: 18px;
    width: 140px;
    float: left;
    font-size:14px;
    vertical-align: middle;
}

#search-button {
    height: 28px;
    float: left;
    padding: 0;
}

/*** End Search ***/

.sidebar * a {
   text-decoration:none;
   font-size: 100%;
   color: #999999;
   font-size:80%;
}

.sidebar * a:hover {
    color:#555555;
}

div.sidebar h3 {
font-size:1.2em;
}


div.sidebar li {
list-style:none;
margin:0 0 2em;
}

div.sidebar ul ul {
margin:0;
}

div.sidebar ul ul li {
margin:0;
}

div.sidebar ul ul ul {
margin:0 0 0 0.5em;
}


#recent-posts h3.widgettitle {
    height:0;
    padding-top:45px;
    background: url(images/RecentBlog_txt.png) no-repeat;
    width:237px;
    overflow:hidden;
}


.sidebar ul li ul li {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
  
    padding:3px 0 8px 0;
    background:url(images/gradient_line_sidecolumn.png) no-repeat bottom left;
}


/*************
MISC
*************/
.entry-title,.entry-meta {
clear:both;
}


form#commentform .form-label {
margin:1em 0 0;
}

form#commentform span.required {
background:#fff;
color:#c30;
}

form#commentform,form#commentform p {
padding:0;
}

input,textarea {
padding:0.2em;
}

div.comments ol li {
margin:0 0 3.5em;
}

textarea#comment {
height:13em;
margin:0 0 0.5em;
overflow:auto;
width:66%;
}

.alignright,img.alignright{
float:right;
margin:1em 0 0 1em;
}

.alignleft,img.alignleft{
float:left;
margin:1em 1em 0 0;
}

.aligncenter,img.aligncenter{
display:block;
margin:1em auto;
text-align:center;
}

div.gallery {
clear:both;
height:180px;
margin:1em 0;
width:100%;
}

p.wp-caption-text{
font-style:italic;
}

div.gallery dl{
margin:1em auto;
overflow:hidden;
text-align:center;
}

div.gallery dl.gallery-columns-1 {
width:100%;
}

div.gallery dl.gallery-columns-2 {
width:49%;
}

div.gallery dl.gallery-columns-3 {
width:33%;
}

div.gallery dl.gallery-columns-4 {
width:24%;
}

div.gallery dl.gallery-columns-5 {
width:19%;
}

/*************
Header Mission
*************/
div#header-mission { /* shorter banner */
  

    width:100%;
    height:214px;
    position:relative;
    background:#fff url(images/Banner_OurMission_1680x214.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-mission ul { /* top level container */
    margin:0 auto /*center the UL in the page */; 

    height:214px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:visible;
}

#header-mission li {
    list-style-type:none; 
    position:absolute;
}

#header-mission h2.label {
  
    position:absolute; /* position must be relative to parent container */
    Left: 777px ;
    Top: 155px;
    /*left:475px; 
    top:128px;*/ 
    height:0; /* hide the text */
    padding-top:48px; /*display the background through despite text being hidden */
    width:196px;
    overflow:hidden; 
    z-index:10;
    background:transparent url(images/InnerBanner_ourMission_txt.png) no-repeat 0 0;
}

#header-mission a.button_logo {
    position:absolute; /* position must be relative to parent container */
    display:block; 
    left:0;
    top:126px; 
    height:0; /* hide the text */
    padding-top:96px; /*create clickable area despite text being hidden */
    background:transparent url(images/Logo_innerpages_pale.png) no-repeat 0 0; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
    width:196px;
}

/*************
Header Music
*************/
div#header-music { /* shorter banner */
  

    width:100%;
    height:214px;
    position:relative;
    background:#fff url(images/Banner_OurMusic_1680x214.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-music ul { /* top level container */
    margin:0 auto /*center the UL in the page */; 

    height:214px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:visible;
}

#header-music li {
    list-style-type:none; 
    position:absolute;
}

#header-music h2.label {
  
    position:absolute; /* position must be relative to parent container */
    Left: 745px;
    Top: 150px;
    /*left:475px; 
    top:128px;*/ 
    height:0; /* hide the text */
    padding-top:48px; /*display the background through despite text being hidden */
    width:196px;
    overflow:hidden; 
    z-index:10;
    background:transparent url(images/InnerBanner_ourMusic_txt.png) no-repeat 0 0;
}

#header-music a.button_logo {
    position:absolute; /* position must be relative to parent container */
    display:block; 
    left:0;
    top:126px; 
    height:0; /* hide the text */
    padding-top:96px; /*create clickable area despite text being hidden */
    background:transparent url(images/Logo_innerpages_pale.png) no-repeat 0 0; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
    width:196px;
}


/****** Image replacement for table headers ********/
#music_download th span{
    display:block;
    height:0;
    padding:33px 0 0;
  
    overflow:hidden;
}

#music_download th.title-header span{
    background: transparent url(images/MusicTitle_txt.png) top left no-repeat;
}

#music_download th.download-header span{
    background: transparent url(images/Download_txt.png) top right no-repeat;
}

/******* Sprites for music page ********/

#music_download, #music_download td {
    border-collapse: collapse;
    margin:0 10px 0 0;
    padding:0 4px;
    border: 0px none;
}

#music_download .song-title{
   font-family: Arial, Helvetica, sans-serif;
   font-weight:bold;
   font-size: 100%;
   width:100%;
   color: #412609;
}
#music_download .song-title:hover{
   color: #CC6600;
}

#music_download .odd-row {
    background: transparent url(images/OurMusic_oddRowBgrnd.png) top center repeat-x;
    height:47px;
}

#music_download .sprite.icon { /* common to all sprites */
    height:39px;
    width:39px;
    background: url(images/OurMusic_Downloadbtns.png) no-repeat;
    border: 0 none;
    display:block;
}

#music_download .sprite.icon.mp3{
    background-position: -2px -2px; 
}
#music_download .sprite.icon.mp3:hover {
    background-position: -2px -46px; 
}

#music_download .sprite.icon.lyrics-and-chords{
    background-position: -46px -2px; 
}
#music_download .sprite.icon.lyrics-and-chords:hover{
    background-position: -46px -46px; 
}

#music_download .sprite.icon.opensong{
    background-position: -91px -2px; 
}
#music_download .sprite.icon.opensong:hover{
    background-position: -91px -46px; 
}


/*********** Tool tips ***********/
a.tooltip { position:relative; }
a.tooltip span { display:none; } /* don't display the span in normal times */ 
a.tooltip:hover span { /* common for tooltips */
    display:block; /* display span upon hover */
    visibility:visible;
    position:absolute;
    height:38px;
    background:transparent url(images/OuMusic_tooltips.png) top left no-repeat;
    overflow:visible;
    z-index:50;
    top:-27px; /* tooltip distance from top of item */  
}

a.tooltip.mp3:hover span {
    background-position: 0px 0px;
    width:73px;
    left:-20px;
}

a.tooltip.lyrics-and-chords:hover span {
    background-position: -73px -0px;
    width:127px;
    left:-55px;
}

a.tooltip.opensong:hover span {
    background-position: -199px -0px;
    width:129px;
    left:-55px;
}


/*************
Header Donate
*************/
div#header-donate { /* shorter banner */
  

    width:100%;
    height:214px;
    position:relative;
    background:#fff url(images/Banner_Donate_1680x214.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-donate ul { /* top level container */
    margin:0 auto /*center the UL in the page */; 

    height:214px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:visible;
}

#header-donate li {
    list-style-type:none; 
    position:absolute;
}

#header-donate h2.label {
  
    position:absolute; /* position must be relative to parent container */
    Left: 777px;
    Top: 155px;
    /*left:475px; 
    top:128px;*/ 
    height:0; /* hide the text */
    padding-top:48px; /*display the background through despite text being hidden */
    width:196px;
    overflow:hidden; 
    z-index:10;
    background:transparent url(images/InnerBanner_Donate_txt.png) no-repeat 0 0;
}

#header-donate a.button_logo {
    position:absolute; /* position must be relative to parent container */
    display:block; 
    left:0;
    top:126px; 
    height:0; /* hide the text */
    padding-top:96px; /*create clickable area despite text being hidden */
    background:transparent url(images/Logo_innerpages.png) no-repeat 0 0; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
    width:196px;
}

/*************
Header Blog
*************/
div#header-blog { /* shorter banner */
  

    width:100%;
    height:214px;
    position:relative;
    background:#fff url(images/Banner_OurMission_1680x214.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-blog ul { /* top level container */
    margin:0 auto /*center the UL in the page */; 

    height:214px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:visible;
}

#header-blog li {
    list-style-type:none; 
    position:absolute;
}

#header-blog h2.label {
  
    position:absolute; /* position must be relative to parent container */
    Left: 777px;
    Top: 155px;
    /*left:475px; 
    top:128px;*/ 
    height:0; /* hide the text */
    padding-top:48px; /*display the background through despite text being hidden */
    width:196px;
    overflow:hidden; 
    z-index:10;
    background:transparent url(images/InnerBanner_Blog_txt.png) no-repeat 0 0;
}

#header-blog a.button_logo {
    position:absolute; /* position must be relative to parent container */
    display:block; 
    left:0;
    top:126px; 
    height:0; /* hide the text */
    padding-top:96px; /*create clickable area despite text being hidden */
    background:transparent url(images/Logo_innerpages_pale.png) no-repeat 0 0; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
    width:196px;
}


/*************
Header Contact
*************/
div#header-contact { /* shorter banner */
  

    width:100%;
    height:214px;
    position:relative;
    background:#fff url(images/Banner_Donate_1680x214.jpg) top center no-repeat; 
    top:43px; /* Leave gap for top nav bar */
    overflow:hidden;
}

#header-contact ul { /* top level container */
    margin:0 auto /*center the UL in the page */; 

    height:214px;
    width:1000px;
    position:relative; 
    z-index:1;
    overflow:visible;
}

#header-contact li {
    list-style-type:none; 
    position:absolute;
}

#header-contact h2.label {
  
    position:absolute; /* position must be relative to parent container */
    Left: 787px;
    Top: 155px;
    /*left:475px; 
    top:128px;*/ 
    height:0; /* hide the text */
    padding-top:48px; /*display the background through despite text being hidden */
    width:196px;
    overflow:hidden; 
    z-index:10;
    background:transparent url(images/InnerBanner_contactUs_txt.png) no-repeat 0 0;
}

#header-contact a.button_logo {
    position:absolute; /* position must be relative to parent container */
    display:block; 
    left:0;
    top:126px; 
    height:0; /* hide the text */
    padding-top:96px; /*create clickable area despite text being hidden */
    background:transparent url(images/Logo_innerpages.png) no-repeat 0 0; 
    overflow:hidden; 
    text-decoration:none;
    z-index:10;
  
    width:196px;
}

/****************
Popup for Credits
**************/
.popup-trigger {
    position:relative;
    float: left;
    z-index: 0;
}

.popup {
    display: none; /* keeps the popup hidden if no JS available */
    bottom: 10px;
    left: -127px;
    width: 370px;
    position: absolute;
    z-index:50;
    border-collapse: collapse;
}

.popup-contents h1 {
    font-size: 120%;
}

.popup-contents ul {
    list-style-position: inside;
}

#credits #david-carine {
    font-size: 120%;
}

.popup td.corner { height: 15px; width: 19px; }
.popup td#topleft { background-image: url(images/bubble-1.png); }
.popup td.top { background-image: url(images/bubble-2.png); }
.popup td#topright { background-image: url(images/bubble-3.png); }
.popup td.left { background-image: url(images/bubble-4.png); }
.popup td.right { background-image: url(images/bubble-5.png); }
.popup td#bottomleft { background-image: url(images/bubble-6.png); }
.popup td.bottom { background-image: url(images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(images/bubble-8.png); }
.popup-contents { background-color:#fff; color:#333333; text-align:left;}

/** WP Stats **/
img#wpstats{width:0px;height:0px;overflow:hidden} /** Hide WP Stats smiley **/