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

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

}

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



@media only screen and (max-width: 900px) {
	#nav,#nav ul,#logo {
		width: 100%;float: left !important;
	}
	
	#nav {
	padding-bottom: 10px;
}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 560px) { 

	/* General Container width set this for the width of the main width */
	.container { width: 98%  !important }
	
	
	/* 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% !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,
	#logo.grid_one,
	#logo.grid_two,
	#logo.grid_three,
	#logo.grid_four,
	#logo.grid_five,
	#logo.grid_six,
	#logo.grid_seven,
	#logo.grid_eight,
	#logo.grid_nine,
	#logo.grid_ten,
	#logo.grid_eleven,
	#logo.grid_twelve,
	.zenlast { margin: 0 !important } 

	/* Reset on paddings / margins applied to various rows */
	#logowrap .container,
	#bannerwrap .row {
	    padding: 0;
	    margin-bottom: 0;
	}

	/* Resetting padding on rows for small screens */
	#grid1wrap .row,
	#grid2wrap .row,
	#grid3wrap .row,
	#grid4wrap .row,
	#grid5wrap .row,
	#grid6wrap .row,
	#mainwrap .row,
	#tabwrap .container,
	#bannerwrap .container { padding: 0 }

	
	/* Neaten up padding and margin on divider element */
	.divider {
	    margin: 10px 0;
	    padding: 0;
	}
	
	
	/* CSS for the mobile menu */
	#mobilemenu
	{  display: block;
	  float: left;text-align: center;
	  width: 100%;
	}

	#mobilemenu select
	{  width: 94%;margin: 0 auto; }
	.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;
	}

	#zenpaneltrigger a { padding-bottom: 11px }
	
		#zenpanel {
	    width: 90% !important;
	    height: auto !important;
	  	top: 20px !important;
	  	left: 5% !important;
	}



	/* Reset on slideshow container rule */
	.zentools .allitems.container {
	    padding: 8px 4% 0!important;
	    width: 92%;
	    line-height: 1;
	}

	.allitems.container .zenmore span.readon {
	    text-indent: -9999em;
	    display: block;
	    width: 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:last-child {
	border-bottom: 1px solid #ddd !important;
}

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


	/* Hidden Panel */
	#zenpanel {
	    width: 90% !important;
	    height: auto !important;
	}

	a#zenpanelopen {
	    margin-top: -10px;
	    margin-right: -20px;
	    padding-top: 12px;
	}
	
	
	/* Toggle Menu */
	#togglemenu{
		background: #151515;
	}
	
	#togglemenu ul li {
		border-bottom: 1px solid #111;
		border-top: 1px solid #222;
	}

	#togglemenutrigger span {
		margin-left: 15px;
		padding-left: 30px;
		background: url(../images/sprite.png) no-repeat left -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;
	}
	
	.sidebar {
	background: none;padding: 0;;
}
}