/*
Theme Name: Magazin #5
*/

@font-face{font-family:DinRound;src:url(/2011/data/fonts/dinround.woff) format('woff');font-weight:normal;}
@font-face{font-family:DinRound;src:url(/2011/data/fonts/dinroundmedium.woff) format('woff');font-weight:bold;}

* { margin: 0; padding: 0; }


html {
overflow-y:scroll;overflow-x:hidden;
height: 100%;
}


body {
line-height: 1.6; 
font-size: 14px;
font-family: DinRound, Sans-Serif;
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
background: #292929 url(ordnung.png) repeat-y;
background-position: center;
background-attachment: fixed;
cursor: default;
color: #222;
}

#thecssawards a {
display: block;
position:absolute;
top:80px;
right:0px;
z-index:3555;
width: 75px;
height: 120px;
background:url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/award_day_black.png) top right no-repeat;
}


@media all and (max-width: 600px) {
#thecssawards a {display: none;}
}


@media all and (max-width: 321px) {
body { background: none; background-color: #bbb; }
}

#single {
background: #292929 url(single-bgr.jpg) center -320px repeat-y;
background-attachment: fixed;
}

@media all and (max-width: 321px) {
#single { background: none; background-color: #bbb; }
}

#kino {
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
height: 1%;
}

#feedback {
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
padding: 5.5% 8%;
}

#feedback label span { color: #888; text-shadow: 1px 1px 2px #222;  }

#feedback input, #feedback textarea { border: none; width: 81.7%; padding: 3px 6px; margin-bottom: 8px; margin-top: 8px; background: #fff; color: #888; }
#feedback textarea { height: 200px; }

#feedback input[type="submit"] { color: #fff; width: auto; padding: 6px 12px; margin-bottom: 9px; margin-top: 14px; background: #ee0000; }

#feedback input[type="submit"]:hover { background: #555; cursor: pointer; }
#feedback input[type="submit"]:active { background: #333; cursor: pointer; }

#feedback input:focus, #feedback textarea:focus { outline: none; color: #222; }

#feedback .link { color: #888; text-decoration: underline; }
#feedback .link:hover { color: #fff; cursor: pointer; }
#feedback .link:active { color: #ee0000; }


#cover {
background: #DADADA url(cover-bgr.jpg);
background-position: center;
background-attachment: fixed;
height: 100%;

}

#cover (max-width: 321px) {
#single { background: none; background-color: #bbb; }
}

#cover #dmig {
position: absolute;
z-index: 50;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent url(cover-dmig.png) no-repeat center;
}

#cover #five {
position: absolute;
z-index: 150;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent url(cover-5.png) no-repeat center;
}

#ordnung {
background: transparent url(cover-ordnung.png) center no-repeat;
height: 100%;
}

#adler {
width: 36px; height: 36px; position: absolute; top: 62px; margin-top: 2%;  z-index: 400; left: 4%;
}

@media all and (max-width: 600px) {
#adler { top: 11px; }
}

#andre {
width: 80px; height: 26px; position: absolute; bottom: 37px; z-index: 400; right: 39px;
}

mark { background: transparent; color: #fff; }

@media all and (max-width: 321px) {
#andre, mark { display: none; }
}

#andre:hover, #adler:hover { opacity: 0.6; }

@media all and (min-width: 1200px) {
#andre { right: 50%; margin-right: -560px; }
#adler { left: 50%; margin-left: -553px; }
}


@media all and (max-width: 800px) {
#cover #dmig { background: none; }
#cover #five { background: transparent url(cover-52.png) no-repeat center; }
#ordnung { background: transparent url(cover-ordnung2.png) center no-repeat; }
}

@media all and (max-width: 600px) {
#cover #five { background: transparent url(cover-53.png) no-repeat center; }
}

@media all and (max-width: 321px) {
#cover #five { background: transparent url(cover-52.png) no-repeat center 5px; }
}

.between { 
border-bottom: solid 1px #444;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
padding: 13px 4.2%;
padding-bottom: 15px;
color: #777;
text-shadow: 1px 1px 2px #222;
}

@media all and (max-width: 321px) {
.between { height: 22px; overflow: hidden; }
}

.between.top { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; border: none; }

@media all and (min-width: 1200px) {
.between.top { left: 50%; margin-left: -600px; width: 1100px; padding-left: 50px; padding-right: 50px; }
}

@media all and (max-width: 600px) {
.between { display: none; }
}

.between span {float: right; }
.between a, #path a { color: #fff; text-decoration: none; } 
.between a:hover, #path a:hover { color: #fff; text-decoration: underline; } 

@media all and (max-width: 800px) {
.between span {display: none;}
}

#home {
position: absolute;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #222;
background-color: transparent;
padding: 0 2.25%;
overflow: hidden;
margin-bottom: 0;
background: transparent url(cover-illu.png) no-repeat center;
background-attachment: fixed;
}

#home img {
display: none;
}


#home header {
display: none;
padding-left: 2.2%;
padding-right: 1.35%;
background: none;
}

.left {
float: left;
}

.right {
float: right;
}


#home a { color: #222; }
#home a:hover { color: #fff; }


#home h1 {
display: none;
}

#counter {
font-size: 11px;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
padding: 1px 4px;
border: solid 1px #ccc;
float: left;
margin-right: 14px; 
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 1px #fff;
color: #222;
background-color: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ccc));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
}



#sharer { position: absolute; left: 50%; right: 10px; margin-left: -90px; margin-top: -230px; background: transparent url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/heartit.png) no-repeat; width: 177px; height: 179px; z-index: 0; }

@media all and (max-width: 321px) {
#sharer { display: none; }
}


#sharer.homeshare {
z-index: 300;
background: transparent url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/heartit-weiss.png) no-repeat;
}

#sharer:hover { background: none; }
#sharer div { display: none; line-height: 2em; padding: 65px 40px; text-align: center; }
#sharer:hover div { display: block; }

#single #sharer { margin-top: -295px; }


@media all and (min-width: 1200px) {

}

@media all and (max-width: 825px) {

}

#inhalt,  #einleitung, #impressum, #verlosung, #poster, #pdf {
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #999;
text-shadow: 1px 1px 2px #111;
padding-left: 2.4%;
padding-bottom: 1.3%;
}

#verlosung, #poster { border-bottom: solid 1px #383838; }

#pdf { border-top: solid 1px #383838; }

#poster {
padding: 2% 4.1%;
}

#pdf {
padding: 1.7% 2.1%;
padding-bottom: 1.2%;
padding-right: 4%;
}

#einleitung {
padding-bottom: 240px;
}

@media all and (max-width: 321px) {
#einleitung { padding-bottom: 2%; }
}

sup { font-size: 11px; }


#inhalt h1,  #einleitung h1, #impressum h1, #verlosung h1, #pdf h1 { color: #fff; }


#inhalt a,  #einleitung a, #impressum a, #verlosung a, #poster a, #pdf a {
color: #fff;
text-decoration: none;
}

#inhalt a:hover,  #einleitung a:hover, #impressum a:hover, #verlosung a:hover, #poster a:hover, #pdf a:hover {
text-decoration: underline;
}

nav div {
padding: 0 1.25%;
padding-bottom: 4.6%;
color: #999;
padding-left: 40px;
}

nav a {
font-size: 22px;
line-height: 1.5;
text-decoration: none;

}

nav span {
font-size: 22px;
margin-left: -1.9em;
margin-right: 0.4em;
}

header {
display: block;
padding: 15px 4.3%;
color: #222;
max-height: 74px;
overflow: hidden;
}


header a {
color: #222;
}

header a:hover {
color: #fff;
}


.menu { width: 100%; cellspacing: 0; }

.menu {
  border-collapse: collapse;
}

.menu td {
  padding: 0;
}

.menu .paging {
width: 10%;
}

.menu .inhalt {
width: 8%;
}


#single .menu { margin-top: 103px; }
#single .menu.bot { margin-top: 0; }

#index .menu.bot {display: none;}

.menu a {
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
text-decoration: none;
display: block;
opacity: 0.25;
text-align: center;
padding: 20px 0;
-webkit-transition: opacity 500ms ease-in;
}


.menu a span { display: block !important; opacity: 0; -webkit-transition: opacity 400ms ease-in;  position: absolute; margin-top: -128px; margin-left: 4.3%; left: 0; text-align: left; color: #222; height: 0; overflow: hidden; }
.menu a span strong { display: block; font-weight: normal; font-size: 22px; margin-right: -1px; }
.menu a:hover span { -webkit-transition: opacity 400ms ease-in; opacity: 1; height: auto;  }
.menu:hover span { height: auto;  }
.menu.bot a span, .menu.bot a:hover span { margin-top: 37px; }
.menu a:active span, .menu a.selected:hover span, .menu a span:hover { visibility: hidden; display: none; height: 0; opacity: 0; cursor: default; }
.menu .paging a {
padding: 20px 9px;
}

@media all and (max-width: 321px) {
.menu a { opacity: 1; }
.menu a span { display: none !important; }
}


@media all and (min-width: 1200px) {
.menu a span {  left: 50%; margin-left: -550px; }
}

.menu .inhalt a {
padding: 20px 0;
}

.menu a.selected {
opacity: 1;
background: #fff;
color: #222;
border:none;
}

.menu .inhalt a.selected, .menu a.selected.dark {
opacity: 1;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
border:none;
}

.menu .inhalt a.selected:hover, .menu a.selected.dark:hover {
opacity: 1;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
border:none;
}


.menu a.selected:hover {
opacity: 1;
background: #fff;
color: #222;
border:none;
}

.menu a:hover {
-webkit-transition: background 0ms ease-in;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
opacity: 1;
text-decoration: none;
}

.menu a:active {
top: 0;
}


@media all and (max-width: 800px) {

.menu td.page { display: none; }
.menu a span, .menu a:hover span { display: none; }
#single .menu { margin-top: 0; }
.menu a { padding: 15px 0; }
.menu .paging, .menu .inhalt { width: 25%; }
.menu .paging a { padding: 15px 9px; }
.menu .inhalt a { padding: 15px 0; }
}



footer {
display: block;
padding: 26px 2.5%;
text-align: right;
}

@media all and (max-width: 321px) {
footer { display: none; }
}


.logo { 
background: url(adler-white.png) no-repeat right center;
display: block;
margin-left: auto;
margin-right: 1.8%;
height: 48px;
width: 48px;
-webkit-transition: all 300ms ease-in-out;
}

article {
background-color: #fff;
display: block;
padding-top: 2%;
padding-left: 2.4%;
padding-right: 2.4%;
padding-bottom: 240px;
}

@media all and (max-width: 321px) {
article { padding-bottom: 2%; }
}


.space {
height: 104px;
}

.space a {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
width: 50px;
height: 50px;
line-height: 47px;
text-align: center;
font-size: 12px;
margin-right: 2px;
display: block;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
text-decoration: none;
opacity: 0.25;
float: right;
}

.space a:hover {
text-decoration: none;
color: #fff;
opacity: 1;
}

section {
margin: 0 2%;
margin-bottom: 2%;
width: 96%;
display: block;
-moz-column-count: 2; 
-moz-column-gap: 2em; 
-webkit-column-count: 2; 
-webkit-column-gap: 2em;
column-count: 2; 
column-gap: 2em;
}

.interview section {
-moz-column-count: 1; 
-moz-column-gap: 0; 
-webkit-column-count: 1; 
-webkit-column-gap: 0;
column-count: 1; 
column-gap: 0;
float: left;
width: 46%;
}

.interview section.w70 {
width: 70%;
}

section.w22 {
width: 22%;
}

section section {
width: 50%;
margin: 0;
}



@media all and (max-width: 650px) {
section {
-moz-column-count: 1; 
-moz-column-gap: 0; 
-webkit-column-count: 1; 
-webkit-column-gap: 0;
}
.interview section {
float: none;
width: 96%;
}

.interview section.w70 {
width: 96%;
}

section.w22 {
width: 96%;
}

}


#einleitung h1, #inhalt h1, #impressum h1, #verlosung h1 {

font-weight: normal;
font-size: 36px;
line-height: 1.25;
padding: 2% 2.15%;
margin-bottom: 2%;
letter-spacing: -0.01em;
clear: both;
}

#pdf h1 {
font-weight: normal;
font-size: 22px;
line-height: 1.25;
padding: 0 2.4%;
padding-bottom: 0;
margin-top: 1%;
margin-bottom: 1%;
clear: both;
color: #888;
}



#inhalt h1 span {
color: #777;
}

small { display: block; font-size: 13px; margin-left: 2%; margin-bottom: 4%; margin-top: 15px; }
section small { margin-left: 0; margin-bottom: 1.6em; margin-top: -15px; }

h1 {

font-weight: 500;
font-size: 65px;
line-height: 1.2;
letter-spacing: -0.02em;
padding: 2% 2%;
margin-left: -4px;
margin-bottom: 2%;
clear: both;
}

h1 span {
margin-top: -14px;
color: #ccc;
}

section h1 {
margin: 2.6% 0%;
margin-bottom: 7%;
}


h2 {
font-weight: 500;
font-size: 24px;
line-height: 1.45;
padding: 0 2%;
margin-bottom: 4.1%;
clear: both;
}

section h2 {
padding: 0;
margin-bottom: 4%;
font-size: 22px; 
}



h3 {
font-weight: 500;
font-size: 24px;
line-height: 1.45;
margin: 4% 2%;
}


h4 { font-size: 17px; font-weight: 500; margin: 0 2%; }

h2 a, h3 a { text-decoration: none; border-bottom: solid 3px; }
h2 a:hover, h3 a:hover { text-decoration: none; }

section h3 { margin: 0; margin-bottom: 4%; font-size: 18px; }

section h4 { margin: 0; }

@media all and (min-width: 1000px) {
body { font-size: 15px; }
h1 { font-size: 85px; }
h2 { font-size: 28px; }
h3 { font-size: 28px; }
section h3 { font-size: 24px; }
}

@media all and (max-width: 1000px) {
body { font-size: 14px; }
h1 { font-size: 65px; letter-spacing: -0.01em; }
h2 { font-size: 26px; }
h3 { font-size: 26px; }
section h3 { font-size: 22px; }
}

@media all and (max-width: 650px) {
body { font-size: 15px; }
h1 { font-size: 45px; letter-spacing: 0em; }
h2 { font-size: 24px; }
h3 { font-size: 24px; }
section h3 { font-size: 20px; }
}

strong { font-weight: 500; }

em { background-color: #eee; font-style: normal;  }

@media all and (max-width: 321px) {
body { font-size: 15px; }
h1 { font-size: 26px; font-weight: bold; letter-spacing: 0em; }
h2 { font-size: 18px; }
h3 { font-size: 18px; font-weight: bold; }
section h3 { font-size: 18px; }
strong { font-weight: bold; }
}


p {
vertical-align: baseline;
margin: 0 2%;
margin-bottom: 1.6em;
}

section p { margin-right: 0; margin-left: 0; }




a { color: #222; }

a:focus { outline: none; }

a:hover {
color: #555;
text-decoration: underline;
}


img { margin: 0 2%; margin-top: 1%; margin-bottom: 1.5%; width: 96%; }

a img { border: none; }

section p img { margin: 0; width: auto; }

section img { margin: 0; padding-top: 7px; margin-bottom: 25px; width: 100%; }


hr{clear:both;border:none;height:0;color:#fff;border-color:#fff;}

::-moz-selection { background: #000; color: #fff; }
::selection { background: #000; color: #fff; }


/* ---------->>> thickbox specific link and font settings <<<------*/


.feedbackbutton { 
display: block; 
position: fixed; 
z-index: 400;
padding: 6px 13px; 
padding-bottom: 30px; 
bottom: -22px; 
left: 50%; 
margin-left: -40px;
background: transparent url(http://static.designmadeingermany.de/trans-85.png);
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 2px #222;
font-size: 13px;
}

.feedbackbutton:hover {
bottom: -14px; 
color: #fff;
text-decoration: none;
}

@media all and (max-width: 1025px) {
.feedbackbutton { display: none; }
}






#TB_window {
	font: 12px  "Droid Sans", arial, sans-serif;
	color: #272727;
}


#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

#TB_overlay {
	position: fixed;
	z-index:300;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayBG {

}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
}

#TB_window {
	position: fixed;
	z-index: 302;
	color:#272727;
	display:none;
	text-align:left;
	top:50%;
	left:50%;
	-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}

* html #TB_window { /* ie6 hack */
position: absolute;
}

#TB_window img#TB_Image {
	display:block;
  margin-bottom: 500px;
}

#TB_caption{
	padding: 12px;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#272727;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:12px;
	width:96px;
	z-index:903;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -48x;
	background: #fff url(http://static.designmadeingermany.de/lines.gif);
	-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}


* html #TB_load { /* ie6 hack */
position: absolute;
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
position: absolute;
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}