/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 07 June 2026 22:35:56
*/


/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 23 June 2017 14:23:14
*/


/*
 === ACTIVITY TEMPLATE CSS ===
*/


@media screen and (min-width: 733px) {

.interactioncircle {
    overflow: hidden;
}

.interactioncircle {
    display: block;
    float: left;
    padding: 5%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #6AA324;
    text-align: center;
    position: relative;
    margin-top: -3%;
    margin-left: -2.5%;
}

.interactionicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 70%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -37%;

}
}


@media screen and (min-width: 501px) and (max-width: 732px) {

.interactioncircle {
    overflow: hidden;
}

.interactioncircle {
    display: block;
    float: left;
    padding: 8%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #6AA324;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.interactionicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 70%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -37%;

}
}


@media screen and (min-width: 390px) and (max-width: 500px) {

.interactioncircle {
    overflow: hidden;
}

.interactioncircle {
    display: block;
    float: left;
    padding: 10%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #6AA324;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.interactionicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 70%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -37%;

}
}


@media screen and (max-width: 389px) {

.interactioncircle {
    overflow: hidden;
}

.interactioncircle {
    display: block;
    float: left;
    padding: 12%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #6AA324;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.interactionicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 70%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -37%;

}
}


@media screen and (min-width: 733px) {

.interactionallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 0%;

}

}



@media screen and (max-width: 732px) {

.interactionallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 0%;

}

}


.interactionbordercontainer {

    border-style: solid;
    border-width: 10px;
    border-radius: 30px;
    border-color: #6AA324;
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 7%;
    padding-right: 1.5%;
    padding-bottom: 0.5%;
    color: black;

}

.interactiontextposition {

    position: relative;
    padding-left: 10%;

}






/*
 === INFORMATION/HINT TEMPLATE CSS ===
*/


@media screen and (min-width: 733px) {

.informationcircle {
    overflow: hidden;
}

.informationcircle {
    display: block;
    float: left;
    padding: 5%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #FDB515;
    text-align: center;
    position: relative;
    margin-top: -3%;
    margin-left: -2.5%;
}

.informationicon {

    display: block;
    position: absolute;
    width: 45%;
    height: 75%;
    overflow: hidden;
    z-index: 1;
    margin-left: -20%;
    margin-top: -36%;

}
}


@media screen and (min-width: 501px) and (max-width: 732px) {

.informationcircle {
    overflow: hidden;
}

.informationcircle {
    display: block;
    float: left;
    padding: 8%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #FDB515;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.informationicon {

    display: block;
    position: absolute;
    width: 45%;
    height: 75%;
    overflow: hidden;
    z-index: 1;
    margin-left: -20%;
    margin-top: -36%;

}
}


@media screen and (min-width: 390px) and (max-width: 500px) {

.informationcircle {
    overflow: hidden;
}

.informationcircle {
    display: block;
    float: left;
    padding: 10%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #FDB515;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.informationicon {

    display: block;
    position: absolute;
    width: 45%;
    height: 75%;
    overflow: hidden;
    z-index: 1;
    margin-left: -20%;
    margin-top: -36%;

}
}


@media screen and (max-width: 389px) {

.informationcircle {
    overflow: hidden;
}

.informationcircle {
    display: block;
    float: left;
    padding: 12%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #FDB515;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.informationicon {

    display: block;
    position: absolute;
    width: 45%;
    height: 75%;
    overflow: hidden;
    z-index: 1;
    margin-left: -20%;
    margin-top: -36%;

}
}



@media screen and (min-width: 733px) {

.informationallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 0%;

}

}



@media screen and (max-width: 732px) {

.informationallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 0%;

}

}


.informationbordercontainer {

    border-style: solid;
    border-width: 10px;
    border-radius: 30px;
    border-color: #FDB515;
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 7%;
    padding-right: 1.5%;
    padding-bottom: 0.5%;
    color: black;

}

.informationtextposition {

    position: relative;

}






/*
 === COMMENT/QUOTE TEMPLATE CSS ===
*/


@media screen and (min-width: 733px) {

.commentscircle {
    overflow: hidden;
}

.commentscircle {
    display: block;
    float: left;
    padding: 5%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #009FD8;
    text-align: center;
    position: relative;
    margin-top: -3%;
    margin-left: -2.5%;
}

.commentsicon {

    display: block;
    position: absolute;
    width: 60%;
    height: 65%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -32%;

}
}


@media screen and (min-width: 501px) and (max-width: 732px) {

.commentscircle {
    overflow: hidden;
}

.commentscircle {
    display: block;
    float: left;
    padding: 8%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #009FD8;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.commentsicon {

    display: block;
    position: absolute;
    width: 60%;
    height: 65%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -32%;

}
}


@media screen and (min-width: 390px) and (max-width: 500px) {

.commentscircle {
    overflow: hidden;
}

.commentscircle {
    display: block;
    float: left;
    padding: 10%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #009FD8;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.commentsicon {

    display: block;
    position: absolute;
    width: 60%;
    height: 65%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -32%;

}
}


@media screen and (max-width: 389px) {

.commentscircle {
    overflow: hidden;
}

.commentscircle {
    display: block;
    float: left;
    padding: 12%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #009FD8;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.commentsicon {

    display: block;
    position: absolute;
    width: 60%;
    height: 65%;
    overflow: hidden;
    z-index: 1;
    margin-left: -25%;
    margin-top: -32%;

}
}



@media screen and (min-width: 733px) {

.commentsallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 0%;

}

}



@media screen and (max-width: 732px) {

.commentsallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 0%;

}

}




.commentsbordercontainer {

    border-style: solid;
    border-width: 10px;
    border-radius: 30px;
    border-color: #009FD8;
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 7%;
    padding-right: 1.5%;
    padding-bottom: 0.5%;
    color: black;

}

.commentstextposition {

    position: relative;

}






/*
 === WARNING/CAUTION TEMPLATE CSS ===
*/

@media screen and (min-width: 733px) {

.warningscircle {
    overflow: hidden;
}

.warningscircle {
    display: block;
    float: left;
    padding: 5%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DD341E;
    text-align: center;
    position: relative;
    margin-top: -3%;
    margin-left: -2.5%;
}

.warningicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (min-width: 501px) and (max-width: 732px) {

.warningscircle {
    overflow: hidden;
}

.warningscircle {
    display: block;
    float: left;
    padding: 8%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DD341E;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.warningicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (min-width: 390px) and (max-width: 500px) {

.warningscircle {
    overflow: hidden;
}

.warningscircle {
    display: block;
    float: left;
    padding: 10%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DD341E;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.warningicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (max-width: 389px) {

.warningscircle {
    overflow: hidden;
}

.warningscircle {
    display: block;
    float: left;
    padding: 12%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DD341E;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.warningicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}



@media screen and (min-width: 733px) {

.warningallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 0%;

}

}



@media screen and (max-width: 732px) {

.warningallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 0%;

}

}



.warningbordercontainer {

    border-style: solid;
    border-width: 10px;
    border-radius: 30px;
    border-color: #DD341E;
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 7%;
    padding-right: 1.5%;
    padding-bottom: 0.5%;
    color: black;

}

.warningtextposition {

    position: relative;

}

.warning_font {
   color: red;
   font-size: 16px;
}


/*
 === SKILLS TEMPLATE CSS ===
*/

@media screen and (min-width: 733px) {

.skillscircle {
    overflow: hidden;
}

.skillscircle {
    display: block;
    float: left;
    padding: 5%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DE1B73;
    text-align: center;
    position: relative;
    margin-top: -3%;
    margin-left: -2.5%;
}

.skillsicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (min-width: 501px) and (max-width: 732px) {

.skillscircle {
    overflow: hidden;
}

.skillscircle {
    display: block;
    float: left;
    padding: 8%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DE1B73;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.skillsicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (min-width: 390px) and (max-width: 500px) {

.skillscircle {
    overflow: hidden;
}

.skillscircle {
    display: block;
    float: left;
    padding: 10%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DE1B73;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.skillsicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}


@media screen and (max-width: 389px) {

.skillscircle {
    overflow: hidden;
}

.skillscircle {
    display: block;
    float: left;
    padding: 12%;
    width: auto;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    background: #DD341E;
    text-align: center;
    position: relative;
    margin-top: -5%;
    margin-left: -5%;
}

.skillsicon {

    display: block;
    position: absolute;
    width: 55%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    margin-left: -27%;
    margin-top: -35%;

}
}



@media screen and (min-width: 733px) {

.skillsallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 0%;

}

}



@media screen and (max-width: 732px) {

.skillsallcontentcontainer {

    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 0%;

}

}



.skillsbordercontainer {

    border-style: solid;
    border-width: 10px;
    border-radius: 30px;
    border-color: #DE1B73;
    position: relative;
    height: 100%;
    width: 100%;
    padding-left: 7%;
    padding-right: 1.5%;
    padding-bottom: 0.5%;
    color: black;

}

.skillstextposition {

    position: relative;

}



/*
 === ANNOTATED ASSIGNMENT TEMPLATE CSS ===
*/



.screen-reader-only
{
overflow: hidden;
height: 1px;
width: 1px;
padding-top: 1px;
display: inline-block;
}

.comment-box-thought
{
border: 10px solid #009FD8;
border-radius: 30px;
padding: 1rem;
margin: 1rem;
display: none;
}

.comment-box-question
{
border: 10px solid #FDB515;
border-radius: 30px;
padding: 1rem;
margin: 1rem;
display: none;
}

.comment-box-tick
{
border: 10px solid #6AA324;
border-radius: 30px;
padding: 1rem;
margin: 1rem;
display: none;
}

.comment-box-cross
{
border: 10px solid #DD341E;
border-radius: 30px;
padding: 1rem;
margin: 1rem;
display: none;
}

.commented-text-thought-active
{
background-color: #99e4ff;
}

.commented-text-question-active
{
background-color: #fdce68;
}

.commented-text-tick-active
{
background-color: #b7e382;
}

.commented-text-cross-active
{
background-color: #f3aea5;
}

.commented-text-thought
{
background-color: #FFFFFF;
}

.commented-text-question
{
background-color: #FFFFFF;
}

.commented-text-tick
{
background-color: #FFFFFF;
}

.commented-text-cross
{
background-color: #FFFFFF;
}

.comment-icon-thought
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #009FD8;
background-origin: content-box;
background-repeat: no-repeat;
background-image: url("http://www.monash.edu/__data/assets/file/0004/729580/rlo-assign-icons-Thought.svg");
display: block;
float: left;
}

.comment-icon-thought-active
{
border-radius: 50%;
border-style: solid;
border-width: 0.5rem;
border-color: #009FD8;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #FFFFFF;
display: block;
float: left;
}

.comment-icon-question
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #FDB515;
background-image: url("http://www.monash.edu/__data/assets/file/0012/729579/rlo-assign-icons-Question.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: block;
float: left;
}

.comment-icon-question-active
{
border-radius: 50%;
border-style: solid;
border-width: 0.5rem;
border-color: #FDB515;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #FFFFFF;
display: block;
float: left;
}

.comment-icon-cross
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #DD341E;
background-image: url("http://www.monash.edu/__data/assets/file/0011/729578/rlo-assign-icons-Cross.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: block;
float: left;
}

.comment-icon-cross-active
{
border-radius: 50%;
border-style: solid;
border-width: 0.5rem;
border-color: #DD341E;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #FFFFFF;
display: block;
float: left;
}

.comment-icon-tick
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #6AA324;
background-image: url("http://www.monash.edu/__data/assets/file/0005/729581/rlo-assign-icons-Tick.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: block;
float: left;
}

.comment-icon-tick-active
{
border-radius: 50%;
border-style: solid;
border-width: 0.5rem;
border-color: #6AA324;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-bottom: 0.3rem;
background-color: #FFFFFF;
display: block;
float: left;
}

.essay-container
{
margin-left: 2.7rem;
}

.icon-container
{
display: block;
float: left;
position: relative;
margin-left: -2.5rem;
margin-top: 0.15rem;
width: 1.7rem;
}

.icon-legend-box
{
border-radius: 30px;
border-style: solid;
border-width: 10px;
border-color: #939598;
margin-bottom: 1rem;
padding: 1rem;
overflow: auto;
}

.legend-entry
{
display: block;
}

@media screen and (min-width: 768px)
{
    .legend-entry
    {
    margin-right: 2rem;
    float: left;
    }
}

.legend-icon-thought
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-left: 0.2rem;
margin-right: 0.5rem;
background-color: #009FD8;
background-image: url("http://www.monash.edu/__data/assets/file/0004/729580/rlo-assign-icons-Thought.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: inline-block;
position: relative;
top: 0.2rem;
}

.legend-icon-question
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-left: 0.2rem;
margin-right: 0.5rem;
background-color: #FDB515;
background-image: url("http://www.monash.edu/__data/assets/file/0012/729579/rlo-assign-icons-Question.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: inline-block;
position: relative;
top: 0.2rem;
}

.legend-icon-cross
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-left: 0.2rem;
margin-right: 0.5rem;
background-color: #DD341E;
background-image: url("http://www.monash.edu/__data/assets/file/0011/729578/rlo-assign-icons-Cross.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: inline-block;
position: relative;
top: 0.2rem;
}

.legend-icon-tick
{
border-radius: 50%;
border-style: none;
width: 1.7rem;
height: 1.7rem;
padding: 0.1rem;
margin-left: 0.2rem;
margin-right: 0.5rem;
background-color: #6AA324;
background-image: url("http://www.monash.edu/__data/assets/file/0005/729581/rlo-assign-icons-Tick.svg");
background-origin: content-box;
background-repeat: no-repeat;
display: inline-block;
position: relative;
top: 0.2rem;
}







/*
 === SAMPLE TEXT TEMPLATE CSS WITH MODIFICATION FOR MANGO===
*/

blockquote.sampletext, .sampletext, .breakoutBox {
    background: #f2f2f2;
    color: #333;
    margin: auto;
    margin-bottom: 30px;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    border: 1px solid #CCC;
    border-radius: 5px;
    font-size: 1.1em;
    font-family: Georgia,Times;
}







/*
 === NEXT PAGE NAVIGATION TEMPLATE CSS ===
*/

a.nextnav {
    background-color: #006cab;    
    color: white;    
    padding: 10px 10px;    
    text-align: center;    
    text-decoration: none;    
    display: inline-block;    
    margin-left: 66.66%;
}



/*
 === HANGING-INDENT FOR APA REFERENCING SYTLE ===
*/

.hanging-indent {
    display: inline-block;
    margin-left: 3rem;
    text-indent: -3rem;




/*
 === CLICK AND REVEAL TEMPLATE CSS ===
*/

.comment-box
{
//float: right;
//width: 45%;
border: 10px solid #009FD8;
border-radius: 30px;
padding: 2%;
margin: 2%;
display: none;
}


/*
 === CUSTOM STYLES FOR MANGO ===

 .breakoutBox
 {
    background-color:#f2f2f2;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #CCC;
    border-radius: 5px;
    font-family: Georgia,Times;
 }
 */
 === CUSTOM STYLES FOR EMBEDDING CAPTIVATE CLIPS ===

.cap-iframe {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.cap-iframe-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.cap-iframe-4x3 {
  padding-bottom: 62%;
}
 
.cap-iframe iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}