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

@media screen and (max-width: 1124px)
{  
	.container
	{  width: 940px !important
	}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */

@media screen and (max-width: 1000px)
{  
	.container
	{  width: 940px !important }

	#nav ul li a,
	#nav ul li span.mainlevel span,
	#nav ul li span.separator
	{  padding: 0 30px !important }

	#banner .zentitle h2
	{  line-height: 2.2;
	  margin: 0;
	  font-size: 2em;
	}
}

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

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

	.sidebar h3 span
	{  font-size: 0.8em }

	.container
	{  width: 840px !important }

	.slideshowoverlay .allitems.container
	{  width: 55% !important;
	  bottom: 0%;
	  padding: 0px 0 0 4% !important;
	}

	#banner .flexslider .flex-pauseplay span.pause,
	#banner ul.flex-direction-nav li a,
	#banner .flex-pauseplay span.play
	{  height: 20px;
	  width: 24px;
	}

	#banner .flex-direction-nav li a span
	{  height: 20px;
	  width: 22px;
	  background-position: 0px -790px;
	}

	#banner .flex-direction-nav li a.prev span
	{  height: 20px;
	  width: 22px;
	  background-position: 2px -819px;
	}

	#banner .slide-controller
	{  top: 20px !important;
	  right: 0;
	  left: 86%;
	  width: 60px;
	  height: 30px;
	}

	#nav ul li a,
	#nav ul li span.mainlevel span,
	#nav ul li span.separator
	{  padding: 0 25px !important }

	.article_column.cols2,
	.article_column.cols3,
	.article_column.cols4,
	.article_column.cols5,
	.column-1,
	.column-2,
	.column-3,
	.column-4,
	.column-5
	{  float: left;
	  width: 100% !important;
	}
	
	#zenkit .grid_2 .contentheading,
	#zenkit .grid_3 .contentheading,
	#zenkit .grid_4 .contentheading {
	font-size: 180%;
	}
	
		
	#tagline {
	font-size: 80%;
}
}

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

@media only screen and (max-width: 720px)
{  
	.container
	{  width: 540px !important }

	#togglemenu
	{  width: 540px !important;
	  margin: 0 auto;
	  padding-left: 2% !important;
	}


	/* CSS for the mobile menu */

	#mobilemenu
	{  display: block;
	  float: left;
	  text-align: center;
	  width: 100%;
	  padding: 20px 0;
	}

	.sidebar h3 span
	{  font-size: 0.8em;
	  line-height: 1.2em;
	}

	#zenpaneltrigger a
	{  width: 0;
	  padding-bottom: 4px;
	  padding-left: 18px;
	}

	#zenpaneltrigger a span
	{  width: 20px !important;
	  text-indent: -9999em;
	  display: block;
	  margin-left: -6px;
	  margin-top: -4px;
	}

	#mobilemenu select
	{  width: 94%;
	  margin: 0 auto;
	}

	.fullwrap.togglemenu #menuwrap,
	.fullwrap.selectmenu #menuwrap
	{  display: none }

	/* Togglemenu */

	#togglemenu
	{  display: block;
	  width: 100%;
	  padding-left: 6%;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	}

	#togglemenutrigger span
	{  padding-left: 35px;
	  background: url(../images/sprite.png) no-repeat left -129px;
	  height: 18px;
	  display: block;
	}

	.fullwrap.togglemenu #navwrap .inner,
	.fullwrap.togglemenu #navwrap .row,
	.fullwrap.togglemenu #navwrap .container
	{  border: 0;
	  padding: 0;
	}

	#banner .zentitle
	{  font-size: 80% }

	#banner .zentext
	{  font-size: 110% }

	.slideshowoverlay .allitems.container
	{  bottom: 10% }

	#tagline span
	{  font-size: 90% }

	/* Makes all grid positions 100% in width on small browsers */

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

	.slideshowoverlay .allitems.container
	{  bottom: 0% }
	
	#zenkit .grid_1 .contentheading,
	#zenkit .grid_2 .contentheading,
	#zenkit .grid_3 .contentheading,
	#zenkit .grid_4 .contentheading {
	font-size: 2em;
	}
	
	
}

@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:620px)
{  
	/* General Container width set this for the width of the main width */

	.container
	{  width: 100%  !important }

	.row
	{  width: 100% !important;
	  padding: 0 6% !important;
	  -webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	 /* Firefox, other Gecko */
	  box-sizing: border-box;
	}

	#bannerwrap .row
	{  padding: 0 !important }

	#logo
	{  padding: 20px 0 }

	#midCol
	{  margin: 0 !important;
	  width: 100% !important;
	}

	.slideshowoverlay .allitems.container
	{  bottom: 0% !important;
	  margin-bottom: -1px;
	}

	#banner .slide-controller
	{  top: 10px !important;
	  right: 10px !important;
	  left: 80%;
	}

	/* Adjustment for width on images */

	img.border
	{  width: 92% !important }

	#togglemenu
	{  width: 100% !important;
	  margin: 0 auto;
	  padding-left: 4%;
	}

	/* Reset on Slideshow Items */

	.zentools.slideshow .zentitle
	{  font-size: 70% }

	#banner .zentools a .readon
	{  background: url(../images/sprite.png) no-repeat left -332px  !important;
	  text-indent: -9999em;
	  display: block;
	  width: 16px !important;
	  height: 16px !important;
	  min-height: 28px;
	  margin-top: 10px;
	  margin-right: 20px !important;
	  box-shadow: none;
	}

	#banner .zentitle a
	{  padding-top: 0px;
	  display: block;
	  font-size: 2em;
	  margin-top: 0px;
	  float: left;
	}

	#bannerwrap .allitems.container
	{  height: 10px !important;
	  min-height: 60px;
	  width: 100% !important;
	}

	#banner .zentitle h2
	{  line-height: 1.4;
	  margin: 0;
	  font-size: 2em;
	}

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

	#bannerwrap .grid_twelve
	{  width: 100% !important }

	#logo
	{  width: auto !important;
	  padding-right: 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;
	}

	.zenlast
	{  float: left;
	  width: 100% !important;
	}

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

	.grid6wrap .moduletable
	{  background: #fafafa url(../images/divider.png) repeat-x left bottom;
	  padding-bottom: 30px;
	  margin-bottom: 0;
	  float: left;
	  width: 100%;
	}

	/* Neaten up padding and margin on divider element */

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

	/* Removes shadows on banners */

	#leftshadow
	{  background: none;
	  margin-left: 0px !important;
	  padding-left: 0px !important;
	  padding-right: 0px !important;
	}

	#rightshadow
	{  background: none;
	  float: right;
	  width: 100%;
	  margin-right: 0px;
	  padding-right: 0px;
	}

	/* 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: 0px }

	#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;
	}

	/* 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
	{  padding-top: 12px }

	a#zenpanelopen span
	{  width: 0px !important }

	/* Toggle Menu */

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



	#zenpanel
	{  position: absolute !important }

	.sidebar
	{  background: none;
	  padding: 0;
	}

	#rightCol
	{  margin-top: 0px;
	  background: none;
	}

	#rightCol.nobanner
	{  margin-top: 0px }

	#right
	{  background: none;
	  padding: 0;
	  position: relative;
	  z-index: 1;
	  padding-top: 0px;
	}
}