/* CSS for MrGibson.com written by Michael Gibson          */
/* Much of this CSS will not work on IE 9.0 or lower.      */
/* I test the CSS against FireFox, IE, Chrome, and Safari. */
/* gives entire site a rounded corner / modern look        */


/*special formats for stats*/


/* first */
sa {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #FFFF00;
  }

/* second */
sb {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #FFcc00;
  }


/* Third */
sc {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #FF9900;
   }

/* Fourth */
sd {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #FF6600;
  }

/* Fifth */
se {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #FF3300;
  }

/* grey bg */
sm {
    font: 16px courier;
    color: #000000;
    background-color: #CCCCCC;
  }




/* sixth */
sv {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #DD0000;
  }

/* seventh */
sw {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #DD0066;
  }


/* eigth */
sx {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #CC0099;
   }

/* nineth */
sy {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #BB00CC;
  }

/* tenth */
sz {
    font: italic bold 16px courier;
    color: #000000;
    background-color: #AA00FF;
  }






/* General Text */
sf {
    font:  16px courier;
    color: #000044;
  }


/* special format underlined header */
su {
    font: 16px courier;
    text-decoration: underline;
   }


/*******************************/
/** end of special formats     */
/*******************************/




/* Set all non specified text to 16px */

body {
      font-size: 16px;
     }

/* Set all non specified table text to 14px */
table {
       font-size: 16px;
      }

/* don't show borders of images in links */
img {
      border: 0px;
      margin: 0px;
    }


/* all links highlight yellow with mouse over */
a:hover {
          background-color: #FFFF00;
          text-decoration: underline;          
        }

/* all link text should not have underline. */
a {
  text-decoration: none;
  }


/* small text on bottom of page */
.smalltext {
            font-size: 10px;
           }

.spectext {
            font-size:16px;
            color: #009900;
          }



.menu{
     font-size: 20px;

     }

/* submit buttons should have nice think white border  */
/* with gradient blue, 20px white font, and 3D shadows */
.button-style {
	border: solid 2px #FFFFFF;
	border-radius: 11px;
	moz-border-radius: 11px;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	font-size: 16px;
	color: #FFFFFF;
	padding: 1px 10px;
	background: #0000FF;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0000FF), color-stop(100%,#AABBFF));
	background: -moz-linear-gradient(top, #0000FF 0%, #AABBFF 100%);
	background: -webkit-linear-gradient(top, #0000FF 0%, #AABBFF 100%);
	background: -o-linear-gradient(top, #0000FF 0%, #AABBFF 100%);
	background: -ms-linear-gradient(top, #0000FF 0%, #AABBFF 100%);
	background: linear-gradient(top, #0000FF 0%, #AABBFF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#AABBFF',GradientType=0 );

}

/* Form Heads should have nice think white border  */
/* with gradient green, 20px white font, and 3D shadows */
.head-style {
	border: solid 2px #FFFFFF;
	border-radius: 11px;
	moz-border-radius: 11px;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
	font-size: 16px;
	color: #FFFFFF;
	padding: 1px 10px;
	background: #009900;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009900), color-stop(100%,#00DD00));
	background: -moz-linear-gradient(top, #009900 0%, #00DD00 100%);
	background: -webkit-linear-gradient(top, #009900 0%, #00DD00 100%);
	background: -o-linear-gradient(top, #009900 0%, #00DD00 100%);
	background: -ms-linear-gradient(top, #009900 0%, #00DD00 100%);
	background: linear-gradient(top, #009900 0%, #00DD00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009900', endColorstr='#00DD00',GradientType=0 );

}



/* submit buttons should have nice think white border      */
/* with yellow background, 20px black font, and no shadows */
/* mouse over                                              */

input {
       border: solid 2px #0000FF;
       border-radius: 11px;
       moz-border-radius: 11px;
       font-size: 16px;
       color: #000000;
       padding: 1px 10px;
       background: #FFFFFF;
      }

/* used by all form input widgets */
input:hover {
             border: solid 2px #FFFFFF;
             border-radius : 11px;
             moz-border-radius : 11px;
             -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0);
             -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0);
             box-shadow: 0px 0px 5px rgba(0,0,0,0);
             font-size: 16px;
             color: #000000;
             padding: 1px 10px;
             background: #FFFF00;
            }


/* 3D looking panels with light grey */
.light-panel-style{
                   border: solid 2px #FFFFFF;
                   border-radius: 11px;
                   moz-border-radius: 11px;
                   -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                   -moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                   box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                   font-size: 16px;
                   color: #000000;
                   padding: 1px 10px;
                   background: #DDDDDD;
                  }
                  
                  
/* 3D looking panels with light blue                    */
img {                                                  
  border: solid 2px #FFFFFF;                          
  border-radius: 11px;                                
  moz-border-radius: 11px;                            
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);    
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
  box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
  font-size: 16px;
  color: #000000;
  padding: 1px 10px;
  background: #DDDDDD;
  }

.jj{
  background: #FF00FF;
  color:#00FF00;
  padding: 1px 1px;
  border: 0px;
}

/* 3D looking panels with light grey */
.dark-panel-style{
                  border: solid 2px #FFFFFF;
                  border-radius: 11px;         /* rounded corners    */
                  moz-border-radius: 11px;     /* rounded corners    */
                  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  font-size: 16px;
                  color: #000000;
                  padding: 1px 10px;
                  background: #CCAA88;
                 }


.blue-panel-style{
                  border: solid 2px #FFFFFF;
                  border-radius: 11px;         /* rounded corners    */
                  moz-border-radius: 11px;     /* rounded corners    */
                  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
                  font-size: 16px;
                  color: #000000;
                  padding: 1px 10px;
                  background: #CCCCCC;
                 }

/* 3d folder used in indi.php */
/* size 350 x 165             */
.folder-style{
               border: solid 2px #FFFFFF;
               border-radius: 11px;         /* rounded corners    */
               moz-border-radius: 11px;     /* rounded corners    */
               -webkit-box-shadow : 0px 0px 5px rgba(0,0,0,1.0);
               -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0);
               box-shadow: 0px 0px 5px rgba(0,0,0,1.0);
               font-size: 16px;
               color: #000000;              /* Black Text          */
               padding: 1px 10px;
               background: #DDCCBB;         /* folder color        */
               width: 350px;                /* view width          */
               height: 165px;               /* view heigth         */
               overflow: auto;              /* force scrollbars    */
               white-space: nowrap;         /* force horiz scrool  */
              }



@keyframes move {
  from {
    transform: translateX(-2px);
  }

  to {
    transform: translateX(2px);
  }
}


@keyframes move2 {
  from {
transform: scaleY(-1);
}
to {
    
transform: scaleY(1);
}
}

.coolbox {
  animation-duration: 1s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.coolbox2 {
  animation-duration: 2s;
  animation-name: move2;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.pulse-button {
  position: relative;
  display: block;
  font-size: 1.3em;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  color: white;
  border: none;
  border-radius: 50%;
  background: #5a99d4;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}