/* @group Basic Elements */

*, div, ul, li, img {
	margin: 0; padding: 0;
	border: 0;
}

html, body {
	height: 100%;
}

body {
	background: #0A788F url(../images/pf_bg.jpg) repeat center center;
	text-align: center;
	font: normal 12px/21px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	color: #000000;
}
input {
	font: normal 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
}
	
p {
	padding-bottom: 10px;
	text-align: justify;
}

a {
	text-decoration: none;
}

h3 {
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	color: #12909F;
}
h3.home {
	margin-bottom: 10px;
	padding-left: 0px;
}
h4 {
	margin-bottom: 10px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;	
}
h4.home {
	margin-top: 20px;
	padding-left: 5px;
	border-left: solid 15px #32B0BF;
	line-height: 15px;
}

.fL {
	float: left;
}
.fR {
	float: right;
}

.clear {
	clear: both;
}


#pfContentArea a {
	border-bottom: dotted 1px #62E0EF;
	color: #02808F;
}
#pfContentArea a:hover {
	border-bottom: dotted 1px #02808F;
	color: #000000;
}

/* @end */






/* @group Layout Structures */

#pfTop {
	visibility: hidden;
	width: 100%; height: 50%;
	margin-top: -255px;	/* Half the height of #pfLayout */
	float: left;
}
#pfLayout {
	clear: both;
	position: relative;
	width: 920px; height: 510px;	/* 10px extra for shadows */
	margin: 0px auto;
}

#pfNav {
	position: absolute;
	top: 0px; left: 0px;
	width: 410px; height: 500px;
	background: transparent url(../images/pf_navBg.jpg) repeat-y top right;
}
#pfContent {
	position: absolute;
	top: 0px; right: 0px;
	width: 510px; height: 510px;
	background: transparent url(../images/pf_contentBg.jpg) no-repeat top left;
}

/* @end */



/* @group Nav */
h1 a,
h1 a:hover,
h1 a:active {
	display: block;
	width: 360px; height: 100px;
	margin-left: 50px;
	background: transparent url(../images/pf_navLogo.jpg) no-repeat top right;
	text-indent: -999999px;
}

ul#pfNavType {
	position: absolute;
	top: 155px; left: 190px;
	list-style: none;
	width: 220px;
}
ul#pfNavType li a {
	display: block;
	width: 160px; height: 32px;	/* add up to 220x70 */
	padding: 19px 30px;
	background: transparent url(../images/pf_navType.png) no-repeat 100% 0px;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	color: #587276;
}
ul#pfNavType li a:hover {
	background-position: 100% -70px;
	color: #000000;
}
ul#pfNavType li a:active {
	color: #FFFFFF;
}

ul#pfNavType li a span {
	display: block;
	height: 20px;
	padding: 6px 0px; padding-left: 50px;
}
ul#pfNavType li a span.print {
	background: transparent url(../images/pf_navIcon_print.png) no-repeat 0px 0px;
}
ul#pfNavType li a span.identity {
	background: transparent url(../images/pf_navIcon_identity.png) no-repeat 0px 0px;
}
ul#pfNavType li a span.web {
	background: transparent url(../images/pf_navIcon_web.png) no-repeat 0px 0px;
}
ul#pfNavType li a span.apparel {
	background: transparent url(../images/pf_navIcon_apparel.png) no-repeat 0px 0px;
}
ul#pfNavType li a span.misc {
	background: transparent url(../images/pf_navIcon_misc.png) no-repeat 0px 0px;
}
ul#pfNavType li a:hover span.print,
ul#pfNavType li a:hover span.identity,
ul#pfNavType li a:hover span.web,
ul#pfNavType li a:hover span.apparel,
ul#pfNavType li a:hover span.misc {
	background-position: 0px -64px;
}


ul#pfNavType.opened {
	left: 30px;
	width: 80px;
}
ul#pfNavType.opened li a {
	background-position: 0px 0px;
}
ul#pfNavType.opened li a:hover {
	background-position: 0px -70px;
}
ul#pfNavType.opened li a span {
	text-indent: 200px;
}
ul#pfNavType.sliding li a span {
	text-indent: 0px;
}
ul#pfNavType.opened li a:hover span.print,		ul#pfNavType.sliding li a:hover span.print,
ul#pfNavType.opened li a:hover span.identity,	ul#pfNavType.sliding li a:hover span.identity,
ul#pfNavType.opened li a:hover span.web,		ul#pfNavType.sliding li a:hover span.web,
ul#pfNavType.opened li a:hover span.apparel,	ul#pfNavType.sliding li a:hover span.apparel,
ul#pfNavType.opened li a:hover span.misc,		ul#pfNavType.sliding li a:hover span.misc {
	background-position: 0px -32px;
}
ul#pfNavType.opened li a.selected,	ul#pfNavType.sliding li a.selected {
	background-position: 0px -140px;	
}
ul#pfNavType.opened li a.selected span.print,		ul#pfNavType.sliding li a.selected span.print,
ul#pfNavType.opened li a.selected span.identity,	ul#pfNavType.sliding li a.selected span.identity,
ul#pfNavType.opened li a.selected span.web,			ul#pfNavType.sliding li a.selected span.web,
ul#pfNavType.opened li a.selected span.apparel,		ul#pfNavType.sliding li a.selected span.apparel,
ul#pfNavType.opened li a.selected span.misc,		ul#pfNavType.sliding li a.selected span.misc,
ul#pfNavType.opened li a:active span.print,
ul#pfNavType.opened li a:active span.identity,
ul#pfNavType.opened li a:active span.web,
ul#pfNavType.opened li a:active span.apparel,
ul#pfNavType.opened li a:active span.misc {
	background-position: 0px -64px;
}



#pfNavPanelShadow,
#pfNavPanelShadow.closed {
	position: absolute;
	top: 155px; left: 410px;
	width: 5px; height: 340px;
	margin: 5px 0px;
	background: transparent url(../images/pf_navPanel_shadow.png) repeat-y 0px 0px;
}
#pfNavPanelShadow.identity	{ background-position: 0px 70px; }
#pfNavPanelShadow.web		{ background-position: 0px 140px; }
#pfNavPanelShadow.apparel	{ background-position: 0px 210px; }
#pfNavPanelShadow.misc		{ background-position: 0px 280px; }


#pfNavPanel,
#pfNavPanel.closed {
	position: absolute;
	top: 155px; left: 410px;
	width: 300px; height: 350px;
	background: transparent url(../images/pf_navPanel.png) no-repeat 0px 0px;
}


#pfNavPanelShadow.opened {
	left: 105px;
}
#pfNavPanel.opened {
	left: 110px;
}

/* @end */


/* @group NavPanel Content */
#panelContentWrapper {
	position: relative;
}
.panelContent {
	position: absolute;
	top: 0px; left: 0px;
	visibility: hidden;
}

.panelContent.visible {
	visibility: visible;
}

.panelContent h2 {
	height: 20px;
	padding-top: 25px; padding-left: 20px;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}
#pfNavPanel ul {
	list-style: none;
	width: 260px;
	padding: 20px;
}
#pfNavPanel ul li {
	float: left;
	width: 65px; height: 65px;
}
#pfNavPanel ul li a {
	display: block;
	width: 55px; height: 55px;
	margin: 1px; padding: 4px;
}
#pfNavPanel ul li a:visited {
	background-color: #93C5CC;
}
#pfNavPanel ul li a:hover {
/*	background-color: #9DCFD6; */
	background-color: #FFFFFF;
}
#pfNavPanel ul li a:active {
	background-color: #FFFFFF;
}
#pfNavPanel ul li a.selected {
	background-color: #000000;
}
#pfNavPanel ul li a img {
	width: 55px; height: 55px;
}


/* @end */





/* @group Content */

#pfContentTop {
	width: 500px; height: 40px;
	margin-right: 10px;
}

#pfContentArea {
	position: relative;
	width: 460px; height: 420px;
	margin: 20px; margin-right: 30px;
}
#pfContentArea a.contentImgLink {
	border: 0;
}
#vWrapper {	
	width: 460px; height: 350px;
	overflow: hidden;
}
#vInner {
}
#vInner #v1,
#vInner #v2 {
	width: 460px;	
}

.contentImg {
	margin: 0 5px;
	border-bottom: solid 5px #FFFFFF;
}
#pfContentArea a.contentImgLink .contentImg {
	border-bottom: dotted 5px #FFFFFF;	
}
#pfContentArea a.contentImgLink:hover .contentImg {
	border-color: #62E0EF;
}
#pfContentInfo {
	position: absolute;
	bottom: 0px; left: 0px;
	width: 460px;
	text-align: left;
}
#pfContentInfo #pfContentDesc {
	float: right;
	width: 295px;
	margin-top: 3px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: solid 1px #62E0EF;
}
#pfContentInfo em.contentLabel {
	display: block;
	float: left;
	width: 45px;
	margin-right: 10px; margin-bottom: 10px;
	border-right: dotted 1px #999999;
	font-weight: bold;
	font-style: normal;
	color: #999999;
}
#pfContentInfo em.contentLabel.version {
	width: 55px;	
}
#pfContentInfo #versions a {
	padding: 0 10px;
	border-right: solid 1px #BBBBBB;
}
#pfContentInfo #versions a.selected {
	font-weight: bold;
	background-color: #000000;
	color: #FFFFFF;
}

#pfContentInfo #verDate span {
	display: none;
}
#pfContentInfo #verDate span.selected {
	display: inline;
}

#pfContentInfo p {
	margin: 0px; padding: 0px;
	font-size: 11px;
	line-height: 16px;
}
#pfContentInfo p span {
	display: block;
	font-size: 12px;
}



.homeFooter {
	border-top: solid 1px #CCCCCC;
}
p#validation {
	padding-left: 15px;
	color: #AAAAAA;
	background: transparent url(../images/validated.gif) no-repeat center left;
}
p#copyright {
	float: right;
	text-align: right;
	color: #AAAAAA;
}
/* @end */