/* about.css by Iosaf Bennis */

body {
	background-color: rgb(51, 51, 51); 
	color: rgb(51, 51, 51);
	background-image: none;
	background-repeat: no-repeat;
	font-family: Arial;
	max-width: 1900px;
	}
.fb-like { 
	Position: absolute;
	Top: 40px;
	Left: 1100px;
	z-index: 11;
	}
	
	
#backleft {
	background-image: url(images/BackLeft.jpg);
	background-repeat: no-repeat;
	position: absolute;
	Top: 0px;
	Left: 0px;
	z-index: 1;
	}


#projectdescription { 
	color: rgb(255, 204, 51);
	Font-size: 14px;
	font-family: Arial;
	font-style: light;
	Position: absolute;
	Top: 200px;
	Left: 460px;
	max-width: 780px;
	min-width: 700px;
	z-index: 11;
	}


#sliderFrame {
		position: absolute;
		Top: 300px;
		left: 280px;
		width: 800px;
		z-index: 10;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/

#ibe_concept_logo {width:111px;height:111px;position:absolute;top:-4px;left:-4px;background:url(ribbon.png) no-repeat;z-index:7;}
        
#slider {
    width:770px;height:600px;/* Make it the same size as your images */
	background:#fff url(loading.gif) no-repeat 50% 50%;
	position:relative;
	left:180px;/*make the image slider center-aligned */
    box-shadow: 0px 0px 0px #999999;
}
#slider img {
	position:absolute;
	border:none;
	display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
	z-index:10;
	display:none;position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
	top:320px; left:280px; /* Its position is relative to the #slider */
	width:150px;
	background:none;
	padding-left:20px;
	position:relative;
	z-index:5;
	cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider 
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

	
#ibelogo {
	position: absolute;
	Top: 680px;
	Left: 50px;
	z-index: 3;
	}
	
#AboutLink {
	position: absolute;
	Top: 850px;
	Left: 70px;
	Font-size: 18px;
	color: rgb(51, 51, 51);
	font-family: Arial, regular;
	font-style: regular;
	text-align: right;
	z-index: 3;
	}
#AboutLink:hover { color: white;}

#NewsLink {
	position: absolute;
	Top: 850px;
	Left: 170px;
	Font-size: 18px;
	color: rgb(51, 51, 51);
	font-family: Arial, regular;
	font-style: regular;
	text-align: right;
	z-index: 3;
	}
#NewsLink:hover { color: white;}

#ContactLink {
	position: absolute;
	Top: 850px;
	Left: 260px;
	Font-size: 18px;
	color: rgb(51, 51, 51);
	font-family: Arial, regular;
	font-style: regular;
	text-align: right;
	z-index: 3;
	}
#ContactLink:hover { color: white;}

#ConceptPageLink {
	position: absolute;
	Top: 50px;
	Left: 70px;
	Font-size: 21px;
	color: white;
	font-family: Arial, regular;
	text-align: right;
	z-index: 3;
	}
#ConceptPageLink:hover { color: rgb(51, 51, 51);}

#IllustrationPageLink {
	position: absolute;
	Top: 100px;
	Left: 70px;
	Font-size: 21px;
	color: rgb(51, 51, 51);
	font-family: Arial, regular;
	text-align: right;
	z-index: 3;
	}
#IllustrationPageLink:hover  { color: white;}
	
#FurniturePageLink {
	position: absolute;
	Top: 150px;
	Left: 70px;
	Font-size: 21px;
	color:  rgb(51, 51, 51);
	font-family: Arial, regular;
	text-align: right;
	z-index: 3;
	}
#FurniturePageLink:hover { color: white;} 
	
#RetailPageLink {
	position: absolute;
	Top: 200px;
	Left: 70px;
	Font-size: 21px;
	color: rgb(51, 51, 51); 
	font-family: Arial, regular;
	text-align: right;
	z-index: 3;
	}
#RetailPageLink:hover { color: white;}

#ExhibitionPageLink {
	position: absolute;
	Top: 250px;
	Left: 70px;
	Font-size: 21px;
	color: rgb(51, 51, 51);
	font-family: Arial, regular;
	text-align: right;
	z-index: 3;
	}
#ExhibitionPageLink:hover { color: white;}



	
#contact1 {
	color: rgb(255, 204, 51);
	position: absolute;
	Font-size: 14px;
	font-family: Arial, light;
	Top: 90px;
	Right: 250px;}

#contact2 {
	color: rgb(255, 204, 51);
	position: absolute;
	Font-size: 14px;
	font-family: Arial, light;
	Top: 120px;
	Right: 250px;}
	
#contact3 {
	color: rgb(255, 204, 51);
	position: absolute;
	Font-size: 14px;
	font-family: Arial, light;
	Top: 150px;
	Right: 250px;}

a {
	color: rgb(255, 204, 51);
	text-decoration: none;
	}
	
a:hover { color: white;}

	
#Area1{
	Font-size: 21px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 50px;
	left: 460px;
	z-index: 4;
	}
#Area1:hover { color: white;}

#Area2{
	Font-size: 21px;
	font-family: Arial, bold;
	color: white;
	position: absolute;
	top: 50px;
	left: 580px;
	z-index: 4;
	}
#Area2:hover { color: rgb(255, 204, 51);}

#Area3{
	Font-size: 21px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 50px;
	left: 750px;
	z-index: 4;
	}
#Area3:hover { color: white;}

#Area4{
	Font-size: 21px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 50px;
	left: 910px;
	z-index: 4;
	}
#Area4:hover { color: white;}

#Area2a{
	Font-size: 14px;
	font-family: Arial, bold;
	color: white;
	position: absolute;
	top: 90px;
	left: 580px;
	z-index: 4;
	}
#Area2a:hover { color: rgb(255, 204, 51);}

#Area2b{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 580px;
	z-index: 4;
	}
#Area2b:hover { color: white;}

#Area2c{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 130px;
	left: 580px;
	z-index: 4;
	}
#Area2c:hover { color: white;}

#Area2d{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 150px;
	left: 580px;
	z-index: 4;
	}
#Area2d:hover { color: white;}

#Area2e{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 170px;
	left: 580px;
	z-index: 4;
	}
#Area2e:hover { color: white;}

#Area2f{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 680px;
	z-index: 4;
	}
#Area2f:hover { color: white;}

#Area2g{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 580px;
	z-index: 4;
	}
#Area2g:hover { color: white;}

#Area2h{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 600px;
	z-index: 4;
	}
#Area2h:hover { color: white;}

#Area2i{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 620px;
	z-index: 4;
	}
#Area2i:hover { color: white;}

#Area2j{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 640px;
	z-index: 4;
	}
#Area2j:hover { color: white;}

#Area2k{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 660px;
	z-index: 4;
	}
#Area2k:hover { color: white;}

#Area2l{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 110px;
	left: 680px;
	z-index: 4;
	}
#Area2l:hover { color: white;}


#Area1a{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 660px;
	z-index: 4;
	}
#Area1a:hover { color: white;}

#Area1b{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 680px;
	z-index: 4;
	}
#Area1b:hover { color: white;}

#Area1c{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 700px;
	z-index: 4;
	}
#Area1c:hover { color: white;}

#Area1d{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 720px;
	z-index: 4;
	}
#Area1d:hover { color: white;}


#Area3a{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 810px;
	z-index: 4;
	}
#Area3a:hover { color: white;}

#Area3b{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 830px;
	z-index: 4;
	}
#Area3b:hover { color: white;}

#Area3c{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 850px;
	z-index: 4;
	}
#Area3c:hover { color: white;}

#Area3d{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 870px;
	z-index: 4;
	}
#Area3d:hover { color: white;}

#Area4a{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 910px;
	z-index: 4;
	}
#Area4a:hover { color: white;}

#Area4b{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 930px;
	z-index: 4;
	}
#Area4b:hover { color: white;}

#Area4c{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 950px;
	z-index: 4;
	}
#Area4c:hover { color: white;}

#Area4d{
	Font-size: 14px;
	font-family: Arial, bold;
	color: rgb(255, 204, 51);
	position: absolute;
	top: 90px;
	left: 970px;
	z-index: 4;
	}
#Area4d:hover { color: white;}


#Left{
	position: absolute;
	top: 270px;
	left: 460px;
	z-index: 4;
	}
	
#Right{
	position: absolute;
	top: 270px;
	left: 485px;
	z-index: 4;
	}


#Up{
	position: absolute;
	top: 90px;
	left: 550px;
	z-index: 4;
	}

#Down{
	position: absolute;
	top: 110px;
	left: 550px;
	z-index: 4;
	}



h2{ color: rgb(255, 204, 51);}