/* -------------------------------------------- */
/* --- Tecomotive CSS Layout ------------------ */
/* --- Proudly handmade by Tobias Mucke :-) --- */
/* -------------------------------------------- */



/* --- Overall Propertys --- */
body { color: #333333; background: #eeeeee url(pics/bg.jpg) repeat-x; margin: 0px; padding: 0px; font-family: Arial, Verdana, helvetica, sans-serif; }
img { max-width: 100%; height: auto; }
h1 { color: #89888c; font-size: 1.6em; }
h2 { color: #89888c; font-size: 1.4em; }
h3 { color: #666666; font-size: 1.1em; }
input {  padding: 5px 7px; box-sizing: border-box; border: 1px solid #bbb; border-radius: 4px; background-color: #fbfbfb;  }
textarea { width: 70%; padding: 5px 7px; box-sizing: border-box; border: 1px solid #bbb; border-radius: 4px; background-color: #fbfbfb;  }
select {  padding: 5px 7px; box-sizing: border-box; border: 1px solid #bbb; border-radius: 4px; background-color: #fbfbfb;  }



/* --- Contact Form Protect --- */
form #Website23{ display:none; }



/* --- Site Outline --- */
#page { margin: 0px auto; min-width: 310px; max-width: 1050px; background: #ffffff; overflow: hidden;}



/* --- Header --- */
header { background: #ffffff; margin: 0px; padding: 0px; border-style: solid none none none; border-width: 5px 0px 0px 0px; border-color: #555555; clear:both; overflow: hidden;}



/* --- Buy Button --- */
.buybutton {  display: inline-block; outline: none;
              border: solid 1px #da7c0c; border-radius: .5em; box-shadow: 0 1px 2px rgba(0,0,0,.2);
              width: 120px; margin: 0px; padding: 7px 5px 8px;
              color: #fef4e9;
              cursor: pointer;
              background: #f78d1d; background: linear-gradient(180deg, #faa51a, #f47a20);
              text-align: center; font: 14px/100% Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.3); font-weight: bold;
              transition: all 0.5s; }

.buybutton span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }
.buybutton span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }
.buybutton:active { position: relative; top: 1px; }
.buybutton:hover span { padding-right: 15px; }
.buybutton:hover span:after { opacity: 1; right: 0; }
.buy a, .buy a:link, .buy a:visited { text-decoration: none; background: none; color: #fef4e9;  border: none; }



/* --- Buy Form --- */
.buyformflex { display: -webkit-flex; display: flex; justify-content: flex-start; margin: 0px; flex-wrap: wrap-reverse; }
.buyformflex .ppic { margin-left: 0px; margin-right: 50px; margin-bottom: 20px; }
.buyformflex form { margin-left: 0px; margin-right: auto; padding-right: 10px;}



/* --- Middle Section --- */
nav { background: #ffffff; width: 27%; min-height: 400px; float: left; font-size: 0.8em; overflow: hidden; }
section { background: #ffffff; width: 68%; float: right; font-size: 0.8em; line-height: 160%; margin: 35px 25px 70px 0px; overflow: hidden; }
section a, section a:link, section a:visited { color: #333333; text-decoration: underline; background-color: #ffffff;}
section a:hover, section a:active { color: #ffffff; background-color: #89888c;}



/* --- Footer --- */
footer { color: rgb(255, 255, 255); font-size: 12px; line-height: 10px; padding: 10px 0.5em; text-align: right; background: rgb(81, 81, 81); clear:both; overflow: hidden; }
footer a, footer a:link, footer a:visited { color: rgb(255, 255, 255); text-decoration: underline; background-color: rgb(81, 81, 81);}
footer a:hover, footer a:active { background-color: #AAAAAA;}



/* --- Misc --- */
.textbox { border-top-width: 1px; border-top-style: solid; border-top-color: #dddddd; padding: 0px 0px 5px 30px; }
.textbox strong { color: #8a1c1f; }
.block { width: 100%; display: inline-block; }
.flexcontainer { display: -webkit-flex; display: flex; justify-content: space-around; margin-top: 20px; }
.toplist { margin: auto; padding-top: 10px; padding-right: 10px; }
.buy { text-align:center; margin-top: 40px; margin-bottom: 10px; }
.ppic { min-width: 150px; }
.ppic img { border-radius: 10px; }
.ppic a:hover, ppic a:active, .block a:hover, block a:active { background: none; opacity: 0.6;}
.block img { border-radius: 10px; margin-right: 6px; margin-bottom: 6px; }
.sidebyside { border: 0px; margin: 0px; padding: 0px; float: left; }
.fbfooter { text-align:center; background-color: #eeeeee; padding: 10px; }
.fbfooter a:hover:not(.active) { background-color: #89888c; }
.sidetitle { display: block; margin: 20px 0px 0px 0px; padding: 0px 10px 0px 35px; overflow: hidden; }
.textpic { position: relative; margin: 0 auto; }
.textblock { position: absolute; bottom: 6px; border-radius: 0px 0px 10px 10px; background: rgba(0, 0, 0, 0.3); color: #fff; width: 160px; text-align:center; font-weight: bold; }
.responsivepic { max-width: 100%; height: auto; }



/* --- Side Menu --- */
ul.sidemenu { list-style-type: none; margin: 15px 15px 0px 0px; overflow: hidden; }
li.sidemenu { border-bottom:1px solid #dddddd; padding: 0px 0px 0px 0px; }
li.sidemenu a { display: block; color: #333333; padding: 18px 15px 18px 15px; text-decoration: none; background-color: #ffffff; }
li.sidemenu a:hover:not(.active) { color: #ff0000; background-color: #dddddd; }
li.sidemenu a.active { font-weight: bold; color: #ff0000; background-color: #dddddd; }
li.sidemenu a.sub { margin-left: 2em; }
li.sidemenu a.subactive { margin-left: 2em; font-weight: bold; color: #ff0000; background-color: #dddddd; }



/* --- Lang Menu --- */
ul.langmenu { list-style-type: none; overflow: hidden; }
li.langmenu { float: left; display: inline; margin: 0px 10px 0px 0px; }
li.langmenu a { color: #333333; text-decoration: none; }
li.langmenu a:hover:not(.active) { background-color: #dddddd; }



/* --- Top Menu --- */
ul.topmenu { float: right; list-style-type: none; margin: 0px 15px 0px 0px; overflow: hidden; }
li.topmenu { float: left; border-right:1px solid #eeeeee; padding: 8px 0px 8px 0px; }
li.topmenu a { display: inline; color: #444444; text-align: center; padding: 10px 15px 10px 15px; text-decoration: none; background-color: #ffffff; font-weight: bold; font-size: 0.95em; }
li.topmenu a:hover:not(.active) { background-color: #dddddd; }
li.topmenu a.active { color: #ffffff; background-color: #89888c; }



/* --- Small Version Switch --- */
@media (max-width: 550px) {
nav { width: auto; min-height: initial; float: none; font-size: 1em; }
section { text-align:center; width: auto; float: none; margin: 15px 10px 50px 5px; }
.block { width: initial; }
.flexcontainer, .buyformflex { flex-direction: column-reverse; }
.buyformflex .ppic { margin-left: 0px; margin-right: 0px; }
.buyformflex form { margin: 0px; padding: 0px;}
.toplist { text-align:center; }
.ppic { text-align:center; margin-top: 10px; margin-bottom: 40px; }
.sidetitle { display: none; }
ul.sidemenu { text-align:center; margin: auto; width: 18em; padding-top: 15px; }
li.sidemenu { float: left; border-right:1px solid #eeeeee; border-bottom: initial; padding: 4px 0px 4px 0px; }
li.sidemenu:first-child { border-left:1px solid #eeeeee; }
li.sidemenu a { display: initial; color: #444444; padding: 5px 10px 5px 10px; font-weight: bold; font-size: 0.8em; }
li.sidemenu a.sub { margin-left: auto; }
ul.langmenu { margin: auto; width: 18em; }
ul.topmenu { margin: 0px 5px 8px 0px; }
li.topmenu a { padding: 10px 4px 10px 4px; font-size: 0.8em; }
}