/*
Theme Name:		eGrace Framework
Theme URI: 		http://www.egracecreative.com/
Version: 		0.9.1
Description: 	The base code used for custom site building.
Author: 		Brandon Cox
Author URI:		http://www.egracecreative.com

Copyright 2010 Brandon Cox. <http://www.brandonacox.com> All rights reserved.
*/

/* Light Tan: #cfdaba; Tan: #b1b79d; Dark Tan: #919587; */

/* The Body */

body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 80%; margin: 0px; padding: 0px; color: #555; text-align: center; background: url(images/bg.jpg) repeat-x top; }

/* General Formatting Resets */

p, h1, h2, h3, h4, h5, h6, h7, ul { margin-top: 0px; margin-bottom: 15px; } /* Removes top margin from these elements. */
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }
h2, h2 a { color: #0c445f; }
h4, h5 { font-size: 1.2em; }
h5 { font-weight: normal; }
a img { border: 0px; } /* Tells images links not to have the default ugly border. */
a { color: #900; } /* Link colors, unless set elsewhere. */
a:hover { color: #666; } /* Colors of links when you hover over them, unless set elsewhere. */
a.more { padding: 5px; background: #900; color: #fff; }
a:hover.more { padding: 4px; background: #ccc; color: #900; border: 1px solid #999; }
p, li { line-height: 160%; } /* Sets the line heights of all paragraphs and list items. */
blockquote { font-size: 1.3em; margin: 0px 15px 15px; padding: 15px; border-left: #900 solid 5px; }
blockquote p { margin-bottom: 15px; }
br.clear { width: 100%; clear: both; }

/* The Container Centers the Design */

#container { width: 1000px; margin: 0px auto; overflow: auto; height: 1%; text-align: left; }
#container br.clearfix { clear: both; }

/* The Header */

#header { float: left; display: inline; overflow: hidden; width: 960px; margin: 0px; padding:  0 20px 0; }
#header a { text-decoration: none; }

/* The Topline with Page List and Date */

#header #topline { float: left; display: inline; overflow: hidden; width: 960px; padding: 15px 0px; height: 20px; margin: 0; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; color: #ccc; font-size: 1.1em; }
#header #topline a { color: #ccc; }

#header #topline p { margin-bottom: 0px; }
#header #topline p.left { text-align: left; float: left; display: inline; }
#header #topline p.right { text-align: right; float: right; display: inline; padding-right: 10px; }
#header #topline ul { float: left; display: inline; margin: 0px; padding: 0px; list-style: none; }
#header #topline ul li { float: left; display: inline; }
#header #topline ul li a { color: #cfdaba; text-decoration: none; margin-right: 5px; padding: 4px 10px; }
#header #topline ul li a:hover { color: #555; padding: 4px 10px; background: #cfdaba; }

/* The Title and Slogan Area */

#header #title { float: left; display: inline; overflow: hidden; padding: 10px 0 0; margin: 0; width: 360px; color: #666; height: 155px; }
#header #title p.site-title { font-size: 3.6em; font-style: italic; font-weight: normal; margin: 0px; line-height: 115%; letter-spacing: 1pt; }
#header #title p.site-title a { color: #555; }
#header #title p.site-title a:hover { color: #900; }
#header #title p.tagline { font-size: 1.2em; font-weight: normal; margin: 0px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.8pt; text-transform: uppercase;  }
#header #title img { text-align: center; margin-left: auto; margin-right: auto; } /* <-- To center images/logos */

#header #slogan { float: right; display: inline; overflow: hidden; text-align: right; font-size: 2.0em; font-style: italic; width: 560px; padding: 50px 20px 10px; color: #fff; vertical-align: middle; height: 95px; }

/* The Subline with Categories and Subscription Links */

#header #subline { float: left; display: inline; overflow: hidden; width: 960px; padding: 0; margin: 0 0 24px; font-weight: bold; }
#header #subline p { margin-bottom: 0px; }
#header #subline p.left { text-align: left; float: left; display: inline; }
#header #subline p.right { text-align: right; float: right; display: inline; padding: 15px; }
#header #subline p a:hover { text-decoration: underline; }
#header #subline ul { float: left; display: inline; margin: 0px; padding: 0px; list-style: none; }
#header #subline ul li { float: left; display: inline; height: 50px; font-size: .9em; }
#header #subline ul li a { float: left; color: #900; text-decoration: none; padding: 15px 8px; height: 20px; border-left: 1px #919587 solid; }
#header #subline ul li a:hover { float: left; padding: 15px 8px; background: #919587; height: 20px; border-left: 1px solid #919587; }

/* The Wrapper, which will contain the content and sidebars */

#wrapper { float: left; display: inline; overflow: hidden; width: 1000px; margin: 0px; padding: 0px 0px 15px; }

/* Slideshow */

#slider { width:620px; height: 280px; overflow: hidden; padding: 0; float: left; display: inline; overflow: hidden; margin: 0 0 30px; }
#mask-gallery { overflow: hidden; }
#gallery { list-style: none; margin: 0; padding: 0; z-index: 0; overflow: hidden; width:3100px; }
#gallery li { float:left; }
#mask-excerpt { position:absolute; top:0; left:100; z-index:500; width:300px; overflow:hidden; }
#excerpt { filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; list-style: none; margin: 0; padding: 0;
z-index: 10; position: absolute; top: 0; left: 0; width:300px; background-color: #000; overflow: hidden; font-size: 2.4em; font-style: italic;	color:#fff;	}
#excerpt li { padding: 15px; }

/* These are classes I create in case I create a special floating div, I can assign these easily. */

div.float-left { float: left; display: inline; overflow: hidden; }
div.float-right { float: right; display: inline; overflow: hidden; }

/* Styling the Content Area */

#content { float: left; display: inline; overflow: hidden; width: 620px; padding: 0px 10px 10px 20px; }

/* Images and Captions Within Posts */

#content .post img { padding: 5px; background: #c6c68c; margin: 0px 10px 10px 0px; }
#content .post a img { padding: 5px; background: #c6c68c; }
#content .post a:hover img { padding: 5px; background: #900; }
#content .post p.wp-caption-text { text-align: center; font-size: 0.8em; line-height: 135%; margin: 0px; padding: 3px 0px; }
#content img.alignnone { margin: 0px 10px 10px 0px; }
#content .post div.alignleft, #content .post img.alignleft { float: left; margin: 0px 10px 10px 0px; }
#content .post div.aligncenter, #content .post img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; clear: both; }
#content .post div.alignright, #content .post img.alignright { float: right; margin: 0px 0px 10px 10px; }

/* Heading Formatting Within the Content Area */

#content h1 { font-size: 2.3em; font-weight: normal; color: #900; }
#content h1 a { color: #900; text-decoration: none; }
#content h1 a:hover { color: #555; text-decoration: none; }

#content h2 { font-size: 1.5em; text-transform: uppercase; }
#content h2 a { color: #900; text-decoration: none; }
#content h2 a:hover { color: #555; text-decoration: underline; }

#content h3 { font-size: 1.2em; font-weight: bold; }

/* Formatting the Post Area */

#content .post { margin-bottom: 30px; clear: right;  } /* This applies to every page, no matter what. */
#content .article {  } /* This applies to pages where there is author, date, and comment information to the left of the post. */
#content .full { width: 620px; } /* This applies to pages without an author, date, or comment information */
#content .post h1 { text-transform: uppercase; font-weight: bold; letter-spacing: 0.5pt; }
#content .line { margin-bottom: 15px; border-bottom: 1px #666 solid; } /* Add this class to .post when more than 1 (optional line below posts) */
#content .dates { width: 170px; margin: 20px 30px 20px 0; float: left; display: inline; overflow: hidden; }
#content .topics { width: 420px; margin: 20px 0; float: right; display: inline; overflow: hidden; }

/* Formatting the List of Child Pages on Parent Pages */

div.child-pages { clear: right; height: 20px; margin-bottom: 20px; }
#content ul.child-pages { margin: 0px; padding: 0px; list-style: none; }
#content ul.child-pages li { float: left; display: inline; text-transform: uppercase; margin: 0px 12px 0px 0px; padding: 0px; }
#content ul.child-pages li a { float: left; display: inline; }
#content ul.child-pages br { clear: right; }

/* Formatting the Breadcrumbs */

#content .breadcrumbs { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px #ccc solid; }

/* Premeta refers to the information about the author, date, and categories at the top. */

#content .premeta { width: 150px; float: right; display: inline; overflow: hidden; margin-left: 14px; padding-left: 14px; margin-bottom: 15px; border-left: 1px #666 solid; }
#content .premeta p { font-size: 90%; font-style: italic; }
#content .premeta img, #content .premeta img.alignleft { display: inline; float: none; background: none; }

/* Postmeta refers to the tags and any information after the post. */

#content .postmeta { font-size: 85%; color: #888; padding: 7px 0px 0px 0px; border-top: 1px solid #ccc; margin-bottom: 15px; }
#content .postmeta p { margin: 0px; line-height: 125%; }

/* For Pagination & 'Next' & 'Previous' Post Links */

#content .content-bot { border-top: 1px solid #ccc; padding: 10px; text-align: center; clear: both; }
#content .content-bot a, .content-bot a:hover { margin: 2px 10px; }

/* Styling for the Content area of the Custom Home Page */

#content .featured { padding: 15px 0px; border-top: 3px #999 solid; border-bottom: 3px #999 solid; }
#content .featured img { float: right; margin: 0px 0px 5px 15px; }
#content .featured a.featured-more { padding: 6px 10px; background: #cbbb9a; }
#content .featured h1 { margin-bottom: 3px; }
#content div.other-stories {float: left; display: inline; overflow: hidden; width: 285px; margin-right: 25px; border-top: 1px #999 solid; padding: 5px 0px; }
#content div.other-stories img { float: none; margin-bottom: 15px; }

/* Comments Styling */

/* I've made the comment form bigger than the default settings. */
#respond .formbox { margin: 0px 10px 10px 0px; padding: 3px; font-size: 1.4em; width: 300px; color: #999; }
#respond label { font-size: 1.4em; color: #999; margin: 0px 0px 10px 0px; }
#respond .submit-comment { background: #555; color: #f4f1ea; padding: 10px 13px; margin: 0px 10px 15px 0px; border: 0px; }
p.allowed-tags { margin-top: 10px; font-size: 0.9em; }


.commentlist li .avatar { float: right; border: 5px solid #900; margin: 0px 0px 15px 15px; } /* Styling the avatars. */
.commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; }
.commentlist p { font-weight: normal; text-transform: none;	}
.commentmetadata { font-weight: normal; font-size: 0.9em; margin-bottom: 10px; }	
.alt { margin: 0px; padding: 15px; }
.commentlist { margin: 0px; padding: 0px; }
.commentlist ol { margin: 0px; padding: 15px; }
.commentlist li { margin: 15px 0px 15px; padding: 0px 0px 10px 20px; list-style: none; }
.commentlist li ul li {  margin-left: 20px; }
.commentlist p { margin: 0px 5px 15px 0px; padding: 0px; }
.children { margin: 0px; padding: 0px; }
.nocomments { margin: 0px; padding: 0px; }
.commentmetadata { font-size: 0.8em; margin: 0px 0px 10px 0px; display: block; }
.navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 40px; }
.alignright { float: right; }
.alignleft { float: left; }
.thread-alt { margin: 0px; padding: 0px; }
.thread-even { margin: 0px; padding: 0px; }
.depth-1 { border-left: 3px solid #ccc; border-bottom: 1px #ccc solid; margin: 0px; padding: 0px 0px 0px 15px; }
.even, .alt { border-left: 3px solid #ccc; border-bottom: 1px #ccc solid; margin: 0px; padding: 0px 0px 0px 15px; }

/* Styling the Searchform */

.searchform .searchbox { background: #fff url(images/magnify.jpg) right no-repeat; border: 1px #999 solid; padding: 10px 50px 11px 10px; width: 238px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #999; font-size: 1.1em; margin-bottom: 20px; }

/* Sidebar Styling */

#sidebar { float: right; display: inline; overflow: hidden; width: 300px; padding-left: 18px; margin-right: 20px; }

#sidebar .widget { /* Widgets */ margin-bottom: 22px; }

#sidebar h3 { /* Widget Headings */ font-size: 1.3em; padding: 10px; color: #444; border-bottom: 1px #919587 solid; font-weight: bold; text-align: center; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; border-top: 1px #919587 solid; letter-spacing: 0.5pt; background: #cfdaba; }
#sidebar h3 a { color: #f4f1ea; text-decoration: none; }
#sidebar h3 a:hover { color: #900; text-decoration: none; }

#sidebar ul { /* Sidebar First Order Lists */ margin: 0px 0px 15px 0px; padding: 0px; list-style: none; }
#sidebar li, #sidebar ul li { /* First Order List Items */ margin: 0px 0px 0px 0px; list-style-type: none; padding: 4px 3px; border-bottom: 1px dotted #ccc; }
#sidebar li ul { /* Second Order Lists */ margin: 0px 0px 15px 15px; padding: 0px 0px 0px 0px; }
#sidebar li ul li { /* Second Order List Items */ font-size: 92%; list-style-type: square; padding-left: 20px; }
#sidebar .tagcloud a { /* Adds space in tag cloud */ margin-right: 5px; }

/* Sidebar 125 Ad Areas */

#sidebar .ads-125 a img { margin: 0px 0px 11px 11px; padding: 5px; background: #999; }
#sidebar .ads-125 a:hover img { background: #900; }

/* Sidebar Tabs */

#sidebar #tabbed-box { margin: 0px auto 0px auto; }
#sidebar .tabbed-area { padding: 0px; margin-bottom: 15px; }
#sidebar .tabbed-area ul { margin: 0px; padding: 0px; border: 0px; }
#sidebar ul.tabs { margin: 0px 0px 15px; padding: 0px; border-bottom: 4px solid #666; height: 38px; }
#sidebar ul.tabs li { float: left; list-style: none; display: inline; padding: 0px; border: 0px; width: auto; font-weight: normal; font-size: 1.1em; height: 38px; margin-right: 5px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.5pt; }
#sidebar ul.tabs li a { float: left; display: inline; padding: 8px 10px; border: 0px; margin: 0px; width: auto; text-decoration: none; background: #444; color: #f4f1ea; height: 22px; font-size: 1.1em; }
#sidebar ul.tabs li a:hover { float: left; display: inline; padding: 8px 10px; width: auto; background: #900; height: 22px; }
#sidebar ul.tabs li a.active { float: left; display: inline; background: #cbbb9a; padding: 8px 10px; color: #900; border: 0px; height: 22px; }
#sidebar .tabbed-box .content { padding: 0px; }
#sidebar .tabbed-box .content ul { margin: 0px 0px 15px; }
#sidebar .tabbed-box .content ul li { border-bottom: 1px #999 dashed; padding: 8px 3px; }

#sidebar .social img { float: left; margin:  0 20px 10px 0; }
#sidebar .social ul li { width: 270px; padding: 5px 15px; clear: both; border: 0; float: left; font-size: 1em; }
#sidebar .social li a { text-decoration: none; border: 0; }
#sidebar .social li a:hover { text-decoration: underline; }

/* Styling the footer area. */

#footer { width: 1000px; margin: 0px; padding: 3px 0px 70px; float: left; display: inline; overflow: hidden; text-align: center; }
#footer .footer-inner { margin: 5px 20px 0px; padding-top: 20px; border-top: 4px solid #666; }