/**
* CSS
* 
* @version 1.0
* @author Vaska 
* @author Gregory Cadar
*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 11px;
	font-family: Helvetica;
	font-weight: regular;
	background: #eceded;
}

body.section-1 { 
}
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color: #929090; }
a:active { text-decoration: none; color: #929090; }
a:visited { text-decoration: none; color: #929090; } 
a:hover { text-decoration: none; color: #ffffff; background: #000000; }

a img { border: none; 
}
 
#img-container span.backgrounded a 
#img-container a.thickbox { border: none; }, 
#img-container a.thumb-img, 
#img-container #d-col1 a { background: transparent; }





#menu {
	font-size: 15px;
	font-family: Helvetica;
	font-weight: regular;
	background: #eceded;
    width: 220px;
    overflow: auto;
    top: 20px;
    bottom: 0;
	left: 20px;
    position: fixed;
    height: 100%;
	background-color: #eceded;
}

#menu ul {
	list-style: none;
	margin: 0 0 12px 0;
}

#menu ul li.section-title { 
font-size: 18px;
	font-family: Helvetica;
	font-weight: regular;
	background: #eceded;

$(document).ready(function()
{
// First we hide all exhibitis 
$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});
	
});}

#content {
	font-family: Helvetica;
	font-style: regular;
    height: 100%;
    margin: 18px 0 0 250px;
    top: 0;
}

.container {
	font-family: Helvetica, regular;
	font-weight: regular;
    padding: 5px 5px 25px 5px;
}

#content p { 
font-family: Helvetica, regular;
	font-weight: regular;
width: 400px; margin-bottom: 9px; }

p {
	font-family: Helvetica, regular;
	font-weight: regular;
   margin: 0 0 9px 0;
}


p1 {
	font-family: Helvetica, regular;
	font-size: 18px;
	font-weight: regular;
   margin: 0 0 9px 0;
   color: #000000;
a img { border: none; 
}
 
}


h1 { font-size: 5px; } 
h2 { font-size: 11px; }
h3 { font-size: 16px; }
h4 { 
        font-size: 18px;
        font-family: Helvetica, regular;
   }

h5 { font-size: 16px; }


<link rel='stylesheet' href='http://sepppfiffner.ch/ndxz-studio/site/sample/style.css' type='text/css' />
<!--[if lte IE 6]>
<link rel='stylesheet' href='http://sepppfiffner.ch/ndxz-studio/site/sample/ie.css' type='text/css' />
<![endif]-->


<style type='text/css'>body { background: url(http://sepppfiffner.ch/files/background) no-repeat;
background-position: 215px 0; }</style>

<style type="text/css"> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>


<style type='text/css'>
#d-image { display: none; }
	#d-image img { border: none; }
		
	.grow { float:left; }
	.thumb {  padding:0; text-align:left; display: table; height: 220px; #position: relative; overflow: hidden; width: 220px; }

	.grow strong { margin-top: 3px; text-align: left; display: block; font-weight: normal; text-align: center; display: none; }
	.grow em { font-style: normal; display: none; text-align: center; }
	
	.thumb-it { #position: absolute; _top: 50%; display: table-cell; vertical-align: top; text-align: center; }
	.thumb-img { #position: fixed; width: 500px; display:block; }
</style>

<script type='text/javascript' src='http://sepppfiffner.ch/ndxz-studio/site/js/jquery.js'></script>
<script type='text/javascript' src='http://sepppfiffner.ch/ndxz-studio/site/js/cookie.js'></script>
<script type='text/javascript' src='http://www.sepppfiffner.ch/ndxz-studio/site/js/expandingMenus.js'></script>
<script type='text/javascript' src='http://www.sepppfiffner.ch/ndxz-studio/site/js/grow2.vaska.js'></script>

<script type='text/javascript'>
path = 'http://sepppfiffner.ch/files/gimgs/';

$(document).ready(function()
{
	setTimeout('move_up()', 1);
});
</script>
<script type='text/javascript'>
function show_image(id)
	{
		$('.pic').hide();
		$('#p' + id).fadeIn();
		return false;
	}
	
	function swap() {
	if(document.getElementById('img-container').style.display != 'none'){
	document.getElementById('img-container').style.display =  'none';
	document.getElementById('d-image').style.display =  'inline';
	}
	else {document.getElementById('img-container').style.display =  'inline';
	document.getElementById('d-image').style.display =  'none';
	}
	}
	

#once { clear: left; }

p.nav a {
		background-color: #eeeeee;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        font-size: 10px;
        font-family: Helvetica, regular;
        -moz-border-radius-bottomleft: 0px;
        -moz-border-radius-bottomright: 0px;
        -moz-border-radius-topleft: 0px;
        -moz-border-radius-topright: 0px;
    }
    
    p.nav a:hover {
        background-color: #000000;
    }
    
    p.nav span#num {
        letter-spacing: 2px;
        font-family: Helvetica, regular;
        font-style: regular;
        padding-left: 20px;
    }
	
	
	#img-container span.backgrounded a 
#img-container a.thickbox, 
#img-container a.thumb-img, 
#img-container #d-col1 a {background: transparent; }
#img-container a {
    display:block;
    float:left;
    width:200px; [this width can be anything you want]
    height:200px; [also anything you want]
    margin:0 10px 10px 0; [margins for space between the thumbnails]
    padding:0;
    border:0;
    overflow:hidden;
	
	
}