/* site_mobile.css - Overrides Site.css upon screen going narrower */  
#SiteBackgroundDiv { /*  BODY tag */
	font-size: 17px;
 	margin:0;
	overflow-x:hidden;
	overflow-x: hidden;
} 
#SiteBodyDiv { /* main template */
	width:100%; 
	overflow-x:hidden;
}   
.extremelybig {
font-size:30px;
} 
/* make mobile table */
table.makeMobile {width:100%;}
table.makeMobile thead {display: none;}
table.makeMobile tbody tr:nth-of-type(2n) { /* start by undoing any stripped rows */
	background-color: transparent;
} 
/* table.makeMobile tr:nth-of-type(2n) {background-color: inherit;} */
table.makeMobile tr td:first-child { /* make these same as thead th  from main site.css */
	background-color:#018DB1;
	font-weight:bold;
	color:#ffffff; 
	padding:4px 6px 4px 6px;
}
table.makeMobile tbody td {display: block;  text-align:center;}
table.makeMobile tbody td:before { 
	    content: attr(data-th); 
	    display: block;
	    text-align:center;  
}
table.makeMobile th,
table.makeMobile td { 
	/* font-size:smaller; */
	padding:8px 4px 8px 4px;
}
  
  
.main257 {
width:100%;
}
#triangle-up-big-lightblue {
display:none;
}
.place257 {
left:0;
top:0;
position:static;
width:60%; 
margin:0 auto 0 auto;
} 
.whiteSpot257 { 
width:95%;
}
.whiteSpot257 p {
margin:0;
font-size:18px;
}

.bodyThird {
width:100%;
float:none; 
}
.bodyThirdLast {
width:100%;
float:none; 
}
.bodyTwoThirds { 
width:100%;
float:none; 
}
.bodyHalf {
width:100%;
float:none; 
}
.bodyHalfTablet { /* changes to 100% on tablets as well as mobile */
width:100%;
float:none; 
}

.bodyFourth {
width:100%;
float:none; 
}
.bodyThreeFourths {
width:100%;
float:none; 
}
 
.bodyPad {
padding:10px; 
}
.bodyPadSmall {
padding:5px;
}

.bodyPadTiny {
padding:3px;
}
.bodyPadSmall p {
	/* margin:1px 0 1px 0; */
}
.textJustify {
	text-align:initial;
}
/* displays only on mobile version */
.mobileOnly {
display:block; 
} 
span.mobileOnlySpan {
visibility:visible;
}
 /* displays only on full site version */
.noMobile {
display:none;
}


 
#PageBodyDiv { 
width:100% !important; 
overflow-x:hidden; 
font-size:18px;
}
  
.err {  
	margin: 7px auto 7px auto;
	width:95%; /* overrides 98% */
	overflow-x:hidden;
}
.msg {
	margin: 7px auto 7px auto;
	width:95%; /* overrides 75% */
	overflow-x:hidden;
} 

/* font size overrides  */ 
.VLgHeadiTxt { font-size:24px; } 
.LgrHeadiTxt { font-size:21px; } 
.LgHeadiTxt { font-size:18px; }  
.MdHeadiTxt { font-size:17px; }   
.SmHeadiTxt { font-size:18px; }   

.NormTxt { font-size:18px; }    
.SmTxt {   font-size: 17px;  }   
.TinyTxt {  font-size: 16px; }    

H1 { font-size:21px; }  /* Used for Page Title - font size is Page Body Font Size + 6 pixels */
H2 { font-size:19px; } /* Font size is Page Body Font Size + 3 pixels */
H3 { font-size:18px; } /* Font size is Page Body Font Size + 2 pixels */



.headDiv {
width:auto;
border-radius:0;
-moz-border-radius:0;
padding:5px; 
border:0;
margin:0 auto 0 auto;
}
 
table.header tr td.logoDiv {  
padding-right:15px;
} 
table.header tr td.startDiv,
table.header tr td.isae,
table.header h2.isae {
display:none;
}  



table.header tr td.headerPgm {
vertical-align:top;
}  
.startDivMobile {  
display:block;

} 
 
a.startButton,
div.startButton { 
padding:5px;
}
a.logoutButton { 
float:none; 
margin-right:0;
padding:5px;
}
a.refreshButton {   
padding:4px;
}
p.refreshNote {
text-align:center;
color:white;
font-size:15px;
margin:10px 10px 10px 10px
}

.logoDiv {
 margin-right:0px;
 }
.logoDiv img {
 width:90px;
 height:auto; 
 }
   
.startChapterContainer {
	padding:0;
	margin:0;
	border:0;
	border-radius:0;
	-moz-border-radius:0;
	width:100%;
}
table.start {
width:100%;
} 

h1.smChapter { 
font-size:21px;  
padding:5px;
border-radius:0; /* so it does not look like a button on a phone */
-moz-border-radius:0; /* so it does not look like a button on a phone */
margin-bottom:15px;
margin-right:5px;
}
   
td.nobrsmall { /* for page 126 worksheet */
white-space:nowrap;
font-size:14px;
padding:4px;
}
td.nobrnorm { /* for page 126 worksheet , normal size, still 4 padding*/
padding:4px;
}  

.brownSpot { 
width:80%; 
} 
.smInstructions {
font-size:17px;
}

.classVideo {
width:95%;
height:261px; 
} 
.classVideo.vertical{
	width:80%;
	height:400px;
}

div#mobileTabletInstruction {
display:block;
}
.wimpy-cell {   
padding:2px;
overflow:hidden;
} 
 
 

 

div.exerciseblock {
padding:5px;  
}
h1.exerciseblock {
font-size:20px;
padding:5px;  
}
.formfield INPUT[type="button"] , 
.formfield INPUT[type="submit"] {
padding:5px;
font-size:19px;  
}
.formfield TEXTAREA.halfsize {
	width:80%;
}

 /* on mobile version: causes image to display across mobile phone width, rather than floating left or right*/
img.bodyImg {
float:none !important;
width:100% !important;
height:auto !important;
overflow:hidden;
margin-top:20px !important;
margin-bottom:8px !important;
margin-left:0 !important;
margin-right:0 !important;
border:0;
}
  

div.smCategoryButtonContainer {
width:98%;
border-radius:3px;
-moz-border-radius:3px; 
margin:1px 0 10px 0;
padding:4px 2px 4px 2px; 
}
div.smCategoryButtonContainer table tr td.buttons {  
	white-space:normal;
}
a.smCategoryButton {
 /* colors change per theme */ 
display:block; /* changes to 1 button per line */
/* min-width:270px !important; */
min-width:85% !important;
width:85% !important;
overflow-x:hidden;  
margin:8px auto 8px auto;
}


a.smCategoryButtonN,
a.smCategoryButtonEndcap { 
	margin:15px 5px 15px 5px; 
	font-size:17px;
	box-shadow: 1px 1px 1px #999999;
	-moz-box-shadow: 1px 1px 1px #999999;
	-webkit-box-shadow: 1px 1px 1px #999999;
} 
div.jumpto { 
margin:15px 8px 15px 8px; 
font-size:16px;
}
div.jumpto span {
 font-size:16px !important;
}
div.jumpto SELECT { 
font-size:16px;
}
 
.sm-item-box {   
width:95%;
margin:0 auto 0 auto;
padding:5px; /* this with bodyPadSmall 5px on each side, makes 10 px on each side of photo on mobile */
border-radius:7px;
-moz-border-radius:7px;  
border:0;
}
p.pageNumberTop { 
 font-size:17px;  
 margin:10px 0 10px 0; 
}
p.mobileTitleTop {
display:block;
font-size:17px;  
margin:10px 0 10px 0; 
font-weight:bold;
}

.stampDiv {
padding:10px;
margin:0 auto 0 auto;
width:180px;
}
.stamp {
font-size:25px;
}

/* for login form */
.loginDiv { 
width:97%; 
border-radius:5px;
-moz-border-radius:5px;
padding:5px;
} 
table.loginForm td input[type="submit"] { 
padding:5px;
font-size:19px;  
}
#mobileTop {
	visibility:visibile; 
}
.formMsg {
display:block;
width:100%;
height:56px;
padding:0 0 2px 0;
margin:0 0 5px 2px; 
border-bottom:1px solid #cccccc;
line-height:normal !important;
}
.formMsgTxt { 
display:block;
color:green; 
font-weight:bold;
font-size:12px;   
font-family:arial,helvetica,sans-serif !important;
line-height:normal !important;
}