@charset "utf-8";
/* CSS Document */
/* --Reset-- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,footer,form,
header,hgroup,html,hr,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var
{background:transparent; border:0 none; margin:0; padding:0; border:0; outline:0; vertical-align:top;}
blockquote, q {quotes:none;}
table, table td {padding:0;border:none;border-collapse:collapse;}
img {vertical-align:top;}
embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}
/* --End Reset-- */
/* --Allgemein-- */
html,body,#content {width:100%; height:100%;}
html{background:url(/images/pathway.jpg) no-repeat  center center fixed; background-size:100% 100%;	background-color: #333333;}
body{margin: 0px; padding: 0px; line-height: 1.5em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666; hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}
p,pre,li,h1,h2,h3,h4,h5,h6,h7,address {-moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;}	
h1{font-size: 26px; color:#666; line-height: 28px;}
h2{font-size: 22px; color:#366; line-height: 24px;}
h3{font-size: 18px; color:#366; line-height: 20px;}
.clear{clear:both;}
#page{margin:10px 10px 10px 60px; max-width:1200px; width:92%; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
/* --Mobile first - alle Dokument-Blöcke bekommen 100% Breite-- */
header,article,section,aside,footer{-webkit-flex: 1 100%; flex: 1 100%; min-width:200px; display:block;}
nav,nav a{padding: 4px; margin: 0px; -webkit-flex: 1 100%;	flex: 1 100%;}
article, aside{align-self:flex-start}
aside{background-color: #336666; padding:0px 0px 40px 10px; min-width:220px; max-width:220px; overflow: hidden; border-bottom-left-radius:10px; box-sizing: border-box;}
/* --Ende Allgemein-- */
/* --Admin-- */
#adminframe{position:fixed; bottom:0px; left:0px; display:block; width:150px; color:white; background-color: gray; border-color:blue; border-style:dashed; border-width: 4px; padding:4px; z-index:20;}
#admin{color:black; background-color:white; padding:6px; text-align:left;}
.toolbarElement img{margin:0px; padding:0px;}
.admccat_image img{width:70px; height:auto;}
/* --End Admin-- */
/* --Backend-- */
#adminnav{}
#adminnav table, table td{padding:0.2em;}
/* --Ende Backend-- */
header{display:block; text-align:center; background: #336666; overflow:hidden; height:auto; padding:10px 0px 10px 10px; border-top-left-radius:10px; border-top-right-radius:10px;}
#head{height:auto; width:100%; text-align:center; vertical-align: central;}
/* Linke Navi-Spalte */
#content img{height:auto;max-width:95%;}
#navi img{padding-bottom:10px;}
nav{display:block; width:100%; margin: 0; padding: 0; border: none;}
nav hr{ border:ridge 2px;}
/*Search*/
#search-txt{font-weight:bold; margin:0px; padding:0px; color:#FFFFFF;}
#searchfield{background:white; color:black ; width:70%; }	
#sendsearch{background: url(/images/find.png) no-repeat; width:35px; height:30px;}
#search_box{width:100%; height: 35px; text-align: right; background-color: #F5F5F5; border-top-left-radius:10px; border-top-right-radius:10px;}
#search_box form {margin: 0; padding: 5px 20px;}
#search_box #input_field{height: 20px; width: 300px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; border: 1px solid #ccc; background: #fff;}
#search_box #submit_btn {height: 24px; width: 100px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; color:#666666; border: 1px solid #CCCCCC; background: #FFFFFF;}
/* Ende Search */
/* Navigation */
#navigation{margin:10px 0px 0px 0px; max-width:220px; overflow:hidden;}
nav a{width:100%; max-width:210px; display: inline-block; background:#666; color:#fff; border-top:1px solid #fff; margin:0px auto; text-decoration: none; text-align:left; padding: 2px 10px 2px 10px;
box-sizing: border-box; word-break: break-word;}
#navigation  ul{list-style:none; margin-left:0;}
nav a:hover{background-color: #fff; color:#666;}
nav a:active{background-color: #CCCCCC}
.menu1{background-color: #666; color:#fff;}
.menu2{background-color: #999; color:#fff;}
.menu3{background-color: #ccc; color:#fff;}
.menu4{background-color: #ccc; color:#fff;}
.menu5{background-color: #ccc; color:#fff;}
.menu6{background-color: #ccc; color:#fff;}
.menu7{background-color: #ccc; color:#fff;}
.contact{border-bottom: 1px solid #fff;}
/* Ende Navigation */
/* Bigbasket */
#bigbasket{width:100%; border:none; margin: 10px 5px 5px 0px; color:#fff;}
#bigbasket a{ width:auto; border:none; background:none; color:#fff; font-weight:bold; padding-bottom:5px;}
#basket-txt{border-bottom: 2px solid #fff; text-align: bottom; font-weight: bold; colspan: 3; padding-bottom:2px;}	
#basket-x{padding-bottom:0px;}
#basket-x :hover{background:#CCCCCC;}
#basket-name{margin:3px 0px;}
#basket-qty{text-align:left; white-space: nowrap; float:left; padding-bottom:5px;}
#basket-sum{text-align:right; margin-right:5px; vertical-align:bottom;}
#basket-total{border-top:1px solid #fff;text-align:right; margin-top:5px; padding-right:5px; vertical-align:bottom;}
#gotobasket a{font-weight:bold; vertical-align:bottom;text-align:left;}
/* Ende Bigbasket*/
/* Ende Linke Navi-Spalte */
/* Main */
#main{padding:1em;}
article{position:relative; display:block; box-sizing:border-box; background:#fff; min-width:200px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
article ol, ul{list-style: disc; margin-left:50px;}
#maincontent{min-height:40em; margin:0 1.67em 0 1.67em}
#title{margin:0 auto 0.5em auto;}
input, textarea, select,option{ background:white; color:black; padding:3px; margin:3px; border: #ccc ridge 2px; border-radius:5px;}
/* --Kontakt- */
#thanks{width:50%; margin: 5px auto 5px auto; text-align:left; border-width:2px; border-style:solid; border-color:#00CCCC; padding:5px 10px; overflow: visible;}
#contacterror{width:50%; margin: 5px auto 5px auto; text-align:left; border:none; padding:5px 10px; overflow: visible;}
#contactform{width:70%; margin:0 auto 1em 1rem;}	
.contact-left{float:left; margin-right:10px; width:17%;}	
.contact-left img{min-width:70px;}
.contact-right{text-align:right; width:83%;}
#grecaptcha {text-align:right; text-align:-moz-right; text-align:-webkit-right;}
/* Ende Kontakt */
/* Inhalt */
#maincontent img{border-radius:0.5em;}
#desc img{min-height:1px; max-width:95%; height:auto;}
#desc iframe{min-height:10px; max-width:95%; height:auto;}
#desc table{min-height:10px; max-width:95%; box-sizing:border-box; word-break:break-all;}
#textcont{line-height:150%; font-size:16px; color: #333;}
#desc{margin-left:100px;}
/* Kategoriebild */	
#ccat_detail_img img{margin-top:5px; margin-right:30px; margin-bottom:30px; margin-left:-20px; float:left; height:160px; width:auto; max-width:90px; border:none; border-top-left-radius:0px; border-bottom-left-radius:0px;}
/* Zusätzloche Bilder */
#id_related_images{margin-left:100px;}
#id_related_images img{ margin-top:5px; margin-right:10px; height:160px; width:auto; border:none; }
/* Zusätzliche Dateien */
#id_related_files{display:box; float:left; width:28%; min-width:180px; max-width:330px; height:115px; margin:10px; padding:10px; overflow:hidden; border-style:ridge; border-color:#336666; border-width:2px; border-radius:0.5em;}
#files{width:100%; padding:0.5em; margin-right:10px; overflow:hidden;	}
#files img{width:auto; max-width:98%; height:auto; max-height:95%; text-align:left; float:left; border:none; border-radius:0.5em;}
#filesdesc{width:50%; vertical-align:top;}
/* Ende zusätzliche Dateien */
/* --U-Kat.-Vorschau-- */
#preview{ width:100%; height:auto; display:inline-block;}
.content_cat_x{display:flex; float:left; width:31%; max-width:330px; min-width:180px; overflow:hidden; margin-right:1%; margin-bottom:1em; height:115px; border-style:ridge; border-color:#336666; border-width:2px; border-radius:0.5em;}
.content_cat_x img{width:100%; height:auto; margin:auto 0px ;}
.content_cat{ text-align:left; padding-top:5px; padding-left:5px; padding-right:5px; max-height:115px; overflow:hidden; align-self:center;} 
/* --Ende U-Kat.-Vorschau-- */
/* Ende Main */
footer{padding:1em; text-align:center; box-sizing:border-box; width:100%;/*border-top:1px solid #666;*/background-color:#366; color:#fff; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.footer-box{}
@media all and (max-width: 1085px) {#contactform{width:70%;}}

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (max-width: 780px) {
#page{display:block;width:100%;margin:0px;}
header{display:none;}
aside{max-width:100%; min-width:220px; padding:0px 10px 20px 10px;}
#navi{display:inline-block; width:100%; margin: 0px 0px 0px 0px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:0px;}
#rupp-logo{text-align:center;}
#navigation{max-width:100%;}
.navi1{padding: 7px 0px 7px 10px;}
.contact{padding: 7px 0px 7px 10px;}
nav a{max-width:100%;}
article{margin: 0px 0px 0px 0px; border-top-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px;}
#desc {margin-left:0px;}
#contacterror {width:auto; max-width:100%;}
#contactform{max-width:100%; width:auto;}
.contact-right{width:100%;}
#id_related_images{margin-left:0px;}
footer{margin-left:0px}
}
@media all and (max-width: 350px) {
#maincontent{margin: 0 0.5em 0 0.5em;} 
#ccat_detail_img img{float:none;margin-top:0px;	margin-right:0px; margin-bottom:5px; margin-left:-20px;}
#desc {margin-left:10px;}
}
@media all and (min-width: 560px) {
#navi{-webkit-flex: 1 auto; -webkit-order: 2; flex: 1 auto; order: 2; }
nav ul{-webkit-flex-direction:column; flex-direction: column;}
nav li{-webkit-flex: 1 1 0%; flex: 1 1 0%;}
article{-webkit-flex: 3 auto; webkit-order: 3; flex: 3 auto; order: 3;}
aside{/* durch auto werden die beiden asides in eine Zeile gesetzt */-webkit-flex: 1 auto; -webikit-order: 4; flex: 1 auto; order: 4;}
/*footer{-webkit-order: 5; order: 5;}*/
}
/* Large screens */
@media all and (min-width: 778px) {
article {/* Der Article wird 2.5x so breit wie die beiden asides! */-webkit-flex: 7 1 0%; -webkit-order: 3; order: 3; flex: 7 1 0%;}
aside{-webkit-flex: 2 1 0%; flex: 2 1 0%;}
#navi{-webkit-flex: 2 1 0%; -webkit-order: 2; flex: 2 1 0%; order: 2; height: auto;}
}