/* @override 
	http://ohthatsite.com/subsections/clients/APAO/css/extracted-style3.css
	http://www.apao.ca/css/styles2010.css
*/

/*CSS errors don't affect SEO, thus the2 that show up when this page is validated will and can be safely ignored. Unless client approves the time that it will take to fix. These errors are related to IE 6 -*/ 
* { 
padding: 0; 
margin: 0; 

} 

body { 
font : 85% "Arial", Helvetica, sans-serif;
background: #fff;
margin: 0;
padding: 0;
/*font: normal 1em Georgia, "Times New Roman", Times, serif; 

font-size: 1em; 
background-image: url(../images/layoutHeader.jpg); 
background-repeat: repeat-x;*/ 
} 

p {
/*color: #7a7a7a;*/
color: #666666;
}
a {
list-style: none;
text-decoration: underline;

}
h2, h4 {
/*margin: 0 0 10px;*/
/*padding: 0 0 5px;*/
padding-bottom: 4px;
padding-top: 0;
padding-right: 15px;
padding-left: 0;

}
h1 {
padding-bottom:  18px;
color: #0066cc;
}
h3 {
color: #8cc63f;
}
h5 {
font-size: .8em;
font-weight: bold;
color: #666666;
}
ul {
padding-left: 0;
/*padding-bottom: 10px;
list-style-type: disc;
list-style-position: outside;*/
list-style: none;
/*list-style-image: url(../images/bullet2.jpg);*/

}

li {
/*list-style: none;*/
/*text-decoration: none;*/
color: #666666;
/*line-height: 1.4em;*/
} 

/*h1 {
color:#7a7a7a;
padding-bottom: 8px;
}*/

#wrapper { 
margin: 0 auto;
padding: 10px; 
width: 1024px; 
/*The following I think fixes an ie issue that was not even present*/
min-height: 100%;
height: auto !important;
/*height: 100%;*/
z-index: 100;
    
} 


#header { 
/*color : #333;*/ 
width: 1024px; 
height: 135px;
padding: 0; 
margin: 0; 
clear: left;
float: left;
position: relative;
z-index: 26000;
background: url(http://www.apao.ca/images2010/midHeaderBackground.jpg) no-repeat 0 bottom;
/*border-bottom-style: solid;*/
border-bottom: 4px solid #6699cc;
}
 
#navigation {
width: 1024px; /*Play with this to try and bring in the search*/ 
height: 32px;
clear: both;
float: left;
position: relative;
padding-top: 10px; /*make #search the same in padding*/ 
z-index: 20000;
background: url(http://www.apao.ca/images2010/headerNavBack.jpg) no-repeat;
border-bottom: 4px solid #6699cc;
list-style: none;
letter-spacing: .1em; /*Jacquie may not like this*/
} 
#navigation-2 {
z-index: 20009;
}
/******************************************************************************************DROP DOWN MENUS ****************************************/
/* 
	LEVEL ONE
*/

ul.dropdown                         { position: relative; top: -10px; list-style: none; z-index: 21000; text-transform: uppercase;
	/*background-image: url(../images/headerNavBack.jpg);*/
/*height: 250px;*/
}
/*ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }*/
ul.dropdown li                      { font-weight: normal; float: left;  background: none; padding-top: 15px;z-index: 23020;}
/*ul.dropdown a:hover		            { color: #000; }*/
ul.dropdown a:hover		            { color: #fff; }
ul.dropdown a:active                { color: #ffa500; }

ul.dropdown li a                    { display: block; padding: 4px 8px; width: auto; z-index: 23010;/*Steph added this, it gets rid of the extra whitespace in links IE bug: http://www.adobe.com/cfusion/communityengine/index.cfm?event=findByTextId&productid=1&textid=EXTRA_WHITESPACE_IN_LIST_LINKS */
/*border-right: 1px solid #333;*/	 								  color: #fff; text-decoration: none;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover                { background: #a3b8d2; color: black; position: relative; }
/*ul.dropdown li.hover a              { color: black; }*/
ul.dropdown li.hover a              { color: #fff; }

/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 250px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 23000;}
ul.dropdown ul li 					{ font-weight: normal; /*text-transform: uppercase;*/ text-transform: lowercase; background: #3b679b; color: #000; 
 z-index: 23020;border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block;  z-index: 192000;} 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }

ul.dropdown li.hover ul,
ul.dropdown li:hover ul { 
visibility: visible; 
 z-index: 23040;}

/*simple translator, same as ul.dropdown*/
.simple-translator {
/*width: auto;
position: relative;
float: left;
display: block;*/
}
.simple-translator ul {
/*padding-left: 20px;*/
}

ul.simple-translator li a {
/*color: #fff;
text-decoration: none;*/
}
ul.simple-translator li.hover, ul.simple-translator li:hover {
/*color: #fff;
text-decoration: underline;*/
}


/*  ************** Start  Search Area **************  */

/*  ************** New Way used in Steph_aboutAgriEnergy_Search  **************  */

#search_box {
  position: absolute;
  top: 46px;
  right: 0;
  z-index: 10000;
  width: 201px;

  background: url(http://www.apao.ca/images2010/search-bg.png) no-repeat left bottom;
}

#search_box #s {
  vertical-align: middle;

  padding: 5px;
  margin: 5px;
  width: 150px;
  
  color: #999;
  background: none;
    
  border: 0;
  outline: none;
}

#search_box #go {
  vertical-align: middle;
}

/*  ************** end of Search Area **************  */
#midDisplay {
/*width: 1024px;
height: 430px; turning this on creates Float Drop.*/
width: 1024px;
padding-top: 15px;
clear: both;
float: left;
z-index: 50;
}

#TwomidDisplay {
/*maybe I don't need this, it could be fine*/
padding-top: 0;
padding-bottom: 0;
margin: 0;
width: 1024px;
clear: both;
float: left;
/*width: 1024px;*/
/*background-color: #5a5b5f;*/
z-index: 350;
}
.TwomidDisplay h2 {
padding: 1px 71px 10px 465px;

}
.TwomidDisplay img {
padding: 0;
float: left;

}
.TwomidDisplay p  {
	/*clear: left;*/
/*float: right;*/
/*padding: 1px 71px 10px 465px;*/
}

.flashelement img {
/*padding: 0;
margin: 0;
border: none;*/
}
#news {
/*clear: both;
float: left;
width: 1024px;
padding-bottom: 10px;
padding-top: 30px;*/
}
.newstext h1 { 
/*text-decoration: none; 
margin: 25px 0 10px 10px;  
color: #7a7a7a; */
} 
.newstext h4 { 
/*font-size: 1em; 
padding-top: 10px; 
padding-left: 15px; 
padding-bottom: 5px; 
margin-left: 0; 
text-decoration: underline; 
color: #ff6600;*/ 
} 
.newstext p {
/*font: normal 1em Georgia, "Times New Roman", Times, serif; font-size: 0.75em; 
padding-left: 5px; 
padding-bottom: 5px; 
margin-left: 10px; 
margin-right: 10px; 
text-align: justify; 
padding-right: 5px; 
color: #153600;*/
 
} 
.newstext a { 
text-decoration: none;
font-weight: bold;
/*float: right; 
margin-right: 15px; 
margin-bottom: 10px;*/ 

color: #ce0f0f; 
} 

#logoholder {
position: absolute;
z-index: 1;
top: 34px;
}

/*========================================================
Columns and their placement.
*/

#allCols {
clear: left;
float: left;
padding: 15px 0 10px;
margin:0;
width: 1024px;
/*height: 200px;*/
height: auto;
/*height: 200px; not important enough to turn on the longest column will determine the total height.
font: normal 1em Georgia, "Times New Roman", Times, serif;  */
display: block;
position: relative;
z-index: 900;
}

.allCols p {
/*font: normal 1em Georgia, "Times New Roman", Times, serif;*/ 

}

#OneCol {
clear: both; /*this seems to work as none too?*/ 
float: left;
padding-top: 10px;
padding-bottom: 10px;
/*margin: 0;*/
width: 1024px;
position: relative;
z-index: 455;
/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFrames.jpg") repeat-y left;*/
color: #666666;

}
.OneCol h2 {
padding-left: 15px;
font-size: 1.2em;
/*font-weight: normal;*/

}
.OneCol p {

padding-left: 465px;
padding-right: 150px;
padding-bottom: 10px;
padding-top: 10px;
}
.OneCol img {
clear: both;
float: left;

}
ul.OneCol {
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);
padding-left: 475px;
padding-right: 150px;
}
.OneCol li {
padding-left: 0;
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);

}
.sectionHeader  {
padding: 0 0 0 465px;
background-color: #fff;
color: #333333;
/*font-size: 1.5em;*/
font-size: 1.2em;
/*float: left;
clear: right;*/
}
.galleryHeader {
text-align: center;
padding-bottom: 20px;
}
/*if stuff starts not working mysteriously, I changed the projectEntry stuff to period for class instead of the # for id*/  
#projectEntry { 
float: left; 
clear: both;
width: 1024px; 
padding: 30px 0 35px; 
/*height: auto;*/
position:relative;
border-bottom-style: solid;
border-bottom-width: 1px;
}
h2.projectEntry {
padding: 0 150px 0 465px;

}

img.projectEntry  { 
/*float: left;
clear: none;*/
border-style: none;
padding-bottom: 30px;
padding-left: 1px;
padding-right: 71px;
}
.projectEntry p  {
padding-left: 465px;
padding-right: 150px;
padding-bottom: 10px;
padding-top: 10px;
}
ul.projectEntry  {
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);
padding-left: 485px;
padding-right: 150px;
}
.projectEntry li {
padding-left: 0;
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);

}
#TwoallCols {
clear: both;
float: left;
padding: 0 0 10px;
margin: 0;
width: 1024px;
/*height: 200px;*/
height: auto;
/*height: 200px; not important enough to turn on the longest column will determine the total height.
font: normal 1em Georgia, "Times New Roman", Times, serif;  
display: block;*/
position: relative;
z-index: 450;
/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFrames.jpg") repeat-y left;*/
}

.TwoallCols p {
/*font: normal 1em Georgia, "Times New Roman", Times, serif;*/ 

}
#colLeft { 

color: #7a7a7a; 
margin: 0 15px 20px 0; 
padding: 0; 
width: 300px; 
/*clear: both;*/
float: left; 
/*display : block; 
position : relative;*/
z-index: 400;
 
} 
.colLefttext p { 

font-size: 1em; 
/*font-weight : lighter;*/ 
padding: 10px 0 20px 0; 
} 
.colLefttext h2, h3, h4  { 
/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;
*/
color: #333; 

}

#colMid { 
/*display : inline;*/ 
margin: 0 15px 20px 0; 
padding: 0; 
width: 300px; 
float: left; 
/*display : block; 
position : relative;*/ 
} 
.colMidtext p { 

font-size: 1em; 
/*font-weight : lighter;*/ 
padding: 10px 0 20px 0; 
} 
.colMidtext h2, h3, h4 { 
color: #333; 
/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
}

#colRight { 
/*display : inline;*/ 

color: #7a7a7a; 
margin: 0 15px 20px 0; 
padding: 0; 
width: 300px;
clear: none; 
float: left;
z-index: 600;

/*display : inline; 
position : relative;*/  
} 
.colRighttext p { 

font-size: 1em; 
/*font-weight : lighter;*/ 
padding: 10px 0 20px 0; 
} 
.colRighttext h2, h3, h4 { 
color: #333; 
font-size: 1.2em;/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
padding-bottom: 2px}

#TwocolLeft { /*was called div#TwocolLeft*/
/*display : inline; 
color: #7a7a7a; */
/*margin: 0 15px 20px 0;*/ 
padding: 0 15px 20px 0; 
width: 450px; 
height: auto;
/*min-height: 1000px;*/
/*clear: both;*/
float: left;
clear: both;
/*display : inline; 
position : relative;*/
z-index: 500;
margin-top: -1px; /*very wary of putting this in, but it is the only way to get rid of the tiny gap between the header and TowcolLefttext*/

/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFrames.jpg") repeat-y left;*/
/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFramesFade.jpg") no-repeat left;*/
} 
.TwocolLefttext a {
text-decoration: none;
font-weight: normal;
color: #ce0f0f; 
}
#TwocolLeft li {
/*list-style: armenian;*/
}

.TwocolLefttext ul {
/*margin: 0 0 0 15px;*/
padding: 0 15px 20px;
list-style-type: decimal;

}
.TwocolLefttext p { 

/*font-size: 1em;*/
/*margin-bottom: 0;
margin-top: 0;
margin-left: 0;*/
padding: 8px 15px 20px 0;
color: #8cc63f;
} 
.TwocolLefttext h2, h4 { 
color: #333; 
/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
}
.TwocolLefttext img {
padding: 0;

}

#TwocolRight { 
display : inline; /*this is an inline element anyways*/ 

color: #7a7a7a; 
/*margin: 0 15px 20px 0;*/ 
padding: 8px 0 0; 
width: 400px;
height: auto;
clear: right; 
float: left;
display : inline; 
position : relative; 
z-index: 650;
 
} 
#TwocolRight2 { 
display : inline; /*this is an inline element anyways*/ 

color: #7a7a7a; 
/*margin: 0 15px 20px 0;*/ 
padding: 8px 0 0; 
width: 400px;
height: auto;
clear: right; 
float: left;
display : inline; 
position : relative; 
z-index: 650;
 
} 
.TwocolRighttext p { 

padding: 5px 0 10px; 
/*min-height: 6em;*/
} 
.TwocolRighttext ul {
list-style: none;
/*list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);*/
padding-left: 20px;
padding-bottom: 20px;

}
.TwocolRighttext li {
padding-left: 0;
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);

}

.TwocolRighttext h2, h4 { 
padding-top: 10px;
color: #333;
font-size: 1.4em;/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
/*border-width: 1px;
border-bottom-style: solid;*/

}
.TwocolRighttext a { 

/*font-size: 1em; 
font-weight : lighter;  */
padding: 2px 0;
color: #0066cc; 
display: inline;
text-decoration: none;
/*list-style: none;
list-style-image: none;*/
/*clear: none;
float: none;*/
}

.TwocolRighttext a:hover { 

text-decoration: underline;

}

a.fakeList  {
text-decoration: underline;
	
}
ul.fakeList  {
padding-top: 10px;
padding-left: 0;
}
.fakeList li {
list-style: none;
list-style-type: none;
list-style-image: none;
}

.allCols img {
padding: 0;
margin: 0;
}

 /*Why is this not working?*/ 
/*.TwocolRighttext:link {text-decoration: none; color: #666;}
.TwocolRighttext:visited {text-decoration: none; color: #666; background-color: #eee;}
a.TwocolRighttext:hover {text-decoration: none; color: #b48944;}
.TwocolRighttext:active {text-decoration: none; color: #231704;}*/



/*==========================================================================================================================
Top section for the Projects Page, because of the photos and page setup, I've inserted a separate div just for the first entry because the images have to be associated with process/product/entrie*/



#TopLeft { /*was called div#TwocolLeft*/
/*display : inline; 
color: #7a7a7a; */
/*margin: 0 15px 20px 0;*/ 
padding: 0 15px 20px 0; 
width: 450px; 
height: auto;
/*min-height: 1000px;*/
/*clear: both;*/
float: left;
clear: both;
/*display : inline; 
position : relative;*/
z-index: 510;
/*margin-top: -1px; very wary of putting this in, but it is the only way to get rid of the tiny gap between the header and TowcolLefttext. Don't seem to require it anymore though */

/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFrames.jpg") repeat-y left;*/
/*background: url("http://www.apao.ca/images2010/leftSideBackgroundFramesFade.jpg") no-repeat left;*/
}

.TopLefttext a {
text-decoration: none;
font-weight: normal;
color: #ce0f0f; 
}
#TopLefttext li {
/*list-style: armenian;*/
}

.TopLefttext ul {
/*margin: 0 0 0 15px;*/
padding: 0 15px 20px;
list-style-type: decimal;

}
.TopLefttext p { 

/*font-size: 1em;*/
/*margin-bottom: 0;
margin-top: 0;
margin-left: 0;*/
padding: 8px 15px 20px 0;
color: #8cc63f;
} 
.TopLefttext h2, h3, h4 { 
color: #333333; 
/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
}
.TopLefttext img {
padding: 0;

}

#TopRight { 
display : inline; 

color: #7a7a7a; 
/*margin: 0 15px 20px 0;*/ 
padding: 8px 0 0; 
width: 400px;
height: auto;
clear: right; 
float: left;
display : inline; 
position : relative; 
z-index: 655;
 
} 
.TopRighttext p { 

padding: 0 0 10px; 
/*min-height: 6em;*/
} 
.TopRighttext ul {
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);
padding-left: 20px;
padding-bottom: 20px;
}
.TopRighttext li {
padding-left: 0;
list-style: none;
list-style-image: url(http://www.apao.ca/images2010/bullet2.jpg);
}

.TopRighttext h2, h3, h4 { 
padding-top: 20px;
color: #8cc63f;
/*font : normal 1.2em Georgia, "Times New Roman", Times, serif;*/ 
}
.TopRighttext a { 

/*font-size: 1em; 
font-weight : lighter;  */
padding: 10px 0;
color: #666; 
display: block;
/*clear: none;
float: none;*/
}
.TopRighttext h1  {
padding: 0;
/*color: #333333;
font-size: 1.5em;*/
}
/*=============================================================*/


blockquote.style1 {
/*font: 14px/20px italic Times, serif;*/
font-size: 1.5em;
font-weight: bold;
font-style: italic;
line-height: 1.3em;
padding: 8px;
color: #8cc63f;
/*background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;*/
/*margin: 5px;*/
background-image: url(http://www.apao.ca/images2010/openquote1.jpg);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
/*position: relative; Not originally on*/
background-image: url(http://www.apao.ca/images2010/closequote1.jpg);
background-repeat: no-repeat;
background-position: bottom right;
width: 400px;
}


/*============================================
footer ============*/
 
#footer { 
width: 1024px;
min-height: 100%;
height: auto !important; 
clear: both; 
float: left;
color: #336600; 
background-color: #8cc63f;
/*border-bottom : 15px solid #c9c3b7;*/ 
padding : 5px 0 5px 5px;
line-height: 1em;
/*border-top : 1px dotted #c9c3b7;*/ 
/*display: inline;
position: relative;*/
font-size: .8em;
}
#leftcontent { 
clear: none;
float: left; 
text-align: left; 
width: 50%;

} 
#rightcontent { 
clear: none;
float: right; 
text-align: right; 
width: 45%; 
/*min-height: 100%;
height: auto !important;*/
display: inline;
position: relative;
z-index: 18;

} 
.rightcontent {
/*display: inline;
position: relative;*/
}
.footerMenu {
padding-right: 10px;

/*color: #fff;*/
font-size: .8em; 
display: inline;/*display: inline;
position: relative;*/
/*padding-top: 5px;
padding-bottom: 5px;*/
}
/*.footer  {
font-size: .9em;
}*/
.footerMenu a { 
color: #336600; 
text-decoration: none;
} 
.footer ul {
padding: 0;
}
.footerMenu ul {
padding-left: 0;
/*display: block;*/
/*position: relative;*/ 
text-align: left; 
/*margin-top: 0;*/ 
} 
.footerMenu li { 
padding: 0 8px 0 0; 
font-weight: normal; 
line-height: 1em;
letter-spacing: .1em;
display: inline;
position: relative;  /*don't need?*/ 
} 
.footerMenu li a { 

/*display: inline;
position: relative;*/
text-decoration: none; 
/*font-size: 1em;*/ 
} 
.footerMenu li a:hover { 
text-decoration: underline; 
/*font-weight: bold;*/ 
/*display: inline;
position: relative;*/
}

.imgAd {
width: auto;
float: right;
clear: both;
margin: 5px;
padding: 5px 5px 5px 10px;

}
a.imgAdSmall {
padding: 0;
}
.imgAdSmall {
width: auto;
float: right;
margin: 5px;
padding: 10px 10px 35px;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}

.thumbnailImages {
padding: 15px 15px 15px 15px;
/*background-color: #fff;*/
/*border: 1px solid #2a2a2a;*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.thumbnailImages img {
border: none;
}
/*Firefox Win and IE have stupid blue borders on linked images.*/
img
{  border-style: none;
}
/* Use this version to remove only from images links.
a img { 
    border: 0; 
}*/

/*Search and Results page stuff.*/

.paginate {
/*font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;*/
font-size: .8em;
font-weight: normal;
letter-spacing:	.1em;
padding:10px 6px 10px 4px;
margin: 0;
background-color: transparent;
}

.pagecount {
/*font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;*/
font-size: .8em;
color: #666;
font-weight: normal;
background-color: transparent;
}

.tablePad {
padding: 3px 3px 5px 3px;
width:400px
}

.table {
padding: 3px 3px 5px 3px;
width: 400px;
/*text-align: left;*/
font-size: .9em;

}
.tr {
text-align: center;

}
.th {
text-align: left;
padding-bottom: 5px;
}
/*.th {
padding-bottom: 5px;
}*/
.td {
text-align: left;
}

/*th.center {
text-align: center;
}*/
tr.even {
text-align: left;
background-color: #fff;
}
tr.odd {
text-align: left;
background-color:#d4fe9b;
}
.center {
text-align: center;
padding-top: 5px;
}

.left {
text-align: left;
}
.resultRowOne {
 /*font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;*/
font-size: 1em;
/*color: #000;*/
padding: 6px 6px 6px 0;
/*background-color: #DADADD;*/
}

.resultRowTwo {
 /*font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;*/
font-size: 1em;
/*color: #000;*/
padding: 6px 6px 6px 0;
/*background-color: #eee;*/
}

.resultRowOne a {
text-decoration: none;
}
.resultRowTwo a {
text-decoration: none;
}

.resultHead {
 /*font-family:		Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;*/
font-size: 1.2em;
font-weight: bold;
letter-spacing: .1em;
padding: 8px 0 8px 0;
/*background-color: transparent;*/
color: #8cc63f;
}
.showHideList {
display: none; 
/*border-color: purple;*/ 
background-color: #ccc; 
/*border-style: dashed; 
border-width: 3px;*/ 
color: #000000; 
font-weight: normal; 
padding: 20px; 
margin: 20px;
}