/*
AUTHOR+COPYRIGHT:
Wilhelmine Freudenthal
Barrierefreies Webdesign / Semantischer Code

CONTACT:
wilhelmine@semantic-coding.net
http://www.semantic-coding.net
Februar 2008

last modified: 13/03/2008
*/

/*
valplast-gruen: #76B41F
hover-gruen: #90CE2E

evident-blau: #0c77bf;
hover-blau: #3aa1e7;
*/

/* -------- Allgemeine HTML-Elemente -------- */
html { background:#DFEFF2 url("img/bg-html.gif") repeat-y 50% 50%; }

body
{
 font-family:Verdana, Helvetica, Tahoma, Arial, sans-serif;
 font-size:12px;
 width:880px;
 margin:auto;
 padding:0;
 position:relative;
 border-left:1px solid #2F92A3;
 border-right:1px solid #2F92A3;
 background: #FFFFFF url("img/bg-body_hand.jpg") no-repeat 100% 0;
 /* background: #FFFFFF url("img/bg-body_smile.jpg") no-repeat 100% 0; */
 color:#0E0E0E;
}

a { color:#76B41F; }
a:hover { color:#90CE2E; }

h1 { font-size:20px; margin:0; padding:0; }
h2 { font-size:18px; color:#0c77bf; font-weight:normal; clear:both; }
h3 { font-size:16px; color:#0c77bf; font-weight:bold; }
h4, h5, h6 { font-size:12px; }

p { margin:4px 0 4px 0; line-height:1.8em; }

strong { font-weight:bold;}
em { font-style:italic;}
acronym { border-bottom:1px dotted #333333;}

#content li { list-style-image:url("img/li-bullet.gif"); }

/* -------- Off-Left Elemente -------- */
#header h1 strong,
#navigation h2,
#navigation p a strong
{ position:absolute; left:-999px; }

/* -------- #header -------- */
#header h1 { display:block; width:880px; height:120px; padding:12px; margin:0; padding:6px 0 0 0; }
#header h1 a { margin-left:12px; display:block; outline:none; width:262px; height:69px; background:url("img/logo-valplast.gif") no-repeat 50% 50% !important; }

/* -------- #main -------- */
#main { margin-top:20px; background:url("img/bg-main.gif") repeat-y 26% 0; padding:0 18px 0 18px; }
#main #clear { clear:both; text-align:center; font-size:11px; padding:60px 18px 18px 18px; margin:0 -18px 0 -18px; background:#FFFFFF url("img/bg-clear.gif") repeat-x -1px 100%; }

.vcard { font-size:0.9em; color:#0c77bf; }
.vcard a { color:#0c77bf; }
.vcard a:hover { color:#3aa1e7; }

.vcard .adr,
.vcard .fax,
.vcard .email,
.vcard .url, #home-site .vcard .fn,
.vcard .tel
{ margin:0 16px 0 16px; }

.company
{
 text-transform:uppercase;
 font-size:0.86em;
 font-weight:normal;
}

.alert { text-align:center; margin:24px 0 24px 0; }
.alert em { font-style:normal; background:url("img/icon-alert.gif") no-repeat 0 50%; padding:10px 0 10px 36px; font-size:1.2em; font-weight:bold; color:#454545; display:inline-block; }

/*.vcard .fax { margin:0 10px 0 22px; }*/

img.float-right { float:right; margin:0 0 20px 12px; }
img.float-left { float:left; margin:0 12px 20px 0; }

/* -------- #content -------- */
#content { width:70%; float:right; }

#content ul.sitemap a { text-decoration:none; padding:0 0 0 14px; background:url("img/icon-arrow.gif") no-repeat 3px 4px; }
#content ul.sitemap a:hover { text-decoration:underline; background-position:3px 100%; }

#content ul.sitemap h3 { font-size:12px; margin:0; }

#content ul.sitemap { margin:0; padding:0; list-style:none; }
#content ul.sitemap li { margin:0 0 20px 0; padding:0 0 0 16px; list-style-image:none; }

#main .kontakt-site li { list-style-image:none; }

#main .kontakt-site form
{
 margin:0;
 padding:0;
 text-align:left;
}

#main .kontakt-site form ul#form
{
 width:266px;
 margin:0; padding:0;
 float:left;
 margin-right:30px;
 padding-bottom:30px;
}

#main .kontakt-site form ul#form li
{
 list-style:none;
 margin:0 0 12px 0;
 padding:2px;
 text-align:left;
}

#main .kontakt-site form .input-name input,
#main .kontakt-site form .input-mail input,
#main .kontakt-site form .input-area textarea,
#main .kontakt-site form li.captcha input 
{
 border-top-width:1px;
 border-bottom-width:2px;
 border-left-width:1px;
 border-right-width:2px;
 border-style:solid;
 border-top-color:#76B41F;
 border-top-color:#76B41F;
 border-bottom-color:#90CE2E;
 border-left-color:#76B41F;
 border-right-color:#90CE2E;
 font-family:Verdana, Helvetica, Tahoma, Arial, sans-serif;
 font-size:12px;
 width:256px;
 background-color:#fafff4;
}

#main .kontakt-site iframe { margin-right:30px; margin-bottom:30px; width:260px; height:290px; }

#main .kontakt-site form li.captcha { position:relative; text-align:center !important; display:block; }
#main .kontakt-site form li.captcha img { position:static; margin:4px auto 4px auto; padding:0; display:block; }
#main .kontakt-site form li.captcha input { width:80px; }

#main .kontakt-site .vcard { color:#0E0E0E; font-size:12px; }

#main .kontakt-site .vcard .adr,
#main .kontakt-site .vcard .fax,
#main .kontakt-site .vcard .email,
#main .kontakt-site .vcard .url,
#main .kontakt-site .vcard .fn,
#main .kontakt-site .vcard .tel
{ margin:0; }

#main .kontakt-site a img { border:2px solid #90CE2E; }
#main .kontakt-site a:hover img { border:2px solid #76B41F; }

#main .kontakt-site #error,
#main .kontakt-site #success { min-height:46px; border:1px solid #90CE2E; text-align:center; padding:10px; padding-left:24px; background:#fafff4 url("img/icon-success.gif") no-repeat 10px 50%; }

#main .kontakt-site #error { border-color:#CD731C; background:#f7d300 url("img/icon-error.gif") no-repeat 10px 50%;}

li.download { padding:4px 0 4px 0; margin:12px 0 0 -12px; list-style:none; list-style-image:none !important; border-bottom:1px solid #BDBFC1; }
li.download a { display:table-cell; padding:4px 6px 4px 6px; background:#d9dde1 url("img/gradient-download.gif") repeat-x 0 0; border:1px solid #BDBFC1; text-decoration:none; }
li.download a:hover { background-color:#f5f6f8; background-image:url("img/gradient-download_reverse.gif"); border:1px solid #8e8e8e; }
li.download a strong { padding-left:18px; background:url("img/icon-download.gif") no-repeat 0 0; }
li.download a:hover strong { background-position:0 100%; }

/* -------- #navigation -------- */
#navigation { text-transform:uppercase; width:25%; margin:0; padding:0; }
#navigation ul, #navigation ul li { margin:0; padding:0; list-style:none; }

#navigation ul { margin:0 0 80px 0; padding:0; } /* margin-bottom haengt zusammen mit: #global-nav bottom -12px; */
#navigation ul li { margin:4px 0 4px 0; padding:0; }
#navigation ul li.current { border-bottom:1px dashed #76B41F; font-weight:bold; color:#76B41F; padding:4px 0 4px 2px; }
#navigation ul li a { display:block; text-decoration:none; padding:4px 0 4px 2px; color:#76B41F; }
#navigation ul li a:hover { background:#76B41F; color:#FFFFFF; }

#navigation p a { display:block; width:160px; height:68px; background:url("img/logo-evident.gif") no-repeat 0 0; }
#navigation p a:hover { background-position:0 100%; }

#navigation #global-nav { position:absolute; width:640px; bottom:-12px; right:0; border-top:1px dashed #76B41F; padding:0 12px 0 0; margin-left:226px; }
#navigation #global-nav li { text-align:right; float:right; margin:0 0 0 10px; }
#navigation #global-nav li a { padding:4px 4px 4px 22px; background:url("img/icon-home.gif") no-repeat 3px 4px; }
#navigation #global-nav li a:hover { background-position:3px 100%; background-color:#76B41F; }

#navigation #global-nav li.home a { background-image:url("img/icon-home.gif"); }
#navigation #global-nav li.sitemap a { background-image:url("img/icon-sitemap.gif"); }
#navigation #global-nav li.kontakt a { background-image:url("img/icon-kontakt.gif"); }

#navigation #global-nav li.home { background:url("img/icon-home.gif") no-repeat 3px 4px; }
#navigation #global-nav li.sitemap { background:url("img/icon-sitemap.gif") no-repeat 3px 4px; }
#navigation #global-nav li.kontakt { background:url("img/icon-kontakt.gif") no-repeat 3px 4px; }

#navigation #global-nav li.current { border-bottom:none; padding:4px 4px 4px 22px; }