body {
	/*width:1240px;*/
	background-color:#c0bcb9;
	text-align:left;
	margin:10px 0px 0px 0px;
	z-index:1;
}

div#preload { display: none;}

#fullPage {
	font-family:arial;
	margin:0px 0px 0px 0px;
}

#mainNav {
	width:230px;
	position:relative;
	margin:20px 0px 0px 20px;;
	/*left:64px;*/
}
a.mainNav {
	display:block;
	width:230px;
	height:36px;
}

#mainNavSelected {
	position:relative;
	width:276px;
	height:36px;
	background-image:url('../../media/images/mainNavPointer.png');
	background-repeat:no-repeat; 
	background-position:right;
	z-index:10;
}

a.ab { background:url(../../media/images/mainNavABReg.png) no-repeat; }
a.ab:hover { background:url(../../media/images/mainNavABSel.png) no-repeat; }

a.work { background:url(../../media/images/mainNavWorkReg.png) no-repeat; }
a.work:hover { background:url(../../media/images/mainNavWorkSel.png) no-repeat; }

a.products { background:url(../../media/images/mainNavFavoritesReg.png) no-repeat; }
a.products:hover { background:url(../../media/images/mainNavFavoritesSel.png) no-repeat; }

a.press { background:url(../../media/images/mainNavPressReg.png) no-repeat; }
a.press:hover { background:url(../../media/images/mainNavPressSel.png) no-repeat; }

a.speaking { background:url(../../media/images/mainNavSpeakingReg.png) no-repeat; }
a.speaking:hover { background:url(../../media/images/mainNavSpeakingSel.png) no-repeat; }

#navIcons {
	width:220px;
	position:relative;
	margin:30px 0px 0px 20px;
}

a.navIcon {
	display:block;
	width:36px;
	height:36px;
}

a.twitter { background:url(../../media/images/navIconTwitter.png) no-repeat; }
a.twitter:hover { background:url(../../media/images/navIconTwitterSel.png) no-repeat; }
a.facebook { background:url(../../media/images/navIconFacebook.png) no-repeat; }
a.facebook:hover { background:url(../../media/images/navIconFacebookSel.png) no-repeat; }
a.linkedin { background:url(../../media/images/navIconLinkedin.png) no-repeat; }
a.linkedin:hover { background:url(../../media/images/navIconLinkedinSel.png) no-repeat; }
a.email { background:url(../../media/images/navIconEmail.png) no-repeat; }
a.email:hover { background:url(../../media/images/navIconEmailSel.png) no-repeat; }

#homePageContent {
	/*max-width:600px;*/
	position:absolute;
	left:331px;
	margin-left:30px;
	top:34px;
	width:560px;
	font-family:arial;
	font-size:18px;
}

#siteCreditContainer{
	width: 100%; 
	position: relative; 
	top: 20px; 
	text-align:center;
}

#siteCredit {
	font-family:arial;	
	font-size:10px;	
	color:#404040;
}

#frame {
	width:837px;
	display:block;
	position:absolute;
	top:56px;
	left:295px;

}

#frameTop {
	display:block;
	position:relative;
	left:-1px
	height:35px;
	background: transparent url(../../media/images/frameTop.png) no-repeat scroll 0 bottom; 
}

#frameMiddle{
	position:relative;
	top:-4px;
	background-image:url('../../media/images/frameMiddle.png');
	background-repeat:repeat-y; 
}

#frameBottom{
	position:relative;
	top:-3px;
}

tr.workItem {
	color:#404040;
	vertical-align:top;
	height:200px;
}

td.workItemName {
	margin-left: 20px;
	font-size: 13px;
	font-style: italic;
	text-decoration: underline;
	padding-left:10px;
	width:15%;	
}

a.workItemNameLink {
	color:#404040;
}

a.workItemNameLink:hover {
	color:#ffffff;
}


td.workItemLogo {
	padding-left:20px;
	width:25%;	
}

td.workItemText {
	font-family: arial;
	font-size: 13px;
	text-decoration: none;
	padding: 0px 20px 0px 30px;
	
}

a.workLink {
	position:relative;
	color:#fff;
}

tr.productItem {
	position:relative;
	vertical-align:top;
	height:180px;
	color:#404040;
}

a.pressLogo {
	display:block;
	width:237px;
	height:146px;
	margin-bottom:20px;
}


a.Variety { background:url(../../media/images/Variety_E.png) no-repeat; }
a.Variety:hover { background:url(../../media/images/Variety_R.png) no-repeat; }

a.TWP { background:url(../../media/images/TWP_E.png) no-repeat; }
a.TWP:hover { background:url(../../media/images/TWP_R.png) no-repeat; }

a.TG { background:url(../../media/images/TG_E.png) no-repeat; }
a.TG:hover { background:url(../../media/images/TG_R.png) no-repeat; }

a.NYT { background:url(../../media/images/NYT_E.png) no-repeat; }
a.NYT:hover { background:url(../../media/images/NYT_R.png) no-repeat; }

a.NPR { background:url(../../media/images/NPR_E.png) no-repeat; }
a.NPR:hover { background:url(../../media/images/NPR_R.png) no-repeat; }

a.NHK { background:url(../../media/images/NHK_E.png) no-repeat; }
a.NHK:hover { background:url(../../media/images/NHK_R.png) no-repeat; }

a.FOX { background:url(../../media/images/FOX_E.png) no-repeat; }
a.FOX:hover { background:url(../../media/images/FOX_R.png) no-repeat; }

a.C2 { background:url(../../media/images/C2_E.png) no-repeat; }
a.C2:hover { background:url(../../media/images/C2_R.png) no-repeat; }

a.BBCN { background:url(../../media/images/BBCN_E.png) no-repeat; }
a.BBCN:hover { background:url(../../media/images/BBCN_R.png) no-repeat; }

a.AlJaz { background:url(../../media/images/AlJaz_E.png) no-repeat; }
a.AlJaz:hover { background:url(../../media/images/AlJaz_R.png) no-repeat; }

a.ABCN { background:url(../../media/images/ABCN_E.png) no-repeat; }
a.ABCN:hover { background:url(../../media/images/ABCN_R.png) no-repeat; }

a.EDGE { background:url(../../media/images/EDGE_E.png) no-repeat; }
a.EDGE:hover { background:url(../../media/images/EDGE_R.png) no-repeat; }


div.speakingCategory{
	color:#fff;
	font-size:14px;
	font-weight: bold;
	margin:0px 0px 15px 20px;

}

div.speakingItem, div.awardItem {
	color:#fff;
	margin:0px 0px 5px 20px;
	vertical-align:text-top;
}

div.marginBottom15 {
	margin-bottom:15px;
}

span.speakingDate, span.awardYear {

	font-size:20px;
	margin-right:5px;
	vertical-align:middle;
}
span.speakingTitle, span.awardOrg {
	color:#000000;
	font-size:13px;
	font-weight: bold;
	margin-right:5px;
	vertical-align:middle;
}
span.speakingType, span.awardDesc{
	color:#fff;
	font-size:13px;
	font-weight: bold;
	vertical-align:middle;
}

a.awardLink {
	color:#fff;
	font-size:13px;
	vertical-align:middle;
	font-style: italic;
}

#speakingTwitter {
	display:block;
	width:250px;
	height:100%;
	margin:0px 0px 0px 15px;
	background-image:url('../../media/images/frameLine.png');
	background-repeat:repeat-y; 
	background-position:left;
}

a.buttons {
	display:block;
	width:21px;
	height:20px;
}

a.closeButton { background:url(../../media/images/closeButton.png) no-repeat; }
a.closeButton:hover { background:url(../../media/images/closeButtonSel.png) no-repeat; }

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	margin-top:-40px;
	overflow:hidden;
	width: 100%;
	height:328px;
	/* custom decorations */
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	background: transparent;
	z-index:4;
}

.items div {
	float:left;
	width:837;
	background: transparent;
	z-index:4;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background: transparent url(../../media/images/videoBackground.png) no-repeat;
	font-family:arial;
	font-size:13px;
	font-style: italic;
	/*text-decoration: underline;*/
	height:158px;
	width:279px;
	margin:-93px 0px 0px 3px;
	padding:103px 0px 0px 5px;
	color:#c0bcb9;	
	z-index:2;
}

.sliderVideo{
	background: transparent;
	z-index:4;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:0px 0px 0px 0px;
	background-color:#c0bcb9;
	padding:0px;
	border:0px solid #ccc;
	width:279px;
	height:279px;
	background: transparent;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.scrollable img.hover {
	background-color:#123;
	background: transparent;	
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
	background: transparent;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
	background: transparent;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:64px;
	height:279px;
	float:left;
	margin:0px 0px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right { 
	position:relative;
	top:-328px;
	float:right;
	background-position: 0 0px; 
	clear:right; 
	margin-right: 0px;
	background:url(../../media/images/slideRight.png) no-repeat;
	z-index:5;
}
a.right:hover 		{ background:url(../../media/images/slideRightHover.png) no-repeat;	z-index:5;}
a.right:active 	{ background-position:0px 0px; } 


/* left */
	
a.left { 
	position:relative;
	top:-328px;
	margin-left: 0px; 
	background:url(../../media/images/slideLeft.png) no-repeat;
	z-index:5;
} 
a.left:hover  		{ background:url(../../media/images/slideLeftHover.png) no-repeat;z-index:5;}
a.left:active  	{ background-position:0px 0; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}