/*
© Copyright 2013 i--studios WERBEAGENTUR
/*
width menu: 190
width pics: 896
padding: 14
total width: 1100
height: 600
reset*/
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
font-family: 'Source Sans Pro', sans-serif, Arial,Helvetica,Verdana;
font-weight:200;
font-size:0.96em;
letter-spacing:0.03em;
background-color:#404040;
}
img {border:0;}
#thewrap {
max-width:896px;
min-width:320px;
height:100%;
margin:0  auto;
}
#space { 
width:100%;
height:50%;
margin-bottom:-300px;
float:left;
display:none;
background-color:#404040;
}
#content { 
max-width:100%;
min-width:320px;
}
#topleft {
max-width:100%;
margin-bottom:4px;
}
#left {
position:relative;
width:100%;
min-height:100px;
background-color:#262626;
}
#right {
position:relative;
width:44px;
min-height:600px;
max-height:600px;
background-color:#262626;
float:left;
display:none;
}
#bottomright {
max-width:896px;
width:100%;
min-width:320px;
max-height:600px;
background-color:#262626;
float:left;
}
.shadow {
box-shadow: 4px 6px 14px #181818;
}
#m_normal {margin-right:16px;margin-top:6px;display:block;float:right;}
#m_tiny {display:none;}
#m_upright {position:absolute;left:4px;right:0;bottom:4px;display:block;}

#credit_ltwo{display:none;}

#creditlink {position:absolute;top:6px;left:11px;}

#call{display:none;}
#clickcall a{color:#606060;line-height:1.6em;}

#menu img {
margin-right:6px;
margin-bottom:1px;
vertical-align:bottom;
border:2px solid transparent;
visibility:hidden;
}
#menu {position:absolute;width:100%;top:32px;}

#menu #saga, #exposure, #factory, #noir{padding-right:1px;}

/*links & hover*/
a { 
color:#606060;
text-decoration:none;
}
a:hover { 
color:#b3b3b3;
}
#menu ul{display:block;padding-top:13px;}
#menu li{
list-style-type:none;
float:left;min-width:80px;height:34px;width:20%;
}

#menu a{color:#000;background-color:#606060;display:block;padding:8px;}
#menu a:hover{color:#b3b3b3;background-color:#111111;}
.pic {
max-width: 100%;
height: auto;
}
#menubutton{
display:none;
float:right;
margin-top:10px;
margin-right:12px;
}
#credit_info {
text-align:left;
display:none;
height:100%;
padding-left:8px;
padding-top:4px;
font-size:0.9em;
line-height:1.5em;
color:#606060;

}
.credits {
max-width:430px;
padding-right:22px;
padding-bottom:12px;
float:left;
}
#pic_content{text-align:center;min-width:896px;min-height:600px;}
#bottomright:hover #control{visibility:visible;}
#control {
position:relative;
top:-590px;
left:760px;
z-index:20;
width:126px;
height:62px;
visibility:hidden;
overflow:hidden;
}
#control ul {
margin:0;
padding:0;
list-style-type:none;
}
#control li a{
background-image:url(img/ctrl.png);
float:left;
}
#ctrl1 a{background-position:0px 0px;}
#ctrl1 a:hover{background-position:0px 192px;}
#ctrl2 a{background-position:0px 320px;}
#ctrl2 a:hover{background-position:0px 128px;}
#ctrl3 a{background-position:0px 256px;}
#ctrl3 a:hover{background-position:0px 64px;}
.nav_bg{width:42px;height:62px;}

.px3 {
height:8px;
} 
.px4 {
height:9px;
} 

/*responsive*/
@media only screen and (min-width: 1100px) {
#clickcall{display:none;}
#call{display:block;}
#topleft{max-width:190px;width:100%;margin-right:14px;float:left;}
#bottomright{float:right;}
#space{display:block;}
#thewrap{max-width:1100px;width:1100px;}
#m_upright{display:block;margin-bottom:6px;}
#m_normal{display:none;}
#creditlink{top:574px;left:19px; right:0; bottom:4px;}
#creditlink img{visibility:visible;margin-bottom:-2px;margin-left:-1px;}
#menu li{height:22px;clear:left;width:180px;}
#left {min-height:600px;width:146px;background-color:#181818;float:left;}
#right{display:block;}
#menu{left:18px;top:10px;}
#menu img{visibility:visible;margin-bottom:1px;}
#menu a{color:#606060;background-color:transparent;padding:0px;display:inline-block;}
#menu a:hover{color:#b3b3b3;background-color:transparent;}
#control{top:-580px;left:750px;}
#credit_info{padding-left:18px;}
}

@media only screen and (max-width: 912px) {

body{background-color:#999999;}
body, html{color:#564b47;}
#thewrap {max-width:100%;}
#credit_info{font-size:1em;}
#menu a, #menu a:visited{background-color:#888;color:#fff;}
#menu a:hover{color:#564b47;background-color:#ccc;}
#topleft{margin-bottom:0px;box-shadow:none;}
#bottomright{box-shadow:none;max-height:100%;}
#pic_content{min-width:160px;min-height:160px;}
#control{position:absolute;visibility:visible;width:90px;height:24px;top:32px;left:7px;}
.nav_bg{width:20px;height:24px;}
#control li a{background-image:url(img/ctrl_mini.png);float:left;}
#ctrl1 a{background-position:0px 0px;}
#ctrl1 a:hover{background-position:0px 72px;}
#ctrl2 a{background-position:0px 120px;}
#ctrl2 a:hover{background-position:0px 48px;}
#ctrl3 a{background-position:0px 96px;}
#ctrl3 a:hover{background-position:0px 24px;}
#left {background-color:#f2f2f2;}
#bottomright {background-color:#999999;}
}

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

body, html{background-color:#999999;}
.credits{font-size:1.2em;}
#left {min-height:47px;}
#bottomright {border-top:1px solid #999999;}
#creditlink{display:none;}
#credit_ltwo{display:block;}
#menu{display:none;position:relative;top:0px;}
#menubutton{display:block;margin-top:14px;}
#m_normal{display:none;}
#m_tiny{display:block;float:left;margin-left:8px;margin-top:12px;}
#menu li{font-size: 1.2em;height:40px;width:100%;padding-right:0px;}
#menu a, #menu a:visited{margin-top:-22px;}
#menu #exposure{padding-right:0px;}
#control{top:15px;left:206px;}
}