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

	Title: Vivid Financial Website
	Author: IBOX
	Date: August 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Footer
		

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


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #fff url(../../image/site/viv/layout/bg.gif) left top repeat;
		font: 62.5% Arial, Helvetica, sans-serif;
		text-align: left;
		color:#333
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #20a0b2;
		text-decoration: none;
	}
	
	a:hover, 
	a:active {
		color: #333;
		text-decoration: underline !important;
	}
	
	p{
		margin:0 0 10px 0}
	

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	
	.ir,
	.ir span{
		display:block;
		position:relative;
		cursor:pointer;
		overflow:hidden }
		
		.ir span{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100% } 

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	.container {
		width: 890px;
		padding-left:12px;
		padding-bottom:10px;
		position: relative;
		margin: 0;
		text-align: left;
		background:url(../../image/site/viv/layout/bg-gray_strip.gif) top left repeat-y }
	
	.greenstrip{
		background:url(../../image/site/viv/layout/bg-strip_green.gif) top left repeat-y }
	
	#wrap{
		width:890px;
		overflow:hidden;
		background: url(../../image/site/viv/layout/bg-content.png) left top repeat-y }
		
	span#wrap-bottom{
		display:block;
		height:12px;
		width:890px;
		background:url(../../image/site/viv/layout/bg-content_bottom.png) left no-repeat }	
	
	#header {
		position:relative;
		width:883px;
		height:180px;
		text-align:center;
		margin-bottom:10px}
	
	
	#content {
		width: 527px; 
		float: left;
		padding-bottom:20px
	}
		
	#sidebar {
		width: 257px;
		float: left;
		padding-left:5px; 
		padding-bottom:10px
	}
	
	#footer {
		clear: both;
		width:873px;
		background:#fff;
		padding:5px;
		color:#666;
		position:relative;
		line-height:15px }
		

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 194px;
		height: 96px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
   		left:0;
   		position:absolute;
   		top:55px;
   		/*z-index:-10 !important;*/
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../../image/site/viv/layout/logo.gif) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
	
	#header #client-quote{
		width:232px;
		height:88px;
		position:absolute;
		right:75px;
		top:55px }
		
		#header #client-quote p{
			display:block;
			width:231px;
			height:88px; }
			
			#header #client-quote p span{
				background:url(../../image/site/viv/layout/img-quote.gif) no-repeat;
				cursor:default }
			
	#navigation{
		width:678px;
		margin:0 auto;
		overflow:hidden;
		background:url(../../image/site/viv/layout/bg-nav.gif) 0 top repeat-x;
		padding-left:35px }
		
		#navigation ul{
			background:#000;
			border-right:1px solid #fff;
			overflow:hidden;
			padding-top:10px;
			background:url(../../image/site/viv/layout/bg-nav.gif) 0 top repeat-x;
			display:block }
		
		#navigation li{
			float:left;
			display:block;
			text-transform:uppercase }

			#navigation li a{
				padding-top:15px;
				display:block;
				text-decoration:none  }				

			#navigation li a span{				
				border-right:1px dashed #33cccc;
				display:block;
				padding:5px 13px;
				color:#666;
				font-weight:bold;
				position:relative}
				
			#navigation li a:hover span,
			#navigation li a:hover,
			#navigation li.active a,
			#navigation li.active a span{
				background:#33cccc;
				color:#fff }
	
			#navigation li.active a:hover{
				margin-left:0px;  }
				
			#navigation li.active a:hover span{
				margin:0 }

			#navigation li a:hover{
				margin-left:-1px }
				
				#navigation li.active{
					margin-left:0}
	
				#navigation li a:hover span{
					margin-left:1px }
				 

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	body.home #inside{
		background: #fff url(../../image/site/viv/layout/bg-home.jpg) 97% bottom no-repeat;
		overflow:hidden;
		width:100%;
		display:block }

		
	.page-overview{
		font-size:13px;
		margin-bottom:20px }
		
		.page-overview h2,
		.page-overview h1{
			font-size:30px;
			color:#33cccc;
			padding-bottom:15px;
			font-weight:normal }
			
		.greenstrip .page-overview h2,
		.greenstrip .page-overview h1{
			color:#33cccc }	
			
		.page-overview h2#commentary{
			background:url(../../image/site/viv/layout/ico-monthly_commentary2.gif) 300px top no-repeat }	
			
	.wide-box{
		overflow:hidden;
		padding:10px;
		background:#efefef;
		color:#333;
		margin-bottom:10px;
		font-size:12px; }
		
		.wide-box h3{
			font-size:18px;
			font-weight:normal;
			padding-bottom:10px;
			float:left;
			display:block;
			margin-right:20px }
			
		.wide-box a.pdf-download{
			float:left;
			display:block;
			margin-top:-10px  }
			
		.wide-box ul{
			overflow:hidden;
			clear:both }
			
			.wide-box li{
				padding-bottom:5px;
				list-style: none;
				background:url(../../image/site/viv/layout/bg-dot.gif) left 3px no-repeat;
				padding-left:10px }	
	
	a.archive{
		color:#ccc;
		font-size:13px;
		padding-right:20px;
		background:url(../../image/site/viv/layout/bg-arrow_right2.gif) right center no-repeat }
		
	.content-box{
		overflow:hidden;
		color:#333;
		width:100%;u p
		font-size:12px;
		background:url(../../image/site/viv/layout/bg-box.png) left repeat-y;
		margin-bottom:5px }
	/* Added */	
		
	.content-box div p {
		font-size:12px }
		
	.content-box div ol, ul {
		font-size:12px;
		padding-left:20px;
		list-style: disc
	}
		
	body.home .content-box{
		background:none }
		
		.testimonial{
			border-top:2px solid #cdcdcd ;
			width:792px;
			margin-left:5px;
			overflow:hidden }
		
		.testimonial .content-box,
		.box-no-background{
			background:none;
}/* Added */	

			.testimonial #sidebar{
				margin:0;
				padding:0;
				margin-top:-3px }
				
			.testimonial .content-box div ol li {
				padding-bottom:5px; 
				margin-bottom:10px;
				border-bottom:1px dashed #ccc;
				padding-left:0px;
				list-style: none;
				width:240px }	
				
				.testimonial .content-box div ol li h3 a{	
					color:#20a0b2;
					font-size:12px;
					font-weight:bold }
					
				.testimonial .content-box div ol li p{/* Added */
					font-size:12px}
					
			.testimonial .page-overview{
				padding-top:20px }	
				
				.testimonial .page-overview h2{
					color:#20a0b2 }	
		
		.content-box div{
			width:245px;
			float:left;
			margin-right:15px; }
			
			.content-box div.with-icon{
			width:255px;
			float:left;
			margin-right:5px; }

			.content-box div.home{
			width:255px;
			float:left;
			margin-right:5px; }	
			
		.content-box div.with-icon{
			padding:10px;
			width:235px;
			margin-bottom:5px;
			position:relative }
			
			.content-box div#event img{
				float:left;
				margin:5px 10px 10px 0}

			.content-box div#event p{
				padding:5px 0 }

			.content-box div.with-icon p{
				color:#333;
				padding-right:40px }
			
		.content-box div#monthly-commentary{
			background-image:url(../../image/site/viv/layout/ico-monthly_commentary.gif);
			background-position: right top;
			background-repeat:no-repeat }		

		.content-box div#stock-month{
			background-image:url(../../image/site/viv/layout/ico-stock_of_month.gif);
			background-position: right top;
			background-repeat:no-repeat }		

		.content-box div#news{
			background-image:url(../../image/site/viv/layout/ico-news.gif);
			background-position: right top;
			background-repeat:no-repeat }		

		.content-box div#event{
			background-image:url(../../image/site/viv/layout/ico-calendar.gif);
			background-position: right top;
			background-repeat:no-repeat }	
			
		.content-box div.with-icon a.more{
			float:right;
			font-size:11px;
			text-transform:uppercase;
			color:#33cccc;
			position:absolute;
			bottom:10px;
			right:10px }
		
		body.home .content-box div{
			width:235px;
			padding:10px;
			background:#efefef;
			opacity:.8;
			position:relative;
			filter:alpha(opacity=80);
			min-height:208px;
			height:auto !important;
			height:208px }	
			
		.content-box h3{
			font-size:18px;
			font-weight:normal }	
			
		body.home .content-box h3{
			padding-bottom:10px;
			display:block;
			font-weight:bold }		
			
		.content-box a{
			text-decoration:none }	
			
		.content-box table{
			width:100% }
			
		.content-box td,
		.content-box th{
			width:15%;
			padding-right:6px;
			padding:3px 4px 3px 2px;
			color:#ffffff;
			background:#99cccc }
			
		.content-box .col1{
			width:30% }	
			
		.content-box th{
			background:#009999 }		
			
	a.btn-more,
	a.btn-more span{
		display:block;
		position:absolute;
		bottom:10px;
		right:10px;
		width:83px;
		height:20px;
		padding:10px 0 0;
		text-align:center;
		z-index:100 }
		
		a.btn-more span{
			top:0;
			left:0;
			background:url(../../image/site/viv/layout/btn-more.png) center no-repeat }		

	body.form {
		background: #fff ;
}
		
	#frmcontact{
		position: relative;
		margin-bottom: -30px }
	
	#frmcontact div{
		display: block;
		width: 100%;
		overflow: hidden;
		border-bottom: 1px dashed #ccc;
		padding: 5px 0;
		margin-bottom: 5px }
		
	#frmcontact div.bottom-contact{
		border: 0;
		margin-bottom: -10px }	
	
	#frmcontact div#buttons{
		position: absolute;
		right: -18px;
		bottom: -20px;
		width: 200px;
		z-index: 1000 }
		
		#frmcontact div#buttons input{
			width: 90px }

		#frmcontact h3{
			color: #999 }
			
		#frmcontact label{
			float: left;
			width: 100px;
			display: block;
			clear: both;
			color: #999;
			padding-top: 4px;
			font-weight: bold }
			
		#frmcontact small{
			color: #999;
			float: left;
			display: block;
			padding-top: 4px }
			
		#frmcontact input,
		#frmcontact textarea{
			float: left;
			width: 255px;
			margin: 0 5px 5px 0;
			padding: 0;
			font-size: 12px;
			line-height: normal }
			
		#frmcontact textarea{
			height: 80px;
			width: 300px }
		
		#frmcontact div.radios{
			clear: both;
			border: 0;
			width: 100%;
			padding: 0;
			overflow: hidden; }
			
			#frmcontact div.radios input{
				float: left;
				width: auto;
				margin: 0 5px 0 10px }	
				
			#frmcontact div.radios input.btn-contact{
				width: auto;
				float: left;
				margin: 0 0 0 10px }			
			
			#frmcontact div.radios label.radio-label{
				float: left;
				width: auto !important;
				clear: none }	
				
			#frmcontact div.radios label.seminar-label{
				color: #33cccc;
				width: 235px;
				font-size: 10px }		
				
			#frmcontact div.radios input#prefered-contact2,
			#frmcontact div.radios input#prefered-contact1{
				margin-left: 80px !important }					

			#frmcontact div.radios input#prefered-contact1{
				margin-left: 30px !important }
				
			#frmcontact input#btn-submit,
			#frmcontact input#btn-reset{
				background:transparent url(../../image/site/viv/layout/btn-submit.gif) no-repeat;
				width: 65px;
				height: 22px;
				text-indent: -9999px;
				line-height: 0;
				border: 0 }						
	
			#frmcontact input#btn-reset{
				background: transparent url(../../image/site/viv/layout/btn-reset.gif) no-repeat;
				width: 91px }
			
	dl#contact{
		overflow: hidden;
		display: block;
		width: 100%;
		border-bottom: 1px dashed #ccc;
		padding-bottom: 5px;
		margin-bottom: 10px;
		margin-top: -10px }
		
		dl#contact dt,
		dl#contact dd{
			float: left;
			clear: both;
			color: #33cccc;
			font-weight: bold;
			width: 80px }

		dl#contact dd{
			width: 400px;
			clear: none;
			color: #999 }

/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
	
	#sidebar h3{
		font-weight:normal;
		color:#666;
		font-size:1.2em;
		padding-bottom:5px }
	
	.client-access,
	.portfolio-report{
		width:234px;
		display:block;
		font-size:1.2em;
		color:#fff;
		height:auto;
		padding:13px 10px;
		background:url(../../image/site/viv/layout/bg-orange.gif) left repeat-y;
		position:relative;
		margin-bottom:0px }
	
	.portfolio-report{
		background:url(../../image/site/viv/layout/bg-blue.gif) left repeat-y }

	body.home .client-access{
		min-height:100px;
		height:auto !important;
		height:100px;
		margin-bottom:10px }
			
		.client-access-top,
		.client-access-bottom,
		.portfolio-report-top,
		.portfolio-report-bottom{
			width:254px;
			position:absolute;
			height:14px;
			bottom:0;
			left:0;
			display:block;
			background:url(../../image/site/viv/layout/bg-orange_bottom.gif) no-repeat }

		.portfolio-report-bottom{
			background:url(../../image/site/viv/layout/bg-blue_bottom.gif) no-repeat }
			
		.client-access-top,
		.portfolio-report-top{
			height:8px;
			top:0;
			background:url(../../image/site/viv/layout/bg-orange_top.gif) no-repeat }
		
		.portfolio-report-top{
			background:url(../../image/site/viv/layout/bg-blue_top.gif) no-repeat }

		.client-access h3{
			font-weight:normal;
			font-size:12px !important;
			color:#fff !important }
			
		.client-access h2{
			font-size:24px;
			font-weight:normal;
			padding-bottom:5px }	
			
		.client-access p,
		.portfolio-report p{
			background:url(../../image/site/viv/layout/ico-arrow_right.gif) bottom right no-repeat;
			margin-right:10px }	
			
		.portfolio-report p{
			margin-bottom:3px}

		.client-access a,
		.portfolio-report a{
			color:#fff }
			
		body.home .client-access a{
			font-weight:bold }		
			
	.banner{
		position: relative;
		font-weight:bold;
		font-size:13px;
		overflow:visible }
	
		.banner h3{
			border-top:1px dashed #999;
			width:244px;
			padding:10px 0 !important;
			display:block;
			background:url(../../image/site/viv/layout/ico-arrow_down.gif) 220px 10px no-repeat  }			

		/*.banner a{
			position:absolute;
			top:35px;
			bottom:25px;
			right:25px */

			
	.side-navigation{
		overflow:hidden;
		width:244px;
		font-size:12px }
		
		.side-navigation h3{
			color:#33cccc !important;
			font-weight:normal;
			font-size:14px !important;
			margin-top:10px;
			padding-left:5px;
			text-transform:uppercase;
			padding-bottom:10px;
			margin-bottom:10px;
			border-bottom:1px dashed #999;
			background:url(../../image/site/viv/layout/ico-arrow_down.gif) 60px 0 no-repeat  }	
			
		.side-navigation li{
			padding:2px 0;
			list-style: none;
			font-weight:bold }
			
			.side-navigation li a{
				display:block;
				padding:5px;
				color:#333 }			

			.side-navigation li a:hover,
			.side-navigation li.active a{
				background:#ccc;
				text-decoration:none !important }	
				
	#frmlogin{
		display: block;
		overflow: hidden;
		padding-left: 10px }
		
		#frmlogin label{
			display: block;
			padding: 5px 0 3px 0;
			font-weight: bold }
			
		#frmlogin input{
			margin:0 0 10px 0;
			float: left;
			width: 165px }
			
		#frmlogin input#btn-go{
			margin-top: 1px;
			margin-left: 5px;
			width: 36px  }	

/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	
	#footer p{
		margin-bottom:0 }
	
	#secondary-navigation {
		overflow:hidden;
		padding-left:35px;
		position:relative;
		top:-15px;
		width:500px;
		display:block;
		margin-bottom:-10px }
		
		#secondary-navigation li{
			float:left;
			display:block;
			padding:0 5px;
			border-right:1px solid #666 }
			
		#secondary-navigation li a{
			color:#666;
			text-decoration:none }	

		#secondary-navigation li a:hover{
			text-decoration:underline }