html, body {margin: 0; padding: 0; border: 0;}

body {
color: #000; 
background: #EEE; 
font-family: "times new roman", serif; 
font-size: 14px; 
text-align: center;
margin: 30px 0;
}

p  {margin: 12px 0; padding: 0 6px;}

h1 {
font-family: AvantGarde, "URW Gothic L", Verdana, Arial, Helvetica, sans-serif; 
font-size:  45px;
color: #FFFFFF; 
text-align: left;
margin: 0px;
padding: 0px;
}

h2 {
font-size: 12px; 
padding: 2px 0px 4px 8px; 
margin: 0; 
margin-bottom: 8px;
background: #394EBA;
color: #FFFFFF;
}

h2.first {
background-image: url(images/lefthead_first.png);
}

h3 {
font-size: 18px; 
margin: 20px 10px 5px;
}

h4 {
font-size = 12px;
font-weight: normal;
margin-left: 1px;
margin-right: 4px;
margin-bottom: 0px;
margin-top: 0px;
padding: 2px;
}

.clear { clear: both; }

a {text-decoration: underline; font-weight: bold; color: #000;}

.alignright {margin-top: 0; text-align: right; clear: both;}

.small {font-size: .9em;}

.wide {
width: 100%; 
text-align: center;
background-image: url(images/bg.png);
}

.wide p {margin: 0; padding: 0px; position: relative;}

.top {
width:  780px;
height: 135px;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 14px;
text-align: left;
background: #EEE; 
background-image: url(images/banner.png);
}

.top img {
margin: 5px 20px 5px 5px;
}

.top div {
padding:17px 0px 0px 0px;
}

.top span {
padding:17px 0px 0px 0px;
display: block;
}

.top em {
font-style: normal;
}

* html .top div {
padding:17px 10px 0px 145px;
}

* html .top span {
padding:17px 10px 0px 145px;
display: block;
}

.top a {position: absolute; right: 20px; text-align: right; font-weight: bold; font-size: .7em; color: #fff;}

span.logoimage = {
background-image: url(images/cards.png);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fileadmin/template/image1.png',sizingMethod='scale');
display: block;
width: 128px;
width: 128px;
}

.bottom {
width: 772px;
background: #FFFFDD; 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px; 
padding: 5px 0px; 
color: #000000; 
border-left: 4px solid #394EBA;
border-right: 4px solid #394EBA;
border-bottom: 4px solid #394EBA;
position: relative;
}
.bottom a        { color: #000000; text-decoration:none;      font-weight:normal; }
.bottom a:active { color: #FF0000; text-decoration:underline; font-weight:bold;   }
.bottom a:hover  { color: #000000; text-decoration:underline; font-weight:bold;   }

* html .bottom {   /*** IE5.x/win box model fix ***/
width: 780px;
}

.to-right {float: right;}

.to-left {float: left;}

/*XXXXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXX*/

/****************************************************************** 
To adjust the side col widths, or the vertical col dividers, a certain set of values 
must be changed all at the same time and by exact amounts or problems will result. 
Each of these group's member values have been marked off with comments that 
start with "Critical...". For example, if the left col width needs to be changed then all 
the values marked "Critical left col dimension value" MUST have their pixel values 
altered by the same amount. Certain of these left col width values are marked 
(moves inversly)", and these get changed by the same pixel amount but inversly
to the other values. So if margin-left on .outer is increased by 10px, then the width 
of .outer must decrease by 10px, and so on.

To change the width of the entire layout, .wrapper, .outer, .float-wrap, and .center 
all get changed together, and only after that is it safe to change col or divider 
widths. Remember, even one small mistake will degrade or even break the layout, 
so be very careful! it's possible to "loosen" the layout so small errors aren't so essy,
but then it becomes hard to finely control text spacing. 

For spacing within the cols, it's best to apply margins on content elements 
inserted into the cols, because padding directly on those col elements will 
change their widths, breaking the layout. 

Certain hiding hacks have been used extensively in this layout, so here is a quick 
explaination of them.

The Tan hack:

* html .anyelement {rules read only by IE/Win and IE/Mac}

The Mac-hack:  (first the active comment you are reading now must be closed...) */

/* \*/

/* */

/*...Back in comment mode now. Anything between those two comment lines will 
be hidden from IE/Mac. Don't use any comments within this hack or it will close prematurely and IE/Mac will begin reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win. Proper use 
of backslash escape characters inside property names used in the Holly hack can 
further segregate rules to be read by only IE6 from rules for IE5.x/Win. 

These hiding hacks, along with several other fixes, make possible this formerly 
impossible layout. It is highly unlikely that new browsers will have any problem 
with these valid hiding hacks, and Microsoft does not plan any browser changes 
soon that would alter the proper operation of the layout.
********************************************************************/

.wrapper {
margin: 0 auto;
width: 780px;
text-align: left;
background: #FFFFFF;
border: 0px solid #394EBA;
background-image: url(images/bg.png);
}

* html .wrapper {   /*** IE5.x/win box model fix ***/
width: 782px;
wid\th: 780px;
}

.outer {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin-left: 154px;    /*** Critical left col dimension value ***/
width: 622px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
background: #fff;  /*** Sets background of center col***/
border-left: 0px solid #394EBA;   /*** Critical left divider dimension value ***/
border-right: 4px solid #394EBA;   /*** Critical right divider dimension value ***/
}

* html .outer {   /*** IE5.x/win box model fix ***/
width: 624px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
wid\th: 622px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
}

.float-wrap {
float: left;
width: 622px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
}

.center {
float: right;
width: 622px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
margin-bottom: -1px;   /*** Fixes a variance in IE/win for the green AP bottom boxes ***/
}

.center-container {
padding: 0px 12px;
}
.center-container a        { color: #000000; font-weight:bold; }
.center-container a:active { color: #000000; }
.center-container a:hover  { color: #FF0000; }



.left {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; 
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 152px;    /*** Critical left col/divider dimension value ***/
margin-left: -150px;    /*** Critical left col/divider dimension value ***/
color: #000000;
background: #FFFFFF;
}

.left a        { color: #000000; text-decoration:none; font-weight:bold; }
.left a:active { color: #000000; text-decoration:underline; }
.left a:hover  { color: #FF0000; text-decoration:underline; }

.left p {
background: #FFFFFF;
color: #000000;
}

.left ul {

margin-top: 0px;
}

.left img {
margin-right:5px;
float:left;
}

* html .left {
float:left;	
}

*>html .left {width:151px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 150px;    /*** Critical left col dimension value ***/
background: #E5EEFC; /* #FFFFDD */
background-image: url(images/leftbg.png);
border-bottom: 4px solid #394EBA;
margin-bottom: 30px;
margin-top: 20px;
}

/*** Static fixes ***/

/*** Below is the Holly hack, and if IE/Win shows bugs it's a good idea to apply this hack to 
	different elements and see if that fixes the problem. Sometimes it may be necessary 
	to use "position: relative;" on certain elements, but it's hard to tell in advance which 
	elements will need such fixes. Here it prevents IE5/Win from clipping the left ends 
	of the headings. ***/
/* \*/
* html h2 {height: 1%;}
/* */


/*** This is a fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .left {margin-right: -3px;}
/* */

/*********************************************************************************************************/
img {
border: 0px;
}

img.right-inline {
margin: 10px; 
float: right; 
display: inline
}

#copy {
font-family:sans-serif;
font-size: 9px;
}

#copy a        { color: #000000; text-decoration:none;      font-weight:normal; }
#copy a:active { color: #FF0000; text-decoration:underline; font-weight:normal; }
#copy a:hover  { color: #FF0000; text-decoration:underline; font-weight:normal; }

.pictures {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; 
width: 600px;
margin: 0px;
padding: 0px;
border-bottom: 4px solid #394EBA;
background: #E5EEFC;
background-image: url(images/tablebg.png);
}

.pictures tbody {
margin: 0px;
border-left: 4px solid #394EBA;
border-right: 4px solid #394EBA;
}

.pictures th {
padding: 2px 0px 4px 8px; 
margin: 0; 
margin-bottom: 8px;
color: #FFFFFF;
background: #394EBA;
background-image: url(images/tablehead.png);
text-align: left;
}

.pictures td {
padding: 5px;
text-align: center;
}