/*css for learnable*/

/*basic browser styleSheet calls for Times New Roman, 16px font and spacing above and below all paragraphs*/
/*
/*at media query about 275*/
--basic reset rules
*/
*{margin: 0; padding: 0;}/*redefine all margins and paddings so you can adjust as you go*/

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

img, fieldset{border: 0;}

img {
	max-width: 100%;/*forces the img to fit it's container*/ 
	vertical-align: middle;
	}

button{cursor: pointer;}

ul {list-style: none;}/*get rid of the bullets*/
p.emphasis{
	font-size: 1.2em;
	font-weight: bold;
	font-style: italic;}
/*
--typography
*/
body, input, select, textarea, button{
	font-family: "PT Sans", sans-serif;
	font-size: 1em; /*16px*/
		}
p{
	line-height: 1.2em;/*was 1.75*/
	margin-bottom: 1.2em;
	}
a:focus{outline: 1px dotted red;}
/*
--structure
*/
.siteHeader, .navBar, .siteContent, .siteFooter{
	/*we're using 1em for the font-size,(16px) so since we want 940px, we divide 940/16 and get 58/.75*/
	max-width: 58.75em;/*940px*/
	min-width: 20em;/*320px*/
	margin: auto;/*center the content*/
}	
/*styles specifically for the header*/
.headerOuter{
	background-color: #ffffff;
	}

.logo{
	background-color: #eb6841;/*orange*/
	color:#fff;
	text-transform: uppercase;
	font-size: 2.625em;
	padding: 0.3em 1.25em;/*can't be 1em because of the font-size set above*/
	letter-spacing: 0.05em;
	float: left;	
}
.page{
	width: 95%;/*less than 100 so it will center itself with 5% on either side*/
	margin: 0 auto;/*replaced 2.1em*/
	background-color: #fff;
}
.tagline{
	font-style: italic;
	color: #000;
	font-size: 0.875em;	/*14/16*/
	float: right;
	margin-top: 2em;/*force the words down*/
}
.aaha{
	font-style: italic;
	color: #000;
	font-size: 0.875em;	/*14/16*/
	float: right;
	margin-top: 2em;/*force the words down*/
}
.motto{
	background-color:#2b3087;
	color: #ffffff;
	text-align:center;
	}
/*excellent compassionate....*/
.saying{text-align:center;
	font-size: 1.2em;/*19px*/
	color: #fff;
	font-weight: bold;
	margin-bottom: 0.1em;}
/*pageMain has greater margins than siteContent*/
.pageMain{
	width: 95%;/*less than 100 so it will center itself with 5% on either side*/
	margin: 2.1em auto;
	background-color: #fff;
	display:block;
}
.lftContainer{
	background-color: #fff;
	/*width: 20%;*/
	width: 300px;
	float: left;
	display: block;
	text-align:center;	
}
/*petAge group*/
.petAge{
background-color:#fff;
}
.petAgeLft{
	background-color: #fff;
	width: 75%;
	float: left;
	display: block;
	text-align:center;	
}
.petAgeRt{
	background-color: #fff;
	width: 25%;
	float: left;
	display: block;
	text-align:center;	
}
.petAgeLinks a{
	text-decoration: none;
	color: #B76567;
	padding: 0.2em 0.8em;
	margin: 0.8em 0;
}
.petAgeLinks a:hover{
	color: #B89666;
	opacity: 0.7; 
		}
.petAgeLinks a:active{
			background: #B76567;
			color: #DEDC7A;
		}
.petAgeDesc{
	display: block;	
	float: left;
	margin: 0.5em auto;
	padding: 0 0.4em 0 0.4em;
	width: 100%;
	text-align: center;	
}
div.petAgePixRt{
  width: 15%;
  height: 100px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  }
  div.petAgePixLft{
  width: 15%;
  height: 100px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  }
  
  div.petAgeWordsLft{
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  }
  
  div.petAgeWordsFull
  {
  width: 100%;
  text-align: justify;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  background-color: #fff;
  }
.announce{
	font-family:Serif, Sans-serif, Comic Sans Ms;
	font-weight:bold;
	font-size: 1.12em;
	letter-spacing: 0.11em;
	line-height:105%;
	text-indent:0.83em;
	text-align:justify;
	}
.petAgeul{
	list-style: bullets;
	font-weight: bold;
	text-align: left;
	text-indent:0.83em;
	
}
.petAgeulNormal{
	list-style: bullets;
	font-weight: normal;
	text-align: left;
	text-indent:0.83em;
	
}
.newClient{
	background-color: #fff;
	width: 95%;
	margin: 0.2em;
	border-color: #000;
	border-width: 0.1em;
	border-style: solid;
	text-align:center;	
}
.newClient a{
	text-decoration: none;
	color: #F66773;
	padding: 0.2em 0.8em;
	margin: 0.8em 0; 
}
.newClient a:hover{
			opacity: 0.7; 
		}
.newClient a:active{
			background: #fff;
			color: #60A85D;
		}
.clientForm{
	display: block;	
	float: left;
	margin: 0.5em auto;
	padding: 0 0.4em 0 0.4em;
	width: 48%;
	text-align: center;	
	}
.clientForm a{
	text-decoration: none;
	color: #F66773;
	padding: 0.2em 0.8em;
	margin: 0.8em 0; 
}
.clientForm a:hover{
			opacity: 0.7; 
		}
.clientForm a:active{
			background: #fff;
			color: #60A85D;
		}
.ePet{
	background-color: #fff;
	width: 95%;
	margin: 0.2em;
	border-color: #000;
	border-width: 0.1em;
	border-style: solid;
}
.lifeLearn{
	background-color: #fff;
	width: 95%;
	margin: 0.2em;
	border-color: #000;
	border-width: 0.1em;
	border-style: solid;
}

.rtContainer{
	background-color:#fff;
	display: block;	
	float: left;
	margin: 0.1em auto;
	}

.insideRtContainer{
	background-color: #fff;
	width: 95%;/*must retain to hold shape*/
	margin: 0.1em auto;
	display: block;	
	float: left;
	}
	
.mission{
	background-color: #fff;
	width: 95%;
	display: block;
	margin: 0.1em auto;
	border-color: #000;
	border-width: 0.1em;
	border-style: solid;
}
.hours{
	background-color: #fff;
	width: 95%;
	display: block;
	margin: 0.1em auto;	
}
/*footer stuff*/
/*footer*/
.footerContainer{
	background-color:#fff;
	width: 95%;
	display: block;	
	float: left;
	margin: 0.1em auto;		
}
.footerOuterServices{
		background: #fff;
		}
.footerOuter{
		background: #eb6841;
		width: 95%;/*less than 100 so it will center itself with 5% on either side*/
		margin: 0.06em auto;
		}
.siteFooter{
		padding: 1.25em 0;
		}		
.siteFooter, .siteFooter a{
		color: #fff;
	}	
/*footerCredit*/
.footerCredit{
			float: left;
			width: 42%;/*500px/940px*/
			}		
.footerCredit h2{
			text-transform: uppercase;
			font-weight: bold;
			font-size: 1.125em;
		}		
.footerCredit p{
			line-height: 2em;
			font-size: 0.875em;
		}
/*footerSocial*/
.footerSocial{
			float: right;
		}
.footerSocial li{
			display: inline-block;/*display horizontally*/			
		}		
.footerSocial a{
			background: no-repeat center center;/*center horizontally and vertically*/
			display: block;/*keep dimensions and padding consistent*/
			width: 1em;
			height: 1.4em;
			padding: 0.5em 0.7em;
			margin-left: 0.5em;/*provide space between links*/
			border-radius: 2em;/*curve the corners a little*/
		}
.footerSocial .twitter{
			background-image: url(../images/icon_twitter_small.png);
			background-color: #47c2e5;
			}		
.footerSocial .facebook {
			background-image: url(../images/icon_facebook_small.png);
			background-color: #477fe5;
		}
.footerSocial .gPlus {
			background-image: url(../images/icon_gplus_small.png);
			background-color: #d43636;
		}
.footerSocial .blogDog{
			background-image: url(../images/blogDogWhite.png);
			background-color:#99ffff;
		}		
.footerSocial a:hover{
			box-shadow: 0 0 8px rgba(255,255,255,0.6);/*white with 60% opacity*/
		}
/*less than 320px*/
@media screen and (max-width: 20em)
{
	.rtContainer, insideRtContainer{
	float: left;
	margin-right: 4%;
	width: 100%;
	font-size: 90%;
	background-color: green;
	}
}
@media screen and (max-width: 30em)
{
	.rtContainer, insideRtContainer{
	clear: both;
	overflow: hidden;
	width: 100%;
	font-size: 90%;
	background-color: red;
	}
}
/*less than 600px*/
@media screen and (max-width: 37.5em) {
    .rtContainer, .insideRtContainer{
    float: left;
	margin-right: 2%;
    width: 100%;
    font-size: 90%;
    background-color: blue;    
     }
}
@media screen and (max-width: 37.5em) {
	.footerOuter{
	margin: 2em auto;
	width: auto;
	}
	}
	/*less than 768px*/
@media screen and (max-width: 48em) {
    .rtContainer, .insideRtContainer{
    margin: 2em auto;
    width: auto;
    font-size: 95%;
    }
}

/*footerNav*/
.footerNav{
	float: left;
	opacity: 0.5;/*white text with 50% opacity*/
	font-size: 0.75em;/*12 px*/
	text-transform: uppercase;
	}
.footerNav li{ display: inline-block;}
.footerNav a{text-decoration: none;}
.footerNav a:hover{text-decoration: underline;}
/*pseudo elements are elements that exist only in the css code*/
/*use double colons for id (::) - older browsers may not support the double colon syntax*/
/*add slashes between links w/o doing in the html*/
.footerNav li:after{
	content: " / ";/*add a space, a slash and a space after each link*/			
		}
		/*remove the / after the last link*/
.footerNav li:last-child:after{content: " ";}
/*footerCopyright*/
.footerCopy{
		float: right;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.65em;
		font-style: italic;
	}
.footerCopyTitle{
		float: left;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.65em;
		font-style: italic;
	}
	
 .copyright {
  font-family: "Bookman Old Style", "Times New Roman";
  font-size: 0.65em;
  color: #400000;
  float: right;
  text-transform: uppercase;
  font-weight: bold;
  }	
	/*end footer stuff*/
/*--navigation */
.navOuter{
	background: #2B3087;	
}
/*main navigation*/
.siteNav{
	float: left;
		}
.siteNav li{
			display: inline-block;/*don't stack, flow across the page*/
		}
.siteNav a{
			display: block; /*allows styling*/
			text-decoration: none;/*remove underline*/
			color: #fff;
			padding: 0.2em 0.8em;
			margin: 0.8em 0;			
		}
.siteNav a:hover{
			opacity: 0.7; 
		}
.siteNav a:active{
			background: #fff;
			color: #00a0b0;
		}

p.hours a{
			display: block; /*allows styling*/
			color: #304A9C;
			font-weight: bold;
			padding: 0.2em 0.8em;
			margin: 0.8em 0;			
		}
p.hours a:hover{opacity: 0.7;}	
p.hours a:active{
			background: #fff;
			color: #00a0b0;}
/*care list links*/
li.careList a{
	color: #330066;
}
li.careList a:hover{
	color: #680054;
	opacity: 0.7;
}
li.careList a:visited{
	color: #00B594;
}		
/*search*/
.siteSearch{
			float: right;			
		}		
.searchField{
				background: #fff;
				padding: 0.2em;
				margin: 0.8em 0;
				border-radius: 1em;/*rounded corners*/
		}
.searchField input{
			background: transparent;
			border: 0;
			width: 9em;
			font-size: 0.875em;
			padding: 0.2em 0.4em;
		}		
.searchField button{
			background: transparent url(../images/icon_search_small.png) no-repeat center center;/*center horiz and vert*/
			border: 0; 
			width: 2em;/*must test to find out*/
			height: 1.5em;
			/*overflow: hidden is already set above*/
		}
/*--end search section*/
/*content*/
section{
		margin-bottom: 2em; /*provide space below each section*/
	}
	/*the greater than symbol(>) is the child selector. So this rule will only apply to h2's that are direct child elements of sections*/
section > h2{
		text-transform: uppercase; 
		color:#6f6f6f;
		font-weight: bold;
		margin-bottom: 1em;
		font-size: 1.5em; /*24px / 16px*/
		}
	/*features*/
.features{
			margin-top: 1em;/*push down from page top*/			
		}
		/*the image is behind the slide text > perfect for "position" property, along with coordinates top, left, right, bottom (these coordinates only work with the other position values) > all elements in html have default position of static (means the element exists and occupies space) > 
		/*slideshow*/
.slideshow{
			margin-bottom: 1.7em;/*add space between slideshow and welcome text*/
			}			
.slideshow, .slide{
			position: relative;
		}
		/*add rounded borders*/
.slide, .slide img{
			border-radius: 1em;
		}
		/*the slide is now in position context, so text can be positioned inside it*/
.slideText{
			position: absolute;/*makes the text go on top of the other elements, inside the div*/
			top: 40%;
			left: 0;
			padding: 1em 5em 1em 1.5em;
			background: rgba(235, 104, 65, 0.7);
			color: #fff;
			text-transform: uppercase;
		}
.slideText h2{
			margin: 0;
			color: #fff;
			font-size: 2em; /*32px*/
			font-weight: bold;
			line-height: 1em;/*makes it closer to the text below*/
		}
.slideText p{
			margin: 0;
			line-height: 1.5em;
			font-size: 1.125em;/*18px;	*/		
		}
.slideshowPager{
			position: absolute;
			bottom: 0.5em;
			right: 0.5em;
		}
.slideshowPager li{
			display: inline-block;
		}
.slideshowPager a{
			display: block;
			background: rgba(33,183,198,0.7);
			border: 2px solid #FFF;/*make it square so it can be changed to a circle*/
			width: 1.25em;
			height: 1.25em;
			border-radius: 1em;	/*change to circle*/	
		}
.slideshowPager a:hover, .slideshowPager a.active{background: #2B3087;}		
/*position: absolute; /*will place the element 50px from the top and 50px from the left edge of the page - it also removes it from the document flow - the other elements act as if it doesn't exist*/
			/*top: 50px;/*the element will move - BUT - it's original position is still occupied*/
			/*left: 50px;*/			
		/*end slideshow*//*welcome text*/
.welcomeText{
				text-align:center;
			}
.welcomeText a{
				font-size: 0.875em;
				text-transform: uppercase;
				color: #3130D9;
				margin-bottom: 0.1em;				
			}
.welcomeText p{
				font-size: 1.1em;/*14px*/
				color: #304A94;
				margin-bottom: 0.2em;
				}
.welcomeText p strong{
				color: #6f6f6f;
				font-weight: normal;
				font-size: 1.5em;
				line-height: 1.5em;				
				}
/*end welcome*/

h2.sectionTitle {
			text-align: left;
			text-transform: uppercase;
			font-style: italic;
			font-weight: bold;
			color: #304A9C;
			font-size: 1.1em;
			line-height: 1.5em;
			padding: 0 0 0 1em;
		}
.workList{
			text-align: center;
			}			
.workList li{
			display: inline-block;
			width: 10.6875em;
			margin: 0 1.2em;
			vertical-align: top;
		}		
.workList a{
			display: block;
			text-decoration: none;
			position: relative;/*the positioning context for the overlay*/
		}		
.workList img{
			border-radius: 6em;
			display: block;
			margin-bottom: 1em;
		}
.workList h3{
			text-transform: uppercase;
			font-weight: bold;
			color: #6e6e6e;
			font-size: 1em;
		}		
.workList p{
			font-style: italic;
			color: #4E3094;
			font-size: 1.2em;
			line-height: 1.5em;
		}		
.workList li:hover h3{
			color:#eb6841;/*the hover pseudoClass can be applied to almost any element*/			}
/*this goes after the content, inside the link, when the link is hovered*/
/*.workList li:hover a:after{
			content: " ";/*give the element a space*/
			/*the orange circles during the hover*/
/*			background: rgba(184, 189, 242, 0.5) url(../images/icon_view_big.png) no-repeat center center;
			width: 10.6875em;
			height: 10.6875em;
			border-radius: 6em;
			position: absolute;
			top: 0;
			left: 0;
		}
.workListWrapper{
			position: relative;/*the position context for the arrows*/
		}
/*end recent work*/
/*latest posts > postListGroup*/
.postList a{
		text-decoration: none;
		color: #fff;
		display: block;
	}
	/*each post is about 440px / 940px (the page) = 27.5em*/
.postList li{
		float: left;/*float the first post left*/
		width: 46.5%;
		background: #21b7c6;
		}
/*float the 2nd post right*/
	/*use the pseudoclass nth child to select even or odd # item > this rule with only target the even numbered items*/
.postList li:nth-child(even){
		float: right;
		background: #eb6841;
	}
	/*columns inside the post*/
.postText, .postImg{
		width: 50%;
		float: left;
	}
.postText{
		padding: 1.25em 1.8em;
		box-sizing: border-box;/*includes the border in the size of the box*/
	}
.postText h3{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.125em;
	}
.postText time{
		display: block;
		margin: 0.5em 0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.75em;
	}
.postText p{margin: 0;}
.postList a:hover h3{
		text-decoration: underline;
	}
/*end latest posts*/
/*testimonials*/
/*need the 2 columns the same height or the layout will be broken*/
/*using display: table to control the height*/
.testimonialList li{
		background: #f5f5f5;
		/*display: table;*/
	}
.testimonialText, .petImg{
	/*	display: table-cell;/*make the columns behave like table cells*/
		box-sizing: border-box;		
	}
.testimonialText{
	width: 100%;/*this div is about 700px and the img div is about 240px - divide 700/940 = .7446*/
	padding: 2.5em;
	}
.testimonialText h3{
		font-size: 1.125em;
		color: #eb6841;
		margin-bottom: 0.8em;
		text-transform: uppercase;
		font-weight: bold;
	}
.testimonialText p{
		margin: 0;/*reset the margin we set earlier*/
		color: #6f6f6f;/*gray*/
	}
h2.businessLogo{
		text-align: center;
		font-style: italic;
		color: #304A9C;
		font-size: 1.1em;
		/*line-height: 1.5em;*/
		margin: 1em;
		}					
	/*in containers with display table cell, we can use vertical align; but not in floats*/
.petImg{
		vertical-align: middle;
		text-align: center;/*center the img vertically and horizontally*/
		background-size: cover;
		background: #fff;
		width: 25%; /* 240 / 940 */
		position: relative;
	}
.petImg img{
		border-radius: 4em;/*change the square img to a round one*/
	}
	/*
	.petImg:after{
		position: absolute;
		content: " ";/*empty element*/
	/*	display: block;/*so the element can appear*/
	/*	border: 0.5em solid transparent;/*makes every border transparent with .5em or 8px thickness*/
	/*	border-right: 0.5em solid #eb6841;
		top: 7.5em;/*the arrows take some fiddling with to position correctly*/
	/*	left: -1em;
	}*/	/*making triangles with css > apply a very thick bar to an empty element and then make three of the borders transparent > the borders become so thick that they join with one another and form triangles*//*end testimonials*//*get in touch*/
.contactText{
		float: left;
		width: 29.78%;/*280/940*/
	}
.contactText p{
		margin: 0;
		color: #6e6e6e;
		padding: 1em 1em;
	}
.contactForm{
		float: right;
		width: 65%;/*640/940 = 65%*/
	}
h2.contact{
		text-align: left;
		font-style: italic;
		color: #304A9C;
		font-size: 1.1em;
		line-height: 1.5em;
		}					
/*end get in touch*//*form*/
.field{
		margin-bottom: 1em; 
	}
fieldset.group .field{
		float: left;
		width: 49%;
		margin-right: 2%;/*with this rule, both divs have emerging lines and the width will be above 100%; so it won't work yet*/
		}
fieldset.group .field:last-child{
			margin-right: 0;
		}
		/*general styles for the form*/
.inputField label, .inputField input, .textareaField textarea{
			display: block;
			box-sizing: border-box;			
		}		
	/*basically a 2 column layout*/
	/*name field and label field have height of 45px/ 16 = 2.8125*/
.inputField label, .inputField input{
		height: 2.8125em;/*45/16*/		
	}
.inputField label{
		width: 18.6%;/*56/300*/
		float: left;
		color: #fff;
		background: #ccc no-repeat center center;/*gray*/
		border-radius: 0.2em 0 0 0.2em;
	}	
.inputField input{
		width: 81%; /*244/300*/
		float: right;
		background: #f1f1f1;
		font-weight: bold;
		padding: 0.5em;
		border:0; 
		color: #6f6f6f;
	}
	/*background img for labels*/
.nameField label{
			background-color: #21b7c6;
			background-image: url(../images/icon_person_small.png);
	}
.emailField label{
		background-color: #eb6841;
		background-image: url(../images/icon_mail_small.png);
	}
	/*hide text area label with hideVis class*/
.textareaField textarea{
		width: 100%;
		height 10em;
		border: 2px solid #21b7c6;
		border-radius: .5em; 
		padding: 1em;
		color: #ababab;
	}	
.inputField input:focus, .textareaField textarea:focus{
		background: #e6fdff;/*light blue*/
	}
.submitButton{
		float: right;
		font-weight: bold;
		font-size: 1.125em;
		color: #fff;
		background: #21b7c6;
		border: 0;
		text-transform: uppercase;
		padding: 0.5em;
		border-radius: 0.2em;
		}
/*end form*//*end features*//*end content*//*--general Use*//*clearfix code*/
.group:before, .group:after{
	content: " ";
	display: table;
}
.group:after{
	clear: both;
}
.hide-vis {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
/*move the text off screen, screen readers can read it*/ 
.hideText {
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
/*class staff used to enclose and control the individual divs that hold each staff member's bio*/
div.staff{
width: 98%;
padding: 0 0 0 0em;
border: 1px solid #ccc;
}
 div.bio{
 cellpadding: 1em 1em;
 margin: 1em;
 }
 /*office staff*/
  div.barb{
  width: 15%;
  height: 120px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;
  background-position: 2px 3px;
 
  }
  div.aly{
  width: 15%;
  height: 100px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:0.75em 0 1.0em 0;*//*just makes the div taller*/
  /*background-position: 2px 3px;
  /*background: url(../images/alyCut.jpg) no-repeat;*/
  }
  div.alice{
  width: 15%;
  height: 120px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  
  }
/*  div.jean{
  width: 15%;
  height: 100px;
  float: left;
  margin: 0.5em;
  cellspacing: 1em;
 padding:0 0 1.0em 0;
  }
*/
  div.tami{
  width: 15%;
  height: 120px;
  float: left;
  margin: 1px;
  cellspacing: 1em; 
  }
  div.corrie{
  width: 15%;
  height: 100px;
  float: right;
  margin: 1px;
  cellspacing: 1em;
  padding:0.75em 0 1.0em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  /*background: url(../images/coreyCut.jpg) no-repeat;*/
  }
/*list of techs*/
div.bunny{
  width: 15%;
  height: 100px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  /*background: url(../images/bunnyCut.jpg) no-repeat;*/
  }
  div.lori{
  width: 15%;
  height: 120px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;
  background-position: 2px 3px;
  /*background: url(../images/loriCut.jpg) no-repeat;*/
  }
  div.jilly{
  width: 15%;
  height: 130px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/jillyCut.jpg) no-repeat;*/
  }
  div.stacy{
  width: 15%;
  height: 130px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/stacyCut.jpg) no-repeat;*/
  }
  div.cover{
  width: 15%;
  height: 130px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/coverCut.jpg) no-repeat;*/
  }
  div.jessie{
  width: 15%;
  height: 130px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/jessieCut.jpg) no-repeat;*/
  }
  div.erika{
  width: 15%;
  height: 100px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/erikaCut.jpg) no-repeat;*/
  }
  div.kaley{
  width: 15%;
  height: 130px;
  float: right;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 0px 3px;
  /*background: url(../images/kaleyCut.jpg) no-repeat;*/
  }
  div.nancy{
  width: 15%;
  height: 130px;
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
 /* background: url(../images/nancyCut.jpg) no-repeat;*/
  }
  
  
/*end list of imgs*/ 
 
div.contain{
	width: 100%;
	padding: 0 0 0 0em;
	border: 1px solid #ccc;
	background-color: #fff;
}
 div.services{
width: 98%;
padding: 0 0 0 0em;
border: 1px solid #ccc;
background-color: #fff;
}
div.servicesOne{
  width: 28%;
 margin:  0 0 .5em 1em;
  padding:0 1.5em 1em .5em;/*0*/
  float: left;
  background-color: #E9FFE0;
  background-position: 20px 10px;
  background: url(../images/drawings/smCRI_CCRT_logo.gif) bottom right no-repeat;
   -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.servicesTwo{
  width: 28%;
  margin:  0 0 .5em 0;
  padding:0 1.5em 1em .5em;
  float: left;
  background-color: #fff9eb;
  background-position: 30px 23px;
 -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.servicesThree{
  width: 28%;
  margin:  0 0 .5em 0;
  padding:0 1.5em 1em .5em;
  float: left;
  background-color: #E6FAF8;
  background-position: 0px 3px;
 -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.dictionary{
  width: 100%;
  margin:  0 0 .5em 0;
  padding:0 1.5em 1em .5em;
  float: left;
  background-color: #FAFCFF;
  background-position: 30px 23px;
 -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.references 
  {font-family: "Bookman Old Style", "Times New Roman";
  font-size: 10px;
  color: #400000;
  }	
 
   .links p{
  line-height: 1.2em;
  font-size: .9em;
  margin-left: 1.5em;
  margin-bottom: .5em;
  }
  /*add the graphics in front of the paragraphs*/
   /*links w/n the divs with pix*/
   /*same div.oneLink for the about page and the dr page*/
  div.oneLink{
  width: 32%;
  height: 100px;
  float: left;
  margin: 1px;
  cellspacing: 1em;
  /*padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: left 25%;
  border: 1px solid #ccc;
 background: url(../images/nancCut.jpg) no-repeat;
  background-size: auto 95%;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.twoLink{
  width: 33%;
  height: 100px;
  margin: 1px;
  cellspacing: 1em;
  float: left;
  background-position: 10px 3px;
  border: 1px solid #ccc;
  background: url(../images/bunnyCut.jpg) no-repeat;
  background-size: auto 95%;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.threeLink{
  width: 32%;
  height: 100px;
  margin: 1px;
  cellspacing: 1em;
  float: left;
  background-position: left 25%;
  border: 1px solid #ccc;
  background: url(../images/barbCut.jpg) no-repeat;
  background-size: auto 95%;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.stemCell{
  width: 15%;
  /*height: 100px;*/
  float: left;
  margin: 2px;
  cellspacing: 1em;
  padding:1.5em 0 1.5em 0;*//*just makes the div taller*/
  background-position: 2px 3px;
  
  }
  p.label a{
  	text-align: right bottom;
  	display: block; /*allows styling*/
  	text-decoration: none;/*remove underline*/
  	color: #fd7400;
  	/*background-color: #fff;*/
  	font-size: 1.2em;
  	font-weight: bold;
  	padding: 1.5em 0.8em;
  	margin: 0.8em 0;
  }
 div.general{
 	width: 98%;
 	cellpadding: 1em 1em;
 	margin: 1em;
}
p.building{
	padding: 0.2em 0.8em;
  	margin: 0.8em 0;
  	text-align: right;
}
  div.years{
  width: 67%;
  }
  /*franki*/
  div.fourLink{
  width: 33%;
  height: 100px;
  margin: 1px;
  /*padding:0 0 1.5em 0;*/
  float: left;
  background-position: left 25%;
  background: url(../images/frankiCut.jpg) no-repeat;
  background-size: auto 95%;
   -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  /*tracy*/
  div.fiveLink{
  width: 33%;
  height: 100px;
  margin: 1px;
  /*padding:0 0 1.5em 0;*/
  float: left;
  background-position: left 25%;
  background: url(../images/tracyCut.jpg) no-repeat;
  background-size: auto 95%;
   -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.staffAttentionBox {
  background: #fff;
  border: 1px solid #ccc;
  width: 25em;
  margin: 1.5em auto;
  padding: 1em 5em 1em 2em;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
 p.missionStatement{
 	font-weight:bold; 
 	font-family: 'Times', 'Georgia', Helvetica;
 	font-size: 1em;
 	padding: 1em 0 0 1em;
 }  
 /*not used - save for articles*/
div.columns{
	font-size: 1.1em;
	/*width: 640px;*/
	margin: 8px auto;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 47px;
	-moz-column-gap: 47px;
	column-gap: 47px;
	-webkit-column-rule: 1px solid #333;
	-moz-column-rule: 1px solid #333;
	column-rule: 1px solid #333;
}
/*--section specific*/
/*id's start here*/
/*form*/
#formWrapper {
	/*width: 100%;*/
	float: left;
	background-color: #F7F0E3;
	border-top-width: 0em;
	border-right-width: 0em;
	border-bottom-width: 0em;
	border-left-width: 1em;
	margin: 1em;
	padding: 0 1em 1.5em 1em;	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #000;
}
/*contact text line 402*/
.contact p{
	margin-bottom: 1.5em;
}
.contact h2{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;
	line-height: 1.5em;
	font-weight: bold;
	font-style: italic;
	color: #304A9C;
	padding: 0px;
	text-align: left;
}
.txtField{
	
	margin: 1em;
	padding: 0 1em 1.5em 1em;	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #000;
	}
table.wellnessSurvey{
	width: 100%;
	background-color: #fff;
	color: #000;
	margin: 0 0 0 10px;
	padding: 10px;
}
h1.wellnessSurvey{
	color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.0em;
	line-height: 1.5em;
	font-weight: bold;
	padding: 0px;
	text-align: center;
}
p.footerCopyWellnessSurvey{
		float:right;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.65em;
		font-style: italic;
	}