/** * MUI Colors module */ /* dancing-script-regular - latin */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400; src: url("../fonts/dancing-script-v8-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Dancing Script Regular"), local("DancingScript-Regular"), url("../fonts/dancing-script-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/dancing-script-v8-latin-regular.woff2") format("woff2"), url("../fonts/dancing-script-v8-latin-regular.woff") format("woff"), url("../fonts/dancing-script-v8-latin-regular.ttf") format("truetype"), url("../fonts/dancing-script-v8-latin-regular.svg#DancingScript") format("svg"); /* Legacy iOS */ } /* dancing-script-700 - latin */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 700; src: url("../fonts/dancing-script-v8-latin-700.eot"); /* IE9 Compat Modes */ src: local("Dancing Script Bold"), local("DancingScript-Bold"), url("../fonts/dancing-script-v8-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/dancing-script-v8-latin-700.woff2") format("woff2"), url("../fonts/dancing-script-v8-latin-700.woff") format("woff"), url("../fonts/dancing-script-v8-latin-700.ttf") format("truetype"), url("../fonts/dancing-script-v8-latin-700.svg#DancingScript") format("svg"); /* Legacy iOS */ } /* architects-daughter-regular - latin */ @font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; src: url("../fonts/architects-daughter-v6-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Architects Daughter"), local("ArchitectsDaughter"), url("../fonts/architects-daughter-v6-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/architects-daughter-v6-latin-regular.woff2") format("woff2"), url("../fonts/architects-daughter-v6-latin-regular.woff") format("woff"), url("../fonts/architects-daughter-v6-latin-regular.ttf") format("truetype"), url("../fonts/architects-daughter-v6-latin-regular.svg#ArchitectsDaughter") format("svg"); /* Legacy iOS */ } /* inconsolata-regular - latin */ @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; src: url("../fonts/inconsolata-v15-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url("../fonts/inconsolata-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/inconsolata-v15-latin-regular.woff2") format("woff2"), url("../fonts/inconsolata-v15-latin-regular.woff") format("woff"), url("../fonts/inconsolata-v15-latin-regular.ttf") format("truetype"), url("../fonts/inconsolata-v15-latin-regular.svg#Inconsolata") format("svg"); /* Legacy iOS */ } /* inconsolata-700 - latin */ @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 700; src: url("../fonts/inconsolata-v15-latin-700.eot"); /* IE9 Compat Modes */ src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url("../fonts/inconsolata-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/inconsolata-v15-latin-700.woff2") format("woff2"), url("../fonts/inconsolata-v15-latin-700.woff") format("woff"), url("../fonts/inconsolata-v15-latin-700.ttf") format("truetype"), url("../fonts/inconsolata-v15-latin-700.svg#Inconsolata") format("svg"); /* Legacy iOS */ } /* montserrat-300 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url("../fonts/montserrat-v10-latin-300.eot"); /* IE9 Compat Modes */ src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v10-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v10-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v10-latin-300.woff") format("woff"), url("../fonts/montserrat-v10-latin-300.ttf") format("truetype"), url("../fonts/montserrat-v10-latin-300.svg#Montserrat") format("svg"); /* Legacy iOS */ } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url("../fonts/montserrat-v10-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v10-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v10-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v10-latin-regular.woff") format("woff"), url("../fonts/montserrat-v10-latin-regular.ttf") format("truetype"), url("../fonts/montserrat-v10-latin-regular.svg#Montserrat") format("svg"); /* Legacy iOS */ } /* open-sans-condensed-300 - latin */ @font-face { font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; src: url("../fonts/open-sans-condensed-v10-latin-300.eot"); /* IE9 Compat Modes */ src: local("Open Sans Cond Light"), local("OpenSans-CondensedLight"), url("../fonts/open-sans-condensed-v10-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-condensed-v10-latin-300.woff2") format("woff2"), url("../fonts/open-sans-condensed-v10-latin-300.woff") format("woff"), url("../fonts/open-sans-condensed-v10-latin-300.ttf") format("truetype"), url("../fonts/open-sans-condensed-v10-latin-300.svg#OpenSansCondensed") format("svg"); /* Legacy iOS */ } /* pangolin-regular - latin */ @font-face { font-family: 'Pangolin'; font-style: normal; font-weight: 400; src: url("../fonts/pangolin-v1-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Pangolin Regular"), local("Pangolin-Regular"), url("../fonts/pangolin-v1-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/pangolin-v1-latin-regular.woff2") format("woff2"), url("../fonts/pangolin-v1-latin-regular.woff") format("woff"), url("../fonts/pangolin-v1-latin-regular.ttf") format("truetype"), url("../fonts/pangolin-v1-latin-regular.svg#Pangolin") format("svg"); /* Legacy iOS */ } /* roboto-mono-regular - latin */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: url("../fonts/roboto-mono-v4-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Roboto Mono"), local("RobotoMono-Regular"), url("../fonts/roboto-mono-v4-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-mono-v4-latin-regular.woff2") format("woff2"), url("../fonts/roboto-mono-v4-latin-regular.woff") format("woff"), url("../fonts/roboto-mono-v4-latin-regular.ttf") format("truetype"), url("../fonts/roboto-mono-v4-latin-regular.svg#RobotoMono") format("svg"); /* Legacy iOS */ } /* amatic-sc-regular - latin */ @font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 400; src: url("../fonts/amatic-sc-v9-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Amatic SC Regular"), local("AmaticSC-Regular"), url("../fonts/amatic-sc-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/amatic-sc-v9-latin-regular.woff2") format("woff2"), url("../fonts/amatic-sc-v9-latin-regular.woff") format("woff"), url("../fonts/amatic-sc-v9-latin-regular.ttf") format("truetype"), url("../fonts/amatic-sc-v9-latin-regular.svg#AmaticSC") format("svg"); /* Legacy iOS */ } /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url("../fonts/open-sans-v13-latin-300.eot"); /* IE9 Compat Modes */ src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/open-sans-v13-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-300.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-300.woff") format("woff"), url("../fonts/open-sans-v13-latin-300.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-300.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url("../fonts/open-sans-v13-latin-300italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("../fonts/open-sans-v13-latin-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-300italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-300italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-300italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-300italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url("../fonts/open-sans-v13-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Open Sans"), local("OpenSans"), url("../fonts/open-sans-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-regular.woff") format("woff"), url("../fonts/open-sans-v13-latin-regular.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url("../fonts/open-sans-v13-latin-italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/open-sans-v13-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url("../fonts/open-sans-v13-latin-600.eot"); /* IE9 Compat Modes */ src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/open-sans-v13-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-600.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-600.woff") format("woff"), url("../fonts/open-sans-v13-latin-600.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-600.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url("../fonts/open-sans-v13-latin-600italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic"), url("../fonts/open-sans-v13-latin-600italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-600italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-600italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-600italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-600italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url("../fonts/open-sans-v13-latin-700.eot"); /* IE9 Compat Modes */ src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/open-sans-v13-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-700.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-700.woff") format("woff"), url("../fonts/open-sans-v13-latin-700.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-700.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url("../fonts/open-sans-v13-latin-700italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/open-sans-v13-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-700italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-700italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-700italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-700italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url("../fonts/open-sans-v13-latin-800.eot"); /* IE9 Compat Modes */ src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("../fonts/open-sans-v13-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-800.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-800.woff") format("woff"), url("../fonts/open-sans-v13-latin-800.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-800.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-800italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url("../fonts/open-sans-v13-latin-800italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), url("../fonts/open-sans-v13-latin-800italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-800italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-800italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-800italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-800italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* pt-sans-regular - latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: url("../fonts/pt-sans-v8-latin-regular.eot"); /* IE9 Compat Modes */ src: local("PT Sans"), local("PTSans-Regular"), url("../fonts/pt-sans-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-sans-v8-latin-regular.woff2") format("woff2"), url("../fonts/pt-sans-v8-latin-regular.woff") format("woff"), url("../fonts/pt-sans-v8-latin-regular.ttf") format("truetype"), url("../fonts/pt-sans-v8-latin-regular.svg#PTSans") format("svg"); /* Legacy iOS */ } /* pt-sans-700 - latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: url("../fonts/pt-sans-v8-latin-700.eot"); /* IE9 Compat Modes */ src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/pt-sans-v8-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-sans-v8-latin-700.woff2") format("woff2"), url("../fonts/pt-sans-v8-latin-700.woff") format("woff"), url("../fonts/pt-sans-v8-latin-700.ttf") format("truetype"), url("../fonts/pt-sans-v8-latin-700.svg#PTSans") format("svg"); /* Legacy iOS */ } /* pt-sans-italic - latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: url("../fonts/pt-sans-v8-latin-italic.eot"); /* IE9 Compat Modes */ src: local("PT Sans Italic"), local("PTSans-Italic"), url("../fonts/pt-sans-v8-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-sans-v8-latin-italic.woff2") format("woff2"), url("../fonts/pt-sans-v8-latin-italic.woff") format("woff"), url("../fonts/pt-sans-v8-latin-italic.ttf") format("truetype"), url("../fonts/pt-sans-v8-latin-italic.svg#PTSans") format("svg"); /* Legacy iOS */ } /* pt-sans-700italic - latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: url("../fonts/pt-sans-v8-latin-700italic.eot"); /* IE9 Compat Modes */ src: local("PT Sans Bold Italic"), local("PTSans-BoldItalic"), url("../fonts/pt-sans-v8-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-sans-v8-latin-700italic.woff2") format("woff2"), url("../fonts/pt-sans-v8-latin-700italic.woff") format("woff"), url("../fonts/pt-sans-v8-latin-700italic.ttf") format("truetype"), url("../fonts/pt-sans-v8-latin-700italic.svg#PTSans") format("svg"); /* Legacy iOS */ } /* pt-serif-regular - latin */ @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; src: url("../fonts/pt-serif-v8-latin-regular.eot"); /* IE9 Compat Modes */ src: local("PT Serif"), local("PTSerif-Regular"), url("../fonts/pt-serif-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-serif-v8-latin-regular.woff2") format("woff2"), url("../fonts/pt-serif-v8-latin-regular.woff") format("woff"), url("../fonts/pt-serif-v8-latin-regular.ttf") format("truetype"), url("../fonts/pt-serif-v8-latin-regular.svg#PTSerif") format("svg"); /* Legacy iOS */ } /* pt-serif-italic - latin */ @font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; src: url("../fonts/pt-serif-v8-latin-italic.eot"); /* IE9 Compat Modes */ src: local("PT Serif Italic"), local("PTSerif-Italic"), url("../fonts/pt-serif-v8-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-serif-v8-latin-italic.woff2") format("woff2"), url("../fonts/pt-serif-v8-latin-italic.woff") format("woff"), url("../fonts/pt-serif-v8-latin-italic.ttf") format("truetype"), url("../fonts/pt-serif-v8-latin-italic.svg#PTSerif") format("svg"); /* Legacy iOS */ } /* pt-serif-700 - latin */ @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; src: url("../fonts/pt-serif-v8-latin-700.eot"); /* IE9 Compat Modes */ src: local("PT Serif Bold"), local("PTSerif-Bold"), url("../fonts/pt-serif-v8-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-serif-v8-latin-700.woff2") format("woff2"), url("../fonts/pt-serif-v8-latin-700.woff") format("woff"), url("../fonts/pt-serif-v8-latin-700.ttf") format("truetype"), url("../fonts/pt-serif-v8-latin-700.svg#PTSerif") format("svg"); /* Legacy iOS */ } /* pt-serif-700italic - latin */ @font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 700; src: url("../fonts/pt-serif-v8-latin-700italic.eot"); /* IE9 Compat Modes */ src: local("PT Serif Bold Italic"), local("PTSerif-BoldItalic"), url("../fonts/pt-serif-v8-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/pt-serif-v8-latin-700italic.woff2") format("woff2"), url("../fonts/pt-serif-v8-latin-700italic.woff") format("woff"), url("../fonts/pt-serif-v8-latin-700italic.ttf") format("truetype"), url("../fonts/pt-serif-v8-latin-700italic.svg#PTSerif") format("svg"); /* Legacy iOS */ } body { font-family: 'PT Sans', sans-serif; min-height: 740px; background: -webkit-radial-gradient(white, rgba(156, 165, 33, 0.07)); background: -moz-radial-gradient(white, rgba(156, 165, 33, 0.07)); background: -ms-radial-gradient(white, rgba(156, 165, 33, 0.07)); background: -o-radial-gradient(white, rgba(156, 165, 33, 0.07)); background: radial-gradient(white, rgba(156, 165, 33, 0.07)); } .bubble { padding: 20px; background: #FFCC80; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; font-family: "Architects Daughter", cursive; } .bubble:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #FFCC80; display: block; width: 0; z-index: 1; left: -15px; top: 60px; } /*some general things*/ sub, sup { /* Specified in % so that the sup/sup is the right size relative to the surrounding text */ font-size: 70% !important; /* Zero out the line-height so that it doesn't interfere with the positioning that follows */ line-height: 0; /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */ position: relative; /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */ vertical-align: baseline; } sup { /* Move the superscripted text up */ top: -0.5em; } sub { /* Move the subscripted text down, but only half as far down as the superscript moved up */ bottom: -0.25em; } .red { color: #D50000; } .green { color: #00C853; } .blue { color: #2962FF; } .emph { font-style: italic; } .fontlarger { font-size: larger; } .textright { text-align: right; } .textlarge { font-size: 52px; } .title { font-size: 70px; } .title small { font-size: 45px; margin-left: 15px; } .title small i.fa { font-size: 69%; margin-right: 7px; } .step { font-size: 30px; } .step h1 { font-size: 72px; } .step h2 { font-style: italic; font-size: 40px; } .xpath { font-family: 'Inconsolata', monospace; font-weight: 700; } ul ul { margin-left: 20px; list-style: circle !important; } .boxshadow { box-shadow: 3px 3px 3px #333333; } /*Now the CSS*/ * { margin: 0; padding: 0; } .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #757575; width: 50%; height: 20px; } .tree li::after { right: auto; left: 50%; border-left: 2px solid #757575; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child { padding-top: 0; } /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after { border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before { border-right: 2px solid #757575; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #757575; width: 0; height: 20px; } .tree li a { border: 2px solid #424242; padding: 5px 10px; text-decoration: none; color: #666; /*font-family: arial, verdana, tahoma;*/ font-family: "Inconsolata"; font-size: 30px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; z-index: 20; } /*step 12*/ .step.userwishes.past, .step.userwishes.future { opacity: 0; transition: opacity 1s; } .bubble.wishes { left: 295px; top: 94px; position: relative; width: 500px; height: 272px; } .bubble.wishes ol { list-style: lower-alpha; margin-left: 40px; } div#lookatdom p, #lookatdom img { box-shadow: 2px 2px 2px #333333; border: 1px solid #333333; opacity: 0.9; } /*lookatdom*/ #lookatdomimg { background-image: url(img/lebowskistarsdom.png); height: 500px; width: 100%; top: 213px; left: -199px; /*position: absolute;*/ } #lookatdom img { width: 100%; margin-top: 35px; } #lookatdom { text-align: center; } #lookatdom.future { opacity: 0; } #lookatdom p { background-color: rgba(255, 255, 255, 0.7); padding-bottom: 20px; padding-top: 20px; } #lookatdom img { opacity: 0.9; } /*lookatdomoutro*/ #lookatdomoutro.future { opacity: 0; } #lookatdomoutro { box-shadow: 5px 5px 5px #888888; border: 1px solid gray; background-color: rgba(255, 255, 255, 0.7); } /*julianne example*/ #julianneexample.future, #julianneexample.past { opacity: 0; } #julianneexample { text-align: center; } #julianneexample small { font-size: 30px; font-style: italic; } #example3 { width: 219px; height: 43px; position: absolute; top: -114px; left: 48px; opacity: 0.7; } #julianneexample i { font-family: "Dancing Script", cursive; font-weight: bolder; } #twoexamples i { font-family: "Dancing Script", cursive; font-weight: bolder; } /*sleeping*/ #sleeping { background-image: url(../img/addon-sleeping-800px.png); width: 400px; height: 400px; position: absolute; left: 277px; top: -39px; z-index: -1; } #firstproblemgettingthere ul { margin-top: 182px; } #firstproblemgettingthere i.fa { display: none; } #usexpathssteps.future .characters .c { opacity: 0; } #usexpathssteps.active .characters .c { transition-duration: 0s; transition-property: opacity; opacity: visible; opacity: 1; } #usexpathssteps.active .characters .c:nth-child(1) { transition-delay: 1.4s; } #usexpathssteps.active .characters .c:nth-child(2) { transition-delay: 1.8s; } #usexpathssteps.active .characters .c:nth-child(3) { transition-delay: 2.2s; } #usexpathssteps.active .characters .c:nth-child(4) { transition-delay: 2.6s; } #usexpathssteps.active .characters .c:nth-child(5) { transition-delay: 3s; } #usexpathssteps.active .characters .c:nth-child(6) { transition-delay: 3.4s; } #usexpathssteps.active .characters .c:nth-child(7) { transition-delay: 3.8s; } #usexpathssteps.active .characters .c:nth-child(8) { transition-delay: 4.2s; } #usexpathssteps.active .characters .c:nth-child(9) { transition-delay: 4.6s; } #usexpathssteps.active .characters .c:nth-child(10) { transition-delay: 5s; } #usexpathssteps.future .xpath span, #usexpathssteps.active .xpath span { width: 0px; opacity: 0; } #usexpathssteps.active .xpath span { -webkit-animation-name: toggle; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; display: inline-block; } #usexpathssteps.active .xpath span:nth-child(1) { -webkit-animation-delay: 6s; } #usexpathssteps.active .xpath span:nth-child(2) { -webkit-animation-delay: 7s; } #usexpathssteps.active .xpath span:nth-child(3) { -webkit-animation-delay: 8s; } #usexpathssteps.active .xpath span:nth-child(4) { -webkit-animation-delay: 9s; } #usexpathssteps.active .xpath span:nth-child(5) { -webkit-animation-delay: 10s; } @keyframes toggle { from { width: 0px; opacity: 0; } to { width: initial; opacity: 1; } } /*zoom that mother*/ #zoomthatmother i { font-size: 7em; color: rgba(0, 230, 118, 0.8); /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/ } #zoomthatmother span { margin-left: -526px; } #zoomthatmother.future { opacity: 0; } #zoomthatmother .textblock { position: absolute; text-align: left; top: 48px; font-size: larger; font-family: 'Montserrat'; width: 500px; left: 303px; box-shadow: 5px 5px 15px black; padding-left: 70px; background-color: rgba(0, 230, 118, 0.8); padding-top: 20px; padding-bottom: 20px; border-radius: 12px; } .notmatchingspanrule { color: #E53935; } .userexampletext { color: #76FF03; } .undesirednodetext { color: #EF5350; } .desirednodetext { color: #76FF03; } .spanparenttext { color: #7CB342; } .divgrandparenttext { color: #558B2F; } /*boldtree1*/ #treestep1.active #boldtree .correspondnode { font-weight: bold; background-color: #76FF03; } #treestep1.future { opacity: 0; } /*treestep2*/ #treestep2.future { opacity: 0.9; } #treestep2.active { opacity: 1; transition: opacity 1s; } #treestep2.active #boldtree2 .circle { background-color: #76FF03; font-weight: bold; } #treestep2 .textbox { position: absolute; left: 400px; width: 250px; } #treestep2.past .textbox, #treestep2.future .textbox { opacity: 0; transition: opacity 1s; } #treestep2.active .textbox { opacity: 1; transition: opacity 1s; } #treestep2.past { opacity: 1; } .impress-on-treestep1 #treestep2, .impress-on-predicateenrichment #treestep2, .impress-on-predicateenrichment2 #treestep2, .impress-on-boldstep #treestep2 { opacity: 0; } /*treestep 3*/ #treestep3 .textbox { width: 60%; margin-left: 50%; background-color: lightgray; position: absolute; top: -222px; left: -79px; } /*first substep for the tree, giving info*/ .treesubstep .textbox { margin-left: 200px; opacity: 0; position: absolute; } #treesubstep1 .textbox { top: -200px; } /* at treesubstep1, always show treestep2*/ .impress-on-treesubstep1 #treestep2, .impress-on-treesubstep2 #treestep2, .impress-on-treesubstep3 #treestep2, .impress-on-treesubstep4 #treestep2, .impress-on-treesubstep5 #treestep2, .impress-on-treesubstep6 #treestep2, .impress-on-treesubstep7 #treestep2 { opacity: 1; } #treesubstep1 .textbox { transition: opacity 1s 1s; } .impress-on-treesubstep1 #treesubstep1 .textbox, .impress-on-treesubstep2 #treesubstep2 .textbox, .impress-on-treesubstep3 #treesubstep3 .textbox, .impress-on-treesubstep4 #treesubstep4 .textbox, .impress-on-treesubstep5 #treesubstep5 .textbox, .impress-on-treesubstep6 #treesubstep6 .textbox, .impress-on-treesubstep7 #treesubstep7 .textbox { opacity: 1; /*transition:opacity 2s 0s;*/ } .impress-on-treesubstep2 #boldtree2 .bodynode { background-color: #00B0FF; } .impress-on-treesubstep3 #boldtree2 .divnode { background-color: #00B0FF; } .impress-on-treesubstep4 #boldtree2 .spannode { background-color: #00B0FF; } .impress-on-treesubstep5 #boldtree2 .bnode { background-color: #00B0FF; } .impress-on-treesubstep6 #boldtree2 .indicatednode { background-color: #689F38; color: whitesmoke; } .impress-on-treesubstep6 #boldtree2 .overflownode { background-color: #D32F2F; color: whitesmoke; } .impress-on-treesubstep6 #boldtree2 .desirednode { background-color: #76FF03; color: #333333; } .impress-on-treesubstep1 #boldtree2 .desirednode { background-color: #76FF03; transition: background-color 2s; color: #333333; } .impress-on-treesubstep1 #boldtree2 .undesirednode { background-color: #EF5350; transition: background-color 2s; color: #333333; } .impress-on-treesubstep7 #boldtree2 .desirednode { background-color: #76FF03; transition: background-color 2s; color: #333333; } .impress-on-treesubstep7 #boldtree2 .spanparent { background-color: #7CB342; transition: background-color 2s; color: whitesmoke; } .impress-on-treesubstep7 #boldtree2 .divgrandparent { background-color: #558B2F; transition: background-color 2s; color: whitesmoke; } .impress-on-treesubstep7 #boldtree2 .notmatchingspanrulenode { background-color: #E53935; transition: background-color 2s; color: whitesmoke; } /*stepping through the generalised xpath*/ .currentxpathstep { color: #00B0FF; } /*this is the color for the text on substep6 */ #treesubstep6 .textbox .desired { color: #76FF03; font-style: italic; } #treesubstep6 .textbox .indicated { color: #689F38; font-style: italic; } #treesubstep6 .textbox .overflow { color: #D32F2F; font-style: italic; } @-webkit-keyframes movietitletranslator { 0% { transform: translate3d(0px, 0px, 0px); /*z-index: 0;*/ opacity: 0; } 5% { /*transform: translate3d(0px, 0px, 0px);*/ /*z-index: 0;*/ opacity: 1; transform: rotateX(0deg); } 97% { opacity: 1; } 100% { transform: translate3d(0px, 20px, 300px) rotateX(5deg); /*z-index: 20;*/ opacity: 0; } } .movietitlewrapper { position: absolute; /*transform: rotateY(-20deg);*/ transform-origin: top left; opacity: 0; left: 25%; -webkit-animation-name: movietitletranslator; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; /*-webkit-animation-timing-function: ease-in-out;*/ -webkit-animation-timing-function: linear; width: 400px; height: 300px; position: absolute; } .movietitleimg { max-width: 100%; max-height: 100%; /* bottom: 0px; */ position: absolute; margin-right: auto; margin-left: auto; left: 0; right: 0; bottom: 0; box-shadow: 0px 3px 3px #333333; } #movietitleswapper { width: 100%; height: 400px; margin-top: 30px; } #movietitle1 { -webkit-animation-delay: 0s; } #movietitle2 { -webkit-animation-delay: -2s; } #movietitle3 { -webkit-animation-delay: -4s; } #movietitle4 { -webkit-animation-delay: -6s; } #movietitle5 { -webkit-animation-delay: -8s; } .imdbpageimg { position: absolute; } #problem3intro3 { text-align: center; opacity: 1; } /*do the fucked up transition for the imdbpageimgs*/ @-webkit-keyframes imdbpagetranslator { 0% { transform: translate3d(0px, 0px, -400px) rotateY(-22deg); z-index: 0; opacity: 0; } 5% { opacity: 1; } 97% { opacity: 1; } 100% { transform: translate3d(-80px, 80px, -300px) rotateY(-18deg); z-index: 10; opacity: 0; } } #imdbpageswapper { height: 400px; } .imdbpageimg { width: 100%; transform: rotateY(-20deg); transform-origin: top left; opacity: 0; -webkit-animation-name: imdbpagetranslator; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } #imdbpage1 { -webkit-animation-delay: 0s; } #imdbpage2 { -webkit-animation-delay: -3s; } #imdbpage3 { -webkit-animation-delay: -6s; } #imdbpage4 { -webkit-animation-delay: -9s; } #imdbpage5 { -webkit-animation-delay: -12s; } #problem3intro4 { opacity: 1; } #steplinks a { pointer-events: auto; color: gray; margin-left: 4px; font-size: 12px; } #steplinks { z-index: 9000; opacity: 0; position: absolute; width: 100%; top: 0px; } #steplinks:hover { opacity: 1; } /*first step: header*/ #firststep { text-align: center; font-family: "Montserrat", sans-serif; } #firststep .headertitle { font-size: 120%; font-weight: 300; } #firststep .of { font-size: 80%; font-weight: 300; } #firststep .name { font-style: italic; font-size: 130%; } #firststep .phdtitle { font-size: 140%; font-family: "Montserrat", sans-serif; margin-top: 42px; } #docluster .card { background-color: #1E88E5; opacity: 0.8; } /*two examples step*/ .starhighlight { background-color: #EEFF41; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); height: 23px; position: absolute; transition-delay: 20s; transition: opacity; transition-duration: 2s; } .impress-on-continuecluster #solution3 li:nth-child(1), .impress-on-continuecluster #solution3 li:nth-child(3), .impress-on-continuecluster #solution3 li:nth-child(5), .impress-on-docluster #solution3 li:nth-child(1), .impress-on-docluster #solution3 li:nth-child(3), .impress-on-docluster #solution3 li:nth-child(5) { background-color: #81D4FA; } .impress-on-continuecluster #solution3 li:nth-child(2), .impress-on-docluster #solution3 li:nth-child(2) { background-color: #E6EE9C; } .impress-on-continuecluster #solution3 li:nth-child(4), .impress-on-continuecluster #solution3 li:nth-child(6), .impress-on-docluster #solution3 li:nth-child(4), .impress-on-docluster #solution3 li:nth-child(6) { background-color: #FFCC80; } #docluster.past, #docluster.future { opacity: 0; } #htmlisbuilt.future, #htmlisbuilt.past { opacity: 0; } #htmlisbuilt.active { opacity: 1; transition: opacity 2s; } #continuecluster #curlybracket { font-size: 200px; position: absolute; right: 310px; top: -150px; color: #333333; font-family: 'Open Sans Condensed', sans-serif; } .impress-on-continuecluster #solution3 { opacity: 1; } #continuecluster .card { width: 452px; position: absolute; top: -85px; left: 7px; } #continuecluster.past, #continuecluster.future { opacity: 0; } #continuecluster.active { opacity: 1; } .xpathhighlight { color: #43A047; } #laststep { text-align: center; font-family: 'Montserrat'; } #laststep p:nth-child(1) { font-size: 130%; } #laststep img { height: 500px; margin-top: 10px; } .impress-on-laststep .step { opacity: 0; } .conclusionstep .problemheader, .conclusionstep .solutionheader { float: left; margin-right: 10px; } .conclusionstep .problemheader { color: #FFA726; } .conclusionstep .solutionheader { color: #66BB6A; } .conclusionstep .cardtitle { font-size: 150%; } .conclusionstep, #conclusionstep { font-family: 'Montserrat', sans-serif; font-weight: 300; } #mergeresult2 p:first-child { font-size: 140%; } #mergeresult2 > ul > li { font-size: 120%; } /*# sourceMappingURL=pres2.css.map */