@charset "utf-8";
/* CSS Document */

	
	
	.sellLine {
		font-size: 18px;
		color: gray;
		margin-bottom: 30px;
		margin-left: 0;
		text-align: center;
	}

	@media screen and (max-width: 560px) { /* header styles for vertical composition on most mobile phones */
		header {
			display: block;
			height: 100px;
			background-image: url(../images/doggieDayCareHeader.jpg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
  			overflow: hidden;
		}
		
		header > img {
			position: absolute;
			top: 10px;
			left: 5px;
			height: 80px;
		}
		
		header > h1 {
			float: right;
			margin: 60px 10px 0 auto;
			color: white;
			font: 25px "Trebuchet MS", Verdana, sans-serif;
		}
		
		.largerDevices {
			display: none;
		}
	
		.smallerDevices {
			display: block;
		}
		
		a#phoneOnOpen {
			margin-left: 0px;
		}
	}
	
	@media screen and (min-width: 561px) and (max-width: 980px) { /* header styles for horizontal composition on most mobile phones */
		header {
			display: block;
			height: 200px;
			background-image: url(../images/doggieDayCareHeader.jpg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
  			overflow: hidden;
		}
		
		header > img {
			position: absolute;
			top: 40px;
			left: 10px;
			height: 130px;
		}
		
		header > h1 {
			float: right;
			margin: 135px 20px 0 auto;
			color: white;
			font: 30px "Trebuchet MS", Verdana, sans-serif;
		}
		
		.largerDevices {
			display: none;
		}
	
		.smallerDevices {
			display: block;
		}
	}
	
	@media screen and (min-width: 601px) and (max-width: 1040px) { /* header styles for vertical composition on most tablets */
		header {
			display: block;
			height: 280px;
			background-image: url(../images/doggieDayCareHeader.jpg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
  			overflow: hidden;
		}
		
		header > img {
			position: absolute;
			top: 60px;
			left: 10px;
			height: 180px;
		}
		
		header > h1 {
			float: right;
			margin: 193px 20px 0 auto;
			color: white;
			font: 42px "Trebuchet MS", Verdana, sans-serif;
		}
		
		.largerDevices {
			display: block;
		}
	
		.smallerDevices {
			display: none;
		}
	
		a#phoneOnOpen {
			margin-left: 20px;
		}
	}	


	@media screen and (max-width: 1040px) { /* other styles for all mobile devices  */
		html {
			margin: 0;
			padding: 0;
			border: 0;
			height: 100%;		
		}
		
		html, body {
			min-height: 100%;
    		margin: 0;
    		padding: 0;
		}
		
		nav {
			display: table;
			width: 100%;
			background-color: #007db4;
			font: 22px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
	
		nav > ul {
			display: table-row;
		}
		
		nav > ul > li {
			text-align: center;
			border: none;
			border-top: 1px solid #aaa;
			border-bottom: 1px solid #333;
			background: -moz-linear-gradient(top, #00b1ff 0%, #005e87 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b1ff), color-stop(100%,#005e87)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #00b1ff 0%,#005e87 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #00b1ff 0%, #005e87 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #00b1ff 0%, #005e87 100%); /* IE10+ */
			background: linear-gradient(top, #00b1ff 0%, #005e87 100%); /* W3C */
		}
	
		nav > ul > li:first-child {
			border-top: none;
		}

		nav > ul > li:last-child {
			border-bottom: none;
		}

		nav > ul > li > a {
			display: block;
			width: 100%;
			height: 40px;
			line-height: 40px;
		}

		nav a {
			color: #ddff52;
		}
		
		h2 {
			font-size: 24px;
		}
		
		h3 {
			font-size: 20px;
		}
		
		article {
			margin: 20px 20px 20px 20px;
		}
	
		a {
			text-decoration: none;
			color: #007db4;
			font: 22px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
	}

	@media screen and (min-width: 1041px) { /* styles for all larger devices */
		html {
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			background-color: #a4bd3d;
		}
		
		body {
			min-height: 100%;
			width: 1020px;
			margin: 0px auto auto auto;
			padding: 0px;
			position: relative;
			background-color: #ffffff;
			border-left: 1px solid gray;
			border-right: 1px solid gray;
			-moz-box-shadow: rgba( 86, 99, 32, 0.9 ) 20px 0px 25px,  rgba( 86, 99, 32, 0.9 ) -20px 0px 25px;
			-webkit-box-shadow: rgba( 86, 99, 32, 0.9 ) 20px 0px 25px,  rgba( 86, 99, 32, 0.9 ) -20px 0px 25px;
			box-shadow: rgba( 86, 99, 32, 0.9 ) 20px 0px 25px,  rgba( 86, 99, 32, 0.9 ) -20px 0px 25px;
		}
		
		header {
			width: 1020px;
			height: 280px;
			background-image: url(../images/doggieDayCareHeader.jpg);
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
		
		header > img {
			position: absolute;
			top: 20px;
			left: 30px;
		}
	
		header > h1 {
			float: right;
			margin: 200px 50px 0 auto;
			color: white;
			font: 45px "Trebuchet MS", Verdana, sans-serif;
		}
		
		nav {
			display: table;
			width: 100%;
			background-color: #007db4;
			font: 22px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
	
		nav > ul {
			display: table-row;
		}

		nav > ul > li {
			display: table-cell;
			text-align: center;
		}

		nav > ul > li > a {
			display: inline-block;
			width: 100%;
			height: 40px;
			line-height: 40px;
		}

		nav a:visited, nav a:link {
			color: #ddff52;
			text-decoration: none;
		}

		nav a:hover, nav a:active {
			color: white;
			opacity: 0.8;
			text-decoration: underline;
			background-color: rgba( 0, 167, 240, 0.5 );
		}
		
		h2 {
			font-size: 24px;
		}
		
		h3 {
			font-size: 20px;
		}
		
		#loginAndScheduleContainer {
			padding: 20px 30px;
			background-color: #e17829;
			min-height: 170px;
		}
		
		article {
			margin: 20px 30px 20px 30px;
		}
		
		sup {
			font-size: 12px;
		}
		
		.largerDevices {
			display: block;
		}
	
		.smallerDevices {
			display: none;
		}
		
		#phoneLinkHolder{
			margin-left: 20px;
		}

		a {
			position: relative;
			text-decoration: none;
			color: #007db4;
			font: 22px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
		
		a#phoneOnOpen {
	/*		color: orange; */
			color: white;
		}
		
		a:after {
			content: '';
			display: block;
			position: absolute;
			bottom: -5px;
			left: 50%;
			height: 4px;
			width: 0;
			background: transparent;
		}
		
		a#phoneOnOpen:after {
  			transition: width .5s ease, background-color .5s ease, left .5s ease;
		}
		
		a#phoneOnOpen:hover, a#phoneOnOpen:active {
			color: #ff2c93;
		}
		
		a#phoneOnOpen:hover:after {
			width: 100%;
			left: 0;
			background: #FF2C93;
		}

		.link:after {
  			transition: width .5s ease, background-color .5s ease, left .5s ease;
		}
		
		.link:hover, .link:active {
			color: #ff2c93;
		}

		.link:hover:after {
			width: 100%;
			left: 0;
			background: #FF2C93;
		}
		
		p.firstSectionParagraph::first-letter {
			font-size: 2.8em;
			float: left;
			line-height: 0.8;
		}
		
		.endOfSection {
			padding-bottom: 40px;
		}
	} 

	/* Beginning of styles that apply to all devices, no matter the size. */
	
	p {
		font: 18px Geneva, Arial, Helvetica, sans-serif;
		color: dimgray;
	}
	
	blockquote {
		font: 20px Geneva, Arial, Helvetica, sans-serif;
		color: dark-gray;
	}
	
	ul {
		font: 16px Geneva, Arial, Helvetica, sans-serif;
		color: gray;
	}
	
	h2 {
		color: #ab4617;
		padding: 25px 0 0 0;
		font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		font-weight: bold;
	}
	
	h3 {
		color: #4e5a27;
		font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	}
	
	h4#scheduleWeek {
		color: #4e5a27;
		font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		margin-left: 30px;
	}
	
	.contentH2Heading {
		margin-bottom: 50px;
	}
	
	.contentSubHeading {
		margin-top: 40px;
		margin-bottom: 50px;
	}
	
	.manySectionsSubHeading {
		margin-top: 50px;
		margin-bottom: 25px;
	}
	

	
	.loginPromptContainer {
		position: relative;
		z-index: 100;
		width: 100px;
		float: right; 
		text-align: right;
		font: 18px Geneva, Arial, Helvetica, sans-serif;
		color: black;
	}
	
	.logInLink {
		display: inline-block;
		text-align: center;
		padding: 7px 12px;
		background-color: #007db4;
		font: 22px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	}
	
	.logInLink:link, .logInLink:visited {
		color: #ddff52;
		text-decoration: none;
	}
	
	.logInLink:hover, .logInLink:active {
		color: rgba(255, 255, 255, 0.8);
		text-decoration: underline;
		background-color: #008ecc;
	}
	
	#hoursDisplayTable {
		margin-top: 10px;
		margin-left: 0;
		padding-left: 0;
	}
	
	
	span.closingTimeInfo, td.closingTimeInfo {
		font: 16px "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	/*	color: gray; */
		color: white;
		margin-left: 0px;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	td.hoursText {
		vertical-align: bottom;
		color: white;
	}
	
	
	p.closingTimeInfo {
		font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	/*	color: gray; */
		color: white;
		margin-left: 0px;
		margin-top: 6px !important;
		padding-top: 0 !important;
	/*	margin-bottom: 23px !important; */
	/*	margin-bottom: 0 !important; */
		padding-bottom: 0 !important;
	}

/*	
	#nextOpenDayHours {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
*/	
	#openClosedIndicatorText {
		padding-top: 20px;
		font: 18px "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	/*	color: gray; */
		color: white;
	}
	
	#openWord {
	/*	font-size: 20px; */
		font-size: 24px;
		font-weight: bold;
	/*	color: orange; */
		color: white;
		margin-left: 10px;
		margin-right: 0px;
	}
	
	#closedWord {
	/*	font-family: macho, arial, sans-serif; */
		font-size: 24px;
		font-weight: bold;
	/*	color: orange; */
		color: white;
		margin-left: 10px;
		margin-right: 15px;
	}
	
	a#phoneOnOpen {
		font-size: 24px;
		margin-left: 0;
		padding-left: 0;
		font-weight: bold;
		margin-right: 15px;
	}
	
	a[href^="mailto:"] {
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		color: #00b1ff;
	}
		
	a[href^="tel:"] {
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		color: #00b1ff;
	}
	
	.viewProfileContainer {
		margin-top: 2px;
		margin-bottom: 7px;
		text-align: center;
		color: black;
	}
	
	#createProfileContainer {
		margin: 2px 0 7px 0;
		text-align: right;
		color: black;
	}
	
	.viewProfileLink {
		font-size: 16px;
	}
	
	#createProfileTinyLink {
		font-size: 14px;
		text-align: right;
	}
	
	.loggedinUserName {
		margin-top: 5px;
		margin-bottom: 5px;
		text-align: center;
		font-size: 12px;
		color: black;
	}
	
	#profilePhoto {
		max-height: 70px;
		max-width: 80px;
		display: block;
		margin: 0 auto;
	}
	
	#captionForProfilePhoto {
		margin: 0;
		text-align: center;
		font-size: 12px;
		color: black;
	}
	
	figure { /* The figure refers to the frame around, containing a photo and its caption  */
		max-width: 50%;
		float: right;
  		border: 5px #5c6e1c solid;
  		padding: 10px;
  		margin: auto;
		margin-left: 15px;
		margin-bottom: 10px;
	}
	
	@media screen and (max-width: 600px) { /* header styles for vertical composition on most mobile phones */
		figure {
			max-width: 100%;
			margin-left: 0;
			margin-bottom: 20px;
		}
	}
	
	@media screen and (min-width: 601px) and (max-width: 980px) { /* header styles for mobile devices up to vertical composition on most tablets */
		figure {
  			max-width: 55%;
			margin-left: 10px;
			margin-bottom: 20px;
		}
	}
	
	
	figcaption {
		background-color: #5c6e1c;
		color: white;
		padding: 2px;
		text-align: center;
		font: 16px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		font-style: italic;
	}
	
	.scriptwarning {
		color: red;
		font-weight: bold;
		font-size: 14px;
		font-family: monospace;
		text-align: center;
	}
	
	#bottomLeftUpperRowLink {
		clear: both;
		font-size: 22px;
		margin-bottom: 0px;
		margin-top: 20px;
	}
	
	#bottomRightUpperRowLink {
		float: right;
		text-align: right;
		margin-top: -26px;
		font-size: 22px;
		margin-bottom: 10px;
	}
	
	#bottomLeftLink {
		font-size: 22px;
		clear: both;
	}
	
	#bottomRightLink {
		float: right;
		text-align: right;
		margin-top: -26px;
		font-size: 22px;
	}	

	footer {
		clear: both;
		position: relative;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 20px;
		background-color: #00628d;
		color: white;
		text-align: center;
		font: 14px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	}