html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  
  font: inherit;
  vertical-align: baseline;
  outline: none;
} 

html {
  font-size: 100%;
}

body {
  /*
  background-image: url("../assets/ozadje_1024.jpg");
  background-repeat: no-repeat;
  background-size: 64rem 48rem;
  */
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background-repeat: repeat-y;*/
  /*boblak - disable touch for iOS device*/
  -webkit-user-select: none;
}

#wrapper {
  width: 64rem;
  height: 48rem;
  margin: 0 auto;
  display: inline-block;

  background-image: url("../assets/ozadje_1024.jpg");
  background-repeat: no-repeat;
  background-size: 64rem 48rem;

  position: absolute;
  left: 0;
  right: 0;
}

/*
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
*/

#puzzle {
  /*border: 1px solid black;*/
  border-top: 2px solid black;
  border-left: 2px solid black;
  float: left;

  /*margin: 200px 10px 10px 194px;*/

  position: absolute;
  top: 7.875rem;
  left: 8.4375rem;
}

#puzzle div {
  width: 100%;
  /*width: 560px;*/
  margin: 0 auto;
  padding: 0 auto;
}


#puzzle .puzzleSquare {
  height: 2.625rem;
  width: 2.625rem;
  text-transform: uppercase;
  background-color: white;
  border: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  /*
  border-right: 0.0625rem solid black;
  border-bottom: 0.0625rem solid black;
  */
  font: 1rem sans-serif;
  margin: 0px;
  padding: 0px;

  outline: none;
}

#puzzle .puzzleSquare:focus {
  outline: none;
}


button::-moz-focus-inner {
  border: 0;
}

/* indicates when a square has been selected */
#puzzle .selected {
  background-color: orange;
}

/* indicates that the square is part of a word that has been found */ 
#puzzle .found {
  background-color: blue;
  color: white;
}

#puzzle .solved {
  background-color: purple;
  color: white;
}

/* indicates that all words have been found */
#puzzle .complete {
  /*background-color: green;*/
  background-color: gray;
}

/**
* Styles for the word list
*/
#words {
  padding-top: 1.25rem;
  -moz-column-count: 1;
  -moz-column-gap: 1.25rem;
  -webkit-column-count: 1;
  -webkit-column-gap: 1.25rem;
  column-count: 1;
  column-gap: 1.25rem;
  width: 18.75rem;

  visibility: collapse;
}

/* boblak */
#words {
  position: relative;
  top: 8.5rem;
  left: 47.5rem;
}

#words ul {
  list-style-type: none;
}

#words li {
  padding: 0.1875rem 0;
  font-size: 1.1rem;
  font-family:  sans-serif;
  /*font: 10px sans-serif;*/
}

/* indicates that the word has been found */
#words .wordFound {
  text-decoration: line-through;
  color: red;
}

/**
* Styles for the button
*/
#solve {
  margin: 0 1.875rem;
  visibility: collapse;
}



/*  ---------------------- Weights ---------------------- */

#weight-one {

  display: block;
  background: url('../assets/utez_lahka_siva.png') no-repeat center;
  width: 3.5rem;
  height: 6.25rem;
  text-decoration: none;
  position: absolute;
  top: 0.12rem;
  right: 9.375rem;
}


#weight-two {

  display: block;
  background: url('../assets/utez_srednja_modra.png') no-repeat center;
  width: 3.5rem;
  height: 6.25rem;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 6.6rem;
}