/*  alfred.js - Quiz engine
    Version 0.1
    Written by James Douglas (July 2014)
    j.r.douglas@hotmail.com
*/


/* Main Quiz Container */
.alf-container{
border: 1px solid #333333;
overflow: hidden;
background: #fff;
-webkit-animation: fadeIn 1s forwards;
-moz-animation: fadeIn 1s forwards;
-o-animation: fadeIn 1s forwards;
animation: fadeIn 1s forwards;
}

.alf-nofeedback{
    display:none !important;
}

.alf-splash {
    background: #333333;
    color: #fff;
    height: 440px;
    width: 100%;
    position: relative;
    display: block;
    text-align: center;
    font-size: 2em;
    display: flex;display: -webkit-flex;display: -ms-flexbox;
    -webkit-box-pack: start;-ms-flex-pack: center;
    flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;
    flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;
    align-content: center;-webkit-align-content: center;-ms-flex-align: center;
    justify-content: center;-webkit-justify-content: center;-ms-justify: center;
    align-items:center;-webkit-align-items:center;  
}

.alf-menu-container{
    height:100%;
    min-height: 400px;
    width:100%;
    float: left;
    display: flex;display: -webkit-flex;display: -ms-flexbox;
    -webkit-box-pack: start;-ms-flex-pack: center;
    flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;
    flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;
    align-content: center;-webkit-align-content: center;-ms-flex-align: center;
    justify-content: center;-webkit-justify-content: center;-ms-justify: center;
    align-items:center;-webkit-align-items:center;
}

.alf-menu-item {float: left;height: 100px;margin: 10px;position: relative;width: 200px;perspective:800px;-ms-perspective:800px;-webkit-perspective:800px;-mos-perspective:800px;}

.alf-menu-item div{display: block;position: absolute;width: 100%;height: 100%;z-index:10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -mos-backface-visibility: hidden;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -o-transition-duration: 400ms;
    -ms-transition-duration: 400ms;
    -mos-transition-duration: 400ms;
    display: flex;display: -webkit-flex;display: -ms-flexbox;
    -webkit-box-pack: start;-ms-flex-pack: center;
    flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;
    flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;
    align-content: center;-webkit-align-content: center;-ms-flex-align: center;
    justify-content: center;-webkit-justify-content: center;-ms-justify: center;
    align-items:center;-webkit-align-items:center;
    cursor: pointer;
}

/*Menu Item FRONT*/
.alf-menu-item .alf-menu-item_front {background: #333333;color: #fff;font-size: 2em;text-align: center;}

/*Menu Item BACK*/
.alf-menu-item .alf-menu-item_back{background: #688fca;color:#fff;font-size: 2em;text-align: center;z-index:0;-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-ms-transform: rotateY(180deg);-mos-transform: rotateY(180deg);-o-transform: rotateY(180deg);}

/*Flip Menu Items on HOVER*/
.alf-menu-item:hover .alf-menu-item_front{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);-mos-transform: rotateY(180deg);z-index:0;}
.alf-menu-item:hover .alf-menu-item_back{-webkit-transform: rotateY(360deg);transform: rotateY(360deg);-o-transform: rotateY(360deg);-mos-transform: rotateY(360deg);-ms-transform: rotateY(360deg);z-index:10;}


/*Menu Title*/
.alf-question-title {
background: #333;
color: #fff;
position: relative;
z-index: 3;
font-size: 1.5em;
margin: 0;
padding: 10px;
height: 55px;
}
.alf-question-title>li{display:inline-block;}
.alf-question-title>li:nth-last-child(2){
    position: absolute;
right: 80px;
padding-right: 20px;
top: 10px;}
.alf-question-title>li:last-child{
   right: 2px;
position: absolute;
width: 6%;
text-align: center;
top: 10px;
min-width: 60px;
}
.alf-question-title>li:first-child{
position: absolute;
left: 10px;
top: 10px;
}


/*Questions*/

.alf-question>li> i {font-style: normal;padding: 10px;width: 100%;position: relative;display: block;background: #fff;}
.alf-question-container {
height: 98%;
float: left;
width: 100%;
border-right: 55px solid #333;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 00ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}

.alf-single-row>.form-control {background-color: #eee;}
.alf-question {
color: #333;
overflow-y: auto;
display: flex;
display: -webkit-flex;
position: relative;
overflow-x: hidden;
padding: 10px;
min-height: 400px;
margin-bottom: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-pack: start;
-ms-flex-pack: center;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
align-content: center;
-webkit-align-content: center;
-ms-flex-align: center;
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-justify: flex-start;
align-items: center;
-webkit-align-items: center;
}
.alf-question>li>b, .alf-question>li>div>b {
padding: 10px;
color: #333;
margin-right: 1%;
position: relative;
width: 20%;
display: inline-block;
border: 1px solid #333;
}
.alf-correct-answer {padding: 10px;}
.alf-longquestion-center {margin-right: 0 !important;border: 1px solid #fff;padding: 10px;color: #fff;margin-right: 1%;background: #333;width: 100%;position: relative;display: inline-block;}
.alf-question>li{width: 100%;}
.alf-question>li:first-child b{background: #333;color: #fff;width: 100%;}
.alf-question>li:first-child{font-weight:bold;}
.alf-menu-return{font-size: 2em;top: -4px;position: relative;cursor:pointer;-webkit-transition: all 400ms ease;-moz-transition: all 400ms ease;-ms-transition: all 400ms ease;-o-transition: all 400ms ease;transition: all 400ms ease;}
.alf-menu-return:hover{color:#688fca;top: -24px;}
.alf-menu-return::after{-webkit-transition: all 400ms ease;-moz-transition: all 400ms ease;-ms-transition: all 400ms ease;-o-transition: all 400ms ease;transition: all 400ms ease;opacity:0;}
.alf-menu-return:hover::after {content: "Menu";font-family: "Open sans";font-size: 0.3em;position: absolute;top: 46px;color: #fff;left: 5px;opacity:1;}

/*Answer Types*/
.alf-textbox {
    display: inline-block;
    position: relative;
    width: 78%;
    height: 44px;
    border: 1px solid #eee;
    padding: 0 0 0 10px;
    margin: 0;
    top: -2px;
    line-height: inherit;
}
.alfred_noanswer {
height: 44px;
display: block;
line-height: 44px;
background: #CA1E47;
width: 100%;
padding-left: 10px;
color: #fff;
}

.alf-inline-block>.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: #eee;}

.alf-textbox-multiple {display: inline-block;position: relative;width: 16%;margin-right: 1%;height: 44px;border: 1px solid #ddd;padding: 0;background: #eee;top: -2px;line-height: inherit;padding-left: 10px;}
.alf-textbox:focus, .alf-textbox-multiple:focus{border-color: #688fca;color:#688fca;}
.alf-question-submit {
position: absolute;
height: 100%;
display: none;
width: 56px;
right: 15px;
z-index: 10;
color: #fff;
min-height: 400px;
font-size: 2em;
cursor: pointer;
text-align: center;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 00ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.alf-dropdown-long>b {width: 100% !important;border: none !important;}
.alf-single-row>.form-control[disabled], .alf-single-row>.form-control[readonly], .alf-single-row>fieldset[disabled] .form-control {background-color: #eee;cursor: pointer;}
.alf-question-submit:hover{background:#688fca !important;}/*Here's a nice important tag for you Tor*/
.alf-next-correct:hover{background:#8edb97!important}/*And another!*/
.alf-next-incorrect:hover{background:#dd214d!important}/*And another!*/
.alf-radio-div>input[type='radio']+label::before {content: "\f096";font-family: fontAwesome;padding: 9px;font-size: 1.5em;position: absolute;text-align: center;width: 10%;margin: 0;padding: 0;margin-left: -9.5%;padding-left: 3px;margin-top: -4px;pointer-events: none;}
.alf-radio-div>input[type='radio']:checked + label::before {content: "\f0c8";font-family: fontAwesome;padding: 9px;position: absolute;text-align: center;width: 10%;margin: 0;padding: 0;margin-left: -9.5%;padding-left: 3px;margin-top: -4px;pointer-events: none;}
.alf-radio {opacity: 0;position: absolute;width: 10%;left: 20%;height: 38px;cursor: pointer;z-index:100000;}
.alf-radio-div {display: inline-block;width: 79%;}
.alf-radio-div>label {display: inline-block;margin: 15px;font-weight: normal;width: 90%;margin-left: 10%;}

.alf-radio-row>b {border: 1px solid #333;padding: 10px;color: #333;width: 12%;position: relative;top: 0;float: left;display: inline-block;height: 100%;}
.alf-checkbox-div>input[type='checkbox']+label::before {content: "\f096";font-family: fontAwesome;padding: 9px;font-weight: bold;font-size: 1.5em;position: relative;top: 3px;padding-left: 3px;pointer-events: none;}
.alf-checkbox-div>input[type='checkbox']:checked + label::before {content: "\f0c8";font-family: fontAwesome;padding: 9px;font-weight: bold;position: relative;top: 3px;padding-left: 3px;padding-right: 7px;}
.alf-checkbox {opacity: 0;position: absolute;width: 100%;left: 0;height: 38px;cursor:pointer;}
.alf-checkbox-div {display: inline-block;}
.alf-checkbox-div>label {display: inline-block;margin-bottom: 5px;font-weight: normal;}
.alf-checkbox-row{margin-bottom:4px;}
.alf-checkbox-row>b {border: 1px solid #333;padding: 10px;color: #333;margin-right: 1%;width: 12%;position: relative;display: inline-block;min-width: 95px;
}
.alf-dropdown-select{width:50%;}
.alf-correct-answer>strong {
width: 78%;
display: inline-block;
padding-left: 10px;
border: 1px solid rgb(202, 30, 71);
height: 44px;
position: relative;
line-height: 44px;
top: 1px;
}
/*.alf-dropdown-select{
    width:auto;
}*/
.alf-dropdown-select>select{
    display: block;
    width: 100%;
    height: 44px;
    padding: 6px 12px;
    font-size: 14px;
    top: -1px;
    position: relative;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #eee;
    border: 1px solid #DDD;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.alf-dropdown-sent>.form-control{background-color: #eee;}

.resulticonselect {position: absolute;height: 42px;margin-top: -34px;z-index: 100;right: 56px;}

.resulticonselectinline {
    position: relative;
    margin-top: -29px;
    z-index: 100;
    left: -18px;
    float: right;
}


.alf-dropdown-long{
border: 1px solid #333;
color: #333;
width: 50%;
position: relative;
display: inline-block;
margin-bottom: 4px;
}
/*Result stuff*/
.resulticon {
height: 42px;
padding-top: 10px;
position: absolute;
right: 36px;
z-index: 100;
margin-right: 1%;
}

.resulticonradio {
position: absolute;
height: 42px;
margin-top: 10px;
z-index: 100;
left: 18%;
}
.alf_LB {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #333;
z-index: 100000000;
    display: flex;display: -webkit-flex;display: -ms-flexbox;
    -webkit-box-pack: start;-ms-flex-pack: center;
    flex-direction: row;-webkit-flex-direction: row;-ms-flex: row;
    flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;
    align-content: center;-webkit-align-content: center;-ms-flex-align: center;
    justify-content: center;-webkit-justify-content: center;-ms-justify: center;
    align-items:center;-webkit-align-items:center;
}
.resulticonmulti {
    position: relative;
    height: 42px;
    margin-right: -1%;
    z-index: 100;
    right: 36px;
}

.feedbackSDWN{
    top: 3px !important;
}

.alf-close-modal {
    position: fixed;
    top: 10px;
    right: 21px;
    z-index: 2000;
    color: #fff;
    font-size: 2em;
}

.alf-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    height: 100%;
    width: 100%;
    background: rgba(51,51,51,0.9);
    padding: 2%;
}

.alf-feedback-btn{
background: #333;
color: #fff;
height: 44px !important;
text-align: left;
position: relative;
padding-top: 12px;
padding-left: 10px;
width: 100%;
margin-top: 10px;
margin-left: 0;
border: none;
display: inline-block;
cursor: pointer;
}

.alf-feedback-btn:hover{
    background:#688fca;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #fff;
    cursor: pointer;
}
.alf-feedback-content {
position: relative;
color: #fff;
width: 100%;
top: 0;
z-index: 20;
padding: 20px;
left: 0px;
}
/* Common attributes */
.alf-inline-block{display:inline-block;background: #eee;padding:10px;}
.alf-inline-block:first-child{padding:0px;}

/*Graph*/

.alf-graph-container {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: start;
    -ms-flex-pack: center;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-content: center;
    -webkit-align-content: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: flex-start;
    -ms-justify: flex-start;
    height: 400px;
    align-items: center;
    -webkit-align-items: center;
    padding-bottom: 54px;
}
.alf-graph-total {
background: #333;
width: 100%;
height: 400PX;
position: relative;
top: 27px;
border: 6px solid #333;
}
.alf-graph-total i {width: 26px;}

.alf-graph-timetaken,.alf-graph-corblurb,.alf-graph-incorblurb  {
    position: relative;
    color: #fff;
    top: 111px;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    display: block;
}

.alf-graph-congrats{
    position: relative;
    color: #fff;
    top: 104px;
    border-top: 1px solid #555;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    display: block;
    font-size: 2em;
}

.alf-graph-correct {
    width: 0%;
    background: #85CC8E;
    height: 44px;
    position: absolute;
    margin-top: 1px;
}

.alf-graph-incorrect {background: #CA1E47;height: 44px;width: 0%;position: absolute;margin-top: 51px;
}

.alf-graph-cor_count,.alf-graph-inccor_count  {
    color: #fff;
    font-size: 1em;
    position: absolute;
    top: 2px;
    z-index: 10;
    right: 3px;
    padding-top: 10px;
    height: 40px;
    padding-right: 10px;
}
.alf-graph-btnincorrect {
    background: #FFFFFF;
    left: 37px;
    padding: 7px 15px;
    position: relative;
    text-align: center;
    top: 128px;
}

.alf-graph-btnincorrect::before {
    content: "\f129";
    font-family: fontAwesome;
    font-size: 1.5em;
    position: absolute;
    top: 4px;
    left: -28px;
    color: #fff;
    pointer-events: none;
}
.alf-graph-btnincorrect:hover{background:#688fca;color:#fff;}

span.alf-graph-routledgelogo {position: absolute;right: -10px;bottom: 0;}
/*Display final breakdown results*/
.alf-display-results > li > b{border: 1px solid #fff;padding: 10px;color: #fff;margin-right: 1%;width: 20%;;position: relative;display: inline-block;}
.alf-display-results>li{width: 100%;min-height: 50px;margin-left: 0;padding-left: 0;}
.alf-display-results {list-style: none;background: #333;color: #fff;margin-bottom: 8px;margin-top: 8px;padding: 20px;}
.alf-breakdown {overflow: auto;height: 100%;margin-top: 40px;}
.alf-BLNK {
    border-bottom: 2px solid #688fca;
    width: 60px;
    display: inline-block;
    margin-right: 3px;
    top: 0px;
    margin-left: 3px;
    position: relative;
    text-align: center;
}
/*Progress Bar*/
.alf-progess-bar {
background: #333;
border-radius: 0;
height: 10px;
left: 0;
border: medium none;
color: #688FCA;
position: relative;
transition: all 500ms ease 0s;
width: 100%;
z-index: 20;
margin-bottom: -2px;
bottom: 0px;
height: 23px;
}

.alf-close-feedback {
    font-size: 3em;
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    left: 0;
    cursor: pointer;
    }
.alf-close-feedback:hover{
    color:#688fca;
}

.alf-progess-bar::-webkit-progress-bar {
  background-color: #333;
  border-radius: 0px;
}

.alf-progess-bar::-moz-progress-bar {
    background-color:#688fca;
}

.alf-progess-bar::-ms-progress-bar {
    background-color:#688fca;
}

.alf-progess-bar::-webkit-progress-value{
    background-color:#688fca;

}

/*Mobile stuffs*/
@media only screen and (max-width : 850px){
.alf-question-container {height: 100%;border:none;}
.alf-question-title>li{display:block;}
.alf-question-title {font-size: 1em;top:-5px;}
 .alf-container {min-height: 200px;}   
.alf-question-title > li:last-child {font-size: 1.2em;position: absolute;right: 15px;text-align: right;width: auto; margin-top: -34px;}
.alf-radio {width: 100%;left: 0;}
.alf-correct-answer>strong {width: 100%;}
.alf-question > li > i {display: block;font-style: normal;min-height: 44px;padding-top: 9px;position: relative;margin-bottom: 10px;}
.alf-correct-answer > .danger {display: block;min-height: 44px;position: relative;margin-bottom: 10px;}
.alf-feedback-content {font-size: 4vw;background: none repeat scroll 0 0 #333;
    color: #fff;
    height: 100%;
    left: 0;
    margin-top: 0;
    padding: 90px 20px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}
.alf-question>li>b, .alf-question>li>div>b {width: 100%;}
.alf-textbox-multiple {border: 1px solid #ddd;}
.resulticon {height: 42px;margin-right: 0;padding-top: 0;position: absolute;right: 12px;z-index: 100;line-height: 44px;}
.alf-container {margin: 0;height: auto;}
.alf-textbox-multiple {width: 45%;}
.alf-question > li {margin: 0;}
.alf-question-title > li:nth-last-child(2) {position: relative;right: auto;padding-right: 20px;color: #777;padding-top: 9px;font-size: 0.8em;}
.alf-question-submit {position: relative;height: auto;width: 100%;padding-top: 0px;margin-top: -121px;right: auto;border: none;font-size: 2em;top: -13px;}
.alf-question {font-size: 0.8em;padding:0;text-align: center;top: -11px;min-height:20px;}    
.alf-question > li > b {background: none repeat scroll 0 0 #333;color: #fff;min-height: 44px;line-height: 22px;margin: 0;width: 100%;}
.alf-textbox {padding: 0;width: 100%;border: 1px solid #ddd;top: 0;}
.alf-feedback-btn {margin: 0;text-align: center;top: 0;width: 100%;background:#688fca;}

.alf-textbox-multiple {margin: 1px;top: 0;width: 47%;}
.alf-question-submit {min-height:44px;border: medium none;bottom: 10px;font-size: 2em;height: 44px !important;margin-top: 0;padding-top: 0;position: relative;line-height:44px !important;right: auto;width: 100%;top: auto;background:#688FCA;}
.alf-textbox {text-align: center;}
.resulticonmulti {height: 42px;margin-right: -13px;position: relative;right: 24px;top: 3px;z-index: 100;}
.alf-question > .danger {display: block;min-height: 44px;position: relative;top: 0;line-height: 22px;}
.alf-radio-div {
    display: block;
    font-weight: normal;
    position: relative;
    text-align: left;
    width: 100%;
}
.alf-radio{margin-top:44px !important;}
.alf-radio-row > b {color: #fff;padding: 0px;width: 100%!important;}
.alf-radio-div{width:100%;}
.alf-radio-div > label {text-align: left;}
.resulticonradio {height: 42px;margin-top: 11px;padding-left: 0;position: absolute;right: 10px;z-index: 100;left: auto;}
.alf-checkbox-row > b {background: #333;color: #fff;padding: 0;width: 100%;}
.alf-checkbox-div {text-align: left;width: 100% !important;}
.alf-dropdown-select {width: 100%;}
.alf-dropdown-long {background:#333;color: #fff;width: 100%;}
.alf-question > li:first-child b {background:#333;border: medium none;color: #fff;width: 100% !important;}
.alf-SDWN {text-align: left;width: 100% !important;}
.alf-longquestion-center {background:#333;border: medium none;color: #fff;width: 100% !important;}
.resulticonselectinline {float: right;left: -9px;margin-top: -25px;}
.alf-graph-congrats {font-size: 5vw;}
.alf-graph-total {background:#333;border: 6px solid #333;height: 315px;margin-left: 0;position: relative;top: -5px;width: 100%;}
.alf-graph-routledgelogo > img {width: 25px;}
.alf-graph-timetaken, .alf-graph-corblurb, .alf-graph-incorblurb {font-size: 3.5vw;}
.alf-graph-container {padding-bottom: 0;}
.alf-display-results > li > b {width: 100%;}
.alf-lightbox {background:#333;}
.alf-progess-bar {bottom: 0;height: 25px;left: 0;margin-bottom: -2px;position: relative;top: auto;width: 100%;}
.alf-menu-item{font-size:3vw;width: 100px;}
}

/*Tablets Portrait*/
@media only screen and (min-width : 481px) and (max-width : 768px){

.alf-textbox {width: 73%;}
.alf-question {min-height: 290px;padding: 0;position: relative;top: 0;}
.alf-question-submit {border: 0 none;bottom: 0;height: 66px;left: 0;margin-top: 0;padding-top: 0;position: relative;right: auto;width: 100%;}
.alf-question > li {margin: 2px 2px 15px;width: 100%;}

}/*END QUERY*/