﻿body{	
	background:#F5F5F5 url('../../img/body_bg.gif') repeat-x left top;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	margin:0;
	padding:0;
}

h1, h2, h3, h4, h5, p, ul, ol {
	margin:0px;
	padding:5px 25px;
	line-height: normal ;
}

h1 {
	color:#000;
	font-size:24px;
	font-weight:normal;
	margin:10px 0;
}
h2{
	color:#3366CC;
	font-size:16px;
	font-weight:bold;
}


h3{
	color:#CC3300;
	font-size:12px;
	font-weight:bold;
}
ul{
	margin:0 0px;
	padding:0 0px;
}
	ul li {
		line-height:16px;
		margin:5px 20px 5px 0px;
		padding:0px 0 0 20px;
		background:url('../../img/bullet_blue.gif') no-repeat left top;
		list-style-type:none;
}
	ul.list01 {
		padding:0 10px;
}
		ul.list01 li{
			background-image:none;
			border-bottom:1px solid #FFCC66;
			list-style-type:none;
			list-style-image:none;
			margin:0px;
			padding:5px 0;
}
ol
{
    margin:0px;
	padding:5px 25px;
}
ol li
{
    list-style-position: inside;
}
a{
	color:#3366cc;
}
a.more{
	color:#CC3300;
}
a:hover{
	color:#0099CC;
}

small
{
    font-family: Arial;
    font-size: 11px;
    color: #AAA;
}

input, textarea
{
    font-family: Arial;
    font-size: 12px;
}



.blueBut{
	background: transparent url(../../img/blueBut.gif) no-repeat left top;
}

.blueBut span{
	background: transparent url(../../img/blueBut.gif) no-repeat right top;
}

.greenBut{
	background: transparent url(../../img/greenBut.gif) no-repeat left top;
}

.greenBut span{
	background: transparent url(../../img/greenBut.gif) no-repeat right top;
}

.button{
	float:left;
	color:#fff;
	margin:0 2px 0 0;
	padding:0 0 0 5px;
	text-decoration:none;
	font-size: 11px;
	letter-spacing: 1px;
	margin-top: 4px;
	line-height:16px;
}

.button span{
	float:left;
	display:block;
	padding:6px 12px 6px 6px;
	font-weight:bold;
}

a.button:hover{
	color:#fff;
	background-position:0% -28px;
	text-decoration:none;
	cursor:pointer;
}

a.button:hover span{
	background-position:right -28px;
	padding:6px 12px 6px 6px;
}	

.buttonArea{
	text-align:center;
	margin:5px;
	clear:both;
}

#container{
	width:780px;
	margin:auto;
}	
	#top{
		background: #fff url('../../img/top_bg.gif') repeat-x left top;
		height:76px;
		margin:0 10px;
}
		#top .ctl{
		background: #fff url('../../img/top_ctl.gif') no-repeat left top;
		height:76px;
		float:left;
		position:relative;
		left:-10px;
		width:28px;
}
		#top .ctr{
		background: #fff url('../../img/top_ctr.gif') no-repeat right top;
		height:76px;
		float:right;
		position:relative;
		right:-9px;
		width:28px;
}
		#top #toplogo{
		background: url('../../img/populi_logo.gif') no-repeat right top;
		border-right:1px solid #99CC66;
		float:left;
		height:46px;
		margin-top:24px;
		width:87px;
}
		#top #sublogo{
		background: url('../../img/sublogo.gif') no-repeat right top;
		float:left;
		height:20px;
		margin:38px 10px 0 10px;
		width:128px;
}
		#top .login{
	
}
	#menubar{
		background: #D8F3FF url('../../img/menubar_bg.gif') repeat-x left top;
		border-left:1px solid #1E5A8F;
		border-right:1px solid #1E5A8F;
		height:28px;
		margin:0 9px;
}
		#menubar #menu a{
			background: #C3E4F1 url('../../img/tabs.gif') repeat-x left top;
			border-right:1px solid #99C4F1;
			/*color:#0078D7;*/
			color:#333;
			display:block;
			float:left;
			font-size: 12px;
			font-weight:bold;
			height:28px;
			line-height:30px;
			margin:0;
			overflow:hidden;
			padding:0 18px;
			text-decoration:none;	
			
}
		#menubar #menu .sub a{
			background: #ccc;
			border:1px solid #99C4F1;
			width:120px;				
}

		#menubar #menu a:hover{
			background-position:0% -28px;
			color:#D9580A;
}
		#menubar #menu a.current{
			background-position:left -56px;
			color:#008600;
}
		#menubar #menu a.current:hover{
			background-position:left -56px;
}
	#main{
		background:#fff url('../../img/main_bg.gif') repeat-y center top;
		border-top:1px solid #fff;
		margin:0px;
		padding:0 10px;	
		width:760px;
}
		#main .col{
			float:left;
}
		.twocol #col01{
			float:left;
			overflow:hidden;
			
			width:520px;
			
}
		.onecol #col01{
			
}
			 #main .panels01{
				border-left:1px solid #fff;
				height:auto;
				padding:5px 0 5px 11px;
				font-size: 12px;
				overflow:visible;
				display:block;
				min-height:100px;
				/* this causes a bug border-bottom:1px solid #fff;*/
				
}			
				/* This clears the floated panels so that the next element starts on the next line*/
				#main .panels01:after{
					clear: both; 
					content: "."; 
					display: block; 	
					height: 0; 
					visibility: hidden;					
}			
			#main .panels01 .panel{		
				float:left;
				padding:0px;
				margin:2px 0px 2px 3px;
				width:162px;
}
			#main .panels01 .panel_content{	
					padding:0px 0px 15px 0px;	
					min-height:1px;					
}	
			#main .panels01 .header{	
					margin:2px 2px 0 2px;		
					height:38px;				
}	
				#main .panels01 .panel .header h2{	
						color:#fff;
						height:38px;
						line-height:29px;
						margin:0 0 0 12px;
						padding:5px 20px 5px 5px;	
						text-align:center;
}	
				#main .panels01 .panel h2{
					margin:0;
					padding:10px;
					
}					
				#main .panels01 .panel p{	
					margin:0;
					padding:5px 10px;
						
}	
				#main .panels01 ul{	
					margin:0;
					padding:5px 10px;
						
}	

		
			#main .panels01 .panel_green{
				background:#fff url('../../img/panel_green.gif') no-repeat left top;
}
				#main .panels01 .panel_green .panel_content{
					background:url('../../img/panel_green_right.gif') no-repeat right top;
}
				#main .panels01 .panel_green .panel_content .header{
					background:url('../../img/panel_green_header.gif') no-repeat left top;
}
				#main .panels01 .panel_green .panel_content .header h2{
					background:url('../../img/panel_green_header.gif') no-repeat right top;
}
			#main .panels01 .panel_blue{
				background:#fff url('../../img/panel_blue.gif') no-repeat left top;
}
				#main .panels01 .panel_blue .panel_content{
					background:url('../../img/panel_blue_right.gif') no-repeat right top;
}
				#main .panels01 .panel_blue .panel_content .header{
					background:url('../../img/panel_blue_header.gif') no-repeat left top;
}
				#main .panels01 .panel_blue .panel_content .header h2{
					background:url('../../img/panel_blue_header.gif') no-repeat right top;
}
				

			#main  .panels01 .panel_close{	
					height:4px;
					line-height:4px;
}	
			#main  .panels01 .panel_close .panel_content{	
					float:right;
					height:4px;
					line-height:4px;
					padding:0;
					width:4px;					
}			
			#main  .panels01 .panel_green .panel_close{	
				background:url('../../img/panel_green.gif') no-repeat left bottom;
}
				#main .panels01 .panel_green .panel_close .panel_content{
					background:url('../../img/panel_green_right.gif') no-repeat right bottom;
}
			#main  .panels01 .panel_blue .panel_close{	
				background:url('../../img/panel_blue.gif') no-repeat left bottom;
}
				#main .panels01 .panel_blue  .panel_close .panel_content{
					background:url('../../img/panel_blue_right.gif') no-repeat right bottom;
}
		.twocol #col02{
			float:left;
			width:240px;
}
		.onecol #col02{
			display:none;
}
			/* This clears the floated columns so that the footer margin has something to push off*/
			#col02:after{
				clear: both; 
				content: "."; 
				display: block; 	
				height: 0; 
				visibility: hidden;
}	
		#main #bottom{
			background:#E4EFF7 url('../../img/bottom_bg.gif') repeat-x center top;
			clear:both;
			margin-top:20px;
			padding:0 10px;
}
			#main #bottom .col{
				border-right:1px solid #D7E7F1;
				float:left;
				font-size:11px;		
				padding:5px 0;		
				width:200px;
}	
				#main #bottom .col a{
					/*border-bottom:1px solid #D7E7F1;*/
					display:block;
					padding:2px 10px;
					text-decoration:none;
}	
			#main #bottom #bottom_col01{

}
			#main #bottom #bottom_col02{
			
}
			#main #bottom #bottom_logo{
				background: url('../../img/populi_logo.gif') no-repeat right top;
				float:right;
				height:46px;
				margin-top:10px;
				width:97px;
}
			#main #bottom #bottom_cap{	
				background:#F5F5F5 url('../../img/bottomcap_bg.gif') repeat-x center top;
				clear:both;
				height:15px;
}
				#main #bottom #bottom_cap .cbl{
					background:#F5F5F5 url('../../img/bottom_cbl.gif') repeat-x center top;
					height:15px;
					float:left;
					position:relative;
					left:-20px;
					width:20px;
}
				#main #bottom #bottom_cap .cbr{
					background:#F5F5F5 url('../../img/bottom_cbr.gif') repeat-x center top;
					height:15px;
					float:right;
					position:relative;
					right:-20px;
					width:20px;
}

.hasIcon img{
	margin:-5px 5px -6px -8px;
}

				#main .panels01 .orangeHead .panel_content .header{
					background:url('../../img/panel_orange_header.gif') no-repeat left top;
}
				#main .panels01 .orangeHead .panel_content .header h2{
					background:url('../../img/panel_orange_header.gif') no-repeat right top;
					font-size:12px;
					text-transform:uppercase;
}

				#main .panels01 .orangeHead .panel_content .hasIcon img{
					margin:-5px 5px -8px -15px;
}

.featureItem{
	background:url('../../img/feature_item_bg.gif') no-repeat 10px top;
	margin:10px 0px 0px 0px;
	border:1px solid #fff;
}

	.featureItem h2{
		margin:15px 0px 10px 00px;
}

	.featureItem .backTop{
		display:none;
}

.featureItemSelected{
	background:url('../../img/feature_item_bg_select.gif') no-repeat 10px top;
	margin:10px 0px 0px 0px;
	border:1px solid #fff;
}

	.featureItemSelected h2{
		margin:15px 0px 10px 00px;
		font-size:18px;
		color:#CC3300;
}

.featureItemSelected .backTop{
	display:block;
	float:right;
	font-size:9px;
	margin:17px 0px 0px 0px;
}

.featureItemSelected .backTop a img{
	border:none;
	margin-bottom:-5px;
	background:#FFFFFF;
}


	#footer{
		text-align:center;
}
		#footer a{
			text-decoration:none;
}

.flashmsgerror
{
    background:#CC0000 url(../../img/alertbad_icon.gif) no-repeat;
    background-position:0px 5px;
    border:1px solid #BE0707;
    color:#ffffff;
    padding:7px;
    text-indent:20px;
    margin-top:10px;
}

.flashmsg
{
    background:#E2F9E3 url(../../img/alertgood_icon.gif) no-repeat;
    background-position:0px 5px;
    border:1px solid #99CC99;
    color:#006600;
    padding:7px;
    text-indent:20px;
    margin-top:10px;
} 