/* CSS Document */
html {
    position: relative;
    min-height: 100%;
}

body{
padding-top:70px;
margin-bottom:50px	
}

.navbar {
    position: relative;
    top: -70px;
}

.questionContainer {
    position: relative;
    top: -70px;
}

.slide{
display:none;
visibility:0;
-webkit-transition:all 600ms ease;	
}

.slide.active{
visibility:1;
display:block;	
}

.nav>li {
    position: relative;
    display: block;
    padding: 15px 15px;
	color:#706C6D;
}
h1{
    color: #337ab7;
    background-color: #eee;
    padding: 15px 0px !important;
}

.highlight{
	background-color: #337ab7;
    color: #fff!important;
    font-weight: bold;
}

.music_img img{
width:88%;
margin-top:2px;	
}

.music_img img.block {
width:80%;
margin-top:2px;	
}

#questionImage {
    margin-top: 100px;
}

/* Breaking a fraction */
.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
  	border-top: 1px solid #fff;
    display: block;
}

.drop-selector {
    z-index: 10;
    position: relative;
    top: 10.5em;
    margin-left: 16em;
    max-width: 70em;
}

.btn-group{
margin-top: 100px;	
}

.base {
    top: -80px;
}

.overlay{ 
border:2px #337ab7 solid;
}

select {
    margin-left: 5%;
    margin-right: 5%;
    height: 36px;
    padding: 6px;

}

#container5 .cord  {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -35px;
    margin-right: 100px;
    background-color: rgba(51,122,183,.8);
    border-color: rgba(46,109,164,.8);
}

#container6 .cord {
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 15px;
    margin-right: 100px;
	background-color: rgba(51,122,183,.8);
    border-color: rgba(46,109,164,.8);
}

#container1, #container2, #container3, #container4, #container5, #container6, #container7, #container8,#containerAnswers {					  
	-webkit-animation-duration: 1.3s;
 	-webkit-animation-delay: 0.5s;
  /*-webkit-animation-iteration-count: infinite;*/
}

/*tables stlyes*/

#containerAnswers {
    margin-left: 25px;
    margin-right: 25px;
    padding-right: 25px;
    padding-left: 25px;
}

#feedback table {
	width: 100%;
}


#feedback {
	display: none;
}

th {
	background: #337ab7;
	color: #fff
}
th, td {
	padding: 10px;
}
td:last-child {
	text-align: center;
}

/*Media player positioning */
#audioPlayer {
    position: relative;
    margin: 35px auto;
    top: -325px;;
}

.btn-group.audio {
    margin-top: 340px;
}

.player{
display:none;
visibility:0;
/*-webkit-transition:all 600ms ease;*/	
}

.active{
visibility:1;
display:block;	
}

span.score {
    font-size: x-large;
    color: #337ab7;
    position: relative;
    top: 35px;
    font-weight: 800;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
	color:#fff;
    background-color: #222;
	border-top: 5px solid #ddd;
	z-index:-1;
}

@media only screen and (max-width : 1199px){
.drop-selector {
    z-index: 10;
    position: relative;
    top: 9.5em;
    margin-left: 10em;
}

#container5 .cord{
    padding-left: 5px;
    padding-right: 5px;
    margin-left: -48px;
    margin-right: 100px;
}

#container6 .cord {
    padding-left: 0px;
    padding-right: 15px;
    margin-left: 10px;
    margin-right: 105px;
}



}
@media only screen and (max-width : 991px){
	.drop-selector {
    z-index: 10;
    position: relative;
    top: 7.5em;
    margin-left: 9.5em;
}

#container5 .cord{
    padding-left: 5px;
    padding-right: 5px;
    margin-left: -90px;
    margin-right: 102px;
    margin-top: 4px;
	width: 115px;
}

#container6 .cord {
    padding-left: 0px;
    padding-right: 20px;
    margin-left: -33px;
    margin-right: 105px;
}

}

/*REQUIRED IF MORE QUEETSIONS ADDED
@media only screen and (min-width: 767px) and (max-width : 991px){
#container.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 85px;
    margin-bottom: 10px;
}*/

/*  menu bar burger - restyle */
/*--- Removes the colapsable header menu ---*/

@media (max-width: 768px) {
    .navbar-header {
        float: left;
    }

    .navbar {
        border-radius: 4px;
        min-width: 400px;
    }

    .nav-tabs-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }
    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
        border-bottom-color: #fff;
    }

    .nav-justified > li {
        display: table-cell;
        width: 1%;
    }
    .nav-justified > li > a {
        margin-bottom: 0;
    }

    .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }
    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:focus {
        border-bottom-color: #fff;
    }

    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }
    .nav-tabs.nav-justified > li > a {
        margin-bottom: 0;
    }

    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }
    .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
    }
    .container {
        min-width: 400px;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in {
        overflow-y: visible;
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }

    .navbar-static-top {
        border-radius: 0;
    }

    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-nav > li {
        float: left;
    }
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }

    .navbar-left {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }

    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .radio,
    .navbar-form .checkbox {
        display: inline-block;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .radio input[type="radio"],
    .navbar-form .checkbox input[type="checkbox"] {
        float: none;
        margin-left: 0;
    }
    .navbar-form .has-feedback .form-control-feedback {
        top: 0;
    }

    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }

    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    } 
}



/* EDITS BY RHYS AFTER MEETING SO */


.bottom {border-top:none}


#container5 .cord, #container6 .cord {
	background:none;
	border:none;
}

#container5 .cord { top:128px}
#container6 .cord, #container6 .cord option {font-family:serif}
