The Goverment Website
diff --git a/style.css b/style.css index 8fd9d5b..152ede5 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,59 @@ +/* +Theme Name: GWT-Wordpress 6.4 +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: 6.4 +Author: iGovPhil +Author URI: http://i.gov.ph +License: MIT License +License URI: http://www.opensource.org/licenses/mit-license.php +*/ + @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900); /*typography*/ h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif; font-weight: bold; text-transform: uppercase;} -/*top bar*/ -#main{ - padding: 1.25rem 0px; +/* accessibility */ +#accessibility-links{ +} +#accessibility-shortcuts{ +} +#accessibility-links ul, +#accessibility-shortcuts ul{ + margin: 0; + overflow: hidden; + height: auto; + width: auto; +} +#accessibility-links ul li, +#accessibility-shortcuts ul li{ + margin: 0; + padding: 0; + list-style: none; +} +#accessibility-links ul li a, +#accessibility-shortcuts ul li a{ + display: block; + padding: 0 20px; } +#accessibility-links ul li a, +#accessibility-shortcuts ul li a{ + font-size: 0; +} +#accessibility-links ul li.access-focus a, +#accessibility-shortcuts ul li.access-focus a{ + font-size: inherit; +} + +/*top bar*/ #main-nav { background-color: #f7f7f7; line-height: 58px; +position: fixed; +z-index: 999; +width: 100%; +box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } #main-nav .top-bar { @@ -34,6 +78,103 @@ line-height: 58px; color: #000; } +/** auxiliary-menu **/ +#auxiliary {background: #f7f7f7;} +.aux-nav-btn-container{ height: 58px; background: #f7f7f7; overflow: auto; } +#aux-nav-btn{ float: right; margin: 0; background: #f7f7f7; color: #000; height: 34px; line-height: 33px; padding: 0; padding-right: 25px; margin-top: 10px; margin-right: 18px; margin-bottom: 14px; font-weight: bold; text-transform: uppercase; font-size: 13px; } +#aux-nav-btn::after{ content: ""; position: absolute; right: 0; display: block; width: 16px; top: 0; height: 0; color: #000; box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000; } +#aux-nav{ list-style: none;} +#aux-nav li { border-right: solid 1px #ebebeb; } +#aux-nav li li {border-right: 0;} +#aux-nav li a:hover{ background: #ededed; } +#aux-nav ul{margin: 0;} +#aux-nav ul li.has-dropdown{ } +#aux-nav ul li.has-dropdown:hover{ } +#aux-nav.show-for-medium-up.open{ display: block !important;z-index: 1; } +#aux-nav.open li.divider{ border: 0; } +#aux-nav .top-bar-section .dropdown { + height: auto; + width: auto; + overflow: visible; + clip: auto; + display: none; +} +#aux-nav ul li.has-dropdown{ + +} +#aux-nav ul li.has-dropdown:hover .dropdown { + display: block; +} + +/** breadcrumbs **/ +#breadcrumbs{ + border-top: solid 1px #ebebeb; +} + +#breadcrumbs ul.nav{ + margin: 0; + padding-left: 15px; +} + +.breadcrumbs { + margin-top: 10px; + background: #FCFCFC none repeat scroll 0% 0%; + border-color: #F2F2F2; + margin-bottom: 0px; +} +.breadcrumbs li:first-child::before{ + content: " "; + margin: 0px; +} + +.breadcrumbs li:nth-child(2)::before { + content: ""; + margin: 3px; +} + +.breadcrumbs li::before{ + color: #AAA; + margin: 5px; +} + +.breadcrumbs span.current { + color: #333; +} + +/*masthead*/ +#masthead {background:#fff; border-bottom: 1px solid #f2f2f2; padding: 1.25rem 0;} + #masthead #logo h1 {margin:0; padding:0;} + #masthead #logo p {margin:0; padding:0;} + +#masthead__container { + margin-top: 50px; +} + +/*banner*/ +#banner {background: #fcfcfc; border-bottom: 1px solid #f2f2f2; padding: 1.25rem 0;} + #banner .bg-banner {background: #f2f2f2; border: 1px solid #d8d8d8;} + + /*banner 3/4 right panel*/ + #banner #featured01 {padding: 1.25rem;} + #featured01 h3, #featured01 h4, #featured01 p {color: #666;} + .banner-pads{ + padding: 30px 0; + } + +/*main-content*/ +#main-content {padding: 1.25rem 0;} + +/*footer*/ +#footer {background: #e9e9e9; padding: 1.25rem 0; border-top: 1px solid #f2f2f2;} + #footer img.republic-seal {} + #footer h4, #footer p, #footer li, #footer a {color: #999;} + #footer h4 {font-size: 60%;} + #footer p, #footer li {font-size: 70%;} + #footer ul {padding: 0; margin: 0; } + #footer li {list-style: none; display: block;} + +/*** GWT for WordPress ***/ + /* header */ .top-bar .name{ height: 58px; } .top-bar.expanded .title-area{ background: #E4E4E4;} @@ -65,35 +206,6 @@ line-height: 58px; line-height: 58px; color: #000; } - -/*** edited ****/ -.top-bar-section li.active:not(.has-form) a:not(.button){ - background: #E4E4E4; -} -.top-bar-section ul li.active > a:hover { - background: #A5A5A5; -} -.top-bar-section li.active:not(.has-form) a:not(.button):hover { - background: #A5A5A5; -} -.no-js .top-bar-section ul li:active > a { - background: #E4E4E4; -} - -.top-bar-section .divider, .top-bar-section [role="separator"] { - height:58px; - background-color: #EBEBEB; - border:none; -} -.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { - height:58px; - background-color: #EBEBEB; - border:none; -} - - -/*** edited ****/ - .top-bar-section li:not(.has-form).current-menu-item a:not(.button){ background: #E4E4E4; } @@ -116,6 +228,7 @@ line-height: 58px; } .top-bar-section .dropdown li:not(.has-form) a:not(.button){ border: 0; + line-height: 40px; } .top-bar-section li:not(.has-form) a:not(.button):hover { background: #E4E4E4; @@ -123,7 +236,7 @@ line-height: 58px; li.search {height: 58px; padding-left: 20px; padding-right: 20px;} - .logo {margin: 20px 0;} + .logo, .ear-content, .banner-content {margin: 20px 0;} .logo a {display:block; height:100px;} @@ -138,7 +251,7 @@ line-height: 58px; /* .entry-content {margin-top: 20px;} */ .notfound {text-align: center; padding-top: 1.25rem;} .search-404 {padding: 2.75rem 0;} - .search-results .panel {background: #fff; border-width: 0; border-bottom: 1px solid #D8D8D8;} + .search-results .panel {border-style: solid; border-width: 1px; border-color: #D8D8D8; margin-bottom: 1.25rem; padding: 1.25rem; background: #F2F2F2 none repeat scroll 0% 0%;} h1, h2, h3, h4, h5, h6 {line-height: 0.9;} /* template tags */ @@ -172,7 +285,7 @@ line-height: 58px; } /** media query for mobile smartphones **/ -@media only screen and (max-width: 40em) { +@media only screen and (max-width: 60em) { .top-bar .top-bar-section{ display: none; } @@ -191,6 +304,7 @@ line-height: 58px; .top-bar .top-bar-section .search .search-form input{ margin: 0; } + .top-bar-section .has-dropdown > a:after{ border: inset 5px; border-color: transparent transparent transparent rgba(0, 0, 0, 0.4); @@ -199,4 +313,265 @@ line-height: 58px; } .top-bar li{ border: 0; - } \ No newline at end of file + } + + #aux-nav li{ display: block; border:0;} + #aux-nav li a{ height: 58px; line-height: 58px; display: block;} + #aux-nav{ margin-left: 0; top: auto !important; left: 0 !important; width:100% !important; position: static !important; border-bottom: 1px solid #D8D8D8;} + #aux-nav section > ul{ width: 100%; margin: 0; padding: 0 20px; height: auto; } + #aux-nav ul > li{ width: 100%; display: block; } + #aux-nav ul li > a{ width: 100%; display: block; line-height: 58px; background: #f7f7f7; color: #000; font-size: 13px; padding: 0 20px; position: relative; border-top: 1px solid #ebebeb; } + #aux-nav ul li a:hover{ background: #EDEDED; } + #aux-nav ul li.has-dropdown > a:after{ content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; border-top-style: solid; margin-top: -2.5px; top: 22.5px; + margin-top: 1.5px; right: 30px; position: absolute; } + #aux-nav ul li.has-dropdown ul{ margin-left: 15px; } + #aux-nav ul li.has-dropdown ul > li{ } + #aux-nav ul li.has-dropdown ul li > a{ } + #aux-nav section > ul { + width: 100%; + margin: 0; + padding: 0; + height: auto; + background: #f7f7f7 + } + + #aux-nav .top-bar-section .dropdown { + height: auto; + width: auto; + overflow: visible; + clip: auto; + display: block; + position: static !important; + } + #aux-nav ul li.has-dropdown{ + + } + #aux-nav ul li.has-dropdown:hover .dropdown { + display: block; + } +} +/** media query for large screens **/ +@media only screen and (min-width: 61em){ + .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after { + border: none; + content: "\00bb"; + top: .5rem; + margin-top: 4px; + right: 5px; + line-height: 1.2; + } + #main-nav .top-bar 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); } + #aux-nav{ position: static; width: auto !important; top: auto; left: auto; + background: #f7f7f7; color: #000; line-height: 58px; font-size: 13px; } + #aux-nav .has-dropdown{ } + #aux-nav ul.dropdown{ width: 100%; } + #aux-nav ul.dropdown li{ border-bottom: solid 1px #ebebeb; } + #aux-nav li.has-dropdown > a:after { content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; border-top-style: solid; margin-right: 15px; margin-top: -2.5px; position: absolute; top: 50%; right: 0; } + #aux-nav li { float: left; padding-right: 0; list-style: none; } + #aux-nav li a{ background: #f7f7f7; color: #000; font-size: 13px; line-height: 58px; padding: 0 15px; display: block; white-space: nowrap; } + #aux-nav ul li a:hover{ background: #EDEDED; } + #aux-nav li.has-dropdown{ position: relative; } + /** first level **/ + #aux-nav 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); } + #aux-nav li.has-dropdown > a{ padding-right: 35px !important; } + #aux-nav li.has-dropdown .dropdown{ display: none !important; position: absolute; margin-left: 0; z-index: 1; width: auto; } + #aux-nav li.has-dropdown > .dropdown > li{ position: relative; width: 100%; } + #aux-nav li.has-dropdown > .dropdown > li.has-dropdown > a:after{ border: none; content: "\00bb"; top: 1rem; margin-top: 4px; right: 5px; line-height: 1.2; } + #aux-nav li.has-dropdown > .dropdown > li > .dropdown{ position: absolute; top: 0; left: 100%; } + #aux-nav li.has-dropdown:hover > .dropdown{ display: block !important; } +} + +/** mega menu **/ +.megamenu { + border-top: 2px solid #E9E9E9; + /*display: none;*/ + margin: 0px; +} + +.fullwidth { + max-width: initial; +} + +#nav-megamenu { + background: #E9E9E9 none repeat scroll 0% 0%; +} + /*left side*/ + #nav-megamenu .nav-sub { + text-align: right; + } + + #nav-megamenu .nav-sub h3 { + padding: 3rem 2rem 0px; + } + + #nav-megamenu .tabs.vertical { + margin-bottom: 1.25rem; + margin-left: 0; + width: 100%; + float: left; + } + + .tabs.vertical .tab-title { + top: auto; + position: inherit; + float: none; + display: block; + } + + #nav-megamenu .tabs .tab-title.active a { + background: #F5F5F5 none repeat scroll 0% 0%; + color: #222; + display: block; + } + + #nav-megamenu .tabs .tab-title a { + background: #E9E9E9 none repeat scroll 0% 0%; + font-family: "Roboto"; + text-transform: uppercase; + padding: 1rem 2rem; + display: block; + color: #222; + } + + /*right side*/ + #nav-megamenu .nav-sub-content { + background: #F5F5F5 none repeat scroll 0% 0%; + min-height: 15em; + } + + #nav-mega-menu { + margin-top: 58px; + } + + .tabs-content.vertical { + width: 80%; + max-width: 80%; + float: left; + margin-left: -1px; + margin-bottom: 0; + padding-left: 1rem; + display: block; + } + + #nav-megamenu .tabs-content.vertical > .content { + padding: 2rem 0.9375rem; + } + + .top-bar-section li.active:not(.has-form) a:not(.button), + .top-bar-section li.active:not(.has-form) a:hover:not(.button) { + background: #E4E4E4 none repeat scroll 0% 0%; + } + +/** accessibility panel **/ +#accessibility-widget { + float:left; + position:fixed; + top: 50%; + z-index: 200; + left: -42px; + margin-top: -42px; +} +#accessibility-widget ul { + list-style: none; + margin:0; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +#accessibility-widget ul li { + text-align: center; + display: block; +} +#accessibility-widget ul li a { + display: block; + color: #000; + background: #e2e2e2; + text-align: center; + border-top: 1px solid #f5f5f5; + border-bottom: 1px solid #d2d2d2; + padding: 5px; +} +#accessibility-widget ul li a span { + display: block; + text-indent: -9999px; + background: url(./images/accessibility-sprites.png) no-repeat; + height: 24px; + width: 24px; + margin: 4px; +} +#accessibility-widget ul li #accessibility-mode { + position: fixed; + left: -10px; + border-radius: 0px 3px 0 0px; + margin-top: -43px; + background: #ff7c7c; + border-bottom: 0; + opacity: 0.8; +} +#accessibility-widget ul li #accessibility-mode span { + background-position: 0 0; + height: 22px; + margin: 5px; + margin: 5px 0px; +} +#accessibility-widget ul li a#accessibility-mode.active span { + background-position: 0px -22px; +} +#accessibility-widget ul li a#accessibility-contrast span { + background-position: 0px -44px; +} +#accessibility-widget ul li a#accessibility-grayscale span { + background-position: 0px -69px !important; +} +#accessibility-widget ul li a#accessibility-statement span { + background-position: 0px -94px !important; +} +body.contrast #accessibility-widget ul li a#accessibility-mode span { + background: -24px 0px url(./images/accessibility-sprites.png) no-repeat !important; +} +body.contrast #accessibility-widget ul li a#accessibility-mode.active span { + background: -24px -22px url(./images/accessibility-sprites.png) no-repeat !important; +} +body.contrast #accessibility-widget ul li a#accessibility-contrast span { + background: -24px -44px url(./images/accessibility-sprites.png) no-repeat !important; +} +body.contrast #accessibility-widget ul li a#accessibility-grayscale span { + background: -24px -69px url(./images/accessibility-sprites.png) no-repeat !important; +} +body.contrast #accessibility-widget ul li a#accessibility-fontsize span { + background: -24px -94px url(./images/accessibility-sprites.png) no-repeat !important; +} +#accessibility-widget ul li a:hover { + background-color: #fff; +} +#accessibility-statement-content { + background: #fff; + border-radius: 5px; + border: 1px solid #000; + padding: 20px; + margin: 10% 10% 0; + width: 80%; + z-index: 102; + display: none; + position: absolute; +} +#accessibility-statement-content .statement-textarea { + min-height: 458px; + font-family:'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; + font-size: 100%; + line-height: 1.4em; + width: 100%; +} +#accessibility-statement-content.statement-active { + display: block; +} +#darklight { + background: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + display: none; + cursor: hand; + z-index: 101; +} \ No newline at end of file