/* CSS for the CATEA Universal Design Web Course */

/* Standard Tags */
a img {
text-decoration: none;
border: 0px;
}

.center {
text-align: center;
width: 100%;
}

.floatImgLeft{
float: left;
width: 275px
}

.floatImgRight{
float: right;
width: 275px
}

.clearDiv {
clear: both;
height: 0;
}

.clearDivH1 {
clear: both;
height: 0;
}

.clearDiv + h2 {
margin: 0;
padding: 0;
}

body {
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
background:white;
margin: 0px;
height: auto;
background-image: url('../images/greybarbackground.jpg');
background-repeat: repeat-y;
color: #333333;
}

caption {
font-weight: bold;
text-align: left;
border: 1px solid black;
padding: .5em;

}

p {
margin-top: 0px;
}

.iconDivH1 {
width: 100%;
}

h1 {
font-size: 180%;
color:#666666;
font-family:Geneva, Arial, Helvetica, sans-serif;
border-bottom: 4px solid #CCCCCC;
}


h2,h3,h4,h5,h6{
margin: 1em 0 .25em 0;

}

h2 {
font-size: 170%;
color: #60739C;
}
h3 {
font-size: 150%;
font-weight: bold;
}

h3 + h4 {
margin-top: 2em;
}

h3 {
font-size: 150%;
font-weight: bold;
}

h4 + h5 {
margin-top: 2em;
}

h4 {
font-size: 120%;
}

h5 + h6 {
margin-top: 2em;
}

h5 {
font-size: 120%;
font-weight: bold;
font-style: italic;
}


h6 {
font-size: 100%;
font-weight: bold;
font-style: italic;
}

a:link {
color: #28527F;
}

a:visited {
color: #28527F;
}

a:hover {
color: #28527F;
}

a:active {
color: #28527F;
}

img {
border: 0px;
}

q:before {
content: no-open-quote;
}

q:after {
content: no-close-quote;
}

blockquote {
background-color: #FFFFCC;
padding: 1em;
}

blockquote:before {
content: no-open-quote;
}

blockquote:after {
content: no-close-quote;
}


div.caption {
border: 1px solid grey;
padding: .5em;
background-color: #f1f1f1;
margin-bottom: 2em;
}

/* General Site Classes and IDs */
#contentContainer{
width: 1000px;
min-height: 400px;
padding-bottom: 50px;
}

.skiplinks {
background-color: #60739C;
width: 980px;
padding: 10px 10px;
}

.skiplinks a{
color: white;
}

em.sim {
text-decoration: underline;
color: blue;
font-style: normal;
}

.red {
color: red;
}

.menuLabel {
display: none;
}

.bold {
font-weight: bold;
}

.normal{
font-weight: normal;
}

ol ul {
padding-left: 1em;
}

ol ol {
list-style-type: upper-alpha;
}

ol ol ul{
list-style-type: circle;
padding-left: 0em;
}

ul li {
padding: .5em 0em;
}

ol li {
padding: .5em 0em;
margin-left: 2em;
}

ul li + h2,h3,h4,h5,h6 {
padding-top: 0;
margin-top: 0;
}

.inline li{
display: inline;
padding-right: 1em;
}

.hide {
position: absolute;
float: left;
left: -9999px;
}

/* Top Banner */
#banner {
height: 118px;
width: 1000px;
}

#header1{
height: 118px;
width: 1000px;
}

#header2 {
width: 1000px;
background-image: url('../images/stem_top_bars.gif');
background-repeat: repeat-x;
background-position: top;
height: 112;
}

#header1 img {
vertical-align: middle;
}

#headerText {
font-family: Myriad, Arial, Helvetica, sans-serif;
height: 118px;
color: white;
font-size: 190%;
font-weight: bold;
}

/* Left Navigation */

#leftcontent {
font-size: 100%;
float: left;
width: 200px;
padding: 10px 0px 0px 0px;
background-color: #f1f1f1;
}

#leftcontent ul {
list-style-type: none;
padding: 0;
width: 200px;
margin: 0px;
background-color:#CCCCCC;
}

#leftcontent ul li {
padding: 7px 10px;
border-top: 1px solid black;
}

#leftcontent ul li a:link{
color: black;
text-decoration: none;
}

#leftcontent ul li a:visited{
color: black;
text-decoration: none;
}

#leftcontent ul li ul{
display: block;
border-bottom: 1px solid #cccccc;
width: 190px;
margin: 7px 0 0 0;
padding: 0;
background-color: #efefef;
}

#leftcontent ul li ul li{
background-color: #efefef;
margin-left: -10px;
padding-left: 20px;
}


/* Center Content */

#centercontent {
float: left;
width: 550px;
padding-left: 25px;
padding-right: 25px;
}

dt {
font-weight: bold;
font-size: 120%;
}

dd {
padding: 1em 0em;
}

.icon {
vertical-align: middle;
}

.iconDiv {
width: 100%;
}

.iconDiv + ul,ol {
margin-top: 0;
padding-top: 0;
}

.visit {
line-height: 25px;
border: 1px dashed #5C87BC;
padding: 7px;
background-color: #DFECFB;
}


div.backtoTop {
width: auto;
font-weight: bold;

}

span.backtoTop{
line-height: 27px;
vertical-align: middle;
}

a.backtoTop:link {
float: right;
color: black;
}

a.backtoTop:visited {
float: right;
color: black;
}

a.backtoTop:hover {
float: right;
color: black;
}

a.backtoTop:active {
float: right;
color: black;
}

.imgContainer{
text-align: center;
width: auto;
}

img.content{
border: 1px solid black;
}
img {
text-decoration: none;
}

.imgCaption {
text-align: left;
color:#666666;
font-size: 85%;
}

.indentDIV {
padding-left: 20px;
padding-right: 20px;
}

.underline {
text-decoration: underline;
}

ul.guideLI {
list-style-type: none;
font-style: italic;
margin-left: 0em;
padding: .5em;
border: 1px dashed gray;
}

ul.guideLI li {
padding: .25em 0em .5em 0em;
}
/* Center Content - Code */

.codeDIV{
padding: 10px;
background-color: #FFFFCC;
margin-bottom: 2em;
}
/* Right Content */

#rightcontent {
float: right;
padding: 0px;
width: 198px;
}

/* Arrow Set */
div.arrowSet {
width: 100%;
font-size: 110%;
font-weight: bold;
}



a.arrow:link {
text-decoration: none;
}

a.arrow:visited {
text-decoration: none;
}


img.arrowImg {
border: 0px;
height: 27px;
width: 27px;
vertical-align: middle;
}

.floatLeft {
float: left;
clear: left;
}

.floatRight {
float: right;
clear:right;
}

.iconDiv {
padding: 1em 0em;
}

img.icon {
vertical-align: middle;
}

.iconLeft {
float: left;
width: 35px;
}

.iconRight {
float: left;
margin-top: 5px;
width: 400px;
}

.iconRight h3,h4{
padding: 0px;
margin:0px;
}


.blueTitle1{
font-size: 90%;
background-color: #F2C7BE;
border: 1px solid #999999;
width: 192px;
padding: 3px;
text-align: left;
font-weight: bold;
clear: both;
}

.blueTitle2{
font-size: 90%;
background-color: #CCE389;
border: 1px solid #999999;
width: 192px;
padding: 3px;
text-align: left;
font-weight: bold;
clear: both;
}

.blueTitle3{
font-size: 90%;
background-color: #FDF0BC;
border: 1px solid #999999;
width: 192px;
padding: 3px;
text-align: left;
font-weight: bold;
clear: both;
}

.blueTitle4{
font-size: 90%;
background-color: #CDECF1;
border: 1px solid #999999;
width: 192px;
padding: 3px;
text-align: left;
font-weight: bold;
clear: both;
}

.blueTitle img {
vertical-align: middle;
}

.rightlinkContainer {
font-size: 90%;
margin-top: 1px;
padding: 5px 5px 25px 5px;
width: 188px;
border: 1px solid gray;

margin-bottom: 15px;
}

a.rightLink:link{
text-decoration: underline;
color: black;
}

a.rightLink:visited{
text-decoration: underline;
color: black;
}

a.rightLink:active{
text-decoration: underline;
color: black;
}

a.rightLink:hover{
text-decoration: underline;
color: black;
}

ul.rightUL {
margin-bottom: 2px;
list-style-type: none;
padding: 0px 0px 0px 10px;
}

.rightUL li{
padding: 3px 0px;
margin-top: 5px;
}

.rightUL li ul,ol{
padding-left: 1em;
}


.rightsubTopics {
font-weight: bold;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 4px;
margin-top: 10px;
margin-bottom: -5px;
color: gray;
}

.indentRight{
padding: 0px 5px;
}
/* Login */
.login {
padding: 5px 0px 0px 10px;
}

/* Footer */
#footer{
padding-bottom: 10px;
width: 1000px;
margin-left: 10px;
background-color: white;
border-top: 1px solid gray;
padding-top: 10px;
color: #666666;
text-align: center;
font-size: 85%;
}

.footnotes {
font-size: 90%;
color: #666666;
margin-top: 3em;
}



/* Forms */

.formDIV {
width: 80%;
}

/* Glossary of Terms */
.glossaryH2 {
margin-top: 0px;
font-size: 115%;
}

.glossaryH3 {
font-size: 115%;
}

.glossaryTerm {
margin-left: 25px;
}

/* JavaScript Examples */

.main {
width: 20%;
border: 1px solid #123466;
background-color: #FFCCCC;
padding: 3px;
}

.sub {
width: 20%;
border: 1px solid #123466;
background-color: #ffffff;
padding: 3px;
}

fieldset.question {
margin-bottom: 35px;
}

/* Questions and Answers */
.not_in_question {
text-decoration: underline;
text-transform: uppercase;
}

/* SciTrain Specific*/


ol.alpha {
list-style-type: upper-alpha;
}

.doubleUnderline {
text-decoration: underline;
padding-bottom: 1px;
border-bottom: 1px double black;
}

/* Pop-Up Images*/
.thumbnail{
position: relative;
z-index: 0;
}


.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0px;
left: 60px; /*position where enlarged image should offset horizontally */

}
/* Glossary Terms */

a.termLink {
position: relative;
z-index: 0;
}

div.popInline {
background-color: white;
padding: 5px;
border: 1px solid gray;
color: black;
text-decoration: none;
width: 400px;
background-color: #FFFFCC;
padding: 1em;
}

div.term{
position: absolute;
background-color: white;
padding: 5px;
border: 1px solid gray;
color: black;
text-decoration: none;
width: 400px;
background-color: #FFFFCC;
padding: 1em;
}


div.term dl{
margin: 0px;
padding: 0px;
}

div.term dd{
margin-left: 0px;
}




/* Glossary Terms */