@charset "utf-8";
/* CSS Document */
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #5f6a72;
}

h1 p {
	color: #667;
	font-family:"HelveticaNeue LT 45 Light", Arial, Helvetica, sans-serif; 
}

h1, h2, h3 {
	color: #333;
	/*color: #0096db;*/
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	color: #0033a1;
	margin: .5em 0 .2em;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.8em;
}
h3 {
	font-size: 1.6em;
}
h4 {
	font-size: 1.4em;
}
h5 {
	font-size: 1.2em;
	font-weight: 600;
}
h6 {
	font-size: 1em;
	;
}
p {
	margin: .4em 0 .8em;
 }
small {
	font-size: .8em;
}
.right-aligned-pic {
	padding-left: 10px;
	padding-bottom: 10px;
}
brandlogo {
	display:inline-block;
	text-align: left;
	padding-top:5px;
	padding-bottom: 8px;
}
 
.tagline {
	margin-top: 1.5em;
}
/*.sidebyside{ padding-left:45%; }*/
.sidebyside img, .thumb4 {  /*width: 31%;*/
}
.thumb {
	margin-top: .5em;
}
.thumb img {
	margin-right: 1em;
}
.thumb h3, .thumb p {
	margin: 0;
	padding: 0 0 0 50%
}
.features h3 {
	font-size: 1.4em;
}
.page-header {
	margin-top: 10px;
}
.popup {
	color: #0033a1;
	cursor: pointer;
}
/***************************************
NAV BAR 
***************************************/

/* default navbar */ 
.navbar-default .navbar-nav > li > a {
}
.navbar-default .nav > li > a {
}
.navbar-default .nav-collapse .nav > li > a, .navbar-default .nav-collapse .dropdown-menu a { /*#999999*/
;
}
.navbar-default .navbar-brand {
}
.navbar-default .navbar-brand h1 {
	font-size: .8em;
	margin: 0;
	font-weight: 400;
}
.navbar-default .navbar-text {
	color: inherit;
}
/* navbar inverse */ 
.navbar-inverse .navbar-nav > li > a {
	color: #a5acb0;
}
.navbar-inverse .nav > li > a {
	color: #a5acb0;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
	color: #a5acb0;
}
.navbar-inverse .navbar-brand {
	color: #fff;
}
.navbar-inverse .navbar-brand h1 {
	font-size: .8em;
	color: #fff;
	margin: 0;
	font-weight: 400;
}
.navbar-inverse .navbar-text {
	color: inherit;
}
/* dropdown menu */ 
#main-nav-list .nav .dropdown-menu > li, #main-nav-list .nav .dropdown-menu > li > a {
	color: #a5acb0;
	text-align: left;
}
#main-nav-list .nav .dropdown-menu > li > a:focus, #main-nav-list .nav .dropdown-menu > li > a:hover {
	color: #3361B8;
}
.dropdown-menu {
	background-color: #fff;
}
/* border on items in dropdown */ 
#main-nav-list .nav .dropdown-menu > li, #main-nav-list .nav .dropdown-menu > li {
	border-bottom: 1px dotted #a5acb0;
}
#main-nav-list .nav .dropdown-menu > li:last-child, #main-nav-list .nav .dropdown-menu > li:last-child {
	/* last-child is not supported by IE8 */ 
	border-bottom: none;
}
/***************************************
BLOCK QUOTE  
***************************************/
.message {
	border: 1px solid #a5acb0;
	background-color: #E5F0FA;
}
.message img {
	margin: 0 1em;
}
blockquote {
	margin: 1em 0;
	padding: 1em;
	background-color: #E5F0FA;
}
blockquote p {
	font-size: 1em;
	padding-bottom: 14px;
}
/***************************************
GENERAL STYLING 
***************************************/
 

.brandzone {
	display: block;
	clear: both;
	background-color: #fff;
	margin: 0;
	/* needs a little more space at the top to make it LOOK vertically centered due to the extra whitespace at the bottom of the image file */ 
	padding-top: 15px;
	padding-left:18px;
	background-color: #fff;
 }
.btn.btn-navbar, navbar-btn {
	margin-top: 13px;
}
 #main-header-text {
	  /* this won't work on EVERYONE's computer, but might as well target it if we can */
	font-family: "Helvetica 45 Light", Arial, Helvetica, sans-serif;
}
#main-header-text h1.navbar-text{
	font-size:1.7em;
	font-weight: lighter;
	margin-top: 0.4em; 
	margin-bottom: 0;
	clear:right;
	}

 

#main-header-text h2.navbar-text {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
}

/***************************************
PUSH FOOTER COLOR TO THE BOTTOM  
***************************************/  
body {
	/* this is the footer color or the color of anywhere else that doesn't have a background applied to it. 
	this is how we get that fat footer that floods all the way down. 
	 */ 
	background-color: #333333;
}
.wrapper {
	/* pushing a gap after the content. if we add a margin to the footer at the top, we'll get more "color" above the top. Flip the strategy, just push it down a hair  */ 
	padding-bottom: 3em;
	/* this is the background color default for the rest of the page */ 
	background-color: #fff;
	border-bottom: none;
}
/***************************************
GENERATE NAVBAR BACKGROUND
***************************************/  

	
/* blue background navbar */ 
.navbar-fullwidth {
	/* this should be used to fill the entire space so that we get a background all the way across.*/
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #0039a6;
	background-image: -moz-linear-gradient(top, #0039a6, #0096db);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0039a6), to(#0096db));
	background-image: -webkit-linear-gradient(top, #0039a6, #0096db);
	background-image: -o-linear-gradient(top, #0039a6, #0096db);
	background-image: linear-gradient(to bottom, #0039a6, #0096db);
	background-repeat: repeat-x;
	border: 1px solid #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0039a6', endColorstr='#0096db', GradientType=0);
	margin: 0;
	padding: 0;
}
/* white background navbar */ 
.navbar-fullwidth.default {
	background: none;
	filter: none;
	background-image: none;
	background-color: #fff;
	border: 0;/* border-bottom: 1px solid #F2F2F2; */
	/*border-bottom: 1px solid #ccc;*/ 
}
/*
changing other navbar colors: 
http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3
*/ 
/* override bootstrap navbar bg color */
.navbar-default, .navbar-default .navbar-header, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	background-color: transparent;
}
.navbar-inverse, .navbar-default, .navbar-brand {
	border: 0;
	background-color: transparent;
}
.navbar-inverse, .navbar-inverse .navbar-header, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
	background-color: transparent;
}
 @media (max-width: 767px) {
/* for responsive, this will just be a block around the nav */ 
html {
	background-color: inherit;
}
/* in the extra small view, the rows have no padding
	 so if you haven't set the content in a COL, there's no padding around the edges
	 when just using "ROW" so don't do that. use a COL. If we apply padding to the row too, it gets over-padded
	 */ 
.row {
	/*
	padding-left: 15px;
	padding-right: 15px;
	*/
}
}
#main-navbar.navbar {
	margin-bottom: 0px;
}
/* remove default bootstap border around nav */ 
#main-nav-list, #main-navbar {
	border: 0;
}
/* changing the font-weight to both styles of navbar */ 
.navbar-default .navbar-nav > li, .navbar-default .navbar-nav > li {
	font-weight: 300;
	font-size: 1.2em;
	padding: 0.3em 0.75em;
}
.navbar-default .navbar-nav > li.footer-nav-item, .navbar-inverse .navbar-nav > li.footer-nav-item {
	padding: 18px;
}
.nav > li > a {
	padding-left: 8px;
	padding-right: 8px;
}
@media (min-width: 768px) and (max-width: 991px) {
 
	/* making the nav a little narrowoer on the small view so that the search hopefully fits in there. */
.nav > li > a {
	padding-left: 1px;
	padding-right: 1px;
}
}
.navbar-default .navbar-nav > li.footer-nav-item:first-child, .navbar-inverse .navbar-nav > li.footer-nav-item:first-child {
	padding-left: 7px;
}
.navbar-header {
	font-weight: 700;
}
.navbar-header h1 {
	margin: 0;
}
/* kill left padding on first item */ 
.navbar-nav:first-child {
	padding-left: 0;
}
 @media (min-width: 767px) {
.navbar-nav > li:first-child {
	/* if we don't do this... in the responsive large view, the first item hangs off left */
	padding-left: 0;
}
}
/* menu highlight */ 
.navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus .navbar-default .nav > li > a:active, .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus, {
 color:#0096db;
}
 .navbar-inverse .navbar-nav > li > a:active,  .navbar-inverse .navbar-nav > li > a:hover,  .navbar-inverse .navbar-nav > li > a:focus  .navbar-inverse .nav > li > a:active,  .navbar-inverse .nav > li > a:hover,  .navbar-inverse .nav > li > a:focus, {
 color:#fff;
}

.navbar-nav {
    margin: 7.5px -10px;
}

/***************************************
FOOTER  
***************************************/  
.footer-wrapper {
	/* this needs to match the HTML color */ 
	background-color: #5b6770;
	/* this should be used to fill the entire space so that we get a background all the way across.*/
	width: 100%;
	color: #a5acb0;
	padding: 0;
	padding-top: 20px;
	margin: 0; /* set margin to zero so that there's no white bar on bottom */
}
.footer-wrapper .container small nav {
	padding-left: 15px;
	padding-right: 15px;
}
#footer-content div > h5 {
	/* style h5s in footer */ 
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	padding-bottom: 10px;
}
#footer-content div ul.list-unstyled li a, #footer-content div p a {
	color: #fff;
	border-bottom: 1px solid #878787;
}
#footer-content div ul.list-unstyled li, #footer-content div p {
	color: #fff;
	padding-bottom: 5px;
}
#footer-copyright {
	padding-top: 30px;
	font-size: 14px;
}
#footer-copyright, #footer-copyright p a, #footer-copyright h6, #footer-copyright h6 a {
	color: #fff;
	line-height: 2em;
	font-size: 12px;
	padding-bottom: 15px;
	text-decoration:none;
}
#footer-copyright ul.list-inline li a {
/*	border-bottom: 1px solid #fff; */
	color: #fff;
	font-size: 14px;
}
/***************************************
SEARCH BAR 
***************************************/  
/* navbar form */ 
.navbar-form {
	margin-top: 8px;
}
#nav-search-icon {
	margin-top: 15px;
	padding-right: 15px;
}
 
#header-search-form{
	 padding-right:0; 
	 padding-left:0;
	 margin-top:17px;
	 margin-right:inherit;
}
#srch-term{
	padding-right:2px;
}
.header-search-icon {
	padding: 0;
}
#header-search-input-group 
{
	padding-left:0;
	padding-right:0;
}
.header-search-input {
	height: inherit;
	color: #a5acb0;
}
.searchmini {
	position: relative;
	float: right;
	padding: 0 10px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	border: 0;
	color: #fff;
	height: 35px;
}
.searchmini:hover, .searchmini:active, .searchmini:focus {
	background-color: transparent;
}
.navbar-inverse .searchmini:hover, .navbar-inverse .searchmini:focus {
	background-color: #fff;
}
.navbar-default .searchmini:hover, .navbar-default .searchmini:focus {
	background-color: #fff;
}
 
search_icon, hamburger
{
	display:block;
}

#xs-menu-icon.navbar-toggle {
	margin:0;
    border-color: #ccc;
	border: 1px solid #ccc; 
	border-radius: 4px 4px 4px 4px;
}

	
#xs-menu-icon .icon-bar{
	background-color:#ccc;
	border: 1px solid #ccc;
}
/***************************************
MAIN HEADER TEXT
***************************************/  
#main-header {
	margin-right: 36px;
	margin-left: 36px;
	margin-top: 15px;
}
#main-header-text h1, #main-header-text h2, #main-header-text h3 {
	/* adjusting height of H1s, etc so that they're not gigantic like the bootstrap versions */
	font-family: inherit;
	font-weight: 400;
	line-height: 20px;
	color: #0039a6;
	text-rendering: optimizelegibility;
}

#main-header-text h1 {
	font-size: 1.6em;
}
#main-header-text h2 {
	font-size: 1.4em;
}
#main-header-text h3 {
	font-size: 1.2em;
}
/***************************************
HEADER POSITIONING 
***************************************/
#main-header {
	margin-right: 20px;
	margin-left: 15px;
}
#main-header-text .navbar-text {
	margin-left: 0;
	margin-right: 0;
}
#main-nav-list.navbar-collapse {
	padding-left: 0;/* if this is set to 0, it adds a scrollbar
	padding-right: 0; 
	*/ 
}
@media (min-width: 768px) {
#main-nav-list.navbar-collapse {
	/* don't need this on smaller views. on larger views need to push this to the right just a bit. */ 
	padding-left: 8px;
}
}
/***************************************
ALIGN MAIN CONTENT ROWS RIGHT & LEFT 
***************************************/
.row {
	margin-right: 0;
	margin-left: 0;
}
/***************************************
Breadcrumbs
***************************************/  
.breadcrumb {
	background-color: #fff;
	margin-top: 15px;
	margin-bottom: -15px;
	padding-left:0;
}
/***************************************
SCROLLBARS ON COLLAPSE NAV
***************************************/  
@media (max-width: 768px) {
/* bootstrap 3 adds scrollbars if the dropdown is longer
	 than 340px. this kills those scrollbars 
	 */ 
.navbar-collapse {
	max-height: inherit !important;
	overflow-x: auto !important;
}
}
 @media (min-width: 768px) {
/* dropdown on hover, rather than click. 
	 */ 

.dropdown:hover .dropdown-menu {
	display: block;
}
}
/*******************************
UL with box bullets
********************************/
 
ul.boxbullet {
	list-style: none;
	padding-bottom: 1em;
	margin: 0;
}
ul.boxbullet li {
	padding-left: 1em;
	padding-bottom: .5em;
	text-indent: -.7em;
}
ul.boxbullet li:before {
	content: "■ ";
}
/*******************************
DT list  
********************************/
dl {
	padding-left: 2em;
}
dd {
	padding-left: 1em;
	padding-bottom: .5em;
}
dt {
	padding-top: 1em;
	padding-bottom: .5em;
}


/************************************
Header backgrounds
************************************/
@media (min-width: 768px) {
/* show the BG on the bigger views */
.home_bg {
	background: url("../img/background.gif") repeat-x scroll left top transparent;
}
/* making the carousel flush left and right with the other content */ 
.home_bg .container .row .col-sm-12, #sub-page-header .container .row .col-sm-12 {
	padding-left: 30px;
	padding-right: 30px;
}
}
/************************************
SEARCH
************************************/
#xs-search-form {
	width: 100%;
}
#xs-menu-icon {
 }
/* the search icon is a white button with a transparent search magnifying glass cut into the middle of it. The background is set to a color, which then makes it possible for us to change the color on the fly by only using background color changes rather than an image change. Saves us a few K size on page load */
.search-icon-off {
	background-color: #0096db;
}
.search-icon-on {
	background-color: #CC0000
}
#xs-search-go-button {
	margin-left: 10px;
	margin-top: 8px;
	margin-bottom: 8px
}
#xs-search-term {
	/* setting overflow:hidden shortens the length of the search term input to fill the available space rather than pushing elements off of the page */

	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0
}
#xs-search-term-input {
	/* this fills the search-term span completely full. if the span surrounding it does not have overflow:hidden applied, then it will shove elements off to the right of the page. */ 
	width: 100%;
	margin-top: 8px;
	margin-bottom: 8px
}
#xs-title-text {
	text-align: left;
	width: 100%;
	font-size: 1.4em;
}
#xs-search-button {
	/* outline is an accessibility feature that normally we want to leave alone. 
however, in the case of the search button icon, the icon itself shows its active state
and the dotted outline sometimes applied by firefox looks obnoxious */ 
	outline: 0;
}
/************************************
CAROUSEL
************************************/

 a:focus { 
	/* turning off outlines for firefox */ 
    outline: none; 
}
 .btn:focus, .btn:active { 
    outline: none; 
}

ol.carousel-indicators {
	/* this moves the carousel indicators to the right */
	right: 3%;
	bottom: 0;
	left: inherit;
	width: inherit;
	padding-left: 0;
	margin-left: 0;
	margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
	/* only using a media query here, because carousel-caption was 
	previously styled in bootstrap in a media query. 
	using respond.js, IE interprets the media
	query as higher priority than a later style without a media query
	*/
	 
  .carousel-caption {
	  font-family:"HelveticaNeue LT 45 Light", Verdana, Geneva, sans-serif;
	  font-size: 1.4em;
	  bottom: 10%;
	  right: 0;
	  left: 0;
	  padding-bottom: 0;
	  text-align: center;
	  bottom: 8px;
  }
 
}
.carousel-caption h2, .carousel-caption h3, .carousel-caption h4 {
	color: #fff;
}
.carousel-caption h2 small a, .carousel-caption h3 small a, .carousel-caption h4 small a {
	color: #0091B5;
	font-weight: bold;
}
@media (max-width:767px) {
.carousel-caption {
	position: relative;
	left: 0;
	bottom: 2px;
}
.carousel-caption h2, .carousel-caption h3, .carousel-caption h4 {
	color: black;
	font-size: 1.2em;
	text-shadow: none;
}
}
/*
uncomment if you wish to have a background image 
.carousel-main{
	padding-right:15px;
	padding-left:15px;
	}
	*/ 
/************************************
SUB PAGES
************************************/
#sub-page-header{
	background:#0096DB;	
	padding-top:50px;
}

#sub-page-header h2{
	color:#fff;
	}
/************************************
ACCORDION
************************************/	
.panel-title > a{
	color:#0096DB;	
}

/* BOTTOM BOX ROLLOVER STYLES */

#rollboxes {
/*	width: 813px; */
	margin: 0px;
	padding: 0px;
	color: #394a59; 
}

#rollboxes p {
	color: #5f6a72;
}

.rollbox_empty_shelves {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 20px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/EmptyShelves_1.jpg) no-repeat;
	border-bottom: 5px #fff solid;	
	cursor: pointer;
}

.rollbox_empty_shelves:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 20px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/EmptyShelves_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_frying_pan_park {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 20px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/FryingPanPark_1.jpg) no-repeat;
	border-bottom: 5px #fff solid;	
	cursor: pointer;
}

.rollbox_frying_pan_park:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 20px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/FryingPanPark_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_collegiality {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/Collegiality_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_collegiality:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/Collegiality_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_unforgettable {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/Unforgettable_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_unforgettable:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/Unforgettable_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_grieving_season {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/GrievingSeason_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_grieving_season:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/GrievingSeason_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_rhythm_amble {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/RhythmOfTheAmble_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_rhythm_amble:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/RhythmOfTheAmble_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_beyond_horizon {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/BeyondHorizon_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_beyond_horizon:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/BeyondHorizon_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_blue_marble {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/BlueMarble_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_blue_marble:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/BlueMarble_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_full_moon {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/FullMoon_1.jpg) no-repeat;
	border-bottom: 5px #fff solid;		
	cursor: pointer;
}

.rollbox_full_moon:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/FullMoon_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_solace {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/Solace_1.jpg) no-repeat;
	border-bottom: 5px #fff solid;		
	cursor: pointer;
}

.rollbox_solace:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/Solace_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_playlist {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/PlayList_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_playlist:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/PlayList_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_trail_thoughts {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/TrailThoughts_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_trail_thoughts:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/TrailThoughts_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_hidden_pond {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/HiddenPond_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_hidden_pond:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/HiddenPond_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_voodoo_day {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/VoodooDay_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_voodoo_day:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/VoodooDay_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_light_after_dinner {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/LightAfterDinner_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_light_after_dinner:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/LightAfterDinner_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}

.rollbox_stopped_in_their_tracks {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #0038A6;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #f3f4f5 url(../../common/img/StoppedInTheirTracks_1.jpg) no-repeat;
	cursor: pointer;
}

.rollbox_stopped_in_their_tracks:hover {
	float: left; 
	width: 160px; 
	height: 120px; 
	margin: 0px 10px 10px 16px; 
	padding: 125px 0px 0px 10px; */
	color: #77b800;
	font-size: 18px;
	font-weight: 100;
	text-decoration: none;
	background: #fefcfc url(../../common/img/StoppedInTheirTracks_2.jpg) no-repeat;
	border-bottom: 5px #ffa200 solid;
	cursor: pointer;
}