/*
Theme Name:     Riaz
Description:    Child theme für das Twenty Twelve theme. For instruction read "readme.txt"!
Author:         Oliver Rehmann
Author URI:     http://www.oliver-rehmann.de
Template:       twentytwelve
Version:        1.1
*/

/* Inhalt
--------------------------------------------------------------------------------------------------
1. Struktur
	1.1	Seitenstruktur
		1.1.1	normale Ansicht
		1.1.2	mobile Ansicht
	1.2	Sidebar nach links
	1.3	runder Rand
	1.4 Menus
		1.4.1 Hauptmenu
			1.4.1.1 normale Ansicht
			1.4.1.2 mobile Ansicht
		1.4.2 Footer Menu
			1.4.2.1 normnale Ansicht
			1.4.2.2 mobile Ansicht
2. Seiten/Widgets
	2.1 RSS Seite
	2.2 Video Seite
	2.3 Konzert Seite
		2.3.1 Event Einzeldarstellung
		2.3.2 Event Listendarstellung
	2.4 "nächste Konzerte" Widget
3. globale Einstellungen
	3.1 html5 audio player
	3.2 resposive video
	3.3 Zitate
	3.4 Netzwerk Icons
	3.5 Searchform
	3.6 allgemeine Klassen
4. "Bug"-Fixes
	- Veröffentlichungsdatum in Newseinträgen ausblenden
	- Abstand unter Newseintrag (Blogansicht) fixen
	- Abstand unter Impressum fixen
	- Kontakt Seite - mobile Version
	- normale Version
	- in der mobilen Version Elternelemente im Menu ausblenden		-> nach Installation anpassen!
	- in der mobilen Version Bild in der Sidebar ausblenden
	- bestimmte Bilder ausblenden - mobile Version					-> nach Installation anpassen!
	- a:visited Fix
	- 2 Click Social Media Button
*/

/* Dateien
--------------------------------------------------------------------------------------------------
images/quote.png
*/

/* Notes
--------------------------------------------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
*/

@import url('../twentytwelve/style.css');


/*	-------------------------------------------------------------------------------------------
	1. Struktur
	-------------------------------------------------------------------------------------------   */
	
/*	-- 1.1 Seitenstruktur ---------------------------------------------------------------------   */

/*	-- 1.1.1 nomale Ansicht -- */
@media screen and (min-width: 600px) {

	/* -- gesamte Seite -- */
	.site {
		margin: 0 auto;
		max-width: 792px;	/* 960px - (48px + 120px) Padding */
	}
	#page {
		padding-left: 48px;
		padding-left: 3.42857rem
		padding-right: 120px;
		padding-right: 8.57143rem;
	}
	
	/* -- Header -- */
	.site-header {
		margin-left: -48px;
		margin-left: -3.42857rem
		margin-right: -120px;
		margin-right: -8.57143rem;
		margin-top: 48px;
		margin-top: 3.42857rem
		padding: 0;
	}
	.links { float: left; }
	.links hgroup { float: left; }
	.links canvas {	/* width + margin = 48px */
		width: 40px;
		margin-right: 8px;
		height: 5em;
		background-color: none;
		float: left;
	}
	.rechts { float: right; }
	.main-navigation { float: left; }
	.rechts canvas {	/* width + margin = 120px */
		width: 112px;
		margin-left: 8px;
		height: 5em;
		background-color: none;
		float: left;
	}

	/* -- Inhalt-Bereich -- */
	#main {
		clear: both;
		padding-top: 48px;
		padding-top: 3.42857rem
	}
	
	/* -- Footer -- */
	#colophon {
		margin-right: -72px; /* 120px - 48px */
		margin-right: -5.14285714rem;
		padding: 0;
	}
	#colophon p {
		color: #777777;
		float: left;
		line-height: 3.692307692; }
	#colophon nav { float: right; }
}

/*	-- 1.1.2 mobile Ansicht -- */
@media screen and (max-width: 599px) {
	/* Header */
	canvas { display: none; }
	
	/* Footer */
	#colophon p { text-align: center;}
}
	
	
/*	-- 1.2	Sidebar nach links ----------------------------------------------------------------   */
@media screen and (min-width: 600px) {
    .site-content { float: right; }
    .widget-area { float: left; }
}
 
	/*	-- for IE8 and IE7 -- */
	.ie .site-content { float: right; }
	.ie .widget-area { float: left; }


/*	-- 1.3	runder Rand -----------------------------------------------------------------------   */
.site {
	border: 2px solid #666;
	border-radius: 24px;
	border-radius: 1.71429rem;
}


/*	-- 1.4 Menus ------------------------------------------------------------------------------   */

/*	-- 1.4.1 Hauptmenu -- */

/*	-- 1.4.1.1 normale Ansicht -- */

.site-header { padding-top: 48px; } /* mobile Ansicht */

@media screen and (min-width: 600px) {
	/* canvas Bilder */
	#header-links {
		float: left;
		padding-right: 8px;
	}
	#header-rechts {
		float: right;
		padding-left: 1.71429rem;
	}

	.site-header hgroup { float: left; }
	.main-navigation { float: right; }
	
	#page {
		padding-left: 48px;
   		padding-right: 112px;
	}
	.site-header {
		margin-left: -48px;
		margin-right: -112px;
		padding: 0;
	}
	
	.main-navigation {
		width: inherit;
		margin-top: 3em;
	}
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border: none; }
	.main-navigation li ul li { margin-left: 0; }
	.main-navigation li { margin: 0 0 0 1.71429rem; }
	.main-navigation li:first-child { margin-left: 0; }
}

/* rechtes canvas Bild ab Breite 850px und kleiner verkleinern */
@media screen and (min-width: 600px) {
	@media screen and (max-width: 850px) {
		#header-rechts {
			width: 40px;
			height:80px;
		}
		#page { padding-right: 40px; }
		.site-header { margin-right: -40px; }
	}
}


/*	-- 1.4.1.2 mobile Ansicht -- */
.menu-toggle {
	color: white;
    background-color: #21759B;
    background-image: -moz-linear-gradient(center top , #75a9c1, #21759B); /* Farbe oben, Farbe unten */
	background-image: -ms-linear-gradient(top, #75a9c1, #21759B);
	background-image: -webkit-linear-gradient(top, #75a9c1, #21759B);
	background-image: -o-linear-gradient(top, #75a9c1, #21759B);
	background-image: linear-gradient(top, #75a9c1, #21759B);
    border: 1px solid #21759B;
    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle:active, .menu-toggle.toggled-on {
	color: #21759B;
	background-color: #e6eff4;
	background-image: -moz-linear-gradient(top, #e6eff4, #fbfcfd);
	background-image: -ms-linear-gradient(top, #e6eff4, #fbfcfd);
	background-image: -webkit-linear-gradient(top, #e6eff4, #fbfcfd);
	background-image: -o-linear-gradient(top, #e6eff4, #fbfcfd);
	background-image: linear-gradient(top, #e6eff4, #fbfcfd);
	box-shadow: inset 0 0 8px 2px #9ac1d2, 0 1px 0 0 #e6eff4; /* innenligender Schatten, Schatten unterhalb des Buttons */
	border-color: transparent;
}
.menu-toggle:hover {
	color: #21759B;
	background-color: #c9dde6;
	background-image: -moz-linear-gradient(top, #9ac1d2, #e6eff4);
	background-image: -ms-linear-gradient(top, #9ac1d2, #e6eff4);
	background-image: -webkit-linear-gradient(top, #9ac1d2, #e6eff4);
	background-image: -o-linear-gradient(top, #9ac1d2, #e6eff4);
	background-image: linear-gradient(top, #9ac1d2, #e6eff4);
}


/*	-- 1.4.2 Footer Menu -- */
.footer-navigation { text-align: center; }
.footer-navigation li {
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.footer-navigation a { color: #5e5e5e; }
.footer-navigation a:hover { color: #21759b; }

/*	-- 1.4.2.1 normale Ansicht -- */
@media screen and (min-width: 600px) {
	.footer-navigation ul.nav-menu,
	.footer-navigation div.nav-menu > ul {
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.footer-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.footer-navigation li a,
	.footer-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.footer-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.footer-navigation li a:hover { color: #000; }
	.footer-navigation li {
		margin: 0 24px 0 0;
		margin: 0 1.71429rem 0 0;
		position: relative;
	}
	.footer-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.footer-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.footer-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.footer-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.footer-navigation li ul li a:hover {
		background: #e3e3e3;
		color: #444;
	}
	.footer-navigation .current-menu-item > a,
	.footer-navigation .current-menu-ancestor > a,
	.footer-navigation .current_page_item > a,
	.footer-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
}


/*	-- 1.4.2.2 mobile Ansicht -- */
@media screen and (max-width: 599px) {
	.footer-navigation {
		margin-bottom: 24px;
		margin-bottom: 1.71429rem;
	}
}


/*	-------------------------------------------------------------------------------------------
	2. Seiten/Widgets
	-------------------------------------------------------------------------------------------   */

/*	-- 2.1 RSS Seite --------------------------------------------------------------------------   */
.rss {
	color: #ccc;
	margin-bottom: 12px;
	margin-bottom: 0.85714286rem;
}
.rss img {
	vertical-align: text-bottom;
	opacity: 0.8;
	-moz-opacity: 0.8;
 	border: 0 none !important;
    border-radius: none !important;
    box-shadow: none !important;
}
.rss a:nth-child(2n) { margin-left: 8px; }


/*	-- 2.2 Video Seite ------------------------------------------------------------------------   */
.videoLinks .elastic-video, .videoRechts .elastic-video {
	margin-bottom: 12px;
	/*margin-bottom: rem;*/
}
.videoLinks p, .videoRechts p {
	text-align: center;
	color: #757575;
    font-size: 0.857143rem;
    font-style: italic;
	margin-bottom: 48px;
	margin-bottom: 3.42857rem
}

	/* -- in mobiler Ansicht alle Videos untereinander anzeigen -- */
	@media screen and (min-width: 600px) {
		.videoLinks, .videoRechts { width:46%; }
		.videoLinks { float: left; }
		.videoRechts { float: right; }
	}


/*	-- 2.3 Konzert Seite ----------------------------------------------------------------------   */

/*	-- 2.3.1 Event Einzeldarstellung -- */
@media screen and (min-width: 600px) {
	.event-thumbnail img {
		float: right;
		margin-right: 24px;
		margin-right: 1.71429rem;
	}
	.event-info { float: left; }
}
.event-thumbnail img {
	margin-bottom: 24px;
	margin-bottom: 1.71429rem;
}
.event-info h3 { margin-bottom: 0; }
.event-info h3:first-child { margin-top: 0; }

/*	-- 2.3.2 Event Listendarstellung -- */
.events-table thead tr th:first-child { width: 25%; }
//.event-time { width: 33%; }
//.event-description { width: 00%; }
.events-table tbody tr td:first-child { padding: 6px 0 0 6px; }

//.events-table td:nth-child(2n) {
//	vertical-align: top;
//	height: 82px;	/* Bildhöhe (70px) + 2x Bild-Padding (2x 6px) */
//}

.events-table td:last-child { vertical-align: top;}


/*	2.4 -- "nächste Konzerte" Widget ----------------------------------------------------------   */
#em_widget-2 ul li {
	padding-bottom: 6px;
	padding-top: 6px;
	border-bottom: solid 1px #ccc;
}
#em_widget-2 ul li:first-child { padding-top: 0; }
#em_widget-2 ul li:last-child {
	padding-bottom: 0;
	border: none;
}
#em_widget-2 ul li ul li {
	padding-bottom: 0;
	padding-top: 0;
	border-bottom: none;
}


/*	-------------------------------------------------------------------------------------------
	3. globale Einstellungen
	-------------------------------------------------------------------------------------------   */

/*	-- 3.1 html5 audio player -----------------------------------------------------------------   */
.mejs-audio {
	margin-bottom: 24px;
	margin-bottom: 1.71429rem;
}


/*	-- 3.2 resposive video --------------------------------------------------------------------   */
.elastic-video {
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}
.elastic-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*	-- 3.3 Zitate -----------------------------------------------------------------------------   */
blockquote {
    background: url("images/quote.png") no-repeat scroll 0 4px transparent;
    color: #ccc;
    overflow: hidden;
    padding-left: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.obererabstand {
	padding-top: 24px !important;
	padding-top: 1.71429rem !important;
	background: url("images/quote.png") no-repeat scroll 0 28px transparent;
}


/*	-- 3.4 Netzwerk Icons ---------------------------------------------------------------------   */
.smw_center img, .smw_left img {
    border: 0 none !important;
    border-radius: none !important;
    box-shadow: none !important;
}


/*	-- 3.5 Searchform -------------------------------------------------------------------------   */
.search-form div {
	border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    font-family: inherit;
    padding: 6px;
    padding: 0.428571rem;
}
.search-text {
	padding: 0;
	border: none;
	width:100%;
	color: #ccc;
	font-size: 87.5%;
}


/*	-- 3.6 allgemeine Klassen -----------------------------------------------------------------   */
.clear { clear: both; }

/*
.entry-content h2 {
	display: list-item;
	list-style-type: disc;
	list-style-position: inside;
}
*/


/*	-------------------------------------------------------------------------------------------
	4. "Bug"-Fixes
	-------------------------------------------------------------------------------------------   */

/* -- Veröffentlichungsdatum in Newseinträgen ausblenden -- */
time.entry-date-top {
    display: block;
    color: #777777;
    font-size: 13px;
    font-size: 0.928571rem;
    line-height: 1.71429;
}

/* -- Abstand unter Newseintrag (Blogansicht) fixen -- */
.entry-summary p { margin-bottom: 0; }

/* -- Abstand unter Impressum fixen -- */
/*
.post-162 .entry-content p:last-child,
.post-165 .entry-content p:last-child {
	margin-bottom: -24px;
}
*/

/*  -- Kontakt Seite - mobile Version -- */
@media screen and (max-width: 599px) {
	.kontakt img { display: none; }
}

/*  -- Kontakt Seite - normale Version -- */
@media screen and (min-width: 600px) {
	.kontakt img { width: 50%; }
}
@media screen and (min-width: 850px) {
	.kontakt img { width: 65%; }
}


/* -- in der mobilen Version Elternelemente im Menu ausblenden -- */
@media screen and (max-width: 599px) {
	#menu-item-244 > a { display: none; }		/* Info */
	#menu-item-263 > a { display: none; }		/* Media */
	a[href="#"] { display: none;}
	#menu-item-291 > a { display: none; }		/* Media */
}

/* -- in der mobilen Version Bild in der Sidebar ausblenden -- */
@media screen and (max-width: 599px) {
	.riaz { display: none; }
}

/*  -- bestimmte Bilder ausblenden - mobile Version -- */
@media screen and (max-width: 599px) {
	.page-id-50 img, .page-id-48 img { display: none; } /* Biographie Seite, Info Seite */
}

/*	-- a:visited Fix -- */
.widget-area .widget a {
	color: #21759B;
}
.widget-area .widget a:visited {
	color: #21759B;
}
.widget-area .widget a:hover {
	color: #0f3647;
}

.entry-content a {
	color: #21759B;
}
.entry-content a:visited {
	color: #21759B;
}
.entry-content a:hover {
	color: #0f3647;
}











/* Konzert Navigation */
.em-pagination .page-numbers { padding-right:3px; padding-left:3px;}
.em-pagination { display: block;text-align: center;}

.em-pagination .prev::after { content: " zurück"; }
.em-pagination .next::before { content: "weiter "; }





/* Konzert Suchfunktio */
/*
.em-search-options {display:block !important;margin-top:8px;}
.em-search-wrapper {margin-bottom:24px !important;}
#em-wrapper p:first-child, #em-wrapper p:last-child {display:none; }
*/





.info {
	color: #757575;
    font-size: 0.857143rem;
    font-style: italic;
}

@media screen and (max-width: 959px) {
	body { background-color: #666666; }
}




/* Diskographie */
.diskographie hr { margin-top: 120px; clear: both; } /* muss bei mehreren Bandleader Einträgen noch anders gelöst werden! */
.diskographie h3 {	/* Bandleader CD-Titel */
	display: inline-block;
	line-height: 1;
}
.diskographie .bandleader p:last-of-type { font-style: italic; }
.diskographie ul { list-style-position: inside; }
.bandleader { clear: both; }






#secondary a { text-decoration: none; }















/*	-- 1. resposive video ---------------------------------------------------------------------   */
.responsive-youtube, .responsive-vimeo {
    position:relative;
    width:100%;
    height:0;
    overflow:hidden;
}

.responsive-youtube iframe, .responsive-vimeo iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/*	-- 2. resposive video info ----------------------------------------------------------------   */

.responsive-video-info {
	text-align:center;
	padding-top:0.5em;
}


/*	-- 3. resposive soundcloud ----------------------------------------------------------------   */

.soundcloud-full {
	width:100%;
	margin-bottom:2em;
}

@media screen and (max-width: 799px) {
	.soundcloud-left, .soundcloud-right {
		width:100%;
		margin-bottom:2em;
	}
}

@media screen and (min-width: 800px) {
	.soundcloud-left, .soundcloud-right {
		width:280px;
		padding-bottom:1em;
	}
	.soundcloud-left {
		float:left;
		padding-right:2em;
	}
	.soundcloud-right {
		float:right;
		padding-left:2em;
	}
}


.responsive-youtube { padding-top:56.4%; }
.responsive-vimeo { padding-top: 56.4%; }







.soundcloud-info { }
.entry-content iframe.soundcloud-full {
	margin-bottom:0em;
}





.responsive-video-info {
    color: #757575;
    font-size: 0.857143rem;
    font-style: italic;
    margin-bottom: 3.42857rem;
margin-top: 1em;
}