@CHARSET "ISO-8859-1";

a {
	color: #009DE8;
	text-decoration: none;
	padding-bottom: 10px;
}

a:hover {
	text-decoration: underline;
}
body{
	background:#333333 url(../img/mex-bg.png) repeat-x fixed left bottom;
	background-repeat:repeat-x;
	background-position: bottom ;  	
	font-family: sans-serif;
}

.searchField{
	border: 1px solid #000000; 
	background-color: #CCCCCC; 
	color:#000000;
	height:23px;
}

.contentContainer {
	background-repeat:repeat-x;
	padding:10px 0px 20px;
}

.gridHolder {
	height:500px;
	left:10px;
	overflow:hidden;
	position:absolute;
	top:123px;
	width:500px;
}


div#grid{
	position:relative;
	width: 500px;
	z-index: 2;
}

div#backgroundGrid{
	position:relative;
	width: 500px;
	z-index: 1;
}

.mainRight {
	float:left;
	width:458px;
}
.mainLeft {
	float:left;
	width:510px;
}

.contentBox{
	margin-top: 5px;
	
}
.playerBox{
	width: 500px;
	height: 500px;
	overflow:hidden;
}

.title {
	color:#666666;
	font-size:24px;
	font-weight: bold;
}

.whiteLine {
	background-color:#444444;
	border:medium none #444444;
	color:#444444;
	height:1px;
}

.blackLine {
	background-color:#CCCCCC;
	border:medium none #CCCCCC;
	color:#CCCCCC;
	height:1px;
}

div#gridcell1,div#gridcell4,div#gridcell7,
div#gridcell2,div#gridcell5,div#gridcell8,
div#gridcell3,div#gridcell6,div#gridcell9
 {
	float: left;
	width: 156px;
	margin: 5px;
	/*display: none;*/	/* does not work with sriptacolous use inline style expression instead */
}

div#upperGrid, div#middleGrid, div#bottomGrid {
	clear: left;
	width:510px;
}


div#buttonRight{
	left:580px;
	position:absolute;
	top:380px;
}
div#buttonLeft{
	position:absolute;
	top:380px;
	left:50px;
}
div#buttonUp{
	position:absolute;
	top:120px;
	left:315px;
}
div#buttonDown{
	left:315px;
	position:absolute;
	top:650px;
}

div.autocomplete {
     background-color:white;
     border:1px solid #888;
}

div.autocomplete ul {
     list-style-type:none;
     margin:0px;
     padding:0px;
}

div.autocomplete ul li.selected { background-color: #ffb;}

div.autocomplete ul li {
     list-style-type:none;
     display:block;
     margin:0;
     padding:2px;
     cursor:pointer;
}
 
.albumMenu{
	width:89px;
	height:27px;
	position: absolute;
	z-index: 10;
} 
.albumMenuBackground{
	background-image:url('../img/background.gif');
	width:89px;
	height:27px;
	
	position:absolute;
	z-index:-1;
	opacity:0.6;
	filter:alpha(opacity=60);
}
/*
	Playlist Stuff	
*/
.removeItem {
	float:right;
	cursor:pointer;	
}

.playItem {
	color:#CCCCCC;
	font-size:medium;
	width:100%;
	height:19px;
	cursor:pointer;
	overflow:hidden;
} 

.playList{
	padding: 8px;	
	padding-top: 0px;
	padding-bottom: 15px;
	
	
}

.menuImage{
	cursor:pointer;
	padding-top:2px;
}


.tab{/*  explorer.form inactive Tab   */
	width: 100px;
	border: 1px solid #c0c0c0;
	border-bottom:none;
	background-color: #666666;
	float:left;
	cursor:pointer;
	padding-left:4px;
	height: 25px;
	padding-top:10px;
	margin-right: 3px;
}

.tabSelected{/*  explorer.form selected Tab   */
	width: 100px;
	border: 1px solid #c0c0c0;
	border-bottom:none;
	background-color: #666666;
	float:left;
	cursor:pointer;
	padding-left:4px;
	color:#FFFFFF;
	height: 25px;
	padding-top:11px;
	margin-right: 3px;
}


.trackTab{	
	color:#FFFFFF;	
	padding:2px;
	padding-bottom:1px;
	/* IE 6 only */
	* padding-bottom:0px;
	/* end */
}

.trackTabSelected{
	background-color:#777777;
	color:#FFFFFF;
	padding:2px;
	padding-bottom:2px;
	/* IE 6 only */
	* padding-bottom:1px;
	/* end */
}


/*
	mp3Player Stuff
*/

.mp3Player{
	 padding: 8px;
	 height: 96px;
	 width:442px;
	 overflow:hidden;
}

.mp3PlayerOptions{
	padding-top: 5px;
}

.dragable{
	height:13px;
	width: 13px;	
}
.slideBarMasterDiv{
	float:left;
	display:block;
	width:350px;
	padding-top: 2px;	
}
.slideBar{
	background-color: #ccc;
	height: 13px;
	width: 350px;
}
.slideBarText{
	color:#FFFFFF;
	font-size:x-small;
}
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}
.searchBox{
	position: absolute;
	height:200px;
	width: 400px;
	left: 30%;
	top: 30%;
	padding-top: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

.searchDetailBox{
	
	left:30%;
	padding-left:30px;
	padding-right:30px;
	padding-top:18px;
	padding-bottom:18px;
	
	top:10%;
	width:400px;
}
.whiteText{
	color:#FFFFFF;
}

.redText{
	color:#770000;
}
.grayText{
	color:#CCCCCC;	
}

.loader{
	height:0px;
	left:238px;
	position:absolute;
	top:280px;
	
	/* only for < 1024 x 768
	left:218px;
	top:275px;
	*/
}



/* paging stuff */

.clickable{
	cursor: pointer;
}

.page{
	color:#CCCCCC;
	text-decoration: underline;
}

.selectedPage{
	color:#FFFFFF;
}
.grayline{
	color: #444444;
}	
.grayScrollbars{
scrollbar-base-color: #CCCCCC;
scrollbar-arrow-color: #CCCCCC;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #CCCCCC;
scrollbar-face-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-shadow-color: #333333;
scrollbar-track-color: #333333;	
}
.Container {
  position: absolute;
  top: 275px; 
  left: 20px;
  width: 400px;
  height: 350px;
}
#Scroller-1 { 
  position: absolute; 
  overflow: hidden;
  width: 400px;
  height: 350px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
}
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
#Scrollbar-Container {
  position: absolute;
  top: 235px; 
  left: 420px;
}
.Scrollbar-Up {
  cursor: pointer;
  position: absolute;
}
.Scrollbar-Track {
  width: 20px; height: 331px;
  position: absolute;
  top: 17px; left: -2px;
  background-color: #ADACAC;
}
.Scrollbar-Handle {
  position: absolute;
  width: 20px; height: 22px;
}
.Scrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 357px;}