diff --git a/README.md b/README.md
index 95c6cda..e310cda 100644
--- a/README.md
+++ b/README.md
@@ -59,3 +59,5 @@ A list of 151 Pokemon are present in the js/pokedex.json file. These following f
## CONTRIBUTING
Send a pull request with what you worked on and we'll do a merge if everything seems fine.
+
+-- My first edit --
diff --git a/images/error.gif b/images/error.gif
new file mode 100644
index 0000000..c508fe5
Binary files /dev/null and b/images/error.gif differ
diff --git a/index.html b/index.html
index 1de3a13..3c3645f 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,95 @@
-
-
- PokeDex!
-
-
-
+
+
+
+ PokeDex!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/pokedex.json b/js/data.js
similarity index 99%
rename from js/pokedex.json
rename to js/data.js
index dfa9a54..78b6554 100644
--- a/js/pokedex.json
+++ b/js/data.js
@@ -1,4 +1,4 @@
-{
+var pokedata = {
"pokemon": [{
"id": 1,
"num": "001",
@@ -4083,4 +4083,4 @@
"Dark"
]
}]
-}
+};
diff --git a/js/poke.js b/js/poke.js
new file mode 100644
index 0000000..569f427
--- /dev/null
+++ b/js/poke.js
@@ -0,0 +1,176 @@
+/**
+ * This JS holds the functionality of the pokedex after it is switched on.
+ * Processing the search and updating the details of the searched pokemon is handled in this JS
+ *
+ */
+
+
+
+var currentPokeobj = null; /*This is used store the current entire pokemonobject for the current search*/
+/**
+ * This function is initiated on entering a pokemon name and pressing Enter
+ * @param {event,In_elem} event is the event which is on pressing Enter key, In_element is the input element on which is the event will be made
+ * @returns pokeProcess function which updates image and pokemon number in their respective place holders.
+ */
+formSubmit = function(event,In_elem){
+ event.preventDefault();
+ if(event.keyCode == 13){ // On Press of Enter
+ var pokemonName = In_elem.value;//document.getElementById('pokename').value;
+ switchOn(document.getElementById("red"),"red");
+ switchOn(document.getElementById("yellow"),"yellow");
+ switchOn(document.getElementById("green"),"green");
+ setTimeout( function(){ // In order to know that the search is being done and to turn the lights on setTimeout function is used.
+ return pokeProcess(pokemonName);
+ }, 3000);
+ /*pokeProcess(pokemonName);*/
+ }
+ return false;
+}
+/**
+ * This function is used to toggle the lights on the pokedex
+ * @param {id,color} id is the id of the element on which light on effect is to be displayed, color is the color of the light
+ * @returns Nothing.
+ */
+switchOn = function(id,color){
+
+ id.className += " is-animated-"+color;
+}
+/**
+ * This function is used to turn the lights off the pokedex
+ * @param {id,color} id is the id of the element on which light on effect is to be displayed, color is the color of the light
+ * @returns Nothing.
+ */
+switchOff = function(id,color){
+ id.classList.remove("is-animated-"+color);
+}
+/**
+ * This function is used to update the image in the image place holder and display the number of the pokemon on the number place holder
+ * @param {pokemonName} pokemonname is the name of the pokemon of which we need the details
+ * @returns Nothing.
+ */
+pokeProcess = function(pokemonName){
+
+ var pokeObj = getPokemonObject(pokemonName,0);
+ if(null == pokeObj){
+ pokemonDoesNotExist();
+ }else{
+ currentPokeobj = pokeObj;
+ updateImage(pokeObj);
+ document.getElementById('pokenumber').innerHTML = pokeObj.num;
+ // updateDescription(pokeObj);
+ }
+ switchOff(document.getElementById("red"),"red");
+ switchOff(document.getElementById("yellow"),"yellow");
+ switchOff(document.getElementById("green"),"green");
+}
+/**
+ * This function returns the Total Data related to the searched pokemon from the given JSON file
+ * @param {pokemonName,index} pokemonName is the name of the pokemon which need to be searched, index is used to get the next and previous pokemons objects on clicking the next and previous buttons
+ * @returns Array of pokemon objects.
+ */
+getPokemonObject = function(pokemonName,index){
+ var all_pokemons = pokedata.pokemon;
+ var len = all_pokemons.length;
+ for(var i=0 ; i < len; i++){
+ if(all_pokemons[i]['name'].toUpperCase() === pokemonName.toUpperCase()){ //this is used to make the search case insensitive
+ return all_pokemons[i-index];
+ }
+ }
+ return null;
+ }
+/**
+ * This function is used to update the image in the left side of the pokedex display div
+ * @param {pokemonObj} pokemonObj is the pokemon object of which the image needs to be updated.
+ * @returns Nothing.
+ */
+updateImage = function(pokemonObj){
+ var img_url = 'https://assets.pokemon.com/assets/cms2/img/pokedex/full/XXX.png';
+ img_url = img_url.replace('XXX',pokemonObj['num']);
+ removeClass(document.getElementById('sprite'),'is-fullSize');
+ // $('#sprite').removeClass('is-fullSize');
+ showImage(img_url);
+ }
+/**
+ * This function is used to remove the class from its parenet element
+ * @param {parentEl, classToBeRemoved} parentEL is the parent element from which the class classToBeRemoved is to be removed.
+ * @returns Nothing.
+ */
+removeClass = function(parentEl, classToBeRemoved) { // DOM element, className for remove.
+ var classes = parentEl.className.split(" ");
+
+ for (var i = 0; i < classes.length; i++) {
+ if (classes[i] == classToBeRemoved) {
+ // Remove class.
+ classes.splice(i, 1);
+ }
+
+ }
+ parentEl.className = classes.join(" ");
+}
+
+/**
+ * This function is used to show the image of the pokemon
+ * @param {image} image is the image which has to be displayed on the pokedex
+ * @returns Nothing.
+ */
+showImage = function(image){
+ var elem = document.getElementById('sprite');
+ elem.style.backgroundImage="url("+image+")";
+}
+
+/**
+ * This function is used to show the description of the pokemon
+ * @param {pokemonObj} pokemonObj is the pokemon object of which we need to update the description.
+ * @returns Nothing.
+ */
+updateDescription = function(pokemonObj){
+ console.log(pokemonObj);
+ var description = "";
+ description += get_formatted_string('Number',pokemonObj['num']);
+ description += get_formatted_string('Name',pokemonObj['name']);
+ description += get_formatted_string('Type',pokemonObj['type']);
+ description += get_formatted_string('Height',pokemonObj['height']);
+ description += get_formatted_string('Weight',pokemonObj['weight']);
+ description += get_formatted_string('Candy',pokemonObj['candy']);
+ description += get_formatted_string('Candy Count',pokemonObj['candy_count']);
+ description += get_formatted_string('Egg',pokemonObj['egg']);
+ description += get_formatted_string('Spawn Chance',pokemonObj['spawn_chance']);
+ description += get_formatted_string('Avg Spawns',pokemonObj['avg_spawns']);
+ description += get_formatted_string('Multipliers',pokemonObj['multipliers']);
+ description += get_formatted_string('Weakness',pokemonObj['weaknesses']);
+ description += get_formatted_string('Next Evolution',JSON.stringify(pokemonObj['next_evolution']));
+ console.log(description);
+ document.getElementById('description').innerHTML=description;
+
+}
+/**
+ * This function is used to get the formatted string in ordere to show it in the description
+ * @param {key,val} key is the key of the pokemon object and value is its value for that key.
+ * @returns formatted string.
+ */
+get_formatted_string = function(key, val){
+ if(null != val && undefined != val){
+ return key+" : "+val.toString()+ " ";
+ }
+ return '';
+
+ }
+/**
+ * This function is used to display the error when the searched pokemon does not exist.
+ * @param {} None
+ * @returns Nothing
+ */
+pokemonDoesNotExist = function(){
+ var message = "pokemon not found";
+ // document.getElementById('sprite').className+=' is-fullSize';
+ showImage("images/error.gif");
+ // errorMessage(message);
+}
+/**
+ * This function is used to display the error message when the searched pokemon does not exist.
+ * @param {} None
+ * @returns Nothing
+ */
+errorMessage = function(message){ /*Displays the Error Message*/
+ document.getElementById('description').innerHTML=message;
+ }
\ No newline at end of file
diff --git a/js/pokedex_change.js b/js/pokedex_change.js
new file mode 100644
index 0000000..e5e376c
--- /dev/null
+++ b/js/pokedex_change.js
@@ -0,0 +1,43 @@
+/**
+ * This JS holds the functionality of the pokedex to change the details of the pokemon on the click of previous and next butttons
+ *
+ *
+ */
+
+document.getElementById('plus').addEventListener('click', function(event) {
+ change_pokedex(event.target);
+});
+//Defines the function to be called on click
+/**
+ * This function is used to change the pokemon image and pokemon number in their place holder on the click of button
+ * @param {button} button is used to update pokemon based on whether it is a previous button or the next button.
+ * @returns None.
+ */
+change_pokedex = function(button){
+ console.log(button.id);
+ if(currentPokeobj == null){
+ return;
+ }
+ var pokeObj = null;
+ if(button.id == 'prev'){
+ pokeObj = getPokemonObject(currentPokeobj.name,1);
+ }else if (button.id == 'next'){
+ pokeObj = getPokemonObject(currentPokeobj.name,-1);
+ }else{
+ //Ignoring the rest of the events
+ return
+ }
+ if(null == pokeObj){
+ pokemonDoesNotExist();
+ document.getElementById('pokenumber').innerHTML ='';
+ document.getElementById('pokename').value='';
+ }else{
+ currentPokeobj = pokeObj;
+ updateImage(pokeObj);
+ document.getElementById('pokenumber').innerHTML = pokeObj.num;
+ document.getElementById('pokename').value=pokeObj.name;
+ // updateDescription(pokeObj);
+ }
+}
+
+
diff --git a/js/pokedex_toggle.js b/js/pokedex_toggle.js
new file mode 100644
index 0000000..ebd9a87
--- /dev/null
+++ b/js/pokedex_toggle.js
@@ -0,0 +1,47 @@
+/**
+ * This JS holds the functionality of the pokedex to switch it On and Off.
+ * When the Pokedex is turned on the light will blink and it will stop on closing the pokedex.
+ *
+ */
+
+
+var span_to_open = document.querySelector(".open-button");
+/**
+ * Defines the function to be called on click which is used to open the pokedex and turn the lights on.
+ * @param {}
+ * @returns None.
+ */
+toggle_pokedex_on = function(){
+ document.getElementsByClassName('Pokedex-rightBackface')[0].className+=' rotate-open';
+ document.getElementsByClassName('Pokedex-rightFrontface')[0].className+=' rotate-close';
+ var d = document.getElementById("light");
+ d.className += " is-animated";
+}
+
+/**
+ * Checks if `addEventListener` can be used and adds the click eventlListener.
+ * @param {}
+ * @returns None.
+ */
+if (span_to_open.addEventListener) span_to_open.addEventListener('click', toggle_pokedex_on, false);
+else span_to_open.attachEvent('onclick', toggle_pokedex_on);
+
+var span_to_close = document.querySelector(".close-button");
+/**
+ * Defines the function to be called on click which is used to close the pokedex and turn off the light.
+ * @param {}
+ * @returns None
+ */
+toggle_pokedex_off = function(){
+ console.log('Now closing');
+ removeClass(document.getElementsByClassName('Pokedex-rightBackface')[0],'rotate-open');
+ removeClass(document.getElementsByClassName('Pokedex-rightFrontface')[0],'rotate-close');
+ var d = document.getElementById("light");
+ d.classList.remove("is-animated");
+
+}
+
+//Checks if `addEventListener` can be used and adds the click eventlListener.
+if (span_to_close.addEventListener) span_to_close.addEventListener('click', toggle_pokedex_off, false);
+else span_to_close.attachEvent('onclick', toggle_pokedex_off);
+
diff --git a/style/main.css b/style/main.css
index 1259187..429301f 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,3 +1,635 @@
-body{
- margin:0;
+body {
+ font-family: "Source Code Pro", monospace
+}
+.u-clearfix,
+.Pokedex:after {
+ clear: both;
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden
+}
+.Btn {
+ border: 1px solid #000;
+ /*-webkit-box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.5);
+ box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.5);*/
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: top;
+}
+.Btn:active {
+ -o-transform: scale(.9);
+ -ms-transform: scale(.9);
+ -moz-transform: scale(.9);
+ -webkit-transform: scale(.9);
+ transform: scale(.9)
+}
+.Btn.is-animated {
+ -o-animation: .3s isAnimated infinite;
+ -ms-animation: .3s isAnimated infinite;
+ -moz-animation: .3s isAnimated infinite;
+ -webkit-animation: .3s isAnimated infinite;
+ animation: .3s isAnimated infinite
+}
+.Btn.is-animated-red {
+ -o-animation: .4s isAnimatedr infinite;
+ -ms-animation: .4s isAnimatedr infinite;
+ -moz-animation: .4s isAnimatedr infinite;
+ -webkit-animation: .4s isAnimatedr infinite;
+ animation: .4s isAnimatedr infinite
+}
+.Btn.is-animated-yellow {
+ -o-animation: .5s isAnimatedy infinite;
+ -ms-animation: .5s isAnimatedy infinite;
+ -moz-animation: .5s isAnimatedy infinite;
+ -webkit-animation: .5s isAnimatedy infinite;
+ animation: .5s isAnimatedy infinite
+}
+.Btn.is-animated-green {
+ -o-animation: .6s isAnimatedg infinite;
+ -ms-animation: .6s isAnimatedg infinite;
+ -moz-animation: .6s isAnimatedg infinite;
+ -webkit-animation: .6s isAnimatedg infinite;
+ animation: .6s isAnimatedg infinite
+}
+.Btn--red {
+ background: #f00
+}
+.Btn--blue {
+ background: #509bfb
+}
+.Btn--yellow {
+ background: #fc0
+}
+.Btn--green {
+ background: #30fa04
+}
+.Btn--gray {
+ background: #696969
+}
+.Btn--coral {
+ background: #05fbfb
+}
+.Btn--orange {
+ background: #ffa500
+}
+.Btn--white {
+ background: #ffffff
+}
+.Btn--gold {
+ background: #FFDF00
+}
+.Btn--small {
+ width: 20px;
+ height: 20px
+}
+.Btn--large {
+ width: 70px;
+ height: 20px
+}
+.Btn--mini {
+ width: 70px;
+ height: 5px
+}
+.Btn--medium {
+ width: 35px;
+ height: 35px
+}
+.Btn--big {
+ width: 50px;
+ height: 50px
+}
+.Btn--rounded {
+ -webkit-border-radius: 50%;
+ border-radius: 50%
+}
+.Btn--round {
+ -webkit-border-radius: 10px;
+ border-radius: 10px
+}
+.Btn--square {
+ border: 1px;
+ background-color: #696969;
+ height:30px;
+ width:70px;
+ cursor:pointer;
+}
+@-moz-keyframes isAnimated {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #05fbfb
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-webkit-keyframes isAnimated {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #05fbfb
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-o-keyframes isAnimated {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #05fbfb
+ }
+ 100% {
+ background: #fff
+ }
+}
+@keyframes isAnimated {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #05fbfb
+ }
+ 100% {
+ background: #fff
+ }
+}
+/*-----------------------------------------------------------------------------*/
+@-moz-keyframes isAnimatedr {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #f00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-webkit-keyframes isAnimatedr {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #f00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-o-keyframes isAnimatedr {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #f00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@keyframes isAnimatedr {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #f00
+ }
+ 100% {
+ background: #fff
+ }
+}
+/*-------------------------------------------------------------------------------------------*/
+@-moz-keyframes isAnimatedy {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #fc0
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-webkit-keyframes isAnimatedy {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #fc0
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-o-keyframes isAnimatedy {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #fc0
+ }
+ 100% {
+ background: #fff
+ }
+}
+@keyframes isAnimatedy {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #fc0
+ }
+ 100% {
+ background: #fff
+ }
+}
+/*--------------------------------------------------------------------------------------*/
+@-moz-keyframes isAnimatedg {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #7FFF00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-webkit-keyframes isAnimatedg {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #7FFF00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@-o-keyframes isAnimatedg {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #7FFF00
+ }
+ 100% {
+ background: #fff
+ }
+}
+@keyframes isAnimatedg {
+ 0% {
+ background: #fff
+ }
+ 50% {
+ background: #7FFF00
+ }
+ 100% {
+ background: #fff
+ }
+}
+.Pokedex {
+ margin: 100px auto 0;
+ -ms-perspective: 1000px;
+ -moz-perspective: 1000px;
+ -webkit-perspective: 1000px;
+ perspective: 1000px;
+ position: absolute;
+ position: relative;
+ position: relative;
+ 0: 0;
+ width: 400px;
+ background: #dd092f;
+ -webkit-border-radius: 10px 0 0 10px;
+ border-radius: 10px 0 0 10px;
+}
+/*.Pokedex:hover .Pokedex-rightFrontface,
+.Pokedex.is-active .Pokedex-rightFrontface {
+ -o-transform: rotateY(0);
+ -ms-transform: rotateY(0);
+ -moz-transform: rotateY(0);
+ -webkit-transform: rotateY(0);
+ transform: rotateY(0)
+}
+.Pokedex:hover .Pokedex-rightBackface,
+.Pokedex.is-active .Pokedex-rightBackface {
+ -o-transform: rotateY(180deg);
+ -ms-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg)
+}*/
+
+.Pokedex-rightBackface.rotate-open {
+ -o-transform: rotateY(180deg);
+ -ms-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg)
+}
+.Pokedex-rightFrontface.rotate-close {
+ -o-transform: rotateY(0);
+ -ms-transform: rotateY(0);
+ -moz-transform: rotateY(0);
+ -webkit-transform: rotateY(0);
+ transform: rotateY(0)
+}
+.Pokedex-window {
+ margin: 20px;
+ -webkit-border-radius: 10px 10px 0 0;
+ border-radius: 10px 10px 0 0;
+ background: #b0b0b0;
+ padding: 15px;
+ border: 1px solid #000
+}
+.Pokedex-sprite {
+ background: #fff;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 150px;
+ border: 2px solid #000;
+ background-size: 160px 160px;
+}
+
+.Pokedex-sprite.is-fullSize {
+ -moz-background-size: 100%;
+ -webkit-background-size: 100%;
+ background-size: 100%
+}
+/*.Pokedex-search {
+ margin: 20px 0;
+}*/
+.Pokedex-search {
+ background: lightgreen;
+ border: none;
+ border: 1px solid #000;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ color: #000;
+ text-align: center;
+ font-size: 40px;
+ outline: 0;
+ padding: 10px;
+ margin: 50px 50px;
+ width: 100px;
+ height: 50px;
+}
+.Pokedex-search input:focus {
+ border: 1px solid #000
+}
+.Pokedex-search input::-webkit-input-placeholder {
+ color: #fff
+}
+.Pokedex-input {
+ background: #696969;
+ margin: 20px;
+ /*padding: 20px;*/
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ border: 2px solid #000;
+ height: 65px;
+ width: 255px;
+ margin-left: 50px;
+ color: white;
+ font-size: large;
+}
+.Pokedex-description1 {
+ background: #696969;
+ width : 30px;
+ height : 25px;
+}
+.Pokedex-left {
+ background: -o-linear-gradient(top, #dd092f 80%, rgba(0, 0, 0, 0.2));
+ background: -ms-linear-gradient(top, #dd092f 80%, rgba(0, 0, 0, 0.2));
+ background: -moz-linear-gradient(top, #dd092f 80%, rgba(0, 0, 0, 0.2));
+ background: -webkit-linear-gradient(top, #dd092f 80%, rgba(0, 0, 0, 0.2));
+ background: linear-gradient(to bottom, #dd092f 80%, rgba(0, 0, 0, 0.2));
+ border: 1px solid #000;
+ -webkit-border-radius: 10px 0 0 10px;
+ border-radius: 10px 0 0 10px;
+ border-right: 10px solid #000;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
+ height: 500px;
+ width: 400px
+}
+.Pokedex-leftTop {
+ padding: 10px 20px
+}
+.Pokedex-leftBottom {
+ padding: 10px 20px
+}
+.Pokedex-rightFrontface {
+ position: absolute;
+ bottom: 0;
+ left: 100%;
+ -ms-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ background: #dd092f;
+ border: 1px solid #000;
+ border-left: 0;
+ -webkit-border-radius: 0 10px 10px 0;
+ border-radius: 0 10px 10px 0;
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ float: right;
+ height: 400px;
+ -o-transform: rotateY(-180deg);
+ -ms-transform: rotateY(-180deg);
+ -moz-transform: rotateY(-180deg);
+ -webkit-transform: rotateY(-180deg);
+ transform: rotateY(-180deg);
+ -o-transform-origin: left top;
+ -ms-transform-origin: left top;
+ -moz-transform-origin: left top;
+ -webkit-transform-origin: left top;
+ transform-origin: left top;
+ -o-transition: 1s -o-transform;
+ -ms-transition: 1s -ms-transform;
+ -moz-transition: 1s -moz-transform;
+ -webkit-transition: 1s -webkit-transform;
+ transition: 1s transform;
+ width: 400px
+}
+.Pokedex-rightFrontfaceTop:before {
+ border-bottom: 0 solid transparent;
+ border-left: 80px solid transparent;
+ border-right: 60px solid transparent;
+ border-top: 80px solid transparent;
+ content: "";
+ display: inline-block;
+ border-left-color: #dd092f;
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ margin-left: 200px
+}
+.Pokedex-rightFrontfaceTop:after {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ background: #dd092f;
+ border-top: 1px solid #000;
+ content: "";
+ height: 80px;
+ width: 200px
+}
+.Pokedex-rightFrontfaceBottom {
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ font-size: 0;
+ margin: 0 50px
+}
+.Pokedex-rightBackface {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -ms-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ background: #dd092f;
+ border: 1px solid #000;
+ /*border-left: 8px solid rgba(0, 0, 0, 0.3);*/
+ -webkit-border-radius: 0 0 0 10px;
+ border-radius: 0 0 0 10px;
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ float: right;
+ height: 400px;
+ -o-transform: rotateY(0);
+ -ms-transform: rotateY(0);
+ -moz-transform: rotateY(0);
+ -webkit-transform: rotateY(0);
+ transform: rotateY(0);
+ -o-transform-origin: right top;
+ -ms-transform-origin: right top;
+ -moz-transform-origin: right top;
+ -webkit-transform-origin: right top;
+ transform-origin: right top;
+ -o-transition: 1s -o-transform;
+ -ms-transition: 1s -ms-transform;
+ -moz-transition: 1s -moz-transform;
+ -webkit-transition: 1s -webkit-transform;
+ transition: 1s transform;
+ width: 400px;
+}
+/*.Pokedex-rightBackface:after {
+ border-bottom: 25px solid transparent;
+ border-left: 25px solid transparent;
+ border-right: 25px solid transparent;
+ border-top: 25px solid transparent;
+ content: "";
+ display: inline-block;
+ border-left-color: #fc0;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ display: block;
+ margin: 0 auto;
+ margin-top: -25px
+}*/
+.open-button {
+ border-bottom: 25px solid transparent;
+ border-left: 25px solid transparent;
+ border-right: 25px solid transparent;
+ border-top: 25px solid transparent;
+ content: "";
+ display: inline-block;
+ border-left-color: #fc0;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ display: block;
+ margin: 0 auto;
+ cursor: pointer;
+ -webkit-box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5);
+ margin-top: -25px
+}
+.Pokedex-rightBackfaceTop {
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ background: #dd092f;
+ border-top: 1px solid #000;
+ content: "";
+ height: 80px;
+ width: 200px;
+}
+.Pokedex-rightBackfaceTop:before {
+ border-bottom: 0 solid transparent;
+ border-left: 0 solid transparent;
+ border-right: 60px solid transparent;
+ border-top: 80px solid transparent;
+ content: "";
+ display: inline-block;
+ border-right-color: #dd092f;
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-right: 200px
+}
+.Pokedex-rightBackfaceTop:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #000;
+ content: "";
+ height: 100px;
+ -o-transform: rotate(37deg);
+ -ms-transform: rotate(37deg);
+ -moz-transform: rotate(37deg);
+ -webkit-transform: rotate(37deg);
+ transform: rotate(37deg);
+ -o-transform-origin: left top;
+ -ms-transform-origin: left top;
+ -moz-transform-origin: left top;
+ -webkit-transform-origin: left top;
+ transform-origin: left top;
+ width: .5px
+}
+arrow-right {
+ width: 0;
+ height: 0;
+ border-top: 20px solid transparent;
+ border-bottom: 20px solid transparent;
+
+ border-left: 20px solid #FFFF00;
+}
+
+.plus {
+ float: right;
+ margin: -200px -20px;
+}
+*::-webkit-input-placeholder {
+ color: white;
+}
+*:-moz-placeholder {
+ /* FF 4-18 */
+ color: white;
+}
+*::-moz-placeholder {
+ /* FF 19+ */
+ color: white;
+}
+*:-ms-input-placeholder {
+ /* IE 10+ */
+ color: white;
}
\ No newline at end of file