/*
	XHTML ELEMENTS
*/

body	{
	text-align: center; /* centering divs for layout */
	color: #222;
	font-family: "Trebuchet MS", "Lucida Grande", verdana, sans-serif;
	font-size: 82%; /* 76% is smallest */
	margin: 0;
	border: 0;
	padding: 0;
	background-color: #fff;
	}

img		{
	display: block;
	border: 0;
	}


/*
	SKIPBOX, TOP, LOGO, INFO, LOGIN AREA

*/

#skipbox	{/* just need a div box around the link to validate XHTML */
}

#topbg	{
	text-align: center; /* centering divs for layout */
	margin: 0;
	border: 0;
	padding: 0;
	background-color: #fff;
	}
#top	{
	text-align: left;
	margin: 0 auto;
	border: 0;
	padding: 0 5px 0 5px; /* subtract l+r=10 for bmh */
	background-color: transparent;
	width: 786px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 776px;
	}
html> div#top {
	width: 776px;
	}

#periphixlogo {
float: left;
	margin: 0;
	padding: 0;
	border: 0;
	width: 260px;
	height: 78px;
}
a#plogolink:link, a#plogolink:visited {
float: left;
display: block;
	text-decoration: none;
	color: #000;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	background-image: url(http://www.periphix.com/images/periphix-solutions.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 260px;
	height: 78px;
	}
a#plogolink:hover {
float: left;
display: block;
	text-decoration: none;
	color: #71a64b; /* logo green */
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	width: 260px;
	height: 78px;
	}
a#plogolink:active {
float: left;
display: block;
	text-decoration: none;
	color: #000;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: transparent;
	width: 260px;
	height: 78px;
	}

#topinfo	{/* max width: 516px */
float: right;
	text-align: right;
	color: #666;
	font-size: 0.9em;
	line-height: 1.3em;
	margin: 32px 40px 0 0;
	border: 0;
	padding: 0;
	width: 476px;
	}

div#alternatetopinfo	{/* may need to adapt this later for login area */
float: right;
	text-align: right;
	color: #666;
	font-size: 0.8em;
	line-height: 1.3em;
	margin: 0;
	border: 0;
	padding: 33px 40px 0 0; /* l+r= 40 */ 
	background-color: transparent;
	width: 476px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 436px;
	}
html> div#alternatetopinfo {
	width: 436px;
	}


/*
	HOME
*/

#homenavbg	{
	clear: both; /* this does the trick */
	text-align: center; /* centering divs for layout */
	margin: 0;
	border: 0;
	border-bottom: 1px solid #333;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/home-top-side-gradients.gif) no-repeat bottom center;
	}
.homenav	{/* MUST NOT have div B4 the period for dual class selectors */
	text-align: center;
	margin: 0 auto;
	border: 0;
	padding: 0;
	width: 778px; /* includes the side borders too */
	height: 326px;
	background: transparent url(http://www.periphix.com/images/home/home-yourteam3.jpg) no-repeat top left;
	}
ul#homenavlist {
	text-align: center;
	margin: 0 36px 0 520px;
	border: 0;
	padding: 0 0 0 0; /* must do bmh if height padding is used */
	background-color: #333;
	width: 222px;
	height: 326px;
	}
ul#homenavlist li {
	list-style: none;
/*	display: inline;*/
	text-align: center;
	margin: 0;
	border: 0;
	padding: 20px 0 20px 0;
	}
	
ul#homenavlist li a:link, ul#homenavlist li a:visited {
	text-decoration: none;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#homenavlist li a:hover {
	text-decoration: none;
	color: #f7943d; /* logo orange */
	font-size: 1.6em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#homenavlist li a:active {
	text-decoration: none;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}


/*
	HOME COLUMNS LAYOUT
*/

#homepagebg	{
	clear: both; /* this does the trick */
	text-align: center;
	margin: 4px 0 4px 0;
	border: 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/home-page-gradient.gif) repeat-x top left;
	}
#homepage	{
	text-align: left;
	margin: 0 auto;
	border: 0;
	border-left: 1px solid #333;
	border-right: 1px solid #333; /* subtract l+r=2 for bmh */
	padding: 0 0 0 0;
	background-color: #fff;
	width: 778px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 776px;
	}
html> div#homepage {
	width: 776px;
	}

#homecolumns	{
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/home-page-columns.gif) repeat-y top left;
	width: 776px;
}

#leftcolumn	{
float: left;
	line-height: 1.3em;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0 0 0 37px;
	background-color: transparent;
	width: 259px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 222px;
	}
html> div#leftcolumn {
	width: 222px;
	}

#middlecolumn	{
float: left;
	line-height: 1.3em;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0 0 0 36px;
	background-color: transparent;
	width: 258px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 222px;
	}
html> div#middlecolumn {
	width: 222px;
	}

#rightcolumn	{
float: right;
	line-height: 1.3em;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0 0 0 37px;
	background-color: transparent;
	width: 259px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 222px;
	}
html> div#rightcolumn {
	width: 222px;
	}


.colimg	{/* MUST NOT have div B4 the period for dual class selectors */
display: block;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/section/PCtexture1.jpg) no-repeat top right;
	width: 222px;
	height: 70px;
}
h2.coltitle	{
	text-align: right;
	color: #f7943d; /* logo orange */
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	border: 0;
	padding: 4px 14px 0 4px;
}
.colcontent	{
	text-align: left;
	font-size: 0.9em;
	margin: 4px 4px 0 0;
	border: 0;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	padding: 0 10px 36px 0;
}


/*
	NAV
*/

#navbg	{
	clear: both; /* this does the trick */
	text-align: center; /* centering div's for layout */
	margin: 0;
	border: 0;
	border-bottom: 1px solid #333;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/top-side-gradients.gif) no-repeat bottom center;
	}
#nav	{
	text-align: center;
	margin: 0 auto;
	border: 0;
	padding: 0;
	width: 778px; /* includes the side borders too */
	height: 34px;
	background: transparent url(http://www.periphix.com/images/nav-bar-bg.gif) no-repeat top left;
	}
ul#navlist {
	text-align: center;
	margin: 0 auto;
	border: 0;
	padding: 7px 0 0 0; /* pushes the text links down */
	background-color: #333;
	width: 734px;
	}
ul#navlist li {
	list-style: none;
	display: inline;
	text-align: center;
	margin: 0;
	border: 0;
	padding: 0 30px 0 30px;
	}
	
ul#navlist li a:link, ul#navlist li a:visited {
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#navlist li a:hover {
	text-decoration: none;
	color: #f7943d; /* logo orange */
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#navlist li a:active {
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#navlist li a.thissect:link, ul#navlist li a.thissect:visited, ul#navlist li a.thissect:hover, ul#navlist li a.thissect:active {color: #f7943d;} /* logo orange */




#thirdnav	{
	
	text-align: left;
	margin: 0 auto;
	border: 0;
	padding: 0;
	width: 450px; /* includes the side borders too */
	height: 25px;
	}
ul#thirdnavlist {
	text-align: left;
	margin: 0 auto;
	border: 0;
	padding: 7px 0 0 0; /* pushes the text links down */
	background-color: #333;
	width: 445px;
	}
ul#thirdnavlist li {
	list-style: none;
	display: inline;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0 9px 0 9px;
	}
	
ul#thirdnavlist li a:link, ul#thirdnavlist li a:visited {
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#thirdnavlist li a:hover {
	text-decoration: none;
	color: #f7943d; /* logo orange */
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}

ul#thirdnavlist li.subcurrentpage {
	list-style: none;
	text-align: left;
	line-height: 1.1em;
	margin: 0;
	border: 0;
	padding: 5px 10px 5px 5px;
	background-color: #fff799; /* logo orange */
}
	
ul#thirdnavlist li a:active {
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#navlist li a.thissect:link, ul#navlist li a.thissect:visited, ul#navlist li a.thissect:hover, ul#navlist li a.thissect:active {color: #f7943d;} /* logo orange */



/*
	INTERIOR CONTENT LAYOUT
*/

#pagebg	{
	clear: both; /* this does the trick */
	text-align: center;
	margin: 4px 0 4px 0;
	border: 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/page-gradient.gif) repeat-x top left;
	}

#page	{
	text-align: left;
	margin: 0 auto;
	border: 0;
	border-left: 1px solid #333;
	border-right: 1px solid #333; /* subtract l+r=2 for bmh */
	padding: 0 0 54px 0;
	background-color: #fff;
	width: 778px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 776px;
	}
html> div#page {
	width: 776px;
	}

#content	{
float: left;
line-height: 1.4em;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0 54px 0 36px; /* l+r= 90 */ 
	background-color: transparent;
	width: 554px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 464px;
	}
html> div#content {
	width: 464px;
	}

#side	{
float: right;
	text-align: left;
/*	color: #666; */
	margin: 0;
	border: 0;
	padding: 0; /* l+r= 0 */ 
	background-color: transparent;
	width: 222px;  /* bmh */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 222px;
	}
html> div#side {
	width: 222px;
	}

.sectimg	{/* MUST NOT have div B4 the period for dual class selectors */
display: block;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/section/PCtexture.jpg) no-repeat top right;
	width: 222px;
	height: 70px;
}
h2#secttitle	{
	text-align: right;
	color: #f7943d; /* logo orange */
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	border: 0;
	padding: 4px 14px 0 4px;
}

/*
	SUBNAV
*/

#subnav	{
	margin: 4px 0 0 18px;
	border: 0;
	padding: 0;
	width: 204px;
	}

ul#subnavlist {
	margin: 0 4px 0 0;
	border: 0;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	padding: 5px 0 12px 0;
	width: 199px;
	}
ul#subnavlist li {
	list-style: none;
	text-align: right;
	line-height: 1.1em;
	margin: 0;
	border: 0;
	padding: 5px 10px 5px 5px;
	}
ul#subnavlist li.currentpage {
	list-style: none;
	text-align: left;
	line-height: 1.1em;
	margin: 0;
	border: 0;
	padding: 5px 10px 5px 5px;
	background-color: #f7943d; /* logo orange */
	}

ul#subnavlist li a:link, ul#subnavlist li a:visited {
	text-decoration: none;
	color: #666;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.1em;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#subnavlist li a:hover {
	text-decoration: none;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.1em;
	background-color:  #f7943d; /* logo orange */
	margin: 0;
	border: 0;
	padding: 0;
	}
ul#subnavlist li a:active {
	text-decoration: none;
	color: #666;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.1em;
	background-color: transparent; 
	margin: 0;
	border: 0;
	padding: 0;
	}

	ul#subnavlist li.thirdsubnav {
		list-style: none;
		text-align: left;
		line-height: 1.1em;
		margin: 0;
		border: 0;
		padding: 5px 10px 5px 5px;
		}
	ul#subnavlist li.subcurrentpage {
		text-align: left;
		list-style: none;
		line-height: 1.1em;
		margin: 0;
		border: 0;
		padding: 5px 10px 5px 5px;
		background-color: #fdc689; /* yellow orange */
		}

	ul#subnavlist li.thirdsubnav a:link, ul#subnavlist li.thirdsubnav a:visited {
		text-decoration: none;
		color: #666;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1.1em;
		background-color: transparent; 
		margin: 0;
		border: 0;
		padding: 0;
		}
	ul#subnavlist li.thirdsubnav a:hover {
		text-decoration: none;
		color: #fff;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1.1em;
		background-color:  #f7943d; /* logo orange */
		margin: 0;
		border: 0;
		padding: 0;
		}
	ul#subnavlist li.thirdsubnav a:active {
		text-decoration: none;
		color: #666;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1.1em;
		background-color: transparent; 
		margin: 0;
		border: 0;
		padding: 0;
		}		
ul#subnavlist li.currentpage a.thispage:link, ul#subnavlist li.currentpage a.thispage:visited, ul#subnavlist li.currentpage a.thispage:hover, ul#subnavlist li.currentpage a.thispage:active {color: #fff;}


/*
	FOOT
*/

#footbg	{
	clear: both; /* this does the trick */
	text-align: center; /* centering div's for layout */
	margin: 0;
	border: 0;
	border-top: 1px solid #333;
	padding: 0;
	background: transparent url(http://www.periphix.com/images/foot-side-gradients.gif) no-repeat top center;
	}
#foot	{
	text-align: center;
	color: #ddd;
	font-size: 0.8em;
	margin: 0 auto;
	border: 0;
	padding: 6px 0 0 0;
	width: 778px; /* includes the side borders too */
	height: 34px;
	background: transparent url(http://www.periphix.com/images/foot-bar-bg.gif) no-repeat top left;
	}


/*
	LINKS
*/

a:link, a:visited {
	text-decoration: underline;
	color: #2484c6; /* logo blue */
	background-color: transparent; 
	}
a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #71a64b; /* logo green background */
	}
a:active {
	text-decoration: underline;
	color: #2484c6; /* logo blue */
	background-color: transparent;  
	}

a#skipnav:link, a#skipnav:visited {
position: absolute;
z-index: 1;
top: 0px;
left: 4px;
	text-decoration: none;
	color: #333;
	font-size: 0.8em;
	padding: 1px 2px;
	background-color: transparent; 
	}
a#skipnav:hover {
position: absolute;
z-index: 1;
top: 0px;
left: 4px;
	text-decoration: none;
	color: #fff;
	font-size: 0.8em;
	padding: 1px 2px;
	background-color: #333;
	}
a#skipnav:active {
position: absolute;
z-index: 1;
top: 0px;
left: 4px;
	text-decoration: none;
	color: #333;
	font-size: 0.8em;
	padding: 1px 2px;
	background-color: transparent;  
	}

/* halfofone link in the foot */
a.h1link:link, a.h1link:visited {text-decoration: none; font-weight: bold; color: #093;}
a.h1link:hover {text-decoration: none; font-weight: bold; background-color: #093; color: #fff;}
a.h1link:active {text-decoration: none; font-weight: bold; color: #093;}

/* Periphix Download link */
a.support:link, a.support:visited {text-decoration: none; font-weight: bold; color: #2484c6;}
a.support:hover {text-decoration: none; font-weight: bold; background-color: transparent; color: #fff;}
a.support:active {text-decoration: none; font-weight: bold; color: #093;}

/*
	TYPOGRAPHY: Headers, Lists, Paragraph
*/

h1	{/* Periphix home title link */
display: inline; /* ensure h1 doesn't interfere with layout in top area */
	font-size: 1em; /* ensure h1 is 1em, then specify size in a */
	line-height: 1em; /* ensure consistent line-height */
	margin: 0;
	border: 0;
	padding: 0;
	}

h2	{/* section title - see secttitle above  */
	}

h3	{/* page content title  */
	color: #111;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.4em;
	margin: 30px 0 0 0; /* make this area fixed, not scalable */
	border: 0;
	padding: 0;
	}

h4	{/* subtitle */
	color: #666;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.3em;
	margin: 1.3em 0 0 0;
	border: 0;
	padding: 0;
	}

h5	{/* just a bold title */
	color: #666;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 1.2em 0 0 0;
	border: 0;
	padding: 0;
	}

h6	{/* just a normal title */
	color: #666;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
	margin: 1.2em 0 0 0;
	border: 0;
	padding: 0;
	}

ul	{
	list-style-type: disc;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ul li	{
	list-style-type: disc;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol	{
	list-style-type: decimal;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ol li	{
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ol.ualpha	{
	list-style-type: upper-alpha;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ol.ualpha li	{
	list-style-type: upper-alpha;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

ul.nobullets	{
	list-style-type: none;
	margin: 1em 0 0 0;
	border: 0;
	padding-left: 24px;
	}
ul.nobullets li	{
	list-style-type: none;
	list-style-position: inside;
	line-height: 1.4em;
	margin: 0;
	border: 0;
	padding: 0;
	}

p {
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
	}
p.indent {
	margin: 1em 0 0 24px;
	border: 0;
	padding: 0;
	}
blockquote	{/* 25px looks better and more consistent than 24px */
	margin: 1.5em 25px 0.6em 25px;
	border: 0;
	border-left: 1px solid #333;
	padding: 1px 0 1px 25px;
}


/*
	OTHER PRESENTATION
*/

.alt {display: none;}
.smaller {font-size: 0.9em;}
.nomargin {margin: 0 0 0 0;}
.middle {display: inline; vertical-align: middle;}

img.shadow {
	display: block;
	margin: 0;
	border: 0;
	padding: 0 0 3px 3px;
	background-color: transparent;
	background-image: url(http://www.periphix.com/images/imgshadow-l.gif);
	background-position: bottom left;
	}



/*
	Content Columns
*/

#innertube{
	padding: 0px 0 5px 0px;
}

#left2show{
float: left;
width: 230px; /*Width of left column in pixel*/
margin-left: 0px; /*Set left margin to -(MainContainerWidth)*/

}


#right2show{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: 4px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/

}



#left2pic{
float: left;
width: 200px; /*Width of left column in pixel*/
margin-left: 0px; /*Set left margin to -(MainContainerWidth)*/
margin-right= 5px;
padding: 5px 10px 5px 0px;

}


#right2pic{
float: left;
width: 210px; /*Width of right column in pixels*/
margin-left: 4px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/

}


#left125{
float: left;
width: 125px; /*Width of left column in pixel*/
margin-left: 0px; /*Set left margin to -(MainContainerWidth)*/
margin-right= 5px;
padding: 5px 10px 5px 0px;

}


#right125{
float: left;
width: 135px; /*Width of right column in pixels*/
margin-left: 4px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/

}

#left125right{
float: right;
width: 125px; /*Width of left column in pixel*/
margin-left: 0px; /*Set left margin to -(MainContainerWidth)*/
margin-right= 5px;
padding: 5px 10px 5px 0px;

}


#right125{
float: right;
width: 135px; /*Width of right column in pixels*/
margin-left: 4px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/
padding: 5px 10px 5px 0px;
}

/*
	3 Column Compare Columns
*/


#comparewrapper{
float: left;
width: 100%;
}


#left3compare{
float: left;
width: 150px; /*Width of left column in pixel*/
margin-left: 0px; /*Set left margin to -(MainContainerWidth)*/

}

#middle3compare{
float: left;
width: 150px; /*Width of right column in pixels*/
margin-left: 7px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/

}

#right3compare{
float: left;
width: 150px; /*Width of right column in pixels*/
margin-left: 7px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/

}


#itembold{
font-weight: bold;
color: red;
}