/* 
Name: Baking with Flo
Description: Personal Website of Flo Braker
Version: 1.0
Author: Jeremy Anderson [ Object Adjective ]
Author URI: http://www.objectadjective.com

*/

/* Main Globals
--------------------------------------------------------------------------------------------*/

body {margin: 0; padding: 0; text-align: center; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 90%; color: #482416; background: #f8f6f4; min-width: 982px;}
body, html {min-height: 100.1%;}
img {border: 0;}
table {border-collapse: collapse;}
td {vertical-align: middle;}
ul {list-style: none; margin: 10px 0 10px -15px; padding: 0;}
li {margin: 0;}
blockquote {margin: 0; padding: 0;}
abbr, acronym {border: none;}






/* Global Float Control Classes (left=float: left, right=float: right, shocking!)
--------------------------------------------------------------------------------------------*/

.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.clear {clear: both;}

/* Links
--------------------------------------------------------------------------------------------*/

:focus, :active  {outline: none !important;}
a {color: #c55628; font-weight: bold; text-decoration: none;}
a:visited {color: #a1593b;}
a:hover, a.hover {color: #4a3316;}
.hover {cursor: pointer;}


/* Header
--------------------------------------------------------------------------------------------*/
#skipnav {height: 15px; background: #482416; text-align: left;}
#skipnav a {opacity: 0.0; padding: 2px 6px; font-weight: normal;}
#skipnav a:hover {opacity: 1.0; background: #f8f6f4; color: #c55628;}

#header {width: 980px; margin: 0 auto; overflow: hidden; padding-bottom: 11px;}
#header #logo {width: 315px; height: 51px; display: block; float: left; margin: 10px 21px; background: transparent url(../img/logo.jpg) 0 0 no-repeat; text-indent: -4000px;}
#header a#logo:hover {background-position: 0 -51px;}

#nav {margin: 0 21px 0 0; width: 515px; float: right;}
#nav li {float: right; margin: 0 8px 0 0;}
#nav a {color: #595f8f; padding: 3px 7px 2px 7px !important; border: 1px solid #c2dedd; border-top: 0; display: block;}
#nav a:hover, #nav a:active {color: #482416; border-color: #9eb5b4;}
#bodyabout #nav .about a, #bodyabout #nav .about a:hover, #bodyrecipes #nav .recipes a, #bodyrecipes #nav .recipes a:hover, #bodyrecipe-archives #nav .recipes a, #bodyrecipe-archives #nav .recipes a:hover, #bodyfaqs #nav .faqs a, #bodyfaqs #nav .faqs a:hover {background: #482416; border-color: #482416; color: #fff; font-weight: normal;}


/* Main Content
--------------------------------------------------------------------------------------------*/

#content {background: #c9e7e6; border: 1px solid #a3bdbc; margin: 0 auto 22px auto; width: 970px; text-align: left; padding: 5px 5px 70px 5px; overflow: hidden;}
#content p {margin: 15px 0; text-align: justify; line-height: 1.5em; padding: 0;}
#content .note, #content .entry-meta {font-size: 90%; color: #918675; margin: 0;}
#content .external, #content .entry .external, #content .entry-content .external {padding-right: 30px; background: transparent url(../img/newwin.jpg) right 1px no-repeat;}
#content .external:hover, #content .entry .external:hover, #content .entry-content .external:hover {background: #fff url(../img/newwin.jpg) right -32px no-repeat;}
#content .entry a, #content .entry-content a {padding: 1px 2px;}
#content .entry a:hover, #content .entry-content a:hover {background: #fff; color: #a1593b;}
#content h1 {color: #c9e7e6; background: #cccdce; margin: 0 0 20px 0; padding: 4px 15px;}
#content h2 {font-family: "Century Schoolbook", Georgia, serif; font-style: italic; color: #4a3316; margin: 0 0 25px 0; font-size: 180%;}
#content .entry-title {margin: 0;}
#content h2 span {display: block; font-size: 60%; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; color: #000; font-style: normal;}
#content h3 {font-family: "Century Schoolbook", Georgia, serif; font-style: italic; color: #758d8d; margin: 35px 0 15px 0; text-align: left; font-size: 140%;}
#content h4 {margin: -10px 0 0 0;}
#content img {border: 1px solid #a3bdbc; background: #fff; padding: 13px;}
#content img.left {margin: 5px 20px 10px 0;}
#content img.right {margin: 5px 0 10px 20px;}
#content img.clean {padding: 0; border: 0;}
#content .hr {border-top: 2px dotted #fff; margin: 35px 0 0 0;}

#content .entry, #content .entry-content {width: 591px; float: right; margin: 0 21px 0 0;}
#bodyrecipe-archives #content .entry-content {width: 567px; margin: 10px 0 0 0;}
#content .cover {border: 1px solid #595f8f; background: #fff; padding: 13px; float: left; margin: 0 25px 25px 15px;}
#bodyrecipe-archives #content .cover {margin-left: 0;}
#content a.cover:hover, #content a.cover.hover {border-width: 3px; padding: 11px;}
#content .feature {background: #4a3316; border: 1px solid #660e18; padding: 12px 27px 27px 27px; color: #d6bea0; min-height: 14em;}
#content .feature div {padding: 8px 27px 27px 27px;}
#content .feature blockquote {font-size: 160%; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; letter-spacing: 1px;}
#content .feature p {text-align: left;}
#content .feature cite {float: right;}
#content .feature a, #content .pos a {color: #fff; font-weight: normal;}
#content .feature a:hover, #content .feature a:active, #content .pos a:hover, #content .pos a:active {text-decoration: underline;}
#content .pos {background: #b1a490; color: #4a3316; width: auto; padding: 9px 12px; overflow: hidden;}
#content .pos p {margin: 8px 5px 0 0; text-align: left;}
#content .lookinside, #content .purchase {height: 92px; width: 104px; display: block; float: left; background: transparent url(../img/pos-icons.jpg) 0 0 no-repeat; margin-right: 11px; text-indent: -4000px;}
#content .lookinside:hover, #content .lookinside:active {background-position: 0 -92px;}
#content .purchase {background-position: 0 -184px; margin-right: 20px;}
#content .purchase:hover, #content .purchase:active {background-position: 0 -276px;}

#content .affiliates {margin-top: 50px; border-top: 2px solid #cccdce;}
#content .affiliates p {text-align: center; margin: 20px 0;}
#content .affiliates a {margin: 0 40px 40px 0; border: 0; padding: 0; background: transparent; opacity: .50;}
#content .affiliates a:hover {opacity: 1.00;}
#content .affiliates img {border: 0; padding: 0; background: transparent; vertical-align: middle;}

.quote div {padding: 0 15px 15px 15px; border-top: 2px dotted #fff;}
#bodyrecipe-archives .quote div {width: 940px; overflow: hidden; padding: 15px;}
#bodyfaqs .quote div {text-align: right;}
#content .quote div.hover div {background: #d1f0ef !important;}
#content .quote div.hover {background: #d5f5f4 !important;}
.quote div div {border: 1px solid #fff; margin-top: 15px;}
.quote div blockquote {color: #4a3316; text-align: left;}
.quote div cite {font-size: 90%; color: #918675;}
#content .quote h3 {margin: 15px 0 0 0;}

#content .group {margin: 15px 0;}
#content .group h4 {margin: 20px 0 -10px 0;}
#content .group p {text-align: left;}
#content .group img.right {margin: 20px 0 10px 20px;}

#content .archive {position: relative; top: -55px; }
#content .archive {padding: 3px 8px; background: #c55628; color: #c9e7e6; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; font-weight: normal; letter-spacing: 1px; float: right; margin-right: 20px; border: 1px solid #fff; font-size: 110%;}
#content .archive:hover {background: #544026; color: #fff;}


/* Subnav */
#content .subnav {float: left; clear: left; margin-left: 15px; width: 316px; text-align: center;}
#bodyrecipes #content .subnav, #bodyaskflo #content .subnav, #bodyfaqs #content .subnav {margin-top: -35px;}
#content .subnav h3 {font-size: 130%; margin: 0; text-align: center;}
#content .subnav h3 a {text-decoration: underline;}
#content .subnav .askflo {height: 93px; width: 316px; background: transparent url(../img/askflo_side.jpg) 0 0 no-repeat;}
#content .subnav .askflo:hover {background-position: 0 -93px;}
#content .subnav .answers {height: 93px; width: 316px; background: transparent url(../img/askflo_side.jpg) 0 -186px no-repeat; text-indent: -4000px; display: block;}
#content .subnav .answers:hover {background-position: 0 -279px;}
#content .subnav .pos {font-size: 85%; color: #fff;}
#content .subnav .pos p {margin: 0;}
#content .subnav .affiliates {margin: -20px 0 0 0; border: 0;}
#content .subnav .affiliates a {margin-left: 20px;}
#content .subnav .affiliates img {margin-bottom: 30px;}


/* Home Page
--------------------------------------------------------------------------------------------*/
#bodyhome #content {width: 940px; padding: 20px;}
#bodyhome #content .feature {width: 539px; float: right;}
#bodyhome #content img {padding: 0; border: 0;}
#bodyhome #content .cover {margin-bottom: 0; border-color: #988c6e; margin: 0 25px 0 0;}
#bodyhome p {line-height: normal;}
#bodyhome #content .pos {float: right; width: 569px; margin-top: 19px;}


/* Ask Flo Page
--------------------------------------------------------------------------------------------*/

#bodyaskflo #content h1 {background: #2b150c url(../img/rollingpin.jpg) 20px center no-repeat; color: #ccc0af; padding:  10px 15px 4px 75px; border: 1px solid #060302; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; height: 55px; font-weight: normal; font-size: 250%; margin-bottom: 35px;}
#bodyfaqs #content h1.faq {background: #2b150c url(../img/penandpaper.jpg) 20px center no-repeat; color: #ccc0af; padding:  10px 15px 4px 123px; border: 1px solid #060302; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; height: 55px; font-weight: normal; font-size: 250%; margin-bottom: 35px;}
form fieldset, .group {border: 1px solid #fff; padding: 0 20px 10px 20px; background: #d1f0ef;}
#bodyaskflo #content .group, #bodyfaqs #content .group {margin-top: 0;}
form div {margin: 20px 0; width: 100%; overflow: hidden;}
form label {display: block; font-size: 120%; color: #4a3316;}
input, textarea, select { background: #dccfba url(../img/input.jpg) 0 0 repeat-x !important; border: 2px solid #fff; color: #4a3316; padding: 4px; font-size: 100%; font-family: "Lucida Grande", Arial, Helvetica, sans-serif;}
input.focus, textarea.focus, select.focus {background: #e9e2d7 url(../img/input-focus.jpg) 0 0 repeat-x !important; border-color: #c55628;}
#content .entry .btn {padding: 6px 10px; background: #221009; color: #ccc0af; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; font-size: 130%; font-weight: normal; letter-spacing: 1px; border: 2px solid #fff; outline: 2px solid #cccdce;}
#content .entry .btn:hover {background: #4a3316; color: #fff; outline-color: #889098;}
.photodetail {background: #221009; height: 0; width: 276px; float: left; clear: left; color: #dccfba; font-size: 80%; position: relative; top: -40px; left: 29px; opacity: .80; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; margin-bottom: 41px; z-index: 1;}
#bodyrecipe-archives #content .photodetail {margin: 0; left: 14px; text-align: center;}
#content .photodetail p {margin: 0; text-align: center;}
#bodyaskflo #content .cover, #bodyfaqs #content .cover {margin-top: 57px;}
label.error {color: #595f8f; font-size: 90%; padding: 6px 8px; margin-top: 5px; background: #fff; width: auto; border: 1px solid #988c6e; float: left;}

/* Overlay */
.alert {width: 587px; position: absolute; z-index: 1000; left: 50%; margin-left: -293px; display: none; background: #c9e7e6; border: 3px solid #2b150c; padding: 25px; overflow: hidden;}
.alert .close {float: right; font-size: 90%; margin-top: 5px;}
#content .alert h3 {float: left; margin: 0 20px 10px 0;}
.alert h3 a {padding: 1px 2px;}
.alert h3 a:hover {background: #fff;}
#dim {width: 100%; background: #2b150c; opacity: .70; position: absolute; top: 0; left: 0; width: 100%; display: none; z-index: 1;}


/* Bottom Section
--------------------------------------------------------------------------------------------*/
#bottom {background: #382610; padding: 22px 0; color: #b1a490; font-size: 75%; text-align: justify;}
#bottom .wrap {width: 942px; margin: 0 auto; padding: 19px; background: #4a3316; overflow: hidden;}
#bottom .col {width: 216px; padding: 15px; float: left; min-height: 303px; margin-right: 14px;}
#bottom .simple {width: 190px;}
#bottom .dozen {width: 176px;}
#bottom .baking {width: 182px;}
#bottom .index {width: 170px; padding: 9px 12px; float: right; background: #544026; border: 1px solid #544026; margin: 17px 20px 0 0; text-align: center;}
#bottom .col:hover, #bottom .col.hover {background: #422d13; cursor: pointer;}
#bottom .index:hover, #bottom .index.hover {background: #544026 !important; border-color: #2b150c; cursor: pointer;}
#bottom .col:hover img, #bottom .col.hover img, #bottom a:hover img {background: #4f391e;}
#bottom img {background: #422d13; border: 1px solid #412012; padding: 7px;}
#bottom .col p {margin: 8px 0; text-align: left;}
#bottom .index p {margin: 8px 0; text-align: justify;}
#bottom .index img {margin: 8px auto 0 auto; padding: 0; border: 0;}
#bottom a {color: #d2c5b1;}
#bottom a:hover {color: #fff;}
#bottom h3 {color: #c7b9a4; margin: 0; font-weight: normal; font-family: "Century Schoolbook", Georgia, serif; font-style: italic; font-size: 140%; letter-spacing: 1px;}
#bottom .col:hover a, #bottom .col.hover a, #bottom .index:hover a, #bottom .index.hover a {color: #fff;}


/* Footer
--------------------------------------------------------------------------------------------*/
#footer {background: #2b150c; border: 1px solid #060302; text-align: left;}
#footer .wrap {width: 980px;  padding: 13px 0; margin: 0 auto; color: #4a3f2e; font-family: "Century Schoolbook", Georgia, serif; overflow: hidden;}
#footer p {margin: 0;}
.askflo, #footer .faqs {width: 259px; height: 93px; display: block; float: right; background: transparent url(../img/askflo.jpg) 0 0 no-repeat; text-indent: -4000px;}
#footer .faqs {background: transparent url(../img/faqs.jpg) 0 0 no-repeat;}
.askflo:hover, #footer .faqs:hover {background-position: 0 -93px;}

/* Font Imports
--------------------------------------------------------------------------------------------*/
@font-face {font-family: "Century Schoolbook"; src: url(http://www.flobraker.com/fonts/Century_Schoolbook.ffil) format("ffil");}