/* CSS Document Neu */

* {
  margin: 0px; padding: 0px;
}

html, body {
  height: 100%; width: 100%;
	font: normal 10px Georgia, Palatino, serif;
	color: #000;
	background: url(../img/cotton.png);
}

/*---------- OVERLAY ----------*/

#overlayBox {
	position: absolute; z-index: 106;
	width: 100%;
	margin: 0; padding: 0;
}
#hinweisBG { 
	width: 100%; margin-top: -1px;
	background: rgb(255,255,255);
	border-bottom: dotted 1px #c10d1f;
}
#hinweis {
	width: 990px;
  height: 172px;
  margin: 0 auto 0 auto; padding: 0;
	display: none;
}
#open, #close {
	margin: -1px 0 0 321px; padding: 2px 6px 1px 6px;
	position: relative; left: 50%;
	line-height: 12px;
	background: #fff;
	display: inline-block;
	border: dotted 1px #c10d1f;
	border-top: 0px;
}

#overlaytextbox {
	padding: 6px 15px;
}

span.red { color: #c10d1f; }

/*---------- OVERLAY ----------*/

@font-face { font-family: Pigiarniq; src: url(../font/PigiarniqRegular.ttf); }

h1, h1 a {	
	font: 400 3em Pigiarniq, Arial, sans-serif;
}
h2 { 
	font: 500 25px Pigiarniq, Arial, sans-serif; 
	color: #d10c1f; 
	line-height: 25px; 
}
h3 {
	font: 500 1.7em Georgia, Palatino, serif;
	margin: 0; padding: 3px 0 5px 0;
}
h4 {
	font: 600 1.2em Georgia, Palatino, serif;
	margin: 0; padding: 3px 0;
}
p, label, a {
	font: 500 1.2em Georgia, Palatino, serif;
	margin: 0; padding: 3px 0;
	line-height: 1.6em;
}

a { text-decoration: none; color: #d10c1f; font-size: 12px; }
a:hover { text-decoration: none; color: #000; }

a.extern, a.extern:hover, a.email, a.email:hover, a.big, a.big:hover, a.small, a.small:hover, a.top, a.top:hover, a.prev, a.prev:hover, 
a.intern, a.intern:hover, a.twitter, a.twitter:hover, a.facebook, a.facebook:hover, a.down, a.down:hover, a.up, a.up:hover, a.seitzeichen, a.seitzeichen:hover {
	padding: 0 0 0 20px; margin: 0;
}

a.seitzeichen { background: url(../img/icon.png) no-repeat 0 -421px; }
a.seitzeichen:hover { background: url(../img/icon.png) no-repeat 0 -442px; }

a.down { background: url(../img/icon.png) no-repeat 0 -1px; }
a.down:hover { background: url(../img/icon.png) no-repeat 0 -22px; }

a.up { background: url(../img/icon.png) no-repeat 0 -64px; }
a.up:hover { background: url(../img/icon.png) no-repeat 0 -43px; }

a.top { background: url(../img/icon.png) no-repeat 0 -62px; float: right; }
a.top:hover { background: url(../img/icon.png) no-repeat 0 -41px; float: right; }

a.intern { background: url(../img/icon.png) no-repeat 0 -253px; }
a.intern:hover { background: url(../img/icon.png) no-repeat 0 -274px; }

a.extern { background: url(../img/icon.png) no-repeat 0 -85px; }
a.extern:hover { background: url(../img/icon.png) no-repeat 0 -106px; }

a.twitter { background: url(../img/icon.png) no-repeat 0 -400px; }
a.twitter:hover { background: url(../img/icon.png) no-repeat 0 -379px; }

a.facebook { background: url(../img/icon.png) no-repeat 0 -337px; }
a.facebook:hover { background: url(../img/icon.png) no-repeat 0 -358px; }

a.email { background: url(../img/icon.png) no-repeat 0 -148px; }
a.email:hover { background: url(../img/icon.png) no-repeat 0 -127px; }

a.big { background: url(../img/icon.png) no-repeat 0 -169px; }
a.big:hover { background: url(../img/icon.png) no-repeat 0 -190px; }

a.small { background: url(../img/icon.png) no-repeat 0 -232px; }
a.small:hover { background: url(../img/icon.png) no-repeat 0 -211px; }

a.prev { background: url(../img/icon.png) no-repeat 0 -316px; color: #000 }
a.prev:hover { background: url(../img/icon.png) no-repeat 0 -295px; color: #000 }

a.next, a.next:hover {
	padding: 0 20px 0 0; margin: 0; color: #000;
}

a.next { background: url(../img/icon.png) no-repeat 10px -253px; }
a.next:hover { background: url(../img/icon.png) no-repeat 10px -274px; }

a.inside { margin-left: 2px; }
a.inside:hover { margin-left: 2px; }

#container {
	position: absolute;
  height: 100%; width: 100%;
}
 
#content  {
	width: 990px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -58px auto;
  overflow: hidden;
}

#hiddenfacebook { display: none; }

#header { 
	margin: 0; padding: 40px 0 20px 0;
	width: 100%;
}
#makreleLogo {
	margin: 0; padding: 0;
	width: 300px; height: 108px;
	background: url(../img/makreleLogo.png) no-repeat center;
	display: inline-block;
}
#header h1 {
	padding-top: 63px;
	float: right;
}
a.headline {
	font-size: 1em;
	color: #000;
	text-decoration: none;
}

.line {
	width: 100%; height: 1px;
	background: url(../img/line04.png) repeat;
}
.line02 {
	width: 100%; height: 1px; margin: 10px 0; padding: 0;
	background: url(../img/line06.png) repeat;
}

/* Header */

#visual { position: relative; width: 990px; height: 290px; overflow: hidden;  }

ul#visualslide { width: 2970px; float: left; }
ul#visualslide li { width: 960px; height: 200px; margin: 30px 15px; position: relative; float: left; font-size: 10px; list-style-type: none; }

/* ---------- LI:FIRST ---------- */

#auswahl { width: 200px; margin: -8px 15px 30px 0; float: left; font-size: 10px; }			/* background: hsla(0,100%,50%,0.2); rgba(255, 0, 0, 0.2) */

	/* ---------- DIV:AUSWAHL ---------- */

.dottedbox { padding: 5px; margin: 0 5px 0 0; border: solid 5px #fff; float: left; }
.dottedbox:hover { border: solid 5px #d10c1f; }

#red, #black { width: 40px; height: 30px; }
#red { background: #d10c1f; }
#black { background: #000; }

	/* ---------- DIV:AUSWAHL ---------- */

#shirtchange { width: 34.5em; height: 20em; position: absolute; right: 0; top: 0; }

#women { left: 0; margin: 0 15px 0 0; position: absolute; width: 16.2em; }
#men { right: 0; position: absolute; width: 16.8em; }

#women img, #men img { position: absolute; }

#women img.outline, #men img.outline { height: 20em; z-index: 105; }

#women img.inline { height: 19.15em; margin: .3em 0 0 .2em; z-index: 103; }
#men img.inline { height: 19.7em; margin: .2em 0 0 .1em; z-index: 103; }

#women img.fish { height: 8em; margin: 4.55em 0 0 4.5em; z-index: 104; }
#men img.fish { height: 8.15em; margin: 3.85em 0 0 4.7em; z-index: 104; }

#opera { width: 100%; height: 2px; position: absolute; bottom: 0; }

/* ---------- LI:SECOND ---------- */

li#second img.logo { position: absolute; right: 0; top: 0; height: 20em; }
li#second h2 { position: absolute; bottom: -2px; left: -2px; }

/* ---------- LI:THIRD ---------- */

li#third img.logo { position: absolute; right: 0; top: 0; height: 20em; }
li#third h2 { position: absolute; bottom: -2px; left: -2px; }

/* ---------- Slide Navigation ---------- */

#slidenavi { position: absolute; right: 15px; bottom: 5px; }

.areasize { position: absolute; right: 3em; bottom: .5em; }
#prev { position: absolute; right: 12.7em; bottom: .5em; }
#next { position: absolute; right: 0; bottom: .5em; }

/* Header */

/* Content Liste */

#list {
	margin: 20px 0 0 0;
	width: 100%;
	list-style-type: none;
}
#list li {
	width: 300px; margin: 0 15px;
	float: left;
}
#list li#book {
	width: 300px; margin: 0 15px;
	float: left;
}
.clear { clear: both; }
.textimage { padding: .3em .6em .3em 0; float: left; }

	/* Formular */

#formular {
	margin: 0; padding: 0;
  max-width: 300px;
  float: left;
}
.hidden {
  display: none;
}
#form, #formular fieldset {
	margin: 0px; padding: 0px;
  border: 0px;
}
#formular input, #formular textarea, #formular button, ul#formlist select, ul#typelist select {
  margin: 2px 0px 6px 0px; padding: 2px;
  font: normal 1.2em sans-serif;
  border: 1px dotted #000;
  background: #fff;
  color: #999;
}
#formular input { width: 294px; height: 16px; }
#formular input.size { width: 13px; height: 13px; border: 0; margin: 0 5px 0 10px; padding: 0; }
#formular span#size { float: right; margin: 2px 0 0 0; padding: 0; font-size: 1.2em; }
#formular input.anzahl { width: 20px; margin: 3px 10px 3px 5px; text-align: center; }
#formular textarea { width: 294px; height: 40px;}
#formular button { width: 90px; height: 22px; margin: 0 13px 3px 0; }
#formular input:focus, #formular textarea:focus, #formular button:focus, ul#formlist select:focus, #formular button:hover { background: #eee; color: #000; }

ul#formlist { width: 300px; margin: 0; padding: 0; list-style-type: none; }

ul#formlist li { width: 90px; margin: 0 15px 0 0; padding: 0; float: left; }
ul#formlist li.right { width: 90px; margin: 0; float: left; }
ul#formlist select { width: 90px; }

	/* Formular */

/* Content Liste */

/* Footer */

#abstand {
	width: 100%; height: 50px;
	clear: both;
}

#footer, #push {
	margin: 0 auto; padding: 0px;
  height: 57px; width: 990px;
  clear: both;
}

/* Footer */

ul#footercontent { margin: 0; padding: 0; width: 990px; }
ul#footercontent li { list-style-type: none; float: left; width: 30em; margin: 1.5em; padding: 0; }

#counter { display: none; margin: 0; padding: 0; width: 0; height: 0; bottom: 0; }

/*
#vote { border: dotted 1px red; display: block; float: right; margin: -24px 0 0 0; }
#webnews { float: right; margin: 1px 0 -2px 0; }
#yigg { float: left; margin: 0 -1px -4px 0; padding: 0; }
*/