/* standardisation */
html {box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin: 0; height: 100%;}
*, *:before, *:after {box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {display:block;}
summary {display:list-item;}
a {background-color:transparent;}
a:active, a:hover {outline-width: 0;}
small {font-size: 80%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
figure {margin: 1em 40px;}
img {border-style: none;}
hr {box-sizing: content-box; height: 0; overflow: visible;}
button, input, select, textarea, optgroup {font: inherit; margin: 0;}
optgroup {font-weight: bold;}
button, input{overflow: visible;}
button, select{text-transform: none;}
button, [type=button], [type=reset],[ type=submit] {-webkit-appearance: button;}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {border-style:none; padding:0;}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {outline:1px dotted ButtonText;}
fieldset {border:1px solid #c0c0c0; margin:0 2px; padding:.35em .625em .75em;}
legend {color:inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
textarea {overflow: auto;}
[type=checkbox], [type=radio] {padding: 0;}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {height:auto;}
[type=search] {-webkit-appearance: textfield; outline-offset: -2px;}
[type=search]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
/* generic setup */
html, body {font-family: Verdana, sans-serif; font-size: 14px; line-height: 1.5; height: 100%;}
html{overflow-x:hidden}
body {position: relative;}
/* custom font */
@font-face {
font-family: 'Jost';
src: url('../fonts/Jost-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* text */
h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}
h4 {font-size: 17px;}
h5 {font-size: 15px;}
h6 {font-size: 14px;}
.serif{font-family: serif;}
h1, h2, h3, h4, h5, h6 {text-transform: uppercase; font-family: "jost", Arial,sans-serif; font-weight: 400; margin: 10px 0;}
.wide {letter-spacing: 4px;}
.narrow {letter-spacing: -2px;}
hr {border: 0; border-top: 2px solid #333; margin: 15px 0;}
.image {max-width:100%; height:auto}
img { vertical-align: middle;}
a {color: inherit;}
p {text-align: justify;}
.icon {display: inline-block; width: 20px;}
/* tables */
.table, .table-all {border-collapse: collapse; border-spacing: 0; width: 100%; display: table;}
.table-all {border: 1px solid #111}
.bordered tr, .table-all tr {border-bottom:1px solid #111;}
.striped tbody tr:nth-child(even){background-color: #555;}
.table-all tr:nth-child(odd) {background-color: #555;}
.table-all tr:nth-child(even) {background-color: #444;}
.hoverable tbody tr:hover, .ul.hoverable li:hover {background-color: #ccc;}
.centered tr th, .centered tr td {text-align: center;}
.table td, .table th,.table-all td, .table-all th {padding: 8px 8px; display: table-cell; text-align:left; vertical-align: top;}
.table-all th {background-color: #333;}
/* form elements */
input.button, button.button, a.button {background-color: #735043; background-image: linear-gradient(#513021, #735043); padding: 0 14px; color: #fff; border: 1px solid #735043; text-shadow: 0 -1px 0 #1735043; font-weight: 500; cursor: pointer; border-radius: 6px; height: 40px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 rgba(0, 0, 0, 0.5) inset, 0 1.25rem 0 rgba(255, 255, 255, 0.08) inset, 0 -1.25rem 1.25rem rgba(0, 0, 0, 0.3) inset, 0 1.25rem 1.25rem rgba(255, 255, 255, 0.1) inset; transition: all 0.2s linear 0s;}
input.button, button.button {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
input.button:hover, button.button:hover, a.button:hover {color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 rgba(0, 0, 0, 0.25) inset, 0 20px 0 rgba(255, 255, 255, 0.03) inset, 0 -20px 20px rgba(0, 0, 0, 0.15) inset, 0 20px 20px rgba(255, 255, 255, 0.08) inset;}
a.button, a.button:hover {line-height: 38px; color: #fff!important; cursor: pointer;}
.disabled, .button:disabled {cursor: not-allowed; opacity:0.3}
.disabled *, :disabled * {pointer-events: none;}
.ul {list-style-type: none; padding: 0; margin: 0;}
.ul li {padding:8px 16px; border-bottom: 1px solid #ddd;}
.ul li:last-child {border-bottom: none;}
.tooltip, .display-container {position: relative;}
.tooltip {height: 35px;}
.tooltip .text{display:none; background-color: #eee; color: #111;}
.tooltip:hover .text{display: inline-block;}
.ripple:active {opacity: 0.5;}
.ripple {transition: opacity 0s;}
.input {padding: 4px 8px; display: block; border: none; border-bottom: 1px solid #ccc; width: 100%; box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.5); font-size: 0.8em;}
.select {padding: 9px 0; width: 100%; border: none; border-bottom: 1px solid #ccc;}
.check, .radio{width: 24px; height: 24px; position: relative; top: 6px;}
[type=checkbox], [type=radio] {display: none;}
[type=checkbox] + label, [type=radio] + label {line-height: 2em; cursor: pointer;}
[type=checkbox] + label:before {font-family: FontAwesome; font-size: 1.2em; display: inline-block; content: "\f096"; letter-spacing: 0.7em; cursor: pointer;}
[type=checkbox]:checked + label:before {content: "\f046"; letter-spacing: 0.55em;}
[type=radio] + label:before {font-family: FontAwesome; font-size: 1.2em; display: inline-block; content: "\f10c"; letter-spacing: 0.7em; cursor: pointer;}
[type=radio]:checked + label:before {content: "\f192";}
/* blocks */
#myContent {width: 980px;}
.responsive {display: block; overflow-x: auto;}
.container:after, .container:before, .panel:after, .panel:before, .row:after, .row:before, .row-padding:after, .row-padding:before,
.cell-row:before, .cell-row:after, .clear:after, .clear:before, .bar:before, .bar:after{content: ""; display: table; clear: both;}
.col, .half, .third, .twothird, .threequarter, .quarter {float: left; width: 100%;}
.col.s1 {width: 8.33333%;}
.col.s2 {width: 16.66666%;}
.col.s20 {width: 19.99999%;}
.col.s3{width: 24.99999%;}
.col.s4{width: 33.33333%;}
.col.s5{width: 41.66666%;}
.col.s6{width: 49.99999%;}
.col.s7{width: 58.33333%;}
.col.s8{width: 66.66666%;}
.col.s9{width: 74.99999%;}
.col.s10{width: 83.33333%;}
.col.s11{width: 91.66666%;}
.col.s12{width: 99.99999%;}
.video iframe {width: 618px; height: 347px;}
@media (min-width:601px){
.col.m1 {width: 8.33333%;}
.col.m2 {width: 16.66666%;}
.col.m3, .quarter {width: 24.99999%;}
.col.m4, .third {width: 33.33333%;}
.col.m5 {width: 41.66666%;}
.col.m6, .half {width: 49.99999%;}
.col.m7 {width: 58.33333%;}
.col.m8, .twothird {width: 66.66666%;}
.col.m9, .threequarter {width: 74.99999%;}
.col.m10 {width: 83.33333%;}
.col.m11 {width: 91.66666%;}
.col.m12 {width: 99.99999%;}
}
@media (min-width:993px){
.col.l1 {width: 8.33333%;}
.col.l2 {width: 16.66666%;}
.col.l3 {width: 24.99999%;}
.col.l4 {width: 33.33333%;}
.col.l5 {width: 41.66666%;}
.col.l6 {width: 49.99999%;}
.col.l7 {width: 58.33333%;}
.col.l8 {width: 66.66666%;}
.col.l9 {width: 74.99999%;}
.col.l10 {width: 83.33333%;}
.col.l11 {width: 91.66666%;}
.col.l12 {width: 99.99999%;}
}
.rest {overflow: hidden}
.stretch {margin-left: -16px; margin-right: -16px;}
.content, .auto {margin-left: auto; margin-right: auto;}
.content {width: 980px; min-width: 470px}
.auto {max-width: 1140px}
.cell-row {display:table; width: 100%;}
.cell {display: table-cell;}
.cell-top {vertical-align: top;}
.cell-middle {vertical-align: middle;}
.cell-bottom {vertical-align: bottom;}
.hide, .show-small{display: none;}
.show-block, .show {display: block;}
.show-inline-block {display: inline-block;}
/* media widths */
@media (max-width:1205px){
.auto {max-width:95%;}
}
@media (max-width:600px){
#myContent {padding: 10px!important; width: 100%;}
#myHeader h1 {line-height: 1em;}
.video iframe {width: 400px!important; height: 225px!important;}
.mobile.display-right {}
.modal-content {margin:0 10px; width:auto;}
.modal {padding-top: 30px;}
.dropdown-hover.mobile .dropdown-content, .dropdown-click.mobile .dropdown-content {position: relative;}
.hide-small {display: none;}
.show-small {display: inline!important;}
.mobile {display:block; width: 100%!important;}
.mobile-half {display:block; width: 50%!important;}
.bar-item.mobile, .dropdown-hover.mobile, .dropdown-click.mobile{text-align: center;}
.dropdown-hover.mobile, .dropdown-hover.mobile .btn, .dropdown-hover.mobile .button, .dropdown-click.mobile, .dropdown-click.mobile .btn, .dropdown-click.mobile .button {width: 100%;}
.leftcol {margin-top: 0;}
.table.mobile, .table.mobile thead, .table.mobile tbody, .table.mobile tr, .table.mobile th, .table.mobile td {display: block;}
.table.mobile thead tr {position: absolute; top: -9000px; left: -9000px; visibility:none;}
.table.mobile tr {border-top: 1px solid #ccc;}
.table.mobile tr:first-child {border-top: none;}
.table.mobile td {border: none; position: relative; text-align: left; padding-left: 50%; width: 100%;}
.table.mobile td:first-child {border: none;}
.table.mobile td:before {position: absolute; top: 0; left: 0; padding: 8px; white-space: nowrap;}
.weave img{width: 100%!important;}
.farmingmap img {width: 100%!important;}
.indexright {border-width: 0!important; background-color: transparent!important;}
#myContent .build{padding: 0 0 0 10px!important;}
#myContent .build img{width: 40%!important; border: 1px solid #000!important; float: right!important; margin: 0 0 0 10px!important;}
#mycontent .buildtags {float: none;}
.buildimage {width: 100%!important;}
.endhr{display: block!important;}
}
@media (max-width:768px){
.modal-content {width: 500px;}
.modal {padding-top: 50px;}
.leftcol {margin-top: 0;}
}
@media (min-width:993px){
.modal-content {width: 900px;}
.hide-large {display: none;}
.sidebar.collapse {display: block;}
}
@media (max-width:992px) and (min-width:601px){
.hide-medium {display: none;}
}
@media (max-width:992px){
.sidebar.collapse{ display: none;}
.main{margin-left: 0; margin-right: 0;}
.auto{max-width: 100%;}
}
/* positioning */
.top, .bottom{position: fixed; width:100%; z-index: 1;}
.top {top: 0;}
.bottom {bottom: 0;}
.overlay {position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2;}
.display-topleft {position: absolute; left: 0; top: 0;}
.display-topright{position: absolute; right: 0; top: 0;}
.display-bottomleft {position: absolute; left: 0; bottom: 0;}
.display-bottomright {position: absolute; right: 0; bottom: 0;}
.display-middle {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
.display-left {position: absolute; top: 50%; left: 0%; transform: translate(0%,-50%); -ms-transform: translate(-0%,-50%);}
.display-right {position: absolute; top: 50%;right:0%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%);}
.display-topmiddle {position: absolute; left: 50%; top: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%);}
.display-bottommiddle {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%);}
.display-container:hover .display-hover {display: block;}
.display-container:hover span.display-hover {display: inline-block;}
.display-hover {display: none;}
.display-position {position: absolute;}
.display-relative {position: relative;}
/* navigation bar */
nav {position: absolute; bottom: 0; font-size: 1.1em; z-index: 1;}
nav a {line-height: 2.5em; text-decoration: none; padding: 14px;}
nav ul {list-style: none; margin: 0; padding-left: 0;}
nav li {color: #fff; display: block; float: left; padding: 0; position: relative; text-decoration: none; }
nav li:last-child{border-right-width: 1px;}
nav li:hover {cursor: pointer;}
nav li li:hover {background: #624132;}
nav ul li ul {visibility: hidden; opacity: 0;position: absolute; margin-top: 0; left: 0; display:none; min-width: 170px; font-size: 0.9em;}
nav ul li:hover > ul, ul li ul:hover {visibility: visible; opacity: 1; display: block;}
nav ul li ul li {background-color: #735043; border: 1px solid #513021; border-width: 0 1px 1px 1px; clear: both; width: 100%;}
nav ul li ul li:first-child{border-width: 1px;}
nav > ul > li {border: 1px solid #513021; border-width: 1px 0 1px 1px; background-color: #735043; background-image: linear-gradient(#513021, #735043); text-shadow: 0 -1px 0 #1735043; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 rgba(0, 0, 0, 0.5) inset, 0 1.25rem 0 rgba(255, 255, 255, 0.08) inset, 0 -1.25rem 1.25rem rgba(0, 0, 0, 0.3) inset, 0 1.25rem 1.25rem rgba(255, 255, 255, 0.1) inset; transition: all 0.2s linear 0s;}
nav > ul > li:hover{box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 rgba(0, 0, 0, 0.25) inset, 0 20px 0 rgba(255, 255, 255, 0.03) inset, 0 -20px 20px rgba(0, 0, 0, 0.15) inset, 0 20px 20px rgba(255, 255, 255, 0.08) inset;}
/* text */
.tiny {font-size: 9px;}
.small {font-size: 10px;}
.medium {font-size: 12px;}
.large{font-size: 15px;}
.xlarge {font-size: 18px;}
.xxlarge{font-size: 24px;}
.xxxlarge{font-size: 48px;}
.jumbo{font-size: 64px;}
.left-align {text-align: left!important;}
.right-align {text-align: right!important;}
.justify {text-align: justify!important;}
.center {text-align: center!important;}
.bold {font-weight: 500;}
.bolder {font-weight: 600;}
/* box model */
.border-0 {border: 0;}
.border {border: 1px solid #ddd;}
.border-top {border-top: 1px solid #ddd;}
.border-bottom {border-bottom: 1px solid #ddd;}
.border-left {border-left: 1px solid #ddd;}
.border-right {border-right: 1px solid #ddd;}
.border-vertical {border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.border-horizontal {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.topbar {border-top: 6px solid #ddd;}
.bottombar {border-bottom: 6px solid #ddd;}
.leftbar {border-left: 6px solid #ddd;}
.rightbar {border-right:6 px solid #ddd;}
.section, .code {margin-top: 16px; margin-bottom: 16px;}
.margin {margin: 16px;}
.margin-top{margin-top: 16px;}
.margin-bottom{margin-bottom: 16px;}
.margin-left {margin-left: 16px;}
.margin-right{margin-right: 16px;}
.padding-0 {padding: 0;}
.padding-small {padding: 4px 8px;}
.padding{padding: 8px 16px;}
.padding-large{padding: 12px 24px;}
.padding-16 {padding-top: 16px; padding-bottom: 16px;}
.padding-24{padding-top: 24px; padding-bottom: 24px;}
.padding-32 {padding-top: 32px; padding-bottom: 32px;}
.padding-48{padding-top: 48px; padding-bottom: 48px;}
.padding-64 {padding-top: 64px; padding-bottom: 64px;}
.left {float: left;}
.right{float: right;}
.button:hover {color: #000; background-color: #ccc;}
.transparent, .hover-none:hover {background-color: transparent;}
.hover-none:hover {box-shadow: none;}
/* comments */
.comments .comment_header {display: flex; justify-content: space-between; border-bottom: 2px solid #333; padding: 15px 0; margin-bottom: 10px; align-items: center;}
.comments .comment_header .total {}
.comments .comment_header .write_comment_btn {margin: 0;}
.comments .write_comment_btn, .comments .write_comment button, .comments .write_comment_btn, .comments .reply_comment_btn {display: inline-block; text-decoration: none; line-height: 38px;}
.comments .write_comment_btn:hover, .comments .write_comment button:hover, .comments .comment_header .write_comment_btn:hover {color: #fff !important;}
.comments .write_comment {display: none; padding: 20px 0 10px 0;}
.comments .write_comment textarea {width: 100%; padding: 10px; border: 1px solid #666; border-radius: 5px; height: 150px; margin-top: 10px;}
.comments .write_comment input {display: block; width: 250px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-top: 10px;}
.comments .write_comment button {margin-top: 10px;}
.comments .comment {padding: 10px; border: 1px solid #333; border-width: 1px 1px 0 1px;}
.comments .comment:nth-child(odd) {background: #444;}
.comments .comment:nth-child(even) {background: #555;}
.comments .comment:last-child {border-width: 1px;}
.comments .comment .name {display: inline; padding: 0 5px 3px 0; margin: 0; font-weight: 600;}
.comments .comment .date {}
.comments .comment .content {padding: 5px 0 5px 0;}
.comments .comment .reply_comment_btn {display: inline-block; text-decoration: none; margin-bottom: 10px;}
.comments .comment .replies {padding-left: 0px;}
.comments .comment .replies .comment {padding-left: 30px; border-width: 1px 0 0 0; background: transparent;}
/* colours */
body {background-color: #000; background-image: url("../files/leather2.png"); background-size: 250px 250px; background-position: center top; min-height: 100%;}
h1, h2 {color: #957265;}
#myHeader {background-color: #000000; color: #333333; height: 150px; background-image: url("../files/Skyrimbg.webp"); Background-size: cover; background-position: right bottom; background-repeat: no-repeat; position: relative; box-shadow: 20px 0px 50px 5px #000, 0px -20px 50px 5px #000; border: 1px solid #444; border-width: 0 1px 0 1px;}
#myHeader h1 {font-weight: 600; font-size: 4em; line-height: 1em; color: #eee; text-shadow: -1px 1px 0 #222, 1px 1px 0 #222, 2px 2px 2px #222; text-transform: none;}
#myContent {background: #111; background-image: url("../files/leather2.png"); background-size: 200px 200px; min-height: 450px; padding: 20px; color: #bbb; box-shadow: 20px 20px 50px 5px #000, -20px -20px 50px 5px #000; border: 2px solid #444; border-width: 1px 2px 2px 2px;}
#myContent.index{padding: 0;}
#myContent a {color: #957265;}
#myContent a:hover {color: #735043;}
#myContent .kofi img{width: 250px; margin: 20px 0;}
#myContent .login, #myContent form section.greyed {width: 300px; background-color: rgb(0,0,0,15%); border-width: 2px; border-style: solid; border-color: #111; padding: 0px 14px; margin: 20px 0 10px 20px;}
#myContent #login .section{margin: 0; padding: 10px 0;}
#myContent #login a {margin-left: 20px;}
#myContent form section.greyed {width: 400px; margin: 0 auto;}
#myContent #login label {display: inline-block; margin: 5px 0;}
#password, #confirm {width: 90%; display: inline-block; margin-right: 10px;}
.indexright {background-color: rgb(0,0,0,15%); border-width: 0 0 0 2px; border-style: solid; border-color: #444;}
.endhr {display: none;}
.bullet {font-size: 0.6em!important; color: #957265; line-height: 2; vertical-align: middle; display: inline-block; margin-right: 5px;}
#myContent .build{padding: 0 15px 0 0; margin: 20px 0 0 0; background-color: rgb(0,0,0,15%); border: 2px solid #111;}
#mycontent .build h2, #mycontent .build p{margin-top: 0; line-height: 1;}
#myContent .build img{width: 35%; margin-right: 20px; border-right: 2px solid #111;}
#myContent img.buildimage{border: 2px solid #111;}
#myContent .perks {background-color: rgb(0,0,0,15%); border: 2px solid #111; padding: 0 10px;}
section.shout1, section.shout2 {padding: 10px; margin-bottom: 15px; background-color: rgb(0,0,0,15%); border-width: 2px; border-style: solid; border-color: #111;}
span.mage{color: #2a6292;}
span.warrior {color: #b62822;}
span.rogue {color: #48bb42;}
td.mage{background-color: #115;}
td.rogue{background-color: #151;}
td.farming{background-color: #402010;}
.video iframe {border: 2px solid #111;}
.schoolicon {width: 30px; margin-right: 5px;}
#myFooter {background-color: transparent; color: #ccc;}
#myFooter a:hover {color: #735043;}
#myFooter .links {padding-top: 10px; font-size: 0.8em;}
#myFooter .copy {padding-top: 5px; font-size: 0.8em;}