/* @override http://localhost:8888/fresh/highline/templates/jbkoan/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)
{  
	#shadowinner,
	#footerwrap .row,
	#bottomrow .row,
	#footerwrap .container,
	#bottomrow .container,
	#navwrap.sticky .container
	{  width: 700px !important;
	  margin: 0 auto;
	}

	#shadowinner .container
	{  width: 100% }

	#nav ul li
	{  font-size: 90%;}

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

	#nav ul li:last-child a
	{  margin: 0 }
	
	#nav ul li a {
	margin: 0 10px 0 0;
	padding-left: 0;
	}
	
	
	#nav ul li span.mainlevel span
	{
	margin: 0 10px 0 0;
	padding: 0;
	}
	
	#nav ul li span {
	margin-right: 10px;
	}
}

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

	#shadowinner,
	#footerwrap .row,
	#bottomrow .row,
	#footerwrap .container,
	#bottomrow .container,
	#navwrap.sticky .container
	{  width: 700px !important;
	  margin: 0 auto;
	}
	

}

@media only screen and (max-width: 700px)
{  
	.fullwrap
	{  margin: 0 }

	#shadow
	{  margin-top: 30px }

	#shadowinner,
	#footerwrap .row,
	#bottomrow .row,
	#footerwrap .container,
	#bottomrow .container,
	#navwrap.sticky .container
	{  width: 500px !important;
	  margin: 0 auto;
	}

	#navwrap.sticky #logo,
	#navwrap.sticky #tagline
	{  display: none }

	ul.jbtabs li,
	ul.jbtabs li:hover,
	ul.jbtabs li.active:hover
	{  padding: 0 14px !important }

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

	.fullwrap.togglemenu #navwrap.sticky #menuwrap,
	.fullwrap.selectmenu #navwrap.sticky #menuwrap
	{  display: block }

	#navwrap.sticky ul
	{  width: 100% }

	/* Togglemenu */

	#togglemenu
	{  display: block }

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

	/* 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,
	#logo.grid_one,
	.zentools .column.grid_two,
	#logo.grid_two,
	.zentools .column.grid_three,
	#logo.grid_three,
	.zentools .column.grid_four,
	#logo.grid_four,
	.zentools .column.grid_five,
	#logo.grid_five,
	.zentools .column.grid_six,
	#logo.grid_six,
	.zentools .column.grid_seven,
	#logo.grid_seven,
	.zentools .column.grid_eight,
	#logo.grid_eight,
	.zentools .column.grid_nine,
	#logo.grid_nine,
	.zentools .column.grid_ten,
	#logo.grid_ten,
	.zentools .column.grid_eleven,
	#logo.grid_eleven,
	.zentools .column.grid_twelve,
	#logo.grid_twelve,
	.zenlast
	{  margin: 0 !important }

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

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

	#navwrap .row
	{  padding: 10px 4% !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 }
	
	
		#zenpaneltrigger a
	{  float: left;
	  text-align: center;
	  padding:0px 10px 0px !important;

	}
}

@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: 520px)
{  
	#shadow
	{  margin-top: 0 } 

	/* General Container width set this for the width of the main width */

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

	#shadowinner .row
	{  margin: 0;
	  width: 100%;
	  padding: 0 !important;
	}

	#bannerwrap .container,
	#bannerwrap .row
	{  margin: 0 auto !important;
	  width: 97% !important;
	  margin-bottom: 30px; 
	}
	
	#bannerwrap .row {
	margin-bottom: 30px !important;
}

	#bannerwrap .allitems.container
	{  margin-bottom: 0;width: 100% !important; }

	#bannerwrap ul.slidenav {
	display: none;
}
	#navwrap .container
	{  padding-bottom: 0 !important }

	.row,
	#footerwrap .row,
	#bottomrow .row,
	#footerwrap .container,
	#bottomrow .container
	{  width: 94% !important;
	  margin: 0 auto !important;
	}

	#navwrap .row
	{  width: 100% !important;
	  padding-bottom: 0 !important;
	  margin-bottom: 20px !important;
	}

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

	/* Panel Trigger */



	#zenpaneltrigger a
	{  padding-bottom: 11px }

	a#zenpanelopen
	{  float: right;
	  padding: 4px 10px;
	  line-height: 1.8;
	}

	/* Reset on slideshow container rule */

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

	.allitems.container .zenmore span.readon
	{  text-indent: -9999em;
	  display: block;
	  width: 16px;
	  background: url(../images/sprite.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: 20px !important;
	  	left: 5% !important;
	  	z-index: 100;
	}

	a#zenpanelopen
	{  
	  margin-right: -20px;
	  padding-top: 12px;
	}
	
	#zenpaneltrigger a
	{  float: left;
		
	  text-align: center;
	  padding:8px 10px 7px !important;

	}

	#navwrap.sticky
	{  display: none !important }

	#zenpanel
	{  position: absolute !important }
	
	#logoinner {
	padding: 10px 4% !important;
		-webkit-box-sizing: border-box;
 /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}
}