/*
Theme Name: darkskytheme
Description: Ein Childtheme von twentysixteen
Author: Lukas Schuler
Author URI: http://www.xirrus.ch
Template: twentysixteen
Version: 1.0
Tags:
Text Domain:  twentysixteen-child
*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

/* Menu mods preparation, essential for DSS circle menu */

body:not(.home) div.site {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002f66+0,991e99+5,cc8484+10,ccad8e+15,efd7bf+50,ffe8d8+75,fff2cc+100&0.35+0,0.7+15,0.95+50,1+100 */
	background: -moz-linear-gradient(top,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a112666', endColorstr='#362548',GradientType=0 ); /* IE6-9 */
}

/* transparent white content container */
body:not(.home) div.site div.site-inner {
	background-color: rgba(255,255,255,0.7);
}

/* ab hier wird das Menu auf der Homepage sehr speziell */

/* close gap to header */
#masthead {
	padding-top:0px;
}

/* close vertical gap of display for category lists that contain empty things */
ul.lcp_catlist:empty {
	position:absolute;
	top:0px;
}

.lcp_date {
	white-space: nowrap;
}

#lang_sel {
	margin-top:0px;
	margin-left:5px;
	font-size: 14px !important;
	padding: 0 !important;
	border-top: none !important; /* Remove top line. */
	float: right;
}
#lang_sel ul li .icl_lang_sel_native {
	font-style: sans-serif;
	font-size: 12px;
}


/* site header background, url is in header.php */
.site-header-main {
	background-position:center top;
	background-repeat:no-repeat;
}

#titlemargin {
	padding-left:30px;
}

.site-title > a:link {
	color:#eeeeee;
}
.site-title > a:visited {
	color:#eeeeee;
}

.site-description {
	color:#ffeecc;
	line-height: 140%;
}

.site-branding {
	padding-left:5px;
}

.site-header-menu {
	padding-left:10px;
}

.site-branding {
	width:80%;
	float:left;margin-top:0px;
}

.site-title	{
	white-space:pre-wrap;
}
.site-description 	{
	margin-left:2px;
}

@media screen and (max-width: 56.874em) {

#dss-site-navigation {
	display:none;
}

	.site-header-menu {
		background-color:white;
		padding-left:5px;
	}
	.menu-hauptmenue-container, menu-menu-principal-container, menu-menu-principale-container {
		background-color:white;
		padding-left:5px;
	}

button.menu-toggle {
	margin-left:5px;
	color:white;
	border-color:white;
}

ul li a:link {
	text-decoration: none;
}
ul li a:visited {
	text-decoration: none;
}
ul li a:hover {
	text-decoration: none;
}
ul li a:active {
	text-decoration: none;
}



} /* end small media screen */

/* big media screen */
@media screen and (min-width: 56.875em) { /* 910px toggles main menu and navigation */

html {
   height:100%;
}

body.home {
	font-size: 18px;
	background-color:black;
	height:99%;
	font-family:'Frutiger','Tahoma',sans-serif;
	font-weight:normal;
	background-size:auto 100%;
}

h1,h2,h3,h4,h5,h6,p {
   line-height: 125%;
}

h1 { font-size: 2.0em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }

/* background mods */
body.home div.site {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002f66+0,991e99+5,cc8484+10,ccad8e+15,efd7bf+50,ffe8d8+75,fff2cc+100&0.35+0,0.7+15,0.95+50,1+100 */
	background: -moz-linear-gradient(top,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(26,17,38,0.5) 0%, rgba(56,57,139,0.75) 50%, rgba(59,37,72,1.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a112666', endColorstr='#362548',GradientType=0 ); /* IE6-9 */
}

/* transparent white content container */
div.site-inner {
	background-color: rgba(255,255,255,0.7);
}

#site-navigation{
	display:none;
}

/* correct the bug of twenty sixteen theme for first-child submenu wrapping out of page */
/* we need each language here */
ul#menu-hauptmenue > li:first-child > ul.sub-menu > li {
    margin-right:-56px;
}

ul#menu-menu-principal > li:first-child > ul.sub-menu > li {
    margin-right:-56px;
}

ul#menu-menu-principale > li:first-child > ul.sub-menu > li {
    margin-right:-56px;
}


	ul#menu-hauptmenue > li > a:link {
		color:white;
	}
	ul#menu-hauptmenue > li > a:visited {
		color:white;
	}
	ul#menu-menu-principal > li > a:link {
		color:white;
	}
	ul#menu-menu-principal > li > a:visited {
		color:white;
	}
	ul#menu-menu-principale > li > a:link {
		color:white;
	}
	ul#menu-menu-principale > li > a:visited {
		color:white;
	}
	.menu-hauptmenue-container, menu-menu-principal-container, menu-menu-principale-container {
		background-color:transparent;
	}
	.site-header-main {
		background-color:black;
	}
	.site-header-menu {
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.0) 0%, rgba(0,0,0,1.0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.0) 0%, rgba(0,0,0,1.0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000ff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */	
	}

	#site-header-menu {
		margin-bottom:0px;
	}

	.site-header-menu {
		padding-left:10px;
	}


ul#dss_circle_menu {
	margin-left:0px;
	padding-left:0px;
}

/*http://www.mademyday.de/css-height-equals-width-with-pure-css.html*/
ul#dss_circle_menu > li > div.box{
	position: relative;
	width: 23%;		/* desired width */
	float:left;
	margin-left: 15px;
	margin-bottom: 15px;
}
ul#dss_circle_menu > li > div.box::before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

ul#dss_circle_menu > li > div.box > a > div.shape {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #333333;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	border-radius: 50% 50%;
	background-image: url('/dss/wp-content/themes/darkskytheme/img/starmenubg.jpg');
	background-size: 100% 100%;
	background-position: center center;
	cursor:focus;
}

ul#dss_circle_menu > li > div.box > a > div.shape > div.content{
	position: relative;
	margin-top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding:5px;
	color: white;
	text-align:center;
	hyphens: auto;
/*	@hyphenation-resource(''); plugin WP typography might be better than that */
    word-wrap: break-word;
	font-family:Montserrat, 'Helvetica Neue', sans-serif;
}

/* hide content on homepage */

ul {
	visibility: visible;
	list-style-type: none;
	min-width:100%; /* at least the size of the header */
    width:auto; /* size the block automatically */
}

/* show menu only on homepage */

#site-header-menu {
	-webkit-flex: 0 1 100%;
	-ms-flex: 0 1 100%;
	flex: 0 1 100%;
}


/* modify submenu */

ul#dss_circle_menu > li > div.box {
    position: relative;
    display:block;
}

ul.sub-menu {
    display: none;
    position: absolute;
    top: 75%;
    left: 0;
    z-index: 4;
}

ul.sub-menu li div a {
	display: block;
}

ul#dss_circle_menu > li:hover ul.sub-menu {
    display: block;
}

ul#dss_circle_menu > li > div.box > a:hover > div.shape {
	background-color: #ccaa33;
	background-image: url('/dss/wp-content/themes/darkskytheme/img/starmenuhover.jpg');
}

ul.sub-menu div.content {
	font-family: Montserrat, 'Helvetica Neue', sans-serif;
	font-size: 0.6em;
    padding-left: 5px;
    padding-right: 4px;
	background-color: rgba(255,255,255,0.85);
}

ul.sub-menu li {
	border-bottom: 1px solid #cccccc;
}


ul#dss_circle_menu > li:hover ul.sub-menu > li {
    position:relative;
}

#darkskyhome {
padding-top: 30px;
padding-bottom: 48%;
}


} /* das ganze home styleing passiert nur bei genügend Platz */


/* gilt immer */

ul li a {
    text-decoration:none;
}