/*CSS für celine van den boorn */

/****************RESET STYLES IS A GOOD THING | indeed stef************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table { border-collapse:collapse; border-spacing:0; margin-bottom: 0px; vertical-align: top; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,b,strong,th,var { font-style:normal; font-weight:normal; }
ul { list-style:none; }
ol { list-style: decimal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%;}
p,dl,hr,ol,ul,pre,table,fieldset {font-weight: normal;}
q:before,q:after { content:''; }
abbr,acronym { border:0; }
/**********************************************************************************************************************/



@font-face {
	font-family: 'celineM';
	src: url('/fonts/celinemedium-webfont.eot');
	src: local('☺'), url('/fonts/celinemedium-webfont.woff') format('woff'), url('/fonts/celinemedium-webfont.ttf') format('truetype'), url('/fonts/celinemedium-webfont.svg#webfontLcLwXBp1') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'celine';
	src: url('/fonts/celineregular-webfont.eot');
	src: local('☺'), url('/fonts/celineregular-webfont.woff') format('woff'), url('/fonts/celineregular-webfont.ttf') format('truetype'), url('/fonts/celineregular-webfont.svg#webfontrUQrLU7O') format('svg');
	font-weight: normal;
	font-style: normal;
}


html, body 
	{
	height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
	width: 100%;
	margin:0;
	padding:0;	
	overflow:hidden;
	text-align:left; /* evt wieder center, ursprüglich center */
	font-family: "celine", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	}
	
h1	{ font-family: "celineM", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 0.9em; font-weight: normal; }
	
h2	{
	font-family: "celine", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	text-indent: 5px;
	}
	
h3	{
	margin-bottom: 1px;
	text-indent: 5px; 
 	padding: 5px 0 5px 0;
 	font-size: 1.3em;
	}	
	
h4	{
 	font-size: 0.9em;
	text-transform: uppercase;
	font-weight: normal;
	}
	
h5	{ 
	font-size: 0.9em;
	}
	
p 	{
	font-size: 0.8em;
	line-height: 1.8em;
	}
	
strong {font-weight: bold;}
	
label {
	font-size: 0.8em;
	line-height: 1.8em;
	}
	
textarea {
	width: 245px;
	}
	
input {
	width: 240px;
	}
	
.senden {
	width: 100px;
	border: 1px outset #ccc;
	}
	

.columns {
 	padding: 35px 0 0 0;
 	margin: 0 20px 0 0;
/*
	font-size: 0.9em;
	line-height: 1.8em;
*/
	float:left;
	width:33%;
	}		

a, a:link, a:visited, a:focus {text-decoration: none; color: #58585a; font-weight: normal; }
a:active {color: #000000; }
a:hover {text-decoration: none; color: #000000;}	

a.download {font-size: 0.8em;}
a.detailInformation {font-size: 0.8em; font-style: italic;}
a.subnav {padding-left: 10px;}
/* a.selected {color:fuchsia;} */
a.content_edit {padding: 0 3px; background: red; color: white}

	
ul {
	margin: 0px;
	padding: 0px;
	position: relative;
	}
	
li {
	margin: 0px;
	padding: 0px;
	font-size: 0.8em;
	line-height: 1.8em;
	list-style-type: none;
	}
	
li.square {
	width: 245px;
	height: 245px;
	font-size: 0.8em;
	line-height: 1.8em;
	float: left;
/* 	list-style-type: none; */
	}

li.navi {
	font-size: 1.3em;
	padding: 2px 0 3px 0;
	width: 244px;
	height: 25px;
	text-indent: 5px;
	display: block;
	background-image: url(/images/interface/bottom_dotted.gif);
/* 	list-style-type: none; */
	}

li.head {
	height: 70px;
	margin: 0px;
	padding: 0px;
/* 	list-style-type: none;	 */
	}
	
li.bottomLine {
	width: 245px;
/* 	margin: 10px; */
/* 	padding: 2px 0 0 0; */
	float: left;
/* 	list-style-type: none; */
	}
	
li.work {
	width: 235px;
	height: 235px;
	padding: 10px 0 0 10px;
	float: left;
	display: inline;
	}

li.headlink ul { display: none; background-image: url(/images/interface/bottom_dotted.jpg); list-style-type: none; }

li.sc_menu {width: auto; height: auto;}

/*
.article {
 	padding: 20px 0 0 0;
	position: relative;
 	margin-left: 250px;
 	height: 650px;
 	width: 735px;
	column-width: 230px;
	column-count: 3;
	column-gap: 20px;
	}
*/
	
.xl {
	padding: 30px 0 0 0;
	}
	
ul.thumb {
	width: 980px;
	background-color: lime;
	}
	
ul.thumb li {
	padding: 10px;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 225px;
	height: 225px;
}

ul.thumb li:hover {
	padding: 10px;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 225px;
	height: 225px;
/* 	opacity: 0.9; */
}

td.download {
	background:url("/images/interface/icon_download.gif") no-repeat scroll left 1px transparent;
	width:15px;
	}

	
	
/* DIV */
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv
	{ 
	position: relative;
 	top: 10px;
 	left: 0;
  	overflow:auto;
  	width: 100%;
 	height: 100%;
	}
	
#contOne
	{
	position:relative;
	width:980px;
	height:735px;
	margin:0 auto;
	background-image: url(/images/interface/raster_01.jpg)
	}
	
#contTwo
	{
	position:relative;
	width:980px;
	height:735px;
	margin:0 auto;
	background-image: url(/images/interface/raster_02.jpg)
	}
	
#contThree
	{
	position:relative;
	width:980px;
	height: 735;
	margin:0 auto;
	background-image: url(/images/interface/raster_02.jpg)
	}
	
	
#inhalt_3
	{
	position:relative;
	width:980px;
	height:735px;
	margin:0 auto;
	background-image: url(/images/interface/raster_03.jpg)
	}


/*----- VIEW WORK -----*/

#head
	{
	position:relative;
	margin-left: 245px;
	height: 70px;
	width: 735px;
	text-align: left;
	background-color: navy;
	}
	
#head2
	{
	position:relative;
/* 	margin-left: 490px; */
	height: 65px;
	width: 980px;
	text-align: left;
	z-index: 1; 
/* 	background-color: aqua; */
	}	

#subnavWork
	{
	position:absolute;
	margin-left: 245px;
	width: 245px;
	height: 65px;
	bottom: 0;
	left: 0;
/* 	padding-bottom: 5px; */
/* 	background-color: green; */
	}

#topnav
	{
 	position:absolute;
 	bottom:0;
 	right:0;
 	padding-bottom: 7px;
/*  	background-color: red; */
	}

#img
	{
	position:absolute;
	margin-top: 35px;
	padding: 0;
	height: 570px;
	width: 980px;
/* 	background-color:blue; */
	/* z-index: 1; */
	}
	
#navToggle
	{
	position:relative;
	width: 245px;
	height: 65px;
	bottom: 0;
	left: 0;
/* 	padding-bottom: 5px; */
	text-align: left;
/* 	background-color: green; */
	}

#navToggleSubNav
	{
	position:relative;
	width: 245px;
	height: 65px;
	bottom: 0;
	left: 0;
	text-align: left;
	}

#navWork
	{
	position:absolute;
	width: 245px;
	height: 70px;
	padding: 0;
	left: 245px;
/* 	padding-bottom: 5px; */
	text-align: left;
/* 	background-color: maroon; */
	}	

#detailInformation
	{
 	position:absolute;
 	bottom:0;
 	right:0;
 	padding-bottom: 5px;
	}
	
#textBlock
	{
	position: absolute;
/* 	padding: 20px 0 0 0; */
	position: relative;
 	margin-left: 250px;
 	height: 620px;
 	width: 735px;
/* 	background-color: gray; */
	}

#bottom
	{
 	position:absolute;
 	height: 30px;
 	width: 980px;
 	bottom:0;
/*  	padding-bottom: 5px; */
/*  	background-color: lime; */
	}
	
#agenda
	{
 	padding-bottom: 20px;
	}
	
#oneCol
	{
	padding: 35px 0 0 0;
	position: absolute;
 	margin-left: 250px;
 	height: 600px;
 	width: 240px;	
/*  	background-color: aqua; */
 	}

 #secondCol
	{
	padding: 35px 0 0 0;
	position: absolute;
 	margin-left: 490px;
 	height: 600px;
 	width: 245px;	
/*  	background-color: maroon; */
 	}
 	
 #thirdCol
	{
	padding: 35px 0 0 0;
	position: absolute;
 	margin-left: 735px;
 	height: 600px;
 	width: 245px;	
/*  	background-color: fuchsia; */
 	}
 	
#doubleCol
	{
	padding: 35px 0 0 0;
	position: absolute;
 	margin-left: 250px;
 	height: 600px;
 	width: 480px;	
 	}
 	
#containerAcc
	{
	margin: 0 auto;
	width: 490px;
/*  	background-color: blue; */
	}	


/* ---------- SC_MENU ---------- */

#sc_menu {
	/* Set it so we could calculate the offsetLeft */
	position: absolute;
	width: 245px;  
	height: 25px;
	bottom: 0;
	left: 490px;
	margin-bottom: 5px;
	/* Add scroll-bars */
	overflow: auto;
	}
	
ul.sc_menu {
	display: block;
	height: 25px;
	/* Max width here, for users without Javascript */
	width: 490px;
	padding: 0;
	/* Remove default margin */
	margin: 0;
	list-style: none;
	}
	
.sc_menu li {
	width: auto;
	height: auto;
	display: block;
	float: left;
  	padding: 0 4px;
	}
	
.sc_menu a {
	display: block;
	text-decoration: none;
	}

.sc_menu a:hover span {
  	display: block;
	border: solid 1px #000;
	}
	
.sc_menu img {
	border: none;
	}
	
.sc_menu a:hover img {
	filter:alpha(opacity=50);
	opacity: 0.5;
	}
	
/* ---------- END SC_MENU ---------- */



/* ---------- START ACCORDEON ---------- */

h1.acc_trigger {
	padding: 5px 0 0 0;
	margin: 0;
	background: url(/images/interface/h1_trigger_a.gif) no-repeat;
	height: 25px;	
	width: 490px;
	float: left;
	font-style: normal;
	text-indent: 5px;
}
h1.acc_trigger a {
	text-decoration: none;
	display: block;
	padding: 0;
	}
	
h1.acc_trigger a:hover {
	color: #000;
}
h1.active {background-position: left bottom;}

.acc_container {
	margin-left: 0; 
	padding: 0;
	overflow: hidden;
	width: 490px;
	clear: both;
/* 	background-color: gray; */
}

.acc_container .block {
	padding: 10px 0 0 5px;
	margin-bottom: 10px;
}

/* ---------- END ACCORDEON ---------- */


/* ---------- MAGNIFY ---------- */


#Previewholder{
left:0;
top:0;
position:absolute;
display:none;
background:#fff;
border:1px dotted #DCDCDC;
}
#Previewholder img{
display:block;
}
#Previewholder p{
margin:0;
padding:0;
color:#090808;
}
#Previewholder p span{
border-top:1px solid #ccc;
display:block;
padding:5px;
}