/* @override 
	http://localhost:8888/qs/25/Sidetrack/templates/jbsidetrack/css/mediaqueries.css
	http://localhost:8888/qs/Sidetrack/templates/jbsidetrack/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)
{  
	#maincontainer
	{  width: 96% !important }

	#maincontainer.center
	{  border: 0;
	  background: 0;
	}

	#socialicons.fixedright
	{  position: relative;
	  z-index: 10;
	  width: 100% !important;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

@media only screen and (max-width: 800px)
{  
	div.jbMeta .jbSectCat
	{  clear: both;
	  line-height: 1;
	  margin-bottom: 6px;
	}

	#nav ul li
	{  font-size: 85% }
}

@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% }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

@media only screen and (max-width: 880px)
{  
	#rightCol,
	#midCol
	{  width: 100% }

	ul.jbtabs li
	{  margin: 0 }

	ul.jbtabs li a
	{  font-size: 90% }

	ul.jbtabs li
	{  margin-bottom: 10px }

	/* Makes all grid positions 100% in width on small browsers. Thi shappens earlier than usual because of the sidebar */

	.grid_one,
	.grid_two,
	.grid_three,
	.grid_four,
	.grid_five,
	.grid_six,
	.grid_seven,
	.grid_eight,
	.grid_nine,
	.grid_ten,
	.grid_eleven,
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4
	{  width: 100% !important;
	  margin-bottom: 30px;
	}

	/* 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 }

	/* Now we have to reset the grids in the slideshow */

	.zentools.slideshow .allitems .grid_one
	{  width: 4.85%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_11
	{  width: 5.7% !important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_10
	{  width: 6.7%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_9
	{  width: 7.9%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems.grid_8
	{  width: 9.3%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_7
	{  width: 11.1%;
	 !important: ;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_two
	{  width: 13.45%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_three
	{  width: 22.05% !important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_four
	{  width: 30.75%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_five
	{  width: 39.45%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_six
	{  width: 48%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_seven
	{  width: 56.75%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_eight
	{  width: 65.4%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_nine
	{  width: 74.05%!important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_ten
	{  width: 82.7% !important;
	  margin: 0;
	}

	.zentools.slideshow .allitems .grid_eleven
	{  width: 91.35% }

	.zentools.slideshow .allitems .grid_twelve
	{  width: 100%;
	  float: left;
	}

	/* Reset on margins applied to grids in slideshow */

	.zentools .column.grid_one,
	.zentools .column.grid_two,
	.zentools .column.grid_three,
	.zentools .column.grid_four,
	.zentools .column.grid_five,
	.zentools .column.grid_six,
	.zentools .column.grid_seven,
	.zentools .column.grid_eight,
	.zentools .column.grid_nine,
	.zentools .column.grid_ten,
	.zentools .column.grid_eleven,
	.zentools .column.grid_twelve
	{  margin: 0 !important }

	/* Reset on paddings / margins applied to various rows */

	#logowrap .container,
	#bannerwrap .row
	{  padding: 0;
	  margin-bottom: 0;
	}
}

@media only screen and (max-width: 600px)
{  
	/* Neaten up padding and margin on divider element */

	.divider
	{  margin: 10px 0;
	  padding: 0;
	}

	.row
	{  width: 96%;
	  margin: 0 auto !important;
	}

	#maincontainer
	{  width: 100% !important }

	/* CSS for the mobile menu */

	#mobilemenu
	{  display: block;
	  float: left;
	  width: 100%;
	}

	#mobilemenu select
	{  width: 100% }

	.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 }

	/* Panel Trigger */

	#zenpaneltrigger
	{  display: block;
	  text-align: center;
	  padding: 9px 0 20px !important;
	  margin-top: -27px;
	  margin-right: 8px;
	}

	#zenpaneltrigger a
	{  padding-bottom: 11px }

	/* Reset on slideshow container rule */

	.zentools .allitems.container
	{  padding: 8px 4% 8px!important;
	  width: 92%;
	  line-height: 1;
	}

	.allitems.container .zenmore span.readon
	{  text-indent: -9999em;
	  display: block;
	  width: 16px;
	  height: 16px;
	  background: url(../images/sprite2.png) -118px 0px no-repeat !important;
	  float: right;
	  margin-right: 4px;
	  box-shadow: none;
	  margin: 0;
	}

	/* Masonry and tab filter */

	ul#filters li
	{  margin: 0 1px 12px }

	/* Article Index and Table of content */

	#article-index,
	table.contenttoc
	{  width: 100%;
	  margin: 30px 0;
	}

	/* Reset on menu widths */

	#nav ul li a
	{  padding-left: 0;
	  padding-right: 0;
	}

	#nav
	{  margin-bottom: 0 }

	/* Tabs */

	ul.jbtabs
	{  border: 1px solid #ddd;
	  border-width: 1px 0;
	  height: auto;
	}

	ul.jbtabs li
	{  float: none;
	  list-style-type: none;
	  margin: 0 0 2px;
	  border: 1px solid #ddd;
	  border-bottom: 0;
	}

	ul.jbtabs li.active,
	ul.jbtabs li:hover
	{  margin-bottom: 2px }

	ul.jbtabs li:first-child
	{  border-bottom: 0 !important }

	ul.jbtabs li a
	{  color: #999;
	  padding: 0px;
	  border: 0;
	  display: block;
	}

	/* Hidden Panel */

	/* Hidden Panel */

	#zenpanel
	{  width: 90% !important;
	  height: auto !important;
	  top: -70px !important;
	  left: 5% !important;
	}

	a#zenpanelopen
	{  position: absolute;
	  margin-top: -9px;
	  top: -92px;
	  padding-top: 7px;
	  display: block;
	  right: -31px;
	}
	
	.present #zenpaneltrigger {
	margin-top: -15px !important; 
}

	/* Toggle Menu */

	#togglemenu
	{  background: #151515 !important;
	  float: left;
	  width: 100%;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	}

	#togglemenu ul li
	{  border-bottom: 1px solid #111;
	  border-top: 1px solid #222;
	}

	#togglemenutrigger span
	{  margin-left: 0px;
	  text-indent: 40px;
	  background: url(../images/sprite.png) no-repeat 4px -128px;
	  height: 18px;
	  display: block;
	}

	#togglemenucontent
	{  padding: 0 4%;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	  width: 100%;
	}

	#togglemenu ul ul
	{  margin: 2px 0 0 0 }

	#navwrap.sticky
	{  display: none !important }

	#zenpanel
	{  position: absolute !important }

	/* Resets on the wrappers for the sidebar and the main content */

	#maincontentwrap
	{  width: 96%;
	  margin: 0 0 0 2%!important;
	}

	#maincontentwrapinner
	{  padding: 0 }

	#midCol
	{  margin-bottom: 0 }

	#sidebar,
	#sidebar.fixed,
	#sidebar.dynamic
	{  border-right: 0;
	  position: relative !important;
	  top: 0;
	  width: 100% !important;
	  margin: 0;
	  padding-top: 0;
	  clear: both;
	  background: none;

	}

	#sidebar ul li
	{  padding-left: 2% }

	#sidebar .moduleTitle
	{  padding-left: 3% }

	/* A special logo because it's likely that the menu will be in the left */

	#mobilelogo
	{  display: block;
	  float: left;
	  width: 100%;
	  padding: 20px 3% 0;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	}

	#mobilelogo #logo
	{  margin: 0;
	  padding-left: 1%;
	}

	/* Hide the logo which is now at the bottom of the page */

	#left #logo
	{  display: none }
}