/* Begin RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, 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-size:100%;
/* vertical-align:baseline;*/
background:transparent;
}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
#logolinks img { padding:25px }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #CCC; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* End RESET */
body, select, input, textarea { color:#8A8A8A; font-family: Lucida Grande, Lucida Sans Unicode, Sans-serif, "Trebuchet MS", Tahoma, Arial, Sans-serif; }
h1,h2,h3,h4,h5,h6 { font-weight:bold; }
html { overflow-y:scroll; }
a:hover, a:active { outline:none; }
a, a:active, a:visited { color:#8A8A8A; }
a:hover { color:#000; }
ul, ol { margin-left:1.8em; }
ol { list-style-type:decimal; }
small { font-size:85%; }
strong, th { font-weight:bold; }
#columns {position: relative;}
#markenlogo {position: absolute; bottom:0px; left: 30px; font-size: 11px;}
.linkliste { vertical-align:top; padding:50px 0px 50px 50px; text-align: left; display: block; font-size: 12px; line-height: 120%;}
.linkliste a {color: #000000; padding-left: 0px; text-decoration: none; width: 160px; display: inline;}
textarea { overflow:auto; }
input[type="radio"] { vertical-align:text-bottom; }
input[type="checkbox"] { vertical-align:bottom; }
label, input[type=button], input[type=submit], button { cursor:pointer; }
/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr; }
.hidden { display:none; visibility:hidden; }
.clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0; visibility:hidden; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }
/* Primary Styles */
html, body { background:#FFF; }
#container { background:#FFF; margin:0 auto; position:relative; width:950px; }
#sprechblase { width:240px; height: 200px; position:absolute; top: 210px; left: 35px; background: url(../images/sprechblase.png) 0 0 no-repeat;}
#sprechblase h1 { color: #D8277A; font-size: 22px; padding: 25px 0 0 20px; margin: 0px; font-weight: normal; text-align: center }
#sprechblase h2 { color: #000000; font-size: 18px; padding: 15px 10px 0 15px; margin:0px; font-weight: normal; line-height: 24px; text-align:center }
#sprechblase p { color: #8A8A8A; font-size: 11px; padding: 35px 15px 0 15px;; weight: 225px; display: block; font-weight: normal; line-height: 16px; text-align:right; }
#sprechblase a { text-decoration: none }
.erfolgslink { color: #8A8A8A; font-size: 11px; position: absolute; bottom: 35px; right: 20px; text-decoration: none; }
#header { height:300px; background: url(../images/background-top-grey.jpg) 0 0 no-repeat; }
#logo { text-align:right; padding-top: 50px; padding-right: 50px; }
/* Menu */
#menu {
margin: 0 50px 0 0;
padding-top:10px;
float:right;
display: inline;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
float: left;
margin-right: 2px;
padding: 20px 20px 15px 20px;
text-decoration: none;
font-weight: normal;
font-size: 11px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: #33724A;
}
#menu .expandet a {
background: #33724A;
}
#downloadblock {
padding: 5px 0;
}
#downloadblock img {
float: right;
padding-left: 20px;
background: #ffffff;
}
#downloadblock h1 {
font-size: 14px;
color: #000000;
padding: 0 0 10px 0;
margin: 0;
}
/*#downloadblock a, #downloadblock a:visited, #downloadblock a:active {
padding: 8px;
background: #AAA198;
color: #ffffff;
text-decoration: none;
}*/
#downloadblock a.downloadlink, #downloadblock a.downloadlink:visited, #downloadblock a.downloadlink:active {
padding: 8px;
background: #AAA198;
color: #ffffff;
text-decoration: none;
}
/*
#downloadblock a:hover {
background: #e1dad5;
color: #ffffff;
}
*/
#downloadblock a.downloadlink:hover {
background: #e1dad5;
color: #ffffff;
}
.col1 { float:left; padding-right:30px; width:300px; }
#nav { color:#8A8A8A; font-size:16px; margin:120px 0px 30px 35px; }
#nav ul, #nav li { list-style:none; margin:0; }
#nav li { margin-bottom:12px; } /* 12px = 22px-10px SchriftgröÃe */
#nav li.last { margin-bottom:0; }
/*
Sprite
- Bild muss angepasst werden, Gesamthöhe 120px = (6 x 22px)-10px, Schrifthöhe 10px
- Hover Status im Sprite hinzufügen
- background-position entsprechend im CSS anpassen ;-)
*/
#nav a { color:#a79e97; text-decoration:none; }
#nav a:hover { color:#000; }
#nav a.current, #nav a.subcurrent { color:#000; }
#nav a.pdf { background: url(../images/symbole-druck-pdf-etc.gif) 0 -15px no-repeat; padding: 10px 0px 0px 32px; margin: 10px 0px; height: 40px;}
#nav a.print { background: url(../images/symbole-druck-pdf-etc.gif) 0 -53px no-repeat; padding: 10px 0px 0px 32px; margin: 10px 0px}
#nav a.email { background: url(../images/symbole-druck-pdf-etc.gif) 0 -135px no-repeat; padding: 10px 0px 0px 32px; margin: 10px 0px}
#nav a:hover.pdf { background: url(../images/symbole-druck-pdf-etc.gif) -300px -15px no-repeat; }
#nav a:hover.print { background: url(../images/symbole-druck-pdf-etc.gif) -300px -53px no-repeat;}
#nav a:hover.email { background: url(../images/symbole-druck-pdf-etc.gif) -300px -135px no-repeat;}
#nav ul li ul li { padding-left: 25px; }
#content { font-size:11px; line-height:16px; }
.col2 { float:right; width:620px; font-size:11px; line-height:16px;}
.col2 h1 {color: #D8277A; font-size: 26px; line-height:130%; font-weight:normal; padding: 0 20px 7px 0;}
.col2 h2 {color: #000; font-size: 12px; font-weight: normal; padding: 7px 20px 0 0;}
.col2 p { font-size:11px; padding:7px 40px 7px 0px;}
.col2left {float:left; width:410px; font-size:11px; line-height:160%;}
.col2left h1 {color: #D8277A; font-size: 26px; line-height:130%; font-weight:normal; padding: 0 20px 7px 0;}
.col2left h2 {color: #000; font-size: 12px; font-weight: normal;}
.col2left h3 {color: #000000; font-weight: bold; font-size: 20px; line-height: 30px; font-weight: normal; padding: 0px; /*background: #F5F1EE;*/}
#col2right {float:left; padding: 15px; width:178px; font-size:12px; line-height:21px; background:#fbf8f6; border:1px solid #F5F1EE; /*e1dad5*/;}
#col2right h1 { font-size: 14px; color:#000;}
#col2right ul, #col2right li {list-style:none; margin: 0px; float:left; width: 120px; }
#col2right ul {margin-top: 5px; }
#col2right a:link { text-decoration:none; color:#AAA198; }
#col2right a:visited { text-decoration:none; color:#AAA198; }
#col2right a:hover,
#col2right a:active,
#col2right a:focus { text-decoration:none; color: #000000}
#col2right a.current { color:#5b5147; font-weight: bold; padding-left: 12px; background: url(../images/submenue-current.png) 0 2px no-repeat;}
#vollebreite ul {margin: 0px;}
#vollebreite li { float:left; list-style:none; padding:0; width:620px; border-bottom: 1px solid #F5F1EE; }
#vollebreite p { width: 350px; padding:10px 0px 10px 0px; /* float: left;*/ font-size: 100%; font-weight: normal; /*line-height: 100%;color: #5B5147*/}
#vollebreite li img {float: right}
#vollebreite h2 {font-size: 150%; line-height: 130%; font-weight: normal; margin: 15px 0px 5px 0px; padding: 0px; color: #D8277A}
#vollebreite h2 a, #vollebreite h2 a:visited {color: #D8277A; text-decoration:none}
#vollebreite h2 a:hover {color: #000000}
#vollebreite h2 span {font-size: 70%; font-weight: normal; margin: 15px 0px 5px 0px; padding: 0px; color: #000000;}
#vollebreite h3 {font-size: 120%; line-height: 140%; font-weight: normal; margin: 10px 0px 10px 0px; padding: 0px; color: #000000;}
#vollebreite h4 {font-size: 110%; line-height: 140%; font-weight: normal; margin: 10px 0px 5px 0px; padding: 0px; color: #D8277A;}
#vollebreite h1.rezeptur {font-size: 30px; font-weight: normal; margin: 15px 0px 5px 0px; padding: 0px; color: #000000;}
#vollebreite p.produkttext { width: 400px; padding:10px 0px 20px 0px; clear:left; float:none; font-size: 11px; font-weight: normal; /*line-height: 100%;color: #5B5147*/}
#vollebreite .zweidrittelbreite { width: 500px;}
#main-image { margin-bottom:30px; width: 620px; background: #f0f0f0; position: relative;}
#main-image img { margin: 0px, padding: 0px;}
#main-image h1 { position: absolute; left: 0px; bottom: 15px; background: #ffffff; padding: 5px 15px 5px 18px; color: #000000; font-size: 11px; font-weight: bold;filter: alpha(opacity=50);-moz-opacity: 0.50;opacity: 0.50;}
#main-image h1 span { color: #777777; font-size: 11px; font-weight: norman;}
.rezeptnummer { color: #ffffff; margin-left:0; background: url(/hemelter-muehle/assets/images/sprechblase-mini.gif) 5px 0px no-repeat; display: inline-block; font-size: 12px; vertical-align:text-top; width: 40px; height: 30px; padding: 2px 0px; text-align: center }
a.tipplesen { color: #ffffff; background: #8A8A8A; padding:5px 0px; font-size: 13px; text-decoration:none; float:right; width: 210px; text-align: center }
a.tipplesen:hover { color: #ffffff; background: #D8277A; }
.thumbs { margin-left:0; }
.thumbs li { float:left; list-style:none; margin-bottom:2px; margin-right:2px; padding:0; width:93px; }
.thumbs li.last { margin-right:0; }
.thumbs img { display:block; }
#zutaten { margin: 25px 0px }
#zutaten table { border:0px; border-bottom: 1px solid #000000; background:#F5F1EE; }
#zutaten td { border-bottom:1px solid #ffffff; padding: 5px; color: #000 }
.zubereitungstitel { color: #ffffff; background: #ffffff; }
/* ########## Bilderalbum ############ */
#bilderalbum { width:610px; padding-left: 0px; background: #ffffff; }
.bild { float: left; padding-left: 0px; background: #ffffff; margin: 0 2px 2px 0px }
.letztesbild { float: left; padding-left: 0px; background: #ffffff; margin: 0 2px 2px 0px }
.clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0px; visibility:hidden; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }
/* ########## Tooltip Styles ##########*/
.tip {
color: #5B5147;
width: 500px;
background:#f0f0f0;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;
z-index:1000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #AAA198;
padding: 0px;
font-size: 20px;
font-weight: normal;
text-align: left;
/*width: 400px;*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #888 0px 2px 6px;
-moz-box-shadow: #888 0px 2px 6px;
box-shadow: #888 0px 2px 6px;
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#fff));
background: -webkit-linear-gradient(#e8e8e8, #fff);
background: -moz-linear-gradient(#e8e8e8, #fff);
background: -ms-linear-gradient(#e8e8e8, #fff);
background: -o-linear-gradient(#e8e8e8, #fff);
background: linear-gradient(#e8e8e8, #fff);
-pie-background: linear-gradient(#e8e8e8, #fff);
behavior: url(/PIE.htc);
}
.tip img { float: left; padding-right: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
.tip h1 { font-size: 20px; color: #000000; padding: 40px 20px 20px 20px;}
.tip p { font-size: 12px; color: #000000; padding: 0px 20px 20px 20px;}
.tip p span {font-size: 11px; font-weight: bold; color: #D8277A; padding-top: 10px}
.tipprahmen {border:0px; margin-top: 20px; }
.tip_trigger {border: 0px; background: #ffffff; text-decoration: none; }
.tip_trigger { background: url(/hemelter-muehle/assets/images/hm-rezeptur.gif) no-repeat top right; padding-right: 65px; padding-top:20px; font-size: 14px;}
#footer { clear:both; color:#000; font-size:10px; line-height:15px; height:165px; background:#F5F1EE; margin: 70px 0px 40px 0px}
#footer h1, #footergreen h1 {font-size: 16px; font-weight: 400; font-family: 'Ubuntu', sans-serif; line-height: 1; margin-bottom:0}
#footer a:link { text-decoration:none; color:#8A8A8A; }
#footer a:visited { text-decoration:none; color:#8A8A8A; }
#footer a:hover,
#footer a:active,
#footer a:focus { text-decoration:none; color: #000}
#footer ul, #footer li {list-style:none; margin: 0px; float:left; width: 140px;}
#footer ul {margin-top: 10px; height: 90px; }
#footer li {padding-bottom: 3px;}
.footer-maxiback { margin: 20px 0px 30px 30px; width: 150px; float:left; /*background: url(../images/footer-headlines-neu.gif) 0 0 no-repeat;*/}
.footer-rubinmehl { margin: 20px 0px 0px 0px; width: 150px; float:left; /*background: url(../images/footer-headlines-neu.gif) 0 -200px no-repeat;*/}
.footer-service { margin: 20px 0px 30px 0px; padding-left: 20px; float:left; border-left: 1px solid #a79e97; /*background: url(../images/footer-headlines-neu.gif) 20px -400px no-repeat;*/}
.footer-servicelinks { margin: 20px 0px 30px 20px; padding-left: 0px; float:left; }
#footergreen { background:#33724A; height:165px; line-height: 12px; width:210px; float:right;/* background: #33724A url(../images/footer-headlines-neu.gif) 20px -580px no-repeat;*/ color: #ffffff;}
.inside-green { margin: 20px 0 0 20px;}
#footergreen a, #footergreen a:link, #footergreen a:visited {text-decoration:underline; color:#ffffff; font-weight: bold; }
#footergreen a:visited {color: #fff;}
#footergreen a:hover,
#footergreen a:active,
#footergreen a:focus { text-decoration:none; color:#000;}
#footergreen h1 {color: #ADC9B8}
#footergreen h2 {padding-top: 10px; font-weight: normal; font-size: 90%}
#footerprint { display:none;}
h5 { background: #D8277A; color: #000000; padding: 10px; width: 400px; display: block;}
.loginlink { background: #F5F1EE; color: #897c74; position: absolute; left: 0px; top: 0px; padding: 10px 15px 5px 15px;}
.loginlink a, .loginlink a:visited {color: #897c74; text-decoration: none; font-size: 11px;}
.loginlink a:hover {color: #000000}