/*
CSS Styling for Black Pearl Website
*/

@import 'reset.css';
@import 'group.css';
@import 'jfontsize.css';

html {
	height:100%;
}

body {
	height:100%;
	margin:0px;
	padding:0px;
	font-family:Arial, Tahoma, sans-serif;
	font-size:11px;
	color:#ccc;
}

a{
	color:inherit;
	text-decoration:none;
}

#nav-header{
	width:100%;
	height:95px;
	background:url(../images/top-nav-bar.jpg);
}

.scrollable{
	position:relative;
	overflow:hidden;
	width:940px;
	height:95px;
	float:left;
}

.scrollable .items{
	width:20000em;
	position:absolute;
	clear:both;
}

.scrollable .items div{
	width:940px;
	float:left;
}

.prev,.next{
	width:10px;
	height:20px;
	float:left;
	clear:right;
	display:block;
	position:relative;
	top:35px;
	cursor:pointer;
}

.prev{
	background:url(../images/previous.png);
}

.next{
	background:url(../images/next.png);
}

#nav-header img, #nav-header-news-item,
#logo-enclose, #pearl, #date-time-nav
{
	float:left;
	clear:right;
	display:block;
}

#nav-header img{
	position:relative;
	top:10px;
}

#nav-header img.arrowheads{
	top:35px;
}

#nav-header-news-item{
	width:145px;
	padding:5px 5px;
	line-height:12px;
	font-size:11px;
}

section.item{
	width:125px;
	padding:10px;
	min-height: 65px;
	max-height: 65px;
	overflow: hidden;
}

section.item:hover,section.item.active{
	background-color:#fff;
	box-shadow:0px 0px 10px #36648F;
	cursor:pointer;
}

section.item:hover h1.title, h1.title.active{
	color:#aaa;
}

img.image_{
	width:120px;
	height:86px;
	display:block;
	box-shadow: 1px 1px 5px #CCC;
	border: 1px solid #CCC;
}

h1.title{
	color:#fff;
	line-height:12px;
	text-transform:uppercase;
	margin-bottom:5px;
}

p.excerpt{
	color:#222;
	font-size:11px;
}

.wrapper{
	width:960px;
	margin:0 auto;
}

#main-header{
	background-color:#000;
	box-shadow: 0px 0px 20px #36648F;
	border-top:1px solid #88a4be;
}


div#comment-share-font{
	margin-bottom: 10px;
	height: 22px;
	margin-top: -5px;
}

div#fontsize-controller, div#comment-box,div#share-buttons{
	float: left;
	clear: right;
	display: block;
	width: 100px;
}

div#comment-box{
	width:300px;
}

div#share-buttons{
	width:300px;
}

#main-header .wbg{
	background:url(../images/header-bg.png) 0 -10px;
	height:115px;
}

	#logo-enclose{
		width:40%;
		padding-top:20px;
	}
	
	#logo-enclose p{
		margin-top:10px;
	}
	
	#pearl{
		width:20%;
		text-align:center;
		position:relative;
		top:-5px;
	}
	#date-time-nav{
		width:40%;
		text-align:right;
		padding:30px 0px 10px 0px;
		line-height:12px;
	}
	
	ul#nav{
		position:relative;
		top:30px;
		margin:0;
		padding:0;
		text-align:left;
		float:right;
	}
	
	ul#nav img{
		vertical-align:-2px;
	}
	
	ul#nav li{
		float: left;
		position:relative;
		display:block;
	}
	
	ul#nav li ul{
		display:none;
		z-index: 10000;
	}
	
	ul#nav li a{
		text-transform: uppercase;
		display: block;	
		padding:5px 0px 12px 20px;
		font-size:11px;
		white-space:nowrap;
		font-weight:bold;
		color:#aaa;		
	}
	
	ul#nav li a:hover{
		color:#fff;
	}
	
	ul#nav li:hover ul{
		position:absolute;
		display:block;
		left:20px;
		padding:10px;
		background-color:rgba(0,53,72,0.7);
	}
	
	ul#nav li:hover ul li{
		float:none;
		
	}
	
	ul#nav li:hover  ul li a{
		text-transform:none;
		display:block;
		font-weight:bold;
		padding:3px 15px 3px 0px;
	}
	
	ul#nav li:hover  ul li a:hover{
		font-weight:bold;
		color:#fff;
	}

#main-content{
	padding:20px;
}

	aside#sidebar, article#section-content{
		float:left;
		clear:right;
		display:block;
	}

	aside#sidebar{
		width:140px;
		padding:10px;
		color:#555;
		font-family:Georgia, serif;
	}
	
	aside#sidebar span.title{
		font-family:Arial;
		text-transform:uppercase;
		color:#777;
		font-weight:bold;
	}
	
	aside#sidebar img{
	}
	
	#breaking-news,#weather,#global-news{
		margin-bottom:20px;
	}
	
	article#section-content{
		width:700px;
		background:url(../images/section-content.png) center;
		height:430px;
		padding:50px;
	}
	
	article#section-content div.tb-icons{
		position: relative;
		float: left;
		width: 175px;
		height: 210px;
		text-align:center;
	}
	
	article#section-content img.thumbnail{
		width:150px;
		height: 115px;
	}
	
	span.hover-mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 155px;
		height: 210px;
		visibility: hidden;
		background-color:rgba(0,0,0,0.6);
		cursor:pointer;
		padding:0px 10px;
	}
	
	span.hover-mask p{
		margin-top: 60px;
		padding: 10px;
		border-top: 1px solid #777;
		border-bottom: 1px solid #777;
		background-color: rgba(0, 0, 0, 0.7);
		text-align:center;
	}
	
	span.hover-mask p a{
		font-size: 14px;
		text-transform: uppercase;
		font-weight: bold;
	}
	
	article#section-content div.tb-icons:hover span.hover-mask{
		visibility:visible;
	}
	
	article#section-content div.tb-icons:hover p.title{
		color:#fff;
	}
	
	div.pfold-final-container{
		width:700px;
		height:420px;
		background-color:#111;
		text-align:left;
		overflow:hidden;
	}
	
	span.close-div{
		position: absolute;
		text-align: center;
		color: #fff;
		opacity: 1;
		width: 14px;
		top: 1px;
		right: 1px;
		cursor: pointer;
		box-shadow: 1px 1px 1px rgba(255,255,255,0.4);
		background-color: #111;
		border:1px solid #777;
	}
	
	div.newss{
		width:120px;
		height:142px;
		overflow:hidden;
	}
	
	#sidebar div p{
		width:120px;
		line-height:14px;
		font-size:11px;
		font-weight:bold;
		font-family:Arial, Tahoma, serifs;
	}
	
	.category{
		text-transform:uppercase;
		letter-spacing:1px;
		margin-bottom:10px;
	}
	
	.article-content{
		text-align:justify;
		line-height:14px;
		padding-right:0px;
		overflow:hidden;
	}
	
	.article-content p{
		margin-bottom:10px;
	}
		
	.contenttext{
		width: 660px;
		height: 290px;
		overflow: auto;
		padding:10px 30px 10px 10px;
		font-size:12px;
	}
	
	.contenttext img{
		max-width:600px;
		margin:0 auto;
	}
	
	.main-article{
		height:420px;
	}
	
	#services-page, #about-page{
		width:800px;
		height:435px;
		background:url(../images/nav-content-bg.png);
		padding:80px;
	}
	
	#services-page aside, #about-page aside{
		width: 250px;
		float: left;
		height:435px;
		clear: right;
		display: block;
	}

	#services-page aside h1, #about-page aside h1{
		font-size: 20px;
		font-weight: bold;
		color: white;
		margin-bottom:20px;
	}
	
	#services-page aside ul, #about-page aside ul{
		line-height: 14px;
		font-weight: bold;
		color: #777;
	}
	
	#services-page aside ul li:hover, #about-page aside ul li:hover{
		color:#fff;
	}
	
	#services-page aside ul li a.current, #about-page aside ul li a.current{
		color:#fff;
	}
	
	#about-page section{
		width: 511px;
		height:435px;
		float: left;
		clear: right;
		display: block;
		text-align: justify;
		line-height: 14px;
		overflow:auto;
		padding-right:20px;
		color:#fff;
	}
	
	#services-page section{
		width: 511px;
		height:435px;
		float: left;
		clear: right;
		display: block;
		text-align: justify;
		line-height: 14px;
		overflow:auto;
		padding-right:20px;
		color:#fff;
	}
	
	#services-page section p, #about-page section p{
		margin-bottom:15px;
		color:#fff;
	}
	
	.panes{
		overflow: hidden;
		width: 535px;
		height: 435px;
	}
	
	.panes:hover{
		color:#ccc;
	}
	
	.link-titles{
		cursor:pointer;
	}
	
	.link-titles:hover{
		font-weight:bold;
		background-color:#333;
	}
	
	section.p-title{
		font-weight: bold;
		font-size: 13px;
		margin: 10px;
	}
	
	#publications-page, #industry-update, #issue-in-focus, #archives{
		width:800px;
		padding:40px 80px;
		background:url(../images/content-bg.jpg)#000 center repeat-y;
		box-shadow: 0px 0px 20px #36648F;
		color:#eee;
	}
	
	#industry-update div.fourway{
		width:150px;
		height:160px;
		margin:20px;
		border:5px solid #777;
		float:left;
		clear:right;
		display:block;
		cursor: pointer;
		opacity: 0.2;
		filter:alpha(opacity=20);
		border-radius: 25px;
		overflow: hidden;
	}
	
	#industry-update div.active{
		opacity: 1;
		filter:alpha(opacity=100);
	}
	
	#industry-update div.fourway:hover{
		opacity: 1;
		filter:alpha(opacity=100);
	}
	
	#archive-tree{
		width: 450px;
		border-left: 2px solid #5777A7;
		padding-left: 20px;
		margin-top: 20px;
		float: left;
		clear: right;
		display: block;
	}
	
	#snapshot{
		width: 300px;
		float: left;
		display:block;
		padding: 10px;
		background-color: #333;
	}
	
	#snapshot p{
		color:#ddd;
		text-align:left;
		font-size:10px;
		line-height:12px;
		margin-bottom:10px;
		font-style:italic;
		opacity:0.5;
		filter:alpha(opacity=50); /* For IE8 and earlier */
	}
	
	#snapshot img{
		opacity:0.5;
		filter:alpha(opacity=50); /* For IE8 and earlier */
	}

	#snapshot p:hover, #snapshot img:hover {
		opacity:1;
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
	ul.services-list{
		margin-left:20px;
		list-style-type:disc;
		color:#eee;
	}
	
	#publication-content{
		display: inline-block;
		margin-top: 10px;
		text-align: justify;
		line-height: 14px;
		font-size: 12px;
	}
	
	#publication-content p{
		margin:10px;
	}
	
	#publication-content a{
		color:#999;
	}
	
	#publication-content a:hover{
		color:#bbb;
	}

	#publication-content p img{
		max-width:800px;
	}
	
	h2.pub-title{
		margin-top: 20px;
		font-family: Arial Rounded MT Bold;
		font-size: 20px;
		color: #EFEFEF;
		background-color: #333;
		padding: 8px;
		max-width: 780px;
		text-shadow: 2px 2px 5px black;
		text-transform: uppercase;
		min-width: 780px;
	}
	
	div.meta{
		width: 550px;
		float: left;
		clear: right;
		margin-bottom: 20px;
	}
	
	div.archive-list{
		text-align:right;
		margin-top:10px;
	}
	
	p.pub-title, p.meta, p.title{
		font-size: 22px;
		font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
		color: #fff;	
	}
	
	p.title{
		font-size:14px;
		margin:2px 15px;
		color:#ccc;
		text-align: left;
	}
	
	div.pfold-final-container p.title{
		margin:0;
	}
	
	p.meta{
		font-size:11px;
		text-transform:uppercase;
		margin-top:10px;
	}
	
	#about-page .panes p,  #services-page .panes p{
		color:#ddd;
	}

	#contact-us, #profile{
		text-align:center;
	}
	
	#contact-us h1, #profile h1{
		font-size:18px;
		color:#fff;
		font-weight:bold;
	}
	
	#profile div{
		margin-top:20px;
	}
	
	#contact-us div{
		text-align: left;
		width: 220px;
		height: 230px;
		margin: 0 auto;
		border-radius: 3px;
		background-color:rgba(0,53,72,0.4);
		padding: 30px 40px;
		margin-top: 20px;
		border: 1px solid #555;
	}
	
	#contact-us div ul li div{
		height: 50px;
		float: left;
		width: 50px;
		display: block;
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: none;
	}
	
	#contact-us div ul li p{
		width: 170px;
		display: block;
		float: left;
		clear: right;
		height: 50px;
	}
	p.section-title{
		font-size:18px;
		color:#fff;
		line-height:22px;
	}

	
footer{
	background-color:#000;
	box-shadow: 0px 0px 20px #36648F;
}
	
	#footer{
		background:url(../images/footer-bg.jpg) 0 0 no-repeat;
		height:137px;
	}
	
	.main-links,#company-info{
		float:left;
		clear:right;
		display:block;
	}
	
	.main-links{
		width:650px;
		position:relative;
		top:30px;
	}
	
	.main-links .main-link{
		float:left;
		clear:right;
		display:block;
		padding:0px 25px;
		text-transform:uppercase;
		color:#fff;
		font-weight:bold;
		line-height:14px;
	}
	
	.sub-links{
		color:#999;
		font-weight:normal;
		text-transform:none;
	}
	
	#company-info{
		width:250px;
		padding:30px 30px 10px;
		font-size:10px;
		line-height:12px;
	}
	
	#company-info p span#bp{
		font-size:11px;
		font-weight:bold;
	}
	
	#company-info img{
		float:right;
		margin:0px 10px 0px;
		vertical-align:middle;
	}
	
	span#tts{
		color:#708cb5;
		font-weight:normal;
	}