@charset "UTF-8";

/*

    THEME NAME: Bandit (Jade Revision)
     THEME URI: http://informationhighwayman.com/

   DESCRIPTION: The Information Highwayman theme.

        AUTHOR: D Bnonn Tennant
    AUTHOR URI: http://informationhighwayman.com

If you'd like to use this stylesheet, please ask first: bnonn@informationhighwayman.com. */


/* ======= RESET ======= */

html{ -webkit-font-smoothing:antialiased; }
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	border:			0;
	margin:			0;
	outline:		0;
	padding:		0;
	vertical-align:		baseline;
}
body{
	color:			#444;
	font:			normal normal normal 16px/25px "Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	min-width:		60ex;
	text-align:		justify;

	/* BASELINE GRID is 25px */
}
header,nav,section,article,dialog,figure,aside,footer{
	display:		block;
	margin:			0;
	padding:		0;
}


/* ======= END RESET ======= */


::-moz-selection{
	background:		#ffee68;
	color:			#872718;
	text-shadow:		none;
}
::selection{
	background:		#ffee68;
	color:			#872718;
	text-shadow:		none;
}
a{
	-moz-border-radius:	.3em;
	-webkit-border-radius:	.3em;
	border-radius:		.3em;
	text-decoration:	none;
}
a:hover{
	-webkit-transition:	text-shadow .15s ease-in;
	text-shadow:		2px 3px 6px #872718;
	text-decoration:	none;
	transition:		text-shadow .15s ease-in;
}
a:visited{
	text-decoration:	line-through;
}
abbr{
	cursor:			help;
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	text-transform:		lowercase;
}
aside{
	margin:0 auto;
}
blockquote,
h2,
h3,
h4,
li,
ol,
p,
textarea,
ul{ 
	max-width:		580px;
	quotes:			none;
}
dfn{
	cursor:			help;
	border-bottom:		1px dashed #cb461d;
	font-style:		inherit;
}
em, i{
	font-family:		"Justus Italic","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
}
input[type="search"], input[type="text"], textarea{
	background:		transparent;
	border:			2px solid transparent;
	border-bottom:		2px dotted #cb461d;
	color:			#cb461d;
	font-family:		"Qlassik Medium Regular","Tahoma","Geneva","DejaVu Sans Condensed",sans-serif;
	font-size:		1.1em;
	padding:		.2em;
}
input[type="search"], input[type="text"]{
	width:			11em;
}
input[type="search"]:hover, input[type="text"]:hover, textarea:hover{
	-moz-border-radius:	.2em;
	-webkit-border-radius:	.2em;
	-webkit-transition:	background .15s ease-in;
	background:		rgba(255,251,238,0.75);
	border:			2px solid #cb461d;
	border-radius:		.2em;
	transition:		background .15s ease-in;
}
input[type="search"]:focus, input[type="text"]:focus, textarea:focus{
	-moz-border-radius:	.2em;
	-moz-box-shadow:	1px 2px 12px #872718;
	-webkit-border-radius:	.2em;
	-webkit-box-shadow:	1px 2px 12px #872718;
	-webkit-transition:	-webkit-box-shadow .15s ease-in;
	background:		rgba(255,251,238,0.9);
	border:			2px solid #cb461d;
	border-radius:		.2em;
	box-shadow:		1px 2px 12px #872718;
	transition:		box-shadow .15s ease-in;
}
input[type="submit"]{
	background-color:	transparent;
	border:			none;
}
q{
	color:			#444;
}
q:after,
q:before{
	content:		"";
}
q+cite{
	font-style:		normal;
}
blockquote>cite:before, q+cite:before{
	content:		" —";
}
strong, b{
	font-family:		"Justus Bold","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
}


/* ======= CONTAINER AND HEADER ======= */


#page{ 
	/* container element for the items on the page */ 
	font-size:		16px;
	margin:			0 auto;
	padding-right:		50px;
	width:			900px;
}
#page>header{
	/* container element for h1, tagline, logo etc */
	font-weight:		400;
	margin:			10px auto;
	overflow:		hidden;
	text-align:		center;
	width:			900px;
}
#page>header>nav{
	/* main navigation */
	background:		transparent url("images/separator-small.png") center top no-repeat;
	border-bottom:		2px dotted #F2CA99;
	display:		inline-block;
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		19px;
	margin-top:		1.1em;
	padding:		1.3em .5em .5em 0;
	top:			0;
}
#page>header>nav li{
	display:		inline;
	float:			left;
	padding:		0 .3em;
}
#page>header>nav>ul>li>a{
	color:			#b81600;
	display:		block;
	float:			left;
	height:			1.4em;
	letter-spacing:		.1em;
	margin:			.1em;
	padding:		.2em .5em;
}
#page>header>nav li a:visited{
	text-decoration:	none;
}
#page>header>nav li a:hover,
#page>header>nav li a.current{
	-moz-border-radius:	5px;
	-webkit-border-radius:	5px;
	background:		#ffee68 url("images/gold.png");
	border-radius:		5px;
	color:			#b81600;
}
#page>header>nav li a:active{
	background:		#872718 url("images/ink.png");
	color:			#ffee68;
	text-decoration:	none;
	text-shadow:		0 0 4px #ffee68;
}
#page hgroup h1{
	/* only the masthead is contained in an hgroup, so it's easy to select this way */
	-moz-border-radius:	0;
	-webkit-border-radius:	0;
	background:		transparent url("images/masthead.png") left top no-repeat;
	border-radius:		0;
	height:			370px;
	position:		fixed;
	left:			50px;
	text-indent:		-9999em;
	top:			0;
	width:			45px;
	z-index:		801;
}
#page hgroup h2{
	/* "The dashing & debonair" etc */
	font-family:		"Justus Italic","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		16px;
	font-style:		italic;
	font-weight:		normal;
	margin:			0 auto;
	text-shadow:		0 0 2px #fff;
}
#page a#logo{
	/* The tagline is headed up by the logo, which has a rollover effect */
	background:		transparent url("images/logo.png") left 0 no-repeat;
	display:		block;
	height:			128px;
	margin:			.45em auto;
	text-indent:		-9999em;
	width:			128px;
}
#page a#logo:hover{
	/* logo rollover */
	background:		transparent url("images/logo.png") left -128px no-repeat;
}


/* ======= MAIN CONTENT ======= */


article, section{
	/* content container on each page */
	margin:			0 auto;
	overflow:		hidden;
	width:			800px;
}
article a:link, section a:link,
article a:visited, section a:visited{
	-moz-border-radius:	.2em;
	-webkit-border-radius:	.2em;
	background:		#ffee68 url("images/gold.png");
	border-radius:		.2em;
	color:			#b81600;
	padding:		.2em;
}
article a:active, section a:active{
	background:		#872718 url("images/ink.png");
	color:			#ffee68;
	text-shadow:		0 0 4px #ffee68;
}
article>header{
	text-align:		center;
}
article>header h1{
	display:		inline-block;
	margin:			-3em auto -3em auto;
	text-align:		center;
	text-indent:		-9999em;
}
article>header+p:first-letter,
article>h1+p:first-letter,
article p#meta+p:first-letter,
article>header+img+p:first-letter,
section>h1+p:first-letter,
section>header+p:first-letter,
.lede:first-letter,
.drop-versal{
	color:			#be4e27; /* was #b81600 */
	float:			left;
	font-size:		50px;
	line-height:		43px;
	margin:			5px 5px 0 0;
}
article>header+p:first-line,
article>h1+p:first-line,
article p#meta+p:first-line,
article>header+img+p:first-line,
section>h1+p:first-line,
section>header+p:first-line,
.lede:first-line,
.versal{
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	letter-spacing:		.05em;
}
article p#meta:first-letter,
aside+section>p+p:first-letter,
section h2+p:first-letter{
	/* prevent meta text getting a drop-versal */
	float:			none;
	font-size:		16px;
	line-height:		25px;
	margin:			0;
}
article blockquote,
article li,
article ol,
article p, section p,
article textarea,
article ul{
	margin:			0 auto;
	text-align:		justify;
	text-indent:		0;
}
article blockquote{
	color:			#b81600;
	font-size:		.95em;
	margin-top:		16px;
	max-width:		530px;
}
article blockquote:before{
	color:			#b81600;
	content:		"“";
	float:			left;
	font-family:		"BodoniFLF Bold","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		3.3em;
	line-height:		.9em;
	margin-left:		-.7em;
}
article code{
	-moz-border-radius:	.1em;
	-webkit-border-radius:	.1em;
	background-color:	#fffbee;
	border-radius:		.1em;
	color:			#222;
	font-family:		"Verily Serif Mono","Courier New","Courier","FreeMono","Nimbus Mono L","Liberation Mono",monospace;
	font-size:		.9em;
}
article h1, section h1,
article h2,
article h3,
article h4{
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		1.05em;
	font-weight:		normal;
	margin:			24px auto auto auto;
}
article h1, section h1{
	background:		transparent url("images/separator-small.png") center bottom no-repeat;
	color:			#b81600;
	font-size:		22px;
	letter-spacing:		.1em;
	max-width:		600px;
	padding-bottom:		25px;
	text-align:		center;
}
article h1 a:link, section h1 a:link,
article h1 a:visited, section h1 a:visited{
	text-decoration:	none;
}
article h2{
	color:			#b81600;
	margin-top:		25px;
	text-align:		center;
}
article h3{
	padding-top:		.1em;
}
article h3,
article h4{
	color:			#b81600;
}
article h4{
	font-family:		"Justus Italic","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		16px;
	font-style:		italic;
}
article img{
	-moz-border-radius:	4px;
	-webkit-border-radius:	4px;
	background:		#fffbee;
	border:			1px solid #f2ca99;
	border-radius:		4px;
	margin:			24px auto auto 108px;
	max-width:		570px;
	padding:		10px;
}
article li, section li{
	color:			#b81600;
}
article ol, section ul,
article p, section p,
article ul, section ul{
	margin-top:		25px;
}
article ul li, section ul li{
	list-style-image:	url("images/bullet.png");
}
article textarea{
	border-top:		2px solid #F2CA99;
	font-family:		"Qlassik Medium Regular","Tahoma","Geneva","DejaVu Sans Condensed",sans-serif;
	height:			5em;
	line-height:		1.4em;
	margin:			auto auto auto 110px;
	padding:		.5em;
	width:			600px;
}
article textarea{
	margin:			0;
}

footer{
	background:		#FFFBEE;
	border-top:		2px dotted #F2CA99;
	margin:			2em auto 0 auto;
	padding-left:		0;
	text-align:		center;
	width:			600px
}
footer a:link,
footer a:visited{
	color:			#cb461d;
	padding:		.2em;
}
footer a:hover{
	background:		#ffee68 url("images/gold.png");
}
footer dfn{
	border-bottom:		none;
}
footer p{
	background:		transparent url("images/separator-small.png") center top no-repeat;
	color:			#cb461d;
	font-size:		.9em;
	margin:			1.3em auto 0 auto;
	padding:		1.65em;
}

section article h2 a:link,
section article h2 a:visited{
	background:		none;
	text-decoration:	none;
}
section article h2 a:hover{
	background:		#ffee68 url("images/gold.png");
}
section article h2 a:active{
	background:		#872718 url("images/ink.png");
}
section article p{
	/* this is actually only used for the excerpts on category pages */
	font-family:		"Justus Italic","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
 	font-style: 	 	italic;
}
section header img{
	-moz-border-radius:	20px;
	-webkit-border-radius:	20px;
	background:		#fffbee;
	border:			1px solid #f2ca99;
	border-radius:		20px;
	height:			200px;
	margin:			0 auto auto 108px;
	padding:		10px;
	width:			570px;
}


/* ======= THE INDIVIDUAL PAGES ======= */


/* Don't come whinging about better ways to organize CSS. This is the way that makes sense to me */


#About{
	background:		#fff url("images/about-bg.jpg") right top no-repeat;
}
#About article header h1{
	background:		transparent url("images/about-h1.png") center top no-repeat;
	height:			172px; /* image height is 158px but we need to achieve the 32px of paragraph padding */
	margin-left:		0;
	width:			646px;
}
#ace-o-spades{
	/* container for Ace o' Spades popup signup form */
	-moz-border-radius:	1em;
	-moz-box-shadow:	1px 2px 20px #872718;
	-webkit-border-radius:	1em;
	-webkit-box-shadow:	1px 2px 20px #872718;
	background:		#fff url("images/ace-o-spades-title.jpg") center top no-repeat;
	border:			2px solid #7c0000;
	border-radius:		1em;
	box-shadow:		1px 2px 20px #872718;
	left:			50%;
	margin-left:		-198px;
	margin-top:		-230px;
	overflow:		auto;
	padding-top:		72px;
	position:		absolute;
	top:			50%;
	width:			396px;
}
#ace-o-spades a{
	height:			24px;
	margin:			0;
	padding:		0;
	width:			24px;
}
#ace-o-spades a:link, #ace-o-spades a:visited{
	/* the only anchor here is the close button */
	background:		transparent url("images/close.png") left -24px no-repeat;
	position:		absolute;
	text-indent:		-999em;
	right:			5px;
	top:			5px;
}
#ace-o-spades a:hover{
	background:		url("images/close.png") left 0 no-repeat;
}
#ace-o-spades fieldset{ margin-bottom:48px; }
#ace-o-spades input{ margin: 0; }
#ace-o-spades p, .response{
	margin:			28px 0 0 24px;
	padding:		0 28px 0 28px;
	width:			292px;
}
.articles, .rants{
	background:		#fff url("images/articles-bg.jpg") right top no-repeat;
}
#Contact,
#Subscribe,
.briefs{
	background:		#fff url("images/contact-bg.jpg") right top no-repeat;
}
#Contact article header h1{
	background:		transparent url("images/contact-h1.png") center top no-repeat;
	height:			174px; /* image height is 169px */
	margin-left:		-6px;
	width:			628px;
}
#four-oh-four{
 	background:		#fff url("images/home-bg.jpg") right top no-repeat;
}
#four-oh-four article header h1{
	background:		transparent url("images/404-h1.png") center top no-repeat;
	height:			118px; /* image height is 109px */
	margin-left:		-6px;
	width:			646px;
}
#general{
	/* for all other pages that aren't these special ones listed here */
	background:		#fff url("images/home-bg.jpg") right top no-repeat;
}
#Home, #Cheat-sheet, .squeeze, .reports{
 	background:		#fff url("images/home-bg.jpg") right top no-repeat;
}
#Home article header h1{
	background:		transparent url("images/home-h1.png") center top no-repeat;
	height:			219px; /* image height is 204px */
	margin-left:		-2px;
	width:			646px;
}
.freebies,
#Testimonials{
 	background:		#fff url("images/testimonials-bg.jpg") right top no-repeat;
}
#Work,
.case-studies{
	background:		#fff url("images/work-bg.jpg") right top no-repeat;
}
#Work article header h1{
	background:		transparent url("images/work-h1.png") center top no-repeat;
	height:			164px; /* image height is 156px */
	margin-left:		0;
	width:			637px;
}


/* ======= OTHER IDS ======= */


#meta a:link,
#meta a:visited{
	/* meta info for things like tags and date on post pages */
	background:		1px;
	padding:		0;
}
#meta a:hover{
	background:		#ffee68 url("images/gold.png");
}
#meta a:active{
	background:		#872718 url("images/ink.png");
}

img#heroshot{ background:none; border:none; float:left; margin:.5em .5em .5em -2em; padding:0; position:absolute; }
img#signature{ background:none; border:0; clear:both; margin:25px auto auto auto; }


/* ======= CLASSES ======= */


a.cta:link,
a.cta:visited,
.cta input,
input[type="submit"]{
	/* that's Call To Action for the uninitiated */
	background: 		transparent url("images/cta-wide.png") left 0 no-repeat; 
	color:			#ffee68;
	display:		block;
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		1.3em;
	height:			25px;
	margin:			1.3em auto auto auto;
	padding:		6px 0;
	text-decoration:	none;
	text-shadow:		1px 2px 8px #ffee68;
	width:			286px;
}
a.cta:hover,
.cta input:hover,
input[type="submit"]:hover{
	-webkit-transition:	text-shadow .15s ease-in;
	background: 		transparent url("images/cta-wide.png") left -37px no-repeat;
	color:			#b81600;
	text-shadow:		1px 2px 4px #872718;
	transition:		text-shadow .15s ease-in;
}
.cta strong{
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-weight:		normal;
}
a.folio-item:link{
	background:		none;
	float:			right;
	margin:			1.4em 100px .5em .5em;
}
a.folio-item img{
	background:		transparent;
	height:			150px;
	opacity:		.6;
	width:			150px;
}
a.mini-cta:link, a.mini-cta:visited{
	background:		#872718 url("images/ink.png");
	color:			#ffee68;
	text-decoration:	none;
}
a.mini-cta:hover{
	text-shadow:		0 0 4px #ffee68;
}
.amp,
abbr[title="et"]{
	font-family:		"Miama","Warnock Pro","Goudy Old Style","Palatino","Book Antiqua",serif;
	font-size:		2em;
	line-height:		.6em;
}
.centered{
	padding:		0;
	text-align:		center;
}
.clear{
	clear:			both;
}
.cta input,
input[type="submit"]{
	cursor:			pointer;
	height:			37px;
}
.fancy{
	/* quote elements with pretty quote marks etc, as used on eg /work */
	font-family:		"Justus Italic","Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-style:		italic;
}
.fancy:before{
	color:			#b81600;
	content:		"“";
	float:			left;
	font-family:		"BodoniFLF Bold","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-size:		3.3em;
	font-style:		normal;
	line-height:		.9em;
	margin-left:		-.7em;
}
.fancy<ul{
	/* we don't want any bullets getting in the way of our nice quote marks */
	list-style-type:	none;
}
.fancy em, .fancy i,
.fancy strong, .fancy b{
	/* we need this because fancy elements are naturally italicized, so "italics" should be Roman, and given that Justus has no bold italics, heavy face should be converted to Roman as well */
	font-family:		"Justus","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	font-style:		normal;
	font-weight:		normal;
}
.full-line-breaks li{
	margin-top:		1em;
}
.grey{ color:#444; }
.hidden{
	display:		none !important;
}
.highlight, .response{
	/* for stuff that should stand out, and the MailChimp responses on the signup form */
	color:		#b81600;
}
.input-list input{
	vertical-align:		middle;
}
.no-bullets{
	/* non-semantic classes, blah blah, whinge, moan, bitch. You find a better way. */
	list-style-type:	none;
}
.no-bullets li{
	margin-top:		1em;
}
.post-script{
	/* pretty formatting for additional text after the body copy (and especially after the CTA) */
	color:			#b81600;
	font-size:		.9em;
	margin-top:		2em;
}
input[type="search"]{
	position:		absolute;
	right:			.5em;
	text-align:		right;
	top:			.5em;
}
.separator{
	/* for elements which need a separator fluron above them */
	background:		transparent url("images/separator-small.png") center top no-repeat;
	margin-top:		1.6em;
	padding-top:		2em;
}
.separator-bottom{
	background:		transparent url("images/separator-small.png") center bottom no-repeat;
	margin-bottom:		1.6em;
	padding-bottom:		2em;
}
.squeeze .response{
	/* squeeze page response div for the Ace o' Spades signup form */
        margin:                 25px auto !important;
	width:                  580px;
}
.thumbnail{
	/* inline images at the top of posts */
	float:			right;
	margin:			25px 110px 25px 25px;
}
.versal{
	/* small-caps */
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
}


/* ======= CONTACT 7 STYLING ======= */


.wpcf7-list-item{
	/* radio buttons etc, and their labels, are wrapped in these spans */
	color:			#b81600;
	display:		list-item;
	list-style:		none;
	margin-left:		-2.5em;
}
.wpcf7-list-item-label{
	/* labels for radio buttons, checkboxes etc */
	margin-left:		1em;
}
.wpcf7-not-valid-tip-no-ajax{
	/* errors thrown when form fields aren't correctly entered */
	-moz-border-radius:	12px;
	-moz-border-radius-topleft:0;
	-moz-box-shadow:	1px 2px 12px #872718;
	-webkit-border-radius:	12px;
	-webkit-border-top-left-radius:0;
	-webkit-box-shadow:	1px 2px 12px #872718;
	background:		#b81600;
	border-radius:		12px;
	border-top-left-radius:	0;
	box-shadow:		1px 2px 12px #872718;
	color:			#fff;
	float:			right;
	font-family:		"Arial","Helvetica","FreeSans","Liberation Sans","Nimbus Sans L",sans-serif;
	font-size:		.8em;
	line-height:		1.2em;
	margin:			-.5em -6em auto auto;
	max-width:		35ex;
	opacity:		.8;
	padding:		.5em .7em;
}
.wpcf7-not-valid-tip-no-ajax:before{
	content:		"↖";
	font-weight:		bold;
}
.wpcf7-not-valid-tip-no-ajax:hover{
	-webkit-transition:	opacity .15s ease-in;
	opacity:		.4;
	transition:		opacity .15s ease-in;
}
.wpcf7-response-output{
	/* the div in which "submitted ok" type messages are wrapped */
	-moz-border-radius:	.5em;
	-moz-box-shadow:	2px 4px 70px #872718;
	-webkit-border-radius:	.5em;
	-webkit-box-shadow:	2px 4px 70px #872718;
	background:		#fff;
	background:		rgba(135, 39, 24, .9);
	border:			2px solid #b81600;
	border-radius:		.5em;
	box-shadow:		70px 4px 70px #872718;
	color:			#fff;
	left:			50%;
	margin-left:		-330px;
	margin-top:		-15px;
	position:		fixed;
	padding:		30px 55px 20px 55px;
	text-align:		center;
	text-shadow:		0 0 20px #fff;
	top:			0;
	width:			600px;
}
.wpcf7-display-none{
	/* obviously this class is used on elements that we don't want showing up prematurely */
	display:		none;
}


/* ======= WP-PAGENAVI STYLING ======= */


.wp-pagenavi{
	/* wrapper element for page numbers */
	font-family:		"Justus Capitals","Georgia","Bitstream Charter","Century Schoolbook L","Liberation Serif","Times",serif;
	margin:			24px auto auto auto;
	height:			48px;
	text-align:		center;
}
.wp-pagenavi a, .wp-pagenavi span{
	border:			none;
	padding:		0 .5em !important;
}
.wp-pagenavi .pages{
	color:			#b81600;
}
.wp-pagenavi .current{
	background:		#b81600;
	color:			#fff;
}


/* ======= FONT-FACE DECLARATIONS ======= */


/* Because IE won't recognize font styles or weights declared in @font-face rules, we have to declare special style variants, just for it. We specify them first because IE tries to download all source files…even if it doesn't understand them \; These are ignored by other browsers because they don't understand the EOT source files. Then, when giving elements font styles, we specify the IE variant as the first font-family choice and the other browsers' variant as the second choice; IE reads the first choice and does it; the other browsers ignore it and implement the second choice. Everyone's happy. */


@font-face{
	font-family:		"Justus";
	src:			url("fonts/Justus-Oldstyle.eot");
	src:			local("Justus Oldstyle"), local("Justus-Oldstyle"), url("fonts/Justus-Oldstyle.ttf") format("truetype");
}

@font-face{
	font-family:		"Justus Italic";
	src:			url("fonts/Justus-ItalicOldstyle.eot");
}

@font-face{
	font-family: 		"Justus Bold";
	src:			url("fonts/Justus-Bold.eot");
}

@font-face{
	font-family:		"Justus";
	src:			local("Justus ItalicOldstyle"), local("Justus-ItalicOldstyle"), url("fonts/Justus-ItalicOldstyle.ttf") format("truetype");
	font-style:		italic;
}

@font-face{
	font-family: 		"Justus";
	src: 			local("Justus Bold"), local("Justus-Bold"), url("fonts/Justus-Bold.ttf") format("truetype");
	font-weight:		bold;
}

@font-face{
	/* unfortunately no browsers seem to implement font-variant in @font-face yet */
	font-family:		"Justus Capitals";
	src:			url("fonts/Justus-Versalitas.eot");
	src: 			local("Justus Versalitas"), local("Justus-Versalitas"), url("fonts/Justus-Versalitas.ttf") format("truetype");
}

@font-face{
	font-family:		"Miama"; /* this font has only an ampersand */
	src:			url("fonts/Miama.eot");
	src:			local("Miama"), url("fonts/Miama.otf") format("opentype");
}

@font-face{
	font-family: 		"Qlassik Medium Regular";
	src:			url("fonts/Qlassik_TB.eot");
	src:			local("Qlassik Medium Regular"), local("QlassikMedium"), url("fonts/Qlassik_TB.woff") format("woff"), url("fonts/Qlassik_TB.otf") format("opentype");
}

@font-face{
	font-family: 		"BodoniFLF Bold"; /* this font has only left double-quotes; it's just used for styling the <q> element */
	src:			url("fonts/BodoniFLF-Bold.eot");
	src:			local("BodoniFLF Bold"), local("BodoniFLF-Bold"), url("fonts/BodoniFLF-Bold.ttf") format("truetype");
}

@font-face {
	font-family:		"Verily Serif Mono";
	src:			url("fonts/VerilySerifMono.eot");
	src:			local("Verily Serif Mono Book"), local("VerilySerifMono"), url("fonts/VerilySerifMono.ttf") format("truetype");
}