/*
 * Style File: avsgf_ukLyout01.css
 *
 * Sets in detail the css property  html tags
 * for the 
*/

body {
	background-color:#FFFFFF;    
}
/* Set properties for all hs's tags */
h1, h2, h3, h4, h5 {
  color: #000000;
  font-family:Arial, sans-serif, Verdana, Tahoma;
  font-weight:bold;
  text-align:center;
  margin:0.1em 0em;
  Padding:0em;
  position:relative;
  top:0px;
}

/* */
h1 {
  font-size:1.8em;
}
h2 {
  font-size:1.5em;
}
h3 {
  font-size:1.1em;
}
h4 {
  font-size:0.9em;
}

h5 {
  font-size:0.7em;
}

/* Redefined h3 for page title */
h3.syb_pageTittle01 {
  text-align:justify;
}

/* Redefined h4 for paragraph title */
h4.syb_paraTittle01, h5.syb_paraTittle01 {
  text-align:left;
  margin:0.4em 0em;
}

/* Redefined h4 for paragraph title no. 2 left aligh */
h4.syb_paraTittle02, h5.syb_paraTittle02 {
  text-align:left;
  margin:0.4em 0em;
}

/* Redefined h3 for normal */
h3.syb_normal01 h4.syb_normal01{
  text-align:center;
}

/* Redefined h3 and h4 for paragraph title color */
h3.syb_parTCol01, h4.syb_parTCol01 {
  color:#FF0033;
  text-align:left;
  margin:0.4em 0em;
}

/* Redefined h4 for paragraph title no. 2 left aligh */
h4.syb_parTCol02, h5.syb_parTCol02 {
  font-style:italic;
  color:#FF0033;
  text-align:left;
  margin:0.4em 0em;  
}

a:hover {
	color:#FF0000;  /* Need the font color Here */	
}

/* To remind user that page had been visited. */
/* It works for ms IE 7, but not in firefox 2.0.0.4 */
a:visited {
	color:#0000FF; 
}

/* The Logo is included as a css background image property */
#syb_imageLogo {
	position:relative;
	top:16px;
	left:30px;
  margin:0px;
  padding:0px;
  width:156px;
  height:133px;
  background-image:url("../images/AsbMasklogo.jpg");
	background-repeat:no-repeat;
  background-position:top center;

}

/* Inserting a partition line using an image as background. */


img.syb_imgFloat01 { 
  float:left; 
  padding:6px 20px 0px 0px;
}



/* Display an image in the webpage. */
img.syb_lungsDiag01 {
  margin:10px 0px; 
  padding:0px;
  position: relative;
  left:25%;
  top: 0px;
  display:inline;
}

img.syb_lungsDiag02 {
  display:none;
}
/* */
#syb_initMsg {
  position: relative;
  left:0px;
  top: 0px;
  text-align:center;
  line-height:1.8em;
  height:auto;
  width:100%;
  border:0px dashed #8DCB41;
  font-family:Arial, sans-serif, Helvetica;
  font-size: 1em;
}

/* List (UL tag) with blue dots for the home page */
.syb_textList01 {
  font-family:Verdana, 'Lucida Grande', Arial, Tahoma, sans-serif,'Courier New';
  font-weight:normal;
  font-size:0.8em;
  letter-spacing:0em;
  line-height:1.2em;
  text-align:justify;
  list-style:disc url("../img/redDot_5px.jpg") outside;
  position:relative;
  left:0.8em;
  top:10px;
  margin:0em;
  padding:0em;
}

/* IMPORTANT: For MS IE ver 7 (at least). We need to set the left
 * margin to 1.8em otherwise our blue dot will no be shown.
 * We set bottom marging to 1.2em to give more space between list items 
 */
.syb_textList01 li {
  padding:0px;
  margin:0em 0em 0.8em 1.8em;
  display:list-item;
	white-space:normal;
	word-spacing:normal;
}

/* It Formats a page content text by preserving
 * the white spases with 'white-space:pre;' and
 * places text in the middle. For poems
 */
p.syb_preservSpaceMid {
  height:auto;
  width:100%;
  border:0px dashed #8DCB41;
  font-family:Verdana, 'Lucida Grande', Arial, Tahoma, sans-serif, Helvetica,'Courier New';
  font-size:0.8em;
  font-weight:normal;
  letter-spacing:0em;
  line-height:1.8em;
  white-space:pre;
  text-align:center;
  position: relative;
  left:0px;
  top:0px;
}

span.syb_italicText01 {
  font-style:italic;
  font-weight:normal
}



/* It Formats a paragraph content. The 1st line is
 * indented with white spases by 'text-indent:1.5em;'
 * Provides a blank line after at the end of paragraph
 * by using  margin-bottom
 */
p.syb_parText01 {
  height:auto;
  width:100%;
  border:0px dashed #8DCB41;
  font-family:Verdana, 'Lucida Grande', Arial, Tahoma, sans-serif, Helvetica,'Courier New';
  font-size:0.8em;
  font-weight:normal;
  font-style:normal;
  letter-spacing:0em;
  line-height:1.6em;
  white-space:normal;
  text-align:left;

    margin:0px;
  padding:0px;
  margin-bottom:0.7em; 
  position:relative;
  left:0px;
  top:0px;
}


/*
 * We require to place an image on the left side and some text in the right side 
 * . i.e. side by side. Like a 2 column table with 1 row.
 *
 * The div tag that uses "syb_textAndImg" must wrap the syb_leftText0 tag. e.g.
 * 
 * <!-- <div id="syb_textAndImg02"> -->
 *   <img alt="..." src="img/someImage.jpg" />
 *   <!-- <div class="syb_rightText02"> -->
 *      ...
 *      ...
 *   <!-- </div> -->
 * <!-- </div> -->
 * 
 * This id selector adds the image as a backgoumd to the 
 * right side of the div tag that uses this selctor 
 */
div.syb_textAndImg02 {
  border:0px solid purple;
  height:auto;
  position:relative;
  left:0px;
  top:0px;
	background-image:none;  /* Img is added in html file. */
	background-repeat:no-repeat;
  background-position:top right;
}

/* This class selector places the text in the right side */
div.syb_rightText02 {
	border:0px solid red;
	width:68%;
	height:auto;
  position:absolute;
  left:190px;
  top:20px;
}

/* General Table properties */     
div.syb_addTbl0l{
  background:#FFFFFF;          
  border:0px ;
  width:100%;
  height:auto;
  position:relative;
  left:0px;
  top:10px;
  padding:0px;
  margin:0px;
}

td.syb_tblCol_01, td.syb_tblCol_02,  {        
  color:#000000;
  width:48%;
  font-family:sans-serif, Verdana, Tahoma, Arial;
  font-weight:normal;
  font-size:0.6em;
  line-height:1.2em;
  padding:0px;
  margin:0px;
  text-align:left;
}

td.syb_tblCol_01 {
 border:0px solid red;
 padding:10px 0px 10px 16px;
}

td.syb_tblCol_02 {
 border:0px solid yellow;
 padding:10px 0px 10px 16px;
}      


span.syb_colHeading {        
  color: #000000;
  font-weight:bold;        
  margin:0px;
  Padding:0px;
}

table.stats 
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #999;
width: 280px;
background-color: #fff;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.stats td 
{background-color: #fff;
color: #000;
padding: 4px;
text-align: left;
border: 1px #999 solid;}

table.stats td.hed
{background-color: #fff;
color: #666;
padding: 4px;
text-align: center;
border-bottom: 2px #999 solid;
font-size: 12px;
font-weight: bold;}



table.pneumo 
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #999;
width: 575px;
background-color: #fff;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.pneumo td 
{background-color: #fff;
color: #000;
padding: 4px;
text-align: left;
border: 1px #999 solid;}

table.pneumo td.hed
{background-color: #fff;
color: #666;
padding: 4px;
text-align: center;
border-bottom: 2px #999 solid;
font-size: 12px;
font-weight: bold;}


table.meso 
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #999;
width: 400px;
background-color: #fff;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table.meso td 
{background-color: #fff;
color: #000;
padding: 4px;
text-align: left;
border: 1px #999 solid;}

table.meso td.hed
{background-color: #fff;
color: #666;
padding: 4px;
text-align: center;
border-bottom: 2px #999 solid;
font-size: 12px;
font-weight: bold;}

/* IMPORTANT: For Firefox ver. 2.0.04 (at least). We need to set the list
 * image and type property to none; to avoid that list items (li) display
 * a marker/bullet. In MS IE 7 these properties are set to none by default.
 */
ul {
list-style-image:none; list-style-type:none;
}


ul.syb_linksList {
  font-family:Arial, sans-serif, Verdana, Tahoma; font-weight:bold;
  font-size:1.0em;
  color:#000000;
  text-align:center; 
  line-height:1.6em;
}