/*
Theme Name: spy_
Theme URI: http://spyline.de
Description: the reimagined spy_ theme
Author: Jan Hendrik Weiss – http://imin.de
Version: 0.94 - 03/2014 (slightly responsive)
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}


/* BASICS ++++++++++++++++++++++++ */

body { background: #fff; font-family: 'Lato', 'Open Sans', Arial, Helvetica, sans-serif; font-size: small; color: #444; border-top: 4px solid #393939;}

#header { display: block; width: 900px; margin: 0 auto;}

#page { display: block; margin: 0px auto;}

#footer { display: block; clear: both; background: url('img/black_linen_v2.jpg'); border-top: 1px solid #000; }

.thumbnail { -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.25); -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.25); box-shadow: 0px 0px 4px rgba(0,0,0,0.25);}

a {text-decoration: none; outline: none;}
.clear { clear: both;}


/* HEADER ++++++++++++++++++++++++ */

#header p { display: block; width: 900px; margin: 35px auto 0 auto;}
a#logo { display:block; width: 70px; height: 70px; background: url('img/logo-red.png') no-repeat; opacity: 1.0; float: left;}

#header h1 { display: none;}

#eyebrow-pre { display: block; float: right; width: 210px; padding: 9px 0 0 0; color: #777; font-family: Arial, sans-serif; font-size: 10px;}
#eyebrow-pre b {padding: 0px 2px; border: 1px solid #444; color: #777;}
#eyebrow { display: block; height: 30px; background: url('img/black_linen_v2.jpg'); border-bottom: 1px solid #222;}
#eyebrow a { display: block; float: right; margin-right: 15px; color: #999; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold; text-transform: uppercase; padding: 7px 5px 5px 10px; } 
#eyebrow a:hover {color: #eee;}


#nav { display: block; float: right; margin: 0 0 4px 0; padding-top: 52px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
#nav a { color: #aaa; float: right; margin: 0 2px 0 23px; font-weight: bold; }
#nav a:hover, #nav a.on { color: #222;}
#nav a.on {border-bottom: 2px solid #e52424;}


/* POSTS ++++++++++++++++++++++++ */

.post { display: block; clear: both; padding: 40px 0; background: #fff; border-bottom: 1px solid #e4e4e4;}
.post.evenItem { background: #f7f6f5; background: url('img/paper_2.png'); border-bottom: 1px solid #eee;}

.entry { display: block; width: 900px; margin: 0 auto;}

.thumbnail { display: block; width: 900px; height: 506px; background: #000; background: url('img/raster.jpg'); overflow: hidden;}
.thumbnail img { width: 900px; height: 506px;}
.thumbnail img:hover { border-color: #e4e4e4;}

.entry .description { display: block; width: 680px; margin: 0px auto; padding: 25px 2px 10px 2px; font-size: 14px; line-height: 1.6em; font-weight: 400; }

.description p {display: block; clear: both; width: 568px; margin: 0 10px 10px 0; padding: 8px 20px 10px 2px; float: left;}


.description p em { font-style: normal;}
.description .metadata { display: block; width: 276px; padding: 10px 10px 10px 8px; float: left; line-height: 11px; }


/* NEU */
.description p {float: none; width: 640px; margin: 0px auto 10px auto; padding: 0; text-align: justify;}
.description .metadata { width: 640px; padding: 0; float: none; margin: 20px auto; text-align: center;}


.description p a { color: #000; border-bottom: 1px solid #ddd;}
.description p a:hover { text-decoration: none; color: #e52424;}
.description p i {font-size: 11px; color: #777;}

.post .metadata {display: block; clear: both; margin-top: 20px;}

.post .metadata a, .post.evenItem .metadata a { display: inline; margin: 0 3px 4px 0; padding: 3px 5px; background: #f1f1f1 url('img/tag-bg4.jpg') repeat-x; font-size: 10px; line-height: 12px; font-weight: 600; color: #999; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d9d9d9; * font-family: Arial, Helvetica, sans-serif; * font-weight: normal; }
.post.evenItem .metadata a { background: #fff; border: 1px solid #e4e4e4;}
.post .metadata a:hover, .post.evenItem .metadata a:hover {color: #777; border: 1px solid #ababab; background: #f1f1f1 url('img/tag-bg4.jpg') bottom left repeat-x; }
.post.evenItem .metadata a:hover { background: #fff;}

.entry h2 { font-family: 'Lato', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -1px; margin: 0; text-align: center;}
.entry h2 a { color: #444; padding: 0 20px; margin: 0;}
.entry h2 a:hover { color: #777;}

.date, .tags-headline { display: block; width: 640px; margin: 5px 0 0 0; padding-left: 22px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 11px; color: #777; text-align: center; float: none;}
.post.evenItem .date, .post.evenItem .tags-headline {}

.tags-headline { padding: 0 0 0 4px; width: 276px; color: #888; display: none;}
.date a {text-transform: uppercase; color: #555;}
.date a:hover {color: #e52424;}

.post a.more-link, .post.evenItem a.more-link { display: block; clear: both; width: 60px; margin: 10px 0 0 0; padding: 4px 1px; background: #f1f1f1 url('img/tag-bg4.jpg') repeat-x; color: #777; font-size: 10px; line-height: 10px; font-family: 'Open Sans'; font-weight: 600; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ddd; * font-weight: normal; * font-family: Arial, Helvetica, sans-serif;}
.post.evenItem a.more-link {background: #fff; color: #777;}
.post a:hover.more-link, .post.evenItem a:hover.more-link { border: 1px solid #ababab; background: #f1f1f1 url('img/tag-bg4.jpg') bottom left repeat-x;}
.post.evenItem a:hover.more-link {background: #fff;}

.googlead { display: block; height: 110px; margin: 0 auto; padding: 20px; text-align: center; border-bottom: 1px solid #eee;}

#mister-share-a-lot { display: block; width: 896px; margin: 40px auto 0px auto;}
#mister-share-a-lot { opacity: .8;}
#mister-share-a-lot:hover { opacity: 1.0;}

p.quote {display: block; margin-left: 4px; padding: 5px 40px 5px 10px; width: 530px; border-left: 4px solid #ddd; font-family: Georgia, "Times New Roman", Times, serif; color: #555;}

/* FOOTER ++++++++++++++++++++++++ */

#footer .container { display: block; width: 900px; height: 40px; margin: 0 auto; padding: 20px 0; line-height: 1.4em;}

.grid8a, .grid8a2, .grid8b, .grid8c { display: block; float: left; width: 95px; padding-left: 15px; color: #999; font-family: 'Open Sans'; font-size: 11px; border-right: 1px solid #272727; text-transform: uppercase;}
.grid8a2 { border: none;}
.grid8b { width: 90px; float: right;}
.grid8c { width: 96px; float: right; border: none;}
.grid8a a, .grid8a2 a, .grid8b a, .grid8c a { color: #999; font-weight: 600; border-bottom: 1px solid #444; * font-family: Arial, Helvetica, sans-serif; }
.grid8a a:hover, .grid8a2 a:hover, .grid8b a:hover, .grid8c a:hover { color: #eee; border-bottom: 1px solid #eee; }

#end-of-line { display: block; height: 40px; border-top: 1px solid #272727; text-shadow: #000 1px 1px 1px;}
#end-of-line p { display: block; width: 860px; margin: 0 auto; padding: 10px 0 15px 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 11px; color: #777; * font-family: Arial, Helvetica, sans-serif;}
#end-of-line a { color: #777; text-decoration: none;}
#end-of-line a:hover { text-decoration: underline;}
#end-of-line b {padding: 0px 2px; border: 1px solid #555;}

/* PAGENAV ++++++++++++++++++++++++ */

#previouslinks a { display: block; width: 40px; height: 73px; background: #fff url('img/prev-link.gif') 10px 0 no-repeat; position: fixed; top: 45%; left: -15px; z-index:9; text-align: center; padding-top: 3px; border: 0px solid #f4f4f4;}
#nextlinks a { display: block; width: 40px; height: 73px; background: #fff url('img/next-link.gif') no-repeat; position: fixed; top: 45%; right: -15px; z-index:9; text-align: center; padding-top: 3px;}

#previouslinks a:hover {  background: #fff url('img/prev-link.gif') 10px 0 no-repeat;}
#nextlinks a:hover { background: #fff url('img/next-link.gif') no-repeat;}

#previouslinks a, #nextlinks a { -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.15); -khtml-box-shadow: 0px 0px 2px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.15); box-shadow: 0px 0px 2px rgba(0,0,0,0.15);}


/* PAGEBAR ++++++++++++++++++++++++ */

#bottom-nav { display: block; height: 60px; background: #fff; border-bottom: 1px solid #f0e8e4;}
.pagebar { display: block; width: 900px; height: 30px; margin: 30px auto; font-size: 12px; text-align: center;}

.pagebar a, .pageList .this-page, .pagebar a:visited, .pagebar .break, .pagebar .this-page {
	display: inline; margin: 0 2px; padding: 6px 9px;
	background: #fff; color: #888; text-align: center; line-height: 24px;
	-moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px;
	border: 1px solid #e4e4e4; font-weight: 600; background: #f1f1f1 url('img/tag-bg4.jpg') bottom left repeat-x;
}
.pagebar .break { margin-right: 4px; }
.pagebar .this-page, .pagebar a:hover { background: #333; color: #fff; border: 1px solid #444;}

/* Mr. Fancy Pants ++++++++++++++++++++++++ */

.pagebar a, .pagebar a:hover,
#nav a, #nav a:hover,
.grid8a a, .grid8a2 a, .grid8b a, .grid8c a,
.grid8a a:hover, .grid8a2 a:hover, .grid8b a:hover, .grid8c a:hover,
.description p a, .description p a:hover,
.post .metadata a, .post .metadata a:hover
a.finallink, a:hover.finallink,
.entry h2 a, .entry h2 a:hover,
#previouslinks a, #nextlinks a,
#previouslinks a:hover, #nextlinks a:hover
a#twitter-button, a#feed-button, a#facebook-button
{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; }

#previouslinks a:hover { -webkit-transform: translate(10px,0); -moz-transform: translate(10px,0); -o-transform: translate(10px,0);}
#nextlinks a:hover { -webkit-transform: translate(-10px,0); -moz-transform: translate(-10px,0); -o-transform: translate(-10px,0); }

.thumbnail img:hover
{ -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -khtml-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.25); box-shadow: 0px 0px 2px rgba(0,0,0,0.25);}

.thumbnail img:hover { filter: grayscale(50%); -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -ms-filter: grayscale(50%); -o-filter: grayscale(50%);}

a:hover.more-link, .post .metadata a:hover, .post.evenItem .metadata a:hover
{ -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); -khtml-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); box-shadow: 0px 1px 1px rgba(0,0,0,0.15);}


/* Responsive stuff ++++++++++++++++++++++++ */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	/* iPads, Tablets - portrait mode... */
	#header, .entry, .thumbnail, .thumbnail img, #footer .container, #end-of-line, #end-of-line p, .pagebar, #header p, #bottom-nav, .big-container, .big-container .link
	{ width: 700px;}
	
	.entry {overflow: hidden;}
	.entry h2 {margin: 0 auto 8px auto;}
	.googlead {padding: 20px 0; width: 700px; overflow: hidden;}
	.thumbnail, .thumbnail img, .big-container {height: 394px; }
	.description { display: block; width: 540px; margin: 0px auto 30px 0; font-size: 24px;}
	.description p {width: 540px; margin: 0 auto 20px auto; font-size: 16px; line-height: 1.6em;}
	.description .metadata, .date {display: block; clear: both; width: 540px; margin: 0px auto; }
	.metadata {line-height: 42px;}
	.date {padding-right: 12px;}
	.metadata a {float: none;}	
	.pagebar a, .pageList .this-page, .pagebar a:visited, .pagebar .break, .pagebar .this-page {
	display: inline; margin: 0 5px 0 0; padding: 6px 11px;
	color: #888; text-align: center; font-size: 14px; line-height: 24px; 
	border: 1px solid #ddd; font-weight: 700;
	color: #777; border: 1px solid #ababab; background: #f1f1f1 url('img/tag-bg4.jpg') bottom left repeat-x;
	}
	.pagebar .this-page, .pagebar a:hover { background: #333; color: #fff; border: 1px solid #444;}
	
	#previouslinks a, #nextlinks a, .tags-headline,  #footer .container, #eyebrow-pre {display: none;}	
	
	.thumbnail img:hover, .thumbnail img
{ -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -khtml-box-shadow: 0px 0px 0px rgba(0,0,0,0); -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0); box-shadow: 0px 0px 0px rgba(0,0,0,0);}
	.thumbnail {border: 1px solid #ddd; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; background: #ccc;}
	.thumbnail img {border-right: 1px solid #ccc;}
}