/* =stylesheet for u-c-m.de
================================================ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; 
	font-family: inherit; vertical-align: top; list-style: none;}
body {font-size: 62.5%; font-family: "Helvetica Neue", Arial, sans-serif; color: #333; text-align: center; background: #fff url(/images/header.png) 0 0 repeat-x; margin: 0; padding: 0; height: 100%;}
img {border: none;}

/* =typography
================================================ */
p {font: normal 1.2em/1.6 "Helvetica Neue", Arial, sans-serif; padding-bottom: 1em;}
p.intro {font-size: 1.5em; color: #000;}
b {color: #000;}
em {font-style: italic; font-family: Georgia, "Times New Roman", serif;}
li {font-size: 1.2em;}
a {color: #369;}
a:hover {color: #036; text-decoration: underline;}

/* =header
================================================ */
#header-wrap {background: #233d54 url(/images/topbar.png) repeat-x;}
#header {position: relative; width: 960px; height: 100px; background: url(/images/header.png) center bottom no-repeat; margin: 0 auto;}
#header h1 a {position: absolute; top: 25px; left: 0; width: 292px; height: 59px; background: url(/images/logo.png) no-repeat; text-indent: -9999px; text-decoration: none; border: none;}

/* =banner
================================================ */
#banner-wrap {text-align: left; background: #233d54; border-top: 1px solid #395874; margin: 0 auto;}
#banner {width: 960px; background: url(/images/banner.png) center top no-repeat; padding: 30px 20px; margin: 0 auto; overflow: auto;}
#banner h2 {font-size: 4em; font-family: "Helvetica Neue", Arial, sans-serif; color: #fff; letter-spacing: .1em; background: none; padding: 0; margin: 0;}
#banner img {float: right; width: 558px; height: 258px; border: 1px solid #4e738d;}

/* =intro
================================================ */
#intro {float: left; width: 380px;}
#intro h2 {font: normal 1.9em Georgia, "Times New Roman", serif; padding: .5em 0;}
#intro h2 span {font-size: 1em; color: #001933;}
#intro p {color: #fff;}
#intro li {font-size: 1.3em; color: #fff; line-height: 1.6em; background: url(/images/tick.png) 0 .5em no-repeat; padding: .5em 0 .5em 22px;}

/* =nav
================================================ */
#nav {position: absolute; bottom: 0; right: 0; list-style: none;}
#nav li {float: left; display: inline; margin-left: 20px;}
#nav a {float: left; display: inline; font: normal 1em "Helvetica Neue", Arial, sans-serif; color: #fff; text-decoration: none; text-transform: uppercase; 
	text-shadow: #000 1px 1px 1px; letter-spacing: 1px; padding: 0 0 20px 0;}
#nav a:hover {background: url(/images/triangle-hover.png) center bottom no-repeat;}
#nav a:active {padding: 1px 0 19px 0;}
#segments #nav li#button2 a,
#projects #nav li#button3 a,
#shareholders #nav li#button4 a,
#press #nav li#button5 a {background: url(/images/triangle-on.png) center bottom no-repeat;}

/* =lang
================================================ */
#lang {position: absolute; top: 0; right: -20px; background: url(/images/links-right.png) right no-repeat; padding-right: 56px;}
#lang ul {float: right; list-style: none; height: 26px; background: url(/images/links-left.png) left no-repeat; padding-left: 56px;}
#lang li {float: left; background: url(/images/links.png) repeat-x; padding: 0 15px;}
#lang li#current a {color: #516170; text-decoration: none; cursor: default;}
#lang a {font: 1em; line-height: 26px; color: #000;}

/* =content
================================================ */
#content-wrap {background: url(/images/content.jpg) 0 0 repeat-x;}
#content {position: relative; width: 1000px; text-align: left; margin: 0 auto 50px auto; overflow: auto;}
#content h2 {font: normal 2em Georgia, "Times New Roman", serif; color: #036; padding: .7em 0 .3em 0; margin: 1em 0 .6em 0;}
#content h3 {font: bold 1.3em "Helvetica Neue", Arial, sans-serif; color: #000; padding: .7em 0 .4em 0;}

.checklist li {line-height: 1.6em; list-style-type: square; list-style-position: inside; padding-bottom: 1em;}
.left {float: left; margin: .3em 20px 1em 0;}
.right {float: right; margin: .3em 20px 1em 0;}
.shareholder-logo {margin: 20px 20px 20px 0;}

/* =subnav
================================================ */
.subnav li a {display: block; width: 240px; line-height: 1.6em; color: #333; text-decoration: none; background: url(/images/subnav-off.png) 4px .9em no-repeat; padding: .5em 0 .5em 20px; border-bottom: 1px solid #cce6ff;}
.subnav li a:hover {color: #369; background-color: #fff;}
.subnav li a.selected {font-weight: bold; color: #000; background-color: inherit; background-image: url(/images/subnav-on.png); cursor: default;}
.subnav li a.selected span {font-weight: normal;}
.subnav li a span {font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #888;}

/* =col
================================================ */
.col {float: left; padding: 10px 20px; overflow: auto; /* IE6 fix */}
.narrow {float: left; width: 260px;}
.medium {float: left; width: 360px;}
.wide {float: left; width: 660px;}

/* =service
================================================ */
#content .service {padding: 8px 0; overflow: auto;}
#content .service h3 {font: bold 1.3em "Helvetica Neue", Arial, sans-serif; color: #ccc; background: none; padding: 0; margin: 0 0 .3em 0;}
#content .service img {float: left; width: 48px; height: 48px; margin-right: 17px;}
#content .service p {padding-bottom: 0; margin-left: 65px;}

/* =segment
================================================ */
#content .segment {padding: 8px 0; overflow: auto;}
#content .segment h3 {font: bold 1.3em "Helvetica Neue", Arial, sans-serif; color: #ccc; background: none; padding: 0; margin: 0 0 .3em 0;}
#content .segment img {float: left; width: 50px; height: 50px; border: 1px solid #4e738d; margin: .3em 13px 0 0;}
#content .segment a:hover img {opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80);}
#content .segment p {padding-bottom: 0; margin-left: 65px;}

/* =toggle
================================================ */
div.off, div.on {cursor: pointer; background-position: right 1.5em; background-repeat: no-repeat; padding-right: 20px; height: 8.5em;}
div.off img, div.on img {float: left; border: 1px solid #4e738d; margin: 1em 20px 0 0;}
div.off p, div.on p {font-style: italic; font-family: Georgia, "Times New Roman", serif;}
div.off:hover, div.on:hover {color: #369;}
div.off:hover img, div.on:hover img {opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80);}
div.off {background-image: url(/images/maximize.gif);}
div.on {background-image: url(/images/minimize.gif);}
div.more {padding: 1em 0;}

/* =form
================================================ */
form {margin: 15px 0;}
form input[type="text"] {width: 200px; font: 1em "Helvetica Neue", Arial, sans-serif; background: #fff; padding: 3px; border: 1px solid #bbb; border-top: 1px solid #777;}

/* =button
================================================ */
input.button,
button {width: 160px; height: 30px; font-size: 1.5em; font-family: "Helvetica Neue", Arial, sans-serif; color: #000; cursor: pointer; background: url(/images/button.png); border: 0;}
input.button:hover,
button:hover {background-position: 0 -30px;}
input.button:active,
button:active {background-position: 0 -60px; outline: none; /* hide dotted outline in Firefox */}

/* =project
================================================ */
a.project-small {float: left; width: 160px; height: 160px; /* IE6 will not cope with ems here */; font-size: 1.3em; padding-bottom: 20px; margin: 0 60px 60px 0;}
a.project-small img {display: block; width: 160px; height: 100px; background: url(/images/shade.png) bottom repeat-x; padding-bottom: 7px;}
img.project-large {width: 400px; height: 250px; background: url(/images/shade.png) bottom repeat-x; padding-bottom: 7px; margin-bottom: 30px;}

/* =articles
================================================ */
table#articles {width: 99%; float: left; font-size: 1.3em; line-height: 1.6; overflow: hidden;}
table#articles td {vertical-align: middle; padding: 7px 10px;}
table#articles td.date {font-size: .8em; font-weight: bold; text-transform: uppercase; text-align: right;}

/* =paginate
================================================ */
.paginate {}
.paginate strong,
.paginate a {font-weight: bold;}
.paginate strong,
.paginate a:hover {color: #000;}
	
/* =footer
================================================ */
#footer-wrap {background: #9cf; border-top: 1px solid #344657; border-bottom: 1px solid #cce6ff;}
#footer {width: 1000px; text-align: left; padding: 20px 0; margin: 0 auto; overflow: auto;}
#footer h2 {font: normal 2em Georgia, "Times New Roman", serif; color: #fff; padding-bottom: .3em; margin-bottom: .6em;}
#footer p {color: #369;}
#footer b {color: #369;}
#footer em {color: #369;}

#footer a.logo {display: block; float: left; text-indent: -9999px; text-decoration: none; border: none; margin: 10px 0; overflow: auto;}
#footer a.hellmann {width: 127px; height: 42px; background: url(/images/shareholders/hellmann-small.png) 0 0 no-repeat;}
#footer a.hellmann:hover {background-position: 0 -42px; outline: none;}
#footer a.uke {width: 158px; height: 42px; background: url(/images/shareholders/uke-small.png) 0 0 no-repeat;}
#footer a.uke:hover {background-position: 0 -42px; outline: none;}

/* =end
================================================ */
#end-wrap {background: #9cf;}
#end {width: 1000px; text-align: left; padding: 20px 0; margin: 0 auto; overflow: auto;}
#end p {height: 48px; color: #369;}
#end p#certificate {background: url(/images/glc.png) 0 50% no-repeat; padding: 0 0 0 50px;}

/* =ie6 hacks
================================================ */
* html #segments #content-wrap #content div.narrow {position: absolute; top: 0; right: 0;}