/*
 * Shaded Lance Website, CSS
 * copyright © 2013
 *
 * Author: Edward W. Belanger IV
 */

/* 
 * -------------------   Reset   ----------------------------------------------
 */
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;
}

address, article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary { 
	display: block; 
}

/*
 * -------------------------- Fonts --------------------------------------------
 */
@font-face{
    font-family: shadedLanceFont;
    src: url('../fnt/OldStandard-Regular.ttf');
}
@font-face{
    font-family: shadedLanceFontBold;
    src: url('../fnt/OldStandard-Bold.ttf');
} 
@font-face{
    font-family: shiftingEchoesFont;
    src: url('../fnt/Carlito-Regular.ttf');
} 
@font-face{
    font-family: diceRuleFont;
    src: url('../fnt/ModernAntiqua.ttf');
} 
 
/* 
 * --------------------------   All   --------------------------
 */
body { 
    background-color:black;
    color:#b2b2b2;
}

header {
	font-family: shadedLanceFont;
	position:relative;
	text-align:center;
	font-size:64px;
}
header h1{
	color:#b2b2b2;
}
header img{
	width:48px;
	height:48px;
}

nav {
	font-family: shadedLanceFont;
	position:relative;
	border-top:thin solid white;
	border-bottom:thin solid white;
	
	text-align: justify;
	font-size:0.1px;
}
nav a{
	color:#b2b2b2;
	font-size:24px;
	text-decoration:none;
	display:inline-block;
}
nav:after {
	content: '';
	width:100%;
	display: inline-block;
}

section {
    position:relative;
	margin:10px 10%;
	min-width:256px;
	background-color:white;
	color:black;
	padding:30px;
	text-align: center;
}
section h3{
	font-size:36px;
	margin-bottom: 40px;
}
section h2{
	text-align:center;
	font-size:56px;
	margin:20px auto;
}
section h2 img{
	width: 64px;
	height:64px;
	vertical-align: text-top;
}
section div{
    display:block;
}

.info{
	position:relative;
	text-align: justify;
	font-size:0.1px;
	margin:20px auto;
}
.info h4{
	font-size:24px;
	display:inline-block;
}
.info:after{
	content: '';
	width:100%;
	display: inline-block;
}

.portrait{
	width:15%;
	height:15%;
}
.landscape{
	width:30%;
	height:30%;
}
.shiftingechoes{
	font-family: shiftingEchoesFont;
}
.dicerule{
	font-family: diceRuleFont;
}

footer {
    font-family: shadedLanceFont;
	text-align:center;
	margin:0px auto 20px;
	min-width:320px;
	font-size:14px;
}
footer a{
	color:#b2b2b2;
	text-decoration:none;
}

/*
 * -------------------------- Size Differences --------------------------
 */
 @media only screen and (max-width : 639px) {
	header {
		font-size:32px;
	}
	header img{
		width:24px;
		height:24px;
	}

	nav a{
		font-size:16px;
	}
	
	section {
		margin:10px 10%;
		min-width:256px;
		padding:15px;
	}
	section h3{
		font-size:18px;
		margin-bottom: 20px;
	}
	section h2{
		font-size:28px;
		margin:10px auto;
	}
	section h2 img{
		width: 32px;
		height:32px;
	}
	section div{
		display:block;
	}

	.info{
		margin:10px auto;
	}
	.info h4{
		font-size:12px;
	}

	.portrait{
		width:15%;
		height:15%;
	}
	.landscape{
		width:30%;
		height:30%;
	}
	
	footer {
		margin:0px auto 10px;
		min-width:160px;
		font-size:12px;
	}
}