/* @override http://localhost:8888/qs/unified/Responsive/templates/jbresponsive/css/mediaqueries.css */

/**
 * @package		Joomla Bamboo Zen Grid Framework
 * @Type        Core CSS
 * @version		v2
 * @author		Joomlabamboo http://www.joomlabamboo.com
 * @copyright 	Copyright (C) 2007 - 2010 Joomla Bamboo
 * @license		http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */
 
/* Rules for Media queries. If you want to create your own media query file just create a file called mediaqueroes.css in your css file.
-----------------------------------------------------------------------------*/


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media screen and (max-width: 960px) {
	.container{width: 94% !important}
	.mbWrap img {margin-right: 20px !important;height: auto !important}
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 800px) {	
	span.createDate,span.k2Author,.k2Category {margin-right: 8px;}
}

@media only screen and (min-width: 480px) and (max-width: 1024px) {
	
	/* Fix for advert positions with three modules published at low resolutions */
	#abovemain .grid_3,
	#abovemain .grid_4,
	#belowmain .grid_3,
	#belowmain .grid_4 {
		width: 100%;
	}	
	
	#zenpanel {width: 90% !important;}
	
}

/* Fix for tabs dropping onto two lines on small screens */
@media only screen and (min-width: 480px) and (max-width: 768px) {
		ul.jbtabs li a,ul.jbtabs li.active a {
			padding: 12px 20px;font-size: 0.9em;line-height: 1.9em;
		}
		#bannerwrap .container {
			padding-bottom: 0;
		}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 520px) {
	/* Makes all grid positions 100% in width on small browsers */
	.grid_one,
	.grid_two,
	.grid_three,
	.grid_four,
	.grid_five,
	.grid_six,
	.grid_seven,
	.grid_eight,
	.grid_nine,
	.grid_ten,
	.grid_eleven,
	.grid_twelve,
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4 
	{width: 100%;margin-bottom: 30px;} 	
	
	/* CSS for the mobile menu */
	#mobilemenu {display: block;padding: 15px 0 10px}
	#mobilemenu select.inputbox {width: 70% !important}
	.fullwrap.togglemenu #menuwrap,.fullwrap.selectmenu #menuwrap {display: none;}
	
	/* Togglemenu */
	#togglemenu {display: block}
	.fullwrap.togglemenu #navwrap .inner,
	.fullwrap.togglemenu #navwrap .row,
	.fullwrap.togglemenu #navwrap .container {border: 0;padding: 0;}

	/* Special module class to hide some modules on small browsers */
	.moduletable.mobilehide{display: none;}
	
	/* Resets the push and pull for source ordered content */
	.onecols_pull,
	.twocols_pull,
	.threecols_pull,
	.fourcols_pull,
	.fivecols_pull,
	.sixcols_pull,
	.sevencols_pull,
	.eightcols_pull,
	.ninecols_pull,
	.tencols_pull,
	.elevencols_pull,
	.twelvecols_pull,
	.onecols_push,
	.twocols_push,
	.threecols_push,
	.fourcols_push,
	.fivecols_push,
	.sixcols_push,
	.sevencols_push,
	.eightcols_push,
	.ninecols_push,
	.tencols_push,
	.elevencols_push,
	.twelvecols_push
	{left: 0;}
	
	/* Microblog */
	.mbWrap{width: 47% !important;}
	.mbColImage {float: left;margin-right: 20px;}
	.mbWrap.last {float: left;}
	
	/* General Container */
	.container{width: 98%  !important}	
	#tabwrap .container {padding: 0;}
	#nav ul li a {padding-left: 0;padding-right: 0;}
	
	/* Tabs */
	ul.jbtabs {border: 0;height: auto;}
	ul.jbtabs li {float: none;list-style-type: none;margin: 0;}
	ul.jbtabs li a {color: #999;padding: 12px 0px;border: 0;border-bottom: 1px solid #ddd;padding: 4px;display: block;}
	ul.jbtabs li a:hover {border-bottom: 1px solid #ddd;border-width: 0 0 1px 0;}
	ul.jbtabs li.active a {border-width: 0 0 1px 0;background: #eee;margin: 0;border-bottom: 1px solid #ddd;padding: 4px 0}
	#zenpanel {width: 90% !important;height: auto !important;}
	a#zenpanelopen {margin-top: -10px;margin-right: -5px;padding-top: 12px;}
	#bannerwrap .container {padding: 0;}
	#nav {margin-bottom: 0;}
	.jb_left45,.jb_right45 {
		width: 100% !important;
		margin: 0 !important;
		border: 0 !important;
		padding: 0 !important;
	}
}