/* == TOP-LEVEL CONTAINERS == */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    width: 320px;
    min-height: 416px;
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    font-family: Helvetica;
    color: #000000;
    /* ensure that we don't get the default callout following a long touch on
    an element, which is a default behavior in Mobile Safari */
    -webkit-touch-callout: none;
    /* disable the Mobile Safari default behavior to adjust font size automatically
    to improve readability */
    -webkit-text-size-adjust: none;
}

body.landscape {
  width: 480px;
}

#browser {
  min-height: 416px;
}

body.landscape #browser {
  min-height: 268px;
}

/* == HEADER == */

#listHeader {
/*    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
    position: relative;
    height: 45px;
    border-bottom: 1px solid #2d3642;
    border-top: 1px solid #6d84a2;
    background: url('images/toolbar.png') #6d84a2 repeat-x;
}

.backButton {
  /* use absolute positioning and transforms as these will be subject to hardware transitions */
  position: absolute;
  -webkit-transform: translate(0px, 0px);
  /* the buttons should be displayed on top of the titles so that they can always receive touches */
  z-index: 1;
  /* set up the font appearance */
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: white;
  text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
  /* set up the chrome background */
    top: 3px;
  -webkit-border-image : url('images/back_button.png') 0 4 0 13;
  border-width : 0 4px 0 13px;
  padding-top: 7px;
  padding-right: 4px;
  /* base metrics used to ensure a minumum size and specify a max size that can be used to trim the contents */
  min-width: 40px;
  max-width: 60px;
  height: 23px; 
  /* enfore trimming if the label is too long */
  white-space : nowrap;
  overflow : hidden;
  text-overflow: ellipsis;
  display: none;
}

body.landscape .backButton {
  max-width: 90px;
}

/* touched state for the buttons */
.backButton:active {
  -webkit-border-image : url('images/back_button_touched.png') 0 4 0 13;
}

.title {
  /* use absolute positioning and transforms as these will be subject to hardware transitions */
  position: absolute;
  -webkit-transform: translate(0px, 0px);
  /* base metrics */
  height: 31px;
  margin-top: 5px;
  /* the titles should be displayed below the button so that they don't receive touches */
  z-index: 0;
  /* set up the font appearance */
  font-size: 16pt;
  font-weight: bold;
  color: white;
  text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
  /* enfore trimming if the label is too long */
  white-space : nowrap;
  overflow : hidden;
  text-overflow: ellipsis;
}

/* == MAIN PAGES CONTENT == */

#pages_container > div {
  position: absolute;
  -webkit-transform: translate(0px,0px);
}

#listPages > div {
    display: none;
    position: absolute;
/*    position: relative;*/
    margin: 0;
    padding: 0;
    left: 0;
    top: 45px;
    width: 320px;
    min-height: 372px;
  -webkit-transform: translate(0px,0px);
}

a[selected], a:active {
    background-image: url('images/listArrowSel.png'), url('images/item_background_touched.png') !important;
    background-repeat: no-repeat, repeat-x;
    background-position: right center, left top;
    background-color: #194fdb !important;
    color: #FFFFFF !important;
}

a[selected="progress"] {
    background-image: url('images/loading.gif'), url('images/item_background_touched.png') !important;
}

h2.listGroup {
  height: 21px;
  padding: 0px 10px;
  font-family: Helvetica;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
  border-top: 1px solid rgb(113, 125, 133);
  border-bottom: 1px solid rgb(152, 158, 164);
  background: url('images/listGroup.png') repeat-x;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

ul {
  width: 320px;
}

body.landscape ul {
  width: 480px;
}

li {
  font-size: 20px;
  list-style-type: none;
  padding: 0;
}

ul.edgeList, ul.appStoreList {
    margin: 0;
    padding: 0;

    font-size: 20px;
    font-family: Helvetica;
    font-weight: bold;
    color: black;

    background-color: #FFFFFF;
}

ul.edgeList li {
    margin: 0;
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 0px 10px 10px;
    line-height: 26px;
}

ul.edgeList li:first-child {
    padding-top: 10px;
    border-top: none;
}

ul.edgeList li a {
    display: block;
    padding: 8px 20px 8px 10px;
    margin: -8px 0px -8px -10px;
    text-decoration: none;
    color: black;
    background: url('images/listArrow.png') no-repeat right center;
}

ul.edgeList li a[selected], a:active {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -10px;*/
    background-color: #194fdb !important;
    background-image: url('images/listArrowSel.png'), url('images/item_background_touched.png');
    background-position: right center, left top;
    background-repeat: no-repeat, repeat-x;
    color: white !important;
}

ul.edgeList li.group {
    height: 21px;
    padding: 0px 10px;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0 1px 0;
    border-top: 1px solid rgb(113, 125, 133);
    border-bottom: 1px solid rgb(152, 158, 164);
    background: url('images/listGroup.png') repeat-x;
    line-height: 23px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

ul.edgeList li.group:first-child {
    top: 0;
    border-top: none;
}

ul.edgeList li h1 {
    position: relative;
    margin: 0;
    padding: 8px 0 8px 10px;
    font-size: 20px;
    font-weight: bold;
    list-style: none;
}

ul.edgeList li p {
    font-size: 14px;
    font-weight: normal;
    color: black;
    margin-top: 2px;
    margin-right: 10px;
/*    padding-right: 10px;*/
    background-color: transparent;
    line-height: 17px;
}

ul.edgeList li a[selected] p, a:active p {
    color: white !important;
}


ul.edgeList li.labelRed {
    background-color: rgb(255, 140, 140);
}

ul.edgeList li.labelOrange {
    background-color: rgb(255, 179, 32);
}

ul.edgeList li.labelYellow {
    background-color: rgb(255, 245, 113);
}

ul.edgeList li.labelGreen {
    background-color: rgb(194, 221, 110);
}

ul.edgeList li.labelBlue {
    background-color: rgb(140, 202, 254);
}

ul.edgeList li.labelPerple {
    background-color: rgb(208, 175, 254);
}

ul.edgeList li.labelGray {
    background-color: rgb(203, 203, 203);
}

/* 奇数 - 濃い色 */
ul.appStoreList li:nth-child(odd) {
    margin: 0;
    border-top: 1px solid rgb(167, 168, 171);
    border-bottom: 1px solid rgb(137, 138, 141);
    background-color: rgb(152, 152, 156);
    padding: 8px 0 8px 10px;
    line-height: 23px;
}

/* 偶数 - 薄い色 */
ul.appStoreList li:nth-child(even) {
    margin: 0;
    border-top: 1px solid rgb(187, 187, 189);
    border-bottom: 1px solid rgb(138, 138, 141);
    background-color: rgb(173, 173, 176);
    padding: 8px 0 8px 10px;
    line-height: 23px;
}

ul.appStoreList li:first-child {
    border-top: 0px;
}

ul.appStoreList li a {
    display: block;
    margin: -8px 0px -8px -10px;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    color: black;
    background: url('images/appStoreListArrow.png') no-repeat right center;
}

ul.appStoreList li p {
    font-size: 14px;
    font-weight: normal;
    padding-right: 10px;
    line-height: 17px;
}

ul.roundList {
    padding: 0;
    margin-bottom: 10px;
    width: 300px;
    border: solid 1px #A9ABAE;
    -webkit-border-radius: 8px;
    background-color: white;
    font-size: 17px;
    font-weight: bold;
}

body.landscape ul.roundList {
    width: 460px;
}

ul.roundList li {
/*    position: relative;*/
/*    width: auto;*/
    list-style-type: none;
    min-height: 43px;
    border-bottom: 1px solid #E0E0E0;
    padding-left: 10px;
    line-height: 43px;
    overflow: hidden;
}

ul.roundList li a {
    display: block;
    margin: 0 0 0 -10px;
    padding: 0px 25px 0px 10px;
    text-decoration: none;
    overflow: hidden;
    color: black;
    line-height: 43px;
    background: url('images/listArrow.png') no-repeat right center;
}


ul.roundList li h2 {
    font-size: 20px;
    margin: 8px 0 0 0;
/*    padding-top: 8px;*/
    font-weight: bold;
    color: black;
    line-height: 26px;
}

ul.roundList li p {
    font-size: 14px;
    font-weight: normal;
    margin-right: 10px;
    margin-bottom: 8px;
    color: black;
    background-color: transparent;
    line-height: 17px;
}

ul.roundList li:last-child {
    border-bottom: none !important;
}

/* color small text | large text */
.info li {
    padding: 0px 10px;
}

.info dt {
    float: left;
    width: 70px;
    padding: 0px 5px 0px 10px;
    text-align: right;
    font-size: 13px;
    color: #4C566C;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.info dd {
    padding: 0px 5px 0px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.iconList li {
    padding: 4px 10px 4px 10px;
}

.iconList li a {
    padding: 0px 32px 0px 10px;
    text-decoration: none;
    overflow: hidden;
    color: black;
    background: url('images/listArrow.png') no-repeat right center;
}

.iconList dt img {
    float: left;
    display: block;
}

.iconList dd {
    padding: 6px 10px 5px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.iconList p {
    margin-top: 6px;
}

.secondary
{
    font-weight: normal;
    font-size: 16px;
    float: right;
    margin-right: 10px;

    color: #324F85;
 /*   line-height: 26px;    Vertically center text on the row */
}

a:active .secondary
{
    color: #FFFFFF !important;
}

a[selected] .secondary
{
    color: #FFFFFF !important;
}

.disableText {
	color: #999999 !important;
}

.redText {
    color: #FF0000 !important;
}

.greenText {
    color: #006600 !important;
}

.blueText {
    color: #0000FF !important;
}

.orangeText {
    color: #FF3300 !important;
}

/****/

body .panel {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #c8c8c8 url('images/pinstripes.png');
    background-repeat: repeat;
    width: 320px;
    padding: 10px;

    min-height: 416px;
}

body.landscape .panel {
  width: 480px;
}

.panel h2 {
    margin: 0px 0 8px 14px;
    font: bold 18px Helvetica;
    font-weight: bold;
    color: #4d4d70;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    line-height: 24px;
}

.panel p {
    font-size: inherit;
    font-weight: normal;
    color: #4d4d70;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
}

/****/

.roundBox {
    background: #fff;
    border: 1px solid #B4B4B4;
    -webkit-border-radius: 8px;
    width: auto;
    margin-bottom: 10px;
    padding: 10px;
}

.roundBox h2 {
    margin: 0 0 8px 0;
    font: bold 17px Helvetica;
    color: #222;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
}

.roundBox p {
    color: #222;
    text-align: left;
    font-size: 16px;
    line-height: 150%;
    font-weight: normal;
    margin: 0;
}

.roundBox img {
    max-width: 276px !important;
    height: auto !important;
    margin-right: auto;
    margin-left: auto;
}

.roundBox p + p {
    margin-top: 10px;
}

#preloader {
    display: none;
    background-image: url(images/item_background_touched.png), url(images/back_button_touched.png), 
        url(images/listArrowSel.png), url(images/listGroup.png);
}