/*******************************************************************
 * Name:			   CssPageLayout.css
 * Description:   stylesheet that contains styles for the main page
 *                layout and general layout settings, i.e.:
 *
 *	   				1. The style-redefinition of HTML elements 
 *			   		2. main layout table of the site (positioning)
 *                3. media dependend styles (Print/NoPrint)
 *
 * Notes:		   Do not set font-sizes, e.g here; use CssFontSize.css
 *					   instead 
 *
 * *****************************************************************
 * Current site:	THIS IS THE DEFAULT FOR PMPS SITES
 *******************************************************************/ 




/**********************************************
 * HTML ELEMENT STYLES (FOR ENTIRE SITE)
 **********************************************
 * Notes: 
 * - Do not set text sizes here!  
 ***********************************************/
html, body, table,td,div,input
{		
	font-family: Verdana, Arial, Helvetica, sans-serif;					
	vertical-align: top;    /* IMPORTANT: default vertical allignment is TOP */ 
}
td 
{   
   padding: 1px 1px 1px 1px;
   color: #000000;       
} 

img
{
	border-style:none ; /* disable border around images (also for hyperlink images) */
}



/**********************************************
 * HYPERLINK STYLES  
 **********************************************
 * Notes: 
 * - do not forget to override the pseudo classes 
 *  if applying different class to hyperlink
 ***********************************************/

a, a:visited, a:active  {    
  text-decoration: none;
}
a:hover  {
  text-decoration: underline;
}

/**********************************************
 * APPEARANCE STYLES 
 **********************************************
 * Notes: 
 * - these elements define appearance of html
 *   tags, for instance a drop shadow
 ***********************************************/

.Blur {
   background: transparent url(images/shadow1.png);
   /* background-color: #ccc; /*shadow color*/
	color: inherit;
	margin-left: 4px;
	margin-top: 4px;
}

.Shadow,
.Content{
	position: relative;
	bottom: 2px;
	right: 2px;
}

.Shadow{
   background: transparent url(images/shadow2.png);
	/* background-color: #666; /*shadow color*/
	color: inherit;
}

.Content{
	background-color: #fff; /*background color of content*/
	color: #000; /*text color of content*/
	border: 1px solid #000; /*border color*/
	/* padding: .5em 2ex; */
}

/**********************************************
 * SCREEN SIZE - OUTERMOST CONTAINERS: 
 **********************************************
 * Notes: 
 * - these elements define maximum size, centering,
 *   margins, etc of the entire page
 ***********************************************/

BODY 
{ 
   margin: 0px 0px 0px 0px; 
   padding: 0px 0px 0px 0px;
/*   height: 100%;  */
}

#Screen 
{
   vertical-align:middle;
}

#Canvas  
{   
   /* DETERMINES PAGE SIZE */
   width : 980px;
   margin-left: auto;   /* center's div */
   margin-right: auto;
   margin-top: 5px;
   overflow:visible;
}


/**********************************************
 * PAGE SECTIONS
 **********************************************
 * Notes: 
 * - use these for positioning sections and
 *   setting section backgrounds
 ***********************************************/

#Section_Left {
  /* position:relative; 
  top: 100px;*/
  height: 350px;  
  width: 210px;
  float:left;
  margin: 100px 0px 0px 0px;
}
   #Section_Left_Top {
      margin: 0px 0px 0px 15px;
   }
      #Section_Left_Top_Menu {
         height: 300px;      
         line-height: 13px;
      }
      #Section_Left_Top_Logo {
         margin-top: 15px;
         margin-bottom: 20px;
      }
      
   #Section_Left_Bottom {
       margin: 0px 0px 0px 0px;
   }
   #Section_Left_Bottom_Logo {
      /*left: 10px;*/
      margin-left: 14px;
   }
   
#Section_Right {
  float:left;

  min-height: 550px;

  height:auto !important; 
  height:100%; 
 
  /* height: 550px; */
  width: 720px;
  margin: 0px 0px 0px 0px;
}

#Section_Right_TopBar {
  position: relative;
  display: block;
  background-color: #8DA025;
  background-image: url(images/PensioenNetwerken-HumanShapes-PMPS.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 230px; 
}
   
   #Section_Right_TopBar_WelcomeTextContainer {
      position: absolute;
      display: block;
      top: 100%;
   }
   
   #Section_Right_TopBar_WelcomeText {
      font-family: Arial;
      color: White;   
      display: block;                           
      margin-left: 35px;
      position: relative;
      top: -100%;
      /*background-color: Lime;      
      /*padding-top: 205px;*/
   }


#Section_Right_Content {
   position: relative;
   width: 655px;
   
   min-height: 310px;
   height:auto !important;
   
   padding: 5px 30px 5px 30px;
}

/*********** (end section definition) *********/

.DftAjaxProgressTxtCtnr {
   display: block;
   background-color: #8da025;
   color: white;
   height: 28px;
   width: 150px;
   border: solid 1px black;
   text-align: center;
   vertical-align: middle;
   padding-top: 4px;
   font-weight: bold;
   font-family: Arial;
   font-size: 12px;
}
.DftAjaxProgressTxtImg {
   vertical-align: middle;
   margin-right: 4px;
}


/**********************************************
 *
 * PRINTER/SCREEN DEPENDEND CLASSES
 * 
 **********************************************/
/* USAGE:
   Assign the NoPrint class to all elements (or their container) that should 
   not be displayed if the page is printed and assign PrintOnly to
   those that should only be visible on the printer
*/
@media print 
{
  .NoPrint 
  {
	display:none;
  }
  .PrintOnly
  {
    /* nothing */
  }
}
@media screen 
{
  .NoPrint 
  { 
	/* nothing! */
  }
  .PrintOnly
  { 
	display:none;
  }
}