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

/*limited reset*/

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* html5 display rule */

article, aside, canvas, details, figcaption, figure, header, footer, hgroup, menu, nav, section, summary {display: block;}


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #46466B;
}
				   
/* Contains all */

#container {
	width: 62.5em;
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #B9B9C7;
	border-top: none;
	text-align: left;
}

#container a img { 
	border: none;
}

/* Header */

#container header.mainHeader { 
	padding:0;
    width: 100%;
    height: 100px;
    background-color:#FFFFFF;
	border-bottom: 1px solid #B9B9C7;
	background-image:url(images/header-background-2011.gif);
	background-position:left;
	background-repeat: no-repeat;
}
			 
#container header.mainHeader h1 {display: none;}

#container header.mainHeader h2 {display: none;}


#container header.mainHeader .image-right {
	width: 150px;
	height: 100px;
	float: right;
	margin: 0 0.7em;
	padding: 0;
				}

/* Main navigation */
							 
#container nav.menu {
	background-color: #747490;
	font-size: 70%;
	width: 100%;
	height:17px;
	margin-bottom: 2em;
	}

#container nav.menu h1 {display: none;}

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

#container nav.menu li {
	display: inline;
}

#container nav.menu li a {
	float: left;
	padding: 2px 18px;
	text-decoration: none;
	color: #E8E8EC;
	text-align: center;
	border-right: 2px solid #fff;
	font-weight:bold;	
	background-color: #747490;
	
}

#container nav.menu a:hover {

background-color: #8B8BA2;
color: #000033;

}

#container nav.menu a.selected {

background-color: #A2A2B5;
color: #000033;

}

/* the h2 names de page and it stacks between the header div and the content div */	

#container h2 {font-size: 80%;
             margin: 2% 0 0.5% 2%;
			 color:#46466B;
			 }
			 
#container .line {width: 96%;
                height: 1px;
				background-color:#B9B9C7;
				margin-left:2%;}		

/* This is all the main content on the left */	
	
				
#container .content { background-color: #fff;
           width: 98%;
		   float: left;
		  margin-left:1em;
		   color:#33334E;
		   font-size: 1em;
		   
		   }

/* 2 article boxes with information about the Society in English and Euskara. Each with its own h1 and p */	

#container .content .buruz   {margin: 1em 1em 0 0;
	             float: left; 
				 width: 47.8%;
                 padding: 0;
				 height: 75px;
				 background-color:#F9F9FA;
				 border: 1px solid #B9B9C7;
				 }
				 
#container .content .buruz h1 {font-size: 70%;
             margin-top:0;
			 background-color:#46466B;
			 padding: 0.1em 0 0.2em 0.7em;
			 color:#E8E8EC;
}					 	
				 
#container .content .buruz p  {padding: 1em;}	

#container .content .about   {
	             float: left; 
                 width: 47.8%;
                 padding:0;
				 margin: 1em 0 0 0;
			     height: 75px;
				 background-color:#F9F9FA;
				 border: 1px solid #B9B9C7;
				 }	
				 
#container .content .about h1 {font-size: 70%;
             margin-top:0;
			 background-color:#46466B;
			 padding: 0.1em 0 0.2em 0.7em;
			 color:#E8E8EC;
}	

#container .content .about p  {padding: 1em;}						 
				 

/* section box with important information or with soon-to-come events  */					 				 				 
#container .content .berriak-news   {float: left; 
                 width: 97.5%;
                 padding: 0;
				 margin: 0.5em 1em 0 0;
			     background-color:#F9F9FA;
				 border: 1px solid #B9B9C7;
				 }
				 
#container .content .berriak-news h1 {font-size: 70%;
             background-color:#46466B;
			 padding: 0.1em 0 0.2em 0.7em;
			 color:#E8E8EC;
}	

				 
.content .berriak-news p  {margin-top: 1em;
                           padding-left: 1em;}	
						   
.content .berriak-news .float_right  {float:right;
                             widt: 226px;
							 height: 141px;
							 margin: 0 1em;}
						   
/* these section boxes about the latest activities. They are all coming from the same class activities-jarduerak */	
	
#container .content .activities-jarduerak   {float: left; 
                 width: 45.5%;
                 padding-left: 0;
				 border: 1px solid #B9B9C7;
				 border-top: 2px solid #C7C7D5;
				 padding: 0 1%;
				 margin: 1em 1em 0 0;
				 background-color:#F9F9FA;
				 height: 150px;}
				 
#container .content .activities-jarduerak h1  {padding: 1em 0 0 1em;
                                              font-size: 70%;
											  line-height: 1.5em;}				 

#container .content .activities-jarduerak p  {padding: 1em;}
								 
/* h3 in the boxes above   */									 
								 
#container .content h3 {font-size: 70%;
             margin-top:0;
			 background-color:#46466B;
			 padding: 0.1em 0 0.2em 0.7em;
			 color:#E8E8EC;
			 
}	

						 
/* Invisible box containing all 3 videos   */	
				 
#container .content .videos-container { width: 100%;
                    margin-top:1.5em;
				    float: left;
					height: 210px;
					}
					
/* 3 boxes for videos. The (video1) last one no margin right  */	
						
#container .content .videos-container .video {width: 260px;
                          border: 2px solid #C7C7D5;
						  float: left;
					      height: 210px;
						  margin-right: 7.4%;}
						  
#container .content .videos-container .video1 {width: 260px;
                          border: 2px solid #C7C7D5;
						  float: left;
					      height: 210px;
						  margin-right:0;}						  
						  
/* Videos of the month link  */	

#container .content .videos-of-the-month {width: 95.5%;
                    margin:3% 0;
				    float: left;
					height: 31px;
					border: 2px solid #C7C7D5;
					padding-left: 1.5%;
					}	
					


/* all the rest of stuff in content  */	

#container .content a { color: #46466B;}

#container .content a:hover { color: #747490;}									 
								 
#container .content .float_right {float: right;
                      margin-left: 1.5em;
					  margin-bottom: 1em;
					  margin-top: 1em; }
					  
#container .content .float_right1 {float: right;
                      margin-left: 1.5em;
					  margin-bottom: 1em;
					  margin-top: 0.3em;
					  margin-right: 2.5em;}					  
					  
#container .content .float_right, .content .float_right1 img {border: 1px solid #7D7D9E;} 


#container .content p.top {
                margin-top: -0.5em;
                }				
		

#container .content p {
	line-height: 1.6em;
	font-size: 70%;
			}

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

#container .content p.italic { font-style:italic;}
				  		 
#container .content p.bold {font-weight: bold;}

#container .content p.clear {clear: both;
                             width: 100%;}

/* this is the back to top anchor link */
				
#container  .content p.anchor {
	      clear: both;
          width: 15%;
		  text-align: center;
		  border: 1px solid #B5B5C7;
		  height: 1.8em;
		  margin-top: 3em;}		

/* Clear */

#container .clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
} 


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