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

	@font-face {    /* importing regular Bellota */
		font-family: Bellota;
		src: url(../fonts/Bellota-Regular.otf); 
	}
	@font-face {    /* importing bold Bellota */
		font-family: Bellota;
		src: url(../fonts/Bellota-Bold.otf);
		font-weight: bold;
	}
	html,body {  /* let's reset some basic values at the start */
		width:100%;
		height:100%;
		padding:0;
		margin:0;
		background:#fff;
		font-family:arial; 
		text-align: center;
	} 
	#container {  /* this is the container for the whole page which contains the waterdrop background */
		background:url(../images/waterdrop.png) repeat-x; 
		background-size: auto;
		background-attachment: fixed;
	}
	#container1 { /* container for site content - full size is 1280 */
		position: relative;
		max-width:1280px; 
		margin:0 auto;
		background: white;
	}
	#banner_container { /* teal background at top of page; container for logo and top navigation */
		height: 100px;
		background:url(../images/teal_wb.png) repeat-x;
	}
	#logo_container {  /* container for logo */
		float: left;
		width: 23%;
		text-align: center;
		margin-top: 10px;
		margin-left: 10px;
	}
	.logotext {
		margin-top: 10px;
	}
	#top_navigation_container { /* container for top row navigation */
		position: relative;
		float: right;
		width: 73%;
		margin: 20px 10px 0 0;		
	}	
	.tn-menu { /* styling for the whole list of navigation links */
		margin: 0;
		padding: 45px 0 0 0;
		list-style: none;
		font-size: 20px;
	}
	.tn-menu li { /* styling for horizontal navigation text */
		position: relative;
		padding-right: 5%;
		padding-left: 5%;
		float: right;
		font-family: 'Bellota';	
		font-weight: bold;	
	}
	.tn-menu li a { /* styling for horizontal navigation link */
		color: #83479C;
		text-decoration: none;
	}
	.tn-menu li a:hover { /* styling for horizontal navigation link when hovering over it */
		color: #32C1DA;
	}	
	#clear_container { /* clear float settings */
		clear: both;	
	}
	#content_container { /* this container holds our 3 columns */
		
	}
	#left_side_container { /* left side has picture, quotes, contact info */
		float: left;
		width: 23%;
		margin: 15px 10px  10px 0;
		padding 0;
		padding-left: 10px;
	}
	#right_side_container { /* right side holds notes and testimonials */
		float: right;
		width: 23%;
		margin: -10px 10px 10px 10px;
		padding: 0;
	}
	#middle_container	{ /* middle side has text */
		float: left;
		display: inline-block;
		width: 47%;
		margin: -15px 10px 10px 20px;
	}
	#logo_text {  /* dropping logo text into left side container so that logo can be bigger */
		width: 100%;
		margin: 0 0 20px 0;
	}
	#picture, #picture2 { /*  picture shadow and margin */
		width: 100%;
		margin: 0 0 20px 0;		
	}
	#picture2 {
		padding-top: 20px;
		border-radius: 20px;
	}
	#quote_container { /* size the quote container */
		position: relative;
		width: 100%;
		font-size: 18px;
		margin: 10px 0 15px 0;
		height: 250px;
		box-shadow: 0 0 7px rgba(0,0,0,0.4);
	}
	#slideshow > div {  /* these are the divs inside the slideshow - one for each quote */
		position: relative; 
	}
	#quote_text { /* quote text is Bellota */
		padding: 20px;
		font-family: 'Bellota';
		display: inline-block;
	}
	#quote_author { /* quote author is Courier */
		padding: 0 20px 0 20px;
		font-family: 'Courier';		
		display: inline-block;
		text-align: right;
	}
	#contact_container {
		width: 100%;
		margin: 0 0 10px 0;
		font-style: italic;
	}
	#contact_container_2 {
		display: none;
	}
	#notes_container { /* justify notes text */
		width: 100%;
		margin: 0 0 0 0;
		text-align: justify;
		font-family: 'Bellota';
		font-size: 18px;
		color: #76408C;  /* just a tad darker than the logo so folks can read it */
	}
	#main_block_container	{ /* our middle container and main text - background of logo */
		width: 100%;
		min-height: 500px;
		margin: 0 0 20px 0;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 25px;
		font-size: 18px;
		text-align: justify;
		background:url(../images/LotusHandWaterMark2.png) no-repeat;
		background-position: center;
	}

	#box_navigation_container { /* container for the bottom navigation */
		width: 100%;
		margin: 0 0 10px 0;
	}
	#footer { /* container for the bottom navigation */
		width: 100%;
		background:url(../images/purple_wb2.png) repeat-x;
		font-size: 16px;
	}
	#footerLeft {  /* area for designed by */
		float: left;
		width: 20%;
		text-align: left;	
		margin: 22px 0 0 10px;
	}
	#footerRight { /* area for copyright */
		float: right;
		display: inline-block;
		width: 20%;
		text-align: right;	
		margin: 40px 10px 0 0;
	}
	#footerCenter { /* Eddi's contact information */
		float: center;
		display: inline-block;
		text-align: center;	
		margin-top: 8px;
	}	

	#header-style, #eddi-style {  /* Main heading of middle column and Eddi's name */
		font-family: 'Bellota';
		font-weight: bold;
		font-size: 24px;
		color: #32C1DA;
	}
	h3 { /* Center main heading of middle column */
		text-align:center;
	}
	.classMore .textPopUp {        /* normally, popup of testimonial isn't seen */
		display:none;	
	}
	.classMore:hover .textPopUp {  /* when hovering, pop up the testimonial */
		display: block;
		position: absolute;
		top: 150px;
		right: 20%;
		width: 325px;
		margin: 0px;
		padding: 10px;
		font-weight: normal;
		font-family: 'Bellota';
		background: #ffffff;
		text-align: justify;
		border: 3px solid #32C1DA;
	}	
	.imgNav {   /* style border of the navigation images at bottom of page */
		border: 3px solid #32C1DA;
		border-radius: 20px;
	}

	/*----------------------------------------------
	/* CSS settings for HTML div Exact Center. Contact form is from:
	/* http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
	------------------------------------------------*/
	#contactForm {
		width:100%;
		height:100%;
		opacity:.95;
		top:0;
		left:0;
		display:none;
		position:fixed;
		background-color:#313131;
		overflow:auto
	}
	img#close {
		position:absolute; 
		right:14px;
		top:14px;
		cursor:pointer
	}
	div#popupContact {
		position:absolute; 
		left:50%;
		top:17%;
		margin-left:-202px;
		font-family: Arial, Helvetica, sans-serif;
	}
	form {
		max-width:300px;
		min-width:250px;
		padding:10px 50px;
		border:2px solid gray;
		border-radius:10px;
		font-family: Arial, Helvetica, sans-serif;
		background-color:#fff
	}
	#formTitle {
		background-color:#FEFFED;
		padding:20px 35px;
		margin:-10px -50px;
		text-align:center;
		border-radius:10px 10px 0 0
	}
	hr {
		margin:10px -50px;
		border:0;
		border-top:1px solid #ccc
	}
	input[type=text] {
		width:85%;
		padding:10px;
		margin-top:15px;
		border:1px solid #ccc;
		font-size:16px;
		font-family: Arial, Helvetica, sans-serif;
	}
	#contactReason {
		width:93%;
		padding:10px;
		margin-top:15px;
		border:1px solid #ccc;
		font-size:16px;
		font-family: Arial, Helvetica, sans-serif;
	}
	textarea {
		width:85%;
		padding:10px;
		resize:none;
		margin-top:15px;
		border:1px solid #ccc;
		font-size:16px;
		font-family: Arial, Helvetica, sans-serif;;
		margin-bottom:15px
	}
	#submitButton {
		padding:5px;
		margin-bottom:10px;
	}
	#submitContactRequest {
		font-size: 16px;
		padding: 10px;
		margin-bottom: 10px;
	}

	/*----------------------------------------------	
	/* CSS Accordion styles from the CSS Ninja 
	/* http://www.thecssninja.com/css/accordian-effect-using-css 
	/*----------------------------------------------*/
	dl
	{
		padding: 10px;
		
	}
		dl dt
		{
			-webkit-border-radius: 15px;  /* radius changed from 5px */
			-moz-border-radius: 15px;
			border-radius: 15px;
			border: 1px solid #000000;
			margin: 0;
			font-family: 'Bellota';
			background: -moz-linear-gradient(left,  rgba(132,218,233,1) 0%, rgba(186,234,243,0) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(132,218,233,1)), color-stop(100%,rgba(186,234,243,0))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(left,  rgba(132,218,233,1) 0%,rgba(186,234,243,0) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(left,  rgba(132,218,233,1) 0%,rgba(186,234,243,0) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(left,  rgba(132,218,233,1) 0%,rgba(186,234,243,0) 100%); /* IE10+ */
			background: linear-gradient(to right,  rgba(132,218,233,1) 0%,rgba(186,234,243,0) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84dae9', endColorstr='#00baeaf3',GradientType=1 ); /* IE6-9 */
		}
			dl dt a
			{
				color: #000000;
				font-weight: bold;
				text-decoration: none;
				padding: 10px;
				display: block;
			}
			dl dt a:hover
			{
				font-size: 20px;
				-webkit-border-radius: 15px;  
				-moz-border-radius: 15px;
				border-radius: 15px;
				background: #84DAE9;
			}			
		dl dd
		{
			color: #000000;
			margin: 0;
			overflow: hidden;
			-webkit-transition: height 1.5s ease;
			-moz-transition: height 1.5s ease;
			-o-transition: height 1.5s ease;
		}
			dl dd p
			{
				padding: 10px;
				margin: 0;
			}
		dl dd:not(:target) { height: 0; }
		dl dd:target { height: 19em; }
		#Section1:target  { height: 25em; }    /* longest text, make height bigger */
		dl a.ie:hover dd,
		dl a.ie:focus dd
		{
			height: auto;
			color: #000000 !important;
		}

	/*----------------------------------------------	
	/* RESPONSIVE DESIGN - modify layout based off size of screen */
	/*----------------------------------------------*/

	@media (max-width:1250px) {
		#quote_container {     /* reduce size of quote font so the quotes fit in box */
			font-size: 14px;
		}  
	}
	@media (max-width:1050px) {
		.tn-menu li {           /* reduce spacing and font size of horizontal navigation */
			padding-right: 2%;
			padding-left: 2%;
			font-size: 16px;
		} 
		#quote_container {     /* increase height of quote box so they fit */
			height: 300px;
		}
		#footer {
			font-size: 12px;
		}
		#contact_container {
			font-size: 12px;
		}
	
		#left_side_container {
			width: 30%;
		}
		#middle_container {
			float: left;
			width: 60%;
		}
		#right_side_container {       /* let the right side section drop to the bottom */
			float: none;
			width: 95%;
			clear: both;
		}
		#notes_container {
			font-size: 16px;
		}
		#main_block_container {
			font-size: 16px;
		}
		#eddi-style {
			font-size: 18px;
		}
		.classMore {
			display: none;
		}
		#Section4:target  { height: 26em; }    /* longest text, make height bigger */
	}
	@media (max-width:900px) {
		#left_side_container {
			display: none;
		}
		#middle_container { 
			float: none;
			width: 90%;
			margin-top: 15px;		
			clear: both;
		}
		#main_block_container {
			min-height: initial;
		}
		#top_navigation_container { /* container for top row navigation */
			width: 17%;
			margin: -30px 10px 10px 0;		
		}
		#logo_container { /* container for top row navigation */
			width: 30%;		
		}
		#box_navigation_container { /* container for top row navigation */
			display: inline-block;
			width: 50%;		
		}
		#contact_container_2 { /* container for top row navigation */
			display: inline-block;
			font-style: italic;
			font-size: 12px;
			width: 42%;				
		}
				
	}
	@media (max-width:600px) {
		#Section1:target  { height: 40em; }    /* longest text, make height bigger */
		#Section2:target, #Section3:target  { height: 32em; }    /* longest text, make height bigger */
		#Section4:target  { height: 38em; }    /* longest text, make height bigger */
	}
	@media (max-width:500px) {
		#Section1:target  { height: 57em; }    /* longest text, make height bigger */
		#Section4:target  { height: 42em; }    /* longest text, make height bigger */
	}