/* ********************************************************************/
/* CCS stylesheet for all media, except print, site: www.thepbgrp.com */
/* ********************************************************************/


/* Overall Layout: this part defines the placement and visibility of layer elements in the page; do not modify unless you know what you do */
/* *************************************************************************************************************************************** */

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 1em: default font size of most win browsers is 16px */
/* using 'relative' em and percentages instead of 'fixed' px is done for accessibility reasons so users can change the font-size in the browser if they wish */
body {
  background-color: #ffffff; /* background color of the screen */
  color: #000000;
  text-align: center; /*  used to center in IE */
  margin: 0;
  padding: 0;
  font: 1em/1.2 Verdana, Arial, Helvetica, sans-serif; /* this can be changed if you'd like to change the font basics (base size and line-height, family) */
  min-width: 750px;
  height: 100%;
}

/* containing div */
div#container {
  position: relative; /* gain stacking context for absolutely placed element */
  width: 750px;
  margin: 20px auto 0 auto; /* center for compliant browsers, and top margin */
  z-index: 1;
  padding: 4px;
  border: 1px solid #ce1821;
  text-align: left;
  display: block;
}

/* HEADER */

div#header-screen { /* for screen output */
  position: relative;
  width: 750px;
	height: 95px;
	background: url(../images/header.jpg);
	color: #000000;
	z-index: 2;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
  display: block;
}

div#header-print { /* hide print output */
  display: none;
}

div#header-logo {
  position: absolute;
	top: 0px;
	left: 10px;
	width: 125px;
	height: 95px;
	z-index: 3;
	background: transparent;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
  display: block;
}

div#german-flag {
  position: absolute;
	top: 12px;
	right: 10px;
	width: 26px;
	height: 20px;
	z-index: 3;
	background: transparent;
	margin: 0;
	padding: 0;
	border: 0;
  display: block;
}

div#japanese-flag {
  position: absolute;
	top: 37px;
	right: 10px;
	width: 26px;
	height: 20px;
	z-index: 3;
	background: transparent;
	margin: 0;
	padding: 0;
	border: 0;
  display: block;
}

div#french-flag {
  position: absolute;
	top: 62px;
	right: 10px;
	width: 26px;
	height: 20px;
	z-index: 3;
	background: transparent;
	margin: 0;
	padding: 0;
	border: 0;
  display: block;
}

/* SITE NAVIGATION */

div#navigation {
  position: relative;
	width: 750px;
	font-size: 75%;
	height: 17px;
	z-index: 4;
	background: #033b8e;
	margin: 0;
	padding: 0;
	border: 0;
  display: block;
}

/* CSS for drop-down menus
   Approach taken from http://www.htmldog.com/articles/suckerfish/dropdowns/ by Patrick Griffiths and Dan Webb
*/
ul#nav { /* main list */
	font-size: 87.5%;
	padding: 0;
	margin: 0 0 0 30px; /* In case a new main navigation category or link is added, adjust to "margin: 0 0 0 30px;" or whatever value looks best on display */
	list-style: none;
	line-height: 1.6em;
	color: #ffffff;
	text-align: center;
}

ul#nav ul { /* all lists */
	font-size: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1.6em;
	color: #ffffff;
}

ul#nav a {
	display: block;
	width: 140px;
}

ul#nav li { /* all list items */
	float: left;
	width: 140px; /* width needed or else Opera goes nuts */
}

ul#nav li ul { /* second-level lists */
	position: absolute;
	background: #ffffff;
  border: 1px solid #ce1821;
	border-top: 3px solid #ce1821;
	width: 140px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

ul#nav li:hover ul { /* lists nested under hovered list items */
  left: auto;
}

ul#nav li.sfhover ul { /* lists nested under hovered list items (for IE) */
	left: auto;
	margin-left: -70px;
}

#nav li ul li:hover, #nav li ul li.sfhover { /* change background color on hover in drop down */
	background: #033b8e;
}

ul#nav li ul li { /* list items in drop down */
	line-height: 1.8em;
	border: 0;
}

/* End of Drop Down CSS */

div#nav-decoration-line { /* the 'decoration' line under the navigation, screen output */
  clear: both;
	position: relative;
	width: 750px;
	height: 3px;
	font-size: 3px; /* Firefox and Opera won't take a layer height that is less than font-size and line-height, so we need to adjust this here */ 
	line-height: 3px;
	z-index: 2;
	background: transparent;
	margin: 0;
	padding: 0;
	border: 0;
  display: block;
}

div#nav-decoration-line-print { /* hide print output */
  display: none;
}

/* CONTENT */

div#content {
	position: relative;
  float: left;
	width: 750px;
	min-height: 480px;
	height: auto;
	background: #ffffff;
	color: #000000;
	z-index: 3;
	margin: 0;
	padding: 0;
	border: 0;	
  display: block;
}

* html div#content {height: 480px;} /* min-height workaround for IE */

div#content-offset { /* adjusting the position of the content text */
  padding: 20px 30px 20px 250px;
	z-index: 3;
	background: transparent;
	display: block;
}


/* 'true' two columns for index.html */
div#left-column {
	position: relative;
	float: left;
	width: 190px;
	margin: 0;
	padding: 20px; /* IE 5 and 5.5 have a 'box model bug' which causes the content to be shifted; it's possible to fix, but the fix may break future versions of other browsers, so we live with it and let the display for these browsers gracefully degrade */
	border: 0;
	z-index: 3;
	background: transparent;
  display: block;
}

div#right-column {
	position: relative;
	float: left;
	width: 470px;
	margin: 0;
	padding-top: 20px; /* IE 5 and 5.5 have a 'box model bug' which causes the content to be shifted; it's possible to fix, but the fix may break future versions of other browsers, so we live with it and let the display for these browsers gracefully degrade */
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 20px;
	border: 0;
	z-index: 3;
	background: transparent;
  display: block;
}

/* COPYRIGHT */

div#copyright { /* the red block at the bottom of the page, after the main content */
  clear: both;
	position: relative;
	width: 750px;
	min-height: 1.4em;
	background: #ce1821;
	color: #ffffff;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;	
  display: block;
}

div#copyright-links { /* links in the copyright layer */
  display: block;
}

/* FOOTER */

div#footer { /* this is the very last line, on black background: either empty for layout reasons, or the link to the webdesigner on the Homepage */
	position: relative;
	width: 750px;
	height: 1.4em;
	background: #ffffff;
	color: #000000;
	z-index: 2;
	margin: 0 auto 0 auto;
	text-align: center;
	padding: 8px 0 0 0;
	border: 0;	
  display: block;
}

/* Element Specific Layout: this part defines the layout of the HTML tags; can be changed */
/* ************************************************************************************** */

/* Tag specific and classes */

span.hide-print { /* prevent specific content from printing */
  visibility: visible;
}

h1 { /* Header 1 Level */
	font-weight: bold;
	font-size: 100%;
	text-align: left;
	margin: 20px 0 20px 0;
	padding: 0;
  color: #ce1821;
}

h2 { /* Header 2 Level */
	font-size: 87.5%;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	margin: 15px 0 0 0;
	padding: 0;
	color: #033b8e;
}

h3 { /* Header 3 Level */
	font-size: 75%;
	font-weight: normal;
	text-align: left;
	font-style: italic;
	margin: 10px 0 0 0;
	padding: 0;
}

p { /* Standard for paragraphs */
	font-size: 75%;
	margin: 10px 0 0 0;
	padding: 0;
	line-height: 1.4em;
	text-align: justify;
}

p.paragraph-copyright { /* Class for paragraph in the 'Copyright' layer */
	font-size: 62.5%;
	font-weight: bold;
	line-height: 1.4em;
	text-align: center;
	color: #ffffff;
	margin: 5px 0 5px 0;
	padding: 0;
}

p.paragraph-footer { /* Class for paragraph in the 'Footer' layer */
	font-size: 62.5%;
	font-weight: bold;
	line-height: 1.4em;
	text-align: center;
	color: #000000;
	margin: 0;
}

table {
  font-size: 75%;
	border: 1px solid #000000;
	border-collapse: collapse;
	margin: 20px 0 0 0;
	padding: 0;
	color: #000000;
}

th {
  font-weight: bold;
	vertical-align: middle;
	text-align: center;
	margin: 0;
	padding: 5px;
	border: 1px solid #000000;
}

td {
  font-weight: normal;
	vertical-align: middle;
	text-align: center;
	margin: 0;
	padding: 5px;
	border: 1px solid #000000;
}

td.gray {
  font-weight: bold;
	vertical-align: middle;
	text-align: left;
	margin: 0;
	padding: 5px;
	border: 1px solid #000000;
	background: #d9d9d9;
}

ol { /* Ordered Lists */
  font-size: 75%;
	line-height: 1.4em;
	margin: 10px 0 0 40px;
	padding: 0;
}

ol * ol {
  font-size: 100%;
  margin: 0 0 0 40px;
}

ul { /* Unordered Lists (depending on what you add here, the UL definitions in the navigation drop down may need to be adjusted) */
  font-size: 75%;
	line-height: 1.4em;
	margin: 10px 0 0 40px;
	padding: 0;
}

ul * ul {
  font-size: 100%;
  margin: 0 0 0 40px;
}

div#content li {margin-top: 10px;}

div#content ul {margin-left: 25px; margin-top: 25px;}

img { /* Images */
  margin: 0;
	padding: 0;
	border: 0;
}

img.header-print { /* Hide the print logo */
	display: none;
}

em { /* Emphasized Text; 'emphasis' is logical and visual, unlike 'bold', which is visual only */
  font-style: normal;
	font-weight: bold;
	color: #033b8e;
}


/* Contact Forms */
form {
  font-size: 75%;
  margin-top: 15px;
}

input, textarea, select {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

fieldset {
  border: 0;
  margin: 15px 0 0 0;
  padding: 0;
	line-height: 2.5em;
}

fieldset label {
  width: 11em;
  float: left;
  text-align: right;
  margin: -2px 1em 0 0;
  clear: both;
  color: #000000;
}

.input-box {
  margin: 2px 3px -2px 3px;
  color: #000000;
	padding: 0;
}

input.submit-button {
  width: 100px;
  margin: 20px 0 0 20px;
  font-weight: bold;
  color: #ffffff;
  background: #ce1821;
  border: 2px #efefef outset;
}

/* Client Login in Resources section */ 
div#login {
 position: absolute;
 top: 30px;
 left: 20px;
 width: 200px;
 background: transparent;
 z-index: 3;
}

div#login fieldset {
  line-height: 2em;
	margin-top: 0px;
}
div#login label {
  width: 6em;
  float: left;
  text-align: right;
  margin: -1px 1em 0 0;
  clear: both;
  color: #000000;
	font-weight: bold;
}

div#login input.submit-button {
  width: 70px;
}

/* Links general */
a:link {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #ce1821;}
a:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #bf5f6a;}
a:hover {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: underline; background: transparent; color: #ce1821;}
a:active {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: underline; background: transparent; color: #ce1821;}

/* Links in main navigation */
a.link-mainnav:link {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ffffff;}
a.link-mainnav:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #cccccc;}
a.link-mainnav:hover {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}
a.link-mainnav:active {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}

/* Highlighting links in main navigation */
a.link-mainnav.highlight:link {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}
a.link-mainnav.highlight:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}

/* Links in drop downs */
a.link-dropdown:link { font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #e5e9f4; color: #000000;}
a.link-dropdown:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #e5e9f4; color: #333333;}
a.link-dropdown:hover {font-weight: bold; font-style: normal;  letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}
a.link-dropdown:active {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #033b8e; color: #ef9c29;}

/* Links in Copyright */
a.link-copyright:link {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ce1821; color: #ffffff;}
a.link-copyright:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ce1821; color: #cccccc;}
a.link-copyright:hover {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ce1821; color: #ef9c29;}
a.link-copyright:active {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ce1821; color: #ef9c29;}

/* Highlighting links in copyright (if they're navigation) */
a.link-copyright.highlight:link {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #ef9c29;}
a.link-copyright.highlight:visited {font-weight: bold; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #ef9c29;}

/* Links in Footer */
a.link-footer:link {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ffffff; color: #000000;}
a.link-footer:visited {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ffffff; color: #000000;}
a.link-footer:hover {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ffffff; color: #333333;}
a.link-footer:active {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: #ffffff; color: #333333;}

/* Links on images */
a.image:link {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #000000;}
a.image:visited {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background: transparent; color: #000000;}
a.image:hover {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background-color: transparent; color: #000000;}
a.image:active {font-weight: normal; font-style: normal; letter-spacing: 0; text-decoration: none; background-color: transparent; color: #000000;}

a img { /* In case an image is used as a link, remove the border around it */
  border: 0;
  margin: 0;
  padding: 0;
	background: transparent;
}

 /* Some general classes which replace the corresponding HTML tags */
.bold {font-weight: bold;}
.italic {font-style: italic;}
.bolditalic {font-weight: bold; font-style: italic;}
.underline {text-decoration: underline;}
.normal {font-weight: normal; font-style: normal; text-decoration: none;}

.justify {text-align: justify;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}