/*
Theme Name: Web Security Room
Theme URI: http://www.websec-room.com/
Description: responsive 
Version: 1.1
Author: fnya
Tags: responsive
*/

.clearfix {clear: both;}

/* Base */
html,
body {
  font-size:100%;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  margin:0;
  padding:0;
}

pre,
blockquote {
  position:relative;
  left:-30px;
  width:88%;
  background-color:#d3d3d3;
  border:solid 1px #808080;
  padding:10px;
  word-break:break-all;
}

/* for site */
#wrapper {
 margin:0 auto;
}

#content_main {
 width:100%;
}

header.content_header {
 width:100%;
 background-color:blue;
 background-image:url(images/header.jpg);
}

#header_title {
  float:left;
  font-size:1.6em;
  padding:10px;
  margin:0;
  text-shadow:3px 3px 3px #999;
}

header.content_header h1 a {
  text-decoration: none;
  color: #000;
}

#icons {
  float:right;
  padding-right:10px;
  padding-top:15px;
}

header.content_header ul li a {
  outline: none;
  color: #fff;
}

header.content_header  ul li a:hover {
  color: lightblue;
}

.content_header nav ul {
  list-style:none;
  margin:0;
  padding:0;
  background-color:#191970;
  border-bottom: 1px solid #708090;
  background:-webkit-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-moz-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-o-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-ms-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:linear-gradient(to bottom, #0000cd 0%, #191970 100%);
}

.content_header nav ul li {
  display:block;
  width:100%;
  text-align:center;
  line-height:2.5em;
  color:#fff;
  border-bottom: 1px solid #708090;
  border-right:1px solid #708090;
  background:-webkit-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-moz-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-o-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-ms-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:linear-gradient(to bottom, #0000cd 0%, #191970 100%);
}

.list_ul {
  padding:0;
  margin: 5px 0;
}

.list_parent {
 list-style:none;
 padding-left:25px!important;
 padding-right:0px!important;
 padding-bottom:0px;
 background-image:url(images/point.gif)!important;
 background-repeat: no-repeat;
}

.list_child {
 list-style:none;
 padding-left:25px!important;
 padding-right:0px!important;
 background-image:url(images/arrow.gif)!important;
 background-repeat: no-repeat;
}

.list_child a {
  color:#000;
}

#content {
 margin:0;
 padding:0;
 width:100%;
}

.top_box {
  width:100%;
}

.top_title_box {
  padding:5px 10px;
  background-color:#191970;
  text-align:center;
  color:#fff;
  border: solid 1px #191970;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  background:-webkit-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-moz-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-o-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-ms-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:linear-gradient(to bottom, #0000cd 0%, #191970 100%);
}

.top_title {
  margin:0!important;
  font-size:1.2em!important;
  border-left:0!important;
  border-bottom:0!important;
}

.top_new_date {
  float:left;
  width:105px;
}

.top_new_title {
  float:left;
  width:80%;
}

.top_content {
 border: solid 1px #191970;
 padding:10px 10px 10px 10px;
}

.top_content ul {
  padding: 0 0 0 5px!important;
  margin:0!important;
}

.top_content li {
 list-style:none!important;
 padding-left:25px!important;
 background-image:url(images/arrow.gif)!important;
 background-repeat: no-repeat!important;
}
.top_content li:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.content h2 {
  margin-top:0;
  margin-bottom:5px;
  padding-left:5px;
  border-left:solid 30px #191970;
  border-bottom:solid 1px #191970;
}

.content h3 {
  padding-left:5px;
  border-left:solid 20px #191970;
  border-bottom:solid 1px #191970;
}

.content h4 {
  padding-left:5px;
  border-left:solid 15px #191970;
  border-bottom:solid 1px #191970;
}

.content h5 {
  padding-left:5px;
  border-left:solid 10px #191970;
  border-bottom:solid 1px #191970;
}

.content h6 {
  padding-left:5px;
  border-left:solid 5px #191970;
  border-bottom:solid 1px #191970;
}
.content p {
  line-height:1.6em;
}

.content ul li {
 list-style:none;
 padding-left:15px;
 background-image:url(images/list.png);
 background-repeat: no-repeat;
}

.content table {
  border-collapse:collapse;
  border:#ccc solid 1px;
}

.content table th {
  border:#ccc solid 1px;
  text-align:left;
}

.content table td {
  border:#ccc solid 1px;
}

.title_ads {
  margin:5px 0;
  width:100%;
  height:60px;
  text-align:center;
}

.make_date {
  text-align:right;
}

.categories {
  text-align:right;
}
.social_buttons {
  margin-top:15px;
  margin-bottom:15px;
}

/* social buttons */
.hatena-bookmark-button-frame{
  width:60px!important;
}


.fb-like.fb_iframe_widget span {
  vertical-align: top !important;
}

.fb_iframe_widget {
  display: inline !important;
}


iframe.twitter-share-button {
	width: 100px!important;
}

#___plusone_0{
  width:70px!important;
}

/*count.jsoon*/
#twitter-widgetoon-0 {
  height: 20px!important;
}

.point {
  width:520px;
  min-height:100px;
  padding:10px 10px 10px 60px;
  background-image:url(images/sec_point.png);
  background-color:#faf0e6;
  background-repeat:no-repeat;
  border:dotted 2px #ff1493;
}

.taisaku {
  width:520px;
  min-height:100px;
  padding:10px 10px 10px 60px;
  background-image:url(images/sec_taisaku.png);
  background-color:#faf0e6;
  background-repeat:no-repeat;
  border:dotted 2px #ff1493;
}

.hoken {
  width:520px;
  min-height:100px;
  padding:10px 10px 10px 60px;
  background-image:url(images/sec_hoken.png);
  background-color:#faf0e6;
  background-repeat:no-repeat;
  border:dotted 2px #ff1493;
}


.content_ads {
  width:336px;
  height:280px;
}

#comment {
  width:80%;
}

.sidebar {
  width:100%;
}

.sidebar_box {
  padding:10px 0px;
}

.sidebar_box_padding_top {
  padding-top:0;
}

.sidebar_title_box {
  background-color:#191970;
  text-align:center;
  color:#fff;
  border: solid 1px #191970;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  background:-webkit-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-moz-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-o-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:-ms-linear-gradient(top, #0000cd 0%, #191970 100%);
  background:linear-gradient(to bottom, #0000cd 0%, #191970 100%);
}

.sidebar_title {
  margin:0;
  padding:0;
  font-size:1.2em;
}

.sidebar_content {
 border: solid 1px #191970;
 padding:8px 0px 8px 8px;
}

.sidebar_content li{
 list-style:none;
 padding-left:25px;
 padding-right:10px;
 background-image:url(images/arrow.gif);
 background-repeat: no-repeat;
}

#sidebar_ads {
 width:300px;
 height:250px;
}

footer {
 width:100%;
 background-color:#191970;
 text-align:center;
 color:#fff;
}

footer a {
 color:#fff;
}

.archive_title {
  font-size:1.2em;
}

.archive_excerpt p {
  margin-top:0.3em;
  margin-bottom:1.2em;
}

.related_icon {
  padding:0 0 0 5px;
}
.related_icon_li{
  padding-left:25px!important;
  list-style:none;
  background-image:url(images/arrow.gif)!important;
  background-repeat: no-repeat;
}

/* ================================================================================
	#page-nav
================================================================================ */
.page-nav {
	text-align: center;
}
.page-nav li {
	display: inline;
	list-style: none outside none;
	background-image:none!important;
	padding-left:0px!important;
}
.page-nav li a {
	border: 1px solid rgb(230,230,230);
	color: rgb(102,102,102);
	text-decoration: none;
	border-radius: 3px;
}

.page-nav li a:hover {
	border: 1px solid rgb(230,230,230);
}
.page-nav li a:active {
	box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
	top:1px;
}

.page-nav li.current span {
	border: 1px solid rgb(186,166,132);
	color: rgb(121,81,15);
	font-weight: bold;
	border-radius: 3px;
}
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span {
	background: rgb(248,248,248);
	border: 1px solid rgb(230,230,230);
	color: rgb(180,180,180);
	text-decoration: none;
	border-radius: 3px;
}

.page-nav li.page_nums span {
	background: rgb(102,102,102);
	border: 1px solid rgb(51,51,51);
	/*color: rgb(255,255,255);*/
}
.page-nav li a,
.page-nav li.current span,
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span,
.page-nav li.page_nums span {
	padding: 0.25em 0.8em;
	display: inline-block;
	position:relative;
}

.page-nav li.first,
.page-nav li.previous,
.page-nav li.current,
.page-nav li.next,
.page-nav li.last {
	background-image:none;
}

.pages-link {
	text-align: center;
}
.pages-link a span {
	border: 1px solid rgb(230,230,230);
	color: rgb(102,102,102);
	text-decoration: none;
	font-weight: normal;
}
.pages-link span {
	border: 1px solid rgb(186,166,132);
	color: rgb(121,81,15);
	font-weight: bold;
	border-radius: 3px;
	padding: 0.25em 0.8em;
	display: inline-block;
	position:relative;
}
.pages-link a:hover span {
	border: 1px solid rgb(230,230,230);
}
.pages-link a:active span {
	box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
	top:1px;
}

.navi_l{
text-align: left;
margin-bottom: 5px;
}
.navi_r{
text-align: right;
}

/* 100%表示対応 */
@media only screen and (max-width: 639px) {
  html,
  body {
    font-size:1.2em;
  }

  .content_header nav ul li {
   height: :0;
    width:100%;
  }

  #content_main h2 {
    margin-top:10px;
  }
  
  .top_new_date {
    float:left;
    width:auto;
  }

  .top_new_title {
    float:left;
    width:80%;
  }
  
  .content img {
    width:100%;
    height:auto;
  }

  .content img[alt="LINEで送る"] {
    width:88px;
    height:20px;
  }
  
  .content img[alt="このエントリーをはてなブックマークに追加"] {
    width:20px;
    height:20px;
  }
  
  .content img[width="1"] {
    width:1px;
    height:1px;
  }
  
  .hoken,
  .taisaku,
  .point {
    width:80%;
  }
  .avatar {
    width:32px!important;
    height:32px!important;
  }
  .sidebar_box_padding_top {
    padding-top:10px;
  }

  /*Comment*/
  #author {
    max-width: 60%;
  }
 #email {
    max-width: 60%;
  }
 #url {
    max-width: 60%;
  }
}

/*Major break point*/
@media only screen and (min-width: 640px) {
  #wrapper {
    width:640px;
  }

  .content_header nav ul {
    height:40px;
  }
  
  .content_header nav ul li {
    float:left;
    width:120px;
  }
  
  .sidebar_right {
    clear:both;
    margin:5px;
    padding:5px;
    width:300px;
    border:0;
  }
  
  .content {
    margin:5px;
    margin-left:5px;
    padding:5px;
    float:left;
    width:620px;
    border:0;
  }
  
}

/*Major break point*/
@media only screen and (min-width: 960px) {
  #wrapper {
    width:960px;
  }
  
  .content_header nav ul {
    height:40px;
  }
  
  .content_header nav ul li {
    float:left;
    width:120px;
    border-bottom:0;
  }
  
  .wide_menu {
    width:200px!important;
  }
  
  .sidebar_right {
    clear:none;
    margin:5px;
    padding:5px;
    float:left;
    width:300px;
    border:0;
  }
  
  .content {
    margin:5px;
    margin-left:5px;
    padding:5px;
    float:left;
    width:620px;
    border:0;
  }
}