/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media handheld {
    body {
    }
}


/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

body {
    background-color: #f2c84b;
}

header {
    background-color: #cc0000;
    background-color: #f24405;
    padding: 1%;
    border-bottom: 1px solid black;
    border-bottom: 1px solid #d91604;
    color: white;
}
header > h1 > a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

header > h2 {
/*    border-top: 1px solid white;*/
}

#story-list {
    background-color: #f2c84b;
}

#story-list > .story > a, .feed > a {
    text-decoration: none;
    font-weight: bold;
    margin-top: 0;
}
#story-list > .story > p {
    font-size: .75em;
}

#story-list > .story > .read {
    color: #CC3333;
    color: #023859;
}
#story-list > .story > .unread, .feed > a {
    color: #CC0000;
    color: #0396a6;
/*    color: #A8A8EE;*/
}

#story-list > .story, .feed {
    padding: .5%;
    border-top: 1px solid black;
    border-top: 1px solid #d91604;
    margin-top: .33%;
}

span.ps, span.nt, span.ng {
    padding: .05em;
    border-radius: 5px;
}
span.ps {
    background-color: #35C030;
}
span.nt {
    background-color: yellow;
}
span.ng {
    background-color: red;
}

footer {
    background-color: #cc0000;
    background-color: #f24405;
    padding: 1%;
    border-top: 1px solid black;
    border-top: 1px solid #d91604;
    color: white;
}
footer > a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

{{extend 'layout.html'}}

{{ block header_bonus }}
    <h2>{{= feed["feed_title"] }}</h2>
    <a href="{{= URL("mark_read", args=[feed["id"]]) }}" class="button">Mark feed as read</a>
{{ end }}

<section id="story-list">
{{
import time 
s = time.time()
}}
    {{ 
    {{ for story in stories: 
        for story in stories: 
        if sum([v for k,v in story["intelligence"].iteritems()]) < threshold:
            continue
    }}

        {{ print story["read_status"] }}
        <div class="story">
            <a href="{{= URL(c="stories", f="view", vars=dict(story=story["id"], feed_id=feed["id"])) }}" class="{{= "unread" if story["read_status"] == 0 else "read" }}">

    
    <!--  Mobile Viewport Fix
	  j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag 
	  device-width: Occupy full width of the screen in its current orientation
	  initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
	  maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
      -->
    <meta name="viewport" content="width=device-width, initial-scale=2, minimum-scale=2, maximum-scale=5.0">
    <meta name="viewport">
    
    <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="{{=URL('static','favicon.ico')}}" type="image/x-icon">
    <link rel="apple-touch-icon" href="{{=URL('static','favicon.png')}}">

    <!-- For the less-enabled mobile browsers like Opera Mini -->
    <link rel="stylesheet" media="handheld" href="{{=URL('static','css/handheld.css')}}">

    if left_sidebar_enabled: left_sidebar_style = 'style="display: block;"'
    else: left_sidebar_style = 'style="display: none;"'
    if right_sidebar_enabled: right_sidebar_style = 'style="display: block;"'
    else: right_sidebar_style = 'style="display: none;"'
    style_content = 'style="width: %s"' % width_content
    }}
<!--    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">-->
    <link rel="stylesheet" href="{{= URL("static", "css/1140.css") }}">
  </head>
  
  <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->	
  <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
  <!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
    
    <div class="flash">{{=response.flash or ''}}</div> <!-- notification div -->
    
	<header>
	  {{block header}} <!-- this is default header -->
          <h1><a href="{{= URL("mobileblur", "default", "index") }}">MobileBlur</a></h1>
	  {{end}}
      {{ block header_bonus }}{{end}}
	</header>
	
    <section id="content" {{=XML(style_content)}} >
    <section id="content" class-"container" {{=XML(style_content)}} >
        {{include}}	
    </section>

    <footer>
        <a href="{{= URL("default", "logout") }}">Log out</a>
    </footer>