/*
Theme Name:		Design Made Better
Theme URI:		http://www.designmadebeter.com
Description:	        A handmade approach to web design.
Author:			April Holle in conjunction with Amy Lamp
Author URI:		http://www.aprilholle.com/

Styles for Design Made Better
Created by April Holle on 2009-11-01
Copyright (c) 2009 Made Better Studio. All rights reserved.

Bookmarking:
==layout
==common
==form

Colors:
brown - #351d1d
cream - #f4f5e7
beige - #9da24f
blue - #8fc3c7
*/

/* ==layout */

html {width: 100%; height: 100%; margin: 0; padding: 0;}
body {width: 100%; height: 100%; margin: 0; padding: 0; background: #f4f5e7 url('images/bg-body.jpg') top center no-repeat; color: #3c3c3c; font-family: Helvetica, Arial, Sans-Serif; font-size: .8em;}

#container {width: 1000px; margin: 82px auto 20px auto;}

#header {background: url('images/bg-btm-hdr.png') no-repeat bottom center; padding: 0 0 5px 0;}
#header #branding {float: left; width: 615px; margin: 0 105px 0 25px;}

#content {background: url('images/bg-content.png') repeat-y bottom center; padding: 20px 30px;}
.col-main {float: left; width: 580px; margin: 20px 60px 0 0;}
.col-side {float: left; width: 300px; margin: 20px 0 0 0;}
.col-half {float: left; width: 280px; margin: 20px 0 0 0;}
.first {margin: 20px 20px 0 0;}
.post {background:url('images/divider.gif') no-repeat left bottom; padding: 0 0 35px 0; margin: 0 0 15px 0;}
.callout-workshop {width: 560px; height: 105px; padding: 20px 15px; background:url('images/bg-callout.png') no-repeat;}


.sidebar { margin: 0 0 15px 0; background:url('images/bg-sidebar-section.png') repeat-y top center;}
.sidebar-1-top {background: url('images/bg-top1-sidebar-section.jpg') no-repeat top center; padding: 20px 15px 0 15px;}
.sidebar-2-top {background: url('images/bg-top2-sidebar-section.jpg') no-repeat top center; padding: 20px 15px 0 15px;}
.sidebar-3-top {background: url('images/bg-top3-sidebar-section.jpg') no-repeat top center; padding: 20px 15px 0 15px;}
.sidebar-bottom {margin: 10px 0 0 0;}

.postmetadata {border: dashed #8fc3c7 1px; margin: 10px 0; padding: 5px;}
.details {border-bottom: dashed #8fc3c7 1px;}

#footer {background: url('images/bg-ftr.png') repeat-y top center; padding: 25px 30px; color: #f4f5e7; font-size: .9em;}
#footer-branding {width: 110px; float: left; margin: 0 50px 0 0;}
#f-nav {float: left;}
#footer-bottom {height: 12px; overflow: hidden; text-align: center;}

.question {min-height: 40px; background: url('images/q.png') no-repeat top left; padding: 0 0 0 40px; font-weight: bold; color: #9da24f; font-size: 1.1em;}
.post .img-feat {border: 2px solid #9da24f; margin: 0 0 10px 0;}
.answer {min-height: 40px; background: url('images/a.png') no-repeat top left; padding: 0 0 0 40px;}

.navigation {margin: 10px 0;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.txt-center {text-align: center;}
.txt-right {text-align: right;}

.alignleft {float: left; width: 45%; margin: 10px 3% 0 0; border: dashed #8fc3c7 1px;}
.alignright {float: right; width: 45%; margin: 10px 0 0 0; border: dashed #8fc3c7 1px;}
.alignleft:hover, .alignright:hover  {background-color: #8fc3c7;}
.wp-caption {padding: 10px; background-color: #f4f5e7; border: dashed #351d1d 1px; text-align: center;}
	
.hidden {visibility:hidden;}

/* ==common */
* a {outline: none;}
h1 {margin: 0 0 10px 0; padding: 0; font-size: 1.8em; color: #8fc3c7;}
.callout-workshop h1 {color: #351d1d;}
.sidebar h2 {font-size: 1.3em; text-transform: lowercase; margin: 0 0 15px 0;}
h2 {margin: 0; padding: 0; font-size: 1.4em; color: #351d1d; font-family: Georgia, Serif; font-weight: normal;}
h3 {margin: 0; padding: 0; font-size: 1.2em; color: #351d1d; font-family: Georgia, Serif; font-weight: normal;}

#branding a img, #footer-branding a img, .sidebar a img {border: none;}
#search img {vertical-align: middle;}
.col-half img, .tn-left {float: left; width: 80px; padding: 3px; margin: 0 10px 0 0; border: 1px solid #9da24f;}
.wp-caption img {border: solid #9da24f 1px;}
.sidebar-bottom img {vertical-align: bottom;}
#footer-bottom img {vertical-align: top;}

p {margin: 10px 0; padding: 0; line-height: 1.4em;}
#branding p {margin: 10px 0 0 0; padding: 0; font-size: 1.1em;}
.callout-workshop p {width: 170px; height: 55px; margin: 5px 0 0 0; overflow: hidden; font-size: 12px;}
#f-nav p {margin: 10px 0 0 0;}
.alignleft p, .alignright p {margin: 0;}

a:link, a:visited {color: #9da24f; text-decoration: none;}
#footer a:link, #footer a:visited {color: #f4f5e7;}
a:hover {text-decoration: underline;}
a.more {display:block; height: 25px; padding: 0 45px 0 0; background: url('images/bg-btn-learn-more.png') no-repeat right center; text-align: right; text-decoration: none; line-height: 25px;}
a.more-left {float: left; display:block; width: 40%; height: 25px; padding: 0 45px 0 0; background: url('images/bg-btn-learn-more.png') no-repeat right center; text-align: right; text-decoration: none; line-height: 25px;}
#shopp a.more-left {float: left; display: inline-block; width: auto; height: 25px; padding: 0 45px 0 0; margin: 0 40px 0 0; background: url('images/bg-btn-learn-more.png') no-repeat right center; text-align: left; text-decoration: none; line-height: 32px; font-size:1.1em; letter-spacing: 1px;}
a.more-right {float: right; display:block; width: 40%; height: 25px; padding: 0 45px 0 0; background: url('images/bg-btn-learn-more.png') no-repeat right center; text-align: right; text-decoration: none; line-height: 25px;}

.callout-workshop a.more, .sidebar a.more {color: #351d1d; font-size: 1.2em;}
.callout-workshop a.more {margin-top: -10px;}
.alignleft a:link, .alignleft a:visited, .alignright a:link, .alignright a:visited {display: block; padding: 5px; color: #351d1d;}
.alignleft:hover a:link, .alignleft:hover a:visited, .alignright:hover a:link, .alignright:hover a:visited, .alignleft:hover a:hover, .alignright:hover a:hover {display:block; padding: 5px; color: #f4f5e7;}

ul li, ol li {margin: 10px 0; line-height: 1.4em;}

ul#p-nav {clear: both; margin: 0; padding: 0 0 0 25px; list-style: none; text-transform: lowercase;}
ul#p-nav li {float: left; margin: 0 15px;}
ul#p-nav li a:link, ul#p-nav li a:visited {display: inline-block; height: 20px; padding: 38px 0 0 0; color: #351d1d; text-decoration: none;}
ul#p-nav li a#home:hover, ul#p-nav li a#home.on {background:url('images/bg-pnav-home.png') no-repeat center 5px;}
ul#p-nav li a#courses:hover, ul#p-nav li a#courses.on {background:url('images/bg-pnav-courses.png') no-repeat center 5px;}
ul#p-nav li a#articles:hover, ul#p-nav li a#articles.on {background:url('images/bg-pnav-articles.png') no-repeat center 5px;}
ul#p-nav li a#critiques:hover, ul#p-nav li a#critiques.on {background:url('images/bg-pnav-critiques.png') no-repeat center 5px;}
ul#p-nav li a#qa:hover, ul#p-nav li a#qa.on {background:url('images/bg-pnav-qa.png') no-repeat center 5px;}
ul#p-nav li a#workshops:hover, ul#p-nav li a#workshops.on {background:url('images/bg-pnav-workshops.png') no-repeat center 5px;}
ul#p-nav li a#about:hover, ul#p-nav li a#about.on {background:url('images/bg-pnav-about.png') no-repeat center 5px;}

ul#comment_list {list-style: none; margin: 10px 0; padding: 0;}
ul#comment_list li {border-bottom: dashed #8fc3c7 1px; padding: 10px 30px; margin: 0;}
ul#comment_list li.author {background-color:#F4F5E7;}

#f-nav ul {list-style: none; margin: 5px 0 25px 0; padding: 0; text-transform: lowercase;}
#f-nav ul li {float: left; margin: 0 15px;}
#f-nav ul li.first {margin: 0 15px 0 0;} 

.sidebar ul {list-style: none; margin: 10px 0; padding: 0;}
.sidebar ul li {margin: 5px 0;}

blockquote {padding: 10px 30px; background-color: #f4f5e7; border: dashed #8fc3c7 1px;}

/* ==form */

.tdomf_form_message, .tdomf_form_preview {background-color: #8fc3c7; margin: 10px 0; padding: 20px;}

input.txtbox, .tdomf_form input, .text_input{border: 1px solid #c6c8a4; height: 14px; padding: 5px; margin: 0 0 5px 0;}

input.submit, input#tdomf_form2_preview, input#tdomf_form2_send, .form_submit, .addtocart {height: 25px; border: none; background: none; color: #9da24f; font-size: 1.1em; cursor: pointer; float: right; margin: 0 0 10px 0;}
.addtocart {float: none; padding: 0 45px 0 0; background: url('images/bg-btn-learn-more.png') no-repeat right center; text-align: right; }
#comment_form label, .sidebar label {display: inline-block; vertical-align: middle; margin: 0 5px 0 0; text-align: right; width:100px;}
.sidebar label {display: inline-block;  margin: 0 5px 0 0; text-align: right; width:50px;}
#comment_form label.top { vertical-align: top;}

fieldset {border-top: 1px dashed #8fc3c7; border-bottom: 0; border-left: 0; border-right: 0; margin-bottom: 10px;}
legend {font-weight: bold; padding: 0 10px;}

textarea#comment {width: 460px; border: 1px solid #c6c8a4; }

table.tdomf_buttons {width: 100%;}

.post table, .post td {border: dashed #8fc3c7 1px;;}