﻿/**
* Overrides for a forced viewport
* @version $Id: gcaviewport.css 5979 2018-08-06 10:19:44Z caughtatwork $
*/
/* I think the !important makes this style the highest style priority overriding even the inline styles */

@media only screen and (max-device-width: 600px) {
	/* Hides elements that clutter the small screens and can be ignored */
	.viewport_hide {
		display: none;
	}
	
	#header {
		height: 52px;
	}

	.header_add_container {
		display: none;
	}

	.logo {
		padding: 0px 0px 0px 0px;
	}

	/* Front Page Container Override */
	.frontpage_map_container {
		display: block;
		width: 100%;
		min-width: 200px !important;
	}
	.frontpage_data_container_heading {
		display: block;
		width: 100% !important;
	}
	.frontpage_data_container {
		display: block;
		width: 90%;
	}
	.frontpage_map {
		display: block;
		width: 100%;
	}
	.frontpage_map_information {
		display: block;
		width: 100%;
	}
	.frontpage_cachelist {
		display: inline-block;
		width: 20%;
		text-align:center;
		border: 1px solid #c0c0c0;
		border-radius: 5px 5px 5px 5px;
		font-size: 80%;	
	}



	/* Cache description CKEditor inline style overrides */
	/* the [style] attribute on the element overrides the inline-styles */
	.responsive_cache_descriptions div[style] {
	    width: 100% !important;
	    height: 100% !important;
	} 
	.responsive_cache_descriptions table[style] {
	    width: 100% !important;
	} 
	.responsive_cache_descriptions img[style] {
	    max-width: 90% !important;
	    height: 90% !important;
	}

	/* Toggles the side menu on the cache page */
	.responsive_cache_sidemenu {
		display: none;
	}
	.responsive_cache_sidemenubutton {
		display: block !important;
	}

	/* Toggles the geocache information ajax boxes on the cache page */
	.responsive_cache_ajaxmenu {
		display: none;
	}
	.responsive_cache_ajaxmenubutton {
		display: block !important;
	}

	/* Overrides the cache content areas to 100% */
	.responsive_cache_content {
		float: left;
		width: 100% !important;
	}
	.responsive_cache_sidemenu {
		float: left;
		width: 100% !important;
	}
	.responsive_cache_details {
		float: left;
		width: 100% !important;
	}
	.cache_ajaxmenu {
		float: left;
		width: 100% !important;
	}

	/* Cacher Page Ajax Overrides */
	.responsive_cacher_ajax_finds {
		float: left;
		width: 100% !important;
	}

	.responsive_cacher_ajax_hides {
		float: left;
		width: 100% !important;
	}

	/* Responsive toggle buttons */
	.responsive_toggle_button {
		border: 2px solid #c0c0c0;
		border-radius: 5px 5px 5px 5px;
		padding: 1em 1em 1em 1em;
		text-align: left;
		text-decoration: none!important;
		color: #000000;
		background-color: #f0edeb;
		margin: 0 0 0.5em 0;
		overflow:hidden;
		display: inline-block;
		width: 100%;
		height: 75px;
	}

	/* Toggles the caches lists */
	.responsive_caches_list_button {
		display: block !important;
	}

	.responsive_caches_list_heading {
		display: block !important;
	}

	.responsive_caches_list_a {
		width: 100% !important;
	}

	.responsive_caches_list_b {
		width: 100% !important;
	}

	.responsive_caches_list_c {
		display: none;
		width: 100% !important;
	}

	.responsive_caches_list_d {
		display: none;
		width: 100% !important;
	}

	.responsive_caches_list_e {
		display: none;
		width: 100% !important;
	}

	/* My Query List Overrides */
	.responsive_myquerylist {
		width: 100% !important;
	}

	/* Route Overrides */
	.responsive_routelist {
		width: 100% !important;
	}

	.responsive_routeview {
		width: 100% !important;
	}

	/* Zone Overrides */
	.responsive_zoneview {
		width: 100% !important;
	}

	/* Dashboard Overrides */
	.responsive_dashboarddata {
		width: 100% !important;
	}

	/* Skill Overrides */
	.responsive_skill {
		width: 100% !important;
	}

	/* Toolbox Overrides */
	.responsive_toolboxlist {
		width: 100% !important;
	}
	.responsive_toolbox {
		width: 100% !important;
	}
	
	/* Instructible Overrides */
	.responsive_instructible_container_landscape {
		width: 100% !important;
	}
	
	.responsive_instructible_container_portrait {
		width: 100% !important;
	}
	
	.responsive_instructible_container_square {
		width: 390px;
		height: 390px;
	}

	.instructible_iframe_square {
		width: 390px;
		height: 390px;
	}

	/* Admin user approve delete Overrides */
	.responsive_approvedelete {
		width: 100% !important;
	}

	/* Competition Overrides */
	.responsive_competition {
		width: 100% !important;
	}

	/* dragonZone Overrides */
	.responsive_dragonzone {
		width: 100% !important;
	}

	/* api Overrides */
	.responsive_api {
		width: 100% !important;
	}

	/* Journey or Destination dragonZone override */
	.dragonzone_journeyordestination {
		font-size: 80%;
	    min-width: 10px;
	    min-height: 10px;
	    width: 15px;
	    height: 10px;
	}

	/* Battleships dragonZone override */
	.dragonzone_battleships {
		font-size: 80%;
	    min-width: 10px;
	    min-height: 10px;
	    width: 15px;
	    height: 10px;
	}

	.icon_vsmall {
		width: 7px;
		height: 7px;
		padding: 1px;
	}
	
	.icon_msmall {
		width: 12px;
		height: 12px;
		padding: 1px;
	}
	
	.icon_small {
		width: 15px;
		height: 15px;
		padding: 1px;
	}
	
	.icon_smedium {
		width: 30px;
		height: 30px;
		padding: 1px;
	}
	
	.icon_medium {
		width: 37px;
		height: 37px;
		padding: 1px;
	}
	
	.icon_xmedium {
		width: 40px;
		height: 40px;
		padding: 1px;
	}
	
	.icon_large {
		width: 75px;
		height: 75px;
		padding: 1px;
	}
	
	.icon_xlarge {
		width: 150px;
		height: 150px;
		padding: 1px;
	}
	
	.icon_xxlarge {
		width: 150px;
		height: 150px;
		padding: 1px;
	}
	
	.dragonzone_imgclan25_gold {
		width: 25px;
		height: 25px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -80px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan25_green {
		width: 25px;
		height: 25px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -105px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan25_blue {
		width: 25px;
		height: 25px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -80px -25px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan25_orange {
		width: 25px;
		height: 25px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -105px -25px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan25_neutral {
		width: 25px;
		height: 25px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -80px -50px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan50_gold {
		width: 50px;
		height: 50px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -130px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan50_green {
		width: 50px;
		height: 50px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -180px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan50_blue {
		width: 50px;
		height: 50px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -230px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan50_orange {
		width: 50px;
		height: 50px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -280px 0px transparent;
		zoom:0.50;
	}
	
	.dragonzone_imgclan50_neutral {
		width: 50px;
		height: 50px;
		background:url("/pics/dragonzone_sprite.png") no-repeat scroll -330px 0px transparent;
		zoom:0.50;
		}
		
/* Makes the grid small to fit the screen */
	.dragonzone_crystalcaverns {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		min-width: 30px;
		width: 30px;
		height: 30px;
		text-decoration: none;
		color: #FFFFFF;
		border-radius: 5px;
	}

/* Makes the cards smaller to fit on the screen */

	.icon_card_smedium {
		width: 90px;
		height: 126px;
	}

	.icon_card_dragonlords_smedium {
		width: 90px;
		height: 126px;
	}

	.icon_card_dragonlords_smedium_footer {
		position: absolute;
		top: 82%;
		left: 12%;
		width: 75%;
		height: 40%;
		overflow: hidden;
		text-align: center;
		font-size: 80%;
		color: #FFFFFF;
		font-weight: bold;
	}

	.icon_card_xmedium {
		width: 110px;
		height: 157px;
	}

	.icon_card_dragonlords_xmedium {
		width: 110px;
		height: 157px;
	}

	.icon_card_dragonlords_xmedium_icon {
		position: absolute;
		top: 60%;
		left: 0%;
		width: 100%;
		display: inline;
		text-align: center;
		color: #FFFFFF;
		font-size: 50%;
	}

	.icon_card_dragonlords_xmedium_title {
		position: absolute;
		top: 4%;
		left: 15%;
		width: 70%;
		height: 15%;
		overflow: hidden;
		font-weight: bold;
		font-size: 60%;
		display: inline-grid;
		align-items: center;
		text-align: center;
		color: #FFFFFF;
	 }

	.icon_card_dragonlords_xmedium_data {
		position: absolute;
		top: 15%;
		left: 11%;
		width: 78%;
		height: 40%;
		overflow: hidden;
		text-align: center;
		font-size: 4pt;
		color: #FFFFFF;
	}

	.icon_card_dragonlords_xmedium_reward {
		position: absolute;
		top: 55%;
		left: 15%;
		width: 70%;
		height: 40%;
		overflow: hidden;
		text-align: center;
		font-size: 40%;
		color: #FFD200;
	}

	.icon_card_dragonlords_xmedium_footer {
		position: absolute;
		top: 82%;
		left: 12%;
		width: 75%;
		height: 40%;
		overflow: hidden;
		text-align: center;
		font-size: 75%;
		color: #FFFFFF;
		font-weight: bold;
	}

.dragonlords_bard_background {
  background: url("/pics/icon_mascot_bard.png") bottom right no-repeat;
  background-size: auto 0px;
}

.dragonlords_rogue_background {
  background: url("/pics/icon_mascot_rogue.png") bottom right no-repeat;
  background-size: auto 0px;
}

.dragonlords_paladin_background {
  background: url("/pics/icon_mascot_paladin.png") bottom right no-repeat;
  background-size: auto 0px;
}

.dragonlords_ranger_background {
  background: url("/pics/icon_mascot_ranger.png") bottom right no-repeat;
  background-size: auto 0px;
}

.dragonlords_mage_background {
  background: url("/pics/icon_mascot_mage.png") bottom right no-repeat;
  background-size: auto 0px;
}


}

