@charset "UTF-8";
/* CSS Document */
html {
	height: 101%
}

* {
	margin: 0;
	padding: 0;
}
body {
	background-attachment: fixed;
	background-color: #FFF;
	background-position: top center;
	background-repeat: no-repeat;
	 
	margin:0;
	padding: 0;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 81.25%;
	 
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
 
/*
This next definition doesn't allow the background to get any smaller
than a predefined size (640x426px in this case). Change the values
here to match your background image size. The configuration in the
flexi-background javascript file should also match these values.
*/
 
@media only all and (max-width: 640px) and (max-height: 426px) {
	body {
		background-size: 640px 426px;
		-moz-background-size: 640px 426px;
		-webkit-background-size: 640px 426px;
	}
}
 
/*
The next 2 definitions are for support in iOS devices.
Since they don't recoginze the 'cover' keyword for background-size
we need to simulate it with percentages and orientation
*/
 
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
	body {
		-webkit-background-size: auto 100%;
	}
}
 
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {
	body {
		-webkit-background-size: 100% auto;
	}
}


/* Ab hier eigenen Definitionen ************************************************************************************/
/* schrift Frutiger einbinden */
@font-face {
	font-family: 'Conv_frutigerltstdbold';
	src: url('/fonts/frutigerltstdbold.eot');
	src: local('☺'), url('/fonts/frutigerltstdbold.woff') format('woff'), url('/fonts/frutigerltstdbold.ttf') format('truetype'), url('/fonts/frutigerltstdbold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
img {
	border: none;
}
.fett {
	font-weight: bold;
}
.kursiv {
	font-style: italic;
}
.clear {
	font-size: 1px;
	clear: both;
}
a {
	color: #E3000F;
	text-decoration: none;
}

/* Hauptkasten um alles drum */
#container {
	/* Generelle Breite 980px; */
	max-width: 980px;
	margin: auto;
	overflow: visible;
	margin-bottom: 20px;
}
/* Header Höhe 95px */
#header {
	position: relative;
	left: 0;
	top: 0;
	max-width: 980px;
	height: 95px;
	background-color: #FFF;
}
#header #jugendLink {
	position: absolute;
	left: -7%;
	top: 82px;
	width: 100px;
	height: 100px;
	z-index: 1500;
	display: block;
}
@media only screen and (max-width: 980px) {
#header #jugendLink {
	display: none;
}
}
/* Facebook-Icon in eigener Ebene */
#facebook {
	width: 18px;
	height: 18px;
	position: absolute;
	top: 4px;
	right: 25%;
}
/* SAC-Logo die Ebene hat vorerst die Breite des Logos*/
#header h1 {
	display: none;
}
#logo {
	float: right;
	width: 22.0408163%;
	height: auto;
}
#logoMobil, #panoramaPhotoMobil {
	width: 100%;
	display: none;
}

/* horizontale Liste der Links oben im Header */
#headerSmallLinks {
	position: absolute;
	/* die Breite der Small-Links-Liste beträgt ursprünglich 680px; */
	width: 69.38775%; /* 680 / 980 */
	/* Auf der linen Seite ein Abstand von 22px */
	left: 2.2448979%; /* 980 / 22*/
	top: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #E3000F;
	list-style-type: none;	
}
#headerSmallLinks li {
	float: left;
	/* der rechte Rand 14px */
	margin-right: 2.05882%; /* 14 / 980 */
}
#headerSmallLinks a {
	color: #333;
	text-decoration: none;
}
#headerSmallLinks a:hover {
	color: #E3000F;
	text-decoration: none;
}
/* horizontale Liste Hauptlinks im Header */
#headerMainLinks {
	position: absolute;
	width: 100%;
	/* Rand links 22px */
	left: 2.2448979%; /* 22 / 980 */
	top: 70px;	
	font-family: 'Conv_frutigerltstdbold', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #999999;
	list-style-type: none;	
}

#headerMainLinks li {
	float: left;
	/* Rechter Abstand 16px */
	margin-right: 2.1917808%;
	padding-bottom: 6px;
}

/* das Mobile-Menu und das Mobil-Menu-Icon werden - nur bei Mobil-Ansicht - alternierend eingeblendet */
#menuMobil, #menuMobilIcon {
	display: none;	
}

/* Allgemeine Stilangaben für die Darstellung der Bild-LegendeBildlegende mit Ausklick-Button */
.bildLegende {
	width: 100%;
	position: absolute;
	top: 97px;	
	right: 0;
	margin-bottom: 2px;
	text-align: right;
	font-size: 11px;
	color: #FFF;
	cursor: default;
}
/* Bildlegende mit Button zum Ausblenden des Inhaltsblocks am unteren Rand des Headers */
#bildLegendeZumAusblenden {
	z-index: 3;
	display: block;
	top: 97px;		
}
/* Bildlegende mit Button zum Einblenden des Inhaltsblocks am unteren Rand des Headers */
#bildLegendeZumEinblenden {
	z-index: 3;
	display: none;
	top: 97px;		
}

/* unter 720px für Smartphones */
@media only screen and (max-width: 720px) {
	/* Das dynamische Hintergundbild der Seite ausblenden */
	body {
		background-image: none;
	}
	#header {
		position: static;
		height: auto;
	}
	/* Das normale Logo, Small-Links, Main-Links und die Bildlegenden-Buttons werden ausgeblendet */
	#logo, #bildLegendeZumAusblenden, #bildLegendeZumEinblenden, #headerSmallLinks, #headerMainLinks {
		display: none;
	}

	/* dies ist eine Ebene, welche die h2 -Titel und rechts gefloatet das Mobil-Logo (Wappen) enthält */
	#logoMobil {
		display: block;
	}
	/* der Titel 'Sektion Bern' */
	#logoMobil h2#sacBern {
		width: 200px;
		padding: 6px 0 0 2.2448979%;
		font-size: 16px;
	}
	/* der Titel 'Schweizer Alpen-Club SAC' */
	#logoMobil h2#sacSchweiz {
		width: 250px;
		padding: 2px 0 6px 2.2448979%;
		font-size: 16px;
		color: black;
	}
	#logoMobil h2#sacSchweiz a {
		color: black;
	}
	#logoNurWappenMobil {
		position: absolute;
		right: 6px;
		top: 4px;
	}
	#panoramaPhotoMobil {
		display: block;
		width: 100%;
		height: auto;
		border-bottom: 2px solid white;
	}
	/* Der Container, der das Menu-Icon und das mobile Menu selbst enthält */
	#menuMobilContainer {
		position:relative;
	}
	/* Ebene, die das Icon zum Aufrufen des Hauptmenus im Mobil-Modus enthält */
	#menuMobilIcon {
		display: block;
		width: 60px;
		height: 40px;
		text-align: right;
		position: absolute;
		top: 2px;
		right: 4px;
		padding-top: 1px;
		z-index: 200;
	}
	#menuMobil {
		display: block;
		font-family: 'Conv_frutigerltstdbold', sans-serif;
		font-size: 18px;
		font-weight: bold;
		color: #999999;
		list-style-type: none;	
	}
	#menuMobil li {
		/* padding: 4px 0 4px 2.2448979% */
		display: none;
		height: 27px;
		padding: 7px 0 0 24px;
		background-position: top left;
		border-bottom: 1px solid #CCC;
	}
	/* der Hauptmenu-Button zum Ausklappen des Menus */
	#menuMobil li.AAA {
		background-image: url(../img/bg_mainLinkMobilRot.png);
	}
	/* Die Hauptmenu-Buttons */ 
	#menuMobil li.A {
		background-image: url(../img/bg_mainLinkMobilRot.png);
	}
	/* Die Nebenmenu-Buttons */ 
	#menuMobil li.B {
		background-image: url(../img/bg_mainLinkMobilGrau.png);
	}
	/* Der Menupunkt Tourenleiter-Tool */ 
	#menuMobil li.C {
		background-image: url(../img/bg_mainLinkMobilWeiss.png);
	}
	#menuMobil a {
		display: block;
		width: 60%;
		color: #999999;
	}
}

#headerMainLinks a {
	color: #999999;
	text-decoration: none;
}
#headerMainLinks a:hover {
	color: #000000;
	text-decoration: none;
}
/* Angaben zu den Aufklapp-Menus der MainLinks */
.aufklappmenu {
	display: none;
	position: absolute;
	top: 93px;
	padding: 4px 8px;
	font-size: 13px;
	background-image: url(../img/bg_aufklappmenu.png);
}
.aufklappmenu a {
	color: #333;
	text-decoration: none;
}
.aufklappmenu a:hover {
	color: #E3000F;
	text-decoration: none;
}
.aufklappmenu ul {
	padding: 0 12px 0 12px;
	list-style-type: none;
	font-size: 13px;
	color: #333;
}
.aufklappmenu ul li {
	padding: 8px 0;
	line-height: 110%;
}
#aufklappmenuTouren {
	width: 440px;
	z-index: 5;
	/*left: 22px;*/
	left: 2.2448979%; /*22 / 730*/
}
#aufklappmenuHuetten {
	width: 450px;
	z-index: 6;
	left: 98px;
}
#aufklappmenuSektionBern {
	width: 154px;
	z-index: 7;
	left: 176px;
}
#aufklappmenuClublokal {
	width: 120px;
	z-index: 10;
	left: 298px;
}

#aufklappmenuInteressengruppen {
	width: 130px;
	z-index: 8;
	left: 394px;
}
#aufklappmenuMarktplatz {
	width: 180px;
	z-index: 9;
	left: 564px;
}
#aufklappmenuBilder {
	width: 154px;
	z-index: 11;
	left: 654px;
}

/* Raum zwischen Unterkante Header und Oberkante Inhaltsblock */
#gap {
	position: relative;
	height: 150px; /* ist auf der Startseite wirkungslos, weil Infoblöcke am unteren Rand fixiert sind */
}
/* Ebene mit fixer Positionierung am unteren Bildschirmrand , die den News- und den Veranstaltungen-Block enthält*/
#infoBlock {
	position: fixed;
	width: 100%;
	height: 450px;
	margin: auto;
	bottom: 20px;
}

/* innerhalb dieses Blocks eine mit margin: auto; positionierte Ebene, die den Einzeiler für die zur Anmeldung offenen Touren und beiden Listen News und Veranstaltungenenthält */
#infoBlockIntern {
	position: relative;
	max-width: 980px;
	height: 370px;
	margin: auto;
}
#offeneTourenBlock {
	max-width: 100%;
	height: 58px;
	margin-bottom: 6px;
	padding: 12px 16px;
	background-image: url(../img/bg_blocksStartseite.png);
	font-size: 14px;
	font-weight: bold;
}
#newsletterBlock {
	max-width: 150px;
	height: 58px;
	margin-bottom: 6px;
	padding: 12px 16px 12px 16px;
	font-size: 14px;
	font-weight: bold;
}
/* innerhalb des Blocks offeneTouren gibt es zwei div aus Darstellungsgründen */
#hpTourenFuerKurzentschlossene { 
	width: 340px;
	float: left;
	}
#hpTourenNaechste30Tage {
	width: 560px;
	float: left;
}
@media only screen and (max-width: 720px) {
#offeneTourenBlock {
	height: 114px;
	padding: 4px 16px;
}
#hpTourenFuerKurzentschlossene { 
	width: 100%;
	float: none;
	}
#hpTourenNaechste30Tage {
	width: 100%;
	float: none;
}
}
#newsBlock {
	width: 454px;
	padding: 16px;
	float: left;
	background-image: url(../img/bg_blocksStartseite.png);
}
#veranstaltungenBlock {
	width: 454px;
	padding: 16px;
	float: right;
	background-image: url(../img/bg_blocksStartseite.png);
}

/* Ebenen für die einzelne News */
.newsBlockItem {
	border-top: 1px dashed #999;
	padding: 6px 0;
}
/* für Tablets und Smartphones wird die Startseite, d.h. die Blocks 'News' und 'Gspaltenhornhütte-News' angepasst */
@media only screen and (max-width: 980px) {
	/* Raum zwischen Header und Inhalt wird bei Tablets und Smartphones reduziert auf einen Wert, dass der Ein- und Ausbblendlink noch sichtbar ist */
	#gap {
	height: 16px;
	}
	#infoBlock {
		position: static;
		max-width: 96%;
		margin: 16px auto;
	}
	#infoBlockIntern {
		background-image: none;
	}
	#newsBlock, #veranstaltungenBlock {
		width: 100%;
		background-image: url(../img/bg_infoBlockInternMobil.png);
		padding: 12px 12px 0 12px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#veranstaltungenBlock {
		margin-top: 6px;
	}
	.newsBlockItem {
		padding: 4px 0;
	}
}

@media only screen and (max-width: 720px) {
	#infoBlock {
		max-width: 98%;
		margin: 6px auto;
	}
}
/* Ebenen, die die Titel enthalten, rot unterstrichen */
.blockTitel {
	display: inline;
	height: 30px;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	padding-bottom: 6px;
	background-image: url(/img/bg_mainMenuListenpunkt.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

/* wrapper ist der Inhaltscontainer. Startseite: News und 150-Jahr-Block, übrige Saiten: zwei- oder mehrspaltige Inhalte */
#wrapper {
	max-width: 980px; /* Desktop: Containerbreite maximal 980px) */
	background-size: 100% auto;
	}
#wrapper h1 {
	display: inline;
	line-height: 150%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding-bottom: 6px;
	xmargin-bottom: 12px;
	background-image: url(/img/bg_mainMenuListenpunkt.png);
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* Spalte mit der Navigation vertikal
   Sie passt genau über den linken Teil des Hintergrundes
	 Die Randlücken werden durch die Linkliste erzeugt */
#navColumn {
	/* statische Breite 204px */
	width: 20.81632%; /* 204px / 980px */
	float:left;
	color: #E3000F;
}
#navColumn a {
	color: #666666;
}
#navColumn a:hover {
	color: #E3000F;
}

#navColumn h2 {
	width: 91%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #666;
	/* margin: 20px 0 12px 18px; */
	margin: 20px 0 12px 8.82352%; /* 18/204 */
	padding-bottom: 6px;
	background-image: url(/img/bg_mainMenuListenpunkt.png);
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* die Liste ul der Include-Dateien für die Navigation haben alle die id "vertNav" -> ausser die 150Jahre-Nav */
#navColumn ul#vertNav, #navColumn ul#vertNav150Jahre {
	/* statische Margin: 12px 6px 0 18px */
	margin: 20px 0 12px 8.82352%; /* 18 / 204 */
	list-style-type: none;
	color: #E3000F;
}
#navColumn #vertNav li {
	padding: 6px 0;	
}

/* für die Navigation 150 Jahre gelten folgende Auszeichnungen */
#navColumn #h2150Jahre {
	font-style: italic;
	font-size: 14px;
}
#navColumn ul#vertNav150Jahre {
	font-style: italic;
	margin-top: -4px;
}
#navColumn #vertNav150Jahre li {
	padding: 2px 0;	
}

/* #content ist der Bereich, welcher den eigentlichen Inhalt umfasst.
   falls eine Servicespalte existiert, liegt sie ausserhalb dieses Bereichs
	 Er passt genau über den Inhaltshintergrund (je nachdem ob die Seite 2- oder 3-spaltig ist (der Hintergrund liegt im wrapper)
	 Der folgende Standardwert gilt für die Mehrheit der dreispaltigen Seiten   */
#content {
	/* Statische Breite 522px */
	width: 53.2653%; /* 522 / 980 */
	float: left;
	/* margin-left: 4px; */
	margin-left: 0.40816%; /* 4 / 980 */
	/* statisches Padding: 20px 18px 20px 22px */
	padding: 20px 1.83673% 20px 2.24489%; /* 18 / 980 und 22/ 980 */
	color: #333;
}
/* alle folgenden Seiten habe ein 2-spaltiges Design, womit der Content-Block breiter wird */
body#Kontakt #content, body#Tourenprogramm #content, body#TourAnmeldeFormular #content, body#clublokalBelegungsplan #content body#Marktplatz #content, body#WerKommtMit #content, body#ZuVerkaufen #content, body#ZuKaufenGesucht #content, body#ZuVerschenken #content, body#NeuerEintrag #content, body#Links #content, body#Albenliste #content, body#Einzelalbum #content, body#ClublokalBelegungsplan #content, body#Bilder #content, body#Links #content {
	/* statische Breite 736px */
	width: 74.10204%;  /* 736 / 980 */
	float: left;
}

.bild, #content .bild {
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width:720px) {
	#content {
	width: 96% !important;
	margin-left: 0;
	}
	/* Alle Bilder am linken Rand und, falls zwei bilder (Hütten) eine obere margin */
	#content .bild {
		margin: 6px 0;
	}
}

#randspalteRechts {
	/* statische Breite 173px */
	width: 17.653062%; /* 173 / 980 */
	float: right;
	padding: 22px 1.63265% 16px 1.63265%;
	font-size: 13px;
	color: #666;
}
@media only screen and (max-width: 720px) {

	.aufklappmenu {
		display: none;
		position: absolute;
		top: 126px;
		padding: 4px 8px;
		font-size: 18px;
		background-image: url(../img/bg_aufklappmenuMobil.png);
	}
	.aufklappmenu a {
		color: #333;
		text-decoration: none;
	}
	.aufklappmenu a:hover {
		color: #E3000F;
		text-decoration: none;
	}
	.aufklappmenu ul {
		float: none;
		width: 100%;
		padding: 0 12px 0 12px;
		list-style-type: none;
		font-size: 18px;
		color: #333;
	}
	.aufklappmenu ul li {
		padding: 8px 0;
		line-height: 110%;
	}
	#aufklappmenuTouren, #aufklappmenuHuetten, #aufklappmenuSektionBern, #aufklappmenuClublokal, #aufklappmenuInteressengruppen, #aufklappmenuMarktplatz, #aufklappmenuBilder, #aufklappmenuNews, #aufklappmenuMitgliedschaft {
		width: 62%;
		left: 20px;
		z-index: 5;
	}
}

@media only screen and (max-width: 720px) {
	#container, #wrapper {
		width: 100% !important;	
	}
	
	#navColumn {
		display: none;
	}
  
	/* die linke Randspalte ist weggefallen, wehalb die Breite des Content und der rechten Randspalte auf 100% gesetzt werden.
		Der float beider wird aufgehoben, somit rutscht die rechte Randspalte unter den Content.
		Es beträgt 522px zu 173px, zusammen 695px */
	#content, #randspalteRechts {
		width: 96%;
		float: none; 
		margin-left: 0;
		padding: 22px 2% 16px 2%;
	}
	/* weil der Wrapper seinen Hintergrund dynamisch und nach dem Laden der css-Datei zugewiesen bekommt,
		muss #content einen Hintergrund bekommen, der den des wrappers überschreibt (#content hat eine Breite von 100% */
	#content {
	background-image: url(../img/bg_contentMobil.png);
	}
	#randspalteRechts {		
		background-image: url(../img/bg_randspalteRechtsMobil.png);
	}
}

#randspalteRechts p {
	margin: 4px 0 4px 0;
}

#content h2, #randspalteRechts h2 {
	font-size: 13px;
	font-weight: bold;
	color: #333;
	margin-bottom: 6px;
}
#content p {
	margin: 6px 0 12px 0;
}
#content ul, #content ol {
	margin-left: 30px;
	margin-left: 5.74712%; /* 30/522 */
	margin-bottom: 12px;
}
/* die ul auf den Hüttenseiten */
ul.huetten {
	margin-top: -12px;	
}
#randspalteRechts ul {
	margin-left: 11.56069%; /* 20 / 173 */
}
/* Seite Tourenprogramm */
/* die Radiobuttons für die Suchart (nach Auswahlkriterien oder Text */
.suchartElement {
	width: 210px;
	float: left;
	margin-bottom: 12px;
}
/* Ebene, welche die vier Touren-Auswahlkriterien-Listen enthält */
#auswahlSuche, #textSuche {
	clear: both;
}
/* die vier Touren-Auswahlkriterien-Listen */
.tourenSuchformularElement {
	margin-bottom: 12px;
}
/* der Text in der rechten Splate liegt in einer Ebene, damit der rechts gefloatete Anmeldebutton Platz hat */
.tourenListeRechteSpalte {
	width: 70%;
	float: left;
}
#tourenAnmeldeButton {
	border: none;
	float: right;
}
@media only screen and (max-width: 720px) {
	.tourenListeRechteSpalte {
		width: 96%;
		float: none;
	}
	#tourenAnmeldeButton {
		float: none;
		display: block;
	}
}
/* Tour-Detailseite */
/* die linke Tabellenspalte mit den Titeln wird bei Mobil ausgeblendet, dafür die Titel in einer div über den jeweiligen Daten eingeblendet */
#tourDetail .titelBlock {
	display: none;
}
@media only screen and (max-width: 720px) {
	#tourDetail .datenSpalte {
		padding-left: 10px;
	}
	#tourDetail .titelSpalte {
		display: none;
	}
	#tourDetail .titelBlock {
		display: block;
		color: black;
		margin: 0 0 2px -10px;
		font-weight: bold;
	}
}

#tourenListe, table#tourenleiterTabelle {
	font-size: 1em;
	width: 100%;	
}
#tourDetail {
	margin: 20px 0;
	font-size: 13px;
	color: #000000;
	line-height: 18px;
}

table#tourDetail td {
	padding: 4px 8px 4px 0;
}

/* Tour-Anmeldeformular */
#tabelleTouranmeldeformular {
	width: 100%;
	margin: 20px 0;
}
#zurueckZumTourdetail {
	float: right;
	width: 150px;
	text-align: right;
}
#mitgliedsnummerSektion {
	width: 200px;
	float: right;
	text-align: right;
}

/* die linke Tabellenspalte mit den Titeln wird bei Mobil ausgeblendet, dafür die Titel in einer div über den jeweiligen Daten eingeblendet */
#tabelleTouranmeldeformular .titelBlock {
	margin: 6px 0 3px 0;
	display: none;
}
@media only screen and (max-width: 720px) {
	#tabelleTouranmeldeformular {
		width: 96%;
	}
	#tabelleTouranmeldeformular .titelSpalte {
		display: none;
	}
	#tabelleTouranmeldeformular .titelBlock {
		display: block;
	}
	#zurueckZumTourdetail {
		float: none;
		text-align: left;
		margin-top: 16px;
	}
	#mitgliedsnummerSektion {
		width: 200px;
		float: none;
		text-align: left;
}
}
/* Vorstandsseite: die Adressen werden in 3 Kolonnen aufgelistet */
#vorstandSpalte_1, #vorstandSpalte_2, #vorstandSpalte_3 {
	/* width: 164px; */
	width: 29.2307692%;
	float: left;
	margin-right: 2.2988505%;
	min-width: 130px;
}
@media only screen and (max-width: 720px) {
	#vorstandSpalte_1, #vorstandSpalte_2, #vorstandSpalte_3 {
		width: 100%;
		float: none;
	}
}

textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
/* bei Formularen die Rückmeldung */
.rueckmeldung {
	color: #E3000F;
}
/* Mitgliedschaft Tabelle Beiträge */
#beitraege {
	width: 100%;
}
#beitraege tr td {
	padding: 6px 0 4px 0;
}
/* das sind die Untertitel-Zeilen */
.rahmenOben {
	border-top: 1px #999999 dashed;
	font-weight: bold;
}


/* Tabelle mit Formularfeldern der Mitgliedschafts-Anmeldeseiten */
.mitgliedschaftFormularTabelle {
	width: 97%;
	margin-top: 12px;	
}
.mitgliedschaftFormularTabelle tr td {
	padding: 2px 4px 1px 0;
}
/* highlithed-Zahl bei den Schritten der Anmeldung */
.schritt {
	color: #E3000F;
	font-weight: bold;
}
/* der Link 'nach oben', zuunterst au jeder Seite, liegt im #wrapper */
#nachOben {
	clear: both;
	padding: 4px 0 8px 23.36734%;
	font-size: 11px;
	}
#nachOben a {
	color: #E3000F;
}
@media only screen and (max-width: 720px) {
	#nachOben {
		width: 100%;
		margin: auto;
		padding: 4px 0 8px 0;
		font-size: 14px;
		text-align: center;
		background-color: #CCC;
	}
	
}
@media only screen and (max-width: 720px) {
	#gap {
		height: 4px;
	}
}

/* Seiten Mitgliedschaft - Bemerkung auf der rechten Randspalte, dass für Anmeldungen die Desktop- oder Tablet-ersion zu verwenden ist */
#mitgliedschaftsHinweis {
	margin-top: 20px;
	color: green
	;
	font-style: italic;
	display: none;
}
@media only screen and (max-width: 720px) {
	#mitgliedschaftsHinweis {
		display: block;
	}
}

/* Definitionen Tabelle Clublokal-Belegung */
#cbTabelle {
	border: 1px solid #999999;
	background-color: #F5F5F5;
}
#cbTabelle td {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#cbTabelle .stdZelle {
	height: 24px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 10px;
	color: #FF0000;
	background-image: url(../img/gr_stdTrenner.png);
}
/* alle Bildli in der Tabelle */
.clublokalQuadrat {
	width: 14px;
	height: 14px;
  border: 1px solid #FFF;
}
.clublokalBelegung {
	width: 100%;
}
/* der Container in dem bei voller Breite die Thumbnails aufgelistet sind (4 Kolonnen) */
#thumbnailContainerClublokal {
	/* width: 672px; */
	width: 100%;
	border: 1px solid red;
}
/* Rahmen, in den das Thumbnail eingebettet ist */
.thumbnailRahmenClublokal {
	width: 158px;
	height: 158px;
	float: left;
	margin: 0 14px 14px 0;
	background-color: #E0E0E0;
	border: 1px solid #CCC;
	border-radius: 5px;
}






@media only screen and (max-width: 720px) {
	body#ClublokalBelegungsplan #content {
		overflow: scroll;
	}
	#cbTabelle .stdZelle {
		font-size: 8px;
		height: 24px;
	}
	#cbTabelle .datenzeile {
		font-size: 6px;
		height: 12px;
	}
	.clublokalQuadrat {
		width: 12px;
		height: 12px;
	}

}
/* da das Menu 150 Jahre Rückblick eine dritte Menuebene darstell, wird es auf den 150-Jahre-Seiten in der Mobil-Version in der rechten Randspalte gezeig,
die ja unterhalb des Inhalts erscheint. Auf der Desktop und der Tablet-Version ist ed unsichtbar. Das Menu ist in der Ebene menu150JahreRueckblich platziert */
#menu150JahreRueckblick {
	display: none;
}
@media only screen and (max-width: 720px) {
	#menu150JahreRueckblick {
		display: block;
	}
	#menu150JahreRueckblick h2 {
		display: none;
	}
	#menu150JahreRueckblick ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	#menu150JahreRueckblick ul li {
		padding: 8px 0;
	}
}
/* Seite Marktplatz */
/* die Tabelle mit dem Eingabeformular für Marktplatz-Eintraege */
#MarktplatzFormularTabelle {
	max-width: 580px;
	font-size: 1em;
}
#MarktplatzFormularTabelle .titelBlock {
	display: none;
}
@media only screen and (max-width: 720px) {
	#MarktplatzFormularTabelle .titelSpalte {
		display: none;
	}
	#MarktplatzFormularTabelle .titelBlock {
		display: block;
		font-size: 0.8em;
	}

}
/* Seite Bilder */
/* Auflistung der Alben in Blöcken */
.albumlisteItem {
	width: 96%;	
	margin: 20px 12px 20px 0;
	clear: both;
	border-top: 1px #999 dashed;
	padding-top: 12px;
}
.albumlisteItem .bild {
	float: left;
	margin-bottom: 12px;
}

.albumBeschrieb {
	width: 69%;
	margin-left: 3%;
	float: left;
}

/* der Container in dem bei voller Breite die Thumbnails aufgelistet sind (4 Kolonnen) */
#thumbnailContainer {
	/* width: 672px; */
	width: 100%;
}
/* Rahmen, in den das Thumbnail eingebettet ist */
.thumbnailRahmen {
	width: 154px;
	height: 154px;
	float: left;
	margin: 0 12px 12px 0;
	background-color: #E0E0E0;
	border: 1px solid #CCC;
	border-radius: 5px;
}
.thumbnail {
	/* der linke und obere Abstand des Thumbnails vom Rahmen erfolgt auf der Seite bilder.asp dynamisch, je nach der Dimension des Thumbnails */
}

@media only screen and (max-width: 720px) {
	.albumBeschrieb {
		width: 100% !important;
		float: left;
		margin-left: 0;
	}
	.thumbnailRahmen {
		width: auto;
		height: auto;
	}
	.thumbnail {
		margin: 3px !important;
	}

}
/* Seite Links / Inhalt ist in vier Spalten aufgeteiltbesteht aus vier Spalten */
.linksSpalte {
	width: 24.1847826%;
	margin-right: 0.2717391%;
	float: left;
}
@media only screen and (max-width: 720px) {
	.linksSpalte {
		float: none;
		width: 100%;	
	}
}