/* 
/* (CC) Wevolve (R), 2009 
/* 
/* Feel free to be inspired by this CSS, 
/* see the Creative Commons License (http://creativecommons.org/) 
/* 
/* If you re-use parts or whole of this CSS, 
/* you must include this copyright notice at the start of the file. 
/* 
/* Please contact us for commercial use and to find out 
/* how we can help you with various web-based solutions: 
/* 
/* web:     http://www.wevolve.nl 
/* e-mail:  info@wevolve.nl 
/* tel.:    +31-(0)74 255 2140 
/*
/* ---------------------------------------- */


html,
body { height:100%; }

body {
  padding:0; margin:0;

  color:#fff;
  font:83% "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-align:center; /* center wrapper in IE 5.5 and > */
  background:#000;
}


/* -------------------- resets -------------------- */

.jsEnabled .nojs,
.nocss { display:none; }

img,
a img {
  border:0;
  vertical-align:bottom;
} /* set image border to zero */

a:active,
a:focus { outline:0; } /* remove firefox link border */

textarea { overflow:auto; } /* remove textarea scrollbar in ie */

* html table { font-size: 100%; }  /* for IE 5.5 */

form input { font-size:.9em; }

#page a[name] { padding:0; } /* firefox 3 / safari 3 */

#printbranding { display:none; }

.clear { min-height:0; }

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

* html .clear { height:1%; }


/* --------------------- wrapper -------------------- */

#wrapper {
  position:relative;
  margin:0 auto -7em;
  min-height:100%;
  height:auto !important;
  height:100%;
  width:100%;
  text-align:left;
}

h1,
h2,
h3 { font-weight:normal; }


/* --------------------- header -------------------- */

#header {
  margin:0 4.5em;
  min-width:67.4em;
  z-index:100;

  border-bottom:1px solid #333;
}

#branding { float:left; display:inline; }

#branding a {
  display:block;
  position:absolute;
  top:.5em;
  padding:0; margin:0;
  width:250px;
  height:42px;

  background:url("../img/branding.png") 0 0 no-repeat;
}


/* --------------------- mainnav -------------------- */

#mainnav {
  position:relative;
  float:right; display:inline;
  padding:0 10px 0 0; margin:1.5em 0;
  background:url("../img/menu.png") 100% 0 no-repeat;
}

#mainnav_bg {
  padding:0 0 0 10px; margin:0;
  height:38px;
  background:url("../img/menu.png") 0 0 no-repeat;
}

* html #mainnav_bg { width:38em; }

#mainnav ul {
  position:relative;
  float:left; display:inline;
  padding:0; margin:.5em 0 0 0;
}

#mainnav li {
  float:left; display:inline;
  padding:0; margin:0 .35em 0 0;
}

#mainnav li.last { margin:0; }

#mainnav a,
#mainnav strong {
  float:left; display:inline;
  padding:0 10px 0 0; margin:0;

  color:#fff;
  font-size:12px;
  font-weight:normal;
  text-decoration:none;
  line-height:2.2em;
}

#mainnav a span,
#mainnav strong span {
  float:left; display:inline;
  padding:0 0 0 10px; margin:0;
}

#mainnav .onpath a,
#mainnav a:hover,
#mainnav strong {
  background:url("../img/menu_on.png") 100% 0 no-repeat transparent;
}

#mainnav .onpath a span,
#mainnav a:hover span,
#mainnav strong span {
  background:url("../img/menu_on.png") 0 0 no-repeat transparent;
}

#mainnav a.login,
#mainnav a:hover.login {
  display:block;
  padding:0; margin:0;
  width:53px;
  height:23px;

  background:url("../img/login.png") 50% 50% no-repeat;
}

#mainnav a.login span { display:none; }


/* --------------------- finder_viewer -------------------- */

#finder_viewer { clear:both; }

#finder_viewer_nav,
#finder_viewer_nav ul,
#finder_viewer_nav li {
  float:left; display:inline;
  padding:0; margin:0;
  height:1.4em;
}

#finder_viewer_nav a {
  display:block;
  position:relative;
  padding:.15em 1em 0 1em; margin:0;
  height:1.4em;
  width:3em;

  color:#fff;
  font-size:1.2em;
  text-decoration:none;
}

#finder_viewer_nav .onpath a { background:#333; } 

li#clear_selection a {
  width:8em;
  color:#999;
  line-height:1.8em;
  font-size:.8em;
  text-decoration:underline;
}

li#clear_selection a:hover {
  color:#fff;
}

/* --------- search ---------- */

#search {
  position:relative;
  float:right; display:inline;
}

#search form { padding:0; margin:0; }

.searchtext {
  float:right; display:inline;
  padding:.25em .5em .25em 2em; margin:0;
  width:13em;
  height:17px;

  border:0;
  color:#fff;
  font-size:1em;
  background:#333 url("../img/search_magnify.png") .5em .5em no-repeat;
}

.overlabel {
  float:left; display:inline;
  padding:0;

  color:#fff;
}

.jsEnabled .overlabel {
  position:absolute;
  float:none;
  top:.25em;
  right:4em;
  z-index:1;
  cursor:text;
}

.searchsubmit {
  position:absolute;
  top:1px;
  right:0;
}


/* --------------------- criteria -------------------- */

#criteria { width:120em; height:18.5em; }

#criteria0 { width:25em; }
#criteria1 { width:16em; }
#criteria2 { width:14em; }
#criteria3 { width:15em; }
#criteria4 { width:14em; }
#criteria5 { width:14em; }

.profile { height:17.5em; }


/* --------------------- contents -------------------- */

#contents {
  margin:0 auto;
  width:67.4em;

  background:url("../img/landing_page_bg.jpg") 100% 10px no-repeat transparent; 
}

#home #contents {
  position:absolute;
  top:50%;
  left:50%;
  margin:-18.5em 0 0 -33.7em;
  width:67.4em;
  min-height:30em;

  background:url("../img/landing_page_bg.jpg") 100% 10px no-repeat transparent;
}

#header_space { height:25em; }

#page_normal #header_space { height:0; }

#footer_space { height:20em; }

#page_normal #footer_space { height:10em; }

#introrow { padding:1.5em 0 1.5em 0; }

.introcontent {
  overflow:hidden;
  height:15em;
}

#wrapper .introcontent h2 { padding:0 0 .5em 0; margin:0; }
#wrapper .introcontent h3 { padding:0; margin:0; }

#wrapper #page h1 {
  padding:0; margin:1em 0 0 0;
  font-size:2em;
}

.wh-heading1 { padding:.5em 0 1em 0; font-size:2em; }
.wh-heading2 { padding:.5em 0 0 0; font-size:1.6em; }
.wh-heading3 { padding:.5em 0 0 0; font-size:1.2em; }

#intro {
  position:relative;
  float:left; display:inline;
  width:43em;
  height:18em;
  overflow:hidden;
}

#news {
  position:relative;
  float:right; display:inline;
  padding:0 0 0 2em; margin:0;
  width:20.25em;
  height:18em;
  overflow:hidden;
  border-left:1px solid #333;
}

#intro h2,
#news h2 {
  padding:0; margin:0;

  font-style:italic;
  font-size:1.6em;
  font-weight:normal;
}

.gotofinder a,
.morenews a {
  position:absolute;
  right:0;
  bottom:0;
  height:19px;
}

.gotofinder a {
  width:110px;
  background:url("../img/gotofinder.png") 0 0 no-repeat;
}

.morenews a {
  width:85px;
  background:url("../img/morenews.png") 0 0 no-repeat;
}

.gotofinder a:hover,
.morenews a:hover { background-position:0 -19px; }


/* -------------------- newsnav -------------------- */

#newsnav {
  overflow:hidden;
  float:right; display:inline;
  padding:2.1em 0 0 0; margin:0;
  width:28em;
  height:30em;
}

#newsnav h2 {
  padding:0 0 .5em 0; margin:0;
  width:24em;
  font-size:1.6em;
}

#newsnav ul {
  float:left; display:inline;
  padding:0; margin:0;
}

#newsnav li {
  float:left; display:inline;
  padding:0; margin:0 0 .5em 0;
  width:364px;
}

#newsnav .top {
  height:10px;
  background:url("../img/newsnav_top.png") 0 0 no-repeat;
}

#newsnav .bottom {
  clear:both;
  height:10px;
  background:url("../img/newsnav_bottom.png") 0 100% no-repeat;
}

#newsnav a,
#newsnav .onpath strong {
  position:relative;
  float:left; display:block;
  overflow:hidden;
  padding:0 1em; margin:0;
  width:340px;
  color:#fff;
  text-decoration:none;
  font-size:1.1em;
  background:url("../img/newsnav_repeat.png") 0 0 repeat-y;
}

#newsnav small {
  float:left; display:block;
  font-weight:normal;
  width:6em;
  font-size:.8em;
  text-decoration:none;
}

#newsnav a span,
#newsnav strong span {
  display:block;
  margin:0 0 0 5em;
}

#newsnav .current span { text-decoration:underline; }


/* -------------------- 3 columns same height -------------------- */

#explanationrow {
  padding:1em 0; margin:0;

  border-top:1px solid #333;
}

#firstcolumn,
#secondcolumn {
  float:left; display:inline;
  padding:0 2em 0 0; margin:0 2em 0 0;
  width:19.5em;
  border-right:1px solid #333;
}

#lastcolumn {
  overflow:hidden;
  float:right; display:inline;
  padding:0; margin:0;
  width:19em;
}

.columncontent {
  overflow:hidden;
  height:10.5em;
}

#explanationrow h3 {
  padding:0; margin:0;

  font-size:1.6em; 
}

#explanationrow a {
  float:right; display:block;
  margin:0;
  width:89px;
  height:19px;

  background:url("../img/learnmore.png") 0 0 no-repeat;
}

#explanationrow a:hover { background-position:100% -19px; }


/* --------------------- compare -------------------- */

#page {
  overflow:hidden;
  float:left; display:inline;
  width:36em;
}

#page a { color:#fff; }


/* --------------------- compare -------------------- */

#compare {
  clear:both;
  position:absolute;
  top:50%;
  left:50%;
  margin:-15em 0 0 -500px;
  width:1000px;
  height:22em;
  min-height:22em;
}

/* IE tooltip appears behind the #image_scroll.
   It does break dragging images in firefox however.
*/
* html #compare { z-index:100000; }
*+html #compare { z-index:100000; }

.roset_big {
  position:relative;
  float:left; display:inline;
  padding:0;
  text-align:center;
}

* html .roset_big { height: 1%; }
*+html .roset_big { min-width: 0; }

.roset_big ul {
  list-style-type:none;
}

.roset_big li {
  position:absolute;
  width:60px;
  top:0;

  color:#666;
  font-size:10px;
}

.roset_big .studentprofile { top:17em; right:120px; }
.roset_big .teachingandlearning { top:1em; right:40px; }
.roset_big .researchinvolvement { top:3em; left:20px; }
.roset_big .involvementother { top:11em; right:25px; }
.roset_big .internationalorientation { top:11em; left:15px; }
.roset_big .regionalengagement { top:-1.5em; left:60px; }

.university-dropzone {
  position: relative;
  padding:0; margin:0 75px;
}

.university-name { margin:1em 0 1em 0; text-align:center; height:40px; width:20em;}

.roset { 
  width:320px; 
  display: inline;
  float: left;
}

.roset_big p.hint {
  position:absolute;
  padding:1em; margin:0;
  width:7em;
  height:2em;
  top:4.5em;
  left:2em;
  
  color:#fff;
  opacity:.8;
  -khtml-opacity:.8;
  -moz-border-radius:10px;
  -khtml-border-radius:10px;
  -webkit-border-radius:10px;
  background:#000;
}

.roset_big p.hint-hidden { display:none; }

.hint-hasjs { display:none; }
.jsEnabled .hint-hasjs { display:block; }


/* --------------------- horizontal_scroll -------------------- */

.ui-scrollarea {
  position:relative;
  overflow:auto;
}

.jsEnabled .ui-scrollarea { overflow: hidden; }

.ui-scrollviewport { position:relative; }

.jsEnabled .ui-scrollbararea {
  position:relative;
  height:14px;
  padding:0px;
  margin:1em 0px 2em 0px;
  width:100%;
  background:#333 url("../img/scrollbar-rightcorner.png") right 0px no-repeat;
}

.jsEnabled .ui-scrollbararea-l2 {
  position:absolute;
  background:transparent url("../img/scrollbar-leftcorner.png") left 0px no-repeat;
  height:14px;
  width: 14px;
  padding:0px;
  margin: 0px;
}

.jsEnabled .ui-scrollbar {
  position:absolute;
  z-index: 50;
  height:14px;
  padding: 0px;
  margin: 0px;
  -moz-border-radius:10px;
  -khtml-border-radius:10px;
  -webkit-border-radius:10px;
  background:#666 url("../img/scrollbarhandle_right.gif") right top no-repeat;
}

.jsEnabled .ui-scrollbar-l2 {
  top: 0px;
  left: 0px;
  position:absolute;
  height:14px;
  width:14px;
  padding: 0px;
  margin: 0px;
  float: left;
  -moz-border-radius:10px;
  -khtml-border-radius:10px;
  -webkit-border-radius:10px;
  background:transparent url("../img/scrollbarhandle_left.gif") left top no-repeat;
}

#text_scroll {
  position:relative;
  clear:both;
  padding:0 50px; margin:2em auto 1em auto;
  min-height:21em;
  height:21em;
}

.transparency_left,
.transparency_right { display:none; }

.jsEnabled .transparency_left,
.jsEnabled .transparency_right {
  display:inline-block;
  position:absolute;
  top:0;
  width:60px;
  height:100%;
}

.jsEnabled .transparency_left { left:0; background:url("../img/transparency_left.png") 0 0 repeat-y; }

.jsEnabled .transparency_right { right:0; background:url("../img/transparency_right.png") 100% 0 repeat-y; }

#image_scroll {
  clear:both;
  position:absolute;
  padding:0 50px; margin:0 auto 1em auto;
  height:13em;
  bottom:0;
  left:0;
  right:0;
  z-index:100;
}

#numberofresults { 
  text-align:center; 
  margin-bottom:1em;
}


/* --------------------- profile ------------------ */

.profile {
  float:left; display:inline;
  padding:0 1.5em; margin:0;
  width:20em;

  z-index:5;
  text-align:left;
  border-right:1px solid #333;
}

.profile h3 { padding:0; margin:0; }

.profile dl {
  padding:1em 0 0 0; margin:0;

  font-size:.8em;
}

.profile dt {
  clear:both;
  padding:0; margin:0;
  font-weight:bold;
}

.profile dd {
  float:left; display:inline;
  padding:.25em .5em 0 0; margin:0 .5em 0 0;

  line-height:.9em;
  border-right:1px solid #fff;
}

.profile dd a {
  padding:.1em .1em 0 0;
  margin:0;
  text-decoration:none;
  color: #fff;
}

.profile dd a.selected {
  color:#000;
  background:#b0d238;
}

.profile dd.last { border:none; }


/* --------------------- roset_small ------------------ */

#universitiesrow {
  height: 90px;   /* voor JavaScript!! */
}

#universitiesrow img {
  padding: 0;
  margin: 0; 
}
.jsEnabled #universitiesrow {
  /*overflow: hidden;*/  /* avoid jumping images */
}

.roset_small {
  position:relative;
  float:left; display:inline;
  padding:0; margin:0 10px 0 0;  /* in pixels, kan server-side al een goede waarde gekozen worden! */
  width:90px;
  height:90px;
}

.university-filteredout,
.university-selected { display:none; }

.ui-draggable,
.ui-draggable a { cursor:url("../img/openhand.cur"), -moz-grab; }

.ui-draggable-dragging,
.ui-draggable-dragging a { cursor:url("../img/closedhand.cur"), -moz-grabbing; } /* is added to body */


/* --------------------- tooltip -------------------- */

#tooltip {
  display:none;
  position:absolute;
  float:left; display:inline;
  margin:0 0 1.5em 0;
  z-index:100;

  background:url("../img/tooltip_arrow.gif") 50% 100% no-repeat;
}

#tooltip p {
  padding:1em;
  margin:0 0 8px 0;
  width:10em;

  color:#000;
  font-size:.85em;
  text-align:center;
  /*
  -moz-border-radius:5px;
  -khtml-border-radius:5px;
  -webkit-border-radius:5px;
  */
  background:#fff;
}

.dropzone-tooltip {
  display:none;
  position:relative;
  padding:1em;
  margin:3em 2em 0;
  width:15em;
  color:#000;
  font-size:.85em;
  /*
  -moz-border-radius:5px;
  -khtml-border-radius:5px;
  -webkit-border-radius:5px;
  */
  z-index:10000;
  background:#fff;
}

.dropzone-tooltip {
  text-align:left;
}


/* --------------------- footer -------------------- */

#footer {
  clear:both;
  padding:1em 0 0 0;
  margin:0 4.5em 1em 4.5em;
  min-width:67.4em;

  border-top:1px solid #333;
}

#footeritems,
#footeritems ul,
#footeritems li {
  position:relative;
  float:left; display:inline;
  padding:0; margin:0;
}

#footeritems a {
  display:block;
  padding:0; margin:0 1em 0 0;

  color:#fff;
  text-decoration:none;
}

#footeritems a:hover { text-decoration:underline; }

#socrates a {
  display:block;
  float:right; display:inline;
  width:257px;
  height:25px;

  background:url("../img/socrates.png") 0 0 no-repeat;
}


/* -------------------- wb-lightbox -------------------- */

body > #wb-container {
  position:absolute;
  top:0; left:0;
}

#wb-container {
  display:none;
  z-index:999;
}

#wb-container, #wb-overlay {
  position:absolute;
  margin:0; padding:0;
  width:100%;
  height:100%;
  left:0; right:0; top:0;
}

#wb-overlay {
  bottom:0;
  height:100%;
  opacity:0.7;
  background:url("../img/lightbox_bg.png");
}

#wb-container > #wb-overlay { height:100%; }

#wb-body {
  position:absolute;
  left:0; top:0;
  width:100%;
}

#wb-content-header {
  position:absolute;
  top:1em; left:1em; right:1em;
  padding:.25em 1em;
  background:#fff;
}

#wb-content-title { 
  float:left; display:inline;
  padding:0; margin:0;
  width:60%;
  
  color:#777;
  font-size:1.6em;
  text-align:left;
  font-weight:normal;
}

#wb-navigation {
  float:right; display:inline;
  font-size:.9em;
  width:25%;
}

#wb-navigation ul {
  float:right; display:inline;
  padding:0; margin:0;
}

#wb-navigation li {
  float:right; display:inline;
  padding:0; margin:0 0 0 1em;
}

a#wb-content-prev {
  display:block;
  width:24px; height:24px;
  background:url("../img/lightbox_nav.png") 0 0 no-repeat;
}

#wb-content-count {
  display:block;
  padding:0; margin:0;
  width:4em;
  color:#215db1;
  text-decoration:none;
  text-align:center;
  line-height:2em;
}

a#wb-content-next {
  display:block;
  width:24px; height:24px;
  background:url("../img/lightbox_nav.png") -24px 0 no-repeat;
}

a#wb-close {
  display:block;
  width:24px; height:24px;
  background:url("../img/lightbox_nav.png") -48px 0 no-repeat;
}

a:hover#wb-content-prev { background-position:0 -24px; }
a:hover#wb-content-next { background-position:-24px -24px; }
a:hover#wb-close { background-position:-48px -24px; }

#wb-content {
  position:absolute;
  margin:1em 0 0 -305px;
  top:5em; left:50%;
  width:666px;
  background:#fff;
}

#wb-content-inner {
  overflow:auto;
  position:relative;
  padding:1em;
  text-align:center;
}

#wb-content-description {
  display:block;
  padding:.5em; margin:.5em 0;
  color:#777;
  text-align:left;
  font-size:.9em;
  background:#eeede6;
}

#wb-content-videocontainer {
  display:none;
  width:640px; height:440px;
}


/* --------------------- realisation -------------------- */

#realisation { display:none; }