@charset "UTF-8";
/* CSS Document */
html, body {
background-color:#a15a92;
}
.logo {
	margin-top:-0.7em;margin-bottom:4em;padding:0;clear:both;
}
.logo img { 
    width:26%;
	max-width: 440px;
	min-width:236px;
	border: none;
}
#container {
	width:100%;
	background-image:url(http://www.atsukokudo.com/images/navbg.png);
	padding: 0;
	margin: 0;
	text-align:center;
}
div.copy {
	width:100%;
	color: #FFFFFF;
	margin: auto;
}
.search {
	top:3px;
}
#content {
	width: 100%;
}
#acc {
	position: absolute;
	top: 50px;
	right:50px;
	width:27%;
}
#acc img {
	width:100%;
}
#wrapper {
	width:95%;
	max-width: 2500px;
}
section {
	text-align:center;
	padding-top:1em;
}
#bigdiv {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: none;
	text-align: center;/*border: #E53134 thin solid;*/
}
#thumbs {
	display: none;
	clear: both;
}
#category {
	display: none;
	clear: both;
	/*width:100%;*/
	margin-left: auto;
	margin-right: auto;
	/*border:#E11D21 thin dashed;*/
}
#left {
	display: none;
	position: absolute;
	z-index: 10;
}
#middle {
	width: 50%;
	float: left;
	overflow: hidden;
	position: relative;
}
#plusbut {
	position: absolute;
	bottom: 0;
	right: 0;
	cursor: pointer;
}
#minusbut {
	position: absolute;
	bottom: 0;
	right: 0;
	cursor: pointer;
}
#middle img {
	width: 100%;
}
#right {
	width: 40%;
	float: left;
	text-align: center;
	padding-top: 6em;
}
#addBtn {
	float: none;
}
#closebut {
	cursor: pointer;
}
span#wizard {
	color: #862024;
	text-decoration: underline;
	cursor: pointer;
}
h2 {
	font-family: Times, "Times New Roman", serif;
	font-weight: 400;
	font-size: 1.35em;
}
h3 {
	font-family: Times, "Times New Roman", serif;
	font-weight: 300;
	font-size: 1.25em;
}
.wrap {
	overflow: hidden;
	margin: 10px;
}
.box {
	float: left;
	position: relative;
}
.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
	/*border: #000000 thin solid;
	background: #fff;*/
}
.boxInner img {
	width: 100%;
	cursor: pointer;
}
.boxInner .titleBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: 0;/*-50px*/
	/*background: #f3d8cc;*/
	/*background-image:url(http://www.atsukokudo.com/images/salmonnavbg.png);*/
	color: #000;
	padding-bottom: 10px;
	text-align: center;
	vertical-align:text-top;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	font-size: 0.75em;
	font-family: Times, "Times New Roman", serif;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
	margin-bottom: 0;
}
span.fa {
	display: block;
	color: #000;
	background-color: #FCF;
	width: 30px;
	border-radius: 30px;
	line-height: 30px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	float: left;
	margin: 6px;
}
.search input {
	background: none;
}
.search input:focus {
	background: none;
	color: #000;
}
button#addItem {
	width: 6em;
	height: 1.5em;
	background-color: black;
	color: white;
	border: none;
}
iframe {
	width: 100%;
	height: 100%;
	border: none;
}
li.searchbot {
	display: none;
}
nav ul {
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
nav li {
/*border: 1px solid #eee;*/
width: 9.09%;
}
nav li a {
	color: #FCF;
}
nav li a:hover {
	color: #FFF;
}
nav li a:active {
	color: #FFF;
}
nav li a:visited {
	color: #FCF;
}
#accl {
	position: absolute;
	top: 50px;
	left:50px;
	width:20%;
}
#accl img {
	width:100%;
}
#accr {
	position: absolute;
	top: 50px;
	right:50px;
	width:20%;
}
#accr img {
	width:100%;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
body {
	background-image: none;
}
.logo {
	margin-top:0;margin-bottom:0;
}
li.searchbot {
	display: block;
}
span.fa {
	font-size:small;
	width: 22px;
	line-height: 22px;
}
#acc {
	display:none;
}
#accl {
	display:none;
}
#accr {
	display:none;
}
.box {
	width: 50%;
	padding-bottom: 80%;
}
#bigdiv {
	width: 100%;
}
#bigdiv img {
	width: 80%;
}
left {
	width: 100%;
}
#middle {
	width: 100%;
	clear: both;
}
#right {
	width: 100%;
	clear: both;
}
 #menu {
	background: #000000;
	color: #FFF;
}
nav li {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #000000;
	border-bottom: #999999 thin solid;
	opacity: 1;
}
div.copy {
margin-left:auto;
margin-right:auto;
}
}

@media only screen and (max-width : 768px) and (min-width : 481px) {
/* Tablet view: 3 tiles */
body {
	background-image: none;
}
.logo {
	margin-top:-1em;margin-bottom:0;
}
li.searchbot {
	display: block;
}
section {
	padding-top:0.3em;
}
.box {
	width: 20%;
	padding-bottom: 34%;
}
#bigdiv {
	width: 100%;
}
 #menu {
	background: #000000;
	color: #FFF;
}
nav li {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #000000;
	border-bottom: #999999 thin solid;
	opacity: 1;
}
span.fa {
	font-size:small;
	width: 22px;
	line-height: 22px;
}
#acc {
	top:20px;
	right:20px;
}
#accl {
	display:none;
}
#accr {
	display:none;
}
div.copy {
margin-left:auto;
margin-right:auto;
}
}

@media only screen and (max-width : 1024px) and (min-width : 769px) {
/* Small desktop / ipad view: 4 tiles */
/*.box {
	width: 16.66%;
	padding-bottom: 27.5%;
}*/
.box {
	
	width: 14.285%;
	padding-bottom: 24%;
}
.logo {
	margin-top:-0.5em;margin-bottom:0;
}
li a {
	font-size: 0.715em;
}
#acc {
	top: 30px;
	right:30px;
}
span.fa {
	font-size:small;
	width: 22px;
	line-height: 22px;
}
div.copy {
	font-size: 0.715em;
}
}

@media only screen and (max-width : 1280px) and (min-width : 1025px) {
/* Medium desktop: 5 tiles */
/*.box {
	width: 16.66%;
	padding-bottom: 27%;
}*/
.box {
	
	width: 14.285%;
	padding-bottom: 23.5%;
}
.logo {
	margin-top:0;margin-bottom:0.75em;
}

li a {
	font-size: 0.85em;
}
div.copy {
	font-size: 0.75em;
}
}

@media only screen and (max-width : 1400px) and (min-width : 1281px) {
/* Medium desktop: 6 tiles */
.box {
	
	width: 12.5%;
	padding-bottom: 20.75%;
}
li a {
	font-size: 0.9em;
}
.logo {
	margin-top:-0.3em;margin-bottom:2em;padding:0;clear:both;
}
}
@media only screen and (max-width : 1680px) and (min-width : 1401px) {
/* Medium desktop: 8 tiles */
.box {
	width: 11.1%;
	padding-bottom: 18.25%;
}
li a {
	font-size: 1em;
}
.logo {
	margin-top:-0.7em;margin-bottom:3em;padding:0;clear:both;
}
}
@media only screen and (min-width : 1681px) {
/* Medium desktop: 8 tiles */
/*.box {
	width: 10%;
	padding-bottom: 16.6%;
}*/
.box {
	width: 9.09%;
	padding-bottom: 15%;
}
}