/*
CodeStepByStep styles for mobile devices
*/

@media only screen and (max-device-width: 800px) {
	body {
		/*margin: 0;*/
		margin-top: 3em;
		padding: 2px;
	}
	
	.mobileonly {
		display: inherit;
	}
	
	.breadcrumbs {
		margin-bottom: 1em;
	}
	
	.columnname {
		margin-top: 1em;
	}
	
	h1 img {
		max-width: 90%;
	}
	
	img {
		max-width: 90%;
	}
	
	#problemsarea, #centralarea, #problemsform, #problemarea, .flash {
		/*
		min-width: 90% !important;
		max-width: 95% !important;
		margin: 0 !important;
		width: 95% !important;
		*/
	}
	
	#bookimagelink {
		float: none !important;
		display: block;
		min-width: 50%;
		max-width: 95%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
	}
	
	.flashwrapper {
		margin-bottom: auto !important;
	}
	
	.helptips {
		font-size: smaller;
		margin-left: 0;
		margin-right: 0;
		max-width: 90%;
	}
	
	.inputcontainer, .inputcontainer th {
		width: auto;
	}
	
	.inputcontainer label,
	.testresultrow .problemnumber,
	.testresultrow .probleminfoheading,
	.problemresult .problemnumber,
	.problemresult .probleminfoheading {
		display: block;
		float: none;
		margin-top: 0.2em;
		text-align: left;
	}

	.inputcontainer > div {
		margin-left: 0;
	}
	
	#categories h4 {
		margin-left: 0 !important;
	}
	
	#categories ul {
		margin-left: 3pt !important;
		padding-left: 0 !important;
	}
	
	#problemarea {
		margin-right: 0 !important;
	}
	
	#solution {
		margin: 0 !important;
	}
	
	#solution,
	#linenumbers,
	.linenumbers {
		font-size: inherit;
	}
	
	#mainbodyarea {
		margin-top: 1em !important;
	}

	.problemname, .problemexpected, .problemactual {
		word-wrap: break-word !important;
	}

	.problemnavigation {
		font-size: 1em;
	}
	#topmessagesarea {
		margin-top: 0 !important;
	}
	
	.unexpectedconsoleoutput {
		margin-left: 0;
	}
	
	#userinfoarea {
		font-size: larger;
		top: 0;
	}
	
	#useractionsarea {
		font-size: larger;
		line-height: 1.5em;
	}
	
	#userinfoarea #useractionsbesideslogout,
	#controlsarea,
	.floatingsearchform,
	#likelink,
	.nonmobile {
		display: none !important;
	}
	/* #showsolutionlink, */
	
	#userinfoarea #userimagearea {
		display: inline;
		/*float: left;*/
	}
	
	#userinfoarea #logoutarea {
		display: inline;
		float: right;
	}
	
	#userinfoarea #useractionsarea {
		display: inline;
	}
	
	.usertext {
		display: none;
	}
	
	.statuslabel {
		width: 6em;
	}
	
	.predescriptionrow {
		white-space: nowrap;
	}
	
	#testresults td,
	#testresults th,
	#testresults tr {
		display: block;
	}

	#testresults tr {
		margin-bottom: 1em;
	}
}