@charset "utf-8";

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,700italic,400italic,400|Open+Sans+Condensed:700,300,300italic);

* {
margin: 0;
padding: 0;
}

div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/common/boxsizing.htc);
}

body {
margin: 0;
padding: 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 87.5%; /* 14px/16px */
line-height: 150%;
/*background-color: #f4f4f1*/
background-color: #ffffff;
}

/* generals */

p {
margin-bottom: 1em;
}

h1, h2, h3, h4 {
font-family: "Open Sans Condensed", Arial Narrow, Helvetica, Arial, sans-serif;
margin-bottom: 0.8em;
}

h2 {
font-size: 187.5%;
font-weight: 700;
line-height: 1.2;
}

h3 {
/* font-size:153.846%; */ /* abans: 133.3333333%*/
font-size:140%;
line-height: 1.3em;
font-weight: 700;
margin-top: 1.5em;
}

h4 {
/*font-size: 128.57143%;*/
font-size: 120%;
line-height: 1.3em;
font-weight: 700;
margin: 1em 0;
/*margin-top: 1.5em;*/
}

h5, h6 {
font-size: 100%;
line-height: 1.3em;
font-weight: 700;
margin: 1.5em 0 1em 0;
}

a {
text-decoration: none;
color: #333;
}

a:visited {
color: #666;
}

a:hover {
text-decoration: underline;
}

a img {
border: none;
}

img {
max-width: 100%;
height: auto;
}

/* header */

#header {
width: 90%;
height: 86px;
margin: 0 auto;
position: relative;
}

h1 {
background:url(img/ictlogy_logo.gif) no-repeat left top;
text-indent: -999em;
margin-top: 20px;
float: left;
margin-bottom: 0;
}

h1 a {
width: 135px;
height: 51px;
display: block;
}

#idioma {
position: absolute;
right: 0;
top: 10px;
}

#idioma li {
display: inline;
font-size: 85.71428%;
margin-left: 8px;
}

#idioma a.selected {
color: #999;
}

.skiptranslate, .goog-te-gadget, .goog-te-gadget-simple, .goog-te-combo {
/*	background-color:#F5F5F5;*/
	border:none;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
/*	font-size: 70%;!important*/
	}
.goog-te-menu-value {
	border:none;
	font-size: 85.71428%;!important
	}	
.goog-te-gadget-simple img{display:none;}

#tagline {
font-size: 81.25%;
line-height: 120%;
float: left;
width: 480px;
}

#tagline img {
float: left;
}

#tagline p {
padding-top: 30px;
margin-bottom: 0;
}

#search {
position: absolute;
right: 0;
top: 50px;
}

.col_menu {
background-color: #EDEDE8;
}

.col_menu ul {
font-family: "Open Sans Condensed", Arial Narrow, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 150%;
}

.col_menu li {
list-style-type: none;
margin-bottom: 0.5em;
}

/* footer */
		
#footer {
width: 100%;
background-color: #464646;
border-top: 4px solid #DFDFD9;
color: #eaeaea;
padding-top:1em;
clear: both;
}

#footer a, #footer a:visited {
color: #fff;
}

#footer .widget_w {
background-color: transparent;
border: none;
margin-bottom: 0;
}

#footer .col5 {
border: none;
}

#footer li {
list-style-type: none;
margin-bottom: 8px;
}

#footer p {
font-size: 75%;
line-height: 150%
}

#disclaimer {
clear: both;
text-align: center;
padding: 30px 0;
font-size: 75%;
}

/* contingut  home */

.item, .item-sr-home, .item-blog-home {
border-bottom: 1px solid #d5d5cd;
padding-bottom: 8px;
margin-bottom: 8px;
clear:both;
}

.item-sr-home p,  .item-blog-home p {
margin-bottom: 0;
}

.item p {
margin-bottom: 0;
}

.home .blog .item p {
margin-bottom: 1em;
}

.home .blog .item p.data {
margin-bottom: 0;
}

.home .blog .item ul, .home .noticies ul,
.home .blog .item ol, .home .noticies ol {
margin-bottom: 1em;
padding-left: 3em;
}

.home .blog .item li {
margin-bottom: 1em;
}

.home h3 {
margin-top: 0;
}

.more {
width: 95%;
position:absolute;
bottom: 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
*behavior: url(/common/boxsizing.htc);
border: 1px solid #d5d5cd;
text-align: center;
font-weight: bold;
background-color: #edede8;
margin-top: 16px;
clear: both;
}

.noticies .more {
 position: static;}

.col5 .more {
width: 90%;
}

.more a {
padding: 8px;
display: block;
}

.more a:hover {
background-color: #d5d5cd;
text-decoration: none;
}

/* padding per sota per posar el more */

 .home .blog, .home .resources .col5i3, .home .resources .wiki, .home .lifestream .col5 {
position:relative;
padding-bottom: 80px;
}

.col5i2.blog:last-child, .col5i2:last-child {
border-right: none;
}

.data {
color: #999;
margin-bottom: 0;
}

.container2.noticies h2 {
padding-top: 16px;
padding-left: 16px;
}

.container2.noticies .col5i2 {
padding-top: 0;
position: relative;
}

.noticies img {
max-width: 100%;
height: auto;
float: left;
margin: 0 16px 8px 0;
}

.noticies .more {
margin: 16px;
}

.col5 img {
height: auto;
max-width: 100%;
margin-bottom: 8px;
margin-right: 16px;
}

.lifestream .col5 img {
 float: none;}

.widget_w.resources .wiki p {
margin-bottom: 0.5em;
}

.widget_w.lifestream h2 {
background-color: #EDEDE8;
padding: 16px;
margin-bottom: 0;
border-bottom: 1px solid #d5d5cd;
}

.widget_w.lifestream h4 {
font-size: 1em;
margin: 0 0 1em 0;
}

.widget_w.lifestream li {
list-style-type: none;
}

.widget_w.lifestream img {
margin: 0 10px 3px 0;
}

.widget_w.lifestream p {
font-size: 85.71428% /* 12/14 */;
line-height: 1.3;
}

.prezi-list img {
border:1px solid #d5d5cd;
}

.slideshare-widget img {
border:1px solid #d5d5cd;
width: 100%;
}

/*
.widget_w.lifestream {
display: table;
}

.widget_w.lifestream .col5 {
display: table-cell;
}

*/

.text-area {
border-top: 1px solid #CCBCBC;
}

.youtube-list li, .prezi-list li, .slideshare-widget li {
margin-bottom: 0;
border-top: 1px solid #CCBCBC;
padding-top: 12px;
}

#google_calendar {
margin-bottom: 1em;
}

.titol_dopplr {
padding-top: 1em;
}

/* layout home */

.widget_w, .containerb {
width: 90%;
margin: 0 auto 20px auto;
overflow: hidden;
border-left: 1px solid #d5d5cd;
border-right: 1px solid #d5d5cd;
border-bottom: 4px solid #d5d5cd;
}

.col5 {
width: 20%; /* 192/960 */
padding: 16px;
float: left;
border-right: 1px solid #d5d5cd;
position: relative;
}

.col5:last-child, .col5i2:last-child {
border-right: none;
}

.container2 {
width: 80%;/* 768/960 */
float: right;
overflow: hidden;
position: relative;
}

.col5i2 {
width: 50%; /* 384/768 */
padding:16px;
float: left;
border-right: 1px solid #d5d5cd;
display: inline-block;
position: relative;
padding-bottom: 50px;
}

.col5i3 {
width: 60%; /* 576/960 */
padding:16px;
float: left;
border-right: 1px solid #d5d5cd;
display: inline-block;
position: relative;
}

.col125 {
width: 15%;
padding:16px;
float: left;
}

.col25 {
width: 25%;
padding:16px;
float: left;
}

.col225 {
width: 22.5%;
padding:16px;
float: left;
}

.last {
border-right: none;
}

/* versió Anna */
 
 /* menus desplegable
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu */

#menu_container {
width: 100%;
background-color: #464646;
border-top: 4px solid #DFDFD9;
text-align: center;
overflow: visible;
margin-bottom: 20px;
clear: both;
}

#menu {
font-size: 142.857414% /* 20px/14px */;
font-family: "Open Sans Condensed", Arial Narrow, Helvetica, Arial, sans-serif;
font-weight: 400;
background-color: #464646;
list-style:none;
margin: 0 auto;
width:90%;
position:relative;
z-index:5;
}

#menu li {
float:left;
width: 16.66666%;
position:relative;
}

#menu li li {
width: 100%;
}

#menu li li a {
padding-left: 12px;
padding-right: 12px;
}

#menu a {
display:block;
color: #fff;
padding:12px 0;
text-decoration: none;
display: block;
background-color: #464646;
}

#menu a:hover, #menu li a.active {
color:#fff;
background-color: #656565;
}

#menu li:hover {
background-color: #656565;
}

/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

/*--- DROPDOWN ---*/
#menu ul {
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255, 255, 255, 0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

#menu ul li {
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}

#menu ul a {
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

#menu li:hover {
background-color: #656565;
}

#menu li:hover ul { /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
display: block;
background-color: #464646;
width: 100%;
}

#menu li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background-color: #656565;
display:block;
text-decoration:none;
}

#menu li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
border-top: 1px solid #ccc;
text-align: left;
background-color: #464646;
}

#menu li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background-color: #656565;
display: block;
}
 @media all and (max-width: 1124px) {
 #header, .widget_w, #footer .col5 {
 width: 95%;
}
 #menu {
 font-size: 128.57143% /* 18px/14px */;
}
}
 @media all and (width: 1024px) {
 .widget_w {
 background: url(/common/img/bg_about1024.png) repeat-y left top;
}
 .widget_w.lifestream {
 background: url(/common/img/bg_lifestream1024.png) repeat-y left top;
}
 .widget_w.lifestream .col5 {
 border-right: none;
}
 #footer .widget_w {
 background: none;
}
}
 @media all and (max-width: 768px) {
 #header {
 width: 97%;
}
 #menu {
 width: 100%;
}
 #menu ul {
 width: 100%;
 font-size: 112.5%;
}
 #menu li {
 width: 33.33333333%;
}

.col5.col_menu {
 border-right: none;}
 .col5 img {
 width: auto;
 height: auto;
 float: left;
margin-right: 16px;
}
 .widget_w {
 width: 97%;
 margin: 20px auto;
}
 .widget_w .col5 {
 float: none;
 width: 100%;
}
 .widget_w .col5.wiki {
 float: left;
 width: 40%;
}
 .lifestream .col5 {
 float: left;
width: 33.3333333333%;
}
 .lifestream .col5:nth-of-type(3n) {
  border-right: none;
}

 .lifestream .col5:nth-of-type(3n+1) {
clear: both;
}

 .lifestream .col5:nth-of-type(4),  .lifestream .col5:nth-of-type(5) {
  width: 50%;
   border-top: 1px solid #d5d5cd;
}

 .container2 {
 width: 100%;
}
 #footer .col5 {
 width: 100%;
}
 .col_menu li, #footer .col5 li {
 display: inline;
 margin-right: 4px;
padding-right:8px;
 border-right: 1px solid #d5d5cd;
}
 .col_menu li {
line-height: 2em;
}
 .col_menu li:last-child {
 border-right: none;
}
 #footer .col125 {
 width:50%;
}
 #footer .col25 {
 border-top: 1px dotted #ccc;
 border-bottom: 1px dotted #ccc;
 clear: both;
 width: 100%;
}
 #footer .col225 {
 width: 50%;
}
 #disclaimer {
border-top: 1px dotted #ccc;
}
}
 @media screen and (max-width: 508px) {
 #search {
position: static;
border-top: 1px solid #D5D5CD;
padding:10px 0;
}
 #idioma {
margin-top: 0;
padding: 0;
top:0;
}
 /*#idioma li {
display: block;
text-align: right;
}*/

#tagline {
margin-bottom: 8px;
}
 #menu li {
 width: 50%;
 font-size: 112.5%;
}
 .widget_w {
 width: 100%;
 margin: 20px auto;
}
 .container2, .lifestream .col5, .widget_w .col5i2, .widget_w .col5i3, .col5, .widget_w .col5.wiki {
 width: 100%;
 float: none;
}
 .home .blog {
 padding-bottom: 0;
}
 .more {
 position: static;
 width: auto;
}
 #tagline, h1 {
 margin-top: 10px;
 width: auto;
 float: none;
}
 #tagline img {
 display: none;
}
 #tagline p {
 width: auto;
padding-top: 0;
}
 #header {
 height: auto;
}
 #footer .col125, #footer .col25, #footer .col225 {
 float: none;
 width: 100%;
 border-bottom: 1px dotted #ccc;
}
 #footer li {
 margin-bottom: 0.5em;
}