/*  
Theme Name: Div Black Theme
Theme URI: http://www.askgraphics.com/freetemplates/
Description: Order a custom blog deign for just $250 @ <a href="http://www.askgraphics.com/blog-design.html">AskGraphics.com</a>.
Version: 1.0
Author: AskGraphics
Author URI: http://www.askgraphics.com/

*/

body{
    padding:0px;
	margin:0px;
	font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size:12px;
    background:#000000 repeat-x top left;
	width:100%;
}

input.musicbutton
{
   font-size:13px;
   font-family:Verdana,sans-serif;
   color:#FFCC00;
   width:147px;
   height:64px;
   background-color:#000000;
   background-image:url(images/score3.gif);
   border-style:none;
   cursor:hand;
   cursor:pointer;
}

img{
	border:0px;
}

#plays {
    font-size: 11px;
    color: #C0C0C0;
}

#buy {
    text-align: center; 
    padding-top:25px;
    padding-bottom:25px;
    padding-left: 200px;
    width: 107px;
    height: 26px;
}

#buy input {
     border-style:none;
}

a{
    color: #FFFFCC;
	text-decoration:none;
}

a:focus { -moz-outline-style: none; }/*this avoids having image replacement sections display a dotted outline*/

a:active
{
  outline: none;
}

form, table, ul, li{

	padding:0px;
	margin:0px;
	font-size:14px;
}

#dnld td  {
   font-family:Trebuchet MS, Arial, Helvetica, sans-serif;	
	 font-size:12px;
}

.sub{
	border:0px;
}

input, textarea{
	border:1px solid #cecece;
	font-size:12px
}

div#page{
	width:1000px;
	text-align:left;
}

/*header*/
#header{
	width:100%;
	height:290px;
	text-align:left;
}

#header_center{
	width:100%;
	height:140px;
	background:url('images/header_center_bg.gif') no-repeat top left;
}

#header_end{
	width:100%;
	height:40px;
	 background:url('images/header_end_bg2.gif') no-repeat top left;
}

#header_title{
	padding-top:15px;
	font-size:58px;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	text-align:center;
}

/* end header */

/*menu*/

#menu_items{
	width:100%;
	float:left;
	padding-top:8px;
}

#menu{
	padding-left:10px;
	font-size:12px;
	color:#ffffff;
}

div#menu_items div{
	color:#ffffff;
	background:url('images/menu_sep.gif') no-repeat right bottom;
	padding-left:8px;
	padding-right:12px;
	height:32px;
	float:left
}

div#menu a{
	color:#ffffff;
	position:relative;
	top:4px;
}

div#menu a:hover{
	color:#FFCC33; 
}

/* end menu */


/* blog*/

div#page #blog{
	float:left;
	width:100%; 
	
}

div#page #blog_top{
	float:left;
 	width:100%; 
}

div#blog #blog_center{
	width:437px;
	float:left;
	padding-top:1px;
}

#blog_right_sidebar{
	width:265px;
	float:right;
}

div#blog #blog_left{
	float:left;
	width:150px;
	padding-left:34px;
}

div#blog #blog_right{
	float:center;
	width:265px;
}

#content{
	width:437px;
}
.center{
	width:437px;
}

/* sidebar */
#sidebar_bg{
	background:url("images/sidebar_bg.gif") no-repeat top left;
	float:left;
	width:265px;
	min-height:934px;
	_height:934px;
}

/* end sidebar*/

/* footer */

#footer{
	width:100%;
	height:109px;
    text-align:center;
	float:left;
	background:url("images/footer_bg.gif") repeat-x left top;
	color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top:60px;
}

div#footer #footer_text{
	padding-top:30px;
}

div#footer #footer_text img{
	position:relative;
	top:3px;
}

/* end footer */

div#blog h2{
	margin:0px;
	padding:0px;
	padding-left:30px;
	font-size:21px;
	color:#dadada;
	font-weight:normal;
	font-style:italic;
	margin-bottom:5px;
}

div#blog h2 span{
	font-style:italic;
	border-bottom:1px dotted #dadada;
}

div#blog .entry{
	font-size: 12px;
	padding-left:30px;
	padding-right:5px;
	color:#fff;
	width:555px;
}

div#blog .entry a{
	font-weight:bold;
}

div#blog .entry p{
	margin:0px;
	padding:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:16x;
	color:#fff;
	padding-bottom:10px;
}

/********************TREE ********************************/

#treetext{
    color: #FFF;
	padding-left:45px;
	font-size: 14px;
    line-height: 14px;
}


#treecontent1{ width: 525px; }
	
#tbutton {
	font-size: 22px;
	line-height: 22px;
	margin-left: 155px;
}
#treetop{
	background:url("images/swapplayer_t2.gif") no-repeat top left; 
	width:525px;
	height:70px;
    margin-left: 22px;	
    position:relative;
}

#treebutt{
  width: 87px;
  height: 31px;
  cursor:pointer;
  margin-left: 15px;	
  margin-top: 15px;
  float: left;
  
}

#treesave{  
  width: 31px;
  height: 31px;
  cursor:pointer;
  margin-left: 304px;	
  margin-top: 14px; 
  float: left; 
   
}

#treebot{
	background:url("images/swapplayer_bl.gif") no-repeat top left; 
	width:525px;
	height:22px;
  margin-left: 22px;	
  position:relative; 
}	
#treeframe{
	background:url("images/swapplayer_m1l.gif") repeat-y top left; 
	width:525px;
  margin-left: 22px;	
  position:relative;
}

#tree {
	color: #000;
   padding-left: 25px;
	font-size: 15px;
	line-height: 15px;
}	

#tree a{   
    color: #000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 14px;
    line-height: 14px;
}

#tree input{
	width:20px;
	font-size:14px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
	color:#000;
	border:0px;
	margin-right:5px;
	background:url("images/tree_input.gif") no-repeat top left;
}

/******************* Quick Picks ******************************/

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

#qp1{
	background:url("images/toolbartop.gif") no-repeat top left; 
	width:184px;
	height:44px;
  margin-left: 22px;	
  position:relative;
}

#qp2_off{
	background:url("images/toolbar2off.gif") no-repeat top left; 
	width:184px;
	height:68px;
  margin-left: 22px;	
  position:relative;
}

#qp2_on{
	background:url("images/toolbar2on.gif") no-repeat top left; 
	width:184px;
	height:68px;
  margin-left: 22px;	
  position:relative;
}
 
#qp3_off{
	background:url("images/toolbar3off.gif") no-repeat top left; 
	width:184px;
	height:67px;
  margin-left: 22px;	
  position:relative;
}

#qp3_on{
	background:url("images/toolbar3on.gif") no-repeat top left; 
	width:184px;
	height:67px;
  margin-left: 22px;	
  position:relative;
}

#qp4_off{
	background:url("images/toolbar4off.gif") no-repeat top left; 
	width:184px;
	height:66px;
  margin-left: 22px;	
  position:relative;
}

#qp4_on{
	background:url("images/toolbar4on.gif") no-repeat top left; 
	width:184px;
	height:66px;
  margin-left: 22px;	
  position:relative;
 
}

#qp5_off{
	background:url("images/toolbar5off.gif") no-repeat top left; 
	width:184px;
	height:76px;
  margin-left: 22px;	
  position:relative;
}

#qp5_on{
	background:url("images/toolbar5on.gif") no-repeat top left; 
	width:184px;
	height:76px;
  margin-left: 22px;	
  position:relative;
}

#streamed{
	background:url("images/streamed.gif") no-repeat top left; 
	width: 125px;
	height: 72px;
	font: bold 14px Arial;
    color: #FFFFFF;
    margin-left: 73px;
    padding-top: 16px;
    padding-left: 30px;	
    position:relative;
}

#f_artist{
	background:url("images/fa_back.jpg") no-repeat top left; 
	text-align:center;
	width: 172px;
	height: 245px;
	font: 9px Arial;
    color: #FFFFFF;
    margin-top: 22px;
    margin-left: 22px;
    padding-top: 60px;
    position: relative;
    display: block;
}

#f_artist a {
  font-weight: bold;
  font-size: 10px;
}

#expose {
 	text-align:center;
	width: 195px;
	font: 11px Arial;
    color: #FFFFFF;
    margin-left: 22px;
    padding-top: 30px;
    position: relative;
    display: block;
}

#expose a {
    font-weight: bold;
    color: #FFFFCC;
	text-decoration: none;
}

/******************* Dropdowns ****************************/
.handcursor{
  cursor:hand;
  cursor:pointer;
}

/* ***************** SLIDER ******************************/

.hide { display: none; }

hr {
	clear: both;
	height: 1px;
	
	}
	
.font-family {
	width: 350px;
	text-align: left;
 	margin: 0 auto; 
	position: relative; 
 	}
	
/* The slide-y content box thingy */

#frame, #frame div.button, #scroller, .section { height: 58em; }

#frame {
	overflow: hidden;
	margin: 0 auto; 
	width: 220px;
	height: 400px;
	position:relative; 
}
	
#frame div.button {
	position: absolute;
	top: 31%;
}
	
div.button#left { left: 0; }
div.button#right { right: 0; }

#scroller {
  width: 190px;
  min-height: 400px;
  _height:400px;
  margin: 0 auto;	
  padding: 0; 
  color: #FFF;
  background: #000 filter:alpha(opacity=50);
  overflow: hidden; 
	}

#contentg {
	width: 15250px;
	
	}

.sectiong {
	width: 190px;
	height: 400px;
	margin: 5px;
	float: left;
	}
		
.sectiong p {
	font-size: 12px;
	line-height: 12px;
	}

.sectiong img {
	float: center;
	margin-right: 5px;
	margin-bottom: 5px;
	display: block;
	
	}

/*******************************pop up window **********************/
	
.font-family{
position: absolute;
border: 2px solid black;
visibility: hidden;
background-color: white;
}

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color:#FFCC33;
color: black;
cursor: move;
overflow: hidden;
width: auto;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.font-family .font-family{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 1px;
top: 2px;
cursor: hand;
cursor: pointer;
}

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}


.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid brown;
background-color: white;
color: black;
height: 150px;
padding: 2px;
overflow: auto;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/
}


.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;
}

/******************Toot tip bubble *****************/
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

/*********************** Enlarge Thumbnails **************/
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

#ad-container { 
   margin: 10px auto 0 auto;
   height: 110px; 
   width: 940px; 
   background: #000;
   float:center
}