html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    outline: 0 none;
    border: 0 none;
    background: none repeat scroll 0 0 transparent;
    vertical-align: baseline;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-size: 100%;
    zoom: 100%
}

@viewport,
@-webkit-viewport,
@-moz-viewport,
@-ms-viewport {
    width: extend-to-zoom 1024px;
    min-zoom: .25;
    max-zoom: 5
}

body {
    margin: 0 auto;
    background: #000
}

.open {
    height: auto
}

#skiplinks {
    position: absolute;
    top: auto;
    left: -9999em;
    overflow: hidden;
    width: 1px;
    height: 1px
}

p,
ul,
dl,
label,
textarea,
input {
    margin: 0;
    padding: 0;
    line-height: 150%
}

input[type='radio'] {
    margin: 3px 3px 0 5px
}

ul li {
    margin: 0;
    padding: 0
}

body.global-nav-header #page {
    width: 100%!important
}

ul.nav li a {
    color: #FFF;
    text-decoration: none;
    cursor: pointer
}

ul.nav li a:hover {
    color: #FFF;
    text-decoration: underline;
    cursor: pointer
}

body {
    font-family: Georgia, Arial, 'Times New Roman'
}

textarea,
input,
h2,
h3,
h4,
h5,
h6,
#secondary,
#footer,
.cta,
.btn,
.status {
    font-family: Arial
}

h1 {
    color: #333;
    font-weight: bold;
    font-size: 28px
}

h2 {
    padding: 8px 2px;
    color: #333;
    font-size: 1.5em;
    font-weight: 600
}

h3 {
    margin-bottom: 10px;
    font-size: 1.4em
}

h4 {
    font-size: 1.4em
}

h5 {
    font-size: 1.4em
}

h6 {
    font-size: 1.4em
}

ul {
    list-style: none
}

blockquote p,
q {
    margin-bottom: 10px;
    font-size: 1.8em;
    line-height: 130%
}

#prologue blockquote p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 22px
}

blockquote {
    margin: 10px 0;
    color: #2E2929;
    font-size: 11px;
    font-family: Arial;
    line-height: 130%
}

cite {
    font-size: 1.3em
}

.nav a {
    text-decoration: none
}

a {
    outline: 0
}

.arrow-u,
.arrow-r,
.arrow-d,
.arrow-l {
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent url(../e.actions/arrows.png) no-repeat 0 0;
    text-indent: -999em
}

.arrow-u.disabled,
.arrow-r.disabled,
.arrow-d.disabled,
.arrow-l.disabled {
    background: transparent url(../e.actions/arrows_disabled.png) no-repeat 0 0
}

.arrow-u:hover,
.arrow-r:hover,
.arrow-d:hover,
.arrow-l:hover {
    border: 0;
    background-color: transparent;
    cursor: pointer
}

.arrow-r,
.arrow-r.disabled {
    background-position: -20px 0
}

.arrow-d,
.arrow-d.disabled {
    background-position: -40px 0
}

.arrow-l,
.arrow-l.disabled {
    background-position: -60px 0
}

.arrow-u.disabled:hover,
.arrow-r.disabled:hover,
.arrow-d.disabled:hover,
.arrow.disabled-l:hover {
    cursor: default
}

.cta,
.cta.inset {
    *dispay: inline;
    position: relative;
    display: inline-block;
    margin: 2px;
    padding: 2px;
    color: #fff;
    text-decoration: none;
    font-family: Arial;
    line-height: 130%;
    -ms-zoom: 1;
    zoom: 1
}

.cta.requesting {
    opacity: .8;
    filter: alpha(opacity=80)
}

.cta span.label,
.cta input {
    display: inline-block;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #2F3036;
    background-color: #3D658A;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    color: #fff;
    text-align: center\9;
    text-align: left;
    -webkit-text-shadow: #000 1px 1px 2px;
    text-shadow: #000 1px 1px 2px
}

.cta span.label a:link,
.cta span.label a:visited {
    color: #fff
}

.cta span.label span {
    display: block;
    font-weight: normal;
    font-style: italic
}

a.cta:hover,
a.cta:focus,
.cta input:hover,
.cta input:focus {
    text-decoration: underline
}

.cta,
.cta input {
    font-size: 11px
}

a.cta,
a.cta span.label,
.cta input {
    cursor: pointer
}

a.cta,
.cta span.label,
.cta input {
    color: #fff
}

span.cta.disabled {
    display: none;
    opacity: .4;
    filter: alpha(opacity=40)
}

.cta input {
    padding: 4px 8px;
    *padding: 3px 6px;
    *border: 1px solid #000;
    font-size: 11px
}

.cta.inset {
    padding: 0;
    padding: 2px\9;
    border: 1px solid #5B0A0A\9;
    border: 3px;
    border-right-color: #911\9;
    border-bottom-color: #911\9;
    -moz-border-image: url("e.actions/inset-rounded-standard.png") 3 3 3 3 stretch stretch;
    -o-border-image: url("e.actions/inset-rounded-standard.png") 3 3 3 3 stretch stretch;
    -webkit-border-image: url("e.actions/inset-rounded-standard.png") 3 3 3 3 stretch stretch;
    border-image: url("e.actions/inset-rounded-standard.png") 3 3 3 3 stretch stretch;
    background: transparent
}

.wizards-duel .cta.inset {
    border: none\9;
    border-top-color: transparent\9;
    border-right-color: transparent\9;
    border-bottom-color: transparent\9;
    border-left-color: transparent\9
}

.cta.next span.label,
.cta.next input {
    padding-right: 20px;
    background: #6D1816 url("../e.actions/arrow-next.png") no-repeat 100% 50%\9;
    background-image: url("../e.actions/highlight.png"), url("../e.actions/gradient.png"), url("../e.actions/arrow-next.png");
    background-position: 0 0, 0 100%, 100% 50%;
    background-repeat: no-repeat, repeat-x, no-repeat
}

.cta.prev span.label,
.cta.prev input {
    padding-left: 20px;
    background: #6D1816 url("../e.actions/arrow-prev.png") no-repeat 0 50%\9;
    background-image: url("../e.actions/highlight.png"), url("../e.actions/gradient.png"), url("../e.actions/arrow-prev.png");
    background-position: 0 0, 0 100%, 0 50%;
    background-repeat: no-repeat, repeat-x, no-repeat
}

.cta.favourite input {
    padding-left: 24px;
    background: #6D1816 url("../e.actions/favourite-off.png") no-repeat 3px 50%\9;
    background-image: url("../e.actions/highlight.png"), url("../e.actions/gradient.png"), url("../e.actions/favourite-off.png");
    background-position: 0 0, 0 100%, 4px 50%;
    background-repeat: no-repeat, repeat-x, no-repeat
}

.cta.favourite.remove input {
    background: #6D1816 url("../e.actions/favourite-on.png") no-repeat 3px 50%\9;
    background-image: url("../e.actions/highlight.png"), url("../e.actions/gradient.png"), url("../e.actions/favourite-on.png");
    background-position: 0 0, 0 100%, 4px 50%;
    background-repeat: no-repeat, repeat-x, no-repeat
}

.cta.icon {
    padding: 4px 4px 4px 20px;
    background-image: url("../e.actions/icon-inset-bl.png"), url("../e.actions/icon-inset-tl.png");
    background-position: 100% 100%, 0 0;
    background-repeat: no-repeat
}

.cta.icon span.label {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px
}

.cta.icon input {
    padding-top: 7px;
    padding-bottom: 6px;
    padding-left: 17px;
    text-align: left\9
}

.cta.icon .icon {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 39px;
    height: 39px;
    background: url("../e.actions/icons.png") no-repeat 0 50%
}

.cta.download .icon {
    background-position: -39px 50%
}

.cta.favourite .icon {
    background-position: -78px 50%
}

.cta.listen .icon {
    background-position: -117px 50%
}

.cta.trunk .icon {
    background-position: -156px 50%
}

.cta.illustration .icon {
    background-position: -195px 50%
}

.cta.spells,
.cta.practice,
.cta.train,
.cta.duel {
    background: 0
}

.cta.spells .icon {
    width: 35px;
    background-position: -299px 0
}

.cta.practice .icon,
.cta.train .icon {
    width: 35px;
    background-position: -333px 0
}

.cta.duel .icon {
    width: 35px;
    background-position: -367px 0
}

.cta.explore input {
    padding: 8px 16px 9px 16px
}

.cta.explore span,
.cta.explore input {
    padding: 10px 20px;
    font-weight: bold;
    font-size: 13px
}

.cta.type3 span.label,
.cta.type3 input {
    padding: 2px 10px
}

.cta.type4 span.label,
.cta.type4 input {
    padding: 4px 10px 4px 16px
}

.ctabutton {
    display: inline-block;
    padding: 3px 4px 4px 3px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    font-family: Arial;
    -ms-zoom: 1;
    zoom: 1
}

.ctabutton.input.med.favourite {
    padding: 3px 0 4px;
    margin-bottom: 5px
}

.ctabutton.helpContinue {
    float: right
}

.js #langSel .ctabutton.registration.header {
    display: none
}

.ctabutton.ctaicon {
    position: relative
}

.ctabutton a,
.ctabutton span.nolink,
.signedout-page-overlay .ctabutton a,
.signedout-page-overlay .ctabutton a:visited {
    position: relative;
    display: block;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #61cdff url("../../images/buttons/bkgHover.jpg") repeat-x 0 100%;
    color: #fff;
    font-weight: bold
}

.ctabutton span.nolink {
    border: 0;
    background: transparent
}

#secondary .panel .ctabutton a {
    color: #fff
}

.ctabutton .ctawrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: url("../../images/buttons/bkgButton.jpg") repeat-x 0 100% #4fa3d2
}

.ctabutton .ctaActive {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #263f5c
}

.ctabutton a:hover,
.ctabutton a:active,
.ctabutton a:focus {
    text-decoration: none
}

.ctabutton a:hover .ctawrap,
.ctabutton a:active .ctawrap,
.ctabutton a:focus .ctawrap,
.ctabutton.input:hover .ctawrap,
.ctabutton.input:focus .ctawrap,
.ctabutton.input:active .ctawrap {
    display: none
}

.ctabutton a:active .ctaActive,
.ctabutton.input:active .ctaActive {
    display: block
}

#moment .ctabutton.input:hover .ctawrap,
#moment .ctabutton.input:focus .ctawrap,
#moment .ctabutton.input:active .ctawrap {
    display: block;
    background: transparent
}

.ctabutton a .ctainner,
.ctabutton span.nolink .ctainner {
    position: relative;
    top: 0;
    z-index: 9;
    display: inline-block;
    -ms-zoom: 1;
    zoom: 1
}

.ctainner {
    z-index: 0
}

.ctabutton.input .ctainner {
    position: relative;
    display: block;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #61cdff url("../../images/buttons/bkgHover.jpg") repeat-x 0 100%
}

.insetarea {
    border: 1px solid #690E0F\9;
    border-style: inset\9;
    border-right-color: #B12A2B\9;
    border-bottom-color: #B12A2B\9;
    background-image: url("images/inset-tl.png"), url("images/inset-br.png");
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat
}

.ctabutton .ctainner input,
.ctabutton .ctainner button {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    color: #fff;
    -webkit-text-shadow: 2px 2px 2px #333;
    text-shadow: 2px 2px 2px #333;
    font-weight: bold;
    cursor: pointer
}

.ctabutton.ctaicon .ctainner input,
.ctabutton.ctaicon a,
.ctabutton.ctaicon span.nolink {
    margin-left: 12px;
    font-size: 10px
}

.ctabutton.ctaicon a {
    text-decoration: none!important
}

.ctabutton.ctaicon .ctainner input {
    margin-left: 0;
    padding-left: 5px;
    *margin-left: -2px;
    *padding-right: 14px
}

.ctabutton .ctahighlight {
    position: relative;
    display: inline-block;
    *display: inline;
    -webkit-text-shadow: 2px 2px 5px #000;
    text-shadow: 2px 2px 5px #000;
    font-style: normal;
    -ms-zoom: 1;
    zoom: 1
}

.ctabutton.ffacebookconnect .ctahighlight input {
    padding-right: 10px;
    padding-left: 40px;
    text-align: center
}

*:first-child+html .ctabutton.ffacebookconnect .ctahighlight input {
    padding-right: 0;
    padding-left: 10px
}

.ctabutton.facebookconnect .ctahighlight input {
    padding-left: 40px;
    *padding-left: 15px;
    font-size: 11px
}

.ctabutton.ctaicon .ctahighlight {
    padding-left: 14px
}

.ctabutton.ctaicon.input .ctahighlight {
    padding-left: 0
}

body.basic .ctabutton.ctaicon.input .ctahighlight {
    *padding-right: 5px;
    *padding-left: 0
}

.ctabutton .ctaicon {
    position: absolute;
    top: -3px;
    *top: -4px;
    left: -16px;
    z-index: 99;
    width: 31px;
    height: 31px;
    background-image: url("../images/buttons/icons.png");
    background-repeat: no-repeat
}

.ctabutton.input .ctaicon {
    top: 0;
    left: 0
}

.ctabutton.lrg input,
.ctabutton.lrg a .ctahighlight {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4em
}

.ctabutton.lrg input {
    *margin: -2px -14px
}

.ctabutton.ctaicon input,
.ctabutton.ctaicon a .ctahighlight,
.ctabutton.ctaicon .nolink .ctahighlight {
    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 3px;
    font-size: 11px;
    line-height: 1.4em
}

.ctabutton.ctaicon input {
    *margin: -2px -24px
}

.collectionarea .ctabutton.ctaicon input {
    *margin: -2px -10px -2px 0
}

.ctabutton.med input,
.ctabutton.med button,
.ctabutton.med a .ctahighlight {
    padding: 4px 14px;
    font-size: 11px;
    line-height: 1.4em
}

.ctabutton.med input,
.ctabutton.med button {
    display: inline-block;
    *display: inline;
    white-space: normal;
    *word-wrap: break-word;
    -ms-zoom: 1;
    zoom: 1
}

.ctabutton.sml input,
.ctabutton.sml a .ctahighlight {
    padding: 2px 5px;
    font-weight: normal;
    font-size: 11px;
    line-height: 1.4em
}

.ctabutton.sml input {
    display: inline;
    *margin: -2px -4px -1px
}

.ctabutton.tny input,
.ctabutton.tny a .ctahighlight {
    padding: 1px 3px;
    font-weight: normal;
    font-size: 10px;
    line-height: 1.4em
}

.ctabutton.tny input {
    overflow: visible
}

.ctabutton.tny a .ctahighlight {
    background-position: 1px 0
}

.ctabutton.ctaicon.duel .ctaicon {
    background-position: 0 0
}

.ctabutton.ctaicon.wand .ctaicon {
    background-position: -32px 0
}

.ctabutton.ctaicon.potion .ctaicon {
    background-position: -64px 0
}

.ctabutton.ctaicon.help {
    clear: none;
    margin: 0 10px 0 0
}

.ctabutton.ctaicon.help .ctaicon {
    background-position: -96px 0
}

.ctabutton.ctaicon.friend .ctaicon {
    background-position: -128px 0
}

.ctabutton.ctaicon.back .ctaicon {
    background-position: -160px 0
}

.ctabutton.friends .ctawrap {
    border-color: #43321E;
    background: #4E3C21 url("images/buttons/bg-friends.jpg") repeat-x
}

.ctabutton.friends a {
    border: 1px solid #1D170C;
    background: #1D170C url("images/buttons/bg-friends-hover.jpg") repeat-x 0 0
}

.ctabutton.cauldron .ctawrap {
    border-color: #202922;
    background: #202922 url("images/buttons/bg-cauldron.jpg") repeat-x
}

.ctabutton.cauldron a {
    border: 1px solid #141B16;
    background: #141B16 url("images/buttons/bg-cauldron-hover.jpg") repeat-x 0 0
}

.ctabutton.gift .ctawrap {
    border-color: #2E0E10;
    background: #2E0E10 url("images/buttons/bg-gift.jpg") repeat-x
}

.ctabutton.gift a {
    border: 1px solid #150507;
    background: #150507 url("images/buttons/bg-gift-hover.jpg") repeat-x 0 0
}

.ctabutton.accept .ctawrap,
.ctabutton.save .ctawrap {
    border-color: #333500;
    background: #333500 url("images/buttons/bg-accept.jpg") repeat-x
}

.ctabutton.accept a,
.ctabutton.save a,
.ctabutton.accept.input .ctainner,
.ctabutton.save.input .ctainner {
    border: 1px solid #141C00;
    background: #141C00 url("images/buttons/bg-accept-hover.jpg") repeat-x 0 0;
    color: #fff
}

.ctabutton.ignore .ctawrap,
.ctabutton.gringotts .ctawrap,
.ctabutton.comments .ctawrap,
.ctabutton.chapter-nav .ctawrap,
.ctabutton.ignore.registration .ctawrap {
    border-color: #631613;
    background: #631613 url("images/buttons/bg-ignore.jpg") repeat-x
}

.ctabutton.ignore a,
.ctabutton.gringotts a,
.ctabutton.comments a,
.ctabutton.comments.input .ctainner,
.ctabutton.chapter-nav a,
.ctabutton.ignore.input .ctainner {
    border: 1px solid #1C0706;
    background: #1C0706 url("images/buttons/bg-ignore-hover.jpg") repeat-x 0 0;
    color: #fff
}

.ctabutton.registration {
    padding: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #1B4604 #256105 #256105 #1B4604;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.ctabutton.registration.header {
    padding: 1px;
    border-color: #878787 #ddd #C4C4C4 #868686;
    background-color: #cfcfcf
}

.ctabutton.registration.header a,
.ctabutton.registration.header .ctainner input {
    overflow: visible;
    width: auto;
    color: #000
}

*:first-child+html .ctabutton.registration.header .ctainner input {
    padding-top: 3px;
    padding-bottom: 3px
}

.panel.message .ctabutton.registration,
#pottermore-intro .ctabutton.registration,
.panel.sign-in .ctabutton.registration,
#step-1 .ctabutton.registration,
#step-5 .ctabutton.registration,
.reg-confirm-overlay .ctabutton.registration {
    border-color: #450226 #91064F #91064F #450226
}

#pottermore-about .ctabutton.registration,
#step-3 .ctabutton.registration {
    border-color: #2A1B38 #4D3166 #4D3166 #2A1B38
}

#pottermore-shop .ctabutton.registration {
    border-color: #0F6288 #0C4B68 #0C4B68 #0F6288
}

#step-2 .ctabutton.registration,
#step-4 .ctabutton.registration,
.usernames .ctabutton.registration {
    border-color: #1F2528 #3E484D #3E484D #1F2528
}

.ctabutton.registration input,
.ctabutton.registration a .ctahighlight {
    padding: 4px 6px 6px;
    -webkit-text-shadow: none;
    text-shadow: none;
    white-space: nowrap
}

.ctabutton.registration .ctainner,
.ctabutton.registration .ctawrap,
.ctabutton.registration a {
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.ctabutton.registration .ctawrap {
    border-color: #145494;
    background: #145494 url("images/buttons/bg-registration.jpg") repeat-x
}

.ctabutton.registration.header .ctawrap {
    border-color: #bbb;
    background: #ccc url("images/buttons/bg-registration-header.jpg") repeat-x
}

.ctabutton.registration.header a,
.ctabutton.registration.header.input .ctainner {
    border-color: #fff;
    background: #ccc url("images/buttons/bg-registration-header-hover.jpg") repeat-x
}

.ctabutton.favourite input {
    padding-left: 30px
}

.ctabutton.favourite.add input {
    background: url("e.actions/favourite-off.png") no-repeat 7px 3px
}

.ctabutton.favourite.remove input {
    background: url("e.actions/favourite-on.png") no-repeat 5px 2px
}

.househufflepuff .ctawrap {
    border-color: #845C04;
    background: #A87B05
}

.househufflepuff a.ctaanc {
    background: #7A5903
}

.houseslytherin .ctawrap {
    border-color: #123D10;
    background: #195817
}

.houseslytherin a.ctaanc {
    background: #0C2B0B
}

.housegryffindor .ctawrap {
    border-color: #6E0912;
    background: #830C16
}

.housegryffindor a.ctaanc {
    background: #5B090F
}

.houseravenclaw .ctawrap {
    border-color: #0D253B;
    background: #123655
}

.houseravenclaw a.ctaanc {
    background: #0B1F31
}

.ctabutton.explore {
    margin: 10px auto 0
}

.ctabutton.next .ctainner {
    background-image: url(../e.actions/arrow-next.png);
    background-position: right 1px;
    background-repeat: no-repeat
}

.ctabutton.next .ctainner .ctahighlight {
    padding-right: 20px
}

.ctabutton.prev .ctainner {
    background-image: url(../e.actions/arrow-prev.png);
    background-position: 0 1px;
    background-repeat: no-repeat
}

.ctabutton.prev .ctainner .ctahighlight {
    padding-left: 20px
}

.ctarevised {
    display: inline-block;
    padding: 4px 8px;
    min-width: 54px;
    border: 0;
    border-radius: 3px 3px;
    background: #2A769F;
    background: -moz-linear-gradient(top, #3899CF, #1D5370);
    background: -ms-linear-gradient(top, #3899CF, #1D5370);
    background: -o-linear-gradient(top, #3899CF, #1D5370);
    background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#3899CF), to(#1D5370));
    background: -webkit-linear-gradient(top, #3899CF, #1D5370);
    background: linear-gradient(top, #3899CF, #1D5370);
    -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 2px 5px inset, rgba(0, 0, 0, 0.3) -1px -2px 5px inset, rgba(0, 0, 0, 0.75) 0 0 5px;
    box-shadow: rgba(255, 255, 255, 0.5) 1px 2px 5px inset, rgba(0, 0, 0, 0.3) -1px -2px 5px inset, rgba(0, 0, 0, 0.75) 0 0 5px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    -webkit-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);
    font-weight: bold;
    font-size: 11px;
    font-family: Arial;
    line-height: 1.4em;
    cursor: pointer
}

.ctarevised:hover {
    background: #3E9DD1;
    background: -moz-linear-gradient(top, #50C9FF, #2F749A);
    background: -ms-linear-gradient(top, #50C9FF, #2F749A);
    background: -o-linear-gradient(top, #50C9FF, #2F749A);
    background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#50C9FF), to(#2F749A));
    background: -webkit-linear-gradient(top, #50C9FF, #2F749A);
    background: linear-gradient(top, #50C9FF, #2F749A);
    text-decoration: none
}

.ctarevised:active {
    background: #263F5C;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) -1px -1px 1px, rgba(0, 0, 0, 0.75) 0 0 5px;
    box-shadow: rgba(0, 0, 0, 0.5) -1px -1px 1px, rgba(0, 0, 0, 0.75) 0 0 5px;
    text-decoration: none
}

.ctarevised .label {
    display: inline-block;
    color: #fff;
    -webkit-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75)
}

.ctarevised.headercta {
    margin-top: 4px
}

.panel .ctarevised,
#signIn .ctarevised {
    color: #fff;
    text-decoration: none
}

#main {
    position: relative;
    display: block;
    width: auto;
    margin: 0 auto;
    min-width: 960px;
    max-width: 1278px;
}

#mainContent {
    min-height: 654px;
    height: 654px;
    max-height: 654px;
    text-align: center;
    overflow: hidden
}

#sample-moment-content-overlay {
    display: none;
    z-index: 1005
}

#contentSample-primary.explore-harrys-journey .close {
    background: url("../images/content-close.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 22px;
    position: absolute;
    right: 4px;
    top: 30px;
    width: 22px
}

#mainContent.new-writing {
    height: 654px
}

#mainContent.new-writing .contentSample-body,
.explore-harrys-journey .contentSample-body {
    height: 370px
}

#mainContent.new-writing .contentSample-bodyScroll,
.explore-harrys-journey .contentSample-bodyScroll {
    overflow-y: scroll;
    height: 398px;
    padding-left: 50px;
    width: 573px
}

.new-writing #contentSample-frame {
    margin-bottom: 170px;
    overflow: hidden;
    height: 654px
}

.new-writing #contentSample-frame blockquote p {
    line-height: 18px
}

.new-writing .newWriting {
    font-family: georgia;
    font-size: 28px
}

div.contentSample-bodyScroll h2 {
    text-align: center;
    font-family: Georgia;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 10px 0;
    padding: 0;
    color: #333
}

div.contentSample-bodyScroll::-webkit-scrollbar {
    width: 8px;
    background-color: transparent
}

div.contentSample-bodyScroll::-webkit-scrollbar-thumb {
    background-color: #c2c2c2
}

div.contentSample-bodyScroll {
    -ms-scrollbar-base-color: transparent;
    scrollbar-base-color: transparent;
    -ms-scrollbar-base-color: transparent;
    scrollbar-base-color: transparent;
    -ms-scrollbar-face-color: #c2c2c2;
    scrollbar-face-color: #c2c2c2;
    -ms-scrollbar-3dlight-color: transparent;
    scrollbar-3dlight-color: transparent;
    -ms-scrollbar-highlight-color: transparent;
    scrollbar-highlight-color: transparent;
    -ms-scrollbar-track-color: transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-arrow-color: #fff;
    scrollbar-arrow-color: #fff;
    -ms-scrollbar-shadow-color: transparent;
    scrollbar-shadow-color: transparent
}

#experience {
    background-position: -100px -160px;
    background-repeat: no-repeat;
    clear: both;
    min-height: 500px;
    width: 100%;
    overflow: hidden;
    position: relative
}

.no-js #experience,
.no-js #main {
    overflow: visible
}

.basic #experience {
    background-position: -100px -170px
}

.B1C9M3 #experience {
    background-position: 0 -160px
}

.basic.B1C9M3 #experience {
    background-position: 0 -170px
}

.B2C8M2 #experience {
    background-position: 0 -160px
}

.basic.B2C8M2 #experience {
    background-position: 0 -170px
}

.B2C1M1 #experience {
    background-position: -150px -160px
}

.basic.B2C1M1 #experience {
    background-position: -150px -170px
}

.B2C15M1 #experience {
    background-position: -85px -160px
}

.basic.B2C15M1 #experience {
    background-position: -85px -170px
}

.B3C16M2 #experience,
.B3C21M2 #experience {
    background-position: -50px -160px
}

.basic.B3C16M2 #experience,
.basic.B3C21M2 #experience {
    background-position: -50px -170px
}

.B4C13M1 #experience {
    background-position: -60px -160px
}

.basic.B4C13M1 #experience {
    background-position: -60px -170px
}

.explore-the-stories #experience {
    display: none
}

#moment {
    position: relative;
    float: left;
    width: 100%;
    height: 500px;
    background: transparent url(../../images/B1C7M2.jpg) no-repeat 50% 50% #bbb
}

#sample-moment-content-overlay {
    overflow-y: scroll;
    max-height: 450px
}

.fadeaway {
    position: absolute;
    background: none!important;
    -moz-box-shadow: 0 0 37px 47px #000;
    -webkit-box-shadow: 0 0 37px 47px #000;
    box-shadow: 0 0 37px 47px #000;
    z-index: 10
}

.fadeaway.alpha,
.fadeaway.beta {
    width: 0;
    height: 500px
}

.fadeaway.gamma,
.fadeaway.delta {
    height: 0;
    width: 100%
}

.fadeaway.alpha {
    left: -15px!important
}

.fadeaway.beta {
    right: 35px!important
}

.single-col .fadeaway.beta {
    right: 35PX!important
}

.fadeaway.gamma {
    top: 515px!important
}

.fadeaway.delta {
    top: -30px!important
}

.chapter .fadeaway.delta {
    top: -18px!important
}

#nav-moments {
    z-index: 1;
    margin-top: 0;
    width: 100%
}

.inner li {
    margin: 0;
    padding: 4px
}

#site-footer {
    position: relative;
    clear: both;
    margin: 10px 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-family: Arial, Sans-Serif
}

#site-footer #footer-wrap {
    margin: 0 auto;
    padding: 15px 0;
    width: 100%
}

.basic #nav-moments+#site-footer #footer-wrap {
    padding-bottom: 83px
}

#site-footer ul,
#site-footer p {
    font-size: 11px
}

#site-footer,
#site-footer a {
    background-color: #000;
    color: #999
}

#site-footer li.static-child-safety a,
#site-footer li.static-privacy a,
#site-footer li.static-contact-us a {
    font-weight: bold;
    font-size: 12px;
    color: #eac157
}

#site-footer li.static-child-safety a:hover,
#site-footer li.static-child-safety a:focus,
#site-footer li.static-child-safety a:active,
#site-footer li.static-privacy a:hover,
#site-footer li.static-privacy a:focus,
#site-footer li.static-privacy a:active,
#site-footer li.static-contact-us a:hover,
#site-footer li.static-contact-us a:focus,
#site-footer li.static-contact-us a:active {
    color: #FFF;
    text-decoration: none
}

#site-footer a:hover,
#site-footer a:focus,
#site-footer a:active {
    color: #FFF;
    text-decoration: none
}

#site-footer #footer-wrap li {
    display: inline;
    padding: 0 10px 0 11px;
    background: url("images/footer-seperator.png") no-repeat scroll 100% 50% transparent
}

#site-footer #footer-wrap .first {
    padding-left: 0
}

#site-footer #footer-wrap .last {
    padding-right: 0;
    background: none repeat scroll 0 0 transparent
}

#site-footer .copy {
    margin: 10px 0 0;
    color: #999
}

#site-footer .copy a {
    text-decoration: underline
}

#userStatus {
    line-height: 16px
}

.favourites-new {
    font-size: 1.0em;
    line-height: 19px
}

.favourites-new p {
    font-size: em;
    line-height: 19px
}

#game-overlay,
#moment-overlay {
    position: relative;
    left: -639px;
    z-index: 9;
    display: none;
    margin-left: 50%;
    font-size: 11px
}

#game-overlay .standard,
#moment-overlay .standard {
    position: absolute;
    top: 60px;
    left: 310px;
    width: 641px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 26px 21px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 26px 21px rgba(0, 0, 0, 0.8);
    border-radius: 1px
}

#game-overlay .standard .header,
#moment-overlay .standard .header {
    height: 60px;
    background: url('../games/images/overlay_top.png')
}

#game-overlay .standard .footer,
#moment-overlay .standard .footer {
    height: 60px;
    background: url('../games/images/overlay_btm.png')
}

#game-overlay .standard .content,
#moment-overlay .standard .content {
    position: relative;
    padding: 10px 65px;
    background: url('../games/images/overlay_mid.png');
    color: #fff;
    text-align: center;
    font-family: georgia
}

#game-overlay .standard h2,
#moment-overlay .standard h2 {
    position: relative;
    margin: 0;
    padding: 70px 0 0;
    color: #fff;
    font-size: 200%;
    font-family: georgia
}

#moment-overlay .standard h2 {
    padding: 0
}

#game-overlay .standard p,
#moment-overlay .standard p {
    position: relative;
    margin: 1.4em 0 2em;
    padding: 0;
    color: #fff;
    font-size: 110%;
    line-height: 1.2em
}

#game-overlay .standard img,
#moment-overlay .standard img {
    position: absolute;
    top: -100px;
    left: 238px
}

#game-overlay .standard .fail,
#game-overlay .standard .success,
#moment-overlay .standard .fail,
#moment-overlay .standard .success {
    display: none
}

#game-overlay .standard .fail h2,
#moment-overlay .standard .fail h2,
#game-overlay .standard .success h2,
#moment-overlay .standard .success h2 {
    margin-bottom: 1.4em;
    padding-top: 0
}

#game-overlay .standard .sublink a,
#moment-overlay .standard .sublink a {
    color: #FFFF9F;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px
}

#game-overlay .standard .sublink a:hover,
#moment-overlay .standard .sublink a:hover {
    text-decoration: underline
}

#flash-controls {
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 9999999
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    #flash-controls {
        position: absolute;
        top: 45px;
        right: 85px;
        z-index: 9999999
    }
}

.explore-the-stories #flash-controls {
    top: 0
}

.explore-the-stories #flash-controls+#flash-controls {
    top: 20px
}

#flash-controls #sound-control {
    float: left;
    width: 16px;
    height: 12px;
    background: url("../images/sound.png") no-repeat 0 0;
    text-indent: -999em
}

#flash-controls #sound-control.enabled {
    background-position: 0 -12px
}

#flash-controls ul li {
    float: left;
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
    list-style-image: none;
    font-size: 11px
}

#site-footer #footer-wrap #flash-controls ul li {
    background: 0
}

#qualitysetter {
    width: 136px;
    color: #9F9F9F;
    text-decoration: none
}

#qualitysetter span {
    color: #E2BD2E
}

#fwrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2147483647;
    overflow: visible;
    margin: 0 auto;
    width: 100%;
    height: 0
}

#brdr {
    margin: 0 auto;
    padding: 10px;
    width: 762px;
    height: 448px;
    background: url("images/beta-feedback/feedback-border.png") no-repeat scroll 50% 0 #FFF
}

#brdr .closebtn {
    position: relative;
    top: -78px;
    right: 0;
    left: 396px;
    z-index: 999999999;
    display: block;
    margin: 0 auto -45px;
    width: 45px;
    height: 45px;
    background: url("images/beta-feedback/feedback-close.png") no-repeat scroll 0 0 transparent;
    text-indent: -9999em
}

#brdr .hdr {
    height: 43px;
    background: url("images/beta-feedback/feedback-heading.jpg") no-repeat scroll 0 0 transparent
}

#brdr .hdr span.bf {
    float: right;
    margin: 15px 20px 0 0;
    padding: 0;
    border: medium none;
    color: #FFF;
    font-weight: bold;
    font-style: italic;
    font-size: 11px;
    font-family: Georgia
}

#brdr .jspContainer,
#brdr iframe {
    border: medium none!important
}

#feedbackpanel {
    height: 405px
}

.jspContainer {
    position: relative;
    overflow: hidden;
    border-width: 1px 0 0;
    border-style: solid;
    border-color: #808080
}

.jspPane {
    position: absolute
}

*:first-child+html .minioverlay.gift .row div {
    overflow: visible
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 19px;
    height: 100%
}

.jspHorizontalBar {
    display: none!important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: red
}

.jspVerticalBar *,
.jspHorizontalBar * {
    margin: 0;
    padding: 0
}

.jspCap {
    display: none
}

.jspHorizontalBar .jspCap {
    float: left
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%
}

.jspArrow {
    display: block;
    background: #50506d;
    text-indent: -20000px;
    cursor: pointer
}

.jspArrow.jspDisabled {
    background: #80808d;
    cursor: default
}

.jspVerticalBar .jspArrow {
    height: 16px
}

.jspHorizontalBar .jspArrow {
    float: left;
    width: 16px;
    height: 100%
}

.jspVerticalBar .jspArrow:focus {
    outline: 0
}

.jspCorner {
    float: left;
    height: 100%;
    background: #eeeef4
}

.jspHorizontalBar,
.jspVerticalBar {
    border-left: solid 1px #BFBFBF;
    background: #D7D7D7
}

.jspTrack {
    border-right: solid 1px #CFCFCF;
    border-left: solid 1px #CFCFCF;
    background: #D7D7D7;
    position: relative
}

.jspDrag {
    position: relative;
    top: 0;
    left: 0;
    border: solid 1px #1760AA;
    background: #3295BD url(images/drag-bg.jpg) repeat-x left bottom;
    cursor: pointer
}

.jspDrag .jspDragTop {
    height: 100%;
    background: transparent url(images/drag-bg-icon.jpg) no-repeat 3px 50%
}

.jspContainer .jspArrow {
    background: url(images/dropdown-arrows.jpg) no-repeat 0 0;
    cursor: pointer
}

.jspContainer .jspVerticalBar .jspArrow {
    height: 19px
}

.jspContainer .jspHorizontalBar .jspArrow {
    width: 19px
}

.jspContainer .jspArrowUp {
    background-position: -19px 0
}

.jspContainer .jspArrowDown {
    margin-top: 2px;
    padding: 2px 0 1px;
    background-position: -19px -19px
}

.jspContainer .jspArrowUp.jspDisabled {
    background-position: -38px 0
}

.jspContainer .jspArrowDown.jspDisabled {
    background-position: -38px -19px
}

.jspContainer .jspArrowUp:hover,
.jspContainer .jspArrowUp:active,
.jspContainer .jspArrowUp:focus {
    background-position: 0 0
}

.jspContainer .jspArrowDown:hover,
.jspContainer .jspArrowDown:active,
.jspContainer .jspArrowDown:focus {
    background-position: 0 -19px
}

#momentNew-overlay {
    position: relative;
    z-index: 11;
    opacity: 1;
    filter: alpha(opacity=100);
    height: 1px;
    min-width: 960px;
    max-width: 1278px;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out
}

.basic #momentNew-overlay {
    display: none
}

#momentNew-overlay.introClosed {
    opacity: 0;
    filter: alpha(opacity=0)
}

#intro-bookmark {
    position: absolute;
    z-index: 30;
    width: 16px;
    height: 32px;
    background: url('../media/img/moment-overlay-bookmark.png') no-repeat;
    top: -1px;
    left: 16px;
    transition-property: top, left;
    -moz-transition-property: top, left;
    -webkit-transition-property: top, left;
    transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out
}

#momentNew-overlay.introClosed #intro-bookmark {
    display: none
}

#bookmark-placeholder {
    position: absolute;
    left: 19px;
    width: 16px;
    height: 32px
}

#bookmark-placeholder.docked {
    background: url('../media/img/moment-overlay-bookmark.png') no-repeat;
    cursor: pointer
}

#momentNew-overlay .standard {
    position: relative;
    top: 10px;
    width: 340px;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    opacity: 1!important
}

#momentNew-overlay .standard .header {
    height: 8px;
    background: url('../media/img/moment_intro_top.png') repeat-y
}

#momentNew-overlay .standard .footer {
    height: 8px;
    background: url('../media/img/moment_intro_btm.png') no-repeat
}

#momentNew-overlay .standard .content {
    position: relative;
    padding: 8px 28px;
    background: url('../media/img/moment_intro_bg.png') repeat-y;
    color: #fff;
    text-align: left;
    font-family: georgia;
    line-height: 18px
}

#flourish {
    position: relative;
    left: 50%;
    z-index: 10;
    margin-top: 10px;
    margin-left: -31px;
    width: 62px;
    height: 14px;
    background: url('../media/img/flourish.png') no-repeat
}

#aside .CommunityNews {
    padding: 0;
    background: url('../../images/insider-icon.png') no-repeat;
    padding-left: 31px
}

#momentNew-overlay .standard h2 {
    position: relative;
    margin: 0;
    padding: 0;
    color: #bebcbd;
    text-align: center;
    font-size: 16px;
    font-family: cambria, georgia, arial
}

#momentNew-overlay .standard p {
    position: relative;
    margin: 1.0em 0 2em;
    padding: 0;
    color: #bebcbd;
    font-size: 14px;
    font-family: cambria, georgia, arial;
    line-height: 1.2em
}

#momentNew-overlay .standard img {
    position: absolute;
    top: -100px;
    left: 238px
}

#momentNew-overlay .standard .fail,
#momentNew-overlay .standard .success {
    display: none
}

#momentNew-overlay .standard .fail h2,
#momentNew-overlay .standard .success h2 {
    margin-bottom: 1.4em;
    padding-top: 0
}

#momentNew-overlay .standard .sublink a {
    color: #FFFF9F;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px
}

#momentNew-overlay .standard .sublink a:hover {
    text-decoration: underline
}

#close-but {
    position: absolute;
    top: -13px;
    right: -21px;
    z-index: 40;
    width: 45px;
    height: 45px;
    background: url('../media/img/moment-intro-but.png') no-repeat
}

#close-but:hover {
    cursor: pointer
}

.clear {
    clear: both;
    width: 100%;
    height: 5px
}

.clearLess {
    clear: both;
    width: 100%;
    height: 10px
}

.std {
    height: 50px
}

body.chapter-start #footer {
    margin: 0
}

#shopping-list-int .inner li {
    background: 0
}

.signedout-page-overlay {
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    position: absolute;
    left: 50%;
    margin-left: -263px;
    top: 50px;
    text-align: left;
    z-index: 2
}

.signedout-page-overlay .content-inner {
    background: #fff;
    -webkit-box-shadow: inset 0 0 40px #b2b2b2;
    box-shadow: inset 0 0 40px #b2b2b2;
    padding: 20px;
    width: 326px
}

.signedout-page-overlay a,
.signedout-page-overlay a:visited,
#contentSample-frame a,
#contentSample-frame a:visited {
    color: #09c;
    text-decoration: none
}

.signedout-page-overlay a:hover,
#contentSample-frame a:hover {
    text-decoration: underline
}

.wipWrapper {
    width: 792px;
    position: absolute;
    margin-left: -451px;
    left: 50%
}

.wipWrapper .signedout-page-overlay {
    left: auto;
    position: relative;
    margin-left: 0;
    float: left;
    margin-right: 20px
}

#JKR-video-what-is-pottermore {
    position: relative;
    text-align: center;
    margin-top: 20px;
    height: 144px
}

#whatispottermore-overlay-2 img {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin: auto;
    margin-top: 25px;
    height: 152px
}

#JKR-video-what-is-pottermore img {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin: auto
}

#JKR-video-what-is-pottermore span.playBtn {
    display: block;
    position: absolute;
    top: 50px;
    left: 143px;
    background: url("../registration/images/magical-quill/playButton.png") no-repeat 0 0;
    width: 60px;
    height: 43px
}

#JKR-video-what-is-pottermore a.vid:hover span,
#JKR-video-what-is-pottermore a.vid:focus span {
    background-position: 0 -43px;
    text-decoration: none
}

#JKR-still-image-what-is-pottermore {
    position: relative;
    text-align: center;
    margin-top: 20px;
    height: 144px
}

#pottermoretodayShift {
    width: 100%;
    margin-left: -75px
}

#pottermoretoday-overlay-wrap {
    display: inline-block;
    margin: 0 auto
}

#pottermoretoday-overlay-a.signedout-page-overlay {
    float: left;
    margin: 15px 0 0 0;
    position: static
}

#pottermoretoday-overlay-b.signedout-page-overlay {
    float: left;
    margin: 50px 0 0 20px;
    position: static
}

#pottermoretoday-overlay-c.signedout-page-overlay {
    float: left;
    margin: 90px 0 0 20px;
    position: static
}

#pottermoretoday-overlay-a.signedout-page-overlay .content-inner,
#pottermoretoday-overlay-b.signedout-page-overlay .content-inner,
#pottermoretoday-overlay-c.signedout-page-overlay .content-inner {
    width: 210px;
    height: 340px
}

#wizardsduel-overlay {
    position: absolute;
    z-index: 2;
    display: block
}

.basic #wizardsduel-overlay #page-button,
.basic #potions-overlay #page-button,
.basic #newwritingfromjkr-overlay #page-button {
    display: none
}

.signedout-page-overlay .ptoday-inner {
    position: relative
}

.signedout-page-overlay .ptoday-content {
    position: relative;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
    font-family: georgia;
    margin-bottom: 10px
}

.signedout-page-overlay h2 {
    line-height: 1.2;
    padding-top: 0;
    color: #333;
    font-size: 20px;
    font-family: Georgia;
    font-weight: 700;
    padding-bottom: 1em
}

.signedout-page-overlay p {
    color: #333;
    font-size: 16px;
    font-family: georgia;
    line-height: 22px;
    margin-top: 20px
}

.page-overlay-signup a,
.page-overlay-signup a:visited {
    color: #09C;
    text-decoration: none
}

.page-overlay-signup a:hover {
    text-decoration: underline
}

.signedout-page-overlay .btns {
    text-align: center
}

#whichwand-overlay .graphic {
    margin: 0 auto;
    margin-top: 15px;
    width: 202px;
    height: 67px;
    background: url('../../images/signedout/which-wand/bot-graphic.png');
    text-align: center
}

#whathouse-overlay .graphic {
    margin: 0 auto;
    margin-top: 22px;
    width: 212px;
    height: 57px;
    background: url('../../images/signedout/which-hogwarts-house/bot-graphic.png');
    text-align: center
}

#potions-overlay .graphic {
    margin: 0 auto;
    margin-top: 9px;
    margin-bottom: 18px;
    width: 162px;
    height: 107px;
    background: url('../../images/signedout/potions/bot-graphic.png');
    text-align: center
}

#wizardsduel-overlay .graphic {
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 199px;
    height: 77px;
    background: url('../../images/signedout/duel/bot-graphic.png');
    text-align: center
}

.small-header {
    font-size: 20px!important
}

.p-today-img {
    position: relative!important;
    left: 0!important;
    top: 0!important
}

.ptoday-img-area {
    position: absolute;
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    bottom: 20px;
    left: 20px;
    right: 20px
}

.signedout-page-overlay img {
    max-width: 100%
}

.signedout-page-overlay .fail,
.signedout-page-overlay .success {
    display: none
}

.signedout-page-overlay .fail h2,
.signedout-page-overlay .success h2 {
    margin-bottom: 1.4em;
    padding-top: 0
}

#dynamic-bg {
    min-width: 960px;
    max-width: 1278px;
    margin: 0 auto;
    z-index: -1;
    position: relative
}

#dynamic-bg div {
    position: absolute;
    width: 100%;
    max-width: 1278px;
    height: 654px;
    background: url('../../images/signedout/backgrounds/what-is-pmore-a.jpg') no-repeat
}

.page-overlay-bg-main {
    width: 1278px!important;
    height: 768px!important
}

.jquery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    display: block;
    width: 100%;
    height: 2905px;
    background-color: #000;
    -ms-zoom: 1;
    zoom: 1
}

#newWriting-link:hover {
    cursor: pointer
}

#contentSample-primary.explore-harrys-journey {
    position: absolute;
    z-index: 1004;
    top: 0;
    left: 316px
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    #contentSample-primary.explore-harrys-journey {
        left: 95px
    }
}

li.sample a span {
    background: url("../../images/recommendation-panel/jkr-item.png") no-repeat scroll right center transparent;
    display: inline-block;
    height: 10px;
    width: 11px
}

li.sample a.linkInactive span {
    background: url("../../images/recommendation-panel/jkr-item-locked.png") no-repeat scroll right center transparent;
    display: inline-block;
    height: 16px;
    width: 24px;
    margin-bottom: -5px
}

#aside a.quill-of-acceptance-and-book-of-admittance.linkInactive,
#aside a.sampleContent.linkInactive {
    color: #999;
    cursor: default
}

.basic #aside a.quill-of-acceptance-and-book-of-admittance.linkInactive,
.noCanvasSupport #aside a.quill-of-acceptance-and-book-of-admittance.linkInactive,
.basic #aside a.sampleContent.linkInactive,
.noCanvasSupport #aside a.sampleContent.linkInactive {
    color: #EAC157;
    cursor: pointer
}

#contentSample-primary {
    display: none
}

.sample-moment-content #contentSample-primary,
.sample-moment-content #contentSample-primary {
    display: block
}

#contentSample-frame {
    width: 646px;
    margin: 0 auto 25px
}

#contentSample-frame .header {
    display: none
}

#contentSample-frame .header h2 {
    text-align: center;
    color: #FFF;
    padding-top: 88px;
    font-family: Georgia, Arial;
    font-weight: normal!important
}

#contentSample-frame .sub-header {
    margin: 0;
    text-align: center;
    background: url("../../images/signedout/contentSample/subheader-bg.png")no-repeat;
    margin-top: -12px;
    height: 71px
}

.contentSample-decoration {
    margin-left: 50px;
    margin-right: 50px;
    background: url("../../images/signedout/contentSample/subheader-decoration.png") no-repeat 50% 0;
    height: 11px;
    margin-top: 20px;
    padding-right: 20px
}

#contentSample-quill {
    background: url("../../images/signedout/contentSample/content-quill.png") no-repeat 50% 0;
    padding-top: 25px
}

#contentSample-quill h3 {
    text-align: center;
    font-family: Georgia;
    font-size: 18px;
    line-height: 36px;
    margin: 0 0 10px 0;
    padding: 0;
    color: #333
}

.contentSample-body {
    background: url("../../images/signedout/contentSample/content-body.png") repeat-y;
    z-index: 10;
    padding-top: 1px;
    padding-bottom: 30px
}

.contentSample-body p,
.contentSample-body h3 {
    font-family: georgia;
    font-size: 14px;
    color: #333;
    line-height: 160%
}

.contentSample-body p {
    padding-right: 20px;
    text-align: left;
    margin-bottom: 10px
}

.contentSample-body h3 {
    text-align: center;
    font-family: georgia
}

.contentSample-centered-p,
.contentSample-body .contentSample-centered-p {
    text-align: center;
    font-family: georgia;
    padding-top: 15px
}

.contentSample-centered-p a {
    text-decoration: none;
    text-transform: lowercase
}

.contentSample-centered-p a:hover {
    text-decoration: underline
}

.introduction:first-letter,
.sampleContent p:first-child:first-letter {
    float: left;
    font-size: 3.2em;
    margin: .13em 5px 0 0;
    text-transform: uppercase
}

*:first-child+html .introduction:first-letter {
    float: none;
    line-height: .9em;
    font-size: 3.2em
}

html[lang=ja] .introduction:first-letter,
html[lang=ko] .introduction:first-letter {
    font-size: 2.7em;
    line-height: 1em
}

html[lang=ja] .introduction,
html[lang=ko] .introduction {
    min-height: 4.5em
}

*:first-child+html .introduction blockquote {
    position: relative;
    padding-top: 1px
}

*:first-child+html .introduction blockquote p:first-child {
    margin-top: -1px
}

*:first-child+html .introduction blockquote p:first-letter {
    float: none;
    line-height: 1.8em;
    font-weight: normal;
    font-size: .65em
}

.introduction:first-letter {
    line-height: .76em\0/;
    font-size: 3.2em\0/
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .introduction p:first-letter {
        margin-top: .21em
    }
}

#contentSample-frame .footer {
    background: url("../../images/signedout/contentSample/frame-footer-bg.png") no-repeat;
    height: 33px;
    z-index: 10
}

.chapter #page {
    background: no-repeat;
    display: block;
    float: none;
    margin: 0 auto;
    min-width: 960px;
    overflow: visible;
    width: 100%
}

.explore #captions {
    display: none
}

#videoplayer {
    width: 750px;
    height: 448px;
    padding: 12px 0;
    margin: 0;
    position: absolute;
    top: 135px;
    z-index: 99999;
    left: 50%;
    margin-left: -455px;
    margin-left: -375px
}

.B1C12M1 #videoplayer {
    width: 782px;
    height: 424px;
    padding-bottom: 34px
}

#videoplayer.preview {
    height: 446px;
    padding: 27px 0
}

#videoplayer.message {
    top: 220px
}

.global-nav-header #videoplayer.message {
    top: 100px
}

#videoplayer #vc {
    width: 762px;
    height: 372px;
    overflow: hidden;
    margin: 0 auto
}

#videoplayer iframe,
#videoplayer object {
    margin: 0 auto;
    display: block;
    z-index: 1000;
    position: relative
}

#videoplayer #close {
    display: block;
    height: 50px;
    left: 367px;
    margin: 0 auto -46px;
    position: relative;
    right: 0;
    text-indent: -9999em;
    top: -4px;
    width: 50px;
    z-index: 999999999;
    background: transparent url(registration/images/magical-quill/video_close_button.png) no-repeat 0 0
}

.iOS #videoplayer #close {
    top: -30px;
    right: 5px
}

#videoplayer.touch #close {
    left: 387px;
    top: -30px
}

#videoplayer #close:hover,
#videoplayer #close:active,
#videoplayer #close:focus {
    background-position: -44px 0
}

.mejs-container {
    position: relative;
    background: #000;
    font-family: Helvetica, Arial;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1
}

.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    width: 100%;
    height: 100%
}

.mejs-background {
    position: absolute;
    top: 0;
    left: 0
}

.mejs-mediaelement {
    position: absolute;
    left: 0;
    height: 411px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -38px
}

.mejs-poster {
    position: absolute;
    top: 0;
    left: 0
}

.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0
}

.mejs-overlay-play {
    cursor: pointer
}

.mejs-overlay-button {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 89px;
    height: 67px;
    margin: -50px 0 0 -50px;
    background: url(images/bigplay.png) top left no-repeat
}

.mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -67px
}

.mejs-container .mejs-controls {
    position: absolute;
    background: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 4px 0 0;
    bottom: 90px;
    left: 131px;
    background: url(images/control-bg.png);
    height: 32px;
    width: 496px
}

.mejs-container .mejs-controls div {
    list-style-type: none;
    background-image: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 28px;
    height: 26px;
    font-size: 11px;
    line-height: 11px;
    background: 0;
    font-family: Helvetica, Arial;
    border: 0;
    clear: none
}

.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 4px;
    position: absolute;
    height: 24px;
    width: 24px;
    border: 0;
    background: transparent url(images/controls.png) 0 0 no-repeat
}

.mejs-container .mejs-controls .mejs-time {
    color: #fff;
    display: block;
    height: 17px;
    width: auto;
    padding: 8px 3px 0 3px;
    overflow: hidden;
    text-align: center;
    padding: auto 4px
}

.mejs-container .mejs-controls .mejs-time span {
    font-size: 11px;
    color: #fff;
    line-height: 12px;
    display: block;
    float: left;
    margin: 1px 2px 0 0;
    width: auto
}

.mejs-controls .mejs-play button {
    background-position: 0 0
}

.mejs-controls .mejs-play button:hover {
    background-position: 0 -24px
}

.mejs-controls .mejs-pause button {
    background-position: -24px 0
}

.mejs-controls .mejs-pause button:hover {
    background-position: -24px -24px
}

.mejs-controls .mejs-stop button {
    background-position: -112px 0
}

.mejs-controls div.mejs-time-rail {
    width: 200px;
    padding-top: 7px
}

.mejs-controls .mejs-time-rail span {
    display: block;
    position: absolute;
    width: 180px;
    height: 7px;
    cursor: pointer
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 5px;
    background: #000
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #999;
    width: 0
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    width: 0;
    background: #fff
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
    display: none;
    position: absolute;
    margin: 0;
    width: 10px;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    border: solid 2px #333;
    top: -2px;
    text-align: center
}

.mejs-controls .mejs-time-rail .mejs-time-float {
    visibility: hidden;
    position: absolute;
    display: block;
    background: #eee;
    width: 36px;
    height: 17px;
    border: solid 1px #333;
    top: -26px;
    margin-left: -18px;
    text-align: center;
    color: #111
}

.mejs-controls .mejs-time-rail:hover .mejs-time-float {
    visibility: visible
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
    margin: 2px;
    width: 30px;
    display: block;
    text-align: center;
    left: 0
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    border: solid 5px #eee;
    border-color: #eee transparent transparent transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    top: 15px;
    left: 13px
}

.mejs-controls .mejs-fullscreen-button button {
    background-position: -32px 0
}

.mejs-controls .mejs-unfullscreen button {
    background-position: -32px -16px
}

.mejs-controls .mejs-mute button {
    background-position: -48px 0
}

.mejs-controls .mejs-mute button:hover {
    background-position: -48px -24px
}

.mejs-controls .mejs-volume-button {
    position: relative
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
    display: none;
    height: 115px;
    width: 24px;
    background: #1C1815;
    top: -115px;
    left: 4px;
    z-index: 1;
    position: absolute;
    margin: 0
}

.mejs-controls .mejs-volume-button:hover {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px
}

.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
    display: block
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.5);
    margin: 0
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    margin: 0
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    position: absolute;
    left: 4px;
    top: -3px;
    width: 16px;
    height: 6px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    cursor: N-resize;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    margin: 0
}

.mejs-controls .mejs-captions-button {
    position: relative
}

.mejs-controls .mejs-captions-button button {
    background-position: -72px 0
}

.mejs-controls .mejs-captions-button button:hover {
    background-position: -72px -24px
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none!important;
    overflow: hidden
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none!important;
    display: block;
    color: #fff;
    overflow: hidden
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 10px
}

.mejs-controls .mejs-captions-button .mejs-captions-translations {
    font-size: 10px;
    margin: 0 0 5px 0
}

.mejs-chapters {
    position: absolute;
    top: 0;
    left: 0;
    -xborder-right: solid 1px #fff;
    width: 10000px
}

.mejs-chapters .mejs-chapter {
    position: absolute;
    float: left;
    background: #222;
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
    overflow: hidden;
    border: 0
}

.mejs-chapters .mejs-chapter .mejs-chapter-block {
    font-size: 11px;
    color: #fff;
    padding: 5px;
    display: block;
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    cursor: pointer
}

.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
    border-right: 0
}

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
    background: #666;
    background: rgba(102, 102, 102, 0.7);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
    background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
    font-size: 12px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    margin: 0 0 3px 0;
    line-height: 12px
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
    font-size: 12px;
    line-height: 12px;
    margin: 3px 0 4px 0;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.mejs-captions-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    color: #fff
}

.mejs-captions-layer a {
    color: #fff;
    text-decoration: underline
}

.mejs-captions-layer[lang=ar] {
    font-size: 20px;
    font-weight: normal
}

.mejs-captions-position {
    position: absolute;
    width: 100%;
    top: 370px;
    left: 0
}

.mejs-captions-text {
    padding: 5px;
    background: #1C1815
}

.mejs-clear {
    clear: both
}

.me-cannotplay a {
    color: #fff;
    font-weight: bold
}

.me-cannotplay span {
    padding: 15px;
    display: block
}

.mejs-controls .mejs-loop-off button {
    background-position: -64px -16px
}

.mejs-controls .mejs-loop-on button {
    background-position: -64px 0
}

.mejs-controls .mejs-backlight-off button {
    background-position: -80px -16px
}

.mejs-controls .mejs-backlight-on button {
    background-position: -80px 0
}

.mejs-controls .mejs-picturecontrols-button {
    background-position: -96px 0
}

.onboard-msg-overlay {
    position: relative;
    z-index: 2
}

.onboard-msg-overlay .standard {
    position: absolute;
    top: 45px;
    margin-left: -245px;
    left: 50%;
    width: 490px
}

.onboard-msg-overlay .standard .header {
    padding-left: 40px;
    height: 36px;
    background: url('../../images/signedout/top-left.png') no-repeat
}

.onboard-msg-overlay .standard .header .header-inner {
    padding-right: 40px;
    height: 36px;
    background: url('../../images/signedout/top-right.png') top right
}

.onboard-msg-overlay .standard .content {
    padding-left: 40px;
    background: url('../../images/signedout/center-left.png') repeat-y
}

.onboard-msg-overlay .standard .content-inner {
    padding-right: 40px;
    background: url('../../images/signedout/center-right.png') top right repeat-y
}

.onboard-msg-overlay .standard .footer {
    padding-left: 40px;
    height: 38px;
    background: url('../../images/signedout/bot-left.png') no-repeat
}

.onboard-msg-overlay .standard .footer-inner {
    padding-right: 40px;
    height: 38px;
    background: url('../../images/signedout/bot-right.png') top right
}

.page-button {
    display: block;
    text-align: center
}

.onboard-msg-overlay .standard .content-inner .graphic {
    margin: 0 auto;
    margin-top: 22px;
    width: 212px;
    height: 57px;
    background: url('../../images/signedout/which-hogwarts-house/bot-graphic.png');
    text-align: center
}

.onboard-msg-overlay .standard .content-inner .onboardingMsgOverlay-head-section {
    height: auto
}

.onboard-msg-overlay .standard .content-inner .onboardingMsgOverlay-head-section div>* {
    position: relative;
    float: left
}

.onboardingMsgOverlay-avatar {
    padding-top: 7px;
    padding-right: 10px
}

.onboardingMsgOverlay-avatar .avatar span {
    background: transparent url("images/generic/avatar-frame.png") no-repeat 50% 50%;
    display: block;
    height: 31px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -22px;
    z-index: 2
}

.onboardingMsgOverlay-avatar .avatar span.nohouse {
    background: transparent url("images/generic/avatar-frame.png") no-repeat 50% 50%;
    display: block;
    height: 31px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 2px;
    margin-left: -22px;
    z-index: 2
}

.onboard-msg-overlay .standard .content-inner h2,
.onboard-msg-overlay .standard .content-inner h3 {
    padding: 0;
    color: #333;
    font-size: 22px;
    font-family: Georgia
}

.onboard-msg-overlay .standard .content-inner p {
    color: #333;
    font-size: 1.1em;
    font-family: Georgia;
    line-height: 22px
}

.onboard-msg-overlay .standard ul {
    margin: 0
}

#non-js-moment-intro-a,
#non-js-moment-intro-b,
.jshide #non-js-moment-intro-a,
.jshide #non-js-moment-intro-b,
body.js #non-js-moment-intro-a,
body.js #non-js-moment-intro-b {
    display: none
}

#non-js-moment-intro-b,
.jshide.noCanvasSupport #non-js-moment-intro-b {
    display: block;
    position: absolute;
    z-index: 9999
}

#non-js-moment-intro-b {
    background-color: #333;
    height: auto;
    position: absolute;
    padding: 0 160px 15px 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

#non-js-moment-intro-b .inner p {
    margin-top: 5px
}

#non-js-moment-intro-b .inner p {
    text-align: center;
    font-size: 11px;
    color: #CCC;
    opacity: 1;
    margin: auto 0
}

#non-js-moment-intro-b .inner h2 {
    text-align: center;
    font-size: 14px;
    color: #CCC;
    font-family: Georgia
}

.non-js-clear {
    display: none
}

.non-js-clear {
    display: none;
    clear: both;
    width: 100%;
    height: 5px
}

.samplebutton {
    display: block
}

.basic .samplebutton {
    display: none
}

.widget-Harrys,
.widget-Yours,
.widget-Pottermore,
.widget-Shop,
.widget-Insider,
.widget-CommunityNews h3 {
    margin: 0!important;
    min-height: 30px!important;
    padding-left: 35px!important
}

.widget-None h3 {
    margin: 0!important;
    min-height: 30px!important;
    padding-left: 0!important
}

.widget-Harrys {
    background: url('../../images/harrysjourney-icon.png') no-repeat top left
}

.widget-Yours {
    background: url('../../images/yours-icon.png') no-repeat top left
}

.widget-Pottermore {
    background: url('../../images/pottermore-icon.png') no-repeat top left
}

.widget-Shop {
    background: url('../../images/shop-icon.png') no-repeat top left
}

.widget-Insider {
    background: url('../../images/insider-icon.png') no-repeat top left
}

.widget-CommunityNews {
    background: url('../../images/pottermore-icon.png') no-repeat top left
}

.correspondence-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center
}

.correspondence {
    margin: 40px auto 0;
    color: #0C4406;
    position: relative;
    font-family: Georgia;
    border: solid 1px transparent 9;
    background: transparent url("../moment/interactions/images/letter-body.png") 88% 119px;
    z-index: 10;
    *top: 40px
}

.container-inner>.correspondence {
    display: none;
    left: 225px;
    position: absolute;
    top: 0;
    z-index: 999999
}

.correspondence h1 {
    margin: 10px 0;
    padding: 50px 50px 0;
    position: relative;
    text-transform: uppercase;
    top: 0;
    font-size: 16px;
    color: #0C4406;
    line-height: 120%;
    letter-spacing: 0;
    background: transparent url("../diagon-alley/shopping-list/images/header-logo.png") no-repeat 50% 0;
    font-family: Georgia
}

.correspondence h2 {
    margin: 0 0 5px 0;
    padding: 6px 2px;
    font-size: 18px;
    font-family: Georgia;
    color: #0C4406;
    font-weight: 400
}

.correspondence .inner {
    position: relative
}

.correspondence .ornament-left {
    background: url("../content/images/cta-ornaments.png") no-repeat scroll 0 0 transparent;
    height: 15px;
    left: -32px;
    position: absolute;
    top: .2em;
    width: 26px
}

.correspondence .ornament-right {
    background: url("../content/images/cta-ornaments.png") no-repeat scroll -26px 0 transparent;
    height: 15px;
    position: absolute;
    right: -32px;
    top: .2em;
    width: 26px
}

.correspondence p {
    font-size: 12px;
    padding: 0 20px;
    margin: 0
}

.correspondence .sub {
    font-style: italic;
    padding: 0 20px
}

.correspondence .ctabutton {
    margin: 15px 0 0 0
}

.correspondence .header {
    height: 148px;
    background: transparent url("../moment/interactions/images/letter-head.png") no-repeat 0 0;
    z-index: 10;
    width: 100%;
    position: absolute;
    top: -20px;
    left: 0
}

.correspondence .footer {
    height: 222px;
    background: transparent url("../moment/interactions/images/letter-footer.png") no-repeat 0 0;
    z-index: 10;
    width: 100%;
    position: absolute;
    bottom: -40px;
    left: 0
}

.correspondence .body {
    z-index: 11;
    overflow: hidden;
    position: relative;
    padding: 0 20px
}

.correspondence .close,
#shopping-list-frame .close {
    display: block;
    height: 37px;
    width: 37px;
    text-indent: -999em;
    background: url("../diagon-alley/shopping-list/images/close.png") no-repeat 50% 50%;
    position: absolute;
    z-index: 100;
    right: 10px;
    top: 0
}

#shopping-list-frame .close {
    right: 20px;
    top: -10px
}

.iOS #shopping-list-frame .close {
    right: 35px;
    top: -8px
}

.correspondence hr {
    background: transparent url("../diagon-alley/shopping-list/images/header-divider.png") no-repeat 50% center;
    visibility: visible;
    border: 0;
    height: 1px
}

.correspondence .products li {
    line-height: 24px
}

.field-validation-error,
div.help,
.basic dl.help,
.js dl.help dd,
.validation-summary-errors,
.message.warning {
    margin-bottom: 5px;
    color: #2A2A2A;
    padding: 10px;
    background: #FFFFA0;
    text-align: center;
    font-size: 11px;
    border: 1px solid #555;
    box-shadow: 0 0 8px #222;
    -moz-box-shadow: 0 0 8px #222;
    -webkit-box-shadow: 0 0 8px #222;
    font-family: Arial;
    line-height: 130%
}

.validation-summary-errors,
.message.warning {
    background-image: url("c.form/icon-error.png");
    background-position: 8px 12px;
    background-repeat: no-repeat;
    font-weight: bold;
    padding: 0;
    clear: both;
    border: 3px solid #F2AE1D;
    margin: 0 6px
}

.validation-summary-errors ul {
    padding: 10px 10px 0 30px;
    -moz-box-shadow: 0 0 15px #FAD85F inset;
    -webkit-box-shadow: 0 0 15px #FAD85F inset;
    box-shadow: 0 0 15px #FAD85F inset;
    font-family: Arial;
    font-weight: normal;
    -ms-word-wrap: break-word;
    word-wrap: break-word
}

.validation-summary-errors,
.message.warning {
    background-image: url("../c.form/icon-error.png");
    background-position: 8px 12px;
    background-repeat: no-repeat;
    font-weight: bold;
    padding: 0;
    clear: both;
    border: 3px solid #F2AE1D;
    margin: 0 6px
}

.field-validation-error {
    background-image: url("c.form/icon-error.png");
    background-position: 7px 10px;
    background-repeat: no-repeat;
    font-weight: bold;
    display: block
}

.help {
    clear: both;
    margin: 10px 0
}

.basic .help {
    float: left;
    width: 100%
}

.help-set {
    position: relative
}

.help-icon {
    display: block;
    height: 25px;
    width: 25px;
    text-indent: -999em;
    background: url("../c.form/icon-help.png") no-repeat 50% 50%
}

.row .help-icon {
    position: absolute;
    top: 0;
    right: -3px
}

.row .help.enabled {
    position: absolute!important;
    width: 100%;
    top: 32px;
    right: -53px;
    margin: 0;
    margin-left: 50px;
    z-index: 9999;
    border: none!important
}

.date .sub {
    float: left;
    clear: none;
    display: inline-block;
    width: auto;
    padding-right: 8px
}

.date .sub label {
    display: none
}

div.info-helper {
    height: 25px;
    width: 25px
}

div.info-helper:hover,
div.info-helper:focus,
div.info-helper:active {
    text-decoration: none
}

div.info-helper span.icon {
    background: url("../c.form/icon-help.png") no-repeat scroll 50% 50% transparent;
    display: block;
    height: 25px;
    text-indent: -999em;
    width: 25px;
    cursor: pointer;
    z-index: 0;
    position: relative
}

div.info-helper span.contents {
    display: none;
    font-family: Arial;
    width: 280px;
    background: #FFFFA0;
    padding: 10px;
    position: absolute;
    top: 28px;
    left: -140px;
    z-index: 2147483647;
    font-weight: bold;
    font-size: 11px;
    cursor: default;
    color: #2A2A2A;
    line-height: 1.4em;
    border: 3px solid #F2AE1D;
    box-shadow: 0 0 8px #222;
    -moz-box-shadow: 0 0 8px #222;
    -webkit-box-shadow: 0 0 8px #222
}

#step-5 div.info-helper span.contents {
    left: -272px
}

#step-5 div.info-helper span.contents span.pointer {
    left: 273px
}

div.info-helper.beta span.contents {
    bottom: 29px;
    top: auto
}

div.info-helper:hover span.contents,
div.info-helper:active span.contents,
div.info-helper:focus span.contents,
div.info-helper.focused span.contents {
    display: block
}

div.info-helper span.contents a {
    color: #1E4C79
}

div.info-helper span.contents span.pointer {
    background: url("../images/info-pointer.png") no-repeat;
    position: absolute;
    width: 17px;
    height: 8px;
    top: -11px;
    left: 141px
}

div.info-helper.beta span.contents span.pointer {
    top: auto;
    bottom: -11px;
    background: url("images/info-pointer-beta.png") no-repeat
}

div.info-helper.text {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    right: auto
}

div.info-helper.text span.icon {
    background: 0;
    width: auto;
    height: auto;
    text-indent: 0
}

.clearfix:after,
.clearfix:before {
    display: table;
    content: " "
}

.clearfix:after {
    clear: both
}

#riddle-overlay {
    position: relative;
    left: -769px;
    z-index: 9;
    margin-left: 50%;
    font-size: 11px
}

#riddle-overlay .standard {
    position: absolute;
    top: 40px;
    left: 190px;
    width: 1010px;
    background: rgba(0, 0, 0, 0.95);
    -webkit-box-shadow: 0 0 26px 21px rgba(0, 0, 0, 0.95);
    box-shadow: 0 0 26px 21px rgba(0, 0, 0, 0.95);
    border-radius: 1px
}

#riddle-overlay .standard .header {
    height: 60px
}

#riddle-overlay .standard .footer {
    height: 60px
}

#riddle-overlay .standard .content {
    position: relative;
    padding: 10px 65px;
    color: #fff;
    text-align: center;
    font-family: georgia;
    height: 290px
}

#riddle-overlay .standard h2 {
    position: relative;
    margin: 0;
    padding: 100px 0 0;
    color: #fff;
    font-size: 200%;
    font-family: georgia
}

#moment-overlay .standard h2 {
    padding: 0
}

#riddle-overlay .standard p {
    position: relative;
    margin: 1.4em 0 2em;
    padding: 0;
    color: #fff;
    font-size: 110%;
    line-height: 1.2em
}

#riddle-overlay .standard img {
    position: absolute;
    top: -100px;
    left: 378px
}

#riddle-overlay .standard p.redIncorrect {
    color: #f00;
    margin: 0 0 5px 0
}

#riddle-overlay .standard .fail,
#riddle-overlay .standard .success {
    display: none
}

#riddle-overlay .standard .fail h2,
#riddle-overlay .standard .success h2 {
    margin-bottom: 1.4em;
    padding-top: 0
}

#riddle-overlay .standard .sublink a {
    color: #FFFF9F;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px
}

#riddle-overlay .standard .sublink a:hover {
    text-decoration: underline
}

input:focus,
input:active {
    outline: 0
}

#soundmanager-debug {
    display: block;
    width: 50%;
    height: 30%;
    position: absolute;
    bottom: -20px;
    right: 0;
    z-index: 999;
    background: #FFF;
    FONT-SIZE: 14PX;
    OVERFLOW: SCROLL;
    padding: 5px
}

#GuideToDuellingClubImg {
    display: block;
    width: 500px;
    height: 2833px;
    background: url(../../images/duelling/GuideToDuellingClub.jpg) no-repeat 0 0;
    background-position: center;
    margin: 0 auto;
    text-indent: -9999px
}

#GuideToDuellingClubImg br {
    display: none
}

#magicalobjectsImg {
    width: 540px;
    height: 1067px;
    background: url(../../../media/magicalobjects/magicalobjects.png) no-repeat 0 0;
    margin: 0 auto;
    text-indent: -9999px
}

#famousSlytherins {
    background: url(../../../media/moment/content/famous-slytherins.jpg) no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 1000px
}