@charset "utf-8";
/**
 * Styles LEATHERS Website - all media
 * author: Zündi - mail [at] zuendi.de
 * adapted from HTML5 ✰ Boilerplate
 */

/**
 * colors
 * schwarz: #000000		grau: #7d7d7d	hellgrau: #c2c2c2	grau_bg: #707173
 * gruen: #a4a68b		hellgruen: #cacebe					rot: #c60b27
 */ 
 
/* ==|== normalize ========================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 18px; line-height: 1.3889; background-color: #707173; }
body, button, input, select, textarea { font-family: geneva, helvetica, arial, sans-serif; color: #fff; }

::-moz-selection { background: #cacebe; color: #000; text-shadow: none; }
::selection { background: #cacebe; color: #000; text-shadow: none; }

a { color: #c2c2c2; text-decoration: none; border: 0 none; }
a:visited { color: #c2c2c2; }
a:hover { color: #c60b27; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a:active, a:focus, a.selected { color: #ffffff; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #fff; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

p { font-size: 1em; font-weight: normal; margin: 0 0 1.2em 0; padding: 0; }
h1 { font-size: 140%; font-weight: bold; margin: 0.5em 0; padding: 0 0 0.6em 0; }
h2 { font-size: 130%; font-weight: bold; margin: 0.25em 0; padding: 0 0 0.6em 0; }
h3 { font-size: 1em; font-weight: normal; margin: 0 0 1.2em 0; padding: 0; }
h4 { font-size: 1em; font-weight: normal; margin: 0 0 1.2em 0; padding: 0; }
h5 { font-size: 1em; font-weight: normal; margin: 0 0 1.2em 0; padding: 0; }


form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* ==|== primary styles ===================================================== 
   alles nach normalize hier - bis non-semantic helper classes
   Layout
   ========================================================================== */

#container {
	position: relative;
	width: 760px;
	background: #707173;
	margin: 10px auto;
	padding: 0;
}

#main {
    height: auto;
    min-height: 600px;
    overflow: hidden;
    background: #000 url(/img/nav/bg_menu.png) repeat-y left top;;
}

.no_distance { margin: 0; padding: 0; }
.no_br { white-space: nowrap; }

a.popup {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in; 
}
.lt-ie9 a.popup {
	cursor: url('/img/nav/lupe.cur'), pointer;
}

/* ==|== header ============================================================= */
#header {
    background: #a4a68b url(/img/nav/bg_head.gif) repeat-y left top;
    padding: 0;
    overflow: hidden;	/* khtml, Safari falls Bild zu breit */
    border-bottom: 4px solid #ffffff;
    height: 150px;	/* IE 5.2 Mac */
}
#header img.logo {
    float: left;
    margin: 0;
    padding: 0px;
    position: relative;
    top: 0;
    left: 0;
}
#header h1 {
    margin: 0;
    padding: 0;
}
#header h2 {
    margin: 0;
    padding: 0;
}

#headline {
    margin: 0;
    padding: 0;
    height: 150px;
    background: transparent url(/img/nav/headline_std.jpg) no-repeat 4px 0;
    text-decoration: none;
}
.anprobe #headline { }
.werkstatt #headline,
.galerie #headline { background-image: url(/img/nav/headline_werkstatt.jpg); }
.wegbeschreibung #headline,
.philosophie #headline { background-image: url(/img/nav/headline_philosophie.jpg); }
.impressum #headline,
.freunde #headline,
.kontakt #headline,
.laden  #headline { background-image: url(/img/nav/headline_laden.jpg); }

/* ==|== menu =============================================================== */
#menu {
    float: left;
    padding: 5px 0 0 25px;
    width: 125px;
    height: 100%;
    background-color: transparent;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, Helvetica, Arial, Sans-Serif;
}

#menu ul {
    margin: 1em 0 0 0;
    padding: 0;
    list-style: none;
}

#menu ul.distance {
    margin: 2em 0 0 0;
}

#menu ul li ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0.7em;
}
#menu ul li ul li ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0.7em;
}

#menu li {
    padding: 0.2em 0 0 0;
    margin: 0;
}

#menu a {
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 0.6111em; /* 11px / 18px */
    line-height: 1.3; /* 13px */
    text-transform:uppercase;
}
#menu li ul a {
    font-size: 0.5555em; /* 10px / 18px */
}

/* ==|== content ============================================================ */
#maincol {
    width: 606px;
    height: auto;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 0 154px;
    background: #707173 url(/img/nav/bg_schlange_grau_gestanzt.png) no-repeat scroll 1px 0;
}

#content {
	padding: 1.111em 1.389em;
}

#content img { 
	border: 4px solid #fff;
}

#content h2 { border-bottom: 1px solid #FFFFFF; }
#content .explain { 
	font-size:0.7222em; /* 13px */ 
	line-height: 1.308; /* 17px */ 
	margin-top: 0.385em; 
}
#content .description { 
	display: block;
	font-size: 0.5em; /* 9px */ 
	margin-top: 0.385em; 
}

#content .maillink { margin: 0 0 0.8333em 0; }
#content .maillink ul { 
	margin: 0;
	padding: 0;
	list-style: none;
}
#content .maillink li { 
	float: left;
	margin: 0;
	padding: 0;
	font-size: 0.7222em;
}

/* ==!== google suche ======================================================= */
#goog-fixurl {
}

#goog-fixurl ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#goog-fixurl li {
    padding: 0.2em 0 0 0;
    margin: 0;
}

/* ==|== rubrik navigation ================================================== */

#rubrik {
    margin: 0;
    padding: 0;
}

#rubrik ul {
    overflow: hidden;
    list-style: none;
    margin: 27px 0 0 -10px;
    padding: 0;
}
#rubrik li {
    float:left;
    display: inline;
    list-style: none;
    width: auto;
    margin: 0;
    padding: 0 10px;
    font-size: 0.7222em; /* 13px / 18px */
    line-height: 1.308; /* 17px */
    border: 0 none;
    border-right: 2px solid #c2c2c2;
}

#rubrik li:last-child {
	border-right: 0 none;
}

#rubrik a {
    margin: 0;
    padding: 0;
    text-transform:uppercase;
}

/* ==|== gallery ============================================================ */

#makeMeScrollable {
	width: 462px;
	height: 154px;
	position: relative;
	margin: 0 0 35px 0;
}

#makeMeScrollable a {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in; 
}
.lt-ie9 #makeMeScrollable a {
	cursor: url('/img/nav/lupe.cur'), pointer;
}

#makeMeScrollable div.scrollableArea img {
	position: relative;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;	
	border: 2px solid #fff;
}

/* Invisible left hotspot */
div.scrollingHotSpotLeft {
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 50px;
	width: 7%;
	height: 158px;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(/img/smooth/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(/img/smooth/cursors/cursor_arrow_left.cur), url(/img/smooth/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
	background-image: url(/img/smooth/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; 
	-moz-opacity: 0.35;
	filter: alpha(opacity = 35);
	zoom: 1;
}

/* Invisible right hotspot */
div.scrollingHotSpotRight {
	min-width: 50px;
	width: 7%;
	height: 158px;
	background-image: url(/img/smooth/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: -4px;
	cursor: url(/img/smooth/cursors/cursor_arrow_right.cur), url(/img/smooth/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
	background-image: url(/img/smooth/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div) */
div.scrollWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: 2px solid #fff;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
}

div.scrollableArea {
	position: relative;
	width: 468px;
	height: 150px;
}

/* ==|== fancybox =========================================================== */

@import url("jquery.fancybox-1.3.4.css");

#fancybox-overlay {
	cursor: -webkit-zoom-out !important;
	cursor: -moz-zoom-out !important; 
}
.lt-ie9 #fancybox-overlay {
	cursor: url('/img/nav/lupeminus.cur'), pointer !important;
}

#fancybox-left {
	cursor: url(/img/smooth/cursors/cursor_arrow_left.cur), url(/img/smooth/cursors/cursor_arrow_left.cur),w-resize !important;
}
#fancybox-right {
	cursor: url(/img/smooth/cursors/cursor_arrow_right.cur), url(/img/smooth/cursors/cursor_arrow_right.cur),e-resize !important;
}

#fancybox-left-ico,
#fancybox-right-ico {
	height: 90px !important;
	margin-top: -45px !important;
}
#fancybox-left-ico {
	background: transparent url(/img/fancybox/mod/fancy_nav_left.png) 0 0 no-repeat scroll !important;
	cursor: url(/img/smooth/cursors/cursor_arrow_left.cur), url(/img/smooth/cursors/cursor_arrow_left.cur),w-resize !important;
}
#fancybox-right-ico {
	background: transparent url(/img/fancybox/mod/fancy_nav_right.png) 0 0 no-repeat scroll !important;
	cursor: url(/img/smooth/cursors/cursor_arrow_right.cur), url(/img/smooth/cursors/cursor_arrow_right.cur),e-resize !important;
}

#fancybox-close {
	cursor: -webkit-zoom-out !important;
	cursor: -moz-zoom-out !important; 
}
.lt-ie9 #fancybox-close {
	cursor: url('/img/nav/lupeminus.cur'), pointer !important;
}
/* ==|==forms =============================================================== */

.kontaktform {
    position: relative;
    width: 90%;
    margin: 0;
    padding: 20px 20px 7px 20px; /* take care margin-bottom last field-element! */
    background-color: #000000;
    color: #ffffff;
    border: 4px solid #ffffff;
}

.kontaktform,
.redirect,
.formErrorList {
	font-size:0.7222em; /* 13px */ 
	line-height: 1.308; /* 17px */ 
}
.formErrorList {
    color: #c60b27;
}
.formError {
    background-color: #c60b27;
}

.kontaktform label {
	display: inline-block;
	width: 95px;
	margin: 0 1em 1em 0;
}

input, textarea, select, option {
    width: 370px;
    margin: 0 0 1em 0;
    padding: 2px;
    color : #000000;
    border:none;
    background-color: #a4a68b;
}
radio, checkbox {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    background-color: #000000;
}

#submitbutton {
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: #000000;
}
#submitbutton:hover {
    background-color: #c60b27;
}
.kontaktform #submitbutton {
	position: absolute;
	bottom: 10px;
	left: 20px;
	width: 90px;
    font-size: 0.846em; /* 11px / 13px */
    line-height: 1.25;
}

.redirect .fieldname,
.redirect .fieldcontent {
	display: table-cell;
}
.redirect .fieldname {
	width: 95px;
}

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }

#container:before, #container:after, main:before, #main:after, #maincol:before, #maincol:after,
.clearfix:before, .clearfix:after { content: ""; display: table; }
#container:after, #main:after, #maincol:after,
.clearfix:after { clear: both; }
#container, #main, #maincol,
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

}

/* ==|== extras ============================================================= */
.hide {
	display: none;
}

#stopper {
	position: absolute;
	top: 410px;
	left: 10px;
	background: transparent;
}
#stopper img {
	width: 55%;
	height: 55%;
}

#overlay {
	position: absolute;
	top: 15em;
	left: 4.5em;
	z-index: 100;
	max-width: 80%;
	background-color: #d0111f;
	border: 4px solid white;
	font-size: 1em;
	color: white;
}

#overlay .overlay-text {
	padding: 1em;
}

#overlay .overlay-text a,
#overlay .overlay-text a:visited {
	color: white;
	text-decoration: underline;
}

#overlay .overlay-text a:hover {
	color: #c2c2c2;
}

.overlay-close {
    background-color: white;
    border: 2px solid #c2c2c2;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    color: #c2c2c2;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -13px;
    right: -13px;
    font-size: 16px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
}
.overlay-close:hover {
    background-color: #d0111f;
    color: white;
}

.overlay-agree {
	position: relative;
	left: 43%;
	padding: 0.1em 1.5em;
	background-color: black;
	border: 1px solid white;
	text-align: center;
}
.overlay-agree:hover {
	background-color: #d0111f;
}

/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}