/* PLAN BEE BOOK LAYOUT AND STYLE
-----------------------------------------------------------------------------------------
Site design and layout, copyright 2008 Design by Reese
Author: Design by Reese
Modified: October  21, 2008

www.designbyreese.com

Content copyright 2008 Susan Brackney

*/

/* - - - GLOBAL   - - - */
body {
background: #e4d381 url(images/bodybg.jpg) fixed top left;
color: #363636;
font-size: 12px;
font-family: "Trebuchet MS", arial, sans-serif;
margin: 0;
padding: 0;
}

a {
color: #92471b;
text-decoration: none;
background: url(images/link-underline.gif) repeat-x bottom left;
}

a:link {
color: #92471b;
}

a:visited {
color: #92471b;
}

a:hover {
color: #fef4c8;
}

strong {
color: #000;
}

/* - - - LAYOUT/STRUCTURE - - - */
#header {
margin: 0 auto;
width: 547px;
height: 267px;
background: url(images/graphic-header.gif) no-repeat top left;
}
#container {
width: 547px;
margin: -12px auto 20px auto;
position: relative;
background: url(images/graphic-centertile.gif) repeat-y bottom left;
}
#content-bg  {
float: left;
width: 547px;
background-position: bottom left;
background-repeat: no-repeat;
background-image: url(images/graphic-footer.gif)
}

#footer {
clear: both;
}

#primary-content {
width: 390px;
padding-left: 70px;
padding-top: 50px;
padding-bottom: 15px;
}

#bumble {
position: absolute;
top: -240px;
right: -20px;
width:118px;
height: 32px;
background: url(images/text-bumble.gif) no-repeat top left;
}
#minibee {
position: absolute;
background: url(images/graphic-beecorner.png) no-repeat top left;
bottom: -20px;
right: -38px;
z-index: 1000;
width: 98px;
height: 188px;
}

/* - - - NAVIGATION  - - - */
div#navigationbg {
position: absolute;
top: -256px;
left: -80px;
background: url(images/graphic-navbg2.png) no-repeat top left;
width: 210px;
height: 350px;
}

ul#menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
text-align: center;
left:47px;
text-transform: uppercase;

}

#menu li {
padding: 0 0 3px 0;
}

#menu li a {
background: none;
color: #fff;
}

#menu li a:hover {
background: url(images/graphic-headerunderline.gif) repeat-x bottom left;
color: #9d5221;
}

/* - - - TEXT - - - */
/* headings */
#header h1 {
text-indent: -9999px;
font-size: 1px;
height: 1px;
}

h2#subtitle {
text-indent: -9999px;
font-size: 1px;
position: absolute;
top: -240px;
right: -20px;
z-index: 1000;
background: url(images/text-subtitle.gif) no-repeat top left;
width: 310px;
height: 49px;
}

#primary-content h2 {
color: #996526;
text-transform: uppercase;
margin: 0 0 12px 0;
padding: 24px 0 12px 0;
position: relative;
left: -30px;
width: 450px;
font-weight: normal;
background: url(images/graphic-headerunderline.gif) repeat-x bottom left;
font-size: 16px;
}

#primary-content h3 {
color: #72270a;
margin: 0;
padding: 0;
font-size: 13px;
font-family: georgia, times, serif;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
}

/* paragraphs and other text */

#container p {
margin: 0;
padding: 0 0 12px 0;
}

#primary-content p {
line-height: 21px;
font-size: 12px;
}

/* footer */
#footer {
margin: -5px auto 0 auto;
width: 547px;
font-size: 10px;
text-transform: uppercase;
}

#footer a {
background: 0;
}

#footer p {
padding: 0 0 10px 40px;
margin: 0;
}

/* 
use blockquote to highlight special text or a quote or something of good interest. 
You can see an example of it in the design 
*/

blockquote {
background: url(images/bodybg.jpg) repeat top left;
padding: 15px;
border: 1px solid #cdb970;
color: #5f5839;
font-family: georgia, times, serif;
font-style: italic;
font-size: 18px;
line-height: 24px;
float: left;
width: 200px;
margin: 0 15px 6px 0;
}

#primary-content blockquote p {
color: #5f5839;
font-family: georgia, times, serif;
font-style: italic;
font-size: 18px;
line-height: 24px;
padding: 12px 0 0 0;
}

/* - - - LISTS STYLING  - - - */
/* 
the below styles lists that are located within your primary content div.
*/

/* 
this styles a NON-ordered list and inserts a small flower by each 'bullet' item. 
It 'pads' each list item by 6px on the bottom. 
If you want more or less, you can adjust the padding upward.
*/

#primary-content ul {
list-style: none;
margin: 0;
padding: 12px 0;
}

#primary-content ul li {
margin: 0;
padding: 0 0 6px 20px;
background: url(images/icon-bullet.gif) no-repeat 0 30%;
}

/* 
this styles an ORDERED (numbered) list.
*/

#primary-content ol {
margin: 0 0 0 20px;
padding: 12px 0;
}

#primary-content ol li {
margin: 0;
padding: 0 0 6px 0;
}

/* - - - IMAGE STYLING  - - - */
/* 
the below style makes the text wrap to the RIGHT of the image, and adds a little background and padding and border to it. 
Use it on the images that are not as wide as the text (e.g. little thumbnails 
*/

img.img-left {
float: left;
margin: 0 15px 6px 0;
background: url(images/bodybg.jpg) repeat top left;
padding: 10px;
border: 1px solid #e7c957;
}

/* 
the below style makes the text wrap to the LEFT of the image, and adds a little background and padding and border to it. 
Use it on the images that are not as wide as the text (e.g. little thumbnails 
*/

img.img-right {
float: right;
margin: 0 0 6px 12px;
background: url(images/bodybg.jpg) repeat top left;
padding: 10px;
border: 1px solid #e7c957;
}


/* 
the below style is for images as wide as your text. 
You could also use this for videos.
Make sure you always go no WIDER than 390. 
This style does not have the little background and padding on it. 
If you have an image that is about 370 wide or a bit smaller, you could use the "img-left" class (above) if you want to add the padding and background style and border
but don't add it to any that are wider than 370, or else the addition of padding may break some browsers 
Also, best to make sure you have a p tag wrapped around it (even if it's a video embed) for alignment purposes
*/

.img-large {
float: left;
}