html,body{
max-width: 100%;
overflow-x: hidden;
}
*, *:before, *:after{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 50px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.43;
color: #333;
}
p {
margin: 0;
padding: 0;
}
::selection {
color: #ededed;
background: black;
}
::-moz-selection { /* Code for Firefox */
color: #ededed;
background: black;
}
.navbar-brand img {
height: 100%;
}
.rheader {
font-weight: bold;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
}
.imbloc {
float: left;
height: 100%;
width: 33%;
max-width: 200px;
}
.imbloc p{
visibility: hidden;
}
.tbloc {
float: left;
height: 100%;
width: 47%;
position: relative;
}
.larger-font {
font-size: 20px;
}
.pbloc {
float: left;
height: 100%;
width: 20%;
position: relative;
}
.clee {
width: 90%;
color: #dadde1;
margin: 15px auto;
height: 20px;
border-radius: 10px;
}
.clee + .flip-container {
border-top: 1px solid #cccccc;
}
.blue-class {background-color: #2F343B;}
.red-class {background-color: #703030;}
.yellow-class {background-color: #E3CDA4; color: #2F343B;}
.front {
height: 100px;
margin: 0;
border-bottom: 1px solid #cccccc;
}
.front:hover {
background-color: #f9f3e8; /*#fffceb;*/
}
.front-top-bar {border-top: 1px solid #cccccc;}
.front p {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
}
.card-point-indicator {
float: left;
height: 100%;
width: 20%;
position: relative;
}
.img-responsive-t{
display: block;
height: 100%;
margin: 0 auto;
padding: 10px;
}
.secondary-content-holder, .secondary-content-holder-2 {
position: relative;
padding: 15px;
min-height: 300px;
width: 100%;
background-color: #f9fafc;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,.50);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
}
h1 {
font-size: 20px;
text-align: center;
margin: 0 0 5px 0;
padding: 0;
font-weight: 500; /*300*/
}
h2{
font-size: 10px;
text-align: center;
margin: 5px 0px;
padding: 0px;
font-weight: 300;
}
h2.backline {
position: relative;
z-index: 1;
}
h2::before {
content:"";
border-top: 1px solid black;
position: absolute;
top: 50%; left: 0; right: 0; bottom: 0;
width: 100%;
z-index: -1;
}
h2 span {
background: #f9fafc;
padding: 0 10px;
}
h3 {
font-size: 16px;
margin: 15px 0 10px 0;
padding: 0px;
font-weight: 400; /*300*/
text-align: center;
/*
position: absolute;
bottom: 0px;
right: 0px;
*/
}
h4{
margin-top: 5px;
}
.blocus {
width: 50%;
float: left;
}
h6 {
font-size: 13px;
font-weight: normal;
margin: 10px 0 20px 0;
/*text-align: center;*/
}
.floating-content-holder, .small-hider{
display: none;
}
.back {
/*width: 90%;*/
height: 0; /**/
margin: 0 10px;
margin-bottom: 20px;/**/
background-color: #f5f5f5;
border: #e3e3e3 1px solid;/**/
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 7px 9px -7px rgba(0,0,0,.25) inset;
-webkit-box-shadow: 0 7px 9px -7px rgba(0,0,0,.25) inset;
overflow: hidden;
/*transition: height 1s ease-out;*/
}
.backim img{
width: 100%;
vertical-align: middle;
}
.margin-spacer {
margin: 19px;
}
.cave-in{
display: none;
}
.clear-floats {
clear: both;
}
.backim {
width: 100%;
float: left;
margin-bottom: 19px;
box-shadow: 0px 0px 5px rgba(0,0,0,.50);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
}
.small-challenge-desc{
width: 100%;
float: left;
}
@media only screen and (min-width: 650px) {
.backim {
width: 40%;
float: left;
}
.small-challenge-desc{
width: 58%;
margin-left: 2%;
float: left;
}
h4{
margin-top: 19px;
}
}
@media only screen and (min-width: 1100px) {
.small-hider {
display: block;
}
.floating-content-holder{
display: block;
}
.big-hider {
display: none;
}
.rheader {
display: none;
}
body {
background-color: #f9fafc;
background-image: url("/images/backgrounds/gplaypattern.png");
}
.black-overlay {
position: fixed;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.1;
filter: alpha(opacity=10); /* For IE8 and earlier */
z-index: 1;
}
.above {
padding: 0px;
margin: 0 auto;
position: relative;
width: 100%;
max-width: 1350px;
z-index: 10;
}
.floating-content-holder {
position: fixed;
width: 29%;
min-width: 300px;
max-width: 400px;
height: 100%;
padding-top: 51px;
/* overflow-y: scroll; */
/* overflow: -moz-scrollbars-none; */
-ms-overflow-style: none;
overflow: auto;
transition: height 0.15s ease-out;
/*
background-color: white;
border-right: solid #cccccc 1px;
box-shadow: 0px 0px 7px 0px rgba(0,0,0,.75);
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,.75);
*/
margin-top: -50px;
}
/* Makes The ScrollBar for the Main Challenge Invisible, but still active if needed */
.floating-content-holder::-webkit-scrollbar {
width: 0px;
display: none;
background: transparent; /* make scrollbar transparent */
}
.main-picture-holder {
--height: 300px;
width: 92%;
margin: 15px auto;
background-color: #ededed;
background-size: 100% 100%;
/*border-radius: 10px;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-image: url("images/challenge_pictures/sample_challenge.jpg");
background-size: cover;
}
.main-picture-holder img{
width: 100%;
vertical-align: middle;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,.50);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
}
.secondary-content-holder, .secondary-content-holder-2 {
width: 94%;
margin: 15px auto;
}
/* Holds All Individual Challenges */
.card-holder-bracer {
float: left;
width: 29%;
height: 100px;
max-width: 400px;
/*background-color: black;*/
}
.card-holder-section {
float: left;
width: 50%;
padding: 15px 15px 100px;
min-width: 700px;
/*max-width: 700px;*/
}
.clee {
display: none;
}
/* Needed for 2nd and 3rd tier */
.ct-margin-upper {
margin-top: 15px;
}
.flip-container {
float: left;
cursor: pointer;
z-index: 1;
}
.flip-container, .front{
width: 150px;
height: 150px;
}
.flipper {
height: 100%;
}
.front {
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
position: relative;
top: 0;
left: 0;
/*border: none;*/
border-right: 1px solid #cccccc;
margin: 0;
z-index: 2;
background-color: #f9fafc;
}
.back {
display: none;
}
.flip-container:hover .front {
width: 160px;
height: 160px;
z-index: 5;
/*
top: -25px;
left: -25px;
*/
box-shadow: 0px 0px 5px rgba(0,0,0,.50);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
background-color: #f9fafc;
}
.front p {
margin: 0;
position: static;
transform: translate(0, 0%);
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-o-transform: translate(0, 0%);
}
.border-boxer-nona {
opacity: 0.7;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
.red-line {border: 1px solid #703030; /*#b24949;*/}
.blue-line {border: 1px solid #305187;}
.gold-line {border: 1px solid #E3CDA4; /*#ffdd00*/}
.margin-spacer {
margin: 0px;
}
.cave-in{
display: block;
}
.img-responsive-t {
height: auto;
margin: 0;
padding: 0;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.challenge-title {
margin-top: 0%;
text-align: center;
font-size: 17px;
}
.card-point-indicator {
float: none;
height: auto;
width: auto;
font-size: 10px;
padding: 2px 5px;
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
background-color: #f9fafc;
}
.card-hash-indicator {
font-size: 10px;
padding: 2px 5px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: #f9fafc;
}
.flip-tester {
width: 200px;
height: 1000px;
background-color: black;
}
.clee + .flip-container {
border-top: none;
}
}