/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	
	
	
	
/* #Other CSS Styles Imports
================================================== */	
/*
@import "jquery.noty.css";
@import "noty_theme_default.css";
*/

/* #Site Styles
================================================== */

div.header div.container {
}
.mastheadLogo { 
	float:left;
	margin-top:27px;
	width:400px;
}
.brandLogo { 
	float:right;
}

.header {
	margin-bottom: 0px;
	padding-bottom: 20px;
	padding-top: 10px;
	background: white;
}
.centerize {
	width: 1120px;
	margin: 0 auto;
	background-color: white; 
	margin-bottom:20px
}	
.siteContent {float:left; width:960px;}

.siteNav {
	float:left;
	width:160px;
	}
.wellnessbanner {
	width:940px;
}
.siteNav ul li{
	padding-left: 10px;
	line-height: 24px;
	font-size:16px; 
	font-weight:bold;
	}
.footer_content, .header {
	margin-right: 40px;
}
.footer {
	padding: 10px 0px;
	color: #CCC;
	font: 14px/14px Arial, sans-serif;
	text-align:right;
}

a.widget { 
	text-decoration: none;
	height: 220px;
	width: 220px;
	float: left;
	margin-right: 20px;
	color: white;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}

a.widget span {
	display: block; 
	font-size: 32px;
	line-height: 40px;
	color: white;
	padding: 35px 0 0 0;
}
a.widget span.biline {
	display: block; 
	font-size: 32px;
	line-height: 40px;
	color: white;
	padding: 16px 0 0 0;
}
a.widget activityIcon Large{ 
	height:120px; 
	width:120px;
}

a.widget#fitness { 	background-color: #0099cb;  }
a.widget#nutrition { 	background-color: #214a76;  }
a.widget#prevention { 	background-color: #04566c;  }
a.widget#emotional { 	background-color: #0063a4;  }

table#activity_type_1 img.activityIcon  { 	background-color: #0099cb;  }
table#activity_type_2 img.activityIcon  { 	background-color: #214a76;  }
table#activity_type_3 img.activityIcon  { 	background-color: #04566c;  }
table#activity_type_4 img.activityIcon  { 	background-color: #0063a4;  }

.activityIcon {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;

	}

.pi_box_title, .pi_generic_box h1  {
	margin-bottom: 20px;
	border-bottom: dotted 1px #999;
	padding-bottom: 6px;
	font-size: 20px;
}

.top-blue-bar {	
	height: 41px; 
	background-image: url(/images/brand/menu_spacer.png);
	border-bottom: 6px solid #0199cb;
	color:white;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	
}

.bottom-blue-bar {
	background-image: url(/images/brand/menu_spacer.png);
	height: 20px; 
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}
.top-blue-bar-text {
	margin: 11px;
	font-size: 18px;
}
.nav {
	border-bottom: 6px solid #0199cb;
	display: block;

}


/*
display:block;text-align:left;border-bottom:1px solid #000;margin:10px auto 0;min-height:35px;padding:12px 0 0
*/

.navstyle {
	padding-bottom: 0 !important;
}

.nav ul{
	font-size: 0;
	list-style: none;
	margin:0; 
	padding:0;
	background-image: url(/images/brand/menu_spacer.png);

}

.nav ul li{
	padding-left: 1px;
	font-size: 12px;
    display: inline-block;

	line-height: 41px;
	text-align: center; 
	background: url(/images/brand/menu_item_hover_end.png) top left no-repeat; margin: 0px;
	}


.nav ul li a { 
	color: white; 
	display:block;
 	margin: 0px;
	padding: 0px;
	height: 41px;
	line-height: 41px;
	width:155px;
}

.nav ul li a,
	.nav ul li a:visited,
	.nav ul li a:active {
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
.hardcodedSpacer {height:41px; float:left;}		
.nav ul li a:hover, .nav ul li a:active { background: url(/images/brand/menu_item_hover.png) top left repeat-x; }

.nav ul li.first { background: url(/images/brand/menu_leftend.png) top left no-repeat; margin: 0px; padding-left:5px; }
.nav ul li.first:hover { background: url(/images/brand/menu_leftend_hover.png) top left no-repeat; margin: 0px; padding-left:5px; }

.nav ul li.last { background: url(/images/brand/menu_nav_end.png) top right no-repeat; margin: 0px; padding-right:0px;}
.nav ul li.last:hover { background: url(/images/brand/menu_rightend_hover.png) top right no-repeat;}

div#entercodefromcard {
    height: 180px;
    position: relative;
    left: -20px;
    padding-left: 5px;
    padding-right: 5px;
}
div#entercodefromcard input[type="text"] {
    width: 138px;
}

/* #Page Styles
================================================== */
.activityTotals { text-align:right; padding-right:10px; font-weight:bold; }
div.chartContainer { 
	height: 180px;
	margin-top:20px; 
	margin-bottom:20px;
	}

div.panel h3 {
	text-align: center;
	border-bottom: dotted 1px #999;
	padding-bottom: 6px;
	font-size: 20px;
	}
div.panel div.points_amount {
	text-align: center;
	font-size: 16px;
}

.column2  {width:120px;}
.column3 {width:120px;}
.column4 { width:140px;}

div.panel {

padding: 20px 20px 2px 20px;
background: #EFEFEF;
margin: 0 0 20px 0 !important;
}
div.panel h3 { 
	font-weight:bold;
	font-size:28px;
	line-height:34px;
}
div.panel.active {
padding: 20px 20px 2px 20px;
border: 1px solid #59A5BF;
margin: 0 0 20px 0 !important;
}

div.panel.future h3 {color: #808080;}
div.panel.future {
color: #9b9b9b;
padding: 20px 20px 2px 20px;
background: whitesmoke;
border: 1px solid #aaaaaa;
margin: 0 0 20px 0 !important;
}

.no_marg_bottom {
	margin-bottom: 0px;
}
.top_height {
	height: 310px;
	overflow: auto;
}
.half_height {
	height: 155px;
	overflow: auto;
}
.fullwidth {
	width: 90% !important;
}

.red {
	color: red !important;
}

.tiny {
	font-size: 10px;
}

.icon {
	line-height: 14px;
	vertical-align: text-top;
	display: inline-block;
}

.notification {
	width: 20px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	background-color: #0000ff;
	color: #fff !important;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	position: relative;
}

.notification:before  
{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 10px;  
    top: 20px;  
    border: 3px solid;  
    border-color: #0000ff transparent transparent #0000ff;  
}  

.notification:after  
{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 4px;  
    top: 20px;  
    border: 3px solid;  
    border-color: #0000ff #0000ff transparent transparent;  
}  

	.notification:hover {
		color: #fff !important;
		
	}

/*	--------------------------------------------------
	:: Block grids
	
	These are 2-up, 3-up, 4-up and 5-up ULs, suited
	for repeating blocks of content. Add 'mobile' to
	them to switch them just like the layout grid
	(one item per line) on phones
	
	For IE7/8 compatibility block-grid items need to be
	the same height. You can optionally uncomment the
	lines below to support arbitrary height, but know
	that IE7/8 do not support :nth-child.
	-------------------------------------------------- */
	
	.block-grid { display: block; 
	/* overflow: hidden; */ }
	.block-grid>li { display: block; height: auto; float: left; }
	
	.block-grid.two-up { margin-left: -4% }
	.block-grid.two-up>li { margin-left: 4%; width: 46%; }
 	.block-grid.two-up>li:nth-child(2n+1) {clear: left;} 
	
	.block-grid.three-up { margin-left: -2% }
	.block-grid.three-up>li { margin-left: 2%; width: 31.3%; }
 	.block-grid.three-up>li:nth-child(3n+1) {clear: left;} 
	
	.block-grid.four-up { margin-left: -2% }
	.block-grid.four-up>li { margin-left: 2%; width: 23%; }
 	.block-grid.four-up>li:nth-child(4n+1) {clear: left;} 
	
	.block-grid.five-up { margin-left: -1.5% }
	.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }
 	.block-grid.five-up>li:nth-child(5n+1) {clear: left;} 

/* Artfully masterminded by ZURB  */



.notifyholder>li { float: left; display: block; position: relative; padding: 0; margin: 0; }
.flyout { background: #fff; margin: 0; padding: 0px; border: 2px solid #ddd; position: absolute; top: 26px; left: -1px; width: 200px; z-index: 40; border-radius: 4px; left: auto; right: 0; }
.flyout ul { margin: 0; padding: 0; }
.flyout li { margin: 0; border-bottom: 1px dashed #ddd; width: auto; }
.flyout li>a { display: block; padding: 5px; }
.flyout li>a:hover { background-color: #fcf8e3; }

.notifyholder>li .flyout { display: none; }


/* Base Panel */

div.panel {
		padding: 20px 20px 2px 20px;
		background: #efefef;
		background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
		background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		margin: 0 0 20px 0;
	}


div.smallpanel {
		padding: 5px 10px 0px 10px;
		background: #efefef;
		background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
		background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		margin: 0 0 0px 0;
	}
		
	
.cartpanel {
	background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #2989d8 100%, #1e3a85 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#2989d8), color-stop(100%,#1e3a85)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#2989d8 100%,#1e3a85 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#2989d8 100%,#1e3a85 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#2989d8 100%,#1e3a85 100%) !important; /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#2989d8 100%,#1e3a85 100%) !important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1e3a85',GradientType=0 ); /* IE6-9 */

}	


div.pager {
	width					: 100%;
	margin-top				: 10px;
	margin-bottom			: 10px;
	height					: 25px;
	line-height				: 25px;
	background-color		: none;
	border-bottom			: 1px solid #ddd;
	border-top				: 1px solid #ddd;
	text-align				: center;
	float: left;
} 

a.pager, a.pager:link, a.pager:visited {
	text-decoration	    	: none;
}

a.pager:hover {
	text-decoration	    	: underline;
}

a.pages, a.pages:link, a.pages:visited {
	margin-left				: 2px;
	margin-right			: 2px;
	text-decoration	    	: none;
}

a.pages:hover {
	text-decoration	    	: underline;
}

a.pagesbold, a.pagesbold:link, a.pagesbold:visited {
	margin-left				: 2px;
	margin-right			: 2px;
	font-size				: 14px;
	font-weight				: bold;
	text-decoration	    	: none;
}

a.pagesbold:hover {
	text-decoration	    	: underline;
}

.boldtext { font-weight: bold; }
.italictext { font-style: italic; }
/*  --------------------------------------------------
    Subnav classes for category browse go here
    -------------------------------------------------- */  
    .subnav {
    	border-bottom: solid 1px #eee;
    }
    .subnav li {
    	height: auto; padding: 0; margin: 0;
    }
    
    .subnav li a {
	   	 display: block; width: auto; height: auto; padding: 10px; margin:0px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; text-decoration: none;
    }
    
    .subnav li a:hover {
    	text-decoration: none; background: #0000ff; color: #fff;
    }
    
    .subnav li.active a {
	   	 background: #0000ff; color: #fff;
    }
	
	.sub_1 { padding: 6px 0px 6px 18px !important; font-size: .9em !important; font-weight: bold !important; }
	.sub_2 { padding: 5px 0px 5px 23px !important; font-size: .8em !important; }
	.sub_3 { padding: 4px 0px 4px 28px !important; font-size: .7em !important; }
	.sub_4 { padding: 3px 0px 3px 33px !important; font-size: .6em !important; }
	.sub_5 { padding: 3px 0px 3px 38px !important; font-size: .5em !important; }
	.sub_6 { padding: 3px 0px 3px 38px !important; font-size: .5em !important; }
	.sub_7 { padding: 3px 0px 3px 38px !important; font-size: .5em !important; }
	.sub_8 { padding: 3px 0px 3px 38px !important; font-size: .5em !important; }
	
.borderblack {
	border-bottom:1px solid #000;
}

.namebox {
	height: 50px;
}

.nameboxlarge {
	height: 100px;
}

.nomargbottom {
margin-bottom: 0px;
}
/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.block-grid.mobile { margin-left: 0; }
		.block-grid.mobile > li { float: none; width: 100%; margin-left: 0; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/