/* basic routines for mobile friendly CSS - 13-Feb-2017 */

#page-header-mini-menu-trigger {
	display: none;
}
/*
#page-header-mini-menu-trigger p
{
	text-align: right;	
	padding: 0;
	height: 20px;
	display: table-cell;
   vertical-align: top;
}
*/
#page-header-mini-menu-trigger a {
	color: #a23900;
	font-weight : bold;
}

@media screen and (max-width: 1023px) {
body.flexplay #whole-page {
	border: 0;
	box-shadow: none;
}
}

/*********************************************************
				900
*********************************************************/
@media screen and (max-width: 900px) {
#special1 {
	top: 12px;
	right: 10px;  /* GLOSS STYLE (top was 40px) */
}
div#page-wrapper,  /* wraps whole page except main menu bar */ #page-columns-wrapper /* immediately follows #page-wrapper, above */ {
	max-width: 98%;
	min-width: 98%;
	padding: 0;
}
#page-right-column {
	display: none;
}
#page-center-column {
	max-width: 100%;
}
/* Need to move rather than delete */

div#page-header-bookmark, div#page-header-search {
	display: none;
}
#page-footer-content {
	min-width: 0
}
div#page-header-content {
	max-width: 100%;
	min-width: 0;
	height: auto;
}
div#page-header-wrapper {
	max-width: 98%;
	min-width: 0;
}
/* box stuff use to be here,now in 760 */

} /* End of 900 */

/*********************************************************
				786
	786 due to the width of the box and main menu
*********************************************************/

@media screen and (max-width: 786px) {
/*
	 	turn off main menu
	    and turn on mini menu
	 */
#AWMEL0 {
	display: none;
}
div#page-header-icon_fb {
	top: 26px;
} /* raise the fb icon up a bit */
#page-header-mini-menu-trigger {
	display: block;
	position: absolute;
	top: 110px;
	left: 20px;
	font-style: italic;
}
div#page-header-stuff1 {
	display: block;
	position: absolute;
	top: 86px;
	width: 100%;
	left: 80px;
	right: 0;
	overflow: hidden;
}
div#page-header-stuff1 div, div#page-header-stuff1 p, div#page-header-stuff1 form {
	display: inline;
}
div#page-header-bookmark, div#page-header-search {
	display: inline;
	position: static;
	/*	top: 0; left: 0; right: 0;*/
}
/*	
	div#page-header-search
	{
		left:			300px;
		top:			86px;
	}
*/
	/*
	div#page-header-bookmark, 
	div#page-header-search
	{
		display: 	block;
		position:	absolute;
		top:			86px;
		left:			160px;
	}
	div#page-header-search
	{
		left:			300px;
		top:			86px;
	}
	*/
div#page-header-search input {
	width: 120px;
}
/*-------------------------------
			Box display removed
	-------------------------------*/	
div.box4, div.box4-content {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
div.box4-content {
	padding: 10px 0 0 0;
}
div.box4-content table {
	max-width: 98%;
}
div.box4-content img, div.box4-content table img {
	max-width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}
/*-----------------------------------------------------------------*/
	/* from 'm-page-boxes.css' */
		/* These remove the lines around the main center column box */
.box4-4, .box4-8, .box4-5, .box4-7, .box4-6, .box4-1, 		/* These remove the shadows around the main center column box */  .bt4, .bt4 div, .bb4, .bb4 div, .i14, .i24, .i34 {
	background: none;
}
.i24 {
	padding: 0;
	margin: 0
}
/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i34:after {
	content: ".";
	display: block;
	height: 0px;
	visibility: hidden;
}
/*-----------------------------------------------------------------*/

h1, h2, h3, h4 {
	font-size: 88%;
}
div#content-page-title h1 /* h1 used as the title of the page */ {
	font-size: 110%;
}
div.div_related_horz div.center-block p.div_related_section_head, div.div_related_horz div.div_third_r p.div_related_section_head, div.div_related_horz div.div_third_enclose p.div_related_section_head {
	text-indent: 0;
	text-align: left;
	font-size: 90%;
	margin-left: 1em;/*		margin-bottom: -1em; */
}
div.div_related_horz {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	padding: 0;
	margin: 0;
}
div.div_related_horz div.div_third_enclose p.div_related_section_head {
	margin-bottom : -1em;
}
div.a_div_how_to {
	max-width: 98%;
	width: 98%;
	min-width: 98%;
	margin: 0 auto !important;
}
div#page-header-logo a img {
	max-width: 70%;
	width: 70%;
	min-width: 0;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding: 0.5em 0 0 1em;
}
#detail {
	width: 98%;
	max-width: 98%;
}
#detail .center-block {
	width: 98%;
	max-width: 98%;
	min-width: 0px;
}
#detail .center-block form textarea {
	width: 98%;
	max-width: 98%;
	min-width: 0px;
}
#colorbox .div_related_horz {
	background-color: transparent;
	border: none;
	font-size: 90%;
}
/* for embedded swf files for example */
	/*  See /summaries/rename-files.htm for how it works*/
div.media_wrapper, div.media_wrapper object embed {
	width: 100%;
	max-width: 100%;
	min-width: 0px;
	margin: 0;
	padding: 0;
}
/* for the form in \uninstall\uninstall.htm */
textarea[ name="reason"], input[name="email"] {
	max-width: 100%;
	width: 100%;
	min-width: 100%;
}
textarea[name="body"], input[name="email_addr"] {
	max-width: 100%;
	width: 100%;
	min-width: 100%;
}
} /* End of 786  */

/*********************************************************
				720   
@media screen and (max-width: 720px) {
} 
*********************************************************/
/* Droid incredibe horizontal orientation */




/*********************************************************
				620
**********************************************************/
@media only screen and (max-width: 620px) {
/*------------------------------------------------------------------
	   These next two adjust padding (moves the text to the right)
	   This effect can be seen at the top of the mini-menu (site-map).
	--------------------------------------------------------------------*/
.div_related_horz td {
	text-indent: -14px !important;
}
.div_related_horz td:nth-child(2) {
	padding-left: 2em;
}
/*****************************************************
	*              BOTTOM OF PAGE STUFF
	******************************************************/		
/*
	#page-footer .div_third_enclose { 
		width: 		96%; 
		float: 		none;
	}
	#page-footer .div_third_l {
		margin: 		0;
		padding:    0;
		width: 		96%; 
		float: 		none;
	}
	#page-footer .div_third_m {
		margin: 		0;
		padding:    0;
		width: 		96%; 
		float: 		none;
	}
	#page-footer .div_third_r {
		margin: 		0;
		padding:    0;
		width: 		96%;
		float: 		none;
	}
*/	
/*	#page-footer .div_third_l p, .div_third_m p, .div_third_r p { font-size: 0.8em; }*/

} /*  End of 620 */

/*********************************************************
				600      600
*********************************************************/
@media screen and (max-width: 600px) {
div#page-header-icon_fb {
	display: none;
}
div#page-header-logo {
	position: relative;
	left: auto;
	max-width: 426px;
	width: 98%;
	min-width: 0;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}
}/* End of 600  */

/*********************************************************
				500
*********************************************************/
@media screen and (max-width: 500px) {
h1, h2, h3, h4 {
	font-size: 80%;
}
}/* End of 500  */