/**************************************************

		Zinnfigurenwelt Katzelsdorf
		10.08.2010
		www.zinnfigurenwelt-katzelsdorf.at
		
___________________________________________________
**************************************************/


/******************************************************************************
		BASIC LAYOUT
=============================================================================*/

html, body
	{
		background: #CCCCCC;
		height: 100%;
	}

	
#OuterLimit
	{
		position: relative;
		top: 20px;
		width: 950px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 20px;	
	}

#whiteContainer
	{
		position: relative;
		top: 0px;
		width: 926px;
		min-height: 688px;
		height: auto;
		background: #FAFAFA;
		padding: 12px;
		margin-bottom: -176px;
	}

#topnav
	{
		position: relative;
		top: 0px;
		right: 0px;
		width: auto;
		height: 20px;
		font-family: Tahoma, no-serif;
		font-size: 11px;
		color: #333333;
		text-align: right;
		margin-right: 12px;
	}

#logo
	{
		position: absolute;
		top: 34px;
		right: 12px;
		width: 96px;
		height: 149px;
	}

.clearence
	{
		clear: both;
	}

/*---------------------------------------------------------------------------*/



/******************************************************************************
	1ST NAVIGATION - Layout & Style
=============================================================================*/

#navi
	{
		position: relative;
		top: 3px;
		left: 93px;
		width: 646px;
		height: 33px;
		background: #333366;
		float: left;
	}

#navList
	{
		top: 0px;
		left: 0px;
		width: 646px;
		height: 33px;
		margin: 0px;
		padding: 0px;
		border: 0px solid red;
		display: block;
	}
	
#navList li
	{
		list-style: none;
		float: left;
	}

#navList li a
	{
		margin-top: 0px;
		margin-left: 10px;
		margin-right: 2px;
		height: 21px;
		float: left;
		text-decoration: none;
		font-family: Helvetica, no-serif;
		font-size: 12px;
		letter-spacing: 0.02em;
		color: #f5f5f5;
		padding: 10px 10px 2px 10px;
	}

#navList li a:hover
	{
		height: 21px;
		margin-top: 0px;
		margin-left: 10px;
		margin-right: 2px;
		float: left;
		text-decoration: none;
		font-family: Helvetica, no-serif;
		font-size: 12px;
		letter-spacing: 0.02em;
		color: #FFFFFF;
		padding: 9px 10px 2px 10px;
		border-bottom: 1px solid #FFFFFF;
		background: #505086;	
	}

/*---------------------------------------------------------------------------*/



/******************************************************************************
	2ND NAVIGATION - Layout & Style
=============================================================================*/

#secondNav
	{
		padding: 16px;
		line-height: 20px;
		letter-spacing: 0.02em;
	}

#secondNav a
	{
		text-decoration: none;
		color: #333;
		padding: 2px;
	}

#secondNav a:hover
	{
		text-decoration: none;
		color: #f6f7e8;
		padding: 2px;
		background: #505086;
	}

/*---------------------------------------------------------------------------*/



/******************************************************************************
	HEADER - Layout & Style
=============================================================================*/

#headerContainer
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 926px;
		height: 264px;
	}

.boxgrid
	{
		position: relative;
		top: 0px;
		left: 65px;
		width: 794px;
		height: 228px;
		background: #FFF;
		overflow: hidden;
	}

.boxgrid img
	{
		position: absolute;  
  		top: 0;  
 	   	left: 0;  
 	   	border: 0; 
	}

#headerText
	{
		position: absolute;
		top: 150px;
		left: 0px;
		width: auto;
		height: auto;
		font-family: Helvetica, no-serif;
		font-size: 12px;
		color: #333366;
		padding-left: 60px;
		padding-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
/*		background: #FFF;
		background: rgba(255, 255, 255, 0.9);
*/		background-image: url(../gfx/whitetransparent.png);
		
	}

#headerDate
	{
		position: relative;
		top: 10px;
		left: 350px;
		width: 180px;
		height: auto;
		font-family: Helvetica, no-serif;
		font-size: 14px;
		color: #FEFEFE;
		background: #333366;
		padding-top: 4px;
		padding-left: 10px;
		float: left;
	}
	
/*---------------------------------------------------------------------------*/



/******************************************************************************
	CONTENT - Layout & Style
=============================================================================*/

#contentContainer
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 739px;
		height: auto;
		overflow: hidden;
		float: left;
		
	}

#content
	{
		position: relative;
		top: 0px;
		left: 3px;
		width: 646px;
		height: auto;
		float: left;
		font-family: Tahoma, no-serif;
		font-size: 12px;
		line-height: 16px;
		color: #333333;
		overflow: hidden;
	}

/*---------------------------------------------------------------------------*/



/******************************************************************************
	LEFTBAR - Layout
=============================================================================*/

#leftbar
	{
		position: absolute;
		top: 52px;
		left: 0px;
		width: 93px;
		height: 212px;
		background: #FFFFFF;
		float: left;
	}
	
#leftbarRed
	{
		position: relative;
		top: 3px;
		left: 0px;
		width: 90px;
		height: 209px;
		background: #cc3300;
		text-align: right;
	}

#leftbarRed2
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 90px;
		min-height: 478px;
		height: auto;
		background: #cc3300;
		padding-bottom: 2000px;
		margin-bottom: -2000px;
		text-align: right;
		float: left;
	}

/*---------------------------------------------------------------------------*/



/******************************************************************************
	RIGHTBAR - Layout & Style
=============================================================================*/

#rightbar
	{
		position: relative;
		top: -80px;
		left: 0px;
		width: 187px;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-bottom: -77px;
	}

#rightbarYellow
	{
		position: relative;
		top: 3px;
		left: 3px;
		width: 184px;
		height: 170px;
		font-family: Tahoma, no-serif;
		font-size: 12px;
		line-height: 18px;
		color: #333333;
		text-align: right;
		background-image: url(../gfx/zinn-logos.jpg);
	}

#rightbarButtons
	{
		position: relative;
		top: 3px;
		left: 3px;
		width: 184px;
		height: 52px;
		margin-top: 3px;
	}

#btnList
	{
		top: 0px;
		left: 0px;
		width: 184px;
		height: 327px;
		margin: 0px;
		padding: 0px;	
	}
	
#btnList li
	{
		top: 0px;
		width: 184px;
		height: 52px;
		list-style: none;
		display: block;
		margin-top: 3px;
	}

#btnList li a
	{
		width: 184px;
		height: 52px;
		text-decoration: none;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		letter-spacing: 0em;
		color: #f5f5f5;
		text-align: right;
		background: #333366;
		display: block;
	}

#btnList li a:hover
	{
		width: 184px;
		height: 52px;
		text-decoration: none;
		background: #505086;
		display: block;
	}

.btnText1
	{
		font-size: 16px;
		padding: 10px 10px 0px 0px;
	}

.btnText2
	{
		font-size: 12px;
		padding: 2px 10px 0px 0px;
	}

/*---------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------/





/******************************************************************************
	CONTENTLAYOUT
=============================================================================*/

/*------------------------------------------------
	WELCOME
	
	col 299px			col 1px			col 299px
		headline							headline
		row 299px							row 299px
			text								
			pic text214
			text130 text130
			
------------------------------------------------*/

.col299
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 299px;
		height: auto;
		float: left;
	}

.col1
	{
		width: 1px;
		height: auto;
		border-right: 1px solid #CCCCCC;
		margin-left: 8px;
		margin-right: 9px;
		float: left;
		padding-bottom: 800px;
		margin-bottom: -800px;
	}

.welcomeRow
	{
		width: 299px;
		border-bottom: 1px solid #CCC; 
		padding-bottom: 8px;
		margin-top: 4px;
	}

.pic70
	{
		width: 72px;
		height: 72px;
		float: left;
	}

.text214
	{
		width: 214px;
		height: 72px;
		margin-left: 10px;
		float: left;
	}

.text130
	{
		width: 130px;
		height: auto;
		margin-right: 10px;
		margin-bottom: 6px;
		float: left;
	}

.text220
	{
		width: 220px;
		height: auto;
		margin-right: 0px;
		margin-bottom: 6px;
		float: left;
	}
	
.text420
	{
		width: 420px;
		height: auto;
		margin-top: 10px;
		
	}

.text620
	{
		width: 620px;
		height: auto;
		margin-top: 10px;
		
	}

/*------------------------------------------------
	NEWS, EVENTS, HISTORISCHES
	
	headline
	row 620px
		col 420px					col 160px
			pic70 text314				pics70
			text420
			
------------------------------------------------*/

.row620
	{
		width: 620px;
		height: auto;
		border-bottom: 1px solid #CCC; 
		padding-bottom: 12px;
		margin-top: 10px;
	}

.col420
	{
		width: 420px;
		height: auto;
		margin-right: 20px;
		float: left;
	}

.col160
	{
		width: 160px;
		height: auto;
		float: left;
		font-size: 12px;
		color: #999;
		padding-top: 0px;
	}
	
.text314
	{
		width: 314px;
		height: 52px;
		margin-left: 10px;
		margin-top: 20px;
		
		float: left;
	}

.picBox
	{
		width: 72px;
		height: 72px;
		float: left;
		margin-right: 4px;
		margin-bottom: 4px;
		
	}
	

/*------------------------------------------------
	FOTOS
	
	headline
	row 620px
		col 294px					col 294px
	row	620
		row 610
			pics70
			
------------------------------------------------*/
	
.col294
	{
		position: relative;
		top: 0px;
		left: 0px;
		width: 294px;
		height: auto;
		float: left;
		margin-right: 12px;
	}

.row610
	{
		width: 610px;
		height: auto;
		margin-top: 10px;
		border-bottom: 1px solid #CCC; 
		padding-bottom: 12px;
	}


/*------------------------------------------------
	VEREIN, KONTAKT, BESUCHERINFO
	
	headline
	row 620px
		col 360px					col 220px
			text360						text
			
------------------------------------------------*/

.col360
	{
		width: 360px;
		height: auto;
		margin-right: 10px;
		float: left;
	}

.col220
	{
		width: 220px;
		height: auto;
		margin-left: 10px;
		float: left;
		padding-top: 0px;
	}

.text360
	{
		width: 360px;
		height: auto;
		margin-bottom: 20px;
	}

.text340
	{
		width: 340px;
		height: auto;
		margin-bottom: 20px;
	}

.text220
	{
		width: 220px;
		height: auto;
		margin-bottom: 20px;
	}

.col70
	{
		width: 70px;
		height: auto;
		float: left;
		margin-right: 0px;
	}
	
/*------------------------------------------------
	HEADLINES
	
	red		34, 20
	blue	24, 14bold, 12bold
	grey	12, 12bold
			
------------------------------------------------*/	
	
.hlRed34
	{
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		font-size: 34px;
		color: #CC3300;
		margin-top: -4px;
	}

.hlRed24
	{
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		font-size: 28px;
		color: #CC3300;
	}
	
.hlRed20
	{
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		font-size: 20px;
		color: #CC3300;
		line-height: 24px;
		margin-top: 8px;
	}

.hlRed12
	{
		color: #CC3300;
		font-weight: bold;
	}
	
.hlBlue24
	{
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		font-size: 24px;
		color: #333366;
		margin-top: 0px;
	}

.hlBlue20
	{
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Tahoma, sans-serif;
		font-size: 20px;
		color: #333366;
		margin-top: 0px;
	}
	
.hlBlue14
	{
		font-size: 14px;
		color: #333366;
		font-weight: bold;
	}

.hlBlue142
	{
		font-size: 14px;
		color: #333366;
	}

.hlBlue12
	{
		color: #333366;
		font-weight: bold;
	}


.hlGrey12b
	{
		font-weight: bold;
		color: #999;
	}

.hlGrey12
	{
		color: #999;
	}
	
	
/*------------------------------------------------
	LIST STYLING
	
	red bullets
			
------------------------------------------------*/		

ul.List
	{
  		list-style-image: url(../gfx/gfx-bullet.jpg);
  		padding: 2px;
  		margin-left: 14px;
  		margin-top: 4px;
  		margin-bottom: 4px;
  	}


/*------------------------------------------------
	LINK STYLING
	
	imageLink 	border blue/red
	textLink	text blue/red underline
	textLink2	text grey/red underline
			
------------------------------------------------*/	

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

a:hover
	{
		text-decoration: underline;
		color: #333366;
	}
	
a.imageLink
	{
		display: block;
		border: 1px solid #333366;
	}

a.imageLink:hover
	{
		border: 1px solid #CC3300;
	}

a.textLink
	{
		text-decoration: none;
		color: #333366;
		border-bottom: 1px solid #333366;
	}

a.textLink:hover
	{
		text-decoration: none;
		color: #CC3300;
		border-bottom: 1px solid #CC3300;
	}

a.textLink2
	{
		font-family: Helvetica, no-serif;
		font-size: 10px;
		text-decoration: underline;
		color: #999;
		margin-top: -8px;
		margin-left: 18px;
	}

a.textLink2:hover
	{
		font-family: Helvetica, no-serif;
		font-size: 10px;
		text-decoration: underline;
		color: #CC3300;
		margin-top: -8px;
		margin-left: 18px;
	}
	
/*------------------------------------------------
	FORM ELEMENT STYLING
	
	
			
------------------------------------------------*/	

fieldset
	{
		padding: 0px;
		border: 0px;
	}

fieldset input
	{
		border: 1px solid #333366;
		width: 140px;
		float: left;
		padding: 2px;
		margin-bottom: 4px;
	}

fieldset textarea
	{
		border: 1px solid #333366;
		width: 140px;
		float: left;
		padding: 2px;
		margin-bottom: 4px;
	}

.contactText
	{
		padding-top: 2px;
		width: 60px;
		height: 20px;
		float: left;
		display: block;
	}

.contactButton
	{
		width: auto;
		height: auto;
		display: block;
		margin-top: 6px;
		background: #dedede;
		padding: 2px;
		padding-left: 6px;
		padding-right: 6px;
		color: #333366;
		font-weight: bold;
		border: 1px solid #666;
		
	}

.contactButton:hover
	{
		
		background: #333366;
		color: #FEFEFE;
		border: 1px solid #333366;
		
	}


/*------------------------------------------------
	OTHER STYLING
	
	shadow
			
------------------------------------------------*/	

.shadow
	{
		-moz-box-shadow: 1px 1px 12px #666;
		-webkit-box-shadow: 1px 1px 12px #666;
		box-shadow: 1px 1px 12px #666;
		filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction= 1, Strength=4);
		zoom: 1;
	}




.boxcaption{  
    float: left;  
    position: absolute;  
    background: #FFF;  
    height: 100px;  
    width: 100%;  
    opacity: .8;  
    /* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    }  

.cover
	{	
		position: absolute;
		top: 140px;
		left: 0px;
		width: 380px;
		height: 50px;
		font-family: Helvetica, no-serif;
		font-size: 18px;
		color: #333366;
		padding-left: 60px;
		padding-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
.captionfull .boxcaption {  
    top: 0;  
    left: 0;  
} 

.caption .boxcaption {  
    top: 0;  
    left: 0;  
}