/*  CSS Document                             */
/*  From tutorial by Chris Converse for Lynda.com  */

body { font: 14px Arial; margin: 0px; padding: 30px; background-color: #fff; }
a, a:visited { color: #00f; }
h1.fpo_text { color: #aaa; font-family: Times; font-size: 24px; }
p.fpo_text { color: #aaa; font-family: Times; font-size: 16px; }

.sp h2 { font-size: 1.15 em; margin: 0 0 0.5em 0; }
.sp p {font-size:1em; margin 0 0 1em 0;}
.sp u {font-size:1em; margin 0 0 1em 0;}

.sp {width: 500px; position: relative; margin: 0 0 10px 10px; float: left;}
.sp .tabs {position: relative; z-index:101; display:none;}

.sp .tabs span {
	display:inline-block;
	border-top: 1px solid #ccc; 
	border-bottom: 1px solid #ccc;
	padding: 8px 12px 8px 12px;
	margin: 0px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	border-right: 1px solid #ccc;
	}


.sp .tabs span:first-child {
	padding-left: 15px;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 12px;
	-moz-border-radius-topleft: 12px;
	border-top-left-radius:12px;
	}

	
	.sp .tabs span:last-child {
	padding-right: 15px;
	-webkit-border-top-right-radius: 12px;
	-moz-border-radius-topright: 12px;
	border-top-right-radius:12px;
	}
	
	.sp .tabs span.selected {
		color: #999; border-bottom: 1px solid #fff;
		}
		
.sp .panel_container {
	position: relative;
	border: 1px solid #ccc;
	background-color: #fff;
	overflow: hidden;
	z-index: 100;
	margin-top:-2px;
	}

.sp .panel_content {padding: 15px;}



/*orange*/
.sp .tabs .a.selected {color: #ffae2e;
		background-color: #ffe9c7;
		border-bottom: 1px solid #ffe9c7;}
		
.sp .panels .a .panel_content {background: url(../images/orangeBack.jpg) no-repeat 0px 0px;}
.sp .panels .a .panel_content h2 {color: #000;}
.sp .panels .a .panel_content p {color: #3399ff; font-style:italic; font-weight:bold;}
.sp .panels .a .panel_content ul {color: #333;}


/*blue*/
.sp .tabs .b.selected {color: #1649AE;
		background-color: #8190AE;
		border-bottom: 1px solid #8190AE;}
		
.sp .panels .b .panel_content {background: url(../images/blueBack.jpg) no-repeat 0px 0px;}
.sp .panels .b .panel_content h2 {color: #000;}
.sp .panels .b .panel_content p {color: #fff; font-style:italic; font-weight:bold;}
.sp .panels .b .panel_content ul {color: #333;}


/*gray*/
.sp .tabs .c.selected {color: #383838;
		background-color: #BFBFBF;
		border-bottom: 1px solid #BFBFBF;}
		
.sp .panels .c .panel_content {background: url(../images/grayBack.jpg) no-repeat 0px 0px;}
.sp .panels .c .panel_content h2 {color: #000;}
.sp .panels .c .panel_content p {color: #fff; font-style:italic; font-weight:bold;}
.sp .panels .c .panel_content ul {color: #333;}


/*green*/
.sp .tabs .d.selected {color: #3e6549;
		background-color: #CEE6BF;
		border-bottom: 1px solid #CEE6BF;}
		
.sp .panels .d .panel_content {background: url(../images/greenBack.jpg) no-repeat 0px 0px;}
.sp .panels .d .panel_content h2 {color: #000;}
.sp .panels .d .panel_content p {color: #fff; font-style:italic; font-weight:bold;}
.sp .panels .d .panel_content ul {color: #333;}

/*purple*/
.sp .tabs .e.selected {color: #7e1ed1;
		background-color: #c1b0d1;
		border-bottom: 1px solid #c1b0d1;}
		
.sp .panels .e .panel_content {background: url(../images/purpleBack.jpg) no-repeat 0px 0px;}
.sp .panels .e .panel_content h2 {color: #000;}
.sp .panels .e .panel_content p {color: #fff; font-style:italic; font-weight:bold;}
.sp .panels .e .panel_content ul {color: #333;}

/*red*/
.sp .tabs .f.selected {color: #ae161d;
		background-color: #f6a5a8;
		border-bottom: 1px solid #f6a5a8;}
		
.sp .panels .f .panel_content {background: url(../images/redBack.jpg) no-repeat 0px 0px;}
.sp .panels .f .panel_content h2 {color: #000;}
.sp .panels .f .panel_content p {color: #fff; font-style:italic; font-weight:bold;}
.sp .panels .f .panel_content ul {color: #333;}


/*yellow*/
.sp .tabs .g.selected {color: #110f78;
		background-color: #ecebba;
		border-bottom: 1px solid #ecebba;}
		
.sp .panels .g .panel_content {background: url(../images/yellowBackNew.jpg) no-repeat 0px 0px;}
.sp .panels .g .panel_content h2 {color: #000;}
.sp .panels .g .panel_content p {color: #999; font-style:italic; font-weight:bold;}
.sp .panels .g .panel_content ul {color: #333;}