/*** HackTV turdinc.kicks-ass.net ***/
/*** START links ***/
/* remember to define focus styles! */:focus {outline: 0;}
/* who thought blue linked image borders were a good idea? */a img,:link img,:visited img, a object,:link object,:visited object{ border:0; }
/* some long-arse links refused to break nicely, this fixes */A{word-wrap:break-word;}
/* to prevent a gap from showing below images in some browsers */img {vertical-align: bottom;}
/* styling for links and visited links as well as for links in a hovered, focus, and active state
 * make sure to KEEP these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :hover is to avoid outline when a user clicks on links
 * note that these last rules do not do anything in IE as this browser does not support "outline"
 */
a{background: transparent;padding:2px 6px 4px 2px;}

a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a:focus/* , :focus */ { /*outline: 2px solid blue;*/outline:none;
/* background-color:rgba(0,0,0,.125); */
}
a:focus, a:hover, a:active {/*outline: 2px solid orange;*/border-radius:1px;
-webkit-box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5);
        						/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */}
a:active{color: #E7CE4A; /*prevent transitions on click*/transition: none;
	-webkit-box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	          box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera
*/}

input:focus, input:hover, input:active {/*outline: 2px solid orange;*/border-radius:1px;
-webkit-box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5);
        						/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */}
input:active{color: #191919; /*prevent transitions on click*/transition: none;
	-webkit-box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	          box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera
*/}
select:focus, select:hover, select:active {/*outline: 2px solid orange;*/border-radius:1px;
-webkit-box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 0 3px #E4BB00,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 1px 1px rgba(255,255,255,.666),
        							inset 1px 1px 1px 1px rgba(0,0,0,.5);
        						/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */}
select:active{color: #191919; /*prevent transitions on click*/transition: none;
	-webkit-box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	          box-shadow: 0px 0px 0 3px #2FE400,
        							-2px -2px 3px 1px white,
        							2px 2px 3px 1px black,
        							inset -1px -1px 2px 1px rgba(255,255,255,.666),
        							inset 1px 1px 2px 1px rgba(0,0,0,.25);
        							/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera
*/}
/*** END links ***/

.slide-progress-bar {
  width: 173px;
  background-color: rgba(25, 25, 25, 1);
  transition: width 10s linear;
  display: inline-block;
  vertical-align: middle;

}

.progress-bar {
  height: 5px;
  background-color: #42CC55;
  width: 1%;
  position: relative;
  transition: linear;
}

/*** tables ***/
table {
}
td {
    border: 1px dotted;
    border-radius: 10px;
    padding: 5px;
    vertical-align: text-top;
}

/*** Footer ***/
      .wtvfooter {
      position:fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background:#404040;
      height:35px;
      padding-top:7px;
      padding-bottom:4px;
      color:#E7CE4A;
      background-color: #4E4E4E;
      background-image: linear-gradient(to right, #666666, #333333);
      border-top:1px solid rgba(255, 255, 255, .5);
      box-shadow:0 0 0px 1px rgba(0, 0, 0, .5);
      }
      .wtvfooter>marquee {
      background:#000;
      height:31px;
      line-height:29px;
      width:78%;
      border-radius:8px;
      margin-left:8px;
      background-color: #161616;
      background-image: linear-gradient(to right, #2A2A2A, #000000);
      text-shadow: 1px 1px 1px #000;
      }
      .wtvfooter>img {
      float:right;
      margin-right:.5em;
      margin-top:-2px;
      }
      .scrollArrows {
      position:absolute;
      bottom: 8px;
      right: 100px;
      height:30px;
      }
      #dArr, #uArr {
      display:inline-block;
      height:30px;
      width:34px;
      }
      #dArr {
      background-image:url('../wtvarrowdown_on.png');
      }
      #uArr {
      background-image:url('../wtvarrowup_off.png');
      }

/* Fonts */

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica.woff2') format('woff2'); /* Normal */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica-Bold.woff2') format('woff2'); /* Bold */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica-Oblique.woff2') format('woff2'); /* Italics */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica-BoldOblique.woff2') format('woff2'); /* Bold+Italics */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica-Light.woff2') format('woff2'); /* Light */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Helvetica';
  src: url('Helvetica-LightOblique.woff2') format('woff2'); /* Light+Italics */
  font-weight: normal;
  font-style: italic;
}
/* CSS style by SKCro https://github.com/SKCro/WebTV-CSS-Remake */
/* Global Styles */

body {
  background-color: #191919;
  color: #42CC55;
  font-family: 'Helvetica', Arial, sans-serif;*
  margin: 0;
  padding: 0;
  font-size: 2vw; /* Adjust the value as needed */
}

h1, h2, h3, h4, h5, h6 {
  color: #E7CE4A;
  font-weight: 500
}

a {
  text-decoration: none;
  color: #E7CE4A;
}




/* Sidebar Styles */

.sidebar {
  background-color: #452A36;
  width: 15%;
  height: 95%;
  position: fixed;
  padding: 1vw 0;
  display: grid;
}

.sidebar img {
  max-width: 85%;
  max-height: 85%;
}

.sidebar-border {
  position: relative;
  top: 0;
  margin-top: 3%;
  height: 3%;
  width: 100%;
}

.sidebar-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.8vh;
  background: linear-gradient(#33202A 50%, #774E5E 90%);
}

.sidebar-border-home {
  position: relative;
  top: 0;
  margin-top: 3%;
  height: 3%;
  width: 100%;
}

.sidebar-border-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.8vh;
  background: linear-gradient(#2A2A3D 50%, #565E7F 90%);
}

.sidebar-link {
	text-align: left;
	margin-left: 1vw;
	text-shadow: 2px 2px #000;
}

.sidebar-contents {
  text-align: center;
}

/* Main Content Style */

.main-content {
  margin-left: 15%;
  padding: 1%;
}

/* Text Input Styles */
.input-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5%;
}


input[type="submit"] {
  background-image: linear-gradient(to bottom, #343434, #040404);
  background-repeat: no-repeat;
  background-position: center;
  color: #E7CE4A;
  text-shadow: 2px 2px #000;
  background-color: #222;
  padding: 0.5vw 1vw;
  cursor: pointer;
  float: right;
  font-size: 1.5vw;
  border: 0.4vh solid #000;
  border-image: linear-gradient(155deg, #494949 51%, #000 50%);
  border-image-slice: 1;
}

.border {
  position: relative;
  top: 0;
  left: 0;
  height: 2%;
  width: 100%;
  z-index: -1;
  margin-bottom: 2%;
  margin-top: 2%;
}

.border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.8vh;
  background: linear-gradient(#2B2B2B, #0D0D0D);
}