/*
Original design: In Response (v1.1 - May 15th, 2013)
For more information, see http://andreasviklund.com/dt_portfolio/in-response/
*/

*{margin:0; padding:0;}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* General styles */

body { background:#f9f9f9; color: #111;
       font-size: 1.0em;   line-height: 1.8; font-weight: 400;  
	   font-family:"Open sans", Helvetica, Arial, sans-serif; }
  	  
a {color:#119; text-decoration:none; font-weight:400;}
a:hover {text-decoration:underline; color:#119;}
a.current {text-decoration:underline;}
p,ul,ol,dl {margin:0 0 15px 0; line-height:1.8em;}
h1 {color:#336; font-size:4.6em; margin-bottom:0;}
h1 a {text-transform:none; font-weight:600; color:#336; }
h1 a:hover {text-decoration:none; color:#119; }
h1,h2,h3,h4 {font-family: "Open sans", sans-serif; color:#336; font-weight:600; line-height:1.4em;}
h2, h3, h4 {font-size:2.6em; margin:0 0 10px;}
h3 {font-size:1.8em; margin:0 0 20px;}
h4 {font-size:1.3em; }


/* Main layout container */
#layout {margin:0px auto 0; width:960px; background:#eee; }
article { margin:10px 0 50px; border-bottom:1px solid #aaa; background:#f1f1f1;}
/* Footer */
#footer { margin-bottom:10px;}
#footer .col {color:#555; border-top:2px solid #777; padding:20px 0;}
#footer p {text-align:center;}
#footer a {color:#555; font-weight:400; text-decoration:none; border-bottom:1px dotted #333;}
#footer a:hover {color:#aaa; text-decoration:none; border-bottom:1px dotted #888;}

/* Grid classes, fixed width, 960px with 12 columns */
.col {float:left; margin:0 10px; overflow:hidden; float:left; display:inline;}
.col img {max-width:100%; height:auto;}
.row {width:960px; margin:20px auto 0; overflow:hidden;}
.row .row {margin:0 -10px; width:auto;	display:inline-block;}
.c1 {width:60px;}
.c2 {width:140px;}
.c3 {width:220px;}
.c4 {width:300px;}
.c5 {width:380px;}
.c6 {width:460px;}
.c7 {width:540px;}
.c8 {width:620px;}
.c9 {width:700px;}
.c10 {width:780px;}
.c11 {width:860px;}
.c12 {width:940px;}


/* Menu list styles */
ul.menu {list-style:none; margin:0; padding:10px 0; border-top:1px solid #333;}
ul.menu li {list-style:none; text-align:center; font-size:1.2em; margin:0 0 10px; padding:0 0 8px 0; color:#888; border-bottom:1px solid #333;}
ul.menu li a {font-size:1.2em; font-weight:400;}
ul.menu li a:hover {color:#eee; text-decoration:none;}

/* Additional text classes */
.slogan {xfont-size:1.4em; margin-left:20px; }
.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}
.nomargin {margin:0; padding:0;}

.larger {font-size:1.2em;}
.smaller {font-size:0.8em;}
.credits {font-size:0.8em; color:#777; text-align:right;}
.spacer {margin:0 20px;}
.left {float:left; padding-right:10px;}
.right {float:right; padding-left:10px;}

.clear {clear:both;}
.social { float:right; padding-top:0.4em; xbackground:#333;}
.line { border-top:1px solid #555;}
.hide {display:none;}
.border {border:1px solid red;}
body .navmenu a {font-size:1.4em;}

.left { float:left; padding-right:10px;}
.right { float:right; padding-left:10px;}
.navmenu a {font-size:1.2em; margin: 0 20px 0 0;}

div.thumbnails img {width:160px; margin:0 10px 10px 0; border-radius:5px; opacity: 0.8;}
div.thumbnails img.last {margin-right:0;}
.thumbnails img:hover {opacity: 0.95;}
.headerimage img {border-radius:8px;}
/* some special tags */
	.go-top {
		position: fixed; bottom: 2em; right: 2em;
		text-decoration: none;	color: #999;
		background-color: #eee;
		font-size: 1.0em;
		padding: 10px;
		display: none;}	
	a.go-top:hover {	background-color:#ddd; color:#222;}
	p.zitat {font-style:italic; background:url(quote.png) left no-repeat;	
	          padding-left:80px; padding-right:40px; color:#777; margin-right:30px;}
	/*
	p.zitat::first-letter {
    font-size: 3.0em;  color: #119;	padding-right:5px; float:left;}
	*/
	p.tags {font-style:italic; color:#559; font-size:0.9em; line-height:1.0em; text-align:right;}		  

@media only screen and (max-width : 960px){

#layout {width:auto; min-width:400px; margin:0 10px; padding:20px; background:#ddd; }
article {padding:1%; }
.row {width:100%; margin-top: 0px;}
.col {margin:0 0 10px 0;}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {width:100%;}
h1 { font-size:2.8em; xmargin:-15px auto 5px; line-height:1.4em;}
h2 { font-size:2.0em;}
h3 { font-size:1.6em;}
body .navmenu {margin:0px 0 -15px;}
body .navmenu a {font-size:1.0em; display:inline-block; line-height:1.2em;
                 padding:3px 5px; margin:0 5px 8px 0; 
                  xbackground-color:#eee; xborder:1px solid #ddd; xborder-radius:4px;}
body .navmenu a.current {border-color:#dcc;}

.headerimage img {width:100%; height:auto;}
div.thumbnails img {width:24%; margin:0;}
div.thumbnails img.last {margin-right:0;}
.social { float:right; xpadding-top:0.2em; margin-top:-120px;}
.credits {font-size:0.8em; text-align:left;}
}
