/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

/*
	body {
		background-color: blue;
	}
*/

	/* pagewrap */
	#pagewrap {
		width: 95%;
	}

	/* content no sidebars */
	#content-no-sidebars {
		width: 92%;
		padding: 3% 4%;
	}

	/* content wide */
	#content-wide {
		width: 92%;
		padding: 3% 4%;
	}
	
	/* content */
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	/* sidebar */
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

	.loginOptions {
		margin: 0.5em 0 0 0;
	}

	#site-logo-left a {
		font-size: 28px;
	}

	/* header */
	#header {
		height: auto;
	}

	/* main nav */
	#main-nav {
		position: static;
	}

	/* site logo */
	#site-logo {
		margin: 20px 10px 5px 70px; 		
		position: static; 
		padding-top: 10px;
		font-size: 28px;
	}

	#site-logo-left {
		margin: 20px 10px 5px 0; 
		position: static; 
		font-size: 28px;
	}

	/* site logo */
	#site-logo a {
		font-size: 28px;
	}
	#site-logo-left a {
		font-size: 28px;
	}

	/* site crest */
	#site-crest {
		width: 60px;
		top: 0;
	}

	/* site description */
	#site-description {
		margin: 0 0 15px 70px;
		position: static;
	}
	#site-description-left {
		margin: 0 0 15px;  
		position: static;
	}

	div.progbox{
		max-width: 100%;
		width: auto;
		clear: both;
		float: none;
		margin-top: 20px;
	}

	#content-no-sidebars {
		width: auto;
		float: none;
		padding: 20px 10px;
	}

	#content-wide {
		width: auto;
		float: none;
		padding: 20px 10px;
	}

	/* content */
	#content {
		width: auto;
		float: none;
		/* margin: 20px 0; */
	}

	#content, #content-no-sidebars, #content-wide {
		margin-top: 15px;
		margin-bottom: 15px;		
	}

	/* sidebar */
	#sidebar {
		width: 100%;
		margin: 0;
		float: none;
	}
	#sidebar .widget {
		padding: 3% 4%;
		margin: 0 0 10px;
	}

	label, .faux-label {
		text-align: left;
	}

	.faux-label {
		margin-bottom: 0;
	}
	
	label.error {
		width: auto;
		margin-bottom: -3px;
	}
	
	.halfleft, .halfright {
		width: 42%;
	}

	.show-large {
		display: inline;
	}

}


/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

/*
	body {
		background-color: green;
	}
*/
	/* search form */
	#searchform {
		position: absolute;
		top: 28px;
		right: 0;
		z-index: 100;
		height: 40px;
	}
	#searchform #s {
		width: 70px;
	}
	#searchform #s:focus {
		width: 150px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}

	.halfboxleft, .halfleft {
		width: auto; 
		height: auto;
		float: none;
	}

	.halfboxright, .halfright {
		width: auto; 
		height: auto;
		float: none;
	}

	menu ul, menu ol {
		margin: 1em 0 1.4em 1em; 
	}

	textarea {
		clear: both;
		float: none;
	}

	#mainmenu {
		margin-top:-10px;
	}

	#menu-search {
		float:none;
	}
	#menuview {
		float:none;
	}

	.show-medium {
		display: inline;
	}
	.show-large {
		display: none;
	}

	.right-left {
		text-align: left !important;
	}

	.center-left {
		text-align: left !important;
	}

	.long-label-right {
		width: 88%;
	}

}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

	h1 {
		line-height: .8em;
	}

	h2, h3, h4, h5, h6 {
		font-size: 95%;
	}

	/* site logo */
	#site-logo {
		margin: 20px 10px 5px 60px; 		
		font-size: 18px;
	}

	#site-logo a, #site-logo-left a {
		font-size: 18px;
	}

	/* site description */
	#site-description, #site-description-left {
		font-size: 90%;
		padding-top: 5px;
	}

	#site-description {
		margin: 0 0 15px 60px;
		position: static;
	}

	textarea {
		width: 90%;
	}

	.splashblock {
		clear: both;
		width: auto;
		float: none;
	}

	/* site crest */
	#site-crest {
		width: 50px;
		top: 0;
	}

	label, .faux-label {
		min-width: 50%;
		width: auto;
	}

	.noshrink label {
		width: 30%;
	}
	
	.formfloats label {
		width: auto;
	}

	.formfloatsautowidth {
		display: block;
		float: none;
	}
	
	.formfloatsautowidth label {
		margin-left: 0px;
	}
	
	.under-inputs, input[type=submit].under-inputs, input[type=reset].under-inputs, input[type=button].under-inputs {
		margin-left:0;
	}
	
	input:not([type=checkbox]):not([type=radio]), .faux-input {
		clear: left;
	}

	.ui-menu { width: 250px; }
	.ui-corner-all { border-radius: 0px; }
	.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { 
		display: block;
	}

	.show-small {
		display: inline;
	}

	.long-label-right {
		width: 82%;
	}

}

/************************************************************************************
larger than 481
*************************************************************************************/
@media screen and (min-width: 481px) {

	.ui-menu { width: 350px; }
	.ui-corner-all { border-radius: 0px; }
	.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { 
		display: block;
	}

}

/************************************************************************************
Opera has a bug that makes em and % fonts too big so default to px instead
Actually, not a bug in that it uses the user's OS accessibility setting (font bump up)
*************************************************************************************/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

	body { font-size: 12px; }

}