/*CSS specific to the activity goes here. Anything related to the template, the headers, the footers will be at a higher folder level*/
#activity1
{
    text-align: center;
}

input,
textarea,
[contenteditable]
{
    -webkit-user-select: text;
            user-select: text;
}
div#backBTN
{
    position: absolute;
}
ul#btns
{
    font-size: 1.3em;
    line-height: 1.5em;

    width: 30%;
    margin: 0 35%;
    padding-bottom: 1em;
}
#header h1
{
    margin-left: 20%;
}
h4
{
    font-size: 1.6em;

    padding: 1%;

    text-align: center;

    color: #2357b3;
}

h5
{
    font-size: 1em;

    padding: 1%;

    text-align: center;

    color: #2357b3;
}


.question
{
    padding: 2%;
    /*background-color: #B5E2FF;*/
}

.question h5
{
    font-size: 1.0em;
    font-weight: bold;
    line-height: 1.0em;

    margin: 0 7%;
    padding-top: .2em;
    padding-bottom: 1.0em;

    text-align: left;

    color: #4e6e38;
}

.question  p
{
    font-size: 1.0em;
    line-height: .5em;

    width: 85%;
}

.menubtn
{
    font-size: 1em;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    line-height: 2em;

    display: inline-block;
    float: left;

    margin: .25em;
    padding-top: 0;
    padding-right: .5em;
    padding-bottom: 0;
    padding-left: .5em;

    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;

    color: #333;
    border: 1px solid #777;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: #ededed;
    -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
       -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
            box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.menubtns
{
    font-size: 1em;
    font-weight: none;
    font-style: normal;
    font-variant: normal;
    line-height: 2em;

    margin: .25em;
    padding-top: 0;
    padding-right: .5em;
    padding-bottom: 0;
    padding-left: .5em;

    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;

    color: #fff;
    border: 1px solid #777;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: #1d4e89;
    -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
       -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
            box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}


.menubtns:hover
{
    background-color: #06f;
}



.reveal
{
    font-family: Arial, Helvetica;
    font-size: 1em;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    line-height: 2em;

    display: inline-block;

    margin: .25em;
    padding-top: 0;
    padding-right: .5em;
    padding-bottom: 0;
    padding-left: .5em;

    white-space: nowrap;
    text-decoration: none;

    color: #333;
    border: 1px solid #777;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: #ededed;
    -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
       -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
            box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}



.show_reveal:hover
{
    background-color: #eee;
}

.show_reveal:active
{
    position: relative;
    top: 1px;

    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
       -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
            box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
}

.show_reveal:focus
{
    outline: 0;
    background: #fafafa;
}

button
{
    background: #1d4e89;
    background-image: none;
}

li.printBtn
{
    height: 1em;
    margin: 0;
width: auto !important;
    vertical-align: middle;
}


/*Answer TOGGLE END*/
.part
{
    position: relative;

    float: left;

    width: 45%;
    height: 96%;

    margin: 1% 2%;
    /* background-color: skyblue; */

    border: 2px solid #2357b3;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

.problem
{
    height: auto;
    /* background-color: #B5E2FF; */
    margin: 1% 5% 0 5%;
    /* padding: 1%; */
}

.action
{
  
	height: 30%;
}

.fail
{

    height: 40%;
}

.studentAnswer
{
    /* border: 2px solid skyblue; */
    line-height: 1.2em;

    width: 90%;
    height: 90%;
    margin: 8% 5%;
	padding-top: 2.2em;
    border-color: #1d4e89;
    border-width: 1px;
    border-style: dashed;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: #fff;
}
p.hint
{
	position: absolute;
	    height: 10%;
		padding: 2%;
    margin-left: 5%;
	margin-bottom:1.2em;
	margin-bottom:1.2em;
      color: #1d4e89;
	      
}
/* Portrait ipad*/
@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)
{
    .part
    {
        width: 98%;
        height: 45%;
        margin: 1%;
    }

    .problem,
    .studentAnswer
    {
        width: 98%;
        margin: 1%;
        /* height: 80%; */
    }

    p.studentAnswer
    {
        height: 80%;
    }
}
/*PRINTING ACTIVITY
*/
@media print
{
    #header,
    #footer
    {
        background-color: #fff;
    }

    .page
    {
        display: block;
    }
}