body {
	margin: 0;
	height: 100%;
	font-family: Helvetica;
}

select {
	color: white;
	background-color: #555555;
}

select option{
	color: white;
	background-color: #555555;
}

header {
	height: 60px;
	color:white;	
	font-size:12px;
	font-weight: bold;
	position:absolute;	
	width: 100%;
	z-index:3;
	
	background-color: gray;	
		background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #AAAAAA),
		color-stop(1, #414141)
	);
background-image: -o-linear-gradient(bottom, #AAAAAA 0%, #414141 100%);
background-image: -moz-linear-gradient(bottom, #AAAAAA 0%, #414141 100%);
background-image: -webkit-linear-gradient(bottom, #AAAAAA 0%, #414141 100%);
background-image: -ms-linear-gradient(bottom, #AAAAAA 0%, #414141 100%);
background-image: linear-gradient(to bottom, #AAAAAA 0%, #414141 100%);
}

header .mode {	
	width: 50%;
	height: 100%;	
	position: absolute;					
}

header .mode .content{
	position: absolute;
	z-index:6;
}

header .mode h2 {
	position: relative;
	z-index: 5;
}

header .mode:first-child h2{
	margin-left: 5px;
}

header .mode:last-child {
	left: 50%;
}

header .mode:last-child h2{
	margin-right: 5px;
	text-align: right;
}

header .mode:last-child .content{
	top: 18px;
	left: 40px;
}
header .mode:first-child .content{
	top: 18px;
	right: 50px;
}

header .mode .foreground {
-webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

header .mode:first-child .foreground:after, header .mode:last-child .foreground:after {
	content: ' ';
	position: absolute;
	height: 90px;
	width: 90px;	
	z-index: 4;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

header .mode .foreground:before {
	content: '';
	position: absolute;
	height: 60px;
	z-index: 4;
}

header .mode:first-child .foreground:before {
	left: 0;
	right: 30px;
}

header .mode:last-child .foreground:before {
	right: 0;
	left: 34px;
}

header .mode:first-child .foreground:after {
	top: 18px;
	right: -15px;	
}

header .mode:last-child .foreground:after {
	top: -45px;
	left: -13px;
}


header .mode:first-child .foreground:after {	
	background-color: red;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #DE3C41),
		color-stop(1, #8C1128)
	);
background-image: -o-linear-gradient(right bottom, #DE3C41 0px, #8C1128 61px);
background-image: -moz-linear-gradient(right bottom, #DE3C41 0px, #8C1128 61px);
background-image: -webkit-linear-gradient(right bottom, #DE3C41 0px, #8C1128 61px);
background-image: -ms-linear-gradient(right bottom, #DE3C41 0px, #8C1128 61px);
background-image: linear-gradient(to right bottom, #DE3C41 0px, #8C1128 61px);
}

header .mode:last-child .foreground:after {	
	background-color: blue;
	background-image: -webkit-gradient(
	linear,
	left top,
	right bottom,
	color-stop(0, #3E93DE),
	color-stop(1, #4948B3)
);
	background-image: -o-linear-gradient(right bottom, #3E93DE 64px, #4948B3 124px);
background-image: -moz-linear-gradient(right bottom, #3E93DE 64px, #4948B3 124px);
background-image: -webkit-linear-gradient(right bottom, #3E93DE 64px, #4948B3 124px);
background-image: -ms-linear-gradient(right bottom, #3E93DE 64px, #4948B3 124px);
background-image: linear-gradient(to right bottom, #3E93DE 64px, #4948B3 124px);
}


header .mode.inactive .content {
	display: none;
}

header .mode  .foreground {
	background: none;
}

header .mode:first-child  .foreground:before {
	background-color: red;	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #DE3C41),
		color-stop(1, #8C1128)
	);
background-image: -o-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -moz-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -webkit-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -ms-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: linear-gradient(to bottom, #DE3C41 0%, #8C1128 100%);
	
}

header .mode:last-child  .foreground:before  {
	background-color: blue;	
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #3E93DE),
	color-stop(1, #4948B3)
);
	background-image: -o-linear-gradient(bottom, #3E93DE 0%, #4948B3 100%);
background-image: -moz-linear-gradient(bottom, #3E93DE 0%, #4948B3 100%);
background-image: -webkit-linear-gradient(bottom, #3E93DE 0%, #4948B3 100%);
background-image: -ms-linear-gradient(bottom, #3E93DE 0%, #4948B3 100%);
background-image: linear-gradient(to bottom, #3E93DE 0%, #4948B3 100%);
}

header .mode.inactive {
	cursor: pointer;
}

header .mode.inactive .foreground {
	opacity: 0;
}

header .mode.inactive:hover .foreground {	
	opacity: 1;
}

header .mode .foreground, header .mode .background {
	position: absolute;
	height: 100%;
	width: 100%;	
}

header .mode .foreground {
	z-index: 2;
}
header .mode .background {
	z-index: 1;
}

label {
	padding-right: 5px;
}

ul.typeList {
	margin: 0;
	padding: 0;
	list-style-type: none;
	color: black;
	background: no-repeat -8px -21px;	
}

ul.typeList li {
	border: 1px solid #666666;
	padding: 8px 2px;
	height:18px;
	-webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

ul.typeList li.pkmnRow {	
	font-size: 10px;
	font-family: Helvetica;
	text-shadow:none;
}

.pkmn ul.typeList {
	width:140px;
	float: left;
}

#addPokemon {
	color: white;	
	border: 1px solid #cccccc;
	border-radius: 11px;
	outline: none;
	background-image: -o-linear-gradient(bottom, #3EDE58 0%, #298829 100%);
	background-image: -moz-linear-gradient(bottom, #3EDE58 0%, #298829 100%);
	background-image: -webkit-linear-gradient(bottom, #3EDE58 0%, #298829 100%);
	background-image: -ms-linear-gradient(bottom, #3EDE58 0%, #298829 100%);
	background-image: linear-gradient(to right bottom, #3EDE58 0%, #298829 100%);
	
	-webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

.remove {
	color: white;	
	border: 1px solid #444444;
	border-radius: 11px;
	outline: none;
	font-weight: bold;
	font-size: 14px;
	line-height: 15px;
	background-image: -o-linear-gradient(bottom, #FF4444  0%, #88313B  100%);
	background-image: -moz-linear-gradient(bottom, #FF4444  0%, #88313B  100%);
	background-image: -webkit-linear-gradient(bottom, #FF4444  0%, #88313B  100%);
	background-image: -ms-linear-gradient(bottom, #FF4444  0%, #88313B  100%);
	background-image: linear-gradient(to right bottom, #FF4444  0%, #88313B  100%);
	
	-webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

.remove:hover{ 
	border: 1px solid #999999;
}

.remove:active {
	background-image: -o-linear-gradient(bottom, #88313B  0%, #FF4444  100%);
	background-image: -moz-linear-gradient(bottom, #88313B  0%, #FF4444  100%);
	background-image: -webkit-linear-gradient(bottom, #88313B  0%, #FF4444  100%);
	background-image: -ms-linear-gradient(bottom, #88313B  0%, #FF4444  100%);
	background-image: linear-gradient(to right bottom, #88313B  0%, #FF4444  100%);
}

#typeDiv {
	position:absolute;
	top:60px;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	z-index: 7;
	
	-webkit-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

#typeDiv .right {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:119px;	
	background-color:white;
}

#typeDiv .left {
	width: 119px;
	position:absolute;
	top:0;
	bottom:0;	
	overflow: hidden;
}

#typeDiv .left > div, #typeDiv .right > div {
	position:absolute;	
	border: 2px solid #616161;
}

#typeDiv .left .attacking {
	width: 20px;
	top:102px;
	bottom:0;
	text-shadow: #8F8D8D 1px 1px;
}

#typeDiv .left .attacking div{
	margin-top: 1115%;
}

#typeDiv .left .ribbon {
	width: 119px;
	top:0;
	height:102px;	
	z-index: 3;
}

#typeDiv .left .types {
	width: 99px;
	top:102px;
	bottom:0;	
	left:20px;
}

#typeDiv .left.extend .attacking {	
	top:138px;	
}

#typeDiv .left.extend .ribbon {	
	height:138px;	
}

#typeDiv .left.extend .types {	
	top:138px;	
}

#typeDiv .right .defending {	
	top:0;
	left:0;
	right:0;
	height: 30px;
	text-shadow: #8F8D8D 1px 1px;
}

#typeDiv .right .defending div{	
	margin-top: 7px;
}

#typeDiv .right .pkmn {
	top:30px;
	left:0;
	right:0;
	bottom:0;
	overflow: auto;
}

#addPokemon:hover {
	border: 1px solid #999999;
}

#addPokemon:active {
	background-image: -o-linear-gradient(bottom, #298829 0%, #3EDE58 100%);
	background-image: -moz-linear-gradient(bottom, #298829 0%, #3EDE58 100%);
	background-image: -webkit-linear-gradient(bottom, #298829 0%, #3EDE58 100%);
	background-image: -ms-linear-gradient(bottom, #298829 0%, #3EDE58 100%);
	background-image: linear-gradient(to right bottom, #298829 0%, #3EDE58 100%);
}

#modeDiv {
	float: right;
}

#modeDiv {
	float: right;
}

#modeDiv span {
		-webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

#modeDiv span:hover {
	color: #cccccc;
}

#modeDiv input{
	vertical-align: bottom;
}

.attacking, .defending {
	font-family: Helvetica;
	color: black;
	font-size: 14px;
	font-weight: bold;
}

.attacking {
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #DE3C41),
		color-stop(1, #8C1128)
	);
background-image: -o-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -moz-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -webkit-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: -ms-linear-gradient(bottom, #DE3C41 0%, #8C1128 100%);
background-image: linear-gradient(to bottom, #DE3C41 0%, #8C1128 100%);
}

.defending {
	background-image: -webkit-gradient(
	linear,
	left top,
	right bottom,
	color-stop(0, #3E93DE),
	color-stop(1, #4948B3)
);
background-image: -o-linear-gradient(right bottom, #3E93DE 0%, #4948B3 100%);
background-image: -moz-linear-gradient(right bottom, #3E93DE 0%, #4948B3 100%);
background-image: -webkit-linear-gradient(right bottom, #3E93DE 0%, #4948B3 100%);
background-image: -ms-linear-gradient(right bottom, #3E93DE 0%, #4948B3 100%);
background-image: linear-gradient(to right bottom, #3E93DE 0%, #4948B3 100%);
}

.lol {
background-image: -webkit-gradient(
	linear,
	left bottom,
	right top,
	color-stop(0.15, #DE3C41),
	color-stop(0.45, #FFFFFF),
	color-stop(0.55, #FFFFFF),
	color-stop(0.85, #3E93DE)
);
background-image: -o-linear-gradient(right top, #DE3C41 15%, #FFFFFF 45%, #FFFFFF 55%, #3E93DE 85%);
background-image: -moz-linear-gradient(right top, #DE3C41 15%, #FFFFFF 45%, #FFFFFF 55%, #3E93DE 85%);
background-image: -webkit-linear-gradient(right top, #DE3C41 15%, #FFFFFF 45%, #FFFFFF 55%, #3E93DE 85%);
background-image: -ms-linear-gradient(right top, #DE3C41 15%, #FFFFFF 45%, #FFFFFF 55%, #3E93DE 85%);
background-image: linear-gradient(to right top, #DE3C41 15%, #FFFFFF 45%, #FFFFFF 55%, #3E93DE 85%);
padding: 0;
}

.lol a {
	display: inline-block;	
}

.lol a.twotwo {
	transform: rotate(25deg);
}

.lol a.twothree {
	transform: rotate(37deg);
}

#typeTableDiv {
	position:absolute;
	top:60px;
	bottom: 0;
	left:0;
	right: 0;
	overflow: auto;
	z-index: 7;
	background-color:white;	
	-webkit-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: opacity 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

#typeTable {	
	text-align: center;
	font-size: 10px;
	border-collapse: collapse;
	border: 2px solid #616161;	
	width: 100%;				
}

#typeTable.min {	
	font-size: 6px;	
	border: 1px solid #616161;		
}

th, ul.typeList li.pkmnType {
	color: white;
	font-family: '8BIT WONDER', Helvetica;
	font-weight: normal;
	font-size: 8px;
	text-shadow: #8F8D8D 1px 1px;			
}

.highlight {
	color: blue;
}

.pkmnName {
	color: black;
	font-weight: bold;
	font-family: Helvetica;
	font-size: 14px;
	text-shadow: 0px 0px 3px #ffffff, 
				 0px 0px 4px #ffffff, 
				 0px 0px 4px #ffffff;			
}

#typeTable.min th {	
	font-size: 6px;
	font-family: Arial;
}

td, th {
	border: 2px solid #616161;
	padding: 8px 2px;
	-webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}

#typeTable.min td, #typeTable.min th {
	border: 1px solid #616161;
	padding: 0;
}

th span, ul.typeList li span {
	display: inline-block;
	padding: 2px 0px 3px 0px;
	width: 66px;	
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	border-radius: 4px;
}

th.hover, tbody tr:hover th, ul.typeList li.pkmnType.hover, ul.typeList li.pkmnType:hover, ul.typeList:hover li.pkmnType  {
	opacity: 0.8;
}

tbody tr:hover th.attacking {
	opacity: 1.0;
}

#typeTable.min th span {	
	padding: 2px 0px 3px 0px;		
	width:auto;	
	border: none;
}

ul.hiding, ul.hiding li {
	overflow: hidden;	
	white-space: nowrap;
}

#typeTableDiv.hidden {
	opacity:0;
	z-index:6;
	overflow:hidden;
}

#typeDiv.hidden {
	opacity:0;
	z-index:6;
}

.whiteBg {
	position:absolute;
	top:60px;
	z-index: 5;
	background-color: white;
	left:0;
	bottom: 0;
	right: 0;
}

td:after, ul.typeList li.pkmnRow:after {
	content: '\00D7';
}

td:hover, tr:hover td, td.hover, ul.typeList li.pkmnRow:hover, ul.typeList li.pkmnRow.hover, ul.typeList:hover li.pkmnRow {
	background-color: #E7FF71;
}

.weak {
	background-color: #cc0000;
	color: white;
}

td:hover.weak, tr:hover td.weak, td.hover.weak, ul.typeList li.pkmnRow.weak:hover, ul.typeList li.pkmnRow.weak.hover, ul.typeList:hover li.pkmnRow.weak {
	background-color: #F10362;
}

.veryweak {
	background-color: #4D0000;
	color: white;
}

td:hover.veryweak, tr:hover td.veryweak, td.hover.veryweak, ul.typeList li.pkmnRow.veryweak:hover, ul.typeList li.pkmnRow.veryweak.hover, ul.typeList:hover li.pkmnRow.veryweak {
	background-color: #4B0F3C;
}

.strong {
	background-color: #00cc00;
	color: white;
}

td:hover.strong, tr:hover td.strong, td.hover.strong, ul.typeList li.pkmnRow.strong:hover, ul.typeList li.pkmnRow.strong.hover, ul.typeList:hover li.pkmnRow.strong {
	background-color: #7AB182;
}

.verystrong {
	background-color: #0000cc;
	color: white;
}

td:hover.verystrong, tr:hover td.verystrong, td.hover.verystrong, ul.typeList li.pkmnRow.verystrong:hover, ul.typeList li.pkmnRow.verystrong.hover, ul.typeList:hover li.pkmnRow.verystrong {
	background-color: #00ccff;
}

.immune {
	background-color: #000000;
	color: white;
}

td:hover.immune, tr:hover td.immune, td.hover.immune, ul.typeList li.pkmnRow.immune:hover, ul.typeList li.pkmnRow.immune.hover, ul.typeList:hover li.pkmnRow.immune {
	background-color: #333333;
}

.normal {
	background-color: #A8A878;
}
.fighting {
	background-color: #C03028;
}
.flying {
	background-color: #A890F0;
}
.poison {
	background-color: #A040A0;
}
.ground {
	background-color: #E0C068;
}
.rock {
	background-color: #B8A038;
}
.bug {
	background-color: #A8B820;
}
.ghost {
	background-color: #705898;
}
.steel {
	background-color: #B8B8D0;
}
.fire {
	background-color: #F08030;
}
.water {
	background-color: #6890F0;
}
.grass {
	background-color: #78C850;
}
.electric {
	background-color: #F8D030;
}
.psychic {
	background-color: #F85888;
}
.ice {	
	background-color: #98D8D8;
}
.dragon {
	background-color: #7038F8;
}
.dark {
	background-color: #705848;
}
.fairy {
	background-color: #EE99AC;
}