/* A. General-purpose CSS */

/* content col formatting */
.div-col-content { background-color: rgba(255,255,255,0.75); padding: 0 2rem 12rem 2rem; }

.ol-cap-letters { list-style-type: upper-alpha; }
.ul-open-circle { list-style-type:circle; }
.ul-square { list-style-type: square; }
.li-spacer li { padding-bottom: 8px; }
.li-spacer-lg li { padding-bottom: 1.5rem; }
.li-no-spacer li { padding-bottom: 0; }

.img-active { border: 1px solid lightgray; }
.img-active:hover { border-color: blue; }
.img-clipart { border: 1px solid white; padding: 8px; width: 100px !important; }
.img-clipart:hover { border-color: lightgray;	}

.text-sm { font-size: 0.8rem; }
.text-xs { font-size: 0.6rem; }
.text-lg { font-size: 1.2rem; }
.text-xl { font-size: 1.4rem; }
.text-nospace { padding: 0; margin: 0; }

.color-blue { color: blue !important; }
.color-red { color: red !important; }
.color-yellow { color: gold !important; }
.color-purple { color: rebeccapurple !important; }
.color-orange { 	color: orange !important; }
.color-green { color: green !important; }
.color-gray { color: gray !important; }
.color-gold { color: gold !important; }

.color-dark-blue { color: navy; }
.color-dark-purple { color: indigo; }

.hr-dashed { border-top: dashed 1px; }
.div-spacer { height: 32rem; }


/* B. Fitness website-specific CSS */

/* raw bg images */
.bg-leaves2 { background-image: url('bg_leaves2.png'); }
.bg-foggy-birds { background-image: url('bg_foggy_birds.png'); }
.bg-blue-snow { background-image: url('bg_blue_snow.png'); }
.bg-sun-pattern { background-image: url('bg_sun_pattern.png'); }
.bg-geometry { background-image: url('bg_geometry.png'); }

/* logical bg images */
.bg-home { background-image: url('bg_leaves2.png'); }
.bg-main1 { background-image: url('bg_light_spring.png'); }
.bg-main2 { background-image: url('bg_palm_leaf.png'); }
.bg-member1 { background-image: url('bg_foggy_birds.png'); }
.bg-member2 { background-image: url('bg_sun_pattern.png'); }
.bg-justme { background-image: url('bg_blue_snow.png'); }

/* backgrounds used in individual exercise, workout, and hint pages */
.bg-exercises { background-image: url('bg_memphis_colorful.png'); }
.bg-exercise1 { background-image: url('bg_triangle.png'); }

.bg-workouts { background-image: url('bg_watercolor_splatter.jpg'); }
.bg-workout1 { background-image: url('bg_sun_pattern.png'); }

.bg-hints { background-image: url('bg_light_spring.png'); }
.bg-resources { background-image: url('bg_palm_leaf.png'); }

/* colors used in the main 4 pages: Workouts, Exercises, Hints, Resources */
.bg-main-workouts { background-color: AliceBlue; }
.bg-main-exercises { background-color: MintCream; }
.bg-main-hints { background-color: Snow; }

/* source: https://brandpalettes.com/planet-fitness-color-codes */
.color-planet-fitness-purple { color: #A4278D !important; }
.color-planet-fitness-yellow { color: #F9F72E !important; }

.backto-active { border: 1px solid white; }
.backto-active:hover { border-color: #0275d8; }
.text-backto { background-color: aliceblue; padding: 8px 16px; border-radius: 8px; }

.text-comingsoon { color: gray; font-style: italic; }
.text-old { color: gray; text-decoration: line-through; }
.text-note { color: rebeccapurple; }
.bg-note-today { background-color: ghostwhite; padding: 1rem; }

.title-workout { color: DarkSlateBlue; margin-bottom: 1.6rem; }
.section-workout { color: dimgray; margin-top: 1.8rem; margin-bottom: 0.8rem; }
.title-hint { margin-bottom: 1.6rem; }
.section-hint { color: gray; margin-top: 1.8rem; margin-bottom: 0.8rem; }
.title-exercise { color: DarkSlateBlue; }
.section-exercise { color: dimgray; margin-top: 1.8rem; }

.color-section { color: Gray; }
.color-workout-header { color: DarkSlateBlue; }
.hr-section { margin-top: 1.5rem; }
.icon-workout { font-size: 2rem; color: black; text-decoration: none; padding: 0 0.6rem; }

/* readme is Bootstrap "danger" red, bigger font, and padded */
.text-readme { color: #dc3545; font-size: 1.2rem; padding: 0 0.5rem; }
.text-idea { color: #ffc107; font-size: 1.2rem; padding: 0 0.5rem; }

/* for tables in member pages */
.td-workout-special { padding-left: 2rem !important; background-color: LavenderBlush !important; color: black !important; }
.td-workout-header { background-color: Gainsboro !important; }

/* for embedded youtube videos */
/* Source: www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed */
.exercise-video-container { 
	position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.exercise-video {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.a-disabled { pointer-events: none; color: gray !important; }

.p-prelist { margin-bottom: 0.5rem; }

/*************************************************************************/
/* deprecated: 1) combo is now workout and 2) resources is part of hints */
.bg-combos { background-image: url('bg_watercolor_splatter.jpg'); }
.bg-combo1 { background-image: url('bg_sun_pattern.png'); }

.bg-main-combos { background-color: AliceBlue; }
.bg-main-resources { background-color: LightYellow; }

.color-combo-header { color: DarkSlateBlue; }
.combo-title { color: DarkSlateBlue; margin-bottom: 1.6rem; }
.combo-section { color: dimgray; margin-top: 1.8rem; margin-bottom: 0.8rem; }

.td-combo-special { padding-left: 2rem !important; background-color: LavenderBlush !important; color: black !important; }
.td-combo-header { background-color: Gainsboro !important; }

.member-section  { color: dimgray; margin-top: 1.8rem; }  /* no more member pages */

.exercise-title { color: red; margin-bottom: 1.0rem; }
.exercise-section { color: red; margin-top: 1.8rem; margin-bottom: 0.8rem; }
/*
.hint-title { color: DarkSlateBlue; margin-bottom: 1.6rem; }
.hint-section { color: dimgray; margin-top: 1.8rem; margin-bottom: 0.8rem; }
*/