/**
 * file:	http://www.infochem.de/layout/screen.css
 * media:	all
 */


/*********************************
 * definition of standard tags
 * that override browser defaults
 *********************************/
html, body {
	margin: 0px;
	height: 101%;
}

body {
	background-color: white;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 75%;
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
	color:       #970073;
	margin:      0px 0px 1em 0px;
	line-height: 1em;
	font-size:   180%;
	font-weight: normal;
}

h1.withImage {
    font-size: 0px;
    color: white;
    background-position: left top;
    background-repeat: no-repeat;
    margin: 4px 0px 2em 0px;
}

h2 {
	color: #970073;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1em;
	margin: 1em 0em 0em 0em;
}

h3 {
	font-size: 1em;
	font-weight: bold;
}
body.approach h3 {
	padding-left: 1em;
}

img {
	border: none;
}

p {
	margin: 0em 0em 1.5em 0em;
}

/******************************************
 * elements of the screen layout
 ******************************************/
/* centered area */
div.canvas {
	margin: 0 auto;
	width: 792px;
	border-left: 1px solid #9B999C;
	border-right: 1px solid #9B999C;
	text-align: left;
}

/* head area */
div.head {
	position: relative;
	width: 100%;
	height: 133px;
	background: url(home_615x133px.jpg) no-repeat;
}
div.head img {
	position: absolute;
	top: 18px;
	right: 26px;
}
div.head div.languages {
	position: absolute;
	top: 10px;
	right: 26px;
}

/* each section has a different header image */
body.company div.head {
	background-image: url(company_head.jpg);
}
body.downloads div.head {
	background-image: url(downloads_615x133px.jpg);
}
body.mining div.head {
	background-image: url(mining_head.jpg);
}
body.news div.head {
	background-image: url(news_615x133px.jpg);
}
body.products div.head {
	background-image: url(produkt_615x133px.jpg);
}
body.services div.head {
	background-image: url(services_head.jpg);
}

/* columns in the content area */
div.column {
	float: left;
}

div.left {
	width: 161px;
	padding-top: 19px; /* 135 */
}
div.center2right div.left {
	width: 270px;
	padding-top: 0px;
	margin-right: 15px;
}
div.center2right div.right {
	width: 270px;
}

div.center {
	width: 363px;
	padding: 20px 0px 1em 26px;
	text-align: justify;
	line-height: 1.3em;
}

/* column used for most of the content */
div.center2right {
	width: 555px;
	padding: 13px 50px 1em 26px;
	text-align: justify;
	line-height: 1.3em;
}
* html div.center2right {
	width: 552px;
}

div.left2right {
	padding: 0em 1em 0em 9px;
	line-height: 1.3em;
}


xdiv.center2right div.left {
	float: left;
}

xdiv.center2right div.right {
	float: right;
}

/******************************************
 * search form
 ******************************************/
form.search {
	margin: 37px 0px 1em 0px;
	padding: 0px;
}
form.search fieldset {
	border: none;
	padding: 0px;
	margin: 0px;
}
form.search legend {
	text-transform: uppercase;
	color: #9c9c9c;
	font-weight: bold;
	font-size: 75%;
	margin-bottom: 0.2em;
	padding-left: 9px;
}
* html form.search legend {
	padding-left: 0px;
}
form.search button {
	float: left;
	width: 20px;
	height: 20px;
	border-top: 1px solid #9c9c9c;
	border-right: none;
	border-bottom: 1px solid #9c9c9c;
	border-left: none;
	background: white url(searchbutton.gif) 3px 2px no-repeat;
	cursor: pointer;
}
form.search input {
	float: left;
	width: 135px;
	border-top: 1px solid #9c9c9c;
	border-right: 1px solid #9c9c9c;
	border-bottom: 1px solid #9c9c9c;
	border-left: none;
	padding-left: 4px;
}
* html form.search input {
	width: 135px;
}

/******************************************
 * page elements
 ******************************************/

/* images floating in text */
img.alignH2 {
	margin-top: 1em;
}

img.left {
	float: left;
	margin-right: 1em;
}

img.right {
	float: right;
	margin-left: 1em;
}

/* special list items */
li.pdf {
	list-style-type: none;
	margin-left: -2em;
}
li.pdf a {
	display: block;
	background: white url(pdficon_small.gif) center left no-repeat;
	padding-left: 2em;
	height: 17px;
}

/* contact information is only visible in printouts */
div.contact {
	display: none;
}


/******************************************
 * some headlines are replaced with images
 ******************************************/
/* some have to be translated ... */

body.home div.center h1 {
	height: 103px;
	font-size: 0px;
	color: white;
	background: url(../content/index_h1.gif) 0px 10px no-repeat;
	margin: -10px 0px 2em 0px;
}

/* ... some not */

body.iccartridge div.center2right h1 {
	height: 108px;
	font-size: 0px;
	color: white;
	background: url(../content/products/software/iccartridge_h1.gif) 0px 10px no-repeat;
	margin: -10px 0px 2em 0px;
}

body.ictools_index div.center2right h1 {
	height: 152px;
	font-size: 0px;
	color: white;
	background: url(../content/products/ictools/index_h1.gif) 0px 10px no-repeat;
	margin: -10px 0px 2em 0px;
}

body.spresiweb div.center2right h1 {
	height: 108px;
	font-size: 0px;
	color: white;
	background: url(../content/products/spresiweb_h1.gif) 0px 10px no-repeat;
	margin: -10px 0px 2em 0px;
}


/********************************************
 * navigation items are represented by lists
 ********************************************/
ul.navigation {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

ul.navigation li {
	margin-left: 0em;
}

/********************************************
 * mainnav = 1st level
 ********************************************/
ul.mainnav {
	height: 2.1em;
	padding-left: 36px; /* 50px */
	background: white url("bgMainnav.jpg") top left repeat-x;
}

ul.mainnav li {
	float: left;
}

ul.mainnav li a {
	display: block;
	line-height: 2.1em;
	padding-left: 21px;
	padding-right: 21px;
	color: #a83185;
	font-weight: bold;
	text-transform: uppercase;
}
ul.mainnav li a:hover {
	text-decoration: none;
    color: #9B9A9F;
}

/* highlight 1st level */
body.company li.company a,
body.downloads li.downloads a,
body.mining li.mining a,
body.news li.news a,
body.products li.products a,
body.services li.services a
{
	color: #9B9A9F;
}


/********************************************
 * subnav = 2nd level
 ********************************************/
ul.subnav {
    border-top: 1px solid #F1F1F1;
}	
ul.subnav ul {
    border-top: none;
}   
ul.subnav li {
	border-bottom: 1px solid white;
}

ul.subnav li a {
	display: block;
	padding: 4px 0px 4px 10px;
	font-weight: bold;
	text-transform: uppercase;
    color: #970073;
	font-size: 0.9em;
	background: white url("bgSubnavItem.jpg") bottom right no-repeat;
}
ul.subnav li.last a {
    background: white url("bgSubnavItemLast.jpg");
}
ul.subnav li li a {
	background-image: none;
	background-color: transparent;
}

ul.subnav li a:hover {
	text-decoration: none;
    font-weight: bold;
}

ul.subnav li.noCaps a {
	text-transform:	none;
}


/********************************************
 * lists in subnav = 3rd level
 ********************************************/
/* hide 3rd level elements */
ul.subnav li ul {
	display: none;
}

/* display 3rd level elements when necessary */
body.databasebuilding	ul.subnav ul.databasebuilding,
body.databases			ul.subnav ul.databases,
body.ictools			ul.subnav ul.ictools,
body.software			ul.subnav ul.software
{
	display: block;
}

ul.subnav li ul li {
	border: none;
    background-image: none;
    background-color: transparent;
}
ul.subnav li {
    background: #e7e7e7 url("bgSubnavContainer.jpg") top left repeat-x;
}

ul.subnav li.last {
    background: white url("bgSubnavContainerLast.jpg") bottom left repeat-x;
}

ul.subnav li ul li a {
	padding-left: 20px;
	font-weight: normal;
}

/* Wir ändern die Klassen der Punkte mit Kindelementen. */
body.databasebuilding ul.subnav li.databasebuilding a,
body.databases ul.subnav li.databases a,
body.ictools   ul.subnav li.ictools   a, 
body.software  ul.subnav li.software  a {
    background-color: transparent;
    background-image: none;
}

/* highlight 3rd level */
body.automatic          ul.subnav li.automatic          a,
body.chemreact41        ul.subnav li.chemreact41        a,
body.chemreact68        ul.subnav li.chemreact68        a,
body.chemsynth          ul.subnav li.chemsynth          a,
body.classify           ul.subnav li.classify           a,
body.czb                ul.subnav li.czb                a,
body.gmrw               ul.subnav li.gmrw               a,
body.iccartridge        ul.subnav li.iccartridge        a,
body.iccheck            ul.subnav li.iccheck            a,
body.icchemdesk         ul.subnav li.icchemdesk         a,
body.iccombichem        ul.subnav li.iccombichem        a,
body.icconvert          ul.subnav li.icconvert          a,
body.iccoor2d           ul.subnav li.iccoor2d           a,
body.icedit             ul.subnav li.icedit             a,
body.icfse              ul.subnav li.icfse              a,
body.icrgroup           ul.subnav li.icrgroup           a,
body.icimage            ul.subnav li.icimage            a,
body.icimageplus        ul.subnav li.icimageplus        a,
body.icmap              ul.subnav li.icmap              a,
body.icregister         ul.subnav li.icregister         a,
body.icsynth            ul.subnav li.icsynth            a,
body.icspreadsheet      ul.subnav li.icspreadsheet      a,
body.manual             ul.subnav li.manual             a,
body.name_reactions     ul.subnav li.name_reactions     a,
body.qualityassurance   ul.subnav li.qualityassurance   a,
body.spresi             ul.subnav li.spresi             a,
body.spresiweb          ul.subnav li.spresiweb          a
{
    font-weight: bold;
}


/********************************************
 * bottomnav = common navigation items at
 * the bottom of the page
 ********************************************/
ul.bottomnav {
	font-size: 75%;
	height: 2.4em;
	background-color: #9B9A9F;
}

ul.bottomnav li {
	float: left;
}

ul.bottomnav li a {
	display: block;
	line-height: 2.4em;
	padding-left: 9px;
	padding-right: 13px;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	background: url(pipe.gif) center left no-repeat;
}
ul.bottomnav li a.first {
	background: none;
}
ul.bottomnav li.right {
    float: right;
}
ul.bottomnav li.right a {
    background: none;
}

/* flags are located to the right */
ul.bottomnav li.languageswitch {
	line-height: 2.4em;
	padding-left: 9px;
	padding-right: 13px;
	float: right;
}

ul.bottomnav li.languageswitch a {
	padding: 0px;
	background: none;
}
* html ul.bottomnav li.languageswitch {
	padding-top: 6px;
}


/******************************************
 * sitemap is based on navigation lists
 ******************************************/
div.sitemap ul {
	height: auto;
	background-color: transparent;
	padding: 0em 1em 3em 0em;
	width: 50em; /* 59em */
	margin:	0em 1em 3em 0em;
}	

div.sitemap ul li {
	float:	left;
	margin:	0em 2em 2em 0.3em;
}
div.sitemap ul li.mining {
	margin-bottom:	10em;
}

div.sitemap ul ul{
	width: auto;
	padding:	0em;
	margin: 0em 0em 0.5em 0.5em;
}	

div.sitemap ul ul li {
	float: none;
	margin:	0em	0em 0em 0em;
}	

div.sitemap ul ul ul{
	margin: 0em 0em 0em 1em;
}	
div.sitemap ul.mainnav {
	background-image: none;
}
div.sitemap ul.mainnav li a {
	display: inline;
	text-transform: none;
	line-height: 1em;
	background-color: transparent;
	color: black;
	padding: 0em;
	font-weight: bold;
}

div.sitemap ul.mainnav li ul li a {
	font-weight: normal;
}

div.sitemap ul.subnav {
    border-top: none;
}   
div.sitemap ul.subnav li {
	background-image: none;
	background-color: white;
}
div.sitemap ul.subnav li a {
    background-image: none;
}


/* show 3rd level */
div.sitemap ul.subnav ul {
	display: block;
}

div.sitemap ul.subnav li ul.subnav li {
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

/*************************************
 * teaser area (e.g. on homepage)
 *************************************/
div.teaser {
	position: relative;
	width: 151px;
	height: 127px;
	background: #A83185 url(bgTeaser.gif) top left no-repeat;
	color: white;
	padding: 8px 0px 8px 8px;
}
div.teaser h1 {
	font-size: 1.3em;
	color: white;
	line-height: 1.5em;
}
div.teaser p.date {
	position: absolute;
	bottom: 8px;
	font-size: 0.8em;
	margin: 0px;
}

/******************************************
 * some inline formats
 ******************************************/
span.productName {
	font-style: italic;
	font-size: 0.7em;
}
* html span.productName {
	font-size: 0.8em;
}

span.smallLetters {
	text-transform: lowercase;
}

span.sup {
	position: relative;
	top: -0.3em;
	font-size: 0.7em;
}
* html span.sup {
	top: -0.4em;
	font-size: 0.8em;
}

h2.button {
	line-height:    25px;
    color:          #a83185;
	margin-bottom:  1em;
	background:     white url("bgMainnav.jpg") top left repeat-x; 
	text-align:     center;
	vertical-align: middle;
}