* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; 
margin-left:15px;

}

.masonry {
  /*background: #EEE;*/
  max-width: 100%;
  /*max-width: 1390px;*/


  margin: 0px auto;

  /* margin from the header */
  /*margin-top: 50px !important;*/
  margin-top: 120px;
  /*background:red;*/
  width: 1600px;
}

.masonry .item {
  width:  60px;
  height: 60px;
  float: left;
  background: #333333;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;

  margin-bottom: 18px;
  border: 10px solid transparent;
}

.item.w2 { width:  12px; }
.item.w3 { width:  180px; }
.item.w4 { width:  240px; }
.item.w5 { width:  300px; }

.item.h2 { height: 100px; }
.item.h3 { height: 130px; }
.item.h4 { height: 180px; }
.item.h5 { height: 400px; }

.item{
	text-align: center;
}
/*
.item:hover{
	box-shadow: 0px 0px 20px #336699;
}
*/

.item {
	position: relative;
	overflow: hidden;
}

.item .image{
	/*border:1px solid #6699CC;*/

	/*
	border-top:1px solid #666666;
	border-bottom:1px solid #666666;
	*/

	width: 250px;
	height: 220px;
	margin: 0 auto;
	overflow: hidden;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;

    max-width:100%;
    max-height:100%;

    /* fix the image white border */
    margin-top: 80px;
    height: 250px;

    overflow: hidden;
    /*background:#444444;*/

    background: -webkit-radial-gradient(circle, #444444, #444444, #333333, #333333); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, #444444, #444444, #333333, #333333); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, #444444, #444444, #333333, #333333); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, #444444, #444444, #333333, #333333); /* Standard syntax (must be last) */
}
.item .image img{
	top: -45px;
}
.item .clue{
	position: absolute;
	top: 20px;
	left: 20px;
}
.item .question{
	/*background:red;*/
	color: #FFFFFF;
	/*height: 50px;*/
	z-index: 0;
	/*line-height: 20px;*/
	position: absolute;
	right:	50px;
	left:	50px;
	top:	20px;

	width: 130px;
	margin: 0 auto;

}
/* hide fullscreen */
.fullscreen{
    display: none !important;
}
.item .fullscreen{
	position: absolute;
	top: 20px;
	right: 20px;
}
.item .fullscreen img{
	width: 16px;
}
.item input{
	position: absolute;
	bottom: 20px;
	left: 25px;
	width: 245px;

	text-transform: lowercase;
	text-align: center;

	/*
	border: 1px solid #CCCCCC;
	*/
	padding-bottom: 5px;
	font-size: 1em;
	color: #FFFFFF;

	/*
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    */

	outline:none;
	border: 0px;
	background: transparent;
    border-bottom: 1px solid #FFFFFF;
}


.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;

    /* no select */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

    cursor: pointer;

	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:50px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}.button:hover {
	background-color:#dfdfdf;
    text-decoration: none;
}.button:active {
	position:relative;
	top:1px;
    text-decoration: none;
}
/* This button was generated using CSSButtonGenerator.com */

header{
    background:#333333;
    /*background:#FFFFFF;*/
    height:70px;
    top: 0px;
    line-height:50px;
    text-align:center;
	position:fixed;
	width: 100%;
	right: 0px;

	display: block;
	z-index: 999;

	/* add glow */
	-webkit-box-shadow: 0px 0px 10px 5px #999999;
	-moz-box-shadow: 0px 0px 10px 5px #999999;
	box-shadow: 0px 0px 10px 5px #999999;
}
header ul{
    margin:0px auto;
    margin-top: 10px;
    padding:0px;
    list-style: none;
}
header li{
    display:inline;
    background: #FFFFFF;
    /*background:@pageBGcolor;*/
    /*padding: 5px;*/
    margin: 5px;

	padding: 15px;

    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
}
.score{
	font-weight: bold;
}

.imagelightbox
{
    position: fixed;
    z-index: 10000;
}
.normal{
	position: relative !important;
	z-index: initial !important;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 9999;

    display: none;
}

header .social *{
vertical-align: middle;

}

.perc{
    color:#FFD700;
}
.proximity{
    color: #FFFFFF;
}
.correct{
    border: 10px solid #00CC33 !important;
}


.progressBar{
    display: none;

    max-width: 100%;

    background-color: #eee;
    padding: 2px;
    margin: .6em 0;
    border: 1px #000 double;
    clear: both;
}

.midBar{
    background: #A1C969;
    height: 15px;
    width: 40%;
    max-width: 100%;
    float: left;
}

.innerBar{
    height: 15px;
    width: 100%;
    overflow: hidden;
    background-image: url(../img/progress.gif);
    background-repeat: repeat-x;

    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    filter: alpha(opacity=25);
}

#socialbuttons {
  width: 450px ;
  margin-left: auto ;
  margin-right: auto ;
  margin-bottom:-94px;
 margin-top:98px;
}