@import "html.css";

	#wrapper
	{
		width: 770px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#header
	{
		/* does nothing yet */
	}

	#panels
	{
		height: 260px;	/* panels collapses to 0 height because all elements inside it are floats - therefore add some dimension to it */
	}

		.blob
		{
			background-image: url(../i/intro-panel-bg.gif);
			background-position: bottom;
			width: 247px;
			height: 140px;
			padding: 10px 0px 0px 0px;
			margin-bottom: 10px;
		}

		ul { margin-top: 0; }
		li { list-style-image: url(../i/intro-bullet.gif); }
		li a { color: #FFF; text-decoration: none; }
		li a:hover { color: #FFF; text-decoration: underline; }

		#p1
		{
			float: left;
			width: 247px;
			margin-right: 14px;
		}
			#p1 h2
			{
				background-image: url(../i/intro-panel-header-1.jpg);
				background-repeat: no-repeat;
				background-position: bottom;
				padding: 35px 15px 35px 15px;
				color: #133163;
			}

		#p2
		{
			float: left;
			width: 247px;
			margin-right: 14px;
		}
			#p2 h2
			{
				background-image: url(../i/intro-panel-header-2.jpg);
				background-repeat: no-repeat;
				background-position: bottom;
				padding: 35px 15px 35px 15px;
				color: #133163;
			}



		#p3
		{
			float: left;
			width: 247px;
		}
			#p3 h2
			{
				background-image: url(../i/intro-panel-header-3.jpg);
				background-repeat: no-repeat;
				background-position: bottom;
				padding: 35px 15px 35px 15px;
				color: #133163;
			}


	#news
	{
		padding-left: 135px;
		padding-top: 11px;
		background-image: url(../i/intro-news-bg.gif);
		background-repeat: no-repeat;
		height: 26px;
		color: #FFF;
	}
		#news a
		{
			color: #FFFFFF; text-decoration: none;
		}

	.footer
	{
		text-align: center;
	}