body
{
	margin:0; 
	padding:0; 
	height:100%; 
	background-color:#222222;
	background-image:url(images0/background.png);
	background-position:top center;
	background-repeat:repeat-x;
	background-attachment:fixed;
        color: black;
        font-size: 10px;
        font-family: "Lucida Grand", Verdana, Arial, Helvetica, sans-serif;
} 


.Container1
{
	background-color: #ffffff;
	width: 850px;
	margin-left:auto;
	margin-right:auto;	
}
.divider
{
	width:800px; 
	height:1px; 
	margin:10px auto 0px auto;
	background-color:#cccccc;
}

.footer
{
	width:850px;
	margin:0px auto 0px auto;
}


.fontLegal
{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:640px;
	font-family:arial;
	font-size:9px;
	color:#666666;
	text-align:center;
}

.Container2
{
	margin: 20px auto 20px auto; 
	/* width: 750px; */
        width: 800px;
	display:block;
	padding:0px;
	/*text-align:justify;*/
	font-family:Arial, Helvetica, sans-serif, serif, monospace, Poynter, Franklin Gothic, Utopia, Times;
	/* font-size:16px; - Does not work for tabs */
}
.Header
{
	width:850px;
	margin:0px auto 0px auto;
}

h1, h2, th{
    font-family: "Calibri","sans-serif";
    color:black;
}

h1{
    font-size: 20px;

}

h2{
    font-size: 16px;
}

.Normal, .Problem{
	margin-top:0in;
	margin-right:0in;
	margin-bottom:10.0pt;
	margin-left:0in;
	line-height:115%;
	font-size: 12pt;
	font-family:"Calibri","sans-serif";
}

#main {
    width: 850px;
    margin: 0 auto 0 auto;
}

/* main and Panel should have the same width */
.Panel {
    width: 800px;
    float: left;
}

/* Proof problem - contains image plus Given and Prove Statements */
#problem {
	width: 250px;
	line-height:135%;
	font-size: 18pt;
	font-family:"Calibri","sans-serif";
	float: left;
}

/* Proof - contains table of empty cells that student will fill in */
#proof {
	width: 515px;
	line-height:135%;
	font-size: 18pt;
	font-family:"Calibri","sans-serif";
	float: left;
}


/* Proof Table - Actually two tables side by side, n rows (added dynamically per problem */
.ProofTable{
    font-size: 10pt;
    border: dashed black 0px;
    border-collapse: separate;
    border-spacing: 4px 8px;

}


.StatementElement, .ReasonElement, .StatementContainer, .ReasonContainer, .StatementTarget, .ReasonTarget {
    background-color:white;
    height: 30px;
    width: 45px;
    border: dashed darkgreen 1px;
    text-align: center;
    float:left;
}

.ReasonElement {
    border: dashed blue 1px;
}
.ReasonContainer {
    border: none;
}

.StatementElement, .StatementTarget {
    float: right;
}

/* div that holds the reason image */
.ReasonElement {
    width: 195px;
}

/* Statement Target Div - ready to receive dropped cell */
.StatementTarget {

    background-color: yellow;

}

/* Reason Target Div - ready to receive dropped cell */
.ReasonTarget {
    background-color: yellow;
    width: 195px;
}

/* Statement or reason cell that is filled after drop */
.FilledStatementElement, .FilledReasonElement {
    float:left;
    text-align: center;
    background-color: lightblue;
    border: none;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    cursor: pointer;
    line-height: 30px;
    font-size: 30px;
}

.FilledStatementElement {
    float: right;
    background-color: lightgreen;

}

/* Proof Table Data - container for divs that hold the images */
.StatementContainer {
    width: 245px;
    border: none;

}

.ReasonContainer {
    width: 200px;
}


.PEShort {
    float:left;

}


/* Given Prove table - part of proof problem */
#givenprove {
    width: 250px;
}

/* Given and Prove labels */
.GPLabel {
    font-size: 14pt;
    color: blue;
}

/* Given and Prove elements of the proof problem */
.GPElement {
    float:left;
    vertical-align:middle;
    height: 30px;
}

.SIBin {
    left: 40px;
    width: 800px;
}

.SITable{
    left: 20px;
    font-size: 10pt;
    border: solid black 0px;
    border-collapse: separate;
    border-spacing: 4px 0px;

}

/* Statement Item and Reason Item table data */
.SITD, .RITD {
    background-color:lightgreen;
    border: solid black 1px;
    text-align: center;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
}

.RITD {
    background-color:lightblue;
}

.ImageElement {

    border: solid black 0px;
    margin-top: 0px;
}

#dragCell {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 30px;
    /* width: 40px; */
    background-color: lightgrey;
    border: solid black 1px;
    color: blue;
    text-align: center;
    z-index:3;
    visibility: hidden;
    cursor: pointer;
}




#proofStatementHeading {
    width: 255px;
    height: 25px;
    border-bottom: solid black 1px;
    border-right: solid black 1px;
    float: left;
    font-size: 16pt;
    color: darkgreen;
    text-align: center;
}

#proofReasonHeading {
    width: 210px;
    height: 25px;
    border-bottom: solid black 1px;
    float: left;
    font-size: 16pt;
    color: blue;
    text-align: center;
}

#proofStatementList {
    width: 255px;
    border-right: solid black 1px;
    float: left;
}

#proofReasonList {
    width: 210px;
    float: left;
}

#btnSubmit {
    width: 118px;
    height: 35px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    color: black;
    background-image: url("images0/ovalButton1.gif");
    font-size: 10pt;
    cursor: pointer;
    float: right;
    color: white;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;

}

.ErrorPane {
    position: absolute;
    width: 150px;
    height: 30px;
    background-color:#ffffff;
    background-image: url('images0/callout2x.png');
    font-size: 9pt;
    padding: 3px 20px;
}

/* Learning mode instructions */
#lminstructions {
    visibility: hidden;
    color: red;
    height: 1px;
    font-size: 110%
}