/*Use a split complimentary color scheme one accent color combined with the adjacent colors of its complimentary color. Either orange with blue and blue/blue-purple, yellow with  blue-purple/purple or red with blue/blue-green.
0,51,102 is a good blue. The main dark blue we use is more purple: 51, 51, 153.  0, 136, 204 is a nice aqua for text. ALso 50, 191, 212.

***overall, try to use multiples for 51. They seem to be popping up a lot. (0, 51, 153, 204, 255)****

**good color schemes**
www.molly.com  main colors: 0, 153, 204  (blue) and 102, 204, 51 (green) with 255, 153, 51 (orange) as accent

1st attempt: 51, 51, 153 (blue)  51, 153, 51 (green)  and 255, 51, 51, (orange)

Attempt from website (www.colorblender.com) :  51, 51, 153, 168/168/230, 76/76/230 (monochromatic)

Current attempt: 51, 51, 153 (main dark blue) 153, 153, 153 (body grey) 255, 102, 0 (accent orange) 153, 153, 204 (lighter blue), 245, 245, 255 ("white" of the content)

Softer, lighter background colors (grey-blues): 
	231, 231, 231
	204, 204, 204
	153, 153, 204 (the lighter color currently)
	204, 204, 255
	153, 153, 255
	217, 217, 242
	232, 232, 247 (what we have now for #page)

Accent colors:
	255, 153, 0
	255, 102, 0
	255, 204, 0
	255, 153, 51
	255, 204, 51

Contrast greens:
	0, 153, 0
	51, 153, 51
	102, 204, 51
	
Calmer greens/blue-greens:
	0, 153, 204
	51, 153, 204
	51, 204, 204
	51, 204, 255
	51, 255, 204
	
Blue/blue-Violets:
	51, 51, 153 (the main color currently)
	102, 102, 204 (lighter than current main color)

http://www.coolhomepages.com/cda/color/ check this site out, especially seven lessons on the side (color is one of them)*/

/*------------Colors------------*/

#header3 li a, #header3 span, #header3 .divider
	{color: rgb(238, 226, 215);}

/*-----Greys-----*/
#header1
	{background-color: rgb(153, 153, 204);}
	
#headerLoginEmail, #headerLoginPswdText
	{color: rgb(102,102,102);}

/*-----Whites-----*/
html,body
	{background-color: rgb(204,204,255);}
	
.bkgdWhite
	{background-color: rgb(241, 241, 250);}
	
#container
	{background-color: rgb(255,255,255);}
	
.submit
	{color: rgb(240,240,251);}
	
/*-----Greys-----*/
.bkgdGrey
	{background-color: rgb(240,240,240);}
	
.greyText
	{color: rgb(102,102,102);}
	
/*-----Main Colors-----*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .mainText, .clickText, a, hr
	{color: rgb(51, 51, 153);}

.mainHighlight, .submit
	{background-color: rgb(51, 51, 153);}
	
.bkgdStripe, #resultsContainer .examsTaken .even
	{background-color: rgb(240,240,250);}

/*-----Accent Colors-----*/
.warning, .error, .classContainer .urgentDueDate
	{color: red}
	
.classInfo .col1, fieldset
	{border-color:rgb(139,69,19);}
	
.warningHighlight
	{background-color: rgb(255, 204, 0);}
	
.clickText:hover, a:hover
	{color: rgb(153, 0, 0);}
	

/*------------Overall Layout------------*/

body, html
	{
	padding: 0px;
	margin: 0px;
	background-image: url('../../images/desktop_gradient.gif');
	background-repeat: repeat-x;
	}
html > body#waiting *, body#waiting #header3 *
	{
	cursor: wait;
	}
	
html/*This way if the body is below 100% of the screenport, the html will stretch below and keep the gradient*/
	{
	height: 100%;
	}

#page
	{
	width: 950px;
	margin: 0px auto;
	overflow: hidden;
	}
	
#container /*This contains everything but the header.*/
	{
	padding: 14px 42px 28px 42px;
	overflow: hidden;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	width: 864px;
	float: left;
	}

#content  /*This extra div is needed because we will be using JQuery to load pages. JQuery will load the new page into #container (which contains everything except the header), and yet each page has its own overall layout, contained within its own content div, and so, unless we are going to change the class of #container with every JQuery load, we need an extra content div for the layout classes.*/
	{
	width: 864px;
	}

/*------Header------*/

#header1
	{
	height: 60px;
	}
	
#header1 img
	{
	float: left;
	clear: none;
	}
	
#headerAccountInfo, #headerAccountInfo *
	{
	font-family: Verdana, arial;
	}
	
#headerAccountInfo
	{
	text-align: right;
	font-size: 12px;
	padding-top: 1px;
	}
	
#headerDate
	{
	font-size: 10px;
	display: block;
	margin-top: 2px;
	}	
	
#forgotPswd
	{
	float: left;
	padding-top: 3px;
	padding-left: 3px;
	color: black;
	font-size: 11px;
	text-decoration: none;
	}
	
#forgotPswd:hover
	{
	text-decoration: underline;
	}
	
#headerAccountForm
	{
	padding: 3px 0px 2px 0px;
	}
	
#headerLoginEmail, #headerLoginPswdText, #headerLoginPswd
	{
	width: 120px;
	padding: 2px;
	font-size: 11px;
	margin-right: 5px;
	}
	
#accountAccess
	{
	display: block;
	padding: 5px 0px;
	}

#accountAccess a
	{
	color: black;
	}
	
#headerUserName
	{
	display: block;
	color: white;
	letter-spacing: 0.1em;
	}

#header2 img
	{
	vertical-align: middle;
	}
	
#headertitle
	{
	font-family: Palatino, “Book Antiqua”,  “Times New Roman”, Times, serif;
	font-size: 36pt;
	letter-spacing: 0.1em;/*50 something*/
	font-stretch: 130%;/*130%*/
	}
	
/*TAB MENU STYLING*/

#header3
	{
	width: 948px;
	float: left;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-image: url('../../images/toolbar-dark2.gif');
	background-repeat: repeat-y;
	font-family: arial;
	font-size: 10pt;
	white-space: nowrap;
	letter-spacing: 0.1em;
	}

#header3 #tabs
	{
	margin-left: 153px;
	float: left;
	}
	
#header3 ul
	{
	margin: 0px;
	padding: 0px;
	}
	
#tabs a
	{
	text-decoration: none;
	display: block;
	cursor: pointer;
	}
	
#tabs > li
	{
	list-style: none;
	clear: none;
	float: left;
	}
	
#tabs li.parent > a
	{
	cursor: default;
	}
	
#tabs .divider
	{
	margin-top: 3px;
	font-size: 12pt;
	}
	
#tabs > li > a
	{
	text-align: center;
	padding: 6px 6px;
	}
	
#tabs li ul
	{
	position: absolute;
	list-style: none;
	background-color: rgb(101,70,42);
	border: 1px solid rgb(125, 88, 65);
	border-top: 0px;
	display: none;
	width: auto;
	}
	
#tabs li ul li
	{
	position: relative;
	}
	
#tabs li ul li:hover
	{
	background-color: rgb(71,50,27);
	}
	
#tabs li ul li a
	{
	padding: 3px 15px 2px 5px;
	}

/*------Footer------*/
#footer p {
	text-align: center;
	font-size: 11px;
	padding: 0px;
	margin: 0px;
}
#footer .copyright {
	font-size: 16px;
	font-family: "Trebuchet MS"
}

/*------------Page Layouts------------*/

/*Testing
#container {background-color: red;}
.div1 {background-color: yellow;}
.div2 {background-color: red;}
.div3 {background-color: purple;}*/

.clearfix:after, #content:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix, #content{display: inline-block;}  /* for IE/Mac */

/*Layout One*/
.layoutOne > .div1
	{
	width: 100%;
	float: none;
	}
	
.layoutOne > .div2
	{
	width: 584px;
	float: left;
	clear: left;
	padding: 0px 21px 0px 0px;
	}

.layoutOne > .div3
	{
	width: 238px;
	float: right;
	clear: right;
	padding: 0px 0px 0px 21px;
	}

/*Layout Two*/
.layoutTwo > .div1
	{
	width: 100%;
	float: none;
	}

.layoutTwo > .div2
	{
	width: 100%;
	float: left;
	}
	
/*Layout Three*/
.layoutThree > .div1
	{
	width: 100%;
	float: none;
	}

.layoutThree > .div2
	{
	width: 281px;
	float: left;
	padding: 0px 21px 0px 0px;
	clear: left;
	}

.layoutThree > .div3
	{
	width: 541px;
	float: right;
	clear: right;
	padding: 0px 0px 0px 21px;
	}
	
/*Layout Four*/ /*Designed for JQuery's animate function to reveal a third div. Used in account/accountInfo.php*/
.layoutFour > .div1
	{
	display: block;
	float: none;
	width: 100%;
	}

.layoutFour > .div2
	{
	display: block;
	width: 584px;
	float: left;
	clear: left;
	margin: 0px 140px;
	}
	
/*------------Div Layouts------------*/	

/*Two Column Heading*/
/*This is exactly the same as Page Layout One. I kept it separate in case we needed to edit them separably later.
This is used in:
index.php
login.php*/
.twoColumnHeading > .div1
	{
	width: 100%;
	float: none;
	clear: both;
	}
	
.twoColumnHeading > .div2
	{
	width: 584px;
	float: left;
	clear: left;
	padding-right: 21px;
	}

.twoColumnHeading > .div3
	{
	width: 238px;
	float: right;
	clear: right;
	padding-left: 21px;
	}

/*One Column Heading*/
/*This is exactly the same as Page Layout Two. I kept it separate in case we needed to edit them separably later.
This is used in:
register.php*/
.oneColumnHeading > .div1
	{
	float: left;
	width: 100%;
	}

.oneColumnHeading > .div2
	{
	float: left;
	width: 100%;
	}
	
/*Double Column*/
/*This works for any div or list. Just sets up .col1 and .col2 as floated appropriately. Width and padding has to be applied in specific circumstances.*/
.dblcol > .col1
	{
	float: left;
	clear: left;
	}
	
.dblcol > .col2
	{
	float: right;
	clear: right;
	}

.dblcol > div, .dblcol > li /*Other li's or div's used will be treated as whole rows, which should clear the float problems.*/
	{
	clear: both;
	}

/*------------General HTML Element Formatting------------*/	
/*I used ems for headings for more precision. Here are a few helpful links:
http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_4/  <-- historic font-sizes
http://websitetips.com/articles/css/fonts/#why <-- where I got the idea
http://css-discuss.incutio.com/?page=UsingKeywords <-- font key-word sizes
 An alternative can be found here to have more control over presentation, at the cost of some complications: http://www.alistapart.com/articles/howtosizetextincss/ 
http://websitetips.com/articles/css/fonts/#why <-- This is very simple, using keywords for everything but headings, where ems are used for more precision. I like this model, and it's what I used here..*/

/*Others: Verdana*/
body
	{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
/*If we change the font back to arial for all the form input elements, make sure to keep the headerAccountInfo and probably the submit buttons with Verdana.*/	
input, textarea, select, option
	{
	font-family: Verdana, arial;
	font-size: small;
	}
	
.greek .submit
	{
	font-family: Verdana, arial;
	font-size: 11px;
	}

.greek, .greek input, .greek textarea, .greek option, .greek select
	{
	font-family: "Palatino Linotype","Minion Pro", embeddedGentium, Gentium, "Arial Unicode MS", "Georgia Greek Unicode", Asia, "TITUS Cyberbit Basic", Athena, Code2000, Tahoma; 
	font-size: large;
	}
	
body
	{
	font-size: medium;
	}
	
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
	{
	font-family: Palatino, “Book Antiqua”, “Times New Roman”, Times, serif;
	font-weight: normal;
	line-height: normal;
	padding-bottom: 0.3em;
	padding-top: 0.5em;
	/*color set above*/
	}
	
h1, .h1, h2, .h2, h3, .h3
	{white-space: nowrap;}

/*Based on 16px default, these will be 36, 24, ~21, 18. The styling comes from using the info on: http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_5/ */
/*The selectores for heading classes are there in case I want a div or a span to have the same attributes as a heading, but not necessary the dimensional attributes (e.g. line break after). See account home assignment list for an exampl.*/
h1, .h1
	{
	font-size: 2.25em;
	letter-spacing: 0.3em;
	padding-bottom: 0.5em;
	font-variant: small-caps;
	}
	
h2, .h2
	{
	font-size: 1.66em;
	font-weight: bold;
	letter-spacing: 0.2em;
	font-variant: small-caps;
	}
h3, .h3
	{
	font-size: 1.33em;
	font-weight: bold;
	}

h4, .h4
	{
	font-size: 1.125em;
	font-weight: bold;
	}
	
h5, .h5
	{
	font-size: 1.125em;
	font-style: italic;
	}
	
h6, .h6
	{
	font-size: 1.125em;
	}
	
fieldset
	{
	border: 1px solid;
	padding: 10px;
	background-color: rgb(240,240,251);
	}

fieldset legend
	{
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	}
	
p
	{
	padding-bottom: 0.5em;
	}
	
/*------------General Formatting Classes------------*/

/*These arrows are taken from http://tantek.com/CSS/Examples/polygons.html*/
.right_arrow_list {
	border-left: solid black;
	border-right: none;
	border-bottom: solid transparent;
	border-top: solid transparent;
	border-width: 3px 0px 3px 7px;
	display: inline-block;
	height: 0px;
	margin: 0px auto 2px;
	width: 1px;
}

.down_arrow_list {
	border-left: solid transparent;
	border-right: solid transparent;
	border-bottom: none;
	border-top: solid black;
	border-width: 7px 3px 0px;
	display: inline-block;
	height: 0px;
	margin: 0px auto 2px;
	width: 1px;
}

#blanket, #loadblanket
	{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000;
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	background-color: black;
	height: 100%;
	width: 100%;
	}
	
#loadblanket
	{
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	}

.center 
	{
	margin-left: auto;
	margin-right: auto;
	}
	
.textCenter
	{
	text-align: center;
	}

.readableContent
	{
	max-width: 40em;
	}

em, .em
	{
	font-style: italic;
	}

strong, .strong
	{
	font-weight: bold;
	}
	
.warning, .error
	{
	/*color set above*/
	font-weight: bold;
	}
	
ul.noStyle
	{
	list-style: none;
	margin: 0px;
	}
	
ul.styledList
	{
	list-style: disc;
	margin: 0px 28px;
	padding: 0px;
	}
	
ul.styledList li
	{
	margin-bottom: 7px;
	}
	
.hidden
	{
	display: none;
	}
	
.clickText, a
	{
	/*color set above*/
	cursor: pointer;
	text-decoration: underline;
	font-weight: normal;
	}
	
.clickText:hover, a:hover
	{
	/*color set above*/
	text-decoration: none;
	}
	
.large
	{
	font-size: large;
	}

.larger
	{
	font-size: larger;
	}
	
.verylarge
	{
	font-size: x-large;
	}

.smallish
	{
	font-size: 0.9em;
	}
	
.small
	{
	font-size: small;
	}
	
.smaller
	{
	font-size: smaller;
	}
	
.medium
	{
	font-size: medium;
	}
	
/*Forms*/
/* alternative input and submit button feel*/

:focus
	{
	outline: 1px dotted black;
	}
	
input, textarea, select
	{
	border-style: inset;
	border-width: 2px;
	border-color: rgb(248, 248, 255) rgb(205, 205, 225) rgb(205, 205, 225) rgb(248, 248, 255);
	}
	
input:focus, textarea:focus
	{
	outline-width: 0px;
	border-color: rgb(185, 185, 217) rgb(145, 145, 197) rgb(145, 145, 197) rgb(185, 185, 217);
	}
	
textarea:disabled
	{background-color: rgb(225, 225, 237);}
	
.submit, .largeSubmit
	{
	border: 1px solid black;
	font-weight: bold;
	}
	
.submit
	{padding: 2px 10px; font-size: 11px;}
	
.largeSubmit
	{padding: 0.4em 2em; font-size: large;}
	
.submit:disabled, .submit.disabled
	{
	color: rgb(80, 80, 180);
	background-color: rgb(225, 225, 237);
	border: 1px solid black;
	font-weight: normal;
	}

label em /*This is for red astericks on required fields. I've switched to marking optional fields as optional, though.*/
	{
	color: red;
	font-weight: bold;
	}
	
input.month, input.day, input.minute, input.hour, input.second, input.shortNumber
	{
	width: 1.5em;
	}
	
input.year
	{
	width: 2em;
	}
	
input.zip
	{
	width: 5em;
	}
	
input.email, input.userName, input.pswd, input.pswdHint
	{
	width: 10em;
	}
	
label .optleft, label .optright
	{
	font-size: small;
	font-variant: small-caps;
	}
	
label .optleft
	{
	position: absolute;
	margin-top: 1.3em;
	margin-left: 0.5em;
	}
	
label .optright
	{
	position: absolute;
	margin-top: 1.3em;
	margin-left: -5em;
	}
	
.formSmallNote
	{
	font-size: small;
	font-variant: small-caps;
	}
	
/*------------Round Box Styling------------*/	
/*This rounded box idea was taken from Stu Nicholls: http://www.cssplay.co.uk/boxes/snazzy2.html*/
.rc1, .rc2, .rc3, .rc4, .rc5, .rc6
	{display:block; overflow:hidden;}
	
.rc1, .rc2, .rc3, .rc4
	{height:1px;}
	
.smallrb .rc1
	{margin:0 5px;}
	
.smallrb .rc2 
	{margin:0 3px; border-width:0 2px;}
	
.smallrb .rc3 
	{margin:0 2px;}
	
.smallrb .rc4 
	{height:2px; margin:0 1px;}
	
.largerb .rc1
	{margin:0 8px;}

.largerb .rc2
	{margin:0 6px; border-width:0 2px;}

.largerb .rc3
	{margin:0 4px; border-width: 0 2px;}

.largerb .rc4
	{margin:0 3px;}

.largerb .rc5
	{height:2px; margin:0 2px;}

.largerb .rc6
	{height:2px; margin:0 1px;}	
	
.roundbox {margin-bottom: 15px;}
	
.rc2, .rc3, .rc4, .rc5, .rc6, .roundbox .title, .roundbox .content
	{border-left:1px solid;border-right:1px solid;}

.roundbox .title
	{
	padding:0 10px 5px 10px; 
	border-bottom:1px solid;
	}
	
.roundbox .content
	{
	padding:5px 10px; 
	}

.color_a
	{background:rgb(241,236,225); color:black;}
	
.color_b
	{
	/*background:rgb(101,70,42); */
	background-image: url('../../images/smallbar.gif');
	background-repeat: repeat-y;
	color: rgb(241,236,225);
	}
	
.color_c 
	{}

.color_d 
	{}
	
.border_none .rc2, .border_none .rc3, .border_none .rc4, .border_none .rc5, .border_none .rc6, .border_none .title, .border_none .content
	{border:0px;}
	
.border_none .rc1
	{background: transparent;}
	
.border_a .rc2, .border_a .rc3, .border_a .rc4, .border_a .rc5, .border_a .rc6, .border_a .title, .border_a .content
	{border-color: black;}
	
.border_a .rc1
	{background: black;}
	
.border_b .rc2, .border_b .rc3, .border_b .rc4, .border_b .rc5, .border_b .rc6, .border_b .title, .border_b .content
	{}
	
.border_b .rc1
	{}
	
/*Old working copy of the round box code. Check back to this if we have IE problems.
.roundbox 
	{
	background: transparent; 
	width:240px; 
	float:left; 
	margin:0 3px;
	}

.roundbox .top, .roundbox .bottom 
	{
	display:block; 
	background:transparent; 
	font-size:1px;
	}
	
.rc1, .rc2, .rc3, .rc4
	{display:block; overflow:hidden;}
	
.rc1, .rc2, .rc3
	{height:1px;}
	
.rc2, .rc3, .rc4
	{border-left:1px solid;border-right:1px solid;}
	
.rc1
	{margin:0 5px;}
	
.rc2 
	{margin:0 3px; border-width:0 2px;}
	
.rc3 
	{margin:0 2px;}
	
.rc4 
	{height:2px; margin:0 1px;}

.roundbox .title
	{
	margin:0; 
	font-size:1.2em; 
	padding:0 10px 5px 10px; 
	border-bottom:1px solid;
	}
	
.roundbox .content
	{
	margin:0; 
	padding:5px 10px; 
	}

.roundboxcontent
	{
	display:block; 
	border-left: 1px solid;
	border-right: 1px solid;
	height:auto;
	}
	
* html .roundboxcontent
	{height:1px;}

.color_a
	{background:#c9ba65; color:#fff;}
	
.color_b
	{background:#d4d8bd; color:#000;}
	
.color_c 
	{background:#758279; color:#fff;}

.color_d 
	{background:#b2ab9b; color:#000;}
	
.border_a .rc2, .border_a .rc3, .border_a .rc4, .border_a .title, .border_a .roundboxcontent
	{border-color: black;}
	
.border_a .rc1
	{background: black;}
	
.border_b .rc2, .border_b .rc3, .border_b .rc4, .border_b .title, .border_b .roundboxcontent
	{border-color: rgb(51, 51, 153);}
	
.border_b .rc1
	{background: rgb(51, 51, 153);}*/
	
/*------------QTIP Styling------------*/

.qtip-closetip
	{
	top:-5px;
	right:-6px;
	cursor:pointer;
	}
	
.qtip .back
	{
	float: right;
	clear: none;
	}
	
.modifytip a {color: rgb(240,240,251);text-decoration: none;}

/*------------Specific Pages------------*/

/*-----QTip htmlBlocks-----*/
/*findSchool.php*/
/*The schoolFinder class is applied in the qtip function to the entire qtip.*/
.schoolFinder .createSchoolForm li, .schoolFinder .schoolSearchList li
	{
	padding: 3px;
	}
	
.schoolFinder .schoolSearchList label, .schoolFinder .createSchoolForm label
	{
	display: block;
	float: left;
	clear: left;
	}
	
.schoolFinder .schoolSearchList label
	{
	width: 6.5em;
	}
	
.schoolFinder .createSchoolForm label
	{
	width: 4.5em;
	}
	
.schoolFinder .schoolList li
	{
	padding: 2px 5px;
	}
	
/*getdeleteExamAssigned.php*/
/*the deleteExamAssigned class is applied in the qtip*/

.deleteExamAssigned .deleteOptionForm li
	{
	padding: 3px 0px;
	}

.deleteExamAssigned .deleteOptionForm input
	{
	margin-left: 5px;
	}
	
/*Qtip Tagger*/
.qtipTagger .mainTagList li
	{
	
	}
	
.qtipTagger .subtags ul
	{
	margin: 0px 0px 0px 20px;
	}
	
.qtipTagger .customTags select
	{
	max-width: 450px;
	min-width: 8em;
	}
	
.qtipTagger .tagsSubmit
	{
	text-align: center;
	}

/*getQtipExamPurchase.php*/
.qtipExamPurchase form {
	padding-bottom: 8px;
}	

/*getQtipPassageEditor.php*/
.qtipPassageEditor .editPassageForm label {
	display: block;
}

.qtipPassageEditor .editPassageForm #passage_name, .passageText textarea, .qtipPassageEditor .editPassageForm > div{
	width: 472px;
}

.qtipPassageEditor .choosePassageForm select {
	max-height: 130px;
	max-width: 350px;
}

.passageText textarea{
	height: 250px;
}

.passageText textarea:disabled {
	background-color: rgb(220,220,245);
	color: black;
}

.qtipPassageEditor .choosePassageForm  .passageText {
	min-height: 275px;
}

.qtipPassageEditor .choosePassageForm .passageButtons *, .qtipPassageEditor .choosePassageForm .passageButtons {
	vertical-align:top;
}

.qtipPassageEditor .editPassageForm .submitContainer {
	text-align: right;
}

.qtipPassageEditor .choosePassageForm > .submitContainer {
	text-align: center;
}

	
/*------Other htmlBlocks------*/
/*marketingTable.php*/
#marketingTable
	{
	width: 592px;
	}
	
#marketingTable .column
	{
	width: 148px;
	clear: none;
	float: left;
	}

#marketingTable .column .mainNav
	{
	height: 150px;
	width: 148px;
	clear: left;
	float: left;
	}
	
#marketingTable .column .contents
	{
	float: right;
	clear: right;
	width: 75%;
	}
	
#marketingTable .column .subNav
	{
	float: left;
	clear: left;
	width: 25%;
	}	
	
#marketingTable .column .contents, #marketingTable .column .subNav
	{
	display: none;
	}
	
#marketingTable h4
	{
	text-align: center;
	}
		
#marketingTable .marketingLinks
	{
	display: none;
	}

#marketingTable .marketingLinks div
	{
	padding: 2px 4px;
	}

#marketingTable #studentColumn
	{
	background-color: #a9af67;
	}
	
#marketingTable #studentColumn .mainNav
	{
	background: url(../../images/students.gif) no-repeat center left;
	}
	
#marketingTable #instructorColumn
	{
	background-color: #e9967a;
	}
	
#marketingTable #instructorColumn .mainNav
	{
	background: url(../../images/teacher3.jpg) no-repeat center left;
	}
	
#marketingTable #adminColumn
	{
	background-color: #819fd5;
	}
	
#marketingTable #adminColumn .mainNav
	{
	background: url(../../images/adminteacher2.jpg) no-repeat center left;
	}
	
#marketingTable #churchColumn
	{
	background-color: #deb887;
	}
	
#marketingTable #churchColumn .mainNav
	{
	background: url(../../images/pastora.jpg) no-repeat center left;
	}
	
#marketingTable .goBack
	{
	float: right;
	clear: right;
	padding: 3px 5px;
	}
	

/*login.php*/
.smallForm div
	{
	padding: .5em;
	width: 15em;
	display: block;
	}
	
.smallForm .error
	{
	width: auto;
	padding: 0;
	height: 1.5em;
	}
	
.smallForm label
	{
	width: 5.5em;
	float: left;
	clear: left;
	display: block;
	font-weight: bold;
	}
	
.smallForm .smallFormSubmit
	{
	text-align: center;
	}
	


/*registerForm.php*/
#regForm
	{
	margin-left: 3%;
	}

#regForm fieldset
	{
	width: 22em;
	border-bottom: 0px; /*This is clunky, but it maintains the default for border-top.*/
	border-left: 0px;
	border-right: 0px;
	}
	
#regForm fieldset legend
	{
	padding: 0.3em;
	}
	
#regForm fieldset div
	{
	padding: 0.5em;
	}

#regForm fieldset div label
	{
	width: 8em;
	float: left;
	/*text-align: right;
	padding-right: 10px;*/
	}

#regForm #regFormSubmitDiv
	{
	width: 22em;
	text-align: center;
	}
	
/*editAccountInfo.php AND editPersonalInfo.php*/
.editInfoForm div
	{
	width: 22em;
	padding: 0.5em 0;
	margin: 0 auto;
	}

.editInfoForm div label
	{
	width: 10.5em;
	float: left;
	text-align: right;
	padding-right: 0.5em;
	}
	
.editInfoForm div input.submit
	{
	float: none;
	}
	
.editInfoForm .editInfoSubmitDiv, .editInfoForm .h2
	{
	text-align: center;
	}
	
/*Once we correct the annoying, long error messages, this won't be needed.*/	
.editInfoForm .error
	{
	width: 26em;
	}
	
/*studentHomeClassList.php AND instructorHomeClassList.php*/
.classContainer
	{
	padding-top: 0px;
	margin: 10px 0px;
	}
	
.classContainer > div, .classContainer > ul
	{
	clear: both;
	padding: 5px 10px;
	}
	
.classContainer > span /*The only immediate span children of .classContainer are the view Info and delete class spans.*/
	{
	font-size: small;
	float: right;
	clear: both;
	}
	
/*This was just another cool way of marking the urgent due date, and we can think about using it. It doesn't work in IE 7 and lower, so we'd have to have an IE fix for it.
.classContainer .urgentDueDate:after
	{
	content: " **Assignment Due**";
	color: rgb(255, 102, 0);
	font-weight: bold;
	font-size: large;
	}*/
.classContainer .urgentDueDate
	{
	/*color set above*/
	font-weight: bold;
	font-size: large;
	}
	
/*Class Info (also the form in creating a new class)*/
.classInfo li
	{
	padding: 3px 0px;
	}
	
.classInfo .col1, .classInfo .col2, #newClass .col1, #newClass .col2
	{
	width: 50%;
	padding: 0px;
	margin: 0px;
	}
	
.classInfo .editInfo
	{
	margin-left: 10px;
	}
	
.classInfo label, .classInfoCategory
	{
	display: block;
	float: left;
	width: 6.5em;
	/*width: 6.8em;
	font-weight: bold;*/
	}
	
#createClassForm .col2 label, #createClassForm .col2 .classInfoCategory
	{
	width: 6em;
	}
	
.descriptionText .classInfoCategory
	{
	display: block;
	float: left;
	clear: left;
	max-height: 55px;
	}
	
.descriptionText .classInfoContent
	{
	display: block;
	float: left;
	clear: right;
	width: 400px;
	}
	
.classInfo textarea
	{
	width: 400px;
	height: 50px;
	}
	
.classContainer input.className
	{
	width: 180px;
	}
	
.classContainer .maxSize
	{
	width: 1.5em;
	}
	
#newClassLoad
	{
	font-weight: bold;
	padding-top: 10px;
	}
	
#createClassSubmitDiv
	{
	text-align: center;
	}
	
#joinClassListSubmitDiv
	{
	margin-left: 80px;
	}
	
/*Assigning new exams or editing old assignments*/
.assignmentForm label
	{
	display: block;
	float: left;
	clear: none;
	width: 8.5em;
	/*width: 9em;
	font-weight: bold;*/
	}
	
.assignmentForm .content
	{
	display: block;
	float: left;
	clear: none;
	margin-right: 5px;
	}

.classContainer .assignment div, .classContainer .newAssignment div
	{
	padding: 5px 0px 5px 0px;
	}
	
.classContainer .assignment, .classContainer .newAssignment
	{
	padding: 10px 0px 10px 15px
	}
	
.classContainer .assignment > div.examDue
	{
	margin-left: -15px;
	}
	
.classContainer .createAssignmentSubmit, .classContainer .editInfoSubmit, .assignmentFormSubmitDiv
	{
	margin-left: 10px;
	}
	
.assignment > .description
	{
	width: 400px;
	}
	
/*Class Joining*/
.classContainer #joinClassList > ul > li
	{
	padding: 5px 0px;
	}	
	
.classContainer #joinClassList li div
	{
	/*padding: 5px 0px;*/
	}
	
.classContainer #joinClassList li .details
	{
	padding: 10px 0px 0px 15px;
	}


/*------Sidebars------*/
/*signup.php and login.php*/

.regbox
	{
	/*background-color: rgb(223,211,200);
	background-color: rgb(243,236,225);*/
	padding: 12px 0px;
	}
	
.regbox p.h3, .loginBox p.h3
	{
	margin: 0px 5px;
	text-align: center;
	color: black;
	}
	
.loginBox form div
	{
	width: 80%;
	margin: 0px auto;
	}
	
.loginBox label
	{
	color: black;
	}
	
.loginBox .email, .loginBox .pswd
	{
	width: 100%;
	}

.regbox .submitdiv, .loginBox .submitdiv
	{
	margin-top: 5px;
	text-align: center;
	}
	
/*adds.php*/
#addsContainer
	{
	text-align: center;
	}
	
/*------Home------*/
/*homePage.php*/
.homePictures
	{
	padding-top: 21px;
	}
	
.homePictures .col1, .homePictures .col2
	{
	width: 430px;
	}
	
.homePictures .col2
	{
	text-align: right;
	}

/*------Account------*/
/*studentHome.php and instructorHome.php*/

.accountHomeSidebar
	{
	margin-top: 21px;
	}

/*results.php*/
	
/*accountInfo.php*/
fieldset.accountInfo
	{
	padding-top: 0px;
	margin-bottom: 20px;
	}
	
fieldset.accountInfo li
	{
	padding: 5px;
	}
	
fieldset.accountInfo div
	{
	text-align: right;
	}
	
/*instructorExams.php*/
#instructorExamListContainer
	{
	/*height: 450px;
	overflow: auto;*/
	}
	
#createExamForm
	{
	margin: 15px 0px;
	}
	
#editExamContainer h4
	{
	margin-top: 0px;
	}
		
#instructorExamListContainer div
	{
	padding: 5px;
	}
		
.examInfo > div 
	{
	padding: 3px 0px;
	}
	
.examInfo > div > div 
	{
	padding: 2px 0px 2px 24px;
	}
	
.examInfo .categoryOptions
	{
	padding-left: 24px;
	}
	
.examInfo .category
	{
	margin-bottom: 16px;
	}
	
.examInfo .category form > div, form .examInfo .category > div
	{
	padding-bottom: 6px;
	}
	
.examInfo .category label
	{
	display: block;
	float: left;
	width: 7em;
	}
	
.examInfo input.examName
	{
	width: 15em;
	}
	
.examInfo .category > .deleteCategoryDiv, .examInfo .category form > .deleteCategoryDiv
	{
	text-align: right;
	width: 350px;
	padding-bottom: 0px;
	}	
	
.examInfo .editCategory, .examInfo .deleteCategory, .examInfo .deleteCategoryConfirm
	{
	font-variant: normal;
	}
	
.createExamForm .submitDiv
	{
	padding: 0px 0px 0px 48px;
	}

/*instructorQuestions.php*/
.instructorQuestionLoadForm
	{
	margin: 15px 0px;
	}
	
#filterForm
	{
	margin-left: 10px;
	}
	
#filterForm > div
	{
	padding: 5px 0px;
	}
	
#filterForm .tags, #filterForm .difficulty, #filterForm .passage
	{
	margin-left: 10px;
	}
	
.instructorQuestionLoadForm .difficulty select
	{
	height: 60px;
	}

#questionArea
	{
	/*overflow: auto;
	height: 500px;*/
	}
	
#questionArea h4
	{
	margin-top: 0px;
	}
	
.questionInfo, .createQuestion
	{
	padding: 3px 7px;
	margin: 0px;
	}
	
.questionInfo
	{
	border-bottom: 1px solid;
	}
	
.questionInfo .moreinfo .smallopt, .questionInfo .infoload /*The only immediate span children of .classContainer are the delete spans*/
	{
	font-size: small;
	text-align: right;
	padding: 0px;
	}	

.createQuestion > div, .questionInfo .moreinfo > div, .questionInfo .moreinfo > p/*This is the first division, where the .questionInfo div is divided into four divs.*/
	{
	padding: 3px 0px;
	}
	
.questionInfo .moreinfo > div > div, .createQuestion > div > div, .questionInfo .challengeList > li, .questionInfo .challengeList .challengeDetails > li, .questionInfo .commentList > li, .questionInfo .commentList .commentDetails > li /*This is the div below the header in each section. They also have the class question, answers, difficulty, and tags.*/
	{
	padding: 2px 0px 2px 24px;
	}

.questionInfo .moreinfo .answers div, .questionInfo .instructorQuestionForm div
	{
	padding: 2px 0px;
	}
	
.questionInfo .challengeList li.resolve label
	{
	padding: 0px 5px;
	}
	
.questionInfo .challengeList li.resolve span
	{
	margin-right: 15px;
	}
	
.questionInfo .challengeList textarea
	{
	width: 350px;
	height: 60px;
	}
	
.questionInfo .correctAnswer
	{
	font-style: italic;
	}
	
.instructorQuestionForm .question
	{
	width: 425px;
	}
	
.instructorQuestionForm .answerTable
	{
	width: 100%;
	}
	
.instructorQuestionForm .answerTable .answertext input
	{
	width: 325px;
	}
	
.instructorQuestionForm .answerTable .correct, .instructorQuestionForm .answerTable .remove
	{
	text-align: center;
	}
	
.instructorQuestionForm .answerTable .removeAnswerLoad
	{
	cursor: default;
	}
	
.instructorQuestionForm .removeAnswerConfirm
	{
	text-align: right;
	}
	
#instructorQuestionsContainer .tags select, .instructorQuestionLoadForm .tags select
	{
	height: 100px;
	}
	
.instructorQuestionForm .studentNote
	{
	width: 325px;
	height: 48px;
	}
	
.instructorQuestionForm .createQuestion .submitDiv
	{
	padding-left: 48px;
	}

.tagTree ul {
	padding-left: 24px;
}

.tagTree .maintag, .tagTree .subtag {
	text-decoration: none;
}

	
/*studentResults.php and instructorResults.php*/
#navigationContainer, #navigationContainer .examsTaken, #navigationContainer .assignments
	{
	overflow: auto;
	}

#navigationContainer fieldset
	{
	margin-bottom: 20px;
	}
	
#navigationContainer .examsTaken, #navigationContainer .assignments
	{
	margin-left: 16px;
	width: 546px;
	}
	
#navigationContainer .dateTakenDiv
	{
	display: block;
	float: left;
	clear: left;
	width: 220px;
	}
	
#navigationContainer .viewResultsDiv, #navigationContainer .scoreDiv
	{
	display: block;
	clear: right;
	float: left;
	}

#navigationContainer .examResults, #navigationContainer .assignment
	{
	padding: 8px 0px;
	}
	
#navigationContainer .viewResults
	{
	margin-left: 16px;
	}
	
#resultsContainer li > ul, .studentResultDetails li > ul
	{
	margin-left: 24px;
	}
	
#resultsContainer .categoryScores > li, .studentResultDetails .categoryScores > li
	{
	padding: 7px 0px;
	}
	
#resultsContainer .categoryScores > li > ul, .studentResultDetails .categoryScores > li > ul
	{
	padding-top: 3px;
	}
	
#resultsContainer th
	{
	text-align: left;
	padding-bottom: 10px;
	}
	
#resultsContainer .examsTaken .studentName
	{
	width: 270px;
	}
	
#resultsContainer .examsTaken .studentScore
	{
	text-align: right;
	}
	
#resultsContainer .weakest li, #resultsContainer .strongest li, .studentResultDetails .weakest li, .studentResultDetails .strongest li
	{
	padding: 5px 16px;
	display: block;
	}
	
#resultsContainer .weakest li.hidden, #resultsContainer .strongest li.hidden, .studentResultDetails .weakest li.hidden, .studentResultDetails .strongest li.hidden
	{
	display: none;
	}
	
#resultsContainer .weakest .tagname, #resultsContainer .strongest .tagname, .studentResultDetails  .weakest .tagname, .studentResultDetails .strongest .tagname
	{
	float: left;
	}
	
#resultsContainer .weakest .scoreDisplay, #resultsContainer .strongest .scoreDisplay, .studentResultDetails .weakest .scoreDisplay, .studentResultDetails .strongest .scoreDisplay
	{
	float: right;
	text-align: right;
	}
	
#resultsContainer .classRankOptions
	{
	padding-left: 32px;
	}

/*------About/non-account------*/
/*General Formatting*/
#infopagelist
	{
	margin-bottom: 14px;
	}
	
#infopagelist li
	{
	margin-bottom: 0px;
	}

/*instructions.php*/
.instructions p
	{
	margin-left: 1.5em;
	}
	
/*awards.php*/
.awards dl
	{
	margin-left: 10px;
	}
	
.awards dt
	{
	font-weight: bold;
	}

.awards dd
	{
	margin: 5px 0px 5px 30px;
	}
	
/*contact.php*/
.contact ul
	{
	margin: 16px 0px;
	}
	
#contactForm
	{
	margin: 0px 10px;
	}
	
#contactForm li
	{
	margin: 5px 0px;
	}
	
#contactForm label
	{
	width: 70px;
	display: block;
	clear: left;
	float: left;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	}
	
#contactForm #subject
	{
	width: 300px;
	}
	
#contactForm #message
	{
	width: 300px;
	height: 250px;
	}
	
#contactForm .submitContainer
	{
	padding-left: 80px;
	}

/*FAQ*/
#faqList dt {
	font-size: 1.125em;
	margin-top: 16px;
}

#faqList dt:hover {
	cursor: pointer;
}

#faqList dd {
	display: none;
	margin-left: 24px;
}



/*------Exam------*/
/*pre-exam.php*/
#preExamInfo div
	{
	padding: 3px 0px;
	}
	
#preExamInfo .strong
	{
	margin-right: 1em;
	/*If we want a constant width for the first spans
	width: 6em;
	display: block;
	float: left;
	clear: left;
	*/
	}
	
#preExamInfo #assignmentInfo
	{
	width: 30em;
	}
	
#preExamInfo #assignmentInfo .backToAccount
	{
	margin-left: 2em;
	}

.preExamForm
	{
	width: 22em;
	margin: 5px 0px;
	}
	
.preExamForm div
	{
	padding: 3px 0px;
	}
	
.preExamForm  label
	{
	width: 9.5em;
	float: left;
	display: block;
	font-weight: bold;
	}
	
.preExamForm  .submitDiv
	{
	width: 22em;
	text-align: center;
	}
	
#takeProctoredExam
	{
	margin-top: 24px;
	}
	
.preExamForm div.error
	{
	height: 1.5em;
	padding: 0em;
	}
	
.preExamForm #reloadProctorForm
	{
	float: right;
	}
	
/*exam.php*/

#examContainer
	{
	position: absolute;
	top: 70px;
	left: 0px;
	width: 100%;
	z-index: 2000;
	}

#exam
	{
	margin: 0px auto;
	width: 688px;
	border: 1px solid black;
	background-color: white;
	padding: 0px 10px 10px;
	}
	
#examTitle
	{
	padding: 0px 25px;
	}	

#examTitle h2, #questionCount, #examTimer
	{
	color: grey;
	}
	
#examProgress
	{
	}
	
#questionCount
	{
	float: left;
	}

#examTimer
	{
	float: right;
	}

#questionsWrapper, #examArea .questionContainer
	{
	width: 688px;
	}
	
#examEnd, #examStart, #examArea #noQuestion
	{
	width: 638px;/*Because of the padding below.*/
	}

#questionsWrapper
	{
	overflow: hidden;
	margin: 0px auto 0px auto;
	}
	
#examArea
	{
	width: 10000px;/*Must be at least five times the size of a question, since, as of now, the most questions we ever have loaded is 5.*/
	float: left;
	}
	
#examArea .questionContainer
	{
	display: block;
	clear: none;
	float: left;
	}

#examArea .question, #examArea .answers
	{
	margin: 0 auto;
	}
	
#passageContainer
	{
	max-height: 150px;
	overflow: auto;
	font-size: 1.16em;
	width: 638px;
	margin: 0px auto;
	}
	
#examArea .question
	{
	font-size: 1.66em;
	padding: 5px 25px;
	}
	
#examArea .answers, #examEnd, #examStart, #noQuestion
	{
	font-size: 1.16em;
	padding: 5px 25px;
	}
	
#examArea .unansweredContainer
	{
	padding: 10px 0px;
	}
	
#examArea .answerForm .submitDiv
	{
	text-align: center;
	}	
	
#examArea .answerForm .submit
	{
	font-size: 20px;
	}
	
#examArea .answerForm .error
	{
	text-align: center;
	height: 1.5em;
	}
	
/*The styling above uses a float and margin model to slide questions side to side. absolute position model. Never got this to work completely, since the absolutely positioned questions wouldn't be hidden with an overflow: hidden on #examArea. Setting overflow to hidden also messed up the position for some reason.
#examArea
	{
	width: 550px;
	margin: 5% auto 0px auto;
	}
	
#examArea .questionContainer
	{
	
	width: 550px;
	position: relative;
	}
	
#examArea .questionContainer.hidden
	{

	}

This is the scripting that worked

var position = thisQuestion.position();
		var x = position.left + 550;
		var y = position.left - 550;
		$("#testing").html(x + " " + thisQuestion.position().left + " " + y);
		nextQuestion.css({display: 'inline', left: y + 'px'}).animate({left: position.left + 'px'}, 500);
		thisQuestion.css({left: position.left + 'px'}).animate({left: x + 'px'}, 500, function()
			{
			questionNumber++;
			if (totalQuestions >= questionNumber)
				$("#questionNumber").text(questionNumber);
				
			$(this).add(rejectedQuestion).remove();
			});*/	
	
/*examReview.php*/
#examReview div
	{
	margin: 5px;
	}
	
#examReview #examResultsInfo
	{
	font-size: small;
	}
	
#missedQuestions
	{
	/*overflow: auto;
	max-height: 600px;*/
	}
	
#missedQuestions .questionContainer
	{
	padding: 5px 5px 10px 10px;
	border-bottom: 1px solid;
	}
	
#missedQuestions .question, #missedQuestions .answers
	{
	padding-bottom: 5px;
	}

#missedQuestions .answers > div
	{
	margin-left: 20px;
	}
	
#missedQuestions .questionNumberDiv
	{
	text-align: right;
	padding: 0px;
	}
	
#missedQuestions .passageText {
	max-height: 250px;
	overflow: auto;
}
	
.questionChallengeForm label, .questionCommentForm label
	{
	font-weight: bold;
	vertical-align: top;
	}
	
.questionChallengeForm > div, .questionCommentForm > div
	{
	padding: 5px;
	}
	
.questionChallengeForm #challengeText, .questionCommentForm #commentText
	{
	width: 90%;
	height: 100px;
	}
	
.questionChallengeForm .submitDiv, .questionCommentForm .submitDiv
	{
	margin-left: 20px;
	}
	
#finishedExamReviewForm
	{
	margin-top: 32px;
	text-align: center;
	}
	
	
/*------admin------*/
/*homePage.php*/
.adminHome form li {
	padding: 4px 0px;
}

/*getQtipClassList.php*/
.grantPassClassListForm > ul > li {
	padding: 8px 0px;
}

.grantPassClassListForm .h4:hover {
	cursor: pointer;
}

/*editNationalExam.php*/
/*See instructorExams.php under the account pages*/


/*other*/
.loadQuestions
	{
	margin: 10px 0;
	font-weight: bold;
	}
	
.loadQuestions div
	{
	padding: 1%;
	}

.questionCheckForm
	{
	margin: 40px 0;
	font-weight: bold;
	}
	
.questionCheckForm div
	{
	padding: 1%;
	}

.questionCheckForm .question	input
	{
	width: 67%;
	}
	
.questionCheckForm .answers
	{
	float: left;
	width: 65%;
	}
	
.questionCheckForm .answers input
	{
	width: 300px;
	}
	
.questionCheckForm .tags
	{
	float: right;
	width: 260px;
	}
	
.questionCheckForm .tags span
	{
	vertical-align: top;
	}