/* CSS Document */

body{
  margin:0;
  padding:header-<length> 0 0 left-sidebar-<length>;
 }
 

/* @ fontface */
@font-face {
    font-family: 'RockwellBold';
    src: url('fontface/rockw_bold-webfont.eot');
    src: url('fontface/rockw_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/rockw_bold-webfont.woff') format('woff'),
         url('fontface/rockw_bold-webfont.ttf') format('truetype'),
         url('fontface/rockw_bold-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'RockwellRegular';
    src: url('fontface/rockw_regular-webfont.eot');
    src: url('fontface/rockw_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/rockw_regular-webfont.woff') format('woff'),
         url('fontface/rockw_regular-webfont.ttf') format('truetype'),
         url('fontface/rockw_regular-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RockwellLight';
    src: url('fontface/rockw_lite-webfont.eot');
    src: url('fontface/rockw_lite-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/rockw_lite-webfont.woff') format('woff'),
         url('fontface/rockw_lite-webfont.ttf') format('truetype'),
         url('fontface/rockw_lite-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* basis lay-out */

 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:header-<length>;
  z-index:11;
 }
 div#sidebar{
  position:absolute;
  top:header-<length>;
  left:0;
  width:left-sidebar-<length>;
  height:100%;
  width:100%;
  z-index:10;
 }
 @media screen{
  body>div#header{
   position:fixed;
  z-index:11;
  }
  body>div#left-sidebar{
   position:fixed;
   width:100%;
   height:100%;
   overflow:hidden;
   z-index:10;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  width:100%;
  overflow:auto;
  x-overflow:hidden;
 }

/* link styles */

a:link {
	color:#999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#999;
}
a:hover {
	text-decoration: underline;
	color:#999;
}
a:active {
	text-decoration: none;
	color:#999;
}
a.linkopacity img {
	filter:alpha(opacity=100);
-moz-opacity: 1.0; 
	opacity: 1.0;
}

a.linkopacity:hover img {
filter:alpha(opacity=60);   
-moz-opacity: 0.6;   
opacity: 0.6;

}

/* navigatie balken */

#project_scroller
{
	width:100%;
	height: 300px;
	position: absolute;
	left:0px;
	top:200px;
	z-index:4;
}
#log_scroller{
	width:100%;
	height: 300px;
	position: absolute;
	left:0px;
	top:200px;
	z-index:3;
}
#lola_scroller{
	width:100%;
	height: 300px;
	position: absolute;
	left:0px;
	top:200px;
	z-index:2;
}

#scrollWrapper{
position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.left_arr{
position:absolute;
width:50px;
left:0px;
z-index:200;
cursor:pointer;
display:none;	
opacity: 0.80;
filter: alpha(opacity = 80);
-moz-opacity: 0.80;
}
.right_arr{
position:absolute;
width:50px;
right:0px;
z-index:200;
cursor:pointer;
display:none;	
opacity: 0.80;
filter: alpha(opacity = 80);
-moz-opacity: 0.80;
}
.bar_menu_item{
width:auto;
float:left;
height:35px;
cursor:pointer;
padding-top:10px; 
padding-left:10px; 
background-color:#FFF;

font-family: RockwellLight, Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000;
}
.bar_menu_title{
width:auto;
float:left;
height:35px;
padding-left:15px;
padding-right:10px;
padding-top:10px; 
background-color:#FFF;

font-family: RockwellBold, Arial, Helvetica, sans-serif;
font-size: 16px;
}
.menu_pic{
	width:100%;
	background-color:#FFF; 
	padding-top:10px;
	cursor:pointer;
}
.menutitle {
width:100px;
height:30px;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:12px;
padding-top:5px;
z-index:2;
border-bottom: solid thin #CCC;
}
.menuinfo{
display:none;
width:100px;
height:28px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:12px;
padding-top:5px;
padding-bottom:5px;
color:#44C7F4;
background-color:#FFF;
z-index:1;
border-bottom: solid thin #CCC;
}
.lolainfo{
display:none;
width:100px;
height:28px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:12px;
padding-top:5px;
padding-bottom:5px;
color:#44C7F4;
background-color:#FFF;
z-index:1;
border-bottom: solid thin #CCC;
}

.menutitle_log {
width:200px;
height:30px;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:12px;
padding-top:5px;
z-index:2;
color:#44C7F4;
border-bottom: solid thin #CCC;
}
.menuinfo_log {
background-color:#FFF;
width:200px;
height:50px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:12px;
margin-top:0px;
z-index:1;
border-bottom: solid thin #CCC;
}
.menuinfo_padding {
padding-top:5px;
padding-bottom:5px;
padding-right:15px;
}


/*  lay out van content */


/*  meer dan 1024  */
@media (min-width: 1050px) {
.text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height:16px;
}
#pictureview {
width:100%;
padding-bottom:50px;
float:none;
}
#info{
float:left;
display:block;
width:250px;
padding-left:50px;
padding-right:50px;
padding-top:50px;
}
#lola_info{
float:left;
display:block;
padding-top:50px;
padding-left:315px;
}
#lola_image{
position:absolute;
left:0px;
top:50px;
width:285px;
}
#lola_pics{
	position:relative;
	float:left;
	width:500px;
	padding-bottom:50px;
	padding-top:30px;
}
#lola_related{
float:left;
display:block;
width:500px; 
}
#related {
width:250px; 
padding-top:20px;
padding-left:50px;
}
.rel_item {
width:230px; 
float:left;
padding-right:10px;
}
#archive{
position:absolute;
right:20px;
top:50px;
width:230px;
padding-top:15px;
padding-bottom:50px;	
}
#log_image {
position:absolute;
left:313px;
top:50px;
right:300px;
padding-top:22px;
}
#proj_image{
position:absolute;
left:313px;
top:50px;
text-align:center;
right:50px;
}
#social_links{
position:absolute;
right:50px;
padding-top:19px;
text-align:right;
height:40px;
cursor:pointer;
padding-right:0px;
width:200px;
}
}

/*  tussen 1050 en 850  */
@media (min-width: 850px) and (max-width: 1050px) {
.text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height:16px;
}
#pictureview {
width:100%;
padding-bottom:50px;
float:none;
}
#info{
float:left;
display:block;
width:250px;
padding-left:50px;
padding-right:50px;
padding-top:50px;
}
#lola_info{
float:left;
display:block;
width:500px;
padding-top:50px;
padding-left:30px;
}
#lola_image{
float:left;
display:block;
height:100%;
width:285px;
padding-top:50px;
}
#lola_related{
float:left;
display:block;
width:500px; 
}
#lola_pics{
	position:relative;
	float:left;
	width:500px;
	padding-top:30px;
	padding-bottom:50px;
}
#related {
width:250px; 
padding-top:20px;
padding-left:50px;
}
.rel_item {
width:230px; 
float:left;
padding-right:10px;
}
#archive{
float:left;
display:block;
width:230px;
padding-bottom:50px;
margin-left:50px;
padding-top:20px;
width:80%;
}
#log_image {
position:absolute;
float:left;
left:313px;
top:50px;
right:50px;
padding-top:22px;
}
#proj_image{
position:absolute;
left:313px;
top:50px;
text-align:center;
right:50px;
}
#social_links{
position:absolute;
right:50px;
padding-top:19px;
text-align:right;
height:40px;
cursor:pointer;
padding-right:0px;
width:200px;
}
}

/*  minder dan 850  */
@media (max-width: 850px) {
.text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:19px;
}
#pictureview {
width:100%;
padding-bottom:30px;
}
#content{
padding-left:50px;
padding-right:50px;
}
#info{
float:left;
display:block;
padding-top:50px;
width:100%;
}
#lola_info{
float:left;
display:block;
width:500px;
padding-top:50px;
padding-left:3px;
}
#lola_image{
display:none;
}
#lola_related{
float:left;
display:block;
width:100%; 
padding-left:0px;
}
#lola_pics{
	position:relative;
	float:left;
	width:500px;
	padding-top:30px;
	padding-bottom:50px;
}
#related {
float:left;
width:250px;
padding-right:50px;
}
.rel_item {
width:230px; 
float:left;
padding-right:10px;
}
#archive{
float:left;
display:block;
width:230px;
padding-bottom:50px;
}
#log_image {
float:left;
display:block;
width:100%;
}
#proj_image {
float:left;
display:block;
width:100%;
}
#social_links{
position:absolute;
right:20px;
padding-top:19px;
text-align:right;
height:40px;
cursor:pointer;
padding-right:0px;
width:75px;
background-color:#FFF;
}
}


/*  overig */

.embed_item{
	width: 100px;
	height:50px;
	background-image:url(../../navpics/embed_icon.gif);
}
.embed_txt{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height:14px;
padding:5px;
color:#999;
}

.blue{
	color: #44C7F4;
}
.gray{
color:#999999;
}
.linkstyle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
.bijschr{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
line-height:16px;
}

.title a:link {
	color: #000000;
	text-decoration: underline;
}
.title a:visited {
	color: #000000;
	text-decoration: underline;
}
.title a:hover {
	color: #000000;
	text-decoration: underline;
}
.title a:active {
	color: #000000;
	text-decoration: underline;
}

#embed{
position:relative;
width:100px;
height:50px;
background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height:16px;
padding-right:20px;
float:left;
padding:5px;
}

.main_menu_item{
width:auto;
float:left;
height:50px;
cursor:pointer;
padding-top:15px;
padding-right:15px;

font-family: RockwellRegular, Arial, Helvetica, sans-serif;
font-size: 17px;
color:#CCC;
}

h1, h2, h3, h4 {
	font-family: RockwellRegular, Arial;
	font-style: normal;
	align: left;
	padding:0px;
	margin:0px;
}

h1 {
	font-size: 12px;
	padding-top:5px;
	padding-bottom:5px;
}
h2 {
	font-size: 25px;
	line-height:25px;
}
h3 {
	font-size: 17px;
	padding-top:5px;
	padding-bottom:5px;
}
h4{
	font-size: 25px;
	line-height:23px;
	color:#9A318A;
	
}