/*
Theme Name: Hot Cuppa
Theme URI: http://teaatelevensies.com
Description: WordPress theme created for tea@elevensies
Version: 1 (WP 2.8.4)
Author: Design by Ashley Geiger
Author URI: http://itsageiger.com
Author: Template by Joel Goodman
Author URI: http://joel.thegoodmanblog.com
Tags: tea, minimal, typography
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

/* START AT THE TOP */
body {
	background: #fff url(./img/headbg.gif) repeat-x top center;
	color: #3F3F3F;
}

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 967px;
	margin: 0 auto -160px;  
}

.rssContact {
	position: fixed;
	left: -1px;
	top: 50%;
	background: url(./img/feed.png) no-repeat;
	height: 135px;
	width: 79px;
}

.rssContact a.theFeedLink {
	display: block;
	height: 57px;
	margin-top: 11px;
	width: 75px;
}
.rssContact a.theContactLink {
	display: block;
	height: 57px;
	width: 75px;
}
.rssContact a span {
	display: none;
}

#header {
	padding-bottom: 20px;
}
img#branding {
	width: 297px;
	height: 143px;
	float: left;
	position: relative;
	z-index: 99;
}
.spacer {
	width: 837px;
	height: 40px;
	background: #DADBD8;
	margin-bottom: 15px;
	margin-left: 130px;
	margin-top: -8px;
}

.spacer p {
	padding-top: 8px;
	margin-left: 180px;
}

/* TOP NAVIGATION STYLING - DROP-DOWN STYLING */
#topNav {
	padding-top: 80px;
	margin-left: 300px;
	width: 665px;
	background: url(./img/dividers.gif) no-repeat left bottom;
}

.gecko #topNav {
	
}
#topNav a {
	color: #fff;
	font-weight: normal;
	font-size: 14px;
	text-transform: uppercase;
	padding-bottom: 15px;
}

#navLinks {
	text-align: left;
	padding-bottom: 0px;
}

ul#navLinks {
	padding: 0;
	margin-left: -120px;
	list-style: none;
	margin-bottom: 10px;
}
ul#navLinks li.top{
	color: #fff;
	position: relative;
	display: inline;
	padding: 5px 47px 15px 40px;
	font-size: 14px;
	text-transform: uppercase;
	
}

ul#navLinks li.filters {
	padding-left: 65px;
}

ul#navLinks li.tea {
	padding-left: 50px;
}

.gecko ul#navLinks li.tea {
	padding-left: 45px;
}

#navLinks li ul {
	display: none;
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 9999;
	width: inherit;
	text-align: center;
}

#navLinks li:hover ul{
	display: block;
	width: 190px;
	background-image: url(./img/bg_menu_sprite.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	border: 0px;
	padding-bottom: 50px;
	margin-left: -14px;
	margin-top: 10px;
}

#navLinks li:hover ul#firstTimer li{
	margin-left: 10px;
	
}

#navLinks li:hover ul#about {
	background-position: -192px 0;
	margin-left: -28px;
}

#navLinks li:hover ul#about li {
	margin-left: -5px;
}


#navLinks li:hover ul#filters {
	background-position: -378px 0;
	margin-left: -1px;
}
#navLinks li:hover ul#more {
	background-position: -564px 0;
	margin-left: -6px;
}

#navLinks li ul li {
	display: block;
	font-size: 11px;
	padding: 0px;
	border: 0px;
	margin: 0px;
}

#navLinks li:hover ul#FirstTimer {
	background-position: 0px 0px;
	width: 192px;
}


#navLinks li ul {
	border: 0px;
	position: absolute;
	padding-bottom: 20px;
}

#navLinks a{
	font-size: 11px;
}



/* OTHER COMMON NAV */

ul.postNav, .postNav li {
	list-style: none;
	text-transform: lowercase;
}

.postNav a {
	display: block;
	font-style: italic;
	font-size: 15px;
	color: #3F3F3F;
	vertical-align: middle;
}

/* CATEGORY FILTER */

.filterTitle {
	vertical-align: middle;
	font-weight: normal;
	padding: 0 6px 3px 10px;
	margin-left: 30px;
	margin-top: 6px;
	float: left;
}
.catFilter {
	position: relative;
	width: 665px;
	height: 36px;
	background: #6D6577;
	color: #FFF;
	margin-bottom: 15px;
	text-transform: uppercase;
	vertical-align: middle;
	letter-spacing: 1px;
}

.catFilter a {
	color: #fff;
}

.catFilter ul {
	display: block;
	vertical-align: middle;
	
}

.catFilter li.cat-item{
	font-size: 11px;
	margin: 6px 10px;
	padding: 1px 5px 3px;
	float: left;
	list-style: none;
}

#contentWrap {
	width: 667px;
	float: right;
	clear: none;
}

.page #contentWrap {
	width: 837px;
	padding-top: 15px;
	border-top: solid 3px #3F3F3F;
}


/* TWITTER POST STYLINGS */

.postTweet {
	width: 100%;
	min-height: 40px;
	background: #E6E6E6;
	border: 0px;
	margin-bottom: 15px;
	margin-top: 15px;
}

.postTweet .postContent {
	padding-top: 7px;
	width: 390px;
	float: left;
	vertical-align: middle;
}
.postTweet .postContent p {
	font-size: 11px;
	line-height: 1.3em;
	color: #3F3F3F;
}

h2.tweetTitle {
	text-transform: uppercase;
	font-style: normal;
	padding-top: 7px;
	color: #3F3F3F;
	font-size: 14px;
}

img.twitterIcon {
	float: right;
	margin-right: 10px;
	margin-top: 3px;
	vertical-align: middle;
}

.postMetaAuthor {
	vertical-align: middle;
	float: left;
}

/* POST STYLING */

.postTitleMeta {
	min-height: 100%;
	width: 665px;
	vertical-align: top;
	padding-top: 15px;
	border-top: solid 3px #3F3F3F;
	border-bottom: solid 3px #BCBCBC;
}
.postTitleMeta .column-1 {
	width: 150px;
	vertical-align: top;
}

.postTitleMeta .column-2 {
	float: left;
	max-width: 150px;
	margin-left: 20px;
	vertical-align: top;
	margin-top: -4px;
}

.postTitleMeta .column-3 {
	float: left;
	max-width: 175px;
	margin-left: 20px;
	vertical-align: top;
}

h1.postTitle, .postAuthor {
	text-align: right;
	padding-bottom: 10px;
	height: auto;
	float: left;
	width: 150px;
}

.postDate {
	text-transform: uppercase;
	float: left;
	font-size: 11px;
	letter-spacing: 0.1em;
	vertical-align: top;
}

.postCat {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	width: 200px;
	float: left;
}

.postContent {
	padding-top: 15px;
	float: left;
	width: 495px;
}

.page .postContent {
	padding-left: 15px;
	border-left: solid 2px #D9D9D9;
	padding-top: 0px;
	width: 639px;
}

.postMetaAuthor {
	height: 100%;
	width: 150px;
	float: left;
	text-align: right;
	margin: -2px 15px 0 0;
}
.postAuthor {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.1em;
	padding-top: 17px;
}

.discussion {
	width: auto;
	float: right;
	vertical-align: baseline;
}
.discussion p {
	font-size: 12px;
	text-align: right;
	vertical-align: baseline;
	padding-top: 15px;
}

/* SHARE LINKS PER POST */

.postContent .postMeta {
	margin-top: 25px;
}
.social {
	float: left;
}

ul.socialList {
	display: block;
	float: left;
	margin-left: 0px !important;
}

ul.socialList li {
	display: block;
	height: 30px;
	width: 30px;
	float: left;
	margin-right: 7px;
}

ul.socialList li a {
	display: block;
	height: 30px;
	width: 30px;
	background-image: url(./img/socialsprite.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

ul.socialList li.stumble a:hover {
	background-position: 0 -30px;
}
ul.socialList li.twitter a {
	background-position: -36px 0;
}
	ul.socialList li.twitter a:hover {
		background-position: -36px -30px;
	}

ul.socialList li.delicious a {
	background-position: -71px 0;
}
	ul.socialList li.delicious a:hover {
		background-position: -71px -30px;
	}

ul.socialList li.digg a {
	background-position: -109px 0;
}
	ul.socialList li.digg a:hover {
		background-position: -109px -30px;
	}

ul.socialList li.facebook a {
	background-position: -145px 0;
}
	ul.socialList li.facebook a:hover {
		background-position: -145px -30px;
	}

ul.socialList li.feed a {
	background-position: -181px 0;
}
	ul.socialList li.feed a:hover {
		background-position: -181px -30px;
	}

ul.socialList li a span {
	display: none;
}
.page .socialList {
	padding-bottom: 0px;
}

/* ARCHIVES COLUMN STYLING */
.postContent .col1, .postContent .col2 {
	float: left;
	padding-right: 30px;
}

.cat-item, .children {
	font-size: 12px;
}

ul.children {
	margin-left: 10px !important;
}

/* CATEGORY POST STYLING */

.catPost {
	border-top: solid 2px #3F3F3F;
	border-bottom: solid 2px #D9D9D9;
	padding-top: 18px;
	padding-bottom: 18px;
}

.catPostMeta {
	width: 160px;
	float: left;
	margin-top: -7px;
	padding-top: 0px;
	vertical-align: top;
}

.catPost .catPostContent {
	float: left;
	width: 503px;
	border: none;
}

.catPost h1 {
	text-align: left;
}

.catPostTitleMeta {
	width: 503px;
	border-bottom: 1px solid #B2B2B2;
	margin-bottom: 18px;
}

.catPost .catPostTitleMeta .col2, .catPost .catPostTitleMeta .col3{
	width: 120px;
	float: left;
	margin-left: 20px;
}

.catPost .catPostTitleMeta .column p{
	text-align: left;
	padding: 0px;
	margin: 0px;
	margin-left: 8px;
	line-height: 1.5em;
	width: 120px;
}

.catPost img.featuredThumb {
	max-width: 160px;
	float: left;
	vertical-align: top;
	margin-right: 18px;
}

.catPostExcerpt {
	margin-left: 175px;
	line-height: 1.4em;
}

.catPostExcerpt p {
	font-size: 12px !important;
}

.catPostMeta p {
	display: block;
	text-align: center;
	margin: 0 auto;
	max-width: 40%;
}

.catPostMonth, .catPostYear, .catPostTime {
	text-transform: uppercase;
	font-size: 11px;
	padding: 5px 10px;
}

.catPostMonth {
	padding-bottom: 0px;
}

.catPostMonth, .catPostYear {
	max-width: 20% !important;
	border-bottom: 1px solid #B2B2B2;
}

.catPostDay {
	font-size: 60px;
	margin: 0 auto;
	padding: 10px 0 15px;
	border-bottom: 1px solid #B2B2B2;
}

/* SIDEBAR */

.sidebar {
	width: 165px;
	font-size: 11px;
	float: left;
	margin-left: 130px;
	color: #8C8C8C;
}

.sidebar a {
	color: #8C8C8C;
}

.sidebar li.widget {
	padding-bottom: 15px;
	width: 146px;
}

.page .sidebar {
	margin-left: 0px;
	text-align: right;
	padding-right: 15px;
	padding-top: 0px;
}

.page .sidebar h1 a {
	color: #3F3F3F;
 	text-align: right;
}


/* Search Form Styling */

.sidebar .widget-search input {
	color: #8C8C8C;
	text-transform: lowercase;
	font-size: 14px;
	padding-left: 5px;
	max-width: 146px;
	height: 25px;
	letter-spacing: 0.1em;
	border: 1px solid #8C8C8C;
	
}

/* RELATED POSTS */

.relatedPosts {
	width: 100%;
	padding-top: 15px;
	margin-bottom: 25px;
}

.home .relatedPosts {
	border-top: thin dashed #b2b2b2;
}

.theRelative {
	font-size: 12px;
	color: #8C8C8C;
	width: 100px;
	min-height: 55px;
	max-height: 155px;
	padding: 12px 15px 0px;
	border-right: solid 2px #B2B2B2;
	line-height: 1.3em;
	float: left;
}

.theRelative a {
	color: #666;
	text-transform: capitalize;
}

.smallThumb {
	width: 93px;
	padding: 2px;
	border: solid 2px #b2b2b2;
	margin: 2px 0 10px;
}

/* FOOTER */
.footer {
	background: url(./img/footbg.gif) repeat-x left bottom;
	height: 160px;
}

.push {
	height: 160px;
}

.footer .randomQuote {
	width: 350px;
	height: 140px;
	background: url(./img/bg_quote.png) no-repeat left bottom;
	float: left;
	margin-top: 10px;
}

.footer .randomQuote .theQuote {
	margin-top: 60px;
	margin-left: 50px;
	width: 230px;
	line-height: 1.2em;
	font-size: 12px;
	color: #3F3F3F;
}
.theQuote span {
	float: right;
	text-align: right;
}

.footer .inside {
	width: 940px;
	margin: 0 auto;
	padding: 10px 0;
}

.footer .legal {
	text-align: right;
	float: right;
	margin-top: 70px;
}

img#wpstats {
	display: none;
}

/* WORDPRESS PHOTO STYLING */

.wp-caption img {
	width: 99%;
}

.wp-caption-text {
	text-align: right;
	font-style: italic; 
	margin-right: 5px;
	font-size: 10px;
}
/* FLAIR AND OTHER SPRITES */

.featuredTitle span.flair {
	background: url(./img/titleFlair.gif) no-repeat right;
	background-position: right 7px;
	padding-right: 44px;
}

.commentDescription span.comFlair {
	background-image: url(./img/flair.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	height: 10px;
	width: 84px;
	margin: 0 auto;
}
.more-link {
	padding-left: 15px;
	background-image: url(./img/flair.png);
	background-repeat: no-repeat;
	background-position: 0px -40px;
	height: 11px;
	width: 400px;
}

.navLeft {
	margin-top: 3px;
	padding-top: 15px;
}
.navLeft a{
	padding-left: 30px;
	background-image: url(./img/arrows.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.navRight a {
	padding-left: 100px;
	background-image: url(./img/arrows.png);
	background-position: 0px -25px;
	background-repeat: no-repeat;
}

.button {
	font-size: 14px;
	color: #3F3F3F;
	background: #E6E6E6;
	border: solid 1px #B2B2B2;
	width: 152px;
	padding: 6px 0px;
	margin-right: 0px;
}

.button:hover {
	background: #B2B2B2;
}

/* COMMENTING AND CHARACTER COUNTER */

h3#comments {
	padding: 5px 0;
	text-transform: none;
	font-weight: normal;
}

.commentsHeader {
	margin-bottom: 18px;
	border-bottom: 1px solid #B2B2B2;
	border-top: 2px solid #3F3F3F;
}

ol.commentsList {
	margin-left: 150px;
	list-style: decimal inside;
	display:  block;
	width: 100%;
	margin-bottom: 18px;
}

li.comment {
	width: 154px;
	display: inline-table;
	vertical-align: top;
	padding-left: 14px;
}

.comment-body {
	background-color: #E6E6E6;
	background-image: url(./img/commenttop.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 5px;
	width: 144px;
}

.bypostauthor .comment-body{
	background-color: #9E9AA5;
	background-position: -156px 0;
	color: #FFF;
}

.comment-body p {
	font-size: 11px;
	line-height: 1.5em;
	margin: 4px;
}

.comment-author {
	background-image: url(./img/speechpoint.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-top: 25px;
}

.bypostauthor .comment-author {
	background-position: -173px 0;
}

/* Force Styles for Yarr Reply Plugin because of inline styles*/
.yarr {
	text-transform: uppercase !important;
	font-size: 10px !important;
	letter-spacing: 0.1em !important;
	margin-left: 4px !important;
	visibility: visible !important;
}

.yarr span {
	position: relative !important;
	margin-left: -16px;
}

.yarr:hover {
	text-decoration: underline;
}

.yarr img {
	visibility: hidden !important;
}

.commentDescription {
	width: 150px;
	float: left;
}

form#commentform {
	width: 500px;
	margin-left: 165px;
}

#commentform input, #commentform textarea {
	border: solid 1px #D8D8D8;
	font-size: 14px;
	padding: 3px;
	font-family: Georgia;
	margin-bottom: 6px;
}

#commentform textarea {
	width: 491px;
	margin: 0 5px 15px 0px;
}

.commentForm {
	padding-top: 18px;
	border-top: 2px solid #B2B2B2;
	border-bottom: 1px solid #B2B2B2;
}

label {
	font-size: 12px;
}

h4#respond {
	text-transform: none;
	font-size: 14px;
	color: #000;
	letter-spacing: 0px;
}

.commentDescription p {
	font-size: 11px;
	width: 122px;
	line-height: 1.4em;
}

.req, .comment-meta {
	color: #8C8C8C;
	text-transform: uppercase;
	font-size: 9px;
}

.commentTime {
	color: #3F3F3F;
	}

#countdown {
	font-size: 16px;
	color: #3F3F3F;
 }

.ok {
	color: black;
}
.watch {
	color: #9F99A6;
}

.warning {
	color: #5C0002;
}
.error {
	color: #FE0303;
}