html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body { 
	background:#111;
	margin: 0 auto;
	text-align:center;
	font:11px/18px "Lucida Grande", Verdana, MS Gothic, Osaka;
	color:#888;
	padding:0;
	-webkit-hyphens:auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

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

a:hover {
	color:#fff
}

a,input[type=image]{
	outline:0
}

ul#nav {
	position:relative;
	padding:6px 0 4px;
}

ul#nav li {
	display:inline;
	list-style-type:none;
	background-image:none;
	padding-right:5px;
	font-size:13px;
	letter-spacing:5px;
	color:#444
}

#copy {
	margin-top: 10px;
	font-size:11px;
	background:none;
	padding-bottom:10px
}

.footer {position:absolute; top: 575px; text-align:center; clear:both; margin-left:75px; color:#555; z-index:100}

.left-column, .right-column, footer {border: none; }
.right-column { padding: 0 0 0 1.5em;}

#splash { width:264px;height:155px; margin-bottom:40px; z-index:100 }
#splash:first-child h1 { position:absolute;top:90px; padding:0 0 0 15px; background:url(../img/chev.png) 0 4px no-repeat; }

#rollovers{margin-top:20px;line-height:18px;margin:20px 0 0 -50px; list-style-type:none;}
#rollovers a {color:#999; text-decoration:none; border-bottom:1px dotted gray}
#rollovers a:hover {color:#e0e0e0}

ul li{background:url(../img/chev.png) 0 4px no-repeat;color:#fff;padding:0 0 0 15px}
.normal{position:relative;top:-10px;left:-50px;list-style-type:none}
.normal li{color:#888}
.normal li:first-child{}
.normalspaced{background:none;text-indent:10px}
.normalspaced strong{}
.normalunspaced{background:none;}

h4{ margin:0 }
h4,h2,strong,blockquote{ font-size:12px;font-weight:400;color:#fff}
#sticker { display:block; position:relative; margin:-120px 0 0 300px; z-index:100 }
#sticker:hover {
	-webkit-transform:rotate(-23deg);
	-ms-transform:rotate(-23deg);
	-moz-transform:rotate(-23deg);
	-o-transform:rotate(-23deg);
	transform:rotate(-23deg);
}

#appstore-container {width:490px;height:70px;}
#appstore {float:left; }
#dictinfo{float:right; width:290px; font-size:9px; text-align:justify}
#dictinfo a:link,#dictinfo a:visited{color:#666}
#dictinfo a:hover{color:#888}
.clearfloat{clear:both;height:0;font-size:1px;line-height:0}

#menu { position:absolute;top:30px; width:400px; margin:0 0 0 70px; }
#menu ul { list-style:none}
#menu ul li { display:inline; background:none; float:left; margin-bottom:10px; }
#menu ul li a { -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius: 5px; behavior: url(PIE.php); color: #ccc; }
#menu ul li a { -moz-border-radius: 3px; -webkit-border-radius:3px; border-radius: 3px; behavior: url(PIE.php); }
#menu ul li a { padding:4px 8px; text-decoration: none; font-weight:bold; color: #c0c0c0; }
#menu ul li a.active { color:#eee;background:#666}
#iPhoneScreen { position:absolute;top:0;opacity:1;-moz-opacity:1;-khtml-opacity:1 }
#iPadScreen { position:absolute;top:0; opacity:0;-moz-opacity:0;-khtml-opacity:0; filter: alpha(opacity = 0); }
#screenWrap { position:relative;top:50px;left:-20px }

.caption p{position:relative;top:-5px;font-size:11px}
.caption p:not([lang='ja']){font-style:italic}

div.scrollable {position:relative;overflow:hidden; width:310px;height:451px;/*padding:10px 0;*/}
div.scrollable div.items {width:100em; position:absolute; } 
div.scrollable div.items:hover {cursor:pointer}
div.scrollable div.items div {float:left;padding:5px; width:310px}
div.items div.active {background-color:#fff}
div.items img{width: 300px;height: 431px;-webkit-border-radius: 3px;-webkit-box-shadow:0 0 5px #333;-moz-border-radius: 3px;-moz-box-shadow:0 0 1em #333;border-radius: 3px;box-shadow:0 0 1em #333}
div.items img:hover{-moz-box-shadow:0 0 10px blue;-webkit-box-shadow:0 0 10px blue;box-shadow:0 0 10px blue}

audio {margin-top:10px}
#ex, #speech, #ocr_iphone {display:none;}

.twocolumnbox div{float:left;width:48%}
.twocolumnbox div .smallprint{width:auto}
.firstcolumn{width:100%;margin-top:20px}
.secondcolumn{position:absolute;top:0;left:350px;width:250px;height:112px;margin-top:1px}
#feedback{position:relative;width:690px;height:249px;background:none;margin-left:5px;
;z-index:1}
#success{visibility:hidden}
#result{ margin-left:5px; width:330px}
#alert{width:250px;height:1.7em;padding-top:.3em;text-align:center;color:#cd0100;white-space:nowrap}

textarea{width:250px;height:112px;max-height:150px; margin-top:1px}
input[type=text],select{margin-bottom:8px}
select[name=Feedback_type]{width:300px}
.radio{color:#444;padding:0 20px}
.mac{width:141px}
.legend{font-size:11px;margin-top:5px;font-weight:400}
.paypalspinner{filter:alpha(opacity=0.2);opacity:0.2;-moz-opacity:0.2;-khtml-opacity:0.2;margin:45px}

.footer,.smallprint{
	font-size:11px;
	line-height:13px;
	font-weight:400;
	color:#444;
	padding:0;
}

#shareItems { position:relative; top:5px; left:0px; clear:both; z-index:100; position:relative; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); filter: grayscale(100%); width:250px; opacity:0.4}

.modulecredit { clear: both; font-size:10px; margin-left:5px}

/* MEDIA QUERIES */
@media screen and (max-width: 40.49em) {

	html {
		-webkit-text-size-adjust: none; /* Never autoresize text */
	}
	
	.columns-container {
		width:320px;
		background-color:#000;
		margin:0 auto;
		padding:20px 10px;
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.right-column {
		display: none;
	}

	.left-column {
		text-align:left;
		margin-left:5px;
		width:290px;
	}
		
		
	ul#nav li, #copy {
		font-size:10px;
		letter-spacing:0;
		padding-right:4px;
	}
	
	#shareItems { display: none }

	.footer { position:relative; top: 50px; margin: 0; }
	
	#copy {
		font-size:9px;
		letter-spacing:0;
		margin:0; 
		padding:0;
	}
	
	div#splash {
		width:95%;
	}
	div#splash:first-child h1 { position:absolute;top:140px;}

	#rollovers{ display: none }
	
	#appstore-container {
		position:relative;
		width:250px;
		margin:0 auto;
	}

	#dictinfo{
		padding: 20px 10px 0 10px;
	}
	
	#sticker { position:absolute; margin:20px 0 0 170px }

	#result { width:260px }
	#home { width:260px; margin: 5px}
	#menu { width:280px; margin: 5px 0 0 40px; }

	.module ul { position:relative; top:220px; left:-50px; margin: 20px 0; padding: 20px 0; white-space:none; clear: both }

	img[id='ocr'] {
		display: none
	}
	
	#description { margin-top:50px }
	div[class='description'] { font:11px/18px "Lucida Grande", Verdana, MS Gothic, Osaka }
	
	#feedback{ width:250px; height:320px }

	input, select{ width:250px }
	select[name='your_OS_version']{ width:250px }
	select[name='your_Device_type']{ width:250px }
	select[name='Feedback_type']{ width:250px }
	textarea { margin-bottom: 0; height:35px; max-height:55px; width:250px; resize:vertical;/*overflow: hidden*/}
	
	input[id='send'] { /*clear: both; float:left; margin-bottom:40px*/ }
	
	.twocolumnbox div{ width:95%}
	.secondcolumn{position:relative;left:0px;width:250px;height:60px;margin-top:1px; margin-bottom: 50px; clear: both }

	#feedback-facebook {float:right; margin-top:-195px; margin-right: 55px;}
}

@media screen and (min-width: 40.5em ) {

	.columns-container { 
		background:#000;
		width:860px;
		height:620px;
		border:2px solid #111;
		border-top:none;
		-moz-border-radius-bottomleft: 25px;
		-moz-border-radius-bottomright: 25px;
		-webkit-border-bottom-left-radius: 25px;
		-webkit-border-bottom-right-radius: 25px;
		border-bottom-left-radius: 25px;
		border-bottom-right-radius: 25px;
		text-align:left;
		padding:20px 30px 0;
		margin:0 auto;
		/*display: inline-block;*/
	}

	.left-column { 
		width: 37.5em;
		margin-right: -38.6em;
		float: left;
	}

	.right-column { 
		margin-left: 40em;
		float: left;
	}
	
	#modules { position:relative;top: 80px; left:-40px; width:400px; }
	.module ul { position:relative; top:25px; left:345px; }
	
	#feedback-facebook {float:right; margin-top:-190px; margin-right: -380px;}
}

@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ 
	.columns-container { 
		margin:0 14%;
	}
	
	.footer {
		width: 100%
	}
}

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{	
	.columns-container { 
		margin:0 14%;
	}
	
	.footer {
		width: 100%
	}
}