/* BASIC */

* {
	margin:  0;
	padding: 0;
	border:  0;
}

html {
	height:100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

body {
	height:100%;
	background-color: white;
	color: black;
	font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

aside, footer, header {
	display: block;
}



/* CURTAINS.JS */

.curtains {
	width: 100%;
	z-index:1;
	position:relative;
}

.curtains>.curtain {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	z-index:1;
	background-color: black;
	background-clip: padding-box;
	background-attachment: fixed;
	background-size: 100vw 100vh; /*just rough defaults*/
	background-position: center top;
	
	border: 6px solid transparent; /* fixes some positioning issues for border image */
	border-image: url(img/shadow.png) 6 / 0 0 6px 0 / 0 stretch;
	-webkit-border-image: url(img/shadow.png) 6 / 0 0 6px 0 / 0px stretch;
	-moz-border-image: url(img/shadow.png) 6 / 0 0 6px 0 / 5px stretch;
	-o-border-image: url(img/shadow.png) 6 / 0 0 6px 0 / 5px stretch;
	
/*  	transition: transform 100ms;
	-ms-transition: -ms-transform 100ms;
	-moz-transition: -moz-transform 100ms;
	-webkit-transition: -webkit-transform 100ms; */
}

.curtains>.hidden {
	display: none;
}

.curtains>.curtain:first-child {
	z-index: 1000;
}

.curtains>.curtain:last-child {
	margin-bottom: 0 !important;
	border: none;
}

.fixed {
	position: fixed;
	
/* 	 transition: transform 100ms;
	-ms-transition: -ms-transform 100ms;
	-moz-transition: -moz-transform 100ms;
	-webkit-transition: -webkit-transform 100ms; */
}




/* TEXT & HEADERS */

h1, .sitetitle .h-big { /*only used for site title*/
	margin: 0;
	padding: 0;
	text-align: center;
	font: 70px/60px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-shadow: 0 -1px 1px rgba(255,255,255,0.3);
	-webkit-text-stroke: 0.2px;
}

.h-big img {
	width: 415px;
	margin-bottom: -5px;
}

h2, h3 {
	font-weight: normal;
}

header h3 {
	text-align: center;
}

p {
	padding: 1em 0 0 0;
}

address {
	margin: 2em 0;
	font: inherit;
	color: inherit;
}

dd {
	font-family: 'Courier New';
}

figure {
	text-align: right;
}

figcaption {
	display: inline-block;
	padding: 5px 10px;
	text-align: left;
	background-color: transparent;	
	color: white;
	font-size:14px;
}

figcaption.fixed.bottom {
	bottom: 65px;
}

a {
	text-decoration: none;
	color: inherit;
}

footer a, .footnote a {
	text-decoration: underline;
}



/* VARIOUS CLASSES */

.background {
	display: block;
	top: 0; left: 0;
	width: 100%;
	z-index: -1;
}

section .background {
	display: none;
}

.banner {
	width: 800px;
	margin: 0 -400px;
	padding: 0 50%;
}

.center {
	text-align: center;
}

.corner {
	top: 0; right: 0;
	width: 410px;
	padding: 30px 20px 0; 
}

.corner>* {
	float: right; 
	clear: both;
	width: 100%;
}

.darkbg, .scrollbg {
	color: white;
}

.dbline {
	display: inline-block;
	font-size: 0.48em;
	line-height: 0.8em;
}

.footnote {
	margin-top: 1em;
}

.hidden {
	display: none;
}

.hr hr {
	height: 1px;
	background-color: white; 
}

.justifier {
	display: inline-block;
	width: 100%;
	height: 0;
}

.loading {
	position: fixed;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
	z-index: 2000;
	background-color: white;
}

.loading img {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -25px;
}

.lightbg {
	color: white;
}

.lightbg>[class|=column]>:not(header) {
	background-color: rgba(0,0,0,0.3);
}

.midbg p.step, .midbg h4.step, .midbg figure.step {
	background-color: rgba(255,255,255,0.3);
}

.midbg .step:last-child, .lightbg .step:last-child {
	padding-bottom: 1em;
}

.note {
	font-size: 12px;
}

.sidebar {
	color: white;
	text-align: right;
}

.sitetitle {
	text-align: center;
}

.sitetitle .h-small {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 14px;
}

.spacer {
	display: block;
}

.thin {
	font-weight: 100;
}

.vcenter {
	top: 50%;
}



/* COLUMN LAYOUTS */

[class|=column] {
	position: relative;
	top: 0; left: 0;
	width: 50%;
	min-width: 425px;
	margin: auto;
	padding-bottom: 500px;
}

[class|=column]>* {
	width: 400px;
	margin: auto;
	padding: 1em 3% 0;
}

[class|=column] figure {
	display: block;
	position: relative;
	width: 250px;
	text-align: center;
}

[class|=column] figure img {
	max-width: 100%;
	margin-left: -8px;
	border: 8px solid black;
}

[class|=column] figcaption {
	position: absolute;
	bottom: 10px;
	left: 15px;
	font-size: 75%;
}

[class|=column]>header {
	padding: 200px 0 1em;
}

[class|=column] header p {
	text-align: center;
}

[class|=column] h2 {
	font: 80px/1.2em 'League Gothic', sans-serif;
	text-align: center;
	text-transform: uppercase;	
}

[class|=column] h3 {
	font: 18px 'Noticia Text', Cambria, serif;
	text-transform: uppercase;
}

[class|=column] .h-small {
	font-size: 24px;
}

[class|=column] .h-big {
	font-size: 80px;
}

[class|=column] p {
	font-family: 'Noticia Text', Cambria, serif;
}

[class|=column]>p:first-of-type:first-letter {
	float: left;
	font-size: 4.5em;
	line-height: 0.8;
	padding-right: 6px;
	margin-top:-2px;
}

.column-left {
	width: 55%;
	margin: 0 auto 0 0;
}

.column-right {
	margin: 0 0 0 auto;
}

.column-semiright {
	padding-left: 6%;
}

.column-center {
	min-width: 640px;
}

.column-center * {
	width: 600px;
}

.column-wideright {
	width: 58%;
	max-width: 640px;
	margin: 0 5% 0 auto;
}

.column-wideright>* {
	width: 96%;
	padding: 2% 2% 0;
	color: white;
}

[class|=column]>:last-child {
	padding-bottom: 1em;
}

section:last-child [class|=column]>:last-child {
	margin-bottom: 250px;
}



/*SPECIFICS: HOME*/

#home {
	z-index: 1000 !important;
	background-color: white;
}

#home hgroup {
	position: absolute;
	top: 50%; left:50%;
	max-height: 360px;
	width: 600px;
	margin: -175px -300px 0px; 
	text-align: center;
}

#home h1 {
	margin-top: 30px;
}

#home a {
	text-decoration: underline;
}

#home .textspacer {
	display: none;
	padding-top: 1em;
	color: rgb(102,7,37);
	font-size: 32px;
}

#slider {
	padding: 2em 0 1em;
}

#slider, #slider .viewport {
	position: relative;
	height: 2em;
	width: 100%;
	overflow: hidden;
}

#slider .overview {
	width: 100%;
	position: absolute;
	list-style: none; 
}

#slider li {
	padding: 0.5em;
}

.tickercontainer {
	position: relative;
	width: 400px;
	height: 2em;
	margin: 2em auto 1em;
	overflow: hidden;
}

.tickercontainer .mask {
	position: relative;
	top: 0.5em;
	overflow: hidden;
}

ul.newsticker { 
	position: relative;
	list-style-type: none;
	-webkit-transition: all 0s linear;
	-moz-transition: all 0s linear;
	-o-transition: all 0s linear;
	transition: all 0s linear;
}

ul.newsticker li {
	float: left;
	padding-right: 15px;
}



/*SPECIFICS: CONTENTS*/

#contents .background {
	padding-bottom: 169px;
	background-color: white; /*less obvious if the toc screws up*/
}

#contents .spacer {
	display: none;
	width: 100%;
	padding: 0;
}

#contents .fakeh1 {
	margin: 0;
}

#contents h2 {
	display: block;
	padding: 7px 10px 5px;
	text-transform: uppercase;
	background-color: white;
	font-size: 16px;
	font-weight: bold;
}

#contents .toc {
	-webkit-transform: translateZ(0);
	bottom: 0; left: 0;
	width: 96%;
	height: 129px;
	padding: 20px 2%;
	color: black;
	background-color: white;
}

.toc h3 {
	margin-left: -4px;
	padding: 0 6px 0 4px;
	color: rgb(102,7,37);
	text-align: left;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

.toc>ul {
	width: 100%;
	margin-bottom: 35px;
	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
	text-align: justify;
	line-height: 0;
	font-size: 0;
}

.toc li {
	display: inline-block;
	vertical-align: top;
	line-height: normal;
	position: relative;
}

.toc a {
	display: block;
	max-width: 240px;
	padding: 8px 10px 12px;
	font-size: 14px;
}

.toc li a:hover {
	background-color:lightgray;
}

.toc p {
	padding: 2px 10px 0;
	color: grey;
	text-align: left; /* because the toc is text-align: justify to space the blocks out nicely */
}

.toc .dropdown {
	position: relative;
}

.toc .dropdown:hover ul{
	visibility: visible;
}

.toc .dropdown ul {
	visibility: hidden;
	position: absolute;
	bottom: 100%;
	width: 100%;
	max-width: 270px;
	border-bottom: 1px solid grey;
	background-color: white;
}

.toc .dropdown li {
	display: block;
	border-top: 1px solid grey;
}

.editorial h3 {
	font-weight: bold;
	font-size: 16px;
	margin-top: 5px;
}

.editorial {
	position: absolute;
	top: 30px; bottom: 179px; left: 30px;
	width: 50%;
	min-width: 440px;
	max-height: 600px;
	color: white;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: auto;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.editorial>* {
	padding: 1em 20px 0;
	background-color: rgba(0,0,0,0.3);
}

.editorial>h3 {
	margin-top: 0;
	padding-top: 20px;
}

.editorial>:last-child {
	padding-bottom: 20px;
}

@media screen and (max-width: 800px) {
  .toc p {
  	display: none;
  }
}

@media screen and (max-width: 900px) {
  .corner {
  	left: 480px;
  }
}



/* SPECIFICS: ROCKNROLL */

#rocknroll {
	min-height: 3800px;
}

#rocknroll header {
	width: 500px;
	padding-top: 150px;
}

#rocknroll h2 {
	font-size: 50px;
	line-height: 0.7;
}

#rocknroll h3 {
	margin: 20px 0 5px;
}

#rocknroll .h-big {
	line-height: 1;
}

#rocknroll header p {
	padding: 0;
	margin-top: 1.5em;
	font-size: 15px;
	font-style: italic;
}



/* SPECIFICS: FRANCEJAPAN */

#francejapan header {
	padding-top: 150px;
}

#francejapan .h-big {
	font-size: 1.7em;
}

#francejapan h3 {
	line-height: 16px;
	padding: 10px 0 30px;
}

#francejapan header p {
	padding: 0;
	font-size: 16px;
}

#francejapan figcaption {
	color: black;
}

#francejapan [class|=column]>:last-child {
	padding-bottom: 0;
}

#francejapan .spacer {
	visibility: hidden;
	height: 500px;
}

.fourknives {
	top: 96px;
	right: 50px;
	left: auto;
	width: 520px;
	font-size: 16px;
	color: white;
}


/* SPECIFICS: POCKET */

#pocket header {
	padding-top: 150px;
}

#pocket h2 {
	width: auto;
	line-height: 1;
}

#pocket h3 {
	margin-top: 10px;
}

#pocket .background {
	width: 100%;
}




/* SPECIFICS: KITCHEN */

#kitchen h2 {
	margin: 40px auto -20px;
	font: 28px/1 'Noticia Text', Cambria, serif;
	text-align: left;
}

#kitchen h2 img {
	margin-top: -5px;
}

#kitchen p:last-child {
	padding-bottom: 40px;
	margin-bottom: 40px;
}



/* SPECIFICS: KITCHEN-LINEUP */

#kitchen-lineup .wrapper {
	position: relative;
	max-width: 1200px;
	margin: 30px auto 0;
}

#kitchen-lineup .subwrapper {
	position: relative;
	top: -20px;
	width: 100%;
	padding-top: 20px;
	overflow-x: auto;
	overflow-y: visible;
}

#kitchen-lineup h2 {
	float: left;
	margin: 10px 0 0 20px;
	font: 48px/1.2 'Noticia Text', Cambria, serif;
	text-transform: uppercase;
}

.knifelist {
	position: relative;
	bottom: 35px;
	clear: both;
	width: 1200px;
	padding-top: 12px;
	margin-bottom: -35px;
	overflow: hidden;
	text-align: justify;
}

.knifelist img {
	display: inline;
	padding-left: 10px;
	opacity: 0.825;
	vertical-align: bottom;
}

.knifelist img:last-of-type {
	margin-right: 20px;
}

.knifelist img:hover {
	opacity: 1;
}

.knifelist canvas {
	position: absolute;
	top: 0; left: 0;
	z-index: -1;
}

.knifelist .typeleader {
	margin-left: 20px;
}

.knifelist .axislabel {
	display: inline-block;
	width: 1em;
	padding: 28px 0 10px; /*assuming tallest img is 308px*/
	font: bold 14px 'Noticia Text', Cambria, serif;
	list-style-type: none;
	text-align: right;
	vertical-align: bottom;
}

.knifelist .axislabel * {
	height: 45px; /*height of staff lines*/
}

.knifeinfo {
	float: right;
	width: 60%; height: 220px;
	overflow-y: auto;
	font-size: 100%;
	line-height: 1.3em;
}

.knifeinfo * {
	margin: 10px 0;
	float: left;
}

.knifeinfo dt {
	clear: left;
	width: 15%; min-width: 85px; 
	font-size: 2em;
	font-weight: bold;
	font-family: 'Mrs Saint Delafield';
	-webkit-text-stroke: 0.2px;
}

.knifeinfo dd {
	max-width: 80%;
}

@media screen and (min-height: 630px) and (min-width: 1001px) {

	#kitchen-lineup .wrapper {
		top: 50%;
		height: 620px;
		margin-top: -320px;
	}

	.knifeinfo {
		height: 35%;
	}
	
	.subwrapper {
		position: absolute;
		bottom: auto;
		top: 38%;
	}
} 

@media screen and (max-width: 1000px) {
	
	dl.knifeinfo {
		float: left;
		width: 90%;
		min-width: 450px;
		margin: 20px 5% 0;
	}
  
	.knifelist {
		float: left;
		position: relative;
		top: auto;
	}
}



/* SPECIFICS: ABOUT */

#about header {
	padding-top: 150px;
	color: black;
}

#about section, #about footer {
	background-color: rgba(0,0,0,0.4);
}

#about h2 {
	font: 44px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-align: left;
	text-transform:lowercase;
}

#about h3 {
	font-size: 16px;
	font-weight: bold;
}

#about p {
	padding: 0 0 1em;
}

#about p.footnote {
	margin-top: 0;
	padding-top: 1em;
	border-top: 1px solid white;
}

#about footer {
	margin-bottom: 150px;
	padding: 1em 2% 2%;
	font-family: 'Noticia Text', Cambria, serif;
}

#about .spacer {
	display: block;
}

#about .spacer img {
	width: 200px;
}



/* LINK BAR */

.linkbar {
	display: table !important;
	position: fixed;
	bottom: 0; left: 0;
	z-index: 999;
	width: 100%;
	min-width: 1020px;
	padding: 10px 10px;
	background-color: rgba(255,255,255,0.90);
}

.linkbar>div {
	display:table-cell;
	padding: 0px 20px;
	
}

.linkbar>div>* {
	display: inline-block;
	vertical-align: middle;
}

.linkbar>div:first-child {
	border-right: 1px solid grey;
}

.linkbar>div:last-child {
	text-align: right;
}

.linkbar p {
	margin: 0;
	padding: 0px 5px;
}

.linkbar a {
	color: rgb(102,7,37);
}

.linkbar h2 {
	padding: 5px;
	color: black;
	font-weight: bold;
}

.linkbar .icon {
	width: 24px;
	padding: 4px;
	opacity: 0.6;
}

.linkbar .icon:hover {
	border-radius:8px;
	background-color: grey;
}

.linkbar .tocreturn {
	position: absolute;
	bottom: 4px;
	left: 36px;
	font-size: 10px;
	color: rgba(102,7,37,0.8);
}


/*free open-source font*/
@font-face {
    font-family: 'League Gothic';
    src: url('fonts/leaguegothic-regular-webfont.eot');
    src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'League Gothic';
    src: url('fonts/leaguegothic-italic-webfont.eot');
    src: url('fonts/leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/leaguegothic-italic-webfont.woff') format('woff'),
         url('fonts/leaguegothic-italic-webfont.ttf') format('truetype'),
         url('fonts/leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg');
    font-weight: normal;
    font-style: italic;

}