/* ============
   Basics/Reset 
   ============ */

* * { box-sizing:border-box; margin:0; padding:0; border:0; border-spacing:0; font-size:1em; }
html { width:100%; height:100%; }
body { width:100%; height:100%; padding:8px; overflow:hidden; font-family:Arial, Helvetica, sans-serif; background-size: auto 100%; background-repeat:repeat-x; background-position:center center; background-color:#0D252C; color:white; }
img { max-width:100%; }
textarea { outline:none; width:100%; height:64px; padding:2px; border-top:solid 2px rgb(128,128,128); border-left:solid 2px rgb(128,128,128); border-right:solid 2px rgb(172,172,172); border-bottom:solid 2px rgb(172,172,172); }
input[type=text] { outline:none; width:100%; padding:2px; border-top:solid 2px rgb(128,128,128); border-left:solid 2px rgb(128,128,128); border-right:solid 2px rgb(172,172,172); border-bottom:solid 2px rgb(172,172,172); }
input[type=button] { padding:4px; border-radius:4px; border-top:solid 2px rgb(172,172,172); border-left:solid 2px rgb(172,172,172); border-right:solid 2px rgb(128,128,128); border-bottom:solid 2px rgb(128,128,128); background:rgb(232,232,232); color:rgb(128,128,128); font-weight:bold; outline:0; }
input[type=button]:active { padding:5px 4px 3px 4px; border-right:solid 2px rgb(172,172,172); border-bottom:solid 2px rgb(172,172,172); border-top:solid 2px rgb(128,128,128); border-left:solid 2px rgb(128,128,128); outline:0; }
select { padding:4px; border-radius:4px; border-top:solid 2px rgb(172,172,172); border-left:solid 2px rgb(172,172,172); border-right:solid 2px rgb(128,128,128); border-bottom:solid 2px rgb(128,128,128); color:rgb(0,0,0); font-weight:bold; outline:0; }
a { color:#FFFFFF; }
a:hover { color:#FFFFFF; }
a:active { color:#FFFFFF;}
h1 { font-size:1.6em; margin-bottom:0.35em; }
h2 { font-size:1.4em; margin-bottom:0.3em; }
p { margin-bottom:1em; }
ul { margin-bottom:1em; padding-left:1.5em; list-style-position:outside; }

/* =========
   Mode Load 
   ========= */

#mode-load { display:none; }
#mode-load-active { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:16px; overflow:hidden; }

#mode-load-loadbox { width:100%; max-width:300px; display:inline-block; border:solid 1px grey; border-radius:8px; text-align:center; padding:8px; padding-bottom:2px; }
#mode-load-loadbox-title { font-size:1.4em; margin-bottom:0.6em; }
#mode-load-loadbox-bar { height:16px; overflow:hidden; border:solid 1px grey; border-radius:4px; padding:2px;  margin-bottom:0.8em; }
#mode-load-loadbox-bar-inner { width:1%; height:100%; background:orange; overflow:hidden; border-radius:4px; }
#mode-load-loadbox-info { font-size:0.8em; }

/* ============
   Mode Welcome 
   ============ */

#mode-welcome { display:none; }
#mode-welcome-active { display:flex; flex-direction:column; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow:hidden; }

#mode-welcome-oak { display:flex; align-items:center; justify-content:center; margin:0 auto 8px auto; }
#mode-welcome-oak-left { margin-right:1em; }
#mode-welcome-oak-img { width:90px; height:90px; }
#mode-welcome-oak-right {}

#mode-welcome-txt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:top; overflow-x:hidden; overflow-y:auto; padding:16px; border:dashed 1px #AAAAAA; border-radius:16px; }
#mode-welcome-txt-1 { display:none; }
#mode-welcome-txt-active-1 { display:block; }
#mode-welcome-txt-2 { display:none; }
#mode-welcome-txt-active-2 { display:block; }
#mode-welcome-txt-3 { display:none; }
#mode-welcome-txt-active-3 { display:block; }

#mode-welcome-buttons { display:inline-block; margin-top:8px; margin-left:auto; margin-right:auto; }
.mode-welcome-link { display:inline-block; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; }

/* ========
   Mode Dex 
   ======== */

#mode-dex { display:none; }
#mode-dex-active { display:flex; flex-direction:column; width:100%; height:100%; overflow:hidden; }

/* ========================
   Mode Dex - Outer Section 
   ======================== */

#mode-dex-outer-top { display:none; }
#mode-dex-outer-main { flex:1; width:100%; max-width:1024px; margin:0 auto; overflow:hidden; display:flex; flex-direction:column; }
#mode-dex-outer-footer { text-align:center; padding-top:8px; font-size:0.8em; }
#mode-dex-outer-adspace { margin-top:8px; }
#mode-dex-outer-ad-placeholder { border:solid 1px #AAAAAA; width:728px; max-width:100%; margin:0 auto; overflow:hidden; background:red; }
#mode-dex-outer-ad-placeholder img { vertical-align:top; }

/* ========================
   Mode Dex - Inner Section 
   ======================== */

#mode-dex-top { display:flex; align-items:center; border:solid 2px rgba(240,208,239,0.5); background-color:(163,152,248); padding:8px; }
#mode-dex-logo { display:flex; width:200px; padding:8px; margin-right:auto; text-align:center; }
#mode-dex-logo-img-cont {}
#mode-dex-logo h1 { display:none; }
#mode-dex-logo #mode-dex-tagline { display:none; }
a.mode-dex-top-right-item { display:flex; align-items:center; justify-content:center; padding-left:8px; padding-right:8px; margin-left:8px; width:98px; height:85px; background-size:100% 100%; text-align:center; text-decoration:none; color:yellow; font-weight:bold; }

#mode-dex-viewmode-active { border:solid 1px #AAAAAA; padding:8px; margin-bottom:8px; }
#mode-dex-viewmode { display:none; }
#mode-dex-main { position:relative; flex:1; overflow:hidden; display:flex; }
#mode-dex-main-inner { flex:1; padding:8px; background:rgba(13,37,44,0.9); overflow:hidden; }
#mode-dex-bottom { display:flex; padding:8px; border:solid 2px rgba(240,208,239,0.5); background-color:(163,152,248); }
.mode-dex-bottom-left-item { display:flex; align-items:center; justify-content:center; margin-right:8px; padding-left:8px; padding-right:8px; width:98px; height:85px; background-size:100% 100%; text-align:center; text-decoration:none; color:yellow; font-weight:bold; }
#mode-dex-social-media { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; margin-left:auto; padding-left:12px; padding-top:12px; padding-right:12px; padding-bottom:12px; background-size:100% 100%; }
#mode-dex-social-media-description { margin-bottom:8px; }
#mode-dex-empty-ls { display:none; }

/* ====================
   Mode Dex > Mode List 
   ==================== */

#mode-list { display:none; }
#mode-list-active { display:flex; flex-direction:column; width:100%; height:100%; overflow-y:auto; }

/* Table */
#mode-list-table { width:100%; border-left:solid 1px #AAAAAA; border-top:solid 1px #AAAAAA; }

/* Table Cells (All) */
#mode-list-table th, #mode-list-table td { border-right:solid 1px #AAAAAA; border-bottom:solid 1px #AAAAAA; padding-left:8px; padding-right:8px; vertical-align:middle; }

/* Table Cell (By Column) */
.mode-list-obtained-cell { width:90px; position:relative; text-align:center; }
.mode-list-num-cell { width:60px; text-align:center; }
.mode-list-pokemon-cell { width:160px; }
.mode-list-obtain-cell { width:auto; }
.mode-list-map-cell { width:90px; border-right:0; text-align:center; }

/* Table Contents */
.mode-list-obtained-cbx { position:relative; vertical-align:top; width:20px; height:20px; left:-2px; }
.mode-list-obtained-starter { position:absolute; left:auto; right:8px; top:4px; }
.mode-list-obtained-starter-img { width:20px; height:24px; }
.mode-list-pokemon-img { vertical-align:middle; }
.mode-list-pokemon-name { display:inline-block; vertical-align:middle; }
.mode-list-map-img { width:24px; height:24px; vertical-align:top; }

/* ========================
   Mode Dex > Mode PokeInfo 
   ======================== */

#mode-poke-info { display:none; }
#mode-poke-info-active { display:block; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:scroll; }
#mode-poke-info-inner { display:block; max-width:600px; margin:0 auto; }

#mode-poke-info-info { border:solid 1px #AAAAAA; margin-bottom:8px; padding:8px; display:flex; }
#mode-poke-info-back { display:flex; align-items:center; margin-right:auto; }
#mode-poke-info-pokemon { display:flex; align-items:center; }
#mode-poke-info-obtained-label { margin-right:8px; }
#mode-poke-info-num { margin-right:8px; }
#mode-poke-info-img { margin-right:8px; }
#mode-poke-info-name {  }

#mode-poke-info-map { margin-bottom:8px; position:relative; }
#mode-poke-info-map-imgs { display:flex; }
#mode-poke-info-johto-map-img { vertical-align:top; }
#mode-poke-info-kanto-map-img { vertical-align:top; }
#mode-poke-info-markers { position:absolute; top:0; left:0; bottom:0; right:0; }

.mode-poke-info-marker { position:absolute; width:2.777777777777777777777777777778%; height:6.6666666666666666666666666666667%; }
.mode-poke-info-marker .mode-poke-info-highlight { position:absolute; display:none; }
.mode-poke-info-marker .mode-poke-info-marker-link { position:absolute; left:0; top:0; right:0; bottom:0; }
.mode-poke-info-marker .mode-poke-info-marker-img { position:absolute; left:0; top:0; right:0; bottom:0; }

/* Sample Not Selected Marker - Put over New Bark Town */
#mode-poke-info-marker-SAMPLE { left:44.444444444444444444444444444448%; top:66.666666666666666666666666666667%; }

.mode-poke-info-marker-selected { position:absolute; width:2.777777777777777777777777777778%; height:6.6666666666666666666666666666667%; }
.mode-poke-info-marker-selected .mode-poke-info-highlight { position:absolute; left:-30%; top:-30%; right:-30%; bottom:-30%; border:solid 2px green; overflow:hidden; }
.mode-poke-info-marker-selected .mode-poke-info-marker-link { position:absolute; left:0; top:0; right:0; bottom:0; }
.mode-poke-info-marker-selected .mode-poke-info-marker-img { position:absolute; left:0; top:0; right:0; bottom:0; }

/* Sample Selected Marker - Put over Tohjo Falls */
#mode-poke-info-marker-SAMPLE-SELECTED { left:50.000000000000000000000000000004%; top:66.666666666666666666666666666667%; }

/* Easiest/All Tabs Section */
#mode-poke-info-show { border-left:solid 1px #AAAAAA; border-top:solid 1px #AAAAAA; border-right:solid 1px #AAAAAA; display:flex; }
.mode-poke-info-show-option, .mode-poke-info-show-option-active { width:50%; display:flex; align-items:center; justify-content:center; border-bottom:solid 1px #AAAAAA; }
.mode-poke-info-show-option a, .mode-poke-info-show-option-active a { display:inline-block; width:100%; height:100%; padding:8px; }

/* Easy Tab Active */
.mode-poke-info-show-option-active:first-child { border-right:0; border-bottom:0; }
.mode-poke-info-show-option:last-child { border-left:solid 1px #AAAAAA; border-bottom:solid 1px #AAAAAA; }

/* All Tab Active */
.mode-poke-info-show-option:first-child { border-right:solid 1px #AAAAAA; border-bottom:solid 1px #AAAAAA; }
.mode-poke-info-show-option-active:last-child { border-left:0; border-bottom:0; }

#mode-poke-info-listings { border-left:solid 1px #AAAAAA; border-right:solid 1px #AAAAAA; border-bottom:solid 1px #AAAAAA; padding:8px; } 

.mode-poke-info-listing { margin-bottom:8px; }
.mode-poke-info-listing a.mode-poke-info-listing-link { display:block; border:solid 1px #AAAAAA; padding:8px; text-decoration:none; }
.mode-poke-info-listing a.mode-poke-info-listing-link .mode-poke-info-listing-name { text-decoration:underline; }

.mode-poke-info-listing-selected { margin-bottom:8px; }
.mode-poke-info-listing-selected a.mode-poke-info-listing-link { display:block; border:solid 1px green; padding:8px; text-decoration:none; }
.mode-poke-info-listing-selected a.mode-poke-info-listing-link .mode-poke-info-listing-name { text-decoration:underline; }

/* ====================
   Mode Dex > Mode More
   ==================== */

#mode-more { display:none; }
#mode-more-active { flex:1; display:flex; flex-direction:column; align-items:center; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:scroll; }
#mode-more-inner { width:60%; min-width:120px; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto; }

#mode-more-back { margin-bottom:8px; text-align:center; }

.mode-more-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }

#mode-more-choices .mode-more-link { display:block; margin-bottom:0.5em; }

/* ==========================================
   Mode Dex > Mode Rate > Start/Cancel Screen
   ========================================== */

#mode-rate { display:none; }
#mode-rate-active { flex:1; display:flex; width:100%; height:100%; }

#mode-rate-start { display:none; }
#mode-rate-start-active { flex:1; display:flex; flex-direction:column; align-items:center; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:scroll; }
#mode-rate-start-inner { display:inline-block; margin:auto auto; }

#mode-rate-start-info { margin-bottom:1em; }
#mode-rate-start-links { text-align:center; }

/* ==================================
   Mode Dex > Mode Rate > Main Screen
   ================================== */

#mode-rate-main { display:none; }
#mode-rate-main-active { flex:1; display:flex; flex-direction:column; align-items:center; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:scroll; }
#mode-rate-main-inner { display:inline-block; margin:auto auto; width:600px; max-width:100%; }

#mode-rate-contacting { display:none; }
#mode-rate-contacting-active { display:flex; flex-direction:row; border:solid 1px #AAAAAA; padding:8px; margin-bottom:8px; }
#mode-rate-contacting-left { width:48px; height:48px; }
#mode-rate-contacting-img { width:100%; }
#mode-rate-contacting-right { flex:1; display:flex; justify-content:center; align-items:center; }

#mode-rate-caught { display:none; }
#mode-rate-caught-active { border:solid 1px #AAAAAA; padding:8px; margin-bottom:8px; }
#mode-rate-caught-amount { font-weight:bold; }

.mode-rate-opinion { display:none; }
.mode-rate-opinion-active { border:solid 1px #AAAAAA; padding:8px; margin-bottom:8px; }

#mode-rate-ok { display:none; }
#mode-rate-ok-active { display:block; text-align:center; }

.mode-rate-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }
.mode-rate-link:last-child { margin-right:0; }

#mode-rate-ok { text-align:center; }

/* ======================
   Mode Dex > Mode MyData
   ====================== */

#mode-my-data { display:none; }
#mode-my-data-active { flex:1; display:flex; flex-diretion:column; width:100%; height:100%; border:solid 1px #AAAAAA; padding:16px; overflow-y:scroll; }
#mode-my-data-inner { display:inline-block; margin:auto 0; }

#mode-my-data-back { margin-bottom:1em; text-align:center; }

.mode-my-data-section { margin-bottom:1em; border:solid 1px #AAAAAA; padding:8px; }
.mode-my-data-top { text-align:right; margin-bottom:0.5em; }
.mode-my-data-controls { display:flex; flex-direction:row; }
.mode-my-data-left { flex:1; padding-right:8px; display:flex; align-items:center; }
.mode-my-data-right { width:120px; padding-left:8px; display:flex; align-items:center; }

#mode-my-data-export-ta {}

.mode-my-data-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }
.mode-my-data-link:last-child { margin-right:0; }

.mode-my-data-section .mode-my-data-link { width:100%; min-width:auto; }

.mode-my-data-warning { color:red; font-weight:bold; }

/* ===============================
   Mode Dex > Mode Version History
   =============================== */

#mode-version-history { display:none; }
#mode-version-history-active { flex:1; display:flex; flex-direction:column; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:auto; }

.mode-version-history-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }
.mode-version-history-link:last-child { margin-right:0; }

/* ==========================
   Mode Dex > Mode Report Bug
   ========================== */

#mode-report-bug { display:none; }
#mode-report-bug-active { flex:1; display:flex; flex-direction:column; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:auto; }

.mode-report-bug-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }
.mode-report-bug-link:last-child { margin-right:0; }

/* ========================
   Mode Dex > Mode Feedback
   ======================== */
   
#mode-feedback { display:none; }
#mode-feedback-active { flex:1; display:flex; flex-direction:column; width:100%; height:100%; border:solid 1px #AAAAAA; padding:8px; overflow-y:auto; }

.mode-feedback-link { display:inline-block; min-width:120px; margin-right:16px; border:solid 1px #AAAAAA; padding:8px; text-align:center; }
.mode-feedback-link:last-child { margin-right:0; }

/* ==============
   Dialog/Starter
   ============== */

#dialog-starter { display:none; }
#dialog-starter-active { position:absolute; display:flex; align-items:center; justify-content:center; left:0; top:0; bottom:0; right:0; z-index:999; }
#dialog-starter-panel { display:inline-block; background:#1A2F31; border:solid 1px #AAAAAA; padding:16px; width:100%; max-width:600px; }

#dialog-starter-header { margin-bottom:16px; vertical-align:middle; }
#dialog-starter-pokemon-img { vertical-align:middle; }
#dialog-starter-pokemon-name {}

#dialog-starter-yesno { margin-bottom:16px; }
.dialog-yesno-link, .dialog-yesno-link-selected { display:block; padding:16px; margin-bottom:16px; }
.dialog-yesno-link { border:solid 1px #AAAAAA; }
.dialog-yesno-link-selected { border:solid 1px green; }
#dialog-starter-starter-link {}
#dialog-starter-trade-link {}

#dialog-starter-confirm { display:flex; align-items:center; justify-content:center; }
.dialog-starter-confirmlink { border:solid 1px #AAAAAA; padding:16px; display:inline-block; }
#dialog-starter-cancel-link { margin-right:8px; }
#dialog-starter-confirm-link { margin-left:8px; }

/* ===============
   Dialog/ViewMode
   =============== */

#dialog-viewmode { display:none; }
#dialog-viewmode-active { position:absolute; display:flex; align-items:center; justify-content:center; left:0; top:0; bottom:0; right:0; z-index:999; }
#dialog-viewmode-panel { display:inline-block; background:#1A2F31; border:solid 1px #AAAAAA; padding:16px; width:100%; max-width:600px; }

#dialog-viewmode-header { margin-bottom:16px; vertical-align:middle; text-align:center; }

#dialog-viewmode-options { text-align:center; }
#dialog-viewmode-ok-link { display:inline-block; min-width:120px; padding:8px; border:solid 1px #AAAAAA; text-align:center; }

/* ==============
   Closing Styles
   ============== */

*:last-child { margin-bottom:0; }

/* =============
   =============
   Media Queries
   =============
   ============= */
   
@media only screen and (max-width: 767px)
{
    body { font-size:0.75em; }
	#mode-list-headings-obtain-td { display:none; }
	
	.mode-list-obtained-cell { width:90px }
	.mode-list-num-cell { width:60px; }
	.mode-list-pokemon-cell { width:auto; }
	.mode-list-obtain-cell { display:none; }
	.mode-list-map-cell { width:70px; }
	
	.mode-list-map-img { width:16px; height:16px; }
	
	#mode-dex-bp1 { display:none; }
	#mode-dex-bp2 { display:block; }
	
	#mode-load-loadbox-info { font-size:1em; }
	
	a.mode-dex-top-right-item { height:60px; }
	a.mode-dex-bottom-left-item { height:auto; }
	
	#mode-dex-switch-order-link {}
	#mode-dex-switch-order-txt {}
}

/* ************
   SOCIAL MEDIA
   ************ */
   
.share-facebook, .share-twitter
{
	text-decoration:none;
	font-size:0.75em;
	display:inline-block;
	text-align:center;
	background:lightgrey;
	color:white;
	padding:0.4em;
	border-radius:0.4em;
}

.share-facebook
{
	background:rgb(76,102,164);
}

.share-facebook:hover, .share-facebook:active
{
	background:#365899;
}

.share-twitter
{
	background:rgb(85,172,238);
}

.share-twitter:hover, .share-twitter:active
{
	background:#0C7ABF;
}