/*
	AUTHOR: Arne Winter
			Kinder- und Jugendwohngemeinschaft MUG
			
*/


/* RESETS & BASIC PAGE SETUP */

/* green #AFD028 light-green #e8f3c6 azure #74C2E9 pink #851881 light-grey (BG) #f7f7f7 darker-grey (BG) #EDEDEC */

* { margin: 0; padding: 0; }
html { }
body { 
	margin: 0;
	background: #dce1e4 url('../gfx/back_body700.jpg') no-repeat top center;
	font: 66.5% 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;
	
}

ul { list-style: none inside; }
a, a:visited { outline: none; text-decoration: none; }
a:hover { outline: none; text-decoration: none; }
a img { 
	border: 1px solid #BBB;
	padding: 3px;	
	margin: 12px;
} 
/* END RESET */

/* hide 

a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }

*/

/* TOOLBOX */

.floatleft { float: left; width: auto; }
.floatright { float: right; width: auto; }
.clear { clear: both; }

/* END TOOLBOX */

/* ATTENTION */
.att {
	margin: 16px 0 0 0;
	padding: 2px;
	border: 1px solid #FFD200;
	background-color: #FFE673;
	
	overflow: auto;
}

.attleft {
	width: 12%;
	float: left;
}
.attright {
	padding-top: 24px;
	width: 88%;
	float: left;
	}

.att img {
	border: none;
	
	
}
/* END ATTENTION */

/* STRUCTURE */

#page-wrap {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	background: transparent;
	display: block;
}

#header {
	float: left;
	width:  700px;
	
	padding: 40px 0px 50px 0px;
	background: #dce1e4 url('../gfx/back_body700.jpg') no-repeat top center;
}

.header-title {
	position: relative;
	top: 30px;
	left: 130px;
	font: 1.0em Baskerville, Georgia, serif;
  	letter-spacing: 0.1em;
	color: #333;
	text-transform: lowercase;
}

#logo {
	float: left;
	width: 200px;
	height: 124px;
	display: inline;
	background: url('../images/MUG-LOGO2.png') no-repeat;
}

#logo h1 a {
	display: block;
	width: 200px;
	height: 124px;
	
}

	#main-content {
		padding: 0px 0px 100px 0px; /* top right bottom left */
}

#nav {
	font: 1.2em 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;
	color: #fff;
	text-transform: uppercase;
	padding-top: 30px;
	margin-right: 20px;
	letter-spacing: 4px;
	
	}

ul#nav {
	float: right;
	width: auto;
	}
	ul#nav li {
		display: inline; 
	}
	ul#nav li a {
		border: 0px;
		color: #000000;
		display: block;
		float: left;
		margin-left: 15px;
		padding-top: 0px;
		
		font-size:90%;
		letter-spacing:-0.05em;
		padding:6px 10px 6px 10px;
		background:#FFFFFF;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		margin-right:6px;
		
		}
	
	ul#nav li a:hover {
		background:#74C2E9;
		color: #FFFFFF;
	}

.top {
  	font-size: 0.9em;
	background: url(../images/top.gif) no-repeat center right;
	text-align: right;
	padding-right: 17px;
	margin-top: 40px;
	margin-bottom: 100px;
}

.top a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
.top a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }


h6.ftop {
  	font-size: 0.9em;
	background: url(../images/top.gif) no-repeat center right;
	text-align: right;
	padding-right: 17px;
	margin-top: 40px;
	
	
}
h6.ftop a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
h6.ftop a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }



.link {
	background: url(../images/link.gif) no-repeat center right;
	padding-right: 17px;
	padding-top: 2px;
}

.link a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
.link a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }


#footer {
 	font: 0.9em 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;
 	color: #666;
 	margin-bottom: 20px;
 	//margin-top: 100px;
	padding-top: 10px;
	border-top: 1px solid silver;
	line-height: 1.6em;
}

#footer a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
#footer a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }

/* END STRUCTURE */


/* HEADERS */

h1 {
	font: 16px 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;
	letter-spacing: 2px;	
	text-transform: uppercase;
	font-style: inherit;
	padding: 80px 0px 10px 0px;
	font-weight: normal;
	color: #3e474e;
	text-shadow:0 1px 1px #d8e8f7;
}

h6 {
	font-size: 1.0em;
	line-height: 1.8em;
	margin-bottom: 1.2em;
	font-weight: normal;
}

h6.metadata {
	padding: 0px;
	color: #999;
	font-size: 0.9em;
	line-height: 1.6em;
	float:right;
	width: 180px;
	font-weight: normal;
} 

/* END HEADERS */


/* INTRO */

#intro {
text-align: left;
font-size: 1.0em;
letter-spacing: 0em;
color: #666;
margin-bottom: 200px;
padding-left: 18px;

	}

#intro a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
#intro a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }

.quote {
	background: url(../images/mugintro-01.jpg) no-repeat top left;
	display: block;
	padding-top: 20px;
	padding-right: 20px;
	text-align: right;
	font-family: Baskerville, Georgia, serif;
	height: 290px;
	}

.columnleft {
	float: left;
	width: 210px;
	padding-right: 30px;
	line-height: 1.6em;
}

.columncenter {
	float: left;
	width: 210px;
	padding-right: 30px;
	line-height: 1.6em;
}

.columnright {
	float: left;
	width: 180px;
	line-height: 1.6em;
}

.away {
	color: #333;
	margin-top:60px;
	padding:12px;
	border-top: 1px dotted #74C2E9;
	border-bottom: 1px dotted #74C2E9;
}

/* END INTRO */



/* ABOUT */
#wir {

	padding-top: 80px;

}

#about {
  	font-size: 0.9em;
	color: #666;
}

#about a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
#about a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }

.about-header {
	background: url(../images/mensola-700.jpg) no-repeat bottom left;
	display: block;
	padding-top: 10px;
	margin-bottom: 10px;
	height: 300px;
	}
	
.aboutleft {
	float: left;
	width: 220px;
	padding-right: 20px;
	line-height: 1.6em;
}

.aboutcenter {
	float: left;
	width: 220px;
	padding-right: 20px;
	line-height: 1.6em;
}

.aboutright {
	text-align: left;
	float: left;
	width: 220px;
	line-height: 1.6em;
}

.item {
	border-top: 1px solid silver;
	padding-bottom: 16px;
	padding-top:  2px;
	//margin-top: 6px;
	
//	background: url(../gfx/stripe_mug.png) repeat-x;
	height: 116px;
	
}

.itemgallery {
	width: 680px;
	height: 320px;
	
}

.item_alt b {
	color: #666;
	font-weight: bold;
	text-transform: uppercase;
	
	
}

.item_alt i {
	color: #666;
	font-weight: bold;
	font-style: normal;
	
	}

.item b {
	color: #666;
	font-weight: bold;
	text-transform: uppercase;
	}

.item i {
	color: #666;
	font-weight: bold;
	font-style: normal
	}	

.itemleft {
	float: left;
	width: 100px;
	padding-right: 10px;
}

.itemright {
	float: left;
	padding-top: 12px;
	//background-color: #000;
	width: 500px;
	
}

/* END ABOUT */


/* CONTACTS */

#kontakt {
	text-align: left;
  	font-size: 1.0em;
  	letter-spacing: 0em;
	color: #666;
	margin-bottom: 60px;
	width: 100%;
}

.kontakt-header {
	background: url(../images/olive.jpg) no-repeat bottom left;
	display: block;
	padding-top: 10px;
	margin-bottom: 10px;
	height: 300px;
	}

#kontakt a, a:visited { outline: none; text-decoration: none; color:#74C2E9; background: transparent; padding: 1px 3px; margin: 0px -3px; }
#kontakt a:hover { color:#fff; background: #74C2E9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 3px; margin: 0px -3px; }

.kontakt-left {
	float: left;
	width: 270px;
	padding-right: 30px;
	line-height: 1.6em;
}

.kontakt-center {
	float: left;
	width: 200px;
	padding-right: 20px;
	line-height: 1.6em;
}

.kontakt-right {
	text-align: right;
	float: right;
	width: 180px;
	line-height: 1.6em;
}

/* END CONTACTS */



/* LOOPSLIDER 

.container { width:696px; height:333px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:696px; }
.pagination { width: 696px; height: 10px; position: relative; padding-left: 280px; top:-1px; }

#loopedSlider { margin:18px auto; width:678px; position:relative; clear:both; }
ul.pagination { list-style-type:none; margin:0; padding:4px; margin:12px auto; width:232px; }
ul.pagination li { float:left; margin: 0 4px; }	
ul.pagination a { display:block; width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(../images/pagination2.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination li.active a {background-position:0 -12px}
a.previous { position:absolute; top:0px; left:18px; }
a.next { position:absolute; top:0px; left:43px; }



/* Slider Styles Required */

.container {
	width: 678px;
	height: 333px;
	overflow: hidden;
	position: relative;
	cursor: pointer;	
}

div.slides {
	position: absolute;
	top: 0;
	left: 0;
}




/* Slider Styles Optional */

#feature-slider {
	margin: 0 auto;
	width: 678px;
	height: 360px;
	position: relative;
	clear: both;
	border-top: #74C2E9 6px solid;
}

#feature-slider .slider-link{
	position: absolute;
	width: 100px;
	left: 500px;
	top: 290px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#feature-slider .slider-link a{
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 0px 0px;
}



#slider-button-wrap {
	width: 89px;
	height: 39px;
	position: absolute;
	right: -22px;
	bottom: 180px;
}

.slider-button-left {
	float: left;
	width: 39px;
	height: 39px;
	border: none;
	background: url(../gfx/slider_arrow_left.png) no-repeat 0px 0px;
	margin-left: -632px;
	text-indent: -9999px;
}

.slider-button-left:hover {
	background: url(../gfx/slider_arrow_left.png) no-repeat 0px -39px;
}

.slider-button-right {
	float: right;
	width: 39px;
	height: 39px;
	border: none;
	background: url(../gfx/slider_arrow_right.png) no-repeat 0px 0px;
	text-indent: -9999px;
}

.slider-button-right:hover {
	background: url(../gfx/slider_arrow_right.png) no-repeat 0px -39px;
}


/* END LOOPSLIDER */





/* CODA SLIDER */

/* Most common stuff you'll need to change */

	.coda-slider-wrapper { padding: 0 0 0 0; }
	.coda-slider { background: #FFFFFF; }
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: auto; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 700px; } 
	
	/* Change margin and width of the slider (with dynamic arrows) 
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 700px }
	.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
	
	/* Arrow styling 
	.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 400px }
	
	/* Tab nav */
	.coda-nav ul li a.current { background: #39c }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 20px; height: auto; font: 1.1em 'Lucida Grande', Verdana, Geneva, Arial, sans-serif; }
	.coda-slider .panel-wrapper a, a:visited { outline: none; text-decoration: none; color:#000; background: transparent; padding: 1px 3px; margin: 0px -3px; }
	.coda-slider .panel-wrapper .link {
		background: url(../images/link.gif) no-repeat center right;
		padding-right: 17px;
		padding-top: 2px;
	}
	
	/* Preloader */
	.coda-slider p.loading { padding: 0px; text-align: center; }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { 
		background: #000;
		color: #fff;
		display: block;
		float: left;
		margin-right: 8px;
		padding: 10px 12px; 
		text-decoration: none; 
		}
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
	/* END CODA SLIDER */
	
/* captify styling */

.caption-top, .caption-bottom {
	color: #ffffff;	
	padding: 1.2em;	
	font-weight: normal;
	font-size: 12px;	
	font-family: 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;	
	cursor: default;
	border: 0px solid #334143;
	background: #000000;
	text-shadow: 1px 1px 0 #202020;
}
.caption-top {
   border-width: 20px 20px 8px 0px;
}
.caption-bottom {
   border-width: 0px 0px 0px 0px;
}
.caption a, .caption a {
	border: 0 none;
	text-decoration: none;
	background: #000000;
	padding: 0.3em;
}
.caption a:hover, .caption a:hover {
	background: #202020;
}
.caption-wrapper {
	float: left;
}
br.c { clear: both; }


/* NEWS */

#aktuell {
	width: 100%;
	margin-bottom: 400px;	
}

#recent {
	
	margin-top: 0px;
	padding-bottom: 100px;
}

#featured {
	margin-top: 5px;
	padding-bottom: 100px;
}


.thumb-container {
	display: block;
	height:146px;
	width: 320px;
/* 	padding: 1px; */
/* 	border: 1px solid #dcdcdc; */
 	border: 1px solid #fff;
	background-color: #fff;
	cursor: pointer;
	margin: 16px 26px 10px 0px;
	float: left;
	overflow: auto;
}

.thumb-type {
	padding: 12px;
	position: absolute;
	z-index: 50;
	width: 280px;
}

.thumb-type h3{
	color: #74C2E9;
	line-height: 1.2em;
	margin-bottom: 0.4em;
	text-transform: uppercase;
}

.einblick {
	color: #74C2E9;
	line-height: 1.0em;
	margin-bottom: 0.4em;
	margin-top: 0.8em;
	text-transform: uppercase;
	float: right;
}

.thumb-type p{
	color: #777c7b;
	font-size: 1.0em;
	line-height: 1.6em;
}
div.hidden {
	display: none;
}

 a .thumbheading, a:hover .thumbheading {
	color: #777c7b;
	padding: 0;
	border: none;
	outline: none;
	text-decoration: none;
}


.thumb-bg {
	display: block;
	height:146px;
	width: 320px;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;

}

.hero-thumb-container {
	display: block;
	height:238px;
	width: 458px;
/* 	padding: 1px; */
	border: 1px solid #E6E7E6;
	background-color: #E6E7E6;
	cursor: pointer;
	margin: 0 0 20px 0;
}

.hero-thumb-type {
	padding: 14px;
	position: absolute;
	z-index: 50;
	width: 400px;
}

.hero-thumb-type h3{
	color: #6bb5bb;
	line-height: 1.4em;
	margin-bottom: 0.7em;
}

.hero-thumb-type p{
	color: #777c7b;
	font-size: 1em;
}

a .hero-thumbheading, a:hover .hero-thumbheading {
	color: #777c7b;
	padding: 0;
	background-color: none;
}

.hero-thumb-bg {
	display: block;
	height:238px;
	width: 458px;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;

}

.results {
	padding: 0 0 0 0;
}
/* END NEWS */
#ie_notice {
	position:relative;
	width:100%;
	height:42px;
	background: url('../images/ienotice.png');
	font-family: "Lucida Grande", Lucida, Arial;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	line-height:40px;
	text-shadow: black 2px 2px 2px; 
	z-index: 500;
	
}
a.ienotice:link {
	color: #CCCCCC;
	text-decoration: none;
}
a.ienotice:visited {
	color: #999999;
	text-decoration: none;
}
a.ienotice:hover {
	color: #FFFFFF;
	text-decoration: none;
}
a.ienotice:active {
	color: #FFFF66;
	text-decoration: none;
}

/* INTERNET EXPLORER MESSAGE END */