/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a {outline:none;}
a img {border:none;}
a:link,a:visited,a:active {text-decoration:none;}
a:hover {text-decoration:none;}

html    {   width: 100%: height: 100%;  }

body    {   width: 100%: background-color: #fff; color: #565656; font-size: 16px; font-family: Tahoma, Verdana, Geneva, sans-serif; position: relative;    }

/* tags */
header, footer, hgroup,
article, section, nav   {   display: block; }
h1, h2,
h3, h4,
h5, h6  {}
p       {}
ul      {   list-style: none;   }
ul li   {}

dl      {   overflow: auto; }
dt      {   clear: left; float: left; font-size: 12px; height: 30px; line-height: 30px;   }
dd      {   float: left; height: 30px;    }

a:link,
a:visited   {   text-decoration: none; color: #666;  }
a:active,
a:hover     {   color: #333;    }

/* classes */
.float-parent   {   overflow: auto; }
.float-left     {   float: left;    }
.float-right    {   float: right;   }
.float-clear    {   clear: both;    }
.float-left-clear  {   clear: left;    }
.float-right-clear {   clear: right;   }
.hidden         {   display: none;  }

.hover_off      {}
.hover_on       {   background-color: #ccc; color: #333; }


/* layout */
#wrapper    {   margin: 0; padding: 0;   }

/* header */
#header     {   padding: 10px; border-bottom: 1px solid #e5e5e5;    }

#header hgroup  {   margin: 0 30px 10px 0;   }

#header h1  {   font-size: 20px; font-weight: bold; line-height: 30px; color: #333;    }

#header p       {   padding: 0 10px; color: #444; font-size: 12px;    }
#header p img   {   vertical-align: top; }

#header > section       {   height: 90px; padding: 0; margin: 0 30px 0 0;   }
#header > section h1    {   font-size: 16px; color: #565656;    }

/* footer */
#footer     {   padding: 10px; height: 50px; border-top: 1px solid #e5e5e5;  }
#footer div         {   float: left; line-height: 40px;    }

#footer .copyright  {   font-size: 12px; color: #999;   }

#footer .privacy    {   float: right; width: 50%; line-height: 13px; text-align: right; padding: 15px 0 0; font-size: 11px; color: #ccc;   }

#footer .logo       {   width: 60px; height: 50px; background: url(../images/logo.png) no-repeat right -3px;   }
#footer .logo a     {   display: block; text-indent: -9999em;   }

/* search */
#search         {}
#search input   {   float: left; padding: 5px 5px 3px; width: 100px; height: 17px; margin: 0; font-size: 14px;   }
#search a           {   clear: left;    }
#search a:active    {}
#search a:hover     {}

/* sort/order */
#sort           {   width: 150px;   }
#order          {   width: 100px;   }

#sort header,
#order header   {}

#sort section,
#order section  {}

#sort ul,
#order ul       {}

#sort ul li     {   width: 50%; }
#order ul li    {}

#sort ul li.float-left  {}
#sort ul li.float-right {}

#sort ul li a,
#order ul li a          {   float: none; margin: 0; font-size: 14px; text-align: center;    }

/* menu */
#menu       {   width: 100%; height: 48px; position: fixed; top: 0; left: 0;   }

ul.menu             {   height: 48px;   }
ul.menu li          {   float: left; width: 25%; height: 48px; line-height: 48px;    }

ul.menu li a:link,
ul.menu li a:visited    {   display: block; height: 48px; padding: 0 10px; background-color: #222;    }
ul.menu li a:active,
ul.menu li a:hover      {   background-color: #333; }

ul.menu li a span.icon  {   float: none; margin: 0 auto;  }
ul.menu li a span.text  {}

/* content */
#content    {   width: 100%; min-height: 150px; padding: 0; background-color: #f8f8f8;    }

#content.loading    {   background: #f8f8f8 url(../images/loading.gif) no-repeat center 50px;  }

/* lists */
ul.list     {   height: 50px; padding: 0 5px; border-bottom: 1px dashed #444;   }
ul.list li  {   float: left; height: 50px; line-height: 50px;   }

/* error */
article.error           {   padding: 0 10px;    }

article.error h1        {   font-size: 16px; font-weight: bold; }
article.error p         {}

article.error a         {}
article.error a:hover   {}

/* server config */
article.server          {   padding: 0 10px;    }

article.server header   {}
article.server section  {}

article.server header h1    {   font-size: 17px; font-weight: bold; color: #595959; }

article.server section dl   {   padding: 0 0 10px;  }
article.server section dt   {   width: 150px;   }
article.server section dd   {}

article.server section dd input {   margin: 2px 0 0; padding: 5px 5px 3px; height: 17px; font-size: 14px;  }

article.server section dd input[type=checkbox]  {   margin: 9px 0 5px;  }

article.server section dd a.button  {   margin: 5px 0 0;    }

/* books */
article.book            {   padding: 0 10px;  }
article.book.active     {   background-color: #f1f1f1;  }

article.book header     {}
article.book section    {}

article.book header h2  {   height: 30px; line-height: 30px; font-size: 18px; font-weight: bold;    }

article.book .content   {   height: 180px; position: relative;  }

article.book .details       {   max-width: 70%; }
article.book .details ul    {}
article.book .details ul li {   line-height: 30px;    }

article.book .details ul li span    {   display: block; height: 30px;   }
article.book .details ul li .label  {   font-size: 11px; height: 20px; line-height: 20px; color: #888;   }
article.book .details ul li .data   {   font-size: 14px; padding: 0 0 0 10px; color: #444;   }

article.book .details ul li a           {   background-color: #fff; }
article.book .details ul li a:hover     {   background-color: #dff4ff;  }
article.book .details ul li a:active    {   background-color: #6299c5;  }

article.book .image     {   overflow: visible; z-index: 3;  }
article.book .image img {   max-height: 160px; z-index: 4;  }
article.book .image img.large   {   max-height: none; max-width: 100%; position: absolute; top: 0; right: 0; z-index: 5;   }

/* file links */
a.file                  {   background-image: url(../images/file.png); background-position: 5px 5px; background-repeat: no-repeat; padding: 5px 10px 5px 27px !important; margin: 0 10px 10px 0 !important;  }
a.file[href$=".rtf"]    {   background-image: url(../images/rtf.png);   }
a.file[href$=".lit"]    {   background-image: url(../images/lit.png);   }
a.file[href$=".pdf"]    {   background-image: url(../images/pdf.png);   }
a.file[href$=".doc"]    {   background-image: url(../images/dov.png);   }
a.file[href$=".txt"]    {   background-image: url(../images/txt.png);   }
a.file[href$=".epub"]   {   background-image: url(../images/epub.png);  }
a.file[href$=".zip"]    {   background-image: url(../images/zip.png);   }
a.file[href$=".rar"]    {   background-image: url(../images/rar.png);   }

/* paginate */
section.paginate        {   padding: 0 10px; border-bottom: 1px solid #e5e5e5;  }
section.paginate ul     {   height: 31px; position: relative; }
section.paginate ul li  {}

section.paginate ul li.prev     {   position: absolute; left: 0; top: 2px;  }
section.paginate ul li.next     {   position: absolute; right: 0; top: 2px; }

section.paginate ul li.current  {   float: none; width: 90px; height: 32px; line-height: 32px; margin: 0 auto; font-size: 12px; text-align: center;  }

section.paginate a          {   display: block; background-color: #fff;     }
section.paginate a:hover    {   background-color: #dff4ff; }
section.paginate a:active   {   background-color: #6299c5; }

/* button */
a.button        {   display: block; float: left; line-height: 15px; height: 15px; margin: 0; padding: 5px 10px 5px 7px; border: 1px solid #dedede; border-top: 1px solid #eee; border-left: 1px solid #eee; background-color: #f5f5f5; font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size: 13px; text-decoration: none; font-weight: bold; color: #565656; cursor: pointer;  }
a.button:hover,
a.button.hover  {   background-color: #dff4ff; border: 1px solid #c2e1ef; color: #336699;    }
a.button.active,
a.button:active {   background-color: #6299c5; border: 1px solid #6299c5; color: #fff;  }

a.button.define {   float: none; width: 150px;    }
a.button.save   {}
/* media queries */
/* portrait mode */
@media all and (orientation:portrait) and (max-width: 500px) and (max-device-width: 500px) {
    
    #search,
    #sort, #order           {   float: none;    }

    article.book            {}

    article.book header h2  {   height: auto; line-height: 22px;    }

    article.book .content   {   height: auto;   }
    article.book .details   {   float: none;    }
    article.book .image     {   float: none; clear: both; padding: 10px 0 0;    }
    
    article.book .details ul li.author,
    article.book .details ul li.series  {   float: none;    }

    article.book .details ul li .data   {   font-size: 14px; color: #444; padding: 0 10px;   }
    
}
/* landscape mode */
@media all and (orientation:landscape) {
    
}

http://www.pixaweb.co.uk/calibre/

forms part of our Calibre Remote. an alternate gui for calibre ebooks content-server. this is the css file. orientation media-query is used for browsers that support it (a slightly cleaner view for portrait mode).

Calibre Remote - CSS

css, CSS3

CSS