@charset "utf-8";
/* CSS Document */
/*
STYLESHEET US MARKETS
@since 20081109

What is in this stylesheet?

- SPECIFIC DEFINITIONS OF COMPONENTS
 
- SOME COMMONLY USED DESIGN PATTERNS

*/


/* HEADER */
#header .wrapper_banner {
	height: 90px;
	padding-bottom: 5px;
	padding-right: 5px;
	overflow: hidden;
}
#header .wrapper_banner .banner {
	float: right;
}
#header .wrapper_logo img {
	padding-left: 15px;
}
#header .wrapper_logo img {
	padding-left: 15px;
}


#header .wrapper_navigation {
	margin-top: -5px;	
	padding-left: 128px; /* 130 minus padding of first link */
}
#header .navigation_top {
	color: #ec1c24; /* red */
	font-weight: bold;
	font-size: 12px;
	white-space: nowrap;
}
#header .navigation_top a {
	color: black;
	text-decoration: none;
	padding-left: 2px;	
	padding-right: 2px;
	text-transform: uppercase;
}
#header .navigation_top a:hover {
	color: #ec1c24; /* red */
}
/*
part of the header with globe, search box, some links
*/
#header .wrapper_lgsection {
	margin: 10px;
}
#header .wrapper_lgsection .myusmarketslinks {
	height: 14px;
	font-weight: bold;
}
#header .wrapper_lgsection .myusmarketslinks a {
	text-decoration: none;
}
#header .wrapper_lgsection .myusmarketslinks a:hover {
	color: #ec1c24;
}
#header .wrapper_lgsection .globe {
	margin-top: -10px;
	margin-left: 205px;
	width: 107px;
	height: 107px;
}
#header .wrapper_lgsection .quotes {
	height: 60px;
	margin-top: -60px;	
	font-size: 1.1em;
}
#header .wrapper_lgsection .quotes {
	font-weight: bold;
	color: black;
}
#header .wrapper_lgsection .search {
	margin-top: 10px;
}
#header .wrapper_lgsection .search input.searchfield {
	border: solid 1px black;
}
#header .wrapper_lgsection .search input.btn_search {
	position: relative;
	top: 6px;
	padding-left: 5px;
}
/* general component */
.component {
	border-bottom: solid 1px #8c8c8c;	
	overflow: hidden;
}
.component  a {
	color: black;
}
.component .header {
	color: black;
	height: 38px;
	overflow: hidden;
	padding-left: 10px;	
	font-size: 24px;
	font-weight: bold;
}
.component .header2 {
	color: black;
	height: 49px;
	overflow: hidden;
	padding-left: 10px;	
	font-size: 24px;
	font-weight: bold;
}
.component .header .title,
.component .header2 .title {
	padding-top: 6px;
}
.component .content {
	padding: 10px;
	padding-top: 5px;
	margin-top: -3px;

}
.component .content h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 3px;
	font-size: 24px;

	color: black; /* red */
}
.component .content .title_sub {
	color: #EC1C24;
	font-weight: bold;
	font-size: 1.1em;
	padding-bottom: 3px;
}

/* component, subtitle.. */
.component div.component_sub div.caticon {
	float: left;
	margin-right: 15px;
}

.component div.component_sub h2 {
	font-size: 1.1em;	
	padding: 0;
	margin: 0;
	padding-bottom: 3px;
	padding-top: 4px;	
}
.component div.component_sub h2 a {
	text-decoration: none;
	color: black;
	font-weight: bold;
}
.component div.component_sub div.title_sub {
	color: #12baed;
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 3px;	
}



/* component special news */
.cmp_specialnews {
	background-color: #e6e6e6;
	overflow: hidden;
	_height: 80px;		/*ie6 hack */
	_overflow: visible;
}

.cmp_specialnews .header {
	background-color: black;
	color: white;
	height: 38px;
	overflow: hidden;
	padding-left: 10px;	
	font-size: 24px;
	font-weight: bold;
}
.cmp_specialnews .header .title {
	padding-top: 6px;
}
.cmp_specialnews .content {
	padding: 10px;
	
}
.cmp_specialnews .content h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 3px;
	font-size: 28px;
	color: #EC1C24; /* red */
}
.cmp_specialnews .content h2 {
	padding: 0;
	margin: 0;
	font-size: 14px;
	padding-bottom: 5px;
	color: black;
}
.cmp_specialnews .content p {
padding: 0;
margin: 0;	
}

.cmp_usmarketstv .header {
	background-color: black;
	color: white;
}













/****** DESIGN PATTERNS *******/

/* arrow links: a list element with links depicted as arrows */
ul.arrowlinks {
	padding: 0;
	margin: 0;
	width: 100%;
}
ul.arrowlinks li {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 18px;
	overflow: hidden;
	list-style-type: none;
	font-size: 12px;
	line-height: 15px;
	font-weight: bold;
}
ul.arrowlinks li a {
	display: block;
	height: 15px;
	overflow: hidden;
	background-color: #49BB19; /* green */	
	text-decoration: none;
	color: white;
	padding-left: 3px;
	background-image:url(../images/elements/arrowlist_arrows.gif);
	background-position: top right;
	background-repeat: no-repeat;
}

ul.arrowlinks li a:hover {
	background-color: #12BAED;
	color: white;
	background-position:  right -15px;	
}
/* red variant of arrow links */
ul.arrowlinks.red li a {
	background-color: #ec1c24; /* red */
	background-position: right -30px;
}
ul.arrowlinks.red li a:hover {
	background-color: #12BAED;
	background-position: right -15px;
}

/* artikelen lijst */
div.articles_list {
	
}
div.articles_list div.article_item {
	border-top: solid 1px #8c8c8c;	
	cursor: pointer;
	padding: 5px;
	overflow: hidden;
}
div.articles_list div.article_item:hover {
	background-color: #e8e8e8;
}
div.articles_list div.article_item div.caticon {
	float: left;
	margin-right: 15px;
}

div.articles_list div.article_item h2 {
	font-size: 1.1em;	
	padding: 0;
	margin: 0;
	padding-bottom: 3px;
	padding-top: 4px;	
}
div.articles_list div.article_item h2 a {
	text-decoration: none;
	color: black;
	font-weight: bold;
}
div.articles_list div.article_item div.title_sub {
	color: #12baed;
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 3px;	
}

div.articles_list div.article_item p {
	padding: 0;
	margin: 0;
	padding-left: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
}
div.articles_list div.article_item p  a {
	white-space: nowrap;
	font-weight: bold;
	color: #12BAED;
	text-decoration: none;
}
div.articles_list div.article_item:hover p  a {
	color: #ec1c24;
}




div.articles_list div.banner_wrapper {
	border-top: solid 1px #8c8c8c;	
	background-color: #12BAED;
}

/* goud olie dollar block */
a.goblock_goud, a.goblock_olie, a.goblock_eurodollar {
	display: block;
	width: 100%;
	height: 70px;
	
	background-image: url(../images/elements/godbuttons.gif);
	border-bottom: solid 1px #8C8C8C;
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	
	text-decoration: none;
}
a.goblock_goud {
	border: none;
}
a.goblock_goud span.quote, a.goblock_olie span.quote, a.goblock_eurodollar span.quote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
	font-weight: bold;
	color: black;
	padding-left: 250px;
	padding-top: 16px;
	font-size: 20px;
}
a.goblock_eurodollar:hover {
	background-position: 0px -210px;
}
a.goblock_olie {
	background-position: 0px -70px;
}
a.goblock_olie:hover {
	background-position: 0px -280px;
}
a.goblock_goud {
	background-position: 0px -140px;
}
a.goblock_goud:hover {
	background-position: 0px -350px;
}
/* koers overzicht tabellen */
table.quotes_overview {
	color: black;
	font-weight: bold;
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0;
	width: 100%;	
}
table.quotes_overview td {	
	margin: 0;
	padding: 0;
	text-align: right;	
}
table.quotes_overview td {
	white-space: nowrap;
	
}


table.quotes_overview td a {
	color: black;
	text-decoration: none;
}
table.quotes_overview td a:hover {
	color: black;
	text-decoration: underline;
}
table.quotes_overview td.quote {
	text-align: left;
	padding-left: 2px;
}
table.quotes_overview td.change {
	padding-right: 2px;
}

table.quotes_overview td.arrow_cell {
	width: 4px;
}
table.quotes_overview tr {
	cursor: pointer;

}
table.quotes_overview td.change span {}
table.quotes_overview tr.odd {
	background-color: white;
}
table.quotes_overview tr.even {
	background-color: #f0f0f0;
}
table.quotes_overview tr:hover {
	text-decoration: underline;
}
/**
tabular overviews: alternating rows
*/
table.tabular-alternating {
		width: 100%;
} 
table.tabular-alternating caption {
	text-align: left;
	font-weight: bold;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
} 
table.tabular-alternating td {
	padding-right: 4px;
	line-height: 1.5em;
}	
table.tabular-alternating td.firstcell, table.tabular-alternating th.firstcell {
	padding-left: 10px;
}
table.tabular-alternating th {
	text-align: left;
	color: black;
}
/*
makes a strong link with some space around it.	
*/
.proceedlink_wrapper {
	padding-top: 9px;
	padding-bottom: 5px;
	text-align: right;
	padding-right: 5px;	
}
.proceedlink_wrapper a {
	font-weight: bold;
	text-decoration: none;
}
.proceedlink_wrapper a:hover {
	text-decoration: underline;
}

/**
videos list.
*/
div.videoslist {
}
div.videoslist div.videoitem {
	overflow: hidden;
	cursor: pointer;
	border-bottom: solid 1px #8c8c8c;
	/* ie6 fix */
	_height: 45px;
	_overflow: visible;
	/* check ? */
	
}
div.videoslist div.videoitem:hover {
	background-color: #e8e8e8;
}
div.videoslist div.videoitem div.thumb {
	float: left;
	width: 65px;
	height: 45px;
}
div.videoslist div.videoitem div.desc {
	margin-left: -65px;
	padding-left: 70px;
}
div.videoslist div.videoitem div.desc h2 {
	font-size: 1em;
	color: black;
	padding: 0;
	margin: 0;
	padding-top: 7px;
}
div.videoslist div.videoitem div.desc h2 a {
	color: black;
	text-decoration: none;
}
div.videoslist div.videoitem div.desc p {
	display: none;
	padding: 0;
	margin: 0;
}
/*
div.videoslist div.videoitem div.desc a, div.videoslist div.videoitem div.desc a:hover {
	text-decoration: none;
	color: #ec1c24;
	font-weight: bold;
}
*/
div.videoslist div.videoitem div.desc .title_sub {
	color: #EC1C24;
	font-weight: bold;
	font-size: 1.1em;
	padding-bottom: 3px;
	padding-top: 2px;
}
div.videoslist div.videoitem div.desc .title_sub strong {
	color: #EC1C24;
}

/*
category icons. What are these?
each categorie has its own icon. We are gonna indicate in nice div elements a categorie.
For loading efficiency and http load dropdown. All images are in a single icon file.
The pattern will be: <div class="caticon"><div class="icon_1"></div></div>
etc.
*/
div.caticon {
	width: 40px;
	height: 40px;
	overflow: hidden;
}
div.caticon div {
	width: 40px;
	height: 40px;
	background-image:url(../images/elements/category-icons.gif);
	background-repeat: no-repeat;
	background-position: 0px -320px; /* defaults to unknown */
}
div.caticon div.icon_31, div.caticon div.icon_beursroundup /* beurs roundup */ {
	background-position: 0px 0px;
}
div.caticon div.icon_3, div.caticon div.icon_columns /* columns */ {
	background-position: 0px -40px;
}
div.caticon div.icon_116, div.caticon div.icon_blog /*blog*/ {
	background-position: 0px -80px;
}
div.caticon div.icon_49, div.caticon div.icon_ta /* technische analyse */ {
	background-position: 0px -120px;
}
div.caticon div.icon_98, div.caticon div.icon_elliotwave /* elliot wave */{
	background-position: 0px -160px;
}
div.caticon div.icon_119, div.caticon div.icon_aex {
	background-position: 0px -200px;
}
div.caticon div.icon_38, div.caticon div.icon_marktanalyse {
	background-position: 0px -240px;
}
div.caticon div.icon_71, div.caticon div.icon_intermarketanalyse {
	background-position: 0px -280px;
}
div.caticon div.icon_34, div.caticon div.icon_endandit {
	background-position: 0px -320px;
}
div.caticon div.icon_28, div.caticon div.icon_nieuws /* nieuws */ {
	background-position: 0px -360px;
}
div.caticon div.icon_65, div.caticon div.icon_olie /* olie analyse */ {
	background-position: 0px -400px;
}
div.caticon div.icon_61, div.caticon div.icon_goud /* goud */ {
	background-position: 0px -440px;
}
div.caticon div.icon_120, div.caticon div.icon_tv /* us markets tv */ {
	background-position: 0px -480px;
}


/**
automatically inserted quotes..
*/
span.qt a {
	text-decoration: none;
}
span.qt .up {
	color: #49bb19; /* up */
}
span.qt .dwn {
	color: #ec1c24; /* up */
}
span.qt .nc {
	color: #000000; /* no change */
}
span.qt a span.q {
	/* the quote */
	text-decoration: none;
	color: black;
}
span.qt a:hover span.q {
	/* the quote */
	text-decoration: underline;
}
span.qt img.a {
	width: 12px;
	height: 10px;
	background-image: url(../images/elements/quote_arrows.gif);
	background-position: left -40px;
	background-repeat: no-repeat;
}
span.qt .nc img.a {
	background-position: left -43px;
}
span.qt .up img.a {
	background-position: left -1px;
}
span.qt .dwn img.a {
	background-position: left -21px;
}

/* quote block navigation */
	.qb_navigation img#qb_navbuttons {
		background-image:url(../images/elements/quoteblock-nav.gif);
		background-repeat: no-repeat;
		background-position: left top;
	}
	.qb_navigation img#qb_navbuttons.qb1selected {
		background-position: left top;
	}	
	.qb_navigation img#qb_navbuttons.qb2selected {
		background-position: left -40px;
	}
	.qb_navigation img#qb_navbuttons.qb1selected2over {
		background-position: left -80px;
	}
	.qb_navigation img#qb_navbuttons.qb2selected1over {
		background-position: left -120px;
	}


/** general module.. */
div.module_content {
	line-height: 1.3em;
}
div.module_content div.category_header {
	padding-top: 5px;
	padding-left: 8px;
	padding-bottom: 15px;
}
div.module_content div.contentsection {
	padding-left: 10px;
	padding-right: 10px;	
}
/** is ok to use category header in contentsections, adjust alignment here: **/
div.module_content div.contentsection div.category_header {
	margin-left: -10px;
}
div.module_content div.contentsection a {
	font-weight: bold;
}

div.module_content div.divider {
	clear: both;
	width: 100%;
	height: 20px;
	overfdlow: hidden;
}

/* 
plaatjes krijgen een scrollbalk in de contentsection.. 
@TODO: afhankelijk van template maken??
*/
div.module_content div.contentsection .imgScrollWrapper {
	display: block;
	overflow: hidden;
	overflow-x: auto;
	width: 600px;
	padding-bottom: 20px;
	
}

div.module_content div.contentsection .imgScrollWrapper img {
	padding: 0;
	margin: 0;
	display: block;
}