/*
BASE (MOBILE) SCREENS
These base styles apply to all screen sizes, but may be overridden on larger screens by the media query-driven styles that appear later in this file.
*/

.border {
    border-style: dashed;
    border-width: 1px;
    border-color: red;
}

/* Responsive Images */
img {
	width:auto;
	max-width:100%; 
	height:auto;
	vertical-align: middle; /* cures the 4 px whitespace anomaly */
}




/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
* {  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       box-sizing: border-box; 
}


/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.right {
	float:right;
}

.left {
	float:left;
}

.cell-bottom {
	display:table-cell; 
	vertical-align:bottom;
	width: 100%;
}

body {
	height: 100%;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 26px;
	color: #212121;
	margin: 0;
	background: #d6d6d6; /* 20% gray */
}

#wrapper {
	padding: 42px 0 0 0;
}

div.sitename {
  text-align: center;
  font-size: 40px;
  margin: 0 0 24px 0;
}

#navbar_container {
	padding-left: 3%;
	padding-right: 3%;
}

#navbar_container {
	display: flex;
	flex-direction: column;
}

nav {
	display: flex;
	justify-content: space-evenly;
}

nav.block_1 {
}

nav.block_2 {
}

#content {
	padding: 7%;
	margin: 35px 3% 3% 3%;
}

#headshot {
	margin: auto;
	width: 20%;
}

#divider {
  content: "";
  display: block;
  width: 70%;	/* width of the line */
  height: 2px;	/* thickness of the line */
  background: #C0C0C0;	/* line color, 30% gray */
  margin: 40px auto 40px;	/* space above and below line, center the line */
}

footer {
	font-size: 18px;
	line-height: 24px;
	padding: 30px 70px 12px 70px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	text-align: center;
    font-size: 26px;
	line-height: 33px;
	margin: 0 0 26px 0;
}

h2 {
	font-size: 22px;
	line-height: 31px;
	margin: 36px 0 14px 0;
}

p {
	margin: 18px 0 0 0;
}

p:first-of-type {
	margin: 13px 0 0 0;
}

p.warning {
	font-weight:bold;
	color:red;
}

.center {
	text-align: center;	
}

#content ul {
    list-style: disc;
}

#content ul, ol, dl, dd {
    padding: 0 0 0 30px;
}

#content ul, ol, dl {
    margin: 0 0 0.75em 0;
}

#content ul:last-child, ol:last-child {
	margin-bottom: 0;
}

#content ul li {
	margin-top: 5px;
}

#button_grid {
	margin-top: 12px;
}

#button_grid a.button {
	margin-top: 12px;
}

#gallery {
	margin-top: 28px;
}

#contact_info {
  display: table;
  margin: 9px auto 0 auto;
}

.hidden {
	position: absolute;
	left: -9999px; /* hidden, but still available to screen reader */
}

hr {
	margin-top: 30px;
}

/* Links */
a:link,
a:visited,
a:hover {
	color: black;	
	text-decoration: underline;
}

div.sitename a,
div.sitename a:visited,
div.sitename a:hover {
	text-decoration: none;
}

a.image-noborder, 
a.image-noborder:visited, 
a.image-noborder:hover {
	text-decoration: none;
	border: 0 none;
}

a.button {
	color: #99FFFF;	
	background: #646464; /* 50% gray, same as wrapper */
	border:	1px solid #646464; /* 50% gray, same as wrapper */
	border-bottom: 1px solid #99FFFF;
	padding: 6px 18px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 19px;
	cursor: pointer;
}

a.button:hover {
	color: white;
	text-decoration: none;
	border: 1px solid #99FFFF;
}

a.button.current {
	color: white;
	border:	1px solid #646464; /* 50% gray, same as wrapper */
	border-bottom: 1px solid white;
}

#fancybox_stuff {
	border: 2px solid #999999;
	padding: 5px 20px 15px 20px;
	width: 80%;
	margin: 30px auto 30px auto;
}

p.fancybox_instructions {
	color: #777777;
	font-size: 18px; 
	line-height: 23px;
	text-align: center;
}

#fancybox_controls {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	width: 475px;
}

#fancybox_controls_it {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	width: 500px;
}

#gallery a img {
	float: left;
	width: 49%;
	border: 2px solid #C0C0C0;
	margin-right: 1%;
	margin-bottom: 1%;
	transition: border .2s, transform .2s;
}

#gallery a img:hover {
	border:2px solid #777777;
	transform: scale(1.02);
}


/* Kill the phantom dotted border that appeared after clicking on a gallery image then exiting the lightbox overlay */
#gallery a:focus,
#gallery a img:focus {
	border: none;
	outline: none;
}



/*
PHONES in LANDSCAPE ORIENTATION
*/
@media only screen and (min-width: 500px) {
}




/*
TABLETS in PORTRAIT ORIENTATION
*/
@media only screen and (min-width: 700px) {

#content {
	padding-left: 7%;
	padding-right: 7%;
	margin: 35px 5% 5% 5%;
}

#content.home {
	padding-top: 4%;
}

#headshot {
	width: 15%;
}

#column_1 {
	float: left;
	width: 45%;
	text-align: right;
}

#divider {
	display:none;
}

#column_2 {
	float: right;
	width: 45%;
	padding-top: 0;
}

footer {
	padding: 30px 9.6% 12px 9.6%;
}

} 



/*
TABLETS in LANDSCAPE & LAPTOPS
This is the first appearance of the "desktop layout"
*/
@media only screen and (min-width: 950px) {

#navbar_container {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#content {
	margin: 35px 9% 9% 9%;
}

#headshot {
	width: 10%;
}

#gallery a img {
	width: 32.33%;
}

}



/*
TABLETS in LANDSCAPE & LAPTOPS, slightly larger
*/
@media only screen and (min-width: 1000px) {
}


/*
LARGE DESKTOP DISPLAYS
*/
@media only screen and (min-width: 1200px) {

#wrapper {
	max-width: 1300px;
	margin: auto;
}

}



/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}