/* ========================= top level html stuff ========================= */

/* 1 rem font size */
html {
	font-size: 24px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #A9E0FF;
	font-family: "Ubuntu", Georgia, serif;
}

/* i'll use my own styling */
h1, h2, h3, h4, h5, h6, p, ul, li, dt, dd, dl {
	margin:0;
	padding:0;
	font-weight: normal;
}

p {
	font-size: 1.05rem;
	line-height: 1.35rem;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.phoneaware {
	font-size: 1.05rem;
	line-height: 1.35rem;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

/* br {
	display: block;
	content: "";
	margin-top: 0.3em;
} */

/* tables are just lines */
table {
	border-collapse: collapse;
	border: 0px;
	padding: 0px;
	margin: 0px;
}
th, td {
	padding: 0px;
	margin: 0px;
}
td {
	vertical-align: top;
	text-align: left;
}

hr {
	border: 1px #DDDDDD solid;
}

/* site-wide link colors */
a:link {
	text-decoration: none;
	color: #01A2FF;
}
a:visited {
	text-decoration: none;
	color: #B932D9;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
	color: #EE3232;
}

/* ========================= site layout stuff ========================= */

img {
	max-width: 100%;
	height: auto;
}

/* root container */
#mainbox {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	border: 4px solid #A9E0FF;
	margin-bottom: 96px;
}

/* other layout containers */
#tabsbox {
	font-family: "Vollkorn", Georgia, serif;
	font-weight: 400;
	height: 92px;
	margin-left: auto;
	margin-right: auto;
	font-size: 54px;
	text-align: center;
	line-height: 96px;
	background-color: #FFFFFF;
	border-bottom: #FFFFFF 16px solid;
}
#tabsbox a {
	color: #000000;
	text-decoration: none;
}
#footerbox {
	margin-bottom: 394px;
}

/* applies to all top tabs */
.tab_top {
	height: 93px;
	width: 320px;
	float: left;
}

/* applies to foreground top tab */
.tab_front {
	background-color: #FFFFFF;
	font-size: 58px;
}

/* applies to background top tabs */
.tab_back {
	background-color: #DDDDDD;
}
.tab_back:hover {
	background-color: #E4E4E4;
}

.tab_back_divider {
	width: 319px;
	border-right: 1px solid #AAAAAA;
	background-color: #DDDDDD;
}

.tab_back_divider:hover {
	width: 319px;
	border-right: 1px solid #AAAAAA;
	background-color: #E4E4E4;
}

/* we'll do flexbox for the top tabs on modern browsers */
/* @supports (display: flex) {

	#tabsbox {
		display: flex;
		justify-content: space-between;
		overflow: visible;
	}

	.tab_top {
		float: none;
		width: auto;
		margin-right: 0;
		flex: 1;
	}
} */

/* content is always over a white background */
.contentbox {
	background-color: #FFFFFF;
	font-size: 1.05rem;
	border-top: 1px white solid;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

/* header sizes */

/* ======================== content formatting ======================== */

h1, h2, h3, h4, h5, h6, .textheading {
	font-family: "Vollkorn", Georgia, serif;
	line-height: 0.8;
	font-weight: 700;
}

h1 {
	font-size: 2.6rem;
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	border-bottom: 2px #DDDDDD solid;
	margin-left: 1rem; 
	margin-right: 1rem;
}

h2 {
	font-size: 2.3rem;
	margin-top: 1rem;
	margin-bottom: 0.2rem;
	border-bottom: 2px #DDDDDD solid;
}

.h2small {
	font-size: 1.8rem;
	margin-top: 1rem;
	margin-bottom: 0.2rem;
	border-bottom: 2px #DDDDDD solid;
}

h3 {
	font-size: 1.8rem;
}

h4 {
	font-size: 1.6rem;
}

/* default formatting options, use class="pad0" to override */
p, dl, li, dl, dl dd {
	margin-left: 1rem; 
	margin-right: 1rem;
}

/* list text size, should match article text size */
li {
	font-size: 1em;
	list-style-type: disc;
}

li li {
	list-style-type: circle;
}

li li li {
	list-style-type: square;
}

.pad0 {
	margin-left: 0; 
	margin-right: 0;
}

.pad1 {
	margin-left: 1rem; 
	margin-right: 1rem;
}

.pad2 {
	margin-left: 2rem; 
	margin-right: 1rem;
}

.pad3 {
	margin-left: 3rem; 
	margin-right: 1rem;
}

.pad4 {
	margin-left: 4rem; 
	margin-right: 1rem;
}

.vertpadsmall {
	margin-top: 0.8rem;
	margin-bottom: 0.3rem;
}

.topspace {
	margin-top: 2rem;
}

/* ========================= table of contents ========================= */

.tableofcontents {
	max-width: 320px;
	padding: 0.6rem;
	font-size: 0.8rem;
	float:right;
}

.floatbreak {
	display: table;
	clear: both;
	width: 100%;
}

.lefttext {
	width: 480px;
	float: left;
}

.topofarticle {
	display: table;
	clear: both;
	width: 100%;
}

.topofarticle p {
	float: left;
	width: 480px;
} 

/* =========================== sticky notes =========================== */

.stickynote {
	max-width: intrinsic; /* PPC versions of safari */
	max-width: max-content; /* modern browsers */
	padding: 1rem;
}

.sidenote {	
	/* fonts */
	font-family: "Vollkorn", Georgia, serif;
	line-height: 0.8;
	font-size: 1.8rem;
	font-weight: 700;
	/* margins */
	margin-left: -0.7rem;
	margin-top: 24px;
	margin-bottom: 24px;
	padding-top: 0.7rem;
	padding-bottom: 0.4rem;
	padding-left: 0.8rem;
	padding-right: 1.5rem;
	/* etc */
	max-width: intrinsic; /* PPC versions of safari */
	max-width: max-content; /* modern browsers */
}

.rednote {
	border-left: #e00909 1rem solid;
	background: #ffd7d1;
	box-shadow: 4px 4px #944f58;

}

.orangenote {
	border-left: #ff8100 1rem solid;
	background: #ffdcaf;
	box-shadow: 4px 4px #916331;
}

.yellownote {
/*	border-left: #FFC822 1rem solid; */
/*	background: #FFEDC3; */
	border-left: #FFC000 1rem solid;
	background: #FFEAAB;
	box-shadow: 4px 4px #9d8e7a;
}

.greennote {
	border-left: #15ba18 1rem solid;
	background: #bcf5c1;
	box-shadow: 4px 4px #528458;

}

.bluenote {
	border-left: #006bff 1rem solid;
	background: #ccd8ff;
	box-shadow: 4px 4px #37407a;

}

.purplenote {
	border-left: #b80ed2 1rem solid;
	background: #f0ccef;
	box-shadow: 4px 4px #793882;

}

.pinknote {
	border-left: #FD75A8 1rem solid;
	background: #FFE2EC; /* #FFEAF1 */
	box-shadow: 4px 4px #977378;
}

.blacknote {
	border-left: #3b3b3b 1rem solid;
	background: #dbdbdb;
	box-shadow: 4px 4px #212121;

}

.tiltleft {
	transform: rotate(-2deg);
}

.tiltright {
	transform: rotate(1deg);
}

/* =========================== wiki stuff =========================== */

.wikipic {
	width: 320px;
	padding: 4px;
	float: right;
	border: 1px solid #AAAAAA;
	background-color: #F4F4F4;
	margin-left: 6px;
	margin-right: 4px;
	margin-bottom: 12px;
}

.wikipic img {
	width: 320px;
}

/* ================== font size adjustment for phones ================== */

@media screen and (max-device-width: 500px) {	
	
	h1 {
		font-size: 3.2rem;
		margin-top: 0.3rem;
		margin-bottom: 0.3rem;
		border-bottom: 1px #DDDDDD solid;
	}
	
	h2 {
		font-size: 2.8rem;
		margin-top: 1rem;
		margin-bottom: 0.2rem;
		border-bottom: 1px #DDDDDD solid;
	}
	
	h3 {
		font-size: 2.5rem;
	}
	
	h4 {
		font-size: 2.2rem;
		margin-top: 0.8rem;
		margin-bottom: 0.3rem;
	}
	
	p {
		font-size: 1.8rem;
		line-height: 2rem;
		margin-bottom: 1rem;
		margin-top: 0.6rem;
	}
	
	li {
		font-size: 1.8rem;
	}
	
	dl ul {
		font-size: 1.8rem;
	}
	
	.phoneaware {
		font-size: 1.8rem;
		line-height: 2rem;
		margin-bottom: 1rem;
		margin-top: 0.6rem;
	}
}

/* ========================= self hosting the webfonts ========================= */

/* vollkorn - used for top tabs and headers */
@font-face {
  font-display: swap;
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/vollkorn-v30-latin-regular.woff2') format('woff2'), /* modern browsers */
	   url('/fonts/vollkorn-v30-latin-regular.ttf') format('truetype'); /* we've gotta support at least Mac OS X 10.4 */
}

/* volkhorn - bold */
@font-face {
  font-display: swap;
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/vollkorn-v30-latin-700.woff2') format('woff2'),
	   url('/fonts/vollkorn-v30-latin-700.ttf') format('truetype');
}

/* ubuntu - used as main body font */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/ubuntu-v21-latin-regular.woff2') format('woff2'),
	   url('/fonts/ubuntu-v21-latin-regular.ttf') format('truetype');
}

/* ubuntu - italic */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/ubuntu-v21-latin-italic.woff2') format('woff2'),
	   url('/fonts/ubuntu-v21-latin-italic.ttf') format('truetype');
}

/* ubuntu - semibold (prettier than normal bold, and still bold enough) */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/ubuntu-v21-latin-500.woff2') format('woff2'),
	   url('/fonts/ubuntu-v21-latin-500.ttf') format('truetype');
}

/* ubuntu - semibold italic */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/ubuntu-v21-latin-500italic.woff2') format('woff2'),
	   url('/fonts/ubuntu-v21-latin-500italic.ttf') format('truetype');
}

/* ubuntu mono - used for code */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/ubuntu-mono-v19-latin-regular.woff2') format('woff2'), 
	   url('/fonts/ubuntu-mono-v19-latin-regular.ttf') format('truetype');
}

/* ubuntu mono - italic */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/ubuntu-mono-v19-latin-italic.woff2') format('woff2'), 
	   url('/fonts/ubuntu-mono-v19-latin-italic.ttf') format('truetype');
}

/* ubuntu mono - bold */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/ubuntu-mono-v19-latin-700.woff2') format('woff2'), 
	   url('/fonts/ubuntu-mono-v19-latin-700.ttf') format('truetype');
}

/* ubuntu mono - bold + italic */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/ubuntu-mono-v19-latin-700italic.woff2') format('woff2'), 
	   url('/fonts/ubuntu-mono-v19-latin-700italic.ttf') format('truetype');
}