﻿/***** LAYOUT.CSS **********************
****** URBAN ESSENCES ******************
***************************************/

/***** COLORS ************************

	GRAY	#777
	lGRAY	#666
	RED		#CC0033
	dRED	#79011F

**************************************/

html{
background-color:#000;
}

body{
font:0.7em Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
color:#777;
padding-top:14px;
background:#000 url(../img/urban-essences-bgr.gif) left top repeat-x;
}

#container{
width:1000px;
height:875px;
margin:auto;
/*background:#000 url(../img/urban-essences-bgr.gif) left top no-repeat;*/

}
/**/

#header{
width:100%;
height:94px;
/*background:#0F0;*/
}

	#info{
	height:11px;
	padding-top:10px;
	text-align:center;
	letter-spacing:.07em;
	}
	
	#logo{
	width:364px;
	height:73px;
	margin-left:82px;
	/*background:#0FC;*/
	float:left;
	display:inline;
	}
	
	#navi{
	width:460px;
	height:73px;
	margin-left:93px;
	/*background:#9FF;*/
	float:left;
	display:inline;
	}
	
		#navi ul{
		padding:2.6em 0 0 2.7em;
		}
	
			#navi li{
			display:inline;
			margin-right:2em;
			letter-spacing:.07em;
			}


/*Center Column*/
#c1{
width:70px;
height:600px;
padding-top:16px;
margin-left:455px;
float:left;
display:inline; /*ie6*/
}

	/*"i"*/
	.infoBox{
	position:relative;
	width:10px;
	height:10px;
	float:right;
	margin-bottom:1px;
	display:inline;
	}
	
		.infoBox:hover span{
		display:inline;
		}
		
		.infoBox span{
		position:absolute;
		left:22px;
		top:-1px;
		width:400px;
		display:none;
		}
		
		.noInfoBox{
		margin-top:11px;
		}
	
	.pics{
	float:left;
	}
		
		.pics img{
		border:1px #666 solid;
		margin-top:3px;
		}
		
			.pics .single{margin-top:14px;}
		
		.pics li{
		position:relative;
		z-index:999;
		}
		
		.pics li:hover .picsR,
		.pics li:hover .picsL,
		.pics li:hover .picsTxtR,
		.pics li:hover .picsTxtL{
		display:inline;
		height:70px;
		}
		
		.picsR,
		.picsL,
		.picsTxtR,
		.picsTxtL{
		position:absolute;
		display:none;
		z-index:9999;
		}
		
		.picsR,
		.picsL{
		width:375px;
		top:0;
		}
		
			.picsR{
			left:74px;
			text-align:left;
			}
			
				.picsR img{
				margin-left:0px;
				}
				
			.picsL{
			right:74px;
			text-align:right;
			}
		
				.picsL img{
				margin-right:0px;
				}
			
		.picsTxtR,
		.picsTxtL{
		width:356px;
		height:70px;
		top:3px;
		}
		
			.picsTxtR{
			background:url(../img/pic-txt-bgr.png);
			left:75px;
			padding:0 7px;
			}
			
			.picsTxtL{
			background:url(../img/pic-txt-bgr.png);
			right:75px;
			padding:0 7px;
			text-align:right;
			}
			
/*Right Column*/
#c2{
width:400px;
margin-top:30px;
padding-left:12px;
float:left;
display:inline;
}

#c2 table{
	border:0;
	width:400px;
}
	
#c2 table tr{padding-bottom:2.2em;}
	
/*first column of table*/
#c2 table .td1{width:80px;}
			
#c2a{
	width:148px;
	height:70px;
	margin-left:62px;
	margin-top:-3px;
	position:relative;
	z-index:9;
}
	
#c2a ul{
	position:absolute;
	z-index:99;
}

#c2a li{
	float:left;
	margin-left:4px;
	display:inline;/*<- ie6*/
}
		
#c2a .a1,
#c2a .a2{
	width:128px;
	text-align:left;
}
			
#c2a .a1{left:149px;}
#c2a .a2{left:75px;}

.data-security ul {
	list-style: square;
	font-size:1.1em;
	margin-left: 11px;
}
				
/****GLOBAL****/
h1{font-weight:bold;}

h1,
p,
table{
font-size:1.1em;
line-height:1.2
}

h1,
p{margin-bottom:2.2em;}

p.s{font-size:.9em}

.picsTxtR h1,
.picsTxtR p,
.picsTxtL h1,
.picsTxtL p{
margin-bottom:0;
line-height:1.1em;
}

a,
a:visited,
a:active{
color:#777;
text-decoration:underline;
}

a:focus,
a:hover{color:#C03 !important;}

#header a,
#header a:visited,
#header a:active{
text-decoration:none;
}

.on a{color:#79011F;} /*active link*/

.hidden{
display:none;
margin:0;
padding:0;
height:0;
}