/************************************************************************************
selectnav.js styles
*************************************************************************************/

/* default style */
.selectnav { display: none; }

/* small screen */
@media screen and (max-width: 550px) {
  .js #main-nav { display: none; }
  .js #sec-nav { display: none; }
  .js .selectnav { display: inline; width: 300px; margin: 5px; padding: 7px; border: 2px solid darkgreen; }
	.mobilehide { display: none; }
	#topmenu { float: left; }
	#main { margin-top: 100px; }
}

/************************************************************************************
smaller than 1200
*************************************************************************************/
@media screen and (max-width: 1200px) { 
	#main {
		width: 960px;
	}
}

/************************************************************************************
smaller than 700
*************************************************************************************/
@media screen and (max-width: 700px) { /* We actually want this to kick in slightly wider */

	body {
	font-size: 1.2em;
	line-height: 1.2em;
	}

	input[type="text"] {
	width: 94%;
	}
	
	h2 {
		    line-height: 1.3em;
	}

	/* main */
	#main {
		width: 100%;
	}
	
	.half-left { /* these will be moved further down to phone sizes once i've done the other queries */
		width: 100% !important;
	}
	.half-right {
		width: 100% !important;
	}
	
	.positions2 {
		width: 100%;
	}
	.positions3 {
		width: 100%;
	}	
}