/* CSS for HarvardX's standard javascript library */

/* Using a 75-pixel tall image as a drop cap. */
.hx-icon-dropcap {
	float: left;
	height: 75px;
	padding: 4px 8px 3px 0px;
}

/* Using a single letter as a drop cap. */
/* Surround first letter with <span class="hx-dropcap"></span> */
span.hx-dropcap {
    float: left;
    color: #339;
    font-size: 48px;
    margin-top: -4px;
    margin-bottom: -16px;
    padding-top: 0px;
    padding-right: 4px;
    padding-left: 2px;
    font-family: serif;
    font-weight: bold;
}

/* Image that hangs over the top few lines of a paragraph on the right. */
.hx-hangright {
	float: right;
	margin: 4px 0px 3px 8px;
}

/* Image that hangs over the top few lines of a paragraph on the left. */
/* A lot like dropcap. */
.hx-hangleft {
	float: left;
	padding: 4px 8px 3px 0px;
}

/* For centering images. */
img.hx-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* For centering paragraphs. Using sparingly. */
p.hx-centered {
    text-align: center;
}

/* External links */
.fa-external-link {
    font-size: smaller;
    vertical-align: super;
}


/* Standard image caption */
/* Use <p><small class="hx-caption">Text</small></p> */
p > small.hx-caption {
    font-style: italic;
}

/* For clickable images that pop up dialog boxes. */
.hx-popup-content{
	background-color: #000000;
	display: none;
}

/* For clickable images that pop up dialog boxes. */
.hx-popup-dialog .ui-dialog-titlebar-close {
    display: none;
}

/* For clickable images that pop up dialog boxes. */
/* Not doing anything here yet, but this is how we change the orange if we want to. */
.hx-popup-dialog .ui-dialog-titlebar {}

/* Placeholder. */
.hx-footnote-style {
    font-size: small !important;
}

/* Larger UL and OL left-hand margins. */
#main .vert .xblock ul {
    margin-left: 1em !important;
}

#main .vert .xblock ol {
    margin-left: 1em !important;
}

/* For the smiley-face button */

.hx-smileystack {
    margin-left: auto;
}

.hx-smileystack .fa-smile-o {
    color:black;
}

.hx-smileystack .fa-meh-o {
    color:black;
}

.hx-smileystack.hx-smile .fa-circle {
    color:#bef;
}

.hx-smileystack.hx-meh .fa-circle {
    color:lightgray;
}

.hx-smileyspacer {
    margin-right: auto;
}

/* Add image HRs */
/*
hr.hx-fancy {
    background:url(hxFancyHR.gif) repeat-x top left;
    border: 0;
}
*/



/***************************************/
/* This block is for sidebar tables
/***************************************/

table.hx-hangright {
    max-width: 280px !important;
    float: right !important;
    margin-left: 20px !important;
    margin-top: 5px !important;
}

table.hx-hangright th {
    text-align: center;
}

table.hx-hangleft {
    max-width: 280px !important;
    float: left !important;
    margin-right: 20px !important;
    margin-top: 5px !important;
}

table.hx-hangleft th {
    text-align: center;
}

table.hx-compact-table td {
    padding: 3px !important;
}

table.hx-compact-table th {
    padding: 3px !important;
}

/************** End sidebar table Block *******************/


/***************************************/
/* This block is for auto-TOCs
/***************************************/

.hx-autotoc {
    float:right;
    border: 1px solid gray;
    border-radius: 8px;
    padding: 3px;
    margin: 8px;
    font-size: 14px;
    max-width: 300px;
}

.hx-autotoc h3 {
    color: #08b;
    font-size: 20px;
    margin-bottom: 6px !important;
}

.hx-autotoc ul {
    list-style-type: none !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.hx-autotoc li {
    padding: 1px !important;
    margin: 1px !important;
}

/************** End auto-TOC Block *******************/


/*********************************************/
/* This block is for fancy headers
/*********************************************/

/* Fancy header - no lowercase, all caps. */
h3.hx-smallcaps, h4.hx-smallcaps {
    font-variant: small-caps;
}

/* Super-bold white-on-color right-justified header */
/* Can be combined with smallcaps. */
.hx-superbold {
    background-color: #08b;
    color: white;
    text-align: right;
    padding-right: 4px;
}

h3.hx-superbold {
    font-size: 1.8em !important;
}

h4.hx-superbold {
    font-size: 1.5em !important;
}

/* Header with an underline that goes most of the way across. */
/* Can be combined with smallcaps. */

.hx-underline {
    border-bottom: 1px solid #189;
    width: 600px;
}

/************** End fancy-header Block *******************/


/*********************************************/
/* This block is for pretty boxes
/*********************************************/

/* For boxes of material separated from the regular text. */
/* Use h4 for headers inside. */
.hx-bluebox {
    border-left: 15px solid #048;
    background-color: #def;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-bluebox h4, .hx-sidebar h4 {
    font-variant: small-caps;
    color: #036;
}
.hx-bluebox h3, .hx-sidebar h3 {
    font-variant: small-caps;
    color: #036;
}

.hx-bluebox2 {
    border-left: 15px solid #5B93FF;
    background-color: #D6E4FF;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-bluebox2 h4 {
    font-variant: small-caps;
    color: #1E3460;
}
.hx-bluebox2 h3 {
    font-variant: small-caps;
    color: #1E3460;
}

.hx-greenbox {
    border-left: 15px solid #07A878;
    background-color: #C2EADE;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-greenbox h4 {
    font-variant: small-caps;
    color: #013A29;
}
.hx-greenbox h3 {
    font-variant: small-caps;
    color: #013A29;
}

.hx-redbox {
    border-left: 15px solid #800;
    background-color: #fdd;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-redbox h4 {
    font-variant: small-caps;
    color: #600;
}

.hx-redbox h3 {
    font-variant: small-caps;
    color: #600;
}
.hx-magentabox {
    border-left: 15px solid #A71852;
    background-color: #EEC6D4;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-magentabox h4 {
    font-variant: small-caps;
    color: #4D001F;
}
.hx-magentabox h3 {
    font-variant: small-caps;
    color: #4D001F;
}

.hx-orangebox {
    border-left: 15px solid #800;
    background-color: #fdd;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-orangebox h4 {
    font-variant: small-caps;
    color: #752900;
}
.hx-orangebox h3 {
    font-variant: small-caps;
    color: #752900;
}

.hx-purplebox {
    border-left: 15px solid #6C35C0;
    background-color: #DBCDEF;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-purplebox h4 {
    font-variant: small-caps;
    color: #330974;
}

.hx-purplebox h3 {
    font-variant: small-caps;
    color: #330974;
}

.hx-greybox, .hx-graybox {
    border-left: 15px solid #666;
    background-color: #ddd;
    padding: 10px 10px 5px 15px;
    margin: 40px;
}

.hx-greybox h4, .hx-graybox h4 {
    font-variant: small-caps;
    color: #333;
}

.hx-greybox h3, .hx-graybox h3 {
    font-variant: small-caps;
    color: #333;
}

/* For right-hand sidebars. Add colorbox styling. */
/* Use h4 for headers inside. */
.hx-sidebar {
    margin: 3px 20px 20px 20px;
	float: right;
	width: 45%;
}

/* For boxes that contain big quote marks in the background. Stylish. */
/* Add colorbox styling */
.hx-excerpt {

    background-image: url(quote-right.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.hx-excerpt .hx-quote-source {
    text-align: right;
    font-style: italic;
}

/* Helps with above. */
.hx-excerpt p {
    background-image: url(quote-left.png);
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 1em 60px 0;
    min-height: 37px;
}
/* Helps with above. */
.hx-excerpt p + p {
    padding-top: 0;
    background-image: none;
}

/************** End pretty-box Block *******************/


/*********************************************/
/* This block is for the Slick image slider.
/*********************************************/
.hx-sliderbox{
    background-color: #FFF;
    border-top: 4px groove #189;
    border-bottom: 4px ridge #189;
    border-left: none;
    border-right: none;
    padding: 0px 25px 0px 25px;
    margin-bottom: 15px;
}

.hx-slidertext{
    color:black !important;
    margin: 4px 2px 4px 2px !important;
    padding: 2px;
}

.hx-slider > p {
    color:black !important;
    margin: 4px 2px 4px 2px !important;
    padding: 2px;
}

.hx-navslider > p {
    color:black !important;
    margin: 4px 2px 4px 2px !important;
    padding: 2px;
}

.hx-bigslider > p {
    color:black !important;
    margin: 4px 2px 4px 2px !important;
    padding: 2px;
}

.slick-prev:before, .slick-next:before {
    color: #189 !important;
}
/************** End Slick Block *******************/


/***************************************/
/* This block is for video links.
/***************************************/

#hx-vidlinks-static {
}

#hx-vidlinks-live {
}

.hx-link-text-live {
}

.hx-vidlink_bl {
	display: none;
	opacity: 0.7;
	background-color: black;

	font-size: 16px;
	color: white;

	position: absolute;
	bottom: 50px;

	padding: 4px;
	border: 2px solid grey;
	margin: 2px;

	border-radius: 4px;
	box-shadow: 2px 2px 4px #111;
}

.hx-vidlink_br {
	display: none;
	opacity: 0.7;
	background-color: black;

	font-size: 16px;
	color: white;

	position: absolute;
	bottom: 50px;
	right: 5px;

	padding: 4px;
	border: 2px solid grey;
	margin: 2px;

	border-radius: 4px;
	box-shadow: 2px 2px 4px #111;
}

.hx-vidlink_tl {
	display: none;
	opacity: 0.7;
	background-color: black;

	font-size: 16px;
	color: white;

	position: absolute;
	top: 5px;

	padding: 4px;
	border: 2px solid grey;
	margin: 2px;

	border-radius: 4px;
	box-shadow: 2px 2px 4px #111;
}

.hx-vidlink_tr {
	display: none;
	opacity: 0.7;
	background-color: black;

	font-size: 16px;
	color: white;

	position: absolute;
	top: 5px;
	right: 5px;

	padding: 4px;
	border: 2px solid grey;
	margin: 2px;

	border-radius: 4px;
	box-shadow: 2px 2px 4px #111;
}

.hx-vidlink-static {
	display: list-item;
}

.hx-vidlink_bl a:link {
	color: white;
}

.hx-vidlink_tl a:link {
	color: white;
}

.hx-vidlink_tr a:link {
	color: white;
}

.hx-vidlink_br a:link {
	color: white;
}

.hx-vidlink_bl a:visited {
	color: white;
}

.hx-vidlink_tl a:visited {
	color: white;
}

.hx-vidlink_tr a:visited {
	color: white;
}

.hx-vidlink_br a:visited {
	color: white;
}

.hx-link-positioner {
	position: relative !important;
}


.hx-boldlink {
	font-weight: bold !important;
}

/*********** End Video Link Block **********/



/***************************************/
/* This block is for pop-up problems.
/***************************************/

.ui-widget-overlay {
   background: #666 !important;
   opacity: .30 !important;
   filter: Alpha(Opacity=30) !important;
   position:fixed !important;
}

.hx-popup.ui-dialog {
	z-index: 100001 !important;
}

.hx-popup .ui-dialog-titlebar-close {
  display: none;
}

.hx-popup .ui-dialog-titlebar {
	background: linear-gradient(to top, #ccc 0%,#bbb 20%,#eee 100%);
	border: 1px solid #AAA;
}

.hx-popup .answeredButton {
	background: linear-gradient(to top, #9fd 0%,#7db 20%,#afd 100%);
	background-color:#afc;
	text-shadow: none;
}

span.hx-VQControls {
	font-size: 150%;
}

span#hx-onoff {
	font-weight: bold;
}

span#hx-playpauseword{
	font-weight: bold;
}

/************** End Pop-Up Problems Block *******************/