/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/
/** http://stackoverflow.com/a/23729574/247893 */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 18, 2015 */
@font-face {
  font-family: 'helvetihandmedium';
  src: url('/fonts/helvetihand-webfont.eot');
  src: url('/fonts/helvetihand-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/helvetihand-webfont.woff2') format('woff2'), url('/fonts/helvetihand-webfont.woff') format('woff'), url('/fonts/helvetihand-webfont.ttf') format('truetype'), url('/fonts/helvetihand-webfont.svg#helvetihandmedium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hand_drawn_shapesregular';
  src: url('/fonts/hand_drawn_shapes-webfont.eot');
  src: url('/fonts/hand_drawn_shapes-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/hand_drawn_shapes-webfont.woff2') format('woff2'), url('/fonts/hand_drawn_shapes-webfont.woff') format('woff'), url('/fonts/hand_drawn_shapes-webfont.ttf') format('truetype'), url('/fonts/hand_drawn_shapes-webfont.svg#hand_drawn_shapesregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  height: 100%;
}
body {
  background-color: transparent;
  color: #333333;
  font-family: 'helvetihandmedium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  min-height: 900px;
  height: 100%;
  position: relative;
  font-size: 16px;
  line-height: 120%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}
#main-wrapper {
  width: 650px;
  margin: 0 auto;
  padding-top: 200px;
  position: relative;
}
#main-wrapper > header {
  background: url('/img/scroll-top.png') no-repeat;
  width: 650px;
  height: 110px;
  position: relative;
}
#main-wrapper > header #top-logo {
  display: inline-block;
  background: url('/img/logo.png') no-repeat;
  width: 380px;
  height: 200px;
  position: absolute;
  top: -110px;
  left: 125px;
}
#main-wrapper > main {
  background: url('/img/scroll-middle.png') no-repeat;
  width: 650px;
  height: 249px;
  height: auto;
  min-height: 249px;
  background-size: 650px 100%;
}
#main-wrapper > main #main-content {
  padding: 0 110px;
  position: relative;
  top: 40px;
  line-height: 100%;
}
#main-wrapper > footer {
  background: url('/img/scroll-bottom.png') no-repeat;
  width: 650px;
  height: 149px;
}
#main-wrapper #site-footer {
  padding: 0 150px;
  color: white;
  text-align: center;
}
#main-wrapper #site-footer a {
  color: white !important;
  text-decoration: none;
}
#main-wrapper #site-footer a:hover {
  text-decoration: underline;
}
footer#bottom-right-footer {
  display: inline-block;
  background: url('/img/cloud.png') no-repeat;
  width: 453px;
  height: 127px;
  position: fixed;
  right: 0;
  bottom: 0;
  padding-top: 75px;
  padding-right: 0;
}
header#top-right-header {
  display: inline-block;
  background: url('/img/cloud-top-right.png') no-repeat;
  width: 289px;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  padding-top: 15px;
  padding-right: 20px;
  z-index: 200000;
}
header#main-top-right-header {
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 15px;
  padding-right: 20px;
  z-index: 200000;
  color: #ffffff;
}
.nav-container ul.nav {
  list-style: none;
}
.nav-container ul.nav li:first {
  margin-left: 0 !important;
}
.nav-container ul.nav > li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  border-left: 1px solid #ffffff;
}
.nav-container ul.nav > li:first-child {
  border-left: none;
}
.nav-container ul.nav > li a {
  font-family: 'hand_drawn_shapesregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16pt;
  color: #ffffff;
  height: 40px;
  line-height: 28px;
  text-decoration: none;
  background-color: transparent !important;
}
.nav-container ul.nav > li a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.nav-container ul.nav > li a:active {
  color: #ffffff;
}
.nav-container ul.nav.nav-cloud {
  padding-right: 10px;
  text-align: right;
}
.nav-container ul.nav.nav-cloud li {
  border: none !important;
  margin-left: 30px;
}
.nav-container ul.nav.nav-cloud li a {
  font-size: 20pt;
  color: #023b44;
  text-decoration: none !important;
}
.nav-container ul.nav.nav-cloud li a:hover {
  color: #228791;
}
.nav-container ul.nav.nav-cloud li a:active {
  color: #011011;
}
.form-horizontal .form-group {
  text-align: center;
}
.form-horizontal .form-group .help-block {
  text-align: right;
}
.form-horizontal .form-group input,
.form-horizontal .form-group select,
.form-horizontal .form-group textarea {
  text-align: center;
  color: #3a281c;
  border: none;
  outline: none;
  background: transparent url("/img/stippled-line.png") repeat-x bottom center;
  /* Disable annoying yellow background on auto-fill */
  -webkit-appearance: none;
}
.form-horizontal .form-group input:-webkit-autofill,
.form-horizontal .form-group select:-webkit-autofill,
.form-horizontal .form-group textarea:-webkit-autofill {
  background: transparent url("/img/stippled-line.png") repeat-x bottom center;
}
.form-horizontal .form-group input::-webkit-input-placeholder,
.form-horizontal .form-group select::-webkit-input-placeholder,
.form-horizontal .form-group textarea::-webkit-input-placeholder {
  color: #efe5c7;
}
.form-horizontal .form-group input:-moz-placeholder,
.form-horizontal .form-group select:-moz-placeholder,
.form-horizontal .form-group textarea:-moz-placeholder {
  color: #efe5c7;
}
.form-horizontal .form-group input::-moz-placeholder,
.form-horizontal .form-group select::-moz-placeholder,
.form-horizontal .form-group textarea::-moz-placeholder {
  color: #efe5c7;
}
.form-horizontal .form-group input:-ms-input-placeholder,
.form-horizontal .form-group select:-ms-input-placeholder,
.form-horizontal .form-group textarea:-ms-input-placeholder {
  color: #efe5c7;
}
.form-horizontal .form-group input:focus,
.form-horizontal .form-group select:focus,
.form-horizontal .form-group textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.form-horizontal .form-group.has-error.field-registrationform-username,
.form-horizontal .form-group.has-error.field-registrationform-email {
  padding-top: 10px;
  background: transparent url("/img/warning-indicator.png") no-repeat right top;
}
#index-teaser-video {
  margin-bottom: 15px;
}
.index-buttons {
  margin: auto;
  height: 160px;
  width: 265px;
  position: relative;
}
.button {
  display: inline-block;
  font-size: 11pt;
  font-family: 'helvetihandmedium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #3a281c !important;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  border: 0;
  outline: none;
  position: relative;
}
.button.button-disabled {
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  filter: alpha(opacity=30);
  cursor: default;
  background-position: 0 0 !important;
}
.button.button-disabled span {
  top: 0 !important;
}
.button .button-p {
  display: block;
  margin-top: 6px;
}
.button .button-title {
  display: block;
  font-family: 'hand_drawn_shapesregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20pt;
  margin-top: 10px;
}
.button.button-text {
  background: url('/img/text-button-265.png') no-repeat 0 0;
  width: 265px;
  height: 99px;
  font-weight: bold;
  font-size: 20pt;
  text-align: center;
  font-family: 'hand_drawn_shapesregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
}
.button.button-text:hover {
  background-position: -265px 0;
}
.button.button-text:hover span {
  top: 30px;
}
.button.button-text:active {
  background-position: -530px 0;
}
.button.button-text:active span {
  top: 55px;
}
.button.button-text span {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
}
.button.button-online .button-title,
.button.button-android .button-title,
.button.button-ios .button-title,
.button.button-online .button-p,
.button.button-android .button-p,
.button.button-ios .button-p {
  position: absolute;
  bottom: 45px;
  width: 100%;
}
.button.button-online:hover .button-title,
.button.button-android:hover .button-title,
.button.button-ios:hover .button-title,
.button.button-online:hover .button-p,
.button.button-android:hover .button-p,
.button.button-ios:hover .button-p {
  bottom: 55px;
}
.button.button-online:active .button-title,
.button.button-android:active .button-title,
.button.button-ios:active .button-title,
.button.button-online:active .button-p,
.button.button-android:active .button-p,
.button.button-ios:active .button-p {
  bottom: 20px;
}
.button.button-online {
  background: url('/img/unity-webplayer-265.png') no-repeat 0 0;
  width: 265px;
  height: 130px;
  padding-left: 100px;
}
.button.button-online .button-title {
  bottom: 55px !important;
  width: 165px;
}
.button.button-online:hover {
  background-position: -265px 0;
}
.button.button-online:hover .button-title,
.button.button-online:hover .button-p {
  bottom: 65px !important;
}
.button.button-online:active {
  background-position: -530px 0;
}
.button.button-online:active .button-title,
.button.button-online:active .button-p {
  bottom: 40px !important;
}
.button.button-android,
.button.button-ios {
  width: 125px;
  height: 161px;
  padding-top: 55px;
}
.button.button-android:hover,
.button.button-ios:hover {
  background-position: -125px 0;
}
.button.button-android:active,
.button.button-ios:active {
  background-position: -250px 0;
}
.button.button-android {
  background: url('/img/android-125.png') no-repeat 0 0;
  position: absolute;
  bottom: 0;
  right: 0;
  /* RIGHT */
}
.button.button-ios {
  background: url('/img/ios-125.png') no-repeat 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  /* LEFT */
}
.character {
  position: absolute;
  z-index: -10;
}
.character.character-captain-hack {
  display: inline-block;
  background: url('/img/captain-hack.png') no-repeat;
  width: 148px;
  height: 269px;
  top: 350px;
  left: -70px;
}
.character.character-miss-loot {
  display: inline-block;
  background: url('/img/miss-loot.png') no-repeat;
  width: 194px;
  height: 464px;
  top: 210px;
  right: -130px;
}
.character-avatar {
  background: url("/img/hack-l33t-80.png");
  display: inline-block;
  width: 80px;
  height: 80px;
  border: none;
}
.character-avatar:focus {
  outline: 0;
}
.character-avatar.character-avatar-captain-hack {
  background-position: 0px 0;
}
.character-avatar.character-avatar-captain-hack.character-avatar-selected {
  background-position: -80px 0;
}
.character-avatar.character-avatar-miss-loot {
  background-position: -160px 0;
}
.character-avatar.character-avatar-miss-loot.character-avatar-selected {
  background-position: -240px 0;
}
#player-container {
  width: 1024px;
  margin: auto;
}
#player-container #unity-player-container {
  width: 100%;
  height: 100%;
  background-color: #6495ED;
}
#top-left-debug {
  position: fixed;
  top: 0;
  left: 0;
  padding: 5px;
  background: #333333;
  color: #ffffff;
  font-family: Consolas, Courier New, monospace;
  font-size: 12px;
}
#privacy-policy {
  height: 340px;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 150%;
}
#site-footer-nav ul {
  list-style-type: none;
  text-align: center;
}
#site-footer-nav ul li {
  display: inline-block;
  color: #ffffff;
}
#site-footer-nav ul li.nav-separator {
  content: "|";
  margin: 5px 0;
}
#site-footer-nav ul li a {
  color: #ffffff;
}
#site-footer-nav ul li a:hover,
#site-footer-nav ul li a:visited,
#site-footer-nav ul li a:active {
  color: #ffffff;
}
#site-footer-nav ul li a:hover {
  text-decoration: underline;
}
.side-banner {
  background: url("/img/side-banner.png") no-repeat;
  width: 271px;
  height: 146px;
  display: table;
  position: fixed;
  left: 0;
  top: 200px;
  z-index: 200000;
}
.side-banner h1,
.side-banner h2,
.side-banner h3,
.side-banner h4,
.side-banner h5 {
  vertical-align: middle;
  display: table-cell;
  padding: 40px 50px 40px 15px;
  text-align: center;
  line-height: 100%;
}
.side-banner h1 {
  font-size: 20pt;
}
#language-selector {
  display: inline-block;
  position: relative;
}
#language-selector ul {
  position: absolute;
  right: -19px;
  padding-right: 19px;
  top: 40px;
  padding-left: 0;
  list-style: none;
  display: none;
}
#language-selector:hover ul {
  display: inline-block;
}
.language {
  display: inline-block;
  width: 50px;
  height: 40px;
  margin-left: 10px;
}
.language.language-da {
  background: url("/img/language/dk/up.png") no-repeat;
}
li.active .language.language-da,
.language.language-da:hover,
.language.language-da.active {
  background: url("/img/language/dk/down.png") no-repeat;
}
.language.language-en {
  background: url("/img/language/en/up.png") no-repeat;
}
li.active .language.language-en,
.language.language-en:hover,
.language.language-en.active {
  background: url("/img/language/en/down.png") no-repeat;
}
.language.language-no {
  background: url("/img/language/no/up.png") no-repeat;
}
li.active .language.language-no,
.language.language-no:hover,
.language.language-no.active {
  background: url("/img/language/no/down.png") no-repeat;
}
.language.language-se {
  background: url("/img/language/se/up.png") no-repeat;
}
li.active .language.language-se,
.language.language-se:hover,
.language.language-se.active {
  background: url("/img/language/se/down.png") no-repeat;
}
.language.language-de {
  background: url("/img/language/de/up.png") no-repeat;
}
li.active .language.language-de,
.language.language-de:hover,
.language.language-de.active {
  background: url("/img/language/de/down.png") no-repeat;
}
#gameContainerWrapper {
	height: 100%;
  max-width: 133vh;
  margin: auto;
/*  width: 1024px;
  height: 768px;
  margin: 10px auto 0 auto;*/
}
#gameContainerWrapper #gameContainer {
  width: 100%;
  height: 0;
  padding-top: 75% !important; /*Aspect ratio 4:3*/
}
#gameContainerWrapper #gameContainer > canvas{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#fullscreenWrapper {
  width: 1024px;
  margin: 10px auto 0 auto;
  text-align: right;
}
#table-codebits td.codebit {
  text-align: center;
  font-weight: bold;
}
#table-codebits td {
  border-top: 1px solid #333 !important;
}
#table-codebits tr:first-child td {
  border-top: 0 !important;
}
.ss-codebits {
  /* Z:\Projects\Coding_Pirates\Graphics\Website\ASSETS\CodebitsSprites/Codebits\CODEBITS.png */
  display: inline-block;
  background: url("/img/spritesheet.png") no-repeat 0 0;
}
.ss-codebits.ss-codebits-goto {
  /* CODEBITS_goto.png */
  background-position: -561px -109px;
  width: 74px;
  height: 80px;
}
.ss-codebits.ss-codebits-goto.disabled {
  background-position: -561px -109px !important;
}
.ss-codebits.ss-codebits-if-in-front {
  /* CODEBITS_if_in_front.png */
  background-position: -479px -197px;
  width: 90px;
  height: 51px;
}
.ss-codebits.ss-codebits-if-in-front.disabled {
  background-position: -479px -197px !important;
}
.ss-codebits.ss-codebits-if-in-inventory {
  /* CODEBITS_if_in_inventory.png */
  background-position: -296px -109px;
  width: 92px;
  height: 91px;
}
.ss-codebits.ss-codebits-if-in-inventory.disabled {
  background-position: -296px -109px !important;
}
.ss-codebits.ss-codebits-if-on {
  /* CODEBITS_if_on.png */
  background-position: -1px -190px;
  width: 90px;
  height: 61px;
}
.ss-codebits.ss-codebits-if-on.disabled {
  background-position: -1px -190px !important;
}
.ss-codebits.ss-codebits-loop {
  /* CODEBITS_loop.png */
  background-position: -93px -190px;
  width: 112px;
  height: 56px;
}
.ss-codebits.ss-codebits-loop.disabled {
  background-position: -93px -190px !important;
}
.ss-codebits.ss-codebits-see-1 {
  /* CODEBITS_see_1.png */
  background-position: -296px -1px;
  width: 272px;
  height: 106px;
}
.ss-codebits.ss-codebits-see-1.disabled {
  background-position: -296px -1px !important;
}
.ss-codebits.ss-codebits-see-2 {
  /* CODEBITS_see_2.png */
  background-position: -1px -1px;
  width: 293px;
  height: 187px;
}
.ss-codebits.ss-codebits-see-2.disabled {
  background-position: -1px -1px !important;
}
.ss-codebits.ss-codebits-turn {
  /* CODEBITS_turn.png */
  background-position: -479px -109px;
  width: 80px;
  height: 86px;
}
.ss-codebits.ss-codebits-turn.disabled {
  background-position: -479px -109px !important;
}
.ss-codebits.ss-codebits-wait {
  /* CODEBITS_wait.png */
  background-position: -570px -1px;
  width: 52px;
  height: 87px;
}
.ss-codebits.ss-codebits-wait.disabled {
  background-position: -570px -1px !important;
}
.ss-codebits.ss-codebits-walk {
  /* CODEBITS_walk.png */
  background-position: -390px -109px;
  width: 87px;
  height: 90px;
}
.ss-codebits.ss-codebits-walk.disabled {
  background-position: -390px -109px !important;
}