@charset "utf-8";

/*STYLES - essential for sticky footer*/
html {
height:100%;
min-height:100%;
position: relative;
}
 
body {
height:100%;

}

body{
margin:0;
	padding:0;
	height:100%;
	background:#ecf1f3 url("http://www.sumiart.com/maintenance/images/bk_body_503.jpg") center center / cover no-repeat fixed;
position:rerative;
}


@media only screen and (max-width: 767px)  {
body {
background-image: url("http://www.sumiart.com/images/bk_body_503s.jpg");
-moz-background-size: 100% 100%;
background-size: 100% 100%;
min-width:300px;
width:100%;
height:100%;
margin-bottom: 0;
position:relative;
  }
}


.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -120px;
}

header{
position: relative;
top:0;
left:0;
width:100%;
height:150px;
background-color:#fff;
opacity: .9;
-webkit-opacity: .9;
-moz-opacity: .9;
filter: alpha(opacity=90);	/* IE lt 9 */
-ms-filter: "alpha(opacity=90)"; /* IE 9 */
z-index:1000;
}
header .innerBlock{
max-width:980px;
margin:0 auto;
height:100px;
position:relative;
}
.headLine{
position:absolute;
top:1px;
left:0;
font-size:1.0rem;
}
.headLine p{
max-width:980px;
margin:-30px auto 0;
}

header .leftColumn{
width:260px;
margin-top:20px;
margin-left:20px;
float:left;
height:100px;
position:relative;
}

header .leftColumn hgroup h1{
margin:20px 0 0 0;
line-height:0
}

@media only screen and (min-width: 767px) {
header .innerBlock{width:1080px;}
nav.globalNav{
position: absolute;
top:32px;
/*right:0px;*/
left:50%;
width:50%;
max-width:540px;
margin-top:60px;
z-index:3000;
}
nav.globalNav ul{width:100%;text-align: right;}
nav.globalNav ul li{
padding:20px;
color:#ccc;
display: inline;
}
nav.globalNav ul li a:link,nav.globalNav ul li a:visited{
color:#333;
}
}


@media only screen and (min-width: 767px) {
.nav-open {
display:none;
}
}

@media only screen and (max-width: 767px) {
.nav-open {
position: absolute;
top:12px;
right:0px;
z-index: 1200;
margin:0 12px 0 3px;
padding:0px 7px;
vertical-align:middle;
color:#999 !important;
font-size:21px;
text-align:right;
border:1px solid #ddd;
border-radius:3px;
}
.nav-open span{
display:none;
}
.nav-open a {
  position: absolute;
  top: 5px;
  right: 10px;
}
nav.globalNav {
position:ablosute;
top: 280px;
float:left;
display: none;
width: 100%;
z-index: 100;
background:#000;
color:#666;
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=80);	/* IE lt 9 */
-ms-filter: "alpha(opacity=80)"; /* IE 9 */
}
nav.globalNav ul{
width:100%;
padding:3px 0;
}
nav.globalNav ul li{
float:none;
display:block;
padding:0;
margin:0px 36px;
border-bottom:1px solid #666;
}
nav.globalNav ul li:last-child{
border:none 0;
}
nav.globalNav ul li span{
padding:5px 0;
display:block;

}
nav.globalNav ul li a:link,nav.globalNav ul li a:visited{
color:#fff;
padding:5px 0;
display:block;
}
nav.globalNav ul li a:hover{
text-shadow:0 0 8px #fff;
}
}


#contArea{
margin-top:0px;
width:100%;
clear:both;
}
#contArea .innerBox{
max-width:908px;
margin:0 auto;
padding:36px;
}

#contArea a:link,a:visited{
color:#fff;
text-decoration:none;
}

#contArea a:hover{
color:#666FBF;
text-decoration:none;
}
#contArea a:active{
color:#fff;
text-decoration:none;
}

@media only screen and (max-width: 767px) {
#contArea{
width:100%;
max-width: 767px;
margin:0 auto;
padding:0;
margin-top:0px;
overflow:hidden;
}
#box2{
text-align:right;
}
#contArea .innerBox{
max-width:595px;
margin:0 auto;
padding:36px;
}
#contArea a{
color:#ffcccc;
text-decoration:none;
}
#contArea a:link,a:visited{
text-decoration:none;
}
#contArea a:hover{
color:#fff;
color:#8e0c64;
text-decoration:none;
}
}

#contArea section h1{
color:#f6f6f6;
font-size:2.4rem;
text-shadow:0 0 8px #999;
}

#boxWrapper{
display:table;
width:100%;
}
#box{
display:table-cell;
color:#090909;
text-shadow: 0px 0px 6px #e6e6e6; 
width:50%;
text-align:left;
line-height:2.0;
vertical-align:top;

}
#box p{
margin-right:1em;
}
#box ul li{
padding:0;
float:none;
}

#box2{
display:table-cell;
 color:#fff;
 width:50%;
}
#box4{
display:block;
color:#fff;
width:400px;
height:170px;
margin-top:36px;}

#contArea ul{margin:0;}

#contArea li{
display:block;
padding:20px;
float:left;
text-shadow: 0px 0px 6px #999; 
}

@media only screen and (max-width: 767px) {
.sp_only{display:block;
}
.pc_only{display:none;
}
#box{
width:60%;
}
#box2{
width:40%;
}
#box4{
width:200px;
}
}


@media only screen and (min-width: 767px) {
footer{
width:100%;
text-align:left;
text-transform: uppercase;
color:#666666;
background-color:rgba(255,255,255,0.2);
}
footer .innerBlock{
max-width:980px;
margin:1em auto !important;
padding-top:1em;
}
footer p{
margin:0 36px;
}
}


#push,footer{
height:120px;
}
@media only screen and (max-width: 767px) {
footer{
width:100%;
text-align:left;
text-transform: uppercase;
color:#666666;
background-color:rgba(255,255,255,0.2)
}
footer .innerBlock{
max-width:767px;
margin:1em auto !important;
padding-top:1em;
}
footer p{
margin:0 36px;
font-size:80%;
}
}

@media only screen and (max-width: 479px) {
	footer{
height: 120px;
width:100%;
}
}