/* HTML Reset */
html, body, div, span,h1, h2, h3, h4, h5, h6, p,dl, dt, dd, ol, ul, li,table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  font-family: "Korinna";
}
body {
line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* HTML Reset END */


@font-face
{
font-family: "Korinna";
src: url(./itc-korinna-bold.otf);
}

h1{
    font-size: 2em;}

h2{
    font-size: 3.5em;
    text-transform: uppercase
}
img.logo{
width: 500px;
}

div.card{
float:left;
  position: relative;
  height: 600px;
  width: 850px;
  padding:20px;
  border: 1px solid #ccc;
  page-break-inside: avoid;
  page-break-after: auto;
}
div.stats{
    border: 5px solid black;
    height: 580px;
    width: 830px;
}
div.card table{
    position:absolute;
}

div.card table tr td{
    padding: 0.2em;font-size: 1.25em;
}

div.card img{
    position:absolute;
}

div.card h2{
  position:absolute;
  left:10px;
  top: 0px;
  background-color: #fff;
  border: 10px solid #fff;
}

div.swan h2 {color:#666;}
div.swan div.stats{border-color: #666;}
div.swan img{ height:650px; top:0px;right:0px; }
div.swan table.text1{left:60px;top:100px;}
div.swan table.text2{right:60px;top:100px;}

div.flitter h2 {color:#5a3;}
div.flitter div.stats{border-color: #5a3;}
div.flitter img{ height:500px; left:250px; top:30px;}
div.flitter table.text1{ left:60px; bottom: 60px;}

div.nightspider h2 {color:#800;}
div.nightspider div.stats{border-color: #800;}
div.nightspider img{ height:750px; top:-50px; right:0px;}
div.nightspider table.text1{left:60px; bottom:60px;}

div.hummingbird h2 {color:#97a;}
div.hummingbird div.stats{border-color: #97a;}
div.hummingbird img{ height:780px; left: -50px}
div.hummingbird table.text1{left:60px; bottom:270px;}
div.hummingbird table.text2{left:60px; bottom:60px;}
div.hummingbird table.text3{left:300px;bottom:60px;}

div.doombat h2{color:#593;}
div.doombat div.stats{border-color: #593;}
div.doombat img{ height:500px; left:100px;}
div.doombat table.text1{ left:60px; bottom: 60px;}
div.doombat table.text2{ left:320px; bottom: 60px;}

div.mosquito h2 {color:#000;}
div.mosquito div.stats{border-color: #000;}
div.mosquito img{ height:520px; left:60px; top:20px;}
div.mosquito table.text1{ left:60px; top: 100px;}
div.mosquito table.text3{ right:450px; bottom: 80px;}
div.mosquito table.text2{ right:300px; bottom: 60px;}

div.dragonfly h2 {color:#54c;}
div.dragonfly div.stats{border-color: #54c;}
div.dragonfly img{ height:460px; right:0px; top:60px;}
div.dragonfly table.text1{ left:60px; top:80px;}
div.dragonfly table.text2{ right:100px; bottom: 60px;}
div.dragonfly table.text3{ left:60px; bottom: 60px;}

div.damselfly h2 {color:#e69;}
div.damselfly div.stats{border-color: #e69;}
div.damselfly img{ height:640px; right:0px; bottom:0px;}
div.damselfly table.text1{ left:60px; top: 80px;}
div.damselfly table.text2{ left:340px; top: 80px;}
div.damselfly table.text2 td{ width: 130px;}
div.damselfly table.text3{ left:60px; bottom: 335px;}

div.wasp h2 {color:#fb1;}
div.wasp div.stats{border-color: #fb1;}
div.wasp img{ height:440px; left:0px; top:60px;}
div.wasp table.text1{ left:60px; bottom: 60px;}
div.wasp table.text2{ right:180px; bottom: 60px;}

div.caravel h2 {color:#8a5;}
div.caravel div.stats{border-color: #8a5;}
div.caravel img{ height:500px; right: 50px; top:10px; transform: scaleX(-1);}
div.caravel table.text1{ left:60px; bottom: 60px;}
div.caravel table.text2{ right:80px; bottom: 60px;}

div.lance h2 {color:#f00;}
div.lance div.stats{border-color: #f00;}
div.lance img{ height:550px; left:80px; top:40px; transform: scaleX(-1);}
div.lance table.text1{ right:80px; top: 60px;}
div.lance table.text2{ left:80px; bottom: 60px;}

div.dragonlongship h2 {color:#D00;}
div.dragonlongship div.stats{border-color: #D00;}
div.dragonlongship img{ height:700px; right:0px; top:-40px; }
div.dragonlongship table.text1{left:60px; bottom:60px;}
div.dragonlongship table.text2{right:60px; bottom:60px;}

div.illithid h2{color:#90a;}
div.illithid div.stats{border-color: #90a;}
div.illithid img{ height:360px; left:30px; top:50px;}
div.illithid table.text1{ column-count: 2; left:80px; bottom: 80px;}
div.illithid table.text2{ right:80px; bottom:60px;}

div.marlin h2{color:#dd3;}
div.marlin div.stats{border-color: #dd3;}
div.marlin img{ height:450px; left:0px; top:0px;}
div.marlin table.text1{ left:60px; bottom: 60px;}
div.marlin table.text2{ right:60px; bottom: 60px;}

div.eel h2{color:#da3;}
div.eel div.stats{border-color: #da3;}
div.eel img{ height:220px; left:40px; top:150px;}
div.eel table.text1{ left:60px; bottom: 60px;}
div.eel table.text2{ right:60px; bottom: 60px;}

div.tyrant h2 {color:#b75;}
div.tyrant div.stats{border-color: #b75;}
div.tyrant img{ height:550px; left:180px; top:20px;}
div.tyrant table.text1{ left:60px; bottom: 60px;}

div.tradesman h2 {color:#e22;}
div.tradesman div.stats{border-color: #e22;}
div.tradesman img{ height:500px; left:0px; top:70px;}
div.tradesman table.text1{ left:60px; top: 100px;}
div.tradesman table.text2{ right:160px; bottom: 60px;}

div.lamprey h2 {color:#c22;}
div.lamprey div.stats{border-color: #c22;}
div.lamprey img{ height:500px; left:0px; bottom:0px;}
div.lamprey table.text1{ left:60px; top: 100px;}
div.lamprey table.text2{ right:120px; top: 100px;}

div.sidewheeler h2 {color:#f50;}
div.sidewheeler div.stats{border-color: #f50;}
div.sidewheeler img{ height:350px; left:50px; top:50px;}
div.sidewheeler table.text1{ left:120px; bottom: 60px;}
div.sidewheeler table.text2{ right:60px; bottom: 60px;}

div.schooner h2 {color:#157;}
div.schooner div.stats{border-color: #157;}
div.schooner img{ height:700px; top:-100px;left:20px;  transform: scaleX(-1);}
div.schooner table.text1{left:60px;top:100px;}
div.schooner table.text2{left:60px;bottom:60px;}

div.smalljammer h2 {color:#378;}
div.smalljammer div.stats{border-color: #378;}
div.smalljammer img{ height:750px; top:-50px; left:-40px;}
div.smalljammer table.text1{left:60px;top:100px;}
div.smalljammer table.text2{left:60px;bottom:60px;}

div.turtle h2 {color:#378;}
div.turtle div.stats{border-color: #378;}
div.turtle img{ height:400px; top:100px; left:90px;}
div.turtle table.text1{right:60px;top:80px;}
div.turtle table.text2{left:60px;bottom:60px;}


div.nautiloid h2 {color:#19c;}
div.nautiloid div.stats{border-color: #19c;}
div.nautiloid img{ height:500px; left:20px; top:80px;}
div.nautiloid table.text1{ right:80px; top: 60px;}
div.nautiloid table.text2{ right:80px; bottom: 60px;}

div.airship h2 {color:#68b;}
div.airship div.stats{border-color: #68b;}
div.airship img{ height:520px; left:0px; top:80px;}
div.airship table.text1{ right:80px; top: 60px;}

div.unity h2 {color:#19c;}
div.unity div.stats{border-color: #19c;}
div.unity img{ height:750px; left:-80px;top:0px; }
div.unity table.text1{right:80px;top:60px;}
div.unity table.text2{right:80px;bottom:60px;}

div.whelk h2 {color:#c77;}
div.whelk div.stats{border-color: #c77;}
div.whelk img{ height:680px; left:0px; bottom:40px}
div.whelk table.text1{left:60px; bottom:60px;}
div.whelk table.text2{right: 60px; bottom:60px;}

div.nightwolf h2{color:#48b;}
div.nightwolf div.stats{border-color: #48b;}
div.nightwolf img{ height:360px; left:40px; top:100px;}
div.nightwolf table.text1{ left:60px; bottom: 60px;}
div.nightwolf table.text2{ right:70px; bottom: 60px;}

div.vinama h2 {color:#fb1;}
div.vinama div.stats{border-color: #fb1;}
div.vinama img{ height:700px;top:-50px; left:0px;}
div.vinama table.text1{left:60px;bottom:60px;}
div.vinama table.text2{right:60px;bottom:60px;}

div.mindspider h2 {color:#257;}
div.mindspider div.stats{border-color: #257;}
div.mindspider img{ height:460px; left:80px; top:100px;}
div.mindspider table.text1{ right:80px; top: 60px;}
div.mindspider table.text2{ right:80px; bottom: 60px;}

div.galleon h2 {color:#157;}
div.galleon div.stats{border-color: #157;}
div.galleon img{ height:480px; left:180px; top:20px;}
div.galleon table.text1{ left:60px; top: 100px;}
div.galleon table.text2{ left:60px; bottom: 60px;}

div.squidship h2 {color:#f24;}
div.squidship div.stats{border-color: #f24;}
div.squidship img{ height:600px; left:40px; top:20px;}
div.squidship table.text1{ left:80px; top: 120px;}
div.squidship table.text2{ right:80px; bottom: 80px;}

div.dragonship h2 {color:#e21;}
div.dragonship div.stats{border-color: #e21;}
div.dragonship img{ height:380px; left:100px; top:60px;}
div.dragonship table.text1{ left:60px; bottom: 60px;}
div.dragonship table.text2{ right:80px; bottom: 60px;}

div.triop h2 {color:#f70;}
div.triop div.stats{border-color: #f70;}
div.triop img{ height:700px;left:-50px; top:0px;}
div.triop table.text1{left:60px;top:100px;}
div.triop table.text2{right:60px;top:60px;}
div.triop table.text3{right:80px;bottom:60px;}

div.greatbombard h2 {color:#f70;}
div.greatbombard div.stats{border-color: #f70;}
div.greatbombard img{ height:750px; left:-40px;bottom:-40px }
div.greatbombard table.text1{left:60px; bottom:60px;}
div.greatbombard table.text2{right:60px; bottom:60px;}

div.hammership h2 {color:#e21;}
div.hammership div.stats{border-color: #e21;}
div.hammership img{ height:580px; left:100px; top:0px;}
div.hammership table.text1{ left:60px; top: 100px;}
div.hammership table.text2{ right:80px; bottom: 60px;}

div.manowar h2 {color:#5a3;}
div.manowar div.stats{border-color: #5a3;}
div.manowar img{ height:560px; left:240px; top:40px;}
div.manowar table.text2{ right:200px; bottom: 110px;}
div.manowar table.text1{ left:60px; bottom: 60px;}

div.mantis h2 {color:#d00;}
div.mantis div.stats{border-color: #d00;}
div.mantis img{ height:650px; top:0px; right:0px;}
div.mantis table.text1{left:60px; bottom:60px;}
div.mantis table.text2{right:80px; bottom:60px;}

div.thoric h2{color:#b73;}
div.thoric div.stats{border-color: #b73;}
div.thoric img{ height:400px; left:150px; top:150px; transform: scaleX(-1);}
div.thoric table.text1{ left:60px; top: 100px;}
div.thoric table.text2{ right: 80px; top: 100px}
div.thoric table.text3{ left: 60px; bottom: 60px}

div.werewolf h2 {color:#f58;}
div.werewolf div.stats{border-color: #f58;}
div.werewolf img{ height:420px; left:60px; top: 100px;transform: scaleX(-1);}
div.werewolf table.text1{ left:60px; top: 80px;}
div.werewolf table.text2{ left:60px; bottom: 60px;}

div.hunterkiller h2 {color:#7b2;}
div.hunterkiller div.stats{border-color: #7b2;}
div.hunterkiller img{ height:460px; left:50px; top: 130px;}
div.hunterkiller table.text1{ left:60px; top:  100px;}
div.hunterkiller table.text2{ left: 60px; bottom: 60px;}
div.hunterkiller table.text3{ right:60px; top:80px;}

div.quad h2 {color:#558;}
div.quad div.stats{border-color: #558;}
div.quad img{ height:750px;top:0px;left:0px; }
div.quad table.text1{left:60px; bottom:60px;}

div.dolphin h2 {color:#48b;}
div.dolphin div.stats{border-color: #48b;}
div.dolphin img{ height:700px;  left: -30px; bottom:0px }
div.dolphin table.text1{right:80px; bottom:90px;}
div.dolphin table.text2{right:60px; bottom:60px;}

div.octopus h2 {color:#769;}
div.octopus div.stats{border-color: #769;}
div.octopus img{ height:500px; top:-10px; left:20px;}
div.octopus table.text1{left:60px; bottom:60px;}
div.octopus table.text2{right:100px;bottom:60px;}

div.warbird h2 {color:#f70;}
div.warbird div.stats{border-color: #f70;}
div.warbird img{ height:490px;top:0px;right:0px }
div.warbird table.text1{left:60px;bottom:60px;}
div.warbird table.text2{right:80px;top:100px;}
div.warbird table.text3{right:150px;bottom:60px;}

div.whaleship h2 {color:#05a;}
div.whaleship div.stats{border-color: #05a;}
div.whaleship img{ height:800px;top:0px;left:-80px}
div.whaleship table.text1{left:80px;bottom:60px;}
div.whaleship table.text2{right:60px;bottom:60px;}

div.pyramid h2 {color:#ba0;}
div.pyramid div.stats{border-color: #ba0;}
div.pyramid img{ height:560px;top:80px;left:130px}
div.pyramid table.text1{left:60px;top:100px;}
div.pyramid table.text2{right:60px;top:100px;}

div.deathspider h2 {color:#f15;}
div.deathspider div.stats{border-color: #f15;}
div.deathspider img{ height:480px; left:120px; top:40px;}
div.deathspider table.text1{ left:60px; bottom: 300px;}
div.deathspider table.text2{ right:220px; bottom: 60px;}

div.armada h2 {color:#5a3;}
div.armada div.stats{border-color: #5a3;}
div.armada img{ height:550px; left:190px; top:0px;}
div.armada table.text1{ left:60px; bottom: 60px;}
div.armada table.text2{ right:130px; bottom: 60px;}

div.geodesic h2 {color:#682;}
div.geodesic div.stats{border-color: #682;}
div.geodesic img{ height:800px; right:0px; }
div.geodesic table.text1{left:60px; bottom:80px;}

div.lineship h2 {color:#17b; width: 260px;}
div.lineship div.stats{border-color: #17b;}
div.lineship img{ height:550px; top:0px; right: -40px; }
div.lineship table.text1{left:60px; bottom:60px;}

div.dreadnought h2 {color:#163;}
div.dreadnought div.stats{border-color: #163;}
div.dreadnought img{ height:700px; right:40px;bottom:10px}
div.dreadnought table.text1{left:60px; top:80px;}
div.dreadnought table.text2{right:60px; bottom:60px;}

div.cuttle h2{color: #9A3;}
div.cuttle div.stats{border-color: #9A3;}
div.cuttle img{ height:700px; top:-40px; right:30px;}
div.cuttle table.text1{left:60px; top:90px;}

div.crystal h2{color:#55a;}
div.crystal div.stats{border-color: #55a;}
div.crystal img{ height:480px; right:50px; top: 10px;}
div.crystal table.text1{left:80px;  bottom:60px;}
div.crystal table.text2{}

div.citadel h2 {color:#666;}
div.citadel div.stats{border-color: #666;}
div.citadel img{ height:600px; right:0px; top:0px;}
div.citadel table.text1{ left:60px; top: 100px;}
div.citadel table.text2{ right:80px; top: 80px;}