﻿/* styles.css
	This document contains elements that are used on specific pages.
*/


/* 1.0 Homepage */

    .pg_homepage #content .video_player { margin-left: -15px; }
    .pg_homepage #banner { background: url(/App_Images/banners/banner1.jpg) no-repeat; }
    .pg_homepage #right .pod { position: relative; width: 225px; margin-bottom: 3px; margin-left: 1px }
        .pg_homepage #right .pod p { font-size: 11px;line-height: 14px; padding: 35px 0px 0px 20px; width: 195px; }
        .pg_homepage #right .pod a {display: block; background: #fff; opacity: .15; filter: alpha(opacity=15); position: absolute; width: 130px; height: 30px; top: 83px; left: 83px; }
            .pg_homepage #right .pod a:hover { opacity: 0; filter: alpha(opacity=0);}
    .pg_homepage #right .explore { background: url(/App_Images/btn_home_Explore.gif) no-repeat; height: 123px; }
    .pg_homepage #right .research { background: url(/App_Images/btn_home_Research.gif) no-repeat; height: 121px; }
    .pg_homepage #right .share { background: url(/App_Images/btn_home_Share.gif) no-repeat; height: 121px; margin-bottom: 6px}

/* 2.0 Members */
    .pg_members #banner { background: url(/App_Images/banners/banner6.jpg) no-repeat; }
    .pg_members #mid { background: #fff;}
    .pg_members #mid-btm { display: none; }
    .pg_members #left .intro p { margin-bottom: 10px; }
    .pg_members #left .banners { padding-left: 6px}
    .pg_members #left .banners a { display: block; display: inline; float: left; width: 185px; opacity: .85; filter: alpha(opacity = 85); margin-bottom: 6px; margin-right: 6px}
    .pg_members #btm { margin-top: 0px }

    /* 2.1 Member Specific */
    .pg_member #banner { background: url(/App_Images/banners/banner6.jpg) no-repeat; }
    .pg_member #left .info { font-size: 1.2em; line-height: 1.3em; }
    .pg_member #left .info p { font-size: 1.2em; line-height: 1.3em; }
        .pg_member #left .info a { color: #282318; }
            .pg_member #left .info a:hover { color: #000; }
    .pg_member #left .info ul { margin: 5px 0px 5px 15px; }
    .pg_member #left .info li { list-style: disc; }
    .pg_member #left .info #image { float: right; width: 214px; margin: 0px 0px 5px 5px}
    .pg_member #left .info #image img.thumb { border: 1px solid #737c88; display: block; margin-bottom: 1px}
    .pg_member #left .info #gallery a { display: none; }
    .pg_member #left .info #image a.btn { display: block; margin-bottom: 1px; } 
    
    .pg_member #right img.logo { margin-left: 1px; }
    .pg_member #right h2 { margin-left: 1px; }
    .pg_member #right img.contact { margin-left: 1px;margin-right: -100px; position: relative}


/* 3.0 Explore */
    .pg_explore #header { height: 30px; background: url(/App_Images/bg_header_small.gif) repeat-x; }
        .pg_explore #mid { background: url(/App_Images/bg_mid_1col_pattern.gif) top center repeat-x; height: 810px}
        .pg_explore #mid-btm { display: none; }
        
        .pg_explore #left h1 { margin-left: -2px; }
        .pg_explore #left .intro { float: left; width: 400px; }
        .pg_explore #left .intro p { margin-bottom: 10px; }
        
        .pg_explore #left .banners { display: inline; float: right; width: 375px; margin-right: -15px; text-align: right;}
            .pg_explore #left .banners h2 { position: relative; margin: -10px 0px 10px 5px; }
            .pg_explore #left .banners a { opacity: .8; filter: alpha(opacity = 80) }
                .pg_explore #left .banners a:hover, .pg_explore #left .banners a.on { opacity: 1; filter: alpha(opacity = 100) }
            
        .pg_explore #left #explore_map { position: relative; height: 564px; display: inline; float: left; width: 800px; margin: 0px -15px}   
            .pg_explore #left #explore_map .GMapEZ { border: 3px solid #000; width: 794px; height: 548px; position: absolute; z-index: 1;}
                .pg_explore #left #explore_map .GMapEZ div { color: #000; width: 300px }
                .pg_explore #left #explore_map .GMapEZ div strong { font-size: 11px; font-weight: bold; }
                .pg_explore #left #explore_map .GMapEZ div p { float: left; line-height: 13px; font-size: 11px; width: 130px; margin: 5px 0px; }
                    .pg_explore #left #explore_map .GMapEZ div p.btm { clear: both; width: 250px; }
                .pg_explore #left #explore_map .GMapEZ div img { float: left; margin: 5px 0px; border: 1px solid #000;}
                .pg_explore #left #explore_map .GMapEZ div a { clear: both; color: #806f4a; }
                    .pg_explore #left #explore_map .GMapEZ div a:hover { color: #000; }    


/* 4.0 Research */
    .pg_research #banner { background: url(/App_Images/banners/banner3.jpg) no-repeat; }
    .pg_research #left { padding-right: 0px; width: 535px}
        .pg_research #left h1 { margin-left: -2px; margin-bottom: 8px }
        .pg_research #left .p12 { width: 140px; padding-right: 10px; float: left;}
        .pg_research #left .banner { display: block; float: left; opacity: .7; filter: alpha(opacity = 70); margin-right: 3px}
            /*.pg_research #left .banner:hover { opacity: 1; filter: alpha(opacity = 100); }*/
        .pg_research #left .nom { margin-right: 0px; }
        .pg_research #left h3 { float: left; width: 520px; position: relative; margin-top: -15px; margin-bottom: 0px; }

    /* 4.1 Genealogy Resources */

        .pg_research #left.genealogy h1 { float: left; width: 310px;}
        .pg_research #left.genealogy h1.second { width: 150px; margin-left: -10px; }
        .pg_research #left.genealogy .p12 { clear: left; float: none; width: auto;  }
        .pg_research #left.genealogy .topbanner { position: absolute; top: 15px; right: 265px; }
        .pg_research #left.genealogy h2 { margin-top: 20px;  margin-bottom: 2px; float: left; width: 520px}
        .pg_research #left.genealogy h3 { float: left; width: 330px; background: #fff; margin-top: 0px; }
        .pg_research #left.genealogy .text { float: left; width: 330px; padding-right: 10px }
        .pg_research #left.genealogy address { float: left; width: 180px; padding-top: 2px;  }
        .pg_research #left.genealogy address p { width: 170px; background: #F8F4E8; border: 1px solid #DFD8C3; font-style: normal; line-height: 1.3em; padding: 5px; }
        .pg_research #left.genealogy a { color: #282318; }
            .pg_research #left.genealogy a:hover { color: #000; }
        .pg_research #left.genealogy .sm {font-size: .9em; margin-left: 2px; }
        .pg_research #left.genealogy .text table { clear: left; float: left; width: 500px; margin-right: -200px; position: relative; }
        .pg_research #left.genealogy .text td { padding-bottom: 6px;  padding-right: 15px}
        .pg_research #left.genealogy .text th { padding-bottom: 6px; text-decoration: underline; font-weight: normal }

   /* 4.2 Libraries */
   
        .pg_research #left.libraries h1 { float: left; width: 310px;}
        .pg_research #left.libraries h1.second { width: 150px; margin-left: -10px; }
        .pg_research #left.libraries .p12 { clear: left; float: none; width: auto;  }
        .pg_research #left.libraries .topbanner { position: absolute; top: 15px; right: 265px; }
        .pg_research #left.libraries h2 { margin-top: 20px;  margin-bottom: 2px; float: left; width: 520px}

        .pg_research #left.libraries .p12 .cont { width: 180px; float: right; margin: 0px 0px 10px 10px; }
            .pg_research #left.libraries .p12 .cont .addr { float: left; width: 170px; background: #F8F4E8; border: 1px solid #DFD8C3; font-style: normal; line-height: 1.3em; padding: 5px; }
            .pg_research #left.libraries .p12 .cont .addr a { color: #282318; line-height: 1.3em}
                .pg_research #left.libraries .p12 .cont .addr a:hover { color: #000; }


/* 5.0 Share */
    .pg_share #banner { background: url(/App_Images/banners/banner4.jpg) no-repeat; }
    .pg_share #left { padding-right: 0px; width: 535px}
        .pg_share #left h1 { margin-left: -2px; margin-bottom: 8px }
        .pg_share #left .p12 { width: 140px; padding-right: 10px; float: left;}
        .pg_share #left .banner { display: block; float: left; opacity: .7; filter: alpha(opacity = 70); margin-right: 3px}
        .pg_share #left .nom { margin-right: 0px; }
        .pg_share #left h3 { float: left; width: 320px; float: left; position: relative; margin-top: -15px; margin-bottom: 0px; }
        .pg_share #left .details { float: left; width: 200px; margin-top: -15px; position: relative;  font-size: 1.1em; line-height: 1.2em;}


    /* 5.1, 5.2 Subpages */

    .pg_share #left.stories h1 { float: left; width: 250px;}
    .pg_share #left.stories h1.second { width: 250px; margin-left: -10px; }
    .pg_share #left.stories .p12 { clear: left; width: auto; float: none}
    
    .pg_share #left h6 { margin: 0px 0px 5px 0px }
    .pg_share #left h6 a { color: #282318 }
     .pg_share #left h6 a:hover { color: #000 }

    .pg_share #left.stories dl { margin: 10px 0px 0px 5px; }
    .pg_share #left.stories dt { clear: both; background: url(/App_Images/ico_story.gif) no-repeat left top; padding: 0px 10px 15px 24px; }
        .pg_share #left.stories dt a { color: #282318 }
            .pg_share #left.stories dt a:hover { color: #000; }
        .pg_share #left.stories dd { position: relative; margin-top: -15px; padding: 3px 0px 10px 24px; }
    
    .pg_share #right .story_form { padding: 10px 11px; font-size: .9em; }
        .pg_share #right .story_form p { font-size: .9em; margin-bottom: 4px; margin-left: -1px;}
        .pg_share #right .story_form th { font-weight: normal; white-space: nowrap; padding-right: 4px}
        .pg_share #right .story_form td{ padding-bottom: 5px; }
        .pg_share #right .story_form .txt,
        .pg_share #right .story_form .txtarea { background: #EFE8D1; font-size: 11px; padding: 2px 4px; color: #000; border: 1px solid #AFAA99; }

        .pg_share #right .story_form .ERROR { background: #CF7474; border: 1px solid #000 }
        .pg_share #right .story_form .success { display: none; color: #51AF4C; margin: 4px 0px;  }
            .pg_share #right .story_form .success p { line-height: 14px; }
        .pg_share #right .story_form #error { display: none; color: #CF4400; padding: 2px 0px 6px; }
        .pg_share #right .story_form .hdnBtn { visibility: hidden; }
        
    /* Individual Styles */
        .pg_share #left.details .comments { float: left; width: 525px; }
        .pg_share #left.details .comments ul li { background: url(/App_Images/ico_comment.gif) no-repeat left top; padding: 0px 0px 10px 15px; }
        .pg_share #left.details .comments ul li em { font-style: italic; display: block; padding-bottom: 3px}

        .pg_share #left.details h5 { font-size: .9em; margin: -4px 0px 10px; position: relative; }
        
        .pg_share #left.details { margin-right: 10px; width: 525px;}
        .pg_share #left.details p .image_holder{ float: right; width: 250px; margin: 5px 0px 0px 5px}
        .pg_share #left.details p .image_holder img {width: 250px; border: 2px solid #282318;  }
        .pg_share #left.details p .image_holder span.desc { display: block; font-style: normal; font-size: 10px; color: #6C5440; padding: 4px 6px}
        
        .pg_share #left.details th { font-weight: normal; white-space: nowrap; padding-right: 4px}
        .pg_share #left.details td{ padding-bottom: 5px; }
        .pg_share #left.details .txt,
        .pg_share #left.details .txtarea { background: #EFE8D1; font-size: 11px; padding: 2px 4px; color: #000; border: 1px solid #AFAA99; }

        .pg_share #left.details .ERROR { background: #CF7474; border: 1px solid #000 }
        .pg_share #left.details .success { display: none; }
        .pg_share #left.details #error { display: none; color: #CF4400; padding: 2px 0px 6px; }
        .pg_share #left.details .hdnBtn { visibility: hidden; }

        
        .pg_share #left.details .comments { margin-top: 5px; padding-top: 10px; border-top: 1px solid #dfdcd8; }
        .pg_share #left.details h2 { margin-bottom: 5px; }
        
        .pg_share #left.details .form { background: #ECE7D8; padding: 10px; border: 1px solid #282318; }


/* 6.0 Events */
    .pg_events #banner { background: url(/App_Images/banners/banner5.jpg) no-repeat; }
    .pg_events #left .step1 { background: #e9e4dd url(/App_Images/bg_step1.gif) 5px top no-repeat; padding: 21px 0px 21px 55px; margin: 10px -15px}
        .pg_events #left h2 { margin-left: -2px; }
        .pg_events #left .step1 .dd { font-size: 1em; }
        .pg_events #left .step1 .txt,
        .Over_Windows, 
        .Focus_Windows  { width: 75px; height: 15px; color: #413A32; border: 1px solid #413A32; font-size: 12px; padding: 5px 4px}
            .Over_Windows { padding-top: 6px; padding-bottom: 4px; color: #333}
        .pg_events #left .step1 .riTextBox { margin-top: -10px; position: relative}
        .pg_events #left .step1 .rcCalPopup { position: absolute; margin: -25px 0px 0px -5px }
        .pg_events #left table { width: 400px; margin-top: 10px}
        
        .pg_events #left .rel { position: relative; }

    .pg_events #left .hdnBtn { display: none; }
    .pg_events #left .step2 { display: none; background: url(/App_Images/bg_step2.gif) 3px -10px no-repeat; padding: 5px 0px 50px 58px; margin: 0px -15px}
        .pg_events #left .step2 h3 { margin-top: 10px; font-size: 1.2em; }
        .pg_events #left .step2 dl { margin: 5px 0px 5px 0px; border-bottom: 1px solid #dfdcd8; padding: 0px 0px 5px 15px; }
            .pg_events #left .step2 dl.nob { border: 0px; }
        .pg_events #left .step2 dt { margin-top: 10px; height: 15px; font-weight: bold; font-size: 1.2em; background: url(/App_Images/ico_event100.gif) no-repeat left top; padding-left: 22px; }
        .pg_events #left .step2 dd { padding-top: 5px; padding-left: 22px}
            .pg_events #left .step2 dd a { color: #282318}
                .pg_events #left .step2 dd a:hover { color: #000; }
                
    /* 6.1 Event Details */
    
    .pg_events #left.details h1 { margin-left: -0px; }
    
    .pg_events #left.details .tools { float: right; width: 300px; padding-bottom: 5px; padding-top: 2px}
        .pg_events #left.details .tools img { float: right; position: relative; margin-right: 5px; margin-top: -3px }
        .pg_events #left.details .tools a { display: inline; float: right; font-size: .9em; color: #9E8171; }
            .pg_events #left.details .tools a:hover { color: #7F6557 }
        .pg_events #left.details .tools .share { margin-left: 10px; }
    .pg_events #left.details .p14 { clear: both; }
    
    .pg_events #left.details h2 { margin-top: 10px; font-size: 1.8em; font-weight: bold; margin-left: 0px} 
    .pg_events #left.details p img { float: right; width: 250px; border: 2px solid #282318; margin: 5px 0px 0px 5px}
    .pg_events #left.details .sep { float: left; margin-top: 5px; }
    .pg_events #left.details h3 {  float: left; font-size: 1.4em; font-weight: bold; margin-right: 5px}
    .pg_events #left.details div span { float: left; width: 350px; font-size: 1.2em; display: block; padding-top: 7px}
        .pg_events #left.details div span a .icon { position: absolute; margin: -1px 0px 0px 10px}
        .pg_events #left.details div span a { color: #282318; }
            .pg_events #left.details div span a:hover { color: #000; }
    .pg_events #left.details .c { clear: left; width: 520px; line-height: 1.3em; padding-top: 3px}
    
    /* Share Popup*/

    .pg_popup { background: #F8F4E8; font: normal 12px arial; padding: 10px; }
        .pg_popup h1 {padding: 10px 0px 9px 20px; background: #282318; text-align: left; margin: -10px -10px 10px -10px }

        .pg_popup .form th { font-weight: normal; white-space: nowrap; padding-right: 4px}
        .pg_popup .form td{ padding-bottom: 5px; }
        .pg_popup .form .txt,
        .pg_popup .form .txtarea { background: #EFE8D1; font-size: 11px; padding: 2px 4px; color: #000; border: 1px solid #AFAA99; }

        .pg_popup .form .ERROR { background: #CF7474; border: 1px solid #000 }
        .pg_popup .form .success { display: none; color: #51AF4C; margin: 4px 0px;  }
            .pg_popup .form .success p { line-height: 14px; }
        .pg_popup .form #error { display: none; color: #CF4400; padding: 2px 0px 6px; }


/* 7.0 Resources */
    .pg_resources #banner { background: url(/App_Images/banners/banner2.jpg) no-repeat; }
    .pg_resources #left dl { margin-top: 5px; }
    .pg_resources #left dt { background: url(/App_Images/ico_resourcesquare.gif) no-repeat left 9px; padding: 4px 0px 0px 18px; }
    .pg_resources #left dd { background: url(/App_Images/ico_newpage.gif) no-repeat 18px top; padding: 0px 0px 8px 36px; border-bottom: 1px solid #d4d3d1; }
        .pg_resources #left dd a { color: #7F7B77 }
            .pg_resources #left dd a:hover { color: #000 }

    .pg_resources #left .yellow { background-color: #fffce6; }
