/***** 3-COL HOLY GRAIL CLASSES *****/
/*
Copyright (c) 2013 by Harald Engels
Author: Harald Engels
LinkedIn: http://www.linkedin.com/in/haraldengels
Twitter: @haraldengels
Email: info@litesite.org
License: GNU General Public License, version 3.0 (GPLv3) (see: http://opensource.org/licenses/GPL-3.0)
Trademark: LiteSite is a trademark of Arvada Marketing LLC
Release: 3.0.3
Date: 2013-06-06
Website: http://litesite.org

Comment:
It is time to say good-bye to layouts for CSS 2.1 browsers. By using CSS 3 we are now able to create a 
compact, clean and easy to manage multi-column layout structure which can be used until more sophisticated
box models (e.g. flexbox) have reached a stable state. I focused primarily to the layout feature of this
template. The semantic structure is just basic but you get the picture and can easily modify/extend it for 
making your website more consistent with the semantic structure of HTML 5. 
If you check the HTML code you see that I am using a shim for making older browsers (e.g. IE8) understanding 
HTML 5 tags. In combination with a small polyfill (respond.js) at least IE8 (what is the new IE6) should work 
fine. Testing older CSS 2 browsers I am leaving with you.
One beauty of this layout is that it is amazingly compact since we do not try longer to fake same lenghts
columns for older browsers (OK there is nice trick but that is explained in the article on the website). 
Being based on floats ensures layout stability all over the web since block level elements were made for
floating. Using CSS tables (display: table) based designs would be elegant but doesn't work correctly with 
media queries and might confuse users who learned now one decade long not to use HTML tables for layouts. 
We have only one wrapper which makes semantically sense. All semantic clutter is gone. Source code ordering is 
not longer requilightcoral when HTML 5 semantics are used. Making websites responsive and source code ordering might 
be conflicting. A clean website with HTML 5 tags will do well regarding SEO.
The layout can be fluid (%), semi-fluid (mixing % and px) or use fixed values (px only). All attempts of 
mixing units should work fine. The CSS doesn't require positioning of elements, no messing around with 
negative margins (no margins at all) and no hacks. That will ensure that future browsers will render this
layout correctly so that you can make it to your foundation for new multi-column websites.
Mixing the column structure with grids will also work fine. Details about grids can also be found on the 
website: http://litesite.org
*/

/** Resets **/
body,
div,
article,
main,
aside {
  margin: 0; 
  padding: 0;
}

/** All Containers **/
.float {
  float: left;  /* Holy Grail Revisited doesn't require any positioning. Floating makes all browsers happy */
  width: 100%;  /* only requilightcoral for background colors/images in floated containers */
}

/** Specific Containers **/
#pageWrap {
  max-width: 100%;  /* replacing the fixed width with a percentage (e.g. 100%) creates a fluid page content */
  margin: 3px auto;  /* if a fixed width is defined we center the page with auto (horizontally) */
  border: solid 0px #777;
}
#header {
  background: #8ab6ba;
}
#topBox {
  background: #bad1d8;
}
#columns {
  width: 100%;
  background: white;
}
#col1 {
  width: 15%;  /* min-width is requilightcoral for a fluid #col2 content which needs to be set to 100% */
  padding-left: 1%;
}
#col2 {
  width: 70%;  /* 100% requilightcoral in combination with min-width values in the side-columns for a fluid content */;
  background: white;
  border: solid 0px #f9e370;
 
}
#col3 {
  width: 14%;
}
#intro {
  background: aliceblue;
}
#main {
  background: white;
}
#outro {
  background: aliceblue;
}
#botBox {
  background: lightblue;
}
#footer {
  background: white;
  text-align: center;
  font-size: smaller;
}

/** Media Queries (Responsive Design)) **/
@media only screen 
       and (max-width: 759px)
{
  #col1,
  #col2,
  #intro,
  #article,
  #outro,
  #col3 {
    float: none;
    width: 100%;
    clear: left;
  }
  #header {
    background: #8ab6ba;
  }
  #col1 {
	display: none;  /* toggle this setting to enable/disable #col3 completely or edit the line above */
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ffffff, white);  /* background for the left column */
    background-image: -moz-linear-gradient(top, #ffffff, white);
    background-image: -ms-linear-gradient(top, #ffffff, white);
    background-image: -o-linear-gradient(top, #ffffff, white);
    background-image: linear-gradient(top, #ffffff, white); 
  }
  #col3 {
    display: inline-block;  /* some clean-up */
    display: none;  /* toggle this setting to enable/disable #col3 completely or edit the line above */
    float: none;
    width: 100%;
    clear: left;  /* making sure that we get a new row */
    background: #ffccee;
    background-image: -webkit-linear-gradient(top, #ffffff, white);  /* background for the right column */
    background-image: -moz-linear-gradient(top, #ffffff, white);
    background-image: -ms-linear-gradient(top, #ffffff, white);
    background-image: -o-linear-gradient(top, #ffffff, white);
    background-image: linear-gradient(top, #ffffff, white);
  }
  span.medium,
  span.large {
    display: none;
  }
}
@media only screen 
       and (min-width: 760px)
       and (max-width: 919px)
{
  #col1 {
    background-image: none;  /* the medium width layout "moves" the background image to the column wrapper */
  }
  #col3 {
    float: none;
    width: 100%;
    display: inline-block;  /* some clean-up */
    clear: left;  /* making sure that we get a new row */
    background-image: -webkit-linear-gradient(top, #ffffff, white);  /* background for the right column */
    background-image: -moz-linear-gradient(top, #ffffff, white);
    background-image: -ms-linear-gradient(top, #ffffff, white);
    background-image: -o-linear-gradient(top, #ffffff, white);
    background-image: linear-gradient(top, #ffffff, white);
  }
  #col2 {
    width: 70%;
  }
  #intro,
  #article,
  #outro {
    width: 100% ;
  }
  #columns {
    background-image:  -webkit-linear-gradient(top, #ffffff, white);  /* background for the left column */
    background-image:  -moz-linear-gradient(top, #ffffff, white);
    background-image:  -ms-linear-gradient(top, #ffffff, white);
    background-image:  -o-linear-gradient(top, #ffffff, white);
    background-image:  -linear-gradient(top, #ffffff, white);
    background-position: top left;
    background-size: 15% 100%;  /* the first value must correlate with the left column width */
    background-repeat: no-repeat;
  }
  #header {
    background: #8ab6ba;
  }
  span.small,
  span.large {
    display: none;
  }
}
@media only screen
       and (min-width: 920px)
{
  .float {
    float: left;
    width: 100%; 
  }
  #columns {
    /* CSS 3 multiple background images allow us to get rid of the wrapper inflation which was requilightcoral in
     * CSS 2 designs (see here: http://matthewjamestaylor.com/blog/perfect-3-column.htm) to fake equalized 
     * column lenghts (same length columns). We use only two DIV wrappers which is semantically useless,
     * one wrapper is use for the whole page and one for the columns. More DIV's are not requilightcoral. */
    background-image:  -webkit-linear-gradient(top, #ffffff, white),  /* background for the left column */
    -webkit-linear-gradient(top, #ffffff, white);  /* background for the right column */
    background-image:  -moz-linear-gradient(top, #ffffff, white),
    -moz-linear-gradient(top, #ffffff, white);
    background-image:  -ms-linear-gradient(top, #ffffff, white),
    -ms-linear-gradient(top, #ffffff, white);
    background-image:  -o-linear-gradient(top, #ffffff, white),
    -o-linear-gradient(top, #ffffff, white);
    background-image:  -linear-gradient(top, #ffffff, white),
    linear-gradient(top, #ffffff, white);
    background-position: top left, top right;
    background-size: 15% 100%, 15% 100%;  /* the first and third value must correlate with each column width */
    background-repeat: no-repeat, no-repeat;
  }
  #header {
    background: #8ab6ba;
  }
  #col1 {
    background-image: none;  /* the full width layout "moves" the background image to the column wrapper */
  }
  #col2 section,
  #col2 article,
  #col2 section h1 {
    padding: 0 5px;  /* this padding in the full view is just to illustration how to create a horizontal content gutter */
  }
  #col2 p {
  padding: 1px 10px;
  }
  span.medium,
  span.small {
    display: none;
  }
}
  
/** Fonts **/
body {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.15;
}
h1,
h2,
h3,
h4 { 
  margin: 0.5em;
}
p {
  margin: 0.5em;
}
a {
  color: blue;
}
#header h1 {
  margin-left: 10px;
  font-size: 225%;
}
#header header h1,
#topBox h1,
#col1 h1,
#col2 h1,
#col3 h1,
#botBox h1 {
  font-size: 150%;
}

#header header v1,
#topBox v1,
#col1 v1,
#col2 v1,
#col3 v1,
#botBox v1 {
	font-size: 100%;
}
#col1 z1 {
	font-size: 75%;
}

/** Elements **/
img.responsive {
  width: auto;
  max-width: 100%;
  min-width: 320px;
  height: auto;
}

/** CSS Indicator **/
html.css2 .cssver {
  font-weight: bold;
  color: #990000;
}
html.css3 .cssver {
  display: none;  /* If CSS 3 is active we are hiding the CSS 2 text */
} 
html.css3 .detect:after {
  content: "CSS 3";  /* If CSS 3 is active we are diaplaying this text */
  display: inline;
  font-weight: bold;
  color: #009900;
} 

/** Messages **/
html.nojs #nojs {
  padding: 1px;
  font-size: 150%;
  font-weight: bold;
  color: khaki;
  background: #990000;
}
html.nocook #nocook {
  padding: 1px;
  font-size: 150%;
  font-weight: bold;
  color: khaki;
  background: #990099;
}
html.js #nojs,
html.cook #nocook {
/* If Javascript is active we are changing in the DOM the class .nojs to .js and disable that way the 
 * JavaScript error message container */
  display: none;
}
.winSize {
  font-weight: bold;
}
/* You can use the DOM classes even outside the media query */
.large .winSize {
  color: green;
}
.medium .winSize {
  color: blue;
}
.small .winSize {
  color: red;
}

/** Clearfixes **/
/* Clearfixes are sparingly used in this template but could become more important on your site or when you 
 * discover issues with ancient browsers like IE7 etc. */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 7 (trigger hasLayout) */
}
 hr {
width: 80%;
color: #ffcc66;
height: 1px;
} 

img.top {
    vertical-align: top;
}

img.bottom {
    vertical-align: bottom;
}

p.padding {
    padding-left: .25cm;
}

 		 			.menulink  {font-size: 8pt; font-family: verdana, helvetica, times; color:#666666; text-decoration:none;}
 			.menulink a:link  {font-size: 8pt; font-family: verdana, helvetica, times; color:#006666; text-decoration:none;}
 			.menulink  a:visited{font-size: 8pt; font-family: verdana, helvetica, times; color:#006666; text-decoration:none;}
 			.menulink  a:hover {font-size: 8pt; font-family: verdana, helvetica, times; color:#ff6600; text-decoration:underline;}
 			.menulink  a:active {font-size: 8pt; font-family: verdana, helvetica, times; color:#ff6600; text-decoration:none;}

.menuCol  {font-size: 8pt; font-family: verdana, helvetica, times; color:#006666; text-decoration:none; padding-left: 0px; padding-top: 3px; padding-bottom: 1px; border-bottom: 0px solid #CCCCCC;}
 			.menuCol a:link  {font-size: 8pt; font-family: verdana, helvetica, times; color:#006666; text-decoration:none; padding-left: 0px; padding-top: 3px; padding-bottom: 1px; border-bottom: 0px solid #CCCCCC;}
 			.menuCol  a:visited{font-size: 8pt; font-family: verdana, helvetica, times; color:#006666; text-decoration:none; padding-left: 0px; padding-top: 3px; padding-bottom: 1px; border-bottom: 0px solid #CCCCCC;}
 			.menuCol  a:hover {font-size: 8pt; font-family: verdana, helvetica, times; color:#ff6600; text-decoration:none;} padding-left: 0px; padding-top: 3px; padding-bottom: 1px; border-bottom: 0px solid #CCCCCC;}
 			.menuCol  a:active {font-size: 8pt; font-family: verdana, helvetica, times; color:#ff6600; text-decoration:none;} padding-left: 0px; padding-top: 3px; padding-bottom: 1px; border-bottom: 0px solid #CCCCCC;}

                          .smalltext {font-size: 11px; font-family: arial, helvetica, times; color:#000000; text-decoration:none;}
                         .smalltext a:link {font-size: 11px; font-family: arial, helvetica, times; color:#000000; text-decoration:none;}
                         .smalltext   a:visited   {font-size: 11px; font-family: arial, helvetica, times; color:#000000; text-decoration:none;}
                         .smalltext   a:hover   {font-size: 11px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .smalltext   a:active   {font-size: 11px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}


.artTitle {font-size: 11pt; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .artTitle a:link {font-size: 11pt; font-family: arial, helvetica, times; color:#006666; text-decoration:none;}
                         .artTitle  a:visited   {font-size: 11pt; font-family: arial, helvetica, times; color:#006666; text-decoration:none;}
                         .artTitle  a:hover   {font-size: 11pt; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .artTitle  a:active   {font-size: 11pt; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}

.teaser {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none; padding-top: 10px; padding-bottom: 10px;}
                         .teaser a:link {font-size: 13px; font-family: arial, helvetica, times; color:#006666; text-decoration:underline;}
                         .teaser  a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#006666; text-decoration:underline;}
                         .teaser  a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .teaser  a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}

			.highlights {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .highlights a:link {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .highlights  a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .highlights  a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .highlights  a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}
                         
                         .bodytext  {font-size: 13px; font-family: arial, helvetica, times; color:#000000; text-decoration:none;}
                         .bodytext  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .bodytext   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .bodytext   a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .bodytext   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}

                         .bodytextblu  {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .bodytextblu  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .bodytextblu   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:none;}
                         .bodytextblu   a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .bodytextblu   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}

 			.menulinkGrey  {font-size: 10px; font-family: verdana, helvetica, times; color:#808080; text-decoration:none;}
 			.menulinkGrey a:link  {font-size: 10px; font-family: verdana, helvetica, times; color:#808080; text-decoration:none;}
 			.menulinkGrey  a:visited{font-size: 10px; font-family: verdana, helvetica, times; color:#808080; text-decoration:none;}
 			.menulinkGrey  a:hover {font-size: 10px; font-family: verdana, helvetica, times; color:#900000; text-decoration:none;}
 			.menulinkGrey  a:active {font-size: 10px; font-family: verdana, helvetica, times; color:#900000; text-decoration:none;}


                         .bodytextgrey  {font-size: 13px; font-family: arial, helvetica, times; color:#777777; text-decoration:none;}
                         .bodytextgrey  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#777777; text-decoration:none;}
                         .bodytextgrey   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#777777; text-decoration:none;}
                         .bodytextgrey   a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .bodytextgrey   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}

                         .bodytextgrey2  {font-size: 13px; font-family: arial, helvetica, times; color:#444444; text-decoration:none;}
                         .bodytextgrey2  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#444444; text-decoration:none;}
                         .bodytextgrey2   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#444444; text-decoration:none;}
                         .bodytextgrey2   a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:underline;}
                         .bodytextgrey2   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}


                         .prevNext  {font-size: 13px; font-family: arial, helvetica, times; color:#900000; font-weight:bold; text-decoration:none;}
                         .prevNext  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:underline;}
                         .prevNext   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#00497A; text-decoration:underline;}
                         .prevNext   a:hover   {font-size: 13px; font-family: arial, helvetica, times; scolor:#ff6600; text-decoration:underline;}
                         .prevNext   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ff6600; text-decoration:none;}


                        
                         .whitetext  {font-size: 13px; font-family: arial, helvetica, times; color:#ffffff; text-decoration:none;}
                         .whitetext  a:link {font-size: 13px; font-family: arial, helvetica, times; color:#ffffff; text-decoration:none;}
                         .whitetext   a:visited   {font-size: 13px; font-family: arial, helvetica, times; color:#ffffff; text-decoration:none;}
                         .whitetext   a:hover   {font-size: 13px; font-family: arial, helvetica, times; color:#ffcc66; text-decoration:underline;}
                         .whitetext   a:active   {font-size: 13px; font-family: arial, helvetica, times; color:#ffcc66; text-decoration:none;}

                          .whitelink  {font-size: 10px; font-family: verdana, helvetica, times; color:#FFffff; text-decoration:none;}
                         .whitelink  a:link {font-size: 10px; font-family: verdana, helvetica, times; color:#FFffff; text-decoration:none;}
                         .whitelink   a:visited   {font-size: 10px; font-family: verdana, helvetica, times; color:#FFffff; text-decoration:none;}
                         .whitelink   a:hover   {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:underline;}
                         .whitelink   a:active   {font-size: 10px; font-family: verdanav, helvetica, times; color:yellow; text-decoration:none;}
						 
						 .greenlink  {font-size: 10px; font-family: verdana, helvetica, times; color:#155F4F; text-decoration:none;}
                         .greenlink  a:link {font-size: 10px; font-family: verdana, helvetica, times; color:#155F4F; text-decoration:none;}
                         .greenlink   a:visited   {font-size: 10px; font-family: verdana, helvetica, times; color:#155F4F; text-decoration:none;}
                         .greenlink   a:hover   {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:underline;}
                         .greenlink   a:active   {font-size: 10px; font-family: verdanav, helvetica, times; color:#155F4F; text-decoration:none;}
						 
						 .bluelink  {font-size: 10px; font-family: verdana, helvetica, times; color:#100cf8; text-decoration:none;}
                         .bluelink  a:link {font-size: 10px; font-family: verdana, helvetica, times; color:#100cf8; text-decoration:none;}
                         .bluelink   a:visited   {font-size: 10px; font-family: verdana, helvetica, times; color:#100cf8; text-decoration:none;}
                         .bluelink   a:hover   {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:underline;}
                         .bluelink   a:active   {font-size: 10px; font-family: verdanav, helvetica, times; color:#100cf8; text-decoration:none;}

                          .yellowlink  {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:none;}
                         .yellowlink  a:link {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:none;}
                         .yellowlink   a:visited   {font-size: 10px; font-family: verdana, helvetica, times; color:yellow; text-decoration:none;}
                         .yellowlink   a:hover   {font-size: 10px; font-family: verdana, helvetica, times; color:#FFcc00; text-decoration:underline;}
                         .yellowlink   a:active   {font-size: 10px; font-family: verdanav, helvetica, times; color:#FFcc00; text-decoration:none;}

.bluSmall  {font-size: 9pt; font-family: arial,helvetica,times; color:#0073BC; text-decoration:none;}
.bluSmall a:link {font-size: 9pt; font-family: arial,helvetica,times; color:#0073BC; text-decoration:none;}
.bluSmall a:visited {font-size: 9pt; font-family: arial,helvetica,times; color:#0073BC; text-decoration:none;}
.bluSmall a:hover {font-size: 9pt; font-family: arial,helvetica,times; color:#ff6600; text-decoration:underline;}
.bluSmall a:active {font-size: 9pt; font-family: arial,helvetica,times; color:#ff6600; text-decoration:none;}


table.mg {
	border-width: 1px 1px 1px 1px;
	border-spacing: 20px 10px;
	border-style: solid solid solid solid;
	border-color: #ffcc00 #ffcc00 #ffcc00 #ffcc00 ;
	border-collapse: separate;
	background-color: #ffffff;
}
table.mg th {
	border-width: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-style: none none none none;
	border-color: gray gray gray gray;
	background-color: #ffffff;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.mg td {
	border-width: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-style: none none none none;
	border-color: gray gray gray gray;
	background-color: #ffffff;
	-moz-border-radius: 0px 0px 0px 0px;
}


/* FORM*/

smallselect  {
	font-family: Arial,Helvetica, geneva,sans-serif; 
	font-size:8px;
	color:#000000;
	background-color:#ffffff;
}

.formtext	{ 
	font-family: Arial,Helvetica, geneva,sans-serif; 
	font-size:9px;
	color:#000000;
/*	letter-spacing:-0.1em;*/
}

.B1 { border: solid #cccccc; border-width: 0px 0px 1px 0px; }
.B2 { border: solid #cccccc; border-width: 0px 1px 0px 1px; }
.B3 { border: solid #cccccc; border-width: 0px 0px 1px 0px; }
.B4 { border: solid #cccccc; border-width: 0px 0px 0px 1px; }
.B { border: solid #cccccc; border-width: 1px 1px 1px 1px; }
.Bb { border: solid #80cbff; border-width: 1px 1px 1px 1px; }
.BG { border: solid #E0AE3A; border-width: 1px 1px 1px 1px; }
.BB { border: solid #cccccc; border-width: 1px 1px 1px 1px; }


 hr {
width: 80%;
color: #ffcc66;
height: 1px;
} 
                         
                         a:link { color:#003300; text-decoration:underline;}
                         a:visited  { color:#003300; text-decoration:underline;}
                         a:hover    {color:#ff6600; text-decoration:underline;}
                         a:active  { color:#ff6600; text-decoration:none;}
                         .smallselect { font-family: Arial,helvetica,sans serif; font-size: 9pt } 
                         .smallinput { font-size: 10pt } form { }