@charset "utf-8";
/* CSS Document */

/* colour range: from #fff to #333366 to #000 */


body {margin: 0;
      padding: 0;
	  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	  font-size: 100%;
	   }
	 
/* Contains all */  
	   
#container { width: 99%;
			background-color: white;
			margin: auto;
            padding: 0;
			border: 1px solid #C7C7D5;
			height: 1250px;
}

/* Header. Includes de navigation (menu-top and menu-bottom) */

#header {
         padding:0;
         width: 100%;
         height: 110px;
		 background-color:#FFFFFF;
		 border-bottom: 1px solid #C7C7D5;
		 }
		 
#header img {margin-left: 2%;
             margin-top: 1.5%;
			 border: 0;}		 
 
		 		 
#header h1 { margin-left: 10%;
             margin-top:-5%;
             color: #464674;
			 font-size: 140%;
}  
		
			 		
#header .header-right {
	width: 150px;
	height: 110px;
	position:absolute;
	top:-1px;
	right:49px;
	padding: 0;
				}
					
					

#menu {width: 80%;
	background-color: #585882;
	font-size: 70%;
	float: left;
    margin-left:2%;
	height:21px;
	margin-top: 25px;
	}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu li a {
	float: left;
	padding: 4px 18px;
	text-decoration: none;
	color: #DADAE3;
	text-align: center;
	border-right: 2px solid #fff;
	font-weight:bold;	
	background-color: #585882;
	
}

#menu a:hover {

background-color: #6B6B90;

}

#menu .selected a {
	
	color: #000;
}
					
		   
/*the h2 names de page and it stacks between the header div and the content div. There is a floated right div too*/	

h2          {font-size: 80%;
             margin: 2% 0 0.5% 2%;
			 color:#585882;
			 }
			 
.line           {width: 96%;
                height: 1px;
				background-color:#B5B5C7;
				margin-left:2%;
				
}		   			 
					   				
				
/*  All main text content. Floated to the left. There is a cell floated right later but thinner. There might be additional css documents for each particular page */					
				
.content { background-color: #fff;
           width: 83%;
		   float: left;
		   margin-bottom: 1%;
		   margin-left: 2%;
		   height: 935px;
		   color:#666699;
		   
		   }

		   	
	
.content .box   {float: left; 
                 width: 44.5%;
                 padding-left: 0;
				 border-top: 2px solid #C7C7D5;
				 padding: 0 1%;
				 margin-top:1em;
			     margin-right: 1em;
				 margin-bottom: 0.5em;
				 background-color:#F3F3F6;
				 height: 135px;
				 				 }
								 
.content .box-small   {
	             float: left; 
                 width: 44.5%;
                 padding-left: 0;
				 margin-top:0;
			     margin-right: 2.2em;
				 height: 80px;
				 margin-bottom: 0.5em;
				 
				 }
/* Invisible box containing all 3 videos   */					 
.content .box-wide { width: 100%;
                    margin-top:1em;
				    float: left;
					height: 180px;
					margin-left: 1%;
					}
/* box for the videos 3 in total inside box-wide  */							
.content .box-wide .video {width: 220px;
                          border: 2px solid #C7C7D5;
						  float: left;
					      height: 175px;
						  margin-right: 1.8%;}
						  
.content .box-wide .video1 {width: 220px;
                          border: 2px solid #C7C7D5;
						  float: left;
					      height: 175px;
						  margin-right:0;}						  
						  
/* box for flash animation under the videos  */	

.content .box-wide-animation { width: 88%;
                    margin-top:1%;
				    float: left;
					height: 31px;
					border: 2px solid #C7C7D5;
					padding-left: 1.5%;
					}	
					
/* This below is the box across below the videos animation and above footer */

.content .box-wide-bottom-announcements { width: 94%;
                    margin-top:1em;
				    float: left;
					height: 50px;
					}	
					
.content .box-wide-bottom-announcements img{ 
                    height: 50px;
				    float: left;
					border: 1px solid #C7C7D5;
					margin-right:2%;
					}						

/* all the rest of stuff in content  */	

.content a { color: #7D7D9E;}

.content a:hover { color: #666699;}									 
								 
.content .float_left {float: left;
                      margin-right: 1.5em;
					  margin-bottom: 0.5em;
					  margin-top: 1em;
                    }
					
.content .float_left1 {float: left;
                      margin-right: 1.5em;
					  margin-bottom: 0.5em;
					  margin-top: 0.5em;
                    }					

.content .float_right {float: right;
                      margin-left: 1.5em;
					  margin-bottom: 1em;
					  margin-top: 1em; }
					  
.content .float_right1 {float: right;
                      margin-left: 1.5em;
					  margin-bottom: 1em;
					  margin-top: 0.3em;
					  margin-right: 2.5em;}					  
					  
.content .float_right, .float_left,.content .float_right1,.content .float_left1 img {border: 1px solid #7D7D9E;} 					  
					  					  
.content ul li {font-weight: bold;
                 line-height: 1.5em;
				 font-size: 70%;
				 margin-bottom: 1em; 
				}
				
.content p.top {
                margin-top: -0.5em;
                }				
				 


.content h3 {font-size: 70%;
             margin-top: 1em;
			 background-color:#A2A2B9;
			 padding: 0.2em 0 0.2em 0.5em;
			 color:#ECECF1;
			 }
			 
.content .center {
			 text-align: center; }			 	

.content h4 {font-size: 70%;
             margin-top: 1em;
			 line-height: 1.2em;
			 }


.content p {
           line-height: 1.5em;
			font-size: 75%;
			}
				 


.content p.short { width: 95%;}				 

.content p.bold { font-weight:bold;}

.content p.urgent { font-weight:bold;
                    color:#993300;}
					
			


.content p.italic { font-style:italic;}

												  
.content .inline     {float: left;
                      margin: 2.7em; }					  


.content .border { border: 1px solid #999999;
                  padding: 2em;
				  margin-bottom: 2em;}
				  		 
.content p.bold {font-weight: bold;}

.content p.center {text-align:center;}

.center {text-align:center;}

.content p.clear {clear: both;}

/*  this is a cell floated to the right with margin right 0*/	

.right          {text-align: center;
                 width: 12%;
		         float: left;
                 height: 984px;
				 border: 1px solid #B5B5C7;
				 background-color:#fff;
				 margin-bottom: 1em;
				 margin-top: 1em;
				 margin-left:0;
				 margin-right: 0;
				 
				 }
				 
.right p { font-size: 65%;
            color:#6B6B90;
          }	
		  
.right p.top { margin-top: -10%;
          }	
		  
.right p.member  {
				  width: 100%;
}

		  

.right p.member a {
                  padding: 0;
				  border: none;
}

.right p.member a:hover {background-color:#C7C7D5;
                }
				
				 
.right p a { font-size: 100%;
          color: #000066;
		  border: 0;}
		  
.right p a:hover { font-size: 100%;
                color: #666699;}
				
.right h5 {text-align:center;
              color: #6B6B90;
			 font-size: 60%;
			 margin-top: 3%;
			 line-height: 1.2em;
			 padding: 4px;
		}
		
.right .small-line { width: 90%;
                height: 1px;
				background-color:#B5B5C7;
				margin:4% auto;}			

.right .no_border {border: none;}

.right img {border: 1px solid #B5B5C7;}

/* clearer */

.clearer {clear: both;}		

/* Footer */				 		
				    

#footer { 
	color:#6B6B90;
	font: bold 0.6em Verdana;
	line-height:1.8em;
	text-align: center;
    background-color:#fff;
	border-top: 1px solid #B5B5C7;
	padding: 0.4em 2em;
}