/* ******* */
/*  Main */
/* ******* */
body {
	font-size: small;
	font-family: times,serif;
	background:url(./images/body_bg.png) repeat;
     	line-height:1.4em;
     	margin:0px;
     	margin-top:25px;
     	}

* html body {
     	font-size: x-small; /* for IE5/Win */
     	f\ont-size: small; /* other IE vers */
     	font-family: times,serif;
     	line-height:1.4em;
     	}

#container {
	width:900px;
	text-align:center;
	margin:auto;
	border:0px solid red;
	}
#wrap {
	width:900px;
	background-color:#FFFFFF;
	font-size:105%;
}


/* ******* */
/* HEADER  */
/* ******* */

#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
    z-index: 10;
	}

#headerphone {
	position: absolute;
	font-weight:bold;
	font-size:16px;
	font-family: arial;
	color: #065c5c;
	width:112px;
	margin: 8px 0px 0px 770px;
}

#headleft {
	z-index:10;
	width:898px;
	height:100%;
	text-align:left;
	float:left;
	/*background: url('./media/images/headpic.jpg')no-repeat top right;*/ 
	}
/* ********** */
/* navigation */
/* ********** */




#topnav {
	z-index:10;
	float:right;
	margin:172px 0px 10px 0px;
	padding: 0;
	list-style: none;
	/*background: #388E8E;*/
	background:url(./images/top_nv.png) no-repeat;
	width:441px;
	height:40px;  border-radius:10px; overflow:hidden;
	}
#topnav li {
	float:left;
	margin:0px;
	padding:0;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height:31px;
}
#topnav li.tnlb {
}

#topnav a {
	text-decoration:none;
	margin:0px 0px;
	padding:0px 12px;
	font-weight:600;
	color:#fff;
	font-size:12px;
	display:block;
	border-right:1px solid #fff;
}
#topnav li:last-child a{ border:none;}
#topnav a:hover {color:#000;
}
#topnav a.active{ background:#9F9F9F; color:#000;}

#logo {
	clear:both;
	margin:0px;
	border:0px solid #EC8000;
	width:524px;
	height:90px;
	z-index:1;
	}
#logo span.printimg {
	display:none;
}
#frame {
	margin-top:-20px;
	float:right;
	}
#tagline,  #tagline h4{
	clear:all;
	margin:0px 0px 10px 0px;
	padding: 4px 0px;
	font-weight:bold;
	float:left;
	}

#botnav {
	float:left;
	width:100%;
	margin:0px 0px;
	padding: 4px 0px;
	list-style: none;
	background: #f1faf9;
	border: 0px solid black;
	}
	
 #navcontainer
 {
background:url("./imgs/navbackground.gif") no-repeat scroll left top rgba(0, 0, 0, 0); /*#005000;*/
 width:100%;
 margin:4px auto 0 auto;
 padding: 1px 0px 0px 0px;
 font-family:arial,sans-serif;
 font-weight: bold;
 text-align:center;
 }
 
 /* to stretch the container div to contain floated list */
 #navcontainer:after
 {
 content: ".";
 width: 900px;
 display: block;
 line-height: 1px;
 font-size: 1px;
 clear: both;
 }
 

 ul#navlist
 {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 width: 100%;
 text-align:center;
 line-height: 16px;
 font-size: 12px;
 }

 ul#navlist li
 {
 display: block;
	height: 44px;
	float:left;
	padding:0 5px;
	background: url("./images/devider.png") no-repeat scroll right 17px rgba(0, 0, 0, 0);
 }
 ul#navlist li:last-child{ background:none;}
 ul#navlist li a
 {
width: 132px;
	height:37px;
	line-height: 53px;
	border-bottom: 4px solid #D0E0E0;
	padding:0px;
	color: #fff;
	font-size:13px;
	font-weight:bold;
	text-align:center;
	text-decoration: none;
	display: block;
 -webkit-transition: .2s all linear;
 -moz-transition: .2s all linear;
 -o-transition: .2s all linear;
 transition: .2s all linear;
 }
  ul#navlist li:nth-child(6) a { width:180px;}
 ul#navlist li:nth-child(1) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(2) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(3) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(4) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(5) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(6) a {
border-color: #D0E0E0;
}
ul#navlist li:nth-child(1) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px;
 color:#000;
}
ul#navlist li:nth-child(2) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px;color:#000;
}
ul#navlist li:nth-child(3) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px; color:#000;
}
ul#navlist li:nth-child(4) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px; color:#000;
}
ul#navlist li:nth-child(5) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px; color:#000;
}

ul#navlist li:nth-child(6) a:hover {
border-bottom: 35px solid #D0E0E0;
 height: 9px; color:#000;
}
ul#navlist li a.active{border-bottom: 35px solid #D0E0E0;
 height: 9px; color:#000;
}

 /*#navcontainer>ul#navlist li a { width: auto; }*/

/* ul#navlist li#active a
 {
 background: #f1faf9;
 color: #005000;
 }*/

/* ul#navlist li a:hover, ul#navlist li#active a:hover
 {
 color: #388E8E;
 background: #f1faf9;
 border-width: 1px 1px 1px 1px;
 border-color: #f1faf9 #f1faf9 #f1faf9 #f1faf9;
 }	*/
	
	
 
#service {
	margin-left:8px;
}
#scrapbook,#fees,#tips,#saying,#order {
	margin:0px;
	border-left:1px solid #FFF;
}
#service,#scrapbook,#fees,#tips,#saying,#order {
	float:left;
	padding:2px 18px;
	line-height:.9em;
	text-align:center;
	font-size:80%;
	font-family:arial,sans-serif;
}

#service a,#scrapbook a,#fees a,#tips a,#saying a,#order a,#epage a {
	text-decoration:none;
	font-weight:bold;
	color:#000000;
}

#service a:hover,#scrapbook a:hover,#fees a:hover,#tips a:hover,#saying a:hover,#order a:hover,#epage a:hover {
	color:#EC8000;
}

#epage {
	padding:4px 10px 0px 10px;
	float:left;
	margin:0px;
	font-size:80%;
	font-family:arial,sans-serif;
	border-left:1px solid #FFF;
}

#epage a {
	padding-left:18px;
	background: url('./imgs/envelope_wh.gif') no-repeat left;
}
#epage a:hover {
	text-decoration:underline;
}
#epage a {
	width:26px;
	height:27px;
	float:left;
	display:block;
	padding-left:1px;
	background: url('./imgs/envelope_gn.png') no-repeat left;
	background-position: 0px 0px;
}
#epage a:hover {
	text-decoration:underline;
	background-position: 0px -40px;
}
#epage a:active {
	background-position: 0px -80px;
}

#socialblock {
	position:relative;
	top: 0px;
	left: 0px;
	float: right;
	text-align: right;
	width:100px;
}
div.socialnav {
	float:right;
	margin:0px 0px;
	padding: 4px 0px;
	list-style: none;
	}

#footlinks a {
	font-size:90%;
	color:#388E8E;
	text-decoration:underline;
	margin:8px 0px 0px 0px;
}
#footlinks a:hover {
	text-decoration:none;
	color:#388E8E;
}

#footline,  #footline h4{
	clear:all;
	margin:14px 20px 0px 20px;
	padding:0px;
	font-weight:bold;
	}

#footcities{
	clear:all;
	margin:0px;
	padding:0px;
	font-weight:normal;
	font-size:90%;
	}
#footclose {
	font-weight:bold;
	margin:20px 20px 5px 20px;
	padding:0px;
	font-size:110%;
	letter-spacing:1px;
}
#footlicense {
	font-size:80%;
	margin:5px 0px 0px 0px;
	border:0px solid red;
}
/* ******** */
/* CONTENT */
/* ******** */
	#pagetitle {
		clear:all;
		font-family:arial;
		color:#388E8E;
		margin: 2px 10px;
		text-align:left;
		font-size:85%;
		display:none;
	}

	#nextpage {
		clear:both;
		margin: 2px 20px 10px 0px;
		text-align:right;
	}

	#left {
		text-align:center;
		width: 425px;
		margin: 4px 0px 4px 20px;
		padding: 2px;
		padding-left:15px;
		float: left;
		border:0px solid blue;
	}

	#left950 {
		text-align:center;
		width: 860px;
		margin: 4px 5px 4px 5px;
		padding: 2px;
		padding-left:15px;
		float: left;
		border:0px solid #388E8E;;
	}
	#right {
		float:right;
		text-align:center;
		width: 425px;
		margin: 4px 0px 4px 0px;
		padding: 2px;
		padding-right:10px;
		border:0px solid blue;
	}
	#center {
		text-align:center;
		margin: auto;
		margin-top:6px;
		width: 612px;
		padding: 2px;
		border:0px solid blue;
	}

	#content, #footer {
		clear:both;
	}
	h1, h3, h5, h6 {
		font-family: arial;
		color:#388E8E;
		margin:0px 0px 3px 0px;
	}

	h1 { font-size: 150%; }
	h3 { font-size: 120%; }
	h5 { font-size: 110%; }
	h6 { font-size: 90%; }

	ul li {
		font-size: 100%;
	}
	
	.headcenter {
	text-align:center;
	margin:10px 0px 10px 0px;
	}
	
	.centertext {
	text-align:center;
	margin:0px 10px 0px 10px;
	}
	
	.note {
		font-size: 85%;
	}
	p {
		margin:4px 0px;
	}
	br.spacer {
		display:block;
		margin:20px;
		padding:20px;
		height:14px;
	}
	.highlight {
		color:#388E8E;
	}
	.highlightb {
		color:#000099;
	}

.clear { clear:both; }

#footband {
	display:block;
	height:15px;
	background-color:#388E8E;
	text-align:left;
	padding: 0px 0px 2px 10px;
	margin-bottom:10px;
	}
	
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.headerred {
	font-family: arial;
	size:3px;
	color:#b5060a; 
	margin-top:15px;
	margin-bottom:15px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	}

/* ********************* */
/* Services & Activities */
/* ********************* */
/*a.learnmore  {
		font-family: Times New Roman;
		font-size: 100%;
		font-weight: normal;
		color: #388E8E;
		text-decoration: underline;
		line-height: 20px;
		padding-right:25px;
		padding-top:10px;
		float:right;
	}*/
	
img.learnmore  {
		height:25px;
		width:150px;
		margin:20px 15px 10px 40px;
		float:left;
	}
	
img.learnmore:hover {
		background-color: #388E8E;
	}


/* ===== Testimonials	*/
td.testimonial {
	text-align:left;
}
.list {
	line-height:1em;
	font-weight:normal;
	font-size:14px;
	margin-top:1em;
	margin-bottom:8px;
}
.list a {
	color:#388E8E;
	font-weight:bold;
	text-decoration:none;
}
.list a:hover {
	text-decoration: underline;
}

.cglist {
	line-height:2.5em;
	font-size:14px;
}
.list_ind {
	line-height:1.8em;
	font-size:11px;
	color:#388E8E;
}
.contrib, .tiptell{
	font-size:80%;
}
.tipnum {
	text-align:left;
	font-size:80%;
	color:#000;
	margin-bottom:125px;
}


div.mapdir li {
	line-height:1.5em;
}

/* ******** */
/* map */
/* ******** */


/* ******** */
/* Support Services */
/* ******** */

hr.separator{
	border:1px dotted #388E8E;
	width:85%;
	margin: 25px 0px 0px 15px;
}

hr.separator2{
	border:1px dotted #388E8E;
	width:85%;
	margin: 15px auto;
	text-align:center; 
}

/* ******** */
/* Lifestyles & Fees page */
/* ******** */

table.pricebox {
	width:200px;
	border:2px solid #388E8E;
	border-collapse:separate;
	border-spacing:0px;
	margin-left: auto;
	margin-right: auto;
}

table.pricebox  tr td{
	border:1px solid #388E8E;
	padding:10px;
}


/* ******** */
/* boxes */
/* ******** */

.boxtop {
	clear:all;
	display:block;
	margin:0px;
	padding:0px 0px;
	border:0px solid red;display: none;
	/*background: url('./imgs/boxtop_diag.gif') no-repeat top left;*/

}
.boxbot {
	clear:both;
	margin:0px;
	padding:0px 0px;display: none;
	/*background: url('./imgs/boxbot_diag.gif') no-repeat bottom left;*/
}
.activityboxB {
	clear:all;
	width:400px;
	background-color:#f1faf9;
	text-align:left;
	padding:0px;
	margin:0px;
	overflow:hidden;
	 border: 1px solid #388e8e;
    border-radius: 6px;
}
.boxcontentB {
	float:left;
	
	
	margin:0px;
	width:100%;
	height:100%;
}
.activitybox {
	clear:all;
	width:400px;
	text-align:left;
	padding:0px;
	margin:0px;
	margin-top:14px;
	overflow:hidden;
}
.boxcontent {
	float:left;
	padding: 0px 4px 0px 4px;
	margin:0px;
	height:100%;
}

.activityboxWideB {
	clear:all;
	width:875px;
	background-image:url('./imgs/grey_fade.gif');
	background-repeat: no repeat;
	background-color:#ffffff;
	text-align:left;
	padding:20px 0px 0px 0px;
	margin:0px auto;
	overflow:hidden;
}

.activityboxWideB-x {
	clear:all;
	width:610px;
	background-color:#f1faf9;
	text-align:left;
	padding:0px;
	margin:0px;
	overflow:hidden;
}
.boxcontentWideB {
	float:left;
	border-left:1px solid #388E8E;/*#FCB033;*/
	border-right:1px solid #388E8E;
	padding: 0px 4px;
	margin:0px;
	width:600px;
	height:100%;
}

.serviceswide{
	background-color: #f1faf9;
    border: 2px solid #388e8e;
    float: left;
    height: 150px;
    margin: 0 0 20px 15px;
    padding: 10px;
    width: 70%;
}

div.servicestext{
	 float: left;
    height: 160px;
    margin: 10px 0 20px;
    padding: 10px;
    text-align: left;
    width: 255px;
} 

.boxclump {
	float:left;
	padding:4px 4px;
	margin: 0px;
	border:0px solid red;
}
.boxclump .img,.boxclump .text img {
	float:right;
	margin-left:5px;
}
.boxclump .text img.pdf {
	float:left;
	margin:0px 5px;
}

div.boxcontent a, div.boxcontentB a  {
	font-weight:bold;
	color:#388E8E;
}
div.boxcontent a:hover, div.boxcontentB a:hover  {
	text-decoration:none;
}

.xboxclump {
	clear:all;
	border:collapse;
	margin:0px 4px;
	padding:0px 0px;
	}
.xboxclump img {
	display:block;
	margin-left:5px;

}

.xtext {
	padding: 0px 4px 0px 4px;
	margin:0px 4px;
}

div.xtext img {
	padding:0px;
	margin:0px;
	margin-left:5px;
}
.flashButton {
	margin:0px;
	margin-left:0px;
	margin:5px 0px 0px 10px;
	padding:0px;
	height:20px;
	text-align:left;
	/*background-image: url("imgs/flashButton2_sm.gif");*/
}
div.flashButton a {
	display:block;
	padding-top:1px;
	font-size:90%;
	font-family:arial,helvetica;
	color:#388E8E;
	font-weight:bold;
	text-decoration:none;
	padding-left:60px;
	height:20px;
	background: url('./imgs/flashPlay.gif') no-repeat left;
}
div.flashButton a:hover {
	text-decoration:underline;
}
#newestBox {
	width:360px;
	margin:10px 0px 10px 8px;
	padding:10px 0px 0px 0px;
	background-color:#F5f5f5;
	border: 2px solid #388E8E;
}

img.newestbox {
	width:175px;
	height:auto;
	margin:10px 10px 0px 10px;
	float:left;
	border:1px solid #388E8E;
} 

img.arrow{
    position: absolute;
    margin: auto;
    top: 170px;
    left: 0;
    right: 0;
    bottom: 0;
}

div.staffheight {
	height:350px;
}

hr.divider{
	border:1px dotted #388E8E;
	width:85%;
	margin: 10px 25px 10px 25px;
}

hr.divider2{
	border:1px dotted #388E8E;
	width:85%;
	margin: 10px 25px 0px 25px;
}

.tag_line{ color: #065c5c;
    display: block;
    font: normal 18px "Times New Roman", Times, serif;
    padding:91px 0 0 180px;  
    white-space: nowrap;}
.logo{ position:relative;}

/*New Responsive Code*/


	/* ============================================== */
/* iPad Landscape & Portrait                      */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
  
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
  
	}
.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* iPad Portrait                                  */
/*                                       768x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
   
	}
.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        800x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
  
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}


/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
 
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
   
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
   
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
 
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
#header {
	 background: rgba(0, 0, 0, 0) url("./images/banner2_NoTagLine.png") no-repeat scroll 50% 50% / 100% auto !important;
    border: 1px solid #388e8e;
    height: 216px;
    vertical-align: middle;
    width: 100%;
	
  
	}
	.youicon {position: absolute; top: 45% !important; left: 40% !important;}
}

/*Responsive table*/

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  
}
th { 
 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
 
  text-align: left; 
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr {  }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		
		position: relative;
		padding-left: 2%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}
.youicon {position: absolute; top: 120px; left: 160px;}