.grid {
    width: 100%;
    padding:5px;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

 body .col2,.col1 {
    width: 50%;
    float: left;
    margin-bottom:5px;
  }

 body  .col1:after {
    width:5px;
    content:'';
    background:#999;
    display:block;
    height:100%;

    z-index:999;
    position:absolute;
    top:0px;
    right:0px;
  }


body .card input[type='text']:focus
{    outline: none;
    border-bottom:1px solid #03a9f4;
    transition : border 200ms ease-out;
    -webkit-transition : border 200ms ease-out;
}

body .card {
    width:512px;
    border-radius:2px;
    margin:60px auto;
    margin-top:60px;
    padding:20px 16px;
    background:white !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    max-height:580px;
}


body .card input[type='text'] {
    border:none;
    border-bottom:1px solid black;
    border-radius:0;
    padding:0;
    color:black;
}


body .card h3 {
    font-size:20px;
    color:#03a9f4;
    font-weight:normal;
}

body .panel .card h2 {
    color:#03a9f4;
}
#main {
    background:#eee;
}

#main .category {

    height:150px;
    color:#ccc;
    position: relative;
    font-size:12px;
    background-position: top center;
}


#main .category div {
    width:100%;
    position:absolute;
    bottom:0px;
    height:50px;
    padding:10px;
    background:red;
    line-height:30px;
    left:0px;
    color:white;
    font-size:18px;
}

.#main .category:nth-child(odd){

}

#main .category div:after {
    content:'>';
    position:absolute;
    right:20px;

}

/*.category:nth-child(odd) {
    background:#ff8a80;
}

.category:nth-child(even){
    background:yellow;
}*/

#question_view.animation-active {
    background:#ff8a80;
}

.stretch-in {
  -webkit-animation: stretchIn 300ms forwards;
  animation: stretchIn 300ms forwards;
  -webkit-transition-duration:300ms;
  transition-duration:300ms;
}

@-webkit-keyframes stretchIn {
    100% { -webkit-transform:scale(1) translate3d(0,0,0);}
}
@keyframes stretchIn {
    100% { transform:scale(1)  translate3d(0,0,0);}

}


.stretch-out {
  -webkit-animation: noTransition 300ms forwards;
  animation: noTransition 300ms forwards;
}


.view header.main_header {
    height:60px;
    line-height:60px;
    padding:0 20px;
    font-size:22px;
    background:#03a9f4;
}

body .view footer {
    background:#03a9f4;
    border-color:#03a9f4;
}

.darkTheme {
    background: #01579b !important;
}

.lightTheme{
    background: #81d4fa !important;
}

@media handheld, only screen and (max-width: 768px) {
    body .card {
        width:100%;
        margin:0 0;
    }

}


/** quiz question stuff */


#quiz h3 {
    z-index:2;
}
.questionTitle {
    padding: 15px 0px;
    font-size: 18px;
    font-weight: bold;
    border-top: 1px solid #999;
    z-index:2;
}

.answerList {

    list-style-type: none;
    overflow:hidden;
    position:relative;

}

.answerList li {
    padding:10px 10px;
    font-size:18px;
    margin:5px;

    z-index: 1;
    transform:translate3d(-10px,-200px,0) rotate(-45deg);
    -webkit-transform:translate3d(-10px,-200px,0) rotate(-45deg);
    visibility: hidden;
}

.answerList.active li {
    -webkit-animation: showListItem 500ms forwards;
    animation: showListItem 500ms forwards;
    animation-timing-function:cubic-bezier(0.265, 0.020, 0.775, 0.580);
    -webkit-animation-timing-function:cubic-bezier(0.265, 0.020, 0.775, 0.580);
    visibility: visible;
}

.answerList.active li:nth-of-type(2) {
    animation-delay:80ms;
    -webkit-animation-delay:80ms;
    transform:translate3d(-10px,-242px,0) rotate(-45deg);
    -webkit-transform:translate3d(-10px,-242px,0) rotate(-45deg);
}

.answerList.active li:nth-of-type(3) {
    animation-delay:160ms;
    -webkit-animation-delay:160ms;
    transform:translate3d(-10px,-284px,0) rotate(-45deg);
    -webkit-transform:translate3d(-10px,-284px,0) rotate(-45deg);
}

.answerList.active li:nth-of-type(4) {
    animation-delay:240ms;
    -webkit-animation-delay:240ms;
    transform:translate3d(-10px,-326px,0) rotate(-45deg);
    -webkit-transform:translate3d(-10px,-326px,0) rotate(-45deg);
}


.subtraction .answerList li {
    float: left;
    width: 46%;
    display: inline;
    height: 50%;
    text-align: center;
    border: 2px solid #ccc;
    transform:translate3d(0px,-100px,0);
    -webkit-transform:translate3d(0px,-100px,0);
    border-radius:0 !important;
}

.answerList.active li.response,.answerList.active li.pressed {
    background:#FFAE6B;
    -webkit-transition:background 200ms;
    transition:background 200ms;
    border-radius:10px;
}

.answerList.active li.wrong {
    background:#F94040;
    -webkit-transition:background 200ms;
    transition:background 200ms;
}

.answerList.active li.correct {
    background:#59D56E;
    -webkit-transition:background 200ms;
    transition:background 200ms;
    border-radius:10px;
}

@keyframes showListItem {
    to {transform:translate3d(0,0px,0)}
}

@-webkit-keyframes showListItem {
    to {-webkit-transform:translate3d(0,0px,0);}
}

.home,.home.pressed {
    background:url('images/home60.png') no-repeat !important;
    background-size:40px 40px !important;
    background-position: top center !important;
    line-height: 80px;

}

.transitionView {
    background:url('images/chalkboard.jpg') no-repeat;
    background-position:top center;
    width:100%;
    height:100%;
    background-size:100% 100% !important;
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    z-index:50;
}

.addition {
    background:#fff url('images/plus.png') no-repeat;
}

.subtraction {
    background:#fff url('images/minus.png') no-repeat;
}
.division {
    background:#fff url('images/divide2.png') no-repeat;
}

.multiplication {
 background:#fff url('images/multiply2.png') no-repeat;
}

.shapes {
 background:#fff url('images/triangle_stroked.png') no-repeat;
}
.colors {
 background:#fff url('images/circle.png') no-repeat;
}

.transitionView.active {
    display:block;
}

.transitionView.active ~ div, .transitionView.active ~ footer  {
    z-index:1 !important;
}


.answer {
    margin-top:10px;
    border-top: 1px solid #999;
    height:70px;
}

.answerArrow {
    background:white;
    width:50px;
    height:50px;
    border-radius:50px;
    border:1px solid #999;
    margin-top:16px;
    margin-right:10px;
    float:right;
    padding:22px 8px;
    line-height: 0px;
    font-weight:bold;
    -webkit-transition-duration:500ms;
    transition-duration:500ms;
    -webkit-transition-property:background rotate color opacity;
    transition-property:background rotate color opacity;
    opacity:0;
    font-size:30px;
}

.answerArrow.response {
    opacity:1;
}


.answerArrow.active {
    background:#03a9f4;
    color:white;
}