/*
Default CSS for Channel-Ai Portal
Author: eyn
URL: http://www.channel-ai.com/portal/
Last modified: 2007.09.17
Mock Design by caffeinated
*/

body {
	font-family: Arial, sans-serif;
	font-size: 1em;
	padding: 0;
	margin: 0;
	color: #888;
	background: #fff; }

#top_half {
	background: url('images/gradient_light.gif') repeat-x; }

#row1 {
	clear: both;
	padding: 15px; }

#row2, #row3, #row4 {
	background: url('images/gradient_light.gif') repeat-x;
	border-top: 5px dashed #eee;
	clear: both;
	padding: 15px; }

.col1 {
	width: 50%;
	float: left; }

.col2 {
	width: 50%;
	float: left; }

.clear {
	clear: both; }

.full {
	width: 96%;
	padding: 15px; }


/******************** Header and Footer ********************/

#header {
	background: #fffef2;
	padding: 20px 23px 10px;
	border-bottom: 7px solid #ffd3d4; }
	
	#logo {
		width: 230px;
		height: 80px;
		text-indent: -5000px;
		background: url('images/logo.gif') no-repeat;
		float: left; }
			
		#logo a { display: block; width: 230px; height: 80px; }
	
	#lyrics { /* lyrics excerpt */
		text-align: right;
		font-family: Georgia, sans-serif;
		font-size: 0.9em;
		color: #aaa;
		float: right;
		padding-right: 15px; }
	
	#lyrics div {
		display: table-cell;
		height: 80px;
		vertical-align: middle; }
	
	#lyrics em {
		margin-right: 15px; }
	
	#lyrics small { /* song name */
		display: block;
		padding-top: 5px;
		font-size: 1.1em; }

#footer {
	background: #fffef2;
	min-height: 20px;
	clear: both;
	text-align: center;
	padding: 10px 0 30px;
	border-top: 7px solid #ffd3d4; }
	
	#footer p { /* for consistent display on IE and Firefox */
		margin: 20px; }
	
	#footer a {
		color: #ffa3b6;
		text-decoration: none;
		font-size: 1em; }
		
	#footer a:hover {
		text-decoration: underline; }
	
	#footer small {
		font-size: 0.7em; }
	
		#footer small a {
			font-size: 1.0em; }


/******************** Navigation Bar ********************/

#nav {
	padding-bottom: 15px; }

#nav ul {
	margin: 0; 
	padding: 10px 20px; }

	#nav ul li {
		margin: 0;
		list-style-type: none;
		display: inline;
		font-size: 1em; }

	#nav ul li.date {
		margin-right: 8px;
		padding: 10px 20px;
		text-decoration: none;
		color: #fff;
		background: #ffb337 url(images/gradient_orange.gif) repeat-x;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #ddd; }

	#nav ul li a {
		padding: 10px 20px;
		text-decoration: none;
		text-transform: lowercase;
		color: #aaa;
		background: #fff7ea;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #ddd; }

	#nav ul li a:hover {
		color: #fff;
		background: #ffb337 url(images/gradient_orange.gif) repeat-x; }


/******************** Login Box ********************/

#loginbox { /* login box */
	width: 100%;
	margin: 10px 0;
	text-align: center;
	background: #fffef2;
	border-top: 1px solid #f1f1f1; 
	border-bottom: 1px solid #eee; }
	
	#loginbox td {
		padding: 15px;
		font-size: 0.8em; }

	#loginbox p { /* register, hide this box */
		padding: 0;
		margin:0;
		margin-top: 15px;
		font-size: 0.9em; }
	
	#loginbox input { /* username, password field */
		text-align: center;
		background: #fff;
		color: #999;
		padding: 3px;
		border: 0;
		border-top: 1px solid #f1f1f1; 
		border-bottom: 1px solid #eee; }
	
	#loginbox .button { /* log in button */
		background: #f6f6f6;
		color: #888;
		border: 1px solid #ddd;
		padding: 2px 10px; }
		
	#loginbox a {
		color: #888;
		text-decoration: none; }
		
	#loginbox a:hover {
		text-decoration: underline; }


/******************** Feed Titles ********************/

.col1 h2, .col2 h2 {
	margin: 20px 14px 12px;
	padding-left: 23px; }

.col1 h2 a, .col2 h2 a {
	letter-spacing: -1px;
	font-size: 1.1em;
	text-decoration: none;
	font-weight: normal;
	color: #aaa;
	margin: 0; }

.col1 h2 a:hover, .col2 h2 a:hover {
	color: #ff486e; }

.announce { background: url('images/title_icon/announce.png') center left no-repeat; }
.topics { background: url('images/title_icon/topics.png') center left no-repeat; }
.blog { background: url('images/title_icon/blog.png') center left no-repeat; }
.gallery { background: url('images/title_icon/gallery.png') center left no-repeat; }
.news { background: url('images/title_icon/news.png') center left no-repeat; }
.posts { background: url('images/title_icon/posts.png') center left no-repeat; }
.cal { background: url('images/title_icon/cal.png') center left no-repeat; }
.chart { background: url('images/title_icon/chart.png') center left no-repeat; }


/******************** Generic Feeds ********************/

div.feedItems { /* div that loads external content */
	min-height: 160px;
	height: auto;
	margin: 0 6px; }

.loading { /* ajax loading */
	background: url('images/loading.gif') no-repeat center center;
	font-family: "Verdana", sans-serif;
	font-size: 10px;
	line-height: 50px;
	padding-top: 40px;
	text-align: center; }

.feedItems a {
	color: #ff486e; }
	
	.feedItems a:hover {
		color: #333;
		background: #ffe5ba; }

a.item_title { /* title of each feed items */
	color: #777;
	font-size: 0.8em;
	text-decoration: none; }

.date {
	color: #999;
	font-size: 0.9em;
	font-weight: bold;
	padding-left: 3px; }

.feedItems img {  /* remove border for "go" icon */
	border: 0; }

.feedItems ol {
	margin: 10px 0;
	padding: 0 0 0 30px; }

	.feedItems ol li {	/* feed iten list */
		padding: 4px 0 4px 20px;
		margin-left: -15px;
		list-style-type: none;
		border-bottom: 1px solid #eee;
		background: url('images/bullet.gif') center left no-repeat; }
		
		.feedItems ol li:hover {
			background: url('images/bullet_hover.gif') center left no-repeat; }
	
		.feedItems ol li .latest_item {
			font-size: 1em;
			font-weight: bold; }

.description { /* expanded div */
	margin: 14px 0 24px -24px;
	padding: 20px;
	background: #fff url('images/gradient.gif') repeat-x;
	font-size: 0.75em;
	line-height: 1.7em;
	border-top: 5px solid #ccc;
	border-bottom: 2px dotted #ddd; }

.pagination {
	margin: 0 auto;
	padding: 10px 10px 30px;
	width: 150px; }

	.pagination a {
		text-decoration: none;
		color: #aaa; }

	.pagination a:hover {
		background: #eee;
		color: #888;
		border: 1px solid #aaa; }

	.previous {
		float: left; }
	
	.next {
		float: right; }

	.previous, .next {
		font-size: 0.7em;
		padding: 1px 4px;
		border: 1px solid #ddd; }


/******************** Gallery Feeds ********************/

ol.pics { /* gallery thumbnails */
	margin: 0 0 5px 10px;
	padding: 0; }
	
	ol.pics li {
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent; /* remove bullet icon */
		list-style-type: none; display: inline;	}
	
	ol.pics img {
		border: 1px solid #e3e3e3;
		background: #fff;
		padding: 4px;
		margin: 3px; }

	ol.pics img:hover {
		border: 1px solid #fff;
		background: #ffc970; }

	ol.pics a:hover { /* remove background color */
		background: #fff; }


/******************** Blog Feeds ********************/

.player {
	padding-top: 10px; }

#message {
	font-size: 0.75em;
	margin-left: 10px;
	margin-top: 25px;
	padding: 10px 10px 10px 30px;
	background: #fffef2 url('images/message.gif') 10px center no-repeat;
	border-top: 1px solid #f1f1f1; 
	border-bottom: 1px solid #eee; }


/******************** phpBB Feeds ********************/

.quote, .code { /* quotes in phpBB feeds */
	margin-top: 10px;
	padding: 20px; 
	background: #f7f7f7;
	border: 1px solid #ddd; }

.inside_quote, .inside_code { /* content of quote, code */
	padding-top: 10px; }

.inside_code { /* font for code content */
	font-family: "Courier New"; }

.postbody ol li { /* bring back numbered list */
	margin: 0;
	padding: 1px;
	border: 0;
	background: transparent !important;
	list-style-type: decimal; }

.postbody ul, .postbody ol {
	margin-top: 5px; }

.postbody ul li {
	border: 0;
	padding: 0 0 3px 18px;
	background: url('images/bullet.gif') left 4px no-repeat; }

.postbody ul li:hover { /* override generic hover */
	background: url('images/bullet.gif') left 4px no-repeat; }


/******************** Calendar ********************/

#calendar {
	width: 70%;
	margin-left: 20px;
	text-align: center; }
	
	#calendar h2.month {
		color: #999;
		font-size: 1.2em;
		margin: 10px;
		font-weight: normal; }
	
	#calendar table {
		width: 100%;
		margin: auto;
		margin-bottom: 8px;
		border: 1px solid #eee;
		border-width: 1px 0 1px 1px; }
		
		#calendar th {
			background: #fafafa;
			color: #999;
			font-size: 0.75em;
			font-weight: bold;
			border-right: 1px solid #eee;
			padding: 10px; }
		
		#calendar td {
			background: #fff;
			color: #aaa;
			font-size: 0.7em;
			border: 1px solid #eee;
			border-width: 1px 1px 0  0;
			text-align: center;
			height: 3em; }

		#calendar td:hover, #feed_cal td:hover a {
			background: #f7f7f7 !important;
			color: #999 !important;
			cursor: pointer; }
			
		#calendar td div { /* events */
			height: 2.9em;
			line-height: 3em; }
		
		#calendar td a {
			text-decoration: none;
			color: #777; }
		
		#calendar td.today, #feed_cal td.today a {
			font-weight: bold;
			background: #ff486e;
			color: #fff; }
		
		#calendar td.day-event {
			background: #fefddb;
			padding: 0; }
		
		#calendar td.notInMonth {
			background: #fff; }


/******************** Last.fm Chart ********************/

#barChart {
	width: 90%;
	margin: 3px 0 5px 10px; }
	
	#barChart a {
		color: #777;
		text-decoration: none; }

	#barChart a:hover {
		color: #777;
		text-decoration: underline; }

	#barChart td {
		font-size: 0.9em;
		padding: 3px 0 6px;
		border-bottom: 1px solid #eee; }

	#barChart div {
  		position: relative;
  		padding: 0 5px; }

	#barChart td.position {
		text-align: right; 
		padding-right: 8px;}
		
	#barChart td.subject {
		width: 100%; }
	
	#barChart span.text {
		position: relative;
		z-index: 5;
		padding: 2px 0 2px 10px; }

	#barChart span.percentageBar {
		background-color: #f2f2f2;
		display: block;
		background-image: url('images/half-width_bg.gif');
		background-position: right center;
		background-repeat: no-repeat;
		position: absolute;
		height: 18px;
		z-index: 0;
		top: 0;
		left: 0;
		min-width: 9px; }


/******************** Sweet Titles ********************/

div#toolTip {
	position: absolute;
	min-width: 10px;
	background: #000;
	border: 1px solid #eee;
	text-align: left;
	padding: 5px;
	margin-bottom: 30px;
	min-height: 1em;
	z-index: 10;
	-moz-border-radius: 5px; }

	div#toolTip p {
		margin: 0;
		padding: 3px;
		color: #eee;
		font: 13px/17px Georgia,sans-serif; }
	
	div#toolTip p em {
		display:none; }


/******************** Misc ********************/

p.noscript {
	display: block;
	font-size: 1.2em;
	text-align: center;
	padding: 35px; }

:root { overflow-y: scroll; } /* force vertical scrollbar in Firefox */