@charset "UTF-8";
/* style */
/* */
/* 90 */
/* 44 px */
/* 15 */
/* 15 */
/* COLORS
----------------------------------------------------------------------------- */
/* 2020 colors */
/* Palleton
-------------------------------------- */
/* Link (primary branding)
-------------------------------------- */
/*
$color_primary: #085278;
$color_primary_hover: #063953;
$color_primary_active: #03202F;
$color_primary_underline: #9CBAC9; //#97cbdc; // #6eb7c6;
*/
/* Backgrounds
-------------------------------------- */
/*
$color_bg: #E4E9ED;
$color_bg_hover: #CDD1D5;
$color_bg_active: #D0D0D0;
*/
/* Text
-------------------------------------- */
/* Form colors
----------------------------------------------------------------------------*/
/* $input_bg_color: #F5F5F5; */
/* $input_bg_color_focus: #FFFFFF; */
/* border
----------*/
/* Bootstrap breakpoints
------------------------------------------------------------------------------*/
/* mixins
----------------------------------------------------------------------------------------*/
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 15, 2016 */
@font-face {
font-display: swap;
font-family: "bebas_neue_regular";
src: url("/fonts/Bebas-Neue/bebasneue_regular-webfont.eot");
src: url("/fonts/Bebas-Neue/bebasneue_regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas-Neue/bebasneue_regular-webfont.woff2") format("woff2"), url("/fonts/Bebas-Neue/bebasneue_regular-webfont.woff") format("woff"), url("/fonts/Bebas-Neue/bebasneue_regular-webfont.ttf") format("truetype"), url("/fonts/Bebas-Neue/bebasneue_regular-webfont.svg#bebas_neue_regularregular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "bebas_neuebold";
src: url("/fonts/Bebas-Neue/bebasneue_bold-webfont.eot");
src: url("/fonts/Bebas-Neue/bebasneue_bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas-Neue/bebasneue_bold-webfont.woff2") format("woff2"), url("/fonts/Bebas-Neue/bebasneue_bold-webfont.woff") format("woff"), url("/fonts/Bebas-Neue/bebasneue_bold-webfont.ttf") format("truetype"), url("/fonts/Bebas-Neue/bebasneue_bold-webfont.svg#bebas_neuebold") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "bebas_neuelight";
src: url("/fonts/Bebas-Neue/bebasneue_light-webfont.eot");
src: url("/fonts/Bebas-Neue/bebasneue_light-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas-Neue/bebasneue_light-webfont.woff2") format("woff2"), url("/fonts/Bebas-Neue/bebasneue_light-webfont.woff") format("woff"), url("/fonts/Bebas-Neue/bebasneue_light-webfont.ttf") format("truetype"), url("/fonts/Bebas-Neue/bebasneue_light-webfont.svg#bebas_neuelight") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "bebas_neuebook";
src: url("/fonts/Bebas-Neue/bebasneue_book-webfont.eot");
src: url("/fonts/Bebas-Neue/bebasneue_book-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas-Neue/bebasneue_book-webfont.woff2") format("woff2"), url("/fonts/Bebas-Neue/bebasneue_book-webfont.woff") format("woff"), url("/fonts/Bebas-Neue/bebasneue_book-webfont.ttf") format("truetype"), url("/fonts/Bebas-Neue/bebasneue_book-webfont.svg#bebas_neuebook") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "bebas_neuethin";
src: url("/fonts/Bebas-Neue/bebasneue_thin-webfont.eot");
src: url("/fonts/Bebas-Neue/bebasneue_thin-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas-Neue/bebasneue_thin-webfont.woff2") format("woff2"), url("/fonts/Bebas-Neue/bebasneue_thin-webfont.woff") format("woff"), url("/fonts/Bebas-Neue/bebasneue_thin-webfont.ttf") format("truetype"), url("/fonts/Bebas-Neue/bebasneue_thin-webfont.svg#bebas_neuethin") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "bebasregular";
src: url("/fonts/Bebas/bebas-webfont.eot");
src: url("/fonts/Bebas/bebas-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Bebas/bebas-webfont.woff2") format("woff2"), url("/fonts/Bebas/bebas-webfont.woff") format("woff"), url("/fonts/Bebas/bebas-webfont.ttf") format("truetype"), url("/fonts/Bebas/bebas-webfont.svg#bebasregular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "BAUHS93";
src: url("/fonts/bauhs93/BAUHS93.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 15, 2016 */
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-bold-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-bold-webfont.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-bolditalic-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-bolditalic-webfont.woff") format("woff");
font-weight: bold;
font-style: italic;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-medium-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-medium-webfont.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-mediumitalic-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-mediumitalic-webfont.woff") format("woff");
font-weight: 600;
font-style: italic;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/ufonts.com_gotham-book-webfont.woff2") format("woff2"), url("/fonts/gotham/ufonts.com_gotham-book-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/ufonts.com_gotham-book-italic-webfont.woff2") format("woff2"), url("/fonts/gotham/ufonts.com_gotham-book-italic-webfont.woff") format("woff");
font-weight: normal;
font-style: italic;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-light-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-light-webfont.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "gotham";
src: url("/fonts/gotham/gotham-lightitalic-webfont.woff2") format("woff2"), url("/fonts/gotham/gotham-lightitalic-webfont.woff") format("woff");
font-weight: 300;
font-style: italic;
}
.bootstrap .font-nanum-pen-script {
font-family: "Nanum Pen Script";
}
.bootstrap .font-montserrat-italic-bold {
font-family: "Montserrat", sans-serif;
font-weight: 800;
}
.bootstrap .font-montserrat-italic {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
/* style */
/* */
.bootstrap .bg-graph-nodes {
background-color: #205668;
color: #fff;
background-image: url(/images/bg/graph-nodes-bg.jpg?v=u27jgtk);
background-repeat: repeat-y;
background-position: center center;
}
.bootstrap .bg-grad-multi-color {
background-color: #205668;
background-image: url(/images/bg/grad-multi-color.jpg?v=u27jgtz);
background-repeat: repeat-y;
background-position: center center;
background-size: 100%;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-xs-pad {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-sm-pad, .bootstrap .bg {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-sm-pad, .bootstrap .bg {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-md-pad {
padding-top: 70px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-md-pad {
padding-top: 130px;
padding-bottom: 130px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-lg-pad {
padding-top: 170px;
padding-bottom: 170px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-xl-pad {
padding-top: 150px;
padding-bottom: 150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-xl-pad {
padding-top: 200px;
padding-bottom: 200px;
}
}
.bootstrap .bg-hookpad-on-mbp-16 {
background-image: url(/images/controllers/hookpad/rmpb16-hp-mq.jpg?v=u27jgus);
background-size: 100%;
}
.bootstrap .bg-studio {
color: #fff;
background-image: url(/images/controllers/site/bg-studio-2.png?v=u27jgvc);
background-size: 2000px;
background-position: center bottom;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg-studio {
background-size: 1300px;
padding-top: 0px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1300px) {
.bootstrap .bg-studio {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
.bootstrap .bg-crowd {
color: #fff;
background-image: url(/images/controllers/site/crowd-cc.jpg?v=u27jgw9);
background-size: 2000px;
background-position: center bottom;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg-crowd {
background-size: 1300px;
padding-top: 0px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1300px) {
.bootstrap .bg-crowd {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
.bootstrap .bg-concert-hall {
color: #fff;
background-image: url(/images/controllers/site/concert-hall.jpg?v=u27jgwl);
background-size: 2000px;
background-position: center bottom;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg-concert-hall {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1300px) {
.bootstrap .bg-concert-hall {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
.bootstrap .bg-instruments {
color: #fff;
background-image: url(/images/controllers/site/bg-instruments-cc.jpg?v=u27jgwx);
background-size: 2000px;
background-position: center bottom;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg-instruments {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1300px) {
.bootstrap .bg-instruments {
background-size: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
/* Background
----------------------------------------------------------------------------------------*/
.bootstrap .bg {
color: #fff;
background-color: #575757;
background-image: url(/images/bg/bg-artist-stage-2.jpg?v=u27jgxi);
background-repeat: no-repeat;
background-size: 768px;
background-position: center center;
padding-top: 50px;
padding-bottom: 50px;
}
.bootstrap .bg h1,
.bootstrap .bg h2,
.bootstrap .bg h3,
.bootstrap .bg h4,
.bootstrap .bg h5,
.bootstrap .bg h6 {
color: #fff;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg {
background-size: 100%;
background-position: center center;
padding-top: 100px;
padding-bottom: 100px;
}
}
.bootstrap .bg.bg-light {
color: inherit;
}
.bootstrap .bg.bg-class {
background-image: url(/images/bg/music-class.jpg?v=u27jgyh);
}
.bootstrap .bg.bg-class-2 {
background-image: url(/images/bg/class-3.jpg?v=u27jgym);
}
.bootstrap .bg.bg-artist {
background-image: url(/images/bg/bg-artist-stage-2.jpg?v=u27jgzi);
background-size: 1200px;
background-position: center top;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-artist {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-artist {
background-size: 100%;
}
}
.bootstrap .bg.bg-team {
background-image: url(/images/bg/bg-hooktheory-team.jpg?v=u27jh03);
background-position: center center;
min-height: 350px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-team {
min-height: 550px;
}
}
.bootstrap .bg.bg-team-2 {
background-image: url(/images/bg/bg-hooktheory-team-bw.jpg?v=u27jh0s);
background-size: 100%;
/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
/* Large Devices, Wide Screens */
}
@media only screen and (min-width: 320px) {
.bootstrap .bg.bg-team-2 {
min-height: 200px;
}
}
@media only screen and (min-width: 480px) {
.bootstrap .bg.bg-team-2 {
min-height: 230px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-team-2 {
min-height: 330px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-team-2 {
min-height: 420px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-team-2 {
min-height: 510px;
}
}
.bootstrap .bg.bg-book1-buy {
background-image: url(/images/bg/book1-promo-1-color-desat.jpg?v=u27jh19);
}
.bootstrap .bg.bg-book1-buy2 {
background-image: url(/images/bg/bg-promo-3-desat.jpg?v=u27jh1u);
}
.bootstrap .bg.bg-studio-ipad {
background-image: url(/images/bg/bg-studio-ipad-6.jpg?v=u27jh2d);
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-studio-ipad {
background-size: 1000px;
}
}
.bootstrap .bg.bg-i-a {
background-image: url(/images/bg/bg-i-a.jpg?v=u27jh2l);
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-i-a {
background-size: 1000px;
}
}
.bootstrap .bg.bg-hooktheory-ii {
background-image: url(/images/bg/bg-hooktheory-ii-1.jpg?v=u27jh3c);
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-hooktheory-ii {
background-size: 900px;
}
}
.bootstrap .bg-color-a {
color: inherit;
background: #E9E9E9;
}
.bootstrap .bg-color-b {
color: inherit;
background: #fcfcfc;
}
/*
.bg-wrap.bg-wrap-danger {
background: $color_danger;
}
*/
.bootstrap .bg-app-store-badges {
background: #262626;
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .bg.bg-guitar-banjo {
background-image: url(/images/bg/guitar-banjo-2.jpg?v=u27jh3d);
background-size: 1700px;
background-position: center bottom;
margin-bottom: 40px;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-guitar-banjo {
background-size: 1200px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-guitar-banjo {
background-size: 100%;
}
}
.bootstrap .bg.bg-theorytab {
background-image: url(/images/bg/theorytab-2.jpg?v=u27jh3j);
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-theorytab {
background-size: 1100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.bootstrap .bg.bg-theorytab {
background-size: 992px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-theorytab {
/* background-position: center bottom; */
}
}
.bootstrap .bg.bg-home-promo {
background-image: url(/images/bg/home-promo.jpg?v=u27jh3k);
color: inherit;
padding-top: 0px;
min-height: 400px;
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-home-promo {
background-size: 1100px;
min-height: 500px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.bootstrap .bg.bg-home-promo {
background-size: 992px;
min-height: 700px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-home-promo {
/* background-position: center bottom; */
min-height: 700px;
}
}
.bootstrap .bg.bg-trends-2 {
background-image: url(/images/bg/trends-2.jpg?v=u27jh3q);
background-position: right center;
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-trends-2 {
background-size: 1100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.bootstrap .bg.bg-trends-2 {
background-size: 992px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-trends-2 {
/* background-position: center bottom; */
}
}
.bootstrap .bg.bg-trends-2-light {
background-image: url(/images/bg/bg-trends-a.png?v=u27jh46);
background-position: right center;
color: inherit;
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-trends-2-light {
background-size: 1100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.bootstrap .bg.bg-trends-2-light {
background-size: 992px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-trends-2-light {
/* background-position: center bottom; */
}
}
.bootstrap .bg.bg-trends {
/* @include bg-img("/images/bg/trends-4.jpg");*/
background-image: url(/images/bg/trends-macbook_01.jpg?v=u27jh50);
}
@media only screen and (max-width: 768px) {
.bootstrap .bg.bg-trends {
background-position: 30%;
background-size: 900px;
min-height: 450px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-trends {
min-height: 500px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-trends {
min-height: 600px;
}
}
.bootstrap .bg.bg-complexity {
background-image: url(/images/bg/complexity-7.jpg?v=u27jh5y);
background-position: left center;
/*
@media only screen and (max-width: 768px){
background-size: 900px;
min-height: 450px;
}
@media only screen and (min-width: 768px){
min-height: 500px;
}
@media only screen and (min-width: 992px) {
min-height: 600px;
}
*/
}
.bootstrap .bg.bg-theorytab-progressions {
background-color: #5a5a5a;
background-position: right top;
background-image: url(/images/bg/theorytab-progressions.jpg?v=u27jh6m);
}
.bootstrap .bg.bg-hookpad-midi {
background-image: url(/images/bg/hookpad-midi-2.jpg?v=u27jh7h);
background-size: 1200px;
background-position: center top;
/*
@media only screen and (min-width: 768px){
padding-top: 50px;
padding-bottom: 50px;
}
*/
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-midi {
background-size: 100%;
}
}
.bootstrap .bg.bg-hookpad-promo {
/* color: inherit; */
background-image: url(/images/bg/hookpad-promo-light-2.jpg?v=u27jh85);
background-image: url(/images/bg/hookpad-promo-dark.jpg?v=u27jh8z);
background-size: 1200px;
background-position: center bottom;
/*
@media only screen and (min-width: 768px){
padding-top: 50px;
padding-bottom: 50px;
}
*/
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-promo {
background-size: 100%;
}
}
.bootstrap .bg.bg-hookpad-genres {
background-image: url(/images/bg/hookpad-genres.jpg?v=u27jh9a);
background-size: 1200px;
background-position: center top;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-genres {
background-size: 100%;
}
}
.bootstrap .bg.bg-hookpad-mix {
background-image: url(/images/bg/hookpad-mix.jpg?v=u27jh9u);
background-size: 1200px;
background-position: center top;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-mix {
background-size: 100%;
}
}
.bootstrap .bg.bg-students {
background-image: url(/images/bg/bg-students.jpg?v=u27jha4);
background-size: 1200px;
background-position: center center;
padding-bottom: 0px;
padding-top: 50px;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-students {
background-size: 100%;
}
}
.bootstrap .bg.bg-kids-laptop {
background-image: url(/images/bg/bg-kids-laptop-crop.jpg?v=u27jhat);
background-size: 1200px;
background-position: center center;
padding-bottom: 0px;
padding-top: 50px;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-kids-laptop {
background-size: 100%;
}
}
.bootstrap .bg.bg-hero-guitar-woman {
background-image: url(/images/bg/bg-hero-guitar-woman-d1.jpeg?v=u27jhb2);
background-size: 1200px;
background-position: center center;
padding-top: 50px;
padding-bottom: 50px;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hero-guitar-woman {
background-size: 100%;
}
}
.bootstrap .bg.bg-beginner-acoustic-guitar {
background-image: url(/images/gear/guitarupright.jpg?v=u27jhbp);
background-size: 1200px;
background-position: center bottom;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-beginner-acoustic-guitar {
background-size: 100%;
}
}
.bootstrap .bg.bg-assessment-kit {
background-image: url(/images/bg/bg-assessment-kit.jpg?v=u27jhc1);
background-size: 1200px;
background-position: center top;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-assessment-kit {
background-size: 100%;
}
}
.bootstrap .bg-wrap.bg-border-bottom {
border-bottom: 1px solid #ddd;
}
.bootstrap .bg.bg-unsplash {
background-size: 1200px;
background-position: center top;
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-unsplash {
background-size: 100%;
}
}
.bootstrap .bg.bg-unsplash-a {
background-image: url(/images/bg/bg-unsplash-a.jpg?v=u27jhco);
}
.bootstrap .bg.bg-unsplash-b {
background-image: url(/images/bg/bg-unsplash-b.jpg?v=u27jhd2);
}
.bootstrap .bg.bg-unsplash-c {
background-image: url(/images/bg/bg-unsplash-c.jpg?v=u27jhd6);
}
.bootstrap .bg.bg-unsplash-d {
background-image: url(/images/bg/bg-unsplash-d.jpg?v=u27jhe0);
}
.bootstrap .bg.bg-unsplash-e {
background-image: url(/images/bg/bg-unsplash-e.jpg?v=u27jhe6);
}
.bootstrap .bg.bg-unsplash-f {
background-image: url(/images/bg/bg-unsplash-f.jpg?v=u27jhev);
}
.bootstrap .bg.bg-unsplash-g {
background-image: url(/images/bg/bg-unsplash-g.jpg?v=u27jhfg);
}
.bootstrap .bg.bg-unsplash-h {
background-image: url(/images/bg/bg-unsplash-h.jpg?v=u27jhgg);
}
.bootstrap .bg.bg-unsplash-i {
background-image: url(/images/bg/bg-unsplash-i.jpg?v=u27jhgv);
}
.bootstrap .bg.bg-unsplash-j {
background-image: url(/images/bg/bg-unsplash-j.jpg?v=u27jhhl);
}
.bootstrap .bg.bg-unsplash-k {
background-image: url(/images/bg/bg-unsplash-k.jpg?v=u27jhhm);
}
.bootstrap .bg.bg-unsplash-l {
background-image: url(/images/bg/bg-unsplash-l.jpg?v=u27jhi0);
}
.bootstrap .bg.bg-unsplash-m {
background-image: url(/images/bg/bg-unsplash-m.jpg?v=u27jhi3);
}
.bootstrap .bg.bg-unsplash-n {
background-image: url(/images/bg/bg-unsplash-n.jpg?v=u27jhiv);
}
.bootstrap .bg.bg-unsplash-o {
background-image: url(/images/bg/bg-unsplash-o.jpg?v=u27jhju);
}
.bootstrap .bg.bg-unsplash-p {
background-image: url(/images/bg/bg-unsplash-p.jpg?v=u27jhk8);
}
.bootstrap .bg.bg-unsplash-q {
background-image: url(/images/bg/bg-unsplash-q.jpg?v=u27jhky);
}
.bootstrap .bg.bg-unsplash-r {
background-image: url(/images/bg/bg-unsplash-r.jpg?v=u27jhls);
}
.bootstrap .bg.bg-unsplash-s {
background-image: url(/images/bg/bg-unsplash-s.jpg?v=u27jhmh);
}
.bootstrap .bg.bg-dj-back {
background-image: url(/images/bg/bg-dj-back-shot.jpg?v=u27jhmv);
}
.bootstrap .bg.bg-calvin-harris {
background-image: url(/images/bg/dreamfields.jpg?v=u27jhn1);
}
.bootstrap .bg.bg-istock-a {
background-image: url(/images/bg/bg-guitar-crowd.jpg?v=u27jhnt);
background-repeat: repeat;
background-position: center top;
background-size: 1100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-istock-a {
background-position: right top;
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-istock-a {
background-position: right top;
background-size: 100%;
}
}
.bootstrap .bg.bg-woman-guitar-laptop {
background-image: url(/images/bg/bg-woman-guitar-laptop.jpg?v=u27jho5);
background-repeat: repeat;
background-position: center top;
background-size: 1100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-woman-guitar-laptop {
background-position: right top;
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-woman-guitar-laptop {
background-position: right top;
background-size: 100%;
}
}
.bootstrap .bg.bg-woman-guitar-sun {
background-image: url(/images/bg/bg-woman-guitar-sun-dk-cp.jpg?v=u27jhoh);
background-repeat: repeat;
background-color: #a77332;
background-position: right top;
background-size: 850px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-woman-guitar-sun {
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-woman-guitar-sun {
background-size: 1200px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-woman-guitar-sun {
background-size: 100%;
}
}
.bootstrap .bg.bg-woman-producing-keyboard {
background-image: url(/images/bg/bg-woman-producing-keyboard.jpg?v=u27jhow);
background-repeat: repeat;
background-position: center top;
background-size: 1100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-woman-producing-keyboard {
background-position: right top;
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-woman-producing-keyboard {
background-position: right top;
background-size: 100%;
}
}
.bootstrap .bg.bg-books {
background-color: #ab9476;
background-image: url(/images/bg/bg-books-h.jpg?v=u27jhpf);
background-repeat: repeat-y;
background-position: center top;
background-size: 1300px;
color: #29251b;
padding-bottom: 30px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-books {
background-size: 1400px;
padding-bottom: 0px;
background-position: center center;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-books {
background-size: 1200px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-books {
padding-bottom: 50px;
background-size: 100%;
}
}
.bootstrap .bg.bg-books-home {
background-color: #462a2a;
background-color: #cfa27d;
background-color: #785630;
padding-top: 20px;
background-image: url(/images/bg/bg-woman-guitar-laptop-mq.jpg?v=u27jhqd);
background-repeat: repeat-y;
background-position: center top;
background-size: 1300px;
color: #fff;
padding-bottom: 50px;
padding-top: 50px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-books-home {
background-size: 1300px;
padding-bottom: 80px;
padding-top: 80px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-books-home {
background-size: 100%;
}
}
.bootstrap .bg.bg-books-guitar-guy-girl {
background-color: #462a2a;
background-color: #cfa27d;
background-color: #785630;
padding-top: 20px;
background-image: url(/images/bg/bg-woman-guitar-laptop-mq.jpg?v=u27jhr2);
background-repeat: repeat-y;
background-position: center top;
background-position: 22% 0%;
background-size: 1300px;
color: #fff;
padding-bottom: 430px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-books-guitar-guy-girl {
background-position: center top;
background-size: 1300px;
padding-bottom: 350px;
padding-top: 70px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-books-guitar-guy-girl {
background-size: 100%;
padding-bottom: 420px;
}
}
.bootstrap .bg.bg-books-guitar-guy-girl-home {
background-color: #462a2a;
background-color: #cfa27d;
background-color: #785630;
padding-top: 20px;
background-image: url(/images/bg/bg-woman-guitar-laptop-mq.jpg?v=u27jhro);
background-repeat: repeat-y;
background-position: 22% 0%;
background-size: 1300px;
color: #fff;
padding-bottom: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-books-guitar-guy-girl-home {
background-position: center top;
background-size: 1300px;
padding-top: 70px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-books-guitar-guy-girl-home {
background-size: 115%;
}
}
.bootstrap .books-hero-support-home {
margin-top: -330px;
padding-top: 310px;
}
@media only screen and (min-width: 992px) {
.bootstrap .books-hero-support-home {
margin-top: -260px;
padding-top: 240px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .books-hero-support-home {
margin-top: -210px;
padding-top: 190px;
}
}
.bootstrap .bg.bg-hookpad-no-blur {
background-color: #809ba5;
background-image: url(/images/bg/bg-hookpad-c.jpg?v=u27jhry);
background-repeat: repeat-y;
background-position: center center;
background-size: 1300px;
color: #fff;
padding-bottom: 50px;
padding-top: 50px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-hookpad-no-blur {
background-size: 1300px;
padding-bottom: 80px;
padding-top: 80px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hookpad-no-blur {
background-size: 1400px;
}
}
@media only screen and (min-width: 1300px) {
.bootstrap .bg.bg-hookpad-no-blur {
background-size: 100%;
}
}
.bootstrap .hookpad-hero-support-home {
margin-top: -150px;
padding-top: 150px;
}
@media only screen and (min-width: 768px) {
.bootstrap .hookpad-hero-support-home {
margin-top: -200px;
padding-top: 200px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .hookpad-hero-support-home {
margin-top: -180px;
padding-top: 170px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .hookpad-hero-support-home {
margin-top: -210px;
padding-top: 190px;
}
}
.bootstrap .hookpad-hero-support {
margin-top: -370px;
padding-top: 370px;
}
@media only screen and (min-width: 768px) {
.bootstrap .hookpad-hero-support {
margin-top: -140px;
padding-top: 130px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .hookpad-hero-support {
margin-top: -150px;
padding-top: 140px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .hookpad-hero-support {
margin-top: -210px;
padding-top: 190px;
}
}
.bootstrap .hookpad-hero-support-md {
margin-top: -150px;
padding-top: 40px;
}
.bootstrap .padding-top-people-behind {
padding-top: 100px;
padding-bottom: 50px;
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-top-people-behind {
padding-top: 300px;
padding-bottom: 200px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .padding-top-people-behind {
padding-bottom: 200px;
}
}
.bootstrap .bg.bg-people-behind {
background-color: #111b20;
background-image: url(/images/bg/007-music-hall-tint.jpg?v=u27jhsf);
background-repeat: repeat-y;
background-position: center top;
background-size: 140%;
color: #fff;
padding-top: 0px;
padding-bottom: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-people-behind {
background-size: 120%;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-people-behind {
background-size: 100%;
}
}
.bootstrap .bg.bg-crush {
background: linear-gradient(180deg, #e37244, #fc9ed7);
background: radial-gradient(farthest-corner at 40px 40px, #e37244 0%, #fc9ed7 100%);
color: #eefa11;
padding-top: 0px;
padding-bottom: 100px;
}
.bootstrap .bg.bg-crush h1, .bootstrap .bg.bg-crush h2, .bootstrap .bg.bg-crush h3, .bootstrap .bg.bg-crush h4, .bootstrap .bg.bg-crush h5 {
color: #eefa11;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-crush {
padding-bottom: 0px;
}
}
.bootstrap .bg.bg-crush-hero {
background-position: bottom 250px center;
background-size: 1400px;
padding-top: 0px;
padding-bottom: 100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-crush-hero {
padding-bottom: 0px;
}
}
.bootstrap .crush-hero-support-home {
margin-top: -190px;
padding-top: 110px;
}
@media only screen and (min-width: 768px) {
.bootstrap .crush-hero-support-home {
padding-top: 200px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .crush-hero-support-home {
margin-top: -190px;
padding-top: 180px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .crush-hero-support-home {
margin-top: -210px;
padding-top: 190px;
}
}
.bootstrap .crush-hero-support {
margin-top: -330px;
padding-top: 220px;
}
@media only screen and (min-width: 768px) {
.bootstrap .crush-hero-support {
margin-top: -140px;
padding-top: 130px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .crush-hero-support {
margin-top: -150px;
padding-top: 140px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .crush-hero-support {
margin-top: -210px;
padding-top: 190px;
}
}
.bootstrap .bg.bg-hookpad-norepeat {
background-color: #809ba5;
background-image: url(/images/bg/bg-hookpad-c.jpg?v=u27jhte);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
padding-top: 0px;
padding-bottom: 0px;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hookpad-norepeat {
background-size: cover;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-norepeat {
background-size: cover;
}
}
@media only screen and (min-width: 1400px) {
.bootstrap .bg.bg-hookpad-norepeat {
background-size: cover;
}
}
.bootstrap .bg.bg-hookpad {
background-color: #809ba5;
background-image: url(/images/bg/bg-hookpad-c.jpg?v=u27jhua);
background-repeat: repeat-y;
background-position: center center;
background-size: 1500px;
color: #fff;
padding-top: 0px;
padding-bottom: 0px;
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hookpad {
background-size: 1400px;
}
}
@media only screen and (min-width: 1400px) {
.bootstrap .bg.bg-hookpad {
background-size: 100%;
}
}
.bootstrap .bg.bg-hookpad-home {
background-color: #809ba5;
background-image: url(/images/bg/bg-hookpad-hero-st-2020-12-2.jpg?v=u27jhv1);
background-repeat: repeat-y;
background-position: center bottom;
background-size: 1200px;
color: #fff;
padding-top: 0px;
padding-bottom: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-hookpad-home {
background-position: center center;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hookpad-home {
background-size: 1300px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .bg.bg-hookpad-home {
background-size: 100%;
}
}
@media only screen and (min-width: 1400px) {
.bootstrap .bg.bg-hookpad-home {
background-size: 100%;
}
}
.bootstrap .bg.bg-hookpad-buy {
background-color: #eeeeee;
background-color: #fff;
background-image: url(/images/bg/bg-hookpad-c-crop.jpg?v=u27jhvw);
background-repeat: no-repeat;
background-position: center center;
background-size: 1000px;
color: #fff;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-hookpad-buy {
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hookpad-buy {
background-size: 100%;
}
}
.bootstrap .bg.bg-footer {
background-image: url(/images/bg/bg-footer.jpg?v=u27jhvx);
background-repeat: repeat-y;
background-position: center top;
background-size: 1000px;
color: #444;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-footer {
background-size: 1150px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-footer {
background-size: 100%;
}
}
.bootstrap .bg.bg-istock-guitar-crowd-hue {
background-image: url(/images/bg/bg-guitar-crowd-hue.jpg?v=u27jhw3);
background-repeat: repeat-y;
background-position: center top;
/*
background-size: 100%;
background-position: center top;
@media only screen and (min-width: $width_sm){
background-size: 33%;
}
@media only screen and (min-width: $width_md){
}
@media only screen and (min-width: $width_lg){
}
*/
}
.bootstrap .bg.bg-orange-texture {
background-image: url(/images/bg/orange-texture.jpg?v=u27jhws);
background-repeat: repeat-y;
color: #444;
}
.bootstrap .bg.bg-green-texture {
background-image: url(/images/bg/green-texture.jpg?v=u27jhwu);
background-repeat: repeat;
color: #000;
}
.bootstrap .bg.bg-hero-homepage {
background-size: 1000px;
background-position: center top;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-hero-homepage {
background-size: 1200px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hero-homepage {
background-size: 100%;
}
}
.bootstrap .bg.bg-hero-signup {
background-size: 1200px;
background-position: center center;
}
@media only screen and (min-width: 768px) {
.bootstrap .bg.bg-hero-signup {
background-size: 900px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bg.bg-hero-signup {
background-size: 100%;
}
}
.bootstrap .bg.bg-signup {
background-image: url(/images/bg/bg-signup.jpg?v=u27jhwz);
}
.bootstrap .bg.bg-guitars-sunset {
background-image: url(/images/bg/bg-guitars-sunset.jpg?v=u27jhxc);
}
.bootstrap .user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 20px;
}
.bootstrap .user.user-a {
background-image: url(/images/users/a.jpg?v=u27jhxy);
}
.bootstrap .user.user-b {
background-image: url(/images/users/b.jpg?v=u27jhyx);
}
.bootstrap .user.user-c {
background-image: url(/images/users/c.jpg?v=u27jhzx);
}
/* style */
/* */
.bootstrap .border-radius-0 {
border-radius: 0px;
}
.bootstrap .border-radius-top-4 {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.bootstrap .border-radius-top-5 {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bootstrap .border-radius-top-10 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bootstrap .border-radius-top-20 {
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.bootstrap .border-radius-5 {
border-radius: 5px;
}
.bootstrap .border-radius-10 {
border-radius: 10px;
}
.bootstrap .border-radius-20 {
border-radius: 20px;
}
.bootstrap .border-radius-5 {
border-radius: 5px;
}
/* style */
/* */
.bootstrap .overlay {
border: 1px solid #ddd;
box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.2);
background: #FFFFFF;
border-radius: 6px;
/* z-index was 3, however the Discourse forum used z-index of 1000 for their header
and I want to be on top of that In trends, the key selector is on index 2 */
z-index: 1001;
}
.bootstrap div.div-content-overlay-circle-centered-span {
position: relative;
width: 100%;
}
.bootstrap div.div-content-overlay-circle-centered-span div.div-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
border: 3px solid #fff;
text-align: center;
color: rgba(255, 255, 255, 0);
text-transform: uppercase;
}
.bootstrap div.div-content-overlay-circle-centered-span div.div-overlay span {
font-size: 1.2em;
font-weight: bold;
transform: translate3d(-50%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
.bootstrap div.div-content-overlay-circle-centered-span div.div-overlay:hover {
background: rgba(0, 0, 0, 0.3);
color: #fff;
}
.bootstrap div.div-content-overlay-circle-centered-span.product-icon {
max-width: 150px;
max-height: 150px;
margin: auto;
}
.bootstrap div.div-content-overlay-centered-icon {
position: relative;
width: 100%;
}
.bootstrap div.div-content-overlay-centered-icon div.div-overlay {
background: rgba(0, 0, 0, 0);
height: 100%;
width: 100%;
}
.bootstrap div.div-content-overlay-centered-icon div.div-overlay i {
opacity: 0;
font-size: 100px;
transform: translate3d(-50%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
background-color: transparent;
}
.bootstrap div.overlay-centered-icon:hover {
background: rgba(0, 0, 0, 0.3);
}
.bootstrap div.overlay-centered-icon:hover i {
opacity: 0.8;
}
.bootstrap div.div-content-overlay-centered-img {
position: relative;
width: 100%;
}
.bootstrap div.div-content-overlay-centered-img div.div-overlay {
background: rgba(0, 0, 0, 0);
height: 100%;
width: 100%;
}
.bootstrap div.div-content-overlay-centered-img div.div-overlay img {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
.bootstrap .overlay-trigger:hover .div-content-overlay-centered-img .div-overlay img {
opacity: 1;
width: 50%;
}
.bootstrap div.div-with-overlay {
position: relative;
width: 100%;
}
.bootstrap div.div-with-overlay div.div-overlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
height: 100%;
width: 100%;
}
.bootstrap div.div-with-overlay.on-hover div.div-overlay {
display: none;
}
.bootstrap div.div-with-overlay.on-hover:hover div.div-overlay {
display: block;
}
/* Should not be able to select text */
/*
body{
padding: 0;
margin: 0;
line-height: 1.5;
font-size: 14px;
@media only screen and (min-width: 768px){ // sm up
font-size: 14px;
}
color: $color_text;
font-family: 'gotham';
}
*/
body.body-login {
background: #E9E9E9;
}
body.body-form-2 {
background: #E9E9E9;
}
body.body-scrollspy {
position: relative;
}
.bootstrap html {
padding: 0;
margin: 0;
font-size: 16px;
/* font-family: 'Open Sans', sans-serif; */
}
.bootstrap p {
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.bootstrap .dropdown-menu .divider {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* style */
/* */
.bootstrap footer {
padding: 30px 0px;
font-size: 1em;
color: #444;
}
.bootstrap footer span.span-inline {
margin-left: 10px;
margin-right: 10px;
}
.bootstrap footer a.a-footer,
.bootstrap footer a.a-footer:visited {
color: #444;
}
.bootstrap footer a.a-footer:hover,
.bootstrap footer a.a-footer:visited:hover {
color: #777;
}
.bootstrap footer .div-social-icons {
font-size: 30px;
}
.bootstrap footer .p-app {
line-height: 1em;
margin: 0;
padding: 0;
margin-bottom: 20px;
/* margin-bottom: 0px; */
}
.bootstrap footer .span-app-detail {
font-size: 0.8em;
line-height: 0.8em;
}
.bootstrap footer ul {
margin-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
.bootstrap footer ul li {
margin-top: 5px;
margin-bottom: 5px;
}
.bootstrap footer div.mute {
opacity: 0.5;
}
.bootstrap footer div.div-category {
margin-bottom: 20px;
white-space: nowrap;
padding: 20px;
}
.bootstrap footer div.div-row {
padding-top: 20px;
padding-bottom: 20px;
}
.bootstrap .footer-products {
display: flex;
width: 100%;
}
.bootstrap .footer-products div:first-child {
flex-grow: 1;
margin-right: 10px;
}
.bootstrap .footer-products div:last-child {
flex-grow: 1;
margin-left: 10px;
}
/* style */
/* */
.bootstrap hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #dadada;
margin: 0.25em 0;
padding: 0;
}
.bootstrap hr.tight {
margin-top: 0px;
}
.bootstrap hr.hr-tight {
margin: 0px;
}
.bootstrap hr.hr-color-text {
border-color: #444;
}
.bootstrap .div-hr-container {
overflow: hidden;
text-align: center;
}
.bootstrap .div-hr-container .hr {
display: inline-block;
padding: 0 15px;
position: relative;
}
.bootstrap .div-hr-container .hr:before,
.bootstrap .div-hr-container .hr:after {
background: #ddd;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 400%;
}
.bootstrap .div-hr-container .hr:before {
right: 100%;
}
.bootstrap .div-hr-container .hr:after {
left: 100%;
}
.bootstrap .div-hr-container .hr.hr-card-bg:before,
.bootstrap .div-hr-container .hr.hr-card-bg:after {
background: #aaa;
}
.bootstrap span.span-app-description {
font-size: 1.4em;
font-weight: 600;
line-height: 1.2em;
}
.bootstrap div.div-hr {
background-image: url(/images/css/border.png?v=u27ji0q);
background-repeat: repeat-x;
text-align: center;
height: 40px;
/* lr */
}
.bootstrap div.div-hr span {
background: #fff;
}
.bootstrap div.div-hr div.div-hr-lcr-l,
.bootstrap div.div-hr div.div-hr-lcr-c,
.bootstrap div.div-hr div.div-hr-lcr-r {
float: left;
}
.bootstrap div.div-hr div.div-hr-lcr-l {
width: 45%;
text-align: left;
}
@media only screen and (min-width: 768px) {
.bootstrap div.div-hr div.div-hr-lcr-l {
width: 30%;
}
}
.bootstrap div.div-hr div.div-hr-lcr-l span {
padding-left: 0px !important;
}
.bootstrap div.div-hr div.div-hr-lcr-c {
width: 10%;
text-align: center;
}
.bootstrap div.div-hr div.div-hr-lcr-r {
width: 45%;
text-align: right;
}
.bootstrap div.div-hr div.div-hr-lcr-r span {
padding-right: 0px !important;
}
.bootstrap div.div-hr div.div-hr-lr-l,
.bootstrap div.div-hr div.div-hr-lr-r {
float: left;
}
.bootstrap div.div-hr div.div-hr-lr-l {
width: 80%;
text-align: left;
}
.bootstrap div.div-hr div.div-hr-lr-l span {
padding-left: 0px !important;
}
.bootstrap div.div-hr div.div-hr-lr-r {
width: 20%;
text-align: right;
}
.bootstrap div.div-hr.div-hr-h1 {
background-position: 0 23px;
}
.bootstrap div.div-hr.div-hr-h1 span {
padding: 0px 15px;
font-size: 2em;
font-weight: bold;
}
.bootstrap div.div-hr.div-hr-h2 {
background-position: 0 17px;
}
.bootstrap div.div-hr.div-hr-h2 span {
padding: 0px 16px;
font-size: 21px;
font-weight: bold;
}
.bootstrap div.div-hr.div-hr-h3 {
background-position: 0 11px;
}
.bootstrap div.div-hr.div-hr-h3 span {
padding: 0px 10px;
font-size: 1.6em;
font-weight: bold;
}
.bootstrap div.div-hr.div-hr-h4 {
background-position: 0 10px;
}
.bootstrap div.div-hr.div-hr-h4 span {
padding: 0px 10px;
font-size: 1.4em;
font-weight: bold;
}
.bootstrap canvas {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
.bootstrap video {
width: 100%;
max-width: 100%;
height: auto;
}
/* img
-----------------------------------------*/
.bootstrap img {
padding: 0;
margin: 0;
max-width: 100%;
}
/* Doesn't scale images up - only down */
.bootstrap img:not(.noscale) {
width: 100%;
}
.bootstrap img.anchor:hover {
/*outline:blue solid thick;*/
}
.bootstrap img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.bootstrap img.framed {
padding: 2.5%;
border: 1px solid #dBDBDB;
margin-top: 15px;
margin-bottom: 15px;
max-width: 95%;
}
.bootstrap img.framed.framed-tight {
padding: 0;
margin: 0;
max-width: 100%;
}
/* Use percentage-based padding so it never extends past the right edge */
.bootstrap img.padded {
/* padding: 10px; */
padding: 5%;
max-width: 90%;
}
@media only screen and (min-width: 768px) {
.bootstrap img.padded {
/* padding: 10px; */
padding: 3%;
max-width: 94%;
}
}
.bootstrap img.caption {
margin-bottom: 10px;
}
.bootstrap div.caption {
margin-bottom: 20px;
color: #888;
font-size: 0.85em;
}
@media only screen and (min-width: 768px) {
.bootstrap div.caption {
margin-bottom: 40px;
}
}
.bootstrap img.noborder {
border: none;
box-shadow: none;
}
.bootstrap img.app-icon {
width: 80%;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 10px;
width: 50%;
padding-left: 25%;
padding-right: 25%;
padding-bottom: 0px;
}
.bootstrap img.img-app-icon {
max-width: 100px;
}
.bootstrap img.img-circle {
border-radius: 50%;
}
.bootstrap img.img-circle-150 {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.bootstrap .img-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
}
.bootstrap .vertical-align-baseline {
vertical-align: baseline;
}
.bootstrap div.div-comment {
padding-bottom: 20px;
}
.bootstrap div.commentForm {
padding: 10px;
}
.bootstrap div.commentForm div.textarea {
width: 100%;
margin-bottom: 10px;
}
.bootstrap div.commentForm div.submit {
width: 100%;
}
@media only screen and (min-width: 768px) {
.bootstrap div.commentForm {
/*
div.textarea{
float:left;
width:75%;
margin-right:3%;
margin-bottom: 0px;
}
div.submit{
float:left;
width:22%;
}
*/
}
}
.bootstrap div.commentThread {
border: 1px solid #ddd;
background-color: #EDEDED;
border-radius: 6px;
margin-top: 10px;
}
.bootstrap div.commentThread div.loadMore {
padding: 10px;
/* border-bottom:1px solid $color_border; */
}
.bootstrap div.commentThread.analysis {
margin-bottom: 10px;
}
.bootstrap ul.commentThread {
margin: 0px;
padding: 0px;
list-style: none;
border: 0px;
}
.bootstrap li.comment {
border: 0px;
padding: 10px;
border-bottom: 1px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
.bootstrap div.loadMore {
padding: 20px;
}
.bootstrap li.comment:last-child {
/*border-bottom: none;*/
/* border-bottom:1px solid $color_border; */
}
.bootstrap span.comment-date {
font-size: 0.9em;
color: #999999;
}
.bootstrap span.comment-on {
font-size: 0.9em;
}
.bootstrap span.comment-error {
font-size: 0.9em;
color: #FF0000;
}
@media only screen and (min-width: 768px) {
.bootstrap li.comment {
padding: 10px;
}
.bootstrap div.commentThread div.commentForm {
padding: 10px;
}
.bootstrap div.commentThread div.loadMore {
padding: 10px;
}
.bootstrap div.commentThread.analysis {
margin-bottom: 20px;
}
}
.bootstrap .triangle {
position: relative;
}
/* background */
.bootstrap .triangle:after {
content: "";
position: absolute;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
border-style: solid;
left: 50%;
}
.bootstrap .triangle.top:after {
top: -10px; /* value = - border-top-width - border-bottom-width */
bottom: auto;
margin-left: -10px;
border-width: 0 10px 10px; /* vary these values to change the angle of the vertex */
border-color: #FF0000 transparent;
}
/* border */
.bootstrap .triangle-border:before {
content: "";
position: absolute;
border-style: solid;
display: block;
width: 0;
left: 50%;
}
.bootstrap .triangle-border.top:before {
top: -11px; /* value = - border-top-width - border-bottom-width */
bottom: auto;
margin-left: -10px;
border-width: 0 10px 10px; /* vary these values to change the angle of the vertex */
border-color: #000000 transparent;
}
/* comment customization */
.bootstrap .triangle.top.commentThread:after {
border-color: #EDEDED transparent; /* #F1F1F1 transparent; */
left: 40px;
}
.bootstrap .triangle-border.top.commentThread:before {
border-color: #ddd transparent; /* #D6D6D6 transparent; */
left: 40px;
}
.bootstrap .triangle.top.collections:after {
border-color: #FFFFFF transparent;
left: 265px;
top: -25px;
}
.bootstrap .triangle-border.top.collections:before {
border-color: #BBBBBB transparent; /* #D6D6D6 transparent; */
left: 265px;
top: -26px;
}
/* section-links customization */
.bootstrap .triangle.top.section-links:after {
/* Position 15 px from right side */
border-color: #FFFFFF transparent;
left: auto; /* Need to undo 50% from before */
right: 15px;
top: -10px;
}
.bootstrap .triangle-border.section-links.top:before {
border-color: #BBBBBB transparent; /* #D6D6D6 transparent; */
left: auto;
right: 15px;
top: -11px;
}
/* css-triangle-isosceles.css */
/* creates triangle */
.bootstrap .triangle-isosceles:after {
content: "";
position: absolute;
bottom: -8px; /* value = - border-top-width - border-bottom-width */
left: 50%; /* controls horizontal position */
/* border-width: top right&left bottom */
border-width: 8px 8px 0; /* vary these values to change the angle of the vertex */
border-style: solid;
border-color: #880000 transparent;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
margin-left: -8px;
}
/* Variant : top
------------------------------------------ */
.bootstrap .triangle-isosceles.top:after {
/* value = - border-top-width - border-bottom-width */
bottom: -1px;
center: 50%;
margin-left: -8px;
/* border-width: top right&left bottom */
border-width: 0 8px 8px; /* vary these values to change the angle of the vertex */
border-color: #f8f8f8 transparent;
}
.bootstrap span.small {
font-size: 0.9em;
}
.bootstrap span.caption {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap span.caption {
margin-bottom: 40px;
}
}
.bootstrap span.link {
color: #4B9ED4;
}
.bootstrap span.link:hover {
color: #2B88C4;
cursor: pointer;
}
/*
span.link:active{
color: $color_link_active;
cursor: pointer;
}
*/
.bootstrap span.light {
color: #aaa;
}
.bootstrap span.medium {
color: #666;
}
.bootstrap span.analysis-meta {
color: #999999;
font-size: 0.85em;
}
.bootstrap span.h2-match {
font-size: 1.4em;
}
.bootstrap span.editor-icon-label {
padding-top: 8px;
float: left;
}
.bootstrap span.cp-results-title {
font-size: 1.2em;
color: #000;
font-weight: normal;
}
.bootstrap span.r {
color: rgb(255, 0, 0);
}
.bootstrap span.size-18 {
font-size: 18px;
}
.bootstrap span.size-16 {
font-size: 16px;
}
.bootstrap span.size-20 {
font-size: 20px;
}
.bootstrap span.size-22 {
font-size: 22px;
}
.bootstrap span.above-header {
color: #4B9ED4;
}
.bootstrap span.nav-title {
color: #999;
font-weight: bold;
padding-left: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap span.nav-title {
padding-left: 20px;
}
}
.bootstrap span.by {
font-size: 9px;
}
.bootstrap .span-red {
color: rgb(252, 13, 27);
}
.bootstrap .span-orange {
color: rgb(241, 143, 46);
}
.bootstrap .span-blue {
color: rgb(17, 54, 222);
}
.bootstrap .span-green {
color: rgb(66, 169, 71);
}
/*
p.p-hr {
position: relative;
text-align: center;
}
p.p-hr span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 1;
}
p.p-hr:before {
background: #ddd;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
}
p.p-hr:before {
left: 0;
}
*/
.bootstrap div.price {
display: block;
margin-bottom: 20px;
}
.bootstrap div.price span.value {
font-size: 3em;
line-height: 0.5em;
}
.bootstrap div.price sup {
vertical-align: top;
font-size: 1em;
top: 0;
}
.bootstrap div.price sub {
vertical-align: baseline;
font-size: 1em;
bottom: 0;
left: -1em;
}
.bootstrap span.span-primary {
color: #4B9ED4;
}
.bootstrap span.span-color-link {
color: #4B9ED4;
}
.bootstrap span.span-color-secondary {
color: #085178;
}
.bootstrap span.span-color-complement {
color: #F6B02A;
}
.bootstrap span.span-color-home {
color: #ff0000;
}
.bootstrap span.span-color-tabs {
color: #B85798;
}
.bootstrap span.span-color-hookpad {
color: #E8482E;
}
.bootstrap span.span-color-hookpad-plus {
color: #75C347;
}
.bootstrap span.span-color-hooktheory-i,
.bootstrap span.span-color-hooktheory-ii {
color: #4B9ED4;
}
.bootstrap span.span-color-star-rating {
color: #F38430;
}
.bootstrap span.span-color-text {
color: #444;
}
.bootstrap .difficulty-beginner {
color: #3FB24F;
}
.bootstrap .difficulty-intermediate {
color: #1976B9;
}
.bootstrap .difficulty-advanced {
color: black;
}
.bootstrap .color-price {
color: #AF2813;
}
.bootstrap .color-white {
color: #fff;
}
.bootstrap .color-red {
color: #ff0000;
}
.bootstrap .color-link {
color: #4B9ED4;
}
.bootstrap .color-secondary {
color: #085178;
}
.bootstrap .color-complement {
color: #F6B02A;
}
.bootstrap object {
outline: none;
}
.bootstrap object:active, .bootstrap div:active {
outline: none;
}
.bootstrap object:focus, .bootstrap div:focus {
-moz-outline-style: none;
}
/* Sams as iOS Mail search
_____________________________________________*/
/* Same as iOS Safari header
_____________________________________________*/
/* Span buttons */
/* style */
/* */
/* ul.scss
----------------------------------------------------------------------------------------*/
/* */
/* Import styles I want to extend */
/* style */
/* */
.bootstrap .noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bootstrap .round-tl {
border-top-left-radius: 6px;
}
.bootstrap .round-tr {
border-top-right-radius: 6px;
}
.bootstrap .round-br {
border-bottom-right-radius: 6px;
}
.bootstrap .round-bl {
border-bottom-left-radius: 6px;
}
.bootstrap .round {
border-radius: 6px;
}
.bootstrap .round-t {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bootstrap .round-b {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
/* .inline-links-small
--------------------------------------------------------------------------------------*/
.bootstrap ul.inline-links-small {
display: inline-block;
padding: 0px;
margin: 0px;
list-style: none;
font-size: 0.9em;
}
.bootstrap ul.inline-links-small li {
float: left;
margin: 4px;
}
.bootstrap ul.inline-links-small li a {
padding: 8px 8px;
color: #444;
}
.bootstrap ul.inline-links-small li a:hover {
color: #444;
}
.bootstrap ul.inline-links-small li:first-child {
margin-left: 0px;
}
.bootstrap ul.inline-links-small li.border a {
border: 1px solid #ddd;
border-radius: 6px;
padding: 7px 8px;
}
.bootstrap ul.inline-links-small li.border.active a {
border: 1px solid #444;
color: #444;
}
.bootstrap ul.inline-links-small li.bg a {
background-color: #ededed;
border-radius: 6px;
}
.bootstrap ul.inline-links-small li.bg a:hover {
background-color: #dddddd;
}
.bootstrap ul.inline-links-small li.bg.active a {
background-color: #fff;
}
.bootstrap ul.inline-links-small li.bg.active a:hover {
background-color: #fff;
}
.bootstrap ul.side-nav {
padding-left: 0px;
margin-top: 10px;
}
.bootstrap ul.side-nav > li {
display: block;
}
.bootstrap ul.side-nav > li > a {
padding: 1px;
padding-left: 20px;
padding-left: 35px;
/*
@media only screen and (min-width: 992px) {
padding-left: $padding_md;
}
*/
padding-right: 8px;
display: block;
color: #4B9ED4;
text-decoration: none;
white-space: nowrap; /* stop multi-lines */
}
@media only screen and (min-width: 768px) {
.bootstrap ul.side-nav > li > a {
padding-left: 40px;
}
}
.bootstrap ul.side-nav > li > a:hover {
background: #4B9ED4;
color: #ffffff;
}
.bootstrap ul.side-nav > li > a.active {
background: #fff;
color: #4B9ED4;
cursor: default;
}
.bootstrap ul.compact-nav {
padding-left: 0px;
}
.bootstrap ul.compact-nav > li {
display: block;
float: left;
padding-right: 4px;
}
.bootstrap ul.compact-nav > li > a {
color: #4B9ED4;
}
.bootstrap ul.compact-nav > li > a:hover {
color: #4B9ED4;
}
.bootstrap ul.compact-nav > li > a.active {
color: #aaa;
}
/* .yt-list
----------------------------------------------------------------------------------------*/
.bootstrap ul.yt-list {
list-style: none;
/* border: 1px solid $color_border; */
padding-left: 0px;
margin: 0px;
margin-bottom: 15px;
margin-bottom: 30px;
border-radius: 6px;
}
@media only screen and (min-width: 768px) {
.bootstrap ul.yt-list {
margin-bottom: 20px;
margin-bottom: 30px;
}
}
.bootstrap ul.yt-list li.list-divider {
padding: 6px;
font-weight: bold;
border: 0px;
padding: 0px;
margin-bottom: 7px;
}
.bootstrap ul.yt-list li:not(.list-divider) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: none;
border: none;
color: #444;
margin-bottom: 10px;
/* ADD THIS for 2015.01 style lists */
/* Added 2014.11.30 to move to separated items */
/* margin-bottom: $padding_xs; */
/* @include border-radius($border_radius); */
}
.bootstrap ul.yt-list li:not(.list-divider) table {
padding: 0;
margin: 0;
background: none !important;
border: none;
width: 100%;
}
.bootstrap ul.yt-list li:not(.list-divider) table tr {
background: none;
border: none;
}
.bootstrap ul.yt-list li:not(.list-divider) table td {
padding: 0;
margin: 0;
background: none;
border: none;
vertical-align: middle;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.song-info {
width: 60%;
width: 82%;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.song-info div.vote-sparkbar-up {
background: #4B9ED4;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.song-info div.padding {
padding: 8px;
padding-left: 15px;
padding-right: 5px;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.song-info div.padding p.song {
line-height: 1.4em;
padding: 0;
margin: 0;
color: #444;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.song-info div.padding p.artist {
line-height: 1.4em;
padding: 0;
margin: 0;
font-size: 0.9em;
color: #aaa;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.youtube {
width: 30%;
width: 18%;
}
.bootstrap ul.yt-list li:not(.list-divider) table td.difficulty {
width: 10%;
width: 0%;
vertical-align: bottom;
text-align: right;
}
.bootstrap ul.yt-list li:not(.list-divider):hover {
cursor: pointer;
color: #444;
}
.bootstrap ul.yt-list li:not(.list-divider):hover div.vote-sparkbar-up {
background: #2B88C4;
}
.bootstrap ul.yt-list li:not(.list-divider):hover p.song {
color: #444;
}
.bootstrap ul.yt-list li:not(.list-divider):hover p.artist {
color: #aaa;
}
.bootstrap ul.yt-list li:active {
color: #444;
}
.bootstrap ul.yt-list li:last-child {
margin-bottom: 0px;
}
.bootstrap ul.yt-list li:last-child table tr {
border-bottom: none;
}
.bootstrap ul.yt-list li.li-reload-swf:hover {
cursor: pointer;
}
.bootstrap ul.yt-list.yt-list-white li {
background: #fff;
border-bottom: 1px solid #E9E9E9;
border-bottom: 1px solid #ddd;
}
.bootstrap ul.yt-list.yt-list-white li:hover {
background: #E9E9E9;
}
.bootstrap ul.yt-list.yt-list-white li:last-child {
border-bottom: none;
}
.bootstrap ul.yt-list.yt-list-last-child-border li:last-child {
border-bottom: 1px solid #ddd;
}
.bootstrap ul.yt-list.bottom-bleed {
margin-bottom: 0px;
}
.bootstrap ul.yt-list li.load-more {
padding-bottom: 15px;
}
.bootstrap ul.yt-list li.load-more:hover {
cursor: pointer;
}
/* .list
----------------------------------------------------------------------------------------*/
.bootstrap ul.list {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
list-style: none;
padding-left: 0px;
margin: 0px;
margin-bottom: 20px;
border-radius: 6px;
}
@media only screen and (min-width: 768px) {
.bootstrap ul.list {
margin-bottom: 40px;
}
}
.bootstrap ul.list li.chapter-preview {
padding: 0px;
}
.bootstrap ul.list li.chapter-preview a {
margin: 0px;
}
.bootstrap ul.list li.chapter-preview table {
padding: 0;
margin: 0;
border: none;
width: 100%;
}
.bootstrap ul.list li.chapter-preview table tr td.name {
width: 70%;
vertical-align: middle;
padding: 0px;
}
.bootstrap ul.list li.chapter-preview table tr td.img {
width: 30%;
vertical-align: middle;
padding: 0px;
}
.bootstrap ul.list li.top {
padding: 20px;
background: #ffffff;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
/* Get rid of this for 2015.01 style lists */
padding: 20px;
/* border-bottom: 1px solid $color_border; */
border-bottom: 3px solid #fff;
/* border-bottom: 1px solid $color_border; */
}
.bootstrap ul.list li.top table {
padding: 0;
margin: 0;
background: none;
border: none;
width: 100%;
}
.bootstrap ul.list li.top table tr {
padding: 0px;
border: none;
}
.bootstrap ul.list li.top table tr td {
padding: 0px;
border: none;
}
.bootstrap ul.list li.top table tr td.chevron {
text-align: right;
color: #aaa;
white-space: nowrap;
vertical-align: middle;
/* Need to override the li > a below */
}
.bootstrap ul.list li.top table tr td.chevron a {
margin: 0;
display: inline;
background: none;
color: #4B9ED4;
}
.bootstrap ul.list li.top table tr td.chevron a:hover,
.bootstrap ul.list li.top table tr td.chevron a:visited:hover {
background: none;
color: #2B88C4;
}
.bootstrap ul.list li.top:hover {
/* background: inherit; */
}
.bootstrap ul.list li.top-link {
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bootstrap ul.list li.top-link a {
/* Must be opposite of the padding set above */
position: relative;
display: block;
padding: inherit;
margin-top: -20px;
margin-right: -20px;
margin-bottom: -20px;
margin-left: -20px;
color: #4B9ED4;
background-color: #fff;
}
.bootstrap ul.list li.top-link a:hover,
.bootstrap ul.list li.top-link a:visited:hover {
color: #2B88C4;
background-color: #fff;
}
.bootstrap ul.list li.white {
background: #ffffff;
}
.bootstrap ul.list li.white a {
background: #ffffff;
}
.bootstrap ul.list li.white a:hover,
.bootstrap ul.list li.white a:visited:hover {
background: #ffffff;
}
.bootstrap ul.list li.app-logo {
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list li.app-logo a {
background: #ffffff;
}
.bootstrap ul.list li.app-logo a:hover,
.bootstrap ul.list li.app-logo a:visited:hover {
background: #E9E9E9;
/*
color: #FFF;
svg {
path {
fill: #FFF;
}
}
*/
}
.bootstrap ul.list li.app-logo-2 {
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list li.app-logo-2 svg path {
fill: #fff;
}
.bootstrap ul.list li.app-logo-2 a {
background: #79bad4;
}
.bootstrap ul.list li.app-logo-2 a:hover,
.bootstrap ul.list li.app-logo-2 a:visited:hover {
background: #559ebc;
color: #fff;
}
.bootstrap ul.list li.app-logo-2 a:hover svg path,
.bootstrap ul.list li.app-logo-2 a:visited:hover svg path {
fill: #fff;
}
.bootstrap ul.list li.light {
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list li.light a {
background: #ffffff;
}
.bootstrap ul.list li.light a:hover,
.bootstrap ul.list li.light a:visited:hover {
background: #E9E9E9;
}
.bootstrap ul.list li.link a {
background: #4B9ED4;
color: #fff;
}
.bootstrap ul.list li.link a:hover,
.bootstrap ul.list li.link a:visited:hover {
background: #2B88C4;
color: #fff;
}
.bootstrap ul.list li.mac a {
background: #D4D8E2;
}
.bootstrap ul.list li.mac a:hover,
.bootstrap ul.list li.mac a:visited:hover {
background: #C6CCD2;
}
.bootstrap ul.list li.dark a {
background-color: #888;
}
.bootstrap ul.list li.dark a:hover,
.bootstrap ul.list li.dark a:visited:hover {
background-color: #888;
}
.bootstrap ul.list li.red a {
background-color: rgb(252, 13, 27);
color: #fff;
}
.bootstrap ul.list li.red a:hover,
.bootstrap ul.list li.red a:visited:hover {
background-color: rgb(199, 18, 32);
color: #fff;
}
.bootstrap ul.list li.orange a {
background-color: rgb(241, 143, 46);
color: #fff;
}
.bootstrap ul.list li.orange a:hover,
.bootstrap ul.list li.orange a:visited:hover {
background-color: rgb(191, 114, 47);
color: #fff;
}
.bootstrap ul.list li {
position: relative;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-bottom: 2px solid #ffffff;
/* Should not be able to select text */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-bottom: 1px solid #ddd;
/*
If a list of links, make sure the child <a> takes up full list item tap area
*/
}
@media only screen and (min-width: 768px) {
.bootstrap ul.list li {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
}
.bootstrap ul.list li a {
/* Must be opposite of the padding set above */
position: relative;
display: block;
padding: inherit;
border: none;
margin-top: -10px;
margin-right: -20px;
margin-bottom: -10px;
margin-left: -20px;
color: #4B9ED4;
}
@media only screen and (min-width: 768px) {
.bootstrap ul.list li a {
margin-top: -10px;
margin-right: -25px;
margin-bottom: -10px;
margin-left: -25px;
}
}
.bootstrap ul.list li a:hover,
.bootstrap ul.list li a:visited:hover {
color: #2B88C4;
}
.bootstrap ul.list li.no-pad {
padding: 0;
}
.bootstrap ul.list li.no-pad a {
margin: 0;
}
.bootstrap ul.list li.bottom-bleed {
padding-bottom: 0px;
border-bottom: 0px;
}
.bootstrap ul.list li:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bootstrap ul.list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bootstrap ul.list li:last-child {
border-bottom: none;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.bootstrap ul.list li:last-child a {
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.bootstrap ul.list li.divider {
padding: 6px;
padding-left: 25px;
padding-right: 25px;
font-size: 0.9em;
font-weight: bold;
background-color: #E9E9E9;
border-bottom: 2px solid #ffffff;
background-color: none !important;
color: #444;
}
.bootstrap ul.list.ul-list-link-color li a {
color: #4B9ED4;
}
.bootstrap ul.list.ul-list-link-color li a:hover,
.bootstrap ul.list.ul-list-link-color li a:visited:hover {
color: #2B88C4;
}
.bootstrap ul.list.ul-list-tight-li li {
padding-top: 10px;
padding-bottom: 10px;
}
.bootstrap ul.list.ul-list-tight-li li a {
margin-top: -10px;
margin-bottom: -10px;
/*
@media only screen and (min-width: 768px) {
margin-top: -$list_padding_t;
margin-bottom: -$list_padding_b;
}
*/
}
.bootstrap ul.list.ul-list-white li.top {
background: #fff;
border-bottom: 1px solid #E9E9E9;
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list.ul-list-white li {
border-bottom: 1px solid #E9E9E9;
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list.ul-list-white li a {
background-color: #fff;
}
.bootstrap ul.list.ul-list-white li a:hover,
.bootstrap ul.list.ul-list-white li a:visited:hover {
background-color: #E9E9E9;
}
.bootstrap ul.list.ul-list-white li:last-child {
border-bottom: none;
}
.bootstrap ul.list.ul-list-border-bottom li:last-child {
border-bottom: 1px solid #ddd;
}
.bootstrap ul.list.ul-list-square-top li:first-child {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.bootstrap ul.list.ul-list-square-top li:first-child a {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.bootstrap ul.list.ul-list-square-bottom li:last-child {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.bootstrap ul.list.ul-list-square-bottom li:last-child a {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.bootstrap ul.list.apps {
/*
li:active {
background: $color_bg_hover;
}
*/
}
.bootstrap ul.list.apps li {
padding: 20px;
border-bottom: 1px solid #ddd;
text-align: center;
}
.bootstrap ul.list.apps li:last-child {
border-bottom: none;
}
.bootstrap ul.list.apps li:hover {
background: #4B9ED4;
color: #ffffff;
cursor: pointer;
}
.bootstrap ul.list.apps li:hover svg path {
fill: #ffffff;
}
.bootstrap ul.list.bottom-bleed {
margin-bottom: 0px;
}
.bootstrap ul.list.list-no-border {
border: none;
}
/*
If you want to do this without all of the items being links you can, but you need to make it ul.nested-count > li:before and ul.nested-count > li > ul > li:before
*/
.bootstrap ul.nested-count-a {
counter-reset: item;
list-style-type: none;
margin: 0;
padding-left: 0px;
}
.bootstrap ul.nested-count-a > li {
counter-increment: item;
}
.bootstrap ul.nested-count-a > li > a:before {
content: counter(item) " ";
}
.bootstrap ul.nested-count-a > li > ul {
counter-reset: subitem;
list-style-type: none;
margin: 0;
padding-left: 25px;
}
.bootstrap ul.nested-count-a > li > ul > li {
counter-increment: subitem;
}
.bootstrap ul.nested-count-a > li > ul > li > a:before {
content: counter(item) "." counter(subitem) " ";
}
.bootstrap ul.nested-count {
counter-reset: item;
list-style-type: none;
margin: 0;
padding-left: 0px;
}
.bootstrap ul.nested-count > li {
counter-increment: item;
}
.bootstrap ul.nested-count > li:before {
content: counter(item) " ";
}
.bootstrap ul.nested-count > li > ul {
counter-reset: subitem;
list-style-type: none;
margin: 0;
padding-left: 25px;
}
.bootstrap ul.nested-count > li > ul > li {
counter-increment: subitem;
}
.bootstrap ul.nested-count > li > ul > li:before {
content: counter(item) "." counter(subitem) " ";
}
/* ul.center */
.bootstrap ul.center {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.bootstrap ul.center > li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
.bootstrap ul.center > li.no-pad {
padding: 0px;
}
.bootstrap ul.ul-social {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}
.bootstrap ul.ul-social li {
display: block;
margin-bottom: 10px;
}
.bootstrap ul.ul-social li a {
line-height: 30px;
/*
span {
float: left;
} */
}
.bootstrap ul.ul-social li a i {
float: left;
font-size: 30px;
line-height: 30px;
}
.bootstrap ul.ul-tight-bottom {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.bootstrap ul.ul-no-wrap li {
white-space: nowrap;
}
.bootstrap ul.ul-dropdown {
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
list-style-type: none;
padding-left: 0px;
}
.bootstrap ul.ul-dropdown li:not(.hr) {
margin-left: 20px;
margin-right: 20px;
}
.bootstrap ul.ul-dropdown li.hr {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.bootstrap ul.ul-vanilla {
list-style-type: none;
}
.bootstrap div.div-ul-vanilla ul {
list-style-type: none;
}
.bootstrap ul.docs-side-nav {
padding: 0;
margin: 0;
list-style: none;
}
.bootstrap ul.docs-side-nav li {
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.bootstrap ul.docs-side-nav li a {
margin: 0;
padding: 0;
padding-left: 5px;
border-left: 4px solid #fff;
}
.bootstrap ul.docs-side-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.bootstrap ul.docs-side-nav ul li {
margin: 0;
padding: 0;
}
.bootstrap ul.docs-side-nav ul li a {
margin: 0;
padding: 0;
padding-left: 30px;
}
.bootstrap ul.docs-side-nav li.active > a {
border-left: 4px solid #4B9ED4;
}
.bootstrap .vpad-10 {
margin-top: 10px;
margin-bottom: 10px;
}
.bootstrap .vpad-20 {
margin-top: 20px;
margin-bottom: 20px;
}
.bootstrap .vpad-30 {
margin-top: 30px;
margin-bottom: 30px;
}
.bootstrap .vpad-40 {
margin-top: 40px;
margin-bottom: 40px;
}
.bootstrap .vpad-50 {
margin-top: 50px;
margin-bottom: 50px;
}
.bootstrap .vpad-60 {
margin-top: 60px;
margin-bottom: 60px;
}
.bootstrap .vpad-70 {
margin-top: 70px;
margin-bottom: 70px;
}
.bootstrap .vpad-80 {
margin-top: 80px;
margin-bottom: 80px;
}
.bootstrap .vpad-90 {
margin-top: 90px;
margin-bottom: 90px;
}
.bootstrap .vpad-100 {
margin-top: 100px !important;
margin-bottom: 100px !important;
}
/* flat-button
------------------------------------------------------------------------------*/
.bootstrap .flat-button {
padding: 20px;
border: 1px solid #D3D3D3;
background-color: rgb(245, 245, 245);
border-radius: 8px;
}
.bootstrap .flat-button:hover {
background-color: rgb(235, 235, 235);
}
.bootstrap .flat-button.app {
height: 150px;
padding-top: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .flat-button {
padding-left: 40px;
padding-right: 40px;
}
}
.bootstrap .flat-button.blue {
background-color: rgb(168, 193, 255);
/* background-color: rgb(0, 136, 204); */
border: 1px solid #0000FF;
border: none;
}
.bootstrap .flat-button.blue h2 {
color: #FFF;
text-shadow: 1px 1px 2px rgb(0, 0, 255);
}
.bootstrap input.no-outline-on-focus:focus {
outline: none;
}
.bootstrap .input-group-addon {
padding: 0px;
}
/* ul.scss
----------------------------------------------------------------------------------------*/
/* */
/* Import styles I want to extend */
/* Had commmented out for teachermgmt */
.bootstrap .hidden {
display: none;
}
.bootstrap .hidden.show {
display: block !important;
visibility: visible !important;
}
.bootstrap .hidden.show-inline {
display: inline !important;
visibility: visible !important;
}
.bootstrap .center {
text-align: center;
}
@media all and (orientation: portrait) {
.bootstrap .orientation-portrait {
/* Styles for Portrait screen */
display: inline;
}
}
@media all and (orientation: landscape) {
.bootstrap .orientation-portrait {
/* Styles for Landscape screen */
display: none;
}
}
@media all and (orientation: portrait) {
.bootstrap .orientation-landscape {
/* Styles for Portrait screen */
display: none;
}
}
@media all and (orientation: landscape) {
.bootstrap .orientation-landscape {
/* Styles for Landscape screen */
display: inline;
}
}
/*
iframe {
width: 100%;
max-width: 100%;
height: auto;
}
*/
.bootstrap iframe.iframe-border {
border: 1px solid #ddd;
}
.bootstrap iframe {
border: none;
}
.bootstrap .iframe-tab {
min-width: 100%;
width: 100px;
*width: 100%;
height: 757px;
}
@media only screen and (min-width: 374px) {
.bootstrap .iframe-tab {
height: 409px;
}
}
/* style */
/* */
/* Wrap: media-query padding for .content
------------------------------------------------- */
.bootstrap .wrap {
margin: 0;
}
.bootstrap .wrap.videos {
background-color: #E9E9E9;
font-size: 16px;
}
.bootstrap .wrap-home-products {
background: #d5d5d5;
}
.bootstrap .wrap-footer {
background: #d5d5d5;
}
.bootstrap .wrap.theme-light-gray {
background: #E9E9E9;
background: #eeeeee;
}
.bootstrap .wrap.theme-light-gray-secondary {
background: #D0D0D0;
}
.bootstrap .wrap.footer {
padding-top: 0px;
}
.bootstrap .wrap.header {
padding: 10px 10px; /* v h */
}
.bootstrap .wrap.wrap-header {
padding: 20px 20px; /* v h */
}
.bootstrap .wrap.header.trends {
padding-left: 15px;
padding-right: 15px;
}
.bootstrap .wrap.nav2 {
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .wrap.home {
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.bootstrap .wrap.wrap-hv-pad {
padding: 40px 0;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.wrap-hv-pad {
padding: 40px 0;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .wrap.wrap-hv-pad {
padding: 40px 0;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .wrap.footer {
padding-top: 0px;
padding-bottom: 15px;
}
.bootstrap .wrap.bottom-pad {
padding-bottom: 30px;
}
.bootstrap .wrap.nav2 {
padding-top: 0px;
padding-bottom: 0px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.header {
padding-left: 10px;
padding-right: 10px;
padding: 10px;
}
.bootstrap .wrap.nav2 {
padding-top: 0px;
padding-bottom: 0px;
}
}
/* Bleed */
.bootstrap .wrap.full-bleed {
padding: 0px;
}
.bootstrap .wrap.bottom-bleed {
padding-bottom: 0px;
}
.bootstrap .wrap.top-bleed {
padding-top: 0px;
}
.bootstrap .wrap.left-bleed {
padding-left: 0px;
}
.bootstrap .wrap.right-bleed {
padding-right: 0px;
}
.bootstrap .wrap.wrap-left-bleed {
padding-left: 0px;
}
.bootstrap .wrap.wrap-right-bleed {
padding-right: 0px;
}
/* Tight */
.bootstrap .wrap.top-tight {
padding-top: 13px;
}
.bootstrap .wrap.bottom-tight {
padding-bottom: 11px;
}
.bootstrap .wrap.top-really-tight {
padding-top: 3px;
}
.bootstrap .wrap.bottom-really-tight {
padding-bottom: 1px;
}
/* Border */
.bootstrap .wrap.bottom-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.07);
}
.bootstrap .wrap.top-border {
border-top: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.07);
}
.bootstrap .wrap.no-shadow {
box-shadow: none;
}
/* */
/* Color */
.bootstrap .wrap.gray {
/* Use transparent equivalent to 245,245,245 so shadows work */
background-color: rgb(245, 245, 245);
/* background-color: rgba(0, 0, 0, 0.039); */
border-bottom: 1px solid #ddd;
}
.bootstrap .wrap.black {
background-color: rgb(40, 40, 40);
}
.bootstrap .wrap.wrap-cards {
background: #E9E9E9;
}
.bootstrap .wrap.wrap-cards-alt {
background: #d2d2d2;
}
.bootstrap .wrap.wrap-primary {
background-color: #085278;
color: #fff;
}
.bootstrap .wrap.wrap-secondary {
background-color: #085178;
color: #fff;
}
.bootstrap .wrap.wrap-secondary .btn-text {
background: #fff;
color: #085178;
}
.bootstrap .wrap.wrap-2 {
background-color: #085178;
color: #fff;
}
.bootstrap .wrap.wrap-2 .btn-text {
background: #fff;
color: #085178;
}
.bootstrap .wrap.wrap-3 {
background-color: #FDD914;
color: #fff;
}
.bootstrap .wrap.wrap-3 .btn-text {
background: #fff;
color: #FDD914;
}
.bootstrap .wrap.wrap-4 {
background-color: #D72B2F;
color: #fff;
}
.bootstrap .wrap.wrap-4 .btn-text {
background: #fff;
color: #D72B2F;
}
.bootstrap .wrap.wrap-complement {
background-color: #FFA22C;
color: #fff;
}
.bootstrap .wrap.wrap-complement .btn-text {
background: #fff;
color: #FFA22C;
}
.bootstrap .wrap.wrap-complement .btn-text-open {
background: none;
border-color: #fff;
color: #fff;
}
.bootstrap .wrap.wrap-complement-2 {
background-color: rgb(36, 24, 88);
color: #fff;
}
.bootstrap .wrap.wrap-complement-2 .btn-text {
background: #fff;
color: #FFA22C;
}
.bootstrap .wrap.wrap-complement-2 .btn-text-open {
background: none;
border-color: #fff;
color: #fff;
}
.bootstrap .wrap.wrap-cover-flow {
border-top: 1px solid #DDDDDD;
background-color: #F8F8F8;
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.wrap-progression {
padding-top: 20px;
}
}
.bootstrap .wrap.wrap-progression-tab {
padding-top: 20px;
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.wrap-progression-tab {
padding-top: 30px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .wrap.wrap-progression-tab {
padding-top: 25px;
}
}
.bootstrap .wrap.wrap-browse {
padding-top: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .wrap.wrap-browse {
padding-top: 40px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.wrap-browse {
padding-top: 40px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .wrap.wrap-browse {
padding-top: 40px;
}
}
.bootstrap .wrap.wrap-browse .div-browse {
padding-top: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .wrap.wrap-browse .div-browse {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .wrap.wrap-browse .div-browse {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .wrap.wrap-browse .div-browse {
padding-bottom: 40px;
}
}
.bootstrap .wrap.wrap-dji {
background: #F3C94E;
color: #3B3E40;
}
.bootstrap .wrap.wrap-dji .btn-text {
color: #F3C94E;
}
.bootstrap .wrap.wrap-dji-2 {
background: #62D2C7;
color: #3B3E40;
}
.bootstrap .wrap.wrap-dji-2 .btn-text {
color: #62D2C7;
}
/* Layout Analysis
================================================== */
/* It is assumed this all resides inside <div class="content"> */
/*
$widthSearch: 280px;
$widthRight: 250px;
*/
/* Mobile styles 100% width float */
.bootstrap .analysis-main {
float: left;
width: 100%;
}
.bootstrap .analysis-main-padding {
padding: 10px;
}
.bootstrap .analysis-search {
float: left;
width: 100%;
height: 92px;
background-color: rgb(245, 245, 245);
}
/* Two-col support within .analysis-main */
.bootstrap .analysis-main-left {
width: 100%;
float: left;
}
.bootstrap .analysis-main-right {
width: 100%;
float: left;
}
.bootstrap .analysis-main-right-padding {
/* T R B L */
/* padding: 0px $padding_xs $padding_xs $padding_xs*/
}
/*
@media only screen and (min-width: 1050px) {
.analysis-main-left{
width: 70%;
}
.analysis-main-right{
width: 30%;
}
.analysis-main-right-padding{
padding: $padding_sm $padding_sm $padding_sm 0px;
}
}
*/
.bootstrap .analysis-search-padding {
/* T R B L */
padding: 10px 15px 10px 15px;
border-bottom: 1px solid rgb(102, 107, 121);
background-image: linear-gradient(top, rgb(237, 237, 239) 22%, rgb(216, 217, 222) 100%);
background-image: -ms-linear-gradient(top, rgb(237, 237, 239) 22%, rgb(216, 217, 222) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.22, rgb(237, 237, 239)), color-stop(1, rgb(216, 217, 222)));
}
.bootstrap .analysis-results {
float: left;
width: 100%;
background-color: rgb(245, 245, 245);
}
.bootstrap .analysis-right {
float: left;
width: 100%;
background-color: #FFF;
}
@media only screen and (min-width: 768px) {
.bootstrap .analysis-search {
position: absolute;
top: 0px;
left: 0px;
/* width: $widthSearch - 2; */
width: 33%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.bootstrap .analysis-results {
position: absolute;
top: 93px;
left: 0px;
bottom: 0px;
/* width: $widthSearch - 2; */
width: 33%;
overflow-y: auto;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.bootstrap .analysis-main {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 67%;
overflow-y: auto;
}
.bootstrap .analysis-main-overlay {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 67%;
overflow-y: auto;
z-index: 1;
background: rgb(255, 255, 255) image-url("gif/skype-32.gif") 50% 50% no-repeat;
display: none;
}
}
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
.bootstrap .analysis-main-overlay {
background: rgb(255, 255, 255) image-url("gif/skype-64.gif") 50% 50% no-repeat;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .analysis-main-overlay.loading {
display: block;
}
.bootstrap .analysis-main-padding {
padding: 20px;
padding: 50px;
padding-top: 30px;
}
}
/* Custom sizing for search and select */
/*
#browse-textbox {
width: 70%;
float:left;
}
#browse-order-by{
margin-top: 6px;
width: 25%;
margin-left: 5%;
float:left;
height: auto;
background-color: #EBEBEB;
border: 1px solid rgba( 0, 0, 0, .2 );
color: #888;
}
#browse-order-by:focus{
outline:none;
}
*/
.bootstrap .tabs {
/* T R B L */
padding: 7px 15px 7px 15px;
border-bottom: 1px solid rgb(102, 107, 121);
background-image: linear-gradient(bottom, rgb(165, 169, 182) 39%, rgb(243, 245, 247) 100%);
background-image: -ms-linear-gradient(bottom, rgb(165, 169, 182) 39%, rgb(243, 245, 247) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.39, rgb(165, 169, 182)), color-stop(1, rgb(243, 245, 247)));
clear: both;
}
/* Layout Analysis
================================================== */
/* It is assumed this all resides inside <div class="content"> */
/* Mobile styles 100% width float */
.bootstrap .book-left {
float: left;
width: 100%;
}
.bootstrap .book-left-padding {
padding: 15px;
}
.bootstrap .book-right {
float: left;
width: 100%;
}
.bootstrap .book-title {
padding: 10px;
padding-right: 0px;
background: #EBEBEB;
}
@media only screen and (min-width: 768px) {
.bootstrap .book-left {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 320px;
overflow-y: auto;
}
.bootstrap .book-right {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 320px;
overflow-y: auto;
/*
border-left: 1px solid rgba(0, 0, 0, .1);
border-right: 1px solid rgba(0, 0, 0, .1);
*/
}
.bootstrap .book-left-padding {
padding: 20px;
}
.bootstrap .book-right-padding {
padding: 20px;
padding-left: 0px;
}
}
/* Layout CP
================================================== */
/* small change */
/* 58px 2015.02.16 */
/* $fixed_header_height: 66px; */
/* $fixed_header_height: 10px; */
.cp-header {
position: absolute;
left: 0;
right: 0;
/* height: 40px; */
height: 64px;
background: none;
}
.cp-content {
position: absolute;
left: 0;
right: 0;
/* top: 41px; */
top: 65px;
bottom: 0;
height: auto;
}
/* It is assumed this all resides inside <div class="content"> */
/* 114 */
/* 2013.11.04 removing */
/* was 50px; */ /* was 0px */
/* cp-chords-top
------------------------------------------------------ */
.cp-chords-top {
position: absolute;
top: 0px;
height: 75px;
left: 20px;
width: 365px;
margin-top: 0px;
color: #444;
z-index: 1;
background: none;
}
.cp-chords {
/* Left col */
position: absolute;
top: 75px;
bottom: 0px;
left: 20px;
width: 380px;
overflow-y: hidden;
overflow-x: hidden;
padding: 0;
margin: 0;
}
/* .cp-chords-bottom
---------------------------------------------- */
.cp-chords-bottom {
position: absolute;
height: 0px;
bottom: 0px;
left: 20px;
width: 380px;
overflow-y: auto;
}
/* cp-results
---------------------------------------------- */
.cp-results-top {
position: absolute;
top: 0px;
height: 75px;
left: 400px;
width: 300px;
}
.cp-results {
position: absolute;
top: 75px;
bottom: 0px;
bottom: 0px;
left: 400px;
width: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #E9E9E9;
background: none; /* 2014.12.01 */
/*
border-right: 1px solid $color_border;
border-left: 1px solid $color_border;
*/
}
.cp-results-bottom {
position: absolute;
height: 0px;
bottom: 0px;
left: 400px;
width: 300px;
}
/* Loading overlay for matching songs with gif */
.cp-results-overlay {
position: absolute;
top: 75px;
bottom: 0px;
left: 400px;
width: 300px;
overflow-y: auto;
display: none;
z-index: 10;
background: white;
display: none;
}
.cp-results-overlay.loading {
display: block;
}
.cp-results-msg {
/* TRBL */
padding: 10px 15px 10px 15px;
margin: 0;
}
/** EDITOR */
.cp-editor {
position: absolute;
top: 0px;
bottom: 0px;
left: 700px;
width: 500px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 1200px) {
.cp-editor {
right: 0px;
width: auto;
}
}
/* Loading overlay for Music Editor with gif */
.cp-editor-overlay {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 700px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 10;
background: rgb(255, 255, 255) image-url("gif/ajax-loader.gif") 50% 50% no-repeat;
display: none;
}
.cp-editor-overlay.loading {
/* Comment out display: block; to see the theorytab in Trends */
display: block;
}
/* Default overlay for Music Editor that says click a song to load it */
.cp-editor-empty {
position: absolute;
top: 0px;
bottom: 0px;
left: 700px;
width: 500px;
overflow-y: auto;
background: #fff;
z-index: 2;
display: none;
}
@media only screen and (min-width: 1200px) {
.cp-editor-empty {
right: 0px;
width: auto;
}
}
.cp-editor-empty.active {
/* Comment out display: block; to see the theorytab in Trends */
display: block;
}
/* welcome message
--------------------------------------------------------------------------------------- */
.cp-welcome-message {
display: none;
}
.cp-welcome-message.select-first-chord {
position: absolute;
top: 0px;
bottom: 0px;
left: 400px;
width: 800px;
z-index: 1;
background: #fff;
/* Comment out display: inline; to see the theorytab in Trends on load */
display: inline;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 1200px) {
.cp-welcome-message.select-first-chord {
right: 0px;
width: auto;
}
}
/* lc: (l)ist and (c)ontent like iOS Mail
--------------------------------------------------------- */
/* Inside of div.content */
.bootstrap .lc-content {
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
height: auto;
overflow-y: auto;
width: 100%;
}
.bootstrap .lc-l {
width: 100%;
float: left;
/* background: rgba(200, 200, 200, 1); */
}
.bootstrap .lc-l .padding {
padding: 15px;
}
.bootstrap .lc-l .vpadding {
padding-top: 15px;
padding-bottom: 15px;
}
.bootstrap .lc-c {
width: 100%;
float: left;
/* background: rgba(100, 100, 100, 1); */
}
.bootstrap .lc-c .padding {
padding: 15px;
}
.bootstrap .lc-l.mobile-hide {
display: none;
}
@media only screen and (min-width: 768px) {
.bootstrap .lc-l {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 300px;
overflow-y: auto;
border-right: 1px solid #ddd;
}
.bootstrap .lc-l .padding {
padding: 20px;
padding-right: 20px;
}
.bootstrap .lc-l .vpadding {
padding-top: 20px;
padding-bottom: 20px;
}
.bootstrap .lc-l.mobile-hide {
display: block;
}
.bootstrap .lc-c {
position: absolute;
top: 0px;
bottom: 0px;
left: 300px;
right: 0px;
width: auto; /* override 100% from mobile layout */
overflow-y: auto;
}
.bootstrap .lc-c .padding {
padding: 20px;
/* padding-left: 20px; */
}
.bootstrap .lc-l.wide {
width: 450px;
}
.bootstrap .lc-c.wide {
left: 450px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .lc-l .padding {
padding: 25px;
}
.bootstrap .lc-l .vpadding {
padding-top: 25px;
padding-bottom: 25px;
}
.bootstrap .lc-c .padding {
padding: 25px;
}
}
/* cl: (c)ontent and (l)ist like iOS Mail but flipped left right
---------------------------------------------------------------- */
.bootstrap .cl-content {
position: absolute;
left: 0;
right: 0;
top: 100;
bottom: 0;
height: auto;
overflow-y: auto;
width: 100%;
}
/* Inside of div.content */
.bootstrap .cl-c {
width: 100%;
float: left;
/* background: rgba(100, 100, 100, 1); */
}
.bootstrap .cl-c .padding {
padding: 15px;
}
.bootstrap .cl-l {
width: 100%;
float: left;
/* background: rgba(200, 200, 200, 1); */
}
.bootstrap .cl-l .padding {
padding: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap .cl-c {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 350px;
width: auto; /* override 100% from mobile layout */
overflow-y: auto;
}
.bootstrap .cl-c .padding {
padding: 20px;
padding-right: 20px;
}
.bootstrap .cl-c .padding.bottom-bleed {
padding-bottom: 0px;
}
.bootstrap .cl-l {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 350px; /* override 100% from mobile layout */
overflow-y: auto;
}
.bootstrap .cl-l .padding {
padding: 20px;
padding-left: 40px;
}
.bootstrap .cl-l .padding.bottom-bleed {
padding-bottom: 0px;
}
.bootstrap .cl-c.below-nav {
top: 40px;
}
.bootstrap .cl-c.below-nav .padding {
padding-top: 10px;
}
.bootstrap .cl-l.below-nav {
top: 40px;
}
.bootstrap .cl-l.below-nav .padding {
padding-top: 10px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .cl-c .padding {
padding-left: 25px;
}
.bootstrap .cl-l .padding {
padding-right: 25px;
}
}
.bootstrap .full-bleed-lc .l {
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap .full-bleed-lc .l {
width: 30%;
padding-top: 20px;
padding-bottom: 20px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
}
.bootstrap .full-bleed-lc .l.mobile-hide {
display: none;
}
@media only screen and (min-width: 768px) {
.bootstrap .full-bleed-lc .l.mobile-hide {
display: block;
}
}
.bootstrap .full-bleed-lc .c {
float: left;
width: 100%;
}
.bootstrap .full-bleed-lc .c .padding {
padding: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap .full-bleed-lc .c {
width: 70%;
}
.bootstrap .full-bleed-lc .c .padding {
padding: 20px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .full-bleed-lc .c .padding {
padding: 25px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .promo {
font-size: 18px;
}
}
.bootstrap .promo h1.dbl,
.bootstrap .promo h2.dbl,
.bootstrap .promo h3.dbl {
margin: 0px;
padding: 0px;
line-height: 1.1em;
}
.bootstrap .promo h1.dbl.sub,
.bootstrap .promo h2.dbl.sub,
.bootstrap .promo h3.dbl.sub {
color: #777;
}
/* .limit
------------------------------------------------------------------------------*/
.bootstrap .limit-200 {
margin-left: auto;
margin-right: auto;
max-width: 200px;
}
.bootstrap .limit-250 {
margin-left: auto;
margin-right: auto;
max-width: 250px;
}
.bootstrap .limit-300 {
margin-left: auto;
margin-right: auto;
max-width: 300px;
}
.bootstrap .limit-350 {
margin-left: auto;
margin-right: auto;
max-width: 350px;
}
.bootstrap .limit-400 {
margin-left: auto;
margin-right: auto;
max-width: 400px;
}
.bootstrap .limit-450 {
margin-left: auto;
margin-right: auto;
max-width: 450px;
}
.bootstrap .limit-500 {
margin-left: auto;
margin-right: auto;
max-width: 500px;
}
.bootstrap .limit-600 {
margin-left: auto;
margin-right: auto;
max-width: 600px;
}
.bootstrap .limit-650 {
margin-left: auto;
margin-right: auto;
max-width: 650px;
}
.bootstrap .limit-700 {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.bootstrap .limit-750 {
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
.bootstrap .limit-800 {
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
.bootstrap .limit-850 {
margin-left: auto;
margin-right: auto;
max-width: 850px;
}
.bootstrap .limit-900 {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.bootstrap .limit-1000 {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.bootstrap .slides {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.07);
}
/* Header
-------------------------------------------- */
.bootstrap header.header-site {
padding-top: 15px;
padding-bottom: 0px;
background-color: #fff;
margin-bottom: 0px;
border-bottom: none;
}
.bootstrap header {
padding-top: 10px;
background-color: #E9E9E9;
width: 100%;
}
.bootstrap header div.lcr div.l {
float: left;
width: 30%;
}
@media only screen and (min-width: 768px) {
.bootstrap header div.lcr div.l {
width: 35%;
}
}
.bootstrap header div.lcr div.c {
float: left;
width: 40%;
text-align: center;
}
@media only screen and (min-width: 768px) {
.bootstrap header div.lcr div.c {
width: 30%;
/* background-color: #999999; */
}
}
.bootstrap header div.lcr div.r {
float: left;
width: 30%;
}
@media only screen and (min-width: 768px) {
.bootstrap header div.lcr div.r {
width: 35%;
}
}
.bootstrap header div.lr div.l {
float: left;
width: 50%;
}
@media only screen and (min-width: 768px) {
.bootstrap header div.lr div.l {
width: 50%;
}
}
.bootstrap header div.lr div.r {
float: left;
width: 50%;
}
@media only screen and (min-width: 768px) {
.bootstrap header div.lr div.r {
width: 50%;
}
}
.bootstrap header.no-border {
border: none;
}
.bootstrap header.search-browse {
background-color: #E9E9E9;
/*
box-shadow: 0px 1px 2px 0px #BBBBBB;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
*/
margin-top: 0px;
margin-bottom: 0px;
/*
border-top: 1px solid #880000;
border-bottom: 1px solid #880000;
*/
border: none;
}
.bootstrap .wrap.header.search-browse {
padding-top: 5px;
padding-bottom: 5px;
}
.bootstrap div.yii-flash-img {
float: left;
width: 20%;
text-align: right;
}
.bootstrap div.yii-flash-message {
float: left;
width: 80%;
}
/* 50-50
----------------------------------------------------------------------------------------*/
.bootstrap div.col12.col1 {
float: left;
width: 100%;
margin-bottom: 15px;
}
.bootstrap div.col12.col2 {
float: left;
width: 100%;
}
@media only screen and (min-width: 768px) {
.bootstrap div.col12.col1 {
width: 47.5%;
padding-right: 2.5%;
margin-bottom: 0px;
}
.bootstrap div.col12.col2 {
width: 47.5%;
padding-left: 2.5%;
padding-right: 0;
}
}
/* 70-30
----------------------------------------------------------------------------------------*/
.bootstrap div.col12.main {
float: left;
width: 100%;
margin-bottom: 15px;
}
.bootstrap div.col12.side {
float: left;
width: 100%;
}
@media only screen and (min-width: 768px) {
.bootstrap div.col12.main {
/* width: calc(70% - 10px); */
width: calc(70% - 20px);
margin-right: 20px;
/*
width:67%;
padding-right:3%;
*/
/*
width:58%;
padding-right:6%;
*/
margin-bottom: 0px;
float: left;
/* margin-right: $padding_sm; */
}
.bootstrap div.col12.side {
width: 30%;
/*width:36%;*/
float: left;
}
}
/* 30-70
----------------------------------------------------------------------------------------*/
.bootstrap div.col12.span30 {
float: left;
width: 100%;
margin-bottom: 15px;
/* background-color: #CCCCCC; */
padding-top: 15px;
padding-bottom: 15px;
}
.bootstrap div.col12.span70 {
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap div.col12.span30 {
width: 30%;
padding-right: 0%;
margin-bottom: 0px;
padding-top: 20px;
padding-bottom: 20px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.bootstrap div.col12.span70 {
padding-left: 7%;
width: 63%;
/* border-left: 1px solid rgba(0, 0, 0, .1); */
padding-top: 20px;
padding-bottom: 20px;
}
}
/* mobile: 1-col, landscape: 2-col, tablet: 3-col, desktop: 4-col */
.bootstrap ul.grid12 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
padding-bottom: 15px;
}
.bootstrap ul.grid12.tight li.grid-item {
padding-bottom: 0;
}
.bootstrap ul.grid12 {
margin: 0;
padding: 0;
}
.bootstrap .grid12:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
.bootstrap ul.grid12 li.grid-item {
width: 47.4%;
padding-left: 2.5%;
padding-right: 2.5%;
padding-bottom: 30px;
width: calc((100% - 20px) / 2);
margin-right: 20px;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
}
.bootstrap ul.grid12.tight li.grid-item {
padding-bottom: 0px;
}
.bootstrap ul.grid12 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid12 li.grid-item:nth-child(2n) {
padding-right: 0%;
margin-right: 0;
}
.bootstrap ul.grid12.blog li.grid-item:nth-child(2n) {
/* border-left: 1px solid #DDD; */
}
.bootstrap ul.grid12.blog {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}
}
/* mobile: 1-col, landscape: 2-col, tablet: 3-col, desktop: 4-col */
.bootstrap ul.grid12cl {
margin: 0;
padding: 0;
}
.bootstrap ul.grid12cl li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
padding-bottom: 15px;
}
.bootstrap ul.grid12cl.tight li.grid-item {
padding-bottom: 0;
}
.bootstrap ul.grid12cl:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
/*
ul.grid12 li.grid-item{
width: 47.4%;
padding-left:2.5%;
padding-right:2.5%;
padding-bottom: 30px;
}
ul.grid12.tight li.grid-item {
padding-bottom: 0px;
}
*/
.bootstrap ul.grid12cl {
/* 1, 3, 5 */
/* 2, 4, 6 */
}
.bootstrap ul.grid12cl li.grid-item:nth-child(2n+1) {
width: 65.33%;
padding-left: 0%;
padding-right: 2%;
clear: both;
}
.bootstrap ul.grid12cl li.grid-item:nth-child(2n) {
width: 30.66%;
padding-left: 2%;
padding-right: 0%;
}
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid123 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
margin-bottom: 15px;
}
.bootstrap ul.grid123.app-icons li.grid-item {
padding-bottom: 4%;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid123 li.grid-item.mobile-promo {
width: 90%;
padding-left: 5%;
padding-right: 5%;
padding-top: 20px;
padding-bottom: 20px;
}
/*
ul.grid123 li:first-child {
padding-top:0px;
}
*/
}
.bootstrap ul.grid123 {
margin: 0;
padding: 0;
}
.bootstrap .grid123:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
.bootstrap ul.grid123 li.grid-item {
/*
width: 48.5%;
padding-left: 1.5%;
padding-right: 1.5%;
padding-bottom: 20px;
*/
/*
width: 49%;
padding-left: 1%;
padding-right: 1%;
*/
width: calc((100% - 20px) / 2);
margin-right: 20px;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
}
.bootstrap ul.grid123 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid123 li.grid-item:nth-child(2n) {
padding-right: 0%;
margin-right: 0;
}
.bootstrap ul.grid123.smart-text {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) {
/* Move to 3-columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
.bootstrap ul.grid123 li.grid-item {
/*width:29.5%;
padding-left:2.5%;
padding-right:2.5%;
*/
width: 30.6666%;
padding-left: 2%;
padding-right: 2%;
width: 32%;
padding-left: 1%;
padding-right: 1%;
width: 32.266%;
padding-left: 0.8%;
padding-right: 0.8%;
/* width: calc(33.3333% - 20px); */
width: calc((100% - 40px) / 3);
margin-right: 20px;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
}
.bootstrap ul.grid123 li.grid-item:nth-child(3n+1) {
/* padding-left: 0%; */
clear: both;
}
.bootstrap ul.grid123 li.grid-item:nth-child(3n+3) {
/* padding-right: 0%; */
margin-right: 0px;
}
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid113 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
padding-bottom: 15px;
}
.bootstrap ul.grid113.tight-bottom li.grid-item {
padding-bottom: 10px;
}
.bootstrap ul.grid113.app-icons li.grid-item {
padding-bottom: 4%;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid113 li.grid-item.mobile-promo {
width: 90%;
padding-left: 5%;
padding-right: 5%;
padding-top: 20px;
padding-bottom: 20px;
}
/*
ul.grid113 li:first-child {
padding-top:0px;
}
*/
}
.bootstrap ul.grid113 {
margin: 0;
padding: 0;
}
.bootstrap .grid113:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
@media only screen and (min-width: 992px) {
/* Move to 3-columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
.bootstrap ul.grid113 li.grid-item {
/*width:29.5%;
padding-left:2.5%;
padding-right:2.5%;
*/
width: 30.6666%;
padding-left: 2%;
padding-right: 2%;
width: calc((100% - 50px) / 3);
margin-right: 25px;
padding-left: 0;
padding-right: 0;
}
.bootstrap ul.grid113 li.grid-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid113 li.grid-item:nth-child(3n+3) {
padding-right: 0%;
margin-right: 0;
}
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid111 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
padding-bottom: 30px;
}
.bootstrap ul.grid111.tight-bottom li.grid-item {
padding-bottom: 10px;
}
.bootstrap ul.grid111.app-icons li.grid-item {
padding-bottom: 4%;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid111 li.grid-item.mobile-promo {
width: 90%;
padding-left: 5%;
padding-right: 5%;
padding-top: 20px;
padding-bottom: 20px;
}
/*
ul.grid111 li:first-child {
padding-top:0px;
}
*/
}
.bootstrap ul.grid111 {
margin: 0;
padding: 0;
}
.bootstrap .grid111:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* mobile: 1-col, landscape: 2-col, tablet: 3-col, desktop: 4-col */
.bootstrap ul.grid1234 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
padding-bottom: 10px;
}
.bootstrap ul.grid1234 {
margin: 0;
padding: 0;
}
.bootstrap .grid1234:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
.bootstrap ul.grid1234 li.grid-item {
width: 47.4%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(2n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Move to 3-columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
.bootstrap ul.grid1234 li.grid-item {
width: 30%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(3n+3) {
padding-right: 0%;
}
}
@media only screen and (min-width: 992px) {
/* Move to 4 columns */
/* 1, 5, 9 get padding-left = 0 */
/* 4, 8, 12 get padding-right = 0 */
.bootstrap ul.grid1234 li.grid-item {
width: 21.25%;
padding-left: 2.5%;
padding-right: 2.5%;
width: 22.75%;
padding-left: 1.5%;
padding-right: 1.5%;
width: 23.5%;
padding-left: 1%;
padding-right: 1%;
width: 23.875%;
padding-left: 0.75%;
padding-right: 0.75%;
width: 24.1%;
padding-left: 0.6%;
padding-right: 0.6%;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(4n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid1234 li.grid-item:nth-child(4n) {
padding-right: 0%;
}
}
/* mobile: 1-col, landscape: 2-col, tablet: 3-col, desktop: 4-col */
.bootstrap ul.grid124 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
margin-bottom: 15px;
}
.bootstrap ul.grid124 {
margin: 0;
padding: 0;
}
.bootstrap .grid124:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* @media only screen and (min-width: 768px) and (max-width: 991px){ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
.bootstrap ul.grid124 li.grid-item {
width: 47.4%;
padding-left: 2.5%;
padding-right: 2.5%;
width: calc((100% - 20px) / 2);
margin-right: 20px;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
}
.bootstrap ul.grid124 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid124 li.grid-item:nth-child(2n) {
padding-right: 0%;
margin-right: 0;
}
}
@media only screen and (min-width: 992px) {
/* Move to 4 columns */
/* 1, 5, 9 get padding-left = 0 */
/* 4, 8, 12 get padding-right = 0 */
/*
ul.grid124 li.grid-item{
width:21.25%;
padding-left:2.5%;
padding-right:2.5%;
}
ul.grid124 li.grid-item{
width:24.1%;
padding-left: 0.6%;
padding-right: 0.6%;
}
ul.grid124 li.grid-item{
width: 23.8%;
padding-left: 0.8%;
padding-right: 0.8%;
}
*/
/*
ul.grid124 li.grid-item{
width: 23.5%;
padding-left: 1%;
padding-right: 1%;
}
*/
.bootstrap ul.grid124 li.grid-item {
width: calc((100% - 75px) / 4);
margin-right: 25px;
padding-left: 0;
padding-right: 0;
margin-bottom: 25px;
}
.bootstrap ul.grid124 li.grid-item:nth-child(4n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid124 li.grid-item:nth-child(4n) {
padding-right: 0%;
margin-right: 0;
}
}
/* mobile: 1-col, landscape: 2-col, tablet: 3-col, desktop: 4-col */
.bootstrap ul.grid124tiles li.grid-item {
list-style: none;
list-style-image: none;
float: left;
width: 100%;
margin-bottom: 3px;
}
.bootstrap ul.grid124tiles {
margin: 0;
padding: 0;
}
.bootstrap .grid124tiles:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* @media only screen and (min-width: 768px) and (max-width: 991px){ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
.bootstrap ul.grid124tiles li.grid-item {
width: 47.4%;
padding-left: 2.5%;
padding-right: 2.5%;
width: calc((100% - 3px) / 2);
margin-right: 3px;
padding-left: 0;
padding-right: 0;
margin-bottom: 3px;
}
.bootstrap ul.grid124tiles li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid124tiles li.grid-item:nth-child(2n) {
padding-right: 0%;
margin-right: 0;
}
}
@media only screen and (min-width: 992px) {
/* Move to 4 columns */
/* 1, 5, 9 get padding-left = 0 */
/* 4, 8, 12 get padding-right = 0 */
/*
ul.grid124tiles li.grid-item{
width:21.25%;
padding-left:2.5%;
padding-right:2.5%;
}
ul.grid124tiles li.grid-item{
width:24.1%;
padding-left: 0.6%;
padding-right: 0.6%;
}
ul.grid124tiles li.grid-item{
width: 23.8%;
padding-left: 0.8%;
padding-right: 0.8%;
}
*/
/*
ul.grid124tiles li.grid-item{
width: 23.5%;
padding-left: 1%;
padding-right: 1%;
}
*/
.bootstrap ul.grid124tiles li.grid-item {
width: calc((100% - 9px) / 4);
margin-right: 3px;
padding-left: 0;
padding-right: 0;
}
.bootstrap ul.grid124tiles li.grid-item .a-app-tile {
min-height: 165px;
}
.bootstrap ul.grid124tiles li.grid-item:nth-child(4n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid124tiles li.grid-item:nth-child(4n) {
padding-right: 0%;
margin-right: 0;
}
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid236 {
margin: 0;
padding: 0;
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
/* Use /Matlab/CSS/css_grid_calculator */
}
.bootstrap ul.grid236 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
padding-bottom: 15px;
box-sizing: content-box;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid236 li.grid-item {
width: 48%;
padding-left: 2%;
padding-right: 2%;
}
.bootstrap ul.grid236 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid236 li.grid-item:nth-child(2n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bootstrap ul.grid236 {
/* Move to three columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
}
.bootstrap ul.grid236 li.grid-item {
width: 32%;
padding-left: 1%;
padding-right: 1%;
}
.bootstrap ul.grid236 li.grid-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid236 li.grid-item:nth-child(3n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 992px) {
.bootstrap ul.grid236 {
/* Move to six columns */
}
.bootstrap ul.grid236 li.grid-item {
width: 15.5%;
padding-left: 0.7%;
padding-right: 0.7%;
}
.bootstrap ul.grid236 li.grid-item:nth-child(6n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid236 li.grid-item:nth-child(6n) {
padding-right: 0%;
}
}
.bootstrap ul.grid236.app-icons li.grid-item {
padding-bottom: 4%;
}
.bootstrap ul.grid236:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid233 {
margin: 0;
padding: 0;
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
/* Use /Matlab/CSS/css_grid_calculator */
/* Move to six columns */
/*
@media only screen and (min-width: 992px) {
li.grid-item {
width: 13.3%;
padding-left: 2%;
padding-right: 2%;
}
li.grid-item:nth-child(6n+1) {
padding-left: 0%;
clear: both;
}
li.grid-item:nth-child(6n) {
padding-right: 0%;
}
}
*/
}
.bootstrap ul.grid233 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
padding-top: 2%;
padding-bottom: 2%;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid233 li.grid-item {
width: 45%;
padding-left: 5%;
padding-right: 5%;
}
.bootstrap ul.grid233 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid233 li.grid-item:nth-child(2n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 768px) {
.bootstrap ul.grid233 {
/* Move to three columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
}
.bootstrap ul.grid233 li.grid-item {
width: 29.5%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.bootstrap ul.grid233 li.grid-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid233 li.grid-item:nth-child(3n) {
padding-right: 0%;
}
}
.bootstrap ul.grid233.app-icons li.grid-item {
padding-bottom: 4%;
}
.bootstrap ul.grid233:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid333 {
margin: 0;
padding: 0;
width: 100%;
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
/* Use /Matlab/CSS/css_grid_calculator */
/* Move to three columns */
/* 1, 4, 7 get padding-left = 0 */
/* 3, 6, 9 get padding-right = 0 */
}
.bootstrap ul.grid333 li.grid333-item {
list-style: none;
list-style-image: none;
float: left;
padding-top: 2%;
padding-bottom: 2%;
}
.bootstrap ul.grid333 li.grid333-item {
width: 30%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.bootstrap ul.grid333 li.grid333-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid333 li.grid333-item:nth-child(3n) {
padding-right: 0%;
}
.bootstrap ul.grid333.padded {
/*
li.grid333-item {
width: 24%;
padding-left: 7%;
padding-right: 7%;
}
*/
}
.bootstrap ul.grid333.padded li.grid333-item {
width: 26.6%;
padding-left: 5%;
padding-right: 5%;
}
.bootstrap ul.grid333.padded li.grid333-item {
width: 28%;
padding-left: 4%;
padding-right: 4%;
padding-bottom: 10%;
}
.bootstrap ul.grid333.padded li.grid333-item:nth-child(3n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid333.padded li.grid333-item:nth-child(3n) {
padding-right: 0%;
}
.bootstrap ul.grid333.tight {
/* background-color: #0000FF; */
}
.bootstrap ul.grid333.tight li.grid333-item {
width: 32%;
margin: 0px;
padding-right: 1%;
padding-left: 0px;
padding-top: 1%;
padding-bottom: 1%;
width: 33.333333%;
padding: 0px;
}
.bootstrap ul.grid333.tight li.grid333-item:nth-child(3n+1) {
padding-left: 1%;
clear: both;
padding-left: 0px;
/* background-color: #FF0000; */
}
.bootstrap ul.grid333.tight li.grid333-item:nth-child(3n) {
/* padding-right: 0%; */
/* background-color: #00FF00; */
}
.bootstrap ul.grid333:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* mobile: 1-col, tablet: 2-col, desktop: 3-col */
.bootstrap ul.grid2468 {
margin: 0;
padding: 0;
/* Move to two columns */
/* 1, 3, 5 get padding-left = 0 */
/* 2, 4, 6 get padding-right = 0 */
/* Use /Matlab/CSS/css_grid_calculator */
}
.bootstrap ul.grid2468 li.grid-item {
list-style: none;
list-style-image: none;
float: left;
padding-bottom: 15px;
box-sizing: content-box;
}
@media only screen and (max-width: 767px) {
.bootstrap ul.grid2468 {
/* Two columns */
}
.bootstrap ul.grid2468 li.grid-item {
width: 48%;
padding-left: 2%;
padding-right: 2%;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(2n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(2n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bootstrap ul.grid2468 {
/* Move to four columns */
}
.bootstrap ul.grid2468 li.grid-item {
width: 22.75%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(4n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(4n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bootstrap ul.grid2468 {
/* Move to six columns */
/*li.grid-item {
width: 13%;
padding-left: 2.2%;
padding-right: 2.2%;
}*/
/*
li.grid-item {
width: 15.3%;
padding-left: 0.82%;
padding-right: 0.82%;
}
*/
}
.bootstrap ul.grid2468 li.grid-item {
width: 15.5%;
padding-left: 0.7%;
padding-right: 0.7%;
}
.bootstrap ul.grid2468 li.grid-item {
width: 15.4%;
padding-left: 0.76%;
padding-right: 0.76%;
}
.bootstrap ul.grid2468 li.grid-item {
width: 15.15%;
padding-left: 0.91%;
padding-right: 0.91%;
}
.bootstrap ul.grid2468 li.grid-item {
width: 15%;
padding-left: 1%;
padding-right: 1%;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(6n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(6n) {
padding-right: 0%;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap ul.grid2468 {
/* Move to eight columns */
/*
li.grid-item {
width: 11.625%;
padding-left: 0.5%;
padding-right: 0.5%;
}
li.grid-item:nth-child(8n+1) {
padding-left: 0%;
clear: both;
}
li.grid-item:nth-child(8n) {
padding-right: 0%;
}
*/
}
.bootstrap ul.grid2468 li.grid-item {
width: 12.4%;
padding-left: 1.1%;
padding-right: 1.1%;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(7n+1) {
padding-left: 0%;
clear: both;
}
.bootstrap ul.grid2468 li.grid-item:nth-child(7n) {
padding-right: 0%;
}
}
.bootstrap ul.grid2468:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.bootstrap div.fixed-grid-3 div {
float: left;
width: 33%;
}
/* style */
/* */
/* bootstrap coloring */
.bootstrap payment span.message {
padding: 0px;
margin: 0px;
}
.bootstrap div.message {
padding: 15px;
margin-bottom: 15px;
margin-top: 15px;
border-style: solid;
border: 0px;
border-radius: 6px;
}
.bootstrap div.message.answer {
padding: 5px;
}
.bootstrap div.message.compact {
margin-top: 0px;
}
.bootstrap div.message.top {
margin-top: 0px;
}
.bootstrap div.message.bottom {
margin-bottom: 0px;
}
.bootstrap div.message.bottom-bleed {
padding-bottom: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap div.message {
padding: 25px;
margin-bottom: 20px;
margin-top: 20px;
}
.bootstrap div.message.answer {
padding: 10px;
}
.bootstrap div.message.compact {
padding: 10px;
margin-bottom: 15px;
}
.bootstrap div.message.bottom-bleed {
padding-bottom: 0px;
}
}
.bootstrap .aclose a.close {
color: inherit;
}
.bootstrap .aclose a.close:hover {
color: inherit;
}
.bootstrap .message.white {
background-color: #FFFFFF;
/* border-color: $color_border; */
}
.bootstrap .message.white-link {
background-color: #FFFFFF;
/* border-color: $color_border; */
}
.bootstrap .message.white-link:hover {
background-color: #FFFFFF;
/* border-color: #999; */
}
.bootstrap .success, .bootstrap div.message.answer {
color: #3c763d;
background-color: #dff0d8;
/* border-color: #d6e9c6 !important; */
}
.bootstrap .info {
color: #31708f;
background-color: #d9edf7;
/* border-color: #bce8f1 !important; */
}
.bootstrap .warning {
color: #8a6d3b;
background-color: #fcf8e3;
/* border-color: #faebcc !important; */
}
/*
.error {
color: #a94442;
background-color: #f2dede;
// border-color: #ebccd1 !important;
}
*/
.bootstrap .toc {
background-color: #E9E9E9;
/* border-color: $color_border; */
}
.bootstrap .toc.link:hover {
background-color: #DDDDDD;
}
/* style */
/* */
/* Tablet and Desktop styles */
.bootstrap table {
width: 100%;
border-collapse: separate;
}
@media only screen and (min-width: 768px) {
.bootstrap table {
font-size: 1em;
}
}
/* Zebra striping */
.bootstrap table.zebra tr:nth-of-type(odd) {
background: #f4f6f9;
}
.bootstrap table.valign td,
.bootstrap table.valign th {
vertical-align: middle;
}
.bootstrap th {
color: black;
font-weight: bold;
background: none;
}
.bootstrap td,
.bootstrap th {
padding: 10px;
/* border: 1px solid $color_border; */
text-align: left;
}
.bootstrap td.nowrap,
.bootstrap th.nowrap {
white-space: nowrap;
}
.bootstrap table.no-cell-border td,
.bootstrap table.no-cell-border th {
border: 0px;
text-align: left;
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
.bootstrap table.buy-options {
/* Kill zebra striping */
}
.bootstrap table.buy-options tr {
background: #fff;
border-bottom: 1px solid #ddd;
}
.bootstrap table.buy-options td,
.bootstrap table.buy-options th {
border: 0px;
text-align: left;
}
.bootstrap table.invoice {
/* Kill zebra striping */
/* Last col is align right, no padding-right*/
/* 1st col is no padding-left*/
}
.bootstrap table.invoice tr {
background: none !important;
border-bottom: 1px solid #ddd;
}
.bootstrap table.invoice td,
.bootstrap table.invoice th {
background: none !important;
border: 0px;
text-align: left;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.bootstrap table.invoice th:nth-of-type(3),
.bootstrap table.invoice td:nth-of-type(3) {
text-align: right;
padding-right: 0px;
}
.bootstrap table.invoice th:nth-of-type(1),
.bootstrap table.invoice td:nth-of-type(1) {
padding-left: 0px;
}
.bootstrap table.invoice th:nth-of-type(2),
.bootstrap table.invoice td:nth-of-type(2) {
text-align: right;
}
.bootstrap table.invoice tr.noborder {
border-bottom: 0px;
}
.bootstrap table.invoice tr.tight-bottom td,
.bootstrap table.invoice tr.tight-bottom th {
padding-bottom: 1px;
}
.bootstrap table.invoice tr.tight-top td,
.bootstrap table.invoice tr.tight-top th {
padding-top: 1px;
}
@media only screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
/* table{ display:block} doesn't work in IE so we need
to wrap the media queries in an IE conditional */
/* Mobile only styles */
.bootstrap table.mobile {
/* Hide table headers (but not display: none;, for accessibility) */
/* Kill the bottom border on the last td */
/* Zebra stripe */
/*
Label the data (revision history)
*/
/* Projects */
/* Analyses */
/* Top Contributors */
/*
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
*/
}
.bootstrap table.mobile table,
.bootstrap table.mobile thead,
.bootstrap table.mobile tbody,
.bootstrap table.mobile th,
.bootstrap table.mobile td,
.bootstrap table.mobile tr {
display: block;
}
.bootstrap table.mobile thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.bootstrap table.mobile tr {
margin-top: 10px;
border: 1px solid #ddd;
padding: 5px;
}
.bootstrap table.mobile td {
text-align: left;
padding: 5px;
}
.bootstrap table.mobile td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.bootstrap table.mobile td:nth-last-child(1) {
border-bottom: 0px;
}
.bootstrap table.mobile td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
/*top: 6px; */
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.bootstrap table.mobile tr:nth-of-type(odd) {
/*background: #eee;*/
background: #f4f6f9;
background: #f5f5f5;
}
.bootstrap table.mobile table.revision-history td:nth-of-type(1):before {
content: "Date";
}
.bootstrap table.mobile table.revision-history td:nth-of-type(2):before {
content: "Revised by";
}
.bootstrap table.mobile table.revision-history td:nth-of-type(3):before {
content: "Editors comments";
}
.bootstrap table.mobile table.projects td:nth-of-type(1):before {
content: "Project";
}
.bootstrap table.mobile table.projects td:nth-of-type(2):before {
content: "Date modified";
}
.bootstrap table.mobile table.projects td:nth-of-type(3):before {
content: "Share";
}
.bootstrap table.mobile table.projects td:nth-of-type(4):before {
content: "Privacy";
}
.bootstrap table.mobile table.projects td:nth-of-type(5):before {
content: "Delete";
}
.bootstrap table.mobile table.analyses td:nth-of-type(1):before {
content: "Artist";
}
.bootstrap table.mobile table.analyses td:nth-of-type(2):before {
content: "Song";
}
.bootstrap table.mobile table.analyses td:nth-of-type(3):before {
content: "Section";
}
.bootstrap table.mobile table.analyses td:nth-of-type(4):before {
content: "Date modified";
}
.bootstrap table.mobile table.analyses td:nth-of-type(5):before {
content: "Is current?";
}
.bootstrap table.mobile table.top-contributors td:nth-of-type(1):before {
content: "Rank";
}
.bootstrap table.mobile table.top-contributors td:nth-of-type(2):before {
content: "User";
}
.bootstrap table.mobile table.top-contributors td:nth-of-type(3):before {
content: "Points";
}
}
.bootstrap table.modern {
border-radius: 6px;
/* border: 1px solid $color_border; */
/*
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
*/
/*
tr:last-child {
@include border-bottom-radius($border_radius);
border: 1px solid #FF0000;
}
*/
}
.bootstrap table.modern tr {
border: 1px solid #ddd;
}
.bootstrap table.modern tr td {
border: none;
padding-right: 0;
}
.bootstrap table.modern tr th {
border: none;
padding-right: 0;
}
.bootstrap table.no-border tr {
border: none;
}
.bootstrap table.no-border tr td {
border: none;
}
.bootstrap table.no-border tr th {
border: none;
}
.bootstrap table.no-pad {
padding: 0;
}
.bootstrap table.no-pad tr {
padding: 0;
}
.bootstrap table.no-pad tr td {
padding: 0;
}
.bootstrap table.no-pad tr th {
padding: 0;
}
.bootstrap table.table-no-pad {
padding: 0;
}
.bootstrap table.table-no-pad tr {
padding: 0;
}
.bootstrap table.table-no-pad tr td {
padding: 0;
}
.bootstrap table.table-no-pad tr th {
padding: 0;
}
.bootstrap table.feature tr td.txt-left {
padding-right: 5%;
width: 75%;
vertical-align: middle;
}
.bootstrap table.feature tr td.txt-right {
padding-left: 5%;
width: 75%;
vertical-align: middle;
}
.bootstrap table.feature tr td.img {
width: 20%;
vertical-align: middle;
padding: 0;
}
.bootstrap table.quote {
font-style: italic;
margin-bottom: 20px;
}
.bootstrap table.quote tr td.icon {
font-size: 1.4em;
padding-right: 0px;
padding-left: 0px;
vertical-align: top;
}
.bootstrap table.quote tr td {
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap table.quote tr td cite {
color: #aaa;
font-size: 0.7em;
display: block;
margin-top: 5px;
}
.bootstrap table.quote tr td cite:before {
content: "— ";
}
.bootstrap table.quote.light tr td.icon {
color: #ddd;
}
.bootstrap table.quote.light tr td {
color: #fff;
}
.bootstrap table.quote.light tr td cite {
color: #ddd;
}
.bootstrap table.message tr td {
vertical-align: middle;
}
.bootstrap table.message tr td.icon {
font-size: 3em;
}
.bootstrap table.vertical-center tr td {
vertical-align: middle;
}
.bootstrap table.vertical-center tr th {
vertical-align: middle;
}
.bootstrap table.my-tabs tr {
border-bottom: 2px solid #ffffff;
/* background-color: $color_bg; */
border-bottom: 1px solid #ddd;
}
.bootstrap table.my-tabs tr td,
.bootstrap table.my-tabs tr th {
padding-top: 4px;
padding-bottom: 4px;
}
.bootstrap table.my-tabs tr td:last-child {
text-align: right;
}
.bootstrap table.my-tabs tr th:last-child {
text-align: right;
}
.bootstrap table.my-tabs tr td.date {
color: #555;
}
.bootstrap table.my-tabs tr:hover {
background: #E9E9E9; /* $highlight_color; */
}
.bootstrap table.app-nav {
width: 288px;
font-size: 12px;
line-height: 1.2em;
margin-bottom: 10px;
margin-top: 10px;
}
@media only screen and (min-width: 768px) {
.bootstrap table.app-nav {
width: 300px;
}
}
.bootstrap table.app-nav tr td,
.bootstrap table.app-nav tr th {
border: none;
}
.bootstrap table.app-nav tr td.center {
text-align: center;
}
.bootstrap table.app-nav tr td.center p.description {
font-size: 0.9em;
color: #555;
margin-top: 0.1em;
margin-bottom: 0.4em;
}
.bootstrap table.app-nav tr td {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
@media only screen and (min-width: 768px) {
.bootstrap table.app-nav tr td {
padding-left: 20px;
padding-right: 20px;
}
}
.bootstrap table.app-nav tr td.icon {
width: 60px;
padding-right: 15px;
}
.bootstrap table.app-nav tr td.text {
vertical-align: middle;
padding-left: 0px;
}
.bootstrap table.app-nav tr td.text p.description {
font-size: 0.9em;
color: #888;
margin-top: 0.1em;
margin-bottom: 0.4em;
}
.bootstrap table.app-nav tr:hover {
background: #4B9ED4;
color: #ffffff !important;
cursor: pointer;
}
.bootstrap table.app-nav tr:hover td p.description {
color: #fff;
}
.bootstrap table.app-nav tr:hover td svg path {
fill: #ffffff;
}
.bootstrap div.dropdown div.home,
.bootstrap div.dropdown div.links,
.bootstrap div.dropdown div.social,
.bootstrap div.site-meta div.home,
.bootstrap div.site-meta div.links,
.bootstrap div.site-meta div.social {
/* background: $color_bg; */
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 12px;
/* font-weight: bold; */
}
@media only screen and (min-width: 768px) {
.bootstrap div.dropdown div.home,
.bootstrap div.dropdown div.links,
.bootstrap div.dropdown div.social,
.bootstrap div.site-meta div.home,
.bootstrap div.site-meta div.links,
.bootstrap div.site-meta div.social {
padding-left: 20px;
padding-right: 20px;
}
}
.bootstrap div.dropdown div.home a,
.bootstrap div.dropdown div.links a,
.bootstrap div.dropdown div.social a,
.bootstrap div.site-meta div.home a,
.bootstrap div.site-meta div.links a,
.bootstrap div.site-meta div.social a {
color: #444;
}
.bootstrap div.dropdown div.home a:hover,
.bootstrap div.dropdown div.links a:hover,
.bootstrap div.dropdown div.social a:hover,
.bootstrap div.site-meta div.home a:hover,
.bootstrap div.site-meta div.links a:hover,
.bootstrap div.site-meta div.social a:hover {
color: #555;
}
.bootstrap div.dropdown div.home,
.bootstrap div.site-meta div.home {
/* border-bottom: 1px solid $color_border; */
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: #ffffff;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.bootstrap div.dropdown div.home,
.bootstrap div.site-meta div.home {
padding-top: 20px;
}
}
.bootstrap div.dropdown div.links,
.bootstrap div.site-meta div.links {
/* border-top: 1px solid $color_border; */
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding-bottom: 15px;
color: #444;
}
@media only screen and (min-width: 768px) {
.bootstrap div.dropdown div.links,
.bootstrap div.site-meta div.links {
padding-bottom: 20px;
}
}
.bootstrap div.dropdown div.social,
.bootstrap div.site-meta div.social {
/* border-top: 1px solid $color_border; */
padding-bottom: 4px;
}
.bootstrap div.dropdown div.links.links-secondary,
.bootstrap div.site-meta div.links.links-secondary {
color: #aaa;
}
.bootstrap div.dropdown div.links.links-secondary a,
.bootstrap div.site-meta div.links.links-secondary a {
color: #aaa;
}
.bootstrap div.dropdown div.links.links-secondary a:hover,
.bootstrap div.site-meta div.links.links-secondary a:hover {
color: #888;
}
.bootstrap table.social-buttons {
border: none;
padding: 0;
}
.bootstrap table.social-buttons tr {
border: none;
padding: 0;
/*
td:first-child {
padding-left: 0px;
}
*/
}
.bootstrap table.social-buttons tr td:first-child {
padding-right: 0px;
}
.bootstrap table.social-buttons tr td {
border: none;
width: 33%;
text-align: center;
}
.bootstrap table.author td.thumb {
width: 40px;
}
.bootstrap table.author td.thumb img {
width: 35px;
height: 35px;
}
.bootstrap table.author td {
text-align: left;
}
.bootstrap table.ellipsis {
/*
The following code confines the text of each td and th to one line and abbreviates
the text with ellipsis if it is too long for one line. The ellipsis dynamically
change as the width of the viewport changes. So awesome.
http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell
http://stackoverflow.com/questions/5932018/fluid-table-with-td-nowrap-text-overflow
*/
width: 100%;
table-layout: fixed;
}
.bootstrap table.ellipsis td,
.bootstrap table.ellipsis th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.bootstrap table.no-margin {
margin-bottom: 0px;
}
.bootstrap table.table-3-col td,
.bootstrap table.table-3-col th {
width: 33.3%;
vertical-align: top;
}
.bootstrap table.table-2-col td,
.bootstrap table.table-2-col th {
width: 50%;
vertical-align: top;
}
.bootstrap table.table-5-col td,
.bootstrap table.table-5-col th {
width: 20%;
vertical-align: top;
}
.bootstrap table.table-center th,
.bootstrap table.table-center td {
text-align: center;
}
.bootstrap table th {
font-weight: normal;
vertical-align: middle;
}
/* Had commmented out for teachermgmt */
.bootstrap ol.homepage li {
font-size: 3em;
font-weight: bold;
margin: 0 0 0 1em;
line-height: 0.3em;
}
.bootstrap ol.homepage li span {
font-size: 0.35em; /* relative to the li */
}
/* css-details.css */
/* The container containing the div.details must be position:relative
so the position:absolute on the details bubble is relative to the
container div
*/
/* See http://nicolasgallagher.com/pure-css-speech-bubbles/ for complete
implementation details
*/
.bootstrap a.details {
text-decoration: none;
position: relative;
}
.bootstrap a.details p.details {
display: none;
line-height: 1em;
text-decoration: none;
}
.bootstrap a.details:hover:after {
/* On hover, insert a downward-facing triangle below the parent
container that is centered hotizontally. The centering method uses
this cool trick: http://www.sitepoint.com/css-center-position-absolute-div/
*/
display: block;
content: "";
position: absolute;
border-style: solid;
width: 0;
top: 35px;
bottom: auto;
left: 50%;
margin-left: -10px; /* this subtracts half of the width of the triangle so it is centered */
border-width: 0 10px 10px 10px; /* vary these values to change the angle of the vertex */
border-color: #444 transparent;
}
.bootstrap p.details {
position: absolute;
z-index: 1;
top: 30px;
background-color: #444;
text-align: center;
left: 50%;
width: 100px;
margin-left: -50px;
padding: 5px;
color: white;
border-radius: 5px;
}
.bootstrap a.details:hover p.details {
display: block;
}
/* Badge configuration */
.bootstrap a.details.badge:hover:after {
top: 30px;
}
.bootstrap p.details.badge {
top: 25px;
}
/* Avatar configuration */
.bootstrap a.details.avatar:hover:after {
top: 50px;
}
.bootstrap p.details.avatar {
top: 45px;
}
/* Small icon configuration */
.bootstrap a.details.smallicon:hover:after {
top: 25px;
}
.bootstrap a.details.smallicon p.details {
top: 20px;
}
.bootstrap div.wp-excerpt {
border-top: 1px solid #DBDBDB;
padding-bottom: 30px;
padding-top: 5px;
}
.bootstrap div.wp-excerpt div.posted-on {
text-align: right;
font-size: 0.85em;
padding-bottom: 15px;
color: #888888;
}
.bootstrap div.wp-excerpt h1 {
padding-bottom: 30px;
}
.bootstrap div.wp-excerpt img {
float: left;
width: 40%;
margin-right: 20px;
}
.bootstrap div.wp-excerpt.last {
border-bottom: 0px;
}
/* credit-card.scss */
.bootstrap form.credit-card {
width: 402px;
height: 232px;
background: url("/images/credit-card/credit-card-form-bg.png") no-repeat;
background-size: 402px 232px;
}
.bootstrap form.credit-card div.content {
width: 100%;
margin: 15px;
padding-top: 80px;
color: #888888;
}
.bootstrap form.credit-card div.content div.credit-card-number {
float: left;
width: 260px;
margin-right: 20px;
}
.bootstrap form.credit-card div.content div.credit-card-cvc {
float: left;
width: 60px;
}
.bootstrap form.credit-card div.content div.credit-card-expiration {
float: left;
width: 170px;
}
.bootstrap form.credit-card div.content div.credit-card-zip {
float: left;
width: 120px;
}
/* form.scss */
.bootstrap form.inline {
float: left;
/*
button.delete{
outline: none;
padding: 0;
margin: 0;
-webkit-appearance: none;
border: none;
background-color: #FFF;
color: $color_link;
$button_radius: 25px;
-webkit-border-radius: $button_radius;
-moz-border-radius: $button_radius;
border-radius: $button_radius;
}
button.delete:hover {
cursor: pointer;
color: $color_link;
}
*/
}
.bootstrap form.inline input[type=submit] {
padding: 0;
background-color: #FFF;
border-radius: 0px;
color: #4B9ED4;
font-size: 16px;
height: 24px;
}
.bootstrap form.inline input[type=submit]:hover {
color: #2B88C4;
}
/* ************** VOTE.CSS ************* */
.bootstrap button.voteup {
width: 27px;
width: 17px;
height: 26px;
background-position: 0px;
background-position: -4px;
border: 0px outset buttonface;
padding: 0px;
margin: 0px;
}
.bootstrap button.voteup:hover {
background-position: -29px;
background-position: -44px;
cursor: pointer;
}
.bootstrap button.voteup.active {
background-position: -29px;
background-position: -44px;
cursor: default;
}
.bootstrap button.votedown {
width: 28px;
width: 17px;
height: 26px;
background-position: -87px;
background-position: -24px;
border: 0px outset buttonface;
padding: 0px;
margin: 0px;
margin-left: 5px;
}
.bootstrap button.votedown:hover {
background-position: -58px;
background-position: -64px;
cursor: pointer;
}
.bootstrap button.votedown.active {
background-position: -58px;
background-position: -64px;
cursor: default;
}
.bootstrap button.vote-login-close {
float: right;
width: 16px;
height: 16px;
background-position: 0px;
border: 0px outset buttonface;
padding: 0px;
margin: 0px;
}
.bootstrap button.vote-login-close:hover {
cursor: pointer;
}
.bootstrap div.vote-sparkbars {
height: 6px;
margin: 0px 0px;
}
.bootstrap div.vote-sparkbar-up {
background: #00CC00;
background: #444;
/* border-right: 1px solid white; */
float: left;
height: 6px;
/*background-image: linear-gradient(bottom, rgb(1,233,74) 3%, rgb(0,196,46) 42%, rgb(0,183,34) 42%, rgb(0,182,33) 54%, rgb(0,217,72) 54%, rgb(118,250,151) 100%);
background-image: -o-linear-gradient(bottom, rgb(1,233,74) 3%, rgb(0,196,46) 42%, rgb(0,183,34) 42%, rgb(0,182,33) 54%, rgb(0,217,72) 54%, rgb(118,250,151) 100%);
background-image: -moz-linear-gradient(bottom, rgb(1,233,74) 3%, rgb(0,196,46) 42%, rgb(0,183,34) 42%, rgb(0,182,33) 54%, rgb(0,217,72) 54%, rgb(118,250,151) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(1,233,74) 3%, rgb(0,196,46) 42%, rgb(0,183,34) 42%, rgb(0,182,33) 54%, rgb(0,217,72) 54%, rgb(118,250,151) 100%);
background-image: -ms-linear-gradient(bottom, rgb(1,233,74) 3%, rgb(0,196,46) 42%, rgb(0,183,34) 42%, rgb(0,182,33) 54%, rgb(0,217,72) 54%, rgb(118,250,151) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.03, rgb(1,233,74)),
color-stop(0.42, rgb(0,196,46)),
color-stop(0.42, rgb(0,183,34)),
color-stop(0.54, rgb(0,182,33)),
color-stop(0.54, rgb(0,217,72)),
color-stop(1, rgb(118,250,151))
);
*/
}
.bootstrap div.vote-sparkbar-down {
background: #A1D1F0;
float: right;
height: 6px;
margin-right: -1px;
}
.bootstrap span.vote-count {
font-size: 10px;
}
.bootstrap span.vote-info {
color: #444444;
line-height: 1em;
}
.bootstrap span.thanks {
color: #444444;
}
.bootstrap div.vote-login {
border: 1px solid #DBDBDB;
padding: 5px;
font-size: 12px;
margin-top: 5px;
}
/* Tabs
--------------------------------------- */
.bootstrap .tab {
display: inline-block;
padding: 4px 9px;
padding-top: 8px;
padding-bottom: 5px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #FFF;
background-color: rgba(0, 0, 0, 0.05);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bootstrap .tab.active {
background-color: #FFF;
}
.bootstrap div.row.row-tabs {
padding-bottom: 0;
}
.bootstrap div.row.row-tabs a.a-tab-block {
display: block;
text-align: center;
/*
padding: 4px 9px;
padding-top: 8px;
padding-bottom: 5px;
*/
padding: 7px 25px;
color: #aaa;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 1px solid #aaa;
z-index: 1;
position: relative; /* Allows z-index to work and lets it float on top of table-header */
bottom: -1px;
}
.bootstrap div.row.row-tabs a.a-tab-block:hover {
text-decoration: none;
cursor: pointer;
border-color: #666;
color: #666;
}
.bootstrap div.row.row-tabs a.a-tab-block.a-tab-active {
z-index: 3;
border-color: #333;
color: #333;
border-bottom-color: #fff;
/* Change to red bottom border */
font-weight: bold;
}
.bootstrap div.row.row-tabs-bottom-border {
border-top: 1px solid #555;
position: relative; /* Allows z-index to work and lets it float on top of table-header */
z-index: 2;
}
/* Option: look like iTunes option buttons
---------------------------------------- */
.bootstrap .option {
position: relative;
display: inline-block;
vertical-align: top;
cursor: pointer;
/* TRBL */
padding: 5px 10px 5px 10px;
font-size: 12px;
/*font-weight: bold; */
/* line-height: 13px; */
color: #666;
border-radius: 100px;
margin-right: 10px;
/* h-shadow v-shadow blur color */
text-shadow: 0 1px 2px rgb(255, 255, 255);
/* Should not be able to select text */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bootstrap .option.browse {
color: rgb(100, 100, 100);
}
.bootstrap .option.active {
background-color: rgba(0, 0, 0, 0.1);
background-image: linear-gradient(top, rgb(247, 242, 247) 31%, rgb(235, 235, 235) 66%);
background-image: -ms-linear-gradient(top, rgb(247, 242, 247) 31%, rgb(235, 235, 235) 66%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.31, rgb(247, 242, 247)), color-stop(0.66, rgb(235, 235, 235)));
background-color: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 1px -1px #000000;
/* h-shadow v-shadow blur spread color inset */
/* box-shadow: inset 0 3px 3px -3px #000000, 0 2px 1px 0px #FFFFFF;*/
}
.bootstrap .option:active {
padding-top: 6px;
padding-bottom: 4px;
color: #333;
background-color: #ccc;
background-image: none;
box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.2);
}
.bootstrap .option.browse.active {
color: #000;
}
/* list icon
------------------------- */
.bootstrap .list-icon {
height: 6px;
width: 30px;
background-color: rgb(200, 200, 200);
}
.bootstrap .list-icon:before,
.bootstrap .list-icon:after {
content: "";
position: relative;
display: block;
height: 6px;
width: 30px;
background-color: rgb(200, 200, 200);
}
.bootstrap .list-icon:before {
top: 12px; /* before by default shows up on top of */
}
.bootstrap .list-icon:after {
top: 18px; /* after by default shows up below */
}
/* :active */
.bootstrap .list-icon:active, .bootstrap .list-icon:active:before, .bootstrap .list-icon:active:after {
background-color: rgb(150, 150, 150);
}
/* :hover */
.bootstrap .list-icon:hover, .bootstrap .list-icon:hover:before, .bootstrap .list-icon:hover:after {
cursor: pointer;
}
/* hide icon
------------------------- */
/* When it is small, only certain sizes look good on non-retina displays 30px and 20 px both look nice */
/* 0.14 or 0.10 work well */
.bootstrap .hide-icon {
/* Circle */
height: 30px;
width: 30px;
background-color: rgb(200, 200, 200);
border-radius: 15px;
position: relative;
/* Should not be able to select text */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/* Background match iOS x button */
/*
background-image: linear-gradient(bottom, rgb(146,5,19) 37%, rgb(187,101,110) 100%);
background-image: -o-linear-gradient(bottom, rgb(146,5,19) 37%, rgb(187,101,110) 100%);
background-image: -moz-linear-gradient(bottom, rgb(146,5,19) 37%, rgb(187,101,110) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(146,5,19) 37%, rgb(187,101,110) 100%);
background-image: -ms-linear-gradient(bottom, rgb(146,5,19) 37%, rgb(187,101,110) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.37, rgb(146,5,19)),
color-stop(1, rgb(187,101,110))
);
*/
}
.bootstrap .hide-icon:before,
.bootstrap .hide-icon:after {
/* Rectangles */
content: "";
position: relative;
display: block;
height: 4.2px;
width: 18px;
/* Should not be able to select text */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bootstrap .hide-icon:before {
/* Move forward half of the empty space */
left: 6px;
/* Move down to center of circle */
top: 12.9px; /* +1 for small ones */
/* Rotate */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
background-color: #FFF;
}
.bootstrap .hide-icon:after {
/* Move forward half of the empty space */
left: 6px;
/* Move down to center of circle */
top: 8.7px; /* +1 for small ones */
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
background-color: #FFF;
}
/* :active */
.bootstrap .hide-icon:active {
background-color: rgb(150, 150, 150);
}
/* :hover */
.bootstrap .hide-icon:hover, .bootstrap .hide-icon:hover:before, .bootstrap .hide-icon:hover:after {
cursor: pointer;
}
/* Tab down
------------------------------------------ */
.bootstrap .tab-down {
width: 0px;
height: 0px;
border-right: 35px solid rgb(225, 225, 225);
border-top: 35px solid rgb(225, 225, 225);
border-left: 35px solid rgb(225, 225, 225);
border-top-left-radius: 35px;
border-top-right-radius: 35px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/* Create two divs with height 5px and width 16 px using the before and after selectors. Then rotate the rectangles by +45 and -45 degrees and position them so they create a downward "v" shape */
.bootstrap .tab-down:before,
.bootstrap .tab-down:after {
position: relative;
display: block;
width: 16px;
height: 5px;
background-color: #FFF;
content: "";
}
/* / */
.bootstrap .tab-down:before {
top: -15px;
left: -4px;
transform: rotate(-45deg);
}
/* \ */
.bootstrap .tab-down:after {
top: -20px;
left: -12px;
transform: rotate(45deg);
}
/* .refresh
------------------------------------------- */
.bootstrap .refresh-icon {
display: block;
width: 18px;
height: 18px;
border: 6px solid rgb(150, 150, 150);
border-right: 6px solid transparent;
border-radius: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.bootstrap .refresh-icon:after {
content: "";
left: 11px;
top: -1px;
display: block;
width: 0px;
height: 0px;
position: relative;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid rgb(150, 150, 150);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
/* :active */
.bootstrap .refresh-icon:active {
border-top-color: rgb(150, 150, 150);
border-left-color: rgb(150, 150, 150);
border-bottom-color: rgb(150, 150, 150);
}
.bootstrap .refresh-icon:active:after {
border-top-color: rgb(150, 150, 150);
}
/* :hover */
.bootstrap .refresh-icon:hover, .bootstrap .refresh-icon:hover:after {
cursor: pointer;
}
.bootstrap #ios-arrow-left {
cursor: pointer;
display: block;
position: absolute;
z-index: 0;
left: 50px;
top: 50px;
height: 30px;
width: auto;
padding: 0 10px 0 6px;
background-repeat: repeat-x;
background-size: 100% 30px;
background-position: 0;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
border-radius: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.8) inset;
font-weight: 400;
font-size: 12px;
line-height: 30px;
text-align: center;
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
}
.bootstrap #ios-arrow-left:before {
position: absolute;
content: " ";
left: -8px;
top: 3.5px;
height: 24px;
width: 24px;
z-index: 1;
background-repeat: repeat-x;
background-size: 20px 20px;
background-position: -1px -0.5px;
background-image: -webkit-gradient(linear, left bottom, right top, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.3)));
-webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
border-top-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
border-left: 1.5px solid rgba(255, 255, 255, 0.4);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) inset, -1px 1px 1px rgba(0, 0, 0, 0.5) inset;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000000), color-stop(0.4, #000000), color-stop(0.5, transparent), to(transparent));
}
.bootstrap #ios-arrow-right {
cursor: pointer;
display: block;
position: absolute;
z-index: 0;
right: 50px;
top: 50px;
height: 30px;
width: auto;
padding: 0 6px 0 10px;
background-repeat: repeat-x;
background-size: 100% 30px;
background-position: 0;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
border-radius: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.8) inset;
font-weight: 400;
font-size: 12px;
line-height: 30px;
text-align: center;
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
}
.bootstrap #ios-arrow-right:after {
position: absolute;
content: " ";
right: -7.5px;
top: 3px;
height: 24px;
width: 24px;
z-index: 1;
background-repeat: repeat-x;
background-size: 20px 20px;
background-position: -1px -0.5px;
background-image: -webkit-gradient(linear, left bottom, right top, from(rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
-webkit-transform: rotate(135deg) skew(-10deg, -10deg);
border-top-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
border-top: 1.5px solid rgba(255, 255, 255, 0.4);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset, -1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000000), color-stop(0.4, #000000), color-stop(0.5, transparent), to(transparent));
}
.bootstrap #ios-arrow-left,
.bootstrap #ios-arrow-left:before {
background-color: rgb(74, 108, 155); /*normalcolor*/
}
.bootstrap #ios-arrow-left:hover,
.bootstrap #ios-arrow-left:hover:before {
background-color: rgb(54, 88, 135); /*hovercolor*/
}
.bootstrap #ios-arrow-right,
.bootstrap #ios-arrow-right:after {
background-color: rgb(33, 33, 33); /*normalcolor*/
}
.bootstrap #ios-arrow-right:hover,
.bootstrap #ios-arrow-right:hover:after {
background-color: rgb(0, 0, 0); /*hovercolor*/
}
.bootstrap .fb-like {
/*
position: relative;
top: -3px;
*/
}
.bootstrap .addthis_counter_style a {
padding-right: 10px !important;
}
.bootstrap .addthis_counter_style a.last {
padding-right: 0px !important;
}
.bootstrap .youtube-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
max-width: 100%;
/*
Notes on why this works: 100/56.25 = 16/9 (see 100% below)
The padding-top adds extra height for the YouTube control at the bottom
*/
}
.bootstrap .youtube-container iframe,
.bootstrap .youtube-container object,
.bootstrap .youtube-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* .youtube-thumbnail
--------------------------------------- */
.bootstrap div.youtube-thumbnail {
/*
Use the default.jpg version of the image from YouTube. It is 120px x 90px so
we need to keep that aspect ratio
*/
height: 60px;
width: 60px;
overflow: hidden;
background-color: #EDEDED;
}
.bootstrap div.youtube-thumbnail img {
width: 120px;
height: 90px;
/* General */
position: relative;
top: -15px;
left: -30px;
}
.bootstrap div.youtube-thumbnail.small2 {
/*
Use the default.jpg version of the image from YouTube. It is 120px x 90px so
we need to keep that aspect ratio
*/
height: 90px;
width: 90px;
overflow: hidden;
}
.bootstrap div.youtube-thumbnail.small2 img {
width: 192px;
height: 108px;
/* General */
position: relative;
top: -9px;
left: -51px;
}
.bootstrap div.youtube-thumbnail.medium {
/*
Use the default.jpg version of the image from YouTube. It is 120px x 90px so
we need to keep that aspect ratio
*/
height: 120px;
width: 120px;
overflow: hidden;
}
.bootstrap div.youtube-thumbnail.medium img {
width: 192px;
height: 108px;
/* General */
position: relative;
top: 6px;
left: -36px;
}
.bootstrap div.youtube-thumbnail.border {
border: 1px solid #ddd;
}
.bootstrap div.youtube-thumbnail.circle {
border-radius: 30px;
}
.bootstrap div.youtube-thumbnail.small2.circle {
border-radius: 45px;
}
.bootstrap div.youtube-thumbnail.medium.circle {
border-radius: 60px;
}
.bootstrap div.youtube-thumbnail.collection-preview-tl {
border-top-left-radius: 6px;
}
.bootstrap div.youtube-thumbnail.collection-preview-tr {
border-top-right-radius: 6px;
}
.bootstrap div.theorytab-youtube > div.theorytab-youtube-iframe {
margin-left: 0%;
width: 100%;
margin-top: 0px;
}
/* style */
/* */
.bootstrap .suggestions {
position: absolute;
/* overflow-y: auto; */
z-index: 9;
-webkit-overflow-scrolling: touch;
/* padding: 10px; */
display: none; /* use jQuery.show() to */
/*
2015 style needed this
padding: 10px;
padding-bottom: 0px;
*/
border: 1px solid #ddd;
box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.2);
background: #FFFFFF;
border-radius: 6px;
/* z-index was 3, however the Discourse forum used z-index of 1000 for their header
and I want to be on top of that In trends, the key selector is on index 2 */
z-index: 1001;
padding: 10px;
}
.bootstrap span.deleteicon {
position: relative;
line-height: 16px;
}
.bootstrap span.deleteicon i {
position: absolute;
display: block;
top: 0px;
right: 10px;
width: 16px;
height: 16px;
cursor: pointer;
color: #BBBBBB;
}
.bootstrap .fa.link:hover {
cursor: pointer;
color: #222222;
}
/* */
.bootstrap .fa.link:active {
color: #000000;
}
.bootstrap .fa.li {
font-size: 1.3em;
}
.bootstrap .fa.li-big {
font-size: 1.5em;
}
.bootstrap .difficulty-empty {
color: #FFFFFF;
}
.bootstrap .fa.header {
color: #999;
}
/* hide.scss */
.bootstrap div.hide {
position: relative; /* so we can position the close with absolute */
}
.bootstrap div.hide a.close {
position: absolute;
top: 2px;
right: 6px;
top: 0px;
font-size: 22px;
}
.bootstrap div.hide a.close:hover {
cursor: pointer;
}
/*
class to add to something you only want to show for specific media queries. I have
noticed some weirdness with block vs. inline vs inline-block having to do with padding
and such. Just to keep in mind
*/
.bootstrap .show-m {
/* mobile only */
display: none;
}
@media only screen and (max-width: 767px) {
.bootstrap .show-m {
display: block;
}
}
.bootstrap .show-mt {
/* mobile and tablet only */
display: none;
}
@media only screen and (max-width: 991px) {
.bootstrap .show-mt {
display: inline-block;
}
}
.bootstrap .show-t {
/* tablet only */
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bootstrap .show-t {
display: block;
}
}
.bootstrap .show-tl {
display: none;
}
@media only screen and (min-width: 768px) {
.bootstrap .show-tl {
display: block;
}
}
.bootstrap .show-tl-inline {
display: none;
}
@media only screen and (min-width: 768px) {
.bootstrap .show-tl-inline {
display: inline;
}
}
.bootstrap .show-l {
/* laptop only */
display: none;
}
@media only screen and (min-width: 992px) {
.bootstrap .show-l {
display: block;
}
}
.bootstrap .show-l-inline {
/* laptop only */
display: none;
}
@media only screen and (min-width: 992px) {
.bootstrap .show-l-inline {
display: inline;
}
}
/* style */
/* */
.bootstrap .ad {
padding: 15px;
/* border: 1px solid $color_border; */
border-radius: 6px;
background: #E9E9E9;
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap .ad {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .ad.pad {
padding: 15px;
padding-top: 30px;
padding-bottom: 30px;
}
}
.bootstrap .ad.bottom-bleed {
padding-bottom: 0px;
}
.bootstrap div.reveal div.content {
display: none;
width: auto;
}
.bootstrap div.reveal span.show {
display: inline;
}
.bootstrap div.reveal span.hide {
display: none;
}
.bootstrap div.reveal span.show:after {
content: "Show answer";
}
.bootstrap div.reveal span.hide:after {
content: "Hide";
}
.bootstrap div.reveal span {
color: #4B9ED4;
}
.bootstrap div.reveal span:hover {
color: #2B88C4;
cursor: pointer;
}
.bootstrap div.reveal.show div.content {
display: block;
}
.bootstrap div.reveal.show span.show {
display: none;
}
.bootstrap div.reveal.show span.hide {
display: inline;
}
/* Browser defaults are shown. Can scale up with ratio */
.bootstrap i.i-lg {
font-size: 3em;
}
.bootstrap ol.ol-nested {
list-style-type: none;
counter-reset: item;
color: #aaa;
}
.bootstrap ol.ol-nested li {
display: block;
}
.bootstrap ol.ol-nested li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
.bootstrap ol.ol-nested.ol-nested-left {
padding-left: 0px;
}
/* "mse" is short for "my songs entry" */
.bootstrap .toggle {
color: #007fcb;
}
.bootstrap .toggle:hover {
cursor: pointer;
text-decoration: underline;
}
.bootstrap .answer {
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
background-color: #E1FADD;
color: #5E0E59;
border: 1px solid #A5D69E;
border-radius: 6px;
}
.bootstrap .social-love-subscribe {
float: left;
width: 100%;
}
.bootstrap .social-love-spread {
float: left;
width: 100%;
padding-top: 15px;
}
@media only screen and (min-width: 768px) {
.bootstrap .social-love-subscribe {
float: left;
width: 50%;
}
.bootstrap .social-love-spread {
padding-top: 0px;
float: left;
width: 49%;
/*border-left:1px solid #DBDBDB;*/
}
}
.bootstrap .jbar {
height: 50px;
width: 100%;
position: fixed;
text-align: center;
left: 0px;
z-index: 9999999;
margin: 0px;
padding: 0px;
}
.bootstrap .jbar-top {
top: 0px;
}
.bootstrap .jbar-bottom {
bottom: 0px;
}
.bootstrap .jbar-content {
line-height: 46px;
font-size: 18px;
}
.bootstrap a.jbar-cross {
position: absolute;
width: 31px;
height: 31px;
background: transparent url(../images/cross.png) no-repeat top left;
cursor: pointer;
right: 10px;
}
.bootstrap a.jbar-cross:hover {
background-image: url(../images/cross_hover.png);
}
.bootstrap .jbar-top a.jbar-cross {
top: 8px;
}
.bootstrap .jbar-bottom a.jbar-cross {
bottom: 8px;
}
.bootstrap .notification {
background-color: rgba(0, 0, 0, 0.8);
color: #DDD;
}
.bootstrap .show-hide-toggle:hover {
cursor: pointer;
text-decoration: underline;
}
.bootstrap .show-hide-toggle {
color: #007fcb;
}
/* style */
/* */
.bootstrap #fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
z-index: 1104;
display: none;
}
.bootstrap #fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background-image: url(fancybox/fancybox.png?v=u27ji1f);
}
.bootstrap #fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
display: none;
}
.bootstrap #fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
.bootstrap #fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 1101;
outline: none;
display: none;
}
.bootstrap #fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.bootstrap #fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 1102;
border: 0px solid #fff;
}
.bootstrap #fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1101;
}
.bootstrap #fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent image-url("fancybox/fancybox.png") -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
.bootstrap #fancybox-error {
color: #444;
font: normal 12px/20px Arial;
padding: 14px;
margin: 0;
}
.bootstrap #fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
}
.bootstrap #fancybox-frame {
width: 100%;
height: 100%;
border: none;
display: block;
}
.bootstrap #fancybox-left, .bootstrap #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent image-url("fancybox/blank.gif");
z-index: 1102;
display: none;
}
.bootstrap #fancybox-left {
left: 0px;
}
.bootstrap #fancybox-right {
right: 0px;
}
.bootstrap #fancybox-left-ico, .bootstrap #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}
.bootstrap #fancybox-left-ico {
background-image: url(fancybox/fancybox.png?v=u27ji1o);
background-position: -40px -30px;
}
.bootstrap #fancybox-right-ico {
background-image: url(fancybox/fancybox.png?v=u27ji2o);
background-position: -40px -60px;
}
.bootstrap #fancybox-left:hover, .bootstrap #fancybox-right:hover {
visibility: visible; /* IE6 */
}
.bootstrap #fancybox-left:hover span {
left: 20px;
}
.bootstrap #fancybox-right:hover span {
left: auto;
right: 20px;
}
.bootstrap .fancybox-bg {
position: absolute;
padding: 0;
margin: 0;
border: 0;
width: 20px;
height: 20px;
z-index: 1001;
}
/* IE6 */
.bootstrap .fancybox-ie6 #fancybox-close {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_close.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-left-ico {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_nav_left.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-right-ico {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_nav_right.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-title-over {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_title_over.png", sizingMethod="scale");
zoom: 1;
}
.bootstrap .fancybox-ie6 #fancybox-title-float-left {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_title_left.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-title-float-main {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_title_main.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-title-float-right {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_title_right.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie6 #fancybox-bg-w, .bootstrap .fancybox-ie6 #fancybox-bg-e, .bootstrap .fancybox-ie6 #fancybox-left, .bootstrap .fancybox-ie6 #fancybox-right, .bootstrap #fancybox-hide-sel-frame {
height: expression(this.parentNode.clientHeight + "px");
}
.bootstrap #fancybox-loading.fancybox-ie6 {
position: absolute;
margin-top: 0;
top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + "px");
}
.bootstrap #fancybox-loading.fancybox-ie6 div {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_loading.png", sizingMethod="scale");
}
/* IE6, IE7, IE8 */
.bootstrap .fancybox-ie .fancybox-bg {
background: transparent !important;
}
.bootstrap .fancybox-ie #fancybox-bg-n {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_n.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-ne {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_ne.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-e {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_e.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-se {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_se.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-s {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_s.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-sw {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_sw.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-w {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_w.png", sizingMethod="scale");
}
.bootstrap .fancybox-ie #fancybox-bg-nw {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fancybox/fancy_shadow_nw.png", sizingMethod="scale");
}
.bootstrap .collection-overlay {
display: none; /* use jQuery.show() to */
position: absolute;
-webkit-overflow-scrolling: touch;
}
.bootstrap .collection-overlay input[type=checkbox] {
float: left;
margin-right: 10px;
}
.bootstrap .collection-overlay label {
float: left;
}
.bootstrap .collection-overlay .my {
padding: 15px;
padding-bottom: 0px;
}
.bootstrap table.collections {
background: #FFFFFF;
border: none;
line-height: 1em;
margin: 0px;
padding: 0px;
/*
tr {
td.checkbox:after {
content: "<i class='fa fa-square-o'></i>";
}
}
tr.checked {
td.checkbox:after {
content: '<i class="fa fa-check-square-o"></i>';
}
}
tr.busy {
td.checkbox:after {
content: '<i class="fa fa-spinner"></i>';
}
}
*/
}
.bootstrap table.collections tr {
border: none;
padding: 0px;
background: #FFFFFF;
color: #555555;
border: none;
padding-left: 15px;
padding-right: 15px;
}
.bootstrap table.collections tr td {
padding: 0px;
border: none;
padding: 3px;
color: #444;
}
.bootstrap table.collections tr td a {
color: #444;
}
.bootstrap table.collections tr td.input {
width: 25px;
}
.bootstrap table.collections tr td:first-child {
padding-left: 15px;
}
.bootstrap table.collections tr td:last-child {
padding-right: 15px;
}
.bootstrap table.collections tr:hover {
background: #4B9ED4;
cursor: pointer;
}
.bootstrap table.collections tr:hover td {
color: #fff;
}
.bootstrap input.collection {
height: 30px;
margin-top: 15px;
padding-left: 10px;
padding-right: 10px;
border-radius: 15px;
}
.bootstrap div.new-collection-form {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.bootstrap div.new-collection-form input[type=text] {
width: 100%;
float: left;
}
.bootstrap div.new-collection-form input[type=submit] {
width: 0%;
float: left;
display: none;
}
.bootstrap div.new-collection-form.focus input[type=text] {
width: 72%;
margin-right: 3%;
}
.bootstrap div.new-collection-form.focus input[type=submit] {
width: 25%;
display: inline;
}
/* style */
/* */
.bootstrap div.collection-preview-container {
border-radius: 6px;
/* border: 1px solid $collection_border_color; */
/*
width: 276px;
height: 260px;
*/
line-height: 1.3em;
background: #ddd;
}
.bootstrap div.collection-preview-container table {
background: none;
border: none;
padding: 0px;
margin: 0px;
font-size: 16px;
}
.bootstrap div.collection-preview-container table tr {
border: none;
background: none;
}
.bootstrap div.collection-preview-container table td.name {
/* width: 235px; */
color: #444 !important;
}
.bootstrap div.collection-preview-container table td {
border: none;
background: none;
vertical-align: middle;
padding: 0px;
}
.bootstrap div.collection-preview-container div.collection-footer {
padding: 15px;
border: 1px solid #ffffff;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.bootstrap div.collection-preview-container:hover {
box-shadow: 0px 5px 6px 0px #BBBBBB;
}
.bootstrap div.collection-preview-container.new {
/* Make a fixed scaleable div */
width: 100%;
padding-bottom: 68.75%; /* 16:9 */
position: relative;
background-color: #EDEDED;
font-size: 22px;
}
.bootstrap div.collection-preview-container.new div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 24px;
text-align: center;
overflow: hidden;
/* This is important since absolutely positioned elements are taken ouf of the
natural flow and have zero height */
height: 100%;
}
.bootstrap div.collection-preview-container.new div table {
height: 100%;
}
.bootstrap div.scalable-mask {
/*
There is a stack overflow article that discusses how to create a div that scales with
a fixed aspect ratio. At the time of writing this, I still don't quite understand
how it works.
http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div/10441480#10441480
*/
width: 100%;
padding-bottom: 100%; /* 16:9 */
/* padding-bottom: 30%; */ /* 1:1 */
position: relative;
/* background: blue; */
}
.bootstrap div.scalable-mask div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
overflow: hidden;
/* This is important since absolutely positioned elements are taken ouf of the
natural flow and have zero height */
height: 100%;
}
.bootstrap div.scalable-mask div img,
.bootstrap div.scalable-mask div iframe {
width: 177.7777777778%;
max-width: none;
/*
There is some tricky scaling stuff here. The image width will be 100% times
the scale factor. The L/R positioning is easy since you just want to split the
difference between the over/under scale on each side. Vertical is harder since
you need to consider the aspect ratio of the mask and the aspect ratio of the
image. We need to ask: if the width of the mask changes by d_width, how much
does the height of the mask and the height of the image change?
d_mask_height = d_width * aspect_ratio
d_img_height = d_width * $scale * aspect_ratio_img
The ratio of the change in img height vs. the change in mask height for a small
change in the width of the mask is given by:
delta_img_height/delta_mask_height = $scale * aspect_ratio_img/aspect_ratio
Half of this change must be absorbed on the top and half of the change needs to
be absorbed on the bottom
*/
position: relative;
top: 0%;
left: -38.8888888889%;
}
/* Customization for collection-preview */
.bootstrap div.scalable-mask div.collection-preview {
background-color: #EDEDED;
border: 1px solid #FFFFFF;
}
.bootstrap div.scalable-mask.round div {
border-radius: 6px;
}
.bootstrap div.scalable-mask.round-tl div {
border-top-left-radius: 6px;
}
.bootstrap div.scalable-mask.round-tr div {
border-top-right-radius: 6px;
}
.bootstrap div.scalable-mask.round-br div {
border-bottom-right-radius: 6px;
}
.bootstrap div.scalable-mask.round-bl div {
border-bottom-left-radius: 6px;
}
.bootstrap ul.feature {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px;
}
.bootstrap ul.feature li {
display: inline-block;
}
.bootstrap ul.feature li.img {
width: 100%;
}
.bootstrap ul.feature li.img.left {
margin-bottom: 20px;
}
.bootstrap ul.feature li.copy {
width: 100%;
vertical-align: middle;
}
.bootstrap ul.feature li.copy h1, .bootstrap ul.feature li.copy h2 {
padding: 0px;
margin: 0px;
line-height: 1.1em;
}
.bootstrap ul.feature li.copy h1.sub, .bootstrap ul.feature li.copy h2.sub {
color: #777;
}
.bootstrap ul.feature li.copy h1 span.sub {
color: #777;
}
.bootstrap ul.feature li.copy p {
font-size: 1.2em;
}
@media only screen and (min-width: 768px) {
.bootstrap ul.feature {
margin-bottom: 30px;
}
.bootstrap ul.feature li.img {
width: 30%;
}
.bootstrap ul.feature li.img.left {
margin-right: 9%;
}
.bootstrap ul.feature li.img.right {
margin-left: 9%;
}
.bootstrap ul.feature li.copy {
width: 60%;
}
}
/* style */
/* */
/* card.scss */
.bootstrap .card {
border-radius: 4px;
padding: 15px;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
color: #333;
/*
h1:first-child, h2:first-child, h3:first-child {
margin-top: 0;
padding-top: 0;
margin-bottom: 5px;
}
*/
margin-bottom: 10px;
/* border: 1px solid $color_border; */
}
.bootstrap .card-bleed.card-bleed-last {
margin-bottom: 0px;
}
/* card-bleed
----------------------------------------------------------------------------------------*/
.bootstrap .card-bleed {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
margin-bottom: 15px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
background: #fff;
/*
h1, h2, h3, h4, h5, h6 {
color: #333;
}
p {
color: #333;
}
*/
}
.bootstrap .card-bleed .top {
padding: 1em;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
/* background: #999; */
}
.bootstrap .card-bleed .top.top-bg {
color: #fff;
background: #0F5277;
}
.bootstrap .card-bleed .top.top-a a {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.bootstrap .card-bleed .bleed-border {
padding: 1px;
margin: 2px;
padding: 0px;
margin-bottom: 3px;
}
.bootstrap .card-bleed .body-border-bottom {
border-bottom: 1px solid #ddd;
}
@media only screen and (min-width: 768px) {
.bootstrap .card-bleed {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .card-bleed {
margin-bottom: 25px;
}
}
.bootstrap .card-bleed .bleed-border {
margin: 2px;
padding: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap .card-bleed.tight .top, .bootstrap .card-bleed.tight .bottom, .bootstrap .card-bleed.tight .author, .bootstrap .card-bleed.tight .body, .bootstrap .card-bleed.tight .footer {
padding: 15px;
}
}
.bootstrap .card-bleed.videos {
background: #fff;
/* border: 1px solid #ccc */
}
.bootstrap .card-app {
background: #fff;
}
.bootstrap .body-white {
background: #fff;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.bootstrap a.card-bleed {
color: inherit;
}
.bootstrap a.card-bleed:hover {
color: inherit;
}
.bootstrap a.card-bleed:hover .card-bleed {
background: #f5f5f5;
background: #DDDDDD;
}
.bootstrap .card-article {
border-bottom: 1px solid #ddd;
padding: 20px;
}
.bootstrap .card-article-last {
border-bottom: none;
}
.bootstrap .card-bg-default {
background: #E9E9E9;
}
.bootstrap .card-bg-default-2 {
background: #DDDDDD;
}
.bootstrap .card-top-bg {
background-image: url(/images/bg/bg-studio-ipad-6.jpg?v=u27ji2r);
background-size: 100%;
background-position: center top;
background-repeat: no-repeat;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
/*padding-bottom: 130px;*/
/* This makes the text appear at the bottom */
/*
padding-bottom: 190px;
padding-bottom: 120px;
*/
/*position: relative;
div {
position: absolute;
bottom: 0; left: 0;
}
*/
height: 150px;
position: relative;
}
.bootstrap .card-top-bg.card-top-bg-book {
/*padding-bottom: 110px;*/
background-position: center center;
background-image: url(/images/bg/bg-studio-ipad-6.jpg?v=u27ji36);
}
.bootstrap .card-top-bg.card-top-bg-hookpad {
/*padding-bottom: 160px;
padding-bottom: 100px;
*/
background-position: center bottom;
background-image: url(/images/bg/hookpad-promo-dark.jpg?v=u27ji3b);
}
.bootstrap .card-top-bg.card-top-bg-theorytab {
/*padding-bottom: 200px;
padding-bottom: 100px;
*/
background-image: url(/images/bg/theorytab-progressions.jpg?v=u27ji40);
}
.bootstrap .bg-default-dark {
background: #999;
color: #fff;
}
.bootstrap .card-bleed.card-progression {
/*
.progression {
background: #777;
}
*/
}
.bootstrap .card-bleed.card-progression .list {
/*
background: #444;
color: #ccc;
a,
a:hover {
.span-song {
color: #999;
}
.span-artist {
color: #666;
}
}
*/
}
.bootstrap .book {
font-family: "Georgia";
/*
img {
padding-top: 20px;
padding-bottom: 20px;
}
*/
}
.bootstrap .book h1, .bootstrap .book h2, .bootstrap .book h3, .bootstrap .book h4, .bootstrap .book h5, .bootstrap .book h6 {
font-family: "Helvetica Neue", sans-serif;
font-weight: bold;
}
.bootstrap .book .btn {
font-family: "Helvetica Neue", sans-serif;
}
.bootstrap .book.no-img-pad img {
padding: 0;
}
.bootstrap div.books-video-container {
position: relative;
margin-top: -410px;
height: 300px;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.bootstrap div.books-video-container {
margin-top: -60px;
}
}
.bootstrap div.bg-books-img-overlay {
position: relative;
top: 0;
left: 0;
width: 350px;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.bootstrap div.bg-books-img-overlay {
top: 0px;
left: 0px;
}
}
.bootstrap div.bg-books-img-video-inlay {
position: absolute;
top: 49px;
left: 47px;
width: 287px;
z-index: 2;
}
.bootstrap div.books-img-video-colcontainer {
position: absolute;
top: 0px;
left: 95px;
}
@media only screen and (max-width: 992px) {
.bootstrap div.books-img-video-colcontainer {
position: relative;
top: -25px;
left: 290px;
}
}
@media only screen and (max-width: 768px) {
.bootstrap div.books-img-video-colcontainer {
position: relative;
top: 30px;
left: 0px;
}
}
.bootstrap div.hero-pad {
padding: 20px;
}
@media only screen and (max-width: 768px) {
.bootstrap div.hero-pad {
padding: 0px;
}
}
/* Div Tables - needed for the ngDraggable directive because it does not work
on a real <tr> element, but I need to style things to they look and behave like a
table / tr / td */
.bootstrap .div-tr {
cursor: pointer;
}
.bootstrap .div-tr .div-td,
.bootstrap .div-tr .div-th {
float: left;
padding: 8px;
}
.bootstrap .div-tr .div-th {
line-height: 30px;
}
.bootstrap .div-tr.div-tr-odd {
background: #f9f9f9;
}
.bootstrap .div-tr.div-tr-active {
background: #4B9ED4;
color: #fff;
}
.bootstrap .div-tr.div-tr-active-unfocused {
background: #82B8DB;
color: #fff;
}
.bootstrap .div-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.bootstrap .template {
cursor: pointer;
}
.bootstrap .template img {
border: 2px solid #ddd;
}
.bootstrap .template.template-active img {
border: 2px solid #4B9ED4;
}
/*
Full-page Angular modules with fixed header at the top. Keep in mind that the dropdown
from the main menu has a height of about 700 px so if the viewport is shorter, there
is white space below the content area to fill out that height
*/
.bootstrap .angular-fixed-header {
position: absolute;
left: 0;
right: 0;
height: 49px;
}
.bootstrap .angular-fixed-content {
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
height: auto;
overflow-y: auto;
width: 100%;
}
/* style */
/* */
.bootstrap .row.row-v-pad,
.bootstrap .wrap.wrap-v-pad,
.bootstrap .container.container-v-pad {
padding-top: 20px;
padding-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .row.row-v-pad,
.bootstrap .wrap.wrap-v-pad,
.bootstrap .container.container-v-pad {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .row.row-v-pad,
.bootstrap .wrap.wrap-v-pad,
.bootstrap .container.container-v-pad {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .row.row-v-pad,
.bootstrap .wrap.wrap-v-pad,
.bootstrap .container.container-v-pad {
padding-top: 40px;
padding-bottom: 40px;
}
}
.bootstrap .v-pad-wrap,
.bootstrap .row.row-v-pad-wrap {
padding-top: 60px;
padding-bottom: 60px;
}
@media only screen and (min-width: 768px) {
.bootstrap .v-pad-wrap,
.bootstrap .row.row-v-pad-wrap {
padding-top: 70px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .v-pad-wrap,
.bootstrap .row.row-v-pad-wrap {
padding-top: 70px;
padding-bottom: 70px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .v-pad-wrap,
.bootstrap .row.row-v-pad-wrap {
padding-top: 70px;
padding-bottom: 70px;
}
}
.bootstrap .row.row-v-pad-card,
.bootstrap .wrap.wrap-v-pad-card,
.bootstrap .container.container-v-pad-card {
padding-top: 20px;
padding-bottom: 20px;
}
.bootstrap .row.row-v-pad.row-v-pad-tight-top,
.bootstrap .wrap.wrap-v-pad.wrap-v-pad-tight-top,
.bootstrap .container.container-v-pad.padding-top-0 {
padding-top: 0px;
}
.bootstrap .row.row-v-pad.row-v-pad-tight-bottom,
.bootstrap .wrap.wrap-v-pad.wrap-v-pad-tight-bottom,
.bootstrap .container.container-v-pad.padding-bottom-0 {
padding-bottom: 0px;
}
/* style */
/* */
/* modal
----------------------------------------------------------------------------------------*/
.bootstrap .gradient-osx-header, .modal-abs-header-body .modal-content .modal-header, .modal-persistent .modal-header {
background: #ebe9eb; /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #ebe9eb 0%, #d7d5d7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ebe9eb", endColorstr="#d7d5d7",GradientType=0 ); /* IE6-9 */
}
/*
.modal.fade .modal-dialog, .modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
*/
/*
.modal.loading {
opacity: 0.5;
background-color: #000 !important;
}
*/
.modal-content {
border: 0px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
/* @extend .overlay; */
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: none;
}
/*
.modal-dialog {
width: 500px;
}
*/
.modal-header {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
}
.modal-footer {
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: none;
}
.modal-bg-1 {
background-color: #d5d5d5;
}
.modal-body-form {
background-color: #eaeaea;
}
.modal-body-form-no-footer {
background-color: #eaeaea;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.modal-body {
padding: 35px;
}
.modal-body-lg-pad {
padding: 35px;
}
.modal-body.modal-body-no-pad {
padding: 0px;
}
.modal-top .modal-dialog {
margin-top: 0px;
}
.modal-400 .modal-dialog {
width: 400px;
}
.bootstrap .modal.modal-default .modal-dialog .modal-content .modal-header {
background: #d5d5d5;
}
.bootstrap .modal.modal-default .modal-dialog .modal-content .modal-body {
padding: 20px;
}
.bootstrap .modal.modal-default .modal-dialog .modal-content .modal-body.no-pad {
padding: 0px;
}
.modal-abs-header-footer .modal-dialog, .modal-abs-header-footer-top .modal-dialog, .modal-abs-header-footer-wide .modal-dialog {
position: absolute !important;
bottom: 0px;
left: 0px;
right: 0px;
width: auto !important;
height: auto;
margin: 0px !important;
display: flex;
justify-content: center;
}
.modal-abs-header-footer .modal-content, .modal-abs-header-footer-top .modal-content, .modal-abs-header-footer-wide .modal-content {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex;
flex-direction: column;
width: 650px;
}
.modal-abs-header-footer .modal-content .modal-header, .modal-abs-header-footer-top .modal-content .modal-header, .modal-abs-header-footer-wide .modal-content .modal-header {
padding: 10px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: #d5d5d5;
border: none;
}
.modal-abs-header-footer .modal-content .modal-header h3.modal-title, .modal-abs-header-footer-top .modal-content .modal-header h3.modal-title, .modal-abs-header-footer-wide .modal-content .modal-header h3.modal-title {
line-height: 30px;
}
.modal-abs-header-footer .modal-content .modal-header-dark, .modal-abs-header-footer-top .modal-content .modal-header-dark, .modal-abs-header-footer-wide .modal-content .modal-header-dark {
background: #6a6a6a;
}
.modal-abs-header-footer .modal-content .modal-body, .modal-abs-header-footer-top .modal-content .modal-body, .modal-abs-header-footer-wide .modal-content .modal-body {
height: calc(90vh - 130px);
overflow-y: auto;
background: #fff;
padding: 30px;
border: none;
}
.modal-abs-header-footer .modal-content .modal-footer, .modal-abs-header-footer-top .modal-content .modal-footer, .modal-abs-header-footer-wide .modal-content .modal-footer {
padding: 10px;
background: #d5d5d5;
border: none;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.modal-abs-header-footer .modal-content .modal-footer-dark, .modal-abs-header-footer-top .modal-content .modal-footer-dark, .modal-abs-header-footer-wide .modal-content .modal-footer-dark {
background: #6a6a6a;
}
.modal-abs-header-footer-wide .modal-content {
width: 95% !important;
}
.modal-abs-body-footer-top .modal-dialog, .modal-abs-body-footer-top-interrupt .modal-dialog {
position: absolute !important;
top: 0px;
left: 0px;
right: 0px;
width: auto !important;
margin: 0px !important;
height: auto;
display: flex;
justify-content: center;
}
.modal-abs-body-footer-top .modal-content, .modal-abs-body-footer-top-interrupt .modal-content {
display: flex;
flex-direction: column;
width: 650px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.modal-abs-body-footer-top .modal-content .modal-body, .modal-abs-body-footer-top-interrupt .modal-content .modal-body {
height: calc(90hv - 65px);
overflow-y: auto;
background: #eaeaea;
padding: 30px;
border: none;
}
.modal-abs-body-footer-top .modal-content .modal-footer, .modal-abs-body-footer-top-interrupt .modal-content .modal-footer {
padding: 10px;
background: #d5d5d5;
border: none;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.modal-abs-body-footer-top-interrupt .modal-content {
width: 400px;
}
.modal-abs-body-footer-top-interrupt .modal-content .modal-body {
height: calc(30hv - 65px);
}
.modal-abs-header-body .modal-dialog {
position: absolute !important;
bottom: 0px;
left: 0px;
right: 0px;
width: auto !important;
margin: 0px !important;
height: auto;
display: flex;
justify-content: center;
}
.modal-abs-header-body .modal-content {
/* Somehow this combination gets it centered horizontally */
width: 750px !important;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 1px solid #ddd !important;
display: flex;
flex-direction: column;
}
.modal-abs-header-body .modal-content .modal-header {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
/*border-bottom: 0px !important;
background: $color_abs_modal_header;
*/
border: none;
padding: 10px;
border-bottom: 1px solid #bbb;
}
.modal-abs-header-body .modal-content .modal-header-dark {
background: #6a6a6a;
}
.modal-abs-header-body .modal-content .modal-body {
height: calc(80hv - 65px);
overflow-y: auto;
background: #fff;
padding: 30px;
border: none;
}
.modal-abs-header-footer-top .modal-content {
top: 0px !important;
height: 400px !important;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.modal-abs-header-footer-top .modal-content .modal-header {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.modal-abs-header-footer-top .modal-content .modal-footer {
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.modal-abs-header-footer-sm-centered {
/*
.modal.fade:not(.in) .modal-dialog {
-webkit-transform: translate3d(0, 125%, 0);
transform: translate3d(0, 125%, 0);
}
*/
}
.modal-abs-header-footer-sm-centered .modal-dialog {
position: absolute !important;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto !important;
margin: 0px !important;
}
.modal-abs-header-footer-sm-centered .modal-content {
position: absolute !important;
/*
left: 50px !important;
right: 50px !important;
width: auto !important;
*/
/*
*/
/* Somehow this combination gets it centered horizontally */
width: 300px !important;
height: 275px !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
border-radius: 8px;
}
.modal-abs-header-footer-sm-centered .modal-content .modal-header {
position: absolute !important;
top: 0px !important;
left: 0px !important;
right: 0px !important;
height: 65px;
width: auto !important;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 0px !important;
background: #d5d5d5;
border: none;
}
.modal-abs-header-footer-sm-centered .modal-content .modal-body {
position: absolute;
top: 65px;
bottom: 65px;
left: 0px;
right: 0px;
overflow-y: auto;
background: #fff;
padding: 30px;
border: none;
}
.modal-abs-header-footer-sm-centered .modal-content .modal-body.nopad {
padding: 0px;
}
.modal-abs-header-footer-sm-centered .modal-content .modal-footer {
position: absolute;
height: 65px;
bottom: 0px;
left: 0px;
right: 0px;
background: #d5d5d5;
border: none;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.bootstrap .modal.slide-up .modal-dialog {
/*
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
*/
/*
This says that the .modal-dialog inside of .modal.slide-in-up should be translated
100% of its height down in the y direction. If the bottom of the modal is on the
bottom of the viewport, this translation causes the entire modal to be just hidden
off of the screen. If this property (the transform property) was never modified,
you would never be able to see the modal
*/
transform: translate(0, 100%);
/*
What does the transition property do (it is used below)?
It monitors for changes to a CSS property of an element (width, color, etc.)
and when that property changes, the transition listener stops the visual update
of the element from being instantaneous. Instead, the visual update transitions
smoothly between the old property value to the new one over a specified duration.
An easing function can also be specified when something other than a linear ramp
of the property value is desired
Example 1 - color:
div {
color: #000;
transition: color 1s;
}
div:hover {
color: #555;
}
The transition is listening to the "color" property.
The "color" property somehow changes on hover (:hover {color: #new}).
The viewer won't see the color instantaneously change from the old one to the new one.
Instead, the viewer sees the color transition from the old value to the new value
over a specified duration with a specified transition function.
Example 2 - transform:
Here (the modal example) the transition is told to watch the "transform" property
of this element. When the "transform" property changes, it says "don't do the change to the new value immediately, tween
it over 0.3s with the easing function "ease-out".
So when does the "transform" property of the element change? The ui-modal
applies the "in" class to the top-level ".modal" element whenever you want to show
it. The CSS block below (.modal.side-in-up.in) modifies the "transform"
property of the .modal-dialog to a value of "translate(0, 0, 0)" which is the elemetns
default position.
The transition listener here will catch this change and create a tween from the old
value of transform property, to the new value, over 0.3s using the "ease-out"
function.
When the modal should be removed, the "in" class is removed, thus removing the
translate(0, 0, 0) property, and again the transition
listener catches the change of the "translate" property and will ease it back to the
previous value
You can also tell transform to watch more than one CSS property by passing in a
comma-separated list
Great article here:
http://www.w3schools.com/Css/css3_transitions.asp
*/
transition: transform 300ms ease-out;
/*
-webkit-transition-delay: 0.15s;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
*/
/*
-webkit-animation-name: slideInUp;
-webkit-animation-duration: 800ms;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
*/
}
.bootstrap .modal.slide-up.in .modal-dialog {
/* Bootstrap applies the "in" class to the top-level .modal whenever it is shown
and removes it when it is hidden*/
/* Alter the transform property, which will be caught by the transition listener
and be eased between the old value and the new one */
transform: translate(0, 0);
}
.bootstrap .modal.slide-down .modal-dialog {
/*
Modal's natural position should be top: 0. Transform it so it it's bottom edge
is at the top of the viewport
*/
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-o-transfrorm: translate(0, -100%);
transform: translate(0, -100%);
/*
Add a watch listener on the transform property, which gets modified when the "in"
class is added when the modal is shown
*/
transition: transform 300ms ease-out;
}
.bootstrap .modal.slide-down.in .modal-dialog {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transfrorm: translate(0, 0);
transform: translate(0, 0);
}
.modal-footer-progress {
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0px;
z-index: 2;
}
.modal-footer-progress .progress {
margin-bottom: 0px;
height: 65px;
border-radius: 0px;
background: rgba(0, 0, 0, 0.7);
text-align: right;
}
.modal-footer-progress .progress h3 {
margin: 0;
padding: 0;
padding-top: 18px;
padding-right: 15px;
color: #fff;
}
.modal-footer-progress .progress .progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
font-size: 17px;
text-align: right;
z-index: 3;
}
.modal-footer-progress .progress .progress-bar h3 {
margin: 0;
padding: 0;
padding-top: 18px;
padding-right: 15px;
}
/* Persistent modal styling */
.modal-persistent {
position: absolute !important;
top: 50px !important;
bottom: 0px !important;
/* Somehow this combination gets it centered horizontally */
width: 650px !important;
left: 0;
right: 0;
margin: 0 auto;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 0px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
overflow: hidden;
}
.modal-persistent .modal-header {
position: absolute !important;
top: 0px !important;
left: 0px !important;
right: 0px !important;
height: 103px;
width: auto !important;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
/*border-bottom: 0px !important;
background: $color_abs_modal_header;
*/
border: none;
padding-top: 10px;
border-bottom: 1px solid #bbb;
}
.modal-persistent .modal-header-dark {
background: #6a6a6a;
}
.modal-persistent .modal-body {
position: absolute;
top: 103px;
bottom: 0;
left: 0px;
right: 0px;
overflow-y: auto;
background: #fff;
padding: 30px;
border: none;
}
.modal-persistent.slide-up {
transform: translate(0, 100%);
/* Watch for changes on the trasform property */
transition: transform 300ms ease-out;
}
.modal-persistent.slide-up.in {
transform: translate(0, 0);
}
.bootstrap .caret.caret-reversed {
border-top-width: 0;
border-bottom: 4px solid #000000;
}
.bootstrap .text-right-md-up {
text-align: left;
}
@media only screen and (min-width: 992px) {
.bootstrap .text-right-md-up {
text-align: right;
}
}
.bootstrap .text-right-sm-up {
text-align: left;
}
@media only screen and (min-width: 768px) {
.bootstrap .text-right-sm-up {
text-align: right;
}
}
/* Code to give vertical margin between any bootstrap col- that wrap due to
a media query */
.bootstrap div[class^=col-sm],
.bootstrap div[class^=col-md],
.bootstrap div[class^=col-lg] {
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
.bootstrap div[class^=col-sm] {
margin-bottom: 0px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap div[class^=col-md] {
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap div[class^=col-lg] {
margin-bottom: 0px;
}
}
.bootstrap .navbar-brand {
font-weight: 600;
}
.bootstrap .navbar {
border: 0;
}
.bootstrap .navbar-nav > li > a {
font-weight: 600;
}
.bootstrap .navbar-nav > li > a.avatar,
.bootstrap .navbar-nav > li > a.logo,
.bootstrap .navbar-nav > li > a.cart {
line-height: 0px;
padding-top: 17px;
padding-bottom: 17px;
}
.bootstrap .navbar-nav > li > a.avatar img,
.bootstrap .navbar-nav > li > a.logo img,
.bootstrap .navbar-nav > li > a.cart img {
width: 30px;
}
.bootstrap .navbar-inverse .navbar-brand, .bootstrap .navbar-default .navbar-brand {
padding-top: 14.5px;
padding-bottom: 14.5px;
}
.bootstrap .navbar-form {
margin-top: 0;
margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
.bootstrap .navbar-form {
margin-top: 14px;
margin-bottom: 14px;
}
}
.bootstrap .table {
margin-bottom: 0;
}
/* Syntax necessary to override Bootstrap default */
/* > td */
.bootstrap .table > tbody > tr.active {
background-color: #53A0D0; /*$color_bs_primary;*/
color: #fff;
}
.bootstrap .table > tbody > tr.active td {
background-color: inherit;
}
.bootstrap .alert.alert-dismissible {
margin-bottom: 0;
border-radius: 0;
}
.bootstrap .dl-horizontal.dl-horizontal-q-and-a dt {
width: 40px;
}
.bootstrap .dl-horizontal.dl-horizontal-q-and-a dd {
margin-left: 60px;
}
.bootstrap .dl-horizontal.dl-horizontal-q-and-a dd.dd-q {
/* Question */
font-weight: bold;
}
.bootstrap .dropdown-header {
font-size: 0.8em;
font-weight: 600;
}
.bootstrap .dropdown-menu.white-space-normal > li > a {
white-space: normal;
}
.bootstrap .navbar-nav .open .dropdown-menu > li > a {
line-height: 1.5;
}
.bootstrap .collapse-toggle .chevron:before {
/* symbol for "opening" panels */
font-family: "Glyphicons Halflings"; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
margin-right: 5px;
}
.bootstrap .collapse-toggle.collapsed .chevron:before {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
margin-right: 5px;
}
.bootstrap .hljs {
padding: 0px;
background: none;
}
.bootstrap .palette {
color: #ffffff;
/*
opacity: 0.8;
filter: alpha(opacity=80);
-webkit-font-smoothing: subpixel-antialiased;
*/
}
.bootstrap .palette p, .bootstrap .palette h1, .bootstrap .palette h2, .bootstrap .palette h3, .bootstrap .palette h4, .bootstrap .palette h5, .bootstrap .palette h6 {
color: inherit;
opacity: 0.8;
filter: alpha(opacity=80);
-webkit-font-smoothing: subpixel-antialiased;
}
.bootstrap .palette-turquoise {
background-color: #1abc9c;
}
.bootstrap .palette-green-sea {
background-color: #16a085;
}
.bootstrap .palette-emerald {
background-color: #2ecc71;
}
.bootstrap .palette-nephritis {
background-color: #27ae60;
}
.bootstrap .palette-peter-river {
background-color: #3498db;
}
.bootstrap .palette-belize-hole {
background-color: #2980b9;
}
.bootstrap .palette-amethyst {
background-color: #9b59b6;
}
.bootstrap .palette-wisteria {
background-color: #8e44ad;
}
.bootstrap .palette-wet-asphalt {
background-color: #34495e;
}
.bootstrap .palette-midnight-blue {
background-color: #2c3e50;
}
.bootstrap .palette-sun-flower {
background-color: #f1c40f;
}
.bootstrap .palette-orange {
background-color: #f39c12;
}
.bootstrap .palette-carrot {
background-color: #e67e22;
}
.bootstrap .palette-pumpkin {
background-color: #d35400;
}
.bootstrap .palette-alizarin {
background-color: #e74c3c;
}
.bootstrap .palette-pomegranate {
background-color: #c0392b;
}
.bootstrap .palette-clouds {
background-color: #ecf0f1;
}
.bootstrap .palette-silver {
background-color: #bdc3c7;
}
.bootstrap .palette-concrete {
background-color: #95a5a6;
}
.bootstrap .palette-asbestos {
background-color: #7f8c8d;
}
.bootstrap .palette-clouds {
color: #bdc3c7;
}
.bootstrap .palette-paragraph {
color: #7f8c8d;
font-size: 12px;
line-height: 17px;
}
.bootstrap .palette-paragraph span {
color: #bdc3c7;
}
.bootstrap .palette-headline {
color: #7f8c8d;
font-size: 13px;
font-weight: 700;
margin-top: -3px;
}
.bootstrap .hooktheory {
/*
position: relative;
left: -28px;
*/
}
.bootstrap .theorytab {
/*
position: relative;
left: -28px;
*/
}
.bootstrap .blink {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes blinker {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* style */
/* */
.bootstrap .fancybox-iframe {
border-radius: 5px;
}
/* To change the background color of the fancybox, "viewing" area, need to modify the
div.fancybox-skin. However if you just modify .fancybox-skin, it applies to all fancybox
instances. To edit just one, use the wrapCSS property of fancybox to place everything in
a <div class="wrapCSSVal"></div> and then apply the CSS to the .fancybox-skin within
that wrapper
*/
.bootstrap .wrap-welcome {
/* background: #ff0000; */
}
.bootstrap .wrap-welcome .fancybox-skin {
border-radius: 6px;
/* background: $color_bg; */
}
.bootstrap .font-size-xxxxs {
font-size: 0.4971767353em;
}
.bootstrap .font-size-xxxs {
font-size: 0.5717532456em;
}
.bootstrap .font-size-xxs {
font-size: 0.6575162324em;
}
.bootstrap .font-size-xs {
font-size: 0.7561436673em;
}
.bootstrap .font-size-sm {
font-size: 0.8695652174em;
}
.bootstrap .font-size-md {
font-size: 1em;
}
.bootstrap .font-size-lg {
font-size: 1.15em;
}
.bootstrap .font-size-xl {
font-size: 1.3225em;
}
.bootstrap .font-size-xxl {
font-size: 1.520875em;
}
.bootstrap .font-size-xxxl {
font-size: 1.74900625em;
}
.bootstrap .font-size-2em {
font-size: 2em;
}
.bootstrap .font-size-3em {
font-size: 3em;
}
.bootstrap .font-size-2p5em {
font-size: 2.5em;
}
.bootstrap .font-size-hero {
font-size: 1.5em;
}
@media only screen and (min-width: 768px) {
.bootstrap .font-size-hero {
font-size: 1.8em;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .font-size-hero {
font-size: 2em;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .font-size-hero {
font-size: 2.2em;
}
}
.bootstrap .font-size-hero-md {
font-size: 0.8em;
}
@media only screen and (min-width: 768px) {
.bootstrap .font-size-hero-md {
font-size: 1.2em;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .font-size-hero-md {
font-size: 1.4em;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .font-size-hero-md {
font-size: 1.7em;
}
}
.bootstrap .font-size-brand-name {
font-size: 18px;
}
.bootstrap .font-size-brand-tagline {
font-size: 12px;
}
.bootstrap .font-size-shrink-on-smwd {
font-size: 0.8em;
}
@media only screen and (min-width: 768px) {
.bootstrap .font-size-shrink-on-smwd {
font-size: 0.9em;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .font-size-shrink-on-smwd {
font-size: 1em;
}
}
.bootstrap .errorMessage {
padding: 5px 10px;
color: rgb(200, 0, 0);
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
font-size: 0.9em;
background: rgba(255, 196, 196, 0.5);
}
.bootstrap fieldset.hr {
border-top: 1px solid #440000;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
.bootstrap fieldset.hr legend {
padding: 5px 10px;
}
/* style */
/* */
/* https://github.com/asianmack/play-store-smartbanner */
.bootstrap .smartbanner {
left: 0;
top: 0;
width: 100%;
height: 78px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #ccc;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
.bootstrap .smartbanner-container {
margin: 0 auto;
}
.bootstrap .smartbanner-close {
position: absolute;
left: 7px;
top: 7px;
display: block;
font-family: "ArialRoundedMTBold", Arial;
font-size: 15px;
text-align: center;
text-decoration: none;
border-radius: 14px;
-webkit-font-smoothing: subpixel-antialiased;
border: 0;
width: 17px;
height: 17px;
line-height: 17px;
color: #b1b1b3;
background: #efefef;
}
.bootstrap .smartbanner-close:active, .bootstrap .smartbanner-close:hover {
color: #333;
}
.bootstrap .smartbanner-icon {
position: absolute;
left: 30px;
top: 10px;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
background-size: cover;
background-image: url(/images/logos/hooktheory-one-play-store.jpg?v=u27ji4s);
}
.bootstrap .smartbanner-info {
position: absolute;
left: 98px;
top: 15px;
width: 44%;
font-size: 12px;
line-height: 1.2em;
font-weight: bold;
color: #999;
}
.bootstrap .smartbanner-title {
font-size: 15px;
line-height: 17px;
color: #000;
font-weight: bold;
}
.bootstrap .smartbanner-button {
position: absolute;
right: 20px;
top: 24px;
border-bottom: 3px solid #b3c833;
padding: 0 10px;
min-width: 12%;
height: 24px;
font-size: 14px;
line-height: 24px;
text-align: center;
font-weight: bold;
color: #fff;
background-color: #b3c833;
text-decoration: none;
border-radius: 5px;
}
.bootstrap .smartbanner-button:hover {
background-color: #c1d739;
border-bottom: 3px solid #8c9c29;
}
.bootstrap .smartbanner-btn-default {
text-align: center;
display: block;
padding: 0 5px;
}
/* http://codepen.io/Bluetidepro/pen/GkpEa?editors=110 */
.bootstrap .star-ratings {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 25px;
height: 25px;
width: 125px;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
}
.bootstrap .star-ratings .star-ratings-top {
color: #e7711b;
padding: 0;
text-shadow: 0px 1px 0 #ab5414;
position: absolute;
z-index: 1;
display: block;
left: 0px;
overflow: hidden;
}
.bootstrap .star-ratings .star-ratings-bottom {
z-index: 0;
}
.bootstrap .star-ratings-on-dark {
color: #fff;
}
.bootstrap .star-ratings-font-size-lg {
font-size: 18px;
width: 90px;
height: 18px;
}
@media only screen and (min-width: 768px) {
.bootstrap .star-ratings-font-size-lg {
font-size: 20px;
width: 100px;
height: 20px;
}
}
/* modal
----------------------------------------------------------------------------------------*/
/* style */
/* */
/* mixins
----------------------------------------------------------------------------------------*/
.bootstrap .div-vertical-align-parent {
transform-style: preserve-3d;
}
.bootstrap .div-vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.bootstrap figure {
border: 1px solid #ddd;
padding: 15px;
}
.bootstrap figure img {
padding: 0 !important;
}
.bootstrap figure figcaption {
font-family: BentonSans, Arial, Helvetica, sans-serif;
font-size: 0.7em;
padding-top: 10px;
}
.bootstrap figure.figure-margin-top-bot {
margin-top: 15px;
margin-bottom: 15px;
}
.bootstrap figure.figure-no-padding {
padding: 0px;
}
.bootstrap figure.figure-white {
background: #fff;
}
.bootstrap div.hookpad-no-focus {
padding: 10px;
position: fixed;
bottom: 0px;
left: 0;
right: 0;
height: 45px;
display: none;
background: #fff;
border-top: 1px solid #eee;
z-index: 2;
}
.bootstrap div.hookpad-overview .hookpad-overview-video {
margin-top: 30px;
text-align: center;
}
@media only screen and (min-width: 992px) {
.bootstrap div.hookpad-overview {
display: flex;
align-items: center;
}
.bootstrap div.hookpad-overview .hookpad-overview-video {
flex-shrink: 0;
width: 40%;
margin-top: 0px;
margin-left: 30px;
}
}
.bootstrap div.hookpad-video-container {
position: relative;
margin-top: -325px;
height: 300px;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.bootstrap div.hookpad-video-container {
margin-top: -60px;
}
}
.bootstrap div.bg-hookpad-img-overlay {
position: relative;
top: 0;
left: 0;
width: 600px;
}
.bootstrap div.bg-hookpad-img-video-inlay {
position: absolute;
top: 24px;
left: 87px;
width: 455px;
}
.bootstrap div.hookpad-img-video-colcontainer {
position: absolute;
left: 95px;
}
@media only screen and (max-width: 970px) {
.bootstrap div.hookpad-img-video-colcontainer {
left: 100px;
}
}
/* The starting CSS styles for the enter animation */
.bootstrap .ng-fade.ng-enter {
transition: 3s linear all;
opacity: 0;
}
/* The finishing CSS styles for the enter animation */
.bootstrap .ng-fade.ng-enter.ng-enter-active {
opacity: 1;
}
/* now the element will fade out before it is removed from the DOM */
.bootstrap .ng-fade.ng-leave {
transition: 3s linear all;
opacity: 1;
}
.bootstrap .ng-fade.ng-leave.ng-leave-active {
opacity: 0;
}
.bootstrap .animate-show.ng-hide-add,
.bootstrap .animate-show.ng-hide-remove {
transition: all linear 0.5s;
display: block !important;
}
.bootstrap .animate-show.ng-hide-add.ng-hide-add-active,
.bootstrap .animate-show.ng-hide-remove {
opacity: 0;
}
.bootstrap .animate-show.ng-hide-add,
.bootstrap .animate-show.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
.bootstrap button.stripe-button-el {
width: 100%;
}
/* Uses position fixed rather than pos absolute
so scrolling on mobile is not affected
-------------------------------------------- */
@media only screen and (min-width: 992px) {
.div-abs-header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 64px;
z-index: 10;
background: #fff;
}
.div-abs-sub-header {
position: fixed;
top: 64px;
left: 0;
right: 0;
height: 56px;
z-index: 8;
background: #fff;
}
.div-abs-content {
position: absolute;
top: 64px;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/*
margin-top: $height_abs_header_xs;
@media (min-width: $width_md) {
margin-top: $height_abs_header;
}
z-index: 1;
*/
}
.div-abs-content-lc-l {
position: absolute;
top: 64px;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
left: 0;
width: 360px;
z-index: 1;
}
.div-abs-content-lc-r {
position: absolute;
top: 64px;
bottom: 0;
left: 360px;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.div-abs-content-cl-c {
position: absolute;
top: 64px;
bottom: 0;
left: 0;
right: 360px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
left: 0;
z-index: 1;
}
.div-abs-content-cl-l {
position: absolute;
top: 64px;
bottom: 0;
width: 360px;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.div-abs-content-lc-l-with-sub-header,
.div-abs-content-lc-r-with-sub-header,
.div-abs-content-cl-c-with-sub-header,
.div-abs-content-cl-l-with-sub-header {
top: 120px;
}
.div-abs-content-has-sub-header {
/*
margin-top: $height_abs_header_xs + $height_abs_sub_header;
@media (min-width: $width_md) {
margin-top: $height_abs_header + $height_abs_sub_header;
}
z-index: 1;
*/
position: absolute;
top: 120px;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.bootstrap .div-elevate {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
}
.bootstrap a div.tab-cover {
text-decoration: none;
font-size: 1em;
color: #444;
}
@media only screen and (min-width: 768px) {
.bootstrap a div.tab-cover {
font-size: 1em;
}
}
.bootstrap a div.tab-cover div.meta {
padding-top: 10px;
line-height: 1.25;
}
.bootstrap a div.tab-cover div.meta span.span-song {
color: #fff;
color: #444;
font-size: 0.8em;
}
.bootstrap a div.tab-cover div.meta span.span-artist {
font-weight: bold;
font-size: 0.9em;
color: #fff;
color: #aaa;
}
.bootstrap a:hover div.tab-cover div.meta span.span-song,
.bootstrap a:active div.tab-cover div.meta span.span-song,
.bootstrap a:focus div.tab-cover div.meta span.span-song {
color: #444;
text-decoration: none !important;
}
.bootstrap a:hover div.tab-cover div.meta span.span-artist,
.bootstrap a:active div.tab-cover div.meta span.span-artist,
.bootstrap a:focus div.tab-cover div.meta span.span-artist {
color: #aaa;
text-decoration: none !important;
}
.bootstrap div.overflow-x {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
/*
img.img-screenshot:first-child {
margin-left: 0px;
}
*/
}
.bootstrap div.overflow-x a.a-tab-cover {
display: inline-block;
width: 130px;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 20px;
}
.bootstrap div.overflow-x a.a-tab-cover:first-child {
margin-left: 15px;
}
.bootstrap div.overflow-x a.a-tab-cover:last-child {
margin-right: 20px;
}
.bootstrap div.overflow-x img.img-screenshot {
width: 200px;
display: inline-block;
margin-left: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
}
.bootstrap div.overflow-x img.img-screenshot-sm {
width: 130px;
display: inline-block;
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
}
.bootstrap .overflow-x-flex {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-left: 25px;
padding-right: 25px;
}
@media only screen and (min-width: 768px) {
.bootstrap .overflow-x-flex {
padding-left: 40px;
}
}
.bootstrap .overflow-y-auto {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.flex-nowrap-column {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.bootstrap div.flex-wrap-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.bootstrap div.flex-nowrap-center {
display: flex;
justify-content: center;
width: 100%;
}
.flex {
display: flex;
}
.flex-justify-space-between {
justify-content: space-between;
}
.flex-justify-space-between-footer {
justify-content: space-between;
}
.flex-justify-space-around {
justify-content: space-around;
}
.flex-justify-end {
justify-content: flex-end;
}
.flex-justify-center {
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.bootstrap .div-menus {
display: flex;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-1 {
flex: 1;
/* flex-grow: 1; */
/* flex-shrink: 1; */
/* flex-basis: 0%; Wait what? */
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-direction-column {
flex-direction: column;
}
.flex-direction-row {
flex-direction: row;
}
.flex-direction-row-sm-col {
flex-direction: row;
}
@media only screen and (max-width: 768px) {
.flex-direction-row-sm-col {
flex-direction: column;
}
}
.flex-direction-row-sm-col-reverse {
flex-direction: row;
}
@media only screen and (max-width: 768px) {
.flex-direction-row-sm-col-reverse {
flex-flow: column-reverse;
}
}
.flex-direction-row-reverse-md-col {
flex-direction: row-reverse;
}
@media only screen and (max-width: 992px) {
.flex-direction-row-reverse-md-col {
flex-direction: column;
}
}
.flex-until-md {
display: flex;
}
@media only screen and (min-width: 992px) {
.flex-until-md {
display: block;
}
}
.flex-sm-up {
display: block;
}
@media only screen and (min-width: 768px) {
.flex-sm-up {
display: flex;
}
}
.flex-md-up {
display: block;
}
@media only screen and (min-width: 992px) {
.flex-md-up {
display: flex;
}
}
.flex-sm {
display: block;
}
@media only screen and (min-width: 768px) {
.flex-sm {
display: flex;
}
}
.flex-fill::after {
content: "";
flex: auto;
}
.bootstrap div.flex-50-50-sm-up > div,
.bootstrap div.flex-40-60-sm-up > div,
.bootstrap div.flex-60-40-sm-up > div,
.bootstrap div.flex-30-70-sm-up > div,
.bootstrap div.flex-70-30-sm-up > div {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap div.flex-50-50-sm-up,
.bootstrap div.flex-50-50-sm-up-no-margin,
.bootstrap div.flex-60-40-sm-up-no-margin,
.bootstrap div.flex-60-40-sm-up,
.bootstrap div.flex-40-60-sm-up,
.bootstrap div.flex-30-70-sm-up,
.bootstrap div.flex-70-30-sm-up {
display: flex;
align-items: center;
margin-bottom: 0px;
}
.bootstrap div.flex-50-50-sm-up > div:first-child,
.bootstrap div.flex-40-60-sm-up > div:first-child,
.bootstrap div.flex-60-40-sm-up > div:first-child,
.bootstrap div.flex-30-70-sm-up > div:first-child,
.bootstrap div.flex-70-30-sm-up > div:first-child {
margin-right: 0%;
flex-grow: 1;
}
.bootstrap div.flex-50-50-sm-up-no-margin > div:first-child {
margin-right: 0%;
flex-grow: 1;
}
.bootstrap div.flex-50-50-sm-up-no-margin > div:last-child {
flex-shrink: 0;
width: 50%;
margin-left: 0%;
margin-top: 0px;
}
.bootstrap div.flex-60-40-sm-up-no-margin > div:first-child {
margin-right: 0%;
flex-grow: 1;
}
.bootstrap div.flex-60-40-sm-up-no-margin > div:last-child {
flex-shrink: 0;
width: 40%;
margin-left: 0%;
margin-top: 0px;
}
.bootstrap div.flex-50-50-sm-up > div:last-child {
flex-shrink: 0;
width: 46%;
margin-left: 4%;
margin-top: 0px;
}
.bootstrap div.flex-40-60-sm-up > div:last-child {
flex-shrink: 0;
width: 58%;
margin-left: 2%;
margin-top: 0px;
}
.bootstrap div.flex-60-40-sm-up > div:last-child {
flex-shrink: 0;
width: 39%;
margin-left: 1%;
margin-top: 0px;
}
.bootstrap div.flex-30-70-sm-up > div:last-child {
flex-shrink: 0;
width: 66%;
margin-left: 4%;
margin-top: 0px;
}
.bootstrap div.flex-70-30-sm-up > div:last-child {
flex-shrink: 0;
width: 26%;
margin-left: 4%;
margin-top: 0px;
}
.bootstrap div.flex-50-50-sm-up.flex-row-reverse > div:first-child {
margin-left: 4%;
margin-right: 0;
}
.bootstrap div.flex-50-50-sm-up.flex-row-reverse > div:last-child {
margin-right: 4%;
margin-left: 0;
}
.bootstrap div.flex-40-60-sm-up.flex-row-reverse > div:first-child {
margin-left: 4%;
margin-right: 0;
}
.bootstrap div.flex-40-60-sm-up.flex-row-reverse > div:last-child {
margin-right: 4%;
margin-left: 0;
}
.bootstrap div.flex-30-70-sm-up.flex-row-reverse > div:first-child {
margin-left: 4%;
margin-right: 0;
}
.bootstrap div.flex-30-70-sm-up.flex-row-reverse > div:last-child {
margin-right: 4%;
margin-left: 0;
}
}
.flex-3-col-stretch-md-up {
display: flex;
}
.flex-3-col-stretch-md-up div:first-child {
margin-right: 4%;
flex: 1;
padding: 20px;
}
.flex-3-col-stretch-md-up div:nth-child(2) {
margin-left: 4%;
margin-right: 4%;
flex: 1;
padding: 20px;
}
.flex-3-col-stretch-md-up div:last-child {
margin-left: 4%;
flex: 1;
padding: 20px;
}
@media only screen and (min-width: 768px) {
.flex-row-reverse {
flex-direction: row-reverse;
}
}
.flex-col-reverse-xs {
display: flex;
flex-direction: column-reverse;
}
@media only screen and (min-width: 768px) {
.flex-col-reverse-xs {
flex-direction: row;
}
}
/* vertical align */
.flex-align-items-center {
align-items: center;
}
.flex-align-items-start {
align-items: flex-start !important;
}
.flex-align-items-stretch {
align-items: stretch !important;
}
.flex-align-items-baseline {
align-items: baseline;
}
.flex-align-items-end {
align-items: end;
}
.bootstrap .div-hover-cursor:hover {
cursor: pointer;
}
.bootstrap .display-inline-block {
display: inline-block;
}
.bootstrap .display-inline {
display: inline;
}
.bootstrap .padding-0 {
padding: 0;
}
.bootstrap .padding-0-important {
padding: 0 !important;
}
.bootstrap .padding-5 {
padding: 5px;
}
.bootstrap .padding-10 {
padding: 10px;
}
.bootstrap .padding-15 {
padding: 15px;
}
.bootstrap .padding-20 {
padding: 20px;
}
.bootstrap .padding-30 {
padding: 30px;
}
.bootstrap .padding-40 {
padding: 40px;
}
.bootstrap .padding-50 {
padding: 50px;
}
.bootstrap .padding-60 {
padding: 60px;
}
.bootstrap .padding-right-10 {
padding-right: 10px;
}
.bootstrap .padding-left-10 {
padding-left: 10px;
}
.bootstrap .padding-left-20 {
padding-left: 20px;
}
.bootstrap .padding-left-30 {
padding-left: 30px;
}
.bootstrap .padding-left-40 {
padding-left: 40px;
}
.bootstrap .padding-left-100 {
padding-left: 100px;
}
.bootstrap .padding-right-15 {
padding-right: 15px;
}
.bootstrap .padding-left-15 {
padding-left: 15px;
}
.bootstrap .padding-right-20 {
padding-right: 20px;
}
.bootstrap .padding-right-30 {
padding-right: 30px;
}
.bootstrap .padding-right-40 {
padding-right: 40px;
}
.bootstrap .padding-right-50 {
padding-right: 50px;
}
.bootstrap .padding-top-15 {
padding-top: 15px;
}
.bootstrap .padding-bottom-15 {
padding-bottom: 15px;
}
.bootstrap .padding-bottom-20 {
padding-bottom: 20px;
}
.bootstrap .padding-bottom-30 {
padding-bottom: 30px;
}
.bootstrap .padding-bottom-40 {
padding-bottom: 40px;
}
.bootstrap .padding-bottom-50 {
padding-bottom: 50px;
}
.bootstrap .padding-bottom-60 {
padding-bottom: 60px;
}
.bootstrap .padding-bottom-80 {
padding-bottom: 80px;
}
.bootstrap .padding-bottom-100 {
padding-bottom: 100px;
}
.bootstrap .padding-bottom-125 {
padding-bottom: 125px;
}
.bootstrap .padding-bottom-150 {
padding-bottom: 150px;
}
.bootstrap .padding-bottom-200 {
padding-bottom: 200px;
}
.bootstrap .padding-bottom-300 {
padding-bottom: 300px;
}
.bootstrap .padding-top-20 {
padding-top: 20px;
}
.bootstrap .padding-right-5 {
padding-right: 5px;
}
.bootstrap .padding-left-5 {
padding-left: 5px;
}
.bootstrap .padding-right-2 {
padding-right: 2px;
}
.bootstrap .padding-left-2 {
padding-left: 2px;
}
.bootstrap .padding-top-0 {
padding-top: 0px;
}
.bootstrap .padding-top-5 {
padding-top: 5px;
}
.bootstrap .padding-top-10 {
padding-top: 10px;
}
.bootstrap .padding-bottom-5 {
padding-bottom: 5px;
}
.bootstrap .padding-bottom-0 {
padding-bottom: 0px;
}
.bootstrap .padding-bottom-10 {
padding-bottom: 10px;
}
.bootstrap .padding-left-0 {
padding-left: 0px;
}
.bootstrap .padding-right-0 {
padding-right: 0px;
}
.bootstrap .padding-top-30 {
padding-top: 30px;
}
.bootstrap .padding-top-40 {
padding-top: 40px;
}
.bootstrap .padding-top-50 {
padding-top: 50px;
}
.bootstrap .padding-top-60 {
padding-top: 60px;
}
.bootstrap .padding-top-70 {
padding-top: 70px;
}
.bootstrap .padding-top-80 {
padding-top: 80px;
}
.bootstrap .padding-top-90 {
padding-top: 90px;
}
.bootstrap .padding-top-100 {
padding-top: 100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-left-right-20-md-up {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .padding-left-right-40-lg-up {
padding-left: 40px;
padding-right: 40px;
}
}
.bootstrap .padding-lr-20-xs-30-md-up {
padding-left: 20px;
padding-right: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-lr-20-xs-30-md-up {
padding-left: 30px;
padding-right: 30px;
}
}
.bootstrap .padding-tb-30 {
padding-top: 30px;
padding-bottom: 30px;
}
.bootstrap .padding-20-30-sm-up {
padding: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-20-30-sm-up {
padding: 30px;
}
}
.bootstrap .padding-20-30-md-up {
padding: 20px;
}
@media only screen and (min-width: 992px) {
.bootstrap .padding-20-30-md-up {
padding: 30px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-left-15-sm-up {
padding-left: 15px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-left-20-sm-up {
padding-left: 20px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-lr-20-sm-up {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-right-15-sm-up {
padding-right: 15px;
}
}
@media only screen and (max-width: 991px) {
.bootstrap .padding-bottom-xs-sm {
padding-bottom: 40px;
}
}
.bootstrap .background-white {
background: #fff;
}
.bootstrap .background-none {
background: none;
}
.bootstrap .background-people-behind {
background-color: #111B20;
background-color: rgb(34.693877551, 55.1020408163, 65.306122449);
color: #fff;
}
.bootstrap .background-text {
background: #444;
}
.bootstrap .background-blue {
background-color: #0000ff;
}
.bootstrap .background-light-gray {
background-color: #eeeeee;
}
.bootstrap .background-gray {
background-color: #cccccc;
}
.bootstrap .background-red {
background-color: #ff0000;
}
.bootstrap .background-hookpad-b {
background-color: #9CBB24;
}
.bootstrap .background-orange {
background-color: #F6A828;
}
.bootstrap .background-orange-2 {
background: #D1691F;
}
.bootstrap .background-blue-purple {
background: #07094A;
color: #fff;
}
.bootstrap .background-home-a {
background: #B91BB5;
color: #fff;
}
.bootstrap .background-home-c {
background: #040D6B;
color: #fff;
}
.bootstrap .background-home-d {
background: #312343;
color: #fff;
}
.bootstrap .background-complement {
background: #F6B02A;
color: #fff;
}
.bootstrap .background-hookpad-c {
background-color: #D87C2D;
background-color: #7E344F;
background-color: #D83628;
background-color: #043039;
}
.bootstrap .background-hookpad-d {
background: #674464;
background-color: #D83628;
background-color: #D87C2D;
background: #598BA1;
}
.bootstrap .background-hookpad-plus {
background: #E9A01E;
}
.bootstrap .background-color-home-products {
background-color: #352073;
color: #fff;
}
.bootstrap .background-color-home-resources {
background-color: #234a94;
background-color: #125592;
color: #fff;
}
.bootstrap .background-color-home-product {
background-color: #20154C;
}
.bootstrap .background-color-logo-dark-blue {
color: #fff;
}
.bootstrap .background-color-products {
/*
background-color: #152E55; // zane
//background-color: #285BA6;
background-color: #241B57; // products inner
//background-color: #352073; // products outer
color: #fff;
*/
}
.bootstrap .background-color-product-item {
background-color: #152E55;
background-color: #241B57;
background-color: #352073;
color: #fff;
}
.bootstrap .background-color-cp {
background-color: #34343F;
color: #fff;
}
@media only screen and (max-width: 991px) {
.bootstrap .max-width-150-sm {
max-width: 150px;
}
}
@media only screen and (max-width: 991px) {
.bootstrap .max-width-200-sm {
max-width: 200px;
}
}
.bootstrap .max-width-300 {
max-width: 300px;
}
.bootstrap .max-width-400 {
max-width: 400px;
}
.bootstrap .max-width-500 {
max-width: 500px;
}
.bootstrap .width-15 {
width: 15px;
}
.bootstrap .width-20 {
width: 20px;
}
.bootstrap .width-25 {
width: 25px;
}
.bootstrap .width-26 {
width: 26px;
}
.bootstrap .width-30 {
width: 30px;
}
.bootstrap .width-35 {
width: 35px;
}
.bootstrap .width-40 {
width: 40px;
}
.bootstrap .width-50 {
width: 50px;
}
.bootstrap .width-60 {
width: 60px;
}
.bootstrap .width-70 {
width: 70px;
}
.bootstrap .width-80 {
width: 80px;
}
.bootstrap .width-90 {
width: 90px;
}
.bootstrap .width-50-percent {
width: 50%;
}
.bootstrap .width-49-percent {
width: 49%;
}
.bootstrap .width-2-percent {
width: 2%;
}
.bootstrap .width-100-percent {
width: 100%;
}
@media only screen and (max-width: 767px) {
.bootstrap .width-100-percent-xs {
width: 100%;
}
}
.bootstrap .width-100 {
width: 100px;
}
.bootstrap .width-110 {
width: 110px;
}
.bootstrap .width-120 {
width: 120px;
}
.bootstrap .width-130 {
width: 130px;
}
.bootstrap .width-140 {
width: 140px;
}
.bootstrap .width-150 {
width: 150px;
}
.bootstrap .width-160 {
width: 160px;
}
.bootstrap .width-170 {
width: 170px;
}
.bootstrap .width-175 {
width: 175px;
}
.bootstrap .width-180 {
width: 180px;
}
.bootstrap .width-190 {
width: 1900px;
}
.bootstrap .width-200 {
width: 200px;
}
.bootstrap .width-215 {
width: 215px;
}
.bootstrap .width-225 {
width: 225px;
}
.bootstrap .width-250 {
width: 250px;
}
.bootstrap .width-300 {
width: 300px;
}
.bootstrap .width-350 {
width: 350px;
}
.bootstrap .width-360 {
width: 360px;
}
.bootstrap .width-400 {
width: 400px;
}
.bootstrap .width-34 {
width: 34px;
}
.bootstrap .max-width-200 {
max-width: 200px;
}
.bootstrap .max-width-300 {
max-width: 300px;
}
.bootstrap .max-width-400 {
max-width: 400px;
}
.bootstrap .max-width-500 {
max-width: 500px;
}
.bootstrap .max-width-600 {
max-width: 600px;
}
.bootstrap .max-width-70-percent {
max-width: 70%;
}
.bootstrap .max-width-70-50-percent {
max-width: 70%;
}
@media only screen and (min-width: 768px) {
.bootstrap .max-width-70-50-percent {
max-width: 50%;
}
}
.bootstrap .max-width-70-40-percent {
max-width: 70%;
}
@media only screen and (min-width: 768px) {
.bootstrap .max-width-70-40-percent {
max-width: 40%;
}
}
.bootstrap .max-width-70-30-percent {
max-width: 70%;
}
@media only screen and (min-width: 768px) {
.bootstrap .max-width-70-30-percent {
max-width: 30%;
}
}
.bootstrap .max-width-80-percent {
max-width: 80%;
}
.bootstrap .max-width-80p-50p-md {
max-width: 80%;
}
@media only screen and (min-width: 992px) {
.bootstrap .max-width-80p-50p-md {
max-width: 50%;
}
}
@media only screen and (max-width: 768px) {
.bootstrap button[class*=width-],
.bootstrap a[class*=width-] {
width: 100%;
}
}
.bootstrap .width-card {
width: 100%;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-card {
width: calc(50% - 20px);
margin: 10px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .width-card {
width: calc(33.3% - 20px);
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .width-card {
width: calc(25% - 20px);
}
}
.bootstrap .width-70-100-sm-up {
width: 70px;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-70-100-sm-up {
width: 100px;
}
}
.bootstrap .width-250-350-sm-up {
width: 250px;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-250-350-sm-up {
width: 350px;
}
}
.bootstrap .width-300-450-sm-up {
width: 300px;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-300-450-sm-up {
width: 450px;
}
}
.bootstrap .width-350-450-sm-up {
width: 350px;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-350-450-sm-up {
width: 450px;
}
}
.bootstrap .width-350-400-sm-up {
width: 350px;
}
@media only screen and (min-width: 768px) {
.bootstrap .width-350-400-sm-up {
width: 400px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .width-400-md-up {
width: 400px !important;
}
}
.bootstrap .width-20-percent {
width: 20%;
}
.bootstrap .width-30-percent {
width: 30%;
}
.bootstrap .width-40-percent {
width: 40%;
}
.bootstrap .width-45-percent {
width: 45%;
}
.bootstrap .width-50-percent {
width: 50%;
}
.bootstrap .width-55-percent {
width: 55%;
}
.bootstrap .width-60-percent {
width: 60%;
}
.min-height-0 {
min-height: 0;
}
.bootstrap .height-15 {
height: 15px;
}
.bootstrap .height-20 {
height: 20px;
}
.bootstrap .height-25 {
height: 25px;
}
.bootstrap .height-30 {
height: 30px;
}
.bootstrap .height-35 {
height: 35px;
}
.bootstrap .height-40 {
height: 40px;
}
.bootstrap .height-50 {
height: 50px;
}
.bootstrap .height-60 {
height: 60px;
}
.bootstrap .height-70 {
height: 70px;
}
.bootstrap .height-80 {
height: 80px;
}
.bootstrap .height-90 {
height: 90px;
}
.bootstrap .height-100 {
height: 100px;
}
.height-100-percent {
height: 100%;
}
.bootstrap .height-110 {
height: 110px;
}
.bootstrap .height-120 {
height: 120px;
}
.bootstrap .height-130 {
height: 130px;
}
.bootstrap .height-140 {
height: 140px;
}
.bootstrap .height-150 {
height: 150px;
}
.bootstrap .height-175 {
height: 175px;
}
.bootstrap .height-200 {
height: 200px;
}
.bootstrap .height-225 {
height: 225px;
}
.bootstrap .height-250 {
height: 250px;
}
.bootstrap .height-300 {
height: 300px;
}
.bootstrap .height-350 {
height: 350px;
}
.bootstrap .height-400 {
height: 400px;
}
.bootstrap .height-450 {
height: 450px;
}
.bootstrap .height-500 {
height: 500px;
}
.bootstrap .height-600 {
height: 600px;
}
.bootstrap .height-34 {
height: 34px;
}
.bootstrap .height-vh100 {
height: 100vh;
}
.bootstrap .height-hookpad-free-title {
height: auto;
}
@media only screen and (min-width: 768px) {
.bootstrap .height-hookpad-free-title {
height: 200px;
margin-top: 30px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .height-hookpad-free-title {
height: 160px;
}
}
.bootstrap .height-hookpad-plus-title {
height: auto;
}
@media only screen and (min-width: 768px) {
.bootstrap .height-hookpad-plus-title {
height: 230px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .height-hookpad-plus-title {
height: 190px;
}
}
.bootstrap .height-sm-up-100-40vh {
height: 100vh;
}
.bootstrap .height-sm-up-50-0 {
height: 0px;
}
.bootstrap div.height-sm-up-100-60vh {
height: 60vh;
}
.bootstrap div.height-sm-up-100-40vh {
height: 40vh;
}
@media only screen and (min-width: 768px) {
.bootstrap div.height-sm-up-100-60vh {
height: 100vh;
}
.bootstrap div.height-sm-up-100-40vh {
height: 100vh;
}
.bootstrap .height-sm-up-100-50vh,
.bootstrap .height-sm-up-100-40vh {
height: 100vh;
}
.bootstrap .height-sm-up-50-0 {
height: 50px;
}
}
.bootstrap .theorytab-section {
margin-bottom: 20px;
border-radius: 5px;
}
.bootstrap .key-pageContent {
width: 400px;
height: 400px;
top: 0;
left: 0;
right: 0;
bottom: 50;
min-width: 300px;
}
.bootstrap .key-sizeText {
position: absolute;
right: 0;
bottom: 0;
}
.bootstrap .key-circle {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 100%;
z-index: -1;
text-align: center;
}
.bootstrap .key-circle svg {
max-width: 600px;
}
.bootstrap .key-circle .guide {
fill: none;
stroke: red;
stroke: none;
stroke-width: 0.2;
}
.bootstrap .key-circle .tonic {
text-anchor: middle;
}
.bootstrap .key-circle .tonic tspan {
font-family: MusicalSymbols;
font-size: 22px;
fill: #555555;
}
.bootstrap .key-circle .tonic-active {
text-anchor: middle;
}
.bootstrap .key-circle .tonic-active tspan {
font-family: MusicalSymbols;
font-size: 22px;
fill: red;
}
.bootstrap .key-circle .tonicSep {
fill: none;
stroke: black;
stroke-width: 0.5;
}
.bootstrap .key-circle .chordTypeRingSection {
stroke: #000;
stroke-width: 0.5;
}
.bootstrap .key-circle .chordTypeText {
font-size: 11px;
font-family: Arial;
letter-spacing: 2px;
}
.bootstrap .key-circle .degreeRing {
fill: none;
stroke: #000;
stroke-width: 0.5;
}
.bootstrap .key-circle .degreeSep {
fill: none;
stroke: black;
stroke-width: 0.5;
}
.bootstrap .key-circle .degreeLabels {
text-anchor: middle;
}
.bootstrap .key-circle .degreeLabels tspan {
font-family: MusicalSymbols;
font-size: 12px;
}
.bootstrap .margin-auto {
margin-left: auto;
margin-right: auto;
}
.bootstrap .margin-right-1em {
margin-right: 1em;
}
.bootstrap .margin-left-1em {
margin-left: 1em;
}
.bootstrap .margin-1em {
margin: 1em;
}
.bootstrap .margin-0 {
margin: 0px;
}
.bootstrap .margin-1 {
margin: 1px;
}
.bootstrap .margin-5 {
margin: 5px;
}
.bootstrap .margin-10 {
margin: 10px;
}
.bootstrap .margin-15 {
margin: 15px;
}
.bootstrap .margin-20 {
margin: 20px;
}
.bootstrap .margin-25 {
margin: 25px;
}
.bootstrap .margin-30 {
margin: 30px;
}
.bootstrap .margin-right-10 {
margin-right: 10px;
}
.bootstrap .margin-right-15 {
margin-right: 15px;
}
.bootstrap .margin-right-20 {
margin-right: 20px;
}
.bootstrap .margin-right-30 {
margin-right: 30px;
}
.bootstrap .margin-right-40 {
margin-right: 40px;
}
.bootstrap .margin-right-50 {
margin-right: 50px;
}
.bootstrap .margin-left-10 {
margin-left: 10px;
}
.bootstrap .margin-left-20 {
margin-left: 20px;
}
.bootstrap .margin-left-25 {
margin-left: 25px;
}
.bootstrap .margin-left-30 {
margin-left: 30px;
}
.bootstrap .margin-left-35 {
margin-left: 35px;
}
.bootstrap .margin-left-40 {
margin-left: 40px;
}
.bootstrap .margin-left-50 {
margin-left: 50px;
}
.bootstrap .margin-left-60 {
margin-left: 60px;
}
.bootstrap .margin-left-70 {
margin-left: 70px;
}
.bootstrap .margin-right-5 {
margin-right: 5px;
}
.bootstrap .margin-left-5 {
margin-left: 5px;
}
.bootstrap .margin-top-1 {
margin-top: 1px;
}
.bootstrap .margin-top-2 {
margin-top: 2px;
}
.bootstrap .margin-top-3 {
margin-top: 3px;
}
.bootstrap .margin-top-5 {
margin-top: 5px;
}
.bootstrap .margin-top-10 {
margin-top: 10px;
}
.bootstrap .margin-bottom-1 {
margin-bottom: 1px;
}
.bootstrap .margin-bottom-2 {
margin-bottom: 2px;
}
.bootstrap .margin-bottom-5 {
margin-bottom: 5px;
}
.bootstrap .margin-bottom-7 {
margin-bottom: 7px;
}
.bootstrap .margin-bottom-10 {
margin-bottom: 10px;
}
.bootstrap .margin-bottom-15 {
margin-bottom: 15px;
}
.bootstrap .margin-bottom-20 {
margin-bottom: 20px;
}
.bootstrap .margin-bottom-25 {
margin-bottom: 25px;
}
.bootstrap .margin-bottom-30 {
margin-bottom: 30px;
}
.bootstrap .margin-bottom-35 {
margin-bottom: 35px;
}
.bootstrap .margin-bottom-40 {
margin-bottom: 40px;
}
.bootstrap .margin-bottom-50 {
margin-bottom: 50px;
}
.bootstrap .margin-bottom-60 {
margin-bottom: 60px;
}
.bootstrap .margin-bottom-70 {
margin-bottom: 70px;
}
.bootstrap .margin-bottom-75 {
margin-bottom: 75px;
}
.bootstrap .margin-bottom-80 {
margin-bottom: 80px;
}
.bootstrap .margin-bottom-90 {
margin-bottom: 90px;
}
.bootstrap .margin-bottom-100 {
margin-bottom: 100px;
}
.bootstrap .margin-bottom-150 {
margin-bottom: 150px;
}
.bootstrap .margin-left-0 {
margin-left: 0px;
}
.bootstrap .margin-right-0 {
margin-right: 0px;
}
.bootstrap .margin-bottom-0 {
margin-bottom: 0px;
}
.bootstrap div.margin-bottom-0 {
margin-bottom: 0px;
}
.bootstrap .margin-top-0 {
margin-top: 0px;
}
.bootstrap .margin-top-5 {
margin-top: 5px;
}
.bootstrap .margin-top-10 {
margin-top: 10px;
}
.bootstrap .margin-top-15 {
margin-top: 15px;
}
.bootstrap .margin-top-20 {
margin-top: 20px;
}
.bootstrap .margin-top-25 {
margin-top: 25px;
}
.bootstrap .margin-top-30 {
margin-top: 30px;
}
.bootstrap .margin-top-35 {
margin-top: 35px;
}
.bootstrap .margin-top-40 {
margin-top: 40px;
}
.bootstrap .margin-top-45 {
margin-top: 45px;
}
.bootstrap .margin-top-50 {
margin-top: 50px;
}
.bootstrap .margin-top-60 {
margin-top: 60px;
}
.bootstrap .margin-top-70 {
margin-top: 70px;
}
.bootstrap .margin-top-80 {
margin-top: 80px;
}
.bootstrap .margin-top-100 {
margin-top: 100px;
}
.bootstrap .margin-top-150 {
margin-top: 150px;
}
.bootstrap .margin-top-200 {
margin-top: 200px;
}
.bootstrap .margin-top-250 {
margin-top: 250px;
}
.bootstrap .margin-top-300 {
margin-top: 300px;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-right-20-sm-up {
margin-right: 20px;
}
}
@media only screen and (max-width: 767px) {
.bootstrap .margin-top-10-xs {
margin-top: 10px;
}
}
@media only screen and (max-width: 767px) {
.bootstrap .margin-top-20-xs {
margin-top: 20px;
}
}
.bootstrap .margin-top-30-xs-sm {
margin-top: 30;
}
@media only screen and (min-width: 992px) {
.bootstrap .margin-top-30-xs-sm {
margin-top: 0;
}
}
.bootstrap .margin-top-50-30 {
margin-top: 50px;
}
@media only screen and (max-width: 992px) {
.bootstrap .margin-top-50-30 {
margin-top: 30px;
}
}
.bootstrap div.margin-bottom-50-30 {
margin-bottom: 50px;
}
@media only screen and (max-width: 992px) {
.bootstrap div.margin-bottom-50-30 {
margin-bottom: 30px;
}
}
.bootstrap .margin-top-40-20 {
margin-top: 40px;
}
@media only screen and (max-width: 992px) {
.bootstrap .margin-top-40-20 {
margin-top: 20px;
}
}
.bootstrap div.margin-bottom-40-20 {
margin-bottom: 40px;
}
@media only screen and (max-width: 992px) {
.bootstrap div.margin-bottom-40-20 {
margin-bottom: 20px;
}
}
.bootstrap .margin-bottom-50-30 {
margin-bottom: 50px;
}
@media only screen and (max-width: 992px) {
.bootstrap .margin-bottom-50-30 {
margin-bottom: 30px;
}
}
.bootstrap .margin-bottom-80-40 {
margin-bottom: 80px;
}
@media only screen and (max-width: 992px) {
.bootstrap .margin-bottom-80-40 {
margin-bottom: 40px;
}
}
.bootstrap .margin-bottom-150-100 {
margin-bottom: 150px;
}
@media only screen and (max-width: 992px) {
.bootstrap .margin-bottom-150-100 {
margin-bottom: 100px;
}
}
.bootstrap div.margin-bottom-150-50 {
margin-bottom: 150px;
}
@media only screen and (max-width: 992px) {
.bootstrap div.margin-bottom-150-50 {
margin-bottom: 50px;
}
}
.bootstrap .margin-bottom-100 {
margin-bottom: 100px;
}
.bootstrap .margin-bottom-200 {
margin-bottom: 200px;
}
@media only screen and (max-width: 767px) {
.bootstrap .margin-bottom-20-xs {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-left-10-sm-up {
margin-left: 10px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-left-15-sm-up {
margin-left: 15px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-right-15-sm-up {
margin-right: 15px;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-hookpad-hero-buttons {
margin-top: 30px;
}
}
.bootstrap .margin-top-hookpad-hero-video {
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-hookpad-hero-video {
margin-top: 0px;
}
}
.bootstrap .margin-top-hookpad-hero {
margin-top: -300px;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-hookpad-hero {
margin-top: -200px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .margin-top-hookpad-hero {
margin-top: -250px;
}
}
.bootstrap .margin-bottom-hookpad-hero {
margin-top: 0px;
}
.bootstrap .margin-top-books-hero-bot {
margin-top: -430px;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-books-hero-bot {
margin-top: -320px;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .margin-top-books-hero-bot {
margin-top: -370px;
}
}
.bootstrap .margin-top-books-hero-buttons {
margin-top: 30px;
}
.bootstrap .margin-top-neg-10 {
margin-top: -10px;
}
.bootstrap .margin-top-neg-20 {
margin-top: -20px;
}
.bootstrap .margin-top-neg-30 {
margin-top: -30px;
}
.bootstrap .margin-top-neg-40 {
margin-top: -40px;
}
.bootstrap .margin-top-neg-50 {
margin-top: -50px;
}
.bootstrap .margin-top-neg-100 {
margin-top: -100px;
}
.bootstrap .margin-top-neg-200 {
margin-top: -200px;
}
.bootstrap .margin-top-neg-300 {
margin-top: -300px;
}
.bootstrap .margin-top-1em {
margin-top: 1em;
}
.bootstrap .margin-top-1point5em {
margin-top: 1.5em;
}
.bootstrap .margin-top-2em {
margin-top: 2em;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-1em-sm-up {
margin-top: 1em;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-1point5em-sm-up {
margin-top: 1.5em;
}
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-2em-sm-up {
margin-top: 2em;
}
}
.bootstrap .margin-left-neg-50 {
margin-left: -50px;
}
.bootstrap .margin-flat {
margin-left: -0.25em;
margin-right: -0.15em;
}
.bootstrap .fb-wrapper {
display: inline-flex;
flex-direction: column;
align-items: center; /* Centers the subscript below the superscript */
line-height: 1;
}
.bootstrap .fb-top {
font-size: 0.75em; /* Adjust as needed */
bottom: 0.6em;
margin-right: 0;
position: relative;
}
.bootstrap .fb-bot {
font-size: 0.75em;
bottom: 0.7em;
position: relative;
margin-right: 0;
}
.bootstrap .wider-spaces {
word-spacing: 0.2em; /* Adjust as needed */
}
.bootstrap .border {
border: 1px solid #dadada;
}
.bootstrap .border-2 {
border: 2px solid #dadada;
}
.bootstrap .border-bottom {
border-bottom: 1px solid #dadada;
}
.bootstrap .border-left {
border-left: 1px solid #dadada;
}
.bootstrap .border-right {
border-right: 1px solid #dadada;
}
.bootstrap .border-top {
border-top: 1px solid #dadada;
}
.bootstrap .border-color-link {
border-color: #4B9ED4;
}
.bootstrap .border-none {
border: 0px;
}
/* style */
/* */
.bootstrap div.youtube-placeholder {
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/svg/theorytab-youtube-placeholder-a.svg?v=u27ji50);
}
.bootstrap div.theorytab-placeholder {
background-size: contain;
background-repeat: no-repeat;
min-height: 100px;
width: 100%;
background-image: url(/images/svg/theorytab-placeholder-xs-290px-iPhone-SE-one-line.svg?v=u27ji5p);
}
@media only screen and (min-width: 375px) {
.bootstrap div.theorytab-placeholder {
background-image: url(/images/svg/theorytab-placeholder-xs-335px-iPhone-6-one-line.svg?v=u27ji63);
}
}
@media only screen and (min-width: 768px) {
.bootstrap div.theorytab-placeholder {
background-image: url(/images/svg/theorytab-placeholder-sm-730px-tablet-one-line.svg?v=u27ji6a);
}
}
@media only screen and (min-width: 992px) {
.bootstrap div.theorytab-placeholder {
background-image: url(/images/svg/theorytab-placeholder-md-616px-one-line.svg?v=u27ji77);
}
}
@media only screen and (min-width: 1200px) {
.bootstrap div.theorytab-placeholder {
background-image: url(/images/svg/theorytab-placeholder-lg-750px-one-line.svg?v=u27ji80);
}
}
.bootstrap div.popular-chords-placeholder {
background-size: contain;
background-repeat: no-repeat;
min-height: 100px;
width: 100%;
background-image: url(/images/svg/theorytab-placeholder-popular-chords-xs.svg?v=u27ji8b);
}
@media only screen and (min-width: 768px) {
.bootstrap div.popular-chords-placeholder {
background-image: url(/images/svg/theorytab-placeholder-popular-chords-sm.svg?v=u27ji8w);
}
}
.bootstrap .text-align-right {
text-align: right;
}
.bootstrap .text-align-center {
text-align: center;
}
.bootstrap .text-align-left {
text-align: left;
}
@media only screen and (min-width: 768px) {
.bootstrap .text-align-right-sm-up {
text-align: right;
}
}
.bootstrap .text-align-center-xs {
text-align: center;
}
@media only screen and (min-width: 768px) {
.bootstrap .text-align-center-xs {
text-align: left;
}
}
.bootstrap .white-space-nowrap {
white-space: nowrap;
}
.bootstrap .white-space-normal {
white-space: normal;
}
.bootstrap .nav-bar-top {
padding-left: 10px;
padding-right: 10px;
background: #4B9ED4;
font-size: 12px;
}
.bootstrap .nav-bar-top a {
display: block;
color: #085178;
padding-top: 5px;
padding-bottom: 2px;
border-bottom: 3px solid transparent;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
.bootstrap .nav-bar-top a:hover {
color: #022F47;
text-decoration: none;
}
.bootstrap .nav-bar-top a.active {
border-color: #085178;
}
.bootstrap .price-subtotal,
.bootstrap .price-total,
.bootstrap .price-tax {
width: 80px;
}
.bootstrap .influencer-banner {
display: flex;
font-weight: medium;
height: 45px;
text-align: center;
background-color: #df8e43;
color: white;
justify-content: center; /* align horizontal */
}
.bootstrap .influencer-banner-text {
display: flex;
text-align: center;
align-items: center; /* align vertical */
}
.bootstrap .font-weight-bold {
font-weight: bold;
}
.bootstrap .font-weight-600 {
font-weight: 600;
}
.bootstrap .font-weight-500 {
font-weight: 500;
}
.bootstrap .font-weight-normal {
font-weight: normal;
}
/* style */
/* */
.bootstrap div.buy-option-series-plus {
position: relative;
}
.bootstrap .ribbon {
position: absolute;
right: -10px;
top: 15px;
background: #aa77ec;
border-radius: 3px 3px 0 3px;
font-weight: bold;
font-size: 80%;
color: #fff !important;
padding: 6px 24px;
display: block !important;
text-transform: uppercase;
}
.bootstrap .ribbon:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
bottom: -10px;
right: 0;
background: linear-gradient(135deg, #7742cc 0, #7742cc 50%, rgba(10, 14, 10, 0) 51%);
}
.bootstrap .buy-options {
width: 100%;
/*
@media only screen and (min-width: $width_lg) {
display: flex;
justify-content: center;
align-items: stretch; // stretches vertically to fill
div.buy-option {
width: 245px;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
margin-top: 31px;
}
div.buy-option-series-plus {
width: 340px;
margin-top: 0px;
}
div.buy-option-series {
//width: 260px;
//margin-top: 74px;
}
.title-series-plus {
font-size: 16px; //24px;
}
.title-series {
font-size: 16px;
}
.title {
font-size: 16px;
}
}
*/
}
.bootstrap .buy-options ul {
margin-left: 0;
padding-left: 20px;
}
.bootstrap .buy-options .buy-option {
padding: 20px;
margin-bottom: 20px;
}
.bootstrap .buy-options .title-series-plus {
font-size: 22px;
font-weight: bold;
}
.bootstrap .buy-options .title-series {
font-size: 20px;
font-weight: bold;
}
.bootstrap .buy-options .title {
font-size: 18px;
font-weight: bold;
}
.bootstrap .buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .buy-options div.add-to-cart-series-plus {
margin-top: 15px;
}
.bootstrap .buy-options div.title-and-price-series {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .buy-options {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .buy-options div.buy-option {
width: 340px;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
}
.bootstrap .buy-options div.buy-option-series-plus {
margin-top: 0px;
}
.bootstrap .buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .buy-options div.add-to-cart-series-plus {
margin-top: 34px;
}
.bootstrap .buy-options div.title-and-price-series {
margin-bottom: 62px;
}
.bootstrap .buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .buy-options .title-series {
font-size: 20px;
}
.bootstrap .buy-options .title {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .buy-options {
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .buy-options div.buy-option {
width: 380px;
margin-left: 15px;
margin-right: 15px;
padding: 30px;
}
.bootstrap .buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .buy-options div.title-and-price-series-plus {
margin-top: 31px;
}
.bootstrap .buy-options div.title-and-price-series {
margin-bottom: 62px;
}
.bootstrap .buy-options div.add-to-cart-series-plus {
margin-top: 24px;
}
.bootstrap .buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .buy-options .title-series {
font-size: 20px;
}
.bootstrap .buy-options .title {
font-size: 16px;
}
}
.bootstrap .buy-details {
width: 100%;
}
.bootstrap .buy-details .buy-detail {
font-size: 90%;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .buy-details .buy-detail p {
margin-top: 0;
padding-top: 0;
}
@media only screen and (min-width: 768px) {
.bootstrap .buy-details {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
}
.bootstrap .buy-details .buy-detail {
width: 225px;
margin-left: 5px;
margin-right: 5px;
}
.bootstrap .buy-details div.buy-detail-series-plus {
width: 290px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .buy-details div.buy-detail {
width: 215px;
margin-left: 10px;
margin-right: 10px;
padding: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .buy-details div.buy-detail-series-plus {
width: 340px;
}
}
.bootstrap .book-page {
border: 2px solid #ccc;
width: 165px;
height: 235px;
padding: 15px;
}
.bootstrap .book-page .text-placeholder {
background: #ccc;
height: 9px;
width: 115px;
margin-bottom: 12px;
}
.bootstrap .book-page .text-placeholder.a {
width: 105px;
}
.bootstrap .book-page .text-placeholder.b {
width: 125px;
}
.bootstrap .background-444 {
background: #444;
color: #fff;
}
.bootstrap .background-books-a {
color: #A08666;
color: #C4B6A2;
background: #29251B;
}
.bootstrap .background-books-b {
background: #A08666;
color: #E4E0D8;
color: #29251B;
}
.bootstrap .color-books-a {
color: #29251B;
}
/* style */
/* */
.bootstrap div.buy-option-series-plus {
position: relative;
}
.bootstrap .ribbon {
position: absolute;
right: -10px;
top: 15px;
background: #aa77ec;
border-radius: 3px 3px 0 3px;
font-weight: bold;
font-size: 80%;
color: #fff !important;
padding: 6px 24px;
display: block !important;
text-transform: uppercase;
}
.bootstrap .ribbon:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
bottom: -10px;
right: 0;
background: linear-gradient(135deg, #7742cc 0, #7742cc 50%, rgba(10, 14, 10, 0) 51%);
}
.bootstrap .hookpad-buy-options {
width: 100%;
}
.bootstrap .hookpad-buy-options ul {
margin-left: 0;
padding-left: 20px;
}
.bootstrap .hookpad-buy-options .buy-option {
padding: 20px;
margin-bottom: 20px;
}
.bootstrap .hookpad-buy-options .title-series-plus {
font-size: 22px;
font-weight: bold;
}
.bootstrap .hookpad-buy-options .title-series {
font-size: 20px;
font-weight: bold;
}
.bootstrap .hookpad-buy-options .title {
font-size: 18px;
font-weight: bold;
}
.bootstrap .hookpad-buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .hookpad-buy-options div.add-to-cart-bundle {
margin-top: 15px;
}
.bootstrap .hookpad-buy-options div.add-to-cart {
margin-top: 10px;
}
@media only screen and (min-width: 768px) {
.bootstrap .hookpad-buy-options {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .hookpad-buy-options div.buy-option {
width: 340px;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
}
.bootstrap .hookpad-buy-options div.buy-option-series-plus {
margin-top: 0px;
}
.bootstrap .hookpad-buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .hookpad-buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .hookpad-buy-options div.add-to-cart-bundle {
margin-top: 10px;
}
.bootstrap .hookpad-buy-options div.add-to-cart {
margin-top: 21px;
}
.bootstrap .hookpad-buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .hookpad-buy-options .title-series {
font-size: 20px;
}
.bootstrap .hookpad-buy-options .title {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .hookpad-buy-options {
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .hookpad-buy-options div.buy-option {
width: 380px;
margin-left: 15px;
margin-right: 15px;
padding: 30px;
}
.bootstrap .hookpad-buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .hookpad-buy-options div.title-and-price-series-plus {
margin-top: 31px;
}
.bootstrap .hookpad-buy-options div.add-to-cart-bundle {
margin-top: 10px;
}
.bootstrap .hookpad-buy-options div.add-to-cart {
margin-top: 31px;
}
.bootstrap .hookpad-buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .hookpad-buy-options .title-series {
font-size: 20px;
}
.bootstrap .hookpad-buy-options .title {
font-size: 16px;
}
}
.bootstrap .buy-details {
width: 100%;
}
.bootstrap .buy-details .buy-detail {
font-size: 90%;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .buy-details .buy-detail p {
margin-top: 0;
padding-top: 0;
}
@media only screen and (min-width: 768px) {
.bootstrap .buy-details {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
}
.bootstrap .buy-details .buy-detail {
width: 225px;
margin-left: 5px;
margin-right: 5px;
}
.bootstrap .buy-details div.buy-detail-series-plus {
width: 290px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .buy-details div.buy-detail {
width: 215px;
margin-left: 10px;
margin-right: 10px;
padding: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.bootstrap .buy-details div.buy-detail-series-plus {
width: 340px;
}
}
.bootstrap .book-page {
border: 2px solid #ccc;
width: 165px;
height: 235px;
padding: 15px;
}
.bootstrap .book-page .text-placeholder {
background: #ccc;
height: 9px;
width: 115px;
margin-bottom: 12px;
}
.bootstrap .book-page .text-placeholder.a {
width: 105px;
}
.bootstrap .book-page .text-placeholder.b {
width: 125px;
}
.bootstrap .background-444 {
background: #444;
color: #fff;
}
.bootstrap .background-books-a {
color: #A08666;
color: #C4B6A2;
background: #29251B;
}
.bootstrap .background-books-b {
background: #A08666;
color: #E4E0D8;
color: #29251B;
}
.bootstrap .color-books-a {
color: #29251B;
}
/* style */
/* */
.bootstrap div.buy-option-series-plus {
position: relative;
}
.bootstrap .ribbon {
position: absolute;
right: -10px;
top: 15px;
background: #aa77ec;
border-radius: 3px 3px 0 3px;
font-weight: bold;
font-size: 80%;
color: #fff !important;
padding: 6px 24px;
display: block !important;
text-transform: uppercase;
}
.bootstrap .ribbon:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
bottom: -10px;
right: 0;
background: linear-gradient(135deg, #7742cc 0, #7742cc 50%, rgba(10, 14, 10, 0) 51%);
}
.bootstrap .bundle-buy-options {
width: 100%;
}
.bootstrap .bundle-buy-options ul {
margin-left: 0;
padding-left: 20px;
}
.bootstrap .bundle-buy-options .buy-option {
padding: 20px;
margin-bottom: 20px;
}
.bootstrap .bundle-buy-options .title-series-plus {
font-size: 22px;
font-weight: bold;
}
.bootstrap .bundle-buy-options .title-series {
font-size: 20px;
font-weight: bold;
}
.bootstrap .bundle-buy-options .title {
font-size: 18px;
font-weight: bold;
}
.bootstrap .bundle-buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .bundle-buy-options div.add-to-cart-bundle {
margin-top: 15px;
}
.bootstrap .bundle-buy-options div.add-to-cart {
margin-top: 10px;
}
@media only screen and (min-width: 768px) {
.bootstrap .bundle-buy-options {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .bundle-buy-options div.buy-option {
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
}
.bootstrap .bundle-buy-options div.buy-option-series-plus {
margin-top: 0px;
}
.bootstrap .bundle-buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .bundle-buy-options div.title-and-price-series-plus {
margin-top: 34px;
}
.bootstrap .bundle-buy-options div.add-to-cart-bundle {
margin-top: 10px;
}
.bootstrap .bundle-buy-options div.add-to-cart {
margin-top: 21px;
}
.bootstrap .bundle-buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .bundle-buy-options .title-series {
font-size: 20px;
}
.bootstrap .bundle-buy-options .title {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .bundle-buy-options {
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .bundle-buy-options div.buy-option {
width: 440px;
margin-left: 15px;
margin-right: 15px;
padding: 30px;
}
.bootstrap .bundle-buy-options div.buy-option-series {
margin-top: 33px;
}
.bootstrap .bundle-buy-options div.title-and-price-series-plus {
margin-top: 31px;
}
.bootstrap .bundle-buy-options div.add-to-cart-bundle {
margin-top: 10px;
}
.bootstrap .bundle-buy-options div.add-to-cart {
margin-top: 31px;
}
.bootstrap .bundle-buy-options .title-series-plus {
font-size: 20px;
}
.bootstrap .bundle-buy-options .title-series {
font-size: 20px;
}
.bootstrap .bundle-buy-options .title {
font-size: 16px;
}
}
.bootstrap .font-style-italic {
font-style: italic;
}
.bootstrap .home-products {
width: 100%;
}
.bootstrap .home-products div.home-product {
background: #fafafa;
background: #eeeeee;
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
.bootstrap .home-products {
display: flex;
justify-content: center;
}
.bootstrap .home-products div.home-product {
width: calc(50% - 15px);
}
.bootstrap .home-products div.home-product:first-child {
margin-right: 15px;
}
.bootstrap .home-products div.home-product:last-child {
margin-left: 15px;
}
}
.bootstrap .color-home-a {
color: #B91BB5;
}
.bootstrap .color-home-b {
color: #74FDA3;
}
.bootstrap .color-home-c {
color: #040D6B;
}
.bootstrap .color-home-d {
color: #FB4254;
}
.bootstrap .products {
width: 100%;
}
.bootstrap .products .product {
background: #ededed;
padding: 20px;
}
.bootstrap .products .product-name {
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
.bootstrap .products {
/* Style adjustments for viewports 768px and over go here */
/* For tablets in portrait orientation. Perfect for long-form reading */
display: flex;
justify-content: center;
align-items: stretch;
}
.bootstrap .products div.product {
width: 330px;
margin-left: 10px;
margin-right: 10px;
}
.bootstrap .products .product-name {
height: 120px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .products div.product {
width: 450px;
margin-left: 20px;
margin-right: 20px;
padding: 30px;
}
.bootstrap .products .product-name {
height: auto;
}
}
.bootstrap .line-height-1 {
line-height: 1;
}
.bootstrap .line-height-1p2 {
line-height: 1.24;
}
.bootstrap .line-height-1p2em {
line-height: 1.2em;
}
.bootstrap .line-height-1p3em {
line-height: 1.3em;
}
.bootstrap .line-height-1p4em {
line-height: 1.4em;
}
.bootstrap .line-height-16 {
line-height: 16px;
}
.bootstrap .unit-wrapper {
position: relative;
}
.bootstrap .unit-wrapper a.unit-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.bootstrap .unit-wrapper div.cta-links {
z-index: 4;
position: relative;
}
.bootstrap .unit-wrapper:hover {
cursor: pointer;
}
/* style */
/* */
.bootstrap .pricing-card {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border: 0;
border-radius: 3px;
}
.bootstrap .pricing-card div:first-child {
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap .pricing-card div:last-child {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.bootstrap .pricing-card-recommended {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.bootstrap .position-relative-top-neg-100 {
position: relative;
top: -100px;
}
.bootstrap .position-relative-top-neg-200 {
position: relative;
top: -200px;
}
.bootstrap .position-relative-top-neg-150 {
position: relative;
top: -150px;
}
.bootstrap .position-relative-top-neg-250 {
position: relative;
top: -250px;
}
.bootstrap .color-crush-font {
color: #eefa11;
}
.bootstrap .color-red {
color: rgb(252, 13, 27);
}
.bootstrap .color-orange {
color: rgb(241, 143, 46);
}
.bootstrap .color-blue {
color: rgb(17, 54, 222);
}
.bootstrap .color-green {
color: rgb(66, 169, 71);
}
.bootstrap .color-primary {
color: #4B9ED4;
}
.bootstrap .color-link {
color: #4B9ED4;
}
.bootstrap .color-secondary {
color: #085178;
}
.bootstrap .color-complement {
color: #F6B02A;
}
.bootstrap .color-home {
color: #ff0000;
}
.bootstrap .color-tabs {
color: #B85798;
}
.bootstrap .color-hookpad-plus {
color: #75C347;
}
.bootstrap .color-hooktheory-i,
.bootstrap .color-hooktheory-ii {
color: #4B9ED4;
}
.bootstrap .color-star-rating {
color: #F38430;
}
.bootstrap .color-text {
color: #444;
}
.bootstrap .color-text-light {
color: #999;
}
.bootstrap .color-price {
color: #AF2813;
}
.bootstrap .color-white {
color: #fff;
}
.bootstrap .color-red {
color: #ff0000;
}
.bootstrap .color-link {
color: #4B9ED4;
}
.bootstrap .color-secondary {
color: #085178;
}
.bootstrap .color-complement {
color: #F6B02A;
}
.bootstrap .color-price-hookpad {
color: #1177B8;
color: #52A5F5;
}
.bootstrap .color-hookpad-pricing {
color: #043039;
}
.bootstrap .color-books-dark {
color: #29251B;
}
.bootstrap .color-theory-logo {
color: #C9E1F1;
color: #085278;
}
.bootstrap .color-logo-dk-blue {
color: #285BA6;
}
.bootstrap .color-logo-blue {
color: #4C9ED4;
}
.bootstrap .opacity-70 {
opacity: 0.7;
}
.bootstrap .opacity-50 {
opacity: 0.5;
}
/* style */
/* */
.bootstrap .box-shadow-card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.bootstrap .shadow-xl {
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5);
}
.bootstrap .shadow-lg {
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25);
}
.bootstrap .shadow-md {
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.15);
}
.bootstrap .shadow-sm {
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.15);
}
.bootstrap .shadow-xs {
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.bootstrap .cursor-not-allowed:hover {
cursor: not-allowed;
}
.bootstrap .cursor-grab-on-hover:hover {
cursor: grab;
}
.bootstrap .cursor-pointer-on-hover:hover {
cursor: pointer;
}
.bootstrap .cursor-text-on-hover:hover {
cursor: text;
}
/* style */
/* */
.bootstrap .swiper-container-videos {
position: static;
}
.bootstrap .swiper-button-next-videos,
.bootstrap .swiper-button-prev-videos {
background-color: #fff;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
width: 40px;
height: 40px;
background-size: 20px 20px;
border-radius: 20px;
z-index: 2;
}
.bootstrap .swiper-button-next-videos {
right: -20px;
}
.bootstrap .swiper-button-prev-videos {
left: -20px;
}
.bootstrap .swiper-button-next-videos,
.bootstrap .swiper-button-prev-videos {
top: 65px;
}
.bootstrap .swiper-button-next-videos.swiper-button-disabled,
.bootstrap .swiper-button-prev-videos.swiper-button-disabled {
opacity: 0;
}
.bootstrap .position-relative {
position: relative;
}
.bootstrap .position-absolute {
position: absolute;
}
.bootstrap .position-absolute-bottom {
position: absolute;
left: 0;
bottom: 0;
}
.bootstrap .position-top-3 {
position: relative;
top: 3px;
}
.bootstrap div.position-top-m100 {
position: relative;
margin-top: -100px;
}
.bootstrap .g-signin2 {
width: 100%;
}
.bootstrap div.div-copilot-logo .copilot-cls-1 {
clip-path: url(#clippath);
}
.bootstrap div.div-copilot-logo .copilot-cls-2,
.bootstrap div.div-copilot-logo .copilot-cls-3,
.bootstrap div.div-copilot-logo .copilot-cls-4,
.bootstrap div.div-copilot-logo .copilot-cls-5,
.bootstrap div.div-copilot-logo .copilot-cls-6,
.bootstrap div.div-copilot-logo .copilot-cls-7 {
stroke-width: 0px;
}
.bootstrap div.div-copilot-logo .copilot-cls-2,
.bootstrap div.div-copilot-logo .copilot-cls-8 {
fill: none;
}
.bootstrap div.div-copilot-logo .copilot-cls-3 {
fill: url(#copilot-linear-gradient);
}
.bootstrap div.div-copilot-logo .copilot-cls-4 {
fill: url(#copilot-linear-gradient-4);
}
.bootstrap div.div-copilot-logo .copilot-cls-5 {
fill: url(#copilot-linear-gradient-2);
}
.bootstrap div.div-copilot-logo .copilot-cls-6 {
fill: url(#copilot-linear-gradient-3);
}
.bootstrap div.div-copilot-logo .div-copilot-dark .copilot-cls-8 {
stroke: #bebebe;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 54.98px;
}
.bootstrap div.div-copilot-logo .div-copilot-dark .copilot-cls-7 {
fill: #3f3f3f;
}
.bootstrap div.div-copilot-logo .div-copilot-light .copilot-cls-8 {
stroke: #3f3f3f;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 54.98px;
}
.bootstrap div.div-copilot-logo .div-copilot-light .copilot-cls-7 {
fill: rgb(235, 235, 235);
}
.bootstrap div.div-copilot-logo .div-copilot-dark-active .copilot-cls-8 {
stroke: rgb(75, 158, 250);
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 54.98px;
}
.bootstrap div.div-copilot-logo .div-copilot-dark-active .copilot-cls-7 {
fill: #3f3f3f;
}
.bootstrap div.div-copilot-logo .div-copilot-light-active .copilot-cls-8 {
stroke: rgb(75, 158, 250);
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 54.98px;
}
.bootstrap div.div-copilot-logo .div-copilot-light-active .copilot-cls-7 {
fill: rgb(235, 235, 235);
}
.bootstrap div.div-copilot-logo-dark .st0 {
fill: transparent;
}
.bootstrap div.div-copilot-logo-dark .st1 {
fill: rgb(188, 167, 213);
}
.bootstrap div.div-copilot-logo-dark .st2 {
fill: #E14872;
}
.bootstrap div.div-copilot-logo-dark .st3 {
fill: #DB3A48;
}
.bootstrap div.div-copilot-logo-dark .st4 {
fill: #D32D1B;
}
.bootstrap div.div-copilot-logo-dark .st5 {
fill: #DB2E19;
}
.bootstrap div.div-copilot-logo-dark .st6 {
fill: #D82E1A;
}
.bootstrap div.div-copilot-logo-dark .st7 {
fill: #D92F1A;
}
.bootstrap div.div-copilot-logo-dark .st8 {
fill: #DA5722;
}
.bootstrap div.div-copilot-logo-dark .st9 {
fill: #E07126;
}
.bootstrap div.div-copilot-logo-dark .st10 {
fill: #E8922C;
}
.bootstrap div.div-copilot-logo-dark .st11 {
fill: #E5A730;
}
.bootstrap div.div-copilot-logo-dark .st12 {
fill: #AEA22C;
}
.bootstrap div.div-copilot-logo-dark .st13 {
fill: #5F9D29;
}
.bootstrap div.div-copilot-logo-dark .st14 {
fill: #528F34;
}
.bootstrap div.div-copilot-logo-dark .st15 {
fill: #3B8981;
}
.bootstrap div.div-copilot-logo-dark .st16 {
fill: #38797C;
}
.bootstrap div.div-copilot-logo-dark .st17 {
fill: #4A5382;
}
.bootstrap div.div-copilot-logo-dark .st18 {
fill: #6F3E88;
}
.bootstrap div.div-copilot-logo-dark .st19 {
fill: #8C3091;
}
.bootstrap div.div-copilot-logo-dark .st20 {
fill: #9A2E83;
}
.bootstrap div.div-copilot-logo-dark .st21 {
fill: #C32A8B;
}
.bootstrap div.div-copilot-logo-light .st0 {
fill: transparent;
}
.bootstrap div.div-copilot-logo-light .st1 {
fill: #6e3591;
}
.bootstrap div.div-copilot-logo-light .st2 {
fill: #DB3A48;
}
.bootstrap div.div-copilot-logo-light .st3 {
fill: #D32D1B;
}
.bootstrap div.div-copilot-logo-light .st4 {
fill: #DB2E19;
}
.bootstrap div.div-copilot-logo-light .st5 {
fill: #D82E1A;
}
.bootstrap div.div-copilot-logo-light .st6 {
fill: #D92F1A;
}
.bootstrap div.div-copilot-logo-light .st7 {
fill: #DA5722;
}
.bootstrap div.div-copilot-logo-light .st8 {
fill: #E07126;
}
.bootstrap div.div-copilot-logo-light .st9 {
fill: #E8922C;
}
.bootstrap div.div-copilot-logo-light .st10 {
fill: #E5A730;
}
.bootstrap div.div-copilot-logo-light .st11 {
fill: #AEA22C;
}
.bootstrap div.div-copilot-logo-light .st12 {
fill: #5F9D29;
}
.bootstrap div.div-copilot-logo-light .st13 {
fill: #528F34;
}
.bootstrap div.div-copilot-logo-light .st14 {
fill: #3B8981;
}
.bootstrap div.div-copilot-logo-light .st15 {
fill: #38797C;
}
.bootstrap div.div-copilot-logo-light .st16 {
fill: #4A5382;
}
.bootstrap div.div-copilot-logo-light .st17 {
fill: #6F3E88;
}
.bootstrap div.div-copilot-logo-light .st18 {
fill: #8C3091;
}
.bootstrap div.div-copilot-logo-light .st19 {
fill: #9A2E83;
}
.bootstrap div.div-copilot-logo-light .st20 {
fill: #C32A8B;
}
.bootstrap div.div-copilot-logo-dark-active .st0 {
fill: transparent;
}
.bootstrap div.div-copilot-logo-dark-active .st1 {
fill: rgb(75, 158, 250);
}
.bootstrap div.div-copilot-logo-dark-active .st2 {
fill: #E14872;
}
.bootstrap div.div-copilot-logo-dark-active .st3 {
fill: #DB3A48;
}
.bootstrap div.div-copilot-logo-dark-active .st4 {
fill: #D32D1B;
}
.bootstrap div.div-copilot-logo-dark-active .st5 {
fill: #DB2E19;
}
.bootstrap div.div-copilot-logo-dark-active .st6 {
fill: #D82E1A;
}
.bootstrap div.div-copilot-logo-dark-active .st7 {
fill: #D92F1A;
}
.bootstrap div.div-copilot-logo-dark-active .st8 {
fill: #DA5722;
}
.bootstrap div.div-copilot-logo-dark-active .st9 {
fill: #E07126;
}
.bootstrap div.div-copilot-logo-dark-active .st10 {
fill: #E8922C;
}
.bootstrap div.div-copilot-logo-dark-active .st11 {
fill: #E5A730;
}
.bootstrap div.div-copilot-logo-dark-active .st12 {
fill: #AEA22C;
}
.bootstrap div.div-copilot-logo-dark-active .st13 {
fill: #5F9D29;
}
.bootstrap div.div-copilot-logo-dark-active .st14 {
fill: #528F34;
}
.bootstrap div.div-copilot-logo-dark-active .st15 {
fill: #3B8981;
}
.bootstrap div.div-copilot-logo-dark-active .st16 {
fill: #38797C;
}
.bootstrap div.div-copilot-logo-dark-active .st17 {
fill: #4A5382;
}
.bootstrap div.div-copilot-logo-dark-active .st18 {
fill: #6F3E88;
}
.bootstrap div.div-copilot-logo-dark-active .st19 {
fill: #8C3091;
}
.bootstrap div.div-copilot-logo-dark-active .st20 {
fill: #9A2E83;
}
.bootstrap div.div-copilot-logo-dark-active .st21 {
fill: #C32A8B;
}
.bootstrap div.div-copilot-logo-light-active .st0 {
fill: transparent;
}
.bootstrap div.div-copilot-logo-light-active .st1 {
fill: rgb(75, 158, 250);
}
.bootstrap div.div-copilot-logo-light-active .st2 {
fill: #DB3A48;
}
.bootstrap div.div-copilot-logo-light-active .st3 {
fill: #D32D1B;
}
.bootstrap div.div-copilot-logo-light-active .st4 {
fill: #DB2E19;
}
.bootstrap div.div-copilot-logo-light-active .st5 {
fill: #D82E1A;
}
.bootstrap div.div-copilot-logo-light-active .st6 {
fill: #D92F1A;
}
.bootstrap div.div-copilot-logo-light-active .st7 {
fill: #DA5722;
}
.bootstrap div.div-copilot-logo-light-active .st8 {
fill: #E07126;
}
.bootstrap div.div-copilot-logo-light-active .st9 {
fill: #E8922C;
}
.bootstrap div.div-copilot-logo-light-active .st10 {
fill: #E5A730;
}
.bootstrap div.div-copilot-logo-light-active .st11 {
fill: #AEA22C;
}
.bootstrap div.div-copilot-logo-light-active .st12 {
fill: #5F9D29;
}
.bootstrap div.div-copilot-logo-light-active .st13 {
fill: #528F34;
}
.bootstrap div.div-copilot-logo-light-active .st14 {
fill: #3B8981;
}
.bootstrap div.div-copilot-logo-light-active .st15 {
fill: #38797C;
}
.bootstrap div.div-copilot-logo-light-active .st16 {
fill: #4A5382;
}
.bootstrap div.div-copilot-logo-light-active .st17 {
fill: #6F3E88;
}
.bootstrap div.div-copilot-logo-light-active .st18 {
fill: #8C3091;
}
.bootstrap div.div-copilot-logo-light-active .st19 {
fill: #9A2E83;
}
.bootstrap div.div-copilot-logo-light-active .st20 {
fill: #C32A8B;
}
.bootstrap div.div-copilot-panel {
display: flex;
flex-direction: column;
height: 100%;
}
.bootstrap div.div-copilot-panel-header {
flex-grow: 0;
}
.bootstrap div.div-copilot-panel-body {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-bg);
width: 100%;
}
.bootstrap div.div-copilot-panel-body div.div-copilot-solutions-overflow-vertical {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
white-space: nowrap;
position: relative;
}
.bootstrap div.div-copilot-panel-body div.div-copilot-solutions-vertical {
padding-left: 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 0px;
transition: top 100ms ease-out;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.bootstrap div.div-copilot-panel-body div.div-copilot-solutions-vertical div.copilot-solution {
height: 46px;
background: var(--color-bg);
flex-shrink: 0;
margin-left: 4px;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
}
.bootstrap div.div-copilot-panel-body div.div-copilot-solution-outline-vertical {
position: absolute;
left: 0px;
top: 104px;
border-style: dashed;
border-width: 4px;
border-color: var(--color-primary);
width: 176px;
height: 46px;
}
.bootstrap div.div-copilot-panel-footer {
flex-grow: 0;
border-bottom: 1px solid var(--color-border-header-bottom);
}
.bootstrap div.div-copilot-solution-outline {
position: absolute;
left: 67px;
top: 0px;
border-style: dashed;
border-width: 4px;
border-color: var(--color-primary);
width: 46px;
height: 46px;
}
.bootstrap div.div-copilot-solutions-overflow-x {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 100px;
white-space: nowrap;
}
.bootstrap div.div-copilot-solutions-overflow-x-hidden {
width: 100%;
overflow-x: hidden;
white-space: nowrap;
position: relative;
}
.bootstrap div.div-copilot-solutions {
padding-left: 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 0px;
transition: left 100ms ease-out;
position: relative;
}
.bootstrap .bounce-left {
animation: bounceLeft 0.3s ease;
}
.bootstrap .bounce-right {
animation: bounceRight 0.3s ease;
}
.bootstrap .bounce-top {
animation: bounceTop 0.3s ease;
}
.bootstrap .bounce-bottom {
animation: bounceBottom 0.3s ease;
}
@keyframes bounceLeft {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
@keyframes bounceRight {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
@keyframes bounceTop {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes bounceBottom {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/*
div.copilot-solution {
width: 46px;
height: 46px;
//background-color: rgba(255, 0, 255, 0.8);
background: var(--color-button);
background: var(--color-bg-ui-group);
margin-left: 2px;
margin-right: 2px;
flex-shrink: 0;
//color: #fff;
}
*/
.bootstrap div.copilot-solution:hover {
cursor: pointer;
}
.bootstrap div.div-copilot-solution-outline:hover {
cursor: pointer;
}
.bootstrap div.copilot-solution-pending {
background: var(--color-button);
background: var(--color-bg-ui-group);
}
.bootstrap .mui-svg-icon-scale-2 {
transform: scale(2);
}
.bootstrap .mui-svg-icon-scale-1p5 {
transform: scale(1.5);
}
@keyframes rotateDash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 12;
}
}
.bootstrap .infill-pending-circle {
stroke: var(--color-primary);
stroke-dasharray: 80px, 200px;
stroke-dashoffset: 0;
animation: animation-infill-pending-circle 1.4s ease-in-out infinite;
}
@keyframes animation-infill-pending-circle {
0% {
stroke-dasharray: 1px, 200px;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -15px;
}
100% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -125px;
}
}
.bootstrap .infill-chords-icon {
transform: scale(2);
margin-left: 0px;
margin-right: 10px;
}
.bootstrap .infill-both-icon {
transform: scale(2);
margin-left: 0px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.bootstrap .aria-button {
background-color: rgb(72, 157, 214);
color: #fff;
padding: 15px 30px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border 0.3s;
border: 2px solid transparent;
}
.bootstrap .aria-button:hover {
color: #fff;
background-color: hsla(204, 63%, 56%, 0.5);
}
.bootstrap .aria-faq .bs-accordion .panel-default {
border: 0px;
}
.bootstrap .aria-faq .bs-accordion .panel-heading {
padding: 3px;
background-color: rgb(4, 255, 4);
border-radius: 25px;
border: none;
}
.bootstrap .aria-faq .bs-accordion .panel-heading[aria-expanded=true] {
background-color: rgb(255, 237, 158);
}
.bootstrap .aria-faq .bs-accordion .panel-heading a {
display: block;
padding: 10px 15px;
color: #335374;
}
.bootstrap .aria-faq .bs-accordion .panel-heading a[aria-expanded=true] .glyphicon.glyphicon-chevron-right {
margin-top: 5px;
color: #335374;
transform: rotate(90deg);
transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bootstrap .aria-faq .bs-accordion .panel-heading a .glyphicon.glyphicon-chevron-right {
margin-top: 5px;
color: #335374;
transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* style */
/* */
.bootstrap .figma-tutorial-button {
display: flex;
border-radius: 10px;
text-align: center;
width: auto;
height: 35px;
white-space: nowrap;
align-items: center;
cursor: pointer;
justify-content: center;
padding: 2px 8px 2px 8px;
gap: 8px;
}
.bootstrap .figma-tutorial-button-default {
border: 2px solid #fff;
color: #fff;
background-color: #D2D2D2;
}
.bootstrap .figma-tutorial-button-default:hover {
background-color: #000 !important;
color: #fff;
}
.bootstrap .figma-tutorial-button-navy {
border: 2px solid #fff;
color: #fff;
width: -moz-fit-content;
width: fit-content;
}
.bootstrap .figma-tutorial-button-grey {
border: 2px solid #d2d2d2;
background-color: #fff;
color: #d2d2d2;
}
.bootstrap .figma-tutorial-button-grey:hover {
background-color: #d2d2d2 !important;
color: #fff;
}
.bootstrap .figma-numbered-list-container {
display: flex;
margin-bottom: 20px;
justify-content: left;
width: 400px;
text-align: left;
}
/*BRENDA'S CSS START */
.bootstrap .figma-half-image-text {
display: flex;
height: 100vh;
}
.bootstrap .figma-image-container {
flex: 1;
overflow: hidden;
}
.bootstrap .figma-triple-card-body {
border: 1px solid;
border-radius: 4px;
padding: 20px;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Ensure smooth transitions */
}
.bootstrap .figma-triple-card-body:hover {
box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.15);
transform: scale(1.02);
}
.bootstrap #figma-no-margin > div {
margin-bottom: 0 !important;
}
.bootstrap .figma-triangle-vertical {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
/* Adjust padding as needed */
border: none;
box-shadow: none;
color: #fff;
background-color: #0f0149;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
padding-right: 60px;
padding-left: 24px;
border-radius: 24px;
}
.bootstrap .figma-triangle-horizontal {
flex-grow: 1;
display: flex;
flex-direction: column;
/* This pushes the card title to the bottom */
padding: 20px;
/* Adjust padding as needed */
border: none;
box-shadow: none;
color: #fff;
background-color: #0f0149;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
padding-right: 60px;
padding-left: 24px;
border-radius: 24px;
height: 350px;
margin: 30px 0px;
}
.bootstrap .figma-image-container img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover; /* Ensure the image covers the container without distortion */
}
.bootstrap .figma-text-container {
flex: 1; /* Takes up half the container */
display: flex;
flex-direction: column;
justify-content: center; /* Center text vertically */
padding: 0 100px 0 0;
}
.bootstrap .figma-text-container h2 {
margin: 0 0 55px;
}
.bootstrap .figma-text-container p {
margin: 0 0 50;
}
.bootstrap .figma-feature-bullet {
text-align: center;
}
.bootstrap .figma-four-column {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.bootstrap .figma-four-column-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.bootstrap .figma-rounded-video {
border-radius: 15px; /* Adjust the value as needed */
overflow: hidden; /* This ensures that the content inside the element respects the border radius */
}
.bootstrap .figma-override-transform {
transform: translate3d(-50px, 0, 0);
}
/*END OF BRENDA'S */
.bootstrap .figma-sm-up-margin {
margin-left: 20px;
margin-right: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .figma-sm-up-margin {
margin-left: 0px;
margin-right: 0px;
}
}
.bootstrap .figma-eq-height-row {
display: flex;
}
.bootstrap .figma-eq-height-row > .col-md-4 {
display: flex;
flex-direction: column;
min-height: 0;
}
.bootstrap .figma-spotlight-card {
padding: 15px;
display: flex;
max-width: 580px;
justify-content: space-between;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Drop shadow */
margin-bottom: 36px;
}
.bootstrap .figma-spotlight-card div.spotlight-body {
display: flex;
flex-direction: column;
padding: 8px;
background-color: #fff;
flex-grow: 2;
text-overflow: ellipsis;
}
.bootstrap .figma-spotlight-card div.spotlight-image {
display: flex;
flex-direction: column;
padding: 8px;
background-color: #fff;
}
.bootstrap .figma-spotlight-card div.spotlight-content {
font-weight: 400;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Number of lines to show */
line-clamp: 3; /* Number of lines to show */
min-height: 48px;
}
.bootstrap .figma-tags {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 8px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.bootstrap .btn-clapped {
background-color: black !important;
}
.bootstrap .multitab-btn {
background-color: #4f4f4f;
border: 1px solid #4f4f4f;
padding: 5px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.bootstrap .multitab-btn:hover {
background-color: rgb(53.5, 53.5, 53.5);
color: white;
}
.bootstrap .multitab-btn:focus {
outline: none;
color: white;
}
.bootstrap .multitab-btn-active {
color: #76c3fb;
background-color: #787878;
border: 1px solid #787878;
padding: 5px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.bootstrap .multitab-btn-active:hover {
background-color: rgb(53.5, 53.5, 53.5);
color: #3798f9;
}
.bootstrap .multitab-btn-active:focus {
outline: none;
color: #3798f9;
}
.bootstrap .multitab-btn-flex {
flex: 1;
}
@media only screen and (max-width: 1200px) {
.bootstrap .multitab-btn-flex {
flex: 1 1 40%;
}
}
@media only screen and (max-width: 992px) {
.bootstrap .multitab-btn-flex {
flex: 1;
}
}
@media only screen and (max-width: 768px) {
.bootstrap .multitab-btn-flex {
flex: 1 1 40%;
}
}
.bootstrap .multitab-btn-light {
background-color: #d4d4d4;
border: 1px solid #d4d4d4;
padding: 5px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.bootstrap .multitab-btn-light:hover {
background-color: rgb(53.5, 53.5, 53.5);
color: white;
}
.bootstrap .multitab-btn-light:focus {
outline: none;
color: white;
}
.bootstrap .multitab-btn-active-light {
color: #383bf5;
background-color: #b8b6b6;
border: 1px solid #b9b9b9;
padding: 5px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.bootstrap .multitab-btn-active-light:hover {
background-color: rgb(53.5, 53.5, 53.5);
color: #3798f9;
}
.bootstrap .multitab-btn-active-light:focus {
outline: none;
color: #3798f9;
}
.bootstrap .toggle-btn-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.bootstrap .toggle-btn-container button {
font-size: small;
}
.bootstrap .right-toggle-btn-container {
display: flex;
flex-direction: column;
width: 100%;
}
.bootstrap .right-toggle-btn-container button {
margin: 5px 0;
}
@media only screen and (max-width: 992px) {
.bootstrap .right-toggle-btn-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.bootstrap .right-toggle-btn-container button {
font-size: small;
margin: 1px;
}
}
.bootstrap .multitab-placeholder-container {
width: 100%;
height: 157px;
border-radius: 13px;
margin-bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.bootstrap .multitab-placeholder-container-light {
background-color: #e6e7e8;
}
.bootstrap .multitab-placeholder-container-dark {
background-color: #4f4f4f;
}
.bootstrap .multitab-spinner-container {
height: 72px;
}
.bootstrap .text-shadow {
text-shadow: 0 0px 4px rgba(0, 0, 0, 0.5);
}
/* style */
/* */
.bootstrap .card-a {
display: flex;
flex-direction: column;
border-radius: 5px;
}
.bootstrap .card-a div.card-a-media {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bootstrap .card-a div.card-a-media > img {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bootstrap .card-a div.card-a-body {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #fff;
flex-grow: 1;
}
.bootstrap .card-a div.card-a-body.card-a-body-no-media {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
@media (hover: hover) and (pointer: fine) {
.bootstrap .card-a:hover div.card-a-body {
background-color: #B3D6EC;
background-color: #D8EAF5;
}
}
.bootstrap .card-a.card-a-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
}
.bootstrap .card-a.card-a-white div.card-a-media {
border-bottom: 1px solid #efefef;
}
.bootstrap .card-a.card-a-white div.card-a-body {
background-color: #fff;
}
@media (hover: hover) and (pointer: fine) {
.bootstrap .card-a.card-a-white:hover div.card-a-body {
background-color: #efefef;
}
}
.bootstrap .card-a.card-a-cp div.card-a-body {
background-color: #fff;
color: #000;
}
@media (hover: hover) and (pointer: fine) {
.bootstrap .card-a.card-a-cp:hover div.card-a-body {
background-color: #efefef;
}
}
.bootstrap .card-a.card-a-resource div.card-a-body {
background-color: #0B3862;
color: #fff;
}
@media (hover: hover) and (pointer: fine) {
.bootstrap .card-a.card-a-resource:hover div.card-a-body {
background-color: #274D71;
background-color: #0A2844;
background-color: #0B2E4E;
}
}
/* style */
/* */
.bootstrap .card-shop {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet */
background-color: #fff;
border: 1px solid #999;
border-radius: 8px;
box-sizing: border-box;
padding: 20px;
}
.bootstrap .card-shop ul {
padding-inline-start: 13px;
margin: 0;
}
.bootstrap .card-shop img {
width: 150px;
}
@media only screen and (min-width: 768px) {
.bootstrap .card-shop {
font-size: 1.2em;
/*margin-top: 1.5em;*/
}
.bootstrap .card-shop img {
width: 200px;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .card-shop {
font-size: 1.3em;
}
}
.bootstrap .card-shop.selected {
border-width: 4px;
border-color: #4B9ED4;
padding: 17px;
}
@media (hover: hover) and (pointer: fine) {
.bootstrap .card-shop:hover {
cursor: pointer;
}
}
.bootstrap .hyphens-auto {
-webkit-hyphens: auto;
hyphens: auto;
}
.flex-13-stretch {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-13-stretch > div {
margin-top: 0px;
margin-bottom: 40px;
}
@media only screen and (min-width: 992px) {
.flex-13-stretch {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
--width-pad: 5%;
}
.flex-13-stretch > div {
width: calc((100% - 2 * var(--width-pad)) / 3);
}
.flex-13-stretch > div:nth-child(3n+1) {
margin-right: var(--width-pad);
margin-left: 0;
}
.flex-13-stretch > div:nth-child(3n+2) {
margin-right: var(--width-pad);
margin-left: 0;
}
.flex-13-stretch > div:nth-child(3n+3) {
margin-left: 0%;
margin-right: 0;
}
}
.flex-123-stretch {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-123-stretch > div {
margin-top: 0px;
margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
.flex-123-stretch {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.flex-123-stretch > div {
width: 48%;
}
.flex-123-stretch > div:nth-child(2n+1) {
margin-right: 2%;
}
.flex-123-stretch > div:nth-child(2n+2) {
margin-left: 2%;
}
}
@media only screen and (min-width: 992px) {
.flex-123-stretch > div {
width: 31.3333%;
}
.flex-123-stretch > div:nth-child(3n+1) {
margin-right: 3%;
margin-left: 0;
}
.flex-123-stretch > div:nth-child(3n+2) {
margin-right: 3%;
margin-left: 0;
}
.flex-123-stretch > div:nth-child(3n+3) {
margin-left: 0%;
margin-right: 0;
}
}
.flex-1234-stretch > div {
margin-top: 0px;
margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
.flex-1234-stretch {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.flex-1234-stretch > div {
width: 48%;
}
.flex-1234-stretch > div:nth-child(2n+1) {
margin-right: 2%;
}
.flex-1234-stretch > div:nth-child(2n+2) {
margin-left: 2%;
}
}
@media only screen and (min-width: 992px) {
.flex-1234-stretch > div {
width: 31.3333%;
}
.flex-1234-stretch > div:nth-child(3n+1) {
margin-right: 3%;
margin-left: 0;
}
.flex-1234-stretch > div:nth-child(3n+2) {
margin-right: 3%;
margin-left: 0;
}
.flex-1234-stretch > div:nth-child(3n+3) {
margin-left: 0%;
margin-right: 0;
}
}
@media only screen and (min-width: 1200px) {
.flex-1234-stretch > div {
width: 22.75%;
}
.flex-1234-stretch > div:nth-child(4n+1) {
margin-right: 3%;
margin-left: 0;
}
.flex-1234-stretch > div:nth-child(4n+2) {
margin-left: 0%;
margin-right: 3%;
}
.flex-1234-stretch > div:nth-child(4n+3) {
margin-left: 0%;
margin-right: 3%;
}
.flex-1234-stretch > div:nth-child(4n+4) {
margin-left: 0%;
margin-right: 0;
}
}
.flex-1235-stretch > div {
margin-top: 0px;
margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
.flex-1235-stretch {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.flex-1235-stretch > div {
width: 48%;
}
.flex-1235-stretch > div:nth-child(2n+1) {
margin-right: 2%;
}
.flex-1235-stretch > div:nth-child(2n+2) {
margin-left: 2%;
}
}
@media only screen and (min-width: 992px) {
.flex-1235-stretch > div {
width: 31.3333%;
}
.flex-1235-stretch > div:nth-child(3n+1) {
margin-right: 3%;
margin-left: 0;
}
.flex-1235-stretch > div:nth-child(3n+2) {
margin-right: 3%;
margin-left: 0;
}
.flex-1235-stretch > div:nth-child(3n+3) {
margin-left: 0%;
margin-right: 0;
}
}
@media only screen and (min-width: 1200px) {
.flex-1235-stretch > div {
width: 18.4%;
}
.flex-1235-stretch > div:nth-child(5n+1) {
margin-left: 0;
margin-right: 2%;
}
.flex-1235-stretch > div:nth-child(5n+2) {
margin-left: 0%;
margin-right: 2%;
}
.flex-1235-stretch > div:nth-child(5n+3) {
margin-left: 0%;
margin-right: 2%;
}
.flex-1235-stretch > div:nth-child(5n+4) {
margin-left: 0%;
margin-right: 2%;
}
.flex-1235-stretch > div:nth-child(5n+5) {
margin-left: 0%;
margin-right: 0;
}
}
.flex-2-stretch {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.flex-2-stretch > div {
margin-top: 0px;
margin-bottom: 20px;
}
.flex-2-stretch > div {
width: 48%;
}
.flex-2-stretch > div:nth-child(2n+1) {
margin-right: 2%;
}
.flex-2-stretch > div:nth-child(2n+2) {
margin-left: 2%;
}
.bootstrap .badge {
background-color: #085278;
}
.z-index-20 {
z-index: 20;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
.bootstrap html,
.bootstrap div#scrollspy-content,
.bootstrap div.div-abs-content,
.bootstrap div.div-abs-content-has-sub-header {
scroll-behavior: smooth;
}
/* Custom styles */
.bootstrap .chord-crush-section {
padding: 20px 100px; /* The first value is for top and bottom, the second is for left and right */
}
/* For smaller screens, you might want less padding */
@media (max-width: 768px) {
.bootstrap .chord-crush-section {
padding: 20px 20px; /* Adjust the padding for small devices if 40px is too much */
}
}
.bootstrap .feature-container {
display: flex;
flex-direction: row;
}
@media only screen and (max-width: 992px) {
.bootstrap .feature-container {
display: block;
}
}
.bootstrap .feature-container-reverse {
display: flex;
flex-direction: row-reverse;
}
@media only screen and (max-width: 992px) {
.bootstrap .feature-container-reverse {
display: block;
}
}
/* Add this to ensure the flex items wrap when the row becomes too narrow */
.bootstrap .row.flex-wrap {
display: flex;
flex-wrap: wrap;
}
/* Style adjustments for the button container if it's not already styled */
.bootstrap .button-container {
display: flex;
justify-content: center; /* Center buttons horizontally */
width: 100%; /* Take the full width to center content */
}
.bootstrap .img-fluid {
max-width: 100%;
height: auto;
}
.bootstrap .content {
max-width: 100%;
}
@media (max-width: 991px) { /* Adjusting for Bootstrap's large breakpoint */
.bootstrap .col-md-5, .bootstrap .col-md-7 {
min-height: 0; /* On smaller screens, we allow the height to adjust to the content */
}
}
/* Additional responsive adjustments can be added as needed */
.bootstrap .theme-aria .background-people-behind {
background-color: transparent;
}
.bootstrap .theme-aria-banner {
color: rgba(255, 255, 255, 0.915);
background: #0E1330;
border: 3px solid; /* Define the border width and style */
-o-border-image: linear-gradient(to right, red, orange, yellow, rgb(2, 195, 2), rgb(0, 162, 255), rgb(154, 4, 247)) 1;
border-image: linear-gradient(to right, red, orange, yellow, rgb(2, 195, 2), rgb(0, 162, 255), rgb(154, 4, 247)) 1; /* Apply multi-color gradient to border */
}
.bootstrap .my-features {
padding: 50px 0;
text-align: center;
}
.bootstrap .feature-card {
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Card shadow */
margin: auto; /* For horizontal centering if needed */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}
.bootstrap .feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}
.bootstrap .feature-image {
max-width: 100px; /* Adjust as needed */
height: auto;
margin-bottom: 20px;
border-radius: 10px; /* If you want rounded corners on your images */
}
.bootstrap .feature-image-animation {
max-width: 500px; /* Adjust as needed */
height: auto;
border-radius: 10px; /* If you want rounded corners on your images */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}
.bootstrap .feature-image-animation:hover {
transform: translateY(-5px);
filter: drop-shadow(5px 5px 30px rgba(61, 61, 61, 0.076));
transform: scale(1.04);
}
.bootstrap .feature-title {
color: #333;
margin-bottom: 15px;
}
.bootstrap .feature-description {
margin-bottom: 20px;
color: black; /* Description text color */
}
.bootstrap .feature-link {
text-decoration: none;
color: #000000; /* Color for your 'LEARN MORE' link */
font-weight: bold;
}
.bootstrap .feature-list {
list-style-type: none; /* Removes the default list bullet */
padding-left: 0; /* Aligns text with the rest of the card content */
text-align: left; /* Aligns text to the left */
margin-bottom: 20px; /* Space before the 'LEARN MORE' link */
}
.bootstrap .feature-list li {
position: relative; /* For positioning the pseudo-element */
padding-left: 1.5em; /* Space for the bullet replacement */
}
.bootstrap .feature-list li:before {
content: "•"; /* The bullet replacement */
position: absolute; /* Position absolutely within the li */
left: 0; /* Align with the left edge of the li */
color: #000000; /* Bullet color */
}
.bootstrap .margin-bottom-xs {
margin-bottom: 4px;
}
.bootstrap .margin-bottom-sm {
margin-bottom: 8px;
}
.bootstrap .margin-bottom-md {
margin-bottom: 16px;
}
.bootstrap .margin-bottom-lg {
margin-bottom: 24px;
}
.bootstrap .margin-bottom-xl {
margin-bottom: 32px;
}
.bootstrap .button-container {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.bootstrap .tos-note-container {
margin-top: 0px;
padding-bottom: 20px;
text-align: center;
}
.bootstrap .feature-section {
padding-bottom: 100px;
}
.bootstrap .feature-heading {
font-size: 36px;
text-align: center;
}
.bootstrap .feature-text {
font-size: 20px;
text-align: center;
}
.bootstrap .feature-text-landing-page {
font-size: 18px;
text-align: left;
}
.bootstrap .feature-row {
text-align: center;
}
.bootstrap .feature-row .card-title {
font-size: 1.25rem; /* Example, adjust as needed */
}
.bootstrap .feature-row .card-text {
font-size: 1rem; /* Example, adjust as needed */
}
/* Change font color for all hyperlinks in the Aria theme */
.bootstrap .theme-aria a:not(.btn) {
color: rgb(72, 157, 214);
text-decoration: none;
}
.bootstrap .feature-image {
max-width: 700px;
max-height: 600px; /* Example value; adjust as needed */
width: 100%; /* Make the image responsive */
height: 100%; /* Set a specific height */
-o-object-fit: scale-down;
object-fit: scale-down; /* Cover the container box; may clip the image */
}
.bootstrap .theme-aria a:hover {
color: rgb(72, 157, 214);
text-decoration: underline;
}
.bootstrap .theme-aria .bs-accordion .panel-default {
border: none;
}
.bootstrap .theme-aria .bs-accordion .panel-heading {
padding: 0;
background-color: transparent;
border: none;
}
.bootstrap .theme-aria .bs-accordion .panel-heading[aria-expanded=true] {
background-color: transparent;
}
.bootstrap .theme-aria .bs-accordion .panel-heading a {
display: block;
background-color: rgb(48, 48, 48);
color: #fff;
padding: 20px;
border: 1px solid rgb(44, 44, 44);
border-radius: 4px;
margin-bottom: 20px;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.15);
}
.bootstrap .theme-aria .bs-accordion .panel-heading a .glyphicon {
color: #fff;
}
.bootstrap .theme-aria .bs-accordion .panel-heading a:hover {
box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.15);
}
.bootstrap .theme-aria .bs-accordion .panel-heading a .glyphicon,
.bootstrap .theme-aria .bs-accordion .panel-heading a .glyphicon-chevron-right,
.bootstrap .theme-aria .bs-accordion .panel-heading a[aria-expanded=false] .glyphicon,
.bootstrap .theme-aria .bs-accordion .panel-heading a[aria-expanded=true] .glyphicon {
color: #fff !important;
}
.bootstrap .theme-aria .bs-accordion .panel-heading a[aria-expanded=true] .glyphicon.glyphicon-chevron-right {
color: #fff;
transform: rotate(90deg);
transition: transform 0.3s ease;
}
.bootstrap .theme-aria .bs-accordion .panel-collapse {
border: none;
}
.bootstrap .theme-aria .bs-accordion .panel-body {
background-color: #0E1330;
color: #FFFFFF;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 5px 5px 30px rgba(0, 0, 255, 0.056);
}
.bootstrap .theme-aria-codebox {
background-color: #151d48;
font-family: "Courier New", Courier, monospace;
font-size: 0.85em;
border-radius: 4px;
box-shadow: 5px 5px 30px rgba(0, 0, 255, 0.056);
}
.bootstrap .theme-aria {
background-color: rgb(11, 12, 30);
color: #e0e0e0;
}
.bootstrap .theme-aria img,
.bootstrap .blue-shadow {
filter: drop-shadow(1px 1px 5px 0 rgba(1, 1, 1, 0.15));
border-radius: 4px;
}
.bootstrap .card-body {
background-color: rgb(48, 48, 48);
border: 1px solid rgb(120, 120, 120);
color: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Ensure smooth transitions */
}
.bootstrap .card-body:hover {
box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.15);
transform: scale(1.02);
}
.bootstrap .card-body-landing-page {
background-color: #ffffff;
color: #000000;
box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.15);
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Ensure smooth transitions */
display: flex;
flex-direction: column; /* Align card content vertically */
flex: 1 0 auto; /* Allows the card to expand to fill the space */
}
@media (max-width: 992px) {
.bootstrap .theme-aria .card-body {
padding-bottom: 30px;
}
.bootstrap .theme-aria .card-text {
font-size: 16px;
}
.bootstrap .theme-aria .card-title {
font-size: 30px;
}
}
.bootstrap .theme-crush-1 {
background: linear-gradient(180deg, #e37244, #fc9ed7);
}
.bootstrap .theme-light-gray {
background: #eeeeee;
color: #444;
}
.bootstrap .theme-white {
background-color: #ffffff;
color: #333;
}
.bootstrap .theme-white-sm-white-none {
background-color: transparent;
color: #333;
}
@media only screen and (min-width: 768px) {
.bootstrap .theme-white-sm-white-none {
background-color: #ffffff;
}
}
.bootstrap .theme-turq-1 {
background-color: #C6FEF9;
color: #000;
height: 100vh;
}
.bootstrap .theme-jd-teal {
background-color: #D7F5DF;
color: #335374;
height: 100vh;
}
.bootstrap .theme-jd-teal-lilac {
background-image: linear-gradient(30deg, #D7F5DF, #A2B4F5);
color: #335374;
height: 100vh;
}
.bootstrap .theme-crush-orange {
background-image: linear-gradient(0deg, #fff9c3, #fffbbe);
color: #335374;
height: 100vh;
}
.bootstrap .theme-crush-grad-2 {
background-image: url("/images/gradients/gradient-2.jpg");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-crush-grad-5 {
background-image: url("/images/gradients/Gradient-5.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-crush-grad-6 {
background-image: url("/images/gradients/Gradient-6.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad1 {
background-image: url("/images/gradients/Gradient-1.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad2 {
background-image: url("/images/gradients/gradient-2.jpg");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad3 {
background-image: url("/images/gradients/Gradient-3.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad4 {
background-image: url("/images/gradients/Gradient-4.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad5 {
background-image: url("/images/gradients/Gradient-5.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad6 {
background-image: url("/images/gradients/Gradient-6.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad7 {
background-image: url("/images/gradients/Pink and Yellow Gradient 7.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad8 {
background-image: url("/images/gradients/PB-Gradient-8.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad10 {
background-image: url("/images/gradients/Teal-4.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad11 {
background-image: url("/images/gradients/Teal-1.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad12 {
background-image: url("/images/gradients/Pink and Yellow Gradient 4.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-grad13 {
background-image: url("/images/gradients/PB-Gradient-8.png");
background-size: 100% 100%;
color: #335374;
}
.bootstrap .theme-jd-lilac-teal {
background-image: linear-gradient(30deg, #A2B4F5, #D7F5DF);
color: #335374;
height: 100vh;
}
.bootstrap .theme-jd-lilac {
background-color: #A2B4F5;
color: #335374;
height: 100vh;
}
.bootstrap .theme-jd-white {
background-color: #EEEEEE;
color: #335374;
height: 100vh;
}
.bootstrap .theme-turq-1h {
background-color: #C6FEF9;
color: #000;
height: 100vh;
}
.bootstrap .theme-turq-2 {
background-color: #A5FEEC;
color: #0F5277;
}
.bootstrap .theme-turq-2 h2.complement {
color: #F4BD3B;
}
.bootstrap .theme-turq-2 .terra {
color: #DA5E56 !important;
}
.bootstrap .theme-turq-2 .border {
border: 3px solid #F4BD3B;
}
.bootstrap .theme-turq-2 .btn-primary {
background: #0F5277;
border-color: #0F5277;
color: #fff;
}
.bootstrap .theme-turq-2 .btn-primary-open {
background: none;
border-color: #0F5277;
color: #0F5277;
}
.bootstrap .theme-turq-2-inverse {
background-color: #1E29C6;
color: #A6FEEB;
}
.bootstrap .theme-mauve-1 {
background-color: #F9DEE8;
color: #000;
}
.bootstrap .theme-mauve-2 {
background-color: #FDDCDB;
color: #1E29C6;
}
.bootstrap .theme-mauve-3 {
background-color: #E3B5BF;
color: #fff;
}
.bootstrap .theme-terra-1 {
background-color: #DA5E56;
color: #fff;
}
.bootstrap .theme-terra-1 h1, .bootstrap .theme-terra-1 h2, .bootstrap .theme-terra-1 h3, .bootstrap .theme-terra-1 h4, .bootstrap .theme-terra-1 h5 {
color: #F4BD3B;
}
.bootstrap .theme-terra-2 {
background-color: #FC535B;
color: #FBFEAC;
}
.bootstrap .theme-terra-3 {
background-color: #FA7375;
color: #FBFEAC;
}
.bootstrap .theme-terra-3 .btn-default {
border-color: #FBFEAC;
border: 3px solid #FBFEAC;
color: #FBFEAC;
}
.bootstrap .theme-citrus-inverse {
color: #FD8A84;
background-color: #A5FEEC;
}
.bootstrap .theme-sky-1 {
background-color: #D8F6FE;
color: #1E29C6;
}
.bootstrap .theme-yellow-1 {
background-color: #FEF86D;
color: #000;
}
.bootstrap .theme-yellow-2 {
background-color: #F4BD3B;
color: #fff;
}
.bootstrap .theme-yellow-2 h1, .bootstrap .theme-yellow-2 h2, .bootstrap .theme-yellow-2 h3, .bootstrap .theme-yellow-2 h4, .bootstrap .theme-yellow-2 h5 {
color: #A5FEEC;
}
.bootstrap .theme-yellow-3 {
background-color: #F4BD3B;
color: #fff;
}
.bootstrap .theme-yellow-3 h1, .bootstrap .theme-yellow-3 h2, .bootstrap .theme-yellow-3 h3, .bootstrap .theme-yellow-3 h4, .bootstrap .theme-yellow-3 h5 {
color: #E7783F;
}
.bootstrap .theme-yellow-4 {
background-color: #F4BD3B;
color: #1E29C6;
}
.bootstrap .theme-sunset-grad {
background-image: linear-gradient(to left, #fe8745 0, #f48ad8 100%);
color: #fbffa7;
}
.bootstrap .theme-grad-tasty {
background: linear-gradient(45deg, #fc9ed7, #e37244);
animation: gradient 4s linear infinite;
animation-direction: alternate;
color: #fbffa7;
}
.bootstrap .theme-holiday-promo {
background-image: url("/images/bg/snowflake-wide.jpg");
background-size: cover;
font-weight: bold;
color: white;
text-shadow: 1px 1px #a0a0a0;
font-size: 1.3em;
}
.bootstrap .theme-lemonade {
background-color: #fbffa7;
background-color: #FEF86D;
color: #f48ad8;
color: #E766C3;
color: #D44CAD;
color: #C12E97;
}
.bootstrap .theme-lemonade-2 {
background-color: #fbffa7;
background-color: #FEF86D;
color: #B8939B;
color: #A7848C;
}
.bootstrap .theme-technical-1 {
background-color: #333;
color: #A8A7A8;
}
.bootstrap .theme-navy {
color: #fff;
background: #0F5277;
}
.bootstrap .theme-navy .btn-default,
.bootstrap .theme-navy .btn-default:hover {
border-color: #fff;
border: 3px solid #fff;
color: #fff;
}
.bootstrap .theme-navy-spacer {
background-color: #ffffff;
color: #0F5277;
}
.bootstrap .theme-navy-spacer .btn-default,
.bootstrap .theme-navy-spacer .btn-default:hover {
border-color: #0F5277;
border: 3px solid #0F5277;
color: #0F5277;
}
.bootstrap .theme-uppercase-head {
color: #335374;
font-size: 2.3em;
text-transform: capitalize;
}
.bootstrap .theme-uppercase-med {
color: #335374;
font-size: 1.2em;
}
.bootstrap .hero-padding {
padding-bottom: 40px;
/* Example padding, adjust as needed */
}
.bootstrap .bg.bg-aria-hero.unique-gradient {
display: flex;
align-items: center;
justify-content: center;
height: calc(65vh - 64px);
background-color: rgb(11, 11, 30);
position: relative;
overflow: hidden;
}
@media (max-width: 985px) {
.bootstrap .bg.bg-aria-hero.unique-gradient {
background: linear-gradient(0deg, rgba(15, 0, 73, 0.4156862745) 0%, rgba(15, 0, 73, 0.2980392157) 30%), url("/images/controllers/site/landing-pages/hookpad-screen.png");
background-size: cover;
background-position: center;
}
}
.bootstrap .landing-page-text-color {
color: #0A1A36;
}
.bootstrap .bg.bg-aria-hero.unique-gradient .container {
height: 100%;
display: flex;
align-items: center;
}
.bootstrap .theme-landing-page {
background: linear-gradient(to bottom, #f2f2f2, #eeeeee);
padding-left: 80px;
padding-right: 80px;
}
.bootstrap .theme-landing-page section {
align-items: center;
/* Center items vertically */
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
/* Ensure contents are stacked vertically */
justify-content: center;
padding: 50px 0;
background-size: cover;
background-position: center;
min-height: 500px;
}
.bootstrap .theme-landing-page section .feature-image img {
background-color: transparent;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.bootstrap .theme-landing-page section .card {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
margin-bottom: 40px;
flex: 1 0 300px;
}
.bootstrap .theme-landing-page section .card-img {
width: 100%;
/* Ensures the image covers the width of the card */
height: 200px;
/* Sets a fixed height for all images */
-o-object-fit: cover;
object-fit: cover;
/* Ensures the image covers the area without stretching */
}
.bootstrap .theme-landing-page section .card-body {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* This pushes the card title to the bottom */
padding: 15px;
/* Adjust padding as needed */
color: #1e1e1e;
background-color: transparent;
border: none;
box-shadow: none;
}
.bootstrap .theme-landing-page section .card-body .card-title,
.bootstrap .theme-landing-page section .card-body .card-text,
.bootstrap .theme-landing-page section .card-body .btn {
/* Optionally adjust styles for card content */
/* These styles are just placeholders */
margin: 2;
/* Add any other styles as needed */
}
.bootstrap .theme-landing-page section .card-body .img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.bootstrap .theme-landing-page section .card-body .card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
}
.bootstrap .theme-landing-page section .card-body .card-tag {
background-color: #E2E6FF;
color: #333;
border-radius: 5px;
padding: 5px 10px;
margin-bottom: 10px;
position: absolute;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
top: -10px;
right: 10px;
}
.bootstrap .theme-landing-page section .card-body .card-img {
padding-top: 30px;
width: 100%;
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bootstrap .theme-landing-page section .card-body .gradient-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(to right, #1e0069 0%, rgba(12, 4, 123, 0.7) 50%, rgba(0, 0, 0, 0) 100%);
}
.bootstrap .theme-landing-page section .card-body.light-theme {
color: #333;
background-color: #f0f0f0;
}
.bootstrap .theme-landing-page section .card-body.dark-theme {
color: #fff;
background-color: #1e0069;
}
.bootstrap .theme-landing-page section .features-section .col-md-4 .icon-header {
display: flex;
align-items: center;
justify-content: flex-start;
}
.bootstrap .theme-landing-page section .features-section .col-md-4 .icon-header img#icon {
width: 15%;
}
.bootstrap .theme-landing-page section .features-section .col-md-4 .icon-header h3 {
margin-left: 10px;
}
.bootstrap .h1-promo {
font-size: 3em !important;
line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
.bootstrap .h1-promo {
font-size: 3.5em !important;
/*margin-top: 1.5em;*/
}
}
@media only screen and (min-width: 992px) {
.bootstrap .h1-promo {
font-size: 4.5em !important;
}
}
.bootstrap .h1-promo-books {
font-size: 5em !important;
line-height: 1.2em;
padding-bottom: 30px;
}
@media only screen and (max-width: 992px) {
.bootstrap .h1-promo-books {
font-size: 3em !important;
}
}
@media only screen and (max-width: 768px) {
.bootstrap .h1-promo-books {
font-size: 3em !important;
padding-bottom: 15px;
}
}
.bootstrap .h1-promo-hookpad {
font-size: 4em !important;
line-height: 1.2em;
padding-bottom: 30px;
}
@media only screen and (max-width: 970px) {
.bootstrap .h1-promo-hookpad {
font-size: 4em !important;
}
}
@media only screen and (max-width: 768px) {
.bootstrap .h1-promo-hookpad {
font-size: 3em !important;
text-align: center;
padding-bottom: 15px;
}
}
.bootstrap .h2-promo-hookpad {
font-size: 1.2em !important;
}
@media only screen and (max-width: 970px) {
.bootstrap .h2-promo-hookpad {
font-size: 1em !important;
}
}
.bootstrap .font-crush-header {
transform: rotate(-5deg) skew(-5deg);
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
text-shadow: 3px 3px 0px #eefa11;
font-family: "BAUHS93";
}
.bootstrap .crush-header-shadow {
text-shadow: 2px 2px 0px #eefa11;
}
@media only screen and (min-width: 768px) {
.bootstrap .crush-header-shadow {
text-shadow: 3px 3px 0px #eefa11;
}
}
@media only screen and (min-width: 992px) {
.bootstrap .crush-header-shadow {
text-shadow: 3px 3px 0px #eefa11;
}
}
@media only screen and (min-width: 1200px) {
.bootstrap .crush-header-shadow {
text-shadow: 4px 4px 0px #eefa11;
}
}
.bootstrap .btn-crush {
background: #eefa11;
border-color: #eefa11;
color: rgb(51, 51, 51);
display: block;
width: 100%;
}
.bootstrap .btn-crush:hover {
border-color: #d0db00;
background: #d0db00;
}
.bootstrap .theme-card-grad1 {
background-image: linear-gradient(0deg, #A5FEEC, #A2B4F5);
color: #335374;
margin-right: 0px;
margin-left: 0px;
}
.bootstrap .theme-card-0 {
color: #FFFFFF;
margin-right: 0px;
margin-left: 0px;
}
.bootstrap .theme-card-gray {
background-color: #e6e1e1;
margin-right: 0px;
margin-left: 0px;
}
.bootstrap .ipad-portrait {
max-width: 100%;
max-height: 100%;
}
.bootstrap .ipad-landscape {
max-width: 100%;
max-height: 100%;
}
.bootstrap .text-align-sm-center {
text-align: center;
}
@media only screen and (min-width: 768px) {
.bootstrap .text-align-sm-center {
text-align: left;
}
}
.bootstrap .video-ipad-portrait {
margin-left: 1px;
width: 205px;
height: 280px;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.bootstrap .video-ipad-portrait {
width: 287px;
height: 390px;
}
}
.bootstrap .video-ipad-landscape-inset {
width: 268px;
height: 300px;
margin-left: 40px;
margin-top: -203px;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.bootstrap .video-ipad-landscape-inset {
width: 346px;
height: 300px;
margin-left: 51px;
margin-top: -261px;
}
}
.bootstrap .video-ipad-landscape-inset-400 {
width: 268px;
height: 300px;
margin-left: 40px;
margin-top: -203px;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.bootstrap .video-ipad-landscape-inset-400 {
width: 307px;
height: 300px;
margin-left: 45px;
margin-top: -232px;
}
}
.bootstrap .video-ipad-landscape {
width: 268px;
height: 300px;
margin-left: -2px;
margin-top: 118px;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.bootstrap .video-ipad-landscape {
width: 346px;
height: 300px;
margin-left: -2px;
margin-top: 62px;
}
}
.bootstrap .padding-bottom-sm-20-0 {
padding-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.bootstrap .padding-bottom-sm-20-0 {
padding-bottom: 0px;
}
}
.bootstrap .margin-top-neg-sm-40-0 {
margin-top: 0px;
}
@media only screen and (min-width: 768px) {
.bootstrap .margin-top-neg-sm-40-0 {
margin-top: -10px;
}
}
.bootstrap .buy-bottom {
bottom: 5%;
}
.bootstrap .buy-sm-margin-top-m100 {
margin-top: -100px;
}
@media only screen and (min-width: 768px) {
.bootstrap .buy-sm-margin-top-m100 {
margin-top: 0px;
}
}
.bootstrap .faq-answer {
padding: 16px;
}
.bootstrap .bs-accordion .panel-default {
border: 0px;
}
.bootstrap .bs-accordion .panel-heading {
padding: 3px;
background-color: rgb(255, 158, 195);
border-radius: 25px;
border: none;
}
.bootstrap .bs-accordion .panel-heading[aria-expanded=true] {
background-color: rgb(255, 237, 158);
}
.bootstrap .bs-accordion .panel-heading a {
display: block;
padding: 10px 15px;
color: #335374;
}
.bootstrap .bs-accordion .panel-heading a[aria-expanded=true] .glyphicon.glyphicon-chevron-right {
margin-top: 5px;
color: #335374;
transform: rotate(90deg);
transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bootstrap .bs-accordion .panel-heading a .glyphicon.glyphicon-chevron-right {
margin-top: 5px;
color: #335374;
transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bootstrap .artist-grid {
display: grid;
height: 60vh;
width: 100%;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.bootstrap .artist-grid {
height: 100vh;
}
}
.bootstrap .artist-grid > .artist-item {
background-position: center;
background-repeat: no-repeat;
background-size: 105% cover;
}
.bootstrap .artist-item:nth-child(1) {
grid-row: 1/4;
grid-column: 1/3;
}
.bootstrap .artist-item:nth-child(2) {
grid-column: 3/4;
grid-row: 1/3;
}
.bootstrap .artist-item:nth-child(3) {
grid-column: 4/7;
grid-row: 1/3;
}
.bootstrap .artist-item:nth-child(4) {
grid-column: 1/3;
grid-row: 4/5;
}
.bootstrap .artist-item:nth-child(5) {
grid-column: 3/5;
grid-row: 3/5;
}
.bootstrap .artist-item:nth-child(6) {
grid-column: 5/7;
grid-row: 3/4;
}
.bootstrap .artist-item:nth-child(7) {
grid-column: 1/4;
grid-row: 5/7;
}
.bootstrap .artist-item:nth-child(8) {
grid-column: 4/5;
grid-row: 5/7;
}
.bootstrap .artist-item:nth-child(9) {
grid-column: 5/7;
grid-row: 4/7;
}
/* styling code */
.bootstrap .artist-grid {
margin: 20px auto;
max-width: 1000px;
}
.bootstrap .text-grad-a {
background: linear-gradient(45deg, #fc9ed7, #e37244);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Adding for rebuild */
@media print {
.bootstrap a[href]:after {
content: "" !important;
}
.bootstrap .print-none {
display: none !important;
}
}
.bootstrap pre {
font-size: inherit;
}
.bootstrap .ais-SearchBox-loadingIndicator,
.bootstrap .ais-SearchBox-reset,
.bootstrap .ais-SearchBox-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 1;
width: 24px;
top: 50%;
right: 0.6rem;
transform: translateY(-50%);
padding: 0;
border: none;
background: none;
color: #2A6B93;
}
.bootstrap .ais-SearchBox-form {
display: block;
position: relative;
}
.bootstrap .ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.3rem 2rem;
width: 100%;
position: relative;
background-color: #fff;
border: none;
border-radius: 8px;
outline: 0;
}
.bootstrap .ais-SearchBox-submit {
left: 0.3rem;
}
.bootstrap .ais-SearchBox-reset {
right: 0.6rem;
}
/*
[class^="ais-"] {
font-size: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
/*
.ais-SearchBox-resetIcon {
width: 14px;
height: 14px;
}
*/
.bootstrap .ais-Stats {
width: 100%;
position: absolute;
top: 40px;
z-index: 21;
text-align: right;
font-size: 0.8rem;
padding-right: 10px;
}
.bootstrap .ais-Hits,
.bootstrap .ais-InfiniteHits {
width: 100%;
position: absolute;
top: 40px;
background: white;
border-radius: 8px;
z-index: 20;
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.15);
padding: 10px;
}
.bootstrap .ais-Hits--empty,
.bootstrap .ais-InfiniteHits--empty {
box-shadow: none;
padding: 0;
}
.bootstrap .ais-Hits-list,
.bootstrap .ais-InfiniteHits-list {
padding-bottom: 0px;
margin-bottom: 0px;
}
.bootstrap ol.ais-Hits-list,
.bootstrap ol.ais-InfiniteHits-list {
padding-left: 0;
}
.bootstrap ol.ais-Hits-list li,
.bootstrap ol.ais-InfiniteHits-list li {
list-style-type: none;
}
.bootstrap mark {
font-weight: bold;
padding: 0;
background: none;
}
.bootstrap .separator {
display: flex;
align-items: center;
text-align: center;
}
.bootstrap .separator::before,
.bootstrap .separator::after {
content: "";
flex: 1;
border-bottom: 1px solid #ccc;
}
.bootstrap .separator:not(:empty)::before {
margin-right: 1em;
}
.bootstrap .separator:not(:empty)::after {
margin-left: 1em;
}
/*# sourceMappingURL=styles-scoped-to-bootstrap.css.map */