/* @override 
	http://martenaukes.loc/css/styles.css
	http://www.martenaukes.nl/css/styles.css
	http://martenaukes.nl/css/styles.css
*/

/* @group Algemeen */

* {
	margin:0;
	padding:0;
}
a img, ahover img {
	border: none;
	outline: none;
}

html, body {
	height:100%;
	}

body {
	text-align:center;
	text-align:center;
	color: #7a7e89;
	font: 0.9em/1.5em "Century Gothic", AppleGothic, Verdana, sans-serif;
	background-color: #7a7e89;
}

#distance { 
	width:1px;
	height:50%;
	margin-bottom:-372.5px; /* half of container's height */
	float:left;
}
h1, h2, h3 {
	font-family: STHeiti, "Century Gothic", AppleGothic, "Lucida Sans Unicode", Verdana, sans-serif;
	line-height: 1.5em;
}
h1 {font-size: 38px;line-height: 1.5em;}
h2 {font-size: 28px;line-height: 1.5em;}
h3 {font-size: 22px;line-height: 1.5em;}

p {
	margin-top: 5px;
	margin-bottom: 5px;
}

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

a img, a:focus img, a:active img, a:hover img {
	border-style: none;
	outline: none;
}

.clearfix {
	clear: both;
	height: 1px;
}

/* @end */

/* @group Menu */

#nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 105px;
	left: 0;
	background-color: rgba(34,108,151,0.05);

}

#nav ul {
	width: 99%;
	position: absolute;
	bottom: 16px;
	left: 0;
	padding-left: 1%;
}

#nav li {
	display: inline;
	width: 100%;
	position: relative;
	float: left;
}

#nav .menu2 li {
	display: inline;
	width: 50%;
	position: relative;
	float: left;
}

#nav .menu3 li {
	display: inline;
	width: 33%;
	position: relative;
	float: left;
}

#nav .menu4 li {
	display: inline;
	width: 25%;
	position: relative;
	float: left;
}

#nav .menu5 li {
	display: inline;
	position: relative;
	float: left;
	width: 20%;
}

#nav .menu6 li {
	display: inline;
	width: 16.67%;
	position: relative;
	float: left;
}

a.menu_txt {
	color: #7a7e89;
	font: 50px STHeiti, "Century Gothic", "Lucida Sans Unicode", Verdana, sans-serif;
	text-transform: capitalize;
}

.home a.menu_txt {
	font: 65px STHeiti, "Century Gothic", "Lucida Sans Unicode", Verdana, sans-serif;
}

.menu5 a.menu_txt {
	font: 45px STHeiti, "Century Gothic", "Lucida Sans Unicode", Verdana, sans-serif;
}

li.sel a.menu_txt:hover, a.menu_txt:hover {
	color: white;
	text-shadow:
     -1px -1px 0 #ccc,
      1px -1px 0 #ccc,
      -1px 1px 0 #ccc,
       1px 1px 0 #ccc;
}

li.sel a.menu_txt {
	color: #888a8d;
	text-shadow:
     1px 1px 0 #E0E4EA;
}

/* @end */

/* @group Content */

#core {
	margin:0 auto;
	position:relative;
	height: 745px;
	width:1024px;
	clear:left;
	background: url(../site_images/core.png) center center;
}

/* Home */

#front_txt {
	position: relative;
	height: 313px;
	vertical-align: middle;
	top: 36.4%;
}

#core.home h3.sIFR-replaced {
	margin-top: 0;
}

/* @group Intro */

#intro {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 745px;
	background: url(../site_images/core.png) center center;
	//background-color: #7a7e89;
	//background-color: #fff;
}

#intro_left, #intro_center, #intro_right, #intro .wrap, .flits_cont {
	width: 550px;
	height: 500px;
}

#intro_left, #intro_center, #intro_right {
	position: absolute;

	overflow: hidden;
}

#intro_left {
	top: 0;
	left: 0;
	z-index: 30;	
}

#intro_center {
	left: 203px;
	top: 122px;
	z-index: 40;
}

#intro_right {
	z-index: 50;
	right: 0;
	bottom: 0;
}

#intro .wrap {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.flits_cont {
	position: absolute;
	top: 0;	
	z-index: 999;	
}

.flits {	
	
}
.frame {
	background-color: white;
	width: auto;
	padding: 10px;
	display: inline-block;
	-webkit-box-shadow: 10px 5px 25px #ccc;
	-moz-box-shadow: 10px 5px 25px #ccc;
	box-shadow: 10px 5px 25px #ccc;
	behavior: url(/js/PIE.php);
}
.img {
	width: auto;
	height: auto;
}

/* @end */



/* Route */

div#core.route {
	padding-top: 50px;		
	width: 700px;
	height: 550px;
}
div#core.route #nav {
	display: none;
}

#route {
	top: 50px;
	position: relative;
}

/* Studio */
div#core.studio {
	padding-top: 75px;	
	height: 670px;
}

div#core.studio p {
	margin-right: 6em;
	margin-left: 6em;
	padding-bottom: 2em;
}

.address {
	font-size: 1em;
}

#home a {
	font-size: 22px;
	line-height: 1.9em;
}

/* @group gallery */
#gallery {
	width: 100%;
	height: 620px;	
	position: relative;
	top: 10px;
}

.th_nav img {
	position: relative;
	width: 100%;
	height: auto;
	-webkit-box-shadow: 1px 3px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 3px 6px rgba(0,0,0,0.3);
	box-shadow: 1px 3px 6px rgba(0,0,0,0.3);
	behavior: url(/js/PIE.php);
}


#th_wrap {
	position: absolute;
	display: block;	
	width: 98%;
	height: 50px;
	position: absolute;
	overflow: scroll;
	bottom: 120px;
	left: 1%;
}

ul.th_nav {
	position: absolute;
	height: 55px;
	width: 10000px;
}

ul.th_nav li {
	float: left;
	margin-right: 10px;
}
ul.th_nav li a {
float: left;
display: block;
}

.th_nav img {
	position: relative;
	width: auto;
	height: 40px;
	-webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 2px 6px rgba(0,0,0,0.4);
	box-shadow: 1px 2px 6px rgba(0,0,0,0.4);
	behavior: url(/js/PIE.php);
	margin-top: 1px;
}

#stage {
	position: relative;
	display: block;
    width: 1024px;
    height: 575px;
}

#stage .img_wrap {
	position: absolute;
	left: 512px;
	top: 287px;
}

#stage img {
	position: absolute;	
}

#stage img.current {
	z-index: 100;
	-webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
	-moz-box-shadow:  4px 4px 10px rgba(0,0,0,0.4);
	box-shadow:  4px 4px 10px rgba(0,0,0,0.4);
	behavior: url(/js/PIE.php);
}

#i_btn {
	position: absolute;
	right: 14px;
	bottom: 16px;
	//display: none;
	z-index: 10000;
	height: 40px;
	width: 40px;
	font-size: 32px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px #ccc, -1px -1px #555;
	background-color: #c1ced8;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
	behavior: url(/js/PIE.php);
	color: #acbdcb;
}

#i_btn:hover {
	text-shadow: 1px 1px white, -1px -1px #444;
	background-color: #acbdcb;
	color: #ececec;
	cursor: pointer;
}


#the_info {
	z-index: 9999;
	display: none;
	min-width: 150px;
	position: absolute;
	bottom: 20%;
	padding: 1.5em;
	background-color: rgba(255,255,255,0.85);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
	box-shadow:0px 0px 15px rgba(0,0,0,0.8);
	behavior: url(/js/PIE.php);
	right: 15px;
	text-align: left;
	font-size: 12px;
	color: #40434a;
	line-height: 1.8em;
}

#the_info ul {
	list-style: none;
}

/* @end */

#edit {
	position: absolute;
	top: 1em;
	right: 2em;
	z-index: 9999;
	color: white;
	background-color: black;
	padding: 5px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(/js/PIE.php);
}
#edit a{
	color: white;
	
}
#edit a:hover{
	color: silver;
	
}

#movie object {
	position:relative;
	width: 550px;
	height: 375px;
	margin-top: 160px;
}

#movie embed {
	position:relative;
	width: 550px;
	height: 375px;
	margin-top: 160px;
}


#movie p {
	font-size: 12px; 
	padding-top: 260px;	
}

#film a img {
	background: url(../site_images/klapbord_over.png);
	position: absolute;
	z-index: 99;
	top: 20px;
	right: 20px;
}
#film a:hover img {
	background: url(../site_images/klapbord.png);
}

#film_gal ul {
	list-style-type: none;
	margin-left: 12px;
	margin-bottom: 6px;
}


#film_gal ul li {
	float: left;
	width: 31%;
	margin-top: 20px;
	height: 180px;
	overflow: hidden;
	position: relative;
	margin-right: 1%;
	margin-left: 1%;
	box-shadow: 1px 1px 10px #888; 
	-webkit-box-shadow: 1px 1px 10px #888;
	-moz-box-shadow: 1px 1px 10px #888;
	behavior: url(/js/PIE.php);
}
#film_gal ul li a.play {
	position: absolute;
	z-index: 99;
	top: 45%;
	left: 40%;
}

#film_gal ul li img.still {
	width: 345px;
	height: auto;
	position: relative;
	top: -15px;
}

#core.flash , #core.qtime {
	height:530px;
	width:700px;	
}

/* @end */

/* @group Footer */

#footer { 
	text-align: center; 
	width: 100%; 
	height: 50px; 
	position: relative;
	margin: 0;
	padding-top: 15px;
	font-size: 0.8em;
}

#footer a { color: #b0b3c3;
	font-weight: normal;
	font-style: normal;
	font-size: 9px;
	text-decoration: none;
}
#footer a:hover {
	color: #b0b3c3;
}

/* @end */