/* -------------------------------------------------------------------------
   CSS 2.0/3.0 Styles for TETRA® Website http://www.tetra-software.de
   (c) 2010-2011 TETRA® Computersysteme GmbH
   ------------------------------------------------------------------------- */

/*
  Suggested order: (taken from specs and mozilla.org site)
	display
	list-style
	position
	float
	clear
	width
	height
	margin
	border
	padding
	background
	color
	font
	text-decoration
	text-align
	vertical-align
	white-space
	other text
	content
 */

/*
  Reset & set default styles
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6,
p, a, ol, ul, li, dl, dt, dd,
abbr, acronym, address, code, blockquote, pre, q, 
del, dfn, em, img,
fieldset, form, label, legend,
table, col, colgroup, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  border: 0;
  padding: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100.01%;				/* defaults to 16px on most browsers; .01 fraction accounts for rounding errors in opera/safari versions */
  font-family: inherit;
  vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

table, td, th {
  vertical-align: top;
}

/* Remove possible quote marks (") from <q>, <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

blockquote, q {
  quotes: none;
}

/* No border on (linked) images */
/*
img {
  border: none;
}
*/

.shadow3, .shadow3-css3  {
  -moz-box-shadow: 2px 2px 3px #ddd;
  -webkit-box-shadow: 2px 2px 3px #ddd;
  box-shadow: 2px 2px 3px #ddd;
}

.shadow5, .shadow5-css3 {
  -moz-box-shadow: 2px 2px 5px #ccc;
  -webkit-box-shadow: 2px 2px 5px #ccc;
  box-shadow: 2px 2px 5px #ccc;
}

/*
  Fonts
*/

body {
  color: #000;
  font-family: 'Arial', 'Helvetica', sans-serif;
  /* CAVE! IE seemingly does only interprete the first two decimal digits */
  font-size: .88em;   /* 0.88 * 16px ~ 14px */
  line-height: 1.36em;  /* 1.36 * 14px ~ 19px */ 
}

/*
 Text elements
*/

p {
  margin-bottom: 0.5em;
}

p.subtitle {
  margin: 0;
  color: #000080;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3em;
}

pre, code, tt {
  font-family: Lucida Console, 'Andale Mono', Monocle, monospace;
  /*font-size: 1em;*/
}

pre  {
  margin: 0.5em 0;
  white-space: pre;
}

.small {
  font-size: 0.86em;   /* 0.86 * 14px ~ 12px */
  line-height: 1.42em; /* 1.42 * 12px ~ 17px */
}

small {
  font-size: 0.86em;   /* 0.86 * (0.88 * 16px) ~ 12px */
  line-height: 1.42em;  /*          ^ from parent element */
}

.quiet {
  color: #888;
}

.banner_neu {
  padding: 0 .2em;
  background: #808;
  color: #fff;
  font-weight: bold;
}

/*
  Link format settings
*/

a  {
  color: #009;
  text-decoration: none;
}

/* Firefox doesn't seem to cope well with this and it seems to work nonetheless...
a:visited {
  color: inherit; #009;
}
*/

a:hover {
  text-decoration: underline;
}

a.plainlink {
  color: inherit;
}

a.nohover:hover {
  text-decoration: none;
}

/* Class btnlike: button-like links (obsolete?) */
a.btnlike {
  border: 1px solid #888;
  padding: 0 0.2em;
  background: #ccf;
  color: #666;
  text-decoration: none;
  font-family: Verdana, sans-serif;
  font-weight: bold;
}

a.btnlike:hover {
  background: #eef;
  text-decoration: none;
}

/* links with type icons in front */
.pdf {
  margin-left: 0px !important;
  padding-left: 19px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url('../img/icon_pdf.png');
  white-space: nowrap;
}

.zoom {
  margin-left: 0px !important;
  padding-left: 19px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url('../img/icon_magnify.png');
  white-space: nowrap;
}

.video {
  margin-left: 0px !important;
  padding-left: 30px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url('../img/icon_play.png');
  white-space: nowrap;
}

.extlink {
  margin-left: 0px !important;
  padding-left: 16px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url('../img/icon_extlink.png');
  white-space: nowrap;
}

/* miscallenous */
blockquote  { margin: 0 1.5em 0.5em 0.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
abbr, acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { text-decoration: striked; color: #666; }

/* preserve line height */
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

/* preserve selector appearance */
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}

/* enable resizing for IE */
input,
textarea,
select {
	*font-size:100%;
}

/* legend doesn't inherit in IE */
legend {
	color:#000;
}

/*
  Clearfix hack for local clearing of floats
*/
 
.clearfix:after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}

/* for Safari */
.clearfix { display: block; }

.floatbox { display: table; width: 100%; }

/* Headers
----------------------------------------*/

.bluebox {
  background-color: #ccf;
  border: 1px solid #888;
  padding: 0.25em;
  color: #000;
}

h1, h2, h3 {
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;	/* Headings in Arial font */
  text-decoration: none;
  line-height: 1.2;
}

h3, h4, h5, h6 {
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
}

h1 {
  margin: 1em 0 0.5em 0;
  color: #808;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.65em;
  font-weight: normal;
  font-style: italic;
}

div#theader h1 {
  margin-top: 1em;
  margin-bottom: 0.1em;
}

div#header2 h1 {
  margin-top: 0.5em;
}

h2 {
  margin: 1.5em 0 0.5em 0;
  border: none;
  color: #008;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3em;
  font-weight: normal;
}

h2.bluebox {
  /*width: 100%;*/
  padding: 0.4em 0.5em;
  margin-bottom: 1em;
  vertical-align: middle;
  font-size: 1.15em;
  font-weight: bold;
}

h2.small {
  font-size: 1em;
}

h3 {
  margin: 1em 0 0.25em 0;
  color: #000080;
  font-size: 1.00em;
  font-weight: bold;
}

/* Tables
----------------------------------------*/

table {
  /*margin-bottom: 0.5em;*/	/* 0.5em margin to following text */
  /*margin-top: 0.5em;*/
}

table.news {
  border-collapse: separate;
  border-spacing: 4px;
}

table.dateiliste {
  margin: 0.5em auto 1em auto;
  width: 97%;
  table-layout: fixed;
}

table.dateiliste td {
  padding: 0.5em 4px;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  vertical-align: top;
}

table.linksammlung {
  width: auto;
  border: none;
  border-collapse: separate;
  border-spacing: 0.5em;
  line-height: 1em;
}

table.linksammlung td.li {
  width: 1.4em;
  height: 1.4em;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 1.15em;
  font-weight: bold;
}

table.linksammlung td.mi {
  width: auto;
  padding-left: 0.5em;
  vertical-align: middle;
  text-align: left;
}

table.linksammlung td.re {
  padding-left: 2em;
  vertical-align: middle;
  text-align: right;
}

td.bluebox {
  vertical-align: middle;
}

/* Right-Side Content Box
----------------------------------------*/

#rcontent {
  float: right;
  margin: 0 0 1em 1em;
  width: 18em;
}

.contentbox, .sidebox, .sideboxl, .sideboxr {
  margin-bottom: 1em;
}

.sideboxl {
  margin-right: 1em;
}

.sideboxr {
  margin-left: 1em;
}

.sidebox, .sideboxl, .sideboxr {
  border: 1px #ccc solid;
  background: url(../img/contentbox_bg.png) no-repeat scroll 0 -50px transparent;
  padding: 0.5em;
  font-size: 0.9em;
}

.contentbox > a, .sidebox > a, .sideboxl > a, .sideboxr > a {
  font-weight: bold;
}

.contentbox > a.plainlink, .sidebox > a.plainlink, .sideboxl > a.plainlink, .sideboxr > a.plainlink {
  font-weight: normal;
}

.contentbox h1, .sidebox h1, .sideboxl h1, .sideboxr h1 {
  margin-top: 0;
  border-bottom: 1px #ccc solid;
  padding-bottom: 0.2em;
  font-size: 1.125em;
  font-style: normal;
  font-weight: bold;
}

.contentbox h2, .sidebox h2, .sideboxl h2, .sideboxr h2 {
  margin-top: 0;
  border-bottom: 1px #ccc solid;
  padding-bottom: 0.2em;
}

.contentbox h2 {
  font-weight: normal;
  /*font-size: 1.125em;*/
}

.sidebox h2, .sideboxl h2, .sideboxr h2 {
  font-weight: bold;
  font-size: 1.125em;
}

.contentbox h3, .sidebox h3, .sideboxl h3, .sideboxr h3 {
  font-size: 1em;
}

table .sidebox, table .sideboxl, table .sideboxr {
  margin: 0;
}


/* Lists
----------------------------------------*/

ul, ol, dl {
  margin: 0 2em 0.5em 0;
  padding-left: 2em;
}

ul { 
  list-style-type: square;
}

ul li, ol li {
  margin: 0 1.5em 0.5em 0;
}

dl dt {
  font-weight: bold;
}

dd  {
  margin: 0.5em 1.5em 0.5em 1.5em;
}


/*
  Container-DIVs for content parts
*/

div#container {
  padding: 10px 0 1em 15px; /*top: 1.5em, left:2em */
  width: 800px;
}

/* Container on TESS pages */
div#tcontainer {
  padding: 0.5em 0 1em 2em;
  max-width: 80em;
  min-width: 50em;
}

/* Container for logo & title on each page */
div#header {
  position: relative;
  height: 71px;
  margin: 0 0 2em 0;
  padding: 0;
}

/* Container for title w/o logo */
div#header2 {
  position: relative;
  margin: 0 0 1.5em 0;
  padding: 0;
}

/* Header on OctagonOffice pages */
div#ooheader {
  position: relative;
  height: 61px;
  margin: 0 0 2em 0;
  padding: 0;
}

/* Header on TESS pages */
div#theader {
  position: relative;
  height: 60px;
  margin: 0 0 1em 0;
  padding: 0;
}

/* Container for actual content */
div#content {
  clear:left;
  position: relative; top: 0px; left: 0px;
  margin: 3em 0 0 0;
}

/* Container on TESS pages */
div#tcontent {
  clear:left;
  position: relative;
  margin: 1em 0 0 1em;
}

div#topfader {
  position: fixed; top: 0px; left: 0px;
  width: 100%;
  height: 5px;
  background: url('../img/fader_top.png') repeat-x;
}

/*
  Top Navigation Menu
*/

#toplogo {
  width: 180px;
  height: 60px;
  float:left;
}

#topheader {
  position: relative;
  margin: 0 4em 0 200px;
  /*max-width: 80em;*/
  /*min-width: 50em;*/
  width: 810px;
  height: 52px;
}

#toplogo a {
  display: block;
  margin: 5px 0 0 5px;
}

#topnav {
  margin-left: 0;
  line-height: normal;
}

#topnav ul {
  position: absolute; left: 0px; bottom: 10px;
  min-width: 80em;
  width: 100%;
  background: url('../img/navbar_bg.png') repeat-x;
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
}

#topnav li {
  float: left;
  margin: 0;
  padding: 0 0 0 1px;
  background: url('../img/tab_left.png') no-repeat top left;
}

#topnav a, #topnav p {
  display: block;
  margin: 0;
  padding: 0.5em 0.8em;
  background: url('../img/tab_right.png') no-repeat top right;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

#topnav a, #topnav a:visited, #topnav a:active {
  color: #eee;
}

#topnav a:focus, #subnav a.selected:focus {
  outline: none;
}

#topnav li:hover, #topnav li:hover a {
  background-position: 0px -200px;
}

#topnav li:hover p {
  background-position: 0px 0px;
}

li#dummy_left:hover, li#dummy_right:hover {
  background-position: 0px 0px;
}

#topnav li.selected a  {
  margin-top: 0;
  background: url('../img/tab_sel_bg.png') repeat-x;
  background-position: 0px 0px;
  color: #a3a;
}

/*
  Left-Side Navigation Menu
*/

#sidecnt {
  margin: 10px 0 0 0;
  padding: 0 0 0 10px;
  width: 170px;
  line-height: normal;
}

#subnav {
  margin: 0 0 0 0;
}

#subnav ul {
  margin: 0;
  padding: 0;
  border-top: #ccc solid 1px;
  list-style: none;
}

#subnav ul ul {
  border: none;
}

#subnav li {
  margin: 0;
  padding: 0;
}

#subnav ul a {
  display: block;
  position: relative;
  padding: 0.25em 0 0.25em 1em;
  margin-right: 0px;
  background: #fbfbfb;
  border: #ccc 1px solid;
  border-top: none;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  color: #444;
}

#subnav ul ul a {
  padding-left: 2em;
  font-size: 0.9em;
  font-weight: normal;
}

#subnav ul a {
  color: #444;
}

#subnav ul a:hover {
  color: #33a; /*war: #a3a;*/
  background: #eee;
  text-decoration: underline;
}

#subnav ul a:focus, #subnav ul a.selected:focus {
  outline: none;
}

#subnav ul a.selected {
  color: #a3a;
  background: #fff;
  font-weight: bold;
}

#subnav ul a.selected:hover {
  color: #a3a; /*war: #33a;*/
}