/*
Theme Name: T3reef A
Author: Nihad Awidat + Nina Zidani
Description: A theme.
Version: 1
Text Domain: t3reef.
*/

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

@font-face {
	font-family: GE_bold;
	src: url("font/GE SS Unique Bold.otf")  format("opentype");
}
@font-face {
	font-family: GE_light;
	src: url("font/GE SS Unique Light.otf")  format("opentype");
}

body {
		background:url(images/bg.png);
		font-family: GE_light,Tahoma, Geneva, sans-serif;
		font-size:15px;
		color:#555;
		line-height:180%;
		margin:0;
		padding:0;
		text-align:center;
		overflow: scroll;
		
		
	}
h1{
		font-size:180%;
		font-family: GE_bold,Tahoma, Geneva, sans-serif;
		/*font-weight:bold;*/
		margin:0;
		padding:0 20px;
		}
h2{
		font-family: GE_bold,Tahoma, Geneva, sans-serif;
		font-size:160%;
		font-weight:normal;
		}	
h3{
		font-size:140%;
		font-family: GE_bold,Tahoma, Geneva, sans-serif;
		font-weight:normal;
		}	
img{border:none;}

a{
	text-decoration: none;
	color: #393536;
}
#container{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:1024px;
		background:#fff;	
		margin-top: 10px;	
		margin-bottom:2em;
		
		
		}	
#header{
		height:80px;
		line-height:80px;
		background:#5DC9E1;
		color:#fff;
		}				
#content{
		position:relative;
		}		

#headerLogos{
	position:absolute;
	top: 0px;
	width:1024px;
	height:115px;
	/*background-color:#fcf8fa;*/
	border:none;
	z-index:999;
	
	
}

#headerLogos a{
	display:block;
	 width: 30px;
    height: 40px;
}

#logo{
	display:inline;
	float:right;
	background-image:url(images/logo.png);
	width:244px;
	height:115px;
}

#facebook{
	position:absolute;
	left: 30px;
	top: 15px;
	float:left;
	background-image:url(images/facebook.png);
	width:39px;
	height:40px;
}

#twitter{
	position:absolute;
	left: 70px;
	top: 15px;
	float:left;
	background-image:url(images/twitter.png);
	width:39px;
	height:40px;
}

#youtube{
	position:absolute;
	left: 108px;
	top: 15px;
	float:left;
	background-image:url(images/youtube.png);
	width:39px;
	height:40px;
}
 
 
/* sliding menus */
ul#navigation {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 650px;
    left: 300px;
    list-style: none;
    z-index:1001;
}
ul#navigation li {
    width: 71px;
	display:inline;

	
}
ul#navigation li a {
    display: block;
	float: left;
    margin-left: -2px;
    width: 71px;
    height: 52px;    
    /*background-color:#CFCFCF;*/
    background-repeat:no-repeat;
    background-position:center center;
    border:0px solid #AFAFAF;
   /* -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px; */
	background-position:top !important;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    
    opacity: 0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);*/
}

ul#navigation .contact a    {
    background-image: url(images/contact.png);
}
ul#navigation .photos a     {
    background-image: url(images/photos.png);
}
ul#navigation .download a     {
    background-image: url(images/download.png);
}
ul#navigation .video a{
    background-image: url(images/video.png);
}
ul#navigation .blog a      {
   background-image: url(images/blog.png);
}
ul#navigation .music a      {
  background-image: url(images/music.png);
}
ul#navigation .about a     {
    background-image: url(images/about.png);
}


/* sliding menus end */


	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:674px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
		

/* Easy Slider */

	#slider1 ul, #slider 1li,
	#slider2 ul, #slider2 li,
	#slider3 ul, #slider3 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider1{margin-top:0px;}
	#slider2{margin-top:0em; 
			border-top:#F9F9F9 thick solid;
			border-bottom:#F9F9F9 thick solid;
			  box-sizing:border-box;
			  -moz-box-sizing:border-box;
			  -webkit-box-sizing:border-box;	
				}
	#slider3{margin-top:0em;}
	#slider1 li, #slider2 li, #slider3 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:1024px;
		height:241px;
		overflow:hidden; 
		}	
		
		#slider2 li{ 
		height:219px;
		}	
/*  slider btn1 */	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:54px;
		height:53px;
		position:absolute;
		left:30px;
		top:175px;
		z-index:100;
		}	
	#nextBtn, #slider1next{ 
		left:940px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:54px;
		height:53px;
		background:url(images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(images/btn_next.png) no-repeat 0 0;	
		}	
		
/* end btn 1 */
		
/* btn2 */
	#slider2next, #slider2prev{ 
		display:block;
		width:54px;
		height:53px;
		position:absolute;
		left:30px;
		top:340px;
		z-index:100;
		}	
	#nextBtn, #slider2next{ 
		left:940px;
		}														
	#prevBtn a, #nextBtn a,
	#slider2next a, #slider2prev a{  
		display:block;
		position:relative;
		width:54px;
		height:53px;
		background:url(images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider2next a{ 
		background:url(images/btn_next.png) no-repeat 0 0;	
		}	
		
/* end btn 2 /*		

/* btn3 */
	#slider3next, #slider3prev{ 
		display:block;
		width:54px;
		height:53px;
		position:absolute;
		left:30px;
		top:500px;
		z-index:100;
		}	
	#nextBtn, #slider3next{ 
		left:940px;
		}														
	#prevBtn a, #nextBtn a,
	#slider3next a, #slider3prev a{  
		display:block;
		position:relative;
		width:54px;
		height:53px;
		background:url(images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider3next a{ 
		background:url(images/btn_next.png) no-repeat 0 0;	
		}	
		
/* end btn 3 */	
		

	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */


/* frame border overlay */
/*
#topFrame{ 
		display:block;
		width:1034px;
		height:35px;
		position:absolute;
		left:-5px;
		top:0px;
		margin: -5px 0px 0px 0px;
		z-index:1000;
		background:url(images/frame_top.png) no-repeat 0 0;	
		}	
		

#bottomFrame{ 
		display:block;
		width:1034px;
		height:35px;
		position:absolute;
		left:-5px;
		top:700px;
		margin: -5px 0px 0px 0px; 
		z-index:1000;
		
		background:url(images/frame_bottom.png)  no-repeat 0 0;	
		}	
		*/
/* Frame border overlay end*/

/* panel */

#panel {
	display:block;
	position:absolute;
	top: 702px;
	width:1024px;
	height:500px;
	background-color:#FEFDFC;
	border:none;
	border-top:#6c6c6c solid 2px;
	display:none;
	z-index:999;
	text-align:right;
	direction:rtl;
	/*
	opacity: 0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
	*/
	background-color: rgba(254,253,252,0.95);
	
}
 


#closePanelBtn{
	display:none;	
	position:absolute;
	top: 0px;
	left: 3px;
	width:25px;
	height:31px;
	cursor:pointer;
	background-image:url(images/close.png);
}

#selected{
	display:none;	
	position:absolute;
	top: -4px;
	width:74px;
	height:4px;
	width:67px;
	
	background-color:#FEFDFC;

}

#aboutDiv{
 display:none;	
 
}
/*
#aboutDiv h1{
	margin: 20px 0px 0px 0px;

}

#aboutText{
	width: 600px;	
	padding: 20px;
	
	
	
}*/
/*
#aboutImage{
	display:inline;
	float:left;
	vertical-align:top;
	margin-top: -20px;
	padding-left: 20px;
	
}*/
#musicDiv{
 display:none;	
	
}
.categoryThumbnailList {
	display:block;
	clear:both;
	margin: 70px 260px 0px 220px;
	white-space:554px;
	
}
.categoryThumbnailList * {
	border:0px;
	padding:0px;
	margin:0px;
	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
}
.categoryThumbnailList .categoryThumbnailList_item {
	width:93px;
	height:130px;
	display:inline;
	float:right;
	margin:0px 20px 10px 20px;
	font-size:13px;
	text-align:center;
	overflow:hidden;

}
.categoryThumbnailList_clearer {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	overflow:hidden;
}


#musicDiv img{
 

-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');
}


#song1Div{
 display:none;	
	
}

#blogDiv{
 display:none;	
	
}

#videoDiv{
 display:none;	
	
}

#downloadDiv{
 display:none;	
	
}

#photosDiv{
 display:none;	
	
}

#contactDiv{
 display:none;	
	
}


#downloadPage{
	margin: 20px 20px;	
	
}


#blogDiv img,#downloadDiv img{
		
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	cursor:pointer;

	
}

#songBar {
	width: 100%;
	height:100px;
	background-color: #d3cfd0;
	margin: 45px 0px 0px 0px;
	
	/*border-color: #c0bbbd;
	border-top: medium solid;
	border-bottom:medium solid;
	*/
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');
}

#songScroll{
	position: relative;
	margin: 15px 0px 0px 0px;
	display: inline;
	left: 50px;
	height: 100px;
	float:left;
	width:630px;
	overflow: hidden;
	
}

#songScroll ul {
	list-style: none;
	float:left;
	width: 2000px;
	height: 100px;
	
	
}

#songScroll li {
	width:50px;
	margin: 10px 20px;
	float:left;
}
 
#songScroll img{
	width:50px;
	height: 50px;	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');
	
	cursor:pointer;

	
	
}

.songScrollTitle{
		color:#FFF;
		font-size:14px;
		font-weight:bold;
		margin-top: -45px;
		width: 50px
}

#arrowLeft{
	background-image:url(images/arrow_left.png);
	width: 30px;
	height: 30px;	
	float:left;
	margin: 35px 0px 0px 100px;
}

#arrowRight{
	background-image:url(images/arrow_right.png);
	width: 30px;
	height: 30px;	
	float:right; 
	margin: 35px 100px 0px 0px;
}

.songContent{
		background-color: #FEFDFC;
		height: 1000px;
	
}

.songContent h4{
 margin-right: 190px;	
 margin-top: 10px;
	
}

.youtubeSongVideo{
	margin-top: 0px;	
}
.songContent h3{
	height: 31px;	
}
.songContent p{
		padding: 5px;
		
	
}


.songTitle{
	margin: 50px 0px 0px 0px;
	position:relative;
	height: 100px;
	
}

.player{
	display:block;
	/* float: right;  */
	margin: 50px 50px 0px 0px;
	font-size:12px;	
	
}
 
.player img{
	vertical-align: middle;
}

.songThumbnail{
	float: right;
 	position:relative;
	right: 50px;
	
	
}

.songThumbnail img{
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	
}

.songTitle h1{
	margin: 0px 180px 0px 0px;
	padding:10px 0px 0px 0px
}
.songLyrics{
	float:right;
	right: 180px;
	width: 360px;
	position:relative;
	margin-top: 20px;
	padding-left: 20px;
	border-left:thin #A7A7A7 solid;
	}
	
.divider{
	width: 1px;
	height: 600px;
	float:right;
	right: 370px;
	position:relative;	
	background-color:#999;
	
}
.artist{
	width:500px;
	float:right;
	top 10px;
	/* right: 226px; */
	margin-top: 20px;
	position:relative;
}
	
.artist a{
	float:right;	
	position:relative;
	right: -10px;
}
.artistDesc{	
    top: -100px;
	float:left;
	left: 25px;
	width: 400px;
	position:relative;
}		
	
	
.clear {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	overflow:hidden;
}


#videoGallery ul {
	list-style: none;
	float:left;
	width: 600px;
	margin: 50px 0px 0px 220px;

	
	
}

#videoGallery li {
	width:100px;
	height: 220px;
	margin: 10px 20px;
	float:left;
	overflow:hidden;
	cursor:pointer;
}
 
#videoGallery img{
	width:90px;
	height: 90px;	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	cursor:pointer;

	
}

.videoPlayBtn {
	background: url(images/VidPlay.png) no-repeat;	
	width: 100px;
	height: 100px;
	float:left;
	position: relative;
	top: -150px;
	left: 11px;
	z-index: 999;
	cursor:pointer;
	
}

.videoGalleryTitle{
	text-align:center;
	}
	
#videoView{
	vertical-align:text-top;
	display: none;	
	margin-top: 80px;
	padding: 0px 70px 0px 0px;
}

#videoViewr{
	vertical-align:top;
	display:inline-block;
	width: 550px;
	
}

#VideoDesc{
	display: none;
	width:550;
		
	
}

#videoSeperator{
	display:inline-block;	
	vertical-align:top;
	background-color:#222;
	width:1px;
	height:370px;	
}

#videoSmallGallery{
	display:inline-block;	
	vertical-align:top;
	width: 300px;
	
}

#videoSmallGallery ul {
	list-style: none;
	float:left;
	width: 300px;
	margin: 0px 20px 0px 0px;

	
	
}


#videoSmallGallery li {
	width:100px;
	height: 180px;
	margin: 10px 20px;
	float:left;
	overflow:hidden;
	cursor:pointer;
}
 
#videoSmallGallery .videoPlayBtn {
	background: url(images/VidPlay.png) no-repeat;	
	width: 100px;
	height: 100px;
	float:left;
	position: relative;
	top: -155px;
	left: 4px;
	z-index: 999;
	cursor:pointer;
	
}

#videoSmallGallery img{
	width:100px;
	height: 100px;	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	cursor:pointer;

	
}

#albumGallery ul {
	list-style: none;
	float:left;
	width: 600px;
	margin: 50px 0px 0px 220px;

	
	
}

#albumGallery li {
	width:100px;
	height: 120px;
	margin: 10px 20px;
	float:left;
	overflow:hidden;
	cursor:pointer;
}
 
#albumGallery img{
	width:90px;
	height: 90px;	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	cursor:pointer;

	
}

#albumView{
	display: none;
	margin: 0px 100px 10px 100px;  	
	text-align:center;
	
}
.albumDiv{
	margin: 60px 100px 10px 100px;
	width: 800px;
}

.gallery { 
	width: 600px;
	
}

.gallery-item {
	display: inline-block;
	width: 100px;
	margin: 5px;
}

.gallery-icon img{
	width:90px;
	height: 90px;	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px; /* future proofing */
	-khtml-border-radius: 7px; /* for old Konqueror browsers */
	
	-moz-box-shadow: 0px 3px 3px #999;
	-webkit-box-shadow: 0px 3px 3px #999;
	box-shadow: 0px 3px 3px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#999999');

	cursor:pointer;}
.gallery-icon {}
.gallery-caption {}

#designed a{
	color:#A7A7A7	
}
#designed{
	text-align:left;
	
   font-size:9px;
   color:#929292;	
   width:1024px;
	margin:0 auto;
	margin-top: -30px;
}