/*Starfish Colors*/
/*dark blue #146fab*/
/*light blue #6ec5fe*/
/*purple #6a1f88*/
/*bright green btn #7fce1e */
/*bright purple btn #a112c0 */
/*	
outline: 1px solid red;  
*/

* {
	margin: 			0;
	padding: 		0;
	outline: 		none;
	border: 			none;
}

body {
	font-family: 	"Trebuchet-MS", Arial, Helvetica, sans-serif;
	font-size: 		62.5%;
	background: 	white;
}

div#wrapper {
	position: 		relative;
	width: 					750px;
	margin: 				0 auto;
}

/*main div container with starfish graphic on frt page*/
div#star {
	position: 		relative;
	width: 					722px;
	height:					346px;
	margin: 				0 auto;
	background: 	url(../css/images/star.jpg) no-repeat;
}

/*container for WORK - choose print, web or animation from here*/
div#work {
	position: 		relative;
	width: 					722px;
	margin: 				0 auto;
}

/*change here to move to left side*/
div#navigation {
	position: 		absolute;
	width: 					80px;
	left: 						-70px;
}

div#navigation ul {
	list-style: 	none;
	margin: 					0px 0px 0px 0px;
}

div#navigation ul li {
	margin: 					0px 0px 0px 0px;
}

div#navigation ul li#current a{
	background: 	url(../css/images/starfish-nav-btn.jpg) 0 -160px;
}

div#navigation ul li#current a:hover{
	background: 	url(../css/images/starfish-nav-btn.jpg) 0 -80px;
}

div#navigation ul li a {
	display: 				block;
	color: 						white;
	text-decoration: none;
	text-indent: 	0px;
	font-weight: 	bold;
	font-size: 			1.5em;
	text-align:			center;
	height: 						80px;
	line-height: 	80px;
	background: 		url(../css/images/starfish-nav-btn.jpg);
}

div#navigation ul li a:hover {
	background-position: 0 -80px;
}

div#navigation ul li a:active {
	background-position: 0 -160px;
}

/*sends copy off screen in order to use images with no text on main graphic*/
div#star-header h1 {
	text-indent: 	-3000em;
}

/*Print - Web - Animation text inside container on frt page*/
h2	{
	padding:					340px 0px 0px 410px;	
	color:							black;	
	font-weight:	bold;
	font-size:			200%;
}
/*Lead in copy on web page*/
h3	{
	font-size:		125%;
	text-align:		center;
}

/*Quote on front page at bottom*/
div#quote	{
	width: 			722px;
	font-size:		140%;
	line-height:	270%;
	text-align:		center;
	font-style: 	italic;
}

/*This container holds the Starfish intro copy-------------------------------Front page*/
div#zingBox1 {	
	color:				black;
	background-color:   white;
	font-size:			130%;
	font-weight:		bold;
	line-height:		150%;
	width: 				232px;  
	margin:				20px 20px 0px 0px;
	text-align:			left;
	float:				left;
}	
/*NEW in  PRINT */
div#zingBox2	{   
	float:				left;
	width: 				217px;
	margin:				20px 20px 0px 0px;
}

/*NEW on the WEB */
div#zingBox3	{   
	float:				left;
	width: 				233px;
	margin:				20px 0px 10px 0px;
}
/* divider between zings and images*/
.spacer {
	background-color: 	white;
	margin:				0px;
	padding:			0px;
	width:					249px;
 height:     5px;
}	 	
/*This container is on the Contacts page, intro----------------------------------------------------------------------Contact*/				
div#zingBox4 {	
	color:				black;
	background-color:   white;
	font-size:			150%;
	line-height:		170%;
	width: 				310px; 
	height:				120px;
	margin:				0px;
	padding:           	15px 0px 0px 0px;
	text-align:			left;
	float:				left;	
		}	
/*This container is on the Contacts page, map*/				
div#zingBox5 {	
	color:				black;
	width: 				133px; 
	height:				120px;
	margin:				0px;
	padding:   10px 0px 0px 7px;
	float:				left;	
		}	
/*This container is on the Contacts page, Call today for Quote*/				
div#zingBox6 {	
	width: 				270px; 
	height:				260px;
	margin:				0px 0px 0px 0px;
	float:				left;
		}	

/*Temporary for back to school----------------------------------------------------------------------Contact*/				
div#back-to-school {	
	width: 				700px; 
	height:				370px;
	margin:				0px 0px 20px 180px;
	float:		 		left;	
		}	

/*This container for testing animation----------------------------------------------------------------------Contact*/				
div#test-animation {	
	width: 				700px; 
	height:				700px;
	margin:				0px;
	float:				left;	
		}	

/*new stuff ------------------------------------------------*/
div#new-stuff {	
	width: 				750px; 
	height:				auto;
	margin:				0px;
		}	
.new-stuff-header{
	float:				left;
	margin: 			0px 0px 0px 30px;
	font-size:			1.75em;
	line-height:		2em;
	font-weight:		bold;
	text-align:			left;
}
/*image to right*/
.new-stuff {
	float:				right;
	margin: 			0px 0px 0px 0px;
	width: 				390px;
	color:				black;	
	font-weight:		bold;
	font-size:			150%;
}
/*copy to left*/
.new-stuff-p {
	float:				left;
	width: 				300px;
	margin: 			0px 0px 0px 30px;
	padding:           	0px 0px 0px 0px;
	color:				black;	
	font-size:			1.5em;
	line-height:		1.5em;
	text-align:			left;
}
.new-stuff-bullets {
	float:				left;
	clear:				both;
	width: 				700px;
	margin: 			0px 0px 15px 0px;
	color:				#6ec5fe;	
	font-weight:		bold;
	font-size:			4em;
	line-height:		.5em;
	text-align:			center;
}
.new-stuff-tagline {
	float:				left;
	clear:				both;
	width: 				700px;
	margin: 			0px 0px 15px 0px;
	color:				black;	
	font-weight:		bold;
	font-size:			1.7em;
	line-height:		1.5em;
	text-align:			center;
}
/*web samples------------------------------------------------*/
.sample-box-web {
	margin: 			0px;
	border: 			15px solid white;
	padding:			0px 0px 0px 0px;	
	width: 				300px;
	height: 			auto;
	float:				left;
	color:				black;	
	font-weight:		bold;
	font-size:			150%;
}
.sample-box-web-p {
	margin: 			0px;
	padding:			30px 50px 0px 0px;	
	width: 				250px;
	height: 			auto;
	float:				right;
	color:				black;	
	font-weight:		bold;
	font-size:			130%;
}

/* divider between websites on web page */
.web-bar {
	background-color: 	#146fab;
	margin:				0px 0px 0px 15px;
	padding:			0px 0px 0px 0px;
	width:				680px;
  	height:           	5px;
	float:				left;
}	

/*animation samples----------------------------------------------*/
.sample-box-animation {
	margin: 		0px;
	border: 		20px solid white;
	padding:		0px 0px 0px 0px;	
	width: 			100px;
	height: 		auto;
	float:			left;
	color:			black;	
	font-weight:	bold;
	font-size:		120%;
}
/*  container for animation */
#youtube {
    width: 			500px;
	height:			500px;
    margin: 		50px;
    padding: 		25px;
	border-top:		17px solid #146FAB;
	border-bottom:	17px solid #146FAB;
    background-color: white;
}


/* volunteer bar from green to purple on hover on FRONT PAGE---------------------------*/
div#volunteer	{ 
	float:				left;
}
a.volunteer		{	
	display: 			block;
	width: 				722px;
	padding:			0px 0px 7px 0px;
	height: 			50px;
	text-indent: 		-1000em;
	background: 		url(images/volunteer.jpg) left top no-repeat;
}
a.volunteer:hover {
	background-image: 	url(images/volunteer-hover.jpg);
}

/*	VOLUNTEER  copy at top--------------------------------*/
div#volunteer-copy-top{
	position:   								relative;
	margin: 												0px 0px 30px 0px;
	width:														722px; 
	height:													60px;				
	background-color:   #7fce1e;
}
div#volunteer-copy-top	p{
	margin: 												15px 0px 25px 0px;
	padding:												7px 0px 0px 0px;
	font-weight:								bold;
	font-size:										1.75em;
	line-height:								1.3em;
	text-align:									center;
	color:														white;
}

/*	VOLUNTEER  Page left column--------------------------------*/
div#volunteer-copy-left{
	position:   		relative;
	margin: 			0px 0px 0px 0px;
	width:				390px;
}
div#volunteer-copy-left	p{
	margin: 			0px 0px 10px 0px;
	font-weight:		bold;
	font-size:			170%;
	text-align:			left;
	line-height: 		140%;
}
div#volunteer-copy-left img{
	margin: 			0px 20px 10px 0px;
	padding: 			0px;
	width:				330px;
	float:				right;
}
/*	VOLUNTEER Page  right column--------------------------------*/
div#volunteer-copy-right { 	
	position:   		relative;
	margin: 			0px 30px 0px 0px;
	width:				327px;
	float:				right;
	clear:				left;
}
div#volunteer-copy-right p{
	margin: 			0px 0px 20px 0px;
	font-size:			115%;
	text-align:			left;
	line-height: 		150%;
}
div#volunteer-copy-right img{
	margin: 			0px 0px 10px 0px;
	padding: 			0px;
	width:				317px;
	float:				right;
}

/*Table************************************************/				
table	{ 	
	margin-left:		0px;
	border-collapse:	collapse;	
	font-size:			140%;
	line-height:		130%;
}
table table th	{ 
	background-color:	white;	
}
td, th	{ 
	padding:			7px 10px 7px 10px;	
}
th	{ 
	background-color:	#146fab;	
	color:				white;	
}
.cellcolor {  
	background-color: 	#6fc6fc;	
	}
	
/* volunteer page straddle both columns */
div#bbbs {
	margin:				20px 0px 0px 0px;
	padding:			0px;
	width:				722px;
	float:				left;
}
div#bbbs p{
	padding:			0px 30px 0px 30px;
	color:				black;		
	font-size:			165%;
	line-height:		150%;
	text-align:			center;
}

/* facebook-twitter-linked-in link using Z index -----------------------------------*/
div#facebook	{
	position:   		absolute;
	z-index:			99;
  	top:        		325px;
  	left:       		20px;
}

/* the w and h creates the hover area  */
a.facebook {	
	display: 			block;
	width: 				200px;
	height: 			36px;
	background: 		url(images/facebook.png) left top no-repeat;
}

a.facebook:hover {
	background-image: 	url(images/facebook-hover.png);
}

/* linked-in  ----------------------------------------------------------------------*/
div#linked-in	{
	position:   		absolute;
	z-index:			99;
  	top:        		325px;
  	left:       		60px;
}
a.linked-in {	
	display: 			block;
	width: 				200px;
	height: 			36px;
	background: 		url(images/linked-in.png) left top no-repeat;
}

a.linked-in:hover {
	background-image: 	url(images/linked-in-hover.png);
}
/* classess ---------------------------------------------------------------------------------------------------- */
.bold {
    font-size: 		110%;
    font-weight: 	bold;
}
/* images float to right with caption underneath - In The News page ------------------------ see if this is needed*/
.img {
	float: 			right;
	width: 			355px;
	margin: 		0px 50px 0px 0px;
	clear:			both;
}
/* captions */
.img span {
	display:		block;
	font-size: 		1.4em;
   	font-style: 	italic;
	text-align: 	center;
}

div#contact-bar	{
	background-color: 	#146fab;
	margin:							0px 0px 0px 0px;
	padding:						20px 0px 0px 0px;
	width:								722px;
 height:       45px;
	color:								white;		
	font-weight:		bold;
	font-size:				175%;	
	text-align:			center;
	float:								left;
}
div#contact-bar a:link {
	color:				#7fce1e;
	text-decoration: 	none;
}
div#contact-bar a:visited {
	color: 				#7fce1e;
	text-decoration: 	none;
}
div#contact-bar a:hover {
	color: 				#7fce1e;
	text-decoration: 	underline;
}

div#contact-bar-footer	{
	background-color: 	#146fab;
	margin:							0px 0px 0px 0px;
	padding:						23px 0px 0px 0px;
	width:								722px;
 height:       45px;
	color:								white;		
	font-weight:		bold;
	font-size:				175%;	
	text-align:			center;
	float:								left;
}
div#contact-bar-footer a:link {
	color:				#7fce1e;
	text-decoration: 	none;
}
div#contact-bar-footer a:visited {
	color: 				#7fce1e;
	text-decoration: 	none;
}
div#contact-bar-footer a:hover {
	color: 				#7fce1e;
	text-decoration: 	underline;
}

/* blue bars */
.blue-bar {
	background-color: 	#146fab;
	margin:							0px 0px 0px 0px;
	padding:						23px 0px 0px 0px;
	width:								722px;
 height:       45px;
	line-height:		25px;
	color:								#fff;		
	font-weight:		bold;
	font-size:				175%;	
	text-align:			center;
	float:								left;
}	
/* short blue bars from hyphens */
.short-blue-bar {
	line-height:		5px;
	color:								#6ec5fe;		
	font-weight:		bold;
	font-size:				3em;	
	text-align:			left;
}	

.white	{
	color:			white;
}
.blue	{
	color:			#146fab;
}
.bold-blue	{
	color:			#146fab;
	font-weight:		bold;
	font-size:				115%;	
}
.purple	{
	color:			#6a1f88;
}
.green	{
	color:		#80cf1e;
}

/*copyright*/
.copyright	{
	font-size:			60%;	
}

/* text indent for bullets */
#text-indent p {
	text-indent: 	-0.6em;
	padding-left: 	0.6em;
		}

/* styling for links other than social media ---------------------------------*/
a:link {
	color: #000;
	text-decoration:	none;
}
a:visited {
	color: 				#000;
	text-decoration: 	none;
}
a:hover {
	color: 				#7fce1e;
	text-decoration: 	underline;
}
a:active {
	text-decoration: 	none;
}

/*container for Mom and Dad*/
div#parents {
	position: 		relative;
	width: 					722px;
	margin: 				0 auto;
}
.parents-img{
				float:									left;
				width: 								722px;
}
.parents-h2 {
				font-size: 			2em;
				line-height: 	1.5em;
				text-align:			left;
				color:								#8d162a;
				font-weight:		bold;
}
.parents-p {
				font-size: 			1em;
				line-height: 	1.5em;
				text-align:			left;
				color:								#8d162a;
				font-weight:		bold;
}

.parents-bullets {
				float:									left;
				clear:									both;
				width: 								996px; 
				margin: 							10px 0px 30px 0px;
				color:									#8d162a;	
				font-weight:			bold;
				font-size:					2em;
				line-height:		.5em;
				text-align:				center;
}