/*
These media queries should go from widest to narrowest and from least specific
to most specific.
In portrait mode we use the width as the factor in our font-size calculation.
In landscape mode we use the height. Landscape mode loses the most pixels to widgets.
*/

/* these two queries are for debugging only */
@media only all and (orientation:portrait) {
    div#stage {
        xborder: 2px dotted #0f0;
    }
}
@media only all and (orientation:landscape) {
    div#stage {
        xborder: 2px dotted #00f;
    }
}

/* generic small display 80x160 */
@media only all and (min-width: 80px) and (min-height:160px) and (orientation:portrait) {
    div#stage {
        font-size:2px;
    }
}
@media only all and (min-width: 160px) and (min-height:80px) and (orientation:landscape) {
    div#stage {
        font-size:2px;
    }
}

/* generic small display 160x240 */
@media only all and (min-width: 160px) and (min-height:240px) and (orientation:portrait) {
    div#stage {
        font-size:4px;
    }
}
@media only all and (min-width: 240px) and (min-height:160px) and (orientation:landscape) {
    div#stage {
        font-size:6px;
    }
}


/* Generic media queries valid in portrait mode only to maximize height */

@media only all and (min-width: 320px) and (orientation:portrait) {
    div#stage {
        font-size:8px;
    }
}

@media only all and (min-width: 480px) and (orientation:landscape) {
    div#stage {
        font-size:7px;            
    }
}


@media only all and (min-width: 400px) and (orientation:portrait) {
    div#stage {
        font-size:10px;
    }
}

@media only all and (min-width: 480px) and (orientation:portrait) {
    div#stage {
        font-size:12px;
    }
}
@media only all and (min-width: 540px) and (orientation:portrait) {
    div#stage {
        font-size:13px;
    }
}

@media only all and (min-width: 600px) and (orientation:portrait) {
    div#stage {
        font-size:15px;
    }
}

@media only all and (min-width: 640px) and (orientation:portrait) {
    div#stage {
        font-size:16px;
    }
}

@media only all and (min-width: 800px) and (orientation:portrait) {
    div#stage {
        font-size:20px;
    }
}

/* the largest windows don't care about orientation */
@media only all and (min-width: 1024px) {
    div#stage {
        font-size:25px;
    }
}

@media only all and (min-width: 1250px) {
    div#stage {
        font-size:30px;
    }
}
@media only all and (min-width: 1280px) {
    div#stage {
        font-size:30px;
    }
}
@media only all and (min-width: 1920px) {
    div#stage {
        font-size:30px;
    }
}
@media only all and (min-width: 4000px) {
    div#stage {
        font-size:30px;
    }
}


/* end of generic queries. Start of device targeted */

/* iPhone and iPod 320x480  */
@media only all and (device-width: 320px) and (device-height:480px) and (orientation:portrait) {
    div#stage {
        font-size:8px;
    }
}
@media only all and (device-width: 480px) and (device-height:320px) and (orientation:landscape) {
    div#stage {
        font-size:7px;
    }
}

/* iPad 1536 x 2048  */
@media only all and (device-width: 1536px) and (device-height:2048px) and (orientation:portrait) {
    div#stage {
        font-size:38px;
    }
}
@media only all and (device-width: 2048px) and (device-height:1536px) and (orientation:landscape) {
    div#stage {
        font-size:50px;
    }
}

/* iPhone 320x640  */
@media only all and (device-width: 320px) and (device-height:640px) and (orientation:portrait) {
    div#stage {
        font-size:8px;
    }
}
@media only all and (device-width: 640px) and (device-height:320px) and (orientation:landscape) {
    div#stage {
        font-size:10px;
    }
}

/* iPad Mini and original iPad 768x1024 */
@media only all and (device-width : 768px) and (device-height : 1024px) and (orientation : portrait) {
    div#stage {
        font-size:19px;
    }
}
@media only all and (device-height : 1024px) and (device-width: 768px) and (orientation : landscape) {
    div#stage {
        font-size:23px;
    }
}

/* Samsung Galaxy Tab II  600x1024 */
@media only all and (device-width : 600px) and (device-height: 1024px) and (orientation:portrait) {
    div#stage {
        font-size:11px;
    }
}
@media only all and (device-width : 1024px) and (device-height: 600px) and (orientation:landscape) {
    div#stage {
        font-size:11px;
    }
}


/* Samsung Galaxy Reverb  480x800 */
@media only all and (device-width : 480px) and (device-height: 800px) and (orientation:portrait) {
    div#stage {
        font-size:8px;
	
    }
}
@media only all and (device-width : 800px) and (device-height: 480px) and (orientation:landscape) {
    div#stage {
        font-size:9px;
		
    }
}

/* iPhone 5 partial 320 x 568 */
@media only all and (device-width : 320px) and (device-height: 568px) and (orientation:portrait) {
    div#stage {
        font-size:8px;
    }
}
@media only all and (device-width : 568px) and (device-height: 320px) and (orientation:landscape) {
    div#stage {
        font-size:7px;
    }
}