html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; margin:0; padding:0; text-align: center; max-height:100%; font-size:100%; font-size:1em; font-family:"Times New Roman";}
img {position: absolute; border: none;}

/* ---------------------------- explicit main page styling ------------------------------*/

#background_image {top: 0; left: 0; width: 100%; height: 100%; z-index: -3; }
#headermain  {top: 0%; left: 30%; width: 40%;}
#headergeneral  {top: 0%; left: 30%; width: 40%; z-index: 3;}

/* -------------- set the rollover modes for left pane navigation categories ------------*/
.categoriesleft {width: 16%; left: 10%; z-index: 1;}
.categorieslefthover {width: 16%; left: 10%; z-index: 2; opacity:0;filter:alpha(opacity=0);}
.categorieslefthover:hover  {opacity:1.0;filter:alpha(opacity=100);}

#video {top: 30%; }
#shop {top: 50%;}
#contact {top: 70%;}
/* --------------------------------------------------------------------------------------- */


/* ---------------- set the rollover modes for left pane navigation categories -------------*/
.categoriesright {width: 16%; right:10%;}
.categoriesrighthover {width: 16%; right:10%; z-index: 2; opacity:0;filter:alpha(opacity=0);}
.categoriesrighthover:hover  {opacity:1.0;filter:alpha(opacity=100);}

#band{top: 30%;}
#shows { top: 50%;}
#gallery {top: 70%;}
/* ------------------------------------------------------------------------------------------*/
/* ------------------------- end of explicit main page styling ------------------------------*/


/* -----------------------  General pages navigation bar  ----------------------------------*/
.navigationbar {position: absolute; top: 8%; width: 7%;  z-index:1; opacity:1.0;filter:alpha(opacity=100);}
.navigationbar:hover {opacity:0;filter:alpha(opacity=0);}
.navigationbarhover {position: absolute; top: 8%; width: 7%; z-index:0; opacity:1.0;filter:alpha(opacity=100);}

#navtheband {right: 6%;}
#navshows {right: 14%;}
#navgallery {right: 22%;}
#navvideo {left: 22%;}
#navshop {left: 14%;}
#navcontact{left: 6%;}


/* -------------------------- Content of page -------------------------------------------*/
.content {position: absolute; width: 60%; text-align: center; top: 40%; left: 20%; font-size:2em; Direction: rtl;}
.upload {position: absolute; width: 60%; text-align: center; top: 40%; left: 20%; font-size:2em; Direction: ltr;}
.gallerypage {position: absolute; width: 90%; height: 75%; text-align: center; top: 15%; left: 5%;}
.video {position: absolute; width: 60%; height: 65%; text-align: center; top: 20%; left: 20%;}
#videotop{position: absolute; width: 100%; height: 8%; left: 0%; bottom:80%; z-index: -3; opacity:0.7;filter:alpha(opacity=70);}
#videobottom {position: absolute; width: 100%; height: 8%; left: 0%; top:85%; z-index: -3; opacity:0.7;filter:alpha(opacity=70);}


div.shows, div.showsbackground {position: absolute; width: 60%; height: 65%; top: 20%; left: 20%; text-align: center;overflow-y: auto; Direction: rtl;}
.showsbackground {position: absolute; width: 60%; height: 65%; top: 20%; left: 20%; background-color: #eee; opacity:0.2;filter:alpha(opacity=20);}
.shows table{position: relative; width: 100%; height: 100%; border: 1px solid #000; border-collapse:collapse;}
.showsbg img{position: absolute; width: 100%; height: 100%; top: 0%;left: 0%; z-index: -2; opacity:0.7;filter:alpha(opacity=70);}
.showsover {border: 1px solid #000; border-collapse:collapse; color: #ddd; text-decoration: line-through;}
/* ------------------------------------------------------------------------------------------*/


/* -------------------------- the band page -------------------------------------------*/
div.theband, div.thebandbackground {position: absolute; width: 60%; height: 65%; top: 20%; left: 20%; text-align: center;overflow-y: auto; Direction: rtl;}
.thebandbackground{position: absolute; width: 60%; height: 65%; top: 20%; left: 20%; background-color: #eee; opacity:0.2;filter:alpha(opacity=20);}
.thebandbg img{position:absolute; width: 100%; height: 100%; top: 0%; left: 0%; z-index: -1; opacity:0.6;filter:alpha(opacity=60);}
/* ------------------------------------------------------------------------------------------*/

div.shopbg {position: absolute; width: 60%; height: 65%; top: 20%; left: 20%; background-color: #aaa;  border:2px solid #000; opacity:0.4; filter:alpha(opacity=40); z-index: 0;}


/* ------------------------------------- Contact Us Page Style ---------------------------------------*/
div.contactbg {position: absolute; width: 30%; height: 65%; top: 20%; background-color: #000;  border:2px solid #fff; opacity:0.4; filter:alpha(opacity=40); z-index: 2;}
div.contactimages {position: absolute; width: 30%; height: 24%; bottom: 30%; z-index: 2;}
img.contactbg {width: 60%; bottom: 0%; left: 20%;}

#contactbgleft {left: 2.5%;}
#contactbgcenter {left: 35%;}
#contactbgright {right: 2.5%;}


.contactus {position: absolute; width: 30%; top: 31%;  height: 54%; color: #ddd; direction: rtl; font-size: 1.2em;  z-index: 3;} 
a {color: #000; font-weight: bold}
a:hover {color: #fff;}


#contactleft {left: 2.5%; }
#contactcenter {left: 35%; }
#contactright {right: 2.5%; }

.maincontactbg img {position: absolute; width: 100%; height: 100%; top: 0%;left: 0%; z-index: -2; opacity:0.6;filter:alpha(opacity=60);}

.formerror {background-color: #900;}
/* ------------------------------------------------------------------------------------------*/


/* ------------------------------------- Error Page Style ---------------------------------------*/
.error {position: absolute; width: 60%; height: 65%; text-align: center; top: 20%; left: 20%; font-size:1.6em; color: #000; direction: rtl;}
#getchrome {position: absolute; height: 15%; left: 30%;}
#getfirefox {position: absolute; height: 15% ;right: 30%;}
/* ------------------------------------------------------------------------------------------*/


/* ----------------------------------- set the footer ----------------------------------------*/
.social {position:absolute; width: 5%; bottom: 2%; z-index:1; opacity:1.0;filter:alpha(opacity=100);}
.social:hover {opacity:0;filter:alpha(opacity=0);}
.socialhover {position:absolute; z-index:0; width: 5%; bottom: 2%; opacity:1.0;filter:alpha(opacity=100);}

#footerbackground  {width: 50%;  bottom: 0%; left:25%; z-index:-1; opacity:0.7;filter:alpha(opacity=70);}
#facebook {right: 35%;}
#twitter {right: 27%;}
#youtube {left: 27%;}
#myspace {left: 35%;}
/* ------------------------------------------------------------------------------------------*/

/* ----------------------------------- set the player ----------------------------------------*/
.playergui {position: absolute; width: 5%;  bottom: 0%; z-index: 5;}
.playerguihover {position: absolute; width: 5%;  bottom: 0%; z-index: 4; opacity:1.0;filter:alpha(opacity=100);}
.playergui:hover {opacity:0.0;filter:alpha(opacity=0);}


#jp_container_1 {}

#previous {position: absoulte;  bottom: 1%; left: 44%;}
#play  {position: absoulte; width: 4%;  bottom: 0%; left: 48%; z-index:10; }
#pause {position: absoulte; width: 4%;  bottom: 0%; left: 48%; z-index:9; }
#next {position: absoulte;  bottom: 1%; right: 44%;}


/* @group current time and duration */

.jp-current-time, .jp-duration {width:70px; font-size:1em; color: #8c7a99; display: none;}

/* @group playlist */

.jp-title ul,.jp-playlist ul {list-style-type:none; font-size:.7em; margin: 0;	padding: 0;	display: none;}
.jp-title li,.jp-playlist li {position: relative; padding: 2px 0; border-top:1px solid #554461; border-bottom:1px solid #180a1f; overflow: hidden;	display: none;}
.jp-title li{	border-bottom:none;	border-top:none;	padding:0;	text-align:center;	display: none;}

.jp-no-solution {
	position:absolute;
	width:390px;
	margin-left:-202px;
	left:50%;
	top: 10px;
	padding:5px;
	font-size:.8em;
	background-color:#3a2a45;
	border-top:2px solid #554461;
	border-left:2px solid #554461;
	border-right:2px solid #180a1f;
	border-bottom:2px solid #180a1f;
	color:#fff;
	display:none;
}

.jp-no-solution a {color:#fff;}
.jp-no-solution span {font-size:1em;	display:block;	text-align:center;	font-weight:bold;}
.jp-audio .jp-no-solution {	width:190px;	margin-left:-102px;}