#mobile_menu{
	display: none;
}

/*Portrait Tablet Exceptions to adjust padding in content areas.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px), (max-width: 1024px) and (min-width: 768px) {
	body {
		padding-left: 0px;
		padding-right: 0px;
	}
	#container{
		width: 100%;
	}
	
	/* == header == */
	#header .left,
	#header .right {
		width: 50%;
	}
	#social{
	}
	#logo img{
		max-width: 96%;
		height: auto;
		padding: 0 2% 0 2%;
	}
	
	/* == nav == */
	.moduletable_menu{
		display: none;
	}
	#mobile_menu{
		display: block;
		background: #01AEF0;
		color: #fff;
		padding: 10px 2%;
		width: 100%;
		margin-left: -2%;
		text-transform: uppercase;
		text-align: right;
	}
	#mobile_menu a{
		color: #fff;
	}
	#mobile_menu .lines{
		display: inline;
		float: right;
		margin-left: 5px;
	}
	#mobile_menu .lines span.nav-line {
		display: block;
		height: 3px;
		width: 20px;
		margin-bottom: 4px;
		background: #fff;
	}
	#navigation{
		margin-top: 10px;
	}
	#navigation ul{
		border-bottom: 1px solid #01AEF0;
	}
	#navigation .nav.menu{
		margin-top: 10px;
	}
	#navigation ul li {
		list-style: none;
		margin-bottom: 5px;
		font-weight: bold;	
	}
	#navigation ul li a{
		display: block;
	}
	#navigation ul li img{
		display: none;
	}
	#navigation ul ul{
		margin-left: 3px;
		border-bottom: 0px;
	}
	
	/* == content == */
	#content .left,
	#content .right {
		width: 96%;
		padding: 0 2% 0 2%;
		float: left;
	}
	#content .right{
		padding-top: 10px;
	}
	
	#content .callout ul li.green,
	#content .callout ul li.purple,
	#content .callout ul li.orange{
		margin-right: 10px;
	}

}
/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, 
the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* this is a hack to allow fixed width on everything EXCEPT for phones (below) */
@media only screen and (min-device-width : 680px){
}


/* For Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. */
@media only screen and (min-width: 0px) and (max-width: 679px) {

	body {
		padding-left: 0px;
		padding-right: 0px;
	}
	#container{
		width: 100%;
	}
	
	/* == header == */
	#header .left,
	#header .right {
		width: 100%;
		float: left;
	}
	#social{
		position: absolute;
		right: 0px;
		top: 0px;
		padding: 0px 0 0px 0px;
display: none;
	}
	#logo img{
		max-width: 96%;
		height: auto;
		padding: 0 2% 0 2%;
	}

	/* == nav == */
	.moduletable_menu{
		display: none;
	}
	#mobile_menu{
		display: block;
		background: #01AEF0;
		color: #fff;
		padding: 10px 2%;
		width: 100%;
		margin-left: -2%;
		text-transform: uppercase;
		text-align: right;
	}
	#mobile_menu a{
		color: #fff;
	}
	#mobile_menu .lines{
		display: inline;
		float: right;
		margin-left: 5px;
	}
	#mobile_menu .lines span.nav-line {
		display: block;
		height: 3px;
		width: 20px;
		margin-bottom: 4px;
		background: #fff;
	}
	#navigation{
		margin-top: 10px;
	}
	#navigation ul{
		border-bottom: 1px solid #01AEF0;
	}
	#navigation .nav.menu{
		margin-top: 10px;
	}
	#navigation ul li {
		list-style: none;
		margin-bottom: 5px;
		font-weight: bold;	
	}
	#navigation ul li a{
		display: block;
	}
	#navigation ul li img{
		display: none;
	}
	#navigation ul ul{
		margin-left: 3px;
		border-bottom: 0px;
	}
	
	
	/* == callout == */
	.callout ul{
		text-align: center;
	}
	.callout ul li{
	}

	/* == content == */
	#content .left,
	#content .right {
		width: 96%;
		padding: 0 2% 0 2%;
		float: left;
	}
	#content .right{
		padding-top: 10px;
	}
	#breadcrumb ul li {
		font-size: 100%;
	}
	
	.item-pagehome .page-header.withbackground,
	.category-title.withbackground,
	.page-header.withbackground {
		height: auto;
		background-image: none!important;
	}
	.category-title.withbackground h2,
	.page-header.withbackground h2{
		color: #000;
		padding: 10px 0 0 0;
	}
	h1{
		font-size: 160%;
	}
	h2{
		font-size: 140%;
	}
	
	#readme img{
		max-width: 100%;
		height: auto;
	}
	
	/* == icon key == */
	.key h2{
		font-size: 120%;
	}
	.key table td{
		vertical-align: top!important;
		text-align: center;
	}
	.key table td img{
		float: none;
		padding: 5px 0 5px 0;
	}
	.key table td span{
		display: block;
		width: 100%;
		clear: left;
		float: none;
		text-align: center;
	}
	/* == blog == */
	.blog_blog .cols-4 .item {
		width: 98%;
		padding: 10px 1% 0 1%;
		float: left;
	}
#footer img{
float: none!important;
}
	#controls, #skip,
	#language{
		display: none;
	}
}