/* RESET */ h1, h2, h3, h4, h5, ul, ol, img, button { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; font: inherit; vertical-align: baseline; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=submit], input[type=text], input[type=password], textarea { -webkit-appearance: none; } /* CLEAR */ .clearFix:after { visibility: hidden; display: block; font-size: 0px; line-height: 0px; content: " "; clear: both; height: 0px; width: 0px;} .clearFix { display: inline-block; } * html .clearFix { height: 1%; overflow: visible; } .clearFix { display: block; } .clear { clear:both; } /* BASE */ html,body { height: 100%; padding: 0px; margin: 0px; } body { color: #000000; background-color: #2A0A0A; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body, input, textarea { font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } a, .link { color: #1880C9; cursor: pointer; text-decoration: none; } a:hover, .link:hover { text-decoration: underline; } h1 { font-size: 48px; font-family: 'Oswald', sans-serif; font-weight: normal; } h1.logoMatch { font-family: 'Kaushan Script', cursive; font-weight: bold; } h2 { font-size: 24px; font-weight: normal; } h3 { font-size: 19px; font-weight:bold; } h4 { font-size: 14px; font-weight:bold; } h5 { font-weight:bold; } p { font-size:16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height:20px; margin:0px 0px 0px 0px; } noscript { text-align: center; display: block; background-color: #FFFFFF; color: #FF0000; font-weight: bold; padding: 5px 0px; } pre { margin: 0px; font-size: 12px; background-color: #F5F5F5; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; padding: 5px 10px; } pre .key { color: #008800; } pre .string { color: #008800; } pre .boolean { color: #880000; } pre .null { color: #000088; } /* FONTS */ @font-face { font-family: 'Kaushan'; src: url(/styles/fonts/Kaushan.ttf); } @font-face { font-family: 'Droid'; src: url(/styles/fonts/Droid.ttf); } @font-face { font-family: 'Kaushan Script'; src: url(/styles/fonts/Kaushan.ttf); } @font-face { font-family: 'Droid Serif'; src: url(/styles/fonts/Droid.ttf); } @font-face { font-family: 'Oswald'; src: url(/styles/fonts/Oswald.ttf); } @font-face { font-family: 'NotoSerif'; src: url(/styles/fonts/NotoSerif-Regular.ttf); } @font-face { font-family: 'NotoSans'; src: url(/styles/fonts/NotoSans-Regular.ttf); } @font-face { font-family: 'NotoMono'; src: url(/styles/fonts/NotoMono-Regular.ttf); } /* CLASSES */ #site { min-height: 100%; position: relative; background: url('/images/darkback.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #site.freeze { position: fixed; left: 0px; right: 0px; } html.no-backgroundsize #site { width: 1024px; margin: 0px auto; } #cover { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #2B2825; filter: alpha(opacity=65); background-color: rgba(43, 40, 37, 0.65); z-index: 900; } #hidden_content { display: none; } .transitionFast { transition: all .25s linear; -moz-transition: all .25s linear; -webkit-transition: all .25s linear; -o-transition: all .25s linear; } .transitionMed { transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; -o-transition: all .5s linear; } .transitionSlow { transition: all 1s linear; -moz-transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; } .transformFast { -webkit-transition: -webkit-transform .25s ease-in; -moz-transition: -moz-transform .25s ease-in; -o-transition: -o-transform .25s ease-in; transition: transform .25s ease-in; } .transformMed { -webkit-transition: -webkit-transform .5s ease-in; -moz-transition: -moz-transform .5s ease-in; -o-transition: -o-transform .5s ease-in; transition: transform .5s ease-in; } .transformSlow { -webkit-transition: -webkit-transform 1s ease-in; -moz-transition: -moz-transform 1s ease-in; -o-transition: -o-transform 1s ease-in; transition: transform 1s ease-in; } .transformExtraSlow { -webkit-transition: -webkit-transform 2s ease-in; -moz-transition: -moz-transform 2s ease-in; -o-transition: -o-transform 2s ease-in; transition: transform 2s ease-in; } .overflowlimit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .logo_seal { background-repeat: no-repeat; background-image: url(/images/logo_seal.png); width: 60px; height: 60px; position: absolute; top: -35px; left: 50%; margin-left: -30px; } body.embedded #habla_window_div.habla_window_div_base, body.embedded .habla-desktop, body.embedded #habla_beta_container_do_not_rely_on_div_classes_or_names { display: none !important; } body.embedded #footer { display: none; } body.embedded .GUIDE { display: none; } body.embedded .default-header { display: none; } #footer { background-color: #000000; margin-top: 15px; } #footer .content { max-width: 1024px; margin: 0px auto; color: #FFFFFF; padding: 10px 0px; text-align: center; } #footer .links { width: 510px; margin: 10px auto; } #footer .links .link { display: block; float: left; height: 25px; line-height: 25px; margin-right: 30px; } #footer .links .link:last-child { margin-right: 0px; } #footer .question { margin-bottom: 10px; } .sharing { width: 327px; margin: 20px auto; } .sharing .share { float: left; background-image: url(/images/share_icons.png); width: 41px; height: 41px; margin-right: 30px; } .sharing .share.facebook { background-position: 0px 0px; } .sharing .share.google { background-position: -76px 0px; } .sharing .share.instagram {background-position: -149px 0px; } .sharing .share.pinterest { background-position: -223px 0px; } .sharing .share.twitter { background-position: -299px 0px; margin-right: 0px; } .errormsg, .error { padding: 5px; background-color: #FFFFFF; color: #FF6600; font-weight: bold; border: 1px solid #FF6600; text-align: center; } .error.popup { position: fixed; top: 100px; left: 50%; width: 400px; margin-left: -200px; z-index: 1500; } #LOADING { background-image: url('/images/loading.gif'); display: none; z-index: 1000; width: 80px; height: 80px; position: fixed; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; } .form { background-color: #FCFCFC; } .form input { outline: none; margin: 0px; border: 0px; } .form input[type=text], .form input[type=password], input[type=email] { padding: 6px 0px; } .form .holder { position: relative; } .form .input.holder { float: left; padding: 0px 6px; border: 1px solid #E7E7E7; border-radius: 3px; margin-top: 20px; background-color: #FFFFFF; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08); } .form .input.holder.disabled { border-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0); box-shadow: none; } .form .input.holder input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */ -webkit-text-fill-color: #333; } .form .input.holder input:-webkit-autofill:focus { -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset; -webkit-text-fill-color: #333; } .form .input.holder.email, .form .input.holder.password { position: relative; padding-left: 30px; margin-top: 10px; } .form .input.holder.email .placeholder, .form .input.holder.password .placeholder { left: 30px; } .form .input.holder.email .image { position: absolute; top: 50%; margin-top: -9px; left: 5px; } .form .input.holder.password .image { position: absolute; top: 50%; margin-top: -9px; left: 8px; } .form .input.holder label { position: absolute; top: -14px; left: 6px; color: #939393; font-size: 12px; } .form .input.holder input,.form .input.holder textarea { background-color: transparent; width: 100%; } .form .input.holder textarea { border: none; outline: none; resize: none; padding: 8px 0px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .form .input.holder .placeholder { position: absolute; top: 7px; left: 6px; color: #BBBBBB; display: none; font-size: 14px; } .form .input.holder.date .status { display: none; } .form .input.holder .error { position: absolute; top: 0px; left: 0px; right: 0px; line-height: 20px; height: auto; overflow: visible; -webkit-animation: error-floatUp 1s linear; -webkit-transform: translate3d(0px,-50px,0px); -moz-animation: error-floatUp 1s linear; -moz-transform: translate3d(0px,-50px,0px); animation: error-floatUp 1s linear; transform: translate3d(0px,-50px,0px);} .form .input.holder.name .error, .form .input.holder.date .error { min-width: 200px; } .form .input.holder .suggestions { position: absolute; background-color: #FFF; left: 0px; z-index: 500; width: 385px; font-size: 12px; border: 1px solid #999; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); border-radius: 0px 3px 3px 3px; } .form .input.holder .suggestions .explaination { padding-left: 5px; font-style: italic; border-bottom: 1px solid #999; color: #999; } .form .input.holder.date .suggestions { width: 100%; } .form .input.holder .suggestions .suggestion { padding: 0px 5px; line-height: 25px; cursor: pointer; } .form .input.holder .suggestions .suggestion.hovered { background-color: #C4C4C4; } .form .input.holder .status { position: absolute; top: 0px; right: 0px; height: 30px; width: 24px; } .form .input.holder.invalid { } .form .input.holder.invalid.typing { border-color: #E7E7E7; } .form .input.holder.invalid.typing .status { background-position: -30px -23px; background-image: url(/images/loading.gif); } .form .input.holder.invalid.done { border-color: #FFCC00; } .form .input.holder.invalid.wrong { border-color: #FF0000; } .radioHolder { height: 25px; line-height: 25px; position: relative; padding-left: 25px; color: #939393; font-size: 12px; } .radioHolder input, .input.holder .radioHolder input { height: 17px; width: 17px; position: absolute; top: 5px; left: 0px; } .input.holder .radioHolder label { position: static; } html.opacity .radioHolder input { opacity: 0.0; z-index: 100; } html.opacity .radioHolder input + label > span { position: absolute; top: 4px; left: 0px; width: 17px; height: 17px; background-image: url(/images/unchecked_boxv2.png); background-position: -1px -2px; } html.opacity .radioHolder input:hover + label > span { background-image: url(/images/checked_box_hover.png); background-position: -1px -2px; } html.opacity .radioHolder input:checked + label > span { background-image: url(/images/checked_boxv2.png); background-position: -1px -2px;} .person_details.overlay { width: 400px; padding: 40px 40px 0px; display: none; position: absolute; top: 40px; left: 50%; margin-left: -240px; z-index: 950; background-color: #FCFCFC; } .person_details.overlay .person_form { margin-bottom: 20px; } .person_form { width: 400px; } .person_form .marriage, .person_form .divorce { display: none; } .person_form.spouse .marriage, .person_form.spouse .divorce { display: block; } .person_form h1 { font-size: 28px; } .person_form .divorce.date { display: none; } .person_form .parent.button { float: none; } .person_form .input.holder { margin-right: 10px; } .person_form .input.holder.suffix, .person_form .input.holder.place, .person_form .input.holder.mother { margin-right: 0px; } .person_form .input.holder.first.name,.person_form .input.holder.last.name { width: 105px; } .person_form .input.holder.middle.name,.person_form .input.holder.suffix.name { width: 51px; } .person_form .input.holder.place { width: 255px; } .person_form .input.holder input[type=text] { height: 18px; } .person_form .input.holder.known { border: none; box-shadow: none; background-color: transparent; } .person_form .input.holder.known .parent { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .person_form .input.holder.date { width: 105px; } .person_form .input.holder select, .person_details .form.changeParent .input.holder select { border: none; outline: none; margin: 0px; padding: 0px; font-size: 16px; width: 100%; height: 30px; line-height: 30px; } .person_form .input.holder.father, .person_form .input.holder.mother { width: 181px; } .person_form .input.holder.father .parent, .person_form .input.holder.mother .parent { height: 30px; line-height: 30px; } .person_form .input.holder.father { margin-right: 10px; } .person_form .input.holder.nickname { display: none; padding-right: 25px; width: 160px; margin-right: 0px; } .person_form .nickname .remove { position: absolute; top: 6px; right: 0px; width: 25px; text-align: center; color: #999999; cursor: pointer; } .person_form .genderHolder { float: left; margin-top: 16px; position: relative; } .person_form.new .create { display: block; } .person_form.new .edit { display: none; } .person_form .create { display: none; } .person_form .edit { display: block; } .person_form input[type=submit] { float: right; margin-top: 15px; padding: 0px 15px; } .person_details .treeOptions { width: 350px; margin: 0px auto 10px auto; } .person_details .treeOptions .option { width: 130px; display: none; position: relative; cursor: pointer; float: left; height: 27px; line-height: 27px; padding-left: 37px; } .person_details .treeOptions .option .image { position: absolute; left: 0px; top: 0px; height: 27px; width: 30px; background-repeat: no-repeat; } .person_details .treeOptions .option.center .image { background-position: 4px 1px; } .person_details .treeOptions .option.getStory .image { background-position: 5px 5px; } .person_details .treeOptions .option.center { margin-right: 15px; } .person_details .treeOptions .option.center .image { background-image: url(/images/treev2.png); } .person_details .treeOptions .option.getStory .image { background-image: url(/images/bookv2.png); } .person_details .treeOptions .option.backToFS { display: none; width: 185px; } .person_details .more_options { height: 25px; line-height: 25px; font-size: 12px; margin-bottom: 5px; } .person_details .more_options .link { float: left; padding: 0px 5px; } .person_details .options { display: none; margin-bottom: 15px; } .person_details .options .option { height: 25px; line-height: 25px; float: left; margin-right: 15px; font-size: 12px; } .person_details .options .option.change { display: none; } .person_details .options .option.change.father { margin-right: 0px; } .person_details .form.changeParent, .person_details .form.addnickname { display: none; margin-bottom: 10px; } .person_details .form.changeParent .input.holder, .person_details .form.addnickname .input.holder { float: none; margin-bottom: 10px; } .person_details .form.changeParent .button, .person_details .form.addnickname .button { float: right; } .person_details .form.changeParent input.button, .person_details .form.addnickname input.button { margin-right: 10px; width: 160px; } .person_details .FS { display: none; } .person_details.FS .FS .doubleCheck { display: none; } .person_details.FS .FS .doubleCheck .warning { display: none; } .person_details.FS .FS .doubleCheck .update { float: left; margin: 10px 10px 0px 65px; height: 48px; line-height: 48px; color: #FFFFFF; text-decoration: none; width: 221px; } .person_details.FS .FS .doubleCheck .button.close { margin-top: 10px; } .person_details.FS .FS { text-align:center; display: block; margin-bottom: 10px; background-color: #F0EADE; font-size: 12px; padding: 10px; border: 1px solid #D7D7D7; } .person_details.FS .FS .update { height: 20px; line-height: 20px; text-align: center; margin-top: 5px; } .person_details.FS .FS .ARK { height: 20px; line-height: 20px; text-align: center; margin-top: 5px; } .hiddenFrame { position: absolute; top: -9999px; left: -9999px; height: 0px; width: 0px; } .addImage { display: none; position: relative; } .addImage.limit_reached { pointer-events: none; opacity: 0.3; } .addImage .text { position: absolute; top: 50%; margin-top: 24px; text-align: center; width: 100%; z-index: 1; color: #939393; font-size: 12px; } .addImage .noSupport { display: none; text-align: center; position: absolute; top: 50%; margin-top: -18px; } .addImage.disabled .noSupport { display: block; } .addImage.fancy, .addImage.notFancy, .addImage.disabled { display: block; } .addImage.disabled { background: none !important; } .addImage.fancy { overflow: hidden; } .addImage.fancy .image { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; line-height: 34px; margin-top: -17px; margin-left: -17px; z-index: 1; font-size: 40px; color: #939393; text-align: center; } .addImage.fancy .hiddenInput { opacity: 0.0; position: absolute; z-index: 100; cursor: pointer; } .addImage.notFancy .image { display: none; } .addImage.disabled .text { display: none; } .complimentary_stories { font-size: 14px; text-align: center; height: 30px;line-height: 30px;background-color: #EDE2B2; color: black; width: 350px;margin: 0px auto 15px auto; } #api_status { display: none; text-align: center; background-color: rgba(255,255,255,.7); position: fixed; top: 50%; left: 50%; color: #000000; width: 320px; margin-left: -171px; margin-top: -61px; z-index: 1001;font-size: 16px; border-radius: 5px; padding: 40px 10px 10px 10px; } #api_status .FS, #api_status .gedcom, #api_status .PDF { display: none; } #api_status.FS .FS, #api_status.gedcom .gedcom, #api_status.PDF .PDF { display: block; } #api_status .seal { position: absolute; top: -70px; margin-left: -30px; left: 50%; width: 60px; height: 60px; background-repeat: no-repeat; } #api_status.FS .seal { background-image: url(/images/familysearchseal.png); } #api_status.gedcom .seal { background-image: url(/images/gedcomseal.png); } #api_status.PDF .seal { background-image: url(/images/PDFseal.png); } #api_status .progress { border: 1px solid #000000; border-radius: 3px; margin: 15px 10px 10px 10px; position: relative; box-shadow: 0px 0px 5px rgba(81, 81, 81, 0.8); height: 16px; } #api_status .progress .block { float: left; width: 25%; text-align: center; height: 16px; line-height: 16px; font-size: 10px; } #api_status .progress .back { position: absolute; top: 0px; left: 0px; height: 16px; width: 100%; z-index: -2; background-color: #FFFFFF; } #api_status .progress .bar { position: absolute; top: 0px; left: 0px; height: 16px; width: 0%; z-index: -1; } #api_status .stage { color: #000000; position: absolute; height: 16px; line-height: 16px; top: 0px; left: 0px; right: 0px; bottom: 0px; text-align: center; font-size: 12px; } #api_status.PDF .stage.phase2 { text-align: left; left: 108px; } #api_status.PDF .stage.phase3 { text-align: left; left: 76px; } #api_status.gedcom .count_completed { color: #BA967C; font-size: 12px; } #api_status .subtext { font-size: 11px; color: #BA967C; margin-top: 30px; } .default-header { position: relative; height: 87px; } .default-header .logo.base { position: absolute; top: 0px; left: 0px; } .default-header .logo.base.mobile { display: none; } .default-header .logo.base img { width: 313px; height: 87px; } .default-header .options { position: absolute; top: 28px; right: 15px; color: #FFFFFF; z-index: 500; } .default-header .options .option { cursor: pointer; display: block; float: left; height: 30px; line-height: 30px; text-align: center; margin-right: 15px; color: #FFFFFF; } .default-header .options .option.signout { margin-right: 0px; } .default-header .options .option:hover { text-decoration: underline; } .default-header.anonymous .options .option { width: 70px; } .default-header.anonymous .options .option.signup { margin-right: 0px; text-decoration: none; color: #FFFFFF !important; } .other_groups .title { font-weight: bold; } .other_groups .group { display: block; height: 30px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; padding: 0px 5px 0px 36px; } .other_groups .group img { position: absolute; top: 3px; left: 7px; } .other_groups .group .remove { display: none; position: absolute; top: 0px; right: 0px; width: 25px; height: 25px; line-height: 25px; text-align: center; } .other_groups .group:hover .remove { display: block; } .userTools { position: absolute; top: 40px; right: 0px; } .userTools .tool { height: 30px; width: 30px; border-radius: 3px; margin-bottom: 10px; background-color:rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0.25); } .GEDCOM { padding: 15px; position: fixed; top: 88px; left: 50%; margin-left: -215px; width: 400px; display: none; z-index: 1001; background-color: #FCFCFC; } .GEDCOM .logo_seal { } .GEDCOM .known_files { margin: 20px 0px 30px 0px; } .GEDCOM .known_files .file { margin-bottom: 10px; } .GEDCOM .known_files .file .button { float: none; height: 20px; line-height: 20px; width: 70px; } .GEDCOM .known_files .file .title { float: left; width: 123px; margin-right: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .GEDCOM .known_files .file .date_created { float: left; width: 100px; text-align: center; margin-right: 5px; } .GEDCOM .known_files .file .update { float: left; margin-right: 5px; } .GEDCOM .known_files .file .remove { float: left; } .GEDCOM .form { } .GEDCOM .form .input.holder { float: none; } .GEDCOM .form textarea { height: 100px; } .GEDCOM .form .button.red, .GEDCOM .form .button.close { margin-top: 10px; } .GEDCOM .form .button.red { margin-right: 10px; width: 200px; margin-left: 48px; } .GEDCOM .form .button.close { width: 100px; } #gedcom_frame { display: none; } #addEvent { background-color: #FCFCFC; display:none; position: relative; border-radius: 3px; z-index: 1000; width: 735px; margin: 40px auto; padding: 40px; } #addEvent textarea { resize: vertical; height: 150px; font-family: 'Droid Serif', Georgia, Times, Serif; font-size: 18px; } #addEvent .input.holder input[type=text] { height: 18px; } #addEvent .input.holder { float: none; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { float: left; width: 346px; } #addEvent .input.holder.caption, #addEvent .input.holder.location_artifact { margin-right: 15px; } #addEvent .end_date { display: none; } #addEvent .input.holder.half { width: 158px; } #addEvent .end_date.half { display: block; } #addEvent .input.holder.start_date.half { margin-right: 15px; } #addEvent .copyArtifactLocation, #addEvent .addEndDate { display: none; position: absolute; bottom: -17px; right: 0px; font-size: 11px; } #addEvent.TYPE_DIMENSION .location_residence, #addEvent.TYPE_DIMENSION .location_artifact { display: none; } #addEvent.TYPE_PLACE .location_residence, #addEvent.TYPE_PLACE .location_artifact { display: none; } #addEvent.TYPE_LIFE .tags { display: none; } #addEvent.TYPE_LIFE .link.tagger { display: none; } #addEvent.TYPE_RESIDENCE .caption { display: none; } #addEvent.TYPE_RESIDENCE .start_date { margin-right: 15px; } #addEvent.TYPE_IMMIGRATION .location_artifact, #addEvent.TYPE_RESIDENCE .location_artifact { display: none; } #addEvent.base_event .remove { display: none; } #addEvent .addImage.fancy { border: 1px dashed #939393; float: left; } #addEvent .addImage.disabled { display: none !important; } #addEvent .addImage .plus { display: none; } #addEvent.fancy .addImage .plus { display: block; position: absolute;top: 50%;left: 50%;width: 34px;height: 34px;line-height: 34px;margin-top: -17px;margin-left: -17px;z-index: 1;font-size: 40px;color: #939393;text-align: center;} #addEvent.fancy .addImage .hiddenInput { top: 0px; left: -209px; width: 379px; height: 148px; } #addEvent.notFancy .addImage { border: none; width: 100%; min-height: 50px; } #addEvent.notFancy .addImage .text { margin-top: 0px; top: 0px; text-align: left; } #addEvent.notFancy .addImage input { width: 100%; position: absolute; bottom: 0px; } #addEvent.notFancy .attachments { min-height: 5px; margin: 23px 0px 30px 0px; } #addEvent.notFancy .attachments .attachment.filler { display: none; } #addEvent .attachments { margin: 20px 0px 30px 0px; } #addEvent .attachment { position: relative; float: left; margin: 5px; width: 171px; min-height: 171px; border: 1px solid rgba(0,0,0,0); } #addEvent .attachment.filler { height: 150px; } #addEvent .attachment .image { cursor: -webkit-grab; width: 171px; height: 171px; background-position: center center; background-repeat: no-repeat; } #addEvent .attachment .input.holder { margin-top: 2px; } #addEvent .attachment input { width: 100%; } #addEvent .attachment .spinner { display: none; background-image: url('/images/loading.gif'); width: 80px; height: 80px; position: absolute; top: 10px; left: 50%; margin-left: -40px; } #addEvent .attachment .progress { display: none; height: 15px; position: absolute; bottom: 10px; left: 10px; right: 10px; border: 1px solid #000000; overflow: hidden; border-radius: 5px; } #addEvent .attachment .progress .percent { height: 100%; width: 0px; background-color: #1880C9; } #addEvent .attachment .delete, #addEvent .attachment .rotate { cursor: pointer; position: absolute; top: 0px; color: #FFFFFF; height: 20px; line-height: 20px; width: 20px; font-size: 14px; text-align: center; background-color: rgba(0, 0, 0, 0.4); } #addEvent .attachment .sprite { background-image: url(/images/photo_sprite.png); height: 20px; width: 20px; } #addEvent .attachment .delete { right: 0px; } #addEvent .attachment .delete .sprite { background-position: 0px 0px; } #addEvent .attachment .rotate { left: 0px; } #addEvent .attachment .rotate .sprite { background-position: -20px 0px; } #addEvent .attachment.waiting { height: 184px; } #addEvent .attachment.waiting .rotate { display: none; } #addEvent .attachment.waiting .spinner, #addEvent .attachment.waiting .progress { display: block; } #addEvent .attachment.waiting .delete { display: none; } #addEvent .input.holder.notes { display: none; } #addEvent #event_form_submit { width: 200px; margin: 10px auto; float: none; display: block; } #addEvent .remove { text-align: center; font-size: 12px; height: 25px; line-height: 25px; margin-top: 20px; } #addEvent .link.notes { font-size: 12px; margin: 15px 0px 25px 5px; } #addEvent .link.tagger { font-size: 12px; margin: 0px 0px 10px 5px; } #addEvent .tags { display: none; background-color: transparent; box-shadow: none; border: none; } #addEvent .radioHolder { width: 144px; padding-right: 10px; float: left; } #addEvent .radioHolder label { width: 105px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #addEvent .arrow { position: absolute;top: 50%;margin-top: -16px;width: 32px;height: 32px;cursor: pointer;background-repeat: no-repeat;background-image: url(/images/photo_arrows.png);height: 64px;width: 38px;} #addEvent .arrow.left { left: -60px; background-position: -41px 0px; } #addEvent .arrow.right { right: -60px; } #addEvent .fragment.dismiss { display: none; text-align: center; font-size: 12px; height: 25px; line-height: 25px; margin-top: 20px; } #memories_upload_agreement { z-index: 1001; display: none; border-radius: 3px; background-color: #FFFFFF; padding: 40px; position: relative; width: 640px; margin: 0px auto; top: 150px; } #memories_upload_agreement .accept { position: relative; padding-left: 30px; line-height: 24px; margin-top: 20px; } #memories_upload_agreement .radioHolder { position: absolute; top: 0px; left: 0px; } #memories_upload_agreement .button { float: none; width: 200px; margin: 20px auto 0px auto; } #memories_upload_agreement .seal { background-image: url(/images/familysearchseal.png); position: absolute; top: -30px; margin-left: -30px; left: 50%; width: 60px; height: 60px; background-repeat: no-repeat; } #PDF_share { z-index: 1001; display: none; border-radius: 3px; background-color: #FCFCFC; padding: 40px; position: relative; width: 400px; margin: 0px auto; top: 150px; } #PDF_share .seal { background-image: url(/images/familysearchseal.png); position: absolute; top: -30px; margin-left: -30px; left: 50%; width: 60px; height: 60px; background-repeat: no-repeat; } #PDF_share input[type=file] { padding: 6px 0px; } #PDF_share .input.holder { float: none; } #PDF_share .button.familySearch { width: 200px; margin: 20px auto 0px auto; float: none; display: block; } #PDF_share .remind_fs_agree { font-size: 10px; text-align: center; margin-top: 10px; } #PDF_share .ARK { display: block; font-size: 12px; margin-top: 10px; text-align: center; } #PDF_share h2 { font-size: 22px; text-align: center; } #PDF_share .exit { position: absolute; top: 5px; right: 5px; height: 25px; line-height: 25px; width: 25px; cursor: pointer; color: #999999; font-size: 18px; text-align: center; } .notify_count { display: none; font-size: 12px; background: #F00; color: #FFF; position: absolute; top: -6px; right: 6px; border-radius: 15px; padding: 2px 5px; } #FLOATER { cursor: -webkit-grabbing; box-shadow: 0px 0px 5px #000000; position: fixed; z-index: 1002; background-position: center center; background-repeat: no-repeat; width: 150px; height: 150px; opacity: 0.6; } .button { -webkit-font-smoothing: antialiased; text-transform: uppercase; border-radius: 5px; float: left; padding: 0px 5px; height: 48px; line-height: 48px; text-align: center; cursor: pointer; box-shadow: 0px 1px 3px #666666; font-size: 14px; } .button:hover { box-shadow: none; } .green { background-color: #279c4d; color: #FFFFFF; } .red { color: #FFFFFF; background: #c64242; background-image: -webkit-linear-gradient(top, #c64242, #a72e2e); background-image: -moz-linear-gradient(top, #c64242, #a72e2e); background-image: -ms-linear-gradient(top, #c64242, #a72e2e); background-image: -o-linear-gradient(top, #c64242, #a72e2e); background-image: linear-gradient(to bottom, #c64242, #a72e2e); } .gold { color: #000000; background: #c64242; background-image: -webkit-linear-gradient(top, #FFCC00, #E8BA00); background-image: -moz-linear-gradient(top, #FFCC00, #E8BA00); background-image: -ms-linear-gradient(top, #FFCC00, #E8BA00); background-image: -o-linear-gradient(top, #FFCC00, #E8BA00); background-image: linear-gradient(to bottom, #FFCC00, #E8BA00); } .button.red:hover { background: #a72e2e; } .blue { background-color: #1880C9; color: #FFFFFF; } .facebookblue { background: #4C69A6; color: #FFFFFF; } .googlered { background: #DD4B39; color: #FFFFFF; } .white { background-color: #FFFFFF; color: #1880C9; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } .familySearch { color: #FFFFFF; background: #87b940; background-image: -webkit-linear-gradient(top, #87b940, #7CA93C); background-image: -moz-linear-gradient(top, #87b940, #7CA93C); background-image: -ms-linear-gradient(top, #87b940, #7CA93C); background-image: -o-linear-gradient(top, #87b940, #7CA93C); background-image: linear-gradient(to bottom, #87b940, #7CA93C); } .button.familySearch:hover { background: #7CA93C; } .button.close { color: #999999; background: #FFFFFF; background-image: -webkit-linear-gradient(top, #FFFFFF, #EAEAEA); background-image: -moz-linear-gradient(top, #FFFFFF, #EAEAEA); background-image: -ms-linear-gradient(top, #FFFFFF, #EAEAEA); background-image: -o-linear-gradient(top, #FFFFFF, #EAEAEA); background-image: linear-gradient(to bottom, #FFFFFF, #EAEAEA); } .button.close:hover { background: #EAEAEA; } .stripe-button-el { cursor: pointer; font-size: 14px; color: #fff; font-weight: bold; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); border-radius: 4px; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);padding: 0 12px; height: 30px; line-height: 30px; background: #1275ff; background-image: -webkit-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -webkit-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: -o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); background-image: linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4); } .stripe-button-el span { display: block; } .wait4AJAX { opacity: 0.6; pointer-events: none; background-image: url(/images/loading.gif); background-repeat: no-repeat; background-position: -30px -16px;} .wait4AJAX .spinner { display: block !important; } .close.x { position: absolute; top: 10px; right: 10px; height: 25px; line-height: 25px; width: 25px; text-align: center; color: #D7D7D7; font-size: 22px; cursor: pointer; z-index: 100; } @-webkit-keyframes error-floatUp{ from { -webkit-transform: translate3d(0px,0px,0px); } to { -webkit-transform: translate3d(0px,-50px,0px); } } @-moz-keyframes error-floatUp{ from { -moz-transform: translate3d(0px,0px,0px); } to { -moz-transform: translate3d(0px,-50px,0px); } } @keyframes error-floatUp{ from { transform: translate3d(0px,0px,0px); } to { transform: translate3d(0px,-50px,0px); } } @media screen and (max-width: 1024px) { .logo_seal { width: 30px; height: 30px; background-size: contain; top: -15px; margin-left: -15px; } } @media screen and (max-width: 1023px) { #feedBackButton, .GUIDE { display: none; } #memories_upload_agreement { top: 75px; } .default-header.responsive.signedin .options .option.signout { display: none; } } @media screen and (max-width: 870px) { #addEvent { width: 585px; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { width: 271px; } #addEvent .input.holder.half { width: 121px; } #addEvent .attachment { width: 183px; min-height: 183px; } #addEvent .attachment .image { width: 183px; height: 183px; } } @media screen and (max-width: 740px) { #memories_upload_agreement { padding: 40px 20px; } } @media screen and (max-width: 710px) { #addEvent { padding: 40px 20px; width: 475px; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { width: 216px; } #addEvent .input.holder.half { width: 93px; } #addEvent .attachment { width: 146px; min-height: 146px; } #addEvent .attachment .image { width: 146px; height: 146px; } } @media screen and (max-width: 700px) { #memories_upload_agreement { width: 500px; } .default-header.responsive.signedin .logo.base { left: -25px; } .default-header.responsive.signedin .logo.base img { height: auto; width: 210px; margin-top: 15px; } .default-header.responsive.signedin .logo.base.desktop { width: 100%; left: 0px; height: 33px; overflow: hidden; } .default-header.responsive.signedin .logo.base.desktop img { width: 157px; margin: 0px auto; display: block; } .default-header.responsive.signedin .logo.base.desktop { display: none; } .default-header.responsive.signedin .logo.base.mobile { display: block; top: 5px; left: 5px; } .default-header.responsive.signedin .logo.base.mobile img { height: 60px; width: 60px; margin-top: 0px; } .default-header.responsive.signedin .options { right: 10px; top: 5px; } .default-header.responsive.signedin .options .option { height: 60px; line-height: 60px; } .default-header.responsive.signedin { height: 70px; } } @media screen and (max-width: 570px) { .form .input.holder .suggestions { width: 300px; } #memories_upload_agreement { width: 280px; } } @media screen and (max-width: 560px) { #addEvent { padding: 40px 10px; width: 395px; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { width: 176px; } #addEvent .input.holder.half { width: 73px; } #addEvent .attachment { width: 185px; min-height: 185px; } #addEvent .attachment .image { width: 185px; height: 185px; } } @media screen and (max-width: 540px) { .default-header.responsive.anonymous .logo.base { left: -34px; } .default-header.responsive.anonymous .logo.base img { height: auto; width: 210px; margin-top: 15px; } } @media screen and (max-width: 520px) { #footer .links { width: 400px; margin: 0px auto; text-align: center; } #footer .links .link { display: inline; float: none; } } @media screen and (max-width: 500px) { .person_details.overlay { padding: 40px 20px; margin-left: -220px; } #PDF_share { padding: 40px 20px; } } @media screen and (max-width: 460px) { #PDF_share { width: 280px; } .person_details.overlay { width: 280px; margin-left: -160px; } .person_details.overlay .person_form { width: auto; } .person_form .input.holder.father, .person_form .input.holder.mother { width: 121px; } .person_form .input.holder.date { width: 80px; } .person_form .input.holder.place { width: 161px; } .person_details .treeOptions { width: auto; } .person_form .input.holder.middle.name { margin-right: 0px; } .person_form .input.holder.first.name, .person_form .input.holder.last.name { width: 190px; } .person_form .input.holder.nickname { width: 245px; } #addEvent { width: 335px; } #addEvent textarea { font-size: 16px; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { width: 148px; } #addEvent .input.holder.half { width: 62px; } #addEvent .input.holder.caption, #addEvent .input.holder.location_artifact { margin-right: 10px; } #addEvent .input.holder.start_date.half { margin-right: 10px; } #addEvent .attachment { width: 155px; min-height: 155px; } #addEvent .attachment .image { width: 155px; height: 155px; } } @media screen and (max-width: 400px) { .default-header.responsive.signedin .options { right: 5px; } .default-header.responsive.signedin .options .option { font-size: 14px; margin-right: 10px; } .default-header.responsive.anonymous .logo.base img { width: 170px; margin-left: 0px; margin-top: 22px; } #footer { padding: 0px 10px; } #footer .links { width: 250px; margin: 0px auto; } #footer .links .link { margin-right: 20px; font-size: 13px; float: none; display: inline; } #footer .sharing { width: 300px; } #footer .sharing .share { margin-right: 19px; } #footer .address { font-size: 10px; } .GEDCOM { padding: 20px 10px; width: 300px; margin-left: -160px; } .GEDCOM .form .button.red { margin-left: 0px; width: 175px; } } @media screen and (max-width: 359px) { #addEvent { width: 300px; } #addEvent .input.holder.caption, #addEvent .input.holder.start_date, #addEvent .input.holder.end_date, #addEvent .input.holder.location_artifact, #addEvent .input.holder.location_residence { width: 131px; } #addEvent .input.holder.half { width: 53px; } #addEvent .attachment { width: 138px; min-height: 138px; } #addEvent .attachment .image { width: 138px; height: 138px; } }#account { } #account .content { width: 300px; padding: 40px; margin: 33px auto 0px auto; background-color: #FCFCFC; border-radius: 3px; position: relative; } #account .personal { font-family: 'Oswald', sans-serif; margin-bottom: 15px; } #account .personal .name { text-transform: uppercase; font-size: 26px; height: 25px; line-height: 25px; } #account .personal .sub { color: #999999; font-size: 14px; } #account .personal .sub .email { float: left; } #account .personal .sub .zip { float: right; } #account .content .option { height: 25px; line-height: 25px; color: #1880C9; cursor: pointer; } #account .content .option:hover { text-decoration: underline; } #account .form .input.holder.zip { width: 100px; } #account .button.changeEmail,#account .button.changePassword { } #account input[type=submit] { width: 188px; margin: 10px 10px 0px 0px; } #account .button.close { width: 90px; margin-top: 10px; } #account .form { padding-top: 5px; } #account .form.changeEmail,#account .form.changePassword, #account .form.updateAccount, #account .subscription_info { display: none; margin-bottom: 10px; } #account .form .input.holder { float: none; } #account .other_groups { margin-top: 20px; } #account .subscription { margin-top: 15px; } #account .subscription .status { margin-left: 15px; } #account .subscription .status.bad { color: #FF3434; } #account .subscription .option { margin-left: 30px; font-size: 12px; } #account .subscription .subscribe, #account .gifts .subscribe { padding:10px;font-size: 14px; text-align: center; background-color: #F9F8B8; margin-top: 10px; display: block; } #account .subscription .payments { display: none; margin-left: 45px; font-size: 12px; } #account .subscription .payments .payment { margin-bottom: 5px; } #account .failed_payment { text-align: center; border: 1px solid #FF6600; padding: 10px 5px; } #account .failed_payment .text { font-size: 12px; font-style: italic; } #account .gifts { } #account .gifts .list { display: none; } #account .gifts .gift { border-bottom: 1px solid #E7E7E7; padding: 10px 0px; } #account .gifts .gift .info { font-size: 12px; } #account .gifts .gift .info .purchased { float: left; width: 90px; } #account .gifts .gift .info .recipient { float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 140px; margin-right: 10px; height: 14px; } #account .gifts .gift .info .status { float: left; width: 60px; } #account .gifts .gift .form { display: none; } #account .gifts .gift .form .sent { display: none; text-align: center; font-size: 12px; margin-top: 10px; } #account .gifts .gift .form.SENT .sent { display: block; } #account .gifts .gift .form.WAITING .input.holder:not(.date_picker) { display: none; } #account .gifts .gift .form.WAITING .sent { display: block; } #account .gifts .gift .form.SENT .input.holder { display: none; } #account .gifts .gift .form input[type=submit] { display: block; float: none; width: 200px; height: 31px; line-height:31px; margin: 10px auto; } #account .gifts .gift .form .input.holder { float: left; } #account .gifts .gift .form .input.holder.name { width: 131px; } #account .gifts .gift .form .input.holder.name.first { margin-right: 10px; } #account .gifts .gift .form .input.holder.email { float: none; } #account .gifts .create_another { margin-top: 15px; display: block; } #account .gifts .gift .form .input.holder.date_picker,#account .gifts .gift .form .input.holder.gift_msg { float: none; width: auto; } #account .input.holder.date_picker input { padding: 6px 0px; } #account .date_picker.old { border: none; background: none; box-shadow: none; } #account .date_picker.old select { height: 30px; } #account .date_picker.old .month { width: 45%; } #account .date_picker.old .day, #GIFTED .date_picker.old .year { width: 25%; } #account #beta_privileges { margin: 10px 0px; } #account #beta_privileges .explain { font-size: 12px; margin-left: 24px; color: #939393; } @media screen and (max-width: 400px) { #account .content { width: 280px; padding: 40px 20px; } #account input[type="submit"] { width: 168px; } #account .subscription .status { font-size: 14px; } #account .gifts .gift .form .input.holder.name { width: 121px; } #account .gifts .gift .info .recipient { width: 119px; } }#ADDBETA { } #ADDBETA .contents { position: relative; width: 492px; padding: 40px 20px; margin: 25px auto 0px auto; background-color: #FFFFFF; } #ADDBETA h1 { font-size: 36px; text-align: center; } #ADDBETA .subtext { color: #999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 10px; text-align: center; margin: 10px 0px 20px 0px; } #ADDBETA ol { margin-left: 20px; } #ADDBETA ol li { list-style: decimal; margin-bottom: 15px; } #ADDBETA .ready { text-align: center; margin-top: 20px; } @media screen and (max-width: 580px) { #ADDBETA h1 { font-size: 24px; } #ADDBETA .contents { width: 292px; } }#HLauth { } #HLauth .content { width: 380px; margin: 40px auto; padding-top: 40px; position: relative; border-radius: 3px; background-color: #FFFFFF; } #HLauth .content.forReset { display: none; padding: 40px; width: 300px; } #HLauth .content.forReset .cancel { width: 75px; } #HLauth .content.forReset .button.red { width: 204px; float: left; margin-right: 10px; } #HLauth .content .forms { width: 300px; margin: 0px auto; padding: 0px 40px 40px 40px; background-color: #FCFCFC; } #HLauth .tabs { width: 300px; margin: 0px auto; border-radius: 3px 3px 0px 0px; } #HLauth .tabs .tab { cursor: pointer; float: left; padding-top:14px; height: 32px; width: 148px; text-align: center; background-color: #FFFFFF; border: 1px solid #9E9E9E; } #HLauth .tabs .tab .text { width: 75px; margin: 0px auto; height: 18px; } #HLauth .tabs .tab.login { border-radius: 3px 0px 0px 0px; } #HLauth .tabs .tab.signup { margin-left: -1px; border-radius: 0px 3px 0px 0px; } #HLauth .tabs .tab.selected { background-color: #FCFCFC; border-bottom-color: #FCFCFC } #HLauth .tabs .tab.selected .text { border-bottom: 2px solid #FFCC00; } #HLauth .divider { height: 1px; margin-top: -1px; background-color: #9E9E9E; margin-bottom: 10px; } #HLauth .button.facebookblue, #HLauth .button.googlered { position: relative; padding: 0px 20px 0px 39px; float: none; display: block; height: 30px; line-height: 30px; text-align: center; margin: 0px auto; } #HLauth .button.facebookblue img { position: absolute; top: 8px; left: 20px; } #HLauth .button.googlered { margin: 20px 0px 10px 0px; } #HLauth .button.googlered img { position: absolute; top: 0px; left: 15px; } #HLauth .or { margin: 20px 0px; font-weight: bold; text-align: center; } #HLauth .forAuth .form { display: none; } #HLauth .form.selected { display: block; } #HLauth .form .input.holder { float: none; } #HLauth .form .button.red { float: none; width: 100%; margin-top: 10px; } #HLauth .resetPassword { text-align: center; line-height: 45px; margin-top: 10px; } #HLauth #log_form { } #HLauth #ca_form { } @media screen and (max-width: 400px) { #HLauth .content { padding-top: 20px; width: 320px; } #HLauth .content.forReset { padding: 10px; width: 300px; } #HLauth .content.forReset h1 { font-size: 36px; } #HLauth .content .forms { padding: 0px 0px 20px 0px; } }#BETA { } #BETA .content { width: 400px; margin: 0px auto; padding: 40px; background-color: #FFFDF2; } #BETA h1 { text-align: center; margin-bottom: 10px; } #BETA .content .text { text-align: center;} #BETA .button.red { float: none; width: 200px; margin: 20px auto; display: block; }#changeemail { min-height: 400px; } #changeemail .content { position: relative; padding: 40px 20px; width: 280px; margin: 35px auto 0px auto; text-align: center; background-color: #FCFCFC; }#DEV { } #DEV .content { width: 800px; padding: 40px; margin: 0px auto; background: #FCFCFC; position: relative; } #DEV .divider { height: 1px; background-color: #000000; margin: 40px 60px; } #DEV h1 { text-align: center; } #DEV h2 { margin-bottom: 10px; font-weight: bold; } #DEV h2.api { margin-top: 40px; } #DEV h3 { margin: 10px 0px; font-weight: bold; font-size: 18px; } #DEV h4 { font-size: 16px; } #DEV .form.request_key { display: none; width: 320px; margin: 0px auto; } #DEV .form.request_key .input.holder { width: 305px; float: left; } #DEV .form.request_key .input.holder.half { width: 140px; } #DEV .form.request_key .radioHolder { margin: 10px auto; width: 245px; } #DEV .form.request_key .button.red { display: block; margin: 0px auto; width: 200px; float: none; } #DEV .subtext { text-align: center; line-height: 22px; margin-bottom: 20px;color: #BEBEBE;font-size: 16px;font-family: Lato, 'Helvetica Neue', sans-serif; color: #999999; } #DEV .subtext .inner { width: 650px; margin: 0px auto 15px auto; } #DEV .not_developer { width: 255px; margin: 0px auto; } #DEV .not_developer .button.red { width: 200px; margin: 0px auto; float: none; } #DEV .developer { width: 540px; margin: 35px auto; } #DEV .developer div { float: left; padding: 5px 10px; border: 1px solid #000000; position: relative; } #DEV .developer div label { position: absolute;top: -14px;left: 6px;color: #939393;font-size: 12px; } #DEV .developer .key { border-right-width: 0px; border-radius: 3px 0px 0px 3px; } #DEV .developer .date_created { border-right-width: 0px; } #DEV .developer .status { border-radius: 0px 3px 3px 0px; } #DEV .tester, #DEV .section { width: 660px; margin: 0px auto; } #DEV .returns { margin: 0px 0px 15px 30px; } #DEV .section { margin-bottom: 20px; } #DEV .tester .genderHolder { width: 155px; } #DEV .tester .genderHolder .radioHolder { float: left; margin-right: 15px; } #DEV .tester .input.holder { margin-top: 0px; } #DEV .tester .button.red { width: 154px; margin-right: 12px; margin-top: 10px; float: right; } #DEV pre { word-break: break-all; overflow-y: scroll; max-height: 200px; margin: 10px auto; } #DEV table { min-width: 660px; font-size: 14px; } #DEV td { background-color: #E7E7E7; padding: 10px; } #ERROR_LANDING { min-height: 400px; } #ERROR_LANDING .content { position: relative; background-color: #FFFFFF; padding: 40px 20px; text-align: center; margin: 40px auto 0px auto; width: 400px; } #ERROR_LANDING .redirect { text-align: center; margin-top: 15px; font-style: italic; } @media screen and (max-width: 460px) { #ERROR_LANDING .content { width: 280px; } }#family { overflow: hidden; background-color: #F2F0D5; background: url(/images/familytreebackground.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #family #updates { display: none; z-index: 1100; cursor: auto; position: fixed; top: 120px; right: 5px; background-color: #FFF; padding: 5px; border-radius: 3px; box-shadow: 0 0 .9em 0 #99938D; } #family #updates .update { width: 220px; position: relative; border-bottom: 1px dashed #999; margin-bottom: 5px; padding-bottom: 10px; padding-left: 30px; } #family #updates .update .remove { position: absolute; top: 0px; left: 0px; height: 40px; line-height: 40px; width: 25px; text-align: center; color: #999999; cursor: pointer; } #family #updates .update:last-child { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; } #family #updates .update .name { font-size: 12px; height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #family #updates .update .name .email { font-size: 10px; } #family #updates .update .message { height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #family .center { height: 30px; width: 30px; background-image: url(/images/treev2.png); background-repeat: no-repeat; background-position: 6px 4px; opacity: 0.7; } #family .getStory { height: 30px; width: 30px; background-image: url(/images/bookv2.png); background-repeat: no-repeat; background-position: 5px 8px; } #family .legend { width: 227px; margin: 10px auto; } #family .legend .title { font-size: 12px; font-style: italic; float: left; height: 20px; line-height: 20px; padding: 5px 0px; } #family .legend .key { position: relative; float: left; margin-right: 10px; height: 20px; line-height: 20px; background: rgba(255,255,255,.6); border: 1px solid #E7E7E7; border-radius: 3px; padding: 5px 5px 5px 30px; font-size: 12px; } #family .legend .key.last { margin-right: 0px; } #family .legend .image { position: absolute; top: 0px; left: 0px; } #family .family_tools { position: absolute; top: 93px; left: 40px; z-index: 401; border-radius: 5px;width: 300px; } #family .search { position: relative; } #family .search.hide { display: none; } #family .search .form { border-radius: 5px; } #family .search .form .input.holder { margin-top: 0px; float: none; } #family .search ul { margin: 0px 1px; background-color: #FCFCFC; } #family .search ul li { height: 20px; line-height: 20px; font-size: 12px; cursor: pointer; color: #1880C9; padding: 0px 5px; } #family .search ul li .date { color: #000000; } #family .search ul li:hover { background-color: #E7E7E7; } #family .search #gedcom_tooltip { font-size: 14px; padding: 10px; background: #FFFFFF; position: absolute; top: -69px; left: 310px; border: 1px solid #E7E7E7; border-radius: 5px; width: 320px; box-shadow: 0 0 .9em 0 #99938D; } #family .search #gedcom_tooltip ol { margin: 10px 0px 10px 25px; } #family .search #gedcom_tooltip ol li { list-style: decimal; } #family .search #gedcom_tooltip .triangle { position: absolute; top: 50%; left: -10px; margin-top: -10px; height: 20px; width: 10px; overflow: hidden; } #family .search #gedcom_tooltip .triangle .point { position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; background: #FFFFFF; border: 1px solid #E7E7E7; -webkit-transform: translate3d(3px, -1px, 0px) rotateZ(45deg); -moz-transform: translate3d(3px, -1px, 0px) rotateZ(45deg); -ms-transform: translate3d(3px, -1px, 0px) rotateZ(45deg); } #family .search #gedcom_tooltip .hide_tooltip { text-align: center; margin-top: 10px; text-decoration: underline; color: #1880C9; cursor: pointer; } #family.FS .tree .create { cursor: default; } #family.FS .unknown.person .info { cursor: move; } #family.FS .person .info .fs_id { display: block; } #family .groups { position: relative; margin-bottom: 10px; } #family .groups .person { display: block; box-shadow: none; width: auto; cursor: pointer; text-align: center; padding: 0px 60px 0px 38px; height: 30px; line-height: 30px; border-radius: 5px; background-color: #FFFFFF; } #family .groups .person .name { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #family .groups .person .edit { position: absolute; top: 0px; right: 0px; background-image: url(/images/edit.png); background-repeat: no-repeat; background-position: 4px 4px; width: 30px; height: 30px; } #family .groups .person .default { position: absolute; top: 4px; left: 8px; } #family .groups .person .dropDown { position: absolute; top: 0px; right: 36px; color: #999999; } #family .groups .other_groups { display: none; margin-top: 10px; background-color: #FFFFFF; padding: 5px 0px; max-height: 150px; overflow-y: auto; overflow-x: hidden; width: 100%; min-width: 210px; } #family .groups .other_groups .title { padding: 0px 5px; } #family .other_groups .group:hover { text-decoration: underline; } #family .default-header .options .option { color: #000000; border-color: #000000; } #family .couple { border: 1px dotted #000000; border-radius: 3px; float: left; margin: 5px; padding: 5px; } #family .couple .parent { background-color: #E7E7E7; } #family .changeGroupName { display: none; padding: 10px; width: 280px; margin-top: 10px; } #family .changeGroupName .input.holder { float: none; margin-bottom: 10px; } #family .changeGroupName input[type=submit] { width: 173px; margin-right: 15px; } #family .changeGroupName .remove { margin-top: 20px; text-align: center; } #family .changeGroupName .button.close { width: 80px; } #family .window { position: relative; overflow: auto; cursor: move; } #family .tree { height: 6000px; width: 6000px; } #family .tree ::-moz-selection { color: inherit; background: transparent; } #family .tree ::selection { color: inherit; background: transparent; } #family .tree .create { text-align: center; cursor: pointer; height: 25px; line-height: 25px; font-size: 14px; } #family .tree .create.spouse { } #family .tree .create.sibling { } #family .tree .create.child { } #family .tree .extension { position: relative; height: 24px; left: 40px; top: 0px; width: 200px; height: 60px; } #family .tree .extension .big.connector:before { width: 70px; left: -70px; } #family .tree .extend { display: none; position: absolute; top: 11px; right: -40px; width: 32px; height: 32px; cursor: pointer; } #family .tree .extend .image { position: absolute; top: 50%; left: 50%; margin-left: -5px; margin-top: -7px; background-image: url(/images/arrow-right.png); width: 10px; height: 14px; } #family .tree .extend.load .image { background-image: url('/images/loading.gif'); width: 21px; height: 21px; background-position: -30px -30px; margin-left: -11px; margin-top: -11px; } #family .tree .tail { position: absolute; top: 50%; background-color: #000000; width: 5px; height: 1px; } #family .tree .tail.forward { right: -5px; } #family .tree .tail.backward { left: -5px; } #family .tree .connector { z-index: 1; border: 1px solid #000000; border-width: 1px 0px 1px 1px; border-radius: 3px 0px 0px 3px; position: absolute; top: 50%; width: 5px; height: 10px; } #family .tree .connector:before { content: ""; border: 1px solid #000000; border-width: 1px 0px 0px 0px; position: absolute; top: 50%; left: -5px; width: 5px; } #family .tree .big.connector:before { width: 30px; left: -30px; } #family .tree .children .connector { right: -5px; display: none; border-width: 1px 1px 1px 0px; } #family .tree .children .big.connector { } #family .tree .children .big.connector:before { width: 30px; left: -30px; } #family .person { display: none; border-radius: 3px; height: 60px; width: 200px; box-shadow: 0 0 .9em 0 #99938D; } #family .person.root { position: relative; } #family .person.root > .info .name { font-weight: bold; } #family .person.unknown { -webkit-animation: node-appear .5s; border: 1px dashed #000000; background-color: transparent; box-shadow: none; } #family .person.unknown .connector { display: none; } #family .person.unknown .center, #family .tree .person.unknown .getStory { display: none; } #family .person.unknown .info { background-color: transparent; } #family .person.unknown .info .name { height: 50px; line-height: 50px; text-align: center; } #family .person.unknown .info .lifespan { display: none; } #family .person .info { border-left: 5px solid #999999; background-color: #FFFFFF; cursor: pointer; font-size: 14px; z-index: 2; position: absolute; width: 160px; padding: 5px 30px 5px 5px; height: 50px; border-radius: 3px; } #family .person .info.M { border-left: 5px solid #44B6DB; } #family .person .info.F { border-left: 5px solid #F464A6; } #family .person .info .name { height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #family .person .info .dot { border-radius: 50px; width: 10px; height: 10px; position: absolute; bottom: 10px; right: 36px; } #family .person .info .fs_id { display: none; } #family .person .info .fs_id, #family .tree .person .info .lifespan { height: 14px; line-height: 14px; font-size: 12px; color: #888888; } #family .person .info .center { border: 1px solid #C5C5C5; border-width: 0px 0px 0px 1px; position: absolute; top: 0px; right: 0px; cursor: pointer; opacity: 0.7; } #family .person .info .getStory { border: 1px solid #C5C5C5; border-width: 1px 0px 0px 1px; position: absolute; bottom: 0px; right: 0px; cursor: pointer; } #family .person.root > .info .center { display: none; } #family .tree .parent { position: absolute; } #family .tree .parent.out { left: 210px; } #family .tree .parent.in { left: 210px; } #family .tree .main { width: 200px; margin-left: 225px; margin-top: 2970px; } #family .tree .main .siblings { } #family .tree .main .self { position: relative; margin: 20px 0px; } #family .tree .main .self .line { position: absolute; z-index: 1; background-color: #000000; } #family .tree .main .self .line.horizontal { left: 50%; top: 31px; height: 50px; width: 1px; } #family .tree .main .self .line.vertical { top: 50%; left: -60px; height: 1px; width: 70px; } #family .tree .main .self .children { position: absolute; width: 200px; top: 50%; margin-top: -15px; left: -225px; } #family .tree .spouse, #family .tree .child, #family .tree .sibling { margin: 5px 0px; } #family .tree .tail { position: absolute; top: 50%; background-color: #000000; width: 10px; height: 1px; } #family .tree .tail.forward { right: -10px; } #family .tree .tail.backward { left: -10px; } #family .tree .main .spouses { } #family .tutorialHelp { position: absolute; top: 85px; right: 60px; z-index: 500; cursor: pointer; } #family #family_mobile { display: none; width: 640px; margin: 20px auto; } #family_mobile { margin-top: 20px; } #family_mobile h3 { margin-bottom: 10px; } #family_mobile .person { display: block; margin-bottom: 5px; box-shadow: none; width: 310px; } #family_mobile .person .info { width: 270px; } #family_mobile .person .info .dot { display: none; } #family_mobile .person.main { margin-left: 30px; } #family_mobile .siblings { margin-left: 30px; } #family_mobile .spouses .child_list { margin-bottom: 30px; } #family_mobile .children { margin-left: 30px; margin-bottom: 20px; } #family_mobile .children .person, #family_mobile .person.main, #family_mobile .siblings .person { width: 280px; } #family_mobile .children .person .info, #family_mobile .person.main .info, #family_mobile .siblings .person .info { width: 240px; } #family_mobile .person.unknown .getStory { display: none; } #family_mobile #create_sibling_2 { margin-left: 30px; width: 280px; margin-bottom: 30px; } #family_mobile #create_sibling_2 .info { width: 240px; } #family_mobile .left { float: left; margin-right: 20px; width: 310px; } #family_mobile .right { float: left; width: 310px; } #family_mobile #mobile_add_sibling_button,#family_mobile #mobile_add_child_button { width: 280px; margin-left: 30px; } @media screen and (max-width: 1023px) { #family { background: #F6F1D6; } #family #thewindow { display: none; } #family .groups { float: left; margin-right: 20px; width: 310px; } #family .groups .person .default { top: 7px; } #family .groups .person .edit { top: 1px; } #family .groups .person { height: 34px; line-height: 34px; } #family .search { float: left; } #family .search.hide { display: block; } #family .search .form { width: 308px; } #family .tutorialHelp { display: none; } #family .family_tools { position: static; width: 640px; margin: 15px auto 0px auto; } #family #family_mobile { display: block; } #family .legend { display: none; } } @media screen and (max-width: 660px){ #family .family_tools { width: 300px; } #family .groups { float: none; margin-bottom: 10px; width: auto; margin-right: 0px; } #family .search { float: none; } #family .search.hide { display: none; } #family .search .form { width: 298px; } #family_mobile .person { width: 300px; } #family_mobile .person .info { width: 260px; } #family_mobile .left { float: none; margin-right: 0px; width: auto; } #family_mobile .right { float: none; width: auto; } #family #family_mobile { width: 300px; padding: 0px 10px; } #family_mobile .children .person, #family_mobile .person.main, #family_mobile .siblings .person { width: 270px; } #family_mobile .children .person .info, #family_mobile .person.main .info, #family_mobile .siblings .person .info { width: 230px; } #family_mobile #create_sibling_2 {width: 270px; } #family_mobile #create_sibling_2 .info { width: 230px; } } @-webkit-keyframes node-appear { from { -webkit-transform: translateX(50px); opacity: 0.0; } to { -webkit-transform: translateX(0px); opacity: 1.0; } }#FAQ { } #HL_HELPER { background-color: #FCFCFC; width: 500px; margin: 20px auto 0px auto; padding: 40px; position: relative; } #HL_HELPER #video { display: none; height: 270px; margin-bottom: 20px; } #HL_HELPER #video iframe { margin-bottom: 15px; height: 100%; width: 100%; } #HL_HELPER .form.question .input.holder { width: 410px; border-radius: 3px 0px 0px 3px; } #HL_HELPER .form.question .button.red { width: 75px; height: 31px; line-height: 31px; margin-top: 20px; border-radius: 0px 3px 3px 0px; } #HL_HELPER .additional { margin-top: 10px; } #HL_HELPER .additional .text { text-align: center; } #HL_HELPER .additional .sendEmail { display: none; width: 100%; margin: 10px 0px 0px 0px; } #HL_HELPER .additional .sendEmail .input.holder { float: none; } #HL_HELPER .additional .sendEmail textarea { height: 130px; } #HL_HELPER .additional .sendEmail .button { float: right; margin-top: 10px; } #HL_HELPER .additional .sendEmail .button.red { margin-right: 20px; width: 150px; } #HL_HELPER .videos { text-align: center; } #HL_HELPER .videos .video { float: left; margin-right: 20px; position: relative; margin-bottom: 10px; cursor: pointer; border-radius: 3px; box-shadow: 0px 0px 5px #000000; } #HL_HELPER .videos .video .play { position: absolute; top: 50%; left: 50%; width: 52px; height: 40px; margin-top: -20px; margin-left: -26px; background-color: #ED0000; border-radius: 14px; } #HL_HELPER .videos .video .play img { width: 25px; margin: 8px 0px 0px 16px; display: block; } #HL_HELPER .videos .video:hover .play { background-color: #D20000; } #HL_HELPER .videos .video:hover { box-shadow: 0px 0px 1px #000000; } #HL_HELPER .videos .video .thumbnail { height: 100px; width: 100px; margin-bottom: 5px; } .FAQ_answers { padding: 10px; } .FAQ_answers .answer { margin-bottom: 5px; } .FAQ_answers .answer.selected .details { display: block; } .FAQ_answers .answer .title { } .FAQ_answers .answer .details { display: none; border: 1px solid #999; margin: 5px; padding: 10px; background-color: #F2F2F2; } .FAQ_answers .answer .details ul, .FAQ_answers .answer .details ol { margin-left: 20px; } .FAQ_answers .answer .details ul li { list-style: disc; } .FAQ_answers .answer .details ol li { list-style: decimal; } #TUTORIAL { display: none; position: absolute; z-index: 1001; width: 580px; top: 40px; left: 50%; margin-left: -290px; } #TUTORIAL .exit { position: absolute; top: 0px; right: 0px; height: 35px; line-height: 35px; width: 35px; cursor: pointer; text-align: center; color: #CCCCCC; font-size: 20px; } #TUTORIAL #HL_HELPER { margin-top: 0px; } @media screen and (max-width: 600px) { #TUTORIAL { width: 540px; margin-left: -270px;} #HL_HELPER { padding: 40px 20px; } } @media screen and (max-width: 560px) { #TUTORIAL { width: 320px; margin-left: -160px; } #HL_HELPER { width: 280px; } #HL_HELPER .form.question .input.holder { width: 190px; } }#feedBackButton { position: fixed; bottom: 42px; right: 0px; z-index: 100000; cursor: pointer; } #feedBack { position: fixed; bottom: 34px; right: 0px; z-index: 100000; display: none; padding: 10px; width: 400px; background-color: #FFFFFF; } #feedBack .tabs { } #feedBack .tabs .tab { float: left; } #feedBack .tabs .tab.selected { background-color: red; } #feedBack .form.suggest { display: none; } #feedBack h3 { margin-bottom: 10px; } #feedBack textarea { height: 184px; } #feedBack .input.holder { float: none; margin-bottom: 10px; } #feedBack .button { float: right; padding: 0px 15px; } #feedBack .button.close { margin-left: 10px; } #feedBack .FAQ_answers .answer { display: none; } @media screen and (max-width: 1000px) { #feedBack textarea { height: 100px; } } @media screen and (max-width: 420px) { #feedBack { width: 280px; padding: 20px; } }#FULL_NEW_USER { } #FULL_NEW_USER .content { width: 770px; margin: 35px auto 40px auto; background: #FCFCFC; padding: 40px; border-radius: 5px; position: relative; } #FULL_NEW_USER h1 { text-align: center; font-size: 32px; margin-bottom: 10px; } #FULL_NEW_USER .column { width: 400px; margin: 0px auto; position: relative; } #FULL_NEW_USER .column.left { float: left; } #FULL_NEW_USER .column.right { float: right; margin-left: 20px; width: 350px; } #FULL_NEW_USER .imports { margin-top: 15px; } #FULL_NEW_USER .screenshot { position: absolute; top: 10px; right: -65px; overflow: hidden; width: 110px; height: 104px; } #FULL_NEW_USER .screenshot img { height: 169px; width: 110px; z-index: 1; } #FULL_NEW_USER .screenshot .fade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: -moz-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%, rgba(252, 252, 252,0) 50%); background: -o-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: -ms-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: linear-gradient(to top, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%);} #FULL_NEW_USER .complimentary_stories { margin-top: -20px; } #FULL_NEW_USER .content .title { font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 28px; } #FULL_NEW_USER .explain { text-align: center; color: #999999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 15px; } #FULL_NEW_USER .division { border-bottom: 1px solid #000; margin-bottom: 20px; } #FULL_NEW_USER .familysearch { position: relative; } #FULL_NEW_USER .content .trees { margin: 10px 0px 20px 0px; width: 305px; } #FULL_NEW_USER .content .trees .tree { display: block; position: relative; padding-left: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 30px; line-height: 30px; } #FULL_NEW_USER .content .trees .tree img { position: absolute; top: 4px; left: 5px; } #FULL_NEW_USER .content .stories { margin-top: 10px; } #FULL_NEW_USER .content .stories .story { position: relative; margin-bottom: 15px; } #FULL_NEW_USER .content .stories .story .name { font-weight: bold; padding-left: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} #FULL_NEW_USER .content .stories .story .name .image { background-image: url(/images/bookv2.png); width: 19px; height: 15px; position: absolute; top: 4px; left: 0px; } #FULL_NEW_USER .content .stories .story .subtext { font-size: 12px; height: 14px; line-height: 14px; margin-left: 35px; color: #000000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #FULL_NEW_USER .content .stories .story .remove, #HOMEPAGE .stories .story .edit { display: none; position: absolute; top: 0px; } #FULL_NEW_USER .content .stories .story .remove { right: 0px; } #FULL_NEW_USER .content .stories .story .free { position: absolute; top: 0px; right: 0px; background-color: #C64242; color: #FFFFFF; text-decoration: none; font-size: 10px; padding: 2px; border-radius: 3px; } #FULL_NEW_USER .content .stories .story:hover .remove { display: block; } #FULL_NEW_USER .content .stories .story .person:hover { text-decoration: none; } #FULL_NEW_USER .content .stories .story .person:hover .name { text-decoration: underline; } #FULL_NEW_USER .imports .link { margin-bottom: 10px; font-size: 14px; margin-left: 10px; } #FULL_NEW_USER .person_details .person_form .input.holder.first.name, #FULL_NEW_USER .person_details .person_form .input.holder.last.name { width: 181px; } #FULL_NEW_USER .person_details .person_form .input.holder.last.name { margin-right: 0px; } #FULL_NEW_USER .beforeLogIn { display: none; width: 275px; padding: 10px; background-color: #FCFCFC; border: 1px solid #999999; border-radius: 5px; margin: 15px 0px; } #FULL_NEW_USER .beforeLogIn .log_in { float: none; width: 250px; margin: 0px auto; height: 31px; line-height: 31px; } #FULL_NEW_USER .beforeLogIn .spacer { text-align: center; margin-top: 10px; color: #666666; } #FULL_NEW_USER .beforeLogIn .form { width: 200px; margin: 0px auto; } #FULL_NEW_USER .beforeLogIn .form .input.holder { width: 110px; border-radius: 3px 0px 0px 3px; } #FULL_NEW_USER .beforeLogIn .form .button.red { width: 75px; height: 31px; line-height: 31px; margin-top: 20px; float: left; border-radius: 0px 3px 3px 0px; } #FULL_NEW_USER .or { text-align: center; font-weight: bold; } #FULL_NEW_USER .disclaimer { text-align: center; font-size: 14px; color: #999; width: 440px; margin: 30px auto 0px auto; } #FULL_NEW_USER .GEDCOM { position: static; margin-left: 0px; width: auto; } #FULL_NEW_USER .GEDCOM .logo_seal { display: none; } #FULL_NEW_USER .GEDCOM .notes { display: none; } #FULL_NEW_USER.split .toggles { display: none; width: 258px; margin: 10px auto; border-radius: 3px; overflow: hidden; border: 1px solid #C7C7C7; } #FULL_NEW_USER.split .toggles .toggle { float: left; cursor: pointer; height: 25px; line-height: 25px; text-align: center; width: 129px; outline: 1px solid #000000; background: white; } #FULL_NEW_USER.split .toggles .toggle.selected { background-color: #279c4d; color: #FFFFFF; } #FULL_NEW_USER #ancestry_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 45px; padding-bottom: 10px; margin-bottom: 15px; } #FULL_NEW_USER #myheritage_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 45px; padding-bottom: 10px; margin-bottom: 15px; } @media screen and (max-width: 870px) { #FULL_NEW_USER .content { width: 530px; } #FULL_NEW_USER .column.left { float: none; } #FULL_NEW_USER .column.right { float: none; margin: 0px auto; width: 400px; } #FULL_NEW_USER.split .hide_column { display: none; } #FULL_NEW_USER.split .toggles { display: block; } } @media screen and (max-width: 640px) { #FULL_NEW_USER .content { width: 405px; } #FULL_NEW_USER .explain { width: 265px; margin: 0px auto 15px auto; font-size: 12px; } #FULL_NEW_USER .screenshot { display: none; } #FULL_NEW_USER .disclaimer { width: 312px; } #FULL_NEW_USER .content .trees { width: auto; } } @media screen and (max-width: 520px) { #FULL_NEW_USER h1 { font-size: 22px; } #FULL_NEW_USER .column.left { width: auto; } #FULL_NEW_USER .column.right { width: auto; } #FULL_NEW_USER .content { width: 280px; padding: 40px 20px; } #FULL_NEW_USER .column { width: auto; } #FULL_NEW_USER .explain { width: auto; } #FULL_NEW_USER .content .title { font-size: 19px; } #FULL_NEW_USER .complimentary_stories { width: auto; font-size: 12px; } #FULL_NEW_USER .person_details .person_form { width: auto; } #FULL_NEW_USER .person_details .person_form .input.holder.first.name { width: 118px; margin-right: 15px; } #FULL_NEW_USER .person_details .person_form .input.holder.last.name { width: 118px; } #FULL_NEW_USER .person_details .person_form .input.holder.date { width: 90px; } #FULL_NEW_USER .person_details .person_form .input.holder.place { width: 146px; } #FULL_NEW_USER .GEDCOM { padding: 0px; margin: 30px 0px; } #FULL_NEW_USER .GEDCOM .form .button.red { margin-left: 0px; width: 179px; } #FULL_NEW_USER .GEDCOM .form .button.close { width: 80px; } #FULL_NEW_USER .beforeLogIn { width: auto; border-width: 0px 0px 1px 0px; border-radius: 0px; } #FULL_NEW_USER .beforeLogIn .log_in { width: 230px; } #FULL_NEW_USER .disclaimer { width: 225px; } }#GIFTED { } #GIFTED .content { width: 471px; padding: 40px; margin: 50px auto 0px auto; border-radius: 3px; position: relative; background-color: #FCFCFC; } #GIFTED h1 { font-size: 42px; } #GIFTED h4 { text-transform: uppercase; } #GIFTED .explain { font-size: 14px; margin-bottom: 20px; } #GIFTED .input.holder { float: none; } #GIFTED input[type=submit] { display: block; float: none; width: 200px; margin: 20px auto; } #GIFTED .create_another { margin-top: 15px; display: block; text-align: center; } #GIFTED .your_info, #GIFTED .their_info { float: left; width: 225px; margin-top: 20px; } #GIFTED .your_info { margin-right: 20px; } #GIFTED .input.holder.email { margin-top: 20px; } #GIFTED .input.holder.date_picker input { padding: 3px 0px; } #GIFTED .date_picker.old { border: none; background: none; box-shadow: none; } #GIFTED .date_picker.old select { height: 30px; } #GIFTED .date_picker.old .month { width: 45%; } #GIFTED .date_picker.old .day, #GIFTED .date_picker.old .year { width: 25%; } #GIFTED .form.SENT { display: none; } #GIFTED .form.WAITING { display: none; } #A_GIFTED { } #A_GIFTED h1 { text-align: center; font-size: 40px; } #A_GIFTED .content { width: 320px; padding: 40px; margin: 50px auto 0px auto; border-radius: 3px; position: relative; background-color: #FCFCFC; } #A_GIFTED .gift_msg { text-align: center; margin-bottom: 20px; } #A_GIFTED .hint { font-size: 10px; text-align: center; } #A_GIFTED .button.red { width: 200px; float: none; display: block; margin: 10px auto 0px auto; } #A_GIFTED .membership { margin: 10px 0px; text-align: center; } #A_GIFTED .ready { font-size: 10px; text-align: center; margin-bottom: 10px; } @media screen and (max-width: 580px) { #GIFTED .content { padding: 40px 20px; } } @media screen and (max-width: 540px){ #GIFTED .content { width: 280px; } #GIFTED .your_info, #GIFTED .their_info { float: none; width: auto; } #GIFTED .your_info { margin-right: 0px; } #GIFTED .input.holder.name { width: 120px; float: left; } #GIFTED .input.holder.name.first { margin-right: 10px; } } @media screen and (max-width: 430px){ #A_GIFTED .content { width: 280px; padding: 40px 20px; } }.GUIDE { min-height: 15px; z-index: 800; padding: 10px; background-color: #FFFFFF; position: fixed; left: 5px; width: 320px; bottom: 5px; background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; border-radius: 3px; } .GUIDE .done, .GUIDE.complete .not-done { display: none; } .GUIDE.complete .done { display: block; } .GUIDE.complete .restart { cursor: pointer; text-decoration: underline; text-align: center; height: 20px; line-height: 20px; } .GUIDE.hidden { width: 50px; } .GUIDE.hidden .toggle { width: 60px; background-image: url(/images/up.png); } .GUIDE.hidden .status { display: none !important; } .GUIDE .toggle { cursor: pointer; position: absolute; top: 5px; right: 5px; height: 25px; width: 40px; background-image: url(/images/down.png); background-repeat: no-repeat; background-position: center center; } .GUIDE .title { text-align: center; font-family: 'Oswald', sans-serif; margin-bottom: 5px; font-size: 24px; } .GUIDE .button.red.next { height: 22px; line-height: 22px; width: 22px; padding: 0px; margin-top: 5px; } .GUIDE .checkboxes { margin: 8px auto 0px auto; max-width: 320px; } .GUIDE .checkboxes .checkbox { border: 1px solid #FFFFFF; width: 14px; height: 14px; cursor: pointer; float: left; margin: 0px 5px 5px 0px; border-radius: 2px; } .GUIDE .checkboxes .checkbox .inner { display: none; border-radius: 3px; width: 6px; height: 6px; margin: 4px; background-color: #F79F28; border-radius: 3px; } .GUIDE .checkboxes .checkbox.checked { background-color: #F79F28; border: none; width: 16px; height: 16px; } .GUIDE .checkboxes .checkbox.selected .inner { display: block; } .GUIDE .explaination { display: none; text-align: center; margin-bottom: 5px; font-size: 14px; } #HOMEPAGE { min-height: 400px; } #HOMEPAGE .content { width: 624px; margin: 35px auto 40px auto; background: #FCFCFC; padding: 40px; border-radius: 5px; position: relative; } #HOMEPAGE .content.full { width: 575px; } #HOMEPAGE .content.full .left { float: none; width: 400px; margin: 0px auto; } #HOMEPAGE .content.full .right { display: none; } #HOMEPAGE .content.full .imports { margin-top: 0px; } #HOMEPAGE .content.full .imports .link, #HOMEPAGE.full .imports .title { font-size: 16px; margin-left: -15px; } #HOMEPAGE .content.full .imports .link { margin-left: 0px; } #HOMEPAGE .content .title { margin-left: -15px; margin-bottom: 10px; } #HOMEPAGE .content:not(.full) .title { font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 28px; } #HOMEPAGE h1 { text-align: center; font-size: 32px; margin-bottom: 10px; } #HOMEPAGE h2 { text-align: center; } #HOMEPAGE .or { font-weight: bold; margin: 10px 0px; } #HOMEPAGE .explain { text-align: center; color: #999999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 15px; } #HOMEPAGE .division { border-bottom: 1px solid #000; margin-bottom: 20px; } #HOMEPAGE .left, #HOMEPAGE .right { float: left; width: 300px; } #HOMEPAGE .left { margin-right: 24px; } #HOMEPAGE .complimentary_stories { margin-top: -20px; } #HOMEPAGE .trees h3,#HOMEPAGE .stories h3 { margin-bottom: 10px; } #HOMEPAGE .trees .tree { display: block; margin-bottom: 10px; position: relative; padding-left: 24px; height: 24px; line-height: 24px; } #HOMEPAGE .trees .tree img { position: absolute; top: 0px; left: 0px; } #HOMEPAGE .stories .story { position: relative; margin-bottom: 15px; } #HOMEPAGE .stories .story .name { font-weight: bold; padding-left: 25px; } #HOMEPAGE .stories .story .name .image { background-image: url(/images/bookv2.png); width: 19px; height: 15px; position: absolute; top: 4px; left: 0px; } #HOMEPAGE .stories .story .subtext { font-size: 12px; height: 14px; line-height: 14px; margin-left: 35px; color: #000000; } #HOMEPAGE .stories .story .remove, #HOMEPAGE .stories .story .edit { display: none; position: absolute; top: 0px; } #HOMEPAGE .stories .story .remove { right: 0px; } #HOMEPAGE .stories .story .free { position: absolute; top: 0px; right: 0px; background-color: #C64242; color: #FFFFFF; text-decoration: none; font-size: 10px; padding: 2px; border-radius: 3px; } #HOMEPAGE .stories .story:hover .remove { display: block; } #HOMEPAGE .stories .story .person:hover { text-decoration: none; } #HOMEPAGE .stories .story .person:hover .name { text-decoration: underline; } #HOMEPAGE .or { text-align: center; font-weight: bold; width: 100%; width: 187px; } #HOMEPAGE .imports { margin-top: 50px; } #HOMEPAGE .imports h3 { margin-bottom: 10px; } #HOMEPAGE .imports .link { margin-bottom: 10px; font-size: 14px; } #HOMEPAGE .imports .familysearch { position: relative; } #HOMEPAGE .imports .beforeLogIn { display: none; width: 275px; padding: 10px; background-color: #FCFCFC; border: 1px solid #999999; border-radius: 5px; margin: 15px 0px; } #HOMEPAGE .imports .beforeLogIn .log_in { float: none; width: 250px; margin: 0px auto; } #HOMEPAGE .imports .beforeLogIn .spacer { text-align: center; margin-top: 10px; color: #666666; } #HOMEPAGE .imports .beforeLogIn .form { width: 200px; margin: 0px auto; } #HOMEPAGE .imports .beforeLogIn .form .input.holder { width: 110px; border-radius: 3px 0px 0px 3px; } #HOMEPAGE .imports .beforeLogIn .form .button.red { width: 75px; height: 31px; line-height: 31px; margin-top: 20px; float: left; border-radius: 0px 3px 3px 0px; } #HOMEPAGE .disclaimer { text-align: center; font-size: 14px; color: #999; margin-top: 30px; } #HOMEPAGE .getMore { padding:10px;font-size: 14px; text-align: center; width: 200px; background-color: #F9F8B8; margin-left: 25px; margin-top: 20px; } #HOMEPAGE #person_details.overlay { display: none; position: fixed; top: 80px; left: 50%; margin-left: -240px; z-index: 1001; background: #FCFCFC; padding: 40px; border-radius: 5px; } #HOMEPAGE #person_details.overlay .close { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; color: #999999; cursor: pointer; } #HOMEPAGE .mobile { display: none; } #HOMEPAGE .screenshot { position: absolute; top: 171px; right: 153px; overflow: hidden; width: 110px; height: 104px; } #HOMEPAGE .screenshot img { height: 169px; width: 110px; z-index: 1; } #HOMEPAGE .screenshot .fade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: -moz-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%, rgba(252, 252, 252,0) 50%); background: -o-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: -ms-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: linear-gradient(to top, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%);}#LOGIN { } #LOGIN .content { width: 292px; padding: 40px 40px 10px 40px; margin: 50px auto 0px auto; border-radius: 3px; position: relative; background-color: #FCFCFC; } #LOGIN h1 { font-size: 32px; text-align: center; margin-bottom: 10px; } #LOGIN .errormsg { margin-bottom: 15px; } #LOGIN .subtext { color: #999999; font-size: 14px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 10px; } #LOGIN .or { margin: 20px 0px; font-weight: bold; text-align: center; } #LOGIN .button.facebookblue, #LOGIN .button.googlered { position: relative; padding: 0px 20px 0px 39px; float: none; display: block; width: 180px; height: 30px; line-height: 30px; text-align: center; margin: 0px auto; } #LOGIN .button.facebookblue img { position: absolute; top: 8px; left: 20px; } #LOGIN .button.googlered { margin-bottom: 10px; } #LOGIN .button.googlered img { position: absolute; top: 0px; left: 15px; } #LOGIN .form { margin-bottom: 20px; } #LOGIN .form .holder { float: none; } #LOGIN .form.logIn input[type=submit], #LOGIN .form.newaccount input[type=submit] { width: 100%; margin: 15px 0px; float: none; display: block; } #LOGIN .gift_msg { text-align: center; margin-bottom: 20px; } #LOGIN.signin .form.resetPassword { display: none; margin-top: 10px; } #LOGIN.signin .form.resetPassword input[type=submit] { width: 200px; margin-top: 15px; float: left; margin-right: 5px; } #LOGIN.signin .form.resetPassword .button.close { width: 65px; margin: 15px 0px 0px 10px; } #LOGIN.signin .forgotPassword { display: block; margin-top: 5px; } #LOGIN.signin .createAccount { display: block; margin-top: 5px; } #LOGIN.create .show_after_email { display: none; } @media screen and (max-width: 400px) { #LOGIN .content { width: 280px; padding: 40px 20px 10px 20px; } #LOGIN .subtext { font-size: 12px; } #LOGIN.signin .form.resetPassword input[type=submit] { width: 168px; } } #NEW_USER { } #NEW_USER .content { width: 530px; margin: 35px auto 40px auto; background: #FCFCFC; padding: 40px; border-radius: 5px; position: relative; } #NEW_USER.full .content { width: 770px; } #NEW_USER h1 { text-align: center; font-size: 32px; margin-bottom: 10px; } #NEW_USER .column { width: 400px; margin: 0px auto; position: relative; } #NEW_USER .column.left { float: left; } #NEW_USER .column.right { float: right; margin-left: 20px; width: 350px; } #NEW_USER .imports { margin-top: 15px; } #NEW_USER .screenshot { position: absolute; top: 10px; right: -65px; overflow: hidden; width: 110px; height: 104px; } #NEW_USER .screenshot img { height: 169px; width: 110px; z-index: 1; } #NEW_USER .screenshot .fade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: -moz-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%, rgba(252, 252, 252,0) 50%); background: -o-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: -ms-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: linear-gradient(to top, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%);} #NEW_USER .complimentary_stories { margin-top: -20px; } #NEW_USER .content .title { font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 28px; } #NEW_USER .explain { text-align: center; color: #999999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin: 0px auto 15px auto; width: 482px; } #NEW_USER .division { border-bottom: 1px solid #000; margin-bottom: 20px; } #NEW_USER .familysearch { position: relative; } #NEW_USER .content .trees { margin: 10px 0px 20px 0px; width: 305px; } #NEW_USER .content .trees .tree { display: block; position: relative; padding-left: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 30px; line-height: 30px; } #NEW_USER .content .trees .tree img { position: absolute; top: 4px; left: 5px; } #NEW_USER .content .stories { margin-top: 10px; } #NEW_USER .content .stories .story { position: relative; margin-bottom: 15px; } #NEW_USER .content .stories .story .name { font-weight: bold; padding-left: 25px; } #NEW_USER .content .stories .story .name .image { background-image: url(/images/bookv2.png); width: 19px; height: 15px; position: absolute; top: 4px; left: 0px; } #NEW_USER .content .stories .story .subtext { font-size: 12px; height: 14px; line-height: 14px; margin-left: 35px; color: #000000; } #NEW_USER .content .stories .story .remove, #HOMEPAGE .stories .story .edit { display: none; position: absolute; top: 0px; } #NEW_USER .content .stories .story .remove { right: 0px; } #NEW_USER .content .stories .story .free { position: absolute; top: 0px; right: 0px; background-color: #C64242; color: #FFFFFF; text-decoration: none; font-size: 10px; padding: 2px; border-radius: 3px; } #NEW_USER .content .stories .story:hover .remove { display: block; } #NEW_USER .content .stories .story .person:hover { text-decoration: none; } #NEW_USER .content .stories .story .person:hover .name { text-decoration: underline; } #NEW_USER .person_details .person_form .input.holder.first.name, #NEW_USER .person_details .person_form .input.holder.last.name { width: 181px; } #NEW_USER .person_details .person_form .input.holder.last.name { margin-right: 0px; } #NEW_USER .imports .link { margin-bottom: 10px; font-size: 14px; margin-left: 10px; } #NEW_USER .beforeLogIn { display: none; width: 275px; padding: 10px; background-color: #FCFCFC; margin: 15px auto; } #NEW_USER .beforeLogIn .log_in { float: none; width: 250px; margin: 0px auto; height: 31px; line-height: 31px; } #NEW_USER .beforeLogIn .spacer { text-align: center; margin-top: 10px; color: #666666; } #NEW_USER .beforeLogIn .form { width: 200px; margin: 0px auto; } #NEW_USER .beforeLogIn .form .input.holder { width: 110px; border-radius: 3px 0px 0px 3px; } #NEW_USER .beforeLogIn .form .button.familySearch { width: 75px; height: 31px; line-height: 31px; margin-top: 20px; float: left; border-radius: 0px 3px 3px 0px; } #NEW_USER .or { text-align: center; font-weight: bold; } #NEW_USER .disclaimer { text-align: center; font-size: 14px; color: #999; width: 440px; margin: 30px auto 0px auto; } #NEW_USER .GEDCOM { position: static; margin-left: 0px; width: auto; } #NEW_USER .GEDCOM .logo_seal { display: none; } #NEW_USER .GEDCOM .notes { display: none; } #NEW_USER .buttons { margin: 10px 0px; } #NEW_USER .buttons .button { width: 195px; height: auto; line-height: normal; padding: 8px 0px; } #NEW_USER .buttons .gedcom.button { margin-right: 10px; } #NEW_USER #faster_way { text-align: center; color: #999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; } #NEW_USER #ancestry_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 15px; padding-bottom: 10px; margin-bottom: 15px; } #NEW_USER #myheritage_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 15px; padding-bottom: 10px; margin-bottom: 15px; } @media screen and (max-width: 640px) { #NEW_USER .content { width: 405px; } #NEW_USER .explain { width: 265px; margin: 0px auto 15px auto; font-size: 12px; } #NEW_USER .screenshot { display: none; } #NEW_USER .disclaimer { width: 312px; } #NEW_USER .content .trees { width: auto; } } @media screen and (max-width: 520px) { #NEW_USER .content { width: 280px; padding: 40px 20px; } #NEW_USER .column { width: auto; } #NEW_USER .explain { width: auto; } #NEW_USER .content .title { font-size: 19px; } #NEW_USER .complimentary_stories { width: auto; font-size: 12px; } #NEW_USER .person_details .person_form { width: auto; } #NEW_USER .person_details .person_form .input.holder.first.name { width: 118px; margin-right: 15px; } #NEW_USER .person_details .person_form .input.holder.last.name { width: 118px; } #NEW_USER .person_details .person_form .input.holder.date { width: 90px; } #NEW_USER .person_details .person_form .input.holder.place { width: 146px; } #NEW_USER .GEDCOM { padding: 0px; margin: 30px 0px; } #NEW_USER .GEDCOM .form .button.red { margin-left: 0px; width: 178px; } #NEW_USER .GEDCOM .form .button.close { width: 80px; } #NEW_USER .beforeLogIn { width: auto; border-width: 0px 0px 1px 0px; border-radius: 0px; } #NEW_USER .disclaimer { width: 225px; } #NEW_USER .beforeLogIn .log_in { width: 230px; } #NEW_USER .buttons .button { width: 134px; } }#NEW_USER_TREES { } #NEW_USER_TREES .content { width: 530px; margin: 35px auto 40px auto; background: #FCFCFC; padding: 40px; border-radius: 5px; position: relative; } #NEW_USER_TREES.full .content { width: 770px; } #NEW_USER_TREES h1 { text-align: center; font-size: 32px; margin-bottom: 10px; } #NEW_USER_TREES .column { width: 400px; margin: 0px auto; position: relative; } #NEW_USER_TREES .column.left { float: left; } #NEW_USER_TREES .column.right { float: right; margin-left: 20px; width: 350px; } #NEW_USER_TREES .imports { margin-top: 15px; } #NEW_USER_TREES .screenshot { position: absolute; top: 10px; right: -65px; overflow: hidden; width: 110px; height: 104px; } #NEW_USER_TREES .screenshot img { height: 169px; width: 110px; z-index: 1; } #NEW_USER_TREES .screenshot .fade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: -moz-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%, rgba(252, 252, 252,0) 50%); background: -o-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: -ms-linear-gradient(bottom, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%); background: linear-gradient(to top, rgba(252, 252, 252, 1.0) 0%,rgba(252, 252, 252,0) 50%);} #NEW_USER_TREES .complimentary_stories { margin-top: -20px; } #NEW_USER_TREES .content .title { font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 28px; } #NEW_USER_TREES .explain { text-align: center; color: #999999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 15px; } #NEW_USER_TREES .division { border-bottom: 1px solid #000; margin-bottom: 20px; } #NEW_USER_TREES .familysearch { position: relative; } #NEW_USER_TREES .content .trees { margin: 10px 0px 20px 0px; width: 305px; } #NEW_USER_TREES .content .trees .tree { display: block; position: relative; padding-left: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 30px; line-height: 30px; } #NEW_USER_TREES .content .trees .tree img { position: absolute; top: 4px; left: 5px; } #NEW_USER_TREES .content .stories { margin-top: 10px; } #NEW_USER_TREES .content .stories .story { position: relative; margin-bottom: 15px; } #NEW_USER_TREES .content .stories .story .name { font-weight: bold; padding-left: 25px; } #NEW_USER_TREES .content .stories .story .name .image { background-image: url(/images/bookv2.png); width: 19px; height: 15px; position: absolute; top: 4px; left: 0px; } #NEW_USER_TREES .content .stories .story .subtext { font-size: 12px; height: 14px; line-height: 14px; margin-left: 35px; color: #000000; } #NEW_USER_TREES .content .stories .story .remove, #HOMEPAGE .stories .story .edit { display: none; position: absolute; top: 0px; } #NEW_USER_TREES .content .stories .story .remove { right: 0px; } #NEW_USER_TREES .content .stories .story .free { position: absolute; top: 0px; right: 0px; background-color: #C64242; color: #FFFFFF; text-decoration: none; font-size: 10px; padding: 2px; border-radius: 3px; } #NEW_USER_TREES .content .stories .story:hover .remove { display: block; } #NEW_USER_TREES .content .stories .story .person:hover { text-decoration: none; } #NEW_USER_TREES .content .stories .story .person:hover .name { text-decoration: underline; } #NEW_USER_TREES .person_details .person_form .input.holder.first.name, #NEW_USER_TREES .person_details .person_form .input.holder.last.name { width: 181px; } #NEW_USER_TREES .person_details .person_form .input.holder.last.name { margin-right: 0px; } #NEW_USER_TREES .imports .link { margin-bottom: 10px; font-size: 14px; margin-left: 10px; } #NEW_USER_TREES .beforeLogIn { display: none; width: 275px; padding: 10px; background-color: #FCFCFC; border: 1px solid #999999; border-radius: 5px; margin: 15px 0px; } #NEW_USER_TREES .beforeLogIn .log_in { float: none; width: 250px; margin: 0px auto; height: 31px; line-height: 31px; } #NEW_USER_TREES .beforeLogIn .spacer { text-align: center; margin-top: 10px; color: #666666; } #NEW_USER_TREES .beforeLogIn .form { width: 200px; margin: 0px auto; } #NEW_USER_TREES .beforeLogIn .form .input.holder { width: 110px; border-radius: 3px 0px 0px 3px; } #NEW_USER_TREES .beforeLogIn .form .button.red { width: 75px; height: 31px; line-height: 31px; margin-top: 20px; float: left; border-radius: 0px 3px 3px 0px; } #NEW_USER_TREES .or { text-align: center; font-weight: bold; } #NEW_USER_TREES .disclaimer { text-align: center; font-size: 14px; color: #999; width: 440px; margin: 30px auto 0px auto; } #NEW_USER_TREES .GEDCOM { position: static; margin-left: 0px; width: auto; } #NEW_USER_TREES .GEDCOM .logo_seal { display: none; } #NEW_USER_TREES .GEDCOM .notes { display: none; } #NEW_USER_TREES #ancestry_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 45px; padding-bottom: 10px; margin-bottom: 15px; } #NEW_USER_TREES #myheritage_explain { font-size: 14px; display: none; border-bottom: 1px solid #C7C7C7; margin-left: 45px; padding-bottom: 10px; margin-bottom: 15px; } @media screen and (max-width: 640px) { #NEW_USER_TREES .content { width: 405px; } #NEW_USER_TREES .explain { width: 265px; margin: 0px auto 15px auto; font-size: 12px; } #NEW_USER_TREES .screenshot { display: none; } #NEW_USER_TREES .disclaimer { width: 312px; } #NEW_USER_TREES .content .trees { width: auto; } } @media screen and (max-width: 520px) { #NEW_USER_TREES .content { width: 280px; padding: 40px 20px; } #NEW_USER_TREES .column { width: auto; } #NEW_USER_TREES .explain { width: auto; } #NEW_USER_TREES .content .title { font-size: 19px; } #NEW_USER_TREES .complimentary_stories { width: auto; font-size: 12px; } #NEW_USER_TREES .person_details .person_form { width: auto; } #NEW_USER_TREES .person_details .person_form .input.holder.first.name { width: 118px; margin-right: 15px; } #NEW_USER_TREES .person_details .person_form .input.holder.last.name { width: 118px; } #NEW_USER_TREES .person_details .person_form .input.holder.date { width: 90px; } #NEW_USER_TREES .person_details .person_form .input.holder.place { width: 146px; } #NEW_USER_TREES .GEDCOM { padding: 0px; margin: 30px 0px; } #NEW_USER_TREES .GEDCOM .form .button.red { margin-left: 0px; width: 178px; } #NEW_USER_TREES .GEDCOM .form .button.close { width: 80px; } #NEW_USER_TREES .beforeLogIn { width: auto; border-width: 0px 0px 1px 0px; border-radius: 0px; } #NEW_USER_TREES .disclaimer { width: 225px; } #NEW_USER_TREES .beforeLogIn .log_in { width: 230px; } }#PAID { } #PAID .content { background: #FCFCFC; width: 370px; margin: 35px auto 0px auto; padding: 30px; position: relative; } #PAID h1 { text-align: center; margin-bottom: 10px; } #PAID .thanks { text-align: center; } #PAID .links { width: 313px; margin: 30px auto 0px auto; } #PAID .links a { display: block; float: left; margin-right: 40px; position: relative; padding-left: 26px; } #PAID .links a .image { position: absolute; left: 0px; height: 20px; width: 19px; background-repeat: no-repeat; } #PAID .links a.tree .image { background-image: url(/images/treev2.png); top: -2px; } #PAID .links a.story .image { background-image: url(/images/bookv2.png); background-position: 0px 0px; top: 0px; } #PAID .links a:last-child { margin-right: 0px; } @media screen and (max-width: 450px) { #PAID .content { width: 280px; padding: 30px 20px; } #PAID .thanks .confirm { width: 168px; margin: 0px auto 10px auto; } #PAID .links { width: auto; } #PAID .links a { margin-right: 25px; } }#PRIVACY { } #PRIVACY .content { max-width: 600px; padding: 40px; margin: 35px auto 0px auto; background-color: #FCFCFC; border-radius: 5px; position: relative; } #PRIVACY p {margin-bottom:16px;} #PRIVACY li {list-style-type:disc;margin-left: 20px;line-height: 20px;margin-bottom: 16px;} #PRIVACY h1 { margin-bottom: 20px;font-size: 32px;} @media screen and (max-width: 740px) { #PRIVACY .content { margin-left: 10px; margin-right: 10px; } } @media screen and (max-width: 400px) { #PRIVACY .content { margin-left: 0px; margin-right: 0px; padding: 40px 20px; } }#resetpassword { } #resetpassword .content { position: relative; margin: 50px auto 0px auto; padding: 30px; background-color: #FCFCFC; width: 240px; border-radius: 5px; } #resetpassword .form .input.holder { float: none; margin-bottom: 1px; } #resetpassword .form input[type=submit] { float: none; margin-top: 10px; width: 100%; } #resetpassword .error { margin-top: 20px; } #resetpassword .errormsg { width: auto; padding: 10px; text-align: center; margin: 0px auto; } #resetpassword .password_change_success { margin-top: 20px; text-align: center; } #resetpassword .password_change_success a { margin-top: 10px; display: block; }.narr_snippet { font-family: 'Droid Serif', Georgia, Times, Serif; position: relative; padding:5px; font-size: 18px; margin-bottom: 10px; } .narr_snippet .heading { font-size: 20px; margin-bottom: 5px; color: #000000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding-right: 160px; font-weight: bold; } #STORY.print .narr_snippet .heading { padding-right: 0px; } .narr_snippet p { font-size: 18px; font-family: 'Droid Serif', Georgia, Times, Serif; } .narr_snippet .attachments { float: right; margin: 0px 0px 10px 0px; position: relative; max-width: 162px; margin-left: 45px; } .narr_snippet .attachments .attachment { cursor: pointer; background-color: #FFFFFF; padding: 5px; border: 1px solid rgb(171, 147, 119); box-shadow: -3px 3px 5px rgba(81, 81, 81, 0.8); } .narr_snippet .attachments .attachment .image { max-height: 148px; max-width: 148px; margin: 0px auto; display: block; } .narr_snippet .attachments .attachment .caption { font-size: 10px; margin-top: 5px; min-height: 12px; line-height: 12px; } .narr_snippet .attachments.one { margin-left: 10px; } .narr_snippet .attachments.fiveplus { margin-top: 45px; } .narr_snippet .attachments .attachment:nth-child(n+2) { position: absolute; max-width: 39px; max-height: 39px; left:-44px; padding: 2px; } .narr_snippet .attachments .attachment:nth-child(n+2) .image { max-width: 39px; max-height: 34px; } .narr_snippet .attachments .attachment:nth-child(n+2) .caption { display: none; } .narr_snippet .attachments .attachment:nth-child(2) { top: 0px; } .narr_snippet .attachments .attachment:nth-child(3) { top: 44px; } .narr_snippet .attachments .attachment:nth-child(4) { top: 88px; } .narr_snippet .attachments .attachment:nth-child(5) { top: 132px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(n+2) { left: auto; } .narr_snippet .attachments.fiveplus .attachment:nth-child(2) { right: 0px; top: -42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(3) { right: 48px; top: -42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(4) { right: 84px; top: -42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(5) { right: 126px; top: -42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(6) { left: -44px; top: -42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(7) { left: -44px; top: 0px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(8) { left: -44px; top: 42px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(9) { left: -44px; top: 84px; } .narr_snippet .attachments.fiveplus .attachment:nth-child(10) { left: -44px; top: 126px; } .narr_snippet .option.scrollTo { display: none; } .narr_snippet .option.close { display: none; margin-right: 0px; } .narr_snippet .options { position: absolute; top: 6px; right: 5px; opacity: 0.3; font-size: 12px; z-index: 100; } .narr_snippet .options .option { float: left; margin-right: 10px; cursor: pointer; } .narr_snippet .options .option.type { margin-right: 0px; } .narr_snippet .options .option.type,#STORY .bubble .options .option.type { width: 10px; height: 10px; border: 1px solid #1880C9; border-radius: 50px; } .narr_snippet .options .option.type.custom,#STORY .bubble .options .option.type.custom { background-color: #1880C9; } .narr_snippet .event_info { z-index: 800; position: absolute; top: 27px; right: 0px; display: none; padding: 10px;background-color: #FFFDF2; border-radius: 3px;border: 1px solid #C5C5C5;box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); font-size: 12px; width: 400px; } .narr_snippet .event_info .options { position: static; opacity: 1.0; margin-bottom: 10px; } .narr_snippet .event_info .options .option .image { position: absolute; top: 0px; left: 0px; width: 25px; height: 25px; } .narr_snippet .event_info .options .option.edit { position: relative; float: left; margin-right: 20px; font-size: 16px; padding-left: 35px; height: 25px; line-height: 25px; } .narr_snippet .event_info .options .option.edit .image { background-image: url(/images/edit_icon.gif); } .narr_snippet .event_info .options .option.feedback { position: relative; float: left; font-size: 16px; padding-left: 35px; height: 25px; line-height: 25px; } .narr_snippet .event_info .options .option.feedback .image { background-image: url(/images/feedback_icon.png); } .narr_snippet .event_info .options .option.remove { margin-top: 10px; text-align: center; float: none; } .narr_snippet .event_info .options .option.closer { float: right; } .narr_snippet .event_info .title { margin-bottom: 10px; } .narr_snippet .event_info .sources { margin-left: 25px; margin-bottom: 10px; } .narr_snippet .event_info .original { margin-bottom: 10px; } .narr_snippet .event_info .original .text { margin-bottom: 10px; max-width: 400px; display: none; } .narr_snippet .event_info .original .remove { text-align: center; margin-top: 15px; } .narr_snippet .event_info .content_by { text-align: center; } .narr_snippet .event_info .sources .source { display: list-item; list-style: decimal; word-break: break-all; } .narr_snippet.guess_explained { } .narr_snippet.guess_explained ul { margin: 10px 0px 10px 20px; } .narr_snippet.guess_explained ul li { list-style: disc; } .narr_snippet.highlight { padding: 5px; border: none; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); background-color: #FFFFFF; border: 1px solid #E7E7E7; border-radius: 3px; padding: 5px 10px; } .narr_snippet.highlight .options, .narr_snippet:hover .options { opacity: 1.0; } .event_preview .narr_snippet .options { display: none; } .event_preview .narr_snippet .attachments .attachment { cursor: auto; } .PDFHolder { position: relative; z-index: 1002; width: 980px; margin: 0px auto; } .PDFHolder .iframePDF { width: 980px; border: none; padding: 0px; margin: 0px; display: block; } .PDFHolder .close { position: absolute; top: 44px; right: 34px; color: #000000; border: 1px solid #000000; } .PDFHolder .edit { position: absolute; top: 44px; right: 100px; width: 49px; } .PDFHolder .download { position: absolute; top: 153px; right: 34px; width: 86px; } .PDFHolder .view { position: absolute; top: 99px; right: 34px; width: 49px; } #STORY #narrativeShell .bubble .narr_snippet .options { opacity: 1.0; } #STORY #narrativeShell .bubble .narr_snippet .heading { padding-right: 225px; } #STORY #narrativeShell .bubble .narr_snippet .remove { font-size: 12px; text-align: center; margin-top: 10px; } #STORY #narrativeShell #headlines .extended:hover .options { opacity: 1.0; } #STORY { background-color: rgba(120, 104, 84, 0.8); background-image: url(/images/woodtable.jpg); } #STORY.editing .narr_snippet, #STORY.editing .attachment { resize: both; overflow: auto; } #STORY #rootstech_promo { background: #FFF; text-align: center; padding: 10px 0px; border: 3px dashed #FF6600; } #STORY #rootstech_promo .title { font-size: 50px; font-family: 'Oswald', sans-serif; } #STORY #rootstech_promo .url { font-size: 20px; display: block; margin-bottom: 12px; } #STORY #rootstech_promo .code { font-size: 16px; } #STORY .screenshot { position: fixed; top: 0px; right: 0px; padding: 5px; background-color: rgba(255,255,255,0.6); z-index: 1001; } #STORY .print_title { height: 130px; } #STORY .print_title h1 { text-align: center; font-weight: normal; font-size: 60px; } #STORY .print_title .date { z-index: 100; position: relative; text-align: center; margin-bottom: 10px; } #STORY .print_title .date .time { padding: 0px 15px; font-size: 22px; font-family: 'Droid Serif', Georgia, Times, Serif; background-color: #FFFAD7; } #STORY .print_title .date .line { position: absolute; top: 11px; left: 30px; right: 30px; height: 3px; background-color: #000000; z-index: -1; } #STORY .contents { background-color: #FFFAD7; position:relative; width: 980px; margin: 0px auto; min-height: 643px; } #STORY .summary { z-index: 310; background-color: #FFFDF2; position: absolute; top: 20px; width: 600px; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); border-radius: 3px; padding: 25px 10px; border: 1px solid #C5C5C5; } #STORY .summary .close { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; font-size: 20px; color: #D7D7D7; } #STORY .summary .buttons { width: 375px; margin: 15px auto 0px auto; } #STORY .summary .option { position: relative; padding-left: 38px; width: 140px; height: 25px; line-height: 25px; float:left; } #STORY .summary .option:hover { text-decoration: underline; } #STORY .summary .option.disabled { cursor: default; opacity: 0.3; text-decoration: none; color: #000000; } #STORY .summary .option .image { position: absolute; top: 0px; left: 0px; background-repeat: no-repeat; } #STORY .summary .option.getFamily { margin-right: 15px; } #STORY .summary .option.getFamily .image { width: 27px; height: 25px; background-image: url(/images/treev2.png); background-position: 6px 1px; } #STORY .summary .option.getStory .image { width: 31px; height: 25px; background-image: url(/images/bookv2.png); background-position: 7px 5px; } #STORY .summary .option.backToFS { display: block; } #STORY .summary .section { margin-bottom: 10px; } #STORY #TIMELINE, #STORY #mapHolder { min-height: 148px; margin-bottom: 10px; z-index: 250; } #STORY #TIMELINE { position: relative; transform-style: preserve-3d; } #STORY #TIMELINE .line { position: relative; height: 8px; } #STORY #TIMELINE .line .flat_line { height: 8px; background: #000000; } #STORY #TIMELINE .events { overflow: hidden; position: relative; height:120px; margin-left: 69px; } #STORY #TIMELINE .lifeEvents { position: relative; margin-left: 69px; z-index: 200; } #STORY #TIMELINE .lifeEvents .relationships { padding-top: 20px; } #STORY #TIMELINE .lifeEvents .relationships .lifeBlock { position: relative; } #STORY #TIMELINE .lifeEvents .relationships .lifeBlock .name { text-align: center; } #STORY #TIMELINE .lifeEvents .relationships .spouses .lifeBlock { background-color: #b7d393; } #STORY #TIMELINE .lifeEvents .relationships .spouses .lifeBlock:hover { background-color: #A6BD89; } #STORY #TIMELINE .lifeEvents .relationships .children .name { position: absolute; } #STORY #TIMELINE .lifeEvents .relationships .children .name.outsider { color: #E5AD26; } #STORY #TIMELINE .lifeEvents .relationships .children .lifeBlock:nth-child(3n+1) { background-color: #e5ad26; } #STORY #TIMELINE .lifeEvents .relationships .children .lifeBlock:nth-child(3n+2) { background-color: #ecbf54; } #STORY #TIMELINE .lifeEvents .relationships .children .lifeBlock:nth-child(3n+3) { background-color: #eac262; } #STORY #TIMELINE .lifeEvents .relationships .children .lifeBlock:hover { background-color: #D8A426; } #STORY #TIMELINE #hairline { } #STORY #TIMELINE .increments { position: absolute; top: -17px; left: 68px; z-index: 190; height: 0px; } #STORY #TIMELINE .increments .increment { background-color: #000000; width: 1px; float: left; height: 20px; margin-top: 10px; margin-right: 44px; z-index: 185; } #STORY #TIMELINE .increments .increment.animate { -webkit-animation: timeline-increment-appear 1s; } #STORY #TIMELINE .increments .increment.big { height: 30px; margin-top: 0px; position: relative; } #STORY #TIMELINE .increments .increment.big:last-child { margin-right: 0px; } #STORY #TIMELINE .increments .increment.big .year { font-family: 'Droid Serif', Georgia, Times, Serif; z-index: 185; background-color: #FFFAD7; position: absolute; width: 50px; height: 22px; line-height: 22px; text-align: center; font-size: 22px; left: -25px; top: -30px; } #STORY #TIMELINE .period { overflow: hidden; color: rgba(255, 255, 255, 0.6); text-align: center; font-size: 12px; line-height: 20px; height: 20px; position:absolute; top: 0px; background-color: #ae3333; z-index: 100; cursor: pointer; } #STORY #TIMELINE .period.slim { min-width: 4px; overflow: visible; } #STORY #TIMELINE .period.slim .name { text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #STORY #TIMELINE .period.alt { background-color: #c44747; } #STORY #TIMELINE .period:hover { background-color: #740000; } #STORY #TIMELINE .period .name { position: absolute; text-align: center; } #STORY #TIMELINE .lifeBlock.self { height: 20px; background-color: #ae3333; } #STORY #TIMELINE .lifeBlock.self .name { line-height: 20px; } #STORY #TIMELINE .lifeBlock { cursor: pointer; height: 10px; min-width: 4px; position: absolute; z-index: 1; } #STORY #TIMELINE .lifeBlock.animate { -webkit-animation: timeline-lifebar-appear 2s; } #STORY #TIMELINE .lifeBlock .name { line-height: 11px; height: 11px; font-size: 9px; color:#FFFFFF; z-index: 100; text-align: center; } #STORY #TIMELINE .lifeBlock .period { float: left; background-color: #A72E2E; height: 100%; position: relative; } #STORY #TIMELINE .lifeBlock .period:nth-child(odd) { opacity: .7; filter: alpha(opacity=70); } #STORY #TIMELINE .guess { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #STORY #TIMELINE .guess.birth { background: -moz-linear-gradient(left, rgba(255, 250, 215, 1.0) 0%, rgba(255,255,255,0) 15%); /* FF3.6+ */ background: -o-linear-gradient(left, rgba(255, 250, 215, 1.0) 0%,rgba(255,255,255,0) 15%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255, 250, 215, 1.0) 0%,rgba(255,255,255,0) 15%); /* IE10+ */ background: linear-gradient(to right, rgba(255, 250, 215, 1.0) 0%,rgba(255,255,255,0) 15%); /* W3C */} #STORY #TIMELINE .guess.death { background: -moz-linear-gradient(left, rgba(255,255,255,0) 85%, rgba(255, 250, 215, 1.0) 100%); /* FF3.6+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 85%,rgba(255, 250, 215, 1.0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 85%,rgba(255, 250, 215, 1.0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 85%,rgba(255, 250, 215, 1.0) 100%); /* W3C */ } #STORY #TIMELINE .events .lifeBlock.onlyParent { bottom: 2px !important; } #STORY #TIMELINE .events .lifeBlock.mother { bottom: 0px; background-color: #a1bbdb; } #STORY #TIMELINE .events .lifeBlock.father { bottom: 10px; background-color: #abc9ea; } #STORY #TIMELINE .event { position: absolute; display: none; } #STORY #TIMELINE .event.show { display: block; } #STORY #TIMELINE .event:hover { text-decoration: underline; } #STORY #TIMELINE .event .bubble { border: 1px solid #E7E7E7; font-size: 12px; background-color: #FFFFFF; border-radius: 3px; position: absolute; top: -6px; width: 100px; z-index: 899; padding: 5px; } #STORY #TIMELINE .event .bubble .pointer { height: 20px; width: 10px; overflow: hidden; position: absolute; top: 0px; left: -10px; } #STORY #TIMELINE .event .bubble .pointer .point { border: 1px solid #E7E7E7; background-color: #FFFFFF; -webkit-transform: rotateZ(45deg) translate3d(2px, -4px, 0px); -moz-transform: rotateZ(45deg) translate3d(2px, -4px, 0px); transform: rotateZ(45deg) translate3d(2px, -4px, 0px); height: 22px; width: 22px; } #STORY #TIMELINE .event .text { line-height: 14px; display: block; font-size: 12px; margin-left: -2px; background-color: rgba(255, 250, 215, 0.9); cursor: pointer; letter-spacing: 0px; border-left: 3px solid rgba(128, 36, 37, 0.47); padding-left: 3px; margin-left: 0px; } #STORY #TIMELINE .event .downTail { z-index: -1; position: absolute; top: 13px; left: 0px; background-color: #B59F81; width: 1px; } #STORY #TIMELINE .events .downLine { z-index: -1; position: absolute; top: 13px; left: 0px; background-color: #B59F81; width: 1px; } #STORY #TIMELINE .event.highlight { z-index: 200; text-decoration: none; } #STORY #TIMELINE .event.highlight .text { color: #e5ad26; } #STORY #TIMELINE .event.highlight .downTail { background-color: #e5ad26; z-index: -1; } #STORY #TIMELINE .event.life { top: auto; } #STORY #TIMELINE .event.life.level1 { bottom: 0px; } #STORY #TIMELINE .event.life.level1 .downTail { bottom: 16px; height: 36px; } #STORY #TIMELINE .event.life.level2 { bottom: 14px; } #STORY #TIMELINE .event.life.level2 .downTail { bottom: 2px; height: 29px; } #STORY #TIMELINE .event.life .downTail { bottom: 13px; top: auto; } #STORY #TIMELINE #drag { position: absolute; top: 65px; left: 68px; z-index: 200; background-image: url('/images/pointers_05.png'); width: 31px; height: 37px; } #STORY .default-header .options { color: #000000; } #STORY .default-header .options .option { color: #000000; } #STORY .default-header .options .option.last { display: none; } #STORY #mapHolder { position: absolute; right: -50px; top: 0px; width: 373px; border: 1px solid rgba(160, 160, 160, 0.8); box-shadow: -3px 3px 5px rgba(81, 81, 81, 0.8); } #STORY #mapHolder #eventmap2 { height:100%; } #STORY #mapHolder .comingsoon { text-align: center; background-color: #FFFAD7; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; line-height: 198px; font-size: 12px; color: #C4C4C4; } #STORY .snapshots { border-radius: 3px; position: relative; width: 280px; float: right; background-color: #FFFDF2; padding: 5px 10px; margin: 10px 0px 0px 0px; border: 1px solid #C5C5C5; box-shadow: -3px 3px 5px rgba(81, 81, 81, 0.8); } #STORY .snapshots .snapshot { margin-bottom: 5px; height: 18px; line-height: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #STORY .snapshots .place { margin-bottom: 10px; } #STORY .snapshots .place .big { font-size: 20px; } #STORY .snapshots .place .small { font-size: 12px; } #STORY .snapshots .events { padding: 0px 10px; margin-bottom: 10px; } #STORY .snapshots .events .span { margin-bottom: 10px; } #STORY .snapshots .close { position: absolute; top: 0px; right: 0px; height: 25px; line-height: 25px; width: 25px; text-align: center; cursor: pointer; color: #D7D7D7; } #STORY #updates { display: none; font-family: 'Droid Serif', Georgia, Times, Serif; margin: 0px 10px 15px 10px; padding: 10px; padding-right: 35px; border: 1px solid #FFCC00; border-radius: 3px; background-color: #FFFDF2; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); position: relative; } #STORY #updates .update { } #STORY #updates .dismiss { cursor: pointer; position: absolute; top: 10px; right: 5px; height: 20px; line-height: 20px; width: 20px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #999999; } #STORY #narrativeShell { float: right; width: 760px; padding-right: 55px; position: relative; } #STORY #narrativeShell .customize { position: absolute; top: 95px; right: 0px; } #STORY #narrativeShell .customize .text { height: 30px; line-height: 30px; text-align: center; width: 30px; border-radius: 3px; margin-bottom: 10px; opacity: .2; filter: alpha(opacity=20); text-align: center; } #STORY #narrative { position: relative; padding: 0px 10px; font-family: 'Droid Serif', Georgia, Times, Serif; } #STORY #narrative .period_location { text-align: center; font-weight: bold; border-bottom: 1px solid red; } #STORY #narrativeShell .snapshots { font-family: 'Droid Serif', Georgia, Times, Serif; } #STORY #narrative .ARK { display: block; text-align: center; font-size: 12px; margin: 10px 0px; } #STORY #narrative .excludedButton { text-align: center; height: 30px; line-height: 30px; color: #999999; cursor: pointer; } #STORY #narrative .excluded { display: none; } #STORY #narrative .excluded .button.red { float: none; width: 200px; margin: 10px auto 0px auto; } #STORY #narrative .disclaimer { text-align: center; font-size: 12px; color: #999999; margin-bottom: 10px; } #STORY #narrativeShell .bubble { z-index: 800; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); font-family: 'Droid Serif', Georgia, Times, Serif; position: absolute; top: 0px; left: 14px; width: 712px; margin-bottom: 20px; border: 1px solid #C5C5C5; background-color: #FFFDF2; border-radius: 3px; padding: 5px 10px; font-size: 18px; animation:.Story-appear .15s; -webkit-animation:.Story-appear .15s; -moz-animation:.Story-appear .15s; } #STORY #narrativeShell .bubble .narr_snippet { margin-bottom: 0px; } #STORY #narrative .excluded .narr_snippet { outline: 1px solid #D9DDA1; } #STORY #ask_for_wizard { border-bottom: 1px solid #C9C9C9; padding-bottom: 10px; margin: 10px 0px; } #STORY #ask_for_wizard .buttons { width: 290px; margin: 10px auto; } #STORY #ask_for_wizard .buttons .button { height: 30px; line-height: 30px; } #STORY #ask_for_wizard .buttons .button.red { margin-right: 10px; } #STORY #narrativeShell .snapshots .narr_snippet .heading { opacity: 0.0; } #STORY #narrativeShell .bubble .options { opacity: 1.0; } #STORY #narrativeShell .bubble .narr_snippet:hover { outline: none; } #STORY #narrativeShell .bubble .narr_snippet .option.type { margin-right:10px; } #STORY #narrativeShell .bubble .narr_snippet .option.close { display: block; } #STORY #narrativeShell .bubble .narr_snippet .option.scrollTo { display: block; } #enlargedImage { position: absolute; top: 40px; z-index: 1500; width: 650px; left: 50%; margin-left: -325px; } #enlargedImage .direction { display: none; position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; cursor: pointer; background-repeat: no-repeat; background-image: url(/images/photo_arrows.png); height: 64px; width: 38px; } #enlargedImage .direction.left { left: -60px; background-position: -41px 0px; } #enlargedImage .direction.right { right: -60px; } #enlargedImage .close { cursor: pointer; position: absolute; top: 0px; right: -47px; height: 28px; line-height: 28px; width: 25px; text-align: center; font-size: 28px; color: #D7D7D7; } #enlargedImage .photo { box-shadow: -3px 3px 5px #433C33; position: relative; background-color: #FFFFFF; padding: 5px; max-width: 640px; margin: 0px auto; } #enlargedImage .photo img { display: block; margin: 0px auto; max-width: 630px; } #enlargedImage .photo .caption { font-size: 14px; padding: 10px; } #enlargedImage .photo .attribute { font-size: 14px; padding: 10px; color: #999999; text-align: center; } #STORY .play_movie { position: absolute; top: -14px; left: 53px; cursor: pointer; z-index: 500; width: 134px; height: 20px; line-height: 20px; } #STORY .theEnd { display: none; padding: 40px 40px 0px 40px; text-align: center; font-size: 20px; } #STORY .createPDF { font-size: 14px; position: relative; padding-left: 30px; margin-left: 30px; margin-bottom: 15px; line-height: 25px; } #STORY .createPDF .image { background-image: url(/images/print.gif); position: absolute; top: 0px; left: 0px; height: 25px; width: 25px; } #STORY .createPDF.subscribe { line-height: normal; text-align: center; background-color: #EDE2B2; color: black;padding: 10px;border-radius: 3px; } #STORY #timeMapSwitch { display: none; margin: 0px auto; width: 201px; margin-bottom: 20px; font-size: 12px; border: 1px solid #B3A387; } #STORY #timeMapSwitch .toggle { cursor: pointer; float: left; background-color: transparent; width: 100px; text-align: center; } #STORY #timeMapSwitch .toggle:first-child { border-right: 1px solid #B3A387; } #STORY #timeMapSwitch .toggle.selected { background-color: #FFFFFF; } #STORY .edit_panel { box-shadow: 2px 2px 5px rgba(126, 126, 126, 0.8); width: 129px; height: auto; background-color: #FFFAD7; margin-left: 8px; margin-bottom: 20px; z-index: 300; border-radius: 3px; } #STORY .edit_panel .tool { display: block; float: left; width: 64px; height: 56px; background-color: #000000; position: relative; } #STORY .edit_panel #story_wizard_button { cursor: pointer; float: none; color: #FFFFFF; width: auto; margin-bottom: 1px; text-align: center; line-height: 25px; height: auto; font-size: 10px; } #STORY .edit_panel #story_wizard_button:hover { text-decoration: underline; } #STORY .edit_panel .tool.disabled { opacity: 0.6; } #STORY .edit_panel .tool .inner { height: 46px; padding-top: 10px; cursor: pointer; } #STORY .edit_panel .tool .img { margin: 0px auto 10px auto; height: 20px; width: 20px; } #STORY .edit_panel .tool .text { text-align: center; font-size: 8px; color: #FFFFFF; } #STORY .edit_panel .tool:hover .text { text-decoration: underline; } #STORY .edit_panel .tool .subscribe { font-size: 8px; display: none; background-color: green; position: absolute; top: 38px; left: 0px; right: 0px; color: #FFFFFF; font-size: 10px; text-align: center; } #STORY .edit_panel .tool:hover .subscribe { display: block; } #STORY .edit_panel .tool .options { box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); display: none; position: absolute; padding: 10px; border-radius: 3px; z-index: 400; } #STORY .edit_panel .tool .options .triangle { position: absolute; top: 50%; left: -15px; margin-top: -14px; width: 15px; height: 28px; } #STORY .edit_panel .tool .options .triangle .point { -webkit-transform: rotate(45deg); height: 20px; width: 20px; position: absolute; top: 3px; left: 4px; } #STORY .edit_panel .tool .options .triangle .point, #STORY .edit_panel .options { background-color: #FFFDF2; border: 1px solid #C4B7B7; } #STORY .edit_panel #FAMILYTOOL.tool { margin: 0px 1px 1px 0px; } #STORY .edit_panel #FAMILYTOOL.tool .img { background-image: url(/images/white_tree.png); } #STORY .edit_panel #FAMILYTOOL.tool:hover .img { background-image: url(/images/gold_tree.png); } #STORY .edit_panel #EVENTTOOL.tool { margin-bottom: 1px; } #STORY .edit_panel #EVENTTOOL.tool .img { background-image: url(/images/white_pencil.png); } #STORY .edit_panel #EVENTTOOL.tool:hover .img { background-image: url(/images/gold_pencil.png); } #STORY .edit_panel #EVENTTOOL.tool .options { top: -33px; left: 79px; width: 195px; } #STORY .edit_panel #EVENTTOOL.tool .options .option { display: block; height: 20px; line-height: 20px; font-size: 14px; } #STORY .edit_panel #PDFTOOL.tool { border-radius: 0px 0px 0px 3px; } #STORY .edit_panel #PDFTOOL.tool .img { background-image: url(/images/white_printer.png); } #STORY .edit_panel #PDFTOOL.tool:hover .img { background-image: url(/images/gold_printer.png); } #STORY .edit_panel #SHARINGTOOL.tool { margin-left: 1px; border-bottom-right-radius: 3px; } #STORY .edit_panel #SHARINGTOOL.tool h3 { text-align: center; } #STORY .edit_panel #SHARINGTOOL.tool .img { background-image: url(/images/white_share.png); } #STORY .edit_panel #SHARINGTOOL.tool:hover .img { background-image: url(/images/gold_share.png); } #STORY .edit_panel #SHARINGTOOL.tool .options .triangle { top: 50px; margin-top: 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options { top: -38px; left: 81px; width: 298px; } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts { } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact { position: relative; margin-left: 15px; margin-right: 11px; } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact .email { padding-right: 56px; height: 25px; line-height: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact .button, #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact .sent { position: absolute; top: 0px; right: 0px; height: 25px; width: 45px; line-height: 25px; border-radius: 0px 3px 3px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact .button { } #STORY .edit_panel #SHARINGTOOL.tool .options .contacts .contact .sent { padding: 0px 5px; font-size: 14px; } #STORY .edit_panel #SHARINGTOOL.tool .options .link { height: 22px; line-height: 22px; padding-left: 25px; position: relative; font-size: 14px; } #STORY .edit_panel #SHARINGTOOL.tool .options .link .sprite { background-image: url(/images/panel_sprite.png); position: absolute; top: 3px; left: 0px; width: 16px; height: 16px; } #STORY .edit_panel #SHARINGTOOL.tool .options .link .sprite.two { background-position: -16px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .link .sprite.three { background-position: -32px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .solution { display: none; } #STORY .edit_panel #SHARINGTOOL.tool .options .form { margin: 10px 0px; background-color: #FFFDF2; } #STORY .edit_panel #SHARINGTOOL.tool .options .form .input.holder { border-radius: 3px 0px 0px 3px; width: 195px; } #STORY .edit_panel #SHARINGTOOL.tool .options .form .button.red { width: 55px; margin-top: 20px; height: 30px; line-height: 30px; border-radius: 0px 3px 3px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media { width: 206px; margin: 15px 20px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media .sprite { background-image: url(/images/sharing_sprite.png); background-repeat: no-repeat; height: 40px; width: 40px; float: left; display: block; margin-right: 15px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media .sprite.facebook { background-position: 0px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media .sprite.google { background-position: -240px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media .sprite.pinterest { background-position: -40px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .social_media .sprite.twitter { background-position: -200px 0px; margin-right: 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options textarea { text-align: center; margin: 10px 0px; white-space: pre; display: block; width: 253px; padding: 5px; resize: none;background-color: #E7E7E7; border: 1px solid #DBDBDB; border-radius: 3px; font-size: 12px;margin: 10px 0px; } #STORY .edit_panel #SHARINGTOOL.tool .options .option { margin-bottom: 5px; margin-left: 23px; } #STORY .edit_panel #SHARINGTOOL.tool .options .option .hint { margin: 10px 0px; text-align: center; color: #939393; font-size: 12px; } #STORY .edit_panel .demo_gift { background-color: #000;color: #FFF;border-top: 1px solid #FFF;height: 25px;line-height: 25px;text-align: center;cursor: pointer;} #STORY .edit_panel .demo_gift:hover { text-decoration: underline; } #STORY #scrollTop { display: none; cursor: pointer; position: fixed; bottom: 0px; right: 28px; background-color: #FFFFFF; padding: 5px; width: 60px; text-align: center; border: 1px solid #0098D3; border-radius: 3px 3px 0px 0px; border-width: 1px 1px 0px 1px; color: #0098D3; } #STORY #headlines { display: none; font-family: 'Droid Serif', Georgia, Times, Serif; padding: 0px 10px; font-size: 18px; margin-left: 25px; } #STORY #headlines .headline { padding: 5px; margin-bottom: 10px; list-style: decimal; } #STORY #headlines .headline .title { cursor: pointer; } #STORY #headlines .headline .extended { cursor: auto; position: relative; padding-top: 20px; } #STORY .sources { font-size: 10px; } #STORY #what_next { margin: 30px 0px; } #STORY #what_next .reason { text-align: center; font-size: 32px; font-family: 'Oswald', sans-serif; } #STORY #what_next .buttons { margin: 20px auto; } #STORY #what_next .buttons.not_logged_in { width: 425px; } #STORY #what_next .buttons.not_paid { width: 180px; } #STORY #what_next .buttons.editable { width: 380px; } #STORY #what_next .buttons .button { width: 170px; } #STORY #what_next .buttons.editable .button:first-child { margin-right: 20px; } #STORY #what_next .buttons .or { float: left; margin: 0px 20px; height: 45px; line-height: 45px; } #STORY .portraits { text-align: center; margin: 10px 0px; } #STORY.responsive { } #STORY.responsive #relative_holder_1 { position: relative; } #STORY .default-header .options { color: #FFFFFF; } #STORY .default-header .options .option { color: #FFFFFF; } #STORY #focusSwitch { display: none; position: relative; margin: 0px auto; width: 200px; margin-bottom: 20px; font-size: 12px; border: 1px solid #B3A387; } #STORY #focusSwitch .divide { width: 1px; height: 100%; position: absolute; top: 0px; left: 100px; background: #B3A387; } #STORY #focusSwitch .toggle { cursor: pointer; float: left; background-color: transparent; width: 100px; height: 65px; text-align: center; position: relative; } #STORY #focusSwitch .toggle .text { text-align: center; } #STORY #focusSwitch .toggle.selected { display: none; outline: 3px solid #FFCC00; background-color: #FFFFFF; opacity: 0.6; } #STORY #focusSwitch .toggle.time_line { height: 28px; padding-top: 17px; } #STORY #focusSwitch .time_line .parents { background-color: #ABC9EA; height: 5px; margin: 0px 15px 0px 12px; } #STORY #focusSwitch .time_line .line { position: relative; background-color: #000000; height: 2px; } #STORY #focusSwitch .time_line .line .segments { height: 5px; position: absolute; top: -2px; left: 5px; } #STORY #focusSwitch .time_line .line .segment { float: left; width: 13px; } #STORY #focusSwitch .time_line .line .segment .notch { height: 5px; width: 1px; background: #000000; } #STORY #focusSwitch .time_line .line .segment:last-child { width: 1px; } #STORY #focusSwitch .time_line .self { background-color: #AE3333; height: 5px; margin: 0px 15px 0px 29px; } #STORY #focusSwitch .time_line .spouses { background-color: #B7D393; height: 5px; margin: 0px 15px 0px 33px; } #STORY #focusSwitch .time_line .children { background-color: #E5AD26; height: 5px; margin: 0px 15px 0px 52px; } #STORY #focusSwitch .toggle.time_line .text { margin-top: 9px; } #STORY #story_heading { } #STORY #story_heading h1 { text-align: center; font-weight: normal; font-size: 60px; } #STORY #story_heading .date { z-index: 100; position: relative; text-align: center; margin-bottom: 10px; } #STORY #story_heading .date .time { padding: 0px 15px; font-size: 22px; font-family: 'Droid Serif', Georgia, Times, Serif; background-color: #FFFAD7; } #STORY #story_heading .date .line { position: absolute; top: 11px; left: 30px; right: 30px; height: 3px; background-color: #000000; z-index: -1; } #STORY.responsive #TIMELINE .line { width: 671px; } #STORY.responsive #narrativeShell .snapshots { display: none; box-shadow: none; border: none; padding: 0px; background-color: transparent; float: none; width: auto; border-radius: 0px; } #STORY.responsive #narrativeShell .snapshots .close { display: none; } #wizard .events { } #wizard .events .event { position: relative; padding: 0px 100px 0px 65px; height: 30px; line-height: 30px; border-bottom: 1px solid #E7E7E7; } #wizard .events .event:hover { outline: 1px solid #FFCC00; } #wizard .events .location { font-size: 12px; font-style: italic; height: 20px; line-height: 20px; margin: 20px 0px 0px 63px; } #wizard .events .event .circle { position: absolute; top: 9px; left: 0px; width: 10px; height: 10px; border: 1px solid #1880C9; border-radius: 50px; } #wizard .events .event .circle.full { background: #1880C9; } #wizard .events .event .date { position: absolute; top: 0px; left: 20px; width: 41px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 12px; } #wizard .events .event .name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #wizard .events .event .edit { position: absolute; top: 0px; right: 50px; width: 50px; font-size: 12px; text-align: center; } #wizard .events .event .include { position: absolute; top: 0px; right: 50px; width: 100px; font-size: 12px; text-align: center; } #wizard .events .event .remove { position: absolute; top: 0px; right: 0px; width: 50px; font-size: 12px; text-align: center; } #wizard .events .event .remove .confirm { display: none; height: 20px; line-height: 20px; font-size: 10px; margin-top: 5px; padding: 0px 2px; } #wizard .events .event .remove.confirm .text { display: none; } #wizard .events .event .remove.confirm .confirm { display: block; } #wizard .events .event .restore { position: absolute; top: 0px; right: 0px; width: 50px; font-size: 12px; text-align: center; } #wizard .events .event .ignore { position: absolute; top: 0px; right: 0px; width: 50px; font-size: 12px; text-align: center; } #wizard .events.removed { padding-top: 20px; border-top: 1px solid #9E9E9E; } #wizard .events.removed .event { padding-right: 50px; } #wizard .events .button.red.add { } #wizard .events#fragments .event { padding-right: 150px; } #wizard .events#fragments .event.ignored { padding-right: 100px; } #wizard .events .event.ignored .ignore { display: none; } #wizard .events .event.ignored .include { right: 0px; } #EVENTTOOL .notify_count { top: -4px; right: -2px; } #EVENTTOOL .new_feature { position: absolute; top: 0px; left: 0px; color: #FFFFFF; font-size: 10px; padding: 0px 2px; background: #00CC00; } #wizard { z-index: 1100; display: none; position: relative; width: 800px; margin: 40px auto; background-color: #FCFCFC; } #wizard .logo_seal { z-index: 100; } #wizard .heading { background: #FFFFFF; position: relative; text-align: center; padding: 30px 10px 20px 10px; } #wizard .close { position: absolute; top: 15px; right: 15px; color: #C7C7C7; height: 20px; line-height: 20px; width: 20px; text-align: center; font-size: 20px; cursor: pointer; } #wizard .subtext { text-align: center; color: #999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; } #wizard .heading .subtext { margin-top: 15px; } #wizard.freeze { position: fixed; z-index: 200; left: 50%; margin-left: -400px; } #wizard .tabs { background: #FFFFFF; padding: 0px 15px; } #wizard .divider { height: 1px; margin-top: -1px; background-color: #9E9E9E; } #wizard .tabs .tab { margin-left: -1px; cursor: pointer; background: #FFFFFF; float: left; text-align: center; width: 254px; height:33px; padding-top: 14px; position: relative; border: 1px solid #9E9E9E; } #wizard .tabs .tab:first-child { margin-left: 0px; border-radius: 3px 0px 0px 0px; } #wizard .tabs .tab:last-child { border-radius: 0px 3px 0px 0px; } #wizard .tabs .tab .text { width: 75px; margin: 0px auto; height: 18px; } #wizard .tabs .tab:hover .text { border-bottom: 2px solid #FFCC00; } #wizard .tabs .tab .count { font-size: 12px; display: none; background: #FF0000; color: #FFFFFF; position: absolute; top: -6px; right: 6px; border-radius: 15px; padding: 2px 5px; } #wizard .tabs .tab.selected { border-bottom-color: #FCFCFC; background-color: #FCFCFC; } #wizard .tabs .tab.selected .text { border-bottom: 2px solid #FFCC00; } #wizard .panel { padding: 20px 40px; min-height: 300px; display: none; } #wizard .panel.family { padding: 1px 0px; } #wizard .panel.family #family_mobile .person { border: 1px solid #C5C5C5; } #wizard .panel.family #family_mobile .person.unknown { border: 1px dashed #000; } #wizard .panel.family .subtext { max-width: 440px; margin: 10px auto; padding: 0px 5px; } #wizard .panel.selected { display: block; } #wizard .panel table td { padding: 0px 5px; } #wizard #family { background: none; } #wizard #family #family_mobile { display: block; } #wizard #fragments { position: relative; margin-bottom: 10px; } #wizard #fragments .sub { color: #999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 15px; } #wizard #fragments .close { cursor: pointer; position: absolute; top: 20px; right: 20px; color: #C4C4C4; font-size: 18px; text-align: center; width: 30px; line-height: 30px; } #wizard #fragments .ignored_events { margin-top: 10px; display: none; } #wizard #fragments .ignored_events h3 { margin-bottom: 3px; } #wizard .periods { margin: 10px 0px; } #wizard .periods .period { position: relative; margin-bottom: 5px; line-height: 20px; } #wizard .periods .period .caption { padding-left: 80px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 20px; } #wizard .periods .period .place { padding-left: 80px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 20px; } #wizard .periods .period .date { position: absolute; top: 20px; left: 0px; width: 80px; font-size: 12px; height: 20px; } #wizard .section_divide { margin: 20px 0px; height: 1px; background-color: #CCCCCC; } #wizard .occupations { max-width: 300px; } #wizard .occupations .occupation { position: relative; margin-bottom: 5px; line-height: 20px; } #wizard .occupations .occupation .name { padding-left: 80px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 20px; } #wizard .occupations .occupation .date { position: absolute; top: 0px; left: 0px; width: 80px; font-size: 12px; height: 20px; } #wizard .occupations .occupation .remove { position: absolute; top: 0px; right: 0px; height: 20px; background-color: #FCFCFC; padding-left: 5px; padding-right: 5px; color: #C7C7C7; cursor: pointer; } #wizard .occupations .matches { overflow:hidden; border-radius: 5px; border: 1px solid #C7C7C7; margin-top: 5px; display: none; } #wizard .occupations .matches .match { line-height: 30px; height: 30px; border-bottom: 1px solid #C7C7C7; cursor: pointer; padding-left: 10px; padding-right: 10px; background-color: #E7E7E7; } #wizard .occupations .matches .match:last-child { border-bottom: none; } #wizard .occupations .matches .match:hover { background-color: #C7C7C7; } #wizard .occupations .form .button.red { width: 140px; margin: 10px auto 0px auto; float: none; display: block; } #wizard .occupations .form .input.holder { float: none; } #wizard .religions { max-width: 300px; } #wizard .religions .religion { position: relative; margin-bottom: 5px; line-height: 20px; } #wizard .religions .religion .name { padding-left: 80px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 20px; } #wizard .religions .religion .date { position: absolute; top: 0px; left: 0px; width: 80px; font-size: 12px; height: 20px; } #wizard .religions .religion .remove { position: absolute; top: 0px; right: 0px; height: 20px; background-color: #FCFCFC; padding-left: 5px; padding-right: 5px; color: #C7C7C7; cursor: pointer; } #wizard .religions .matches { overflow:hidden; border-radius: 5px; border: 1px solid #C7C7C7; margin-top: 5px; display: none; } #wizard .religions .matches .match { line-height: 30px; height: 30px; border-bottom: 1px solid #C7C7C7; cursor: pointer; padding-left: 10px; padding-right: 10px; background-color: #E7E7E7; } #wizard .religions .matches .match:last-child { border-bottom: none; } #wizard .religions .matches .match:hover { background-color: #C7C7C7; } #wizard .religions .form .button.red { width: 140px; margin: 10px auto 0px auto; float: none; display: block; } #wizard .religions .form .input.holder { float: none; } #wizard .load_cover { display: none; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #2B2825; filter: alpha(opacity=35); background-color: rgba(43, 40, 37, 0.35); z-index: 900; } #wizard .loading { display: none; position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; z-index: 901; } #wizard #wizard_person_edit { font-size: 12px; margin-left: 10px; } #wizard .quick_links { line-height: 25px; margin: 0px auto 20px auto; width: 300px; text-align: center; } #wizard .quick_links .title { font-family: 'Oswald', sans-serif; text-decoration: underline; font-size: 14px; } #wizard .quick_links.bottom { margin-top: 20px; } #wizard .quick_links .link { float: left; padding: 0px 9px; } #wizard .lifespan { margin-bottom: 10px; max-width: 500px; } #wizard .lifespan .row { position: relative; padding: 0px 50px 0px 140px; height: 25px; line-height: 25px; } #wizard .lifespan .type { position: absolute; top: 0px; left: 0px; width: 50px; color: #8A8A8A; font-size: 12px; } #wizard .lifespan .date { position: absolute; top: 0px; left: 60px; width: 66px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #wizard .lifespan .place { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #wizard .lifespan .edit { position: absolute; top: 0px; right: 0px; font-size: 12px; width: 40px; text-align: center; } #wizard .panel.personal .buttons .link { width: 150px; float: left; text-align: center; } #wizard .to_dos { width: 312px; margin: 0px auto; } #wizard .to_dos .to_do { position: relative; } #wizard .to_dos .to_do .link { display: block; padding-right: 35px; } #wizard .to_dos .to_do .remove { position: absolute; top: 0px; right: 5px; width: 30px; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #AAAAAA; cursor: pointer; } #wizard #addPortrait { } #wizard #addPortrait.limit_reached { pointer-events: none; opacity: 0.6; cursor: auto; } #wizard #addPortrait .hiddenInput { position: absolute; opacity: 0.0; } #wizard #addPortrait .noSupport { display: none; } #wizard .portraits { } #wizard .portraits.fancy #addPortrait { border: 1px dashed #939393; overflow: hidden; cursor: pointer; } #wizard .portraits.fancy #addPortrait .hiddenInput { top: 0px; left: -209px; width: 357px; height: 148px; z-index: 10000; cursor: pointer; } #wizard .portraits.fancy #addPortrait .image { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; line-height: 34px; margin-top: -17px; margin-left: -17px; z-index: 1; font-size: 40px; color: #939393; text-align: center; } #wizard .portraits.fancy #addPortrait .text { position: absolute; top: 50%; margin-top: 24px; text-align: center; width: 100%; z-index: 1; color: #939393; font-size: 12px; } #wizard .portraits.notFancy { border: none; width: 100%; height: 40px; } #wizard .portraits.notFancy .text { margin-top: 0px; top: 0px; } #wizard .portraits.notFancy input { width: 100%; position: absolute; bottom: 0px; } #wizard .portraits.disabled #addPortrait .noSupport { display: block; } #wizard .portraits .portrait { float: left; margin: 0px 5px 5px 0px; position: relative; width: 148px; height: 148px; } #wizard .portraits .portrait .image { cursor: -webkit-grab; width: 150px; height: 150px; background-position: center center; background-repeat: no-repeat;} #wizard .portraits .portrait .sprite { background-image: url(/images/photo_sprite.png); height: 20px; width: 20px; } #wizard .portraits .portrait .delete, #wizard .portraits .portrait .rotate { cursor: pointer; position: absolute; top: 0px; color: #FFFFFF; height: 20px; line-height: 20px; width: 20px; font-size: 14px; text-align: center; background-color: rgba(0, 0, 0, 0.4); } #wizard .portraits .portrait .delete { right: 0px; } #wizard .portraits .portrait .delete .sprite { background-position: 0px 0px; } #wizard .portraits .portrait .rotate { left: 0px; } #wizard .portraits .portrait .rotate .sprite { background-position: -20px 0px; } #wizard .portraits .portrait .spinner { background-image: url('/images/loading.gif'); width: 80px; height: 80px; position: absolute; top: 10px; left: 50%; margin-left: -40px; } #wizard .portraits .portrait .progress { height: 15px; position: absolute; bottom: 10px; left: 10px; right: 10px; border: 1px solid #000000; overflow: hidden; border-radius: 5px; } #wizard .portraits .portrait .progress .percent { height: 100%; width: 0px; background-color: #1880C9; } #STORY .lifestyle { float: left; width: 160px; position: relative; margin: 0px 20px 0px -20px; } #STORY .lifestyle .triangle { overflow: hidden; } #STORY .lifestyle .triangle .side { position: absolute; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); transform: rotateZ(-45deg);} #STORY .lifestyle h1 { text-align: center; font-size: 32px; } #STORY .lifestyle ul { background-color: #d0c3b2; box-shadow: 3px 3px 5px rgba(81, 81, 81, 0.8); padding: 10px 0px; } #STORY .lifestyle ul li { cursor: pointer; text-align: right; text-transform: uppercase; font-size: 13px; position: relative; padding-right: 15px; height: 27px; line-height: 27px; } #STORY .lifestyle ul li.animate { -webkit-animation: lifestyles-appear 2s; background-color: #d0c3b2; } #STORY .lifestyle ul li .title { color: #796a59; overflow: hidden; font-size: 14px; line-height: 27px; height: 100%; } #STORY .lifestyle ul li .tail { display: none; position: absolute; top: 0px; left: -10px; width: 10px; height: 100%; background-color: #ae3333; } #STORY .lifestyle ul li .triangle { display: none; position: absolute; } #STORY .lifestyle ul li .triangle.down { bottom: -10px; left: 0px; height: 10px; width: 10px; } #STORY .lifestyle ul li .triangle.down .side { background-color: #963737; height: 20px; width: 20px; top: -14px; left: 0px; } #STORY .lifestyle ul li .triangle.point { top: 0px; right: -15px; height: 27px; width: 15px; } #STORY .lifestyle ul li .triangle.point .side { background-color: #ae3333; height: 20px; width: 20px; top: 4px; left: -10px; } #STORY .lifestyle ul li.highlight { color: #FFFFFF; background-color: #ae3333; color: #FFFFFF; width: 155px; margin-left: -10px; } #STORY .lifestyle ul li.highlight .title { color: #FFFFFF; } #STORY .lifestyle ul li.highlight .triangle { display: block; } #STORY .lifestyle ul li.highlight .tail { display: block; } #STORY .lifestyle .triangle.bigDown { position: relative; height: 20px; width: 20px; } #STORY .lifestyle .triangle.bigDown .side { background-color: #A79D92; height: 30px; width: 30px; top: -15px; left: 6px; } .event_preview { position: relative; width: 740px; margin: 40px auto; background: #FFFAD7; padding: 20px; z-index: 1001; } .event_preview .buttons { width: 312px; margin: 0px auto; } .event_preview .buttons div { height: 30px; line-height: 30px; text-align: center; } .event_preview .buttons .edit, .event_preview .buttons .remove { width: 146px; } .event_preview .buttons .edit { margin-right: 10px; } .event_preview .buttons .remove { float: left; } .event_preview .buttons .restore { float: none; } .event_preview .buttons .remove .confirm { display: none; } .event_preview .buttons .remove.confirm .text { display: none; } .event_preview .buttons .remove.confirm .confirm { display: block; } @media screen and (max-width: 1100px) { #STORY.responsive .contents { width: 1024px; } #STORY.responsive .lifestyle { margin-left: 0px; } #STORY.responsive .lifestyle .triangle.bigDown { display: none; } #STORY.responsive .edit_panel { left: 0px; } #STORY.responsive #mapHolder { right: 0px; } #STORY.responsive #narrativeShell .customize { display: none; } #STORY.responsive #narrativeShell { padding-right: 20px; width: 822px; } } @media screen and (max-width: 1023px) { .PDFHolder { width: 100%; } .PDFHolder .iframePDF { width: 100%; } .PDFHolder .edit { display: none; } #STORY.responsive #narrativeShell .snapshots { display: block; } #STORY.responsive .contents { width: auto; } #STORY.responsive #TIMELINE { left: 0px; } #STORY.responsive #TIMELINE .increments .increment { margin-right: 38px; } #STORY.responsive #TIMELINE .line .flat_line { display: block; } #STORY.responsive .lifestyle { width: 64px; position: absolute; top: 0px; left: 0px; float: none; z-index: 400; } #STORY.responsive .lifestyle #dimensions { display: none; } #STORY.responsive .edit_panel { width: 64px; top: 0px; margin-left: 0px; } #STORY .edit_panel .demo_gift { display: none; } #STORY.responsive .edit_panel #SHARINGTOOL.tool { margin-left: 0px; margin-top: 1px; } #STORY.responsive #narrativeShell { float: none; width: auto; margin-left: 75px; } #STORY.responsive .lifestyle .triangle.bigDown { display: none; } #STORY .summary .buttons { width: auto; } } @media screen and (max-width: 970px) { #STORY #TIMELINE .increments { left: 40px; } #STORY.responsive #TIMELINE .increments .increment { margin-right: 36px; } #STORY #TIMELINE .events { margin-left: 42px; } #STORY #TIMELINE .lifeEvents { margin-left: 42px; } } @media screen and (max-width: 900px) { #STORY.responsive #mapHolder { width: 325px; } } @media screen and (max-width: 850px){ #STORY.responsive #TIMELINE .increments { left: 30px; } #STORY.responsive #TIMELINE .increments .increment { margin-right: 30px; } #STORY.responsive #TIMELINE .events { margin-left: 31px; } #STORY.responsive #TIMELINE .lifeEvents { margin-left: 31px; } #wizard { width: 680px; } #wizard.freeze { margin-left: -340px; } #wizard .tabs .tab { width: 214px; } } @media screen and (max-width: 767px) { #STORY.responsive .contents { padding-bottom: 20px; } #STORY.responsive .edit_panel #EVENTTOOL.tool .options { width: 237px; top: 63px; left: -65px; } #STORY.responsive .edit_panel #SHARINGTOOL.tool .options { top: 63px; left: -225px; } #STORY.responsive .edit_panel #SHARINGTOOL.tool .options .triangle { display: none; } #STORY.responsive .edit_panel .tool .options .triangle { display: none; } #STORY #story_heading { margin: 0px 20px; } #STORY.responsive .contents { margin-top: 30px; padding-top: 60px; } #STORY #focusSwitch { } #STORY.responsive #TIMELINE { left: 0px; } #STORY.responsive .lifestyle { position: static; padding-top: 0px; margin: 0px auto; width: 258px; } #STORY.responsive .edit_panel { width: 259px; position: absolute; left: 50%; margin-left: -130px; top: -28px; } #STORY.responsive .edit_panel #FAMILYTOOL.tool { margin: 0px 1px 0px 0px; border-radius: 3px 0px 0px 3px; } #STORY.responsive .edit_panel #EVENTTOOL.tool { margin: 0px 1px 0px 0px; } #STORY.responsive .edit_panel #PDFTOOL.tool { margin: 0px 1px 0px 0px; border-radius: 0px; } #STORY.responsive .edit_panel #SHARINGTOOL.tool { margin: 0px; border-radius: 0px 3px 3px 0px; } #STORY.responsive #narrativeShell { padding: 0px 10px; margin-left: 0px; } #STORY.responsive #narrative { padding: 0px; } #STORY.responsive #headlines { padding: 0px; } #STORY.responsive #headlines .headline .title { font-size: 14px; } #enlargedImage .direction.left { top: auto; bottom: -76px; left: 0px; } #enlargedImage .direction.right { top: auto; bottom: -76px; right: 0px; } #enlargedImage .close { top: auto; bottom: -51px; left: 50%; margin-left: -12px; } #STORY.responsive #focusSwitch { display: block; } #STORY.responsive .hide { display: none; } #STORY.responsive #mapHolder { width: auto; position: static; height: 275px; margin: 0px 80px 20px 80px; } #STORY.responsive #mapHolder.hide { position: absolute; display: block; right: auto; left: -1000px; height: 275px; width: 500px; } #STORY.responsive #TIMELINE.hide { position: absolute; display: block; right: auto; left: -2000px; } #STORY.responsive #relative_holder_1 { position: static; } #STORY.responsive #headlines { display: block; } #STORY.responsive #headlines.hide { display: none; } #STORY.responsive #TIMELINE { width: 500px; margin: 0px auto; } /* #STORY.responsive #TIMELINE .events { height: 52px; } #STORY.responsive #TIMELINE .events .event.show { display: none; } */ #STORY.responsive #TIMELINE .increments { left: 68px; } #STORY.responsive #TIMELINE .line { width: auto; } #STORY.responsive #TIMELINE .events { margin-left: 69px; } #STORY.responsive #TIMELINE .lifeEvents { margin-left: 69px; } #STORY #narrativeShell .bubble { width: auto; left: 0px; right: 0px; } #STORY #narrativeShell .bubble .options { right: -14px; } #STORY #story_heading .date .line { left: 0px; right: 0px; } #STORY #mapHolder .snapshots { display: none; } } @media screen and (max-width: 720px) { #wizard { width: 660px; } #wizard.freeze { margin-left: -330px; } #wizard .tabs .tab { width: 208px; } } @media screen and (max-width: 675px) { #enlargedImage { left: 10px; right: 10px; margin-left: 0px !important; width: auto; } } @media screen and (max-width: 660px){ #wizard { width: 510px; } #wizard.freeze { margin-left: -255px; } #wizard .tabs .tab { width: 158px; } #wizard .panel { padding: 20px 10px; } } @media screen and (max-width: 530px){ #wizard { width: 360px; } #wizard.freeze { margin-left: -180px; } #wizard .tabs .tab { width: 108px; } } @media screen and (max-width: 510px) { #STORY.responsive #mapHolder { width: auto; height: 275px; margin: 0px 20px 20px 20px; } #STORY.responsive .narr_snippet { font-size: 16px; } #STORY.responsive .narr_snippet .options .option.edit { display: none; } #STORY.responsive .narr_snippet .options .option.feedback { display: none; } #STORY.responsive .narr_snippet .event_info { width: auto; left: 0px; } #STORY.responsive .narr_snippet .event_info .options .option.edit { display: block; } #STORY.responsive .narr_snippet .event_info .options .option.feedback { display: block; } #STORY.responsive #TIMELINE { width: 320px; } #STORY.responsive #TIMELINE .events { margin-left: 29px; } #STORY.responsive #TIMELINE .events .event .text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #STORY.responsive #TIMELINE .lifeEvents { margin-left: 29px; } #STORY.responsive #TIMELINE .line { width: 320px; } #STORY.responsive #TIMELINE .increments { left: 28px; } #STORY.responsive #TIMELINE .increments .increment { margin-right: 21px; } #STORY #narrativeShell .event_info .options { padding-top: 20px; } #STORY #narrativeShell .event_info .options .option.closer { position: absolute; top: 10px; right: 10px; } #STORY.responsive #headlines .narr_snippet { margin-left: -25px; } #STORY #narrativeShell .narr_snippet .heading { padding-right: 20px; } #STORY #narrativeShell .bubble .narr_snippet .heading { padding-right: 110px; } } @media screen and (max-width: 359px) { #STORY #narrativeShell .attachments.oneplus, #STORY #narrativeShell .attachments.fiveplus { margin-left: 200px; } #wizard { width: 320px; } #wizard.freeze { margin-left: -160px; } #wizard .tabs .tab { width: 94px; } } @-webkit-keyframes timeline-pin{ from { -webkit-transform: rotateZ(-30deg) translate3d(-200px,-200px,100px); opacity: 0.0; } to { -webkit-transform: rotateZ(0deg) translate3d(0px,0px,0px); opacity: 1.0; } } @-webkit-keyframes lifestyles-appear{ 0% { -webkit-transform: translate3d(-100px,0px,0px); opacity: 0.0; } 50% { -webkit-transform: translate3d(-100px,0px,0px); opacity: 0.0; } 100% { -webkit-transform: translate3d(0px,0px,0px); opacity: 1.0; } } @-webkit-keyframes timeline-increment-appear{ from { -webkit-transform: scale(0.0); opacity: 0.0; } to { -webkit-transform: scale(1.0); opacity: 1.0; } } @-webkit-keyframes timeline-lifebar-appear{ 0% { -webkit-transform: scale(0.0); opacity: 0.0; } 50% { -webkit-transform: scale(0.0); opacity: 0.0; } 100% { -webkit-transform: scale(1.0); opacity: 1.0; } }#STORY_FRAGMENTS { } #STORY_FRAGMENTS .content { width: 800px; padding: 40px; margin: 33px auto 0px auto; background-color: #FCFCFC; border-radius: 3px; position: relative;}#STRIPE { } #STRIPE .content { position: relative; background: #FCFCFC; padding: 40px; border-radius: 5px; width: 475px; margin: 0px auto; } #STRIPE table { width: 474px; } #STRIPE table tr { } #STRIPE table tr.bold { font-weight: bold; } #STRIPE table th { background-color: #C7C7C7; padding: 5px; } #STRIPE table td { padding: 5px; } #STRIPE table input[type=radio] { margin-left: 20px; } #STRIPE table form { width: 90px; margin: 10px auto; } #STRIPE table .delete { cursor: pointer; text-align: center; color: red; } #STRIPE .invoice { margin-top: 40px; text-align: center; } #STRIPE .invoice .button { float: none; width: 200px; margin: 0px auto; } #STRIPE .invoice .note { font-size: 10px; margin-top: 5px; } #SUBSCRIBE { } #SUBSCRIBE .default-header .options .question { font-size: 12px; } #SUBSCRIBE .content { width: 724px; margin: 35px auto 20px auto; background-color: #FCFCFC; padding: 40px; border-radius: 5px; position: relative; } #SUBSCRIBE h1 { font-size: 36px; text-align: center; } #SUBSCRIBE .message { font-size: 14px; margin: 0px auto 10px auto; background-color: #EDE2B2; color: black;padding: 10px;border-radius: 3px;} #SUBSCRIBE .subtext { color: #999999; font-size: 16px; font-family: Lato, 'Helvetica Neue', sans-serif; margin-bottom: 20px; text-align: center; } #SUBSCRIBE .block { float: left; } #SUBSCRIBE .block.one { margin-right: 20px; width: 250px; position: relative; } #SUBSCRIBE .block.one .ribbon { display: none; position: absolute; top: 94px; left: 52px; width: 152px; } #SUBSCRIBE .block.one.gift_ribbon .ribbon { display: block; } #SUBSCRIBE .block.one .image { width: 200px; height: 243px; margin: 0px auto 0px auto; display: block; } #SUBSCRIBE .block.one .testimonials { display: none; width: 200px; height: 200px; margin: 20px auto 0px auto; } #SUBSCRIBE .block.one .testimonial { margin-bottom: 10px; } #SUBSCRIBE .block.two { width: 450px; } #SUBSCRIBE .subscribed { text-align: center; height: 45px; line-height: 45px; font-weight: bold; } #SUBSCRIBE .plans { border-top: 1px solid #CCC; } #SUBSCRIBE .plan { border-bottom: 1px solid #CCC; position: relative; padding: 15px 0px 15px 35px; } #SUBSCRIBE .plan .radioHolder { position: absolute; top: 13px; left: 6px; } #SUBSCRIBE .plan .radioHolder.disabled { opacity: 0.5; pointer-events: none; cursor: auto; } #SUBSCRIBE .plan .name { position: relative; float: left; } #SUBSCRIBE .plan .name .best { position: absolute; top: 0px; right: -72px; padding: 2px 4px; background-color: #C64242; font-size: 12px; color: #FFFFFF; } #SUBSCRIBE .plan .monthly {font-size: 12px; color: #999; height: 20px; line-height: 20px; } #SUBSCRIBE .plan .price { position: absolute; right: 10px; } #SUBSCRIBE .plan .price.full { top: 13px; } #SUBSCRIBE .plan .price.discount { top: 32px; display: none; font-weight: bold; } #SUBSCRIBE .plan.discounted .price.discount { display: block; } #SUBSCRIBE .plan.discounted .price.full { text-decoration: line-through; color: red; } #SUBSCRIBE .plan form { width: 120px; margin: 10px auto 0px auto; } #SUBSCRIBE .coupon { width: 185px; float: left; } #SUBSCRIBE .coupon .input.holder { width: 100px; } #SUBSCRIBE .coupon input[type=submit] { height: 20px; line-height: 20px; margin: 25px 0px 0px 10px; } #SUBSCRIBE .pay,#SUBSCRIBE .requires_log_in { float: right; height: 35px; line-height: 35px; margin-top: 16px; } #SUBSCRIBE .requires_log_in { display: block; position: relative; padding: 0 12px; height: 30px; line-height: 30px; background: #1275FF;background-image: -webkit-linear-gradient(#7DC5EE,#008CDD 85%,#30A2E4);background-image: -moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: -ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: -o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: -webkit-linear-gradient(#7DC5EE,#008CDD 85%,#30A2E4);background-image: -moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: -ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: -o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);background-image: linear-gradient(#7DC5EE,#008CDD 85%,#30A2E4);font-size: 14px;color: #FFF;font-weight: bold;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);border-radius: 4px; } #SUBSCRIBE .pay.always { display: block !important; } #SUBSCRIBE .pay.cards_on_file { display: none !important; } #SUBSCRIBE .pay.yearly { display: block; } #SUBSCRIBE .pay.monthly { display: none; } #SUBSCRIBE .pay.daily { display: none; } #SUBSCRIBE .pay.threemonths { display: block; } #SUBSCRIBE .pay.sixmonths { display: none; } #SUBSCRIBE .pay.twelvemonths { display: none; } #SUBSCRIBE .questions { margin-top: 20px; } #SUBSCRIBE .question { font-size: 18px; } #SUBSCRIBE .questions ul { margin-top: 15px; } #SUBSCRIBE .questions ul li { margin-bottom: 10px; font-size: 12px; padding-left: 30px; position: relative; } #SUBSCRIBE .questions ul li .checkmark { position: absolute; top: -7px; left: 0px; background-image: url(/images/greencheck.png); background-repeat: no-repeat; width: 24px; height: 24px; } #SUBSCRIBE .cards { z-index: 1001; position: fixed; top: 150px; left: 50%; margin-left: -185px; background-color: #FCFCFC; display: none; border-radius: 5px; } #SUBSCRIBE .cards .button.red { margin-right: 20px; text-align: center; } #SUBSCRIBE .cards .card { margin-bottom: 20px; } #SUBSCRIBE .cards .exit { position: absolute; top: 5px;right: 5px;height: 25px;line-height: 25px;width: 25px;color: #999;cursor: pointer; text-align: center; } #SUBSCRIBE .gift { min-height: 38px; } #SUBSCRIBE .gift .expand { text-align: center; } #SUBSCRIBE .gift .explain { display: none; margin-top: 10px; font-size: 14px; } #SUBSCRIBE .gift form { float: right; } #SUBSCRIBE .sendagift { display: none; } #SUBSCRIBE .logo_match { font-family: 'Kaushan Script', cursive; display: block; font-size: 55px; line-height: 45px; } #SUBSCRIBE #coupon_form #reminder_msg { display: none; position: relative; border: 1px solid #FFCC00; text-align: center; border-radius: 3px; padding: 5px; margin-top: 10px; background-color: #FFFFFF; font-size: 12px; float: right; width: 110px; } #SUBSCRIBE #coupon_form #reminder_msg .pointer { position: absolute; top: -10px; right: 24px; height: 10px; width: 19px; overflow: hidden; } #SUBSCRIBE #coupon_form #reminder_msg .pointer .point { background-color: #FFFFFF; border: 1px solid #FFCC00; height: 12px; width: 12px; -webkit-transform: translate3d(2px, 3px, 0px) rotateZ(45deg); -moz-transform: translate3d(2px, 3px, 0px) rotateZ(45deg); -ms-transform: translate3d(2px, 3px, 0px) rotateZ(45deg); } #SUBSCRIBE.gifting .content { width: 610px; } #SUBSCRIBE.gifting .choose { margin: 20px 0px; } #SUBSCRIBE.gifting h1 { text-align: left; } #SUBSCRIBE.gifting .story_stack { float: left; margin: 20px 20px 0px 0px; } #SUBSCRIBE.gifting .stack_holder { position: relative; } #SUBSCRIBE.gifting .stack_holder .ribbon { position: absolute; top: 113px; left: 27px; width: 152px; } #SUBSCRIBE.gifting .intro { float: left; } @media screen and (max-width: 830px){ #SUBSCRIBE .content { padding: 40px 20px; } } @media screen and (max-width: 790px) { #SUBSCRIBE .content { width: 524px; } #SUBSCRIBE h1 { font-size: 32px; } #SUBSCRIBE .block.one { display: none; } #SUBSCRIBE .block.two { float: none; margin: 0px auto; height: auto; } #SUBSCRIBE .subtext { width: 400px; margin: 0px auto 20px auto; } } @media screen and (max-width: 680px){ #SUBSCRIBE.gifting .content { width: 524px; } #SUBSCRIBE.gifting .stack_holder { display: none; } #SUBSCRIBE.gifting .intro { float: none; width: 390px; margin: 0px auto; } } @media screen and (max-width: 590px) { #SUBSCRIBE .content, #SUBSCRIBE.gifting .content { width: 324px; } #SUBSCRIBE.gifting .intro { width: auto; } #SUBSCRIBE.gifting .plan .price.full { right: 10px; top: 13px; left: auto; } #SUBSCRIBE.gifting .plan .name .best { right: -72px; } #SUBSCRIBE.gifting .plan .name { margin-bottom: 0px; } #SUBSCRIBE h1 { font-size: 26px; line-height: 30px; } #SUBSCRIBE .block.two { width: auto; } #SUBSCRIBE .plan .name { margin-bottom: 21px; } #SUBSCRIBE .plan.gift .name { margin-bottom: 0px; } #SUBSCRIBE .plan .price.full { top: 36px; right: auto; left: 35px; } #SUBSCRIBE .plan .price.discount { top: 36px; right: 0px; } #SUBSCRIBE .plan.month .monthly { display: none; } #SUBSCRIBE .subscribed { line-height: auto; margin-top: 20px; margin-bottom: 20px; } #SUBSCRIBE .plan .name .best { right: -148px; } #SUBSCRIBE .subtext { width: 260px; margin-top: 10px; } #SUBSCRIBE .subscribed { height: auto; line-height: 20px; } } @media screen and (max-width: 400px) { #SUBSCRIBE .question { font-size: 16px; } #SUBSCRIBE .content, #SUBSCRIBE.gifting .content { width: 280px; } #SUBSCRIBE .coupon .input.holder { width: 75px; } #SUBSCRIBE .plan .name .best { right: -104px; } #SUBSCRIBE.gifting .plan .name .best { right: -72px; } }#TERMS { } #TERMS .content { max-width: 600px; padding: 40px; margin: 35px auto 0px auto; background-color: #FCFCFC; border-radius: 5px; position: relative; } #TERMS .terms p { margin-bottom:16px; } #TERMS .terms li { list-style-type:disc;margin-left: 20px; line-height: 20px; margin-bottom: 16px; } #TERMS h1 { margin-bottom: 20px; font-size: 32px; } @media screen and (max-width: 740px) { #TERMS .content { margin-left: 10px; margin-right: 10px; } } @media screen and (max-width: 400px) { #TERMS .content { margin-left: 0px; margin-right: 0px; padding: 40px 20px; } } #timerTable { background-color: #FFFFFF; width: 100%; overflow:hidden; } #timerTable th { background-color: #C4C4C4; }#WELCOME { } #WELCOME .fmp_container { max-width: 1000px; margin: 0px auto; } #WELCOME .fmp_container img { width: 100%; } #WELCOME .default-header .options .option,#WELCOME .default-header .options { color: #000000; } #WELCOME .blockHolder { position: relative; padding-bottom: 60px; } #WELCOME .blockHolder .tabs { position: absolute; top: 0px; right: 0px; } #WELCOME .blockHolder .tabs .tab { cursor: pointer; float: left; margin-right: 20px; width: 100px; text-align: center; height: 75px; line-height: 75px; border-radius: 0px 0px 20px 20px; } #WELCOME .blockHolder .tabs .tab:hover,#WELCOME .blockHolder .tabs .tab.selected { color: #FFFFFF; } #WELCOME .blockHolder .signUp { text-decoration: none; width: 120px; margin: 15px auto 0px auto; float: none; display: block; } #WELCOME .blockHolder h2 { text-align: center; font-family: 'Oswald', sans-serif; } #WELCOME .block { width: 1024px; margin: 0px auto; } #WELCOME .blockHolder.one { overflow: hidden; min-height: 600px; background-color: #D0B69F; background: url(/images/welcome1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #WELCOME .blockHolder.one .button_subtext { text-align: center; margin-top: 10px; font-size: 12px; text-shadow: 0px 0px 5px #FFF;} #WELCOME .blockHolder.one .content { width: 500px; margin: 0px auto; } #WELCOME .blockHolder.one .line1, #WELCOME .blockHolder.one .line2 { font-family: 'Oswald', sans-serif; } #WELCOME .blockHolder.one .line1 { text-align: center; text-shadow: 1px 1px 1px #D0C3A7; font-size: 80px; line-height: 80px; height: 100px; } #WELCOME.fmp .blockHolder.one .line1 { font-size: 65px; } #WELCOME .blockHolder.one .line1.instant { font-size: 50px; height: 85px; } #WELCOME .blockHolder.one .line1.tellus { font-size: 52px; height: 80px; } #WELCOME .blockHolder.one .line2 { overflow: hidden; height: 60px; line-height: 50px; text-align: center; text-shadow: 1px 1px 1px #D0C3A7; font-size: 50px; position: relative; } #WELCOME.fmp .blockHolder.one .line2 { font-size: 38px; } #WELCOME .blockHolder.one .line2 .phrase1 { position: absolute; width: 100%; } #WELCOME .blockHolder.one .line2 .phrase2 { position: absolute; width: 100%; } #WELCOME .blockHolder.one .video { position: relative; margin: 26px auto 42px auto; width: 500px; height: 270px; } #WELCOME .blockHolder.one .video .oldman { background: url(/images/video_snap.jpg); background-position: center center; width: 500px; height: 270px; } #WELCOME .blockHolder.one .FSCertified { text-align: center; font-size: 20px; position: relative; background-color: #FFFFFF; height: 90px; line-height: 90px; } #WELCOME .blockHolder.one .FSCertified .container { width: 390px; margin: 0px auto; position: relative; padding-right: 220px; } #WELCOME .blockHolder.one .FSCertified .certified { position: absolute; top: 8px; right: 0px; } #WELCOME .blockHolder.two { min-height: 640px; background-color: #FFFFFF; } #WELCOME .blockHolder.two .tabs .tab:hover,#WELCOME .blockHolder.two .tabs .tab.selected { background-color: #C6B5A6; } #WELCOME .blockHolder.two .ipad { margin: 0px auto; width: 533px; height: 486px; display: block; background-image: url(/images/ipadv2.png); } #WELCOME .blockHolder.two .block { position: relative; } #WELCOME .blockHolder.two .point { position: absolute; font-size: 14px; width: 131px; } #WELCOME .blockHolder.two .leftone { text-align:right; top: 94px; left: 126px; background-color: white; padding: 7px; width: 180px; } #WELCOME .blockHolder.two .lefttwo { text-align:right; top: 189px; left: 166px; } #WELCOME .blockHolder.two .leftthree { text-align:right; top: 298px; left: 183px; } #WELCOME .blockHolder.two .rightone { top: 53px; right: 156px; } #WELCOME .blockHolder.two .righttwo { top: 191px; right: 116px; } #WELCOME .blockHolder.two .rightthree { top: 345px; right: 159px; } #WELCOME .blockHolder.three { min-height: 640px; background-color: #FAE1B3; } #WELCOME .blockHolder.three .tabs .tab:hover,#WELCOME .blockHolder.three .tabs .tab.selected { background-color: #FACF7F; } #WELCOME .blockHolder.three .title { margin-left: 20px; font-family: 'Kaushan Script', cursive; font-size: 24px; height: 130px; line-height: 187px; } #WELCOME .blockHolder.three .testimonials { padding: 20px; width: 900px; margin: 0px auto; } #WELCOME .blockHolder.three .testimonials .testimonial { height: 200px; width: 435px; margin-bottom: 30px; float: left; } #WELCOME .blockHolder.three .testimonials .testimonial .stars { height: 41px; margin: 0px auto 10px auto; } #WELCOME .blockHolder.three .testimonials .testimonial .stars.four { background-image: url(/images/4-star.png); width: 146px; } #WELCOME .blockHolder.three .testimonials .testimonial .stars.five { background-image: url(/images/5-star.png); width: 180px; } #WELCOME .blockHolder.three .testimonials .testimonial .text,#WELCOME .blockHolder.three .testimonials .testimonial .author { width: 330px; margin: 0px auto; font-size: 18px; } #WELCOME .blockHolder.three .testimonials .testimonial .text { text-align: center; } #WELCOME .blockHolder.three .testimonials .testimonial .author { text-align: right; font-family: 'Oswald', sans-serif; margin-top: 15px; } #WELCOME .blockHolder.three .testimonials .testimonial:nth-child(odd) { margin-right: 30px; } #WELCOME #youtube_video { display: none; width:500px; height:270px; margin: 26px auto 42px auto; } #WELCOME #youtube_video .youtube { width:500px; height:270px; } @media screen and (max-width: 1023px) { #WELCOME .block { width: 900px; } #WELCOME .blockHolder.two .leftone { left: 67px; } #WELCOME .blockHolder.two .lefttwo { left: 103px; } #WELCOME .blockHolder.two .leftthree { left: 120px; } #WELCOME .blockHolder.two .rightone { right: 94px; } #WELCOME .blockHolder.two .righttwo { right: 56px; } #WELCOME .blockHolder.two .rightthree { right: 95px; } #WELCOME .blockHolder.three .testimonials { width: auto; padding: 20px 0px; } } @media screen and (max-width: 900px) { #WELCOME .block { width: auto; } #WELCOME .blockHolder.two { padding-top: 75px; } #WELCOME .blockHolder.two .the_logo { width: 170px; position: absolute; top: 17px; left: -24px; } #WELCOME .blockHolder.two .ipad { width: 300px; height: 391px; margin: 0px auto; background-image: url(/images/s300_ipad.png);} #WELCOME .blockHolder.two .point { position: static; width: 276px; text-align: left ; padding: 0px ; display: list-item; margin: 0px auto 15px auto; } #WELCOME .blockHolder.three .title { text-align: center; line-height: 200px; } #WELCOME .blockHolder.three .testimonials .testimonial { float: none; margin: 0px auto; } #WELCOME .blockHolder.three .testimonials .testimonial:nth-child(odd) { margin-right: auto; } } @media screen and (max-width: 620px) { #WELCOME .blockHolder.one .FSCertified { height: auto; line-height: 36px; } #WELCOME .blockHolder.one .FSCertified .container { padding-right: 0px; } #WELCOME .blockHolder.one .FSCertified .certified { position: static; } } @media screen and (max-width: 520px) { #WELCOME .blockHolder.three .testimonials .testimonial { width: 340px; margin-bottom: 30px; } #WELCOME .default-header .options.loggedIn { position: relative; width: 350px; margin: 0px auto; right: auto; } #WELCOME .blockHolder.one .content { width: 100%; } #WELCOME .blockHolder.one .line1.instant { font-size: 40px; height: 70px; } #WELCOME .blockHolder.one .line1.explore { font-size: 65px; } #WELCOME .blockHolder.one .line1.tellus { font-size: 42px; } #WELCOME .blockHolder.one .line2 { font-size: 40px; } #WELCOME #youtube_video { width:100%; margin: 26px 0px 42px 0px; } #WELCOME #youtube_video .youtube { width: 100%; } #WELCOME .blockHolder.one .video { width: auto; padding: 0px 10px; } #WELCOME .blockHolder.one .video .oldman { width: 100%; height: 100%; } #WELCOME.fmp .blockHolder.one .line1 { font-size: 38px; line-height: 50px; height: 50px; } #WELCOME.fmp .blockHolder.one .line2 { font-size: 23px; line-height: 43px; } } @media screen and (max-width: 400px) { #WELCOME .blockHolder.one .FSCertified { line-height: 24px; padding-top: 10px; } #WELCOME .blockHolder.one .FSCertified .text { width: 205px; margin: 0px auto 10px auto; } #WELCOME .blockHolder.one .FSCertified .container { width: auto; } #WELCOME .default-header.responsive.signedin .options { right: -10px; } #WELCOME .default-header.responsive.anonymous .options { right: 0px; } #WELCOME .blockHolder.one .line1 { font-size: 50px; line-height: 50px; height: 60px; } #WELCOME .blockHolder.one .line1.explore { font-size: 46px; } #WELCOME .blockHolder.one .line1.instant { font-size: 29px; height: 50px; } #WELCOME .blockHolder.one .line1.tellus { font-size: 32px; height: 50px; } #WELCOME .blockHolder.one .line2 { height: 43px; font-size: 28px; line-height: 43px; } #WELCOME .blockHolder.one .line2.instant { font-size: 22px !important; } #WELCOME .block { width: 100%; } #WELCOME .blockHolder .tabs { right: 10px; } #WELCOME .blockHolder .tabs .tab { margin-right: 0px; width: 70px; } #WELCOME .blockHolder .tabs .tab:first-child { margin-right: 10px; } #WELCOME .blockHolder.one .content { width: 300px; margin: 0px auto; } #WELCOME .blockHolder.three .testimonials { padding: 0px 20px; } #WELCOME .blockHolder.three .testimonials .testimonial { width: 100%; } #WELCOME .blockHolder.three .testimonials .testimonial:nth-child(2n+1) { margin-right: 0px; } #WELCOME .blockHolder.three .testimonials .testimonial .text, #WELCOME .blockHolder.three .testimonials .testimonial .author { width: 100%; } #WELCOME .default-header .options.loggedIn { width: 320px; } #WELCOME .default-header .options.loggedIn .option { width: 61px; margin-right: 18px; font-size: 15px; } #WELCOME .blockHolder.one .video { padding: 0px; } }