/*
* Tips styles that are included for tips pages.
*/

#game {
margin: 0 auto;
}

.tip-space a {
color: #0057a0;
text-decoration: none;
}

.tip-space a:hover {
text-decoration: underline;
}

.tip-space a:visited {
color: #0057a0;
}


.tip-info {
margin: 1.52em auto 0 auto;
position: relative;
max-width: 620px;
}

table.tip-info-prop {
border-collapse: collapse;
}

table.tip-info-prop td {
line-height: 1.52em;
white-space: nowrap;
}

table.tip-info-prop td.tipl {
text-align: right;
padding-right: 0.24em;
}

table.tip-info-prop td.tipd {
font-weight: bold;
}

table.tip-info-prop td.tipdn {
vertical-align: top;
width: 180px;
}

.tip-info-img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%)
}

.tip-info-img img {
width: 32px;
}

.tipster-avatar {
position: absolute;
top: 0;
right: 0;
}

.tip-description {
margin: 1.8em auto 1.2em auto;
}

.tip-description p {
margin: 0.52em 0;
line-height: 1.6em;
text-indent: 1.6em;
}

p.tip-summary {
margin: 0.52em 0;
line-height: 1.6em;
text-indent: 1.6em;
font-weight: bold;
}

p.tip-summary span {
white-space: nowrap;
}

.edit-tip {
margin: 1.2em 0 -1.2em 0;
text-align: right;
}

.report-problem {
margin: -1.2em 0;
text-align: right;
}

.tip-other-tips {
margin: 0 auto;
width: max-content;
}		

.tip-other-tips a {
display: block;
text-decoration: none;
width: max-content;
margin: 0.16em 0;
padding: 0.24em 0.52em;
}

.tip-other-tips a:hover {
text-decoration: underline;
}

.tip-other-links {
margin-top: 1.16em;
width: max-content;
}

a.all-tips, a.all-tips2 {
display: block;
text-decoration: none;
width: max-content;
max-width: calc(100% - 1.2em);
margin: 1.2em auto 3.2em auto;
padding: 0.24em 0.52em;
text-align: center;
}

a.all-tips {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

a.all-tips:hover, a.all-tips2:hover {
text-decoration: underline;
}

a.all-tips2 span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


.tipster-info {
width: max-content;
margin: 0 auto 0 auto;
}

table.tipster-info-prop {
border-collapse: collapse;
}

table.tipster-info-prop td {
line-height: 1.52em;
white-space: nowrap;
}

table.tipster-info-prop td.tipl {
text-align: right;
padding-right: 0.32em;
}

table.tipster-info-prop td.tipd {
font-weight: bold;
}





@media screen and (max-width: 768px) {
.report-problem {
margin-top: 0;
}
}

@media screen and (max-width: 480px) {
#tips p.tip-summary {
margin: 0.52em 0;
line-height: 1.6em;
text-indent: unset;
text-align: center;
}
h2 {
font-size: 1.22em;
}
.edit-tip {
margin-bottom: -0.52em;
text-align: center;
}
.report-problem {
margin-bottom: 0.52em;
text-align: center;
}
.tip-other-tips {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tip-other-tips a {
max-width: calc(100% - 1.12em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tip-other-links {
width: 100%;
white-space: nowrap;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.tip-other-links a {
width: max-content;
margin-left: auto;
margin-right: auto;
}
}


@media screen and (max-width: 380px) {
table.tip-info-prop td.tipdn {
width: 150px;
}
}

@media screen and (max-width: 320px) {
table.tip-info-prop td.tipdn {
width: 100px;
}
}
