/* 
    Document   : style.css
    Created on : 26-Jan-2012, 16:17:25
    Author     : adrian
    Description:
        Style sheet for bedford reflexology ... version 2 - Static Site
*/

/* Custom Fonts - Note: You'll need to add the font files to your assets */
@font-face { 
    font-family: Candara; 
    src: url('Candara.eot'); 
    src: local('Candara.ttf'),local('Candara.ttf'), url('Candara.ttf') format('truetype');
}
@font-face { 
    font-family: Candara; 
    font-weight:bold; 
    src: url('CandaraBold.eot'); 
    src: local('CandaraBold.ttf'),local('CandaraBold.ttf'), url('CandaraBold.ttf') format('truetype');
}

/* Block Levels */
root, html, body, div.wrap, div.header, div.footer, div.sidebar, div.content {
    display: block;
    padding:0;
    margin:0;
}

/* Block Level Proportions */
div.wrap {width:50em;} /* overall available width */
div.header, div.footer {width:100%;}
div.sidebar {width:12.6em;}
div.content {width:42em;}

/* Block Level Behaviours */
div.center {margin:0 auto;}
div.left {float:left;}
div.clearfix {clear:both;}

/* Basic Styling */
body {
    background:#F2F2F2;
    font-family: Candara, Arial, sans-serif;
    font-size: 101%; /* ie fix */
}

div.wrap {
    padding:2em 2.5em;
    background:#ffffff;
    border:1px solid #9fb079;
    border-top: none;
}

div.header {
    padding-bottom:2em;
}

/* Header images */
div.header a img {border:0;}
div.header img {display:block; margin:0; padding:0;float:left;}
div.header img.ifr {width:8em; padding-right:2em;}
div.header img.brc {width:28em; padding:1em 2em 0 0;}
div.header img.flower{width:8em; padding-left:2em;}

/* Sidebar */
div.sidebar {
    min-height: 30em;
    font-size:0.8em;
}
div.sidebar ul {
    text-decoration: none;
    list-style: none;
    padding:0;
    margin: 0;
    padding-top:0.3em;
}
div.sidebar ul li {
    padding-bottom:1.5em;
    text-transform:capitalize;
}

/* Content */
div.content {
    padding-left:0.3em;
    font-size:0.9em;
    color:#5f5a47;
}
div.content h1, div.content h2, div.content table {
    padding:0;
    margin:0;
    margin-bottom:0.3em;
}
div.content h1, div.content h2{
    font-weight:normal;
}
div.content h1 {
    font-size:2em;
    color:#9fb079;
}
div.content h2 {
    font-size:1.5em;
}
div.content p {
    padding:0 0 1em 0;
    margin:0;
}
div.content img {
    border:2px solid #9bac75;
    padding:1px;
}
div.content table ul {
    padding:0 1em;
    margin:0;
}

/* Links */
a {
    color:#9fb079;
    font-weight:bold;
    text-decoration:none;
}

h1 a {
    font-weight:normal;
}

/* Post styling */
.post {
    padding-bottom:2em;
    margin-bottom:1em;
    border-bottom:1px solid #9bac75;
}

/* Image alignment */
img.alignleft, .alignleft {
    float:left;
    margin-right:1em;
    margin-bottom:1em;
}
img.alignright, .alignright {
    float:right;
    margin-left:1em;
    margin-bottom:1em;
}
.aligncenter {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

/* WordPress block compatibility - keeping essential styles */
.wp-block-image {
    margin:0 0 1em;
}
.wp-block-image img {
    height:auto;
    max-width:100%;
    vertical-align:bottom;
}
.wp-block-image.aligncenter {
    text-align:center;
}

/* Table styling */
table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:1em;
}
td, th {
    padding:0.5em;
    vertical-align:top;
}

/* Current page indicator */
.current_page_item a {
    color:#5f5a47;
    font-weight:bold;
}

/* Size classes */
.size-thumbnail {
    max-width:150px;
    height:auto;
}
.size-medium {
    max-width:300px;
    height:auto;
}

/* Navigation menu */
.menu ul {
    list-style:none;
    padding:0;
    margin:0;
}
.menu li {
    margin-bottom:1em;
}
.menu a {
    color:#9fb079;
    text-decoration:none;
    font-weight:normal;
}
.menu a:hover {
    color:#5f5a47;
}

/* Entry content */
.entry-content {
    line-height:1.6;
}
.entry-title {
    margin-bottom:0.5em;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    div.wrap {
        width:95%;
        padding:1em;
    }
    div.sidebar {
        width:100%;
        margin-bottom:2em;
    }
    div.content {
        width:100%;
    }
    div.header img.brc {
        width:60%;
    }
    div.header img.ifr,
    div.header img.flower {
        width:15%;
    }
}

@media (max-width: 500px) {
    div.header img {
        width:100% !important;
        float:none !important;
        margin:0.5em 0 !important;
        padding:0 !important;
    }
}