/*
 * Copyright (c) 2017 Mark Miller LPC, all rights reserved
 * Author: Jacob Travers
 * File: default.css  -  Style sheet
 * Revision Date: 11/27/17
*/


/*   FONTS   */
h1, h3, nav ul li a, .headerText, .bodyText, .footerText {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.footerCopyrightText {
	font-size: 0.9em;
}

.bodyText {
	text-align: left;
	font-size: 1.25em;
}

.footerText {
	float: left;
	margin: 10px 10px 8px 10px;
	text-align: left;
	font-size: 0.9em;
}


/*   GENERAL STYLING   */
html {
	margin: 0;
	padding: 0px 0px 60px 0px;
	min-width: 380px;
	text-align: center;
	background-color: #F1F0F0;   /* Grey */
}

body {
	position: relative;
	margin: 0;
	width: 100%;
	text-align: center;
}


/*   HEADER/BODY/FOOTER STYLING   */
div.headerColorBar {
	float: left;
	padding-bottom: 15px;
	width: 100%;
    background-color: white;
}

div.bodyWidth {
	margin: 0 auto;
	padding-left: 100px;
	padding-right: 100px;
	max-width: 960px;
}

div.headerTitleBox {
	float: left;
}

div.headerTitleIconBox {
	float: left;
	margin: 18px 5px 0px 0px;
}

img.headerTitleIcon {
	width: 70px;
	height: 70px;
}

div.headerTitleTextBox {
	float: right;
}

h1.headerText {
	margin: 10px 5px 10px 5px;
	width: auto;
	color: #2A518E;   /* Darkish Blue */
}

h3.headerText {
	float: right;
	margin: 0px 5px 0px 0px;
	color: black;
}

div.headerNavMenuBox {
	float: right;
	width: auto;
	display: inline;
}

nav ul {
	margin: 45px 15px 0px 0px;
	width: auto;
	list-style-position: inside;
	list-style: none;
	text-align: center;
	white-space: nowrap;
}

nav ul li {
	margin: 0px 0px 0px 5px;
	border: none;
	display: inline-block;
	white-space: nowrap;
}

nav ul li a {
	border: none;
	letter-spacing: 0.05em;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: black;
}

nav ul li a:hover {
	color: #2A518E;   /* Darkish Blue */
}

nav ul li a.selected {
	color: #2A518E;   /* Darkish Blue */
}

nav ul li span.selected {
	/*   Draws line under selected nav item   */
	border-bottom: 3px solid #2A518E;   /* Darkish Blue */
	padding-bottom: 5px;
	display: inline-block;
}

nav ul li a.selected:hover {
	color: #E3CF9C;   /* Gold */
}

div.footerColorBox {
	float: left;
	margin-top: 50px;
	width: 100%;
	display: inline-block;
	background-color: white;
}


/*   PAGE ELEMENT STYLING   */
img {
	width: 100%;
}

div.home_LargeImageBox {
	margin-top: 30px;
	display: inline-block;
}

div.meetmark_IntroductionTextBox {
	float: left;
	margin-top: 30px;
	text-align: center;
}

div.meetmark_AreasOfFocusBox {
	float: left;
	margin-top: 50px;
	width: 60%;
	display: inline-block;
	text-align: left;
}

div.meetmark_AreasOfFocusIndentedBox {
	margin-left: 30px;
}

div.meetmark_PortraitBox {
	float: right;
	margin-top: 35px;
	width: 35%;
	display: inline-block;
}

div.meetmark_ClosingTextBox {
	float: left;
	margin-top: 35px;
	width: 60%;
	display: inline-block;
	text-align: left;
}

div.about_TherapyRoomBox {
	float: left;
	margin-top: 30px;
	width: 60%;
}

div.about_ServicesBox {
	float: right;
	margin-top: 40px;
	width: 35%;
	text-align: left;
}

div.about_ServicesIndentedBox {
	margin-left: 25px;
}

div.contact_TopRow {
	margin-top: 30px;
	display: inline-block;
}

div.contact_BottomRow {
	margin-top: 10px;
}

div.contact_ContactInfoBox {
	float: left;
	margin: 30px 0px 20px 0px;
	width: 50%;
	display: inline-block;
	text-align: left;
	line-height: 35px;
}

div.contact_BuildingExteriorBox {
	float: right;
	width: 49%;
}

div.contact_WaitingRoomBox {
	float: left;
	width: 49%;
}

div.contact_MapParentBox {
	float: right;
	width: 49%;
}

div.contact_MapOuterWrapperBox {
	position: relative;
	padding-bottom: 75%;
	width: 100%;
	background: white;
}

div.contact_MapInnerWrapperBox {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	font-size: 24px;
	text-align: center;
	color: white;
}

iframe.contact_Map {
	border: 0;
	width: 100%;
	height: 100%;
}


/*   Restyle view for smaller screens   */
@media screen and (max-width: 950px) {
	/*   FONT   */
	.bodyText {
		text-align: left;
		font-size: 1.00em;
	}
	
	
	/*   HEADER/BODY STYLING   */
	header {
		position: relative;
	}
	
	div.bodyWidth {
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	div.headerTitleBox {
		margin-top: 20px;
		margin-left: 20px;
		display: inline-block;
	}
	
	div.headerTitleIconBox {
		float: left;
		margin: 10px 5px 0px 0px;
	}
	
	img.headerTitleIcon {
		width: 50px;
		height: 50px;
	}
	
	div.headerNavMenuBox {
		float: none;
		width: auto;
		display: inline-block;
	}
	
	nav ul {
		position: relative;
		padding-left: 15px;
		top: 0;
		height: 100%;
	}
	
	nav ul li {
		display: block;
		padding: 8px 0;
		text-align: center;
	}
	
	
	/*   PAGE ELEMENT STYLING   */
	div.home_LargeImageBox {
		display: inline-block;
		margin-top: 10px;
	}
	
	div.meetmark_AreasOfFocusBox {
		width: 53%;
	 }
	 
	div.meetmark_ClosingTextBox {
		width: 53%;
	}
	
	div.meetmark_PortraitBox {
		margin-top: 50px;
		width: 40%;
		max-width: 300px;
		display: inline-block;
	}
	
	 div.about_TherapyRoomBox {
		margin-top: 10px;
		width: 100%;
	 }
	 
	 div.about_ServicesBox {
		float: left;
		margin-top: 40px;
		margin-left: 18%;
		width: auto;
	 }
	 
	 div.contact_TopRow {
		margin-top: 15px;
	 }
	 
	 div.contact_BottomRow {
		margin-top: 0px;
	 }
	 
	 div.contact_BuildingExteriorBox {
		float: left;
		margin-top: 10px;
		width: 100%;
	 }
	 
	 div.contact_WaitingRoomBox {
		float: left;
		margin-top: 10px;
		width: 100%;
	 }
	 
	 div.contact_ContactInfoBox {
		float: left;
		margin-top: 0px;
		margin-bottom: 0px;
		width: 100%;
		line-height: 35px;
	 }
	 
	 div.contact_MapParentBox {
		float: left;
		margin-top: 10px;
		width: 100%;
	 }
}


/*   Rearrange view for very small screens   */
@media screen and (max-width: 540px) {
	/*   PAGE ELEMENT STYLING   */
	div.meetmark_ClosingTextBox {
	   width: 100%;
	}
}