/*
Theme Name: Buddy Icons Theme
Theme URI: http://buddy-icons.com
Description: Custom theme matching the original Buddy Icons website design
Version: 1.0
Author: Buddy Icons
Author URI: http://buddy-icons.com
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #CCCCCC;
    margin: 0;
    padding: 0;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
}

/* Links - Original styling */
a:link {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #666666;
    text-decoration: none;
}

a:visited {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
    font-style: normal;
    text-decoration: none;
}

a:active {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
    font-style: normal;
    text-decoration: none;
}

a:hover {
    color: #333333;
    text-decoration: underline;
}

/* Main Container */
.main-container {
    width: 77%;
    margin: 0 auto;
    background-color: #FFFFFF;
}

/* Header Area */
.header-wrapper {
    background: url('../../../images/my-buddy-icons-bj.jpg') no-repeat;
    background-size: cover;
}

.header-top-border {
    background-color: #666666;
    height: 1px;
}

.header-content {
    padding: 20px 12px;
    min-height: 200px;
}

.header-title h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
}

.header-title .newera {
    font-size: 24px;
    color: #666666;
}

.header-title .newera-e {
    font-size: 32px;
    color: #003399;
    font-style: italic;
}

.header-title .my-text {
    font-size: 28px;
    color: #FF6600;
    font-style: italic;
}

.header-title .buddy-icons-text {
    font-size: 28px;
    color: #000000;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}

.header-title a {
    color: #000000;
    text-decoration: none;
}

.header-description {
    font-size: 10px;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    margin-top: 10px;
}

/* Navigation Menu */
.nav-wrapper {
    background: url('../../../images/menubackgroup.jpg') repeat-x;
    height: 53px;
}

.nav-menu {
    display: table;
    width: 100%;
    height: 31px;
    table-layout: fixed;
}

.nav-menu a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
    text-decoration: none;
    padding: 8px 10px;
}

.nav-menu a:hover {
    color: #333333;
}

.nav-menu span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
    padding: 8px 10px;
}

/* Content Layout - Two Column */
.content-wrapper {
    display: table;
    width: 100%;
    background-color: #FFFFFF;
}

.sidebar-left {
    display: table-cell;
    width: 42%;
    vertical-align: top;
    background-color: #FFFFFF;
    padding: 15px;
}

.content-main {
    display: table-cell;
    width: 58%;
    vertical-align: top;
    background-color: #EBEBEB;
    padding: 15px;
}

/* Sidebar Styling */
.sidebar-section {
    margin-bottom: 20px;
}

.sidebar-section img {
    display: block;
    margin: 0 auto 10px;
}

.sidebar-section p {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
    line-height: 1.5;
}

.sidebar-section .feature-title {
    color: #0066CC;
    font-weight: bold;
}

.section-divider {
    height: 1px;
    background-color: #CCCCCC;
    margin: 15px 0;
}

/* Blog Posts */
.blog-posts {
    background-color: #EBEBEB;
}

.post {
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #CCCCCC;
}

.post-title {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333333;
    margin-bottom: 10px;
}

.post-title a {
    color: #333333;
    text-decoration: none;
    font-size: 18px;
}

.post-title a:hover {
    color: #0066CC;
}

.post-meta {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #999999;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEBEB;
}

.post-content {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    color: #666666;
    line-height: 1.6;
}

.post-content p {
    margin-bottom: 10px;
}

.post-thumbnail {
    margin-bottom: 15px;
}

.post-thumbnail img {
    max-width: 100%;
    height: auto;
    border: 1px solid #CCCCCC;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #0066CC;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 20px 0;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 12px;
}

.pagination a {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background-color: #666666;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px;
}

.pagination a:hover {
    background-color: #333333;
    color: #FFFFFF;
}

/* Single Post */
.single-post {
    background-color: #FFFFFF;
    padding: 20px;
}

.single-post .post-title {
    font-size: 24px;
    margin-bottom: 15px;
}

.single-post .post-content {
    font-size: 12px;
    line-height: 1.8;
}

.back-link {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #CCCCCC;
}

.back-link a {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 11px;
    color: #0066CC;
}

/* Footer */
.footer-wrapper {
    background-color: #666666;
    height: 1px;
}

.footer-content {
    background-color: #CCCCCC;
    padding: 15px;
    text-align: center;
}

.footer-content a {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 10px;
    color: #666666;
}

/* Recommended Section */
.recommended-section {
    text-align: center;
    margin: 20px 0;
}

.recommended-section h3 {
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}

.recommended-section a {
    display: block;
    margin: 5px 0;
    font-family: "Verdana", "Arial", "Helvetica", sans-serif;
    font-size: 11px;
}

/* Border elements */
.border-left {
    width: 1px;
    background-color: #666666;
}

.border-right {
    width: 1px;
    background-color: #333333;
}

.border-bottom {
    height: 1px;
    background-color: #666666;
}

/* Trial banner */
.trial-banner {
    background: url('../../../images/right-colormenu.jpg') repeat-x;
    padding: 10px;
    text-align: center;
}

.trial-banner a {
    font-size: 11px;
    color: #666666;
}

/* Blog header */
.blog-header {
    background-color: #EBEBEB;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #999999;
}

.blog-header h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #333333;
}