/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* HTML5BP:
   These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }


/**
 * @author Hakim El Hattab
 */


/*********************************************
 * FONT-FACE DEFINITIONS
 *********************************************/

@font-face {
	font-family: 'League Gothic';
	src: url('./league_gothic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/*********************************************
 * GLOBAL STYLES
 *********************************************/

html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;

	font-family: 'Crimson Text', Times, 'Times New Roman', serif;
	font-size: 36px;

	background: #fff;
	color: #222;

	width: 100%;
	height: 100%;

	background-image: -webkit-gradient(
		radial,
		50% 50%, 0,
		50% 50%, 1000,
		from(rgba(245,245,245,1.0)),
		to(rgba(100,100,100,1.0))
	);

	background-image: -moz-radial-gradient(
		50% 50% 90deg,
		rgba(245,245,245,1.0) 0%,
		rgba(100,100,100,1.0) 100%
	);

}


/*********************************************
 * HEADERS
 *********************************************/
h1, h2, h3, h4 {
	margin: 30px 0 10px 0;
	font-family: 'League Gothic', Arial, Helvetica, sans-serif;
	line-height: 0.9em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #222;
	text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child {
  margin-top: 0;
}

h1 { font-size: 136px; 	}
h2 { font-size: 76px;	}
h3 { font-size: 56px;	}
h4 { font-size: 36px;	}

h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
	color: #fff;
	text-shadow: 0px 0px 2px #fff, 0px 0px 2px #888,  0px 0px 3px #222;
}


/*********************************************
 * SLIDES
 *********************************************/
#main {
	position: absolute;
	width: 800px;
	height: 500px;

	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -260px;

	text-align: center;

	-webkit-perspective: 600px;
 	-webkit-perspective-origin: 50% 25%;
}

#main>section,
#main>section>section {
	display: none;

	position: absolute;
	width: 100%;
	min-height: 600px;

	-webkit-transform-style: preserve-3d;

	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

#main section.past {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(-100%, 0, 0)
						rotateY(-90deg)
						translate3d(-100%, 0, 0);
}

#main section.current {
	display: block;
}

#main section.future {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(100%, 0, 0)
						rotateY(90deg)
						translate3d(100%, 0, 0);
}

#main section>section.past {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(0, -50%, 0)
						rotateX(70deg)
						translate3d(0, -50%, 0);
}
#main section>section.future {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(0, 50%, 0)
						rotateX(-70deg)
						translate3d(0, 50%, 0);
}


/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/

#main>section {
	line-height: 1.2em;
	text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
	font-weight: 600;
}

ol {
	list-style: decimal;
	list-style-position: inside;
}

li, p {
	margin-bottom: 10px;
}

a {
	color: #1b6263;
	text-decoration: none;
	border-bottom: 1px dashed rgba(0,0,0,0.3);
	padding: 1px 3px;
}

	a:hover {
		color: #fff;
		background: #2fa794;
		text-shadow: none;
		border: none;
	}

small { font-size: 70%;}

img {
	margin: 30px 0 0 0;
	background: rgba(255,255,255,0.12);
	border: 4px solid #eee;

	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.key {
  line-height: 30px;
  color: #000;
  display: inline-block;
  padding: 6px 10px 3px 10px;
  text-shadow: none;
  letter-spacing: 0;
  bottom: 10px;
  position: relative;
  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px;
  vertical-align: sub;
  padding: 1px 6px 1px;
  margin: 0px 7px;
  font-size: 110%;
}

section img { width: 100% }

code, pre {
  background: hsla(171, 4%, 58%, 0.23);
  padding: 0 3px;
  border-radius: 3px;
  font-family: inconsolata, consolas, monaco, monospace;
  font-size: 80%;
  line-height: 1.1;
  color: hsl(171, 56%, 12%);
  text-transform: none;
}

pre {
   white-space: pre; white-space: pre-wrap; word-wrap: break-word;
   text-align:left;
   margin: 10px 0;
}

div[columns="2"] {
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  column-count: 2;
  column-gap: 15px;
}


/*********************************************
 * DSHAW MODS
 *********************************************/

section img.avatar, section img.highlight {
  width: auto;
  vertical-align: middle;
  margin: 0 3em;
}

section img.highlight {
  margin-top: .4em;
}

.intro {
  margin-top: 1.2em;
  font-size: 70%;
}

.key {
  padding: 1px 7px 1px;
  min-width: 28px;
  line-height: 38px;
  font-size: 100%;
}

.bullet-points, .bullet-points li {
  text-align: left;
}