/***  CSS TEMPLATE  ***/
/*
#template {
      * visibility *
      display:;
      visibility:;
      * positioning *
      clear:;
      float:;
      top:;
      left:;
      width:;
      height:;
      margin:;
      * look *
      padding:;
      background:;
      border:;
      * text style *
      font:;
}*/



/***  STANDARDS  ***/

HTML { 
	width: 100%;
	height: 100.1%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000000;
	font-size: 125%; /* scale to 62.5% */
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
BODY {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100.01%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	background: #000000;
}
h1 { font-size: 2.5em }
h2 { font-size: 2em }
h3 { font-size: 1.75em }
h4 { font-size: 1.5em }
h5 { font-size: 1.25em }
h6 { font-size: 1em }
img { 
      border: 0; 
}
p { 
      margin: 0;
}
form, 
fieldset { 
      margin: 0; 
      padding: 0; 
}
fieldset { 
      border: 1px solid #000000; 
}
legend { 
      padding: 0;
      color: #000000; 
}
input, 
textarea, 
select {
      margin: 0;
      padding: 1px;
      font-size: 100%;
      font-family: inherit;
}
input[type=radio],
input[type=checkbox] { 
      margin-right: 5px; 
}
select { 
      padding: 0; 
}
.bold {
      font-weight: bold
}
.underline {
      text-decoration: underline
}
div.clear {
      clear: both;
}

/** CSS "clearfix solution"
that forces any kind of block element to adjust hight to content even though
the content is floated and CSS standards want the content to simply run over 
the bottom line of the container element --  in this case I want to extend the 
<ul> block to its content height **/

.clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
.clearfix {
      display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
      height: 1%;
}
.clearfix {
      display: block;
}
/* End hide from IE-mac */
/** END clearfix solution **/



/*** WEBSITE GRID ***/
body {
	background: #000000 url(doc_images/Design/bg_grey.gif) top right no-repeat;
}
.main-container { 
	font-size: 50%; /* scale to 62.5% */
	background: url(doc_images/Design/bg_top_left4.gif) top left no-repeat;
}
#Main {
	xwidth: 91.4em;
	xmargin: 0 2.8em 0 2.8em;
	height: 100%;
}
#Head {
}
#HeadLeft {
	float: left;
	margin: 2em 2em 6em 2em;
}
#HeadRight {
	float: right; 
	margin: 4em 6em 5.5em 2em;
	padding: 0em 0em 0.5em 0em;
	background: url(doc_images/Design/SpecialUnderline.gif) bottom right no-repeat;
	width: 50%;
	text-align: right;
	font-size: 1.6em;
	font-weight: bold;
}
#HeadLeft img {
}
#HeadRight img {
}
#KeyVisual {
	width: 91.4em;
	height: 18em;
}
#KeyVisual img {
	width: 91.4em;
	height: 18em;
}
#ColumnContainer {
}
#LeftColumn {
	float: left; 
	width: 20%;
	height: 35.6em;
}
#CenterColumn {
	float: left; 
	width: 55%;
}
#RightColumn {
	width: 15%;
	float: left; 
}


/*** CONTENT COLUMNS ***/

#CenterColumn div.Inner {
	margin: 0 2em;
}
#RightColumn div.Inner {
	margin: 0 2em;
}
#CenterColumn .Content {
      clear: left;
      border-bottom: 0 solid #FF6699;
}
.Content {
      font-size: 1.4em;
      font-weight: normal;
	  margin-top: 0.8333em;
}
.Content h2 {
      font-size: 1em;
      color: red;
}
.Content ul {
	list-style-image: url(doc_images/clean-solutions/Bullet-Rot.gif);
	margin-left: 1.8em;
}
.Content a {
	color: #FF0000;
	text-decoration: none;
}
.Content a:hover {
	text-decoration: underline;
}
.Content p {
	margin: 0 0 1.5em 0;
}
/** self clearing rules 
for all standards compliant browsers  **/

#CenterColumn .Content:after,
#RightColumn .Content:after { 
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; 
}
      /* for IE 5.0 see conditional CSS*/
      /* for IE 5.5 and later  */
      /* the toggle (2 parts) between display:inline-block and display: block makes it!
      Important: the clearing effect stops working if you combine the #container { display: inline-block; } and #container { display: block; } rules into one line*/
#CenterColumn .Content,
#RightColumn .Content {
      display: inline-block;
}        
/* 2nd part of the toggle. Mandatory for WinIE but must be hidden from IE-mac */
      /* Hides from IE-mac who needs only first part of the toogle method \*/
#CenterColumn .Content,
#RightColumn .Content {
      display: block; 
}
 /* End hide from IE-mac */
      /* End for self clearing rules for IE */

#CenterColumn .Content div.InnerShell,
#RightColumn .Content div.InnerShell {
      margin: 0 0 1em 0;
}


/** BreadCrumbTrail **/

.BreadCrumbTrail {
      margin: 0 0 0.5em 0.1em;
      overflow: hidden;
}
.BreadCrumbTrail ul {
      margin: 0 0 0 -1.1em;
      padding: 0;
      list-style: none;
      display: inline;
}
.BreadCrumbTrail ul ul {
      margin-left: 0em;
}
.BreadCrumbTrail li {
      display: inline;
}
.BreadCrumbTrail li a {
      color: #e99f28;
      text-decoration: none;
      font-weight: normal;
      font-size: 1.1em;
      padding-left: 1em;
      background: url(doc_images/clean-solutions/Content/BreadCrumbTrail_Arrow_1.gif) 0.2em 0.45em no-repeat;
}
.BreadCrumbTrail li a:hover {
      text-decoration: underline;
      color: #245c93;
}
.BreadCrumbTrail li.active {
      padding-left: 1em;
      background: url(doc_images/clean-solutions/Content/BreadCrumbTrail_Arrow_2.gif) 0em 0.45em no-repeat;
      color: #333333;
      font-weight: normal;
      font-size: 1.1em;
}


/** more CONTENT ELEMENTS **/

/* Page Headline */
.Headline {
	color: #CCCCCC;
	font-size: 2em;
	font-weight: bold;
	line-height: 2.5em;
}


/**  BOTTOM LINE Area  **/




/***  NAVIGATIONS ***/


/** MAIN NAVIGATION **/

#MainNavigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #528606;
	width: 100%;
	height: 2em;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
#MainNavigation li {
	float: left;
}
#MainNavigation a {
	display: block;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	border-right: 1px solid #DDDDDD;
	width: 10.09em;
	height: 1.7em;
}
#MainNavigation li.first a {
	width: 4.9em;
}
#MainNavigation li.last a {
	xborder-right: 0px solid #DDDDDD;
}
#MainNavigation a:hover,
#MainNavigation a.active {
	background: #C7CD45;
}


/** LEFT NAVIGATION **/

#LeftNavigation ul {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}
#LeftNavigation ul ul {
	margin: 0;
}
#LeftNavigation li {
	display: inline-block;
	display: block;
	list-style: none;
}
#LeftNavigation a {
	display: block;
	position: relative;
	padding: 0.1em 1.2em 0.1em 2.7em;
	font-size: 1.2em;
	color: #CCCCCC;
	text-decoration: none;
	font-weight: bold;
}
#LeftNavigation a:hover,
#LeftNavigation a.active {
	color: #CC0000;
}
#LeftNavigation li li a {
	padding-left: 4.5em;
	font-size: 1.3em;
}
#LeftNavigation li li a:hover,
#LeftNavigation li li a.active {
}
#LeftNavigation li li li a {
}
#LeftNavigation li li li li a:hover,
#LeftNavigation li li li li a.active {
}


/** MAIN NAVIGATION **/

#SupportNavigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #FFFFFF;
	xwidth: 100%;
	xheight: 2em;
	border-top: 1px solid #DDDDDD;
}
#SupportNavigation li {
	float: left;
	xdisplay: inline-block;
}
#SupportNavigation a {
	xdisplay: block;
	text-align: center;
	padding: 0.1em 1em;
	font-size: 1.1em;
	line-height: 1.6em;
	color: #999999;
	text-decoration: none;
	font-weight: bold;
	height: 1.7em;
}
#SupportNavigation a:hover,
#SupportNavigation a.active {
}

#Sitemap {
	font-size: 1.2em;
	margin-top: 0.8333em;
	margin-bottom: 1em;
}
#Sitemap ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 1em;
}
#Sitemap a {
	margin: 0px 0px 0px 0.4em;
	padding: 0px 0px 0px 0.8em;
	color: #999999;
	text-decoration: none;
	background-image: url(doc_images/Design/quadrat_999999.gif);
	background-repeat: no-repeat;
	background-position: 0px 0.45em;
}

#LanguageSelection img {
	width: 2.25em;
	height: 1.5em;
}
#LanguageSelection ul {
	padding: 1.2em 0.7em 0 0.7em;
	margin: 0;
	list-style: none;
}
#LanguageSelection li {
	float: left;
}
#LanguageSelection a {
	margin: 0 0.7em 0 0;
}