/* mobile theme by fimion */
@media screen and (max-width:768px) {

	html {
		min-height:100% !important;
	}

	body {
		margin:0;
	}
	
	#headerlinks {
		position:absolute;
		right:10px;
		bottom:5px;
		float:right;
		text-align:right;
		max-width:80%;
		font-size:90%;
	}
		
	#main {
		margin:12% auto 5% auto;
	}
	
	/* we used to kill the logo on mobile but now we wanna center it */
	#logotext {
		height:auto;
	}
		
	#logoimg {
		position:relative;
		max-height:36px;
		height:100%;
		width:auto;
	}
	
	/* insert menu here, hide desktop links */
	#headerlinks, #footerlinks { 
		display: none;
	}
			
	.hamburger{
		display:block;
		float:right;
		margin: 10px 32px 32px auto;
		cursor:pointer;
	}
	.hamburgerlinks{
		display:block;
		background-color:aliceblue;
		max-height:0;
		top:0;
		width:100%;
		overflow:hidden;
		text-align:right;
		transition:max-height 0.3s ease;
		padding-right:10px;
	}
	
	/* this makes the links appear */
	.hamburger:checked~.hamburgerlinks{
		max-height:22em;
		padding-bottom:1em;
	}
	
	/* make the button itself pretty */
	.hamburger:before{
		display:inline-block;
		opacity:1;
		content:' ';
		background:aliceblue url('/includes/img/hamburger.png') no-repeat center/cover;
		height:34px;
		width:32px;
		cursor:pointer;
		pointer-events: none;
	}
	
	.hamburger:checked:before {
		background:aliceblue url('/includes/img/hamburger-pressed.png') no-repeat center/cover;
	}
	
	/* fix admin panel on mobile */
	#adminpanelbiglist {
		word-break: break-all;
	}
	
	/* tate is a dirty cheater lmao */
	#headermobilehack {
		width: 85%;
		height: 55px;
		position: absolute;
		display:block;
	}
	
	#leaderboardlinksholder {
		text-align:center;
		margin:1em auto 2em auto;
	}
	
}

/* 620 or less */
@media screen and (max-width:620px) {
    .coloreditor {
        flex-flow: column nowrap;
    }
    .colorsliders {
        width: 100%;
    }
    .colorslider {
        min-width: 200px;
    }
    .colorswatches {
        width:100%;
    }

	.itemdescription {
		display:none;
	}

    .homepage table, .homepage tbody, .homepage tr, .homepage td, #lead-mini table, #lead-mini table tbody {
        display: block;
    }
    #mobilead {
        max-width: 300px;
        max-height: 260px;
        display: block;
        margin: 20px auto 40px auto;
        text-align:center;
        font-size:small;
    }
    #ad {
        display: none;
    }
    #main,
    #announcements,
    #footer {
        max-width: 300px;
        min-width: 100%;
    }
    
    #main {
		margin:15% auto 5% auto;
	}
    
    #title {
		font-size:135%;
		text-align:center;
	}
    
    /* leaderboard */
       
    #lead-mini tr,
    #leaderboard tr {
        display: block;
        list-style: none;
        text-align: center;
        clear: both;
        margin:1px 0 1px 0;
    }
    
    #lead-mini tr:after,
    #leaderboard tr:after {
        content: '';
        display: block;
        clear: both;
    }
    
    #lead-mini td.tabletitle { /* didn't do one for full leaderboard, that's intentional */
        text-align: center;
        background-color:rgba(255,255,255,.75);
        margin-bottom:4px;
    }
    
    #lead-mini td,
    #leaderboard td {
        display: block;
        padding-left: 0px;
        
    }
    
    #lead-mini td.colname,
    #leaderboard td.colname {
        display: none;
    }
    
    #lead-mini .rank,
    #leaderboard .rank {
        display: block;
        float: left;
        min-width: 58px;
        font-size: 150%;
        line-height:33px;
        text-align: center;
        padding:5px 5px -15px 5px;
        top:0;
        left:0;
    }
    /*#lead-mini .rank:before {
        content: '#';
        font-weight: 700;
    }*/
    /*#lead-mini .petname:before{content:'';}*/
    
    #lead-mini .petname,
    #leaderboard .petname {
        display:block;
        padding-left: 0;
		padding-top:10px;
        margin-top:2px;
        margin-left:63px;
    }
    
    #lead-mini .ownername:before,
    #leaderboard .ownername:before {
        content: none;
    }
    
    #lead-mini .ownername,
    #leaderboard .ownername {
        font-size: 80%;
        margin-bottom:-11px;
        margin-left:63px;
        padding-bottom:13px;
        clear:none;
    }
    
    #lead-mini .clicks,
    #leaderboard .clicks {
        float: left;
        clear: both;
        min-width: 58px;
        text-align: center;
        position:relative;
        margin-top:-14px;
        padding:0 0 5px 0;
    }
    
    /*Okay, so in order to break things up right... the tr need to be transparent, but the td needs to be colored.*/
    #lead-mini .clicks:before
    #leaderboard clicks:before {
        content: none;
    }
    #lead-mini tr.odd,#lead-mini tr.even,
    #leaderboard tr.odd,#leaderboard tr.even {
        background-color:transparent;
        position:relative;
        min-height:63px;
    }
    #lead-mini tr.odd td, #leaderboard tr.odd td{
		background-color:rgba(255,255,255,.35);
    }
    #lead-mini tr.even td, #leaderboard tr.even td{
		background-color:rgba(255,255,255,.6);
    }
    
    #leaderboardlinksholder {
		text-align:center;
		margin:1em auto 0 auto;
	}
    
    /* end leaderboard */
    
    /*{content:'';}
    {content:'Owner:';}
	{content:'Clicks:';}*/
    
    #accountsettings,
    #adoptpagepw {
        width: 100%;
    }
    #adoptpagepw {
		margin-bottom:5%;
	}
    #content>a {
        /*display: block;*/
        text-align: center;
    }
    #petprofilemain {
        position: relative;
        height: 400px;
    }    
    #petprofiletext {
        float: none;
        width: 100%;
        position: absolute;
        top: 200px;
        height: 200px;
    }
    
	#petprofileadopt {
        position: relative;
        height: 275px;
    }    
	#petprofiletextadopt {
        float: none;
        width: 100%;
        position: absolute;
        top: 200px;
        height: 50px;
    }
    #petholder {
        float: none;
        width: 100%;
        position: absolute;
        top: 0;
        height: 200px;
    }
    #embedmain {
        float: none;
        position: relative;
    }
    #stats #statsleft,
    #stats #statsright {
        float: none;
        width: 100%;
    }
    #stats {
        height: auto;
    }
    
    
    /* pet editor,  breeder, maker */
    #petmakermain {
        display:flex;
        flex-flow:column-reverse nowrap;
        height:auto;
    }
    #petpreview {
        width: 100%;
        top: unset;
        height: 200px;
		margin-bottom:20px;
      }
	#petmodifier {
        float:none;
        width:100%;
        position: unset;
        top: unset;
    }
    
    .editequip table td {
		width:100%;
		text-align:center;
		display:table-row;
	}
            
    /* thanks to wintryKat for helping with this part */
	#headerlogo { 
		text-align: center;
		width: 100%;
		height: 55px;
		vertical-align:bottom;
		z-index:-3;
	}

	#logotext { 
		height: auto;
		right: auto !Important;
		width: 60% !important;
		max-width: 249px;
		max-height:40px;
		margin-left: -2.4em;
		display: inline-block;
		top: 16%;
	} 

	#logoimg { 
		float: left;
		margin-left: 0.6em;
		bottom: -10px; 
	}
	
}
@media screen and (max-width:425px) {
    #content {
       padding: 10px;
    }
    
    #main {
		margin:20% auto 5% auto;
	}
}