/* All CSS written by Jeffrey B. Madden 2023. */

body {
   position:relative;
   height:auto;
   width:auto;
   margin:0px;
   border:0px;
   padding:0px;
   color:White;
   font-family:Arial;
   background-color:Black;
   background-image:url('images/bg_08.jpg');
   background-repeat:no-repeat;
   background-size:100% auto;
   background-position:center top;
}

@font-face {
   font-family:omppro;
   src:url('omp_pro.ttf');
}

h1, h2, h5, a, div, input.sub, input.res, li.head {
   font-family:omppro;
}

p, p.blk, a.norm, h3, h4, h6, textarea, ul.locate, a.locate, a.locateland, h5.rnavhead, a.btt, p.dis, a.dis {
   font-family:Arial;
}

a.norm {
   color:SlateGrey;
   text-decoration:none;
   transition:color 1s linear 0s;
   -webkit-transition:color 1s linear 0s;
   -moz-transition:color 1s linear 0s;
}

a.norm:hover {
   color:LightSteelBlue;
   transition:color .4s linear 0s;
   -webkit-transition:color .4s linear 0s;
   -moz-transition:color .4s linear 0s;
}

p, p.blk {
   font-size:20px;
   letter-spacing:1px;
   line-height:30px;
}

p.blk { display:block; }
p.mid { text-align:center; }

p.contact {
   font-family:"Times New Roman";
   font-size:40px;
   line-height:40px;
}

.wrapper {
   display:block;
   margin:0px;
   border:0px;
   padding:0px;
}

img { font-family:Arial; }

iframe {
   border:0px;
   background-color:#101010;
   background-image:url('images/icon_loading_02.png');
   background-repeat:no-repeat;
   background-position:center center;
}

/* Home Link */

#home {
   display:block;
   position:fixed;
   top:0px;
   right:0px;
   width:171px;
   height:170px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/hme_bg_04.png');
   background-repeat:no-repeat;
   text-align:right;
   z-index:4;
}

#home:hover, #home:active { z-index:6; }

#home a {
   display:inline-block;
   position:relative;
   top:2px;
   right:3px;
   width:125px;
   height:125px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/hmea_09.png');
   background-repeat:no-repeat;
}

/* Halfstack */

#halfstack {
   display:block;
   position:relative;
   margin:10px 0px 150px 270px;
   border:0px;
   padding:0px;
   transition:margin-left 0.5s linear;
   -webkit-transition:margin-left 0.5s linear;
   -moz-transition:margin-left 0.5s linear;
}

/* Navigation */

#menu_button {
   display:none;
   position:fixed;
   left:0px;
   top:0px;
   width:60px;
   height:60px;
   margin:0px;
   border-right:2px solid #303030;
   border-bottom:2px solid #303030;
   padding:0px;
   cursor:pointer;
   background-color:Black;
   background-image:url('app/images/menu_button_02.svg');
   background-repeat:no-repeat;
   background-position:center center;
   background-size:60% 60%;
   box-shadow:0px 0px 45px 12px Black;
   box-sizing:border-box;
   z-index:9;
}

#menu_button::after {
   position:absolute;
   left:35px;
   top:35px;
   margin:0px;
   border:0px;
}

#nav_closer {
   display:none;
   position:absolute;
   right:20px;
   top:25px;
   width:50px;
   height:50px;
   margin:0px;
   border:0px;
   padding:0px;
   cursor:pointer;
   background-color:SlateGrey;
   background-image:url('app/images/closer_button_01.svg');
   background-repeat:no-repeat;
   background-position:center center;
   background-size:65% 65%;
   z-index:1;
}

#amp {
   display:block;
   position:relative;
   width:906px;
   height:279px;
   margin:0px;  
   border:0px;
   padding:50px 30px 30px 30px;
   background-repeat:no-repeat;
   background-image:url('images/nav_bg_17.png');
   box-sizing:border-box;
   overflow:visible;
}

#console {
   display:block;
   position:absolute;
   left:44px;
   bottom:30px;
   height:86px;
   margin:0px;
   border:0px;
   padding:0px;
}

#amp .extras { display:none; }

#amp a {
   display:inline-block;
   position:relative;
   float:left;
   height:86px;
   line-height:36px;
   width:90px;
   margin:0px;
   border:0px;
   padding:0px;
   color:Black;
   font-size:28px;
   font-weight:normal;
   text-decoration:none;
   text-align:center;
   text-indent:3px;
   letter-spacing:2px;
   transition:color .3s linear 0s;
   -webkit-transition:color .3s linear 0s;
   -moz-transition:color .3s linear 0s;
}

#amp a.land, #amp a:hover { color:White; }

#amp a .knob {
   display:block;
   position:relative;
   top:-2px;
   width:100%;
   height:50px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/nav_knob_10.png');
   background-repeat:no-repeat;
   background-position:center center;
}

#amp a .knob::after {
   content:"";
   display:block;
   width:100%;
   height:50px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/nav_knob_led_01.png');
   background-repeat:no-repeat;
   background-position:center center;
   transition:transform 0.75s ease-in;
   -webkit-transition:-webkit-transform 0.75s ease-in;
   -moz-transition:-moz-transform 0.75s ease-in;
   transform-origin:center center;
   -webkit-transform-origin:center center;
   -moz-transform-origin:center center;
}

#amp a:nth-child(4):hover .knob::after,
#amp a:nth-child(7):hover .knob::after {
   transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   -moz-transform:rotate(180deg);
}

#amp a:nth-child(5):hover .knob::after,
#amp a:nth-child(8):hover .knob::after {
   transform:rotate(270deg);
   -webkit-transform:rotate(270deg);
   -moz-transform:rotate(270deg);
}

#amp a:nth-child(6):hover .knob::after,
#amp a:nth-child(9):hover .knob::after {
   transform:rotate(140deg);
   -webkit-transform:rotate(140deg);
   -moz-transform:rotate(140deg);
}

#amp a .switch, #amp a .jack {
   display:block;
   position:relative;
   top:-2px;
   height:50px;
   width:100%;
   margin:0px;
   border:0px;
   padding:0px;
   background-repeat:no-repeat;
   background-position:center center;
}

#amp a .switch.off { background-image:url('images/nav_hme_stc_01.png'); }
#amp a .switch.on { background-image:url('images/nav_hme_hlt_02.png'); }
#amp a .jack { background-image:url('images/nav_jack_stc_04.png'); }

#amp .logo {
   display:inline-block;
   position:relative;
   float:left;
   height:86px;
   width:90px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/nav_logo_02.png');
   background-repeat:no-repeat;
   background-position:center center;
}

/* Cabinet */

.cabinet {
   display:block;
   position:relative;
   width:906px;
   height:908px;
   margin:0px;  
   border:0px;
   padding:80px 80px 0px 80px;
   color:White;
   background-image:url('images/bg_cabinet_12.png');
   background-repeat:no-repeat;
   box-sizing:border-box;
   overflow-y:hidden;
   z-index:1;
}

.cabinet .title {
   display:block;
   position:relative;
   text-align:center;
   margin-bottom:60px;
}

.cabinet .title img.header {
   margin:0px;
   border:0px;
}

.cabinet .title p {
   line-height:28px;
   font-size:20px;
}

.cabinet .row {
   display:block;
   width:100%;
   margin:0px;
   border:0px;
   padding:0px;
}

.profile {
   float:right;
}

/* Side Navigation */

#nav_guitar {
   display:block;
   position:absolute;
   left:0px;
   top:20px;
   width:275px;
   height:1200px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/navside_bg_02.png');
   background-repeat:no-repeat;
   z-index:1;
}

#nav_guitar_container {
   display:block;
   position:absolute;
   left:28px;
   top:225px;
   width:202px;
   height:375px;
   margin:0px;
   border:0px;
   padding:0px;
}

#nav_guitar_container a {
   display:block;
   width:230px;
   margin-bottom:4px;
   text-indent:84px;
   color:SlateGrey;
   font-size:28px;
   font-weight:normal;
   letter-spacing:2px;
   text-decoration:none;
   background-image:url('images/navside_button_15.png');
   background-repeat:no-repeat;
   background-size:0px 100%;
   transition:background-size 1s ease-in-out, color 0.5s ease-in-out;
   -webkit-transition:background-size 1s ease-in-out, color 0.5s ease-in-out;
   -moz-transition:background-size 1s ease-in-out, color 0.5s ease-in-out;
}

#nav_guitar_container a:hover { color:White; background-size:100% 100%; }
#nav_guitar_container a.land { color:White; }

#nav_guitar_container a:nth-child(1) { height:44px; line-height:44px; background-position:8px top; }
#nav_guitar_container a:nth-child(2) { height:38px; line-height:38px; background-position:8px top; }
#nav_guitar_container a:nth-child(3) { height:36px; line-height:36px; background-position:8px top; }
#nav_guitar_container a:nth-child(4) { height:33px; line-height:33px; background-position:6px top; }
#nav_guitar_container a:nth-child(5) { height:32px; line-height:32px; background-position:6px top; }
#nav_guitar_container a:nth-child(6) {height:29px; line-height:29px; background-position:5px top; }
#nav_guitar_container a:nth-child(7) { height:29px; line-height:29px; background-position:5px top; }
#nav_guitar_container a:nth-child(8) { height:28px; line-height:29px; background-position:5px top; }

/* Right Side Sliders */

#nav_a, #nav_b {
   display:block;
   position:fixed;
   top:170px;
   height:auto;
   margin:0px;
   border:0px;
   padding:0px;
   border:30px solid transparent;
   border-right-width:0px;
   border-top-left-radius:30px;
   border-bottom-left-radius:30px;
   border-image:url('images/rnav_border_08.png') 30 30 stretch;
   -webkit-border-image:url('images/rnav_border_08.png') 30 30 stretch;
   -moz-border-image:url('images/rnav_border_08.png') 30 30 stretch;
   background-image:url('images/rnav_bg_pattern_09.png');
   background-repeat:repeat;
   box-shadow:0px 0px 20px 8px #000000;
   transition:right .5s ease-in 0s;
   -webkit-transition:right .5s ease-in 0s;
   -moz-transition:right .5s ease-in 0s;
}

#nav_a {
   right:-525px;
   width:495px;
   z-index:4;
}

#nav_b {
   right:-365px;
   width:335px;
   z-index:5;
}

#nav_a .tab, #nav_b .tab {
   display:block;
   position:absolute;
   left:-108px;
   width:75px;
   height:200px;
   margin:0px;
   border:0px;
   padding:0px;
   background-repeat:no-repeat;
   cursor:pointer;
}

#nav_a .tab { top:5px; background-image:url('images/rnav_tab_test_04.png'); }
#nav_b .tab { top:185px; background-image:url('images/rnav_tab_follow_02.png'); }

#nav_a .divider, #nav_b .divider {
   display:block;
   text-align:left;
   margin:0px;
   border:0px;
   padding:0px;
}

#nav_a .divider { padding:20px; }
#nav_b .divider { padding:20px; }
#nav_a .sub_divider, #nav_b .sub_divider { display:block; }

#nav_b .divider a {
   display:inline-block;
   float:left;
   width:40px;
   height:40px;
   margin:0px 20px 20px 0px;
   border:0px;
   padding:0px;
   background-size:40px 40px;
   background-repeat:no-repeat;
   box-shadow:0px 5px 10px 2px #000000;
   transition:transform 1s ease-in-out 0s, transform-origin 1s ease-in-out 0s;
   -webkit-transition:-webkit-transform 1s ease-in-out 0s, -webkit-transform-origin 1s ease-in-out 0s;
   -moz-transition:-moz-transform 1s ease-in-out 0s, -moz-transform-origin 1s ease-in-out 0s;
}

#nav_b .divider a:hover {
   transform:scale(1.5,1.5);
   -webkit-transform:scale(1.5,1.5);
   -moz-transform:scale(1.5,1.5);
   transition:transform .5s ease-in-out 0s, transform-origin .5s ease-in-out 0s;
   -webkit-transition:-webkit-transform .5s ease-in-out 0s, -webkit-transform-origin .5s ease-in-out 0s;
   -moz-transition:-moz-transform .5s ease-in-out 0s, -moz-transform-origin .5s ease-in-out 0s;
}

#link_fb { background-image:url('images/nav_social_fb_05.png'); }
#link_yt { background-image:url('images/nav_social_yt_05.png'); }
#link_tw { background-image:url('images/nav_social_tw_05.png'); }
#link_yp { background-image:url('images/nav_social_ylp_03.png'); }

#nav_a .divider h5, #nav_b .divider h5 {
   margin:0px;
   margin-bottom:2px;
   border:0px;
   padding:0px;
   color:#70ffff;
   font-family:Arial;
}

#nav_a .divider p, #nav_b .divider p {
   margin:10px;
   border:0px;
   padding:0px;
   color:White;
   font-size:12px;
   line-height:13px;
}

#nav_a .divider p.name { color:Silver; }

#nav_a img {
   float:left;
   height:100px;
   margin:0px 20px 20px 0px;
   border:1px solid White;
   border-radius:10px;
   box-shadow:0px 5px 15px 5px #000000;
}

#view_all {
   display:block;
   width:188px;
   height:65px;
   margin-left:auto;
   margin-right:auto;
   background-image:url('images/pill_gold_05.png');
   background-repeat:no-repeat;
   background-size:100%;
}

/* Footer */

#footer_title_app { display:none; }

#footer_title {
   display:block;
   position:relative;
   top:1px;
   width:90%;
   margin:0px auto 0px auto;
   border:0px;
}

#footer_wrap {
   display:block;
   position:relative;
   width:100%;
   margin:0px;
   border:0px;
   padding:100px 0px 0px 0px;
   background-color:#202020;
   overflow-x:hidden;
}

#footer_cables, #footer_background { top:100px; }

#footer_cables {
   display:block;
   position:absolute;
   left:0px;
   width:100%;
   height:384px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/footer_cables_01.png');
   background-repeat:repeat;
   z-index:0;
}

#footer_background {
   display:block;
   position:absolute;
   left:50%;
   width:1424px;
   height:384px;
   margin:0px 0px 0px -712px;
   border:0px;
   padding:0px;
   background-color:#202020;
   background-image:url('images/footer_bg_06.png'); /* 1424 x 384 */
   background-repeat:no-repeat;
   background-position:center top;
   z-index:1;
}

#footer {
   display:block;
   position:relative;
   width:830px;
   height:384px;
   margin:0px auto 0px auto;
   border:0px;
   padding:0px;
   z-index:2;
}

#footer_main_b, #footer_social, #footer_news, #footer_locations, #footer_main, #footer_lessons, #footer_tablature {
   display:block;
   position:absolute;
   margin:0px;
   border:0px;
   padding:8px 0px 0px 0px;
   text-align:center;
   box-sizing:border-box;
}

#footer .separate {
   display:inline-block;
   position:relative;
   float:left;
   width:50%;
   padding:0px;
}

#footer h3 {
   display:block;
   top:initial;
   line-height:16px;
   margin:0px 0px 5px 0px;
   border:0px;
   padding:0px;
   color:#440000;
   font-family:Arial;
   font-size:14px;
   font-weight:bold;
   cursor:default;
}

#footer a {
   display:block;
   line-height:20px;
   margin:0px;
   border:0px;
   padding:0px;
   color:Black;
   font-size:14px;
   font-family:Arial;
   font-weight:normal;
   text-decoration:none;
   letter-spacing:0px;
   word-spacing:0px;
   transition:color 0.4s linear;
   -webkit-transition:color 0.4s linear;
   -moz-transition:color 0.4s linear;
}

#footer a:hover { color:White; }

#footer_main_b {
   left:183px;
   top:28px;
   width:92px;
   height:170px;
}

#footer_social {
   left:732px;
   top:28px;
   width:78px;
   height:143px;
}

#footer_news {
   left:56px;
   top:239px;
   width:142px;
   height:92px;
}

#footer_locations {
   left:332px;
   top:1px;
   width:152px;
   height:330px;
}

#footer_main {
   left:528px;
   top:197px;
   width:198px;
   height:141px;
}

#footer_lessons {
   left:20px;
   top:14px;
   width:86px;
   height:149px;
}

#footer_tablature {
   left:563px;
   top:0px;
   width:92px;
   height:156px;
}

/* Footer Icons */

#icon_wrap {
   display:flex;
   width:100%;
   margin:0px;
   border:0px;
   padding:60px 0px 0px 0px;
   justify-content:center;
   flex-wrap:wrap;
}

#icon_wrap .cell {
   display:flex;
   position:relative;
   margin:40px;
   border:0px;
   padding:0px;
}

#icon_wrap .cell:nth-child(2) {
   bottom:-20px;
}

#icon_wrap .cell:not(#omp) {
   align-items:flex-end;
}

#icon_wrap .cell a {
   margin:0px 10px 0px 10px;
   border:0px;
   padding:0px;
}

#icon_wrap .cell img {
   margin:0px;
   border:0px;
}

#omp {
   width:200px;
   margin:0px;
   border:0px;
   padding:0px;
   overflow:visible;
   flex-direction:column;
   align-items:center;
}

#omp h2 {
   margin:0px;
   border:0px;
   padding:0px;
}

#omp a {
   margin:0px;
   border:0px;
   padding:0px;
}

#omp img {
   position:relative;
   bottom:-15px;
   width:164px;
   height:auto;
   margin:0px;
   border:0px;
   transition:transform 1s ease-in-out;
   -webkit-transition:transform 1s ease-in-out;
   -moz-transition:transform 1s ease-in-out;
}

#omp img:hover {
   transform:scale(1.5, 1.5);
   -webkit-transform:scale(1.5, 1.5);
   -moz-transform:scale(1.5, 1.5);
   transform-origin:center center;
   -webkit-transform-origin:center center;
   -moz-transform-origin:center center;
}

#copyright {
   margin:0px;
   border:0px;
   padding:20px;
   font-size:14px;
   text-align:center;
   color:#808080;
   text-size-adjust:none;
   -webkit-text-size-adjust:none;
   -moz-text-size-adjust:none;
}

/* Headers */

h1, h2, h3, h4, h5, h6, li.head {
   color:#908070;
}

h1 {
   display:block;
   line-height:50px;
   margin:40px 0px 22px 0px;
   border:0px;
   padding:0px;
   font-size:40px;
   letter-spacing:2px;
   word-spacing:-2px;
   font-weight:normal;
}

h1::after {
   content:"";
   display:inline-block;
   position:relative;
   top:18px;
   width:91px;
   height:50px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('images/header_tail_01.png');
   background-repeat:no-repeat;
}

h2, li.head {
   line-height:50px;
   font-size:40px;
   margin:80px 0px 10px 0px;
   border:0px;
   padding:0px;
   font-weight:normal;
   letter-spacing:2px;
}

h3 {
   position:relative;
   top:12px;
   margin:0px;
   border:0px;
   padding:0px;
   color:Grey;
}

h5 {
   margin:0px;
   border:0px;
   padding:0px;
   letter-spacing:1px;
}

/* Misc. */

img.floatleft {
   float:left;
   margin-right:40px;
   margin-bottom:20px;
   box-shadow:-10px 10px 25px 5px #000000;
}

.showcase { width:375px; margin:0px 0px 20px 20px; }

iframe.hme {
   float:right;
   width:400px;
   height:250px;
   margin-left:35px;
   margin-bottom:20px;
   box-shadow:10px 10px 25px 5px #000000;
}

span.itlc { font-style:italic; }

/* Navigation Tree */

#nav_tree {
   display:block;
   position:relative;
   line-height:24px;
   margin:10px 0px 30px 0px;
   border:0px;
   padding:0px;
   font-size:20px;
   letter-spacing:0px;
   cursor:default;
   z-index:1;
}

#nav_tree span {
   position:relative;
   top:4px;
   margin:0px;
   border:0px;
   padding:0px 10px 0px 10px;
   font-size:30px;
}

#nav_tree span:last-child {
   position:relative;
   top:initial;
   margin:0px;
   border:0px;
   padding:0px;
   font-size:inherit;
   font-family:Arial;
   letter-spacing:0px;
}

/* Disclaimer */

#discntn {
   display:block;
   position:fixed;
   top:0px;
   width:100%;      
   height:30px;
   line-height:30px;
   margin:0px;
   border:0px;
   border-top:1px solid Blue;
   border-bottom:1px solid Blue;
   padding:0px;
   text-align:center;
   background-color:LightGreen;
   color:Black;
   font-size:16px;
   z-index:8;
   transition:top .3s linear 0s;
   -webkit-transition:top .3s linear 0s;
   -moz-transition:top .3s linear 0s;
}

#discntn a { color:DarkBlue; text-decoration:underline; }
#discntn, #discntn a { font-family:Arial; }