#tae-dex {
  width: 350px;
  border: 3px ridge #eee;
  border-radius: 5px;
  position: relative;
  height: 500px;
  overflow: hidden;
  background: #f8f8f8;
  box-shadow:1px 1px #aaa, 0px 1px #aaa, 1px 0px #eee, 0px -1px #aaa, -1px 0px #aaa, -1px 1px #aaa, -1px -1px #aaa, 1px -1px #aaa;
}
#tae-dex input[type=checkbox] {
  display: none;
  position: absolute;
  top: -9999999px;
  left: -99999999px;
}
.tae-dextop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 345px;
  font-family: arial;
  font-size: 9px;
  background: #555;
  color: #fff;
  z-index: 100;
  padding: 0px 5px;
}
.tae-dextop td {
  color: #fff;
  font-size: 9px;
  font-family: arial;
  text-align: right;
}
.tae-dexr {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 250px;
  background: red;
  width: 350px;
  z-index: 5;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.tae-dexw {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 250px;
  background: #efefef;
  width: 350px;
  z-index: 5;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.tae-dexout {
  width: 200px;
  height:200px;
  position: absolute;
  top: 145px;
  z-index: 5;
  left: 75px;
  border-radius: 100%;
  border: 1px solid #555;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.tae-dexin {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 210px;
  overflow: hidden;
  z-index: 5;
  left: 138px;  
  border-radius: 100%;
  background: #efefef;
  border: 1px solid #555;
  cursor: crosshair;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;  
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.tae-dexin img {
  width: 75px;
  height: 75px;
}
.tae-dexhome {
  padding: 5px 0px;
  width: 350px;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: #fff;
  z-index: 100;
}
.tae-dexhome2 {
  width: 15px;
  height: 15px;
  border: 1px solid #555;
  border-radius: 100%;
  cursor: crosshair;
}
.tae-dexload {
  position: absolute;
  top: 240px;
  width: 350px;
  left: 0px;
  text-align: center;
  font-size: 10px;
  font-family: arial;
  text-transform: uppercase;
  opacity: 1;
  -webkit-transition: all .2s ease-in-out 1.3s;
  -moz-transition: all .2s ease-in-out 1.3s;  
  -o-transition: all .2s ease-in-out 1.3s;
  transition: all .2s ease-in-out 1.3s;
}
.tae-dexl1 {
  opacity: 0;
  -webkit-transition: all .2s ease-in-out .6s;
  -moz-transition: all .2s ease-in-out .6s;  
  -o-transition: all .2s ease-in-out .6s;
  transition: all .2s ease-in-out .6s;
}
.tae-dexl2 {
  opacity: 0;
  -webkit-transition: all .2s ease-in-out .8s;
  -moz-transition: all .2s ease-in-out .8s;  
  -o-transition: all .2s ease-in-out .8s;
  transition: all .2s ease-in-out .8s;
}
.tae-dexl3 {
  opacity: 0;
  -webkit-transition: all .2s ease-in-out 1s;
  -moz-transition: all .2s ease-in-out 1s;  
  -o-transition: all .2s ease-in-out 1s;
  transition: all .2s ease-in-out 1s;
}
.tae-dexinfo {
  width: 350px;
  height: 456px;
  position: absolute;
  top: 20px;
  left: 0px;
  background: #f2f2f2;
  opacity: 0;
  -webkit-transition: all .6s ease-in-out 1.5s;
  -moz-transition: all .6s ease-in-out 1.5s;  
  -o-transition: all .6s ease-in-out 1.5s;
  transition: all .6s ease-in-out 1.5s;
}
.lockscreen {
 z-index: 10;
 line-height: 500px;
 position: absolute;
 top: 0px; left: 0px;
 background: url(https://img.clipartfox.com/a4133ae447e794f59daa7caac1000f1f_free-download-ipad-mini-ipad-mini-default-clipart_1024-1024.png);
 width: 350px;
 text-align: center;
 font-family: arial;
 font-size: 12px;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;  
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  overflow: hidden;
}
.lockscreen img {
position: absolute;
top: 0px;
left: 0px;
min-width: 350px;
min-height: 450px;
max-height: 600px;
max-width: 600px;
}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .lockscreen {left: 350px; }
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexr {top: -335px;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexw {bottom: -335px;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexout {top: -200px;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexin {top: -200px;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexload {opacity: 0;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexl1 {opacity: 1;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexl2 {opacity: 1;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexl3 {opacity: 1;}
#tae-dex input[type=checkbox]:checked ~ .tae-dexcontainer .tae-dexinfo {opacity: 1;}
.tae-dexpadd {
  width: 320px;
  height: 400px;
  padding: 10px;
  border: 5px solid #f2f2f2;
  overflow: auto;
  padding-top: 30px;
  text-align: justify;
  font-family: arial;
  font-size: 11px;
  color: #555;
  line-height: 110%;
}
.tae-dexhead {
  background: rgba(250,250,250,.8);
  color: #555;
  text-align: right;
  position: absolute;
  font-family: times;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  top: 0px;
  z-index: 10;
  left: 0px;
  padding: 5px;
  width: 325px;
}
.tae-deximg {
  float: left;
  padding: 5px;
  border: 1px solid #555;
  height: 50px;
  width: 50px;
  overflow: hidden;
  margin: 5px;
  margin-left: 0px;
  margin-top: 0px;
}
.tae-deximg img {
  width: 50px;
  min-height: 50px;
}
.tae-dexpadd lab {
 font-family: times;
  color: red;
  font-size: 13px;
  letter-spacing: 1px;
}
/****************************
  pokedex pc
*****************************/
.tae-dexuser {
  color: #888;
  font-family: arial;
  font-size: 9px;
  text-transform: uppercase;
  text-align: right;
}
.tae-deximg3 {
  padding: 5px;
  border: 1px solid #555;
  height: 50px;
  width: 50px;
  overflow: hidden;
  margin: 5px;
  margin-left: 0px;
  margin-top: 0px;
}
.tae-deximg3 img {
  width: 50px;
  min-height: 50px;
}
.tae-deximg2 {
  float: right;
  padding: 5px;
  border: 1px solid #555;
  height: 30px;
  width: 30px;
  margin-left: 5px;
  overflow: hidden;
}
.tae-deximg2 img {
  width: 30px;
  min-height: 30px;
}
.taeavi {
  width: 350px;
  height: 450px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}
.taeavi img {
  width: 350px;
  min-height: 450px;
}
.taecontainer {
margin: 10px auto;
height: auto;
width: auto;
}

.taetabs {
margin: 0px auto;
width: 300px;
height:  300px;
}

.taetab {
float: left; /* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */
}

/* position your tab labels in here - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */
.taetab label {
display: block; /* this lets you fix the label dimensions */
width: 75px;
height: auto;
line-height: 15px;
font-size: 10px;
font-family: arial;
text-transform: uppercase;
background: rgba(250,250,250,.7);
text-align: center;
border: 1px solid #fff;
margin: 0px;
position: relative;
z-index: 3;
}

.taetab input[type=radio]:checked ~ label {
background: white;
z-index: 2;
}

.taetab input[type=radio] {
display: none; /* DON'T EDIT */
}

/* if you want tab transitions they go here */
.taecontent {
position: absolute;
top: 5px;
bottom: 85px;
left: 0px;
right: 0px;
background: rgba(250,250,250,.6);
padding: 20px;
overflow: auto;
border: 1px solid #ccc;
opacity: 0;
}

/* if you want tab transitions they also go here */
.taetab input[type=radio]:checked ~ label ~ .taecontent {
z-index: 1;
opacity: 1;
}
.name {
 background: rgba(250,250,250,.6);
 font-family: arial;
 font-size: 13px;
 line-height: 60px;
 width: 168px;
 position: absolute;
 bottom: 15px;
 border: 1px solid #fff;
 right: 90px;
 color: #fff;
 text-shadow: 1px 1px 0px #333,  0px 1px 0px #333,  1px 0px 0px #333,  -1px 1px 0px #333,  0px -1px 0px #333,  -1px 0px 0px #333,  -1px -1px 0px #333,  1px -1px 0px #333;
 text-align: center;
 letter-spacing: 1px;
 text-transform: uppercase;
 font-weight: bold;
}
.profileim {
 width: 269px; padding: 10px;
 border: 1px solid #fff;
}
.profileim img {width: 269px;}
.infotext {
 background: #fff;
 color: #333;
 padding: 10px;
}
.infotext td {
 font-family: arial;
 font-size: 11px;
 line-height: 12px;
 text-align: justify;
}

/*default bold color*/
.infotext b {color: #DC143C;}

/* group bold color */
#GROUPNAME .infotext b {color: #GROUPCOLOR;}
#GROUPNAME .infotext b {color: #GROUPCOLOR;}
#GROUPNAME .infotext b {color: #GROUPCOLOR;}

/* Default label colors */
.label4info {color: red; margin-bottom: 10px; border-bottom: 1px solid #DC143C; padding: 10px 30px; text-align: right; background: #f8f8f8;}

/* group label colors */
#GROUPNAME .label4info {color: #GROUPCOLOR; border-bottom: 1px solid #GROUPCOLOR;}
#GROUPNAME .label4info {color: #GROUPCOLOR; border-bottom: 1px solid #GROUPCOLOR;}
#GROUPNAME .label4info {color: #GROUPCOLOR; border-bottom: 1px solid #GROUPCOLOR;}