/* global layout */
body     {font-family:Lucida,Helvetica,sans-serif; font-size:14px; color:#333; background-color:#fbfbfb; padding:0; margin:0}
#content {margin:0 auto 1em auto; padding: 0; position:relative; max-width:60em;}

@media screen and (min-width:820px) {
  #content        {min-width:800px;}
}
@media screen and (max-width:819px) {
  #content        {min-width:360px;}
  #nav            {min-width:360px;}
  #pagenav        {display:none;}
  div.placeholder {display:none;}
}
@media screen and (max-width:680px) {
  #nav img        {display:none;}
  #nav a          {font-size:120% !important;}
  #pagenav        {display:none;}
  div.placeholder {display:none;}
}

/* banner */
#topbox {margin:3em 0 0 0; padding: 0; background-color:#333; color:#fbfbfb; height:11em; overflow:hidden; text-align:center;}
#topsep {height:0; border-bottom:1px solid #fbfbfb; box-shadow:0 0 2em .4em #fbfbfb; overflow:hidden;}

/* general layout */
#topbox h1 {padding: 1.5em 0 0 0; border:0;}
h1    {text-align:center; padding: .5em 0 0 0; margin:0 2em 1em 2em; border-bottom:1px solid #000;}
h2    {text-align:center; padding: .5em 0 0 0;}
h3    {margin:1.5em 0em .5em 1em;}
p     {margin:.5em 2em; text-align:justify;}
table {margin:.5em 2em;}

.clear    {clear:both;}
.tcenter  {text-align:center;}
.hcenter  {margin-left:auto; margin-right:auto;}
.dense    {line-height:1.25em;}

ul, dl    {margin:.5em 2em;}
dt        {margin:.5em; font-style:italic; font-weight: bold; }
dd        {margin:.5em 0 .5em 2em;}

table, td, tr, th {border:0; border-collapse:collapse;}
tr                {border-bottom:1px solid #444;}
img.xlogo         {width:9.0em; height:9.0em;}
img.screenshot    {max-width:75%; padding:.5em;}
a.anchor          {display:block; position:relative; top:-5.5em; visibility:hidden;}
p.tcenter         {margin-bottom: 1.5em;}
p.newsdate        {font-size:90%; border-bottom:1px solid black; margin: 0 0 .5em 0; text-align:right; color:#888; position:relative; top:-2em;}

/* overall design */
a {color:#2222aa;}
a:hover {color:#333;}
a:active, a:focus {outline:0 none;}
a.box {color:#000; text-decoration:none }
a img {border: 0;}

th a {color: #444; text-decoration:none;}

.red {color: red;}
.tt  {font-family:monospace; color:#224422;}
.ss  {text-decoration: line-through;}

/* navigation menu */
#header     {position:fixed; top:0px; left:0px;
             margin:0; padding:0; width:100%; z-index:100; overflow:hidden;
             background-color: #222;
             border-bottom:1px solid #444;
             box-shadow:0 0 3em .4em #000;
}
#nav        {max-width:60em; margin:0 auto;}
#nav .logo  {margin:.75em 1em 0 0; float:right;}
#nav .link  {padding:0; margin:0; float:left; height:3em}
#nav .link a{text-decoration:none; color:#abb; margin:0; display:inline-block; padding:.25em .6em; font-size:150%;}
#nav .link a:hover {color:#fff;}
#nav .logo img {height: 1.5em;}

/* front-page, cards */
#cardwrapper   {}
#cardholder    {display:block; margin:auto; text-align:center;}
#cardholder a  {}
.card          {overflow: hidden; position:relative;
                height: 15em; width: 10em;
                margin: 2em 1em 0 1em;
                padding: 1em;
                color: #444;
                float:left;
}

@supports (display: inline-block) {
.card          { display:inline-block; float:none !important; }
}

#pagenav {position:absolute; top:18.5em; left:0em; margin:0; padding:0; height:0px; width:100%; z-index:90;}
#pagenav div         {font-family:mono; font-size:275%; margin:0; padding:0}
#pagenav div a       {text-decoration:none; color:#aaa;}
#pagenav div a:hover {text-decoration:none; color:#444;}

.box  div.nfo  {line-height:1.1em; font-size:85%; margin-top:.25em;}
.card div.nfo  {line-height:1.1em; font-size:90%; margin-top:.25em; border-top: 1px dotted #444;}
.card div.more {font-size:80%; position:absolute; bottom:2px; text-align:right; width:80%}

#cardholder div.gratis {background:url('img/gratis.png') no-repeat top right;}
#cardholder div.beta   {background:url('img/beta.png') no-repeat top right !important;}

.placeholder   {border: 1px solid transparent; border-radius: 15px; }
.shadow, .sha  {border: 1px solid #aaa; border-radius: 15px; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.15);}
.shadow:hover  {border: 1px solid #444; box-shadow: 0 2px 7px #444; background-color:#fbfbfb !important;}

/* plugin pages, right column */
#right         {float:right; width:12em;}
#right div.box {position:relative;
                height: 6em; width: 8em;
                margin: .5em 0 1em 1em; padding: 1em;
                text-align:center;
                background-color: #eee;
}

#right div.dl  {background:url('img/arrowdown.png') no-repeat center; background-color: #eee;}
#right div.cost{padding:.25em; font-size:120%; font-weight:strong;}
#right div.img {position:absolute; bottom:1px; text-align:center; width:7.75em;}

/* betas/nighlies: list-floats inside table */
table.nightly    {width:82em; margin-left:-11em;}
th.project a     {display:block; margin:0; padding:0; min-height:11em;}
th.project:hover {background-color:#ccc;}
th.gratis        {background:url('img/gratis.png') no-repeat top right;}
th.beta          {background:url('img/beta.png') no-repeat top right !important;}

tr.brd td        {border-left:1px solid #444;}
div.src          {margin:0; padding-right:3em;}

ul.list          {margin:0; padding:0;}
ul.list li       {float:left; min-width:22%; padding:0; margin:.7em 1%; display:inline-block; text-align:left; list-style:none;}

.nightly ul.list li {min-width:18%;}

ul.list li p, ul.list li a
                 {display:block; font-size:120%; line-height:1em; padding-left:40px; padding-top:0px; min-height:38px; text-decoration:none; color:#444; margin:0;}
ul.list li p     {cursor:default;}
ul.list li a.dl  {background:url('img/icon-arrow.png') no-repeat left .3em;}
ul.list li a.dl:hover
                 {background-color:#bce; border-radius:7px;}
ul.list small    {font-size:50%;}

ul.list li.img     {text-align:center;}
ul.list li.img img {vertical-align:middle}

/* midi-filter doc */
table.lv2doc     {margin:1em;}
table.lv2doc td  {padding: 0.1em 0.5em;}

dl.oneline dt, dl.oneline dd { display: inline-block; float: left; margin:.25em 0 .25em 2em;}
dl.oneline dt { margin:.25em .5em; clear: left; }
dl.oneline { clear: both; }