/* Table of Content
==================================================

	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

@media only screen and (min-width: 960px) {
	#container { max-width: 1200px; }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	#container { max-width: 940px; }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#container { max-width: 728px; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	/* =Responsive Column Grid */
	.span-3de3 { width: 100%; }
	.span-2de3 { width: 100%; }
	.span-1de3 { width: 100%;	}
	.span-box1 { width: 100%; }
	.span-box2 { width: 100%; }
	.span-box3 { width: 100%; }	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { /* portrait mobiles */
	/* =Responsive Column Grid */
	.col { margin: 1% 0 1% 0%;}
	.span-3de3 { width: 100%; }
	.span-2de3 { width: 100%; }
	.span-1de3 { width: 100%;	}
	.span-box1 { width: 100%; }
	.span-box2 { width: 100%; }
	.span-box3 { width: 100%; }	

	#sidebar-left{
		background: #0b7dac;
	}
	.main-navigation{
		background: #0b7dac;
	}


	/* search input field */
	input[type=search] {
		background: #0b7dac url('../images/search2.png') no-repeat 9px center;
		border: solid 1px #0b7dac;
		padding: 9px 10px 9px 32px;
		width: 55px;
		
		-webkit-border-radius: 5em;
		-moz-border-radius: 5em;
		border-radius: 5em;
		
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		transition: all .5s;
	}
	input[type=search]:hover {
		background: #ededed url('../images/search.png') no-repeat 9px center;
	}

	input[type=search]:focus {
		background: #ededed url('../images/search.png') no-repeat 9px center;
		width: 130px;
		background-color: #fff;
		border-color: #6dcff6;
		
		-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
		-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
		box-shadow: 0 0 5px rgba(109,207,246,.5);
	}

	input:-moz-placeholder {
		color: #999;
	}
	input::-webkit-input-placeholder {
		color: #999;
	}

	.search-mobile {
		display: block;
		z-index: 20;
		top: 0;
		position: absolute;
		padding: 0.4em 0 0.2em 0em;
	}
	.search-mobile input[type=search] {
		width: 15px;
		padding-left: 10px;
		color: transparent;
		cursor: pointer;
	}
	.search-mobile input[type=search]:hover {
		background-color: #fff;
	}
	.search-mobile input[type=search]:focus {
		width: 130px;
		padding-left: 32px;
		color: #000;
		background-color: #fff;
		cursor: auto;
	}
	.search-mobile input:-moz-placeholder {
		color: transparent;
	}
	.search-mobile input::-webkit-input-placeholder {
		color: transparent;
	}
	
	/* Small menu */
	.menu-toggle {
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		padding: 12px 0 12px 50px;
	}

	.menu-toggle:after {
		content: "\f502";
		font: normal 32px/1 'Genericons';
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {
		content: "\f500";
		font: normal 32px/1 'Genericons';
		vertical-align: 2px;
		font-size: 12px;
	}

	.toggled-on .nav-menu,
	.toggled-on .nav-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children,
	.nav-menu li.sidebar_menu_sen1, .nav-menu li.sidebar_menu_sen2, .nav-menu li.sidebar_menu_sen3	{
		display: block;
		background: #198fc0;
		box-shadow: 1px 1px 3px #333333;
		border-radius: 0;
		border-style: solid; border-width: 0 0 1px 0; border-color: #98cde3;    
		height: auto !important;
		padding: 0.2em;
		margin:0;
		width: auto;
	}

	.toggled-on .nav-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on .nav-menu li > ul a {
		/*color: #141412;*/
		width: auto;
	}

	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		background-color: transparent;
		/*color: #E3E3FF;*/
	}

	.toggled-on .nav-menu li a:hover,
	.toggled-on .nav-menu ul a:hover {
		color: #E3E3FF;
	}

	ul.nav-menu,
	div.nav-menu > ul {
		display: none;
	}

	/* =HOME::: ImageMap de les biblioteques */
	#IM-biblios { display:none;}

	#widgets{
		display:none;
	}
	#box3 {display:none;}
	#box4 {display:block;}
	
	.searchform { display:none; }
	.widget_search {display: none}
	#agenda-sidebar {display: none;}
	#agenda-homemobile {display: block;}
	
	.widget_FacebookLikeBox{display:none;}
	.widget_pit_widget_board{display:none;}
	
	.sidebar_menu_sen_inv {
		width:50%;
    box-shadow: 0px 0px 2px #333333;
    background: #2189b4; border-radius: 4px 0px 0px 4px; text-align: right;
    border-style: solid; border-width: 1px 5px 1px 1px; border-color: #0d4861; }
  .sidebar_menu_sen_inv img {position:relative;}   
	
	#botons-bloc-infantil{display:block;}
  
	/***Style the unordered list with the class 'enlarge'***/
  #botons-bloc-infantil ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
  }
  #botons-bloc-infantil ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
    z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
    margin:0px 2px 0 2px; /*space between the images*/
  }
	
	/***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
	#botons-bloc-infantil ul.enlarge span{
	position:absolute; /*see support section for more info on positioning*/
	left: -9999px; /*moves the span off the page, effectively hidding it from view*/
	}
	#botons-bloc-infantil  ul.enlarge li:hover{
		z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
		cursor:pointer; /*changes the cursor to a hand*/
	}
	/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
	#botons-bloc-infantil ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
		top: -21px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
		left: 0; /*distance from the left of the thumbnail to the left of the popup image*/
	}
	/***To make it look neater we used :nth-child to set a different left distance for each image***/
	#botons-bloc-infantil ul.enlarge li:hover:nth-child(2) span{
		left: -100px;
	}
	#botons-bloc-infantil ul.enlarge li:hover:nth-child(3) span{
		left: -174px;
	}


}