/* common */
.ui-btn-up-c {
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.8);
}
li.ui-disabled {
    background: #F6EBC6;
    opacity: 1;
}
div.ui-input-text {
    background: #fff;
}
.ui-bar-b {
    background: -moz-linear-gradient(top, rgba(236,177,0,0.7) 0%, rgba(171,128,0,0.7) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,177,0,0.7)), color-stop(100%,rgba(171,128,0,0.7))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(236,177,0,0.7) 0%,rgba(171,128,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(236,177,0,0.7) 0%,rgba(171,128,0,0.7) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(236,177,0,0.7) 0%,rgba(171,128,0,0.7) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(236,177,0,0.7) 0%,rgba(171,128,0,0.7) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ecb100', endColorstr='#b3ab8000',GradientType=0 ); /* IE6-9 */
}

.ui-body-c {
    background: url('wood.png') repeat 0% 0%;
    text-shadow: none;
}
.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset { margin-top: .5em; }

input {
    color: #333 !important;
}

h1, h2, h3 {
    margin-bottom: .1em;
}

h3>span {
    font-size: .8em;
}
table {
    width: 100%;
}
td:last-child {text-align: right; }
p { margin: 0; }

.c {text-align: center !important;}
.r {text-align: right;}
#content { position:relative; }
.info-window { color: #333; }

.refresh .ui-btn-inner { 
    height:18px !important; 
    padding: .6em 10px !important;
}

/* alerts */
.alert {
    display: block;
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.alert-success {
  color: #6BB247;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-success h4 {
  color: #468847;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-danger h4,
.alert-error h4 {
  color: #b94a48;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-info h4 {
  color: #3a87ad;
}

/* icons */
.ui-icon-fishing-reel { background-image: url("images/fishing-reel.png"); }

#game-name { text-align: right; margin-top: 1em; box-shadow: none !important; }
#game-name li { display: inline; }

.responsive-a .ui-block-a { padding-right: .4em; }
.responsive-a .ui-block-b { padding-left: .4em; }

/* stack all grids below 40em (640px) */
@media all and (max-width: 40em) {
	.responsive-a .ui-block-a,
	.responsive-a .ui-block-b {
		width: 100%;
		float: none;
	}
    .responsive-a .ui-block-a { padding-right: 0; }
    .responsive-a .ui-block-b { padding-left: 0; }
}

.routine {
    background-color: #FAF5E6;
    background-color: rgba(250, 245, 230, 0.7);
}

#left-panel {
    background: #FDF1D3;
}

#game-header {
    background: #333 url(header.png) repeat;
}
#game-header #attributes {
    margin: 0 15px 0 40px;
}
@media (min-width:60em) {
	/* Header */
    #game-header #attributes {
        margin: 0 15% 0 20%;
    }
	#game-header #nav {
		left: 15%;
	}
	/* Content */
	.game-content {
		padding-right: 15%;
		padding-left: 15%;
	}
}
.game-content { padding-top: 5px; }

.water {
    min-height: 200px;
    background:transparent url(oct-s.png) center 4em no-repeat fixed !important;
    background-size:contain !important;
}
.water h2:first-child { margin-top: 2em; }
.attributes {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8em;
}
.attributes .ui-block-a { width: 100%; } 
.attributes .ui-block-b { width: 36%; } 
.attributes .ui-block-c { width: 34%; }
.attributes .ui-block-d { width: 30%; }

.attributes a, .attributes a:visited { color:#aa9999 !important; }
.attributes a:hover, .attributes a:active { color:#d5baa4 !important; }

.attributes h1 {
    margin: 0;
    line-height: 36px;
    font-size: 16px;
}

@media all and (min-width: 30em) {
    .attributes .ui-block-a { width: 30%; }
    .attributes .ui-block-b { width: 25%; }
    .attributes .ui-block-c { width: 25%; }
    .attributes .ui-block-d { width: 20%; }
    .pb_wrap { margin-right: 10px !important; }

    .water { 
        min-height: 500px;
        background:transparent url(oct-b.png) center 0% no-repeat fixed !important; 
        background-size:contain !important;
    }
}

.attributes .block {
    height: 37px;
    position: relative;
}
.block p {
    display: inline-block;
    height: 37px;
    line-height: 37px;
    margin-left:30px;
}
.block span.hint, .block span.hint-indent {
    position: absolute;
    bottom: 0;
    left: 0px;
    display:block; 
    font-size: .85em;
    color: #a99;
}
.block span.hint-indent {
    left: 35px;
}

/* progress bar */
.pb_wrap {
    position: relative;
    margin-top: 4px;
    margin-right: 0px;
}
.pb_txt {
    position: relative;
    top: 2px;
    left: .5em;
    color: #fff;
}
.progressbar {
      background-color: black;
      border-radius: 4px; /* (height of inner div) / 2 + padding */
      padding: 1px;
      margin-top: -1em;
}
    
.progressbar div {
       background-color: orange;
       width: 30%; /* Adjust with JavaScript */
       height: 1em;
       border-radius: 2px;
}

.prog-bar .ui-slider-track { 
    margin: 0 0 1em 0;
    height: 1.2em;
    cursor:default;
}
.prog-bar p.desc { 
    position: absolute;
    top:1px;
    left:.5em;
    font-weight:normal;
    font-size: .9em;
}

/* sprites */
.spr { background: url(sprite.png) no-repeat top left; }
.block-dollar{ background-position: 0 -146px;  } 
.block-energy{ background-position: 0 -234px;  } 
.block-gold{ background-position: 0 -322px;  } 
.help{ background-position: 0 -410px;  }
a#map{ background-position: 0 -487px;  } 
a#map:hover { background-position: 0 -622px; }
.mission{ background-position: 0 -807px;  } 
.reel{ background-position: 0 -889px; width:208px; height:113px; position:absolute; right:0; } 
.star-b{ background-position: 0 -1052px; display:inline-block; width:24px; height:24px; } 
.star-d{ background-position: 0 -1126px; display:inline-block; width:24px; height:24px; } 
.star-e{ background-position: 0 -1200px; display:inline-block; width:24px; height:24px; } 
.star-g{ background-position: 0 -1274px; display:inline-block; width:24px; height:24px; } 
.star-s{ background-position: 0 -1348px; display:inline-block; width:24px; height:24px; } 
.tutorial{ background-position: 0 -1422px;  } 
 
/* nav */
.nav {
    /*clear:both;*/
    xmargin-bottom: 1em;
    xbackground-color:red;
    zoom: 1; /* ie6&7 */

}
.nav:before,
.nav:after {
    content: "";
    display: table;
}
.nav:after { clear: both; }

.nav .right { float: right; }
.nav h1 { 
    margin:0;
    font-size: 1.5em;
    line-height: 1.5em;
}
.nav h1 a,
.nav h1 a:hover,
.nav h1 a:visited,
.nav h1 a:active {
   color: #fff !important; 
}
.nav h3 { 
    font-size: 1em;
    line-height: 1em;
    margin-top: .7em;
    xbackground-color: green;
}

a#map {
    text-indent: -99999px;
    line-height: 140px;
    margin-right: -40px;
    margin-top: 8px;
    width: 207px;
    height: 135px;
    text-align: center;
    position: absolute;
    right: 0;
}

.subhead h2 {
    font-size: 1em;
    margin: 0 1em;
}

.gamelog .ui-btn-up-d {
    background-color: rgba(255, 255, 255, 0.7) !important;
    background-image: none;
}

/* missions */
.mission {
    font-size: inherit;
    font-weight: inherit;
    padding-left: 40px;
    line-height: 32px;
}

.missions .ui-block-a,
.missions .ui-block-b,
.missions .ui-block-c,
.missions .ui-block-d {
    width: 50%;
    margin-bottom: 0.2em;
}

@media all and (min-width: 31em) {
    .missions .ui-block-a,
    .missions .ui-block-b,
    .missions .ui-block-c,
    .missions .ui-block-d {
        width: 25%;
        margin-bottom: 0.2em;
    }
}

.missions h2 { margin:0; }
.missions h3 { margin:0; font-size:.9em; }
.missions .grid {
    margin-top: .4em;
    font-size: .9em;
    font-weight: 100;
}
.missions p {margin:0}
.missions .btn-cell { margin-top:0 }
.tutorial p {
    color: #FFD480;
    margin: 1em 140px 0 32px;
    font-size: .9em;
    xdisplay:none;
}
.stars span { xmargin-right: -12px; }

.success { color:green; }
.error { color:red !important; }


/* profile */
.info { font-size: .8em; }
.info>div>span, .info span {
    float: right;
}
.info .strong td:last-child { font-weight: bold; }

.gear ul { margin-top: 0 !important; }
.gear li { 
    font-weight:normal !important;
    padding: .3em 15px !important;
}

#statuspoints { 
    clear: both; 
}
#statuspoints form { float: right; }
#statuspoints .sp {
    margin: .5em 0;
    color: blue;
    line-height: 1.8em;
}
#statuspoints .sp span { font-weight: bold; }

.badges-last {
    margin: -1em .5em 0 .5em;
    padding: 1em;
    background-color: rgba(255,255,255,0.8);
}
.badges {
    color: #333;
}
.badges p span.badge { 
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: transparent url(sprite.png) 0 0 no-repeat; 
}
.badges p span.badge-1 { background-position: 0px 0px; }
.badges p span.badge-2 { background-position: 0px -16px; }
.badges p span.badge-3 { background-position: 0px -32px; }
.badges p span.badge-1x { background-position: 0px -48px; }
.badges p span.badge-2x { background-position: 0px -64px; }
.badges p span.badge-3x { background-position: 0px -80px; }
.coll-badges .ui-collapsible-content {
    border-left: 1px solid #6B5854;
    border-right: 1px solid #6B5854;
    background-color: rgba(255, 255, 255, 0.8);
}

/* shop */
.shop-view {
    min-height: 344px;
    background: transparent url(aronba.png) no-repeat bottom right;
}
.shop-view > ul,
.shop-view > div { width:70%; }

@media all and (max-width: 40em) {
    .shop-view > ul,
    .shop-view > div { width:100%; }
}

#supply {
    font-size: .8em;
    text-align: right;
    float: right;
}
.ui-listview h2 { margin:0; }
.ui-listview h2 span { 
    float: right;
    margin-right: 2em; 
}
.ui-listview h3 { 
    margin:0; 
    font-size:.9em;
    white-space: normal;
}
.ui-listview p {margin:0}

.controls-in-right li {
    clear: both;
    overflow: auto;
}
.controls-in-right form, 
.controls-in-right p.form {
    float: right;
}

.center-wrapper{ text-align: center; }
.center-wrapper * { margin: 0 auto; }

.ui-li-desc {
    overflow: visible;
    white-space: normal;
}

/* duel */
li form { margin:0; }
.duel .ui-block-a { width: 65%; }
.duel .ui-block-b { width: 35%; text-align:right;}
.duel h3 { margin-top:0; }
.duel h3>span { 
    color: #aaa;
    font-weight: normal;
}

.duel-grid { 
    background: url(vs.png) no-repeat center .5em;
}
.duel-grid h5 {
    margin: 0;
}
.duel-grid .ui-block-a { padding-right: .3em; }
.duel-grid .ui-block-a li { text-align: right; }
.duel-grid .ui-block-b { padding-left: .3em; }

.muted { color:#999; }
p.help {
    color: #fff;
    text-shadow: none !important;
    font-size: .8em;
    margin-top: .5em;
    text-align: justify;
    padding-left: 36px;
    min-height: 28px;
}

@media (min-width:40em) {
.duel-grid { 
    width: 60%;
    margin: 0 auto;
}
}

/* forum */
.forum-check { text-align:right; }
.forum-check .ui-checkbox .ui-btn-inner { padding-left:45px !important; }
.forum-check .ui-checkbox .ui-icon { display:inline !important; }

.forum-list { margin:0 !important; }
.forum-list .private { 
    background: rgba(245, 235, 235, 0.8) url(locked.png) no-repeat right bottom;
}

/* board */
.grid-board .ui-block-a { padding-right:0em; }
.grid-board>div { width: 100%; }

@media (min-width: 35em) {
    .grid-board .ui-block-a { padding-right:1em; }
}

ul.board .ui-li-static { padding: 0 15px !important; }
ul.board .ui-li-aside { width: 10em; }
#store { margin-top: -1em; }

/* story */
.story p { margin-bottom: 1em; }

/* errorSummary */
.errorSummary {
    display: block;
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.errorSummary ul { padding:0; margin:0; }
.errorSummary li { list-style-type: none; }

/* left panel */
.nav-alert {
    background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bup-background-start}*/), to( #dd3333 /*{a-bup-background-end}*/));
    background-image: -webkit-linear-gradient( #333 /*{a-bup-background-start}*/, #dd3333 /*{a-bup-background-end}*/);
    background-image: -moz-linear-gradient( #333333 /*{a-bup-background-start}*/, #dd3333 /*{a-bup-background-end}*/);
    background-image: -ms-linear-gradient( #333333 /*{a-bup-background-start}*/, #dd3333 /*{a-bup-background-end}*/);
    background-image: -o-linear-gradient( #333333 /*{a-bup-background-start}*/, #dd3333 /*{a-bup-background-end}*/);
    background-image: linear-gradient( #333 /*{a-bup-background-start}*/, #d33 /*{a-bup-background-end}*/);
}

.menu-club-challenge { color:#d33; }



#left-panel.ui-panel {
    width: 15em;
}
#left-panel.ui-panel-closed {
    width: 0;
}
.ui-panel-position-left.ui-panel-display-reveal {
    left: 0;
}
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
    left: 15em;
    right: -15em;
}
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(15em,0,0);
    -moz-transform: translate3d(15em,0,0);
    transform: translate3d(15em,0,0);
}

#left-panel .ui-panel-inner > .ui-listview { margin-bottom: 0; }
#left-panel .ui-collapsible-set { margin: 0; }
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-content { padding-top: 0; padding-bottom: 0;  border-bottom: none; }
#left-panel .ui-panel-inner  > .ui-collapsible > .ui-collapsible-heading .ui-btn,
#left-panel .ui-collapsible.ui-first-child .ui-collapsible-heading .ui-btn { border-top: none; }
#left-panel .ui-collapsible-heading .ui-btn-inner { padding: .7em 40px .7em 15px; }
#left-panel .ui-collapsible-set .ui-collapsible-heading .ui-btn-inner { padding: .5em 40px .5em 15px; font-size: 14px; }
#left-panel .ui-collapsible { margin-bottom:14px; }
#left-panel .ui-collapsible-content>.ui-listview {margin: 0px -15px;}
#left-panel .ui-collapsible-content>.ui-listview a { padding: .4em 25px;}

/* Reveal menu shadow on top of the list items */
.ui-panel-display-reveal {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.ui-panel-content-wrap-position-left {
    -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}

/* ydtb toolbar fix */
#ydtb-toolbar { overflow:initial; }

.credits-grid .ui-block-a { text-align: right; }
.credits-grid .ui-block-b { padding: 108px 0 0 15px; }