html{
    height:100%;
    background: #f0f9ff;
    background: -moz-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
    background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
    background: linear-gradient(to bottom, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );}

body {
        height:100%;  
        /*background: url(http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg);*/
        background:url(../img/footer-lc.png), url(../img/clouds-scatter.png);
        background-position: bottom center, top center;
        background-repeat: no-repeat, repeat-x;
        background-size:contain, auto;
        font-family: sans-serif;
    }

    .container {
        z-index:100;
        background: #FFF;
        margin-top: 40px;
        min-height: 88vh;
        border-radius: 12px;
    }
    
    section {
        visiblity: hidden;
        -webkit-transition: all 1200ms ease;
        opacity: 0;
        height: 0;
    }
    
    section.active-section {
        display: block;
        opacity: 1;
        visiblity: visible;
        height: auto;
    }
    
    #header {
        margin-top:15px;
        padding-right:20px;
    }
    #header h1 {
        margin-left:30px;
    }

    #header h1, h1.task{
        font-family: 'Patua One', serif;
    }


    footer {
        padding:1em;
        font-size:1.2em;
        color:#FFF;
        text-shadow: 2px 3px 1px #444;
    }
    .activity-text {
        display: block;
        margin: 2em auto;
        border: solid;
        padding:1em;
        font-size: 1.2em;
        line-height: 1.5em;
        padding-bottom:2em;
    }
    
    #infoBtn {

        font-size:40px;        
        color:#fbc429;
        cursor:pointer;
    }

    #infoBtn:hover {
        color:#fb8c29;
    }

    #header img {

    }
    
    span.word {
        cursor: pointer;
        position: relative;
        color: #46c;
        font-weight: 600;
		text-decoration: underline;
    }
    
    span.changed {
        color:#fb8c29!important;
    }

    #myModal input.active-word {
        text-align: center;
        
        margin:0 auto;
        margin-top:20px;
        margin-bottom:10px;
        line-height:1.1;
        font-weight:500;
        display:block;
        font-size:36px;
    }

    #myModal .group {
        width:80%;
        margin:0 auto;
        height:160px;
    }
    
.modal-body h1 {
	margin-top:5px;
	 font-family: 'Patua One', serif;
}
	
    #myModal .help {
        display: none;
        border: solid #999;
        padding: 30px;
        margin: 0 auto;
        width: 80%;
        position:relative;
    }
    
    .help:before {
        content: "?";
        position: absolute;
        width: 60px;
        height: 60px;
        border: solid;
        border-radius: 100%;
        background: #337ab7;
        color: #FFF;
        text-aligN: center;
        font-size: 3em;
        top: -35px;
        left: -30px;
        font-family: sans-serif;
    }
    
    .modal-header {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background: #fbc429;
        padding:5px 15px;
        
    }
.modal-title {
	font-family: 'Patua One', serif;
		font-size:22px;
}

    #answers {
        display: none;
    }

    .disabled {
        opacity:0.5;
    }


    .table a {
        color:#b71817;
        font-weight:600;
    }

    .table th {
        background:#FFF7E5;
    }

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

.helpCount {
    color:#cc2525;
}