Mod CSS for felix021.com

styles.css

/*
    Bo-Blog v2.1 default skin mod by snoopy for felix021.com

    link-color: #0d80bd;
    light-link-color: #3d99ca;

    border-color: #9ecce4;
    light-border-color: #bee6fd;

    background-color: #2e93c9;
    light-background-color: #effaff;
*/

/* General Styles */
* {
    box-sizing: border-box;
}
html, body, div, p, a, img, span, h1, h2, h3, h4, h5, h6, ul, li, button {
    padding: 0;
    margin: 0;
    border: 0;
}
html, body, div, p, h1, h2, h3, h4, ul, li {
    display: block;
}
a, img, span, button {
    display: inline-block;
}

body {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    font-family: Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, STXihei, 华文细黑, 'Helvetica Neue', Helvetica, SimSun, 宋体, Heiti, 黑体, sans-serif;
    background-color: #fff;
    color: #000;
    text-align: left;
}
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    text-decoration: none;
    color: #777;
}
hr {
    height: 1px;
    border: none;
    border-top: 1px solid #333;
}
/* end of General Styles */

/* form */
form {
    display: inline;
}
input, textarea {
    font-size: 14px;
}
input.text, input.button, textarea, select {
    background-color: #fff;
    border: 1px solid #bee6fd;
}
input.button {
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
}
input[type=checkbox], input[type=radio] {
    cursor: pointer;
}
/* end of form */

/* input form (table) */
.formbox,
.formbox-comment {
    border: 1px solid #9ecce4;
    padding: 5px;
}

.formbox-title,
.formbox-comment-title,
.messagebox-title,
.linkgroup,
#pagelocation-archive td[colspan="4"] {
    background-color: #bee6fd;
    font-size: 16px;
    line-height: 28px;
    font-weight: bold;
    padding: 2px 12px 0;
}

.formbox-rowheader {
    padding: 6px;
    text-align: right;
    font-weight: bold;
}

.formbox-content {
    padding: 6px;
}

.formbox-comment-content {
    line-height: 24px;
}

/* TODO: padding/margin hack on commentbox can be removed now */
/* end of input form (table) */

/* layout */
#wrapper {}

#innerWrapper {
    width: 1170px;
    margin: 0 auto;
}

#header {
    margin: 8px auto;
}

#mainWrapper {}
#content {
    float: left;
    width: 840px;
}
#sidebar {
    float: right;
    width: 320px;
}

#footer {
    display: none;
}
/* enf of layout */

/* header */
#innerHeader {}
#blogLogo {
    display: none;
}
.blog-header {}
.blog-title {
    font-size: 28px;
    line-height: 56px;
}
.blog-desc {
    display: none;
}
#menu {
    text-align: center;
    border-bottom: 4px solid #bee6fd;
}
#menu ul {
    font-size: 0;
    margin-top: -30px;
    float: right;
}
#menu li {
    font-size: 14px;
    display: inline-block;
}
#menu a {
    width: 72px;
    padding: 6px 0 3px;
    color: #999;
    font-weight: bold;
    border: 1px solid #fff;
    border-bottom: none;
}
#menu a:hover, #menu .activepage a {
    color: #000;
    background-color: #effaff;
    border: 1px solid #bee6fd;
    border-bottom: none;
}
/* end of header */

/* page layout */
.announce {
    display: none;
}
.article-top {
    background-color: #effaff;
    padding: 8px;
    margin-bottom: 8px;
}
.article-top div {
    display: inline-block;
}
.article-top img {
    margin-right: 4px;
}
.article-top .next-article {
    float: right;
}
.pagebox-title {
    margin-bottom: 12px;
}
.pagebox-title h4 {
    border-bottom: 2px solid #effaff;
    font-size: 24px;
    line-height: 42px;
}
.article-bottom {
    margin: 16px auto;
}
/* end of page layout */

/* page links */
.pages, .comment-pages {
    padding: 5px;
    color: #0d80bd;
}
.pages {
    border: 1px solid #9ecce4;
    margin-bottom: 8px;
}
.pagebar-selections {
    font-size: 0;
    height: 0;
}
.pagelink-current {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #2e93c9;
    padding: 0 6px;
}
.pages img {
    height: 100%;
}
.pages .pagebar-selections a {
    font-size: 14px;
    padding: 0 6px;
}
.pages .pagebar-selections a:hover {
    color: #fff;
    background-color: #bee6fd;
}
/* end of page */

/* sidebar */
#innerSidebar {
    border: 1px solid #9ecce4;
    padding: 6px;
    margin-bottom: 16px;
}
#innserSidebarSearch {
    display: none;
}
#innerSidebar .panel {
    margin-bottom: 10px;
}
#innerSidebar .panel h5 {
    background-color: #bee6fd;
    font-size: 16px;
    line-height: 28px;
    padding: 2px 12px 0;
}
#innerSidebar .panel h5:hover {
    cursor: pointer;
}
#innerSidebar .panel .panel-content {
    padding: 6px 12px 0;
}
#innerSidebar .panel .panel-content ul {
    margin: 0 -6px;
}
#innerSidebar .panel li {
    padding: 2px 6px;
    border-bottom: 1px solid #bee6fd;
}
#innerSidebar .panel li:hover {
    background-color: #effaff;
}
#innerSidebar .panel li.indent {
    padding-left: 9px;
}
#innerSidebar .panel li.indent:before {
    content: "» ";
}

#innerSidebarTwo {
    display: none;
}
#innerSidebarFooter {
    display: none;
}
/* end of sidebar */

/* main content */
.textbox {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #bee6fd;
}
.textbox-calendar {
    float: left;
    border: 1px solid #2e93c9;
    font-family: Arial, serif;
    text-align: center;
    width: 48px;
}
.textbox-calendar-month {
    display: block;
    background-color: #2e93c9;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 18px;
}
.textbox-calendar-day {
    display: block;
    background-color: #effaff;
    font-size: 24px;
    line-height: 32px;
}
.textbox-title {
    padding-left: 54px;
}
.textbox-title h4 {
    padding-left: 4px;
    margin-right: 200px;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
    border-bottom: 2px solid #effaff;
}
.textbox-title h4 a {
    color: #0d80bd;
}
.textbox-label {
    padding-left: 4px;
    line-height: 28px;
}
.text-label-indented {
    float: right;
    font-size: 12px;
}
.textbox-tburl {
    background-color: #effaff;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
}
.textbox-content {
    clear: both;
    word-wrap: break-word;
    padding: 6px;
}
.textbox-content a,
.commentbox-content > a,
.trackbackbox-content > a,
.quote-content > a {
    color: #0d80bd;
    border-bottom: 1px dotted #0d80bd;
}
.textbox-bottom {
    display: none;
}
.tags {
    padding: 4px 8px;
    background-color: #effaff;
}
.tags a {
    color: #0d80bd;
}
/* end of main content */

/* blocks */
.code, .quote {
    border-left: 4px solid #ccc;
    padding: 6px 9px;
    margin: 6px;

}
.code {
    border-left-color: #bee6fd;
    background-color: #effaff;
    color: #000;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.kw {
    font-weight: bold;
    color: #3d99ca;
}
.quote {
    background-color: #f7f7f7;
}
.quote-title {
    background-color: #ddd;
    margin: -6px -9px 6px -9px;
    padding: 6px 9px;
    font-weight: bold;
}
.quote-title img {
    vertical-align: text-bottom;
    margin-right: 4px;
}
/* end of blocks */

/* listbox page */
.listbox-header {
    background-color: #bee6fd;
    line-height: 28px;
    font-weight: bold;
    padding: 2px 12px 0;
}
.listbox-entry {
    line-height: 24px;
    border-bottom: 1px solid #bee6fd;
}
.listbox-table tr:hover {
    background: #effaff;
}
.listbox-table tr td.listbox-entry:last-child {
    font-size: 12px;
}
/* TODO: change width=70 hack on listbox-header last td to width=84, then
 .listbox-header can merge as .formbox-title on line 72 (limit by width now),
 and can remove td.listbox-entry:last-child hack on a small font for date
 */
/* end of listbox page */

/* comments */
#commentForm {
    margin-bottom: 8px;
}
.commentbox, .trackbackbox {
    margin-bottom: 8px;
}
.commentbox-title, .trackbackbox-title {
    padding: 6px 9px;
    background-color: #bee6fd;
    font-weight: bold;
}
.commentbox-title a, .trackbackbox-title a{
     color: #0d80bd;
}
.commentbox-label, .trackbackbox-label{
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
}
.commentbox-content, .trackbackbox-content {
    padding: 6px 9px;
}
.panel-smilies {
    border: 1px solid #bee6fd;
    margin-bottom: 4px;
}
.panel-smilies .panel-smilies-title {
    background-color: #bee6fd;
    padding: 2px 4px;
}
.panel-smilies .panel-smilies-content {
    padding: 4px;
}
/* end of comments */

/* messagebox */
.messagebox {
    width: 600px;
    margin-top: 120px;
    border: 1px solid #9ecce4;
}
.messagebox-content {
    padding: 12px;
    text-align: left;
}
.messagebox-bottom {
    padding: 4px;
    background-color: #effaff;
    border-top: 1px solid #bee6fd;
}
/* end of messagebox */

/* links page */
.linkover {
    margin-bottom: 8px;
}
.linkgroupcontent {
    padding: 0 8px;
}
.linkbody {
    padding: 6px;
}
.linktitle {
    font-weight: bold;
}
.linktitle a {
    color: #0d80bd;
}
/* end of links page */

/* archive page */
#pagelocation-archive td:not([colspan="4"]) {
    padding: 2px 16px;
}
#pagelocation-archive td:not([colspan="4"]) a {
    color: #0d80bd;
}
/* TODO: assign a css class to archive year td then the css selector can be
more simple */
/* end of archive page */

/* fit for diffrent screen */
@media (max-width: 1250px) {
    #innerWrapper {
        width: 970px;
    }
    #content {
        width: 690px;
    }
    #sidebar {
        width: 270px;
    }
    .textbox-title h4 {
        margin-right: 0;
    }
}

@media (max-width: 1000px) {
    #innerWrapper {
        width: 770px;
    }
    #content {
        width: 520px;
    }
    #sidebar {
        width: 240px;
        font-size: 12px;
    }
    .textbox-label {
    	font-size: 12px;
    }
}
/* end of fit for diffrent screen */