/* 	-- 	CERN 2019
		-- 	Supplemental website for the rebuilding
				of WorldWideWeb NeXT application
				Built February, 2019


                      `.-:/+++++++++++++++++++++++++++++++++++++++++++++++`
                  .:oo+/:-.``````.-:/oso/-````````````````````````````````
               .+s+-`                  `-+s+.
             :s+-                   ``.....:os:                   .:`
           -s+.               .-/+ooo+////++:-+s- `               /y
         `os.             `-+s+:.`             .s+-+/.            s+
        .s+             .+s/.                    +s.-+s/`        `y:
       `s+            -oo-                        +s` `/s/`      :y`
       oo            ./-                           oo   `/s:     +s
      :y.   .-----` ------``---.-.`  .`      `.    .y:    .so`   y/
      so  /+.    ..`y-   ` .y`   -y- /o/`    -/     os     `oo` -y-
     `y: +s        `y:.... .y.``./+` /..++`  -/     /y-      oo /y
     `y: os        `y-```` .y:.+o`   /.  .++.-/     :yo      `y:so
      y/ `o/`      `y-     .y.  .o/` /.    .os/     /yy-      /yy:
      oo   .:-----``/:----``/`    ::`-`      .-     oooo      .yy.
      -y-       --                                 -y--y.     `ys
       os`      oo                                `s+  s+     `y+
       .yo`     /y                               `oo   :y.    -y-
        +ys.    .y-                             .s+     s+    os
        `yss:    +s`                           /s:      :y`  -y-
         /y-+s:  `s+                         :s+`       `y/ .s/
         `s+ .+s/.`s+                     ./so.          /y`s+
          :y.  `-+s+/-                `-+sys-            `y/.
           so      .:+oo+/::----::/+oo+/ss:             .-+s
           -y-         `://-::::--.` `/s/`            -oo-.y:
            os           :oo/.      :s+`          `-+s+.   +s
            `-`            `:+so/`-so.       `.:/oo/-      .y-
                               `-oo-:oooooooo+/:.           os
                              `+s-                          -y-
                            `/s:                             oo
                           :s/`                              -y.
                         :s+`                                 s+
                       -oo.                                   :y.
                      :+-                                      +:


*/

@font-face {
	font-family: 'NeXT Big_Bold';
	src:    url('/css/fonts/CERN-www-headline-bold.woff') format('woff'),
					url('/css/fonts/CERN-www-headline-bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

* {
	margin:0;
	padding:0;
}

::selection {
	background: #aaaaaa;
}

html {
	padding: 2.5vw;
	border: 10px solid #aaaaaa;
	webkit-font-smoothing: none;
	-moz-osx-font-smoothing: none;
	font-smooth: never;
}
body {
	font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	background-color: #ffffff;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
}

sup,
sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub {
	top: 0.4em;
}

.components { margin-bottom: 2em; margin-top: 2em; padding-bottom: 2em; border-bottom: 1px solid #ddd; }

a {
	color: #000;
}
img,
video {
  max-width: 100%;
}
figure { margin-bottom: 1em; display: inline-block; }
figure.double img { width: 49%; float: left; }
figure.double img:first-child { margin-right: 2%; }
h1, h2, h3, h4, h5 {
	font-size: 1em;
}
h1 {
	font-size: 1.5em;
	line-height: 1.2;
	font-family: 'NeXT Big_Bold';
	font-weight: bold;
}
h2 {
	line-height: 1.2em;
}
hr {
	margin: 2em auto 2em auto;
	border: 0;
	border-bottom: 1px solid #ddd;
	width: 70%;
	text-align: center;
}
ul, ol {
	margin-left: 1.5em;
	margin-bottom: 1em;
}
ul {
	list-style: circle;
}
pre {
	display: inline-block;
	width: 100%;
	padding: 1em;
	margin-bottom: 1em;
	font-size: .8em;
}
code {
	display: inline;
}
pre, code {
	box-sizing: border-box;
	background-color: #666;
	color: #fff;
	font-family: monospace;
	overflow: scroll;
}
pre::-webkit-scrollbar { /* WebKit */
  width: 0px;
}

section p {
	margin-bottom: 1em;
}
section img {
	width: 100%;
}
header {
	grid-column: span 2;
	border-bottom: 1px solid #ddd;
	padding-bottom: 1em;
	margin-bottom: 1em;
	max-width: 80em;
}
nav {
	margin: 1em 0;
}
nav ul {
	list-style: none;
	margin: 0;
}
nav ul li {
	display: inline-block;
	margin-right: 1em;
}
@media (min-width: 50em) {
	main {
		display: grid;
		grid-template-columns: minmax(20em, 1fr) minmax(20em, 1fr);
		grid-gap: 5em;
		max-width: 80em;
	}
	main.nogrid {
		display: block;
	}
}
footer {
  grid-column: span 2;
  margin-top: 1em;
  border-top: 1px solid #ddd;
  padding-top: 1em;
  margin-top: 1em;
}
footer .cernlogo {
	float: right;
	width: 70px;
}

video { width: 100%; border: 3px solid #000; }

.button {
	box-sizing: border-box;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	font-size: 0.86em;
	background-color: #09c;
	color: #fff;
	padding: 0.3333em 0.6666em;
	border-top: 1px solid #6cf;
	border-left: 1px solid #6cf;
	border-bottom: 1px solid #069;
	border-right: 1px solid #069;
	margin-bottom: 1.5em;
}
.button:hover,
.button:focus {
	border-top-color: #069;
	border-left-color: #069;
	border-bottom-color: #6cf;
	border-right-color: #6cf;
}
@media all and (max-width: 30em) {
	header .button {
		width: 100%;
	}
}
@media all and (min-width: 44em) {
	header .button {
		float: right;
	}
}

.constrained {
	max-width: 35em;
}
@media all and (min-width: 35em) and (min-height: 35em) {
	.constrained {
		max-width: 100%;
		columns: 2;
		column-gap: 5em;
	}
	.constrained p,
	.constrained ol {
		break-inside: avoid;
	}
}
.history {
	margin-top: 2em;
	margin-bottom: 2em;
	background-color: #fbfbfb;
	padding: 1em;
	border: 1px solid #ddd;
}
ul.history  {
	padding-left: 2em;
	margin-left: 0;
}
.history ol,
.history ul {
	margin-bottom: 0;
}
.history ol {
	list-style: none;
	border-left: 1px dotted #ddd;
}
.history ol li {
	margin-left: 0;
	padding-left: 1em;
}
.history ol a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
}
.history ol a:hover,
.history ol a:focus{
	background-color: #f7f7f7;
}
.history ol ol {
	list-style: none;
	margin: 0;
}
.history ol ol li a::before {
	content: "↳ ";
}
.history time {
	float: right;
	font-size: .8em;
	color: #555;
}

.fullbleed {
	grid-column: 1 / span 2;
	height: auto;
	max-width: 100%;
	padding-top: 1em;
}
.fullbleed svg {
	max-width: 100%;
	height: auto;
}
.fullbleed img { width: 100%; }

/* 	colophon circles
		------------------ */
ul.palette {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0.5rem 0 0 0;
}
ul.palette li {
	flex-basis: 45%;
	max-width: 25px;
	text-align: center;
	margin: 0 1rem 0 0;
}
ul.palette li::before {
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	background-color: #000;
	margin-bottom: 0.5em;
	border-radius: 20px;
	border: 1px solid #000;
}
ul.palette li:nth-child(2)::before {
	background-color: #555;
}
ul.palette li:nth-child(3)::before {
	background-color: #AAA;
}
ul.palette li:nth-child(4)::before {
	content: none;
}

ul.palette li:nth-child(4) a::before {
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	background-color: #FFF;
	margin-bottom: 0.5em;
	border-radius: 20px;
	border: 1px solid #000;
}
ul.palette li:nth-child(4) a {
	display: block;
	position: relative;
	overflow: hidden;
}
ul.palette li:nth-child(4) span {
	position: absolute;
	left: -50em;
}