/* created by Lorena Barreto in Jul 2009 */

body {
     background-color: ffffff; 
     font-family: /*100% */ Arial, Helvetica, Verdana, 'sans-serif'; /*put in 100%; seems that padding at sides of writing
	  in navbar are more narrow */
     padding-left: 0; 
     width: 800px; 
	 margin: 0 auto; 
	 text-align: center; 
     } 

div.container {
	width:98%; 
	border:1px solid #99ccff;
	line-height:100%;
	text-align: justify;
}

.banner {
     color: #003399;
     padding-left: 0.5em;
     padding-top: 0.5em;
     padding-bottom: 2em; /*removed break, so put this to reduce white space 
                              below, but can exclude this to make space smaller.  However, when reducing to small text to view page
							  found that the image was over the nav bar, so increased padding space here from 0.5 to 2em*/
     width:98%; /*as text is right-aligned, width put to avoid white jutting out and to ensure text doesn't touch edge*/
     }

#texto_container {
     background-position: center y-3%; 
     position: relative; /* ensures text is not hidden by box before */
     /* top: 2em; hiding this removed space at top */
     /* padding: 0.5%;  was 2.5%; seems to reduce space at top a little but didn't notice that space left and right also reduced*/
     padding-top: 0;
/*	 padding-left: 15px;
	 padding-right: 15px; */
     width: 46em; 
     margin: 0 auto; 
     }

.twoColElsLt #sidebar1 {
	float: left; 
	width: 12em; 
	background: #ccccff; 
	padding: 15px 0; 
    text-align: left; /* this overrides the text-align: center on the div.container element above. */
    font-variant: small-caps; 
}

.twoColElsLt #sidebar1 p {
	margin-left: 10px; 
	margin-right: 10px;
	color: #ffffff;
}

.twoColElsLt #sidebar1 a:visited {
color: #333333; 
}

/* seems that now that i´ve changed the a:visited link color in the sidebar, the a:hover doesn´t work in the sidebar
unless defined.*/
.twoColElsLt #sidebar1 a:hover {
   color:#990033;
            text-decoration:bold;
   } 

a:link    {color:#003399;
	text-decoration:bold;
}

a:visited {color: #999999;}

a:hover   {color:#990033;
            text-decoration:bold;
          }
a:active  {color:mediumblue}

a.nav
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}

a.nav:hover {background-color:#ff3300}

.twoColElsLt #mainContent {
 	margin: 0 0.5em 0 12em; 
	padding-left: 1.5%;
	
	/* border-left: dashed #FFFF00; this comes very close to text and there is extra space btw sidebar and mainContent.  However adjusting 
	margins and putting a padding on the left can solve this. */ 
	/*	border-right: dashed medium #990099;  seems like ordinary borders not visible here */
} 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.links {
     border-bottom: medium solid #003399;
	 border-top: medium solid #003399;
     color: #003399;
     }

.links1 {
          border-top: thin solid #003399; 
     border-bottom: thin solid #003399;
     } 

h2, h3, h4  {
    color: #003399; /* was #000080;*/
	font-variant: small-caps;
	/* for side bar, font-variant set in sidebar element so not needed here.  however, incl here instead of repeating in main container */
     }

h1 {
   letter-spacing: 0.5px;
   line-height: 99%;
   color: #003399;
   text-align: center;
   font-variant: small-caps;
   }

h5 {
     text-align: right;
     font-size: 14px;
	 padding-right: 1em;
     color: #000080; 
	 /* font-weight: bold;  this doesn´t seem to work here; also color change doesn't seem to work here */
    }

.footer {
     background-color: #ffff99; 
     text-align: right;
     }

hr {
   color: #003399;
   }

.nav {
    text-align: center;
    line-height: 25px; /* this is for the space between lines if nav is made up of 2 lines */
    font-variant: small-caps;
	border-bottom: thick solid #ffcc00;
	 border-top: thick solid #ffcc00;
    }

.footer {
     border-top: thick solid #003399;
     text-align: center;
     padding:0.3em;
	 font-variant: small-caps;
     font-size: 90%;
     color: #666666;
     text-decoration: bold;
}

ul {
   list-style-type: disc; /* was circle; disc is a solid circle */
  /*  text-indent: 5px; This is the gap btw the bullet point and the text */
   }

/*  li:first-line {
   color: #990033;
   font-variant: small-caps;
   font-weight: bold; */
   /* list-style-type: circle; */
   /*} */
  
ol {
   color: #999933;
   }

.links {
     background-color: #ffffff; /* was #ffff99; */
     border-bottom: medium solid #003399;
	 border-top: medium solid #003399;
     color: #003399;
     }

/* img.x {
   position:absolute; 
important to be positioned behind the text */
/*   z-index: -1;
   default z-index is 0.  Z-index -1 has lower priority
and is used to place an element "behind" another element. 
      }
	  */


  
@media print 
{
title {font-family:Arial, Helvetica, Verdana, times, sans-serif; font-size:10px;}
p, ul, ol {font-family:Arial, Helvetica, Verdana, times, serif; font-size:16px;}
h1, {font-family:Arial, Helvetica, Verdana, times, serif; font-size:28px;}
.footer {font-family:Arial, Helvetica, Verdana, times, serif; font-size:10px;}
.cima, .footer {background: #ffcc00; /* was #ffff99; */}
}

@page figures {
size: landscape;
}