/* global */
html{height: 100%;}

body
{ font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .74em;
} 


p
{ margin: 0px;
  padding: 0px 0px 24px 0px;
  line-height: 20px;
}
 
h1
{ font-family: tahoma, verdana, arial, sans-serif;
/* font-size: 188%;*/
  font-size: 250%;
  font-weight: normal;
  margin: 0px;
}

h2
{ font-family: tahoma, verdana, arial, sans-serif;
  margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 200%; /* was 160*/
  font-weight: normal;
}

h3
{margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 150% /* was 100*/
 }
h4
{margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 120%;
  font-style: italic; 
 } 
 
img{border: 0px;}


.left
{ float: left; 
  padding: 0px 8px 0px 0px;
}

.right
{ float: right; 
  padding: 0px 0px 0px 8px;
}

.center
{ display: block;
  text-align: center;
  margin: 0 auto;
}

.marg0
{margin: 0px 0px 0px 10px;

 }
.marg
{margin: 0px 0px 0px 50px;

 }
 

 
.marg2 
{margin: 0px 0px 0px 80px;
 }
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/* unordered list */
ul
{ margin: 8px 0px 0px 14px;
  padding: 0px;
}


ul li
{ list-style-type: square;
  margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* main container */
#main
{ width: 1007px;      /* graduated shading over 25 25 pixels  (left and right */
  margin-left: auto; 
  margin-right: auto; /* margins are auto to center in window */
}

/* links above the logo */
#links
{ margin-left: 19px;         /* width of left graduated shading */
  margin-right: 0px;
  padding: 9px 20px 3px 10px; /* padding for text content Top Right Bottom Left */
  width: 935px;              /* marginleft + paddingRight + paddingLeft + 2xborder = 42 +10
                                986 -42 -10 = 934 */
                             /* but as border is black, we put it on the graduated shading
                                968 -2 -20 - 10 = 936 */
  text-align: left;
  height: 22px;  
  border: 1px solid;
}

#links a, #links a:hover{text-decoration: none;}

/* logo */
#logo
{ margin-left: 20px; 
  margin-right: auto;
  padding: 0px ;
  width: 966px;
  height: 135px;
  text-align: left;
}

#logo h1
{ padding: 41px 0px 0px 219px;
  font-family: verdana, arial, sans-serif;
  font-size: 250%;
  font-weight: normal;
}

/* main content overflow: hidden;*/
#content
{ margin-left: 20px; 
  margin-right: auto;
  width: 966px;
  height: auto;
  padding: 0px;
  /*text-align: justify;*/
  overflow: hidden;
  /* 20 + 946  = 966 = links = main */
  
} 
/* navigation menu */
#menu
{ height: 43px;
  width: 966px;
  padding-left:3px;
  margin-left: 0px; 
  margin-right: auto;
}

#menu ul
{ margin: 0px; 
  padding: 0px; 
  list-style: none; 
  text-align: left; 
  width: 966px;
} 

#menu li
{ margin: 0px; 
  padding: 0px; 
  list-style: none; 
  float: left; 
} 

#menu li a 
{ display: block; 
  float: left; 
  border-right: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
  height: 37px;
  font-size: 100%; 
  /*width: 141px; */
  width: 135px;
  text-decoration: none; 
  padding: 3px 0px 0px 1px; /* top right bottom left was  3 0 0  19*/
  font-weight: bold; 
  text-align: center
  /*text-transform: lowercase;*/
                               /* borders + paddings = 0 + 1 + 0 + 19 = 20
                                  966 / 6 = 161  (6 buttons)
                                  161 - 20 = 141 ===> width
                                */
                                /* borders + paddings = 0 + 1 + 0 + 1 = 2
                                  966 is the width of the "content" of the page
                                  966 / 7 = 138  (7 buttons)
                                  138 - 2 = 135 ===> width  BUT with 135 it remains a small gap on the right
                                  so I change the padding-left of the menu to 3px
                                */
} 



/* column 1 - contains sidebar items */
#column1
{ width: 202px;
  float: left;
  padding: 16px 0px 15px 19px;
  /* total width 202 + 19 = 221*/
}

#column1 h1
{ padding: 0px 0px 6px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px dashed;
}

.sidebaritem
{ position: relative;
  /*text-align: justify;*/
  width: 165px;
  float: left;
  margin: 0px 0px 15px 0px;
  padding: 8px 0px 8px 0px;
}

/* column 2 - page content  */ 
#column2
{ text-align: justify;
  padding: 12px 22px 15px 0px;
  width: 700px;
  float: right;
  /*padding right 22; 966 - 221 -22 =723 = maximal value for width     
  but I take 700 in order to have a space between column     old tested values 740 654 724*/
}

#column2 h1
{ padding: 12px 0px 6px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px dashed;
}

/* Only one column - page content  */ 
#onecolumn
{ text-align: justify;
  padding: 12px 22px 15px 60px;
  width: 800px;
  float: center;
  /*padding right left 22 50; 966 -22 -60 = 884 = maximal width
    I take 800 */
}

#onecolumn h1
{ padding: 12px 0px 6px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px dashed;
}

/* define behaviour of <a  > for sidebaritems, column2 and onecolumn */
.sidebaritem a, #column2 a, #onecolumn a
{ padding: 0px;
  text-decoration: underline;
}

.sidebaritem a:hover, #column2 a:hover, #onecolumn a:hover
{ padding: 0px;
  text-decoration: none;
}




/* footer */
#footer
{ padding: 9px 21px 3px 0px;
  width: 946px;
  text-align: center;
  border: 1px solid;
  height: 22px;
  margin-left: 19px; /* footer is not part of "content" */
  margin-right: auto;
  /* 968 -2 -20 = 946  was 925*/
}

#footer a, #footer a:hover{text-decoration: none;}

/* contact page - form layout */
form{margin-top: 0px;}

div.row
{ clear: both;
  width: 448px;
}

div.row span.formlabel 
{ float: left;
  width: 150px;
  text-align: left;
}

div.row span.forminput
{ float: right;
  text-align: right;
} 

div.spacer
{ clear: both;
  width: 80px;
}

input, textarea
{ width: 259px; 
  font-family: verdana, arial, sans-serif;
  font-size: 100%;
  border: 1px solid;
  margin: 2px;
}

.submit
{ font-family: verdana, arial, sans-serif;
  font-size: 100%; 
  border: 1px solid;
  width: 70px;
  height: 22px;
  cursor: pointer;
}