gistfile1.css

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	6.b - Charcoal Theme
	--------------------------------
	--------------------------------	
	Colors
	#ffffff; /* white
	#696a5c; /* red
	#222222; /* dark red
	#e5e8bb; /* butter
	#696a5c; /* dark butter
	#222222; /* dark grey
	#292929; /* light grey
	#fafbee; /* off-white
	#696a5c; /* less off-white
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal {
	color: #fafbee; /* off-white */
	background: #141414 url(http://static.tumblr.com/fftf9xi/sOEl17oqd/charcoal-bg_charwood.jpg) 0 0 repeat; /* background color */
}
body.charcoal a,body.charcoal a:link,body.charcoal a:visited {
	color: #696a5c; /* red */
}
body.charcoal a:hover,body.charcoal a:active,body.charcoal a:focus {
	color: #ffffff; /* white */
	background: #696a5c; /* red */
}
/*******************************************************************************************************
Main Content (left side of site)
- Main Content Insdide and all of .main_content_inside's children
*******************************************************************************************************/
body.charcoal .post_box {
	background: #ffffff; /* white */
	color: #222222; /* dark grey */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Nav / Pages
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .nav ul.pages_nav li {
	color: #e5e8bb; /* butter */
}
body.charcoal .nav ul.tumblr_nav li {
	color: #e5e8bb; /* butter */
}
body.charcoal .nav li a, body.charcoal .nav li a:link, body.charcoal .nav li a:visited  {
	background: #222222; /* dark red */
}
body.charcoal .nav li a:hover, body.charcoal .nav li a:active, body.charcoal .nav li a:focus  {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Header
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body.charcoal .header_image h1 a, body.charcoal .header_image h1 a:link, body.charcoal .header_image h1 a:visited, body.charcoal .header_image h1 a:hover, body.charcoal .header_image h1 a:active, body.charcoal .header_image h1 a:focus {
	background: url(http://static.tumblr.com/7tqcj0z/qfMldyobj/header.jpg) 0 0 no-repeat;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Tag, Search, and other results headers
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .search_results {
	border-bottom: 8px solid #222222; /* dark grey */
	border-top: 8px solid #222222; /* dark grey */
}
body.charcoal .search_results h2 {
	color: #696a5c; /* less off-white */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Text Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .text .head_title h2, body.charcoal .text .head_title h2 a, body.charcoal .text .head_title h2 a:hover {
	color: #696a5c; /* less off-white */
}
body.charcoal .text h3, body.charcoal .simulated_text_h3 {
	color: #292929; /* light grey */
}
body.charcoal .text blockquote {
	color: #222222; /* dark grey */
	border-left: 4px solid #e5e8bb; /* butter */
}
body.charcoal .text .read_more_container a, body.charcoal .text .read_more_container a:link, body.charcoal .text .read_more_container a:visited {
	background: #222222; /* dark red */
}
body.charcoal .text .read_more_container a:hover, body.charcoal .text .read_more_container a:active, body.charcoal .text .read_more_container a:focus {
	background: #696a5c; /* red */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Quote Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .quote span.quote_start {
	color: #292929; /* light grey */
}
body.charcoal .quote span.quote_end {
	color: #292929; /* light grey */
}
body.charcoal .quote blockquote p {
	color: #292929; /* light grey */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Link Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .link h2 a, body.charcoal .link h2 a:link, body.charcoal .link h2 a:visited {
	color: #ffffff; /* white */
	background: #222222 url(http://static.tumblr.com/fftf9xi/8wSl17oqx/charcoal-icon-right.png) 470px center no-repeat; /* dark red */
}
body.charcoal .link h2 a:hover, body.charcoal .link h2 a:active, body.charcoal .link h2 a:focus {
	color: #696a5c; /* red */
	background: #696a5c url(http://static.tumblr.com/fftf9xi/8wSl17oqx/charcoal-icon-right.png) 470px center no-repeat; /* red */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Audio Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .audio .audio_album {
	background: #222222; /* dark grey */
}
body.charcoal .audio h2 {
	color: #292929; /* light grey */
}
body.charcoal .audio h3 {
	color: #222222; /* dark grey */
}
body.charcoal .audio .audio_meta li {
	color: #292929; /* light grey */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Chat Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .chat .head_title h2 {
	color: #696a5c; /* less off-white */
}
body.charcoal .chat li strong {
	color: #222222; /* dark red */
}
body.charcoal .chat .odd{
	background-color: #e5e8bb; /* butter */
}
body.charcoal .chat .even{
	border: 1px solid #e5e8bb; /* butter */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Answer Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .text .head_title_answer h2 {
	color: #696a5c; /* less off-white */
}
body.charcoal .text .head_title_answer p {
	color: #696a5c; /* less off-white */
}
body.charcoal .text .head_title_answer img {
	border: 2px solid #e5e8bb; /* butter */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Photo Post
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	General Content Styling
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Styling for h2 and simulated h2 with <p><b></b></p> jquery selection */
body.charcoal .content h2, body.charcoal .simulated_content_h2 {
	color: #696a5c; /* less off-white */
}
body.charcoal .content blockquote {
	border-left: 4px solid #e5e8bb; /* butter */
}
body.charcoal a.round_button, body.charcoal a.round_button:link, body.charcoal a.round_button:visited {
	background: #222222; /* dark red */
}
body.charcoal a.round_button:hover, body.charcoal a.round_button:active, body.charcoal a.round_button:focus {
	background: #696a5c; /* red */
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Meta Bar
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .meta {
	background: #292929; /* light grey */
}
body.charcoal .tag_list {
	background: url(http://static.tumblr.com/fftf9xi/kI2l17os1/charcoal-icon-tag.png) 0 0 no-repeat;
}
body.charcoal .tag_list li {
	color: #696a5c; /* dark butter */
}
body.charcoal .tag_list li a, body.charcoal .tag_list li a:link, body.charcoal .tag_list li a:visited {
	color: #696a5c; /* red */
	background: #222222; /* dark red */
}
body.charcoal .tag_list li a:hover, .tag_list li a:active, .tag_list li a:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}
body.charcoal .meta_list li {
	color: #696a5c; /* dark butter */
}
body.charcoal .meta_list li.meta_time {
	background: url(http://static.tumblr.com/fftf9xi/1UCl17osh/charcoal-icon-time.png) 0 0 no-repeat;
}
body.charcoal .meta_list li.meta_url {
	background: url(http://static.tumblr.com/fftf9xi/lJKl17osy/charcoal-icon-url.png) 0 0 no-repeat;
}
body.charcoal .meta_list li.meta_heart {
	background: url(http://static.tumblr.com/fftf9xi/lMdl17otg/charcoal-icon-heart.png) 0 0 no-repeat;
}
body.charcoal .meta_list li.meta_chat {
	background: url(http://static.tumblr.com/fftf9xi/yr1l17ou5/charcoal-icon-chat.png) 0 0 no-repeat;
}
body.charcoal .meta_list li a.round_meta, body.charcoal .meta_list li a.round_meta:link, body.charcoal .meta_list li a.round_meta:visited {
	color: #696a5c; /* dark butter */
	background: #222222; /* dark grey */
}
body.charcoal .meta_list li a.round_meta:hover, body.charcoal .meta_list li a.round_meta:active, body.charcoal .meta_list li a.round_meta:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}
body.charcoal .share_links_wrapper a.share_this_over {
	color: #696a5c !important; /* red */
	background: #ffffff !important; /* white */
}
body.charcoal .author_list {
	background: url(http://static.tumblr.com/fftf9xi/CKKl17oum/charcoal-icon-author.png) 0 2px no-repeat;
}
body.charcoal .author_list li {
	color: #696a5c; /* dark butter */
}
body.charcoal .author_list li img {
	border: 2px solid #222222; /* dark grey */
}
body.charcoal .author_list li a, body.charcoal .author_list li a:link, body.charcoal .author_list li a:visited {
	color: #696a5c; /* dark butter */
	background: #222222; /* dark grey */
}
body.charcoal .author_list li a:hover, body.charcoal .author_list li a:active, body.charcoal .author_list li a:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}
body.charcoal .reblog_list {
	background: url(http://static.tumblr.com/fftf9xi/O3yl17ov3/charcoal-icon-reblog.png) 0 2px no-repeat;
}
body.charcoal .reblog_list li {
	color: #696a5c; /* dark butter */
}
body.charcoal .reblog_list li img {
	border: 2px solid #222222; /* dark grey */
}
body.charcoal .reblog_list li a, body.charcoal .reblog_list li a:link, body.charcoal .reblog_list li a:visited {
	color: #696a5c; /* dark butter */
	background: #222222; /* dark grey */
}
body.charcoal .reblog_list li a:hover, body.charcoal .reblog_list li a:active, body.charcoal .reblog_list li a:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Notes
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal ol.notes li {
	background: #ffffff; /* white */
	color: #222222; /* dark grey */
}
body.charcoal ol.notes li blockquote {
	border-left: 4px solid #e5e8bb; /* butter */
}
body.charcoal ol.notes li img {
	border: 2px solid #222222; /* dark grey */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Disqus
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal #disqus_thread h3 {
	font-size: 16px !important;
	color: #23292d !important; /* darkest grey */
	line-height: 24px !important;
	color: #353c41 !important; /* dark grey */
}
body.charcoal .hr_post {
	background: #222222; /* dark grey */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Pagination
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .page_list li {
	color: #e5e8bb; /* butter */
}

/* Default, inactive button style */
body.charcoal li.page_older a, body.charcoal li.page_older a:link, body.charcoal li.page_older a:visited, body.charcoal li.page_older a:hover, body.charcoal li.page_older a:active, body.charcoal li.page_older a:focus {
	color: #222222; /* dark grey */
	background: #292929; /* light grey */
}
body.charcoal li.page_older a.active, body.charcoal li.page_older a.active:link, body.charcoal li.page_older a.active:visited {
	color: #696a5c; /* red */
	background: #222222 url(http://static.tumblr.com/fftf9xi/i5Tl17ovo/charcoal-icon-left.png) 4px 7px no-repeat; /* dark red */
}
body.charcoal li.page_older a.active:hover, body.charcoal li.page_older a.active:active, body.charcoal li.page_older a.active:focus {
	color: #ffffff; /* white */
	background: #696a5c url(http://static.tumblr.com/fftf9xi/i5Tl17ovo/charcoal-icon-left.png) 4px 7px no-repeat; /* red */
}
/* Default, inactive button style */
body.charcoal li.page_newer a, body.charcoal li.page_newer a:link, body.charcoal li.page_newer a:visited, body.charcoal li.page_newer a:hover, body.charcoal li.page_newer a:active, body.charcoal li.page_newer a:focus {
	color: #222222; /* dark grey */
	background: #292929; /* light grey */
}
body.charcoal li.page_newer a.active, body.charcoal li.page_newer a.active:link, body.charcoal li.page_newer a.active:visited {
	color: #696a5c; /* red */
	background: #222222 url(http://static.tumblr.com/fftf9xi/8wSl17oqx/charcoal-icon-right.png) 78px 7px no-repeat; /* dark red */
}
body.charcoal li.page_newer a.active:hover, body.charcoal li.page_newer a.active:active, body.charcoal li.page_newer a.active:focus {
	color: #ffffff; /* white */
	background: #696a5c url(http://static.tumblr.com/fftf9xi/8wSl17oqx/charcoal-icon-right.png) 78px 7px no-repeat; /* red */
}
body.charcoal li.page_count span {
	color: #e5e8bb; /* butter */
	background: #222222; /* dark grey */
}
/*******************************************************************************************************
SIDEBAR
*******************************************************************************************************/
body.charcoal .sidebar h3 {
	color: #e5e8bb; /* butter */
}
body.charcoal .box_side {
	display: block;
	background: #292929; /* light grey */
	color: #fafbee; /* off-white */
}
body.charcoal .box_side p small {
	color: #e5e8bb; /* butter */
}
body.charcoal .box_side .icon {
	border: 4px solid #222222; /* dark grey */
}
body.charcoal .hr_side {
	background: #222222; /* dark grey */
}
body.charcoal .box_side ul li {
	color: #e5e8bb; /* butter */
}
body.charcoal .box_side ul li a {
	color: #696a5c; /* red */
	background: #222222; /* dark red */
}
body.charcoal .box_side ul li a:hover, body.charcoal .box_side ul li a:active, body.charcoal .box_side ul li a:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Optional Small Title
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .title h1 {
	color: #696a5c; /* less off-white */
}
body.charcoal .title h1 a, body.charcoal .title h1 a:link, body.charcoal .title h1 a:visited  {
	color: #696a5c; /* less off-white */
	border-bottom: solid 4px #222222; /* dark grey */
}
body.charcoal .title h1 a:hover, body.charcoal .title h1 a:active, body.charcoal .title h1 a:focus {
	color: #696a5c; /* less off-white */
	background-color: transparent;
	border-bottom: solid 4px #696a5c; /* red */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Search
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .search .search_box {
	background: #292929; /* light grey */
}
body.charcoal .search_text {
	color: #292929; /* light grey */
	background: #696a5c; /* dark butter */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Contributors
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .contributors .author img {
	border: 4px solid #222222; /* dark grey */
}
body.charcoal .contributors .author p {
	color: #e5e8bb; /* butter */
}
body.charcoal .contributors .author p a {
	color: #696a5c; /* red */
	background: #222222; /* dark red  */
}
body.charcoal .following .icon_grid img {
	border: 4px solid #222222; /* dark grey */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Contributors
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .links_list li {
	color: #e5e8bb; /* butter */
	}			
body.charcoal .links_list li a, body.charcoal .links_list li a:link, body.charcoal .links_list li a:visited  {
	color: #696a5c; /* red */
	background: #222222; /* dark red */
	}
body.charcoal .links_list li a:hover, body.charcoal .links_list li a:active, body.charcoal .links_list li a:focus  {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
	}
body.charcoal .gallery .flickr_thumbs li a {
	border: 4px solid #222222; /* dark grey */
}
body.charcoal .tumblr_links p a, body.charcoal .tumblr_links p a:link, body.charcoal .tumblr_links p a:visited {
	color: #696a5c; /* dark butter */
	background: #222222; /* dark grey */
}
body.charcoal .tumblr_links p a:hover, body.charcoal .tumblr_links p a:active, body.charcoal .tumblr_links p a:focus {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}

/*******************************************************************************************************
FOOTER / LIKED
*******************************************************************************************************/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Liked
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal .liked h2 {
	color: #696a5c; /* less off-white */
}
body.charcoal .liked_box {
	background: #292929; /* light grey */
	color: #ffffff; /* white */
}
body.charcoal li.like_post {
	color: #292929; /* light grey */
	background: #ffffff; /* white */
}
body.charcoal .post_info_bottom {
	color: #292929; /* light grey */
}
body.charcoal ul.more_liked li {
	color: #e5e8bb; /* butter */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Footer
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.charcoal #footer ul li, body.charcoal #footer p {
	color: #696a5c; /* dark butter */
}
body.charcoal #footer li a, body.charcoal #footer li a:link, body.charcoal #footer li a:visited  {
	color: #696a5c; /* red */
	background: #222222; /* dark red */
}
body.charcoal #footer li a:hover, body.charcoal #footer li a:active, body.charcoal #footer li a:focus  {
	color: #696a5c; /* red */
	background: #ffffff; /* white */
}