/* remove whitespace around and inside all elements by default */

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  margin: 0px 0px 30px 0px;
}

/*
################################################################################
## div.templavoila-root
################################################################################
*/

div.templavoila-root {
  /* no styling, the div will be removed by templavoila */
}


/*
################################################################################
## div.container
################################################################################
*/

div.container {
  clear: both;
  width: 920px;
  /* height: auto; */
  
  /* switched from top margin to top padding
     because IE refuses to render top margins */
  margin: 0px auto;            /* 12px auto 0px auto; */
  padding: 12px 0px 0px 0px;   /* 0px; */
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*
################################################################################
## #container-header
################################################################################
*/

div#container-header {

}

div#container-header * {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

/*
################################################################################
## #container-body
################################################################################
*/

div#container-body {
  padding-top: 0px;
}

/* remove leading margin from first sheet on the page */
#container-body > div:first-child {
  margin-top: 0px;
}

/*
################################################################################
## #container-footer
################################################################################
*/

#container-footer {
  padding: 2em 0ex 0em 0ex;
}

/*
################################################################################
## #header-art
################################################################################
*/

#header-art {

}

#header-art * {
  margin: 0px;
  padding: 0px;
}

/*
################################################################################
## #header-menu
################################################################################
*/

#header-menu {

}

#header-menu * {
  margin: 0px;
  padding: 0px;
}

/*
################################################################################
## div.sheet-corners-top
################################################################################
*/

div.sheet-corners-top {
  /* again using padding in favour of margin because IE
     refuses to render top-margin on top-margin */
  margin: 0px auto 0px auto;
  padding: 12px 0px 0px 0px;
  /* diminish font-size so   chars do not cause overflow */
  font-size: 4px;
  
}

div.sheet-corners-top div {
  display: inline;
  margin: 0px;
  padding: 0px;
  border-width: 0px;
}

/*
################################################################################
## .sheet-corners-left and .sheet-corners-right
################################################################################
*/

.sheet-corners-left {
  float: left;
  background-position: left top;
}

.sheet-corners-right {
  float: right;
  background-position: right top;
}

/*
################################################################################
## div.sheet
################################################################################
*/

div.sheet {
  /* start each sheet anew on its own horizontal line */
  clear: both;
  margin: 0px auto;
  padding: 0em 1ex 1em 1ex; /* 2em 1ex 1em 1ex; */
  overflow: hidden;
  height: 100%;
}

/* first block element in the sheet needs to align to the left, no 1% spacer */
div.sheet > :first-child {
  /* margin: 0% 0% 0% 0%; */
}

/*
################################################################################
## div.column
################################################################################
*/

div.column {
  /* horizontal 3column layout: 0% + 20% + 1% + 57.5% + 1% + 20%    =   99.5% */
  /* horizontal 2column layout: 0% + 20% + 1% + 78.5%               =   99.5% */
  /* horizontal 1column layout:                                     =   99.5% */
  margin: 0px 0px 0px 1%;
  padding: 0px; 
  overflow: hidden;
  /* float columns as inline blocks (they behave like giant characters) */
  display: inline;
}


/*
################################################################################
## column - left
################################################################################
*/

#column-left-3columns,
#column-left-2columns {
  width: 20%; /* 192px @ 960px */
  float: left;
  margin-left: 0%;
}

/*
################################################################################
## column - middle
################################################################################
*/

#column-middle-3columns {
  width: 57.5%; /* 552px @ 960px */
  float: left;
}

/*
################################################################################
## column - right
################################################################################
*/

#column-right-3columns {
  width: 20%; /* 192px @ 960px */
  float: right;
}

#column-right-2columns {
  width: 78.5%; /* 756px @ 960px */
  float: right;
}

/*
################################################################################
## column - single
################################################################################
*/

#column-single {
  width: 99.5%; /* 955px @ 960px */
  float: left;
  margin-left: auto;
  margin-right: auto;
}

/*
################################################################################
## div.panel-left div.panel-right
################################################################################
*/

div.panel-left,
div.panel-right {
  /* horizontal 4panel layout: 1% + 48.75% + ?% + 48.75% + 1%     =   99.5% */
  margin-top: 0px;
  margin-bottom: 1%;
  padding: 0px;
  overflow: hidden;
  /* float columns as inline blocks (they behave like giant characters) */
  display: inline;
  /* each panel in a 4panel layout is equal in width */
  width: 48.75%; /* 453,6px @ 960px */
}

/*
################################################################################
## div.panel-left
################################################################################
*/

div.panel-left {
  float: left;
  clear: both;
  margin-left: 0.5%;
  margin-right: 0%;
}

/*
################################################################################
## div.panel-right
################################################################################
*/

div.panel-right {
  float: right;
  margin-left: 0%;
  margin-right: 0.5%; 
}


/*
################################################################################
## debugging
################################################################################
*/

div {
  border: 0px dashed red;
}