/*
  * Gridless version 2.0.0
  * Selectors beggining with an underscore (_selector:property) target only IE6
  * Selectors beggining with an asterisk (*selector:property) target only IE6 and IE7
*/

/* HTML5 elements display
---------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Nunito:700,400,300);

/* Corrects block display not defined in IE6/7/8 and FF3 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, dialog {
  display:block;
  }

/*
  * Corrects inline-block not defined in IE6/7/8 and FF3 
  * Known limitation:'audio[controls]' won't work in IE6;
*/
audio[controls], canvas, video {
  display:inline-block;
  *display:inline;
  *zoom:1;
  }

/*
  * Addresses styling not present IE6/7/8/9, FF3, S4
  * Ensures content is hidden from all presentations, including screenreaders
*/
[hidden] {
  display:none;
  visibility:hidden;
  }

/* Base structure
---------------------------------------- */

/*
  * The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)
  * To add a background to the PAGE, set it in the 'html' element
  * To add a background to the WRAPPER, set it in the 'body' element
*/

html {
  /*background:#F7F8F9;*/
  font-size:100%;
  height:100%;
  overflow-y:scroll; /* Force a scrollbar in non-IE */
  -webkit-text-size-adjust:100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
  -ms-text-size-adjust:100%;
  }

body {
  background:#fff;
  border-radius: 0 0 1em 1em;
    -moz-border-radius: 0 0 1em 1em;
    -webkit-border-radius: 0 0 1em 1em;
  margin:0 auto;
  max-width:700px;
  min-height:100%;
  padding:2em 2% 0;
  width:98%;
  }

body:before {
  background-color:#6690B7;
  content:"";
  height:4px;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  }

/* Fonts settings based on the 100E2R standard:http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
  color:#333;
/*  font:0.8em/1.625 "lucida grande",tahoma,verdana,arial,sans-serif;*/
  font:0.8em/1.625 'Nunito',sans-serif;
  }

p, blockquote, pre, hr, code, ol, ul, form, table, menu, h4, h5, h6, img, button, hr, header {
  margin:0 0 1.625em;
  }

/* Headings/small
---------------------------------------- */

/*
  * Font sizes are based on the golden ratio of 16
  * See this for the modular scale:ow.ly/5jGl6
  * Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across elements 
*/

h1, h2, h3, h4, h5, h6 {
  font-size:1em;
  /*font-weight:bold;*/
  letter-spacing:-.02em;
  word-spacing:-.03em;
  }

h1 {
/*  font-size:4.25em; /* 68px */
  font-size:3em;
  font-weight:300;
  line-height:1.25em;
  margin:0 0 0 0;
  }

h2 {
/*  font-size:2.625em; /* 42px */
  font-size:1.625em;
  font-weight:400;
  line-height:1.25em;
  margin:0 0 0.619em;
  }

h3 {
  /*font-size:1.625em; /* 26px */
  font-size:1.225em;
  line-height:1em;
  margin:0 0 1em;
  }

small, footer {
  font-size:0.75em; /* 10px */
  margin:0 0 2.6em;
  }

/* Preformatted text and code */
pre {
  white-space:pre;
  white-space:pre-wrap;
  word-wrap:break-word;
  margin-left:3em;
  margin-right:3em;
  }

pre, code, kbd, samp, textarea {
  font:1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
  }
  
code {
  background:#F7F8F9;
  padding-left:0.25em;
  padding-right:0.25em;
  }

/* Tables */

table {
  border-collapse:collapse;
  border-spacing:0;
  }

th {
  text-align:left;
  }

tr, th, td {
  padding-right:1.625em;
  }

/* Forms*/

form {
  margin:0;
  }

fieldset {
  border:0;
  padding:0;
  }

textarea {
  background-color:#FFFFED;
  margin-bottom:1.65em;
  overflow:auto;
  padding:0.25em 0 0 0.25em;
  vertical-align:top;
  width:98%;
  }

legend {
  *margin-left:-7px;
  }

button, input, select, textarea {
  vertical-align:baseline;
  *vertical-align:middle;
  }

button, input {
  line-height:normal;
  *overflow:visible;
  }

button:active {
  position:relative;
  top:2px;
  }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor:pointer;
  -webkit-appearance:button;
  }

input[type="checkbox"], input[type="radio"] {
  box-sizing:border-box;
  }

input[type="search"] {
  -webkit-appearance:textfield;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  box-sizing:content-box;
  }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance:none;
  }

button::-moz-focus-inner, input::-moz-focus-inner {
  border:0;
  padding:0;
  }

/* Quotes */

blockquote, q {
  quotes:none;
  }

blockquote:before, blockquote:after, q:before, q:after {
  content:'';
  content:none;
  }

blockquote, q, cite {
  font-style:italic;
  }

blockquote {
  border-left:1px solid #ddd;
  padding-left:1.625em;
  }

blockquote > p {
  padding:0;
  }

/* Lists */

ul, ol {
  list-style-position:inside;
  padding:0;
  }

li ul, li ol {
  margin:0 1.625em;
  }

/* Links */

a, a:visited {
  color:#3B5998;
  text-decoration:none;
  }

a:hover {
  text-decoration:underline;
  }

a:focus {
  outline:thin dotted;
  }

a:hover, a:active {
  outline:none;
  }


/* Embedded content  */

img, object, video {
  max-width:100%; /* Consider this first:unstoppablerobotninja.com/entry/fluid-images/ */
  /* _width:100%; /* Uncomment this:IE6 doesn't support max-width, so we use width:100% for it. If the image/video is smaller than the container, change 100% to an absolute value */
}

/*
  * 1. Removes border when inside 'a' element in IE6/7/8/9
  * 2. Improve IE's resizing of images:css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
img {
  border:0;
  -ms-interpolation-mode:bicubic;
  }

/* Others */

hr {
  border:0;
  border-bottom:1px solid #efefef;
  display:block;
  height:1px;
  }

b {
  font-weight:bold;
  }

/* Helper classes 
  * Micro clearfix hack, more semantically titled with 'group'
  * Source:nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
  content:"";
  display:table;
  }

.group:after {
  clear:both;
  }

.group {
  *zoom:1;
  }

/* Primary styles
---------------------------------------- */

main {
  min-height:300px;
  }

#main_nav {
  background-color:#EFF2F4;
  border:1px solid #EFF2F4;
  border-left:0;
  border-right:0;
  border-radius:0.5em;
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
  }
  
#main_nav .menu {
  margin:0.425em 0;
  }
  
.menu li {
  list-style:none;
  margin-left:0.8em;
  margin-right:0.8em;
  }

.button {
  background: #6690B7; /* Old browsers */
    background: -moz-linear-gradient(top, #6690B7 0%, #3B5998 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6690B7), color-stop(100%,#3B5998)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6690B7 0%,#3B5998 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6690B7 0%,#3B5998 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6690B7 0%,#3B5998 100%); /* IE10+ */
    background: linear-gradient(top, #6690B7 0%,#3B5998 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6690B7', endColorstr='#3B5998',GradientType=0 ); /* IE6-9 */
  border-radius:1em;
    -moz-border-radius:1em;
    -webkit-border-radius:1em;
  color:#fff;
  display:block;
  font-size:0.8em;
  margin:0 0 2.625em;
  padding:1em 0;
  text-align:center;
  width:70%;
  }
  
.button .action {
  color:#fff;
  font-size:2em;
  line-height:1em;
  text-shadow:0 -1px 2px #15436B;
  }
  
.button .ico_google {
  color:#fff;
  }

.button:hover {
  background:#000;
  text-decoration:none;
  }

#features {
  margin-top: 60px;
  }

#features ul {
  margin-top:10px;
  font-size:1.12em;
  line-height:1.625em;
  }

#features a {
  margin-top:10px;
  }

#features p {
  margin-top:1.225em;
  }
/*
#demo {
  -webkit-perspective: 500;
  -webkit-transform-style: preserve-3d;
  -webkit-transition-property: perspective;
  -webkit-transition-duration: 0.5s;
  }
*/
#demo {
  margin-top: -30px;
  margin-bottom: 100px;
  }

#demo img {
  max-width:100%;
/*  -webkit-transform: rotateY(30deg);*/
  }

  
#bitpixels {
  float:left;
  padding-bottom:25px;
  }
  
table.list {
  border-right:1px solid #efefef;
  margin-left:2%;
  margin-right:2%;
  width:96%;
  }
  
table.list th,
table.list td {
  border-left:1px solid #efefef;
  padding-left:1%;
  padding-right:1%;
  }
  
table.list th {
  border-bottom:1px solid #efefef;
  }
  
table.list tr.odd td {
  background-color:#fcfcfc;
  }


/* Media queries
---------------------------------------- */

@media only screen and (min-width:480px) {
  body {
    width:90%;
    }
    
  #main_nav li,
  #credits li,
  #products li {
    display:inline;
    }
}

@media only screen and (min-width:768px) { 
  body {
    width:60%;
    }
}


@media only screen and (min-width:1024px) { 
  body {
    width:90%;
    }

  #intro, #login, #demo, #features, #awards {
    float:left;
    width:45%;
    /*margin-left:2.5%;*/
    /*margin-right:2.5%;*/
    margin-left:0;
    margin-right:0;
    }
  
  #intro, #features {
    width:50%;
    margin-bottom:40px;
    }
    
  #login, #demo, #awards {
    clear:right;
    float:right;
    margin-left:5%;
    margin-right:0;
    }
    
  #credits, #products {
    color:#666;
    clear:right;
    float:left;
    }
    
  #credits .menu,
  #products .menu {
    margin-bottom:0;
    }

}

/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
  * {
    background:transparent !important;
    color:black !important; /* Black prints faster:sanbeiji.com/archives/953 */
    text-shadow:none !important;
    filter:none !important;
    -ms-filter:none !important;
  }

  a, a:visited {
    text-decoration:underline;
  }

  a[href]:after {
    content:" (" attr(href) ")";
  }

  abbr[title]:after {
    content:" (" attr(title) ")";
  }

  /* Do not show javascript and internal links */
  a[href^="javascript:"]:after, a[href^="#"]:after {
    content:""; 
  }

  /* Printing Tables:css-discuss.incutio.com/wiki/Printing_Tables */
  thead {
    display:table-header-group;
  }

  tr, img {
    page-break-inside:avoid;
  }

  @page {
    margin:0.5cm;
  }

  p, h2, h3 {
    orphans:3;
    widows:3;
  }

  h2, h3 {
    page-break-after:avoid;
  }
}