*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Assume sensible box model throughout */
.ui-accordion .ui-accordion-content{ box-sizing:content-box; -moz-box-sizing:content-box; padding:0.5em 1.1em; font-size:14px; } /*So it doesn't break with above and to make more suitable for mobiles*/

/* These values assume a black background page */
body { background:black url("/resources/img/bg_tile2.jpg"); color:white; margin:0; font-size:14px; font-family: "Verdana", "Geneva", sans-serif; }
button { margin:1px; }
.ui-widget{ font-size: 12px; }
.ui-widget-content { background: #000; }
*.invertedText { color:black; background-color:white; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #2d3825; }
.ui-state-active { border: 1px solid #3d5835; }

h1 { margin-bottom: 4px; color: #b8ec79; }
h2 { margin-bottom: 4px; color: #b8ec79; text-decoration:overline underline; }
h3 { margin-bottom: 4px; color: #b8ec79; }
.themedColor { color: #b8ec79; }
.themedBorder { border: 1px solid #b8ec79; }
.themedBackgroundColor { background-color: #3d5835; }

/*Default table*/
table { border-collapse:collapse; }
thead tr { border-bottom:2px solid #3d5835; vertical-align: bottom; }
tfoot tr { border-top:2px solid #3d5835; vertical-align: top; }
tbody td { vertical-align: middle; }
thead th, tfoot th { font-weight:bold; }
tbody td, thead th, tfoot th { padding: 2px 4px; }
 tr.evenRow { background: #223322; }
tr.oddRow { background: #000000; }

*.fsOnly { display:inherit; }
*.rpOnly { display:none; }
*.smallnote, *.note { font-size: 90%; font-style: italic; }
*.quote { font-size:95%; font-style: italic; }
div.fullHeightVerticalScroll { overflow-y: auto; overflow-x:hidden; height: 100%; }
*.inputBase { display: inline; border: 1px solid; border-radius: 2px; padding: 1px; font-family:inherit; font-size:inherit; } /* Deprecated */
input.inputTextOneLine{ display:block; }
input:disabled { border:none; background:none; color:#cdf; }
textArea { width:100%; resize: vertical; }
label.verticalButtonSet { display:block; margin-right:0 !important; } /*For ensuring buttons use full width and removing the jquery margin-right bump */
*.groupContainer { border: 1px solid #333; border-radius: 4px; padding: 1px 2px; } /*For holding/highlighting readouts that aren't UI related.*/
*.indexBookmark { cursor: pointer; display:block; }

/* New layout entries that readjust for smaller screen - Usage example: <div><label class="caption"></label><input class="value"></input></div> */
*.caption { width:30%; display:inline-block; vertical-align:top; text-align:right; padding-right:4px; }
*.value { width:70%; display:inline-block; }

@media all and (max-width: 50em) and (min-width: 0) {
    *.caption { width:100%; display:inline-block; text-align:left; padding-right:0; }
    *.value { width:100%; display:inline-block; }
}

/*Automatically inserted by ParseUI. Looks for things in the form <div class="collapsibleSection"><span>title</span><div>..Content..</div></div> */
span.parsedCollapsibleSectionHeader { cursor: pointer; display: block; background-color: #223322; padding: 4px 2px 6px; color: #b8ec79; font-weight: bold; border:1px solid #b8ec79; border-radius: 6px; margin-bottom:3px;}
span.openCollapsibleSection { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; margin-bottom:0 }
div.parsedInnerCollapsibleSection { position:relative; min-height:100px; border: 1px solid #b8ec79; border-top:0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; margin-bottom:3px; padding:2px; }
div.parsedOuterCollapsibleSection { clear:both; }
span.collapsibleSectionToggleText { float:right; color:white; margin:2px; pointer-events:none; padding-top: 2px; padding-right:4px; }

/*For displaying monospace stuff from the muck. */
*.muckText, *.muckTextContainer { font-family:"Consolas", "Courier New", "Courier", "Lucida Console", "Monaco", monospace; color: #DDD }
*.muckTextContainer { color:white; background:black; padding:2px; }
*.muckText a, *.muckTextContainer a { text-decoration:underline; color: inherit}

/*For displaying readouts in caption:value forms. */
*.itemCaption, *.itemCaptionFullWidth, *.itemCaptionContainer { display:table-cell; background:#223322; color: #ffffff; text-align:right; vertical-align:top; }
*.itemValue, *.itemValueFullWidth, *.itemValueContainer { display:table-cell; background:#000000; color: #ffff00; border-left:1px solid #006400; text-align:left; vertical-align:top; }
*.itemCaptionContainer { border:1px solid #b8ec79; border-radius: 6px; padding: 0 0 0 2px; }
*.itemCaption { padding-right:1px; }
*.itemValueContainer { border: 0; padding:0 2px; }
*.itemValue { padding-left:1px; }
*.itemValueTop, *.itemValueContainer { border-top-right-radius: 6px; }
*.itemValueBottom, *.itemValueContainer { border-bottom-right-radius: 6px; }
*.itemCaptionFullWidth { display:block; border-bottom: 0; text-align: center;}
*.itemValueFullWidth, *.itemValueProgressBarFullWidth { display:block; border-left: 0; border-top: 1px solid #006400; }
*.itemValueFullWidth { text-align: center; }
*.itemValueProgressBar, *.itemValueProgressBarFullWidth { position: relative; text-align: left; border: 1px solid #326400; border-radius:2px; background: #102000; }
*.itemValueProgressBarFullWidth { position: relative; text-align: left; border-left: 0; border-right:0; border-bottom: 1px solid #003200; background: #102000 }
*.itemValueProgressBarLeftText, *.itemValueProgressBarRightText { position: absolute; padding-top:1px; color: #ffff00; }
*.itemValueProgressBarLeftText { left:6px; }
*.itemValueProgressBarRightText { right:6px; }
*.itemValueProgressBarInner { display:inline-block; height:20px; margin-bottom:-3px; background:#004800; background: linear-gradient(#204000, #326400);}

/*For producing buttons with an icon and optional smaller subtext*/
*.muckButton { position: relative; min-height: 48px; min-width:48px; padding: 0; }
*.muckButtonGoogle { background: #dd4b39; color: #FFFFFF; }
*.muckButtonFacebook { background: #3b5998; color: #FFFFFF; }
*.muckButton span.muckButtonIcon     { position:absolute; top:0; bottom: 0; left: 0; width: 48px; background-repeat: no-repeat; border-right: #2d3825 1px solid;  }
*.muckButton span.muckButtonIconOnly { position:absolute; top:0; bottom: 0; left: 0; width: 48px; background-repeat: no-repeat; }
*.muckButton span.muckButtonIconAccountCurrency { background: url('/resources/img/dripdrip.png') #111 2px 50% no-repeat; width:46px; }
*.muckButton span.muckButtonIconQuestion { background: url('/resources/img/icon_questionmark.png') #111 2px 50% no-repeat; }
*.muckButton span.muckButtonIconGoogle { background: url('/resources/img/icon_google.png') #dd4b39 2px 50% no-repeat; border-right: #bb3f30 1px solid; }
*.muckButton span.muckButtonIconFacebook { background: url('/resources/img/icon_facebook.png') #3b5998 2px 50% no-repeat; border-right: #1b3978 1px solid; }
*.muckButton span.muckButtonIconPuzzler { background: url('/resources/img/fox_icon.png') #111 2px 50% no-repeat; }
*.muckButton span.muckButtonIconExplore { background: url('/resources/img/explore.png') #111 2px 50% no-repeat; }
*.muckButton span.muckButtonIconGift { background: url('/resources/img/gift.png') #111 2px 50% no-repeat; }
*.muckButton span.muckButtonIconMissionSettings { background: url('/resources/img/travel2.png') #111 2px 50% no-repeat; }
*.muckButton span.muckButtonText { display:block; padding-left:56px; padding-right:28px; padding-bottom:0.8em; text-align:center; vertical-align: middle; }
*.muckButton span.muckButtonNote { position:absolute; bottom:1px; right:8px; font-size:smaller; }
*.iconAccountCurrency { background: url('/resources/img/dripdrip.png') #111 2px 50% no-repeat; width:46px; height:64px; display: inline-block;}

*.webUiRightBarCaption { width: 110px; }
*.webUiRightBarValue { width: 80px; }
*.webUiRightBarButton { width: 200px; }
/*playerInfoAsThumbnail - Minimized version that doesn't actually show title*/
div.playerInfoAsThumbnail {  width:212px; height:40px; border: 1px solid navy; background-color: lightsteelblue; border-radius: 8px; display: inline-block; padding: 1px 2px; color:lightyellow; }
div.playerInfoAsThumbnail div.innerArea{ width:100%; height:100%; border:1px solid white; background-color: #113; border-radius: 6px; display:inline-block; overflow: hidden; position: relative; z-index: 0; }
div.playerInfoAsThumbnail *.playerName { position:absolute; top:1px; left:1px; font-size: x-large; color:white; text-shadow: 2px 2px 2px black; font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif; }
div.playerInfoAsThumbnail *.playerTitle { display: none;}
div.playerInfoAsThumbnail *.playerAvatar { position:absolute; background: #002; top:0; bottom:0; height:100%; left: 85px; min-width:96px; z-index: -1;}
div.playerInfoAsThumbnail img { margin-top:-15px; width: 96px; height: auto;}
div.playerInfoAsThumbnail *.playerLevel { position:absolute; right:0; padding-right:2px; padding-top:8px; padding-left:2px; background: #400; border:1px solid #800; top:0; height:100%; font-weight:bold;}
/*playerInfoAsTag - Middle ground, mostly horizontal but enough vertical to see avatar */
div.playerInfoAsTag {  width:286px; height:100px; border: 1px solid navy; background-color: lightsteelblue; border-radius: 8px; display: inline-block; padding: 1px 2px; color:lightyellow; }
div.playerInfoAsTag div.innerArea{ width:100%; height:100%; border:1px solid white; background-color: #113; border-radius: 6px; display:inline-block; overflow: hidden; position: relative; z-index: 0; }
div.playerInfoAsTag *.playerName { position:absolute; top:1px; left:1px; font-size: x-large; color:white; text-shadow: 2px 2px 2px black; font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif; }
div.playerInfoAsTag *.playerTitle { position:absolute; bottom:2px; left:4px; font-style:italic; text-shadow: 1px 1px 0 black; text-align:left; font-family: 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;}
div.playerInfoAsTag *.playerAvatar { position:absolute; background: #002; top:0; bottom:0; height:100%; left: 100px; min-width:192px; z-index: -1;}
div.playerInfoAsTag img { width: 192px; height: auto; margin-top:-24px}
div.playerInfoAsTag *.playerLevel { position:absolute; top: 34px; left:34px; background: #404; border:1px #808 solid; border-radius:50%; padding:6px; font-weight:bold;}
/*playerInfoAsCard - fully vertical card style */
div.playerInfoAsCard {  width:192px; height:269px; border: 1px solid navy; background-color: lightsteelblue; border-radius: 8px; display: inline-block; padding: 1px 2px; color:lightyellow; }
div.playerInfoAsCard div.innerArea{ width:100%; height:100%; border:1px solid white; background-color: #113; border-radius: 6px; display:inline-block; overflow: hidden; position: relative; z-index: 0; }
div.playerInfoAsCard *.playerName { position:absolute; top:1px; left:1px; font-size: x-large; color:white; text-shadow: 2px 2px 2px black; font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif; }
div.playerInfoAsCard *.playerTitle { position:absolute; bottom:2px; left:4px; right:2em; z-index:1; text-shadow: 1px 1px 0 black; text-align:center; font-style:italic; font-family: 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;}
div.playerInfoAsCard *.playerAvatar { position:absolute; background: #002; top:0; bottom:0; left:0; right:0; min-width:256px; z-index: -1;}
div.playerInfoAsCard img { width: 256px; height: auto; margin-left: -44px; margin-top: -6px;}
div.playerInfoAsCard *.playerLevel { position:absolute; background: #404; border:1px #808 solid; border-radius:50%; right:-.5em; bottom: -.5em; padding:1.2em; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); font-weight:bold;}
/*Staff overwrites*/
div.playerInfoDivStaff { background: #EECC00; }
div.playerInfoDivStaff div.innerArea { border:1px solid #ffFF00; }

div.indexPageMargins { min-width:760px; max-width:1280px; margin: 0 auto; position: relative; }
div.indexPageFullWidth { width:100%; position: relative; }

#skipNavigation { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;}
#indexPageContent { background: black; left: 212px; right: 212px; top:0; margin-left: 2px; margin-right: 2px; padding: 4px; position: absolute; border: 2px solid #B8ABA0; border-radius: 6px; }
#indexPageTopBar { padding: 0; margin: 0; position: absolute; height:8em; top: 0; left:0; right: 0; background:#000; border-style: none; border-bottom:1px solid silver; z-index: 1; }
#indexPageReservedSpace { margin: 0; border-style: none; height:8em; z-index: -1; } /*Occupies the space the header takes at the top of the screen*/
#indexPageLeftBar { width: 212px; min-height:400px; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; position: absolute; padding:2px; z-index:99; transition: left 0.2s ease-out; -moz-transition: left 0.2s ease-out; -webkit-transition: left 0.2s ease-out; }
#indexPageRightBar { width: 212px; min-height:400px; top: 0; right: 0; overflow-y: hidden; overflow-x: hidden; position: absolute; z-index:99; }
#indexPageRightBarInner { width:212px; padding:2px; transition: margin-left 0.2s ease-out; -moz-transition: margin-left 0.2s ease-out; -webkit-transition: margin-left 0.2s ease-out;  } /*Because we can't hide things off of the right hand side of the screen without help */
#indexPageToggleLeftBar { width:48px; height:48px; position:absolute; left:0; display:none; background: grey url('/resources/img/icon_large_burgerbutton.png') no-repeat; background-size: 100% 100%; }
#indexPageToggleRightBar { width:48px; height:48px; position:absolute; right:0; display:none; background: grey url('/resources/img/icon_large_configure.png') no-repeat; background-size: 100% 100%; }
#indexPageLogoFull { position:absolute; top:0; left:0; width: 512px; height:8em; padding:0; display:block; background-repeat: no-repeat; }
#indexPageLogoSmall { position:absolute; top:0; left:0; width: 200px; height:4em; padding:0; display:none; background-repeat: no-repeat; }
#indexPageLogoNone { position:absolute; top:0; left:0; width: 200px; height:2em; padding:2px; text-align:center; font-weight:bold; display:none; }
.indexPageLocationListLocation { text-align:left; font-weight: bold; cursor: pointer; }
.indexPageLocationListLevelRange { text-align:center; }
.indexPageLocationListMissions { text-align:center; }
.indexPageLocationListPopulation { text-align:center; }
.indexPageLocationListBonus { text-align:center; }
.indexPageLocationListMonsters { text-align:left; display:none; }

#indexPageNoticesList { overflow-y: scroll; min-width: 200px; display:table;}
*.indexPageNoticesEntry { display: table-row; }
*.indexPageNoticesDelete, *.indexPageNoticesWhen, *.indexPageNoticesNotice { display: table-cell; padding: 1px 2px; border-bottom: 1px solid #333; }

/* Height 1 : Reduce at small heights and use a small logo */
@media all and (max-height: 48em) and (min-height: 0) {
    #indexPageLogoFull { display: none; }
    #indexPageLogoSmall { display: block; }
    #indexPageLogoNone { display: none; }
    #indexPageTopBar { height:4em; }
    #indexPageReservedSpace { height:4em; }
}

/* Height 2 : Remove logo entirely at even smaller heights */
@media all and (max-height: 32em) and (min-height: 0) {
    #indexPageLogoFull { display: none; }
    #indexPageLogoSmall { display: none; }
    #indexPageLogoNone { display: block; }
    #indexPageTopBar { height:3em; }
    #indexPageReservedSpace { height:3em; }
}

/* Width 1 : Move menu bar into a pop-out, ensure we're taking full width and ensure room for left button. */
@media all and (max-width: 75em) and (min-width: 0) {
    #indexPageContent { left: 0; border-left:0; padding-left:2px; }
    #indexPageLeftBar { left: -212px; background:black; border:2px solid #B8ABA0; }
    div.indexPageMargins { max-width: inherit; min-width: inherit; }
    #indexPageLogoFull, #indexPageLogoSmall, #indexPageLogoNone { left:48px; }
    #indexPageToggleLeftBar { display:inline-block; }
    #indexPageLeftBar.leftBarOpen { left:0; }
    .indexPageContentsItem { font-weight:bold; padding-bottom:4px; }
}

/* Width 2 : Move stat bar into a pop-out too */
@media all and (max-width: 50em) and (min-width: 0) {
    #indexPageContent { right: 0; border:0; padding:2px;}
    #indexPageRightBarInner { margin-left : 212px;  background:black; border:2px solid #B8ABA0; }
    #indexPageToggleRightBar { display:inline-block; }
    #indexPageRightBarInner.rightBarOpen { margin-left : 0; }
}