/*(C) 2007 NET GAMES TECH S.A.S. di Ramon Soletti, Paolo Montrasio e C.*/
/* IE workaround based on
   http://archivist.incutio.com/viewlist/css-discuss/24102
*/
.playfield {
  min-height: 100%;
  width: 100%;
  height: 100%;  /* hack for IE5+/Win.*/
  position: relative;
  margin: 0px;
  top: 0px;
  left: 0px;
  background: url('/static/images/sea_texture.jpg');
}

#animations {
  position: absolute;
  top: 137px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

#timer {
  position: absolute;
  font-size: 36px;
  top:5px;
  right:5px;
  background-color:white;
  border: 1px solid black;
}

.gameButton{
  font-size: 24px;
  background-color:white;
  border: 1px solid black;
  display: inline;
  padding: 2px;
  margin : 2px;
  position : relative;
  top: 15px;
  left: 10px;
}

.awayTeam .powerupSummary {
  top: 106px;
}

.powerupSummary {
  float: left;
  left: 4px;
  position: relative;
  top: 16px;
  z-index: 5003;
}

.piersPowerupSummary {
  left:413px; position: absolute; top: 71px; width: 200px; z-index: 10;
}

.powerupNumber {
  position: relative;
  top: -7px;
  font-size: 30px;
  line-height: 30px;
  color: white;
}

.powerupSummary p {
  margin: 0px;
}

.piersPowerupSummary p {
  margin: 0px;
  height: 40px;
}

.powerupValue {
  font-size: 2.5em;
  line-height: 34px;
  float: left;
  width: 36px;
  text-align: right;
}

.powerup {
  position: absolute;
  top: 111px;
  left: 5px;
  background-color: #d0d0d0;
  width: 54px;
  height: 34px;
  border: 1px solid black;
}

.plus {
  width: 16px; height: 16px;
}

.minus {
  width: 16px; height: 16px;
}

.powerupButtons {
  float: left;
  width: 16px;
}

.xsPowerup {
  background-color: #d0d0d0; border: 1px solid black; width: 18px;
/*  position: relative; left: 3px; top: -23px; */
  position: absolute; left: 3px; top: 61px;
}

.homeTeam { z-index: 5001; left: 2px; top: 2px; position: absolute; }
.awayTeam {
  /* need to use all the CSS in .playfield and below to work around the
     fact that IE doesn't support position: fixed; */
  position: absolute;
  bottom: 2px;
  left: 2px;
  height: 225px;
  z-index: 5000;
  margin-bottom: 2px;
}

.awayTeam .verySmallCard {
  position: relative;
  top: 105px;
}


.smallCard {
  float: left;
  position: relative; /* necessary for z-index to work */
  z-index: 5002; /* must be repeated here */
  width: 150px; height: 225px;
  margin: 1px;
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: pointer;
}
.smallCardBoat { background: url(/static/cards/smallcard_bg_boat2.gif); }
.smallCardCharacter { background: url(/static/cards/smallcard_bg_character2.gif); }
.smallCardCrew { background: url(/static/cards/smallcard_bg_crew2.gif); }
.smallCard .flag {
  position: absolute; top: 5px; left: 8px;
}
.smallCard .flag img {
  width: 25px; height: 16px;
  border: 1px solid black;
}
.smallCard .name {
  position: absolute; top: 7px; left: 36px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  height: 15px;
  width: 110px;
  overflow: hidden;
  text-align: center;
}
.smallCard .picture {
  position: absolute; left: 4px; top: 24px;
}
.smallCard .picture img {
  width: 142px; height: 124px;
}
.awayTeam .smallCard .level {
  top: -10px; left: 4px;
}
.smallCard .level {
  color: white;
  font-size: 0.8em;
  position: absolute;
  top: 148px; left: 4px;
}
.smallCard .level_pwrup {
  color: white;
  font-size: 0.8em;
  position: absolute;
  top: 148px; left: 4px;
  text-align: left;
  width: 30px;
}

.smallCard .experience {
  position: absolute; top: 150px; left: 30px; height: 7px;
}
.smallCard .experience_pwrup {
  position: absolute; top: 150px; left: 30px; height: 7px; width: 90px;
}
.smallCard .experience img { border: 0px; border-spacing:0px; height:7px;}
.smallCard .experience_prwup img { border: 0px; border-spacing:0px; height:7px;}
.smallCard .experience .e_left {
  height: 7px;
}
.smallCard .experience .e_middle {
  height: 7px;
}
.smallCard .experience .e_right {
  height: 7px;
}
.smallCard .cardType { position: absolute; left: 128px; width: 10px;
	top: 149px; background-color: #DD0000; font-size: 10px; height: 10px;
	line-height: 10px; padding: 0px; text-align: center; color: white; }
.smallCard div.cardType_pwrup { position: absolute; left: 128px; width: 10px;
	top: 149px; background-color: #DD0000; font-size: 10px; height: 10px;
	line-height: 10px; padding: 0px; text-align: center; color: white; }
.smallCard div.levelPerc { position:absolute; top:148px;left:30px;
  font-size:0.75em;text-align:center;width:90px;font-weight:bold;}
.smallCard .white { color:white; }
.smallCard .black { color:black; }
.awayTeam .smallCard .abilities {
  text-align: center;
}
.smallCard .abilities {
  color: black;
  font-size: 1.2em;
  position: absolute; left: 4px; top: 161px;
  width: 142px;
}
.smallCard .abilities_pwrup {
  color: black;
  font-size: 1.2em;
  position: absolute; left: 4px; top: 162px;
  width: 142px; 
}
.smallCard .abilities p { text-align: center; margin: 0px; }
.smallCard .abilities_pwrup p { text-align: center; margin: 0px; }


.verySmallCard {
  float: left;
  width: 80px; height: 120px;
  margin: 1px;
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: pointer;
  z-index: 5000;
}
.verySmallCardBoat { background: url(/static/images/very_smallcard_bg3_boat.gif); }
.verySmallCardCharacter { background: url(/static/images/very_smallcard_bg3_character.gif); }
.verySmallCardCrew { background: url(/static/images/very_smallcard_bg3_crew.gif); }

.verySmallCard .name {
/*  position: relative; top: 2px; left: 0px;*/
  position:absolute; top:2px; left:18px;
  color: white;
  font-weight: bold;
  font-size: 0.7em;
  text-align: left;
  height: 10px;
  left: 18px;
  width: 60px;
  overflow: hidden;
}
.verySmallCard .flag {
/*  z-index: 2; position: relative; top: -8px; left: 3px;*/
  z-index: 2; position: absolute; top: 2px; left: 3px;
}
.verySmallCard .flag img {
  width: 12px; height: 8px;
  border: 1px solid black;
}
.verySmallCard .picture {
/*  position: relative; left: 2px; top: -7px;*/
  position: absolute; left: 2px; top: 13px;
}
/*
.awayTeam .verySmallCard .level {
  top: -6px;
}
*/
.verySmallCard .level {
  color: white;
  font-size: 0.7em;
/*  position: relative;
  top: -6px; left: 3px;*/
  position: absolute;
  top: 80px; left: 3px;
  height: 10px;
}
.verySmallCard .level_pwrup {
  color: white;
  font-size: 0.7em;
/*  position: relative;
  top: -22px; left: 3px;*/
  position: absolute;
  top: 80px; left: 3px;
  height: 10px;
}
/*.awayTeam .verySmallCard .experience {
  top: -15px;
}*/
.verySmallCard .experience {
/*  position: relative; top: -15px; left: 29px; height: 7px; width: 48px;*/
  position: absolute; top: 81px; left: 29px; height: 7px; width: 48px;
}
.verySmallCard .experience_pwrup {
  position: relative; top: -32px; left: 29px; height: 7px; width: 48px;
}
.verySmallCard .experience img { height: 7px; border: 0px; border-spacing:0px;}
.verySmallCard .experience_pwrup img { height: 7px; border: 0px; border-spacing:0px;}
.verySmallCard .experience .e_left {
  height: 7px; position: absolute; left: 0px;
}
.verySmallCard .experience .e_middle {
  height: 7px; position: absolute; left: 3px;
}
.verySmallCard .experience .e_right {
  height: 7px; position: absolute; left: 45px;
}
/*.awayTeam .verySmallCard .abilities {
  top: -11px;
}*/
.verySmallCard .abilities {
/*  position: relative; left: 2px; top: -11px; */
  position: absolute; left: 2px; top: 92px;
  width: 76px; font-size: 1.1em; text-align: center; line-height: 1em;
}
.verySmallCard .abilities_pwrup {
  position: relative; left: 2px; top: -28px;
  width: 76px; font-size: 1.2em; text-align: center;
  line-height: 1em;
}

.teamDndRole {
  bottom: 0px; font-weight: bold; text-align: center; margin-bottom: 2px;
  border-bottom: 1px solid black;
}
.teamDndTarget {
  float: left; width: 95px; height: 150px;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0px;
}
.teamDndTarget#ship {
  border-right: 1px solid black;
}
div.teamDndTarget#instructions { border: 0; width: 120px;}
div.teamDndTarget#instructions p { font-weight: bold; text-align: center; }
.teamArea {
  float: left; width: 100%; margin-bottom: 8px;
}
.albumPageSelector {
  float: left; width: 100%; margin-bottom: 1em;
}
.albumPageSelector .teamName {
	float: left; font-weight: bold; font-size: 1.2em; margin-right: 1em;
}
.albumPageSelector .selector { float: right; margin-right: 5px; }
.albumPageSelector .selectorLabel { float: right; margin-right: 5px;
	margin-top: 3px; }
.albumPageSelector select#albumPageSelector {
  margin: 0px 5px 0px 0px; display: inline;
}
.albumPageButtons {
  float: left; margin-right: 4px;
}
.characterTitle { background-color: #1D73DA; color: white; }
.crewTitle { background-color: #DD9237; color: white; }
.boatTitle { background-color: #008E4D; color: white; }
.characterDndTarget { background-color: #1D73DA; }
.crewDndTarget { background-color: #DD9237; }
.boatDndTarget { background-color: #008E4D; }
.deleteDndTarget { background-color: orange; }
.result { position:relative;
  top:50px;
  left:50px;
  background-color: white;
  border: 1px solid black;
  font-size: 1.5em;
  padding: 0.3em;
}

.largeCard {
  float: left;
  position: relative; /* necessary for z-index to work */
  z-index: 10; /* must be repeated here */
  width: 250px; height: 384px;
  margin: 2px;
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
}
.largeCardBoat { background: url(/static/cards/largecard_bg_boat.jpg); }
.largeCardCharacter {
  background: url(/static/cards/largecard_bg_character.jpg); }
.largeCardCrew { background: url(/static/cards/largecard_bg_crew.jpg); }
.largeCard .flag {
  position: relative; top: 13px; left: 10px;
}
.largeCard .flag img {
  width: 25px; height: 16px;
  border: 1px solid black;
}
.largeCard .name {
  position: relative; top: -8px; left: 39px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  height: 29px;
  width: 203px;
  overflow: hidden;
  text-align: center;
}
.largeCard .picture {
  position: relative; left: 6px; top: -7px;
}
.largeCard .picture img {
  width: 238px; height: 207px;
  cursor: pointer;
}
.awayTeam .smallCard .level {
  top: 148px; left: 4px;
}
.largeCard .level {
  color: white;
  font-size: 1.5em;
  position: absolute;
  top: 248px; left: 5px;
}
.largeCard .experience {
  position: absolute; top: 253px; left: 51px; height: 11px;
}
.largeCard .experience_pwrup {
  position: relative; top: -56px; left: 30px; height: 11px; width: 161px;
}
.largeCard .experience img { border: 0px; border-spacing:0px; height:11px;}
.largeCard .experience .e_left { height: 11px; }
.largeCard .experience .e_middle { height: 11px; }
.largeCard .experience .e_right {  height: 11px; }
.largeCard div.levelPerc { position:absolute; top:251px;left:51px;
  font-size:0.9em;text-align:center;width:161px;font-weight:bold;}
.largeCard .white { color:white; }
.largeCard .black { color:black; }
.largeCard .cardType { position: absolute; left: 228px; width: 16px;
	top: 250px; background-color: #DD0000; color: white; font-size: 16px;
	height: 16px; line-height: 16px; text-align: center; }
.largeCard .abilities {
  color: black;
  font-size: 1.2em;
  position: absolute; left: 6px; top: 269px;
  width: 238px;
  height: 95px;
}
.largeCard .abilities p { text-align: center; margin: 0px; }
.largeCard .abilities_pwrup p { text-align: center; margin: 0px; }
.largeCard .cardFooter { position: absolute; left: 8px; top: 367px;
  color: white; font-size: 0.8em; height: 13px; height: 13px; width: 236px; }
.largeCard .cardFooter .copyright { position: relative; text-align: left;
  width: 236px; top: -2px; }
.largeCard .cardFooter .cardNo { text-align: center; width: 236px;
  position: relative; top: -14px; }
.largeCard .cardFooter .author { text-align: right; width: 236px;
  position: relative; top: -26px; left: -3px; font-size: 9px; }
.largeCard table.skillTable { width: 238px; height: 90px;
	border-collapse: collapse; }
.largeCard table.skillTable td.leftCol { width: 150px;
	border-right: 1px solid #BBBBFF; }
.largeCard .abilities td { text-align: center; }

.largeCard .progress { position: relative; top: -210px; left: 120px;
	height: 16px; width: 16px; z-index: 100; background-color: white;
	display:none; }
.largeCard .progress img { background-color: white;}
.smallCard .progress { position: absolute; top: 30px; left: 72px;
	height: 20px; width: 20px; z-index: 100;  }
.smallCard .progress img { background-color: white;}
.largeCard .description {
  color: black;
  font-size: 1em;
  width: 238px;
  height: 95px;
  overflow: auto;
}
.largeCard .description p { margin-top: 0px; margin-bottom: 4px; margin-left: 2px; text-align: left; }
#experienceTable td { width: 100px;/*padding-left:10px; padding-right:10px;*/}
#experienceTable input { display: inline; width: 2em; left:2px; top:-4px;
  position:relative;height:18px;}
#experiencePoints { font-weight: bold; }
#experienceTable input.trainingPoints { width: 3em; }
.largeCard table.skillsValues { margin: 0px; border-collapse: collapse;
	 border: 0px; width: 100%; border-bottom: 1px solid #BBBBFF; }
.smallCard table.skillsValues { margin: 0px; border-collapse: collapse;
	 border: 0px; width: 100%; border-bottom: 1px solid #BBBBFF; }
.verySmallCard table.skillsValues { margin: 0px; border-collapse: collapse;
	 border: 0px; width: 100%; }
table.skillsValues tr { border: 0px !important; }
table.skillsValues td { text-align: center; padding: 0px 1px 0px 0px !important;
  font-size: 0.9em; font-weight:normal; border: 0px !important; }
.skillP2 { border-top: #BBBBFF; margin: 0px; }

p.secret { text-align: center; margin: 0; }
table.gameSummary {
  position: absolute; border-collapse: collapse; 
  top: 246px; z-index: 9000; background-color: #A7C8E5;
  border-color: #000088; border-style: solid; left: 130px;
  border-width: 12px 1px 1px 1px; opacity: 0.8; filter: alpha(opacity=80);
  cursor: move;
}
table.gameSummary tr.gameStatus { height: 1.5em; }
table.gameSummary td.legTitle {
  background-color: black; color: white; font-size: 1em; font-weight: bold;
  text-align: center; width: 4.5em; padding: 2px;
}
table.gameSummary td.legNumber {
  background-color: #EEEEEE; color: black; font-size: 1em; font-weight: bold;
  text-align: center; width: 4.5em;padding: 2px;
}
table.gameSummary td.bluePlayer {
  background-color: #2175BC; color: white; font-size: 1em;padding: 2px;
}
table.gameSummary td.yellowPlayer {
  background-color: #FDFD00; color: black; font-size: 1em;padding: 2px;
}
table.gameSummary td.hSeparator {
  background-color: transparent; height: 5px; padding: 0;
}
table.gameSummary td.vSeparator {
  background-color: transparent; width: 5px; padding: 0;
}
table.gameSummary td.highlights p {
  margin: 0px;
  overflow: auto;
}
table.gameSummary td.highlights {
  background-color: #A7C8E5; color: black; font-size: 1em;
}
table#summaryComments { width: 300px; }
td#nextPhaseToastTd { width: 115px; vertical-align: top;}
td#nextPhaseToastTd p { margin: 0px; }
div.challenges {}
#experiencePointsErrorMessage {
  background-color: orange; border: 1px solid red; padding: 4px 2px 2px 2px;
  font-size: 1.2em; text-align: center; display: none;
}
div.titledCard {
  float:left;
}
p.cardRole { background-color: transparent; text-align: center;
  margin: 0; color: white; z-index: 5004; width: 80px;}
.largeCard .training {
  color: black;
  font-size: 1em;
  width: 238px;
  height: 95px;
  overflow: auto;
  font-size: 0.8em;
}
input.noFrills { width: auto; display: inline; border: 0pt none;
  background-color: transparent;}
tr.alignTop { vertical-align: top; }
div.teamCard { padding-left: 7px; padding-top: 4px; }
.gameDialog { border: 2px solid blue; width: 20em; left: 50%;
  margin-left: -170px; width: 300px;
  padding: 1em; position: absolute; z-index: 9999; background-color: white;
  top: 253px; text-align: center; font-size: 1.2em; }
.gameDialog p { font-size: 18px; text-align: center; margin: 0px; }
#nextPhase { width: 50%; vertical-align: top; padding-left: 0px; width: 10em; }
#resign { width: 50%; padding-right: 0px; }
#nextPhase input { margin: auto; }
#resign input { margin: auto; }
#nextPhaseToast { background-color: #A7C8E5; width: 110px; padding: 2px; }
img.boatIcon { position: absolute; left:0px; top:0px; }
div.bluePlayerCard { background-color: #2175BC; }
div.yellowPlayerCard { background-color: #EFEF00; }
div.yellowPlayerCard p.cardRole { color: black; }
div.matchCards { width:411px;height:122px;position:relative;margin:auto;
  padding:4px;}