@CHARSET "utf-8";

/****************************************
 * Table of Contents
 * 
 * 0. Zeroing out the margins and paddings
 * 1. Layouts
 * 2. Basic Elements Styles
 * 3. Common Styles
 * 4. Header Styles
 * 5. Main Contents Styles
 * 6. Footer Styles
 * 7. Image Replacement
 * 8. Hacks
 * 
 ****************************************/

/* ------------------------------------------------------------
	0. Zeroing out the margins and paddings
------------------------------------------------------------ */
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
img, b, i, ul, ol, li, 
fieldset, form, input, legend, 
table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------
	1. Layouts
------------------------------------------------------------ */
#header {width: 960px; height: 70px; margin: 10px auto;}
#content {width: 960px; margin: 0 auto;}
#footer {width: 100%; margin: 20px 0 0 0;}

/* ------------------------------------------------------------
	2. Basic Elements Styles
------------------------------------------------------------ */
body {background-color: #FFF; font-size: 13px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}
h1, h2, h3, h4, h5, p, input {margin-bottom: 10px;}
h1 { font-size: 3.0em;}
h2 { font-size: 1.6em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.1em;}
h5 { font-size: 1.0em;}
img {border: none;}
li {list-style: none;}
input, select, textarea {padding: 2px; border: 1px solid #aaa; background-color: #fff; font-size: 13px;}
a {color: #77a900; text-decoration: none;}
a:hover {color: #9fcf26; text-decoration: underline;}

/* ------------------------------------------------------------
	3. Common Styles
------------------------------------------------------------ */
/* Paragraph Styles */
.important {color: #d91281;}
.error {color: #ff0000; font-weight: bold;}
.tag {margin-right: 10px; padding-left: 20px; float: left; background: url(../img/icons/tag_green.png) top left no-repeat;}
.balloon {position: relative; padding: 10px; border: 1px solid #ccc; background-color: #f6f6f6; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.balloon .arrow {position: absolute; top: -10px; left: 10px; width: 0; height: 0; line-height: 0; border-left: 10px solid #ddd; border-top: 10px solid white;}

/* Block Styles */
.section {margin-bottom: 20px;}
.sectionTitle {padding: 4px 0 3px 10px; border: 1px solid #aaa; border-left: 5px solid #333; background-color: #eee; color: #d91281; font-size: 1.2em; font-weight: bold;}

.summary {margin-bottom: 20px; clear: both;}
.summary p.title, .detail p.title {font-size: 1.2em; font-weight: bold;}
.topic {margin-bottom: 10px; clear: both; border-bottom: 1px dotted #aaa;}

/* Form Styles */
.submitForm {padding: 20px; border: 1px solid #ccc; background-color: #f6f6f6; -moz-border-radius: 10px;-webkit-border-radius: 10px;}
.submit input {border: none; color: #fff; font-weight: bold; background-color: #77a900; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.submit input:hover {cursor: pointer; background-color: #d91281;}

/* Image Styles */
.picture {border: 1px solid #ccc; padding: 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px;}

/* Else */
.hidden {display: none;}
.translucidus {filter: alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
.captcha {padding: 5px; border: 1px solid #ccc; background: #fff;}

/* ------------------------------------------------------------
	4. Header Styles
------------------------------------------------------------ */
#logo {font-size: 3.0em; font-weight: bold; margin-bottom: 0;}
#catchcopy {font-size: 1.0em; font-weight: normal;}

/* ------------------------------------------------------------
	5. Main Contents Styles
------------------------------------------------------------ */
/* Article Styles */
.articleDetail .body {clear: both;}
.articleDetail .point {font-size: 20px; font-family: georgia; font-weight: bold;}
.articleDetail .point .unit {font-size: 10px;}
.articleSummary .picture {float: right; margin: 0 0 10px 10px;}
.articleTopic .title {padding-left: 20px; background: url(../img/icons/page_white_text.png) top left no-repeat;}

/* Comment Styles */
.commentSummary .body {width: 660px;}
.commentTopic .body {width: 240px;}

/* Tweet Styles */
.tweet {position: relative; padding: 10px; float: left; border: 1px solid #ccc; background-color: #f6f6f6; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.tweet .arrow {position: absolute; top: 10px; left: -10px; width: 0; height: 0; line-height: 0; border-top: 10px solid #ddd; border-left: 10px solid white;}
.tweetDetail .picture, .tweetSummary .picture, .tweetTopic .picture {float: left; margin-right: 15px;}
.tweetDetail .tweet, .tweetSummary .tweet {width: 585px;}
.tweetTopic .tweet {width: 235px;}

/* Paging Styles */
.paging {}
.paging span, .paging .page-prev, .paging .page-next {float: left; margin: 0 10px 0 0;}
.paging span:hover, .paging .page-prev:hover, .paging .page-next:hover {}
.paging .current {font-weight: bold; font-style: italic;}
.paging .current:hover {}
.paging .page-first {}
.paging .page-last {}
.paging .disabled {display: none;}

/* ------------------------------------------------------------
	6. Footer Styles
------------------------------------------------------------ */
#footer {padding: 20px 0 50px 0; border-top: 1px solid #ccc; background-color: #eee; color: #aaa; text-align: center;}
#footer li.naviItem {padding: 6px 20px 0 20px; float: left;}
#copyright {margin: 20px 0 0 0; clear: both;}

/* ------------------------------------------------------------
	7. Image Replacement
------------------------------------------------------------ */
.ir {position: relative; overflow: hidden;}
.ir span {width: 100%; height: 100%; position: absolute;}

/* ------------------------------------------------------------
	8. Hacks
------------------------------------------------------------ */
.clearfix {display: inline-block;}
.clearfix:after {height: 0; clear: both; display: block; content: "."; visibility: hidden;}