/*
Title:      Master styles for screen media
Author:     Paul Sivers
Created:		11/08/07
Updated:    11/08/07
*/

body { margin: 0; padding: 0; border: 0; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 12px; text-align: center; min-width: 790px; color: #444; background: #edede3; padding: 0 0 30px 0;}
body, p, h1, h2 { font-family: Arial, Helvetica, Verdana, sans-serif; }

/* ---[ links ]------------------------------- */

a:link { color: #669933; }
a:visited { color: #669933; }
a:hover { color: #000; }
a.largebutton { display:block; color: #fff; font-weight: bold; font-size: 17px; text-decoration:none; padding: 12px 0 10px 10px; width: 192px; height: 30px; background: url(/images/buttonlarge.gif) no-repeat; }
a.largebutton:hover { background: url(/images/buttonlargehover.gif) no-repeat; }
a.largebuttoninline { color: #fff; font-weight: bold; font-size: 17px; text-decoration:none; padding: 12px 0 10px 10px; width: 192px; height: 30px; background: url(/images/buttonlarge.gif) no-repeat; }
a.largebuttoninline:hover { background: url(/images/buttonlargehover.gif) no-repeat; }
a.smallbutton { display:block; color: #fff; font-weight: bold; font-size: 12px; text-decoration:none; padding: 3px 0 5px 10px; width: 82px; height: 20px; background: url(/images/buttonsmall.gif) no-repeat; }
a.smallbutton:hover { background: url(/images/buttonsmallhover.gif) no-repeat; }
a.more, a:visited.more { display:inline; color: #693; font-weight: normal; font-size: 11px; text-decoration:none; padding: 0 17px 0 0; background: url(/images/greenarrow.gif) no-repeat right; }
a.more:hover { color: #000; background: url(/images/blackarrow.gif) no-repeat right; }

h2 a:link {color: #333; text-decoration:none;}
h2 a:visited {color: #333; text-decoration:none;}
h2 a:hover {color: #693;}
h3 a:link {color: #333; text-decoration:none;}
h3 a:visited {color: #333; text-decoration:none;}
h3 a:hover {color: #693;}
a.hpheaderlink, a:link.hpheaderlink, a:visited.hpheaderlink  { display:block; height: 23px; vertical-align: middle; color:#fff; font-size: 13px; text-decoration: none; padding: 5px 0 0 10px; background: url(/images/headerlinkarrow.jpg) no-repeat right; }
a.hpheaderlink:hover { display:block; height: 23px; vertical-align: middle; color:#fff; font-size: 13px; text-decoration: none; padding: 5px 0 0 10px; background: url(/images/headerlinkarrow_hover.jpg) no-repeat right; }

/* ---[ common elements ]--------------------- */

p { margin: 0 0 1em 0; padding: 0; }
h1 { color: #333; font-size: 140%; font-weight: bold; padding: 8px 0 6px 0; margin: 0; }
h2 { color: #333; font-size: 120%; font-weight: bold; padding: 8px 0 6px 0; margin: 0; }
h3 { color: #333; font-size: 11px; font-weight: bold; padding: 8px 0 6px 0; margin: 0; }
#profile h3 { color: #333; font-size: 13px; font-weight: bold; padding: 5px 0 6px 0; margin: 0; }
#profile h4 { color: #333; font-size: 11px; font-weight: bold; padding: 0 0 6px 0; margin: 0; }
em { font-style: italic; }
strong { font-weight: bold; }
form { display: inline; position: relative; margin: 0; padding: 0; }

/* ---[ top ]------------------------------- */

#outer { z-index: 10; position: relative; height: 100%; min-height: 100%; width: 790px; margin: 0 auto; padding: 0 15px 0 15px; text-align: left; background: #fff; }
html>body #outer{height:auto;}
#header { z-index: 5000; background: #fff; overflow: auto; width: 100%; position: relative;}
#logo { text-align: left; margin: 15px 0 15px 0;}
#logolyg { position:absolute; top:45px; right:5px; text-align:right; }
#content { margin: 10px 10px 0 10px; padding: 0 0 20px 0; }
#hpintro { margin: 0; padding: 10px 10px 10px 10px; background: url(/images/hpintrobackground.jpg) repeat-x bottom; }
#whycontent { margin: 10px 20px 20px 20px; padding: 0; line-height: 1.3em; }
#pagetitle { margin: 10px 10px 0 10px; padding: 0; }
#right #pagetitle { margin: 0 10px 0 10px; padding: 0; }
#right #pagetitle h1 { padding: 0 0 6px 0; }
.clearer { clear: both; height:1px; overflow:hidden; margin-bottom:-1px;}
#left { float:left; margin: 20px 0 0 0; padding: 0; width: 140px; }
#right { margin: 20px 0 0 140px; padding: 0 0 0 10px; width: 639px; border-left: 1px solid #edede3; }
#sectiontitle { margin:0 10px 0 10px; padding: 0;}
#sectiontitle h1 { font-size: 13px; font-weight: bold; color: #333; margin:0; padding:0 0 20px 0; }
.thumbnail { width:100px; }

/* navigation */

#nav { height: 21px; background: #336600 url(/images/navgradient.gif) repeat-x; margin: 0; padding:10px 0 0 0; font-size: 11px; color: #ffffff; font-weight: bold; border-top: 1px solid #360; overflow:auto;}
#nav li { list-style-type: none; margin: 0; padding: 0; float: left; width: auto; }
#nav a { display: block; text-decoration: none; padding: 0 12px 10px 11px; color: #f5f5f5; line-height:1; }
#nav ul a { background-color: #ffffff; padding: 3px 10px; color: #ffcc33; font-weight: normal; }
#nav a:hover, #nav a:active, #nav a:focus { color: #99CC00; letter-spacing: .01px; }
.navborder { border-right: 1px solid #b6cf9a; }

#menu { padding: 0; margin: 0 0 0 0; width : 140px; background: #fff;}
#menu ul { /* all lists */ padding: 0; margin: 0 0 0 0; list-style: none; width : 140px; }
#menu li { /* all list items */ position : relative; float : left; line-height : 1; width: 140px; }
#menu li a { font-family: Arial, Helvetica, Verdana, sans-serif; display : block; color : #666; font-size: 11px; font-weight : normal; text-decoration : none; background : #fff; padding : 4px 5px 4px 10px; margin-top: 0; }
#menu li a:hover { color : #fff; background-color : #76283d; }
#menu .top { margin-top: 0; border: none;}

/* lists */

#content ul { position: relative; margin: 1em 0 1em 0; padding-left: 20px; }
#content ul li { padding: 0 0 5px 5px; line-height: 1.3em; }

/* ---[ footer ]----------------------------------- */

#footerleft { float:left; text-align:right; padding: 0 0 25px 15px; }
#footerright { float:right; text-align:right; padding: 0 20px 25px 0;}
#footer { margin: 0 auto; width: 820px; padding: 15px 0 0 0; font-size: 10px; color: #666; background: #fff url(/images/footerline.gif) no-repeat center bottom; }
#footer p { margin: 0; padding: 0 0 10px 0; }
#footer a { padding: 0; color: #888; }
#footer a:hover { color: #336; }

/* ---[ forms ]------------------------------------ */

#profilesearch { padding: 15px 0 15px 10px; margin: 10px 0 10px 0; background: #edede3; }
#profilesearchform div { margin-bottom: 0.5em; }
#profilesearch select { width: 200px; font-size: 90%; color: #666;}
#profilesearch input.button { width: 5em; background-color: #e6e6e6; border-color: #ccc #666 #666 #ccc; margin-left: 1em; padding: 0; cursor: pointer; }
#profilesearch label { float: left; padding: 0 10px 0 0;}

#librarysearch { padding: 15px; margin: 10px 0 10px 0; background: url(/images/hpquotebackground.gif) no-repeat; }
#librarysearchform div { margin-bottom: 0.5em; }
#librarysearchs input { width: 200px; font-size: 90%; border: 1px solid; border-color: #666 #ccc #ccc #666; padding: 2px; }
#librarysearchs input { width: 173px; }
#librarysearch select { width: 200px; font-size: 90%; color: #666;}
#librarysearch input.button { width: 5em; background-color: #e6e6e6; border-color: #ccc #666 #666 #ccc; margin-left: 1em; padding: 0; cursor: pointer; }
#librarysearch label { float: left; padding: 0 10px 0 0;}

#contactus { float:right; padding: 10px; margin: 0 0 0 0; background: #edede3; }
#contactusform div { margin-bottom: 0.5em; }
#contactus input.styleinput { width: 260px; font-size: 90%; border: 1px solid; border-color: #666 #666 #666 #666; padding: 2px; }
#contactus input.styleinput { width: 253px; }
#contactus textarea { width: 253px; border: 1px solid; border-color: #666 #666 #666 #666; padding: 2px;}
#contactus select { width: 180px; font-size: 90%; color: #666;}
#contactus input.button { width: 5em; color: #000; background-color: #cccccc; border-color: #333 #333 #333 #333; margin-left: 1em; padding: 0; cursor: pointer; }
#contactus label { float: left; width: 120px; }
#contactus input.checkbox { width: 2em; margin: -1px 5px 0 0; padding: 0; border: none;}
.telno { font-size: 120%; font-weight: bold; }
.pagebutton { font-size: 110%; font-weight: bold; background-color: #e6e6e6; border: 1px solid; border-color: #ccc #666 #666 #ccc; margin: 0; padding: 0 4px 1px 4px; cursor: hand; text-decoration: none; }

#register { float:right; padding: 10px; margin: -30px 0 0 0; background: #f6f6f6; }
#registerform div { margin-bottom: 1em; }
#register input.styleinput { width: 240px; font-size: 100%; border: 1px solid; border-color: #666 #666 #666 #666; padding: 2px; }
#register input.styleinput { width: 233px; }
#register textarea { width: 253px; border: 1px solid; border-color: #666 #666 #666 #666; padding: 2px;}
#register select { width: 180px; font-size: 100%; color: #666;}
#register input.button { width: 5em; color: #000; background-color: #cccccc; border-color: #333 #333 #333 #333; margin-left: 1em; padding: 0; cursor: pointer; }
#register label { float: left; width: 120px; margin-top:2px; }
#register input.checkbox { width: 2em; margin: -1px 1px 0 0; padding: 0; border: none;}
.telno { font-size: 120%; font-weight: bold; }
.pagebutton { font-size: 110%; font-weight: bold; background-color: #e6e6e6; border: 1px solid; border-color: #ccc #666 #666 #ccc; margin: 0; padding: 0 4px 1px 4px; cursor: hand; text-decoration: none; }

#feedbackform { margin: 20px 0 0 0; padding: 20px 10px 20px 10px; background: #f6f6f6; }
#feedbackform label { display:block; font-weight: bold; padding: 25px 10px 10px 0; }
#feedbackform input.checkbox { margin: 0 5px 0 0 ; padding: 0 0 0 0; border: none;}
#feedbackform hr { border-top: 1px solid #fff; color: #fff; background-color: #fff; height: 1px; }

/* message */

.message { color: #c00; }
.message h3 { color: #c00; }
.error { color: #c00; }
.error h3 { color: #c00; }

/* ---[ misc. ]---------------------------------------- */


hr { border: 0; color: #e0e0e0; background-color: #ccc; height: 1px; margin: 10px 0 10px 0; }
.center { text-align: center; }
a img { border: none; }
.hide { display: none; }
.smaller { font-size: 11px; }

/* 
  -----------------------------------
  PopMenu Magic Style Sheet
  by Project Seven Development
  www.projectseven.com
  Menu Type: Horizontal
  Style Theme:1 -Windows XP Style
  -----------------------------------
*/
#p7PMnav {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	margin: 0 0 0 1px;
	padding: 0 10px 0 0;
	font-size: 11px;
	color: #fff;
	font-weight: bold;
	width: 100%;
}
#p7PMnav li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#p7PMnav ul li {
	border-right: 0;
	line-height : 1;
}
#p7PMnav ul {
	margin: 0 0 0 0; 
	padding: 0.5em 0;
	background-color: #ffffff;
	border-right: 1px solid #036;
	border-bottom: 1px solid #036;
	border-left: 1px solid #036;
	position: absolute;
	left: -9000px;
	z-index: 10000;
}
#p7PMnav a {
	display: block;
	text-decoration: none;
	padding: 4px 14px 4px 14px;
	color: #eef2f6;
}
#p7PMnav ul a {
	background-color: #ffffff;
	padding: 2px 10px 2px 15px;
	color: #666666;
	font-weight: normal;
}

#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
	background-color: #ffffff;
	color: #585858;
	letter-spacing: .01px;
}

#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {
	background-color: #258;
	color: #ffffff;
}

/* ------ the current page marker style ------ */
#p7PMnav .p7PMmark {
	font-weight: bold;
}

/* ------ the trigger link styles ------- */

/*the normal trigger links */
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
	background-image:  url(/images/p7PM_dark_east.gif);
	background-repeat:	no-repeat;
	background-position: right center;
	border-left: 1px solid #336;
}
.p7PMtrg { border-left: 1px solid #036; border-right: 1px solid #476e96; }
.p7PMrb { border-right: 1px solid #476e96; }
.p7PMlb { border-left: 1px solid #036; }

/* the active trigger link style */
#p7PMnav .p7PMon {
	background-color: #ffffff;
	color: #585858;
	border-left: 1px solid #036;
	border-right: 1px solid #036;
	padding-right: 14px;
	padding-top: 4px;
	padding-bottom: 5px;
}

/*the submenu classes */

#p7PMnav .p7PMhide {
	left: -9000px;
	border: 0;
}
#p7PMnav .p7PMshow {
	left: auto;
	z-index: 20000 !important;
}
/* Top level menu width */
#p7PMnav li {
	float: left;
	width: 100px;
}
#p7PMnav ul li {
	float: none;
}
/* 2nd and subsequent Submenu widths */
#p7PMnav ul, #p7PMnav ul li {
	width: 172px;
}
#pmmcrumb { font-size: 0.9em; font-weight: normal; margin: 5px 0 0 10px; padding: 0; color: #aaaaaa; }
#pmmcrumb a, #pmmcrumb a:visited { font-weight: normal; color: #aaaaaa; text-decoration: none;}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus { font-weight: normal; color: #333333; text-decoration: underline; }
#pmmcrumb .elearning a:hover, #pmmcrumb .elearning a:active, #pmmcrumb .elearning a:focus { font-weight: normal; color: #e55d00; text-decoration: underline; }
#pmmcrumb .webdevelopment a:hover, #pmmcrumb .webdevelopment a:active, #pmmcrumb .webdevelopment a:focus { font-weight: normal; color: #0081cd; text-decoration: underline; }
#pmmcrumb .consulting a:hover, #pmmcrumb .consulting a:active, #pmmcrumb .consulting a:focus { font-weight: normal; color: #a32638; text-decoration: underline; }
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width. */
#p7PMnav li {width: auto;}

.contentslide{ margin:0 0 8px 0; padding: 0; height: 35px; }

.contentslide .opacitylayer{ /*Do not edit this rule unless you're familiar with CSS opacity behavior*/
width: 100%;
height: 100%;
-moz-opacity: 1;
opacity: 1;

}

.contentslide .contentdiv{ display: none; font-style:italic; margin:0; padding:0; color: #666; font-size:14px; font-weight:bold;}

.pagination{
display:none;
visibility:hidden;
width: 416px; /*Width of pagination DIV. To equal that of Content Slider's width, take into account the later's left/right paddings!*/
text-align: right;
background-color: navy;
border: 10px solid navy;
border-width: 0 10px; /*Left/ right border width of pagination DIV.*/
padding: 0 0 4px 0;
}

* html .pagination{ /*Simplified box model hack to get IE5 to display width equal to that of Content Slider's*/
width: 400px; /*IE5 width*/
w\idth: 416px; /*IE6 width*/
}

.pagination a{
padding: 0 5px;
text-decoration: none; 
color: #2e6ab1;
background-color: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}