/* -*- coding: utf-8 -*-
 * Copyright (C) 2011 Grégoire Détrez, Patrik Willard
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 * 
 * should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/* VERTICAL RYTHM: all vertical space should be a multiple of 1.25em */

/* ***************************************************************************
 * Main Layout
 * This defines the main structure of the layout, applied to every pages.
 */

/* By default, we put one blank between the header and the content.
 * But for bigger screen, it is safer to have more.
 */
#main { margin-top: 1.25em; /* 1 line1 of space before the content */ }

@media screen and (min-width: 500px) {
  #main { margin-top: 2.5em; /* 2 lines of space before the content */ }
}

/* and no margin for full screen #main */
#main.fullscreen {
  margin-top: 0;
}
.wrapper {
  margin:0 auto 0;
  /* Limiting width helps avoids too long lines on big screens */
  max-width:50em;
  padding: 0 1em;
}

.fullscreen {
  margin:0;
  max-width: none;
  padding:0;
  width:100%;
}

article, aside, canvas, details,
figure, footer, header,
hgroup, nav, section, summary, video {
  display: block;
}

/* ***************************************************************************
 * Header
 * Style and layout
 */
.header {
  background: #1a1a1a url("line.png") repeat-x top left;
  color: #f5f5f5;
  margin: 0;
  padding:1em 0;
}

/* clearing after the header */
.header:after {
  clear:both; content: "."; height:0; visibility:hidden; display:block;}

.header h1 {
  display:inline;
  font-size: 2em;    /* 32px */
  line-height:1.25em; /* 40px */
  margin:0;
  padding:0;
}

.header h1 a {
  color: #f5f5f5;
  text-decoration: none;
}

/* Logo */
.header img {
  height: 40px;
  vertical-align: top;
}

/** header navigation */
.header .navigation {
  display: block;
  list-style-type:none;
  margin:0 auto;
  padding:0;
  width:198px;
}

/* By default, the navigation is centered under the title.
 * For screen bigger than 500px we can push it in the right top corner.
 */
@media screen and (min-width: 500px) {
  .header .navigation { float:right; }
}


.header .navigation a {
  background-position: center;
  background-repeat:no-repeat;
  display:block;
  float:left;
  height:32px;
  margin:0 10px;
}

/* We replace the menu texts by icons.*/
.header .navigation a span { display:none; }
#nav_schedule {
  background-image: url("ic_schedule_24.png");
  width: 24px;}
#nav_manifesto {
  background-image: url("ic_manifesto_24.png");
  width: 36px;}
#nav_map {
  background-image: url("ic_map_24.png");
  width: 32px;}
#nav_notifications {
  background-image: url("ic_notification_24.png");
  width: 26px;}

/* ***************************************************************************
 * Footer
 * Style and layout
 */
#footer {
  /* Limiting width helps avoids too long lines on big screens */
  padding: 0 1em;
}

#footer {
  background: #f3f3f3;
  margin: 2.5em auto 0;
  padding: 1.25em 0;
}

#footer ul {
  display: block;
  margin: 0 auto;
  max-width: 50em;
}

#footer ul li {
  display: inline-block;
  font-size: .75em;
  list-style-type: none;
  margin-left: 2em
}

#footer ul li a {
  color: #666;
  text-decoration: none;
}

/* ***************************************************************************
 * LIST VIEW
 *
 * The list view is a very common UI element of mobile apps
 * here we try to create the same effet in css.
 *
 * ListView should be used for list of clickable items.
 * examples include the main menu, the staff list, restaurants...
 *
 * It can be either a <navigation> or an <ul> element
 *
 * Be aware that margin, padding and dimension are calculated to
 * agree with the typographic grid of 20px. */
ul.listview,
navigation.listview {
  list-style-type: none;
  margin: 30px 0 30px 0 !important;
  padding: 0;
}

.listview li {
  display:inline;
  list-style-type:none;
  margin:0;
  padding:0;
}

.listview a {
  border-bottom: thin #ececec solid;
  border-top: thin #ececec solid;
  color: inherit;
  display:block;
  margin: -1px 0 0;
  padding-bottom: 9px;
  padding-top:10px;
  text-decoration:none;
}

/* in case the screen is bigger than 500px, we split listviews
 * in 2 columns */
@media screen and (min-width: 500px) {
  .listview:after {
    clear:left;
    content: ".";
    display:block;
    height:0;
    visibility:hidden;
}

  /* We use li here to be the floating element
   * because a may have padding and you should't give 
   * Width and padding to the same element */
  .listview li { 
    float: left;
    margin-right: 5%;
    width: 45%;
  }
}


/* in case the screen is bigger than 750px, we split listviews
 * in 3 columns
 */
@media screen and (min-width: 750px) {
  /* We use li here to be the floating element
   * because <a/> may have padding and you should't give 
   * Width and padding to the same element */
  .listview li { 
    float: left;
    margin-right: 3%;
    width: 30%;
  }
}

/* A special case of listview is a clickable menu with 32x32 icons.
 * For this we add hover and space the icons.
 * the actual icon is better specified in a style attribute on the element
 * itself.
 /* **** Main menu **** */
.listview.menu a {
  background-position: 9px center;
  background-repeat: no-repeat;
  padding-left: 50px;
}

.listview.menu a:hover { background-color: #f8f8f8;}
.listview.menu a:hover:after { float:right; content: "»"; margin-right:5px;}

/* ***************************************************************************
 * Home Screen Menu
 *
 * This is where the icons on the home page are defined.
 * The first component of background position is computed like this:
 *  position = (50 - icon_width) / 2
 */

#main-navigation a {
  background-repeat: no-repeat;
  padding-left: 60px;}
#index_schedule {
  background-image: url("ic_schedule_black.png");
  background-position: 13px center;
  padding-left: 50px;}
#index_profile {
  background-image: url("ic_profile_black.png");
  background-position: 14px center;
  padding-left: 50px;}
#index_manifesto {
  background-image: url("ic_manifesto_black.png");
  background-position: 7px center;}
#index_information {
  background-image: url("ic_information_24.png");
  background-position: 13px center;
  padding-left: 50px;
  font-size: 0.8em;}
#index_map {
  background-image: url("ic_map_black.png");
  background-position: 9px center;
  padding-left: 50px;}
#index_restaurant {
  background-image: url("ic_restaurant_black.png");
  background-position: 8.5px center;
  padding-left: 50px;}
#index_notifications { 
  background-image: url("ic_notifications_black.png");
  background-position: 12px center;
  padding-left: 50px;}
#index_staff {
  background-image: url("ic_staff_black.png");
  background-position: 1.5px center;
  padding-left: 50px;}
#index_cfp {
  background-image: url("ic_cfp_black.png");
  background-position: 9px center;}
#index_registration {
  background-image: url("ic_registration_black.png");
  background-position: 9px center;}
#index_help {
  background-image: url("ic_help_black.png");
  background-position: 8px center;}
#index_blog {
  background-image: url("ic_blog_black.png");
  background-position: 7px center;}
#index_sponsors {
  background-image: url("ic_sponsors_black.png");
  background-position: 9px center;}
#main-navigation a:hover { background-color: #f8f8f8;}
#main-navigation a:hover:after { float:right; content: "»"; margin-right:5px;}

/* ***************************************************************************
 * Other special styles
 */

/* Style for bus/ferry line numbers */
.line_number {
  background-color: #003273;
  color: #FFFFFF;
  display:inline-block;
  font-weight: bold;
  text-align: center;
  width: 2.5em;
}

/* Footnotes */
a.footnote { text-decoration: none;}
p.footnote { color:grey; font-style: italic; }

/* Information boxes */
.infobox {
  background: none repeat scroll 0 0 #EEEEFF;
  border: thin solid #000099;
  margin: -0.75em 0 .75;
  padding: .75em 1.5em;
}

@media screen and (min-width: 500px) {
  .infobox { margin: -0.75em 0 0.75em 1.25em; float:right; width:15em;}
}

/* Figures */
figure {
  border: thin black solid;
  display:block;
  margin: 0px auto 17px;
  padding: 1.25em;
  text-align: center;
}
figure img {
  display: block;
  margin: 0 auto 1.25em;
  max-width:100%;
}

figcaption {
  display:block;
  margin:0 auto;
  max-width:20em;
}

/* By default, figures are placed between paragraphs.
 * For screen bigger than 750px we can push them in the right.
 */
@media screen and (min-width: 750px) {
  figure {
    float:right;
    margin-left:20px;
  }
}

h3 { clear: both;}

.message {
  background: #FDEB9B;
  border: thin solid #FCD116;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  padding: 9px 8px;
}

.icon {
  background: #F1F1F1;
  border: 1px solid #E5E5E5;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  margin-top: -2px; /* Compensate for the borer width */
  margin-left:auto;
  margin-right:auto;
  padding: 20px 20px 20px 60px ;
}

.icon:before {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, .6);
  display: inline-block;
  float: left;
  font-size: 3em;
  position: relative;
  top: 30px;
  left: -49px;
}

.icon.paypal_processing:before { content: "⌛"; }
.icon.paypal_complete:before { content: "✔"; }

.sponsor {
  background: #F1F1F1;
  border: 1px solid #D9D9D9;
  display:inline;
}
.sponsor img { max-width: 90% }

@media screen and (min-width: 500px) {
  .sponsor:after {
    clear:left;
    content: ".";
    display:block;
    height:0;
    visibility:hidden;
  }

  .sponsor { 
    text-align: center;
    float: left;
    margin-right: 5%;
    width: 45%;
  }
}


@media screen and (min-width: 750px) {
  .sponsor { 
    float: left;
    margin-right: 3%;
    width: 30%;
  }
}

.sponsor h4 a {
  color: gray
}

#sponsors:after {
    clear:left;
    content: ".";
    display:block;
    height:0;
    visibility:hidden;
  }