/*
 *	Useful Mixins
 *	General array of mixins to help ease memorization of vendor prefixing
 *	as well as provide useful shortcuts for everyday css 'hacks'.
 *	By Justin Hedani
 *	Installation
 *		At the top of your LESS document, insert the following:
 *			@import 'path-to-this-file.less';
 *		And that's it!
 *	Usage
 *		Reference mixins by just calling the appropriate mixin class within
 *		the class you wish the css to be applied.
 *		http://www.lesscss.org/#docs
 */
 

/*  1/24/2024 - removed disc style for pointer  
.pointer {
  list-style-type: disc;
  list-style-image: url(../images/menu-collapsed.png);
}
*/

.dhtml-menu-icon {
	background-image:none !important;
} 
 
/**
 *	Slider Styles
 */
.slider .slides .slide {
  display: none;
}
.slider .slides .slide.active {
  display: block;
}
.slider .slide-count-container {
  text-align: center;
  clear: both;
  position: relative;
  z-index: 9999;
}
.slider .slide-count-container:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.slider .slide-count-container .slide-count {
  display: inline-block;
  vertical-align: middle;
}
.slider .slide-count-container .slide-count .slide-counter {
  width: 10px;
  height: 10px;
  display: block;
  float: left;
  margin-left: 5px;
  background-color: #DDD;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.slider .slide-count-container .slide-count .slide-counter:first-child {
  margin: 0;
}
.slider .slide-count-container .slide-count .slide-counter.active {
  background-color: #AAA;
}
/**
 *	Animations
 */
@-webkit-keyframes slideleft {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -100%;
  }
}
.slideleft {
  -webkit-animation: slideleft 0.5s;
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1.0;
  }
}
.reveal {
  -webkit-animation: reveal 0.5s;
}
/**
 *	TSI Start Here Modal Styles
 */
.fontLato {
  font-family: 'Lato', sans-serif;
}
.btn-primary {
  color: #FFF;
  text-decoration: none;
  background-color: #3b97c8;
  padding: 10px 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.btn-primary:hover {
  background: #63acd3;
}
.btn-primary.orange {
  background: #e16600;
  margin-right: 8px;
}
.btn-secondary {
  font-size: 13px;
  margin: 11px 10px;
}
.btn-secondary:hover {
  text-decoration: underline;
}
.bubble {
  background-color: #3b97c8;
  float: left;
  margin-bottom: 15px;
}
.bubble.large {
  width: 90px;
  height: 90px;
  margin-left: 10px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  border-radius: 45px;
}
.bubble.large .start-icon {
  margin: 21px 0 0 20px;
}
.bubble.small {
  width: 70px;
  height: 70px;
  margin-left: 10px;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
}
.bubble.small .start-icon {
  margin: 11px 0 0 10px;
}
.text-block {
  color: #FFF;
  padding: 20px;
  margin: 10px 0;
}
.text-block.purple {
  padding: 10px;
  margin-bottom: 15px;
  background-color: #e16600;
}
.text-block.purple p {
  margin-top: 0;
  margin-bottom: 0 !important;
  font-size: 14px !important;
}
.text-block.blue {
  background-color: #3b97c8;
}
.text-block.blue.dark {
  background-color: #225c7b;
}
.text-block.blue.darker {
  background-color: #0c202b;
}
.text-block.orange {
  background-color: #e16600;
}
/**
 *	Icons
 */
.start-icon {
  width: 50px;
  height: 50px;
  display: block;
}
.start-icon.book {
  width: 45px;
  height: 45px;
  background: url('../images/icon-book.png') no-repeat;
  margin: 1px 0 0 1px !important;
}
.start-icon.touch {
  width: 45px;
  height: 45px;
  background: url('../images/icon-touch.png') -7px 0 no-repeat;
  float: left;
}
.start-icon.activities {
  background: url('../images/tsi-icons.png') 6px -60px no-repeat;
}
.start-icon.question-sets {
  background: url('../images/tsi-icons.png') -50px -60px no-repeat;
}
.start-icon.videos {
  background: url('../images/tsi-icons.png') -579px -53px no-repeat;
}
.start-icon.weird-science {
  background: url('../images/tsi-icons.png') -522px -55px no-repeat;
}
.start-icon.climate-connection {
  background: url('../images/tsi-icons.png') -167px -42px no-repeat;
  width: 56px;
  background-size: 625px;
}
.start-icon.compare-contrast-connect {
  background: url('../images/tsi-icons.png') -305px -60px no-repeat;
}
.start-icon.further-investigation {
  background: url('../images/tsi-icons.png') -162px -60px no-repeat;
}
.start-icon.practices-science {
  background: url('../images/tsi-icons.png') -360px -60px no-repeat;
}
.start-icon.voice-of-the-sea {
  background: url('../images/tsi-icons.png') -410px -60px no-repeat;
}
.start-icon.traditional-ways {
  background: url('../images/tsi-icons.png') -465px -59px no-repeat;
}
/**
 *	Tooltip Custom Styles
 */
.tooltip {
  opacity: 0.95;
}
/**
 *	General Layout / Content
 */
#start-here-modal .modal-dialog,
#start-here-modal .modal-dialog *,
#start-here-modal .modal-dialog *:before,
#start-here-modal .modal-dialog *:after,
#start-here-community-modal .modal-dialog,
#start-here-community-modal .modal-dialog *,
#start-here-community-modal .modal-dialog *:before,
#start-here-community-modal .modal-dialog *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#start-here-modal .modal-header,
#start-here-community-modal .modal-header {
  display: none;
}
#start-here-modal .modal-content,
#start-here-community-modal .modal-content {
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}
#start-here-modal .modal-dialog,
#start-here-community-modal .modal-dialog {
  width: 800px;
  height: 550px;
  padding: 40px;
  background: #307aae;
  overflow: hidden;
}
#start-here-modal .modal-dialog .modal-body,
#start-here-community-modal .modal-dialog .modal-body {
  padding: 0;
}
#start-here-modal .modal-dialog .modal-body .slides:before,
#start-here-modal .modal-dialog .modal-body .slides:after,
#start-here-community-modal .modal-dialog .modal-body .slides:before,
#start-here-community-modal .modal-dialog .modal-body .slides:after {
  content: " ";
  display: table;
}
#start-here-modal .modal-dialog .modal-body .slides:after,
#start-here-community-modal .modal-dialog .modal-body .slides:after {
  clear: both;
}
#start-here-modal .modal-dialog .modal-body .slides .slide,
#start-here-community-modal .modal-dialog .modal-body .slides .slide {
  min-height: 440px;
}
#start-here-modal .modal-dialog .modal-body .slides .slide:before,
#start-here-modal .modal-dialog .modal-body .slides .slide:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide:before,
#start-here-community-modal .modal-dialog .modal-body .slides .slide:after {
  content: " ";
  display: table;
}
#start-here-modal .modal-dialog .modal-body .slides .slide:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide:after {
  clear: both;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-left,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-left {
  width: 325px;
  float: left;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-left:before,
#start-here-modal .modal-dialog .modal-body .slides .slide .content-left:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-left:before,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-left:after {
  content: " ";
  display: table;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-left:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-left:after {
  clear: both;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-right,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-right {
  width: 325px;
  float: right;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-right:before,
#start-here-modal .modal-dialog .modal-body .slides .slide .content-right:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-right:before,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-right:after {
  content: " ";
  display: table;
}
#start-here-modal .modal-dialog .modal-body .slides .slide .content-right:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .content-right:after {
  clear: both;
}
#start-here-modal .modal-dialog .modal-body .slides .slide h1,
#start-here-community-modal .modal-dialog .modal-body .slides .slide h1 {
  font-family: 'Lato', sans-serif;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  text-transform: uppercase;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
#start-here-modal .modal-dialog .modal-body .slides .slide h2,
#start-here-community-modal .modal-dialog .modal-body .slides .slide h2 {
  color: #FFF;
  margin: 0;
  font-size: 18px;
  margin-bottom: 15px;
}
#start-here-modal .modal-dialog .modal-body .slides .slide a,
#start-here-community-modal .modal-dialog .modal-body .slides .slide a {
  color: #FFF;
  text-decoration: none;
}
#start-here-modal .modal-dialog .modal-body .slides .slide p,
#start-here-community-modal .modal-dialog .modal-body .slides .slide p {
  color: #FFF;
  margin-bottom: 15px;
  font-size: 17px;
  line-height: 1.5;
}
#start-here-modal .modal-dialog .modal-body .slides .slide-controls:before,
#start-here-modal .modal-dialog .modal-body .slides .slide-controls:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide-controls:before,
#start-here-community-modal .modal-dialog .modal-body .slides .slide-controls:after {
  content: " ";
  display: table;
}
#start-here-modal .modal-dialog .modal-body .slides .slide-controls:after,
#start-here-community-modal .modal-dialog .modal-body .slides .slide-controls:after {
  clear: both;
}
#start-here-modal .modal-dialog .modal-body .slides .slide-controls a,
#start-here-community-modal .modal-dialog .modal-body .slides .slide-controls a {
  float: left;
}

/* Hide "Sign up" button from logged in users */
body.logged-in .sign-up-modal-link { display: none; }

/**
 *	Start Here - Slide One: "Explore"
 */
#explore.slide h1 {
  padding: 0 0 29px 0 !important;
}
#explore.slide .bubble {
  float: none;
  margin: 0 auto 18px;
  padding: 11px 0 0 10px;
}
#explore.slide .text-block {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-size: 15px;
}
#explore.slide .text-block.orange {
  width: 152px;
  margin-left: 20px;
  float: left;
  margin-top: 0;
}
#explore.slide .text-block:nth-child(5) {
  margin: 0 20px 0 0;
}
#explore.slide .text-block:nth-child(6) {
  margin: 0;
  padding: 9px 20px;
}
/**
 * Start Here - Slide Two: "Activities & Features"
 */
#activitiesandfeatures .content-right .large {
  margin-left: 0;
  margin-right: 15px;
}
#activitiesandfeatures .content-right .small {
  margin-left: 0;
  margin-right: 10px;
}
#activitiesandfeatures .content-right:nth-child(4) {
  margin-left: 0;
}
/**
 *	Start Here - Slide Three: "Just A Friendly Reminder"
 */
#joincommunity .content-left {
  position: relative;
  z-index: 9;
}
#joincommunity .content-right img {
  height: 450px;
  margin-left: -255px;
  z-index: 1;
}
/**
 *	Start Here - Slide Four: "Just A Friendly Reminder"
 */
#friendlyreminder .copyright-statement {
  font-size: 13px;
  display: block;
  margin: 15px 0;
  z-index: 99;
}
#friendlyreminder .copyright-statement small {
  display: block;
  margin: 15px 0;
}
#friendlyreminder .content-right img {
  margin-top: -66px;
  margin-left: -150px;
  position: absolute;
}
/* Prevent text from being covered by the image */
#friendlyreminder .content-left {  position: relative; z-index: 9; }
#friendlyreminder .content-right { position: relative; z-index: 1 }

/*  *  *  *  *  *  *  *  *  *  *  
 *
 *  Start Here Community Styles
 *
 *  *  *  *  *  *  *  *  *  *  */


/**
 *  General Modal Style Amendments
 */
#start-here-community-modal .modal-dialog { 
  width: 800px;
  height: 550px;
  /*background-color: #FFF;*/
  padding: 0;
}
#start-here-community-modal .slide {
  width: 800px;
  height: 550px;
  padding: 40px;
  background-color: #307aae;
}
#start-here-community-modal .slide:before, #start-here-community-modal .slide:after {
  content: " ";
  display: table;
}
#start-here-community-modal .slide:after {
  clear: both;
}

#start-here-community-modal .slide-count-container {
  margin-top: -42px;
}
#start-here-community-modal .slide .content-left {
  position: relative;
  z-index: 9;
}
#start-here-community-modal .slide .content-right {
  z-index: 1;
}
#start-here-community-modal .modal-dialog .modal-body .slides .slide h1 {
  font-size: 39px;
  line-height: 1.2;
}


/**
 * Interactive Styles
 */ 
#start-here-community-modal .slide.interactive {
  background: #FFF;
}
#start-here-community-modal .modal-dialog .modal-body .slides .slide.interactive h1,
#start-here-community-modal .modal-dialog .modal-body .slides .slide.interactive p {
  color: #307aae;
}
#start-here-community-modal .modal-dialog .modal-body .slides .slide .text-block p {
  color: #FFF;
}
/* Needed for modal conversation callouts only */
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout h1,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout p,
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout h1 strong {
  color: #FFF;
}
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout h1 { font-size: 23px; border: none; margin: 0; }
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout p { font-size: 15px; font-weight: 100; margin: 0; padding: 0; display: none; }
#start-here-community-modal .modal-dialog .modal-body .slides .slide .conversation-callout.active p { display: block; }

/**
 *  Conversation Form Styles
 */
#start-here-community-modal .modal-form-container {
  float: right;
}
#start-here-community-modal form#forum-node-form-modal {
  width: 450px;
  margin-left: -493px;
  position: absolute;
  z-index: 1;
}
#start-here-community-modal form#forum-node-form-modal input,
#start-here-community-modal form#forum-node-form-modal textarea {
  width: 100%;
  background-color: #307aae;
  border: none;
  padding: 20px;
  font-size: 14px;
  color: #FFF;
}
#start-here-community-modal form#forum-node-form-modal textarea { height: 200px; }
#start-here-community-modal form#forum-node-form-modal select { display: none; }
#start-here-community-modal form#forum-node-form-modal input[type='submit'] {
  display: block;
  float: right;
  width: auto;
  margin: 10px 0;
  padding: 10px 24px 12px;
  background: rgb(225, 60, 45);
  cursor: pointer;
}
#start-here-community-modal #ask-question-modal {
  width: 75px;
  height: 38px;
  padding: 7px 0 0 41px;
  margin: 11px 0 0 -128px;
  display: block;
  background: url('../images/ask-question-icon.png') 6px 6px no-repeat #3b97c8;
  position: absolute;
  z-index: 9;
}
#start-here-community-modal a.upload-trigger { position: absolute; right: 83px; }
#start-here-community-modal .fivestar-widget {
  float: right;
  margin-top: 13px;
}
#start-here-community-modal .fivestar-widget .star {
  width: 20px;
  height: 25px;
  float: left;
  margin-left: 5px;
  background: url('../images/tsi-community-drops.png') no-repeat;
  cursor: pointer;
}
#start-here-community-modal .fivestar-widget .star.hover,
#start-here-community-modal .fivestar-widget .star.selected {
  background: url('../images/tsi-community-drops.png') 0 -25px no-repeat;
}
#start-here-community-modal .fivestart-widget:first-child {
  margin: 0;
}

/**
 *  Conversation & Review Callouts
 */
#start-here-community-modal .conversation-callout-container {
  margin: 0;
}
.conversation-callout {
  width: 228px;
  display: block;
  background-color: #3b97c8;
  padding: 20px;
  position: relative;
}
.conversation-callout.active:before {
  content: " ";
  position: absolute; 
  width: 0px;
  height: 0px;
  left: -18px;
  top: 18px;
  border-style: solid;
  border-width: 14px 18px 14px 0;
  border-color: transparent #307aae transparent transparent;
}
.conversation-callout.active {
  background-color: #307aae;
}
.conversation-callout.active p {
  display: block;
}
.conversation-callout .start-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.conversation-callout .start-icon.conversation-icon {
  background: url('../images/conversation-icons.png') no-repeat;
}
.conversation-callout .start-icon.conversation-activity-icon {
  background: url('../images/conversation-icons.png') -10px 40px;
}
.conversation-callout h1,
.conversation-callout p, {
  color: #FFF;
}
.conversation-callout h1 { font-size: 23px; border: none; margin: 0; }
.conversation-callout p { font-size: 15px; }

/* "Conversation" block */
#conversation-callout-modal {
  cursor: pointer;
}

/* "Or" block */
#conversation-or-block-modal {
  background: none;
  margin: -15px 0;
  padding: 0;
  z-index: 1;
}
#conversation-or-block-modal span {
  color: #307aae;
  font-style: oblique;
  width: 30px;
  height: 30px;
  display: block;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-color: #FFF;
  text-align: center;
  padding: 2px 1px 0 0;
  margin: 0 auto;
  z-index: 99;
}

/* "Review" block */
#conversation-callout-review-modal {
  cursor: pointer;
}

/* New Convo/Review */
a.upload-trigger { background: url('../images/conversation-ui-upload.png') 7px 12px no-repeat rgb(59, 151, 200); padding: 10px 10px 10px 45px; margin: 10px 0; }
a.upload-trigger:before {
  content: " ";
  position: absolute;
  border-left: 1px solid #FFF;
  height: 42px;
  left: 38px;
  top: 0;
}

/**
 *  Slide One: 
 */
#welcome-community .content-right img {
  position: absolute;
  right: 0;
  top: 14px;
}

/**
 *  Slide Two: 
 */
#community-works .content-right img {
  position: absolute;
  right: -12px;
  top: 18px;
}

/**
 *  Slide Three: Conversation Intro;
 */
#conversations-intro .content-right img {
  position: absolute;
  right: -23px;
  top: 0;
}

/**
 *  Slide Four:
 */
#start-here-community-modal #conversations-start.slide .content-left { position: static; }
#conversations-start.slide .modal-form-container {
  z-index: 1;
  position: absolute;
  right: 39px;
  bottom: 96px;
}
/* Place modal content above modal form */
#conversations-start.slide p, 
#conversations-start.slide .text-block,
#conversations-start.slide .slide-controls {
  position: relative;
  z-index: 9;
}
/* Fade modal form behind the content */
.fade-content { opacity: 0.1; }
.hide-content { display: none; opacity: 0; }
/* Conversation Interactive Styles */
#conversations-start *[class*="step-"] { display: none; } /* Hide the rest */
#conversations-start *[class*="step-one"] { display: block; } /* Show the first step on load...*/
#conversations-start .content-left {
  height: 455px;
}

/**
 *  Slide Five: Conversation Intro
 */
#conversations-outro .content-right img {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
}

/**
 *  Slide Six: Review Intro
 */
#start-here-community-modal #reviews-intro .content-right img {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
}

/**
 *  Slide Seven: Review an activity
 */
#start-here-community-modal #reviews-start.slide .content-left { position: static; }
#reviews-start.slide .modal-form-container {
  z-index: 1;
  position: absolute;
  right: 39px;
  bottom: 51px;
}
#reviews-start *[class*="step-"] { display: none; } /* Hide the rest */
#reviews-start *[class*="step-one"] { display: block; } /* Show the first step on load...*/
#start-here-community-modal #reviews-start form#forum-node-form-modal input.title {
  width: 316px;
  float: left;
}
#reviews-start #ask-question-modal { display: none; }

/**
 *  Slide Eight: Review Outro;
 */
#start-here-community-modal #reviews-outro .content-right img {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
}

/**
 *  Slide Nine: Get Started
 */
#get-started .content-right img {
  position: absolute;
  right: 0;
  top: 14px;
}

/*
 *  Faux Dropdowns
 *  By Justin Hedani
 */
ul#faux-dropdown { padding: 0; position: absolute; /*background: rgb(59, 151, 200);*/ }
ul#faux-dropdown li { display: none; list-style: none; }
ul#faux-dropdown li.selected-option { display: block; }
ul#faux-dropdown li a { cursor: pointer; display: block; padding: 10px;  }
ul#faux-dropdown li a:hover { background: rgba(59, 151, 200, 0.8); }

/**
 *  TSI Specific Faux Dropdowns
 */
ul#faux-dropdown { margin: 10px 0; }
ul#faux-dropdown li { min-width: 263px; }
ul#faux-dropdown li.selected-option { padding-left: 45px; background: url('../images/conversation-ui-tag.png') 7px 13px no-repeat rgb(59, 151, 200); }
ul#faux-dropdown li.selected-option a { border-left: 1px solid #FFF; margin-left: 0px; }
ul#faux-dropdown a { background: rgb(59, 151, 200); margin-left: 46px; }