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

	CSS on Sails
	Title: Site Name
	Author: XHTMLized
	Date: September 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%;
		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 {
		font: 62.5% Arial, Helvetica, sans-serif;
		font-size: 13px;
		line-height: 23px; 
		text-align: center;
		color: #666;
		background: #000 url(/media/img/bg-header_repeat_r.gif) repeat-x
	}

	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: #00afc8;
		text-decoration: none;
	}
	
	a:hover{
		text-decoration: underline
	}
	p{
		padding-bottom: 18px 
	}

/* 1.4	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	
	

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

	.container{
		text-align: center }

	#second-header,
	#bigpic,
	#main-content,
	#footer{
		overflow: hidden;
		background: #f6f6f6 }
		
	#bigpic,
	#footer{
		background: #000 }	
		
	.inside {
		clear: both;
		width: 960px;
		position: relative;
		margin: 0 auto;
		text-align: left;
		font-size: 1.2em;
		overflow: hidden;
		height: 1%;
	}
	
	#content{
		width: 600px;
		float: left;
		padding-left: 45px
	}
		
	#sidebar {
		width: 275px;
		float: right; 
		overflow: hidden
	}
	
	.blocks{
		font-size: 13px;
		margin-left: 7px;
	}
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
		
	#header .inside{
		height: 155px;
		position: relative }
		
		#header .head-l{
			display: block;
			height: 155px;
			width: 50%;
			position: absolute;
			left: 0;
			top:0;
			background: url(/media/img/bg-header_repeat_l.gif) repeat-x  }

		#header .inside{
			left: 0 !important;
			height: 155px;
			background: url(/media/img/bg-header.jpg) no-repeat }		
		
	#top-navigation{
		position: absolute;
		right: 10px;
		top:17px }
		
		#top-navigation li{
			display: inline }
			
			#top-navigation li a{
				float: left;
				font-weight: bold;
				font-size: 11px;
				margin-right: 10px;
				padding-right: 10px;
				border-right: 1px solid #033333;
				color: #033333 }
			
			#top-navigation li.last a{
				border: none;
				margin: 0;
				padding: 0 }
				
		#header form{
			position: absolute;
			right: 10px;
			bottom: 30px }
			
			#header form input{
				width: 138px;
				height: 18px;
				padding: 0;
				font-size: 11px;
				padding: 3px 0 0px 20px;
				background: transparent url(/media/img/bg-search.gif) no-repeat;
				border: none }		
				
/* 2.2	Second Header
-----------------------------------------------------------------------------------------------*/	
	#second-header{
		background: #fff;}
	
	#second-header .inside{
		height: 120px}
		
	#logo{
		padding-top: 39px }
	
	#logo h1, 
	#logo h1 span,
	#logo a.logo,
	#logo a.logo span {
		display: block;
		width: 331px;
		height: 40px;
		overflow: hidden;
	}
	
	#logo h1,
	#logo a.logo {
		position: relative;
	}
		
	#logo h1 span,
	#logo a.logo span {	
		position: absolute; 
		top: 0px;
		left: 0;
		z-index: 10;
		background: url(/media/img/logo.gif) no-repeat;
	}

	#logo a.logo span {	
		cursor: pointer;
	}
	
	#navigation{
		position: absolute;
		right:-50px;
		top: 41px;
		width: 500px;
		padding-right: 100px; }
		
		#navigation li{
			width: 176px;
			height: 12px;
			float:left;
			display: block;
			padding: 0 0 13px 15px;
			position: relative;
			overflow: hidden }

			#navigation li a,
			#navigation li a span{
				display: block;
				width: 176px;
				overflow: hidden;
				height: 12px;
				position: absolute;
				z-index: 15;
				cursor: pointer;
				top:0;
				left: 0 }

			#navigation li.nav1 span{
				background: url(/media/img/bg-nav1.gif) }

			#navigation li.nav2 span{
				background: url(/media/img/bg-nav3.gif) }

			#navigation li.nav3 span{
				background: url(/media/img/bg-nav3.gif) }

			#navigation li.nav4 span{
				background: url(/media/img/bg-nav4.gif) }

			#navigation li.nav5 span{
				background: url(/media/img/bg-nav5.gif) }

			#navigation li a:hover span,
			#navigation li.currentSection a span{
				background-position: 0 -12px }

/* 2.3	Big Pic
-----------------------------------------------------------------------------------------------*/	
	#bigpic, #bigpic .inside{
		background: url(/media/img/bg-bigpic.gif) left repeat-x }

	#bigpic .inside img{
		margin-bottom: -3px }		
	#bigpic .inside{
		min-height: 232px;
		background-color: #000;
		background-position: 690px 112px;
		background-repeat: no-repeat }	

/* 2.4	Main Content
-----------------------------------------------------------------------------------------------*/	
	#main-content{
		padding-bottom: 50px }
		
	#main-content .inside{
		padding: 32px 0 0 }
		
		#main-content .inside #content{
			border-left: 1px solid #b9c818;
			font-size: 13px;
			line-height: 23px; }
	
		#main-content .inside #content p{
			padding-bottom: 18px }
			
			img.righthand{
				float:right;
				margin-left: 15px }
		
			img.large{
				float: none;
				margin-left: -10px;
				margin-bottom: -5px }
			
			p.caption{
				font-size: 11px;
				padding-bottom: 10px }	
		
			#main-content .inside #content ul li{
				margin-left: 3px;
				padding-bottom: 2px;
				padding-left: 15px;
				background: url(/media/img/bullet.gif) left 9px no-repeat }			

		h1,
		h2,
		h3{
			font-size: 18px;
			clear: both;
			color: #000;
			padding-bottom: 5px }

		h2.withbg{
			text-transform: uppercase;
			letter-spacing: 2px;
			color: #b9c818;
			height: 42px;
			width: 607px;
			padding-top: 22px;
			padding-left:40px;
			margin-left: -10px;
			background: url(/media/img/bg-subhead.gif) no-repeat }
		
		h1{
			color: #6a7b0c }
			
	.blueish{
			background: #e7f2f3;
			padding: 15px 15px 0 15px;
			margin-bottom: -10px }	
			
	.blueish h2{
			clear: none }
		.dropshadow_image{
			margin-left: -6px;
		}
		ul.thumbnail-zoom{
			margin-left: -3px;
			/*overflow: hidden; */
			}
		
		ul.thumbnail-zoom li{
			background: none;
			display: inline;
			padding: 0 }
			
			ul.thumbnail-zoom li a{
				float:left;
				margin-top: 10px;
				margin-left: -5px;
				position: relative; }

				ul.thumbnail-zoom li a .zoom{
					position: absolute;
					display: block;
					width: 23px;
					height: 23px;
					top: 3px;
					left: 3px;
					background: url(/media/img/ico-zoom.png) no-repeat }			

				ul.thumbnail-zoom li a:hover{
					text-decoration: none }
	
				ul.thumbnail-zoom li a img{
					float:none;
					margin: 0 }
				
		
/* 2.5	Sidebar
-----------------------------------------------------------------------------------------------*/	
	#sidebar .page-option{
		float: right;
		display: block;
		margin-bottom: 30px;
		margin-right: 10px }
		
		#sidebar .page-option li{
			display: inline }

			#sidebar .page-option li a{
				float: left;
				font-size: 11px;
				margin-left: 15px;
				height: 16px;
				text-decoration: underline;
				font-weight: bold;
				padding-left: 22px }

			#sidebar .page-option li.email-this a{
				background: url(/media/img/ico-email.gif) left top no-repeat }

			#sidebar .page-option li.print-this a{
				background: url(/media/img/ico-print.gif) left top no-repeat }
				
	#sidebar .side-navigation,
	#sidebar .banner{
		clear: both;
		margin-left: 5px}			

		#sidebar .side-navigation h3{
			font-size: 15px;
			padding-bottom: 15px;
			color: #6a7b0c;
			margin-left: 5px }	

		#sidebar .side-navigation ul li,
		#sidebar .banner ul li{
			width: 264px;
			background: url(/media/img/bg-sidenav.gif) no-repeat }
		
		#sidebar .side-navigation ul li a {
			display: none;
		}
			#sidebar ul ul{
				display:none;
			}
			#sidebar .side-navigation ul li ul li a{
				height: 46px;
				color: #666;
				font-size: 13px;
				font-weight: bold;
				line-height: 18px;
				display: block;
				padding:28px 0 0 53px;
				background: url(/media/img/ico-rounded_arrow.gif)  20px center no-repeat  }
			
			#sidebar .side-navigation ul li ul li.currentPage a.navButton{
				background-image: url(/media/img/ico-rounded_arrow_expanded.gif);
				color: #00afc8 }
			#sidebar .side-navigation ul li ul li ul li.currentPage a.navButton{
				background-image: none;
			}

				#sidebar .side-navigation ul li ul li ul{			
						margin: 10px 0 5px 0;
						display: none;
						}
	
				#sidebar .side-navigation ul li ul li.currentSection ul{
					display: block }
				
					#sidebar .side-navigation ul li ul li ul li{
						padding-bottom: 5px;
						margin-left: 30px;
						background: url(/media/img/bullet.gif) left 6px no-repeat }			
						
						#sidebar .side-navigation ul li ul li ul li a{
							height: auto;
							background: none;
							padding:0 0 0 22px;
							width: 150px }
							
						#sidebar .side-navigation ul li ul li.active ul li a{
							background: none;
							color: #666 }

	#sidebar .banner{
		margin-top:25px;
		padding-top: 20px;
		background: #f6f6f6 url(/media/img/bg-divider.gif) 7px top no-repeat }
		
		#sidebar .banner ul li,
		#sidebar .banner ul li a,
		#sidebar .banner ul li a span{
			background: none;
			width: 274px;
			height: 114px;
			display: block;
			overflow: hidden;
			cursor: pointer;
			position: relative }
			
		#sidebar .banner ul li a span{
			position: absolute;
			top: 0;
			left: 0 }
			
		#sidebar .banner ul li.project-map a span{
			background: url(/media/img/img-view_project_map.jpg) left no-repeat }

		#sidebar .banner ul li.modernization-timeline,
		#sidebar .banner ul li.modernization-timeline a,
		#sidebar .banner ul li.modernization-timeline a span{
			height: 84px  }

		#sidebar .banner ul li.modernization-timeline a span{
			background: url(/media/img/img-modernization_timeline.jpg) left no-repeat }


		#sidebar .banner ul li.our-progress,
		#sidebar .banner ul li.our-progress a,
		#sidebar .banner ul li.our-progress a span{
			height: 57px  }
				
		#sidebar .banner ul li.our-progress a span{
			background:  url(/media/img/img-watch_our_progress.jpg) left no-repeat }

/* 2.6	Footer
-----------------------------------------------------------------------------------------------*/	
	#footer .inside{
		font-size: 11px;
		padding: 20px 0 100px 0;
		overflow: hidden }
		
		#footer .footleft{
			float: left }
			
			#footer .footleft p,
			#footer .footleft ul{
				float: left;
				margin-right: 30px }						
			
		#footer .footleft ul li{
			display: inline }
			
			#footer .footleft ul li a{
				float: left;
				font-size: 11px;
				margin-right: 10px;
				padding-right: 10px;
				border-right: 1px solid #666 }
			
			#footer .footleft ul li.last a{
				border: none;
				margin: 0;
				padding: 0 }
			
			
		#footer .footright{
			float: right;
			margin-right: 10px }