/*
Theme Name: Tangobar 2010
Description: The Tangobar2010 WordPress theme.
Version: 1
Author: Natascha Kuncic
*/

/*
	
	gelb: #e9c500

*/

.clearer {float: none; clear: both;}
.left {float: left;}
.right {float: right;}
.zurueck-links {text-align: left; margin:  15px 15px 0 0;}

/* Begin Typography & Colors */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
strong {
	font-weight: bold;
}
strong.ultra {
	display: block;
	margin: 10px 0px;
}
p, pre , input , li{ font-size: 13px; }
a { font-size: inherit; }
p.small  { font-size: 85%; }
p.right { 	margin-right: 25px; }

p, pre, #nav a, li { 	color: white; }
li {
	list-style-position: inside ;
}
a, a:active, a:visited , a:hover { 
	color: #e9c500; /* gelb */
	text-decoration: none;
}
.white-links a, .white-links a:active, .white-links a:visited , .white-links a:hover, 
a.white-links, a.white-links:active, a.white-links:visited , a.white-links:hover {
	color: white;
}

h2 {
	color: #e9c500; /* gelb */
	font-size: 32px;
	padding: 25px 0 5px 0;
}
h3 {
	color: #e9c500; /* gelb */
	font-size: 17px !important;
	padding-top: 9px;
}


body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Arial, "sans-serif";
	background-color: #2A0909;
}
/** PAGE-LAYOUT **/
/* 
	.header .content-wrapper && 
	.content-body .content-wrapper 
*/
.content-wrapper { 
	width: 700px;
	margin: 0 auto;
}
#page {
	background-image: none !important;
}
header,
#header {
	width: 100%;
	height: 95px;
}
#header { 
	background: url(./images/layout/header_background.jpg) top left repeat-x;
}
#footer {
	background-color: #2a0909;
	width: 100%; height: 140px;
	z-index: 2;
	position: relative;
}
#content-area {
	width: 100%;
	background: url(./images/layout/contentarea_background.jpg) top left;
	margin: 0px;
	min-height: 500px;
	z-index: 2;
	position: relative;
}
*html #content-area {
	height: 500px; 
	overflow: visible;
}
#content-area .content-wrapper {
	margin-top: -1px;
	padding: 0px 0px 30px 0px;
	 /*padding: 0px 0 ; 40px 0*/
}
#content-area .content-wrapper .content { /************************************************************/
	width: 700px;
	z-index: 2;
	position: relative;
}

		.content p { margin-bottom: 10px; line-height: 135%; }
#content-area .content-wrapper .content,
#content-area .content-wrapper .sidebar  {	
	padding: 00px 0 120px 0;
}
.lala {	
	padding: 30px 0 120px 0;
}
*html #content-area .content-wrapper .content {
	/*margin-top: 30px;*/
}
#content-area .content-wrapper .content.two-column,
#additional .content-wrapper .content.two-column {
	width: 535px;
	float: left;
	margin-right: 15px;
}
*html #content-area .content-wrapper  .content.two-column ,
*html #additional .content-wrapper  .content.two-column,
*html #content-area .content.two-column .gallery-style {
	width: 535px;
	padding: 0px; margin: 0px;
}
*html #content-area .content-wrapper.page-photoset .content.two-column  .gallery-style  {
	width: 510px;
	padding: 0px; margin: 0px;
	left: -5px;
	position: relative;
	float: left;
	padding-bottom: 20px;
}
*html #content-area .content-wrapper,
*html #content-area .sidebar {
	position: relative; left: -10px;
}
*html #content-area .content-wrapper  .content.two-column ,
*html #additional .content-wrapper  .content.two-column {
	float: left;
	padding-bottom: 90px;
}
#content-area .content-wrapper .sidebar,
#content-area .content-wrapper .content .sidebar,
#additional .content-wrapper .sidebar {
	width: 150px;
	float: right;
	margin: 0px; padding: 0px;
}
*html #content-area .sidebar .gallery-style {
	width: 160px; margin: 0px; padding: 0px;
	position: relative; left: -5px;
}
div.flickr-thumb {
	padding: 0px !important;
}
#additional {
	width: 100%;
	background-color: #2a0909;
}
#additional .content-wrapper {
	padding: 30px 0 15px 0;
}
#sidebar {
	float: right;
	width: 150px;
}

/** STYLES **/
#header #logo {
	position: relative;
	left: -12px;
	float: left;
}
*html #header #logo {
	float: left;
}
/* --------------- HEADER -> NAVIGATION --------------- */

.shiny-container {
	height: 0px;
	float: left;
	width: 0px;
}
.shiny-container img {
	position: relative;
	z-index: 1;
	left: -400px;
}
*html .shiny-container img {
	position: absolute;
	left: -400px;
}
#header .content {
	position: relative;
	z-index: 1;
}
#header #nav {
	/*position: static; */
	float: right;
	margin: 25px 0 0 0;
	font-size: 13px;
	font-weight: bold;
}
*html #header #nav {
	float: right;
	margin: 0px;
}
#header #nav ul{
	list-style: none;
}
#header #nav li{
	display: block; 
	float: left;
	margin: 0 10px;
}
#header #nav li a {
	text-decoration: none;
	color: white;
}
#header #nav li a:hover, 
#header #nav li.active a{
	color: #e9c500; /* gelb */
}


/* --------------- FOOTER -> CONTACT-ADDRESS --------------- */
#footer .separator {
	width: 700px;
	height: 11px;
	background: url(./images/layout/footer_separator.jpg) no-repeat bottom left;
	padding: 30px 0 0 0;
}
#footer #contact-address {
	text-align: center;
	color: #796441;
	font-size: 13px;
	padding: 10px 0 0 0;
}


/* --------------- CONTENT-AREA -> CONTENT-WRAPPER -> TAGS --------------- */

/* (un-)linked h2*/
#content-area h2, 
#content-area h2 a,
#content-area h2 a:hover,
#content-area h2 a:visited, 
#content-area h2 a:active {
	color: #e9c500;
	font-size: 26px;
	text-decoration: none;
	font-weight: normal;
}
#content-area .postmetadata {
	text-align: right;
	font-size: 10px;
}
#content-area .postmetadata * {
	color: white;
	font-size: 10px;
	text-decoration: none;
}

#content-area #content .content-wrapper .content ,
#content-area #content .content-wrapper .sidebar {
}
*html #content-area .content-wrapper .content {
	/*margin-top: 30px;*/
}
#content-area .content-wrapper .content.home {	
	padding: 30px 0 40px 0;
}
#content-area #additional .content-wrapper .content,  
#content-area #additional .content-wrapper .sidebar  { 
	margin-bottom: 0px;
	padding-bottom: 30px;
}

/* --------------- CONTENT-AREA -> GALLERY --------------- */
#content-area .content .gallery-style { 
	width: 700px;
	padding: 0 0 20px 0;
}
#content-area .content.two-column .gallery-style { 
	width: 535px;
	padding: 0 0 20px 0;
}
#content-area .sidebar .gallery-style ,
#content-area  .content .sidebar .gallery-style { 
	width: 190px;
	padding: 0 0 20px 0;
}

/* --------------- HOME.PHP --------------- */
/* --------------- CONTENT-AREA -> TEASER --------------- */
#teaser {
	height: 270px;
	padding: 0px; margin: 0 0 20px 0;
}
#teaser .underground {
	width: 700px;
	height: 270px;
}
#teaser .teaser-image {
	border: none;
}
#teaser .overlay {
	position: relative;
	left: -10px;
	top: -120px;
	width: 355px;
	height: 75px; /* height + padding-top = 90px*/
	padding: 15px 0px 0px 20px;
	background: url(./images/layout/teaser/flagg-big.png) top left no-repeat transparent;
}
#teaser .teaser-text {
	font-size: 24px;
	color: black;
}

.teaser ul.aktuelles-uebersicht  {
	padding: 0 0 0 17px;
	margin: 0;
}

.teaser ul.aktuelles-uebersicht li {
	list-style-position: outside;
	padding: 0 0 4px 0px;
}




.teaser ul.aktuelles-uebersicht a {
	color: #fff;
}

.teaser ul.aktuelles-uebersicht a:hover {
	color: #e9c500;
}


/* --------------- CONTENT-AREA -> SMALL TEASERs --------------- */

#content-area .small-teasers {
	margin: 20px 0 0 0;
	height: 190px;
}
*html #content-area .small-teasers {
	margin: -100px 0 0 0;
}
	#content-area .small-teasers .teaser {
		float: left;
		width: 210px;
		height: 180px;
		margin: 0 30px 0 0;
		padding: 0px;
	}
	*html #content-area .small-teasers .teaser {
		margin: 0px 20px 0px 0px;
	}
	#content-area .small-teasers .teaser.last-in-row {
		margin: 0px;
	}
	*html #content-area .small-teasers .teaser.last-in-row {
		margin: 0px;
	}
		#content-area .small-teasers .teaser .text {
			width: 190px;
			margin: 20px 0 0 0;
			height: 94px;
		}
		#content-area .small-teasers .teaser .teaser-image {
			height: 86px;
			float: left;
			width: 220px;
		}
		*html #content-area .small-teasers .teaser .teaser-image {
			margin-bottom: -35px;
		}
			/* FLAGG */
			.small-teasers .teaser .teaser-image .flagg {
				height: 32px;
				position: relative; top: -35px; left: -5px;
			}
				/* FLAGG Details*/
				.small-teasers .teaser .teaser-image .flagg .flagg-open {
					width: 5px;
					height: 32px;
					background: url(./images/layout/flagg-small-begin.png) top left no-repeat transparent;
					float: left;
				}
				.small-teasers .teaser .teaser-image .flagg .flagg-caption {
					background: url(./images/layout/flagg-small-middle.png) top left repeat-x transparent;
					height: 33px;
					float:left;
				}
				.small-teasers .teaser .teaser-image .flagg .flagg-caption p 	{
					font-size: 16px;
					color: black;
					margin: 3px 5px;
				}
				.small-teasers .teaser .teaser-image .flagg .flagg-caption img	{
					font-size: 16px;
					color: black;
					margin: 6px 5px;
				}
				.small-teasers .teaser .teaser-image .flagg .flagg-close {
					float: left;
					width: 10px;
					height: 32px;
					background: url(./images/layout/flagg-small-end.png) top left no-repeat transparent;
				}
/* --------------- CONTENT-AREA -> ADDITIONAL --> contact --------------- */
				#additional .contact p {
					margin: 10px 0;
				}

/* --------------- TANGOBAR.PHP --------------- */
/* --------------- CONTENT-AREA --------------- */
.content-three-column {
	width: 220px;
	float: left;
	margin-right: 15px;
	min-height: 220px;
	margin-bottom: 30px;
}
*html .content-three-column {
	margin-right: 15px;
	height: 220px; overflow: visible;
}
.content-three-column.first {
	width: 210px;
}
*html .content-three-column.first {
	height: 300px;
}
 .content-three-column.last {
	margin: 0px;
}
#content-area .small-teasers.tangobar{
	margin: 0 0 0 0;
	width: 220px;
}
#content-area .small-teasers.tangobar .teaser{
	width: 220px;
}
#content-area .small-teasers.tangobar .teaser .text {
	width: 190px;
	min-height: 100px;
	background-color: #8a5555;
	margin: 0;
	padding: 15px;
}
#content-area .small-teasers .teaser .text  p {
	margin-bottom: 0px;
	line-height: 130%;
}
*html #content-area .small-teasers.tangobar .teaser .text{
	padding: 15px;
	margin: 0px;
	height: 100px; overflow: visible;
}
*html #content-area .small-teasers.tangobar {
	margin-top: 0px;
}
	*html #content-area .small-teasers.tangobar .teaser {
		margin: 0px 0px 0px 0px;
	}
/* --------------- LINKS.PHP --------------- */
/* --------------- CONTENT-AREA --------------- */
.content .links{
	width: 340px;
	margin: 0px 5px;
}
*html .content .links{
	width: 330px;
	margin: 0px 5px;
}
.content.two-column .links{
	width: 247px;
	margin: 0px 5px;
}
.content .links.left-column {
	float: left;
	margin-left: 0px; padding-left: 0px;
}
*html .content .links.left-column {
	position: relative;
	left: -10px; 
	padding-left: 0px;
}
.content .links.right-column {
	float: right;
}
/* --------------- KONTAKT.PHP --------------- */
/* --------------- CONTENT-AREA --------------- */
.content .google-map {
	float: right;
	width: 450px;
}
.content.two-column .google-map {
	width: 357px;
}

/* --------------- PHOTOSETS.PHP --------------- */
/* --------------- CONTENT-AREA -> H3 -> ARCHIVE --------------- */
h3.foto-archive {
	float: left; margin: 0 5px; width: 165px; text-align: right;
}
#content-area .content ul.foto-archive {
	padding: 15px 0;
}
#content-area .content ul.foto-archive-single {
	padding: 0;
	margin-top: 1em;
}
#content-area .sidebar ul.foto-archive {
	margin-top:1em;
}
ul.foto-archive li {
	list-style: none;
}
.content ul.foto-archive li {
	padding: 0px 0px 10px 0px;
}
#content-area .content ul.foto-archive-single {

}
.content ul.foto-archive li.foto-archive {
	float: left;
	margin-right: 50px;
	margin-bottom: 35px;
}
ul.foto-archive li.single-foto-archive {
	font-size:13px;
	width: 92px;
	float: left;
	padding-right: 15px;
}
.content ul.foto-archive  li div.set_background {
	/*background: url("http://l.yimg.com/g/images/set_case.gif") no-repeat scroll 0 0 transparent;*/
	background: url("/wp-content/themes/tangobar2010/images/layout/gallery/album_4.png") no-repeat scroll 0 0 transparent;
	padding: 7px 7px 11px;
	width: 91px; height: 85px;
}
.foto-archive .set_background img {
	border: 1px solid black;
}
/*
#content-area .page-photoset h2,
#content-area .page-photoarchive h2{
	padding: 0px; margin: 0px;
} */
#content-area h1.archiv-einzel-ueberschrift,
#content-area h2.archiv-einzel-ueberschrift {
	float: left;
	margin-right: 35px !important;
}
p.archiv-einzel-milonga-titel {
	margin-top: 35px;
}
.archives-uebersicht-title {
	/*height: 40px;*/
	width: 180px;
	margin: -3px 0 0 0	; padding: 0px;
	background-image: url(/wp-content/themes/tangobar2010/images/layout/gastlehrer-uebersicht-name.png);
}
.sidebar .archives-uebersicht-title  {
	width: 150px;
	margin: 0px;
}
*html .sidebar .archives-uebersicht-title  {
	margin: -15px 0 0;
}
.archives-uebersicht-title p {
	line-height: 150%;
	padding: 10px 10px;
}
.photosets-uebersicht-title {
	/*height: 55px;*/
	width: 91px;
	margin: 0px; padding: 0px;
	background-image: url(/wp-content/themes/tangobar2010/images/layout/gastlehrer-uebersicht-name.png);
}
.photosets-uebersicht-title p {
	line-height: 150%;
	padding: 5px 10px;
}
*html .archives-uebersicht-title, *html .photosets-uebersicht-title  { cursor: pointer;   }
*html .archives-uebersicht-title p, *html .photosets-uebersicht-title  p { color: black; text-decoration: underline; }
/* --------------- GASTLEHRER.PHP --------------- */
/* --------------- CONTENT-AREA -> VORSCHAUBILDER --------------- */
.gastlehrer-uebersicht-container {
	width: 140px;
	height: 115px;
	float: left;
	margin: 10px 35px 10px 0;
}
.gastlehrer-uebersicht-container  image,
.gastlehrer-uebersicht-container  .gastlehrer-uebersicht-name {
}
.gastlehrer-uebersicht-container .gastlehrer-uebersicht-name {
	width: 140px;
	height: 30px;
	margin: 0px; padding: 0px;
	background-image: url(/wp-content/themes/tangobar2010/images/layout/gastlehrer-uebersicht-name.png);
	
}
*html .gastlehrer-uebersicht-container .gastlehrer-uebersicht-name { cursor: pointer;}
.gastlehrer-uebersicht-container .gastlehrer-uebersicht-name p.boxx-name{
	color: white;
	font-weight: bold;
	font-size: 95%;
	vertical-align: middle;
	padding-left: 10px;
	line-height: 300%;
}
*html .gastlehrer-uebersicht-container .gastlehrer-uebersicht-name p{ color: black; font-size: 110%; text-decoration: underline;}
.gastlehrer-image-large {
	padding: 60px 0px;
}

.flickr-gallery {
	margin-bottom: 15px;
}

.aktuelles-bild {
	margin: 5px 15px 5px 0;
}