/*****************************************************************************
* Text styling
*****************************************************************************/
body, input, textarea, select {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .8138em; 
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-top: 0.6em;
  margin-bottom: 0.8em;
}
h1, h3, h5 {
  color: #175b5a;
}

h2, h4, h6 {
  color: #3366cc;
}
h1 {
  font-size: 1.5em;
  margin-top: 0.3em;
}
h2 {
  font-size: 1.3em;
}
h3 {
  font-size: 1.1em;
}
h4 {
  font-size: 0.85em;
}

a {
font-weight: bold;
}
a:link {
color: #043d58;
text-decoration: none;
}
a:visited {
color: #6633CC;
text-decoration: none;
}
a:hover {
color: #1d9dda;
text-decoration: underline;
}

p, ul, ol, dd {
  margin-top: 0;
  margin-bottom: 0.5em;
}
img {
	border: none;
	
}
#content p{
  line-height: 130%;
  margin-bottom: 1.33em;
  color:#333333;
  margin-left: 3em;
  margin-right: 2em;
}
dt {
  font-weight: bold;
}
dl, dd {
  margin-left: 0;
  padding-left: 2em;
}
strong {
color: #333333;
}


/*****************************************************************************
* Special-purpose rules
*****************************************************************************/
.transport {
  background-color: #dddddd;
  padding: 1em 2em;
  margin: 1em 2em;
  font-size: 0.85em;
}
.stratos_flashes {
  margin: 1em 4em;
  padding: 0;
}
.stratos_flashes li {
  list-style-type: none;
  padding: 0.3em;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid #999999;
}
.stratos_flash_error, .wronganswer {
  font-weight: bold;
  color: #750606;
}
.stratos_flash_success, .rightanswer {
  font-weight: bold;
  color: #044404;
}
.required {
  font-size: 0.75em;
}
.reveal {
  font-weight: bold;
  padding: 0.1em 0.3em;
  background-color: #ddff00;
}



/*****************************************************************************
* Forms
*****************************************************************************/
form {
  margin: 0; /* Come on, the fact that some content is inside a form
  * doesn't mean it ought to have extra margin around it. */
}
.tableless label {
  width: 100px;
  text-align: right;
  float: left;
  margin: 0.4em;
}
.tableless input, .tableless select, .tableless textarea {
  float: left;
  margin: 0.4em;
}
.tableless br {
  clear: left;
}
.lineitem {
  display: block;
}
.inlineitem {
  display: inline;
  white-space: nowrap;
}
.required { /* this is for the Required Fields asterisk */
  color: #750606;
  font-weight: bold;
  font-size: 0.7em;
}


/*****************************************************************************
* Page layout
*****************************************************************************/
html, body {
  margin: 0;
  padding: 0;
}
body {
  color: #000000;
  background-color: #238785;
  background-image: url(../images/stressbackground1.jpg);
  background-repeat: no-repeat;
}

.floatright {
float: right;
}

.floatleft {
float: left;
}
.imagepadfloatleft {
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 0;
	float: left;
}
.imagepadfloatright {
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	float: right;
}

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}
.clearboth {
	clear: both;
}

#header {
  background-color: #295252;
  height: 88px; /* 88px image height minus 40px padding of grey line */
}
#banner {
  display: block;
  float: left;
   width: 350;
}
#topnav {
  position: absolute;
  left: 360px;
  padding-top: 50px;
  background-image: url(../images/greyline.jpg);
  background-repeat: repeat-x;
  background-position: 0 40px;
  height: 38px;
  width: 100%;
  z-index: 2;
}
#topnav ul li {
  list-style-type: none;
  display: block;
  float: left;
  padding: 0;
  margin-left: 0;
  margin-right: 60px;
}
#topnav ul li a {
  display: block;
  float: left;
  background-image: url(../images/headerbutton-off.jpg);
  background-repeat: no-repeat;
  padding-left: 30px;
  height: 30px;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}
#topnav ul li a:visited {
  color: #ffffff;
}
#topnav ul li a:hover, #topnav ul li a:active, #topnav ul li a:focus {
  color: #ffffff;
  background-image: url(../images/headerbutton-on.jpg);
  text-decoration: underline;
}
#sidenav {
  clear: both;
  width: 180px;
  float: left;
  margin: 0;
  padding: 10px 10px 0 0;
}
#sidenav li {
  margin: 0;
  padding: 0 0 0 10px;
  list-style-type: none;
  display: block;
}
#sidenav li a {
  display: block;
  padding: 10px 0 0 75px;
  vertical-align: middle;
  height: 70px;
  background-repeat: no-repeat;
  font-size: 1.00em;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
}
#sidenav li a:visited {
  color: #000000;
}
#sidenav li a:hover, #sidenav li a:active, #sidenav li a:focus {
  text-decoration: underline;
  color: #000000;
}
#face1 a {
  background-image: url(../images/face1.gif);
}
#face2 a {
  background-image: url(../images/face2.gif);
}
#face3 a {
  background-image: url(../images/face3.gif);
}
#face4 a {
  background-image: url(../images/face4.gif);
}
#face5 a {
  background-image: url(../images/face5.gif);
}
#face6 a {
  background-image: url(../images/face6.gif);
}
#face1 a:hover, #face1 a:active, #face1 a:focus {
  background-image: url(../images/face1_over.gif);
}
#face2 a:hover, #face2 a:active, #face2 a:focus {
  background-image: url(../images/face2_over.gif);
}
#face3 a:hover, #face3 a:active, #face3 a:focus {
  background-image: url(../images/face3_over.gif);
}
#face4 a:hover, #face4 a:active, #face4 a:focus {
  background-image: url(../images/face4_over.gif);
}
#face5 a:hover, #face5 a:active, #face5 a:focus {
  background-image: url(../images/face5_over.gif);
}
#face6 a:hover, #face6 a:active, #face6 a:focus {
  background-image: url(../images/face6_over.gif);
}
#breadcrumb {
  background-color: #eeeeee; 
  margin: 0px 10px 0px 220px;
  /*width: 622px;*/
  width: inherit;
  padding: 2px;
}

#breadcrumb a, 
#breadcrumb a:link, 
#breadcrumb a:active, 
#breadcrumb a:visited {
	color: #175b5a;
}
#content {
  margin: 0px 20px 20px 220px;
  background-color: #ffffff;
  padding: 20px 20px 40px 20px;
  width: 586px;
}

#postcard {
 float: left;
  margin: 20px 20px 20px 20px;
  width: auto;
  height: 417px;
}
#footer {
  clear: both;
  /* I have no idea what goes in the footer. */
}
.thumbnail {
border: 1px solid #ccc;
padding: 10px;
width: auto;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0;
margin-left: 0;
}

.tableStyle {
color: #333333;
border: none;
}

.tableStyle th {
background-color:#3366CC;
color: #fff;
vertical-align:bottom;
text-align: center;
padding: 4px;
}

.tableStyle td {
padding: 10px;
margin: 6px;
border: none;
background-color: #DAF7FF;
}
.tableStyle ul li {
font-size: .85em;
list-style-type: circle;
padding-right: 10px;
padding-bottom: 1em;
}

/* adding some styles for the stage of change quiz */