/* COMMON */
#articleView{
	width: 100%;
}

#articleView table{
	width: 100%;
}

#articleView table th{
	background-color: #8a8e9a;
	color: #fff; 
}

#articleView table td{
	color: #656565;  
} 
 
#articleView table th, 
#articleView table td{
	text-align: center;
}

#articleView table tr td.left{
	text-align: left;
}

#articleView .articleTop table tr th{
    border-radius: 5px;
    background-color: #9c9cd8;
    vertical-align: middle;
}

#articleView .articleTop table tr ul li{  
    width: 20%;
    float: left;
    letter-spacing: -1px;
}
#articleView .articleTop table tr ul li a{
    display: block;
    border-radius: 5px;
    background-color: #ebebeb;
    color: #6e6e6e;
    margin: 2px;
}
#articleView .articleTop table tr ul li a.active,
#articleView .articleTop table tr ul li a:hover{ 
    background-color: #e66450;
    color: #fff; 
}
 
#articleView .articleTop table{
    border-spacing: 2px;
    border-collapse: separate;
}

#articleView .articleTop select{
    width: 100%;
    margin-top: 10px;
}
 
/* Search */
#articleView .pokemonSearch{
    font-weight: bold;
    color: #9c9cd8;
    margin: 10px 0px;
    width: 100%;
}

#articleView .pokemonSearch label{
    display: block;
    float: left;
    color: #6e6e6e;
    text-align: center;
    margin-right: 10px;
    font-size: 10pt;
    line-height: 15px;
}
#articleView .pokemonSearch input{
    background-color: #ebebeb;
    border: 1px solid #656565;    
    width: calc(100% - 130px);
    height: 30px;
    text-indent: 10px;
}

#articleView .pokemonSearch #btnSearch{
    text-indent: -10000em;
    background: url('//static.inven.co.kr/image_2011/pokemongo/dataninfo/pokemon/btn_search.png') no-repeat left top; 
    border: none;
    width: 45px;
    height: 32px;
}
   
 
 /*LIST*/
 .articleList {
    margin-top: 10px;
 }
 .articleList .infoWrap {
    border: none; 
 }
 .articleList .infoWrap .title-board{
    background-color: #da7d7d;
    color: #fff;
 }
 .articleList .infoWrap .title-board h3{
    color: #fff;
 } 

 #articleView .articleContent .groupList li,
 .articleList .pokemonList li{
    display: block; 
    float: left;
    width: 30%;
    margin: 10px 0px;
 }
 
 #articleView .articleContent .groupList li.arrow{
    width: 15px;
    margin-top: 50px;
 } 

 #articleView .articleContent .groupList li a.pokemonicon,
 .articleList .pokemonList li a.pokemonicon{ 
    display: block; 
    width: 96px;
    height: 96px;
    margin: 0 auto;

 }
 #articleView .articleContent .groupList li a span,
 .articleList .pokemonList li a span{
    display: block;
    width: 100%;
    text-align: center;
 } 

 #articleView .articleContent .groupList li a img,
 .articleList .pokemonList li a img{
    width: 96px;
    height: 96px;
    border-radius: 5px;
    border: 1px solid #ebebeb;   
    display: block; 
    margin: 0 auto;
 }


 #articleView .articleContent .groupList li span, 
 .articleList .pokemonList li span{
    display: block;
    text-align: center;
 }

 #articleView .articleContent .groupList li span.pokemonname a,
 .articleList .pokemonList li span.pokemonname a{
    color: #e36944;
    font-weight: bold;
 }
 .articleList .pokemonList li span.pokemontype a{
    color: #6e6e6e;
    text-align: center;
 }

.buttonMenu{
    border-top: 2px solid #f5dede;
}
 /* detail */


 .pokemonNavi{
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
 }
 .pokemonNavi a{
    display: block;
    width: calc(50% - 32px); 
    width: -webkit-calc(50% - 32px); 
    width: -moz-calc(50% - 32px); 
    height: 20px;
    float: left;
    line-height: 21px;
    padding: 10px;
 }
 .pokemonNavi a:hover{
    background-color: #e66450;
    color: #fff;
 }
 .pokemonNavi a.next{
    border: 1px solid #d7d7d7;
    border-radius: 0px 5px 5px 0px;
    margin-left: -1px;
 }
 .pokemonNavi a.prev{
    border: 1px solid #d7d7d7;
    border-radius: 5px 0px 0px 5px; 
}
 .pokemonNavi a.prev span{
    display: block;
    width: 15px;
    height: 19px;
    background:  url('//static.inven.co.kr/image_2011/pokemongo/dataninfo/pokemon/pokemon_arrow_25x30.png')  no-repeat left 2px;
    float: left;
 }
 .pokemonNavi a.next span{
    display: block;
    width: 15px;
    height: 19px;
    background:  url('//static.inven.co.kr/image_2011/pokemongo/dataninfo/pokemon/pokemon_arrow_25x30.png')  no-repeat right 2px;
    float: right;
 }
 .pokemonNavi a.prev:hover span{
    background-position:  0px -14px;
 }
 .pokemonNavi a.next:hover span{
    background-position:  -10px -14px;
 }

 .articleContent h3{
    width: 100%;
    height: 10px; 
    color: #fff;
    border-radius: 5px;
    line-height: 12px;
    text-indent: 5px;
    padding: 10px;
 }

 .articleContent h3.evolution,
 .articleContent h3.pokemonname{ 
    background-color: #da7d7d; 
 }

 .articleContent h3.quickmove,
 .articleContent h3.chargemove{ 
    background-color: #6bcac4; 
 }


 .articleContent .pokemonimage,
 .articleContent .pokemontype {
    width: 100%;
    margin-bottom: 10px;
 }
 .articleContent .pokemonimage img{
    width: 256px;
    height: 256px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    margin: 5px auto;
    display: block;
 }

 .articleContent .pokemontype {
    width: 100%;
    height: 35px;
    border: 1px solid #d7d7d7;
    border-radius: 5px; 
 }
 .articleContent .pokemontype li{ 
    display: block;
    height: 35px;
    float: left;
    line-height: 37px; 
    padding: 0px 2px;
    width: calc(45% - 70px);
    width: -webkit-calc(45% - 70px);
    width: -moz-calc(45% - 70px);
}

 .articleContent .pokemontype li.title{
    width: 60px;
    text-align: center;
    background-color: #9c9cd8;
    color: #fff;
    border-radius: 5px; 
 }
 .articleContent .pokemontype li.type{
    letter-spacing: -1px;
    width: calc(55% - 90px);
    width: -webkit-calc(55% - 90px);
    width: -moz-calc(55% - 90px);
 }

 .articleContent .pokemontype li img{
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
 }


 .articleContent .chargeData,
 .articleContent .quickData{
    margin-top: 5px;
    margin-bottom: 10px;
 }
 
 #articleView .articleContent .chargeData table,
 #articleView .articleContent .quickData table{
    border-bottom: 2px solid #cde3e2;
 }
 #articleView .articleContent .chargeData table th,
 #articleView .articleContent .quickData table th{
    color: #1d625f;
    background-color: #cde3e2;
    height: 35px;
    line-height: 35px;
    letter-spacing: -1px;
 }
 #articleView .articleContent .chargeData table th.first,
 #articleView .articleContent .quickData table th.first{
    border-radius: 5px 0px 0px 5px; 
 }
 #articleView .articleContent .chargeData table th.last,
 #articleView .articleContent .quickData table th.last{
    border-radius: 0px 5px 5px 0px; 
 }

 #articleView .articleContent .chargeData table td,
 #articleView .articleContent .quickData table td {
    height: 35px;
    line-height: 30px;
    border-bottom: 1px solid #ebebeb;
    color: #6e6e6e;
    vertical-align: middle;
 }

 #articleView .articleContent .chargeData table td span,
 #articleView .articleContent .quickData table td span{
    text-align: left;
    width: 100%;
    display: block;
    /*text-indent: 10px;*/
 }
 #articleView .articleContent .chargeData table td span.movename,
 #articleView .articleContent .quickData table td span.movename{
    font-weight: bold;
    letter-spacing: -1px;
 }


 #articleView .articleContent .chargeData table td span.movetype{
    width: 60px;
    letter-spacing: -1px;
    float: left;
 }

 #articleView .articleContent .chargeData table td span.energygauge{
    display: block;
    width: calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    height: 7px;
    float: right;
    margin-top: 15px;
 }
 #articleView .articleContent .chargeData table td li.energygauge1,
 #articleView .articleContent .chargeData table td li.energygauge2,
 #articleView .articleContent .chargeData table td li.energygauge3,
 #articleView .articleContent .chargeData table td li.energygauge4,
 #articleView .articleContent .chargeData table td li.energygauge5{
    display: block;
    height: 5px;
    background-color: #4cc9fc;
    float: left;
    margin-right: 3px;
    border: 1px solid #cdcdcd;
 }

 #articleView .articleContent .chargeData table td li.energygauge1{
    width: calc(100% - 5px); 
    width: -webkit-calc(100% - 5px);
    width: -moz-calc(100% - 5px); 
}
 #articleView .articleContent .chargeData table td li.energygauge2{ width: calc(50% - 5px);  
    width: -webkit-calc(50% - 5px);
    width: -moz-calc(50% - 5px); }
 #articleView .articleContent .chargeData table td li.energygauge3{ width: calc(33% - 5px);   
    width: -webkit-calc(33% - 5px);
    width: -moz-calc(33% - 5px); }
 #articleView .articleContent .chargeData table td li.energygauge4{ width: calc(25% - 5px);  
    width: -webkit-calc(25% - 5px);
    width: -moz-calc(25% - 5px); }
 #articleView .articleContent .chargeData table td li.energygauge5{ width: calc(20% - 5px);  
    width: -webkit-calc(20% - 5px);
    width: -moz-calc(20% - 5px); }

 @media (min-width: 934px){
    #articleView .articleContent .chargeData table td li.energygauge3{ width: calc(33% - 3px);   
    width: -webkit-calc(33% - 3px);
    width: -moz-calc(33% - 3px); }
 }
    
 @media (min-width: 1234px){
    #articleView .articleContent .chargeData table td li.energygauge3{ width: calc(33% - 2px);   
    width: -webkit-calc(33% - 2px);
    width: -moz-calc(33% - 2px); }
 }