/*--------------------------------------------------------------
 CIRCL custom stylesheet. To override styles from other stylesheets, 
 copy them here and edit away.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
  Digital Promise's Museo Sans Font 
--------------------------------------------------------------*/
* {font-family:"Museo Sans", 'Helvetica Neue', sans-serif}

@font-face { font-family: Museo Sans; font-weight: 100; 
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-100.otf) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 100; font-style: italic;
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-100Italic) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 300; 
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-300.otf) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 300; font-style: italic;
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-300Italic) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 500; 
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-500.otf) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 500; font-style: italic;
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-500Italic) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 700; 
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-700.otf) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 700; font-style: italic;
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-700Italic) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 900; 
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-900.otf) format("opentype"); }
@font-face { font-family: Museo Sans; font-weight: 900; font-style: italic;
	src: url(https://circlcenter.org//wp-content/themes/buddyboss-child/fonts/exljbris - MuseoSans-900Italic) format("opentype"); }

/*--------------------------------------------------------------
  Global Styles
--------------------------------------------------------------*/
html {
	font-size: 100%;
}
body {
	font-size: 15px;
	font-family: 'Museo Sans', 'Helvetica Neue', sans-serif;
	color: #333;
}

/* less blank space above page headers */
body .site {
    max-width: 1366px !important;
    margin-bottom: 50px;
    padding-top: 20px;
    padding-bottom: 30px;
}

/* make page titles a little smaller with less space before/after */
.entry-header .entry-title {
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    padding-top: 15px;
}
  
/* Less padding above and below banner */
.header-inner {
    padding-top: 0px;
    padding-bottom: 5px;
    overflow: hidden;
    min-height: 70px;
    max-width: 1366px !important;
}

/* Less space after headers */
.entry-content h2 {
  margin-bottom: 10px;
}

.entry-content h3 {
  margin-bottom: 6px;
  line-height:normal;
}

.entry-content h4 {
    margin-bottom: 4px;
    font-weight:500;
    line-height:normal; !important;
}
.entry-content h5 {
  margin-bottom: 0px;
}

.entry-content big {
	font-size: 20px;
  	font-family: 'Museo Sans', 'Helvetica Neue', sans-serif;
	color: #333;
}

.entry-content b {
  font-weight: 700;
}

.entry-content blockquote-white {
  margin-bottom: 24px;
  margin-left: 24px;
  padding: 24px;
  background-color: #ffffff
}

.h1-slim {
  font-size:28px; 
  font-weight:300; 
  line-height: 1; 
  margin-top:15px;
}

.footer-widget{
	width:29%;
}
div.footer-inner-bottom {
	background-color: #333333!important;
}
div.footer-inner-top p {
    line-height: 1.5;
    color: #404040
}

/* Hide post dates and authors */
.entry-meta time { display:none; }
.entry-meta .by-author { display:none; }

/* Hide big featured image - wtf? 9/2/16 */
.entry-post-large { display:none; }

/* hide login button in header */
.header-account .button{display:none;}

/* Hide title on home page */
.home .entry-header {
	display: none !important;
}
.hide-title {
  display: none;
}

/*--------------------------------------------------------------
 Navigation Menus
--------------------------------------------------------------*/
.main-navigation li a {
	border-bottom: 0;
	color: #404040;
	font-weight: 500;
	line-height: 1;
	padding: 16px 22px;
	font-size: 15.5px;
	white-space: nowrap;
	word-wrap: break-word;
}
.main-navigation li a:hover {
	background-color: #CCC;
}
.main-navigation .current-menu-item {
    color: #000;
    background-color: #a3a3a3;
}
/* and let it get wider */
.nav-inner {
      max-width: 1366px !important;
}
/* quote rotator */
.rotatequote {
  	display:inline;
  	margin-top: -180px;
  	right: 30px;;
  	position:absolute;
}

/* Contact | Educators | social media links in upper right */
.toprightmenu {
  	margin-top: -90px;
  	right: 30px; 
  	font-size: 15px;
  	font-weight: 500;
  	color: #404040;
  	line-height: 1;
  	position:absolute;
}
.toprightmenu a {
  	color: black;
}

/*--------------------------------------------------------------
 Search - Magnifying glass search field, from Twenty Thirteen
--------------------------------------------------------------*/
input[type="search"] {
	-webkit-appearance: textfield;
	padding-right: 2px; /* Don't cut off the webkit search cancel button */
	width: 270px;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
.site-header .search-form {
	position: absolute;
	right: 376px;
	top: 0px;
}
/* Hide search button; we want just the magnifying glass */
.site-header .screen-reader-text {
    color: white;
}
/* Hide Search For text */
.site-header .search-submit {
    display: none;
}
.site-header .search-field {
	/* background-color: transparent; */
  background-color: white;
	background-image: url(../images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 1px;
}
.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}

/*--------------------------------------------------------------
 Search - OLD (check if using; maybe can delete?)
--------------------------------------------------------------*/
/* OLD search box in header */
.custom-search {
  	margin-top: -60px;
  	margin-left: 70%;
  	position:absolute;
}

/* OLD search box - make it narrower and shorter */
.widget-area #s {
  	width:120px;
  	height:32px;
  	padding-top: 0;
	padding-right-value: 0;
	padding-bottom: 0;
	padding-left-value: 0;
	margin-bottom: 0px;
}

/* search and filter plugin: project search */
.searchandfilter > ul {
	margin:0;
	padding:0;
}
.searchandfilter > ul > li {
	display:inline-block;
  	padding-bottom:5px;
  	padding-top:5px;
	padding-right:5px;
}

/*--------------------------------------------------------------
 Tables
--------------------------------------------------------------*/
.tr {
   vertical-align: top !important;
   text-align: top;
} 

.entry-content table {
	border-bottom: 1px solid #eaeaea;
	color: #757575;
	font-size: 14px;
	line-height: 2;
	margin: 0 0 24px;
	width: 100%;
}
/* community report table */
.entry-content cr-table,
.comment-content cr-table {
	border-bottom: 0px solid #eaeaea;
	color: #333;
	font-size: 14px;
	line-height: 1;
	margin: 0 0 0px;
  width: 50%;
}
.entry-content cr-table tr, td,
.comment-content cr-table tr, td {
	color: #333;
  vertical-align: middle !important;
  text-align: top;
	font-size: 14px;
	line-height: 1;
}

/* borderless table: add class="noBorder" in table, tr, td */
.entry-content .noBorder {
    border:none !important;
    margin: 0 0 0px;
}
.noBorder {
    border:none !important;
  	margin: 0 0 0px;
}

/*--------------------------------------------------------------
 Meta Slider Plugin - for home page slider
 Consider switching to Serious Slider instead; more accessible - 7/30/20 ps
--------------------------------------------------------------*/
.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    line-height: 1.4em; /* adjust as necessary */
    font-size: 1.6em; /* adjust as necessary */
    right: auto;
    bottom: 0px;
    width: 95%;
    height: 100%;
    left: auto;
}

/*--------------------------------------------------------------
  Content View Plugin - for display of primers, perspectives, projects, home, etc.
--------------------------------------------------------------*/
/* make content view title not smushed */
.pt-cv-pinterest .pt-cv-title {
    padding: 10px 15px;
    margin-bottom: 0!important;
    line-height:140%; !important;
}

/*--------------------------------------------------------------
 Category List (Catlist) Plugin - for news
--------------------------------------------------------------*/
/* news on front page */
.homeNewsItem li {
   margin: 0 0 0 0;
   padding-bottom:10px;
}
.homeNewsItem li p {
   display: inline;
}
.homeNewsItem p {
   display: inline;
}
.homeNewsTitle::after {
   content: ": ";
   display: inline;
}
.homeNewsItem {
   list-style-type: none;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
 }
.lcp_excerpt {
	display: inline; /* no break between news title and text */
}

/* Class for left floating thumbnails - not using? */
.left-thumb-image {
  float: left;
  width: 80px;
  border: 1px solid black;
  margin: 5px 10px 0px 0px;
  }

/* Class for perspective thumbs to float left - not using? */
.left-medium-image {
  float: left;
  width: 130px;
  border: 1px solid black;
  margin: 5px 10px 0px 0px;
}

/*--------------------------------------------------------------
  Events Calendar Shortcode Plugin
--------------------------------------------------------------*/
/* remove padding around the list elements */
.ecs-event-list li {
    margin: 0 0 0 0;
} 
.ecs-event-list { 
   padding:0!important;
}
.ecs-event { 
   border-bottom: thin solid #E4E9F4;
   list-style-type: none;
   padding:5px;
}
/* show data on same line (compact) */
.ecs-event h4 { 
   display:inline;
   margin-right: 5px;
   font-size: 14px;
   font-weight: regular;
}
.ecs-all-events { 
   margin-top: 2px;
   margin-left: 5px;
   font-size:small;
}
/* Widget formatting of event calendar (in sidebar) - not using? */
.tribe-events-adv-list-widget .tribe-events-widget-link a, .tribe-events-back a, .tribe-events-list-widget .tribe-events-widget-link a, ul.tribe-events-sub-nav a {
    font-size: 13px;
    font-weight: 500;
    margin-top: 15px;
}
#tribe-events-list-widget-2 {
	margin-left: 0px;
}
.tribe-events-list-widget ol li {
	margin-bottom: 8px;
}

/*--------------------------------------------------------------
 New2CL - are we using?
--------------------------------------------------------------*/
.new2cl {
 	/* old background: url(/wp-content/uploads/2015/05/new-to-cyberlearning.png); 
  	   new background: http://circlcenter.org/wp-content/uploads/2018/03/new2cl-spiral.png */
  	margin-top: -80px;
  	margin-left: 38%;
  	position:absolute;
}
@-moz-document url-prefix() { 
 	.new2cl {
 	/* background: url(/wp-content/uploads/2015/05/new-to-cyberlearning.png); */
  	margin-top: -80px;
  	margin-left: 38%;
  	position:absolute;
	}
}
/*--------------------------------------------------------------
 Quote Rotator - not using anymore? 
--------------------------------------------------------------*/
#quotearea {
   display:inline;
   padding: 0 0 0 0;
   margin: 0px auto;
}
#quoterotator {
   display:inline;
   line-height: 100%;
   color: #dd3333;
   font-style: italic;
}

/*--------------------------------------------------------------
 Callout Boxes
--------------------------------------------------------------*/
.noticebox {
    width:95%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 20px;
}

.download-report-box {
    width: 200px;
	float: right;
    text-align:center;
    margin-left: 40px;
    margin-bottom: 10px;
    text-align:center;
}

/* for project spotlights, the box with NSF info */
.spotlightbox {
    float: right;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.spotlightbox h3 { 
  font-size: 15px;
  font-weight: bold;
  font-color: black;
  margin-top: 5px;
}

/* for anysize spotlights */
.anysizespotlightbox {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 0px;
}

/* callout for project page */
.project-callout {
    float: right;
    width: 300px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: -60px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

/* for project start and end dates */
.projectdates {
    float: right;
    width: 160px;
    margin-left: 10px;
}

.projectdates::before { 
    content: "Start-End Dates:   ";
}

/* for survey callouts on webinar pages */
.surveycallout {
    float: right;
    width: 180px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.back-to-program {
    float: right;
    width: 160px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: -60px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.back-to-primers {
    float: right;
    width: 110px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.back-to-perspectives {
    float: right;
    width: 150px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: -60px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.back-to-spotlights {
    float: right;
    width: 130px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.back-to-report {
    float: right;
    width: 150px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    margin-top: 8px;
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 0px;
}

/*--------------------------------------------------------------
 Big Button - for Registration button (Webinars, etc.)
 From http://www.adam-bray.com/blog/86/Simple+CSS+3+buttons
--------------------------------------------------------------*/
[class*='btn-'] {
	border-radius: 15px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
	color: #fff;
	display: inline-block;
	font-family: 'Museo Sans', Helvetica, sans-serif;
	font-size: 20px;
  	font-weight:regular;
 	text-decoration:none;
	padding: 8px 16px;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: background-color 0.1s linear;
	-moz-transition: background-color 0.1s linear;
	-o-transition: background-color 0.1s linear;
	transition: background-color 0.1s linear;	
}
[class*='btn-']:hover {
	cursor: pointer;
}
.btn-red {
	background-color: #FF0000;
	border: 1px solid #C80000;
}
.btn-red:hover {
	background-color: #C00000;
  	 text-decoration:none;
}	
.btn-red:active {
	background-color: #C80000;
}
/*--------------------------------------------------------------
 Sidebar - formatting for widgets (borders, font, etc.)
--------------------------------------------------------------*/
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	background: #fff;
    border: 1px solid #D2D3D6;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
    border-radius: 3px;
	padding: 15px;
	margin-bottom: 20px; /* was 40px initially, too much space */
	word-wrap: break-word;
}
.widget-area .widget h3,
.widget-area .widget_bp_profile_search h4 {
    border-bottom: 1px solid #E9EAED;
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
    background: #F6F7F8;
    font-size: 14px;
    font-weight: 500;
    margin: -15px -15px 15px; /* makes up for 15px .widget padding */
    padding: 10px 15px;
    line-height: 1.5;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	line-height: 1.71429;
}
.widget-area .widget p {
	margin-bottom: 6px; /* was 12px */
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
}
.widget-area .textwidget li {
	margin-left: 36px;
}

/*--------------------------------------------------------------
 Vertical Tabs down left - used for Reflection Report
--------------------------------------------------------------*/

.vertical-tabs {
    min-width: 200px;
	max-width: 200px;
	float: left;
	display: inline;
	margin-left:0px;
	margin-right:0px;
	margin-top: 0px;
	padding-left:0px;
}
.vertical-tabs:before {
	content: "Contents";
	font-weight: 600;
	font-size: 16px;
	padding-bottom: 10px;
	margin-left: 10px;
	border-bottom: 1px solid #DCDCDC;
}
.vertical-tabs ul {
	display: block;
	margin-top: 10px;
    list-style: none;
    list-style-type: disc;
    margin-left: -30px;
}
.vertical-tabs ul li {
    clear: left;
	font-size: 14px;
	margin-top: 5px;
	padding: 3px;
	list-style: none;
    text-decoration: none;
}
.vertical-tabs ul li a {
    display: block;
	color: #333;
    width: 100%; 
}
.vertical-tabs ul li a:hover {
    display: block;
	color: #C80000;
    width: 100%; 
	margin-left:-5px;
	text-decoration: none;
}
.vertical-tabs ul .active:before {
  content: "   ";
  padding-right: 5px;
  text-indent: -1em;
  margin-left: -10px;
  border-left: 5px solid red;
}

.vertical-tab-content {
	width: 75%;
	display:inline;
	float:right;
	margin-left: 0px;
	margin-top: 0px;
}
/* not using ? */
.appendix {
	display: block;
    border-bottom: 1px solid #ccc;
	margin-top: 20px;
}

/*--------------------------------------------------------------
 RESPONSIVE MEDIA QUERIES (mobile styles)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 MAXIMUM width of 680 pixels (phones landscape)
--------------------------------------------------------------*/
@media (max-width: 680px) {
	#main-slider {
		display: none; /* hide slider */
	}
} /* don't delete this closing bracket */

/*--------------------------------------------------------------
 MAXIMUM width of 720 pixels (phones landscape)
--------------------------------------------------------------*/
@media screen and (max-width: 720px) {

	/* Make red so doesn't show white title aganst light gray on mobile */
	#mobile-header h1, #mobile-header h1 a {
    	color: #dd3333;
    	text-decoration: none;
	}
} /* don't delete this closing bracket */

/*--------------------------------------------------------------
 MAXIMUM width of 380 pixels (phones portrait)
--------------------------------------------------------------*/
@media screen and (max-width: 380px) {
	/* No white title aganst light gray on mobile */
	#mobile-header h1, #mobile-header h1 a {
    	color: red;
    	text-decoration: none;
	}
} /* don't delete this closing bracket */

/*--------------------------------------------------------------
 MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px)  {
	/* No white title aganst light gray on mobile */
	#mobile-header h1, #mobile-header h1 a {
    	color: red;
    	text-decoration: none;
	}
} /* don't delete this closing bracket */


/*--------------------------------------------------------------
 MINIMUM width of 1040 pixels (desktops and laptops)
--------------------------------------------------------------*/
@media screen and (min-width: 1040px)  {
	/* No white title aganst light gray on mobile */
	#mobile-header h1, #mobile-header h1 a {
		color: red;
    	text-decoration: none;
}
} /* don't delete this closing bracket */