/* General Extras */ #breadcrumbs {margin:10px auto 20px auto; width:93%; padding:5px 0 7px 27px; border:1px solid #000; background-color:#333; background-position:5px -390px;} #articleListing #breadcrumbs {margin:10px 0; background-position:5px -387px;} .dot {display:block; height:20px; background: url(https://www-ecs.jamplay.com/client/shell/images/css-bg/dot_15.gif) repeat-x scroll center top transparent;} /* Article Section-------------------------------------------------- */ #article-wrapper {margin:0; text-align:left; font-size:.95em; color:#aaa;} /* Article - Index-------------------------------------------------- */ #article-wrapper h1 {padding:10px 0 5px 0; font-weight:normal; color:#fff; text-align:center; font-size:2.0em} #article-wrapper div.article {margin:30px 0; padding:30px 0 0 0; line-height:1.2em; border-top:1px solid #373737;} #article-wrapper div.article h2 {margin:0; padding:8px 0 4px 0; font-size:1.4em} #article-wrapper div.article h2 a {border:none; text-decoration:none;} #article-wrapper div.article img.articleThumb {float:left; margin:0 25px 0 0; width:125px; height:125px;} #article-wrapper div.article span {display:block; padding:5px 0; color:#fff;} #article-wrapper div.article hr {display:block; clear:both; margin-top:14px; } #articleHeaderNav {width:100%; padding:6px 0% 7px 0%; margin:20px auto 25px 0; border-bottom:1px solid #444; text-align:center;} #articleHeaderNav a.btn {font-weight:400; font-size:16px;} #articleListing {line-height:1.6em;} #articleContentHeader {width:760px; padding:5px 0 0 210px; height:100px; margin:0; position:relative; background:url(https://www-ecs.jamplay.com/client/shell/images/icons/article-header-base.png) 0px 0px no-repeat; font-family:Georgia, "Times New Roman", Times, serif; line-height:20px;} #articleContentHeader h1 {padding:0 0 15px 0; color:#fff; text-align:left; } #articleContentHeader cite, #articleContentHeader em {display:block; float:left; margin-right:10px; line-height:17px; font-style:normal;} #articleContentHeader img.authorImg, #articleContentHeader img.authorIcon {display:block; position:absolute;} #articleContentHeader img.authorImg {z-index:1; top:9px; left:51px; border:1px solid #000;} #articleContentHeader img.authorIcon {z-index:2; top:9px; left:100px;} #articleContentHeader div#socialMedia {clear:both; width:700px; height:40px; padding:20px 0 0 0; margin:0; border:none;} /* Article Sidebar Nav-------------------------------------------------- */ #articleSidebarNav {clear:both; float:right; margin:0 0 5px 25px; width:90px; padding:20px; background:#181818} #articleSidebarNav a {width:100%; padding:5px 0%; font-size:0.9em} /* Article Content Page-------------------------------------------------- */ #articleContent {width:92%; margin:0 auto; text-align:left; line-height:1.5em; padding-bottom:25px; font-size:1.1em} #articleContent blockquote {margin:15px 0; padding:25px; background:#181818; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #articleContent p {padding:10px 0; margin:10px 0;} #articleContent b {font-size:1.3em; color:#fff; display:block; padding:15px 0 0 0; margin:15px 0 0 0;} #articleContent h2 {font-size:1.8em !important; color:#fff; display:block; padding:25px 0 5px 0; margin:15px 0; border-top:2px solid #202020;} /*FAQ-------------------------------------------------- */ #faq {text-align:left; padding:0 0 0 20px; height:500px; background:url(https://www-ecs.jamplay.com/client/shell/images/general/dot-2e2e2e.gif) 493px 0px repeat-y;} #faq blockquote {position:relative; width:450px; height:150px; background:url(https://www-ecs.jamplay.com/client/shell/images/general/faq/header-bg.jpg) top repeat-x} #faq blockquote h2 {position:absolute; top:60px; left:100px;} #faq blockquote span {display:block; position:absolute; top:90px; left:100px; width:320px; color:#999; font-size:.85em; line-height:1.4em;} #faq blockquote strong {display:block; position:absolute; top:0px; right:0px; width:22px; height:155px; background:url(https://www-ecs.jamplay.com/client/shell/images/general/faq/header-right-bg.jpg) top right no-repeat;} #faq div {float:left; width:475px; } #faq div h3.on {background:url(https://www-ecs.jamplay.com/client/shell/images/icons/collapse.jpg) 85px 0px no-repeat !important; } #faq div h3 {clear:both; line-height:1em; font-size:14px; font-weight:normal; padding-left:125px; width:290px; height:35px; margin:0; background:url(https://www-ecs.jamplay.com/client/shell/images/icons/expand-red.jpg) 85px 0px no-repeat; } #faq div h3.on a {color:#fff; font-weight:bold;} #faq div h3.on b {font-weight:bold;} #faq div h3.on img { opacity:1.0} #faq div h3 a {border:none; color:#ccc; } #faq div h3 a img {display:block; float:left; padding-right:5px; opacity:.6;} #faq div h3 a b {display:block; float:left; height:25px; padding-top:10px; font-weight:normal;} #faq div p {height:0; visibility:hidden; font-size:14px; line-height:19px; color:#aaa; padding:0 20px 0 100px; width:320px; } #faq div p span {display:block; height:30px; background:url(https://www-ecs.jamplay.com/client/shell/images/general/dot-2e2e2e.gif) 0px 15px repeat-x;} #faq div p b {color:#ccc;} #faq div.faqGuitar {margin-right:0px;} /*Company-------------------------------------------------- */ div#company {padding:15px 0 0 20px; } div#company div.founders {float:left; width:29%; padding:10px 0; margin-right:40px; } div#company div.founders h2 {display:block; margin:10px 0 0 15px; padding:0 0 5px 0;} div#company div.founders span {margin:2px 0 2px 10px; display:block;} div#company div.founders p {width:90%; margin-left:10px; padding:10px 15px 0 0; font-size:13px; line-height:18px;} div#company div.founders img {display:block; background:#111; padding:5px; border:1px solid #333;} div#company div.workers {position:relative; clear:both; padding:20px 0 0 0; margin:20px 0 0 0; font-size:11px;} div#company div.workers h2 {width:650px; float:left; font-size:20px; margin:0 0 0 5px; padding:2px 0;} div#company div.workers img {display:block; float:left; margin-right:25px; background:#111; padding:5px; border:1px solid #333;} div#company div.workers p {width:650px; color:#aaa; float:left; font-size:12px; line-height:18px; padding:0; margin-left:5px;} div#company div.workers span { display:block; float:left; margin:8px 15px 0 0; line-height:17px; color:#ccc} /*Testimonials --------------------------------------------------*/ div.testimonialBlock {padding:0 20px;} div.testimonialBlock div.review {display:flex; border-bottom:1px solid #000; flex-direction:row; flex-wrap:nowrap; align-items:center; align-content:center; text-align:center; clear:both;} div.testimonialBlock div.review blockquote {flex:1 1 35%; padding:20px 0; margin:0; color:#fff; font-size:20px; text-shadow: 1px 2px 1px #000; align-self: flex-start; align-content:flex-start; justify-content: flex-start} div.testimonialBlock div.review blockquote img {display:block; margin:0 auto; padding:10px 0;} div.testimonialBlock div.review blockquote span {text-transform: uppercase; font-size:15px; color:#aaa} div.testimonialBlock div.review div {flex:1 1 65%; justify-content: center; text-align:left; line-height:19px; font-size:0.8em; padding:3%; margin:0; color:#ccc} div.testimonialBlock div.review div h4 {color:#fff; font-weight:400; font-size:20px; text-shadow: 1px 2px 1px #000; padding:0 0 10px 0;} div#testimonialHistorical {height:600px; width:90%; background:#151515; border-bottom:1px solid #555; margin:0 auto; overflow-x:hidden; overflow-y:scroll; } div#quickTestimonials {width:100%; margin:0 auto; } div#quickTestimonials div.row {clear:both;} div#quickTestimonials div.quickFeature {width:50%; float:left; text-align:left; margin:10px 0 0 0; font-size:14px; line-height:18px;} div#quickTestimonials div.quickFeature span {color:#fff; font-size:23px; line-height:40px; } div#quickTestimonials div.quickFeature i {font-size:16px; margin:0 0 0 6px !important; text-transform: uppercase; color:#FF5558; font-style:italic; font-weight:normal !important;} div#quickTestimonials div.quickFeature p {padding:0; color:#aaa;} div#quickTestimonials div.RESPONSIVEEMBED {margin:10px 0 !important; border-top:1px solid #444; -webkit-box-shadow: 0px 15px 10px 0px rgba(0,0,0,0.65); -moz-box-shadow: 0px 15px 10px 0px rgba(0,0,0,0.65);box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.65); } div#quickTestimonials div.containerPad {width:94%; margin:0 auto;} .RESPONSIVEEMBED {position: relative; padding-bottom: 56.25%; padding-top: 0;height: 0;} .RESPONSIVEEMBED iframe, .RESPONSIVEEMBED embed, .RESPONSIVEEMBED object, .RESPONSIVEEMBED div {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} div.quickTestHead {padding:40px 0 0 0} div.quickTestHead h2, div.quickTestHead h1 {text-transform: uppercase; padding:0; font-size:36px; font-weight:bold; letter-spacing:0.05em; text-align:center; } div.quickTestHead p {width:90%; margin:0 auto; padding:6px 0 20px 0; font-size:16px; line-height:22px; color:#aaa; text-align:center;} div.quickTestFoot {clear:both; text-align:center; padding:30px 0 100px 0; font-size:18px; color:#fff; border-bottom:1px solid #444;} div.quickTestFoot div {width:85%; margin:0 auto} div.quickTestFoot div p {padding:20px; text-align:center !important;} div.quickTestFoot div a {padding:15px; width:50%; margin:0 auto; font-size:20px;} div#trusted {text-align:center; margin:20px 0 0 0; padding:35px 0 10px 0;} div#trusted div#socialBanner {width:95%; margin:0 auto} div#trusted div#socialBanner img {background:url(https://www-ecs.jamplay.com/client/shell/images/general/blank-loader.gif) center 50px no-repeat;} div#trusted div#socialBanner h4 {font-size:36px; color:#fff; padding:4px 0; font-weight:400} div#trusted div#socialBanner div.width25 {width:25%; float:left; color:#aaa; font-size:15px;} div#trusted div#socialBanner div.width25 a {text-decoration:none; color:#aaa} div.quickTestHead .font55 {font-size:65px;} div#jamplayReview {border-color:#555; text-align:left; padding:40px 30px 30px 0;} div#jamplayReview div#trusted {float:left; width:550px; padding:0; margin:0} div#jamplayReview div#trusted h2 {text-align:center; padding:0 0 25px 0; margin:0;} div#jamplayReview div#trusted div.width25 {width:50%} div#jamplayReview div#jamplayRankings {width:310px; float:left; margin-left:30px; text-shadow: 1px 1px 0px #000;} div#jamplayReview div#jamplayRankings div {font-size:20px; font-weight:bold; color:#fff; padding:0 0 5px 0} div#jamplayReview div#jamplayRankings ul {margin:5px 0 5px 15px; line-height:22px; color:#fff; list-style-type: circle; } div#jamplayReview div#jamplayRankings span {color:#FFC400;} /*Chords and Tools --------------------------------------------------*/ #chordUpsell {float:left; width:380px; border:1px solid #111; color:#fff; text-align:center; background: #606060; /* Old browsers */ background: -moz-linear-gradient(top, #606060 0%, #333333 85%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(85%,#333333)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #606060 0%,#333333 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #606060 0%,#333333 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #606060 0%,#333333 85%); /* IE10+ */ background: linear-gradient(to bottom, #606060 0%,#333333 85%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ } #chordUpsell p {padding:10px 25px; line-height:15px; color:#ccc} #chordUpsell b {display:block; color:#fff; text-align:center; padding:12px 0; font-size:18px; border-bottom:1px solid #111; background: #6b6b6b; /* Old browsers */ background: -moz-linear-gradient(top, #6b6b6b 1%, #515151 19%, #3a3a3a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6b6b6b), color-stop(19%,#515151), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* IE10+ */ background: linear-gradient(to bottom, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */ -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; } #chordUpsell ul {margin:4px 0 0 30px !important; padding:0 !important; list-style-type:none !important;} #chordUpsell li {padding:3px 0 5px 25px; margin:1px 0; text-align:left; font-size:15px } #chordUpsellHorizontal {width:100%; margin:30px 0; color:#ccc; background: #606060; /* Old browsers */ background: -moz-linear-gradient(top, #606060 0%, #333333 85%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(85%,#333333)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #606060 0%,#333333 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #606060 0%,#333333 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #606060 0%,#333333 85%); /* IE10+ */ background: linear-gradient(to bottom, #606060 0%,#333333 85%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ } #chordUpsellHorizontal b { display:block; color:#fff; text-align:center; padding:12px 0; font-size:18px; border-bottom:1px solid #111; background: #6b6b6b; /* Old browsers */ background: -moz-linear-gradient(top, #6b6b6b 1%, #515151 19%, #3a3a3a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6b6b6b), color-stop(19%,#515151), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* IE10+ */ background: linear-gradient(to bottom, #6b6b6b 1%,#515151 19%,#3a3a3a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */ -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 } #chordUpsellHorizontal p {padding:10px 20px; text-align:center; font-size:14px;} #chordUpsellHorizontal li {margin:5px 0;} #chordUpsellHorizontal div#upsellHoriz {width:75%; margin:0 auto; padding:0;} #chordUpsellHorizontal div#upsellHoriz ul.ulLeft, #chordUpsellHorizontal div#upsellHoriz ul.ulRight {float:left; width:49%; color:#fff; font-size:15px} #chordUpsellHorizontal div.chordOfferFloat {float:left; width:400px} #chordUpsellHorizontal div.chordOfferJamTracks {float:left; text-align:center; width:450px; padding-top:20px;} #chordUpsellHorizontal div.chordOfferJamTracks span {font-weight:700; font-size:24px; color:#fff;} /*------------------------------------------------------------------------------------ Guitar Lessons In ---------------------------------------------------------------------------------------------------------------------*/ div.guitarLessonsIn {background-position:0px 60px !important; background-color:#303030 !important; height:auto !important; margin:0px; padding:0;} div#guitarLessonInStuff {} div.guitarLessonsIn h1 {letter-spacing: 0.2em !important} div.guitarLessonsIn h1, div.guitarLessonsIn h2 {} div.guitarLessonsIn h2 {font-size:1.5em; color:#fff; padding:0;} /*------------------------------------------------------------------------------------ CHORD FINDER ---------------------------------------------------------------------------------------------------------------------*/ #chordSWFembed {position: relative; padding-top: 0; height: 0; margin:15px auto; background:#111; padding-bottom: 75.14%; /* aspect */} #chordSWFembed iframe, #chordSWFembed embed, #chordSWFembed object, #chordSWFembed div {position: absolute; top: 0; left: 0px; width: 100% !important; height: 100% !important;} #strumTool {margin:25px 0; border-bottom:1px solid #555; padding:40px 40px 50px 0; text-align:center; font-size:16px; line-height:21px !important; color:#ccc;} #strumTool span {text-transform: uppercase; display:block; padding:5px 0 15px 0;} div#tools2017 {} div#tools2017 div#breadcrumbs {width:99%; padding:5px 0 5px 1%; background-image:none;} div#tools2017 div#breadcrumbs h2 {font-size:14px; display:inline} div#tools2017 div#socialLinks {position:absolute; top:25px; right:0;} div#tools2017 h1 {font-size:1.6em; padding:5px 0;} div#tools2017 p {color:#BFBFBF; font-size:.9em; line-height:1.4em} div#tools2017 p b {color:#fff} div#toolArticle {padding-top:20px; font-size:1.0em; color:#BFBFBF} div#toolArticle h2 {font-size:2em; color:#fff} div#toolArticle h3 {font-size:1.6em; color:#fff; margin:35px 0 22px 0; padding:15px 5px; border:1px solid #333; text-align:center; text-transform: uppercase; background:#161616;} div#toolArticle h4 {font-size:1.1em; color:#fff} div#toolArticle div#socialLinks {position:relative; width:430px; margin:0 auto; top:0; right:0;} ul.articleMode {list-style-type:none; padding:15px 0 15px 0; border-top:1px solid #353535;} ul.articleMode li {display:inline-block; font-size:0.9em; background:#333; padding:10px 12px; font-weight:400; margin:0 5px 0 0; border:1px solid #111; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#fff} ul.articleMode li.listTitle {width:170px; background:none; margin:0; border:none; padding:10px 20px 10px 0;} ul.articleMode li.listEquals {background:none; border:none; font-size:1.3em} ul.articleMode li.listResult {background:#FFEE57; color:#111} #tunerSWFembed {position: relative; padding-top: 0; height: 0; margin:15px auto; background:#111; padding-bottom: 70.625%; /* aspect */} #tunerSWFembed iframe, #tunerSWFembed embed, #tunerSWFembed object, #tunerSWFembed div {position: absolute; top: 0; left: 0px; width: 100% !important; height: 100% !important;} #metronomeSWF {width:60%; margin:0 auto; } #metronomeSWFembed {position: relative; padding-top: 0; height: 0; margin:15px auto; padding-bottom: 83.397683397%; /* aspect */} #metronomeSWFembed iframe, #metronomeSWFembed embed, #metronomeSWFembed object, #metronomeSWFembed div {position: absolute; top: 0; left: 0px; width: 100% !important; height: 100% !important;} div#trialUpsell {display:none; padding:10px; text-align:center; color:#fff; font-weight:bold; border-top:1px solid #0084FF; } /*------------------------------------------------------------------------------------ CHORD Listing ---------------------------------------------------------------------------------------------------------------------*/ div.chordListings {float:left; width:430px; margin-right:60px;} div.chordListings ul li {margin:8px 0} div.chordListings ul li h2 {font-size:1.0em; padding:0;} div.chordSidebar {float:left; width:400px;} div#toolsSidebar {clear:both; font-size:.8em; width:95%; margin:100px 0 20px 0} div#toolsSidebar h3 {padding-top:10px; font-size:1.1em} div#toolsSidebar div img {float:left; width:25%; height:25%; margin-right:2%} div#chordList .pad20 {width:80%; margin:0 auto; padding:20px 6% 15px 6%; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3a3a3a+0,252525+87 */ background: #3a3a3a; /* Old browsers */ background: -moz-linear-gradient(top, #3a3a3a 0%, #252525 87%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #3a3a3a 0%,#252525 87%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #3a3a3a 0%,#252525 87%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#252525',GradientType=0 ); /* IE6-9 */ } div#chordList .pad20 p.textDesc {margin:10px 0 0 0; border-top:1px solid #444; clear:both; padding:10px 0 0 0; text-align:center; line-height:1.3em; font-size:0.92em !important; height:55px; overflow:hidden;} .LR95 {width:95%; margin:0 auto;} .LR92 {width:92%; margin:0 auto;} .pad0 {padding:0} .pad30 {padding:30px;} .pad20 {padding:20px} .pad10 {padding:10px;} .padTop20 {padding-top:20px} .padBot20 {padding-bottom:20px} .padTop10 {padding-top:10px} .padBot10 {padding-bottom:10px} .padTop0 {padding-top:0} .borderTop {border-top:1px solid #333;} .borderBot {border-bottom:1px solid #333;} .floatL {float:left} .width32-1 {width:32%; margin-right:1%;} .width33 {width:33.3333333%} .width50 {width:50%} .width250 {width:250px} .width500 {width:500px;} ul.ulCircle {list-style-type:circle; margin:20px} ul.ulCircle li {margin:8px} .textCenter {text-align:center;} .img75 {display:block; width:75%; height:auto; margin:0 auto} .textBiger {font-size:1.0em} .textBigger {font-size:1.1em} .textBiggger {font-size:1.2em} .textBigggger {font-size:1.3em} .textSmall {font-size:0.9em} .textSmalll {font-size:0.8em} .textSmallll {font-size:0.7em} .centerBlock {display:block; margin:0 auto;} .textYellow {color:#B19500 !important} .textYellow2 {color:#FFFD00 !important} .rounded10 { -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;} .whiteLink {color:#fff !important; text-decoration: none} .clear {clear:both} .textCaps {text-transform: uppercase} .textTrack1 {letter-spacing:0.1em} .textTrack2 {letter-spacing:0.2em} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- phones -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 700px) { div#tools2017 h1 {font-size:1.8em; padding:5px 0;} div#tools2017 {font-family: 'Nunito Sans', sans-serif;} div#tools2017 p {font-size:14px !important; line-height:20px !important} div#toolArticle { font-size:14px !important; line-height:20px !important} div#toolArticle h2 {line-height:1.2em} div#toolArticle div#socialLinks {position:relative; width:100%; margin:0 auto; top:0; right:0;} div#toolArticle div#socialLinks div#socialMedia {position:relative; width:100%; height:auto;} div#toolArticle div#socialLinks div#socialMedia {height:auto; } div#toolArticle div#socialLinks div#socialMedia div.item { width:95% !important; margin:10px auto} ul.articleMode li {font-size:0.8em; padding:7px 8px; margin-right:3px} ul.articleMode li.listTitle {width:100%;} .floatL {float:none} .width500, .width50, .width250, .width50 .pad20 {width:100%; padding:0;} .LR95 {width:90%; margin:0 auto;} .LR92 {width:90%; margin:0 auto;} .LR92 .LR95 {width:100%} .width32-1, .width33 {width:100%; margin-right:0%;} .textBigger {font-size:1.1em} div.guitarLessonsIn {background:none !important; height:auto !important; margin:0px; padding:0; line-height:1.5em} div#guitarLessonInStuff {font-size:0.9em; line-height:1.5em} div.guitarLessonsIn h1 {font-size:0.8em!important} div.guitarLessonsIn h2 {font-size:1.5em; color:#fff; padding:10px 0;} div#indexPlayer {margin:0 auto !important} div#indexPlayer ul {display:none} div#toolsMain { text-align:left !important} div#toolsMain .pad10 {padding: 0} div#toolsMain .width32-1 {clear:both; border-top:1px solid #555; padding:10px 0; font-size:0.8em; line-height:1.4em;} div#toolsMain img {float:left; width:25%; margin-right:1%; height:auto;} div#toolsMain h3 {padding:8px 0 5px 0; font-size:1.4em} div.chordListings, div.chordSidebar {float:none; width:100%; margin-right:0;} div#toolsSidebar {clear:both; width:100%; margin:20px 0 20px 0; font-size:0.9em; line-height:1.2em;} div#breadcrumbs {line-height:1.5em; font-size:0.8em} div#chordList .pad20 {width:84%; margin:0 auto; padding:20px 2% 15px 2%; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;} div#chordList .pad20 p.textDesc {height:auto; overflow:visible;} #strumTool {width:90%; margin:25px auto; border-bottom:1px solid #555; padding:25px 5%; font-size:12px; line-height:18px !important; color:#ccc;} #strumTool img {width:45%; margin:5px 0; height:auto; float:none} #strumTool div {padding:0 !important} #metronomeSWF {height:auto !important} div#videoAnswer {width:70%; margin:0 auto;} /* Article Content -------------------------------------------------- */ #article-wrapper {width:92%; margin:0 auto;} #article-wrapper h1 {padding:0px 0 15px 0; font-size:1.1em} #article-wrapper h4 {line-height:1.4em} #article-wrapper div.article {margin:20px 0; padding:20px 0 0 0; font-size:0.9em} #article-wrapper div.article h2 {padding:10px 0 4px 0; font-size:1.4em} #article-wrapper div.article img.articleThumb {float:left; margin:0 25px 0 0; width:65px; height:65px;} #article-wrapper div.article span {display:block; clear:left;} #articleContentHeader {width:100%; padding:5px 0 15px 0; height:auto; margin:0; position:relative; background:none;} #articleContentHeader h1 {padding:0 0 10px 0; color:#fff; text-align:left; line-height:1.2em} #articleContentHeader cite, #articleContentHeader em {display:block; float:none; margin:5px 0} #articleContentHeader img.authorImg, #articleContentHeader img.authorIcon {display:none;} #articleContentHeader div#socialMedia {display:none;} #articleContent {width:100%; margin:0 auto; text-align:left; line-height:1.7em; padding-bottom:25px; font-size:0.9em} #articleContent blockquote {margin:15px 0; padding:25px; background:#181818; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #articleContent img {max-width: 100%; height:auto; margin:0 auto;} #articleContent p {padding:10px 0; margin:10px 0;} #articleContent b {font-size:1.3em; color:#fff; display:block; padding:15px 0 0 0; margin:15px 0 0 0; border-top:1px solid #343434} #articleContent h2 {font-size:1.5em !important;} #articleSidebarNav {display:none;} #chordUpsellHorizontal div.chordOfferFloat {float:none; width:100%} #chordUpsellHorizontal div.chordOfferJamTracks {float:none; width:100%; padding:20px 0;} #chordUpsellHorizontal div.chordOfferJamTracks span {font-weight:700; font-size:4vw; color:#fff;} } @media screen and (max-width: 400px) { div#chordList .pad20 {width:90%; margin:0 auto; padding:20px 2% 15px 2%; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;} #chordUpsellHorizontal p, #chordUpsell p {padding:10px 0 !important; width:95%; margin:0 auto;} #chordUpsellHorizontal b, #chordUpsell b {font-size:16px; } #chordUpsellHorizontal p {line-height:0em !important} #chordUpsellHorizontal ul, #chordUpsell ul {margin:4px 0 0 15px !important; padding:0 !important; } #chordUpsellHorizontal li, #chordUpsell li {padding:3px 0 5px 25px; margin:3px 0; text-align:left; font-size:15px} } @media print { #container, #container #innerWrap, #container #innerWrap #inner, #tools2017 {color:#000 !important; border:none !important;} #headUpsell, #login, #nav, #breadcrumb, #breadcrumbs, #chordUpsellHorizontal, #chordUpsell, #socialMedia, #footer {display:none !important} #header {height:100px !important} .newchord .thischord div.theNotes span {color:#000 !important; background:#6E0001} } /*------------------------------------------------------------------------------------ phones ---------------------------------------------------------------------------------------------------------------------*/ .blackGradient { background: #606060; /* Old browsers */ background: -moz-linear-gradient(top, #606060 0%, #333333 85%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(85%,#333333)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #606060 0%,#333333 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #606060 0%,#333333 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #606060 0%,#333333 85%); /* IE10+ */ background: linear-gradient(to bottom, #606060 0%,#333333 85%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ } .blackGradInner { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,262626+6,262626+6,161616+91,000000+100 */ background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #262626 6%, #262626 6%, #161616 91%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #000000 0%,#262626 6%,#262626 6%,#161616 91%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #000000 0%,#262626 6%,#262626 6%,#161616 91%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .grad-gray2 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d8d8d8+49,d8d8d8+49,c9c9c9+50,f9f9f9+99 */ background: rgb(255,255,255); /* Old browsers */ background: -moz--linear-gradient(top, rgba(255,255,255,1) 0%, rgba(216,216,216,1) 49%, rgba(216,216,216,1) 49%, rgba(201,201,201,1) 50%, rgba(249,249,249,1) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(216,216,216,1) 49%,rgba(216,216,216,1) 49%,rgba(201,201,201,1) 50%,rgba(249,249,249,1) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(216,216,216,1) 49%,rgba(216,216,216,1) 49%,rgba(201,201,201,1) 50%,rgba(249,249,249,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ } .grad-gray3 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c6c6c6+100 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(198,198,198,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(198,198,198,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(198,198,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */ } .grad-gray4 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7a7a7a+24,424242+89,7c7c7c+99 */ background: #7a7a7a; /* Old browsers */ background: -moz-linear-gradient(top, #7a7a7a 24%, #424242 89%, #7c7c7c 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #7a7a7a 24%,#424242 89%,#7c7c7c 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #7a7a7a 24%,#424242 89%,#7c7c7c 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#7c7c7c',GradientType=0 ); /* IE6-9 */ } .grad-gray5 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,dddddd+77,ffffff+100 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(221,221,221,1) 77%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(221,221,221,1) 77%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 1%,rgba(221,221,221,1) 77%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .grad-3D { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1e1e1e+4,0e0e0e+41,1c1c1c+50,303030+62,111111+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 4%, rgba(14,14,14,1) 41%, rgba(28,28,28,1) 50%, rgba(48,48,48,1) 62%, rgba(17,17,17,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(30,30,30,1) 4%,rgba(14,14,14,1) 41%,rgba(28,28,28,1) 50%,rgba(48,48,48,1) 62%,rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(30,30,30,1) 4%,rgba(14,14,14,1) 41%,rgba(28,28,28,1) 50%,rgba(48,48,48,1) 62%,rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#111111',GradientType=0 ); /* IE6-9 */ } .round10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .shadow103 { -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.75); } .shadowInner {-webkit-box-shadow: inset 0px 0px 29px 0px rgba(0,0,0,0.75);-moz-box-shadow: inset 0px 0px 29px 0px rgba(0,0,0,0.75);box-shadow: inset 0px 0px 29px 0px rgba(0,0,0,0.75);}