/************************
** HTML ELEMENTS / GLOBAL STYLES
*************************/

label {
	font-family:freeBooterFont, "Times New Roman", Times, serif;
	font-size:24px;
}

#effectsToggle label {
	font-family: Arial;
	font-size: 12px;
}
html {
	height:	100%;
	width:	100%;
}

body {
	margin: 0;
	padding: 0;
}

body {
	background: #222;

}


/*
body {
   background:
		url('../img/bg-tile.png') top left repeat,
   		-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2b475f), to(#172633));

   background:
		url('../img/bg-tile.png') top left repeat,
   		-webkit-linear-gradient(top, #2b475f, #172633); 

   background:
   		url('../img/bg-tile.png') top left repeat,
   		-moz-linear-gradient(top, #2b475f, #172633);

   background:
  		url('../img/bg-tile.png') top left repeat,
   		-ms-linear-gradient(top, #2b475f, #172633);

   background:
   		url('../img/bg-tile.png') top left repeat,
   		-o-linear-gradient(top, #2b475f, #172633);
}
*/

img {
	/*cursor: pointer;*/
}

div { /*For Firefox; otherwise vertical text spacing is too large */
	/*line-height: 100%;*/
}

@font-face {
	font-family: freeBooterFont;
	src: url('../fonts/freebooterupdated.woff') format('woff'), url("../fonts/FreebooterUpdated.ttf") format("truetype");  
	font-weight: normal;
	font-style: normal;
}

#piratesLoveDaisies {
	position: absolute;
	background-color: #222;
	width:980px;
	height:700px;
  top: 0; left: 0;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
}

#game {
	display:none
}

#screens {
	width: 980px;
	height: 700px;
	 /*width:inherit; 
	 height:inherit;*/
}

.tooltipContainer {
	position: absolute;
	padding: 10px 8px 20px 20px;
	width: 400px;
	height: 100px;
	text-align: left;
	z-index:40;
	background:url('../img/ui/tooltipBG.png');
	font-family:freeBooterFont, "Times New Roman", Times, serif;
	font-size: 22px;
	font-weight:100;
	line-height: 20px;
}

.tooltipArial {
	font-family: Arial;
	font-size: 12px;
	line-height: normal;
	font-weight:normal;
	margin: 0;
}

#tooltipArrow {
	width: 34px;
	height: 17px;
	position:absolute;
	z-index:40;
	
}

#shareBar img {
	vertical-align:middle;
	border: 0
}

#unsupportedBrowser {
	font-family:Arial, Helvetica, sans-serif;
	width: 650px;
	background-color:#FFF;
	padding: 10px;
	border: 3px #68A solid;
	display: none;
}

#unsupportedBrowser li {
	margin-left: 75px;
	list-style-type: circle;
}

#unsupportedBrowser a {
	font-weight: bold;
	text-decoration: none;
	color: #68A;
}
#unsupportedBrowser a:hover {
	text-decoration:underline; 
}

#content {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #AAAAAA;
	text-align:center;
	width: 980px;
	position: absolute;
}

#content a {
	font-weight: bold;
	text-decoration: none;
	color: #68A;
}
#content a:hover {
	text-decoration:underline; 
}
#credits {
	position:relative;
	top:784px;
}
#effectsToggle {
	position:relative;
	top:725px;
}

#backgroundImage {
	position:absolute;
}

#gameOverlay {
	background-color:#f00; 
	opacity: 0; 
	border: #000 medium;
	position:absolute;
	z-index:25;
	width:980px;
	height:700px;
}


/************************
** ROLL-OVER BUTTONS
*************************/
.panelBackground { /* Background div for optional wood panel */
	width: 290px;
	height: 72px;	
	background:url(../img/ui/smallPanel.png);	
}
.largeUIButton { /* Div based UI button */
	cursor:pointer;
	display: block;
	width: 278px;
  	height: 40px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 12px;
  	background-image:url(../img/ui/largeButtonFabric_up.png);
}
.largeUIButton:hover {
	background-image:url(../img/ui/largeButtonFabric_over.png);
}

.medUIButton {
	cursor:pointer;	
	width: 180px;
  	height: 40px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;	
  	background-image:url(../img/ui/medButtonFabric_up.png);	
}
.medUIButton:hover {
	background-image:url(../img/ui/medButtonFabric_over.png);
}
.medUIButtonDisabled {
	width: 180px;
  	height: 40px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;	
  	background-image:url(../img/ui/medButtonFabric_up.png);	
  	opacity: 0.6;
}

.UIButton210 {
	cursor:pointer;	
	width: 210px;
  	height: 40px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;	
  	background-image:url(../img/ui/buttonFabric210px_up.png);	
}
.UIButton210:hover {
	background-image:url(../img/ui/buttonFabric210px_over.png);
}
.UIButton210Disabled {
	width: 210px;
  	height: 40px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;	
  	background-image:url(../img/ui/buttonFabric210px_up.png);	
  	opacity: 0.6;
}

.smallUIButton {
	cursor:pointer;
	display: block;
	width: 80px;
  	height: 26px;
	text-align: center;
	font-family: freeBooterFont, Times;
	font-size: 24px;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;	
  	background:url(../img/ui/smallButtonFabric_up.png);
}
.smallUIButton:hover {
	background:url(../img/ui/smallButtonFabric_over.png);
}

/************************
** PRELOADER
*************************/
#preloader {
	position:absolute; 
	top:143px;
}
#preloader IMG {
	position:absolute; 
	left:246px;
}
#preloaderBar {
	position: absolute;
	top: 298px;
	left: 370px;
}


/************************
** MAIN SCREEN
*************************/
#startScreen { /* Splash screen background */
	background:url('../img/screens/titleScreen.jpg') no-repeat center;
}

#mainResumeButton {
	display: none;
	position: absolute;
	left: 665px;
	top: 522px;	
}

#mainStartButton {	
	position:absolute;	
	left: 665px;
	top: 602px;
}

#mainHighscoreButton {
	position:absolute;
	left: 350px;
	top: 602px;
}

#mainHelpButton {
	position:absolute;
	left: 36px;
	top: 602px;
}

/************************
** HIGHSCORE SCREEN
*************************/
#scoreDeathBtn {
	width:240px; 
	background-image:url(../img/ui/suddenButtonFabric_up.png);
}
#scoreDeathBtn:hover {	
	background-image:url(../img/ui/suddenButtonFabric_over.png);
}
#highscoreScreen { /* Splash screen background */
	background:url('../img/screens/titleScreen.jpg') no-repeat center;	
}
.highscorePanel {	
	background:url(../img/ui/woodPanel.png);
	margin:0px;
	padding:0px;
}
#mapsContainer {	
	float: left;
	width: 210px;
	height: 620px;
	text-align: center;
	font-family: freeBooterFont;
	font-size: 22pt;
	padding: 10px 0px 0px 0px;
	margin: 0px;	
	line-height: 100%; /*For Firefox; otherwise vertical text spacing is too large */
}
#mapsContainer img {
	width:175px; 
	height:128px;
}
#mapsContainer .mapImage {
	height: 130px;
	padding-left: 18px;
} 
#mapsContainer .mapname {
	margin-top:-8px;	
	cursor: default;	
}
#highscoresContainer {
	float: right;
	width: 650px;
	height: 620px;
}
#leaderboard {
	position: absolute; 
	left: 25px; 
	top: 120px;
	width: 600px;
	height: 420px;
	background:url(../img/ui/largeFabric.png);
	padding: 30px;
	font-family: freeBooterFont;
	font-size: 28pt;
}
#leaderboard div {
	line-height: 100%; /*For Firefox; otherwise vertical text spacing is too large */
}
#yourRanking {
	position: relative;
	top: 75px;
	text-align: center;
	font-family: freeBooterFont;
	font-size: 28pt;
	color: #F9E5BE;
}

/************************
** HELP SCREEN
*************************/
#helpScreen { /* Splash screen background */
	background:url('../img/screens/titleScreen.jpg') no-repeat center;		
}
#mainHelpDiv { /* Main container for help screen, contains both wood panels */
	width:892px; 
	margin-left:auto; 
	margin-right:auto; 
	position:relative; 
	top:65px;
}

.helpPanel { /*Large wood panels*/
	width: 444px;
	height: 571px;
	background:url(../img/ui/woodPanel.png);
	margin:0px;
	padding:0px;
}
.helpDiv { /*Slice 9 Fabric bg for divs*/	
	width:440px; 
	background: url('../img/ui/largeFabric.png');
	margin: 10px 3px 3px 3px;	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	text-align:left;
	font-family: Arial;
	font-size: 14px;
	/*font-family: freeBooterFont;
	font-size: 20px;*/
}

.creditsDiv { /*Slice 9 Fabric bg for divs*/	
	width:440px; 
	background: url('../img/ui/largeFabric.png');
	margin: 10px 3px 3px 3px;	
	padding-left: 40px;
	padding-right: 70px;
	padding-top: 30px;
	text-align:left;
	font-family: freeBooterFont;
	font-size: 24px;
}
.creditsDiv a {
	text-decoration:underline; 
	color: #000000;
}
.creditsDiv a:hover {
	text-decoration:underline; 
	color: #000000;
}
.creditsDiv a:visited {
	text-decoration:underline; 
	color: #000000;
}

#creditsTextDiv { /* div containing "Story" details */
	height: 540px;
	line-height: 26px;
}

#creditsPictureDiv {
	height: 490px;
}

#helpStoryDiv { /* div containing "Story" details */
	height: 345px;
}
#helpCreepsDiv { /* div containg "Creeps" details */
	
}
#helpCrewMainDiv { /* div containing "Crew" details */
	height: 120px;
}

.helpCrewDiv { /* div container that holds pirate canvas and pirate name/details div */
	width:225px; 
	height: 120px;
	position:absolute; 
	background: url('../img/ui/largeFabric.png');
	margin-left: auto;
	margin-right: auto;
	padding: 10px 20px 10px 20px;
	text-align:left;
	font-family: Arial;	
	font-size: 12px;
	/*font-family: freeBooterFont;
	font-size: 18px;*/
}
.helpPirateCanvas { /* canvas containing the animated pirate sprite */
	float: left;
	position: relative;
	top: 15px;
}
.helpPirateDiv { /* div next to canvas containing pirate name and details */
	width:110px; 
	float:right;
}
#helpSabreDiv {
	top:125px; 
	left:5px;
}
#helpCabinDiv {
	top:125px; 
	left:220px;
}
#helpCannonDiv {
	top:250px; 
	left:5px;
}
#helpShooterDiv {
	top:250px; 
	left:220px;
}
#helpCaptainDiv {
	width:440px; 
	top:375px; 
	left:5px;
}

.helpTitle {	
	font-family: freeBooterFont, Times;
	font-size: 40px;
	margin: 0px;
	padding: 0px;
}

.pirateName {
	font-family: freeBooterFont, Times;
	font-size: 22px;
}

#helpLink {
	font-family:Arial; 
	font-size:13px; 
	text-decoration:none; 
	color:#ffdeb5;
	margin: 0xp;
	padding: 0px;
}

/************************
** VICTORY / DEFEAT VIEW SHARED STYLES
*************************/
.scoreboardDiv { /* div container for both the victory/defeat planks and the scoreboard planks (#victoryDiv and #defeatDiv)*/
	position: absolute; 
	top: 20px; 
	left: 20px;	
	font-family: freeBooterFont, Times;
}
.scoreboardDiv div { /*For Firefox; otherwise vertical text spacing is too large */
	line-height: 100%;
}

.scoreHeader { /* "Your Score:" header */
	font-size: 30pt;
	color: #F9E5BE;
}
.newHighScoreLabel { /* "New Personal Best!" header */
	font-size: 30pt;
	color: #F9E5BE;
}
.submitScorePanel { /* div container for submit score to facebook/windows live account in the victory/defeat screens */
	width: 375px;
	height : 200px;
	background: url('../img/ui/woodPanel.png');	
	text-align: center;
	margin: 0px;		
	padding: 10px;
	font-size: 16pt;
}
.submitScoreHeader { /* "Submit your score?" header */
	font-size: 30pt;
	color: #F9E5BE;
}

/************************
** DEFEAT VIEW
*************************/
#gameoverScreen { /* Splash screen background */
	background: url('../img/screens/defeatScreen.png') no-repeat center;	
}
#gameoverScreen .submitScorePanel { /* div container for submit score to facebook/windows live account in the victory/defeat screens */
	position: absolute;
	top: 320px;	
}
#defeatDiv {
	width: 375px;
	height : 210px;
	background: url('../img/ui/woodPanel.png');	
	text-align: center;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 100px;
}
#defeatDiv #scoreText { /* The score */
	font-size: 36pt;
}

/************************
** VICTORY VIEW
*************************/
#winScreen { /* Splash screen background */	
	background: url('../img/screens/victoryScreen.png') no-repeat center;	
}
#winScreen .submitScorePanel { /* div container for submit score to facebook/windows live account in the victory/defeat screens */
	position: absolute;
	top: 427px;
}
#victoryDiv {		
	width: 375px;
	height: 320px;
	background: url('../img/ui/woodPanel.png');	
	text-align: center;
	margin: 0px;
	padding: 0px;	
	position: absolute;
	top: 100px;	
}
#victoryDiv .scoreTextDiv { /* The score breakdown (daisy, gold, score)*/	
	font-size: 30pt;
}

/************************
** MAP VIEW
*************************/
#mapScreen { /* Splash screen background */
	background:url('../img/screens/mapScreen.png') no-repeat center;
}
.mapTxt {
	font-family: freeBooterFont, Times;
	font-size: 48px;
	font-weight:100;
	line-height: 30px;
	padding: 0px;
	margin: 0px;
	margin-top: 10px;
	color: #F9E5BE;
}

.mapTxtSmall {
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight:100;
	padding: 0px;
	margin: 0px;
	color: #000000;
}

#mapTitleTxt {
	font-family: freeBooterFont, Times;
	font-size: 40px;
	font-weight:100;
	padding: 0px;
	margin: 0px;
	color: #000000;
}

.highScore {
	font-family: freeBooterFont, Times;
	font-size: 30px;
	padding: 0px;
	margin: 0px;
	position:relative; 
	top:210px;
}

.mapPanel {
	width:300px; 
	height:292px;	
	background:url('../img/ui/woodPanel.png') no-repeat center;
	text-align:center;	
	position: absolute;	
}

.mapPanel img {
	position:absolute;
	left: 2px;
	cursor: pointer;
}

#mapPanel1 {	 
	left: 30px; 
	top: 87px; 
}
#mapPanel2 {
	left: 335px; 
	top: 87px;
}
#mapPanel3 {
	left: 30px; 
	top: 384px;
}
#mapPanel4 {
	left: 335px;
	top: 384px;
}

#modeViewDiv div {
	font-family: freeBooterFont, Times;
}
#modeMapPanel {
	width:300px; 
	height:270px;	
	background:url('../img/ui/woodPanel.png') no-repeat center;
	text-align:center;	
	position:absolute; 
	left: 30px; 
	top:87px
}
#modeMapPanel img {
	position:absolute;
	left: 2px;
	cursor: default;
}
.modePanel { /* wood panel containing mode details */
	width: 610px; 
	height: 90px;	
	background: url('../img/ui/woodPanel.png') no-repeat center;	
	position: absolute;
	left: 30px;
}
.modeHeader { /* title of the mode */
	font-size: 34pt;
	color: #F9E5BE;
	position: absolute;
	top:0px;
	left:20px;
}
.modeDesc {	/* description of mode */	
	font-size: 22pt;
	position: absolute;
	top:40px;
	left: 20px;	
}
.modeLocked { /* text to show if mode is locked */
	font-size: 22pt;
	text-align: right;
	width: 250px;
	position: absolute;	
	top:10px;
	right: 20px;		
}
.modeScore { /* high score for that mode */	
	font-size: 22pt;
	position: absolute;
	top:52px;
	right:20px;	
	text-align: right;
	color: #F9E5BE;
}
#normalPanel {
	top: 374px;
}
#suddenPanel {
	top:480px;	
}
#epicPanel {
	top: 586px;
}


/************************
** TOP GAME MENU
*************************/
#topNav {
	background: url('../img/TopNavigation_background.png') no-repeat transparent;
	width:980px;
	position:absolute;
	z-index:15;
	height:37px;
	vertical-align:middle;
	padding-top: 5px;
}

#topNav LABEL {
	vertical-align:middle;
	color: #000;
	height: 28px;
	margin-left: 10px;
}
#topNav .quitButton {
	position: absolute;
	right:25px;
	top:5px;
}
LABEL.daisy {
	background: url('../img/daisy.png') no-repeat transparent;
	padding-left: 28px;
	padding-top: 0px;
	padding-bottom: 1px;
}
LABEL.money {
	background: url('../img/coin.png') no-repeat transparent;
	background-position: 0 3px;	
	position: absolute;
	padding-left: 28px;
	padding-top: 2px;
	padding-bottom: 1px;
}
LABEL.score {
	position: absolute;
	left: 140px;
	padding-top: 2px;
	padding-bottom: 1px;	
	width:200px;
}
#muteBtn {
	position:absolute; 
	z-index:100; 
	top:2px; 
	left:725px;
}
#togglePauseBtn {
	position:absolute; 
	z-index:100; 
	top:2px; 
	left:810px;
}
#quitBtn {
	position:absolute; 
	z-index:100; 
	top:2px; 
	left:895px;
}

#muteButton {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #f00;	
	top: 2px;
	left: 285px;
}

/************************
** Canvas
*************************/
.uiScreen {
	width:inherit;
	height:inherit;
	position:absolute;
	top:0px;
	left:0px;
}

.tileCanvas {
  z-index: 5;
  position: absolute;
}

.animationCanvas {
  z-index: 7;
  position: absolute;
  opacity: 1;
}


.uiCanvas {
  z-index: 6;
  position: absolute;
  opacity: 1;
}

/************************
** BOTTOM NAV
*************************/
#bottomNav {
	background-image: url('../img/BottomNav_background.png');
	background-color:#fff;
	position:absolute;
	bottom:0px;
	width: 980px;
	height:84px;
	z-index:36;
}

.buttonOverlay {
	position:absolute; 
	background: url('../img/spacer.gif');	
	cursor: pointer;
}

.menuButton {
	position: absolute;
	top: 10px;
	display: block;
	width: 200px;
	height: 84px;
}
.menuButton CANVAS {
	position: absolute;
}
.menuButton LABEL {
	margin: auto 10px;
	position:absolute;
}
.menuButton LABEL.title {
	line-height: 18px;
}

#nextWaveIndicator {
	position: absolute;
	right: 0;
}

#nextWaveIndicator CANVAS {
	position: absolute;	
}

#nextWaveButton {
	position: absolute;
	left: 165px;
	top: 13px;
}

#nextWaveIndicator .nextWaveLabel {
	position: absolute; 
	left:20px; 
	top: 10px;
}

#gameDebuggingOverlay {
	position:absolute;
	overflow:hidden;
	width:980px;
	height:700px;	
}