/*
Theme Name: commongrounds
Author: Johannes J. Schmidt
Author URI: http://die-tf.de/
Description: I am the common grounds website. Artwork by Matthias Specht.
Version: 1.0
License: GNU General Public License
License URI: see license.txt

This theme, like WordPress, is licensed under the GPL.
*/

/* Import the necessary TK Bootstrap WP CSS additions */
@import url( includes/css/bootstrap-wp.css );
@import url( includes/css/fonts.css );

body {
  font-family: P22UndergroundPro;
  font-size: 11pt;
  font-size: 10pt;
  color: rgb(18, 18, 18);
  background-color: rgb(240, 240, 240);
  /*
  background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsdCA0ADGo09wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAD0lEQVQI12NgYGBgYGAAAAAHAAFf/HSpAAAAAElFTkSuQmCC) repeat-y top center;
  */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
}
a {
  color: rgb(18, 18, 18);
  /*
  text-decoration: underline;
  */
  -webkit-transition: color 0.4s;
  -moz-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}
a:hover,
a:focus {
  color: rgb(255, 97, 82);
}
h1 a, h2 a {
  text-decoration: none;
}
h1 {
  font-size: 1.7857142857142858em; /* 25pt */
  font-weight: bold;
}
h2 {
  font-weight: bold;
  font-size: 1em;
}

header.navbar {
  font-size: 1.2857142857142858em; /* 18pt */
  background-color: white;
  /*
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsdCA0ADGo09wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAD0lEQVQI12NgYGBgYGAAAAAHAAFf/HSpAAAAAElFTkSuQmCC) repeat-x center left;
  */
  border-radius: 0;
  margin-bottom: 0;
}
header.navbar .container {
  padding: 0;
}
.container > .navbar-header, .container > .navbar-collapse {
  margin-left: 0;
  margin-right: 0;
}
header.navbar h1.logo {
  margin: 1.5ex 0 0.75ex 0;
}
header.navbar h1.logo img {
  height: 80px;
}
header.navbar .navbar-brand {
  margin: 0;
}
header.navbar .visible-xs img {
  height: 60px;
}
header.navbar .navbar-toggle {
  border: none;
  margin: 15px 5px 0 0;
  min-height: 70px;
}
header.navbar a {
  text-decoration: none;
  min-width: 7em;
}
header.navbar-default .navbar-nav > li > a {
  color: inherit;
  padding: 0.5ex 15px;
}
header.navbar .navbar-nav {
  margin: 0;
  text-align: center;
}
header.navbar .navbar-left {
  text-align: left;
}
header.navbar .navbar-right {
  text-align: right;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: inherit;
  color: rgb(255, 97, 82);
  text-decoration: underline;
}
.navbar-collapse {
  margin: 0 0 1ex 0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border: none;
}
header.navbar-default .navbar-toggle .icon-bar {
  background-color: rgb(18, 18, 18);
}

/* http://stackoverflow.com/questions/10568103/modify-twitter-bootstrap-navbar */
.navbar-center .nav,
.navbar-center .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}
.navbar-center .container {
  text-align: center;
}
@media (max-width: 767px) {
  header.navbar a {
    min-width: 3em;
  }
  header.navbar-default .navbar-nav > li > a {
    padding: 0.25ex 5px;
  }
  header.navbar .navbar-left,
  header.navbar .navbar-right {
    text-align: center;
  }
}

/* Carousel */
.carousel {
  margin-top: -1px;
}
.carousel .item {
  height: 530px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.carousel .container {
  height: 100%;
}
.carousel-caption {
  text-shadow: none;
  left: 4em;
  right: 4em;
}
.carousel-caption > * {
  display: inline-block;
  background-color:rgba(0, 0, 0, 0.5);
  font-size: 3em;
  padding: 2ex 2em;
  margin: 10% auto;
}
.carousel-control {
  text-shadow: none;
  width: 4em;
}
.carousel-control.left,
.carousel-control.right {
  background-image: none;
}
@media (max-width: 767px) {
  .carousel-caption {
    left: 0;
    right: 0;
    font-size: 0.7em;
  }
  .carousel-caption > * {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin: 40% auto;
  }
  .carousel-control {
    display: none;
  }
}
@media (max-width: 400px) {
  .carousel-caption {
    font-size: 0.5em;
  }
  .carousel-caption > * {
    margin: 52% auto;
  }
}
.carousel + footer.navbar {
  display: none;
}

.post-navigation {
  margin: 5ex 0 0 0;
}
.nav-previous {
  float: left;
  max-width: 45%;
}
.nav-next {
  float: right;
  max-width: 45%;
}

body > footer.navbar-default {
  font-weight: bold;
  text-align: center;
  margin: 6ex 0 9ex 0;
  background-color: transparent;
  border: none;
}
body > footer.navbar hr {
  border: none;
  border-top: 1px solid rgb(18, 18, 18);
  margin: 0;
}
body > footer.navbar-default .navbar-nav > li > a {
  text-decoration: none;
  color: rgb(18, 18, 18);
}
body > footer.navbar ul {
  margin: 0 -15px;
}

/* content */
/*
.entry-content p {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;

  -moz-column-width: 23em;
  -webkit-column-width: 23em;
  column-width: 23em;

  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em;
}
*/
.entry-content {
  max-width: 800px;
  margin: 0 auto;
}
.entry-content a {
  color: #336699;
  font-weight: 500;
}
.entry-content h1 {
  margin: 3ex 0 1ex 0;
  text-align: center;
}
.entry-content h2 {
  margin: 3ex 0 0 0;
}
.entry-content ul {
  list-style-type: none;
  padding: 0;
}
.entry-content hr {
  border-color: rgb(18, 18, 18);
  margin: 5ex 0 3ex 0;
}
.container.margin {
  margin-top: 2ex;
  padding: 0 5px;
}
.project-list {
  padding: 10px;
}
.project-list a {
  position: relative;
  display: block;
  text-align: center;
}
.project-list img {
  margin: 0;
}
.project-list h1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
  font-size: 2em;
  padding: 30% 1.5em;
  margin: 0;
  color: transparent;
  -webkit-transition: color 0.8s, background-color 0.4s;
  -moz-transition: color 0.8s, background-color 0.4s;
  -o-transition: color 0.8s, background-color 0.4s;
  transition: color 0.8s, background-color 0.4s;
}
.project-list:hover h1 {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
@media (max-width: 767px) {
  .project-list h1 {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1em 1ex;
    top: 30%;
    bottom: auto;
    font-size: 1.2em;
  }
}

.entry-meta {
  color: #777;
  font-size: 0.85em;
}
.page-header {
  border-bottom: none;
  text-align: center;
  margin-bottom: 1ex;
  max-width: 800px;
  margin: 4ex auto 1ex auto;
}


.index {
  margin-top: 1ex;
}
.news {
  border-top: 1px solid rgb(72, 72, 72);
  margin-top: 2ex;
  padding-top: 2ex;
}
.news:first-child {
  margin-top: 3px;
  border-top: none;
}
.news .page-header {
  margin-top: 0;
  text-align: left;
}
.news header h1 {
  text-align: left;
  margin-top: 0;
}
.news .entry {
  padding-left: 30px;
}
.news .more a {
  border-bottom: 1px solid rgb(18, 18, 18);
  -webkit-transition: color 0.4s, border-color 0.4s;
  -moz-transition: color 0.4s, border-color 0.4s;
  -o-transition: color 0.4s, border-color 0.4s;
  transition: color 0.4s, border-color 0.4s;
}
.news .more a:hover {
  text-decoration: none;
  border-color: rgb(255, 97, 82);
}
@media (max-width: 767px) {
  .news .entry {
    padding: 0 15px;
    margin-top: 3ex;
  }
}


/* My Minimal WordPress Styling comes here */

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}


/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-bottom: 1ex;
}
.wp-caption {
	margin-bottom: 10px;
	max-width: 100%;
	border: none;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	margin-top: 1ex;
  color: #777;
  font-size: 0.85em;
}

/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}


/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 1.5em;
}


/* Clearing */
.clear {
	clear: both;
}


/* Here some needed widget styles 
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line. 
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}