style.css

/* ------------------------------------
 * Typecho postile Theme
 *
 * @author	yufei.flyingfish@gmail.com
 * @link	http://www.postile.com
 * @update	2013-01-13 14:30
 * --------------------------------- */

/*
general
*/
p,a,h1,h2,h3,h4,h5{
    padding:0;
    margin:0;
}
p {
    line-height: 140%;
}

h1, h2, h3, h4, h5 {
    font-family: 'Oxygen', sans-serif;
}

pre ol, pre ul{
	font-size: 12px;
	line-height: 17px;
}
ul, ol, dl{
	font-size: 14px;
	line-height: 22px;
	color:#024d61;
}
mark{
	background-color:#e7e7e7;
	border-radius: 3px;
	padding: 0px 2px 0px 2px;
	color:#024d61;
}
blockquote{
	width: 80%;
	margin:20px auto 30px auto;
	font-family: 'Oxygen', sans-serif;
	font-size:14px;
	font-weight:400;
	background-image:url(img/quotebg.png);
	background-repeat:no-repeat;
	color:#0985ad;
	padding-left: 28px;
	padding-top: 14px

}


/*
layout
*/
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    border: 0 none;
    font-family: 'Roboto', sans-serif;
    background: #f5f5f5;
    height: 100%;
}
#overall_wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -94px;
}
#header_wrap {
    height: 89px;
    background: #024d61 url(img/header.png) center no-repeat;
}

#header {
    height: 89px;
    width: 920px;
    margin: 0 auto;
    position: relative;
}
#body {
    width: 920px;
    margin: 0 auto;
}
#main {
    width: 640px;
}
#sidebar {
    margin-top: 10px;
    width: 259px;
    float: right;
}
#footer_dummy {
    height:94px;
}
#footer_wrap {
    height: 94px;
    background: url(img/footer_wrap.png);
}
#footer {
    width: 920px;
    height: 94px;
    padding: 0 90px;
    background: url(img/footer.png);
    margin: 0 auto;
}

.cut_line {
    background: #024d61;
    opacity: 0.6;
    margin-top: 5px;
    width:920px;
    height: 1px;
    display: block;
}
/*
header
*/

h1#site_title {
    height: 22px;
    line-height: 22px;
    font-size: 22px;
    position: absolute;
    color: #FFF;
    font-weight: normal;
    left: 0;
    bottom: 16px;
    padding: 0;
    margin: 0;
}

p#header_nav {
    width: 300px;
    height: 14px;
    line-height: 22px;
    font-size: 15px;
    position: absolute;
    color: #FFF;
    font-weight: normal;
    bottom: 16px;
    right: 30px;
    padding: 0;
    margin: 0;
    margin-right: -40px;
}

#header_nav a {
    color:#FFF;
    padding-left:10px;
    padding-right:10px;
}
#header_wrap a{
    text-decoration:none;
    font-size: 13px;
}
#header_wrap a:hover {
    text-decoration:underline;
}

#header #logo {
    position: absolute;
    width : 175px;
    height : 20px;
    background: url(img/logo.png) no-repeat;
    left: 0;
    bottom: 10px;
}


/*
sidebar
*/

#search_bar  {
    height: 22px;
    margin-top:10px;
    margin-bottom:15px;
    border: solid 2px #024d61;
}

#search_bar input.text {
    float:left;
    display:block;
    line-height:14px;
    height:14px;
    padding:4px 0;
    margin:0px;
    border:0 none;
    font-size:14px;
    width:220px;
    background: #f5f5f5;
}
#search_bar input.text:focus {
    outline: none;
}
#search_bar input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    padding-top: 2px;
    font-size:13px;
}

#search_bar input.submit {
    float:right;
    display:block;
    width :33px;
    height:22px;
    background: url(img/search.png);
    padding:0;
    margin:0;
    margin-right: -2px;
    border:0 none;
    font-size:0px;
    cursor: pointer;
}

.wgbg {
    background: url(img/42-51-42.png) no-repeat;
    width: 259px;
}
.widget {
    width: 258px;
}
#widget1 .widget_title {
    font-weight:bold;
    color: #f5f5f5;
    margin-top: -29px;
    margin-left: 16px;
    margin-bottom:18px;
}
#widget1 .wgbg {
    height: 42px;
    background-position: 0 0;
}
#widget1 . {
    height: 42px;
    background-position: 0 0;
}

#widget2 .wgbg {
    height: 51px;
    background-position: 0 -42px;
}
#widget3 .wgbg {
    height: 42px;
    background-position: 0 -93px;
}
#end_of_widgets .wgbg {
    height: 28px;
    background-position: 0 -135px;
}
#widget1 {
    
}

#widget2, #widget3 {
    background: #dfefff;
}
.widget_content {
    width: 235px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 9px;
}
#widget1 .widget_content a {
    text-decoration:none;
    color:#f5f5f5;
}
#widget1 ul {
    color:#f5f5f5;
}

#widget1 .widget_content a:hover {
    text-decoration:underline;
}
#widget1 .widget_content {
    color: #f5f5f5;
    padding-top: 8px;
    margin-top: -11px;
    background: #024d61;
}
#widget2 .widget_content, #widget3 .widget_content {
    color: #024d61;
    margin-top: -10px;
}
#widget2 .widget_content a {
    color: #024d61;
    text-decoration:none;
}
#widget2 .widget_content a:hover {
    text-decoration:underline;
}
#widget3 .widget_content a {
    color: #024d61;
    text-decoration:none;
}
#widget3 .widget_content a:hover {
    text-decoration:underline;
}
.widget_content .widget_title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}
.widget_content ul {
    margin: 0;
    padding: 0;
}
.widget_content ul li {
    margin-left: 24px;
    line-height: 120%;
    padding-top: 3px;
    padding-bottom: 3px;
}



/*
 * featured
 */

#featured {
    padding-top: 40px;
    display: block;
}
#featured h4 {
    color:#024d61;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}
#featured a#rssLink {
    background: url(img/rss_small.png) no-repeat;
    width:25px;
    height:25px;
    margin-top:0px;
    margin-right:30px;
    float: right;
}
#featured .featured_title {
    margin-top: 5px;
}
#featured h3 a{
    color:#024d61;
    font-size:18px;
    text-decoration:none;
}
#featured h4 {
    display: inline;
}

#featured p.date{
    color:#c5c5c5;
    margin-top: 5px;
    font-size:14px;
}
#featured .article p {
    line-height:140%;
    font-size:14px;
    padding-bottom:10px;
}


#featured .content{
    display: block;
    width: 400px;
    margin-left:50px;
    margin-top:10px;
}

#featured .content {
    width: 400px;
}
#featured .content .article  a{font-style:italic; text-decoration:none; border-bottom: 1px dotted #0985ad;}
#featured .content .article a:link {color:#0985ad;}
#featured .content .article a:visited {border-bottom: 1px dotted #919191; color:#919191;}
#featured .content .article a:active  {color:#919191;}


#featured .content .article h1, 
#featured .content .article h2,
#featured .content .article h3, 
#featured .content .article h4,{
	font-family: 'Oxygen', sans-serif;
	font-weight:300;
	color:#024d61;
	margin-top: 30px;
}

#featured .f_image {
    display:inline;
    float:right;
    width: 327px;
    margin-right:80px;
}
#featured .f_image img {
}


/* main */
#main {
    width : 620px;
    float : left;
}

#main .post {

}

#main .search_title p{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    color:#024d61;
}

#main .not_found h2 {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #024d61;
}
#main .not_found p {
    margin-top: 20px;
    margin-left: 40px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #024d61;
}

.post .post_header {
    display: block;
    padding:20px;
}
.post .post_header .post_date{
    width:53px;
    height:42px;
    margin-right:8px;
}
.post .post_header .post_date p{
    margin:0;
    margin-top: 1px;
    text-align:center;
    color:#FFF;
    line-height:140%;
    font-size:14px;
}

.post .post_date {
    background: url(img/post_pointer.png) no-repeat;
    float: left;
    display: block;
    width: 70px;
}

.post .post_title {
    padding-left:8px;
}
.post .post_title a {
    color:#024d61;
    font-size:18px;
    text-decoration:none;
}
.post .post_title a:hover {
    text-decoration:underline;
}
.post .author {
    padding-left:8px;
    color:#0a85ad;
    font-size:12px;
}


.post .post_content {
    padding-left : 40px;
}
.post .post_content p {
    line-height:140%;
    font-size:14px;
    padding-bottom:10px;
}
.post .post_content a{font-style:italic; text-decoration:none; border-bottom: 1px dotted #0985ad;}
.post .post_content a:link {color:#0985ad;}
.post .post_content a:visited {border-bottom: 1px dotted #919191; color:#919191;}
.post .post_content a:active  {color:#919191;}

.post .post_content h1, 
.post .post_content h2,
.post .post_content h3, 
.post .post_content h4{
	font-family: 'Oxygen', sans-serif;
	font-weight: 300;
	color: #024d61;
	margin-top: 30px;
	margin-bottom: 30px;
}

.post .post_item {
    padding-top:10px;
    margin-bottom:20px;
}

.post .post_item p{
    font-size:11px;
    display:inline;
    padding-left: 40px;
    margin: 0;
    color:#07668e;
}

.post .post_item ul{
    padding: 0;
    padding-left: 5px;
    display:inline;
}

.post .post_item a{
    font-size:11px;
    display: inline;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
    margin-left: 5px;
    background:#e7e7e7;
    color:#07668e;
    text-decoration:none;
}
.post .post_item a:hover {
    text-decoration:underline;
}
.post_cut {
    height: 1px;
    opacity: 0.6;
    background: #024d61;
}

/* for List of Result and No Result */




/*
 * page-navigator
 */

.page-jjigator {
    padding:0;
    margin:0;
    margin-top: 5px;
    margin-bottom: 42px;
    height: 32px;
    list-style:none;
}
.page-navigator li a {
    display:none;
}
.page-navigator li {
    list-style:none;
}
ol.page-navigator {
    padding-left: 5px;
}
.page-navigator li a.prev {
    background: url(img/newer_post.png) no-repeat;
    height: 34px;
    width: 104px;
    display: block ;
    float: left;
    font-size: 12px;
    padding-left:16px;
    padding-top:6px;
    color: #FFF;
    margin:0px;
    text-decoration:none;
}
.page-navigator li a.next {
    background: url(img/older_post.png) no-repeat;
    height: 34px;
    width: 104px;
    display:block;
    float: right;
    font-size: 12px;
    padding-left:6px;
    padding-top:6px;
    color: #FFF;
    margin:0px;
    text-decoration:none;
}


#footer a,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer p{
    color: white;
}

#footer .copy_r {
    margin: 20px;
    margin-left: 80px;
    margin-top: 22px;
    font-size: 14px;
}
#footer .copy_r p{
    padding-left: : 127px;
    padding-top: 20px;
}

#footer #f_nav {
    margin-left: 30px;
}
#footer #f_nav p {
    margin-top: -18px;
}
#footer #f_nav a {
    margin-left: 2px;
    margin-right: 2px;
    padding-left:3px;
    padding-right:3px;
    font-size: 14px;
    text-decoration: none;
}
#footer #f_nav a:hover {
    text-decoration: underline;
}

#footer .word {
    padding-top:20px;
}

#footer .f_logo{
    background: url(img/footer_logo.png) no-repeat;
    position:relative;
    width:200px;
    height:70px;
    margin:20px;
    margin-left: -5px;
    float:left;
}
#footer .f_logo h2{
    font-size:39px;
    padding:0;
    margin:0;
}
#footer .f_logo p {
    position:absolute;
    font-size: 26px;
    left:22px;
    bottom:-18px;
}

#footer .f_sns .f_google {
    background: url(img/google.png) no-repeat;
    height: 100px;
    width: 100px;
}
#footer .f_sns ul {
    margin-left: 250px;
    height: 100px;
}
#footer .f_sns ul li {
	font-size: 17px;
    display: inline;
	padding-left:20px;
    color:white;
}


/*
 * button
 */

.bt_more {
    margin-top:20px;
    background:none;
    text-decoration:none;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #024d61;
    height:26px;
    width:61px;
    cursor:pointer;
    margin-bottom: 15px;
}
.bt_more a {
    font-size:11px !important;
    text-decoration:none !important;
    color:#024d61 !important;
    cursor:pointer !important;
    padding:3px !important;
    padding-top:5px !important;
    float:left !important;
    border-bottom: 0 !important;
    font-style: normal !important;
}
.bt_back {
    margin-top:20px;
    margin-left:40px;
    margin-bottom:40px;
    background:none;
    text-decoration:none;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #024d61;
    height:26px;
    width:61px;
    cursor:pointer;
}
.bt_back a.back {
    font-size:13px;
    text-decoration:none;
    color:#024d61;
    cursor:pointer;
    padding:2px;
    padding-top:3px;
    padding-left:17px;
    padding-right:17px;
    float:left;
}

/*
misc
*/
.clear {
    clear: both;
}