/*
Theme Name: Mpho Maboi'
Description: This is a custom theme for Mpho Maboi build with help from 2lmn
Author: Karabo Ngoatle ( http://karabongoatle.co.za )
Version: 1.1
License: All Rights Reserved
Tags: karabo ngoatle,  ngoatle, karabongoatle
*/

	body {
		background-color: #fff;	
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #7f7f7f;
	}
	
	a {
		color: #f80f89;
		text-decoration: none;
	}
	
	a:hover {
		color: #fff;
		background-color: #f80f89;
	}
	
	/* generic */
	.story {
		font-size: 1.1em;
		line-height: 1.4em;
	}
	
		.story p {
			margin-bottom: 1.3em;
		}
		
		.story blockquote {
			margin: 2em 2em;	
			padding-left: 1.5em;
			border-left: 5px solid #bbb;
		}
		
		.story ul {
			margin: 1.5em 2em;
			list-style-type: circle;
		}
			.story ul li {
				margin-bottom: 0.5em;
				padding-left: 1em;
			}
			
		.story ol {
			margin: 1.5em 2em 1.5em 2.7em;
			list-style-type: decimal;
		}
			.story ol li {
				margin-bottom: 0.5em;
				padding-left: 1em;
			}
	
	.traverse {
		margin-bottom: 16px;	
	}
		.traverse .point {
			float: left;	
			max-width: 45%;
		}
			.traverse .next {
				float: right;	
			}
	
	/* specific */
	
	#header {
		background-color: #f2f2f2;	
	}
			#header .brand_top {
				background-color: #fff;
			}
				#header .brand_top a:hover {
					background-color: #fff;	
				}
				#header .brand_top img {
					display: block;	
				}
				
	#neck .brand_bottom img {
		display: block;	
	}
	
	
	#neck .navigation {
		text-transform: uppercase;	
		margin-bottom: 26px;
	}
		#neck .navigation a {
			color: #000;
		}
			#neck .navigation .points a {
				color: #7f7f7f;
				display: inline-block;
			}
			#neck .navigation a:hover {
				color: #fff;	
			}
			
		#neck .navigation .point {
			font-weight: bold;
			
		}
		
		#neck .navigation .nav_block .sub_nav_block .points {
			border-top: 1px solid #7f7f7f;
			min-width: 138px;
			margin: 5px 10px 0 0;
			padding-top: 5px;
		}
			#neck .navigation .nav_block  .representation .points {
				margin-right: 0;	
			}
				#neck .navigation .nav_block .sub_nav_block .points .sub_nav_point {
					margin-bottom: 5px;	
				}
	
	/* view */
	.view .top_label {	
		border-bottom: 1px solid #676767;
		margin-bottom: 16px;
		text-transform: uppercase;
	}
		.view .top_label span {
			display: block;
			padding-bottom:11px;
		}
			
			.view .top_label span {
				display: block;
				padding-bottom:11px;
			}
				.view .top_label span a {
					color: #7f7f7f;	
					margin-right: 3px;
				}
					.view .top_label span a:hover {
						color: #f80f89;	
						background-color: transparent;
					}
					
				.view .top_label span .arrow {
					background-image: url(images/icons/right-arrow.png);
					background-repeat: no-repeat;
					background-position: 0 4px;
					padding-left: 9px;
				}
				
					.view .top_label span a.arrow_post_title {
						text-transform: none;
						color: #F80F89;
					}
						.view .top_label span a.arrow_post_title:hover {
							color: #7f7f7f;
						}
				
		
		.view .with_traversal {
			margin-bottom: 7px;
		}
	
	/* shortening the length */
	
	.view .C .top_label, .view .D .top_label, .view .D .traverse {
		width: 770px;
	}
	
		.view .D .top_label_wrap .top_label, .view .C .top_label_wrap .top_label {
			width: 770px;
			float: left;
			margin-bottom: 10px;
		}
		.view .D .top_label_wrap .rss_feed, .view .C .top_label_wrap .rss_feed {
			width: 12px;
			float: right;
			display: block;
			margin-top: 15px;
			margin-right: 58px;
		}
			.view .D .top_label_wrap .rss_feed img, .view .C .top_label_wrap .rss_feed img {
				display: block;	
				
			}
		
	
		
	.view .home .A2 {
		border-top: 4px solid #e3e3e3;	
	}
	
	.view .home h2 {
		margin: 23px 0 16px 0;
		font-weight: lighter;
	}
		
	
	.view .panel {
		margin-bottom: 10px;
	}
		.view .panel p {
			margin-bottom: 5px;	
		}
		.view .panel .labels {
			margin-bottom: 8px;
		}
			.view .panel .labels .label {
				float: left;	
				width: 40%;
				font-size: 0.9em;
			}
				.view .panel .labels .right {
					float: right;
					text-align: right;
				}
				
				.view .panel .labels .who {
					background-position: 0 0;
					background-repeat: no-repeat;
					padding: 2px 0 4px 22px;
				}
				
		.view .panel .email {
			margin-bottom: 20px;
		}
		
		.view .panel .twitter {
			margin-bottom: 15px;
		}
			.view .panel .twitter .labels .who {
				background-image: url(images/icons/t_mini-b.png);
			}
			.view .panel .twitter .story {
				border-top: 1px solid #666;
				padding-top: 10px;
			}
		
		.view .panel .lastfm {
			
		}
			.view .panel .lastfm .labels .who {
				background-image: url(images/icons/lastfm.png);
				padding-bottom: 4px;
			}
			
			.view .panel .lastfm .tracks .track {
				float: left;
				margin-right: 14px;
				width: 65px;
			}
				.view .panel .lastfm .tracks .track a {
					display: block;
					border: 2px solid #e3e3e3;
				}
					.view .panel .lastfm .tracks .track a:hover {
						border-color: #f80f89;
					}
					
					.view .panel .lastfm .tracks .track a img {
						display: block;
					}
	/* sponsors */
	
	.sponsors .sponsor  {
		border-bottom: 1px dotted;
		padding-bottom: 9px;
		margin-bottom: 22px;
	}
		.sponsors .sponsor .sponsor_title {
			background-color: #e3e3e3;
			font-size: 1.6em;
			font-weight: lighter;
			padding: 10px 0 5px 16px;
			color: #000;
			
		}
		
		.sponsors .sponsor .sponsor_image {
			float: left;
			width: 227px;
		}
		
		.sponsors .sponsor .story {
			margin: 25px 0 0 15px;
			float: left;
			width: 456px;
		}
	
	/* blog */
	
	.archive .item {
		background-color: #e3e3e3;	
		width: 172px;
		height: 175px;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
		
	}
		.archive .item .item_bg {
			display: block;
			margin: 5px 2px 2px 2px;
			width: 168px;
			height: 168px;
			background-position: 50% 50%;
		}
			.archive .item .item_bg a {
				display: block;
				/*margin-top:140px;*/
				position: relative;
				/*top: 138px;
				height: 30px;*/
				padding: 7px 7px;
				background-image: url(images/transparent.png);
				color: #fff;
				line-height: 1.2em;
			}
				.archive .item .item_bg a:hover {
					background-color: #000;	
				}
	
	/* blog post */
	
		.view .blog_post .top_title {
			width: 440px;
			margin-bottom: 10px;
		}
			.view .blog_post .top_title .post_title {
				width: 307px;	
				float: left;
			}
			.view .blog_post .top_title .post_title h2 {
				color: #000;
				font-size: 1.6em;
				margin-bottom: 5px;
			}
			
			.view .blog_post .top_title .post_date {
				width: 93px;
				float: right;
				color: #bbb;
				line-height: 1.2em;
				background-image: url(images/icons/calendar_icon.png);
				background-repeat: no-repeat;
				background-position: 0 3px;
				padding-left: 16px;
			}
			
		.view .blog_post .story img {
			max-width: 100%;	
			height: auto;
		}
		
		.view .blog_post .tags {
			background-image: url(images/icons/tag_icon.png);
			background-repeat: no-repeat;
			background-position: 0 0;
			padding: 0 0 0 17px;
		}
		.view .blog_post .share_bar {
			background-image: url(images/icons/share_icon.png);
			background-repeat: no-repeat;
			background-position: 0 10px;
			padding: 10px 0 5px 17px;
			border-top: 1px dotted #ccc;
			margin-top: 10px;
			display: block;
		}
		
		.view .blog_post .twitter {
			width: 217px;
			float: left;
		}
			.view .blog_post .twitter .time {
				margin-top: 2px;	
			}
		
		.view .blog_post .lastfm {
			width: 148px;
			float: right;
		}
			.view .blog_post .lastfm .labels .label {
				width: auto;
				float: none;
			}
			.view .blog_post .lastfm .tracks .last, .view .blog_post .lastfm .tracks > li:last-child {
				margin-right: 0;
			}
			
			
	/* comments */
	
	.view .comments .label {
		border-top: 1px solid #ccc;	
		border-bottom: 1px solid  #ccc;	
		padding: 13px 0 13px 0;
		margin-top: 20px;
	}
		.view .comments .label .comment_action {
			float: left;
			background-image: url(images/icons/pencil_icon.png);
			background-repeat: no-repeat;
			background-position: 100% 0;
			padding-right: 15px;
			max-width: 40%;
		}
		
		.view .comments .label .comment_total {
			float: right;	
			max-width: 40%;
			text-align: right;
			
			background-image: url(images/icons/comment_icon.png);
			background-repeat: no-repeat;
			background-position:  0;
			padding-left: 16px;
		}
		
		.view .comments .comment_form {
			padding: 13px 0;	
		}
		
		.view .comments .comment_list .comment {
			margin-bottom: 11px;
		}
			.view .comments .comment_list .comment .comment-author {
				font-size: 1.2em;
				font-weight: bold;
			}
			
			.view .comments .comment_list .comment .comment-meta {
				margin-bottom: 6px;
				margin-top: 5px;
			}
			
			
			.view .comments .comment_list .comment .comment-moderating {
				margin-top: 5px;
				font-style: italic;
			}
			
			.view .comments .comment_list .comment p {
				border: 1px solid #9f9f9f;
				padding: 10px 7px 10px 7px;
				font-size: 1.2em;
				line-height: 1.4em;
			}
			
		.view .subscription .by {
			background-position: 0 0;
			background-repeat: no-repeat;
			display: inline-block;
			padding: 0 5px 3px 16px;
		}
			.view .subscription .by_email {
				background-image: url(images/icons/mail_icon.png);
				background-position: 0 1px;
			}
			
			.view .subscription .by_rss {
				background-image: url(images/icons/feed_icon.png);
			}
			
	/* foot */
	#torso {
		padding-bottom: 40px;	
	}
	
	#footer {
		background-repeat: no-repeat;
		padding-left: 368px;
		position: absolute;
	}

	/* source http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page */