/* ENTIRE WEBPAGE BG */
body { 
  background-image: url("https://www.goatlings.com/images/layout/greenbg.gif");
 background-color: #cccccc; 
 background-repeat: repeat;
     min-height: 150%;

 }
 
 * {
    cursor: url(""), url(""), default;
}


/*@font-face {
font-family: NAME;
src: url('');
}
*/

/* HEADER AND NAV */
#header-full {
margin: 0 auto;
width: 1600px;
height: 250px;
background-image: url('https://cdn.discordapp.com/attachments/1028071739357401169/1060290440215146546/TEMP_HEADER.png');

}

 #navbar-full {
                display: none;
            }

            .nav {
                top:175px;
                left: 650px;
                margin-left: auto; 
                margin-right: auto;
                text-align: center;
              position: absolute; 
              z-index: 2;
            }

            .nav li {
                display: inline-block;
                padding-right: 5px ;
            }
            
            .bar img:hover{
              filter:drop-shadow(8px 8px 10px gray);
            }

.FANPGg {
position: absolute; 
top:210px; 
right: 160px; 
z-index: 0;
}

/*
.underheaderpic {
width: 1200px; 
padding: 5px; 
margin: 5px;
}
*/

  
/* ===========================================================================================================================================
FLOATING PICS change img url in html
*/
.RAM {
position:absolute; 
top: 20px;  
right: 10px;
z-index: 1; /* Stay on top */
}

.DONKWELCOME {
position:absolute; 
top: 9px;  
left: 152px;
z-index: 1; /* Stay on top */
}


/* ==LEFT SIDE== */

.Lpic1 {
position:absolute; 
top: 0px;  
left: 0px;
z-index: 1; /* Stay on top */
}

.Lpic2 {
position: absolute; 
top:600px; 
left:0px;
z-index: 1; /* Stay on top */
}

.Lpic3 {
position:absolute; 
top: 150px;  
left:40px;
z-index: 1; /* Stay on top */
}


.Lpic4{
position:absolute; 
top: 700px;  
left:64px;
z-index: 1; /* Stay on top */
}

/* ==RIGHT SIDE== */

.Rpic1 {
position: absolute; 
top:350px; 
right:170px;
z-index: 1; /* Stay on top */
}

.Rpic2 {
position: absolute; 
top:500px; 
right:0px;
z-index: 1; /* Stay on top */
}

.Rpic3 {
position:absolute; 
top: 800px; 
right:0px;
z-index: 1; /* Stay on top */
}


/* END FLOATING PICS
===================================================================================================================================================
*/

/* =================================================================================================================================================
TASKBAR*/
@font-face{
  font-family:"Pixelated MS Sans Serif";
  font-style:normal;
  font-weight:400;
  src:url(ms_sans_serif.woff) format("woff");
  src:url(ms_sans_serif.woff2) format("woff2")
  }
  @font-face{font-family:"Pixelated MS Sans Serif";
  font-style:normal;font-weight:700;
  src:url(ms_sans_serif_bold.woff) format("woff");
  src:url(ms_sans_serif_bold.woff2) format("woff2")
  }
.start_menu, .application_icons, .start_bar .start_button .logo, .start_bar .tray .calendar, .start_menu 
            {
background-image: url('https://static.tumblr.com/vnspll8/N8Gqe21td/master_sprite.png');
margin: auto;
            }
        
.start_bar .start_button .logo {
width: 16px;
height: 14px;
background-position: -633px -103px;
}
        
.application_icons {
height: 16px;
width: 84px;
background-position: -565px -69px;
}
        
.start_bar .tray .calendar {
height: 16px;
width: 16px;
background-position: -632px -87px;
}
        
.start_menu {
height: 383px;
width: 168px;
margin-bottom:0px;
}
           
            
.start_bar {
position: fixed;
background-color: rgb(192,192,192);
bottom: 0;
height: 28px;
width: 100%;
z-index: 4;
margin-left: -8px
}
        
.start_menu {
position: fixed;
z-index: 3;
bottom: 28px;
display: none;
}
        
.start_bar .top_border {
border-bottom: 1px solid rgb(255,255,255);
border-top: 1px solid rgb(223,223,223);
}
        
.start_bar .start_button {
float: left;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid gray;
border-right: 2px solid gray;
height: 18px;
width: 54px;
margin-left: 2px;
margin-top: 2px;
}
        
.sb_click {
border-bottom: 2px solid white !important;
border-right: 2px solid white !important;
border-top: 2px solid gray !important;
border-left: 2px solid gray !important;
}
        
.start_bar .start_button .text{
display: inline;
margin-right: 0 auto;
line-height: 18px;
font-weight: bold;
}
        
            .start_bar .start_button .logo{
                float: left;
                margin-top: 2px;
                margin-left: 2px;
            }
        
            .start_bar .big_seperator {
                float: left;
                border-left: 1px solid rgb(128,128,128);
                border-right: 1px solid rgb(255,255,255);
                height: 22px;
                margin-top: 2px;
                margin-left: 2px;
            }
        
            .start_bar .small_seperator {
                float: left;
                border-left: 1px solid rgb(255,255,255);
                border-top: 1px solid rgb(255,255,255);
                border-right: 1px solid rgb(128,128,128);
                border-bottom: 1px solid rgb(128,128,128);
                background-color: rgb(192,192,192);
                width: 1px;
                height: 16px;
                margin-top: 4px;
                margin-left: 2px;
            }
        
            .start_bar .application_icons {
                float: left;
                margin-top: 5px;
                margin-left: 7px;
                margin-right: 7px;
            }
        
            .start_bar .tray {
                float: right;
                border-top: 1px solid rgb(128,128,128);
                border-left: 1px solid rgb(128,128,128);
                border-bottom: 1px solid rgb(255,255,255);
                border-right: 1px solid rgb(255,255,255);
                height: 18px;
                width: 79px;
                margin-right: 5px;
                margin-top: 2px;
            }
        
            .start_bar .tray .time {
                line-height: 18px;
                float: right;
                font-size: 11px;
                margin-right: 10px;
            }
        
            .start_bar .tray .calendar {
                float: left;
                margin-top: 1px;
                margin-left: 3px;
            }


/* END TASKAR
==============================================================================================================================================
*/
/****** scrollbar ******/
        ::-webkit-scrollbar{
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-thumb{
            background: #ffffff;
            border-radius: 0px;
        }

        ::-webkit-scrollbar-track{
            background: inherit;
            border-radius: 0px;
        }
        

.marquee{
  width:1168px;
  top:13px;
  left:550px;
  color:var(--marquee);
  border: 1px solid #000000;
   position: relative;
  padding: 5px;
  font-family: trebuchet ms;
  font-size: 14px;
  background-color: #ffffff;
}



main {
    padding:0px;
    width: 100%;
    position: center;
}

.container {
    width: 1575px;
    height: 1115px;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-spacing: 0px;
    border-collapse: collapse;
    padding: 10px;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
}



.sidebar {
    width: 225px;
    height: 700px;
    left: -1px;
    top: 45px;
    position: relative;
    background-color: #ffffff;
    padding: 15px;
    font-family: trebuchet ms;
    border-radius: 2px;
border: 1px solid #000000;
    border-width: 2px;
    text-align: center;
background-image: url('https://64.media.tumblr.com/1b8191e4063c57adf28b654be8d4049d/8da189cbaa75e161-ba/s2048x3072/b1f07599cf92d9271e86f582b866370881877539.png');
}

.sidebar p {
    font-size: 14px;
    color: #000000;

}



table {
	border-collapse: collapse;
	border-spacing: 5px;
}
td,th {
	padding: 0;
}


ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0.3em 0 0 0;
}
h1 {
	line-height: 1.3;
	margin-bottom: 0.25em;
	padding: 0;
	letter-spacing: 0;
	font-size: 2.3em;
}
a, a:visited {
	color: #0645ad;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}









.updatebox { 
    width: 1270px;
    height: 700px;
    left: 436px;
    top: 314px;
    position: absolute;
    background-color: #ffffff;
    padding: 15px;
    overflow: auto;
    font-family: trebuchet ms;
    border-radius: 2px;
    border: 1px solid #000000;
    border-width: 2px;

}


.updateTIMESTAMP { /*this the text header in the update box*/
     font-family: trebuchet ms;
    font-size: 25px;
    text-align: left;
    color: #000000 ;
    text-transform: capitalize;
    height: 40px;
    box-sizing:border-box;
    background-color:#3beca2;
    padding:5px;
  }

.updateboxp { /*update text*/
    font-family: trebuchet ms;
margin-top: 10px;
    margin-left: 2px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 15px;
overflow: auto;
border: 1px solid #000000;
max-height: 600px;
}


.footer {
 width: 950px;
    height: 66px;
    left: 164px;
    top: 1060px;
    position: absolute;
    background-color: #ffffff; 
border: 2px solid #000000;
padding:5px;
}




















@media screen and (min-width: 800px)



/* MOST RECENT RETRY KEEP UPDATE HEADER IDEA
.ridge {
  border-style: ridge;
  border: 2px solid #000000;
  padding: 1px;
  margin: 2px;
  }

.sidebar {
  RE ADD START display:table;width:100%;max-width:1200px;table-layout:auto; RE ADD END
  width: 216px;
  height: 545px;
  text-align: center;
  position: absolute;
  top: 275px;
  left: 25px;
  background-color: #ffffff;
  overflow-x: hidden; RE ADD START Disable horizontal scroll RE ADD END
  padding-top: 10px;
  border: 1px solid #000000;
}


.sidelinks a {
  text-align: left;
  padding-top: 1px;
  padding-bottom: 1px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
}


.sidenav a:hover {
  color: #818181;
}


.updatebox {
  font-family: 'Alatsi';
  background: #ffffff;
  color: #000000;
  width: 1070px;
	height: 545px;
  overflow: auto;
  border: 1px solid #000000;
  position: absolute;
  top: 275px;
  left: 255px;
  padding-top: 10px;
  
}
       
.updatetxt {
font-family:'pmmm';
src:url(https://dl.dropbox.com/s/jw7da2jevt4m7mx/GD-MadoMaruGoJA-Rev001.otf);
color: #000000;
font-size: 15px;
margin-top: 10px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid #000000;  

}

.updateheader{
    font-family: 'Helvetica"
    font-size: 20px;
    text-transform: capitalize;
    box-sizing:border-box;
    background-color:#0a0b18;
    color: #bdffa1;
    padding:10px;
  }


*/





/* ==============================================================================================================================================
old stuff not working */
/*
#left-sidebar {
width: 216px;
height: 600px;
display: block;
order: 2;
margin-left: 35px;
margin-top: -105px;
font-size: 10px;
background-color: #7ee275;
}


#side{
background-color: #fff;
float: left;
width: 200px;
height: 600px;
position: fixed;
top: 10px;
left: 75px;
}
 
#sidepadding{
padding: 10px;
}

*/




/*
#content-container {
width: 1050px;
height: 547px;
margin-left: 265px;
margin-top: -600px;
border: 1px solid #000000;
background-color: #aed1cb;
display: block;
order: 1;
}


.update-box {
  font-family: 'Alatsi';
  background: #ffffff;
  color: #000000;
  width: 1025px;
	height: 525px;
  overflow: auto;
  margin: 1%;
  border-radius: 3px;
  border: 1px solid #000000;
}
*/ 







 /* idk what this is
 
a:link {
  color: #327d8c;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #196270;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;}
  
        

.nav li {
display: inline-block;
padding-right:
}
            
.bar img:hover {
filter:;
}

html, body {
margin: 5;
padding: 5;
background-color: #7ee275;
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #7ee275;
}

body a {
color: #7ee275;
font-weight: bold;

}

#navbar-contained {
margin-bottom: var(--row-gap)
}

#navbar-full {
display: none;
}



#footer {
height: var(--footer-height);
text-align: center;
color: var(--font-color);
background-color: var(--footer-bg-color);
}






RE ADD START  To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. RE ADD END
            @media only screen and (max-width: 1000px) {
                .flex {
                flex-wrap: wrap;
                }
                
*/           
            

































  




  
.yt {max-height: 170px;
width: 270px;
overflow: auto;
}