/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++ ch.ill.fm CSS +++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Theme Name: chillfm
Theme URL: http://ch.ill.fm/
Description: inspired by <a href="http://notcot.org">notcot.org</a>, one of the most ellegant site on the web.
Version: 0.1
Author: Takuhiro Noda
Author URL: http://takuhironoda.com

*/

/* Eric Mayer's CSS reset ------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}



/* Basic Structure ------------------------------*/

body {
	background: #fff url('images/top.jpg') repeat-x;
	font-family: 'Molengo', 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%;
	line-height: 1.8em;
	margin: 0 auto;
	overflow: auto; overflow-x: hidden;
	padding: 0;
	text-align: center;
}

#container {
	padding: 0 2% 30px;
}

img, img a { border: none; }

p, p a, p a:visited,
h1, h1 a, h1 a:visited,
h2, h2 a, h2 a:visited,
h3, h3 a, h3 a:visited,
h4, h4 a, h4 a:visited,
ul#menu, ul#menu a, ul#menu a:visited {
 color: #555753;
 text-decoration: none;
 text-shadow: #fff 1px 1px 1px;
}

p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ul#menu a:hover, .navigation a:hover {
 color: #23a2b3;
 text-decoration: none;
 text-shadow: #fff 1px 1px 1px;
}

h1 {
 text-indent: -9999px;
	}

h2 {
 font-size: 1.4em;
 font-weight: bold;
 margin: 10px 0 2px;
}

h3 { font-size: 1.3em; }

h4 { font-size: 1.1em; }

h3, h4 { 
 font-weight: normal;
	margin: 5px 0 0;
}




/* Header ------------------------------*/

#header {
 height: 100px;
 margin: 0 0 20px;
 padding: 0 0 0 2%;
 width: 100%;
}

#logo {
	height: 100px;
	margin: 0 0 0 -12px;
	width: 360px;
}

ul#menu {
 display: block;
 /*padding-right: 6px;  fix the gap between Firefox and Safari */
 list-style: none;
 position: absolute;
  top: 6px;
  right: 99px;
  z-index: 999;
}

ul#menu li {
 display: inline-block;
 margin: 0;
}

/* Menu ----------*/

a.radioTrigger, a.radioTrigger:hover, a.djMix, a.djMix:hover, a.about, a.about:hover, a.submit, a.submit:hover, a.rss, a.rss:hover {
 border:1px solid #e2e2e2;
 display: block;
 font-size: 1.4em;
 font-weight: bold;
 padding: 5px 10px 5px 35px;
 position: relative;
 float: right;
 /*position: absolute;
  top: 6px;
  right: 200px;
  z-index: 9999;*/
 text-decoration: none;
 width: 50px;
 -moz-border-radius-bottomleft: 6px;
 -khtml-border-radius-bottomleft: 6px;
 -webkit-border-bottom-left-radius: 6px;
 -moz-border-radius-bottomright: 6px;
 -khtml-border-radius-bottomright: 6px;
 -webkit-border-bottom-right-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

a.radioTrigger {
 background: #f0f0f0 url('images/icon-radio.png') 15% 50% no-repeat;
 background-position: 22px 4px;
}

a.radioTrigger:hover, a.active.searchTrigger {
 color: #23a2b3;
 background: #fafafa url('images/icon-radio.png') 15% 50% no-repeat;
 background-position: 22px -28px;
}

a.djMix {
 background: #f0f0f0 url('images/icon-djmix.png') 15% 50% no-repeat;
 background-position: 14px 4px;
}

a.djMix:hover, a.active.djMix {
 color: #23a2b3;
 background: #fafafa url('images/icon-djmix.png') 15% 50% no-repeat;
 background-position: 14px -28px;
}

a.about {
 background: #f0f0f0 url('images/icon-chillfm.png') 15% 50% no-repeat;
}

a.about:hover, a.active.about {
 color: #23a2b3;
 background: #fafafa url('images/icon-chillfm.png') 15% 50% no-repeat;
}

a.submit {
 background: #f0f0f0 url('images/icon-submit.png') 15% 50% no-repeat;
 background-position: 12px 4px;
}

a.submit:hover, a.active.submit {
 color: #23a2b3;
 background: #fafafa url('images/icon-submit.png') 15% 50% no-repeat;
 background-position: 12px -28px;
}

a.rss {
 background: #f0f0f0 url('images/icon-rss.png') 15% 50% no-repeat;
 background-position: 22px 4px;
}

a.rss:hover, a.active.rss {
 color: #23a2b3;
 background: #fafafa url('images/icon-rss.png') 15% 50% no-repeat;
 background-position: 22px -28px;
}

/* Radio Panel ----------*/

.radioPanel {
 background: #f0f0f0;
 border:1px solid #e2e2e2;
 display: none;
 height: auto;
 padding: 40px 10px 10px;
 position: absolute;
  top: 6px;
  right: 0;
  z-index: 99;
 width: 600px;
 -moz-border-radius-bottomleft: 6px;
 -khtml-border-radius-bottomleft: 6px;
 -webkit-border-bottom-left-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

.radioPanel p{
 font-size: 1.1em;
 padding: 0;
 margin: 15px 0 10px;
}

.radioPanel a {
 color: #507c89;
 text-decoration: none;
}

/* Search Panel ----------*/

.searchPanel {
 background: #f0f0f0;
 border:1px solid #e2e2e2;
 display: none;
 height: auto;
 padding: 5px 30px;
 position: absolute;
  top: 6px;
  right: 0;
  z-index: 9999;
 width: 350px;
 -moz-border-radius-bottomleft: 6px;
 -khtml-border-radius-bottomleft: 6px;
 -webkit-border-bottom-left-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

.searchPanel p{
 font-size: 1.1em;
 padding: 0;
 margin: 15px 0 10px;
}

.searchPanel a {
 color: #507c89;
 text-decoration: none;
}

#searchForm {
	margin: 0;
	padding: 5px;
	}
	
#s {
 width: 200px;	
 float: left;
}

#searchSubmit {
 margin: 0 0 0 10px;
 float: left;
}

a.searchTrigger, a.searchTrigger:hover{
 border:1px solid #e2e2e2;
 display: block;
 font-size: 1.4em;
 font-weight: bold;
 padding: 5px 10px 5px 35px;
 /*position: relative;
 float: right;*/
 position: absolute;
  top: 6px;
  right: 0;
  z-index: 9999;
 text-decoration: none;
 width: 50px;
 -moz-border-radius-bottomleft: 6px;
 -khtml-border-radius-bottomleft: 6px;
 -webkit-border-bottom-left-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

a.searchTrigger {
 background: #f0f0f0 url('images/icon-search.png') 15% 50% no-repeat;
 background-position: 12px 4px;
}

a.searchTrigger:hover, a.active.searchTrigger {
 color: #23a2b3;
 background: #fafafa url('images/icon-search.png') 15% 50% no-repeat;
 background-position: 12px -28px;
}



/* Index & Archive Section ------------------------------*/

ul.column {
 list-style: none;
 margin: 0;
 padding: 0;
	width: 100%;
}

ul.column li {
 display: inline;
	float: left;
	margin: 6px;
	padding: 0;
	width: 300px;
}

.shadowOuter {
 margin: 0 3px 3px 0;
	position: relative;
	 left: 3px;
	 top: 3px;	
}
 
.shadowOuter .shadow1 {
	background: #eeeeec;
}
 
.shadowOuter .shadow2 {
	background: #aaaca7;
}

.shadowOuter .shadow3 {
 background: #cbcec7;
}
 
.shadowOuter .shadow2,
.shadowOuter .shadow3 {
	position: relative;
	 left: -1px;
	 top: -1px;
}

.block {
 background: #f0f0f0;
 border: #d3d7cf 1px solid;
	height: 330px;
	padding: 10px;
}

.block img {
 /*background: #fff;*/
 display: block;
 margin: 0 auto;
 padding: 5%;
	/*width: 89%;
	-ms-interpolation-mode: bicubic;*/	
}

.shadowOuter .shadow1,
.shadowOuter .shadow2,
.shadowOuter .shadow3,
.block {
 -moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}



/* Single Section ------------------------------*/

ul.columnSingle {
 list-style: none;
 margin: 20px auto;
	padding: 0;
	width: 300px;
}

ul.columnSingle li {
 display: inline;
 margin: 5px 0;
	padding: 0;
	width: 300px;
}

ul.columnSingleLeft,
ul.columnSingleRight {
 list-style: none;
 margin: 100px 0 0;
 padding: 0;
 position: absolute;
  top: 20px;
	width: 300px;
}

ul.columnSingleLeft {
  left: -150px;  
}

ul.columnSingleRight {
  right: -150px;
}

ul.columnSingleLeft li,
ul.columnSingleRight li {
 display: inline;
 padding: 0;
 margin: 5px 0;
	width: 300px;
}

#blockShadowNext,
#blockShadowPrev {
 background: #888a85;
	border: #777975 1px solid;
	height: 330px;	
	padding: 10px 10px 10px 15px;
	position: relative;
	 z-index: 99;	
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

#blockShadowNext a,
#blockShadowPrev a,
#blockShadowNext a:hover,
#blockShadowPrev a:hover {
 display: block;
 height: 330px;
 text-indent: -9999px;
 width: 300px;
}

.blockSide {
 background: #f0f0f0;
	height: 330px;	
	margin-top: -350px;
	padding: 10px 10px 10px 15px;
}

.blockSide img {
 /*background: #fff;*/
 display: block;
 margin: 0 auto;
 padding: 5%;
	/*width: 89%;
	-ms-interpolation-mode: bicubic;*/	
}

#blockShadowNext,
#blockShadowPrev,
.blockSide,
.blockImg {
 -moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}



/* Page Section ------------------------------*/

ul.columnCenter {
 list-style: none;
 margin: 30px auto 0;
	padding: 0;
	width: 920px;
}

ul.columnCenter li {
 display: inline;
 margin: 5px 0;
	padding: 0;
	width: 920px;
}

.blockCenter {
 background: #f0f0f0;
 border: #d3d7cf 1px solid;
	height: 560px;
	padding: 0;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#pageBlock {
 background: url('images/pageBg.jpg') no-repeat;
 height: 100%;
 margin: 20px 22px 20px 18px;
 width: 880px;
}

#pageBlock p{
 /*border: 1px #ccc solid;*/
 color: #eeeeec;
 float: left;
 font-size: 1.6em;
 line-height: 1.6em;
 margin: 10px 0 0 10px;
 padding: 23px;
 text-align: justify;
 text-shadow: #666864 1px 1px 1px;
 width: 520px;
}



/* Elements in the block ------------------------------*/

/* Vertical Video Box */

.v1 {
	display: table;
	height: 230px;
	overflow: hidden;
	#position: relative;
	width: 100%;
}
 
.v2 {
	display: table-cell;
	#position: absolute;
	#top: 50%;
	vertical-align: middle;
}

.v3 {
	#position: relative;
	#top: -50%;
}

/* Vertical Audio Box */

.a1 {
	display: table;
	height: 230px;
	overflow: hidden;
	#position: relative;
	width: 100%;
}
 
.a2 {
	display: table-cell;
	#position: absolute;
	#top: 50%;
	vertical-align: middle;
}

.a3 {
	#position: relative;
	#top: -50%;
}

.a3 img { /* img size should be 184x184 */
 position: absolute;
  top: 78px;
  left: 42px;
}

/* label link icon */

a.labelLink {
 background: url('images/icon-link.png') no-repeat;
 background-position: 6px 0;
 height: 16px;
 position: absolute;
 text-indent: -9999px;
 width: 32px;
}

a.labelLink:hover, a.active.download {
 background-position: 6px -32px;
}

/* audiplayer */

.audioPlayer { /* wp audioplayer 2.06b */
 position: absolute;
  bottom: 52px;
  left: 57px;
}

/* tippy Tooltips */

.tippy a {
 background: url('images/icon-music.png') no-repeat;
 background-position: 0 0;
 float: left;
 height: 24px;
 margin: 4px 0 0 6px;
 text-indent: -9999px;
 width: 24px;
}

.tippy a:hover {
 background-position: 0 -24px;
}

/* comment link */

.commentLink a {
 background: url('images/icon-comment.png') no-repeat;
 background-position: 0 0;
 color: #d3d7cf;
 float: left;
 font-size: .7em;
 height: 24px;
 margin: 10px 0 0 10px;
 text-decoration: none;
 text-shadow: #eeeeec 0 0 1px;
 width: 24px;
}

.commentLink a:hover {
 background-position: 0 -24px;
}

/* wp-postratings */

.ratingIndex {
 display: block;
 height: 24px;
 margin: 6px 0 0 74px;
 width: 60px;
}

.ratingSingle {
 display: block;
 margin: -25px 0 0 36px;
}

.ratingsCount {
 color: #d3d7cf;
 font-size: .7em;
 padding: 0;
 position: absolute;
 margin: 5px 0 0 10px;
 text-decoration: none;
 text-shadow: #eeeeec 0 0 1px;
}

/* tweet button */

.tweetButton {
 float: left;
 height: 20px;
 margin: -20px 0 0 10px;
 width: 55px;
}

.tweetButtonSingle {
 position: absolute;
 height: 20px;
 margin: -20px 0 0 40px;
 width: 55px;
}

/* DJ Mix */

.djMixTag {
 background: url('images/djMix.jpg') no-repeat;
 color: #f0f0f0;
 height: 15px;
 margin: -300px 0 0 -5px;
 position: absolute;
 width: 50px;
}

/* featured */

.featured {
 background: url('images/featured.jpg') no-repeat;
 color: #f0f0f0;
 height: 15px;
 margin: -305px 0 0 -5px;
 position: absolute;
 width: 50px;
}

/* video made by */

.vBy {
 color: #555753;
 font-size: 1.1em;
 height: 10px; 
 position: absolute;
  bottom: 34px;
  right: 20px;
 text-align: right;
 text-shadow: #fff 1px 1px 1px;
}
 .vBy a {
  color: #555753;
  text-decoration: none;
 }
 .vBy a:hover {
  color: #23a2b3;
 }

/* submitted by */

.by {
 color: #babdb6;
 font-size: .9em;
 height: 10px;
 position: absolute;
  bottom: 14px;
  right: 20px;
 text-align: right;
 text-shadow: #fff 1px 1px 1px;
}


/* Comment Section ------------------------------*/

#commentBlock {
 background: #fafafa;
 border: 1px solid #e7e7e7;
 margin: 20px 0;
}

h3#commentTitle, h3#trackbackTitle, h3#replyTitle {
 font-size: 1.4em;
 margin: 20px auto 0;
 text-shadow: #fff 1px 1px 1px;
}

.commentlist {
	text-align: justify;
}

.commentlist li {
	list-style: none;
}

.commentOuter {
 background: #f3f3f3;
 border: 1px solid #e2e2e2;
	margin: 20px 10px 0;
	padding: 15px 20px 20px;
}

.commentMeta {
 height: 30px;
 margin: 10px 0 0;
 padding: 0;
}

.commentAvator {
 float: left;
}

.commentData {
 float: left;
 padding: 0 0 0 10px;
}
 big { font-size: 1.4em; }

.navigation, .navigation a, .navigation a:visited {
 color: #555753;
 height: 100%; 
 text-decoration: none;
 text-shadow: #fff 1px 1px 1px;
}

.navigation a:hover {
 color: #23a2b3;
}

.alignleft {
 float: left;
 padding-left: 20px;
}

.alignright {
 float: right;
 padding-right: 20px;
}

#respond:after {
	content: "."; 
	 display: block; 
	 height: 0;
	 clear: both; 
	 visibility: hidden;
}

#commentform {
	margin: 10px 0 0;
}

#commentform input, #commentform textarea {
	width: 200px;
	padding: 0;
 margin: 0;
}

#commentform p {
	margin: 0 0 10px;
}

#commentform #submit {
	margin: 0 0 15px;
}

#commentBlock, .commentOuter {
 -moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
}



/* wp-pagenavi ------------------------------*/

#pageNavi {
 clear: both;
 margin: 0 auto 20px;
 padding: 20px 0 0 0;
	width: 100%;
}



/* Footer Panel ------------------------------*/

.footerPanel {
 background: #f0f0f0;
 border:1px solid #e2e2e2;
 display: none;
 height: auto;
 padding: 5px 30px 5px 0;
 position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
 width: 700px;
 -moz-border-radius-topleft: 6px;
 -khtml-border-radius-topleft: 6px;
 -webkit-border-top-left-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

.footerPanel p{
 font-size: 1.2em;
 padding: 0;
 margin: 15px 0 10px;
}

.footerPanel a {
 font-weight: bold;
 text-decoration: none;
}

a.footerTrigger, a.footerTrigger:hover{
 border:1px solid #e2e2e2;
 display: block;
 font-size: 1.4em;
 font-weight: bold;
 padding: 5px 10px 5px 30px;
 position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
 text-decoration: none;
 -moz-border-radius-topleft: 6px;
 -khtml-border-radius-topleft: 6px;
 -webkit-border-top-left-radius: 6px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

a.footerTrigger {
 background: #f0f0f0 url('images/icon-info.png') 15% 50% no-repeat;
 background-position: 8px 5px;
}

a.footerTrigger:hover, a.active.footerTrigger {
 color: #23a2b3;
 background: #fafafa url('images/icon-info.png') 15% 50% no-repeat;
 background-position: 8px -27px;
}