/* Copyright (c) 2014, Peter Ljung <ljung.peter@gmail.com>
   
   Permission to use, copy, modify, and/or distribute this software for any
   purpose with or without fee is hereby granted, provided that the above
   copyright notice and this permission notice appear in all copies.
   
   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
   WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
   MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
   ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
   WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
   ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
   OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. */

/* General */
body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 80%;
}
div.clear { clear: both; }
div.twocols div.col {
  float: left;
}

/* Links */
a:link, a:visited {
	text-decoration: none;
	color: RoyalBlue;
  font-style: italic;
}

/* Header */
div.header {
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  background: SlateGray;
  padding-left: 2em;
  color: white; 
}
div.header a:link, div.header a:visited { color: #ddd; }
div.header a.project:link, div.header a.project:visited { color: White; }
div.header a { font-style: normal; }
div.header a.home {
  padding: 5px 0px 5px 48px;
  background: url('/images/todo_icon.png') no-repeat center left;
}

/* Contents */
div.contents { 
  margin: 2em;
}
div.contents {
  padding-bottom: 5em;
}

/* Footer */
div.footer {
  position:fixed;
  bottom:0;
  width: 100%;
}
div.footer div.container {
  background: WhiteSmoke;
  padding: 2em; 
}

/* Banner */
div.banner {
  position:fixed;
  bottom:1em;
  right:2em;
}

/* Message */
p.message { 
  margin: 1em;
}

/* Action Links */
ul.action {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.action li {
  text-decoration: none;
  display: inline;
  margin-left: 2em;
}
ul.action li a:link, ul.action li a:visited { color: Black; }
div.footer a { font-style: normal; }
li.space { margin-left: 1em; }

/* Help */
#help img { 
  padding: 1em;
  box-shadow: 0 0 0.3em SlateGray;
}

/* Todomodo Specific */
textarea.narrow { width: 25%; }
textarea.wide { width: 50%; }
textarea.huge { width: 95%; }
p.submit { 
   margin-top: 1em;
   margin-bottom: 2em;
 }
div.task { margin: 0.75em; }
div.project { 
  font-size: 110%;
  margin-top: 1em;
}
div.list { margin-top: 1.5em; }
div#search { margin-top: 1em; margin-bottom:1em; }
div#completed, #completed input { color: gray; }
div.note { 
  margin-left:2em;
  color: gray;
  display:none;
}
span.has_note { 
  padding-right: 1.5em;
  background: url('/images/postit_icon.png') no-repeat center right;
}
span.timed { 
  padding-right: 1.5em;
  background: url('/images/postit_icon_timed.png') no-repeat center right;
}
a.share_link { 
  margin-left: 0.5em;
  padding-left: 1.5em;
  background: url('/images/settings.png') no-repeat center left;
}
a#signInButton { 
  padding: 0.5em 1em 0.5em 1em;
  color: White;
  background: SlateGray;
}
div.infobox {
  max-width: 40em;
  background: WhiteSmoke;
  padding: 0.5em 2em 0.5em 2em;
}
div.infobox#email {
  background: LemonChiffon;
}
div#email code { margin-left: 2em; }
div.message {
  background: Gold;
  padding: 0.5em 2em 0.5em 2em;
}
a#login, a#logout { font-weight: bold; }
div#help { max-width: 60em; }
p.field_note {
  float: right;
  color: Gray;
  margin: 0;
  margin-right: 6em;
}
p.no_top_margin { margin-top: 0; }

.rspace { margin-right: 1em; }
span.atom { 
  display: inline-block;
  white-space: nowrap;
}

/* Responsive */
@media screen and (max-width: 35.5em) {
  div.contents { margin: 0.5em; }
  ul.action li.optional { display: none; }
  .optional { display: none; }
  p.field_note { margin-right: 2em; }
  #help img {
    max-width: 100%;
    padding:0;
  }
}

/* Landing */
#landing {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; 
  margin-bottom: 5em;
}
#landing h1 { 
  font-size: 160%;
  margin-top: 2em;
} 
#landing h2 { font-size: 140%; } 
p.tip { 
  color: gray;
  font-style: italic;
}
.slogan {
  position: absolute;
  border:  0px;
  margin:0px;
  top: 3em;
  right: 12em;
}
#try { 
  position: absolute;
  top: 100px;
  right: 7%;
}
#try a:link, #try a:visited { color: black; }
#try a {
  background-color: #ffcc00;
  border-radius: 5px;
  font-size: 140%;
  padding: 0.75em 1em 0.5em 1em;
  margin-left: 1em;
}
#try img {
  display: block;
  margin-top: 1em;
  margin-left: 3.5em;
}
#try p {
  font-size: 75%;
  max-width: 25em;
  text-align: center;
}
#pwlogin { 
  position: absolute;
  top: 27px;
  right: 30px;
}
#pwlogin a:link, #pwlogin a:visited { color: black; }
#pwlogin a {
  background-color: lightgray;
  border-radius: 5px;
  font-size: 110%;
  padding: 0.55em 1em 0.35em 1em;
  margin-left: 1em;
}
div.widetext { max-width: 35em; }
div#inception div.imgtext { 
  margin-left: 1em;
  margin-top: 3em; 
  width: 25em;
}
#working div.twocols { margin-top: 2em; }
#working div.imgtext { 
  margin-left: 1em;
  margin-top: 2em;
  width: 25em;
}
#landing .screenshot img, #landing .picture img { max-width: 100%; }

/* Responsive - Landing */
@media screen and (max-width: 800px) {
  #landing { margin-top: 200px; }
  #try { left: 7%; }
  .slogan { display: none; }
}
@media screen and (max-width: 830px) {
  #landing { 
    margin-left: 0.5em;
    margin-right: 0.5em;
  }
}
@media screen and (max-width: 530px) {
  #landing div#inception div.imgtext { margin-top: 0; }
  #landing div#working div.imgtext { margin-top: 0; }
}
@media screen and (max-width: 630px) {
  #landing div#organization div.img { margin-left: 2em; }
  #landing div#penandpaper div.img { margin-left: 2em; }
}

/* Tag styling */
div.green .title, div.ongoing .title { color: green; }
div.violet .title { color: darkviolet; }
div.gray .title, div.later .title { color: gray; }
div.orange .title { color: darkorange; }
div.red .title, div.prio .title { color: red; }