/* ================================================================================== */ /* == Normalize.css v3.03 =========================================================== */ /* ================================================================================== */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none; } /* ================================================================================== */ /* == Global ======================================================================== */ /* ================================================================================== */ html,body { height: 100%; font-family: "proxima-nova-condensed", proxima nova condensed, "proxima-nova", "proxima nova", sans-serif; font-weight: 300; font-size: 16px; color: #EAEAEB; line-height: 1.5; background: #27292F; } /*This is for scaling on iPad*/ html.touchevents, .touchevents body { overflow: scroll; -webkit-overflow-scrolling: touch; /*for ipad momentum scrolling*/ } /*Sticky footer stuff*/ .sticky-wrap { min-height: 100%; margin-bottom: -135px;} .sticky-wrap:after { content: ""; display: block; height: 135px; } .sticky-footer { height: 135px; } #timeline, #timeline-ruler, #event-timeline, #prophecy-timeline { width: 20000px; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; } /* This completely disables highlighting text on the entire website. Because of the nature of the app, there's no reason to need to highlight text. Disabling highlighting helps prevent accidental highlighting interference that sometimes occurs on touch devices. */ * { -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /*Except in the program output area.*/ #output { -moz-user-select: initial; -ms-user-select: initial; -khtml-user-select: initial; -webkit-user-select: initial; -webkit-touch-callout: initial; } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ body { padding-top: 60px; } /*Header height*/ #header { background: #2E3037; position: fixed; top: 0; left: 0; width: 100%; height: 60px; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); text-align: center; z-index: 9; } #logo { font-size: 24px; text-transform: uppercase; font-weight: 600; line-height: 60px; cursor: pointer; } #logo span { display: inline-block; background: #5C9DF5; border-radius: 4px; padding: 2px 4px 0px 4px; font-size: 20px; line-height: 24px; margin-left: 3px;} #zoom { position: absolute; top: 0; left: 5px; height: 60px; line-height: 57px; } #zoom span { display: inline-block; width: 50px; font-size: 24px; cursor: pointer; position: relative; font-family: Helvetica, Arial, sans-serif; } #zoom span:after { content: ""; width: 30px; height: 30px; background: #27292F; position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -15px; border-radius: 50%; z-index: -9; opacity: 0; } #zoom span:hover:after { opacity: 1; } #main-nav { position: absolute; top: 11px; right: 10px; font-size: 15px; } #main-nav li { float: left; padding: 0 15px; height: 40px; line-height: 40px; border-radius: 4px; cursor: pointer; } #main-nav li:hover { background: #27292F; } /* ================================================================================== */ /* == Main ========================================================================== */ /* ================================================================================== */ .main { height: 100%; min-height: 490px; padding: 30px 0 10px 0; } /* ================================================================================== */ /* == Timeline ====================================================================== */ /* ================================================================================== */ #timeline { position: relative; height: 100%; font-size: 14px; } /*#timeline ul li { content: "1"; width: 100%; height: 60px; position: absolute; top: -15px; left: 0; background: rgba(0,0,0,0.15); } #timeline ul li:nth-child(2) { top: 60px; background: none; } #timeline ul li:nth-child(3) { top: 105px; background: rgba(0,0,0,0.15); } #timeline ul li:nth-child(4) { top: 180px; background: none; } #timeline ul li:nth-child(5) { top: 225px; background: rgba(0,0,0,0.15); } #timeline ul li:nth-child(6) { top: 300px; background: none; } #timeline ul li:nth-child(7) { top: 345px; background: rgba(0,0,0,0.15); } #timeline ul li:nth-child(8) { top: 405px; background: rgba(0,0,0,0.35); }*/ .person { font-size: 14px; text-transform: uppercase; width: 10px; position: absolute; padding-top: 20px; line-height: 14px; } .person .text { position: absolute; top: 0; left: 0; max-width: 100%; width: 100%; /*min-width: 140px;*/ white-space: nowrap; padding-left: 4px; } .person .name { font-weight: 600; } .person .age { } .person.exact .age:before { content: " - "; } .person.about .age:before { content: " ~ "; color: #FC5F45; vertical-align: -3px; font-size: 13px; } .person .date { color: #999FA9; font-size: 12px; font-style: italic; float: right; } .person .era { margin-left: 3px; } .person .bar { background: #5C9DF5; height: 10px; border-radius: 10px; } /*.person .date { position: absolute; bottom: -35px; left: 0; display: none; } .person:hover .date { display: block; } .person .age { display: none; } .person:hover .age { display: inline; }*/ .person.blue .bar { background: #5C9DF5; } .person.orange .bar { background: #E76F51; } /*background: #FC5F45;*/ .person.green .bar { background: #4BCB9F; } .person.pink .bar { background: #F55D9A; } .person.yellow .bar { background: #F4A261; } /* #F5B55C */ .person.gray .bar { background: #999FA9; } .person.red .bar { background: #EA4D4B; } /* #EF534D */ .person.purple .bar { background: #8F69AC; } .person.teal .bar{ background: #3C99B8; } .view2000 .person .date, .view4000 .person .date, .view6000 .person .date, .view8000 .person .date, .view10000 .person .date { display: none; } .view2000 .person:hover .date, .view4000 .person:hover .date, .view6000 .person:hover .date, .view8000 .person:hover .date, .view10000 .person:hover .date { display: block; } .view2000 .person .age, .view4000 .person .age, .view6000 .person .age, .view8000 .person .age { display: none; } .view2000 .person { font-size: 12px; } /* Spaced in multiples of 60px */ #adam { top: 0px; } #cain { top: 60px; } #abel { top: 120px; } #abel .text { min-width: 133px; } #seth { top: 180px;} #enoch { top: 360px; } #enos { top: 120px; } #jared { top: 240px; } #methuselah { top: 300px; } #noah { top: 360px; } #cainan { top: 480px; } #mahalaleel { top: 540px; } #lamech { top: 420px; } #methuselah { top: 240px; } #lamech { top: 300px; } #cainan { top: 420px; } #mahalaleel { top: 480px; } #jared { top: 540px; } /*#ham { top: 420px; } #japeth { top: 537px; } #shem { top: 480px; } #nimrod { top: 0; } #job { top: 60px; }*/ #ham { top: 180px; } #japeth { top: 60px; } #shem { top: 120px; } #nimrod { top: 0; } #job { top: 300px; } #abraham { top: 240px; } #abraham .text { min-width: 155px; } #sarah { top: 120px; display: none; } #isaac { top: 300px; } #isaac .text { min-width: 132px; } #lot { top: 420px; } #lot .text { min-width: 128px; } #ishmael { top: 480px; } #jacob { top: 360px; } #jacob .text { min-width: 135px; } #esau { top: 420px; } #esau .text { min-width: 133px; } #josephegypt { top: 240px; } #josephegypt .text { min-width: 148px; } #levi { top: 180px; } #levi .text { min-width: 128px; } #amram { top: 60px; } #amram .text { min-width: 146px; } #miriam { top: 120px; } #miriam .text { min-width: 146px; } #aaron { top: 180px; } #aaron .text { min-width: 144px; } #moses { top: 240px; } #moses .text { min-width: 144px; } #caleb { top: 300px; } #caleb .text { min-width: 141px; } #joshua { top: 360px; } #joshua .text { min-width: 147px; } #ehud { top: 300px; } #ehud .text { min-width: 131px; } #boaz { top: 240px; } #boaz .text { min-width: 130px; } #eli { top: 60px; } #eli .text { min-width: 117px; } #gideon { top: 180px; } #gideon .text { min-width: 149px; } #samuel { top: 120px; } #samuel .text { min-width: 145px; } #david { top: 180px; } #david .text { min-width: 130px; } #solomon { top: 240px; } #solomon .text { min-width: 150px; } #absalom { top: 60px; } #absalom { min-width: 150px; } #samson { top: 180px; } #samson .text { min-width: 145px; } #saul { top: 240px; } #saul .text { min-width: 129px; } #jonathan { top: 300px; } #jonathan .text { min-width: 161px; } #bathseba { top: 120px; } #bathseba .text { min-width: 163px; } #elijah { top: 180px; } #elijah .text { min-width: 132px; } #elisha { top: 240px; } #elisha .text { min-width: 132px; } #jonah { top: 120px; } #jonah .text { min-width: 138px; } #nahum { top: 60px; } #nahum .text { min-width: 135px; } #sennacherib .text { min-width: 171px; } #nebuchadnezzarii .text { min-width: 211px; } #belshazzar { top: 60px; } #belshazzar .text { min-width: 164px; } #hilkiah { top: 300px; } #hilkiah .text { min-width: 140px; } #esther { top: 180px; } #esther .text { min-width: 134px; } #nehemiah { top: 240px; } #nehemiah .text { min-width: 153px; } #artaxerxesi { top: 60px; } #artaxerxesi .text { min-width: 171px; } #artaxerxesii { top: 120px; } #artaxerxesii .text { min-width: 176px; } #aristotle .text { min-width: 152px; } #daniel { top: 180px; } #daniel .text { min-width: 136px; } #isaiah { top: 180px; } #isaiah .text { min-width: 133px; } #jeremiah { top: 120px; } #jeremiah .text { min-width: 150px; } #ezekiel { top: 240px; } #ezekiel .text { min-width: 133px; } /*Kings of Judah*/ #rehoboam { top: 360px; } #rehoboam .text { min-width: 158px; } #abijah { top: 360px; } #asa { top: 360px; } #jehoshaphat { top: 360px; } #jehoram { top: 360px; } #ahaziah { top: 360px; } #athaliah { top: 360px; } #joash { top: 360px; } #amaziah { top: 360px; } #uzziah { top: 420px; } #jotham { top: 360px; } #ahaz { top: 360px; } #hezekiah { top: 360px; } #manessah { top: 420px; } #amon { top: 360px; } #josiah { top: 360px; } #jehoahaz { top: 420px; } jehoiakim { top: 360px; } #jehoiachin { top: 360px; } #zedekiah { top: 360px; } /*Kings of Israel*/ #jeroboami { top: 480px; } #nadab { top: 480px; } #baasha { top: 480px; } #elah { top: 480px; } #zimri { top: 480px; } #omri { top: 480px; } #ahab { top: 540px; } #ahaziah { top: 480px; } #joram { top: 480px; } #jehu { top: 480px; } #jehoahaz { top: 480px; } #jehoash { top: 480px; } #jeroboamii { top: 540px; } #zechariah { top: 480px; } #shallum { top: 480px; } #menahem { top: 480px; } #pekiah { top: 480px; } #pekah { top: 480px; } #hoshea { top: 480px; } #rehoboam, #abijah, #asa, #jehoshaphat, #jehoram, #ahaziah, #athaliah, #joash, #amaziah, #uzziah, #jotham, #ahaz, #hezekiah, #manessah, #amon, #josiah, #jehoahaz, #jehoiakim, #jehoiachin, #zedekiah, #jeroboami, #nadab, #baasha, #elah, #zimri, #omri, #ahab, #ahaziah, #joram, #jehu, #jehoahaz, #jehoash, #jeroboamii, #zechariah, #shallum, #menahem, #pekiah, #pekah, #hoshea { display: none; } #kingsaul, #kingdavid, #kingsolomon, #kingrehoboam, #kingabijah, #kingasa, #kingjehoshaphat, #kingjehoram, #kingahaziah, #kingathaliah, #kingjoash, #kingamaziah, #kinguzziah, #kingjotham, #kingahaz, #kinghezekiah, #kingmanassah, #kingamon, #kingjosiah, #kingjehoahaz, #kingjehoiakim, #kingjehoiachin, #kingzedekiah, #kingjeroboami, #kingnadab, #kingbaasha, #kingelah, #kingzimri, #kingtibni, #kingomri, #kingahab, #kingahaziahisrael, #kingjoram, #kingjehu, #kingjehoahazisrael, #kingjehoash, #kingjeroboamii, #kingzechariah, #kingshallum, #kingmenahem, #kingpekahiah, #kingpeka, #kinghoshea { display: none; } #kingsaul .text, #kingdavid .text, #kingsolomon .text, #kingrehoboam .text, #kingabijah .text, #kingasa .text, #kingjehoshaphat .text, #kingjehoram .text, #kingahaziah .text, #kingathaliah .text, #kingjoash .text, #kingamaziah .text, #kinguzziah .text, #kingjotham .text, #kingahaz .text, #kinghezekiah .text, #kingmanassah .text, #kingamon .text, #kingjosiah .text, #kingjehoahaz .text, #kingjehoiakim .text, #kingjehoiachin .text, #kingzedekiah .text, #kingjeroboami .text, #kingnadab .text, #kingbaasha .text, #kingelah .text, #kingzimri .text, #kingtibni .text, #kingomri .text, #kingahab .text, #kingahaziahisrael .text, #kingjoram .text, #kingjehu .text, #kingjehoahazisrael .text, #kingjehoash .text, #kingjeroboamii .text, #kingzechariah .text, #kingshallum .text, #kingmenahem .text, #kingpekahiah .text, #kingpeka .text, #kinghoshea .text { display: none; } #kingsaul .date, #kingdavid .date, #kingsolomon .date, #kingrehoboam .date, #kingabijah .date, #kingasa .date, #kingjehoshaphat .date, #kingjehoram .date, #kingahaziah .date, #kingathaliah .date, #kingjoash .date, #kingamaziah .date, #kinguzziah .date, #kingjotham .date, #kingahaz .date, #kinghezekiah .date, #kingmanassah .date, #kingamon .date, #kingjosiah .date, #kingjehoahaz .date, #kingjehoiakim .date, #kingjehoiachin .date, #kingzedekiah .date, #kingjeroboami .date, #kingnadab .date, #kingbaasha .date, #kingelah .date, #kingzimri .date, #kingtibni .date, #kingomri .date, #kingahab .date, #kingahaziahisrael .date, #kingjoram .date, #kingjehu .date, #kingjehoahazisrael .date, #kingjehoash .date, #kingjeroboamii .date, #kingzechariah .date, #kingshallum .date, #kingmenahem .date, #kingpekahiah .date, #kingpeka .date, #kinghoshea .date { position: absolute; bottom: -38px; left: 3px; } #kingsaul .bar, #kingdavid .bar, #kingsolomon .bar, #kingrehoboam .bar, #kingabijah .bar, #kingasa .bar, #kingjehoshaphat .bar, #kingjehoram .bar, #kingahaziah .bar, #kingathaliah .bar, #kingjoash .bar, #kingamaziah .bar, #kinguzziah .bar, #kingjotham .bar, #kingahaz .bar, #kinghezekiah .bar, #kingmanassah .bar, #kingamon .bar, #kingjosiah .bar, #kingjehoahaz .bar, #kingjehoiakim .bar, #kingjehoiachin .bar, #kingzedekiah .bar, #kingjeroboami .bar, #kingnadab .bar, #kingbaasha .bar, #kingelah .bar, #kingzimri .bar, #kingtibni .bar, #kingomri .bar, #kingahab .bar, #kingahaziahisrael .bar, #kingjoram .bar, #kingjehu .bar, #kingjehoahazisrael .bar, #kingjehoash .bar, #kingjeroboamii .bar, #kingzechariah .bar, #kingshallum .bar, #kingmenahem .bar, #kingpekahiah .bar, #kingpeka .bar, #kinghoshea .bar { border-radius: 3px; } #kingsaul:hover .text, #kingdavid:hover .text, #kingsolomon:hover .text, #kingrehoboam:hover .text, #kingabijah:hover .text, #kingasa:hover .text, #kingjehoshaphat:hover .text, #kingjehoram:hover .text, #kingahaziah:hover .text, #kingathaliah:hover .text, #kingjoash:hover .text, #kingamaziah:hover .text, #kinguzziah:hover .text, #kingjotham:hover .text, #kingahaz:hover .text, #kinghezekiah:hover .text, #kingmanassah:hover .text, #kingamon:hover .text, #kingjosiah:hover .text, #kingjehoahaz:hover .text, #kingjehoiakim:hover .text, #kingjehoiachin:hover .text, #kingzedekiah:hover .text, #kingjeroboami:hover .text, #kingnadab:hover .text, #kingbaasha:hover .text, #kingelah:hover .text, #kingzimri:hover .text, #kingtibni:hover .text, #kingomri:hover .text, #kingahab:hover .text, #kingahaziahisrael:hover .text, #kingjoram:hover .text, #kingjehu:hover .text, #kingjehoahazisrael:hover .text, #kingjehoash:hover .text, #kingjeroboamii:hover .text, #kingzechariah:hover .text, #kingshallum:hover .text, #kingmenahem:hover .text, #kingpekahiah:hover .text, #kingpeka:hover .text, #kinghoshea:hover .text { display: block; } #kingsaul:before { content: "Reign of the Kings"; position: absolute; left: -123px; top: 19px; font-weight: 600; } /*#kingrehoboam:before { content: "Kings of Judah"; position: absolute; left: -103px; top: 19px; font-weight: 600; }*/ /*#kingjeroboami:before { content: "Kings of Israel"; position: absolute; left: -102px; top: 19px; font-weight: 600; }*/ #kingsaul, #kingdavid, #kingsolomon { top: 380px; } #kingrehoboam, #kingabijah, #kingasa, #kingjehoshaphat, #kingjehoram, #kingahaziah, #kingathaliah, #kingjoash, #kingamaziah, #kinguzziah, #kingjotham, #kingahaz, #kinghezekiah, #kingmanassah, #kingamon, #kingjosiah, #kingjehoahaz, #kingjehoiakim, #kingjehoiachin, #kingzedekiah { top: 360px; } #kinguzziah, #kingmanassah { top: 345px; } #kingjeroboami, #kingnadab, #kingbaasha, #kingelah, #kingzimri, #kingtibni, #kingomri, #kingahab, #kingahaziahisrael, #kingjoram, #kingjehu, #kingjehoahazisrael, #kingjehoash, #kingjeroboamii, #kingzechariah, #kingshallum, #kingmenahem, #kingpekahiah, #kingpeka, #kinghoshea { top: 400px; } #kingpeka, #kingjeroboamii, #kingtibni { top: 415px; } #alexanderthegreat { top: 180px; } #alexanderthegreat .text { min-width: 221px; } #juliuscaesar { top: 60px; } #juliuscaesar .text { min-width: 170px; } #augustuscaesar { top: 120px; } #augustuscaesar .text { min-width: 202px; } #joseph { top: 240px; } #joseph .text { min-width: 145px; } #jesus { top: 180px; } #jesus .text { min-width: 126px; } #herodthegreat { top: 300px; } #herodthegreat .text { min-width: 180px; } #herodantipas { top: 360px; } #herodantipas .text { min-width: 190px; } #constantine { top: 120px; } #constantine .text { min-width: 172px; } #genghiskhan { top: 120px; } #genghiskhan .text { min-width: 184px; } #attilathehun { top: 60px; } #attilathehun .text { min-width: 190px; } #muhammad { top: 60px; } #muhammad .text { min-width: 162px; } #plato { top: 180px; } #plato .text { min-width: 130px; } #socrates { top: 360px; } #socrates .text { min-width: 150px; } #aristotle { top: 420px; } #aristotle .text { min-width: 152px; } #johncalvin { top: 60px; } #johncalvin .text { min-width: 174px; } #williamtyndale { top: 120px; } #williamtyndale .text { min-width: 199px; } #johnwycliffe { top: 180px; } #johnwycliffe .text { min-width: 190px; } #martinluther { top: 180px; } #martinluther .text { min-width: 188px; } #leonardodavinci { top: 420px; } #leonardodavinci .text { min-width: 209px; } #jacobusarminius { top: 240px; } #jacobusarminius .text { min-width: 210px; } #johnhuss { top: 120px; } #johnhuss .text { min-width: 163px; } #ulrichzwingli { top: 240px; } #ulrichzwingli .text { min-width: 188px; } #johnknox { top: 300px; } #johnknox .text { min-width: 164px; } #charlesv { top: 360px; } #charlesv .text { min-width: 163px; } #galileogalilei { top: 420px; } #galileogalilei .text { min-width: 188px; } #henryviii .text { min-width: 155px; } #napoleon .text { min-width: 156px; } #isaacnewton { top: 120px; } #isaacnewton .text { min-width: 182px; } #johnadams { top: 300px; } #johnadams .text { min-width: 173px; } #theodoreroosevelt { top: 180px; } #theodoreroosevelt .text { min-width: 227px; } #andrewjackson { top: 360px; } #andrewjackson .text { min-width: 201px; } #franklindroosevelt { top: 120px; } #franklindroosevelt .text { min-width: 237px; } #georgewashington { top: 180px; } #georgewashington .text { min-width: 221px; } #abrahamlincoln { top: 60px; } #abrahamlincoln .text { min-width: 208px; } #benjaminfranklin { top: 240px; } #benjaminfranklin .text { min-width: 214px; } #thomasjefferson { top: 120px; } #thomasjefferson .text { min-width: 212px; } #queenvictoria { top: 420px; } #queenvictoria .text { min-width: 187px; } #rogerwilliams { top: 180px; } #rogerwilliams .text { min-width: 195px; } #ellenwhite { top: 240px; } #ellenwhite .text { min-width: 167px; } #hmsrichards { top: 360px; } #hmsrichards .text { min-width: 196px; } #johnwesley { top: 60px; } #johnwesley .text { min-width: 173px; } #williammiller { top: 480px; } #williammiller .text { min-width: 188px; } @media only screen and (max-height: 720px) { #jared, #ishmael, #williammiller { display: none; } } /* ================================================================================== */ /* == Event Timeline ================================================================ */ /* ================================================================================== */ #event-timeline { position: relative; height: 85px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; z-index: 9; } .event { font-size: 14px; text-transform: uppercase; line-height: 14px; text-align: center; position: absolute; bottom: -5px; left: 50%; z-index: 9998; min-width: 24px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;} .event .text { min-width: 90px; background: #1B1B21; padding: 10px 10px 8px 10px; border-radius: 4px; } .event .text:after { content: ""; width: 0; height: 0; position: absolute; bottom: 20px; left: 50%; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #1B1B21; } .event .name { font-weight: 600; } .event .age { } .event .age:before { content: " - "; } .event .date { color: #999FA9; font-size: 12px; font-style: italic; display: block; margin-top: 2px;} .event .era { margin-left: 3px; } .event .bar { background: #5C9DF5; height: 10px; width: 10px; border-radius: 10px; margin: 20px auto 0; z-index: 999;} /*.event.about:before { position: absolute; bottom: -17px; right: 0; content: "~"; color: #FC5F45; }*/ /*#flood:after { content: ""; position: absolute; top: -1500px; left: 50%; height: 3000px; width: 4px; margin-left: -2px; background: rgba(0,0,0,0.2); z-index: -9; }*/ .event .text { display: none; } .event:hover .text { display: block; background: #8F65AB; col/or: #27292F; } .event:hover .text:after { border-top-color: #8F65AB; } .event:hover .date { color: #CFC1D7; } .event .bar { background: #4BCB9F;} .event:hover .bar { background: #8F65AB !important; } #davidandgoliath, #israelandjudahseparate, #commandtorebuildjerusalem, #danieltakentobabylon, #jonahtoninevah, #flood, #sodomdestroyed, #josephmadeprinceofegypt, #tencommandments, #prophecy1260begins, #prophecy1260ends, #luthers95thesis, #christcrucified, #papacywounded { z-index: 999; } #davidandgoliath .text, #israelandjudahseparate .text, #commandtorebuildjerusalem .text, #danieltakentobabylon .text, #jonahtoninevah .text, #flood .text, #sodomdestroyed .text, #josephmadeprinceofegypt .text, #tencommandments .text, #prophecy1260begins .text, #prophecy1260ends .text, #luthers95thesis .text, #christcrucified .text, #papacywounded .text { display: block; } #davidandgoliath .bar, #israelandjudahseparate .bar, #commandtorebuildjerusalem .bar, #danieltakentobabylon .bar, #jonahtoninevah .bar, #flood .bar, #sodomdestroyed .bar, #josephmadeprinceofegypt .bar, #tencommandments .bar, #prophecy1260begins .bar, #prophecy1260ends .bar, #luthers95thesis .bar, #christcrucified .bar, #papacywounded .bar { background: #5C9DF5; } #year0, #year200bc, #year200ad, #year1000ad, #year1000bc, #year2000ad, #year2000bc { display: none; } #prophecy1260ends { display: none; } /*#flood-line { content: ""; position: absolute; left: 28.115%; width: 3px; top: 0; height: 400px; background: rgba(0,0,0,0.2); z-index: 4; }*/ /* ================================================================================== */ /* == Prophecy Timeline ============================================================= */ /* ================================================================================== */ #prophecy-timeline { background: #2E3037; height: 104px; position: relative; display: none; } #prophecy-timeline li { } .prophecy { font-size: 14px; height: 24px; line-height: 24px; padding: 0 10px; position: absolute; color:#27292F; cursor: pointer; } .prophecy .title { font-weight: 600; } .prophecy .date { float: right; font-style: italic; font-size: 12px; } .prophecy.blue { background: #5C9DF5; } .prophecy.orange { background: #FC5F45; } .prophecy.green { background: #4BCB9F; } .prophecy.pink { background: #F55D9A; } .prophecy.yellow { background: #F5B55C; } .prophecy.gray { background: #999FA9; } .prophecy.red { background: #EF534D; } .prophecy.purple { background: #8F69AC; } .prophecy.teal { background: #3C99B8; } .prophecy.white { background: #EAEAEB; } .prophecy.black { background: #27292F; color: #EAEAEB; } .prophecy.pale { background: #bAbAbc; } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer { } #timeline-ruler { background: #2E3037; overflow: hidden; color: #999FA9; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); position: relative; z-index: 8; } #timeline-ruler li { float: left; width: 0.82644%; height: 50px; position: relative; text-align: center; font-size: 10px; padding-top: 15px; } #timeline-ruler li:before { content: ""; position: absolute; bottom: 0; left: 0%; margin-left: -1px; width: 2px; height: 15px; background: #595C63; } #timeline-ruler li span:before { content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -1px; width: 2px; height: 20px; background: #595C63; } #timeline-ruler li:after { content: ""; position: absolute; bottom: 0; left: 25%; margin-left: -1px; width: 2px; height: 10px; background: #595C63; } #timeline-ruler li span:after { content: ""; position: absolute; bottom: 0; left: 75%; margin-left: -1px; width: 2px; height: 10px; background: #595C63; } #timeline-ruler li:first-child, #timeline-ruler li:last-child { width: 0.41322%; } #timeline-ruler li:first-child:after, #timeline-ruler li:first-child span:after, #timeline-ruler li:last-child:after, #timeline-ruler li:last-child span:after { display: none; } .view2000 #timeline-ruler li:nth-child(2n+2) span, .view4000 #timeline-ruler li:nth-child(2n+2) span, .view6000 #timeline-ruler li:nth-child(2n+2) span { color: transparent; } /* ================================================================================== */ /* == Program ======================================================================= */ /* ================================================================================== */ #program-helper { padding: 20px; overflow: hidden; } #program-helper form { float: left; padding: 20px; } #program-helper form label { display: block; margin-bottom: 3px; } #program-helper input { color: #27292F; } #program-helper button { background: #5C9DF5; } #program-helper input, #program-helper button { border: none; padding: 0 10px; height: 30px; line-height: 30px; border-radius: 4px; } #program-helper .answer { margin-top: 2px; height: 24px;} #program { padding: 20px; overflow: hidden; } #program li { margin-bottom: 10px; height: 30px; line-height: 30px; } #program input { color: #27292F; } #program button { background: #5C9DF5; } #program input, #program button { border: none; padding: 0 10px; height: 30px; line-height: 30px; border-radius: 4px; vertical-align: middle; } #program input, #program button, #program select { width: 170px; } #program .radio { width: 20px; margin-left: 7px; } #program .program-block { float: left; } #program #output { float: left; background: #2E3037; padding: 20px; margin: 15px 0 0 40px; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); } /*Less tall than than 720px*/ @media only screen and (max-height: 720px) { html,body { min-height: 100%; } } @media only screen and (max-height: 720px) { #timeline-ruler li { height: 40px; padding-top: 8px; } #timeline-ruler li span:before { height: 14px; } #timeline-ruler li:before { height: 11px; } #timeline-ruler li:after, #timeline-ruler li span:after { height: 6px; } /*Sticky footer stuff*/ .sticky-wrap { margin-bottom: -125px;} .sticky-wrap:after { height: 125px; } .sticky-footer { height: 125px; } } @media only screen and (max-height: 680px) { .main { padding-top: 25px; } } /* ================================================================================== */ /* == Modal ========================================================================= */ /* ================================================================================== */ .modal { position: fixed; top: 50%; left: 50%; width: 630px; height: 330px; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; background: #2E3037; padding: 30px; box-shadow: 0px 6px 15px rgba(0,0,0,0.3); border-radius: 12px; -webkit-transform: scale(0.7) translateX(-50%) translateY(-50%); -moz-transform: scale(0.7) translateX(-50%) translateY(-50%); -ms-transform: scale(0.7) translateX(-50%) translateY(-50%); transform: scale(0.7) translateX(-50%) translateY(-50%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .modal-show { visibility: visible; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); -moz-transform: scale(1) translateX(-50%) translateY(-50%); -ms-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1 } .modal-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(27,28,33,0.9); transition: all 0.3s; } .modal-show ~ .modal-overlay { opacity: 1; visibility: visible; } .modal-close { position: absolute; top: 15px; right: 15px; cursor: pointer; } .modal h2 { font-size: 28px; text-align: center; margin-bottom: 0.7em; } .modal p { margin-bottom: 20px; font-size: 19px; line-height: 1.25em; } #start { background: #5C9DF5; border: none; border-radius: 5px; line-height: 44px; padding: 0 20px; font-weight: 600; text-transform: uppercase; position: static; display: block; margin: 27px auto 0 auto;} #start:hover { background: #4BCB9F; } #modal-about { width: 700px; height: 450px; } /* Hide scrollbars in webkit browsers */ ::-webkit-scrollbar { display: none; }