body{background: url('https://astroturfbyof.com/background.jpg'); position:relative; color:white;}
  .styled-
  .style1{width:120px; font-family:"Teko", "sans-serif";  font-size: 20px; display:inline-block; border-radius:5px; cursor:pointer; padding: 10px 10px 10px 10px;}
 
  #x1{height:10px; width:10px; border-radius:3px; background:blue;}

  #render1{padding:5px;color:white; float:center;width:20%; text-align:center;display:inline-block; background:red; border-radius:10px; transition: all 7s; }
#textdrop{padding: 10px 20px 20px 20px; min-height:60px; font-size:75px; border: 0px solid black; min-width:5%; width:auto; float:center !important; text-align:center; opacity: 0;
 display:inline-block;background:rgba(0,177,64,0);border-radius:0px;  font-family: Arial, Helvetica, sans-serif;color:white;font-weight:normal}
 
 #rendo{padding: 0px 0px 0px 0px; min-height:60px; font-size:75px; border: 0px solid black; min-width:5%; width:auto; float:center !important; text-align:center;
 display:inline-block;background:rgba(0,177,64,0);border-radius:0px;  font-family: Arial, Helvetica, sans-serif;color:white;font-weight:normal}
 
 #adminbox{color:white; height:0px; position:absolute; z-index:1111; min-width: 800px; width:100%;background:rgba(0,0,0,.95);text-align:center; transition: height .5s, border .5s;}
 #admintoggle{color:white; height:0px; position:absolute; z-index:1111; width:15%; min-width: 200px; background:#00b140; text-align:center; 
 cursor:pointer; border-bottom-right-radius:5px; border-bottom-left-radius:5px; transition: margin .5s;}
 #admintoggle:hover{background:green;}
 #resbox{width:80%; height:250px; color:white; display:inline-block; vertical-align:top; text-align:center; }
  #resboxs{width:0%; height:100px; color:white; display:inline-block; }
 
 #optionbar{text-align:center; min-height:1%; display:inline-block; padding: 5px 5px 5px 5px;}
 
   #bar{height:70px; width:50%; padding:10px 0px 0px 0px; text-align:center; color:white; background: rgba(255,255,255,0);display:inline-block;vertical-align:top;}
      #bar2{height:70px; width:25%; padding:0px 0px 10px 0px; text-align:right; color:white; background: rgba(255,255,255,0);display:inline-block;vertical-align:top;}
   #bar2b{height:70px; width:25%; font-family:"Teko", "sans-serif";  font-size: 18px; padding:0px 0px 6px 0px; text-align:right; color:white; background: rgba(255,255,255,0);display:inline-block;vertical-align:top;}
   
  #toolbar{min-height:80px; min-width: 800px; width:100%; text-align:center; display:block; color:black; background: rgba(0,0,0,0); border-bottom: 0px solid black;
    -webkit-touch-callout: none;    -webkit-user-select: none;   -khtml-user-select: none;  -moz-user-select: none;   -ms-user-select: none;     user-select: none; }
    
    #ftselect{
        font-family:"Teko", "sans-serif";  font-size: 20px;
    }

      #ub1{min-width:40px; font-size:10px; color:white; display:inline-block; cursor:pointer; border-radius:5px; background: #00b140;padding:5px; transition: background .5s; text-align:center; margin:2px;}
  #ub1:hover{background:#00b140;}
  
      #ub2{min-width:40px; font-size:10px; color:white; display:inline-block; cursor:pointer; border-radius:5px; background: gray;padding:5px; transition: background .5s; text-align:center; margin:2px;}
  #ub2:hover{background:#00b140;}
    
      #ub3{min-width:40px; font-size:18px; color:white; font-family:"Teko", "sans-serif";  display:inline-block; cursor:pointer; border-top-left-radius:5px; border-bottom-right-radius:5px; background: #00b140;padding:5px 5px 5px 5px; transition: background .5s; text-align:center; margin:2px;}
  #ub3:hover{background:#ffffff;color:#00b140;}

      #ub3b{color:white; display:inline-block; cursor:pointer; border-top-left-radius:5px; border-bottom-right-radius:5px; background: #00b140; padding:5px; transition: background .5s; text-align:center; margin:2px;}
  #ub3b:hover{background:#ffffff;color:#00b140;}
  
    #buttonbr{display:inline-block;vertical-align:top;}
    #viewbox{display:inline-block;vertical-align:top; color:white; font-size:20px; min-height:0px; width:100%; background: rgba(0,0,0,.6);padding-top:5px; padding-bottom:5px;}
    
     #button0{vertical-align:top; padding:6px; min-width:0px; color:white; font-size:10px; display:inline-block; cursor:pointer; border-radius:5px; background: rgba(255,255,255,.25); transition: background .5s;}
  #button0:hover{background:red;} 
  
       #button0b{margin-top:4px; vertical-align:top; padding:1px; min-width:0px; color:white; font-size:10px; display:inline-block; cursor:pointer; border-radius:5px; background: rgba(255,255,255,.25); transition: background .5s;}
  #button0b:hover{background:#00b140;} 
  
         #button0c{font-size:14px; margin-top:4px; vertical-align:top; padding:2px 4px 2px 4px; min-width:0px; color:white; font-size:10px; display:inline-block; cursor:pointer; border-radius:5px; background: rgba(255,255,255,.25); transition: background .5s;}
  #button0c:hover{background:blue;} 
  
   .buttonwhoa{vertical-align:top; margin-top:4px; padding:2px; min-width:0px; color:white; font-size:10px; display:inline-block; cursor:pointer; border-radius:5px; background: rgba(255,255,255,.25); transition: background .5s;}
  .buttonwhoa:hover{background:red;} 
 
  .button1{min-width:60px; color:white; font-weight:bold;  font-family:"Teko", "sans-serif";  font-size: 20px; display:inline-block; cursor:pointer; border-bottom-right-radius:5px; border-top: 5px solid white; border-bottom: 5px solid white; border-top-left-radius:5px; background: rgba(0,0,0,0); solid white; padding:7px 10px 3px 10px; transition: background .5s;text-align:center;}
  .button1:hover{background:#ffffff;color:#00b140;}
  
  #instructions{
      color:white;
      padding:7px 0px 0px 0px;
      min-height:22px;
  }
 
      #buttonbox{min-width:30%; height:100%; color:white;font-family:"Teko", "sans-serif";  font-size: 20px; margin: auto; background:none; font-weight:bold; vertical-align: middle; display:inline-block; cursor:pointer;border-bottom-right-radius:5px; padding: 10px; border-right:0px solid rgba(255,255,255,.5);}
      #buttonbox2{min-width:20%; height:100%;font-family:"Teko", "sans-serif";  font-size: 20px; color:white; margin: auto; background:none; font-weight:bold; vertical-align: middle; display:inline-block; cursor:pointer;border-top-left-radius:5px; padding: 10px; border-left:0px solid rgba(255,255,255,.5);}
    #button2{min-width:60px; color:white; font-family:"Teko", "sans-serif";  font-size: 18px; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px 5px 2px 5px;}
  #button2:hover{color:#00b140; background:#ffffff !important;}
      #button2b{min-width:20px; font-family:"Teko", "sans-serif";  font-size: 16px; color:white; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px 5px 2px 5px;}
  #button2b:hover{color:#00b140; background:#ffffff !important;}
  .button2c{min-width:60px; color:white; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px;}
  .button2c:hover{background:#00b140 !important;}
  
#button3{min-width:80px; color:white; font-family:"Teko", "sans-serif"; font-size: 18px; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px; transition: background .5s; margin:5px;}
#button3:hover{color:#00b140; background:#ffffff !important;}
#button3z{min-width:120px; color:white; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px; transition: background .5s; margin:5px;}
#button3z:hover{background:#000000;}

#button4{min-width:60px; color:white; font-weight:bold;  font-family:"Teko", "sans-serif";  font-size: 22px; display:inline-block; cursor:pointer; border-bottom-right-radius:5px; border-top: 5px solid white; border-bottom: 5px solid white; border-top-left-radius:5px; background: rgba(0,0,0,0); solid white; padding:7px 10px 3px 10px; transition: background .5s;text-align:center;}
  #button5{min-width:60px; color:white; font-family:"Teko", "sans-serif";  font-size: 16px; background:rgba(0,177,64,1); font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; padding:5px 5px 2px 5px;}
  #button5:hover{color:#00b140; background:#ffffff !important;}
  

#buttonupload{width:360px; color:white; background:#00b140; font-weight:bold; display:inline-block; cursor:pointer;border-radius:5px; border-bottom:2px solid white; border-right:2px solid white; padding:5px;transition: background .5s;display:inline-block;}
#buttonupload:hover{background:green !important;}
  
    
#cont {    -webkit-perspective: 100px; /* Chrome, Safari, Opera  */    perspective: 100px; cursor:pointer; }
 
#fieldcolor{ width: 800px; height: 400px; background-color: rgba(0, 177, 64,1); background-size: 100% 100%; opacity:.75; z-index: 0; display:inline-block; position:absolute;}

#socfield {height:100%; width:100%; position: absolute !important; z-index: 4; display:inline-block;opacity:.95; transform-style: preserve-3d;}
  #socfield img{height:100%; width:100%; z-index: 4;}
  

 #footfield {height:100%; width:100%; position: absolute !important; z-index: -3; display:inline-block;opacity:.95; transform-style: preserve-3d;}
  #footfield img{height:100%; width:100%; z-index: -3;}
 
 

#footshadow{ height:100%; width:100%; position: absolute !important; z-index: 2; display:inline-block;opacity:.95; transform-style: preserve-3d}
#footshadow img{height:100%; width:100%; z-index: 2;}


#mlaxfield {height:100%; width:100%; position: absolute !important; z-index: 5; display:inline-block;opacity:.95; transform-style: preserve-3d;}
  #mlaxfield img{height:100%; width:100%;z-index: 5;}
  
#wlaxfield {height:100%; width:100%; position: absolute !important; z-index: 6; display:inline-block;opacity:.95; transform-style: preserve-3d;}
#wlaxfield img{height:100%; width:100%; z-index: 6;}
  
#fieldhockey {height:100%; width:100%; position: absolute !important; z-index: 7; display:inline-block;opacity:.95; transform-style: preserve-3d;}
#fieldhockey img{height:100%; width:100%; z-index: 7;}

#fhinside {height:100%; width:100%; position: absolute !important; z-index: 0; display:inline-block;opacity:.95; transform-style: preserve-3d;}
#fhinside img{height:100%; width:100%;z-index: 0;}

#minisoccer {height:100%; width:100%; position: absolute !important; z-index: 3; display:inline-block;opacity:.95; transform-style: preserve-3d;}
#minisoccer img{height:100%; width:100%;z-index: 3;}

#socceralt {height:100%; width:100%; position: absolute !important; z-index: 0; display:inline-block;opacity:.95; transform-style: preserve-3d;}
#socceralt img{height:100%; width:100%;z-index: 0;}


#endzone{ height:100%; width:100%; position: absolute !important; z-index: 1; display:inline-block;opacity:.95; transform-style: preserve-3d}
#endzone img{height:100%; width:100%;z-index: 1;}

#altpanels{ height:100%; width:100%; position: absolute !important; z-index: 2; display:inline-block;opacity:.75; transform-style: preserve-3d}
#altpanels img{height:100%; width:100%;  z-index: 0;}

    
#baseballfield{ width: 400px; height: 400px; background-repeat: no-repeat;  background-position: center; opacity:0; z-index:3; display:inline-block; position:absolute;}

#baseballaltpanels{ height:100%; width:100%; position: absolute !important; z-index: 2; display:inline-block;opacity:.75; transform-style: preserve-3d}
#baseballaltpanels img{height:100%; width:100%;  z-index: 0;}
  
#container {transform-style: preserve-3d; width: 805px; height: 405px; margin: auto; position: relative; -webkit-transform: rotatex(0deg);  transform: rotateX(0deg); transition: transform .5s; z-index:-1; background:none; border:none;}

#containeri {transform-style: preserve-3d; width: 800px; height: 400px; margin: auto;  position: relative; background-image: url('turf2.jpg'); background-size: 100% 100%;     -webkit-transform: rotateX(0deg);  transform: rotateX(0deg); transition: transform .5s;box-shadow: 3px 3px 5px #c5f58a,-3px -3px 5px #c5f58a,3px -3px 5px #c5f58a,-3px 3px 5px #c5f58a; z-index:-1;}

#containerz { width: 0px; height: 0px; margin: auto;  position: relative; z-index:1111; background-size:100%;}


#watermark{ height:0%; width:0%; margin: auto; float:left;  position: fixed; z-index: 1110; display:inline-block;opacity:.95; transform-style: preserve-3d}
#watermark img{height:100%; width:100%;}

#logobin{max-height: 140px; display:block; width:100%; background:rgba(0,0,0,0.6); border-top: 3px solid white; border-bottom: 3px solid white; text-align:center;padding-top:5px; padding-bottom:5px;color:white; font-weight:bold; white-space: nowrap; overflow-y:hidden; margin-top:5px;}
#logobin img{max-height:100px; cursor:pointer; padding:5px;}
#logobin img:hover{background:#00b140; }
 
  #draggable1 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;border-radius:10px;transform-style: preserve-3d;}
  #draggable2 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable3 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable4 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable5 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable6 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable7 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable8 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable9 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
  #draggable10 {height:100px; width:100px; padding: 0.5em; position: absolute !important; z-index: -5; display:inline-block;opacity:.95;}
   #draggable1 img{height:100%; width:100%;}
    #draggable2 img{height:100%; width:100%;}
    #draggable3 img{height:100%; width:100%;}
    #draggable4 img{height:100%; width:100%;}
    #draggable5 img{height:100%; width:100%;}
    #draggable6 img{height:100%; width:100%;}
    #draggable7 img{height:100%; width:100%;}
    #draggable8 img{height:100%; width:100%;}
    #draggable9 img{height:100%; width:100%;}
    #draggable10 img{height:100%; width:100%;}
    #draggable1:hover{background:rgba(0,255,0,.2);}
    #draggable2:hover{background:rgba(0,255,0,.2);}
    #draggable3:hover{background:rgba(0,255,0,.2);}
    #draggable4:hover{background:rgba(0,255,0,.2);}
    #draggable5:hover{background:rgba(0,255,0,.2);}
    #draggable6:hover{background:rgba(0,255,0,.2);}
    #draggable7:hover{background:rgba(0,255,0,.2);}
    #draggable8:hover{background:rgba(0,255,0,.2);}
    #draggable9:hover{background:rgba(0,255,0,.2);}
    #draggable10:hover{background:rgba(0,255,0,.2);}
    
    


#output { height:0px; width:100%; padding:10px; background:rgba(89, 244, 66,.0); text-align:center; display:inline-block; z-index:1000;transition: height .3s;}
#sendbtn {width:100px; height:15px; border-radius:5px; background:rgba(0,177,64,.65); color:white; display:inline-block; padding:5px; cursor:pointer; font-size:14px;}
#sendbtn:hover {background:rgba(0,177,64,1);}
#togbtn {height:15px; border-radius:5px; background:rgba(0,177,64,.1); color:white; display:inline-block; padding:5px; cursor:pointer; }
#togbtn:hover {background:rgba(0,177,64,.7);}
#msg {border-top-left-radius:5px; padding:5px; width:60%; background:rgba(255,255,255,.08); height:200px; display:inline-block; float:left; text-align:center; overflow-y:scroll;margin-bottom:20px; font-size:20px; color:white;}
#msgx {width:20%; background:rgba(255,255,255,.0);height:200px; display:inline-block; float:left; }
#fieldname { min-width:350px; background:rgba(0,0,0,.8); min-height:25px; display:inline-block; font-size:30px;color:white;border-radius:5px;padding:5px;}
#edittitle{font-size:11px; color:white;display:inline-block; cursor:pointer; padding:3px; border-radius:3px;}
#edittitle:hover{background:gray;}

#footer{width:100%; min-width:800px; background:rgba(0,0,0,.5); color:white; font-size:10px;display:inline-block;text-align:center;}    
#footer2{color:white; font-size:20px;display:inline-block;}
#footer3{border-top:0px solid black; border-bottom:0px solid black; width:100%; height:30px; background:black !important; display:block; color:white; transition:1s all;}
#footer3 img{max-height:30px; width:auto; opacity:.5 !important;}
#footer3:hover{border-top:0px solid #10efb0 !important; border-bottom:0px solid #10efb0 !important;}
#footer3b{border-top:0px solid black; border-bottom:0px solid black; width:100%; height:50px; background:black !important; display:block; color:gray; transition:1s all; font-size:15px !important; padding:none; margin:none;vertical-align:top !important;}

#sf1{width:100%; height:27%; background:rgba(255,255,255,.0);} 
#sf2{width:1.2%; height:43.5%; background:rgba(255,255,255,.0); display:inline-block;} 
#sf3{width:9.38%; height:43.5%; background:rgba(0,0,0,0); display:inline-block;}
#sf3b{width:9.38%; height:43.5%; background:rgba(0,0,0,0); display:inline-block;} 
#sf4{width:39.2%; height:43.5%; background:rgba(255,255,255,.0); display:inline-block;} 
#sf4a{margin-right:0.45%;float:right; height:100%; width:25.6%; background: rgba(0,0,0,.0);border-top-left-radius:175px; border-bottom-left-radius:175px;}
#sf4b{margin-left:1.3%;float:left; height:100%; width:25.5%; background: rgba(0,0,0,.0);border-top-right-radius:175px; border-bottom-right-radius:175px;}

#sc1{height:25px; width:25px; border-radius:5px; padding: 10px 0px 10px 0px;display:inline-block; border:2px solid rgba(255,255,255,1); margin:6px; margin-top:8px;cursor:pointer;}
#sc1:hover{border:2px solid #00b140;}

#spacer{width:100%; display:block; height:300px;}

#menuheight{display:inline-block; color:white;opacity:0;}
#menuwidth{display:inline-block; color:white;opacity:0;}
#menurotate{display:inline-block; color:white;opacity:0;}

#tbox1{}
#tbox1:hover{background:none !important;}