*{
    font-family:"lucida grande",Tahoma,Verdana,Arial,sans-serif
}
a{
    text-decoration:none;
    color:#2966b8;
    outline:0;
    font-size:.8em
}
a:hover{
    text-decoration: none;
}
a img{
    border:0
}
p{
    font-size:.8em
}
p a{
    font-size:.9em
}
li{
    font-size:.8em
}
h1{
    font-size:2em;
    margin:2px 0 2px 0
}
h2{
    font-size:1.5em;
    margin:2px 0 2px 0
}
h2 a{
    font-size:1.0em
}
span.wbr{
    font-size:1px
}
.hidden{
    visibility:hidden;
    display:none
}
.hiddenBlock{
    visibility:hidden
}
a.linkbutton,a.linkbutton:hover{
    color:#fff;
    background:#ff9c42;
    font-weight:bold;
    border:1px solid #c65e00;
    padding:3px 7px 3px 7px;
    margin:3px 0 0 0;
    vertical-align:baseline;
    text-decoration:none
}
a.linkbutton img{
    vertical-align:middle;
    margin:0 2px 0 0
}
a.utilbutton,a.utilbutton:hover{
    color:#000;
    background:#f3f3f3;
    font-weight:bold;
    border:1px solid #999;
    padding:3px 7px 3px 7px;
    margin:3px 3px 3px 3px;
    vertical-align:baseline;
    text-decoration:none
}
.rt{
    float:right
}
.lf{
    float:left
}
.cnt{
    text-align:center
}
div.clFloat{
    clear:both;
    height:0;
    line-height:0;
    font-size:1px
}
a.linkTab{
    font-size:.8em;
    font-weight:normal;
    padding:2px 8px 2px 8px;
    margin:0 3px 0 3px;
    text-decoration:none;
    background-color:#fff;
    color:#000
}
a.linkTab:hover{
    background-color:#ffeab7;
    text-decoration:none
}
a.linkTabhl,a.linkTabhl:hover{
    font-size:.8em;
    font-weight:bold;
    padding:2px 8px 2px 8px;
    margin:0 3px 0 3px;
    text-decoration:none;
    background-color:#ff9c42;
    color:#fff
}
body{
    margin:0;
    background-image:url(/images/gradient.png);
    background-repeat:repeat-x;
    background-color:#15c6d0
}
table.frame{
    width:100%;
    border-width:0;
    border-spacing:0;
    border-collapse:separate
}
table.frame td{
    padding:0
}
div.largeImgFrame{
    text-align:center;
    width:175px
}
div.largeImgFrame a.imgLink,div.largeImgFrame a.imgLink:hover{
    margin:0;
    padding:0;
    background:0
}
div.largeImgFrame a img{
    border:0
}
div.smallImgFrame{
    width:50px;
    height:50px
}
div.smallImgFrame img{
    width:50px;
    height:50px
}
div.smallImgFrame a img{
    border:0
}
tr.header td{
    background-color:#2966b8
}
td.header{
    width:1000px
}
td.header div{
    margin-left:15px;
    margin-right:15px
}
td.header a.logolink{
    padding:0;
    margin:0
}
td.header a.logolink img{
    border:0
}
td.header a{
    float:left;
    display:inline;
    font-size:1em;
    font-weight:bold;
    color:#fff;
    padding:11px 8px 11px 8px;
    margin:0;
    text-decoration:none
}
td.header a.rt{
    float:right
}
td.header a:hover{
    background-color:#5991db;
    text-decoration:none
}
td.header a.hl,td.header a.hl:hover{
    background-color:#ff9c42
}
td.header img{
    float:left
}
div.logoLogin{
    float:right;
    margin-top:8px
}
div.logoLogin table{
    border-spacing:2px
}
div.logoLogin td{
    background:0
}
div.logoLogin label{
    padding:0;
    margin:0;
    font-size:.8em;
    color:#fff;
    vertical-align:bottom
}
div.logoLogin label.reml{
    margin-left:5px;
    font-size:.7em;
    color:#bad0ef;
    vertical-align:top
}
div.logoLogin label.reml:hover{
    color:#f8fbfe
}
div.logoLogin input{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:2px;
    margin:0;
    vertical-align:middle
}
div.logoLogin input.reml{
    vertical-align:top;
    padding:0;
    border:0;
    margin-top:1px
}
div.logoLogin span.submit input{
    padding:2px 5px 3px 5px;
    font-weight:bold;
    border:solid 1px #000;
    font-size:.7em;
    background-color:#1a3f71;
    color:#fff;
    height: 25px;
    margin-left: 5px;
}
div.logoLogin span.submit input:hover{
    color:#000;
    background-color:#95b8e8
}
div.logoLogin td{
    vertical-align:top
}
div.logoLogin a,div.logoLogin a:hover{
    padding:0;
    font-size:.7em;
    color:#bad0ef;
    font-weight:normal;
    background:0
}
div.logoLogin a:hover{
    text-decoration:underline
}
tr.midsection td.left{
    vertical-align:top;
    background-image:url(/images/gradient.png);
    background-repeat:repeat-x;
    background-color:#15c6d0;
    padding:0;
    margin:0;
}
tr.midsection td.left div{
    background-image:url(/images/sidebars/1_b.png);
    background-position:right;
    background-repeat:no-repeat;
    width:100%;
    height:900px;
    vertical-align:top;
    padding:0;
    margin:0
}
tr.midsection td.right{
    vertical-align:top;
    background-image:url(/images/gradient.png);
    background-repeat:repeat-x;
    background-color:#15c6d0;
    padding:0;
    margin:0
}
tr.midsection td.right div{
    background-image:url(/images/sidebars/1_a.png);
    background-position:left;
    background-repeat:no-repeat;
    width:100%;
    height:900px;
    vertical-align:top;
    padding:0;
    margin:0
}
td.midsection{
    vertical-align:top;
    background-color:#fff;
    border-radius:18px 18px 0 0
}
td.midsection div.Ctnt{
    width:980px;
    margin:10px 10px 10px 10px
}
tr.footer{
    height:225px
}
td.footer{
    vertical-align:top;
    background-color:#fff;
    border-radius:0 0 18px 18px
}
td.footer div.ol{
    margin:30px 10px 0 10px
}
td.footer div.Ctnt{
    text-align:center;
    margin:0
}
td.footer div.Ctnt p{
    font-size:.8em;
    color:#000;
    margin:2px 0 2px 0
}
td.footer div.Ctnt p b{
    font-weight:bold
}
td.footer div.Ctnt a{
    font-size:.8em
}
td.footer div.Ctnt a:hover{
    font-weight:bold
}
div.centeredLayout{
    display:block;
    text-align:center
}
div.centeredLayoutAuto{
    display:block;
    margin-left:auto;
    margin-right:auto
}
div.minContentHeight{
    float:right;
    display:inline;
    width:1px;
    height:650px
}
div.horizLine{
    display:block;
    height:1px;
    padding:0;
    margin:7px 0 7px 0;
    background:#b3b3b3
}
div.horizLine hr{
    display:none
}
td.lftCol{
    vertical-align:top;
    width:185px;
    border-right:solid 1px #b3b3b3;
    height:655px
}
td.lftCol div.mgn{
    margin-right:10px
}
td.rhtCol{
    vertical-align:top;
    width:1px;
    border-left:solid 1px #b3b3b3
}
td.rhtCol div.mgn{
    margin-left:10px
}
td.cntCol{
    vertical-align:top
}
td.cntCol div.mgn{
    margin-left:10px;
    margin-right:10px
}
td.cntRhtCol{
    width:350px;
    vertical-align:top
}
td.cntRhtCol div.mgn{
    margin-left:10px
}
td.ColSml{
    width:auto
}
div.loginPage{
    width:500px;
    height:400px;
    margin:auto
}
div.userCorner td.imageCell{
    width:50px;
    height:50px
}
div.userCorner td{
    vertical-align:top;
    padding:0;
    margin:0
}
div.sideNav a{
    display:block;
    font-size:.8em;
    font-weight:normal;
    padding:1px 1px 2px 5px;
    margin:0;
    background-color:#fff;
    color:#000;
    text-decoration:none
}
div.sideNav a:hover{
    background-color:#ffeab7;
    text-decoration:none
}
div.sideNav a.hl,div.sideNav a.hl:hover{
    background-color:#ff9c42;
    color:#fff;
    font-weight:bold
}
div.userProfile p{
    margin:0 0 0 5px;
    font-weight:bold;
    font-size:.9em
}
div.userProfile td{
    vertical-align:bottom
}
div.userInfoDump p{
    margin:0 0 0 10px;
    font-weight:normal;
    font-size:.8em
}
div.userInfoDump label{
    display:block;
    margin:2px 0 2px 5px;
    font-weight:bold;
    font-size:.8em
}
div.dataSection label{
    display:inline;
    font-weight:bold;
    font-size:.8em
}
div.dataSection p{
    margin:8px 0 8px 0;
    font-size:.8em
}
div.dataSection div.more a{
    margin:8px;
    padding:8px;
    float:none;
    display:block;
    background-color:#cedef4;
    border:solid 1px #000;
    text-align:center;
    color:#000;
    text-decoration:none
}
div.dataSection div.more a:hover{
    background-color:#ffeab7
}
div.dataSection span.nodata{
    color:#aaa;
    font-style:italic
}
div.dataFrame{
    padding:0;
    margin:0 8px 0 8px;
    border-bottom:solid 1px #b3b3b3
}
div.dataFrameHB{
    padding:0 8px 0 8px;
    margin:0;
    border-bottom:solid 1px #000
}
div.dataFrameFB{
    padding:0 8px 0 8px;
    margin:0;
    border-bottom:solid 1px #000;
    border-right:solid 1px #000;
    border-left:solid 1px #000
}
div.dataFrameHL{
    padding:0 8px 0 8px;
    margin:0;
    border-bottom:solid 1px #000;
    background-color:#e3e8fb
}
div.dataFrameDL{
    padding:0 8px 0 8px;
    margin:0;
    border-bottom:solid 1px #000;
    background-color:#f3f3f3
}
div.dataFrameHLFB{
    padding:0 8px 0 8px;
    margin:0;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    background-color: #fff;
}
div.dataFrameED{
    padding:0 8px 0 8px;
    margin:0;
    border-bottom:solid 1px #000;
    border-right:solid 1px #000;
    border-left:solid 1px #000;
    background-color:#f2f2f2
}
div.dataFrameTopBar{
    border-top:solid 1px #000
}
div.userEntry,div.dataEntry{
    padding:8px 0 8px 0;
    display:block
}
div.userEntry a.user{
    font-weight:bold;
    font-size:.9em
}
div.userEntry a.messageText{
    color:#000;
    font-weight:normal;
    font-size:1.0em
}
label.date{
    float:right;
    font-size:.7em;
    font-weight:normal
}
span.date{
    color:#aaa;
    font-size:.7em
}
div.userEntry a.delbutton{
    float:right;
    padding:2px 4px 2px 4px;
    margin:0;
    background-color:#fafafa;
    color:#000;
    font-weight:bold
}
div.userEntry a.delbutton:hover{
    background-color:#aaa;
    color:#000;
    text-decoration:none
}
div.dataFrameHL div.userEntry a.delbutton,div.dataFrameHLFB div.userEntry a.delbutton{
    background-color:#e3e8fb
}
div.dataFrameHL div.userEntry a.delbutton:hover,div.dataFrameHLFB div.userEntry a.delbutton:hover{
    background-color:#aaa
}
div.dataFrameHL div.userEntry span.date,div.dataFrameHLFB div.userEntry span.date{
    color:#787878
}
div.userEntry p{
    margin:0 0 0 5px;
    font-size:.8em
}
div.userEntry p a{
    font-size:.8em
}
div.userEntry td{
    vertical-align:top;
    padding:0;
    margin:0
}
div.userEntry td.imageCell{
    width:50px;
    height:50px
}
div.userEntry td.checkCell{
    vertical-align:middle;
    width:25px
}
div.userEntry td.messageCell{
    width:160px
}
div.friendsArray{
    width:175px
}
div.friendsArray label{
    vertical-align:top;
    text-align:left;
    display:inline;
    font-weight:bold;
    font-size:.8em
}
div.friendsArray a{
    vertical-align:top;
    font-size:.7em;
    margin:0
}
div.friendsArray div.smallImgFrame a{
    vertical-align:baseline
}
div.friendsArray a.viewall{
    float:right
}
div.friendsArray table.frame{
    vertical-align:top;
    border-spacing:2px
}
div.friendsArray table.frame div.spacer{
    width:5px;
    height:5px
}
div.friendsArray div.username{
    width:52px;
    height:15px;
    overflow:hidden
}
div.centerAd{
    text-align:center;
    width:160px
}
div.loadingBar{
    margin:8px;
    padding:8px;
    float:none;
    display:block;
    background-color:#cedef4;
    border:solid 1px #000;
    text-align:center;
    color:#000
}
div.successBar a{
    margin:8px;
    padding:12px;
    float:none;
    display:block;
    font-weight:bold;
    background-color:#def1ca;
    border:solid 1px #72941c;
    text-align:center;
    color:#72941c
}
div.successBar p{
    margin:8px;
    padding:12px;
    float:none;
    display:block;
    font-weight:bold;
    background-color:#def1ca;
    border:solid 1px #72941c;
    text-align:center;
    color:#72941c
}
div.successBar2 p{
    margin:0px;
    padding:12px;
    float:none;
    display:block;
    font-weight:bold;
    background-color:#def1ca;
    border:solid 1px #72941c;
    text-align:center;
    color:#72941c
}
div.successBar p.justify{
    text-align:justify
}
div.failBar a{
    margin:8px;
    padding:12px;
    float:none;
    display:block;
    font-weight:bold;
    background-color:#f1cbc9;
    border:solid 1px #96271b;
    text-align:center;
    color:#96271b
}
div.failBar p{
    margin:8px;
    padding:12px;
    float:none;
    display:block;
    font-weight:bold;
    background-color:#f1cbc9;
    border:solid 1px #96271b;
    text-align:center;
    color:#96271b
}
div.failBar p.justify{
    text-align:justify
}
div.editProfile div.editFrame{
    margin:0 6px 0 0
}
div.editProfile textarea{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:2px;
    vertical-align:middle;
    width:100%;
    font-size:.8em
}
div.editProfile input{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:2px;
    vertical-align:middle;
    width:100%;
    font-size:.8em
}
div.editProfile p textarea,div.editProfile p input{
    font-size:1.0em
}
div.editProfile div.submit input{
    float:right;
    color:#fff;
    background:#ff9c42;
    font-weight:bold;
    border:1px solid #c65e00;
    padding:2px 3px 2px 3px;
    margin:5px 0 0 0;
    vertical-align:middle;
    width:auto;
    cursor:pointer
}
div.userEntry div.editProfile div.editFrame{
    margin:0 6px 0 5px
}
div.formHeader{
    background-color:#5991db;
    border:1px solid #000;
    padding:4px
}
div.formHeaderDark{
    background-color:#2966b8;
    border:1px solid #000;
    padding:4px
}
div.formHeader label,div.formHeaderDark label{
    color:#fff;
    float:none;
    display:inline;
    padding:0;
    margin:0 0 0 5px;
    font-weight:bold
}
div.editForm div.editFrame{
    margin:0 12px 0 90px
}
div.editForm div.editFrame p{
    margin:2px 0 2px 0
}
div.editForm div.withMessage{
    margin:0 12px 0 55px
}
div.editForm label{
    float:left;
    display:inline;
    margin:8px 0 0 0;
    font-weight:bold;
    font-size:.8em
}
div.editForm div.editFrame label{
    float:none;
    font-weight:normal;
    margin:0 0 0 5px
}
div.editForm textarea{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:5px;
    vertical-align:middle;
    width:100%;
    font-size:.9em;
    margin:3px 0 3px 0
}
div.editForm input{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:5px;
    vertical-align:middle;
    width:100%;
    font-size:.9em;
    margin:3px 0 3px 0
}
div.editForm input.short{
    width:45px
}
div.editForm input.error{
    border:2px solid #f00
}
div.editForm input.check{
    width:auto;
    margin:8px 0 8px 0;
    padding:0;
    border:0
}
div.editForm input[readonly]{
    background:#bfbfbf
}
div.editForm select{
    color:#000;
    background:#fff;
    border:1px solid #000;
    padding:5px;
    vertical-align:middle;
    font-size:.9em;
    margin:3px 0 3px 0
}
div.editForm select.error{
    border:2px solid #f00
}
div.editForm p textarea,div.editForm p input{
    font-size:1.0em
}
div.editForm div.submit input{
    float:left;
    color:#fff;
    background:#ff9c42;
    font-weight:bold;
    border:1px solid #c65e00;
    padding:5px 6px 5px 6px;
    margin:5px 0 0 90px;
    vertical-align:middle;
    width:auto;
    cursor:pointer;
    font-size:.9em
}
div.editForm div.submit input.second{
    float:left;
    color:#000;
    background:#f3f3f3;
    font-weight:bold;
    border:1px solid #999;
    padding:5px 6px 5px 6px;
    margin:5px 0 0 5px;
    vertical-align:middle;
    width:auto;
    cursor:pointer;
    font-size:.9em
}
div.editForm div.submit a.utilbutton{
    float:left;
    padding:6px 6px 6px 6px;
    margin:5px 0 0 3px;
    width:auto;
    font-size:.9em
}
div.editForm div.avatarEditFrame{
    margin:0 15px 0 90px;
    width:217px
}
div.editForm div.avatarEditFrame img{
    border:1px solid #000
}
div.editForm div.editFrame div.userfield img{
    float:left;
    display:inline;
    border:0;
    width:50px;
    height:50px;
    padding:0 5px 0 0
}
div.editForm div.editFrame div.userfield p{
    clear:none;
    display:block;
    font-weight:bold;
    margin:0
}
div.editForm div.editFrame div.userfield a{
    margin:0
}
div.listAblums table,div.listPhotos table{
    border-spacing:5px
}
div.listAblums td{
    background-color:#f2f2f2;
    padding:7px;
    margin:0;
    vertical-align:top;
    border:1px solid #000
}
div.listAblums td.fill,div.listPhotos td.fill{
    background:0;
    padding:0;
    width:100%;
    border:0
}
div.listAblums div.albumframe{
    width:175px;
    height:175px;
    line-height:10em
}
div.listAblums img{
    vertical-align:middle
}
div.listAblums p{
    margin:0
}
div.fullImageFrame{
    padding:3px 3px 0 3px;
    border:1px solid #000;
    text-align:center;
    background-color:#f2f2f2
}
div.fullImageFrame a img{
    border:0
}
div.captionArea p{
    margin:0
}
div.captionArea span.linkBrk{
    font-size:.7em;
    vertical-align:middle
}
a.textLink{
    color:#000;
    margin:0;
    padding:0;
    vertical-align:top
}
div.listAblums div.videoalbumframe{
    width:175px;
    height:131px;
    line-height:10em
}
div.largeImgFrame a img.yt{
    border:0;
    vertical-align:baseline;
    width:175px;
    height:131px
}
div.blogNav span{
    font-size:.7em;
    vertical-align:top
}
div.blogNav a{
    vertical-align:top
}
div.blogEntry div.margin{
    margin-bottom:40px
}
div.blogEntry label{
    font-size:1.5em;
    font-weight:normal;
    margin:0
}
div.blogEntry a.label{
    display:block;
    font-size:1.5em;
    color:#000;
    text-decoration:none;
    margin:0
}
div.blogEntry a.label:hover{
    text-decoration:underline
}
div.blogEntry div.content{
    width:100%;
    font-size:.9em
}
div.blogEntry div.dateCom{
    display:block
}
div.blogEntry div.dateCom p{
    display:inline;
    font-size:.7em;
    color:#aaa;
    margin:0
}
div.blogEntry div.dateCom a{
    background:url("http://staticdata.onverse.com/img/profile/comment.png") no-repeat scroll left center;
    padding:0 0 0 18px;
    font-size:.7em
}
div.blogEntryCtrls span.linkBrk{
    font-size:.7em;
    vertical-align:middle
}
div.OVCode h1{
    font-size:1.2em;
    margin:0
}
div.OVCode h2{
    font-size:1.1em;
    margin:0
}
div.OVCode div.rightJust{
    text-align:right
}
div.OVCode div.leftJust{
    text-align:left
}
div.OVCode div.centerJust{
    text-align:center
}
div.OVCode div.floatLeft{
    float:left
}
div.OVCode img{
    border:1px solid #000;
    background-color:#f2f2f2;
    padding:5px
}
div.OVCode img.left{
    float:left;
    text-align:center;
    margin-right:8px
}
div.OVCode img.right{
    float:right;
    text-align:center;
    margin-left:8px
}
div.OVCode li{
    margin-left:16px
}
div.OVCode ul li{
    margin:0
}
div.NewsCode{
    font-size:.8em
}
div.NewsCode h1{
    line-height:20px
}
div.NewsCode h2{
    font-size:1.4em;
    line-height:5px
}
div.NewsCode div.rightJust{
    text-align:right
}
div.NewsCode div.leftJust{
    text-align:left
}
div.NewsCode div.centerJust{
    text-align:center
}
div.NewsCode div.floatLeft{
    float:left
}
div.NewsCode img{
    border:1px solid #000;
    background-color:#f2f2f2;
    padding:5px
}
div.NewsCode img.nob{
    border:0;
    background-color:#fff;
    padding:0
}
div.NewsCode img.left{
    float:left;
    text-align:center;
    margin-right:8px
}
div.NewsCode img.right{
    float:right;
    text-align:center;
    margin-left:8px
}
div.NewsCode li{
    margin-left:16px
}
div.NewsCode ul li{
    font-size:1.0em;
    margin:0
}
table.downloadTable{
    width:100%;
    border-width:0;
    border-spacing:0
}
table.downloadTable td{
    vertical-align:top;
    padding:0
}
table.downloadTable td.header{
    border:1px solid #000;
    background-color:#5991db;
    padding:4px
}
table.downloadTable td.header label{
    color:#fff;
    float:none;
    display:inline;
    padding:0;
    margin:0 0 0 5px;
    font-weight:bold
}
table.downloadTable td.image{
    padding-top:5px;
    text-align:center;
    border-left:1px solid #000;
    border-right:1px solid #000;
    background-color:#e3e8fb
}
table.downloadTable td.text{
    padding-left:5px;
    padding-right:5px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    background-color:#e3e8fb
}
table.downloadTable td.space{
    font-size:1.5em
}
div.fbReg{
    width:450px
}
div.cntSplit table.ctp{
    width:100%;
    border-width:0;
    border-spacing:0
}
div.cntSplit table td{
    vertical-align:top
}
div.cntSplit table tr td.leftCtp{
    padding-right:5px;
    width:50%
}
div.cntSplit table tr td.rightCtp{
    padding-left:5px;
    width:50%
}
div.ccBox{
    padding:5px 0 5px 0
}
div.ccBox table.package td span{
    font-size:1.3em
}
div.ccBox table.package td{
    vertical-align:middle;
    text-align:left;
    width:10px;
    padding-top:3px;
    padding-bottom:3px;
    font-size:.9em
}
div.ccBox table.package td.alt{
    background-color:#e3e8fb
}
div.ccBox table.package td.fill{
    padding-left:5px;
    width:100%
}
div.ccBox table.packsum td{
    vertical-align:middle;
    text-align:left;
    width:10px;
    padding-top:3px;
    padding-bottom:3px;
    font-size:.9em
}
div.ccBox table.packsum td.fill{
    padding-left:5px;
    width:100%
}
div.ccBox table.packsum td span{
    font-weight:bold
}
div.ccBox select{
    border:1px solid #000;
    padding:1px
}
div.ccBox div.fill{
    width:100%;
    text-align:center
}
div.ccBox div.submit input{
    color:#fff;
    background:#ff9c42;
    font-weight:bold;
    border:1px solid #c65e00;
    padding:5px 6px 5px 6px;
    vertical-align:middle;
    width:auto;
    cursor:pointer;
    font-size:.9em
}
div.ccBox div.submit a.utilbutton{
    float:left;
    padding:6px 6px 6px 6px;
    margin:5px 0 0 3px;
    width:auto;
    font-size:.9em
}
div.receiptBox{
    width:250px
}
div.indexPage p{
    color:#2966b8;
    font-size:1.0em
}
div.indexPage h2{
    color:#2966b8;
    margin:0
}
div.indexPage ul{
    color:#2966b8;
    margin:0
}
div.indexPage li{
    font-size:1.0em;
    font-weight:bold
}
div.packageList div.package table.frame td{
    vertical-align:top
}
div.packageList div.package table.frame table td{
    vertical-align:middle
}
div.packageList div.package table.frame td.icon{
    width:0;
    padding-right:5px
}
div.packageList div.package table.frame table td.icon{
    width:20px;
    height:18px;
    padding:0
}
div.packageList div.package table.frame td.title{
    vertical-align:middle;
    background-color:#50a3e7;
    border:1px solid #000;
    padding:8px;
    margin:0;
    height:1px
}
div.packageList div.package table.frame td.title label{
    color:#fff;
    font-size:1.4em;
    margin:0;
    padding:0
}
div.packageList div.package table.frame td.title span.price{
    color:#fff;
    float:right;
    font-size:1.3em;
    padding:0;
    margin:0 5px 0 5px
}
div.packageList div.package table.frame td.title span.submit{
    float:right;
    padding:0;
    margin:0 0 0 5px
}
div.packageList div.package table.frame td.title span.submit input{
    color:#fff;
    background:#ff9c42;
    font-weight:bold;
    border:1px solid #c65e00;
    padding:3px 6px 3px 6px;
    vertical-align:middle;
    cursor:pointer;
    font-size:.9em
}
div.packageList div.package table.frame td.desc p{
    margin-top:5px;
    font-size:1.1em
}
div.AdB div.header{
    margin:0 0 6px 0;
    padding:2px 3px 3px 5px;
    background-color:#f2f2f2;
    border-top:1px solid #e2e2e2
}
div.AdB div.header a{
    padding:0;
    font-weight:bold;
    font-size:12px
}
div.AdB div.header label{
    padding:0;
    font-weight:bold;
    font-size:12px
}
div.AdB p{
    margin:5px 0 10px 0;
    font-size:11px
}
div.fbAd div.imL{
    text-align:center;
    margin:0
}
div.fbAd div.imL img{
    width:32px;
    height:32px;
    margin:0 2px 0 2px;
    padding:0
}
div.frnNtwrk table{
    text-align:center
}
div.frnNtwrk table tr.heading h4{
    margin:5px 0 5px;
    padding:0;
    font-size:16px
}
div.frnNtwrk table tr p{
    margin:0;
    font-size:16px;
    font-weight:bold
}
div.frnNtwrk table tr p.currency{
    color:#ffcb2f
}
div.frnNtwrk div.invAps table{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:300px
}
div.frnNtwrk div.invAps table td{
    height:45px;
    padding:0
}
div.frnNtwrk div.invAps table td p{
    font-size:12px
}
div.frnNtwrk div.banner table{
    text-align:center
}
div.frnNtwrk div.banner table td{
    font-size:12px
}
div.frnNtwrk div.banner table tr.captions td{
    text-align:left
}
div.frnNtwrk div.invLink{
    text-align:center
}
div.frnNtwrk div.invLink table{
    text-align:center;
    font-size:11px;
    margin:0;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    width:420px
}
div.frnNtwrk div.invLink table td{
    margin:0;
    padding:0;
    border-collapse:collapse;
    width:15px
}
div.frnNtwrk div.invLink img{
    margin:0;
    padding:0;
    border:0
}
div.frnNtwrk div.invLink table td.img{
    line-height:0
}
div.frnNtwrk div.invLink table td.input{
    background-color:#e88529;
    border:1px solid #c86002;
    width:150px
}
div.frnNtwrk div.invLink table td.input div.input input{
    width:275px;
    border:1px solid #000;
    margin:3px 0 3px 0
}
div.frnNtwrk table td.details{
    vertical-align:top;
    text-align:left;
    width:300px
}
div.frnNtwrk table td.details p{
    font-size:11px;
    margin:15px 20px 15px 0;
    text-align:justify;
    font-weight:normal
}
div.frnNtwrk table td.details h4{
    margin:15px 20px 15px 0;
    padding:0;
    font-size:12px;
    line-height:.75
}
div.frnNtwrk table td.details ul{
    margin:15px 20px 5px 0;
    padding:0 0 0 15px
}
div.frnNtwrk table td.details li{
    margin:3px 0 3px 0;
    font-size:11px;
    text-align:justify
}
.collapsible .content {
    display: none;
}

.collapsible-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.demo-up {
display: block;
height: 0px;
position: relative;
color: #2ECC71;
}
.server-status {
left: 10px;
top: 50%;
margin-left: 0px;
margin-top: 7px;
position: absolute;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
}
.server-status::before,
.server-status::after {
left: 0;
top: 50%;
margin-left: -1px;
margin-top: -6px;
position: absolute;
vertical-align: middle;
width: 12px;
height: 12px;
border-radius: 50%;
}
.server-status[type="up"],
.server-status[type="up"]::before,
.server-status[type="up"]::after {
background: #2ECC71;
}
.server-status[type="down"],
.server-status[type="down"]::before,
.server-status[type="down"]::after {
background: #E74C3C;
}
.server-status[type="slow"],
.server-status[type="slow"]::before,
.server-status[type="slow"]::after {
background: #F1C40F;
}
.server-status::before {
content: "";
animation: bounce 1.5s infinite;
}
.server-status::after {
content: "";
animation: bounce 1.5s -0.4s infinite;
}
@keyframes bounce {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(2);
    opacity: 0;
}


}

/* Override Bootstrap colors */
:root {
    --bs-primary: #2966b8;
    --bs-secondary: #33ff57;
    --bs-danger: #d9534f;
}

      
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important; /* Adjust text color if needed */
}

.bg-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important; /* Adjust text color if needed */
}
.pagination-active-bg {
    background-color: var(--bs-primary) !important;
}

/* live preview window */
.signup-preview{
  border:1px solid #5c6a7a; border-radius:8px; background:#101826;
  box-shadow:0 12px 30px rgba(0,0,0,.35); overflow:hidden;
  margin-left: 10px;
}
.preview-titlebar.win{
  height:32px; background:#1b2433; color:#cfd8e3;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6px 0 10px; border-bottom:1px solid #0f172a; user-select:none;
}
.win-left{ display:flex; align-items:center; gap:8px; }
.win-appicon{ width:16px; height:16px; border-radius:4px; }
.win-title{ font-size:12.5px; font-weight:600; letter-spacing:.2px; opacity:.95; }
.win-right{ display:flex; }

.win-btn{
  width:46px; height:32px; display:grid; place-items:center;
  border:0; background:transparent; color:#cfd8e3;
  font-size:14px; line-height:1; cursor:default;
  transition:background-color .15s ease, color .15s ease;
}
.win-btn:focus{ outline:none; }

.win-min:hover{ background:rgba(255,255,255,.08); }
.win-min:active{ background:rgba(255,255,255,.12); }

/* Windows close button behavior */
.win-close:hover{ background:#e81123; color:#fff; }
.win-close:active{ background:#c50f1f; }

.preview-canvas{
  position:relative; width:100%; aspect-ratio:16 / 9;
  background:#0b1320;
}
.preview-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9;
}
.preview-avatar{
  position: absolute;
  left: 50%;
  bottom: 0;                       /* sit on the bottom edge */
  transform: translateX(-50%) scale(1.65); /* center + 200% size */
  transform-origin: bottom center;  /* grow upward from the bottom */
  width: 22%;
  max-width: none;                  /* let it scale freely */
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.preview-nameblock{
  position:absolute; top:6%; left:50%; transform:translateX(-50%);
  text-align:center; color:#fff; text-shadow:0 3px 8px rgba(0,0,0,.6);
}
.preview-display{
  font-size:42px; font-weight:800; line-height:1; letter-spacing:-2px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  text-shadow:
    2px 2px 0 rgba(0,0,0,.65),   /* crisp offset */
    6px 8px 16px rgba(0,0,0,.35);/* soft glow */
}
/* keep your selected border highlight */
.image-container img.selected{
  border-color:#ff9c42; background-color:#ff9c42;
}

/* ── Modern section title ───────────────────────────────────────────
   Sitewide replacement for the old .formHeader.bg-gradient gradient bar:
   a plain uppercase label with an accent icon, no boxed header of its
   own. First introduced on the community/home page (as .ch-section-title,
   now promoted here); pair it with a self-contained, all-four-corners-
   rounded content box below it (each page's own .dataFrameHLFB override
   already handles that per-page) rather than the old header+content
   two-piece fused box. */
.section-title{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #1a3f71;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title i{ color: #ff9c42; }

/* ===================================================================
   Chat widget (Messenger-style DM dock) — js/chat_widget.js
   =================================================================== */
#ov-chat-root{
  position: fixed; right: 16px; bottom: 0; z-index: 10000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#ov-chat-root *{ box-sizing: border-box; }

.ov-chat-launcher-wrap{
  position: fixed; right: 16px; bottom: 16px; z-index: 10001;
  display: flex; flex-direction: column; align-items: flex-end;

  /* Same dead-zone problem as .ov-chat-dock below: with the Chats panel open
     this box is 300px wide, but the launcher beneath it is only 52px, so the
     strip beside the launcher is empty air that would still eat clicks. */
  pointer-events: none;
}
.ov-chat-launcher-wrap > *{ pointer-events: auto; }
.ov-chat-launcher{
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: linear-gradient(180deg, #2966b8, #1a3f71);
  color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(26,63,113,.4);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ov-chat-launcher:hover{ filter: brightness(1.08); }
.ov-chat-badge{
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: #dc3545; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.ov-chat-list{
  width: 300px; max-height: 420px; margin-bottom: 10px;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
.ov-chat-list-header{
  background: #2966b8; color: #fff; padding: 10px 12px;
  font-weight: 700; display: flex; align-items: center; justify-content: space-between;
}
.ov-chat-list-close{ cursor: pointer; opacity: .85; }
.ov-chat-list-close:hover{ opacity: 1; }
.ov-chat-list-newrow{
  display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #e3e8fb;
}
.ov-chat-new-input-wrap{ position: relative; flex: 1; min-width: 0; }
.ov-chat-new-input{
  width: 100%; border: 1px solid #cedef4; border-radius: 16px; padding: 6px 12px;
  font-size: 13px; outline: none;
}
.ov-chat-new-input:focus{ border-color: #2966b8; }
.ov-chat-new-suggest{
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e3e8fb; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); max-height: 180px; overflow-y: auto;
  z-index: 10002;
}
.ov-chat-suggest-item{ padding: 7px 12px; font-size: 13px; color: #1a3f71; cursor: pointer; }
.ov-chat-suggest-item:hover{ background: #f3f3f3; }
.ov-chat-new-btn{
  width: 30px; height: 30px; border-radius: 50%; border: none; flex-shrink: 0;
  background: #2966b8; color: #fff; cursor: pointer;
}
.ov-chat-list-items{ overflow-y: auto; }
.ov-chat-list-empty{ padding: 24px 12px; text-align: center; color: #787878; font-size: 13px; }
.ov-chat-list-item{
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid #f3f3f3;
}
.ov-chat-list-item:hover{ background: #f3f3f3; }
.ov-chat-list-item.ov-unread .ov-chat-list-item-name{ font-weight: 700; }
.ov-chat-list-item-text{ flex: 1; min-width: 0; }
.ov-chat-list-item-name{ font-size: 13px; color: #1a3f71; }
.ov-chat-list-item-preview{
  font-size: 12px; color: #787878; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-chat-list-item-time{ font-size: 11px; color: #b3b3b3; flex-shrink: 0; }
.ov-chat-list-badge{
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #dc3545; color: #fff; font-size: 10px; font-weight: 700;
  line-height: 18px; text-align: center; flex-shrink: 0;
}

.ov-chat-avatar-wrap{ position: relative; display: inline-block; flex-shrink: 0; }
.ov-chat-avatar{ border-radius: 50%; object-fit: cover; display: block; }
.ov-chat-avatar-fallback{
  border-radius: 50%; background: #2966b8; color: #fff; text-align: center;
  font-weight: 700; display: block;
}
.ov-chat-presence-dot{
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid #fff;
}
.ov-dot-online{ background: #2ecc71; }
.ov-dot-game{ background: #15c6d0; }
.ov-dot-offline{ background: #b3b3b3; }

.ov-chat-dock{
  position: fixed; right: 76px; bottom: 0; z-index: 9999;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 8px;

  /* THE CONTAINER MUST NOT CATCH CLICKS.

     This is a fixed flex container sized by its widest and tallest children,
     so most of its box is empty air sitting over the page at z-index 9999.
     align-items:flex-end drops a MINIMIZED window to the bottom of a row
     whose height is set by an OPEN one, so the column above the minimized
     bar is empty - measured at 300x380 with one of each - and every click
     landing there hit the dock instead of the page. Nothing was visible, so
     it read as the page being randomly dead: on /forum/new it sat exactly
     over "Post Thread".

     Making the container transparent to pointer events and handing them back
     to the windows means only pixels that actually show a window take clicks. */
  pointer-events: none;
}
.ov-chat-dock > *{ pointer-events: auto; }
.ov-chat-window{
  width: 300px; background: #fff; border-radius: 10px 10px 0 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); overflow: hidden;
  display: flex; flex-direction: column;
}
.ov-chat-window-header{
  background: #2966b8; color: #fff; padding: 8px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.ov-chat-window-title{
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-chat-window-badge{
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #ff9c42; color: #1a3f71; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center;
}
.ov-chat-window-controls{ display: flex; gap: 10px; font-size: 13px; }
.ov-chat-window-controls i{ cursor: pointer; opacity: .85; }
.ov-chat-window-controls i:hover{ opacity: 1; }

.ov-chat-window-body{ display: flex; flex-direction: column; height: 380px; }
.ov-chat-window.ov-chat-minimized .ov-chat-window-body{ display: none; }

.ov-chat-messages{
  flex: 1; overflow-y: auto; padding: 10px; background: #f8fbfe;
  display: flex; flex-direction: column;
}
.ov-chat-msg{ display: flex; margin: 3px 0; }
.ov-chat-msg-own{ justify-content: flex-end; }
.ov-chat-msg-other{ justify-content: flex-start; }
.ov-chat-msg-bubble{
  max-width: 78%; padding: 7px 12px; border-radius: 16px; font-size: 13px;
  line-height: 1.35; word-wrap: break-word; white-space: pre-wrap;
}
.ov-chat-msg-own .ov-chat-msg-bubble{ background: #2966b8; color: #fff; border-bottom-right-radius: 4px; }
.ov-chat-msg-other .ov-chat-msg-bubble{ background: #e3e8fb; color: #1a3f71; border-bottom-left-radius: 4px; }
.ov-chat-msg-pending .ov-chat-msg-bubble{ opacity: .6; }
.ov-chat-msg-failed .ov-chat-msg-bubble{ background: #f8d7da; color: #721c24; }

.ov-chat-input-row{
  display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid #e3e8fb;
}
/* Stands in for the composer when this viewer may not write into the thread -
   the other side closed their inbox, went staff-only, unfriended or blocked
   them. Same footprint and border as the input row it replaces so the window
   does not jump when the state flips mid-poll. */
.ov-chat-blocked-note{
  padding: 10px 12px; border-top: 1px solid #e3e8fb; background: #f7f9fc;
  color: #6b7488; font-size: 12px; line-height: 1.45; text-align: center;
}
.ov-chat-input{
  flex: 1; resize: none; border: 1px solid #cedef4; border-radius: 16px;
  padding: 7px 12px; font-size: 13px; max-height: 90px; outline: none; font-family: inherit;
}
.ov-chat-input:focus{ border-color: #2966b8; }
.ov-chat-send-btn{
  width: 32px; height: 32px; border-radius: 50%; border: none; flex-shrink: 0;
  background: #2966b8; color: #fff; cursor: pointer;
}
.ov-chat-send-btn:hover{ background: #1a3f71; }

/* Clear-from-list control. Hidden until the row is hovered so the list stays
   calm - it sits next to the unread badge, and a permanently visible X next to
   a count reads like "dismiss this notification" rather than "hide this chat". */
.ov-chat-list-clear{
  flex-shrink: 0; color: #b3b3b3; font-size: 12px; padding: 2px 4px;
  opacity: 0; transition: opacity .12s;
}
.ov-chat-list-item:hover .ov-chat-list-clear{ opacity: 1; }
.ov-chat-list-clear:hover{ color: #dc3545; }

/* Per-message controls: edit/delete on your own, report on everyone else's. */
.ov-chat-msg{ align-items: center; gap: 6px; }
.ov-chat-msg-actions{
  display: flex; gap: 6px; font-size: 11px; color: #b3b3b3;
  opacity: 0; transition: opacity .12s; flex-shrink: 0;
}
.ov-chat-msg:hover .ov-chat-msg-actions{ opacity: 1; }
.ov-chat-msg-actions i{ cursor: pointer; }
.ov-chat-msg-actions i:hover{ color: #2966b8; }
.ov-chat-msg-actions .ov-chat-msg-delete:hover,
.ov-chat-msg-actions .ov-chat-msg-report:hover{ color: #dc3545; }

/* The per-message time, revealed with the icons and in the same grey. Like
   them it holds its space while hidden, so nothing reflows on hover - which is
   why it is kept to the time alone (the separator above carries the date). */
.ov-chat-msg-time{
  font-size: 10px; color: #b3b3b3; white-space: nowrap; flex-shrink: 0;
  opacity: 0; transition: opacity .12s;
}
.ov-chat-msg:hover .ov-chat-msg-time{ opacity: 1; }

.ov-chat-msg-edited{ font-size: 10px; opacity: .7; margin-left: 6px; }
.ov-chat-msg-tombstone{ opacity: .75; }
.ov-chat-msg-deleted .ov-chat-msg-bubble{
  background: #ececf1; color: #6b6b6b; font-style: italic;
}

/* Grouped time separator, emitted when the day changes or a burst of messages
   ends (see STAMP_GAP_MS in js/chat_widget.js). The hairlines are drawn with
   ::before/::after so the label centres itself whatever its length - "Today
   2:14 PM" and "Aug 27, 2025, 9:03 AM" both sit mid-row without measuring. */
.ov-chat-msg-sep{
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin: 12px 2px 6px; color: #97a3b6; font-size: 10.5px;
}
.ov-chat-msg-sep::before, .ov-chat-msg-sep::after{
  content: ""; flex: 1; height: 1px; background: #e3e8fb;
}
/* The label must not be squeezed by the two rules either side of it. */
.ov-chat-msg-sep span{ flex-shrink: 0; }
/* The first separator sits at the very top of the thread, where the extra
   leading above it just wastes height in a 380px window. */
.ov-chat-msg-sep:first-child{ margin-top: 2px; }

/* Inline edit, in place of the bubble it replaces. */
.ov-chat-edit-box{ display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.ov-chat-edit-input{
  flex: 1 1 100%; resize: none; border: 1px solid #cedef4; border-radius: 10px;
  padding: 6px 10px; font-size: 13px; outline: none; font-family: inherit;
}
.ov-chat-edit-input:focus{ border-color: #2966b8; }
.ov-chat-edit-save, .ov-chat-edit-cancel{
  border: none; border-radius: 10px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.ov-chat-edit-save{ background: #2966b8; color: #fff; }
.ov-chat-edit-cancel{ background: #e3e8fb; color: #1a3f71; }

/* Report dialog. The scrolling preview pane is the point of the whole thing -
   it lists the exact messages the report will carry, so the reporter approves
   a payload they can actually see rather than a promise about one. */
.ov-chat-modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ov-chat-modal{
  background: #fff; border-radius: 10px; width: 460px; max-width: 100%;
  max-height: 80vh; display: flex; flex-direction: column; padding: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.ov-chat-modal-title{ font-size: 16px; font-weight: 700; color: #1a3f71; margin-bottom: 6px; }
.ov-chat-modal-lead{ font-size: 13px; color: #555; margin: 0 0 12px 0; line-height: 1.45; }
.ov-chat-modal-preview{
  flex: 1; overflow-y: auto; border: 1px solid #e3e8fb; border-radius: 8px;
  padding: 8px; background: #f8fbfe; margin-bottom: 14px;
}
.ov-chat-modal-msg{
  font-size: 12px; line-height: 1.4; padding: 4px 6px; border-radius: 6px;
  word-wrap: break-word; white-space: pre-wrap;
}
.ov-chat-modal-flagged{ background: #fff3cd; outline: 1px solid #ffe08a; }
.ov-chat-modal-sender{ font-weight: 700; color: #1a3f71; }
.ov-chat-modal-actions{ display: flex; justify-content: flex-end; gap: 8px; }
.ov-chat-modal-btn{
  border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; cursor: pointer;
  background: #e3e8fb; color: #1a3f71;
}
.ov-chat-modal-danger{ background: #dc3545; color: #fff; }
.ov-chat-modal-btn:disabled{ opacity: .6; cursor: default; }

/* Clear-confirmation popover, anchored to the X it belongs to. Fixed-position
   on <body> rather than inside the list, which is overflow-y:auto and would
   clip it. Replaces a window.confirm() - a native dialog blocks the whole
   browser and leaves no room to explain that clearing keeps the messages. */
.ov-chat-pop{
  position: fixed; z-index: 10001; width: 218px;
  background: #fff; border: 1px solid #cedef4; border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.ov-chat-pop-text{ font-size: 13px; font-weight: 700; color: #1a3f71; }
.ov-chat-pop-sub{ font-size: 11px; color: #787878; margin-top: 2px; line-height: 1.35; }
.ov-chat-pop-actions{ display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.ov-chat-pop-btn{
  border: none; border-radius: 8px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  background: #e3e8fb; color: #1a3f71;
}
.ov-chat-pop-go{ background: #dc3545; color: #fff; }
.ov-chat-pop-btn:hover{ filter: brightness(1.06); }

@media (max-width: 480px){
  .ov-chat-dock{ right: 8px; }
  .ov-chat-launcher-wrap{ right: 8px; }
  .ov-chat-window, .ov-chat-list{ width: calc(100vw - 24px); }
}


/* ============================================================
   Forum (/forum, /forum/thread/N, /forum/new)

   Lives here rather than inline in each module because three pages share it.
   The "ch-", "kb-" and "ann-" prefixed blocks each have exactly one
   consumer, so their CSS stays page-local.

   NOTE: do not write those prefixes with a trailing asterisk-slash inside a
   comment - that sequence closes the comment early and silently swallows the
   rule that follows it. It ate .forum-hero once already.
   ============================================================ */
/* Hero holds the title, the subtext AND the controls, so search and New
   Thread share the heading's padding and line up with it instead of sitting
   outside the banner. Same shape as the .ann-header pattern on staff pages. */
.forum-hero {
    background: linear-gradient(135deg, #2966b8 0%, #ff9c42 100%);
    border-radius: 14px;
    padding: 24px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.forum-hero-text { flex: 1 1 300px; min-width: 0; }
.forum-hero h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.forum-hero p  { margin: 6px 0 0; font-size: .88rem; opacity: .93; }

/* The toolbar loses its own bottom margin inside the hero - the hero owns
   the spacing now. */
.forum-hero .forum-toolbar { flex: 0 0 auto; margin-bottom: 0; }

/* Toolbar. Search and the New Thread button share ONE row, right-aligned and
   vertically centred.

   This used to be a two-row stack, and the comment here used to say
   side-by-side "kept re-wrapping". That was true but the diagnosis was wrong:
   the field carried `width: 100%` with no fixed basis, so it fought the button
   for space and broke the line at awkward widths. A flex-basis plus nowrap
   fixes it properly. The stack it replaced had its own tell - the button and
   the search row have different natural widths, so right-aligning them left a
   visible ragged step down the left edge.

   The hero itself still wraps (.forum-hero is flex-wrap: wrap), so on a narrow
   screen the whole toolbar drops below the heading rather than the row
   breaking apart mid-control. */
.forum-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

/* The field and its magnifier are ONE control, so they sit flush. The 6px gap
   they used to have read as two unrelated white boxes floating on the
   gradient. Fixed basis rather than a percentage so the row cannot reflow. */
.forum-search {
    /* The legacy stylesheet gives every form a 16px bottom margin, which
       would otherwise fight the flex gap above. */
    margin: 0;
    display: flex;
    align-items: center;
    flex: 0 1 300px;
    min-width: 0;
}
.forum-toolbar .btn,
.forum-search input {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Buttons are flex containers, and a flex container COLLAPSES the whitespace
   between the <i> and its label in the markup - which is why the pen icon was
   touching the "N" of New Thread. The gap puts that space back. Padding too:
   Bootstrap's .btn-sm 4px/8px is cramped for the hero's primary action. */
.forum-toolbar .btn {
    gap: 8px;
    padding: 0 14px;
}
.forum-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e9ecef;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 0 12px;
    font-size: 13.5px;
}
.forum-search input:focus { outline: none; border-color: #2966b8; }
.forum-search button[type="submit"] { border-radius: 0 8px 8px 0; }

/* Clear only appears while a search is active. It is a separate action, so it
   breaks out of the joined field-and-magnifier pill instead of extending it. */
.forum-search #forumClearSearch { margin-left: 8px; border-radius: 8px; }

/* Search sits on the gradient now, so it needs its own contrast rather than
   the page-background border it had when it was below the hero. */
.forum-hero .forum-search input {
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.6);
}
.forum-hero .forum-search input:focus {
    background: #fff;
    border-color: #fff;
}
.forum-hero .forum-search input::placeholder { color: #8a97a5; }

/* NO narrow-screen override here, deliberately. There used to be one (a
   max-width: 600px block that stretched the controls), and it was wrong for
   this page: the site's layout is FIXED at 1000px - the hero measures 940px
   whether the window is 1440px or 455px - so the toolbar always has room for
   one row, and the page scrolls horizontally rather than reflowing.

   A width media query keys off the WINDOW, not the layout, so it fired on a
   narrow window and stacked two controls that had 940px of space, making the
   hero taller for no reason while the reader was already scrolling sideways.
   Measured, not assumed.

   Phones are a separate story again: there is no <meta name="viewport">
   anywhere in core/header.php, so they lay out at ~980px and zoom out instead
   of reflowing. If a viewport meta is ever added, THAT is the point to
   revisit this - the whole fixed-width table layout would need it, not just
   this toolbar. */

.forum-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.forum-tag-pill {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
    border: 1px solid #e9ecef; background: #fff; color: #5a6673;
    text-decoration: none; transition: all .15s ease;
}
.forum-tag-pill:hover { border-color: #2966b8; color: #2966b8; text-decoration: none; }
.forum-tag-pill.active { background: #2966b8; border-color: #2966b8; color: #fff; }
.forum-tag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.forum-list { display: flex; flex-direction: column; gap: 10px; }
.forum-row {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px solid #e9ecef; border-radius: 10px;
    padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.forum-row:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.forum-row.pinned { border-left: 4px solid #ff9c42; }
.forum-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
.forum-row-main { flex: 1; min-width: 0; }
.forum-row-title {
    font-size: 15px; font-weight: 700; color: #1a3f71;
    margin: 0 0 4px; text-decoration: none; display: block;
}
.forum-row-title:hover { color: #2966b8; text-decoration: none; }
.forum-row-meta { font-size: 12px; color: #8a97a5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.forum-row-excerpt { font-size: 13px; color: #5a6673; margin: 6px 0 0; }
.forum-chip {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 2px 8px; border-radius: 20px; color: #fff;
}
.forum-row-stats { text-align: center; flex: 0 0 62px; color: #8a97a5; font-size: 12px; }
.forum-row-stats strong { display: block; font-size: 17px; color: #1a3f71; }

.forum-empty { text-align: center; color: #8a97a5; font-size: 13.5px; padding: 34px 0; }
.forum-pagination { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 18px; }
.forum-pagination .page-info { font-size: 12.5px; color: #8a97a5; }

/* Member-authored bodies. table.frame uses auto layout, so one
   unbroken URL or a wide <pre> in a post would otherwise stretch
   the entire site frame on every page inside it. */
.forum-content { font-size: 15px; color: #33383d; line-height: 1.65; overflow-wrap: anywhere; word-break: break-word; }
.forum-content p { margin: 0 0 10px; }
.forum-content h2 { font-size: 18px; color: #1a3f71; margin: 16px 0 8px; }
.forum-content h3 { font-size: 16px; color: #1a3f71; margin: 14px 0 6px; }
.forum-content a { color: #2966b8; }
.forum-content ul, .forum-content ol { margin: 0 0 10px; padding-left: 22px; }
.forum-content blockquote {
    border-left: 3px solid #e9ecef; margin: 0 0 10px; padding: 4px 0 4px 12px; color: #5a6673;
}
.forum-content pre {
    background: #f6f8fa; border-radius: 8px; padding: 10px 12px;
    font-size: 12.5px; overflow-x: auto; max-width: 100%;
}
.forum-content code { background: #f6f8fa; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
/* Quill 2 emits bullets as <ol><li data-list="bullet">, not <ul> -
   without this every bullet list renders numbered. */
.forum-content li[data-list="bullet"] { list-style-type: disc; }
.forum-content li[data-list="ordered"] { list-style-type: decimal; }

/* Font sizes chosen in the editor. Quill emits these as classes
   (<span class="ql-size-large">) and ships CSS for them only INSIDE the
   editor, so without these rules a size looks right while composing and then
   renders at default once posted. Values match Quill Snow's own scale,
   relative to the 15px base so they track it. */
.forum-content .ql-size-small { font-size: 0.75em; }
.forum-content .ql-size-large { font-size: 1.5em; }
.forum-content .ql-size-huge  { font-size: 2.5em; }

/* Names in bylines and metadata, linking to a profile. Deliberately quieter
   than .forum-mention, which is a chip inside body copy - these sit in dense
   byline rows where a chip would be noise. */
.forum-user-link { color: inherit; text-decoration: none; font-weight: inherit; }
.forum-user-link:hover { color: #2966b8; text-decoration: underline; }
.forum-byline-name .forum-user-link { color: #1a3f71; }
.forum-byline-name .forum-user-link:hover { color: #2966b8; }
.forum-content .ql-align-center { text-align: center; }
.forum-content .ql-align-right { text-align: right; }
.forum-content .ql-align-justify { text-align: justify; }

/* Even breathing room on all four sides. .Ctnt is a fixed 980px column with
   no inline padding of its own, so forum content otherwise runs flush to the
   frame edge. Wraps the whole page on /forum, /forum/thread/N and /forum/new. */
.forum-wrap { padding: 20px; }

/* Back link, as a real button rather than a bare anchor. */
.forum-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    color: #2966b8;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: all .15s ease;
    margin-bottom: 14px;
}
.forum-back:hover {
    background: #2966b8;
    border-color: #2966b8;
    color: #fff;
    text-decoration: none;
}

/* @mentions. Generated server-side by forumLinkifyMentions() over text nodes
   only, so these anchors are ours - never member-supplied markup. */
.forum-mention {
    color: #2966b8;
    background: rgba(41,102,184,.09);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
    text-decoration: none;
}
.forum-mention:hover { background: rgba(41,102,184,.18); text-decoration: none; }

/* Mention typeahead in the composer. Positioned against a relative wrapper
   the editor sits inside. */
.forum-mention-box { position: relative; }
.forum-mention-menu {
    position: absolute;
    z-index: 1200;
    min-width: 190px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    display: none;
}
.forum-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    font-size: 13px;
    cursor: pointer;
}
.forum-mention-item:hover,
.forum-mention-item.active { background: #eef4fc; }
.forum-mention-item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* Inline edit mode on a thread or reply.

   The controls are plain Bootstrap .form-control inside a .dataFrameHLFB box
   now, so the edit view matches the New Thread composer field for field. The
   bespoke .forum-edit-title and .forum-edit-tag rules that used to sit here
   were a second, slightly different take on the same inputs - different
   height, weight and colour from the composer's - which is a good part of why
   editing felt like a rougher screen than writing. Both class names survive in
   the markup purely as hooks for the save handler in modules/forum_thread.php. */
.forum-edit-area { margin-top: 10px; }

/* The composer's editor is a fixed 240px (#forum_new_editor in
   modules/forum_new.php). This one cannot be fixed - it is injected inline
   between posts and has to give the surrounding thread its space back on
   cancel - but 180px puts it in the same league instead of the cramped 120px
   it used to open at. */
.forum-edit-area .ql-container { min-height: 180px; background: #fff; }

/* No margin-top: the .mb-3 on the field above already provides the gap, the
   same way it does under the composer's Post field. */
.forum-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.forum-post-actions { display: flex; gap: 6px; margin-left: auto; }

/* Posted images. width is set as an attribute by the resize control, so
   max-width has to be able to override it on small screens - hence the
   !important-free pairing of max-width with height:auto. */
.forum-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 10px 0;
}

/* The editor's click-to-resize bar. Anchored to the image inside a
   positioned wrapper. */
.forum-img-host { position: relative; }
.forum-img-resize {
    position: absolute;
    z-index: 1300;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.forum-img-resize button {
    border: 1px solid #e9ecef;
    background: #fff;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5a6673;
    padding: 3px 9px;
    cursor: pointer;
}
.forum-img-resize button:hover { background: #2966b8; border-color: #2966b8; color: #fff; }

/* Images inside the editor get a hint that they are clickable. */
.ql-editor img { cursor: pointer; max-width: 100%; height: auto; }

/* ── "Insert an image" dialog ─────────────────────────────────────────
   Markup is built by js/image_insert_modal.js and shared by the forum
   composer, the forum reply/edit boxes and the knowledgebase editor, so the
   styling lives here rather than in any one of those pages. Everything else
   is stock Bootstrap - this only sets the type and the site's blue. */
.ov-image-modal .modal-content { border-radius: 12px; border: none; }
.ov-image-modal .modal-header { border-bottom: 1px solid #eef1f5; padding: 14px 18px; }
.ov-image-modal .modal-title { font-size: 15px; font-weight: 700; color: #2966b8; }
.ov-image-modal .modal-body { padding: 16px 18px; }
.ov-image-modal .modal-footer { border-top: 1px solid #eef1f5; padding: 10px 18px; }
.ov-image-modal .form-label { font-size: 12px; font-weight: 600; color: #5a6673; margin-bottom: 4px; }
.ov-image-modal input.form-control { font-size: 13px; }
.ov-image-modal input.form-control:focus { border-color: #2966b8; box-shadow: 0 0 0 .2rem rgba(41,102,184,.15); }
.ov-image-modal .ov-image-modal-hint { font-size: 11.5px; color: #8a94a6; line-height: 1.5; margin: 10px 0 0 0; }

/* Hidden until submit() has something to complain about. */
.ov-image-modal .ov-image-modal-error { display: none; font-size: 12px; font-weight: 600; color: #c0392b; margin-top: 6px; }
.ov-image-modal .ov-image-modal-error.is-shown { display: block; }

/* Profile pictures render at a fixed SQUARE size in several places, but the
   stored file is not guaranteed square - everything uploaded before the crop
   box existed, and anything that bypasses it. Without object-fit the browser
   stretches a portrait or landscape photo to fill the square, which is the
   distortion people were seeing. `cover` crops to the middle instead. The
   chat widget's .ov-chat-avatar has always done this; this brings the big
   profile renderings in line. */
.ov-profile-pic{ object-fit: cover; }

/* ── Report dialog (js/report_modal.js) ───────────────────────────────
   Shared by the forum, community comments and DMs, so all three ask the
   same question the same way. Same visual language as .ov-image-modal
   above; only the accent differs, because this one is destructive. */
.ov-report-modal .modal-content { border-radius: 12px; border: none; }
.ov-report-modal .modal-header { border-bottom: 1px solid #eef1f5; padding: 14px 18px; }
.ov-report-modal .modal-title { font-size: 15px; font-weight: 700; color: #c0392b; }
.ov-report-modal .modal-body { padding: 16px 18px; }
.ov-report-modal .modal-footer { border-top: 1px solid #eef1f5; padding: 10px 18px; }
.ov-report-modal .form-label { font-size: 12px; font-weight: 600; color: #5a6673; margin: 10px 0 4px; }
.ov-report-modal .form-label:first-of-type { margin-top: 0; }
.ov-report-modal .ov-report-optional { font-weight: 400; opacity: .7; }
.ov-report-modal .form-control { font-size: 13px; }
.ov-report-modal .form-control:focus { border-color: #c0392b; box-shadow: 0 0 0 .2rem rgba(192,57,43,.12); }
.ov-report-modal .ov-report-note { font-size: 11.5px; color: #8a94a6; line-height: 1.5; margin: 10px 0 0; }

/* Optional context block a caller can inject above the form - the DM
   report uses it for the frozen conversation preview. Scrolls rather
   than pushing the buttons off a short screen. */
.ov-report-modal .ov-report-extra:not(:empty) {
    max-height: 210px; overflow-y: auto; margin-bottom: 14px;
    padding: 10px; background: #f7f9fc;
    border: 1px solid #eef1f5; border-radius: 8px;
}