/* General ----------------------------------------------------------------------------------------------------*/ body{ background: #5e2d1c; } .link{ cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .link:active,.button.selected{ opacity: 1; filter:alpha(opacity=100); color: #edb503; } .circle_brown_b{ background: url(/img/circle_brown.png) center bottom; position: absolute; bottom: -8.5px; left: 0; right: 0; height: 8.5px; width: 100%; } .circle_cream_b{ background: url(/img/circle_cream.png) center top; position: absolute; bottom: -8.5px; left: 0; right: 0; height: 50px; width: 100%; } .circle_brown_t{ background: url(/img/circle_brown.png) center top; position: absolute; top: -8.5px; left: 0; right: 0; height: 8.5px; width: 100%; z-index: 900; } .circle_cream_t{ background: url(/img/circle_cream.png) center top; position: absolute; bottom: 0; left: 0; right: 0; height: 8.5px; width: 100%; z-index: 900; } .print{ height: 1.5em; width: auto; } .cream_bg{ background: #fff6de; } .brown_bg{ background: #5e2d1c; } .icon{ font-family: 'cf1'; font-size: 1.2em; position: relative; text-align: right; padding-right: 1.5em; display: inline-block; } .icon > img{ position: absolute; right: 0; top: 0; bottom: 0; height: 0.85em; } .smallicon{ height: 2em !important; width: auto !important; } .button{ color: #edb503; background: #5e2d1c; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .button a{ color: #fff; } .button:hover{ opacity: 0.7; filter:alpha(opacity=70); } .button:active,.button.selected{ opacity: 1; filter:alpha(opacity=100); } form .button{ border: none; width: 100%; -webkit-appearance: none; font-family: 'Arial'; padding: 0.5em; } .embed{ position: relative; overflow: hidden; } .embed iframe{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; border: none; } .embed iframe.fullscreen{ position: fixed; z-index: 999999999999999999; } .embed .ratio{ width: 100%; height: auto; } nav ul,nav ul li{ position: relative; overflow: hidden; margin: 0; padding: 0; line-height: 1em; list-style: none; margin-bottom: -1px; } nav ul li{ display: block; float: none; } header{ position: relative; z-index: 999; background: #5e2d1c; } header nav ul, header nav ul li{ text-align: center; font-family: 'cf1'; } header nav ul li{ float: none; display: inline-block; overflow: visible; margin: 0; } header nav ul,header nav ul li,header nav ul li a{ color: #fec500; } #slider{ background: #291913; } #slider img{ max-width: 5000%; } .sliderwrap{ position: relative; overflow: hidden; max-width: 100%; } .sliderwrap .arrow{ position: absolute; bottom: 1.5em; left: 0; right: 0; text-align: center; z-index: 998; } .sliderwrap .arrow img{ width: 2em; height: auto; } #logo{ position: absolute; } #logo h1{ position: absolute; left: 0; right: 0; z-index: 99; margin: 0; padding: 0; } #nav nav{ position: relative; z-index: 90; } #nav ul{ z-index: 9999; } #nav li{ font-size: 1.4em; display: block; text-align: center; float: right; margin-top: 0.1em; } #nav li.selected a{ color: #faedaf; } #nav li small{ display: block; color: #e1d1aa; font-size: 0.5em; font-family: arial; } #nav .float_l li{ float: left; } .navtoggle_btn{ position: relative; z-index: 999; cursor: pointer; } .navtoggle{ display: none; position: absolute; top: 100%; left: 0.5em; right: 0.5em; padding-top: 1em; background: #5e2d1c; box-shadow: 0 3px 10px #000; -webkit-box-shadow: 0 3px 10px #000; -moz-box-shadow: 0 3px 10px #000; -o-box-shadow: 0 3px 10px #000; -ms-box-shadow: 0 3px 10px #000; } .navtoggle ul,.navtoggle li{ width: 100% !important; display: block; float: none !important; } .navtoggle li{ padding: 0.5em 0; border-bottom: 1px solid #643524; } .navtoggle li a{ color: #fff; display: block; } .mainpage .subs li h6{ font-size: 1.8em; } .mainpage h2{ text-align: center; font-size: 2.2em; /*background: url(/img/dots.png) repeat-x center;*/ padding-bottom: 0 !important; } .mainpage h2 span{ background: #fff6de; padding: 0 0.2em; } .mainpage p{ margin-bottom: 0; } .breadcrumbs{ margin-top: -1em; } .breadcrumbs ul,.breadcrumbs li{ margin: 0; padding: 0; list-style: none; } .breadcrumbs ul{ width: 100%; position: relative; overflow: hidden; } .breadcrumbs li{ float: right; font-size: 0.9em; margin: 0 0.5em -0.2em 0; padding: 0 0 0.2em 0.75em; background: url(/img/breadcrumbs.png) center left no-repeat; } .breadcrumbs li,.breadcrumbs li a{ color: #8c8779; text-decoration: none; } .breadcrumbs li:last-child{ background: none; } .breadcrumbs li:first-child{ margin-right: 0; } .page{ font-size: 0.85em; } article{ display: block; position: relative; z-index: 101; } article .subs, article .subs li{ margin: 0; padding: 0; list-style: none; position: relative; overflow: hidden; } article .subs ul{ text-align: center; } article .subs ul li{ float: none !important; display: inline-block; vertical-align: top; } article .subs .margin{ position: relative; } article .subs .mask{ position: absolute; top: 0; bottom: 0; left: 0; right: 1px; width: 100%; height: auto; z-index: 66; } article .subs .img{ width: 98%; height: auto; margin-left: 1%; margin-right: 1%; } article .subs li h6{ margin: 0.5em 0 0 0; } article .subs li small{ font-size: 0.7em; color: #4a281b; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: top; } article .subs .text{ opacity: 0; filter:alpha(opacity=0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 98%; height: auto; margin-left: 1%; margin-right: 1%; } article .subs .text h6{ margin: 0; position: absolute; opacity: 0; filter:alpha(opacity=0); right: 0; left: 0; top: 47%; } article .subs li.fluid_50:nth-child(2n+1){ clear: both; } article .subs li.fluid_33:nth-child(3n+1){ clear: both; } article .subs li.fluid_25:nth-child(4n+1){ clear: both; } article .subs li.fluid_20:nth-child(5n+1){ clear: both; } article .subs li.fluid_16:nth-child(6n+1){ clear: both; } article .subs ul li.fluid_50{ width: 49%; } article .subs ul li.fluid_33{ width: 32%; } article .subs ul li.fluid_25{ width: 24%; } article .subs ul li.fluid_20{ width: 19%; } article .subs ul li.fluid_16{ width: 15%; } article .desc{ font-size: 1.5em; } article .addthis_toolbox .addthis_button_print{ display: none; } article .addthis_toolbox .addthis_button_email span{ background: url(/img/socials/inner/email.png) no-repeat; } article .addthis_toolbox .addthis_button_facebook span{ background: url(/img/socials/inner/facebook.png) no-repeat; } article .addthis_toolbox .addthis_button_twitter span{ background: url(/img/socials/inner/twitter.png) no-repeat; } article .addthis_toolbox .addthis_button_compact span{ background: url(/img/socials/inner/compact.png) no-repeat; } article .addthis_toolbox span{ margin: 0 0.3em; } .sap .msg{ font-size: 1.4em; color: green; } .sap .msg.error{ color: red; } .sap input{ font-size: 1em; } .sap input.username{ background: #fff url(/img/login/username.png) no-repeat 7px 3px; } .sap input.password{ background: #fff url(/img/login/password.png) no-repeat 7px 3px; } .sap article nav{ text-align: center; } .sap article nav ul, .sap article nav ul li{ list-style: none; margin: 0; padding: 0; float: none; text-align: center; display: inline-block; } .sap article nav ul li.selected{ color: #edb503; } .sap article table{ width: 100%; border-width: 2px; table-layout: fixed; } .sap article table *{ font-family: Arial !important; } .sap article table tr td{ border-left: none; } .sap article table.prod tr td:first-child{ width: 2em; } .sap article table.prod tr td:last-child{ width: 3em; } .sap article table.orders tr:first-child{ background: #e0d9c7; font-weight: bold; } .sap article table.orders tr:hover{ background: #F5EBD0; cursor: pointer; } .opengallery{ cursor: pointer; } ul.geoloc, ul.geoloc li, ul.geoloc ul{ margin: 0; padding: 0; list-style: none; text-align: right; } ul.geoloc li:first-child .border_b{ border-top: 1px solid #e0d9c7; } ul.geoloc li img{ height: 1.8em; width: auto; margin-left: 0.5em; margin-bottom: 0.5em; } ul.geoloc li h4,.geoloc li p{ margin: 0; } ul.geoloc li a{ color: #5e2d1c; } footer{ position: relative; } footer nav ul,footer nav li{ color: #fec500; position: relative; list-style: none; margin: 0; padding: 0; float: none; text-align: right; font-size: 0.9em; } footer nav li{ margin: 0 0 0 1em; display: inline-block; } footer .socials img{ margin-right: 0.5em; width: 1em; height: auto; } /* {flexi} Responsive Web ----------------------------------------------------------------------------------------------------*/ /* SmartPhone Portrait - Width ...-480 */ @media only screen and (min-width: 10px) and (max-width: 479px){ header{ position: fixed; left: 0; right: 0; top: 0; } #nav{ margin-top: 0; } #nav nav{ margin-top: 3px; margin-right: 3px; } #nav li{ text-align: center; } .breadcrumbs .social{ background: url('/img/black_075.png'); } .subs li{ clear: none !important; } article .subs li.sp_p_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.sp_p_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.sp_p_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.sp_p_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.sp_p_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.sp_p_fluid_50{ width: 49%; } article .subs ul li.sp_p_fluid_33{ width: 32%; } article .subs ul li.sp_p_fluid_25{ width: 24%; } article .subs ul li.sp_p_fluid_20{ width: 19%; } article .subs ul li.sp_p_fluid_16{ width: 15%; } article .subs .text{ opacity: 0.85; filter:alpha(opacity=60); } article .subs .text h6{ opacity: 1; filter:alpha(opacity=100); } .geoloc .icons{ margin-top: 0; } } /* SmartPhone Landscape - Width 480-768 */ @media only screen and (min-width: 480px) and (max-width: 767px){ header{ position: fixed; left: 0; right: 0; top: 0; } #nav nav{ margin-top: 3px; margin-right: 3px; } #nav li{ text-align: center; } .subs li{ clear: none !important; } article .subs li.sp_l_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.sp_l_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.sp_l_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.sp_l_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.sp_l_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.sp_l_fluid_50{ width: 49%; } article .subs ul li.sp_l_fluid_33{ width: 32%; } article .subs ul li.sp_l_fluid_25{ width: 24%; } article .subs ul li.sp_l_fluid_20{ width: 19%; } article .subs ul li.sp_l_fluid_16{ width: 15%; } article .subs .text{ opacity: 0.85; filter:alpha(opacity=60); } article .subs .text h6{ opacity: 1; filter:alpha(opacity=100); } } /* Portrait - Width 768-980 */ @media only screen and (min-width: 768px) and (max-width: 979px){ #nav nav{ margin-top: 3px; margin-right: 3px; } .subs li{ clear: none !important; } article .subs li.tb_p_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.tb_p_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.tb_p_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.tb_p_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.tb_p_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.tb_p_fluid_50{ width: 49%; } article .subs ul li.tb_p_fluid_33{ width: 32%; } article .subs ul li.tb_p_fluid_25{ width: 24%; } article .subs ul li.tb_p_fluid_20{ width: 19%; } article .subs ul li.tb_p_fluid_16{ width: 15%; } } /* Tablet Landscape - Width 980-1200 */ @media only screen and (min-width: 980px) and (max-width: 1199px){ .subs li{ clear: none !important; } article .subs li.tb_l_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.tb_l_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.tb_l_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.tb_l_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.tb_l_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.tb_l_fluid_50{ width: 49%; } article .subs ul li.tb_l_fluid_33{ width: 32%; } article .subs ul li.tb_l_fluid_25{ width: 24%; } article .subs ul li.tb_l_fluid_20{ width: 19%; } article .subs ul li.tb_l_fluid_16{ width: 15%; } } /* Desktop - Width 1200-1600 */ @media only screen and (min-width: 1200px) and (max-width: 2199px){ .subs li{ clear: none !important; } article .subs li.dt_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.dt_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.dt_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.dt_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.dt_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.dt_fluid_50{ width: 49%; } article .subs ul li.dt_fluid_33{ width: 32%; } article .subs ul li.dt_fluid_25{ width: 24%; } article .subs ul li.dt_fluid_20{ width: 19%; } article .subs ul li.dt_fluid_16{ width: 15%; } } /* Large Screen - Width 1600+ */ @media only screen and (min-width: 2200px){ .subs li{ clear: none !important; } article .subs li.ls_fluid_50:nth-child(2n+1){ clear: both !important; } article .subs li.ls_fluid_33:nth-child(3n+1){ clear: both !important; } article .subs li.ls_fluid_25:nth-child(4n+1){ clear: both !important; } article .subs li.ls_fluid_20:nth-child(5n+1){ clear: both !important; } article .subs li.ls_fluid_16:nth-child(6n+1){ clear: both !important; } article .subs ul li.ls_fluid_50{ wilsh: 49%; } article .subs ul li.ls_fluid_33{ wilsh: 32%; } article .subs ul li.ls_fluid_25{ wilsh: 24%; } article .subs ul li.ls_fluid_20{ wilsh: 19%; } article .subs ul li.ls_fluid_16{ wilsh: 15%; } } .sap .notification{ min-height: 3em; width: 100%; display: block; position: relative; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 2px 2px 2px #cfcfcf; -webkit-box-shadow: 2px 2px 4px #cfcfcf; box-shadow: 2px 2px 2px #cfcfcf; margin-bottom: 1em; } .sap .notification span{ cursor: pointer; background: url(/img/close.png) no-repeat right top; display: block; width: 2em; height: 2em; position: absolute; top:-1.5em; left: -1.5em; } .sap .notification .text{ overflow: hidden; } .sap .notification p{ width: auto; margin: 0.5em; color: #323232; font-size: 1em; line-height: 2em; float: right; margin-right: 1em; *margin-top: 0.5em; text-shadow: 0px 0px 1px #f9f9f9; } .sap .info { border-top: 1px solid #f3fbff; border-bottom: 1px solid #bedae9; background: #e0f4ff; background: -moz-linear-gradient(top,#e0f4ff,#d4e6f0); background: -webkit-gradient(linear, left top, left bottom, from(#e0f4ff), to(#d4e6f0)); margin-top: 2em; } .sap .info:before { content: url(/img/info.png); float: right; margin: 0.5em 1em; } .sap .info strong { color: #177fb2; margin-left: 1em; }