@charset "utf-8";
/*
Theme Name: Manila Shimbun
Theme URI: http://www.web-makati.com/
Description: Manila Shimbun
Version: 0.1.4
Author: WEB MAKATI
Author URI: http://www.web-makati.com/
License: GNU General Public License
Tags: Philippine, Manila Shimbun, News
*/
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto 0px auto;font-size:14px;
       font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
       background:#fff;}
header,section,article,aside,footer { display: block; }
img{ margin:0;padding:0;border:none; display: block; }
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
             IMAGE
---------------------------------- */
img { display: block; }
iframe { display: block; }
/* ----------------------------------
             SPAN/BR
---------------------------------- */
span.red { color:#ff0000; }
  @media screen and (max-width : 480px) { 
     br.sp { display:none; }
  }
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#333;text-decoration:none;}
a:visited{ color:#333;text-decoration:none;}
a:hover{ color:#ff0000;	text-decoration:underline;}
a:active{ color:#298ADC;text-decoration:none;}
/* ----------------------------------
          ClearFix
---------------------------------- */
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/* 追加 MacIE 5 と WinIE 7 向け */
/*MacIE \*/
* html .cf{ height:1em;}

/*-------------------------------------
	     Header
-------------------------------------*/
header { width:100%;text-align:center;margin:0px auto 0px auto; background-color:#6ccfef; }
header:before { content:""; display:block; height:45px; width:100%;background:#2d3e50; }
#header-inner { max-width:1000px;margin:0px auto;padding:0px; }
#header-bar { width:100%; color:#fff; margin-top:-42px; }
#header-bar a:link { color:#fff; font-weight:bold; float:left; }
#header-bar a:visited { color:#fff; }
.header-bar-left { float:left; padding-top:10px; }
.header-bar-left a:link { ;width:40px; }
.header-bar-right { float:right; }
#h1group { color:#fff; padding-top:40px; }
h1 { clear:both; float:left;width:23%;padding:30px 0;margin:0; }
h1 img { max-width:225px; }
.h1-right { padding-top:24px; float:right; width:77%; }
#weather { text-align:right; width:100px; float:right; }
#weather p img { float:left; vertical-align:middle; margin-top:-3px; }
.h1-right p { text-align:right; }

  @media screen and (max-width : 768px){
     header { margin:45px auto 0px auto;  }
     #header-inner { width:100%; }
     h1 { width:48%;padding:10px 1%;margin:0; }
     .h1-right { padding:10px 1%; float:right; width:48%; }
  }
  @media screen and (max-width : 480px){

  }
/* ----------------------------------
              NAVI
---------------------------------- */
nav { width:100%; height:40px; background:#62c3e3; }
nav img.menuimg { display:none; }
#nav-inner { max-width:1000px;margin:0px auto;padding:0px; }
nav ul.left { float:left; width:80%; }
nav ul.right { float:right; width:20%; }
nav li { float:left; display: block; padding:0px 7px; font-size:14px; line-height:40px;
         font-weight:bold; text-align:center; }
nav li a:link { color: #fff; text-decoration: none; }
nav li a:visited { color:#fff; }
nav li a:hover { color:#333;text-decoration:none; }
nav ul.right li { float:right; }


nav.videoNav ul.middle { margin:0 auto; padding-top:5px;}

  @media screen and (max-width : 768px){ 
     nav { position: fixed;  top: 0; left:0; width:100%;height:40px;background:#323333; max-width:768px; z-index:10; }
     nav img.menuimg  { display:block; margin:1px; }
     nav.close ul { width:40%; margin:-72px 0 10px 0; padding-left:70px; background:#323333;-webkit-transition: .5s linear; transition: .5s linear; }
     nav ul.left { float:none; margin-bottom:0px; }
     nav ul.right { display:none; }
     nav.open { height:56px;-webkit-transition: .5s linear; transition: .5s linear; 
                background:#323333 ;  }
     nav.close { width:100%; height:100%; -webkit-transition: .5s linear; transition: .5s linear; 
                 background:rgba(51,51,51,0.5); }
     nav ul { list-style:none; padding:0px; height:auto; margin:-600px auto 0px auto;width:100%; }

     nav ul li { float:none; color:#fff;font-size: 16px;font-weight: bold;background: #323333 none repeat scroll 0% 0%;
             width:100%;padding:10px 10px 0 10px;}
     nav ul li:first-child { padding-top:40px; }
     nav ul li a:link { color:#fff; }
     nav ul li a:visited { color:#fff; }

     nav.videoNav { position:relative; background:none; }
     nav.videoNav ul.middle { margin:0 auto; padding-top:2px;}
     nav.videoNav ul li { float:right; padding:5px 15px; width:auto; background:none; 
                color:#fff;font-size: 16px;font-weight: bold;}
     nav.videoNav ul li:first-child { padding-top:5px; }
  }
/*-------------------------------------
	    TOP VIDEO
-------------------------------------*/
#top-video { width:100%; background:#2d3e50; z-index:-10; }
#top-video-inner { max-width:1000px;margin:0px auto;padding:0px;  }
.top-youtube { position:relative; width:100%; padding-top:56.25%; }
.top-youtube iframe { position:absolute; top:0; right:0; width:100%; height:100%; z-index:0; }

  @media screen and (max-width : 768px){ 
      #top-video-inner { width:100%; }
  }
/*-------------------------------------
	   Main Contents
-------------------------------------*/
main { width:100%; border-top:1px #fff solid; }
main a:hover img { opacity: 0.9;filter: alpha(opacity=90);}
article { width:100%;  }
section { max-width:1000px; margin:0 auto;  }
/*-------------------------------------
	   Top Contents
-------------------------------------*/
#topCon { width:100%; margin:0 auto; }
.topCon-left { float:left; width:66%; }
h2 { margin:0px;color:#58a8d9;padding:15px 0; font-size:14px; }
h2 a:link { color:#58a8d9; }
h2 a:visited { color:#58a8d9; }
h3 { font-size:20px; margin:15px 0 5px 0; }
#topCon .read-more { width:100px; font-size:14px;padding:10px 10px 10px 20px; margin:15px 0;
          background:#386fa5; }
#topCon .read-more a:link { font-weight:bold; color:#fff; }
#topCon .read-more a:visited { color:#fff; }
#topCon .thumbnail img { max-width:660px; height:auto; }

.topCon-right { float:right; width:30%; }
.topCon-right ul { font-size:12px; list-style:disc; background:#f1f1f1; padding:5px 10px 5px 30px; }
.topCon-right ul li { color:#396ea4; padding:10px 0; border-top:1px #ccc solid; }
.topCon-right ul li:first-child { border-top:none; }

  @media screen and (max-width : 768px){ 
     
  }
  @media screen and (max-width : 480px) { 
    .topCon-left { float:none; width:98%; padding:0 1%; }
    .topCon-left p img { width:100%; height:auto; }
    .topCon-right { float:none; width:98%; padding:0 1%; }
  }
/*-------------------------------------
	   Mid Contents
-------------------------------------*/
#midCon { clear:both; width:100%; margin:0 auto; padding:30px 0 10px; border-bottom:1px #ccc solid }
#midCon img { width:100%; height:200px; overflow:hidden; }
.midCon-left { float:left; width:31%; }
.midCon-mid { float:left; width:31%; padding:0 3%; }
.midCon-right { float:left; width:31%; }
#midCon h2 { padding:5px 0; }
#midCon h3 { font-size:16px; margin:5px 0 5px 0; }
#midCon .read-more { width:100px; font-size:14px;padding:10px 10px 10px 20px; margin:15px 0;
          background:#386fa5; }
#midCon .read-more a:link { font-weight:bold; color:#fff; }
#midCon .read-more a:visited { color:#fff; }

  @media screen and (max-width : 480px) { 
    .midCon-left { float:none; width:98%; padding:0 1%; }
    .midCon-mid { float:none; width:98%; padding:20px 1%; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; }
    .midCon-right { float:none; width:98%; padding:20px 1%; }
  }
/*-------------------------------------
	   Bottom Contents
-------------------------------------*/
section.bottom { max-width:100%; background:#1b2936; }
#bottomCon { clear:both;  max-width:1000px; margin:0 auto; padding:30px 0 10px; }
#bottomCon h2 {  }
#bottomCon h2 a:link { color:#fff; }
#bottomCon h2 a:visited { color:#fff; }
#bottomCon h3 { font-size:20px; margin:15px 0 5px 0; color:#fff; }
.bottomCon-left { float:left; width:66%; }
#bottom-video { float:left; width:24%; padding:0 1% 0 0; margin: 20px 0; }
#bottom-video:last-child { padding:0; }

.bottom-view { clear:both; width:100%; text-align:center; padding-bottom:20px; }
.bottom-view p { width:100px; margin:10px auto; padding:10px 20px; border:1px #fff solid; }
.bottom-view a:link { color:#fff; }
.bottom-view a:visited { color:#fff; }

.bottomCon-right { float:right; width:30%; }
.bottomCon-right ul { font-size:12px; list-style:disc; background:#2c4259; padding:5px 10px 5px 30px; }
.bottomCon-right ul li { color:#3670a2; padding:10px 0; border-top:1px #ccc solid; }
.bottomCon-right ul li:first-child { border-top:none; }
.bottomCon-right ul li a:link { color:#fff; }
.bottomCon-right ul li a:visited { color:#fff; }
#bottomCon .read-more { width:100px; font-size:14px;padding:10px 10px 10px 20px; margin:15px 0;
          background:#386fa5; }
#bottomCon .read-more a:link { font-weight:bold; color:#fff; }
#bottomCon .read-more a:visited { color:#fff; }

.bottom-banner { display:flex; flex-wrap:wrap; }
.bottom-banner p { width:44%; padding:20px 3%; }
.bottom-banner p img { width:100%; }

  @media screen and (max-width : 768px){ 
     #bottomCon { width:99%; margin:0 0.5%; }
  }
  @media screen and (max-width : 480px) { 
     .bottomCon-left { float:none; width:98%; padding:0 1%;}
     .bottomCon-right { float:none; width:98%; padding:0 1%;}
  }
/*-------------------------------------
	        VIDO CONTENTS
-------------------------------------*/
.midYouTube { width:48%; float:left; margin:0 1%;}
h2.midYouTubeTitle { color:#000; padding:5px 0 20px; height:40px; } 
h2.midYouTubeTitle a:link { color:#000; } 
h2.midYouTubeTitle a:visited { color:#000; } 
.midYouTube iframe { width:100%; height:100%; z-index:0; }
  @media screen and (max-width : 480px) { 
     h2.midYouTubeTitle { padding:5px 0 5px; height:auto; } 
  }

/*-------------------------------------
	        ASIDE
-------------------------------------*/
aside { width:100%; background:#e2e2e2; padding:20px 0; }
.subscribe-left { float:left; width:50%; }
.subscribe-right { float:left; width:50%; }
.subscribe-right a { float:left;  }
.subscribe-right img { width:40px;  }

  @media screen and (max-width : 768px){ 

  }
  @media screen and (max-width : 480px){
      .subscribe-left { float:none; width:98%; padding:0 1%;}
      .subscribe-right { float:none; width:98%; padding:0 1%;}
  }
/*-------------------------------------
	   Archive Page
-------------------------------------*/
.archiveYouTube { width:24%; margin:0 0.5%; }
.archiveYouTube iframe { width: 100%; height: 85px; }
.archiveYouTube p.thumbnail img { width:100%; }
  @media screen and (max-width : 480px){
      .archiveYouTube { width:98%; margin:1%; }
      .archiveYouTube iframe {  height: 55vw; }
  }
/*-------------------------------------
	   POST CONTENTS
-------------------------------------*/

/*-------------------------------------
	   PAGE NUMBER
-------------------------------------*/
#wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {
	background: white;	padding: 0;	margin: 0;	border: none;	text-decoration: none;
	font-weight: normal;	font-style: normal;	list-style: none;	text-transform: none;
	text-indent: 0px;	font-variant: normal;	text-align: left;
	line-height: 16px;	letter-spacing: 0px;	word-spacing: 0px;
	font-size: 14px;	font-family: Arial; }
#wp_page_numbers { 	margin-top: 10px;	width: 100%;	background: white;	margin-bottom: 10px; }
#wp_page_numbers ul { width: 100%; }
#wp_page_numbers li { 	float: left; 	display: block;	margin-bottom: 2px; }
#wp_page_numbers a { padding: 5px 7px;
	margin-left: 2px;	margin-right: 2px;	display: block;	color: #333;
	border: 1px solid #bfbfbf; }
#wp_page_numbers li a:hover { 	border-color: #BA0000; }
#wp_page_numbers li.space { 	padding: 6px;	padding-left: 2px;	padding-right: 2px; }
#wp_page_numbers li.first_last_page { 	font-style: italic; }
#wp_page_numbers li.active_page a { 	border-color: #0075b8; }
#wp_page_numbers li.active_page a:hover  {	color: black; /* IE fix */
	text-decoration: underline;	border-color: #BA0000; }
#wp_page_numbers li.page_info { 	float: left;	display: block;	padding: 5px 7px;
	margin-right: 2px;	color: #666; border: 1px solid #bfbfbf; }

  @media screen and (max-width : 480px) { 
     #pageN { padding:20px 0 10px 0; }
  }
/*-------------------------------------
	   CONTACT
-------------------------------------*/
.contactform { background:#eee; }
.contactConLeft { float:left;width:50%; }
.contact li { background: none; padding-left: 0; }
.contact li p { padding: 0  0 0 30px; }
.contact li p span.home { float: left; display: inline-block; height: 18px;
	width: 18px; margin-left: -30px; padding: 0; }
.contact li p em { display: block; font-size: 19px; font-style: normal; }
.contactConRight { float:right;width:48%; padding-right:2%; }
.contactLeft { width:200px;float:left;margin:3px;}
.contactRight { margin:5px 14px; }

  @media screen and (max-width : 480px){
      .contactConLeft { float:none;width:100%; }
      .contactConRight { float:none;width:100%; }
      .contactLeft { width:200px;float:left;margin:3px;}
  }

#contactForm { width:100%; padding-bottom:20px; }
#formWrap { margin-top:50px; }
#formWrap h3 { margin-left:50px; }
#contactForm input, #contactForm textarea { border:none; margin:4px 0; padding-left:5px;}
#contactForm input { width:60%; height:30px; }
#contactForm textarea { width:100%; height:180px; }
#contactForm p.send { text-align:right; }
#contactForm input.submit { color:#fff; width:100px; height:40px; background:#323333; cursor:pointer; }
#contactForm input.submit:hover { background:#ff0000; }

#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:70%;padding:5px 20px 5px 20px;word-wrap:break-word; }
#contactForm .formTable th { width:30%;padding:5px 20px 5px 20px; }

  @media screen and (max-width : 480px){
      #contactForm { width:96%; padding:20px 2%; }
      #formWrap h3 { margin-left:2%; }
      #contactForm textarea { width:96%; height:180px; }
      #contactForm .formTable { width:96%;margin:10px auto; }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { clear:both; width:100%;text-align:center;margin:0px auto 0px auto;padding:30px 0 30px 0;
         background:#2c2c2c; border-top:8px #376ea4 solid; }

#footer-inner { width:1000px;margin:0px auto 0px auto;padding:0; }
#footerGroupA { width:24%;float:left; padding:0 1% 0 0; }
#footerGroupA li img { width:200px; }
#footerGroupA li:last-child { width:80px; font-weight:bold; padding:5px 10px; margin:15px 0;
           border:1px #fff solid; }
#footerGroupB { width:21%;float:left; padding:0 1% 0 3%; }
#footerGroupC { width:21%;float:left; padding:0 2%; }
#footerGroupD { width:25%;float:left; }

footer ul { text-align:left;font-size:12px; }
footer li { padding:2px 0px;color:#fff; }
footer li:first-child { font-size:16px; padding-bottom:20px; } 
footer li a { display:block;text-decoration:none;}
footer li a:link { color:#fff;}
footer li a:visited{ color:#fff;text-decoration:none;}
footer li a:hover{ color:#ff0000;text-decoration: none;}


  @media screen and (max-width : 768px){
      #footer-inner { max-width:98%; margin:0 1%; } 
  }
  @media screen and (max-width : 480px) {
      #footer-inner { max-width:94%; padding:0 2%; } 
      #footerGroupA {  display:none; }
      #footerGroupB {  display:none; }
      #footerGroupC {  display:none; }
      #footerGroupD { display:block;width:70%;padding-bottom:60px; }
  }