/* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url('/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url('/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url('/fonts/open-sans-v15-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('/fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans-v15-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } body { font-family: Open Sans, Helvetica, Arial, Verdana, sans-serif; margin: 0; padding: 0; background-color: white; overflow-x: hidden; text-align: center; } ul, li, h4, h3, h2, h1, p { margin: 0; padding: 0; list-style: none; } .next, .prev { cursor: pointer; } p { font-family: 'Open Sans'; } a { color: black; outline: none; } a:hover, a:focus { color: black; outline: none; } img { border: 0px; } div { } /*--- violett: #bb1442 ---*/ /*--- dunkelviolett: #762536 ---*/ /*--- CONTAINER ---*/ #container { position: relative; width: 1200px; margin: 0px; background-color: white; margin: 0 auto; box-shadow: 6px 6px 8px rgba(0,0,0,0.45); min-height: 800px; } #impressumcontainer { position: relative; width: 1200px; margin: 0 auto; box-shadow: 6px 6px 8px rgba(0,0,0,0.45); height: auto; } /*--- HEADER ---*/ #headercontainer { width: 1024px; background-color: white; margin: 0 auto; text-align: left; font-size: 115%; } #header { padding-top: 50px; padding-left: 392px; color: #d11670; } #header a:link { color: #d11670; text-decoration: none; } #header a:visited { color: #d11670; text-decoration: none; } #header a:hover { color: #d11670; text-decoration: underline; } #header a:active { color: #d11670; text-decoration: underline; } #header .fett { font-weight: 600; } #impressumheadercontainer { width: 1024px; margin: 0 auto; text-align: left; font-size: 115%; } #impressumheader { padding-top: 50px; padding-left: 392px; color: #d11670; } #impressumheader a:link { color: #d11670; text-decoration: none; } #impressumheader a:visited { color: #d11670; text-decoration: none; } #impressumheader a:hover { color: #d11670; text-decoration: underline; } #impressumheader a:active { color: #d11670; text-decoration: underline; } #impressumheader .fett { font-weight: 600; } /*--- MENU ---*/ #menucontainer { width: 1024px; background-color: white; text-align: left; margin: 0 auto; } #impressummenucontainer { position: absolute; width: 1129px; margin: 0 auto; text-align: left; } #menu { padding-top: 120px; padding-left: 84%; color: #991d59; line-height: 140%; } #menu .highlight { color: #d11670; padding-top: 5%; } #menu .highlight a:link { color: #d11670; text-decoration: none; } #menu .highlight a:visited { color: #d11670; text-decoration: none; } #menu .highlight a:hover { color: #d11670; text-decoration:none; } #menu .highlight a:active { color: #d11670; text-decoration:none; } #menu .link { color: #991d59; padding-top: 5%; } #menu .link a:link { color: #991d59; text-decoration: none; } #menu .link a:visited { color: #991d59; text-decoration: none; } #menu .link a:hover { color: #d11670; text-decoration:underline; } #menu .link a:active { color: #d11670; text-decoration:underline; } #menu .submenulink { color: #991d59; font-size: 85%; line-height: 170%; padding-left: 6%; } #menu .submenulink a:link { color: #991d59; text-decoration: none; } #menu .submenulink a:visited { color: #991d59; text-decoration: none; } #menu .submenulink a:hover { color: #d11670; text-decoration:underline; } #menu .submenulink a:active { color: #d11670; text-decoration:underline; } #menu .submenulink_highlight { color: #d11670; font-size: 85%; line-height: 170%; padding-left: 6%; } #menu .submenulink_highlight a:link { color: #d11670; text-decoration: none; } #menu .submenulink_highlight a:visited { color: #d11670; text-decoration: none; } #menu .submenulink_highlight a:hover { color: #d11670; text-decoration:underline; } #menu .submenulink_highlight a:active { color: #d11670; text-decoration:underline; } #menu .subsubmenulink { color: #991d59; font-size: 85%; line-height: 155%; padding-left: 12%; } #menu .subsubmenulink a:link { color: #991d59; text-decoration: none; } #menu .subsubmenulink a:visited { color: #991d59; text-decoration: none; } #menu .subsubmenulink a:hover { color: #d11670; text-decoration:underline; } #menu .subsubmenulink a:active { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_highlight { color: #d11670; font-size: 85%; line-height: 155%; padding-left: 12%; } #menu .subsubmenulink_highlight a:link { color: #d11670; text-decoration: none; } #menu .subsubmenulink_highlight a:visited { color: #d11670; text-decoration: none; } #menu .subsubmenulink_highlight a:hover { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_highlight a:active { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_last { color: #991d59; font-size: 85%; line-height: 155%; padding-left: 12%; padding-bottom: 3%; } #menu .subsubmenulink_last a:link { color: #991d59; text-decoration: none; } #menu .subsubmenulink_last a:visited { color: #991d59; text-decoration: none; } #menu .subsubmenulink_last a:hover { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_last a:active { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_last_highlight { color: #d11670; font-size: 85%; line-height: 155%; padding-left: 12%; padding-bottom: 3%; } #menu .subsubmenulink_last_highlight a:link { color: #991d59; text-decoration: none; } #menu .subsubmenulink_last_highlight a:visited { color: #991d59; text-decoration: none; } #menu .subsubmenulink_last_highlight a:hover { color: #d11670; text-decoration:underline; } #menu .subsubmenulink_last_highlight a:active { color: #d11670; text-decoration:underline; } /*--- UEBER UNS ---*/ #ueberuns_container { position: absolute; top: 220px; left: 420px; width: 390px; height: 410px; background-color: white; text-align: left; margin: 0 auto; line-height: 230%; color: #762536; } /*--- KONTAKT ---*/ #kontakt_container { position: absolute; top: 240px; left: 470px; width: 390px; height: 410px; background-color: white; text-align: left; margin: 0 auto; line-height: 150%; color: #762536; } #kontakt_container .highlight { color: #bb1442; } /*--- IMPRESSUM ---*/ #impressuminhaltcontainer { width: 1024px; padding-top: 50px; margin: 0 auto; text-align: left; line-height: 150%; color: #762536; } #impressumlinkscontainer { position: absolute; padding-top: 50px; width: 200px; text-align: left; margin: 0 auto; color: #762536; } #impressumrechtscontainer { width: 580px; padding-top: 50px; padding-bottom: 50px; height: auto; text-align: left; margin: 0 auto; color: #762536; } .impressum { font-size: 72%; line-height: 160%; color: #762536; } .impressum .highlight { color: #bb1442; } .impressum_disclaimer { font-size: 72%; line-height: 160%; color: #762536; } .impressum_disclaimer .highlight { color: #bb1442; } #impressum_container { top: 160px; left: 110px; width: 390px; height: 50px; background-color: white; text-align: left; margin: 0 auto; color: #762536; } #impressum_container_links { top: 210px; left: 110px; width: 390px; height: 410px; background-color: white; text-align: left; margin: 0 auto; color: #762536; } #impressum_container_rechts { top: 210px; left: 320px; width: 550px; height: 410px; background-color: white; text-align: left; margin: 0 auto; color: #762536; } /*--- BOOKS ---*/ #bookcontainer { position: absolute; top: 160px; left: 110px; width: 780px; height: 450px; background-color: white; text-align: left; margin: 0 auto; } #bookcontainer img { width: 25px; height: 82px; } /*--- BOOK ---*/ #singlebookcontainer { position: absolute; top: 160px; left: 480px; width: 350px; height: 450px; background-color: white; text-align: left; margin: 0 auto; } #singlebookcontainer img { height: 450px; } #singlebookcontainersmaller { position: absolute; top: 165px; left: 480px; width: 350px; height: 450px; background-color: white; text-align: left; margin: 0 auto; display: table; } #singlebookcontainersmaller .smaller { text-align: right; display: table-cell; vertical-align: bottom; color: #991d59; font-size: 85%; line-height: 155%; } #singlebookcontainersmaller img { height: 400px; } /*--- BOOKNAVIGATION ---*/ #booknavigation { position: absolute; top: 630px; left: 480px; width: 350px; height: 100px; background-color: white; text-align: left; margin: 0 auto; } #booknavigation .nolink { color: #c2c2c2; font-size: 330%; } #booknavigation .space { font-size: 330%; margin-left: 15px; margin-right: 15px; } #booknavigation .link { color: #d11670; text-decoration: none; font-size: 330%; } #booknavigation .link a:link { color: #d11670; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #booknavigation .link a:visited { color: #d11670; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #booknavigation .link a:hover { color: #991d59; text-decoration:none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #booknavigation .link a:active { color: #991d59; text-decoration:none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*--- TEXT ---*/ #textcontainer { position: absolute; top: 160px; left: 70px; width: 350px; height: 455px; background-color: white; margin: 0 auto; display: table; } #textcontainer .text { text-align: right; display: table-cell; vertical-align: bottom; color: #991d59; font-size: 85%; line-height: 155%; } #textcontainer img { height: 450px; } /*--- FOOTER ---*/ /*--- #footercontainer { position: absolute; top: 80px; left: 87px; width: 750px; height: 100px; background-color: #dddddd; text-align: left; margin: 0 auto; border: 1px solid blue; } ---*/ #footercontainer { position: absolute; top: 700px; left: 110px; width: 780px; height: 100px; background-color: white; text-align: left; margin: 0 auto; z-index: 3; } #footer { color: #d11670; } #footer .fett { font-weight: 600; transform: scaleX(-1); -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); display: inline-block; } /*--- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { #container { width: 100%; margin: 0px; background-color: white; overflow-x: hidden; min-width: 1300px; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #container { width: 100%; margin: 0px; background-color: white; overflow-x: hidden; min-width: 1024px; zoom: 0.8; } } ---*/ /*--- @media only screen and (orientation: portrait) { body { width: 100%; margin: 0px; overflow-x: hidden; min-width: 1024px; zoom: 1.0; background-color: lightblue; } } ---*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body { width: device-width; zoom: 0.6; background-color: #de1d78; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body { width: device-width; zoom: 0.5; background-color: #90bd1d; } } /* #### Mobile Phones Portrait #### */ @media screen and (max-device-width: 480px) and (orientation: portrait){ background-color: #de1d78; zoom: 0.5; } /* #### Mobile Phones Landscape #### */ @media screen and (max-device-width: 640px) and (orientation: landscape){ background-color: #90bd1d; zoom: 0.5; } /* #### Mobile Phones Portrait or Landscape #### */ @media screen and (max-device-width: 640px){ background-color: #de1d78; zoom: 0.5; } /* #### iPhone 4+ Portrait or Landscape #### */ @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){ background-color: #90bd1d; zoom: 0.5; } /* #### iPhone 5 Portrait or Landscape #### */ @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){ background-color: #de1d78; zoom: 0.5; } /* #### iPhone 6 and 6 plus Portrait or Landscape #### */ @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){ background-color: #90bd1d; zoom: 0.5; } /* #### Tablets Portrait or Landscape #### */ @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ background-color: #90bd1d; zoom: 0.5; }