/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/* ----------------- base ------------------ */
html {min-width:320px;}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
    background: none repeat scroll 0 0 #fff;
    color: #000;
    font-size: 12px;
	line-height: 14px;
	font-family: Helvetica, Arial,sans-serif;
	padding: 18px;
}

h1, h2, h3, h4, p, ul, ol, pre, dl {
	margin-bottom: 1em;
}

h1 {
	font-size: 23px;
}
h2 {
	font-size: 16px;
	text-decoration:underline;
}
h3 {
	font-size: 14px;
	text-decoration:underline; 
}
h4 {
	font-size: 12px;
	font-weight:bold;
}
ul, ol {
	margin-left: 3em;
}

a,
a code {
	color: blue;
	text-decoration: none;
}
a:hover,
a:hover code {
	color: #4BF;
}
a:active,
a:active code {
	color: #1FB;
	background: black;
}

a img { border: none; }
em { font-style: italic; }
strong { font-weight: bold; }
blockquote {
padding-left: 1.0em;
margin-left: 1.0em;
border-left: 1px solid #333;
font-style: italic;
}

input {cursor:pointer;}

hr {margin:30px 0; margin-right:25%;
	border-top: 1px dashed #4e5563;
  color: #fff;
  background-color: #fff;
  height: 1px;}

.bg {background:#fef3a9;padding:5px;}
.border {border:1px solid #ccc;padding:5px;}

table {width:inherit;border-collapse:collapse;}
table td {border:1px solid #ccc;padding:5px;}

/* ----------------- mise en forme globale -------------------- */

/* header */
#header {margin-bottom:30px;}
#header h1 {margin:0px 0px 0px;line-height:20px;font-size: 32px;}
#header #logo_magicc, #header #logo_magicc_png {width:185px;}
#header span {font-size:14px;color:#8b9396;font-weight:normal;text-decoration:none;vertical-align:text-top;}
#header h1 .title_part2 {font-size:0.7em;font-weight:normal;white-space: nowrap;}
#header h2 {font-size:14px;color:#8b9396;font-weight:normal;text-decoration:none;margin-left:12px;}
#header .annexcontent_smart {display:none;}

/* footer */
.footer {margin-top:15px;}
.footer img, .footer  p {display:inline-block;vertical-align:top;}
.footer #logo_unil, .footer #logo_unil_png {width:93px;margin-right:15px;}
.footer #logo_llp {width:100px;}
.footer  p {font-size:0.8em;font-style:italic;color:#8b9396;max-width:650px;margin-left:-5px;margin-top:3px;line-height:1em;display:inline-block;}
.footerAbout {display:none;}

/* content */
#content {
	margin-left:90px;
}

#contentParameters {
	margin-bottom:30px;
}
#container {
	
}

.infoPoint {
	position:absolute;
	left:0;
	background-color:#4e5563;
	color:#c2c4c9;
	font-weight:bold;
	font-size:1.1em;
	width:55px;
	height:48px;
	padding:15px 5px 15px 23px;
	text-indent:-16px;
	text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}
.filterImg {display:block;padding-left:15px;}

#option {padding:8px 0px 5px;}
#option div {display:inline-block;}


/* mise en forme des filtres */
#options .option-combo {margin-bottom:12px;}
#options h3 {
	font-size: 14px;
	display:inline-block;
	vertical-align:top;
	margin-top:5px;
	margin-bottom:0;
	width:90px;
	text-decoration:none;
}
#options ul {
	margin: 0;
	list-style: none;
	display:inline-block;
}

#options li {
	float: left;
}
#options li a {
	display: block;
	padding: 0.4em 0.5em;
	background-color: #DDD;
	color: #222;
	font-weight: bold;
	text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
	background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
}
#options li a:hover {
	background-color: #5BF;
}
#options li a:active {
	background-color: #39D;
	-webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	-moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	-o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}
#options li a {
	border-left: 1px solid hsla( 0, 0%, 100%, 0.3 );
	border-right: 1px solid hsla( 0, 0%, 0%, 0.2 );
}
#options li:first-child a {
	border-left: none;
}

#options li a.selected {
	background-color: #999;
	text-shadow: none;
	color: white;
}

/* mise en forme des carrés */
.element {
	position: absolute; left: 150px; top: 0px; transform: translate(5px, 5px); -webkit-transform: translate(5px, 5px);
	
    background: none repeat scroll 0 0 #aaaaaa;
    float: left;
    height: 110px;
    overflow: hidden;
    position: relative;
    width: 110px;
	cursor:pointer;
	margin-bottom:10px;
}
.element.skills {background-color:#c3d491;/* #D6E3BC;*/}
.element.intercultural {background-color:#b09fca;/*#CCC0D9;*/}
.element.strategy {background-color:#f6bf86;/*#FBD4B4;*/}
.element.special {background-color:#aaaaaa;}
.element .txt {
	padding:5px;
	margin-bottom:0;
	color: #2c2f2c;
	font-weight:bold;
	line-height:1.25em;
}
.element span.g1,
.element span.g2,
.element span.g3 {
	padding:1px;width:14px;display:block;text-align:center;color:black;
	-moz-border-radius:10px;
	border-radius:10px;
	background-color:#a39957;
	position:absolute;
	right:2px;
	bottom:2px;
	font-size:0.85em;
	font-style:italic;
	font-weight:normal;
}
.element img {position:absolute;}
#groupInfo {}
#groupInfo ul {margin-left:0;}
#groupInfo li {
	display:inline-block;
	font-size:0.9em;
	color:#8b9396;
	font-style:italic;
	margin-right:6px;
	padding-left:2px;
}
#groupInfo li span {
	font-weight:bold;
	color:black;
	padding:1px 0;
	border:0px solid black;
	width:16px;
	display:inline-block;
	text-align:center;
	-moz-border-radius:11px;
	border-radius:11px;
	margin-bottom:2px;
	background-color:#a39957;
	font-weight:normal;
}


/* mise en forme des boutons */
.annexcontent {position:absolute;right:7px;top:0px;text-align:right;}
.annexcontent a {display:inline-block;margin:0 5px 2px;padding:5px 10px;background:#ddd;color:#000;cursor:pointer;}
.annexcontent a.aide {background-color:#4e5563;color:#fff;font-weight:bold;}
#header form {display:inline-block;}




/* ----------------- smartphones ----------------- */
.smart #annexcontent a {display:none;}
.smart #header .annexcontent_smart {position:absolute;left:7px;top:0px;display:block;}
#simple-menu {/* menu sidebar */
	position:relative;
	top:10px;
	left:-10px;
	background-color:#2d5397;
	color:#c2c4c9;
	font-weight:bold;
	font-size:1.1em;
	padding:13px 15px;
	z-index:2000;
} 
#simple-menu .smartFilterImg {position:relative;left:-10px;}

.smart #option div {display:block;padding:7px 0 8px;}
.smart #contentParameters {margin-bottom:0px;}
.smart #infoPoint2 .filterImg {display:inline;}

#options li a:hover {background-color:#194e9e;}
#options li a.selected {background-color:#194e9e;}

/* smartphone option menu deroulant */
.smart #options .option-combo {display:inline-block;vertical-align:top;margin-right:10px;}
.smart #options ul {display:none;position:absolute;z-index:3000;width:inherit;
-webkit-box-shadow: 0 0 10px 0px #4f5565;-moz-box-shadow: 0 0 10px 0px #4f5565;box-shadow: 0 0 10px 0px #4f5565}
.smart #options li {float:none;font-size:1.2em;}
.smart #options li a {padding:0.8em 0.5em;}
.smart #options h3 {
	display:block;
	width:auto;
	background-color: #DDD;
	color: #222;
	padding: 0.4em 0.5em;
	font-weight: bold;
	text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
	background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image: linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	cursor:pointer;
}
.smart #options h3 span {display:block;font-size:0.9em;font-weight:normal;
	width:90px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow: ellipsis;  /* pour Opera 9 */
}




/* ----------------- pages annexes -------------------- */
.annexe {font-size:1.1em;}
.annexe h1 {line-height:1.1em;}
#content.ressourceContent :not(h1, .contentCategory), #content .entry-content {font-family: Georgia;line-height:normal;}
#content.ressourceContent input {font-family:Arial, Helvetica, sans-serif;}
.upBtn {
  width: 40px;
  height: 40px;
  opacity: 0.7;
  position: fixed;
  bottom: 50px;
  right: 10px;
  display: none;
  text-indent: -9999px;
  background: url('../img/scrollTop.svg') no-repeat scroll 0 0 #fff;
  background-size:100%;
}
.infoLoading {font-style:italic;}
#content.annexe, #content.annexe #content {margin-left:0;}
#content.annexe {margin-top:30px;}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {line-height:normal;}

/* page related */
.tdm ul {list-style:none;margin-left:0;line-height:2em;}
.tdm ul li.H2 {margin-left:30px;}
.tdm ul li.H1 {font-weight:bold;}
.tdm a {text-decoration:underline;text-transform: uppercase;}
.tdm li.H2 a {text-transform:none;}
.bg_skills {padding:5px !important;margin-left:60px;background-color:#D6E3BC;}
.bg_intercultural {padding:5px !important;margin-left:60px;background-color:#CCC0D9;}
.bg_strategy {padding:5px !important;margin-left:60px;background-color:#FBD4B4;}
.bg_competence {padding:5px !important;margin-left:30px;background-color:#90b2e6;}
.bg_category {padding:5px;background-color:#c4bc91;}
.bg_tdjaune {background-color:#FF6;}

/* page ressource */
#controls {
	margin-left:90px;
	text-align:right;
}
#printOption {text-align:right;padding:3px 7px;background-color:#4E5563;color:#ededed;display:inline-block;}
#printOption form {display:inline;}
.specificContentPrint {font-size:0.8em;font-style:italic;color:#ededed;}

#contentTitle {
	background-color:#fff;
	color:#c2c4c9;
	min-height:48px;
	padding:15px 5px 15px 10px;
	color: #2c2f2c;
	line-height:normal;
	margin-bottom:25px;
}
#contentTitle .contentCategory {
	font-size: 13px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 1em;
}
#contentTitle h1 {
	margin-bottom:0.25em;
}


.outcomesContent, .assessmentContent, .gridContent {margin-right:30%;display:none;font-size:1.1em;line-height:normal;}
.specificContent {background-color:#CCC; position:absolute;right:20px;width:20%;margin-bottom:10px;margin-top:30px;}
.specificContent .specific {padding:5px;}

.entry-meta, .entry-utility {display:none;}
#content.ressourceContent h2.entry-title {padding:5px;margin-top:10px;cursor:pointer;font-weight:normal;font-size:1em;text-decoration:none;
	background: #ddd; 
	background: -webkit-linear-gradient( #eee, #ccc); 
	background: -moz-linear-gradient( #eee, #ccc); 
	background: -ms-linear-gradient( #eee, #ccc); 
	background: -o-linear-gradient( #eee, #ccc); 
	background: linear-gradient( #eee, #ccc);
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
}
#content.ressourceContent h2.entry-title a {font-family:Arial, Helvetica, sans-serif;color:black;}
#content.ressourceContent h2.entry-title a:active {background:none;}
#content.ressourceContent .collapse {margin:0 10px;}




/* page How to use */
.howtoContent .part1, .howtoContent .part2, .howtoContent .part3, .howtoContent > img {margin-bottom:30px;}


/* ie8 */
.ie8 #logo_unil,
.ie8 #logo_magicc {display:none;}
.ie8 #controls {width:500px;}




@media screen and (max-width: 600px) {
.specificContent {position:static;width:inherit;margin-bottom:30px;}
.outcomesContent, .assessmentContent, .gridContent {margin-right:0;}
.outcomesContent {padding-top:15px;}
#header {margin-bottom:10px;}
#header h1 {margin-top:50px;}
#controls {position:static;width:auto;margin-left:0;margin-top:0;border:1px solid grey;background-color: #4E5563;}

body {padding:5px 10px;}

#content {
    margin-left: 0px;
}
#content .infoPoint {
	width:auto;position:static;margin-bottom:20px;
}
#footer {display:none;}
.footerAbout {display:block;}
.infoPoint {height:20px;}
.filterImg {display:none;}

#contentTitle {margin-bottom:5px;}

.howtoContent > img {width:100%;}
.annexcontent a {max-width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0 0 2px;}
#header form {vertical-align:top;margin-top:3px;}

hr {margin-right:inherit;}
}

@media screen and (max-width: 320px) {
table {font-size:0.6em;}
table td {padding:2px;}	
}


@media print {
    h1, h2 {line-height:normal;text-decoration:none; }
	.logoPrint img {width:150px;}
	.logoPrint span {display:none;}
	.contentCategory {font-size:13px;font-weight:normal;font-style:italic;margin-top:25px;}
	.contentCategory:before {content:">> ";}
	div.separate {height:1.5em; }
	.footer #logo_unil {width:auto;margin-right:15px;}
	.footer #logo_llp {width:100px;}
	#headInfo {font-size:0.9em;font-style:italic;margin-bottom:2em;border:1px solid #999;padding:5px;}
	.specific {padding:5px;border:1px solid #ccc;}
	h2.entry-title {text-decoration:underline;}
	h2.entry-title {border-top:1px dashed #999;margin-top:20px;padding-top:20px;}
	h2.entry-title:first-child {border-top:none;margin-top:0px;padding-top:20px;}
	h2.entry-title a {color:#000;}
	.collapse {margin:0 7px 0 30px;}
	input {display:none;}
}

@media (max-device-width:768px) and (orientation: landscape) { /* tailles polices en orientation paysage, car bug sur iphone ipad */
  html {
   -webkit-text-size-adjust: 100%;
  }
}