@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: 1070px;
}

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

#header {
         padding:0;
         width: 100%;
         height: 110px;
		 background-color:#fff;
		 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: 80%;
		   float: left;
		   margin-bottom: 1%;
		   margin-left: 2%;
		   height: 820px;
		   color:#666699;
		   padding-right: 3%;
		   }
/* 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;
					  }
					  
.content .float_left_1 {float: left;
                      margin-right: 1.5em;
					  margin-bottom: 0.5em;
					  margin-top: 1.1em;
					  }					  

.content .float_right {float: right;
                      margin: 0.4em 1.5em 1em 1em;
					  
					  }
					  
.content .float_right,.float_left,.float_left_1 img {border: 1px solid #7D7D9E;} 					  
					  					  
.content ul li {font-weight: bold;
                 line-height: 1.5em;
				 font-size: 70%;
				 margin-bottom: 1em; 
				}
				
.content p {line-height: 1.6em;
			font-size: 75%;
			}				
				
.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.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;}

.content .no_border { border:none;}

/*  this is a cell that contains the youtube videos. Also there is a rule for the box containing the vids themselves.*/	

.content .outside-vid-box {height: 140px;
                           width: 100%;
						   margin-bottom: 5%;
						  }

.content .outside-vid {width: 240px;
                       height: 175px;
					   float: left;
					   border: 1px solid #7D7D9E;
					   margin-right: 2.5%;}
					   
.content .outside-vid1 {width: 240px;
                       height: 175px;
					   float: left;
					   border: 1px solid #7D7D9E;
					   margin-right: 0;}					   

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

.right          {text-align: center;
                 width: 12%;
		         float: left;
                 height: 807px;
				 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;
}