/* iPhone 5 Safari approx. width = 320px portrait; 560px landscape */

/* Logo, Left, Top Panels and Menus */
@media screen and (max-width: 640px) {
Body {width: 100%;}
}

/* Logo, Left, Top Panels and Menus */
@media screen and (max-width: 640px) {
tr#PanelTop {background-color: #FFFFE0;}
img#LogoSwoop {display: none;}
img#LogoClean {display: inline;}
div#LTopMenuToggleDiv{display: inline;}
td#PanelLeft {display: none;}
td#TopMenuMiddle {display: none;}
img#LogInBtn {display: none;}
.topmenulinks :all{
	FONT-SIZE: 10pt;
	line-height: 1.8;
	margin: 1px;
	}
#PanelTopMidRt{
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #EAC3A5;
	}
#PanelTopLeft{
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #EAC3A5;
	}
}
@media screen and (min-width: 640px) {
img#LogoSwoop {display: inline;}
img#LogoClean {display: none;}
div#LTopMenuToggleDiv{display: none;}
#LangBtns2 {display: none;}
#LTopMenu  {display: none;}
#LBtmMenu  {display: none;}
.WideHide {display: none;}
}
/* Banner */
@media screen and (max-width: 800px) {
	img#Banner {display: none;}
}

/* Learn Language X pages Header section - Reduce size of logo,  Titles, Profile Pics */
@media screen and (max-width: 560px) {
H1 {FONT-SIZE: 16pt;}
H2 {FONT-SIZE: 10pt;}
img#Logo1 {
    max-width: 80px;
    height: auto;
	}
img.HomePic {
    max-width: 80px;
    height: auto;
	}
}


/* Page Quadrant Layout */
@media screen and (max-width: 580px) {
table.LayoutQuad > tbody > tr > td { display: block; padding: .6rem; }
td.LayoutQuadUL {width: 95%;}
}

/* List Menus - the large table of links by language, country, etc. */
@media screen and (max-width: 580px) {
table.TblListMenu {width: 100%;}
table.TblListMenuCol {border-spacing: 3px;} /* Cell padding */
}

/* Plain Text Menu Links (eg. on Acoount page) - Add spacing on small screen for tapping */
@media screen and (max-width: 580px) {
.LinkTextMenu{line-height: 150%;}
}

/* Data Tables - the wide tables of data with multiple columns */
@media screen and (max-width: 580px) {
table.TblDataRecs > thead { display: none; }
table.TblDataRecs > tbody > tr > td { display: block; padding: .6rem; }
table.TblDataRecs > tbody > tr > td { background: white;}
table.TblDataRecs > tbody > tr > td:first-child { background: #FAF0E9; color: black; }
table.TblDataRecs > tbody > tr > td:before {
	content: attr(data-th); font-weight: bold;
	display: inline-block; /*width: 6rem;*/
	}
}

/* Input Form Tables - Wide tables due to left column labels and wide pull-down menus 
   - no column headings */
@media screen and (max-width: 600px) {
table.TblInputForm > tbody > tr > td { display: block; padding: .6rem; }
table.TblInputForm > tbody > tr:not(.SectionHead) > td { background: white;}
table.TblInputForm > tbody > tr:not(.SectionHead) > td:first-child { background: #FAF0E9; color: black; }
tr.SectionHead {background-color: #BEBEBE;}
table.TblInputForm > tbody > tr > td {border: 0px solid gray;}
table.TblInputForm  {border-collapse: collapse;}
}
/* Input Form Tables (Simple Style [no inner table with border]) - Wide tables due to left column labels and wide pull-down menus 
   - no column headings */
@media screen and (max-width: 640px) {
table.TblInputFormSimple > tbody > tr > td { display: block; padding: .6rem; }
table.TblInputFormSimple > tbody > tr.spacer { display: none;}
}
@media screen and (min-width: 640px) {
table.TblInputFormSimple {width: 570px;;}
}

/* Wide Tables that makes no sense to transpose or stack vertically - Contain with scrollable DIV */
@media screen and (max-width: 640px) {
	DIV.WrapTblScroll{width: 570px;}
	DIV.WrapTblScrollText{display: inline;}
}
@media screen and (max-width: 460px) {
	DIV.WrapTblScroll{width: 420px;}
	DIV.WrapTblScrollText{display: inline;}
}
@media screen and (max-width: 400px) {
	DIV.WrapTblScroll{width: 380px;}
	DIV.WrapTblScrollText{display: inline;}
}
@media screen and (max-width: 360px) {
	DIV.WrapTblScroll{width: 320px;}
	DIV.WrapTblScrollText{display: inline;}
}
@media screen and (max-width: 300px) {
	DIV.WrapTblScroll{width: 280px;}
	DIV.WrapTblScrollText{display: inline;}
}

/* Items that are half width of the page, eg. text fields in 2-column input tables, like in LessonTableEdit.asp */
.WidthHalf{width: 360px;}
@media screen and (max-width: 640px) {
	.WidthHalf{width: 180px;}
}

/* Any Table Requiring Transpose for Narrow Screen - no column headings */
@media screen and (max-width: 580px) {
table.TblTranspose > tbody > tr > td { display: block; padding: .3rem; }
}

/* Any content requiring limit to width=570px maximum. Allow to float when less screen  */
@media only screen and (min-width : 640px)  {
	.WidthMaxLim {width: 570px;}
}

/* Prevent mobile safari auto text resize */
@media only screen and (min-width : 320px) and (max-width : 640px) {
	body {-webkit-text-size-adjust: none;}
}

/* Other images that need resizing -  */
@media screen and (max-width: 460px) {
img#ChatCompanion {
    max-width: 310px;
    height: auto;
	}
}