/**
 * @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: 800px !important
	}

	#nav ul li {
	    margin-right: 1% !important
	}

	#nav ul {
	    width: 100%
	}

	#sidetabs li {
	    width: 100%;
	    padding: 0;
	}

	#bannerwrap h2 {
	    font-size: 2em
	}

	.moduletable.featured .moduleTitle span {
	    width: 30%
	}

	#tagline {
	    font-size: 90%
	}

	#sidetabs li a {
	    border-radius: 0 !important;
	    display: block;
	    text-align: left;
	    text-indent: 4%;
	}

	#sidetabs li a:hover {
	    border: 0
	}
}

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

	.container {
	    width: 760px !important
	}

	#bannerwrap h2 {
	    font-size: 2em
	}

	#midCol {
	    padding: 10px 3%;
	}

	.moduletable.featured .moduleTitle span {
	    width: 35%
	}
}

@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 {
	    padding-bottom: 10px
	}
}

/* Shows toggle menu earlier than usual */

@media only screen and (max-width: 760px) { 
	/* CSS for the mobile menu */

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

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

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

	/* Togglemenu */

	#togglemenu {
	    display: block
	}

	#togglemenu {
	    position: relative;
	    z-index: 100;
	}

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

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

	.container {
	    width: 660px !important
	}

	#nav li {
	    font-size: 90% !important;
	    padding: 0 !important;
	    margin: 0 !important;
	}

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

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

@media only screen and (max-width: 690px) { 
	/* General Container width set this for the width of the main width */

	.container {
	    width: 100%  !important
	}

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

	/* 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_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 {
	    margin: 0 !important
	}

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

	#logowrap .container,
	#bannerwrap .row,
	.zentools .zenlast .zeninner {
	    padding: 0;
	    margin-bottom: 0 !important;
	}

	.moduletable.featured {
	    padding: 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;
	}

	/* Special module class to hide some modules on small browsers */

	.moduletable.mobilehide {
	    display: none
	}

	#sidetabs li {
	    width: 22%;
	    padding: 4px 0;
	}

	#sidetabs li a {
	    border-radius: 3px !important;
	    display: block;
	    text-align: center;
	    text-indent: 0;
	}

	.moduletable.featured .moduleTitle span {
	    width: 65%;
	    font-size: 70%;
	}

	#zenpaneltrigger {

	}

	#zenpaneltrigger a {
	    padding-bottom: 7px
	}

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

	#midCol {
	    padding: 10px 4%;
	    margin-bottom: 30px !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: 0px solid #ddd;
	    height: auto;
	    margin-top: 10px;
	}

	ul.jbtabs li {
	    line-height: 3
	}

	#jbtabbedArea {
	    margin-bottom: 40px
	}

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

	ul.jbtabs li:last-child {

	}

	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: 0px;
	    padding-top: 12px;
	}

	#navwrap.sticky {
	    display: none !important
	}

	#zenpanel {
	    position: absolute !important
	}

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

	#socialicons {
	    width: 100%
	}

	#socialicons ul li {
	    margin-left: 0 !important;
	    margin-right: 3% !important;
	}

	#zenpaneltrigger {
	    margin-top: -6px;
	    margin-right: 4px;
	}

	#socialicons.fixedright {
	    margin-top: 4px;
	    top: 0;
	    width: 30%;
	    z-index: 100;
	}

	.onward #socialicons.fixedright {
	    margin-top: 0;
	    width: 142px;
	}

	#socialicons li i,
	#zenpaneltrigger a i {
	    font-size: 1em;
	    border-radius: 30px;
	    height: 24px;
	    width: 30px;
	    text-align: center;
	    padding-top: 6px;
	}

	#logoinner {
	    margin-top: 10px
	}

	#logo h1 {
	    line-height: 1
	}

	#tagline {
	    margin-top: 20px
	}

	.moduletable.highlight .zeninner {
	    margin-bottom: 40px
	}

	#footerRight {
	    float: left
	}

	#banner {
	    font-size: 85%
	}
}

@media only screen and (max-width: 400px) { 
	#logo h1 {
	    font-size: 2.4em
	}

	#banner {
	    font-size: 70%
	}
}