theme.css

/*
 * Theme Name:		GWT-Wordpress 25.3.3
 * Theme URI:		http://i.gov.ph
 * Description:		Custom WordPress theme based on the draft Unified Web Content Policy 
 *					prepared by the PCDSPO, DOST-ASTI, and DOST-ICTO. Theme is built on 
 *					HTML5 responsive WordPress framework based on ZURB's Foundation.
 * Version:			25.3.3
 * Author:			iGovPhil
 * Author URI:		http://i.gov.ph
 * License:			MIT License
 * License URI:		http://www.opensource.org/licenses/mit-license.php
 * Tags: 			theme-options, rtl-language-support, featured-images, editor-style, custom-menu, 
 *					responsive-layout, right-sidebar, left-sidebar, one-column, two-columns, three-columns
 */


/**
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 640px
 *    14.2 - >= 641px
 *    14.3 - >= 641 x 1024px
 *    14.4 - >= 1025px
 *    14.5 - >= 1025 x 1440px
 *    14.5 - >= 1441px
 *    14.5 - >= 1441 x 1920px
 *    14.5 - >= 1921px
 * 15.0 - Print
 */

/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */


/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}


/**
 * 3.0 - Typography
 */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', Helvetica, Arial, sans-serif; 
	font-weight: bold; 
	text-transform: uppercase;
	line-height: 1;
}
h1 {font-size: 2.69rem;}
h2 {font-size: 1.44rem;}
h3 {font-size: 1.25rem;}
h4 {font-size: 1.13rem;}
h5 {font-size: 0.81rem;}
h6 {font-size: 0.63rem;}

/** default classes **/
.alignright{
	float: right;
	margin-left: 1rem;
}
.alignleft{
	float: left;
	margin-right: 1rem;
}

/**
 * 4.0 - Elements
 */


/**
 * 5.0 - Forms
 */


/**
 * 6.0 - Navigation
 */

	/**
	 * 6.1 - Links
	 */


	/**
	 * 6.2 - Menus
	 */

	/*top bar & auxiliary*/
	#main-nav {
		background-color: #f7f7f7;
		position: fixed;
		top: 0;
		z-index: 4;
		width: 100%;
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	}
	body.admin-bar #main-nav {
		top: 32px;
	}
	@media screen and (max-width: 782px) {
		body.admin-bar #main-nav {
			top: 46px;
		}
	}
	#main-nav .name a {
		font-size: 1.19rem !important;
		font-family: 'Arial',sans-serif !important;
	}
	#auxiliary { 
		background-color: #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
	}
	#main-nav li:not(.has-form) a:not(.button),
	#main-nav li.active:not(.has-form) a:not(.button),
	#aux-main li:not(.has-form) a:not(.button),
	#aux-main li.active:not(.has-form) a:not(.button) {
		font-size: 0.85rem;
		color: #000;
		font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
		padding: 0px 15px;
		line-height: 58px;
		white-space: nowrap;
	}
	.top-bar-left > ul > li,
	.top-bar-right > ul > li,
	#aux-main > ul > li {
		border-right: 1px solid #EBEBEB;
	}
	#main-nav .has-dropdown > a,
	#aux-main .has-dropdown > a {
		padding-right: 35px !important;
	}
	#main-nav li.current-menu-item:not(.has-form)
	#aux-main li.current-menu-item:not(.has-form) {
		background: #E4E4E4 none repeat scroll 0% 0%;
		line-height: 1;
	}
	#main-nav .has-dropdown > a::after,
	#aux-main .has-dropdown > a::after {
		border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent;
		margin-right: 15px;
		top: 50%;
		right: 0;
	}
	#main-nav ul .name a:hover {
		background: #f7f7f7 !important;
	}
	#main-nav ul li:hover:not(.has-form) > a,
	#main-nav .dropdown li:not(.has-form) a:not(.button):hover,
	#main-nav .dropdown li:not(.has-form):hover > a:not(.button),
	/*#main-nav .vertical li:not(.has-form):hover > a:not(.button),*/
	#aux-main ul li:hover:not(.has-form) > a,
	#aux-main .dropdown li:not(.has-form) a:not(.button):hover,
	#aux-main .dropdown li:not(.has-form):hover > a:not(.button) {
		background: #e4e4e4;
	}
	#main-nav li.current-menu-item:not(.has-form) a:not(.button),
	#aux-main li.current-menu-item:not(.has-form) a:not(.button),
	#offCanvasRight li.current-menu-item:not(.has-form) > a:not(.button) {
		background-color: #e4e4e4;
	}
	#main-nav .vertical li a::after,
	#aux-main .vertical li a::after {
		border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
	}
	#main-nav .vertical > li > a,
	#aux-main .vertical > li > a {
		line-height: 40px !important;
	}
	#main-nav .vertical > li > .is-dropdown-submenu,
	#aux-main .vertical > li > .is-dropdown-submenu {
		top: 1px;
	}

	/*off-canvass*/
	#off-canvas-container {
		z-index: 4;
		box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.2);
	}
	.title-bar {
		background: #f7f7f7;
	}

	.title-bar-right .name a,
	.title-bar-left .name a,
	.title-bar-title {
		color: #000;
		font-size: 1rem;
		font-family: 'Roboto Condensed', sans-serif;
	}
	.title-bar-right button::after {
		background: #000;
		box-shadow: 0 7px 0 #000,0 14px 0 #000;
	}

	/*off-canvass right menu*/
	#offCanvasRight {
		background-color: #fefefe;
		font-family: 'Roboto Condensed', sans-serif;
		height: 100%;
	}
	#offCanvasRight .is-drilldown {
		max-width: 250px !important;
		height: 95%;
	}
	#offCanvasRight .list-item {
		background-color: #f7f7f7;
		padding: 0.7rem 1rem;
	}
	#offCanvasRight .list-item:first-child {
		/*border-bottom: 1px solid #e9e9e9;*/
	}
	#offCanvasRight .is-submenu-parent-item {
		font-weight: bold;
		border-bottom: 1px solid #ccc;
	}
	#offCanvasRight .vertical li:last-child {
		border-bottom: 1px solid #e9e9e9;
	}
	#offCanvasRight li a {
		background-color: #f7f7f7;
		color: #000;
		font-size: 18px;
		line-height: 1.5
	}
	#offCanvasRight li .is-drilldown-submenu a {
		font-size: 15px;
		/*font-weight: 600;*/
	}
	/*#offCanvasRight li ul ul a {
		font-size: 13px;
		font-weight: 600;
	}*/
	#offCanvasRight .menu-item-has-children a::after {
		border-color: transparent transparent transparent #898989 ;
	}
	/*.js-drilldown-back { text-transform: uppercase; }*/
	.js-drilldown-back > a::before {
		/*display: none;*/
		margin-bottom: 0.2rem;
		border-color: transparent #898989 transparent transparent;
	}
	#aux-offmenu { 
		border-top: 1px solid #e9e9e9; 
		font-weight: 600; 
		color: #c7c7c7;
	}


/**
 * 7.0 - Accessibility
 */

#accessibility-shortcuts { }
#accessibility-shortcuts ul { margin: 0; overflow: hidden; height: auto; width: auto; }
#accessibility-shortcuts ul li { margin: 0; padding: 0; list-style: none; }
#accessibility-shortcuts ul li a { font-size: 0; display: block; padding: 0 20px; }
#accessibility-shortcuts ul li.access-focus a { font-size: inherit; }
#a11y-modal { padding-top: 58px; }
#accessibility-button { background-color: #f7f7f7; }
.fa-universal-access { color: #000; }


/**
 * 8.0 - Alignments
 */


/**
 * 9.0 - Clearings
 */


/**
 * 10.0 - Widgets
 */

.top-bar-right .search {
	padding: 0 20px;
	width: 195px;
}
#offCanvasRight input[type="search"],
.top-bar-right input[type="search"] {
	height: 2.3125rem;
	border-radius: 0;
	font-size: 0.875rem;
	margin-bottom: 0px;
}
#pst-container {
	color: #000;
	font-family: "Roboto",sans-serif;
	font-size: 0.8rem;
	line-height: 1.2;
	text-align: right;
}
#back-to-top {
	position: fixed;
	bottom: 2em;
	right: 0px;
	text-decoration: none;
	color: #ffffff;
	background-color: #111111;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	font-size: .75rem;
	padding: 1em;
	display: none;
	opacity: .6;
	/*transition: opacity .5s ease-in;
	-moz-transition: opacity .5s ease-in;
	-webkit-transition: opacity .5s ease-in;
	-o-transition: opacity .5s ease-in;*/
}
#back-to-top:hover {
	opacity: 1;
	transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
}

/**
 * 11.0 - Content
 */

h1.logo img { font-size: 1rem; }
#main-content {
	padding: 1rem 0;
}
.off-canvas-content {
	box-shadow: none;
	background: #fff;
}

/*breadcrumbs*/
.breadcrumbs {
	margin-top: 10px;
	background: #fcfcfc none repeat scroll 0% 0%;
	margin-bottom: 0.7rem;
	padding: 0.5625rem 0.875rem;
	overflow: hidden;
	border: 1px solid #f2f2f2;
	line-height: 0.6875rem;
	border-radius: 3px;
}
.breadcrumbs li {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.breadcrumbs li:not(:last-child)::after {
	content: " ";
	margin: 0;
}
.breadcrumbs li:first-child::after {
	margin: 3px;
}
.breadcrumbs .separator {
	position: relative;
	top: 1px;
	opacity: 1;
	color: #cacaca;
	margin: 5px;
}

/*post content*/
#content .entry-wrapper {
    vertical-align: top;
    display: inline-block;
}
#content .wp-post-image { 
	margin: 0 15px 15px 0;
}
.entry-header { 
	padding-bottom: 1.125rem; 
	display: inline-block; 
	vertical-align: middle; 
}
.entry-wrapper .entry-content p {
	margin-bottom: 0;
}


/**
 * 11.1 - Header
 */

/*masthead*/
.container-masthead {
	margin-top: 58px;
}
.logo, .ear-content {
	margin: 20px 0px;
}

/*masthead with text*/
#textlogo-image { display: inline-block; width: 100px; height: 100px; vertical-align: middle; }
#textlogo-inner-wrapper { display: inline-block; vertical-align: middle; }
#agency-heading { display: block; position: relative; font-size: 1.06rem; text-transform: none; }
#agency-name { display: block; position: relative; margin-top: 4px; text-transform: none; border-top: 2px solid; padding-top: 2px; line-height: 1}
#agency-tagline { display: block; position: relative; font-size: 1.06rem; margin-top: 5px; text-transform: none; }

/*banner*/
.container-banner { border-top: 1px solid #f2f2f2; }
.container-banner .entry-title { text-transform: none; line-height: 1; }
.banner-pads { padding: 15px 0 !important; margin: 0; border-bottom: 1px solid #f2f2f2; }
.orbit-bullets { margin: 0; }
.orbit-bullets button { width: 1vw; height: 1vw; vertical-align: middle; }
.orbit-slide-number { position: absolute; top: 3%; left: 1%; font-size: 0.750rem; color: white; background: rgba(0, 0, 0, 0); text-shadow: 1px 1px 3px #000}
.orbit-container .orbit-slide-number span { font-weight: 700; padding: 0.3125rem; }
.orbit-button-controls { position: absolute; top: 0f; right: 0; color: white; text-shadow: 1px 1px 3px #000; padding: 10px 20px; z-index: 3; height: auto !important;}


/**
 * 11.2 - Posts and pages
 */

.entry-meta { font-size: 0.8em; color: #666; }


/**
 * 11.3 - Post Formats
 */


/**
 * 11.4 - Comments
 */


/**
 * 11.5 - Sidebar
 */

#panel-top .widget,
#panel-bottom .widget,
#footer .widget {
	padding: 1rem 0;
}

/**
 * 11.6 - Footer
 */

/*post navigation*/
.nav-previous {
	display: inline-block;
	font-size: 1rem;
	float: left;
}
.nav-next {
	display: inline-block;
	font-size: 1rem;
	float: right;
}

#footer {
	background: #e9e9e9;
	border-top: 1px solid #f2f2f2;
}

/**
 * 12.0 - Media
 */


/* Make sure embeds and iframes fit their containers. */

/**
 * 12.1 - Captions
 */
 .orbit-caption:empty { display: none; }

/**
 * 12.2 - Galleries
 */


/**
 * 13.0 - Multisites
 */


/**
 * 14.0 - Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}


/*Small screens*/

/**
 * <= 360px
 */
@media only screen and (max-width: 20em) { 
	#agency-name { font-size: 11.5vw !important; }
}

/**
 * <= 481px
 */
@media only screen and (max-width: 30.063em) {
	#agency-name { font-size: inherit; }
}

/**
 * <= 640px
 */
@media only screen and (max-width: 40em) { 
	#textlogo-wrapper { text-align: center; }
	#textlogo-inner-wrapper { margin-top: 10px; }
}

/*Medium screens*/

/**
 * >= 641px
 */
@media only screen and (min-width: 40.063em) { 
	#agency-name { font-size: 3.5vw; }
}

/**
 * 641px <=> 1024px
 */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
	
}

/**
 * <= 1023px
 */
@media screen and (max-width: 63.9375em) {
	.container-masthead { margin-top: 42px; border-bottom: 1px solid #f2f2f2; }
	.banner-content { padding: 1rem 0; }
}

/*Large screens*/

/**
 * >= 1024px
 */
@media only screen and (min-width: 64em) {
	#main-nav .top-bar-left .dropdown li ul, 
	#aux-main .dropdown li ul { 
		-webkit-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5);
		-moz-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5);
		box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5);
		border: none;
	}
	#main-nav .top-bar-right .dropdown li ul { 
		-webkit-box-shadow: -6px 6px 10px -6px rgba(0,0,0,0.5);
		-moz-box-shadow: -6px 6px 10px -6px rgba(0,0,0,0.5);
		box-shadow: -6px 6px 10px -6px rgba(0,0,0,0.5);
		border: none;
	}
	.container-banner { padding: 1rem 0; } 
	
}

/**
 * 1025px <=> 1440px
 */
@media only screen and (min-width: 64.0625em) and (max-width: 90em) { #agency-name { font-size: inherit; } }

/*XLarge screens*/

/**
 * >= 1441px
 */
@media only screen and (min-width: 90.063em) { #agency-name { font-size: inherit; } }

/**
 * 1441px <=> 1920px
 */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }

/*XXLarge screens*/

/**
 * >= 1921px
 */
@media only screen and (min-width: 120.063em) { }