html { font-size:12pt; /* font-size:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; */ }
html,button,input,select,textarea { font-family:arial,verdana,sans-serif; }
body { margin:0; font-family:arial,verdana,sans-serif; background-color:#cbe6e5; /* font-size: 1.0em; */ }

#clear_background { background-color:#fff; }

/* START default styling */
a:link, a:visited { color:#da3079; text-decoration:underline; }
a:hover { color:#ff0000; text-decoration:underline; }
/* END default styling */

.clearboth { clear:both; }

/* START header area with logos */
#header {
/* position:fixed; border-top: 1px solid #0000ff; */
  height:96px; top:0; left:0; right:0; width:100%; z-index:9999; overflow:hidden;
  background-color:#cbe6e5; /* darker colors -> #b9dddd; #c1e1e1; */

  border-bottom: 1px solid #0000ff;
}

#logo { float:left; padding-left:6px; }
.logosize { width:240px; height:96px; }

#freesong { float:left; display:none; padding-left:20px; padding-top:12px; font-weight:bold; font-size:1.6em; color:#c4478a; }
#freebirthdaysong { float:left; display:none; }
 /* END header area with logos */

/* START footer area */
#footer {
  text-align:center; padding-top:6px; padding-bottom:20px;
  font-family:verdana,arial,helvetica,sans-serif;
  color:#004107; font-size:.72em;
}
#footer a { color:#004107; }
#footer a:hover { color:#ff0000; }

/*  END footer area */

/* START search bar css */

#search_bar_container {
/*  float:left; */
/*  padding-bottom:6px;  */  /* for mobile */
  padding-top:26px;          /* for non-mobile (larger screens) */
  margin-left:270px;
  margin-right:auto;
  padding-right:20px;
  max-width:500px;
}
#search_bar {
/*  background-color: #22afcd; */
  overflow:hidden;
  height:40px;
  border-style:solid;
  border-color: #22afcd;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  position:relative;
  background-color:white;
  margin: 0 auto;
}
#search_bar span  {
  display:block;
  overflow:hidden;
  padding:0 5px;
  border:0;
  margin-left:10px;
}
#search_bar input { border:none; }

#inputicon { float:right; padding-left:10px; padding-right:8px; margin-top:2px; }
.searchbutton { float:right;  padding-top:4px; }

#inputfyn {
/*  margin-left:20px; */
  width:100%;
  margin-top:6px;
  font-size:1.4em;
  background-color:transparent;
}

/*  START Search Bar FOOTER Styling */
#search_bar_container_footer {
  display:none;
  text-align:center;
  padding-top:2px;
  padding-bottom:6px;
}
#search_bar_footer {
  overflow:hidden;
  height:40px;
  border-style:solid;
  border-color:#22afcd;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  position:relative;
  background-color:white;
  margin: 0 auto;
}

#search_bar_footer span  {
  display:block;
  overflow:hidden;
  padding:0 5px;
  border:0;
  margin-left:10px;
}
#search_bar_footer input { border:none; }
#inputicon_footer { float:right; padding-left:10px; padding-right:8px; margin-top:2px; }
.searchbutton { float:right;  padding-top:4px; }

#inputfyn_footer {
/*  margin-left:20px; */
  width:100%;
  margin-top:6px;
  font-size:1.4em;
  background-color:transparent;
}
/*  END Search Bar FOOTER Styling */

/* END search bar css */

/* START FYN letters css */

#fyn_container { text-align:center; }
#fyn_container_footer { text-align:center; /* display:none; */ }

.fyn_letters a:hover   { background:#188cb4; border-color:#188cb4; color:#fff; }
.fyn_letters a.active { background:#188cb4; border-color:#188cb4; color:#fff; cursor:default; }

.fyn_letters { text-align:center;  margin:.4em auto; } 

.fyn_letters a {
  border:1px solid #e8e8e8;
  border-radius:3px;
  display:inline-block;
  line-height:1;
  margin:0 1.5% .6% 1.5%;   /* margin around the blocks */
  padding:2px;              /* padding around the letters */
  width:5%;                 /* width of each block */
  text-align:center;
  text-decoration:none;
/*  font-size:.9em; display:block; float:left; */
}

.fyn_age a {
  display:inline-block;
  line-height:1;
  margin:0 1.0% .6% 1.0%;  /* margin around the blocks */
  padding:2px;             /* padding around the letters */
  width:11%;               /* width of each block */
/*  font-size: .9em; */
  text-align:center;
}

/* END FYN letters css */

/*  START Tabbed Navigation css */

#tabbed_container {
  clear:both;
  margin:0px auto;
  padding-bottom:16px;
  border:1px solid #fff;
/*  overflow: auto; */
}
 
#tabbed_container ul {
  list-style:none;
  margin:0px;
  padding:0px;
}

#tabbed_container ul li {
  display:list-item;
/*  background-color:#0000ff; */
  background-color:#188cb4;
  text-align:center;
  line-height:24px;
  color:#ffffff;
  font-weight:bold;
  float:left;
  margin:0px;
  padding:0px;
}

#tabbed_container ul li a {
  color:#ffffff;
  display:block;
  text-decoration:none;
  vertical-align:middle;
  border:1px solid #fff;
}

#tabbed_tabs { width:100%; }

#tab_wishes {width:24%;line-height:26px;}
#tab_lyrics {width:21%;line-height:26px;}
#tab_info {width:15%;line-height:26px; }
#tab_extra {width:20%; line-height:26px;}
#tab_more {width:20%;line-height:26px;}

/* #tab_wishes a:hover, #tab_lyrics a:hover, #tab_info a:hover, #tab_extra a:hover, #tab_more a:hover { background:#188cb4; } */
#tab_wishes a:hover, #tab_lyrics a:hover, #tab_info a:hover, #tab_extra a:hover, #tab_more a:hover { background:#0000ff; } 

#tabbed_navigation { display:none; }

#sub_wishes, #sub_lyrics, #sub_info, #sub_extra, #sub_more { display:none; }

#sub_wishes_ul ul {
  margin-top:0px;
  margin-left:-36px; 
  padding-top:0px;
  list-style-type:none;
/*  display:none; */
}

#sub_wishes_ul li {
  line-height:2.2;
  width:100%;
  border-bottom:1px solid #0000ff;
}

#sub_wishes_ul li a:link { text-decoration:none; color:#c4478a; }

/*
.sw_li  a:link {  color: #c4478a; }
.sw_li  a:hover { color:#00ff00;  } // most likely not wanted - hover on mobile tabbed navigation 
*/

/*  END Tabbed Navigation css */

/*  START Content-Area css (left-hand navigation) */
#fluid_content {
  float:left;
  width:100%;
  margin-right:-160px; /* The size of the right column */
/*  margin-bottom: -12px;  height:100%; */
}

#content_block {
  margin-left:230px;
  margin-right:160px; /* The size of the right column */
/*  padding-bottom:4px; */
  font-size:.88em;
  padding-bottom:100%;
  margin-bottom:-100%;
}

#right_column {
  width:156px; margin-right:4px;
  padding-top:10px;
  float:left;
  text-align:left;
}

#content_wrapper {  /* needed to extend nav column color down 100% */
  position:relative;
  width:100%;
/* both min-heights commented out
   too much going on (in responsive and resizing)
   to use these initial settings */
/*
  min-height: auto !important;
  min-height:750px !important;
*/
  overflow:hidden;
}

#main_navigation {
/*  border: 1px solid black; */
  position:absolute;
  top:0; bottom:0;
  background-color:#22afcd;
  font-family:arial,sans-serif,verdana;
  float:left;
  width:220px;
  min-height:100%;
  padding:0;
  margin-left:0px;
  padding-bottom:100%;
  margin-bottom:-100%;
/*  padding-bottom: 10px; */
}

#main_navigation ul {
  list-style-type:none;
  padding:0px; margin:0px;
  width:220px;
  line-height:1.5em;
/*  float:left;  border-top: 1px solid #fff; */
}

#main_navigation ul ul { display: none; } 

#main_navigation li a, #main_navigation li a:visited, #main_navigation li.main_sub_menu {
  background-color:#22afcd;
  display:block;
  width:220px;
  text-decoration:none;
  height:1.2em;
  line-height:1.2em;
  border-bottom:1px solid #fff;
  margin:0px;
  padding:3px 0px 3px 0px;
  text-indent:8px;
  color:#fff;
  cursor:pointer;
  font-family:arial,helvetica,verdana,sans-serif;
  font-size:.95em;
}

#main_navigation li a:hover, #main_navigation li.main_sub_menu:hover{
  text-decoration:none;
  background-color:#fff;
  color:#000;
}

#main_navigation li { /* needed for IE */
  display: inline;
/*  width: 200px; */
}

#main_navigation li ul {
  position:absolute;
  margin-top:-1.8em;
  margin-left:200px;
  border:1px solid #000;
/*  width:200px; */
}

#main_navigation li ul li a {
  text-indent:30px;
}

#main_navigation li ul li a, #main_navigation li ul li a:visited {
  border:0;
  width:200px;
}

.popdown li a {
  padding-left:5px;
  width:215px;
/* list-style-type:none; font-size:16px; background-color:#d1d1d1; color:#000; */
}

.popdown li a.hover {
  background-color:#fff;
  color:#000;
/* list-style-type:none; font-size:16px; margin-left:-40px; */
}

.main_sub_menu arrows-img {
  text-align:middle;
/*  text-decoration:none; */
}

.nav_arrows {
  float:right;
  padding-right:5px;
  font-size:1.5em;
}
 
.main_menu { width:320px; } 
    
/*  END Content-Area css (left-hand navigation) */

/*  START Right-Hand Column */

form { margin:0px; padding:0px; } /* set up for the 'donate' button */
.donatebutton { text-align:center; padding-top:10px; padding-bottom:5px; }
.donatetext {
  font-family:arial,verdana,helvetica,sans-serif;
  font-size:.72em;
  text-align:center;
  padding-bottom:10px;
}

/*  START Social Media in Left-Hand Column == Right-Hand Column == Footer */
#social_media {
  width:100%; margin:4px auto; padding:8px;
  text-align:center;
  /* border:1px solid #000; background-color: #cce5ff; */
  height:auto !important;
}

#social_media_facebook {
  width:150px;
  background-color:#22afcd;
  text-align:center;
}

#social_navigation {
  text-align:center;
  padding-bottom:10px;
}

#social_footer {
/*  display:none;  display on all pages for now */
  width:230px;
  margin-left:auto; margin-right:auto;
}

/* common social button css */
.social_left { clear:both; float:left; vertical-align:middle; }
.social_right { float:left; vertical-align:middle; }

/*  END Social Media in Left-Hand Column == Right-Hand Column == Footer */

/*  START Google Ads Right Column and Social Footer css */
#google_ad1 { width:150px; margin-left:5px; margin-right:5px; padding-bottom:10px; text-align:center; height:600px; }
#google_ad2 { width:150px; margin-left:5px; margin-right:5px; padding-bottom:10px; text-align:center; height:600px; }
#google_ad3 {
  width:90%; margin:6px auto; padding:8px;
  text-align:center;
/*  border:1px solid #000; background-color: #cce5ff; */
}
/*  END Google Ads Right Column and Social Footer css */

/* START css for google and social media -- TESTING ONLY
#google_ad1 { width:140px; margin:10px; text-align:center; height:100px; border:1px solid #000; background-color: #cce5ff; }
#google_ad2 { width:140px; margin:10px; text-align:center; height:100px; border:1px solid #000; background-color: #cce5ff; }
#google_ad3 {
    width:90%; margin:10px auto; padding: 8px;
    text-align:center; border:1px solid #000; 
    background-color: #cce5ff;
}
END css for google and social media -- TESTING ONLY */

/*  END Right-Hand Column */

/*  START Main Content CSS  */

/* old original
.contentheader {
  color:#000; font-weight:bold; font-size:1.15em;
}
*/

.content_header { /* margin:0; padding:0; */ }
.content_header_bold { font-weight:bold; }
.content_header_center { text-align:center; /* margin:0; padding:0; */ }
.content_header_bigger { font-size:1.20em; }

h1 { color:#000; font-weight:bold; font-size:1.35em; margin:0; padding:0; }
h2 { color:#000; font-weight:bold; font-size:1.10em; margin:0; padding:0; }

/* START responsive video resizing */
figure {
  /* display: block; */
  /** width:95%; margin:0px; padding: 0px; (not currrently used) */
}
.video_container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px; margin-right:10px;
  height:0;
  overflow:hidden;
}

.video_container iframe, .video_container object, .video_container embed {
  position:absolute;
  top:0; left:0;
  width:100% !important;
  height:100% !important;
}

/* END responsive video resizing */

/*  END Main Content CSS  */

/* START miscellaneous css */
#redbar {  /* redbar and freetext not currently used */
  display:none;
  height:40px; top:96px; left:0; right:0; width:100%; z-index:9999; overflow:hidden;
  background-color:#ff0000; color:#ffffff; text-align:center;
  line-height:40px; /* vertical-align:middle; */
}
.freetext { display:inline-block; vertical-align:middle; font-size:1.8em; font-weight:bold; letter-spacing:2px; }

/* used in many pages that have 2-column lyrics */
.lyricsleft { clear:both; float:left; width:280px; padding-bottom:16px; }
.lyricsright { float:left; width:280px; padding-bottom:16px; }

/* END miscellaneous css */

/* START popular babynames pages css */
table.babynames {
  width:300px; margin:1em; font-size:1.0em;
  border:1px #aaabbb solid;
  border-collapse:collapse;
}
table.babynames tr { text-align:right; }
table.babynames td, table.babynames th { padding:.35em; border:1px #808080 solid; text-align:center;}

table.babynames .rank { width:12%; background-color:#efefef; text-align:center; }
table.babynames .malename { width:41%; background-color:#99ccff; text-align:center; }
table.babynames .femalename { width:41%; background-color:#ffc0cb; text-align:center; }
/* END popular babynames pages css */


/* Media Queries */

@media screen and (max-width:574px) { /* MOBILE ~ iPhone5+ */

  #content_wrapper { min-height:100px; }

  #tabbed_navigation { display:block; }

  .logosize { width:130px; height:52px; }

  #header { height:52px; }
  #freesong { display:inline; } 
/*  #redbar { display:none; } */

  #page_container {
    position:absolute;
/*    overflow-x:hidden; */
    overflow-y:scroll;
    top: 46px; left:0px; right:0px; bottom:0px;
  }

  #content_container { margin-left:8px; }

  #search_bar_container {
    position:fixed; top:0; left:0; margin:0;
/*    position:absolute; top:-46px; */
    height:38px; width:98%; max-width:98%;
    padding-left:4px; padding-right:10px; padding-top:4px; padding-bottom:4px;
    border-bottom: 1px solid #0000ff;
    background-color: #ffffff;
  }

  #search_bar { height:32px; }
  .searchbutton { padding-top:0px; margin-top:0px; }
  #inputfyn { margin-top:2px; }

  #main_navigation { display:none; }
  #right_column { display:none; }
  #content_block { margin-left:0px; width:100%;}

  #social_footer { display:block; }
  
  /*  #droidonly { display:inline; } */

}  /* end MOBILE (max-width:574px) */

@media screen and (max-width:326px) { /* motorola razr and tiny screens */

  #freesong { display:inline; padding-left:16px; padding-top:16px; font-weight:bold; font-size:1.4em; }

  .fyn_letters a  {
    margin: 0 1.4% .6% 1.4%;   /* margin around the blocks */
    padding: 2px 2px 2px 2px;  /* padding around the letters */
    width: 5%;                 /* width of each block */
    /*  font-size: .9em; */
  }

  .fyn_age a  {
    margin: 0 1.0% .6% 1.0%;  /* margin around the blocks */
    padding: 2px;             /* padding around the letters */
    width: 11%;               /* width of each block */
    /*  font-size: .9em; */
  }
  
}  /* end motorola razr and tiny screens (max-width:326px) */

@media screen and (min-width:430px) and (max-width:530px) { /* larger phones - @media used for fyn letters only */

  .fyn_letters a  {
    margin: 0 .4% .6% .4%;      /* margin around the blocks */
    padding: 2px 4px 2px 4px;   /* padding around the letters */
    width: 3%;                  /* width of each block */
    /*  font-size: .9em; */
  }

  .fyn_age a  {
    margin: 0 .4% .6% .4%;   /* margin around the blocks */
    padding: 2px;            /* padding around the letters */
    width: 8%;               /* width of each block */
    /*  font-size: .9em; */
  }
  
}  /* end larger phones - @media used for fyn letters only (min-width:430px) and (max-width:530px) */

@media screen and (min-width:531px) and (max-width:574px) { /* largest phones - @media used for fyn letters only */

  .fyn_letters a  {
    margin: 0 .4% .6% .4%;     /* margin around the blocks */
    padding: 2px 1px 2px 1px;  /* padding around the letters */
    width: 5%;                 /* width of each block */
    /*  font-size: .9em; */
  }

  .fyn_age a  {
    margin: 0 .4% .6% .4%;   /* margin around the blocks */
    padding: 2px;            /* padding around the letters */
    width: 8%;               /* width of each block */
    /*  font-size: .9em; */
  }

}  /* end largest phones - @media used for fyn letters only (min-width:531px) and (max-width:574px) */

@media screen and (min-width:575px) and (max-width:749px) { /* TABLETS on-up */

  #header { height:64px; }
  .logosize { width:160px; height:64px;}
  
  #search_bar_container {
/*    padding-bottom:6px;
    margin-left: 212px;
    padding-right:6x; */
    float:left;
    padding-top:16px;  /* for non-mobile (larger screens) */
    margin-left:10px;
    margin-right: auto;
    width:38%;
    max-width:300px;
  }
  
  #search_bar { height: 30px; }
  #inputicon { float:right; padding-left:10px; padding-right:8px; margin-top:1px; }
  .searchbutton { float:right;  padding-top:0px; }

  #inputfyn {
    width:100%;
    margin-top:2px;
/*  margin-left:20px; */
    font-size:1.2em;
    background-color:transparent;
  }

  #freesong { float:left; display:inline; padding-left:1px; padding-top:20px; padding-right:4px; font-weight:bold; font-size:1.5em; color: #c4478a; }

  .fyn_letters a  {
    margin: 0 .3% .6% .3%;     /* margin around the blocks */
    padding: 1px 3px 1px 3px;  /* padding around the letters */
    width: 4.8%;                 /* width of each block */
    /*  font-size: .9em; */
  }

  .fyn_age a  {
    margin: 0 .2% .6% .2%;    /* margin around the blocks */
    padding: 1px;             /* padding around the letters */
    width: 7%;                /* width of each block */
    /*  font-size: .9em;  */
  }
  
  #right_column { display:none; }
  #content_block { margin-right: 10px; }
  #content_wrapper { min-height:750px; /* min height of the left-column blue background for tablets */}

}  /* end TABLETS (min-width:575px) and (max-width:749px) */

@media screen and (min-width:750px) { /* DESKTOP / LAPTOP */

  #content_wrapper { min-height:750px; /* min height of the left-column blue background for desktops/laptops */ } 

  #search_bar_container {
    float:left;
    padding-top:26px;    /* for non-mobile (larger screens) */
/*    padding-bottom:6px;  */  /* for mobile */
    margin-left: 20px;
    margin-right: auto;
    padding-right:20px;
    width:36%;
    max-width:380px;
  }  

  /*  #search_bar { height: 30px; } */
  /* .searchbutton { float:right;  padding-top:4px; }  */

  #inputicon { float:right; padding-left:10px; padding-right:8px; margin-top:6px; }

/*  Search Bar in the Footer styling */
  #search_bar_container_footer {
    text-align:center;        
    display:block;
    margin-top:0px;
    padding-top:0px;
/*    padding-bottom:6px;
    margin-left: 212px;
    padding-right:6x; */
  }

  #search_bar_footer { height: 26px; width:400px; }
  #inputicon_footer{ float:right; padding-left:10px; padding-right:8px; margin-top:0px; }
  .searchbutton { float:right;  padding-top:0px; }

  #inputfyn_footer {
    width:100%;
    margin-top:2px;
/*  margin-left:20px; */
    font-size:1.4em;
    background-color:transparent;
  }

  #google_ad3 { display:none;}

  #freesong { float:left; display:inline; padding-left:1px; padding-top:32px; padding-right:4px; font-weight:bold; font-size:1.6em; color: #c4478a; }

  #fyn_container_footer { // display: block; }

  .fyn_letters a  {
    margin: 0 .14% .6% .14%;   /* margin around the blocks */
    padding: 2px 0px 2px 0px;  /* padding around the letters */
    width: 2.8%;               /* width of each block */
    font-size: .9em;
  }

  .fyn_age a  {
    margin: 0 .1% .6% .1%;      /* margin around the blocks */
    padding: 2px 0px 2px 0px;   /* padding around the letters */
    width: 5%;                  /* width of each block */
    font-size: .9em; 
  }

}  /* end DESKTOP / LAPTOP (min-width:750px) */

@media screen and (min-width:940px) { /* wider monitors */

  #freesong { display:none; }
  #freebirthdaysong { float:left; display:inline; padding-left:1px; padding-top:32px; padding-right:4px; font-weight:bold; font-size:1.6em; color: #c4478a; }

}  /* end wider monitors (min-width:940px) */

@media screen and (min-width:980px) { /* widest monitors */

  #page_container {
    margin-left: auto;  margin-right: auto;
    width:980px;
  }

}  /* end widest monitors (min-width:980px) */