media-queries.css

/**
 * Media Queries CSS
 * Shell Theme
 */

/* for zoom */
@media screen and (max-width: 980px) {

	/* Menu Primary
	*******************************************/
	#menu-primary div.menu{
		padding-bottom:5px;
	}
	#menu-primary li a{
		border:1px solid #DFDFDF;
		margin:5px 0 0 5px;
	}
	#menu-primary li li a{
		border-top:none;
		border-right:none;
		margin:0;
	}
	#menu-primary .sub-menu{
		margin-top:5px;
		margin-left:6px;
	}
	#menu-primary .sub-menu .sub-menu{
		margin-top:0;
	}

	/* Menu Secondary
	*******************************************/
	#menu-secondary div.menu{
		padding-bottom:5px;
	}
	#menu-secondary li a{
		border:1px solid #DFDFDF;
		margin:5px 0 0 5px;
	}
	#menu-secondary li li a{
		border-top:none;
		border-right:none;
		margin:0;
	}
	#menu-secondary .sub-menu{
		margin-top:5px;
		margin-left:6px;
	}
	#menu-secondary .sub-menu .sub-menu{
		margin-top:0;
	}
	.menu-container div.search .search-form{
		margin:5px 0 0 5px;
		padding:5px;
		border:1px solid #DFDFDF;
	}
	.menu-container .search-form input[type="text"]{
		margin-top:0;
	}
}

/* for tablet */
@media screen and (max-width: 760px) {

	/* content
	*******************************************/
	.layout-default #content,
	.layout-2c-l #content,
	.layout-2c-r #content{
		width:100%;
		margin:0;
		margin-bottom:25px;
		clear:both;
	}

	/* sidebar primary
	*******************************************/
	.layout-default #sidebar-primary,
	.layout-2c-l #sidebar-primary,
	.layout-2c-r #sidebar-primary{
		width:48.75%;
		float:left;
		clear:left;
		margin:0;
	}
	/* width to 100% if sideabr primary is not active */
	.sidebar-secondary-inactive #sidebar-primary{
		width:100%;
		float:none;
		clear:both;
		margin:0;
	}

	/* sidebar secondary
	*******************************************/
	.layout-default #sidebar-secondary,
	.layout-2c-l #sidebar-secondary,
	.layout-2c-r #sidebar-secondary{
		width:48.75%;
		float:right;
		clear:right;
		margin:0;
	}
	/* width to 100% if sidebar secondary is not active */
	.sidebar-primary-inactive #sidebar-secondary{
		width:100%;
		float:none;
		clear:both;
		margin:0;
	}

	/* sidebar subsidiary
	*******************************************/
	#sidebar-subsidiary .widget{
		width:47.5%;
	}
	#sidebar-subsidiary div.widget:nth-child(odd) {
		clear:left;
	}
	#sidebar-subsidiary div.widget:nth-child(even) {
		clear:right;
	}
}

/* for another tablet */
@media screen and (max-width: 600px) {

	/* header
	*******************************************/
	#branding{
		width:100%;
	}
	#sidebar-header{
		width:100%;
		height:auto;
	}

	/* menu subsidiary
	*******************************************/
	#menu-subsidiary div.menu li{
		float:none
	}
	#menu-subsidiary ul {
		text-align: center;
	}
	#menu-subsidiary li {
		display: inline-block;
		*display: inline; /* hack for IE */
		*zoom: 1; /* hack for IE */
	}
	#menu-subsidiary li a{
		border: 1px solid #DFDFDF;
		margin:10px 0;
	}
}

/* for mobile */
@media screen and (max-width: 480px) {

	/* Mobile Nav Button
	*******************************************/
	.mobile-menu-button {
		position: relative;
		width:130px;
		height: 38px;
		line-height:38px;
		margin-bottom: 3px;
		margin-right: 3px;
		display: block;
		float: left;
		cursor: pointer;
		background: url(images/menu-icon.png) no-repeat center right;
	}
	.mobile-menu-button:hover,
	.mobile-menu-button:active{
		text-decoration:underline;
	}

	/* Menu Primary
	*******************************************/
	#menu-primary .mobile-menu-button{
		float:right;
		width:115px;
	}
	#menu-primary{
		display: block;
		padding:2.5%;
		height:55px;
		border:1px solid #DFDFDF;
		border-bottom:none;
	}
	#menu-primary div.wrap{
		clear: both;
		position: absolute;
		top: auto;
		right: 4%;
		left: auto;
		bottom: auto;
		width: 200px;
		z-index: 1000;
		padding: 10px 5px;
		margin-top:40px;
		background: #fff;
		border: solid 1px #999;
		display: none;
	}

	/* Active */
	body #menu-primary div.wrap-menu-active{
		display: block;
	}

	#menu-primary div.wrap .menu{
		border:none;
	}
	#menu-primary div.wrap li {
		clear: both;
		float: none;
		margin: 5px 0 0 10px;
		padding: 0;
		border: none;
		width: auto !important;
	}
	#menu-primary div.wrap a, 
	#menu-primary div.wrap ul a {
		font: inherit;
		text-transform: inherit;
		background: none !important;
		width: auto !important;
		display: inline !important;
		visibility: visible !important;
		padding: 0;
		color: #666 !important;
		border: none !important;
	}
	#menu-primary div.wrap .sub-menu{
		visibility: visible !important;
		opacity: 1 !important;
	}
	#menu-primary div.wrap ul {
		position: static;
		display: block !important;
		visibility: visible !important;
		margin-left: 10px;
		padding: 0;
		background: none;
		border: none;
		list-style: square;
	}
	#menu-primary div.menu li,
	#menu-primary div.menu ul li,
	#menu-primary div.menu ul ul li{
		width:auto !important;
		background: none !important;
	}
	#menu-primary .wrap a {
		margin: 0 10px 5px 0;
		padding: 4px 7px;
	}
	#menu-primary ul li a:hover,
	#menu-primary li ul li a:hover{
		text-decoration:underline;
	}

	/* Secondary Menu
	*******************************************/
	#menu-secondary .mobile-menu-button{
		background: url(images/menu-icon.png) no-repeat center left;
		padding-left:35px;
	}
	#menu-secondary{
		display: block;
		padding:2.5%;
		height:55px;
		border:1px solid #DFDFDF;
		border-top:none;
	}
	#menu-secondary div.wrap{
		clear: both;
		position: absolute;
		top: auto;
		right: auto;
		left: 4%;
		bottom: auto;
		width: 200px;
		z-index: 1000;
		padding: 10px 5px;
		margin-top:40px;
		background: #fff;
		border: solid 1px #999;
		display: none;
	}

	/* Active */
	body #menu-secondary div.wrap-menu-active{
		display: block;
	}

	#menu-secondary div.wrap li {
		clear: both;
		float: none;
		margin: 5px 0 0 10px;
		padding: 0;
		border: none;
		width: auto !important;
	}
	#menu-secondary div.wrap a, 
	#menu-secondary div.wrap ul a {
		font: inherit;
		text-transform: inherit;
		background: none !important;
		width: auto !important;
		display: inline !important;
		visibility: visible !important;
		padding: 0;
		color: #666 !important;
		border: none !important;
	}
	#menu-secondary div.wrap .sub-menu{
		visibility: visible !important;
		opacity: 1 !important;
	}
	#menu-secondary div.wrap ul {
		position: static;
		display: block !important;
		visibility: visible !important;
		padding: 0;
		margin-left:10px;
		background: none;
		border: none;
		list-style:square;
	}
	#menu-secondary div.menu li,
	#menu-secondary div.menu ul li,
	#menu-secondary div.menu ul ul li{
		width:auto !important;
		background: none !important;
	}
	#menu-secondary .wrap a {
		margin: 0 10px 5px 0;
		padding: 4px 7px;
	}
	#menu-secondary ul li a:hover,
	#menu-secondary li ul li a:hover{
		text-decoration:underline;
	}
	/* search */
	.menu-container div.search{
		width:130px;
	}
	.menu-container div.search .search-form{
		margin:0;
		padding:4px;
		border:none;
	}

	/* Primary Sidebar
	*******************************************/
	.layout-default #sidebar-primary,
	.layout-2c-l #sidebar-primary,
	.layout-2c-r #sidebar-primary{
		width:100%;
		float:none;
		clear:both;
		margin:0;
	}

	/* Secondary Sidebar
	*******************************************/
	.layout-default #sidebar-secondary,
	.layout-2c-l #sidebar-secondary,
	.layout-2c-r #sidebar-secondary{
		width:100%;
		float:none;
		clear:both;
		margin:0;
	}

	/* Subsidiary Sidebar
	*******************************************/
	#sidebar-subsidiary .widget{
		width:100%;
		clear:both;
	}

	/* Bottom Menu
	*******************************************/
	html.js-disabled .menu-bottom-container{
		display:block;
	}
	
	/* Footer
	*******************************************/
	#footer .copyright{
		float:none;
		width:100%;
		text-align: center;
	}
	#footer .credit{
		float:none;
		width:100%;
		text-align: center;
	}

	/* Grid Column
	*******************************************/
	.grid-column-2{
		width:100%;
		padding:0;
		margin:0 0 25px 0;
	}
	.grid-column-1-3{
		width:100%;
		padding:0;
		margin:0 0 25px 0;
	}
	.grid-column-2-3{
		width:100%;
		padding:0;
		margin:0 0 25px 0;
	}
	.grid-column-1-4{
		width:100%;
		padding:0;
		margin:0 0 25px 0;
	}
	.grid-column-3-4{
		width:100%;
		padding:0;
		margin:0 0 25px 0;
	}
}



/**
 * Sub-menu toggle
 * -------------------------------------
 * this sub menu is added for better navigation for mobile device with width more than 481px
 * in previous version sub-menu only can be displayed by hover.
 */
@media screen and (min-width: 481px) {

	/* display sub-menu toggle, only if it's mobile and only if js-enabled */
	html.shell-is-mobile.js-enabled  .sub-menu-toggle{
		display:block;
	}

	/* Hide sub-menu, activate using click */
	html.shell-is-mobile.js-enabled #menu-primary div.menu li:hover ul,
	html.shell-is-mobile.js-enabled #menu-secondary div.menu li:hover ul{
		top:-999em;
	}

	/* Hide sub-menu, activate using click */
	html.shell-is-mobile.js-enabled div.menu .sub-menu{
		top:-999em;
	}

	/* Display sub-menu if active */
	html.shell-is-mobile.js-enabled #menu-primary div.menu .parent-menu-active .sub-menu,
	html.shell-is-mobile.js-enabled #menu-secondary div.menu .parent-menu-active .sub-menu,
	html.shell-is-mobile.js-enabled div.menu .parent-menu-active .sub-menu{
		top:37px;
	}

	/* Sub-Menu item background color when active */
	html.shell-is-mobile.js-enabled #menu-primary div.menu .parent-menu-active li a,
	html.shell-is-mobile.js-enabled #menu-secondary div.menu .parent-menu-active li a{
		background: #252525;
	}

	/* Fix Sub-menu position without hover: top:37px; */
	html.shell-is-mobile.js-enabled div.menu .sub-menu{
		
	}
	html.shell-is-mobile.js-enabled #menu-primary li li ul,
	html.shell-is-mobile.js-enabled #menu-secondary li li ul{
		top:37px;
		margin-left: 0;
	}
	html.shell-is-mobile.js-enabled #menu-primary .sub-menu li:hover ul,
	html.shell-is-mobile.js-enabled #menu-primary .sub-menu li:hover li ul,
	html.shell-is-mobile.js-enabled #menu-secondary .sub-menu li:hover ul,
	html.shell-is-mobile.js-enabled #menu-secondary .sub-menu li:hover li ul{
		margin-left:-10em;
	}
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu{
		top:1px;
	}

	/* active menu z-index */
	html.shell-is-mobile.js-enabled div.menu .parent-menu-active{
		z-index: 10;
	}


	/* Sub-menu list style,
	 * 2nd level and more sub-menu need to be displayed as one drop down for easier navigation.
	 * it's also don't require lot's of css modification for sub-menu
	------------------------------------- */

	/* 3rd level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu li a::before{
		content:"\2013"; /* circle */
		padding-right:10px;
	}
	/* 4th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013"; /* two circle */
	}
	/* 5th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013";
	}
	/* 6th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013";
	}
	/* 7th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013";
	}
	/* 8th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013\2013";
	}
	/* 9th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013\2013\2013";
	}
	/* 10th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013\2013\2013\2013";
	}
	/* 11th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013\2013\2013\2013\2013";
	}
	/* 12th level */
	html.shell-is-mobile.js-enabled div.menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li a::before{
		content:"\2013\2013\2013\2013\2013\2013\2013\2013\2013\2013";
	}


	/*  Sub menu toggle
	------------------------------------------------ */

	/* Remove Padding menu item have toggle */
	html.shell-is-mobile.js-enabled #menu-primary li.menu-item-has-children a,
	html.shell-is-mobile.js-enabled #menu-secondary li.menu-item-has-children a{
		padding-right: 0;
	}
	html.shell-is-mobile.js-enabled #menu-primary .sub-menu li a,
	html.shell-is-mobile.js-enabled #menu-secondary .sub-menu li a{
		padding-right: 25px;
	}
	html.shell-is-mobile.js-enabled #menu-primary .sub-menu li.menu-item-has-children a,
	html.shell-is-mobile.js-enabled #menu-secondary .sub-menu li.menu-item-has-children a{
		padding-right: 0;
	}

	/* Style sub-menu toggle, make it bigger for easy click  */
	html.shell-is-mobile.js-enabled .sub-menu-toggle{
		width: 37px;
		height: 37px;
		display:block;
		float:right;
		margin-top:-12px;
		margin-left: 25px;
		line-height:1px;
		padding: 18px; /* ( 37px[width] - 1px[line-height] ) : 2 */
		border-left: 1px solid #DFDFDF;
	}

	/* fix border color */
	html.shell-is-mobile.js-enabled div.menu li a:hover .sub-menu-toggle{
		border-color:#444;
		background:#666;
	}
}


/* === 3 Column Layout Legacy === */

/* for tablet */
@media screen and (max-width: 760px) {

	/* content
	*******************************************/
	.layout-3c-l #content,
	.layout-3c-r #content,
	.layout-3c-c #content{
		width:100%;
		margin:0;
		margin-bottom:25px;
		clear:both;
	}

	/* sidebar primary
	*******************************************/
	.layout-3c-l #sidebar-primary,
	.layout-3c-r #sidebar-primary,
	.layout-3c-c #sidebar-primary{
		width:48.75%;
		float:left;
		clear:left;
		margin:0;
	}

	/* sidebar secondary
	*******************************************/
	.layout-3c-l #sidebar-secondary,
	.layout-3c-r #sidebar-secondary,
	.layout-3c-c #sidebar-secondary{
		width:48.75%;
		float:right;
		clear:right;
		margin:0;
	}
}

/* for mobile */
@media screen and (max-width: 480px) {

	/* Primary Sidebar
	*******************************************/
	.layout-3c-l #sidebar-primary,
	.layout-3c-r #sidebar-primary,
	.layout-3c-c #sidebar-primary{
		width:100%;
		float:left;
		clear:both;
		margin:0;
	}

	/* Secondary Sidebar
	*******************************************/
	.layout-3c-l #sidebar-secondary,
	.layout-3c-r #sidebar-secondary,
	.layout-3c-c #sidebar-secondary{
		width:100%;
		float:right;
		clear:both;
		margin:0;
	}
}