@import url('fonts/stylesheet.css');

body {
	font: 24px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px; top: 0px;
}

.presentation {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
display: block;
overflow: hidden;
background: #778;
}

.slides {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
display: block;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out;

/* so it's visible in the iframe. */
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);

}

.slide {
display: none;
position: absolute;
overflow: hidden;
width: 900px;
height: 700px;
left: 50%;
top: 50%;
margin-top: -350px;
background-color: #eee;
background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
background: -moz-linear-gradient(bottom, #bbd, #fff);
background: linear-gradient(bottom, #bbd, #fff);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

.slide:nth-child(even) {
-moz-border-radius: 20px 0;
-khtml-border-radius: 20px 0;
border-radius: 20px 0; /* includes Opera 10.5+ */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
}

.slide:nth-child(odd) {
-moz-border-radius: 0 20px;
-khtml-border-radius: 0 20px;
border-radius: 0 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
}

.slide p, .slide textarea {
font-size: 120%;
}

.slide .counter {
color: #999999;
position: absolute;
left: 20px;
bottom: 20px;
display: block;
font-size: 70%;
}

.slide.title > .counter,
.slide.segue > .counter,
.slide.mainTitle > .counter {
display: none;
}

.force-render {
display: block;
visibility: hidden;
}

.slide.far-past {
display: block;
margin-left: -3400px;
}

.slide.past {
visibility: visible;
display: block;
margin-left: -2400px;
}

.slide.current {
visibility: visible;
display: block;
margin-left: -450px;
}

.slide.future {
visibility: visible;
display: block;
margin-left: 1500px;
}

.slide.far-future {
display: block;
margin-left: 2500px;
}

body.three-d div.slides {
-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
-o-transform: translateX(50px) scale(0.8) rotateY(10deg);
transform: translateX(50px) scale(0.8) rotateY(10deg);
}

/* Content */

@font-face { font-family: 'Junction'; src: url(http://archive.apachecon.com/na2013/presentations/26-Tuesday/A_Patchy_Web/17:00-Introducing_Apache_Traffic_Server/src/Junction02.otf); }
@font-face { font-family: 'LeagueGothic'; src: url(http://archive.apachecon.com/na2013/presentations/26-Tuesday/A_Patchy_Web/17:00-Introducing_Apache_Traffic_Server/src/LeagueGothic.otf); }

header {
font-family: 'Droid Sans';
font-weight: normal;
letter-spacing: -.05em;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
left: 30px;
top: 25px;
margin: 0;
padding: 0;
font-size: 140%;
}

h1 {
font-size: 160%;
display: inline;
font-weight: normal;
padding: 0;
margin: 0;
}

h2 {
font-family: 'Droid Sans';
color: black;
font-size: 120%;
padding: 0;
margin: 20px 0;
}
    
h2:first-child {
margin-top: 0;
}

section, footer {
font-family: 'Droid Sans';
color: #3f3f3f;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
margin: 100px 30px 0;
display: block;
overflow: hidden;
}

footer {
font-size: 100%;
margin: 20px 0 0 30px;
}

#ats-footer {
color: black;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
position: absolute;
bottom: 0.5em;
left: 0.5em;
text-decoration: none;
}

#bw-footer {
font-family: 'Fortheloveofhate';
font-weight: normal;
letter-spacing: 6px;
font-size: 28px;
color: black;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
position: absolute;
bottom: 0.5em;
right: 0.5em;
}

#bw-footer:first-letter {
color: #FF6505;
}

a {
color: inherit;
display: inline-block;
text-decoration: none;
line-height: 110%;
border-bottom: 2px solid #3f3f3f;
}

ul {
margin: 0;
padding: 0;
}

button {
font-size: 100%;
}

pre button {
margin: 2px;
}

section.left {
float: left;
width: 390px;
}

section.right {
float: right;
width: 390px;
}

section.small {
font-size: 24px;
}

section.small ul {
margin: 0 0 0 15px;
padding: 0;
}

section.small li {
padding-bottom: 0;
}
    
section.middle {
line-height: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
height: 700px;
width: 900px;
}

pre {
text-align: left;
font-family: 'Droid Sans Mono', Courier;
font-size: 80%;
padding: 10px 20px;
background: rgba(255, 0, 0, 0.05);
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid rgba(255, 0, 0, 0.2);
}

pre select {
font-family: Monaco, Courier;
border: 1px solid #c61800;
}

input {
font-size: 100%;
margin-right: 10px;
font-family: Helvetica;
padding: 3px;
}
input[type="range"] {
width: 100%;
}

button {
margin: 20px 10px 0 0;
font-family: Verdana;
}

button.large {
font-size: 32px;
}

pre b {
font-weight: normal;
color: #c61800;
text-shadow: #c61800 0 0 1px;
/*letter-spacing: -1px;*/
}
pre em {
font-weight: normal;
font-style: normal;
color: #18a600;
text-shadow: #18a600 0 0 1px;
}
pre input[type="range"] {
height: 6px;
cursor: pointer;
width: auto;
}

div.example {
display: block;
padding: 10px 20px;
color: black;
background: rgba(255, 255, 255, 0.4);
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}

video {
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.2);
}

.key {
font-family: 'Droid Sans';
color: black;
display: inline-block;
padding: 6px 10px 3px 10px;
font-size: 100%;
line-height: 30px;
text-shadow: none;
letter-spacing: 0;
bottom: 10px;
position: relative;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: white;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
}

.key { font-family: Arial; }

:not(header) > .key {
margin: 0 5px;
bottom: 4px;
}

.two-column {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

.stroke {
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
} /* currently webkit-only */

.center {
text-align: center;
}

#presentation-counter {
color: #ccc;
font-size: 70%;
letter-spacing: 1px;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-align: center;
}

div:not(.current).reduced {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
} 

.no-transitions {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

.no-gradients {
background: none;
background-color: #fff;
}

ul.bulleted {
padding-left: 30px;
}