/*
Theme Name: Isotopes Win
Author: Mario Pitsch
Version: 2
License: completely copyrighted for mario pitsch - no copying allowed !
-------------------------------------------------------------- */
@import url('http://fonts.googleapis.com/css?family=Lekton:400,400italic,700');

/* ----- BASIC STYLES ----- */
* {background: transparent; border: 0; margin: 0; padding: 0;}
BODY { line-height: 80%; font-family: 'Lekton', sans-serif; }
H1, H2, H3, H4, H5, H6 {font-weight: normal;}
OL, UL { list-style: none;}
A {color:black; text-decoration:none;}
HR {width:20px; height:1px; background:#333332; border:none; margin:10px auto 11px auto; position:relative;}
.fourxfour.blog HR {background:black}
IFRAME, .post-img {display:block;}

/* ----- TYPO ----- */
H1.blog  {color:#72b8fe; font-size:14pt; width:100%; text-align:center; position:relative; }
#head H1 {font-size:20pt; width:100px; padding-top:4px; padding-left:5px;}

/*#head a#logo{width:200px;}*/

#the_post H1 {display:block; padding:30px 10px 10px 10px; font-size:30px; text-transform:uppercase; }
.proj #the_post H1 {padding-top:30px;  }
H2 {font-size:18pt; padding:10px 0 5px 0;}
.proj SPAN, .serious SPAN {position:relative; display:inline; background:grey; padding:7px 6px 5px 0;}
.serious SPAN {background:none;}
.serious {display:block; height:150px;}
.blogpost A {width:150px; height:150px; position:absolute; background:#FFF; }
.fourxfour.blogpost A {width:310px; height:310px; position:absolute; background:none; }
.date {display:block; margin-top:5px;}
#the_post DIV {display:block; line-height: 1.3; font-size:11pt;}
/* INFINITE SCOLL LOADER TEXT */
	#infscr-loading DIV {color:#333; font-size:8pt; font-family: 'Arial',sans-serif; font-weight:normal;}

/* -- THE COLUMN THINGY USING BLOCKQUOTE TAG --280 20*/
	BLOCKQUOTE {
					text-intend:0; 
					/*font-size:10pt;*/ 
					-moz-column-width:280px; 
					-webkit-column-width:280px; 
					-moz-column-gap:20px;
					-webkit-column-gap:20px; 
					margin:0 1px; 
					-webkit-column-fill: balance;
					/*overflow: hidden;*/
	}	
	BLOCKQUOTE div {
				/*	-webkit-column-break-inside: avoid; 
					-moz-column-break-inside: avoid;
					-webkit-column-break-after: always; 
					-moz-column-break-after: always;*/
	}
	BLOCKQUOTE p{	padding-bottom:10px; 
		
					-webkit-column-break-inside: avoid; 
					-moz-column-break-inside: avoid;
				/*	-webkit-column-break-after: always; 
					-moz-column-break-after: always;*/
	}
	/*BLOCKQUOTE div{	
					-webkit-column-span: all;
					-moz-column-span: all;
	}*/
	BLOCKQUOTE strong {  
					font-family: 'Lekton' , sans-serif; 
					font-weight:400; font-style:normal;
					text-decoration: underline;
					font-size:1em;
					display:inline-block;
					padding-bottom:7px; 
					
					-webkit-column-break-before: always; 
					-moz-column-break-before: always; 
					-webkit-column-break-after: avoid; 
					-moz-column-break-after: avoid; 
					
	}
/* ----- CONTAINER ----- */
#schnellebuntebilder { width:95%; margin:0 auto; }
#head { margin:20px auto 0 auto; width:500px; height:50px; overflow:hidden;}
#the_post {position:relative; display:block; background:white; margin:10px; margin-bottom:20px;}

/* ----- CLASSES -----*/
.proj, .serious {color:white; padding:7px 0 0 0; position:absolute; top:10px; left:10px; z-index:100; font-size:24pt; text-transform:uppercase; overflow:hidden; border-left:5px solid grey;}
.serious {z-index:auto;}
.large {overflow:visible;}
.entry_content {margin:10px;}
/* -- fix for links in blogposts [sebl] -- */
.entry_content a{position:relative;}

/* LANGUAGE SWITCH */
	.qtrans_language_chooser { font-size:14px; list-style-type:none; width:100%; height:14px; text-align:right; position:relative; top:-24px; right:10px; z-index:1999;}
	.qtrans_language_chooser LI {display:inline;}
	.qtrans_language_chooser LI:first-child:after {content: "|";}


/* ----- ISOTOPES ----- (CMD+C > CMD+V) ----- */
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
          transition-duration: 1s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property: -moz-transform, opacity;
          transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}
/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html, body { height: 100%; }

#container {
  padding: 0 0 0 10px;
	/*padding: 0 20px 0 30px;*/
  margin: 0px auto;
}

.element {
  margin: 5px 0;
  float: left;
  overflow: hidden;
  position: relative;
  background:white;
  color: #222;
}

/* ----- THE SIZES OF ELEMENTS ----- */
.element {width:310px; height:150px;}
.element.blogpost {width:150px; height:150px;}
.element.fourxfour {width:310px; height:310px;}
/* ----- THE SIZES OF ELEMENTS ----- */

.element.large {
  z-index: 100;
}

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* THE PHP STUFF */
.element, .proj span { background-color: rgb(146,185,16); }
#container A, H1.blog, #the_post  h1  { color: rgb(146,185,16); }
/*#container A {font-weight:700;}*/
.proj, .serious { border-color: rgb(146,185,16); }
.fourxfour H1.blog {color:white}