/* Base styles */
html {
}
body {
  font: normal normal normal 12px/135% "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  border:1px solid #e9e9e9;
  background:#f2f2f2;
}
table { background:#FFF }
a {
  text-decoration: none;
  color:#00F;
}
a:hover { color:#900; }
sup {
  display: inline-block;
  line-height: 50%;
  font-size: 0.5em;
  vertical-align: super;
}

/* fix html5 elements to have display block on older browsers */
header, nav, footer, article, section, aside {
  display: block;
}

/*
combined fonts rule:
font: style variant weight size/line-height family;
font: normal normal normal 12px/110% "Helvetica Neue", Helvetica, Arial, sans-serif;
*/


/* Layout */
body {
  width: 320px;
  margin: 0 auto;
}
body > header,
body > nav,
body > footer, 
body > article {
  width: 320px;
  background: white;
}
body > footer { padding:10px;width: 300px; }
body > header {
  height: 68px;
  line-height: 68px;
  /*background: url(/images/layout/logo.jpg) top;*/
  -o-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
body > header > a {
  vertical-align: middle;
  display: inline-block;
  height: 43px;
  line-height: 43px;
  width: 310px;
  background: url(/images/layout/logo4mobile.jpg) 22px center no-repeat;
  text-indent: -999em;
  font-size: 20px;
  color: white;
  text-align: center;
  font-style: italic;
}
body > header.subpage {
  height: 65px;
  line-height: 65px;
  text-align: center;
}
article#player,
article#product {
  overflow: hidden;
}
article#player h3,
article#product h3 {
  margin: 0 10px;
  font-weight:bold;
  color: #900;
}
article#player h1,
article#product h1 {
  margin: 0 10px 10px 10px;
  font-size:16px;
  color: #900;
  font-weight: bold;
}

article#player h1 em.black,
article#product h1 em.black {
  margin: 0 10px 10px 10px;
  font-size:16px;
  color: black;
  font-weight: bold;
}
article#player h1 em.black {
  margin-left: 0;
}

article#player h1 em,
article#product h1 em {
  font-style: normal;
  color: #000;
}
article#player h2,
article#product h2 {
  margin: 0 10px;
}
article#player p,
article#product p {
  margin: 0 10px 20px 10px;
}
#slide-show {
  overflow: hidden;
}
#slide-show > section {
  width: 3200px;
  position: relative;
}
#slide-show > section > a {
  float: left;
  width: 320px;
}
#slide-show > section > a > img {
  display: block;
}
#slide-show nav {
  clear: both;
  height: 25px;
  text-align: center;
	background: #F2F3F2 url(/images/layout/slideshow.png) repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#939593,
		#C7C8C7 70%,
		#F2F3F2
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#939593),
		to(#F2F3F2),
		color-stop(0.7, #C7C8C7)
	);
}
#slide-show nav > a {
  display: inline-block;
  height: 24px;
  width: 15px;
  text-indent: -999em;
  background: url(/images/layout/bullets.png) left top no-repeat;
}
#slide-show nav > a.selected {
  background-position: left bottom;
}
#slide-show nav > a:first-child,
#slide-show nav > a:last-child {
  float: left;
  width: 47px;
  background: url(/images/layout/slideshow_arrows.png) left top no-repeat;
}
#slide-show nav > a:last-child {
  float: right;
  background-position: right bottom;
}
nav#site-nav {
  position: absolute;
  z-index: 1;
  background: transparent;
}

nav#site-nav.open a#toggle {
  background-position: right bottom;
}
nav#site-nav section {
  padding: 0 0 20px 41px;
  overflow: hidden;
}
nav#site-nav section a {
  display: block;
  float: left;
  width: 71px;
  margin: 5px 4px;
  height: 70px;
  background: url(/images/layout/menu.png) 0px 0px no-repeat;
  text-indent: -999em;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

nav#site-nav section a:first-child
  { background-position:    0px    0px; }
nav#site-nav section a:first-child + a
  { background-position:  -77px    0px; }
nav#site-nav section a:first-child + a + a
  { background-position: -154px    0px; }  
nav#site-nav section a:first-child + a + a + a
  { background-position:    0px  -80px; }
nav#site-nav section a:first-child + a + a + a + a
  { background-position: -77px  -80px; }
nav#site-nav section a:first-child + a + a + a + a + a
  { background-position: -154px -80px; }
nav#site-nav section a:first-child + a + a + a + a + a + a
  { background-position:    0px -160px; }
nav#site-nav section a:first-child + a + a + a + a + a + a + a
  { background-position:  -77px -160px; }
nav#site-nav section a:first-child + a + a + a + a + a + a + a + a
  { background-position: -154px -160px; }

div#overlay {
  position: absolute;
  top: 43px;
  bottom: 0;
  width: 320px;
  opacity: 0.6;
  background: white;
}

nav#bread-crumbs {
  height: 26px;
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
	background: #C4C4C4 url(/images/layout/breadcrumb.png) repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#FAFAFA,
		#FFFFFF 50%,
		#C4C4C4
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#FAFAFA),
		to(#C4C4C4),
		color-stop(0.5, #FFFFFF)
	);
}
nav#bread-crumbs a {
  display: inline-block;
  background: url(/images/layout/breadcrumb_arrow.png) right center no-repeat;
  padding: 0 17px 0 7px;
  margin-left: -7px;
  height: 26px;
  color: #666;
  font-size: 10px;
  font-weight: bold;
  text-shadow: white 1px 1px 2px;
}
nav#bread-crumbs a:first-child {
  background:
    url(/images/layout/breadcrumb_home.png) 5px 5px no-repeat,
    url(/images/layout/breadcrumb_arrow.png) right center no-repeat;
  width: 17px;
  text-indent: -999em;
  margin-left: 0;
  padding-left: 0;
}
nav#bread-crumbs a:last-child {
  padding-right: 0;
  background: none;
  color: #900;
}
nav#bread-crumbs a:first-child:last-child {
  background:
    url(/images/layout/breadcrumb_home.png) 5px 5px no-repeat;
  padding-right: 10px;
}

body > footer #share {
  float: right;
  display: block;
  border: 1px solid #ccc;
  padding: 2px 5px 2px 5px;
  line-height: 10px;
  margin: -6px 0 0 0;
  font-weight: bold;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
	background: #E2E2E2 url(/images/layout/share.png) repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#FFFFFF,
		#E2E2E2
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#FFFFFF),
		to(#E2E2E2)
	);
}
body > footer #share > a {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 .3em;
}
body > footer #share > a > span {
  height: 24px;
  width: 24px;
  background: url(/images/layout/share_icons.png) no-repeat;
  -o-background-size: 200% 100%;
  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  background-size: 200% 100%;
}
body > footer a {
  color: #333;
}
body > footer aside {
  clear: both;
  font-size: 10px;
}
body > footer sup {
  vertical-align: super;
  font-size: 80%;
}



#home nav#site-nav #toggle {
  display: none;
}
#home nav#site-nav {
  position: static;
}
#home nav#site-nav section {
  display: block !important;
  padding-top: 3px;
  padding-bottom: 3px;
	background: #FFFFFF url(../images/layout/site_nav.png) repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#939593,
		#e7e7e7 50%,
		#FFFFFF
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#939593),
		to(#FFFFFF),
		color-stop(0.5, #e7e7e7)
	);
}

nav#search {
  background: #999 -moz-linear-gradient(
    left bottom 90deg, 
    #555555, 
    #999999
  ) repeat-x left bottom; 
  background-size: 20px;
  background: #999 -webkit-gradient(
    linear,
    left bottom, left top,
    from(#555),
    to(#999)
  ) repeat-x left bottom;
  line-height: 35px;
  padding: 0 10px;
  color: black;
  position: relative;
}
nav#search .right {
  float: right;
}
nav#search > h1 {
  display: inline-block;
  font-weight: normal;
}
nav#search > input[type=search] {
  position: absolute;
  margin: 7px 0;
  right: 10px;
  width: 220px;
}
nav#search .gray {
  background: #444;
  color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 19px;
  height: 21px;
  margin: 7px 0;
  padding: 0 1em;
  display: inline-block;
}
nav#search .gray:active,
nav#search .gray:hover,
nav#search .gray.selected {
  color: #333;
  background: white;
}
nav#search .white {
  background: white;
  color: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 21px;
  height: 21px;
  margin: 7px 0;
  padding: 0 .3em;
  display: inline-block;
}
nav#search .white:active,
nav#search .white:hover,
nav#search .white.selected {
  color: white;
  background: #444;
}
nav#search .white + .white {
  margin-left: .3em;
}
nav#search .red {
  font: inherit;
  border: none;
  background: #900;
  color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 23px;
  height: 23px;
  margin: 6px 0;
  padding: 0 1em;
  display: inline-block;
}
nav#search .red:active,
nav#search .red:hover,
nav#search .red.selected {
  color: white;
  background: #d33;
}
nav#search > #filters {
  display: table;
  width: 100%;
}
nav#search > #filters > span {
  display: table-cell;
  text-align: center;
  padding: 0 .5em;
}
nav#search > #filters > span:first-child {
  text-align: left;
  padding-left: 0;
}
nav#search > #filters > span:last-child {
  text-align: right;
  padding-right: 0;
}
nav#search > #filters > select { 
  width: 100%;
}
nav#search > input[type=submit] {
  margin-bottom: 10px;
  width: 200px;
}
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 320px; /*For KHTML*/
  list-style: none;
}

ul#navmenu li {
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  padding: 0 6px;
  display: block;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  background:url(/images/layout/bgm.png);
  text-decoration: none;
  height: 25px !important;
  padding-top:5px;
  height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover {
  color: #000;
  background:url(/images/layout/bgm.png);
}




#pagingbox { width:200px;float:right;padding-right:5px;font:11px Arial;margin-bottom:10px }
#pagingbox a {text-decoration:none }
#pagingbox a:hover #page { border:1px solid #000;color:#000 }
#pagingbox a:hover #dir { border:1px solid #000;color:#000 }
#pagingbox #page { display:inline-block;width:25px;height:20px;vertical-align:middle;border:1px solid #999;padding-top:3px;float:left;background:#FFF }
#pagingbox #dir { display:inline-block;width:50px;height:20px;vertical-align:middle;border:1px solid #999;padding-top:3px;float:left;background:#FFF }