@font-face {
	font-family: 'Captureit';
	src: url('capture_it-webfont.eot');
	src: local('☺'), url('capture_it-webfont.woff') format('woff'), url('capture_it-webfont.ttf') format('truetype'), url('capture_it-webfont.svg#webfontmeDVNR8a') format('svg');
	font-weight: normal;
	font-style: normal;
}

html {
	height: 100%;
}

body {
	background-image:url("images/bg.png");
	margin: 0;
	padding: 0;
	height: 100%;
	background-size: cover;
}

#content {
	background-image:url("images/topbar.png");
	background-repeat: repeat-x;
	top: 100px;
	padding: 0 0 0 0;
	margin: auto;
	font-family: Helvetica, Arial, sans-serif;
	min-height: 100%;
}

#box {
	width: 100%;
	top: 45px;
	position: fixed;
}

a.boxlink:link, a.boxlink:visited {
	text-decoration:none;
	color: #2F4661;
}

a.boxlink:hover, a.boxlink:active {
	text-decoration:none;
	color: #FFF;
}

/** HEADER **/
#toplogo{
	left:20px;
	top:10px;
	position:fixed;
}

#menu {
	top: 100px;
	left: 20px;
	position: fixed;
}

#loginbox {
	
	top: 30px;
	left: 500px;
	position:fixed;
	
	
}

.loginfield {
	width: 120px;
	border: 1px solid #069;
}

.loginbutton {
	width: 60px;
	height: 25px;
	font-size: 12px;
}

#loggedin {
	
	top: 1px;
	right: 10px;
	position:fixed;
}

a.loggedin:link, a.loggedin:visited, span.highlight {
	  text-decoration: none;
	  background-color: #444B9B;
	  color:#FFF;
  }
  
a.loggedin:active, a.loggedin:hover  {
	  text-decoration: none;
	  background-color: #444B9B;
	  color:#FF01FF;
  }


.gatherZip{
   background: white url('images/user.jpg') no-repeat center center;
}

.gatherZipa{
   background: white url('images/pass.jpg') no-repeat center center;
}

/** BODY **/

#praatwolk{
	background-image: url(images/praatwolk.png);
	background-repeat: no-repeat;
	background-position:400px 100px;
	background-attachment:fixed;
	position:fixed;
	top:100px;
	left:200px;
	text-indent: 280px;
	height:100%;
	width: 100%;
}

.pinktext {
	color: #CC006A;
}

p 	{
	font-size: 14px;
	text-align: justify;
	text-justify: distribute;
	text-align-last: left;
	margin-right: 15px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	}

.praatwolk {
	font-size: 16px;
}

A:link{text-decoration: none; color:#06C}
A:visited{text-decoration: none; color:#06C}
A:active {text-decoration: none}
A:hover {text-decoration: none; color:#09F}

a img{
border:0;
}

a:hover img{
	color:#F00;
}

  div.transbox
  {
  position: fixed;
  left: 210px;
  top: 100px;
  width:650px;
  height:85%;
  background-image: url("images/trans.png");
  background-repeat:no-repeat;
  }
  
  div.mediabox
  {
  position: fixed;
  left: 210px;
  top: 100px;
  width:750px;
  height:85%;
  background-image: url("images/trans.png");
  background-repeat:no-repeat;
  }
  
  div.boxbox {
	  position:absolute; 
	  left:220px; 
	  top:110px; 
	  width:630px; 
	  height:80%; 
	  overflow:auto;

  }
  
  div.mediaboxbox {
	  position:absolute; 
	  left:220px; 
	  top:110px; 
	  width:750px; 
	  height:80%; 
	  overflow:auto;

  }
  
    h2
  {
	  font:Calibri, "Courier New", Courier, monospace;
  }
  
	h3
  {
	  font:Calibri, "Courier New", Courier, monospace;
  }
  
	h4
  {
	  font:Calibri, "Courier New", Courier, monospace;
  }
  
  #contenttitle {
	  position: fixed;
	  top: 110px;
	  left: 220px;
  }
  
  #activityavatar {
	  width:100px;
	  height:100px;
	  float:left;
	  margin-right:10px;
  }
  
  #activitytitle {
	  font-family: Captureit, Helvetica;
	  font-size: 16px;
	  color:#FFF;
  }
  
  a.activitytitle:link, a.activitytitle:visited {
	  font-family: Captureit, Helvetica;
	  font-size: 22px;
	  letter-spacing: 1.5px;
	  color: #444B9B;
	  text-shadow: #FFF 0.1px 0.1px 2px;
  }
  
  a.activitytitle:active, a.activitytitle:hover {
	  font-family: Captureit, Helvetica;
	  font-size: 22px;
	  color: #FF01FF;
  }
  
  a.activityhead:link,  a.activityhead:visited {
	/*  font-family: Captureit, Helvetica;
	  font-size: 14px;
	  text-shadow: #444B9B 0.1px 0.1px 2px; */
	  color: #FFF;
	  
  }
  
  a.activityhead:active, a.activityhead:hover {
	/*  font-family: Captureit, Helvetica;
	  font-size: 14px; */
	  color: #FF01FF;
  }
  
  a.highlight:link, a.highlight:visited, span.highlight {
	  background-color: #444B9B;
	  color: #FFF;
  }
  
    a.highlight:active, a.highlight:hover  {
	  background-color: #444B9B;
	  color: #FF01FF;
  }