/*
	Global CSS
*/
/* Stripping all styles and defining common styles */
img, fieldset, form, h1, h2, h3, h4, p, dt,dd {
	border: 0;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 1em;
}
ul{
	list-style:none;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	border: 0;
	background: #57646c url(../images/background.jpg) repeat-y top center;
	font-family: helvetica, arial, verdana, lucida, sans-serif;	
	font-size: 80%; /* 1em is 10pt, 0.8em is 8pt, 1.6em is 16pt, etc */
	color: #fff;
}
/*add this */
#atffc{
	position:absolute;
	top:0;
	left:0;
}

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

h3{
	font-size:1.2em;
	font-weight:bold;
}

.clearfix{ height: 1px; clear:both; display:inline-block;}
.hidden {display:none;}

.container{
	width:100%;
	height:100%;
	background: transparent url(../images/background-hongkong.jpg) no-repeat top center;
	margin:0;
	min-height:722px;
}

#content{
	width:952px;
	height:995px;
	margin: 0 auto;
	padding:0;
	position:relative;
	background: #474747  url(../images/contentBackground.gif) 260px 50px no-repeat;
}



.leftPanel{
	background: transparent url(../images/leftColumn.jpg) no-repeat top left;
	width:260px;
	height: 995px;
	float:left;
}	

	#audioPlayer{
		margin-top:418px;
		margin-left: 5px;
	}
.footer,{
	clear:both;
}
.footer a.footer,
.footer a.footer:visited,
.footer a.footer:active{
	color:#FFFFFF;
	text-decoration: none;
}

.footerArea{
	width: 942px;
	background: #33393b;
	padding: 5px;
	display:inline-table;
}
p.footer{
	width: 567px;
	height:18px;
	background: #33393b url(../images/footerBackground.gif) top right no-repeat;
	float:right;
	font-size:11px;
	padding: 4px 15px 0;
	text-align:right;
	font-family: "Arial"
}
#imageArea{
	height:250px;
	width:660px;
	margin: 5px 10px 0;
	float:right;
}
#menubar{
	width:685px;
	height: 50px;
	overflow: hidden;
	float:right;
}
#mainContainer{
	width: 660px;
	float:right;
	background: #FFF;
	margin-right: 10px;
	left: 282px;
	top: 307px;
	overflow: hidden;
	border-top: 5px #999 solid;
}
#main{
	width: 570px;
	height:630px;
	padding: 25px 60px 25px 30px;
	color: #000;
	font-size:11px;
	position:relative;
	top:0px;
}
	#main p,
	#main h3,
	#main h4{
		margin: 15px 0;
	}
	
	
	#main label{
		font-weight: bold;
		float:left;
		width:100px;
	}
	#main h4{
		font-size: 1.1em;
		font-weight: bold;
		
	}
	

#scrollbarFlash{
	width:30px;
	height:590px;
	position: absolute;
	right: 15px;
	top: 350px;
}
/***
Menu Buttons
***/
ul.items{
	list-style:none;
	display:inline-block;
	width:100%;
	height:50px;
	margin:0;
	padding:0;
}
ul.items li{
	float:left;
}
ul.items li.firstItem{
	margin-left:20px;
}
ul.items li.lastItem{
	float:right;
}


.btn{
	text-indent: -900em;
	float:left;
}
		.coverBtn {width:80px; height:50px; }
		.coverBtn { background:url(../images/buttons/Cover.jpg) no-repeat bottom left;}
		.coverBtn:hover{ background:url(../images/buttons/Cover.jpg) no-repeat top left;}
		
		.bioBtn {width:116px; height:50px;}
		.bioBtn { background:url(../images/buttons/Biography.jpg) no-repeat bottom left;}
		.bioBtn:hover{ background:url(../images/buttons/Biography.jpg) no-repeat top left;}
		
		.galleryBtn {width:90px; height:50px;}
		.galleryBtn { background:url(../images/buttons/Gallery.jpg) no-repeat bottom left;}
		.galleryBtn:hover{ background:url(../images/buttons/Gallery.jpg) no-repeat top left;}

		.linksBtn {width:65px; height:50px;}
		.linksBtn { background:url(../images/buttons/Links.jpg) no-repeat bottom left;}
		.linksBtn:hover{ background:url(../images/buttons/Links.jpg) no-repeat top left;}
		
		.blogBtn {width:69px; height:50px;}
		.blogBtn { background:url(../images/buttons/Blog.jpg) no-repeat bottom left;}
		.blogBtn:hover{ background:url(../images/buttons/Blog.jpg) no-repeat top left;}
		
		.messageBtn {width:102px; height:50px;}
		.messageBtn { background:url(../images/buttons/Message.jpg) no-repeat bottom left;}
		.messageBtn:hover{ background:url(../images/buttons/Message.jpg) no-repeat top left;}

		.videosBtn {width:91px; height:50px;float:left;}
		.videosBtn { background:url(../images/buttons/Videos.jpg) no-repeat bottom left;}
		.videosBtn:hover{ background:url(../images/buttons/Videos.jpg) no-repeat top left;}
		
		.shareJoinBtn {width:146px; height:50px;float:left;}
		.shareJoinBtn { background:url(../images/buttons/Share_Join.jpg) no-repeat bottom left;}
		.shareJoinBtn:hover{ background:url(../images/buttons/Share_Join.jpg) no-repeat top left;}
	/****
	End Menu Buttons
	***/
	
	/**
	tab styles **/
	/** This floats over with absolute positioning **/
	
	#titleArea{
		float:right;
		display: inline-table;
		margin-right: 10px;
		position:absolute;
		width:150px;
		height:30px;
		clear:both;
		background: transparent url(../images/tabBackground.gif) no-repeat;
		top: 280px;
		left: 283px;
	}
	
	#tabLabel{
		margin-left: 10px;
		font-size: 16px;
		font-family: lucida, arial;
		display: inline-block;
		margin-top: 3px;
	}
	
	
	/***** Banners ***/
	.photo1{
		background: url(../images/banners/guitar_hero.jpg) no-repeat;
	}
	.photo2{
		background: url(../images/banners/waiting.jpg) no-repeat;
	}
	.photo3{
		background: url(../images/banners/on_convoy.jpg) no-repeat;
	}
	.photo4{
		background: url(../images/banners/sunsets_while_singing.jpg) no-repeat;
	}
	/* News section */
	.news p{
		padding: 5px 0px;
	}
	.alternateLine{
		background: #EEE;
	}
/*
	End Global CSS
*/
	
	
	
	
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 Ð 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}

/*
Facebook madness
*/

#facebookGroupBox{
	position: relative;
	right: 150px;
	top:50px;
	background: #EEEEEE;
	display:block;
	width: 295px;
	min-height: 310px;
	overflow:hidden;
	z-index: 5;
}
#facebookGroupBox .addthis_toolbox{
	margin-top:5px;
	margin-bottom:5px;
}
#facebookGroupBox h4{
	background: #EDEFF4;
	padding: 8px 10px;
	color: #333333;
	font-size:13px;
	border-color: #315C99 #AAAAAA #AAAAAA;
	border-style: solid;
	border-width: 1px;
	font-weight: bold;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}


#systemMessage{
	background:#844;
	color:#FFF;
	text-align:center;
	padding: 5px 0px;
	width: 100%;
	margin:0;
}

#systemMessage p{
	margin:4px 0;
}

#systemMessage a{
	color:#FFF
}