/*===============================================================================

# Default Stylsheet

Filename:		william-grid.css
Site:			williambenedict.com
Version:		2.0
Updated:		06-31-17
Author:			William Benedict
Description:	Default styles applied to all pages on the site	
Embedded:		All pages have embedded styles for head image. 
				Web-experiments pages have additional embedded styles.

# Table of Contents

* Base Reset
	** Body
	** Clearing Floats
* Wrapper
* Header
* Navigation
	** Unordered Lists
	** Ordered Lists
* Content Structure: DIV Section, Article, Aside
* Content Tags
	** Paragraph Tag
	** Head Tags
	** Definition Lists
	** Blockquote
* Images
	** Images – Figure
	** Images – Display Table/Row/Cell
	** Image Widths
* Tables
	** Tables - Head Top
	** Tables - Head Left
	** Tables - Head Both
* Forms
* Footer
* Widths
* Body #Home
* @ Media Print

# Colors

Warm Grays used throughout
#e6e6de		10% warm gray
#999991		40% warm gray
#66665e		60% warm gray
#a55508		Orange
#43108d		Purple
#9c130b		Red

# Image Widths
Header
767px by 108px

Section 
570px
280px, 280px
135px, 135px, 135px

Section Middle
375px
180px, 180px

Other
150px
585px

=================================================================================*/


/*== Base Settings
=================================================================================*/
/**-- Reset
--------------------------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	font-style: normal;/*-Reset suggests using inherit-*/
	font-variant: normal;/*-Reset suggests using inherit-*/
	font-weight: normal;/*-Reset suggests using inherit-*/
	background: transparent;
}


/**-- Body
--------------------------------------------------------------------------------*/

body {
	background-color: #fff;
	font-size: 100%;
	line-height: 1.4;
	font-family: sans-serif;/*--san-serif produces Helvetica on Macs and Arial on PCs--*/
}


/**-- Clear Floats
--------------------------------------------------------------------------------*/

.clearfloats {
	clear: both;
}

/*--Add overflow: auto; TO PARENT CONTAINER or better yet--*/

/*--Add a class of "clearfix" to any element that is "collapsed" due to floated child elements.
http://nicolasgallagher.com/micro-clearfix-hack/
--*/

.clearfix:before,  
.clearfix:after {  
    content: " "; 
    display: table;
}  
.clearfix:after {  
    clear: both;  
}
	

/*== Wrapper/Container
=================================================================================*/

#wrapper { /*- CONTAINER -*/
	display: grid;
	max-width: 767px;
	margin: 0 auto;

	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 0px;

	grid-template-areas:	"header"
							"nav"
							"subnav"
							"main"
							"footer";

	margin-top: 0;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding: 20px;
	overflow: auto;/*--Required to include floated children--*/
}


/*== Header
=================================================================================*/

header {
	grid-area: header;
	max-width: 100%;
	text-align: left;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 13px;
}
header p#skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
header img {
	margin: 12px 0 0 0;
}
header a:link img,
header a:visited img {
	padding: 0 0 0 5px;
	opacity: 1.0;
	transition: opacity 0.3s ease-in-out;
}
header a:hover img,
header a:focus img,
header a:active img {
	opacity: 0.8;
}


/*== Links
=================================================================================*/

a {
	font-weight: bold;
	text-decoration: none;
}
a:link,
a:visited {
	color: #9c130b;/*Red*/
}
a:hover,
a:focus,
a:active {
	color: #43108d;/*Purple*/
	border-bottom: 1px dotted #43108d;
}


/*== Navigation
=================================================================================*/

nav {
	grid-area: nav;
	display: flex;
	width: 100%;
	margin: 4px 0 0 0;
	text-align: center;
}
.subnav {
	grid-area: subnav;
	display: flex;
	width: 100%;
	margin: 2px 0 0 0;
	text-align: center;
}
nav ul, .subnav ul {
	display: flex;
	width: 100%;
	margin: 0;
	font-size: 1.1em;
	line-height: 1.3em;
	list-style: none;
}
nav ul li {
	flex-grow: 1;/*0 will not grow larger than basis – 1 can grow larger than basis*/
	flex-shrink: 1;/*0 will not grow smaller than basis – 1 can grow smaller than basis*/
	flex-basis: auto;/*100% makes all equal – auto sizes based on content*/
	padding: 0;
}
.subnav ul li {
	flex-grow: 1;/*0 will not grow larger than basis – 1 can grow larger than basis*/
	flex-shrink: 1;/*0 will not grow smaller than basis – 1 can grow smaller than basis*/
	flex-basis: auto;/*100% makes all equal – auto sizes based on content*/
	padding: 0;
}
nav ul li a, .subnav ul li a {
	display: block;
	padding: .4em 0 .2em .4em;
	font-weight: normal;
}
nav ul li a:link,
nav ul li a:visited {
	background-color: #e6e6de;/*10% warm gray*/
	color: #000;
	transition: all 0.3s ease-in-out;
}
nav ul li.reference a:link,
nav ul li.reference a:visited {
	background-color: #66665e;/*60% warm gray*/
	color: #fff;
	transition: all 0.3s ease-in-out;
}
.subnav ul li a:link,
.subnav ul li a:visited {
	background-color: #fae0c7;/*light orange*/
	color: #000;
	transition: all 0.3s ease-in-out;
}
nav ul li a:hover, .subnav ul li a:hover, nav ul li.reference a:hover,
nav ul li a:focus, .subnav ul li a:focus, nav ul li.reference a:focus,
nav ul li a:active, .subnav ul li a:active, nav ul li.reference a:active {
	background-color: #a55508;/*Orange*/
	color: #fff;
	border-bottom: none;
}
nav ul li.open a, .subnav ul li.open a {
	background-color: #a55508;/*Orange*/
	color: #fff;
}


/**-- Unordered Lists
--------------------------------------------------------------------------------*/

ul {
	list-style-type: square;
	margin: 0 0 0 45px;
}
ul li {
	padding: .4em 0 0 0;
	font-size: 1em;
}
ol li ul {
	margin: 0 0 0 25px;
}


/**-- Ordered Lists
--------------------------------------------------------------------------------*/

ol {
	list-style-type: decimal;
	margin: 0 0 0 45px;
}
ol li {
	padding: .4em 0 0 0;
	font-size: 1em;
}


/*== Content: DIV Section, Article, Movie
=================================================================================*/

main {
	grid-area: main;
	width: 100%;
	margin: 10px 0 30px 0;
	text-align: left;
}
section {
	width: 100%;
	margin: 0 0 30px 0;
	text-align: left;
}
article {
	clear: both;
	width: 100%;
	padding: 5px 0 0 0;
}
article.top {
	padding: 0 0 0 0;
}
.grid {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
}
.grid-item {
	width: 50%;
	margin: 0 0 20px 0;
}


/*== Content Tags
=================================================================================*/

/**-- Paragraph Tag
--------------------------------------------------------------------------------*/

p { 
	margin: .5em 0 0 0;
	font-size: 1em;
}
p.top { 
	margin: 0 0 0 0;
}
p.indent {
	margin-left: 45px;
}
p.post {
	margin: -12px 15px 0 0;
	color: #66665e;
	line-height: 1em;
	font-weight: bold;
	text-align: right;
}
p.before-image-table {
	margin: -12px 2px 0 0;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}


/**-- Head Tags
--------------------------------------------------------------------------------*/

h1 {
	margin: 10px 0 6px 0;
	color: #9c130b;/*Red*/
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.6em;
}
h2 {
	display: block;
	margin: 15px 0 0 0;
	padding: .6em 0 .3em .2em;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.1em;
	background-color: #e6e6de;/*10% warm gray*/
}
h2.top, article.top h2 {
	margin: 0 0 0 0;
}
h3 { 
	margin: .7em 0 0 0;
	font-weight: normal;
	font-size: 1.4em;
	line-height: 1.1em;
}
article.day h3 {
	border-bottom: 1px solid #999991;/*--40%--*/
}
h4 { 
	margin: .6em 0 0 0;
	font-size: 1.2em;
	line-height: 1.1em;
}
article.day h4{
	font-weight: bold;
}
h5 { 
	margin: .5em 0 0 0;
	font-size: 1em;
	line-height: 1.1em;
}


/**-- Definition Lists
--------------------------------------------------------------------------------*/

dl {
	margin: 0 0 0 45px;
}
dl dt {
	margin: .4em 0 0 -30px;
	font-size: 1em;
	font-weight: bold;
}
dl dd {
	font-size: 1em;
}


/**-- Blockquote
--------------------------------------------------------------------------------*/

blockquote {
	margin: .4em 0 0 0;
	padding: 0 60px 0 55px;
	font-style: italic;
	font-size: 1em;
}


/*== Images
=================================================================================*/

/**-- Images – Figure
--------------------------------------------------------------------------------*/

figure {
	margin: 8px 0 10px 0;
}
figure.top {
	margin: 0 0 10px 0;
}
figure img {
	vertical-align: bottom; /*--eliminates gap at bottom of cell--*/
}
figure img.image-border {
	border: 1px solid #000;
}
figcaption {
	padding: 5px 5px 10px 0;
	font-size: 12px;
	line-height: 14px;
	font-style: italic;
}
figure.floatleft {
	float: left;
	max-width: 100%;
	padding: 0 15px 0 0;
}
figure.floatleft-right {
	float: left;
	margin: 8px 0 10px 0;
	padding: 0;
}
figure.floatright {
	float: right;
	padding: 0 0 0 15px;
}	
	
/**-- Images - Display Table/Row/Cell
--------------------------------------------------------------------------------*/

div.image-table {
	display: table;
	border-spacing: 15px;/*all OR horizontal + vertical*/
}
div.image-row {
	display: table-row;
}
figure.image-cell {
	display: table-cell;
	background-color: #e6e6de;
	vertical-align: top;
}
figure.image-cell img {
	vertical-align: bottom; /*--eliminates gap at bottom of cell--*/
}
figure.image-cell figcaption {
	padding: 5px 5px 10px 5px;
	font-size: 12px;
	line-height: 14px;
	font-style: italic;
}


/**-- Image Widths
--------------------------------------------------------------------------------*/

.width-135 {
	width: 135px;
}
.width-150 {
	width: 150px;
}
.width-180 {
	width: 180px;
}
.width-280 {
	width: 280px;
}
.width-375 {
	width: 375px;
}
.width-570 {
	width: 570px;
}
.width-585 {
	width: 585px;
}


/*== TABLES
=================================================================================*/

table {  /*-Reset-*/
	border-collapse: collapse;
	border-spacing: 0;
}


/**-- Tables - Head Top
--------------------------------------------------------------------------------*/

table {
	margin: 10px 0 0 0;
	width: 100%;
}
table.top {
	margin: 0 0 0 0;
}
caption.head2 {
	padding: 0 0 .3em 0;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.1em;
	text-align: left;
}
caption.head3 {
	padding: 0 0 .3em 0;
	font-weight: normal;
	font-size: 1.4em;
	line-height: 1.1em;
	text-align: left;
}
th, td {
	padding: .3em .2em 0 .4em;
	font-size: 1em;
}
th {
	background-color: #e6e6de;
	font-weight: bold;
}
td {
	border-bottom: 1px solid #b2b2aa;/*30% warm Gray*/
}
td.vert-line {
	border-left: 1px solid #b2b2aa;/*30% warm Gray*/
}

td.rating {
	background-color: #e6e6de;
	text-align: center;
	font-weight: bold;
}
th.center, td.center {
	text-align: center;
}
th.right, td.right {
	text-align: right;
}
table p {
	margin: .4em 0 0 0;
}


/**-- Tables - Head Left
--------------------------------------------------------------------------------*/

table.head-left th {
	background-color: #e6e6de;
	border-bottom: 1px solid #b2b2aa;/*30% warm Gray*/
}
table.head-left td {
	border-bottom: 1px solid #b2b2aa;/*30% warm Gray*/
}


/**-- Tables - Head Both
--------------------------------------------------------------------------------*/

table.head-both th {
	background-color: #e6e6de;
	border-bottom: 1px solid #b2b2aa;/*30% warm Gray*/
	border-right: 1px solid #b2b2aa;/*30% warm Gray*/
}
table.head-both td {
	border-bottom: 1px solid #b2b2aa;/*30% warm Gray*/
	border-right: 1px solid #b2b2aa;/*30% warm Gray*/
}

/*== Forms
=================================================================================*/


/*== Footer
=================================================================================*/

footer {
	grid-area: footer;
	width: 767px;
	padding: 5px 0 20px 0;
	text-align: left;
	border-top: 1px solid #999991;/*--40%--*/
	overflow: auto;/*--Required to include floated children--*/
}
div#footerleft {
	float: left;
	width: 165px;
}
div#footerright {
	float: left;
	width: 392px;
	padding: 0 0 0 15px;
}
div#footerfarright {
	float: right;
	width: 180px;
	padding: 0 0 0 15px;
}
footer p { 
	margin: .4em 0 0 0;
	font-size: .9em;
	line-height: 1.2em;
}


/*== Widths
=================================================================================*/

.width-020 {
	width: 20px;
}
.width-030 {
	width: 30px;
}
.width-040 {
	width: 40px;
}
.width-050 {
	width: 50px;
}
.width-060 {
	width: 60px;
}
.width-070 {
	width: 70px;
}
.width-080 {
	width: 80px;
}
.width-090 {
	width: 90px;
}
.width-100 {
	width: 100px;
}
.width-110 {
	width: 110px;
}
.width-120 {
	width: 120px;
}
.width-130 {
	width: 130px;
}
.width-140 {
	width: 140px;
}
.width-150 {
	width: 150px;
}
.width-160 {
	width: 160px;
}
.width-170 {
	width: 170px;
}
.width-180 {
	width: 180px;
}
.width-190 {
	width: 190px;
}
.width-200 {
	width: 200px;
}


/*== MEDIA Queries
=================================================================================*/



/*== @ Media Print
=================================================================================*/

@media print {
	
	* { background: transparent !important; background-color: transparent !important; } /*-- Removes all background colors and images --*/
		  	
	p#skip {display: none; }
	header { display: none; }
	nav, .subnav { display: none; }
	section, div.content, div.content-middle { border-left: none; }
	footer { display: none; }
	p.post { font-weight: normal; }
	
	pre, blockquote { page-break-inside: avoid; }
	
	thead { display: table-header-group; } /*-- h5bp.com/t --*/
	
	tr, img { page-break-inside: avoid; }
	
	img { max-width: 100% !important; } /*-- Makes sure that image is within page --*/
	
	@page { margin: 0.5cm; } /*-- sets page margin on all sides --*/
	
	p, h1, h2, h3, h4 { orphans: 3; widows: 3; }
	
	h1, h2, h3, h4 { page-break-after: avoid; }	
	
	h1 { margin-left: 15px; }
	h2 { padding: .6em 0 .3em 0; }
	h2.top { padding: .6em 0 .3em 0; }
	aside h2 { text-align: left; }
}